/* ============================================================================
   DESKTOP V2 — content-area redesign for the admin portal (≥1025px only).

   Rules of this file:
   - Every rule that changes how something looks lives inside
     @media (min-width: 1025px). Phones (≤768px) and tablets (769–1024px)
     render exactly as before.
   - .dv2-only   → markup added for the desktop design; never shown below 1025px.
   - .dv2-hide   → original markup the desktop design replaces; hidden ≥1025px
                   only, so mobile/tablet keep using it.
   - Loaded last in admin.html so it wins over page and component stylesheets
     at equal specificity. The sidebar is not touched here.
   ============================================================================ */

@media (max-width: 1024px) {
    .dv2-only { display: none !important; }
}

@media (min-width: 1025px) {

/* ---------------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------------- */
:root {
    --dv-bg: #f4f6fa;
    --dv-surface: #ffffff;
    --dv-subtle: #f8f9fc;
    --dv-border: #e4e8f0;
    --dv-control: #dfe3ec;
    --dv-hair: #eef0f5;
    --dv-ink: #14182b;
    --dv-ink-2: #4a5168;
    --dv-muted: #5f6680;
    --dv-faint: #9aa1b5;
    --dv-primary: #3d6ad6;
    --dv-primary-hover: #2f58bd;
    --dv-primary-ink: #2f5bc4;
    --dv-primary-soft: #eef3fd;
    --dv-seg: #f0f2f7;
    --dv-dark: #14182b;
    --dv-on-dark-muted: #c7cbd8;
    --dv-green: #17663f;   --dv-green-soft: #e8f6ef;  --dv-green-mark: #1f9e5b;
    --dv-amber: #8a4b05;   --dv-amber-soft: #fef3c7;  --dv-amber-mark: #d97706;
    --dv-red: #a3271e;     --dv-red-soft: #fdf1f0;    --dv-red-mark: #b4232c;  --dv-red-line: #f3c9c4;
    --dv-pink: #9d174d;    --dv-pink-soft: #fce7f3;
    --dv-purple: #6b3aa0;  --dv-purple-soft: #f3ebfb;
    --dv-teal: #13675a;    --dv-teal-soft: #e3f4f0;
    --dv-orange: #8a4b05;  --dv-orange-soft: #fdf0e2;
    --dv-radius: 14px;
    --dv-radius-control: 9px;
    --dv-shadow: 0 1px 2px rgba(20, 24, 43, 0.04);
    --dv-shadow-float: 0 10px 30px rgba(20, 24, 43, 0.25);
    /* Sequential occupancy ramp (light → dark, one hue) */
    --dv-seq-0: #eef3fd; --dv-seq-1: #c9d8f7; --dv-seq-2: #8eaeee; --dv-seq-3: #4f7ade; --dv-seq-4: #2a4fa8;
}
[data-theme="dark"] {
    --dv-bg: #111827;
    --dv-surface: #1f2937;
    --dv-subtle: #1a2333;
    --dv-border: #374151;
    --dv-control: #4b5563;
    --dv-hair: #2d3748;
    --dv-ink: #f3f4f6;
    --dv-ink-2: #d1d5db;
    --dv-muted: #9ca3af;
    --dv-faint: #6b7280;
    --dv-primary: #4f7ade;
    --dv-primary-hover: #5f88e6;
    --dv-primary-ink: #93b4f5;
    --dv-primary-soft: #1e2b47;
    --dv-seg: #263244;
    --dv-dark: #0b1020;
    --dv-green: #6ee7b7;   --dv-green-soft: rgba(16, 185, 129, 0.16);
    --dv-amber: #fcd34d;   --dv-amber-soft: rgba(245, 158, 11, 0.16);
    --dv-red: #fca5a5;     --dv-red-soft: rgba(239, 68, 68, 0.14);   --dv-red-line: rgba(239, 68, 68, 0.4);
    --dv-pink: #f9a8d4;    --dv-pink-soft: rgba(236, 72, 153, 0.16);
    --dv-purple: #d8b4fe;  --dv-purple-soft: rgba(168, 85, 247, 0.16);
    --dv-teal: #5eead4;    --dv-teal-soft: rgba(20, 184, 166, 0.16);
    --dv-orange: #fdba74;  --dv-orange-soft: rgba(249, 115, 22, 0.16);
    --dv-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --dv-seq-0: #1e2b47; --dv-seq-1: #253a66; --dv-seq-2: #33569a; --dv-seq-3: #4f7ade; --dv-seq-4: #8eaeee;
}

body { background: var(--dv-bg); }

/* Original markup replaced by the desktop design */
.dv2-hide { display: none !important; }
/* The HTML hidden attribute always wins inside the redesigned blocks */
[class*="dv-"][hidden],
.dv2-only [hidden],
.dv-page [hidden],
.dv2-only[hidden],
.dv-floatbar[hidden],
.dv-pop[hidden] { display: none !important; }

/* ===========================================================================
   GLOBAL LAYER — restyles the shared components every admin page uses
   =========================================================================== */

/* Page header card → plain header on the page background */
.page-section > .modern-content-card.tzr-toolbar {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 4px 0 0;
    margin-bottom: 14px;
}
.tzr-toolbar-top { align-items: flex-end; margin-bottom: 14px; }
/* Many pages set margin-bottom:0 inline on the title row; keep the gap when filters follow */
.tzr-toolbar-top:has(+ .tzr-toolbar-filters) { margin-bottom: 14px !important; }
.tzr-toolbar-title { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; }
.tzr-toolbar-title .tzr-subtitle { flex-basis: 100%; }
/* Small inline helpers next to the title, e.g. the "(?)" primer button */
.tzr-toolbar-title > :is(button, a):not(.btn) {
    min-height: 0 !important; min-width: 0 !important; height: auto; padding: 2px 4px !important;
    margin: 0 !important; line-height: 1.2; align-self: center;
}
.tzr-toolbar-title h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--dv-ink);
    line-height: 1.2;
}
.tzr-toolbar-title .tzr-subtitle { font-size: 14px; color: var(--dv-muted); }
.tzr-toolbar-filters { gap: 8px; }
.tzr-toolbar-filters select,
.tzr-toolbar-filters input[type="date"],
.tzr-toolbar-filters input[type="number"],
.tzr-toolbar-filters input[type="text"]:not(.search-input),
.tzr-toolbar-filters .search-input {
    min-height: 36px;
    height: 36px;
    font-size: 13px;
    border: 1px solid var(--dv-control);
    border-radius: var(--dv-radius-control);
    background-color: var(--dv-surface);
    color: var(--dv-ink);
}
.tzr-toolbar-filters .tzr-icon-btn,
.tzr-toolbar-filters .bulk-actions-toggle { width: 36px; height: 36px; min-height: 36px; }

/* Cards */
.modern-content-card,
.content-section,
.stat-card,
.modern-chart-card,
.modern-activity-card,
.modern-stat-card,
.modern-quick-actions,
.modern-filter-bar,
.modern-table-container {
    border-radius: var(--dv-radius);
    border: 1px solid var(--dv-border);
    box-shadow: var(--dv-shadow);
}
.content-section { margin-bottom: 14px; }
.section-header {
    background: transparent;
    padding: 18px 22px;
    border-bottom: 1px solid var(--dv-hair);
}
.section-title,
.modern-section-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--dv-ink); }

/* Stat cards: calm tinted icon, no rainbow top bar */
.stat-card { min-height: 0; padding: 18px 20px; }
.stat-card::before,
.modern-stat-card::before { display: none; }
.stat-card:hover,
.modern-stat-card:hover { box-shadow: var(--dv-shadow); }
.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--dv-primary-soft) !important;
    color: var(--dv-primary) !important;
    box-shadow: none;
    font-size: 1.1rem;
}
.stat-card:hover .stat-icon { transform: none; box-shadow: none; }
.stat-icon svg { width: 20px; height: 20px; }
.stat-value { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--dv-ink); }
.stat-label { color: var(--dv-muted); }
.modern-stat-card { padding: 20px; }
.stat-icon-modern { width: 40px; height: 40px; background: var(--dv-primary-soft) !important; color: var(--dv-primary) !important; }

/* Buttons: flat, one height family (36px), no lift-on-hover */
.btn {
    min-height: 36px;
    height: auto;
    padding: 0 14px;
    border-radius: var(--dv-radius-control);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 34px;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: none; }
.btn-primary,
.btn-primary:hover,
.btn-success,
.btn-danger,
.btn-warning,
.btn-secondary { box-shadow: none !important; transform: none !important; }
.btn-primary { background: var(--dv-primary); border: 1px solid var(--dv-primary); color: #ffffff; }
.btn-primary:hover { background: var(--dv-primary-hover); border-color: var(--dv-primary-hover); }
.btn-secondary { background: var(--dv-surface); border: 1px solid var(--dv-control); color: var(--dv-ink); }
.btn-secondary:hover { background: var(--dv-subtle); border-color: var(--dv-control); color: var(--dv-ink); }
.btn-success { background: #17804a; border: 1px solid #17804a; color: #ffffff; }
.btn-success:hover { background: #126c3e; border-color: #126c3e; }
.btn-danger { background: var(--dv-red-mark); border: 1px solid var(--dv-red-mark); color: #ffffff; }
.btn-danger:hover { background: #971c24; border-color: #971c24; }
.btn-warning { background: var(--dv-amber-mark); border: 1px solid var(--dv-amber-mark); color: #1a1a1a; }
.btn-sm { min-height: 30px; line-height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.btn-lg { min-height: 40px; line-height: 38px; padding: 0 16px; font-size: 14px; }
/* Gradient overrides some pages set inline on secondary/export buttons */
.tzr-toolbar-filters .btn.tzr-icon-btn[style*="gradient"] {
    background: var(--dv-surface) !important;
    border: 1px solid var(--dv-control) !important;
    color: var(--dv-ink) !important;
}

/* Desktop FAB: flat brand blue */
.tzr-fab {
    background: var(--dv-primary) !important;
    border: 0 !important;
    box-shadow: 0 8px 20px rgba(61, 106, 214, 0.35) !important;
}

/* Forms */
.form-group label,
.form-label { font-size: 13px; font-weight: 500; color: var(--dv-ink); margin-bottom: 6px; }
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]),
.form-group select,
.form-control,
.form-input {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid var(--dv-control);
    border-radius: var(--dv-radius-control);
    background-color: var(--dv-surface);
    color: var(--dv-ink);
    box-sizing: border-box;
}
.form-group textarea { padding: 8px 12px; font-size: 14px; border: 1px solid var(--dv-control); border-radius: var(--dv-radius-control); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-control:focus,
.form-input:focus {
    border-color: var(--dv-primary);
    box-shadow: 0 0 0 3px rgba(61, 106, 214, 0.15);
    transform: none;
}
.form-group small { font-size: 12px; color: var(--dv-muted); }

/* Toggle switches: compact, brand blue when on */
.toggle-switch { width: 40px; height: 24px; }
.toggle-slider { background-color: #cfd5e1; border-radius: 999px; }
.toggle-slider:before { width: 20px; height: 20px; left: 2px; bottom: 2px; box-shadow: 0 1px 2px rgba(20, 24, 43, 0.25); }
.toggle-switch input:checked + .toggle-slider { background-color: var(--dv-primary) !important; }
.toggle-switch input:checked + .toggle-slider:hover { background-color: var(--dv-primary-hover); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(16px); }
.toggle-switch input:focus-visible + .toggle-slider { box-shadow: 0 0 0 3px rgba(61, 106, 214, 0.25); }
[data-theme="dark"] .toggle-slider { background-color: #4b5563; }

/* Settings toggle rows (.notification-item): hairline rows, not grey boxes */
.notification-settings { gap: 0; padding: 6px 22px 10px; }
.notification-settings .notification-item {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--dv-hair);
    border-radius: 0;
    padding: 14px 0;
}
.notification-settings .notification-item:first-child { border-top: 0; }
.notification-settings .notification-content h4 { font-size: 14px; font-weight: 600; color: var(--dv-ink); }
.notification-settings .notification-content p { font-size: 12.5px; color: var(--dv-muted); }
.upgrade-badge {
    background: var(--dv-amber-soft) !important;
    color: var(--dv-amber) !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* Tables */
.data-table th,
[data-theme="dark"] .data-table th {
    background: var(--dv-surface);
    font-size: 12px;
    font-weight: 600;
    color: var(--dv-muted);
    border-bottom: 1px solid var(--dv-border);
    padding: 10px 12px;
}
.data-table td {
    font-size: 13px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--dv-hair);
}
.data-table tr:hover { background: var(--dv-subtle); }
.status-badge { border-radius: 999px; font-size: 12px; font-weight: 600; padding: 3px 9px; }

/* Pagination */
.pagination-btn {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--dv-control);
    border-radius: 8px;
    font-weight: 500;
    background: var(--dv-surface);
}
.pagination-btn:hover:not(.disabled):not([disabled]) { transform: none; box-shadow: none; background: var(--dv-subtle); }

/* Tabs: dark pill for the active tab */
.tab-button {
    border-radius: 8px;
    border-bottom: 0 !important;
    font-size: 13px;
    font-weight: 500;
    color: var(--dv-ink-2);
    padding: 7px 12px;
}
.tab-button.active { background: var(--dv-dark); color: #ffffff; }
[data-theme="dark"] .tab-button.active { background: #f3f4f6; color: #111827; }

/* Service cards (Tours page) and Today's Bookings summary boxes: flat */
.tour-card { border-radius: var(--dv-radius); border: 1px solid var(--dv-border); box-shadow: var(--dv-shadow); }
.tour-card::before { display: none; }
.tour-card:hover { box-shadow: var(--dv-shadow); }
#todays-bookings .todays-bookings-header { background: transparent; box-shadow: none; padding: 4px 0 0; }
#todays-bookings .stat-box,
#todays-bookings .stat-box.stat-success,
#todays-bookings .stat-box.stat-warning {
    background: var(--dv-surface); color: var(--dv-ink); border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius); box-shadow: var(--dv-shadow); padding: 18px 20px;
}
#todays-bookings .stat-box .stat-icon { background: var(--dv-primary-soft) !important; font-size: 20px; }
#todays-bookings .stat-box .stat-label { color: var(--dv-muted); opacity: 1; font-size: 13px; }
#todays-bookings .stat-box .stat-value { font-size: 24px; }

/* Modals: rounder, flatter */
.modal-content { border-radius: var(--dv-radius); }

/* ===========================================================================
   DESIGN COMPONENTS — used by the redesigned pages' desktop markup
   =========================================================================== */
.dv-page { display: flex; flex-direction: column; gap: 16px; color: var(--dv-ink); font-variant-numeric: normal; }
.dv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 4px 0 4px; }
.dv-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dv-eyebrow { font-size: 13px; font-weight: 500; color: var(--dv-muted); }
.dv-h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--dv-ink); }
.dv-sub { font-size: 14px; color: var(--dv-muted); }
.dv-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.dv-card {
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius);
    box-shadow: var(--dv-shadow);
    padding: 20px;
    box-sizing: border-box;
    min-width: 0;
}
.dv-card--flush { padding: 0; overflow: hidden; }
.dv-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dv-h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--dv-ink); }
.dv-muted { color: var(--dv-muted); }
.dv-help { font-size: 12px; color: var(--dv-muted); }
.dv-num { font-variant-numeric: tabular-nums; }
.dv-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.dv-link { color: var(--dv-primary-ink); font-size: 13px; font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.dv-link:hover { text-decoration: underline; }
.dv-empty { padding: 28px 12px; text-align: center; color: var(--dv-muted); font-size: 13px; }

.dv-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.dv-s4 { grid-column: span 4; } .dv-s5 { grid-column: span 5; } .dv-s7 { grid-column: span 7; } .dv-s8 { grid-column: span 8; } .dv-s12 { grid-column: span 12; }
@media (max-width: 1280px) {
    .dv-s4, .dv-s5, .dv-s7, .dv-s8 { grid-column: span 12; }
}

/* Buttons */
.dv-btn {
    height: 36px;
    min-height: 36px;
    min-width: 0;
    padding: 0 12px;
    border-radius: var(--dv-radius-control);
    border: 1px solid var(--dv-control);
    background: var(--dv-surface);
    color: var(--dv-ink);
    font: 500 13px/1 Inter, 'Segoe UI', sans-serif; font-family: inherit;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    box-sizing: border-box;
}
.dv-btn:hover { background: var(--dv-subtle); color: var(--dv-ink); text-decoration: none; }
.dv-btn svg { flex: none; }
.dv-btn--primary { background: var(--dv-primary); border-color: var(--dv-primary); color: #ffffff; }
.dv-btn--primary:hover { background: var(--dv-primary-hover); border-color: var(--dv-primary-hover); color: #ffffff; }
.dv-btn--lg { height: 40px; min-height: 40px; padding: 0 14px; font-size: 14px; }
.dv-btn--sm { height: 30px; min-height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.dv-btn--icon { width: 36px; padding: 0; }
.dv-btn--icon.dv-btn--lg { width: 40px; }
.dv-btn--ghost { border-color: transparent; background: transparent; }
.dv-btn--dashed { border-style: dashed; color: var(--dv-ink-2); }
.dv-btn--danger-soft { color: var(--dv-red); border-color: var(--dv-red-line); background: var(--dv-red-soft); }
.dv-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Segmented control */
.dv-seg { display: inline-flex; background: var(--dv-seg); border-radius: 9px; padding: 3px; gap: 2px; }
.dv-seg > button,
.dv-seg > a {
    border: 0;
    background: transparent;
    height: 28px;
    min-height: 28px;
    min-width: 0;
    padding: 0 11px;
    border-radius: 7px;
    font: 500 12.5px/1 Inter, 'Segoe UI', sans-serif; font-family: inherit;
    font-family: inherit;
    color: var(--dv-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    white-space: nowrap;
}
.dv-seg > .is-on { background: var(--dv-surface); color: var(--dv-ink); box-shadow: 0 1px 2px rgba(20, 24, 43, 0.12); }

/* Chips */
.dv-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--dv-seg);
    color: var(--dv-ink-2);
}
.dv-chip--blue   { background: var(--dv-primary-soft); color: var(--dv-primary-ink); }
.dv-chip--green  { background: var(--dv-green-soft);  color: var(--dv-green); }
.dv-chip--amber  { background: var(--dv-amber-soft);  color: var(--dv-amber); }
.dv-chip--red    { background: var(--dv-red-soft);    color: var(--dv-red); }
.dv-chip--pink   { background: var(--dv-pink-soft);   color: var(--dv-pink); }
.dv-chip--purple { background: var(--dv-purple-soft); color: var(--dv-purple); }
.dv-chip--orange { background: var(--dv-orange-soft); color: var(--dv-orange); }
.dv-chip--solid  { background: var(--dv-primary); color: #ffffff; }
.dv-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }

/* Avatars */
.dv-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex: none;
    background: var(--dv-primary-soft);
    color: var(--dv-primary-ink);
}
.dv-av--0 { background: var(--dv-primary-soft); color: var(--dv-primary-ink); }
.dv-av--1 { background: var(--dv-teal-soft); color: var(--dv-teal); }
.dv-av--2 { background: var(--dv-purple-soft); color: var(--dv-purple); }
.dv-av--3 { background: var(--dv-orange-soft); color: var(--dv-orange); }
.dv-av--4 { background: var(--dv-green-soft); color: var(--dv-green); }

/* Progress bars / meters */
.dv-bar { height: 6px; border-radius: 3px; background: var(--dv-hair); overflow: hidden; }
.dv-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--dv-primary); }
.dv-bar--8 { height: 8px; border-radius: 4px; }
.dv-meter { height: 3px; border-radius: 2px; background: var(--dv-hair); overflow: hidden; display: block; }
.dv-meter > span { display: block; height: 100%; }
.dv-fill-open { background: var(--dv-primary) !important; }
.dv-fill-warn { background: var(--dv-amber-mark) !important; }
.dv-fill-full { background: var(--dv-red-mark) !important; }

/* Icon tile */
.dv-ic {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: var(--dv-primary-soft);
    color: var(--dv-primary-ink);
}
.dv-ic--red { background: var(--dv-red-soft); color: var(--dv-red); }
.dv-ic--amber { background: var(--dv-amber-soft); color: var(--dv-amber); }
.dv-ic--green { background: var(--dv-green-soft); color: var(--dv-green); }
.dv-ic--purple { background: var(--dv-purple-soft); color: var(--dv-purple); }
.dv-ic--orange { background: var(--dv-orange-soft); color: var(--dv-orange); }
.dv-ic--teal { background: var(--dv-teal-soft); color: var(--dv-teal); }
.dv-ic--gray { background: var(--dv-seg); color: var(--dv-muted); }

/* Filter chips (toolbar) */
.dv-fchip {
    height: 36px;
    min-height: 36px;
    min-width: 0;
    padding: 0 12px;
    border-radius: var(--dv-radius-control);
    border: 1px solid var(--dv-control);
    background: var(--dv-surface);
    font: 500 13px/1 Inter, 'Segoe UI', sans-serif; font-family: inherit;
    font-family: inherit;
    color: var(--dv-ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}
.dv-fchip b { font-weight: 600; color: var(--dv-primary-ink); }
.dv-fchip.is-set { background: var(--dv-primary-soft); border-color: #c9d8f7; color: var(--dv-primary-ink); }
[data-theme="dark"] .dv-fchip.is-set { border-color: #33569a; }
.dv-fchip select {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    min-height: 0;
    height: 100%;
}

/* Underline tabs (saved views) */
.dv-tabs { display: flex; flex-wrap: wrap; gap: 22px; border-bottom: 1px solid var(--dv-border); }
.dv-tab {
    height: 40px;
    min-height: 40px;
    min-width: 0;
    padding: 0 2px;
    border: 0;
    background: transparent;
    font: 500 14px/1 Inter, 'Segoe UI', sans-serif; font-family: inherit;
    font-family: inherit;
    color: var(--dv-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.dv-tab.is-on { color: var(--dv-ink); font-weight: 600; border-bottom-color: var(--dv-primary); }
.dv-cnt { font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--dv-seg); color: var(--dv-ink-2); }
.dv-cnt--pink { background: var(--dv-pink-soft); color: var(--dv-pink); }
.dv-cnt--amber { background: var(--dv-amber-soft); color: var(--dv-amber); }

/* Anchor pills (in-page section jump) */
.dv-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.dv-pill {
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dv-ink-2);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    background: transparent;
    font-family: inherit;
    min-height: 32px;
}
.dv-pill:hover { background: var(--dv-seg); color: var(--dv-ink); text-decoration: none; }
.dv-pill.is-on { background: var(--dv-dark); color: #ffffff; }
[data-theme="dark"] .dv-pill.is-on { background: #f3f4f6; color: #111827; }

/* Floating dark bar (bulk actions / unsaved changes) */
.dv-floatbar {
    position: fixed;
    left: calc(var(--sidebar-w) + 16px + (100vw - var(--sidebar-w) - 16px) / 2);
    transform: translateX(-50%);
    bottom: 24px;
    z-index: 950;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 6px 6px 16px;
    border-radius: 12px;
    background: var(--dv-dark);
    color: #ffffff;
    box-shadow: var(--dv-shadow-float);
    font-size: 13px;
}
.dv-floatbar[hidden] { display: none; }
.dv-floatbar > button {
    height: 34px;
    min-height: 34px;
    min-width: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #ffffff;
    font: 500 13px/1 Inter, 'Segoe UI', sans-serif; font-family: inherit;
    font-family: inherit;
    cursor: pointer;
}
.dv-floatbar > button:hover { background: rgba(255, 255, 255, 0.1); }
.dv-floatbar .dv-floatbar-danger { color: #ffb4ad; }
.dv-floatbar .dv-floatbar-primary { background: var(--dv-primary); font-weight: 600; }
.dv-floatbar .dv-floatbar-primary:hover { background: var(--dv-primary-hover); }
.dv-floatbar .dv-floatbar-x { width: 34px; padding: 0; background: rgba(255, 255, 255, 0.12); display: inline-flex; align-items: center; justify-content: center; }
.dv-floatbar-label { font-weight: 600; margin-right: 10px; white-space: nowrap; }
.dv-floatbar > button { white-space: nowrap; }
.dv-floatbar-label span { color: var(--dv-on-dark-muted); font-weight: 400; }

/* Two-column settings section (title + description | fields) */
.dv-sec { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; padding: 24px 26px; }
.dv-sec-h { margin: 0 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--dv-ink); }
.dv-sec-d { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dv-muted); }
@media (max-width: 1180px) {
    .dv-sec { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* Popover menu */
.dv-pop {
    position: absolute;
    z-index: 1000;
    min-width: 220px;
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(20, 24, 43, 0.16);
    padding: 6px;
}
.dv-pop[hidden] { display: none; }
.dv-pop-item {
    width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--dv-ink);
    font: 500 13px/1.2 Inter, 'Segoe UI', sans-serif; font-family: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
}
.dv-pop-item:hover { background: var(--dv-subtle); color: var(--dv-ink); text-decoration: none; }
.dv-pop-item .action-icon,
.dv-pop-item svg { width: 18px; height: 18px; flex: none; color: var(--dv-muted); }
.dv-pop-item .action-icon svg { width: 18px; height: 18px; }
.dv-pop-sep { height: 1px; background: var(--dv-hair); margin: 4px 2px; }

/* Delta text */
.dv-up { color: var(--dv-green); font-weight: 600; }
.dv-down { color: var(--dv-red); font-weight: 600; }
.dv-flat { color: var(--dv-muted); font-weight: 600; }


/* ===========================================================================
   DASHBOARD (#dashboard) — today-first bento
   =========================================================================== */
/* showSection sets display:block inline; switch to a flex column so the trial
   banner (which sits after the original header in the markup) shows first. */
#dashboard[style*="block"] { display: flex !important; flex-direction: column; }
#dashboard > #trialBanner { order: -1; margin-bottom: 14px; }
.dv-rel { position: relative; }
.dv-bell { position: relative; }
.dv-bell-dot {
    position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
    background: #d1453b; border: 2px solid var(--dv-surface);
}
.dv-pop--right { right: 0; left: auto !important; }
.dv-dash .dv-card { display: flex; flex-direction: column; gap: 14px; }
.dv-strong { font-weight: 500; }

/* Hero: today's numbers + live timeline */
.dv-dash > .dv-hero { padding: 0; gap: 0 !important; overflow: hidden; }
.dv-hero-stats { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 0.85fr)) minmax(0, 1.5fr); border-bottom: 1px solid var(--dv-hair); }
.dv-hs { display: flex; flex-direction: column; gap: 6px; padding: 16px 22px; border-left: 1px solid var(--dv-hair); min-width: 0; }
.dv-hs:first-child { border-left: 0; }
.dv-hs-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dv-hs-rev { display: flex; align-items: flex-end; gap: 14px; min-width: 0; overflow: hidden; }
.dv-ring-row { display: flex; align-items: center; gap: 10px; }
.dv-ring { width: 26px; height: 26px; flex: none; }
.dv-ring-row .dv-ring circle { stroke-width: 8; }
.dv-ring circle { fill: none; stroke: var(--dv-seg); stroke-width: 6; }
.dv-ring .dv-ring-val { stroke: var(--dv-primary); stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.dv-hero-num { font-size: 42px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--dv-ink); }
.dv-hero-num .stat-currency-unit { font-size: 0.5em; color: var(--dv-faint); font-weight: 600; }
.dv-hero-delta { font-size: 13px; display: inline-flex; gap: 6px; align-items: center; padding-bottom: 4px; white-space: nowrap; }
.dv-stat-num { font-size: 22px; font-weight: 700; color: var(--dv-ink); letter-spacing: -0.02em; }
.dv-stat-num small { font-size: 14px; font-weight: 500; color: var(--dv-muted); }
.dv-stat-num .dv-up { font-size: 12px; }
.dv-hero-day { padding: 16px 22px 18px; display: flex; flex-direction: column; gap: 10px; }
.dv-hero-foot { display: flex; flex-direction: column; gap: 8px; }
.dv-hero-foot .dv-nextup { margin-top: 0; }

/* Timeline */
.dv-tl { display: flex; flex-direction: column; gap: 6px; }
.dv-tl-area { position: relative; margin-top: 12px; }
.dv-tl-grid span { position: absolute; top: 0; bottom: 22px; width: 1px; background: var(--dv-hair); }
.dv-tl-past { position: absolute; left: 0; top: 0; border-radius: 8px 0 0 8px; background: rgba(20, 24, 43, 0.025); }
[data-theme="dark"] .dv-tl-past { background: rgba(255, 255, 255, 0.025); }
.dv-tl-lanes { position: relative; }
.dv-tl-block {
    position: absolute; height: 50px; min-height: 0; min-width: 0; margin: 0; padding: 7px 11px; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center; gap: 2px; text-align: left; overflow: hidden;
    border: 0; border-radius: 10px; font-family: inherit; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s;
    background: var(--dv-primary); color: #ffffff; box-shadow: 0 6px 16px -8px rgba(61, 106, 214, 0.7);
}
.dv-tl-block:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(61, 106, 214, 0.8); }
.dv-tl-block:focus-visible { outline: 2px solid var(--dv-primary); outline-offset: 2px; }
.dv-tl-t1, .dv-tl-t2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-tl-t1 { font-size: 13px; font-weight: 600; }
.dv-tl-t1 b { font-weight: 700; margin-right: 2px; }
.dv-tl-t2 { font-size: 12px; font-weight: 500; opacity: 0.85; }
.dv-tl-block--warn { background: var(--dv-red-soft); color: var(--dv-red); box-shadow: inset 0 0 0 1px var(--dv-red-line); }
.dv-tl-block--warn .dv-tl-t1 { color: var(--dv-ink); }
.dv-tl-block--warn .dv-tl-t2 { opacity: 1; font-weight: 600; }
.dv-tl-block--pending { background: var(--dv-pink-soft); color: var(--dv-pink); box-shadow: inset 0 0 0 1px currentColor; }
.dv-tl-block--pending .dv-tl-t1 { color: var(--dv-ink); }
.dv-tl-block--done { background: var(--dv-green-soft); color: var(--dv-green); box-shadow: inset 0 0 0 1px var(--dv-green-mark); }
.dv-tl-block--done .dv-tl-t1 { color: var(--dv-ink); }
.dv-tl-block--past { background: var(--dv-seg); color: var(--dv-ink-2); box-shadow: none; }
.dv-tl-block:is(.dv-tl-block--warn, .dv-tl-block--pending, .dv-tl-block--done, .dv-tl-block--past):hover { box-shadow: 0 8px 18px -12px rgba(20, 24, 43, 0.35); }
.dv-tl-trfrow { position: absolute; left: 0; right: 0; height: 14px; }
.dv-tl-trf { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 3px; transform: rotate(45deg); background: var(--dv-ink-2); }
.dv-tl-trf.is-open { background: var(--dv-red-mark); }
.dv-tl-now { position: absolute; top: -6px; width: 2px; margin-left: -1px; background: var(--dv-red-mark); border-radius: 2px; z-index: 2; pointer-events: none; }
.dv-tl-now span {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap;
    background: var(--dv-red-mark); color: #ffffff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.dv-tl-hours { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; }
.dv-tl-hours span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--dv-faint); font-variant-numeric: tabular-nums; }
.dv-tl-hours span:first-child { transform: none; }
.dv-tl-hours span.is-end { transform: translateX(-100%); }

/* Month so far + goal */
.dv-hs--goal { flex-direction: row; align-items: center; gap: 14px; position: relative; }
.dv-hs--goal:empty { display: none; }
.dv-ring--goal { width: 54px; height: 54px; }
.dv-goal-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dv-goal-num { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--dv-ink); white-space: nowrap; }
.dv-goal-num .stat-currency-unit { font-size: 0.55em; color: var(--dv-faint); font-weight: 600; }
.dv-goal-of { font-size: 13px; font-weight: 600; color: var(--dv-muted); letter-spacing: 0; }
.dv-goal-sub { font-size: 12px; color: var(--dv-green); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-goal-edit { font-size: 12px; align-self: flex-start; }
.dv-goal-pop { position: absolute; top: calc(100% - 6px); right: 12px; z-index: 30; width: 240px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.dv-goal-pop input { height: 36px; padding: 0 10px; border: 1px solid var(--dv-control); border-radius: var(--dv-radius-control); font: inherit; font-size: 14px; background: var(--dv-surface); color: var(--dv-ink); }
.dv-goal-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* Weather line in the timeline header */
.dv-day-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.dv-wx { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dv-muted); white-space: nowrap; }
.dv-wx[hidden] { display: none !important; }
.dv-wx-main { display: inline-flex; align-items: center; gap: 5px; color: var(--dv-ink); font-weight: 600; }
.dv-wx-main svg { color: var(--dv-amber-mark); }
.dv-wx-sep { color: var(--dv-faint); }
.dv-tl-wx {
    display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; padding: 0 6px; height: 17px; vertical-align: 1px;
    border-radius: 999px; background: var(--dv-amber-soft); color: var(--dv-amber); font-size: 11px; font-weight: 700; opacity: 1;
}
.dv-tl-block .dv-tl-t2 .dv-tl-wx { opacity: 1; }

/* Header search */
.dv-dsearch {
    position: relative; display: flex; align-items: center; gap: 8px; height: 40px; width: 260px; padding: 0 8px 0 12px; box-sizing: border-box;
    border: 1px solid var(--dv-control); border-radius: var(--dv-radius-control); background: var(--dv-surface); color: var(--dv-faint);
}
.dv-dsearch:focus-within { border-color: var(--dv-primary); box-shadow: 0 0 0 3px var(--dv-primary-soft); }
#dvdSearchWrap #dvdSearch { flex: 1; min-width: 0; width: auto !important; height: 100% !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0; background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; font: inherit; font-size: 13.5px; color: var(--dv-ink); }
.dv-dsearch input::-webkit-search-cancel-button { display: none; }
.dv-dsearch kbd { font: 600 11px/1 inherit; font-family: inherit; color: var(--dv-muted); background: var(--dv-seg); border-radius: 5px; padding: 3px 6px; }
.dv-dsearch-pop {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 380px; z-index: 40; padding: 6px;
    background: var(--dv-surface); border: 1px solid var(--dv-border); border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(20, 24, 43, 0.28);
}
.dv-dsearch-pop[hidden] { display: none; }
.dv-dsearch-item {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 0;
    padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--dv-ink); text-align: left; font: inherit; font-size: 13px; cursor: pointer;
}
.dv-dsearch-item.is-on, .dv-dsearch-item:hover { background: var(--dv-subtle); }
.dv-dsearch-ref { color: var(--dv-primary-ink); font-size: 11.5px; }
.dv-dsearch-main { display: flex; flex-direction: column; min-width: 0; }
.dv-dsearch-main > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-dsearch-main .dv-muted { font-size: 12px; }
.dv-dsearch-when { font-size: 12px; color: var(--dv-muted); white-space: nowrap; }
.dv-dsearch-empty { padding: 14px 10px; font-size: 13px; color: var(--dv-muted); }
.dv-head-actions { flex-wrap: nowrap; }
#dvdCustomBtn.is-on { background: var(--dv-primary-soft); border-color: var(--dv-primary); color: var(--dv-primary-ink); }

/* Customise panel */
.dv-custom { border-style: dashed !important; background: var(--dv-subtle) !important; }
.dv-custom[hidden] { display: none !important; }
.dv-custom-actions { display: flex; gap: 6px; }
.dv-custom-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dv-custom-row {
    display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px;
    background: var(--dv-surface); border: 1px solid var(--dv-border); cursor: grab;
}
.dv-custom-row.is-drag { opacity: 0.5; }
.dv-custom-row.is-over { border-color: var(--dv-primary); box-shadow: 0 0 0 3px var(--dv-primary-soft); }
.dv-custom-grip { color: var(--dv-faint); letter-spacing: -2px; font-weight: 700; }
.dv-custom-cards { display: flex; flex-wrap: wrap; gap: 6px 18px; flex: 1; }
.dv-custom-card { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--dv-ink); cursor: pointer; }
.dv-custom-card input { width: 16px; height: 16px; margin: 0; accent-color: var(--dv-primary); }
.dv-custom-move { display: flex; gap: 2px; }

/* "Needs you today": one list for attention items and suggestions */
.dv-todo { gap: 8px !important; }
.dv-todo[hidden] { display: none !important; }
.dv-todo-count { font-size: 12.5px; font-weight: 600; color: var(--dv-muted); }
.dv-todo-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dv-brief { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 20px 16px; border-left: 1px solid var(--dv-hair); }
.dv-brief:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.dv-brief:nth-child(3n) { padding-right: 0; }
.dv-brief:nth-child(n+4) { border-top: 1px solid var(--dv-hair); }
/* Column count follows the number of items: 1, 2 or 4 sit on one row; 3/5/6 use rows of 3 */
.dv-todo-list:has(> .dv-brief:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dv-todo-list:has(> .dv-brief:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dv-todo-list:has(> .dv-brief:only-child) { grid-template-columns: minmax(0, 1fr); }
.dv-todo-list:has(> .dv-brief:nth-child(4):last-child) > .dv-brief:nth-child(4) { border-left: 1px solid var(--dv-hair); border-top: 0; padding-left: 20px; padding-right: 0; }
.dv-todo-list:has(> .dv-brief:nth-child(4):last-child) > .dv-brief:nth-child(3) { padding-right: 20px; }
.dv-todo-list:has(> .dv-brief:nth-child(2):last-child) > .dv-brief:nth-child(2) { padding-right: 0; }
.dv-brief-k { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--dv-muted); }
.dv-brief-k > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-brief-k svg { width: 15px; height: 15px; flex: none; color: var(--dv-muted); }
.dv-brief--red .dv-brief-k svg { color: var(--dv-red-mark); }
.dv-brief--amber .dv-brief-k svg { color: var(--dv-amber-mark); }
.dv-brief--blue .dv-brief-k svg { color: var(--dv-primary); }
.dv-brief--green .dv-brief-k svg { color: var(--dv-green-mark); }
.dv-brief-row { display: flex; align-items: flex-end; gap: 14px; min-height: 34px; }
.dv-brief-m { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--dv-ink); white-space: nowrap; }
.dv-brief--red .dv-brief-m { color: var(--dv-red); }
.dv-brief--amber .dv-brief-m { color: var(--dv-amber); }
.dv-brief-c { font-size: 12.5px; color: var(--dv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-brief-a { align-self: flex-start; margin-top: 6px; font-size: 12.5px; min-height: 0 !important; min-width: 0 !important; height: auto !important; padding: 0 !important; text-align: left; }
/* Micro-visuals next to the number */
.dv-brief-viz { margin-bottom: 4px; }
.dv-brief-bar { flex: 1; max-width: 140px; height: 6px; border-radius: 3px; background: var(--dv-seg); overflow: hidden; margin-bottom: 6px; }
.dv-brief-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--dv-primary); }
.dv-brief-dots { display: flex; flex-wrap: wrap; gap: 4px; max-width: 140px; margin-bottom: 6px; }
.dv-brief-dots i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--dv-control); }
.dv-brief-cmp { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.dv-brief-cmp > span { width: 10px; border-radius: 2px 2px 1px 1px; }
.dv-brief-cmp .is-prev { background: var(--dv-seg); box-shadow: inset 0 0 0 1px var(--dv-border); }
.dv-brief-cmp .is-cur { background: var(--dv-green-mark); }
.dv-brief--amber .dv-brief-cmp .is-cur { background: var(--dv-amber-mark); }

/* "Updated N min ago" and one-line chart summaries */
.dv-updated { font-size: 12px; color: var(--dv-faint); white-space: nowrap; }
.dv-updated:empty { display: none; }
.dv-chart-note { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--dv-subtle); font-size: 13.5px; line-height: 1.45; color: var(--dv-ink-2); }
.dv-chart-note[hidden], .dv-chart-wrap[hidden], .dv-legend[hidden], .dv-ahead-bars[hidden] { display: none !important; }

/* Booked ahead */
.dv-ahead-body { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: end; }
.dv-ahead-body:has(.dv-ahead-bars[hidden]) { align-items: center; }
.dv-ahead-body:has(.dv-ahead-bars[hidden]) .dv-ahead-stats { padding-bottom: 0; }
.dv-ahead-stats { display: flex; flex-direction: column; gap: 14px; padding-bottom: 22px; }
.dv-ahead-stats > div { display: flex; flex-direction: column; gap: 2px; }
.dv-ahead-bars { min-width: 0; }
.dv-strip { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; height: 92px; align-items: end; border-bottom: 1px solid var(--dv-border); }
.dv-strip-col {
    display: flex; align-items: flex-end; height: 100%; min-height: 0; min-width: 0; padding: 0; border: 0; border-radius: 4px 4px 0 0;
    background: transparent; cursor: pointer;
}
.dv-strip-col:hover { background: var(--dv-primary-soft); }
.dv-strip-bar { display: block; width: 100%; border-radius: 3px 3px 1px 1px; background: var(--dv-primary); }
.dv-strip-bar.is-zero { height: 3px !important; background: var(--dv-seg); }
.dv-strip-axis { position: relative; height: 16px; margin-top: 6px; }
.dv-strip-axis span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--dv-muted); white-space: nowrap; }
.dv-strip-axis span:first-child { transform: translateX(-20%); }

/* Top services */
.dv-top-list { display: flex; flex-direction: column; gap: 12px; }
.dv-top-row { display: flex; flex-direction: column; gap: 4px; }
.dv-top-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.dv-top-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dv-top-rev { font-weight: 700; flex: none; }
.dv-top-bar { height: 6px; border-radius: 3px; background: var(--dv-seg); overflow: hidden; }
.dv-top-bar span { display: block; height: 100%; border-radius: 3px; background: var(--dv-primary); }

/* Lone card in a row spans it; hidden cards/rows disappear */
.dv-dash .dv-bento > .dv-solo { grid-column: span 12 !important; }
.dv-dash [data-block][hidden], .dv-dash .dv-rail[hidden], .dv-dash .dv-bento[hidden], .dv-dash > .dv-hero[hidden] { display: none !important; }

/* Live toast */
.dv-toast {
    position: fixed; right: 24px; bottom: 24px; z-index: 900; display: flex; align-items: center; gap: 12px; width: 380px; max-width: calc(100vw - 48px);
    padding: 12px 14px; border-radius: 12px; background: var(--dv-dark); color: #ffffff; box-shadow: 0 18px 40px -14px rgba(20, 24, 43, 0.5);
    animation: dvToastIn 0.25s ease-out;
}
.dv-toast[hidden] { display: none !important; }
@keyframes dvToastIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.dv-toast-ic { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(110, 231, 183, 0.16); color: #6ee7b7; }
.dv-toast-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.dv-toast-txt > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-toast-txt span { color: var(--dv-on-dark-muted); font-size: 12px; }
.dv-toast .dv-link { color: #9fbaff; margin-left: auto; flex: none; }
.dv-toast-x { width: 26px; height: 26px; min-height: 0; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--dv-on-dark-muted); font-size: 18px; cursor: pointer; flex: none; }
.dv-toast-x:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
@keyframes dvPulse { 0% { box-shadow: 0 0 0 0 rgba(31, 158, 91, 0.45); } 70% { box-shadow: 0 0 0 6px rgba(31, 158, 91, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 158, 91, 0); } }

/* Quieter card titles so numbers and the timeline lead */
.dv-dash .dv-card .dv-h2 { font-size: 14px; font-weight: 600; color: var(--dv-ink-2); letter-spacing: 0; }

/* Service colours: one hue per tour, used for its dot, timeline block,
   occupancy pills and top-services bar. Hues avoid the status colours
   (red, amber, pink, green). Light mode uses darker shades so
   white text on a filled block stays readable. */
.dv-dash {
    --dv-t0: #3d6ad6; --dv-t1: #0d7d73; --dv-t2: #6448c4; --dv-t3: #087ea4; --dv-t4: #95552d; --dv-t5: #66761a;
}
[data-theme="dark"] .dv-dash {
    --dv-t0: #7ea2ff; --dv-t1: #3fc9bb; --dv-t2: #a891ff; --dv-t3: #4cc8f0; --dv-t4: #e3a47c; --dv-t5: #b9cb5c;
}
.dv-tdot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--tc, var(--dv-primary)); }
.dv-tl-block--live { background: var(--tc, var(--dv-primary)); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--tc, var(--dv-primary)) 75%, transparent); }
.dv-tl-block--live:hover { box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--tc, var(--dv-primary)) 85%, transparent); }
[data-theme="dark"] .dv-tl-block--live { color: #0b1020; }
.dv-nextup-tour { display: inline-flex; align-items: center; }
.dv-occ-track td:first-child .dv-tdot { margin-right: 9px; }
.dv-occ-track .dv-cell--0 { background: color-mix(in srgb, var(--tc) 10%, var(--dv-surface)); color: var(--tc); }
.dv-occ-track .dv-cell--1 { background: color-mix(in srgb, var(--tc) 18%, var(--dv-surface)); color: var(--tc); }
.dv-occ-track .dv-cell--2 { background: color-mix(in srgb, var(--tc) 34%, var(--dv-surface)); color: var(--dv-ink); }
.dv-occ-track .dv-cell--3 { background: color-mix(in srgb, var(--tc) 70%, var(--dv-surface)); color: #ffffff; }
.dv-occ-track .dv-cell--4 { background: var(--tc); color: #ffffff; }
[data-theme="dark"] .dv-occ-track .dv-cell--3, [data-theme="dark"] .dv-occ-track .dv-cell--4 { color: #0b1020; }
.dv-occ .dv-ramp span:nth-child(1) { background: color-mix(in srgb, var(--dv-ink) 6%, transparent) !important; }
.dv-occ .dv-ramp span:nth-child(2) { background: color-mix(in srgb, var(--dv-ink) 14%, transparent) !important; }
.dv-occ .dv-ramp span:nth-child(3) { background: color-mix(in srgb, var(--dv-ink) 28%, transparent) !important; }
.dv-occ .dv-ramp span:nth-child(4) { background: color-mix(in srgb, var(--dv-ink) 50%, transparent) !important; }
.dv-occ .dv-ramp span:nth-child(5) { background: color-mix(in srgb, var(--dv-ink) 75%, transparent) !important; }
.dv-top-bar span { background: var(--tc, var(--dv-primary)); }
.dv-top-name { display: inline-flex; align-items: center; }

/* Occupancy: booked departures as number + fill bar, no boxes */
.dv-occ .dv-ramp { display: none !important; }
.dv-occ-track .dv-cell:not(.dv-cell--none):not(.dv-cell--empty) {
    flex-direction: column; justify-content: center; gap: 5px; height: auto; min-height: 40px; padding: 4px 10px;
    background: transparent !important; box-shadow: none !important; color: var(--dv-ink) !important; border-radius: 8px;
}
.dv-occ-track .dv-cell:not(.dv-cell--none):not(.dv-cell--empty):hover { background: var(--dv-subtle) !important; }
.dv-occ td.is-today .dv-cell:not(.dv-cell--none):not(.dv-cell--empty):hover { background: color-mix(in srgb, var(--dv-primary) 8%, transparent) !important; }
.dv-occ-track .dv-cell-num { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.dv-occ-track .dv-cell-slot { font-size: 12px; font-weight: 600; line-height: 1.35; }
.dv-occ-track .dv-cell-time { font-weight: 500; color: var(--dv-muted); opacity: 1; }
.dv-cell-meter { display: block; width: 100%; max-width: 72px; height: 4px; border-radius: 2px; background: var(--dv-seg); overflow: hidden; }
.dv-cell-meter i { display: block; height: 100%; border-radius: 2px; background: var(--tc, var(--dv-primary)); }
.dv-cell-meter.is-full i { background: var(--dv-red-mark); }
.dv-occ-track .dv-cell--multi { padding-top: 6px; padding-bottom: 6px; }
/* The track line runs behind the bar's row, not through the numbers */
.dv-occ-track td:not(:first-child)::before { top: 50%; }
.dv-occ-track .dv-cell:not(.dv-cell--none):not(.dv-cell--empty) { position: relative; z-index: 1; }
.dv-occ-track td:has(.dv-cell:not(.dv-cell--none):not(.dv-cell--empty))::before { background: transparent; }

/* Hero: a light brand tint behind today's revenue */
.dv-hs--rev { background: color-mix(in srgb, var(--dv-primary) 6%, transparent); }

/* Month ring: blue → green (75%+) → gold (goal reached) */
.dv-ring--green .dv-ring-val { stroke: var(--dv-green-mark); }
.dv-ring--gold .dv-ring-val { stroke: #d4a017; }

/* Colour where it carries meaning */
.dv-todo-count { display: inline-flex; align-items: center; gap: 8px; }
/* Highlight after clicking "N things need you" in the header */
@keyframes dvTodoFlash { 0%, 100% { box-shadow: none; } 15%, 60% { box-shadow: 0 0 0 3px var(--dv-primary-soft), 0 0 0 1px var(--dv-primary); } }
@keyframes dvCellFlash { 0%, 100% { background: transparent; } 15%, 60% { background: var(--dv-amber-soft); } }
@keyframes dvCellFlashRed { 0%, 100% { background: transparent; } 15%, 60% { background: var(--dv-red-soft); } }
.dv-todo.is-flash { animation: dvTodoFlash 2s ease-out; }
.dv-todo.is-flash .dv-brief--amber { animation: dvCellFlash 2s ease-out; border-radius: 10px; }
.dv-todo.is-flash .dv-brief--red { animation: dvCellFlashRed 2s ease-out; border-radius: 10px; }
.dv-todo-urgent { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--dv-red-soft); color: var(--dv-red); font-size: 12px; font-weight: 700; }
.dv-todo-total { font-size: 12.5px; color: var(--dv-muted); font-weight: 600; }
.dv-chart-note { background: var(--dv-primary-soft) !important; color: var(--dv-ink) !important; }

/* Flatter cards: hairline border, smaller corners, no shadow */
.dv-dash .dv-card { box-shadow: none !important; border-radius: 12px !important; }

/* Right column: attention + activity stacked */
.dv-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dv-rail > .dv-card { flex: none; }
/* Activity fills the rest so the column ends level with Performance */
.dv-rail > .dv-act { flex: 1 1 auto; }
.dv-transfers {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border-radius: 10px; background: var(--dv-subtle);
    border: 0; width: 100%; min-height: 0; font: 400 13px/1.3 Inter, 'Segoe UI', sans-serif; font-family: inherit; font-family: inherit;
    color: var(--dv-ink); cursor: pointer; text-align: left;
}
.dv-transfers:hover { background: var(--dv-seg); }
.dv-nextup {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 0; margin-top: 10px; padding: 10px 12px;
    border: 1px solid var(--dv-border); border-radius: 10px; background: var(--dv-surface); color: var(--dv-ink);
    font: 400 13px/1.3 inherit; font-family: inherit; text-align: left; cursor: pointer;
}
.dv-nextup:hover { background: var(--dv-subtle); border-color: var(--dv-control); }
.dv-nextup-label {
    flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--dv-primary-ink); background: var(--dv-primary-soft); border-radius: 999px; padding: 3px 8px;
}
.dv-nextup-tour { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dv-nextup-meta { color: var(--dv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.dv-nextup-cap { flex-shrink: 0; font-weight: 600; color: var(--dv-ink-2); }
.dv-nextup-go { flex-shrink: 0; color: var(--dv-faint); }
.dv-nextup[hidden] { display: none !important; }
.dv-transfers .dv-link { pointer-events: none; }

/* Performance */
.dv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--dv-hair); }
.dv-kpi {
    position: relative; padding: 2px 18px 14px; display: flex; flex-direction: column; gap: 4px; border: 0; border-left: 1px solid var(--dv-hair);
    background: none; text-align: left; font-family: inherit; color: var(--dv-ink); cursor: default; min-height: 0; min-width: 0;
}
.dv-kpi:first-child { border-left: 0; padding-left: 0; }
.dv-kpi.is-on::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--dv-primary); }
.dv-kpi.is-on:first-child::after { left: 0; }
.dv-kpi.is-on .dv-kpi-label { color: var(--dv-primary-ink); }
.dv-kpi-label { font-size: 12px; font-weight: 500; color: var(--dv-muted); }
.dv-kpi-val { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dv-kpi-val .stat-currency-unit { font-size: 0.5em; color: var(--dv-faint); font-weight: 600; }
.dv-kpi-d { font-size: 12px; }
.dv-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--dv-ink-2); align-items: center; }
.dv-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.dv-legend-unit { margin-left: auto; color: var(--dv-muted); }
.dv-sw-bar, .dv-sw-ghost { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dv-sw-bar { background: var(--dv-primary); }
.dv-sw-ghost { background: var(--dv-seg); box-shadow: inset 0 0 0 1px var(--dv-border); }
.dv-chart .dv-bar-cur { fill: var(--dv-primary); }
.dv-chart .dv-bar-zero { fill: var(--dv-seg); }
.dv-chart .dv-bar-prev { fill: var(--dv-seg); }
[data-theme="dark"] .dv-chart .dv-bar-prev { fill: #2c3a52; }
.dv-chart g.is-hover .dv-bar-cur { fill: var(--dv-primary-hover); }
.dv-chart g.is-hover .dv-bar-prev { fill: var(--dv-control); }
.dv-chart .dv-bar-hit { cursor: default; }
.dv-chart-wrap { position: relative; }
.dv-chart { width: 100%; height: auto; display: block; overflow: visible; }
.dv-chart text { font-family: inherit; font-size: 11px; fill: var(--dv-muted); }
.dv-chart .dv-grid { stroke: var(--dv-hair); stroke-width: 1; }
.dv-chart .dv-base { stroke: var(--dv-control); stroke-width: 1; }
.dv-chart .dv-line-cur { fill: none; stroke: var(--dv-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dv-chart .dv-line-prev { fill: none; stroke: var(--dv-faint); stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; }
.dv-chart .dv-area { fill: var(--dv-primary); opacity: 0.12; }
.dv-chart .dv-cross { stroke: var(--dv-ink); stroke-opacity: 0.25; stroke-width: 1; }
.dv-chart .dv-dotc { fill: var(--dv-primary); stroke: var(--dv-surface); stroke-width: 2; }
.dv-tip {
    position: absolute; pointer-events: none; background: var(--dv-dark); color: #ffffff;
    border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.35; white-space: nowrap;
    transform: translate(-50%, calc(-100% - 12px)); box-shadow: 0 6px 18px rgba(20, 24, 43, 0.25);
}
.dv-tip b { font-size: 14px; display: block; }
.dv-tip span { color: var(--dv-on-dark-muted); }
.dv-channels { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--dv-hair); padding-top: 14px; }
.dv-channels-bar { display: flex; gap: 2px; height: 10px; }
.dv-channels-bar > span { min-width: 3px; }
.dv-channels-bar > span:first-child { border-radius: 4px 0 0 4px; }
.dv-channels-bar > span:last-child { border-radius: 0 4px 4px 0; }
.dv-channels-bar > span:only-child { border-radius: 4px; }
.dv-channels-legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; color: var(--dv-ink-2); }
.dv-channels-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.dv-channels-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.dv-channels-legend strong { color: var(--dv-ink); font-variant-numeric: tabular-nums; }
.dv-cat-0 { background: #3d6ad6; } .dv-cat-1 { background: #e08a2c; } .dv-cat-2 { background: #1f9e8a; } .dv-cat-3 { background: #a35fd0; } .dv-cat-4 { background: #9aa1b5; }

/* Occupancy heatmap */
.dv-ramp { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dv-muted); }
.dv-ramp span { width: 16px; height: 10px; border-radius: 3px; display: inline-block; }
.dv-occ-wrap { overflow-x: auto; }
.dv-occ { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; table-layout: fixed; min-width: 620px; }
.dv-occ th { font-weight: 500; color: var(--dv-muted); padding: 0 3px 6px; text-align: center; white-space: nowrap; background: none; border: 0; }
.dv-occ th:first-child { text-align: left; width: 190px; }
.dv-occ th.is-today { color: var(--dv-primary-ink); font-weight: 600; }
.dv-occ td { padding: 3px; border: 0; }
.dv-occ td:first-child { font-weight: 600; font-size: 13px; padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.dv-occ tr:hover { background: none; }
/* Each tour row reads as a track across the week: line behind, dots = open departures, pills = booked */
.dv-occ-track td:not(:first-child) { position: relative; }
.dv-occ-track td:not(:first-child)::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--dv-hair); z-index: 0;
}
.dv-occ-track td:nth-child(2)::before { left: 50%; }
.dv-occ-track td:last-child::before { right: 50%; }
.dv-occ-track .dv-cell { position: relative; z-index: 1; }
.dv-occ-track .dv-cell--none, .dv-occ-track .dv-cell--empty { background: transparent; }
.dv-occ-track .dv-cell-dot { box-shadow: 0 0 0 3px var(--dv-surface); }
.dv-occ-track .dv-cell:not(.dv-cell--none):not(.dv-cell--empty) { box-shadow: 0 0 0 3px var(--dv-surface); }
.dv-occ td.is-today { background: color-mix(in srgb, var(--dv-primary) 5%, transparent); }
.dv-occ tr:last-child td.is-today { border-radius: 0 0 10px 10px; }
.dv-occ td.is-today .dv-cell-dot { box-shadow: none; }
.dv-occ th.is-today { background: color-mix(in srgb, var(--dv-primary) 5%, transparent); border-radius: 10px 10px 0 0; padding-top: 6px; }
/* Lightly booked pills keep an outline so they never melt into the background */
.dv-occ-track .dv-cell--0, .dv-occ-track .dv-cell--1 { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc, var(--dv-primary)) 35%, transparent), 0 0 0 3px var(--dv-surface) !important; }
.dv-occ td.is-today .dv-cell--0, .dv-occ td.is-today .dv-cell--1 { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc, var(--dv-primary)) 35%, transparent) !important; }
.dv-cell {
    height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; border: 0; width: 100%;
    min-height: 0; min-width: 0; cursor: pointer; font-family: inherit;
}
.dv-cell--none { background: transparent; cursor: default; }
.dv-cell--empty { background: transparent; box-shadow: none; }
.dv-cell-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dv-control); transition: transform 0.12s; }
.dv-cell--empty:hover { background: var(--dv-subtle); }
.dv-cell--empty:hover .dv-cell-dot { background: var(--dv-faint); transform: scale(1.3); }
.dv-cell--multi { flex-direction: column; gap: 1px; height: auto; min-height: 40px; padding: 4px 6px; line-height: 1.25; }
.dv-cell-slot { display: block; white-space: nowrap; }
.dv-cell-time { font-weight: 500; opacity: 0.75; }
.dv-cell--0 { background: var(--dv-seq-0); color: var(--dv-muted); }
.dv-cell--1 { background: var(--dv-seq-1); color: #1e3f94; }
.dv-cell--2 { background: var(--dv-seq-2); color: #14182b; }
.dv-cell--3 { background: var(--dv-seq-3); color: #ffffff; }
.dv-cell--4 { background: var(--dv-seq-4); color: #ffffff; }
[data-theme="dark"] .dv-cell--1 { color: #dbe6ff; }
[data-theme="dark"] .dv-cell--2 { color: #ffffff; }
[data-theme="dark"] .dv-cell--4 { color: #111827; }

/* Activity */
.dv-act-list { display: flex; flex-direction: column; }
.dv-act-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; cursor: default; border-top: 1px solid var(--dv-hair); }
.dv-act-item:first-child { border-top: 0; }
.dv-act-ic { flex: none; display: flex; margin-top: 2px; color: var(--dv-muted); }
.dv-act-ic svg { width: 16px; height: 16px; }
.dv-act-ic--booking { color: var(--dv-primary); }
.dv-act-ic--payment { color: var(--dv-green-mark); }
.dv-act-ic--customer { color: var(--dv-t2, #6448c4); }
.dv-act-item.is-click { cursor: pointer; }
.dv-act-item.is-click:hover .dv-act-main { color: var(--dv-primary-ink); }
.dv-act-main { flex: 1; min-width: 0; font-size: 13px; }
.dv-act-main > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ===========================================================================
   CALENDAR (#calendar) — one toolbar, departure pills, day panel, timeline
   =========================================================================== */
#calendar[style*="block"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
#calendar.dv-has-panel[style*="block"] { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); }
#calendar > * { grid-column: 1 / -1; margin-bottom: 0 !important; }
#calendar.dv-has-panel > .calendar-container { grid-column: 1; }
#calendar.dv-has-panel > .dv-daypanel { grid-column: 2; }
#calendar > .event-tooltip { grid-column: auto; }
.dv-cal-head { padding-bottom: 0; }
.dv-cal-toolbar { padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dv-cal-nav { display: flex; align-items: center; gap: 6px; }
.dv-cal-label { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-left: 8px; white-space: nowrap; }
.dv-cal-spacer { flex: 1; }
.dv-cal-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dv-cal-rows { display: flex; align-items: center; gap: 8px; }

/* Month grid */
#calendar .calendar-container {
    padding: 0;
    overflow: hidden;
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius);
    box-shadow: var(--dv-shadow);
}
#calendar .calendar-grid { background: var(--dv-surface); gap: 0; border-spacing: 0; overflow: visible; }
#calendar .calendar-grid:not(.week-view):not(.day-view):not(.list-view) .calendar-header-cell {
    background: var(--dv-surface);
    border: 0;
    border-bottom: 1px solid var(--dv-border);
    text-align: left;
    padding: 10px;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--dv-muted);
}
.dv-mcell.calendar-cell {
    min-height: 140px;
    padding: 8px;
    border: 0;
    border-right: 1px solid var(--dv-hair);
    border-bottom: 1px solid var(--dv-hair);
    border-radius: 0;
    background: var(--dv-surface);
    gap: 4px;
    min-width: 0;
    opacity: 1;
    box-shadow: none;
    transition: background-color 0.15s ease;
}
.dv-mcell.calendar-cell:nth-child(7n + 7) { border-right: 0; }
.dv-mcell.calendar-cell:hover { background: var(--dv-subtle); border-color: var(--dv-hair); box-shadow: none; }
.dv-mcell.is-weekend { background: #fbfcfe; }
[data-theme="dark"] .dv-mcell.is-weekend { background: #1c2535; }
.dv-mcell.other-month { background: var(--dv-subtle); opacity: 1; }
.dv-mcell.today { background: #f5f8ff; box-shadow: inset 0 0 0 2px var(--dv-primary); }
[data-theme="dark"] .dv-mcell.today { background: #1e2b47; }
.dv-mcell.is-selected:not(.today) { background: var(--dv-primary-soft); }
.dv-mcell-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.dv-mcell-num {
    width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; color: var(--dv-ink);
}
.dv-mcell.other-month .dv-mcell-num { color: var(--dv-faint); }
.dv-mcell.today .dv-mcell-num { background: var(--dv-primary); color: #ffffff; }
.dv-mcell-pax { font-size: 11px; color: var(--dv-muted); }
.dv-evt {
    display: flex; flex-direction: column; gap: 3px; padding: 4px 6px 5px; border-radius: 6px;
    background: var(--dv-seg); font: 400 11.5px/1.2 Inter, 'Segoe UI', sans-serif; font-family: inherit; font-family: inherit; color: var(--dv-ink);
    border: 0; min-height: 0; min-width: 0; width: 100%; text-align: left; cursor: pointer;
}
.dv-evt:hover { background: var(--dv-primary-soft); }
.dv-evt-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.dv-evt .dv-meter { background: rgba(20, 24, 43, 0.1); }
[data-theme="dark"] .dv-evt .dv-meter { background: rgba(255, 255, 255, 0.12); }
.dv-mcell.is-past .dv-evt { opacity: 0.6; }
.dv-mcell-more { font-size: 11.5px; font-weight: 600; color: var(--dv-primary-ink); padding-left: 4px; }
.dv-mcell-add {
    position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; min-height: 24px; min-width: 24px;
    border-radius: 6px; border: 1px solid var(--dv-control); background: var(--dv-surface); color: var(--dv-muted);
    font-size: 15px; line-height: 1; padding: 0; cursor: pointer; opacity: 0; transition: opacity 0.15s ease;
}
.dv-mcell:hover .dv-mcell-add { opacity: 1; }
.dv-cal-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 10px 14px; font-size: 12px; color: var(--dv-ink-2); border-top: 1px solid var(--dv-border); }
.dv-cal-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.dv-cal-legend i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
#calendar .calendar-grid.week-view ~ .dv-cal-legend,
#calendar .calendar-grid.day-view ~ .dv-cal-legend,
#calendar .calendar-grid.list-view ~ .dv-cal-legend { display: none; }

/* Day panel */
.dv-daypanel { display: flex; flex-direction: column; gap: 14px; padding: 18px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.dv-dp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dv-dp-eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dv-muted); }
.dv-dp-title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.dv-dp-list { display: flex; flex-direction: column; gap: 8px; }
.dv-dp-dep { border: 1px solid var(--dv-border); border-radius: 12px; overflow: hidden; }
/* Collapsed departures share the open header's shade, weight and chip */
.dv-dp-dep.is-closed { padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--dv-subtle); }
.dv-dp-dep.is-closed { cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.dv-dp-dep.is-closed:hover { background: var(--dv-seg); border-color: var(--dv-control); }
.dv-dp-dep.is-closed .dv-dp-toggle { font-size: 14px; }
.dv-dp-toggle { display: flex !important; align-items: center; gap: 10px; }
.dv-dp-toggle-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.dv-dp-toggle-main > :first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-dp-toggle-sub { font-size: 12px; color: var(--dv-muted); font-weight: 400; }
.dv-dp-chev { flex: none; color: var(--dv-muted); transition: transform 0.15s; }
.dv-dp-dep.is-closed:hover .dv-dp-chev { color: var(--dv-ink); }
.dv-dp-dep.is-open .dv-dp-chev { transform: rotate(180deg); }
.dv-dp-head-end { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.dv-dp-dep.is-warn { border-color: var(--dv-red-line); }
.dv-dp-dep.is-open { border-color: var(--dv-control); }
.dv-dp-toggle {
    display: flex; justify-content: space-between; gap: 8px; font: 400 13px/1.3 Inter, 'Segoe UI', sans-serif; font-family: inherit; font-family: inherit;
    color: var(--dv-ink); background: none; border: 0; padding: 0; min-height: 0; min-width: 0; cursor: pointer; text-align: left;
}
.dv-dp-dephead {
    width: 100%; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--dv-subtle);
    border: 0; min-height: 0; min-width: 0; cursor: pointer; text-align: left; font-family: inherit; color: var(--dv-ink);
}
.dv-dp-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.dv-dp-meta { justify-content: flex-start; font-size: 12px; color: var(--dv-ink-2); }
.dv-dp-meta .dv-av { width: 24px; height: 24px; font-size: 10px; }
.dv-dp-warn { font-size: 12px; font-weight: 600; color: var(--dv-red); }
.dv-dp-bks { display: flex; flex-direction: column; }
.dv-dp-bk {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-top: 1px solid var(--dv-hair);
    background: none; width: 100%; min-height: 0; min-width: 0; font: 400 13px/1.3 Inter, 'Segoe UI', sans-serif; font-family: inherit; font-family: inherit;
    color: var(--dv-ink); text-align: left; cursor: pointer;
}
.dv-dp-bk:hover { background: var(--dv-subtle); }
.dv-dp-bk svg { flex: none; }
.dv-dp-bk-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-dp-actions { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--dv-hair); }
.dv-dp-actions .dv-btn { flex: 1; }

/* Timeline */
.dv-timeline { overflow: hidden; }
.dv-tl-scroll { overflow-x: auto; }
.dv-tl { min-width: 980px; }
.dv-tl-row { display: grid; grid-template-columns: 210px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--dv-hair); background: var(--dv-surface); }
.dv-tl-row.is-unassigned { background: #fffafa; }
[data-theme="dark"] .dv-tl-row.is-unassigned { background: rgba(239, 68, 68, 0.05); }
.dv-tl-head { border-bottom: 1px solid var(--dv-border); }
.dv-tl-foot { background: var(--dv-subtle); border-bottom: 0; }
.dv-tl-name { padding: 12px 14px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.dv-tl-name .dv-av { width: 30px; height: 30px; }
.dv-av--unassigned { background: var(--dv-red-soft); color: var(--dv-red); }
.dv-tl-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-tl-row.is-unassigned .dv-tl-title { color: var(--dv-red); }
.dv-tl-day { padding: 10px 8px; border-left: 1px solid var(--dv-hair); display: flex; flex-direction: column; gap: 1px; }
.dv-tl-day span { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dv-muted); }
.dv-tl-day b { font-size: 16px; font-weight: 700; }
.dv-tl-day.is-today { background: #f5f8ff; }
.dv-tl-day.is-today span, .dv-tl-day.is-today b { color: var(--dv-primary-ink); }
[data-theme="dark"] .dv-tl-day.is-today { background: #1e2b47; }
.dv-tl-cell { padding: 6px; border-left: 1px solid var(--dv-hair); display: flex; flex-direction: column; gap: 5px; min-height: 76px; min-width: 0; box-sizing: border-box; }
.dv-tl-cell.is-today { background: rgba(61, 106, 214, 0.04); }
.dv-tl-cell.is-target { outline: 2px dashed #c9d8f7; outline-offset: -4px; border-radius: 8px; }
.dv-tl-cell.is-over { background: var(--dv-primary-soft); }
.dv-blk {
    border-radius: 8px; padding: 6px 8px 7px; font-size: 12px; line-height: 1.25; display: flex; flex-direction: column; gap: 4px;
    min-width: 0; background: var(--dv-primary-soft); color: var(--dv-ink); cursor: pointer;
}
.dv-blk[draggable="true"] { cursor: grab; }
.dv-blk.is-unassigned { background: var(--dv-surface); color: var(--dv-red); box-shadow: inset 0 0 0 1.5px #e7a49d; }
.dv-blk-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.dv-blk-m { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; }
.dv-blk-m .dv-meter { flex: 1; background: rgba(20, 24, 43, 0.1); }
.dv-tl-total { padding: 12px 8px; border-left: 1px solid var(--dv-hair); font-size: 13px; font-weight: 600; }


/* ===========================================================================
   BOOKINGS (#bookings) — saved views, chips, grouped table, peek, bulk bar
   =========================================================================== */
.dv-bk { gap: 14px; }
.dv-tab-wrap { display: inline-flex; align-items: center; gap: 2px; }
.dv-tab-x {
    width: 20px; height: 20px; min-height: 20px; min-width: 20px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--dv-faint); cursor: pointer; font-size: 14px; line-height: 1;
}
.dv-tab-x:hover { background: var(--dv-seg); color: var(--dv-ink); }
.dv-tab--add { color: var(--dv-primary-ink); }
.dv-bk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dv-search {
    flex: 1 1 260px; max-width: 360px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
    border: 1px solid var(--dv-control); border-radius: var(--dv-radius-control); background: var(--dv-surface); color: var(--dv-muted);
    box-sizing: border-box; margin: 0;
}
.dv-search:focus-within { border-color: var(--dv-primary); box-shadow: 0 0 0 3px rgba(61, 106, 214, 0.15); }
.dv-search input {
    flex: 1; min-width: 0; border: 0 !important; outline: 0; background: transparent !important; height: 34px; min-height: 0;
    padding: 0 !important; font: 400 13px Inter, 'Segoe UI', sans-serif; font-family: inherit; color: var(--dv-ink); box-shadow: none !important;
}
.dv-kbd { font: 500 11px/1 ui-monospace, monospace; border: 1px solid var(--dv-control); border-radius: 5px; padding: 2px 5px; color: var(--dv-muted); }
.dv-datepop { width: 280px; padding: 8px; }
.dv-datepop-presets { display: flex; flex-direction: column; }
.dv-datepop-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 4px; border-top: 1px solid var(--dv-hair); margin-top: 4px; }
.dv-datepop-range label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--dv-muted); margin: 0; }
.dv-datepop-range input {
    height: 32px; min-height: 32px; border: 1px solid var(--dv-control); border-radius: 8px; padding: 0 6px;
    font: 400 12.5px Inter, sans-serif; font-family: inherit; background: var(--dv-surface); color: var(--dv-ink);
}
.dv-datepop-actions { display: flex; justify-content: flex-end; gap: 6px; padding: 4px; }

.dv-bk-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.dv-bk-main.has-peek { grid-template-columns: minmax(0, 1fr) minmax(320px, 370px); }
.dv-bk-main.has-peek .dv-col-src,
.dv-bk-main.has-peek .dv-col-x { display: none; }
.dv-bk-scroll { overflow-x: auto; }
.dv-bk-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.dv-bk-table th {
    font-size: 12px; font-weight: 600; color: var(--dv-muted); text-align: left; padding: 10px 12px;
    border-bottom: 1px solid var(--dv-border); white-space: nowrap; background: var(--dv-surface); position: static;
}
.dv-bk-table th.is-sortable { cursor: pointer; user-select: none; }
.dv-bk-table th.is-sortable:hover { color: var(--dv-ink); }
.dv-sort { margin-left: 4px; color: var(--dv-primary-ink); }
.dv-bk-table td { padding: 11px 12px; border-bottom: 1px solid var(--dv-hair); font-size: 13px; vertical-align: middle; color: var(--dv-ink); }
.dv-bk-table .dv-r { text-align: right; }
.dv-bk-table .dv-cb { width: 20px; padding-right: 0; }
.dv-bk-table .dv-cb input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--dv-primary); cursor: pointer; }
.dv-bk-table .dv-actions-col { width: 36px; padding-left: 0; text-align: right; }
.dv-bk-table tr.dv-row { cursor: pointer; }
.dv-bk-table tr.dv-row:hover td { background: var(--dv-subtle); }
.dv-bk-table tr.dv-row.selected td { background: #fafbfe; }
.dv-bk-table tr.dv-row.is-peek td { background: #f2f6fe; }
[data-theme="dark"] .dv-bk-table tr.dv-row.selected td { background: #1c2638; }
[data-theme="dark"] .dv-bk-table tr.dv-row.is-peek td { background: #1e2b47; }
.dv-bk-table tr.dv-grp td { background: var(--dv-subtle); padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--dv-ink-2); }
.dv-bk-table tr.dv-grp td span { color: var(--dv-muted); font-weight: 500; }
.dv-bk-table .dv-empty { text-align: center; }
.dv-bk-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dv-bk-who .dv-av { width: 30px; height: 30px; }
.dv-bk-name { font-weight: 600; white-space: nowrap; }
.dv-bk-svc { font-weight: 500; white-space: nowrap; }
.dv-chip--xs { height: 18px; font-size: 10.5px; padding: 0 6px; vertical-align: middle; }
.dv-chip-btn { border: 0; cursor: pointer; min-height: 22px; min-width: 0; font-family: inherit; }
.dv-chip-btn:hover { filter: brightness(0.96); }
.dv-pay { font-size: 12px; font-weight: 600; }
.dv-pay--paid { color: var(--dv-green); }
.dv-pay--partial { color: var(--dv-amber); }
.dv-pay--unpaid { color: var(--dv-red); }
.dv-pay--refunded { color: var(--dv-muted); }
.dv-strong600 { font-weight: 600; }
.dv-nowrap { white-space: nowrap; }
.dv-ellip { display: block; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-bk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.dv-bk-pager { display: flex; align-items: center; gap: 8px; }
.dv-rowmenu { min-width: 210px; }
.dv-pop-danger { color: var(--dv-red); }
.dv-pop-danger svg { color: currentColor; }
.dv-rowmenu .dv-pop-item svg { width: 17px; height: 17px; }

/* Peek panel */
.dv-peek { display: flex; flex-direction: column; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.dv-peek-head { padding: 16px 18px; border-bottom: 1px solid var(--dv-hair); display: flex; flex-direction: column; gap: 10px; }
.dv-peek-top { display: flex; align-items: center; justify-content: space-between; }
.dv-peek-tools { display: flex; gap: 4px; }
.dv-peek-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dv-peek-name { font-size: 17px; font-weight: 700; }
.dv-peek-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dv-peek-grid { padding: 14px 18px; display: grid; grid-template-columns: 92px minmax(0, 1fr); row-gap: 9px; column-gap: 8px; font-size: 13px; border-bottom: 1px solid var(--dv-hair); }
.dv-peek-tl { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--dv-hair); }
.dv-peek-ev { display: flex; gap: 10px; font-size: 13px; }
.dv-peek-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dv-primary); margin-top: 6px; flex: none; }
.dv-peek-dot.is-todo { background: transparent; border: 2px solid var(--dv-faint); box-sizing: border-box; }
.dv-peek-actions { padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.dv-peek-actions .dv-btn { flex: 1 1 90px; height: 38px; }
.dv-peek-actions .dv-contact { flex: 1 1 90px; display: flex; }
.dv-peek-actions .dv-contact > .dv-btn { flex: 1; gap: 6px; }
.dv-peek-actions .dv-contact > .dv-btn svg { color: var(--dv-muted); transition: transform 0.15s; }
.dv-peek-actions .dv-contact > .dv-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.dv-contact-pop { min-width: 220px; z-index: 50; }
.dv-contact-pop .dv-pop-item { text-decoration: none; }


/* ===========================================================================
   SETTINGS PAGES — shared
   =========================================================================== */
.dv-settings { gap: 16px; margin-bottom: 16px; }
.dv-autosave { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--dv-green); white-space: nowrap; }
.dv-setcard { overflow: visible; }
.dv-sec-l { min-width: 0; }
.dv-sec-r { min-width: 0; }
.dv-adminchip { margin-top: 12px; }
.dv-settings .dv-sec-r .form-grid { padding: 0; }

/* ---------- Company settings (#general-settings) ---------- */
#dvGS .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
#dvGS .form-grid .form-group { margin: 0; }
#dvGS .form-grid textarea { min-height: 38px; resize: vertical; }
.dv-logo-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.dv-logo-drop { flex: 1 1 240px; min-width: 0; }
.dv-logo-drop .logo-upload-container {
    height: 100%; min-height: 150px; border: 1.5px dashed #c9d2e3; border-radius: 12px; background: var(--dv-subtle);
    box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.dv-logo-prev { flex: 1 1 170px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dv-mock-mail, .dv-mock-inv { flex: 1; border: 1px solid var(--dv-border); border-radius: 10px; min-height: 130px; overflow: hidden; background: var(--dv-surface); }
.dv-mock-mail { display: flex; flex-direction: column; }
.dv-mock-mail-bar { height: 34px; background: var(--dv-primary); display: flex; align-items: center; padding: 0 12px; }
.dv-mock-logo { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #ffffff; max-width: 70%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dv-mock-logo img { max-height: 22px; max-width: 110px; display: block; }
.dv-mock-logo--ink { color: var(--dv-primary-ink); font-size: 10px; }
.dv-mock-logo--ink img { max-height: 18px; }
.dv-mock-lines { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.dv-mock-lines i, .dv-mock-inv i { display: block; height: 6px; border-radius: 3px; background: var(--dv-hair); }
.dv-mock-lines b { display: block; height: 18px; width: 70px; border-radius: 5px; background: var(--dv-primary); margin-top: 4px; }
.dv-mock-inv { padding: 12px; display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; }
.dv-mock-inv-top { display: flex; justify-content: space-between; align-items: center; }
.dv-mock-invno { font-size: 10px; }
.dv-mock-inv em { display: block; height: 8px; width: 30%; border-radius: 3px; background: var(--dv-control); align-self: flex-end; margin-top: 4px; }
.dv-numtable { display: flex; flex-direction: column; }
.dv-numrow { display: grid; grid-template-columns: minmax(0, 1fr) 110px 180px; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--dv-hair); }
.dv-numhead { border-top: 0; padding: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--dv-muted); }
.dv-numrow--inv { border-top: 1px solid var(--dv-border); margin-top: 6px; padding-top: 12px; }
.dv-numlabel { font-size: 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dv-numlabel label { font-size: 14px; font-weight: 500; margin: 0; }
.dv-numstart { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.dv-numin input, .dv-numstart input {
    width: 100%; height: 34px; min-height: 34px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--dv-control);
    border-radius: 8px; background: var(--dv-surface); color: var(--dv-ink);
    font: 500 12.5px 'JetBrains Mono', ui-monospace, monospace;
}
.dv-numstart input { width: 96px; }
.dv-numex { color: var(--dv-primary-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-settings .notification-settings { padding: 0; }
.dv-rules .notification-item:first-child { padding-top: 0; }
.dv-rules select, .dv-tiles select, .dv-tiles input[type="url"], .dv-tiles input[type="text"] {
    height: 34px !important; min-height: 34px; border: 1px solid var(--dv-control) !important; border-radius: 8px !important;
    padding: 0 10px !important; background: var(--dv-surface); color: var(--dv-ink); font-size: 13px !important;
}
#dvGS .dv-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#dvGS .dv-tiles > .notification-item.dv-tile {
    display: grid !important; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; gap: 12px;
    border: 1px solid var(--dv-border) !important; border-radius: 12px !important; padding: 16px !important;
    background: var(--dv-surface) !important; margin: 0;
}
#dvGS .dv-tiles > .notification-item.dv-tile[style*="display: none"] { display: none !important; }
#dvGS .dv-tile .notification-content { margin: 0; min-width: 0; }
#dvGS .dv-tile .notification-content h4 { font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#dvGS .dv-tile .notification-content p { font-size: 12px; }
#dvGS .dv-tile > .toggle-switch { margin-top: 2px; }
#dvGS .dv-tile .dv-subitem {
    display: flex; align-items: center; gap: 10px; padding: 10px 0 0 !important; margin-top: 10px !important;
    border: 0 !important; border-top: 1px solid var(--dv-hair) !important; border-radius: 0 !important; background: none !important;
}
#dvGS .dv-tile .dv-subitem[style*="display: none"] { display: none !important; }
#dvGS .dv-tile .dv-subitem .notification-content h4 { font-size: 13px; font-weight: 500; }
#dvGS .dv-tile .dv-subitem .notification-content p { display: none; }
#dvGS .dv-sec-l .plan-banner {
    background: var(--dv-subtle) !important; color: var(--dv-ink) !important; border-radius: 10px !important; margin-top: 14px !important;
}
#dvGS .dv-sec-l .plan-banner > div { flex-direction: column; align-items: flex-start !important; gap: 4px; }
#dvGS .dv-sec-l .plan-banner a { color: var(--dv-primary-ink) !important; text-decoration: none !important; font-weight: 600; }
.dv-closed-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; }
#dvGS .table-container { background: none !important; backdrop-filter: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
#dvGS .table-container .data-table thead { display: none; }
#dvGS .table-container .data-table { min-width: 0; }
#dvGS .table-container .data-table td { padding: 11px 6px; border-bottom: 0; border-top: 1px solid var(--dv-hair); }
#dvGS .table-container .data-table td:nth-child(3) { color: var(--dv-muted); font-size: 12px; }
#dvGS .table-container .data-table td { text-align: left; }
.dv-logo-drop .logo-preview { max-height: 90px; max-width: 220px; object-fit: contain; }
#dvGS .table-container .data-table tr:hover { background: none; }

/* ---------- Subscription (#subscription-settings) ---------- */
.dv-subactions { display: flex; gap: 8px; }
#subscription-settings .dv-subplan { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#subscription-settings .subscription-card {
    margin: 0; background: var(--dv-surface); border: 1px solid var(--dv-border); border-radius: var(--dv-radius);
    box-shadow: var(--dv-shadow); overflow: hidden; transform: none;
}
#subscription-settings .subscription-card:hover { transform: none; box-shadow: var(--dv-shadow); }
#subscription-settings .subscription-card-header { background: none !important; padding: 22px 22px 0; color: var(--dv-ink); gap: 12px; }
#subscription-settings .subscription-card-header::before { display: none; }
#subscription-settings .subscription-icon { display: none; }
#subscription-settings .subscription-plan-name { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--dv-ink); margin: 0; }
#subscription-settings .subscription-status { color: var(--dv-muted); font-size: 13px; margin: 2px 0 0; }
#subscription-settings .subscription-badge { border-radius: 999px; font-size: 12px; padding: 3px 10px; background: var(--dv-green-soft); color: var(--dv-green); border: 0; }
#subscription-settings .trial-badge { background: var(--dv-amber-soft); color: var(--dv-amber); }
#subscription-settings .subscription-card-body { padding: 18px 22px 22px; }
#subscription-settings .subscription-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--dv-hair); padding-top: 16px; }
#subscription-settings .detail-item { background: none; border: 0; border-left: 1px solid var(--dv-hair); border-radius: 0; padding: 0 14px; box-shadow: none; }
#subscription-settings .detail-item:first-child { border-left: 0; padding-left: 0; }
#subscription-settings .detail-item:hover { transform: none; background: none; }
#subscription-settings .detail-label { font-size: 12px; color: var(--dv-muted); text-transform: none; letter-spacing: 0; font-weight: 500; }
#subscription-settings .detail-value { font-size: 14px; font-weight: 600; color: var(--dv-ink); }
#subscription-settings .billing-info-section { background: none; border: 0; padding: 14px 0 0; margin: 0; }
#subscription-settings .billing-info-section h4 { font-size: 12px; color: var(--dv-muted); margin: 0 0 8px; text-transform: none; letter-spacing: 0; }
#subscription-settings .billing-info-section .subscription-details { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; padding-top: 0; }
#subscription-settings .subscription-actions { display: flex; gap: 8px; align-items: center; margin-top: 18px; padding: 0; border: 0; }
#subscription-settings .subscription-actions #changePlanBtn { background: var(--dv-primary); color: #fff; border: 1px solid var(--dv-primary); }
#subscription-settings .subscription-actions #cancelSubscriptionBtn {
    margin-left: auto; background: none !important; border: 0 !important; color: var(--dv-red) !important; padding: 0 4px; font-size: 13px;
}
#subscription-settings .subscription-cta { background: var(--dv-primary-soft); border-radius: 10px; padding: 12px 14px; margin-top: 16px; border: 0; }
.dv-subhint { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--dv-primary-soft); color: var(--dv-primary-ink); font-size: 13px; }
.dv-subhint span { flex: 1; }
.dv-usage { display: flex; flex-direction: column; gap: 18px; }
.dv-meterblock { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.dv-meterhead { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; }
.dv-subcounts { display: flex; gap: 16px; font-size: 12px; color: var(--dv-muted); border-top: 1px solid var(--dv-hair); padding-top: 12px; }
#subscription-settings #availablePlansSection { padding: 0; }
#subscription-settings .plans-grid { gap: 12px; padding: 0 22px 18px; }
#subscription-settings .plan-card {
    border: 1px solid var(--dv-border); border-radius: 12px; box-shadow: none; padding: 18px; background: var(--dv-surface); transform: none;
}
#subscription-settings .plan-card:hover { transform: none; box-shadow: none; }
#subscription-settings .plan-card.featured { border: 2px solid var(--dv-primary); box-shadow: 0 8px 24px rgba(61, 106, 214, 0.12); transform: none; }
#subscription-settings .plan-badge { border-radius: 999px; font-size: 11px; padding: 2px 9px; top: 14px; right: 14px; left: auto; transform: none; background: var(--dv-primary); }
#subscription-settings .plan-name { font-size: 15px; font-weight: 700; color: var(--dv-ink) !important; text-align: left; }
#subscription-settings .plan-description { font-size: 12.5px; color: var(--dv-muted); text-align: left; min-height: 0; }
#subscription-settings .plan-price { font-size: 28px; font-weight: 700; color: var(--dv-ink) !important; text-align: left; -webkit-text-fill-color: currentColor; background: none; }
#subscription-settings .plan-features { margin: 10px 0; }
#subscription-settings .plan-features li { font-size: 12.5px; padding: 4px 0; border: 0; }
#subscription-settings .plan-features li:nth-child(n + 3) { display: none; }
#subscription-settings .plan-cta .btn { width: 100%; justify-content: center; }
#subscription-settings #featuresComparisonTableWrapper { padding: 0 22px 18px; }
#subscription-settings .comparison-table { border: 0; box-shadow: none; border-radius: 0; }
#subscription-settings .comparison-table thead { background: none; }
#subscription-settings .comparison-table th { background: var(--dv-surface); color: var(--dv-muted); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--dv-border); }
#subscription-settings .comparison-table td { border-bottom: 1px solid var(--dv-hair); font-size: 13px; }
#subscription-settings .comparison-table tbody tr:nth-child(even) { background: none; }
#subscription-settings .dv-cmp-collapsed tbody tr:nth-child(n + 7) { display: none; }
.dv-cmp-more { text-align: center; padding: 0 0 18px; }

/* ---------- Notifications (#email-notifications) ---------- */
.dv-channels-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dv-chan { padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; }
.dv-chan-ic { width: 40px; height: 40px; border-radius: 10px; }
.dv-chan-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dv-chan-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.dv-chan-acts { display: flex; flex-direction: column; gap: 6px; }
.dv-emailcfg { padding: 0; }
.dv-emailcfg .email-config-grid { margin: 0; }
.dv-emailcfg-foot { display: flex; justify-content: flex-end; padding: 0 24px 20px; }
.dv-matrix-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; }
.dv-mrow { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px; align-items: center; gap: 12px; padding: 12px 20px; }
.dv-mrow--head { padding-top: 8px; padding-bottom: 8px; border-top: 1px solid var(--dv-border); font-size: 12px; font-weight: 600; color: var(--dv-muted); }
.dv-mrow--head span:not(:first-child) { text-align: center; }
.dv-mgroup { padding: 10px 20px; background: var(--dv-subtle); border-top: 1px solid var(--dv-border); font-size: 12px; font-weight: 600; color: var(--dv-ink-2); text-transform: uppercase; letter-spacing: 0.04em; }
.dv-mitem { border-top: 1px solid var(--dv-hair); }
.dv-mitem.is-open { background: var(--dv-subtle); }
[data-theme="dark"] .dv-mitem.is-open { background: #1c2535; }
.dv-mtitle { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.dv-mexp {
    width: 22px; height: 22px; min-height: 22px; min-width: 22px; padding: 0; border: 0; border-radius: 6px; background: none;
    color: var(--dv-ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
    transform: rotate(-90deg); transition: transform 0.15s ease;
}
.dv-mitem.is-open .dv-mexp { transform: none; }
.dv-mexp[hidden] + .dv-mtext { padding-left: 28px; }
.dv-mtext { min-width: 0; }
.dv-mname { font-size: 14px; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dv-mname h4, .dv-mname span { font-size: inherit; }
.dv-mcell { display: flex; justify-content: center; }
.dv-mcell.is-off { opacity: 0.35; pointer-events: none; }
.dv-na { font-size: 12px; color: var(--dv-faint); }
.dv-mkids { padding: 0 20px 16px 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.dv-mkids > .notification-item {
    padding: 8px 0 !important; border: 0 !important; background: none !important; display: flex; align-items: center; gap: 10px; margin: 0;
}
.dv-mkids > .notification-item[style*="display: none"] { display: none !important; }
.dv-mkids > .notification-item .notification-content p { font-size: 12px; }
.dv-mkids > .notification-item .notification-content h4 { font-size: 13px; font-weight: 500; }
.dv-mkids > div:not(.notification-item) { grid-column: 1 / -1; }
.dv-mkids input[type="text"] { height: 34px; border: 1px solid var(--dv-control); border-radius: 8px; padding: 0 10px; background: var(--dv-surface); color: var(--dv-ink); }
.dv-mkids #invoiceTimingOptions { display: flex; flex-wrap: wrap; gap: 6px; }
#email-notifications .dv-mkids .btn { justify-self: start; }
#email-notifications .section-header .btn[style*="background-color"] { background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-ink) !important; }
#email-notifications .section-header .btn-success { background: var(--dv-primary); border-color: var(--dv-primary); }

/* ---------- Website settings (#website-settings) ---------- */
#website-settings .dv-ws-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 46%);
    column-gap: 16px;
    align-items: start;
    padding: 0 !important;
    background: transparent;
    border: 0;
    box-shadow: none;
}
#website-settings .dv-ws-tabs { background: transparent; border: 0; box-shadow: none; padding: 0 !important; margin-bottom: 0; }
#website-settings .dv-ws-tabs > .tabs-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px;
    margin-bottom: 14px;
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius);
    box-shadow: var(--dv-shadow);
    overflow: visible;
}
#website-settings .dv-ws-tabs .tab-button.dv-wstab {
    order: var(--dv-order, 20);
    border-radius: 8px;
    border: 0;
    padding: 7px 12px;
    min-height: 34px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dv-ink-2);
    background: none;
    margin: 0;
}
#website-settings .dv-ws-tabs .tab-button.dv-wstab svg { display: none; }
#website-settings .dv-ws-tabs .tab-button.dv-wstab.active { background: var(--dv-dark); color: #ffffff; }
[data-theme="dark"] #website-settings .dv-ws-tabs .tab-button.dv-wstab.active { background: #f3f4f6; color: #111827; }
#website-settings .dv-ws-card > :not(.tab-content):not(.dv-wsprev) { grid-column: 1 / -1; }
#website-settings .dv-ws-card > .tab-content {
    grid-column: 1;
    grid-row: 1;
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius);
    box-shadow: var(--dv-shadow);
    padding: 20px;
    min-width: 0;
}
#website-settings .dv-ws-card > .tab-content .form-grid[style*="repeat(3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
#website-settings .dv-ws-card > .tab-content [style*="1fr 1fr 1fr"] { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; gap: 1rem !important; }
#website-settings .dv-ws-card > .tab-content #templateGrid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; }
#website-settings .dv-ws-card > .tab-content .logo-upload-container { min-width: 0; }
/* Website images: previews fit their column (base CSS caps them at 300px wide) */
#website-settings .dv-ws-card > .tab-content :is(#logoPreview, #faviconPreview, #heroPreview) { display: flex !important; flex-direction: column; align-items: center; gap: 12px; }
#website-settings .dv-ws-card > .tab-content :is(#logoPreview, #faviconPreview, #heroPreview)[style*="display: none"] { display: none !important; }
#website-settings .dv-ws-card > .tab-content .logo-preview {
    max-width: 100% !important; width: auto; height: auto; margin: 0 !important; object-fit: contain;
    border: 1px solid var(--dv-border) !important; border-radius: 10px !important; box-shadow: none !important; background: var(--dv-surface);
}
#website-settings :is(#websiteLogoUploadContainer, #websiteFaviconUploadContainer, #websiteHeroUploadContainer):has(> [id$="Preview"][style*="display: block"]) { padding: 16px !important; }
#website-settings :is(#logoPreview, #faviconPreview, #heroPreview) { width: 100%; }
#website-settings #logoImg { max-height: 90px !important; padding: 8px; }
#website-settings #faviconImg { max-height: 88px !important; max-width: 88px !important; padding: 8px; }
#website-settings #heroImg { width: 100% !important; height: 120px !important; max-height: 120px !important; object-fit: cover !important; padding: 0; }
/* Site info toggles: full-width hairline rows (title + muted hint, switch on the right) */
#website-settings #site-info-tab .notification-item {
    grid-column: 1 / -1; display: flex !important; align-items: center; justify-content: space-between; gap: 24px;
    margin: 0 !important; padding: 14px 0 !important; background: none !important; border: 0 !important; border-top: 1px solid var(--dv-hair) !important; border-radius: 0 !important; box-shadow: none !important;
}
#website-settings #site-info-tab .notification-content { flex: 1; min-width: 0; margin: 0 !important; }
#website-settings #site-info-tab .notification-content h4 { margin: 0 0 3px !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.35; color: var(--dv-ink) !important; }
#website-settings #site-info-tab .notification-content p { margin: 0 !important; font-size: 12.5px !important; line-height: 1.5 !important; color: var(--dv-muted) !important; max-width: 640px; }
#website-settings #site-info-tab .notification-item .toggle-switch { flex: none; }
#website-settings #site-info-tab .form-group small { display: block; margin-top: 6px; line-height: 1.5 !important; }
#website-settings input[type="color"] { width: 100%; height: 38px; padding: 3px; border-radius: 9px; border: 1px solid var(--dv-control); background: var(--dv-surface); cursor: pointer; }
.dv-wsprev {
    grid-column: 2; grid-row: 1; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px;
    background: var(--dv-seg); border: 1px solid var(--dv-border); border-radius: var(--dv-radius); padding: 12px;
}
.dv-wsprev-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.dv-wsopen { align-self: flex-end; }
.dv-wsframe { background: #ffffff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 16px rgba(20, 24, 43, 0.08); border: 1px solid var(--dv-control); margin: 0 auto; width: 100%; transition: max-width 0.2s ease; }
.dv-wsframe.is-phone { max-width: 340px; }
.dv-wsbrowser { height: 30px; background: #f3f4f7; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-bottom: 1px solid #e4e8f0; }
.dv-wsbrowser span { width: 9px; height: 9px; border-radius: 50%; background: #d4d8e1; }
.dv-wsbrowser em { margin-left: 10px; font-size: 11px; color: #5f6680; background: #ffffff; padding: 2px 10px; border-radius: 5px; font-style: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dv-wssite { font-size: 12px; }
.dv-wsnav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; }
.dv-wslogo { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; max-width: 45%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dv-wslogo img { max-height: 26px; max-width: 120px; display: block; }
.dv-wslinks { display: flex; align-items: center; gap: 14px; font-size: 11.5px; }
.dv-wslinks b { padding: 5px 10px; border-radius: 6px; font-weight: 600; }
.dv-wsframe.is-phone .dv-wslinks span { display: none; }
.dv-wshero { position: relative; height: 210px; background: #2a3a4a center / cover no-repeat; display: flex; flex-direction: column; justify-content: center; padding: 0 26px; gap: 8px; color: #ffffff; }
.dv-wshero > i { position: absolute; inset: 0; }
.dv-wshero > strong, .dv-wshero > span, .dv-wssearch { position: relative; }
.dv-wshero > strong { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.dv-wshero > span { font-size: 13px; opacity: 0.9; }
.dv-wssearch { display: flex; gap: 6px; margin-top: 6px; background: #ffffff; border-radius: 8px; padding: 5px; max-width: 300px; }
.dv-wssearch span { flex: 1; font-size: 11px; color: #5f6680; padding: 5px 6px; }
.dv-wssearch b { color: #ffffff; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 6px; }
.dv-wsbody { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.dv-wsrow { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.dv-wsrow span { font-size: 11px; font-weight: 600; }
.dv-wscards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dv-wsframe.is-phone .dv-wscards { grid-template-columns: minmax(0, 1fr); }
.dv-wscard { border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(20, 24, 43, 0.08); }
.dv-wscard-img { height: 64px; background: #c9d6df center / cover no-repeat; }
.dv-wscard-b { padding: 8px; display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 600; }
.dv-wscard-b em { align-self: flex-start; font-size: 10px; font-weight: 700; font-style: normal; color: #1d2433; padding: 1px 6px; border-radius: 4px; }
.dv-contrast { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 4px; padding: 10px 12px; border-radius: 9px; background: var(--dv-amber-soft); color: var(--dv-amber); font-size: 12.5px; }
.dv-contrast svg { flex: none; margin-top: 1px; }
.dv-contrast .dv-link { color: inherit; text-decoration: underline; font-size: inherit; }
#website-settings #website-url-banner { border-radius: var(--dv-radius); padding: 12px 16px; margin-bottom: 14px !important; }


/* ===========================================================================
   CONSISTENCY LAYER — one tab design, one filter-control standard,
   quiet table actions, flat headers. Applies to every admin page.
   =========================================================================== */

/* ---- Page tabs: ONE underline design everywhere ---- */
.dv-tabs,
.dv-pills,
#website-settings .dv-ws-tabs > .tabs-container,
#advanced-settings .sub-nav-tabs,
#translations-management .tabs-container,
#dispatch .dispatch-tabs {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 22px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--dv-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    overflow: visible !important;
}
.dv-tabs .dv-tab,
.dv-pills .dv-pill,
#website-settings .dv-ws-tabs .tab-button.dv-wstab,
#advanced-settings .sub-nav-tab,
#translations-management .tabs-container .tab-button,
#dispatch .dispatch-tab {
    flex: 0 0 auto !important;
    height: 40px !important;
    min-height: 40px !important;
    min-width: 0 !important;
    padding: 0 2px !important;
    margin: 0 0 -1px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--dv-muted) !important;
    font: 500 14px/1 Inter, 'Segoe UI', sans-serif !important;
    font-family: inherit !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transform: none !important;
}
.dv-tabs .dv-tab.dv-tab--add { margin-left: auto !important; }
.dv-tabs .dv-tab:hover,
.dv-pills .dv-pill:hover,
#website-settings .dv-ws-tabs .tab-button.dv-wstab:hover,
#advanced-settings .sub-nav-tab:hover,
#translations-management .tabs-container .tab-button:hover,
#dispatch .dispatch-tab:hover { color: var(--dv-ink) !important; background: none !important; }
.dv-tabs .dv-tab.is-on,
.dv-pills .dv-pill.is-on,
#website-settings .dv-ws-tabs .tab-button.dv-wstab.active,
#advanced-settings .sub-nav-tab.active,
#translations-management .tabs-container .tab-button.active,
#dispatch .dispatch-tab.on {
    color: var(--dv-ink) !important;
    font-weight: 600 !important;
    border-bottom-color: var(--dv-primary) !important;
    background: none !important;
}
#advanced-settings .sub-nav-tab svg,
#translations-management .tabs-container .tab-button svg,
#website-settings .dv-ws-tabs .tab-button svg { display: none !important; }
#advanced-settings .sub-nav-tab[style*="display: none"],
#website-settings .dv-ws-tabs .tab-button[style*="display: none"] { display: none !important; }
#dispatch .dispatch-tab .c { font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--dv-seg); color: var(--dv-ink-2); opacity: 1 !important; }
#website-settings .dv-ws-tabs { margin-bottom: 0; }

/* ---- Compact toggles: ONE segmented design everywhere ---- */
#translations-management .language-tabs,
#mailbox .folder-tabs {
    display: inline-flex !important;
    gap: 2px !important;
    padding: 3px !important;
    background: var(--dv-seg) !important;
    border: 0 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}
#translations-management .language-tabs .lang-tab,
#mailbox .folder-tabs .folder-tab {
    height: 30px !important;
    min-height: 30px !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--dv-muted) !important;
    font: 500 13px/1 Inter, 'Segoe UI', sans-serif !important;
    font-family: inherit !important;
    box-shadow: none !important;
}
#translations-management .language-tabs .lang-tab.active,
#mailbox .folder-tabs .folder-tab.active {
    background: var(--dv-surface) !important;
    color: var(--dv-ink) !important;
    box-shadow: 0 1px 2px rgba(20, 24, 43, 0.12) !important;
}
.dv-seg > button, .dv-seg > a { height: 30px; min-height: 30px; padding: 0 12px; border-radius: 7px; font-size: 13px; }

/* ---- Filter controls: 36px tall, 9px corners, one border ---- */
.page-section :is(select, input[type="text"], input[type="search"], input[type="date"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="time"], input[type="datetime-local"], input:not([type])):not(.dv-search *):not(.dv-fchip *):not(.dv-datepop *):not(.dv-numin *):not(.dv-numstart *) {
    border-radius: var(--dv-radius-control) !important;
    border: 1px solid var(--dv-control) !important;
    background-color: var(--dv-surface);
    color: var(--dv-ink);
}
.page-section :is(.tzr-toolbar-filters, .filter-controls, .filters-row, .filter-bar, .filters, .search-box, .search-bar, [class*="filter-row"], [class*="toolbar"], [class*="-filters"]) :is(select, input[type="text"], input[type="search"], input[type="date"], input[type="number"], input:not([type])):not(.dv-search *):not(.dv-fchip *):not(.dv-datepop *) {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 13px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    line-height: 34px;
}
.page-section :is(select, input):focus:not(.dv-search *) {
    border-color: var(--dv-primary) !important;
    box-shadow: 0 0 0 3px rgba(61, 106, 214, 0.15) !important;
    outline: none;
}
/* Search fields with an icon keep room for it */
.page-section :is(.search-bar, .search-box) { position: relative; }
.page-section :is(.search-bar, .search-box) .search-icon { color: var(--dv-faint); }
/* Icon-only buttons in filter rows / toolbars: same 36px square */
.page-section :is(.tzr-toolbar-filters, .tzr-toolbar-top, .filter-controls, .filters-row, .filter-bar, .filters, [class*="toolbar"], [class*="-filters"], .section-header) :is(button, a.btn):has(> svg:only-child):not(.dv-btn):not(.dv-fchip):not(.toggle-switch *):not(.bulk-actions-close) {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: var(--dv-radius-control) !important;
    border: 1px solid var(--dv-control) !important;
    background: var(--dv-surface) !important;
    color: var(--dv-ink-2) !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    transform: none !important;
}
.page-section :is(.tzr-toolbar-filters, .tzr-toolbar-top, .filter-controls, .filters-row, .filter-bar, .filters, [class*="toolbar"], [class*="-filters"], .section-header) :is(button, a.btn):has(> svg:only-child):not(.dv-btn):not(.bulk-actions-close):hover { background: var(--dv-subtle) !important; }
.page-section :is(button, a.btn):has(> svg:only-child) svg { margin: 0 !important; }
/* Buttons with text in filter rows: same height */
.page-section :is(.tzr-toolbar-filters, .filter-controls, .filters-row, .filter-bar, .filters) .btn { min-height: 36px; height: 36px; line-height: 34px; padding: 0 12px; }

/* ---- Tables: quiet icon actions, left-aligned cells, consistent pills ---- */
.page-section table:not(.dv-bk-table):not(.dv-occ) th:not(:last-child),
.page-section table:not(.dv-bk-table):not(.dv-occ) td:not(:last-child) { text-align: left !important; }
.page-section table:not(.dv-bk-table):not(.dv-occ) td :is(button, a):has(> svg:only-child):not(.dv-btn) {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--dv-muted) !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transform: none !important;
}
.page-section table:not(.dv-bk-table):not(.dv-occ) td :is(button, a):has(> svg:only-child):not(.dv-btn):hover { background: var(--dv-seg) !important; color: var(--dv-ink) !important; }
.page-section table:not(.dv-bk-table):not(.dv-occ) td :is(button, a):has(> svg:only-child):is([onclick*="elete"], [onclick*="emove"], [title*="elete"], [title*="liminar"], [title*="emove"], .btn-danger, .delete-btn):hover { background: var(--dv-red-soft) !important; color: var(--dv-red) !important; }
.page-section table:not(.dv-bk-table):not(.dv-occ) td svg { width: 16px; height: 16px; }
.page-section table td :is(.status-badge, [class*="-badge"], [class*="badge-"], .badge, [class*="status-pill"], .pill):not(button):not(.upgrade-badge) {
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    padding: 2px 9px !important;
    line-height: 18px !important;
    border: 0 !important;
    box-shadow: none !important;
    white-space: nowrap;
}
.page-section .table-container { border-radius: var(--dv-radius); }

/* ---- Headers that weren't plain yet ---- */
.page-section .modern-content-card.tzr-toolbar {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px 0 0 !important;
    margin-bottom: 14px !important;
}
.page-section > .page-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px 0 0 !important;
    margin-bottom: 14px !important;
}
.page-section > .page-header .page-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--dv-ink); margin: 0 0 4px; }
.page-section > .page-header .page-subtitle { font-size: 14px; color: var(--dv-muted); margin: 0; }
.tzr-toolbar-top { flex-wrap: wrap; }
.dv-headacts { margin-left: auto; }
/* Title takes the free space and wraps its own text; header actions never drop to a new line */
.tzr-toolbar-top > .tzr-toolbar-title { flex: 1 1 320px; min-width: 0; }
.tzr-toolbar-top > :is(.tzr-toolbar-actions, .dv-rep-tools) { flex: 0 0 auto; }
.tzr-fab.dv2-fab-moved { display: none !important; }

/* ---- Services list (#tours) ---- */
.dv-svc-table { min-width: 960px; }
.dv-svc-table td { vertical-align: middle; white-space: nowrap; }
.dv-svc-chips { flex-wrap: nowrap; }
.dv-svc-row { cursor: pointer; }
.dv-svc-row:hover td { background: var(--dv-subtle); }
.dv-svc-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dv-svc-thumb { width: 56px; height: 42px; border-radius: 8px; object-fit: cover; flex: none; background: var(--dv-seg); }
.dv-svc-thumb--empty { display: inline-flex; align-items: center; justify-content: center; color: var(--dv-faint); }
.dv-svc-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.dv-svc-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dv-svc-strong { font-weight: 600; font-size: 13px; }
.dv-svc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dv-svc-acts { white-space: nowrap; text-align: right; }
.dv-svc-acts .dv-btn { margin-left: 4px; }
#toursContainer > .dv-card { margin-bottom: 14px; }


/* ---- Button semantics: blue = primary action, neutral = secondary ---- */
.btn-success { background: var(--dv-primary) !important; border: 1px solid var(--dv-primary) !important; color: #ffffff !important; }
.btn-success:hover { background: var(--dv-primary-hover) !important; border-color: var(--dv-primary-hover) !important; }
.btn-warning { background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-ink) !important; font-weight: 500; }
.btn-warning:hover { background: var(--dv-subtle) !important; }
#support-tickets .btn.btn-secondary,
#new-booking .btn.btn-danger {
    background: var(--dv-surface) !important;
    border: 1px solid var(--dv-control) !important;
    color: var(--dv-ink) !important;
}
#support-tickets .btn.btn-secondary:hover,
#new-booking .btn.btn-danger:hover { background: var(--dv-subtle) !important; }

/* ---- Leftover gradient panels → flat tinted panels ---- */
#qr-scanner .scanner-status.scanner-status-info {
    background: var(--dv-primary-soft) !important;
    color: var(--dv-primary-ink) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
#advanced-settings [style*="linear-gradient(135deg, #667eea"] {
    background: var(--dv-primary-soft) !important;
    color: var(--dv-ink) !important;
    border: 1px solid #c9d8f7 !important;
    box-shadow: none !important;
}
[data-theme="dark"] #advanced-settings [style*="linear-gradient(135deg, #667eea"] { border-color: #33569a !important; }
#advanced-settings [style*="linear-gradient(135deg, #667eea"] *:not(button):not(button *) { color: var(--dv-ink) !important; }
#advanced-settings [style*="linear-gradient(135deg, #667eea"] [style*="rgba(255"] { background: var(--dv-surface) !important; border-color: var(--dv-control) !important; }

/* ---- Table action cells stay on one line ---- */
.page-section table:not(.dv-bk-table):not(.dv-occ) td:last-child:has(button) { white-space: nowrap; }
.page-section table:not(.dv-bk-table):not(.dv-occ) td:last-child:has(button) > div { flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 2px !important; }
.page-section table:not(.dv-bk-table):not(.dv-occ) td:last-child:has(button) > * { display: inline-flex !important; vertical-align: middle; align-items: center; }

/* ---- Website tabs fit one row ---- */
#website-settings .dv-ws-tabs > .tabs-container { gap: 4px 16px !important; }
#website-settings .dv-ws-tabs .tab-button.dv-wstab { font-size: 13.5px !important; }


/* ===========================================================================
   MAILBOX (#mailbox) — one-line inbox rows
   =========================================================================== */
#mailbox #emailsSection { padding: 0 !important; overflow: hidden; }
#mailbox #emailsSection > .modern-section-header {
    margin: 0 !important;
    padding: 12px 18px !important;
    border-bottom: 1px solid var(--dv-border);
    background: var(--dv-surface);
}
#mailbox #emailsSection > .modern-section-header h3 { font-size: 15px; font-weight: 600; margin: 0; color: var(--dv-ink); }
#mailbox #selectAllEmails { width: 16px !important; height: 16px !important; accent-color: var(--dv-primary); }
#mailbox #lastSyncTime { font-size: 12px !important; color: var(--dv-muted) !important; }
#mailbox .emails-list { gap: 0; }
#mailbox .email-card {
    display: grid;
    grid-template-columns: 16px 18px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 18px 0 22px;
    border-bottom: 1px solid var(--dv-hair);
    border-left: 0 !important;
    background: var(--dv-surface);
    position: relative;
    transition: background-color 0.12s ease;
}
#mailbox .email-card:last-child { border-bottom: 0; }
#mailbox .email-card:hover { background: var(--dv-subtle); }
#mailbox .email-card.unread { background: var(--dv-surface); }
#mailbox .email-card.unread:hover { background: var(--dv-subtle); }
#mailbox .email-card.unread::before {
    content: ''; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
    border-radius: 50%; background: var(--dv-primary);
}
#mailbox .email-card.selected { background: var(--dv-primary-soft) !important; }
#mailbox .email-card.keyboard-focused { box-shadow: inset 2px 0 0 var(--dv-primary); }
#mailbox .email-card .email-checkbox { width: 16px; height: 16px; margin: 0; accent-color: var(--dv-primary); }
#mailbox .email-card .email-star { display: inline-flex; color: var(--dv-control); }
#mailbox .email-card .email-star svg { width: 16px; height: 16px; }
#mailbox .email-card .email-star:hover,
#mailbox .email-card .email-star.starred { color: #f59e0b; }
#mailbox .email-card .email-content {
    display: grid;
    grid-template-columns: 210px fit-content(45%) minmax(0, 1fr) auto 76px;
    grid-template-areas: "from subject preview badges date";
    align-items: center;
    column-gap: 10px;
    min-width: 0;
}
#mailbox .email-card .email-header { display: contents; }
#mailbox .email-card .email-from {
    grid-area: from; font-size: 13.5px; font-weight: 500; color: var(--dv-ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#mailbox .email-card .email-subject {
    grid-area: subject; margin: 0; font-size: 13.5px; font-weight: 500; color: var(--dv-ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#mailbox .email-card .email-preview {
    grid-area: preview; font-size: 13px; color: var(--dv-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#mailbox .email-card .email-preview::before { content: '— '; }
#mailbox .email-card.unread .email-from,
#mailbox .email-card.unread .email-subject { color: var(--dv-ink); font-weight: 700; }
#mailbox .email-card .email-badges { grid-area: badges; margin: 0; display: flex; gap: 4px; flex-wrap: nowrap; }
#mailbox .email-card .email-badge {
    height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
    text-transform: none; letter-spacing: 0; white-space: nowrap;
}
#mailbox .email-card .email-badge.attachment { background: var(--dv-seg); color: var(--dv-ink-2); }
#mailbox .email-card .email-badge.replied { background: var(--dv-green-soft); color: var(--dv-green); }
#mailbox .email-card .email-date {
    grid-area: date; justify-self: end; font-size: 12px; color: var(--dv-muted); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
#mailbox .email-card.unread .email-date { color: var(--dv-ink); font-weight: 600; }
#mailbox #emailsEmpty, #mailbox #emailsLoading { padding: 48px 16px !important; color: var(--dv-muted) !important; }


/* Toolbar icon buttons by class (covers ones with badges/spinners inside) */
.page-section .tzr-toolbar-filters :is(.tzr-icon-btn, .bulk-actions-toggle),
.page-section .tzr-toolbar-top .tzr-icon-btn {
    position: relative;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: var(--dv-radius-control) !important;
    border: 1px solid var(--dv-control) !important;
    background: var(--dv-surface) !important;
    color: var(--dv-ink-2) !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    transform: none !important;
}
.page-section .tzr-toolbar-filters :is(.tzr-icon-btn, .bulk-actions-toggle):hover { background: var(--dv-subtle) !important; }
.page-section .tzr-toolbar-filters :is(.tzr-icon-btn, .bulk-actions-toggle) svg { width: 16px; height: 16px; margin: 0 !important; color: inherit; fill: currentColor; }
.page-section .tzr-toolbar-filters .tzr-icon-btn .btn-icon { display: inline-flex !important; align-items: center; justify-content: center; background: none !important; padding: 0 !important; margin: 0 !important; width: 16px; height: 16px; border-radius: 0; }
.page-section .tzr-toolbar-filters :is(.badge-count, .bulk-count-badge) {
    top: -6px !important; right: -6px !important; min-width: 16px; height: 16px; padding: 0 4px !important;
    border-radius: 999px !important; font-size: 10px !important; line-height: 16px !important;
    background: var(--dv-primary) !important; color: #fff !important;
}


/* ===========================================================================
   TRANSLATIONS (#translations-management) — tabs on the page, hairline rows
   =========================================================================== */
#translations-management .modern-content-card:has(> .tabs-container) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}
#translations-management .modern-content-card:has(> .translation-tab-content) { padding: 0 !important; overflow: hidden; }
#translations-management .translation-tab-content > div:first-child:not(.translation-items-list) {
    margin: 0 !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--dv-border);
}
#translations-management .translation-tab-content .modern-section-title { font-size: 15px; }
#translations-management select.form-select {
    height: 36px !important; min-height: 36px !important; padding: 0 30px 0 12px !important; font-size: 13px !important;
    border-radius: var(--dv-radius-control) !important; border: 1px solid var(--dv-control) !important;
    background-color: var(--dv-surface); color: var(--dv-ink);
}
#translations-management .translation-items-list { display: flex; flex-direction: column; gap: 0 !important; padding: 0 !important; }
#translations-management .translation-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin: 0 !important;
    padding: 12px 20px !important;
    background: var(--dv-surface) !important;
    border: 0 !important;
    border-top: 1px solid var(--dv-hair) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer;
}
#translations-management .translation-item:first-child { border-top: 0 !important; }
#translations-management .translation-item:hover { background: var(--dv-subtle) !important; }
#translations-management .translation-item-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#translations-management .translation-item-name { font-size: 14px !important; font-weight: 600 !important; color: var(--dv-ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#translations-management .translation-item-languages { display: flex !important; flex-wrap: wrap; gap: 4px !important; }
#translations-management .lang-badge {
    display: inline-flex; align-items: center; height: 20px; padding: 0 8px !important; border-radius: 999px !important;
    font-size: 11.5px !important; font-weight: 600 !important; border: 0 !important; letter-spacing: 0; text-transform: none;
    background: var(--dv-seg) !important; color: var(--dv-ink-2) !important;
}
#translations-management .lang-badge.auto-translated { background: var(--dv-amber-soft) !important; color: var(--dv-amber) !important; }
#translations-management .lang-badge.reviewed { background: var(--dv-green-soft) !important; color: var(--dv-green) !important; }
#translations-management .lang-badge.translated { background: var(--dv-primary-soft) !important; color: var(--dv-primary-ink) !important; }
#translations-management .lang-badge.not-translated { background: var(--dv-red-soft) !important; color: var(--dv-red) !important; }
#translations-management .translation-item-actions { display: flex; gap: 6px; flex-wrap: nowrap; }
#translations-management .translation-item-actions .btn {
    min-height: 30px !important; height: 30px; line-height: 28px !important; padding: 0 10px !important; font-size: 12.5px !important;
    border-radius: 8px !important; background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important;
    color: var(--dv-ink) !important; box-shadow: none !important;
}
#translations-management .translation-item-actions .btn:hover { background: var(--dv-subtle) !important; }
#translations-management .loading-placeholder { padding: 40px 16px !important; color: var(--dv-muted) !important; }


/* ===========================================================================
   CALENDAR — Week / Day / List views (rendered by calendar.js)
   =========================================================================== */
/* Week */
#calendar .calendar-grid.week-view { grid-template-columns: 64px repeat(7, minmax(0, 1fr)) !important; background: var(--dv-surface) !important; gap: 0 !important; }
#calendar .calendar-grid.week-view .time-header {
    background: var(--dv-surface) !important; border: 0 !important; border-bottom: 1px solid var(--dv-border) !important;
}
#calendar .calendar-grid.week-view .week-header {
    background: var(--dv-surface) !important; border: 0 !important; border-bottom: 1px solid var(--dv-border) !important;
    border-left: 1px solid var(--dv-hair) !important; padding: 10px 8px !important; text-align: left !important;
}
#calendar .calendar-grid.week-view .week-header .day-name { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dv-muted) !important; }
#calendar .calendar-grid.week-view .week-header .day-number { font-size: 18px; font-weight: 700; color: var(--dv-ink) !important; }
#calendar .calendar-grid.week-view .week-header.today { background: #f5f8ff !important; }
#calendar .calendar-grid.week-view .week-header.today .day-name,
#calendar .calendar-grid.week-view .week-header.today .day-number { color: var(--dv-primary-ink) !important; }
#calendar .calendar-grid :is(.time-slot-label) {
    background: var(--dv-surface) !important; border: 0 !important; border-top: 1px solid var(--dv-hair) !important;
    color: var(--dv-muted) !important; font-size: 11px !important; font-weight: 500 !important; font-variant-numeric: tabular-nums;
    padding: 6px 8px 0 0 !important; text-align: right !important;
}
#calendar .calendar-grid.week-view .week-time-slot {
    background: var(--dv-surface) !important; border: 0 !important; border-top: 1px solid var(--dv-hair) !important;
    border-left: 1px solid var(--dv-hair) !important; min-height: 56px; padding: 3px !important;
}
#calendar .calendar-grid.week-view .week-time-slot.today { background: rgba(61, 106, 214, 0.04) !important; }
#calendar .calendar-grid.week-view .week-time-slot:hover { background: var(--dv-subtle) !important; }
#calendar .week-event {
    background: var(--dv-primary-soft) !important; color: var(--dv-ink) !important; box-shadow: none !important;
    border: 0 !important; border-radius: 6px !important; padding: 4px 6px !important; font-size: 11.5px !important;
    display: flex; gap: 4px; align-items: baseline; min-width: 0; overflow: hidden; margin-bottom: 2px;
}
#calendar .week-event:hover { background: #dfe8fb !important; }
[data-theme="dark"] #calendar .week-event:hover { background: #26375c !important; }
#calendar .week-event .event-time { font-weight: 700; color: var(--dv-ink) !important; flex: none; font-variant-numeric: tabular-nums; }
#calendar .week-event .event-title { color: var(--dv-ink-2) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }

/* Day */
#calendar .calendar-grid.day-view { grid-template-columns: 64px minmax(0, 1fr) !important; background: var(--dv-surface) !important; gap: 0 !important; }
#calendar .calendar-grid.day-view .day-view-header { display: none !important; }
#calendar .calendar-grid.day-view .day-time-slot {
    background: var(--dv-surface) !important; border: 0 !important; border-top: 1px solid var(--dv-hair) !important;
    border-left: 1px solid var(--dv-hair) !important; min-height: 60px; padding: 4px 8px !important;
}
#calendar .calendar-grid.day-view .day-time-slot:hover { background: var(--dv-subtle) !important; }
#calendar .day-event {
    background: var(--dv-primary-soft) !important; color: var(--dv-ink) !important; box-shadow: none !important;
    border: 0 !important; border-radius: 10px !important; padding: 10px 12px !important; margin-bottom: 4px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title status" "meta status"; gap: 2px 12px; align-items: center;
}
#calendar .day-event:hover { background: #dfe8fb !important; }
[data-theme="dark"] #calendar .day-event:hover { background: #26375c !important; }
#calendar .day-event .event-header { display: contents; }
#calendar .day-event .event-time { grid-area: meta; font-size: 12px; font-weight: 600; color: var(--dv-ink-2) !important; font-variant-numeric: tabular-nums; }
#calendar .day-event .event-title { grid-area: title; font-size: 14px; font-weight: 600; color: var(--dv-ink) !important; margin: 0 !important; }
#calendar .day-event .event-customer { grid-column: 1; font-size: 12px; color: var(--dv-muted) !important; }
#calendar .day-event .event-customer .event-pax { color: var(--dv-muted) !important; }
#calendar .day-event .dv-cal-status,
#calendar .day-event .event-status { grid-area: status; justify-self: end; }
#calendar .day-event .dv-cal-status { background: var(--dv-surface) !important; }

/* List */
#calendar .calendar-grid.list-view { background: var(--dv-surface) !important; gap: 0 !important; padding: 0 !important; }
#calendar .list-date-group { margin: 0 !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: none !important; }
#calendar .list-date-header {
    display: flex !important; align-items: baseline; justify-content: flex-start !important; gap: 8px; padding: 8px 16px !important; margin: 0 !important;
    background: var(--dv-subtle) !important; border: 0 !important; border-top: 1px solid var(--dv-border) !important;
    border-radius: 0 !important; color: var(--dv-ink-2) !important;
}
#calendar .list-date-group:first-child .list-date-header { border-top: 0 !important; }
#calendar .list-date-header h3 { font-size: 13px !important; font-weight: 600 !important; margin: 0 !important; color: var(--dv-ink-2) !important; text-transform: capitalize; }
#calendar .list-date-header .booking-count { font-size: 12px !important; color: var(--dv-muted) !important; background: none !important; padding: 0 !important; }
#calendar .list-date-header .booking-count::before { content: '· '; }
#calendar .list-bookings { display: flex; flex-direction: column; gap: 0 !important; padding: 0 !important; }
#calendar .list-booking {
    display: grid !important; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 16px;
    padding: 12px 16px !important; margin: 0 !important; background: var(--dv-surface) !important;
    border: 0 !important; border-top: 1px solid var(--dv-hair) !important; border-radius: 0 !important;
    box-shadow: none !important; transform: none !important; cursor: pointer;
}
#calendar .list-booking:hover { background: var(--dv-subtle) !important; box-shadow: none !important; }
#calendar .list-booking .booking-time { display: flex; flex-wrap: nowrap; white-space: nowrap; gap: 4px; align-items: baseline; font-variant-numeric: tabular-nums; }
#calendar .list-booking .booking-time { flex-direction: row !important; }
#calendar .list-booking .booking-time .time { font-size: 14px; font-weight: 700; color: var(--dv-ink) !important; }
#calendar .list-booking .booking-time .duration { font-size: 12px; color: var(--dv-muted) !important; }
#calendar .list-booking .booking-details { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
#calendar .list-booking .booking-title { flex: 1 0 100%; font-size: 14px !important; font-weight: 600 !important; margin: 0 !important; color: var(--dv-ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#calendar .list-booking .booking-customer,
#calendar .list-booking .booking-participants { font-size: 12px !important; color: var(--dv-muted) !important; margin: 0 !important; }
#calendar .list-booking .booking-status { display: flex; flex-direction: row !important; align-items: center; gap: 10px; }
#calendar .list-booking .booking-ref { font: 500 12px 'JetBrains Mono', ui-monospace, monospace; color: var(--dv-muted) !important; }
#calendar .calendar-grid.list-view .no-events { padding: 48px 16px !important; color: var(--dv-muted) !important; }


/* "(?)" help links next to page titles: one compact inline style */
.page-section :is(.pc-help, .tg-help, .dispatch-help) {
    display: inline-flex !important; align-items: center; justify-content: center;
    min-height: 0 !important; min-width: 0 !important; height: 24px; padding: 0 4px !important; margin: 0 !important;
    border: 0 !important; background: none !important; box-shadow: none !important;
    color: var(--dv-primary-ink) !important; font: 700 15px/1 Inter, 'Segoe UI', sans-serif !important; font-family: inherit !important;
    text-decoration: none; cursor: pointer; align-self: center;
}
.page-section :is(.pc-help, .tg-help, .dispatch-help):hover { text-decoration: underline; }
#dispatch .dispatch-title-block h1.page-title { font-size: 28px !important; font-weight: 700; letter-spacing: -0.02em; color: var(--dv-ink); line-height: 1.2; }
#dispatch .dispatch-title-block p.page-subtitle { font-size: 14px !important; color: var(--dv-muted); margin: 2px 0 0; }


/* ===========================================================================
   QR SCANNER (#qr-scanner) — lower section
   =========================================================================== */
#qr-scanner .qr-scanner-card {
    background: var(--dv-surface) !important; border: 1px solid var(--dv-border) !important;
    border-radius: var(--dv-radius) !important; box-shadow: var(--dv-shadow) !important; padding: 20px !important;
}
#qr-scanner .qr-combined-label {
    text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; font-weight: 600 !important;
    color: var(--dv-ink) !important; margin-bottom: 12px !important;
}
#qr-scanner .manual-entry-input {
    height: 38px !important; min-height: 38px !important; padding: 0 12px !important; font-size: 14px !important;
    border: 1px solid var(--dv-control) !important; border-radius: var(--dv-radius-control) !important;
    background: var(--dv-surface) !important; color: var(--dv-ink) !important; box-shadow: none !important;
}
#qr-scanner .manual-entry-btn {
    height: 38px !important; min-height: 38px !important; padding: 0 16px !important; font-size: 14px !important; line-height: 36px !important;
    background: var(--dv-primary) !important; border: 1px solid var(--dv-primary) !important; color: #fff !important;
    border-radius: var(--dv-radius-control) !important; box-shadow: none !important; transform: none !important;
}
#qr-scanner .manual-entry-btn:hover { background: var(--dv-primary-hover) !important; }
#qr-scanner .qr-scanner-card .qr-combined-qr-btn {
    height: 38px !important; min-height: 38px !important; font-size: 14px !important; font-weight: 500 !important; line-height: 36px !important;
    background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-ink) !important;
    border-radius: var(--dv-radius-control) !important; box-shadow: none !important; transform: none !important;
}
#qr-scanner .qr-scanner-card .qr-combined-qr-btn:hover { background: var(--dv-subtle) !important; }
#qr-scanner .qr-scanner-card .qr-combined-qr-btn * { color: inherit !important; }
#qr-scanner .todays-bookings-section { border-top: 0 !important; padding-top: 0 !important; margin-top: 14px !important; }
#qr-scanner .todays-bookings-section > .modern-content-card { padding: 0 !important; overflow: hidden; }
#qr-scanner .todays-bookings-section .modern-section-header {
    margin: 0 !important; padding: 16px 20px !important; border-bottom: 1px solid var(--dv-border);
}
#qr-scanner .todays-bookings-section .modern-section-title { font-size: 15px !important; }
#qr-scanner .todays-bookings-section .modern-section-header p { font-size: 13px !important; color: var(--dv-muted) !important; margin: 2px 0 0 !important; }
#qr-scanner .todays-bookings-section .modern-section-header :is(#filter-status, .search-input) {
    height: 36px !important; min-height: 36px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 13px !important;
    border: 1px solid var(--dv-control) !important; border-radius: var(--dv-radius-control) !important; box-shadow: none !important;
}
#qr-scanner .todays-bookings-section .modern-section-header .btn {
    height: 36px !important; min-height: 36px !important; line-height: 34px !important; padding: 0 12px !important; font-size: 13px !important;
    background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-ink) !important;
    border-radius: var(--dv-radius-control) !important; box-shadow: none !important;
}
#qr-scanner .todays-bookings-section .modern-section-header .btn:hover { background: var(--dv-subtle) !important; }
#qr-scanner #todays-bookings-table-container { overflow-x: auto !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
#qr-scanner .todays-bookings-section .data-table { min-width: 0; width: 100%; }
#qr-scanner .todays-bookings-section .data-table th { padding: 10px 12px !important; font-size: 12px !important; }
#qr-scanner .todays-bookings-section .data-table td { padding: 11px 12px !important; font-size: 13px !important; color: var(--dv-ink) !important; }
#qr-scanner .todays-bookings-section .time-badge {
    height: 22px; padding: 0 8px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important;
    background: var(--dv-seg) !important; color: var(--dv-ink-2) !important; gap: 4px !important; font-variant-numeric: tabular-nums;
}
#qr-scanner .todays-bookings-section .time-badge.upcoming { background: var(--dv-primary-soft) !important; color: var(--dv-primary-ink) !important; }
#qr-scanner .todays-bookings-section .time-badge.now { background: var(--dv-amber-soft) !important; color: var(--dv-amber) !important; }
#qr-scanner .todays-bookings-section .time-badge.passed { background: var(--dv-seg) !important; color: var(--dv-muted) !important; }
#qr-scanner .todays-bookings-section .status-badge { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; padding: 2px 9px !important; line-height: 18px !important; align-self: flex-start; }
#qr-scanner .todays-bookings-section .status-badge[style*="#d4edda"] { background: var(--dv-green-soft) !important; color: var(--dv-green) !important; }
#qr-scanner .todays-bookings-section .status-badge[style*="#fff3cd"] { background: var(--dv-amber-soft) !important; color: var(--dv-amber) !important; }
#qr-scanner .todays-bookings-section .status-badge[style*="#f8d7da"] { background: var(--dv-red-soft) !important; color: var(--dv-red) !important; }
#qr-scanner .todays-bookings-section .data-table td > div[style*="flex-direction: column"] { gap: 3px !important; }


/* Check-in table: same calm table as Reservas — no emoji, quiet icon actions, fits the card */
#qr-scanner .qs-emo { display: none !important; }
#qr-scanner .todays-bookings-section .modern-section-header > div:last-child { gap: 8px !important; }
#qr-scanner .todays-bookings-section .search-bar { min-width: 260px !important; }
#qr-scanner .todays-bookings-section #filter-status { min-width: 160px !important; padding: 0 30px 0 12px !important; }
#qr-scanner .todays-bookings-section .modern-section-header .btn.qs-refresh {
    width: 36px !important; min-width: 36px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
    color: var(--dv-ink-2) !important; background: var(--dv-surface) !important;
}
#qr-scanner .qs-refresh > span { display: none !important; }
#qr-scanner .qs-refresh svg { margin: 0 !important; width: 16px; height: 16px; }
#qr-scanner .todays-bookings-section .data-table thead th {
    background: var(--dv-subtle) !important; color: var(--dv-muted) !important; font-weight: 600 !important; font-size: 12px !important;
    text-transform: none !important; letter-spacing: 0 !important; white-space: normal !important; line-height: 1.3; border-bottom: 1px solid var(--dv-border) !important;
}
#qr-scanner .todays-bookings-section .data-table :is(th, td) { padding-left: 8px !important; padding-right: 8px !important; }
#qr-scanner .todays-bookings-section .data-table tbody td { vertical-align: middle; border-bottom: 1px solid var(--dv-hair) !important; }
#qr-scanner .todays-bookings-section .data-table tbody tr:last-child td { border-bottom: 0 !important; }
#qr-scanner .todays-bookings-section .data-table tbody tr:hover td { background: var(--dv-subtle) !important; }
#qr-scanner .todays-bookings-section .data-table :is(th, td):first-child { width: 36px; padding-left: 20px !important; }
#qr-scanner .todays-bookings-section .data-table :is(th, td):last-child { padding-right: 20px !important; }
#qr-scanner .todays-bookings-section .data-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--dv-primary); margin: 0; }
#qr-scanner .todays-bookings-section .data-table td strong { font-weight: 600; }
#qr-scanner .todays-bookings-section .data-table td { white-space: normal !important; overflow-wrap: anywhere; }
#qr-scanner .todays-bookings-section .data-table td :is(strong, .time-badge, .status-badge) { white-space: nowrap; overflow-wrap: normal; }
#qr-scanner .todays-bookings-section .data-table td:has(> strong) { white-space: nowrap !important; }
#qr-scanner .todays-bookings-section .time-badge { display: inline-flex !important; align-items: center; }
#qr-scanner .qs-amount { flex-direction: row !important; align-items: center !important; flex-wrap: wrap; gap: 6px !important; }
#qr-scanner .qs-amount strong { font-variant-numeric: tabular-nums; }
#qr-scanner .todays-bookings-section .status-badge { white-space: nowrap; }
#qr-scanner .qs-acts { justify-content: flex-end !important; gap: 2px !important; }
#qr-scanner .qs-acts .btn {
    width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; padding: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center; border-radius: 8px !important;
    background: transparent !important; border: 1px solid transparent !important; color: var(--dv-muted) !important; box-shadow: none !important; transform: none !important;
}
#qr-scanner .qs-acts .btn:hover { background: var(--dv-seg) !important; color: var(--dv-ink) !important; }
#qr-scanner .qs-acts .btn > svg:not(.dv-glyph) { display: none !important; }
#qr-scanner .qs-acts .btn > svg.dv-glyph { width: 17px; height: 17px; }
/* the main action — check in — stays visible as a soft primary button */
#qr-scanner .qs-acts .btn.btn-primary { background: var(--dv-primary-soft) !important; color: var(--dv-primary-ink) !important; }
#qr-scanner .qs-acts .btn.btn-primary:hover { background: var(--dv-primary) !important; color: #fff !important; }

/* QR scanner: bulk-actions button always shown, standard 36px icon button */
#qr-scanner #bulkActionsTodaysBtn {
    display: inline-flex !important; position: relative; align-items: center; justify-content: center;
    width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; padding: 0 !important;
    border: 1px solid var(--dv-control) !important; border-radius: var(--dv-radius-control) !important;
    background: var(--dv-surface) !important; color: var(--dv-ink-2) !important; box-shadow: none !important;
}
#qr-scanner #bulkActionsTodaysBtn:hover { background: var(--dv-subtle) !important; }
#qr-scanner #bulkActionsTodaysBtn svg { width: 16px; height: 16px; margin: 0 !important; }
#qr-scanner #bulkActionsTodaysBtn .bulk-count-badge {
    position: absolute; top: -6px !important; right: -6px !important; min-width: 16px; height: 16px; padding: 0 4px !important;
    border-radius: 999px !important; font-size: 10px !important; line-height: 16px !important;
    background: var(--dv-primary) !important; color: #fff !important;
}
#qr-scanner #bulkActionsTodaysBtn.dv-nosel .bulk-count-badge { display: none !important; }


/* ---------------------------------------------------------------------------
   INVOICES (#invoices) — calm status chips, colour only on payment
   ------------------------------------------------------------------------- */
#invoicesTableBody td:is(:nth-child(6), :nth-child(7)) > span {
    height: 22px !important; padding: 0 8px !important; border-radius: 999px !important;
    font-size: 12px !important; font-weight: 600 !important; line-height: 22px !important; white-space: nowrap;
    background: var(--dv-seg) !important; color: var(--dv-ink-2) !important;
}
#invoicesTableBody td:nth-child(6) > span[style*="#fecaca"] { background: var(--dv-red-soft) !important; color: var(--dv-red) !important; }
#invoicesTableBody td:nth-child(6) > span[style*="#e5e7eb"] { background: transparent !important; color: var(--dv-muted) !important; box-shadow: inset 0 0 0 1px var(--dv-border); }
#invoicesTableBody td:nth-child(7) > span[style*="#d1fae5"] { background: var(--dv-green-soft) !important; color: var(--dv-green) !important; }
#invoicesTableBody td:nth-child(7) > span[style*="#fed7aa"] { background: var(--dv-amber-soft) !important; color: var(--dv-amber) !important; }
#invoicesTableBody td:nth-child(7) > span[style*="#bfdbfe"] { background: var(--dv-primary-soft) !important; color: var(--dv-primary-ink) !important; }
#invoicesTable :is(th, td):nth-child(5) { text-align: right !important; font-variant-numeric: tabular-nums; }
#invoicesTable th:nth-child(5) { padding-right: 28px !important; }
#invoicesTableBody td:nth-child(5) { padding-right: 28px !important; font-weight: 500; }
#invoicesTableBody td:nth-child(5) > div + div { font-weight: 400; }
#invoices .stats-grid .stat-icon.revenue,
#invoices .stats-grid .stat-icon.bookings { background: var(--dv-seg) !important; color: var(--dv-ink-2) !important; }
#invoices .stats-grid .stat-icon.customers { background: var(--dv-green-soft) !important; color: var(--dv-green) !important; }
#invoices .stats-grid .stat-icon.tours { background: var(--dv-red-soft) !important; color: var(--dv-red) !important; }


/* ---------------------------------------------------------------------------
   REPORTS (#reports) — sections / builder as header buttons
   ------------------------------------------------------------------------- */
#reportFiltersCard .tzr-toolbar-top { justify-content: space-between; align-items: flex-end; }
#reportFiltersCard .dv-rep-tools { display: flex; gap: 8px; margin-left: auto; }
#reportFiltersCard .dv-rep-tool {
    display: inline-flex !important; align-items: center; gap: 7px; height: 36px !important; min-height: 36px !important;
    padding: 0 12px !important; white-space: nowrap; font-size: 13.5px !important; font-weight: 500 !important;
}
#reportFiltersCard .dv-rep-tool svg { flex-shrink: 0; color: var(--dv-muted); }
#reportFiltersCard .dv-rep-tool .dv-rep-chev { transition: transform 0.15s; }
#reportFiltersCard .dv-rep-tool.is-on { background: var(--dv-primary-soft) !important; border-color: var(--dv-primary-line, var(--dv-control)) !important; color: var(--dv-primary-ink) !important; }
#reportFiltersCard .dv-rep-tool.is-on svg { color: currentColor; }
#reportFiltersCard .dv-rep-tool.is-on .dv-rep-chev { transform: rotate(180deg); }
#reportFiltersCard .dv-rep-count {
    font-size: 11.5px; font-weight: 600; color: var(--dv-muted); background: var(--dv-seg);
    border-radius: 999px; padding: 0 6px; line-height: 18px; font-variant-numeric: tabular-nums;
}
#reportFiltersCard .dv-rep-count:empty { display: none; }
#reportFiltersCard .dv-rep-coll { border-top: 0 !important; margin-top: 0 !important; }
#reportFiltersCard .dv-rep-coll > div:first-child { display: none !important; }
#reportFiltersCard :is(#reportSectionsPickerBody, #customBuilderBody) {
    border-top: 1px solid var(--dv-border); margin-top: 12px; padding-top: 14px !important;
}


/* ---------------------------------------------------------------------------
   SERVICE OPTION TABLES — categories, extras, pickup locations, form fields
   Inline-styled badges from the renderers mapped onto the chip scale:
   types and linked services are neutral; only status carries colour.
   ------------------------------------------------------------------------- */
:is(#categoriesTable, #serviceExtrasTable, #pickupLocationsTable, #customFormFieldsTable) td > span[style*="padding: 0.25rem 0.75rem"],
:is(#categoriesTable, #serviceExtrasTable, #pickupLocationsTable, #customFormFieldsTable) td > div > span[style*="#e8f5e9"],
:is(#categoriesTable, #serviceExtrasTable, #pickupLocationsTable, #customFormFieldsTable) td > div > span[style*="color: #666"] {
    display: inline-flex !important; align-items: center; height: 22px; padding: 0 8px !important;
    border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important;
    white-space: nowrap; background: var(--dv-seg) !important; color: var(--dv-ink-2) !important; border: 0 !important;
}
:is(#categoriesTable, #serviceExtrasTable, #pickupLocationsTable, #customFormFieldsTable) td > div > span[style*="#e8f5e9"] { font-weight: 500 !important; }
:is(#categoriesTable, #serviceExtrasTable, #pickupLocationsTable, #customFormFieldsTable) td > div > span[style*="color: #666"] { background: transparent !important; color: var(--dv-muted) !important; padding: 0 4px !important; font-weight: 500 !important; }
:is(#categoriesTable, #serviceExtrasTable, #pickupLocationsTable, #customFormFieldsTable) td > div[style*="flex-wrap"] { gap: 4px !important; }
/* Status is always the second-to-last column */
:is(#serviceExtrasTable, #pickupLocationsTable, #customFormFieldsTable) td:nth-last-child(2) > span[style*="#27ae60"] { background: var(--dv-green-soft) !important; color: var(--dv-green) !important; }
:is(#serviceExtrasTable, #pickupLocationsTable, #customFormFieldsTable) td:nth-last-child(2) > span[style*="#95a5a6"] { background: transparent !important; color: var(--dv-muted) !important; box-shadow: inset 0 0 0 1px var(--dv-border); }
/* "None" → quiet dash */
:is(#categoriesTable, #serviceExtrasTable, #pickupLocationsTable, #customFormFieldsTable) td > span[style*="color: #999"]:only-child { font-size: 0 !important; }
:is(#categoriesTable, #serviceExtrasTable, #pickupLocationsTable, #customFormFieldsTable) td > span[style*="color: #999"]:only-child::after { content: "—"; font-size: 13px; color: var(--dv-faint, var(--dv-muted)); }
#pickupLocationsTable td > span[style*="#9ca3af"] { color: var(--dv-faint, var(--dv-muted)) !important; font-size: 13px !important; }
/* One-line categories / types, even-width numbers */
#serviceExtrasTable td:nth-child(2), #pickupLocationsTable td:nth-child(4) { white-space: nowrap; }
#serviceExtrasTable td:is(:nth-child(3), :nth-child(4)), #categoriesTable td:nth-child(4), #pickupLocationsTable td:nth-child(5) { font-variant-numeric: tabular-nums; white-space: nowrap; }
#customFormFieldsTable td:first-child small { color: var(--dv-muted) !important; font-size: 12px; }

/* ---- Pricing rules: rule rows, adjustment chips, toggles, quiet actions ---- */
.page-section .rule-item,
[data-theme="dark"] .page-section .rule-item {
    background: var(--dv-surface) !important; border: 1px solid var(--dv-border) !important;
    border-radius: var(--dv-radius-control) !important; padding: 12px 14px !important; margin-bottom: 8px !important;
}
.page-section .rule-item:hover, [data-theme="dark"] .page-section .rule-item:hover { background: var(--dv-subtle) !important; border-color: var(--dv-control) !important; }
.page-section .rule-item-name, [data-theme="dark"] .page-section .rule-item-name { font-size: 14px; color: var(--dv-ink) !important; margin-bottom: 2px !important; }
.page-section .rule-item-details, [data-theme="dark"] .page-section .rule-item-details { font-size: 13px !important; color: var(--dv-muted) !important; }
.page-section .adjustment-badge {
    display: inline-flex !important; align-items: center; height: 22px; padding: 0 8px !important; border-radius: 999px !important;
    font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; font-variant-numeric: tabular-nums; border: 0 !important;
}
.page-section .adjustment-badge.discount { background: var(--dv-green-soft) !important; color: var(--dv-green) !important; }
.page-section .adjustment-badge.surcharge { background: var(--dv-amber-soft) !important; color: var(--dv-amber) !important; }
.page-section .rule-toggle { width: 40px; height: 24px; }
.page-section .rule-toggle-slider { background-color: #cfd5e1 !important; }
.page-section .rule-toggle-slider:before { width: 20px; height: 20px; left: 2px; bottom: 2px; box-shadow: 0 1px 2px rgba(20, 24, 43, 0.25); }
.page-section .rule-toggle input:checked + .rule-toggle-slider { background-color: var(--dv-primary) !important; }
.page-section .rule-toggle input:checked + .rule-toggle-slider:before { transform: translateX(16px); }
.page-section .rule-item-actions { gap: 4px !important; }
.page-section .rule-item-actions .btn-icon {
    width: 30px; height: 30px; min-width: 30px; min-height: 30px; padding: 0 !important; border-radius: 8px !important;
    background: transparent !important; color: var(--dv-muted) !important; border: 0 !important; box-shadow: none !important;
}
.page-section .rule-item-actions .btn-icon:hover { background: var(--dv-seg) !important; color: var(--dv-ink) !important; }
.page-section .rule-item-actions .btn-icon-danger:hover { background: var(--dv-red-soft) !important; color: var(--dv-red) !important; }

/* ---- Reviews: soft status chips, smaller stars ---- */
#reviews-management .review-status-badge.approved { background: var(--dv-green-soft) !important; color: var(--dv-green) !important; }
#reviews-management .review-status-badge.pending { background: var(--dv-amber-soft) !important; color: var(--dv-amber) !important; }
#reviews-management .review-status-badge.rejected { background: var(--dv-red-soft) !important; color: var(--dv-red) !important; }
#reviews-management .review-status-badge:not(.approved):not(.pending):not(.rejected) { background: var(--dv-seg) !important; color: var(--dv-ink-2) !important; }
#reviews-management #reviewsTableBody .star-rating { font-size: 15px !important; letter-spacing: 1px; color: var(--dv-amber-mark) !important; white-space: nowrap; }
#reviews-management #reviewsTableBody .review-excerpt { color: var(--dv-muted); font-size: 13px; }


/* ---------------------------------------------------------------------------
   WEBSITE SETTINGS — group dividers between tabs, public URL bar
   ------------------------------------------------------------------------- */
#website-settings .dv-ws-tabs .tab-button.dv-wstab--gstart { position: relative; margin-left: 12px !important; }
#website-settings .dv-ws-tabs .tab-button.dv-wstab--gstart::before {
    content: ""; position: absolute; left: -18px; top: 50%; width: 1px; height: 16px; margin-top: -9px; background: var(--dv-border);
}
#website-url-banner.dv-urlbar {
    background: var(--dv-surface) !important; border: 1px solid var(--dv-border) !important; border-radius: var(--dv-radius) !important;
    box-shadow: var(--dv-shadow) !important; padding: 14px 16px !important; margin-bottom: 14px !important; color: var(--dv-ink) !important;
}
#website-url-banner.dv-urlbar > div { align-items: center !important; gap: 14px !important; }
#website-url-banner.dv-urlbar > div > svg {
    width: 36px !important; height: 36px !important; padding: 9px; margin: 0 !important; border-radius: 10px;
    background: var(--dv-primary-soft); color: var(--dv-primary) !important; box-sizing: border-box;
}
#website-url-banner.dv-urlbar > div > div:not(.dv-urlbar-acts) { min-width: 0; }
#website-url-banner.dv-urlbar [data-i18n="website.yourPublicWebsiteUrl"] {
    font-size: 12px !important; font-weight: 600 !important; color: var(--dv-muted) !important; margin: 0 0 2px !important;
}
#website-url-banner.dv-urlbar [data-i18n="website.bookingSiteAccessible"] { display: none; }
#website-url-banner.dv-urlbar [data-i18n="website.yourPublicWebsiteUrl"] + div { margin: 0 !important; }
#website-url-banner.dv-urlbar #current-website-url {
    font-size: 15px !important; font-weight: 600 !important; color: var(--dv-ink) !important; word-break: break-all;
}
#website-url-banner.dv-urlbar #current-website-url:hover { color: var(--dv-primary-ink) !important; text-decoration: underline !important; }
#website-url-banner.dv-urlbar #custom-domain-message,
#website-url-banner.dv-urlbar #default-url-message { font-size: 12.5px !important; margin-top: 2px !important; color: var(--dv-muted) !important; }
#website-url-banner.dv-urlbar #custom-domain-message { color: var(--dv-green) !important; }
#website-url-banner.dv-urlbar .dv-urlbar-hint { cursor: pointer; }
#website-url-banner.dv-urlbar .dv-urlbar-hint:hover { color: var(--dv-primary-ink) !important; text-decoration: underline; }
#website-url-banner.dv-urlbar .dv-urlbar-acts { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; }


/* ---------------------------------------------------------------------------
   Active / Inactive badges in tables (users, templates, schedules, vouchers…)
   Inactive is "off", not an error: neutral outline instead of red.
   ------------------------------------------------------------------------- */
.page-section table td .status-badge.status-active:not(button) { background: var(--dv-green-soft) !important; color: var(--dv-green) !important; text-transform: none !important; }
.page-section table td .status-badge.status-inactive:not(button) { background: transparent !important; color: var(--dv-muted) !important; border: 1px solid var(--dv-control) !important; padding: 1px 8px !important; text-transform: none !important; }

/* ---- Mass mailing (#mass-mailing) ---- */
#campaignsTableBody td:nth-child(4) > span {
    display: inline-block !important; height: 22px; padding: 0 8px !important; border-radius: 999px !important;
    font-size: 12px !important; font-weight: 600 !important; line-height: 22px !important; white-space: nowrap; text-transform: lowercase;
    background: var(--dv-seg) !important; color: var(--dv-ink-2) !important;
}
#campaignsTableBody td:nth-child(4) > span::first-letter { text-transform: uppercase; }
#campaignsTableBody td:nth-child(4) > span[style*="#10b981"] { background: var(--dv-green-soft) !important; color: var(--dv-green) !important; }
#campaignsTableBody td:nth-child(4) > span[style*="#3b82f6"] { background: var(--dv-primary-soft) !important; color: var(--dv-primary-ink) !important; }
#campaignsTableBody td:nth-child(4) > span[style*="#f59e0b"] { background: var(--dv-amber-soft) !important; color: var(--dv-amber) !important; }
#campaignsTableBody td:nth-child(4) > span[style*="#ef4444"] { background: var(--dv-red-soft) !important; color: var(--dv-red) !important; }
#campaignsTableBody td:is(:nth-child(3), :nth-child(5), :nth-child(6), :nth-child(7)) { white-space: nowrap; font-variant-numeric: tabular-nums; }
#campaignsTableBody td:nth-child(6) > span { color: var(--dv-primary-ink) !important; text-decoration-color: var(--dv-faint) !important; }
#mass-mailing .stats-grid .stat-icon.bookings { background: var(--dv-seg) !important; color: var(--dv-ink-2) !important; }
#mass-mailing .stats-grid .stat-icon.tours { background: var(--dv-green-soft) !important; color: var(--dv-green) !important; }
#mass-mailing .stats-grid .stat-icon.revenue { background: var(--dv-amber-soft) !important; color: var(--dv-amber) !important; }
#mass-mailing .stats-grid .stat-icon.customers { background: var(--dv-red-soft) !important; color: var(--dv-red) !important; }

/* ---- Scheduled reports (#scheduled-reports) ---- */
#reportSubscriptionsTable td small { color: var(--dv-muted) !important; font-size: 12px; }
#reportSubscriptionsTable td:is(:nth-child(3), :nth-child(5)) { white-space: nowrap; font-variant-numeric: tabular-nums; }


/* ---- Advanced settings: tabs sit on the page, not inside a card ---- */
#advanced-settings .modern-content-card:has(> .sub-nav-tabs) {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important; border-radius: 0 !important; overflow: visible !important;
}


/* ---------------------------------------------------------------------------
   GALLERY (#gallery-management) — photo-first tiles
   The card becomes a one-column grid and .gallery-item-content uses
   display:contents, so badges and actions can sit on top of the photo
   (grid cell 1/1) without touching the renderer's markup.
   ------------------------------------------------------------------------- */
#gallery-management .gallery-management-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; gap: 16px !important; }
#gallery-management .gallery-item-card {
    display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; position: relative;
    background: var(--dv-surface) !important; border: 1px solid var(--dv-border); border-radius: var(--dv-radius) !important;
    box-shadow: none !important; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s;
}
#gallery-management .gallery-item-card:hover { border-color: var(--dv-control); box-shadow: var(--dv-shadow) !important; }
#gallery-management .gallery-item-image {
    grid-area: 1 / 1; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
    background: var(--dv-seg); transition: filter 0.15s;
}
#gallery-management .gallery-item-card:hover .gallery-item-image { filter: brightness(0.92); }
#gallery-management .gallery-item-content { display: contents; }

/* Badges: bottom-left of the photo */
#gallery-management .gallery-item-meta {
    grid-area: 1 / 1; align-self: end; justify-self: start; z-index: 1; pointer-events: none;
    display: flex; flex-wrap: wrap; gap: 4px !important; margin: 0 10px 10px !important;
}
#gallery-management .gallery-badge {
    display: inline-flex !important; align-items: center; gap: 4px; height: 22px; padding: 0 8px !important; border-radius: 999px !important;
    font-size: 11.5px !important; font-weight: 600 !important; line-height: 1;
    background: rgba(17, 24, 39, 0.62) !important; color: #ffffff !important;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#gallery-management .gallery-badge.featured { background: rgba(254, 243, 199, 0.95) !important; color: #8a4b05 !important; }
#gallery-management .gallery-badge.featured::before { content: "★"; font-size: 11px; }
#gallery-management .gallery-badge[style*="#fee2e2"] { background: rgba(253, 241, 240, 0.95) !important; color: #a3271e !important; }

/* Actions: top-right of the photo, revealed on hover / keyboard focus */
#gallery-management .gallery-item-actions {
    grid-area: 1 / 1; align-self: start; justify-self: end; z-index: 1; display: flex; gap: 6px !important; margin: 10px !important;
    opacity: 0; transform: translateY(-2px); transition: opacity 0.15s, transform 0.15s;
}
#gallery-management .gallery-item-card:is(:hover, :focus-within) .gallery-item-actions { opacity: 1; transform: none; }
#gallery-management .gallery-item-actions button {
    flex: 0 0 auto !important; height: 28px; min-height: 28px; padding: 0 10px !important; border-radius: 8px !important;
    font-size: 12px !important; font-weight: 600 !important; line-height: 1;
    background: rgba(255, 255, 255, 0.94) !important; color: #14182b !important; box-shadow: 0 1px 3px rgba(20, 24, 43, 0.2);
}
#gallery-management .gallery-item-actions button:hover { background: #ffffff !important; }
#gallery-management .gallery-item-actions .btn-delete:hover { background: #fdf1f0 !important; color: #a3271e !important; }

/* Caption under the photo */
#gallery-management .gallery-item-title {
    grid-row: 2; margin: 0 !important; padding: 10px 12px 0; font-size: 14px !important; font-weight: 600 !important;
    color: var(--dv-ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#gallery-management .gallery-item-content > p {
    grid-row: 3; margin: 0 !important; padding: 2px 12px 0; font-size: 12.5px !important; color: var(--dv-muted) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#gallery-management .gallery-item-card::after { content: ""; grid-row: 4; height: 12px; }


/* ---------------------------------------------------------------------------
   CONTACT SUBMISSIONS (#contact-submissions) — inbox rows instead of boxes
   .submission-header is display:contents so name/email and date join the
   row grid:  [sender] [subject / message] [badges] [date]
   ------------------------------------------------------------------------- */
#contact-submissions .modern-content-card:has(> #submissionsList) { padding: 0 !important; overflow: hidden; }
#contact-submissions .submissions-list { gap: 0 !important; }
#contact-submissions .submission-card {
    display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) auto 150px; column-gap: 20px; align-items: center;
    background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--dv-border) !important;
    border-radius: 0 !important; padding: 12px 20px 12px 30px !important; box-shadow: none !important; position: relative;
}
#contact-submissions .submission-card:last-child { border-bottom: 0 !important; }
#contact-submissions .submission-card:hover { background: var(--dv-subtle) !important; box-shadow: none !important; }
#contact-submissions .submission-header { display: contents; }
#contact-submissions .submission-header > div:first-child { grid-column: 1; grid-row: 1 / 3; min-width: 0; }
#contact-submissions .submission-name {
    font-size: 14px !important; font-weight: 500 !important; color: var(--dv-ink) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#contact-submissions .submission-email { font-size: 12.5px !important; color: var(--dv-muted) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#contact-submissions .submission-subject {
    grid-column: 2; grid-row: 1; margin: 0 !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--dv-ink) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#contact-submissions .submission-message {
    grid-column: 2; grid-row: 2; font-size: 13px !important; line-height: 1.45 !important; color: var(--dv-muted) !important;
    display: block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset !important;
}
#contact-submissions .submission-subject:empty + .submission-message,
#contact-submissions .submission-card:not(:has(.submission-subject)) .submission-message { grid-row: 1 / 3; }
#contact-submissions .submission-badges { grid-column: 3; grid-row: 1 / 3; margin: 0 !important; gap: 4px !important; }
#contact-submissions .submission-badge {
    display: inline-flex !important; align-items: center; height: 22px; padding: 0 8px !important; font-size: 11.5px !important;
    font-weight: 600 !important; background: var(--dv-seg) !important; color: var(--dv-ink-2) !important; white-space: nowrap;
}
#contact-submissions .submission-badge.unread { background: var(--dv-primary-soft) !important; color: var(--dv-primary-ink) !important; }
#contact-submissions .submission-date {
    grid-column: 4; grid-row: 1 / 3; justify-self: end; font-size: 12.5px !important; color: var(--dv-muted) !important;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* Unread: blue dot + stronger text, no tinted box */
#contact-submissions .submission-card.unread { background: transparent !important; border-left: 0 !important; }
#contact-submissions .submission-card.unread::before {
    content: ""; position: absolute; left: 13px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--dv-primary);
}
#contact-submissions .submission-card.unread :is(.submission-name, .submission-subject) { font-weight: 700 !important; }
#contact-submissions .submission-card.unread .submission-date { color: var(--dv-ink) !important; font-weight: 600; }


/* ---------------------------------------------------------------------------
   ADVANCED SETTINGS › Data management (cleanup + backup/restore)
   Inline-styled blocks from the page/renderers mapped onto tokens.
   ------------------------------------------------------------------------- */
/* Danger notice: soft red, not a red slab */
#advanced-tab-data-cleanup > .modern-content-card > div[style*="#fee2e2"] {
    background: var(--dv-red-soft) !important; border: 1px solid var(--dv-red-line) !important; border-radius: var(--dv-radius-control) !important;
    padding: 14px 16px !important; margin-bottom: 22px !important;
}
#advanced-tab-data-cleanup > .modern-content-card > div[style*="#fee2e2"] h3 { font-size: 14px !important; font-weight: 700 !important; color: var(--dv-red) !important; margin: 0 0 2px !important; }
#advanced-tab-data-cleanup > .modern-content-card > div[style*="#fee2e2"] p { font-size: 13px !important; color: var(--dv-ink-2) !important; }
#advanced-tab-data-cleanup > .modern-content-card > div[style*="#fee2e2"] svg { color: var(--dv-red-mark) !important; width: 18px; height: 18px; }
/* Stepper */
#advanced-tab-data-cleanup .cleanup-step .step-number { width: 26px; height: 26px; font-size: 12.5px; background: var(--dv-seg); color: var(--dv-muted); }
#advanced-tab-data-cleanup .cleanup-step.active .step-number { background: var(--dv-ink); color: var(--dv-surface); }
#advanced-tab-data-cleanup .cleanup-step.completed .step-number { background: var(--dv-green-mark); color: #fff; }
#advanced-tab-data-cleanup .cleanup-step span { font-size: 12.5px; color: var(--dv-muted); }
#advanced-tab-data-cleanup .cleanup-step.active span { color: var(--dv-ink); font-weight: 600; }
#advanced-tab-data-cleanup .step-connector { background: var(--dv-border) !important; }
/* Filters */
#advanced-tab-data-cleanup #cleanupStep1 > h4 { font-size: 15px !important; color: var(--dv-ink) !important; margin-bottom: 2px !important; }
#advanced-tab-data-cleanup #cleanupStep1 > p { font-size: 13px !important; color: var(--dv-muted) !important; margin-bottom: 16px !important; }
#advanced-tab-data-cleanup #cleanupStep1 label[style] { font-size: 13px !important; color: var(--dv-ink-2) !important; margin-bottom: 4px !important; }
#advanced-tab-data-cleanup #cleanupStep1 input:is([type="number"], [type="date"], [type="text"]) {
    height: 36px; padding: 0 12px !important; font-size: 14px !important; border: 1px solid var(--dv-control) !important;
    border-radius: var(--dv-radius-control) !important; background: var(--dv-surface) !important; color: var(--dv-ink) !important;
}
#advanced-tab-data-cleanup #cleanupStep1 small[style] { font-size: 12px !important; color: var(--dv-muted) !important; }
/* Record-type cards */
#advanced-tab-data-cleanup #cleanupEntityCards { gap: 10px !important; }
#advanced-tab-data-cleanup .cleanup-entity-card {
    border: 1px solid var(--dv-border); border-radius: var(--dv-radius-control); padding: 12px 14px; background: var(--dv-surface);
}
#advanced-tab-data-cleanup .cleanup-entity-card:hover { border-color: var(--dv-control); box-shadow: none; }
#advanced-tab-data-cleanup .cleanup-entity-card.selected { border-color: var(--dv-red-line); background: var(--dv-red-soft); }
#advanced-tab-data-cleanup .cleanup-entity-card .entity-header { margin-bottom: 6px; gap: 8px; }
#advanced-tab-data-cleanup .cleanup-entity-card .entity-header input[type="checkbox"] { width: 16px; height: 16px; }
#advanced-tab-data-cleanup .cleanup-entity-card .entity-name { font-size: 13.5px; color: var(--dv-ink); }
#advanced-tab-data-cleanup .cleanup-entity-card .entity-count { font-size: 22px; color: var(--dv-ink); margin-bottom: 2px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
#advanced-tab-data-cleanup .cleanup-entity-card.selected .entity-count { color: var(--dv-red); }
#advanced-tab-data-cleanup .cleanup-entity-card .entity-count.zero { color: var(--dv-faint); }
#advanced-tab-data-cleanup .cleanup-entity-card .entity-breakdown { font-size: 12px; color: var(--dv-muted); }
#advanced-tab-data-cleanup .cleanup-entity-card.disabled { opacity: 0.6; }
#advanced-tab-data-cleanup #lastCleanupInfo { background: transparent !important; padding: 0 !important; font-size: 13px; margin-bottom: 14px !important; }
#advanced-tab-data-cleanup #lastCleanupInfo span { color: var(--dv-muted) !important; }
#advanced-tab-data-cleanup #lastCleanupDate { color: var(--dv-ink) !important; }
#advanced-tab-data-cleanup #cleanupHistoryDetails { margin-top: 22px !important; padding-top: 16px !important; border-top-color: var(--dv-border) !important; }
#advanced-tab-data-cleanup #cleanupHistoryDetails summary h4 { font-size: 14px !important; color: var(--dv-ink) !important; }
#advanced-tab-data-cleanup #cleanupHistoryContainer { background: transparent !important; border: 1px solid var(--dv-border); border-radius: var(--dv-radius-control) !important; }

/* Backup / restore intro blocks: neutral cards instead of purple / green gradients */
#advanced-tab-backup :is(div[style*="#667eea 0%"], div[style*="#10b981 0%"]),
[data-theme="dark"] #advanced-settings #advanced-tab-backup :is(div[style*="#667eea 0%"], div[style*="#10b981 0%"]) {
    background: var(--dv-subtle) !important; border: 1px solid var(--dv-border) !important; border-radius: var(--dv-radius-control) !important;
    color: var(--dv-ink) !important; padding: 14px 16px !important; box-shadow: none !important;
}
#advanced-tab-backup :is(div[style*="#667eea 0%"], div[style*="#10b981 0%"]) h3 { font-size: 14px !important; font-weight: 600 !important; color: var(--dv-ink) !important; margin: 0 0 2px !important; }
#advanced-tab-backup :is(div[style*="#667eea 0%"], div[style*="#10b981 0%"]) p { font-size: 13px !important; color: var(--dv-muted) !important; opacity: 1 !important; }
#advanced-tab-backup :is(div[style*="#667eea 0%"], div[style*="#10b981 0%"]) svg {
    color: var(--dv-primary) !important; background: var(--dv-primary-soft); border-radius: 10px; padding: 9px; width: 36px !important; height: 36px !important; box-sizing: border-box; flex-shrink: 0;
}
#advanced-tab-backup div[style*="#f8f9fa"] { background: transparent !important; border: 1px solid var(--dv-border) !important; border-radius: var(--dv-radius-control) !important; padding: 14px 16px !important; }
#advanced-tab-backup div[style*="#f8f9fa"] h4 { font-size: 13.5px !important; color: var(--dv-ink) !important; margin-bottom: 8px !important; }
#advanced-tab-backup div[style*="#f8f9fa"] ul { font-size: 13px !important; color: var(--dv-muted) !important; line-height: 1.75 !important; padding-left: 1.1rem !important; }
#advanced-tab-backup .section-title + p, #advanced-tab-backup h3 + p[style] { font-size: 13px !important; color: var(--dv-muted) !important; }
#advanced-tab-backup #backupLastRun { color: var(--dv-green) !important; font-size: 12.5px !important; }
#advanced-tab-backup #restoreDropZone { border: 1.5px dashed var(--dv-control) !important; background: var(--dv-subtle); border-radius: var(--dv-radius-control) !important; padding: 24px !important; }
#advanced-tab-backup #restoreDropZone p { font-size: 13px !important; color: var(--dv-muted) !important; }

/* Backup history: one bordered list, quiet row actions, scrolls after ~8 rows */
#advanced-tab-backup #backupHistoryList:has(> div) {
    border: 1px solid var(--dv-border); border-radius: var(--dv-radius-control); padding: 0 14px; max-height: 470px; overflow-y: auto;
}
#advanced-tab-backup #backupHistoryList > div {
    border: 0 !important; border-bottom: 1px solid var(--dv-border) !important; border-radius: 0 !important;
    margin: 0 !important; padding: 10px 0 !important; background: transparent !important;
}
#advanced-tab-backup #backupHistoryList > div:last-child { border-bottom: 0 !important; }
#advanced-tab-backup #backupHistoryList strong { font-size: 13.5px !important; font-weight: 600 !important; color: var(--dv-ink) !important; }
#advanced-tab-backup #backupHistoryList strong ~ span {
    display: inline-flex !important; align-items: center; height: 20px; padding: 0 7px !important; border: 0 !important;
    border-radius: 999px !important; font-size: 11.5px !important; font-weight: 600 !important; background: var(--dv-seg) !important; color: var(--dv-ink-2) !important;
}
#advanced-tab-backup #backupHistoryList strong ~ span[style*="#ecfdf5"] { background: var(--dv-green-soft) !important; color: var(--dv-green) !important; }
#advanced-tab-backup #backupHistoryList strong ~ span[style*="#fef2f2"] { background: var(--dv-red-soft) !important; color: var(--dv-red) !important; }
#advanced-tab-backup #backupHistoryList div[style*="font-size:0.78rem"] { font-size: 12px !important; color: var(--dv-muted) !important; font-variant-numeric: tabular-nums; }
#advanced-tab-backup #backupHistoryList .btn-primary {
    height: 30px; min-height: 30px; padding: 0 10px !important; font-size: 12.5px !important; line-height: 28px !important;
    background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-ink) !important; box-shadow: none !important;
}
#advanced-tab-backup #backupHistoryList .btn-primary:hover { background: var(--dv-subtle) !important; }
#advanced-tab-backup #backupHistoryList .btn-danger {
    width: 30px; height: 30px; min-height: 30px; min-width: 30px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
    background: transparent !important; border: 0 !important; color: var(--dv-muted) !important; box-shadow: none !important;
}
#advanced-tab-backup #backupHistoryList .btn-danger:hover { background: var(--dv-red-soft) !important; color: var(--dv-red) !important; }


/* ---------------------------------------------------------------------------
   ADVANCED SETTINGS › Import (CSV import + Bookly sync)
   ------------------------------------------------------------------------- */
/* Shared stepper look (import + cleanup) */
#advanced-tab-booking-import .import-step .step-number { width: 26px; height: 26px; font-size: 12.5px; background: var(--dv-seg); color: var(--dv-muted); }
#advanced-tab-booking-import .import-step.active .step-number { background: var(--dv-primary); color: #fff; }
#advanced-tab-booking-import .import-step.completed .step-number { background: var(--dv-green-mark); color: #fff; }
#advanced-tab-booking-import .import-step .step-label { font-size: 12.5px; color: var(--dv-muted); }
#advanced-tab-booking-import .import-step.active .step-label { color: var(--dv-ink); font-weight: 600; }
#advanced-tab-booking-import .step-connector { background: var(--dv-border) !important; margin-top: 13px !important; }
#advanced-tab-booking-import #importStepIndicator { margin-bottom: 20px !important; }
/* CSV: the gradient intro repeats the drop zone's text — the drop zone carries it alone */
#advanced-tab-booking-import #importStep1 > div[style*="#667eea 0%"] { display: none !important; }
#advanced-tab-booking-import .csv-dropzone {
    border: 1.5px dashed var(--dv-control) !important; border-radius: var(--dv-radius-control) !important; background: var(--dv-subtle) !important; padding: 32px 24px !important;
}
#advanced-tab-booking-import .csv-dropzone:is(:hover, .dragover) { border-color: var(--dv-primary) !important; background: var(--dv-primary-soft) !important; }
#advanced-tab-booking-import .csv-dropzone p:first-of-type { color: var(--dv-ink) !important; font-size: 14px !important; }
#advanced-tab-booking-import .csv-dropzone p + p { color: var(--dv-muted) !important; font-size: 12.5px !important; }
#advanced-tab-booking-import .csv-dropzone svg { color: var(--dv-primary) !important; }
:is(#advanced-tab-booking-import, #advanced-tab-bookly) .section-title + p[style] { font-size: 13px !important; color: var(--dv-muted) !important; }

/* Bookly: rows, setup notice, options */
#advanced-tab-bookly .settings-row {
    background: transparent !important; border: 1px solid var(--dv-border) !important; border-radius: var(--dv-radius-control) !important;
}
#advanced-tab-bookly .settings-row strong { font-size: 13.5px !important; font-weight: 600 !important; color: var(--dv-ink) !important; }
#advanced-tab-bookly .settings-row p { font-size: 12.5px !important; color: var(--dv-muted) !important; }
#advanced-tab-bookly #booklySetupInstructions,
[data-theme="dark"] #advanced-settings #advanced-tab-bookly #booklySetupInstructions {
    background: var(--dv-subtle) !important; border: 1px solid var(--dv-border) !important; border-radius: var(--dv-radius-control) !important;
    color: var(--dv-ink) !important; padding: 14px 16px !important; box-shadow: none !important;
}
#advanced-tab-bookly #booklySetupInstructions h3 { font-size: 14px !important; font-weight: 600 !important; color: var(--dv-ink) !important; margin: 0 0 4px !important; }
#advanced-tab-bookly #booklySetupInstructions h3 svg { color: var(--dv-primary) !important; width: 16px; height: 16px; }
#advanced-tab-bookly #booklySetupInstructions > p { font-size: 13px !important; color: var(--dv-muted) !important; opacity: 1 !important; margin-bottom: 10px !important; }
#advanced-tab-bookly #booklySetupInstructions > div[style*="rgba(255,255,255,0.2)"] {
    background: var(--dv-surface) !important; border: 1px solid var(--dv-border) !important; -webkit-backdrop-filter: none; backdrop-filter: none !important;
    font-size: 13px; color: var(--dv-ink-2) !important;
}
#advanced-tab-bookly #booklySetupInstructions > div span { opacity: 1 !important; }
#advanced-tab-bookly #booklySetupInstructions .btn-secondary {
    background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-ink) !important;
}
#advanced-tab-bookly h3[style] { font-size: 14px !important; color: var(--dv-ink) !important; }
#advanced-tab-bookly h4[style] { font-size: 14px !important; color: var(--dv-ink) !important; }
#advanced-tab-bookly h4[style] + p { font-size: 12.5px !important; color: var(--dv-muted) !important; }

#advanced-tab-bookly > .modern-content-card > div[style*="border-top"] { border-top: 1px solid var(--dv-border) !important; }

/* Sync stats: neutral tiles, colour only on the number */
#advanced-tab-bookly div[style*="repeat(4, 1fr)"] > div {
    background: var(--dv-surface) !important; border: 1px solid var(--dv-border) !important; border-radius: var(--dv-radius-control) !important;
    padding: 14px !important; text-align: left !important;
}
#advanced-tab-bookly div[style*="repeat(4, 1fr)"] > div > div:first-child { font-size: 22px !important; color: var(--dv-ink) !important; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
#advanced-tab-bookly #booklyStatImported { color: var(--dv-green) !important; }
#advanced-tab-bookly #booklyStatCancelled { color: var(--dv-amber) !important; }
#advanced-tab-bookly #booklyStatFailed { color: var(--dv-red) !important; }
#advanced-tab-bookly div[style*="repeat(4, 1fr)"] > div > div + div { font-size: 12.5px !important; color: var(--dv-muted) !important; }
#advanced-tab-bookly #booklyFailedCard:hover { border-color: var(--dv-red-line) !important; background: var(--dv-red-soft) !important; }
#advanced-tab-bookly #booklyLastSync { font-size: 12.5px !important; color: var(--dv-muted) !important; }

/* Sync log: neutral event chip, status as soft chips, scroll after ~10 rows */
#advanced-tab-bookly #booklySyncLogsTable { max-height: 520px; overflow-y: auto; border: 1px solid var(--dv-border); border-radius: var(--dv-radius-control); }
#advanced-tab-bookly #booklySyncLogsTable thead th { position: sticky; top: 0; z-index: 1; }
#booklySyncLogsBody td > small { font-size: 12.5px; color: var(--dv-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
#booklySyncLogsBody td:nth-child(2) > span {
    background: var(--dv-seg) !important; color: var(--dv-ink-2) !important; border-radius: 6px !important; padding: 2px 7px !important;
    font: 500 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace !important;
}
#booklySyncLogsBody td:nth-child(4) > span {
    display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
#booklySyncLogsBody td:nth-child(4) > span[style*="#28a745"] { background: var(--dv-green-soft); color: var(--dv-green) !important; }
#booklySyncLogsBody td:nth-child(4) > span[style*="#f57c00"] { background: var(--dv-amber-soft); color: var(--dv-amber) !important; }
#booklySyncLogsBody td:nth-child(5) > span { color: var(--dv-red) !important; font-size: 12.5px; }


/* ---- Company settings: remove-logo as a quiet destructive button ---- */
:is(#general-settings, #website-settings) .remove-logo-btn {
    height: 32px !important; min-height: 32px !important; padding: 0 12px !important; border-radius: var(--dv-radius-control) !important;
    font-size: 13px !important; font-weight: 500 !important; line-height: 30px !important;
    background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-red) !important;
    box-shadow: none !important; transform: none !important;
}
:is(#general-settings, #website-settings) .remove-logo-btn:hover { background: var(--dv-red-soft) !important; border-color: var(--dv-red-line) !important; }


/* ===========================================================================
   BOOKING DETAILS MODAL — desktop (sections tagged bmx-* in booking-management.js,
   arranged into two columns by dv2-pages.js; overrides inline styles)
   =========================================================================== */
#bookingModal .modal-content:has(.bmx-desk) {
    width: min(1000px, calc(100vw - 64px)); max-width: none; max-height: 88vh; padding: 0 !important;
    border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; background: var(--dv-surface);
    border: 1px solid var(--dv-border); box-shadow: 0 24px 64px -16px rgba(20, 24, 43, 0.35);
}
#bookingModal .modal-content:has(.bmx-desk) .booking-modal-close {
    top: 20px; right: 20px; width: 32px; height: 32px; background: transparent; border: 1px solid var(--dv-border); color: var(--dv-muted); font-size: 18px;
}
#bookingModal .modal-content:has(.bmx-desk) .booking-modal-close:hover { background: var(--dv-subtle); color: var(--dv-ink); }
#bookingModalBody.bmx-desk { padding: 26px 32px 0 !important; overflow-y: auto; flex: 1; min-height: 0; color: var(--dv-ink); }
#bookingModalBody.bmx-desk .bmx-wrap { gap: 0 !important; }

/* Header: reference as the title, soft status chips */
#bookingModalBody.bmx-desk .bmx-head {
    background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--dv-hair) !important; border-radius: 0 !important;
    padding: 0 56px 18px 0 !important; align-items: flex-end !important;
}
#bookingModalBody.bmx-desk .bmx-head .bmx-label { margin-bottom: 4px !important; }
#bookingModalBody.bmx-desk .bmx-ref { font-size: 22px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; color: var(--dv-ink) !important; font-variant-numeric: tabular-nums; }
#bookingModalBody.bmx-desk .bmx-chips { gap: 6px !important; }
#bookingModalBody.bmx-desk .bmx-chips > span {
    display: inline-flex !important; align-items: center; gap: 5px; height: 24px; padding: 0 10px !important; border-radius: 999px !important;
    font-size: 12px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; border: 0 !important; box-shadow: none !important;
}
#bookingModalBody.bmx-desk .bmx-ci--checked_in { background: var(--dv-green-soft) !important; color: var(--dv-green) !important; }
#bookingModalBody.bmx-desk .bmx-ci--no_show { background: var(--dv-red-soft) !important; color: var(--dv-red) !important; }
#bookingModalBody.bmx-desk .bmx-ci:not(.bmx-ci--checked_in):not(.bmx-ci--no_show) { background: var(--dv-amber-soft) !important; color: var(--dv-amber) !important; }
#bookingModalBody.bmx-desk .bmx-private { background: var(--dv-amber-soft) !important; color: var(--dv-amber) !important; }
#bookingModalBody.bmx-desk .bmx-chips .status-badge { background: var(--dv-primary-soft) !important; color: var(--dv-primary-ink) !important; }
#bookingModalBody.bmx-desk .bmx-chips .status-badge.status-cancelled { background: var(--dv-red-soft) !important; color: var(--dv-red) !important; }
#bookingModalBody.bmx-desk .bmx-chips .status-badge.status-completed { background: var(--dv-green-soft) !important; color: var(--dv-green) !important; }
#bookingModalBody.bmx-desk .bmx-chips .status-badge.status-pending, #bookingModalBody.bmx-desk .bmx-chips .status-badge.status-pending_approval { background: var(--dv-pink-soft) !important; color: var(--dv-pink) !important; }

/* Two columns */
#bookingModalBody.bmx-desk .bmx-cols { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 32px; padding-top: 4px; }
#bookingModalBody.bmx-desk .bmx-col { display: flex; flex-direction: column; min-width: 0; }

/* Sections: no boxes, hairline separators, sentence-case labels */
#bookingModalBody.bmx-desk .bmx-card {
    background: transparent !important; border: 0 !important; border-top: 1px solid var(--dv-hair) !important; border-radius: 0 !important;
    padding: 18px 0 !important; margin: 0 !important; box-shadow: none !important;
}
#bookingModalBody.bmx-desk .bmx-col--main > .bmx-card:first-child { border-top: 0 !important; }
#bookingModalBody.bmx-desk .bmx-label {
    font-size: 12.5px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important;
    color: var(--dv-muted) !important; margin-bottom: 8px !important;
}
#bookingModalBody.bmx-desk .bmx-label svg { opacity: 1 !important; color: var(--dv-faint); }
#bookingModalBody.bmx-desk .bmx-title { font-size: 16px !important; font-weight: 600 !important; color: var(--dv-ink) !important; margin-bottom: 6px !important; }
#bookingModalBody.bmx-desk .bmx-line { font-size: 13.5px !important; color: var(--dv-ink-2) !important; gap: 9px !important; }
#bookingModalBody.bmx-desk .bmx-line svg { width: 15px !important; height: 15px !important; color: var(--dv-faint) !important; }
#bookingModalBody.bmx-desk .bmx-meta { font-size: 12.5px !important; color: var(--dv-muted) !important; margin-top: 4px !important; }
#bookingModalBody.bmx-desk .bmx-card :is(div, span, strong)[style*="color: #1e293b"],
#bookingModalBody.bmx-desk .bmx-card :is(div, span, strong)[style*="color:#1e293b"],
#bookingModalBody.bmx-desk .bmx-card :is(div, span, strong)[style*="color:#334155"],
#bookingModalBody.bmx-desk .bmx-card :is(div, span, strong)[style*="color:#0f172a"] { color: var(--dv-ink) !important; }
#bookingModalBody.bmx-desk .bmx-card :is(div, span)[style*="color:#64748b"], #bookingModalBody.bmx-desk .bmx-card :is(div, span)[style*="color:#94a3b8"] { color: var(--dv-muted) !important; }
#bookingModalBody.bmx-desk .bmx-card :is(div, span)[style*="color: #374151"], #bookingModalBody.bmx-desk .bmx-card :is(div, span)[style*="color: #475569"] { color: var(--dv-ink-2) !important; }
#bookingModalBody.bmx-desk .bmx-card :is(div, span)[style*="color: #64748b"], #bookingModalBody.bmx-desk .bmx-card :is(div, span)[style*="color: #94a3b8"] { color: var(--dv-muted) !important; }
#bookingModalBody.bmx-desk .bmx-pickup.is-custom .bmx-label + div { background: var(--dv-amber-soft) !important; color: var(--dv-amber) !important; text-transform: none !important; letter-spacing: 0 !important; border-radius: 999px !important; padding: 2px 9px !important; font-size: 11.5px !important; }
#bookingModalBody.bmx-desk .bmx-ride .bmx-label { color: var(--dv-muted) !important; }

#bookingModalBody.bmx-desk .bmx-card [style*="color: #4a90e2"] { color: var(--dv-primary-ink) !important; }
#bookingModalBody.bmx-desk .bmx-card span[style*="color: #16a34a"] { color: var(--dv-green) !important; }
#bookingModalBody.bmx-desk .bmx-card span[style*="color: #dc2626"] { color: var(--dv-red) !important; }

/* Side column: payment as the one tinted panel */
#bookingModalBody.bmx-desk .bmx-col--side > .bmx-pay {
    background: var(--dv-subtle) !important; border: 1px solid var(--dv-border) !important; border-radius: 12px !important; padding: 18px !important; margin-top: 18px !important;
}
#bookingModalBody.bmx-desk .bmx-col--side > .bmx-pay + .bmx-card { border-top: 0 !important; }
#bookingModalBody.bmx-desk .bm-payment-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px 16px !important; align-items: start !important; }
#bookingModalBody.bmx-desk .bm-payment-row > .bm-total { grid-column: 1 / -1; order: -1; margin: 0 !important; text-align: left !important; }
#bookingModalBody.bmx-desk .bmx-total-val { font-size: 30px !important; font-weight: 700 !important; letter-spacing: -0.02em; color: var(--dv-ink) !important; line-height: 1.1; font-variant-numeric: tabular-nums; }
#bookingModalBody.bmx-desk .bmx-sublabel { font-size: 12px !important; color: var(--dv-muted) !important; margin-bottom: 4px !important; }
#bookingModalBody.bmx-desk .bmx-pay-method > div:last-child { font-size: 13.5px !important; color: var(--dv-ink) !important; font-weight: 500 !important; }
#bookingModalBody.bmx-desk .bmx-ps {
    height: 24px !important; padding: 0 10px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important;
    background: var(--dv-seg) !important; color: var(--dv-ink-2) !important;
}
#bookingModalBody.bmx-desk .bmx-ps--paid { background: var(--dv-green-soft) !important; color: var(--dv-green) !important; }
#bookingModalBody.bmx-desk :is(.bmx-ps--pending, .bmx-ps--unpaid) { background: var(--dv-amber-soft) !important; color: var(--dv-amber) !important; }
#bookingModalBody.bmx-desk .bmx-ps--partially_paid { background: var(--dv-primary-soft) !important; color: var(--dv-primary-ink) !important; }
#bookingModalBody.bmx-desk .bmx-sync {
    width: 26px !important; height: 26px !important; min-width: 26px; min-height: 26px; background: transparent !important; border: 1px solid var(--dv-border) !important; color: var(--dv-muted) !important;
}
#bookingModalBody.bmx-desk .bmx-sync:hover { background: var(--dv-surface) !important; color: var(--dv-ink) !important; }
#bookingModalBody.bmx-desk .bmx-breakdown { border-top-color: var(--dv-border) !important; margin-top: 14px; font-variant-numeric: tabular-nums; }
#bookingModalBody.bmx-desk .bmx-breakdown > div { font-size: 13px !important; }

/* Providers */
#bookingModalBody.bmx-desk #currentProviderDisplay > div[style*="display:flex"] {
    background: transparent !important; border: 1px solid var(--dv-border); border-radius: 10px !important; padding: 8px 10px !important;
}
#bookingModalBody.bmx-desk #currentProviderDisplay button {
    background: transparent !important; color: var(--dv-red) !important; border: 0 !important; padding: 4px 6px !important; font-size: 12.5px !important; font-weight: 600 !important; min-height: 0 !important; height: auto !important;
}
#bookingModalBody.bmx-desk #currentProviderDisplay button:hover { background: var(--dv-red-soft) !important; }
#bookingModalBody.bmx-desk .bmx-select {
    height: 36px !important; padding: 0 10px !important; border: 1px solid var(--dv-control) !important; border-radius: var(--dv-radius-control) !important;
    background: var(--dv-surface) !important; color: var(--dv-ink) !important; font-size: 13.5px !important;
}
#bookingModalBody.bmx-desk .bmx-assign { height: 36px !important; min-height: 36px !important; padding: 0 14px !important; font-size: 13px !important; border-radius: var(--dv-radius-control) !important; }
#bookingModalBody.bmx-desk .bmx-auto {
    height: 34px !important; min-height: 34px !important; background: var(--dv-surface) !important; color: var(--dv-primary-ink) !important;
    border: 1px solid var(--dv-control) !important; border-radius: var(--dv-radius-control) !important; font-size: 12.5px !important; font-weight: 600 !important;
}
#bookingModalBody.bmx-desk .bmx-auto:hover { background: var(--dv-primary-soft) !important; }

/* Notes */
#bookingModalBody.bmx-desk .bmx-notes [style*="background:#f8fafc"] { background: var(--dv-subtle) !important; border-color: var(--dv-border) !important; }
#bookingModalBody.bmx-desk .admin-note-input { border: 1px solid var(--dv-control) !important; border-radius: var(--dv-radius-control) !important; font-size: 13.5px !important; background: var(--dv-surface) !important; color: var(--dv-ink) !important; }
#bookingModalBody.bmx-desk .admin-note-submit { height: 32px !important; min-height: 32px !important; padding: 0 12px !important; font-size: 12.5px !important; }

/* Actions: a quiet sticky footer */
#bookingModalBody.bmx-desk .booking-modal-actions {
    position: sticky; bottom: 0; z-index: 3; display: flex !important; align-items: center; gap: 8px; flex-wrap: nowrap;
    margin: 18px -32px 0 !important; padding: 14px 32px !important; background: var(--dv-surface); border-top: 1px solid var(--dv-hair);
}
#bookingModalBody.bmx-desk .booking-modal-actions .btn {
    height: 36px !important; min-height: 36px !important; padding: 0 14px !important; font-size: 13px !important; font-weight: 500 !important;
    border-radius: var(--dv-radius-control) !important; box-shadow: none !important; transform: none !important; flex: none !important; width: auto !important;
}
#bookingModalBody.bmx-desk .booking-modal-actions .btn svg { width: 15px !important; height: 15px !important; margin-right: 6px !important; }
#bookingModalBody.bmx-desk .booking-modal-actions .btn-danger { background: transparent !important; color: var(--dv-red) !important; border: 1px solid transparent !important; }
#bookingModalBody.bmx-desk .booking-modal-actions .btn-danger:hover { background: var(--dv-red-soft) !important; }
#bookingModalBody.bmx-desk .booking-modal-actions .btn-secondary,
#bookingModalBody.bmx-desk .booking-modal-actions .btn-warning { background: var(--dv-surface) !important; color: var(--dv-ink) !important; border: 1px solid var(--dv-control) !important; }
#bookingModalBody.bmx-desk .booking-modal-actions .btn-secondary:hover,
#bookingModalBody.bmx-desk .booking-modal-actions .btn-warning:hover { background: var(--dv-subtle) !important; }
#bookingModalBody.bmx-desk .booking-modal-actions .action-buttons-group { display: flex !important; gap: 8px !important; margin-left: auto !important; order: 5; }
/* The × already closes; the footer "Close" button is redundant on desktop */
#bookingModalBody.bmx-desk .booking-modal-actions > .btn-secondary:not(.resend-btn):last-child { display: none !important; }


/* ===========================================================================
   SERVICE EDIT MODAL (#tourModal) — desktop
   =========================================================================== */
#tourModal .modal-content {
    width: min(920px, calc(100vw - 64px)) !important; max-width: none !important; max-height: 88vh; padding: 0 !important;
    border-radius: 16px !important; overflow: hidden; display: flex; flex-direction: column;
    background: var(--dv-surface) !important; border: 1px solid var(--dv-border); box-shadow: 0 24px 64px -16px rgba(20, 24, 43, 0.35) !important;
}
#tourModal .modal-header {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 20px 28px !important; background: var(--dv-surface) !important; border-bottom: 1px solid var(--dv-hair) !important;
}
#tourModal .modal-title { margin: 0; font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.01em; color: var(--dv-ink) !important; }
#tourModal .modal-header .close {
    width: 32px !important; height: 32px !important; min-height: 32px !important; min-width: 32px !important; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important;
    border: 1px solid var(--dv-border) !important; border-radius: 50%; background: transparent !important; color: var(--dv-muted) !important; font-size: 18px; line-height: 1;
}
#tourModal .modal-header .close:hover { background: var(--dv-subtle) !important; color: var(--dv-ink) !important; }
#tourModal .modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 28px !important; color: var(--dv-ink); }

/* Tabs: one line, underline, sticky while the form scrolls */
#tourModal .tour-tabs {
    position: sticky; top: 0; z-index: 4; display: flex !important; align-items: stretch; gap: 22px; flex-wrap: nowrap; overflow: visible !important;
    margin: 0 -28px 22px !important; padding: 0 28px; background: var(--dv-surface); border-bottom: 1px solid var(--dv-hair) !important;
}
#tourModal .tour-tab {
    flex: 0 0 auto !important; display: inline-flex !important; align-items: center; gap: 0; height: 44px !important; min-height: 0; min-width: 0 !important; padding: 0 2px !important; margin: 0 !important;
    background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    font-size: 13.5px !important; font-weight: 500 !important; color: var(--dv-muted) !important; white-space: nowrap; cursor: pointer;
}
#tourModal .tour-tab svg, #tourModal .tour-tab i { display: none !important; }
#tourModal .tour-tab:hover { color: var(--dv-ink) !important; }
#tourModal .tour-tab.active { color: var(--dv-ink) !important; font-weight: 600 !important; box-shadow: inset 0 -2px 0 var(--dv-primary) !important; }

/* Form controls */
#tourModal .form-group { margin-bottom: 16px; }
#tourModal .form-group > label, #tourModal label[for] { font-size: 13px !important; font-weight: 600 !important; color: var(--dv-ink-2) !important; margin-bottom: 6px !important; }
#tourModal :is(input[type="text"], input[type="number"], input[type="time"], input[type="url"], input[type="email"], select) {
    height: 38px !important; min-height: 38px !important; padding: 0 12px !important; font-size: 14px !important;
    border: 1px solid var(--dv-control) !important; border-radius: var(--dv-radius-control) !important;
    background: var(--dv-surface) !important; color: var(--dv-ink) !important; box-shadow: none !important;
}
#tourModal textarea {
    padding: 10px 12px !important; font-size: 14px !important; line-height: 1.5; border: 1px solid var(--dv-control) !important;
    border-radius: var(--dv-radius-control) !important; background: var(--dv-surface) !important; color: var(--dv-ink) !important; box-shadow: none !important;
}
#tourModal :is(input, select, textarea):focus { border-color: var(--dv-primary) !important; box-shadow: 0 0 0 3px var(--dv-primary-soft) !important; outline: 0; }
#tourModal .form-grid { column-gap: 0 !important; }

/* Categories: toggle chips instead of a boxed checkbox grid */
#tourModal #tourCategoryCheckboxes { border: 0 !important; padding: 0 !important; gap: 8px; }
#tourModal #tourCategoryCheckboxes > label {
    position: relative; margin: 0 !important; height: 32px; padding: 0 12px !important; gap: 6px !important;
    border: 1px solid var(--dv-control); border-radius: 999px; background: var(--dv-surface);
    font-size: 13px !important; font-weight: 500 !important; color: var(--dv-ink-2) !important; transition: background 0.12s, border-color 0.12s;
}
#tourModal #tourCategoryCheckboxes > label:hover { background: var(--dv-subtle); }
#tourModal #tourCategoryCheckboxes > label input { position: absolute; opacity: 0; width: 1px !important; height: 1px !important; pointer-events: none; }
#tourModal #tourCategoryCheckboxes > label:focus-within { box-shadow: 0 0 0 3px var(--dv-primary-soft); }
#tourModal #tourCategoryCheckboxes > label:has(input:checked) { background: var(--dv-primary-soft); border-color: var(--dv-primary); color: var(--dv-primary-ink) !important; font-weight: 600 !important; }
#tourModal #tourCategoryCheckboxes > label:has(input:checked)::before { content: "✓"; font-size: 12px; font-weight: 700; }

/* Grey option boxes → light panels */
#tourModal .tour-tab-content [style*="background: #f8f9fa"], #tourModal .tour-tab-content [style*="background:#f8f9fa"],
#tourModal .tour-tab-content [style*="background: #f9fafb"], #tourModal .tour-tab-content [style*="background:#f9fafb"] {
    background: var(--dv-subtle) !important; border: 1px solid var(--dv-border) !important; border-radius: 12px !important;
}
#tourModal input[type="checkbox"] { accent-color: var(--dv-primary); width: 16px !important; height: 16px !important; }
#tourModal #tourImageUploadArea { border: 1.5px dashed var(--dv-control) !important; background: var(--dv-subtle) !important; border-radius: 12px !important; }
#tourModal #tourImageUploadArea:hover { border-color: var(--dv-primary) !important; background: var(--dv-primary-soft) !important; }

/* Tab intros and headings: quieter */
#tourModal .tour-tab-content .form-group > p, #tourModal .tour-tab-content > p { font-size: 13.5px !important; line-height: 1.5; color: var(--dv-muted) !important; }
#tourModal .tour-tab-content h4 { font-size: 14px !important; font-weight: 600 !important; color: var(--dv-ink) !important; margin-bottom: 10px !important; }
#tourModal .tour-tab-content small { font-size: 12.5px !important; color: var(--dv-muted) !important; }

/* Map tab: compact controls */
#tourModal #tourTabMap .btn-sm {
    height: 32px !important; min-height: 32px !important; padding: 0 12px !important; font-size: 12.5px !important; font-weight: 600 !important;
    border-radius: var(--dv-radius-control) !important; gap: 6px !important; box-shadow: none !important;
}
#tourModal #tourTabMap .btn-sm svg { width: 14px !important; height: 14px !important; }
#tourModal #tourTabMap .btn-secondary { background: var(--dv-surface) !important; color: var(--dv-ink) !important; border: 1px solid var(--dv-control) !important; }
#tourModal #tourMapContainer { border: 1px solid var(--dv-border) !important; border-radius: 12px !important; }
#tourModal #mapControls { display: flex; gap: 6px; padding: 6px !important; border-radius: 10px !important; background: var(--dv-surface) !important; box-shadow: 0 6px 18px -8px rgba(20, 24, 43, 0.35) !important; }

/* Providers tab: outlined rows, "Principal" chip, quiet row actions */
#tourModal .tp-row {
    background: var(--dv-surface) !important; border: 1px solid var(--dv-border) !important; border-left-width: 1px !important;
    border-radius: 10px !important; padding: 10px 14px !important; margin-bottom: 8px !important;
}
#tourModal .tp-row > div:first-child > div:first-child { font-size: 14px; color: var(--dv-ink) !important; display: flex; align-items: center; gap: 8px; }
#tourModal .tp-row > div:first-child > div:last-child { font-size: 12.5px !important; color: var(--dv-muted) !important; }
#tourModal .tp-badge {
    display: inline-flex; align-items: center; height: 20px; padding: 0 8px !important; margin-left: 0 !important; border-radius: 999px !important;
    background: var(--dv-primary-soft) !important; color: var(--dv-primary-ink) !important; font-size: 11.5px !important; font-weight: 600 !important; text-transform: none;
}
#tourModal :is(.tp-primary-btn, .tp-remove-btn) {
    height: 30px !important; min-height: 30px !important; padding: 0 10px !important; font-size: 12.5px !important; font-weight: 600 !important;
    border-radius: var(--dv-radius-control) !important; box-shadow: none !important;
}
#tourModal .tp-primary-btn { background: var(--dv-surface) !important; color: var(--dv-ink) !important; border: 1px solid var(--dv-control) !important; }
#tourModal .tp-primary-btn:hover { background: var(--dv-subtle) !important; }
#tourModal .tp-remove-btn { background: transparent !important; color: var(--dv-red) !important; border: 1px solid transparent !important; }
#tourModal .tp-remove-btn:hover { background: var(--dv-red-soft) !important; }
/* Assign panel: same height controls in one row */
#tourModal #tourTabProviders label:has(#tourModalSetPrimaryProvider) {
    height: 38px; box-sizing: border-box; padding: 0 12px !important; background: var(--dv-surface) !important;
    border: 1px solid var(--dv-control) !important; border-radius: var(--dv-radius-control) !important; white-space: nowrap;
}
#tourModal #tourTabProviders label:has(#tourModalSetPrimaryProvider) span { font-size: 13px !important; color: var(--dv-ink-2) !important; }
#tourModal #tourTabProviders .btn-primary { height: 38px !important; min-height: 38px !important; padding: 0 16px !important; font-size: 13.5px !important; border-radius: var(--dv-radius-control) !important; display: inline-flex !important; align-items: center; }
#tourModal #tourTabProviders .btn-primary svg { width: 15px !important; height: 15px !important; }

/* Save bar: sticky at the bottom of the scrolling body */
#tourModal #tourForm > div:last-child {
    position: sticky; bottom: 0; z-index: 4; display: flex !important; justify-content: flex-end; gap: 8px !important;
    margin: 24px -28px 0 !important; padding: 14px 28px !important; background: var(--dv-surface); border-top: 1px solid var(--dv-hair);
}
#tourModal #tourForm > div:last-child .btn { height: 38px !important; min-height: 38px !important; padding: 0 16px !important; font-size: 13.5px !important; border-radius: var(--dv-radius-control) !important; }


/* ---------------------------------------------------------------------------
   Participant / extra counters — compact outlined steppers
   ------------------------------------------------------------------------- */
.participant-counter { background: transparent !important; border: 0 !important; padding: 0 !important; gap: 4px !important; justify-content: flex-end !important; box-shadow: none !important; }
.counter-btn {
    display: inline-flex !important; align-items: center; justify-content: center; width: 32px !important; height: 32px !important;
    min-width: 32px !important; min-height: 32px !important; padding: 0 !important; border-radius: 9px !important;
    background: var(--dv-surface) !important; color: var(--dv-ink) !important; border: 1px solid var(--dv-control) !important;
    box-shadow: none !important; transform: none !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1 !important;
}
.counter-btn:hover { background: var(--dv-primary-soft) !important; border-color: var(--dv-primary) !important; color: var(--dv-primary-ink) !important; }
.counter-btn:active { transform: none !important; }
.counter-value { min-width: 32px !important; font-size: 15px !important; font-weight: 600 !important; color: var(--dv-ink) !important; font-variant-numeric: tabular-nums; }

/* Booking form participants: one compact row per type */
#participantsSection > .form-grid { gap: 12px !important; padding: 0 !important; margin-top: 10px !important; }
#participantsSection .form-group {
    display: flex !important; align-items: center; justify-content: space-between; gap: 16px; margin: 0 !important;
    padding: 12px 14px !important; border: 1px solid var(--dv-border); border-radius: 12px; background: var(--dv-surface);
}
#participantsSection .form-group[style*="display: none"] { display: none !important; }
#participantsSection .form-group > label {
    flex: 1; min-width: 0; margin: 0 !important; display: flex !important; flex-direction: column; align-items: flex-start !important; justify-content: center !important;
    gap: 2px; font-size: 14px !important; font-weight: 600 !important; color: var(--dv-ink) !important;
}
#participantsSection .form-group > label > span:first-child { display: inline-flex; align-items: center; }
#participantsSection .form-group > label svg { color: var(--dv-muted) !important; width: 15px; height: 15px; }
#participantsSection .form-group > label > span:last-child { color: var(--dv-muted) !important; font-size: 12.5px !important; font-weight: 500 !important; padding-left: 23px; font-variant-numeric: tabular-nums; }
#participantsSection .form-group > label > span:last-child:empty { display: none; }
#participantsSection .participant-counter { flex: none; }


/* ===========================================================================
   SERVICE SCHEDULES — "Horários" modal (#customerModal), generate-from-template
   and day-details modals. Markup tagged sch-* in tour-management.js.
   =========================================================================== */
:is(#customerModal:has(.sch-toolbar), #generateScheduleModal, #scheduleDetailsModal) .modal-content {
    position: relative; padding: 0 !important; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
    border-radius: 16px !important; background: var(--dv-surface) !important; border: 1px solid var(--dv-border);
    box-shadow: 0 24px 64px -16px rgba(20, 24, 43, 0.35) !important;
}
#customerModal:has(.sch-toolbar) .modal-content { width: min(980px, calc(100vw - 64px)) !important; max-width: none !important; }
#generateScheduleModal .modal-content { width: min(580px, calc(100vw - 64px)) !important; max-width: none !important; }
#scheduleDetailsModal .modal-content { width: min(680px, calc(100vw - 64px)) !important; max-width: none !important; }
:is(#customerModal:has(.sch-toolbar), #generateScheduleModal, #scheduleDetailsModal) .modal-header {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 !important;
    padding: 20px 64px 18px 28px !important; background: var(--dv-surface) !important; border-bottom: 1px solid var(--dv-hair) !important;
}
:is(#customerModal:has(.sch-toolbar), #generateScheduleModal, #scheduleDetailsModal) .modal-header :is(h2, h3, .modal-title) {
    margin: 0 !important; font-size: 19px !important; font-weight: 700 !important; letter-spacing: -0.01em; color: var(--dv-ink) !important;
}
:is(#customerModal:has(.sch-toolbar), #generateScheduleModal, #scheduleDetailsModal) .close {
    position: absolute !important; top: 18px !important; right: 20px !important; z-index: 5;
    width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; padding: 0 !important; margin: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50% !important;
    border: 1px solid var(--dv-border) !important; background: transparent !important; color: var(--dv-muted) !important;
    font-size: 18px !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer;
}
:is(#customerModal:has(.sch-toolbar), #generateScheduleModal, #scheduleDetailsModal) .close:hover { background: var(--dv-subtle) !important; color: var(--dv-ink) !important; }
:is(#customerModal:has(.sch-toolbar), #generateScheduleModal, #scheduleDetailsModal) .modal-body {
    flex: 1; min-height: 0; overflow-y: auto; padding: 20px 28px 24px !important; color: var(--dv-ink); background: var(--dv-surface) !important;
}
:is(#generateScheduleModal, #scheduleDetailsModal) .modal-footer {
    flex: none; display: flex; justify-content: flex-end; gap: 8px; margin: 0 !important;
    padding: 14px 28px !important; background: var(--dv-surface) !important; border-top: 1px solid var(--dv-hair) !important;
}
:is(#customerModal:has(.sch-toolbar), #generateScheduleModal, #scheduleDetailsModal) .btn {
    height: 36px !important; min-height: 36px !important; min-width: 0 !important; padding: 0 14px !important; line-height: 1 !important;
    display: inline-flex !important; align-items: center; gap: 6px; font-size: 13.5px !important; font-weight: 500 !important;
    border-radius: var(--dv-radius-control) !important; box-shadow: none !important; transform: none !important;
}
:is(#customerModal:has(.sch-toolbar), #generateScheduleModal, #scheduleDetailsModal) .btn svg { width: 15px; height: 15px; margin: 0 !important; }
.sch-emo { display: none !important; }

/* Toolbar: plain row — primary action, secondary action, segmented view switch */
.sch-toolbar { margin: 0 0 18px !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; gap: 12px !important; }
.sch-toolbar .sch-actions { gap: 8px !important; }
.sch-toolbar .sch-actions > .btn-primary {
    background: var(--dv-surface) !important; color: var(--dv-ink) !important; border: 1px solid var(--dv-control) !important;
}
.sch-toolbar .sch-actions > .btn-primary:hover { background: var(--dv-subtle) !important; }
.sch-toolbar .sch-actions > .btn-primary svg { color: var(--dv-muted); }
.sch-seg { gap: 2px !important; padding: 3px; border-radius: 9px; background: var(--dv-seg); }
.sch-seg > .btn {
    height: 30px !important; min-height: 30px !important; padding: 0 14px !important; border-radius: 7px !important;
    background: transparent !important; border: 0 !important; color: var(--dv-muted) !important; font-size: 13px !important;
}
.sch-seg > .btn:hover { color: var(--dv-ink) !important; }
.sch-seg > .btn.is-active { background: var(--dv-surface) !important; color: var(--dv-ink) !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(20, 24, 43, 0.12) !important; }

/* Month nav: month centred, arrow-only prev/next on the sides */
.sch-nav { justify-content: space-between !important; gap: 8px; margin: 0 0 12px !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
.sch-nav h3 { margin: 0 !important; font-size: 17px !important; font-weight: 700 !important; color: var(--dv-ink) !important; letter-spacing: -0.01em; }
#customerModal .sch-nav .btn {
    width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; justify-content: center;
    font-size: 0 !important; background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-ink-2) !important;
}
#customerModal .sch-nav .btn::before {
    content: ""; width: 16px; height: 16px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
#customerModal .sch-nav .sch-next::before { transform: scaleX(-1); }
#customerModal .sch-nav .btn:hover { background: var(--dv-subtle) !important; color: var(--dv-ink) !important; }

/* Month grid */
.sch-grid { gap: 6px !important; }
.sch-grid .calendar-header-cell {
    padding: 0 0 4px !important; background: none !important; border: 0 !important; border-radius: 0 !important;
    font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dv-muted) !important;
}
.sch-day {
    position: relative; min-height: 78px !important; padding: 8px 10px !important; opacity: 1 !important; transform: none !important;
    border: 1px solid var(--dv-border) !important; border-radius: 10px !important; background: var(--dv-surface) !important;
    transition: border-color 0.12s, background-color 0.12s, box-shadow 0.12s !important;
}
.sch-day:hover { border-color: var(--dv-primary) !important; box-shadow: 0 0 0 3px var(--dv-primary-soft); }
.sch-day-num { margin: 0 0 6px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--dv-ink) !important; font-variant-numeric: tabular-nums; }
.sch-day.is-past { background: var(--dv-subtle) !important; border-color: transparent !important; }
.sch-day.is-past .sch-day-num { color: var(--dv-faint) !important; font-weight: 500 !important; }
.sch-day.is-out { opacity: 0.45 !important; }
.sch-day-past { display: none !important; }
.sch-day-add {
    position: absolute; right: 8px; bottom: 6px; font-style: normal !important; font-size: 18px !important; line-height: 1;
    color: var(--dv-primary) !important; opacity: 0; transition: opacity 0.12s;
}
.sch-day:hover .sch-day-add { opacity: 1; }
.sch-day.is-today { border-color: var(--dv-primary) !important; }
.sch-day.is-today .sch-day-num {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: -4px !important;
    border-radius: 999px; background: var(--dv-primary); color: #fff !important;
}
.sch-day.has-slots { background: var(--dv-green-soft) !important; border-color: var(--dv-green-mark) !important; }
.sch-day.has-slots:hover { border-color: var(--dv-green) !important; box-shadow: 0 0 0 3px var(--dv-green-soft); }
.sch-day.has-slots.is-past { opacity: 0.6; }
.sch-day.has-slots.is-today { border-color: var(--dv-primary) !important; }
.sch-day.is-full { background: var(--dv-red-soft) !important; border-color: var(--dv-red-line) !important; }
.sch-day-meta { font-size: 12px !important; line-height: 1.45; color: var(--dv-ink-2) !important; }
.sch-day-meta > div:first-child { font-weight: 600; color: var(--dv-ink) !important; }
.sch-day-meta strong { color: var(--dv-red) !important; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; }

/* Generate-from-template form */
#generateScheduleModal .sch-info {
    margin: 0 0 20px !important; padding: 12px 14px !important; border: 1px solid var(--dv-border) !important; border-radius: 12px !important; background: var(--dv-subtle) !important;
}
#generateScheduleModal .sch-info p { color: var(--dv-ink-2) !important; font-size: 13.5px !important; line-height: 1.5; }
#generateScheduleModal .sch-info strong { display: inline-block; margin-bottom: 2px; color: var(--dv-ink) !important; font-size: 14px; font-weight: 600; }
#generateScheduleModal .sch-note, #generateScheduleModal .sch-warn {
    margin-top: 16px !important; padding: 12px 14px !important; border: 1px solid var(--dv-amber-mark) !important; border-radius: 12px !important; background: var(--dv-amber-soft) !important;
}
#generateScheduleModal .sch-note p, #generateScheduleModal .sch-warn :is(p, strong, span) { color: var(--dv-ink-2) !important; font-size: 13px !important; line-height: 1.5; }
#generateScheduleModal .sch-note strong, #generateScheduleModal .sch-warn strong { color: var(--dv-amber) !important; font-weight: 600; }
#generateScheduleModal .sch-warn > div > span:first-child { display: none; }
:is(#generateScheduleModal, #scheduleDetailsModal) .form-group { margin-bottom: 16px; }
:is(#generateScheduleModal, #scheduleDetailsModal) .form-group > label { font-size: 13px !important; font-weight: 600 !important; color: var(--dv-ink-2) !important; margin-bottom: 6px !important; }
#generateScheduleModal .form-group > label:has(input[type="checkbox"]) { margin: 0 !important; font-weight: 500 !important; color: var(--dv-ink) !important; font-size: 13.5px !important; }
#generateScheduleModal input[type="checkbox"] { accent-color: var(--dv-primary); width: 16px !important; height: 16px !important; margin: 0 !important; }
#generateScheduleModal .sch-hint { margin: 4px 0 0 24px !important; font-size: 12.5px !important; line-height: 1.5; color: var(--dv-muted) !important; }
:is(#generateScheduleModal, #scheduleDetailsModal) :is(input[type="date"], input[type="time"], input[type="number"], input[type="text"]) {
    height: 38px !important; min-height: 38px !important; padding: 0 12px !important; font-size: 14px !important;
    border: 1px solid var(--dv-control) !important; border-radius: var(--dv-radius-control) !important;
    background: var(--dv-surface) !important; color: var(--dv-ink) !important; box-shadow: none !important;
}
:is(#generateScheduleModal, #scheduleDetailsModal) input:focus { border-color: var(--dv-primary) !important; box-shadow: 0 0 0 3px var(--dv-primary-soft) !important; outline: 0; }
#generateScheduleModal .modal-footer .btn-primary { background: var(--dv-surface) !important; color: var(--dv-ink) !important; border: 1px solid var(--dv-control) !important; }
#generateScheduleModal .modal-footer .btn-primary:hover { background: var(--dv-subtle) !important; }
#generateScheduleModal #deleteFutureGroup { margin-top: -4px; }
:is(#customerModal:has(.sch-toolbar), #scheduleDetailsModal) .data-table :is(th, td) { text-align: left !important; }
:is(#customerModal:has(.sch-toolbar), #scheduleDetailsModal) .data-table td { font-variant-numeric: tabular-nums; }
#customerModal:has(.sch-toolbar) .table-container { margin: 0 !important; border: 1px solid var(--dv-border); border-radius: 12px; overflow: hidden; }
#customerModal .schedule-calendar .sch-nav, [data-theme="dark"] #customerModal .schedule-calendar .sch-nav { background: none !important; }
#scheduleDetailsModal .table-container { overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--dv-border); border-radius: 12px; }
#scheduleDetailsModal .data-table { width: 100% !important; min-width: 0 !important; margin: 0 !important; border-collapse: collapse !important; }
#scheduleDetailsModal .data-table :is(th, td) { white-space: nowrap; }
#scheduleDetailsModal .modal-header h3::first-letter { text-transform: uppercase; }
#scheduleDetailsModal .modal-body > div:first-child strong { font-size: 14px; font-weight: 600; color: var(--dv-muted); }
:is(#customerModal:has(.sch-toolbar), #scheduleDetailsModal) .data-table .btn-danger,
#scheduleDetailsModal .btn-danger { width: 32px; height: 32px !important; min-height: 32px !important; padding: 0 !important; justify-content: center; background: transparent !important; border: 1px solid var(--dv-border) !important; color: var(--dv-muted) !important; }
:is(#customerModal:has(.sch-toolbar), #scheduleDetailsModal) .data-table .btn-danger:hover,
#scheduleDetailsModal .btn-danger:hover { color: var(--dv-red) !important; border-color: var(--dv-red-line) !important; background: var(--dv-red-soft) !important; }


/* ---------------------------------------------------------------------------
   Bulk-actions menus + Dispatch ⋯ menu — same look as .dv-pop menus
   (outline icons injected by dv2-pages.js / dispatch.js as .dv2-only)
   ------------------------------------------------------------------------- */
.bulk-actions-menu {
    min-width: 240px; background: var(--dv-surface) !important; border: 1px solid var(--dv-border) !important;
    border-radius: 12px !important; box-shadow: 0 12px 32px rgba(20, 24, 43, 0.16) !important; animation: none !important;
}
.bulk-actions-menu-header {
    padding: 10px 12px 8px 14px !important; background: transparent !important; border-bottom: 1px solid var(--dv-hair) !important;
    color: var(--dv-muted) !important; font-size: 12.5px !important; font-weight: 500 !important;
}
.bulk-actions-menu-header strong { color: var(--dv-ink); font-weight: 600; }
.bulk-actions-menu .bulk-actions-close svg { width: 14px; height: 14px; }
.bulk-actions-menu .bulk-actions-close { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; border-radius: 7px !important; color: var(--dv-muted) !important; }
.bulk-actions-menu .bulk-actions-close:hover { background: var(--dv-subtle) !important; color: var(--dv-ink) !important; }
.bulk-actions-menu-items { padding: 6px !important; }
.bulk-action-item {
    min-height: 36px; gap: 10px !important; padding: 8px 10px !important; border-radius: 8px !important;
    color: var(--dv-ink) !important; font-size: 13px !important; font-weight: 500 !important; transform: none !important;
}
.bulk-action-item:hover { background: var(--dv-subtle) !important; transform: none !important; }
.bulk-action-item svg { width: 18px !important; height: 18px !important; color: var(--dv-muted) !important; }
.bulk-action-item.bulk-action-danger { color: var(--dv-red) !important; }
.bulk-action-item.bulk-action-danger svg { color: currentColor !important; }
.bulk-action-item.bulk-action-danger:hover { background: var(--dv-red-soft) !important; }
.bulk-action-item.bulk-action-settings { margin-top: 4px; border-top: 1px solid var(--dv-hair) !important; border-radius: 0 0 8px 8px !important; }

#dispatch .d-menu { min-width: 190px; padding: 6px !important; background: var(--dv-surface) !important; border: 1px solid var(--dv-border) !important; border-radius: 12px !important; box-shadow: 0 12px 32px rgba(20, 24, 43, 0.16) !important; }
#dispatch .d-menu :is(button, a) { display: flex !important; align-items: center; gap: 10px; min-height: 36px; padding: 8px 10px !important; border-radius: 8px !important; color: var(--dv-ink) !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none; }
#dispatch .d-menu :is(button, a):hover { background: var(--dv-subtle) !important; }
#dispatch .d-menu svg { width: 18px; height: 18px; flex: none; color: var(--dv-muted); }
#dispatch .d-menu .danger { color: var(--dv-red) !important; }
#dispatch .d-menu .danger svg { color: currentColor; }
#dispatch .d-menu .danger:hover { background: var(--dv-red-soft) !important; }


/* ===========================================================================
   ALL MODALS — shared desktop layer (.modal / .modal-overlay dialogs)
   :where() keeps specificity at zero, so modals with their own desktop rules
   (#bookingModal .bmx-desk, #tourModal, schedules…) keep winning.
   =========================================================================== */
:where(.modal, .modal-overlay, .settings-modal) { background: rgba(15, 18, 30, 0.45) !important; backdrop-filter: blur(2px); }
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-content) {
    position: relative; padding: 0 !important; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 16px !important; background: var(--dv-surface) !important; color: var(--dv-ink);
    border: 1px solid var(--dv-border) !important; box-shadow: 0 24px 64px -16px rgba(20, 24, 43, 0.35) !important;
    animation: dvModalIn 0.16s ease-out !important;
}
@keyframes dvModalIn { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } }

/* Header: white, hairline, compact title; stays put while the body scrolls */
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-content) > :where(.modal-header) {
    position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 !important; padding: 18px 24px 16px 28px !important; min-height: 0;
    background: var(--dv-surface) !important; background-image: none !important; color: var(--dv-ink) !important;
    border: 0 !important; border-bottom: 1px solid var(--dv-hair) !important; border-radius: 16px 16px 0 0 !important; box-shadow: none !important;
}
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-header) :where(h1, h2, h3, h4, .modal-title) {
    margin: 0 !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: -0.01em;
    color: var(--dv-ink) !important; background: none !important; -webkit-text-fill-color: currentColor;
}
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-header) :where(p, small, .modal-subtitle) { color: var(--dv-muted) !important; font-size: 13px !important; margin: 2px 0 0 !important; }
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-header) :where(h1, h2, h3, h4) > :where(svg, i) { color: var(--dv-muted) !important; }

/* Close button: one 32px round outline style for every variant */
:where(.modal, .modal-overlay, .settings-modal) :where(.close, .close-modal, .modal-close, .close-button, .modal-close-btn, .btn-close) {
    flex: none; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important;
    display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; margin: 0 0 0 auto !important;
    border: 1px solid var(--dv-border) !important; border-radius: 50% !important; background: transparent !important;
    color: var(--dv-muted) !important; font-size: 18px !important; line-height: 1 !important; box-shadow: none !important; opacity: 1 !important;
    cursor: pointer; transition: background-color 0.12s, color 0.12s;
}
:where(.modal, .modal-overlay, .settings-modal) :where(.close, .close-modal, .modal-close, .close-button, .modal-close-btn, .btn-close):hover { background: var(--dv-subtle) !important; color: var(--dv-ink) !important; }
:where(.modal, .modal-overlay, .settings-modal) :where(.close, .close-modal, .modal-close, .close-button, .modal-close-btn) svg { width: 14px !important; height: 14px !important; }
/* close buttons that sit directly in the content box (no header) float top-right */
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-content) > :where(.close, .close-modal, .modal-close, .close-button) { position: absolute !important; top: 16px !important; right: 18px !important; z-index: 6; }

/* Body */
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-content) > :where(.modal-body) { padding: 20px 28px 24px !important; color: var(--dv-ink); background: var(--dv-surface) !important; }
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-body) :where(h3, h4) { font-size: 14px !important; font-weight: 600 !important; color: var(--dv-ink) !important; }
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-body) :where(label) { font-size: 13px; font-weight: 600; color: var(--dv-ink-2); }
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-body) :where(small, .form-help, .help-text) { font-size: 12.5px !important; color: var(--dv-muted) !important; }
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-body) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]), select) {
    min-height: 38px; border: 1px solid var(--dv-control) !important; border-radius: var(--dv-radius-control) !important;
    background-color: var(--dv-surface) !important; color: var(--dv-ink) !important; box-shadow: none !important; font-size: 14px !important;
}
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-body) :where(textarea) {
    border: 1px solid var(--dv-control) !important; border-radius: var(--dv-radius-control) !important;
    background-color: var(--dv-surface) !important; color: var(--dv-ink) !important; box-shadow: none !important; font-size: 14px !important;
}
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-body) :where(input, select, textarea):focus { border-color: var(--dv-primary) !important; box-shadow: 0 0 0 3px var(--dv-primary-soft) !important; outline: 0; }
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-body) :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--dv-primary); }

/* Legacy tinted callouts inside modals → token panels */
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-body) :where([style*="background: #e8f4fd"], [style*="background:#e8f4fd"], [style*="background: #eff6ff"], [style*="background:#eff6ff"], [style*="background: #e3f2fd"], [style*="background: #dbeafe"], [style*="background: #f0f9ff"]) {
    background: var(--dv-primary-soft) !important; border-color: transparent !important; border-left: 0 !important; border-radius: 12px !important; color: var(--dv-ink-2) !important;
}
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-body) :where([style*="background: #fff3cd"], [style*="background:#fff3cd"], [style*="background: #fef3c7"], [style*="background:#fef3c7"], [style*="background: #fffbeb"]) {
    background: var(--dv-amber-soft) !important; border: 1px solid var(--dv-amber-mark) !important; border-left-width: 1px !important; border-radius: 12px !important; color: var(--dv-ink-2) !important;
}
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-body) :where([style*="background: #f8d7da"], [style*="background:#f8d7da"], [style*="background: #fee2e2"], [style*="background:#fee2e2"], [style*="background: #fef2f2"]) {
    background: var(--dv-red-soft) !important; border: 1px solid var(--dv-red-line) !important; border-left-width: 1px !important; border-radius: 12px !important; color: var(--dv-ink-2) !important;
}
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-body) :where([style*="background: #d4edda"], [style*="background:#d4edda"], [style*="background: #dcfce7"], [style*="background: #ecfdf5"], [style*="background: #f0fdf4"]) {
    background: var(--dv-green-soft) !important; border-color: transparent !important; border-left: 0 !important; border-radius: 12px !important; color: var(--dv-ink-2) !important;
}
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-body) :where([style*="background: #f8f9fa"], [style*="background:#f8f9fa"], [style*="background: #f9fafb"], [style*="background:#f9fafb"], [style*="background: #f5f5f5"], [style*="background: #f3f4f6"], [style*="background: #f8fafc"]) {
    background: var(--dv-subtle) !important; border-color: var(--dv-border) !important; border-radius: 12px !important;
}
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-body) :where([style*="background: #e8f4fd"], [style*="background: #fff3cd"], [style*="background: #f8d7da"], [style*="background: #d4edda"]) :where(p, strong, span, div, small) { color: inherit !important; }

/* Headerless dialogs (title + form placed straight in .modal-content) */
:where(.modal, .settings-modal) :where(.modal-content):not(:has(> .modal-header, > .modal-body)) { padding: 22px 28px 24px !important; }
:where(.modal, .settings-modal) :where(.modal-content):not(:has(> .modal-header, > .modal-body)) > :where(h2, h3):first-of-type {
    margin: 0 44px 18px 0 !important; padding: 0 !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--dv-ink) !important;
}
:where(.modal, .settings-modal) :where(.modal-content):not(:has(> .modal-header, > .modal-body)) :where(.form-group > label) { font-size: 13px !important; font-weight: 600 !important; color: var(--dv-ink-2) !important; }
:where(.modal, .settings-modal) :where(.modal-content):not(:has(> .modal-header, > .modal-body)) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea) {
    font-size: 14px !important; border: 1px solid var(--dv-control) !important; border-radius: var(--dv-radius-control) !important; background-color: var(--dv-surface) !important; color: var(--dv-ink) !important; box-shadow: none !important;
}
:where(.modal, .settings-modal) :where(.modal-content):not(:has(> .modal-header, > .modal-body)) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select) { height: 38px !important; min-height: 38px !important; padding: 0 12px !important; }
:where(.modal, .settings-modal) :where(.modal-content):not(:has(> .modal-header, > .modal-body)) :where(.btn) { font-size: 13.5px !important; padding-left: 16px !important; padding-right: 16px !important; }

/* Invoice actions (own class names) */
#invoiceActionsModal .invoice-actions-content {
    position: relative; width: min(560px, calc(100vw - 64px)); max-height: 88vh; overflow-y: auto; padding: 0 !important;
    border-radius: 16px !important; background: var(--dv-surface) !important; border: 1px solid var(--dv-border) !important; box-shadow: 0 24px 64px -16px rgba(20, 24, 43, 0.35) !important;
}
#invoiceActionsModal .invoice-actions-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px 16px 28px !important;
    background: var(--dv-surface) !important; background-image: none !important; border-bottom: 1px solid var(--dv-hair) !important; border-radius: 16px 16px 0 0 !important;
}
#invoiceActionsModal .invoice-actions-header h3 { display: flex; align-items: center; gap: 8px; margin: 0 !important; font-size: 18px !important; font-weight: 700 !important; color: var(--dv-ink) !important; }
#invoiceActionsModal .invoice-actions-header h3 svg { width: 18px; height: 18px; color: var(--dv-muted) !important; }
#invoiceActionsModal .invoice-actions-body { padding: 20px 28px 24px !important; }
#invoiceActionsModal .invoice-info-box { background: var(--dv-subtle) !important; border: 1px solid var(--dv-border) !important; border-radius: 12px !important; padding: 12px 16px !important; }
#invoiceActionsModal .invoice-info-box p { display: flex; justify-content: space-between; margin: 4px 0 !important; font-size: 13.5px !important; color: var(--dv-ink) !important; }
#invoiceActionsModal .invoice-info-box strong { font-weight: 500; color: var(--dv-muted); }
#invoiceActionsModal .invoice-action-btn {
    border: 1px solid var(--dv-border) !important; border-radius: 12px !important; background: var(--dv-surface) !important; box-shadow: none !important; transform: none !important;
    color: var(--dv-ink) !important; font-size: 13.5px !important; font-weight: 500 !important;
}
#invoiceActionsModal .invoice-action-btn:hover { border-color: var(--dv-primary) !important; background: var(--dv-primary-soft) !important; }
#invoiceActionsModal .invoice-action-btn svg { color: var(--dv-primary) !important; }
#invoiceActionsModal .invoice-actions-footer { padding: 14px 28px !important; border-top: 1px solid var(--dv-hair) !important; background: var(--dv-surface) !important; display: flex; justify-content: flex-end; gap: 8px; }
#invoiceActionsModal .invoice-actions-footer .btn { height: 36px !important; min-height: 36px !important; padding: 0 16px !important; font-size: 13.5px !important; border-radius: var(--dv-radius-control) !important; }

/* A red "Cancel" that only closes the dialog is a secondary action, not a destructive one */
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-content) :where(.btn-danger[onclick*="close" i], .btn-danger[onclick*="hide" i]) {
    background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-ink) !important;
}
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-content) :where(.btn-danger[onclick*="close" i], .btn-danger[onclick*="hide" i]):hover { background: var(--dv-subtle) !important; }
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-content) :where(.btn-danger[onclick*="close" i], .btn-danger[onclick*="hide" i]) svg { display: none; }

/* Footer: white, hairline, right-aligned, stays visible */
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-content) > :where(.modal-footer, .modal-actions) {
    position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0 !important; padding: 14px 28px !important; background: var(--dv-surface) !important;
    border: 0 !important; border-top: 1px solid var(--dv-hair) !important; border-radius: 0 0 16px 16px !important;
}
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-content) :where(.btn) {
    min-height: 36px !important; height: auto; padding-top: 0; padding-bottom: 0; line-height: 34px !important;
    border-radius: var(--dv-radius-control) !important; box-shadow: none !important; transform: none !important; font-size: 13.5px !important;
}
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-footer, .modal-actions) :where(.btn) { min-width: 0 !important; padding-left: 16px !important; padding-right: 16px !important; }
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-content) :where(.btn-secondary) { background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-ink) !important; }
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-content) :where(.btn-secondary):hover { background: var(--dv-subtle) !important; }
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-footer, .modal-actions) :where(.btn-danger:not([onclick*="close" i]):not([onclick*="hide" i])) { background: var(--dv-red) !important; border: 1px solid var(--dv-red) !important; color: #fff !important; }

/* Beat the legacy [data-theme="dark"] .modal-* !important rules (class-level specificity;
   modals with ID-scoped desktop rules still win) */
:is(.modal, .modal-overlay, .settings-modal) .modal-content { background: var(--dv-surface) !important; border-color: var(--dv-border) !important; backdrop-filter: none; }
:is(.modal, .modal-overlay, .settings-modal) .modal-content > .modal-header { background: var(--dv-surface) !important; border-bottom-color: var(--dv-hair) !important; }
:is(.modal, .modal-overlay, .settings-modal) .modal-content > :is(.modal-footer, .modal-actions) { background: var(--dv-surface) !important; border-top-color: var(--dv-hair) !important; }
:is(.modal, .modal-overlay, .settings-modal) .modal-content :is(.form-group > label, .modal-body label:not(:has(input))) { color: var(--dv-ink-2) !important; }
:is(.modal, .modal-overlay, .settings-modal) .modal-content label:has(> input[type="checkbox"], > input[type="radio"]) { color: var(--dv-ink) !important; }

/* Inline white panels inside dialogs follow the theme surface */
:where(.modal, .modal-overlay, .settings-modal) :where(.modal-content) :where(
    [style*="background: white"], [style*="background:white"], [style*="background-color: white"], [style*="background-color:white"],
    [style*="background: #ffffff"], [style*="background:#ffffff"], [style*="background-color: #ffffff"],
    [style*="background: #fff;"], [style*="background:#fff;"], [style*="background-color: #fff;"], [style$="background: #fff"], [style$="background:#fff"]) {
    background: var(--dv-surface) !important; border-color: var(--dv-border) !important; color: var(--dv-ink);
}

/* Per-modal panels that hard-code light colours */
#rolesModal #rmEditor, #packageDealModal #packageDealToursList, #invoiceModal #noLineItems, #partnerDetailModal #portalAccessPanel {
    background: var(--dv-subtle) !important; border-color: var(--dv-border) !important; color: var(--dv-ink);
}
#partnerDetailModal #portalAccessPanel :is(h4, strong, label, span) { color: var(--dv-ink) !important; }
#partnerDetailModal #portalAccessPanel p { color: var(--dv-muted) !important; }
#providerDetailModal [style*="#faf5ff"] { background: var(--dv-purple-soft) !important; border-color: transparent !important; }
#apiEndpointsModal [style*="#e7f3ff"] { background: var(--dv-primary-soft) !important; }
#apiEndpointsModal :is(pre, code) { color: var(--dv-ink-2) !important; }
#editTemplateModal .modal-body code { background: var(--dv-seg) !important; color: var(--dv-ink-2) !important; border-color: transparent !important; }
#editTemplateModal #showPreviewBtn { background: var(--dv-primary-soft) !important; background-image: none !important; color: var(--dv-primary-ink) !important; border: 0 !important; }
/* Invoice summary: a calm panel instead of a bright blue gradient block */
#invoiceModal .form-section[style*="gradient"], #invoiceModal .form-section:has(#invoiceSubtotal, [id*="Subtotal"]) {
    background: var(--dv-subtle) !important; background-image: none !important; color: var(--dv-ink) !important; border: 1px solid var(--dv-border) !important; box-shadow: none !important;
}
#invoiceModal .form-section[style*="gradient"] *, #invoiceModal .form-section:has(#invoiceSubtotal, [id*="Subtotal"]) * { color: var(--dv-ink) !important; background-color: transparent !important; }
/* Loading skeletons follow the theme */
#bookingModal :is(.skeleton-header, .skeleton-item) { background: linear-gradient(90deg, var(--dv-seg) 25%, var(--dv-subtle) 50%, var(--dv-seg) 75%) !important; background-size: 200% 100% !important; }

/* Campaign stats: soft tiles, colour only on the number */
#campaignStatsModal [style*="linear-gradient"] { background: var(--dv-subtle) !important; background-image: none !important; border: 1px solid var(--dv-border) !important; color: var(--dv-muted) !important; }
#campaignStatsModal [style*="linear-gradient"] > :first-child { font-weight: 700; }
#campaignStatsModal [style*="#10b981 0%"] > :first-child { color: var(--dv-green) !important; }
#campaignStatsModal [style*="#3b82f6 0%"] > :first-child { color: var(--dv-primary) !important; }
#campaignStatsModal [style*="#667eea 0%"] > :first-child { color: var(--dv-purple) !important; }
#campaignStatsModal [style*="#ef4444 0%"] > :first-child { color: var(--dv-red) !important; }
#campaignStatsModal [style*="linear-gradient"] > :not(:first-child) { color: var(--dv-muted) !important; opacity: 1 !important; }

/* Footers / titles / text with their own legacy (often ID-scoped) colours */
html body :is(#translation-edit-modal, #checkInModal, #bulkCheckInModal, #notificationsModal) .modal-content .modal-footer { background: var(--dv-surface) !important; border-top-color: var(--dv-hair) !important; }
html body :is(#newTicketModal, #ticketDetailModal) .modal-content .modal-header { background: var(--dv-surface) !important; border-bottom: 1px solid var(--dv-hair) !important; padding: 18px 24px 16px 28px !important; }
html body :is(#newTicketModal, #ticketDetailModal) .modal-content .modal-header h2 { color: var(--dv-ink) !important; font-size: 18px !important; font-weight: 700 !important; }
html body :is(#newTicketModal, #ticketDetailModal) .modal-content .form-group label { color: var(--dv-ink-2) !important; font-size: 13px !important; font-weight: 600 !important; }
html body :is(#newTicketModal, #ticketDetailModal) .modal-content .modal-close { width: 32px !important; height: 32px !important; border: 1px solid var(--dv-border) !important; border-radius: 50% !important; color: var(--dv-muted) !important; font-size: 18px !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; }
html body :is(#newTicketModal, #ticketDetailModal) .modal-content .modal-close:hover { background: var(--dv-subtle) !important; color: var(--dv-ink) !important; }
html body :is(#newTicketModal, #ticketDetailModal) .modal-content .form-group :is(input[type="text"], select, textarea) { background: var(--dv-surface) !important; color: var(--dv-ink) !important; border: 1px solid var(--dv-control) !important; border-radius: var(--dv-radius-control) !important; }
:is(.modal, .modal-overlay, .settings-modal) .modal-content .modal-header :is(h1, h2, h3, .modal-title) { color: var(--dv-ink) !important; }
:is(.modal, .modal-overlay, .settings-modal) .modal-content label:not(:has(input)) { color: var(--dv-ink-2) !important; }
:is(.modal, .modal-overlay, .settings-modal) .modal-content :is([style*="color: #333"], [style*="color:#333"], [style*="color: #1f2937"], [style*="color: #374151"], [style*="color: #2d3748"]) { color: var(--dv-ink) !important; }
:is(.modal, .modal-overlay, .settings-modal) .modal-content :is([style*="color: #666"], [style*="color:#666"], [style*="color: #6b7280"], [style*="color: #718096"], [style*="color: #999"], [style*="color:#999"]) { color: var(--dv-muted) !important; }
:is(.modal, .modal-overlay, .settings-modal) .modal-content [style*="rgba(249, 250, 251"] { background: var(--dv-subtle) !important; border-color: var(--dv-border) !important; }

/* Invoice view (built in invoice-management.js with its own class names) */
.modal .invoice-view-modal-content {
    position: relative; width: min(880px, calc(100vw - 64px)) !important; max-width: none !important; max-height: 88vh; overflow-y: auto; padding: 0 !important;
    background: var(--dv-surface) !important; color: var(--dv-ink); border: 1px solid var(--dv-border) !important; border-radius: 16px !important;
    box-shadow: 0 24px 64px -16px rgba(20, 24, 43, 0.35) !important;
}
.modal .invoice-view-header {
    position: sticky !important; top: 0; z-index: 5; padding: 18px 64px 16px 28px !important;
    background: var(--dv-surface) !important; background-image: none !important; color: var(--dv-ink) !important;
    border-bottom: 1px solid var(--dv-hair) !important; border-radius: 16px 16px 0 0 !important;
}
.modal .invoice-view-header h2 { margin: 0 0 4px !important; padding: 0 !important; font-size: 18px !important; font-weight: 700 !important; color: var(--dv-ink) !important; }
.modal .invoice-view-header > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; }
.modal .invoice-view-header > div > h2 { flex-basis: 100%; }
.modal .invoice-view-header p { margin: 0 !important; font-size: 13px !important; color: var(--dv-muted) !important; opacity: 1 !important; }
.modal .invoice-view-header .close { position: absolute !important; top: 16px !important; right: 18px !important; color: var(--dv-muted) !important; }
.modal .invoice-view-content { padding: 20px 28px 0 !important; }
.modal .invoice-view-grid { gap: 20px !important; margin-bottom: 24px !important; }
.modal .invoice-view-content h3 {
    margin: 0 0 8px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; color: var(--dv-muted) !important;
}
.modal .invoice-view-content h4 { font-size: 12px !important; color: var(--dv-muted) !important; letter-spacing: 0.04em; }
.modal .invoice-view-grid > div > div[style*="#f9fafb"] { background: var(--dv-subtle) !important; border: 1px solid var(--dv-border); border-radius: 12px !important; padding: 14px 16px !important; }
.modal .invoice-view-grid p[style*="font-size: 1.125rem"] { font-size: 15px !important; color: var(--dv-ink) !important; }
.modal .invoice-view-grid label { font-size: 12.5px !important; font-weight: 500 !important; color: var(--dv-muted) !important; }
.modal .invoice-view-grid select { height: 38px !important; padding: 0 12px !important; font-size: 14px !important; border: 1px solid var(--dv-control) !important; border-radius: var(--dv-radius-control) !important; background-color: var(--dv-surface) !important; color: var(--dv-ink) !important; }
.modal #viewPaymentStatus { display: inline-flex; align-items: center; height: 36px; padding: 0 12px !important; border-radius: var(--dv-radius-control) !important; font-size: 13px !important; }
.modal #viewPaymentStatus[data-status="unpaid"] { background: var(--dv-amber-soft) !important; color: var(--dv-amber) !important; }
.modal #viewPaymentStatus[data-status="paid"] { background: var(--dv-green-soft) !important; color: var(--dv-green) !important; }
.modal #viewPaymentStatus[data-status="partially_paid"] { background: var(--dv-amber-soft) !important; color: var(--dv-amber) !important; }
.modal #viewPaymentStatus[data-status="refunded"] { background: var(--dv-red-soft) !important; color: var(--dv-red) !important; }
.modal #viewPaymentStatus + button {
    height: 36px; padding: 0 14px !important; border-radius: var(--dv-radius-control) !important; font-size: 13px !important; font-weight: 500 !important;
    background: var(--dv-primary) !important; color: #fff !important; white-space: nowrap;
}
.modal .invoice-view-content [style*="border: 2px solid #e5e7eb"] { border: 1px solid var(--dv-border) !important; border-radius: 12px !important; }
.modal .invoice-view-content #paymentsListContainer > div { color: var(--dv-muted) !important; font-size: 13px; }
.modal .invoice-view-content table th { background: var(--dv-subtle) !important; color: var(--dv-muted) !important; font-size: 12px !important; text-transform: none !important; font-weight: 600 !important; padding: 10px 14px !important; }
.modal .invoice-view-content table tr[style*="#f9fafb"] { background: var(--dv-subtle) !important; }
.modal .invoice-view-content table td { padding: 11px 14px !important; font-size: 13.5px; color: var(--dv-ink) !important; border-bottom-color: var(--dv-hair) !important; }
.modal .invoice-view-totals-inner > div { border-bottom-color: var(--dv-hair) !important; font-size: 13.5px; }
.modal .invoice-view-totals-inner > div > span { color: inherit; }
.modal .invoice-view-totals-inner > div[style*="#f9fafb"] { background: var(--dv-subtle) !important; border-radius: 10px; margin: 8px 0 0 !important; padding: 12px 14px !important; }
.modal .invoice-view-totals-inner > div[style*="#f9fafb"] span { color: var(--dv-ink) !important; font-size: 16px !important; }
.modal .invoice-view-totals-inner > div[style*="#f9fafb"] span:last-child { font-size: 20px !important; }
.modal .invoice-view-content [style*="border-top: 2px solid #e5e7eb"] { border-top: 1px solid var(--dv-hair) !important; }
.modal .invoice-view-actions {
    position: sticky; bottom: 0; z-index: 5; display: flex !important; justify-content: flex-end; gap: 8px !important;
    margin: 24px -28px 0 !important; padding: 14px 28px !important; background: var(--dv-surface) !important; border-top: 1px solid var(--dv-hair) !important; border-radius: 0 0 16px 16px;
}
.modal .invoice-view-actions .btn { height: 36px !important; min-height: 36px !important; padding: 0 16px !important; font-size: 13.5px !important; line-height: 1 !important; border-radius: var(--dv-radius-control) !important; }
.modal .invoice-view-actions .btn-primary { order: 9; }

/* Searchable dropdowns (customer / booking pickers): standard control + chevron */
.searchable-dropdown-input {
    height: 38px !important; min-height: 38px !important; padding: 0 34px 0 12px !important; font-size: 14px !important;
    border: 1px solid var(--dv-control) !important; border-radius: var(--dv-radius-control) !important;
    background: var(--dv-surface) !important; color: var(--dv-ink) !important; box-shadow: none !important;
}
.searchable-dropdown-input:focus { border-color: var(--dv-primary) !important; box-shadow: 0 0 0 3px var(--dv-primary-soft) !important; outline: 0; }
.searchable-dropdown-arrow { font-size: 0 !important; width: 16px; height: 16px; color: var(--dv-muted) !important; display: inline-flex !important; align-items: center; justify-content: center; }
.searchable-dropdown-arrow::before {
    content: ""; width: 16px; height: 16px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.searchable-dropdown.open .searchable-dropdown-arrow::before { transform: rotate(180deg); }
.searchable-dropdown-list {
    background: var(--dv-surface) !important; border: 1px solid var(--dv-border) !important; border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(20, 24, 43, 0.16) !important; padding: 6px !important; margin-top: 4px;
}
.searchable-dropdown-item { border-radius: 8px !important; padding: 8px 10px !important; font-size: 13.5px !important; color: var(--dv-ink) !important; border: 0 !important; }
.searchable-dropdown-item:hover, .searchable-dropdown-item.highlighted, .searchable-dropdown-item.active { background: var(--dv-subtle) !important; }
.searchable-dropdown-no-results { color: var(--dv-muted) !important; }

/* Create / edit invoice: flat sections instead of nested boxes */
#invoiceModal #invoiceForm > .form-section:not([style*="gradient"]) {
    background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    padding: 0 0 20px !important; margin: 0 0 20px !important; border-bottom: 1px solid var(--dv-hair) !important;
}
#invoiceModal #invoiceForm > .form-section h4 { font-size: 14px !important; font-weight: 600 !important; color: var(--dv-ink) !important; }
#invoiceModal #invoiceForm > .form-section h4 ~ *, #invoiceModal #invoiceForm > .form-section > div:first-child svg { color: var(--dv-muted) !important; fill: currentColor !important; }
#invoiceModal #invoiceForm > .form-section > div:first-child svg { width: 16px; height: 16px; }
#invoiceModal #invoiceForm > .form-section .form-label { font-size: 13px !important; font-weight: 600 !important; color: var(--dv-ink-2) !important; }
#invoiceModal .invoice-customer-field > button {
    top: 0 !important; height: 18px !important; min-height: 0 !important; padding: 0 !important; line-height: 18px !important;
    background: none !important; border: 0 !important; color: var(--dv-primary) !important; font-size: 12.5px !important; font-weight: 600 !important; box-shadow: none !important;
}
#invoiceModal .invoice-customer-field > button:hover { text-decoration: underline; }
#invoiceModal .invoice-customer-field > button svg { width: 11px; height: 11px; }
#invoiceModal #invoiceForm > .form-section[style*="#fef3c7"] h4, #invoiceModal #invoiceForm > .form-section[style*="#fef3c7"] svg { color: var(--dv-ink) !important; fill: var(--dv-muted) !important; }
#invoiceModal #invoiceForm > .form-section > div:first-child .btn.btn svg { color: currentColor !important; fill: currentColor !important; }
/* Summary: compact totals block aligned right */
#invoiceModal #invoiceForm > .form-section[style*="gradient"] { width: min(420px, 100%); margin: 0 0 20px auto !important; padding: 14px 18px !important; border-radius: 12px !important; }
#invoiceModal #invoiceForm > .form-section[style*="gradient"] > div:first-child { margin-bottom: 8px !important; }
#invoiceModal #invoiceForm > .form-section[style*="gradient"] > div:first-child svg { width: 15px; height: 15px; fill: var(--dv-muted) !important; }
#invoiceModal #invoiceForm > .form-section[style*="gradient"] h4 { font-size: 13px !important; color: var(--dv-muted) !important; }
#invoiceModal #invoiceForm > .form-section[style*="gradient"] > div:last-child { padding: 0 !important; border: 0 !important; backdrop-filter: none !important; }
#invoiceModal #invoiceForm > .form-section[style*="gradient"] > div:last-child > div { margin-bottom: 6px !important; }
#invoiceModal #invoiceForm > .form-section[style*="gradient"] > div:last-child span { font-size: 13.5px !important; }
#invoiceModal #invoiceForm > .form-section[style*="gradient"] > div:last-child span:first-child { color: var(--dv-muted) !important; }
#invoiceModal #invoiceForm > .form-section[style*="gradient"] > div:last-child > div:last-child { margin: 10px 0 0 !important; padding-top: 10px !important; border-top: 1px solid var(--dv-border) !important; }
#invoiceModal #invoiceForm > .form-section[style*="gradient"] > div:last-child > div:last-child span:first-child { font-size: 15px !important; font-weight: 600 !important; color: var(--dv-ink) !important; }
#invoiceModal #invoiceTotal { font-size: 20px !important; font-weight: 700 !important; }
#invoiceModal #noLineItems { border: 1px dashed var(--dv-control) !important; border-radius: 12px !important; padding: 24px !important; }
#invoiceModal #noLineItems svg { width: 28px; height: 28px; color: var(--dv-faint) !important; fill: currentColor !important; }
#invoiceModal #invoiceForm > div:last-child {
    position: sticky; bottom: 0; z-index: 5; display: flex !important; justify-content: flex-end; gap: 8px !important;
    margin: 0 -28px -24px !important; padding: 14px 28px !important; background: var(--dv-surface); border-top: 1px solid var(--dv-hair);
}

/* Subscription confirmation dialog (.confirmation-modal) */
.confirmation-modal { background: rgba(15, 18, 30, 0.45) !important; }
.confirmation-modal .confirmation-modal-content {
    width: min(500px, calc(100vw - 64px)) !important; max-width: none !important; padding: 0 !important; overflow: hidden;
    background: var(--dv-surface) !important; border: 1px solid var(--dv-border) !important; border-radius: 16px !important;
    box-shadow: 0 24px 64px -16px rgba(20, 24, 43, 0.35) !important; color: var(--dv-ink);
}
.confirmation-modal .confirmation-modal-header { padding: 18px 28px 16px !important; background: var(--dv-surface) !important; border-bottom: 1px solid var(--dv-hair) !important; }
.confirmation-modal .confirmation-modal-header h3 { margin: 0 !important; font-size: 18px !important; font-weight: 700 !important; color: var(--dv-ink) !important; }
.confirmation-modal .confirmation-modal-body { padding: 20px 28px !important; background: var(--dv-surface) !important; }
.confirmation-modal .confirmation-modal-message { font-size: 14px !important; color: var(--dv-ink-2) !important; }
.confirmation-modal .confirmation-modal-details { background: var(--dv-subtle) !important; border: 1px solid var(--dv-border) !important; border-radius: 12px !important; padding: 14px 16px !important; }
.confirmation-modal .confirmation-modal-details img { height: 24px !important; }
.confirmation-modal .terms-acceptance-row { background: none !important; border: 0 !important; padding: 12px 0 0 !important; font-size: 13.5px !important; color: var(--dv-ink-2) !important; }
.confirmation-modal .terms-acceptance-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--dv-primary); }
.confirmation-modal .terms-acceptance-row a { color: var(--dv-primary) !important; }
.confirmation-modal .terms-acceptance-row :not(a):not(input) { color: var(--dv-ink-2) !important; }
.confirmation-modal .confirmation-modal-details :is([style*="color:#334155"], [style*="color: #334155"], p) { color: var(--dv-ink) !important; }
.confirmation-modal .confirmation-modal-footer {
    display: flex; justify-content: flex-end; gap: 8px !important; padding: 14px 28px !important;
    background: var(--dv-surface) !important; border-top: 1px solid var(--dv-hair) !important;
}
.confirmation-modal .confirmation-modal-footer .btn {
    flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; height: 36px !important; min-height: 36px !important; padding: 0 16px !important;
    font-size: 13.5px !important; font-weight: 500 !important; line-height: 1 !important; border-radius: var(--dv-radius-control) !important; transform: none !important;
}
.confirmation-modal .btn-cancel { background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-ink) !important; box-shadow: none !important; }
.confirmation-modal .btn-cancel:hover { background: var(--dv-subtle) !important; }
.confirmation-modal .btn-confirm { box-shadow: none !important; border: 0 !important; }
.confirmation-modal .btn-confirm:not([style*="gradient"]) { background: var(--dv-primary) !important; background-image: none !important; color: #fff !important; }
.confirmation-modal .btn-confirm:not([style*="gradient"]):hover { background: var(--dv-primary-hover) !important; }
.confirmation-modal .btn-confirm.danger { background: var(--dv-red) !important; }
.confirmation-modal .btn-confirm[style*="gradient"] { background: #d97706 !important; color: #fff !important; }
.confirmation-modal .btn-confirm[style*="gradient"]:hover { background: #b45309 !important; }

/* Invoice actions: pay-now and footer buttons at standard size */
#invoiceActionsModal .btn-pay-now {
    width: auto !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; padding: 0 22px !important; margin: 0 auto !important;
    font-size: 14px !important; font-weight: 600 !important; border-radius: var(--dv-radius-control) !important;
    background: #d97706 !important; background-image: none !important; box-shadow: none !important; transform: none !important; color: #fff !important;
}
#invoiceActionsModal .btn-pay-now:hover { background: #b45309 !important; }
#invoiceActionsModal .payment-terms-checkbox { font-size: 13.5px !important; color: var(--dv-ink-2) !important; }
#invoiceActionsModal .payment-terms-checkbox a { color: var(--dv-primary) !important; }
#invoiceActionsModal .pay-now-divider { font-size: 12.5px !important; color: var(--dv-muted) !important; }
#invoiceActionsModal .pay-now-divider span { background: var(--dv-surface) !important; color: var(--dv-muted) !important; }
#invoiceActionsModal .pay-now-divider::before, #invoiceActionsModal .pay-now-divider::after { background: var(--dv-hair) !important; border-color: var(--dv-hair) !important; }
#invoiceActionsModal .payment-terms-checkbox :not(a):not(input) { color: var(--dv-ink-2) !important; }
#invoiceActionsModal .payment-terms-checkbox a, #invoiceActionsModal .payment-terms-checkbox a * { color: var(--dv-primary) !important; }
.confirmation-modal .terms-acceptance-row a, .confirmation-modal .terms-acceptance-row a * { color: var(--dv-primary) !important; }
#invoiceActionsModal .modal-pay-now-section img { height: 24px !important; }
#invoiceActionsModal .invoice-actions-footer button {
    height: 36px !important; min-height: 36px !important; padding: 0 16px !important; font-size: 13.5px !important; font-weight: 500 !important;
    border-radius: var(--dv-radius-control) !important; background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-ink) !important; box-shadow: none !important;
}
#invoiceActionsModal .invoice-actions-footer button:hover { background: var(--dv-subtle) !important; }
#invoiceActionsModal .invoice-action-btn { padding: 16px 10px !important; }
#invoiceActionsModal .invoice-action-btn svg { width: 20px; height: 20px; }

/* Footer buttons: fixed 36px whatever inline padding they carry; drop decorative icons on secondary */
:is(.modal, .modal-overlay, .settings-modal) :is(.modal-footer, .modal-actions) .btn {
    height: 36px !important; min-height: 36px !important; padding: 0 16px !important; line-height: 1 !important;
    display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; font-size: 13.5px !important; font-weight: 500 !important;
}
:is(.modal, .modal-overlay, .settings-modal) :is(.modal-footer, .modal-actions) .btn-secondary > svg { display: none !important; }
:is(.modal, .modal-overlay, .settings-modal) :is(.modal-footer, .modal-actions) .btn > svg { width: 15px !important; height: 15px !important; margin: 0 !important; }

/* Edit email template: beat template-modal-modern.css (ID-scoped !important colours) */
html body #editTemplateModal .modal-header { padding: 18px 64px 16px 28px !important; }
html body #editTemplateModal .modal-header .modal-title { color: var(--dv-ink) !important; font-size: 18px !important; font-weight: 700 !important; }
html body #editTemplateModal .modal-body { padding: 20px 28px 24px !important; }
html body #editTemplateModal .modal-footer .btn-secondary { background: var(--dv-surface) !important; color: var(--dv-ink) !important; border: 1px solid var(--dv-control) !important; padding: 0 16px !important; font-weight: 500 !important; }
html body #editTemplateModal .modal-footer .btn-secondary:hover { background: var(--dv-subtle) !important; }
html body #editTemplateModal .modal-footer .btn-primary { background: var(--dv-primary) !important; padding: 0 16px !important; }
html body #editTemplateModal .available-tags { background: var(--dv-subtle) !important; background-image: none !important; border: 1px solid var(--dv-border) !important; border-radius: 12px !important; }
html body #editTemplateModal .available-tags strong { color: var(--dv-ink-2) !important; }
html body #editTemplateModal .available-tags code { background: var(--dv-surface) !important; color: var(--dv-ink-2) !important; border: 1px solid var(--dv-border) !important; }
html body #editTemplateModal .form-label { color: var(--dv-ink-2) !important; }
/* Edit email template: quieter label icons */
#editTemplateModal .form-label { display: flex; align-items: center; gap: 6px; font-size: 13px !important; font-weight: 600 !important; color: var(--dv-ink-2) !important; }
#editTemplateModal .form-label svg { width: 14px !important; height: 14px !important; color: var(--dv-muted) !important; fill: currentColor; }

/* Template preview (built with .modal-container) */
#templatePreviewModal .modal-container {
    position: relative; width: min(860px, calc(100vw - 64px)) !important; max-width: none !important; max-height: 88vh !important;
    background: var(--dv-surface) !important; border: 1px solid var(--dv-border) !important; border-radius: 16px !important; box-shadow: 0 24px 64px -16px rgba(20, 24, 43, 0.35) !important;
}
#templatePreviewModal .modal-header { padding: 18px 64px 16px 28px !important; background: var(--dv-surface) !important; border-bottom: 1px solid var(--dv-hair) !important; }
#templatePreviewModal .modal-header h2 { display: flex; align-items: center; gap: 8px; font-size: 18px !important; font-weight: 700 !important; color: var(--dv-ink) !important; }
#templatePreviewModal .modal-header h2 svg { width: 18px; height: 18px; margin: 0 !important; color: var(--dv-muted); }
#templatePreviewModal .modal-close-btn { top: 16px !important; right: 18px !important; }
#templatePreviewModal .modal-body { padding: 20px 28px !important; background: var(--dv-surface) !important; }
#templatePreviewModal .modal-body > div:first-child { background: var(--dv-subtle) !important; border: 1px solid var(--dv-border) !important; border-radius: 12px !important; padding: 14px 16px !important; margin-bottom: 18px !important; }
#templatePreviewModal .modal-body > div:first-child h3 { font-size: 14px !important; font-weight: 600 !important; color: var(--dv-ink) !important; margin-bottom: 10px !important; }
#templatePreviewModal .modal-body > div:first-child strong { font-size: 12px; font-weight: 600; color: var(--dv-muted) !important; }
#templatePreviewModal .modal-body > div:first-child p { font-size: 13.5px; color: var(--dv-ink) !important; }
#templatePreviewModal .modal-body > div:last-child { background: none !important; border: 0 !important; padding: 0 !important; }
#templatePreviewModal .modal-body > div:last-child h4 { font-size: 13px !important; font-weight: 600 !important; color: var(--dv-muted) !important; margin-bottom: 8px !important; }
#templatePreviewModal #templatePreviewContent { border: 1px solid var(--dv-border) !important; border-radius: 12px !important; }
#templatePreviewModal .modal-footer { padding: 14px 28px !important; background: var(--dv-surface) !important; border-top: 1px solid var(--dv-hair) !important; }
#templatePreviewModal .modal-footer .btn { background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-ink) !important; }
#templatePreviewModal .modal-footer .btn:hover { background: var(--dv-subtle) !important; }

/* Booking form: one quiet grey for every field-label icon */
:is(#new-booking, #bookingModal, #customerModal) :is(label, .form-label, .section-title) svg:not(.dv-glyph) { color: var(--dv-muted) !important; fill: var(--dv-muted) !important; }
:is(#new-booking, #bookingModal, #customerModal) :is(label, .form-label) i[class*="fa-"] { color: var(--dv-muted) !important; }

/* Booking form extras: same look as the participant rows; price styled like the pax price */
#bookingExtrasList .extra-item { padding: 12px 14px !important; border: 1px solid var(--dv-border) !important; border-radius: 12px !important; background: var(--dv-surface) !important; box-shadow: none !important; }
#bookingExtrasList .extra-item > div:first-child { margin-bottom: 10px !important; }
#bookingExtrasList .extra-item > div:first-child > div:first-child { font-size: 14px !important; font-weight: 600 !important; color: var(--dv-ink) !important; margin-bottom: 4px !important; }
#bookingExtrasList .extra-item > div:first-child > div[style*="color: #666"]:not([data-i18n]) { font-size: 12.5px !important; line-height: 1.5; color: var(--dv-muted) !important; margin-bottom: 6px !important; }
#bookingExtrasList .extra-item [style*="color: #28a745"] { display: inline; color: var(--dv-muted) !important; font-size: 12.5px !important; font-weight: 500 !important; font-variant-numeric: tabular-nums; }
#bookingExtrasList .extra-item [data-i18n="bookings.perPerson"] { display: inline; margin: 0 !important; font-size: 12.5px !important; color: var(--dv-muted) !important; }
#bookingExtrasList .extra-item [data-i18n="bookings.perPerson"]::before { content: " · "; }
#bookingExtrasList .extra-item > div:last-child { padding-top: 10px !important; border-top: 1px solid var(--dv-hair) !important; }
#bookingExtrasList .extra-item > div:last-child > span { font-size: 13px !important; color: var(--dv-ink-2) !important; }

/* Booking date picker: month name in the normal title colour (not link-blue) */
.booking-calendar .bkc-nav h3 { color: var(--dv-ink) !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.01em; }

/* Partner / provider detail modals */
:is(#partnerDetailModal, #providerDetailModal) .pd-info { gap: 8px 32px !important; margin-bottom: 20px !important; }
:is(#partnerDetailModal, #providerDetailModal) .pd-info > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); row-gap: 8px; align-items: baseline; font-size: 13.5px; color: var(--dv-ink); }
:is(#partnerDetailModal, #providerDetailModal) .pd-info br { display: none; }
:is(#partnerDetailModal, #providerDetailModal) .pd-info strong { font-size: 12.5px; font-weight: 500; color: var(--dv-muted) !important; }
:is(#partnerDetailModal, #providerDetailModal) .pd-info span { min-width: 0; overflow-wrap: anywhere; }
#partnerDetailModal #detailPartnerCode { justify-self: start; background: var(--dv-seg) !important; color: var(--dv-ink-2) !important; font-size: 12px; padding: 1px 7px !important; border-radius: 6px !important; }
:is(#partnerDetailModal, #providerDetailModal) .pd-stats { gap: 12px !important; margin-bottom: 20px !important; }
:is(#partnerDetailModal, #providerDetailModal) .pd-stats > div {
    background: var(--dv-surface) !important; border: 1px solid var(--dv-border) !important; border-radius: 12px !important;
    padding: 12px 14px !important; text-align: left !important;
}
:is(#partnerDetailModal, #providerDetailModal) .pd-stats > div > div:first-child { font-size: 20px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
:is(#partnerDetailModal, #providerDetailModal) .pd-stats > div > div:last-child { order: -1; font-size: 12.5px !important; color: var(--dv-muted) !important; margin-bottom: 2px; }
:is(#partnerDetailModal, #providerDetailModal) .pd-stats > div { display: flex; flex-direction: column; }
:is(#partnerDetailModal, #providerDetailModal) .pd-stats > div:nth-child(1) > div:first-child { color: var(--dv-ink) !important; }
:is(#partnerDetailModal, #providerDetailModal) .pd-stats > div:nth-child(2) > div:first-child { color: var(--dv-ink) !important; }
:is(#partnerDetailModal, #providerDetailModal) .pd-stats > div:nth-child(3) > div:first-child { color: var(--dv-amber) !important; }
:is(#partnerDetailModal, #providerDetailModal) .pd-stats > div:nth-child(4) > div:first-child { color: var(--dv-green) !important; }
html body :is(#partnerDetailModal, #providerDetailModal) .pd-stats > div[style] { background: var(--dv-surface) !important; border-color: var(--dv-border) !important; }
#partnerDetailModal #portalAccessPanel [data-i18n="partners.portal.title"] { color: var(--dv-ink) !important; font-weight: 600; }
:is(#partnerDetailModal, #providerDetailModal) .data-table :is(th, td) { text-align: left !important; }
:is(#partnerDetailModal, #providerDetailModal) .data-table td { font-variant-numeric: tabular-nums; }
:is(#partnerDetailModal, #providerDetailModal) .table-container { border: 1px solid var(--dv-border); border-radius: 12px; overflow: auto; }
#partnerDetailModal #portalAccessPanel { padding: 14px 16px !important; border-radius: 12px !important; margin-bottom: 20px !important; }
#partnerDetailModal #portalAccessPanel [data-i18n="partners.portal.title"] { font-size: 14px; }
#partnerDetailModal #portalAccessPanel [data-i18n="partners.portal.help"] { font-size: 12.5px !important; }
#partnerDetailModal #portalAccessPanel label { font-size: 13px !important; font-weight: 500 !important; }
#partnerDetailModal #portalLinkInput { height: 34px !important; min-height: 34px !important; font-size: 12.5px !important; background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; border-radius: var(--dv-radius-control) !important; color: var(--dv-ink) !important; }
#partnerDetailModal #portalAccessPanel .btn { height: 34px !important; min-height: 34px !important; padding: 0 12px !important; font-size: 13px !important; line-height: 1 !important; }
:is(#partnerDetailModal, #providerDetailModal) .pd-tabs { gap: 22px !important; border-bottom: 1px solid var(--dv-hair) !important; margin-bottom: 14px !important; }
:is(#partnerDetailModal, #providerDetailModal) .pd-tabs .btn {
    height: 40px !important; min-height: 40px !important; min-width: 0 !important; padding: 0 2px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: none !important; box-shadow: none !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--dv-muted) !important;
}
:is(#partnerDetailModal, #providerDetailModal) .pd-tabs .btn:hover { color: var(--dv-ink) !important; }
:is(#partnerDetailModal, #providerDetailModal) .pd-tabs .btn.is-active { color: var(--dv-ink) !important; font-weight: 600 !important; box-shadow: inset 0 -2px 0 var(--dv-primary) !important; }
:is(#partnerDetailModal, #providerDetailModal) :is(#partnerCommissionsTab, #partnerPayoutsTab, #providerCommissionsTab, #providerPayoutsTab) > div:first-child .btn { height: 34px !important; min-height: 34px !important; padding: 0 14px !important; font-size: 13px !important; line-height: 1 !important; }
:is(#partnerDetailModal, #providerDetailModal) :is(#partnerCommissionsTab, #partnerPayoutsTab, #providerCommissionsTab, #providerPayoutsTab) > div:first-child > span { font-size: 13px !important; color: var(--dv-muted) !important; }

/* Mailbox: view email */
#viewEmailModal .mbx-actions {
    position: sticky; bottom: -24px; z-index: 5; gap: 6px !important; margin: 20px -28px -24px !important; padding: 12px 28px !important;
    background: var(--dv-surface); border-top: 1px solid var(--dv-hair);
}
#viewEmailModal .mbx-actions .btn {
    height: 34px !important; min-height: 34px !important; min-width: 0 !important; padding: 0 12px !important; line-height: 1 !important;
    display: inline-flex !important; align-items: center; gap: 6px; font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important;
}
#viewEmailModal .mbx-actions .btn svg { width: 15px !important; height: 15px !important; margin: 0 !important; }
#viewEmailModal .mbx-actions .btn[aria-label] { width: 34px !important; padding: 0 !important; justify-content: center; }
#viewEmailModal .mbx-actions .btn-danger { background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-red) !important; }
#viewEmailModal .mbx-actions .btn-danger:hover { background: var(--dv-red-soft) !important; border-color: var(--dv-red-line) !important; }
#viewEmailModal .mbx-actions .btn-secondary { background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-ink) !important; }
#viewEmailModal .mbx-actions .btn-secondary:hover { background: var(--dv-subtle) !important; }
html body #viewEmailModal :is(#customerLinkSection, #conversationThreadSection)[style] {
    background: var(--dv-subtle) !important; border: 1px solid var(--dv-border) !important; border-radius: 12px !important; padding: 14px 16px !important;
}
#viewEmailModal :is(#customerLinkSection, #conversationThreadSection) > div:first-child label { font-size: 13px !important; font-weight: 600 !important; color: var(--dv-ink-2) !important; }
#viewEmailModal :is(#customerLinkSection, #conversationThreadSection) svg { color: var(--dv-muted) !important; }
#viewEmailModal #threadCount { background: var(--dv-seg) !important; color: var(--dv-ink-2) !important; font-weight: 600; }
#viewEmailModal #customerLinkName { font-size: 14px; color: var(--dv-ink) !important; }
#viewEmailModal #customerLinkSection .btn { height: 32px !important; min-height: 32px !important; padding: 0 12px !important; font-size: 13px !important; line-height: 1 !important; }
#viewEmailModal #customerLinkSection select { height: 36px !important; min-height: 36px !important; }

/* Customer details (in the shared #customerModal) */
#customerModal .modal-content > .booking-modal-close { z-index: 7 !important; }
#customerModal:has(.sch-toolbar) .booking-modal-close { top: 16px !important; right: 18px !important; }
#customerModal:has(.cm-actions) .modal-content {
    width: min(860px, calc(100vw - 64px)) !important; max-width: none !important;
    display: flex; flex-direction: column; overflow: hidden !important; /* body scrolls, so the × and header stay put */
}
#customerModal:has(.cm-actions) .modal-header { flex: none; }
#customerModalBody:has(> .cm-actions) { flex: 1; min-height: 0; overflow-y: auto; }
#customerModal:has(.cm-actions) .modal-header { padding: 18px 64px 16px 28px !important; }
#customerModal:has(.cm-actions) .booking-modal-close {
    top: 16px !important; right: 18px !important; width: 32px !important; height: 32px !important; border: 1px solid var(--dv-border) !important;
    border-radius: 50% !important; background: transparent !important; color: var(--dv-muted) !important; font-size: 18px !important;
    display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; line-height: 1 !important;
}
#customerModalBody:has(> .cm-actions) > div:first-child > div:first-child { background: var(--dv-subtle) !important; border-color: var(--dv-border) !important; border-radius: 12px !important; }
#customerModalBody:has(> .cm-actions) > div:first-child > div:first-child > div:last-child { color: var(--dv-ink) !important; }
#customerModalBody:has(> .cm-actions) .bm-two-col > div { border-color: var(--dv-border) !important; border-radius: 12px !important; }
#customerModalBody:has(> .cm-actions) .bm-two-col :is([style*="color: #475569"], [style*="color: #1e293b"]) { color: var(--dv-ink) !important; }
#customerModalBody:has(> .cm-actions) .bm-two-col [style*="color: #94a3b8"] { color: var(--dv-muted) !important; }
#customerModalBody:has(> .cm-actions) > h4 { margin: 20px 0 8px !important; font-size: 14px !important; font-weight: 600 !important; color: var(--dv-ink) !important; }
#customerModalBody:has(> .cm-actions) .table-container { border: 1px solid var(--dv-border); border-radius: 12px; overflow: auto; }
#customerModalBody:has(> .cm-actions) .data-table :is(th, td) { text-align: left !important; }
#customerModalBody:has(> .cm-actions) .data-table td { font-variant-numeric: tabular-nums; }
#customerModalBody:has(> .cm-actions) .data-table tbody tr[onclick]:hover td { background: var(--dv-subtle) !important; }
#customerModalBody:has(> .cm-actions) .status-badge, #customerModalBody:has(> .cm-actions) .data-table td span[class*="badge"] { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 600 !important; }
#customerModalBody:has(> .cm-actions) { padding-bottom: 0 !important; }
/* z-index above the tables' sticky headers (.data-table th is z-index 10 in admin-styles.css) */
#customerModalBody:has(> .cm-actions) .cm-actions {
    position: sticky; bottom: 0; z-index: 12; gap: 6px !important; margin: 20px -28px 0 !important; padding: 12px 28px !important;
    background: var(--dv-surface); border-top: 1px solid var(--dv-hair);
}
/* Labeled buttons like the other modal footers: secondary actions first, primary on the right */
#customerModalBody:has(> .cm-actions) .cm-actions { gap: 8px !important; }
#customerModalBody:has(> .cm-actions) .cm-actions .btn {
    width: auto !important; height: 36px !important; min-width: 0 !important; min-height: 36px !important; padding: 0 14px !important; gap: 6px;
    display: inline-flex !important; align-items: center; justify-content: center; line-height: 1 !important;
    font-size: 13.5px !important; font-weight: 500 !important; border-radius: var(--dv-radius-control) !important; box-shadow: none !important;
}
#customerModalBody:has(> .cm-actions) .cm-actions .btn svg { width: 15px !important; height: 15px !important; flex: none; }
#customerModalBody:has(> .cm-actions) .cm-actions .btn-warning { order: 1; }
#customerModalBody:has(> .cm-actions) .cm-actions .btn-secondary { order: 2; }
#customerModalBody:has(> .cm-actions) .cm-actions .btn-primary { order: 3; }
#customerModalBody:has(> .cm-actions) .cm-actions .btn:not(.btn-primary) { background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-ink-2) !important; }
#customerModalBody:has(> .cm-actions) .cm-actions .btn:not(.btn-primary):hover { background: var(--dv-subtle) !important; }

/* Column settings (Reservas / Check-in) */
:is(#columnSettingsModal, #todaysColumnSettingsModal) { background: rgba(15, 18, 30, 0.45) !important; }
:is(#columnSettingsModal, #todaysColumnSettingsModal) > div {
    max-width: 460px !important; width: 100%; background: var(--dv-surface) !important; color: var(--dv-ink);
    border: 1px solid var(--dv-border); border-radius: 16px !important; box-shadow: 0 24px 64px -16px rgba(20, 24, 43, 0.35) !important;
}
:is(#columnSettingsModal, #todaysColumnSettingsModal) > div > div:first-child { padding: 18px 20px 16px 24px !important; border-bottom: 1px solid var(--dv-hair) !important; }
:is(#columnSettingsModal, #todaysColumnSettingsModal) h2 { font-size: 18px !important; font-weight: 700 !important; color: var(--dv-ink) !important; }
:is(#columnSettingsModal, #todaysColumnSettingsModal) h2 > svg { display: none; }
:is(#columnSettingsModal, #todaysColumnSettingsModal) > div > div:first-child > button {
    width: 32px; height: 32px; padding: 0 !important; border: 1px solid var(--dv-border) !important; border-radius: 50% !important; color: var(--dv-muted) !important; background: transparent !important;
}
:is(#columnSettingsModal, #todaysColumnSettingsModal) > div > div:first-child > button svg { width: 14px; height: 14px; }
:is(#columnSettingsModal, #todaysColumnSettingsModal) > div > div:nth-child(2) { padding: 16px 24px !important; }
:is(#columnSettingsModal, #todaysColumnSettingsModal) > div > div:nth-child(2) > p { font-size: 13px !important; color: var(--dv-muted) !important; margin-bottom: 12px !important; }
#columnSettingsModal > div > div:nth-child(2) > div:not(.column-list) { background: var(--dv-subtle) !important; border-color: var(--dv-border) !important; border-radius: 12px !important; padding: 12px 14px !important; }
#columnSettingsModal > div > div:nth-child(2) > div:not(.column-list) > div:first-child { color: var(--dv-ink) !important; font-size: 13.5px !important; }
#columnSettingsModal > div > div:nth-child(2) > div:not(.column-list) > div:nth-child(2) { color: var(--dv-muted) !important; font-size: 12.5px !important; }
#columnSettingsModal > div { max-width: 540px !important; }
#columnSettingsModal div:has(> #defaultSortColumn) { flex-wrap: nowrap !important; gap: 8px !important; }
#columnSettingsModal #defaultSortColumn { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
#columnSettingsModal #defaultSortDirection { flex: 0 0 auto !important; min-width: 0 !important; }
#columnSettingsModal :is(#defaultSortColumn, #defaultSortDirection) {
    height: 36px !important; padding: 0 10px !important; font-size: 13px !important; border: 1px solid var(--dv-control) !important;
    border-radius: var(--dv-radius-control) !important; background-color: var(--dv-surface) !important; color: var(--dv-ink) !important;
}
:is(#columnSettingsModal, #todaysColumnSettingsModal) .column-list { gap: 0 !important; border: 1px solid var(--dv-border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
:is(#columnSettingsModal, #todaysColumnSettingsModal) .column-item {
    margin: 0 !important; padding: 8px 12px !important; min-height: 44px; background: var(--dv-surface) !important;
    border: 0 !important; border-bottom: 1px solid var(--dv-hair) !important; border-radius: 0 !important; box-shadow: none !important;
}
:is(#columnSettingsModal, #todaysColumnSettingsModal) .column-item:last-child { border-bottom: 0 !important; }
:is(#columnSettingsModal, #todaysColumnSettingsModal) .column-item:hover { background: var(--dv-subtle) !important; }
:is(#columnSettingsModal, #todaysColumnSettingsModal) .column-item.column-fixed { display: none !important; }
:is(#columnSettingsModal, #todaysColumnSettingsModal) .column-label { font-size: 13.5px !important; font-weight: 500 !important; color: var(--dv-ink) !important; }
:is(#columnSettingsModal, #todaysColumnSettingsModal) .drag-handle { color: var(--dv-faint) !important; cursor: grab; }
:is(#columnSettingsModal, #todaysColumnSettingsModal) .column-item.dragging { opacity: 0.5; }
:is(#columnSettingsModal, #todaysColumnSettingsModal) .column-item.drag-over { box-shadow: inset 0 2px 0 var(--dv-primary) !important; }
:is(#columnSettingsModal, #todaysColumnSettingsModal) > div > div:last-child {
    padding: 14px 24px !important; background: var(--dv-surface) !important; border-top: 1px solid var(--dv-hair) !important; gap: 8px !important;
}
:is(#columnSettingsModal, #todaysColumnSettingsModal) > div > div:last-child > button {
    height: 36px !important; padding: 0 16px !important; font-size: 13.5px !important; font-weight: 500 !important; border-radius: var(--dv-radius-control) !important; opacity: 1 !important;
}
:is(#columnSettingsModal, #todaysColumnSettingsModal) > div > div:last-child > button:first-child { background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-ink) !important; }
:is(#columnSettingsModal, #todaysColumnSettingsModal) > div > div:last-child > button:last-child { background: var(--dv-primary) !important; background-image: none !important; border: 0 !important; color: #fff !important; }

/* Subscription: active discount as a compact line under the price, not a boxed card */
.active-discount-banner {
    margin-top: 6px !important; padding: 0 !important; background: none !important; border: 0 !important;
    font-size: 12.5px !important; line-height: 1.45 !important; color: var(--dv-muted) !important;
}
.active-discount-banner .adb-title { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-bottom: 4px; border-radius: 999px; background: var(--dv-green-soft); color: var(--dv-green) !important; font-size: 11.5px; font-weight: 600 !important; }
.active-discount-banner .adb-emo { display: none; }
.active-discount-banner .adb-line { margin: 0 !important; font-size: 12.5px !important; color: var(--dv-muted) !important; }
.active-discount-banner .adb-line strong { color: var(--dv-ink); font-weight: 600; white-space: nowrap; }
.active-discount-banner .adb-save { display: block; margin: 0 !important; color: var(--dv-green) !important; white-space: nowrap; }

/* Mark as paid (#paymentModal: own pm-* layout, title inside the body) */
html body #paymentModal .modal-content { width: min(540px, calc(100vw - 64px)) !important; max-width: none !important; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
html body #paymentModal .modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 28px !important; }
html body #paymentModal .pm-title {
    position: sticky; top: 0; z-index: 5; margin: 0 -28px 16px !important; padding: 18px 64px 16px 28px !important;
    font-size: 18px !important; font-weight: 700 !important; color: var(--dv-ink) !important; background: var(--dv-surface); border-bottom: 1px solid var(--dv-hair);
}
html body #paymentModal .pm-close {
    z-index: 7; top: 16px !important; right: 18px !important; border: 1px solid var(--dv-border) !important; background: transparent !important; color: var(--dv-muted) !important; font-size: 18px; line-height: 1;
}
html body #paymentModal .pm-close:hover { background: var(--dv-subtle) !important; color: var(--dv-ink) !important; }
html body #paymentModal .pm-grid { gap: 12px 20px !important; }
html body #paymentModal .pm-label { text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--dv-muted) !important; margin-bottom: 3px !important; }
html body #paymentModal .pm-value { font-size: 14px !important; color: var(--dv-ink) !important; }
html body #paymentModal .pm-ref { font-size: 14px !important; font-weight: 600 !important; color: var(--dv-ink) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
html body #paymentModal .pm-section { margin-top: 14px !important; }
html body #paymentModal .pm-breakdown { margin-top: 16px !important; padding: 12px 14px !important; background: var(--dv-subtle) !important; border: 1px solid var(--dv-border) !important; border-radius: 12px !important; }
html body #paymentModal .pm-breakdown-title { text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--dv-muted) !important; margin: 0 0 6px !important; }
html body #paymentModal #paymentBreakdown { font-size: 13.5px !important; color: var(--dv-ink-2) !important; }
html body #paymentModal #paymentBreakdown > div:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
html body #paymentModal #paymentBreakdown [style*="border-bottom"] { border-bottom: 0 !important; padding-bottom: 0 !important; }
html body #paymentModal .pm-total { margin-top: 8px !important; padding-top: 10px !important; border-top: 1px solid var(--dv-border) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--dv-ink) !important; }
html body #paymentModal .pm-total #paymentTotalAmount { color: var(--dv-ink) !important; font-size: 18px !important; font-weight: 700 !important; }
html body #paymentModal .modal-body label { font-size: 13px !important; font-weight: 600 !important; color: var(--dv-ink-2) !important; margin-bottom: 6px !important; }
html body #paymentModal .modal-body :is(input, select) { height: 38px !important; min-height: 38px !important; padding: 0 12px !important; font-size: 14px !important; border-color: var(--dv-control) !important; border-radius: var(--dv-radius-control) !important; background-color: var(--dv-surface) !important; color: var(--dv-ink) !important; }
html body #paymentModal .modal-body textarea { padding: 10px 12px !important; font-size: 14px !important; border-color: var(--dv-control) !important; border-radius: var(--dv-radius-control) !important; background-color: var(--dv-surface) !important; color: var(--dv-ink) !important; }
html body #paymentModal #paymentAmountInput { font-size: 15px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }
html body #paymentModal .pm-actions {
    position: sticky; bottom: 0; z-index: 5; margin: 20px -28px 0 !important; padding: 14px 28px !important; gap: 8px !important;
    background: var(--dv-surface); border-top: 1px solid var(--dv-hair);
}
html body #paymentModal .pm-actions .btn { min-height: 36px !important; height: 36px !important; padding: 0 16px !important; font-size: 13.5px !important; line-height: 1 !important; display: inline-flex !important; align-items: center; }
html body #paymentModal .pm-actions .btn-success span:first-child { margin-right: 6px !important; }

/* Send payment link */
#sendPaymentLinkModal .modal-content { width: min(540px, calc(100vw - 64px)) !important; max-width: none !important; }
#sendPaymentLinkModal .spl-info { gap: 12px 20px !important; margin-bottom: 16px !important; }
#sendPaymentLinkModal .spl-info label { font-size: 12.5px !important; font-weight: 500 !important; color: var(--dv-muted) !important; margin-bottom: 3px !important; }
#sendPaymentLinkModal #sendPaymentLinkBookingRef { font-size: 14px !important; font-weight: 600 !important; color: var(--dv-ink) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#sendPaymentLinkModal #sendPaymentLinkCustomerName { font-size: 14px; color: var(--dv-ink); overflow-wrap: anywhere; }
html body #sendPaymentLinkModal .spl-due[style] { padding: 12px 14px !important; margin-bottom: 16px !important; background: var(--dv-subtle) !important; border: 1px solid var(--dv-border) !important; border-radius: 12px !important; }
#sendPaymentLinkModal .spl-due > div { font-size: 14px !important; font-weight: 600 !important; color: var(--dv-ink) !important; }
#sendPaymentLinkModal #sendPaymentLinkAmountDue { font-size: 18px; font-weight: 700; color: var(--dv-ink) !important; font-variant-numeric: tabular-nums; }
#sendPaymentLinkModal label[for="sendPaymentLinkUrlInput"] { font-size: 13px !important; font-weight: 600 !important; color: var(--dv-ink-2) !important; margin-bottom: 6px !important; }
#sendPaymentLinkModal #sendPaymentLinkUrlInput { height: 38px !important; min-height: 38px !important; padding: 0 12px !important; font-size: 14px !important; }
#sendPaymentLinkModal .spl-actions { margin: 20px -28px -24px !important; padding: 14px 28px !important; gap: 8px !important; border-top: 1px solid var(--dv-hair); }
#sendPaymentLinkModal .spl-actions .btn { height: 36px !important; min-height: 36px !important; padding: 0 16px !important; font-size: 13.5px !important; line-height: 1 !important; display: inline-flex !important; align-items: center; }
#sendPaymentLinkModal .spl-emo { display: none; }
html body #sendPaymentLinkModal #sendPaymentLinkPreviousNotice { background: var(--dv-amber-soft) !important; border: 1px solid var(--dv-amber-mark) !important; border-radius: 12px !important; color: var(--dv-ink-2) !important; }

/* Assign provider (quick) */
#quickAssignProviderModal .modal-content { width: min(500px, calc(100vw - 64px)) !important; max-width: none !important; }
html body #quickAssignProviderModal .qa-ctx[style] { padding: 12px 14px !important; margin-bottom: 16px !important; background: var(--dv-subtle) !important; border: 1px solid var(--dv-border); border-radius: 12px !important; }
#quickAssignProviderModal .qa-ctx > div:first-child { text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--dv-muted) !important; }
#quickAssignProviderModal #quickAssignBookingRef { font-size: 14px !important; font-weight: 600 !important; color: var(--dv-ink) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#quickAssignProviderModal #quickAssignBookingService { font-size: 13px !important; color: var(--dv-muted) !important; }
#quickAssignProviderModal [data-i18n="bookings.assignedProviders"] { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: var(--dv-ink-2) !important; margin-bottom: 8px !important; }
#quickAssignProviderModal #quickAssignCurrentProviders { font-style: normal !important; display: flex; flex-wrap: wrap; gap: 6px; }
#quickAssignProviderModal #quickAssignCurrentProviders > span { color: var(--dv-muted); font-style: normal; }
#quickAssignProviderModal #quickAssignCurrentProviders > div {
    margin: 0 !important; height: 32px; padding: 0 6px 0 12px !important; gap: 6px !important;
    background: var(--dv-surface) !important; border: 1px solid var(--dv-border); border-radius: 999px !important; color: var(--dv-ink) !important; font-size: 13px;
}
#quickAssignProviderModal #quickAssignCurrentProviders > div strong { font-weight: 600; }
#quickAssignProviderModal #quickAssignCurrentProviders > div button {
    width: 22px; height: 22px; min-width: 22px !important; min-height: 22px !important; padding: 0 !important; border-radius: 50% !important;
    display: inline-flex; align-items: center; justify-content: center; color: var(--dv-muted) !important; font-size: 12px !important;
}
#quickAssignProviderModal #quickAssignCurrentProviders > div button:hover { background: var(--dv-red-soft) !important; color: var(--dv-red) !important; }
#quickAssignProviderModal #quickAssignFormContainer > div { gap: 8px !important; }
#quickAssignProviderModal #quickAssignFormContainer select { height: 38px !important; min-height: 38px !important; padding: 0 12px !important; font-size: 14px !important; }
#quickAssignProviderModal #quickAssignFormContainer .btn-primary { height: 38px !important; min-height: 38px !important; padding: 0 16px !important; font-size: 13.5px !important; line-height: 1 !important; }
html body #quickAssignProviderModal #quickAssignFormContainer .btn:not(.btn-primary) {
    width: auto !important; height: 34px !important; min-height: 34px !important; padding: 0 12px !important; font-size: 13px !important; font-weight: 500 !important;
    background: var(--dv-surface) !important; color: var(--dv-primary-ink) !important; border: 1px solid var(--dv-control) !important; border-radius: var(--dv-radius-control) !important; box-shadow: none !important;
}
html body #quickAssignProviderModal #quickAssignFormContainer .btn:not(.btn-primary):hover { background: var(--dv-primary-soft) !important; }
#quickAssignProviderModal .qa-foot { margin: 20px -28px -24px !important; padding: 14px 28px !important; border-top: 1px solid var(--dv-hair); }
#quickAssignProviderModal .qa-foot .btn { height: 36px !important; min-height: 36px !important; padding: 0 16px !important; font-size: 13.5px !important; line-height: 1 !important; }

/* Roles & permissions */
#rolesModal .modal-content { width: min(980px, calc(100vw - 64px)) !important; max-width: none !important; }
#rolesModal .rm-content { padding: 18px 28px 24px !important; }
#rolesModal .rm-sub { font-size: 13px !important; color: var(--dv-muted) !important; margin: 0 0 16px !important; line-height: 1.5; }
#rolesModal .rm-body { gap: 20px !important; }
#rolesModal .rm-list-head { margin-bottom: 8px !important; }
#rolesModal .rm-list-head > span { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: var(--dv-ink-2) !important; }
html body #rolesModal .rm-newbtn { height: 32px !important; min-height: 32px !important; padding: 0 12px !important; font-size: 13px !important; line-height: 1 !important; display: inline-flex !important; align-items: center; gap: 6px; }
html body #rolesModal .rm-newbtn svg { width: 14px; height: 14px; margin: 0 !important; }
#rolesModal .rm-role {
    padding: 10px 12px !important; margin-bottom: 6px; background: var(--dv-surface) !important; border: 1px solid var(--dv-border) !important; border-radius: 10px !important;
    box-shadow: none !important; transform: none !important; min-height: 0 !important; height: auto !important; line-height: 1.3 !important;
}
#rolesModal .rm-role:hover { background: var(--dv-subtle) !important; }
#rolesModal .rm-role.active { border-color: var(--dv-primary) !important; background: var(--dv-primary-soft) !important; box-shadow: none !important; }
#rolesModal .rm-role-name { font-size: 14px; font-weight: 600 !important; color: var(--dv-ink) !important; }
#rolesModal .rm-role-meta { font-size: 12.5px !important; color: var(--dv-muted) !important; }
#rolesModal .rm-badge { text-transform: none !important; letter-spacing: 0 !important; font-size: 11.5px !important; font-weight: 600 !important; padding: 2px 8px !important; }
#rolesModal .rm-badge.system { background: var(--dv-seg) !important; color: var(--dv-ink-2) !important; }
#rolesModal .rm-badge.custom { background: var(--dv-green-soft) !important; color: var(--dv-green) !important; }
html body #rolesModal #rmEditor { background: var(--dv-surface) !important; border: 1px solid var(--dv-border) !important; border-radius: 12px !important; padding: 16px !important; }
#rolesModal .rm-empty { font-size: 13.5px !important; color: var(--dv-muted) !important; padding: 40px 16px !important; }
#rolesModal .rm-field label { font-size: 13px !important; color: var(--dv-ink-2) !important; }
#rolesModal .rm-field :is(input, textarea) { font-size: 14px !important; border-color: var(--dv-control) !important; border-radius: var(--dv-radius-control) !important; background: var(--dv-surface) !important; color: var(--dv-ink) !important; }
#rolesModal .rm-field input { height: 38px; }
#rolesModal .rm-field :is(input, textarea):disabled { background: var(--dv-subtle) !important; color: var(--dv-muted) !important; }
#rolesModal .rm-note { background: var(--dv-primary-soft) !important; border: 0 !important; color: var(--dv-ink-2) !important; border-radius: 10px !important; font-size: 13px !important; }
#rolesModal .rm-group { border-color: var(--dv-border) !important; border-radius: 12px !important; background: var(--dv-surface) !important; }
#rolesModal .rm-group-head { background: var(--dv-subtle) !important; padding: 8px 12px !important; }
#rolesModal .rm-group-title { font-size: 13px !important; color: var(--dv-ink) !important; }
#rolesModal .rm-group-toggle { color: var(--dv-primary) !important; font-size: 12.5px !important; min-height: 0 !important; height: auto !important; padding: 0 !important; }
#rolesModal .rm-feature { background: var(--dv-amber-soft) !important; border: 0 !important; color: var(--dv-amber) !important; font-size: 11.5px !important; }
#rolesModal .rm-caps { padding: 6px 12px 10px !important; }
#rolesModal .rm-cap label { font-size: 13px !important; color: var(--dv-ink-2) !important; }
#rolesModal .rm-cap input { accent-color: var(--dv-primary) !important; }
#rolesModal .rm-actions { border-top-color: var(--dv-hair) !important; gap: 8px !important; }
#rolesModal .rm-btn { height: 36px; min-height: 36px !important; padding: 0 16px !important; font-size: 13.5px !important; font-weight: 500 !important; border-radius: var(--dv-radius-control) !important; line-height: 1 !important; }
#rolesModal .rm-btn-primary { background: var(--dv-primary) !important; color: #fff !important; }
#rolesModal .rm-btn-ghost { background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-ink) !important; }
#rolesModal .rm-btn-danger { background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-red) !important; }
#rolesModal .rm-btn-danger:hover { background: var(--dv-red-soft) !important; }

/* Support ticket detail */
#ticketDetailModal .modal-content { width: min(860px, calc(100vw - 64px)) !important; max-width: none !important; }
#ticketDetailModal .tk-detail { gap: 14px !important; }
#ticketDetailModal .tk-detail > div:not(:nth-child(2)) { border-color: var(--dv-border) !important; border-radius: 12px !important; padding: 12px 16px !important; }
#ticketDetailModal .tk-detail > div:nth-child(2) { padding: 0 !important; border: 0 !important; gap: 14px !important; }
#ticketDetailModal .tk-detail > div:first-child span[style*="border-radius: 9999px"] { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 600 !important; padding: 2px 9px !important; }
#ticketDetailModal .tk-detail > div:first-child { background: var(--dv-subtle) !important; }
#ticketDetailModal .tk-detail [style*="text-transform: uppercase"] { text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--dv-muted) !important; }
#ticketDetailModal .tk-detail > div:nth-child(2) > div { border-color: var(--dv-border) !important; border-radius: 12px !important; padding: 12px 16px !important; }
#ticketDetailModal .tk-detail > div:nth-child(2) > div > div:first-child[style*="uppercase"] { font-weight: 600 !important; color: var(--dv-ink-2) !important; font-size: 13px !important; }
#ticketDetailModal .tk-detail > div:last-child > div:first-child { font-weight: 600 !important; color: var(--dv-ink-2) !important; font-size: 13px !important; }
#ticketDetailModal .tk-detail :is([style*="color: #1e293b"], [style*="color: #374151"]) { color: var(--dv-ink) !important; }
#ticketDetailModal .tk-detail :is([style*="color: #475569"]) { color: var(--dv-ink-2) !important; }
#ticketDetailModal .tk-detail :is([style*="color: #94a3b8"]) { color: var(--dv-muted) !important; }
#ticketDetailModal .tk-detail .status-badge, #ticketDetailModal .tk-detail [class*="badge"] { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 600 !important; padding: 2px 9px !important; }
#ticketDetailModal .tk-detail button[onclick*="addAttachment"] {
    height: 28px !important; min-height: 28px !important; min-width: 0 !important; line-height: 1 !important; padding: 0 10px !important; border-radius: var(--dv-radius-control) !important; background: var(--dv-surface) !important;
    border: 1px solid var(--dv-control) !important; color: var(--dv-ink-2) !important; font-size: 12.5px !important; font-weight: 500 !important;
}
#ticketDetailModal .tk-detail select { height: 36px !important; padding: 0 10px !important; font-size: 13.5px !important; border-color: var(--dv-control) !important; background: var(--dv-surface) !important; color: var(--dv-ink) !important; border-radius: var(--dv-radius-control) !important; }
#ticketDetailModal .tk-detail .btn { height: 36px !important; min-height: 36px !important; padding: 0 14px !important; font-size: 13.5px !important; line-height: 1 !important; display: inline-flex !important; align-items: center; }
#ticketDetailModal #responsesContainer > div { border-radius: 10px !important; }
#ticketDetailModal .tk-reply { border-top-color: var(--dv-hair) !important; }
#ticketDetailModal .tk-reply textarea { font-size: 14px !important; border-color: var(--dv-control) !important; border-radius: var(--dv-radius-control) !important; background: var(--dv-surface) !important; color: var(--dv-ink) !important; }

/* Re-import templates dialogs (email templates #reimportModal, mass mailing #reimportTemplatesModal) */
:is(#reimportModal, #reimportTemplatesModal) { background: rgba(15, 18, 30, 0.45) !important; }
:is(#reimportModal, #reimportTemplatesModal) > div {
    width: min(500px, calc(100vw - 64px)) !important; max-width: none !important; padding: 0 !important; overflow: hidden;
    background: var(--dv-surface) !important; border: 1px solid var(--dv-border); border-radius: 16px !important; box-shadow: 0 24px 64px -16px rgba(20, 24, 43, 0.35) !important; color: var(--dv-ink);
}
#reimportModal > div > h3 { margin: 0 !important; padding: 18px 28px 16px !important; border-bottom: 1px solid var(--dv-hair); font-size: 18px !important; font-weight: 700 !important; color: var(--dv-ink) !important; }
#reimportModal > div > p { margin: 16px 28px 12px !important; font-size: 13.5px !important; color: var(--dv-muted) !important; }
#reimportModal > div > div:nth-of-type(1) { margin: 0 28px 20px !important; gap: 8px !important; }
#reimportModal label {
    padding: 12px 14px !important; border: 1px solid var(--dv-border) !important; border-radius: 12px !important; background: var(--dv-surface) !important;
    transition: border-color 0.12s, background-color 0.12s !important;
}
#reimportModal label:hover { background: var(--dv-subtle) !important; }
#reimportModal label:has(input:checked) { border-color: var(--dv-primary) !important; background: var(--dv-primary-soft) !important; }
#reimportModal label input { accent-color: var(--dv-primary); width: 16px; height: 16px; margin: 2px 12px 0 0 !important; flex: none; }
#reimportModal label > div > div:first-child { font-size: 14px !important; color: var(--dv-ink) !important; margin-bottom: 2px !important; }
#reimportModal label > div > div:last-child { font-size: 13px !important; line-height: 1.5; color: var(--dv-muted) !important; }
#reimportModal label > div > div:last-child span { color: var(--dv-red) !important; }
:is(#reimportModal > div > div:last-child, #reimportTemplatesModal > div > div:last-child) {
    padding: 14px 28px !important; margin: 0 !important; border-top: 1px solid var(--dv-hair) !important; gap: 8px !important; display: flex; justify-content: flex-end;
}
:is(#reimportModal, #reimportTemplatesModal) > div > div:last-child > button {
    height: 36px !important; min-height: 36px !important; padding: 0 16px !important; font-size: 13.5px !important; font-weight: 500 !important;
    border-radius: var(--dv-radius-control) !important; box-shadow: none !important; line-height: 1 !important;
}
:is(#reimportModal, #reimportTemplatesModal) > div > div:last-child > button:first-child { background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-ink) !important; }
:is(#reimportModal, #reimportTemplatesModal) > div > div:last-child > button:first-child:hover { background: var(--dv-subtle) !important; }
:is(#reimportModal, #reimportTemplatesModal) > div > div:last-child > button:last-child { background: var(--dv-primary) !important; background-image: none !important; border: 0 !important; color: #fff !important; }
#reimportTemplatesModal > div > div:first-child { padding: 18px 28px 16px !important; border-bottom-color: var(--dv-hair) !important; }
#reimportTemplatesModal > div > div:first-child h3 { font-size: 18px !important; font-weight: 700 !important; color: var(--dv-ink) !important; }
#reimportTemplatesModal > div > div:nth-child(2) { padding: 16px 28px !important; }
#reimportTemplatesModal > div > div:nth-child(2) p { font-size: 14px !important; color: var(--dv-ink-2) !important; }

/* ---- Pricing rules: compact section cards ---- */
#pricing-rules .pricing-card { margin-bottom: 12px !important; border: 1px solid var(--dv-border) !important; border-radius: 12px !important; box-shadow: none !important; background: var(--dv-surface) !important; }
#pricing-rules .pricing-card-header { padding: 14px 20px 2px !important; background: transparent !important; }
#pricing-rules .pricing-card-header h3 { font-size: 15px !important; font-weight: 600 !important; color: var(--dv-ink) !important; gap: 8px; }
#pricing-rules .pricing-card-header h3 svg { width: 16px !important; height: 16px !important; margin: 0 !important; color: var(--dv-muted) !important; }
#pricing-rules .pricing-card-header .btn {
    height: 32px !important; min-height: 32px !important; padding: 0 12px !important; font-size: 13px !important; line-height: 1 !important;
    display: inline-flex !important; align-items: center; gap: 6px; background: var(--dv-surface) !important; color: var(--dv-ink) !important; border: 1px solid var(--dv-control) !important;
}
#pricing-rules .pricing-card-header .btn:hover { background: var(--dv-subtle) !important; }
#pricing-rules .pricing-card-header .btn svg { width: 13px !important; height: 13px !important; color: var(--dv-muted); }
#pricing-rules .pricing-card > p { margin: 0 0 12px !important; padding: 0 20px 0 44px !important; font-size: 13px !important; color: var(--dv-muted) !important; }
#pricing-rules .rules-list { padding: 0 20px 16px !important; }
#pricing-rules .rules-list > div[style*="text-align"] {
    text-align: left !important; padding: 10px 14px !important; font-size: 13px !important; color: var(--dv-muted) !important;
    border: 1px dashed var(--dv-control); border-radius: 10px; background: transparent;
}
#pricing-rules .rule-item { padding: 10px 14px !important; margin-bottom: 8px !important; background: var(--dv-surface) !important; border: 1px solid var(--dv-border) !important; border-radius: 10px !important; }
#pricing-rules .rule-item:hover { background: var(--dv-subtle) !important; }
#pricing-rules .rule-item-name { font-size: 14px; color: var(--dv-ink) !important; }
#pricing-rules .rule-item-details { font-size: 12.5px !important; color: var(--dv-muted) !important; }
#pricing-rules .pricing-card .table-container { margin: 0 20px 16px !important; border: 1px solid var(--dv-border); border-radius: 10px; overflow: hidden; }

/* Inline-styled confirm dialogs (logout, delete category…) */
:where(.status-confirm-modal, .logout-confirm-modal) { background: rgba(15, 18, 30, 0.45) !important; }
:where(.status-confirm-modal-content, .logout-confirm-modal-content) {
    background: var(--dv-surface) !important; border: 1px solid var(--dv-border) !important; border-radius: 16px !important; box-shadow: 0 24px 64px -16px rgba(20, 24, 43, 0.35) !important; color: var(--dv-ink);
}
:where(.status-confirm-modal-header, .logout-confirm-modal-header) { padding: 18px 28px 16px !important; border-bottom: 1px solid var(--dv-hair) !important; }
:where(.status-confirm-modal-header, .logout-confirm-modal-header) h3 { font-size: 18px !important; font-weight: 700 !important; color: var(--dv-ink) !important; }
:where(.status-confirm-modal-body, .logout-confirm-modal-body) { padding: 18px 28px !important; }
:where(.status-confirm-modal-body, .logout-confirm-modal-body) p { color: var(--dv-ink-2) !important; font-size: 14px !important; }
:where(.status-confirm-modal-footer, .logout-confirm-modal-footer) { padding: 14px 28px !important; border-top: 1px solid var(--dv-hair) !important; gap: 8px !important; }
:where(.status-confirm-modal-footer, .logout-confirm-modal-footer) button {
    height: 36px !important; min-height: 36px !important; padding: 0 16px !important; font-size: 13.5px !important; font-weight: 500 !important;
    border-radius: var(--dv-radius-control) !important; box-shadow: none !important; transform: none !important;
}
:where(.status-confirm-modal-footer, .logout-confirm-modal-footer) button:first-child:not(:only-child) { background: var(--dv-surface) !important; border: 1px solid var(--dv-control) !important; color: var(--dv-ink) !important; }

/* Configure quick actions — two-column grid of selectable tiles (markup + inline styles in quick-actions-config.js) */
#quickActionsConfigModal .modal-content {
    width: min(600px, calc(100vw - 64px)) !important; max-width: none !important; max-height: 88vh;
    display: flex; flex-direction: column; overflow: hidden;
}
#quickActionsConfigModal .modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 28px 22px !important; }
#quickActionsConfigModal .modal-body > p:first-child { margin: 0 0 10px !important; font-size: 13.5px !important; line-height: 1.45; color: var(--dv-muted) !important; }
#quickActionsConfigModal #quickActionsSelectionCount {
    display: inline-flex; align-items: center; height: 22px; padding: 0 9px; margin: 0 0 16px !important; border-radius: 999px;
    background: var(--dv-seg); color: var(--dv-ink-2) !important; font-size: 12px !important; font-weight: 600; font-variant-numeric: tabular-nums;
}
#quickActionsConfigModal #quickActionsSelectionCount.is-full { background: var(--dv-amber-soft); color: var(--dv-amber) !important; }
#quickActionsConfigModal #quickActionsConfigList {
    max-height: none !important; overflow: visible !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
#quickActionsConfigModal .quick-action-config-item {
    padding: 0 !important; border: 1px solid var(--dv-border) !important; border-radius: 10px; background: var(--dv-surface);
    transition: border-color 0.12s, background-color 0.12s;
}
#quickActionsConfigModal .quick-action-config-item:hover { border-color: var(--dv-control) !important; background: var(--dv-subtle); }
#quickActionsConfigModal .quick-action-config-item:has(input:checked) { border-color: var(--dv-primary) !important; background: var(--dv-primary-soft); }
#quickActionsConfigModal .quick-action-config-item:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--dv-primary-soft); }
#quickActionsConfigModal .quick-action-config-item label { padding: 9px 12px; min-height: 52px; gap: 10px; font-weight: 500; }
#quickActionsConfigModal .quick-action-config-item input[type="checkbox"] { order: 2; flex: none; width: 16px !important; height: 16px !important; margin: 0 0 0 auto !important; }
#quickActionsConfigModal .qa-config-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px !important; height: 32px !important; margin: 0 10px 0 0 !important;
    border-radius: 8px; background: var(--dv-seg); color: var(--dv-muted) !important;
}
#quickActionsConfigModal .qa-config-icon svg { width: 16px; height: 16px; }
#quickActionsConfigModal .quick-action-config-item:has(input:checked) .qa-config-icon { background: var(--dv-surface); color: var(--dv-primary) !important; }
#quickActionsConfigModal .qa-config-label { font-size: 13.5px; font-weight: 500; color: var(--dv-ink); line-height: 1.3; }
#quickActionsConfigModal .quick-actions-modal-footer { flex: none; justify-content: space-between !important; padding: 14px 28px !important; }

} /* end @media (min-width: 1025px) */