/* ==========================================================================
   RoboCRM application styles
   Layout: fixed sidebar (inline-start) + top bar + content. Logical properties keep RTL (Hebrew) correct.
   Theme tokens live on :root and switch automatically with prefers-color-scheme.
   ========================================================================== */

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

:root {
  --font: 'Inter', 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bg: #f4f6fb;
  --bg-elev: #ffffff;
  --bg-soft: #f8fafc;
  --sidebar-bg: #0f172a;
  --sidebar-fg: #cbd5e1;
  --sidebar-fg-strong: #ffffff;
  --sidebar-hover: rgba(255,255,255,.06);
  --sidebar-active: linear-gradient(135deg, rgba(99,102,241,.95), rgba(139,92,246,.95));
  --text: #0f172a;
  --text-muted: #64748b;
  --text-soft: #94a3b8;
  --border: #e5e7eb;
  --border-strong: #cbd5e1;
  --primary: #6366f1;
  --primary-2: #8b5cf6;
  --primary-soft: #eef2ff;
  --primary-ink: #4338ca;
  --success: #10b981;
  --success-soft: #d1fae5;
  --warning: #f59e0b;
  --warning-soft: #fef3c7;
  --danger: #ef4444;
  --danger-soft: #fee2e2;
  --info: #0ea5e9;
  --info-soft: #e0f2fe;
  --violet-soft: #ede9fe;
  --slate-soft: #f1f5f9;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --shadow: 0 4px 16px -4px rgba(15,23,42,.10), 0 2px 6px -2px rgba(15,23,42,.06);
  --shadow-lg: 0 20px 50px -20px rgba(15,23,42,.25);
  --radius: 14px;
  --radius-sm: 10px;
  --sidebar-w: 248px;
  --topbar-h: 68px;
  --page-pad: 28px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120;
    --bg-elev: #111a2e;
    --bg-soft: #16213a;
    --sidebar-bg: #070d1a;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --text-soft: #64748b;
    --border: #1f2a44;
    --border-strong: #334155;
    --primary-soft: rgba(99,102,241,.16);
    --primary-ink: #c7d2fe;
    --success-soft: rgba(16,185,129,.16);
    --warning-soft: rgba(245,158,11,.18);
    --danger-soft: rgba(239,68,68,.16);
    --info-soft: rgba(14,165,233,.16);
    --violet-soft: rgba(139,92,246,.18);
    --slate-soft: rgba(148,163,184,.14);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow: 0 8px 24px -8px rgba(0,0,0,.6);
    --shadow-lg: 0 24px 60px -24px rgba(0,0,0,.8);
  }
}

/* ---------- base ---------- */
html { font-size: 15px; }
body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; margin: 0; -webkit-font-smoothing: antialiased; }
a { color: var(--primary); }
.btn { border-radius: var(--radius-sm) !important; font-weight: 600; letter-spacing: .01em; }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; }
.form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--border); background: var(--bg-elev); color: var(--text); font-size: .9rem; }
.form-control::placeholder { color: var(--text-soft); }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(99,102,241,.18); background: var(--bg-elev); color: var(--text); }
.form-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: .3rem; }
.input-group .btn { border-radius: var(--radius-sm) !important; }
.input-group > :not(:first-child) { margin-inline-start: -1px; }
.input-group > .form-select:not(:last-child), .input-group > .form-control:not(:last-child) { border-start-end-radius: 0 !important; border-end-end-radius: 0 !important; }
.input-group > .btn:not(:last-child) { border-start-end-radius: 0 !important; border-end-end-radius: 0 !important; }
.input-group > .btn:not(:first-child) { border-start-start-radius: 0 !important; border-end-start-radius: 0 !important; }
textarea { resize: vertical; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); border: 0; box-shadow: 0 6px 16px -6px rgba(99,102,241,.6); }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, #5558e6, #7c4ff0); box-shadow: 0 8px 20px -6px rgba(99,102,241,.7); }
.btn-success { background: linear-gradient(135deg, #10b981, #059669); border: 0; }
.btn-outline-secondary { border-color: var(--border-strong); color: var(--text); background: var(--bg-elev); }
.btn-outline-secondary:hover { background: var(--slate-soft); color: var(--text); border-color: var(--border-strong); }
.btn-outline-primary { border-color: var(--primary); color: var(--primary-ink); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-outline-danger:hover { color: #fff; }
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--slate-soft); color: var(--text); }
.badge { font-weight: 600; letter-spacing: .02em; }
.table { color: var(--text); --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-hover-bg: var(--bg-soft); --bs-table-hover-color: var(--text); }
.table > :not(caption) > * > * { border-bottom-color: var(--border); }
.table-light, .table thead.table-light th { --bs-table-bg: var(--bg-soft); background: var(--bg-soft); color: var(--text-muted); }
.text-muted { color: var(--text-muted) !important; }
.border { border-color: var(--border) !important; }
.card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); }
.card .list-group-item { background: transparent; color: var(--text); border-color: var(--border); }
.list-group-item { background: var(--bg-elev); color: var(--text); border-color: var(--border); }
.nav-tabs { border-color: var(--border); }
.nav-tabs .nav-link { color: var(--text-muted); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.nav-tabs .nav-link.active { background: var(--bg-elev); color: var(--text); border-color: var(--border) var(--border) var(--bg-elev); }
.dropdown-menu { background: var(--bg-elev); border-color: var(--border); box-shadow: var(--shadow); border-radius: var(--radius-sm); }
.dropdown-item { color: var(--text); }
.dropdown-item:hover { background: var(--slate-soft); color: var(--text); }
.form-check-input { border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

/* ---------- shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--sidebar-bg); color: var(--sidebar-fg);
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 18px 14px; gap: 6px;
  border-inline-end: 1px solid rgba(255,255,255,.06); z-index: 1030;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.sidebar > * { flex-shrink: 0; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.sidebar .brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 18px; text-decoration: none; color: var(--sidebar-fg-strong); }
.sidebar .brand-icon {
  width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: .02em;
  box-shadow: 0 8px 20px -8px rgba(99,102,241,.9);
}
.sidebar .brand-wrap { display: flex; flex-direction: column; line-height: 1.15; }
.sidebar .brand-name { font-weight: 800; font-size: 1.05rem; letter-spacing: .01em; color: #fff; }
.sidebar .tagline { font-size: .66rem; color: var(--text-soft); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-top: 3px; }
.sidebar .sb-section { font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; color: #64748b; font-weight: 700; padding: 14px 10px 6px; }
.sidebar .sb-link {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; padding: 10px 12px; border: 0; border-radius: 12px;
  background: transparent; color: var(--sidebar-fg); font-weight: 600; font-size: .9rem; transition: background .15s ease, color .15s ease, transform .15s ease;
  box-shadow: none !important; margin: 0 !important;
}
.sidebar .sb-link:hover { background: var(--sidebar-hover); color: #fff; transform: translateX(2px); }
[dir="rtl"] .sidebar .sb-link:hover { transform: translateX(-2px); }
.sidebar .sb-link.active { background: var(--sidebar-active); color: #fff; box-shadow: 0 10px 24px -12px rgba(99,102,241,.9) !important; }
.sidebar .sb-link .ico { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; margin: 0; opacity: .95; }
.sidebar .sb-link .lbl { flex: 1; }
.sidebar .sb-link .cnt { font-size: .66rem; background: rgba(255,255,255,.12); padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.sidebar .sb-link.danger:hover { background: rgba(239,68,68,.18); color: #fecaca; }
.sidebar .sb-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.sidebar .user-card { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; }
.sidebar .user-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #22d3ee, #6366f1); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex: 0 0 38px; }
.sidebar .user-meta { display: flex; flex-direction: column; min-width: 0; }
.sidebar .user-meta .user-info-mini { font-size: .8rem; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .user-meta .user-sub { font-size: .66rem; color: var(--text-soft); }
.sidebar .lang-switch .lang-select { width: 100%; background: rgba(255,255,255,.06); color: var(--sidebar-fg); border-color: rgba(255,255,255,.12); font-size: .78rem; padding: .35rem 2rem .35rem .7rem; }
[dir="rtl"] .sidebar .lang-switch .lang-select { padding: .35rem .7rem .35rem 2rem; }
.sidebar .lang-switch .lang-select option { color: #0f172a; }
.sidebar .lang-switch { display: block; padding: 4px 6px 8px; }
#tenant_switch_wrap { padding: 4px 6px 8px; }
#tenant_switch_wrap.d-none { display: none !important; }

/* sidebar groups (collapsible) */
.sidebar .sb-link { padding-block: 9px; }
.sidebar .sb-group-head {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 12px; background: transparent;
  color: var(--sidebar-fg); font-weight: 600; font-size: .9rem; text-align: start; transition: background .15s ease, color .15s ease;
}
.sidebar .sb-group-head:hover { background: var(--sidebar-hover); color: #fff; }
.sidebar .sb-group-head:focus-visible, .sidebar .user-card:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }
.sidebar .sb-group-head .ico { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.sidebar .sb-group-head .lbl { flex: 1; }
.sidebar .chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .55; transition: transform .18s ease; margin-inline-end: 4px; }
.sidebar .sb-group-head .chev { transform: rotate(-45deg); }
[dir="rtl"] .sidebar .sb-group-head .chev { transform: rotate(135deg); }
.sidebar .sb-group.open > .sb-group-head .chev { transform: rotate(45deg); }
.sidebar .sb-group-body { display: none; flex-direction: column; gap: 2px; padding-inline-start: 14px; margin: 2px 0 4px; border-inline-start: 1px solid rgba(255,255,255,.08); margin-inline-start: 22px; }
.sidebar .sb-group.open > .sb-group-body { display: flex; }
.sidebar .sb-group-body .sb-link { padding-block: 7px; font-size: .86rem; }
.sidebar .sb-group.d-none { display: none !important; }
.sidebar #sb_admin_section { display: none !important; }
/* account menu behind the user card */
.sidebar .user-card { width: 100%; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: start; padding: 8px 10px; transition: background .15s ease; }
.sidebar .user-card:hover { background: var(--sidebar-hover); }
.sidebar .user-card .user-meta { flex: 1; }
.sidebar .user-card .chev { transform: rotate(-135deg); }
.sidebar .sb-footer.menu-open .user-card .chev { transform: rotate(45deg); }
.sidebar .sb-user-menu { display: none; flex-direction: column; gap: 2px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar .sb-footer.menu-open .sb-user-menu { display: flex; }
.sidebar .sb-footer { padding-top: 8px; }
/* platform mode (super admin): few entries, show them flat */
body.platform-mode .sidebar .sb-group-head { display: none; }
body.platform-mode .sidebar .sb-group-body { display: flex; padding: 0; margin: 0; border: 0; }
body.platform-mode .sidebar #sb_admin_section { display: block !important; }
#tenant_switch_wrap .form-select { background-color: rgba(255,255,255,.06); color: var(--sidebar-fg); border-color: rgba(255,255,255,.12); font-size: .78rem; }
#tenant_switch_wrap .form-select option { color: #0f172a; }

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 1020; height: var(--topbar-h); display: flex; align-items: center; gap: 16px; padding: 0 var(--page-pad);
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border);
}
.topbar .page-title { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; margin: 0; display: flex; align-items: center; gap: 10px; color: var(--text); }
.topbar #header_stats { display: none; font-size: .7rem; font-weight: 700; color: var(--primary-ink); background: var(--primary-soft); padding: 4px 10px; border-radius: 999px; }
.topbar .quick-search { position: relative; width: min(380px, 100%); margin-inline-start: auto; }
.topbar .quick-search .icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); font-size: .85rem; opacity: .55; pointer-events: none; }
.topbar .quick-search input { border-radius: 999px; padding: .55rem 1rem .55rem 2.5rem; background: var(--bg-elev); box-shadow: var(--shadow-sm); border-color: var(--border); }
[dir="rtl"] .topbar .quick-search input { padding: .55rem 2.5rem .55rem 1rem; }
.topbar .topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar .btn-cta { padding: .55rem 1.1rem; border-radius: 999px !important; white-space: nowrap; }
.topbar .btn-cta .plus { font-size: 1.05rem; line-height: 1; margin-inline-end: 6px; }
.topbar .icon-btn { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px !important; background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-muted); box-shadow: var(--shadow-sm); }
.topbar .icon-btn:hover { color: var(--text); border-color: var(--border-strong); }

.content { padding: 22px var(--page-pad) 40px; display: flex; flex-direction: column; gap: 18px; }

/* ---------- stat / pipeline cards ---------- */
#pipeline_summary { margin: 0 !important; }
#pipeline_cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.stat-card {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-card::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--accent, var(--primary)); }
.stat-card .stat-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; }
.stat-card .stat-label .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--primary)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, var(--primary)) 18%, transparent); }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.stat-card .stat-value small { font-size: .75rem; font-weight: 600; color: var(--text-muted); margin-inline-start: 6px; letter-spacing: 0; }
.stat-card .stat-sub { font-size: .78rem; color: var(--text-muted); display: flex; justify-content: space-between; gap: 8px; }
.stat-card .stat-sub b { color: var(--text); font-weight: 600; }
.stat-card .stat-bar { height: 5px; background: var(--slate-soft); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.stat-card .stat-bar > span { display: block; height: 100%; background: var(--accent, var(--primary)); border-radius: 999px; }

/* ---------- panels ---------- */
.panel { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.panel-head .panel-title { font-weight: 700; font-size: .95rem; margin: 0; display: flex; align-items: center; gap: 8px; }
.panel-head .panel-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel-body { padding: 16px 18px; }

/* filters */
#filters_panel .panel-body { padding-top: 14px; }
#filters_panel .form-control, #filters_panel .form-select { background: var(--bg-soft); }
#filters_advanced { display: none; }
#filters_panel.expanded #filters_advanced { display: flex; }
#btn_toggle_filters .chev { display: inline-block; transition: transform .2s ease; margin-inline-start: 6px; font-size: .7rem; }
#filters_panel.expanded #btn_toggle_filters .chev { transform: rotate(180deg); }
#filters_panel .saved-group .btn { font-size: .72rem; padding: .35rem .55rem; }
.filter-chip { font-size: .7rem; background: var(--primary-soft); color: var(--primary-ink); padding: 3px 10px; border-radius: 999px; font-weight: 700; }

/* table */
#clients_panel .table-responsive { max-height: none; border: 0 !important; border-radius: 0 0 var(--radius) var(--radius); }
#clients_table { margin: 0; font-size: .9rem; }
#clients_table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--bg-soft); color: var(--text-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
#clients_table tbody td { padding: 12px 16px; vertical-align: middle; border-bottom: 1px solid var(--border); }
#clients_table tbody tr:last-child td { border-bottom: 0; }
#clients_table tbody tr { transition: background .12s ease; }
#clients_table tbody tr:hover { background: var(--bg-soft); }
.cell-person { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.avatar { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; color: #fff; flex: 0 0 38px; letter-spacing: .02em; }
.avatar.c0 { background: linear-gradient(135deg,#6366f1,#8b5cf6); } .avatar.c1 { background: linear-gradient(135deg,#0ea5e9,#2563eb); }
.avatar.c2 { background: linear-gradient(135deg,#10b981,#059669); } .avatar.c3 { background: linear-gradient(135deg,#f59e0b,#ea580c); }
.avatar.c4 { background: linear-gradient(135deg,#ec4899,#be185d); } .avatar.c5 { background: linear-gradient(135deg,#14b8a6,#0f766e); }
.cell-person .who { display: flex; flex-direction: column; min-width: 0; }
.cell-person .who .nm { font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-person .who .sub { font-size: .76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-person .who .sub .sep { opacity: .4; margin: 0 5px; }
.chip { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--slate-soft); color: var(--text-muted); white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: capitalize; white-space: nowrap; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.pill-lead { background: var(--info-soft); color: #0369a1; }
.pill-prospect { background: var(--violet-soft); color: #6d28d9; }
.pill-customer { background: var(--success-soft); color: #047857; }
.pill-active { background: var(--success-soft); color: #047857; }
.pill-inactive { background: var(--slate-soft); color: var(--text-muted); }
.pill-suspended { background: var(--danger-soft); color: #b91c1c; }
@media (prefers-color-scheme: dark) {
  .pill-lead { color: #7dd3fc; } .pill-prospect { color: #c4b5fd; } .pill-customer, .pill-active { color: #6ee7b7; } .pill-suspended { color: #fca5a5; }
}
.score { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.score .track { flex: 1; height: 6px; background: var(--slate-soft); border-radius: 999px; overflow: hidden; }
.score .track > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f59e0b, #10b981); }
.score.low .track > span { background: linear-gradient(90deg, #f87171, #f59e0b); }
.score.high .track > span { background: linear-gradient(90deg, #34d399, #10b981); }
.score .val { font-size: .78rem; font-weight: 700; color: var(--text-muted); width: 26px; text-align: end; }
.tasks-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--warning-soft); color: #b45309; font-weight: 700; font-size: .75rem; }
@media (prefers-color-scheme: dark) { .tasks-pill { color: #fcd34d; } }
.actions-cell { white-space: nowrap; width: 1%; text-align: end; }
#clients_table th.actions-cell { text-align: end; }
.row-actions { display: inline-flex; gap: 4px; opacity: .55; transition: opacity .12s ease; }
#clients_table tbody tr:hover .row-actions { opacity: 1; }
.row-actions .btn { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px !important; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted); font-size: .85rem; min-width: 0 !important; }
.row-actions .btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg-soft); }
.row-actions .btn.btn-del:hover { color: #fff; background: var(--danger); border-color: var(--danger); }
.row-actions .btn.btn-edit:hover { color: #fff; background: var(--primary); border-color: var(--primary); }
.empty-state { padding: 48px 16px; text-align: center; color: var(--text-muted); }
.empty-state .big { font-size: 2rem; margin-bottom: 8px; }

/* pagination */
.pagination { gap: 4px; margin: 0; }
.pagination .page-link { border-radius: 9px !important; border: 1px solid var(--border); color: var(--text-muted); background: var(--bg-elev); font-weight: 600; font-size: .8rem; min-width: 34px; text-align: center; }
.pagination .page-link:hover { background: var(--bg-soft); color: var(--text); }
.pagination .page-item.active .page-link { background: linear-gradient(135deg, var(--primary), var(--primary-2)); border-color: transparent; color: #fff; }
.panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border); font-size: .8rem; color: var(--text-muted); flex-wrap: wrap; }

/* footer */
.app-footer { padding: 18px var(--page-pad) 26px; font-size: .78rem; color: var(--text-soft); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.app-footer a { color: var(--text-muted); text-decoration: none; }
.app-footer a:hover { color: var(--text); }

/* ---------- modals ---------- */
.modal-dialog { max-width: min(80vw, 1200px) !important; width: min(80vw, 1200px) !important; }
.modal-dialog.modal-sm { max-width: 420px !important; width: min(92vw, 420px) !important; }
.modal-dialog.modal-fullscreen { width: min(80vw, 1200px) !important; max-width: min(80vw, 1200px) !important; margin: 1.75rem auto !important; height: auto !important; }
.modal-content { border: 0; border-radius: 18px; background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--border); padding: 16px 22px; }
.modal-title { font-weight: 800; letter-spacing: -.01em; }
.modal-footer { border-top: 1px solid var(--border); background: var(--bg-soft); border-radius: 0 0 18px 18px; }
.modal-body { background: var(--bg-elev); }
.btn-close { filter: none; }
@media (prefers-color-scheme: dark) { .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } }
#clientModal .modal-body { max-height: calc(100vh - 190px); overflow-y: auto; }
#clients_table td.actions-cell .btn { min-width: 0; }

/* kanban */
.kanban-board { min-height: calc(100vh - 160px); }
.kanban-column { flex: 0 0 270px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; max-height: 100%; }
.kanban-column-header { padding: .6rem .85rem; font-weight: 700; font-size: .85rem; border-bottom: 1px solid var(--border); background: var(--bg-elev); border-radius: var(--radius) var(--radius) 0 0; }
.kanban-cards { padding: .6rem; overflow-y: auto; gap: .55rem; display: flex; flex-direction: column; }
.kanban-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: .55rem .7rem; font-size: .8rem; cursor: grab; box-shadow: var(--shadow-sm); }
.kanban-card.dragging { opacity: .5; }
.kanban-drop-hover { outline: 2px dashed var(--primary); border-radius: var(--radius); }

/* suggestions */
#task_tags_suggest, #td_tag_suggest { position: absolute; z-index: 2000; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; max-height: 160px; overflow: auto; font-size: .75rem; display: none; box-shadow: var(--shadow); }
.suggestion-item.active { background: var(--primary-soft); }

/* loader & toast */
#loading_overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 55%, transparent); display: none; align-items: center; justify-content: center; z-index: 2000; backdrop-filter: blur(2px); }
#loading_overlay .spinner-border { width: 3rem; height: 3rem; color: var(--primary); }
#toast_stack { position: fixed; top: 1rem; inset-inline-end: 1rem; z-index: 3000; display: flex; flex-direction: column; gap: 8px; }
#toast_stack .toast { border-radius: 12px; box-shadow: var(--shadow); }

/* ---------- login view ---------- */
body.login-view { background: radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.35), transparent 60%), radial-gradient(900px 500px at 110% 110%, rgba(139,92,246,.35), transparent 60%), #0f172a; }
body.login-view .app-shell { display: none !important; }
body.login-view { display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
#login_box { max-width: 440px !important; width: 100%; margin: 0 !important; animation: rise .45s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#login_box .card { border: 1px solid rgba(255,255,255,.08); border-radius: 22px; background: rgba(255,255,255,.97); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.04); }
#login_box .card-body { padding: 2rem !important; }
#login_box .form-label { color: #475569; }
#login_box .btn-outline-secondary { background: #fff; color: #0f172a; border-color: #e2e8f0; }
#login_box .btn-outline-secondary:hover { background: #f1f5f9; }
#login_box .brand-badge { font-size: .75rem; letter-spacing: .14em; font-weight: 800; color: var(--primary-ink); text-transform: uppercase; }
#login_box .card-title { font-weight: 800; letter-spacing: -.01em; color: #0f172a; font-size: 1.4rem; }
#login_box .form-control { border-radius: 12px; padding: .7rem .95rem; background: #f8fafc; }
#login_box .btn-primary { border-radius: 12px !important; padding: .7rem; }
#login_box .btn-outline-secondary { border-radius: 12px !important; }
#login_box small.muted { color: #64748b; }
#login_box .lang-select { font-size: .78rem; }

/* ---------- responsive ---------- */
@media (min-width: 761px) and (max-width: 1100px) {
  :root { --sidebar-w: 76px; --page-pad: 18px; }
  .sidebar { padding: 14px 10px; }
  .sidebar .brand-wrap, .sidebar .sb-section, .sidebar .sb-link .lbl, .sidebar .sb-link .cnt, .sidebar .user-meta, .sidebar .lang-switch, #tenant_switch_wrap { display: none !important; }
  .sidebar .sb-link { justify-content: center; padding: 10px 0; }
  .sidebar .brand { justify-content: center; padding-bottom: 10px; }
  .sidebar .user-card { justify-content: center; padding: 8px 0; }
  /* icon rail: no group headers, every allowed entry as an icon */
  .sidebar .sb-group-head, .sidebar .chev { display: none !important; }
  .sidebar .sb-group-body { display: flex !important; padding: 0; margin: 0; border: 0; }
  .sidebar .sb-group-body .sb-link { padding: 10px 0; }
}
@media (max-width: 576px) {
  .desktop-only { display: none !important; }
  .topbar { height: auto; padding: 10px 14px; flex-wrap: wrap; }
  .topbar .quick-search { order: 3; width: 100%; margin: 0; }
  .content { padding: 14px; }
}

/* ==========================================================================
   Modals: inner components (forms, mini tables, badges, kanban, tasks dashboard)
   ========================================================================== */
.modal-header { padding: 18px 24px; }
.modal-title { font-size: 1.1rem; }
.modal-body { padding: 20px 24px; }
.modal-footer { padding: 14px 24px; gap: 8px; }
.modal .form-label { margin-bottom: .35rem; }
.modal .bg-light { background: var(--bg-soft) !important; }
.modal .border, .modal .border-top { border-color: var(--border) !important; }
.modal .text-muted { color: var(--text-muted) !important; }
.modal .table-secondary { --bs-table-bg: var(--slate-soft); }
.modal .form-control-sm, .modal .form-select-sm { font-size: .82rem; padding: .4rem .65rem; }
.section-title { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--primary-ink); display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.row > .section-title:first-child { margin-top: 0; }
.modal .sub-head, .modal .form-label.mb-0 { font-size: .8rem; font-weight: 800; text-transform: none; letter-spacing: 0; color: var(--text); }

/* soft badges everywhere (status / priority / stage) */
.badge { border-radius: 999px; padding: .32em .7em; font-size: .7rem; font-weight: 700; letter-spacing: .02em; }
.badge.text-bg-secondary { background: var(--slate-soft) !important; color: var(--text-muted) !important; }
.badge.text-bg-info      { background: var(--info-soft) !important; color: #0369a1 !important; }
.badge.text-bg-success   { background: var(--success-soft) !important; color: #047857 !important; }
.badge.text-bg-warning   { background: var(--warning-soft) !important; color: #b45309 !important; }
.badge.text-bg-danger    { background: var(--danger-soft) !important; color: #b91c1c !important; }
.badge.text-bg-primary   { background: var(--primary-soft) !important; color: var(--primary-ink) !important; }
.badge.text-bg-dark      { background: #1e293b !important; color: #e2e8f0 !important; }
.badge.text-bg-light     { background: var(--bg-soft) !important; color: var(--text-muted) !important; border-color: var(--border) !important; }
@media (prefers-color-scheme: dark) {
  .badge.text-bg-info { color: #7dd3fc !important; } .badge.text-bg-success { color: #6ee7b7 !important; }
  .badge.text-bg-warning { color: #fcd34d !important; } .badge.text-bg-danger { color: #fca5a5 !important; }
  .badge.text-bg-dark { background: #334155 !important; }
}
.badge-click { cursor: pointer; }
.badge-click:hover { filter: brightness(.93); }

/* mini tables inside modals */
.mini-table-wrap { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: auto; background: var(--bg-elev); }
.mini-table-wrap .table { margin: 0; font-size: .85rem; }
.mini-table-wrap .table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-soft); color: var(--text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.mini-table-wrap .table tbody td { padding: 9px 12px; vertical-align: middle; border-bottom: 1px solid var(--border); }
.mini-table-wrap .table tbody tr:last-child td { border-bottom: 0; }
.mini-table-wrap .table tbody tr:hover { background: var(--bg-soft); }
.mini-table-wrap .btn-group-sm .btn { padding: .2rem .5rem; font-size: .75rem; border-color: var(--border); background: var(--bg-elev); color: var(--text-muted); }
.mini-table-wrap .btn-group-sm .btn:hover { color: var(--text); background: var(--bg-soft); }
.mini-table-wrap .btn-group-sm .btn-outline-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.mini-table-wrap .btn-group-sm .btn-outline-success:hover { background: var(--success); border-color: var(--success); color: #fff; }
.mini-table-wrap th.sortable { cursor: pointer; }
.mini-table-wrap th.sortable:hover { color: var(--text); }

/* inline editors (deal / task quick forms) */
.inline-editor { background: var(--bg-soft); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 14px !important; margin-top: 12px !important; }
.inline-editor .form-label { font-size: .66rem; }

/* notes log */
.notes-log { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft); padding: 10px 12px; max-height: 180px; overflow: auto; font-size: .82rem; display: flex; flex-direction: column; gap: 6px; }
.notes-log:empty::before { content: '\2014'; color: var(--text-soft); }
.notes-log > div { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.notes-log > div:last-child { border-bottom: 0; }

/* tasks dashboard */
#td_quick .btn { border-radius: 999px !important; padding: .3rem .85rem; border-color: var(--border); color: var(--text-muted); background: var(--bg-elev); margin-inline-end: 4px; }
#td_quick .btn.active, #td_quick .btn:hover { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }
#td_quick_chip { background: var(--info-soft) !important; color: #0369a1 !important; }
#td_metrics { background: var(--bg-soft) !important; border-radius: var(--radius-sm) !important; padding: 12px 14px !important; }
#td_bulk_bar { background: var(--primary-soft) !important; border-color: transparent !important; border-radius: var(--radius-sm) !important; color: var(--primary-ink); }
#td_bulk_bar .btn { font-size: .75rem; }
.form-switch .form-check-input { width: 2.2em; height: 1.2em; }
.form-switch .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

/* kanban */
#kanban_board { padding: 4px; }
.kanban-column { flex: 1 1 290px; min-width: 270px; max-width: 380px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); max-height: calc(100vh - 220px); }
.saved-group .btn { white-space: nowrap; }
.kanban-column-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 800; font-size: .85rem; color: var(--text); background: var(--bg-elev); border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; --accent: var(--primary); }
.kanban-column-header .stage-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.kanban-column-header .stage-count { font-size: .68rem; background: var(--slate-soft); color: var(--text-muted); padding: 2px 8px; border-radius: 999px; }
.kanban-column-header .stage-sum { margin-inline-start: auto; font-size: .72rem; color: var(--text-muted); font-weight: 600; }
.stage-prospecting { --accent: #64748b; } .stage-proposal { --accent: #0ea5e9; } .stage-negotiation { --accent: #f59e0b; } .stage-won { --accent: #10b981; } .stage-lost { --accent: #ef4444; }
.kanban-column.kanban-drop-hover { outline: 2px dashed var(--primary); outline-offset: -2px; }
.kanban-cards.kanban-drop-hover { outline: 2px dashed var(--primary); outline-offset: -4px; border-radius: var(--radius-sm); }
.kanban-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease; }
.kanban-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.kanban-card .kc-title { font-weight: 700; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanban-card .kc-client { font-size: .74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.kanban-card .kc-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.kanban-card .kc-amount { font-weight: 800; font-size: .85rem; letter-spacing: -.01em; }
.kanban-card .kc-owner { margin-inline-start: auto; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #22d3ee, #6366f1); }
.kanban-card .kc-date { font-size: .68rem; color: var(--text-soft); }
#kanban_totals { display: flex; gap: 6px; flex-wrap: wrap; }
.stage-chip { border-inline-start: 3px solid var(--accent, var(--primary)); gap: 5px; }
.stage-chip b { color: var(--text); }

/* ==========================================================================
   Modal density: wider dialogs, smaller type, tighter spacing so forms fit without scrolling
   ========================================================================== */
.modal-dialog { max-width: min(90vw, 1380px) !important; width: min(90vw, 1380px) !important; }
.modal-dialog.modal-wide { max-width: min(95vw, 1560px) !important; width: min(95vw, 1560px) !important; }
.modal-dialog.modal-lg { max-width: min(90vw, 980px) !important; width: min(90vw, 980px) !important; }
.modal-dialog:not(.modal-xl):not(.modal-lg):not(.modal-sm):not(.modal-wide):not(.modal-fullscreen) { max-width: min(92vw, 640px) !important; width: min(92vw, 640px) !important; }
.modal-dialog.modal-sm { max-width: 420px !important; width: min(92vw, 420px) !important; }
.modal-dialog-scrollable { margin-top: .9rem; margin-bottom: .9rem; }
.modal-dialog-scrollable .modal-content { max-height: calc(100vh - 1.8rem); }
.modal { font-size: .86rem; }
.modal-header { padding: 14px 22px; }
.modal-title { font-size: 1rem; }
.modal-body { padding: 16px 22px; }
.modal-footer { padding: 11px 22px; }
.modal .form-control, .modal .form-select { padding: .42rem .65rem; font-size: .85rem; line-height: 1.3; }
.modal textarea.form-control { line-height: 1.4; }
.modal .form-label { font-size: .64rem; margin-bottom: .22rem; }
.modal .section-title { font-size: .64rem; margin-top: 2px; }
.modal .row.g-3 { --bs-gutter-y: .75rem; }
.modal .row.g-2 { --bs-gutter-y: .55rem; }
.modal .btn-sm { padding: .3rem .65rem; font-size: .76rem; }
.modal .notes-log { max-height: 110px; min-height: 44px; padding: 8px 10px; }
.modal .form-text, .modal .small { font-size: .76rem; }
.section-title.has-actions::after { display: none; }
.section-title .st-line { flex: 1; height: 1px; background: var(--border); }
.section-title .st-meta { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.section-title.has-actions .btn { text-transform: none; letter-spacing: 0; }
#clientModal .modal-body { max-height: none; overflow: visible; }
.client-layout > .col-lg-7 { border-inline-start: 1px solid var(--border); padding-inline-start: 1.25rem; }
@media (max-width: 991px) { .client-layout > .col-lg-7 { border-inline-start: 0; padding-inline-start: calc(var(--bs-gutter-x) * .5); margin-top: 1rem; } }
.mini-table-wrap .table { font-size: .8rem; }
.mini-table-wrap .table tbody td { padding: 7px 10px; }
.mini-table-wrap .table thead th { padding: 8px 10px; font-size: .64rem; }
/* legacy solid badges (bg-* without text-bg-) -> same soft look */
.badge.bg-primary { background: var(--primary-soft) !important; color: var(--primary-ink) !important; }
.badge.bg-secondary { background: var(--slate-soft) !important; color: var(--text-muted) !important; }
.badge.bg-success { background: var(--success-soft) !important; color: #047857 !important; }
.badge.bg-info { background: var(--info-soft) !important; color: #0369a1 !important; }
.badge.bg-warning { background: var(--warning-soft) !important; color: #b45309 !important; }
.badge.bg-danger { background: var(--danger-soft) !important; color: #b91c1c !important; }
.mini-table-wrap .btn-group-sm .btn { white-space: nowrap; }
/* tasks dashboard: only the table scrolls, footer strip stays visible */
#tasksDashboardModal .modal-body { display: flex; flex-direction: column; overflow: hidden; gap: 8px; }
#tasksDashboardModal .modal-body > .row.g-2.mb-2 { margin-bottom: 0 !important; }
#tasksDashboardModal .modal-body > .mb-2 { margin-bottom: 0 !important; }
#tasksDashboardModal .mini-table-wrap { flex: 1 1 auto; min-height: 220px; max-height: none !important; }
#tasksDashboardModal .td-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 0 !important; }
#td_metrics { display: none; flex: 1 1 auto; align-items: center; gap: 14px; flex-wrap: wrap; padding: 6px 12px !important; min-width: 0 !important; }
#td_metrics.show { display: flex !important; }
#td_metrics .fw-semibold { margin: 0 !important; color: var(--text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
#td_metrics > div { margin: 0 !important; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#td_metrics_owners { max-height: none !important; overflow: visible !important; }
#td_metrics a, #td_metrics .metric-chip { text-decoration: none; font-size: .72rem; font-weight: 600; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; color: var(--text); }
#td_metrics a:hover { border-color: var(--primary); color: var(--primary-ink); }
#td_bulk_bar { margin-top: 0 !important; }
.modal .form-check-label { color: var(--text); }
/* thin, unobtrusive scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-soft); background-clip: padding-box; }

/* kanban: full-height modal, compact two-line cards */
#dealsKanbanModal .modal-dialog { width: 96vw !important; max-width: 96vw !important; margin: .6rem auto !important; height: auto !important; }
#dealsKanbanModal .modal-content { height: calc(100vh - 1.2rem); display: flex; flex-direction: column; }
#dealsKanbanModal .modal-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 10px 14px 12px !important; overflow: hidden; }
#dealsKanbanModal .modal-body > .d-flex { margin-bottom: 8px !important; flex: 0 0 auto; }
#dealsKanbanModal .kanban-board { flex: 1 1 auto; min-height: 0; align-items: stretch; }
.kanban-column { max-height: 100%; }
.kanban-column-header { padding: 9px 12px; font-size: .8rem; }
.kanban-cards { padding: 8px; gap: 6px; }
.kanban-card { padding: 7px 10px; border-radius: 10px; }
.kanban-card .kc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.kanban-card .kc-sub { margin-top: 2px; }
.kanban-card .kc-title { flex: 1 1 auto; min-width: 0; font-size: .8rem; }
.kanban-card .kc-amount { flex: 0 0 auto; font-size: .8rem; }
.kanban-card .kc-client { flex: 1 1 auto; min-width: 0; margin: 0; font-size: .7rem; }
.kanban-card .kc-meta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.kanban-card .kc-owner { width: 18px; height: 18px; font-size: .55rem; margin: 0; }
.kanban-card .kc-date { font-size: .64rem; }

/* ==========================================================================
   In-page views: sections that used to be modals. The old inner structure
   (.modal-dialog/.modal-content/.modal-body) is kept and neutralised here.
   ========================================================================== */
.view { display: none; flex-direction: column; gap: 18px; }
.view.active { display: flex; }
.as-view .modal-dialog { width: 100% !important; max-width: none !important; margin: 0 !important; height: auto !important; pointer-events: auto; }
.as-view .modal-content { height: auto !important; max-height: none !important; box-shadow: var(--shadow-sm); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); }
.as-view .modal-header { display: none; }
.as-view .modal-body { padding: 18px 20px !important; overflow: visible; max-height: none !important; }
.as-view .modal-footer { border-radius: 0 0 var(--radius) var(--radius); }
.as-view .modal-footer [data-bs-dismiss="modal"] { display: none; }
.as-view .modal-footer:not(:has(button:not([data-bs-dismiss]))) { display: none; }
/* tasks dashboard as a page: the table gets the remaining viewport height */
#tasksDashboardModal.as-view .modal-body { display: flex; flex-direction: column; gap: 8px; }
#tasksDashboardModal.as-view .mini-table-wrap { max-height: calc(100vh - 400px) !important; min-height: 260px; }
/* kanban as a page */
#dealsKanbanModal.as-view .modal-content { display: block; }
#dealsKanbanModal.as-view .modal-body { padding: 14px 16px !important; display: block; overflow: visible; }
#dealsKanbanModal.as-view .kanban-board { min-height: calc(100vh - 230px); }
#dealsKanbanModal.as-view .kanban-column { max-height: calc(100vh - 230px); }
/* topbar extras */
.topbar .view-sub { font-size: .78rem; color: var(--text-muted); font-weight: 500; margin-inline-start: 2px; }
/* kanban as a page must not keep the full-screen modal width */
#dealsKanbanModal.as-view .modal-dialog { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
#dealsKanbanModal.as-view .kanban-board { overflow-x: auto; }

/* ==========================================================================
   Dashboard (home view)
   ========================================================================== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.stat-card.kpi .stat-value { font-size: 2rem; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; }
.dash-link { font-weight: 600; }
/* horizontal bars: single series, <=24px thick, rounded data-end, label at the tip */
.hbar-chart { display: flex; flex-direction: column; gap: 12px; }
.hbar { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; }
.hbar .hbar-label { font-size: .8rem; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.hbar .hbar-label .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--primary)); flex: 0 0 8px; }
.hbar .hbar-track { position: relative; height: 22px; display: flex; align-items: center; gap: 10px; }
.hbar .hbar-fill { height: 22px; border-radius: 0 6px 6px 0; background: var(--primary); min-width: 2px; transition: width .4s ease; }
[dir="rtl"] .hbar .hbar-fill { border-radius: 6px 0 0 6px; }
.hbar .hbar-value { font-size: .8rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.hbar .hbar-count { font-size: .72rem; color: var(--text-soft); font-weight: 500; }
/* stacked single bar: categorical, 2px surface gaps */
.stack-bar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: var(--slate-soft); gap: 2px; }
.stack-bar .seg { height: 100%; min-width: 2px; transition: width .4s ease; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 14px; }
.chart-legend .lg { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--text-muted); font-weight: 600; }
.chart-legend .lg .sw { width: 12px; height: 12px; border-radius: 4px; }
.chart-legend .lg b { color: var(--text); font-weight: 800; }
/* compact lists */
.list-rows { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--border); font-size: .85rem; cursor: pointer; }
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--bg-soft); }
.list-row .lr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.list-row .lr-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .lr-sub { font-size: .74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .lr-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.list-row .due-late { font-size: .74rem; font-weight: 700; color: #b91c1c; background: var(--danger-soft); padding: 3px 9px; border-radius: 999px; }
@media (prefers-color-scheme: dark) { .list-row .due-late { color: #fca5a5; } }
.list-rows .empty-state { padding: 28px 16px; }
/* embedded permissions page */
.perm-panel { padding: 0; overflow: hidden; }
#perm_frame { display: block; width: 100%; height: calc(100vh - 130px); border: 0; background: transparent; }
.hbar .hbar-bar { flex: 1 1 auto; min-width: 0; }
.hbar .hbar-value, .hbar .hbar-count { flex: 0 0 auto; white-space: nowrap; }
/* support mode banner (super admin inside a customer organization) */
.support-banner { display: flex; align-items: center; gap: 12px; padding: 9px var(--page-pad); background: linear-gradient(90deg, #dc2626, #b91c1c); color: #fff; font-size: .85rem; font-weight: 600; position: sticky; top: 0; z-index: 1021; }
.support-banner .sb-ico { font-size: 1rem; }
.support-banner .sb-text { flex: 1; }
.support-banner .btn-light { font-weight: 700; border-radius: 999px !important; padding: .3rem .9rem; }
.support-banner:not(.d-none) + .topbar { top: 42px; }
.row-actions .btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
#orgs_all_table thead th { position: sticky; top: 0; background: var(--bg-soft); color: var(--text-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
#orgs_all_table tbody td { padding: 12px 16px; vertical-align: middle; border-bottom: 1px solid var(--border); }

/* ==========================================================================
   Automations builder, notifications bell, client timeline
   ========================================================================== */
.auto-layout { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); gap: 18px; }
@media (max-width: 1100px) { .auto-layout { grid-template-columns: 1fr; } }
.auto-row.active { background: var(--primary-soft); }
.auto-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); flex: 0 0 10px; }
.auto-dot.on { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.auto-step { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--bg-soft); }
.auto-step-head { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: .85rem; margin-bottom: 10px; }
.auto-step-num { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; }
.auto-rows { display: flex; flex-direction: column; gap: 8px; }
.auto-rule { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.auto-rule .form-select, .auto-rule .form-control { flex: 1 1 140px; min-width: 0; }
.auto-rule .a-fields { display: contents; }
.auto-rule .rm { flex: 0 0 auto; margin-inline-start: auto; }
#auto_runs_table thead th { font-size: .66rem; }

/* notifications */
.topbar .notif-wrap { position: relative; }
#notif_badge { position: absolute; top: -4px; inset-inline-end: -4px; background: var(--danger); color: #fff; font-size: .6rem; font-weight: 800; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: none; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg); }
#notif_badge[style*="inline"] { display: inline-flex !important; }
#notif_panel { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: 380px; max-width: 92vw; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); display: none; z-index: 1050; overflow: hidden; }
#notif_panel.open { display: block; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 800; font-size: .9rem; }
#notif_list { max-height: 420px; overflow-y: auto; }
.notif-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--bg-soft); }
.notif-item.unread { background: var(--primary-soft); }
.notif-item.unread .notif-title::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); margin-inline-end: 6px; vertical-align: middle; }
.notif-ico { font-size: 1.1rem; flex: 0 0 auto; }
.notif-main { min-width: 0; }
.notif-title { font-weight: 700; font-size: .85rem; }
.notif-body { font-size: .78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-time { font-size: .7rem; color: var(--text-soft); margin-top: 2px; }
.notif-empty { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: .85rem; }

/* timeline */
.tl-composer { background: var(--bg-soft); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 10px 12px; }
.tl-types { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tl-type-btn { border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted); font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.tl-type-btn.active, .tl-type-btn:hover { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }
#client_timeline { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 4px 2px; }
.tl-item { display: flex; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.tl-item:hover { background: var(--bg-soft); }
.tl-ico { width: 28px; height: 28px; border-radius: 50%; background: var(--slate-soft); display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; flex: 0 0 28px; }
.tl-note .tl-ico { background: var(--warning-soft); } .tl-call .tl-ico, .tl-meeting .tl-ico { background: var(--info-soft); } .tl-automation .tl-ico { background: var(--violet-soft); } .tl-stage_change .tl-ico, .tl-status_change .tl-ico { background: var(--success-soft); }
.tl-main { min-width: 0; flex: 1; }
.tl-head { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.tl-type { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.tl-title { font-weight: 600; }
.tl-del { margin-inline-start: auto; padding: 0 6px !important; font-size: .7rem !important; opacity: .5; }
.tl-item:hover .tl-del { opacity: 1; }
.tl-body { font-size: .82rem; margin-top: 2px; white-space: pre-wrap; }
.tl-foot { font-size: .7rem; color: var(--text-soft); margin-top: 3px; }
.tl-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: .82rem; }

/* ==========================================================================
   Customization (pipelines, custom fields) and dynamic stage badges
   ========================================================================== */
.perm-tabs-app { display: flex; gap: 6px; flex-wrap: wrap; }
.cz-tab, .cz-ent { border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted); font-weight: 700; font-size: .85rem; padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.cz-tab.active, .cz-tab:hover, .cz-ent.active, .cz-ent:hover { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }
.cz-ent { padding: 6px 14px; font-size: .8rem; }
.cz-pipe.active { background: var(--primary-soft); }
.cz-pipe-name { max-width: 320px; font-weight: 800; }
.cz-stage-head, .cz-stage { display: grid; grid-template-columns: 64px minmax(0,1fr) 54px 110px 80px 56px 36px 36px; gap: 8px; align-items: center; }
.cz-stage-head { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); padding: 0 10px 6px; }
.cz-stages { display: flex; flex-direction: column; gap: 6px; }
.cz-stage { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; }
.cz-stage .form-control-color { width: 44px; height: 30px; padding: 2px; }
.cz-move { display: inline-flex; gap: 2px; }
.cz-move .btn { padding: 0 6px !important; font-size: .65rem !important; }
.cz-kind { justify-content: center; }
.cz-kind-won { background: var(--success-soft); color: #047857; } .cz-kind-lost { background: var(--danger-soft); color: #b91c1c; }
#cz_fields_table thead th { background: var(--bg-soft); color: var(--text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 10px 14px; }
#cz_fields_table tbody td { padding: 8px 14px; }
#cz_fields_table .czf-up, #cz_fields_table .czf-down { padding: 0 6px !important; font-size: .65rem !important; }
.cz-new-field { border-top: 1px solid var(--border); }
.stage-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); white-space: nowrap; }
.stage-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.stage-chip { --accent: var(--primary); }
.cf-field .form-check { min-height: 0; }
/* denser client table so custom columns fit */
#clients_table thead th, #clients_table tbody td { padding-left: 11px; padding-right: 11px; }
.cell-person { min-width: 200px; }
#clients_table .row-actions .btn { width: 30px; height: 30px; }

/* ==========================================================================
   Communication & calendar: e-mails, compose, WhatsApp, calendar, booking links
   ========================================================================== */
.empty-state .es-title { font-weight: 800; margin-top: 4px; }
.empty-state .es-sub { font-size: .8rem; color: var(--text-muted); }
.client-quick { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-inline-start: auto; }
.client-quick + .btn-close { margin-inline-start: 12px !important; }
.client-quick .btn { font-size: .76rem; padding: .25rem .7rem; border-radius: 999px !important; font-weight: 700; }
#mail_table thead th { background: var(--bg-soft); color: var(--text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 10px 14px; white-space: nowrap; }
#mail_table tbody td { padding: 9px 14px; font-size: .84rem; }
.mail-row { cursor: pointer; }
.mail-metric { font-size: .76rem; font-weight: 700; color: var(--text-soft); white-space: nowrap; }
.mail-metric.on { color: var(--success); }
.mr-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 18px; font-size: .8rem; margin-bottom: 10px; }
.mr-meta .mr-k { color: var(--text-muted); font-weight: 700; margin-inline-end: 6px; }
.mr-meta .mr-v { word-break: break-word; }
.mr-frame { width: 100%; height: 52vh; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
/* calendar */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .cal-layout { grid-template-columns: 1fr; } }
.cal-side { display: flex; flex-direction: column; gap: 18px; }
.cal-panel #cal_title { min-width: 150px; text-align: center; font-size: 1rem; }
.cal-grid-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-grid-head div { padding: 8px 10px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.cal-cell { min-height: 104px; border-inline-end: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-cell:nth-child(7n) { border-inline-end: 0; }
.cal-cell:hover { background: var(--bg-soft); }
.cal-cell.is-out { background: color-mix(in srgb, var(--bg-soft) 60%, transparent); }
.cal-cell.is-out .cal-num { color: var(--text-soft); }
.cal-cell.is-selected { box-shadow: inset 0 0 0 2px var(--primary); }
.cal-num { font-size: .78rem; font-weight: 800; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.cal-cell.is-today .cal-num { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; }
.cal-chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-chip { font-size: .7rem; line-height: 1.3; padding: 2px 6px; border-radius: 6px; background: var(--primary-soft); color: var(--primary-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-inline-start: 3px solid var(--primary); }
.cal-chip.k-call { background: var(--info-soft); border-color: var(--info, #0ea5e9); color: var(--text); }
.cal-chip.k-demo { background: var(--violet-soft); border-color: #8b5cf6; color: var(--text); }
.cal-chip.k-reminder { background: var(--warning-soft); border-color: var(--warning, #f59e0b); color: var(--text); }
.cal-chip.k-other { background: var(--slate-soft); border-color: var(--border-strong); color: var(--text); }
.cal-chip.is-task { background: transparent; border-color: var(--border-strong); color: var(--text-muted); }
.cal-chip.is-done { text-decoration: line-through; opacity: .6; }
.cal-chip.is-canceled { text-decoration: line-through; opacity: .5; }
.cal-more { font-size: .68rem; font-weight: 700; color: var(--text-muted); padding: 0 6px; }
.cal-kind { width: 28px; height: 28px; border-radius: 50%; background: var(--primary-soft); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; font-size: .85rem; }
.cal-kind.k-call { background: var(--info-soft); } .cal-kind.k-demo { background: var(--violet-soft); } .cal-kind.k-reminder { background: var(--warning-soft); }
/* client autocomplete */
.ac-wrap { position: relative; }
.ac-list { position: absolute; top: 100%; inset-inline: 0; z-index: 20; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); display: none; max-height: 240px; overflow-y: auto; margin-top: 4px; }
.ac-item { padding: 7px 12px; cursor: pointer; display: flex; flex-direction: column; font-size: .82rem; }
.ac-item span { font-size: .72rem; color: var(--text-muted); }
.ac-item:hover { background: var(--primary-soft); }
/* booking availability editor */
.bk-days-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 18px; }
.bk-day { display: grid; grid-template-columns: 110px 1fr 10px 1fr; gap: 8px; align-items: center; font-size: .82rem; }
/* mail settings + templates */
.ms-layout { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
@media (max-width: 1100px) { .ms-layout { grid-template-columns: 1fr; } }
.ms-note { font-size: .78rem; color: var(--text-muted); background: var(--bg-soft); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 10px 12px; }
.tp-vars { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tp-vars .tp-var { border: 0; cursor: pointer; direction: ltr; }
.tp-vars .tp-var:hover { background: var(--primary-soft); color: var(--primary-ink); }
/* themed helpers that Bootstrap leaves light-only */
.form-text { color: var(--text-muted) !important; }
.input-group-text { background: var(--bg-soft); color: var(--text-muted); border-color: var(--border); }
.form-control:disabled, .form-select:disabled { background-color: var(--bg-soft); color: var(--text-soft); opacity: .7; }
#cal_day_list { max-height: 340px; overflow-y: auto; }
.mr-frame { height: min(52vh, 440px); }
.bk-days-edit { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.bk-day { grid-template-columns: 120px minmax(0, 1fr) 12px minmax(0, 1fr); }
.bk-day input[type=time] { min-width: 0; }
.cal-side .panel-body .form-control { direction: ltr; }

/* ==========================================================================
   Sales: quotes / billing documents editor, price list
   ========================================================================== */
.sales-table thead th { background: var(--bg-soft); color: var(--text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 10px 14px; white-space: nowrap; }
.sales-table tbody td { padding: 9px 14px; font-size: .84rem; }
.sales-table tbody tr { cursor: pointer; }
#docModal .modal-header { gap: 8px; }
#doc_actions .btn { font-size: .74rem; }
.doc-prod-pick { width: 260px; margin-inline-start: 8px; }
.doc-lines-head, .doc-line { display: grid; grid-template-columns: minmax(0, 1fr) 76px 110px 74px 108px 56px 120px 64px; gap: 8px; align-items: start; }
.doc-lines-head { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); padding: 6px 10px; }
.doc-lines { display: flex; flex-direction: column; gap: 6px; }
.doc-line { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.doc-line .dl-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.doc-line .dl-desc { font-size: .76rem; min-height: 30px; resize: vertical; }
.doc-line .dl-total { padding-top: 6px; white-space: nowrap; font-size: .85rem; }
.doc-line .dl-tools { display: flex; gap: 2px; justify-content: flex-end; }
.doc-line .dl-tools .btn { padding: 2px 6px !important; font-size: .72rem !important; }
.doc-line .form-check-input { margin-top: 8px; }
.doc-empty { padding: 18px; text-align: center; color: var(--text-muted); font-size: .82rem; border: 1px dashed var(--border-strong); border-radius: 10px; }
.doc-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; margin-top: 14px; }
.doc-texts { display: flex; flex-direction: column; gap: 8px; }
.doc-totals { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; align-self: start; }
.doc-totals > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .85rem; }
.doc-totals > div span { color: var(--text-muted); }
.doc-totals .dt-inline input { width: 76px; margin-inline-start: auto; }
.doc-totals .dt-inline b { min-width: 96px; text-align: end; }
.doc-totals .dt-grand { border-top: 2px solid var(--text); padding-top: 8px; margin-top: 2px; font-size: 1.05rem; }
.doc-totals .dt-grand span { color: var(--text); font-weight: 800; }
.doc-totals .dt-rec b { color: var(--primary); }
@media (max-width: 991px) {
  .doc-lines-head { display: none; }
  .doc-line { grid-template-columns: 1fr 1fr 1fr; }
  .doc-line .dl-name { grid-column: 1 / -1; }
  .doc-bottom { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Integrations (API keys, webhooks, telephony), call log, incoming-call pop-up
   ========================================================================== */
#view_integrations .perm-tabs-app { margin-bottom: 18px; }
.int-pane .panel-head code { font-size: .78rem; }
.hook-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.hook-ev { display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); cursor: pointer; font-size: .8rem; }
.hook-ev:hover { border-color: var(--primary); }
.hook-ev .form-check-input { margin-top: 3px; flex: 0 0 auto; }
.hook-ev span { display: flex; flex-direction: column; min-width: 0; }
.hook-ev code { font-size: .74rem; background: none; padding: 0; color: var(--primary-ink); }
.hook-ev small { color: var(--text-muted); font-size: .72rem; }
.int-pre { background: #0b1020; color: #e2e8f0; padding: 12px 14px; border-radius: 10px; font-size: .76rem; max-height: 340px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.deliv-row { cursor: pointer; }
.tl-rec { display: inline-block; margin-top: 4px; font-size: .76rem; font-weight: 700; color: var(--primary); text-decoration: none; }
.call-pop { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 2000; width: 340px; max-width: calc(100vw - 32px); display: flex; gap: 14px; padding: 16px 18px;
  background: var(--bg-elev); border: 1px solid var(--border); border-inline-start: 4px solid var(--success); border-radius: var(--radius); box-shadow: var(--shadow-lg); animation: callpop-in .25s ease-out; }
.call-pop .cp-ring { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: var(--success-soft); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; animation: callpop-ring 1.2s ease-in-out infinite; }
.call-pop .cp-main { min-width: 0; flex: 1; }
.call-pop .cp-label { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--success); }
.call-pop .cp-title { font-weight: 800; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-pop .cp-sub { font-weight: 500; color: var(--text-muted); font-size: .85rem; }
.call-pop .cp-num { font-size: .82rem; color: var(--text-muted); text-align: start; }
.call-pop .cp-actions { display: flex; gap: 6px; margin-top: 10px; }
@keyframes callpop-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes callpop-ring { 0%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-12deg); } 20%, 40% { transform: rotate(12deg); } 50% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .call-pop, .call-pop .cp-ring { animation: none; } }

/* ==========================================================================
   AI: scores, deal health, assistant
   ========================================================================== */
.ai-score, .ai-health { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; }
.ai-score.hot { background: var(--success-soft); color: #047857; } .ai-score.warm { background: var(--warning-soft); color: #b45309; } .ai-score.cold { background: var(--slate-soft); color: var(--text-muted); }
.ai-health.at_risk { background: var(--danger-soft); color: #b91c1c; } .ai-health.attention { background: var(--warning-soft); color: #b45309; } .ai-health.healthy { background: var(--success-soft); color: #047857; }
@media (prefers-color-scheme: dark) { .ai-score.hot, .ai-health.healthy { color: #6ee7b7; } .ai-score.warm, .ai-health.attention { color: #fcd34d; } .ai-health.at_risk { color: #fca5a5; } }
.ai-health-sum { font-size: .78rem; font-weight: 700; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.ai-dot, .ai-health-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-start: 6px; }
.ai-dot.at_risk, .ai-health-dot.at_risk { background: var(--danger); } .ai-dot.attention, .ai-health-dot.attention { background: var(--warning); } .ai-dot.healthy, .ai-health-dot.healthy { background: var(--success); }
.ai-health-dot { margin: 0 6px 0 0; flex: 0 0 9px; cursor: help; } [dir="rtl"] .ai-health-dot { margin: 0 0 0 6px; }
.ai-score-badge { position: relative; display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 10px; font-size: .74rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; cursor: help; }
.ai-score-badge:empty { display: none; }
.ai-score-badge.hot { background: var(--success-soft); color: #047857; } .ai-score-badge.warm { background: var(--warning-soft); color: #b45309; } .ai-score-badge.cold { background: var(--slate-soft); color: var(--text-muted); }
@media (prefers-color-scheme: dark) { .ai-score-badge.hot { color: #6ee7b7; } .ai-score-badge.warm { color: #fcd34d; } }
.ai-pop { display: none; position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 30; width: 280px; background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 12px 14px; font-weight: 500; }
.ai-score-badge:hover .ai-pop, .ai-score-badge:focus .ai-pop { display: block; }
.ai-pop-title { font-weight: 800; font-size: .8rem; margin-bottom: 6px; }
.ai-pop-foot { font-size: .7rem; color: var(--text-soft); margin-top: 6px; }
.ai-factors { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: .78rem; }
.ai-factors li { display: flex; gap: 6px; } .ai-factors li.pos span { color: var(--success); } .ai-factors li.neg span { color: var(--danger); }
.ai-btn { border-color: #8b5cf6 !important; color: #8b5cf6 !important; } .ai-btn:hover { background: #8b5cf6 !important; color: #fff !important; }
.ai-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 12px; padding: 8px 10px; border-radius: 12px; background: linear-gradient(90deg, color-mix(in srgb, #8b5cf6 12%, transparent), color-mix(in srgb, var(--primary) 8%, transparent)); border: 1px solid color-mix(in srgb, #8b5cf6 30%, transparent); }
.ai-bar input { flex: 1 1 auto; min-width: 0; } .ai-bar select { width: auto; flex: 0 0 auto; } .ai-spark { font-size: 1rem; }
@media (max-width: 760px) { .ai-bar { flex-wrap: wrap; } }
.ai-summary-text { font-size: .95rem; line-height: 1.65; }
.ai-facts { margin: 0; padding-inline-start: 18px; font-size: .86rem; }
.ai-steps { display: flex; flex-direction: column; gap: 6px; }
.ai-step { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); font-size: .86rem; }
.ai-step > span:first-child { flex: 1; font-weight: 600; }
.ai-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 0; color: var(--text-muted); }
.ai-usage { display: flex; flex-direction: column; gap: 8px; }
.ai-usage > div { display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; } .ai-usage > div span { color: var(--text-muted); }
.ai-meter { height: 6px !important; border-radius: 999px; background: var(--slate-soft); overflow: hidden; display: block !important; }
.ai-meter span { display: block; height: 100%; background: linear-gradient(90deg, #8b5cf6, var(--primary)); }

/* ==========================================================================
   Data quality: import wizard, duplicates / merge, files
   ========================================================================== */
.imp-steps { display: flex; gap: 6px; margin-inline-start: auto; margin-inline-end: 12px; }
.imp-steps span { font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--slate-soft); color: var(--text-muted); }
.imp-steps span.active { background: var(--primary); color: #fff; } .imp-steps span.done { background: var(--success-soft); color: var(--success); }
.imp-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 20px; border: 2px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg-soft); cursor: pointer; text-align: center; transition: .15s; }
.imp-drop:hover, .imp-drop.over { border-color: var(--primary); background: var(--primary-soft); } .imp-drop.busy { opacity: .6; pointer-events: none; }
.imp-map td { padding: 8px 12px; } .imp-map tr.mapped td:first-child { color: var(--primary); }
.imp-map tr:not(.mapped) td { opacity: .75; }
.imp-samples span { display: inline-block; background: var(--slate-soft); border-radius: 6px; padding: 1px 7px; margin: 1px 4px 1px 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.imp-radio { display: flex; flex-direction: column; gap: 6px; }
.imp-radio label { display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--bg-soft); }
.imp-radio label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.imp-radio input { grid-row: span 2; margin-top: 4px; } .imp-radio small { color: var(--text-muted); font-size: .75rem; }
.imp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.imp-stats > div { border-radius: 12px; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--border); display: flex; flex-direction: column; }
.imp-stats b { font-size: 1.5rem; } .imp-stats span { font-size: .76rem; color: var(--text-muted); }
.imp-stats .ok b { color: var(--success); } .imp-stats .upd b { color: var(--primary); } .imp-stats .err b { color: var(--danger); }
.imp-errors { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; font-size: .82rem; }
@media (max-width: 760px) { .imp-stats { grid-template-columns: 1fr 1fr; } .imp-steps { display: none; } }
.dup-groups { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 18px; }
.dup-group { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.dup-head { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.dup-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; padding: 12px; }
.dup-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.dup-meta { display: flex; gap: 8px; align-items: center; font-size: .74rem; color: var(--text-muted); margin: 4px 0; }
.merge-table th { vertical-align: top; } .merge-table td, .merge-table th { padding: 8px 12px; }
.merge-table tr.same td { color: var(--text-muted); }
.merge-val { display: flex; gap: 6px; align-items: center; cursor: pointer; } .merge-val.empty { opacity: .45; }
.merge-keep { font-weight: 800; display: flex; gap: 6px; align-items: center; cursor: pointer; }
.dup-warn { margin-top: 6px; font-size: .78rem; padding: 6px 10px; border-radius: 8px; background: var(--warning-soft); color: var(--text); }
.files-drop { border: 1px dashed var(--border-strong); border-radius: 10px; padding: 6px; min-height: 44px; }
.files-drop.over { border-color: var(--primary); background: var(--primary-soft); } .files-drop.busy { opacity: .6; }
.files-hint { text-align: center; font-size: .72rem; color: var(--text-soft); padding: 4px; }
.file-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; font-size: .82rem; }
.file-row:hover { background: var(--bg-soft); }
.file-name { font-weight: 600; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.file-meta { font-size: .7rem; color: var(--text-soft); white-space: nowrap; }
.file-row .btn { padding: 0 6px !important; font-size: .75rem !important; }

/* ==========================================================================
   PWA: phone shell (drawer menu + bottom navigation), offline banner, install banner, App & notifications panel
   ========================================================================== */
.mobile-only { display: none !important; }
#sb_backdrop, .bottom-nav { display: none; }
.offline-banner { display: flex; align-items: center; gap: 10px; padding: 8px var(--page-pad); background: var(--warning-soft); color: #92400e; font-size: .82rem; font-weight: 600; border-bottom: 1px solid color-mix(in srgb, #f59e0b 35%, transparent); }
.offline-banner.d-none { display: none !important; }
.offline-banner .ob-ico { font-size: 1rem; }
@media (prefers-color-scheme: dark) { .offline-banner { color: #fcd34d; } }
body.is-offline .btn-cta, body.is-offline [data-perm$=".create"] { opacity: .55; }

.install-banner { position: fixed; inset-inline: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 1045; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 40px -18px rgba(15,23,42,.55); }
.install-banner.d-none { display: none !important; }
.install-banner img { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 40px; }
.install-banner .ib-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.install-banner .ib-text b { font-size: .88rem; }
.install-banner .ib-text span { font-size: .74rem; color: var(--text-muted); }
.install-banner .btn { border-radius: 999px !important; padding: .35rem .9rem; }

.pwa-body { padding-top: 6px; }
.pwa-sec { padding: 14px 0; border-bottom: 1px solid var(--border); }
.pwa-sec:last-child { border-bottom: 0; padding-bottom: 4px; }
.pwa-sec-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.pwa-sec-head b { display: block; font-size: .92rem; }
.pwa-sec-head small { display: block; color: var(--text-muted); font-size: .76rem; line-height: 1.4; margin-top: 2px; }
.pwa-sec-head .form-switch .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }
.pwa-ico { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.pwa-note { font-size: .82rem; color: var(--text-muted); line-height: 1.5; }
.pwa-note.warn { color: #b45309; }
.pwa-ok { font-size: .85rem; font-weight: 600; color: #047857; }
@media (prefers-color-scheme: dark) { .pwa-note.warn { color: #fcd34d; } .pwa-ok { color: #6ee7b7; } }
.pwa-push-opts { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pwa-push-opts .form-check { margin: 0; font-size: .84rem; }
.pwa-sub { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin: 14px 0 4px; }
.pwa-dev { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px dashed var(--border); }
.pwa-dev:first-child, .pwa-sub + .pwa-dev { border-top: 0; }
.pwa-dev-ico { font-size: 1.15rem; width: 28px; text-align: center; }
.pwa-dev-main { flex: 1; min-width: 0; }
.pwa-dev-main b { display: block; font-size: .85rem; }
.pwa-dev-main small { display: block; color: var(--text-muted); font-size: .74rem; }
.pwa-steps { margin: 0; padding-inline-start: 1.2rem; font-size: .86rem; line-height: 1.8; }
.pwa-kbd { display: inline-block; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; font-size: .75rem; background: var(--bg-soft); }

@media (max-width: 760px) {
  :root { --page-pad: 14px; }
  .mobile-only { display: inline-flex !important; }
  .app-shell { display: block; }
  /* the sidebar becomes a drawer with full labels */
  .sidebar { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(300px, 86vw); height: 100dvh; overflow-y: auto; z-index: 1060;
    transform: translateX(-105%); transition: transform .22s ease, box-shadow .22s ease; padding-top: calc(18px + env(safe-area-inset-top)); padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  [dir="rtl"] .sidebar { transform: translateX(105%); }
  body.sb-open .sidebar { transform: none; box-shadow: 0 0 60px rgba(0,0,0,.45); }
  .sidebar .sb-link { min-height: 44px; }
  .sidebar .sb-link:hover { transform: none; }
  #sb_backdrop { display: block; position: fixed; inset: 0; z-index: 1055; background: rgba(2,6,23,.55); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  body.sb-open #sb_backdrop { opacity: 1; pointer-events: auto; }
  body.sb-open { overflow: hidden; }
  /* compact top bar: menu · title · bell · + */
  .topbar { height: auto; flex-wrap: wrap; gap: 8px 10px; padding: calc(10px + env(safe-area-inset-top)) var(--page-pad) 10px; }
  .topbar .page-title { flex: 1 1 0; min-width: 0; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .topbar #header_stats { display: none !important; }
  .topbar .quick-search { order: 3; width: 100%; margin: 0; }
  .topbar .btn-cta { font-size: 0; width: 40px; height: 40px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
  .topbar .btn-cta .plus { font-size: 1.45rem; margin: 0; }
  .content { padding: 14px var(--page-pad) calc(88px + env(safe-area-inset-bottom)); gap: 14px; }
  /* bottom navigation */
  body.app-view .bottom-nav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; inset-inline: 0; bottom: 0; z-index: 1040; gap: 4px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg-elev) 92%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--border); }
  .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 6px 2px; border: 0; border-radius: 12px; background: none; color: var(--text-muted); font-size: .68rem; font-weight: 700; }
  .bottom-nav button .ico { font-size: 1.2rem; line-height: 1; }
  .bottom-nav button.active { color: var(--primary-ink); background: var(--primary-soft); }
  .bottom-nav button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
  #toast_stack { top: auto; bottom: calc(80px + env(safe-area-inset-bottom)); inset-inline: 12px; }
  /* dashboard */
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 12px 13px; }
  .stat-card .stat-value { font-size: 1.3rem; }
  .stat-card .stat-sub { flex-direction: column; gap: 2px; font-size: .74rem; }
  .dash-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #pipeline_cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
  #pipeline_cards::-webkit-scrollbar { display: none; }
  #pipeline_cards > * { scroll-snap-align: start; }
  /* full-screen dialogs */
  /* :not(#_) lifts the specificity above the desktop width rules (which use !important) */
  .modal-dialog:not(#_) { margin: 0 !important; width: 100% !important; max-width: none !important; min-height: 100%; }
  .modal-content { border-radius: 0 !important; border: 0; min-height: 100dvh; }
  .modal-dialog-scrollable:not(#_) { height: 100dvh; margin: 0 !important; }
  .modal-dialog-scrollable .modal-content { max-height: 100dvh; }
  .modal-header { padding: calc(14px + env(safe-area-inset-top)) 16px 14px; }
  .modal-body { padding: 16px; }
  .modal-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
}
/* touch screens have no hover: row actions are always visible */
@media (hover: none) { .row-actions { opacity: 1 !important; } }
@media (max-width: 760px) {
  /* client list as cards: person on top, company · tasks · status · actions below */
  #clients_table thead { display: none; }
  #clients_table, #clients_table tbody { display: block; width: 100%; }
  #clients_table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  #clients_table tbody tr:last-child { border-bottom: 0; }
  #clients_table tbody td { display: block; padding: 0; border: 0; }
  #clients_table tbody td:empty, #clients_table tbody td.desktop-only { display: none; }
  #clients_table tbody td:first-child { flex: 1 1 100%; min-width: 0; }
  #clients_table tbody td:nth-child(2) { font-size: .8rem; color: var(--text-muted); }
  #clients_table tbody td.actions-cell { margin-inline-start: auto; width: auto; }
  #clients_table .cell-person .sub { white-space: normal; word-break: break-word; }
}
@media (max-width: 760px) {
  /* nothing may push the page sideways (wide boards / tables scroll inside their own box) */
  .main { overflow-x: clip; }
  /* toolbars of the page views wrap instead of overflowing */
  .as-view .modal-body > .d-flex, #dealsKanbanModal .modal-body > .d-flex { flex-wrap: wrap; }
  #kanban_totals { margin-inline-start: 0 !important; width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .as-view .btn-group, .view .btn-group { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .as-view .btn-group .btn, .view .btn-group .btn { white-space: nowrap; }
  #kanban_board { scroll-snap-type: x proximity; }
  #kanban_board .kanban-column { scroll-snap-align: start; min-width: min(82vw, 300px); }
}
@media (max-width: 760px) {
  /* single-column page layouts: a column may never be wider than the screen */
  .auto-layout, .ms-layout, .cal-layout { grid-template-columns: minmax(0, 1fr); }
  .auto-layout > *, .ms-layout > *, .cal-layout > * { min-width: 0; }
  .cal-grid-head div { padding: 6px 2px; font-size: .6rem; letter-spacing: 0; text-align: center; }
  .cal-chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 760px) {
  /* pipeline stage editor: two rows per stage (name on top; color · probability · type · deals below) */
  .cz-stage-head { display: none; }
  .cz-stage { grid-template-columns: 34px 50px minmax(0, 1fr) auto 32px; grid-template-rows: auto auto; row-gap: 6px; padding: 8px; }
  .cz-stage .cz-move { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; }
  .cz-stage .cz-s-name { grid-column: 2 / 5; grid-row: 1; }
  .cz-stage .cz-s-del { grid-column: 5; grid-row: 1; }
  .cz-stage .cz-s-color { grid-column: 2; grid-row: 2; }
  .cz-stage .cz-s-prob { grid-column: 3; grid-row: 2; }
  .cz-stage .cz-kind { grid-column: 4; grid-row: 2; }
  .cz-stage > .text-muted.small { display: none; }
  .cz-stage .cz-s-req { grid-column: 5; grid-row: 2; }
}
@media (max-width: 760px) {
  /* client card: quick actions get their own scrollable row under the title */
  #clientModal .modal-header { flex-wrap: wrap; row-gap: 10px; }
  #clientModal .modal-header .btn-close { margin-inline-start: auto; }
  #clientModal .client-quick:not(.d-none) { order: 3; flex: 1 1 100%; display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0; padding-bottom: 2px; }
  #clientModal .client-quick .btn { white-space: nowrap; flex: 0 0 auto; }
}

/* ==========================================================================
   Reports: charts (validated categorical palette), dashboard, builder, forecast, targets
   ========================================================================== */
:root {
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948;
  /* forecast: one hue, darker = more certain */
  --fc-closed: #1b4f91; --fc-commit: #2a78d6; --fc-best: #74a7e8; --fc-pipe: #b9d3f4;
  --good: #047857; --good-soft: #d1fae5; --warn: #b45309; --warn-soft: #fef3c7; --bad: #b91c1c; --bad-soft: #fee2e2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
    --fc-closed: #8ec0ff; --fc-commit: #3987e5; --fc-best: #2d63a6; --fc-pipe: #24466f;
    --good: #6ee7b7; --good-soft: rgba(16,185,129,.16); --warn: #fcd34d; --warn-soft: rgba(245,158,11,.16); --bad: #fca5a5; --bad-soft: rgba(239,68,68,.16);
  }
}
.rc { position: relative; min-height: 60px; }
.rc-empty { color: var(--text-muted); font-size: .86rem; text-align: center; padding: 36px 12px; }
.rc-note { color: var(--text-muted); font-size: .74rem; margin-top: 6px; }
.rc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; font-size: .78rem; color: var(--text); }
.rc-lg { display: inline-flex; align-items: center; gap: 6px; }
.rc-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: 0 0 10px; }
.rc-svg-wrap { width: 100%; overflow: hidden; }
.rc-svg-wrap svg { display: block; max-width: 100%; }
.rc-grid { stroke: var(--border); stroke-width: 1; }
.rc-zero { stroke: var(--border-strong, #94a3b8); stroke-width: 1; }
.rc-axis { fill: var(--text-muted); font-size: 11px; font-family: var(--font); }
.rc-dlabel { fill: var(--text); font-size: 11px; font-weight: 700; font-family: var(--font); }
.rc-hit { fill: transparent; cursor: pointer; }
.rc-col.hover .rc-hit { fill: color-mix(in srgb, var(--text) 5%, transparent); }
.rc-col:focus-visible { outline: none; }
.rc-col:focus-visible .rc-hit { fill: color-mix(in srgb, var(--primary) 12%, transparent); }
.rc-bar { cursor: pointer; }
.rc-cross { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.rc-tip { position: fixed; z-index: 4000; background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px -12px rgba(15,23,42,.45);
  padding: 8px 10px; font-size: .78rem; min-width: 150px; pointer-events: none; }
.rc-tip-h { font-weight: 800; margin-bottom: 4px; }
.rc-tip-row { display: flex; align-items: center; gap: 8px; }
.rc-tip-row b { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.rc-hbars { display: flex; flex-direction: column; gap: 6px; }
.rc-hrow { display: grid; grid-template-columns: minmax(80px, 30%) 1fr auto; align-items: center; gap: 10px; padding: 3px 4px; border-radius: 8px; cursor: pointer; }
.rc-hrow:hover, .rc-hrow:focus-visible { background: var(--bg-soft); outline: none; }
.rc-hlabel { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.rc-htrack { display: flex; height: 14px; gap: 2px; }
.rc-hseg { height: 100%; min-width: 2px; }
.rc-hseg:last-child { border-start-end-radius: 4px; border-end-end-radius: 4px; }
.rc-hval { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 52px; text-align: end; }
.rc-number { padding: 10px 4px; }
.rc-big { font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rc-sub { color: var(--text-muted); font-size: .82rem; margin-top: 2px; }
.rc-delta { margin-top: 10px; font-size: .82rem; font-weight: 700; display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 10px; border-radius: 999px; }
.rc-delta span { font-weight: 500; color: var(--text-muted); }
.rc-delta.up { color: var(--good); background: var(--good-soft); }
.rc-delta.down { color: var(--bad); background: var(--bad-soft); }
.rc-table { font-size: .82rem; }
.rc-table thead th { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.rc-table td { font-variant-numeric: tabular-nums; }
.rc-trow { cursor: pointer; }
.rc-trow:hover td { background: var(--bg-soft); }
.rc-total td { font-weight: 800; border-top: 2px solid var(--text); }

.rp-tabs { margin-bottom: 16px; }
.rp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.rp-dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rp-card { padding-bottom: 14px; }
.rp-card.full { grid-column: 1 / -1; }
.rp-card .rc-host { padding: 6px 18px 0; }
.rp-card-sub { padding: 8px 18px 0; }
.rp-card .panel-head { padding: 10px 12px 10px 18px; }
.rp-card .panel-title { font-size: .92rem; }
.rp-card-tools { margin-inline-start: auto; display: flex; gap: 2px; }
.rp-card-tools .btn { width: 30px; height: 30px; padding: 0; }
.rp-drag { cursor: grab; color: var(--text-soft); letter-spacing: -2px; user-select: none; }
.rp-card.dragging { opacity: .45; }
.rp-empty { grid-column: 1 / -1; text-align: center; color: var(--text-muted); padding: 40px 12px; border: 2px dashed var(--border); border-radius: var(--radius); }
.rp-empty .big { font-size: 2rem; }
.rp-row { cursor: pointer; }
.rp-row-ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: var(--primary-soft); display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; }
.rp-row-tools { display: flex; gap: 2px; margin-inline-start: auto; }
.rp-pin { opacity: .35; }
.rp-pin.on { opacity: 1; }
.rp-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding: 14px 18px 18px; }
.rp-tpl { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; text-align: start; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--text); transition: border-color .12s ease, transform .12s ease; }
.rp-tpl:hover, .rp-tpl:focus-visible { border-color: var(--primary); transform: translateY(-1px); outline: none; }
.rp-tpl-ico { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 10px; background: var(--bg-elev); display: flex; align-items: center; justify-content: center; }
.rp-tpl-name { font-weight: 700; font-size: .84rem; }
.rp-tpl-src { font-size: .72rem; color: var(--text-muted); }
#rp_search { width: 200px; }

.rb-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.rb-form { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.rb-form .form-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 8px 0 2px; }
.rb-row { display: flex; gap: 6px; }
.rb-row > * { flex: 1; min-width: 0; }
.rb-row .rb-bucket { flex: 0 0 110px; }
.rb-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rb-charts button { border: 1px solid var(--border); background: var(--bg-soft); color: var(--text); border-radius: 10px; padding: 6px 4px; font-size: .74rem; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rb-charts button.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; }
.rb-filters { display: flex; flex-direction: column; gap: 6px; }
.rb-filter { display: grid; grid-template-columns: 1fr 96px 1fr 28px; gap: 4px; align-items: center; }
.rb-filter .btn-ghost { padding: 0; width: 28px; height: 28px; }
.rb-opts { max-height: 260px; overflow-y: auto; min-width: 220px; }
.rb-preview-body { padding: 14px 18px; }
.rb-preview-body .rc-host.loading { opacity: .5; }
.rb-sub { margin-bottom: 10px; }
.rb-hint { padding: 0 18px 14px; }
.rb-data { margin-top: 14px; }
.rb-data summary { cursor: pointer; font-size: .8rem; color: var(--primary-ink); font-weight: 700; }

.fc-bar .fc-owner, .fc-bar .fc-pipe { width: auto; min-width: 150px; }
.fc-periods { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 16px; }
.fc-card { text-align: start; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; color: var(--text); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; }
.fc-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.fc-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.fc-card-head { display: flex; align-items: center; gap: 8px; }
.fc-main { display: flex; flex-direction: column; }
.fc-big { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fc-track { position: relative; height: 16px; background: var(--bg-soft); border-radius: 4px; }
.fc-seg { position: absolute; top: 0; bottom: 0; border-inline-end: 2px solid var(--bg-elev); }
.fc-target { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--text); border-radius: 2px; }
.fc-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: .76rem; color: var(--text-muted); }
.fc-legend span { display: flex; align-items: center; gap: 6px; }
.fc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: 0 0 10px; }
.fc-legend b { color: var(--text); margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.fc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; font-size: .78rem; border-top: 1px solid var(--border); padding-top: 8px; }
.fc-gap b { font-variant-numeric: tabular-nums; }
.fc-table td, .fc-table th { white-space: nowrap; }
.fc-table .fc-cat { width: auto; min-width: 150px; }
.stage-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--text); }
.stage-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

.tg-table .tg-col-target { width: 160px; }
.tg-table .tg-col-prog { width: 32%; }
.tg-table td { vertical-align: middle; }
.tg-input { max-width: 150px; }
.tg-org td { background: var(--bg-soft); }
.tg-pace { padding: 10px 16px 0; }
.tg-prog { position: relative; display: inline-block; vertical-align: middle; width: calc(100% - 52px); height: 10px; background: var(--slate-soft, #e2e8f0); border-radius: 999px; }
.tg-fill { height: 100%; border-radius: 999px; background: var(--series-1); }
.tg-prog.achieved .tg-fill, .tg-prog.on_track .tg-fill { background: var(--good); }
.tg-prog.slightly_behind .tg-fill { background: #d97706; }
.tg-prog.behind .tg-fill { background: #dc2626; }
.tg-pace-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); border-radius: 2px; }
.tg-pct { display: inline-block; width: 46px; text-align: end; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tg-status { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.tg-status.achieved, .tg-status.on_track { color: var(--good); background: var(--good-soft); }
.tg-status.slightly_behind { color: var(--warn); background: var(--warn-soft); }
.tg-status.behind, .tg-status.missed { color: var(--bad); background: var(--bad-soft); }
.tg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 14px 18px 18px; }
.tg-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--bg-soft); display: flex; flex-direction: column; gap: 6px; }
.tg-card-head { display: flex; flex-direction: column; font-weight: 700; font-size: .84rem; }
.tg-card-val b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.tg-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.panel-link { color: var(--primary-ink); text-decoration: none; font-weight: 700; }

@media (max-width: 1100px) { .rb-layout { grid-template-columns: minmax(0, 1fr); } .rp-dash { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .rc-hrow { grid-template-columns: minmax(70px, 34%) 1fr auto; gap: 6px; }
  .rb-filter { grid-template-columns: 1fr 1fr; }
  #rp_search { width: 100%; }
  .tg-table .tg-col-prog { width: auto; min-width: 140px; }
  .fc-periods { grid-template-columns: minmax(0, 1fr); }
}
.rp-tab { border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted); font-weight: 700; font-size: .85rem; padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.rp-tab.active, .rp-tab:hover { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }
.rp-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.fc-table, .tg-table { font-size: .85rem; }
.fc-table thead th, .tg-table thead th { background: var(--bg-soft); color: var(--text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.fc-table td, .tg-table td { padding: 9px 12px; border-color: var(--border); background: transparent; color: var(--text); font-variant-numeric: tabular-nums; }
.fc-table th:first-child, .fc-table td:first-child, .tg-table th:first-child, .tg-table td:first-child { padding-inline-start: 18px; }
.fc-table tbody tr:last-child td, .tg-table tbody tr:last-child td { border-bottom: 0; }
.fc-open { color: var(--text); text-decoration: none; }
.fc-open:hover { color: var(--primary-ink); text-decoration: underline; }
.rp-bar .btn-group .btn.active { background: var(--primary-soft); color: var(--primary-ink); border-color: var(--primary-soft); }
.tg-label { min-width: 130px; font-weight: 700; }
.tg-metric { width: auto; min-width: 170px; }

/* ==========================================================================
   Outreach: sequences, SMS, stage requirements
   ========================================================================== */
.sq-tabs { margin-bottom: 16px; }
.sq-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.sq-card { cursor: pointer; transition: border-color .12s ease, transform .12s ease; }
.sq-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.sq-card.off { opacity: .7; }
.sq-card .panel-title { font-size: .95rem; }
.sq-card-body { padding: 10px 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.sq-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; text-align: center; }
.sq-kpis > div { background: var(--bg-soft); border-radius: 10px; padding: 8px 4px; display: flex; flex-direction: column; }
.sq-kpis b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.sq-kpis span { font-size: .68rem; color: var(--text-muted); }
.sq-layout { grid-template-columns: 320px minmax(0, 1fr); }
.sq-steps { padding: 14px 18px; display: flex; flex-direction: column; }
.sq-wait { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-muted); padding: 8px 0 8px 22px; border-inline-start: 2px dashed var(--border); margin-inline-start: 16px; }
.sq-wait:first-child { border-inline-start-color: transparent; }
.sq-wait input { width: 64px; }
.sq-step { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elev); }
.sq-step-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--bg-soft); border-radius: var(--radius-sm) var(--radius-sm) 0 0; flex-wrap: wrap; }
.sq-step-n { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-size: .72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.sq-step-head .btn { width: 28px; height: 28px; padding: 0; }
.sq-stat { font-size: .74rem; color: var(--text-muted); }
.sq-step-body { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.sq-step-body .sq-prio { max-width: 160px; }
.sq-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 18px 18px; }
.sq-vars { margin-top: 10px; }
.sq-var { cursor: pointer; border: 1px solid var(--border); font-family: ui-monospace, monospace; font-size: .7rem; margin: 2px; }
.sq-var:hover { border-color: var(--primary); color: var(--primary-ink); }
.sq-filter { width: auto; min-width: 180px; }
.sq-st { display: inline-flex; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--slate-soft); color: var(--text-muted); }
.sq-st.active { background: var(--primary-soft); color: var(--primary-ink); }
.sq-st.replied, .sq-st.completed { background: var(--good-soft); color: var(--good); }
.sq-st.paused { background: var(--warn-soft); color: var(--warn); }
.sq-st.failed, .sq-st.opted_out { background: var(--bad-soft); color: var(--bad); }
.cseq-list { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.se-who { font-size: .9rem; }
.se-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; font-size: .76rem; }
.se-step { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }
.se-arrow { color: var(--text-soft); }
.sh-list { display: flex; flex-direction: column; }
.sh-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.sh-item:last-child { border-bottom: 0; }
.sh-ico { width: 28px; flex: 0 0 28px; text-align: center; }
.sh-item.failed b { color: var(--bad); }
.sms-to { margin-bottom: 10px; }
.sms-meter { font-size: .74rem; color: var(--text-muted); margin-top: 4px; }
.sms-history { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.sms-h-title { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.sms-bubble { max-width: 80%; padding: 6px 10px; border-radius: 12px; font-size: .82rem; white-space: pre-wrap; }
.sms-bubble small { display: block; color: var(--text-muted); font-size: .68rem; margin-top: 2px; }
.sms-bubble.out { align-self: flex-end; background: var(--primary-soft); }
.sms-bubble.in { align-self: flex-start; background: var(--bg-soft); border: 1px solid var(--border); }
.sms-usage .tg-prog { width: 100%; margin-top: 6px; }
.bp-body .form-check, .bp-check { margin-bottom: 4px; }
.rq-body .rq-sec { margin-bottom: 14px; }
.rq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px; }
.cz-s-req.on { color: var(--primary-ink); }
@media (max-width: 1100px) { .sq-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .sq-kpis { grid-template-columns: repeat(3, 1fr); } .sq-wait { padding-inline-start: 10px; margin-inline-start: 8px; } }
.rb-row > .flex-grow-0 { flex: 0 0 auto; }

/* customer portal (client card) + Facebook pages */
.cpt-box { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.cpt-thread { display: flex; flex-direction: column; gap: 6px; padding: 10px; max-height: 260px; overflow-y: auto; background: var(--bg-soft); }
.cpt-msg { max-width: 80%; padding: 7px 11px; border-radius: 12px; font-size: .84rem; white-space: pre-wrap; }
.cpt-msg small { display: block; color: var(--text-muted); font-size: .68rem; margin-top: 2px; }
.cpt-msg.in { align-self: flex-start; background: var(--bg-elev); border: 1px solid var(--border); }
.cpt-msg.out { align-self: flex-end; background: var(--primary-soft); }
.cpt-compose { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border); align-items: flex-end; }
.file-portal { opacity: .35; }
.file-portal.on { opacity: 1; }
.fb-page { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; }

/* Platform mode: super admin outside support mode manages organizations only */
body.platform-mode #nav_dashboard, body.platform-mode #nav_clients, body.platform-mode #btn_tasks_dashboard, body.platform-mode #btn_deals_kanban,
body.platform-mode #nav_automations, body.platform-mode #nav_emails, body.platform-mode #nav_sequences, body.platform-mode #nav_calendar,
body.platform-mode #nav_quotes, body.platform-mode #nav_invoices, body.platform-mode #nav_products, body.platform-mode #nav_calls,
body.platform-mode #nav_reports, body.platform-mode #nav_customize, body.platform-mode #nav_integrations, body.platform-mode #btn_tenant_members,
body.platform-mode #btn_org_settings { display: none !important; }