/* PulseCRM design system (v2).
   Bootstrap 5.3 does the base work. This file sets the colours (light and dark), the font,
   the app layout and the CRM-specific pieces. Colours live in variables at the top,
   so the whole look can be changed in one place. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../vendor/inter/inter-latin-wght-normal.woff2') format('woff2');
}

/* ---------- Colours ---------- */

:root,
[data-bs-theme="light"] {
    --brand: #4f46e5;
    --brand-600: #4338ca;
    --brand-soft: #eef2ff;
    --brand-ring: rgba(79, 70, 229, .22);
    --accent: #8b5cf6;

    --bg: #f5f6fa;
    --surface: #ffffff;
    --surface-2: #f8f9fc;
    --surface-3: #f1f3f8;
    --border: #e6e8f0;
    --border-strong: #d6d9e4;
    --text: #0f172a;
    --text-2: #334155;
    --muted: #64748b;

    --success: #16a34a;
    --success-soft: #dcfce7;
    --warning: #d97706;
    --warning-soft: #fef3c7;
    --danger: #dc2626;
    --danger-soft: #fee2e2;
    --info: #0284c7;
    --info-soft: #e0f2fe;
    --wa: #25d366;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .04);
    --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .06);
    --shadow-lg: 0 10px 40px rgba(15, 23, 42, .14);

    --sidebar-bg: #ffffff;
    --sidebar-text: #475569;
    --sidebar-hover: #f1f3f8;

    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-border-color: var(--border);
    --bs-secondary-color: var(--muted);
    --bs-tertiary-bg: var(--surface-3);
    --bs-emphasis-color: var(--text);
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: var(--brand-600);
    --bs-link-hover-color-rgb: 67, 56, 202;
    --bs-primary: var(--brand);
    --bs-primary-rgb: 79, 70, 229;
    --bs-focus-ring-color: var(--brand-ring);
}

[data-bs-theme="dark"] {
    --brand: #818cf8;
    --brand-600: #6366f1;
    --brand-soft: rgba(129, 140, 248, .14);
    --brand-ring: rgba(129, 140, 248, .3);
    --accent: #a78bfa;

    --bg: #0b0d13;
    --surface: #12151e;
    --surface-2: #171b26;
    --surface-3: #1d2230;
    --border: #252b3a;
    --border-strong: #323a4e;
    --text: #e6e8ef;
    --text-2: #c3c8d6;
    --muted: #8b93a7;

    --success: #22c55e;
    --success-soft: rgba(34, 197, 94, .14);
    --warning: #f59e0b;
    --warning-soft: rgba(245, 158, 11, .14);
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, .14);
    --info: #38bdf8;
    --info-soft: rgba(56, 189, 248, .14);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, .5);

    --sidebar-bg: #0f121a;
    --sidebar-text: #a3abbe;
    --sidebar-hover: #1a1f2c;

    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-border-color: var(--border);
    --bs-secondary-color: var(--muted);
    --bs-tertiary-bg: var(--surface-3);
    --bs-emphasis-color: #fff;
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: 129, 140, 248;
    --bs-link-hover-color: #a5b4fc;
    --bs-link-hover-color-rgb: 165, 180, 252;
    --bs-primary: var(--brand);
    --bs-primary-rgb: 129, 140, 248;
    color-scheme: dark;
}

:root {
    --sidebar-width: 256px;
    --header-height: 64px;
    --bottom-nav-height: 64px;
    --radius: 14px;
    --radius-sm: 10px;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 14px;
}

/* ---------- Base ---------- */

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--bs-body-font-family);
    font-size: 14.5px;
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { letter-spacing: -.015em; font-weight: 650; color: var(--text); }
.text-muted, .text-body-secondary { color: var(--muted) !important; }
.small, small { font-size: .84em; }
.min-w-0 { min-width: 0; }
.fw-semibold { font-weight: 600 !important; }
.tabular { font-variant-numeric: tabular-nums; }
.text-body { color: var(--text) !important; }
a { text-underline-offset: 3px; text-decoration: none; }
.page-body p a, .form-text a { text-decoration: underline; }
::selection { background: var(--brand-ring); }

/* ---------- Bootstrap components, restyled ---------- */

.btn {
    --bs-btn-font-weight: 550;
    --bs-btn-padding-x: .95rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-font-size: .9rem;
    border-radius: var(--bs-border-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
}
.btn:active { transform: translateY(1px); }
.btn-sm { --bs-btn-padding-x: .65rem; --bs-btn-padding-y: .32rem; --bs-btn-font-size: .82rem; border-radius: var(--bs-border-radius-sm); }
.btn-lg { --bs-btn-padding-y: .7rem; --bs-btn-font-size: 1rem; }
.btn-link { display: inline; }
.dropdown-toggle::after { margin-left: .15rem; }

.btn-primary {
    --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-600); --bs-btn-hover-border-color: var(--brand-600);
    --bs-btn-active-bg: var(--brand-600); --bs-btn-active-border-color: var(--brand-600);
    --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
    box-shadow: 0 1px 2px rgba(79, 70, 229, .25), inset 0 1px 0 rgba(255, 255, 255, .12);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0b0d13; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
.btn-success { --bs-btn-bg: var(--success); --bs-btn-border-color: var(--success); --bs-btn-hover-bg: #15803d; --bs-btn-hover-border-color: #15803d; --bs-btn-active-bg: #15803d; }
.btn-dark { --bs-btn-bg: var(--text); --bs-btn-border-color: var(--text); --bs-btn-color: var(--surface); }
[data-bs-theme="dark"] .btn-dark { --bs-btn-hover-bg: #fff; --bs-btn-hover-color: #000; }
.btn-outline-secondary {
    --bs-btn-color: var(--text-2); --bs-btn-border-color: var(--border-strong); --bs-btn-bg: var(--surface);
    --bs-btn-hover-bg: var(--surface-3); --bs-btn-hover-color: var(--text); --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-active-bg: var(--surface-3); --bs-btn-active-color: var(--text); --bs-btn-active-border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: color-mix(in srgb, var(--brand) 40%, transparent); --bs-btn-hover-bg: var(--brand-soft); --bs-btn-hover-color: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); }
.btn-ghost { --bs-btn-color: var(--muted); --bs-btn-hover-bg: var(--surface-3); --bs-btn-hover-color: var(--text); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--surface-3); --bs-btn-active-border-color: transparent; }
.btn-icon { width: 38px; height: 38px; padding: 0; }
.btn-icon.btn-sm { width: 32px; height: 32px; }

.btn-whatsapp { --bs-btn-bg: var(--wa); --bs-btn-border-color: var(--wa); --bs-btn-color: #fff; --bs-btn-hover-bg: #1ebe5a; --bs-btn-hover-border-color: #1ebe5a; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #1ebe5a; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #1ebe5a; }

.card {
    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--border);
    --bs-card-cap-bg: var(--surface);
    --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: calc(var(--radius) - 1px);
    --bs-card-spacer-y: 1.1rem;
    --bs-card-spacer-x: 1.15rem;
    --bs-card-cap-padding-y: .85rem;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
}
.card-header { font-weight: 600; border-bottom-color: var(--border); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card-header.bg-white, .bg-white { background-color: var(--surface) !important; }
.card-title-sm { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }

.form-control, .form-select {
    background-color: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
    font-size: .92rem;
    padding: .55rem .8rem;
    box-shadow: var(--shadow-sm);
}
.form-select { padding-right: 2.2rem; }
.form-control-sm, .form-select-sm { font-size: .84rem; padding-top: .35rem; padding-bottom: .35rem; }
.form-select-sm { padding-right: 2rem; }
.form-control-lg { font-size: 1rem; padding: .7rem .95rem; }
.form-control::placeholder, .form-select::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
[data-bs-theme="dark"] .form-control::placeholder, [data-bs-theme="dark"] textarea::placeholder { color: #7c8499; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-ring);
    background-color: var(--surface);
    color: var(--text);
}
.form-label { font-weight: 550; font-size: .85rem; color: var(--text-2); margin-bottom: .35rem; }
.form-text { color: var(--muted); }
.form-check-input { border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.input-group-text { background: var(--surface-3); border-color: var(--border-strong); color: var(--muted); }

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: var(--surface-2);
    --bs-table-hover-color: var(--text);
    margin-bottom: 0;
}
.table > thead > tr > th, .table thead.table-light th {
    background: var(--surface-2) !important;
    color: var(--muted) !important;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--border);
    padding-top: .7rem;
    padding-bottom: .7rem;
    white-space: nowrap;
}
.table > :not(caption) > * > * { padding: .75rem .9rem; border-bottom-color: var(--border); }
.table-sm > :not(caption) > * > * { padding: .5rem .65rem; }
.card > .table-responsive:first-child .table thead th:first-child { border-top-left-radius: var(--radius); }
.card > .table-responsive:first-child .table thead th:last-child { border-top-right-radius: var(--radius); }
.table tbody tr:last-child td { border-bottom: 0; }

.alert { border-radius: var(--radius-sm); border: 1px solid transparent; font-size: .9rem; display: flex; gap: .5rem; align-items: flex-start; }
.alert .btn-close { margin-left: auto; }
.alert-dismissible { padding-right: 1rem; }
.alert-dismissible .btn-close { position: static; padding: .25rem; }
.alert-success { background: var(--success-soft); color: color-mix(in srgb, var(--success) 75%, var(--text)); border-color: color-mix(in srgb, var(--success) 25%, transparent); }
.alert-danger { background: var(--danger-soft); color: color-mix(in srgb, var(--danger) 80%, var(--text)); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.alert-warning { background: var(--warning-soft); color: color-mix(in srgb, var(--warning) 70%, var(--text)); border-color: color-mix(in srgb, var(--warning) 25%, transparent); }
.alert-info { background: var(--info-soft); color: color-mix(in srgb, var(--info) 70%, var(--text)); border-color: color-mix(in srgb, var(--info) 25%, transparent); }

.badge { font-weight: 600; letter-spacing: .01em; border-radius: 999px; padding: .32em .65em; }
.text-bg-light, .badge.bg-white { background: var(--surface-3) !important; color: var(--text-2) !important; }

.dropdown-menu {
    --bs-dropdown-bg: var(--surface);
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-link-color: var(--text);
    --bs-dropdown-link-hover-bg: var(--surface-3);
    --bs-dropdown-link-hover-color: var(--text);
    --bs-dropdown-link-active-bg: var(--brand);
    --bs-dropdown-border-radius: 12px;
    --bs-dropdown-padding-x: .35rem;
    --bs-dropdown-item-border-radius: 8px;
    --bs-dropdown-item-padding-y: .45rem;
    box-shadow: var(--shadow-lg);
    font-size: .9rem;
}
.dropdown-item { display: flex; align-items: center; gap: .55rem; }

.modal-content { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { border-color: var(--border); }
.modal-backdrop.show { opacity: .45; }
@media (max-width: 575.98px) {
    .modal-fullscreen-sm-down .modal-content { border-radius: 0; }
}

.nav-tabs { border-bottom: 1px solid var(--border); gap: .25rem; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 550; padding: .65rem .9rem; background: none; }
.nav-tabs .nav-link:hover { color: var(--text); }
.nav-tabs .nav-link.active { color: var(--brand); border-bottom-color: var(--brand); background: none; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand); }
.nav-pills .nav-link { color: var(--text-2); font-weight: 550; }

.list-group { --bs-list-group-bg: var(--surface); --bs-list-group-border-color: var(--border); --bs-list-group-color: var(--text); --bs-list-group-action-hover-bg: var(--surface-2); }
.list-group-item { padding: .8rem 1.15rem; }

.pagination { --bs-pagination-bg: var(--surface); --bs-pagination-border-color: var(--border); --bs-pagination-color: var(--text-2); --bs-pagination-hover-bg: var(--surface-3); --bs-pagination-hover-color: var(--text); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-disabled-bg: var(--surface); --bs-pagination-disabled-color: var(--muted); --bs-pagination-border-radius: 10px; gap: 4px; }
.pagination .page-link { border-radius: 8px !important; min-width: 36px; text-align: center; }
nav[aria-label*="Pagination"] p.small { color: var(--muted); }

.offcanvas { --bs-offcanvas-bg: var(--sidebar-bg); --bs-offcanvas-color: var(--text); }

/* ---------- App layout ---------- */

.app-shell { display: flex; min-height: 100vh; }
.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.page-body { flex: 1; padding: 24px 28px 40px; width: 100%; }

/* ---------------------------------------------------------------
   Teams-style navigation: icon bar (rail) + page panel (subnav)
   --------------------------------------------------------------- */
:root { --rail-width: 72px; --subnav-width: 236px; }
.rail {
    --rail-bg: var(--sidebar-bg); --rail-text: var(--sidebar-text); --rail-hover: var(--sidebar-hover);
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1031;
    width: var(--rail-width);
    background: var(--rail-bg);
    border-right: 1px solid var(--border);
    display: none; flex-direction: column; align-items: center;
    padding: 10px 0 12px; gap: 2px;
    overflow-y: auto; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-brand { margin: 2px 0 10px; text-decoration: none; }
.rail-brand .brand-mark { width: 38px; height: 38px; border-radius: 11px; }
.rail-item {
    position: relative; width: 62px; min-height: 54px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: none; border-radius: 10px;
    color: var(--rail-text); text-decoration: none;
    font-size: .66rem; font-weight: 560; letter-spacing: .01em; line-height: 1.1;
    transition: background-color .12s, color .12s;
}
.rail-item i { font-size: 1.28rem; line-height: 1; }
.rail-item .ic-on { display: none; }
.rail-item:hover { background: var(--rail-hover); color: var(--text); }
.rail-item.active { color: var(--brand); }
.rail-item.active .ic-on { display: inline-block; }
.rail-item.active .ic-off { display: none; }
.rail-item.active::before {
    content: ""; position: absolute; left: -5px; top: 12px; bottom: 12px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--brand);
}
.rail-item span { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-badge {
    position: absolute; top: 5px; right: 9px; min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--danger); color: #fff; border-radius: 999px;
    font-size: .6rem; line-height: 17px; font-weight: 700; text-align: center;
    border: 2px solid var(--rail-bg); box-sizing: content-box;
}
.rail-spacer { flex: 1; min-height: 12px; }
.rail-avatar { border: 0; background: none; padding: 4px; border-radius: 999px; margin-top: 6px; }
.rail-avatar:hover { background: var(--rail-hover); }

.subnav {
    position: fixed; top: 0; bottom: 0; left: var(--rail-width); z-index: 1030;
    width: var(--subnav-width);
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: none; flex-direction: column;
    overflow-y: auto;
}
.subnav-panel { display: flex; flex-direction: column; min-height: 100%; }
.subnav-panel[hidden] { display: none; }
.subnav-head {
    height: var(--header-height); flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 10px 0 18px; border-bottom: 1px solid var(--border);
}
.subnav-title { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.subnav-cta { padding: 12px 12px 2px; }
.subnav-links { padding: 8px 10px 16px; display: flex; flex-direction: column; gap: 1px; }
.subnav-group { font-size: .68rem; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 14px 10px 5px; }
.subnav-link {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .7rem; border-radius: 8px;
    color: var(--text-2); text-decoration: none; font-size: .88rem; font-weight: 520;
    transition: background-color .12s, color .12s;
}
.subnav-link i { font-size: 1rem; width: 18px; text-align: center; opacity: .8; }
.subnav-link:hover { background: var(--surface-3); color: var(--text); }
.subnav-link.active { background: var(--brand-soft); color: var(--brand); font-weight: 620; }
.subnav-link.active i { opacity: 1; }
.nav-count {
    margin-left: auto; background: var(--danger); color: #fff;
    font-size: .68rem; font-weight: 700; border-radius: 999px; padding: 1px 7px; line-height: 1.5;
}

/* Page chips: phones, and computers with the panel hidden */
.subnav-chips {
    display: flex; gap: 6px; align-items: center;
    padding: 10px 28px 0; overflow-x: auto; scrollbar-width: none;
    width: 100%;
}
.subnav-chips::-webkit-scrollbar { display: none; }
.subnav-chips a, .subnav-chips .chip-open {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem;
    padding: .36rem .75rem; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-2); text-decoration: none; font-size: .82rem; font-weight: 550; white-space: nowrap;
}
.subnav-chips a:hover { color: var(--text); background: var(--surface-3); }
.subnav-chips a.active { background: var(--brand); border-color: var(--brand); color: #fff; }
[data-bs-theme="dark"] .subnav-chips a.active { color: #0b0d13; }
.subnav-chips a b { background: var(--danger); color: #fff; border-radius: 999px; font-size: .65rem; padding: 0 6px; }
.subnav-chips .chip-open { display: none; padding: .36rem .6rem; }

/* In-page tabs that repeat the panel are hidden: the panel (or the chips) shows the same pages. */
.has-subnav .dup-nav { display: none !important; }

@media (min-width: 992px) {
    .rail { display: flex; }
    .main-area { margin-left: var(--rail-width); }
    .has-subnav .subnav { display: flex; }
    .has-subnav .main-area { margin-left: calc(var(--rail-width) + var(--subnav-width)); }
    .has-subnav .subnav-chips { display: none; }
    html.subnav-closed .has-subnav .subnav { display: none; }
    html.subnav-closed .has-subnav .main-area { margin-left: var(--rail-width); }
    html.subnav-closed .has-subnav .subnav-chips { display: flex; }
    html.subnav-closed .subnav-chips .chip-open { display: inline-flex; }
}
@media (max-width: 991.98px) {
    .subnav-chips { padding: 10px 14px 0; }
}

/* Phone menu (☰) */
.mobile-menu { --bs-offcanvas-width: 300px; }
.mobile-menu .offcanvas-header { padding: 14px 16px; }
.mm-section { padding: 6px 0 10px; border-bottom: 1px solid var(--border); }
.mm-section:last-child { border-bottom: 0; }
.mm-head { font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 8px 8px 4px; display: flex; gap: .5rem; align-items: center; }
.mm-link {
    display: flex; align-items: center; gap: .65rem; width: 100%;
    padding: .55rem .7rem; border-radius: 8px; border: 0; background: none; text-align: left;
    color: var(--text-2); text-decoration: none; font-size: .92rem; font-weight: 520;
}
.mm-link:hover { background: var(--surface-3); color: var(--text); }
.mm-link.active { background: var(--brand-soft); color: var(--brand); font-weight: 620; }

.brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 18px 20px 14px;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.02em;
    color: var(--text);
    text-decoration: none;
}
.brand-mark {
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(79, 70, 229, .35);
    flex-shrink: 0;
}
[data-bs-theme="dark"] .brand-mark { background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%); }
.brand small { display: block; font-size: .7rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }

/* Header bar */
.app-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: calc(var(--header-height) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 28px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
}
.app-header .menu-btn { display: none; }
.global-search { position: relative; flex: 1; max-width: 460px; }
.global-search i.bi-search { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.global-search input { padding-left: 36px; padding-right: 48px; background: var(--surface); border-radius: 10px; height: 40px; }
.global-search kbd {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: var(--surface-3); color: var(--muted); border: 1px solid var(--border);
    font-size: .7rem; padding: 1px 6px; border-radius: 6px; font-family: inherit;
}
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-dot { position: relative; }
.icon-dot b {
    position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--danger); color: #fff; border-radius: 999px; font-size: .62rem; line-height: 16px; font-weight: 700;
    border: 2px solid var(--bg); box-sizing: content-box;
}

@media (max-width: 991.98px) {
    .app-header { padding: env(safe-area-inset-top) 12px 0; gap: 8px; }
    .app-header .menu-btn { display: inline-flex; }
    .global-search kbd { display: none; }
    .page-body { padding: 16px 14px calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 24px); }
    .hide-mobile { display: none !important; }
}
@media (max-width: 575.98px) {
    .global-search input { height: 38px; font-size: .9rem; }
}

/* Bottom bar on phones */
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--border);
    display: flex;
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--muted); text-decoration: none; font-size: .68rem; font-weight: 550; position: relative;
}
.bottom-nav a i { font-size: 1.28rem; }
.bottom-nav a.active { color: var(--brand); }
.bottom-nav .call-tab i {
    background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff;
    width: 50px; height: 50px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin-top: -22px; box-shadow: 0 8px 20px rgba(22, 163, 74, .38);
    border: 3px solid var(--bg);
}
.bottom-nav .dot {
    position: absolute; top: 7px; right: calc(50% - 22px);
    background: var(--danger); color: #fff; font-size: .6rem; border-radius: 10px; padding: 0 5px; line-height: 16px;
}

/* ---------- Page pieces ---------- */

.page-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-head h1 { font-size: 1.45rem; margin: 0; }
.page-head .subtitle { color: var(--muted); font-size: .9rem; margin-top: 2px; }
@media (max-width: 575.98px) { .page-head h1 { font-size: 1.25rem; } }

.empty-state { text-align: center; padding: 56px 16px; color: var(--muted); }
.empty-state > i { font-size: 2.2rem; display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 18px; background: var(--brand-soft); color: var(--brand); margin-bottom: 14px; }
.empty-state p { margin-bottom: 14px; }

.avatar {
    --avatar-hue: 240;
    width: 36px; height: 36px; border-radius: 50%;
    background: hsl(var(--avatar-hue) 85% 94%);
    color: hsl(var(--avatar-hue) 55% 38%);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 650; font-size: .82rem; flex-shrink: 0; letter-spacing: .02em;
}
[data-bs-theme="dark"] .avatar { background: hsl(var(--avatar-hue) 40% 22%); color: hsl(var(--avatar-hue) 80% 82%); }
.avatar-sm { width: 28px; height: 28px; font-size: .7rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.15rem; }
.avatar-xl { width: 76px; height: 76px; font-size: 1.6rem; }

.stage-badge {
    background: color-mix(in srgb, var(--stage) 13%, transparent);
    color: color-mix(in srgb, var(--stage) 78%, var(--text));
    border: 1px solid color-mix(in srgb, var(--stage) 28%, transparent);
    font-weight: 600;
    display: inline-flex; align-items: center; gap: .35em;
}
.stage-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--stage); }
[data-bs-theme="dark"] .stage-badge { color: color-mix(in srgb, var(--stage) 55%, #fff); }

.stage-pill { border: 1px solid color-mix(in srgb, var(--stage) 40%, transparent); color: color-mix(in srgb, var(--stage) 80%, var(--text)); background: var(--surface); border-radius: 999px !important; }
.stage-pill:hover { background: color-mix(in srgb, var(--stage) 12%, transparent); color: color-mix(in srgb, var(--stage) 80%, var(--text)); border-color: var(--stage); }
.stage-pill.active { background: var(--stage); color: #fff; border-color: var(--stage); cursor: default; box-shadow: 0 2px 8px color-mix(in srgb, var(--stage) 40%, transparent); }

/* Pipeline progress on a lead */
.stage-track { display: flex; gap: 4px; }
.stage-track span { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); }
.stage-track span.done { background: var(--stage); }

.call-round { width: 46px; height: 46px; padding: 0; border-radius: 50% !important; flex-shrink: 0; }

.details dt { font-weight: 500; color: var(--muted); }
.details dd { margin-bottom: 8px; color: var(--text); font-weight: 500; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font-size: .88rem; margin: 0; }
.kv dt { color: var(--muted); font-weight: 500; }
.kv dd { margin: 0; text-align: right; font-weight: 550; word-break: break-word; }

/* Call results */
.badge.outcome-connected { background: var(--success-soft); color: var(--success); }
.badge.outcome-no_answer { background: var(--warning-soft); color: var(--warning); }
.badge.outcome-busy { background: color-mix(in srgb, #f97316 15%, transparent); color: #ea580c; }
.badge.outcome-switched_off { background: var(--surface-3); color: var(--muted); }
.badge.outcome-wrong_number { background: var(--danger-soft); color: var(--danger); }

.outcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.outcome-grid .btn { padding: 12px 6px; border-radius: 12px; background: var(--surface); }
.outcome-grid .btn-check:checked + .outcome-connected { background: var(--success); border-color: var(--success); color: #fff; }
.outcome-grid .btn-check:checked + .outcome-no_answer { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.outcome-grid .btn-check:checked + .outcome-busy { background: #f97316; border-color: #f97316; color: #fff; }
.outcome-grid .btn-check:checked + .outcome-switched_off { background: #64748b; border-color: #64748b; color: #fff; }
.outcome-grid .btn-check:checked + .outcome-wrong_number { background: var(--danger); border-color: var(--danger); color: #fff; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-row .btn { border-radius: 999px; }

/* ---------- Timeline ---------- */

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline-item { display: flex; gap: 14px; padding-bottom: 18px; position: relative; }
.timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 16px; top: 38px; bottom: 4px; width: 2px; background: var(--border); }
.timeline-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.timeline-item.type-call .timeline-icon { background: var(--success-soft); color: var(--success); }
.timeline-item.type-whatsapp .timeline-icon { background: var(--success-soft); color: #16a34a; }
.timeline-item.type-followup .timeline-icon { background: var(--warning-soft); color: var(--warning); }
.timeline-item.type-note .timeline-icon { background: var(--info-soft); color: var(--info); }
.timeline-item.type-stage .timeline-icon { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.timeline-body { min-width: 0; flex: 1; padding-top: 5px; }
.timeline-text { word-break: break-word; color: var(--text); font-size: .9rem; }
.timeline-meta { font-size: .78rem; color: var(--muted); margin-top: 2px; }

/* ---------- Pipeline board ---------- */

.board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x mandatory; }
.board-column {
    flex: 0 0 290px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 10px; scroll-snap-align: start; display: flex; flex-direction: column; max-height: calc(100vh - 190px);
}
@media (max-width: 575.98px) { .board-column { flex-basis: 84vw; } }
.board-column-head { display: flex; justify-content: space-between; align-items: center; font-weight: 650; font-size: .88rem; padding: 4px 6px 12px; }
.board-column-head > span:first-child { display: inline-flex; align-items: center; gap: .5rem; }
.board-column-head > span:first-child::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--stage); }
.board-cards { min-height: 80px; overflow-y: auto; flex: 1; padding: 2px; }
.board-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 12px; margin-bottom: 8px; box-shadow: var(--shadow-sm); cursor: grab;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
.board-card:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }
.board-card a { color: var(--text); }
.board-card-ghost { opacity: .35; }
.sortable-chosen { box-shadow: var(--shadow-lg) !important; transform: rotate(1.5deg); }

/* ---------- Dashboard ---------- */

.hero {
    position: relative; overflow: hidden;
    border-radius: 18px; padding: 22px 24px;
    background: linear-gradient(120deg, #4f46e5 0%, #7c3aed 55%, #a855f7 100%);
    color: #fff; margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(79, 70, 229, .25);
}
.hero::after {
    content: ''; position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%);
}
.hero h1 { color: #fff; font-size: 1.45rem; margin: 0 0 4px; }
.hero p { margin: 0; opacity: .85; }
.hero .btn-light { --bs-btn-color: #4338ca; font-weight: 650; }
.hero .btn-outline-light { --bs-btn-hover-color: #4338ca; }
.hero-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; font-size: .85rem; }
.hero-stats b { display: block; font-size: 1.25rem; font-weight: 700; }

.stat-tile {
    display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px 18px; box-shadow: var(--shadow-sm); height: 100%; color: inherit; text-decoration: none;
    transition: box-shadow .15s, border-color .15s;
}
a.stat-tile:hover { box-shadow: var(--shadow); border-color: var(--border-strong); color: inherit; }
.stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-icon { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; background: var(--brand-soft); color: var(--brand); }
.stat-icon.green { background: var(--success-soft); color: var(--success); }
.stat-icon.amber { background: var(--warning-soft); color: var(--warning); }
.stat-icon.sky { background: var(--info-soft); color: var(--info); }
.stat-icon.violet { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.stat-icon.rose { background: var(--danger-soft); color: var(--danger); }
.stat-label { font-size: .8rem; color: var(--muted); font-weight: 550; margin-top: 12px; }
.stat-value { font-size: 1.65rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.delta { font-size: .72rem; font-weight: 650; padding: 2px 7px; border-radius: 999px; display: inline-flex; align-items: center; gap: 2px; }
.delta.up { background: var(--success-soft); color: var(--success); }
.delta.down { background: var(--danger-soft); color: var(--danger); }
.delta.flat { background: var(--surface-3); color: var(--muted); }
@media (max-width: 575.98px) { .stat-tile { padding: 13px 14px; } .stat-value { font-size: 1.35rem; } .stat-label { margin-top: 8px; } }

.chart-box { position: relative; height: 260px; }

.bar-list { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 44px; gap: 12px; align-items: center; color: inherit; text-decoration: none; font-size: .87rem; }
.bar-row:hover { color: inherit; }
.bar-row:hover .bar-fill { filter: brightness(.95) saturate(1.1); }
.bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-weight: 500; }
.bar-track { background: var(--surface-3); border-radius: 6px; height: 10px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--stage); border-radius: 6px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.bar-value { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }

.leader-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.leader-row:last-child { border-bottom: 0; }
.leader-rank { width: 22px; font-weight: 700; color: var(--muted); font-size: .85rem; text-align: center; }
.leader-row:nth-child(1) .leader-rank { color: #d97706; }
.progress { --bs-progress-bg: var(--surface-3); --bs-progress-bar-bg: var(--brand); height: 6px; border-radius: 6px; }

/* Lists of leads (follow-ups etc.) */
.lead-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.lead-row:last-child { border-bottom: 0; }
.lead-row:hover { background: var(--surface-2); color: inherit; }
.lead-row .name { font-weight: 600; color: var(--text); }
.lead-row .meta { font-size: .8rem; color: var(--muted); }
.lead-row .meta.overdue { color: var(--danger); font-weight: 550; }

.lead-cards .lead-card { margin-bottom: 10px; }
.lead-cards .card-body { padding: 12px 14px; }


/* Filters */
.filter-bar .form-control, .filter-bar .form-select { height: 40px; }
.search-input { position: relative; }
.search-input i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-input input { padding-left: 36px; }

/* ---------- Lead page ---------- */

.lead-hero { display: flex; gap: 16px; align-items: flex-start; }
.lead-hero h1 { font-size: 1.3rem; margin: 0 0 2px; }
.lead-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.quick-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: .82rem; margin-top: 6px; }
.quick-facts span { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Call queue ---------- */

.queue-card { max-width: 560px; margin: 0 auto; }
.queue-reason { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 650; padding: 4px 10px; border-radius: 999px; background: var(--warning-soft); color: var(--warning); }
.queue-reason.new { background: var(--info-soft); color: var(--info); }
.queue-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 560px; margin: 0 auto 16px; }
.queue-counts div { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px; text-align: center; }
.queue-counts b { display: block; font-size: 1.3rem; }
.queue-counts span { font-size: .75rem; color: var(--muted); }
.big-call { height: 64px; font-size: 1.1rem; border-radius: 16px; box-shadow: 0 8px 20px rgba(22, 163, 74, .3); }

/* ---------- Login and other guest pages ---------- */

.guest-page { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--surface); }
.guest-art {
    position: relative; overflow: hidden; padding: 48px;
    display: flex; flex-direction: column; justify-content: space-between;
    background: radial-gradient(1200px 600px at 0% 0%, #6366f1 0%, transparent 60%),
                radial-gradient(900px 600px at 100% 100%, #a855f7 0%, transparent 55%),
                #312e81;
    color: #fff;
}
.guest-art .brand { color: #fff; padding: 0; }
.guest-art .brand small { color: rgba(255, 255, 255, .7); }
.guest-art h2 { color: #fff; font-size: 2.1rem; line-height: 1.15; font-weight: 700; letter-spacing: -.03em; max-width: 440px; }
.guest-art p { color: rgba(255, 255, 255, .78); max-width: 420px; }
.guest-feats { display: grid; gap: 12px; margin-top: 28px; max-width: 420px; }
.guest-feats div { display: flex; gap: 12px; align-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 12px 14px; font-size: .9rem; backdrop-filter: blur(6px); }
.guest-feats i { font-size: 1.15rem; width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, .14); display: inline-flex; align-items: center; justify-content: center; }
.guest-main { position: relative; display: flex; align-items: center; justify-content: center; padding: 72px 20px 32px; }
.guest-box { width: 100%; max-width: 400px; }
.guest-box.wide { max-width: 480px; }
.guest-art .brand:hover { color: #fff; }
.guest-top { position: absolute; top: 16px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; }
.guest-back { color: var(--text-2); text-decoration: none; font-size: .88rem; font-weight: 550; display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 8px; }
.guest-back:hover { color: var(--text); background: var(--surface-3); }
.guest-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .82rem; color: rgba(255, 255, 255, .72); }
.guest-trust i { margin-right: 4px; }
.guest-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin-top: 28px; font-size: .8rem; color: var(--muted); }
.guest-foot a { color: var(--muted); text-decoration: none; }
.guest-foot a:hover { color: var(--brand); }
.guest-box .form-label { font-weight: 600; font-size: .86rem; margin-bottom: .35rem; }
.guest-box .input-icon { position: relative; }
.guest-box .input-icon > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.guest-box .input-icon > .form-control { padding-left: 40px; }
.guest-box .input-icon > .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.guest-box .input-icon > .form-control.has-toggle { padding-right: 44px; }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.pw-meter span { height: 4px; border-radius: 4px; background: var(--surface-3); transition: background .2s; }
.pw-meter[data-level="1"] span:nth-child(-n+1) { background: var(--danger); }
.pw-meter[data-level="2"] span:nth-child(-n+2) { background: #f59e0b; }
.pw-meter[data-level="3"] span:nth-child(-n+3) { background: #22c55e; }
.pw-meter[data-level="4"] span { background: #16a34a; }
.pw-rules { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .76rem; color: var(--muted); }
.pw-rules li.ok { color: var(--success); }
.pw-rules li i { margin-right: 3px; }
.guest-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .78rem; margin: 18px 0; }
.guest-divider::before, .guest-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.turnstile-box { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.turnstile-box .cf-turnstile { max-width: 100%; }
.turnstile-box .turnstile-hint { text-align: center; }
.turnstile-box .turnstile-hint:empty { display: none; }
.guest-box h1 { font-size: 1.6rem; margin-bottom: 4px; }
.guest-logo { display: none; }
@media (max-width: 991.98px) {
    .guest-page { grid-template-columns: 1fr; background: var(--bg); }
    .guest-art { display: none; }
    .guest-logo { display: inline-flex; }
    .guest-main { align-items: flex-start; }
}

/* ---------- Small helpers ---------- */

.hover-lift { transition: transform .15s, box-shadow .15s; }
.hover-lift:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.kbd { font-size: .72rem; background: var(--surface-3); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; color: var(--muted); }
.fade-in { animation: fadeIn .35s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Toasts (used by JavaScript instead of alert boxes) */
.toast-stack { position: fixed; z-index: 2000; font-family: var(--bs-body-font-family); bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 12px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: calc(100% - 32px); max-width: 420px; }
@media (min-width: 992px) { .toast-stack { bottom: 24px; left: auto; right: 24px; transform: none; align-items: flex-end; } }
.toast-msg { pointer-events: auto; background: var(--text); color: var(--surface); padding: 10px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: .88rem; font-weight: 550; display: flex; align-items: center; gap: 8px; animation: fadeIn .2s ease both; }
.toast-msg.error { background: var(--danger); color: #fff; }

/* Print: just the content */
@media print {
    .rail, .subnav, .subnav-chips, .app-header, .bottom-nav, .btn { display: none !important; }
    .main-area { margin-left: 0 !important; }
    .main-area { margin: 0 !important; }
}

/* ---------- WhatsApp chat ---------- */
.chat-box { height: 420px; overflow-y: auto; padding: 12px; border-radius: 12px; display: flex; flex-direction: column; gap: 6px;
    background: color-mix(in srgb, var(--wa) 6%, var(--surface-2)); border: 1px solid var(--border); }
.chat-msg { max-width: 78%; padding: 8px 12px 6px; border-radius: 14px; font-size: .9rem; box-shadow: var(--shadow-sm); word-break: break-word; }
.chat-msg.in { align-self: flex-start; background: var(--surface); border-top-left-radius: 4px; }
.chat-msg.out { align-self: flex-end; background: color-mix(in srgb, var(--wa) 22%, var(--surface)); border-top-right-radius: 4px; }
.chat-msg img { max-width: 220px; border-radius: 10px; display: block; margin-bottom: 4px; }
.chat-text { white-space: pre-wrap; }
.chat-meta { font-size: .7rem; color: var(--muted); text-align: right; margin-top: 2px; }

/* ---------- Automations builder ---------- */
.auto-step { position: relative; padding-left: 92px; margin-bottom: 14px; }
.auto-step::before { content: ''; position: absolute; left: 38px; top: 34px; bottom: -14px; width: 2px; background: var(--border); }
.auto-step:last-of-type::before { display: none; }
.auto-step-badge { position: absolute; left: 0; top: 14px; width: 78px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-radius: 999px; padding: 4px 0; text-align: center; }
.auto-step-badge.when { background: var(--brand-soft); color: var(--brand); }
.auto-step-badge.if { background: var(--info-soft); color: var(--info); }
.auto-step-badge.wait { background: var(--warning-soft); color: var(--warning); }
.auto-step-badge.then { background: var(--success-soft); color: var(--success); }
.auto-row { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr auto; gap: 8px; align-items: center; }
.auto-action { border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: var(--surface-2); }
.auto-num { width: 26px; height: 26px; border-radius: 50%; background: var(--success-soft); color: var(--success); font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
@media (max-width: 767.98px) {
    .auto-step { padding-left: 0; padding-top: 30px; }
    .auto-step::before { display: none; }
    .auto-step-badge { top: 0; }
    .auto-row { grid-template-columns: 1fr 1fr auto; }
    .auto-row .auto-value { grid-column: 1 / 3; grid-row: 2; }
}

/* ---------- Score and tags ---------- */
.lead-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.score-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.score-badge.hot { background: var(--danger-soft); color: var(--danger); }
.score-badge.warm { background: var(--warning-soft); color: var(--warning); }
.score-badge.cold { background: var(--info-soft); color: var(--info); }
.tag-chip { display: inline-flex; align-items: center; gap: 2px; font-size: .74rem; font-weight: 600; border-radius: 999px; padding: 3px 4px 3px 9px;
    background: color-mix(in srgb, var(--tag, #64748b) 14%, transparent); color: color-mix(in srgb, var(--tag, #64748b) 80%, var(--text));
    border: 1px solid color-mix(in srgb, var(--tag, #64748b) 25%, transparent); }
[data-bs-theme="dark"] .tag-chip { color: color-mix(in srgb, var(--tag, #64748b) 55%, #fff); }
.tag-chip.tag-new { background: var(--surface); color: var(--muted); border-style: dashed; padding-right: 9px; cursor: pointer; }
.tag-chip.tag-new:hover { color: var(--brand); border-color: var(--brand); }
.tag-chip.small-chip { padding: 1px 7px; font-size: .68rem; }
.tag-x { border: 0; background: transparent; color: inherit; padding: 0 2px; line-height: 1; opacity: .6; }
.tag-x:hover { opacity: 1; }
.tag-add .js-tag-input { width: 170px; height: 28px; border-radius: 999px; }

/* ---------- Alerts (bell) ---------- */
.alert-menu { width: 380px; max-width: calc(100vw - 24px); overflow: hidden; }
.alert-menu-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.alert-menu-foot { display: block; text-align: center; padding: 10px; font-size: .85rem; font-weight: 600; border-top: 1px solid var(--border); }
.alert-menu .alert-list { max-height: 420px; overflow-y: auto; }
.alert-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; position: relative; }
.alert-item:last-child { border-bottom: 0; }
.alert-item:hover { background: var(--surface-2); color: var(--text); }
.alert-item.unread { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.alert-ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--brand-soft); color: var(--brand); }
.alert-ico.type-sla, .alert-ico.type-stalled { background: var(--warning-soft); color: var(--warning); }
.alert-ico.type-assigned { background: var(--success-soft); color: var(--success); }
.alert-ico.type-whatsapp { background: var(--success-soft); color: #16a34a; }
.alert-title { font-weight: 600; font-size: .88rem; }
.alert-body { font-size: .8rem; color: var(--muted); }
.alert-time { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.alert-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-top: 6px; flex-shrink: 0; }
.coming-soon { font-size: .68rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); white-space: nowrap; }

/* ---------------------------------------------------------------
   Skeleton loaders (shown while a page or a box is loading)
   --------------------------------------------------------------- */
.sk {
    --sk-a: color-mix(in srgb, var(--text) 7%, transparent);
    --sk-b: color-mix(in srgb, var(--text) 13%, transparent);
    background: linear-gradient(90deg, var(--sk-a) 25%, var(--sk-b) 37%, var(--sk-a) 63%);
    background-size: 400% 100%;
    animation: skShimmer 1.3s ease-in-out infinite;
    border-radius: 7px;
}
@keyframes skShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
.page-body.is-loading > :not(.page-skeleton) { display: none !important; }
.page-skeleton { animation: fadeIn .15s ease both; }
.sk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.sk-title { height: 26px; width: 220px; margin-bottom: 10px; }
.sk-line { height: 11px; margin: 8px 0; width: 100%; }
.sk-line.w-10 { width: 10%; } .sk-line.w-20 { width: 20%; } .sk-line.w-30 { width: 30%; } .sk-line.w-40 { width: 40%; }
.sk-line.w-50 { width: 50%; } .sk-line.w-60 { width: 60%; }
.sk-btn { height: 38px; width: 120px; border-radius: 10px; }
.sk-num { height: 30px; width: 46%; margin: 12px 0; }
.sk-pill { height: 22px; width: 76px; border-radius: 999px; }
.sk-avatar { width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0; }
.sk-avatar.sm { width: 28px; height: 28px; }
.sk-avatar.lg { width: 56px; height: 56px; }
.sk-input { height: 38px; width: 260px; border-radius: 10px; }
.sk-input.short { width: 130px; }
.sk-input.wide { width: 100%; max-width: 520px; }
.sk-chart { height: 230px; margin-top: 14px; border-radius: 10px; }
.sk-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 14px); padding: 18px; margin-bottom: 16px; }
.sk-card.p-0 { padding: 0; overflow: hidden; }
.sk-card.sk-mini { padding: 12px; margin-bottom: 10px; }
.sk-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.sk-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sk-grid-4 .sk-card { margin-bottom: 0; }
.sk-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.sk-toolbar { display: flex; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.sk-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.sk-row .sk-line { margin: 5px 0; }
.sk-row:last-child { border-bottom: 0; }
.sk-board { display: flex; gap: 14px; overflow: hidden; }
.sk-col { flex: 0 0 260px; background: var(--surface-2, var(--surface-3)); border-radius: 14px; padding: 12px; }
.sk-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.sk-cal .sk { height: 72px; }
.sk-form { max-width: 720px; display: grid; gap: 14px; }
.sk-list .sk-row { padding: 10px 14px; }
@media (max-width: 991.98px) {
    .sk-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sk-cols { grid-template-columns: minmax(0, 1fr); }
    .sk-input { width: 100%; }
    .sk-toolbar .sk-input.short { display: none; }
}

/* A button whose form is being saved */
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
    content: ""; position: absolute; inset: 0; margin: auto; width: 1rem; height: 1rem;
    border: 2px solid currentColor; border-color: rgba(255,255,255,.85) rgba(255,255,255,.85) transparent; border-radius: 50%;
    animation: spin .7s linear infinite;
}
.btn-outline-secondary.is-busy::after, .btn-ghost.is-busy::after, .btn-light.is-busy::after { border-color: var(--muted) var(--muted) transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.sk-chat { display: flex; flex-direction: column; gap: 10px; padding: 0 6px; }
.sk-chat .sk { height: 36px; width: 55%; border-radius: 14px; }
.sk-chat .sk.me { align-self: flex-end; width: 40%; }

/* Account menu (top right, Teams style) */
.account-btn {
    display: inline-flex; align-items: center; gap: 10px; border: 0; background: none;
    padding: 4px 4px 4px 12px; border-radius: 999px; color: var(--text); font-weight: 600; font-size: .88rem;
}
.account-btn:hover, .account-btn[aria-expanded="true"] { background: var(--surface-3); }
.account-org { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-avatar { position: relative; display: inline-flex; }
.account-avatar .avatar-sm { width: 32px; height: 32px; font-size: .74rem; }
.presence {
    position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
    background: var(--success, #16a34a); border: 2px solid var(--bg);
}
.account-avatar.lg .presence { width: 16px; height: 16px; border-color: var(--surface); }
.account-card { width: 340px; overflow: hidden; border-radius: 14px; }
.account-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px 4px; }
.account-signout { color: var(--text-2); text-decoration: none; font-size: .85rem; }
.account-signout:hover { color: var(--danger); }
.account-who { display: flex; gap: 14px; align-items: center; padding: 12px 18px 16px; }
.account-link { color: var(--text-2); text-decoration: none; }
.account-link:hover { color: var(--brand); text-decoration: underline; }
.account-items { border-top: 1px solid var(--border); padding: 6px; background: var(--surface-2); }
.account-item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 9px 12px; border-radius: 8px; border: 0; background: none; text-align: left;
    color: var(--text); text-decoration: none; font-size: .9rem;
}
.account-item > i:first-child { font-size: 1.05rem; width: 20px; text-align: center; color: var(--text-2); }
.account-item:not(.no-hover):hover { background: var(--surface-3); }
.account-item .chev { color: var(--muted); font-size: .8rem; }
.account-item .nav-count { margin-left: auto; }
.theme-switch { display: inline-flex; background: var(--surface-3); border-radius: 8px; padding: 2px; gap: 2px; }
.theme-switch button { border: 0; background: none; width: 32px; height: 28px; border-radius: 6px; color: var(--text-2); }
.theme-switch button.on { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
@media (max-width: 575.98px) { .account-card { width: calc(100vw - 24px); } .account-btn { padding: 2px; } }

/* Footer fixed at the bottom (computers) */
:root { --footer-height: 56px; }
.app-footer {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: 1025;
    height: var(--footer-height);
    display: none; align-items: center; justify-content: space-between; gap: 12px;
    padding: 0 20px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--border);
}
.footer-left, .footer-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
.footer-copy { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.footer-copy b { color: var(--text-2); font-weight: 650; }
.plan-pill {
    --pill: var(--success);
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    padding: .3rem .8rem; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--pill) 55%, transparent);
    background: color-mix(in srgb, var(--pill) 10%, transparent);
    color: var(--pill); font-size: .8rem; font-weight: 650; text-decoration: none;
}
.plan-pill:hover { background: color-mix(in srgb, var(--pill) 18%, transparent); color: var(--pill); }
.plan-pill.trial { --pill: var(--brand); }
.plan-pill.warn { --pill: var(--warning, #d97706); }
.plan-pill.bad { --pill: var(--danger); }
.btn-footer {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--surface-3); border: 1px solid var(--border); color: var(--text);
    font-weight: 600; font-size: .85rem; border-radius: 9px; padding: .42rem .9rem;
}
.btn-footer:hover, .btn-footer[aria-expanded="true"] { background: var(--surface-2); border-color: var(--muted); color: var(--text); }
.btn-new { font-weight: 650; padding-left: 1rem; }
.btn-new-more { padding: 0 .6rem; border-left: 1px solid rgba(255,255,255,.25) !important; }
.ask-card { width: 300px; }
@media (min-width: 992px) {
    .app-footer { display: flex; left: var(--rail-width); }
    .has-subnav .app-footer { left: calc(var(--rail-width) + var(--subnav-width)); }
    html.subnav-closed .has-subnav .app-footer { left: var(--rail-width); }
    .page-body { padding-bottom: calc(var(--footer-height) + 32px); }
}
@media print { .app-footer { display: none !important; } }

/* Header: search box in the middle (computers) */
@media (min-width: 992px) {
    .app-header { display: grid; grid-template-columns: 1fr minmax(0, 580px) 1fr; }
    .app-header > .menu-btn { display: none; }
    .app-header > .global-search { grid-column: 2; max-width: none; width: 100%; }
    .app-header > .header-actions { grid-column: 3; justify-self: end; margin-left: 0; }
}

/* Menu icon animations */
.rail-item i { transition: transform .22s cubic-bezier(.34, 1.56, .64, 1); }
.rail-item:hover i { transform: translateY(-2px) scale(1.08); }
.rail-item:active i { transform: scale(.9); }
.rail-item.pop .ic-on { animation: iconPop .38s cubic-bezier(.34, 1.56, .64, 1); }
.rail-item.pop::before { animation: railBar .25s ease-out; transform-origin: center; }
@keyframes iconPop { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes railBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.rail-badge { animation: badgeIn .3s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes badgeIn { from { transform: scale(0); } to { transform: scale(1); } }
.subnav-panel.anim-in { animation: panelIn .2s ease-out; }
@keyframes panelIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.subnav-link i { transition: transform .18s ease; }
.subnav-link:hover i { transform: translateX(2px) scale(1.1); }
.js-subnav-toggle i, .chip-open i { display: inline-block; transition: transform .25s ease; }
.js-subnav-toggle:hover i { transform: translateX(-2px); }
.chip-open:hover i { transform: translateX(2px); }
.header-actions .btn-icon i, .account-avatar { transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.header-actions .btn-icon:hover i { transform: rotate(-12deg) scale(1.1); }
.account-btn:hover .account-avatar { transform: scale(1.06); }
.presence { animation: presence 2.4s ease-in-out infinite; }
@keyframes presence { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent); } 50% { box-shadow: 0 0 0 4px transparent; } }
@media (prefers-reduced-motion: reduce) {
    .rail-item i, .rail-item.pop .ic-on, .rail-item.pop::before, .rail-badge, .subnav-panel, .subnav-link i, .presence { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------
   Lead list: stage tabs, toolbar, filter panel, table
   --------------------------------------------------------------- */
.list-shell { overflow: visible; }
.stage-tabs {
    display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
    padding: 0 12px; border-bottom: 1px solid var(--border);
}
.stage-tabs::-webkit-scrollbar { display: none; }
.stage-tabs a {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: .45rem;
    padding: 12px 12px 11px; border-bottom: 2px solid transparent; margin-bottom: -1px;
    color: var(--text-2); text-decoration: none; font-size: .86rem; font-weight: 560; white-space: nowrap;
}
.stage-tabs a:hover { color: var(--text); }
.stage-tabs a.active { color: var(--text); border-bottom-color: var(--stage, var(--brand)); font-weight: 650; }
.stage-tabs .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stage); display: inline-block; }
.stage-tabs b { font-size: .72rem; font-weight: 650; color: var(--muted); background: var(--surface-3); border-radius: 999px; padding: 1px 7px; }
.stage-tabs a.active b { background: color-mix(in srgb, var(--stage, var(--brand)) 18%, transparent); color: var(--text); }

.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; }
.list-toolbar .search-input { min-width: 220px; }
.list-toolbar .search-input .form-control { height: 38px; }
.toolbar-btn { height: 38px; display: inline-flex; align-items: center; gap: .4rem; font-weight: 560; }
.toolbar-btn .count { background: var(--brand); color: #fff; border-radius: 999px; font-size: .7rem; padding: 0 7px; line-height: 1.5; }
.toolbar-btn.has-value { border-color: var(--brand); color: var(--brand); }
.temp-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; height: 38px; }
.temp-switch a {
    display: inline-flex; align-items: center; gap: .35rem; padding: 0 .75rem;
    color: var(--text-2); text-decoration: none; font-size: .84rem; font-weight: 560;
}
.temp-switch a + a { border-left: 1px solid var(--border); }
.temp-switch a:hover { background: var(--surface-3); color: var(--text); }
.temp-switch a.hot i { color: #ef4444; } .temp-switch a.warm i { color: #f59e0b; } .temp-switch a.cold i { color: #0ea5e9; }
.temp-switch a.on.hot { background: color-mix(in srgb, #ef4444 14%, transparent); color: #ef4444; }
.temp-switch a.on.warm { background: color-mix(in srgb, #f59e0b 14%, transparent); color: #d97706; }
.temp-switch a.on.cold { background: color-mix(in srgb, #0ea5e9 14%, transparent); color: #0284c7; }

.filter-panel {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px;
    align-items: end; padding: 14px; margin-top: 4px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
}
.filter-field { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.filter-field > span { font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.filter-dates { grid-column: span 2; }
.filter-dates input { min-width: 0; }
.filter-actions { display: flex; gap: 6px; }
@media (max-width: 575.98px) { .filter-dates { grid-column: auto; } }

.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 12px 12px; }
.filter-chip {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .2rem .35rem .2rem .7rem; border-radius: 999px;
    background: var(--brand-soft); color: var(--brand); text-decoration: none; font-size: .8rem; font-weight: 600;
}
.filter-chip i { font-size: 1rem; opacity: .7; }
.filter-chip:hover { background: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--brand); }
.filter-chip:hover i { opacity: 1; }

.lead-table-card { overflow: hidden; }
.lead-table thead th {
    position: sticky; top: 0; z-index: 1;
    font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
    padding: 11px 12px; white-space: nowrap; background: var(--surface-2) !important;
}
.lead-table td { padding: 10px 12px; border-color: var(--border); }
.lead-table tbody tr { cursor: pointer; transition: background-color .1s; }
.lead-table tbody tr:hover > td { background: var(--surface-2); }
.lead-table tbody tr.selected > td { background: var(--brand-soft); }
.lead-table .col-check { width: 44px; padding-left: 16px; }
.lead-table .col-actions { width: 96px; text-align: right; padding-right: 14px; }
.lead-cell { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.lead-name { display: block; font-weight: 620; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.lead-cell:hover .lead-name { color: var(--brand); }
.lead-sub { display: block; font-size: .8rem; color: var(--muted); }
.lead-sub .sep { margin: 0 .35rem; opacity: .6; }
.lead-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; padding-left: 44px; }
.owner-cell { display: inline-flex; align-items: center; gap: 8px; max-width: 170px; }
.lead-table .score-badge { display: inline-flex; align-items: center; gap: .3rem; min-width: 52px; justify-content: center; }
.due { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-2); }
.due.today { color: var(--brand); font-weight: 600; }
.due.overdue { color: var(--danger); font-weight: 600; background: color-mix(in srgb, var(--danger) 10%, transparent); padding: 2px 8px; border-radius: 999px; }
.never-called { color: var(--warning); font-weight: 600; }
.source-chip { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); font-size: .76rem; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.row-open { opacity: .45; transition: opacity .12s, transform .12s; }
.lead-table tbody tr:hover .row-open { opacity: 1; transform: translateX(2px); }
.table-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px; border-top: 1px solid var(--border); font-size: .84rem; color: var(--muted);
}
.table-foot b { color: var(--text); font-weight: 650; }
.table-foot nav, .table-foot .pagination { margin: 0; }
.table-foot nav > div:first-child, .table-foot nav p { display: none; }

/* Selected leads: a floating action bar */
.bulk-bar {
    position: fixed; left: 50%; transform: translateX(-50%); z-index: 1040;
    bottom: calc(var(--bottom-nav-height) + 14px + env(safe-area-inset-bottom));
    width: max-content; max-width: calc(100vw - 24px);
}
@media (min-width: 992px) { .bulk-bar { bottom: calc(var(--footer-height) + 16px); left: calc(50% + 150px); } }
.bulk-inner {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    padding: 8px 10px 8px 16px; box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.25));
    animation: fadeIn .18s ease both;
}

/* Thin, theme-coloured scrollbars (pipeline board, tables, panels) */
.board, .table-responsive, .subnav, .board-cards { scrollbar-width: thin; scrollbar-color: var(--border-strong, var(--border)) transparent; }
.board::-webkit-scrollbar, .table-responsive::-webkit-scrollbar, .board-cards::-webkit-scrollbar { height: 8px; width: 8px; }
.board::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb, .board-cards::-webkit-scrollbar-thumb { background: var(--border-strong, var(--border)); border-radius: 8px; }
.board::-webkit-scrollbar-track, .table-responsive::-webkit-scrollbar-track { background: transparent; }
.board { min-height: calc(100vh - 230px); }
.board-column { min-height: 320px; }
.toolbar-btn .chev { font-size: .75rem; transition: transform .2s ease; }
.toolbar-btn[aria-expanded="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.toolbar-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.filter-panel { animation: fadeIn .18s ease both; }

/* Version at the bottom of the icon bar */
.rail-version {
    margin-top: 6px; font-size: .64rem; font-weight: 650; letter-spacing: .02em;
    color: var(--muted); text-decoration: none; padding: 2px 7px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface-2);
}
.rail-version:hover { color: var(--brand); border-color: var(--brand); }

/* User guide */
.guide-article { max-width: 820px; }
.guide-crumb { font-size: .82rem; color: var(--muted); margin-bottom: 10px; }
.guide-crumb a { color: var(--muted); text-decoration: none; }
.guide-crumb a:hover { color: var(--brand); }
.guide-crumb .bi-chevron-right { font-size: .7rem; margin: 0 4px; }
.guide-article h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -.025em; display: flex; gap: .6rem; align-items: center; }
.guide-article h1 i { color: var(--brand); }
.guide-intro { font-size: 1.06rem; color: var(--text-2); margin-bottom: 28px; }
.guide-article h2 { font-size: 1.2rem; font-weight: 750; margin: 32px 0 10px; padding-top: 6px; }
.guide-article h3 { font-size: 1rem; font-weight: 700; margin: 20px 0 8px; }
.guide-article p, .guide-article li { color: var(--text-2); line-height: 1.65; }
.guide-article ol, .guide-article ul { padding-left: 1.3rem; }
.guide-article li { margin-bottom: 4px; }
.guide-article b, .guide-article strong { color: var(--text); }
.guide-article kbd { background: var(--surface-3); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; font-size: .8em; }
.guide-article .path { display: inline-flex; align-items: center; gap: .3rem; background: var(--brand-soft); color: var(--brand); border-radius: 6px; padding: 1px 8px; font-size: .86em; font-weight: 600; white-space: nowrap; }
.guide-tip { display: flex; gap: 12px; border: 1px solid var(--border); border-left: 4px solid var(--brand); background: var(--surface); border-radius: 10px; padding: 12px 16px; margin: 16px 0; }
.guide-tip.warn { border-left-color: var(--warning); }
.guide-tip > i { color: var(--brand); font-size: 1.1rem; }
.guide-tip.warn > i { color: var(--warning); }
.guide-tip p { margin: 0; }
.guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; }
.guide-cards a { display: block; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 14px; text-decoration: none; transition: border-color .15s, transform .15s; }
.guide-cards a:hover { border-color: var(--brand); transform: translateY(-2px); }
.guide-cards a i { color: var(--brand); font-size: 1.2rem; }
.guide-cards a b { display: block; margin: 6px 0 2px; color: var(--text); }
.guide-cards a span { font-size: .84rem; color: var(--muted); }
.guide-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .92rem; }
.guide-table th, .guide-table td { border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
.guide-table th { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
.guide-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border); }
.guide-pager a { flex: 1; max-width: 48%; border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; text-decoration: none; background: var(--surface); }
.guide-pager a.next { text-align: right; margin-left: auto; }
.guide-pager a:hover { border-color: var(--brand); }
.guide-pager small { display: block; color: var(--muted); font-size: .76rem; }
.guide-pager span { color: var(--text); font-weight: 650; }

/* Release notes */
.release { position: relative; padding-left: 28px; margin-bottom: 36px; }
.release::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: -28px; width: 2px; background: var(--border); }
.release:last-child::before { display: none; }
.release-dot { position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.release-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.release-head .ver { font-size: 1.15rem; font-weight: 800; color: var(--text); }
.release-head .current { font-size: .7rem; font-weight: 700; background: var(--brand); color: #fff; border-radius: 999px; padding: 2px 8px; }
.release-head time { color: var(--muted); font-size: .85rem; }
.release h2 { margin: 0 0 12px !important; padding: 0 !important; font-size: 1.05rem !important; color: var(--text-2); font-weight: 600 !important; }
.release ul { list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.release li { display: flex; gap: 10px; align-items: flex-start; margin: 0 !important; }
.rn-type { flex-shrink: 0; font-size: .66rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; border-radius: 6px; padding: 3px 8px; margin-top: 3px; min-width: 72px; text-align: center; }
.rn-type.new { background: rgba(34, 197, 94, .14); color: #16a34a; }
.rn-type.improved { background: var(--brand-soft); color: var(--brand); }
.rn-type.fixed { background: rgba(245, 158, 11, .16); color: #b45309; }
[data-bs-theme="dark"] .rn-type.new { color: #4ade80; }
[data-bs-theme="dark"] .rn-type.fixed { color: #fbbf24; }

/* Two-step login: choose app or email */
.method-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.method-card {
    display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px;
    border: 1px solid var(--border); background: var(--surface); text-decoration: none; color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.method-card > i { font-size: 1.4rem; color: var(--muted); }
.method-card b { display: block; }
.method-card small { color: var(--muted); font-size: .82rem; }
.method-card:hover { border-color: var(--brand); color: var(--text); }
.method-card.active { border: 2px solid var(--brand); background: var(--brand-soft); padding: 13px 15px; }
.method-card.active > i { color: var(--brand); }
.qr-box { width: 212px; height: 212px; padding: 8px; background: #fff; border-radius: 12px; border: 1px solid var(--border); flex-shrink: 0; }
.otp-input { letter-spacing: .3em; font-weight: 650; }
@media (max-width: 575.98px) { .method-choice { grid-template-columns: 1fr; } }

/* Integrations hub */
.integ-summary { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: .9rem; color: var(--text-2); }
.integ-summary b { color: var(--text); font-size: 1.05rem; }
.integ-summary .warn b { color: var(--warning); }
.integ-group { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 10px; }
.integ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.integ-tile {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 12px; text-align: left; width: 100%;
    padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.integ-tile:not(:disabled):hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--border)); box-shadow: 0 10px 28px -16px rgba(15, 23, 42, .4); transform: translateY(-2px); color: var(--text); }
.integ-tile:disabled { opacity: .65; cursor: default; }
.integ-logo { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; color: var(--logo); background: color-mix(in srgb, var(--logo) 13%, transparent); flex-shrink: 0; }
.integ-text b { display: block; font-size: .95rem; }
.integ-text small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.35; margin-top: 2px; }
.integ-status { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 650; border-radius: 999px; padding: 2px 9px; margin-top: 6px; background: var(--surface-3); color: var(--text-2); }
.integ-status em { font-style: normal; font-weight: 500; opacity: .8; }
.integ-status.on { background: rgba(34, 197, 94, .14); color: #16a34a; }
.integ-status.off { background: rgba(245, 158, 11, .15); color: #b45309; }
.integ-status.ready { background: var(--brand-soft); color: var(--brand); }
[data-bs-theme="dark"] .integ-status.on { color: #4ade80; }
[data-bs-theme="dark"] .integ-status.off { color: #fbbf24; }
.integ-drawer { --bs-offcanvas-width: min(520px, 100vw); }
.integ-drawer .offcanvas-header { gap: 12px; border-bottom: 1px solid var(--border); }
.integ-drawer .integ-logo { grid-row: auto; }
.integ-steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 14px; }
.integ-steps > li { counter-increment: s; position: relative; padding-left: 38px; color: var(--text-2); font-size: .92rem; line-height: 1.55; }
.integ-steps > li::before { content: counter(s); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 750; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.integ-steps b { color: var(--text); }
.copy-field { display: flex; gap: 6px; margin-top: 8px; }
.copy-field .form-control { font-size: .8rem; background: var(--surface-2); }
.copy-field .btn { white-space: nowrap; }
.integ-form { border-top: 1px solid var(--border); padding-top: 18px; }
.integ-actions { display: flex; gap: 8px; align-items: center; margin-top: 18px; }
.integ-state { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; font-size: .88rem; font-weight: 600; margin-bottom: 16px; }
.integ-state.on { background: rgba(34, 197, 94, .12); color: #16a34a; }
.integ-state.off { background: rgba(245, 158, 11, .14); color: #b45309; }
.integ-example pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; font-size: .78rem; white-space: pre-wrap; word-break: break-all; color: var(--text); }

/* Call queue */
.queue-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; max-width: 1100px; }
@media (max-width: 991.98px) { .queue-layout { grid-template-columns: 1fr; } }
.call-now { overflow: hidden; }
.call-now-reason { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 10px 20px; font-size: .88rem; border-bottom: 1px solid var(--border); }
.call-now-reason.due { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.call-now-reason.new { background: var(--brand-soft); color: var(--brand); }
.call-now-reason span { color: var(--text-2); }
.call-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px; margin-bottom: 18px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.call-facts > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.call-facts span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; }
.call-facts b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-facts .score-badge { align-self: flex-start; }
@media (max-width: 575.98px) { .call-facts { grid-template-columns: 1fr 1fr; } }
.queue-stat { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.queue-stat:last-of-type { border-bottom: 0; }
.queue-stat b { margin-left: auto; font-size: 1.15rem; }
.up-next { display: flex; gap: 10px; align-items: center; padding: 8px; margin: 0 -8px; border-radius: 8px; text-decoration: none; color: var(--text); }
.up-next:hover { background: var(--surface-2); color: var(--text); }
.up-next small { color: var(--muted); font-size: .78rem; }

/* Pipeline columns: coloured top edge, count, and a placeholder in empty columns */
.board-column { border-top: 3px solid var(--stage); }
.board-column-head .col-count { font-size: .74rem; font-weight: 700; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; }
.board-cards:not(:has(.board-card))::after {
    content: attr(data-empty); display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 120px; padding: 16px; border: 2px dashed var(--border); border-radius: 12px;
    color: var(--muted); font-size: .84rem;
}
.board-cards.sortable-over, .board-cards:has(.board-card-ghost) { outline: 2px dashed color-mix(in srgb, var(--stage) 60%, transparent); outline-offset: 2px; border-radius: 12px; }
.board-card { border-left: 3px solid var(--stage); }
.board-card-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); font-size: .78rem; color: var(--muted); }
.board-more { display: block; text-align: center; font-size: .82rem; padding: 8px; margin-top: 6px; border-radius: 8px; text-decoration: none; }
.board-more:hover { background: var(--surface); }

/* Settings tables (stages, fields) and templates */
.settings-table thead th { font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-2) !important; }
.settings-table td { padding: 8px 10px; }
.settings-table .add-row td { background: var(--surface-2); border-top: 2px solid var(--border); }
.settings-table .form-control-color { width: 46px; }
.tpl-card summary { list-style: none; cursor: pointer; }
.tpl-card summary::-webkit-details-marker { display: none; }
.tpl-card[open] summary .btn { display: none; }
.tpl-icon { color: #25d366; font-size: 1.3rem; }
.tpl-preview { display: block; white-space: pre-line; }