/*==================== BIZ UI — shared tokens & components ====================
 * Shared by the Business pages (policy.php, employee-profile.php).
 * Visual language follows the existing admin pages: navy hero with a coral glow,
 * stat tiles with a coloured edge, rounded white cards, coral primary actions.
 * Everything is scoped to .bz-ui. Plain CSS, no framework dependency.
 *=============================================================================*/

:root {
  --bz-navy: #0F2733;
  --bz-navy-2: #1b4d61;
  --bz-accent: #1b4d61;
  --bz-accent-hover: #143b4b;
  --bz-accent-bg: light-dark(#e8f1f5, #1f3a45);
  --bz-accent-ring: rgba(27, 77, 97, .2);
  --bz-coral: #f45d6b;
  --bz-coral-dark: #d9434f;
  --bz-coral-bg: light-dark(#ffeef0, #3d1d21);
  --bz-coral-disabled: light-dark(#f9bcc2, #6b3a3f);

  --bz-bg: light-dark(#f4f6f8, #1c1c1c);
  --bz-surface: light-dark(#ffffff, #262626);
  --bz-surface-2: light-dark(#f8fafc, #2e2e2e);
  --bz-border: light-dark(#e5e9ee, #3d3d3d);
  --bz-border-strong: light-dark(#cfd6de, #555);
  --bz-text: light-dark(#1f2933, #f1f1f1);
  --bz-muted: light-dark(#6b7785, #a8b0b9);
  --bz-heading: light-dark(#0F2733, #e4f7ff);
  --bz-hover: light-dark(#f1f5f9, #333);
  --bz-disabled-bg: light-dark(#eef1f4, #303030);

  --bz-danger: light-dark(#c42b2b, #f87171);
  --bz-danger-solid: #dc2626;
  --bz-danger-hover: #b91c1c;
  --bz-danger-bg: light-dark(#fdeaea, #3d1717);
  --bz-warn: light-dark(#b45309, #fbbf24);
  --bz-warn-bg: light-dark(#fff4dc, #3a2d0d);
  --bz-ok: light-dark(#15803d, #4ade80);
  --bz-ok-solid: #16a34a;
  --bz-ok-bg: light-dark(#e3f8ea, #12331f);
  --bz-info: light-dark(#4338ca, #a5b4fc);
  --bz-info-bg: light-dark(#eef0ff, #22244a);

  --bz-shadow: 0 1px 2px rgba(15, 39, 51, .06), 0 4px 16px rgba(15, 39, 51, .06);
  --bz-shadow-lg: 0 16px 48px rgba(15, 39, 51, .22);
  --bz-radius: 16px;
  --bz-radius-sm: 10px;
  --bz-font: var(--font-family-inter, "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif);
}

/* ---------- Scope reset (the site styles `*` with font, size and colour) ---------- */
.bz-ui, .bz-ui *, .bz-ui *::before, .bz-ui *::after { box-sizing: border-box; }
.bz-ui { font-family: var(--bz-font) !important; font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--bz-text); letter-spacing: normal; text-transform: none; }
.bz-ui :where(*) { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.bz-ui :where(strong, b, th) { font-weight: 700; }
.bz-ui :where(h1, h2, h3, h4, h5, h6) { margin: 0; color: var(--bz-heading); font-weight: 700; line-height: 1.25; }
.bz-ui :where(p) { margin: 0; }
.bz-ui :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.bz-ui .bi, .bz-ui .bi::before { color: inherit !important; line-height: 1; vertical-align: middle; }
.bz-ui [hidden] { display: none !important; }
.bz-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.bz-muted { color: var(--bz-muted) !important; }

.bz-page { background: var(--bz-bg); min-height: 70vh; padding: 32px 0 64px; }
body.bz-has-dock .bz-page { padding-bottom: 130px; }

/* ---------- Hero ---------- */
.bz-hero {
  position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding: 28px 32px; border-radius: 20px; color: #fff; box-shadow: var(--bz-shadow);
  background:
    radial-gradient(circle at 92% -20%, rgba(244, 93, 107, .35), transparent 45%),
    linear-gradient(120deg, var(--bz-navy) 0%, var(--bz-navy-2) 100%);
}
.bz-hero-text { min-width: 0; flex: 1 1 420px; }
.bz-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px !important; font-size: 13px; color: rgba(255, 255, 255, .7); }
.bz-crumbs li + li::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, .4); }
.bz-ui .bz-crumbs a { color: rgba(255, 255, 255, .72) !important; text-decoration: none; }
.bz-ui .bz-crumbs a:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
.bz-crumbs [aria-current] { color: #fff; }
.bz-ui .bz-hero-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 30px; line-height: 1.2; color: #fff; }
.bz-ui .bz-hero-sub { margin-top: 6px; max-width: 640px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.bz-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bz-hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bz-hero-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); font-size: 13px; color: rgba(255, 255, 255, .9); }
.bz-ui .bz-hero .bz-badge { background: rgba(255, 255, 255, .16); color: #fff !important; }

/* ---------- Stat tiles ---------- */
.bz-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.bz-stat { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 18px 18px 22px; overflow: hidden; background: var(--bz-surface); border: 1px solid var(--bz-border); border-radius: var(--bz-radius); box-shadow: var(--bz-shadow); }
.bz-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tone, var(--bz-navy-2)); }
.bz-stat-icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; background: var(--tone-bg, var(--bz-accent-bg)); color: var(--tone, var(--bz-navy-2)); }
.bz-stat small { display: block; font-size: 13px; color: var(--bz-muted); }
.bz-stat strong { display: block; font-size: 24px; line-height: 1.2; color: var(--bz-heading); font-variant-numeric: tabular-nums; }
.bz-stat em { display: block; font-style: normal; font-size: 12px; color: var(--bz-muted); }

.tone-navy   { --tone: var(--bz-navy-2); --tone-bg: var(--bz-accent-bg); }
.tone-coral  { --tone: var(--bz-coral-dark); --tone-bg: var(--bz-coral-bg); }
.tone-green  { --tone: var(--bz-ok); --tone-bg: var(--bz-ok-bg); }
.tone-amber  { --tone: var(--bz-warn); --tone-bg: var(--bz-warn-bg); }
.tone-indigo { --tone: var(--bz-info); --tone-bg: var(--bz-info-bg); }

/* ---------- Cards ---------- */
.bz-ui .bz-card { background: var(--bz-surface); border: 1px solid var(--bz-border); border-radius: 20px; box-shadow: var(--bz-shadow); }
.bz-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--bz-border); }
.bz-ui .bz-card-title { font-size: 17px; }
.bz-ui .bz-card-sub { margin-top: 2px; font-size: 13px; color: var(--bz-muted); }
.bz-card-body { padding: 20px 24px; }
.bz-icon-tile { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: var(--tone-bg, var(--bz-accent-bg)); color: var(--tone, var(--bz-navy-2)); }

/* ---------- Buttons ---------- */
.bz-ui .bz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 18px; margin: 0;
  border: 1px solid transparent; border-radius: var(--bz-radius-sm);
  background: transparent; color: var(--bz-text);
  font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.bz-ui .bz-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--bz-accent-ring); }
.bz-ui .bz-btn .bi { font-size: 15px; }
.bz-ui .bz-btn-lg { min-height: 44px; padding: 0 20px; }
.bz-ui .bz-btn-sm { min-height: 32px; padding: 0 12px; font-size: 13px; gap: 6px; }
.bz-ui .bz-btn-primary { background: var(--bz-coral); border-color: var(--bz-coral); color: #fff !important; box-shadow: 0 4px 14px rgba(244, 93, 107, .3); }
.bz-ui .bz-btn-primary:hover { background: var(--bz-coral-dark); border-color: var(--bz-coral-dark); }
.bz-ui .bz-btn-navy { background: var(--bz-navy-2); border-color: var(--bz-navy-2); color: #fff !important; }
.bz-ui .bz-btn-navy:hover { background: var(--bz-navy); border-color: var(--bz-navy); }
.bz-ui .bz-btn-secondary { background: var(--bz-surface); border-color: var(--bz-border-strong); color: var(--bz-text) !important; }
.bz-ui .bz-btn-secondary:hover { background: var(--bz-hover); border-color: var(--bz-muted); }
.bz-ui .bz-btn-glass { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff !important; }
.bz-ui .bz-btn-glass:hover { background: rgba(255, 255, 255, .22); }
.bz-ui .bz-btn-danger { background: var(--bz-danger-solid); border-color: var(--bz-danger-solid); color: #fff !important; }
.bz-ui .bz-btn-danger:hover { background: var(--bz-danger-hover); border-color: var(--bz-danger-hover); }
.bz-ui .bz-btn:disabled { cursor: not-allowed; box-shadow: none; }
.bz-ui .bz-btn-primary:disabled { background: var(--bz-coral-disabled); border-color: var(--bz-coral-disabled); }
.bz-ui .bz-btn-secondary:disabled { color: var(--bz-muted) !important; background: var(--bz-surface); border-color: var(--bz-border); }

.bz-ui .bz-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; margin: 0; border: 0; background: none; color: var(--bz-navy-2) !important; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.bz-ui .bz-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bz-ui .bz-link.is-danger { color: var(--bz-danger) !important; }
.bz-ui .bz-link:focus-visible { outline: 2px solid var(--bz-accent); outline-offset: 2px; border-radius: 4px; }

.bz-ui .bz-icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0; margin: 0; border: 0; border-radius: 8px; background: transparent; color: var(--bz-muted) !important; font-size: 17px; cursor: pointer; }
.bz-ui .bz-icon-btn:hover, .bz-ui .bz-icon-btn[aria-expanded="true"] { background: var(--bz-hover); color: var(--bz-text) !important; }
.bz-ui .bz-icon-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--bz-accent-ring); }
.bz-ui .bz-icon-btn.is-danger:hover { color: var(--bz-danger) !important; background: var(--bz-danger-bg); }

/* ---------- Form controls ---------- */
.bz-ui .bz-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--bz-heading); }
.bz-ui .bz-label em { font-style: normal; color: var(--bz-coral-dark) !important; margin-left: 2px; }
.bz-ui .bz-input {
  display: block; width: 100%; height: 42px; margin: 0; padding: 0 12px;
  border: 1px solid var(--bz-border-strong); border-radius: var(--bz-radius-sm);
  background: var(--bz-surface); color: var(--bz-text); font-size: 14px; line-height: 1.3;
  box-shadow: none; outline: 0; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
}
.bz-ui .bz-input::placeholder { color: var(--bz-muted); opacity: .85; }
.bz-ui .bz-input:hover { border-color: var(--bz-muted); }
.bz-ui .bz-input:focus { border-color: var(--bz-navy-2); box-shadow: 0 0 0 3px var(--bz-accent-ring); }
.bz-ui .bz-input[readonly] { background: var(--bz-disabled-bg); color: var(--bz-muted); border-color: var(--bz-border); cursor: not-allowed; }
.bz-ui .bz-input.is-invalid { border-color: var(--bz-danger-solid); }
.bz-ui .bz-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }
.bz-ui input[type="date"].bz-input { padding-right: 8px; }

.bz-ui .bz-select { position: relative; }
.bz-ui .bz-select .bz-input { padding-right: 34px; cursor: pointer; }
.bz-ui .bz-select::after { content: "\F282"; font-family: "bootstrap-icons"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--bz-muted); pointer-events: none; }

.bz-ui .bz-affix { position: relative; }
.bz-ui .bz-affix > .bz-affix-pre { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--bz-muted); font-size: 14px; pointer-events: none; }
.bz-ui .bz-affix > .bz-input { padding-left: 28px; }
.bz-ui .bz-affix.is-icon > .bz-input { padding-left: 36px; }

.bz-ui .bz-help { display: block; margin-top: 6px; font-size: 12px; color: var(--bz-muted); }
.bz-ui .bz-error { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--bz-danger) !important; }
.bz-ui .bz-error::before { content: "\F33A"; font-family: "bootstrap-icons"; font-size: 12px; }
.bz-ui .bz-error:empty { display: none; }
.bz-ui .bz-warn-text { display: flex; gap: 5px; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--bz-warn) !important; }
.bz-ui .bz-warn-text::before { content: "\F33B"; font-family: "bootstrap-icons"; font-size: 12px; }

.bz-ui .bz-check { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; cursor: pointer; }
.bz-ui .bz-check input { width: 18px; height: 18px; margin: 0; flex: 0 0 18px; cursor: pointer; accent-color: var(--bz-navy-2); }

/* Switch */
.bz-ui .bz-switch { display: inline-flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; font-size: 14px; }
.bz-ui .bz-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bz-ui .bz-switch-track { position: relative; width: 42px; height: 24px; flex: 0 0 42px; border-radius: 999px; background: var(--bz-border-strong); transition: background-color .15s; }
.bz-ui .bz-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.bz-ui .bz-switch input:checked + .bz-switch-track { background: var(--bz-ok-solid); }
.bz-ui .bz-switch input:checked + .bz-switch-track::after { transform: translateX(18px); }
.bz-ui .bz-switch input:focus-visible + .bz-switch-track { box-shadow: 0 0 0 3px var(--bz-accent-ring); }
.bz-ui .bz-switch-text { color: var(--bz-muted); font-weight: 500; }

/* Option pills */
.bz-ui .bz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bz-ui .bz-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; margin: 0;
  border: 1px solid var(--bz-border-strong); border-radius: 10px; background: var(--bz-surface);
  color: var(--bz-text) !important; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.bz-ui .bz-chip::before { content: ""; width: 16px; height: 16px; flex: 0 0 16px; border: 1.5px solid var(--bz-border-strong); border-radius: 4px; background: var(--bz-surface); }
.bz-ui .bz-chip:hover { border-color: var(--bz-navy-2); }
.bz-ui .bz-chip[aria-pressed="true"] { background: var(--bz-accent-bg); border-color: var(--bz-navy-2); color: var(--bz-heading) !important; font-weight: 600; }
.bz-ui .bz-chip[aria-pressed="true"]::before { content: "\F26E"; font-family: "bootstrap-icons"; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; background: var(--bz-navy-2); border-color: var(--bz-navy-2); }
.bz-ui .bz-chip:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--bz-accent-ring); }
.bz-ui .bz-chips.is-invalid .bz-chip { border-color: var(--bz-danger-solid); }

/* Searchable select (combo) — see BZ.combo() */
.bz-combo { position: relative; }
.bz-ui .bz-combo-native { position: absolute !important; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.bz-ui .bz-select.has-combo::after { content: none; }
.bz-ui .bz-combo-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 12px; text-align: left; cursor: pointer; }
.bz-ui .bz-combo-btn .bi { flex: 0 0 auto; font-size: 12px; color: var(--bz-muted) !important; transition: transform .15s; }
.bz-ui .bz-combo.is-open .bz-combo-btn { border-color: var(--bz-navy-2); box-shadow: 0 0 0 3px var(--bz-accent-ring); }
.bz-ui .bz-combo.is-open .bz-combo-btn .bi { transform: rotate(180deg); }
.bz-ui .bz-combo-btn.is-placeholder .bz-combo-text { color: var(--bz-muted); }
.bz-combo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-combo-pop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px; background: var(--bz-surface); border: 1px solid var(--bz-border); border-radius: 12px; box-shadow: var(--bz-shadow-lg); overflow: hidden; animation: bz-pop .12s ease-out; }
.bz-combo.is-up .bz-combo-pop { top: auto; bottom: calc(100% + 6px); }
.bz-combo-search { position: relative; padding: 8px; border-bottom: 1px solid var(--bz-border); }
.bz-combo-search .bi { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--bz-muted) !important; }
.bz-ui .bz-combo-search input { width: 100%; height: 36px; padding: 0 10px 0 32px; margin: 0; border: 1px solid var(--bz-border-strong); border-radius: 8px; background: var(--bz-surface); font-size: 14px; color: var(--bz-text); outline: 0; }
.bz-ui .bz-combo-search input:focus { border-color: var(--bz-navy-2); box-shadow: 0 0 0 3px var(--bz-accent-ring); }
.bz-combo-list { max-height: 248px; overflow-y: auto; padding: 6px; }
.bz-ui .bz-combo-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--bz-text); cursor: pointer; }
.bz-ui .bz-combo-list li.is-active { background: var(--bz-hover); }
.bz-ui .bz-combo-list li[aria-selected="true"] { font-weight: 600; color: var(--bz-heading); }
.bz-ui .bz-combo-list li .bi { color: var(--bz-navy-2) !important; }
.bz-ui .bz-combo-list .bz-combo-empty { justify-content: flex-start; color: var(--bz-muted); cursor: default; }

/* ---------- Badges, banners, avatars ---------- */
.bz-ui .bz-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .02em; background: var(--bz-accent-bg); color: var(--bz-navy-2) !important; white-space: nowrap; }
.bz-ui .bz-badge.is-warn { background: var(--bz-warn-bg); color: var(--bz-warn) !important; }
.bz-ui .bz-badge.is-ok { background: var(--bz-ok-bg); color: var(--bz-ok) !important; }
.bz-ui .bz-badge.is-danger { background: var(--bz-danger-bg); color: var(--bz-danger) !important; }

.bz-ui .bz-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; background: var(--bz-accent-bg); color: var(--bz-heading); font-size: 13px; }
.bz-ui .bz-banner .bi { color: var(--bz-navy-2) !important; font-size: 16px; }
.bz-ui .bz-banner.is-warn { background: var(--bz-warn-bg); }
.bz-ui .bz-banner.is-warn .bi { color: var(--bz-warn) !important; }

.bz-ui .bz-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--bz-navy-2); color: #fff !important; font-size: 12px; font-weight: 700; }
.bz-avatars { display: inline-flex; align-items: center; }
.bz-avatars .bz-avatar { width: 28px; height: 28px; font-size: 10px; border: 2px solid var(--bz-surface); margin-left: -6px; letter-spacing: -.02em; }
.bz-avatars .bz-avatar:first-child { margin-left: 0; }
.bz-avatars .bz-avatar.is-more { background: var(--bz-surface-2); color: var(--bz-muted) !important; border-color: var(--bz-surface); box-shadow: inset 0 0 0 1px var(--bz-border); }

/* ---------- Modal ---------- */
.bz-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 39, 51, .5); animation: bz-fade .15s ease-out; }
.bz-modal { width: 100%; max-width: 500px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--bz-surface); border-radius: 20px; box-shadow: var(--bz-shadow-lg); overflow: hidden; animation: bz-pop .16s ease-out; }
.bz-modal > form { display: flex; flex-direction: column; min-height: 0; }
.bz-modal-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--bz-border); }
.bz-modal-head > div { flex: 1 1 auto; min-width: 0; }
.bz-ui .bz-modal-title { font-size: 18px; }
.bz-ui .bz-modal-sub { margin-top: 3px; font-size: 13px; color: var(--bz-muted); }
.bz-modal-body { padding: 20px 24px; overflow-y: auto; }
.bz-modal-body > * + * { margin-top: 16px; }
.bz-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--bz-border); background: var(--bz-surface-2); }
.bz-modal-foot .bz-modal-note { margin-right: auto; font-size: 13px; color: var(--bz-muted); }
.bz-modal-foot .bz-btn { min-width: 112px; }

/* ---------- Side panel (drawer) ---------- */
.bz-overlay.is-drawer { justify-content: flex-end; align-items: stretch; padding: 0; }
.bz-modal.bz-drawer { max-width: 580px; height: 100%; max-height: none; border-radius: 0; animation: bz-slide .22s ease-out; box-shadow: -16px 0 48px rgba(15, 39, 51, .25); }
.bz-drawer .bz-modal-head { align-items: center; padding: 18px 24px; }
.bz-drawer .bz-modal-title { font-size: 20px; }
.bz-drawer .bz-modal-body { flex: 1 1 auto; padding: 20px 24px 28px; }
@keyframes bz-slide { from { transform: translateX(48px); opacity: .3; } to { transform: none; opacity: 1; } }

/* ---------- Floating menu ---------- */
.bz-menu { position: fixed; z-index: 2100; min-width: 200px; padding: 6px; background: var(--bz-surface); border: 1px solid var(--bz-border); border-radius: 14px; box-shadow: var(--bz-shadow-lg); animation: bz-pop .12s ease-out; }
.bz-ui.bz-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; margin: 0; border: 0; border-radius: 8px; background: transparent; color: var(--bz-text) !important; font-size: 14px; font-weight: 500; text-align: left; white-space: nowrap; cursor: pointer; }
.bz-ui.bz-menu button .bi { font-size: 15px; color: var(--bz-muted) !important; }
.bz-ui.bz-menu button:hover, .bz-ui.bz-menu button:focus-visible { background: var(--bz-hover); outline: 0; }
.bz-ui.bz-menu button.is-danger, .bz-ui.bz-menu button.is-danger .bi { color: var(--bz-danger) !important; }
.bz-menu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--bz-border); opacity: 1; }

/* ---------- Toasts ---------- */
.bz-toasts { position: fixed; top: 90px; right: 24px; z-index: 2200; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.bz-toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: var(--bz-navy); color: #fff; font-size: 14px; font-weight: 500; box-shadow: var(--bz-shadow-lg); animation: bz-pop .16s ease-out; pointer-events: auto; }
.bz-toast .bi { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bz-ok-solid); color: #fff !important; font-size: 13px; }
.bz-toast.is-out { opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; }

/* ---------- Floating save dock ---------- */
.bz-dock {
  position: fixed; left: 50%; bottom: 20px; z-index: 1500; transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px; width: max-content; max-width: calc(100vw - 32px);
  padding: 10px 10px 10px 20px; border-radius: 16px; background: var(--bz-navy); color: #fff;
  box-shadow: 0 18px 40px rgba(15, 39, 51, .35); animation: bz-up .2s ease-out;
}
.bz-dock-text { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #fff; }
.bz-dock-text::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 0 4px rgba(251, 191, 36, .2); }
.bz-dock-text.is-error::before { background: var(--bz-coral); box-shadow: 0 0 0 4px rgba(244, 93, 107, .25); }
.bz-dock-text.is-idle::before { background: rgba(255, 255, 255, .45); box-shadow: none; }
.bz-dock-text.is-idle { font-weight: 500; color: rgba(255, 255, 255, .8); }
.bz-dock-actions { display: flex; gap: 8px; }
.bz-ui.bz-dock .bz-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .28); color: #fff !important; }
.bz-ui.bz-dock .bz-btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.bz-ui.bz-dock .bz-btn-ghost:disabled { color: rgba(255, 255, 255, .45) !important; border-color: rgba(255, 255, 255, .15); background: transparent; }
.bz-ui.bz-dock .bz-btn-primary:disabled { background: rgba(244, 93, 107, .35); border-color: transparent; color: rgba(255, 255, 255, .7) !important; }

@keyframes bz-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bz-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bz-up { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }

body.bz-lock { overflow: hidden; }

@media (max-width: 991.98px) {
  .bz-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .bz-page { padding-top: 16px; }
  .bz-hero { padding: 22px 20px; border-radius: 16px; }
  .bz-ui .bz-hero-title { font-size: 24px; }
  .bz-hero-actions { width: 100%; }
  .bz-hero-actions .bz-btn { flex: 1 1 auto; }
  .bz-stats { gap: 10px; }
  .bz-stat { padding: 14px 12px 14px 16px; gap: 10px; }
  .bz-stat-icon { flex-basis: 38px; width: 38px; height: 38px; font-size: 17px; }
  .bz-stat strong { font-size: 20px; }
  .bz-card-head, .bz-card-body { padding-left: 16px; padding-right: 16px; }
  .bz-modal-head, .bz-modal-body, .bz-modal-foot { padding-left: 16px; padding-right: 16px; }
  .bz-modal-foot .bz-btn { min-width: 0; flex: 1 1 0; }
  .bz-modal-foot .bz-modal-note { flex: 1 1 100%; }
  .bz-modal-foot { flex-wrap: wrap; }
  .bz-dock { left: 12px; right: 12px; bottom: 12px; transform: none; width: auto; max-width: none; flex-wrap: wrap; padding: 12px; gap: 10px; animation: none; }
  .bz-dock-actions { flex: 1 1 100%; }
  .bz-dock-actions .bz-btn { flex: 1 1 0; }
  .bz-toasts { left: 16px; right: 16px; top: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .bz-overlay, .bz-modal, .bz-drawer, .bz-menu, .bz-toast, .bz-dock { animation: none !important; }
}