/* ============================================================================
   Windmill ID Admin — shared shell
   ============================================================================
   The SKU Manager was built as a polished custom screen while Customer Orders,
   User Management and Currency stayed raw Bootstrap. That inconsistency is the
   thing Paul reacted to, so the SKU Manager's design system is lifted out here
   and applied to every screen.

   Accessibility notes (measured, not assumed):
     * WHITE ON THE BRAND GREEN IS 1.94:1 — far below the 4.5:1 WCAG AA needs.
       Bootstrap's .btn-primary did exactly that. Primary buttons therefore use
       DARK INK on green (7.16:1), which is what the SKU Manager already did.
     * --faint (#9aa48c) is 2.60:1 and is used ONLY for decorative text, never
       for information; --muted (#6f7a63, 4.53:1) is the lightest text colour.
     * Every interactive control has a visible :focus-visible ring; the ring is
       never removed without a replacement.
   ========================================================================== */

:root{
  --brand:#84c02a; --brand-d:#6ea31f; --brand-dd:#557f16;
  --ground:#ffffff; --surface:#f5f8f0; --surface-2:#eef3e5; --panel:#ffffff;
  --border:#e4ebda; --border-2:#d4dec4;
  --ink:#1e2a17; --ink-2:#3c4a30; --muted:#6f7a63; --faint:#9aa48c;
  --live-bg:#e8f4d6; --live-fg:#4f7a16; --live-dot:#84c02a;
  --hidden-bg:#eceef0; --hidden-fg:#7c8794; --hidden-dot:#aab2bd;
  --del-bg:#fbe4e6; --del-fg:#b23a4b; --del-dot:#d1495b;
  --warn-bg:#fff5e0; --warn:#8a6100; --info:#2c6299;
  --shadow:0 1px 2px rgba(30,42,23,.05),0 8px 24px rgba(30,42,23,.07);
  --shadow-lg:0 12px 40px rgba(30,42,23,.18);
  --r:10px; --r-lg:14px;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ui:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---- base ---------------------------------------------------------------- */
body{font-family:var(--ui);color:var(--ink);background:var(--surface);
     -webkit-font-smoothing:antialiased}
.adm{font-family:var(--ui);color:var(--ink);font-size:14px;line-height:1.5}
.adm *{box-sizing:border-box}

/* Skip link: first tab stop on every page. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);
  color:#fff;padding:10px 16px;border-radius:0 0 var(--r) 0;font-weight:700;font-size:13px}
.skip-link:focus{left:0}

/* One visible focus treatment everywhere. */
.adm a:focus-visible,.adm button:focus-visible,.adm input:focus-visible,
.adm select:focus-visible,.adm textarea:focus-visible,
.navbar a:focus-visible{
  outline:2.5px solid var(--brand-dd);outline-offset:2px;border-radius:6px}

/* ---- page header --------------------------------------------------------- */
.adm .head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin:0 0 18px;flex-wrap:wrap}
.adm .head h1{font-size:27px;font-weight:800;letter-spacing:-.4px;margin:0;line-height:1.05}
.adm .head p{margin:6px 0 0;color:var(--muted);font-size:13.5px;max-width:66ch}
.adm .head .actions{display:flex;gap:9px;flex-wrap:wrap}

/* ---- buttons ------------------------------------------------------------- */
.adm .btn,.adm a.btn{border:1px solid var(--border-2);background:var(--ground);
  color:var(--ink-2);border-radius:var(--r);padding:0 14px;height:38px;font-weight:600;
  font-size:13px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  text-decoration:none;transition:border-color .12s,color .12s,background .12s;cursor:pointer}
.adm .btn:hover{border-color:var(--brand);color:var(--brand-dd)}
/* DARK ink on green — white would be 1.94:1. */
.adm .btn.primary{background:var(--brand);border-color:var(--brand);color:#173300}
.adm .btn.primary:hover{background:var(--brand-d);border-color:var(--brand-d);color:#173300}
.adm .btn.danger{color:var(--del-fg);border-color:#e9c4ca}
.adm .btn.danger:hover{background:var(--del-bg);border-color:var(--del-fg);color:var(--del-fg)}
.adm .btn.sm{height:31px;padding:0 11px;font-size:12.5px;border-radius:8px}
.adm .btn:disabled,.adm .btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.adm .btn:disabled:hover{border-color:var(--border-2);color:var(--ink-2)}

/* ---- panels + tables ----------------------------------------------------- */
.adm .panel{background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px}
.adm .panel > h2{font-size:14px;font-weight:800;margin:0;padding:13px 16px;
  border-bottom:1px solid var(--border);background:var(--surface)}
/* Wide tables scroll INSIDE the panel — the page never scrolls sideways. */
.adm .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* U10 (Steve, 11 Oct 2026): EVERY Admin table, on every Admin page (.adm or not), sits in a .tablewrap or Bootstrap's
   .table-responsive and scrolls sideways inside it, as the SKU Manager's .results does — never the page, and never
   clipped by a panel's overflow:hidden. A flex or grid item's min-width defaults to its content's width, so an ancestor
   of a wide table would grow past its panel and push the page sideways: every element holding a wrapper gets
   min-width:0 (inside :where() — zero specificity, so a page's own min-width still wins). */
#main .tablewrap,#main .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
:where(#main *:has(.tablewrap,.table-responsive)){min-width:0}
.adm table.data{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.adm table.data th{text-align:left;font-size:11px;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted);font-weight:700;padding:10px 16px;
  border-bottom:1px solid var(--border);background:var(--surface);white-space:nowrap}
.adm table.data td{padding:11px 16px;border-bottom:1px solid var(--surface-2);
  vertical-align:top}
.adm table.data tbody tr:last-child td{border-bottom:none}
.adm table.data tbody tr:hover{background:var(--surface)}
.adm table.data a{color:var(--brand-dd);font-weight:600;text-decoration:none}
.adm table.data a:hover{text-decoration:underline}
.adm .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.adm .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.adm .sub{color:var(--muted);font-size:12.5px}

/* ---- state chips --------------------------------------------------------- */
.adm .chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;
  font-weight:700;padding:3px 9px;border-radius:20px;text-transform:capitalize}
.adm .chip .d{width:6px;height:6px;border-radius:50%}
.adm .chip.live{background:var(--live-bg);color:var(--live-fg)}
.adm .chip.live .d{background:var(--live-dot)}
.adm .chip.hidden{background:var(--hidden-bg);color:var(--hidden-fg)}
.adm .chip.hidden .d{background:var(--hidden-dot)}
.adm .chip.deleted{background:var(--del-bg);color:var(--del-fg)}
.adm .chip.deleted .d{background:var(--del-dot)}

/* ---- the four universal states ------------------------------------------- */
.adm .state{padding:52px 22px;text-align:center;color:var(--muted)}
.adm .state h3{color:var(--ink-2);margin:12px 0 4px;font-size:16px;font-weight:700}
.adm .state p{margin:0;font-size:13.5px}
.adm .state .icon{color:var(--faint)}
.adm .state .actions{margin-top:14px;display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.adm .state.err{color:var(--del-fg)}
.adm .state.err h3{color:var(--del-fg)}
.adm .loading{padding:52px 22px;text-align:center;color:var(--muted);font-size:13.5px}
.adm .spinner{display:inline-block;width:17px;height:17px;vertical-align:-3px;
  margin-right:8px;border:2.5px solid var(--border-2);border-top-color:var(--brand-dd);
  border-radius:50%;animation:adm-spin .7s linear infinite}
@keyframes adm-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .adm .spinner{animation-duration:2.4s}
  .adm *{transition-duration:.01ms !important}
}

/* ---- inline messages ----------------------------------------------------- */
.adm .note{border-radius:var(--r);padding:11px 14px;font-size:13px;margin-bottom:14px;
  display:flex;gap:9px;align-items:flex-start}
.adm .note.ok{background:var(--live-bg);border:1px solid #cfe3ac;color:#38600f}
.adm .note.warn{background:var(--warn-bg);border:1px solid #f0dca8;color:var(--warn)}
.adm .note.err{background:var(--del-bg);border:1px solid #e9c4ca;color:var(--del-fg)}
.adm .note.info{background:#eef4fb;border:1px solid #cddff0;color:var(--info)}

/* ---- forms --------------------------------------------------------------- */
.adm .field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.adm .field > label{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted)}
.adm .field input,.adm .field select,.adm .field textarea{
  border:1.5px solid var(--border-2);background:var(--ground);border-radius:8px;
  padding:8px 11px;font-family:var(--ui);font-size:13px;color:var(--ink);width:100%}
.adm .field input:focus,.adm .field select:focus,.adm .field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(132,192,42,.22)}
.adm .field .hint{font-size:11.5px;color:var(--muted)}

/* ---- pagination ---------------------------------------------------------- */
.adm .pager{display:flex;gap:5px;padding:13px 16px;align-items:center;flex-wrap:wrap;
  border-top:1px solid var(--border);background:var(--surface)}
.adm .pager a,.adm .pager span.pg{border:1px solid var(--border-2);background:var(--ground);
  border-radius:8px;min-width:33px;height:33px;padding:0 10px;font-size:13px;font-weight:600;
  color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none}
.adm .pager a:hover{border-color:var(--brand);color:var(--brand-dd)}
.adm .pager .cur{background:var(--brand);border-color:var(--brand);color:#173300}
.adm .pager .disabled{opacity:.45;pointer-events:none}
.adm .pager .count{margin-right:auto;color:var(--muted);font-size:12.5px}

/* ---- home cards ---------------------------------------------------------- */
.adm .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px}
.adm .card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow);
  transition:border-color .14s,box-shadow .14s}
.adm .card:hover{border-color:var(--border-2);box-shadow:var(--shadow-lg)}
.adm .card h2{font-size:15.5px;font-weight:800;margin:0}
.adm .card p{margin:0;color:var(--muted);font-size:13px;flex:1}
.adm .card .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}

/* ---- navbar: brand green, but readable ----------------------------------- */
.navbar{background-color:var(--brand) !important}
.navbar .nav-link,.navbar .navbar-brand{color:#173300 !important;font-weight:600}
.navbar .nav-link:hover{color:#000 !important}

/* Laminas form partial (Currency, Login, classic product edit) — give its
   Bootstrap-shaped controls the same look as the shell's own fields. */
.adm-form .form-group{margin-bottom:13px}
.adm-form .control-label{display:block;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:4px}
.adm-form .form-control{border:1.5px solid var(--border-2);background:var(--ground);
  border-radius:8px;padding:8px 11px;font-family:var(--ui);font-size:13px;
  color:var(--ink);width:100%;max-width:420px}
.adm-form .form-control:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(132,192,42,.22)}
.adm-form .has-error .form-control{border-color:var(--del-fg)}

/* Screen-reader-only text (table captions that need no visual weight). */
.visually-hidden{position:absolute !important;width:1px;height:1px;margin:-1px;
  padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:820px){
  .adm .head{align-items:flex-start;flex-direction:column}
  .adm .head h1{font-size:23px}
  .adm table.data th,.adm table.data td{padding:9px 12px}
}

/* The header row (USER-ID top right) is the shared shell's since WP-D1 F1: see shell/shell.css. */

/* WP-D1 F4: a change log's "Showing 6 of N · Show [6|25|100|all]" — the look of the login history's Per page. */
.row-limit{display:flex;gap:6px 12px;align-items:center;flex-wrap:wrap;margin:6px 0 10px;font-size:12.5px;color:var(--muted)}
.row-limit__pick{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--muted);margin:0}
.row-limit__pick select{border:1px solid var(--border-2,#cfd6c4);border-radius:8px;padding:0 8px;font-size:12.5px;height:32px;background:#fff;color:var(--ink)}

/* Night B1 C3 (Paul, 5 Oct): every admin page is as wide as /admin/ — the <main class="container"> the layout gives,
   with no narrower box of its own. The settings pages and Site images used a nested .container with a max-width. */
.adm-page{width:100%}