/* fOPS (C266062) — dashboard styling. Modern, calm, professional. A full bespoke brand pass is a
   later dedicated effort; this is a clean, cohesive v2 shell. */
:root {
  --bg: #f4f6f8; --panel: #ffffff; --ink: #16202a; --muted: #687684; --line: #e6eaee;
  --brand: #0c7a55; --brand-ink: #ffffff; --brand-weak: #e6f4ee;
  --accent: #1f6feb;
  --ok: #15803d; --warn: #a16207; --hold: #b45309; --err: #c0392b;
  --radius: 12px; --shadow: 0 1px 2px rgba(16,32,42,.06), 0 8px 24px rgba(16,32,42,.06);
  --sidebar: 232px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0d1117; --panel:#161b22; --ink:#e6edf3; --muted:#9aa7b4; --line:#262d36;
    --brand:#2ea884; --brand-ink:#06120d; --brand-weak:#10261f; --accent:#4493f8;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35); }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.sub { margin-top:-.4rem; }
.err { color:var(--err); min-height:1.2em; margin:.5rem 0 0; font-size:.9rem; white-space:pre-line; }

/* Auth */
#authArea { min-height:100vh; display:grid; place-items:center; padding:1.5rem; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.auth { width:min(380px,100%); padding:2rem; }
.brandmark { font-weight:800; letter-spacing:.5px; color:var(--brand); font-size:1.4rem; }
h1 { font-size:1.4rem; margin:.6rem 0 .2rem; } h2 { font-size:1.15rem; margin:0; } h3 { font-size:1.02rem; margin:0 0 .6rem; }

/* Shell */
.shell { display:grid; grid-template-columns:var(--sidebar) 1fr; height:100vh; }
.sidebar { background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:1rem .75rem; }
.logo { font-weight:800; color:var(--brand); font-size:1.25rem; padding:.4rem .6rem 1rem; display:flex; flex-direction:column; }
.logo-sub { font-size:.7rem; color:var(--muted); font-weight:600; letter-spacing:.4px; text-transform:uppercase; }
nav { display:flex; flex-direction:column; gap:.15rem; flex:1; }
.navlink { display:flex; align-items:center; gap:.6rem; text-align:left; border:none; background:transparent;
  color:var(--ink); font:inherit; padding:.6rem .7rem; border-radius:9px; cursor:pointer; }
.navlink:hover { background:var(--bg); }
.navlink.active { background:var(--brand-weak); color:var(--brand); font-weight:600; }
.navlink .ic { width:1.2em; text-align:center; opacity:.9; }
.sidefoot { border-top:1px solid var(--line); padding-top:.75rem; }
.who { font-size:.85rem; color:var(--muted); padding:.2rem .6rem .5rem; }

.content { display:flex; flex-direction:column; min-width:0; }
.topbar { padding:.85rem 1.4rem; border-bottom:1px solid var(--line); background:var(--panel); }
.scroll { padding:1.25rem 1.4rem; overflow:auto; }
.view { max-width:1340px; }

/* Cards / home */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem; margin-bottom:1rem; }
.statcard { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:.8rem .9rem; box-shadow:var(--shadow); }
.statcard .n { font-size:1.5rem; font-weight:700; line-height:1.1; } .statcard .l { color:var(--muted); font-size:.8rem; margin-top:.15rem; }
.statcard.welcome { grid-column:span 2; } .statcard.welcome .n { font-size:1.05rem; }
.card { padding:1rem 1.1rem; margin:0 0 1rem; }

/* Forms */
form { display:flex; flex-direction:column; gap:.7rem; }
label { display:flex; flex-direction:column; gap:.3rem; font-size:.82rem; color:var(--muted); font-weight:500; }
input, select { font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line);
  border-radius:9px; padding:.6rem .7rem; transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-weak); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.8rem; align-items:end; }
.grid button { grid-column:1/-1; justify-self:start; }
.additem summary { cursor:pointer; font-weight:600; padding:.2rem 0; }
.additem[open] summary { margin-bottom:.8rem; }

.btn { font:inherit; cursor:pointer; border:1px solid var(--line); background:var(--panel); color:var(--ink);
  border-radius:9px; padding:.55rem .95rem; font-weight:500; transition:filter .15s, background .15s; }
.btn:hover { filter:brightness(.98); }
.btn.primary { background:var(--brand); color:var(--brand-ink); border-color:transparent; }
.btn.ghost { background:transparent; }
.btn.small { padding:.35rem .6rem; font-size:.82rem; }
.btn.danger { color:var(--err); border-color:color-mix(in srgb, var(--err) 40%, var(--line)); }
.btn.block { width:100%; }

/* Tables */
.tablewrap { overflow-x:auto; padding:.4rem; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th, td { text-align:left; padding:.6rem .6rem; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.4px; }
.pill { font-size:.72rem; padding:.12rem .55rem; border-radius:999px; border:1px solid var(--line); white-space:nowrap; }
.pill.on { color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%,var(--line)); }
.pill.off { color:var(--err); border-color:color-mix(in srgb,var(--err) 45%,var(--line)); }
.badge { background:var(--err); color:#fff; border-radius:999px; padding:0 .45rem; font-size:.7rem; margin-left:auto; }
.rowactions { display:flex; gap:.4rem; flex-wrap:wrap; }

/* Materials — dense table */
.toolbar { display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; flex-wrap:wrap; }
.toolbar .search { flex:1; min-width:180px; max-width:340px; }
.toolbar select, .toolbar input { padding:.45rem .6rem; }
.toolbar .inline { flex-direction:row; align-items:center; gap:.35rem; font-size:.82rem; }
.toolbar .counts { margin-left:auto; font-size:.85rem; white-space:nowrap; }
.btn.xs { padding:.2rem .45rem; font-size:.82rem; line-height:1; }
table.mattable { width:100%; border-collapse:collapse; font-size:.86rem; }
table.mattable th { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; padding:.35rem .4rem; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); }
table.mattable td { padding:.18rem .35rem; border-bottom:1px solid var(--line); vertical-align:middle; }
table.mattable input, table.mattable select { width:100%; padding:.32rem .45rem; font-size:.85rem; border-color:transparent; background:transparent; border-radius:6px; }
table.mattable input:hover, table.mattable select:hover { background:var(--bg); }
table.mattable input:focus, table.mattable select:focus { background:var(--bg); border-color:var(--brand); }
table.mattable tr.inactive { opacity:.45; }
table.mattable td.ver { color:var(--muted); font-size:.74rem; white-space:nowrap; text-align:center; }
table.mattable td.rowactions { white-space:nowrap; }
.matempty { color:var(--muted); font-style:italic; padding:.6rem; }

/* Findings / change cards */
.findings { margin:.4rem 0; font-size:.86rem; }
.finding { display:block; padding:.1rem 0; }
.finding.block { color:var(--err); } .finding.hold { color:var(--hold); } .finding.warn { color:var(--warn); }
.change { border:1px solid var(--line); border-radius:11px; padding:.7rem .8rem; margin:.5rem 0; background:var(--panel); }
.change.high { border-left:4px solid var(--err); }
.change .meta { font-size:.8rem; color:var(--muted); }

@media (max-width:760px) {
  .shell { grid-template-columns:1fr; height:auto; min-height:100vh; }
  .sidebar { flex-direction:row; flex-wrap:wrap; align-items:center; position:sticky; top:0; z-index:5; }
  .logo { padding:.3rem .6rem; } nav { flex-direction:row; flex-wrap:wrap; flex:1 1 100%; order:3; }
  .navlink { padding:.45rem .6rem; } .sidefoot { border:none; padding:0; margin-left:auto; display:flex; gap:.5rem; align-items:center; }
  .who { display:none; } .scroll { padding:1rem; }
}