/* ===========================================================================
 * Clay — signed-in app shell.  v2: three-tier hierarchy.
 *
 * v1 gave .nv-card, .nv-table, .nv-btn, .svc-row and every pill the SAME 3px ink
 * outline + 5px hard shadow. On a dashboard that reads as noise: a stat tile
 * shouted as loudly as the Place Order button, and a 40-row table carried the
 * same weight as the balance card.
 *
 * Tiers, so weight means importance:
 *   TIER 1  primary action, balance/hero  -> ink outline + hard offset shadow
 *   TIER 2  content cards, tables, menus  -> hairline + soft shadow
 *   TIER 3  stat tiles, list rows, chrome -> no card; dividers and space only
 *
 * Loaded after nova/lumen so it wins on equal specificity. Accent comes from
 * settings.panel_accent via pp_accent_css() — never hardcoded here.
 * ======================================================================== */

:root, .nv {
  --clay-ink:     #2B3445;
  --clay-line:    rgba(43,52,69,.12);
  --clay-line-2:  rgba(43,52,69,.07);
  --clay-tint:    rgba(43,52,69,.025);
  --clay-soft:    0 1px 3px rgba(43,52,69,.05), 0 6px 18px rgba(43,52,69,.05);
  --clay-lift:    0 6px 14px rgba(43,52,69,.09), 0 16px 38px rgba(43,52,69,.07);
  --clay-hard:    4px 4px 0 var(--clay-ink);
  --clay-hard-sm: 3px 3px 0 var(--clay-ink);
  --clay-ease:    cubic-bezier(.22,1,.36,1);

  --nv-bg:        #FDF6EC;
  --nv-surface:   #FFFFFF;
  --nv-surface-2: #FFF9F0;
  --nv-text:      #1B2333;
  --nv-text-soft: #45506A;
  --nv-muted:     #5A6580;
  --nv-border:    var(--clay-line);
  --nv-border-2:  var(--clay-line);

  --nv-ok:   #16A34A; --nv-okbg:   rgba(34,197,94,.14);
  --nv-warn: #F59E0B; --nv-warnbg: rgba(245,158,11,.16);
  --nv-bad:  #EF4444; --nv-badbg:  rgba(239,68,68,.13);
  --nv-info: #3B82F6;

  --clay-r:    16px;
  --clay-r-sm: 12px;

  /* the page templates use these ~130 times; redefining them re-skins those
     inline rules without touching a single template */
  --nv-sh:        var(--clay-soft);
  --nv-sh-lg:     var(--clay-lift);
  --neu-rise:     var(--clay-soft);
  --neu-rise-sm:  var(--clay-soft);
  --neu-inset-sm: inset 0 1px 0 rgba(255,255,255,.6);
  --neu-inset:    inset 0 1px 0 rgba(255,255,255,.6);
  --neu-grad:     linear-gradient(180deg, var(--nv-accent-2), var(--nv-accent));
  --lm-grad:      var(--neu-grad);
  --neu-sd:       rgba(43,52,69,.14);
  --glass-hi:     transparent;
  --glass-blur:   none;
}

/* ---------------------------------------------------------------- type ---- */
.nv, .nv input, .nv select, .nv textarea, .nv button {
  font-family: 'Nunito','Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.nv h1, .nv h2, .nv h3, .nv h4, .nv .nv-brand, .nv .nv-card-h h3, .nv .nv-stat .v {
  font-family: 'Fredoka','Nunito',system-ui,sans-serif;
  font-weight: 600;
  letter-spacing: -.012em;
}
.nv h1 { font-size: clamp(22px,2.6vw,28px); }
.nv .nv-card-h h3 { font-size: 16px; }
.nv .nv-card-h .sub { font-size: 13px; color: var(--nv-muted); }
.nv { background: var(--nv-bg); color: var(--nv-text); -webkit-font-smoothing: antialiased; }

/* ===================== TIER 3 — chrome, no cards ========================= */

.nv .nv-sidebar {
  background: var(--nv-surface);
  border-right: 1px solid var(--clay-line);
  box-shadow: none;
}
.nv .nv-topbar {
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--clay-line);
}
.nv .nv-bottomnav { background: var(--nv-surface); border-top: 1px solid var(--clay-line); }

.nv .nv-nav a, .nv .nv-nav .nv-sub-t {
  border-radius: var(--clay-r-sm);
  font-weight: 700;
  border: 1px solid transparent;
  transition: background .16s var(--clay-ease), color .16s;
}
.nv .nv-nav a:hover, .nv .nv-nav .nv-sub-t:hover { background: var(--clay-tint); }
.nv .nv-nav a.active, .nv .nv-nav a.on {
  background: var(--nv-accent) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px -5px color-mix(in srgb, var(--nv-accent) 60%, transparent);
}
.nv .nv-nav a.active span, .nv .nv-nav a.on span { color: #fff !important; }
.nv .nv-nav a.active i, .nv .nv-nav a.on i { color: #fff !important; opacity: 1; }
.nv .nv-nav a.active i.neu-nav-ic, .nv .nv-nav a.on i.neu-nav-ic {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  box-shadow: none !important;
}
/* the colourful icon tiles stay — they carry the personality now that the
   cards have gone quiet */
.nv .nv-nav a i.neu-nav-ic {
  border: 0;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(43,52,69,.14);
}
.nv .nv-nav a i.neu-nav-ic::after { display: none; }

/* --- stat tiles: numbers, not boxes -------------------------------------- */
.nv .nv-stat {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 4px 16px;
  position: relative;
}
.nv .nv-stat + .nv-stat::before {
  content: ""; position: absolute; left: 0; top: 16%; bottom: 16%; width: 1px;
  background: var(--clay-line);
}
.nv .nv-stat .v {
  font-size: clamp(20px,2.4vw,27px);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.nv .nv-stat .l {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--nv-muted); font-weight: 700;
}

/* --- list rows: a row is not a card -------------------------------------- */
.nv .svc-row {
  background: var(--nv-surface);
  border: 0;
  border-bottom: 1px solid var(--clay-line-2);
  border-radius: 0;
  box-shadow: none;
  position: relative;
  transition: background .16s var(--clay-ease);
}
.nv .svc-row:hover { background: var(--clay-tint); transform: none; }
.nv .svc-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--nv-accent); opacity: 0; transition: opacity .16s;
}
.nv .svc-row:hover::before { opacity: 1; }
.nv .svc-row:last-child { border-bottom: 0; }

/* --- alerts / tabs / hints ------------------------------------------------ */
.nv .nv-alert {
  border: 0;
  border-left: 3px solid var(--nv-accent);
  border-radius: var(--clay-r-sm);
  box-shadow: none;
  background: color-mix(in srgb, var(--nv-accent) 7%, var(--nv-surface));
}
.nv .nv-tab { border: 0; box-shadow: none; border-radius: var(--clay-r-sm); }
.nv .nv-hint { color: var(--nv-muted); font-size: 12.5px; }

/* ==================== TIER 2 — hairline + soft shadow ==================== */

.nv .nv-card, .nv .nv-auth-card, .nv .lm-sum-card, .nv .nv-dd-menu,
.nv .nv-sub-m, .nv .lm-profile, .nv .lm-code, .nv .lm-ex {
  background: var(--nv-surface);
  border: 1px solid var(--clay-line);
  border-radius: var(--clay-r);
  box-shadow: var(--clay-soft);
  backdrop-filter: none;
}
.nv .nv-card .nv-card { box-shadow: none; border-color: var(--clay-line-2); }
.nv .nv-card-h { border-bottom: 1px solid var(--clay-line-2); }

.nv .nv-table {
  background: var(--nv-surface);
  border: 1px solid var(--clay-line);
  border-radius: var(--clay-r);
  box-shadow: var(--clay-soft);
  overflow: hidden;
}
.nv .nv-table th {
  background: var(--nv-surface-2);
  color: var(--nv-text-soft);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--clay-line);
}
.nv .nv-table td { border-bottom: 1px solid var(--clay-line-2); font-variant-numeric: tabular-nums; }
.nv .nv-table tr:last-child td { border-bottom: 0; }
.nv .nv-table tbody tr { transition: background .14s; }
.nv .nv-table tbody tr:hover { background: var(--clay-tint); }

/* --- inputs: hairline, accent focus ring --------------------------------- */
.nv .nv-input, .nv .nv-select, .nv .nv-textarea, .nv .form-control,
.nv input:not([type=checkbox]):not([type=radio]), .nv select, .nv textarea {
  background: var(--nv-surface);
  color: var(--nv-text);
  border: 1.5px solid var(--clay-line);
  border-radius: var(--clay-r-sm);
  box-shadow: none;
  font-weight: 600;
  transition: border-color .16s, box-shadow .16s;
}
.nv .nv-input:focus, .nv .nv-select:focus, .nv .nv-textarea:focus,
.nv input:focus, .nv select:focus, .nv textarea:focus {
  outline: none;
  border-color: var(--nv-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nv-accent) 18%, transparent);
}
.nv .nv-label { font-size: 12.5px; font-weight: 800; color: var(--nv-text-soft); }

/* --- badges / pills: quiet, tinted --------------------------------------- */
.nv .nv-pill, .nv .nv-chip, .nv .nv-badge {
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11.5px;
  box-shadow: none;
  letter-spacing: .02em;
}
.nv .nv-badge.b-ok   { background: var(--nv-okbg);   color: #12703C; border-color: rgba(22,163,74,.28); }
.nv .nv-badge.b-warn { background: var(--nv-warnbg); color: #8A5A00; border-color: rgba(245,158,11,.30); }
.nv .nv-badge.b-bad  { background: var(--nv-badbg);  color: #B01C1C; border-color: rgba(239,68,68,.28); }
.nv .nv-badge.b-info,
.nv .nv-badge.b-run  { background: rgba(59,130,246,.13); color: #1D4ED8; border-color: rgba(59,130,246,.28); }

/* ================= TIER 1 — the primary action only ====================== */

.nv .nv-btn, .nv a.nv-btn, .nv .btn {
  background: var(--nv-accent);
  color: #fff;
  /* BTNCLEAN: geometry + elevation come from clay-system.css */
  font-weight: 800;
  transition: transform .15s var(--clay-ease), box-shadow .15s var(--clay-ease), filter .15s;
}
.nv .nv-btn:hover, .nv a.nv-btn:hover, .nv .btn:hover {
  filter: saturate(1.04);
}
.nv .nv-btn:active, .nv a.nv-btn:active, .nv .btn:active {
  transform: translateY(1px);
}
/* secondary actions step right down so the primary reads first */
.nv .nv-btn.ghost, .nv a.nv-btn.ghost, .nv .nv-btn.soft, .nv a.nv-btn.soft,
.nv .nv-icon-btn, .nv .nv-keybtn {
  background: var(--nv-surface);
  color: var(--nv-text);
  border: 1px solid var(--clay-line);
  box-shadow: none;
}
.nv .nv-btn.ghost:hover, .nv a.nv-btn.ghost:hover,
.nv .nv-icon-btn:hover, .nv .nv-keybtn:hover {
  background: var(--clay-tint);
  border-color: color-mix(in srgb, var(--nv-accent) 34%, var(--clay-line));
  transform: translateY(-1px);
  box-shadow: none;
}
.nv .nv-btn.danger, .nv a.nv-btn.danger { background: var(--nv-bad); color: #fff; }
.nv .nv-btn.sm { border-radius: 10px; }
.nv .nv-btn.sm.ghost { box-shadow: none; }

/* ============================== DARK ==================================== */
.nv-dark .nv, .nv-dark {
  --clay-ink:    #0B0F1A;
  --clay-line:   rgba(255,255,255,.13);
  --clay-line-2: rgba(255,255,255,.08);
  --clay-tint:   rgba(255,255,255,.04);
  --clay-soft:   0 1px 3px rgba(0,0,0,.34), 0 6px 18px rgba(0,0,0,.28);
  --clay-lift:   0 6px 14px rgba(0,0,0,.44), 0 16px 38px rgba(0,0,0,.34);
  --nv-bg:        #171B27;
  --nv-surface:   #222739;
  --nv-surface-2: #2B3145;
  --nv-text:      #F1F3F9;
  --nv-text-soft: #C3C9D8;
  --nv-muted:     #9AA6BE;
}
.nv-dark .nv .nv-topbar { background: rgba(34,39,57,.86); }
.nv-dark .nv .nv-btn, .nv-dark .nv a.nv-btn { border-color: #6B7A99; }
.nv-dark .nv .nv-btn.ghost, .nv-dark .nv .nv-icon-btn, .nv-dark .nv .nv-keybtn {
  background: var(--nv-surface-2); border-color: rgba(255,255,255,.14);
}
.nv-dark .nv .nv-table th { background: var(--nv-surface-2); color: var(--nv-text-soft); }
.nv-dark .nv .nv-nav a i.neu-nav-ic { box-shadow: 0 2px 6px rgba(0,0,0,.4); }

/* ============================ RESPONSIVE ================================= */
@media (max-width: 640px) {
  :root, .nv { --clay-r: 14px; --clay-r-sm: 10px; --clay-hard-sm: 2px 2px 0 var(--clay-ink); }
  .nv .nv-stat { padding: 10px 12px; }
  .nv .nv-stat + .nv-stat::before { display: none; }
  .nv .nv-card { border-radius: 14px; }
  /* submenu icons keep their tile, one size down */
  .nv .nv-nav .nv-sub-m > a i.neu-nav-ic { width: 24px; height: 24px; font-size: 10.5px; }
}
.nv .nv-nav .nv-sub-m > a i.neu-nav-ic { width: 26px; height: 26px; font-size: 11px; border-radius: 8px; }
.nv .nv-nav .nv-sub-m > a { padding-left: 16px !important; }
.nv .nv-sub-m > a i:not(.neu-nav-ic) { font-size: 7px !important; opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .nv .nv-btn, .nv a.nv-btn, .nv .svc-row, .nv .nv-table tbody tr, .nv .nv-nav a { transition: none !important; }
  .nv .nv-btn:hover, .nv a.nv-btn:hover, .nv .nv-icon-btn:hover { transform: none !important; }
}