/* ============================================================
   CRMAnglor — Mobile Optimization Pack (2026)
   ------------------------------------------------------------
   Targets the 9 high-traffic flows requested by the product owner:
     1. Authentication (Login + Register)
     2. Plans & Subscriptions
     3. Main Dashboard
     4. End-customer / Client portal screens
     5. Companies, Offices, Vehicles
     6. Documents & Departments
     7. Employees & related parties (Executors, Partners)
     8. Requests (Create + Index + Dashboard)
     9. CRM (Dashboard, Leads, Deals, Pipeline, Reports)

   Design rules applied:
     - Project-inherited tokens only (no new HEX, no OKLCH).
       Source: wwwroot/css/base.css + wwwroot/css/crm-styles.css
     - No hardcoded brand names or logo paths — values are
       injected at runtime by BrandingService.
     - 4pt spacing scale via existing --space-* tokens
     - No side-stripe borders (>1px), no gradient text
     - No card-in-card visual nesting
     - Touch targets >= 44px, 16px input font (no iOS zoom)
     - Bottom-sheet pattern for sheets / sticky modals
     - Native ease-out timing (no bounce / elastic)
     - Container queries where supported
     - Progressive disclosure: advanced filters collapse by default
     - Reduced motion respected
     - Single source of truth — load LAST in _Host.cshtml
   ============================================================ */

/* -----------------------------------------------------------
   LOCAL TOKENS — only variables that DO NOT exist in base.css.
   Everything else uses the inherited project tokens directly.
   ----------------------------------------------------------- */
:root {
    /* Touch target floor (mobile) */
    --m-touch: 44px;
    /* Native ease-out — no bounce, no elastic */
    --m-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    /* Bottom-sheet animation duration */
    --m-sheet-dur: 220ms;
    /* Maximum brand-logo footprint on mobile (prevents data-URL blowups) */
    --m-logo-max-h: 36px;
    --m-logo-max-w: 140px;
}

/* ============================================================
   GLOBAL MOBILE BASE  ( <= 767px )
   ============================================================ */
@media (max-width: 767px) {

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

    body {
        overflow-x: hidden;
        -webkit-tap-highlight-color: transparent;
    }

    .container, .container-fluid {
        padding-left:  var(--space-3) !important;
        padding-right: var(--space-3) !important;
    }

    /* Slimmer Bootstrap row gutters on phones */
    .row.g-3, .row.g-4 {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }

    /* All inputs at safe touch + 16px font (no iOS zoom) */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="search"],
    input[type="url"],
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: var(--font-size-base) !important;
        min-height: var(--m-touch) !important;
        border-radius: var(--radius-md) !important;
    }

    textarea, textarea.form-control { min-height: 96px !important; }

    .btn {
        min-height: var(--m-touch);
        padding: 10px 16px;
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
    }
    .btn.btn-sm { min-height: 38px; padding: 7px 12px; font-size: var(--font-size-xs); }
    .btn.btn-lg { min-height: 52px; padding: 14px 22px; font-size: var(--font-size-base); }
}

/* ============================================================
   BRAND-LOGO SAFETY — applies to any header that displays the
   brand logo injected by BrandingService. Must NEVER reference
   a specific brand by name or path.
   ============================================================ */
@media (max-width: 767px) {

    .header > div > a > img,
    header.header img,
    .header img,
    .auth-header img,
    .brand-logo {
        max-height: var(--m-logo-max-h) !important;
        max-width:  var(--m-logo-max-w) !important;
        height: auto !important;
        width: auto !important;
        object-fit: contain !important;
    }

    /* Brand title / tagline next to logo — keep tidy on small screens */
    .header > div > a > span,
    header.header span {
        font-size: var(--font-size-sm) !important;
        white-space: normal !important;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: var(--line-height-tight);
        max-width: calc(100vw - 200px);
    }

    /* Stop horizontal overflow caused by long subtitles */
    header.header,
    .header { overflow: hidden; }
}

/* ============================================================
   1. AUTH — Login.razor (.login-grid)  +  ClientRegister
   ============================================================ */
@media (max-width: 767px) {

    /* Login page collapses to a single column; decorative side hidden. */
    .login-grid {
        grid-template-columns: 1fr !important;
        min-height: 100dvh !important;
    }
    .login-welcome-side { display: none !important; }
    .login-form-side {
        padding: var(--space-6) var(--space-4) var(--space-12) !important;
        align-items: flex-start !important;
    }
    .login-form-wrap {
        max-width: 100% !important;
        padding-top: var(--space-6);
    }
    .login-form-wrap .brand-logo {
        margin: 0 auto var(--space-3) !important;
        display: block;
    }
    .login-form-wrap .brand-title {
        font-size: var(--font-size-2xl) !important;
        line-height: var(--line-height-tight);
    }
    .login-form-wrap .brand-subtitle {
        font-size: var(--font-size-sm) !important;
        margin-bottom: var(--space-6) !important;
    }
    .login-form-wrap .field-input,
    .login-form-wrap .password-box .field-input {
        height: 48px !important;
        font-size: var(--font-size-base) !important;
    }
    .login-form-wrap .password-toggle { width: var(--m-touch) !important; }
    .login-form-wrap .login-btn {
        height: 48px !important;
        font-size: var(--font-size-base) !important;
        background: var(--primary-color) !important;
        background-image: none !important;     /* override gradient inside Login.razor */
    }
    .login-form-wrap .login-row { flex-wrap: wrap; gap: var(--space-2); }
    .login-form-wrap .form-footer { margin-top: var(--space-6) !important; }

    /* ClientRegister.razor */
    .auth-page { display: block !important; direction: rtl; }
    .auth-cover { display: none !important; }
    .auth-form-panel { padding: var(--space-3) !important; min-height: 100dvh; }
    .auth-form-container { max-width: 100% !important; }

    .auth-header { text-align: center; }
    .auth-header h1 { font-size: var(--font-size-xl) !important; line-height: var(--line-height-tight); }
    .auth-header p  { font-size: var(--font-size-sm) !important; }

    /* Step indicator: force LTR so 1→2→3 stays in correct order even on RTL pages */
    .steps-nav {
        position: sticky; top: 0;
        background: var(--background-primary);
        padding: var(--space-2) 0;
        z-index: var(--z-sticky);
        margin: 0 calc(-1 * var(--space-3)) var(--space-3) !important;
        padding-inline: var(--space-3);
        border-bottom: 1px solid var(--border-color);
        direction: ltr !important;
        justify-content: center !important;
    }
    .step-item { width: 28px !important; height: 28px !important; font-size: var(--font-size-xs) !important; }

    .form-section {
        padding: var(--space-3) !important;
        margin-bottom: var(--space-3) !important;
        border-radius: var(--radius-lg) !important;
    }
    .form-section-title { font-size: var(--font-size-sm) !important; gap: 6px; }

    /* Two-column form rows collapse */
    .form-row { grid-template-columns: 1fr !important; gap: var(--space-3) !important; }

    /* Phone input: keep horizontal, force LTR for digits & code */
    .phone-input {
        flex-direction: row !important;
        direction: ltr !important;
    }
    .phone-input .phone-code {
        order: 0 !important;
        min-width: 64px !important;
        padding: 10px 8px !important;
        font-size: var(--font-size-xs) !important;
        text-align: center !important;
        flex-shrink: 0;
    }
    .phone-input .form-control {
        order: 1 !important;
        text-align: left !important;
        direction: ltr !important;
    }

    /* Country select arrow on the inline-end side */
    .form-section select.form-control {
        background-position: left 12px center !important;
        padding-inline-end: 14px !important;
        padding-inline-start: 36px !important;
    }

    .pwd-requirements { padding: 8px 10px !important; }
    .pwd-req-item     { font-size: var(--font-size-xs) !important; }

    .password-wrapper .form-control { padding-inline-start: 44px !important; }
    .password-wrapper .btn-toggle {
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
    }

    .form-check {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: var(--space-2) !important;
        text-align: start;
    }
    .form-check-input { margin: 2px 0 0 0 !important; flex-shrink: 0; }
    .form-check-label { font-size: var(--font-size-sm) !important; line-height: var(--line-height-normal) !important; flex: 1; }

    /* Solid CTA — no gradient (rule) — pinned to viewport bottom */
    .btn-submit {
        position: sticky;
        bottom: 0;
        margin-top: var(--space-4);
        height: 50px !important;
        background: var(--primary-color) !important;
        background-image: none !important;
        box-shadow: 0 -8px 16px -8px rgba(0, 0, 0, 0.08);
    }

    .auth-footer { text-align: center; margin-top: var(--space-4) !important; }
    .auth-footer p { font-size: var(--font-size-sm) !important; margin: 0; }
}

/* ============================================================
   2. PLANS / SUBSCRIPTIONS  (Onboarding/PlanSelection .ps-*  +
                              MySubscription .mys-*  +  Payment)
   ============================================================ */
@media (max-width: 767px) {

    .ps-content   { padding: var(--space-3) !important; }
    .ps-container { max-width: 100% !important; }

    .ps-header {
        position: relative;
        padding: var(--space-6) var(--space-4) !important;
        border-radius: var(--radius-xl) !important;
        text-align: center;
    }
    .ps-header h1 { font-size: var(--font-size-2xl) !important; line-height: var(--line-height-tight); }
    .ps-header p  { font-size: var(--font-size-sm) !important; }

    .ps-logout {
        top: var(--space-2) !important;
        left: var(--space-2) !important;
        right: auto !important;
        padding: 6px 10px !important;
        font-size: var(--font-size-xs) !important;
    }
    .ps-logout span:not(.material-icons) { display: none !important; }

    .ps-steps { gap: 6px !important; margin-top: var(--space-3) !important; }
    .ps-step  { width: 26px !important; height: 26px !important; font-size: var(--font-size-xs) !important; }

    .ps-current-alert {
        padding: var(--space-3) !important;
        font-size: var(--font-size-sm) !important;
        flex-wrap: wrap;
    }
    .ps-current-alert .material-icons { font-size: 22px !important; }

    /* Billing-cycle toggle: 2 buttons per row */
    .ps-cycle-toggle {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: var(--space-2) !important;
        padding: 4px !important;
    }
    .ps-cycle-btn {
        flex: 1 1 calc(50% - 4px) !important;
        min-height: var(--m-touch) !important;
        font-size: var(--font-size-sm) !important;
        padding: 10px !important;
    }
    .ps-cycle-savings { font-size: 10px !important; padding: 2px 6px !important; }

    /* Plan cards — single column, full width */
    .row.g-4.justify-content-center > [class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-inline: 0 !important;
    }
    .ps-card { margin-bottom: var(--space-3); border-radius: var(--radius-xl) !important; }
    .ps-card-body  { padding: var(--space-4) !important; }
    .ps-plan-icon  { width: 56px !important; height: 56px !important; }
    .ps-plan-icon .material-icons { font-size: 28px !important; }
    .ps-plan-name { font-size: var(--font-size-lg) !important; }
    .ps-plan-desc { font-size: var(--font-size-sm) !important; min-height: auto !important; }
    .ps-price-box { padding: var(--space-3) !important; }
    .ps-price-value { font-size: 26px !important; }
    .ps-price-currency { font-size: var(--font-size-xs) !important; }
    .ps-ribbon { font-size: 10px !important; padding: 4px 12px !important; }

    /* MySubscription */
    .mys-page,
    .mys-container { padding: var(--space-3) !important; }
    .mys-hero,
    .mys-header { padding: var(--space-4) !important; border-radius: var(--radius-xl) !important; }
    .mys-hero h1, .mys-header h1 { font-size: var(--font-size-xl) !important; }
    .mys-stats,
    .mys-grid,
    .mys-summary {
        grid-template-columns: 1fr !important;
        gap: var(--space-3) !important;
    }
    .mys-card { padding: var(--space-4) !important; border-radius: var(--radius-lg) !important; }
    .mys-actions { flex-direction: column !important; gap: var(--space-2) !important; }
    .mys-actions .mys-btn { width: 100% !important; min-height: 46px; }

    .payment-actions,
    [class*="payment"] [class*="actions"] {
        position: sticky; bottom: 0;
        background: var(--background-primary);
        padding: var(--space-3);
        margin: var(--space-3) calc(-1 * var(--space-3)) 0;
        border-top: 1px solid var(--border-color);
    }
}

/* ============================================================
   3. MAIN DASHBOARD ( /dashboard — .dashboard-shell )
   ============================================================ */
@media (max-width: 767px) {

    .dashboard-shell {
        padding: var(--space-3) !important;
        gap: var(--space-3) !important;
    }
    .dashboard-shell h1,
    .dashboard-shell h2 { font-size: var(--font-size-xl) !important; line-height: var(--line-height-tight); }
    .dashboard-shell h3 { font-size: var(--font-size-base) !important; }
    .dashboard-shell h4 { font-size: var(--font-size-sm) !important; }

    .loading-dashboard,
    .loading-container { min-height: 200px !important; padding: var(--space-4) !important; }
    .loading-content h4 { font-size: var(--font-size-base) !important; }
    .loading-steps {
        flex-wrap: wrap !important;
        gap: 6px !important;
        font-size: var(--font-size-xs) !important;
    }
    .loading-steps .step { padding: 4px 8px !important; }

    /* Generic dashboard grids → single column */
    .dashboard-shell .stats-grid,
    .dashboard-shell .metrics-grid,
    .dashboard-shell .overview-grid,
    .dashboard-shell .summary-grid,
    .dashboard-shell .charts-grid,
    .dashboard-shell .widgets-grid,
    .dashboard-shell [class*="grid-cols"],
    .dashboard-shell [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: var(--space-3) !important;
    }

    /* Hero KPI / stats rows: 2-up to keep numbers legible */
    .dashboard-shell .kpi-row,
    .dashboard-shell .stats-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-2) !important;
    }
    .dashboard-shell .kpi-row > *,
    .dashboard-shell .stats-row > * { min-width: 0; }

    .dashboard-shell .trend-bars,
    .dashboard-shell .monthly-trend { overflow-x: auto; }

    /* Invoice reminder banner — stack actions */
    .invoice-reminder-banner    { padding: var(--space-3) !important; border-radius: var(--radius-lg) !important; }
    .invoice-reminder-content   { flex-direction: column !important; align-items: flex-start !important; gap: var(--space-3) !important; }
    .invoice-reminder-actions   { flex-direction: column !important; gap: var(--space-2) !important; width: 100% !important; }
    .invoice-reminder-actions .btn,
    .invoice-reminder-actions .btn-pay-now { width: 100% !important; justify-content: center; }
    .invoice-reminder-badge     { font-size: var(--font-size-xs) !important; }
    .invoice-dismiss-btn        { position: absolute; top: 8px; left: 8px; }
}

/* ============================================================
   4. CLIENT PORTAL  (Pages/Client/* — applies to Dashboard,
       Clients, Organizations, Offices, Vehicles, Documents,
       Departments, Employees, Executors, Loyalty*, Reports,
       MyProfile, Invoices.)
   ============================================================ */
@media (max-width: 767px) {

    .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--space-3) !important;
        padding: var(--space-3) !important;
        margin-bottom: var(--space-3) !important;
        border-radius: var(--radius-lg) !important;
    }
    .page-header .page-title,
    .page-header h1 {
        font-size: var(--font-size-lg) !important;
        line-height: var(--line-height-tight);
        gap: 6px;
    }
    .page-header .page-title .material-icons { font-size: 22px !important; }
    .page-header .page-subtitle { font-size: var(--font-size-xs) !important; }

    .page-actions {
        flex-direction: column !important;
        gap: var(--space-2) !important;
        width: 100% !important;
    }
    .page-actions > * { width: 100% !important; }
    .page-actions .btn-group {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: var(--space-2) !important;
        width: 100% !important;
    }
    .page-actions .btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: var(--m-touch);
    }

    /* Stats cards (Vehicles, Documents, Employees…) */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-2) !important;
    }
    .stat-card {
        padding: var(--space-3) !important;
        border-radius: var(--radius-lg) !important;
        min-width: 0;
    }
    .stat-card .stat-content { gap: 6px !important; }
    .stat-card .stat-value,
    .stat-card h3.stat-value { font-size: var(--font-size-xl) !important; line-height: 1.1; }
    .stat-card .stat-title    { font-size: var(--font-size-xs) !important; }
    .stat-card .stat-subtitle { font-size: 10px !important; }
    .stat-card .stat-icon     { width: 36px !important; height: 36px !important; flex-shrink: 0; }
    .stat-card .stat-icon .material-icons { font-size: 20px !important; }
    .stat-card .stat-sparkline { display: none !important; }   /* sparkline as decoration → removed (rule) */
    .stat-card .stat-change    { font-size: 11px !important; }
    .stat-card .stat-footer    { display: none !important; }

    /* When a stats grid has 5+ items, single column reads better */
    .stats-grid:has(> :nth-child(5)) { grid-template-columns: 1fr !important; }

    /* Standard card */
    .card {
        margin-bottom: var(--space-3) !important;
        border-radius: var(--radius-lg) !important;
    }
    .card .card-header {
        padding: var(--space-3) !important;
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    .card .card-body,
    .card .card-content { padding: var(--space-3) !important; }
    .card .card-title   { font-size: var(--font-size-base) !important; }

    /* Filter zones */
    .filters-grid,
    .filters-section,
    .filters-toolbar,
    .filter-row {
        grid-template-columns: 1fr !important;
        gap: var(--space-2) !important;
        padding: var(--space-3) !important;
    }
    .filter-group label,
    .filter-label { font-size: var(--font-size-xs) !important; margin-bottom: 4px !important; }

    /* Tables — horizontal scroll with sticky head */
    .table-container,
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 calc(-1 * var(--space-3)) !important;
        padding: 0 var(--space-3) !important;
    }
    .table-container .table,
    .table-responsive .table,
    .table {
        font-size: var(--font-size-xs) !important;
        min-width: 640px;
    }
    .table th, .table td { padding: 10px 8px !important; white-space: nowrap; }
    .table th {
        position: sticky; top: 0;
        background: var(--background-secondary) !important;
        z-index: 2;
    }

    /* Compact in-row buttons */
    .table .btn { min-height: 36px !important; padding: 6px 10px !important; font-size: var(--font-size-xs) !important; }
    .table td > .btn + .btn { margin-inline-start: 4px; }

    .badge { font-size: 11px !important; padding: 3px 8px !important; }

    /* Bottom-sheet modals */
    .modal-overlay.show,
    .modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .modal-overlay .modal,
    .modal-overlay .modal-dialog,
    .modal-overlay > div:not(.modal-overlay-bg),
    .lau-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92dvh !important;
        margin: 0 !important;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
        animation: m-sheet-up var(--m-sheet-dur) var(--m-ease-out);
    }
    @keyframes m-sheet-up {
        from { transform: translateY(40px); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    .lau-header        { padding: var(--space-3) !important; }
    .lau-header-icon   { width: 36px !important; height: 36px !important; }
    .lau-title         { font-size: var(--font-size-base) !important; }

    /* Bootstrap col-stacks */
    .row.g-2 > [class*="col-"],
    .row.g-3 > [class*="col-"] { margin-bottom: var(--space-2); }
}

/* ============================================================
   5. REQUESTS  (Index master-detail, Create cart, Dashboard)
   ============================================================ */
@media (max-width: 767px) {

    .master-detail-container { display: block !important; }
    .master-panel,
    .detail-panel {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        border-inline-end: 0 !important;
    }
    .master-detail-container.detail-open .master-panel { display: none !important; }
    .master-detail-container.detail-open .detail-panel {
        position: fixed; inset: 0;
        z-index: var(--z-modal);
        background: var(--background-primary);
        overflow-y: auto;
    }

    .filters-section-compact { padding: var(--space-3) !important; }
    .search-box { flex-wrap: wrap; gap: var(--space-2); }
    .search-box .search-input {
        flex: 1 1 100% !important;
        min-height: var(--m-touch);
        font-size: var(--font-size-base) !important;
    }
    .btn-advanced-search {
        flex: 0 0 100%;
        justify-content: center;
        min-height: 40px;
    }
    .search-hint { font-size: 11px !important; line-height: var(--line-height-normal); }

    /* Type tabs as horizontal scroller */
    .request-type-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: var(--space-2);
        padding-bottom: 4px;
    }
    .request-type-tab {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
        min-height: 40px;
        padding: 8px 14px !important;
        font-size: var(--font-size-xs) !important;
        white-space: nowrap;
    }

    .page-actions [id="cartButton"] { position: relative; }
    .cart-count { font-size: 11px !important; padding: 2px 6px !important; }

    /* Create.razor filters toolbar */
    .filters-toolbar-main { flex-direction: column !important; gap: var(--space-2) !important; }
    .filter-search,
    .filter-select-group { width: 100% !important; }
    .filter-search .filter-search-input { font-size: var(--font-size-base) !important; min-height: var(--m-touch); }

    /* Tab message banner */
    .tab-message {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-3) !important;
        gap: var(--space-2);
    }
    .tab-message-close { align-self: flex-end; }

    /* Service / request card grids → single column */
    .services-grid,
    .requests-grid,
    .request-cards { grid-template-columns: 1fr !important; gap: var(--space-3) !important; }

    [data-cart-modal] .quantity-input,
    [data-cart-modal] input[type="number"] { min-width: 60px; }
}

/* ============================================================
   6. CRM  (Dashboard .crmd, Leads, Deals, Pipeline, Reports)
   ============================================================ */
@media (max-width: 767px) {

    .crmd { padding: var(--space-3) !important; }

    .crmd-welcome {
        gap: var(--space-3) !important;
        padding: var(--space-3) !important;
        border-radius: var(--radius-lg);
        background: var(--background-primary);
    }
    .crmd-welcome-info h2 { font-size: var(--font-size-lg) !important; }
    .crmd-welcome-info p  { font-size: var(--font-size-xs) !important; }
    .crmd-welcome-actions { width: 100%; flex-wrap: wrap; gap: var(--space-2) !important; }
    .crmd-pill {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
        min-height: 40px;
        padding: 8px 10px !important;
        font-size: var(--font-size-xs) !important;
    }
    .crmd-pill select { font-size: var(--font-size-xs) !important; max-width: 110px; }

    /* CRM category tabs — horizontal scroll */
    .crmd-cat-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--space-2) !important;
        gap: var(--space-2) !important;
    }
    .crmd-cat-tab {
        flex: 0 0 auto !important;
        min-height: 38px;
        padding: 6px 12px !important;
        font-size: var(--font-size-xs) !important;
        white-space: nowrap;
    }

    /* KPI grid: 2 columns on phone */
    .crmd-kpis { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-2) !important; }
    .kpi-box {
        padding: var(--space-3) !important;
        border-radius: var(--radius-lg) !important;
        min-width: 0;
    }
    .kpi-box-label { font-size: 11px !important; }
    .kpi-box-value { font-size: var(--font-size-xl) !important; line-height: 1.15; }

    .crmd-row-2,
    .crmd-row-3,
    .crmd-row-4,
    .crmd-row-5 { grid-template-columns: 1fr !important; gap: var(--space-3) !important; }
    .crmd-bottom-stats { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-2) !important; }

    .crmd canvas,
    .crmd .chart-container,
    .crmd [class*="chart"] { max-height: 220px !important; }

    /* Leads */
    .crm-leads-header .icon-wrapper { width: 40px !important; height: 40px !important; }
    .crm-leads-header h3 { font-size: var(--font-size-lg) !important; }
    .crm-leads-header .btn-modern { flex: 1 1 calc(50% - 4px) !important; min-height: 42px; }

    .filter-card .card-body .row > [class*="col-md-"] { margin-bottom: var(--space-2); }
    .form-select-modern { min-height: var(--m-touch) !important; font-size: var(--font-size-sm) !important; }

    /* Pipeline kanban → vertical stack with collapsible columns */
    .pipeline-page { padding: var(--space-3) !important; }
    .pipeline-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--space-2) !important;
        padding: var(--space-3) !important;
    }
    .pipeline-header h4 { font-size: var(--font-size-base) !important; }
    .pipeline-org-picker { width: 100%; }
    .pipeline-org-picker select { width: 100% !important; }

    .pipeline-filters-card { margin-bottom: var(--space-3) !important; }
    .pipeline-filters-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-2) !important;
    }
    .pipeline-filter-item { padding: 0 !important; }

    .pipeline-board {
        flex-direction: column !important;
        gap: var(--space-3) !important;
        min-height: auto !important;
    }
    .pipeline-column {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .pipeline-column .card-header { padding: var(--space-3) !important; }
    .pipeline-column .card-body   { padding: var(--space-2) !important; max-height: 60vh; }

    /* Reports — stack date-range row */
    .row.g-2.align-items-end > [class*="col-md-"] { margin-bottom: var(--space-2); }
    .row.g-2.align-items-end .text-end { text-align: start !important; }
    .row.g-2.align-items-end .text-end .btn {
        width: 100%;
        margin: 0 0 var(--space-2) 0 !important;
    }

    /* Two-up layout for small report KPIs */
    .row.g-3 > .col-md-4:has(> .card.text-bg-light) { width: 50% !important; }
}

/* ============================================================
   7. POLISH — focus + safe area + side-stripe override + sheets
   ============================================================ */
@media (max-width: 767px) {

    /* High-contrast focus ring (uses brand primary, no hardcoded color) */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    .btn:focus-visible {
        outline: 2px solid var(--primary-color) !important;
        outline-offset: 2px;
        box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.16) !important;
    }

    /* iPhone safe-area on sticky bottoms */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        .btn-submit,
        .modal-footer,
        .payment-actions,
        .dialog-footer {
            padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)) !important;
        }
    }

    /* Stand-alone dropdowns become bottom sheets */
    .dropdown-menu.show:not(.dropdown-menu-end-stick):not(.user-menu):not(.lang-menu) {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        width: 100% !important;
        max-height: 70dvh !important;
        overflow-y: auto;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
        padding: var(--space-3) !important;
        animation: m-sheet-up 200ms var(--m-ease-out);
    }

    /* Tame inline gradient-on-text — design rule (no gradient text) */
    [style*="background-clip:text"],
    [style*="-webkit-background-clip:text"] {
        background: none !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        -webkit-text-fill-color: currentColor !important;
        color: var(--text-primary) !important;
    }

    /* Tame side-stripe borders (>1px) — design rule */
    .card[style*="border-left:"][style*="px solid"],
    .card[style*="border-right:"][style*="px solid"],
    .alert[style*="border-left:"][style*="px solid"],
    .alert[style*="border-right:"][style*="px solid"],
    .list-group-item[style*="border-left:"][style*="px solid"],
    .list-group-item[style*="border-right:"][style*="px solid"] {
        border-left-width: 1px !important;
        border-right-width: 1px !important;
    }

    /* Progressive disclosure — advanced filters collapse without JS */
    .filters-grid.hide,
    .filters-section.hide,
    [data-advanced="hidden"] {
        display: none !important;
    }
}

/* ============================================================
   TABLET ( 768px – 1023px ) — soften 4-up grids to 2/3-up
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {

    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .crmd-kpis  { grid-template-columns: repeat(3, 1fr) !important; }
    .ps-card    { font-size: var(--font-size-sm); }

    .pipeline-board  { gap: var(--space-3); }
    .pipeline-column { min-width: 280px !important; }

    .master-detail-container .master-panel { flex-basis: 42% !important; }
    .master-detail-container .detail-panel { flex-basis: 58% !important; }

    .row.g-4.justify-content-center > [class*="col-lg-4"],
    .row.g-4.justify-content-center > [class*="col-xl-3"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* ============================================================
   LANDSCAPE PHONES — keep auth/onboarding scrollable
   ============================================================ */
@media (max-width: 991px) and (max-height: 520px) and (orientation: landscape) {

    .auth-page,
    .login-page,
    .ps-content { min-height: auto !important; }

    .auth-form-panel,
    .login-form-side { padding: var(--space-3) var(--space-4) !important; }

    .ps-header { padding: var(--space-3) !important; }
    .ps-header h1 { font-size: var(--font-size-lg) !important; }
}

/* ============================================================
   REDUCED MOTION — respect users' preferences
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    @keyframes m-sheet-up { from, to { transform: none; opacity: 1; } }
    .modal-overlay > div,
    .lau-modal,
    .dropdown-menu.show { animation: none !important; }
    .wave { animation: none !important; }
}