/* ═════════════════════════════════════════════════════════════════════════════
   Solvix administration chrome — ONE definition, every admin page.

   WHY THIS FILE EXISTS
   --------------------
   It is a VERBATIM extraction of the style block that lived inside
   admin/index.html, moved here the moment a SECOND administration page
   (admin/analytics/) needed the same palette, cards, tables, pills, filters and
   empty states. Copying it would have produced exactly the drift tokens.css was
   written to end: the rail spec once existed in four places in four idioms and
   the four had already disagreed on border, hover, active and idle colours.

   Nothing was rewritten in the move. Every rule below is the one the admin page
   was already using, in the order it already used it, so the extraction cannot
   have changed how that page renders.

   WHAT BELONGS HERE
   -----------------
   Chrome shared by administration pages: the palette lifted from the landing
   page, the card/stat/table/tab/pill/filter/empty/toast vocabulary. Page-specific
   rules stay on their page — the feedback report rows are in admin/index.html
   and the analytics-specific meters and tick grids are in admin/analytics/.

   Light only, deliberately, like every Solvix app surface. tokens.css explains
   why `color-scheme` is stated rather than left to the OS.
   ═════════════════════════════════════════════════════════════════════════════ */

  /* Palette lifted from the landing page rather than invented, so the two
     pages are the same product. Light only, like every app surface. */
  :root{
    color-scheme: light;
    --ground:#F4F6F6; --surface:#FFFFFF; --surface-2:#EAEEED;
    --ink:#141D1C; --ink-2:#3E4C4A; --muted:#6B7B79;
    --rule:#DCE3E1; --rule-soft:#E9EEED;
    --accent:#0F766E; --accent-ink:#FFFFFF; --accent-soft:#E0EFED;
    --up:#2F7D45; --down:#B03030; --warn:#8A6100; --warn-soft:#FBF1DC;
    --shadow:0 1px 2px rgba(20,29,28,.06), 0 10px 28px -20px rgba(20,29,28,.34);
    --app-gov:#0F766E; --app-uat:#1D4ED8; --app-del:#B45309; --app-shell:#6B7B79;
  }
  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--ground); color:var(--ink);
    font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;}
  .wrap{max-width:1180px; margin:0 auto; padding:26px 26px 60px;}
  /* Below 900px nav.js swaps the rail for a floating "Solvix" launcher pinned
     at top:10px left:10px (nav.css:69-72), which lands on top of the heading.
     The three apps each have their own header bar to absorb it; this page does
     not, so it makes the room itself. */
  @media (max-width:899px){ .wrap{padding-top:56px;} }

  h1{font-size:21px; font-weight:600; letter-spacing:-.01em; margin:0;}
  h2{font-size:15px; font-weight:600; margin:0 0 3px;}
  .sub{color:var(--muted); font-size:12.5px; margin:3px 0 0;}

  header.page{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:20px;}
  header.page .who{margin-left:auto; text-align:right; font-size:12px; color:var(--muted);}
  header.page .who b{display:block; color:var(--ink-2); font-size:13px; font-weight:600;}

  /* tabs */
  .tabs{display:flex; gap:2px; border-bottom:1px solid var(--rule); margin-bottom:22px;}
  .tab{
    appearance:none; background:none; border:0; border-bottom:2px solid transparent;
    padding:9px 15px; font:inherit; font-weight:500; color:var(--muted); cursor:pointer;
    margin-bottom:-1px;
  }
  .tab:hover{color:var(--ink);}
  .tab[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent);}
  .tab:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}

  .card{background:var(--surface); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow);}
  .card + .card{margin-top:16px;}
  .card .hd{padding:15px 18px; border-bottom:1px solid var(--rule-soft);}
  .card .bd{padding:18px;}

  /* stat strip */
  .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:12px; margin-bottom:18px;}
  .stat{background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:13px 15px;}
  .stat .n{font-size:23px; font-weight:600; letter-spacing:-.02em; line-height:1.1;}
  .stat .k{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.09em; margin-top:3px;}
  .stat.bad .n{color:var(--down);}

  /* filters */
  .filters{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:14px;}
  input[type="text"], input[type="email"], select{
    font:inherit; padding:7px 10px; border:1px solid var(--rule); border-radius:8px;
    background:var(--surface); color:var(--ink); min-width:0;
  }
  input:focus-visible, select:focus-visible{outline:2px solid var(--accent); outline-offset:-1px;}
  .filters input[type="text"]{flex:1 1 230px;}
  label.chk{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); font-size:13px; cursor:pointer;}

  button.btn{
    font:inherit; font-weight:500; padding:7px 13px; border-radius:8px; cursor:pointer;
    border:1px solid var(--rule); background:var(--surface); color:var(--ink-2);
  }
  button.btn:hover{border-color:var(--muted); color:var(--ink);}
  button.btn:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
  button.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
  button.btn.primary:hover{background:#0c625b;}
  button.btn.danger{color:var(--down); border-color:#E7C9C9;}
  button.btn.danger:hover{background:#FBEFEF; border-color:var(--down);}
  button.btn:disabled{opacity:.5; cursor:not-allowed;}
  button.btn.sm{padding:4px 9px; font-size:12.5px;}

  /* report rows */
  .rows{display:flex; flex-direction:column; gap:10px;}
  .rep{background:var(--surface); border:1px solid var(--rule); border-radius:11px; overflow:hidden;}
  .rep > summary{
    list-style:none; cursor:pointer; padding:13px 16px; display:grid;
    grid-template-columns:auto 1fr auto; gap:12px; align-items:start;
  }
  .rep > summary::-webkit-details-marker{display:none;}
  .rep > summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
  .rep[open] > summary{border-bottom:1px solid var(--rule-soft);}
  .rep .line1{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .rep .msg{margin:5px 0 0; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .rep[open] .msg{display:none;}
  .rep .when{color:var(--muted); font-size:12px; white-space:nowrap;}
  .rep .detail{padding:16px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:18px;}
  @media (max-width:820px){ .rep .detail{grid-template-columns:1fr;} }
  .rep .full{white-space:pre-wrap; margin:0 0 14px; background:var(--surface-2); border-radius:8px; padding:12px 14px;}
  .meta{width:100%; border-collapse:collapse; font-size:12.5px;}
  .meta td{padding:4px 0; vertical-align:top;}
  .meta td:first-child{color:var(--muted); width:104px; padding-right:10px;}
  .meta a{color:var(--accent);}
  .shot{display:block; width:100%; border:1px solid var(--rule); border-radius:8px; background:var(--surface-2);}
  .actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}

  .pill{
    display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px;
    font-weight:600; letter-spacing:.02em; white-space:nowrap;
  }
  .pill.app{color:#fff;}
  .pill.cat{background:var(--surface-2); color:var(--ink-2);}
  .pill.ok{background:#E4F1E7; color:var(--up);}
  .pill.no{background:#FBEFEF; color:var(--down);}
  .pill.root{background:var(--accent-soft); color:var(--accent);}

  .note{background:var(--warn-soft); border:1px solid #EBD9AE; color:var(--warn);
        border-radius:9px; padding:11px 14px; font-size:13px; margin-bottom:16px;}
  .empty{text-align:center; color:var(--muted); padding:44px 20px;}
  .empty b{display:block; color:var(--ink-2); font-size:15px; margin-bottom:5px;}

  table.users{width:100%; border-collapse:collapse;}
  table.users th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.09em;
    color:var(--muted); font-weight:600; padding:0 10px 8px 0; border-bottom:1px solid var(--rule);
  }
  table.users td{padding:10px 10px 10px 0; border-bottom:1px solid var(--rule-soft); vertical-align:middle;}
  table.users tr:last-child td{border-bottom:0;}
  .grant{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-top:4px;}
  .grant input{flex:1 1 260px;}

  .toast{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
    background:var(--ink); color:#fff; padding:10px 16px; border-radius:9px;
    font-size:13px; box-shadow:var(--shadow); z-index:1200; max-width:90vw;
  }
  .toast.bad{background:var(--down);}