/* ─────────────────────────────────────────────────────────────────────
   Clay styles — the app's look, layered over the base stylesheet.

   On by default: the <head> boot script puts `clay clay-mono` on <html>
   unless the viewer picked Classic in the style picker (ui-style.js).
   Dark/light mode is still body.light-mode, so clay has both.

   Everything is scoped under `html.clay body …` so it outranks the base
   sheet's `body.light-mode …` overrides without a pile of !important.
   Tokens first (the base sheet and most inline styles already read
   var(--card), var(--border) etc., so those follow automatically), then
   the shared components.
   ───────────────────────────────────────────────────────────────────── */

/* ── Mono · dark ─────────────────────────────────────────────────── */
html.clay-mono body:not(.light-mode){
  --bg:#1d1d20;--card:#27272b;--raised:#303035;--well:#19191c;
  --text:#f2f2f4;--muted:#a3a3ad;
  --accent:#ececf1;--on-accent:#18181b;--accent2:#4ade80;
  --danger:#f87171;--warn:#fbbf24;--purple:#a3a3ad;
  --green:#4ade80;--amber:#fbbf24;--red:#f87171;--input-bg:#19191c;
  --border:rgba(255,255,255,.06);--toast-bg:#303035;--modal-bg:#27272b;--popup-bg:#303035;
  --accent-glow:rgba(255,255,255,.25);--accent-tint:rgba(255,255,255,.07);
  --danger-soft:rgba(248,113,113,.14);--danger-ink:#fca5a5;
  --chart-tooltip-bg:rgba(39,39,43,.97);
  --clay-out:12px 14px 28px rgba(0,0,0,.6);
  --clay-in:inset 2px 2px 3px rgba(255,255,255,.08),inset -4px -5px 10px rgba(0,0,0,.35);
  --clay-sm:6px 8px 16px rgba(0,0,0,.55),inset 1px 1px 2px rgba(255,255,255,.09),inset -3px -3px 6px rgba(0,0,0,.3);
  --clay-xs:3px 4px 8px rgba(0,0,0,.5),inset 1px 1px 1px rgba(255,255,255,.09),inset -2px -2px 4px rgba(0,0,0,.28);
  --clay-sunk:inset 4px 4px 9px rgba(0,0,0,.55),inset -2px -2px 6px rgba(255,255,255,.05);
  --clay-btn:6px 8px 16px rgba(0,0,0,.55),inset 2px 2px 3px rgba(255,255,255,.9),inset -3px -4px 7px rgba(0,0,0,.22);
  --clay-press:inset 3px 3px 7px rgba(0,0,0,.35),inset -2px -2px 4px rgba(255,255,255,.4);
  --clay-art:none;
}

/* ── Mono · light ────────────────────────────────────────────────── */
html.clay-mono body.light-mode{
  --bg:#e7e7ea;--card:#f4f4f6;--raised:#ffffff;--well:#dedee2;
  --text:#18181b;--muted:#5d5d66;
  --accent:#27272b;--on-accent:#ffffff;--accent2:#15803d;
  --danger:#dc2626;--warn:#b45309;--purple:#5d5d66;
  --green:#15803d;--amber:#b45309;--red:#dc2626;--input-bg:#dedee2;
  --border:rgba(0,0,0,.07);--toast-bg:#ffffff;--modal-bg:#f4f4f6;--popup-bg:#ffffff;
  --accent-glow:rgba(0,0,0,.2);--accent-tint:rgba(0,0,0,.05);
  --danger-soft:#fde2e2;--danger-ink:#b91c1c;
  --clay-out:12px 14px 30px rgba(0,0,0,.13);
  --clay-in:inset 3px 3px 6px rgba(255,255,255,.95),inset -4px -5px 10px rgba(0,0,0,.06);
  --clay-sm:6px 8px 16px rgba(0,0,0,.12),inset 2px 2px 3px rgba(255,255,255,.95),inset -3px -3px 6px rgba(0,0,0,.06);
  --clay-xs:3px 4px 8px rgba(0,0,0,.11),inset 1px 1px 2px rgba(255,255,255,.95),inset -2px -2px 4px rgba(0,0,0,.06);
  --clay-sunk:inset 3px 3px 7px rgba(0,0,0,.12),inset -3px -3px 7px rgba(255,255,255,.9);
  --clay-btn:6px 8px 16px rgba(0,0,0,.25),inset 2px 2px 3px rgba(255,255,255,.25),inset -3px -4px 7px rgba(0,0,0,.45);
  --clay-press:inset 3px 3px 7px rgba(0,0,0,.5),inset -2px -2px 4px rgba(255,255,255,.15);
  --clay-art:none;
}

/* Shared by every clay variant */
html.clay body{
  --radius:24px;
  --shadow:var(--clay-out),var(--clay-in);
  font-family:"Nunito",ui-rounded,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg) !important;
  background-image:var(--clay-art) !important;
  background-attachment:fixed !important;
}

/* ── Shell: floating sidebar ─────────────────────────────────────── */
html.clay body .sidebar{
  background:var(--card) !important;border:none !important;
  border-radius:28px;box-shadow:var(--shadow);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
@media (min-width:861px){
  html.clay body .sidebar{top:14px;left:14px;height:calc(100vh - 28px);}
  html.clay body .content{margin-left:calc(var(--sidebar-w) + 28px);}
}
@media (max-width:860px){
  html.clay body .sidebar{top:10px;left:10px;height:calc(100vh - 20px);transform:translateX(calc(-100% - 24px));}
  html.clay body .sidebar.open{transform:translateX(0);}
}
html.clay body .userbox{
  background:var(--well) !important;border-color:transparent !important;
  border-radius:20px;box-shadow:var(--clay-sunk);
}
html.clay body .nav a{border-radius:14px;border-color:transparent;}
html.clay body .nav a:hover{background:var(--accent-tint);border-color:transparent;color:var(--text);}
html.clay body .nav a[data-active="1"]{
  background:var(--raised);border-color:transparent;color:var(--text);box-shadow:var(--clay-xs);
}
html.clay body .nav-divider{background:var(--border);}
html.clay body .nav-strip{background:var(--well) !important;border-color:transparent;border-radius:16px;box-shadow:var(--clay-sunk);}
html.clay body .nav-strip a{border-radius:11px !important;}
html.clay body .nav-strip a:hover{background:var(--accent-tint) !important;border-color:transparent !important;}
html.clay body .nav-strip a[data-active="1"]{
  background:var(--raised) !important;border-color:transparent !important;box-shadow:var(--clay-xs);
}

/* ── Surfaces ────────────────────────────────────────────────────── */
html.clay body .card{
  background:var(--card);border-color:transparent;
  border-radius:var(--radius);box-shadow:var(--shadow);
}
html.clay body .card:hover{border-color:transparent;}
/* A card inside a card sits on it, so it gets the smaller lift */
html.clay body .card .card{background:var(--raised);box-shadow:var(--clay-sm);border-radius:20px;}

/* Page-specific boxes that play the role of a card */
html.clay body .ec,
html.clay body .remit,
html.clay body .order-card,
html.clay body .feature-row,
html.clay body .vet-card,
html.clay body .sub-toggle-item{
  border-color:transparent;border-radius:20px;box-shadow:var(--clay-sm);
}
html.clay body .ec,
html.clay body .order-card,
html.clay body .feature-row,
html.clay body .vet-card,
html.clay body .sub-toggle-item{background:var(--raised);}
html.clay body .pl-card,
html.clay body .rp-card{border-radius:22px;box-shadow:var(--clay-sm);}
html.clay body .sub-toggles{background:var(--well);box-shadow:var(--clay-sunk);border-radius:16px;}

/* Inline-styled modals and popups */
html.clay body [style*="background:var(--modal-bg)"],
html.clay body [style*="background:var(--popup-bg)"]{
  border-color:transparent !important;border-radius:24px !important;
  box-shadow:var(--clay-out),var(--clay-in) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
html.clay body .btnPrimary{
  border-radius:16px;
  background-color:var(--accent);
  background-image:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 60%);
  color:var(--on-accent);box-shadow:var(--clay-btn);
}
html.clay body .btnGhost{
  border-radius:16px;border-color:transparent;
  background:var(--raised);color:var(--text);box-shadow:var(--clay-sm);
}
html.clay body .btnDanger{
  border-radius:16px;border-color:transparent;
  background:var(--danger-soft);color:var(--danger-ink);box-shadow:var(--clay-sm);
}
@media (hover:hover) and (pointer:fine){
  html.clay body .btnPrimary:hover{transform:translateY(-2px);box-shadow:var(--clay-btn);filter:brightness(1.05);}
  html.clay body .btnGhost:hover{background:var(--raised);border-color:transparent;transform:translateY(-2px);}
  html.clay body .btnDanger:hover{background:var(--danger-soft);transform:translateY(-2px);}
}
html.clay body .btnPrimary:active,
html.clay body .btnGhost:active,
html.clay body .btnDanger:active{transform:translateY(1px) scale(.98);box-shadow:var(--clay-press);}

/* Smaller row buttons inside tables keep a smaller lift */
html.clay body table td .btnPrimary,
html.clay body table td .btnGhost,
html.clay body table td .btnDanger{border-radius:11px;box-shadow:var(--clay-xs);}

html.clay body .iconBtn,
html.clay body .hamburger{
  border-radius:16px;border-color:transparent;
  background:var(--raised);box-shadow:var(--clay-sm);
}
html.clay body .iconBtn.flat{background:transparent;box-shadow:none;}
html.clay body .iconBtn:active,
html.clay body .hamburger:active{box-shadow:var(--clay-press);}
html.clay body .logoutBtn{
  border-radius:16px;border-color:transparent;
  background:var(--danger-soft);color:var(--danger-ink);box-shadow:var(--clay-sm);
}
html.clay body .mo-btn,
html.clay body .mo-tab,
html.clay body .remove-btn{border-color:transparent;border-radius:12px;box-shadow:var(--clay-xs);}
html.clay body .mo-btn,
html.clay body .mo-tab{background:var(--raised);}

/* ── Form fields: pressed into the clay ──────────────────────────── */
html.clay body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
html.clay body select,
html.clay body textarea{
  background:var(--well);border-color:transparent;
  border-radius:14px;box-shadow:var(--clay-sunk);
}
html.clay body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):focus,
html.clay body select:focus,
html.clay body textarea:focus{
  border-color:transparent;box-shadow:var(--clay-sunk),0 0 0 3px var(--accent-glow);
}
/* Fields that paint their own background (the WhatsApp-style chat boxes,
   bare inputs inside a styled wrapper) keep it flat — a clay well's light
   edge reads as a glow on their fixed dark colours. */
html.clay body input[style*="background:#"],
html.clay body input[style*="background:transparent"],
html.clay body input[style*="background:none"],
html.clay body textarea[style*="background:#"],
html.clay body textarea[style*="background:transparent"]{box-shadow:none !important;}
html.clay body input[type=checkbox],
html.clay body input[type=radio],
html.clay body input[type=range]{accent-color:var(--accent);}

/* ── Badges, alerts, tables ──────────────────────────────────────── */
html.clay body .badge{
  border-color:transparent;font-weight:700;
  box-shadow:inset 1px 1px 2px rgba(255,255,255,.3),inset -1px -2px 3px rgba(0,0,0,.12);
}
html.clay body.light-mode .b-green {background:#d3f4e4;color:#146c4b;}
html.clay body.light-mode .b-red   {background:#ffdfe3;color:#b4233a;}
html.clay body.light-mode .b-yellow{background:#ffeec9;color:#8a5a00;}
html.clay body.light-mode .b-teal  {background:#cdf3ef;color:#0f6b63;}
html.clay-mono body.light-mode .b-blue,
html.clay-mono body.light-mode .b-purple{background:#e4e4e8;color:#27272a;}
html.clay body .chip-solid{border-radius:10px;}

html.clay body .alert{border-color:transparent;border-radius:18px;box-shadow:var(--clay-sm);}

html.clay body th{border-bottom-color:var(--border);}
html.clay body td{border-bottom-color:var(--border);}
html.clay body tr:not(.urgent-row):hover td{background:var(--accent-tint);}

/* ── Floating bits ───────────────────────────────────────────────── */
/* Install / push prompts float as a clay bar instead of a full-width strip */
html.clay body #pwa-banner,
html.clay body #push-banner{
  left:12px !important;right:12px !important;bottom:12px !important;
  border-top:none !important;border-radius:22px;
  box-shadow:var(--clay-out),var(--clay-in) !important;
}
@media (min-width:861px){
  html.clay body #pwa-banner,
  html.clay body #push-banner{left:calc(var(--sidebar-w) + 40px) !important;}
}
html.clay body #verdict-toast{border-color:transparent;border-radius:20px;box-shadow:var(--clay-out),var(--clay-in);}
html.clay body .info-tip .tip-bubble{border-color:transparent;border-radius:16px;box-shadow:var(--clay-sm);}
html.clay body .skip-link{color:var(--on-accent);}
@media (max-width:720px){
  html.clay body .bulk-assign-sticky,
  html.clay body.light-mode .bulk-assign-sticky{background:var(--bg);}
}

/* ── Merchant portal shell ───────────────────────────────────────── */
html.clay body header.topbar{
  margin:10px 10px 0;top:10px;border-bottom:none;
  border-radius:22px;box-shadow:var(--shadow);
}
html.clay body #theme-toggle:not(.iconBtn),
html.clay body #style-toggle:not(.iconBtn),
html.clay body #notif-bell:not(.iconBtn){
  background:var(--raised) !important;border-color:transparent !important;
  border-radius:12px !important;box-shadow:var(--clay-xs);
}
@media (max-width:640px){
  html.clay body table.stack tr{
    background:var(--raised);border-color:transparent;
    border-radius:18px;box-shadow:var(--clay-sm);
  }
}

/* ── Style picker menu (ui-style.js) — styled in both looks ──────── */
.style-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:10001;
  min-width:220px;padding:6px;border-radius:14px;
  background:var(--popup-bg,var(--card));color:var(--text);
  border:1px solid var(--border);box-shadow:0 12px 32px rgba(0,0,0,.35);
  display:none;
}
.style-menu.open{display:block;}
.style-menu .sm-head{
  padding:8px 10px 6px;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.style-menu button{
  appearance:none;width:100%;display:flex;align-items:center;gap:10px;
  padding:9px 10px;border:none;border-radius:10px;background:transparent;
  color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:pointer;
}
.style-menu button:hover{background:var(--accent-tint);}
.style-menu button[aria-checked="true"]{font-weight:700;}
.style-menu .sm-swatch{
  width:22px;height:22px;border-radius:8px;flex-shrink:0;
  box-shadow:inset 1px 1px 2px rgba(255,255,255,.5),inset -2px -2px 4px rgba(0,0,0,.2);
}
.style-menu .sm-swatch.s-classic{background:linear-gradient(135deg,#0a0a0a 50%,#e5e5e5 50%);}
.style-menu .sm-swatch.s-clay-mono{background:linear-gradient(135deg,#f4f4f6,#9a9aa3);}
.style-menu .sm-tick{margin-left:auto;font-size:12px;opacity:0;}
.style-menu button[aria-checked="true"] .sm-tick{opacity:1;}
html.clay .style-menu{border-color:transparent;border-radius:20px;box-shadow:var(--clay-out),var(--clay-in);}