/* Portal styling.
 *
 * Lifted from Mockups/LicensePortal.html so the prototype the technical manager
 * approved and the thing that ships share one visual language rather than
 * drifting. The prototype's role and brand switchers are scaffolding over
 * mockup data and are not here: the real portal learns both from the session.
 *
 * The theme handles all three viewer states - an explicit light or dark choice,
 * and the un-stamped default where only prefers-color-scheme separates them.
 */

:root{
  --bg:#eef1f5; --surface:#ffffff; --surface-2:#f7f9fb;
  --ink:#101922; --ink-2:#46586b; --ink-3:#75879a;
  --line:#d8e0e8; --line-2:#e8edf2;
  --brand:#002855; --brand-ink:#ffffff; --brand-soft:#e3ebf4;
  --ok:#146c43; --ok-soft:#dff3e6;
  --warn:#8a5a00; --warn-soft:#fdf0d5;
  --bad:#9b2226; --bad-soft:#fbe3e4;
  --focus:#2f6fb5;
  --shadow:0 1px 2px rgba(16,25,34,.06),0 4px 14px rgba(16,25,34,.06);
  --radius:6px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b1017; --surface:#141c26; --surface-2:#111823;
    --ink:#e7edf4; --ink-2:#a3b1c1; --ink-3:#78889a;
    --line:#26333f; --line-2:#1e2a35;
    --brand:#5f9ada; --brand-ink:#08121d; --brand-soft:#182636;
    --ok:#5cc98b; --ok-soft:#12281d;
    --warn:#e0a733; --warn-soft:#2a2113;
    --bad:#ef7c80; --bad-soft:#2d1618;
    --focus:#79b0ec;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.34);
  }
}
:root[data-theme="dark"]{
  --bg:#0b1017; --surface:#141c26; --surface-2:#111823;
  --ink:#e7edf4; --ink-2:#a3b1c1; --ink-3:#78889a;
  --line:#26333f; --line-2:#1e2a35;
  --brand:#5f9ada; --brand-ink:#08121d; --brand-soft:#182636;
  --ok:#5cc98b; --ok-soft:#12281d;
  --warn:#e0a733; --warn-soft:#2a2113;
  --bad:#ef7c80; --bad-soft:#2d1618;
  --focus:#79b0ec;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.34);
}

*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased}
code,.mono,td.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:600; letter-spacing:-.01em}
h1{font-size:20px} h2{font-size:16px}
a{color:var(--brand)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

#app{display:none; min-height:100vh; grid-template-columns:214px 1fr}
#app.on{display:grid}
@media (max-width:860px){#app.on{grid-template-columns:1fr}}
aside{background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:16px 0}
@media (max-width:860px){aside{border-right:0;border-bottom:1px solid var(--line)}}
.wordmark{padding:0 16px 14px; border-bottom:1px solid var(--line-2); margin-bottom:8px}
.wordmark b{display:block; font-size:17px; letter-spacing:-.02em; color:var(--brand)}
.wordmark span{display:block; font-size:11px; color:var(--ink-3); margin-top:1px}
nav{display:flex; flex-direction:column; gap:1px; padding:0 8px}
nav a{display:block; padding:7px 10px; border-radius:var(--radius); color:var(--ink-2);
  text-decoration:none; font-size:13.5px; font-weight:500}
nav a:hover{background:var(--surface-2); color:var(--ink)}
nav a.sel{background:var(--brand-soft); color:var(--brand); font-weight:600}
nav .cat{padding:14px 10px 5px; font-size:10px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-3); font-weight:600}
.whoami{margin-top:auto; padding:12px 16px 0; border-top:1px solid var(--line-2)}
.whoami .e{font-size:12px; font-weight:500; word-break:break-all}
.whoami .r{font-size:11px; color:var(--ink-3)}
.scopetag{display:inline-block; margin-top:5px; font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; padding:1px 6px; border-radius:3px;
  background:var(--brand-soft); color:var(--brand)}

main{min-width:0; padding:22px 26px 60px}
@media (max-width:600px){main{padding:16px 14px 40px}}
.head{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start}
.head p{margin:3px 0 0; color:var(--ink-2); font-size:13px; max-width:70ch}
.head .sp{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.sec{margin-top:20px}

.btn{display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  cursor:pointer; font-size:13px; font-weight:500; white-space:nowrap; text-decoration:none; color:var(--ink)}
.btn:hover{background:var(--surface-2)}
.btn.pri{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.btn.pri:hover{filter:brightness(1.12)}
.btn.danger{color:var(--bad)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.sm{padding:3px 9px; font-size:12px}
input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{
  width:100%; padding:7px 9px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius)}
label.f{display:block; margin-bottom:12px}
label.f > span{display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:4px}
label.f .hint{font-weight:400; color:var(--ink-3); font-size:11.5px; display:inline}

.card{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow)}
.card > .ch{padding:11px 14px; border-bottom:1px solid var(--line-2);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.card > .cb{padding:14px}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px}
.stat .k{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:600}
.stat .v{font-size:25px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-top:3px}
.stat .s{font-size:11.5px; color:var(--ink-3)}

.tw{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:13px}
th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-3); font-weight:600; padding:8px 12px; white-space:nowrap;
  border-bottom:1px solid var(--line); background:var(--surface-2)}
td{padding:8px 12px; border-bottom:1px solid var(--line-2); vertical-align:middle; white-space:nowrap}
tbody tr:hover td{background:var(--surface-2)}
td.mono{font-size:12.5px}
td.num,.num{font-variant-numeric:tabular-nums}
.sub{display:block; font-size:11.5px; color:var(--ink-3); white-space:normal}
.wrap{white-space:normal}

/* The summary strip above a report, and the search row under it. */
.statrow{display:flex; gap:10px; flex-wrap:wrap}
.stat{background:var(--surface-2); border:1px solid var(--line); border-radius:9px;
      padding:9px 14px; min-width:92px}
.stat b{display:block; font-size:19px; font-variant-numeric:tabular-nums; color:var(--ink-1)}
.stat span{font-size:11.5px; color:var(--ink-3)}

/* A count drawn as well as written, so the shape of the field is visible
   without reading every row. */
.bar{display:block; height:9px; border-radius:999px; background:var(--brand);
     opacity:.72; min-width:3px}

.toolbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.toolbar input[type=search]{flex:1; min-width:260px}
.toolbar .inline{display:flex; align-items:center; gap:7px; font-size:12.5px;
                 color:var(--ink-2); white-space:nowrap}
.toolbar .inline input{width:auto; margin:0}

.checks{display:flex; flex-direction:column; gap:7px; margin-top:2px}
.checks label{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-1);
              font-weight:400; cursor:pointer}
.checks input{width:auto; margin:0}

.pill{display:inline-block; padding:1px 8px; border-radius:999px; font-size:11px;
  font-weight:600; border:1px solid transparent; white-space:nowrap}
.pill.ok{background:var(--ok-soft); color:var(--ok)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.bad{background:var(--bad-soft); color:var(--bad)}
.pill.mute{background:var(--surface-2); color:var(--ink-3); border-color:var(--line)}
.pill.brand{background:var(--brand-soft); color:var(--brand)}

.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{padding:3px 10px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); font-size:12px; cursor:pointer; color:var(--ink-2)}
.chip.on{background:var(--brand); border-color:var(--brand); color:var(--brand-ink); font-weight:600}

.note{border-left:3px solid var(--brand); background:var(--brand-soft);
  padding:10px 13px; border-radius:0 var(--radius) var(--radius) 0; font-size:13px}
.note.warn{border-color:var(--warn); background:var(--warn-soft)}
.note.bad{border-color:var(--bad); background:var(--bad-soft)}

#login{display:none; min-height:100vh; place-items:center; padding:28px 16px}
#login.on{display:grid}
#login .box{width:100%; max-width:376px}
#login .brandline{text-align:center; margin-bottom:22px}
#login .brandline b{font-size:26px; color:var(--brand); letter-spacing:-.02em}
#login .brandline span{display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px}

#imp{display:none; align-items:center; gap:10px; padding:8px 14px;
  background:var(--warn-soft); border-bottom:1px solid var(--warn);
  font-size:12.5px; color:var(--warn); font-weight:500}
#imp.on{display:flex}
#imp .btn{margin-left:auto; background:transparent; border-color:currentColor; color:inherit}

.mask{display:none; position:fixed; inset:0; background:rgba(6,12,20,.55);
  z-index:80; place-items:center; padding:20px; backdrop-filter:blur(2px)}
.mask.on{display:grid}
.modal{background:var(--surface); border:1px solid var(--line); border-radius:8px;
  width:100%; max-width:470px; box-shadow:0 20px 50px rgba(0,0,0,.3);
  max-height:90vh; display:flex; flex-direction:column}
.modal .mh{padding:14px 16px; border-bottom:1px solid var(--line-2); font-weight:600}
.modal .mb{padding:16px; overflow:auto}
.modal .mf{padding:12px 16px; border-top:1px solid var(--line-2); display:flex; gap:8px; justify-content:flex-end}
.keyout{font-family:'IBM Plex Mono',monospace; font-size:15px; padding:11px;
  background:var(--surface-2); border:1px dashed var(--line); border-radius:var(--radius);
  text-align:center; word-break:break-all; user-select:all}
.picklist{border:1px solid var(--line); border-radius:var(--radius); max-height:210px; overflow:auto}
.picklist label{display:flex; gap:9px; align-items:baseline; padding:7px 11px;
  border-bottom:1px solid var(--line-2); font-size:12.5px; cursor:pointer}
.picklist label:last-child{border-bottom:0}
.picklist input{width:auto; flex:none}
.linkish{background:none; border:0; padding:0; cursor:pointer; color:var(--brand);
  font:inherit; text-decoration:underline; text-underline-offset:2px}
.linkish.empty{color:var(--ink-3); font-style:italic}

/* The forced password change is its own screen, not a modal: while the flag is
   set the API refuses everything else, so there is nothing behind it to show. */
#passwordChange{display:none; min-height:100vh; place-items:center; padding:28px 16px}
#passwordChange.on{display:grid}
#passwordChange .box{width:100%; max-width:376px}
#passwordChange .brandline{text-align:center; margin-bottom:22px}
#passwordChange .brandline b{font-size:20px; color:var(--brand); letter-spacing:-.02em}
#passwordChange .brandline span{display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px}

/* An action that belongs with the value it changes, rather than as one more
   button in a crowded row. */
.linkish{background:none; border:0; padding:0; cursor:pointer; color:var(--brand);
  font:inherit; text-decoration:underline; text-underline-offset:2px}
.linkish.empty{color:var(--ink-3); font-style:italic}

#impersonating{display:none; align-items:center; gap:10px; padding:8px 14px;
  background:var(--warn-soft); border-bottom:1px solid var(--warn);
  font-size:12.5px; color:var(--warn); font-weight:500}
#impersonating.on{display:flex}
#impersonating .btn{margin-left:auto; background:transparent; border-color:currentColor; color:inherit}