:root, [data-theme="dark"] { --bg:#0D1B2E; --surface:#172541; --surface2:#1E2E4F; --border:rgba(99,148,217,.18); --border-hi:rgba(99,148,217,.42); --text:#FFFFFF; --text-sec:rgba(255,255,255,.86); --muted:rgba(178,198,231,.62); --accent:#4F8EF7; --accent-dim:#7DAEFA; --accent-bg:rgba(79,142,247,.14); --green:#4ADE80; --green-bg:rgba(74,222,128,.14); --red:#F87171; --red-bg:rgba(248,113,113,.14); --amber:#F59E0B; --amber-bg:rgba(245,158,11,.14); --row-hover:rgba(99,148,217,.06); --row-border:rgba(99,148,217,.08); --card-shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 4px 18px rgba(0,0,0,.35); --glow-shadow:0 0 0 1px rgba(79,142,247,.22), 0 8px 28px rgba(79,142,247,.08); --overlay:rgba(5,12,24,.75); --font-body:'Inter',system-ui,sans-serif; --font-head:'Space Grotesk',sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace; } [data-theme="light"] { --bg:#F0F4FA; --surface:#FFFFFF; --surface2:#E8EDF6; --border:rgba(59,100,180,.15); --border-hi:rgba(59,100,180,.35); --text:#0D1B2E; --text-sec:#1E2D45; --muted:#5A7099; --accent:#2563EB; --accent-dim:#3B82F6; --accent-bg:rgba(37,99,235,.1); --green:#16A34A; --green-bg:rgba(22,163,74,.1); --red:#DC2626; --red-bg:rgba(220,38,38,.1); --amber:#D97706; --amber-bg:rgba(217,119,6,.1); --row-hover:rgba(37,99,235,.04); --row-border:rgba(37,99,235,.08); --card-shadow:0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06); --glow-shadow:0 0 0 1px rgba(37,99,235,.2), 0 4px 16px rgba(37,99,235,.08); --overlay:rgba(220,228,240,.80); } * { box-sizing:border-box; margin:0; padding:0; } html,body { height:100%; } body { font-family:var(--font-body); background:var(--bg); color:var(--text); font-size:14px; line-height:1.5; overflow-x:hidden; } body.modal-open { overflow:hidden; } /* ── Logo ── */ #logoImg { border-radius:6px; } [data-theme="dark"] #logoImg { mix-blend-mode:normal; } /* ── Topbar ── */ .topbar { background:var(--surface); border-bottom:1px solid var(--border); padding:0 24px; min-height:60px; display:flex; align-items:center; justify-content:space-between; gap:18px; position:sticky; top:0; z-index:50; } .topbar-left { display:flex; align-items:center; gap:18px; min-width:0; flex:1; } .topbar-right { display:flex; align-items:center; gap:14px; min-width:0; } .logo-text { font-family:var(--font-head); font-size:18px; font-weight:700; letter-spacing:.5px; color:var(--text); } .logo-text .accent { color:var(--accent); } .divider-v { width:1px; height:24px; background:var(--border); } .page-title { font-size:13px; color:var(--muted); font-weight:600; letter-spacing:.8px; text-transform:uppercase; } .live-badge { display:flex; align-items:center; gap:6px; background:var(--accent-bg); color:var(--accent); font-size:10px; font-weight:700; padding:5px 10px; border-radius:6px; letter-spacing:1.2px; text-transform:uppercase; font-family:var(--font-mono); } .live-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} } .date-label { font-size:11px; color:var(--muted); font-family:var(--font-mono); letter-spacing:.5px; } /* ── Business selector (dropdown) ── */ .biz-select { background:var(--surface); border:1px solid var(--border); color:var(--text); padding:6px 28px 6px 12px; border-radius:6px; font-size:11px; font-weight:600; cursor:pointer; font-family:var(--font-body); letter-spacing:.4px; outline:none; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237DAEFA'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; transition:border-color .2s; } .biz-select:hover,.biz-select:focus { border-color:var(--border-hi); } /* appearance:none (needed for the custom arrow above) drops the native focus ring along with the rest of the control's default chrome — put a keyboard focus indicator back explicitly rather than leaving it invisible. */ .biz-select:focus-visible { outline:none; box-shadow:0 0 0 2px var(--accent); } /* ── Tab bar ── */ .tab-bar { background:var(--bg); border-bottom:1px solid var(--border); padding:0 24px; display:flex; gap:0; overflow-x:auto; position:sticky; top:60px; z-index:49; } .tab { background:transparent; border:none; color:var(--muted); padding:14px 20px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all .2s; font-family:var(--font-body); border-bottom:3px solid transparent; white-space:nowrap; } .tab:hover { color:var(--text-sec); } .tab.active { color:var(--text); border-bottom-color:var(--accent); } /* ── Main ── */ .main { padding:24px; max-width:1600px; margin:0 auto; } .section-header { margin-bottom:18px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; } .section-title { font-family:var(--font-head); font-size:22px; font-weight:700; letter-spacing:-.01em; color:var(--text); } .section-sub { font-size:12px; color:var(--muted); font-family:var(--font-mono); } /* ── KPI grid ── */ .kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; } .kpi-card { background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--accent); border-radius:10px; padding:18px 20px 16px; position:relative; box-shadow:var(--card-shadow); min-height:118px; display:flex; flex-direction:column; } .kpi-card.discovery { border-top-color:var(--amber); } .kpi-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px; } .kpi-label { font-size:11px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); line-height:1.3; flex:1; } .kpi-ref { font-family:var(--font-mono); font-size:9px; color:var(--accent-dim); padding:2px 6px; border:1px solid var(--border); border-radius:4px; flex-shrink:0; letter-spacing:.5px; } .kpi-value { font-family:var(--font-head); font-size:clamp(22px,2vw,28px); font-weight:700; line-height:1.1; color:var(--text); letter-spacing:-.02em; } .kpi-sub { font-size:11px; color:var(--muted); margin-top:8px; font-family:var(--font-mono); display:flex; gap:8px; align-items:center; } .kpi-trend { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; padding:2px 7px; border-radius:4px; } .kpi-trend.up { color:var(--green); background:var(--green-bg); } .kpi-trend.down { color:var(--red); background:var(--red-bg); } .kpi-trend.flat { color:var(--amber); background:var(--amber-bg); } /* ── Discovery overlay ── */ .kpi-card.discovery { position:relative; } .kpi-card.discovery::after { content:''; position:absolute; inset:0; border-radius:10px; background:var(--overlay); pointer-events:none; z-index:2; } .kpi-card.discovery .kpi-ref { position:relative; z-index:3; font-weight:700; font-size:10px; color:var(--muted); } .kpi-card.no-data { opacity:.45; } .kpi-card.no-data .kpi-ref { font-weight:700; opacity:1; } /* ── Loading overlay (fetch still in flight) — same dimmed-overlay technique as .discovery, but accent-colored so "not back yet" reads distinctly from .discovery's "no backend at all" (amber) and .no-data's "fetched, empty" (plain dim). Takes priority over both while any dependency is pending. ── */ .kpi-card.loading { position:relative; border-top-color:var(--accent); } .kpi-card.loading::after { content:''; position:absolute; inset:0; border-radius:10px; background:var(--overlay); pointer-events:none; z-index:2; } /* Explicit "Loading…" pill + spinner, shared by .kpi-card.loading, .widget.loading and .compare-card.loading — sits above the dimmed ::after overlay (z-index:3) instead of relying on the overlay/status-dot alone, which was too easy to miss. Positioned absolute, so it needs no layout space from the (already dimmed, soon-to-be-replaced) content behind it. */ .loading-badge { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.3px; color:var(--text-sec); background:var(--surface); border:1px solid var(--border-hi); border-radius:20px; padding:7px 16px; box-shadow:var(--card-shadow); white-space:nowrap; } .loading-badge-spinner { width:12px; height:12px; flex-shrink:0; border-radius:50%; border:2px solid var(--border); border-top-color:var(--accent); animation:loading-spin .7s linear infinite; } .kpi-card.expandable { cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .1s; } .kpi-card.expandable:hover { border-top-color:var(--accent); } /* Stronger clickable affordance for drill-down cards */ .kpi-card.drilldown:hover { box-shadow:0 0 0 1px var(--accent); } .kpi-card.drilldown:hover .drill-caret { color:var(--accent); } .drill-value { display:inline-flex; align-items:center; gap:8px; } .drill-caret { font-size:14px; color:var(--muted); transition:color .15s, transform .15s; } .kpi-card.drilldown:hover .drill-value { text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; } /* Date inputs — native calendar follows the active theme */ .date-input { font-size:11px; padding:3px 6px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); color-scheme:light; } [data-theme="dark"] .date-input { color-scheme:dark; } .date-input.date-invalid { border-color:var(--red); box-shadow:0 0 0 2px var(--red-bg); } .date-clear { font-size:11px; padding:3px 8px; border:1px solid var(--border); border-radius:4px; background:transparent; color:var(--muted); cursor:pointer; } .date-clear:hover { border-color:var(--accent); color:var(--text); } .pm-range-row { display:flex; align-items:center; gap:6px; } .date-type-icon { width:24px; height:24px; flex-shrink:0; padding:0; border:1px solid var(--border); border-radius:4px; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; } .date-type-icon:hover { border-color:var(--accent); color:var(--text); } /* KPI-020 numbers rendered as real buttons so they read as clickable */ .k020-num { display:inline-flex; flex-direction:column; align-items:center; gap:1px; line-height:1.1; padding:6px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg); font-size:24px; font-weight:700; transition:border-color .15s, background .15s, color .15s; } .k020-num small { font-size:10px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); } .k020-num.k020-btn { cursor:pointer; } .k020-num.k020-btn:hover { border-color:var(--accent); background:var(--surface); } .k020-num.active { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); } /* The 24-hour breach count reads as a warning */ .k020-num.k020-breach { color:var(--red); } .k020-num.k020-breach.k020-btn:hover { border-color:var(--red); } .k020-num.k020-breach.active { border-color:var(--red); box-shadow:inset 0 0 0 1px var(--red); } /* Rows past the 24-hour ship target */ .expand-table tr.row-breach td { color:var(--red); background:var(--red-bg); } .expand-table tr.row-breach td:first-child { font-weight:700; box-shadow:inset 3px 0 0 var(--red); } /* Drill-down panels sit below the whole card grid, so opening one never reflows or hides the other cards */ .kpi-expand { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:8px; padding:12px; margin:-10px 0 20px; overflow-x:auto; } .expand-head { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; } .expand-close { border:1px solid var(--border); background:transparent; color:var(--muted); border-radius:4px; width:22px; height:22px; line-height:1; cursor:pointer; font-size:12px; } .expand-close:hover { border-color:var(--red); color:var(--red); } /* Scrollable table area with a sticky header — controls above it stay put */ .expand-scroll { max-height:55vh; overflow:auto; border-radius:6px; } .expand-scroll .expand-table thead th { position:sticky; top:0; z-index:2; background:var(--surface); box-shadow:inset 0 -1px 0 var(--border); } /* Pagination */ .pager { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:10px; } .pager-info { font-size:11px; color:var(--muted); } .pager-btns { display:flex; gap:4px; flex-wrap:wrap; } .pager-btn { min-width:28px; font-size:11px; padding:3px 7px; border:1px solid var(--border); border-radius:4px; background:transparent; color:var(--muted); cursor:pointer; } .pager-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--text); } .pager-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; } .pager-btn:disabled { opacity:.35; cursor:default; } .pager-gap { color:var(--muted); font-size:11px; padding:0 2px; } /* ── KPI-053 Project Management page ── */ .pm-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:16px; } .pm-site { font-size:12px; color:var(--muted); text-align:right; } .pm-snap { font-size:11px; margin-top:6px; line-height:1.4; } .pm-prompt { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:32px; text-align:center; color:var(--muted); font-size:14px; } .pm-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px; } .pm-card { background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--accent); border-radius:10px; padding:16px 18px; } .pm-card-warn { border-top-color:var(--amber); } .pm-card-dq { border-top-color:#a78bfa; } .pm-card-t { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; } .pm-card-v { font-family:var(--font-head); font-size:32px; font-weight:700; color:var(--accent); line-height:1; } .pm-card-warn .pm-card-v { color:var(--amber); } .pm-card-dq .pm-card-v { color:#a78bfa; } .pm-card-s { font-size:11px; color:var(--muted); margin-top:6px; } .pm-filters { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin-bottom:12px; } .pm-filters label { display:flex; flex-direction:column; gap:4px; font-size:10px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); } .pm-filters select, .pm-filters input { font-size:12px; padding:5px 8px; border:1px solid var(--border); border-radius:5px; background:var(--bg); color:var(--text); min-width:120px; } .pm-filters input[type=text] { min-width:150px; } .pm-clear { align-self:flex-end; font-size:11px; padding:6px 12px; border:1px solid var(--border); border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; } .pm-clear:hover { border-color:var(--accent); color:var(--text); } .pm-sortline { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-size:11px; color:var(--muted); margin-bottom:10px; } .pm-export { font-size:11px; padding:4px 12px; border:1px solid var(--border); border-radius:5px; background:transparent; color:var(--muted); cursor:not-allowed; } .pm-export-on { background:var(--accent); border-color:var(--accent); color:#fff; cursor:pointer; font-weight:600; } .pm-export-on:hover { background:var(--accent-hover,#3a7de8); } .pm-export + .pm-export { margin-left:6px; } .pm-table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:8px; } .pm-table { width:100%; border-collapse:collapse; font-size:12px; white-space:nowrap; } .pm-table th { text-align:left; padding:9px 12px; color:var(--muted); font-weight:600; border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; } .pm-table td { padding:8px 12px; border-bottom:1px solid var(--border); color:var(--text); } .pm-table tr:last-child td { border-bottom:none; } .pm-table tr.admin-user-row { cursor:pointer; } .pm-table tr.admin-user-row:hover td { background:var(--surface); } .pm-pager { margin-top:12px; } /* Admin panel */ .admin-subtabs { display:flex; gap:8px; margin-bottom:16px; } .admin-create-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin-bottom:16px; } .admin-create-row input, .admin-create-row select { font-size:12px; padding:8px 10px; border:1px solid var(--border); border-radius:5px; background:var(--bg); color:var(--text); min-width:180px; font-family:inherit; } .admin-create-row input:disabled, .admin-create-row select:disabled { opacity:.55; cursor:not-allowed; } .btn-sm { font-size:11px; padding:5px 11px; border:1px solid var(--border); border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; font-family:inherit; margin-right:6px; } .btn-sm:hover { border-color:var(--accent); color:var(--text); } .btn-sm:disabled { opacity:.55; cursor:not-allowed; } .admin-create-row .btn-sm { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; } .admin-create-row .btn-sm:hover { background:var(--accent-hover,#3a7de8); } .admin-invite-notice { display:flex; flex-wrap:wrap; align-items:center; gap:10px; background:var(--amber-bg); border:1px solid var(--amber); border-radius:8px; padding:10px 14px; margin-bottom:16px; font-size:12px; color:var(--text); } .admin-invite-notice input { flex:1; min-width:260px; font-size:12px; font-family:var(--font-mono,monospace); padding:6px 9px; border:1px solid var(--border); border-radius:5px; background:var(--bg); color:var(--text); } .pm-table .admin-inline-input { font-size:12px; padding:8px 10px; border:1px solid var(--border); border-radius:5px; background:var(--bg); color:var(--text); font-family:inherit; } .toggle-row .admin-inline-input { font-size:12px; padding:6px 9px; border:1px solid var(--border); border-radius:5px; background:var(--bg); color:var(--text); font-family:inherit; color-scheme:light; } [data-theme="dark"] .toggle-row .admin-inline-input { color-scheme:dark; } /* Admin → SPT Target: sortable column headers + the sticky "Add target" bar */ .pm-table th.sortable { cursor:pointer; user-select:none; } .pm-table th.sortable:hover { color:var(--text); } .pm-table th.sortable.active { color:var(--accent); } .pm-table th .sort-arrow { font-size:9px; opacity:.7; margin-left:2px; } .pm-table th.sortable.active .sort-arrow { opacity:1; } .spt-sticky-add { position:sticky; bottom:40px; z-index:10; box-shadow:var(--card-shadow); } /* Login Tokens card */ .token-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--card-shadow); padding:20px 22px; margin-bottom:16px; } .token-card-head { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; } .token-icon { font-size:18px; line-height:1.3; margin-top:1px; } .token-card-title { font-family:var(--font-head); font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px; } .token-card-sub { font-size:12px; color:var(--muted); line-height:1.5; } .token-card-sub strong { color:var(--text); } .token-card textarea { width:100%; min-height:180px; font-size:12px; padding:10px 12px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); font-family:inherit; resize:vertical; margin-bottom:10px; } .token-card textarea:focus { outline:none; border-color:var(--accent); } .token-option { display:flex; gap:10px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--border); cursor:pointer; } .token-option input[type=radio] { margin-top:3px; width:15px; height:15px; accent-color:var(--accent); flex-shrink:0; cursor:pointer; color-scheme:light; } [data-theme="dark"] .token-option input[type=radio] { color-scheme:dark; } .token-option-title { font-size:13px; font-weight:600; color:var(--text); } .token-option-desc { font-size:11px; color:var(--muted); margin-top:3px; line-height:1.5; } .token-option-days-row { display:flex; align-items:center; gap:8px; margin:8px 0 6px; } .token-days-input { width:80px; font-size:12px; padding:7px 9px; border:1px solid var(--border); border-radius:5px; background:var(--bg); color:var(--text); font-family:inherit; } .token-days-input-inactive { opacity:.5; } .token-option-days-row span { font-size:12px; color:var(--muted); } .token-save-btn { margin-top:6px; } .token-days-input.token-days-invalid { border-color:var(--red); box-shadow:0 0 0 2px var(--red-bg); } .token-save-btn:disabled { opacity:.5; cursor:not-allowed; } /* Toggle switch (member page permissions) */ .toggle-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--border); font-size:13px; color:var(--text); } .toggle-row:last-of-type { border-bottom:none; } .toggle-switch { position:relative; display:inline-block; width:38px; height:22px; flex-shrink:0; } .toggle-switch input { opacity:0; width:0; height:0; } .toggle-slider { position:absolute; inset:0; background:var(--border); border-radius:22px; cursor:pointer; transition:background .15s; } .toggle-slider::before { content:''; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .15s; } .toggle-switch input:checked + .toggle-slider { background:var(--accent); } .toggle-switch input:checked + .toggle-slider::before { transform:translateX(16px); } .toggle-switch input:disabled + .toggle-slider { opacity:.5; cursor:not-allowed; } /* Impersonation banner */ .imp-banner { background:var(--amber); color:#1a1200; font-size:12px; font-weight:600; text-align:center; padding:8px 16px; letter-spacing:.2px; } .imp-banner button { margin-left:10px; background:rgba(0,0,0,.18); border:1px solid rgba(0,0,0,.3); color:inherit; padding:3px 12px; border-radius:5px; cursor:pointer; font-weight:700; font-family:inherit; } .imp-banner button:hover { background:rgba(0,0,0,.28); } /* Data staleness banner — shown when one or more live KPI fetches failed, so a broken sync pipeline is visible on the dashboard itself instead of silently leaving old/demo numbers on screen with no indication. */ .stale-banner { background:var(--red); color:#fff; font-size:12px; font-weight:600; text-align:center; padding:8px 16px; letter-spacing:.2px; } /* Status pills */ .pm-pill { display:inline-block; padding:2px 9px; border-radius:11px; font-size:11px; font-weight:600; border:1px solid transparent; } .pm-hit { color:var(--green); background:var(--green-bg); } .pm-miss { color:var(--red); background:var(--red-bg); } .pm-over { color:var(--amber); background:var(--amber-bg); } .pm-within { color:var(--accent);background:rgba(79,142,247,.14); } .pm-container { color:var(--muted); background:var(--surface2); border-color:var(--border); } .pm-dq { color:#a78bfa; background:rgba(167,139,250,.14); } /* Back-to-top */ .scroll-top { position:fixed; right:20px; bottom:20px; width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:18px; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; box-shadow:0 4px 14px rgba(0,0,0,.25); z-index:50; } .scroll-top.visible { opacity:1; pointer-events:auto; } .scroll-top:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); } .expand-table { width:100%; border-collapse:collapse; font-size:12px; } .expand-table th { text-align:left; padding:6px 10px; color:var(--muted); font-weight:600; border-bottom:1px solid var(--border); } .expand-table td { padding:6px 10px; border-bottom:1px solid var(--border); color:var(--text); } .expand-table tr:last-child td { border-bottom:none; } .widget.discovery .widget-ref { position:relative; z-index:3; font-weight:700; font-size:10px; color:var(--muted); } .widget.discovery { position:relative; } .widget.discovery::after { content:''; position:absolute; inset:0; border-radius:10px; background:var(--overlay); pointer-events:none; z-index:2; } /* Loading overlay — see .kpi-card.loading above for the same pattern/rationale. */ .widget.loading { position:relative; } .widget.loading::after { content:''; position:absolute; inset:0; border-radius:10px; background:var(--overlay); pointer-events:none; z-index:2; } /* ── Theme toggle ── */ .theme-toggle { background:transparent; border:1px solid var(--border); color:var(--muted); width:32px; height:32px; border-radius:6px; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:all .2s; } .theme-toggle:hover { border-color:var(--border-hi); color:var(--text); } .currency-toggle { background:transparent; border:1px solid var(--border); color:var(--muted); padding:6px 10px; border-radius:6px; cursor:pointer; font-size:11px; font-weight:600; letter-spacing:.5px; font-family:inherit; transition:all .2s; } .currency-toggle:hover { border-color:var(--border-hi); color:var(--text); } /* ── Status dot ── */ .status-dot { width:6px; height:6px; border-radius:50%; display:inline-block; vertical-align:middle; margin-right:5px; } .status-dot.ready { background:var(--green); } .status-dot.discovery { background:var(--amber); } .status-dot.loading { background:var(--accent); animation:pulse 1.2s ease-in-out infinite; } /* ── Tenant status badge (Admin → Tenants) ── */ .status-badge { display:inline-block; font-size:11px; font-weight:600; padding:3px 9px; border-radius:12px; margin-right:8px; } .status-badge.active { color:var(--green); background:var(--green-bg); } .status-badge.suspended { color:var(--red); background:var(--red-bg); } /* ── Conduit status badges (Admin → Conduit) — reuse existing color tokens ── */ .status-badge.online { color:var(--green); background:var(--green-bg); } .status-badge.degraded { color:var(--amber); background:var(--amber-bg); } .status-badge.offline { color:var(--muted); background:var(--surface2); } .status-badge.revoked { color:var(--red); background:var(--red-bg); } .status-badge.pending { color:var(--accent); background:var(--accent-bg); } /* ── Widget grid ── */ .widget-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:24px; } .widget-grid.full > .widget { grid-column:1/-1; } .widget { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:18px 20px 20px; box-shadow:var(--card-shadow); min-width:0; } .widget canvas { max-height:260px; } .widget.full { grid-column:1/-1; } .widget-title { font-family:var(--font-head); font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--text); margin-bottom:2px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .widget-sub { font-size:11px; color:var(--muted); margin-bottom:14px; font-family:var(--font-mono); } .widget-ref { font-family:var(--font-mono); font-size:9px; color:var(--accent-dim); padding:2px 6px; border:1px solid var(--border); border-radius:4px; letter-spacing:.5px; } /* Department legend (KPI-013 abbreviation key — card + inspect modal) */ .dept-legend { display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:12px; } .dept-legend-chip { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); background:var(--surface2); border:1px solid var(--border); border-radius:11px; padding:2px 9px; } .dept-legend-code { font-family:var(--font-mono); font-weight:700; color:var(--text); } .period-bar { display:inline-flex; gap:2px; margin-left:auto; } .period-btn { background:transparent; border:1px solid var(--border); color:var(--muted); font-size:10px; font-weight:600; padding:3px 10px; border-radius:4px; cursor:pointer; letter-spacing:.4px; font-family:inherit; transition:all .15s; } .period-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; } .period-btn:disabled { opacity:.3; cursor:not-allowed; } .period-btn:not(:disabled):not(.active):hover { border-color:var(--accent-dim); color:var(--text); } /* ── Inspect modal (generalized "click a widget to drill in" pattern) ── */ .widget.inspectable { cursor:zoom-in; transition:filter .15s, box-shadow .15s; } .widget.inspectable:hover { filter:brightness(.85); box-shadow:var(--glow-shadow); } .inspect-overlay { display:none; position:fixed; inset:0; background:var(--overlay); z-index:200; align-items:center; justify-content:center; padding:24px; } .inspect-overlay.open { display:flex; } .inspect-modal { background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--card-shadow); width:min(1200px,96vw); height:min(860px,92vh); display:flex; flex-direction:column; overflow:hidden; } .inspect-head { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); flex-wrap:wrap; } .inspect-title { font-family:var(--font-head); font-size:14px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text); } .inspect-close { margin-left:auto; background:transparent; border:1px solid var(--border); color:var(--muted); width:30px; height:30px; border-radius:6px; font-size:16px; line-height:1; cursor:pointer; } .inspect-close:hover { border-color:var(--accent); color:var(--text); } .inspect-body { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:18px; } .inspect-chart-wrap { min-height:300px; position:relative; } .inspect-detail-panel { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:14px 16px; } .inspect-detail-panel h4 { font-family:var(--font-head); font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-bottom:10px; } .inspect-detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:10px; } .inspect-detail-stat .val { font-family:var(--font-mono); font-size:18px; font-weight:700; color:var(--text); } .inspect-detail-stat .lbl { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-top:2px; } .inspect-empty { color:var(--muted); font-size:12px; font-style:italic; padding:12px 4px; } .inspect-actions { display:flex; gap:8px; margin-left:auto; } /* Sticky footer for the permissions modal's Save button only — scoped via .inspect-actions-sticky (set only by renderUserConfigModalBody()) rather than changing the shared .inspect-actions rule above, since that rule is reused by every other inspect modal (KPI drilldowns, agent/pipeline/ sync-run panels), none of which have a footer. The negative margin/bottom offset cancels .inspect-body's own 20px padding so the bar bleeds flush to the modal's edges and bottom, then restores its own padding for the button. */ .inspect-actions.inspect-actions-sticky { position:sticky; bottom:-20px; margin:0 -20px -20px; padding:14px 20px; background:var(--surface); border-top:1px solid var(--border); z-index:5; } .inspect-export-btn { font-size:11px; padding:5px 12px; border:1px solid var(--border); border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; font-weight:600; font-family:inherit; } .inspect-export-btn:hover { border-color:var(--accent); color:var(--text); } .loading-overlay { display:none; position:fixed; inset:0; background:var(--overlay); z-index:210; align-items:center; justify-content:center; } .loading-overlay.open { display:flex; } .loading-box { background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--card-shadow); padding:20px 28px; display:flex; align-items:center; gap:12px; } .loading-text { font-size:13px; font-weight:600; color:var(--text); } .loading-spinner { width:16px; height:16px; border-radius:50%; border:2px solid var(--border); border-top-color:var(--accent); animation:loading-spin .7s linear infinite; } @keyframes loading-spin { to { transform:rotate(360deg); } } /* In-flight-request spinner shown inline inside a btn-sm (Send Invite, permissions Save) via setFormBusy() — border-top-color:currentColor so it auto-matches whichever text color the button already has. */ .btn-spinner { width:10px; height:10px; border-radius:50%; border:2px solid var(--border); border-top-color:currentColor; animation:loading-spin .7s linear infinite; display:inline-block; vertical-align:middle; margin-right:5px; } /* Table-centric inspect renderers (K019/K020/K022): let the table fill the remaining modal height and scroll on its own, rather than fighting .expand-scroll's own fixed 55vh cap for a second, nested scrollbar. */ .inspect-body .expand-scroll { max-height:none; flex:1 1 auto; min-height:0; } /* Litepicker theme bridge — maps its default palette onto our CSS vars so it follows light/dark automatically. !important is needed here: litepicker.css loads after styles.css, so same-specificity rules would otherwise lose the cascade to it. */ .litepicker { font-family:var(--font-body); } .litepicker .container__months { background-color:var(--surface) !important; color:var(--text) !important; box-shadow:var(--card-shadow); } .litepicker .container__footer { background-color:var(--surface) !important; border-top:1px solid var(--border); } .litepicker .month-item-name, .litepicker .month-item-year, .litepicker .month-item-weekdays-row > div { color:var(--text) !important; } /* month-item-name/month-item-year render as native