/* ============================================================
   Varta CRM — Component Library
   Define once, use everywhere via {% include "components/ui/..." %}
   All values reference tokens from varta-tokens.css
   ============================================================ */

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; scroll-padding-top: var(--header-height); }

body {
    font-family: var(--font-body);
    background: var(--color-background);
    color: var(--color-on-surface);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: none; }

/* ================================================================
   BUTTONS — .vtr-btn
   Usage: class="vtr-btn vtr-btn--primary vtr-btn--md"
   ================================================================ */

.vtr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    font-family: var(--font-body);
    font-weight: 500;
    padding: 8px 16px;
    font-size: 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--transition-speed);
    line-height: 1;
    vertical-align: middle;
}
.vtr-btn:hover { text-decoration: none; }
.vtr-btn:active { transform: translateY(1px); }
.vtr-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.vtr-btn:disabled,
.vtr-btn[disabled] { opacity: 0.5; pointer-events: none; }

/* ── Sizes ── */
.vtr-btn--sm  { padding: 6px 12px;  font-size: 12px; }
.vtr-btn--md  { padding: 9px 16px;  font-size: 14px; }
.vtr-btn--lg  { padding: 11px 24px; font-size: 16px; }
.vtr-btn--icon { padding: 8px; border-radius: var(--radius-sm); }

/* ── Variants ── */
.vtr-btn--primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
}
.vtr-btn--primary:hover {
    filter: brightness(0.92);
    box-shadow: var(--shadow-sm);
}

.vtr-btn--secondary {
    background: var(--color-secondary);
    color: var(--color-on-secondary);
}
.vtr-btn--secondary:hover {
    filter: brightness(0.92);
    box-shadow: var(--shadow-sm);
}

.vtr-btn--outline {
    background: transparent;
    color: var(--color-on-surface);
    border-color: var(--color-outline-variant);
}
.vtr-btn--outline:hover {
    background: var(--color-surface-container);
    border-color: var(--color-outline);
}

.vtr-btn--ghost {
    background: transparent;
    color: var(--color-primary);
    border-color: transparent;
}
.vtr-btn--ghost:hover {
    background: var(--color-primary-container);
}

.vtr-btn--danger {
    background: var(--color-error);
    color: var(--color-on-error);
}
.vtr-btn--danger:hover {
    filter: brightness(0.92);
    box-shadow: var(--shadow-sm);
}

.vtr-btn--warning {
    background: var(--color-brand-ivr);
    color: #fff;
}
.vtr-btn--warning:hover {
    filter: brightness(0.92);
}

.vtr-btn--success {
    background: var(--color-secondary);
    color: var(--color-on-secondary);
}
.vtr-btn--success:hover {
    filter: brightness(0.92);
}

.vtr-btn--surface {
    background: var(--color-surface-container);
    color: var(--color-on-surface-variant);
    border-color: var(--color-outline-variant);
}
.vtr-btn--surface:hover {
    background: var(--color-surface-container-high);
    color: var(--color-on-surface);
}

/* Icon-only round button */
.vtr-btn--round {
    border-radius: var(--radius-full);
    padding: 8px;
}

/* Material symbol sizing inside buttons */
.vtr-btn .material-symbols-outlined { font-size: 18px; }
.vtr-btn--sm .material-symbols-outlined { font-size: 16px; }
.vtr-btn--lg .material-symbols-outlined { font-size: 20px; }

/* ================================================================
   BADGES — .vtr-badge
   Usage: class="vtr-badge vtr-badge--{{ status|lower }}"
   ================================================================ */

.vtr-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    line-height: 14px;
}

.vtr-badge--hot             { background: var(--badge-hot-bg);             color: var(--badge-hot-text); }
.vtr-badge--warm            { background: var(--badge-warm-bg);            color: var(--badge-warm-text); }
.vtr-badge--new             { background: var(--badge-new-bg);             color: var(--badge-new-text); }
.vtr-badge--contacted       { background: var(--badge-contacted-bg);       color: var(--badge-contacted-text); }
.vtr-badge--profile_created { background: var(--badge-profile-created-bg); color: var(--badge-profile-created-text); }
.vtr-badge--converted       { background: var(--badge-converted-bg);       color: var(--badge-converted-text); }
.vtr-badge--closed          { background: var(--badge-closed-bg);          color: var(--badge-closed-text); }
.vtr-badge--pending         { background: var(--badge-pending-bg);         color: var(--badge-pending-text); }
.vtr-badge--approved        { background: var(--badge-approved-bg);        color: var(--badge-approved-text); }
.vtr-badge--sent            { background: var(--badge-sent-bg);            color: var(--badge-sent-text); }
.vtr-badge--whatsapp        { background: var(--badge-whatsapp-bg);        color: var(--badge-whatsapp-text); }

/* ── Extended call/webhook/inquiry badge variants ── */
.vtr-badge--inbound     { background: var(--badge-inbound-bg);     color: var(--badge-inbound-text); }
.vtr-badge--outbound    { background: var(--badge-outbound-bg);    color: var(--badge-outbound-text); }
.vtr-badge--answered    { background: var(--badge-answered-bg);    color: var(--badge-answered-text); }
.vtr-badge--missed      { background: var(--badge-missed-bg);      color: var(--badge-missed-text); }
.vtr-badge--busy        { background: var(--badge-busy-bg);        color: var(--badge-busy-text); }
.vtr-badge--no_answer   { background: var(--badge-no-answer-bg);   color: var(--badge-no-answer-text); }
.vtr-badge--active      { background: var(--badge-active-bg);      color: var(--badge-active-text); }
.vtr-badge--duplicate   { background: var(--badge-duplicate-bg);   color: var(--badge-duplicate-text); }
.vtr-badge--failed      { background: var(--badge-failed-bg);      color: var(--badge-failed-text); }
.vtr-badge--rejected    { background: var(--badge-rejected-bg);    color: var(--badge-rejected-text); }
.vtr-badge--normalizing { background: var(--badge-normalizing-bg); color: var(--badge-normalizing-text); }
.vtr-badge--normalized  { background: var(--badge-normalized-bg);  color: var(--badge-normalized-text); }

/* ── Real estate — property unit statuses (Dynamic global re-usable styles) ── */
.vtr-badge--available   { background: var(--color-icon-green-bg);  color: var(--color-icon-green-fg); }
.vtr-badge--reserved    { background: var(--color-icon-yellow-bg); color: var(--color-icon-yellow-fg); }
.vtr-badge--sold        { background: var(--color-surface-container-high); color: var(--color-on-surface-variant); }
.vtr-badge--on_hold     { background: var(--color-icon-amber-bg);  color: var(--color-icon-amber-fg); }

/* ── Real estate — site visit statuses ── */
.vtr-badge--scheduled   { background: var(--color-icon-blue-bg);   color: var(--color-icon-blue-fg); }
.vtr-badge--confirmed   { background: var(--color-icon-green-bg);  color: var(--color-icon-green-fg); }
.vtr-badge--completed   { background: var(--color-icon-purple-bg); color: var(--color-icon-purple-fg); }
.vtr-badge--no_show     { background: var(--color-icon-red-bg);    color: var(--color-icon-red-fg); }

/* ── Real estate — booking statuses ── */
.vtr-badge--booked      { background: var(--color-icon-blue-bg);   color: var(--color-icon-blue-fg); }
.vtr-badge--registered  { background: var(--color-icon-purple-bg); color: var(--color-icon-purple-fg); }
.vtr-badge--cancelled   { background: var(--color-icon-red-bg);    color: var(--color-icon-red-fg); }

/* ── Real estate — channel partner / commission statuses ── */
.vtr-badge--inactive    { background: var(--color-surface-container-high); color: var(--color-on-surface-variant); }
.vtr-badge--blacklisted { background: var(--color-icon-red-bg);    color: var(--color-icon-red-fg); }
.vtr-badge--paid        { background: var(--color-icon-green-bg);  color: var(--color-icon-green-fg); }

/* ================================================================
   ICON CHIP — .vtr-icon-chip
   Circular coloured container for icons in stat cards / dashboard.
   Usage: class="vtr-icon-chip vtr-icon-chip--indigo"
   ================================================================ */

.vtr-icon-chip {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.vtr-icon-chip--sm { width: 32px; height: 32px; font-size: 15px; }
.vtr-icon-chip--lg { width: 48px; height: 48px; font-size: 22px; }

.vtr-icon-chip--indigo { background: var(--color-icon-indigo-bg); color: var(--color-icon-indigo-fg); }
.vtr-icon-chip--green  { background: var(--color-icon-green-bg);  color: var(--color-icon-green-fg);  }
.vtr-icon-chip--blue   { background: var(--color-icon-blue-bg);   color: var(--color-icon-blue-fg);   }
.vtr-icon-chip--teal   { background: var(--color-icon-teal-bg);   color: var(--color-icon-teal-fg);   }
.vtr-icon-chip--amber  { background: var(--color-icon-amber-bg);  color: var(--color-icon-amber-fg);  }
.vtr-icon-chip--red    { background: var(--color-icon-red-bg);    color: var(--color-icon-red-fg);    }
.vtr-icon-chip--purple { background: var(--color-icon-purple-bg); color: var(--color-icon-purple-fg); }
.vtr-icon-chip--orange { background: var(--color-icon-orange-bg); color: var(--color-icon-orange-fg); }
.vtr-icon-chip--pink   { background: var(--color-icon-pink-bg);   color: var(--color-icon-pink-fg);   }
.vtr-icon-chip--yellow { background: var(--color-icon-yellow-bg); color: var(--color-icon-yellow-fg); }
.vtr-icon-chip--cyan   { background: var(--color-icon-cyan-bg);   color: var(--color-icon-cyan-fg);   }
.vtr-icon-chip--whatsapp { background: #dcfce7; color: var(--color-brand-whatsapp); }
.vtr-icon-chip--meta     { background: #dbeafe; color: var(--color-brand-meta); }
.vtr-icon-chip--ivr      { background: var(--color-icon-amber-bg); color: var(--color-brand-ivr); }

/* ================================================================
   STAT CARD — .vtr-stat-card
   Usage: {% include "components/cards/stat_card.html" %}
   ================================================================ */

.vtr-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.vtr-stat-card {
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-speed);
}
.vtr-stat-card:hover { box-shadow: var(--shadow-sm); }

.vtr-stat-card__top {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.vtr-stat-card__label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-on-surface-variant);
}

.vtr-stat-card__value {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-on-surface);
    letter-spacing: -0.02em;
    line-height: 1;
}

.vtr-stat-card__footer {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--color-on-surface-variant);
}

/* ================================================================
   TREND BADGE — .vtr-trend-badge
   Usage: class="vtr-trend-badge vtr-trend-badge--up"
   ================================================================ */

.vtr-trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
}
.vtr-trend-badge--up      { background: var(--color-icon-green-bg);  color: var(--color-icon-green-fg); }
.vtr-trend-badge--down    { background: var(--color-icon-red-bg);    color: var(--color-icon-red-fg); }
.vtr-trend-badge--neutral { background: var(--color-surface-container-high); color: var(--color-on-surface-variant); }

/* ================================================================
   CHART CARD — .vtr-chart-card
   ================================================================ */

.vtr-chart-card {
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.vtr-chart-card__header {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-outline-variant);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.vtr-chart-card__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
}

.vtr-chart-card__subtitle {
    font-size: var(--font-size-xs);
    color: var(--color-on-surface-variant);
    margin: 2px 0 0;
}

.vtr-chart-card__body {
    padding: var(--space-md) var(--space-lg);
    position: relative;
}

/* ================================================================
   TYPOGRAPHY UTILITIES — .vtr-text-*
   Replace inline font-size + color combos scattered in templates
   ================================================================ */

.vtr-text-xs      { font-size: var(--font-size-xs); }
.vtr-text-sm      { font-size: var(--font-size-sm); }
.vtr-text-base    { font-size: var(--font-size-base); }
.vtr-text-md      { font-size: var(--font-size-md); }
.vtr-text-lg      { font-size: var(--font-size-lg); }
.vtr-text-muted   { color: var(--color-on-surface-variant); }
.vtr-text-xs-muted { font-size: var(--font-size-xs);  color: var(--color-on-surface-variant); }
.vtr-text-sm-muted { font-size: var(--font-size-sm);  color: var(--color-on-surface-variant); }
.vtr-truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vtr-flex-min      { flex: 1; min-width: 0; }

/* ================================================================
   PROGRESS BAR — .vtr-progress-bar
   Used in WhatsApp / Meta wizard step indicators
   ================================================================ */

.vtr-progress-bar {
    height: 5px;
    border-radius: var(--radius-full);
    background: var(--color-surface-container-high);
    overflow: hidden;
}
.vtr-progress-bar__fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    transition: width 0.4s ease;
}

/* ================================================================
   NETWORK STATUS BANNER — injected by network-status.js
   ID + class names must match what the JS creates.
   ================================================================ */

#crm-network-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    background: #1e293b;
    color: #f8fafc;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 24px rgba(0,0,0,.35);
    font-family: var(--font-body), system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: opacity .25s, transform .25s;
}
#crm-network-banner.crm-net-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(12px);
}
.crm-net-icon  { font-size: 16px; color: #fbbf24; }
.crm-net-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    padding: 0 0 0 8px;
    line-height: 1;
}
.crm-net-close:hover { color: #f8fafc; }

/* ================================================================
   AUDIO PLAYER — .vtr-audio-player
   Compact audio element for call recordings
   ================================================================ */

.vtr-audio-player {
    height: 32px;
    max-width: 180px;
    width: 100%;
    border-radius: var(--radius-sm);
    vertical-align: middle;
}

/* ================================================================
   AVATAR — .vtr-avatar
   Usage: class="vtr-avatar vtr-avatar--sm"
   ================================================================ */

.vtr-avatar {
    border-radius: var(--radius-full);
    background: var(--color-primary-fixed);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.vtr-avatar img { width: 100%; height: 100%; object-fit: cover; }

.vtr-avatar--xs  { width: 24px; height: 24px; font-size: 9px; }
.vtr-avatar--sm  { width: 32px; height: 32px; font-size: 11px; }
.vtr-avatar--md  { width: 40px; height: 40px; font-size: 14px; }
.vtr-avatar--lg  { width: 48px; height: 48px; font-size: 16px; }
.vtr-avatar--xl  { width: 64px; height: 64px; font-size: 20px; }

/* Square (non-circle) variant for list views */
.vtr-avatar--square    { border-radius: var(--radius-sm); }
.vtr-avatar--sm-square { width: 32px; height: 32px; font-size: 11px; border-radius: var(--radius-sm); }

/* ================================================================
   TABLE — .vtr-table
   ================================================================ */

.vtr-table-wrap {
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    overflow: clip; /* clip instead of hidden — doesn't create a scroll container, so sticky thead still works */
    background: var(--color-surface-container-lowest);
    box-shadow: var(--shadow-sm);
}

.vtr-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.vtr-table thead {
    background: var(--color-surface-container-low);
    border-bottom: 1px solid var(--color-outline-variant);
}

.vtr-table th {
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    position: sticky;
    top: calc(var(--header-height) + 64px); /* navbar (64px) + sticky card-header (64px) */
    z-index: 5;
    background: var(--color-surface-container-low);
    border-bottom: 1px solid var(--color-outline-variant);
}

.vtr-table td {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--color-on-surface);
    border-bottom: 1px solid var(--color-outline-variant);
    vertical-align: middle;
}

.vtr-table tbody tr:last-child td { border-bottom: none; }

.vtr-table tbody tr:hover { background: var(--color-surface-container-low); }

/* Sortable column header */
.vtr-th-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-on-surface-variant);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color var(--transition-speed);
}
.vtr-th-sort:hover { color: var(--color-on-surface); text-decoration: none; }
.vtr-th-sort.active { color: var(--color-primary); }
.vtr-th-sort .material-symbols-outlined { font-size: 14px; }

/* Action dropdown button in table rows */
.vtr-row-action-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-outline);
    transition: all var(--transition-speed);
}
.vtr-row-action-btn:hover {
    background: var(--color-surface-container);
    color: var(--color-primary);
}

/* ================================================================
   DROPDOWN MENUS — .vtr-dropdown
   ================================================================ */

.vtr-dropdown { position: relative; display: inline-block; }

.vtr-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 190px;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    padding: 6px 0;
    display: none;
    animation: vtr-dropdown-in 0.15s ease-out;
}
@keyframes vtr-dropdown-in {
    from { transform: translateY(4px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.vtr-dropdown.show .vtr-dropdown-menu { display: block; }

.vtr-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 9px 16px;
    font-size: 14px;
    color: var(--color-on-surface);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    text-decoration: none;
    transition: all var(--transition-speed);
    white-space: nowrap;
}
.vtr-dropdown-item:hover { background: var(--color-surface-container); text-decoration: none; }
.vtr-dropdown-item.danger { color: var(--color-error); }
.vtr-dropdown-item .material-symbols-outlined { font-size: 18px; color: var(--color-on-surface-variant); }
.vtr-dropdown-item:hover .material-symbols-outlined { color: inherit; }

.vtr-dropdown-divider {
    height: 1px;
    background: var(--color-outline-variant);
    margin: 6px 0;
}

/* ================================================================
   MODAL — .crm-modal-overlay / .crm-modal
   (Class names kept for JS compatibility)
   ================================================================ */

.crm-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.crm-modal-overlay.active { display: flex; }

.crm-modal {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 520px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    border: 1px solid var(--color-outline-variant);
    animation: vtr-modal-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes vtr-modal-in {
    from { transform: translateY(12px) scale(0.985); opacity: 0; }
    to   { transform: translateY(0) scale(1);       opacity: 1; }
}

.crm-modal-header {
    padding: var(--space-md) var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    border-bottom: 1px solid var(--color-outline-variant);
}

.crm-modal-header .modal-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.crm-modal-header .modal-icon .material-symbols-outlined { font-size: 22px; }

.modal-icon.danger   { background: var(--color-error-container);     color: var(--color-error); }
.modal-icon.warning  { background: var(--color-icon-amber-bg);       color: var(--color-icon-amber-fg); }
.modal-icon.success  { background: var(--color-secondary-container); color: var(--color-secondary); }
.modal-icon.primary  { background: var(--color-primary-fixed);       color: var(--color-primary); }
.modal-icon.secondary{ background: var(--color-surface-container);   color: var(--color-on-surface-variant); }
.modal-icon.info     { background: var(--color-primary-fixed);       color: var(--color-primary); }

.crm-modal-header h5 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--color-on-surface);
    letter-spacing: -0.01em;
}

.crm-modal-body {
    padding: var(--space-lg);
    font-size: 14px;
    color: var(--color-on-surface-variant);
    line-height: 1.6;
    max-height: 75vh;
    overflow-y: auto;
}

.crm-modal-footer {
    padding: var(--space-md) var(--space-lg);
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    background: var(--color-surface-container-low);
    border-top: 1px solid var(--color-outline-variant);
}

/* Modal button aliases mapping to vtr-btn system */
.btn { /* generic base for modal footers */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-speed);
    text-decoration: none;
    white-space: nowrap;
}
.btn-modal-cancel {
    background: var(--color-surface);
    color: var(--color-on-surface-variant);
    border-color: var(--color-outline-variant);
}
.btn-modal-cancel:hover {
    background: var(--color-surface-container);
    color: var(--color-on-surface);
}
.btn-modal-danger   { background: var(--color-error);     color: #fff; }
.btn-modal-danger:hover  { filter: brightness(0.92); box-shadow: var(--shadow-sm); }
.btn-modal-warning  { background: var(--color-brand-ivr); color: #fff; }
.btn-modal-warning:hover { filter: brightness(0.92); }
.btn-modal-success  { background: var(--color-secondary); color: #fff; }
.btn-modal-success:hover { filter: brightness(0.92); }
.btn-modal-primary  { background: var(--color-primary);   color: #fff; }
.btn-modal-primary:hover { filter: brightness(0.92); box-shadow: var(--shadow-sm); }
.btn-modal-info     { background: var(--color-icon-blue-fg); color: #fff; }
.btn-modal-info:hover { filter: brightness(0.92); }

/* Modal size modifiers */
.crm-modal--sm  { max-width: 380px; }
#formModal .crm-modal { max-width: 800px; }

/* ================================================================
   FORM ELEMENTS
   ================================================================ */

.vtr-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
    margin-bottom: var(--space-xs);
}

.vtr-input,
.vtr-select {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-on-surface);
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-sm);
    outline: none;
    transition: all var(--transition-speed);
    appearance: none;
}
.vtr-input:focus,
.vtr-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.vtr-input::placeholder { color: var(--color-outline); }

/* Form select arrow */
.vtr-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* Form group + field error */
.vtr-form-group {
    margin-bottom: 16px;
}
.vtr-form-group:last-child {
    margin-bottom: 0;
}
.vtr-field-error {
    margin: 4px 0 0;
    font-size: 0.75rem;
    color: var(--color-error);
}

/* Search input */
.vtr-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.vtr-search-wrap .material-symbols-outlined {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    line-height: 1;
    color: var(--color-outline);
    pointer-events: none;
}
/* Scoped under .vtr-search-wrap for higher specificity — overrides Tailwind forms plugin reset */
.vtr-search-wrap .vtr-search-input,
.vtr-search-input {
    width: 100%;
    padding: 10px 16px 10px 42px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-on-surface);
    background: var(--color-surface-container-low);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-full);
    outline: none;
    transition: all var(--transition-speed);
}
.vtr-search-wrap .vtr-search-input:focus,
.vtr-search-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
    background: var(--color-surface);
}
.vtr-search-wrap .vtr-search-input::placeholder,
.vtr-search-input::placeholder { color: var(--color-outline); }

/* ── Global Search Dropdown ──────────────────────────────────── */
.gsr-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    overflow: hidden;
    display: none;
}
.gsr-dropdown.is-open { display: block; }

.gsr-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
    border-top: 1px solid var(--color-outline-variant);
}
.gsr-section-label:first-child { border-top: none; }
.gsr-section-label .material-symbols-outlined { font-size: 14px; }

.gsr-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    text-decoration: none;
    color: var(--color-on-surface);
    transition: background var(--transition-speed);
    cursor: pointer;
}
.gsr-item:hover,
.gsr-item.is-focused {
    background: var(--color-surface-container-low);
    text-decoration: none;
}
.gsr-item__icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-primary-fixed);
}
.gsr-item__icon .material-symbols-outlined { font-size: 15px; color: var(--color-primary); }

.gsr-item__body { flex: 1; min-width: 0; }
.gsr-item__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gsr-item__meta {
    font-size: 11px;
    color: var(--color-on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gsr-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    background: var(--color-secondary-container);
    color: var(--color-on-secondary-container);
    flex-shrink: 0;
}
.gsr-empty {
    padding: 20px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--color-on-surface-variant);
}
.gsr-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    gap: 8px;
    font-size: 13px;
    color: var(--color-on-surface-variant);
}
.gsr-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    border-top: 1px solid var(--color-outline-variant);
    transition: background var(--transition-speed);
}
.gsr-view-all:hover { background: var(--color-primary-fixed); text-decoration: none; }
.gsr-view-all .material-symbols-outlined { font-size: 14px; }

/* Checkbox */
.vtr-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
    border-radius: 3px;
}

/* ================================================================
   CARDS — .vtr-card
   ================================================================ */

.vtr-card {
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    overflow: visible;
}

.vtr-card-header {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-outline-variant);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    min-height: 64px;
    background: var(--color-surface-container-lowest);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.vtr-card-body { padding: var(--space-md) var(--space-lg); }

/* ================================================================
   PAGE HEADER — .vtr-page-header
   ================================================================ */

.vtr-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}

.vtr-page-header__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 32px;
}

.vtr-page-header__subtitle {
    font-size: 14px;
    color: var(--color-outline);
    margin: 2px 0 0;
}

.vtr-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* ================================================================
   FILTER BAR — .vtr-filter-bar
   ================================================================ */

.vtr-filter-bar {
    display: none;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-surface-container-low);
    border-top: 1px solid var(--color-outline-variant);
    flex-wrap: wrap;
    align-items: flex-end;
}
.vtr-filter-bar.show { display: flex; }

.vtr-filter-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
    flex: 1;
}

.vtr-filter-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-outline);
}

/* Filter results info bar */
.vtr-filter-results {
    padding: 8px var(--space-lg);
    font-size: 13px;
    color: var(--color-on-surface-variant);
    background: var(--color-surface-container-low);
    border-top: 1px solid var(--color-outline-variant);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.vtr-filter-results .material-symbols-outlined { font-size: 16px; color: var(--color-primary); }

/* ================================================================
   PAGINATION — .vtr-pagination
   ================================================================ */

.vtr-pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-outline-variant);
    background: var(--color-surface-container-low);
    font-size: 13px;
    color: var(--color-on-surface-variant);
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.vtr-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vtr-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-on-surface-variant);
    text-decoration: none;
    border: 1px solid transparent;
    transition: all var(--transition-speed);
}
.vtr-page-link:hover { background: var(--color-surface-container); color: var(--color-on-surface); text-decoration: none; }
.vtr-page-link.active {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
    font-weight: 700;
}
.vtr-page-link.disabled { opacity: 0.4; pointer-events: none; }
.vtr-page-link.dots { border: none; cursor: default; }
.vtr-page-link.dots:hover { background: transparent; color: var(--color-on-surface-variant); }

/* ================================================================
   EMPTY STATE — .vtr-empty-state
   ================================================================ */

.vtr-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
    color: var(--color-on-surface-variant);
    min-height: 220px;
}

.vtr-empty-state__icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: var(--color-surface-container-low);
    border: 1px solid var(--color-outline-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.vtr-empty-state__icon-wrap .material-symbols-outlined {
    font-size: 30px;
    color: var(--color-outline);
}

.vtr-empty-state__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-on-surface);
    margin: 0 0 var(--space-xs);
}

.vtr-empty-state__subtitle {
    font-size: 13px;
    color: var(--color-on-surface-variant);
    margin: 0 0 var(--space-md);
    max-width: 360px;
}

/* ================================================================
   SPINNER — .vtr-spinner
   ================================================================ */

.vtr-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-outline-variant);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: vtr-spin 0.8s linear infinite;
    display: inline-block;
}
.vtr-spinner--sm { width: 18px; height: 18px; border-width: 2px; }
.vtr-spinner--lg { width: 48px; height: 48px; border-width: 4px; }

@keyframes vtr-spin { to { transform: rotate(360deg); } }

/* ================================================================
   PAGE LOADER OVERLAY — #page-loader
   Full-screen backdrop shown during form submissions / navigation.
   ================================================================ */

#page-loader {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(250, 248, 255, 0.82);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

[data-theme="dark"] #page-loader {
    background: rgba(25, 27, 35, 0.84);
}

#page-loader.active {
    opacity: 1;
    pointer-events: all;
}

/* ================================================================
   ALERT BANNER — .vtr-alert
   ================================================================ */

.vtr-alert {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: 14px;
    border: 1px solid transparent;
}
.vtr-alert .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }

.vtr-alert--info    { background: var(--color-primary-fixed);    color: var(--color-on-primary-fixed);    border-color: var(--color-primary-fixed-dim); }
.vtr-alert--success { background: var(--color-secondary-container); color: var(--color-on-secondary-container); }
.vtr-alert--warning { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.vtr-alert--error   { background: var(--color-error-container);  color: var(--color-on-error-container);  border-color: #fca5a5; }

/* ================================================================
   NAV STAT BADGE (Navbar metric pill)
   ================================================================ */

.vtr-nav-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--color-primary-fixed);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.vtr-nav-stat .material-symbols-outlined { font-size: 16px; }

/* Notification dot */
.vtr-notif-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: var(--color-error);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-surface);
}

/* ================================================================
   IMPORT SNACKBAR
   ================================================================ */

.vtr-snackbar {
    position: fixed;
    top: calc(var(--header-height) + 16px);
    right: 24px;
    width: 320px;
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-toast);
    padding: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    transform: translateX(130%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                opacity 0.4s ease;
    pointer-events: none;
}
.vtr-snackbar.active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.vtr-snackbar__progress { position: relative; width: 48px; height: 48px; flex-shrink: 0; }
.vtr-snackbar__progress svg { transform: rotate(-90deg); display: block; }
.vtr-snackbar__progress .bg   { fill: none; stroke: var(--color-surface-container-high); stroke-width: 4; }
.vtr-snackbar__progress .meter {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 4;
    stroke-dasharray: 125.6;
    stroke-dashoffset: 125.6;
    transition: stroke-dashoffset 0.8s ease-out;
    stroke-linecap: round;
}
.vtr-snackbar__pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--color-on-surface);
}
.vtr-snackbar__body { flex: 1; min-width: 0; }
.vtr-snackbar__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vtr-snackbar__step {
    font-size: 11px;
    color: var(--color-on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vtr-snackbar__close {
    background: none;
    border: none;
    color: var(--color-outline);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    transition: color var(--transition-speed);
}
.vtr-snackbar__close:hover { color: var(--color-on-surface); background: var(--color-surface-container); }
.vtr-snackbar__close .material-symbols-outlined { font-size: 18px; }

/* ================================================================
   COMPATIBILITY LAYER
   Maps old Bootstrap / theme.css class names → new vtr system
   so templates not yet migrated keep working visually.
   Remove each alias once the corresponding template is migrated.

   DEPRECATED — Do NOT use Bootstrap class names in new templates.
   New code convention:
     Buttons  → .vtr-btn .vtr-btn--primary  (not .btn-primary)
     Badges   → .crm-badge .badge-TYPE       (not inline style=)
     Text     → .vtr-text-sm-muted           (not style="font-size:0.8rem;color:...")
     Icons    → .vtr-icon-chip .vtr-icon-chip--COLOR (not style="background:#e0e7ff;")
     Tables   → .classic-card / .classic-table (kept; migrate to .vtr-list-* over time)
   ================================================================ */

/* Layout wrappers */
.row   { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.col-12 { width: 100%; }
.g-2 { gap: 0.5rem; }
.g-3 { gap: 1rem; }

/* Bootstrap-style btn base kept as alias */
.btn-primary   { background: var(--color-primary);   color: var(--color-on-primary);   border: none; }
.btn-secondary { background: var(--color-secondary); color: var(--color-on-secondary); border: none; }
.btn-success   { background: var(--color-secondary); color: var(--color-on-secondary); border: none; }
.btn-danger    { background: var(--color-error);     color: var(--color-on-error);     border: none; }
.btn-outline-secondary { background: transparent; border: 1px solid var(--color-outline); color: var(--color-on-surface-variant); }
.btn-outline-primary   { background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); }
.btn-outline-warning   { background: transparent; border: 1px solid #f59e0b; color: #b45309; }
.btn-warning   { background: #f59e0b; color: #fff; border: none; }
.btn-sm  { padding: 5px 12px; font-size: 12px; }
.btn-lg  { padding: 11px 24px; font-size: 16px; }

/* Classic card aliases */
.classic-card    { background: var(--color-surface-container-lowest); border: 1px solid var(--color-outline-variant); border-radius: var(--radius-md); overflow: visible; margin-bottom: var(--space-lg); display: flex; flex-direction: column; min-height: calc(100vh - var(--header-height) - 2 * var(--space-md)); }
.classic-header  { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-outline-variant); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; min-height: 64px; position: sticky; top: var(--header-height); z-index: 6; background: var(--color-surface-container-lowest); }
.classic-header h2, .classic-header h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--color-on-surface); }
.classic-body    { padding: 0; flex: 1; display: flex; flex-direction: column; }
.classic-body .table-responsive { flex: 0 0 auto; }

/* Table empty state — rendered as a flex sibling to table-responsive inside .classic-body */
.table-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 2rem;
    min-height: 240px;
}
.table-empty-state .empty-icon { font-size: 2.5rem; opacity: 0.2; color: var(--color-outline); }
.table-empty-state .empty-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-on-surface); opacity: 0.45; }
.table-empty-state .empty-subtitle { margin: 0; font-size: 13px; color: var(--color-outline); text-align: center; max-width: 340px; }

/* Table aliases */
.classic-table { width: 100%; border-collapse: collapse; }
.classic-table thead { position: static; }
.classic-table th { padding: var(--space-sm) var(--space-md); font-size: 12px; font-weight: 600; color: var(--color-outline); text-transform: uppercase; letter-spacing: 0.05em; background: var(--color-surface-container-low); border-bottom: 1px solid var(--color-outline-variant); position: sticky; top: calc(var(--header-height) + 64px); z-index: 5; }
.classic-table td { padding: var(--space-sm) var(--space-md); font-size: 14px; border-bottom: 1px solid var(--color-outline-variant); vertical-align: middle; }
.classic-table tbody tr:hover { background: var(--color-surface-container-low); }

/* Misc Bootstrap utilities */
.d-flex   { display: flex; }
.d-none   { display: none; }
.d-block  { display: block; }
.d-inline-flex { display: inline-flex; }
.align-items-center  { align-items: center; }
.align-items-start   { align-items: flex-start; }
.align-items-end     { align-items: flex-end; }
.justify-content-end    { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.flex-wrap    { flex-wrap: wrap; }
.flex-column  { flex-direction: column; }
.flex-grow-1  { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 16px; } .gap-4 { gap: 24px; }
.ms-1 { margin-left: 4px; }  .ms-2 { margin-left: 8px; }  .ms-3 { margin-left: 16px; }  .ms-auto { margin-left: auto; }
.me-1 { margin-right: 4px; } .me-2 { margin-right: 8px; } .me-3 { margin-right: 16px; }
.mt-1 { margin-top: 4px; }   .mt-2 { margin-top: 8px; }   .mt-3 { margin-top: 16px; }  .mt-4 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }  .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; }
.p-3  { padding: 16px; }     .p-4  { padding: 24px; }     .p-5  { padding: 32px; }
.px-2 { padding-left: 8px;  padding-right: 8px; }  .px-3 { padding-left: 16px; padding-right: 16px; } .px-4 { padding-left: 24px; padding-right: 24px; }
.py-1 { padding-top: 4px;   padding-bottom: 4px; }  .py-2 { padding-top: 8px;   padding-bottom: 8px; }  .py-3 { padding-top: 16px;  padding-bottom: 16px; }
.py-5 { padding-top: 32px;  padding-bottom: 32px; }
.pe-4 { padding-right: 24px; } .ps-3 { padding-left: 16px; }
.text-center { text-align: center; } .text-end { text-align: right; } .text-start { text-align: left; }
.text-muted   { color: var(--color-on-surface-variant); }
.text-primary { color: var(--color-primary); }
.text-danger  { color: var(--color-error); }
.text-error   { color: var(--color-error); }
.text-success { color: var(--color-secondary); }
.text-warning { color: #b45309; }
.text-info    { color: #0284c7; }
.text-white   { color: #ffffff !important; }
.text-dark    { color: var(--color-on-surface) !important; }
.fw-bold      { font-weight: 700; } .fw-semibold { font-weight: 600; } .fw-medium { font-weight: 500; }
.small, .fs-6 { font-size: 12px; }
.opacity-25   { opacity: 0.25; } .opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; }
.w-50 { width: 50%; } .w-100 { width: 100%; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.border         { border: 1px solid var(--color-outline-variant); }
.border-bottom  { border-bottom: 1px solid var(--color-outline-variant); }
.border-top     { border-top: 1px solid var(--color-outline-variant); }
.rounded { border-radius: var(--radius-sm); } .rounded-circle { border-radius: var(--radius-full); }
.overflow-hidden { overflow: hidden; }
/* Background color helpers */
.bg-light     { background-color: var(--color-surface-container-low) !important; }
.bg-success   { background-color: var(--color-secondary) !important;             color: #fff; }
.bg-danger    { background-color: var(--color-error) !important;                 color: #fff; }
.bg-warning   { background-color: #fef3c7 !important; }
.bg-secondary { background-color: var(--color-surface-container-high) !important; }

/* Table-responsive responsive handling and scrollbar styling */
.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: var(--color-outline-variant) transparent;
}
.table-responsive::-webkit-scrollbar {
    height: 6px;
}
.table-responsive::-webkit-scrollbar-track {
    background: transparent;
}
.table-responsive::-webkit-scrollbar-thumb {
    background: var(--color-outline-variant);
    border-radius: var(--radius-full);
}
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--color-outline);
}

@media (min-width: 769px) {
    .table-responsive {
        overflow: visible !important;
    }
}
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto !important;
    }
    /* Reset sticky header positioning on mobile/tablet to avoid broken overlapping layouts */
    .vtr-table th,
    .classic-table th {
        position: static !important;
    }
}

/* Form aliases */
.form-control, .form-select {
    width: 100%; padding: 8px var(--space-sm); font-family: var(--font-body); font-size: 14px;
    color: var(--color-on-surface); background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant); border-radius: var(--radius-sm); outline: none;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0,61,155,.12);
}
.form-label { font-size: 12px; font-weight: 600; color: var(--color-on-surface-variant); margin-bottom: 4px; display: block; }
.form-check-input { accent-color: var(--color-primary); cursor: pointer; }

/* Dropdown aliases */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
    display: none; position: absolute; right: 0; top: calc(100% + 4px);
    min-width: 180px; background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md); z-index: var(--z-dropdown); padding: 4px 0;
}
.dropdown.show .dropdown-menu { display: block; }
.dropdown-item {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 8px var(--space-md); font-size: 14px; color: var(--color-on-surface);
    cursor: pointer; border: none; background: none; width: 100%;
    text-align: left; text-decoration: none; transition: background var(--transition-speed);
    white-space: nowrap;
}
.dropdown-item:hover { background: var(--color-surface-container-low); text-decoration: none; }
.dropdown-item.text-danger { color: var(--color-error); }
.dropdown-divider { height: 1px; background: var(--color-outline-variant); margin: 4px 0; }
.dropdown-menu-end { right: 0; left: auto; }

/* Badge aliases */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; }
.bg-warning { background: #fef3c7 !important; } .text-dark { color: var(--color-on-surface) !important; }

/* Old CRM badge aliases */
.crm-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.badge-lead-new             { background: var(--badge-new-bg);             color: var(--badge-new-text); }
.badge-lead-contacted       { background: var(--badge-contacted-bg);       color: var(--badge-contacted-text); }
.badge-lead-profile-created { background: var(--badge-profile-created-bg); color: var(--badge-profile-created-text); }
.badge-lead-converted       { background: var(--badge-converted-bg);       color: var(--badge-converted-text); }
.badge-lead-closed          { background: var(--badge-closed-bg);          color: var(--badge-closed-text); }
.badge-success              { background: var(--badge-converted-bg);       color: var(--badge-converted-text); }
.badge-warning              { background: #fef3c7;                         color: #92400e; }
.badge-secondary            { background: var(--color-surface-container-high); color: var(--color-on-surface-variant); }
.badge-info                 { background: var(--color-primary-fixed);      color: var(--color-on-primary-fixed); }
.badge-danger               { background: #fee2e2;                         color: #991b1b; }

/* Call log — call type badges */
.badge-call-inbound  { background: var(--badge-inbound-bg);  color: var(--badge-inbound-text); }
.badge-call-outbound { background: var(--badge-outbound-bg); color: var(--badge-outbound-text); }

/* Call log — disposition badges */
.badge-disposition-answered  { background: var(--badge-answered-bg);   color: var(--badge-answered-text); }
.badge-disposition-missed    { background: var(--badge-missed-bg);      color: var(--badge-missed-text); }
.badge-disposition-busy      { background: var(--badge-busy-bg);        color: var(--badge-busy-text); }
.badge-disposition-no-answer { background: var(--badge-no-answer-bg);   color: var(--badge-no-answer-text); }
.badge-disposition-active    { background: var(--badge-active-bg);      color: var(--badge-active-text); }
.badge-disposition-rejected  { background: var(--badge-missed-bg);      color: var(--badge-missed-text); }

/* Webhook event — source badges */
.badge-source-meta     { background: var(--badge-source-meta-bg);  color: var(--badge-source-meta-text); }
.badge-source-whatsapp { background: var(--badge-source-wa-bg);    color: var(--badge-source-wa-text); }
.badge-source-ivr      { background: var(--badge-source-ivr-bg);   color: var(--badge-source-ivr-text); }

/* Inquiry / webhook status badges */
.badge-status-pending     { background: var(--badge-pending-bg);      color: var(--badge-pending-text); }
.badge-status-normalizing { background: var(--badge-normalizing-bg);  color: var(--badge-normalizing-text); }
.badge-status-normalized  { background: var(--badge-normalized-bg);   color: var(--badge-normalized-text); }
.badge-status-duplicate   { background: var(--badge-duplicate-bg);    color: var(--badge-duplicate-text); }
.badge-status-failed      { background: var(--badge-failed-bg);       color: var(--badge-failed-text); }
.badge-status-rejected    { background: var(--badge-rejected-bg);     color: var(--badge-rejected-text); }

/* User status badges */
.badge-user-active   { background: var(--badge-normalized-bg);  color: var(--badge-normalized-text); }
.badge-user-inactive { background: var(--badge-missed-bg);       color: var(--badge-missed-text); }

/* Follow-up status badges */
.badge-followup-pending       { background: var(--badge-pending-bg);   color: var(--badge-pending-text); }
.badge-followup-today         { background: var(--color-primary-fixed); color: var(--color-primary); }
.badge-followup-today-active  { background: var(--color-primary);       color: var(--color-on-primary); }
.badge-followup-overdue-active { background: var(--badge-missed-bg);    color: var(--badge-missed-text); }

/* Interaction type badges */
.badge-type-call    { background: var(--badge-contacted-bg); color: var(--badge-contacted-text); }
.badge-type-message { background: var(--badge-new-bg);       color: var(--badge-new-text); }
.badge-type-note    { background: var(--badge-warm-bg);      color: var(--badge-warm-text); }

/* Link alias */
.crm-link { color: var(--color-primary); text-decoration: none; font-weight: 600; }
.crm-link:hover { text-decoration: none; }

/* Sort link alias */
.sort-link { display: inline-flex; align-items: center; gap: 4px; color: var(--color-outline); text-decoration: none; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.sort-link:hover { color: var(--color-on-surface); text-decoration: none; }
.sort-link.active { color: var(--color-primary); }
.sort-icon { font-size: 11px; }

/* Header search + actions aliases */
.header-search-form { flex: 1; max-width: 400px; }
.header-search-form .input-group { display: flex; align-items: center; background: var(--color-surface-container-low); border: 1px solid var(--color-outline-variant); border-radius: var(--radius-full); padding: 0 var(--space-sm); overflow: hidden; }
.header-search-form .input-group-text { background: transparent; border: none; color: var(--color-outline); padding: 0 4px; }
.header-search-form .form-control { background: transparent; border: none; padding: 6px 8px; border-radius: 0; }
.header-search-form .form-control:focus { box-shadow: none; }
.header-actions { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

/* Filter aliases */
.filter-dropdown { display: none; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--color-surface-container-low); border-top: 1px solid var(--color-outline-variant); flex-wrap: wrap; align-items: flex-end; }
.filter-dropdown.show { display: flex; }
.filter-col { display: flex; flex-direction: column; gap: 4px; min-width: 160px; flex: 1; }
.filter-label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-outline); }
.filter-results-info { font-size: 13px; color: var(--color-on-surface-variant); }
.btn-filter-toggle { background: transparent; border: 1px solid var(--color-outline-variant); color: var(--color-on-surface-variant); }
.btn-filter-toggle.active { background: var(--color-primary-fixed); border-color: var(--color-primary); color: var(--color-primary); }
.btn-table-action { background: transparent; border: 1px solid transparent; color: var(--color-outline); }
.btn-table-action:hover { background: var(--color-surface-container); border-color: var(--color-outline-variant); color: var(--color-primary); }

/* Pagination aliases */
.pagination-wrapper { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-outline-variant); background: var(--color-surface-container-low); flex-wrap: wrap; gap: var(--space-sm); }
.page-info { font-size: 13px; color: var(--color-on-surface-variant); }
.pagination { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 var(--space-sm); border-radius: var(--radius-sm); font-size: 13px; color: var(--color-on-surface-variant); text-decoration: none; border: 1px solid transparent; transition: all var(--transition-speed); }
.page-link:hover { background: var(--color-surface-container); color: var(--color-on-surface); text-decoration: none; }
.page-link.active { background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; }
.page-link.disabled { opacity: 0.4; pointer-events: none; }
.page-link.dots { border: none; cursor: default; }

/* Notification panel */
.nav-panel-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-lg); color: var(--color-on-surface-variant); font-size: 13px; gap: var(--space-sm); }

/* Misc */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ================================================================
   PLATFORM PAGE HEADER ALIASES
   Templates use .page-header / .page-title etc.
   ================================================================ */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}
.page-header-content { display: flex; flex-direction: column; gap: 2px; }
.page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 32px;
}
.page-subtitle {
    font-size: 14px;
    color: var(--color-outline);
    margin: 2px 0 0;
}
.page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding-top: 4px;
}

/* ================================================================
   CARD BEM ALIASES
   Templates use .vtr-card__header / __body / __footer / __title
   CSS defines .vtr-card-header / .vtr-card-body (single dash)
   ================================================================ */
.vtr-card__header {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-outline-variant);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    min-height: 56px;
    background: var(--color-surface-container-lowest);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.vtr-card__body { padding: var(--space-md) var(--space-lg); }
.vtr-card__footer {
    padding: var(--space-sm) var(--space-lg);
    border-top: 1px solid var(--color-outline-variant);
    background: var(--color-surface-container-low);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.vtr-card__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-on-surface);
    margin: 0;
    line-height: 1.3;
}

/* ================================================================
   BADGE STATUS ALIASES
   success → green, error → red, warning → amber
   ================================================================ */
.vtr-badge--success { background: #dcfce7; color: #16a34a; }
.vtr-badge--error   { background: #fee2e2; color: #dc2626; }
.vtr-badge--warning { background: #fef9c3; color: #b45309; }
.vtr-badge--draft   { background: #f1f5f9; color: #64748b; }

/* ================================================================
   EDIT PROFILE MODAL FORM SECTIONS
   ================================================================ */
.form-section {
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
}
.form-section + .form-section { margin-top: var(--space-md); }
.form-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-on-surface-variant);
    margin: 0 0 var(--space-md) 0;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-outline-variant);
}
.form-section-title i { font-size: 13px; }
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; }
.form-errors-alert {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    font-size: 13px;
    color: #991b1b;
}
.form-errors-alert .alert-title {
    font-weight: 700;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.form-errors-alert ul { margin: 0; padding-left: 16px; }
.invalid-feedback {
    font-size: 11px;
    color: var(--color-error);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.profile-photo-row {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}
.profile-photo-row .photo-upload-area { flex: 1; min-width: 0; }
.profile-photo-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem; font-weight: 700;
    border: 3px solid var(--color-outline-variant);
    overflow: hidden; flex-shrink: 0;
}
.profile-photo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pwd-section-toggle {
    cursor: pointer; user-select: none;
    display: flex; align-items: center;
}