/* ============================================================================ Sentinel — design system Tokens first (light + dark), then components. Dark mode follows the OS by default and can be overridden explicitly via . ========================================================================== */ :root{ color-scheme: light; /* surfaces */ --bg:#f5f7fa; --surface:#ffffff; --surface-2:#f3f6fa; --surface-3:#e9eef5; --zebra:rgba(15,23,42,.015); /* ink */ --text:#0f172a; --text-2:#5a6678; --text-3:#94a3b8; /* lines */ --border:#e7eaf0; --border-2:#d6dbe4; /* brand */ --brand:#2563eb; --brand-2:#1d4ed8; --brand-weak:#eef3ff; --brand-ink:#ffffff; /* semantic */ --pos:#16a34a; --pos-weak:#dcfce7; --pos-ink:#15803d; --neg:#dc2626; --neg-weak:#fde7e7; --neg-ink:#b91c1c; --warn:#d97706; --warn-weak:#fef3c7; --warn-ink:#92600a; --neutral-weak:#eef1f6; --neutral-ink:#516074; /* effects */ --ring:0 0 0 3px rgba(37,99,235,.18); --shadow-sm:0 1px 2px rgba(15,23,42,.06); --shadow-md:0 1px 2px rgba(15,23,42,.05),0 6px 18px rgba(15,23,42,.06); /* chrome (header + nav keep a dark identity in both themes) */ --top-bg:#0f172a; --top-ink:#f8fafc; --top-muted:#9aa6b8; --top-line:#24314a; --nav-bg:#111a2e; --nav-ink:#9aa6b8; --nav-active:#ffffff; --nav-line:#1d2840; /* scale */ --r-sm:7px; --r-md:9px; --r-lg:13px; --r-pill:999px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --maxw:1440px; --fast:.13s ease; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: dark; --bg:#0a0f1c; --surface:#121a2b; --surface-2:#1a2436; --surface-3:#222e44; --zebra:rgba(255,255,255,.018); --text:#e9eef7; --text-2:#97a3b8; --text-3:#65728a; --border:#243049; --border-2:#33415c; --brand:#3b82f6; --brand-2:#2563eb; --brand-weak:#172339; --brand-ink:#ffffff; --pos:#22c55e; --pos-weak:#0f2a1c; --pos-ink:#4ade80; --neg:#ef4444; --neg-weak:#311618; --neg-ink:#fb9c9c; --warn:#f59e0b; --warn-weak:#2f2410; --warn-ink:#fcd34d; --neutral-weak:#1b2436; --neutral-ink:#9aa6b8; --ring:0 0 0 3px rgba(59,130,246,.30); --shadow-sm:0 1px 2px rgba(0,0,0,.45); --shadow-md:0 1px 2px rgba(0,0,0,.5),0 8px 22px rgba(0,0,0,.38); --top-bg:#0c1322; --top-ink:#e9eef7; --top-muted:#7d8aa3; --top-line:#1e2940; --nav-bg:#0c1322; --nav-ink:#7d8aa3; --nav-active:#e9eef7; --nav-line:#1e2940; } } [data-theme="dark"]{ color-scheme: dark; --bg:#0a0f1c; --surface:#121a2b; --surface-2:#1a2436; --surface-3:#222e44; --zebra:rgba(255,255,255,.018); --text:#e9eef7; --text-2:#97a3b8; --text-3:#65728a; --border:#243049; --border-2:#33415c; --brand:#3b82f6; --brand-2:#2563eb; --brand-weak:#172339; --brand-ink:#ffffff; --pos:#22c55e; --pos-weak:#0f2a1c; --pos-ink:#4ade80; --neg:#ef4444; --neg-weak:#311618; --neg-ink:#fb9c9c; --warn:#f59e0b; --warn-weak:#2f2410; --warn-ink:#fcd34d; --neutral-weak:#1b2436; --neutral-ink:#9aa6b8; --ring:0 0 0 3px rgba(59,130,246,.30); --shadow-sm:0 1px 2px rgba(0,0,0,.45); --shadow-md:0 1px 2px rgba(0,0,0,.5),0 8px 22px rgba(0,0,0,.38); --top-bg:#0c1322; --top-ink:#e9eef7; --top-muted:#7d8aa3; --top-line:#1e2940; --nav-bg:#0c1322; --nav-ink:#7d8aa3; --nav-active:#e9eef7; --nav-line:#1e2940; } /* --- base ------------------------------------------------------------------ */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--text); font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} code{font:12px/1.4 ui-monospace,"SF Mono",Menlo,Consolas,monospace; background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 5px} :focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px} .muted{color:var(--text-2)} .small{font-size:12px} .wrap{max-width:var(--maxw);margin:0 auto;padding:var(--sp-5) var(--sp-5) 48px} .neg{color:var(--neg);font-weight:600;font-variant-numeric:tabular-nums} .pos{color:var(--pos);font-weight:600;font-variant-numeric:tabular-nums} /* --- top bar --------------------------------------------------------------- */ .topbar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap; padding:11px var(--sp-5);background:var(--top-bg);color:var(--top-ink); border-bottom:1px solid var(--top-line)} .topbar .brand{display:inline-flex;align-items:center;gap:8px;color:var(--top-ink); font-weight:700;font-size:15px;letter-spacing:.2px} .topbar .brand:hover{text-decoration:none} .logo-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px; border-radius:6px;background:linear-gradient(135deg,var(--brand),#7c3aed);color:#fff; font-size:12px;line-height:1;box-shadow:0 1px 4px rgba(37,99,235,.5)} .topbar .tag{color:var(--top-muted);font-size:11px;font-weight:600;letter-spacing:.3px; text-transform:uppercase;border:1px solid var(--top-line);border-radius:var(--r-pill);padding:2px 9px} .topbar .muted{color:var(--top-muted)} .spacer{flex:1 1 auto} .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px; border:1px solid var(--top-line);background:transparent;color:var(--top-ink);border-radius:var(--r-md); cursor:pointer;font-size:15px;line-height:1;transition:background var(--fast),border-color var(--fast)} .theme-toggle:hover{background:rgba(255,255,255,.07);border-color:var(--top-muted)} .theme-toggle .i-sun{display:none}.theme-toggle .i-moon{display:inline} [data-theme="dark"] .theme-toggle .i-sun{display:inline} [data-theme="dark"] .theme-toggle .i-moon{display:none} /* --- nav ------------------------------------------------------------------- */ .nav{display:flex;gap:2px;background:var(--nav-bg);padding:0 var(--sp-5); border-bottom:1px solid var(--nav-line);overflow-x:auto;scrollbar-width:none} .nav::-webkit-scrollbar{display:none} .nav a{color:var(--nav-ink);font-weight:600;font-size:13px;padding:11px 15px; text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;transition:color var(--fast)} .nav a:hover{color:var(--nav-active);text-decoration:none} .nav a.on{color:var(--nav-active);border-bottom-color:var(--brand)} /* --- flash ----------------------------------------------------------------- */ .flash{max-width:var(--maxw);margin:var(--sp-3) auto 0;padding:0 var(--sp-5)} .flash div{background:var(--neg-weak);border:1px solid var(--neg);color:var(--neg-ink); border-radius:var(--r-md);padding:10px 13px;margin-bottom:var(--sp-2);font-weight:500} /* --- cards ----------------------------------------------------------------- */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); box-shadow:var(--shadow-sm);padding:var(--sp-4);margin-bottom:var(--sp-4)} .card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3); margin-bottom:var(--sp-3);flex-wrap:wrap} h1{font-size:21px;font-weight:700;letter-spacing:-.01em;margin:0 0 3px} h2{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-2);margin:0} .count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px; background:var(--brand-weak);color:var(--brand);border-radius:var(--r-pill); font-size:11px;font-weight:700;padding:0 7px;margin-left:5px;vertical-align:1px} /* --- KPIs ------------------------------------------------------------------ */ .kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-3);margin-bottom:var(--sp-4)} .kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); box-shadow:var(--shadow-sm);padding:13px 15px;display:flex;flex-direction:column;gap:3px} .kpi .k{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-2)} .kpi .v{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .kpi.bad{border-color:var(--neg);background:var(--neg-weak)} .kpi.bad .v{color:var(--neg-ink)} /* --- filters / forms ------------------------------------------------------- */ .filters{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:flex-end} .filters .f{display:flex;flex-direction:column;gap:5px} .filters .f.grow{flex:1;min-width:160px} .filters label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-2)} input,select{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border-2); border-radius:var(--r-sm);padding:7px 10px;outline:none;transition:border-color var(--fast),box-shadow var(--fast)} input:focus,select:focus{border-color:var(--brand);box-shadow:var(--ring)} input::placeholder{color:var(--text-3)} /* --- buttons --------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px; background:var(--brand);color:var(--brand-ink);border:1px solid var(--brand);border-radius:var(--r-sm); padding:8px 16px;cursor:pointer;font:600 14px inherit;transition:background var(--fast),box-shadow var(--fast)} .btn:hover{background:var(--brand-2);border-color:var(--brand-2);text-decoration:none} .btn:active{transform:translateY(.5px)} .btn.full{width:100%;margin-top:var(--sp-1)} .btn.ghost{background:transparent;border-color:var(--top-line);color:var(--top-ink);padding:6px 13px;font-size:13px} .btn.ghost:hover{background:rgba(255,255,255,.08);border-color:var(--top-muted)} /* --- columns --------------------------------------------------------------- */ .cols{display:grid;grid-template-columns:1fr;gap:var(--sp-4)} .cols2{display:grid;grid-template-columns:1.45fr 1fr;gap:var(--sp-4);align-items:start} .cols3{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:var(--sp-4);align-items:start} .cols3 .label{max-width:none;white-space:nowrap} .cols3 .lbl{display:inline-block;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom} .cols3 .rank{width:26px;text-align:right;padding-right:10px} /* --- tables ---------------------------------------------------------------- */ .tscroll{overflow-x:auto;margin:0 calc(-1 * var(--sp-1))} table.movers{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:13px} table.movers th,table.movers td{padding:7px 10px;border-bottom:1px solid var(--border); text-align:left;white-space:nowrap} table.movers thead th{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px; color:var(--text-3);user-select:none;border-bottom:1px solid var(--border-2)} table.movers th[data-sort]{cursor:pointer} table.movers th[data-sort]:hover{color:var(--text-2)} table.movers th.sorted{color:var(--brand)} table.movers td.r,table.movers th.r{text-align:right} table.movers tbody tr:nth-child(even){background:var(--zebra)} table.movers tbody tr:hover{background:var(--surface-2)} table.movers tbody tr:last-child td{border-bottom:none} .label{max-width:560px;white-space:normal;overflow-wrap:anywhere} .label .lbl{font-weight:600} .drill{display:inline-flex;gap:8px;margin-left:6px;font-size:11px;white-space:nowrap} .drill a{color:var(--text-3)} .drill a:hover{color:var(--brand)} .spark-col{width:160px} table.movers td.proj{color:var(--brand);font-style:italic} table.movers td.crossed{font-weight:700} .movers-meta{margin:2px 0 12px;line-height:1.55} /* admin users panel */ .chk{display:inline-flex;align-items:center;gap:6px;font:13px inherit;color:var(--text);text-transform:none;letter-spacing:normal} .admin-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .admin-actions form{margin:0;display:inline-flex;gap:4px;align-items:center} .admin-actions button{appearance:none;border:1px solid var(--border-2);background:var(--surface);color:var(--text-2); border-radius:var(--r-sm);padding:5px 10px;cursor:pointer;font:600 12px inherit;white-space:nowrap;transition:all var(--fast)} .admin-actions button:hover{border-color:var(--brand);color:var(--brand)} .pw-reset input{padding:5px 8px;font-size:12px;max-width:130px} svg.spark{display:block} .pad{padding:22px;text-align:center;color:var(--text-2)} .foot{margin-top:var(--sp-2);line-height:1.6} /* --- badges ---------------------------------------------------------------- */ .badge{display:inline-flex;align-items:center;font:600 11px inherit;border-radius:var(--r-pill); padding:2px 9px;letter-spacing:.2px;white-space:nowrap; background:var(--neutral-weak);color:var(--neutral-ink);text-transform:capitalize} .badge.sent,.badge.active,.badge.up{background:var(--pos-weak);color:var(--pos-ink)} .badge.failed,.badge.suspended,.badge.terminated,.badge.down, .badge.cancelled,.badge.expired{background:var(--neg-weak);color:var(--neg-ink)} .badge.paused{background:var(--warn-weak);color:var(--warn-ink)} .badge.skipped_empty,.badge.setup{background:var(--neutral-weak);color:var(--neutral-ink)} /* --- charts ---------------------------------------------------------------- */ svg.trend .axis{fill:var(--text-2);font-size:11px} /* --- entity ---------------------------------------------------------------- */ .crumb{margin-bottom:var(--sp-3);font-size:13px} .entity-head h1{margin-bottom:4px} .pill{display:inline-flex;align-items:center;background:var(--brand-weak);color:var(--brand); border-radius:var(--r-pill);padding:1px 9px;font-size:12px;font-weight:600;text-transform:capitalize} /* --- report archive -------------------------------------------------------- */ .report-layout{display:grid;grid-template-columns:248px 1fr;gap:var(--sp-4);align-items:start} .runlist{list-style:none;margin:var(--sp-2) 0 0;padding:0;max-height:74vh;overflow:auto} .runlist li.on{background:var(--brand-weak);border-radius:var(--r-md)} .runlist li a{display:flex;align-items:center;gap:8px;padding:8px 10px;color:var(--text);border-radius:var(--r-md)} .runlist li a:hover{text-decoration:none;background:var(--surface-2)} .runlist .rd{font-weight:600;font-variant-numeric:tabular-nums} .report-body{padding:var(--sp-2)} .email-embed{overflow:auto} /* --- login ----------------------------------------------------------------- */ .login{min-height:72vh;display:flex;align-items:center;justify-content:center} .login-card{width:368px;max-width:92vw;box-shadow:var(--shadow-md)} .login-card h1{display:flex;align-items:center;gap:9px;margin-bottom:3px} .login-card form{display:flex;flex-direction:column;gap:13px;margin-top:var(--sp-4)} .login-card label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--text-2)} /* --- hide / unhide --------------------------------------------------------- */ .hide-col{width:34px;text-align:center;padding-left:2px!important;padding-right:6px!important} .hidebtn{appearance:none;border:1px solid transparent;background:transparent;color:var(--text-3); font-size:16px;line-height:1;border-radius:7px;width:24px;height:24px;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;transition:all var(--fast)} .hidebtn:hover{background:var(--neg-weak);color:var(--neg);border-color:var(--neg)} table.movers tbody tr:not(:hover) .hidebtn{opacity:.3} .hidden-card .hidden-list{list-style:none;margin:var(--sp-2) 0 0;padding:0; display:flex;flex-wrap:wrap;gap:var(--sp-2)} .hidden-list li{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2); border:1px solid var(--border);border-radius:var(--r-pill);padding:4px 5px 4px 12px} .hidden-list .hl-label{font-size:12px;font-weight:600;max-width:280px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .unhidebtn{appearance:none;border:1px solid var(--border-2);background:var(--surface);color:var(--brand); font:600 11px inherit;border-radius:var(--r-pill);padding:3px 11px;cursor:pointer;transition:all var(--fast)} .unhidebtn:hover{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)} /* --- responsive ------------------------------------------------------------ */ @media (max-width:1080px){ .kpis{grid-template-columns:repeat(3,1fr)} .cols2{grid-template-columns:1fr} .report-layout{grid-template-columns:1fr} } @media (max-width:720px){ .wrap{padding:var(--sp-3) var(--sp-3) 40px} .topbar{padding:10px var(--sp-3);gap:var(--sp-2)} .topbar .tag{display:none} .nav{padding:0 var(--sp-3)} .nav a{padding:11px 13px} .flash{padding:0 var(--sp-3)} .kpis{grid-template-columns:repeat(2,1fr);gap:var(--sp-2)} .kpi .v{font-size:19px} .card{padding:var(--sp-3);border-radius:var(--r-md)} .filters{gap:var(--sp-2)} .filters .f,.filters .f.grow{flex:1 1 100%;min-width:0} .filters .btn{width:100%} .label{max-width:none} } @media (max-width:420px){ .kpis{grid-template-columns:1fr} h1{font-size:19px} } @media (prefers-reduced-motion:reduce){*{transition:none!important}} /* ============================================================================ Interactive layer — JS-only controls, charts, saved views, auto-refresh ========================================================================== */ /* progressive-enhancement reveal: hidden until the script adds .has-js */ .js-only{display:none} .has-js .js-only{display:flex} /* AJAX loading state on the swap region */ #view{position:relative} #view.is-loading{opacity:.55;transition:opacity .12s;pointer-events:none} /* btn size variant */ .btn.small{padding:6px 13px;font-size:13px} /* uPlot charts */ .chart-wrap{position:relative} .uplot-mount{width:100%} .has-js .uplot-mount{min-height:260px} .has-js .chart-fallback{display:none} .chart-reset{appearance:none;border:1px solid var(--border-2);background:var(--surface);color:var(--text-2); border-radius:var(--r-sm);padding:4px 11px;cursor:pointer;font:600 12px inherit;transition:all var(--fast)} .chart-reset:hover{border-color:var(--brand);color:var(--brand)} .u-legend{color:var(--text-2);font-size:12px;margin-top:4px} .u-legend .u-label{color:var(--text)} .u-legend *{font-variant-numeric:tabular-nums} .u-cursor-x,.u-cursor-y{border-color:var(--border-2)!important} .u-select{background:var(--brand)!important;opacity:.12} /* date-range preset chips */ .presets .preset-row{display:flex;gap:4px} .preset{appearance:none;border:1px solid var(--border-2);background:var(--surface);color:var(--text-2); border-radius:var(--r-sm);padding:7px 10px;cursor:pointer;font:600 12px inherit;transition:all var(--fast)} .preset:hover{border-color:var(--brand);color:var(--brand)} .preset[aria-pressed="true"]{background:var(--brand-weak);border-color:var(--brand);color:var(--brand)} /* auto-refresh stamp */ .ar-stamp-wrap{justify-content:flex-end} #ar-stamp{white-space:nowrap} /* saved-views bar */ .viewsbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;margin-bottom:16px} .views-list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:28px} .views-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-2)} .view-chip{display:inline-flex;align-items:center;gap:3px;background:var(--surface-2);border:1px solid var(--border); border-radius:var(--r-pill);padding:3px 5px 3px 12px;font-size:12px} .view-chip.on{background:var(--brand-weak);border-color:var(--brand)} .view-chip>a{font-weight:600;color:var(--text)} .view-chip.on>a{color:var(--brand)} .view-chip>a:hover{text-decoration:none} .view-del{display:inline-flex;margin:0} .view-del button{appearance:none;border:none;background:transparent;color:var(--text-3);cursor:pointer; font-size:14px;line-height:1;border-radius:50%;width:18px;height:18px;display:inline-flex; align-items:center;justify-content:center;transition:all var(--fast)} .view-del button:hover{background:var(--neg-weak);color:var(--neg)} .save-view{display:inline-flex;gap:6px;align-items:center;margin:0} .save-view input{min-width:190px} /* toast */ .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--top-bg);color:var(--top-ink); padding:10px 18px;border-radius:var(--r-md);box-shadow:var(--shadow-md);font-size:13px;font-weight:600; z-index:50;border:1px solid var(--top-line);max-width:90vw} .toast[hidden]{display:none} @media (max-width:720px){ .viewsbar{flex-direction:column;align-items:stretch} .save-view input{min-width:0;flex:1} }