/* =============================================================================
   MOBILE.CSS — Comprehensive phone-first overrides
   DESKTOP SAFETY: Every single rule is inside a @media query.
   No rule here can affect a viewport wider than 768px.
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   1. GLOBAL FOUNDATION
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    /*
     * CRITICAL: Never set overflow:hidden on html/body/dashboard/page-content.
     * On Android Chrome, overflow:hidden on any ancestor blocks ALL touch scroll.
     * Clip overflow only on specific leaf containers that need it.
     */

    /* Page content: reduce horizontal padding, add bottom padding for nav bar */
    .page-content {
        padding: 12px 10px calc(68px + env(safe-area-inset-bottom, 0px)) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Cloud theme: account for fixed header */
    body[data-theme="cloud"] .dashboard.active {
        padding-top: 68px !important;
    }

    /* Universal: every card/section is full width, no forced min-width */
    .crm-section,
    .crm-stat-card,
    .admin-section,
    .admin-stat-card,
    .coordinator-tx-card {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Touch targets: minimum 44px only for primary interactive elements.
       DO NOT apply to small utility buttons (section actions, tabs, chips). */
    .btn,
    .crm-action-btn,
    .admin-action-btn,
    .coordinator-start-btn,
    .coordinator-start-btn-center,
    .coordinator-start-btn-inline,
    .btn-send-cta,
    .broadcast-send-btn,
    .mobile-more-btn,
    .mobile-bottom-nav-btn,
    input[type="submit"],
    input[type="button"],
    a.btn {
        min-height: 44px;
    }

    /* Explicitly reset small buttons that must NOT be 44px */
    .crm-section-action,
    .broadcast-tab,
    .broadcast-channel-tab,
    .token-chip,
    .btn-compose-tool,
    .btn-audience-action,
    .btn-audience-clear,
    .compact-calendar-day,
    .calendar-nav-btn,
    .fc-button,
    .scheduler-nav-btn,
    .scheduler-view-btn,
    .coordinator-view-btn,
    .mobile-more-close {
        min-height: 0 !important;
    }

    /* Inputs: prevent iOS auto-zoom on focus */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Page title: slightly smaller on mobile */
    .page-title {
        font-size: 1.5rem !important;
        letter-spacing: -0.02em !important;
    }

    /* Tap highlight: subtle branded color instead of blue flash */
    * { -webkit-tap-highlight-color: rgba(99, 102, 241, 0.10); }
    body[data-theme="cloud"] * { -webkit-tap-highlight-color: rgba(99, 102, 241, 0.08); }

    /* Page animation on show */
    .page.is-page-transitioning {
        animation: mob-page-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes mob-page-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Prevent overscroll bounce on page content (not html/body) */
    .page-content { overscroll-behavior-y: contain; }

    /* Tables: horizontal scroll instead of overflow */
    .table-wrap, [class*="table-body"], [class*="table-wrap"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    table { min-width: 420px; }
}

/* =============================================================================
   CLOUD THEME READABILITY LOCK (cloud-only)
   Forces dark readable typography on light cloud surfaces.
   ============================================================================= */
body[data-theme="cloud"] {
    --cloud-readable-strong: #111827;
    --cloud-readable-default: #1f2937;
    --cloud-readable-muted: #374151;
    --cloud-readable-soft: #4b5563;
}

body[data-theme="cloud"] :where(
    .crm-header,
    .admin-header,
    .crm-section,
    .admin-section,
    .coordinator-header-panel,
    .coordinator-folder,
    .assignment-panel,
    .client-list-card,
    .house-item,
    .house-listings,
    .map-filter-section,
    .widget-card,
    .card,
    .panel,
    .modal,
    .modal-content,
    .settings-modal-content,
    .notification-panel,
    .notifications-modal,
    .notification-detail-modal,
    .scheduler-modal,
    .scheduler-left-panel,
    .scheduler-right-panel,
    #crmPage,
    #coordinatorPage,
    #adminPage,
    #mapPage,
    #settingsPage,
    #brokerPage,
    #messagingDock
) :where(
    h1, h2, h3, h4, h5, h6,
    p, span, small, label, legend, li, th, td, dt, dd,
    .title, .subtitle, .subtext, .desc, .description, .meta, .hint, .kicker,
    .name, .value, .label, .text, .content,
    .date, .time, .timestamp,
    .email, .phone, .address, .budget,
    [class*="title"], [class*="subtitle"], [class*="subtext"], [class*="desc"],
    [class*="meta"], [class*="hint"], [class*="name"], [class*="value"], [class*="label"]
):not(a):not(button):not(.btn):not([class*="badge"]):not([class*="pill"]):not([class*="status"]) {
    color: var(--cloud-readable-default) !important;
}

body[data-theme="cloud"] :where(
    .crm-header,
    .admin-header,
    .crm-section,
    .admin-section,
    .coordinator-header-panel,
    .coordinator-folder,
    .assignment-panel,
    .client-list-card,
    .house-item,
    .house-listings,
    .map-filter-section,
    .widget-card,
    .card,
    .panel,
    .modal,
    .modal-content,
    .settings-modal-content,
    .notification-panel,
    .notifications-modal,
    .notification-detail-modal,
    .scheduler-modal,
    .scheduler-left-panel,
    .scheduler-right-panel,
    #crmPage,
    #coordinatorPage,
    #adminPage,
    #mapPage,
    #settingsPage,
    #brokerPage,
    #messagingDock
) :where(
    .page-title, .section-title, .modal-title,
    [class*="header-title"], [class*="section-title"], [class*="modal-title"]
) {
    color: var(--cloud-readable-strong) !important;
}

body[data-theme="cloud"] :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    textarea,
    select,
    option,
    .searchable-dropdown-input,
    .searchable-dropdown-item,
    .searchable-dropdown-list,
    .dropdown-item,
    .dropdown-option,
    .dropdown-menu,
    .dropdown-menu *
) {
    color: var(--cloud-readable-default) !important;
}

body[data-theme="cloud"] :where(
    input::placeholder,
    textarea::placeholder,
    .searchable-dropdown-input::placeholder
) {
    color: var(--cloud-readable-soft) !important;
    opacity: 1 !important;
}

body[data-theme="cloud"] :where(
    .btn.btn-secondary,
    .crm-action-btn.secondary,
    .clear-compare-btn,
    .clear-filters-btn,
    .notification-clear-btn,
    .crm-reset-layout-btn,
    .crm-widgets-btn,
    .all-clients-action-btn,
    .close-btn,
    .cancel-btn,
    .outline-btn,
    .ghost-btn
) {
    color: var(--cloud-readable-default) !important;
}

/* =============================================================================
   CLOUD THEME — UNIFIED MODAL HEADER SKIN
   Uses the same dark header color treatment as app header + white title text.
   ============================================================================= */
body[data-theme="cloud"] :where(
    .modal-header,
    .settings-modal-header,
    .notification-panel-header,
    .scheduler-left-header,
    .scheduler-right-header,
    .scheduler-availability-panel-header,
    .scheduler-working-hours-header,
    .scheduler-event-form-header,
    .quick-action-modal .modal-header,
    .followups-modal .modal-header,
    .related-contacts-modal .modal-header,
    .broadcast-preview-modal .modal-header,
    #allClientsModal .modal-header,
    #selectedClientsModal .modal-header,
    #excludeClientsModal .modal-header,
    #broadcastHistoryModal .modal-header,
    #allClientsAnalyticsModal .modal-header
) {
    background: linear-gradient(135deg, #452b9d 0%, #5734e5 100%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

body[data-theme="cloud"] :where(
    .modal-header,
    .settings-modal-header,
    .notification-panel-header,
    .scheduler-left-header,
    .scheduler-right-header,
    .scheduler-availability-panel-header,
    .scheduler-working-hours-header,
    .scheduler-event-form-header
) :where(
    h1, h2, h3, h4, h5, h6,
    .modal-title, .settings-modal-title, .scheduler-left-title, .scheduler-nav-label,
    .scheduler-operations-title, .scheduler-working-hours-title, .scheduler-event-form-title,
    .notification-panel-title
) {
    color: #ffffff !important;
}

/* Strong fallback: any non-button header text stays light in cloud modals */
body[data-theme="cloud"] :where(
    .modal-header,
    .settings-modal-header,
    .notification-panel-header,
    .scheduler-left-header,
    .scheduler-right-header,
    .scheduler-availability-panel-header,
    .scheduler-working-hours-header,
    .scheduler-event-form-header
) :where(
    h1, h2, h3, h4, h5, h6, p, span, small, strong, em, b, i, a, label,
    [class*="title"], [class*="header"], [class*="label"], [class*="meta"], [class*="subtitle"], [class*="count"]
):not(button):not(.btn):not([role="button"]):not(input):not(select):not(textarea) {
    color: rgba(248, 251, 255, 0.96) !important;
}

body[data-theme="cloud"] :where(
    .modal-header,
    .settings-modal-header,
    .notification-panel-header,
    .scheduler-left-header,
    .scheduler-right-header,
    .scheduler-availability-panel-header,
    .scheduler-working-hours-header,
    .scheduler-event-form-header
) :where(svg, svg *, .icon, .icon *) {
    fill: rgba(248, 251, 255, 0.96) !important;
    stroke: rgba(248, 251, 255, 0.96) !important;
}

body[data-theme="cloud"] :where(
    .modal-header,
    .settings-modal-header,
    .notification-panel-header,
    .scheduler-left-header,
    .scheduler-right-header,
    .scheduler-availability-panel-header,
    .scheduler-working-hours-header,
    .scheduler-event-form-header
) :where(
    .close-btn, .modal-close, .settings-close-btn, .notification-close-btn,
    button[aria-label*="close" i], button[title*="close" i], .scheduler-close-btn
) {
    color: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
}

body[data-theme="cloud"] :where(
    .modal-header,
    .settings-modal-header,
    .notification-panel-header,
    .scheduler-left-header,
    .scheduler-right-header,
    .scheduler-availability-panel-header,
    .scheduler-working-hours-header,
    .scheduler-event-form-header
) :where(
    .scheduler-mini-nav-label,
    .scheduler-operations-subtitle,
    .scheduler-ops-dot-label,
    .notification-time,
    .subtitle,
    [class*="subtitle"],
    [class*="subtext"]
) {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* Cloud modal-header action buttons: light surfaces on dark header */
body[data-theme="cloud"] :where(
    .modal-header,
    .settings-modal-header,
    .notification-panel-header,
    .scheduler-left-header,
    .scheduler-right-header,
    .scheduler-availability-panel-header,
    .scheduler-working-hours-header,
    .scheduler-event-form-header
) :where(
    .btn,
    .coordinator-tool-btn,
    .crm-section-action,
    .admin-action-btn,
    .all-clients-action-btn,
    .scheduler-nav-btn,
    .scheduler-nav-today,
    .scheduler-view-btn,
    .scheduler-zoom-btn,
    .scheduler-mini-nav-btn,
    .scheduler-availability-close-btn,
    .scheduler-close-btn
):not(.danger):not(.btn-primary):not(.active) {
    background: #f3f5f8 !important;
    border-color: #d6dde7 !important;
    color: #1e1b4b !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;
}

body[data-theme="cloud"] :where(
    .modal-header,
    .settings-modal-header,
    .notification-panel-header,
    .scheduler-left-header,
    .scheduler-right-header,
    .scheduler-availability-panel-header,
    .scheduler-working-hours-header,
    .scheduler-event-form-header
) :where(
    .btn,
    .coordinator-tool-btn,
    .crm-section-action,
    .admin-action-btn,
    .all-clients-action-btn,
    .scheduler-nav-btn,
    .scheduler-nav-today,
    .scheduler-view-btn,
    .scheduler-zoom-btn,
    .scheduler-mini-nav-btn,
    .scheduler-availability-close-btn,
    .scheduler-close-btn
):not(.danger):not(.btn-primary):not(.active):hover {
    background: #ffffff !important;
    border-color: #e6ebf2 !important;
    color: #0f172a !important;
}

/* Active header buttons keep dark contrast but readable text */
body[data-theme="cloud"] :where(
    .modal-header,
    .settings-modal-header,
    .notification-panel-header,
    .scheduler-left-header,
    .scheduler-right-header,
    .scheduler-availability-panel-header,
    .scheduler-working-hours-header,
    .scheduler-event-form-header
) :where(
    .btn.active,
    .coordinator-tool-btn.active,
    .crm-section-action.active,
    .admin-action-btn.active,
    .all-clients-action-btn.active,
    .scheduler-view-btn.active,
    .scheduler-zoom-btn.active
) {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.50) !important;
    color: #ffffff !important;
}

/* Cloud desktop safety: high-specificity modal header text overrides */
body[data-theme="cloud"] .modal-header,
body[data-theme="cloud"] .settings-modal-header,
body[data-theme="cloud"] .notification-panel-header,
body[data-theme="cloud"] .scheduler-left-header,
body[data-theme="cloud"] .scheduler-right-header,
body[data-theme="cloud"] .scheduler-availability-panel-header,
body[data-theme="cloud"] .scheduler-working-hours-header,
body[data-theme="cloud"] .scheduler-event-form-header {
    color: #f8fbff !important;
}

body[data-theme="cloud"] .modal-header .modal-title,
body[data-theme="cloud"] .settings-modal-header .modal-title,
body[data-theme="cloud"] .settings-modal-title,
body[data-theme="cloud"] .notification-panel-header .modal-title,
body[data-theme="cloud"] .notification-panel-title,
body[data-theme="cloud"] .scheduler-left-title,
body[data-theme="cloud"] .scheduler-nav-label,
body[data-theme="cloud"] .scheduler-operations-title,
body[data-theme="cloud"] .scheduler-working-hours-title,
body[data-theme="cloud"] .scheduler-event-form-title,
body[data-theme="cloud"] .idx-tpl-modal-title,
body[data-theme="cloud"] .gdocs-modal-title,
body[data-theme="cloud"] .ss-modal-title,
body[data-theme="cloud"] .ss-detail-modal-title,
body[data-theme="cloud"] .tx-edit-modal-title,
body[data-theme="cloud"] .brm-modal-title {
    color: #ffffff !important;
}

body[data-theme="cloud"] .modal-header h1,
body[data-theme="cloud"] .modal-header h2,
body[data-theme="cloud"] .modal-header h3,
body[data-theme="cloud"] .modal-header h4,
body[data-theme="cloud"] .modal-header h5,
body[data-theme="cloud"] .modal-header h6,
body[data-theme="cloud"] .settings-modal-header h1,
body[data-theme="cloud"] .settings-modal-header h2,
body[data-theme="cloud"] .settings-modal-header h3,
body[data-theme="cloud"] .settings-modal-header h4,
body[data-theme="cloud"] .settings-modal-header h5,
body[data-theme="cloud"] .settings-modal-header h6 {
    color: #ffffff !important;
}

body[data-theme="cloud"] .modal-header small,
body[data-theme="cloud"] .modal-header span:not(.btn):not(.badge):not([role="button"]),
body[data-theme="cloud"] .settings-modal-header small,
body[data-theme="cloud"] .settings-modal-header span:not(.btn):not(.badge):not([role="button"]),
body[data-theme="cloud"] .scheduler-left-header small,
body[data-theme="cloud"] .scheduler-right-header small,
body[data-theme="cloud"] .notification-panel-header small {
    color: rgba(248, 251, 255, 0.86) !important;
}

body[data-theme="cloud"] #allClientsModal .modal-header .modal-title,
body[data-theme="cloud"] #selectedClientsModal .modal-header .modal-title,
body[data-theme="cloud"] #excludeClientsModal .modal-header .modal-title,
body[data-theme="cloud"] #broadcastHistoryModal .modal-header .modal-title,
body[data-theme="cloud"] #allClientsAnalyticsModal .modal-header .modal-title,
body[data-theme="cloud"] #newClientModal .modal-header .modal-title,
body[data-theme="cloud"] #allContactsModal .acm-header .modal-title,
body[data-theme="cloud"] #relatedContactsModal .modal-header .modal-title,
body[data-theme="cloud"] #broadcastTemplatesModal .modal-header .modal-title,
body[data-theme="cloud"] #manageSegmentsModal .modal-header .modal-title,
body[data-theme="cloud"] #createSegmentModal .modal-header .modal-title,
body[data-theme="cloud"] #segmentClientsModal .modal-header .modal-title,
body[data-theme="cloud"] #allClientsAnalyticsModal .all-clients-analytics-meta,
body[data-theme="cloud"] #schedulerModal .scheduler-left-title {
    color: #ffffff !important;
}

body[data-theme="cloud"] #allContactsModal .acm-header .modal-title *,
body[data-theme="cloud"] #newClientModal .modal-header .modal-title *,
body[data-theme="cloud"] #broadcastTemplatesModal .modal-header .modal-title *,
body[data-theme="cloud"] #manageSegmentsModal .modal-header .modal-title *,
body[data-theme="cloud"] #createSegmentModal .modal-header .modal-title *,
body[data-theme="cloud"] #segmentClientsModal .modal-header .modal-title *,
body[data-theme="cloud"] #allClientsAnalyticsModal .modal-header .modal-title *,
body[data-theme="cloud"] #allClientsAnalyticsModal .all-clients-analytics-meta *,
body[data-theme="cloud"] #schedulerModal .scheduler-nav-label,
body[data-theme="cloud"] #schedulerModal .scheduler-nav-label *,
body[data-theme="cloud"] #schedulerModal .scheduler-mini-nav-label,
body[data-theme="cloud"] #schedulerModal .scheduler-mini-nav-label * {
    color: #ffffff !important;
}

/* =============================================================================
   CLOUD THEME — GLOBAL HEADER/BODY CONTRAST CONTRACT
   Header bars (dark/gray) => white text
   Regular surfaces => black/dark-gray text
   ============================================================================= */
body[data-theme="cloud"] :is(
    .modal,
    .modal-content,
    .settings-modal-content,
    .notifications-modal,
    .notification-detail-modal,
    .scheduler-modal,
    .scheduler-left-panel,
    .scheduler-right-panel
) :is(
    h1, h2, h3, h4, h5, h6,
    p, span, small, label, li, td, th, dt, dd,
    .title, .subtitle, .description, .meta, .hint,
    [class*="title"], [class*="subtitle"], [class*="description"], [class*="meta"], [class*="hint"]
):not(.modal-header *):not(.settings-modal-header *):not(.notification-panel-header *):not(.scheduler-left-header *):not(.scheduler-right-header *):not(.scheduler-availability-panel-header *):not(.scheduler-working-hours-header *):not(.scheduler-event-form-header *) {
    color: #1f2937 !important;
}

body[data-theme="cloud"] :is(
    .modal-header,
    .settings-modal-header,
    .notification-panel-header,
    .scheduler-left-header,
    .scheduler-right-header,
    .scheduler-availability-panel-header,
    .scheduler-working-hours-header,
    .scheduler-event-form-header
) {
    color: #ffffff !important;
}

body[data-theme="cloud"] :is(
    .modal-header,
    .settings-modal-header,
    .notification-panel-header,
    .scheduler-left-header,
    .scheduler-right-header,
    .scheduler-availability-panel-header,
    .scheduler-working-hours-header,
    .scheduler-event-form-header
) :is(
    h1, h2, h3, h4, h5, h6,
    p, span, small, strong, em, b, i, a, label,
    .modal-title, .settings-modal-title, .notification-panel-title,
    .scheduler-left-title, .scheduler-nav-label, .scheduler-mini-nav-label,
    [class*="title"], [class*="subtitle"], [class*="meta"], [class*="label"], [class*="count"]
):not(button):not(.btn):not([role="button"]):not(input):not(select):not(textarea) {
    color: #ffffff !important;
}

/* =============================================================================
   CLOUD THEME — SETTINGS PANEL POLISH
   White/light surfaces => dark text
   Dark/gray bars => white text
   ============================================================================= */
body[data-theme="cloud"] #settingsModal.settings-modal,
body[data-theme="cloud"] #settingsModal.settings-modal.modal {
    background: rgba(15, 23, 42, 0.52) !important;
}

body[data-theme="cloud"] #settingsModal .settings-modal-content {
    background: #f5f7fc !important;
    border: 1px solid #d5deea !important;
    box-shadow: 0 22px 60px rgba(45, 27, 105, 0.28) !important;
    color: #1f2937 !important;
}

body[data-theme="cloud"] #settingsModal .settings-modal-header {
    background: linear-gradient(135deg, #452b9d 0%, #5734e5 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

body[data-theme="cloud"] #settingsModal .settings-modal-header h2,
body[data-theme="cloud"] #settingsModal .settings-modal-header .settings-modal-title,
body[data-theme="cloud"] #settingsModal .settings-modal-header .settings-modal-title * {
    color: #ffffff !important;
}

body[data-theme="cloud"] #settingsModal .settings-modal-close {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
}

body[data-theme="cloud"] #settingsModal .settings-modal-close:hover {
    background: rgba(255, 255, 255, 0.28) !important;
}

body[data-theme="cloud"] #settingsModal .settings-modal-body {
    background: #f5f7fc !important;
}

body[data-theme="cloud"] #settingsModal .settings-tabs {
    background: #1f2937 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

body[data-theme="cloud"] #settingsModal .settings-tab {
    color: rgba(248, 251, 255, 0.78) !important;
}

body[data-theme="cloud"] #settingsModal .settings-tab:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body[data-theme="cloud"] #settingsModal .settings-tab.active {
    color: #ffffff !important;
    background: rgba(99, 102, 241, 0.65) !important;
}

body[data-theme="cloud"] #settingsModal .settings-tab.active::after {
    background: #8aa7d6 !important;
}

body[data-theme="cloud"] #settingsModal .settings-tab-content,
body[data-theme="cloud"] #settingsModal .settings-tab-content.active {
    color: #1f2937 !important;
}

body[data-theme="cloud"] #settingsModal .settings-tab-content h3,
body[data-theme="cloud"] #settingsModal .settings-tab-content h4,
body[data-theme="cloud"] #settingsModal .settings-description,
body[data-theme="cloud"] #settingsModal .settings-hint,
body[data-theme="cloud"] #settingsModal .settings-pw-req,
body[data-theme="cloud"] #settingsModal .permissions-view-note,
body[data-theme="cloud"] #settingsModal .permission-desc,
body[data-theme="cloud"] #settingsModal .permission-meta,
body[data-theme="cloud"] #settingsModal .permission-source,
body[data-theme="cloud"] #settingsModal .settings-coming-soon-badge,
body[data-theme="cloud"] #settingsModal .settings-phone-display {
    color: #475569 !important;
}

body[data-theme="cloud"] #settingsModal .settings-profile-header {
    background: #eef2f8 !important;
    border-color: #d5deea !important;
}

body[data-theme="cloud"] #settingsModal .settings-profile-name {
    color: #1e1b4b !important;
}

body[data-theme="cloud"] #settingsModal .settings-profile-role {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #2d1b69 !important;
}

body[data-theme="cloud"] #settingsModal .settings-section-card,
body[data-theme="cloud"] #settingsModal .permissions-list,
body[data-theme="cloud"] #settingsModal .integration-card,
body[data-theme="cloud"] #settingsModal .notification-detail-card {
    background: #ffffff !important;
    border-color: #d5deea !important;
    color: #1f2937 !important;
}

body[data-theme="cloud"] #settingsModal .settings-form-group label,
body[data-theme="cloud"] #settingsModal .permissions-user-select label,
body[data-theme="cloud"] #settingsModal .permission-item label,
body[data-theme="cloud"] #settingsModal .integration-card-name,
body[data-theme="cloud"] #settingsModal .integration-card-desc,
body[data-theme="cloud"] #settingsModal .integration-card-status,
body[data-theme="cloud"] #settingsModal .integration-card-meta,
body[data-theme="cloud"] #settingsModal .notification-detail-title,
body[data-theme="cloud"] #settingsModal .notification-detail-message,
body[data-theme="cloud"] #settingsModal .notification-detail-time,
body[data-theme="cloud"] #settingsModal .notification-detail-action {
    color: #1f2937 !important;
}

body[data-theme="cloud"] #settingsModal .settings-form-group input,
body[data-theme="cloud"] #settingsModal .settings-form-group select,
body[data-theme="cloud"] #settingsModal .permissions-user-select select,
body[data-theme="cloud"] #settingsModal .notification-detail-reply textarea,
body[data-theme="cloud"] #settingsModal .settings-input-readonly {
    background: #ffffff !important;
    border-color: #c4cfde !important;
    color: #1e1b4b !important;
}

body[data-theme="cloud"] #settingsModal .settings-form-group input::placeholder,
body[data-theme="cloud"] #settingsModal .notification-detail-reply textarea::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

body[data-theme="cloud"] #settingsModal .settings-form-group select option,
body[data-theme="cloud"] #settingsModal .permissions-user-select select option {
    background: #ffffff !important;
    color: #1e1b4b !important;
}

body[data-theme="cloud"] #settingsModal .settings-toggle-group,
body[data-theme="cloud"] #settingsModal .permission-item {
    background: #f7f9fd !important;
    border-color: #d5deea !important;
}

body[data-theme="cloud"] #settingsModal .settings-toggle-group label {
    color: #1f2937 !important;
}

body[data-theme="cloud"] #settingsModal .settings-toggle-group input[type="checkbox"],
body[data-theme="cloud"] #settingsModal .permission-item input[type="checkbox"] {
    background: #c8d3e4 !important;
}

body[data-theme="cloud"] #settingsModal .settings-toggle-group input[type="checkbox"]::before,
body[data-theme="cloud"] #settingsModal .permission-item input[type="checkbox"]::before {
    background: #ffffff !important;
}

body[data-theme="cloud"] #settingsModal .settings-toggle-group input[type="checkbox"]:checked,
body[data-theme="cloud"] #settingsModal .permission-item input[type="checkbox"]:checked {
    background: #6366f1 !important;
}

body[data-theme="cloud"] #settingsModal .settings-save-btn,
body[data-theme="cloud"] #settingsModal .settings-pw-submit-btn,
body[data-theme="cloud"] #settingsModal .notification-detail-reply-btn,
body[data-theme="cloud"] #settingsModal .notification-detail-ack-btn {
    background: #452b9d !important;
    border: 1px solid #2d1b69 !important;
    color: #ffffff !important;
}

body[data-theme="cloud"] #settingsModal .settings-save-btn:hover,
body[data-theme="cloud"] #settingsModal .settings-pw-submit-btn:hover,
body[data-theme="cloud"] #settingsModal .notification-detail-reply-btn:hover,
body[data-theme="cloud"] #settingsModal .notification-detail-ack-btn:hover {
    background: #1e1b4b !important;
    border-color: #1e1b4b !important;
}

body[data-theme="cloud"] #settingsModal .settings-modal-body::-webkit-scrollbar-track {
    background: #e9edf5 !important;
}

body[data-theme="cloud"] #settingsModal .settings-modal-body::-webkit-scrollbar-thumb {
    background: #b8c4d6 !important;
}

body[data-theme="cloud"] .modal-header svg,
body[data-theme="cloud"] .modal-header svg *,
body[data-theme="cloud"] .settings-modal-header svg,
body[data-theme="cloud"] .settings-modal-header svg *,
body[data-theme="cloud"] .notification-panel-header svg,
body[data-theme="cloud"] .notification-panel-header svg * {
    fill: currentColor !important;
    stroke: currentColor !important;
    color: rgba(248, 251, 255, 0.95) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. HEADER & NAVIGATION
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .header-content {
        padding: 0 12px !important;
        gap: 8px !important;
    }

    .logo {
        font-size: 20px !important;
        gap: 8px !important;
    }

    .logo-image {
        width: 38px !important;
        height: 38px !important;
        padding: 3px !important;
        flex-shrink: 0;
    }

    /* Hide desktop username and logout — accessible via mobile menu sheet */
    .username, .logout-btn { display: none !important; }

    /* Mobile menu toggle: ensure it shows */
    .mobile-menu-toggle {
        display: inline-flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        background: rgba(15, 23, 42, 0.72);
        cursor: pointer;
        flex-shrink: 0;
        order: 30;
    }

    .mobile-menu-toggle span {
        width: 16px; height: 2px;
        border-radius: 999px;
        background: #e2e8f0;
        display: block;
    }

    /* Desktop nav hidden on mobile */
    .nav-content { display: none !important; }

    /* Cloud: hamburger uses white on dark-purple header */
    body[data-theme="cloud"] .mobile-menu-toggle {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.28);
    }
    body[data-theme="cloud"] .mobile-menu-toggle span { background: #ffffff; }

    /* Mobile menu sheet: theme-aware */
    body[data-theme="cloud"] .mobile-more-sheet {
        background: #ffffff;
        border-color: rgba(99, 102, 241, 0.16);
        box-shadow: 0 14px 40px rgba(45, 27, 105, 0.18);
    }
    body[data-theme="cloud"] .mobile-more-header { color: #1e1b4b; }
    body[data-theme="cloud"] .mobile-more-btn {
        background: #f4f5fb;
        border-color: rgba(99, 102, 241, 0.16);
        color: #1e1b4b;
    }
    body[data-theme="cloud"] .mobile-more-btn.is-active {
        background: rgba(99, 102, 241, 0.12);
        border-color: #6366f1;
        color: #6366f1;
    }
    body[data-theme="cloud"] .mobile-more-btn--danger { color: #dc2626; border-color: rgba(239,68,68,0.28); }
    body[data-theme="cloud"] .mobile-more-close {
        background: #f0f1fb;
        border-color: rgba(99, 102, 241, 0.20);
        color: #1e1b4b;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. BOTTOM NAVIGATION BAR
   ───────────────────────────────────────────────────────────────────────────── */

/* Mobile-only shell elements: hidden on all viewports wider than 768px */
.mobile-bottom-nav  { display: none; }
.mob-tools-popup    { display: none; }
.mob-tools-backdrop { display: none; }
.mob-tools-orb      { display: none; }

/* Desktop: hide mobile section labels even if they were injected before a resize */
@media (min-width: 769px) {
    .crm-mobile-section-label { display: none !important; }
}

@media (max-width: 768px) {
    .mob-tools-popup { display: block; }
    .mob-tools-orb   { display: flex;  }
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: calc(var(--z-header, 2000) - 1);
        align-items: center;
        justify-content: space-around;
        height: calc(58px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: 4px;
        padding-right: 4px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        /* Default (dark themes) */
        background: rgba(11, 18, 32, 0.97);
        border-top: 1px solid rgba(148, 163, 184, 0.14);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.30);
    }

    body[data-theme="cloud"] .mobile-bottom-nav {
        background: rgba(255, 255, 255, 0.97);
        border-top-color: rgba(99, 102, 241, 0.14);
        box-shadow: 0 -4px 20px rgba(45, 27, 105, 0.10);
    }

    body[data-theme="stellar"] .mobile-bottom-nav {
        background: rgba(7, 7, 15, 0.97);
        border-top-color: rgba(99, 102, 241, 0.18);
    }

    .mobile-bottom-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 4px 4px;
        background: none;
        border: none;
        cursor: pointer;
        color: #64748b;
        border-radius: 12px;
        min-height: 50px;
        transition: color 0.16s;
        position: relative;
    }

    .mobile-bottom-nav-btn:active { opacity: 0.7; transform: scale(0.94); }

    .mobile-bottom-nav-btn.active { color: #6366f1; }
    body[data-theme="cloud"] .mobile-bottom-nav-btn { color: #94a3b8; }
    body[data-theme="cloud"] .mobile-bottom-nav-btn.active { color: #6366f1; }

    /* Active indicator: small dot above icon */
    .mobile-bottom-nav-btn.active::before {
        content: '';
        position: absolute;
        top: 3px;
        left: 50%;
        transform: translateX(-50%);
        width: 28px; height: 3px;
        border-radius: 0 0 3px 3px;
        background: currentColor;
        opacity: 0.8;
    }

    .mobile-bottom-nav-icon {
        width: 22px; height: 22px;
        display: flex; align-items: center; justify-content: center;
    }

    .mobile-bottom-nav-icon svg {
        width: 20px; height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-bottom-nav-label {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.01em;
        line-height: 1;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. FLOATING BUTTONS — push above bottom nav
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* Messaging dock toggle */
    .messaging-dock-toggle {
        bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 14px) !important;
        left: 16px !important;
        width: 46px !important;
        height: 46px !important;
    }

    /* Radial menu — above messaging button */
    .grm-container {
        bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 76px) !important;
        left: 16px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. MODALS
   Already handled well in modals.css ≤640px, adding supplements here.
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    /* Modal footer: wrap buttons */
    .modal-footer {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .modal-footer .btn, .modal-footer button {
        flex: 1 !important;
        min-width: 110px !important;
        justify-content: center !important;
    }

    /* Settings modal: full-screen */
    .settings-modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
    }

    /* Modals slide up with animation */
    .modal-overlay.active .modal {
        animation: mob-modal-up 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes mob-modal-up {
        from { opacity: 0; transform: translateY(32px); }
        to   { opacity: 1; transform: none; }
    }

    /* Overscroll contained in modal body only */
    .modal-body {
        overscroll-behavior-y: contain;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. CRM — ALL CLIENTS VIEW
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* ── All Clients header bar ── */
    .all-clients-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 14px 16px !important;
        border-radius: 12px !important;
    }

    .all-clients-title { font-size: 18px !important; }

    .all-clients-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .all-clients-action-btn,
    .crm-reset-layout-btn,
    .crm-widgets-btn,
    .all-clients-action-btn {
        font-size: 12px !important;
        padding: 7px 12px !important;
        flex: 0 0 auto !important;
    }

    /* ── 2fr/1fr grid → single column ── */
    .crm-content-layout {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* ── My Analytics compact cards: 2-up ── */
    #crmAllClientsView .ma-compact-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ── Client table: scroll horizontally ── */
    .all-clients-table-body {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .all-clients-table-head, .acl-row {
        min-width: 520px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. CRM MOBILE SECTION DIVIDER LABEL (injected once by app.js)
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* Tab bar removed — simple scroll divider only */

    .crm-mobile-section-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        border-radius: 10px 10px 0 0;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
        background: var(--bg-muted, rgba(255,255,255,0.04));
        border: 1px solid var(--border-soft);
        border-bottom: none;
    }

    .crm-mobile-section-label a {
        color: var(--accent-primary);
        font-size: 11px;
        font-weight: 600;
        text-decoration: none;
        min-height: 32px;
        display: flex;
        align-items: center;
        padding: 0 4px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. CRM — INDIVIDUAL CLIENT VIEW
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* ── Client info card ── */
    .crm-client-info-card {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    /* Client header: avatar + name/tags */
    .crm-client-info-header,
    .crm-client-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* Detail grid: single column */
    .crm-client-details-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    /* Detail rows */
    .crm-detail-row {
        gap: 4px !important;
        flex-wrap: wrap !important;
    }

    .crm-detail-label {
        font-size: 11px !important;
        min-width: 60px !important;
    }

    .crm-detail-value {
        font-size: 13px !important;
    }

    /* Action buttons: Tags, Widgets, Reset Layout */
    .crm-layout-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-top: 8px !important;
    }

    .crm-layout-actions button,
    .crm-preferences-btn {
        font-size: 11px !important;
        padding: 6px 10px !important;
        min-height: 36px !important;
        flex: 0 0 auto !important;
    }

    /* Contact action icons: fill row */
    .crm-contact-actions {
        display: flex !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .crm-contact-action-btn {
        flex: 1 !important;
        min-width: 72px !important;
        min-height: 44px !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 3px !important;
        font-size: 10px !important;
    }

    /* Client name */
    .crm-client-name {
        font-size: 1.2rem !important;
    }

    /* ── Stat tiles (Properties Viewed, Offers Made, etc.) ── */
    .crm-stats-row,
    .crm-client-stats,
    .crm-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .crm-stat-card {
        padding: 10px 12px !important;
        border-radius: 12px !important;
    }

    .crm-stat-value { font-size: 1.4rem !important; }
    .crm-stat-label { font-size: 0.68rem !important; }

    /* ── Activity timeline ── */
    .crm-timeline {
        padding-left: 20px !important;
        border-left-width: 2px !important;
    }

    .crm-timeline-entry {
        padding: 10px 12px !important;
        margin-bottom: 12px !important;
    }

    .crm-timeline-date {
        font-size: 11px !important;
    }

    .crm-timeline-content {
        font-size: 13px !important;
    }

    /* ── Documents section ── */
    .crm-drop-zone {
        padding: 20px 12px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
    }

    .crm-document-item {
        padding: 10px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* ── Notes ── */
    .crm-note-card {
        padding: 10px 12px !important;
        border-radius: 10px !important;
    }

    /* ── Task items ── */
    .crm-task-item {
        padding: 10px 12px !important;
        flex-wrap: wrap !important;
    }

    /* ── Properties viewed / offers ── */
    .crm-property-card {
        padding: 10px !important;
    }

    /* Right column: scroll anchor margin so tabs work */
    #clientRightColumn {
        scroll-margin-top: 120px;
    }
    #allClientsRightColumn {
        scroll-margin-top: 120px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. CAMPAIGN CENTER / BROADCAST
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .broadcast-section {
        padding: 12px !important;
        border-radius: 12px !important;
    }

    /* Stats row: 3-chip row → wraps */
    .campaign-stats-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .campaign-stat-chip {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }

    /* Tabs: 2×2 grid */
    .broadcast-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        padding: 8px !important;
    }

    .broadcast-tab {
        padding: 8px 6px !important;
        font-size: 11px !important;
        min-height: 40px !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    /* Channel tabs: horizontal scroll */
    .broadcast-channel-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 6px !important;
        padding-bottom: 2px !important;
    }
    .broadcast-channel-tabs::-webkit-scrollbar { display: none; }

    .broadcast-channel-tab {
        flex-shrink: 0 !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
        min-height: 36px !important;
    }

    /* Form rows: single column */
    .broadcast-form-row,
    .broadcast-form-row-2 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .broadcast-form { gap: 12px !important; }

    .broadcast-field label { font-size: 11px !important; }
    .broadcast-field input,
    .broadcast-field textarea,
    .broadcast-field select {
        font-size: 15px !important;
        padding: 10px 12px !important;
    }

    /* Send button: full width */
    .broadcast-send-btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 44px !important;
    }

    /* Recipients bar */
    .broadcast-recipients-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. COORDINATOR PAGE
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* ── Header ── */
    .coordinator-header-panel {
        padding: 12px 12px !important;
        border-radius: 12px !important;
    }

    .coordinator-title {
        font-size: 1.2rem !important;
    }

    .coordinator-subtitle {
        font-size: 0.75rem !important;
    }

    .coordinator-header-toolbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }

    .coordinator-view-btn {
        font-size: 11px !important;
        padding: 6px 10px !important;
        min-height: 36px !important;
    }

    /* ── KPI strip: 2-column ── */
    .coordinator-kpi-strip {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .coordinator-kpi-tile {
        padding: 10px 8px !important;
        border-radius: 10px !important;
    }

    .coordinator-kpi-value { font-size: 1.45rem !important; }
    .coordinator-kpi-label { font-size: 0.62rem !important; }

    /* ── Search bar ── */
    .coordinator-search-bar {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .coordinator-search-input {
        width: 100% !important;
    }

    /* ── Transaction cards: single column ── */
    .coordinator-folders-container {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .coordinator-tx-card {
        padding: 14px 12px !important;
        border-radius: 12px !important;
    }

    .coordinator-tx-title { font-size: 0.92rem !important; }
    .coordinator-tx-address { font-size: 0.75rem !important; }

    .coordinator-tx-footer {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Start transaction buttons: full width */
    .coordinator-start-btn,
    .coordinator-start-btn-center,
    .coordinator-start-btn-inline {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ── New transaction button in header ── */
    .coordinator-start-btn-corner {
        position: static !important;
    }

    /* ── Transaction workspace: stack panels ── */
    #coordinatorWorkspaceView {
        flex-direction: column !important;
    }

    .tx-ws-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-soft) !important;
        flex-shrink: 0 !important;
    }

    /* Tab bar: horizontal scroll */
    .tx-ws-tab-bar {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .tx-ws-tab-bar::-webkit-scrollbar { display: none; }

    .tx-ws-tab {
        flex-shrink: 0 !important;
        font-size: 11px !important;
        padding: 8px 10px !important;
    }

    /* Dashboard panel: single column */
    .tx-ws-dashboard-grid,
    .tx-ws-overview-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Documents list: full width */
    .tx-ws-doc-item {
        padding: 10px 12px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. ADMIN PAGE
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* ── Admin header ── */
    .admin-header {
        padding: 14px 14px !important;
        border-radius: 12px !important;
    }

    .admin-header-title { font-size: 1.2rem !important; }
    .admin-header-subtitle { font-size: 0.78rem !important; }

    /* ── KPI tiles: 2-column ── */
    .admin-stats-grid,
    .admin-kpi-strip {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .admin-stat-card {
        padding: 10px 12px !important;
        border-radius: 12px !important;
    }

    .admin-stat-value { font-size: 1.4rem !important; }
    .admin-stat-label { font-size: 0.68rem !important; }

    /* ── Import/Export: 2×2 grid ── */
    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .quick-action-btn {
        padding: 14px 8px !important;
        border-radius: 12px !important;
        min-height: 80px !important;
    }

    .quick-action-icon { font-size: 22px !important; }
    .quick-action-label { font-size: 11px !important; }

    /* ── Admin section actions ── */
    .admin-section-action {
        font-size: 12px !important;
        padding: 8px 12px !important;
        min-height: 40px !important;
    }

    /* ── Team roster table: scroll ── */
    .admin-table-body {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ── Seat usage bar ── */
    .seat-usage-banner,
    .seat-usage-inline {
        padding: 10px 12px !important;
        border-radius: 10px !important;
    }

    /* ── Content layout: single column ── */
    .broker-content-layout,
    .admin-content-layout {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ── Broker Command Center ── */
    #brokerPage .broker-command-header {
        padding: 16px !important;
        border-radius: 12px !important;
    }

    #brokerPage .broker-command-kpi-strip {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    #brokerPage .broker-command-kpi-card {
        padding: 12px !important;
        min-height: 90px !important;
        border-radius: 12px !important;
    }

    #brokerPage .broker-command-kpi-value { font-size: 24px !important; }
    #brokerPage .broker-command-kpi-label { font-size: 10px !important; }

    /* Broker tabs: horizontal scroll */
    #brokerPage .broker-command-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 6px !important;
        border-radius: 12px !important;
    }
    #brokerPage .broker-command-tabs::-webkit-scrollbar { display: none; }

    #brokerPage .broker-command-tab {
        flex-shrink: 0 !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
        min-height: 38px !important;
    }

    /* Broker overview cards: single column */
    #brokerPage .broker-command-overview-layout {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    #brokerPage .broker-command-placeholder,
    #brokerPage .broker-command-office-card {
        min-height: 160px !important;
        padding: 16px !important;
        border-radius: 12px !important;
    }

    /* Broker overview summary grid: 2-column */
    .broker-overview-summary-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .broker-overview-summary-card {
        padding: 10px 12px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. COMPACT CALENDAR WIDGET (Admin / CRM inline)
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* Stack mini calendar + events panel */
    .compact-calendar-layout {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .compact-calendar-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
    }

    .compact-calendar-events-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 200px !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
    }

    /* Filter tab buttons */
    .calendar-filter-row {
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    .calendar-filter-btn {
        flex: 1 !important;
        min-height: 40px !important;
        font-size: 12px !important;
        padding: 6px 4px !important;
        text-align: center !important;
    }

    /* Add Event button */
    .calendar-add-btn {
        min-height: 44px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }

    /* Calendar day cells */
    .compact-calendar-day {
        min-height: 28px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   13. MAP PAGE
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .map-filter-section {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .listings-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .house-listings {
        grid-template-columns: 1fr !important;
    }

    .house-item {
        border-radius: 12px !important;
    }

    .compare-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Compare modal: full screen */
    .compare-modal .modal {
        border-radius: 16px 16px 0 0 !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. CLOUD THEME — Mobile-specific adjustments
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* Slightly tighter section cards */
    body[data-theme="cloud"] .crm-section,
    body[data-theme="cloud"] .admin-section,
    body[data-theme="cloud"] .coordinator-tx-card {
        border-radius: 14px !important;
    }

    /* Cloud: section header inside card */
    body[data-theme="cloud"] .crm-section-header {
        padding: 12px 14px !important;
    }

    /* Cloud theme: KPI tiles */
    body[data-theme="cloud"] .coordinator-kpi-tile,
    body[data-theme="cloud"] .admin-stat-card,
    body[data-theme="cloud"] .crm-stat-card {
        border-radius: 12px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   15. OVERSCROLL — Contained only in scrollable sub-containers
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .modal-body,
    .searchable-dropdown-list,
    .coordinator-broker-inbox-body,
    .coordinator-broker-section-body,
    .scheduler-left-panel,
    #clientRightColumn,
    #allClientsRightColumn {
        overscroll-behavior-y: contain;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   16. SMALL PHONES (≤390px)
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 390px) {
    .page-content {
        padding: 10px 8px calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Tighter KPI grids */
    .coordinator-kpi-strip,
    .admin-stats-grid,
    #brokerPage .broker-command-kpi-strip {
        gap: 6px !important;
    }

    /* Smaller KPI numbers */
    .coordinator-kpi-value,
    .crm-stat-value,
    .admin-stat-value,
    #brokerPage .broker-command-kpi-value {
        font-size: 1.2rem !important;
    }

    /* Very compact tabs */
    .broadcast-tab {
        font-size: 10px !important;
        padding: 7px 4px !important;
    }

    /* Compact section titles */
    .crm-section-title,
    .admin-section-title {
        font-size: 13px !important;
    }

    /* Page title */
    .page-title { font-size: 1.25rem !important; }

    /* Bottom nav labels even tighter */
    .mobile-bottom-nav-label { font-size: 9px !important; }
}

/* =============================================================================
   17. WIDGET CARD SIZE FIXES
   ============================================================================= */

@media (max-width: 768px) {
    /* Section header: compact, no overflow */
    .crm-section-header {
        padding-bottom: 10px !important;
        margin-bottom: 12px !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
    }

    .crm-section-title {
        font-size: 14px !important;
        font-weight: 700 !important;
        gap: 5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    .crm-section-title svg { width: 14px !important; height: 14px !important; flex-shrink: 0; }

    .crm-section-action {
        padding: 5px 10px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        border-radius: 7px !important;
        white-space: nowrap !important;
        min-height: 30px !important;
    }

    .crm-section-actions { flex-shrink: 0 !important; gap: 5px !important; }

    /* Hide drag handle on mobile — no drag-to-reorder on touch */
    .crm-drag-handle { display: none !important; }

    .crm-widget-column { min-width: 0 !important; width: 100% !important; gap: 12px !important; }

    /* Team Pipeline metric cards: 2-column */
    .crm-team-metrics {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .crm-team-metric-card {
        padding: 10px 12px !important;
        border-radius: 10px !important;
        min-width: 0 !important;
    }

    .crm-team-metric-value { font-size: 20px !important; margin-top: 4px !important; }
    .crm-team-metric-label { font-size: 10px !important; }
    .crm-team-metric-sub   { font-size: 10px !important; margin-top: 3px !important; }

    /* My Analytics: 2-column */
    .ma-compact-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

    .ma-compact-card {
        padding: 10px 10px 8px !important;
        border-radius: 10px !important;
        min-width: 0 !important;
    }

    .ma-compact-value { font-size: 20px !important; }
    .ma-compact-label { font-size: 9px !important; }
    .ma-compact-sub   { font-size: 10px !important; }

    /* CRM sections: compact padding */
    .crm-section {
        padding: 12px !important;
        border-radius: 14px !important;
    }
}

/* =============================================================================
   18. CAMPAIGN CENTER — Full Mobile Rework
   ============================================================================= */

@media (max-width: 768px) {
    /* Outer container: no padding, rounded corners, clip children */
    .broadcast-section {
        padding: 0 !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    /* Section header inside broadcast */
    .broadcast-section .crm-section-header {
        padding: 10px 14px !important;
        margin-bottom: 0 !important;
        border-bottom: 1px solid var(--border-soft) !important;
        padding-bottom: 10px !important;
    }

    /* Stats row: horizontal scroll */
    .campaign-stats-row {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        gap: 6px !important;
        padding: 8px 14px !important;
        border-bottom: 1px solid var(--border-soft) !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .campaign-stats-row::-webkit-scrollbar { display: none; }

    .campaign-stat-chip {
        flex-shrink: 0 !important;
        font-size: 11px !important;
        padding: 4px 10px !important;
        white-space: nowrap !important;
    }

    /* Main tabs: horizontal scrolling pills */
    .broadcast-tabs {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        gap: 4px !important;
        padding: 8px 12px 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .broadcast-tabs::-webkit-scrollbar { display: none; }

    .broadcast-tab {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 7px 14px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 8px 8px 0 0 !important;
        min-height: 36px !important;
        white-space: nowrap !important;
    }

    /* Tab content */
    .broadcast-content { padding: 0 !important; }
    .broadcast-content.active {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
    }

    /* Recipients bar */
    .campaign-audience-bar {
        margin: 10px 12px 0 !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        border: 1px solid var(--border-soft) !important;
        background: var(--bg-muted, rgba(255,255,255,0.04)) !important;
    }

    .campaign-audience-bar-top {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .campaign-audience-label {
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.07em !important;
        text-transform: uppercase !important;
        color: var(--text-muted) !important;
        flex-shrink: 0 !important;
    }

    .campaign-audience-bar-actions { display: flex !important; gap: 5px !important; flex-wrap: wrap !important; }

    .btn-audience-action {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        padding: 5px 10px !important;
        min-height: 30px !important;
        border-radius: 6px !important;
    }

    .btn-audience-clear {
        font-size: 11px !important;
        padding: 5px 8px !important;
        min-height: 30px !important;
        border-radius: 6px !important;
    }

    .campaign-audience-status {
        font-size: 11px !important;
        margin-top: 5px !important;
        line-height: 1.4 !important;
        opacity: 0.75 !important;
    }

    .campaign-audience-bar-groups {
        margin-top: 5px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    /* Channel selector: horizontal scroll */
    .broadcast-channel-tabs {
        display: flex !important;
        gap: 6px !important;
        padding: 10px 12px 0 !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }
    .broadcast-channel-tabs::-webkit-scrollbar { display: none; }

    .broadcast-channel-tab {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        min-height: 32px !important;
        border-radius: 999px !important;
    }

    /* Form area */
    .broadcast-channel-content.active { padding: 10px 12px !important; }

    .broadcast-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .broadcast-field { display: flex !important; flex-direction: column !important; gap: 4px !important; }

    .broadcast-field-header {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        align-items: flex-start !important;
    }

    .broadcast-field label {
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        color: var(--text-muted) !important;
    }

    /* Token chips: horizontal scroll, no wrap */
    .token-insert-bar {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        width: 100% !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 2px !important;
    }
    .token-insert-bar::-webkit-scrollbar { display: none; }
    .token-insert-label { display: none !important; }

    .token-chip {
        flex-shrink: 0 !important;
        font-size: 11px !important;
        padding: 4px 9px !important;
        min-height: 26px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
    }

    /* Input + textarea */
    .broadcast-field input {
        padding: 10px 12px !important;
        font-size: 15px !important;
        border-radius: 9px !important;
    }

    .broadcast-field textarea {
        min-height: 120px !important;
        max-height: 200px !important;
        padding: 10px 12px !important;
        font-size: 15px !important;
        border-radius: 9px !important;
        resize: vertical !important;
    }

    /* Template dropdown: full width */
    .broadcast-field-template .coordinator-tool-btn,
    .broadcast-field-template button {
        width: 100% !important;
        text-align: left !important;
        font-size: 13px !important;
        min-height: 40px !important;
        border-radius: 9px !important;
        padding: 8px 12px !important;
    }

    /* Compose footer: stack vertically */
    .broadcast-compose-footer {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding-top: 2px !important;
    }

    /* Tool buttons (Draft, Preview, Schedule): equal-width row */
    .broadcast-compose-tools {
        display: flex !important;
        gap: 6px !important;
    }

    .btn-compose-tool {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 8px 6px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        min-height: 36px !important;
        border-radius: 8px !important;
        border: 1px solid var(--border-soft) !important;
        background: var(--bg-muted, rgba(255,255,255,0.05)) !important;
        white-space: nowrap !important;
    }

    .btn-compose-tool svg { width: 12px !important; height: 12px !important; }

    /* Send CTA: full width, prominent */
    .btn-send-cta {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 13px 16px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        min-height: 48px !important;
    }
}


/* =============================================================================
   19. CAMPAIGN CENTER — Tab overflow + Token Insert Popover
   ============================================================================= */

@media (max-width: 768px) {
    /* Ensure History tab never gets clipped — add right padding to scroll zone */
    .broadcast-tabs {
        padding-right: 16px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ── Token insert: hide inline chips, show a compact "⊕ Insert" toggle ── */
    .token-insert-bar {
        display: none !important; /* hidden by default on mobile */
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        border: 1px solid var(--border-soft) !important;
        background: var(--bg-card) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.30) !important;
        position: absolute !important;
        top: calc(100% + 4px) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 200 !important;
        width: auto !important;
    }

    .token-insert-bar.mob-open {
        display: flex !important;
    }

    /* Each field header: position relative so popover anchors to it */
    .broadcast-field-header {
        position: relative !important;
    }

    /* Token toggle button (injected by JS) */
    .token-insert-toggle {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 4px 10px !important;
        border-radius: 999px !important;
        border: 1px solid var(--border-soft) !important;
        background: var(--bg-muted, rgba(255,255,255,0.06)) !important;
        color: var(--text-muted) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        min-height: 26px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .token-insert-toggle.active {
        background: var(--accent-primary) !important;
        color: #fff !important;
        border-color: var(--accent-primary) !important;
    }

    /* Token chips inside the open popover */
    .token-insert-bar.mob-open .token-chip {
        flex-shrink: 0 !important;
        font-size: 12px !important;
        padding: 5px 10px !important;
        min-height: 30px !important;
    }
}

/* =============================================================================
   20. TASKS COMMAND STRIP — Simplified on mobile
   ============================================================================= */

@media (max-width: 768px) {
    /* Command strip container */
    #globalTasksCommandStrip {
        padding: 0 !important;
    }

    /* Main KPI row: show only 3 most important numbers, hide rest */
    .command-strip-kpis {
        display: flex !important;
        gap: 0 !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
        background: var(--bg-muted, rgba(255,255,255,0.04)) !important;
        margin-bottom: 6px !important;
    }
    .command-strip-kpis::-webkit-scrollbar { display: none; }

    .command-kpi {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
        padding: 4px 8px !important;
        flex-shrink: 0 !important;
    }

    .command-kpi-label {
        font-size: 9px !important;
        white-space: nowrap !important;
    }

    .command-kpi-value {
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    .command-kpi-sep {
        width: 1px !important;
        align-self: stretch !important;
        background: var(--border-soft) !important;
        flex-shrink: 0 !important;
        margin: 4px 0 !important;
    }

    /* 7D Insight velocity block: collapse to one-liner */
    .command-strip-velocity {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 5px 10px !important;
        border-radius: 8px !important;
        background: var(--bg-muted, rgba(255,255,255,0.03)) !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        margin-bottom: 6px !important;
        font-size: 11px !important;
    }
    .command-strip-velocity::-webkit-scrollbar { display: none; }

    .command-velocity-label {
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .command-velocity-kpis {
        display: flex !important;
        gap: 10px !important;
        flex-shrink: 0 !important;
    }

    .command-velocity-kpi {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
        font-size: 11px !important;
    }

    .command-kpi-sep { display: none !important; }

    /* Bottom strip: compact row */
    .command-strip-bottom {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        padding: 4px 0 !important;
    }

    .command-alerts {
        display: flex !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        flex: 1 !important;
    }

    .command-alert {
        font-size: 10px !important;
        padding: 3px 8px !important;
    }

    .command-actions button {
        font-size: 12px !important;
        padding: 6px 12px !important;
        min-height: 34px !important;
    }

    /* Also fix the global-task-panel-footer if it appears as a different element */
    .global-task-panel-footer {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    .global-task-panel-footer .btn {
        flex: 1 !important;
        min-width: 100px !important;
        justify-content: center !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
        min-height: 38px !important;
    }
}

/* =============================================================================
   21. SCHEDULER — Week view columns fit + proper layout
   ============================================================================= */

@media (max-width: 768px) {
    /* Calendar area: allow horizontal scroll on week view */
    #schedulerCalendarContainer .fc {
        font-size: 10px !important;
    }

    #schedulerCalendarContainer .fc-view-harness {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Time grid body: minimum width so all columns are visible via scroll */
    #schedulerCalendarContainer .fc-timegrid-body,
    #schedulerCalendarContainer .fc-timegrid-cols {
        min-width: 480px !important;
    }

    #schedulerCalendarContainer .fc-col-header {
        min-width: 480px !important;
    }

    /* Time axis: narrower */
    #schedulerCalendarContainer .fc-timegrid-axis {
        width: 38px !important;
    }

    /* Header cells: compact */
    #schedulerCalendarContainer .fc-col-header-cell-cushion {
        font-size: 9px !important;
        padding: 2px !important;
        white-space: nowrap !important;
    }

    /* Slot labels */
    #schedulerCalendarContainer .fc-timegrid-slot-label-cushion {
        font-size: 9px !important;
        padding: 0 2px !important;
    }

    /* Right header: ensure Day view button is accessible */
    .scheduler-right-header {
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }
    .scheduler-right-header::-webkit-scrollbar { display: none; }

    .scheduler-view-toggle {
        display: flex !important;
        gap: 3px !important;
        flex-shrink: 0 !important;
    }

    .scheduler-view-btn {
        padding: 5px 8px !important;
        font-size: 10px !important;
        min-height: 30px !important;
        white-space: nowrap !important;
    }

    /* Left panel: compact layout */
    .scheduler-left-panel {
        max-height: 28vh !important;
    }

    .scheduler-left-header {
        padding: 10px 12px 8px !important;
    }

    .scheduler-left-title {
        font-size: 13px !important;
    }

    .scheduler-add-event-btn {
        margin: 6px 8px 4px !important;
        padding: 7px 12px !important;
        font-size: 12px !important;
    }

    /* Mini calendar in left panel: compact */
    .scheduler-mini-nav-wrap { display: none !important; }
    .scheduler-users-section { padding: 6px 10px !important; }

    .scheduler-section-label {
        font-size: 10px !important;
        padding: 4px 10px !important;
    }
}

/* =============================================================================
   22. INDIVIDUAL CLIENT CRM HEADER — Full mobile rework
   ============================================================================= */

@media (max-width: 768px) {
    /* ── Outer card ── */
    .crm-client-info-card.crm-client-header {
        padding: 12px !important;
        border-radius: 14px !important;
    }

    /* ── Top bar: action buttons ── */
    .crm-client-header-top {
        margin-bottom: 10px !important;
    }

    .crm-header-top-right {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        align-items: center !important;
    }

    /* Make Preferences and Manage Tags compact */
    .crm-preferences-btn {
        padding: 4px 9px !important;
        font-size: 11px !important;
        min-height: 28px !important;
        border-radius: 6px !important;
        gap: 3px !important;
    }

    .crm-preferences-btn svg { width: 12px !important; height: 12px !important; }

    /* Widgets + Reset Layout: even smaller */
    .crm-layout-actions {
        display: flex !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
    }

    .crm-widgets-btn,
    .crm-reset-layout-btn {
        padding: 4px 8px !important;
        font-size: 10px !important;
        min-height: 26px !important;
        border-radius: 5px !important;
        gap: 2px !important;
    }

    /* Status badge (Agreement Created) */
    .crm-status-badge {
        font-size: 10px !important;
        padding: 3px 7px !important;
    }

    /* ── Client identity block ── */
    .crm-client-header-content {
        gap: 8px !important;
    }

    .crm-client-name-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .crm-client-identity-left {
        min-width: 0 !important;
        flex: 1 !important;
    }

    /* Name: slightly smaller */
    .crm-client-name {
        font-size: 1.2rem !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }

    /* Agent badge: compact pill */
    .crm-client-agent-display {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 3px 8px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        margin-top: 4px !important;
    }

    .crm-client-agent-label { font-size: 10px !important; }
    .crm-client-agent-name  { font-size: 11px !important; font-weight: 600 !important; }
    .crm-client-agent-dot   { width: 6px !important; height: 6px !important; }

    /* ── Tags row: wrap tightly ── */
    .crm-client-tags-display.crm-client-tags-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin: 6px 0 !important;
    }

    /* Individual tag chips */
    .crm-client-tags-display .crm-tag-chip,
    .crm-client-tags-display [class*="tag"],
    .crm-client-tags-display span {
        font-size: 11px !important;
        padding: 3px 8px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
    }

    /* ── Details grid: single column ── */
    .crm-client-details-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* ── Header row (icons + contact + meta) ── */
    .crm-header-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    /* Contact icon buttons: row, equal width */
    .crm-header-actions-group {
        display: flex !important;
        gap: 8px !important;
    }

    .crm-header-action-btn {
        flex: 1 !important;
        min-height: 44px !important;
        border-radius: 10px !important;
        justify-content: center !important;
    }

    /* Contact text: show full width, truncated if needed */
    .crm-header-contact-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        min-width: 0 !important;
    }

    .crm-detail-text {
        font-size: 12px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: block !important;
        max-width: 100% !important;
    }

    /* Meta group: budget, dates, etc. */
    .crm-header-meta-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .crm-header-info-item {
        flex: 0 0 auto !important;
        font-size: 12px !important;
    }

    /* Edit button: keep it accessible but not overlapping */
    .crm-detail-edit-btn,
    #crmClientEditBtn,
    [id*="EditBtn"].crm-section-action {
        min-height: 34px !important;
        padding: 5px 10px !important;
        font-size: 11px !important;
    }
}


/* =============================================================================
   23. SCHEDULER — Fix view buttons cut off, pin close button as overlay
   ============================================================================= */

@media (max-width: 768px) {
    /* Make the scheduler modal position: relative so we can pin the close btn */
    .scheduler-modal {
        position: relative !important;
    }

    /* Pin close button as an absolute overlay in the top-right corner.
       This takes it OUT of the scrollable header so it never gets cut. */
    .scheduler-close-btn {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        left: auto !important;
        margin-left: 0 !important;
        z-index: 30 !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 50% !important;
        background: rgba(239, 68, 68, 0.90) !important;
        color: #ffffff !important;
        border: none !important;
        font-size: 22px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.40) !important;
        flex-shrink: 0 !important;
    }

    /* Right header: no longer needs to accommodate the close button.
       Add right padding so content doesn't hide under it. */
    .scheduler-right-header {
        padding-right: 52px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        gap: 4px !important;
        align-items: center !important;
    }
    .scheduler-right-header::-webkit-scrollbar { display: none; }

    /* Nav group: compact */
    .scheduler-nav-group {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        flex-shrink: 0 !important;
    }

    .scheduler-nav-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 16px !important;
        flex-shrink: 0 !important;
    }

    .scheduler-nav-label {
        font-size: 12px !important;
        white-space: nowrap !important;
        min-width: 70px !important;
        text-align: center !important;
    }

    .scheduler-nav-today {
        padding: 4px 8px !important;
        font-size: 11px !important;
        min-height: 28px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* View toggle: compact, never hidden */
    .scheduler-view-toggle {
        display: flex !important;
        gap: 2px !important;
        flex-shrink: 0 !important;
    }

    .scheduler-view-btn {
        padding: 4px 8px !important;
        font-size: 10px !important;
        min-height: 28px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border-radius: 6px !important;
    }

    /* Badge labels: hide text, keep just the count */
    .scheduler-overlay-count-badge,
    .scheduler-client-scope-badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
        flex-shrink: 0 !important;
    }

    /* Override the position:sticky we set before — now using absolute */
    /* (the .scheduler-close-btn rule above overrides this) */
}

/* =============================================================================
   24. INDIVIDUAL CLIENT HEADER — Compact contact row rework
   ============================================================================= */

@media (max-width: 768px) {
    /* ── Outer card ── */
    .crm-client-info-card.crm-client-header {
        padding: 12px 12px 10px !important;
    }

    /* ── Top control bar: all action buttons in one compact wrapping row ── */
    .crm-client-header-top {
        margin-bottom: 8px !important;
    }

    .crm-header-top-right {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        align-items: center !important;
    }

    .crm-preferences-btn {
        padding: 3px 8px !important;
        font-size: 11px !important;
        min-height: 26px !important;
        border-radius: 5px !important;
        gap: 3px !important;
    }

    .crm-preferences-btn svg {
        width: 11px !important;
        height: 11px !important;
    }

    .crm-layout-actions {
        display: flex !important;
        gap: 4px !important;
    }

    .crm-widgets-btn,
    .crm-reset-layout-btn {
        padding: 3px 7px !important;
        font-size: 10px !important;
        min-height: 24px !important;
        border-radius: 4px !important;
    }

    .crm-status-badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }

    /* ── Name + agent ── */
    .crm-client-name {
        font-size: 1.15rem !important;
        line-height: 1.2 !important;
    }

    .crm-client-agent-display {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 11px !important;
        margin-top: 2px !important;
    }

    /* ── Tags row ── */
    .crm-client-tags-display.crm-client-tags-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin: 6px 0 4px !important;
    }

    /* ── CONTACT ROW: redesign — small circle icons + text inline ── */
    .crm-client-details-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .crm-header-row {
        display: flex !important;
        flex-direction: row !important;    /* side-by-side: icons column | info column */
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* Icon column: stack 3 small circles vertically */
    .crm-header-actions-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        padding-top: 2px !important;
    }

    .crm-header-action-btn {
        width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        min-width: 34px !important;
        flex: 0 0 34px !important;         /* fixed size, not flex-1 */
        border-radius: 50% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .crm-header-icon svg {
        width: 15px !important;
        height: 15px !important;
    }

    /* Contact info column: email + phone stacked */
    .crm-header-contact-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        flex: 1 !important;
        min-width: 0 !important;
        padding-top: 3px !important;
    }

    .crm-detail-text {
        font-size: 12px !important;
        line-height: 1.3 !important;
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }

    /* Meta + Edit row: budget, date, edit button in one compact row */
    .crm-header-meta-group {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }

    .crm-header-info-item {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* Edit button: compact, pushed to right */
    .crm-detail-edit-btn,
    #crmClientEditBtn,
    .crm-client-edit-btn {
        margin-left: auto !important;
        min-height: 30px !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
        flex-shrink: 0 !important;
    }
}




/* =============================================================================
   25. TOOLS FAB — Center launcher + pill list popup
   ============================================================================= */

/* GRM (Quick Actions wheel): keep in DOM on mobile but reposition above nav.
   Hide the trigger button visually — it's launched via the Tools FAB. */
@media (max-width: 768px) {
    .grm-container {
        bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 14px) !important;
        left: 16px !important;
    }
    .grm-trigger {
        /* Keep element in layout so JS .click() works reliably.
           User opens GRM via Tools FAB — hide visually only. */
        visibility: hidden !important;
        pointer-events: none !important;
    }
    /* Messaging dock toggle: keep off-screen so .click() still works */
    .messaging-dock-toggle {
        position: fixed !important;
        left: -200px !important;
        pointer-events: none !important;
    }
    /* Messaging dock panel: full-width above nav bar */
    .messaging-dock-panel {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 8px) !important;
        border-radius: 18px !important;
    }
}

@media (max-width: 768px) {
    /* ── Center FAB button ───────────────────────────────────────────────────── */
    .mobile-nav-tools-fab {
        position: relative;
        flex: 0 0 64px;
        z-index: 1;
    }

    .mobile-nav-tools-fab::before { display: none !important; }

    .mobile-nav-tools-ring {
        position: absolute;
        top: -16px;
        left: 50%;
        transform: translateX(-50%);
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
        box-shadow:
            0 4px 18px rgba(99, 102, 241, 0.65),
            0 0 0 3px rgba(11, 18, 32, 0.97);
        display: block;
        z-index: 0;
        transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s;
    }

    body[data-theme="cloud"] .mobile-nav-tools-ring {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        box-shadow: 0 4px 18px rgba(99, 102, 241, 0.60), 0 0 0 3px rgba(255, 255, 255, 0.97);
    }

    body[data-theme="stellar"] .mobile-nav-tools-ring {
        background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
        box-shadow: 0 4px 18px rgba(99, 102, 241, 0.70), 0 0 0 3px rgba(7, 7, 15, 0.97);
    }

    .mobile-nav-tools-fab .mobile-bottom-nav-icon {
        position: relative;
        z-index: 1;
        margin-top: -10px;
    }

    .mobile-nav-tools-fab .mobile-bottom-nav-icon svg {
        stroke: none;
        fill: #ffffff;
        width: 20px;
        height: 20px;
    }

    .mobile-nav-tools-fab .mobile-bottom-nav-label {
        position: relative;
        z-index: 1;
        color: #94a3b8;
        margin-top: 14px;
    }

    .mobile-nav-tools-fab[aria-expanded="true"] .mobile-nav-tools-ring {
        transform: translateX(-50%) scale(1.12) rotate(20deg);
        box-shadow:
            0 6px 26px rgba(99, 102, 241, 0.80),
            0 0 0 3px rgba(11, 18, 32, 0.97);
    }

    body[data-theme="cloud"] .mobile-nav-tools-fab[aria-expanded="true"] .mobile-nav-tools-ring {
        box-shadow: 0 6px 26px rgba(99, 102, 241, 0.70), 0 0 0 3px rgba(255, 255, 255, 0.97);
    }

    /* ── Pill list popup ─────────────────────────────────────────────────────── */
    .mob-tools-popup {
        position: fixed;
        bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 18px);
        left: 50%;
        transform: translateX(-50%) translateY(6px);
        z-index: calc(var(--z-header, 2000) + 20);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 210px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.18s, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .mob-tools-popup.open {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }

    /* Each pill */
    /* Pill: matches the system's card/glass style */
    .mob-tools-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 18px 12px 14px;
        border-radius: 16px;
        border: 1px solid rgba(148, 163, 184, 0.14);
        background: var(--bg-card, rgba(22, 31, 50, 0.97));
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        color: var(--text-primary, #e2e8f0);
        cursor: pointer;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.01em;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40), 0 1px 0 rgba(255,255,255,0.05) inset;
        text-align: left;
        transform: translateY(10px);
        opacity: 0;
        transition:
            transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.18s,
            background 0.14s;
    }

    .mob-tools-item:active {
        background: var(--bg-muted, rgba(30, 41, 59, 0.97));
        transform: scale(0.97) translateY(0) !important;
    }

    /* Stagger: bottom pill (Quick Actions) appears first */
    .mob-tools-popup.open .mob-tools-item:nth-child(3) { transition-delay: 0.00s; }
    .mob-tools-popup.open .mob-tools-item:nth-child(2) { transition-delay: 0.06s; }
    .mob-tools-popup.open .mob-tools-item:nth-child(1) { transition-delay: 0.12s; }

    .mob-tools-popup.open .mob-tools-item {
        transform: translateY(0);
        opacity: 1;
    }

    body[data-theme="cloud"] .mob-tools-item {
        background: #ffffff;
        color: #1e1b4b;
        border-color: rgba(99, 102, 241, 0.16);
        box-shadow: 0 8px 32px rgba(45, 27, 105, 0.16), 0 1px 0 rgba(255,255,255,0.8) inset;
    }
    body[data-theme="cloud"] .mob-tools-item:active { background: #f4f5fb; }

    /* Icon square: muted accent tint matching system */
    .mob-tools-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .mob-tools-icon svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Per-tool: muted system tints (no bright gradients) */
    .mob-tools-item[data-mob-tool="coordyai"] .mob-tools-icon {
        background: rgba(139, 92, 246, 0.18);
    }
    .mob-tools-item[data-mob-tool="coordyai"] .mob-tools-icon svg { stroke: #a78bfa; }

    .mob-tools-item[data-mob-tool="messages"] .mob-tools-icon {
        background: rgba(99, 102, 241, 0.18);
    }
    .mob-tools-item[data-mob-tool="messages"] .mob-tools-icon svg { stroke: #818cf8; }

    .mob-tools-item[data-mob-tool="quickactions"] .mob-tools-icon {
        background: rgba(56, 189, 248, 0.18);
    }
    .mob-tools-item[data-mob-tool="quickactions"] .mob-tools-icon svg { stroke: #7dd3fc; }

    /* Cloud theme icon tints */
    body[data-theme="cloud"] .mob-tools-item[data-mob-tool="coordyai"] .mob-tools-icon {
        background: rgba(139, 92, 246, 0.12);
    }
    body[data-theme="cloud"] .mob-tools-item[data-mob-tool="messages"] .mob-tools-icon {
        background: rgba(99, 102, 241, 0.12);
    }
    body[data-theme="cloud"] .mob-tools-item[data-mob-tool="quickactions"] .mob-tools-icon {
        background: rgba(14, 165, 233, 0.12);
    }
    body[data-theme="cloud"] .mob-tools-icon svg { stroke: #6366f1; }

    .mob-tools-label { letter-spacing: 0.01em; }

    /* Backdrop */
    .mob-tools-backdrop {
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-header, 2000) + 19);
        display: none;
        background: rgba(0, 0, 0, 0.30);
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
    }

    .mob-tools-backdrop.active { display: block; }
}

/* Companion widget: hide sprite on mobile — open via Tools FAB > Coordy AI */
@media (max-width: 768px) {
    .companion-avatar,
    .companion-hint,
    .companion-return-msg,
    .companion-step-guide,
    .companion-progress {
        display: none !important;
    }

    .companion-container {
        right: 8px !important;
        bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 8px) !important;
        left: auto !important;
    }

    .companion-chat {
        width: calc(100vw - 32px) !important;
        max-width: none !important;
        right: 0 !important;
        border-radius: 18px !important;
    }
}
/* =============================================================================
   26. MESSAGING DOCK + COMPANION CHAT — Mobile rework
   ============================================================================= */

/* ── Messaging Dock ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Panel: fill screen above the nav bar, rounded top */
    .messaging-dock.is-open .messaging-dock-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Slide in from bottom */
    .messaging-dock .messaging-dock-panel {
        transform: translateY(100%) !important;
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }
    .messaging-dock.is-open .messaging-dock-panel {
        transform: translateY(0) !important;
    }

    /* Header: compact, with drag pill */
    .messaging-dock-header {
        padding: 10px 16px !important;
        position: relative !important;
    }

    .messaging-dock-header::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--border-soft);
    }

    /* Minimize button becomes full close on mobile */
    #messagingDockMinimize {
        font-size: 20px !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: var(--bg-muted, rgba(255,255,255,0.06)) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Body: single-column stack (conversations on top, thread below) */
    .messaging-dock-body {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr !important;
        overflow: hidden !important;
        flex: 1 !important;
        min-height: 0 !important;
    }

    /* Conversations sidebar: compact horizontal strip */
    .messaging-conversations {
        max-height: 190px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-soft) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .messaging-panel-title {
        font-size: 11px !important;
        padding: 8px 14px 4px !important;
    }

    .messaging-search-bar {
        padding: 0 10px 6px !important;
    }

    /* Conversation items: more compact */
    .messaging-conversation-item {
        padding: 8px 12px !important;
    }

    .messaging-conversation-name {
        font-size: 13px !important;
    }

    .messaging-conversation-preview {
        font-size: 11px !important;
    }

    /* Thread area: fills remaining height, scrollable */
    .messaging-thread {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        flex: 1 !important;
        overflow: hidden !important;
    }

    .messaging-thread-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px 12px !important;
    }

    /* Reply/input row: comfortable for thumbs */
    .messaging-reply-row,
    .messaging-input-row {
        padding: 8px 12px !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        flex-shrink: 0 !important;
    }

    .messaging-reply-input,
    .messaging-input-field {
        font-size: 16px !important;   /* prevent iOS zoom */
        min-height: 40px !important;
        border-radius: 20px !important;
    }

    /* Hide resize handles — no drag on mobile */
    .messaging-dock-resize-handle,
    .messaging-dock-resize-edge {
        display: none !important;
    }

    /* New conversation button */
    .messaging-create-trigger {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }

    /* Message bubbles: comfortable size */
    .message-bubble {
        font-size: 14px !important;
        max-width: 85% !important;
    }
}

/* ── Companion Chat (Coordy AI) ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Detach from the container anchor — treat as a fixed modal */
    .companion-chat {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
        top: 0 !important;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        height: auto !important;
        border-radius: 0 !important;
        z-index: 5100 !important;
        border: none !important;
        /* Slide up animation */
        animation: companionMobSlideUp 0.28s cubic-bezier(0.22, 1, 0.36, 1) both !important;
    }

    @keyframes companionMobSlideUp {
        from { transform: translateY(100%); opacity: 0.7; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    /* Header: drag pill + close button */
    .companion-chat-header {
        position: relative !important;
        padding-top: 18px !important;
    }

    .companion-chat-header::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: rgba(255,255,255,0.18);
    }

    /* Message area: scrollable */
    .companion-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 12px 14px !important;
    }

    /* Input: prevent iOS zoom */
    .companion-input {
        font-size: 16px !important;
        border-radius: 20px !important;
    }

    .companion-input-area {
        padding: 10px 14px !important;
        padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
        flex-shrink: 0 !important;
    }

    /* All chat views: ensure they fill height */
    .companion-view {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
    }

    /* Guide and define mode panels */
    .companion-chat.guide-active {
        height: auto !important;
        min-height: 0 !important;
    }

    /* Close button: make it clear */
    .companion-chat-close {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,0.10) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
    }

    /* Cloud theme */
    body[data-theme="cloud"] .companion-chat-header::before {
        background: rgba(99, 102, 241, 0.25);
    }
    body[data-theme="cloud"] .companion-chat-close {
        background: rgba(99, 102, 241, 0.10) !important;
        color: #1e1b4b !important;
    }
}

/* =============================================================================
   27. QUICK ACTIONS RADIAL OVERLAY — fans from center Tools FAB
   ============================================================================= */

.mob-quick-overlay { display: none; }

@media (max-width: 768px) {
    .mob-quick-overlay {
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-header, 2000) + 25);
    }

    .mob-quick-overlay.open { display: block; }

    /* Dim backdrop */
    .mob-quick-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.50);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    /*
     * Ring anchor: zero-size point at the center of the Tools FAB ring.
     * FAB ring center = nav bar top (58px + safe-area from bottom)
     *                   + FAB ring overhang (16px) = approx 26px above nav bar top.
     * Segments are absolute-positioned relative to this point.
     */
    .mob-quick-ring {
        position: absolute;
        bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 26px);
        left: 50%;
        width: 0;
        height: 0;
    }

    /* Each action button — circle with icon + label */
    .mob-quick-btn {
        position: absolute;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        border: none;
        background: rgba(var(--qc), 0.88);
        box-shadow:
            0 3px 14px rgba(var(--qc), 0.45),
            0 1px 6px rgba(0, 0, 0, 0.30);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        cursor: pointer;
        padding: 0;
        /* Anchor at ring center, offset to button center, collapsed */
        transform: translate(calc(var(--qx) - 27px), calc(var(--qy) - 27px)) scale(0);
        opacity: 0;
        transition:
            transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.20s;
    }

    .mob-quick-btn:active {
        filter: brightness(1.15);
    }

    /* Open: expand into arc positions */
    .mob-quick-overlay.open .mob-quick-btn {
        transform: translate(calc(var(--qx) - 27px), calc(var(--qy) - 27px)) scale(1);
        opacity: 1;
    }

    /* Stagger: center button (Docs) first, outer buttons last */
    .mob-quick-overlay.open .mob-quick-btn:nth-child(3) { transition-delay: 0.00s; }
    .mob-quick-overlay.open .mob-quick-btn:nth-child(2),
    .mob-quick-overlay.open .mob-quick-btn:nth-child(4) { transition-delay: 0.06s; }
    .mob-quick-overlay.open .mob-quick-btn:nth-child(1),
    .mob-quick-overlay.open .mob-quick-btn:nth-child(5) { transition-delay: 0.12s; }

    .mob-quick-btn svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: rgba(255, 255, 255, 0.95);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mob-quick-btn span {
        font-size: 9px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.90);
        letter-spacing: 0.03em;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
        white-space: nowrap;
    }
}

/* =============================================================================
   28. COORDY CHAT half-screen + Sprite pill icon + Messages filter collapse
   ============================================================================= */

@media (max-width: 768px) {
    /* ── Coordy AI chat: half-screen bottom sheet (not full screen) ── */
    .companion-chat {
        top: 44vh !important;           /* ~56% of screen height */
        border-radius: 20px 20px 0 0 !important;
    }

    /* Drag pill */
    .companion-chat-header::before {
        background: rgba(255, 255, 255, 0.20) !important;
    }

    /* ── Coordy sprite in Tools popup pill ── */
    .mob-tools-icon--sprite {
        background: none !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        padding: 2px !important;
    }

    .mob-tools-sprite {
        width: 32px !important;
        height: 32px !important;
        object-fit: contain !important;
        display: block !important;
        border-radius: 8px !important;
    }

    /* ── Messages: collapse search/filter — show conversation list maximised ── */

    /* Hide search bar and filter toggles by default */
    .messaging-conversations .messaging-search-bar,
    .messaging-conversations .messaging-archive-filter {
        display: none !important;
    }

    /* Show them when filter panel is open */
    .messaging-conversations.mob-filters-open .messaging-search-bar,
    .messaging-conversations.mob-filters-open .messaging-archive-filter {
        display: flex !important;
    }

    /* Compact header row to fit filter toggle button */
    .messaging-dock-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Filter toggle button (injected by JS) */
    .mob-msg-filter-btn {
        background: var(--bg-muted, rgba(255,255,255,0.07)) !important;
        border: 1px solid var(--border-soft) !important;
        border-radius: 8px !important;
        color: var(--text-muted) !important;
        cursor: pointer !important;
        padding: 5px 9px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        min-height: 30px !important;
        transition: background 0.14s, color 0.14s !important;
    }

    .mob-msg-filter-btn.active {
        background: var(--accent-primary, #6366f1) !important;
        color: #ffffff !important;
        border-color: var(--accent-primary, #6366f1) !important;
    }

    /* Give more room to conversation list since filters are hidden */
    .messaging-conversations {
        max-height: 240px !important;
    }

    .messaging-conversations.mob-filters-open {
        max-height: 340px !important;
    }
}

/* =============================================================================
   29. MESSAGES CONVERSATIONS DRAWER + CRM TITLE HIDE
   ============================================================================= */

/* ── Hide page titles on mobile (nav bar shows context) ── */
@media (max-width: 768px) {
    .page-title { display: none !important; }
}

/* ── Conversations slide-out drawer ── */
@media (max-width: 768px) {
    /* Dock body: relative container for absolute-positioned drawer */
    .messaging-dock-body {
        position: relative !important;
        overflow: hidden !important;
    }

    /* Conversations: hidden off-screen left by default */
    .messaging-conversations {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 82% !important;
        max-height: none !important;
        max-width: 320px !important;
        z-index: 15 !important;
        border-right: 1px solid var(--border-soft) !important;
        border-bottom: none !important;
        background: var(--bg-card) !important;
        transform: translateX(-100%) !important;
        transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .messaging-conversations.mob-conv-open {
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35) !important;
    }

    /* Backdrop behind open drawer */
    .mob-conv-backdrop {
        position: absolute !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.40) !important;
        z-index: 14 !important;
        display: none !important;
    }

    .mob-conv-backdrop.active { display: block !important; }

    /* Message thread fills full body width */
    .messaging-thread {
        width: 100% !important;
        flex: 1 !important;
        min-height: 0 !important;
    }

    /* Hamburger button in dock header */
    .mob-conv-ham-btn {
        background: var(--bg-muted, rgba(255,255,255,0.07)) !important;
        border: 1px solid var(--border-soft) !important;
        border-radius: 8px !important;
        color: var(--text-primary) !important;
        cursor: pointer !important;
        padding: 6px 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 32px !important;
        min-width: 36px !important;
        flex-shrink: 0 !important;
        transition: background 0.14s, color 0.14s !important;
        margin-right: 6px !important;
    }

    .mob-conv-ham-btn.active {
        background: var(--accent-primary, #6366f1) !important;
        border-color: var(--accent-primary, #6366f1) !important;
        color: #ffffff !important;
    }

    .mob-conv-ham-btn svg { pointer-events: none; }

    /* Also hide the old separate Filters button alongside — now redundant */
    .mob-msg-filter-btn { display: none !important; }

    /* Search + filters inside the drawer */
    .messaging-conversations .messaging-search-bar,
    .messaging-conversations .messaging-archive-filter {
        display: flex !important;   /* always show inside the drawer */
    }
}

/* =============================================================================
   30. SETTINGS MODAL — Tab bar overflow + body height fix
   ============================================================================= */

@media (max-width: 768px) {
    /* Modal: full width, no rounded corners, sits flush */
    .settings-modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* Header: slightly more compact */
    .settings-modal-header {
        padding: 14px 18px !important;
    }

    .settings-modal-header h2 {
        font-size: 18px !important;
    }

    /* Tab bar: horizontal scroll so all 4 tabs fit */
    .settings-tabs {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .settings-tabs::-webkit-scrollbar { display: none; }

    /* Each tab: shrink padding, don't squish text */
    .settings-tab {
        flex: 0 0 auto !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        min-width: 0 !important;
    }

    /* Body: enough height to show content + scroll */
    .settings-modal-body {
        max-height: calc(100vh - 130px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Tab content: tighter padding on small screens */
    .settings-tab-content {
        padding: 16px !important;
    }

    /* Form groups: full width */
    .settings-form-group {
        margin-bottom: 14px !important;
    }

    .settings-form-group input,
    .settings-form-group select,
    .settings-form-group textarea {
        font-size: 16px !important;  /* prevent iOS zoom */
    }
}

/* =============================================================================
   31. INDIVIDUAL CLIENT CRM HEADER — Full mobile rework
   On mobile: name + edit btn on top, agent pill, 3 round action buttons,
   contact text, compact meta. Hide less-critical toolbar buttons.
   ============================================================================= */

@media (max-width: 768px) {

    /* ── Outer card ── */
    .crm-client-info-card.crm-client-header {
        padding: 14px 14px 12px !important;
        border-radius: 14px !important;
        position: relative !important;
    }

    /* ── Hide the toolbar buttons (Preferences, Widgets, Reset) — too many on mobile ── */
    .crm-preferences-btn,
    .crm-widgets-btn,
    .crm-reset-layout-btn {
        display: none !important;
    }

    /* ── Top bar: just the status badge ── */
    .crm-client-header-top {
        position: static !important;
        margin-bottom: 6px !important;
    }

    .crm-header-top-right {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }

    .crm-status-badge {
        font-size: 10px !important;
        padding: 2px 8px !important;
    }

    /* ── Name row: name + edit button side by side ── */
    .crm-client-name-row {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding-right: 0 !important;  /* remove the 240px desktop offset */
        flex-wrap: nowrap !important;
        margin-bottom: 6px !important;
    }

    .crm-client-identity-left {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .crm-client-name {
        font-size: 1.15rem !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
        margin: 0 !important;
    }

    /* Edit button: top-right of the name row */
    .crm-detail-edit-btn,
    #crmClientEditBtn,
    .crm-client-edit-btn {
        flex-shrink: 0 !important;
        align-self: flex-start !important;
        padding: 5px 12px !important;
        font-size: 12px !important;
        min-height: 28px !important;
        border-radius: 8px !important;
        margin-left: 0 !important;
    }

    /* ── Agent pill: compact ── */
    .crm-client-agent-display {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 3px 10px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        margin-top: 5px !important;
    }

    .crm-client-agent-label { font-size: 10px !important; }
    .crm-client-agent-name  { font-size: 11px !important; font-weight: 600 !important; }
    .crm-client-agent-dot   { width: 5px !important; height: 5px !important; }

    /* ── Tags: tight wrap ── */
    .crm-client-tags-display.crm-client-tags-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin: 6px 0 2px !important;
    }

    .crm-client-tags-display .crm-tag-chip,
    .crm-client-tags-display [class*="tag"],
    .crm-client-tags-display span {
        font-size: 10px !important;
        padding: 2px 7px !important;
        white-space: nowrap !important;
    }

    /* ── Details section (action btns + contact text + meta) ── */
    .crm-client-details-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }

    /* Row becomes: [3 round buttons]  [contact text column] */
    .crm-header-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
    }

    /* Action buttons: vertical stack of 3 small circles */
    .crm-header-actions-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 7px !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        margin-right: 0 !important;
        padding-top: 2px !important;
    }

    .crm-header-action-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        flex: 0 0 36px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .crm-header-icon svg,
    .crm-header-action-btn svg {
        width: 15px !important;
        height: 15px !important;
    }

    /* Contact text: full remaining width, items stacked */
    .crm-header-contact-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        flex: 1 !important;
        min-width: 0 !important;
        padding-right: 0 !important;
        border-right: none !important;
        padding-top: 2px !important;
    }

    .crm-detail-text {
        font-size: 12px !important;
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        line-height: 1.4 !important;
    }

    /* Meta row: budget, activity date — compact horizontal wrap */
    .crm-header-meta-group {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: 2px !important;
    }

    .crm-header-info-item {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        opacity: 0.85 !important;
    }
}

/* =============================================================================
   32. COORDINATOR PAGE — Full mobile rework
   ============================================================================= */

@media (max-width: 768px) {

    /* ── Header panel ── */
    .coordinator-header-panel {
        padding: 12px 12px 10px !important;
        border-radius: 12px !important;
        margin-bottom: 14px !important;
    }

    /* Top row: title left, action btns right */
    .coordinator-header-top {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        margin-bottom: 10px !important;
    }

    .coordinator-header-title {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .coordinator-header-title h1,
    .coordinator-header-title .page-title {
        /* page-title already hidden by section 29, but keep as fallback */
        display: none !important;
    }

    .coordinator-subtitle {
        font-size: 11px !important;
        opacity: 0.7 !important;
        margin: 0 0 4px !important;
    }

    /* View switch (Agent/Broker): compact pills */
    .coordinator-view-switch {
        display: flex !important;
        gap: 3px !important;
        flex-wrap: nowrap !important;
        margin-top: 4px !important;
    }

    .coordinator-view-btn {
        padding: 4px 10px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        min-height: 0 !important;
        white-space: nowrap !important;
    }

    /* Action buttons: horizontal row */
    .coordinator-header-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: center !important;
        width: 100% !important;
    }

    .coordinator-start-btn-corner {
        padding: 6px 10px !important;
        font-size: 11px !important;
        min-height: 30px !important;
        white-space: nowrap !important;
        border-radius: 7px !important;
        flex: 0 0 auto !important;
    }

    /* ── KPI strip: horizontal scroll ── */
    .coordinator-kpi-strip {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 2px 0 6px !important;
        margin-bottom: 6px !important;
    }

    .coordinator-kpi-strip::-webkit-scrollbar { display: none; }

    .coordinator-kpi-tile {
        flex: 0 0 auto !important;
        min-width: 70px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        text-align: center !important;
    }

    .coordinator-kpi-value {
        font-size: 1.3rem !important;
        line-height: 1 !important;
    }

    .coordinator-kpi-label {
        font-size: 9px !important;
        margin-top: 3px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* ── Toolbar: search full width + sort inline ── */
    .coordinator-header-toolbar {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .coordinator-toolbar {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    .coordinator-search {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .coordinator-search input {
        width: 100% !important;
        font-size: 16px !important;
        padding: 8px 12px !important;
        border-radius: 9px !important;
        box-sizing: border-box !important;
    }

    .coordinator-tool-btn {
        padding: 7px 12px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* ── Transaction cards: single column, compact ── */
    .coordinator-folders-container {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .coordinator-tx-card {
        padding: 14px 12px 12px !important;
        border-radius: 12px !important;
    }

    /* Card header row: title + status */
    .coordinator-tx-card-header,
    .coordinator-folder-header {
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .coordinator-folder-title,
    .coordinator-tx-card-title {
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }

    .coordinator-folder-subtitle,
    .coordinator-tx-card-subtitle {
        font-size: 11px !important;
    }

    .coordinator-tx-status,
    .coordinator-folder-status {
        font-size: 10px !important;
        padding: 2px 7px !important;
    }

    /* Card meta row */
    .coordinator-folder-meta,
    .coordinator-tx-card-meta {
        font-size: 11px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-top: 6px !important;
    }

    /* Card participants avatars */
    .coordinator-folder-participants,
    .coordinator-tx-participants {
        margin-top: 8px !important;
    }

    /* ── Empty state ── */
    .coordinator-empty-state {
        padding: 30px 20px !important;
        border-radius: 12px !important;
        text-align: center !important;
    }

    .coordinator-empty-title { font-size: 16px !important; }
    .coordinator-empty-message { font-size: 13px !important; }

    .coordinator-start-btn-center {
        padding: 10px 20px !important;
        font-size: 13px !important;
        min-height: 42px !important;
        margin-top: 12px !important;
    }

    /* ── Transaction workspace modal: full screen ── */
    .tx-workspace-modal,
    #txWorkspaceModal .modal,
    .coordinator-workspace-modal .modal {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* Workspace tab bar: scrollable */
    .tx-tab-bar,
    .workspace-tab-bar,
    .coordinator-workspace-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
    }

    .tx-tab-bar::-webkit-scrollbar,
    .workspace-tab-bar::-webkit-scrollbar,
    .coordinator-workspace-tabs::-webkit-scrollbar { display: none; }

    .tx-tab,
    .workspace-tab {
        flex-shrink: 0 !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
        white-space: nowrap !important;
    }

    /* Dashboard panel 3-col grid: single column */
    .tx-dashboard-grid,
    .workspace-dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* =============================================================================
   33. QUICK FIXES — Coordinator button width + Client action buttons direction
   ============================================================================= */

@media (max-width: 768px) {

    /* ── Coordinator: header actions not full-width — keep buttons compact ── */
    .coordinator-header-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        align-items: center !important;
    }

    /* Override the flex: 1 1 140px that makes buttons stretch */
    .coordinator-header-actions .coordinator-start-btn,
    .coordinator-header-actions .coordinator-start-btn-corner {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    /* "Documents" button: icon only or abbreviated on very small screens */
    #coordinatorDocumentsBtn {
        /* Keep "Documents" text — it's short enough */
    }

    /* "+ New Transaction": compact pill, accent color */
    #coordinatorStartBtnCorner {
        padding: 6px 12px !important;
        font-size: 12px !important;
        min-height: 32px !important;
        white-space: nowrap !important;
        border-radius: 8px !important;
    }

    /* ── Individual client header: action buttons horizontal row ── */
    .crm-header-actions-group {
        flex-direction: row !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        margin-right: 0 !important;
        padding-top: 0 !important;
    }

    /* And since buttons are now horizontal, the header row should stack
       the buttons row above the contact text */
    .crm-header-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* =============================================================================
   34. COORDINATOR — Transaction Workspace (full mobile rework)
   ============================================================================= */

@media (max-width: 768px) {

    /* ── Workspace view: fill the viewport, no card rounding ── */
    #coordinatorWorkspaceView {
        border-radius: 0 !important;
        min-height: 100% !important;
    }

    /* ── Header: tighter, stack breadcrumb above actions ── */
    .tx-ws-header {
        padding: 10px 14px 10px !important;
        gap: 6px !important;
    }

    .tx-ws-header-top,
    .tx-ws-header-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .tx-ws-header-left {
        min-width: 0 !important;
        flex: 1 !important;
    }

    .tx-ws-title,
    .tx-ws-header-title {
        font-size: 14px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 180px !important;
    }

    .tx-ws-header-right,
    .tx-ws-header-actions {
        gap: 6px !important;
        flex-shrink: 0 !important;
    }

    .tx-ws-header-btn,
    .tx-ws-back-btn,
    .tx-ws-close-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
        min-height: 34px !important;
        border-radius: 8px !important;
    }

    /* ── Ribbon (lifecycle steps): scrollable, compact ── */
    .tx-ws-ribbon {
        padding: 0 12px !important;
        height: 38px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        flex-shrink: 0 !important;
    }

    .tx-ws-ribbon::-webkit-scrollbar { display: none; }

    .tx-ws-ribbon-step {
        font-size: 10px !important;
        padding: 0 10px !important;
        gap: 5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .tx-ws-ribbon-step-num {
        width: 16px !important;
        height: 16px !important;
        font-size: 9px !important;
    }

    .tx-ws-ribbon-connector { min-width: 16px !important; }

    /* ── Ribbon CTA bar (Finalize / Open Send etc.) ── */
    .tx-ws-ribbon-cta-bar {
        padding: 6px 12px !important;
        font-size: 11px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .tx-ws-ribbon-cta-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
        min-height: 30px !important;
    }

    /* ── Tab bar: already scrollable, just tighten tabs ── */
    .tx-ws-tab-bar {
        padding: 0 10px !important;
        min-height: 40px !important;
    }

    .tx-ws-tab {
        padding: 0 12px !important;
        font-size: 12px !important;
        height: 40px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* ── Panel: reduce padding, ensure scroll ── */
    .tx-ws-panel {
        padding: 14px !important;
    }

    /* ── Dashboard: 3-col → 1-col, compact cards ── */
    .tx-dash-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 14px !important;
    }

    .tx-dash-card {
        padding: 14px !important;
    }

    .tx-dash-card--overview {
        grid-column: 1 / -1 !important;
    }

    .tx-dash-stat-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .tx-dash-stat-item {
        flex: 1 1 40% !important;
        min-width: 0 !important;
    }

    /* Team cards in dashboard: single column */
    .tx-dash-team-grid,
    .tx-dash-team-list {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Progress tracker / lifecycle in dashboard */
    .tx-dash-progress-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

/* =============================================================================
   35. COORDINATOR — Workflow Panel (Prep / Sign / Send steps)
   ============================================================================= */

@media (max-width: 768px) {

    /* ── wf-body: 3-column desktop grid → single-column stack ── */
    .wf-body,
    .wf-body--fill,
    .wf-body--sign,
    .wf-body--send {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
    }

    /* ── Left rail (document list sidebar): full width, capped height ── */
    .wf-left-rail {
        width: 100% !important;
        min-width: 0 !important;
        max-height: 400px !important;
        overflow-y: auto !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    }

    .wf-rail-header {
        padding: 10px 14px !important;
        font-size: 12px !important;
    }

    /* Document items in the rail */
    .wf-doc-item {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .wf-doc-item-name {
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .wf-rail-action {
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-height: 38px !important;
    }

    .wf-rail-action--simplesign-hero {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }

    /* ── Center viewer panel: full width ── */
    .wf-center {
        width: 100% !important;
        flex: 1 !important;
        min-height: 200px !important;
    }

    .wf-viewer-body {
        padding: 10px !important;
    }

    /* ── Right panel / step sidebar: full width, collapsible feel ── */
    .wf-right-panel,
    .wf-step-panel {
        width: 100% !important;
        border-left: none !important;
        border-top: 1px solid rgba(255,255,255,0.07) !important;
        max-height: 300px !important;
        overflow-y: auto !important;
    }

    /* Step bar (Fill form wizard steps) */
    .wf-step-bar {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        padding: 0 10px !important;
    }

    .wf-step-bar::-webkit-scrollbar { display: none; }

    .wf-step {
        flex-shrink: 0 !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
        gap: 4px !important;
    }

    .wf-step-label {
        font-size: 10px !important;
        display: none !important; /* Hide labels on very small — show numbers only */
    }

    .wf-step-num {
        width: 20px !important;
        height: 20px !important;
        font-size: 10px !important;
    }

    .wf-step-connector {
        min-width: 14px !important;
        width: 14px !important;
    }

    /* Send step: packet list full-width */
    .wf-send-packet-list {
        padding: 10px !important;
    }
}

/* =============================================================================
   36. COORDINATOR — Inner Panels (Tasks, Dates, Notes, Activity, Checklist)
   ============================================================================= */

@media (max-width: 768px) {

    /* ── Tasks panel ── */
    .tx-ws-tasks-header {
        padding: 10px 0 8px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .tx-ws-tasks-header-title {
        font-size: 14px !important;
    }

    .tx-ws-tasks-add-btn,
    .tx-ws-add-task-btn {
        font-size: 12px !important;
        padding: 6px 12px !important;
        min-height: 34px !important;
    }

    .tx-ws-task-row {
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .tx-ws-task-check {
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0 !important;
    }

    .tx-ws-task-title {
        font-size: 13px !important;
    }

    .tx-ws-task-due {
        font-size: 11px !important;
    }

    /* ── Dates panel: 2-col grid → 1-col ── */
    .tx-ws-dates-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .tx-ws-date-card {
        padding: 12px 14px !important;
    }

    .tx-ws-date-label {
        font-size: 11px !important;
    }

    .tx-ws-date-value {
        font-size: 15px !important;
    }

    /* ── Notes panel ── */
    .tx-ws-note-composer {
        gap: 8px !important;
        padding: 0 !important;
    }

    .tx-ws-note-input {
        font-size: 14px !important;
        min-height: 80px !important;
        padding: 10px 12px !important;
    }

    .tx-ws-note-submit {
        align-self: stretch !important;
        min-height: 40px !important;
        font-size: 13px !important;
    }

    .tx-ws-note-item {
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    /* ── Activity / History panel ── */
    .tx-ws-activity-feed {
        gap: 0 !important;
    }

    .tx-ws-activity-item {
        padding: 10px 0 !important;
        gap: 10px !important;
    }

    .tx-ws-activity-desc {
        font-size: 12px !important;
    }

    .tx-ws-activity-meta {
        font-size: 10px !important;
    }

    /* ── Checklist panel ── */
    .chk-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 12px 12px !important;
    }

    .chk-due-col {
        border-left: none !important;
        border-right: none !important;
        padding: 0 !important;
    }

    .chk-name {
        font-size: 13px !important;
    }

    /* Checklist actions column: horizontal row */
    .chk-actions-col {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    /* Checklist filter pills */
    .chk-filter-strip {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        padding-bottom: 2px !important;
    }

    .chk-filter-strip::-webkit-scrollbar { display: none; }

    /* Checklist header: Apply Template button */
    .chk-header-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .chk-header-title {
        font-size: 15px !important;
    }

    /* Dispatch signings list: compact rows */
    .tx-ws-dispatch-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 10px 12px !important;
    }

    .tx-ws-dispatch-name {
        font-size: 13px !important;
    }

    .tx-ws-dispatch-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .tx-ws-dispatch-action-btn {
        font-size: 11px !important;
        padding: 5px 10px !important;
        min-height: 30px !important;
    }
}

/* =============================================================================
   37. COORDINATOR — Prep Studio mobile gate
   ============================================================================= */

@media (max-width: 768px) {

    /* Prep Studio overlay: show a "desktop only" message instead of the editor */
    #prepStudioModal.active {
        overflow: hidden !important;
    }

    /* Hide the complex 3-panel editor body */
    #prepStudioModal.active .prep-studio-body {
        display: none !important;
    }

    /* Show a full-screen "use desktop" message */
    #prepStudioModal.active::after {
        content: "Field Prep requires a larger screen.\AOpen this transaction on a desktop or tablet to prepare and place form fields.";
        white-space: pre;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        inset: 0;
        padding: 30px 24px;
        font-size: 15px;
        line-height: 1.6;
        color: rgba(255,255,255,0.75);
        background: #1a1a2e;
        z-index: 10;
    }

    /* Keep topbar visible so user can close */
    #prepStudioModal.active .prep-studio-topbar {
        position: relative;
        z-index: 20 !important;
    }

    /* Loading state also simplified */
    .prep-studio-loading {
        padding: 40px 20px !important;
    }
}

/* =============================================================================
   38. COORDINATOR — Dispatch Builder + Signing modals (full-screen)
   ============================================================================= */

@media (max-width: 768px) {

    /* ── Dispatch builder: full screen ── */
    .dispatch-builder-modal {
        max-width: 100vw !important;
        width: 100vw !important;
        max-height: 100vh !important;
        height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .dispatch-builder-step-bar {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        padding: 0 10px !important;
        gap: 0 !important;
    }

    .dispatch-builder-step-bar::-webkit-scrollbar { display: none; }

    .dispatch-builder-body {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 14px !important;
    }

    .dispatch-builder-footer {
        padding: 10px 14px !important;
        gap: 8px !important;
    }

    /* ── SimpleSign packet modal: full screen ── */
    .ss-modal-overlay {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .ss-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 92vh !important;
        border-radius: 18px 18px 0 0 !important;
        overflow-y: auto !important;
    }

    .ss-modal-header {
        padding: 14px 16px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        backdrop-filter: blur(8px) !important;
    }

    .ss-modal-body {
        padding: 0 16px 16px !important;
    }

    .ss-packet-actions {
        padding: 12px 16px !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .ss-packet-btn--primary {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 14px !important;
    }

    .ss-packet-secondary-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .ss-packet-secondary-actions .ss-packet-btn {
        flex: 1 1 auto !important;
        min-height: 38px !important;
        font-size: 12px !important;
    }

    /* ── Signing detail modal: full screen slide-up ── */
    .ss-detail-modal-overlay {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .ss-detail-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 96vh !important;
        border-radius: 18px 18px 0 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .ss-detail-modal-header {
        padding: 12px 16px !important;
        flex-shrink: 0 !important;
    }

    .ss-detail-modal-body {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 14px 16px !important;
    }

    .ss-detail-modal-footer {
        padding: 10px 16px !important;
        flex-shrink: 0 !important;
    }

    /* ── Transaction wizard: full screen ── */
    .tx-wizard-modal,
    .tx-wizard-modal--full {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    .tx-wizard-footer {
        padding: 10px 14px !important;
        gap: 8px !important;
    }

    .tx-wizard-footer .btn {
        flex: 1 !important;
        min-height: 44px !important;
    }
}

/* =============================================================================
   39. ADMIN PAGE — Stats, tables, broker ops, content layout
   ============================================================================= */

@media (max-width: 768px) {

    /* ── Container: full width, tight padding ── */
    .admin-container {
        padding: 0 10px !important;
    }

    /* ── Header: stack title + actions ── */
    .admin-header {
        padding: 16px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
    }

    .admin-header-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .admin-header-actions .btn,
    .admin-header-actions button {
        flex: 1 1 auto !important;
        min-height: 40px !important;
        font-size: 13px !important;
    }

    .admin-header-title {
        font-size: 1.4rem !important;
    }

    .admin-header-subtitle {
        font-size: 12px !important;
    }

    /* ── Stats grid: 1 column on narrow ── */
    .admin-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    .admin-stat-card {
        padding: 14px 12px !important;
        border-radius: 10px !important;
    }

    .admin-stat-value {
        font-size: 1.4rem !important;
    }

    .admin-stat-label {
        font-size: 11px !important;
    }

    /* ── Content layout: already 1-col at 1200px, ensure tight padding ── */
    .admin-content-layout {
        gap: 14px !important;
        margin-bottom: 14px !important;
    }

    /* ── Admin sections: compact ── */
    .admin-section {
        padding: 14px !important;
        border-radius: 10px !important;
        margin-bottom: 14px !important;
    }

    .admin-section-title {
        font-size: 14px !important;
    }

    .admin-section-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .admin-section-actions-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* ── Agent filter pills: horizontal scroll ── */
    .admin-agent-filters {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
        margin-bottom: 10px !important;
    }

    .admin-agent-filters::-webkit-scrollbar { display: none; }

    .admin-agent-filter {
        flex-shrink: 0 !important;
        font-size: 11px !important;
        padding: 5px 10px !important;
        min-height: 30px !important;
    }

    .admin-agent-filter-controls {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* ── Agent search: full width ── */
    .admin-agent-search,
    .broker-agent-search-wrapper {
        width: 100% !important;
    }

    .admin-agent-search input,
    .broker-agent-search-input {
        width: 100% !important;
        font-size: 16px !important;
    }

    /* ── Broker ops section: compact ── */
    .broker-ops-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .broker-ops-actions .btn,
    .broker-ops-actions button {
        flex: 1 1 auto !important;
        min-height: 40px !important;
        font-size: 12px !important;
    }

    /* ── Broker content layout: stack ── */
    .broker-content-layout {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* ── KPI tiles in admin (broker KPI strips): horizontal scroll ── */
    .broker-kpi-strip,
    .broker-command-kpi-strip,
    .admin-kpi-row {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        gap: 8px !important;
        padding-bottom: 4px !important;
    }

    .broker-kpi-strip::-webkit-scrollbar,
    .broker-command-kpi-strip::-webkit-scrollbar,
    .admin-kpi-row::-webkit-scrollbar { display: none; }

    .broker-kpi-tile,
    .broker-command-kpi-tile {
        flex-shrink: 0 !important;
        min-width: 80px !important;
        padding: 8px 10px !important;
    }
}

/* =============================================================================
   40. ADMIN — Agent / Super Admin tables (horizontal scroll wrapper)
   ============================================================================= */

@media (max-width: 768px) {

    /* Wrap any data table in a horizontal scroll zone */
    .super-admin-table,
    .admin-agents-table,
    .admin-performance-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .super-admin-table th,
    .super-admin-table td {
        white-space: nowrap !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    /* Wrap table containers in overflow-x: auto */
    .sa-section-scroll-table,
    .super-admin-table-wrap,
    .admin-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 8px !important;
    }

    /* Super admin tab bar: scrollable pills ── */
    .super-admin-tab-bar,
    .super-admin-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
    }

    .super-admin-tab-bar::-webkit-scrollbar,
    .super-admin-tabs::-webkit-scrollbar { display: none; }

    .super-admin-tab {
        flex-shrink: 0 !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
        white-space: nowrap !important;
    }

    /* Super admin stat cards: 2-col grid */
    .super-admin-kpis {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* Super admin page header */
    #superAdminPage .admin-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* Admin modals: full screen ── */
    #adminPage .modal,
    #adminPage .modal-content,
    #adminPage .modal-overlay .modal {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 96vh !important;
        border-radius: 16px 16px 0 0 !important;
        margin: 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
    }

    .admin-modal-overlay,
    .broker-modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    /* Performance charts: ensure they don't overflow */
    .admin-chart-container,
    .broker-chart-container,
    .ca-chart-wrap {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Final cloud contrast overrides live here because mobile.css loads last. */
body[data-theme="cloud"] .listings-header,
body[data-theme="cloud"] .house-listings .listings-header {
    background: linear-gradient(135deg, #452b9d 0%, #5734e5 100%) !important;
    color: #ffffff !important;
}

body[data-theme="cloud"] .listings-header h3,
body[data-theme="cloud"] .house-listings .listings-header h3,
body[data-theme="cloud"] .listings-header *:not(button),
body[data-theme="cloud"] .house-listings .listings-header *:not(button),
body[data-theme="cloud"] .house-details-ribbon,
body[data-theme="cloud"] .house-details-ribbon *,
body[data-theme="cloud"] .house-details-ribbon .ribbon-detail,
body[data-theme="cloud"] .house-details-ribbon .ribbon-detail span,
body[data-theme="cloud"] .house-details-ribbon .ribbon-icon {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body[data-theme="cloud"] .scheduler-operations-header,
body[data-theme="cloud"] .scheduler-operations-header *,
body[data-theme="cloud"] .scheduler-operations-title,
body[data-theme="cloud"] .scheduler-operations-subtitle,
body[data-theme="cloud"] #schedulerOperationsSubtitle,
body[data-theme="cloud"] .scheduler-ops-week-nav-btn,
body[data-theme="cloud"] .scheduler-ops-week-day-header,
body[data-theme="cloud"] .scheduler-ops-week-day-header *,
body[data-theme="cloud"] .scheduler-ops-week-day-badge,
body[data-theme="cloud"] .scheduler-ops-row-meta,
body[data-theme="cloud"] .scheduler-ops-row-meta *,
body[data-theme="cloud"] .scheduler-ops-user-name,
body[data-theme="cloud"] .scheduler-ops-user-chip,
body[data-theme="cloud"] .scheduler-ops-event,
body[data-theme="cloud"] .scheduler-ops-event *,
body[data-theme="cloud"] .scheduler-ops-event-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}