/* ============================================================ THEME SYSTEM dark / light / system Applied via [data-theme] on element ============================================================ */ :root, [data-theme="dark"] { --bg: #080810; --bg2: #10101c; --bg3: #16162a; --bg-topbar: rgba(8,8,18,0.88); --accent: #6c63ff; --accent-light: #a78bfa; --accent-glow: rgba(108,99,255,0.35); --accent-glow2: rgba(108,99,255,0.15); --glass: rgba(255,255,255,0.04); --glass-h: rgba(255,255,255,0.07); --border: rgba(255,255,255,0.08); --border-h: rgba(108,99,255,0.5); --text: #eeeeff; --text2: #9090bb; --text3: #55556a; --green: #22c55e; --green-bg: rgba(34,197,94,0.12); --blue: #38bdf8; --blue-bg: rgba(56,189,248,0.12); --orange: #fb923c; --orange-bg: rgba(251,146,60,0.12); --red: #f87171; --red-bg: rgba(248,113,113,0.12); --purple-bg: rgba(108,99,255,0.12); --card-shadow: 0 4px 24px rgba(0,0,0,0.35); --input-bg: rgba(255,255,255,0.04); --auth-bg: rgba(16,16,28,0.82); color-scheme: dark; } [data-theme="light"] { --bg: #f1f1f7; --bg2: #ffffff; --bg3: #e8e8f2; --bg-topbar: rgba(255,255,255,0.92); --accent: #5b52e8; --accent-light: #7c71f0; --accent-glow: rgba(91,82,232,0.28); --accent-glow2: rgba(91,82,232,0.12); --glass: rgba(0,0,0,0.03); --glass-h: rgba(0,0,0,0.05); --border: rgba(0,0,0,0.09); --border-h: rgba(91,82,232,0.4); --text: #1a1a2e; --text2: #52527a; --text3: #9898b8; --green: #16a34a; --green-bg: rgba(22,163,74,0.1); --blue: #0284c7; --blue-bg: rgba(2,132,199,0.1); --orange: #ea580c; --orange-bg: rgba(234,88,12,0.1); --red: #dc2626; --red-bg: rgba(220,38,38,0.08); --purple-bg: rgba(91,82,232,0.1); --card-shadow: 0 2px 12px rgba(0,0,0,0.06); --input-bg: rgba(0,0,0,0.03); --auth-bg: rgba(255,255,255,0.95); color-scheme: light; } :root { --radius: 14px; --radius-sm: 8px; --radius-lg: 20px; --transition: all 0.25s cubic-bezier(0.4,0,0.2,1); } /* ============================================================ RESET & BASE ============================================================ */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { font-size:16px; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background 0.3s ease, color 0.2s ease; } a { text-decoration:none; color:inherit; } button { font-family:inherit; cursor:pointer; } input,button { border:none; outline:none; } svg { display:block; flex-shrink:0; } /* ============================================================ LOGIN PAGE ============================================================ */ .auth-bg { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; position: relative; overflow: hidden; background: radial-gradient(ellipse at 30% 60%, var(--accent-glow2) 0%, transparent 60%), radial-gradient(ellipse at 80% 10%, rgba(167,139,250,0.06) 0%, transparent 50%), var(--bg); } .orb { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; } .orb-1 { width:500px;height:500px;background:radial-gradient(circle,var(--accent-glow),transparent 70%);top:-150px;left:-150px;animation:float 8s ease-in-out infinite; } .orb-2 { width:400px;height:400px;background:radial-gradient(circle,rgba(167,139,250,.12),transparent 70%);bottom:-100px;right:-100px;animation:float 10s ease-in-out infinite reverse; } .orb-3 { width:250px;height:250px;background:radial-gradient(circle,rgba(56,189,248,.08),transparent 70%);top:50%;right:20%;animation:float 12s ease-in-out infinite 2s; } @keyframes float { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-30px) scale(1.05)} } .auth-wrapper { position:relative; z-index:1; width:100%; max-width:440px; } .auth-card { background: var(--auth-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.75rem 2.5rem; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 25px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06); animation: cardIn 0.5s cubic-bezier(0.4,0,0.2,1) both; } @keyframes cardIn { from{opacity:0;transform:translateY(24px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} } .auth-header { text-align:center; margin-bottom:2rem; } .auth-logo { display:flex; justify-content:center; margin-bottom:1.25rem; filter:drop-shadow(0 0 20px var(--accent-glow)); } .auth-header h1 { font-size:1.6rem; font-weight:700; color:var(--text); letter-spacing:-.5px; margin-bottom:.35rem; } .auth-header p { color:var(--text2); font-size:.9rem; } .alert-box { margin-bottom:1.25rem; } .alert { display:flex; align-items:center; gap:.6rem; padding:.75rem 1rem; border-radius:var(--radius-sm); font-size:.875rem; background:var(--red-bg); border:1px solid rgba(220,38,38,.2); color:var(--red); } .auth-form { display:flex; flex-direction:column; gap:1.25rem; } .form-group { display:flex; flex-direction:column; gap:.45rem; } .form-group label { display:flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:600; color:var(--text2); letter-spacing:.3px; text-transform:uppercase; } .form-group input { width:100%; padding:.85rem 1rem; background:var(--input-bg); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:.95rem; transition:var(--transition); } .form-group input::placeholder { color:var(--text3); } .form-group input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow2); background:rgba(108,99,255,.05); } .input-wrapper { position:relative; } .input-wrapper input { padding-right:3rem; } .toggle-pw { position:absolute; right:.85rem; top:50%; transform:translateY(-50%); background:none; color:var(--text3); padding:4px; line-height:0; transition:color .2s; } .toggle-pw:hover { color:var(--text2); } .btn-primary { display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%; padding:.95rem 1.5rem; background:linear-gradient(135deg,var(--accent),var(--accent-light)); border-radius:var(--radius-sm); color:#fff; font-size:1rem; font-weight:600; transition:var(--transition); margin-top:.25rem; position:relative; overflow:hidden; } .btn-primary::before { content:""; position:absolute; inset:0; background:rgba(255,255,255,.08); opacity:0; transition:opacity .2s; } .btn-primary:hover::before { opacity:1; } .btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px var(--accent-glow); } .btn-primary:active { transform:translateY(0); } .auth-hint { text-align:center; margin-top:1.5rem; font-size:.82rem; color:var(--text3); } .auth-hint strong { color:var(--text2); } /* ============================================================ APP LAYOUT ============================================================ */ .app-layout { display:flex; min-height:100vh; } /* Sidebar */ .sidebar { width:240px; flex-shrink:0; background:var(--bg2); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:1.5rem 1rem; position:sticky; top:0; height:100vh; overflow-y:auto; transition:transform .3s cubic-bezier(.4,0,.2,1), background .3s ease; z-index:200; } .sidebar-brand { display:flex; align-items:center; gap:.75rem; padding:.5rem .75rem 1.5rem; font-size:1.1rem; font-weight:700; color:var(--text); letter-spacing:-.3px; } .sidebar-nav { display:flex; flex-direction:column; gap:.25rem; flex:1; } .nav-item { display:flex; align-items:center; gap:.75rem; padding:.7rem .85rem; border-radius:var(--radius-sm); color:var(--text2); font-size:.9rem; font-weight:500; transition:var(--transition); border:1px solid transparent; } .nav-item:hover { background:var(--glass-h); color:var(--text); } .nav-item.active { background:linear-gradient(135deg,rgba(108,99,255,.18),rgba(167,139,250,.08)); color:var(--accent-light); border-color:rgba(108,99,255,.2); } .nav-item svg { opacity:.7; transition:opacity .2s; } .nav-item.active svg,.nav-item:hover svg { opacity:1; } /* Theme block inside sidebar */ .sidebar-theme { display: none; /* hidden on desktop (topbar has it) */ align-items: center; justify-content: space-between; padding: .6rem .85rem; margin-bottom: .5rem; background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-sm); } .sidebar-theme-label { font-size:.78rem; font-weight:600; color:var(--text3); } /* Show inside sidebar only on mobile */ @media (max-width:768px) { .sidebar-theme { display:flex; } } .sidebar-footer { margin-top:auto; padding-top:1rem; border-top:1px solid var(--border); } .btn-logout { display:flex; align-items:center; gap:.75rem; width:100%; padding:.7rem .85rem; border-radius:var(--radius-sm); background:none; border:1px solid transparent; color:var(--text2); font-size:.9rem; font-weight:500; transition:var(--transition); } .btn-logout:hover { background:var(--red-bg); border-color:rgba(220,38,38,.2); color:var(--red); } .sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:199; backdrop-filter:blur(2px); } .sidebar-overlay.show { display:block; } /* Main area */ .main-area { flex:1; display:flex; flex-direction:column; min-width:0; } /* Topbar */ .topbar { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.875rem 1.5rem; background:var(--bg-topbar); border-bottom:1px solid var(--border); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); position:sticky; top:0; z-index:100; transition:background .3s ease; } .topbar-left { display:flex; align-items:center; gap:.75rem; } .topbar-right { display:flex; align-items:center; gap:.6rem; } .hamburger { display:none; padding:6px; background:var(--glass); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text2); transition:var(--transition); line-height:0; } .hamburger:hover { color:var(--text); background:var(--glass-h); } .page-title { font-size:1.05rem; font-weight:700; color:var(--text); line-height:1.2; } .breadcrumb { font-size:.76rem; color:var(--text3); } /* Theme switcher */ .theme-switcher { display:flex; align-items:center; gap:2px; background:var(--glass); border:1px solid var(--border); border-radius:99px; padding:3px; } .theme-btn { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:99px; background:none; color:var(--text3); transition:var(--transition); line-height:0; } .theme-btn:hover { color:var(--text2); background:var(--glass-h); } .theme-btn.active { background:var(--accent); color:#fff; box-shadow:0 2px 8px var(--accent-glow); } /* User badge */ .user-badge { display:flex; align-items:center; gap:.6rem; padding:.4rem .85rem .4rem .4rem; background:var(--glass); border:1px solid var(--border); border-radius:99px; } .avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-light)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; color:#fff; flex-shrink:0; } .user-info { display:flex; flex-direction:column; line-height:1.2; } .user-name { font-size:.85rem; font-weight:600; color:var(--text); } .user-role { font-size:.7rem; color:var(--text3); } /* Page body */ .page-body { padding:1.75rem; display:flex; flex-direction:column; gap:1.5rem; flex:1; } /* Greeting */ .greeting-card { background:linear-gradient(135deg,rgba(108,99,255,.13),rgba(167,139,250,.06)); border:1px solid rgba(108,99,255,.18); border-radius:var(--radius-lg); padding:2rem 2.5rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; overflow:hidden; position:relative; } .greeting-card::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,transparent 50%,rgba(167,139,250,.04)); pointer-events:none; } .greeting-text h1 { font-size:1.5rem; font-weight:700; color:var(--text); letter-spacing:-.5px; margin-bottom:.3rem; } .greeting-text p { color:var(--text2); font-size:.93rem; } .greeting-art { flex-shrink:0; opacity:.5; } /* Dashboard stats */ .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; } .stat-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.25rem; display:flex; align-items:center; gap:.9rem; transition:var(--transition); box-shadow:var(--card-shadow); } .stat-card:hover { border-color:var(--border-h); transform:translateY(-2px); box-shadow:0 8px 30px var(--accent-glow2); } .stat-icon { width:42px; height:42px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .stat-icon.stat-green { background:var(--green-bg); color:var(--green); } .stat-icon.stat-blue { background:var(--blue-bg); color:var(--blue); } .stat-icon.stat-purple { background:var(--purple-bg); color:var(--accent-light); } .stat-icon.stat-orange { background:var(--orange-bg); color:var(--orange); } .stat-content { flex:1; min-width:0; } .stat-value { font-size:.92rem; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .stat-label { font-size:.76rem; color:var(--text3); margin-top:2px; } .stat-badge { font-size:.7rem; font-weight:600; padding:.18rem .55rem; border-radius:99px; white-space:nowrap; flex-shrink:0; } .stat-badge-green { background:var(--green-bg); color:var(--green); border:1px solid rgba(34,197,94,.2); } /* Info panel */ .info-panel { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--card-shadow); } .info-panel-header { padding:1rem 1.5rem; border-bottom:1px solid var(--border); } .info-panel-header h3 { font-size:.9rem; font-weight:600; color:var(--text); } .info-grid { display:grid; grid-template-columns:repeat(3,1fr); } .info-item { padding:1rem 1.5rem; border-bottom:1px solid var(--border); border-right:1px solid var(--border); display:flex; flex-direction:column; gap:.2rem; transition:background .2s; } .info-item:hover { background:var(--glass); } .info-item:nth-child(3n) { border-right:none; } .info-label { font-size:.73rem; color:var(--text3); text-transform:uppercase; letter-spacing:.4px; font-weight:600; } .info-value { font-size:.9rem; color:var(--text); font-weight:500; } /* ============================================================ REPORTS PAGE ============================================================ */ .filter-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.25rem; box-shadow:var(--card-shadow); } .filter-left { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; color:var(--text2); } .filter-label { font-size:.85rem; font-weight:600; color:var(--text2); white-space:nowrap; } .date-range { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } .date-sep { font-size:.8rem; color:var(--text3); } .date-input { padding:.5rem .75rem; background:var(--input-bg); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:.85rem; font-family:inherit; cursor:pointer; transition:var(--transition); } .date-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow2); outline:none; } .date-input::-webkit-calendar-picker-indicator { filter:invert(.6); cursor:pointer; opacity:.7; } [data-theme="light"] .date-input::-webkit-calendar-picker-indicator { filter:none; } .filter-right { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; } .preset-btns { display:flex; gap:3px; background:var(--glass); border:1px solid var(--border); border-radius:99px; padding:3px; } .preset-btn { padding:.28rem .7rem; border-radius:99px; background:none; font-size:.78rem; font-weight:600; color:var(--text3); transition:var(--transition); } .preset-btn:hover { color:var(--text2); background:var(--glass-h); } .preset-btn.active { background:var(--accent); color:#fff; box-shadow:0 2px 8px var(--accent-glow); } .btn-apply { display:flex; align-items:center; gap:.4rem; padding:.45rem .9rem; background:linear-gradient(135deg,var(--accent),var(--accent-light)); border-radius:99px; color:#fff; font-size:.82rem; font-weight:600; transition:var(--transition); } .btn-apply:hover { transform:translateY(-1px); box-shadow:0 4px 16px var(--accent-glow); } /* KPI grid */ .kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; } .kpi-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; display:flex; align-items:center; gap:.9rem; box-shadow:var(--card-shadow); transition:var(--transition); animation:fadeUp .4s ease both; } .kpi-card:hover { transform:translateY(-3px); border-color:var(--border-h); box-shadow:0 10px 30px var(--accent-glow2); } .kpi-card:nth-child(1){animation-delay:.05s} .kpi-card:nth-child(2){animation-delay:.10s} .kpi-card:nth-child(3){animation-delay:.15s} .kpi-card:nth-child(4){animation-delay:.20s} @keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} } .kpi-icon { width:46px; height:46px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .kpi-icon.kpi-purple { background:var(--purple-bg); color:var(--accent-light); } .kpi-icon.kpi-green { background:var(--green-bg); color:var(--green); } .kpi-icon.kpi-blue { background:var(--blue-bg); color:var(--blue); } .kpi-icon.kpi-orange { background:var(--orange-bg); color:var(--orange); } .kpi-body { flex:1; min-width:0; } .kpi-value { font-size:1.1rem; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:all .4s ease; } .kpi-label { font-size:.76rem; color:var(--text3); margin-top:2px; } .kpi-trend { display:flex; align-items:center; gap:2px; font-size:.78rem; font-weight:700; white-space:nowrap; flex-shrink:0; } .kpi-trend-up { color:var(--green); } .kpi-trend-down { color:var(--red); } /* Charts layout */ .charts-row { display:grid; grid-template-columns:1fr 320px; gap:1rem; } .chart-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--card-shadow); display:flex; flex-direction:column; gap:1.25rem; transition:background .3s ease, border-color .3s ease; } .chart-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; } .chart-header h3 { font-size:.95rem; font-weight:700; color:var(--text); margin-bottom:2px; } .chart-header p { font-size:.78rem; color:var(--text3); } .chart-legend { display:flex; align-items:center; gap:.75rem; font-size:.78rem; color:var(--text2); flex-wrap:wrap; } .legend-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; vertical-align:middle; } .chart-wrap { position:relative; width:100%; height:240px; } .chart-wrap--donut { height:200px; display:flex; align-items:center; justify-content:center; } .donut-legend { display:flex; flex-direction:column; gap:.45rem; } .donut-legend-item { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--text2); } .donut-legend-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; } .donut-legend-label { flex:1; } .donut-legend-pct { font-weight:700; color:var(--text); } /* ============================================================ USERS PAGE ============================================================ */ .page-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; } .section-title { font-size:1.1rem; font-weight:700; color:var(--text); } .section-sub { font-size:.8rem; color:var(--text3); margin-top:2px; } .btn-new-user { display:flex; align-items:center; gap:.45rem; padding:.55rem 1.1rem; background:linear-gradient(135deg,var(--accent),var(--accent-light)); border-radius:var(--radius-sm); color:#fff; font-size:.88rem; font-weight:600; transition:var(--transition); } .btn-new-user:hover { transform:translateY(-1px); box-shadow:0 4px 16px var(--accent-glow); } /* Table */ .table-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--card-shadow); } .table-wrap { overflow-x:auto; } .data-table { width:100%; border-collapse:collapse; font-size:.875rem; } .data-table thead tr { border-bottom:1px solid var(--border); } .data-table th { padding:.9rem 1rem; text-align:left; font-size:.73rem; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; } .data-table td { padding:.85rem 1rem; color:var(--text); border-bottom:1px solid var(--border); vertical-align:middle; } .data-table tbody tr:last-child td { border-bottom:none; } .data-table tbody tr:hover td { background:var(--glass); } .text-secondary { color:var(--text2); font-size:.875rem; } .table-footer { padding:.75rem 1rem; border-top:1px solid var(--border); } .user-cell { display:flex; align-items:center; gap:.65rem; } .user-cell-name { font-weight:600; color:var(--text); font-size:.875rem; } .avatar-sm { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-light)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; color:#fff; flex-shrink:0; } /* Badges */ .badge { display:inline-flex; align-items:center; font-size:.7rem; font-weight:700; padding:.18rem .55rem; border-radius:99px; white-space:nowrap; } .badge-green { background:var(--green-bg); color:var(--green); border:1px solid rgba(34,197,94,.2); } .badge-red { background:var(--red-bg); color:var(--red); border:1px solid rgba(220,38,38,.2); } .badge-purple { background:var(--purple-bg); color:var(--accent-light); border:1px solid rgba(108,99,255,.2); } /* Permission dots */ .perm-dots { display:flex; gap:4px; } .perm-dot { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; font-size:.65rem; font-weight:800; background:var(--glass); color:var(--text3); border:1px solid var(--border); transition:var(--transition); } .perm-dot--on { background:var(--purple-bg); color:var(--accent-light); border-color:rgba(108,99,255,.25); } /* Action buttons */ .action-btns { display:flex; align-items:center; justify-content:flex-end; gap:.4rem; } .action-btn { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--radius-sm); background:var(--glass); border:1px solid var(--border); color:var(--text2); transition:var(--transition); line-height:0; } .action-btn--edit:hover { background:var(--blue-bg); color:var(--blue); border-color:rgba(2,132,199,.25); } .action-btn--delete:hover { background:var(--red-bg); color:var(--red); border-color:rgba(220,38,38,.25); } /* Alert success */ .alert.alert-success { background:var(--green-bg); border-color:rgba(34,197,94,.2); color:var(--green); } /* ============================================================ USER FORM PAGE ============================================================ */ .form-page-header { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; } .btn-back { display:flex; align-items:center; gap:.35rem; font-size:.85rem; color:var(--text2); padding:.4rem .75rem; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--glass); transition:var(--transition); } .btn-back:hover { color:var(--text); background:var(--glass-h); } .user-form { display:flex; flex-direction:column; gap:1.5rem; } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; } .form-section { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--card-shadow); display:flex; flex-direction:column; gap:1rem; } .form-section--full { grid-column:1 / -1; } .form-section-title { display:flex; align-items:center; gap:.5rem; font-size:.88rem; font-weight:700; color:var(--text); padding-bottom:.75rem; border-bottom:1px solid var(--border); } .field-group { display:flex; flex-direction:column; gap:.4rem; } .field-group label { font-size:.78rem; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.3px; } .field-group input[type=text], .field-group input[type=email], .field-group input[type=password] { padding:.75rem 1rem; background:var(--input-bg); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:.9rem; font-family:inherit; transition:var(--transition); } .field-group input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow2); outline:none; } .field-group input::placeholder { color:var(--text3); } .field-disabled { opacity:.5; cursor:not-allowed; } /* Toggle switch */ .field-toggle { margin-top:.25rem; } .toggle-label { display:flex; align-items:center; justify-content:space-between; cursor:pointer; gap:1rem; } .toggle-label span { font-size:.9rem; color:var(--text2); } .toggle-wrap { position:relative; width:44px; height:24px; flex-shrink:0; } .toggle-input { opacity:0; width:0; height:0; position:absolute; } .toggle-track { position:absolute; inset:0; background:var(--border); border-radius:99px; transition:var(--transition); cursor:pointer; } .toggle-track::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:var(--transition); } .toggle-input:checked + .toggle-track { background:var(--accent); } .toggle-input:checked + .toggle-track::after { transform:translateX(20px); } /* Password field */ .input-pw-wrap { position:relative; } .input-pw-wrap input { width:100%; padding:.75rem 2.75rem .75rem 1rem; background:var(--input-bg); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:.9rem; font-family:inherit; transition:var(--transition); } .input-pw-wrap input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow2); outline:none; } .input-pw-wrap input::placeholder { color:var(--text3); } .btn-toggle-pw { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); background:none; color:var(--text3); padding:3px; line-height:0; transition:color .2s; } .btn-toggle-pw:hover { color:var(--text2); } /* Password rules */ .pw-rules { display:flex; flex-direction:column; gap:.3rem; margin-top:.25rem; } .pw-rule { display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--text3); transition:color .2s; } .pw-rule--ok { color:var(--green); } /* Permission cards */ .perm-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; } .perm-card { display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:1.1rem .75rem; background:var(--glass); border:2px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:var(--transition); position:relative; text-align:center; } .perm-card input[type=checkbox] { position:absolute; opacity:0; pointer-events:none; } .perm-card:hover { border-color:var(--border-h); background:var(--glass-h); } .perm-card--on { border-color:var(--accent); background:rgba(108,99,255,.08); } .perm-card-icon { width:40px; height:40px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; } .perm-card-text { display:flex; flex-direction:column; gap:2px; } .perm-card-name { font-size:.82rem; font-weight:700; color:var(--text); } .perm-card-desc { font-size:.72rem; color:var(--text3); } .perm-card-check { width:20px; height:20px; border-radius:50%; background:var(--border); display:flex; align-items:center; justify-content:center; transition:var(--transition); color:transparent; } .perm-card--on .perm-card-check { background:var(--accent); color:#fff; } /* Form actions */ .form-actions { display:flex; align-items:center; justify-content:flex-end; gap:.75rem; padding-top:.5rem; } .btn-cancel { padding:.65rem 1.25rem; border-radius:var(--radius-sm); background:var(--glass); border:1px solid var(--border); color:var(--text2); font-size:.9rem; font-weight:600; transition:var(--transition); } .btn-cancel:hover { color:var(--text); background:var(--glass-h); } .btn-save { display:flex; align-items:center; gap:.45rem; padding:.65rem 1.5rem; background:linear-gradient(135deg,var(--accent),var(--accent-light)); border-radius:var(--radius-sm); color:#fff; font-size:.9rem; font-weight:600; transition:var(--transition); } .btn-save:hover { transform:translateY(-1px); box-shadow:0 4px 16px var(--accent-glow); } /* Responsive for form */ @media (max-width:900px) { .form-grid { grid-template-columns:1fr; } .form-section--full { grid-column:1; } .perm-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:480px) { .perm-grid { grid-template-columns:1fr 1fr; } .form-actions { flex-direction:column-reverse; } .btn-cancel,.btn-save { width:100%; justify-content:center; } } /* ============================================================ SCROLLBAR ============================================================ */ ::-webkit-scrollbar { width:5px; height:5px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; } ::-webkit-scrollbar-thumb:hover { background:var(--text3); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1100px) { .stats-grid { grid-template-columns:repeat(2,1fr); } .kpi-grid { grid-template-columns:repeat(2,1fr); } .charts-row { grid-template-columns:1fr; } .info-grid { grid-template-columns:repeat(2,1fr); } .info-item:nth-child(3n) { border-right:1px solid var(--border); } .info-item:nth-child(even) { border-right:none; } .greeting-card { padding:1.5rem 2rem; } } @media (max-width:768px) { .sidebar { position:fixed; left:0; top:0; height:100%; transform:translateX(-100%); width:260px; box-shadow:4px 0 30px rgba(0,0,0,.3); } .sidebar.open { transform:translateX(0); } .hamburger { display:flex; } .stats-grid { grid-template-columns:repeat(2,1fr); } .kpi-grid { grid-template-columns:repeat(2,1fr); } .info-grid { grid-template-columns:1fr; } .info-item:nth-child(n) { border-right:none; } .topbar { padding:.75rem 1rem; } .page-body { padding:1rem; gap:1rem; } .greeting-text h1 { font-size:1.25rem; } .greeting-art { display:none; } .greeting-card { padding:1.25rem; } .date-input { font-size:.8rem; padding:.4rem .55rem; } .filter-bar { padding:.875rem 1rem; } .user-info { display:none; } .user-badge { padding:.4rem; } .chart-wrap { height:200px; } .chart-wrap--donut { height:180px; } .auth-card { padding:2rem 1.5rem; } } @media (max-width:480px) { .stats-grid { grid-template-columns:1fr; } .kpi-grid { grid-template-columns:1fr; } .preset-btns { display:none; } .greeting-card { display:none; } .topbar-right { gap:.35rem; } .theme-switcher { padding:2px; gap:1px; } .theme-btn { width:26px; height:26px; } .page-body { padding:.75rem; gap:.75rem; } .filter-bar { flex-direction:column; align-items:flex-start; } .filter-right { width:100%; justify-content:flex-end; } } /* ═══════════════════════════════════════════════════════════════ SETTINGS PAGE — Tabs, Sections, Info Boxes, OpenAI, Email ═══════════════════════════════════════════════════════════════ */ /* Tab navigation */ .settings-tabs { display: flex; gap: .375rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: .375rem; margin-bottom: 1.5rem; } .tab-btn { display: flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: 10px; border: none; background: transparent; color: var(--text2); font-size: .875rem; font-weight: 500; cursor: pointer; transition: var(--transition); white-space: nowrap; } .tab-btn:hover { background: var(--bg2); color: var(--text1); } .tab-btn.active { background: var(--accent); color: #fff; box-shadow: 0 2px 12px rgba(108,99,255,.35); } /* Tab panels */ .tab-panel { display: none; } .tab-panel.active { display: block; } /* Settings section card */ .settings-section { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; margin-bottom: 1.25rem; } .settings-section-title { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); } /* Info / Warning boxes */ .info-box { display: flex; align-items: flex-start; gap: .75rem; padding: .9rem 1.1rem; border-radius: 10px; font-size: .85rem; line-height: 1.55; } .info-box--info { background: rgba(108,99,255,.08); border: 1px solid rgba(108,99,255,.2); color: var(--text2); } .info-box--info svg { color: var(--accent); margin-top:.1rem; } .info-box--warning { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25); color: var(--text2); } .info-box--warning svg { color: #f59e0b; margin-top:.1rem; } /* Form grid variants for settings */ .form-grid--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-grid--3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .form-grid--3 .field-group--wide { grid-column: span 2; } .field-toggle .toggle-label { display: flex; justify-content: space-between; align-items: center; font-size: .875rem; color: var(--text1); cursor: pointer; } /* Test email row */ .test-email-wrap { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .test-email-wrap input[type="email"] { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: .55rem .9rem; color: var(--text1); font-size: .875rem; outline: none; transition: var(--transition); } .test-email-wrap input[type="email"]:focus { border-color: var(--accent); } .btn-test { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.1rem; background: transparent; border: 1px solid var(--accent); border-radius: 8px; color: var(--accent); font-size: .875rem; font-weight: 600; cursor: pointer; transition: var(--transition); white-space: nowrap; } .btn-test:hover { background: rgba(108,99,255,.12); } .btn-test:disabled { opacity: .5; cursor: not-allowed; } /* Test result inline badge */ .test-result { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 6px; font-size: .82rem; font-weight: 600; } .test-result--ok { background: rgba(16,185,129,.12); color: #10b981; border:1px solid rgba(16,185,129,.25); } .test-result--fail { background: rgba(239,68,68,.12); color: #ef4444; border:1px solid rgba(239,68,68,.25); } /* Database current info grid */ .db-current-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; } .db-info-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: .8rem 1rem; display: flex; flex-direction: column; gap: .25rem; } .db-info-label { font-size: .72rem; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .07em; } .db-info-value { font-size: .925rem; font-weight: 600; color: var(--text1); word-break: break-all; } /* OpenAI status row */ .ai-status-row { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem; } .status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .status-dot--ok { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,.5); } .status-dot--off { background: var(--text3); } /* Connect button */ .btn-connect { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.25rem; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; color: var(--text1); font-size: .875rem; font-weight: 600; cursor: pointer; transition: var(--transition); } .btn-connect:hover { background: var(--bg3,var(--bg2)); border-color: var(--accent); color: var(--accent); } .btn-connect:disabled { opacity: .5; cursor: not-allowed; } /* OpenAI model cards grid */ .model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .625rem; } .model-card { display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: .65rem 1rem; transition: var(--transition); } .model-card:hover { border-color: var(--accent); background: rgba(108,99,255,.05); } .model-card-id { font-size: .8rem; font-weight: 600; color: var(--text1); word-break: break-all; } .model-badge { flex-shrink: 0; font-size: .68rem; font-weight: 700; padding: .2rem .5rem; border-radius: 5px; background: var(--bg2); color: var(--text3); text-transform: uppercase; letter-spacing: .05em; } .model-badge--pro { background: rgba(108,99,255,.15); color: var(--accent); } /* Responsive Settings */ @media (max-width:768px) { .settings-tabs { flex-wrap: wrap; } .form-grid--2, .form-grid--3 { grid-template-columns: 1fr; } .form-grid--3 .field-group--wide { grid-column: span 1; } .db-current-grid { grid-template-columns: 1fr 1fr; } .test-email-wrap { flex-direction: column; align-items: flex-start; } .test-email-wrap input[type="email"] { width: 100%; } } @media (max-width:480px) { .db-current-grid { grid-template-columns: 1fr; } .settings-section { padding: 1rem; } .tab-btn { padding: .5rem .75rem; font-size: .8rem; } .model-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════ LOGS DE ACESSO ═══════════════════════════════════════════════════════════════ */ /* Barra de filtros */ .log-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .875rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; } .log-filter-group { display: flex; flex-direction: column; gap: .35rem; } .log-filter-group label { font-size: .75rem; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; } .log-filter-group input[type="date"], .log-filter-group input[type="text"], .log-filter-group select { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: .5rem .75rem; color: var(--text1); font-size: .875rem; outline: none; transition: var(--transition); min-width: 140px; } .log-filter-group input:focus, .log-filter-group select:focus { border-color: var(--accent); } /* Período rápido */ .log-preset-btns { display: flex; gap: .35rem; } .log-preset { padding: .4rem .75rem; border-radius: 6px; font-size: .8rem; font-weight: 600; color: var(--text2); background: var(--bg2); border: 1px solid var(--border); text-decoration: none; transition: var(--transition); cursor: pointer; } .log-preset:hover { border-color: var(--accent); color: var(--accent); } .log-preset.active { background: var(--accent); border-color: var(--accent); color: #fff; } /* Stats cards de log */ .log-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1.25rem; } .log-stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .25rem; border-left: 3px solid var(--border); } .log-stat-card--ok { border-left-color: #10b981; } .log-stat-card--fail { border-left-color: #ef4444; } .log-stat-card--out { border-left-color: #6c63ff; } .log-stat-value { font-size: 1.75rem; font-weight: 800; color: var(--text1); line-height: 1; } .log-stat-label { font-size: .78rem; color: var(--text3); font-weight: 500; } /* Barra de exportação */ .log-export-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: .875rem; } .log-export-btns { display: flex; align-items: center; gap: .5rem; } .btn-export { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: 7px; font-size: .8rem; font-weight: 700; text-decoration: none; background: var(--card-bg); border: 1px solid var(--border); color: var(--text2); transition: var(--transition); cursor: pointer; } .btn-export:hover { border-color: var(--accent); color: var(--accent); } .btn-export--xlsx { border-color: rgba(16,185,129,.35); color: #10b981; } .btn-export--xlsx:hover { background: rgba(16,185,129,.08); } /* Tabela de logs */ .log-table .log-ts { font-family: monospace; font-size: .82rem; white-space: nowrap; color: var(--text2); } .log-table .log-ip { font-family: monospace; font-size: .82rem; color: var(--text2); white-space: nowrap; } .log-table .log-ua { font-size: .78rem; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Responsive logs */ @media (max-width: 900px) { .log-stats-grid { grid-template-columns: repeat(2, 1fr); } .log-table .log-ua { display: none; } } @media (max-width: 600px) { .log-stats-grid { grid-template-columns: 1fr 1fr; } .log-filter-bar { flex-direction: column; } .log-filter-group input, .log-filter-group select { min-width: 100%; } .log-export-bar { flex-direction: column; align-items: flex-start; } } /* ── Password Reset ────────────────────────────────────────────── */ .auth-footer-link { text-align: center; margin-top: 1rem; } .auth-footer-link a { color: var(--accent); font-size: 0.875rem; text-decoration: none; opacity: 0.8; transition: opacity 0.2s; } .auth-footer-link a:hover { opacity: 1; }