/* * Design tokens. Light is the default; the [data-bs-theme="dark"] block below * redefines the same tokens. js/theme.js sets that attribute on before * first paint. --accent is injected inline on by the layouts. */ :root { --page-bg: #f6f7f9; --card-bg: #ffffff; --surface-2: #f9fafb; /* table headers, footers, subtle fills */ --surface-3: #f3f4f6; /* group rows, stronger fills */ --hover-bg: #f8fafc; --border: #e5e7eb; --border-soft: #f1f3f5; /* table row dividers */ --text: #111827; --text-strong: #374151; /* table headers */ --muted: #6b7280; --accent: #1f3a5f; --accent-fg: var(--accent); /* accent used as text (links, tabs); lightened in dark */ --accent-hover: #16304f; --accent-soft: rgba(31, 58, 95, 0.08); --posted: #15803d; --pending: #b45309; --processed: #1d4ed8; --reversed: #b91c1c; --posted-bg: #dcfce7; --pending-bg: #fef3c7; --processed-bg: #dbeafe; --reversed-bg: #fee2e2; --banner-bg: #b91c1c; /* impersonation banner: solid in both themes */ --neutral-badge-bg: #eef2f7; --neutral-badge-fg: #334155; --info-bg: #eff6ff; --info-border: #bfdbfe; --info-fg: #1e3a8a; --warn-bg: #fffbeb; --warn-border: #fde68a; --warn-fg: #92400e; --shadow: 0 8px 24px rgba(0, 0, 0, .08); --star-off: #d1d5db; --star-on: #f59e0b; --chart-grid: rgba(0, 0, 0, .08); --chart-tick: #6b7280; --sidebar-bg: #ffffff; --sidebar-fg: #374151; --sidebar-width: 248px; --admin-sidebar-bg: #0f172a; --admin-sidebar-border: #1e293b; --admin-sidebar-brand: #e2e8f0; --admin-sidebar-fg: #cbd5e1; --admin-sidebar-muted: #94a3b8; --admin-sidebar-hover: #1e293b; } [data-bs-theme="dark"] { --page-bg: #0f1419; --card-bg: #171d26; --surface-2: #1c232e; --surface-3: #222a36; --hover-bg: #1e2631; --border: #2a3441; --border-soft: #222a36; --text: #e5e7eb; --text-strong: #d1d5db; --muted: #9aa3b2; /* Lighten whatever accent the agency picked so it stays readable on dark. */ --accent-fg: color-mix(in srgb, var(--accent) 45%, #ffffff); --accent-hover: color-mix(in srgb, var(--accent) 80%, #ffffff); --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent); --posted: #4ade80; --pending: #fbbf24; --processed: #60a5fa; --reversed: #f87171; --posted-bg: rgba(74, 222, 128, .14); --pending-bg: rgba(251, 191, 36, .14); --processed-bg: rgba(96, 165, 250, .14); --reversed-bg: rgba(248, 113, 113, .14); --neutral-badge-bg: #2a3441; --neutral-badge-fg: #cbd5e1; --info-bg: rgba(96, 165, 250, .12); --info-border: rgba(96, 165, 250, .35); --info-fg: #bfdbfe; --warn-bg: rgba(251, 191, 36, .12); --warn-border: rgba(251, 191, 36, .35); --warn-fg: #fde68a; --shadow: 0 8px 24px rgba(0, 0, 0, .45); --star-off: #3f4a59; --star-on: #fbbf24; --chart-grid: rgba(255, 255, 255, .09); --chart-tick: #9aa3b2; --sidebar-bg: #121820; --sidebar-fg: #cbd5e1; --admin-sidebar-bg: #0b1017; --admin-sidebar-border: #1c2530; --admin-sidebar-hover: #1c2530; /* Bridge into Bootstrap so its components (inputs, modals, dropdowns, alerts, tables, toasts) share our palette instead of BS's stock dark. */ --bs-body-bg: var(--page-bg); --bs-body-color: var(--text); --bs-secondary-color: var(--muted); --bs-tertiary-bg: var(--surface-2); --bs-secondary-bg: var(--surface-3); --bs-border-color: var(--border); --bs-border-color-translucent: var(--border); --bs-link-color: var(--accent-fg); --bs-link-hover-color: var(--accent-hover); --bs-emphasis-color: #ffffff; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--page-bg); color: var(--text); font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.5; } a { color: var(--accent-fg); text-decoration: none; } a:hover { text-decoration: underline; } .num, .money, td.money, th.money { font-variant-numeric: tabular-nums; } .money { text-align: right; white-space: nowrap; } /* ---------- shell ---------- */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); background: var(--sidebar-bg); border-right: 1px solid var(--border); position: fixed; top: 0; bottom: 0; left: 0; overflow-y: auto; z-index: 1030; } .sidebar .brand { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--accent-fg); } .sidebar .brand img { max-height: 32px; max-width: 150px; } .nav-section { padding: .75rem .75rem 0; } .nav-section-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .35rem .6rem; } .nav-link-item { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: 6px; color: var(--sidebar-fg); font-size: .92rem; } .nav-link-item:hover { background: var(--accent-soft); text-decoration: none; } .nav-link-item.active { background: var(--accent); color: #fff; } .nav-link-item i { font-size: 1.05rem; } .main { margin-left: var(--sidebar-width); flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 1rem; background: var(--card-bg); border-bottom: 1px solid var(--border); padding: .6rem 1.5rem; position: sticky; top: 0; z-index: 1020; } .topbar h1 { font-size: 1.1rem; margin: 0; font-weight: 600; } .topbar .spacer { flex: 1; } .content { padding: 1.5rem; max-width: 1400px; width: 100%; } .footer { margin-top: auto; padding: 1rem 1.5rem; color: var(--muted); font-size: .82rem; border-top: 1px solid var(--border); } /* ---------- cards / tiles ---------- */ .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: none; } .card-header { background: transparent; border-bottom: 1px solid var(--border); font-weight: 600; padding: .75rem 1rem; } .card-body { padding: 1rem; } .kpi-grid { display: grid; gap: 1rem; } .kpi-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kpi-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpi-grid.six { grid-template-columns: repeat(6, minmax(0, 1fr)); } .kpi { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: .85rem 1rem; display: block; color: inherit; } a.kpi:hover { border-color: var(--accent); text-decoration: none; } .kpi .label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .kpi .value { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: .15rem; } .kpi .sub { font-size: .8rem; color: var(--muted); margin-top: .1rem; } .kpi .delta-up { color: var(--posted); } .kpi .delta-down { color: var(--reversed); } .kpi .delta-flat { color: var(--muted); } /* ---------- tables ---------- */ .table-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .table-scroll { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: .9rem; } table.data th { text-align: left; background: var(--surface-2); border-bottom: 1px solid var(--border); padding: .55rem .75rem; font-weight: 600; color: var(--text-strong); white-space: nowrap; position: sticky; top: 0; z-index: 1; } table.data td { padding: .5rem .75rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } table.data tbody tr:hover { background: var(--hover-bg); } table.data th a { color: inherit; } table.data tfoot td { border-top: 2px solid var(--border); font-weight: 600; background: var(--surface-2); } .group-row td { background: var(--surface-3); font-weight: 600; } .empty-state { padding: 2.5rem 1rem; text-align: center; color: var(--muted); } /* ---------- badges ---------- */ .badge-status { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 600; letter-spacing: .02em; background: var(--neutral-badge-bg); color: var(--neutral-badge-fg); } .badge-posted, .badge-success, .badge-green { background: var(--posted-bg); color: var(--posted); } .badge-pending, .badge-yellow { background: var(--pending-bg); color: var(--pending); } .badge-processed, .badge-blue { background: var(--processed-bg); color: var(--processed); } .badge-reversed, .badge-danger, .badge-red { background: var(--reversed-bg); color: var(--reversed); } .badge-gray { background: var(--neutral-badge-bg); color: var(--neutral-badge-fg); } .status-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .35rem; } /* ---------- forms ---------- */ .form-label { font-weight: 500; margin-bottom: .25rem; } .btn-primary { background: var(--accent); border-color: var(--accent); } .btn-primary:hover, .btn-primary:focus { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-outline-primary { color: var(--accent-fg); border-color: var(--accent-fg); } .btn-outline-primary:hover { background: var(--accent); border-color: var(--accent); } .form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--accent-soft); } .text-accent { color: var(--accent-fg) !important; } /* ---------- auth layout ---------- */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--page-bg); padding: 1.5rem; } .auth-card { width: 100%; max-width: 420px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 2rem; } .auth-card .brand { text-align: center; margin-bottom: 1.25rem; } .auth-card .brand img { max-height: 48px; } /* ---------- admin ---------- */ body.admin .sidebar { background: var(--admin-sidebar-bg); border-right: none; } body.admin .sidebar .brand { color: var(--admin-sidebar-brand); border-bottom-color: var(--admin-sidebar-border); } body.admin .nav-section-title { color: var(--admin-sidebar-muted); } body.admin .nav-link-item { color: var(--admin-sidebar-fg); } body.admin .sidebar .text-muted { color: var(--admin-sidebar-muted) !important; } body.admin .nav-link-item:hover { background: var(--admin-sidebar-hover); } body.admin .nav-link-item.active { background: var(--accent); color: #fff; } .impersonation-banner { background: var(--banner-bg); color: #fff; text-align: center; padding: .4rem 1rem; font-size: .88rem; } /* ---------- misc ---------- */ .announcement { border-radius: 8px; padding: .7rem 1rem; margin-bottom: 1rem; border: 1px solid; } .announcement-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-fg); } .announcement-warning { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-fg); } .pager { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; padding: .5rem .75rem; } .pager a, .pager span { padding: .25rem .55rem; border: 1px solid var(--border); border-radius: 5px; font-size: .85rem; } .pager .current { background: var(--accent); color: #fff; border-color: var(--accent); } .filter-bar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; } .filter-bar .form-group { display: flex; flex-direction: column; } .filter-bar label { font-size: .78rem; color: var(--muted); margin-bottom: .15rem; } .chart-card { position: relative; height: 280px; } .chart-card.tall { height: 340px; } .chart-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); } .quick-search { position: relative; width: 260px; max-width: 40vw; min-width: 120px; } .quick-search-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); z-index: 1050; max-height: 360px; overflow-y: auto; display: none; } .quick-search-results.show { display: block; } .quick-search-results a { display: block; padding: .5rem .75rem; border-bottom: 1px solid var(--border-soft); color: inherit; } .quick-search-results a:hover { background: var(--hover-bg); text-decoration: none; } .timeline { list-style: none; padding-left: 0; } .timeline li { position: relative; padding-left: 1.75rem; padding-bottom: 1rem; border-left: 2px solid var(--border); margin-left: .5rem; } .timeline li:last-child { border-left-color: transparent; } .timeline .icon { position: absolute; left: -0.7rem; background: var(--card-bg); } .tab-nav { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; flex-wrap: wrap; } .tab-nav a { padding: .5rem .9rem; border-bottom: 2px solid transparent; color: var(--muted); } .tab-nav a.active { color: var(--accent-fg); border-bottom-color: var(--accent-fg); font-weight: 600; } .star-toggle { color: var(--star-off); font-size: 1.1rem; } .star-toggle.on { color: var(--star-on); } /* ---------- theme toggle ---------- */ .theme-toggle .btn { line-height: 1; } .theme-toggle .btn i { font-size: .95rem; vertical-align: -.05em; } /* Show one icon on the button depending on the stored preference. */ .theme-toggle .theme-icon-light, .theme-toggle .theme-icon-dark, .theme-toggle .theme-icon-auto { display: none; } :root[data-theme-pref="light"] .theme-toggle .theme-icon-light, :root[data-theme-pref="dark"] .theme-toggle .theme-icon-dark, :root:not([data-theme-pref="light"]):not([data-theme-pref="dark"]) .theme-toggle .theme-icon-auto { display: inline; } .theme-toggle .theme-check { visibility: hidden; } .theme-toggle .dropdown-item.active { background: var(--accent-soft); color: inherit; } .theme-toggle .dropdown-item.active .theme-check { visibility: visible; color: var(--accent-fg); } .auth-wrap { position: relative; } .auth-wrap .theme-toggle { position: absolute; top: 1rem; right: 1rem; } /* ---------- responsive ---------- */ .sidebar-backdrop { display: none; } @media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); transition: transform .2s ease; } .sidebar.open { transform: translateX(0); } .main { margin-left: 0; } .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1025; } [data-bs-theme="dark"] .sidebar-backdrop.show { background: rgba(0,0,0,.6); } .kpi-grid.five, .kpi-grid.four, .kpi-grid.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } .content { padding: 1rem; } } @media (max-width: 575.98px) { .kpi-grid.five, .kpi-grid.four, .kpi-grid.six { grid-template-columns: 1fr; } table.data { font-size: .82rem; } } /* ---------- print ---------- */ @media print { .sidebar, .topbar, .footer, .no-print, .pager, .filter-bar, .theme-toggle { display: none !important; } .main { margin-left: 0 !important; } .content { padding: 0; max-width: none; } body { background: #fff; font-size: 12px; } .card, .table-card { border: none; } a { color: #000; text-decoration: none; } .print-header { display: block !important; margin-bottom: 1rem; } table.data { page-break-inside: auto; } table.data tr { page-break-inside: avoid; } } .print-header { display: none; } /* Bot trap on the sign-in forms (LoginFormGuard). Positioned off-screen rather than display:none or visibility:hidden, both of which form-filling scripts check for and skip. aria-hidden and tabindex="-1" on the markup keep it away from screen readers and the keyboard, so no real visitor ever meets it. */ .offscreen-trap { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }