/* Security — a client's own security console (vo-hub-core core addition). Uses the hub shell's
   ph-nav pills and ax-card look; colours come from the tenant brand via --sc-brand. */
:root { --sc-brand: #0f4b91; --sc-ink: #16263a; --sc-muted: #5b6b80; --sc-line: #e3e9f1; --sc-card: #fff;
  --sc-good: #16794b; --sc-good-bg: #e8f6ee; --sc-bad: #b42318; --sc-bad-bg: #fdecea; --sc-warn: #9a5b00; --sc-warn-bg: #fff4e0; }
.sc-wrap { max-width: 1180px; margin: 0 auto; padding: 24px 20px 64px; color: var(--sc-ink); }
.sc-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 8px 0 18px; }
.sc-eyebrow { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-brand); font-weight: 700; }
.sc-title { margin: 4px 0 6px; font-size: 28px; line-height: 1.15; color: var(--sc-brand); }
.sc-sub { margin: 0; color: var(--sc-muted); font-size: 14px; }
.sc-when { display: flex; align-items: center; gap: 10px; color: var(--sc-muted); font-size: 13px; }
.sc-btn { border: 1px solid var(--sc-line); background: #fff; color: var(--sc-brand); font-weight: 600; border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.sc-btn:hover { border-color: var(--sc-brand); }
.sc-tabs { margin-bottom: 18px; flex-wrap: wrap; }
.sc-body { min-height: 320px; }
.sc-loading, .sc-empty { padding: 40px 24px; text-align: center; color: var(--sc-muted); background: var(--sc-card); border: 1px dashed var(--sc-line); border-radius: 14px; }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
.sc-tile { background: var(--sc-card); border: 1px solid var(--sc-line); border-radius: 14px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(16, 40, 80, .04); }
.sc-tile .v { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--sc-brand); }
.sc-tile .l { margin-top: 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-muted); font-weight: 700; }
.sc-tile .n { margin-top: 6px; font-size: 13px; color: var(--sc-muted); }
.sc-tile.good .v { color: var(--sc-good); } .sc-tile.bad .v { color: var(--sc-bad); } .sc-tile.warn .v { color: var(--sc-warn); }
.sc-card { background: var(--sc-card); border: 1px solid var(--sc-line); border-radius: 14px; margin-bottom: 18px; overflow: hidden; }
.sc-card h2 { margin: 0; padding: 14px 18px; font-size: 15px; border-bottom: 1px solid var(--sc-line); color: var(--sc-ink); }
.sc-card .why { padding: 10px 18px 0; margin: 0; color: var(--sc-muted); font-size: 13px; }
.sc-rows { list-style: none; margin: 0; padding: 6px 0; }
.sc-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 18px; border-top: 1px solid #f1f4f8; }
.sc-rows li:first-child { border-top: 0; }
.sc-rows .main { min-width: 0; } .sc-rows .t { font-weight: 600; overflow-wrap: anywhere; } .sc-rows .d { font-size: 13px; color: var(--sc-muted); overflow-wrap: anywhere; }
.sc-pill { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: #eef2f7; color: var(--sc-muted); }
.sc-pill.good { background: var(--sc-good-bg); color: var(--sc-good); } .sc-pill.bad { background: var(--sc-bad-bg); color: var(--sc-bad); } .sc-pill.warn { background: var(--sc-warn-bg); color: var(--sc-warn); }
.sc-blind { margin: 10px 18px 14px; padding: 10px 12px; border-radius: 10px; background: var(--sc-warn-bg); color: var(--sc-warn); font-size: 13px; }
.sc-bar { height: 8px; border-radius: 99px; background: #eef2f7; overflow: hidden; margin-top: 8px; }
.sc-bar > i { display: block; height: 100%; background: var(--sc-brand); }
.sc-bar.over > i { background: var(--sc-bad); }
@media (max-width: 640px) { .sc-title { font-size: 22px; } .sc-rows li { grid-template-columns: 1fr; } }
/* Pills: the hub's .ph-nav look lives in work.css, which this page does not load (a whole Work
   Hub stylesheet for six tabs). Same shape, in the tenant brand. */
.sc-tabs { display: flex; gap: 6px; padding: 5px; background: #fff; border: 1px solid var(--sc-line); border-radius: 999px; width: fit-content; max-width: 100%; }
.sc-tabs .ph-nav-btn { appearance: none; border: 0; background: transparent; color: var(--sc-muted); font: 600 13px/1 inherit; font-family: inherit; padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.sc-tabs .ph-nav-btn:hover { color: var(--sc-brand); background: #f1f5fb; }
.sc-tabs .ph-nav-btn.is-active { background: var(--sc-brand); color: #fff; box-shadow: 0 1px 3px rgba(15, 75, 145, .25); }
.sc-tabs .ph-nav-btn:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 2px; }
@media (max-width: 640px) { .sc-tabs { border-radius: 14px; flex-wrap: wrap; width: auto; } }
/* Tabs up top (Tyler 2026-09-29: "the tabs ... are down low, and they should be up top, just like
   where everything is"). layout-overhaul.js lifts the tablist into the header bar, as it does for
   Automations and Storage; there the bar is the container, so the pill group loses its own box. */
.ai-topnav-inner .sc-tabs { border: 0; background: transparent; padding: 0; margin: 0; width: auto; box-shadow: none; }