/* ═══════════════════════════════════════════════════════════════════════════
   Saubhagya Admin — ERP design layer (24 Sep 2026)

   Loaded AFTER admin.html's own <style>. It restyles what is already there and
   styles the shell that assets/admin-erp.js adds (sidebar, top bar, insights).
   It removes nothing: every panel, id, button and handler is the page's own.
   Revert: drop the two <link>/<script> lines — or git tag
   admin-before-erp-redesign-20260924.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces — cream, not grey: the brand is gold on deep green. */
  --e-bg:        #F5F2EB;
  --e-bg-2:      #EFEADF;
  --e-surface:   #FFFFFF;
  --e-surface-2: #FBF9F4;
  --e-line:      #E7E0D0;
  --e-line-2:    #F1ECE1;

  /* Ink */
  --e-ink:    #16241C;
  --e-ink-2:  #4B5750;
  --e-muted:  #7A7F77;
  --e-faint:  #A8A89E;

  /* Brand */
  --e-brand:    #0B291C;
  --e-brand-2:  #12402B;
  --e-brand-3:  #1A5A3D;
  --e-gold:     #C5A880;
  --e-gold-2:   #A8844F;
  --e-gold-soft:#F4ECDD;

  /* Status (reserved — never a chart series) */
  --e-ok:      #1C7A45;  --e-ok-bg:   #E5F4EA;
  --e-warn:    #9A6400;  --e-warn-bg: #FDF1DC;
  --e-bad:     #B42D2D;  --e-bad-bg:  #FBE8E6;
  --e-info:    #2C5DA8;  --e-info-bg: #E8EFFA;

  /* Chart series — validated (dataviz validate_palette, light, #FFF) */
  --s1: #1A7F52; --s2: #C08A2E; --s3: #3566B0; --s4: #C24A64; --s5: #6C5BA8; --s6: #14958F;

  /* Shape */
  --e-r-sm: 8px; --e-r: 12px; --e-r-lg: 16px;
  --e-shadow-1: 0 1px 2px rgba(22,36,28,.05), 0 1px 1px rgba(22,36,28,.03);
  --e-shadow-2: 0 1px 0 rgba(255,255,255,.8) inset, 0 1px 2px rgba(22,36,28,.06), 0 10px 28px -14px rgba(22,36,28,.22);
  --e-shadow-3: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(22,36,28,.06), 0 22px 44px -18px rgba(22,36,28,.30);
  --e-ease: cubic-bezier(.22,1,.36,1);

  --e-side-w: 252px;
  --e-top-h: 62px;
  --e-font: 'Inter', 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --e-font-display: 'Playfair Display', Georgia, serif;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
body {
  background:
    radial-gradient(1200px 500px at 110% -10%, rgba(197,168,128,.16), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, rgba(26,90,61,.08), transparent 60%),
    var(--e-bg);
  background-attachment: fixed;
  color: var(--e-ink);
  font-family: var(--e-font);
  font-size: 13.5px;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--e-gold-soft); color: var(--e-brand); }
:focus-visible { outline: 2px solid var(--e-gold-2); outline-offset: 2px; border-radius: 6px; }

/* ── Shell: sidebar + top bar (only once signed in) ───────────────────── */
.erp-side { display: none; }
body.erp-in .erp-side {
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; width: var(--e-side-w); z-index: 70;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%),
    linear-gradient(165deg, #0E3322 0%, #0B291C 45%, #081F15 100%);
  color: #DCE5DF; border-right: 1px solid rgba(197,168,128,.18);
  box-shadow: 8px 0 30px -18px rgba(0,0,0,.5);
}
.erp-brand { display: flex; align-items: center; gap: 11px; padding: 14px 18px 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
.erp-brand img { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.06); padding: 3px; box-shadow: 0 0 0 1px rgba(197,168,128,.35); }
.erp-brand b { display: block; font-family: var(--e-font-display); font-size: 17px; letter-spacing: .6px; color: #fff; font-weight: 600; }
.erp-brand span { display: block; font-size: 10px; letter-spacing: 2.2px; color: var(--e-gold); text-transform: uppercase; margin-top: 1px; }
.erp-side-search { margin: 12px 14px 4px; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: #AFC0B6; font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.erp-side-search:hover { background: rgba(255,255,255,.1); color: #fff; }
.erp-side-search kbd { margin-left: auto; font: 600 10.5px var(--e-font); color: #CFDAD3; background: rgba(255,255,255,.08); border-radius: 5px; padding: 2px 6px; }
.erp-nav { flex: 1; overflow-y: auto; padding: 6px 10px 12px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.erp-grp { margin-top: 6px; }
.erp-grp-h { font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(197,168,128,.85); padding: 6px 10px 3px; font-weight: 600; }
.erp-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6.5px 10px; margin: 1px 0; border: 0; border-radius: 9px;
  background: transparent; color: #CAD6CF; font: 500 13px var(--e-font); cursor: pointer; text-align: left; position: relative;
  transition: background .15s, color .15s; }
.erp-item svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.erp-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.erp-item.on { background: linear-gradient(90deg, rgba(197,168,128,.22), rgba(197,168,128,.06)); color: #fff; box-shadow: inset 0 0 0 1px rgba(197,168,128,.28); }
.erp-item.on::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--e-gold); }
.erp-item.on svg { opacity: 1; color: var(--e-gold); }
.erp-cnt { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 10px; font-size: 10.5px; font-weight: 700; text-align: center;
  background: rgba(255,255,255,.1); color: #E5ECE8; }
.erp-cnt.warn { background: #E0A43B; color: #1B1204; }
.erp-cnt.bad { background: #D9534F; color: #fff; }
.erp-cnt:empty { display: none; }
.erp-side-foot { border-top: 1px solid rgba(255,255,255,.07); padding: 6px 10px; display: grid; gap: 2px; }
.erp-item.erp-out { color: #F0A49E; }
.erp-item.erp-out:hover { background: rgba(217,83,79,.14); color: #FFC1BB; }
body.role-staff .erp-item[data-owner] { display: none; }

body.erp-in .ai-header {
  position: sticky; top: 0; z-index: 60; margin-left: var(--e-side-w);
  min-height: var(--e-top-h); padding: 10px 28px;
  background: rgba(251,249,244,.82); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  color: var(--e-ink); border-bottom: 1px solid var(--e-line); box-shadow: 0 1px 0 rgba(255,255,255,.7);
}
body.erp-in .erp-oldbrand { display: none !important; }            /* the brand lives in the sidebar */
body.erp-in .ai-menu-btn { display: none !important; }            /* the sidebar replaces the drop menu */
body.erp-in #ai-tabs.ai-menu, body.erp-in #ai-tabs.ai-menu.open { display: none !important; }
body.erp-in .ai-here { display: none; }
body.erp-in #usk-open { display: none; }
.erp-crumb { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.erp-crumb small { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--e-gold-2); font-weight: 600; white-space: nowrap; }
.erp-crumb small::after { content: "/"; margin-left: 8px; color: var(--e-faint); }
.erp-crumb b { font-family: var(--e-font-display); font-size: 21px; font-weight: 600; color: var(--e-brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erp-top-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.erp-tbtn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--e-line);
  background: var(--e-surface); color: var(--e-ink-2); font: 500 12.5px var(--e-font); cursor: pointer; box-shadow: var(--e-shadow-1); white-space: nowrap; }
.erp-tbtn:hover { border-color: var(--e-gold); color: var(--e-brand); }
.erp-tbtn svg { width: 16px; height: 16px; }
.erp-tbtn kbd { font: 600 10.5px var(--e-font); color: var(--e-muted); background: var(--e-surface-2); border: 1px solid var(--e-line); border-radius: 5px; padding: 1px 5px; }
.erp-clock { font-size: 12px; color: var(--e-muted); white-space: nowrap; }
body.erp-in .ai-role-badge { margin-left: 0; color: var(--e-gold-2); border-color: var(--e-gold); background: var(--e-gold-soft); font-weight: 700; }
.erp-burger { display: none; }

body.erp-in .ai-wrap { margin: 0 0 0 var(--e-side-w); max-width: none; padding: 24px 28px 90px; }
body.erp-in #ai-main > .ai-wrap > div[id^="panel-"] { animation: erpIn .28s var(--e-ease); }
@keyframes erpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Cards, containers ─────────────────────────────────────────────────── */
.ai-table-wrap, .wp-card, .ai-auth, .hc-item, .wp-check {
  background: var(--e-surface); border: 1px solid var(--e-line); border-radius: var(--e-r-lg); box-shadow: var(--e-shadow-2);
}
.ai-table-wrap { position: relative; }
.ai-dash-grid { gap: 14px; }
.ai-dash-card {
  position: relative; overflow: hidden; border-radius: var(--e-r-lg); border: 1px solid var(--e-line);
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFAF5 100%); box-shadow: var(--e-shadow-2); padding: 18px 18px 16px;
  transition: transform .2s var(--e-ease), box-shadow .2s var(--e-ease), border-color .2s;
}
.ai-dash-card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--e-brand-3), var(--e-gold)); opacity: .9; }
.ai-dash-card.ai-dash-warn { background: linear-gradient(180deg, #FFFDFB 0%, #FDF3F1 100%); border-color: #F1D2CD; }
.ai-dash-card.ai-dash-warn::after { background: linear-gradient(90deg, #C2413B, #E0A43B); }
.ai-dash-click:hover { transform: translateY(-3px); box-shadow: var(--e-shadow-3); border-color: var(--e-gold); }
.ai-dash-num { font-family: var(--e-font-display); font-size: 30px; color: var(--e-brand); font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.ai-dash-label { font-size: 11px; letter-spacing: .9px; color: var(--e-muted); font-weight: 600; }

/* ── Tables ────────────────────────────────────────────────────────────── */
table { font-variant-numeric: tabular-nums; }
th { background: var(--e-surface-2); color: var(--e-muted); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  border-bottom: 1px solid var(--e-line); padding: 11px 14px; }
td { border-bottom: 1px solid var(--e-line-2); padding: 11px 14px; color: var(--e-ink); }
tr:hover td { background: #FBF7EE; }
.ai-table-wrap table thead th:first-child { border-top-left-radius: var(--e-r-lg); }
.ai-table-wrap table thead th:last-child { border-top-right-radius: var(--e-r-lg); }
body.erp-compact td { padding-top: 6px; padding-bottom: 6px; }
body.erp-compact th { padding-top: 8px; padding-bottom: 8px; }
.erp-tt { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.ai-table-wrap:hover > .erp-tt, .erp-tt:focus-within { opacity: 1; }
.erp-tt button { height: 26px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--e-line); background: rgba(255,255,255,.95);
  font: 600 10.5px var(--e-font); color: var(--e-ink-2); cursor: pointer; box-shadow: var(--e-shadow-1); }
.erp-tt button:hover { border-color: var(--e-gold); color: var(--e-brand); }

/* ── Controls ──────────────────────────────────────────────────────────── */
.ai-btn, .ai-save, .wp-fixbtn {
  border-radius: 10px; font-family: var(--e-font); font-weight: 600; letter-spacing: .5px;
  background: linear-gradient(180deg, var(--e-brand-2), var(--e-brand)); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 2px 6px -2px rgba(11,41,28,.45);
  transition: transform .12s, box-shadow .15s, filter .15s;
}
.ai-btn:hover, .ai-save:hover, .wp-fixbtn:hover { filter: brightness(1.12); background: linear-gradient(180deg, var(--e-brand-3), var(--e-brand)); }
.ai-btn:active, .ai-save:active { transform: translateY(1px); }
.ai-btn.ghost { background: var(--e-surface); color: var(--e-brand); border: 1px solid var(--e-line); box-shadow: var(--e-shadow-1); }
.ai-btn.ghost:hover { border-color: var(--e-gold); background: var(--e-surface-2); filter: none; }
.ai-save.saved { background: var(--e-ok); }
.ai-save.err { background: var(--e-bad); }
.ai-input, .ai-num, .tx-f input, .ai-toolbar select, .ai-toolbar input[type="text"], .ai-form-row input, .ai-form-row select,
.wp-ta, .wp-ov input, .wp-ov textarea, .wp-cat-sel, #panel-add input, #panel-add select, #panel-add textarea {
  border: 1px solid var(--e-line); border-radius: 10px; background: var(--e-surface); color: var(--e-ink); font-family: var(--e-font);
  transition: border-color .15s, box-shadow .15s;
}
.ai-input:focus, .ai-num:focus, .ai-toolbar select:focus, .ai-toolbar input:focus, .ai-form-row input:focus, .ai-form-row select:focus,
.wp-ta:focus, #panel-add input:focus, #panel-add select:focus, #panel-add textarea:focus {
  outline: none; border-color: var(--e-gold-2); box-shadow: 0 0 0 3px rgba(197,168,128,.25);
}
.ai-toolbar { background: var(--e-surface); border: 1px solid var(--e-line); border-radius: var(--e-r-lg); padding: 10px 12px; box-shadow: var(--e-shadow-1); }
.ai-status { color: var(--e-muted); }

/* Badges: status reads by label + colour, never colour alone. */
.ai-badge { border-radius: 999px; padding: 3px 10px 3px 8px; font-size: 10px; letter-spacing: .5px; display: inline-flex; align-items: center; gap: 5px; }
.ai-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }

/* Inner tabs (dashboard period, attribution, website pages) */
#dash-period-tabs .ai-tab, #attr-touch-tabs .ai-tab, .wp-sub {
  border-radius: 8px; color: var(--e-ink-2) !important; background: transparent; border: 1px solid transparent; font-weight: 600;
}
#dash-period-tabs, #attr-touch-tabs { background: var(--e-bg-2); border-radius: 10px; padding: 3px; gap: 2px; }
#dash-period-tabs .ai-tab.active, #attr-touch-tabs .ai-tab.active { background: var(--e-surface) !important; color: var(--e-brand) !important; box-shadow: var(--e-shadow-1); }
.wp-sub.on { background: var(--e-brand); color: #fff !important; }

/* Dialogs & search palette get the same depth */
.sj-dlg-box, .usk { border-radius: var(--e-r-lg); box-shadow: var(--e-shadow-3), 0 40px 80px -30px rgba(11,41,28,.45); }

/* Login */
#ai-auth-screen .ai-auth { margin-top: 12vh; padding: 36px 32px; background: linear-gradient(180deg,#fff,#FBF8F1); }
#ai-auth-screen .ai-auth h2 { font-family: var(--e-font-display); font-size: 24px; color: var(--e-brand); }

/* ── Dashboard insights (built by admin-erp.js) ───────────────────────── */
.erp-ins { margin: 0 0 22px; }
.erp-ins-h { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; flex-wrap: wrap; }
.erp-ins-h h2 { margin: 0; font-family: var(--e-font-display); font-size: 20px; color: var(--e-brand); font-weight: 600; }
.erp-ins-h .erp-sub { font-size: 12px; color: var(--e-muted); }
.erp-seg { display: inline-flex; background: var(--e-bg-2); border-radius: 10px; padding: 3px; gap: 2px; margin-left: auto; }
.erp-seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font: 600 12px var(--e-font); color: var(--e-ink-2); cursor: pointer; }
.erp-seg button.on { background: var(--e-surface); color: var(--e-brand); box-shadow: var(--e-shadow-1); }
.erp-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 14px; }
.erp-card { grid-column: span 4; min-width: 0; background: var(--e-surface); border: 1px solid var(--e-line); border-radius: var(--e-r-lg);
  box-shadow: var(--e-shadow-2); padding: 16px 18px; position: relative; transition: box-shadow .2s var(--e-ease), transform .2s var(--e-ease); }
.erp-card:hover { box-shadow: var(--e-shadow-3); }
.erp-stack { grid-column: span 4; display: grid; gap: 14px; align-content: start; min-width: 0; }
.erp-stack > .erp-card { grid-column: auto; }
.erp-card.w8 { grid-column: span 8; } .erp-card.w6 { grid-column: span 6; } .erp-card.w12 { grid-column: span 12; } .erp-card.w3 { grid-column: span 3; }
.erp-card h3 { margin: 0 0 2px; font-size: 13.5px; font-weight: 700; color: var(--e-ink); }
.erp-card .erp-q { font-size: 11.5px; color: var(--e-muted); margin-bottom: 12px; }
.erp-kpi { grid-column: span 3; padding: 16px 18px 12px; overflow: hidden; }
.erp-kpi .l { font-size: 11px; letter-spacing: .9px; text-transform: uppercase; color: var(--e-muted); font-weight: 700; }
.erp-kpi .v { font-family: var(--e-font-display); font-size: 30px; color: var(--e-brand); margin-top: 4px; font-variant-numeric: tabular-nums; }
.erp-kpi .d { font-size: 12px; font-weight: 600; margin-top: 2px; }
.erp-kpi .d.up { color: var(--e-ok); } .erp-kpi .d.dn { color: var(--e-bad); } .erp-kpi .d.flat { color: var(--e-muted); }
.erp-kpi svg.spark { position: absolute; right: 12px; bottom: 10px; width: 46%; height: 42px; }
.erp-chart { width: 100%; display: block; overflow: visible; }
.erp-chart text { font: 11px var(--e-font); fill: var(--e-muted); }
.erp-chart .grid line { stroke: var(--e-line-2); }
.erp-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--e-ink-2); margin-top: 8px; }
.erp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.erp-donut { display: flex; align-items: center; gap: 16px; }
.erp-donut svg { width: 138px; height: 138px; flex: none; }
.erp-donut ul { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
.erp-donut li { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px; font-size: 12.5px; cursor: pointer; }
.erp-donut li:hover { background: var(--e-surface-2); }
.erp-donut li i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.erp-donut li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--e-ink-2); }
.erp-donut li b { font-variant-numeric: tabular-nums; color: var(--e-ink); }
.erp-bars { display: grid; gap: 8px; }
.erp-bar { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,2fr) auto; gap: 10px; align-items: center; font-size: 12.5px; }
.erp-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--e-ink-2); }
.erp-bar em { display: block; height: 10px; border-radius: 0 4px 4px 0; background: var(--s1); transform-origin: left; animation: erpGrow .6s var(--e-ease) both; }
.erp-bar b { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 64px; text-align: right; }
@keyframes erpGrow { from { transform: scaleX(0); } to { transform: none; } }
.erp-heat { display: grid; grid-template-columns: 34px repeat(24, minmax(0,1fr)); gap: 2px; font-size: 10px; color: var(--e-muted); }
.erp-heat i { aspect-ratio: 1; border-radius: 3px; background: var(--e-line-2); }
.erp-heat .hl { display: flex; align-items: center; }
.erp-feed { display: grid; gap: 2px; }
.erp-feed button { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0;
  background: transparent; padding: 8px 6px; border-radius: 8px; font: inherit; cursor: pointer; border-bottom: 1px solid var(--e-line-2); }
.erp-feed button:hover { background: var(--e-surface-2); }
.erp-feed .n { font-weight: 600; color: var(--e-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-feed .m { font-size: 11.5px; color: var(--e-muted); }
.erp-feed .amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.erp-act { display: grid; gap: 8px; }
.erp-act button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--e-line);
  background: var(--e-surface-2); font: inherit; cursor: pointer; text-align: left; transition: border-color .15s, transform .15s; }
.erp-act button:hover { border-color: var(--e-gold); transform: translateX(2px); }
.erp-act .ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; font-weight: 800; font-size: 14px; }
.erp-act .ic.bad { background: var(--e-bad-bg); color: var(--e-bad); } .erp-act .ic.warn { background: var(--e-warn-bg); color: var(--e-warn); }
.erp-act .ic.ok { background: var(--e-ok-bg); color: var(--e-ok); } .erp-act .ic.info { background: var(--e-info-bg); color: var(--e-info); }
.erp-act .t { flex: 1; min-width: 0; } .erp-act .t b { display: block; font-size: 13px; color: var(--e-ink); } .erp-act .t small { font-size: 11.5px; color: var(--e-muted); }
.erp-act .c { font-family: var(--e-font-display); font-size: 22px; color: var(--e-brand); font-variant-numeric: tabular-nums; }
.erp-empty { font-size: 12.5px; color: var(--e-muted); padding: 18px 4px; }
.erp-sk { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--e-line-2), #fff, var(--e-line-2)); background-size: 200% 100%; animation: erpSk 1.2s linear infinite; margin: 8px 0; }
@keyframes erpSk { to { background-position: -200% 0; } }
.erp-tip { position: fixed; z-index: 9990; pointer-events: none; background: #13241B; color: #fff; font: 12px var(--e-font); padding: 7px 10px; border-radius: 8px;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.4); opacity: 0; transition: opacity .1s; white-space: nowrap; }
.erp-tip.on { opacity: 1; }
.erp-tip b { color: var(--e-gold); }
.erp-dash-h { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; }
.erp-dash-h h2 { margin: 0; font-family: var(--e-font-display); font-size: 18px; color: var(--e-brand); font-weight: 600; }

/* Keyboard help */
.erp-keys { position: fixed; inset: 0; z-index: 9995; display: none; align-items: center; justify-content: center; background: rgba(11,41,28,.4); backdrop-filter: blur(2px); }
.erp-keys.on { display: flex; }
.erp-keys > div { background: #fff; border-radius: 16px; padding: 22px 24px; width: min(520px, 92vw); box-shadow: var(--e-shadow-3); }
.erp-keys h3 { margin: 0 0 12px; font-family: var(--e-font-display); color: var(--e-brand); }
.erp-keys dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 13px; }
.erp-keys dt kbd { font: 600 11px var(--e-font); background: var(--e-surface-2); border: 1px solid var(--e-line); border-radius: 5px; padding: 2px 6px; margin-right: 3px; }
.erp-keys dd { margin: 0; color: var(--e-ink-2); }

/* ── Tablet & phone ────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .erp-kpi { grid-column: span 6; }
  .erp-card, .erp-card.w3 { grid-column: span 6; }
  .erp-card.w8, .erp-card.w6, .erp-stack { grid-column: span 12; }
  .erp-stack { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  :root { --e-side-w: 0px; }
  body.erp-in .erp-side { width: 272px; transform: translateX(-102%); transition: transform .25s var(--e-ease); }
  body.erp-in.erp-drawer .erp-side { transform: none; }
  body.erp-in.erp-drawer::after { content: ""; position: fixed; inset: 0; background: rgba(8,20,14,.45); z-index: 65; }
  .erp-burger { display: inline-flex; }
  body.erp-in .ai-header { padding: calc(8px + env(safe-area-inset-top)) 14px 8px; }
  body.erp-in .ai-wrap { padding: 16px 14px calc(96px + env(safe-area-inset-bottom)); }
  .erp-clock { display: none; }
}
@media (max-width: 820px) {
  body.erp-in .ai-header { flex-wrap: nowrap; }
  .erp-crumb small { display: none; }
  .erp-crumb b { font-size: 18px; }
  .erp-tbtn .lbl, .erp-tbtn kbd { display: none; }
  /* A phone bar has room for menu, title and search. Refresh sits in each
     tab's own toolbar, density and shortcuts are desk things, and the role
     shows in the drawer's own context. */
  .erp-top-r [data-erp="reload"], .erp-top-r [data-erp="density"], .erp-top-r [data-erp="keys"] { display: none; }
  body.erp-in .ai-role-badge { display: none !important; }
  .erp-crumb { flex: 1 1 auto; }
  .erp-kpi, .erp-card, .erp-card.w3, .erp-card.w6, .erp-card.w8, .erp-stack { grid-column: span 12; }
  .erp-stack { grid-template-columns: 1fr; }
  .erp-kpi .v { font-size: 26px; }
  .erp-seg { margin-left: 0; }
  .erp-tt { display: none; }
  .ai-toolbar { padding: 8px; }
  /* Phone tables are cards (admin.html mobileTables): the wrapper steps back
     and each row carries the card look instead. */
  .ai-table-wrap:has(> table), .ai-table-wrap:has(> div > table) { background: transparent; border: 0; box-shadow: none; }
  .ai-table-wrap tbody tr { border-color: var(--e-line); border-radius: var(--e-r); box-shadow: var(--e-shadow-1); }
  .ai-table-wrap table thead th:first-child, .ai-table-wrap table thead th:last-child { border-radius: 0; }
  .erp-heat { grid-template-columns: 26px repeat(24, minmax(0,1fr)); gap: 1px; }
  .erp-heat .hx { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media print {
  .erp-side, .ai-header, .erp-tt { display: none !important; }
  body.erp-in .ai-wrap { margin: 0; padding: 0; }
}

/* ── Guide sheet (assets/admin-guide.js) ──────────────────────────────── */
.agd-back { position: fixed; inset: 0; z-index: 9980; background: rgba(8,20,14,.38); opacity: 0; pointer-events: none; transition: opacity .2s; }
.agd { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100%); z-index: 9981; overflow-y: auto; background: var(--e-surface);
  border-left: 1px solid var(--e-line); box-shadow: -24px 0 60px -30px rgba(11,41,28,.45); padding: 20px 22px 40px; box-sizing: border-box;
  transform: translateX(104%); transition: transform .25s var(--e-ease); }
body.agd-on .agd { transform: none; } body.agd-on .agd-back { opacity: 1; pointer-events: auto; }
.agd-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.agd-top > div { flex: 1; } .agd-top small { font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--e-gold-2); font-weight: 700; }
.agd-top h3 { margin: 2px 0 0; font-family: var(--e-font-display); font-size: 24px; color: var(--e-brand); }
.agd-x { border: 1px solid var(--e-line); background: var(--e-surface-2); border-radius: 10px; width: 36px; height: 36px; cursor: pointer; font-size: 15px; color: var(--e-ink-2); }
.agd-intro { font-size: 13px; line-height: 1.65; color: var(--e-ink-2); background: var(--e-gold-soft); border-radius: 12px; padding: 12px 14px; margin: 10px 0 14px; }
.agd-it { border: 1px solid var(--e-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--e-surface-2); }
.agd-it.live { border-left: 4px solid #D08A2E; }
.agd-h { display: flex; align-items: center; gap: 10px; } .agd-h b { flex: 1; font-size: 13.5px; color: var(--e-ink); }
.agd-f { font-size: 9.5px; letter-spacing: 1.2px; font-weight: 700; color: var(--e-brand-3); background: var(--e-ok-bg); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.agd-it p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--e-ink-2); }
.agd-risk { margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--e-warn); }
.agd-show { margin-top: 8px; border: 1px solid var(--e-line); background: #fff; border-radius: 8px; padding: 4px 10px; font: 600 11.5px var(--e-font); color: var(--e-brand); cursor: pointer; }
.agd-show:hover { border-color: var(--e-gold); }
.agd-all { margin-top: 18px; } .agd-all small { font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--e-muted); font-weight: 700; }
.agd-all div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.agd-all button { border: 1px solid var(--e-line); background: #fff; border-radius: 999px; padding: 5px 11px; font: 500 12px var(--e-font); color: var(--e-ink-2); cursor: pointer; }
.agd-all button.on, .agd-all button:hover { border-color: var(--e-gold); color: var(--e-brand); background: var(--e-gold-soft); }
.agd-foot { font-size: 12px; color: var(--e-muted); line-height: 1.6; margin-top: 16px; }
.agd-foot kbd { font: 600 10.5px var(--e-font); border: 1px solid var(--e-line); border-radius: 5px; padding: 1px 5px; background: var(--e-surface-2); }
.agd-ping { animation: agdPing 1.6s var(--e-ease); }
@keyframes agdPing { 0%, 60% { box-shadow: 0 0 0 4px rgba(197,168,128,.65); } 100% { box-shadow: 0 0 0 0 rgba(197,168,128,0); } }

/* ── Summary strips on Orders / Inventory (admin-erp.js) ──────────────── */
.erp-strip { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.erp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--e-line); background: var(--e-surface);
  box-shadow: var(--e-shadow-1); font: 600 12.5px var(--e-font); color: var(--e-ink-2); cursor: pointer; transition: border-color .15s, transform .15s; }
.erp-chip:hover { border-color: var(--e-gold); transform: translateY(-1px); }
.erp-chip.on { border-color: var(--e-brand); background: var(--e-brand); color: #fff; }
.erp-chip b { font-family: var(--e-font-display); font-size: 17px; color: var(--e-brand); font-variant-numeric: tabular-nums; }
.erp-chip.on b { color: var(--e-gold); }
.erp-chip i { width: 8px; height: 8px; border-radius: 50%; }
.erp-chip.static { cursor: default; } .erp-chip.static:hover { transform: none; border-color: var(--e-line); }
.erp-chip.warn b { color: var(--e-warn); } .erp-chip.bad b { color: var(--e-bad); }

/* ═══ Views (assets/admin-views.js) ═══════════════════════════════════════ */
#vw-phead { display: flex; align-items: center; gap: 12px; margin: -4px 0 16px; }
#vw-phead:empty { display: none; }
#vw-phead p { margin: 0; flex: 1; font-size: 13.5px; color: var(--e-ink-2); line-height: 1.55; }
.vw-switch { display: inline-flex; background: var(--e-bg-2); border-radius: 10px; padding: 3px; gap: 2px; margin-left: auto; }
.vw-switch button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font: 600 12px var(--e-font); color: var(--e-ink-2); cursor: pointer; }
.vw-switch button.on { background: var(--e-surface); color: var(--e-brand); box-shadow: var(--e-shadow-1); }
.vw-sort { padding: 7px 10px; border: 1px solid var(--e-line); border-radius: 10px; font: 500 12px var(--e-font); background: var(--e-surface); }
.vw-grid { display: none; }
.vw-cards .vw-grid { display: grid; gap: 14px; margin-bottom: 18px; }
.vw-cards .vw-table { display: none !important; }
.vw-ogrid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.vw-pgrid { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.vw-cgrid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.vw-card { background: var(--e-surface); border: 1px solid var(--e-line); border-radius: var(--e-r-lg); box-shadow: var(--e-shadow-2);
  transition: transform .18s var(--e-ease), box-shadow .18s var(--e-ease), border-color .18s; min-width: 0; }
.vw-card:hover { transform: translateY(-2px); box-shadow: var(--e-shadow-3); border-color: #D9CBAF; }
.vw-empty { grid-column: 1 / -1; padding: 30px; text-align: center; color: var(--e-muted); background: var(--e-surface); border: 1px dashed var(--e-line); border-radius: var(--e-r-lg); }
.vw-meta { font-size: 11.5px; color: var(--e-muted); overflow: hidden; text-overflow: ellipsis; }
.vw-meta a { color: inherit; }
.vw-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .8px; border-radius: 999px; padding: 3px 8px; text-transform: uppercase; }
.vw-tag.test { background: var(--e-bad-bg); color: var(--e-bad); } .vw-tag.bad { background: #C2413B; color: #fff; }
.vw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; padding: 9px 14px; font: 600 12.5px var(--e-font);
  cursor: pointer; border: 1px solid var(--e-line); background: var(--e-surface); color: var(--e-brand); text-decoration: none; transition: filter .15s, border-color .15s; }
.vw-btn:hover { border-color: var(--e-gold); }
.vw-btn.pri { background: linear-gradient(180deg, var(--e-brand-2), var(--e-brand)); color: #fff; border-color: var(--e-brand); box-shadow: 0 2px 8px -3px rgba(11,41,28,.5); }
.vw-btn.pri2 { background: var(--e-gold-soft); border-color: #E3D2B0; color: #6B4E1E; }
.vw-btn.danger { color: var(--e-bad); border-color: #EBC4BF; }
.vw-btn.pri:hover { filter: brightness(1.15); }
.vw-btn small { display: block; font-weight: 500; font-size: 10.5px; opacity: .8; }
.vw-btn:disabled { opacity: .45; cursor: default; }

/* Orders */
.vw-ocard { padding: 14px 16px; cursor: pointer; display: grid; gap: 8px; }
.vw-ocard.att { border-color: #EFC2BC; box-shadow: var(--e-shadow-2), inset 3px 0 0 #C2413B; }
.vw-ocard header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vw-status .ai-badge { font-size: 10.5px; } .vw-status div { display: none; }
.vw-total { margin-left: auto; font-family: var(--e-font-display); font-size: 20px; color: var(--e-brand); font-variant-numeric: tabular-nums; }
.vw-who b { display: block; font-size: 15px; color: var(--e-ink); } .vw-who span { font-size: 12px; color: var(--e-ink-2); }
.vw-thumbs { display: flex; align-items: center; gap: 6px; }
.vw-thumbs img, .vw-noimg { width: 44px; height: 55px; object-fit: cover; border-radius: 8px; border: 1px solid var(--e-line); background: var(--e-surface-2); }
.vw-noimg { display: inline-flex; align-items: center; justify-content: center; font-size: 9px; color: var(--e-muted); }
.vw-thumbs.big img { width: 64px; height: 80px; }
.vw-items { font-size: 12px; color: var(--e-muted); margin-left: 4px; }
.vw-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.vw-steps span { font-size: 9.5px; font-weight: 700; letter-spacing: .3px; color: var(--e-faint); padding-top: 7px; border-top: 4px solid var(--e-line-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-steps span.done { border-top-color: #7FB99A; color: var(--e-ink-2); }
.vw-steps span.on { border-top-color: var(--s1); color: var(--e-brand); }
.vw-steps.bad { grid-template-columns: 1fr; } .vw-steps.bad span { border-top-color: var(--s4); color: var(--e-bad); text-transform: capitalize; }
.vw-ocard footer { display: flex; gap: 8px; margin-top: 2px; } .vw-ocard footer .vw-btn { flex: 1; }
.vw-back { position: fixed; inset: 0; z-index: 9970; background: rgba(8,20,14,.38); opacity: 0; pointer-events: none; transition: opacity .2s; }
.vw-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); z-index: 9971; background: var(--e-surface); overflow-y: auto;
  padding: 20px 22px 40px; box-sizing: border-box; box-shadow: -24px 0 60px -30px rgba(11,41,28,.45); transform: translateX(104%); transition: transform .25s var(--e-ease); }
body.vw-drawer-on .vw-drawer { transform: none; } body.vw-drawer-on .vw-back { opacity: 1; pointer-events: auto; }
.vw-dh { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; } .vw-dh > div { flex: 1; min-width: 0; }
.vw-dh small { font-size: 11px; letter-spacing: 1px; color: var(--e-gold-2); font-weight: 700; } .vw-dh h3 { margin: 2px 0 0; font-family: var(--e-font-display); font-size: 24px; color: var(--e-brand); }
.vw-x { border: 1px solid var(--e-line); background: var(--e-surface-2); border-radius: 10px; width: 36px; height: 36px; cursor: pointer; }
.vw-drawer h4 { margin: 18px 0 8px; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--e-muted); }
.vw-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin-top: 16px; font-size: 13px; } .vw-kv span { color: var(--e-muted); } .vw-kv b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.vw-kv b div { font-size: 10px; color: var(--e-muted); font-weight: 400; }
.vw-ditems { display: grid; gap: 8px; } .vw-addr { margin: 0; font-size: 13px; line-height: 1.6; color: var(--e-ink-2); background: var(--e-surface-2); border-radius: 10px; padding: 10px 12px; }
.vw-dacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .vw-dacts .vw-btn { flex-direction: column; min-height: 54px; }
.vw-warn { margin-top: 14px; background: var(--e-bad-bg); color: var(--e-bad); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; }

/* Inventory */
.vw-pcard { overflow: hidden; display: flex; flex-direction: column; }
.vw-pcard.dim { opacity: .6; } .vw-pcard.dirty { border-color: var(--e-gold); box-shadow: var(--e-shadow-2), 0 0 0 2px rgba(197,168,128,.4); }
.vw-ph { position: relative; aspect-ratio: 4 / 5; background: linear-gradient(135deg, #F7F1E4, #EFE6D3); display: flex; align-items: center; justify-content: center; color: var(--e-muted); font-size: 12px; }
.vw-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vw-lvl { position: absolute; left: 8px; top: 8px; font-size: 10px; font-weight: 800; letter-spacing: .5px; padding: 4px 8px; border-radius: 999px; backdrop-filter: blur(6px); }
.vw-lvl.ok { background: rgba(229,244,234,.92); color: var(--e-ok); } .vw-lvl.low { background: rgba(253,241,220,.95); color: var(--e-warn); } .vw-lvl.out { background: rgba(180,45,45,.92); color: #fff; }
.vw-badge { position: absolute; right: 8px; top: 8px; font-size: 10px; font-weight: 800; letter-spacing: .6px; padding: 4px 8px; border-radius: 999px; background: var(--e-brand); color: var(--e-gold); }
.vw-pbody { padding: 12px; display: grid; gap: 6px; }
.vw-pname { font-size: 13px; line-height: 1.35; color: var(--e-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 35px; }
.vw-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .vw-price b { font-size: 16px; color: var(--e-brand); } .vw-price s { font-size: 11.5px; color: var(--e-muted); } .vw-price em { font-style: normal; font-size: 10.5px; color: var(--e-ok); font-weight: 700; }
.vw-stock { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--e-muted); }
.vw-stock button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--e-line); background: var(--e-surface-2); font-size: 16px; font-weight: 700; color: var(--e-brand); cursor: pointer; }
.vw-stock button:hover { border-color: var(--e-gold); }
.vw-stock input { width: 54px; height: 30px; text-align: center; border: 1px solid var(--e-line); border-radius: 8px; font: 700 14px var(--e-font); color: var(--e-ink); }
.vw-stock small { margin-left: auto; font-size: 10.5px; }
.vw-pacts { display: flex; gap: 6px; } .vw-pacts .vw-btn { flex: 1; padding: 7px 8px; font-size: 12px; }
.vw-savebar { position: fixed; left: calc(var(--e-side-w) + 24px); right: 24px; bottom: 18px; z-index: 80; display: none; align-items: center; gap: 10px;
  background: #13241B; color: #fff; padding: 12px 14px 12px 18px; border-radius: 14px; box-shadow: 0 20px 40px -12px rgba(0,0,0,.45); }
.vw-savebar.on { display: flex; animation: erpIn .2s var(--e-ease); }
.vw-savebar span { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-savebar .vw-btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.vw-savebar .vw-btn.pri { background: var(--e-gold); color: #1B1204; border-color: var(--e-gold); }

/* Customers */
.vw-ccard { padding: 14px 16px; display: flex; gap: 12px; align-items: center; }
.vw-av { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font: 700 15px var(--e-font-display);
  background: linear-gradient(135deg, var(--e-brand-3), var(--e-brand)); color: var(--e-gold); }
.vw-cb { flex: 1; min-width: 0; } .vw-cb b { font-size: 14px; }
.vw-cstats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--e-muted); } .vw-cstats b { color: var(--e-ink); }

/* Add product */
.vw-addlayout { display: grid; grid-template-columns: minmax(0, 900px) minmax(260px, 320px); gap: 18px; align-items: start; }
.vw-preview { position: sticky; top: calc(var(--e-top-h) + 16px); background: var(--e-surface); border: 1px solid var(--e-line); border-radius: var(--e-r-lg); box-shadow: var(--e-shadow-2); padding: 14px; }
.vw-preview > small { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--e-gold-2); font-weight: 700; }
.vw-shopcard { margin-top: 10px; display: grid; gap: 6px; } .vw-shopcard .vw-ph { border-radius: 12px; overflow: hidden; } .vw-shopcard > b { font-size: 14px; line-height: 1.35; }
.vw-check { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.vw-check li.ok { color: var(--e-ok); } .vw-check li.no { color: var(--e-muted); }
.vw-wiz { max-width: none !important; }
.vw-wizhead { margin: 4px 0 14px; }
.vw-wsteps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; padding: 0; }
.vw-wsteps button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--e-line); background: #fff; cursor: pointer; font: 600 12.5px var(--e-font); color: var(--e-ink-2); text-align: left; }
.vw-wsteps em { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--e-bg-2); font-size: 12px; flex: none; }
.vw-wsteps button.on { border-color: var(--e-brand); color: var(--e-brand); box-shadow: 0 0 0 2px rgba(11,41,28,.12); } .vw-wsteps button.on em { background: var(--e-brand); color: var(--e-gold); }
.vw-wsteps button.done em { background: var(--e-ok-bg); color: var(--e-ok); }
.vw-wdesc { margin: 10px 0 0; font-size: 13px; color: var(--e-ink-2); } .vw-need { color: var(--e-bad); font-weight: 600; }
.vw-wall { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--e-muted); margin-top: 6px; cursor: pointer; }
.vw-hide { display: none !important; }
.vw-wnav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }

/* Reviews, payments, channels, blog */
.vw-rsum { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; background: var(--e-surface); border: 1px solid var(--e-line); border-radius: var(--e-r-lg); box-shadow: var(--e-shadow-2); padding: 16px 20px; margin-bottom: 16px; }
.vw-rsum:empty { display: none; }
.vw-ravg b { display: block; font-family: var(--e-font-display); font-size: 44px; color: var(--e-brand); line-height: 1; }
.vw-ravg span { color: #D19B2A; font-size: 18px; letter-spacing: 2px; } .vw-ravg i { color: var(--e-line); font-style: normal; } .vw-ravg small { display: block; font-size: 12px; color: var(--e-muted); margin-top: 4px; }
.vw-rbars { display: grid; gap: 5px; } .vw-rbars div { display: grid; grid-template-columns: 28px 1fr 28px; gap: 8px; align-items: center; font-size: 12px; }
.vw-rbars em { height: 8px; background: var(--e-line-2); border-radius: 4px; overflow: hidden; } .vw-rbars em i { display: block; height: 100%; background: #D19B2A; border-radius: 0 4px 4px 0; }
.vw-pipe, .vw-amz { background: var(--e-surface); border: 1px solid var(--e-line); border-radius: var(--e-r-lg); box-shadow: var(--e-shadow-2); padding: 16px 18px; margin: 0 0 16px; }
.vw-pipe:empty, .vw-amz:empty { display: none; }
.vw-pipe h4, .vw-amz h4 { margin: 0 0 12px; font-size: 13.5px; color: var(--e-ink); }
.vw-pflow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.vw-pstep { flex: 1 1 150px; border-radius: 12px; padding: 12px; background: var(--e-surface-2); border: 1px solid var(--e-line); }
.vw-pstep small { font-size: 11px; font-weight: 700; color: var(--e-muted); text-transform: uppercase; letter-spacing: .6px; } .vw-pstep b { display: block; font-family: var(--e-font-display); font-size: 22px; color: var(--e-brand); margin: 2px 0; } .vw-pstep span { font-size: 11.5px; color: var(--e-muted); }
.vw-pstep.s1 { background: #FFF8EC; border-color: #F0DDB8; } .vw-pstep.s2, .vw-pstep.s3 { background: #F1F8F3; border-color: #CFE6D7; }
.vw-parrow { align-self: center; font-style: normal; color: var(--e-faint); font-size: 18px; }
.vw-ptotal { margin-top: 12px; font-size: 13px; color: var(--e-ink-2); } .vw-ptotal b { color: var(--e-brand); }
.vw-abar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; gap: 2px; background: var(--e-line-2); } .vw-abar i { display: block; height: 100%; }
#panel-blog #bg-body { min-height: 380px; }
.vw-blogprev { margin: 12px 0; background: var(--e-surface); border: 1px solid var(--e-line); border-radius: var(--e-r-lg); box-shadow: var(--e-shadow-2); padding: 14px 18px; }
.vw-bph { display: flex; justify-content: space-between; font-size: 11px; color: var(--e-muted); } .vw-bph small { letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; color: var(--e-gold-2); }
.vw-post { margin-top: 12px; border-top: 1px solid var(--e-line-2); padding-top: 12px; font-size: 14px; line-height: 1.75; color: var(--e-ink); max-height: 520px; overflow: auto; }
.vw-post h2 { font-family: var(--e-font-display); color: var(--e-brand); margin: 0 0 8px; } .vw-post h3 { font-family: var(--e-font-display); color: var(--e-brand); margin: 16px 0 6px; } .vw-post mark { background: #FDEBC8; }

@media (max-width: 1100px) { .vw-addlayout { grid-template-columns: 1fr; } .vw-preview { position: static; } .vw-wsteps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1024px) { .vw-savebar { left: 12px; right: 12px; } }
@media (max-width: 820px) {
  #vw-phead { flex-direction: column; align-items: flex-start; }
  .vw-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vw-pbody { padding: 10px; } .vw-stock small { display: none; } .vw-pacts { flex-direction: column; }
  .vw-dacts { grid-template-columns: 1fr; } .vw-rsum { grid-template-columns: 1fr; }
  .vw-parrow { display: none; } .vw-switch { margin-left: 0; }
  /* Chip rows scroll sideways on a phone instead of stacking four lines deep. */
  .erp-strip { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .erp-strip::-webkit-scrollbar { display: none; }
  .erp-chip { flex: none; }
}

/* ═══ Plus (assets/admin-plus.js): feel + alerts + quick create ═════════ */
/* 3D tilt: the transform is set inline from the pointer; this adds the sheen. */
.px-tilt { transition: transform .08s linear, box-shadow .2s !important; will-change: transform; box-shadow: var(--e-shadow-3) !important; }
.px-tilt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55), rgba(255,255,255,0) 45%); mix-blend-mode: soft-light; }
.erp-kpi, .ai-dash-card, .vw-pcard, .vw-ocard, .vw-ccard, .erp-card, .vw-pstep { position: relative; transform-style: preserve-3d; }
/* Entrance: once per grid, a short stagger. */
.px-in { animation: pxIn .45s var(--e-ease) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes pxIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
/* Ripple */
.px-ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .18; transform: scale(0); pointer-events: none; animation: pxRip .6s ease-out forwards; }
@keyframes pxRip { to { transform: scale(1); opacity: 0; } }
/* Tab crossfade (View Transitions) */
::view-transition-old(root) { animation: pxOut .16s ease both; } ::view-transition-new(root) { animation: pxNew .22s var(--e-ease) both; }
@keyframes pxOut { to { opacity: 0; } } @keyframes pxNew { from { opacity: 0; transform: translateY(6px); } }
/* Menus: ＋ New and 🔔 */
.px-menu { position: relative; }
.px-menu > .erp-tbtn { position: relative; }
.px-plus { font-size: 16px; font-weight: 800; color: var(--e-brand); }
#px-new > .erp-tbtn { background: linear-gradient(180deg, var(--e-brand-2), var(--e-brand)); color: #fff; border-color: var(--e-brand); }
#px-new > .erp-tbtn .px-plus { color: var(--e-gold); }
.px-n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font: 800 10px/18px var(--e-font); font-style: normal; text-align: center; color: #fff; background: var(--e-info); box-shadow: 0 0 0 2px #FBF9F4; }
.px-n:empty { display: none; } .px-n.bad { background: var(--e-bad); } .px-n.warn { background: #D08A2E; }
.px-pop { position: absolute; right: 0; top: calc(100% + 8px); width: min(340px, 92vw); z-index: 90; background: var(--e-surface); border: 1px solid var(--e-line); border-radius: 14px;
  box-shadow: var(--e-shadow-3), 0 30px 60px -30px rgba(11,41,28,.4); padding: 6px; display: none; transform-origin: top right; }
.px-menu.on .px-pop { display: block; animation: pxPop .16s var(--e-ease); }
@keyframes pxPop { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.px-ph { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; letter-spacing: 1.3px; text-transform: uppercase; font-weight: 700; color: var(--e-muted); padding: 8px 10px 6px; }
.px-ph button { border: 0; background: none; font: 600 11px var(--e-font); color: var(--e-brand-3); cursor: pointer; text-transform: none; letter-spacing: 0; }
.px-pop > button { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; padding: 9px 10px; border-radius: 10px; text-align: left; cursor: pointer; font: inherit; }
.px-pop > button:hover, .px-pop > button:focus-visible { background: var(--e-surface-2); }
.px-pop i { width: 34px; height: 34px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; background: var(--e-gold-soft); color: var(--e-brand); }
.px-pop b { display: block; font-size: 13px; color: var(--e-ink); } .px-pop small { font-size: 11.5px; color: var(--e-muted); }
.px-a.bad i { background: var(--e-bad-bg); color: var(--e-bad); } .px-a.warn i { background: var(--e-warn-bg); color: var(--e-warn); } .px-a.info i { background: var(--e-info-bg); color: var(--e-info); }
.px-none { padding: 18px 12px; font-size: 13px; color: var(--e-muted); text-align: center; }
/* Toasts */
#px-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 9990; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.px-toast { display: flex; align-items: center; gap: 10px; background: #13241B; color: #fff; border-radius: 14px; padding: 12px 12px 12px 16px;
  box-shadow: 0 22px 44px -16px rgba(0,0,0,.55); animation: pxT .3s var(--e-ease); transition: opacity .35s, transform .35s; }
.px-toast.out { opacity: 0; transform: translateY(8px); }
.px-toast > div { flex: 1; min-width: 0; } .px-toast b { display: block; font-size: 13.5px; color: var(--e-gold); } .px-toast small { font-size: 12px; opacity: .85; }
.px-toast button { border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; border-radius: 9px; padding: 6px 10px; font: 600 12px var(--e-font); cursor: pointer; }
@keyframes pxT { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (max-width: 820px) { #px-new .lbl { display: none; } #px-toasts { right: 16px; left: 16px; width: auto; bottom: calc(16px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .px-in { animation: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
.px-test { border-top: 1px solid var(--e-line-2) !important; margin-top: 4px; } .px-test i { background: #EDE7FB !important; color: #5B3FB0 !important; }

/* ═══ 25 Sep (2): sliding menu, custom dates, pipeline, scrollable tables ═ */
/* The menu slides away on wide screens too; the page takes the full width. */
.erp-burger { display: inline-flex; }
body.erp-in .erp-side { transition: transform .28s var(--e-ease), box-shadow .28s; }
body.erp-in .ai-header, body.erp-in .ai-wrap { transition: margin-left .28s var(--e-ease); }
@media (min-width: 1025px) {
  body.erp-in.erp-collapsed .erp-side { transform: translateX(-102%); box-shadow: none; }
  body.erp-in.erp-collapsed .ai-header, body.erp-in.erp-collapsed .ai-wrap { margin-left: 0; }
  body.erp-in.erp-collapsed .vw-savebar { left: 24px; }
}
/* Custom date range */
.erp-cust { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.erp-cust[hidden] { display: none; }
.erp-cust label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--e-muted); }
.erp-cust input { padding: 6px 8px; border: 1px solid var(--e-line); border-radius: 8px; font: 500 12.5px var(--e-font); color: var(--e-ink); background: #fff; }
/* Order pipeline */
.erp-pipe { display: flex; align-items: stretch; gap: 6px; }
.erp-pipe > i { align-self: center; font-style: normal; color: var(--e-faint); }
.erp-pipe button { flex: 1; min-width: 0; border: 1px solid var(--e-line); background: var(--e-surface-2); border-radius: 12px; padding: 10px 12px; text-align: left; cursor: pointer;
  border-top: 4px solid var(--c); transition: transform .15s var(--e-ease), box-shadow .15s; }
.erp-pipe button:hover { transform: translateY(-2px); box-shadow: var(--e-shadow-2); }
.erp-pipe b { display: block; font-family: var(--e-font-display); font-size: 26px; color: var(--e-brand); line-height: 1.1; }
.erp-pipe span { font-size: 11.5px; color: var(--e-muted); font-weight: 600; }
@media (max-width: 820px) { .erp-pipe { flex-wrap: wrap; } .erp-pipe > i { display: none; } .erp-pipe button { flex: 1 1 30%; } }
/* Wide tables scroll inside the screen, with the header row fixed, so the
   sideways scrollbar is always reachable instead of at the foot of the page. */
@media (min-width: 821px) {
  #panel-inventory .ai-table-wrap.vw-table, #panel-orders .ai-table-wrap.vw-table, #panel-customers .ai-table-wrap.vw-table {
    max-height: calc(100vh - var(--e-top-h) - 36px); overflow: auto; overscroll-behavior: contain; scroll-margin-top: calc(var(--e-top-h) + 12px); }
  #panel-inventory .vw-table::before { content: 'Shift + mouse wheel scrolls sideways'; position: sticky; left: 0; display: block; font-size: 11px; color: var(--e-muted); padding: 6px 12px 0; }
  #panel-inventory .vw-table thead th, #panel-orders .vw-table thead th, #panel-customers .vw-table thead th { position: sticky; top: 0; z-index: 2; }
  .ai-table-wrap::-webkit-scrollbar { height: 12px; width: 12px; }
  .ai-table-wrap::-webkit-scrollbar-thumb { background: #D6CBB3; border-radius: 8px; border: 3px solid var(--e-surface); }
  .ai-table-wrap::-webkit-scrollbar-track { background: var(--e-surface-2); }
}
/* Views given their own tab */
.erp-vpanel { animation: erpIn .28s var(--e-ease); }
.erp-vpanel > details, .erp-vpanel > div { max-width: none !important; }
/* Recently added: date strip */
.vw-dates { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.vw-dates button { flex: none; scroll-snap-align: start; border: 1px solid var(--e-line); background: #fff; border-radius: 12px; padding: 8px 12px; cursor: pointer; text-align: center; min-width: 74px; box-shadow: var(--e-shadow-1); }
.vw-dates button b { display: block; font-family: var(--e-font-display); font-size: 18px; color: var(--e-brand); line-height: 1.1; }
.vw-dates button span { font-size: 10.5px; color: var(--e-muted); font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
.vw-dates button em { display: block; font-style: normal; font-size: 10.5px; color: var(--e-gold-2); font-weight: 700; margin-top: 2px; }
.vw-dates button.on { background: var(--e-brand); border-color: var(--e-brand); } .vw-dates button.on b, .vw-dates button.on span { color: #fff; } .vw-dates button.on em { color: var(--e-gold); }
/* Customer remove */
.vw-ccard .vw-del { color: var(--e-bad); border-color: #EBC4BF; padding: 7px 10px; }
/* Product videos: upload your own clip */
.vw-vup { border: 1px dashed #D9CBAF; background: var(--e-surface-2); border-radius: 14px; padding: 14px 16px; margin: 10px 0 16px; }
.vw-vup h4 { margin: 0 0 4px; font-size: 13.5px; color: var(--e-brand); } .vw-vup h4 small { font-weight: 500; color: var(--e-muted); margin-left: 6px; }
.vw-vrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.vw-vrow video { max-height: 160px; max-width: 220px; border-radius: 10px; background: #0e0e0e; }
.vw-vrow video:not([src]) { display: none; }
/* The page title never gets cut off: it keeps its width, and on narrower
   desks the top-bar buttons drop their words (the icons and tooltips stay). */
.erp-crumb { flex: 0 0 auto; }
.erp-crumb b { overflow: visible; }
@media (max-width: 1500px) {
  .erp-clock { display: none; }
  .erp-top-r .erp-tbtn .lbl, .erp-top-r .erp-tbtn kbd { display: none; }
  #px-new .lbl { display: inline; }
}

/* Install-on-a-phone card and menu entry removed (Daya, 25 Sep 2026). */
#install-card, #install-menu-btn { display: none !important; }