/**
 * ═══════════════════════════════════════════════════════════════
 *  GLENDER — BUSINESS PORTAL COMPONENT STYLES
 *  business/assets/css/business.css
 *
 *  Shared styles for all business portal components injected by
 *  business-components.js (sidebar, header, modal, toast, drawer,
 *  confirm dialog, AI chat).
 *
 *  Class prefix: .bz-*
 *  Design tokens: inherits from global.css custom properties
 * ═══════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════ */
.bz-toast-stack { position:fixed; top:20px; right:20px; z-index:9000; display:flex; flex-direction:column; gap:10px; pointer-events:none; }

.bz-toast { pointer-events:auto; display:flex; align-items:flex-start; gap:10px; padding:14px 18px; background:#fff; border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,.12); min-width:300px; max-width:420px; animation:bzToastIn .3s ease; position:relative; overflow:hidden; border:1px solid var(--border,#e5e7eb); }
.bz-toast.out { animation:bzToastOut .25s ease forwards; }
.bz-toast__stripe { position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:4px 0 0 4px; }
.bz-toast.ok   .bz-toast__stripe { background:var(--ok,#22c55e); }
.bz-toast.warn .bz-toast__stripe { background:var(--amber,#f59e0b); }
.bz-toast.info .bz-toast__stripe { background:var(--blue,#c725eb); }
.bz-toast__icon  { font-size:18px; flex-shrink:0; }
.bz-toast__body  { flex:1; }
.bz-toast__title { font-size:13px; font-weight:700; color:var(--ink,#0a0c18); margin-bottom:2px; }
.bz-toast__msg   { font-size:12.5px; color:var(--text-s,#6b7280); line-height:1.5; }

@keyframes bzToastIn  { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@keyframes bzToastOut { to   { opacity:0; transform:translateX(40px); } }


/* ═══════════════════════════════════════════════
   MODAL (Add New Client)
═══════════════════════════════════════════════ */
.bz-modal-overlay { position:fixed; inset:0; background:rgba(10,12,18,.55); backdrop-filter:blur(6px); z-index:800; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .25s; }
.bz-modal-overlay.open { opacity:1; pointer-events:all; }

.bz-modal { background:var(--white,#fff); border:1px solid var(--border,#e5e7eb); border-radius:22px; padding:32px; width:100%; max-width:650px; box-shadow:0 24px 80px rgba(10,12,18,.2); transform:scale(.93) translateY(16px); transition:transform .3s cubic-bezier(.16,1,.3,1); position:relative; max-height:90vh; overflow-y:auto; }
.bz-modal-overlay.open .bz-modal { transform:scale(1) translateY(0); }

.bz-modal__close { position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:8px; border:1px solid var(--border,#e5e7eb); background:var(--off,#f9fafb); cursor:pointer; font-size:16px; color:var(--text-s,#6b7280); display:flex; align-items:center; justify-content:center; }
.bz-modal__icon  { width:48px; height:48px; border-radius:13px; background:var(--blue-pale,rgba(199,37,235,.08)); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px;float: left;
    margin-right: 1.5rem;
    margin-bottom: 2rem; }
.bz-modal__title { font-family:var(--font-d,Georgia); font-size:1.5rem; font-weight:700; color:var(--ink,#0a0c18); letter-spacing:-0.022em; margin-bottom:6px; }
.bz-modal__sub   { font-size:13.5px; color:var(--text-s,#6b7280); line-height:1.65; margin-bottom:20px; }

/* ── Callout box ── */
.bz-callout      { display:flex; gap:8px; padding:12px 14px; background:var(--blue-pale,rgba(199,37,235,.08)); border:1px solid rgba(199,37,235,.15); border-radius:10px; margin-bottom:4px; }
.bz-callout__icon { font-size:15px; flex-shrink:0; }
.bz-callout__text { font-size:12.5px; color:var(--ink-3,#4b5563); line-height:1.6; }

/* ── Form grid ── */
.bz-grid   { display:grid; gap:12px; }
.bz-grid--2 { grid-template-columns:1fr 1fr; }
.bz-grid + .bz-grid { margin-top:14px; }

/* ── Form fields ── */
.bz-group { display:flex; flex-direction:column; gap:5px; }
.bz-label { font-size:12px; font-weight:700; color:var(--ink,#0a0c18); }
.bz-label span { color:var(--fail,#ef4444); }

.bz-input { height:42px; border:1.5px solid var(--border,#e5e7eb); border-radius:10px; padding:0 13px; font-family:var(--font-b,sans-serif); font-size:13.5px; outline:none; width:100%; background:var(--white,#fff); color:var(--ink,#0a0c18); }
.bz-input:focus { border-color:var(--blue,#c725eb); box-shadow:0 0 0 3px rgba(199,37,235,.1); }
.bz-input-wrap  { position:relative; display:flex; align-items:center; }
.bz-icon { position:absolute; left:12px; font-size:14px; color:var(--text-m,#9ca3af); pointer-events:none; }
.bz-input--icon { padding-left:34px; }
.bz-hint { font-size:11px; color:var(--text-m,#9ca3af); }

.bz-textarea { height:80px; border:1.5px solid var(--border,#e5e7eb); border-radius:10px; padding:10px 13px; font-family:var(--font-b,sans-serif); font-size:13.5px; outline:none; width:100%; resize:vertical; background:var(--white,#fff); color:var(--ink,#0a0c18); }

.bz-select-wrap { position:relative; }
.bz-select { width:100%; height:42px; border:1.5px solid var(--border,#e5e7eb); border-radius:10px; padding:0 13px; font-family:var(--font-b,sans-serif); font-size:13.5px; outline:none; appearance:none; -webkit-appearance:none; background:var(--white,#fff) url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; color:var(--ink,#0a0c18); cursor:pointer; }

/* ── Checkboxes ── */
.bz-checkbox-group { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.bz-checkbox-label { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; color:var(--ink-3,#4b5563); font-weight:600; }
.bz-checkbox-input { accent-color:var(--blue,#c725eb); width:15px; height:15px; }

/* ── Modal actions ── */
.bz-modal-actions { display:flex; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border,#e5e7eb); }
.bz-btn-cancel { flex:1; height:44px; border:1.5px solid var(--border,#e5e7eb); border-radius:10px; font-family:var(--font-b,sans-serif); font-size:13.5px; font-weight:600; color:var(--text-s,#6b7280); background:var(--white,#fff); cursor:pointer; }
.bz-btn-submit { flex:2; height:44px; background:var(--blue,#c725eb); color:#fff; border:none; border-radius:10px; font-family:var(--font-b,sans-serif); font-size:13.5px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; position:relative; }
.bz-btn-submit.loading .bz-btn-text    { visibility:hidden; }
.bz-btn-submit .bz-btn-spinner         { display:none; }
.bz-btn-submit.loading .bz-btn-spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:bzSpin .7s linear infinite; position:absolute; }
.bz-btn-submit--danger { background:var(--fail,#ef4444); }

@keyframes bzSpin { to { transform:rotate(360deg); } }


/* ═══════════════════════════════════════════════
   HEADER ACTION BUTTONS
═══════════════════════════════════════════════ */
.bz-btn { display:inline-flex; align-items:center; gap:6px; height:36px; font-size:12px; padding:0 14px; border-radius:10px; font-family:var(--font-b,sans-serif); font-weight:700; cursor:pointer; border:none; white-space:nowrap; }
.bz-btn--primary { background:var(--blue,#c725eb); color:#fff; }
.bz-btn--outline { background:transparent; border:1.5px solid var(--border,#e5e7eb); color:var(--text-s,#6b7280); }


/* ═══════════════════════════════════════════════
   CASE DETAIL DRAWER
═══════════════════════════════════════════════ */
/* ── Company Bar (beneath header) — logo left, members right ── */
.bz-company-bar {
  background: var(--off, #f8fafc);
  border-bottom: 1px dotted var(--border, #e5e7eb);
  padding: 6px 2.9rem;
  flex-shrink: 0;
  height:4rem;
}
.bz-company-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  line-height: 2.5rem;
}
.bz-company-bar__logo { display: flex; align-items: center; }
.bz-company-bar__logo img {
  max-height: 60px;
   object-fit: contain;
  border-radius: 4px;
}
.bz-company-bar__members {
  display: flex;
  align-items: center;
  gap: 0;
}
.bz-company-bar__member {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff;
  border: 2px solid var(--off, #f8fafc);
  margin-left: -6px; position: relative; cursor: default;
  transition: transform .15s, z-index .15s;
}
.bz-company-bar__member:first-child { margin-left: 0; }
.bz-company-bar__member:hover { transform: scale(1.15); z-index: 2; }
.bz-company-bar__member img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.bz-company-bar__member--online::after {
  content: ''; position: absolute; bottom: -1px; right: -1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80; border: 2px solid var(--off, #f8fafc);
}
.bz-company-bar__member-count {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface, #e2e8f0); border: 2px solid var(--off, #f8fafc);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: var(--text-m, #9ca3af);
  margin-left: -6px;
}
[data-theme="dark"] .bz-company-bar { background: var(--surface, #151B2E); border-color: var(--border); }
[data-theme="dark"] .bz-company-bar__member { border-color: var(--surface, #151B2E); }
[data-theme="dark"] .bz-company-bar__member--online::after { border-color: var(--surface, #151B2E); }
[data-theme="dark"] .bz-company-bar__member-count { background: #1c2539; border-color: var(--surface, #151B2E); }

.bz-company-bar__idle-info {
  font-size: 0.72rem; color: var(--ink-faint, #94a3b8); opacity: 0.7;
  margin-left: auto; white-space: nowrap; font-weight: 400; letter-spacing: 0.01em;
}

/* ── Member Profile Drawer ── */
.bz-md-overlay { position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:9998;opacity:0;pointer-events:none;transition:opacity .25s; }
.bz-md-overlay.open { opacity:1;pointer-events:auto; }
.bz-md { position:fixed;top:0;right:0;bottom:0;width:380px;background:var(--white,#fff);z-index:9999;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 32px rgba(0,0,0,.12);overflow-y:auto;display:flex;flex-direction:column; }
.bz-md.open { transform:translateX(0); }
.bz-md__head { padding:20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#1e293b,#0f172a); }
.bz-md__avatar { width:52px;height:52px;border-radius:50%;background:#7c3aed;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex-shrink:0;overflow:hidden; }
.bz-md__avatar img { width:100%;height:100%;object-fit:cover; }
.bz-md__name { font-family:var(--font-d);font-size:1.1rem;font-weight:700;color:#fff; }
.bz-md__role { font-size:11px;color:rgba(255,255,255,.6);margin-top:2px;text-transform:capitalize; }
.bz-md__close { width:32px;height:32px;border-radius:50%;border:none;background:rgba(255,255,255,.1);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s; }
.bz-md__close:hover { background:rgba(255,255,255,.2); }
.bz-md__body { padding:20px;flex:1; }
.bz-md__section { margin-bottom:20px; }
.bz-md__section-title { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-m);margin-bottom:10px; }
.bz-md__meta-row { display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px;color:var(--ink); }
.bz-md__meta-icon { width:16px;text-align:center;font-size:13px;flex-shrink:0; }
.bz-md__meta-label { color:var(--text-m);min-width:70px; }
.bz-md__case-row { display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--off);border:1px solid var(--border);border-radius:8px;margin-bottom:6px;font-size:12px;cursor:pointer;transition:background .15s; }
.bz-md__case-row:hover { background:var(--white); }
.bz-md__msg-btn { width:100%;padding:12px;border:none;border-radius:12px;background:linear-gradient(135deg,#c725eb,#7c3aed);color:#fff;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .15s;margin-top:auto; }
.bz-md__msg-btn:hover { opacity:.9; }
@media(max-width:480px) { .bz-md { width:100%; } }

.bz-drawer-overlay { position:fixed; inset:0; background:rgba(10,12,18,.35); z-index:700; opacity:0; pointer-events:none; transition:opacity .25s; }
.bz-drawer-overlay.open { opacity:1; pointer-events:all; }

.bz-drawer { position:fixed; top:0; right:-460px; width:440px; max-width:100vw; height:100vh; background:var(--white,#fff); box-shadow:-8px 0 40px rgba(0,0,0,.12); z-index:701; display:flex; flex-direction:column; transition:right .3s cubic-bezier(.16,1,.3,1); }
.bz-drawer.open { right:0; }

.bz-drawer__head   { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--border,#e5e7eb); }
.bz-drawer__client { display:flex; align-items:center; gap:12px; }
.bz-drawer__avatar { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#fff; background:var(--blue,#c725eb); flex-shrink:0; }
.bz-drawer__name   { font-size:15px; font-weight:700; color:var(--ink,#0a0c18); }
.bz-drawer__ref    { font-size:12px; color:var(--text-m,#9ca3af); }
.bz-drawer__close  { width:30px; height:30px; border-radius:8px; border:1px solid var(--border,#e5e7eb); background:var(--off,#f9fafb); cursor:pointer; font-size:16px; color:var(--text-s,#6b7280); display:flex; align-items:center; justify-content:center; }
.bz-drawer__body   { flex:1; overflow-y:auto; padding:20px 24px; }
.bz-drawer__footer { display:flex; gap:8px; padding:16px 24px; border-top:1px solid var(--border,#e5e7eb); }

.bz-drawer__footer-btn { flex:1; height:40px; border-radius:10px; font-family:var(--font-b,sans-serif); font-size:12.5px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }
.bz-drawer__footer-btn--outline { background:var(--white,#fff); border:1.5px solid var(--border,#e5e7eb); color:var(--text-s,#6b7280); }
.bz-drawer__footer-btn--primary { background:var(--blue,#c725eb); border:none; color:#fff; }

/* ── Drawer sections ── */
.bz-drawer-section       { margin-bottom:24px; }
.bz-drawer-section__title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-m,#9ca3af); margin-bottom:12px; }

/* ── Enhanced drawer sections ── */
.bzd-quick-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 20px;
}
.bzd-qa-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; border-radius: 10px; font-family: var(--font-b, sans-serif);
  font-size: 12px; font-weight: 700; cursor: pointer; border: 1.5px solid var(--border, #e5e7eb);
  background: var(--white, #fff); color: var(--ink, #0a0c18); transition: all .15s;
}
.bzd-qa-btn:hover { border-color: var(--blue, #2563eb); color: var(--blue, #2563eb); background: rgba(37,99,235,.04); }
.bzd-qa-btn--primary {
  background: var(--blue, #2563eb); border-color: var(--blue, #2563eb); color: #fff;
}
.bzd-qa-btn--primary:hover { opacity: .9; }

.bzd-section {
  background: var(--off, #f8fafc); border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px; padding: 16px; margin-bottom: 14px;
  transition: box-shadow .15s;
}
.bzd-section:hover { box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.bzd-section__head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border, #e5e7eb);
}
.bzd-section__icon {
  width: 28px; height: 28px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
}
.bzd-section__title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink, #0a0c18);
}

.bzd-action-btn {
  width: 100%; padding: 10px; border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 10px; background: var(--white, #fff); font-family: var(--font-b, sans-serif);
  font-size: 12px; font-weight: 700; color: var(--ink, #0a0c18); cursor: pointer;
  margin-top: 10px; transition: all .15s; display: flex; align-items: center;
  justify-content: center; gap: 6px;
}
.bzd-action-btn:hover { border-color: var(--blue, #2563eb); color: var(--blue, #2563eb); }

.bzd-delete-btn {
  width: 100%; padding: 8px; border: 1.5px solid rgba(220,38,38,.2);
  border-radius: 10px; background: rgba(220,38,38,.04); font-family: var(--font-b, sans-serif);
  font-size: 11px; font-weight: 700; color: var(--fail, #dc2626); cursor: pointer;
  margin-top: 6px; transition: all .15s; display: flex; align-items: center;
  justify-content: center; gap: 5px;
}
.bzd-delete-btn:hover { background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.4); }
.bk-table td span{font-size: 12px !important;}
/* ── Enhanced drawer footer ── */
.bz-drawer__footer {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 24px; border-top: 1px solid var(--border, #e5e7eb);
}
.bz-drawer__footer-btn { width: 100%; min-height:35px;quick info slideout men}

/* ── Dark theme for new components ── */
[data-theme="dark"] .bzd-section { background: var(--surface, #151B2E); border-color: var(--border); }
[data-theme="dark"] .bzd-section__head { border-color: var(--border); }
[data-theme="dark"] .bzd-section__title { color: var(--text-1, #f1f5f9); }
[data-theme="dark"] .bzd-qa-btn { background: var(--surface, #151B2E); border-color: var(--border); color: var(--text-1); }
[data-theme="dark"] .bzd-action-btn { background: var(--surface, #151B2E); border-color: var(--border); color: var(--text-1); }
[data-theme="dark"] .bzd-delete-btn { background: rgba(220,38,38,.08); }

/* ── Facts grid ── */
.bz-facts       { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bz-fact__label { font-size:11px; color:var(--text-m,#9ca3af); margin-bottom:2px; }
.bz-fact__val   { font-size:14px; font-weight:700; color:var(--ink,#0a0c18); }
.bz-fact__val--sm { font-size:12px; }

/* ── Stepper ── */
.bz-stepper    { display:flex; flex-direction:column; }
.bz-step       { display:flex; gap:12px; }
.bz-step__left { display:flex; flex-direction:column; align-items:center; }
.bz-step__dot  { width:28px; height:28px; border-radius:50%; border:2px solid var(--border,#e5e7eb); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--text-m,#9ca3af); background:var(--white,#fff); flex-shrink:0; }
.bz-step.done   .bz-step__dot { background:var(--ok,#22c55e); border-color:var(--ok,#22c55e); color:#fff; }
.bz-step.active  .bz-step__dot { background:var(--blue,#c725eb); border-color:var(--blue,#c725eb); color:#fff; }
.bz-step__line    { width:2px; flex:1; min-height:16px; background:var(--border,#e5e7eb); }
.bz-step:last-child .bz-step__line { display:none; }
.bz-step__content { padding-bottom:16px; }
.bz-step__title   { font-size:13px; font-weight:700; color:var(--ink,#0a0c18); }
.bz-step__sub     { font-size:12px; color:var(--text-s,#6b7280); line-height:1.5; margin-top:2px; }
.bz-step__time    { font-size:11px; color:var(--text-m,#9ca3af); margin-top:4px; }

/* ── Requirements checklist ── */
.bz-reqs { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.bz-req  { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:var(--off,#f9fafb); border:1px solid var(--border,#e5e7eb); }
.bz-req.done { opacity:.6; }
.bz-req__check { width:20px; height:20px; border-radius:50%; border:2px solid var(--border,#e5e7eb); display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }
.bz-req.done .bz-req__check { background:var(--ok,#22c55e); border-color:var(--ok,#22c55e); color:#fff; }
.bz-req__label { flex:1; font-size:12.5px; color:var(--ink,#0a0c18); }
.bz-req__badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:6px; }
.bz-req__badge--done { background:rgba(34,197,94,.1); color:var(--ok,#22c55e); }
.bz-req__badge--req  { background:rgba(245,158,11,.1); color:var(--amber,#f59e0b); }
.bz-req__badge--opt  { background:rgba(156,163,175,.1); color:var(--text-m,#9ca3af); }

.bz-chase-btn { width:100%; padding:10px; border:1.5px solid var(--border,#e5e7eb); border-radius:10px; background:var(--white,#fff); font-size:12.5px; font-weight:700; color:var(--ink,#0a0c18); cursor:pointer; }

/* ── Activity feed ── */
.bz-feed      { display:flex; flex-direction:column; gap:12px; }
.bz-feed-item { display:flex; gap:10px; align-items:flex-start; }
.bz-feed-item__dot { width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0; background:var(--border,#e5e7eb); }
.bz-feed-item__dot--blue  { background:var(--blue,#c725eb); }
.bz-feed-item__dot--ok    { background:var(--ok,#22c55e); }
.bz-feed-item__dot--amber { background:var(--amber,#f59e0b); }
.bz-feed-item__dot--grey  { background:var(--text-m,#9ca3af); }
.bz-feed-item__title { font-size:12.5px; color:var(--ink,#0a0c18); font-weight:600; }
.bz-feed-item__time  { font-size:11px; color:var(--text-m,#9ca3af); }


/* ═══════════════════════════════════════════════
   CONFIRM DIALOG
═══════════════════════════════════════════════ */
.bz-confirm-overlay { position:fixed; inset:0; background:rgba(10,12,18,.55); backdrop-filter:blur(6px); z-index:900; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .2s; }
.bz-confirm-overlay.open { opacity:1; pointer-events:all; }

.bz-confirm       { background:var(--white,#fff); border-radius:18px; padding:28px; width:100%; max-width:400px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.15); }
.bz-confirm__icon  { font-size:32px; margin-bottom:12px; }
.bz-confirm__title { font-family:var(--font-d,Georgia); font-size:1.2rem; font-weight:700; color:var(--ink,#0a0c18); margin-bottom:8px; }
.bz-confirm__msg   { font-size:13.5px; color:var(--text-s,#6b7280); line-height:1.6; margin-bottom:20px; }
.bz-confirm__actions { display:flex; gap:10px; }


/* ═══════════════════════════════════════════════
   AI CHAT WIDGET
═══════════════════════════════════════════════ */
.bz-ai { background:var(--card-dark,#111318); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; }

.bz-ai__head   { display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
.bz-ai__ava    { width:32px; height:32px; border-radius:10px; background:var(--blue,#c725eb); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; color:#fff; flex-shrink:0; }
.bz-ai__name   { font-size:13px; font-weight:700; color:#fff; }
.bz-ai__status { font-size:11px; color:rgba(255,255,255,.4); display:flex; align-items:center; gap:5px; }
.bz-ai__badge  { margin-left:auto; font-size:10px; font-weight:700; padding:3px 8px; border-radius:10px; background:rgba(255,255,255,.1); color:rgba(255,255,255,.5); }
.bz-ai__dot    { width:6px; height:6px; border-radius:50%; background:var(--ok,#22c55e); animation:bzPulse 2s infinite; }

@keyframes bzPulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }

.bz-ai__msgs { padding:16px 18px; min-height:100px; max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.bz-ai-bub   { padding:10px 14px; border-radius:12px 12px 12px 4px; background:rgba(255,255,255,.06); color:rgba(255,255,255,.75); font-size:13px; line-height:1.6; max-width:90%; }
.bz-ai-bub.user { align-self:flex-end; background:var(--blue,#c725eb); color:#fff; border-radius:12px 12px 4px 12px; }

.bz-ai__input { display:flex; gap:8px; padding:12px 14px; border-top:1px solid rgba(255,255,255,.06); }
.bz-ai__field { flex:1; height:36px; border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:0 12px; background:rgba(255,255,255,.04); color:#fff; font-family:var(--font-b,sans-serif); font-size:13px; outline:none; }
.bz-ai__field::placeholder { color:rgba(255,255,255,.3); }
.bz-ai__send { width:36px; height:36px; border-radius:10px; background:var(--blue,#c725eb); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }


/* ═══════════════════════════════════════════════
   WELCOME MODAL
═══════════════════════════════════════════════ */
.bz-welcome-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 12, 18, .6);
  backdrop-filter: blur(8px);
  z-index: 850;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.bz-welcome-overlay.open { opacity: 1; pointer-events: all; }

.bz-welcome {
  background: var(--white, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 24px;
  width: 100%; max-width: 520px;
  box-shadow: 0 32px 100px rgba(10, 12, 18, .25);
  position: relative;
  overflow: hidden;
  transform: scale(.9) translateY(30px);
  opacity: 0;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .35s ease;
}
.bz-welcome-overlay.open .bz-welcome {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.bz-welcome__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
  cursor: pointer; font-size: 18px;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.bz-welcome__close:hover { background: rgba(255,255,255,.3); }

/* ── Hero section ── */
.bz-welcome__hero {
  display: flex; align-items: center; gap: 20px;
  padding: 28px 28px 20px;
  background: linear-gradient(135deg, #0a0c18 0%, #1a1030 100%);
  position: relative;
}
.bz-welcome__hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #c725eb, #7c3aed, #c725eb);
}
.bz-welcome__img {
  width: 90px; height: 90px;
  border-radius: 18px;
  object-fit: cover;
  border: 2px solid rgba(199, 37, 235, .3);
  box-shadow: 0 8px 24px rgba(199, 37, 235, .2);
  flex-shrink: 0;
}
.bz-welcome__badge {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #c725eb;
  background: rgba(199, 37, 235, .15);
  border: 1px solid rgba(199, 37, 235, .25);
  border-radius: 6px;
  padding: 3px 10px;
  margin-bottom: 8px;
}
.bz-welcome__title {
  font-family: var(--font-d, Georgia);
  font-size: 1.4rem; font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  line-height: 1.2;
}
.bz-welcome__sub {
  font-size: 13px; color: rgba(255,255,255,.55);
  line-height: 1.55;
}

/* ── Quick-start action buttons ── */
.bz-welcome__actions {
  padding: 20px 24px 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.bz-welcome__btn {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 14px;
  background: var(--white, #fff);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  text-align: left;
  width: 100%;
}
.bz-welcome__btn:hover {
  border-color: var(--blue, #c725eb);
  box-shadow: 0 4px 16px rgba(199, 37, 235, .08);
  transform: translateY(-1px);
}
.bz-welcome__btn--primary {
  background: linear-gradient(135deg, rgba(199,37,235,.06) 0%, rgba(124,58,237,.06) 100%);
  border-color: rgba(199, 37, 235, .25);
}
.bz-welcome__btn-icon {
  font-size: 22px;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--off, #f9fafb);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bz-welcome__btn--primary .bz-welcome__btn-icon {
  background: rgba(199, 37, 235, .1);
}
.bz-welcome__btn-body { flex: 1; }
.bz-welcome__btn-title {
  font-size: 14px; font-weight: 700;
  color: var(--ink, #0a0c18);
  margin-bottom: 1px;
}
.bz-welcome__btn-sub {
  font-size: 12px; color: var(--text-s, #6b7280);
}
.bz-welcome__btn-arrow {
  font-size: 20px; font-weight: 300;
  color: var(--text-m, #9ca3af);
  flex-shrink: 0;
  transition: transform .2s;
}
.bz-welcome__btn:hover .bz-welcome__btn-arrow {
  transform: translateX(3px);
  color: var(--blue, #c725eb);
}

/* ── Dismiss checkbox ── */
.bz-welcome__dismiss {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 24px 20px;
  cursor: pointer;
  font-size: 12.5px; color: var(--text-m, #9ca3af);
  font-weight: 500;
}
.bz-welcome__dismiss:hover { color: var(--text-s, #6b7280); }

/* ═══════════════════════════════════════════════
   REFERRAL SENT CONFIRMATION
═══════════════════════════════════════════════ */
.bz-refconf-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 12, 18, .6);
  backdrop-filter: blur(8px);
  z-index: 860;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.bz-refconf-overlay.open { opacity: 1; pointer-events: all; }

.bz-refconf {
  background: var(--white, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 22px;
  width: 100%; max-width: 480px;
  box-shadow: 0 32px 100px rgba(10, 12, 18, .25);
  overflow: hidden;
  transform: scale(.9) translateY(24px);
  opacity: 0;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}
.bz-refconf-overlay.open .bz-refconf {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* ── Header ── */
.bz-refconf__header {
  text-align: center;
  padding: 32px 28px 20px;
  background: linear-gradient(135deg, rgba(34,197,94,.04) 0%, rgba(34,197,94,.08) 100%);
  border-bottom: 1px solid rgba(34,197,94,.12);
}
.bz-refconf__check {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ok, #22c55e);
  color: #fff;
  font-size: 26px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 8px 24px rgba(34, 197, 94, .25);
  animation: bzCheckPop .5s cubic-bezier(.16, 1, .3, 1) .2s both;
}
@keyframes bzCheckPop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.bz-refconf__title {
  font-family: var(--font-d, Georgia);
  font-size: 1.3rem; font-weight: 700;
  color: var(--ink, #0a0c18);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.bz-refconf__sub {
  font-size: 13.5px; color: var(--text-s, #6b7280);
  line-height: 1.6;
}
.bz-refconf__sub strong { color: var(--ink, #0a0c18); }

/* ── Body ── */
.bz-refconf__body { padding: 20px 28px; }
.bz-refconf__label {
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue, #c725eb);
  margin-bottom: 14px;
}
.bz-refconf__steps { display: flex; flex-direction: column; gap: 12px; }

.bz-refconf__step {
  display: flex; gap: 12px; align-items: flex-start;
}
.bz-refconf__step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--off, #f9fafb);
  border: 1.5px solid var(--border, #e5e7eb);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  color: var(--blue, #c725eb);
  flex-shrink: 0;
}
.bz-refconf__step-title {
  font-size: 13.5px; font-weight: 700;
  color: var(--ink, #0a0c18);
  margin-bottom: 2px;
}
.bz-refconf__step-sub {
  font-size: 12.5px; color: var(--text-s, #6b7280);
  line-height: 1.55;
}
.bz-refconf__step-sub strong { color: var(--ink, #0a0c18); }

/* ── Footer ── */
.bz-refconf__footer {
  padding: 16px 28px 24px;
  display: flex;
}
.bz-refconf__footer .bz-btn-submit {
  flex: 1;
  min-height: 35px;
}


/* ── Performance value colors (dashboard) ── */
.bd-perf-item__val--ok   { color: var(--ok); }
.bd-perf-item__val--blue { color: var(--blue); }
.bd-perf-item__val--warn { color: var(--warn, var(--amber)); }

/* ── Performance avg row ── */
.bd-perf-avg { padding: 0 16px 14px; display: flex; align-items: center; justify-content: space-between; }
.bd-perf-avg__label { font-size: 12px; color: var(--text-s); }
.bd-perf-avg__val { font-family: var(--font-d); font-size: 1.1rem; font-weight: 700; color: var(--ink); }

/* ── Commission ring month block ── */
.bd-ring-month-wrap { margin-left: auto; text-align: right; }
.bd-ring-month-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-m); margin-bottom: 4px; }
.bd-ring-month-val { font-family: var(--font-d); font-size: 1.4rem; font-weight: 700; color: var(--ok); letter-spacing: -0.02em; }
.bd-ring-month-sub { font-size: 11px; color: var(--text-s); margin-top: 2px; }

/* ═══════════════════════════════════════════════
   DARK THEME OVERRIDES
═══════════════════════════════════════════════ */
[data-theme="dark"] .bz-toast { background: var(--surface, #151B2E); }
[data-theme="dark"] .bz-modal { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .bz-modal__close { background: var(--surface); border-color: var(--border); color: var(--ink-3); }
[data-theme="dark"] .bz-drawer { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .bz-drawer__head { border-color: var(--border); }
[data-theme="dark"] .bz-drawer__close { background: var(--surface); border-color: var(--border); color: var(--ink-3); }
[data-theme="dark"] .bz-drawer__footer { border-color: var(--border); }
[data-theme="dark"] .bz-drawer__footer-btn--outline { background: var(--surface); border-color: var(--border); color: var(--ink-3); }
[data-theme="dark"] .bz-btn-cancel { background: var(--surface); border-color: var(--border); color: var(--ink-3); }
[data-theme="dark"] .bz-input,
[data-theme="dark"] .bz-textarea { background: var(--surface); border-color: var(--border); color: var(--ink); }
[data-theme="dark"] .bz-confirm { background: var(--white); border-color: var(--border); }

/* ═══════════════════════════════════════════════
   RESPONSIVE — Mobile & Tablet
═══════════════════════════════════════════════ */
@media(max-width:1200px){
  .bd-stats{grid-template-columns:repeat(3,1fr)!important}
  .bk-stats{grid-template-columns:repeat(3,1fr)!important}
  .bz-grid--2{grid-template-columns:1fr!important}
}
@media(max-width:900px){
  /* ── Unlock scrolling on mobile ── */
  html,body{overflow:auto!important;height:auto!important}
  .db-layout{height:auto!important;min-height:calc(var(--vh,1vh)*100);overflow:visible!important}
  .db-main-wrap{overflow:visible!important}

  .bd-stats{grid-template-columns:repeat(2,1fr)!important}
  .bk-stats{grid-template-columns:repeat(2,1fr)!important}
  .bd-page,.ba-page,.bk-page{padding:1rem 1rem!important}
  .bd-greeting__name{font-size:clamp(1.4rem,4vw,2rem)!important}
  .bz-grid--2,.bz-facts{grid-template-columns:1fr!important}
  .bz-modal{width:95vw!important;max-width:95vw!important;margin:10px!important}
  .bz-drawer{width:100vw!important;right:-100vw!important;height:calc(var(--vh,1vh)*100)!important}
  .bz-drawer.open{right:0!important}
  .bk-table-wrap{border-radius:10px}
  .db-nav__portal-tag{font-size:11px;padding:0 12px;letter-spacing:.06em}
  .bz-company-bar__inner{padding:0 12px}
}
@media(max-width:600px){
  .bd-stats{grid-template-columns:1fr!important}
  .bk-stats{grid-template-columns:1fr!important}
  .bd-page,.ba-page,.bk-page{padding:0.75rem 0.75rem!important}
  .bd-greeting__name{font-size:1.3rem!important}
  .bd-greeting__eyebrow{font-size:9px!important}
  .bd-stat{padding:14px 12px!important}
  .bd-stat__val{font-size:24px!important}
  .bd-stat__label{font-size:10px!important}
  .db-nav__title{display:none}
  .db-nav__portal-tag{font-size:10px;padding:0 10px}
  .bz-company-bar{display:none}
  .bk-table th:nth-child(n+4),.bk-table td:nth-child(n+4){min-width:100px}
  .ba-header .ba-title{font-size:1.3rem!important}
  .bz-modal{padding:16px!important}
  .bz-modal__title{font-size:18px!important}
  .bo-drawer{width:100vw!important}
  .bd-panel{padding:16px!important}
  .bd-panel__title{font-size:16px!important}
  .bd-action-banner{flex-direction:column!important;text-align:center}
  .bz-drawer__foot{flex-direction:column}
  .bz-drawer__footer-btn{width:100%}
}
@media(max-width:400px){
  .bd-stat__icon{display:none}
  .bd-stat{padding:10px 10px!important}
  .bz-toast{left:8px!important;right:8px!important;min-width:0!important}
}
[data-theme="dark"] .bz-step__dot { background: var(--surface); border-color: var(--border); }

/* ── Header Profile Pill (matches admin design) ── */
.bz-header-profile{
  display:flex;align-items:center;gap:8px;
  background:var(--off);border:1px solid var(--border);
  border-radius:99px;padding:4px 12px 4px 4px;cursor:pointer;
  transition:all .15s;
}
.bz-header-profile:hover{border-color:var(--blue);background:rgba(199,37,235,.04)}
.bz-header-profile__avatar{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),#7c3aed);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-size:11px;font-weight:700;color:#fff;
  flex-shrink:0;overflow:hidden;
}
.bz-header-profile__avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.bz-header-profile__info{display:flex;flex-direction:column;line-height:1.2}
.bz-header-profile__name{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap}
.bz-header-profile__role{font-size:10px;color:var(--blue);font-weight:600;letter-spacing:.04em}
[data-theme="dark"] .bz-header-profile{background:rgba(255,255,255,.04);border-color:var(--border)}
[data-theme="dark"] .bz-header-profile:hover{background:rgba(199,37,235,.08)}
@media(max-width:600px){
  .bz-header-profile__info{display:none}
  .bz-header-profile{padding:4px}
}