/* ── Reset & Base ─────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --bg: #0b0f1a; --surface: #111827; --surface2: #1a2235; --border: #1f2d45; --text: #e2e8f0; --muted: #64748b; --blue: #3b82f6; --blue-dim: rgba(59,130,246,.12); --purple: #8b5cf6; --green: #10b981; --amber: #f59e0b; --red: #ef4444; --radius: 14px; --sidebar: 260px; } /* ── Liquid Glass theme ─────────────────────────────────────────── Same markup/classes as the dark theme — only the variables below and the glass-only overrides further down change. Toggled via , set/persisted by static/js/theme.js. */ :root[data-theme="glass"]{ --bg: #fdf3e7; --surface: rgba(255,255,255,.50); --surface2: rgba(255,255,255,.38); --border: rgba(255,255,255,.75); --text: #2b241c; --muted: #9a8b7c; --blue: #5b8def; --blue-dim: rgba(91,141,239,.15); --purple: #9b7bea; --green: #2fb787; --amber: #f2a93c; --red: #f0605a; --radius: 20px; } body{ font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; display:flex; font-size:14px; line-height:1.5; transition:background .2s,color .2s; } :root[data-theme="glass"] body{ background: radial-gradient(ellipse 900px 700px at 8% -5%, #ff9d5c 0%, transparent 60%), radial-gradient(ellipse 800px 800px at 105% 10%, #ffc9a8 0%, transparent 55%), radial-gradient(ellipse 1000px 900px at 50% 120%, #ff9d5c 0%, transparent 55%), linear-gradient(160deg, #fdf3e7, #fbe4cf 60%, #fdf3e7); background-attachment:fixed; } /* ── Sidebar ──────────────────────────────────────────────── */ .sidebar{ width:var(--sidebar); background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; position:fixed; top:0;left:0;bottom:0; z-index:100; padding:24px 20px; } .logo{ display:flex;align-items:center;gap:10px; margin-bottom:32px; } .logo-icon{ width:36px;height:36px;border-radius:10px; background:linear-gradient(135deg,var(--blue),var(--purple)); display:flex;align-items:center;justify-content:center; font-size:18px;flex-shrink:0; } .logo-text{font-size:15px;font-weight:700;letter-spacing:-.3px} .logo-sub{font-size:11px;color:var(--muted);margin-top:1px} .nav-label{font-size:10px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--muted);margin-bottom:10px} /* ── Filter controls ──────────────────────────────────────── */ .filter-group{margin-bottom:24px} .filter-group label{display:block;font-size:12px;font-weight:500; color:var(--muted);margin-bottom:6px} .input, select.input{ width:100%;background:var(--surface2);border:1px solid var(--border); border-radius:8px;color:var(--text);padding:8px 12px;font-size:13px; font-family:inherit;outline:none;transition:border .2s; appearance:none;-webkit-appearance:none; } .input:focus, select.input:focus{border-color:var(--blue)} .preset-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .preset-btn{ padding:4px 10px;border-radius:6px;font-size:11px;font-weight:500; background:var(--surface2);border:1px solid var(--border); color:var(--muted);cursor:pointer;transition:all .15s; } .preset-btn:hover,.preset-btn.active{ background:var(--blue-dim);border-color:var(--blue);color:var(--blue) } .btn-apply{ width:100%;padding:10px;border-radius:10px;border:none;cursor:pointer; font-family:inherit;font-size:13px;font-weight:600; background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff;transition:opacity .15s;margin-top:4px; } .btn-apply:hover{opacity:.9} .btn-apply:active{opacity:.75} /* ── Campaign list ────────────────────────────────────────── */ .camp-list{ flex:1;overflow-y:auto;margin-top:8px; scrollbar-width:thin;scrollbar-color:var(--border) transparent; } .camp-item{ display:flex;align-items:center;gap:8px; padding:6px 8px;border-radius:8px;cursor:pointer; transition:background .15s;margin-bottom:2px; } .camp-item:hover{background:var(--surface2)} .camp-item input[type=checkbox]{ accent-color:var(--blue);width:14px;height:14px;flex-shrink:0;cursor:pointer; } .camp-item-name{ font-size:12px;color:var(--muted);overflow:hidden; white-space:nowrap;text-overflow:ellipsis;flex:1; } .camp-item.checked .camp-item-name{color:var(--text)} /* ── Main area ────────────────────────────────────────────── */ .main{ margin-left:var(--sidebar); flex:1;display:flex;flex-direction:column;min-height:100vh; } .topbar{ position:sticky;top:0;z-index:50; background:rgba(11,15,26,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); padding:0 28px;height:60px; display:flex;align-items:center;justify-content:space-between; } .topbar-title{font-size:16px;font-weight:700;letter-spacing:-.3px} .topbar-period{font-size:12px;color:var(--muted);margin-left:12px} .topbar-right{display:flex;align-items:center;gap:12px} .refresh-btn{ display:flex;align-items:center;gap:6px; padding:7px 14px;border-radius:8px; background:var(--surface);border:1px solid var(--border); color:var(--muted);font-size:12px;font-weight:500; cursor:pointer;transition:all .15s;font-family:inherit; } .refresh-btn:hover{color:var(--text);border-color:var(--blue)} .status-dot{ width:8px;height:8px;border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); } .content{padding:28px;flex:1} /* ── Tab bar ──────────────────────────────────────────────── */ .tab-bar{ display:flex;flex-wrap:wrap;gap:4px; border-bottom:1px solid var(--border); margin-bottom:24px;padding-bottom:0; } .tab-btn{ padding:10px 16px;border:none;background:none;cursor:pointer; font-family:inherit;font-size:13px;font-weight:500;color:var(--muted); border-bottom:2px solid transparent;transition:all .15s; white-space:nowrap; } .tab-btn:hover:not(:disabled){color:var(--text)} .tab-btn.active{color:var(--blue);border-bottom-color:var(--blue)} .tab-btn:disabled{color:#3a4557;cursor:default} .tab-panel{display:none} .tab-panel.active{display:block} /* ── KPI Cards ────────────────────────────────────────────── */ .kpi-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px;margin-bottom:24px; } .kpi-card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:20px;position:relative; overflow:hidden;transition:transform .15s,border-color .15s; } .kpi-card:hover{transform:translateY(-2px);border-color:var(--blue)} .kpi-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px; } .kpi-card.blue::before {background:linear-gradient(90deg,var(--blue),var(--purple))} .kpi-card.green::before {background:linear-gradient(90deg,var(--green),#34d399)} .kpi-card.amber::before {background:linear-gradient(90deg,var(--amber),#fb923c)} .kpi-card.purple::before{background:linear-gradient(90deg,var(--purple),var(--blue))} .kpi-card.red::before {background:linear-gradient(90deg,var(--red),var(--amber))} .kpi-card.teal::before {background:linear-gradient(90deg,#06b6d4,var(--green))} .kpi-label{font-size:11px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--muted);margin-bottom:8px} .kpi-val{font-size:26px;font-weight:700;letter-spacing:-.5px;margin-bottom:4px} .kpi-sub{font-size:11px;color:var(--muted)} /* ── Charts row ───────────────────────────────────────────── */ .charts-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px;margin-bottom:24px; } .charts-row.cols-4{grid-template-columns:repeat(4,1fr)} .chart-card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:20px; } .chart-header{ display:flex;align-items:center;justify-content:space-between; margin-bottom:16px; } .chart-title{font-size:14px;font-weight:600} .metric-tabs{display:flex;gap:4px} .metric-tab{ padding:4px 10px;border-radius:6px;font-size:11px;font-weight:500; cursor:pointer;transition:all .15s; background:var(--surface2);border:1px solid var(--border); color:var(--muted); } .metric-tab.active{ background:var(--blue-dim);border-color:var(--blue);color:var(--blue) } .chart-wrap{position:relative;height:220px} .chart-wrap.small{height:180px} /* ── Table card ───────────────────────────────────────────── */ .table-card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);overflow:hidden;margin-bottom:24px; } .table-header{ padding:16px 20px;border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between; } .table-header .chart-title{font-size:14px;font-weight:600} table{width:100%;border-collapse:collapse} th{ padding:10px 16px;text-align:left;font-size:11px;font-weight:600; letter-spacing:.05em;text-transform:uppercase;color:var(--muted); background:var(--surface2);border-bottom:1px solid var(--border); white-space:nowrap; } td{ padding:10px 16px;font-size:13px;border-bottom:1px solid rgba(31,45,69,.5); } tr:last-child td{border-bottom:none} tr:hover td{background:rgba(59,130,246,.04)} .badge{ display:inline-flex;align-items:center; padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500; } .badge-green{background:rgba(16,185,129,.12);color:var(--green)} .badge-amber{background:rgba(245,158,11,.12);color:var(--amber)} .badge-red {background:rgba(239,68,68,.12);color:var(--red)} .badge-blue {background:var(--blue-dim);color:var(--blue)} /* ── Analysis block ───────────────────────────────────────── */ .analysis-card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:24px;margin-bottom:24px; } .analysis-title{ font-size:16px;font-weight:700;margin-bottom:4px; display:flex;align-items:center;gap:8px; } .analysis-sub{font-size:13px;color:var(--muted);margin-bottom:20px} .recs-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; } .rec-item{ border-radius:10px;padding:16px; border:1px solid; } .rec-item.success{ background:rgba(16,185,129,.06);border-color:rgba(16,185,129,.25) } .rec-item.warning{ background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.25) } .rec-item.danger{ background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.25) } .rec-item.info{ background:rgba(59,130,246,.06);border-color:rgba(59,130,246,.25) } .rec-icon{font-size:18px;margin-bottom:8px} .rec-title{ font-size:13px;font-weight:600;margin-bottom:6px; } .rec-text{font-size:12px;color:var(--muted);line-height:1.6} /* ── Notes block ──────────────────────────────────────────── */ .notes-card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:24px;margin-bottom:24px; } .notes-form{ display:grid;grid-template-columns:140px 1fr auto;gap:10px; margin-bottom:16px;align-items:start; } .notes-form textarea, .note-comment-input{ width:100%;background:var(--surface2);border:1px solid var(--border); border-radius:8px;color:var(--text);padding:8px 12px;font-size:13px; font-family:inherit;outline:none;resize:vertical;min-height:38px; } .notes-form textarea:focus, .note-comment-input:focus{border-color:var(--blue)} .notes-list, .weekly-list{display:flex;flex-direction:column;gap:10px} .note-item{ border:1px solid var(--border);border-radius:10px;padding:12px 14px; background:var(--surface2); } .note-date{font-size:11px;color:var(--muted);margin-bottom:4px} .note-title{font-size:13px;font-weight:600;margin-bottom:4px} .note-comment{font-size:13px;color:var(--text);white-space:pre-wrap} /* ── Loading overlay ──────────────────────────────────────── */ .loading-overlay{ position:fixed;inset:0; background:rgba(11,15,26,.7); backdrop-filter:blur(4px); display:flex;align-items:center;justify-content:center; z-index:999;flex-direction:column;gap:16px; } .spinner{ width:40px;height:40px;border-radius:50%; border:3px solid var(--border); border-top-color:var(--blue); animation:spin .7s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} .loading-text{font-size:14px;color:var(--muted)} /* ── Error banner ─────────────────────────────────────────── */ .error-banner{ background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3); border-radius:10px;padding:14px 18px;margin-bottom:20px; display:flex;align-items:center;gap:10px; font-size:13px;color:var(--red); } /* ── Empty state ──────────────────────────────────────────── */ .empty{ text-align:center;padding:40px;color:var(--muted);font-size:13px; } /* ── Login page ───────────────────────────────────────────── */ .login-page{ min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center; } .login-card{ width:340px;background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:32px; } .login-card .logo{margin-bottom:24px} .login-card label{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-bottom:6px} .login-card .filter-group{margin-bottom:16px} .login-error{ background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3); border-radius:8px;padding:10px 12px;margin-bottom:16px; font-size:12px;color:var(--red); } /* ── Theme toggle (pill switch, used in every topbar) ────────── */ .theme-toggle{ display:flex;align-items:center;gap:2px; background:var(--surface2);border:1px solid var(--border); border-radius:99px;padding:3px;font-size:11px;font-weight:600; } .theme-toggle span{ padding:6px 12px;border-radius:99px;cursor:pointer;color:var(--muted); transition:all .15s; } .theme-toggle span.active{background:var(--blue);color:#fff} /* ── Liquid Glass overrides ─────────────────────────────────── Everything above already flows through the CSS variables and needs no per-theme rule. This block only covers the handful of spots that hardcode colors or add glass-only surface effects (frosted blur, warm shadow) that dark mode doesn't use. */ :root[data-theme="glass"] .sidebar, :root[data-theme="glass"] .topbar, :root[data-theme="glass"] .kpi-card, :root[data-theme="glass"] .chart-card, :root[data-theme="glass"] .table-card, :root[data-theme="glass"] .notes-card, :root[data-theme="glass"] .analysis-card, :root[data-theme="glass"] .login-card{ backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%); box-shadow: 0 10px 36px rgba(120,70,20,.10); } :root[data-theme="glass"] .topbar{ background: rgba(255,255,255,.55); } :root[data-theme="glass"] .loading-overlay{ background: rgba(253,243,231,.75); } :root[data-theme="glass"] .theme-toggle span.active{ background:var(--text);color:var(--bg); } :root[data-theme="glass"] ::-webkit-scrollbar-thumb{ background: rgba(43,36,28,.18); } /* ── Scrollbar ────────────────────────────────────────────── */ ::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px} /* ── Responsive ───────────────────────────────────────────── */ @media(max-width:900px){ .charts-row{grid-template-columns:1fr} .charts-row.cols-4{grid-template-columns:repeat(2,1fr)} .kpi-grid{grid-template-columns:repeat(2,1fr)} }