/* MarginViewer app shell — MiliView-style (shared by all app pages) */ body { background: hsl(220 20% 98%); } .shell { grid-template-columns: 280px 1fr; } .sidebar { padding: 22px 16px; } .wordmark { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -.03em; color: hsl(261 90% 58%); padding: 0 8px 18px; display: block; } .wordmark span { color: hsl(261 100% 68%); } .connect-btn { display: block; text-align: center; margin: 0 4px 22px; padding: 11px 12px; border: 1px solid hsl(261 100% 68% / .4); border-radius: 12px; font-size: 14.5px; font-weight: 600; color: var(--ink); background: #fff; transition: all .15s; } .connect-btn:hover { border-color: var(--brand); box-shadow: 0 2px 10px hsl(261 100% 68% / .15); } .ngroup { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: hsl(215 16% 55%); padding: 16px 12px 6px; } .snav a { font-size: 14.5px; padding: 10px 12px; } .snav a svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; } .snav a.active { background: hsl(220 14% 94%); color: var(--ink); font-weight: 600; } .maincol { display: flex; flex-direction: column; min-width: 0; } .topbar { display: flex; align-items: center; gap: 18px; padding: 14px 28px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .topbar .page-title { font-weight: 600; font-size: 15.5px; } .range { display: flex; background: hsl(220 14% 96%); border: none; border-radius: 12px; padding: 4px; gap: 2px; } .range button { border: none; background: none; padding: 7px 15px; border-radius: 9px; font-family: inherit; font-size: 13.5px; font-weight: 600; color: hsl(222 20% 30%); cursor: pointer; } .range button.active { background: hsl(261 90% 58%); color: #fff; } .top-right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .store-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: hsl(142 71% 45% / .12); color: hsl(142 60% 30%); font-size: 13.5px; font-weight: 600; } .icon-btn { border: none; background: none; cursor: pointer; font-size: 17px; color: hsl(222 20% 40%); } .avatar { width: 34px; height: 34px; border-radius: 50%; background: hsl(261 90% 58%); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .dash-wrap { max-width: 1240px; width: 100%; margin: 0 auto; padding: 34px 28px 64px; display: grid; gap: 20px; } .greet h1 { font-family: 'Manrope', sans-serif; font-size: 30px; text-align: left; margin: 0 0 4px; letter-spacing: -.02em; } .greet p { color: var(--muted); font-size: 15px; } .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .kpi { padding: 22px 24px; } .kpi .krow { display: flex; justify-content: space-between; align-items: flex-start; } .kpi .label { font-size: 14px; font-weight: 500; color: hsl(222 20% 35%); text-transform: none; letter-spacing: 0; } .kpi .kicon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; } .ki-green { background: hsl(142 71% 45% / .12); } .ki-purple { background: hsl(261 100% 68% / .12); } .ki-red { background: hsl(0 84% 60% / .1); } .ki-amber { background: hsl(38 92% 50% / .14); } .kpi .value { font-size: 29px; font-weight: 700; margin: 8px 0 4px; } .kpi .cap { font-size: 13px; color: var(--muted); } .v-green { color: hsl(142 71% 38%); } .v-red { color: hsl(0 72% 51%); } .kpi.warn { border-color: hsl(38 92% 50% / .55); } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .panel h3 { display: flex; align-items: center; gap: 8px; font-size: 16.5px; } .panel .phead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; } .chip-card { border: 1px solid var(--line); border-left: 3px solid var(--cc, var(--brand)); border-radius: 12px; padding: 12px 14px; } .chip-card .cl { font-size: 12.5px; color: var(--muted); font-weight: 500; } .chip-card .cv { font-size: 17px; font-weight: 700; font-family: 'JetBrains Mono', monospace; margin-top: 2px; } .status-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .st-paid { background: #fef3c7; color: #92400e; } .st-pos { background: hsl(142 71% 45% / .12); color: hsl(142 60% 28%); } .st-neg { background: hsl(0 84% 60% / .1); color: hsl(0 72% 45%); } .st-warn { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; } .fpills { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .fpill { border: 1px solid var(--line); border-radius: 10px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; background: #fff; cursor: pointer; font-family: inherit; color: var(--ink); } .fpill .cnt { color: var(--muted); font-weight: 500; margin-left: 5px; } .fpill.active { background: hsl(261 90% 58%); color: #fff; border-color: hsl(261 90% 58%); } .fpill.active .cnt { color: hsl(261 100% 90%); } .search-box { position: relative; margin-left: auto; } .search-box input { width: 260px; padding: 10px 14px 10px 38px; border: 1px solid var(--line); border-radius: 12px; font-family: inherit; font-size: 14px; background: #fff; } .search-box::before { content: "🔍"; position: absolute; left: 12px; top: 9px; font-size: 14px; opacity: .55; } .search-box input:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .tabs { display: inline-flex; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px; } .tabs span { padding: 8px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--muted); } .tabs span.on { background: hsl(220 14% 96%); color: var(--ink); } .flow-row { display: grid; grid-template-columns: 150px 1fr 56px; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 13.5px; } .flow-row .fl { color: hsl(222 20% 35%); font-weight: 500; } .flow-row .fbar { height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: flex-end; padding: 0 12px; color: #fff; font-weight: 700; font-family: 'JetBrains Mono', monospace; font-size: 13px; min-width: 70px; } .flow-row .fpct { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } .legend-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; background: hsl(220 20% 98%); margin-bottom: 9px; font-size: 13.5px; } .legend-row .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .legend-row .ln { flex: 1; font-weight: 500; } .legend-row .la { font-weight: 700; font-family: 'JetBrains Mono', monospace; } .legend-row .lp { font-size: 12px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; } input.cost { width: 104px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 13.5px; text-align: right; background: var(--surface); } input.cost:focus { outline: 2px solid var(--brand); outline-offset: -1px; } @media (max-width: 1000px) { .kpis { grid-template-columns: 1fr 1fr; } .two-col { grid-template-columns: 1fr; } .chips { grid-template-columns: 1fr 1fr; } .search-box input { width: 100%; } } /* Product thumbnails (MiliView-style) */ .mv-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--line); background: hsl(220 14% 96%); } .mv-thumb.ph { display: grid; place-items: center; font-size: 18px; color: hsl(215 16% 60%); } td .mv-thumb { width: 38px; height: 38px; } /* Topbar icon buttons */ .tb-ic { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; font-size: 16px; cursor: pointer; color: hsl(222 20% 40%); position: relative; } .tb-ic:hover { background: hsl(220 14% 96%); } .tb-ic .badge { position: absolute; top: -4px; right: -4px; background: hsl(0 72% 51%); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; } /* ===== DARK MODE (MiliView palette) ===== */ :root[data-theme="dark"] { --bg: hsl(240 20% 3.5%); --surface: hsl(240 18% 6%); --ink: hsl(220 20% 95%); --muted: hsl(220 15% 60%); --line: hsl(250 15% 16%); --brand: hsl(265 100% 70%); --brand-dark: hsl(265 100% 62%); --accent: hsl(142 69% 52%); --accent-soft: hsl(142 69% 52% / .14); --danger: hsl(0 80% 62%); --warning: hsl(38 95% 58%); --secondary: hsl(250 15% 12%); --shadow: 0 4px 16px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3); --shadow-hover: 0 16px 40px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.4); } :root[data-theme="dark"] body { background: hsl(240 20% 3.5%); } :root[data-theme="dark"] .sidebar { background: hsl(240 18% 5%); border-right-color: hsl(250 15% 14%); } :root[data-theme="dark"] .topbar { background: hsl(240 18% 6%); border-bottom-color: hsl(250 15% 14%); } :root[data-theme="dark"] .connect-btn { background: hsl(240 18% 8%); } :root[data-theme="dark"] .range { background: hsl(250 15% 12%); } :root[data-theme="dark"] .range button { color: hsl(220 15% 65%); } :root[data-theme="dark"] .range button.active { background: hsl(265 100% 62%); color: #fff; } :root[data-theme="dark"] .snav a { color: hsl(220 15% 70%); } :root[data-theme="dark"] .snav a:hover { background: hsl(250 15% 12%); } :root[data-theme="dark"] .snav a.active { background: hsl(265 100% 70% / .16); color: hsl(265 100% 82%); } :root[data-theme="dark"] .tb-ic { background: hsl(240 18% 8%); border-color: hsl(250 15% 16%); color: hsl(220 15% 70%); } :root[data-theme="dark"] .tb-ic:hover { background: hsl(250 15% 12%); } :root[data-theme="dark"] .card, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .kpi { background: hsl(240 18% 6%); border-color: hsl(250 15% 16%); } :root[data-theme="dark"] .kpi .label, :root[data-theme="dark"] .flow-row .fl { color: hsl(220 15% 70%); } :root[data-theme="dark"] .allgood { background: linear-gradient(135deg, hsl(142 60% 40% / .12), hsl(142 60% 40% / .04)); border-color: hsl(142 60% 45% / .4); } :root[data-theme="dark"] .allgood p { color: hsl(220 15% 72%); } :root[data-theme="dark"] .shop-chip { border-color: hsl(250 15% 18%); } :root[data-theme="dark"] .act-row, :root[data-theme="dark"] .legend-row { background: hsl(250 15% 9%); } :root[data-theme="dark"] .prod-bar, :root[data-theme="dark"] .bar-track { background: hsl(250 15% 14%); } :root[data-theme="dark"] th { color: hsl(220 15% 60%); border-bottom-color: hsl(250 15% 16%); } :root[data-theme="dark"] td { border-bottom-color: hsl(250 15% 11%); } :root[data-theme="dark"] .chip-card, :root[data-theme="dark"] input.cost, :root[data-theme="dark"] .search-box input, :root[data-theme="dark"] .fpill, :root[data-theme="dark"] .tabs { background: hsl(240 18% 8%); border-color: hsl(250 15% 16%); color: var(--ink); } :root[data-theme="dark"] .tabs span.on { background: hsl(250 15% 14%); color: var(--ink); } :root[data-theme="dark"] .fpill.active { background: hsl(265 100% 62%); border-color: hsl(265 100% 62%); color: #fff; } :root[data-theme="dark"] .mv-thumb { background: hsl(250 15% 12%); border-color: hsl(250 15% 18%); } :root[data-theme="dark"] .demo-banner { background: hsl(38 60% 14%); border-bottom-color: hsl(38 60% 24%); color: hsl(38 92% 75%); } :root[data-theme="dark"] .btn-ghost { color: var(--ink); border-color: hsl(250 15% 20%); } :root[data-theme="dark"] .store-pill { background: hsl(142 60% 45% / .16); color: hsl(142 65% 65%); } :root[data-theme="dark"] .status-pill.st-paid { background: hsl(38 70% 20%); color: hsl(38 92% 72%); } /* Dark-mode overrides for the dashboard's own inline styles (higher specificity to win) */ :root[data-theme="dark"] .shell .sidebar { background: hsl(240 18% 5%); } :root[data-theme="dark"] .maincol .topbar { background: hsl(240 18% 6%); } :root[data-theme="dark"] .sidebar .connect-btn { background: hsl(240 18% 8%); color: var(--ink); } :root[data-theme="dark"] .maincol .range { background: hsl(250 15% 12%); } :root[data-theme="dark"] .maincol .range button { color: hsl(220 15% 65%); } :root[data-theme="dark"] .maincol .range button.active { background: hsl(265 100% 62%); color: #fff; } :root[data-theme="dark"] .sidebar .snav a { color: hsl(220 15% 72%); } :root[data-theme="dark"] .sidebar .snav a:hover { background: hsl(250 15% 12%); } :root[data-theme="dark"] .sidebar .snav a.active { background: hsl(265 100% 70% / .18); color: hsl(265 100% 84%); } :root[data-theme="dark"] .dash-wrap .kpi, :root[data-theme="dark"] .dash-wrap .panel { background: hsl(240 18% 6%); border-color: hsl(250 15% 16%); } :root[data-theme="dark"] .dash-wrap .kpi .label, :root[data-theme="dark"] .dash-wrap .greet p { color: hsl(220 15% 68%); } :root[data-theme="dark"] .dash-wrap .act-row { background: hsl(250 15% 9%); } :root[data-theme="dark"] .dash-wrap .prod-bar { background: hsl(250 15% 14%); } :root[data-theme="dark"] .dash-wrap .allgood { background: linear-gradient(135deg, hsl(142 60% 40% / .12), hsl(142 60% 40% / .04)); border-color: hsl(142 60% 45% / .4); } :root[data-theme="dark"] .dash-wrap .allgood p { color: hsl(220 15% 72%); } :root[data-theme="dark"] .dash-wrap .shop-chip { border-color: hsl(250 15% 20%); } :root[data-theme="dark"] body { background: hsl(240 20% 3.5%) !important; } /* Currency picker in topbar */ .ccy-pick { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 7px 10px; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; } :root[data-theme="dark"] .ccy-pick { background: hsl(240 18% 8%); border-color: hsl(250 15% 18%); } /* Sidebar theme tokens (light defaults + dark) — used by styles.css .sidebar/.snav */ :root { --sidebar-bg: hsl(0 0% 98%); --snav-fg: hsl(240 5.3% 26.1%); --snav-hover: hsl(220 14% 96%); --snav-active: hsl(261 100% 68% / .12); --snav-active-fg: hsl(261 90% 45%); } :root[data-theme="dark"] { --sidebar-bg: hsl(240 18% 5%); --snav-fg: hsl(220 15% 72%); --snav-hover: hsl(250 15% 12%); --snav-active: hsl(265 100% 70% / .18); --snav-active-fg: hsl(265 100% 84%); } /* Bulletproof dark sidebar (defeats any stale/duplicate light rule) */ :root[data-theme="dark"] .sidebar { background: hsl(240 18% 5%) !important; border-right-color: hsl(250 15% 14%) !important; } :root[data-theme="dark"] .snav a { color: hsl(220 15% 72%) !important; } :root[data-theme="dark"] .snav a.active { background: hsl(265 100% 70% / .18) !important; color: hsl(265 100% 84%) !important; } :root[data-theme="dark"] .connect-btn { background: hsl(240 18% 8%) !important; color: hsl(220 20% 95%) !important; } :root[data-theme="dark"] .wordmark { color: hsl(265 100% 78%) !important; } /* ===== OS-level dark mode (pure CSS, no JS needed) ===== When the operating system / browser is in dark mode AND the user hasn't explicitly chosen light, apply the full dark palette + sidebar. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: hsl(240 20% 3.5%); --surface: hsl(240 18% 6%); --ink: hsl(220 20% 95%); --muted: hsl(220 15% 60%); --line: hsl(250 15% 16%); --brand: hsl(265 100% 70%); --accent: hsl(142 69% 52%); --danger: hsl(0 80% 62%); --secondary: hsl(250 15% 12%); --sidebar-bg: hsl(240 18% 5%); --snav-fg: hsl(220 15% 72%); --snav-hover: hsl(250 15% 12%); --snav-active: hsl(265 100% 70% / .18); --snav-active-fg: hsl(265 100% 84%); } :root:not([data-theme="light"]) body { background: hsl(240 20% 3.5%) !important; } :root:not([data-theme="light"]) .sidebar { background: hsl(240 18% 5%) !important; border-right-color: hsl(250 15% 14%) !important; } :root:not([data-theme="light"]) .snav a { color: hsl(220 15% 72%) !important; } :root:not([data-theme="light"]) .snav a.active { background: hsl(265 100% 70% / .18) !important; color: hsl(265 100% 84%) !important; } :root:not([data-theme="light"]) .topbar { background: hsl(240 18% 6%) !important; border-bottom-color: hsl(250 15% 14%) !important; } :root:not([data-theme="light"]) .connect-btn { background: hsl(240 18% 8%) !important; color: hsl(220 20% 95%) !important; } :root:not([data-theme="light"]) .kpi, :root:not([data-theme="light"]) .panel, :root:not([data-theme="light"]) .card { background: hsl(240 18% 6%) !important; border-color: hsl(250 15% 16%) !important; } :root:not([data-theme="light"]) .range { background: hsl(250 15% 12%) !important; } :root:not([data-theme="light"]) .act-row, :root:not([data-theme="light"]) .legend-row { background: hsl(250 15% 9%) !important; } :root:not([data-theme="light"]) .prod-bar, :root:not([data-theme="light"]) .bar-track { background: hsl(250 15% 14%) !important; } } /* FIX: the sidebar's