/* ============================================================
   OPENDOTT CUSTOM ERP — stylesheet
   Faithful to the generated design (OD Shell): liquid-glass, cool neutrals,
   TEAL default with a 4-palette switcher (teal/navy/indigo/maroon), full
   light + dark mode. Styles both the app shell (.od-*) and the content
   components the modules use (.card, table.data, .btn, .badge, .form-grid…).
   ============================================================ */
:root{
  /* BRAND — themeable. app.js swaps --primary/--primary-dark per palette. Default = TEAL. */
  --primary:#0E6B61; --primary-dark:#0A4E46;
  --primary-light:color-mix(in srgb,var(--primary) 9%,transparent); --primary-12:color-mix(in srgb,var(--primary) 13%,transparent);
  --secondary:#C9A227; --secondary-dark:#977A1D; --on-primary:#FFFFFF;
  /* NEUTRALS — cool off-white to pair with teal/navy/indigo + gold */
  --cream:#F3F5F6; --cream-dark:#E7EBED; --bg:#eef1f2; --card:#ffffff;
  --text:#16201f; --text-muted:#79827f; --border:#E1E6E7;
  --green:#0E6A3B; --red:#C42348; --amber:#A05A00; --sky:#1A4F8A;
  --series-1:#1a4f8a; --series-2:#0e6a3b; --series-3:#a05a00; --series-4:#5b2faa; --series-5:#34455c;
  --tone-rose-bg:#FDE7EC; --tone-rose-fg:#C42348; --tone-amber-bg:#FFF1D6; --tone-amber-fg:#A05A00;
  --tone-emerald-bg:#DFF6E6; --tone-emerald-fg:#0E6A3B; --tone-sky-bg:#E1EEFE; --tone-sky-fg:#1A4F8A;
  --tone-violet-bg:#ECE1FB; --tone-violet-fg:#5B2FAA; --tone-slate-bg:#E6E8EC; --tone-slate-fg:#34455C;
  --shadow-0:0 1px 2px rgba(0,0,0,.04); --shadow-1:0 2px 8px rgba(15,40,45,.06); --shadow-2:0 6px 16px rgba(15,40,45,.07);
  --shadow-lift:0 14px 32px -12px color-mix(in srgb,var(--primary) 22%,transparent),0 2px 6px rgba(0,0,0,.04);
  --shadow-pop:0 20px 48px -14px rgba(15,30,40,.3),0 4px 12px rgba(0,0,0,.08);
  --shadow-modal:0 36px 80px -22px rgba(10,25,30,.5),0 10px 28px rgba(0,0,0,.12);
  --shadow-sidebar:8px 0 36px -10px color-mix(in srgb,var(--primary) 26%,transparent);
  --ease:cubic-bezier(.4,0,.2,1);
  --glass-bg:linear-gradient(155deg,rgba(255,255,255,.74),rgba(255,255,255,.44));
  --glass-card:linear-gradient(155deg,rgba(255,255,255,.84),rgba(255,255,255,.6));
  --glass-border:rgba(255,255,255,.65); --glass-hi:rgba(255,255,255,.9);
  --app-bg:radial-gradient(ellipse at 0% 0%,color-mix(in srgb,var(--primary) 9%,transparent) 0%,transparent 52%),radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--secondary) 7%,transparent) 0%,transparent 48%),radial-gradient(ellipse at 100% 100%,color-mix(in srgb,var(--primary) 7%,transparent) 0%,transparent 55%),linear-gradient(160deg,#f6f8f9 0%,#eef2f3 45%,#e6ecee 100%);
}
html.dark{
  --cream:#1f1d1c; --cream-dark:#181615; --bg:#121211; --card:#1d1b1a;
  --text:#f1efec; --text-muted:#9a958f; --border:#2e2a27;
  --primary-light:color-mix(in srgb,var(--primary) 26%,transparent); --primary-12:color-mix(in srgb,var(--primary) 28%,transparent);
  --tone-rose-bg:#3A1620; --tone-rose-fg:#F7A8B8; --tone-amber-bg:#3A2A10; --tone-amber-fg:#F2C879;
  --tone-emerald-bg:#10301F; --tone-emerald-fg:#7FE0A6; --tone-sky-bg:#142C44; --tone-sky-fg:#9CC4F2;
  --tone-violet-bg:#241640; --tone-violet-fg:#C3A8F0; --tone-slate-bg:#22272E; --tone-slate-fg:#A8B4C4;
  --glass-bg:linear-gradient(155deg,rgba(58,53,50,.66),rgba(34,30,28,.44));
  --glass-card:linear-gradient(155deg,rgba(54,49,46,.72),rgba(32,29,27,.52));
  --glass-border:rgba(255,255,255,.10); --glass-hi:rgba(255,255,255,.12);
  --shadow-modal:0 40px 90px -22px rgba(0,0,0,.7),0 10px 28px rgba(0,0,0,.4);
  --app-bg:radial-gradient(ellipse at 0% 0%,color-mix(in srgb,var(--primary) 20%,transparent) 0%,transparent 55%),radial-gradient(ellipse at 100% 100%,color-mix(in srgb,var(--secondary) 12%,transparent) 0%,transparent 55%),linear-gradient(160deg,#16140f 0%,#131110 60%,#0e0d0c 100%);
}
*{box-sizing:border-box}*::before,*::after{box-sizing:border-box}
*{font-family:'Inter',system-ui,sans-serif}
html,body{margin:0;padding:0;height:100%}
img,svg{display:block;max-width:100%}
body{background:var(--app-bg);background-attachment:fixed;color:var(--text);min-height:100vh}
a{color:var(--primary)}
::selection{background:var(--primary-12)}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
.tnum,.mono{font-variant-numeric:tabular-nums}
.muted{color:var(--text-muted)}.right{text-align:right}.center{text-align:center}
.flex{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.spacer{flex:1}
.section-title{font-size:15px;font-weight:700;margin:6px 0 12px}
.lbl{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted)}

/* glass utilities */
.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--glass-border)}
.glass-top{background:linear-gradient(180deg,color-mix(in srgb,var(--cream) 80%,transparent),color-mix(in srgb,var(--cream-dark) 60%,transparent));-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
.accent-bar{position:fixed;top:0;left:0;right:0;z-index:60;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary),var(--primary-dark))}

/* ── app shell : sidebar ─────────────────────────────────── */
.od-sidebar{position:fixed;left:0;top:3px;bottom:0;z-index:50;width:72px;background:var(--glass-bg);-webkit-backdrop-filter:blur(26px) saturate(185%);backdrop-filter:blur(26px) saturate(185%);border-radius:0 28px 28px 0;box-shadow:var(--shadow-sidebar),inset -1px 0 0 var(--glass-hi),inset 1px 1px 0 var(--glass-hi);display:flex;flex-direction:column;transition:width .26s var(--ease);overflow:hidden}
.od-sidebar.expanded,.od-sidebar:hover{width:240px}
.od-fade{transition:opacity .18s}
.od-sidebar:not(.expanded):not(:hover) .od-fade{opacity:0;pointer-events:none}
.od-sidebar:hover .od-nav-section{opacity:1;height:auto;padding:13px 10px 3px}
.od-sidebar:hover .od-nav-item{flex-direction:row;justify-content:flex-start;gap:13px;padding:0 14px}
.od-sidebar:hover .od-nav-label{font-size:13px}
.od-brand{display:flex;align-items:center;gap:12px;height:62px;padding:0 16px;flex-shrink:0}
.od-brand-logo{width:36px;height:36px;border-radius:11px;background:linear-gradient(160deg,color-mix(in srgb,var(--primary) 88%,white),var(--primary));color:var(--on-primary);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;flex-shrink:0;box-shadow:0 4px 12px -3px color-mix(in srgb,var(--primary) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.od-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 8px}
.od-nav::-webkit-scrollbar{width:0}
.od-nav-section{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;opacity:0;height:0;overflow:hidden;transition:opacity .18s}
.od-sidebar.expanded .od-nav-section{opacity:1;height:auto;padding:13px 10px 3px}
.od-nav-item{position:relative;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:12px;color:var(--text-muted);text-decoration:none;cursor:pointer;transition:background .15s,color .15s;margin-bottom:2px;outline:none}
.od-nav-item:hover{background:var(--cream);color:var(--text)}
.od-nav-item:focus-visible{box-shadow:0 0 0 3px var(--primary-12)}
.od-sidebar.expanded .od-nav-item{flex-direction:row;justify-content:flex-start;gap:13px;padding:0 14px}
.od-nav-icon{font-size:17px;width:22px;text-align:center;flex-shrink:0}
.od-nav-label{font-size:9px;font-weight:600;white-space:nowrap}
.od-sidebar.expanded .od-nav-label{font-size:13px}
.od-nav-item.active{background:var(--primary-light);color:var(--primary);font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
html.dark .od-nav-item.active{color:color-mix(in srgb,var(--primary) 35%,white)}
.od-nav-item.active::before{content:'';position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:0 3px 3px 0;background:var(--primary)}
.od-foot{border-top:1px solid var(--border);padding:8px;flex-shrink:0;position:relative}
.od-foot-btn{display:flex;align-items:center;gap:12px;width:100%;padding:8px;border-radius:11px;border:none;background:transparent;cursor:pointer;color:var(--text);text-decoration:none}
.od-foot-btn:hover{background:var(--cream)}
.od-pin{width:26px;height:26px;border-radius:7px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;flex-shrink:0}
.od-pin:hover{background:var(--cream);color:var(--primary)}
.od-avatar{width:30px;height:30px;border-radius:9px;background:linear-gradient(160deg,color-mix(in srgb,var(--primary) 88%,white),var(--primary));color:var(--on-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.od-store-pop{position:absolute;bottom:100%;left:8px;right:8px;margin-bottom:6px;background:var(--glass-card);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);border:1px solid var(--glass-border);border-radius:14px;box-shadow:var(--shadow-pop),inset 0 1px 0 var(--glass-hi);padding:6px;z-index:70;display:none}
.od-store-pop.open{display:block}
.od-store-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:12.5px;text-decoration:none;color:var(--text)}
.od-store-row:hover{background:var(--cream)}
.od-store-row.cur{background:var(--primary-light);color:var(--primary)}

/* ── app shell : main + topbar ───────────────────────────── */
.od-main{margin-left:84px;min-height:100vh;display:flex;flex-direction:column}
.glass-top.topbar{position:sticky;top:3px;z-index:40;border-bottom:1px solid var(--border);padding:13px clamp(16px,2.4vw,40px);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.crumbs{font-size:12px;color:var(--text-muted);margin-bottom:3px}
.crumbs a,.crumbs b{color:var(--primary);font-weight:600;text-decoration:none}
.crumbs span{margin:0 5px;opacity:.5}
.page-title{font-size:19px;font-weight:700;line-height:1.1;margin:0}
.page-desc{font-size:12.5px;color:var(--text-muted);margin-top:3px}
.menu-toggle{display:none;background:none;border:none;color:var(--text);font-size:20px;cursor:pointer}
.od-cmdk-trigger{display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text-muted);font-size:12.5px;cursor:pointer;min-width:200px}
.od-cmdk-trigger:hover{border-color:var(--primary)}.od-cmdk-trigger span{flex:1;text-align:left}
.od-kbd{font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px;background:var(--cream-dark);color:var(--text-muted);border:1px solid var(--border)}
.od-icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;position:relative}
.od-icon-btn:hover{background:var(--cream);color:var(--text)}
.od-theme-switch{display:inline-flex;background:var(--cream);border:1px solid var(--border);border-radius:10px;padding:2px;gap:2px}
.od-theme-switch button{width:34px;height:32px;border:none;background:transparent;border-radius:8px;color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:13px;transition:all .15s}
.od-theme-switch button.on{background:var(--card);color:var(--primary);box-shadow:var(--shadow-0)}
.od-pal-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 11px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text-muted);cursor:pointer;font-size:12px;font-weight:600}
.od-pal-btn:hover{border-color:var(--primary)}
.od-pal-sw{width:15px;height:15px;border-radius:5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 1px rgba(0,0,0,.06);flex-shrink:0}
.od-pal-pop{position:absolute;top:100%;right:0;margin-top:8px;width:188px;background:var(--glass-card);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--glass-border);border-radius:13px;box-shadow:var(--shadow-pop),inset 0 1px 0 var(--glass-hi);padding:6px;z-index:90;display:none}
.od-pal-pop.open{display:block}
.od-pal-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:13px;color:var(--text)}
.od-pal-row:hover{background:var(--cream)}.od-pal-row.on{background:var(--primary-light);color:var(--primary);font-weight:700}

/* command palette */
.od-cmdk-overlay{position:fixed;inset:0;z-index:100;background:rgba(10,20,25,.4);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding-top:12vh}
.od-cmdk-overlay.open{display:flex}
.od-cmdk-panel{width:min(560px,92vw);background:var(--glass-card);-webkit-backdrop-filter:blur(26px) saturate(185%);backdrop-filter:blur(26px) saturate(185%);border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--shadow-pop),inset 0 1px 0 var(--glass-hi);overflow:hidden}
.od-cmdk-input{flex:1;border:none;outline:none;background:transparent;font-size:15px;color:var(--text)}
.od-cmdk-list{max-height:50vh;overflow-y:auto;padding:6px}
.od-cmdk-group{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);padding:10px 10px 4px}
.od-cmdk-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;font-size:13.5px;cursor:pointer;color:var(--text);text-decoration:none}
.od-cmdk-item.sel,.od-cmdk-item:hover{background:var(--primary-light);color:var(--primary)}
html.dark .od-cmdk-item.sel{color:color-mix(in srgb,var(--primary) 35%,white)}

/* ── content components (used by all modules) ────────────── */
.content{padding:clamp(16px,2.4vw,32px);flex:1;min-width:0}
.card{background:var(--glass-card);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--shadow-1),inset 0 1px 0 var(--glass-hi);transition:box-shadow .25s var(--ease);margin-bottom:18px;overflow:hidden}
.card:hover{box-shadow:var(--shadow-lift),inset 0 1px 0 var(--glass-hi)}
.card-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.card-title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.card-title i{color:var(--primary)}
.card-body{padding:16px 18px}
.icon-chip,.kpi-icon{width:32px;height:32px;border-radius:10px;background:var(--primary-light);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.grid{display:grid;gap:16px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}

/* KPI */
.kpi{background:var(--glass-card);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);border:1px solid var(--glass-border);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-1),inset 0 1px 0 var(--glass-hi);transition:box-shadow .2s,transform .2s}
.kpi:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.kpi-top{display:flex;align-items:center;justify-content:space-between}
.kpi-label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px}
.kpi-value{font-size:26px;font-weight:800;letter-spacing:-.5px}
.kpi-delta{font-size:11.5px;font-weight:600}.kpi-delta.up{color:var(--green)}.kpi-delta.down{color:var(--red)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:600;padding:9px 14px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:all .15s var(--ease);min-height:38px;white-space:nowrap;text-decoration:none;font-family:inherit}
.btn:active{transform:scale(.98)}.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-primary{background:linear-gradient(160deg,color-mix(in srgb,var(--primary) 92%,white),var(--primary));color:var(--on-primary);box-shadow:0 4px 12px -3px color-mix(in srgb,var(--primary) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{background:var(--primary-dark)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text-muted)}.btn-ghost:hover{background:var(--cream);color:var(--text)}
.btn-secondary{background:var(--card);color:var(--primary);border-color:var(--border)}.btn-secondary:hover{background:var(--primary-light)}
.btn-danger{background:#fee2e2;color:#b91c1c}.btn-danger:hover{background:#dc2626;color:#fff}
.btn-success{background:var(--green);color:#fff}
.btn-sm{padding:6px 10px;font-size:12px;min-height:32px}.btn-lg{padding:11px 18px;font-size:14px;min-height:44px}
.btn-block{width:100%}

/* forms */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.form-grid.cols-3{grid-template-columns:repeat(3,1fr)}.form-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.form-group{display:flex;flex-direction:column;gap:5px;min-width:0}
.span-2{grid-column:span 2}.span-3{grid-column:span 3}.span-full{grid-column:1/-1}
label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px}
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=hidden]),
select,textarea,.field{width:100%;font-size:13px;padding:9px 11px;border-radius:9px;border:1px solid var(--border);background:var(--card);color:var(--text);font-family:inherit;outline:none;transition:border .15s,box-shadow .15s;line-height:1.4}
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=hidden]):focus,
select:focus,textarea:focus,.field:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-12)}
input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:.7}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2379827f' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
textarea{resize:vertical;min-height:64px}
.req::after{content:' *';color:var(--red)}
.toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.toggle input{display:none}
.toggle-track{width:38px;height:21px;border-radius:21px;background:var(--border);position:relative;transition:background .2s;flex-shrink:0}
.toggle-track::after{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle input:checked+.toggle-track{background:var(--primary)}.toggle input:checked+.toggle-track::after{transform:translateX(17px)}

/* tables */
.table-wrap{overflow-x:auto;border-radius:16px}
table.data{width:100%;border-collapse:collapse}
table.data th{padding:10px 14px;font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;text-align:left;background:color-mix(in srgb,var(--cream) 70%,transparent);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1;white-space:nowrap}
table.data td{padding:11px 14px;font-size:13px;font-weight:500;border-top:1px solid var(--border);vertical-align:middle}
table.data tbody tr:hover td{background:var(--cream)}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.toolbar .search{flex:1;min-width:200px;position:relative}
.toolbar .search i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:13px}
.toolbar .search input{padding-left:32px}

/* badges (support BOTH .badge.<tone> [modules] and .badge-<tone> [shell]) */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;letter-spacing:.2px;text-transform:uppercase}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.rose,.badge-rose{background:var(--tone-rose-bg);color:var(--tone-rose-fg)}
.badge.amber,.badge-amber{background:var(--tone-amber-bg);color:var(--tone-amber-fg)}
.badge.emerald,.badge-emerald{background:var(--tone-emerald-bg);color:var(--tone-emerald-fg)}
.badge.sky,.badge-sky{background:var(--tone-sky-bg);color:var(--tone-sky-fg)}
.badge.violet,.badge-violet{background:var(--tone-violet-bg);color:var(--tone-violet-fg)}
.badge.slate,.badge-slate{background:var(--tone-slate-bg);color:var(--tone-slate-fg)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--cream);border:1px solid var(--border);font-size:12px;font-weight:600}
.beta-pill{font-size:10px;background:var(--tone-amber-bg);color:var(--tone-amber-fg);padding:2px 7px;border-radius:5px;letter-spacing:.6px;font-weight:700}
.pill-tabs{display:inline-flex;background:var(--cream);border-radius:10px;padding:3px;gap:2px}
.pill-tabs a{padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;color:var(--text-muted)}
.pill-tabs a.active{background:var(--card);color:var(--primary);box-shadow:var(--shadow-0)}

/* alerts / toasts / licence banner */
.alert{display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:12px;font-size:13px;font-weight:600;margin-bottom:14px;border:1px solid transparent}
.alert-success{background:var(--tone-emerald-bg);color:var(--tone-emerald-fg)}
.alert-error{background:var(--tone-rose-bg);color:var(--tone-rose-fg)}
.alert-warn{background:var(--tone-amber-bg);color:var(--tone-amber-fg)}
.alert-info{background:var(--tone-sky-bg);color:var(--tone-sky-fg)}
.lic-banner{display:flex;align-items:center;gap:10px;background:var(--tone-amber-bg);color:var(--tone-amber-fg);border:1px solid color-mix(in srgb,var(--tone-amber-fg) 25%,transparent);padding:11px 16px;border-radius:12px;font-size:13px;font-weight:600;margin-bottom:16px}
.lic-banner a{margin-left:auto;background:var(--tone-amber-fg);color:#fff;padding:5px 12px;border-radius:8px;text-decoration:none;font-size:12px;white-space:nowrap}
#toasts{position:fixed;top:18px;right:18px;z-index:999;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 18px;border-radius:12px;font-size:13px;font-weight:600;box-shadow:var(--shadow-pop);background:var(--card);border-left:4px solid var(--primary);animation:fadeUp .25s var(--ease)}
.toast.success{border-color:var(--green)}.toast.error{border-color:var(--red)}

/* modal / drawer */
.modal-backdrop{position:fixed;inset:0;background:rgba(10,20,25,.45);backdrop-filter:blur(3px);z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
.modal-backdrop.open{display:flex}
.modal{background:var(--card);border-radius:16px;box-shadow:var(--shadow-modal);width:100%;max-width:560px;max-height:90vh;overflow:auto;animation:popIn .2s var(--ease)}
.modal.lg{max-width:880px}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-weight:700}
.modal-body{padding:18px 20px}.modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}
.drawer-backdrop{position:fixed;inset:0;background:rgba(10,20,25,.45);z-index:300;display:none}
.drawer-backdrop.open{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(580px,94vw);background:var(--card);box-shadow:var(--shadow-modal);z-index:301;transform:translateX(100%);transition:transform .28s var(--ease);display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-weight:700}
.drawer-body{padding:18px 20px;overflow:auto;flex:1}.drawer-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px}
.icon-btn{width:32px;height:32px;border-radius:9px;border:1px solid var(--border);background:var(--card);cursor:pointer;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{color:var(--primary);border-color:var(--primary)}

/* empty / skeleton */
.empty-state{padding:50px 20px;text-align:center;color:var(--text-muted)}
.empty-state i{font-size:36px;margin-bottom:12px;color:var(--border);display:block}
.empty-state h4{color:var(--text);font-size:15px;font-weight:700;margin-bottom:6px}
.skel{position:relative;overflow:hidden;background:var(--border);border-radius:8px;height:14px}
.skel::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--card) 60%,transparent),transparent);animation:shimmer 1.3s infinite}

/* POS */
.pos-wrap{display:grid;grid-template-columns:1fr 380px;gap:16px;align-items:start}
.pos-cart{background:var(--glass-card);border:1px solid var(--glass-border);border-radius:16px;display:flex;flex-direction:column;min-height:60vh;-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%)}
.pos-total{font-size:30px;font-weight:800;letter-spacing:-1px}
.pos-key{padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--card);font-weight:700;cursor:pointer;text-align:center}
.pos-key:hover{background:var(--primary-light);border-color:var(--primary-light);color:var(--primary)}
.store-switch{padding:7px 10px;border:1px solid var(--border);border-radius:10px;font-size:13px;font-family:inherit;background:var(--card);color:var(--text);font-weight:600}

/* animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fade-up{animation:fadeUp .28s var(--ease)}
@keyframes popIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* footer */
.app-footer{padding:18px 28px 24px;text-align:center;font-size:11px;color:var(--text-muted);margin-top:20px;border-top:1px solid var(--border)}
.app-footer a{color:var(--primary);text-decoration:none;font-weight:600}

/* responsive */
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}.pos-wrap{grid-template-columns:1fr}}
@media (max-width:1024px){.form-grid,.form-grid.cols-3,.form-grid.cols-4,.grid-3{grid-template-columns:1fr}}
@media (max-width:768px){
  .od-sidebar{transform:translateX(-110%);border-radius:0;width:240px}
  .od-sidebar.mobileopen{transform:none}
  .od-main{margin-left:0!important}
  .menu-toggle{display:block}.od-pin{display:none}
  .grid-2,.grid-4{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.od-sidebar,.glass-top,.accent-bar,.app-footer,.no-print{display:none!important}.od-main{margin-left:0!important}.content{padding:0!important}body{background:#fff}.card{box-shadow:none;border:none;background:#fff}}