/* ======================= RESET BÁSICO ======================= */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ======================= BASE DO SITE ======================= */ body { font-family: Arial, Helvetica, sans-serif; background: #e0e0e0; color: #333; margin: 0; overflow-x: hidden; /* evita rolagem lateral geral */ } /* Classe opcional para centralizar (use no do login) */ .page-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; } /* ======================= LOGIN ======================= */ .login-container { background: #ffffff; padding: 25px 20px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); width: 100%; max-width: 380px; text-align: center; margin: 16px; } .logo { margin-bottom: 15px; } .logo img { max-width: 140px; height: auto; } .login-container h1 { font-size: 22px; margin-bottom: 20px; color: #333; } /* Mensagem de erro */ .error-message { background: #ffe5e5; color: #b10000; padding: 10px 12px; border-radius: 8px; margin-bottom: 15px; font-size: 14px; } /* Inputs */ .input-group { text-align: left; margin-bottom: 15px; } .input-group label { display: block; margin-bottom: 5px; font-size: 14px; color: #444; } .input-group input, .input-group select { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #aaa; font-size: 14px; outline: none; background: #f8f8f8; } .input-group input:focus, .input-group select:focus { border-color: #000; } /* Botão de login PRETO */ .btn-login { width: 100%; padding: 12px; border-radius: 8px; border: none; background: #000000; color: #ffffff; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 10px; transition: background 0.2s ease, transform 0.1s ease; } .btn-login:hover { background: #222222; transform: translateY(-2px); } .btn-login:active { transform: translateY(0); } /* ======================= LAYOUT DO DASHBOARD ANTIGO (mantido para compatibilidade se usar .dashboard-container) ======================= */ .dashboard-container { display: flex; min-height: 100vh; background-color: #f0f2f5; } /* ======================= LAYOUT PRINCIPAL (NOVO) ======================= */ .layout { display: flex; min-height: 100vh; } /* ======================= SIDEBAR ======================= */ .sidebar { width: 230px; background: #111111; color: #ffffff; display: flex; flex-direction: column; padding: 20px 15px; box-shadow: 2px 0 5px rgba(0,0,0,0.1); flex-shrink: 0; } /* Logo e título da sidebar */ .sidebar-header { text-align: center; padding: 20px 0; border-bottom: 1px solid #444; margin-bottom: 20px; } .sidebar-logo { text-align: center; margin-bottom: 20px; } .sidebar-logo img { max-width: 100px; height: auto; display: block; margin: 0 auto 8px auto; filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 5px #ffffff); } .sidebar-title { color: #fff; font-size: 1.3rem; font-weight: bold; margin: 0; } /* Navegação lateral */ .sidebar-nav { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; flex: 1; } .sidebar-nav ul { list-style: none; padding: 0; } .sidebar-nav li { margin-bottom: 10px; } .sidebar-nav a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: #ffffff; font-size: 0.95rem; background: transparent; transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease; display: flex; align-items: center; } .sidebar-nav a i { margin-right: 10px; font-size: 1.1em; } .sidebar-nav a:hover, .sidebar-nav li.active a { background: #333333; color: #ffd700; transform: translateX(2px); } /* Link ativo */ .sidebar-nav a.active { background: #333333; color: #ffd700; font-weight: bold; } .sidebar-footer { font-size: 0.75rem; color: #bbbbbb; text-align: center; margin-top: 15px; border-top: 1px solid #444; padding-top: 10px; } /* ======================= ÁREA PRINCIPAL ======================= */ .main, .main-content { flex: 1; display: flex; flex-direction: column; background: #f0f2f5; padding: 0; } /* Barra superior */ .topbar, .dashboard-header { background-color: #ffffff; padding: 15px 20px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .topbar h1, .dashboard-header h1 { font-size: 1.5rem; margin: 0; color: #333; } /* Info do usuário + sair */ .user-info { text-align: right; font-size: 0.9rem; color: #555; } .user-info span { display: block; font-size: 0.9em; } .user-info .username, .user-info strong { font-weight: bold; color: #000; } .btn-logout { margin-top: 8px; padding: 6px 12px; border-radius: 6px; border: none; background: #dc3545; color: #ffffff; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.2s ease, transform 0.1s ease; } .btn-logout:hover { background: #c82333; transform: translateY(-1px); } /* Botão de menu (hambúrguer) - escondido no desktop */ .btn-menu-toggle { display: none; border: none; background: transparent; font-size: 1.4rem; cursor: pointer; margin-right: 10px; color: #333; } .btn-menu-toggle i { pointer-events: none; } /* ======================= CONTEÚDO (dashboard, alunos, professores, mensalidades) ======================= */ .dashboard-content { padding: 25px; background-color: #ffffff; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); margin: 20px; min-height: calc(100vh - 170px); } .dashboard-content h1 { font-size: 1.8em; color: #333; margin-bottom: 20px; } .dashboard-content h2 { font-size: 1.5em; color: #333; margin-top: 30px; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; } .welcome-message { font-size: 1.05rem; margin-bottom: 10px; } /* Cards de atalho */ .cards { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; } .card { background: #ffffff; border-radius: 10px; padding: 18px 16px; text-decoration: none; color: #333; box-shadow: 0 3px 8px rgba(0,0,0,0.06); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .card h3 { margin: 0 0 8px 0; font-size: 1.1rem; } .card p { margin: 0; font-size: 0.9rem; color: #555; } .card:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0,0,0,0.08); background: #fafafa; } /* ======================= Mensagens de sucesso/erro ======================= */ .message { padding: 12px 20px; border-radius: 8px; margin-bottom: 20px; font-size: 15px; font-weight: 600; display: flex; align-items: center; } .message.success { background-color: #e6ffe6; color: #008000; border: 1px solid #008000; } .message.error { background-color: #ffe5e5; color: #b10000; border: 1px solid #b10000; } .message i { margin-right: 10px; } /* ======================= Formulário de cadastro/edição ======================= */ .form-container { background-color: #f9f9f9; padding: 25px; border-radius: 10px; border: 1px solid #eee; margin-bottom: 30px; } .form-container h3 { font-size: 1.4em; color: #333; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; } /* ======================= 🔹 FORM EM LINHA (FILTROS HORIZONTAIS – DESKTOP) ======================= */ .inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .inline-form .input-group { margin-bottom: 0; margin-right: 10px; min-width: 160px; } /* ======================= TABELAS ======================= */ .alunos-grid { width: 100%; border-collapse: collapse; margin-top: 20px; background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .alunos-grid th, .alunos-grid td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #eeeeee; } .alunos-grid th { background-color: #f5f5f5; color: #555; font-weight: 600; text-transform: uppercase; font-size: 0.9em; } .alunos-grid tbody tr:last-child td { border-bottom: none; } .alunos-grid tbody tr:hover { background-color: #fdfdfd; } /* Wrapper para responsividade horizontal */ .table-responsive { width: 100%; overflow-x: auto; } /* ======================= BADGES DE STATUS ======================= */ .badge-ativo { background-color: #e6ffe6; color: #008000; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: bold; } .badge-inativo { background-color: #ffe6e6; color: #cc0000; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: bold; } /* ===== BADGE DE STATUS MENSALIDADES (apenas PAGO em verde) ===== */ .badge-status { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: bold; } .badge-pago { background-color: #28a745; color: #ffffff; } /* =============================== BOTÕES DE AÇÃO - versão compacta =============================== */ .btn-small { padding: 4px 8px; /* menor */ border-radius: 5px; text-decoration: none; font-size: 11px; /* menor */ font-weight: 600; margin-right: 4px; transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; cursor: pointer; } .btn-small i { margin-right: 3px; font-size: 12px; /* ícone menor */ } .btn-edit { background:#007bff; color:#ffffff; border-color:#007bff; } .btn-edit:hover { background:#0056b3; border-color:#0056b3; transform: translateY(-1px); } .btn-delete { background:#dc3545; color:#ffffff; border-color:#dc3545; } .btn-delete:hover { background:#c82333; border-color:#c82333; transform: translateY(-1px); } /* Botão cancelar (formulários) */ .btn-cancel { background-color: #dc3545; color: #ffffff; padding: 10px 15px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; margin-left: 10px; border: 1px solid #dc3545; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease; } .btn-cancel i { margin-right: 6px; } .btn-cancel:hover { background-color: #c82333; border-color: #bd2130; transform: translateY(-1px); } .btn-cancel:active { transform: translateY(0); } /* Botão principal (Novo cadastro / Salvar etc) */ .btn-new-register { background-color: #28a745; color: #ffffff; padding: 10px 15px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; border: none; cursor: pointer; transition: background 0.2s ease, transform 0.1s ease; } .btn-new-register i { margin-right: 8px; } .btn-new-register:hover { background-color: #218838; transform: translateY(-1px); } /* =============================== FAIXAS (BJJ) - versão compacta =============================== */ .faixa-badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; /* menor */ border-radius: 4px; font-weight: bold; font-size: 11px; /* menor */ border: 1px solid transparent; min-width: 60px; /* reduzido */ text-align: center; } /* Cores das faixas */ .faixa-branca { background:#ffffff; border-color:#000000; color:#000000; } .faixa-cinza { background:#bfbfbf; border-color:#8a8a8a; color:#000000; } .faixa-cinza-branca { background:#d6d6d6; border-color:#8a8a8a; color:#ffffff; } .faixa-cinza-preta { background:#9d9d9d; border-color:#5a5a5a; color:#000000; } .faixa-amarela { background:#ffeb3b; border-color:#f9c40a; color:#000000; } .faixa-amarela-branca { background:#fff59d; border-color:#f9c40a; color:#ffffff; } .faixa-amarela-preta { background:#fdd835; border-color:#c49100; color:#000000; } .faixa-laranja { background:#ff9800; border-color:#e65100; color:#ffffff; } .faixa-laranja-branca { background:#ffcc80; border-color:#ff9800; color:#ffffff; } .faixa-laranja-preta { background:#fb8c00; border-color:#bf360c; color:#000000; } .faixa-verde { background:#4caf50; border-color:#2e7d32; color:#ffffff; } .faixa-verde-branca { background:#a5d6a7; border-color:#388e3c; color:#ffffff; } .faixa-verde-preta { background:#66bb6a; border-color:#2e7d32; color:#000000; } .faixa-azul { background:#2196f3; border-color:#1565c0; color:#ffffff; } .faixa-roxa { background:#9c27b0; border-color:#6a1b9a; color:#ffffff; } .faixa-marrom { background:#795548; border-color:#4e342e; color:#ffffff; } .faixa-preta { background:#000000; border-color:#333333; color:#ffffff; } .faixa-default { background:#eeeeee; border-color:#bdbdbd; color:#333333; } /* Estilo das opções no select de faixa */ #faixa option.faixa-branca, #faixa option.faixa-cinza, #faixa option.faixa-cinza-branca, #faixa option.faixa-cinza-preta, #faixa option.faixa-amarela, #faixa option.faixa-amarela-branca, #faixa option.faixa-amarela-preta, #faixa option.faixa-laranja, #faixa option.faixa-laranja-branca, #faixa option.faixa-laranja-preta, #faixa option.faixa-verde, #faixa option.faixa-verde-branca, #faixa option.faixa-verde-preta, #faixa option.faixa-azul, #faixa option.faixa-roxa, #faixa option.faixa-marrom, #faixa option.faixa-preta, #faixa option.faixa-default { font-weight: bold; } /* ======================= HEADER DO ALUNO + TEXTO DE EDIÇÃO (usado em mensalidades.php) ======================= */ .aluno-header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .aluno-header i { color: #555; } .aluno-nome { font-weight: bold; font-size: 1.05rem; } .editing-label { font-size: 0.9rem; color: #c82333; font-weight: bold; } /* ======================= LISTA MOBILE DE MENSALIDADES (CARDS) ======================= */ .mensalidades-list-mobile { display: none; /* só aparece no mobile */ margin-top: 10px; } .mensalidade-mobile-card { border-radius: 8px; border: 1px solid #ddd; padding: 8px 10px; margin-bottom: 10px; background: #fafafa; } .mensalidade-mobile-header { width: 100%; border: none; background: transparent; text-align: left; padding: 6px 2px; font-size: 0.95rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .mensalidade-mobile-seta { font-size: 0.9rem; transition: transform 0.2s ease; } .mensalidade-mobile-card.aberta .mensalidade-mobile-seta { transform: rotate(180deg); } .mensalidade-mobile-body { margin-top: 6px; padding-top: 6px; border-top: 1px solid #eee; display: none; font-size: 0.9rem; } .mensalidade-mobile-card.aberta .mensalidade-mobile-body { display: block; } .mensalidade-mobile-body div { margin-bottom: 3px; } .mensalidade-mobile-acoes { margin-top: 8px; } /* Classe para esconder coisas só no desktop */ .desktop-only { display: block; } /* ======================= RESPONSIVIDADE GERAL (ATÉ 900px) ======================= */ @media (max-width: 900px) { .layout, .dashboard-container { flex-direction: column; } /* Sidebar vira menu retrátil */ .sidebar { width: 220px; position: fixed; top: 0; left: 0; bottom: 0; transform: translateX(-100%); transition: transform 0.25s ease; z-index: 1000; } .sidebar.sidebar-open { transform: translateX(0); } body.menu-open::before { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 900; } .main, .main-content { padding: 0; } /* Topbar mais vertical no mobile */ .topbar, .dashboard-header { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; } .topbar h1, .dashboard-header h1 { font-size: 1.3rem; } .user-info { text-align: left; width: 100%; } /* Botão de menu aparece no mobile */ .btn-menu-toggle { display: inline-flex; align-items: center; justify-content: center; } .dashboard-content { margin: 10px; padding: 15px; min-height: auto; } .cards { grid-template-columns: 1fr; } .inline-form { display: block; } .inline-form .input-group { margin-bottom: 10px; } .btn-new-register, .btn-logout, .btn-login { width: 100%; text-align: center; } /* tabelas: scroll horizontal só nelas, se precisar */ .table-responsive { width: 100%; overflow-x: auto; } .alunos-grid { width: 100%; min-width: 100%; /* não força maior que a tela */ } /* Menus mais compactos no mobile */ .sidebar-nav a { padding: 8px 10px; font-size: 0.9rem; } .sidebar-logo img { max-width: 70px; } .sidebar-title { font-size: 1.1rem; } } /* ======================= AJUSTE PARA TABELA DE ADMINS NO MOBILE (ATÉ 768px) ======================= */ @media (max-width: 768px) { /* Esconde a coluna de E-MAIL (4ª, 5ª e 6ª colunas) só na tabela de admins */ .admins-grid th:nth-child(4), .admins-grid td:nth-child(4), .admins-grid th:nth-child(5), .admins-grid td:nth-child(5), .admins-grid th:nth-child(6), .admins-grid td:nth-child(6) { display: none !important; } /* Botões só com ícone no mobile (sem texto) */ .admins-grid .btn-small { padding: 4px 6px; font-size: 0; /* esconde o texto, deixa só o ícone */ } .admins-grid .btn-small i { font-size: 14px; margin: 0; } /* RESULTADOS DA BUSCA DE ALUNOS (mensalidades.php) */ /* Esconde apenas o ID (1ª coluna) na lista de resultados de busca */ .alunos-busca-grid th:nth-child(1), .alunos-busca-grid td:nth-child(1) { display: none !important; } /* MENSALIDADES - no mobile usamos cards, não a tabela */ .mensalidades-grid { display: none; /* esconde a tabela de mensalidades */ } .desktop-only { display: none; /* tudo marcado como desktop-only some no mobile */ } .mensalidades-list-mobile { display: block; /* lista de cartões aparece */ } /* Botões dos cards só com ícone */ .mensalidade-mobile-acoes .btn-small { padding: 4px 6px; font-size: 0; /* esconde o texto, deixa só o ícone */ } .mensalidade-mobile-acoes .btn-small i { font-size: 14px; margin: 0; } } /* ======================= AJUSTE FINO DAS TABELAS NO CELULAR (ATÉ 600px) ======================= */ @media (max-width: 600px) { .table-responsive { width: 100%; overflow-x: auto; /* deixa rolar horizontal se realmente precisar */ } .alunos-grid { width: 100%; min-width: 100%; } .alunos-grid th, .alunos-grid td { padding: 6px 8px; font-size: 12px; white-space: normal; /* permite quebrar linha */ word-wrap: break-word; } /* Esconde a coluna ID (1ª coluna) no mobile em tabelas gerais de alunos */ .alunos-grid th:nth-child(1), .alunos-grid td:nth-child(1) { display: none; } .alunos-grid:not(.admins-grid):not(.mensalidades-grid) th:nth-child(5), .alunos-grid:not(.admins-grid):not(.mensalidades-grid) td:nth-child(5) { display: none; } .alunos-grid:not(.admins-grid):not(.mensalidades-grid) th:nth-child(6), .alunos-grid:not(.admins-grid):not(.mensalidades-grid) td:nth-child(6) { display: none; } /* Botões de ação ainda mais compactos no mobile */ .btn-small{ padding:3px 6px; font-size:10px; } .btn-small i{ margin-right:2px; font-size:11px; } .alunos-grid td:last-child { white-space: nowrap; } .alunos-grid td:last-child .btn-small { margin-bottom: 4px; } }