/* Alldent — Editorial typography + icon polish.
   THEME-AWARE: uses existing CSS variables so light/dark switching keeps working. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Sidebar polish (preserves theme vars) ────────────────────────── */
.sidebar{ font-family:'Inter','DM Sans','Helvetica Neue',Arial,sans-serif; }

.sb-group{
  font-family:'Inter',sans-serif;
  font-size:9.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  padding:18px 16px 6px;
}

.sb-item{
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:12.5px;
  gap:11px;
  padding:9px 16px;
}
.sb-item.active{ font-weight:600; }
.sb-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px; height:18px;
  font-size:15px;
}
.sb-icon iconify-icon{ font-size:16px; line-height:1; }
.sb-label{ font-size:12.5px; letter-spacing:-.005em; }

/* ── Topbar polish ────────────────────────────────────────────────── */
.topbar{
  font-family:'Inter',sans-serif;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.tb-title{ font-family:'Inter',sans-serif; font-weight:600; letter-spacing:-.01em; }
.tb-title em{ font-style:normal; color:var(--muted); font-weight:400; margin-left:6px; }

.notif-btn, .theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px; height:34px;
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  font-size:0;            /* hides any leftover text-emoji */
  transition:background .15s, color .15s, border-color .15s;
}
.notif-btn:hover, .theme-toggle:hover{
  background:var(--gold-l);
  color:#1A1410;
  border-color:var(--gold-l);
}
.notif-btn iconify-icon, .theme-toggle iconify-icon{
  font-size:16px;
  line-height:1;
  color:inherit;
}

/* ── Card / KPI / Table micro-typography (theme-aware) ─────────────── */
.kpi-l, .field-l{
  font-family:'Inter',sans-serif;
  font-size:9.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
}
.kpi-v{
  font-family:'Inter',sans-serif;
  font-weight:600;
  letter-spacing:-.02em;
}
.tbl thead th{
  font-family:'Inter',sans-serif;
  font-size:9.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--muted);
}
.card-title{ font-family:'Inter',sans-serif; font-weight:600; letter-spacing:-.005em; }

/* ── Card icon: subtle gold-tinted square (theme-aware) ────────────── */
.card-ic{
  background:rgba(196,148,58,.08) !important;
  border:1px solid rgba(196,148,58,.18) !important;
  color:var(--gold-l) !important;
}
.card-ic iconify-icon{ font-size:15px; color:inherit; }

/* ── Buttons: editorial hover-inversion (still theme-aware) ────────── */
.btn{ font-family:'Inter',sans-serif; font-weight:600; letter-spacing:-.005em; }
.btn-solid:hover{ filter:brightness(1.06); }
#dpm-fab, #staff-fab{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:12.5px;
  letter-spacing:-.005em;
}

/* ── Sidebar promo footer ─────────────────────────────────────────── */
#osv-foot{
  font-family:'Inter',sans-serif;
  font-size:10px;
  letter-spacing:.06em;
}

/* ── Iconify default vertical alignment ───────────────────────────── */
iconify-icon{ vertical-align:-2px; }

/* ── Hide the trial banner in free mode ───────────────────────────── */
#ad-trial-banner{ display:none !important; }

/* ── Light-mode refinements (uses existing [data-theme="light"]) ──── */
[data-theme="light"] .sb-icon iconify-icon,
[data-theme="light"] .notif-btn iconify-icon,
[data-theme="light"] .theme-toggle iconify-icon,
[data-theme="light"] .card-ic iconify-icon{
  color:inherit;
}
[data-theme="light"] .notif-btn,
[data-theme="light"] .theme-toggle{
  background:#F5F8FC;
  border-color:rgba(0,0,0,.08);
  color:#1A1410;
}
[data-theme="light"] .notif-btn:hover,
[data-theme="light"] .theme-toggle:hover{
  background:#1A1410;
  color:#F5D9A0;
  border-color:#1A1410;
}

/* ════════════════════════════════════════════════════════════════════
   UI/UX POLISH PASS — additive, theme-aware. Refines the highest-traffic
   surfaces (auth, dashboard cards, modals, inputs, tables, toasts) without
   touching app logic or layout structure.
   ════════════════════════════════════════════════════════════════════ */

/* Smooth focus + motion baseline */
*{ -webkit-tap-highlight-color:transparent; }
a, button, .btn, .sb-item, .card, .kpi, .chip, .pill, .auth-tab{
  transition:background-color .16s ease, border-color .16s ease, color .16s ease,
             box-shadow .18s ease, transform .14s cubic-bezier(.2,.7,.3,1);
}
:focus-visible{ outline:2px solid var(--gold-l,#E8B96A); outline-offset:2px; border-radius:6px; }

/* ── Auth / login card refinement ─────────────────────────────────── */
.auth-card{
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset !important;
  border-radius:20px !important;
}
.auth-card input{ transition:border-color .15s, box-shadow .15s, background .15s; }
.auth-card input:focus{ box-shadow:0 0 0 3px rgba(201,151,61,.18); }
.auth-btn{ box-shadow:0 8px 24px rgba(201,151,61,.28); }
.auth-btn:hover{ transform:translateY(-1px); }
.auth-btn:active{ transform:translateY(0); }
.auth-tab{ font-family:'Inter',sans-serif; font-weight:600; }

/* ── Sidebar item hover/active depth ──────────────────────────────── */
.sb-item{ border-radius:9px; }
.sb-item:hover{ background:var(--glass,rgba(255,255,255,.05)); }
.sb-item.active{
  background:linear-gradient(90deg,rgba(201,151,61,.16),rgba(201,151,61,.04));
  box-shadow:inset 2px 0 0 var(--gold-l,#E8B96A);
}
.sb-icon iconify-icon{ color:var(--gold-l,#E8B96A); }

/* ── Cards: softer elevation + hover lift ─────────────────────────── */
.card{ border-radius:16px; transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .16s; }
.card:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(0,0,0,.28); border-color:rgba(201,151,61,.28); }
.card-ic{ border-radius:11px; display:inline-flex; align-items:center; justify-content:center; }
.card-head{ align-items:center; }

/* ── KPI numbers: tighter, more editorial ─────────────────────────── */
.kpi{ border-radius:14px; }
.kpi:hover{ border-color:rgba(201,151,61,.3); }
.kpi-v{ font-feature-settings:"tnum" 1; }

/* ── Buttons: consistent radius + press feedback ──────────────────── */
.btn{ border-radius:10px; }
.btn:active{ transform:translateY(1px); }
.btn-solid{ box-shadow:0 6px 18px rgba(201,151,61,.22); }
.btn-solid:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(201,151,61,.3); }

/* ── Inputs / selects: unified focus ring ─────────────────────────── */
.inp, input, select, textarea{ transition:border-color .15s, box-shadow .15s, background .15s; }
.inp:focus, input:focus, select:focus, textarea:focus{
  border-color:var(--gold,#C9973D);
  box-shadow:0 0 0 3px rgba(201,151,61,.16);
  outline:none;
}

/* ── Modals: deeper backdrop + entrance ───────────────────────────── */
.modal-overlay, .modal-bg{ backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.modal, .modal-card{ border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.5); animation:dp-pop .22s cubic-bezier(.2,.8,.3,1); }
@keyframes dp-pop{ from{ opacity:0; transform:translateY(10px) scale(.99); } to{ opacity:1; transform:none; } }
.modal-close{ border-radius:8px; transition:background .15s, color .15s; }
.modal-close:hover{ background:var(--glass,rgba(255,255,255,.06)); color:var(--text); }

/* ── Tables: calmer rows, clearer hover ───────────────────────────── */
.tbl tbody tr{ transition:background .12s; }
.tbl tbody tr:hover{ background:var(--glass,rgba(255,255,255,.04)); }
.tbl td, .tbl th{ vertical-align:middle; }

/* ── Toast: refine + icon coloring ────────────────────────────────── */
.toast{ border-radius:12px; box-shadow:0 16px 44px rgba(0,0,0,.4); }
.toast iconify-icon{ vertical-align:-2px; }

/* ── Status mark icon colors (from converted glyphs) ──────────────── */
.mat-ic iconify-icon{ color:inherit; }
.mat-ok iconify-icon, .ok iconify-icon{ color:var(--green,#3AB87A); }
.mat-err iconify-icon{ color:#E05050; }
.cph-allergy iconify-icon, .allergy iconify-icon{ color:#E0A14C; }

/* ── Empty states: gentler ────────────────────────────────────────── */
.empty-state .es-icon iconify-icon{ color:var(--muted); opacity:.6; }

/* ── Custom scrollbars (dark + light) ─────────────────────────────── */
*{ scrollbar-width:thin; scrollbar-color:rgba(201,151,61,.4) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:rgba(201,151,61,.32); border-radius:8px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(201,151,61,.5); background-clip:content-box; }
*::-webkit-scrollbar-track{ background:transparent; }

/* ── Reduced motion respect ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, .card, .btn, .auth-btn, .modal, .modal-card{ transition:none !important; animation:none !important; }
}

/* ── Inline-SVG icon system (self-contained, no CDN) ──────────────── */
.dp-ic{ display:inline-block; vertical-align:-2px; flex:none; }
.sb-icon .dp-ic{ color:var(--gold-l,#E8B96A); }
.sb-item.active .sb-icon .dp-ic{ color:var(--gold-l,#E8B96A); }
.card-ic .dp-ic{ color:inherit; }
.notif-btn .dp-ic, .theme-toggle .dp-ic{ color:inherit; }
.fab .dp-ic, .fab-icon .dp-ic{ color:inherit; }
.hint-icon .dp-ic{ color:var(--gold-l,#E8B96A); }
.wa-av .dp-ic{ color:#9FE1CB; }
.mat-ic .dp-ic{ color:inherit; }
.mat-ok .dp-ic, .ok .dp-ic{ color:var(--green,#3AB87A); }
.mat-err .dp-ic{ color:#E05050; }
.es-icon .dp-ic{ color:var(--muted); opacity:.55; }
/* status/rating glyphs converted inside running text inherit text color */
.cph-allergy .dp-ic, .allergy .dp-ic, .hint-icon .dp-ic{ vertical-align:-3px; }