/* ============================================================
   ZECUS ERP — Executive Slate theme
   Bridges Bootstrap 5.3 to the design system in Docs/DESIGN.md.
   Reference look: Docs/code.html (Tailwind) re-implemented here.
   ============================================================ */

:root {
  /* Surfaces */
  --zx-canvas:#f8fafc;
  --zx-surface:#ffffff;
  --zx-subdued:#f1f5f9;
  /* Borders */
  --zx-border:#e2e8f0;
  --zx-border-strong:#cbd5e1;
  /* Text */
  --zx-text:#0f172a;
  --zx-text-2:#334155;
  --zx-muted:#64748b;
  --zx-faint:#94a3b8;
  /* Accents / semantics */
  --zx-primary:#2563eb;
  --zx-primary-hover:#1d4ed8;
  --zx-primary-50:#eff6ff;
  --zx-primary-100:#dbeafe;
  --zx-success:#10b981;
  --zx-success-text:#047857;
  --zx-success-50:#ecfdf5;
  --zx-success-100:#d1fae5;
  --zx-teal:#0d9488;
  --zx-teal-50:#f0fdfa;
  --zx-warning:#f59e0b;
  --zx-warning-text:#b45309;
  --zx-warning-50:#fffbeb;
  --zx-critical:#ef4444;
  --zx-critical-text:#b91c1c;
  --zx-critical-50:#fef2f2;
  --zx-indigo:#6366f1;
  --zx-indigo-50:#eef2ff;
  /* Radii */
  --zx-r-control:.25rem;
  --zx-r-card:.5rem;
  --zx-r-lg:.75rem;
  --zx-r-pill:9999px;
  /* Elevation */
  --zx-sh-1:0 1px 2px 0 rgba(15,23,42,.04);
  --zx-sh-2:0 4px 6px -1px rgba(15,23,42,.07),0 2px 4px -2px rgba(15,23,42,.05);
  --zx-sh-3:0 20px 25px -5px rgba(15,23,42,.08),0 8px 10px -6px rgba(15,23,42,.04);
  /* Layout */
  --zx-sidebar-w:17rem;
  --zx-topbar-h:4rem;

  /* Re-point Bootstrap tokens */
  --bs-body-bg:var(--zx-canvas);
  --bs-body-color:var(--zx-text-2);
  --bs-border-color:var(--zx-border);
  --bs-primary:var(--zx-primary);
  --bs-primary-rgb:37,99,235;
  --bs-body-font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bs-body-font-size:14px;
}

/* ---- Base ---- */
body{
  background:var(--zx-canvas);
  color:var(--zx-text-2);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
.zx-heading{font-family:'Plus Jakarta Sans','Inter',sans-serif;}
.zx-mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.zx-tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;vertical-align:middle;}

/* ============================================================
   APP SHELL
   ============================================================ */
.zx-app{min-height:100vh;background:var(--zx-canvas);}

/* Sidebar */
.zx-sidebar{
  position:fixed;left:0;top:0;bottom:0;width:17rem;
  background:var(--zx-surface);border-right:1px solid var(--zx-border);
  display:flex;flex-direction:column;z-index:1030;
  box-shadow:0 1px 4px rgba(0,0,0,.04);user-select:none;
}
.zx-sidebar__brand{
  height:var(--zx-topbar-h);display:flex;align-items:center;gap:.5rem;
  padding:0 1rem;border-bottom:1px solid var(--zx-subdued);
}
.zx-logo{
  width:2rem;height:2rem;border-radius:.5rem;flex:0 0 auto;
  background:linear-gradient(135deg,var(--zx-primary),#1e40af);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Plus Jakarta Sans';font-weight:700;font-size:1rem;
  box-shadow:var(--zx-sh-1);
}
.zx-sidebar__nav{flex:1 1 auto;overflow-y:auto;padding:.75rem .5rem;}
.zx-sidebar__nav::-webkit-scrollbar{width:0;}
.zx-nav-group{margin-bottom:.75rem;}
.zx-nav-group__title{
  padding:.5rem .5rem .125rem;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--zx-faint);
}
.zx-nav-link{
  display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;margin-bottom:2px;
  border-radius:.5rem;color:var(--zx-text-2);text-decoration:none;
  font-size:13px;font-weight:500;transition:background .12s,color .12s;
}
.zx-nav-link .material-symbols-outlined{font-size:20px;color:var(--zx-faint);flex:0 0 auto;}
.zx-nav-link:hover{background:var(--zx-subdued);color:var(--zx-text);}
.zx-nav-link.active{background:var(--zx-primary-50);color:var(--zx-primary);font-weight:600;}
.zx-nav-link.active .material-symbols-outlined{color:var(--zx-primary);}

.zx-sidebar__footer{
  padding:.5rem;border-top:1px solid var(--zx-border);
  background:rgba(248,250,252,.7);display:flex;flex-direction:column;gap:.5rem;
}

/* Industry switcher */
.zx-switcher{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:.5rem .625rem;border:1px solid var(--zx-border);border-radius:.5rem;
  background:var(--zx-surface);color:var(--zx-text);cursor:pointer;
  box-shadow:var(--zx-sh-1);transition:background .12s;
}
.zx-switcher:hover{background:var(--zx-subdued);}
.zx-switcher__ind{display:flex;align-items:center;gap:.5rem;min-width:0;}
.zx-switcher__badge{
  width:1.75rem;height:1.75rem;border-radius:.375rem;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:#fff;
}

/* Main region */
.zx-main{margin-left:var(--zx-sidebar-w);display:flex;flex-direction:column;min-height:100vh;}

/* Topbar */
.zx-topbar{
  position:fixed;top:0;left:var(--zx-sidebar-w);right:0;height:var(--zx-topbar-h);
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--zx-border);z-index:1020;
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  padding:0 1.25rem;box-shadow:0 1px 3px rgba(0,0,0,.02);
}
.zx-search{
  display:flex;align-items:center;flex:1;background:var(--zx-canvas);
  border:1px solid var(--zx-border);border-radius:.75rem;padding:.4rem .625rem;
  transition:border .12s,box-shadow .12s;
}
.zx-search:focus-within{border-color:var(--zx-primary);box-shadow:0 0 0 2px rgba(37,99,235,.12);}
.zx-search input{border:0;background:transparent;outline:0;width:100%;font-size:13px;color:var(--zx-text);}
.zx-kbd{
  padding:.125rem .375rem;background:rgba(148,163,184,.25);color:var(--zx-muted);
  border-radius:.25rem;font-size:11px;font-variant-numeric:tabular-nums;
}
.zx-content{flex:1;padding:calc(var(--zx-topbar-h) + 1.5rem) 1.25rem 2rem;}

/* ============================================================
   PANELS / CARDS
   ============================================================ */
.zx-panel{
  background:var(--zx-surface);border:1px solid var(--zx-border);
  border-radius:var(--zx-r-card);box-shadow:var(--zx-sh-1);
}
.zx-panel--pad{padding:1.25rem;}

/* KPI card */
.zx-kpi{
  position:relative;overflow:hidden;background:var(--zx-surface);
  border:1px solid var(--zx-border);border-radius:var(--zx-r-card);
  padding:.75rem;box-shadow:var(--zx-sh-1);height:100%;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:box-shadow .15s;
}
.zx-kpi:hover{box-shadow:var(--zx-sh-2);}
.zx-kpi__glow{position:absolute;right:-2rem;top:-2rem;width:7rem;height:7rem;border-radius:9999px;filter:blur(2rem);pointer-events:none;opacity:.6;}
.zx-kpi__label{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:var(--zx-faint);
}
.zx-kpi__icon{
  width:2rem;height:2rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.zx-metric{
  font-family:'Plus Jakarta Sans';font-weight:700;font-size:30px;line-height:36px;
  letter-spacing:-.025em;color:var(--zx-text);font-variant-numeric:tabular-nums;
}

/* Headings scale */
.zx-h-xl{font-family:'Plus Jakarta Sans';font-weight:700;font-size:1.75rem;line-height:2.25rem;letter-spacing:-.02em;color:var(--zx-text);}
.zx-h-lg{font-family:'Plus Jakarta Sans';font-weight:600;font-size:1.5rem;line-height:2rem;letter-spacing:-.015em;color:var(--zx-text);}
.zx-h-md{font-family:'Plus Jakarta Sans';font-weight:600;font-size:1.25rem;line-height:1.75rem;letter-spacing:-.01em;color:var(--zx-text);}
.zx-h-sm{font-family:'Plus Jakarta Sans';font-weight:600;font-size:1rem;line-height:1.5rem;color:var(--zx-text);}
.zx-text-muted{color:var(--zx-muted)!important;}
.zx-text-faint{color:var(--zx-faint)!important;}
.zx-body-sm{font-size:12px;line-height:18px;}
.zx-label-sm{font-size:11px;line-height:14px;font-weight:600;}

/* ============================================================
   PILLS / CHIPS / BADGES
   ============================================================ */
.zx-pill{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.125rem .5rem;border-radius:var(--zx-r-pill);
  font-size:11px;font-weight:700;border:1px solid transparent;
  font-variant-numeric:tabular-nums;
}
.zx-pill .material-symbols-outlined{font-size:14px;}
.zx-pill--success{background:var(--zx-success-50);color:var(--zx-success-text);border-color:var(--zx-success-100);}
.zx-pill--warning{background:var(--zx-warning-50);color:var(--zx-warning-text);border-color:#fde68a;}
.zx-pill--critical{background:var(--zx-critical-50);color:var(--zx-critical-text);border-color:#fecaca;}
.zx-pill--info{background:var(--zx-primary-50);color:var(--zx-primary);border-color:var(--zx-primary-100);}
.zx-pill--teal{background:var(--zx-teal-50);color:var(--zx-teal);border-color:#99f6e4;}
.zx-pill--indigo{background:var(--zx-indigo-50);color:#4338ca;border-color:#c7d2fe;}
.zx-pill--neutral{background:var(--zx-subdued);color:var(--zx-text-2);border-color:var(--zx-border);}

.zx-dot{width:.5rem;height:.5rem;border-radius:9999px;display:inline-block;flex:0 0 auto;}

/* Live sync dot */
.zx-ping{position:relative;display:inline-flex;width:.5rem;height:.5rem;}
.zx-ping::before{content:"";position:absolute;inset:0;border-radius:9999px;background:var(--zx-success);opacity:.75;animation:zx-ping 1.4s cubic-bezier(0,0,.2,1) infinite;}
.zx-ping::after{content:"";position:relative;width:.5rem;height:.5rem;border-radius:9999px;background:var(--zx-success);}
@keyframes zx-ping{75%,100%{transform:scale(2.2);opacity:0;}}

/* ============================================================
   BUTTONS (executive)
   ============================================================ */
.zx-btn{
  display:inline-flex;align-items:center;gap:.375rem;border-radius:.75rem;
  font-size:13px;font-weight:600;padding:.4rem .75rem;cursor:pointer;
  border:1px solid transparent;transition:all .12s;line-height:1;
  text-decoration:none;
}
/* Buttons rendered as anchors (<a class="zx-btn">) must never look or behave
   like hyperlinks — kill Bootstrap's reboot underline in every state. */
.zx-btn,.zx-btn:hover,.zx-btn:focus,.zx-btn:active,.zx-btn:visited{text-decoration:none;}
.zx-btn .material-symbols-outlined{font-size:18px;}
.zx-btn--primary{background:var(--zx-primary);color:#fff;box-shadow:var(--zx-sh-1);}
.zx-btn--primary:hover{background:var(--zx-primary-hover);}
.zx-btn--ghost{background:var(--zx-surface);border-color:var(--zx-border);color:var(--zx-text-2);box-shadow:var(--zx-sh-1);}
.zx-btn--ghost:hover{background:var(--zx-canvas);border-color:var(--zx-border-strong);}
.zx-btn--success{background:var(--zx-success);color:#fff;box-shadow:var(--zx-sh-1);}
.zx-btn--success:hover{background:var(--zx-success-text);}
.zx-btn--sm{padding:.25rem .5rem;font-size:11px;border-radius:.5rem;}
.zx-btn:active{transform:scale(.97);}

/* Segmented control */
.zx-segment{display:inline-flex;background:var(--zx-subdued);border:1px solid var(--zx-border);border-radius:.5rem;padding:.125rem;}
.zx-segment button{border:0;background:transparent;color:var(--zx-muted);font-size:11px;font-weight:600;padding:.25rem .625rem;border-radius:.375rem;cursor:pointer;transition:all .12s;}
.zx-segment button.active{background:var(--zx-surface);color:var(--zx-primary);box-shadow:var(--zx-sh-1);}

/* Select control */
.zx-select{
  display:inline-flex;align-items:center;gap:.375rem;background:var(--zx-surface);
  border:1px solid var(--zx-border);border-radius:.75rem;padding:.4rem .625rem;
  box-shadow:var(--zx-sh-1);font-size:13px;font-weight:500;color:var(--zx-text);
}
.zx-select select{border:0;background:transparent;outline:0;font-size:13px;font-weight:500;color:var(--zx-text);cursor:pointer;}

/* ============================================================
   PROGRESS
   ============================================================ */
.zx-progress{width:100%;height:.375rem;background:var(--zx-subdued);border-radius:9999px;overflow:hidden;}
.zx-progress--lg{height:.625rem;background:var(--zx-border);}
.zx-progress__bar{height:100%;border-radius:9999px;background:var(--zx-primary);}
.zx-progress__bar--success{background:var(--zx-success);}
.zx-progress__bar--info{background:var(--zx-primary);}
.zx-progress__bar--critical{background:var(--zx-critical);}
.zx-progress__bar--teal{background:var(--zx-teal);}
.zx-progress__bar--grad{background:linear-gradient(90deg,var(--zx-primary),var(--zx-teal));}

/* ============================================================
   DATA TABLE
   ============================================================ */
.zx-table{width:100%;border-collapse:collapse;}
.zx-table thead th{
  background:var(--zx-canvas);color:var(--zx-muted);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:.625rem .75rem;text-align:left;border-bottom:1px solid var(--zx-border);white-space:nowrap;
}
.zx-table tbody td{padding:.625rem .75rem;border-bottom:1px solid var(--zx-subdued);font-size:13px;color:var(--zx-text-2);}
.zx-table tbody tr:hover{background:var(--zx-canvas);}
.zx-table tbody tr:last-child td{border-bottom:0;}
.zx-table__wrap{overflow-x:auto;border:1px solid var(--zx-border);border-radius:var(--zx-r-lg);}

/* Reusable per-table search (TableSearch component) — top-right above the table */
.zx-table-search-row{display:flex;justify-content:flex-end;margin-bottom:.75rem;}
.zx-table-search{flex:0 1 auto;}
.zx-table-search input{width:14rem;max-width:100%;}
.zx-avatar-sq{width:1.5rem;height:1.5rem;border-radius:.25rem;background:var(--zx-subdued);border:1px solid var(--zx-border);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--zx-text-2);}

.zx-tile{padding:.5rem;border-radius:.5rem;background:var(--zx-canvas);border:1px solid var(--zx-subdued);}

/* Permission matrix cells */
.zx-perm{display:inline-flex;align-items:center;justify-content:center;min-width:3.75rem;padding:.125rem .5rem;border-radius:var(--zx-r-pill);font-size:11px;font-weight:700;text-transform:capitalize;border:1px solid transparent;}
.zx-perm--full{background:var(--zx-success-50);color:var(--zx-success-text);border-color:var(--zx-success-100);}
.zx-perm--write{background:var(--zx-primary-50);color:var(--zx-primary);border-color:var(--zx-primary-100);}
.zx-perm--read{background:var(--zx-warning-50);color:var(--zx-warning-text);border-color:#fde68a;}
.zx-perm--none{background:var(--zx-subdued);color:var(--zx-faint);border-color:var(--zx-border);}

/* ============================================================
   POS / RESTAURANT / KDS
   ============================================================ */
/* POS product tile */
.zx-pos-tile{
  display:flex;flex-direction:column;justify-content:space-between;gap:.5rem;
  padding:.75rem;height:6rem;text-align:left;cursor:pointer;
  background:var(--zx-surface);border:1px solid var(--zx-border);
  border-radius:var(--zx-r-card);box-shadow:var(--zx-sh-1);transition:all .12s;width:100%;
}
.zx-pos-tile:hover{border-color:var(--zx-primary);box-shadow:var(--zx-sh-2);transform:translateY(-1px);}
.zx-pos-tile:active{transform:scale(.98);}
.zx-pos-tile__icon{width:2rem;height:2rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;}

/* Floor-plan table tile */
.zx-floor-tile{
  position:relative;display:flex;flex-direction:column;gap:.25rem;justify-content:space-between;
  padding:.75rem;min-height:6.5rem;border-radius:var(--zx-r-card);cursor:pointer;
  border:1.5px solid var(--zx-border);background:var(--zx-surface);transition:all .12s;box-shadow:var(--zx-sh-1);
}
.zx-floor-tile:hover{transform:translateY(-1px);box-shadow:var(--zx-sh-2);}
.zx-floor-tile--available{border-color:var(--zx-success-100);background:var(--zx-success-50);}
.zx-floor-tile--occupied{border-color:var(--zx-primary-100);background:var(--zx-primary-50);}
.zx-floor-tile--reserved{border-color:#fde68a;background:var(--zx-warning-50);}
.zx-floor-tile--billing{border-color:#99f6e4;background:var(--zx-teal-50);}
.zx-floor-tile__seats{position:absolute;top:.5rem;right:.5rem;font-size:11px;color:var(--zx-muted);display:flex;align-items:center;gap:2px;}

/* KDS ticket */
.zx-kds-col{background:var(--zx-subdued);border:1px solid var(--zx-border);border-radius:var(--zx-r-card);padding:.75rem;}
.zx-kds-ticket{background:var(--zx-surface);border:1px solid var(--zx-border);border-radius:var(--zx-r-card);box-shadow:var(--zx-sh-1);overflow:hidden;}
.zx-kds-ticket__head{padding:.5rem .75rem;display:flex;align-items:center;justify-content:between;border-bottom:1px solid var(--zx-subdued);}

/* ============================================================
   FORMS
   ============================================================ */
.zx-field{display:flex;flex-direction:column;gap:.25rem;}
.zx-label{font-size:12px;font-weight:600;color:var(--zx-text-2);}
.zx-label .req{color:var(--zx-critical);}
.zx-hint{font-size:11px;color:var(--zx-faint);}
.zx-input,.zx-textarea,.zx-select-field{
  width:100%;height:2.5rem;padding:0 .625rem;font-size:14px;color:var(--zx-text);
  background:var(--zx-surface);border:1px solid var(--zx-border);border-radius:var(--zx-r-control);
  outline:0;transition:border .12s,box-shadow .12s;font-family:inherit;
}
.zx-textarea{height:auto;min-height:5rem;padding:.5rem .625rem;resize:vertical;}
.zx-input::placeholder,.zx-textarea::placeholder{color:var(--zx-faint);}
.zx-input:focus,.zx-textarea:focus,.zx-select-field:focus{border-color:var(--zx-primary);box-shadow:0 0 0 3px rgba(37,99,235,.15);}
.zx-input:disabled{background:var(--zx-subdued);color:var(--zx-muted);}
.zx-input-group{display:flex;align-items:center;border:1px solid var(--zx-border);border-radius:var(--zx-r-control);background:var(--zx-surface);overflow:hidden;}
.zx-input-group:focus-within{border-color:var(--zx-primary);box-shadow:0 0 0 3px rgba(37,99,235,.15);}
.zx-input-group .zx-addon{padding:0 .625rem;color:var(--zx-muted);background:var(--zx-subdued);align-self:stretch;display:flex;align-items:center;font-size:13px;border-right:1px solid var(--zx-border);}
.zx-input-group .zx-input{border:0;box-shadow:none;height:2.375rem;}
.zx-input-group .zx-input:focus{box-shadow:none;}

/* Toggle switch */
.zx-switch{position:relative;width:2.25rem;height:1.25rem;border-radius:9999px;background:var(--zx-border-strong);cursor:pointer;transition:background .15s;flex:0 0 auto;border:0;}
.zx-switch::after{content:"";position:absolute;top:2px;left:2px;width:1rem;height:1rem;border-radius:9999px;background:#fff;transition:transform .15s;box-shadow:var(--zx-sh-1);}
.zx-switch.on{background:var(--zx-primary);}
.zx-switch.on::after{transform:translateX(1rem);}

/* ============================================================
   TABS (detail pages)
   ============================================================ */
.zx-tabs{display:flex;align-items:center;gap:.25rem;border-bottom:1px solid var(--zx-border);}
.zx-tab{padding:.625rem .875rem;font-size:13px;font-weight:600;color:var(--zx-muted);cursor:pointer;background:transparent;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s,border-color .12s;}
.zx-tab:hover{color:var(--zx-text-2);}
.zx-tab.active{color:var(--zx-primary);border-bottom-color:var(--zx-primary);}
.zx-tab__dot{display:inline-block;width:7px;height:7px;border-radius:9999px;background:var(--zx-critical);margin-left:.375rem;vertical-align:middle;}

/* Invalid field highlight (after a failed save attempt) */
.zx-input.zx-invalid,.zx-textarea.zx-invalid,.zx-select-field.zx-invalid{
  border-color:var(--zx-critical);background:var(--zx-critical-50);
}
.zx-input.zx-invalid:focus,.zx-select-field.zx-invalid:focus,.zx-textarea.zx-invalid:focus{
  box-shadow:0 0 0 3px rgba(220,38,38,.15);
}

/* Toast (top-right, auto-dismissing, common across all modules) */
.zx-toast-host{position:fixed;right:1.25rem;top:1.25rem;z-index:1080;display:flex;flex-direction:column;gap:.5rem;max-width:min(92vw,26rem);}
.zx-toast{display:flex;align-items:flex-start;gap:.625rem;padding:.75rem .875rem;border-radius:var(--zx-r-card);
  background:var(--zx-surface);border:1px solid var(--zx-border);box-shadow:var(--zx-sh-3);font-size:13px;color:var(--zx-text-2);
  animation:zx-toast-in .18s ease-out;}
.zx-toast .material-symbols-outlined{font-size:20px;flex:0 0 auto;}
.zx-toast__msg{flex:1 1 auto;min-width:0;line-height:1.35;}
.zx-toast__close{flex:0 0 auto;background:none;border:0;padding:0;margin:-.125rem -.125rem 0 .25rem;cursor:pointer;color:var(--zx-faint);display:inline-flex;}
.zx-toast__close .material-symbols-outlined{font-size:16px;}
.zx-toast__close:hover{color:var(--zx-text-2);}
.zx-toast--error{border-color:#fecaca;}
.zx-toast--error .material-symbols-outlined{color:var(--zx-critical-text);}
.zx-toast--success{border-color:#bbf7d0;}
.zx-toast--success .material-symbols-outlined{color:var(--zx-success-text);}
.zx-toast--info{border-color:var(--zx-primary-100);}
.zx-toast--info .material-symbols-outlined{color:var(--zx-primary);}
.zx-toast--leaving{animation:zx-toast-out .2s ease-in forwards;}
@keyframes zx-toast-in{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
@keyframes zx-toast-out{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-8px);}}

/* Confirmation dialog (common yes/no) */
.zx-confirm-scrim{position:fixed;inset:0;z-index:1090;display:flex;align-items:center;justify-content:center;padding:1rem;
  background:rgba(15,23,42,.45);animation:zx-toast-in .12s ease-out;}
.zx-confirm{width:min(92vw,26rem);background:var(--zx-surface);border:1px solid var(--zx-border);border-radius:var(--zx-r-card);
  box-shadow:var(--zx-sh-3);padding:1.25rem;}
.zx-confirm__title{font-weight:700;font-size:15px;color:var(--zx-text);margin-bottom:.5rem;}
.zx-confirm__body{font-size:13px;color:var(--zx-text-2);line-height:1.45;}
.zx-confirm__actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.25rem;}

/* Danger button (destructive confirm) */
.zx-btn--danger{background:var(--zx-critical);color:#fff;box-shadow:var(--zx-sh-1);}
.zx-btn--danger:hover{background:var(--zx-critical-text);}

/* Colour swatch input */
.zx-color{width:2.5rem;height:2.5rem;padding:2px;border:1px solid var(--zx-border);border-radius:var(--zx-r-control);background:var(--zx-surface);cursor:pointer;}

/* Detail hero avatar */
.zx-hero-avatar{width:3.5rem;height:3.5rem;border-radius:var(--zx-r-card);display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans';font-weight:700;font-size:1.25rem;flex:0 0 auto;}

/* Utility bridges */
.zx-divider{height:1px;background:var(--zx-border);border:0;}
.cursor-pointer{cursor:pointer;}

/* ============================================================
   BATCH LABEL — Download Labels modal, preview & segmented control
   ============================================================ */
.zxl-modal{width:min(96vw,60rem);max-height:92vh;overflow:auto;background:var(--zx-surface);border:1px solid var(--zx-border);
  border-radius:var(--zx-r-card);box-shadow:var(--zx-sh-3);padding:1.25rem;}
.zxl-grid{display:grid;grid-template-columns:1fr 18rem;gap:1.25rem;}
@media (max-width:767.98px){.zxl-grid{grid-template-columns:1fr;}}
/* Segmented 3-way control (barcode format) */
.zxl-seg{display:inline-flex;border:1px solid var(--zx-border);border-radius:var(--zx-r-control);overflow:hidden;background:var(--zx-surface);flex-wrap:wrap;}
.zxl-seg__opt{padding:.4rem .75rem;font-size:13px;font-weight:600;color:var(--zx-text-2);background:transparent;border:0;cursor:pointer;
  border-right:1px solid var(--zx-border);display:inline-flex;align-items:center;gap:.35rem;}
.zxl-seg__opt:last-child{border-right:0;}
.zxl-seg__opt.is-active{background:var(--zx-primary);color:#fff;}
/* Preview surface */
.zxl-preview{background:#f1f5f9;border:1px dashed var(--zx-border);border-radius:var(--zx-r-control);min-height:14rem;
  display:flex;align-items:center;justify-content:center;padding:1rem;overflow:auto;}
.zxl-preview .zxl-single{display:flex;align-items:center;justify-content:center;}
/* A single printed label: real mm dimensions so the preview reflects physical size */
.zxl-label{position:relative;background:#fff;border:1px solid #cbd5e1;box-sizing:border-box;overflow:hidden;}
.zxl-a4{position:relative;background:#fff;border:1px solid #cbd5e1;box-sizing:border-box;}
/* Determinate progress bar + inline spinner (PDF generation) */
.zxl-progress{height:6px;border-radius:999px;background:var(--zx-border);overflow:hidden;}
.zxl-progress__bar{height:100%;background:var(--zx-primary);border-radius:999px;transition:width .15s ease;}
.zx-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:zx-spin .7s linear infinite;}
@keyframes zx-spin{to{transform:rotate(360deg);}}
/* Key/value grid used by the Track Serial Number lookup */
.zxl-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1.5rem;}
@media (max-width:575.98px){.zxl-kv{grid-template-columns:1fr;}}
.zxl-kv__row{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px solid var(--zx-border);font-size:13px;}
.zxl-kv__k{color:var(--zx-text-muted);flex:0 0 auto;}
.zxl-kv__v{color:var(--zx-text);font-weight:600;text-align:right;word-break:break-word;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1279.98px){
  :root{--zx-sidebar-w:0px;}
  .zx-sidebar{transform:translateX(-100%);transition:transform .2s;}
  .zx-sidebar.show{transform:translateX(0);box-shadow:var(--zx-sh-3);}
  .zx-topbar{left:0;}
  .zx-main{margin-left:0;}
  /* dim backdrop when the mobile drawer is open */
  .zx-scrim{position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:1025;}
}
@media (min-width:1280px){ .zx-scrim{display:none;} }

/* ---- Compact input + attendance-import preview rows ---- */
.zx-input--sm{padding:.25rem .4rem;font-size:12px;min-height:1.9rem;}
.zx-table tr.zx-row--error > td{background:var(--zx-critical-50);}
.zx-table tr.zx-row--dup > td{background:var(--zx-warning-50);}