/* =====================================================================
   Ivory Gifts ERP — Premium theme (approved sample, Oct 2026)
   Loaded LAST, after app.css and the feature stylesheets.
   VISUAL ONLY: colours, corners, shadows, type and motion. It never
   changes layout, sizes of the grid, display/position of page parts,
   or anything an element does — so no screen, form or button moves.

   Look: iOS — system font (SF on Apple devices, Geist elsewhere), true
   black dark mode with grey cards, Apple-grey light mode with white
   cards, one champagne "Ivory" accent; green/red for paid/unpaid.
   ===================================================================== */

:root{
  --iv-accent:#D4B47A;--iv-accent-ink:#1A1408;--iv-accent-tint:rgba(212,180,122,.16);
  --iv-card:#1C1C1E;--iv-card2:#2C2C2E;--iv-field:#2C2C2E;
  --iv-text:#F5F5F7;--iv-text2:#A1A1A6;--iv-text3:#636366;
  --iv-green:#30D158;--iv-green-text:#4CD964;--iv-green-tint:rgba(48,209,88,.16);
  --iv-red:#FF453A;--iv-red-text:#FF6961;--iv-red-tint:rgba(255,69,58,.16);
  --iv-amber-text:#FFB340;--iv-amber-tint:rgba(255,159,10,.16);
  --iv-blue-text:#64A8FF;--iv-blue-tint:rgba(10,132,255,.18);
  --iv-primary:linear-gradient(180deg,#E8CF9C 0%,#C9A462 100%);--iv-primary-ink:#1A1408;
  --iv-primary-shadow:0 8px 24px rgba(201,164,98,.32),inset 0 1px 0 rgba(255,255,255,.5);
  --iv-card-shadow:0 1px 0 rgba(255,255,255,.03),0 18px 40px rgba(0,0,0,.35);
  --iv-glass:rgba(255,255,255,.08);--iv-ring:rgba(212,180,122,.45);
  --iv-spring:cubic-bezier(.34,1.56,.64,1);--iv-ease:cubic-bezier(.2,.8,.2,1);
  --iv-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Geist,"Segoe UI Variable","Segoe UI",system-ui,sans-serif;

  /* existing ERP tokens, re-pointed */
  --ink:#F5F5F7;--muted:#A1A1A6;--ivory:#000000;--paper:#1C1C1E;--line:rgba(255,255,255,.08);
  --brown:#D4B47A;--brown2:#B8955A;--gold:#D4B47A;--green:#30D158;--red:#FF453A;--blue:#64A8FF;
  --shadow:0 18px 40px rgba(0,0,0,.35);
  --surface:#1C1C1E;--surface-strong:rgba(22,22,24,.82);--surface-topbar:rgba(0,0,0,.72);--surface-input:#2C2C2E;
  --hover-tint:rgba(255,255,255,.04);--badge-base:rgba(118,118,128,.24);--text-strong:#FFFFFF;
  --nav-icon:#C7C7CC;--nav-muted:#8E8E93;--card-glow:transparent;--btn-base:rgba(255,255,255,.08);
  --dialog-bg:rgba(28,28,30,.96);--dialog-backdrop:rgba(0,0,0,.55);
}
[data-theme="light"]{
  --iv-accent:#8A6A2F;--iv-accent-ink:#FFFFFF;--iv-accent-tint:rgba(138,106,47,.12);
  --iv-card:#FFFFFF;--iv-card2:#F2F2F7;--iv-field:#F2F2F7;
  --iv-text:#1D1D1F;--iv-text2:#6E6E73;--iv-text3:#AEAEB2;
  --iv-green:#34C759;--iv-green-text:#1F7A35;--iv-green-tint:rgba(52,199,89,.14);
  --iv-red:#FF3B30;--iv-red-text:#C4001A;--iv-red-tint:rgba(255,59,48,.12);
  --iv-amber-text:#9A5B00;--iv-amber-tint:rgba(255,149,0,.14);
  --iv-blue-text:#0060DF;--iv-blue-tint:rgba(0,122,255,.10);
  --iv-primary:#1D1D1F;--iv-primary-ink:#FFFFFF;
  --iv-primary-shadow:0 8px 22px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.12);
  --iv-card-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.05);
  --iv-glass:rgba(255,255,255,.9);--iv-ring:rgba(138,106,47,.30);

  --ink:#1D1D1F;--muted:#6E6E73;--ivory:#F2F2F7;--paper:#FFFFFF;--line:rgba(0,0,0,.08);
  --brown:#8A6A2F;--brown2:#6F5424;--gold:#8A6A2F;--green:#1F7A35;--red:#C4001A;--blue:#0060DF;
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --surface:#FFFFFF;--surface-strong:rgba(255,255,255,.78);--surface-topbar:rgba(242,242,247,.78);--surface-input:#FFFFFF;
  --hover-tint:rgba(0,0,0,.025);--badge-base:rgba(118,118,128,.12);--text-strong:#000000;
  --nav-icon:#3A3A3C;--nav-muted:#8E8E93;--card-glow:transparent;--btn-base:#FFFFFF;
  --dialog-bg:rgba(255,255,255,.97);--dialog-backdrop:rgba(0,0,0,.28);
}

/* ---------- Base ---------- */
html{font-family:var(--iv-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{background:var(--ivory);transition:background-color .45s ease,color .45s ease}
[data-theme="light"] body{background:var(--ivory)}
a{color:var(--iv-accent)}
::selection{background:var(--iv-accent-tint)}
h1,h2,h3{letter-spacing:-.02em}
.amount,.amount-cell,.stat strong,td.amount{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------- Sidebar & top bar (frosted glass) ---------- */
.sidebar{background:var(--surface-strong);backdrop-filter:saturate(180%) blur(28px);-webkit-backdrop-filter:saturate(180%) blur(28px);border-right:1px solid var(--line)}
.brand{border-bottom-color:var(--line)}
.brand-mark{background:linear-gradient(145deg,#E9D3A3,#B08A4E);color:#1A1408;border-radius:12px;box-shadow:0 6px 18px rgba(176,138,78,.35);letter-spacing:-.03em}
.brand small{letter-spacing:0;text-transform:none;font-size:11.5px}
.nav p{letter-spacing:0;text-transform:none;font-size:12px;font-weight:600;color:var(--nav-muted)}
.nav a{border-radius:12px;color:var(--nav-icon);font-weight:500;transition:background-color .25s ease,color .25s ease,transform .3s var(--iv-spring)}
.nav a:hover{background:var(--hover-tint);color:var(--text-strong)}
.nav a:active{transform:scale(.97)}
.nav a.active,[data-theme="light"] .nav a.active{background:var(--iv-accent-tint);color:var(--iv-accent);box-shadow:none;font-weight:600}
.sidebar-user{border-top-color:var(--line)}
.sidebar-user-avatar{background:linear-gradient(145deg,#E9D3A3,#B08A4E);color:#1A1408}
.topbar{background:var(--surface-topbar);backdrop-filter:saturate(180%) blur(28px);-webkit-backdrop-filter:saturate(180%) blur(28px);border-bottom:1px solid var(--line)}
.topbar h1{font-weight:700;letter-spacing:-.03em}
.mobile-nav{background:var(--surface-strong);backdrop-filter:saturate(180%) blur(28px);-webkit-backdrop-filter:saturate(180%) blur(28px)}
.theme-toggle{background:var(--btn-base);border-color:var(--line);transition:transform .35s var(--iv-spring),background-color .3s ease}
.theme-toggle:hover{background:var(--iv-accent-tint);color:var(--iv-accent)}
.theme-toggle:active{transform:scale(.9) rotate(-20deg)}

/* ---------- Cards & numbers ---------- */
.card,.stat,[data-theme="light"] .card,[data-theme="light"] .stat{background:var(--iv-card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--iv-card-shadow);backdrop-filter:none;-webkit-backdrop-filter:none;transition:background-color .45s ease,border-color .45s ease,box-shadow .3s ease,transform .35s var(--iv-spring)}
a.stat:hover,.stat-link:hover{transform:translateY(-2px)}
a.stat:active,.stat-link:active{transform:scale(.98)}
.card h2,.card-header h2{font-weight:700;letter-spacing:-.02em}
.stat small{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--iv-text2)}
.stat strong{font-weight:700;letter-spacing:-.03em}
.stat em{color:var(--iv-accent);font-weight:600}
.kpi-good,[data-theme="light"] .kpi-good{color:var(--iv-green-text)}
.kpi-bad,[data-theme="light"] .kpi-bad{color:var(--iv-red-text)}
.muted{color:var(--iv-text2)}
.empty{color:var(--iv-text2)}

/* ---------- Buttons ---------- */
.btn,.theme-toggle,.dialog-close{-webkit-tap-highlight-color:transparent}
.btn{border-color:transparent;border-radius:999px;background:var(--btn-base);color:var(--ink);font-weight:600;letter-spacing:-.005em;box-shadow:inset 0 0 0 1px var(--line);transition:transform .35s var(--iv-spring),box-shadow .3s ease,background-color .3s ease,color .3s ease}
[data-theme="light"] .btn{box-shadow:inset 0 0 0 1px var(--line),0 2px 8px rgba(0,0,0,.04)}
.btn:hover{filter:none;transform:translateY(-1px)}
.btn:active{transform:scale(.96);transition-duration:.12s}
.btn:focus-visible,.theme-toggle:focus-visible,.nav a:focus-visible{outline:2px solid var(--iv-accent);outline-offset:3px}
.btn.primary,[data-theme="light"] .btn.primary{position:relative;overflow:hidden;background:var(--iv-primary);color:var(--iv-primary-ink);box-shadow:var(--iv-primary-shadow)}
.btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.btn.primary:hover::after{animation:iv-sheen .9s cubic-bezier(.4,0,.2,1) 1 forwards}
.btn.success{background:var(--iv-green);color:#04210F;box-shadow:0 6px 18px rgba(48,209,88,.25)}
.btn.danger{background:var(--iv-red-tint);color:var(--iv-red-text);box-shadow:none}
.btn.small{padding:7px 14px;font-size:12.5px}
.btn[disabled],.btn:disabled{opacity:.45;transform:none;cursor:not-allowed}

/* ---------- Status pills & alerts ---------- */
.badge{border-radius:999px;font-weight:700;letter-spacing:0;background:var(--badge-base);color:var(--iv-text)}
.badge.green,[data-theme="light"] .badge.green{background:var(--iv-green-tint);color:var(--iv-green-text)}
.badge.red,[data-theme="light"] .badge.red{background:var(--iv-red-tint);color:var(--iv-red-text)}
.badge.amber,[data-theme="light"] .badge.amber{background:var(--iv-amber-tint);color:var(--iv-amber-text)}
.badge.blue,[data-theme="light"] .badge.blue{background:var(--iv-blue-tint);color:var(--iv-blue-text)}
.alert{border-radius:16px;border:1px solid var(--line);background:var(--iv-card);box-shadow:var(--iv-card-shadow);animation:iv-drop .55s var(--iv-spring) both}
.alert.success,[data-theme="light"] .alert.success{background:var(--iv-green-tint);color:var(--iv-green-text);border-color:transparent}
.alert.danger,[data-theme="light"] .alert.danger{background:var(--iv-red-tint);color:var(--iv-red-text);border-color:transparent}

/* ---------- Forms ---------- */
input,select,textarea{border:1px solid var(--line);border-radius:12px;background:var(--surface-input);color:var(--ink);transition:box-shadow .25s ease,border-color .25s ease,background-color .45s ease}
[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{background:var(--surface-input);box-shadow:0 1px 2px rgba(0,0,0,.03)}
input:focus,select:focus,textarea:focus{border-color:var(--iv-accent);box-shadow:0 0 0 4px var(--iv-ring)}
input::placeholder,textarea::placeholder{color:var(--iv-text3)}
input[type=checkbox],input[type=radio]{accent-color:var(--iv-accent)}
input[type=file]::file-selector-button{border:0;border-radius:999px;padding:7px 14px;margin-right:10px;background:var(--iv-accent-tint);color:var(--iv-accent);font:inherit;font-weight:600;cursor:pointer;transition:transform .3s var(--iv-spring)}
input[type=file]::file-selector-button:active{transform:scale(.95)}
label{color:var(--ink)}

/* ---------- Tables (inset grouped list feel) ---------- */
.table-wrap{border-radius:18px;border-color:var(--line)}
th{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;color:var(--iv-text2);background:transparent;border-bottom:1px solid var(--line)}
td{border-bottom:1px solid var(--line)}
tr:hover td{background:var(--hover-tint);transition:background-color .2s ease}
.mobile-cards tr{border-radius:18px;background:var(--iv-card);box-shadow:var(--iv-card-shadow)}

/* ---------- Popups: pop-in with a spring, blurred backdrop ---------- */
dialog,.quick-dialog{background:var(--dialog-bg);color:var(--ink);border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.45);backdrop-filter:saturate(180%) blur(30px);-webkit-backdrop-filter:saturate(180%) blur(30px)}
[data-theme="light"] dialog,[data-theme="light"] .quick-dialog{box-shadow:0 30px 80px rgba(0,0,0,.18)}
dialog[open],.quick-dialog[open]{animation:iv-pop .42s var(--iv-spring) both}
dialog::backdrop,.quick-dialog::backdrop{background:var(--dialog-backdrop);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:iv-fade .3s ease both}
dialog h2,.quick-dialog h2{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--text-strong)}
.dialog-close{background:var(--badge-base);color:var(--ink);transition:transform .3s var(--iv-spring),background-color .2s ease}
.dialog-close:hover{background:var(--iv-red-tint);color:var(--iv-red-text)}
.dialog-close:active{transform:scale(.88)}
.notif-dropdown,.combo-results{background:var(--dialog-bg);border-color:var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.35);backdrop-filter:saturate(180%) blur(30px);-webkit-backdrop-filter:saturate(180%) blur(30px)}
.notif-dropdown:not([hidden]),.combo-results:not(:empty){animation:iv-menu .32s var(--iv-spring) both;transform-origin:top right}
.notif-badge{background:var(--iv-red);box-shadow:0 0 0 2px var(--ivory);animation:iv-badge 2.4s ease-in-out 1}
.auth-card,[data-theme="light"] .auth-card{background:var(--dialog-bg);border-radius:28px;box-shadow:0 30px 90px rgba(0,0,0,.35);animation:iv-pop .6s var(--iv-spring) both}
.guest,[data-theme="light"] .guest{background:var(--ivory)}

/* ---------- Feature screens (dashboard, deliveries, sync, uploads) ---------- */
.analytics-period,[data-theme="light"] .analytics-period{background:var(--iv-accent-tint);color:var(--iv-accent)}
.key-revenue{background:var(--iv-accent)}
.bar-track i{background:linear-gradient(90deg,#E9D3A3,#B08A4E);transition:width .9s var(--iv-ease)}
a.ai-insight-row:hover{background:var(--hover-tint)}
.ai-insight-icon.blue{background:var(--iv-accent-tint);color:var(--iv-accent)}
.ai-next-action{background:var(--iv-accent-tint);border-color:transparent}
.ai-ring-value{animation:iv-ring 1.4s var(--iv-ease) both}
.delivery-kpis .waiting-stat,.quick-dropdown .waiting-stat{background:var(--iv-accent-tint);border-color:transparent}
.delivery-tabs a.active,[data-theme="light"] .delivery-tabs a.active{color:var(--iv-accent);border-color:var(--iv-accent)}
.delivery-dashboard-table tr:hover td{background:var(--hover-tint)}
.sync-banner{background:var(--iv-primary);color:var(--iv-primary-ink);border-radius:999px;box-shadow:var(--iv-primary-shadow);animation:iv-drop .5s var(--iv-spring) both}
.active>.page-link{background:var(--iv-primary);color:var(--iv-primary-ink);border-color:transparent}
.page-link{border-radius:999px}
.setup-note{background:var(--iv-accent-tint)}
.dropzone-inner{border-radius:16px;transition:border-color .2s ease,background-color .2s ease}
.dropzone-inner:hover{border-color:var(--iv-accent)}
.dropzone-inner.dragover{border-color:var(--iv-accent);background:var(--iv-accent-tint)}
.proof-widget.proof-dragover .proof-chip{border-color:var(--iv-accent);background:var(--iv-accent-tint);color:var(--iv-accent)}

/* ---------- Page entrance (one soft moment per page) ---------- */
.content{animation:iv-page .5s var(--iv-ease) both}

/* ---------- Motion ---------- */
@keyframes iv-sheen{to{transform:translateX(120%)}}
@keyframes iv-pop{0%{opacity:0;transform:translateY(14px) scale(.94)}100%{opacity:1;transform:none}}
@keyframes iv-fade{from{opacity:0}to{opacity:1}}
@keyframes iv-menu{0%{opacity:0;transform:translateY(-6px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes iv-drop{0%{opacity:0;transform:translateY(-10px) scale(.98)}100%{opacity:1;transform:none}}
@keyframes iv-page{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
@keyframes iv-ring{from{stroke-dashoffset:264}}
@keyframes iv-badge{0%,100%{transform:scale(1)}10%{transform:scale(1.25)}20%{transform:scale(.95)}30%{transform:scale(1.08)}40%{transform:scale(1)}}

/* ---------- Native controls readable in both themes ---------- */
:root{color-scheme:dark}
[data-theme="light"]{color-scheme:light}
select option,select optgroup{background-color:#1C1C1E;color:#F5F5F7}
[data-theme="light"] select option,[data-theme="light"] select optgroup{background-color:#FFFFFF;color:#1D1D1F}
::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.85}
.quick-dropdown-panel{background:var(--iv-card);border-color:var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.quick-dropdown-panel:not([hidden]){animation:iv-menu .32s var(--iv-spring) both;transform-origin:top left}
.quick-dropdown-row{border-radius:12px;transition:background-color .2s ease}
.quick-dropdown-row:hover{background:var(--hover-tint)}
.quick-dropdown-trigger{cursor:pointer;text-align:left}

/* ---------- Scrollbars ---------- */
*{scrollbar-width:thin;scrollbar-color:var(--iv-text3) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--iv-text3);border-radius:999px;border:3px solid transparent;background-clip:content-box}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- Print stays plain white ---------- */
@media print{
  .content,.alert,dialog{animation:none!important}
  .card,.stat{box-shadow:none!important;background:#fff!important;border-color:#ddd!important}
}
.quick-dropdown-row .mini-status{min-width:136px}

/* ---------- Workflow colours (status / confirmation / design / priority) ---------- */
select.wf{font-weight:700;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
select.wf.wf-not_confirmed,select.wf.wf-need_designer,select.wf.wf-canceled{background-color:var(--iv-red-tint);color:var(--iv-red-text);border-color:rgba(255,69,58,.45)}
select.wf.wf-waiting_deposit,select.wf.wf-ready{background-color:var(--iv-blue-tint);color:var(--iv-blue-text);border-color:rgba(10,132,255,.45)}
select.wf.wf-confirmed,select.wf.wf-designed,select.wf.wf-delivered{background-color:var(--iv-green-tint);color:var(--iv-green-text);border-color:rgba(48,209,88,.45)}
select.wf.wf-pending{background-color:var(--iv-amber-tint);color:var(--iv-amber-text);border-color:rgba(255,159,10,.45)}
.priority-box.prio-high{color:var(--iv-red-text);border-color:rgba(255,69,58,.5);background:var(--iv-red-tint)}
.priority-box.prio-urgent{color:var(--iv-amber-text);border-color:rgba(255,159,10,.5);background:var(--iv-amber-tint)}
.priority-box.prio-normal{color:var(--iv-green-text);border-color:rgba(48,209,88,.45);background:var(--iv-green-tint)}