/* ═══════════════════════════════════════════════════════════════════════════
   QuantumCals Admin — Zuno bridge (loaded last in app.blade.php, after zuno.css)
   The module views are Bootstrap / Soft UI markup. This file maps that markup
   onto the Zuno design system: tokens (--z-*), 10px-radius buttons, 14px cards,
   uppercase table heads, soft dot badges, Zuno popups, Inter.
   Legacy variable names used by inline styles (--qc-*, --grey, --heading,
   --indigo, --g3 …) are remapped onto the Zuno tokens so every page follows
   the palette and the light / dark theme (<html data-theme>).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Token bridge ────────────────────────────────────────────────────── */
:root, html[data-theme="dark"] {
  --qc-font: var(--z-font);
  --qc-mono: var(--z-mono);
  --qc-paper: var(--z-bg);  --qc-card: var(--z-surface);  --qc-card-2: var(--z-surface-2);  --qc-card-3: var(--z-surface-3);
  --qc-line: var(--z-border);  --qc-line-strong: var(--z-border-strong);
  --qc-ink: var(--z-text);  --qc-text: var(--z-text-2);  --qc-text-2: var(--z-text-2);  --qc-text-3: var(--z-text-3);
  --qc-primary: var(--z-primary);  --qc-primary-hover: var(--z-primary-hover);  --qc-primary-soft: var(--z-primary-soft);  --qc-primary-fg: var(--z-primary-text);
  --qc-confirm-bg: var(--z-primary);  --qc-confirm-hover: var(--z-primary-hover);  --qc-confirm-fg: var(--z-on-primary);
  --qc-success: var(--z-success);  --qc-success-soft: var(--z-success-soft);  --qc-success-fg: var(--z-success-text);
  --qc-warning: var(--z-warning);  --qc-warning-soft: var(--z-warning-soft);  --qc-warning-fg: var(--z-warning-text);
  --qc-danger: var(--z-danger);  --qc-danger-soft: var(--z-danger-soft);  --qc-danger-fg: var(--z-danger-text);
  --qc-info: var(--z-info);  --qc-info-soft: var(--z-info-soft);  --qc-info-fg: var(--z-info-text);
  --qc-overlay: var(--z-overlay);
  --qc-shadow-sm: var(--z-shadow-xs);  --qc-shadow-md: var(--z-shadow-sm);  --qc-shadow-lg: var(--z-shadow-xl);
  --qc-r-sm: var(--z-r-sm);  --qc-r-md: var(--z-r-md);  --qc-r-lg: var(--z-r-lg);  --qc-r-xl: var(--z-r-xl);
  --qc-t: var(--z-t);

  /* legacy names used across the Blade views */
  --white: var(--z-surface); --smoke: var(--z-surface-3); --faint: var(--z-surface-3); --beige: var(--z-border-strong);
  --grey-light: var(--z-surface-2); --grey: var(--z-text-3); --grey-mid: var(--z-text-2); --grey-dark: var(--z-text-2);
  --heading: var(--z-text); --black: var(--z-text); --dark-text: var(--z-text-2); --anthracite: var(--z-text-2);
  --indigo: var(--z-primary); --indigo-dark: var(--z-primary-hover); --indigo-soft: var(--z-primary);
  --text-dark: var(--z-text); --text-muted: var(--z-text-3);
  --bg-page: var(--z-bg); --bg-card: var(--z-surface); --border: var(--z-border); --border-m: var(--z-border-strong);
  --g1: var(--z-surface-2); --g2: var(--z-surface-3); --g3: var(--z-primary-soft); --g4: var(--z-surface-3);
  --sh-sm: var(--z-shadow-xs); --sh-md: var(--z-shadow-sm); --sh-lg: var(--z-shadow-lg);
  --r-xs: var(--z-r-xs); --r-sm: var(--z-r-sm); --r-md: var(--z-r-md); --r-lg: var(--z-r-lg); --r-xl: var(--z-r-xl);
  --font: var(--z-font); --mono: var(--z-mono); --ease: all var(--z-t);

  /* Bootstrap 5 variables */
  --bs-body-font-family: var(--z-font); --bs-body-color: var(--z-text-2); --bs-body-bg: var(--z-bg);
  --bs-border-color: var(--z-border); --bs-primary: var(--z-primary);
}

/* ── 2. Base over Soft UI ───────────────────────────────────────────────── */
body, body.qc-admin, body.bg-gray-100 {
  font-family: var(--z-font) !important; font-size: 14px; line-height: 1.5;
  background: var(--z-bg) !important; color: var(--z-text-2) !important;
}
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands { line-height: 1; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--z-font) !important; color: var(--z-text) !important; font-weight: 650 !important; letter-spacing: -0.015em; line-height: 1.25; }
a { color: var(--z-primary); }
a:hover { color: var(--z-primary-hover); }
hr.horizontal.dark, hr.horizontal, hr { background-image: none !important; background: var(--z-divider) !important; border: 0; opacity: 1; height: 1px; }
.text-dark, .text-black { color: var(--z-text) !important; }
.text-body, .text-secondary, .text-muted { color: var(--z-text-3) !important; }
.text-primary { color: var(--z-primary) !important; }
.text-success { color: var(--z-success-text) !important; }
.text-warning { color: var(--z-warning-text) !important; }
.text-info { color: var(--z-info-text) !important; }
.text-white { color: #fff !important; }
.bg-white { background-color: var(--z-surface) !important; }
.bg-gray-100, .bg-light { background-color: var(--z-surface-2) !important; }
.text-xxs { font-size: 11.5px !important; } .text-xs { font-size: 12.5px !important; } .text-sm { font-size: 13.5px !important; }
.font-weight-bolder { font-weight: 700 !important; } .font-weight-bold { font-weight: 600 !important; }
.mono, code, kbd { font-family: var(--z-mono) !important; font-variant-numeric: tabular-nums; }
.mono { font-size: 0.92em; }
.opacity-7, .opacity-8 { opacity: 1 !important; }

/* ── 3. Shell extras (sidebar badges, page body, account menu) ──────────── */
.zs-brand__mark { background: #fff; padding: 3px; object-fit: contain; }
.zs-item__badge, .zs-sub__badge {
  margin-left: auto; flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 7px; border-radius: var(--z-r-full);
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; line-height: 1;
  background: rgba(240, 68, 56, 0.18); color: #fda29b;
}
.zs-sub__item { display: flex !important; align-items: center; gap: 8px; }
.zs-sub__badge { background: rgba(255, 255, 255, 0.08); color: var(--z-side-text); font-weight: 600; }
.zs-sub__badge.is-alert { background: rgba(240, 68, 56, 0.18); color: #fda29b; }
.zs-sub__badge.is-ok { background: rgba(18, 183, 106, 0.16); color: #6ce9a6; }
.zs-sub[hidden] { display: none !important; }
@media (min-width: 992px) { .zs.is-toggled .zs-item__badge { position: absolute; top: 4px; right: 6px; min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; } }
.zt .dropdown { position: relative; }
.zt-menu-panel { min-width: 210px; margin-top: 6px !important; }
.zt-menu-panel .dropdown-item { display: flex !important; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; text-align: left; }
.zt-menu-panel .dropdown-item i { font-size: 17px; color: var(--z-text-3); }
.zt-menu-panel .dropdown-item.is-danger, .zt-menu-panel .dropdown-item.is-danger i { color: var(--z-danger-text) !important; }
.zt-menu-panel .dropdown-item.active { background: var(--z-primary-soft) !important; color: var(--z-primary-text) !important; }
.z-page { padding-top: 24px; }
.z-page-body { min-width: 0; }
.z-page-body > .container-fluid, .z-page-body > .container, .z-page-body > div > .container-fluid.py-4 { padding: 0 !important; max-width: none; }
.z-page-body > .row, .z-page-body > .container-fluid > .row { --bs-gutter-x: 18px; }
.qc-search { margin-bottom: 18px; }
.qc-search .z-toolbar { border-bottom: 0; }
.qc-search .z-select--sm { width: auto; }
@media (max-width: 640px) { .qc-search .z-toolbar__left > .z-select { flex: 1 1 calc(50% - 5px); min-width: 0; } .qc-search .z-toolbar__right { justify-content: flex-end; } }

/* ── 4. Cards ───────────────────────────────────────────────────────────── */
.card {
  background: var(--z-surface) !important; border: 1px solid var(--z-border) !important; border-radius: var(--z-r-lg) !important;
  box-shadow: var(--z-shadow-xs) !important; color: var(--z-text-2); min-width: 0;
}
.card + .card { margin-top: 18px; }
.card-header {
  background: transparent !important; border-bottom: 1px solid var(--z-divider) !important; padding: 18px 22px !important;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-radius: var(--z-r-lg) var(--z-r-lg) 0 0 !important;
}
.card-header h5, .card-header h6, .card-header .card-title { font-size: 16px !important; font-weight: 650 !important; margin: 0 !important; color: var(--z-text) !important; }
.card-header p { color: var(--z-text-3) !important; font-size: 13px !important; margin-top: 2px !important; }
.card-body { padding: 22px !important; }
.card-body.p-0, .card .card-header + .card-body.p-0 { padding: 0 !important; }
.card-footer {
  background: var(--z-surface-2) !important; border-top: 1px solid var(--z-divider) !important; padding: 14px 22px !important;
  border-radius: 0 0 var(--z-r-lg) var(--z-r-lg) !important;
}
@media (max-width: 640px) { .card-header, .card-body, .card-footer { padding-left: 16px !important; padding-right: 16px !important; } }

/* KPI tiles (home / dashboard) → .z-kpi */
.kpi-card {
  background: var(--z-surface) !important; border: 1px solid var(--z-border) !important; border-radius: var(--z-r-lg) !important;
  padding: 20px !important; box-shadow: var(--z-shadow-xs) !important; position: relative; overflow: hidden;
  transition: box-shadow var(--z-t), border-color var(--z-t), transform var(--z-t);
}
.kpi-card:hover { box-shadow: var(--z-shadow-md) !important; border-color: var(--z-border-strong) !important; transform: translateY(-1px); }
.kpi-icon { width: 40px; height: 40px; border-radius: var(--z-r-md); background: var(--z-primary-soft) !important; border: 0 !important; color: var(--z-primary-text) !important; display: grid; place-items: center; font-size: 18px; }
.kpi-icon i { color: inherit !important; }
.kpi-value { margin-top: 14px; font-size: 30px; font-weight: 700; color: var(--z-text); letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: 13.5px; font-weight: 600; color: var(--z-text-2); text-transform: none; letter-spacing: 0; }

/* ── 5. Tables → .z-table ───────────────────────────────────────────────── */
.table-responsive { border: 0 !important; border-radius: 0 !important; }
.card-body > .table-responsive { border: 1px solid var(--z-border) !important; border-radius: var(--z-r-md) !important; }
.card-body.p-0 > .table-responsive { border: 0 !important; }
.table {
  font-family: var(--z-font) !important; font-size: 14px !important; color: var(--z-text-2) !important; margin: 0 !important;
  --bs-table-bg: transparent; --bs-table-color: var(--z-text-2); --bs-table-hover-bg: var(--z-surface-2); --bs-table-striped-bg: var(--z-surface-2);
  border-color: var(--z-divider) !important;
}
.table thead th, .table > thead > tr > th {
  position: sticky; top: 0; z-index: 1;
  background: var(--z-surface-2) !important; color: var(--z-text-3) !important; opacity: 1 !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important;
  padding: 11px 16px !important; border-top: 0 !important; border-bottom: 1px solid var(--z-border) !important; white-space: nowrap; vertical-align: middle;
}
.table tbody tr { border-bottom: 0 !important; transition: background var(--z-t); }
.table tbody tr:hover { background: var(--z-surface-2) !important; }
.table tbody td, .table > :not(caption) > * > * {
  padding: 14px 16px !important; vertical-align: middle !important; color: var(--z-text-2) !important;
  border-bottom: 1px solid var(--z-divider) !important; background: transparent; box-shadow: none;
}
.table tbody tr:last-child td { border-bottom: 0 !important; }
.table thead tr > *, .table > thead > tr > * { border-bottom: 1px solid var(--z-border) !important; }
.table tbody td p { margin: 0 !important; font-size: 14px !important; color: inherit; }
.table tbody td .text-dark, .table tbody td strong, .table tbody td b { color: var(--z-text) !important; }
.table-light, .thead-light th { background: var(--z-surface-2) !important; color: var(--z-text-3) !important; }
.avatar, .avatar-xs, .avatar-sm { border-radius: var(--z-r-full); }

/* empty state → .z-empty */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 24px; }
.empty-state i {
  display: grid !important; place-items: center; width: 56px; height: 56px; margin: 0 0 16px; line-height: 1;
  border-radius: var(--z-r-lg); background: var(--z-surface-3); color: var(--z-text-3); font-size: 24px;
  box-shadow: inset 0 0 0 1px var(--z-border);
}
.empty-state p { color: var(--z-text) !important; font-size: 16px; font-weight: 650; margin: 0; }
.empty-state small, .empty-state span { margin-top: 6px; font-size: 14px; color: var(--z-text-2); }

/* ── 6. Buttons → .z-btn ────────────────────────────────────────────────── */
.btn {
  --_bg: var(--z-surface); --_fg: var(--z-text); --_bd: var(--z-border-strong); --_bg-h: var(--z-surface-2);
  font-family: var(--z-font) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important;
  text-transform: none !important; height: 40px; padding: 0 16px !important; border-radius: var(--z-r-md) !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; line-height: 1 !important; white-space: nowrap;
  border: 1px solid var(--_bd) !important; background: var(--_bg) !important; background-image: none !important; color: var(--_fg) !important;
  box-shadow: var(--z-shadow-xs) !important; margin-bottom: 0 !important;
  transition: background var(--z-t), border-color var(--z-t), box-shadow var(--z-t), color var(--z-t), transform var(--z-t);
}
.btn i { font-size: 14px !important; margin: 0 !important; color: inherit; }
.btn:hover:not(:disabled) { background: var(--_bg-h) !important; color: var(--_fg) !important; transform: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: 0.55; box-shadow: none !important; }
.btn:focus-visible, .btn:focus { outline: none; box-shadow: var(--z-ring) !important; }
.btn-sm { height: 34px; padding: 0 12px !important; font-size: 13px !important; border-radius: var(--z-r-sm) !important; }
.btn-lg { height: 46px; padding: 0 22px !important; font-size: 15px !important; }
.btn-xs { height: 28px; padding: 0 10px !important; font-size: 12px !important; border-radius: var(--z-r-sm) !important; }
.w-100.btn, .btn-block { width: 100%; }
/* primary (create / save / confirm) */
.btn-primary, .btn.bg-gradient-primary, .btn.qc-btn-create, .btn.qc-btn-confirm, .btn-dark, .btn.bg-gradient-dark, .btn-info, .btn.bg-gradient-info {
  --_bg: var(--z-primary); --_fg: var(--z-on-primary); --_bd: var(--z-primary); --_bg-h: var(--z-primary-hover);
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
/* secondary (cancel / close / utility) */
.btn-light, .btn-secondary, .btn-white, .btn-outline-secondary, .btn-outline-dark, .btn.bg-gradient-secondary, .btn.bg-gradient-light, .btn.qc-btn-dismiss {
  --_bg: var(--z-surface); --_fg: var(--z-text); --_bd: var(--z-border-strong); --_bg-h: var(--z-surface-2);
}
/* soft primary (edit / utility / outline) */
.btn-outline-primary, .btn.qc-btn-utility, .btn.qc-btn-edit, .btn-outline-info {
  --_bg: var(--z-primary-soft); --_fg: var(--z-primary-text); --_bd: transparent; --_bg-h: var(--z-primary-soft-2); box-shadow: none !important;
}
/* danger */
.btn-danger, .btn.bg-gradient-danger, .btn.qc-btn-danger { --_bg: var(--z-danger); --_fg: #fff; --_bd: var(--z-danger); --_bg-h: #d92d20; }
.btn-outline-danger { --_bg: var(--z-surface); --_fg: var(--z-danger-text); --_bd: var(--z-border-strong); --_bg-h: var(--z-danger-soft); }
/* success / warning */
.btn-success, .btn.bg-gradient-success, .btn.qc-btn-success { --_bg: var(--z-success); --_fg: #fff; --_bd: var(--z-success); --_bg-h: #079455; }
.btn-outline-success { --_bg: var(--z-surface); --_fg: var(--z-success-text); --_bd: var(--z-border-strong); --_bg-h: var(--z-success-soft); }
.btn-warning, .btn.bg-gradient-warning { --_bg: var(--z-warning); --_fg: #fff; --_bd: var(--z-warning); --_bg-h: #dc6803; }
.btn-outline-warning { --_bg: var(--z-surface); --_fg: var(--z-warning-text); --_bd: var(--z-border-strong); --_bg-h: var(--z-warning-soft); }
/* ghost */
.btn-link, .btn.qc-btn-ghost { --_bg: transparent; --_fg: var(--z-text-2); --_bd: transparent; --_bg-h: var(--z-surface-3); box-shadow: none !important; text-decoration: none !important; }
.btn + .btn { margin-left: 10px; }
.d-flex > .btn + .btn, .gap-1 > .btn + .btn, .gap-2 > .btn + .btn, .gap-3 > .btn + .btn, .modal-footer > .btn + .btn, .z-page-head__actions > .btn + .btn { margin-left: 0 !important; }
.d-flex.gap-2:has(> .btn) { gap: 10px !important; }
/* typed buttons that don't use .btn */
a[class*="qc-btn-"]:not(.btn), button[class*="qc-btn-"]:not(.btn) {
  font-family: var(--z-font) !important; font-size: 14px !important; font-weight: 600 !important; height: 40px; padding: 0 16px !important;
  border-radius: var(--z-r-md) !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; line-height: 1 !important;
  border: 1px solid var(--z-border-strong) !important; background: var(--z-surface); color: var(--z-text); text-decoration: none !important; cursor: pointer;
  background-image: none !important; box-shadow: var(--z-shadow-xs); transition: background var(--z-t), border-color var(--z-t), color var(--z-t);
}
a.qc-btn-create:not(.btn), button.qc-btn-create:not(.btn), a.qc-btn-confirm:not(.btn), button.qc-btn-confirm:not(.btn) { background: var(--z-primary); border-color: var(--z-primary) !important; color: #fff; }
a.qc-btn-danger:not(.btn), button.qc-btn-danger:not(.btn) { background: var(--z-danger); border-color: var(--z-danger) !important; color: #fff; }
a[class*="qc-btn-"]:not(.btn) i, button[class*="qc-btn-"]:not(.btn) i { font-size: 14px !important; margin: 0 !important; color: inherit; }

/* row actions → .z-icon-btn */
.ia-edit, .ia-delete, .ia-view, .cp-edit-btn {
  width: 34px !important; height: 34px !important; border-radius: var(--z-r-sm) !important; display: inline-grid !important; place-items: center;
  border: 1px solid transparent !important; background: transparent !important; box-shadow: none !important; cursor: pointer; text-decoration: none;
  color: var(--z-text-3) !important; padding: 0 !important; transition: background var(--z-t), color var(--z-t);
}
.ia-edit:hover, .cp-edit-btn:hover, .ia-view:hover { background: var(--z-primary-soft) !important; color: var(--z-primary-text) !important; }
.ia-delete:hover { background: var(--z-danger-soft) !important; color: var(--z-danger-text) !important; }
.ia-edit i, .ia-delete i, .ia-view i, .cp-edit-btn i { font-size: 14px !important; color: inherit !important; }

/* ── 7. Badges → .z-badge ───────────────────────────────────────────────── */
.badge {
  font-family: var(--z-font) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  height: 24px; padding: 0 9px !important; border-radius: var(--z-r-full) !important; display: inline-flex !important; align-items: center; gap: 5px; line-height: 1 !important;
  background: var(--z-neutral-soft) !important; color: var(--z-neutral-text) !important; background-image: none !important; white-space: nowrap; border: 0 !important;
}
.badge.bg-gradient-success, .badge.bg-success { background: var(--z-success-soft) !important; color: var(--z-success-text) !important; }
.badge.bg-gradient-danger, .badge.bg-danger { background: var(--z-danger-soft) !important; color: var(--z-danger-text) !important; }
.badge.bg-gradient-warning, .badge.bg-warning { background: var(--z-warning-soft) !important; color: var(--z-warning-text) !important; }
.badge.bg-gradient-info, .badge.bg-info { background: var(--z-info-soft) !important; color: var(--z-info-text) !important; }
.badge.bg-gradient-primary, .badge.bg-primary { background: var(--z-primary-soft) !important; color: var(--z-primary-text) !important; }
.badge.bg-gradient-secondary, .badge.bg-secondary, .badge.bg-gradient-light, .badge.bg-light, .badge.bg-gradient-dark, .badge.bg-dark { background: var(--z-neutral-soft) !important; color: var(--z-neutral-text) !important; }
.badge.bg-gradient-success::before, .badge.bg-success::before, .badge.bg-gradient-danger::before, .badge.bg-danger::before,
.badge.bg-gradient-warning::before, .badge.bg-warning::before, .badge.bg-gradient-secondary::before, .badge.bg-secondary::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.badge.mono { font-family: var(--z-mono) !important; font-size: 11.5px !important; }
.bg-gradient-primary:not(.btn):not(.badge) { background: var(--z-primary) !important; }
.bg-gradient-success:not(.btn):not(.badge) { background: var(--z-success) !important; }
.bg-gradient-danger:not(.btn):not(.badge) { background: var(--z-danger) !important; }
.bg-gradient-warning:not(.btn):not(.badge) { background: var(--z-warning) !important; }
.bg-gradient-info:not(.btn):not(.badge) { background: var(--z-info) !important; }
.progress { height: 8px !important; border-radius: var(--z-r-full) !important; background: var(--z-surface-3) !important; overflow: hidden; box-shadow: none !important; }
.progress-bar { border-radius: inherit; background: var(--z-primary); height: 100% !important; }

/* ── 8. Forms → .z-input / .z-label ─────────────────────────────────────── */
.form-control, .form-select, select.form-control, .cp-form-control {
  font-family: var(--z-font) !important; font-size: 14px !important; color: var(--z-text) !important;
  background-color: var(--z-surface) !important; border: 1px solid var(--z-border-strong) !important; border-radius: var(--z-r-md) !important;
  min-height: 42px; padding: 0 13px !important; box-shadow: var(--z-shadow-xs) !important;
  transition: border-color var(--z-t), box-shadow var(--z-t), background-color var(--z-t);
}
textarea.form-control, textarea.cp-form-control { min-height: 96px; padding: 11px 13px !important; line-height: 1.5; resize: vertical; }
input[type="file"].form-control { padding: 8px 13px !important; }
.form-select, select.form-control, select.cp-form-control {
  -webkit-appearance: none; appearance: none; padding-right: 38px !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238b93a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 11px center !important; background-size: 18px !important;
}
select[multiple].form-control, select[multiple].form-select { background-image: none !important; padding: 6px 10px !important; }
.form-control:hover:not(:disabled):not(:focus), .form-select:hover:not(:disabled):not(:focus) { border-color: var(--z-text-4) !important; }
.form-control:focus, .form-select:focus, .cp-form-control:focus { border-color: var(--z-primary) !important; box-shadow: var(--z-ring) !important; outline: none !important; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--z-danger) !important; background-image: none !important; }
.form-control.is-invalid:focus { box-shadow: var(--z-ring-danger) !important; }
.form-control::placeholder { color: var(--z-text-3) !important; font-weight: 400 !important; opacity: 1; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--z-surface-2) !important; color: var(--z-text-2) !important; cursor: not-allowed; }
.form-label, .form-control-label, label.form-label, .cp-label, .modal-body label:not(.form-check-label):not(.z-check):not(.z-switch) {
  font-size: 13.5px !important; font-weight: 600 !important; color: var(--z-text) !important; letter-spacing: 0 !important; text-transform: none !important;
  margin-bottom: 6px !important; display: inline-flex; align-items: center; gap: 4px;
}
.form-text, small.text-muted { font-size: 12.5px !important; color: var(--z-text-3) !important; }
.input-group { flex-wrap: nowrap; }
.input-group-text { background: var(--z-surface-2) !important; border: 1px solid var(--z-border-strong) !important; color: var(--z-text-2) !important; border-radius: var(--z-r-md) !important; font-size: 13.5px; min-height: 42px; }
.input-group > .form-control:not(:first-child), .input-group > .input-group-text:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group > .form-control:not(:last-child), .input-group > .input-group-text:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group.focused, .input-group:focus-within { box-shadow: none !important; }
.form-check-input { width: 18px; height: 18px; border: 1px solid var(--z-border-strong) !important; background-color: var(--z-surface) !important; box-shadow: none !important; cursor: pointer; border-radius: 5px; }
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked { background-color: var(--z-primary) !important; border-color: var(--z-primary) !important; }
.form-check-input:focus { box-shadow: var(--z-ring) !important; }
.form-check-label { font-size: 14px; color: var(--z-text); }
.form-switch .form-check-input {
  width: 40px !important; height: 22px !important; border-radius: var(--z-r-full) !important; margin-top: 0; background-color: var(--z-border-strong) !important; border: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !important;
}
.form-switch .form-check-input:checked { background-color: var(--z-primary) !important; }
.form-switch .form-check-input::after { display: none !important; }
.invalid-feedback { color: var(--z-danger-text) !important; font-size: 12.5px; }
.text-danger { color: var(--z-danger-text) !important; }
label .text-danger, .form-label .text-danger { color: var(--z-danger) !important; }
.cp-form-group { margin-bottom: 18px; }
input[type="date"], input[type="datetime-local"], input[type="time"] { color-scheme: light; }
html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="datetime-local"], html[data-theme="dark"] input[type="time"] { color-scheme: dark; }

/* select2 */
.select2-container { font-family: var(--z-font); }
.select2-container .select2-selection--single, .select2-container .select2-selection--multiple {
  min-height: 42px !important; border: 1px solid var(--z-border-strong) !important; border-radius: var(--z-r-md) !important; background: var(--z-surface) !important;
  display: flex !important; align-items: center; padding: 4px 8px; box-shadow: var(--z-shadow-xs);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--z-text) !important; line-height: 1.4 !important; padding-left: 4px !important; font-size: 14px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--z-text-3) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px !important; right: 6px !important; }
.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--open .select2-selection { border-color: var(--z-primary) !important; box-shadow: var(--z-ring) !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--z-primary-soft) !important; color: var(--z-primary-text) !important; border: 0 !important; border-radius: var(--z-r-full) !important; padding: 2px 10px !important; font-size: 12.5px; font-weight: 600; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--z-primary-text) !important; }
.select2-search__field { color: var(--z-text) !important; font-family: var(--z-font) !important; }
.select2-dropdown { background: var(--z-surface) !important; border: 1px solid var(--z-border) !important; border-radius: var(--z-r-md) !important; box-shadow: var(--z-shadow-lg) !important; overflow: hidden; color: var(--z-text); }
.select2-results__option { font-size: 14px; padding: 8px 12px !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--z-primary-soft) !important; color: var(--z-primary-text) !important; }
.select2-container--default .select2-results__option[aria-selected="true"] { background: var(--z-surface-3) !important; }
.select2-search--dropdown .select2-search__field { border: 1px solid var(--z-border-strong) !important; border-radius: var(--z-r-sm); background: var(--z-surface); }

/* ── 9. Pagination ──────────────────────────────────────────────────────── */
.z-pager.custom-pagination { margin: 0 !important; }
.card .z-pager, .z-card .z-pager { border-top: 1px solid var(--z-divider); }
.px-4.py-3:has(> .z-pager), .px-3.py-3:has(> .z-pager), div:has(> .z-pager.custom-pagination):not(.card):not(.z-card):not(.card-body) { padding: 0 !important; border-top: 0 !important; }
.z-pager .qc-pg-size { min-width: 76px; height: 34px; }
a.z-pager__btn { text-decoration: none; }
.pagination { gap: 4px !important; margin: 0 !important; flex-wrap: wrap; }
.page-item .page-link {
  min-width: 34px; height: 34px; padding: 0 8px !important; display: inline-grid !important; place-items: center;
  font-family: var(--z-font) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--z-text-2) !important;
  background: transparent !important; border: 1px solid transparent !important; border-radius: var(--z-r-sm) !important; box-shadow: none !important; margin: 0 !important;
}
.page-item .page-link:hover { background: var(--z-surface-3) !important; color: var(--z-text) !important; }
.page-item.active .page-link { background: var(--z-surface) !important; border-color: var(--z-border-strong) !important; color: var(--z-text) !important; box-shadow: var(--z-shadow-xs) !important; }
.page-item.disabled .page-link { opacity: 0.4; }

/* ── 10. Alerts → .z-callout, dropdowns, tabs ───────────────────────────── */
.alert {
  border: 1px solid transparent !important; border-radius: var(--z-r-lg) !important; font-size: 14px !important; font-weight: 500 !important;
  padding: 14px 16px !important; background-image: none !important; display: flex; align-items: flex-start; gap: 12px; box-shadow: none !important;
}
.alert-success { background: var(--z-success-soft) !important; color: var(--z-success-text) !important; }
.alert-danger { background: var(--z-danger-soft) !important; color: var(--z-danger-text) !important; }
.alert-warning { background: var(--z-warning-soft) !important; color: var(--z-warning-text) !important; }
.alert-info, .alert-primary { background: var(--z-info-soft) !important; color: var(--z-info-text) !important; }
.alert-secondary, .alert-light, .alert-dark { background: var(--z-surface-2) !important; color: var(--z-text-2) !important; border-color: var(--z-border) !important; }
.alert .alert-text, .alert span { color: inherit !important; }
.alert .btn-close { margin-left: auto; position: static !important; padding: 0 !important; width: 28px; height: 28px; border-radius: var(--z-r-sm); background-size: 10px !important; opacity: 0.6; }
.dropdown-menu {
  min-width: 200px; background: var(--z-surface) !important; border: 1px solid var(--z-border) !important; border-radius: var(--z-r-lg) !important;
  box-shadow: var(--z-shadow-lg) !important; padding: 6px !important; color: var(--z-text);
}
.dropdown-menu::before { display: none !important; }
.dropdown-item { font-size: 14px !important; font-weight: 500 !important; border-radius: var(--z-r-sm) !important; padding: 9px 12px !important; min-height: 38px; color: var(--z-text) !important; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--z-surface-3) !important; color: var(--z-text) !important; }
.dropdown-divider { border-color: var(--z-divider) !important; margin: 6px 0; }
/* tabs → .z-tabs / .z-tab */
.nav-tabs, .nav.nav-pills {
  display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--z-border) !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important;
}
.nav-tabs::-webkit-scrollbar, .nav.nav-pills::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link, .nav.nav-pills .nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--z-text-2) !important;
  font-size: 14px !important; font-weight: 600 !important; padding: 12px 14px !important; box-shadow: none !important; transition: color var(--z-t);
}
.nav-tabs .nav-link::after, .nav.nav-pills .nav-link::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: transparent; transition: background var(--z-t); }
.nav-tabs .nav-link:hover, .nav.nav-pills .nav-link:hover { color: var(--z-text) !important; }
.nav-tabs .nav-link.active, .nav.nav-pills .nav-link.active { color: var(--z-primary-text) !important; }
.nav-tabs .nav-link.active::after, .nav.nav-pills .nav-link.active::after { background: var(--z-primary); }
.moving-tab { display: none !important; }
.list-group-item { background: var(--z-surface) !important; border-color: var(--z-divider) !important; color: var(--z-text-2) !important; }
.tooltip-inner { background: #101828; color: #fff; font-family: var(--z-font); font-size: 12.5px; border-radius: 8px; padding: 6px 10px; }

/* ── 11. Popups (Bootstrap modals) → .z-dialog ──────────────────────────── */
.modal-backdrop.show { background: var(--z-overlay); opacity: 1 !important; backdrop-filter: blur(3px); }
.modal-content {
  background: var(--z-surface) !important; color: var(--z-text-2); border: 1px solid var(--z-border) !important; border-radius: var(--z-r-xl) !important;
  overflow: hidden; box-shadow: var(--z-shadow-xl) !important;
}
.modal.show .modal-content { animation: z-pop 0.22s cubic-bezier(0.34, 1.3, 0.64, 1) both; }
.modal-header {
  padding: 18px 22px !important; display: flex; align-items: center; gap: 12px;
  background: var(--z-surface) !important; border-bottom: 1px solid var(--z-divider) !important;
}
.modal-title { font-family: var(--z-font) !important; font-size: 17px !important; font-weight: 650 !important; letter-spacing: -0.015em; color: var(--z-text) !important; margin: 0 !important; display: flex; align-items: center; gap: 8px; }
.modal .btn-close {
  width: 34px !important; height: 34px !important; flex: 0 0 34px; margin: 0 0 0 auto !important; padding: 0 !important; opacity: 1 !important; border-radius: var(--z-r-sm) !important;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a7' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / 18px no-repeat !important;
  border: 0 !important; box-shadow: none !important; transition: background-color var(--z-t);
}
.modal .btn-close:hover { background-color: var(--z-surface-3) !important; }
.modal-body { padding: 22px !important; color: var(--z-text-2); overflow-x: hidden; }
.modal-footer {
  padding: 14px 22px !important; border-top: 1px solid var(--z-divider) !important; background: var(--z-surface-2) !important;
  display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap;
}
.modal-footer > * { margin: 0 !important; }
.modal-footer .btn.qc-btn-dismiss, .modal-footer .btn-light, .modal-footer .btn-secondary { order: 8; }
.modal-footer .btn.qc-btn-confirm, .modal-footer .btn-primary, .modal-footer .bg-gradient-primary, .modal-footer .btn-danger { order: 9; }
.modal-dialog { margin-top: 6vh; }
@media (max-width: 575px) {
  .modal-dialog { margin: 0; position: fixed; bottom: 0; left: 0; right: 0; max-width: none; }
  .modal-content { border-radius: var(--z-r-xl) var(--z-r-xl) 0 0 !important; max-height: 94dvh; }
  .modal-body { overflow-y: auto; }
  .modal-footer .btn { flex: 1 1 0; min-width: 0; }
}

/* ── 12. Misc ───────────────────────────────────────────────────────────── */
.border-top { border-top: 1px solid var(--z-divider) !important; }
.border-bottom { border-bottom: 1px solid var(--z-divider) !important; }
.border, .border-1 { border-color: var(--z-border) !important; }
.shadow, .shadow-sm, .shadow-lg, .shadow-xl { box-shadow: var(--z-shadow-xs) !important; }
.border-radius-md, .border-radius-lg, .border-radius-xl { border-radius: var(--z-r-lg) !important; }
.sticky-top { position: sticky; top: var(--z-top-h); z-index: 10; }
pre { font-family: var(--z-mono); color: var(--z-text-2); background: var(--z-surface-2); border: 1px solid var(--z-border); border-radius: var(--z-r-md); padding: 14px 16px; font-size: 12.5px; line-height: 1.6; }
code { color: var(--z-primary-text); background: var(--z-surface-3); border-radius: 5px; padding: 1px 5px; }
pre code { background: none; padding: 0; color: inherit; }
.icon-shape { border-radius: var(--z-r-md) !important; }
.icon-shape.bg-gradient-primary, .icon-shape.bg-gradient-info { background: var(--z-primary-soft) !important; color: var(--z-primary-text) !important; }
.icon-shape.bg-gradient-success { background: var(--z-success-soft) !important; color: var(--z-success-text) !important; }
.icon-shape.bg-gradient-warning { background: var(--z-warning-soft) !important; color: var(--z-warning-text) !important; }
.icon-shape.bg-gradient-danger { background: var(--z-danger-soft) !important; color: var(--z-danger-text) !important; }
.icon-shape i { color: inherit !important; opacity: 1 !important; }
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: var(--z-surface) !important; }
html[data-theme="dark"] .bg-gray-100 { background-color: var(--z-bg) !important; }
html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-black { color: var(--z-text) !important; }

/* ── 13. System health ──────────────────────────────────────────────────── */
.qc-health-hero { position: relative; overflow: hidden; }
.qc-health-hero::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--z-success); }
.qc-health-hero--warn::before { background: var(--z-warning); }
.qc-health-hero--fail::before { background: var(--z-danger); }
.qc-health-hero h4 { font-size: 20px !important; }
.qc-health-hero__eyebrow { font-size: 12.5px; font-weight: 600; color: var(--z-primary-text); margin-bottom: 4px; }
.qc-score {
  --c: var(--z-success); width: 84px; height: 84px; flex: 0 0 84px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--score) * 1%), var(--z-surface-3) 0);
}
.qc-health-hero--warn .qc-score { --c: var(--z-warning); }
.qc-health-hero--fail .qc-score { --c: var(--z-danger); }
.qc-score span { width: 66px; height: 66px; border-radius: 50%; background: var(--z-surface); display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 22px; font-weight: 700; color: var(--z-text); font-variant-numeric: tabular-nums; }
.qc-score small { font-size: 12px; color: var(--z-text-3); margin-left: 1px; }
.qc-count { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--z-r-full); font-size: 12.5px; font-weight: 600; }
.qc-count--ok { background: var(--z-success-soft); color: var(--z-success-text); }
.qc-count--warn { background: var(--z-warning-soft); color: var(--z-warning-text); }
.qc-count--fail { background: var(--z-danger-soft); color: var(--z-danger-text); }
.qc-checks { list-style: none; margin: 0; padding: 0; }
.qc-check { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--z-divider); }
.qc-check:last-child { border-bottom: 0; }
.qc-check__icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--z-r-sm); display: grid; place-items: center; font-size: 14px; }
.qc-check--ok .qc-check__icon { background: var(--z-success-soft); color: var(--z-success-text); }
.qc-check--warn .qc-check__icon { background: var(--z-warning-soft); color: var(--z-warning-text); }
.qc-check--fail .qc-check__icon { background: var(--z-danger-soft); color: var(--z-danger-text); }
.qc-check--info .qc-check__icon { background: var(--z-neutral-soft); color: var(--z-neutral-text); }
.qc-check__body { flex: 1 1 auto; min-width: 0; }
.qc-check__label { font-weight: 600; color: var(--z-text); font-size: 14px; }
.qc-check__hint { font-size: 12.5px; color: var(--z-text-3); line-height: 1.45; margin-top: 1px; }
.qc-check__value { flex-shrink: 0; max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-check--fail { background: color-mix(in srgb, var(--z-danger-soft) 45%, transparent); }
@media (max-width: 575px) { .qc-check { flex-wrap: wrap; } .qc-check__value { max-width: 100%; margin-left: 46px; } }

/* ── 14. Flash toasts (components/alert) → Zuno toastr look ─────────────── */
.qc-toasts { position: fixed; top: 76px; right: 20px; z-index: 1090; display: flex; flex-direction: column; gap: 10px; width: 360px; max-width: calc(100vw - 24px); pointer-events: none; }
.qc-toasts:empty { display: none; }
.alert.qc-toast {
  pointer-events: auto; cursor: pointer; margin: 0 !important; align-items: flex-start;
  background: var(--z-surface) !important; color: var(--z-text) !important; border: 1px solid var(--z-border) !important;
  border-left: 4px solid var(--z-info) !important; border-radius: var(--z-r-lg) !important; box-shadow: var(--z-shadow-lg) !important;
  animation: z-fade-up 0.24s ease both;
}
.alert.qc-toast.alert-success { border-left-color: var(--z-success) !important; }
.alert.qc-toast.alert-danger { border-left-color: var(--z-danger) !important; }
.alert.qc-toast.alert-warning { border-left-color: var(--z-warning) !important; }
.qc-toast__icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.alert-success .qc-toast__icon { color: var(--z-success); }
.alert-danger .qc-toast__icon { color: var(--z-danger); }
.qc-toast__text { display: flex; flex-direction: column; gap: 2px; color: var(--z-text-2) !important; line-height: 1.5; font-size: 14px; }
.qc-toast__text b { color: var(--z-text); font-weight: 650; }
.alert.qc-toast.fade:not(.show) { opacity: 0; transform: translateX(12px); transition: opacity .15s, transform .15s; }
@media (max-width: 480px) { .qc-toasts { right: 12px; left: 12px; width: auto; } }

/* ── 15. Mobile drawer: no shadow / focus leak while closed ─────────────── */
@media (max-width: 991.98px) {
  .zs { transition: transform var(--z-t-slow), visibility 0s linear 0.28s; }
  .zs:not(.is-toggled) { box-shadow: none; visibility: hidden; }
  .zs.is-toggled { visibility: visible; transition: transform var(--z-t-slow), visibility 0s; }
}

/* ── 16. Zuno components vs Soft UI globals ─────────────────────────────── */
/* Soft UI gives every <label> margins + bold; Zuno labels manage their own spacing */
label.z-label, label.z-check, label.z-switch, label.z-search, label.z-option, .za label { margin: 0 !important; }
label.z-check, label.z-switch, label.z-option { font-weight: 400; }
/* the h1–h6 colour/weight override above must not reach Zuno headings that set their own */
.z-page-head__title, .za-title, .z-kpi__value { font-weight: 700 !important; }
.za-hero h2, .za-brand-side h1, .za-brand-side h2, .za-brand-side h3 { color: #fff !important; font-weight: 700 !important; }
/* name cells in sideways-scrolling tables shouldn't squash to one word per line */
.z-table .z-cell__text, .table .z-cell__text { min-width: 140px; }
/* Soft UI sets p to 1rem (16px); Zuno body text is 14px */
:where(.z-page, .za, .modal) p { font-size: 14px; }
.z-callout p { font-size: 14px; white-space: normal; }
/* health check rows on phones: icon + text stay on one line, value wraps under */
@media (max-width: 575px) { .qc-check__body { flex-basis: calc(100% - 46px); } }
/* readonly fields read as readonly in dark mode too */
html[data-theme="dark"] .z-input:disabled, html[data-theme="dark"] .z-input[readonly],
html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly] { background-color: var(--z-surface-3) !important; color: var(--z-text-3) !important; }
.z-table .is-narrow, .table .is-narrow { width: 1%; white-space: nowrap; }
.z-actions form { display: contents; }
/* list ⇄ form pages: while the JS shows the form / details view, the list toolbar and page actions step aside (as in Zuno) */
.z-page:has(#formView[style*="block"], #detailsView[style*="block"], #detailView[style*="block"]) :is(.qc-search, .z-page-head__actions) { display: none; }

/* ── 17. Popups above their backdrop ────────────────────────────────────────
   .z-page's entrance animation must not leave a stacking context behind, or
   any .modal inside the page is trapped under Bootstrap's body-level backdrop
   (dialog looks blurred and dimmed). app.blade.php also moves modals to <body> on open. */
.z-page { animation-name: z-fade; animation-fill-mode: backwards; } /* fade only: a transform would turn .z-page into the containing block of fixed popups */
.modal { z-index: 1060; }
.modal-backdrop { z-index: 1050; }
.modal-header .modal-title i { font-size: 19px; color: var(--z-primary-text); }
/* company profile sub-pages: back link in the eyebrow, select2 inside fields, <a> tabs */
.z-page-head__eyebrow .z-back { margin: 0; }
.z-field .select2-container { width: 100% !important; }
a.z-tab { text-decoration: none; }
.z-tab.is-disabled { opacity: 0.45; pointer-events: none; }
.form-control.z-mono, .z-input.z-mono, .form-control.mono { font-family: var(--z-mono) !important; }
.z-dl, .z-dl dt, .z-dl dd { margin: 0; }
.z-callout p { margin: 0; }