/* ============================================================ Fit Analyser 4 Free — main.css Temas: Light (Slate, padrão) e Dark (Deep Sea Blue) Aplicados via classe no : .theme-light / .theme-dark ============================================================ */ /* ── Tema Light — "Slate" ───────────────────────────────────── */ .theme-light { --bg-main: #f1f4f8; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f0f5ff; --bg-input: #f8fafc; --blue-mid: #1e4db7; --blue-bright: #2563eb; --blue-light: #1d4ed8; --blue-muted: #3b82f6; --accent-light: #dbeafe; --text-primary: #0f172a; --text-secondary:#475569; --text-muted: #94a3b8; --border: #e2e8f0; --border-focus: #2563eb; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --info: #0284c7; --sidebar-w: 220px; --topbar-h: 56px; --radius: 6px; --radius-lg: 10px; --transition: 0.18s ease; /* Toggle thumb posição (light = esquerda) */ --toggle-thumb-x: 2px; --toggle-bg: #cbd5e1; } /* ── Tema Dark — "Deep Sea Blue" ────────────────────────────── */ .theme-dark { --bg-main: #0f1e2e; --bg-sidebar: #0d1a27; --bg-card: #1a2d42; --bg-card-hover: #1e3450; --bg-input: #162436; --blue-mid: #1e4db7; --blue-bright: #2563eb; --blue-light: #3b82f6; --blue-muted: #4a7ab5; --accent-light: rgba(37,99,235,.15); --text-primary: #e8f0f8; --text-secondary:#8ea8c3; --text-muted: #5a7a96; --border: #1e3450; --border-focus: #2563eb; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #38bdf8; --sidebar-w: 220px; --topbar-h: 56px; --radius: 6px; --radius-lg: 10px; --transition: 0.18s ease; /* Toggle thumb posição (dark = direita) */ --toggle-thumb-x: 15px; --toggle-bg: #2563eb; } /* ── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 15px; } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg-main); color: var(--text-primary); line-height: 1.5; min-height: 100vh; transition: background 0.25s ease, color 0.25s ease; } a { color: var(--blue-bright); text-decoration: none; } a:hover { color: var(--blue-light); } /* ── Layout ─────────────────────────────────────────────────── */ .app-layout { display: flex; min-height: 100vh; } /* ── Sidebar ─────────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; z-index: 100; transition: background 0.25s ease, border-color 0.25s ease; } .sidebar-brand { border-bottom: 1px solid var(--border); } .brand-link { display: flex; align-items: center; gap: 10px; padding: 16px 18px; text-decoration: none; transition: opacity var(--transition); } .brand-link:hover { opacity: 0.85; } .brand-symbol { flex-shrink: 0; } /* Símbolo adapta ao tema */ .theme-dark .brand-symbol-inner { fill: #0d1a27; } .theme-light .brand-symbol-inner { fill: #dbeafe; } .theme-light .brand-symbol .bs-outer { stroke: #1e4db7; } .theme-light .brand-symbol .bs-inner { stroke: #93c5fd; } .theme-light .brand-symbol .bs-chev1 { stroke: #1e4db7; } .theme-light .brand-symbol .bs-chev2 { stroke: #3b82f6; } .theme-light .brand-symbol .bs-dot { fill: #1e4db7; } .brand-wordmark { display: flex; flex-direction: column; gap: 0; line-height: 1; } .brand-fit { font-family: 'Rajdhani', 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-primary); } .brand-analyser { color: var(--blue-bright); } .brand-tagline { font-family: 'Rajdhani', 'Segoe UI', sans-serif; font-weight: 500; font-size: 0.58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); margin-top: 1px; } .sidebar-nav { flex: 1; padding: 12px 0; display: flex; flex-direction: column; gap: 2px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 18px; color: var(--text-secondary); font-size: 0.88rem; border-left: 3px solid transparent; transition: background var(--transition), color var(--transition); } .nav-item:hover { background: var(--accent-light); color: var(--blue-bright); } .nav-item.active { background: var(--accent-light); color: var(--blue-bright); border-left-color: var(--blue-bright); font-weight: 600; } .nav-icon { font-size: 0.85rem; width: 16px; text-align: center; opacity: 0.8; } .sidebar-footer { padding: 14px 18px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sidebar-user-block { display: flex; align-items: center; gap: 8px; overflow: hidden; text-decoration: none; flex: 1; min-width: 0; transition: opacity var(--transition); } .sidebar-user-block:hover { opacity: 0.75; } .sidebar-username { font-size: 0.82rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .btn-logout { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--radius); transition: color var(--transition), border-color var(--transition); } .btn-logout:hover { color: var(--danger); border-color: var(--danger); } /* ── Main ────────────────────────────────────────────────────── */ .main-content { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; } .topbar { height: var(--topbar-h); background: var(--bg-sidebar); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 50; transition: background 0.25s ease; } .topbar-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); } .topbar-right-group { display: flex; align-items: center; gap: 12px; } .content-area { padding: 24px; flex: 1; } /* ── Cards ──────────────────────────────────────────────────── */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: background 0.25s ease; } .card-header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .card-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); } .card-body { padding: 20px; } /* ── Theme toggle ────────────────────────────────────────────── */ .theme-toggle-form { display: flex; align-items: center; } .theme-toggle { display: flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 20px; transition: background var(--transition); } .theme-toggle:hover { background: var(--accent-light); } .toggle-track { width: 30px; height: 17px; background: var(--toggle-bg); border-radius: 20px; position: relative; transition: background 0.25s ease; flex-shrink: 0; } .toggle-thumb { position: absolute; width: 13px; height: 13px; background: #fff; border-radius: 50%; top: 2px; left: var(--toggle-thumb-x); transition: left 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .toggle-label { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; } /* ── Topbar user menu ────────────────────────────────────────── */ .topbar-user-menu { position: relative; display: flex; align-items: center; } .user-menu-trigger { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 8px; border-radius: var(--radius); transition: background var(--transition); user-select: none; } .user-menu-trigger:hover { background: var(--accent-light); } .user-menu-name { font-size: 0.85rem; color: var(--text-secondary); } .user-menu-caret { font-size: 0.65rem; color: var(--text-muted); margin-top: 1px; } .user-menu-dropdown { position: absolute; top: 100%; right: 0; min-width: 160px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,.15); opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease; z-index: 200; padding-top: 8px; } .user-menu-dropdown::before { content: ''; display: block; height: 8px; margin-top: -8px; } .topbar-user-menu:hover .user-menu-dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); } .user-menu-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 0.85rem; color: var(--text-secondary); transition: background var(--transition), color var(--transition); } .user-menu-item:hover { background: var(--accent-light); color: var(--blue-bright); } .user-menu-item--danger:hover { color: var(--danger); background: rgba(239,68,68,.06); } .user-menu-divider { height: 1px; background: var(--border); margin: 2px 0; } /* ── Avatar ──────────────────────────────────────────────────── */ .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--blue-bright); color: #fff; font-weight: 700; flex-shrink: 0; overflow: hidden; } .avatar--xs { width: 28px; height: 28px; font-size: 0.75rem; } .avatar--sm { width: 34px; height: 34px; font-size: 0.9rem; } .avatar--lg { width: 72px; height: 72px; font-size: 1.8rem; } .avatar--img { object-fit: cover; padding: 0; background: none; } /* ── Alerts ──────────────────────────────────────────────────── */ .flash-messages { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; } .alert { padding: 10px 16px; border-radius: var(--radius); font-size: 0.88rem; border-left: 3px solid; } .alert-success { background: rgba(34,197,94,.1); border-color: var(--success); color: var(--success); } .alert-danger { background: rgba(220,38,38,.1); border-color: var(--danger); color: var(--danger); } .alert-warning { background: rgba(217,119,6,.1); border-color: var(--warning); color: var(--warning); } .alert-info { background: rgba(2,132,199,.1); border-color: var(--info); color: var(--info); } /* ── Forms ───────────────────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; } .form-group label { font-size: 0.82rem; color: var(--text-secondary); font-weight: 500; } .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"], .form-group input[type="date"], .form-group input[type="number"], .form-select { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); padding: 9px 12px; font-size: 0.9rem; transition: border-color var(--transition), background 0.25s ease; width: 100%; } .form-group input:focus, .form-select:focus { outline: none; border-color: var(--border-focus); } .form-group input::placeholder { color: var(--text-muted); } .form-error { font-size: 0.78rem; color: var(--danger); } .form-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; } .form-row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size: 0.82rem; } .checkbox-label { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); cursor: pointer; } .link-muted { color: var(--text-muted); font-size: 0.82rem; } .link-muted:hover { color: var(--blue-bright); } .link-table { color: var(--blue-bright); } .link-table:hover { color: var(--blue-light); } /* ── Buttons ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius); font-size: 0.88rem; font-weight: 600; cursor: pointer; border: none; transition: background var(--transition), opacity var(--transition); text-decoration: none; } .btn-primary { background: var(--blue-bright); color: #fff; } .btn-primary:hover { opacity: 0.88; color: #fff; } .btn-secondary { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border); } .btn-secondary:hover{ color: var(--text-primary); border-color: var(--blue-muted); } .btn-full { width: 100%; } .btn-text { background: none; border: none; color: var(--text-muted); font-size: 0.82rem; cursor: pointer; padding: 2px 6px; } .btn-text:hover { color: var(--danger); } .btn-danger-sm { background: none; border: 1px solid rgba(220,38,38,.35); color: rgba(220,38,38,.7); border-radius: var(--radius); font-size: 0.78rem; padding: 4px 10px; cursor: pointer; transition: all var(--transition); } .btn-danger-sm:hover { background: rgba(220,38,38,.08); border-color: var(--danger); color: var(--danger); } .btn-table { font-size: 0.78rem; color: var(--blue-bright); background: none; padding: 3px 10px; border: 1px solid var(--border); border-radius: var(--radius); transition: all var(--transition); cursor: pointer; } .btn-table:hover { border-color: var(--blue-bright); color: var(--blue-light); } .btn-table--warn { color: var(--warning); } .btn-table--warn:hover{ border-color: var(--warning); } .btn-danger { background: var(--danger); color: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border-radius: var(--radius); font-size: 0.88rem; font-weight: 600; cursor: pointer; border: none; transition: opacity var(--transition); } .btn-danger:hover { opacity: 0.85; color: #fff; } /* ── Auth ────────────────────────────────────────────────────── */ .auth-layout { display: flex; background: var(--bg-main); min-height: 100vh; } .auth-wrapper { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 24px; } .auth-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 32px; width: 100%; max-width: 400px; } .auth-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; } .auth-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 20px; color: var(--text-primary); } .auth-subtitle { font-size: 0.88rem; color: var(--text-secondary); margin-top: -14px; margin-bottom: 20px; } .auth-footer-text { text-align: center; margin-top: 20px; font-size: 0.85rem; color: var(--text-muted); } .auth-footer-text a { color: var(--blue-bright); } /* ── Upload ──────────────────────────────────────────────────── */ .upload-wrapper { max-width: 640px; } .drop-zone { border: 2px dashed var(--border); border-radius: var(--radius-lg); background: var(--bg-card); padding: 48px 32px; text-align: center; cursor: pointer; transition: border-color var(--transition), background var(--transition); } .drop-zone.drag-over { border-color: var(--blue-bright); background: var(--bg-card-hover); } .drop-zone-icon { font-size: 2.5rem; color: var(--blue-muted); margin-bottom: 12px; } .drop-zone-text { font-size: 1rem; margin-bottom: 6px; color: var(--text-primary); } .drop-zone-sub { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 14px; } .drop-zone-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 14px; } .file-list { margin-top: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .file-list-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .file-list ul { list-style: none; padding: 8px 0; } .file-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 0.85rem; border-bottom: 1px solid var(--border); } .file-item:last-child { border-bottom: none; } .file-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); } .file-item-size { color: var(--text-muted); font-size: 0.78rem; } .file-item-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; padding: 2px 4px; border-radius: 3px; transition: color var(--transition); } .file-item-remove:hover { color: var(--danger); } .upload-actions { padding: 14px 16px; border-top: 1px solid var(--border); } /* ── Dashboard ───────────────────────────────────────────────── */ .summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .summary-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; border-top: 3px solid var(--blue-bright); transition: background 0.25s ease; } .summary-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; } .summary-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); } .summary-value small { font-size: 0.75rem; font-weight: 400; color: var(--text-muted); } .summary-value--sm { font-size: 0.95rem; font-weight: 600; } /* ── Tabelas ─────────────────────────────────────────────────── */ .table-wrapper { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .data-table thead th { padding: 10px 16px; text-align: left; color: var(--text-muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); white-space: nowrap; } .data-table tbody td { padding: 11px 16px; color: var(--text-secondary); border-bottom: 1px solid var(--border); white-space: nowrap; } .data-table tbody tr:last-child td { border-bottom: none; } .table-row-link { cursor: pointer; transition: background var(--transition); } .table-row-link:hover td { background: var(--accent-light); color: var(--text-primary); } .td-action { text-align: right; } .td-actions-multi { display: flex; gap: 6px; justify-content: flex-end; align-items: center; } /* ── Paginação ───────────────────────────────────────────────── */ .pagination { display: flex; align-items: center; gap: 4px; margin-top: 16px; flex-wrap: wrap; } .page-btn { padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.82rem; color: var(--text-secondary); transition: all var(--transition); } .page-btn:hover { border-color: var(--blue-bright); color: var(--blue-bright); } .page-btn.active { background: var(--blue-bright); border-color: var(--blue-bright); color: #fff; } .page-ellipsis { color: var(--text-muted); padding: 5px 4px; font-size: 0.82rem; } /* ── Relatório ───────────────────────────────────────────────── */ .report-layout { max-width: 900px; display: flex; flex-direction: column; gap: 16px; } .report-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .report-meta { display: flex; flex-direction: column; gap: 2px; } .report-date { font-size: 0.95rem; color: var(--text-primary); } .report-file { font-size: 0.78rem; color: var(--text-muted); } .metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .metric-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .metric-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; } .metric-value { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); } .metric-value small { font-size: 0.72rem; font-weight: 400; color: var(--text-muted); } .metric-value--sm { font-size: 0.88rem; font-weight: 400; } .analysis-text { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; } .chart-card .card-body { padding: 16px 20px; } .chart-body canvas { width: 100% !important; display: block; } .report-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ── Admin ───────────────────────────────────────────────────── */ .admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; } .admin-links { display: flex; gap: 10px; flex-wrap: wrap; } .badge { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 20px; letter-spacing: .03em; } .badge-active { background: rgba(22,163,74,.12); color: var(--success); } .badge-inactive { background: rgba(220,38,38,.12); color: var(--danger); } .badge-admin { background: var(--accent-light); color: var(--blue-bright); } .filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .filter-form { display: flex; align-items: center; gap: 10px; } .filter-select { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); padding: 7px 12px; font-size: 0.85rem; cursor: pointer; } .filter-select:focus { outline: none; border-color: var(--border-focus); } /* ── Perfil ──────────────────────────────────────────────────── */ .profile-layout { max-width: 720px; display: flex; flex-direction: column; gap: 16px; } .profile-header-card .card-body { padding: 20px; } .profile-header-body { display: flex; align-items: center; gap: 24px; } .profile-info { display: flex; flex-direction: column; gap: 4px; } .profile-name { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); } .profile-email { font-size: 0.82rem; color: var(--text-muted); } .profile-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; font-size: 0.8rem; color: var(--text-muted); } .profile-stats span::before { content: '·'; margin-right: 6px; } .profile-stats span:first-child::before { content: ''; margin-right: 0; } .form-grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 20px; } .avatar-upload-zone { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; } .avatar-preview { position: relative; display: inline-block; } .avatar-upload-btn { position: absolute; bottom: 0; right: 0; width: 26px; height: 26px; background: var(--blue-bright); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; cursor: pointer; border: 2px solid var(--bg-card); transition: background var(--transition); line-height: 1; } .avatar-upload-btn:hover { opacity: 0.85; } .card-danger { border-color: rgba(220,38,38,.25); } .card-title--danger { color: var(--danger); } .danger-details summary { list-style: none; } .danger-details summary::-webkit-details-marker { display: none; } .danger-form { margin-top: 8px; } /* ── Utilitários ─────────────────────────────────────────────── */ .text-muted { color: var(--text-muted); font-size: 0.88rem; } .mt-16 { margin-top: 16px; }