/**
 * Futurekey CRM - Component Styles
 * Reusable UI component styles
 */

/* Hide number input spinners (arrows) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover {
    background: var(--color-bg-card-hover);
    border-color: var(--color-border-focus);
}

.btn:active {
    transform: scale(0.98);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary Button */
.btn-primary {
    background: var(--gradient-primary);
    border-color: transparent;
    color: var(--color-text-primary);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-glow);
}

/* Success Button */
.btn-success {
    background: var(--color-success);
    border-color: transparent;
    color: var(--color-text-primary);
}

.btn-success:hover {
    background: #22b563;
}

/* Danger Button */
.btn-danger {
    background: var(--color-danger);
    border-color: transparent;
    color: var(--color-text-primary);
}

.btn-danger:hover {
    background: #d64545;
}

/* Ghost Button */
.btn-ghost {
    background: transparent;
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--color-bg-card);
}

/* Button Sizes */
.btn-sm {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--text-xs);
}

.btn-lg {
    padding: var(--spacing-4) var(--spacing-6);
    font-size: var(--text-base);
}

.btn-icon {
    padding: var(--spacing-3);
    width: 40px;
    height: 40px;
}

.btn-block {
    width: 100%;
}

/* ============================================
   CARDS
   ============================================ */
.card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.card-body {
    padding: var(--spacing-card);
}

.card-header {
    padding: var(--spacing-4) var(--spacing-card);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.card-footer {
    padding: var(--spacing-4) var(--spacing-card);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-sidebar);
}

/* Interactive Card */
.card-interactive {
    cursor: pointer;
    transition: all var(--transition-normal);
}

.card-interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary);
}

/* ============================================
   KPI CARD
   ============================================ */
.kpi-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.kpi-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    color: var(--color-primary);
}

.kpi-card__icon svg {
    width: 24px;
    height: 24px;
}

.kpi-card__value {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    line-height: 1;
}

.kpi-card__label {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.kpi-card__change {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border-radius: var(--radius-full);
}

.kpi-card__change--positive {
    background: var(--color-success-light);
    color: var(--color-success);
}

.kpi-card__change--negative {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

/* ============================================
   BADGES
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.badge-primary {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.badge-success {
    background: var(--color-success-light);
    color: var(--color-success);
}

.badge-warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.badge-danger {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.badge-info {
    background: var(--color-info-light);
    color: var(--color-info);
}

/* ============================================
   FORM INPUTS
   ============================================ */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.form-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-input::placeholder {
    color: var(--color-text-muted);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23A0AEC0' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

/* Search Input */
.search-input {
    position: relative;
}

.search-input__icon {
    position: absolute;
    left: var(--spacing-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.search-input .form-input {
    padding-left: 44px;
}

/* ============================================
   DATA TABLE
   ============================================ */
/* Clickable table links */
.table-link {
    color: var(--color-primary);
    cursor: pointer;
    transition: color 0.2s, text-decoration 0.2s;
    text-decoration: none;
}
.table-link:hover {
    color: var(--color-primary-light, #60a5fa);
    text-decoration: underline;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: var(--spacing-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.data-table th {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-bg-sidebar);
}

.data-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.data-table th.sortable:hover {
    color: var(--color-primary);
}

.data-table tbody tr {
    transition: background var(--transition-fast);
}

.data-table tbody tr:hover {
    background: var(--color-bg-card-hover);
}

.data-table td {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

/* Last Comm cell — clickable shortcut to QuickView Communication tab */
.data-table td[data-column-id="last_comm"] {
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}
.data-table td[data-column-id="last_comm"]:hover {
    background: var(--color-bg-hover, rgba(99, 102, 241, 0.08));
    box-shadow: inset 0 0 0 1px var(--color-primary);
    border-radius: 4px;
}

/* Table Actions */
.table-actions {
    display: flex;
    gap: var(--spacing-2);
}

/* ============================================
   PROPERTY CARD (Gallery Style)
   ============================================ */
.property-card {
    display: flex;
    flex-direction: column;
    transition: all var(--transition-normal);
}

.property-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.property-card__image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.property-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.property-card:hover .property-card__image img {
    transform: scale(1.05);
}

.property-card__status {
    position: absolute;
    top: var(--spacing-3);
    left: var(--spacing-3);
}

.property-card__content {
    padding: var(--spacing-card);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.property-card__price {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

.property-card__address {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.property-card__specs {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.property-card__spec {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.property-card__spec svg {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
}

.property-card__actions {
    padding: 0 var(--spacing-card) var(--spacing-card);
}

/* ============================================
   AVATAR
   ============================================ */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    object-fit: cover;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
}

.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: var(--text-xs);
}

.avatar-lg {
    width: 56px;
    height: 56px;
    font-size: var(--text-lg);
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.pagination__btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pagination__btn:hover:not(:disabled) {
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    border-color: var(--color-primary);
}

.pagination__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination__btn--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-primary);
}

.pagination__info {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    padding: 0 var(--spacing-3);
}

/* ============================================
   SORTABLE TABLE HEADERS
   ============================================ */
.srt-th { cursor: pointer; user-select: none; transition: color .15s; }
.srt-th:hover { color: var(--color-primary) !important; }
.srt-inner { display: inline-flex; align-items: center; gap: 4px; }
.srt-icon { display: inline-flex; align-items: center; flex-shrink: 0; transition: opacity .15s; }
.srt-active { color: var(--color-primary) !important; }
.srt-active .srt-icon svg { opacity: 1 !important; stroke: var(--color-primary); }

/* ============================================
   PAGINATION HELPER (Professional Footer)
   ============================================ */
.pgn-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid var(--color-border);
    background: rgba(255,255,255,.015);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.pgn-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.pgn-rows-label {
    font-size: 13px;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.pgn-rows-select {
    appearance: auto;
    padding: 5px 8px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-input, #0f0f0f);
    color: var(--color-text-primary);
    font-size: 13px;
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
}
.pgn-rows-select:hover, .pgn-rows-select:focus {
    border-color: var(--color-primary);
}
.pgn-info {
    font-size: 13px;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.pgn-info strong {
    color: var(--color-text-secondary);
    font-weight: 600;
}
.pgn-right {
    display: flex;
    align-items: center;
    gap: 4px;
}
.pgn-btn {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    padding: 0 6px;
}
.pgn-btn:hover:not(.pgn-disabled):not(.pgn-active) {
    background: rgba(255,255,255,.06);
    border-color: var(--color-text-muted);
    color: var(--color-text-primary);
}
.pgn-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(59,130,246,.25);
}
.pgn-disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}
.pgn-ellipsis {
    width: 28px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
    user-select: none;
}
@media (max-width: 640px) {
    .pgn-footer { padding: 10px 12px; gap: 10px; }
    .pgn-info { display: none; }
    .pgn-btn { min-width: 30px; height: 30px; font-size: 12px; }
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-12);
    text-align: center;
}

.empty-state__icon {
    width: 80px;
    height: 80px;
    margin-bottom: var(--spacing-6);
    color: var(--color-text-muted);
}

.empty-state__title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
}

.empty-state__description {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    max-width: 400px;
    margin-bottom: var(--spacing-6);
}

/* ============================================
   LOADING STATES
   ============================================ */
.loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.skeleton {
    background: linear-gradient(90deg,
            var(--color-bg-card) 0%,
            var(--color-bg-card-hover) 50%,
            var(--color-bg-card) 100%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-pulse {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Table pagination transition — fast opacity fade instead of skeleton */
.table-loading-fade {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.owners-search-status {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 var(--spacing-3);
    padding: 9px 13px;
    color: var(--color-text-primary);
    background: var(--color-bg-input);
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card));
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.25;
}

.owners-search-status[hidden] {
    display: none !important;
}

.owners-search-status__spinner {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: owners-search-spin 0.7s linear infinite;
}

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

[id$="Content"] {
    transition: opacity 0.15s ease;
}

/* ============================================
   TOOLTIP
   ============================================ */
.tooltip {
    position: relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-text-primary);
    color: var(--color-text-inverse);
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: var(--z-tooltip);
}

.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   DROPDOWN
   ============================================ */
.dropdown {
    position: relative;
}

.dropdown__menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 180px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-fast);
    z-index: var(--z-dropdown);
}

.dropdown.open .dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.dropdown__item:hover {
    background: var(--color-bg-card-hover);
}

.dropdown__item--danger {
    color: var(--color-danger);
}

.dropdown__divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--spacing-2) 0;
}

/* ============================================
   MODAL
   ============================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    padding: var(--spacing-4);
    /* Counter-zoom: overlay fills the REAL viewport, not the zoomed one */
    zoom: calc(1 / var(--zoom-factor, 1));
}

/* Re-apply zoom to modal content so it matches the page scale */
/* --modal-scale allows independent sizing of modals from Settings > Appearance */
.modal-overlay > * {
    zoom: calc(var(--zoom-factor, 1) * var(--modal-scale, 1));
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.9);
    transition: transform var(--transition-normal);
}

.modal-overlay.active .modal {
    transform: scale(1);
    opacity: 1 !important;
    visibility: visible !important;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-5) var(--spacing-6);
    border-bottom: 1px solid var(--color-border);
    gap: var(--spacing-3);
    min-width: 0;
}

.modal-header h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Title block — allow it to shrink so it never pushes tabs past modal edge */
.modal-header__title-section {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
}

.modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-size: 24px;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--color-bg-card-hover);
    color: var(--color-text-primary);
}

.modal-body {
    padding: var(--spacing-6);
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-6);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-sidebar);
}

/* ============================================
   FORM LAYOUT
   ============================================ */
.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.form-row:last-child {
    margin-bottom: 0;
}

/* ============================================
   FILTERS ROW
   ============================================ */
.filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    align-items: center;
}

.filters-row .search-input {
    flex: 1;
    min-width: 250px;
}

@media (max-width: 768px) {
    .filters-row {
        flex-direction: column;
        align-items: stretch;
    }

    .filters-row .search-input,
    .filters-row .form-select {
        width: 100% !important;
    }
}

/* ============================================
   TABLE FOOTER & RESPONSIVE
   ============================================ */
.table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-card);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-sidebar);
}

.table-info {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.table-responsive {
    overflow-x: auto;
}

@media (max-width: 768px) {
    .table-footer {
        flex-direction: column;
        gap: var(--spacing-3);
    }
}

/* ============================================
   MOBILE RECORD CARDS (<=768px)
   Search-quality visual language for every standard
   CRM table, powered by App.enhanceMobileTables().
   ============================================ */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: visible;
    }

    .mobile-card-table-shell {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .mobile-card-table-shell > .table-responsive {
        overflow: visible;
    }

    .mobile-card-table-shell .table-footer {
        margin-top: 12px;
        padding: 12px 14px;
        border: 1px solid var(--color-border);
        border-radius: 16px;
        background: var(--color-bg-card);
        box-shadow: 0 8px 22px rgba(0, 0, 0, .07);
    }

    .data-table.mobile-card-table {
        width: 100%;
        border: 0;
        background: transparent;
    }

    .data-table.mobile-card-table thead {
        display: none;
    }

    .data-table.mobile-card-table tbody {
        display: grid;
        gap: 12px;
    }

    .data-table.mobile-card-table tbody tr {
        position: relative;
        isolation: isolate;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 15px 16px;
        overflow: hidden;
        border: 1px solid var(--color-border);
        border-radius: 19px;
        background: color-mix(in srgb, var(--color-bg-card) 96%, var(--dtc-accent, #64748b) 4%);
        box-shadow: 0 10px 26px rgba(0, 0, 0, .1);
        transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    }

    .data-table.mobile-card-table tbody tr::before {
        content: '';
        position: absolute;
        z-index: 2;
        inset: 0 auto 0 0;
        width: 3px;
        background: var(--dtc-accent, #64748b);
    }

    .data-table.mobile-card-table tbody tr:active {
        transform: scale(.992);
        border-color: color-mix(in srgb, var(--color-border) 55%, var(--dtc-accent, #64748b));
        box-shadow: 0 6px 18px rgba(0, 0, 0, .09);
    }

    .data-table.mobile-card-table tbody td {
        display: grid;
        grid-template-columns: minmax(88px, .42fr) minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        min-height: 39px;
        padding: 8px 0;
        border: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
        color: var(--color-text-secondary);
        font-size: 12px;
        line-height: 1.45;
        text-align: right;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .data-table.mobile-card-table tbody td::before {
        content: attr(data-label);
        min-width: 0;
        color: var(--color-text-muted);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .08em;
        line-height: 1.2;
        text-align: left;
        text-transform: uppercase;
    }

    .data-table.mobile-card-table tbody td > * {
        min-width: 0;
        max-width: 100%;
    }

    .data-table.mobile-card-table tbody td a:not(.btn) {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .data-table.mobile-card-table tbody td.dtc-empty {
        display: none;
    }

    /* Card identity: roomy avatar/initials, title, and entity kicker. */
    .data-table.mobile-card-table tbody td.dtc-head {
        order: -20;
        display: flex;
        justify-content: flex-start;
        gap: 11px;
        min-height: 58px;
        padding: 2px 0 13px;
        border-bottom-color: color-mix(in srgb, var(--color-border) 68%, var(--dtc-accent, #64748b));
        color: var(--color-text-primary);
        font-size: 15px;
        font-weight: 760;
        line-height: 1.35;
        text-align: left;
    }

    .data-table.mobile-card-table tbody td.dtc-head::before {
        content: none;
    }

    .data-table.mobile-card-table tbody td.dtc-head::after {
        content: attr(data-card-kicker);
        flex: 0 0 auto;
        align-self: flex-start;
        margin-left: auto;
        padding: 4px 7px;
        border-radius: 7px;
        background: color-mix(in srgb, var(--dtc-accent, #64748b) 13%, transparent);
        color: var(--dtc-accent, #64748b);
        font-size: 9px;
        font-weight: 850;
        letter-spacing: .1em;
        line-height: 1;
        text-transform: uppercase;
    }

    .data-table.mobile-card-table tbody td.dtc-head[data-initials]::before {
        content: attr(data-initials);
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        margin: 0;
        border-radius: 14px;
        background: color-mix(in srgb, var(--dtc-accent, #64748b) 14%, transparent);
        color: var(--dtc-accent, #64748b);
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: none;
    }

    .data-table.mobile-card-table tbody td.dtc-head .avatar {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 14px;
        background: color-mix(in srgb, var(--dtc-accent, #64748b) 14%, transparent);
        color: var(--dtc-accent, #64748b);
    }

    .data-table.mobile-card-table tbody tr:has(.dtc-open) td.dtc-head,
    .data-table.mobile-card-table tbody tr:has(.dtc-select) td.dtc-head {
        padding-right: 46px;
    }

    /* Reference becomes the compact tag directly under the identity. */
    .data-table.mobile-card-table tbody td.dtc-ref:not(.dtc-head) {
        order: -19;
        display: flex;
        justify-content: flex-start;
        gap: 6px;
        min-height: 0;
        margin-top: -7px;
        padding: 0 0 11px 55px;
        color: var(--dtc-accent, #64748b);
        font-size: 10px;
        font-weight: 750;
        text-align: left;
    }

    .data-table.mobile-card-table tbody td.dtc-ref:not(.dtc-head)::before {
        content: 'REF';
        padding: 3px 6px;
        border-radius: 6px;
        background: color-mix(in srgb, var(--dtc-accent, #64748b) 12%, transparent);
        color: var(--dtc-accent, #64748b);
        font-size: 8px;
        letter-spacing: .08em;
    }

    /* Phone and email read like the highlighted contact row in Mobile Search. */
    .data-table.mobile-card-table tbody td.dtc-contact {
        margin-top: 7px;
        padding: 10px 11px;
        border: 1px solid color-mix(in srgb, var(--color-border) 72%, var(--dtc-accent, #64748b));
        border-radius: 13px;
        background: color-mix(in srgb, var(--color-bg-input) 93%, var(--dtc-accent, #64748b) 7%);
        color: var(--color-text-primary);
        font-size: 13px;
        font-weight: 650;
    }

    .data-table.mobile-card-table tbody td.dtc-contact::before {
        color: var(--dtc-accent, #64748b);
    }

    .data-table.mobile-card-table tbody td.dtc-amount {
        color: var(--color-text-primary);
        font-size: 14px;
        font-weight: 800;
    }

    .data-table.mobile-card-table tbody td.dtc-status .badge {
        justify-self: end;
        min-height: 26px;
        padding: 5px 9px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 750;
    }

    .data-table.mobile-card-table tbody td.dtc-date {
        color: var(--color-text-muted);
        font-size: 11px;
    }

    .data-table.mobile-card-table tbody td.dtc-location {
        color: var(--color-text-primary);
        font-weight: 620;
    }

    /* Existing row-level View control moves to the search-card open position. */
    .data-table.mobile-card-table tbody td.dtc-open {
        position: absolute;
        z-index: 3;
        top: 13px;
        right: 13px;
        display: grid;
        place-items: center;
        width: 38px;
        min-height: 38px;
        padding: 0;
        border: 0;
    }

    .data-table.mobile-card-table tbody td.dtc-open > button,
    .data-table.mobile-card-table tbody td.dtc-open > a {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 9px;
        border: 1px solid var(--color-border);
        border-radius: 12px;
        background: var(--color-bg-input);
        color: var(--color-text-secondary);
    }

    .data-table.mobile-card-table tbody td.dtc-select {
        position: absolute;
        z-index: 4;
        top: 14px;
        right: 14px;
        display: grid;
        place-items: center;
        width: 36px;
        min-height: 36px;
        padding: 0;
        border: 0;
    }

    .data-table.mobile-card-table tbody tr:has(.dtc-select) td.dtc-open {
        top: 57px;
    }

    /* Action cell becomes a distinct, touch-friendly footer. */
    .data-table.mobile-card-table tbody td.dtc-actions {
        order: 30;
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 7px;
        min-height: 0;
        margin: 9px -16px -15px;
        padding: 12px 16px 14px;
        border: 0;
        border-top: 1px solid var(--color-border);
        background: color-mix(in srgb, var(--color-bg-input) 90%, var(--dtc-accent, #64748b) 10%);
    }

    .data-table.mobile-card-table tbody td[data-nolabel]::before {
        content: none;
    }

    .data-table.mobile-card-table tbody td.dtc-actions .btn,
    .data-table.mobile-card-table tbody td.dtc-actions button,
    .data-table.mobile-card-table tbody td.dtc-actions > a {
        min-width: 40px;
        min-height: 40px;
        border-radius: 11px;
    }

    /* Existing grid-view cards receive the same radius, accent, and spacing. */
    .contact-card { --grid-card-accent: #8b5cf6; }
    .owner-card { --grid-card-accent: #06b6d4; }
    .lead-card { --grid-card-accent: #f59e0b; }
    .property-card { --grid-card-accent: #3b82f6; }
    .unit-card { --grid-card-accent: #10b981; }
    .project-card { --grid-card-accent: #ec4899; }

    .card.contact-card,
    .card.owner-card,
    .card.lead-card,
    .card.property-card,
    .unit-card,
    .project-card {
        position: relative;
        overflow: hidden;
        border: 1px solid var(--color-border);
        border-radius: 19px;
        background: color-mix(in srgb, var(--color-bg-card) 96%, var(--grid-card-accent, #64748b) 4%);
        box-shadow: 0 10px 26px rgba(0, 0, 0, .1);
    }

    .card.contact-card::before,
    .card.owner-card::before,
    .card.lead-card::before,
    .card.property-card::before,
    .unit-card::before,
    .project-card::before {
        content: '';
        position: absolute;
        z-index: 3;
        inset: 0 auto 0 0;
        width: 3px;
        background: var(--grid-card-accent, #64748b);
    }

    .contact-card .card-body,
    .owner-card .card-body,
    .lead-card .card-body {
        padding: 16px;
    }

    .contact-card .avatar,
    .owner-card .avatar,
    .lead-card .avatar {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: color-mix(in srgb, var(--grid-card-accent, #64748b) 14%, transparent);
        color: var(--grid-card-accent, #64748b);
    }

    .contact-card .card-title::before,
    .owner-card .card-title::before,
    .lead-card .card-title::before {
        display: block;
        margin-bottom: 2px;
        color: var(--grid-card-accent, #64748b);
        font-size: 8px;
        font-weight: 850;
        letter-spacing: .1em;
    }

    .contact-card .card-title::before { content: 'CONTACT'; }
    .owner-card .card-title::before { content: 'OWNER'; }
    .lead-card .card-title::before { content: 'LEAD'; }

    .contact-card .grid-card-details,
    .owner-card .grid-card-details,
    .lead-card .grid-card-details {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        margin-top: 12px !important;
    }

    .contact-card .detail-item,
    .owner-card .detail-item,
    .lead-card .detail-item {
        grid-column: auto !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 39px;
        padding: 8px 0;
        border-bottom: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
    }

    .contact-card .grid-card-actions,
    .owner-card .grid-card-actions,
    .lead-card .grid-card-actions {
        margin: 10px -16px -16px !important;
        padding: 12px 16px !important;
        background: color-mix(in srgb, var(--color-bg-input) 90%, var(--grid-card-accent, #64748b) 10%);
    }

    .property-card__image,
    .project-card__image-container {
        border-radius: 19px 19px 0 0;
    }

    /* Stack any remaining 2-column forms, never desktop. */
    .form-row,
    .so-fields-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   BADGE MODIFIERS
   ============================================ */

/* --primary and --default were referenced by the status badge maps for a long
   time without ever being defined here, so a New lead - the second most common
   status - rendered with the bare .badge box and inherited text colour. The
   maps were right; the stylesheet was missing two rules. */
.badge--primary {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.badge--default {
    background: var(--color-bg-card-hover);
    color: var(--color-text-muted);
}

.badge--success {
    background: var(--color-success-light);
    color: var(--color-success);
}

.badge--warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.badge--danger {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.badge--info {
    background: var(--color-info-light);
    color: var(--color-info);
}

.badge--secondary {
    background: var(--color-bg-card-hover);
    color: var(--color-text-secondary);
}

/* ============================================
   PAGINATION ACTIVE
   ============================================ */
.pagination__btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* ============================================
   AVATAR SIZES
   ============================================ */
.avatar--sm {
    width: 28px;
    height: 28px;
    font-size: var(--text-xs);
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast-container {
    position: fixed;
    bottom: var(--spacing-6);
    right: var(--spacing-6);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 300px;
    max-width: 400px;
    animation: toast-slide-in 0.3s ease;
}

@keyframes toast-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast__icon {
    flex-shrink: 0;
}

.toast__content {
    flex: 1;
}

.toast__message {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

.toast__close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.toast__close:hover {
    color: var(--color-text-primary);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.mb-4 {
    margin-bottom: var(--spacing-4);
}

.mt-4 {
    margin-top: var(--spacing-4);
}

.py-6 {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
}

.gap-2 {
    gap: var(--spacing-2);
}

.gap-3 {
    gap: var(--spacing-3);
}

.d-flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

.text-primary {
    color: var(--color-primary) !important;
}

.text-success {
    color: var(--color-success) !important;
}

.text-danger {
    color: var(--color-danger) !important;
}

/* ============================================
   NOTIFICATION DROPDOWN
   ============================================ */
.header__notification {
    position: relative;
    display: flex;
    align-items: center;
}

.notification-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: -10px;
    width: 360px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-toast);
    display: none;
    overflow: hidden;
    transform-origin: top right;
}

.header__notification.open .notification-dropdown {
    display: block;
    animation: dropdownFadeIn 0.2s ease-out forwards;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.notification-header {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-bg-surface);
}

.notification-header h4 {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.notification-link {
    font-size: var(--text-xs);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-medium);
}

.notification-link:hover {
    text-decoration: underline;
}

.notification-list {
    max-height: 380px;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background var(--transition-fast);
    position: relative;
}

.notification-item.unread {
    background: var(--color-primary-light);
}

.notification-item.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-primary);
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background: var(--color-bg-surface);
}

.notification-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    font-size: 14px;
}

.notification-icon.create {
    background: var(--color-success);
}

.notification-icon.update {
    background: var(--color-primary);
}

.notification-icon.delete {
    background: var(--color-danger);
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.notification-time {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}


.notification-item.unread {
    background: var(--color-primary-light);
    /* Tint of primary color */
}

.notification-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.notification-content {
    flex: 1;
}

.notification-title {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.notification-desc {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.notification-time {
    font-size: 10px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* ============================================
   TABLE ACTION BUTTONS
   ============================================ */
/* First .view-details-btn definition removed — single definition at line ~1860 uses CSS variables */


.notification-icon.success {
    background: var(--color-success-light);
    color: var(--color-success);
}

.notification-icon.warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.notification-content {
    flex: 1;
}

.notification-title {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.notification-time {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ============================================
   TEXT SIZE CONTROL
   ============================================ */
.text-size-control {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.text-size-label {
    font-size: 12px;
    color: var(--color-text-secondary);
    min-width: 16px;
    text-align: center;
}

.text-size-label.text-size-large {
    font-size: 20px;
    font-weight: var(--font-bold);
}

.text-size-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--color-bg-card);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.text-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.text-size-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px var(--color-primary);
}

.text-size-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.text-size-value {
    min-width: 50px;
    text-align: right;
    font-weight: var(--font-medium);
    color: var(--color-primary);
}

.text-size-presets {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-2);
}

.text-size-preset {
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.text-size-preset:hover {
    background: var(--color-bg-card-hover);
    border-color: var(--color-primary);
    color: var(--color-text-primary);
}

.text-size-preset.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* ============================================
   BACKGROUND THEME SELECTOR
   ============================================ */
.bg-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--spacing-3);
    margin-top: var(--spacing-2);
}

.bg-theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2);
    background: var(--color-bg-card);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.bg-theme-option:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.bg-theme-option.active {
    border-color: var(--color-primary);
    background: var(--color-primary-light) !important;
}

.bg-theme-preview {
    width: 100%;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.bg-theme-option span {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    font-weight: var(--font-medium);
}

.bg-theme-option.active span {
    color: var(--color-primary);
    font-weight: var(--font-bold);
}

/* ============================================
   TIMELINE
   ============================================ */
.timeline {
    position: relative;
    padding: var(--spacing-4) 0;
    margin-left: var(--spacing-4);
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}

.timeline__item {
    position: relative;
    padding-left: var(--spacing-8);
    margin-bottom: var(--spacing-6);
}

.timeline__item:last-child {
    margin-bottom: 0;
}

.timeline__dot {
    position: absolute;
    left: -6px;
    top: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-bg-card);
    border: 3px solid var(--color-border);
    z-index: 1;
}

.timeline__item--create .timeline__dot {
    border-color: var(--color-success);
}

.timeline__item--update .timeline__dot {
    border-color: var(--color-primary);
}

.timeline__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}

.timeline__action {
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

.timeline__user {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.timeline__date {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-left: auto;
}

.timeline__changes {
    margin-top: var(--spacing-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-bg-card);
}

/* ============================================
   MODAL UNIFICATION (Fixing footer issues)
   ============================================ */
/* Compatibility classes for JS components */
.modal-header,
.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-6);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.modal-body,
.modal__body {
    padding: var(--spacing-6);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    /* Important for firefox flex scrolling */
}

/* Ensure form inside modal takes full height for proper scrolling */
.modal-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Make sure the form content scrolls while footer stays pinned */
.modal-form .modal-body {
    flex: 1;
    overflow-y: auto;
}

.modal-footer,
.modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding: var(--spacing-6);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-card);
    /* Ensure footer has background */
    flex-shrink: 0;
    border-bottom-left-radius: 16px;
    /* Match modal radius */
    border-bottom-right-radius: 16px;
}

.timeline__change {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: 13px;
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
    transition: background-color var(--transition-fast);
}

.timeline__change:last-child {
    border-bottom: none;
}

.timeline__change:hover {
    background-color: var(--color-bg-hover);
}

.timeline__field {
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
    min-width: 130px;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
}

.timeline__field::after {
    content: ':';
    margin-right: var(--spacing-2);
}

.timeline__old {
    color: var(--color-danger);
    background: var(--color-danger-light);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-decoration: line-through;
    opacity: 0.8;
    max-width: 40%;
    word-break: break-all;
}

.timeline__new {
    color: var(--color-success);
    background: var(--color-success-light);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: var(--font-medium);
    max-width: 40%;
    word-break: break-all;
}

.timeline__arrow {
    color: var(--color-text-muted);
    flex-shrink: 0;
    opacity: 0.6;
}

.timeline-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-10);
    gap: var(--spacing-4);
    color: var(--color-text-muted);
    text-align: center;
}

.timeline-empty p {
    font-size: var(--text-sm);
}

/* ============================================
   MODAL TABS REDESIGN (Unified)
   ============================================ */
.modal-header__tabs {
    display: flex;
    align-items: center;
    background: var(--color-bg-sidebar);
    padding: 4px;
    border-radius: 10px;
    margin-left: var(--spacing-4);
    border: 1px solid var(--color-border);

    /* Never exceed available space — scroll horizontally on overflow.
       Without this, adding tabs (e.g. the Compliance tab) pushed the
       strip past the rounded modal edge. */
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

/* WebKit slim horizontal scrollbar (Chrome/Edge/Safari) */
.modal-header__tabs::-webkit-scrollbar { height: 4px; }
.modal-header__tabs::-webkit-scrollbar-track { background: transparent; }
.modal-header__tabs::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}
.modal-header__tabs::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

.modal-header__tab {
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-muted);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent !important;
    border: none !important;
    white-space: nowrap;
    flex: 0 0 auto;
}

.modal-header__tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-input) !important;
}

.modal-header__tab.active {
    background: var(--color-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Tab Content Visibility */
.modal-tab-content {
    display: none;
}

.modal-tab-content.active {
    display: block;
    animation: modalTabFadeIn 0.3s ease-out;
}

@keyframes modalTabFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Tabs — on phones the strip wraps to its own full-width row
   under the title and scrolls horizontally (never hidden: Activity History /
   Communication / Documents / Images must stay reachable on mobile). */
@media (max-width: 768px) {
    .modal-header {
        flex-wrap: wrap;
        row-gap: 10px;
    }
    .modal-header__tabs {
        order: 3;
        flex: 1 1 100%;
        margin-left: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .modal-header__tabs::-webkit-scrollbar {
        display: none;
    }
    .modal-header__tab {
        padding: 8px 14px;
        min-height: 36px;
        font-size: 13px;
    }
}

/* ============================================
   VIEW DETAILS BUTTON
   ============================================ */
/* QuickView button — customizable via Settings > Appearance */
.view-details-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--qv-btn-size, 32px);
    height: var(--qv-btn-size, 32px);
    background: var(--qv-btn-bg, var(--color-primary-light));
    color: var(--qv-btn-color, var(--color-primary));
    border: var(--qv-btn-border, none);
    border-radius: var(--qv-btn-radius, 6px);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.view-details-btn svg {
    width: var(--qv-btn-icon, 16px);
    height: var(--qv-btn-icon, 16px);
}
.view-details-btn:hover {
    background: var(--qv-btn-hover-bg, var(--color-primary));
    color: var(--qv-btn-hover-color, #fff);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.view-details-btn:active,
.view-details-btn:focus {
    transform: translateY(0);
    outline: none;
    box-shadow: 0 0 0 2px var(--color-bg-card), 0 0 0 4px var(--qv-btn-bg, var(--color-primary-light));
}
.view-details-btn:visited { color: var(--qv-btn-color, var(--color-primary)); }

/* ============================================
   URL + UPLOAD GROUP
   ============================================ */
.url-upload-group {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

.url-upload-group .form-input {
    flex: 1;
    min-width: 0;
}

.url-upload-group .url-upload-btn {
    flex-shrink: 0;
    padding: 8px;
    border-radius: var(--radius-md);
}

.url-upload-group .url-upload-btn:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.url-upload-group .url-upload-btn.uploading {
    pointer-events: none;
    opacity: 0.5;
}

/* ===== Campaign builder: Abu Dhabi geo picker + live reach ===== */

.bld-geo {
    margin-top: 14px;
    padding: 14px;
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

.bld-geo-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.bld-geo-title { font-weight: 700; font-size: 14px; }
.bld-geo-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.bld-geo-tools { display: flex; gap: 6px; flex-wrap: wrap; }

.bld-chip {
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all .15s ease;
}

.bld-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }

.bld-chip.is-on {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.bld-chip.bld-clear:hover { border-color: var(--color-danger); color: var(--color-danger); }

/* Two columns on desktop, one on narrow screens. The CRM runs at 85% interface
   size, so sizing here stays in rem/px rather than viewport units. */
.bld-areas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 6px;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 4px;
}

.bld-area {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-card);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.bld-area:hover { border-color: var(--color-primary); }

.bld-area.is-on {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.bld-area.is-bleed { border-left: 3px solid var(--color-warning); }

.bld-area-cb { margin: 0; flex: 0 0 auto; }
.bld-area-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bld-area-ar { font-size: 13px; font-weight: 600; }
.bld-area-en { font-size: 11px; color: var(--color-text-muted); }

.bld-area-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: 0 0 auto;
}

.bld-sz {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.bld-sz-wait { opacity: .45; }
.bld-sz-err { color: var(--color-danger); }

.bld-warn {
    font-size: 9px;
    line-height: 1.3;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--color-warning-light);
    color: var(--color-warning);
    white-space: nowrap;
    cursor: help;
}

.bld-warn-sm { background: var(--color-bg-input); color: var(--color-text-muted); }

.bld-geo-search { display: flex; gap: 8px; margin-top: 12px; }
.bld-geo-search .form-input { flex: 1; }

.bld-geo-results { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.bld-hit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    text-align: left;
}

.bld-hit:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.bld-hit strong { font-size: 12px; }
.bld-hit span { font-size: 10px; color: var(--color-text-muted); }

.bld-geo-extra { margin-top: 8px; }
.bld-extra-t { font-size: 11px; color: var(--color-text-muted); margin-bottom: 4px; }

.bld-pill {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-info-light);
    color: var(--color-info);
    font-size: 11px;
    cursor: pointer;
}

.bld-muted { font-size: 12px; color: var(--color-text-muted); }

/* Reach panel. Sticks to the bottom of the form so the number stays visible
   while the targeting above it is being changed. */
.bld-estbar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--color-primary);
    border-radius: 10px;
    background: var(--color-primary-light);
}

.bld-est-num {
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
    line-height: 1.1;
}

.bld-est-lbl { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

.bld-est-side {
    font-size: 12px;
    color: var(--color-text-secondary);
    max-width: 340px;
    text-align: right;
}

@media (max-width: 640px) {
    .bld-areas { grid-template-columns: 1fr; max-height: 300px; }
    .bld-est-side { text-align: left; max-width: none; }
}

/* ===================================================================
   Campaign Builder — full-page three-pane structure editor
   Reuses the .bld-* geo picker verbatim; everything here is additive.
   =================================================================== */

.cb-page { display: flex; flex-direction: column; }

/* ---- top bar ---- */
.cb-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
}

.cb-topbar__ctx { display: flex; align-items: center; gap: 10px; }
.cb-ctxname { display: flex; flex-direction: column; line-height: 1.25; }
.cb-acct { font-size: 13px; }
.cb-acctsub { font-size: 10px; color: var(--color-text-muted); }
.cb-topbar__name { flex: 1 1 260px; min-width: 200px; }
.cb-name { width: 100%; font-weight: 600; }
.cb-topbar__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-topbar__act { display: flex; gap: 8px; align-items: center; }

/* ---- the grid ----
   body carries zoom:var(--zoom-factor), and vh resolves against the UNZOOMED
   viewport, so a raw 100vh renders about 15% short at the CRM's 85% setting.
   Dividing by the factor is the same correction main.css:101 already applies. */
.cb-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 330px;
    height: calc((100vh / var(--zoom-factor, 1)) - 250px);
    min-height: 520px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    background: var(--color-bg-card);
}

.cb-tree, .cb-editor, .cb-aside { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.cb-tree { border-right: 1px solid var(--color-border); }
.cb-aside { border-left: 1px solid var(--color-border); background: var(--color-bg-input); overflow-y: auto; }

/* ---- tree ---- */
.cb-tree__head, .cb-editor__head, .cb-aside__h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-card);
    flex: 0 0 auto;
}

.cb-tree__title { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.cb-tree__body, .cb-editor__body { overflow-y: auto; padding: 8px; flex: 1 1 auto; }
.cb-editor__body { padding: 16px 18px 28px; }

.cb-node {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
}

.cb-node:hover { background: var(--color-bg-card-hover); }
.cb-node.is-on { background: var(--color-primary-light); border-color: var(--color-primary); }
.cb-node--d1 { margin-left: 14px; }
.cb-node--d2 { margin-left: 28px; }
.cb-node__icon { flex: 0 0 auto; font-size: 11px; color: var(--color-text-muted); width: 14px; text-align: center; }
.cb-node__body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cb-node__label { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-node__sub { font-size: 10px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cb-dot { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; font-size: 9px; line-height: 16px; text-align: center; font-weight: 700; }
.cb-dot.is-error { background: var(--color-danger); color: #fff; }
.cb-dot.is-warn { background: var(--color-warning); color: #fff; }

.cb-nact { display: none; gap: 2px; flex: 0 0 auto; }
.cb-node:hover .cb-nact, .cb-node.is-on .cb-nact { display: flex; }

.cb-iconbtn {
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    border-radius: 6px;
    width: 20px;
    height: 20px;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.cb-iconbtn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.cb-iconbtn.is-danger:hover { border-color: var(--color-danger); color: var(--color-danger); }

.cb-addad {
    display: block;
    width: calc(100% - 28px);
    margin: 2px 0 10px 28px;
    padding: 5px 8px;
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 11px;
    cursor: pointer;
    text-align: left;
}

.cb-addad:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ---- editor ---- */
.cb-crumb { display: flex; align-items: center; gap: 6px; font-size: 12px; flex-wrap: wrap; }
.cb-crumb__p { color: var(--color-text-muted); }
.cb-crumb__p.is-last { color: var(--color-text-primary); font-weight: 700; }
.cb-crumb__sep { color: var(--color-text-muted); }

.cb-sec { margin-bottom: 22px; }
.cb-sec__h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cb-sec__h h4 { margin: 0; font-size: 13px; }
.cb-sec__note { font-size: 11px; color: var(--color-text-muted); }
.cb-sec__b { display: flex; flex-direction: column; gap: 12px; }

.cb-row { display: flex; gap: 12px; flex-wrap: wrap; }
.cb-row > .cb-f { flex: 1 1 190px; min-width: 160px; }
.cb-f { display: flex; flex-direction: column; gap: 4px; }
.cb-hint { font-size: 10.5px; color: var(--color-text-muted); line-height: 1.4; }
.cb-note { font-size: 12px; color: var(--color-text-muted); padding: 10px; background: var(--color-bg-input); border-radius: 8px; }
.cb-inline { display: flex; gap: 8px; align-items: center; }
.cb-inline > .form-select, .cb-inline > .form-input { flex: 1; }
.cb-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; padding: 2px 0; }
.cb-checks { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.cb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-chips .badge { cursor: pointer; }
.cb-audlist { max-height: 150px; overflow-y: auto; padding: 8px 10px; background: var(--color-bg-input); border-radius: 8px; }

/* ---- mode fork cards (CBO/ABO, creative type, Advantage+) ---- */
.cb-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.cb-modes--sm { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.cb-mode {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 13px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-card);
    cursor: pointer;
    text-align: left;
}

.cb-mode:hover { border-color: var(--color-primary); }
.cb-mode.is-on { border-color: var(--color-primary); background: var(--color-primary-light); }
.cb-mode__k { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--color-primary); }
.cb-mode__t { font-size: 13px; font-weight: 700; }
.cb-mode__d { font-size: 10.5px; color: var(--color-text-muted); line-height: 1.4; }

/* ---- carousel cards + media ---- */
.cb-cards { display: flex; flex-direction: column; gap: 10px; }
.cb-card { display: flex; flex-direction: column; gap: 7px; padding: 11px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg-input); }
.cb-card__h { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.cb-media__st { font-size: 11px; color: var(--color-text-muted); margin-top: 5px; }
.cb-media__st.is-ok { color: var(--color-success); }
.cb-media__st.is-wait { color: var(--color-warning); }

/* ---- aside: estimate, checks, build log ---- */
.cb-estbar { position: static; margin: 12px; border-radius: 10px; }
.cb-aside__h { position: sticky; top: 0; z-index: 2; font-size: 12px; font-weight: 700; }
.cb-issues, .cb-log { display: flex; flex-direction: column; }
.cb-ok { padding: 12px; font-size: 12px; color: var(--color-success); }

.cb-issue {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    font-size: 11.5px;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    color: var(--color-text-secondary);
}

.cb-issue:hover { background: var(--color-bg-card-hover); }
.cb-issue__i { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; font-size: 9px; line-height: 15px; text-align: center; font-weight: 700; color: #fff; }
.cb-issue.is-e .cb-issue__i { background: var(--color-danger); }
.cb-issue.is-w .cb-issue__i { background: var(--color-warning); }

.cb-logrow { display: flex; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--color-border); font-size: 11px; }
.cb-logrow__b { display: flex; flex-direction: column; min-width: 0; }
.cb-logrow__k { font-weight: 600; }
.cb-logrow__d { color: var(--color-text-muted); word-break: break-all; }
.cb-logrow__c { color: var(--color-danger); font-weight: 700; }
.cb-logacts { display: flex; gap: 8px; padding: 12px; flex-wrap: wrap; }
.cb-danger { color: var(--color-danger); }
.cb-empty { padding: 24px 16px; font-size: 12px; color: var(--color-text-muted); text-align: center; }

/* ---- narrow screens: the panes stack and scroll as one page ---- */
@media (max-width: 1100px) {
    .cb-shell { grid-template-columns: 260px minmax(0, 1fr); }
    .cb-aside { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--color-border); }
}

@media (max-width: 820px) {
    .cb-shell { grid-template-columns: 1fr; height: auto; min-height: 0; }
    .cb-tree { border-right: 0; border-bottom: 1px solid var(--color-border); max-height: 300px; }
    .cb-editor__body, .cb-tree__body { overflow: visible; }
    .cb-topbar { position: static; }
    .cb-topbar__name { flex-basis: 100%; order: -1; }
}


/* ============================================================
   NOTIFICATION CENTER  (#/notifications)
   Every colour here is a token, so the page follows the theme
   switch instead of quietly staying dark on a light install.
   ============================================================ */

.notif-center {
    display: grid;
    grid-template-columns: 296px minmax(0, 1fr);
    gap: var(--spacing-5);
    align-items: start;
}

/* ---------- Left rail ---------- */

.notif-center__rail {
    padding: var(--spacing-4);
    position: sticky;
    /* Clears the fixed header without vh: the CRM runs at 85% interface
       zoom, and viewport units under body zoom land in the wrong place. */
    top: calc(var(--header-height) + 16px);
}

.notif-rail__search {
    position: relative;
    margin-bottom: var(--spacing-4);
}

.notif-rail__search .form-input {
    width: 100%;
    padding-left: 38px;
}

.notif-rail__search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    display: flex;
    pointer-events: none;
}

.notif-rail__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notif-rail__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    padding: 11px 12px;
    background: transparent;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.notif-rail__item:hover {
    background: var(--color-bg-card-hover);
    color: var(--color-text-primary);
}

.notif-rail__item.is-active {
    background: var(--color-primary-light);
    border-left-color: var(--color-primary);
    color: var(--color-text-primary);
    font-weight: var(--font-semibold);
}

.notif-rail__icon {
    display: flex;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.notif-rail__item.is-active .notif-rail__icon {
    color: var(--color-primary);
}

.notif-rail__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-rail__count {
    flex-shrink: 0;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    background: var(--color-bg-input);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-align: center;
}

.notif-rail__item.is-active .notif-rail__count {
    background: var(--color-primary);
    color: #fff;
}

.notif-rail__divider {
    height: 1px;
    margin: var(--spacing-4) 0 var(--spacing-2);
    background: var(--color-border);
}

/* ---------- Right panel ---------- */

.notif-center__panel {
    min-height: 420px;
    overflow: hidden;
}

.notif-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding: var(--spacing-5) var(--spacing-6);
    border-bottom: 1px solid var(--color-border);
}

.notif-panel__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    min-width: 0;
}

.notif-panel__title h2 {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

.notif-panel__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.notif-panel__danger {
    flex-shrink: 0;
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: transparent;
}

.notif-panel__danger:hover:not(:disabled) {
    background: var(--color-danger-light);
}

.notif-panel__danger:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---------- Tabs ---------- */

.notif-tabs {
    display: flex;
    gap: var(--spacing-5);
    padding: 0 var(--spacing-6);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: thin;
}

.notif-tab {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 14px 0;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.notif-tab:hover {
    color: var(--color-text-primary);
}

.notif-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: var(--font-semibold);
}

.notif-tab__count {
    padding: 1px 7px;
    border-radius: var(--radius-full);
    background: var(--color-bg-input);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}

.notif-tab.is-active .notif-tab__count {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* ---------- Stream + timeline ---------- */

.notif-panel__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 68px;
    gap: var(--spacing-4);
    padding: var(--spacing-6);
}

.notif-panel__body--prefs {
    display: block;
}

.notif-panel__stream {
    min-width: 0;
}

.notif-group + .notif-group {
    margin-top: var(--spacing-6);
}

.notif-group__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.notif-group__label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
}

.notif-group__count {
    padding: 1px 7px;
    border-radius: var(--radius-full);
    background: var(--color-bg-input);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}

/* ---------- Cards ---------- */

.notif-card {
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-3);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    background: var(--color-primary-light);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.notif-card:hover {
    border-color: var(--color-primary);
}

/* Priority drives the accent. Read notifications lose the tint but keep the
   stripe, so the eye can still sort urgent from routine at a glance. */
.notif-card--urgent { border-left-color: var(--color-danger); background: var(--color-danger-light); }
.notif-card--high   { border-left-color: var(--color-warning); background: var(--color-warning-light); }
.notif-card--normal { border-left-color: var(--color-primary); background: var(--color-primary-light); }
.notif-card--low    { border-left-color: var(--color-info); background: var(--color-info-light); }

.notif-card.is-read {
    background: transparent;
    border-left-color: var(--color-border);
}

.notif-card.is-read .notif-card__title {
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
}

.notif-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-4);
}

.notif-card__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
}

.notif-card__dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-primary);
}

.notif-card__time {
    flex-shrink: 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.notif-card__message {
    margin: 6px 0 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

.notif-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-3);
    margin-top: var(--spacing-3);
}

.notif-card__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-decoration: none;
}

.notif-card__link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* Card actions are real controls, not text.
 *
 * These were bare buttons - no border, no background, 12px of muted grey,
 * 33x13px on screen. The browser reported them visible and they were, in the
 * sense that light hits them; nobody could tell they were buttons, and at 13px
 * inside an interface running at 85% zoom nobody could reliably tap one either.
 * An agent reported the Notification Center had "no Delete button" while the
 * button was right there, which is the whole story.
 *
 * So: an icon to be recognised by, a surface to be seen against, and a touch
 * target sized for a finger further down. */
.notif-card__act {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.notif-card__act:hover {
    background: var(--color-bg-card-hover);
    color: var(--color-text-primary);
    border-color: var(--color-text-muted);
}

.notif-card__act--danger:hover {
    background: var(--color-danger-light);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.notif-card__act svg { flex-shrink: 0; }

/* ---------- Date timeline ---------- */

.notif-timeline {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: sticky;
    top: calc(var(--header-height) + 16px);
    padding-left: var(--spacing-3);
    border-left: 1px solid var(--color-border);
}

.notif-timeline__month {
    padding: var(--spacing-3) 0 var(--spacing-2);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.notif-timeline__day {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    padding: 3px 6px;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.notif-timeline__day:hover {
    background: var(--color-bg-card-hover);
    color: var(--color-text-primary);
}

.notif-timeline__day.is-today {
    background: var(--color-bg-input);
    color: var(--color-text-primary);
    font-weight: var(--font-semibold);
}

.notif-timeline__dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-border);
}

.notif-timeline__day:hover .notif-timeline__dot,
.notif-timeline__day.is-today .notif-timeline__dot {
    background: var(--color-primary);
}

/* ---------- Preferences ---------- */

.notif-prefs__intro {
    margin: 0 0 var(--spacing-5);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

.notif-prefs__intro strong { color: var(--color-text-primary); }

.notif-prefs__notice {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-5);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    background: var(--color-warning-light);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.notif-prefs__notice strong {
    display: block;
    color: var(--color-text-primary);
}

.notif-prefs__notice-icon {
    display: flex;
    flex-shrink: 0;
    color: var(--color-warning);
}

.notif-prefs__notice .btn {
    flex-shrink: 0;
    margin-left: auto;
}

.notif-prefs__table {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.notif-prefs__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 90px 90px;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
}

.notif-prefs__row + .notif-prefs__row {
    border-top: 1px solid var(--color-border);
}

.notif-prefs__row:not(.notif-prefs__row--head):hover {
    background: var(--color-bg-card-hover);
}

.notif-prefs__row--head {
    background: var(--color-bg-input);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.notif-prefs__cell {
    display: flex;
    justify-content: center;
}

.notif-prefs__row--head .notif-prefs__cell {
    justify-content: center;
}

.notif-prefs__name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.notif-prefs__desc {
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.notif-prefs__loading {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

/* Toggle switch. Settings.js injects its own copy for the settings page; this
   is the shared one, so any page can use .toggle-switch without carrying CSS. */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    transition: var(--transition-normal);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background: var(--color-text-muted);
    border-radius: 50%;
    transition: var(--transition-normal);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
    background: #fff;
}

/* ============================================================
   META ADS ATTRIBUTION
   Campaign above, ad set and ad beneath — one column that
   answers "which ad brought this person" without a click.
   ============================================================ */

.lead-attr {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 260px;
}

.lead-attr__campaign {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-attr__sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* An unresolved click: the id is all Meta gave us, so it is shown as data
   rather than dressed up as a name. */
.lead-attr__id {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.qv-adid {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-xs);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-input);
    color: var(--color-text-secondary);
    user-select: all;
}

/* ============================================================
   LEAD QUALIFICATION SCORE (1-5)
   Colour carries the same message as the count, so the scale
   reads at a glance in a long list without counting pips.
   ============================================================ */

.lead-score {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.lead-score b {
    margin-left: 5px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.lead-score__pip {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-border);
}

.lead-score__pip.is-on { background: var(--color-text-muted); }

.lead-score--1 .lead-score__pip.is-on { background: var(--color-danger); }
.lead-score--2 .lead-score__pip.is-on { background: var(--color-warning); }
.lead-score--3 .lead-score__pip.is-on { background: var(--color-warning); }
.lead-score--4 .lead-score__pip.is-on { background: var(--color-success); }
.lead-score--5 .lead-score__pip.is-on { background: var(--color-success); }

.lead-score--5 b { color: var(--color-success); }
.lead-score--1 b { color: var(--color-danger); }

.lead-score--none {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Skeleton bar used by the notification center placeholders. */
.notif-center-page .skeleton-line {
    height: 16px;
    border-radius: var(--radius-sm);
}

/* Finger-sized targets wherever there is no mouse.
 *
 * 44px is the usual floor, but this app runs at 85% interface zoom, so a
 * 44px rule lands at ~37 physical pixels. 50px is what actually reaches the
 * floor once the zoom has taken its cut - the same arithmetic the rest of the
 * mobile work has to do. Keyed on pointer, not width: a tablet in landscape
 * is wide and still has no mouse. */
@media (pointer: coarse) {
    .notif-card__act {
        min-height: 50px;
        padding: 0 16px;
        font-size: var(--text-sm);
    }

    .notif-card__link {
        min-height: 50px;
        padding: 0 2px;
        font-size: var(--text-sm);
    }

    .notif-rail__item {
        min-height: 48px;
    }

    .notif-tab {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
    .notif-panel__body {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The timeline is a shortcut, not the only way to reach a date. Below this
       width the stream needs the room more than the shortcut does. */
    .notif-timeline {
        display: none;
    }
}

@media (max-width: 960px) {
    .notif-center {
        grid-template-columns: minmax(0, 1fr);
    }

    .notif-center__rail {
        position: static;
    }

    .notif-rail__list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .notif-rail__item {
        width: auto;
    }
}

@media (max-width: 640px) {
    .notif-panel__head,
    .notif-tabs,
    .notif-panel__body {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }

    .notif-panel__title h2 {
        font-size: var(--text-xl);
    }

    /* Three 90px switch columns plus a label do not fit a phone; the label
       stacks above its row of switches instead of being squeezed to nothing. */
    .notif-prefs__row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: var(--spacing-3);
    }

    .notif-prefs__label {
        grid-column: 1 / -1;
    }

    .notif-prefs__row--head {
        display: none;
    }

    .notif-prefs__cell {
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .notif-prefs__cell::before {
        content: attr(data-label);
        font-size: var(--text-xs);
        font-weight: var(--font-semibold);
        color: var(--color-text-muted);
    }
}