/* Preview-only skins for Elite office app. Does not ship with production.
   Activate with html[data-skin="…"]. Keeps admin.css structure; only overrides tokens + a few accents. */

.sample-banner{
  position:sticky;top:0;z-index:50;padding:8px 14px;text-align:center;font:600 13px/1.3 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  background:#111;color:#fff;letter-spacing:.02em;
}
.sample-banner b{color:#fbbf24}
.sample-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:10px 12px 0;max-width:46rem;margin:0 auto}
.sample-nav a{font:600 13px/1 -apple-system,system-ui,sans-serif;padding:8px 12px;border-radius:999px;text-decoration:none;background:var(--fill);color:var(--label)}
.sample-nav a[aria-current="page"]{background:var(--teal-fill);color:#fff}
.sample-section{margin-top:8px}
.sample-section h2.sample-h{margin:18px 16px 8px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--label-2)}

/* ========== 1. Modern — clean sleek ========== */
html[data-skin="modern"]{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --bg:#eef1f6; --card:#ffffff; --card-2:#f4f6fa; --label:#0f172a; --label-2:#64748b; --label-3:#94a3b8;
  --sep:rgba(15,23,42,.08); --fill:rgba(15,23,42,.06); --fill-2:rgba(15,23,42,.1); --press:rgba(15,23,42,.04);
  --bar:rgba(238,241,246,.85); --sheet:#eef1f6; --alert:rgba(255,255,255,.96);
  --teal:#0ea5a4; --teal-fill:#0d9488; --teal-text:#0f766e; --teal-tint:rgba(14,165,164,.14);
  --orange:#f59e0b; --orange-text:#b45309; --orange-tint:rgba(245,158,11,.14);
  --red:#e11d48; --red-fill:#e11d48; --red-tint:rgba(225,29,72,.12);
  --gblue:#2563eb;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px -12px rgba(15,23,42,.18);
  --r-card:22px; --r-ctl:14px;
}
html[data-skin="modern"] .adm-h1{letter-spacing:-.04em}
html[data-skin="modern"] .stat,html[data-skin="modern"] .ios-group,html[data-skin="modern"] .cam-card{
  border:0;box-shadow:var(--shadow);
}
html[data-skin="modern"] .seg{border-radius:14px;padding:4px}
html[data-skin="modern"] .seg button[aria-pressed="true"]{border-radius:12px;box-shadow:0 4px 12px rgba(15,23,42,.1)}
html[data-skin="modern"] .abtn-primary,html[data-skin="modern"] .abtn-confirm{
  background:linear-gradient(180deg,#14b8a6,#0d9488);border-radius:14px;
}
html[data-skin="modern"] .shop-hero .stat{background:linear-gradient(165deg,#fff 40%,#f0fdfa)}
html[data-skin="modern"] .accent-teal .stat-val{color:#0d9488}

/* ========== 2. Woodsy — warm wood / forest / leather ========== */
html[data-skin="woodsy"]{
  --font:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
  --bg:#f3ebe0; --card:#fff8ef; --card-2:#efe4d4; --label:#2c2118; --label-2:#6b5646; --label-3:#a08a76;
  --sep:rgba(74,52,36,.16); --fill:rgba(90,61,39,.1); --fill-2:rgba(90,61,39,.18); --press:rgba(90,61,39,.06);
  --bar:rgba(243,235,224,.88); --sheet:#f3ebe0; --alert:rgba(255,248,239,.97);
  --teal:#3f6b4b; --teal-fill:#2f553a; --teal-text:#2a4a32; --teal-tint:rgba(63,107,75,.16);
  --orange:#b45309; --orange-text:#92400e; --orange-tint:rgba(180,83,9,.14);
  --red:#9f1239; --red-fill:#9f1239; --red-tint:rgba(159,18,57,.12);
  --gblue:#3d5a80;
  --shadow:0 1px 0 rgba(74,52,36,.06),0 8px 22px rgba(74,52,36,.1);
  --r-card:16px; --r-ctl:12px;
}
html[data-skin="woodsy"] body.admin{
  background-image:
    radial-gradient(ellipse at 20% 0%,rgba(196,140,78,.18),transparent 50%),
    radial-gradient(ellipse at 90% 10%,rgba(63,107,75,.1),transparent 45%);
}
html[data-skin="woodsy"] .adm-h1,html[data-skin="woodsy"] .stat-val,html[data-skin="woodsy"] .dcard-h h3{
  font-family:var(--font);letter-spacing:-.01em;
}
html[data-skin="woodsy"] .ios-h{letter-spacing:.08em;color:#6b5646}
html[data-skin="woodsy"] .stat,html[data-skin="woodsy"] .ios-group{
  border:1px solid rgba(90,61,39,.12);background:linear-gradient(180deg,#fffaf2,#fff6ea);
}
html[data-skin="woodsy"] .av-pending{background:linear-gradient(160deg,#c2410c,#92400e)}
html[data-skin="woodsy"] .av-confirmed,html[data-skin="woodsy"] .av-handled{background:linear-gradient(160deg,#4d7c57,#2f553a)}
html[data-skin="woodsy"] .abtn-primary,html[data-skin="woodsy"] .abtn-confirm{background:#2f553a;box-shadow:0 6px 16px rgba(47,85,58,.28)}
html[data-skin="woodsy"] .pill-pending{background:rgba(180,83,9,.16);color:#92400e}
html[data-skin="woodsy"] .seg button[aria-pressed="true"]{background:#fff8ef;box-shadow:0 2px 8px rgba(74,52,36,.12)}
html[data-skin="woodsy"] .shop-hero .stat:first-child{background:linear-gradient(160deg,#fff8ef,#e8f0e6)}

/* ========== 3. Minimal — whitespace + mono ========== */
html[data-skin="minimal"]{
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --bg:#fafafa; --card:#ffffff; --card-2:#f5f5f5; --label:#111111; --label-2:#737373; --label-3:#a3a3a3;
  --sep:rgba(0,0,0,.08); --fill:rgba(0,0,0,.04); --fill-2:rgba(0,0,0,.08); --press:rgba(0,0,0,.03);
  --bar:rgba(250,250,250,.9); --sheet:#fafafa; --alert:rgba(255,255,255,.98);
  --teal:#171717; --teal-fill:#171717; --teal-text:#171717; --teal-tint:rgba(23,23,23,.08);
  --orange:#525252; --orange-text:#404040; --orange-tint:rgba(64,64,64,.1);
  --red:#b91c1c; --red-fill:#b91c1c; --red-tint:rgba(185,28,28,.1);
  --gblue:#262626;
  --shadow:none;
  --r-card:8px; --r-ctl:8px;
}
html[data-skin="minimal"] body.admin{letter-spacing:0}
html[data-skin="minimal"] .adm-h1{font-weight:500;letter-spacing:-.05em;font-size:36px}
html[data-skin="minimal"] .stat-val,.adm-bar-title,.nm{font-variant-numeric:tabular-nums;font-family:var(--mono);font-weight:500}
html[data-skin="minimal"] .stat,.ios-group,.cam-card,.dcard{
  border:1px solid var(--sep);box-shadow:none;border-radius:8px;
}
html[data-skin="minimal"] .seg{background:transparent;border:1px solid var(--sep);border-radius:8px;padding:0}
html[data-skin="minimal"] .seg button{border-radius:0;font-weight:500}
html[data-skin="minimal"] .seg button[aria-pressed="true"]{background:#111;color:#fff;box-shadow:none}
html[data-skin="minimal"] .abtn-primary,.abtn-confirm{background:#111;box-shadow:none;border-radius:8px}
html[data-skin="minimal"] .pill,.badge,.tab-badge{background:#111;border-radius:4px}
html[data-skin="minimal"] .pill-pending{background:#f5f5f5;color:#404040}
html[data-skin="minimal"] .pill-confirmed,.pill-handled{background:#f5f5f5;color:#171717}
html[data-skin="minimal"] .av{border-radius:4px;background:#171717!important}
html[data-skin="minimal"] .ios-h{text-transform:none;letter-spacing:0;font-family:var(--mono);font-weight:500;font-size:12px}
html[data-skin="minimal"] .tabbar button[aria-selected="true"]{color:#111}
html[data-skin="minimal"] .accent-teal .stat-val,html[data-skin="minimal"] .accent-orange .stat-val{color:#111}
html[data-skin="minimal"] .svc{color:#525252;font-weight:500}

/* ========== 4. Industrial Diesel — steel + amber ========== */
html[data-skin="diesel"]{
  --font:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
  --bg:#1a1d21; --card:#24282e; --card-2:#2e333a; --label:#e8eaed; --label-2:#9aa3ad; --label-3:#6b737b;
  --sep:rgba(255,255,255,.1); --fill:rgba(255,255,255,.08); --fill-2:rgba(255,255,255,.14); --press:rgba(255,255,255,.05);
  --bar:rgba(26,29,33,.88); --sheet:#1a1d21; --alert:rgba(36,40,46,.97);
  --teal:#26b3b1; --teal-fill:#1a8f8d; --teal-text:#4fd6d3; --teal-tint:rgba(38,179,177,.18);
  --orange:#f59e0b; --orange-text:#fbbf24; --orange-tint:rgba(245,158,11,.16);
  --red:#ff6961; --red-fill:#e5332a; --red-tint:rgba(255,69,58,.18);
  --gblue:#8ab4f8;
  --shadow:0 0 0 .5px rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.35);
  --r-card:10px; --r-ctl:8px;
  color-scheme:dark;
}
html[data-skin="diesel"] body.admin{
  background-color:#15171a;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 2px,rgba(0,0,0,.08) 2px 5px,transparent 5px 18px);
}
html[data-skin="diesel"] .adm-h1{
  font-family:"Arial Narrow",Impact,sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:30px;
}
html[data-skin="diesel"] .ios-h{letter-spacing:.12em;color:#fbbf24}
html[data-skin="diesel"] .stat,.ios-group,.cam-card{
  border:1px solid rgba(251,191,36,.18);background:linear-gradient(180deg,#2a2f36,#22262c);
}
html[data-skin="diesel"] .adm-bar{border-bottom:1px solid rgba(38,179,177,.45)}
html[data-skin="diesel"] .seg{background:rgba(0,0,0,.35);border-radius:6px}
html[data-skin="diesel"] .seg button[aria-pressed="true"]{background:#3b4148;color:#4fd6d3;box-shadow:inset 0 0 0 1px rgba(38,179,177,.4)}
html[data-skin="diesel"] .abtn-primary,.abtn-confirm{background:#26b3b1;color:#05100f!important;border-radius:4px;text-transform:uppercase;letter-spacing:.08em;font-size:15px}
html[data-skin="diesel"] .shop-hero .stat{border-color:rgba(38,179,177,.35)}
html[data-skin="diesel"] .pill-pending{background:rgba(245,158,11,.2);color:#fbbf24}
html[data-skin="diesel"] .tabbar{box-shadow:0 -1px 0 rgba(38,179,177,.35)}
html[data-skin="diesel"] .tabbar button[aria-selected="true"]{color:#4fd6d3}
html[data-skin="diesel"] meta,html[data-skin="diesel"]{color-scheme:dark}

/* ========== 5. Midnight Neon ========== */
html[data-skin="neon"]{
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
  --bg:#07070f; --card:#12121f; --card-2:#1a1a2e; --label:#f5f3ff; --label-2:#a5b4fc; --label-3:#6366f1;
  --sep:rgba(167,139,250,.18); --fill:rgba(139,92,246,.12); --fill-2:rgba(139,92,246,.22); --press:rgba(255,255,255,.05);
  --bar:rgba(7,7,15,.86); --sheet:#07070f; --alert:rgba(18,18,31,.96);
  --teal:#22d3ee; --teal-fill:#06b6d4; --teal-text:#67e8f9; --teal-tint:rgba(34,211,238,.16);
  --orange:#e879f9; --orange-text:#f0abfc; --orange-tint:rgba(232,121,249,.16);
  --red:#fb7185; --red-fill:#f43f5e; --red-tint:rgba(244,63,94,.18);
  --gblue:#818cf8;
  --shadow:0 0 0 1px rgba(34,211,238,.12),0 0 28px rgba(139,92,246,.18);
  --r-card:18px; --r-ctl:12px;
  color-scheme:dark;
}
html[data-skin="neon"] body.admin{
  background:
    radial-gradient(ellipse at 10% -10%,rgba(34,211,238,.18),transparent 42%),
    radial-gradient(ellipse at 90% 0%,rgba(232,121,249,.16),transparent 40%),
    #07070f;
}
html[data-skin="neon"] .adm-h1{
  background:linear-gradient(90deg,#67e8f9,#e879f9);-webkit-background-clip:text;background-clip:text;color:transparent;
}
html[data-skin="neon"] .stat,.ios-group,.cam-card{
  border:1px solid rgba(34,211,238,.2);background:rgba(18,18,31,.92);
  box-shadow:0 0 24px rgba(139,92,246,.12);
}
html[data-skin="neon"] .stat-val{text-shadow:0 0 18px rgba(34,211,238,.35)}
html[data-skin="neon"] .accent-teal .stat-val{color:#67e8f9}
html[data-skin="neon"] .accent-orange .stat-val{color:#f0abfc}
html[data-skin="neon"] .seg{background:rgba(139,92,246,.15);border-radius:999px}
html[data-skin="neon"] .seg button[aria-pressed="true"]{background:linear-gradient(135deg,#06b6d4,#a855f7);color:#fff;box-shadow:0 0 16px rgba(34,211,238,.35)}
html[data-skin="neon"] .abtn-primary,.abtn-confirm{background:linear-gradient(135deg,#06b6d4,#a855f7);box-shadow:0 0 20px rgba(168,85,247,.4)}
html[data-skin="neon"] .pill-pending{background:rgba(232,121,249,.2);color:#f0abfc}
html[data-skin="neon"] .pill-confirmed,.pill-handled{background:rgba(34,211,238,.18);color:#67e8f9}
html[data-skin="neon"] .tabbar button[aria-selected="true"]{color:#67e8f9}
html[data-skin="neon"] .live-dot{background:#22d3ee;box-shadow:0 0 0 3px rgba(34,211,238,.25)}
html[data-skin="neon"] .av-pending{background:linear-gradient(160deg,#e879f9,#a855f7)}
html[data-skin="neon"] .av-confirmed{background:linear-gradient(160deg,#22d3ee,#06b6d4)}

/* Shared sample tweaks */
.sample-pages .adm-page{padding-bottom:100px}
.sample-pages .tabbar{display:block}