/**
 * Mobile-first app-like layout
 * Compact header, full-screen drawer menu, comfortable content area for agents
 * Uses global vars from modern-crm.css; overrides below for mobile/small.
 */

/* ========== Desktop: hide all mobile-only UI, restore desktop layout (min-width: 769px) ========== */
@media (min-width: 769px) {
    /* Mobile-only elements: never show on desktop */
    .mobile-menu-toggle {
        display: none !important;
    }
    .nav-links .mobile-drawer-header {
        display: none !important;
    }
    #mobile-drawer-backdrop {
        display: none !important;
    }
    /* Desktop nav: horizontal bar (override any mobile leakage) */
    .nav-links {
        display: flex !important;
        position: static !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .nav-links li {
        width: auto !important;
    }
    .nav-links .nav-separator {
        display: inline !important;
    }
    /* Desktop: no fixed header offset on body */
    body {
        padding-top: 0 !important;
    }
    body.drawer-open .navbar {
        z-index: auto;
    }
    /* Search icon: visible on desktop (hidden only in mobile block) */
    .search-icon-btn {
        display: flex !important;
    }
}

/* ========== Viewport & safe area ========== */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ========== Mobile: compact header & drawer (max-width: 768px) ========== */
@media (max-width: 768px) {
    /* Global mobile overrides – use var(--crm-font-h1) etc. in components */
    :root {
        --crm-font-h1: 1.15rem;
        --crm-font-h2: 1.05rem;
        --crm-font-h3: 1rem;
        --crm-font-h4: 0.9375rem;
        --crm-font-body: 0.875rem;
        --crm-font-sm: 0.8125rem;
        --crm-font-xs: 0.75rem;
        --crm-font-2xs: 0.6875rem;
        --crm-page-pad: 0.875rem;
        --crm-card-pad: 0.875rem;
        --crm-card-pad-sm: 0.65rem;
        --crm-card-radius: 10px;
        --crm-input-height: 42px;
        --crm-btn-height: 42px;
        --crm-btn-height-sm: 36px;
        --crm-gap-section: 0.75rem;
        --crm-gap-card: 0.75rem;
        --crm-gap-tight: 0.4rem;
    }

    /* Fixed compact header – single row, app-like, no blur so overlay stays clear */
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 0;
        margin-bottom: 0;
        min-height: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        z-index: 1001;
        padding-top: env(safe-area-inset-top, 0);
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.08);
        border-bottom: 1px solid var(--border, #e2e8f0);
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .navbar .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
        gap: 6px;
        flex-wrap: nowrap;
    }

    .nav-left {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 1;
        min-width: 0;
    }

    /* Logo compact */
    .nav-brand {
        font-size: 1rem;
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }
    .nav-brand img {
        height: 26px;
        max-height: 26px;
    }

    /* Search – hidden on mobile to free space */
    .search-icon-btn {
        display: none !important;
    }

    /* Hamburger – main nav, clear and touch-friendly */
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        min-height: 42px;
        padding: 0;
        margin: 0 2px 0 0;
        font-size: 1.25rem;
        border: none;
        background: #f1f5f9;
        color: var(--dark, #1e293b);
        cursor: pointer;
        border-radius: 10px;
        flex-shrink: 0;
    }
    .mobile-menu-toggle:hover {
        background: #e2e8f0;
        color: var(--primary, #2563eb);
    }

    /* Hide desktop nav links from navbar (they go in drawer) */
    .nav-links {
        display: none !important;
    }

    /* Right block: lang, currency, profile – small icons, more space for burger */
    .nav-actions {
        display: flex;
        align-items: center;
        gap: 2px;
        flex-shrink: 0;
    }
    .nav-actions .modern-switcher .switcher-btn,
    .nav-actions .header-switcher-btn {
        padding: 0 6px;
        min-width: 34px;
        min-height: 34px;
        height: 34px;
        font-size: 0.7rem;
        border-radius: 8px;
    }
    .nav-actions .header-switcher-btn img {
        width: 18px !important;
        height: 14px !important;
    }
    .nav-actions .header-switcher-btn .switcher-arrow {
        font-size: 0.5rem;
        margin-left: 1px;
    }
    /* Currency: show symbol only on very narrow to save space */
    .nav-actions .header-switcher-btn span:first-of-type {
        font-size: 0.7rem !important;
        font-weight: 600;
    }
    @media (max-width: 380px) {
        .nav-actions .modern-switcher:has(#currency-dropdown) .header-switcher-btn span:not(.switcher-arrow) {
            max-width: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .user-profile-link {
        min-width: 34px;
        min-height: 34px;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 8px;
    }
    .user-avatar-small {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
    }
    .btn-logout {
        min-width: 34px;
        min-height: 34px;
        width: 34px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }
    .btn-logout svg {
        width: 18px;
        height: 18px;
    }

    /* ===== Mobile drawer – no blur anywhere, all items visible, accordion dropdowns ===== */
    .nav-links#mobile-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(300px, 88vw);
        max-width: 300px;
        margin: 0;
        padding: 0;
        padding-top: env(safe-area-inset-top, 0);
        background: #ffffff !important;
        z-index: 1002;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        list-style: none;
        box-shadow: 4px 0 24px rgba(0,0,0,.12);
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: 1 !important;
    }
    .nav-links#mobile-menu.active {
        display: flex !important;
        pointer-events: auto !important;
    }
    .nav-links#mobile-menu a,
    .nav-links#mobile-menu .dropdown-toggle,
    .nav-links#mobile-menu button {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* Dropdowns (Products, Settings) – closed by default, open on click (accordion) */
    .nav-links#mobile-menu .dropdown .dropdown-menu {
        display: none !important;
        position: static;
        box-shadow: none;
        padding: 0 0 8px 8px;
        margin: 0 0 0 16px;
        border-left: 2px solid var(--border, #e2e8f0);
        min-width: auto;
        background: #f8fafc;
        border-radius: 0 0 8px 0;
    }
    .nav-links#mobile-menu .dropdown.dropdown-open .dropdown-menu {
        display: block !important;
    }
    .nav-links#mobile-menu .dropdown .dropdown-toggle .dropdown-arrow {
        display: inline-block;
        font-size: 0.6rem;
        transition: transform 0.2s ease;
    }
    .nav-links#mobile-menu .dropdown.dropdown-open .dropdown-toggle .dropdown-arrow {
        transform: rotate(180deg);
    }

    .nav-links#mobile-menu > li {
        margin: 0;
        border: none;
        border-bottom: 1px solid var(--border, #e2e8f0);
        flex-shrink: 0;
    }

    /* Drawer header – title + close */
    .nav-links#mobile-menu > li.mobile-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 10px 8px 14px;
        min-height: 44px;
        background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
        border-bottom: 2px solid var(--border, #e2e8f0);
    }
    .mobile-drawer-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--dark, #1e293b);
    }
    .nav-links#mobile-menu .mobile-drawer-close {
        min-width: 40px;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: #f1f5f9;
        font-size: 1.1rem;
        color: #475569;
        cursor: pointer;
        border-radius: 10px;
        transition: background .2s, color .2s;
    }
    .nav-links#mobile-menu .mobile-drawer-close:hover {
        background: #e2e8f0;
        color: #1e293b;
    }

    .nav-links#mobile-menu a {
        display: flex;
        align-items: center;
        padding: 10px 14px;
        font-size: 0.875rem;
        border-radius: 0;
        border: none;
        min-height: 42px;
        color: #1e293b !important;
        text-decoration: none;
    }
    .nav-links#mobile-menu a:hover {
        background: #f1f5f9;
        color: #0f172a !important;
    }
    .nav-links#mobile-menu .nav-link-with-icon .nav-icon {
        margin-right: 10px;
        flex-shrink: 0;
        width: 18px;
        height: 18px;
    }
    .nav-links#mobile-menu .nav-link-with-icon .nav-icon svg {
        width: 16px;
        height: 16px;
    }
    .nav-links#mobile-menu .nav-separator {
        display: none;
    }

    /* Primary CTA in drawer – compact */
    .nav-links#mobile-menu a.nav-primary {
        margin: 8px 12px;
        padding: 10px 16px;
        border-radius: 10px;
        justify-content: center;
        font-weight: 600;
        min-height: 42px;
        font-size: 0.9rem;
    }

    .nav-links#mobile-menu .dropdown .dropdown-menu a {
        padding: 8px 12px;
        font-size: 0.825rem;
        min-height: 38px;
        color: #1e293b !important;
    }
    .nav-links#mobile-menu .dropdown .dropdown-toggle {
        padding: 10px 14px;
        font-size: 0.875rem;
        min-height: 42px;
        color: #1e293b !important;
    }
    .nav-links#mobile-menu .dropdown .dropdown-toggle .dropdown-arrow {
        display: inline;
        font-size: 0.6rem;
    }
    /* Ensure drawer scrolls and last items (Settings, Invoices, etc.) visible */
    .nav-links#mobile-menu {
        padding-bottom: env(safe-area-inset-bottom, 24px);
        top: 0 !important;
        left: 0 !important;
    }
    .nav-links#mobile-menu * {
        -webkit-font-smoothing: antialiased;
    }

    /* Main content: offset below fixed header */
    body {
        padding-top: calc(48px + env(safe-area-inset-top, 0px));
    }
    .container {
        padding-left: 14px;
        padding-right: 14px;
        max-width: 100%;
    }
    .container main {
        padding: 0 var(--crm-page-pad);
    }

    /* Page content – compact sections */
    .container > .card,
    .container > .section-grid,
    .container > div[class*="grid"] {
        margin-bottom: 1rem;
    }
    .card {
        padding: 1rem;
        border-radius: 12px;
    }
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }
    .page-header h1,
    .page-header h2 {
        font-size: 1.25rem;
        margin: 0;
    }

    /* Buttons – touch-friendly */
    .btn {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 0.9rem;
        border-radius: 10px;
    }
    .btn-sm {
        min-height: 38px;
        padding: 8px 12px;
    }

    /* Forms */
    .form-group input,
    .form-group select,
    .form-group textarea {
        min-height: 44px;
        font-size: 16px; /* avoid zoom on iOS */
        border-radius: 10px;
    }

    /* Tables – card style on mobile when they have table-mobile-cards */
    .table-wrapper {
        margin-left: -14px;
        margin-right: -14px;
        padding-left: 14px;
        padding-right: 14px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ========== Mobile typography – uses :root vars (compact, readable) ========== */
    body {
        font-size: var(--crm-font-body);
        line-height: var(--crm-line-normal);
        color: #1e293b;
    }
    h1, .h1 { font-size: var(--crm-font-h1) !important; font-weight: 700; margin-bottom: 0.5rem; line-height: var(--crm-line-tight); }
    h2, .h2 { font-size: var(--crm-font-h2) !important; font-weight: 700; margin-bottom: 0.45rem; line-height: var(--crm-line-tight); }
    h3, .h3 { font-size: var(--crm-font-h3) !important; font-weight: 600; margin-bottom: 0.4rem; line-height: var(--crm-line-tight); }
    h4, h5, h6, .h4, .h5, .h6 { font-size: var(--crm-font-h4) !important; font-weight: 600; margin-bottom: 0.35rem; line-height: 1.4; }

    .page-header h1,
    .page-header h2 {
        font-size: 1.1rem !important;
        margin-bottom: 0.35rem;
    }
    .page-header {
        margin-bottom: var(--crm-gap-section);
        gap: var(--crm-gap-tight);
    }

    /* Cards – compact padding and titles */
    .card {
        padding: var(--crm-card-pad);
        margin-bottom: 0.875rem;
        border-radius: var(--crm-card-radius);
    }
    .card h2, .card .card-title, .crm-card-title {
        font-size: 1rem !important;
        margin-bottom: 0.75rem;
    }
    .card-body, .crm-card-body {
        font-size: var(--crm-font-body);
    }
    .crm-card {
        padding: var(--crm-card-pad);
        margin-bottom: 0.875rem;
        border-radius: var(--crm-card-radius);
    }
    .crm-card-header {
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }

    /* Buttons – compact, touch-friendly */
    .btn {
        min-height: var(--crm-btn-height);
        padding: 8px 14px;
        font-size: var(--crm-font-sm);
        border-radius: 8px;
    }
    .btn-sm {
        min-height: var(--crm-btn-height-sm);
        padding: 6px 10px;
        font-size: var(--crm-font-xs);
    }
    .btn-icon {
        width: 38px;
        height: 38px;
        padding: 0.4rem;
    }

    /* Forms – labels and inputs compact */
    .form-group {
        margin-bottom: var(--crm-gap-card);
    }
    .form-group label {
        font-size: var(--crm-font-sm);
        margin-bottom: 0.35rem;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.5rem 0.75rem;
        min-height: var(--crm-input-height);
        font-size: 16px; /* avoid iOS zoom */
        border-radius: 8px;
    }
    .form-group textarea {
        min-height: 80px;
        font-size: var(--crm-font-body);
    }

    /* Tables – compact cells */
    .table th,
    .table td {
        padding: 0.5rem 0.6rem;
        font-size: var(--crm-font-xs);
    }
    .table th {
        font-size: var(--crm-font-2xs);
    }

    /* Badges & tags */
    .badge {
        padding: 0.25rem 0.5rem;
        font-size: var(--crm-font-2xs);
        border-radius: 6px;
    }

    /* Alerts */
    .alert {
        padding: 0.65rem 1rem;
        font-size: 0.8125rem;
        margin-bottom: 0.75rem;
        border-radius: 8px;
    }

    /* Tabs */
    .tabs {
        margin-bottom: 1rem;
        gap: 0.25rem;
    }
    .tab {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }

    /* Pagination */
    .pagination,
    .pagination a,
    .pagination span {
        font-size: 0.8125rem;
        padding: 0.4rem 0.65rem;
        min-height: 36px;
    }

    /* Filters & search */
    .filters-panel {
        padding: 0.875rem 1rem;
        margin-bottom: 1rem;
        border-radius: 10px;
    }
    .filter-toggle {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    .search-bar input {
        padding: 0.5rem 0.75rem 0.5rem 2.5rem;
        font-size: 16px;
    }
    .search-bar::before {
        font-size: 1rem;
    }

    /* Section titles and blocks */
    .section-title, .block-title {
        font-size: 0.9375rem !important;
        margin-bottom: 0.5rem;
    }
    .list-group-item {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Dashboard and stats numbers */
    .stat-number, .dashboard-priority .stat-number,
    .crm-stat-value {
        font-size: 1.25rem !important;
    }
    .stat-label, .crm-stat-label {
        font-size: 0.75rem !important;
    }

    /* Prevent overflow and improve readability */
    .container > .card,
    .container > .section-grid,
    .container > div[class*="grid"] {
        margin-bottom: 0.75rem;
    }
    p {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }
    small, .text-muted {
        font-size: 0.75rem;
    }
    a {
        font-size: inherit;
    }

    /* Dashboard (db-*) – compact, readable, classic modern cards */
    .db-page {
        padding-bottom: 1rem;
    }
    .db-title {
        font-size: 1.05rem !important;
    }
    .db-subtitle {
        font-size: 0.6rem;
    }
    .db-header {
        margin-bottom: 0.75rem;
        gap: 0.5rem;
    }
    .db-actions .btn,
    .db-actions .crm-btn {
        padding: 0.4rem 0.65rem !important;
        font-size: 0.75rem !important;
        min-height: 36px !important;
    }
    .db-pending-strip {
        padding: 0.6rem 0.85rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: 10px !important;
    }
    .db-pending-strip .psi {
        font-size: 1rem !important;
    }
    .db-pending-strip-title {
        font-size: 0.7rem !important;
    }
    .db-pending-strip-sub {
        font-size: 0.65rem !important;
    }
    .db-pending-strip-val {
        font-size: 0.95rem !important;
    }
    .db-pending-strip .crm-btn,
    .db-pending-strip a.crm-btn-sm {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.7rem !important;
    }
    .db-kpi-strip {
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }
    .db-kpi {
        padding: 0.55rem 0.7rem;
        border-radius: 10px;
    }
    .db-kpi-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    .db-kpi-value {
        font-size: 0.95rem !important;
    }
    .db-kpi-label,
    .db-kpi-delta {
        font-size: 0.6rem;
    }
    .db-main-grid {
        gap: 0.6rem;
    }
    .db-card-head {
        padding: 0.6rem 0.85rem 0.5rem !important;
    }
    .db-card-title {
        font-size: 0.8rem !important;
    }
    .db-card-head .crm-btn-sm {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.7rem !important;
    }
    .db-hero {
        padding: 0.75rem 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    .db-hero-label {
        font-size: 0.6rem !important;
    }
    .db-hero-amount {
        font-size: 1.25rem !important;
    }
    .db-hero-sub {
        font-size: 0.65rem !important;
    }
    .db-hero-grid {
        gap: 0.75rem !important;
        margin-top: 0.75rem !important;
    }
    .db-hero-pill {
        font-size: 0.6rem !important;
        padding: 0.2rem 0.5rem !important;
    }
    .db-table thead th {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.6rem !important;
    }
    .db-table tbody td {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.7rem !important;
    }
    .db-inv-num,
    .db-client {
        font-size: 0.7rem !important;
    }
    .db-amount-cell {
        font-size: 0.7rem !important;
    }
    .db-date-cell {
        font-size: 0.65rem !important;
    }
    .db-badge {
        font-size: 0.58rem !important;
        padding: 0.12rem 0.35rem !important;
    }
    .db-leads-summary {
        padding: 0.6rem !important;
        gap: 0.5rem !important;
    }
    .db-lead-tile {
        padding: 0.5rem 0.65rem !important;
    }
    .db-lead-tile-val {
        font-size: 1.1rem !important;
    }
    .db-lead-tile-lbl {
        font-size: 0.6rem !important;
    }
    .db-conv-row {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.7rem !important;
    }
    .db-section-title {
        font-size: 0.875rem !important;
    }
    .db-table-wrap {
        margin-left: -14px;
        margin-right: -14px;
        padding-left: 14px;
        padding-right: 14px;
        -webkit-overflow-scrolling: touch;
    }
    .db-emp-list {
        padding: 0.4rem 0.6rem !important;
    }
    .db-emp-row {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.75rem;
    }
    .db-emp-name {
        font-size: 0.75rem !important;
    }
    .db-emp-done,
    .db-emp-bonus {
        font-size: 0.65rem !important;
    }
    .db-monthly-bar-lbl {
        font-size: 0.55rem !important;
    }

    /* ========== List pages: Leads, Tours, Services – compact cards ========== */
    .list-page .crm-card[style*="margin-bottom"],
    .container .crm-card[style*="margin-bottom"] {
        padding: 0.65rem 0.85rem !important;
        margin-bottom: 0.75rem !important;
    }
    .list-page form#filterForm input,
    .list-page form#filterForm select,
    .container form#filterForm input,
    .container form#filterForm select {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.75rem !important;
        min-height: 38px !important;
    }
    .list-page .list-page-header,
    .container > div:first-of-type {
        margin-bottom: 0.75rem !important;
    }
    .list-page .list-page-header h1,
    .container > div:first-of-type h1 {
        font-size: 1.1rem !important;
    }
    .list-page .list-page-header .crm-btn,
    .list-page .list-page-header .crm-btn-primary,
    .container > div:first-of-type .crm-btn,
    .container > div:first-of-type .crm-btn-primary {
        padding: 0.4rem 0.65rem !important;
        font-size: 0.75rem !important;
        min-height: 36px !important;
    }
    .list-quick-filters {
        margin-bottom: 0.65rem !important;
    }
    .list-quick-filters .crm-btn-sm {
        padding: 0.3rem 0.45rem !important;
        font-size: 0.68rem !important;
    }
    .list-results-count {
        font-size: 0.7rem !important;
        margin-bottom: 0.5rem !important;
    }
    .list-bulk-toolbar {
        padding: 0.35rem 0.65rem !important;
        margin-bottom: 0.5rem !important;
        font-size: 0.75rem !important;
    }
    .list-bulk-toolbar label {
        font-size: 0.75rem !important;
    }
    .list-bulk-toolbar #selectedCount {
        font-size: 0.7rem !important;
    }
    .list-bulk-toolbar button {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.7rem !important;
    }
    .compact-list {
        gap: 0.4rem !important;
    }
    .compact-row {
        padding: 0.55rem 0.75rem !important;
        gap: 0.5rem !important;
        border-radius: 10px !important;
    }
    .compact-row .row-title {
        font-size: 0.8rem !important;
    }
    .compact-row .row-meta {
        font-size: 0.68rem !important;
        gap: 0.5rem !important;
        margin-top: 0.15rem !important;
    }
    .compact-row .row-stats {
        gap: 0.4rem !important;
    }
    .compact-row .stat-box {
        padding: 0.25rem 0.45rem !important;
        min-width: 48px !important;
    }
    .compact-row .stat-value {
        font-size: 0.7rem !important;
    }
    .compact-row .stat-label {
        font-size: 0.5rem !important;
    }
    .compact-row .row-actions .action-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
    }
    .compact-row .badge-sm {
        font-size: 0.58rem !important;
        padding: 0.1rem 0.35rem !important;
    }
    .compact-row .row-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.9rem !important;
    }

    /* ========== Clients list – compact ========== */
    .cl-page .cl-header {
        margin-bottom: 0.75rem;
    }
    .cl-page .cl-title {
        font-size: 1.1rem !important;
    }
    .cl-page .cl-header-actions .crm-btn {
        padding: 0.4rem 0.65rem !important;
        font-size: 0.75rem !important;
    }
    .cl-page .cl-filters {
        padding: 0.6rem 0.8rem !important;
        margin-bottom: 0.5rem !important;
    }
    .cl-page .cl-filters input,
    .cl-page .cl-filters select {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
    .cl-page .balance-tabs {
        padding: 0.15rem !important;
    }
    .cl-page .balance-tab {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.68rem !important;
    }
    .cl-page .cl-stats-bar {
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    .cl-page .cl-stat-chip {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.65rem !important;
    }
    .cl-page .cl-list {
        gap: 0.3rem !important;
    }
    .cl-page .cl-row {
        padding: 0.5rem 0.65rem !important;
        gap: 0.5rem !important;
    }
    .cl-page .cl-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.8rem !important;
    }
    .cl-page .cl-name {
        font-size: 0.78rem !important;
    }
    .cl-page .cl-sub {
        font-size: 0.62rem !important;
    }
    .cl-page .cl-name-block {
        min-width: 0 !important;
    }
    .cl-page .type-badge {
        font-size: 0.55rem !important;
        padding: 0.08rem 0.35rem !important;
    }
    .cl-page .cl-contacts {
        font-size: 0.65rem !important;
        gap: 0.5rem !important;
    }
    .cl-page .balance-pill {
        padding: 0.2rem 0.5rem !important;
        font-size: 0.68rem !important;
        min-width: 70px !important;
    }
    .cl-page .cl-stats .stat-mini .num {
        font-size: 0.75rem !important;
    }
    .cl-page .cl-stats .stat-mini .lbl {
        font-size: 0.55rem !important;
    }

    /* ========== Invoices page – compact grid & cards ========== */
    .invoice-page .invoice-page-header {
        margin-bottom: 1rem;
    }
    .invoice-page .invoice-page-title {
        font-size: 1.15rem !important;
    }
    .invoice-page .invoice-page-header p {
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }
    .invoice-page .invoice-filter-card.crm-card {
        padding: 0.75rem 1rem;
        margin-bottom: 1rem;
    }
    .invoice-page .invoice-filter-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    .invoice-page .invoice-filter-grid label {
        font-size: 0.65rem !important;
        margin-bottom: 0.25rem !important;
    }
    .invoice-page .invoice-filter-grid input,
    .invoice-page .invoice-filter-grid select {
        padding: 0.5rem 0.6rem !important;
        font-size: 0.8125rem !important;
        min-height: 40px !important;
    }
    .invoice-page .invoice-filter-actions {
        padding-top: 0.75rem !important;
        gap: 0.5rem !important;
    }
    .invoice-page .invoice-quick-filters .crm-btn,
    .invoice-page .invoice-quick-filters a.crm-btn-sm {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.7rem !important;
        min-height: 32px !important;
    }
    .invoice-page .invoice-summary-strip {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    .invoice-page .invoice-summary-card {
        padding: 0.6rem 0.75rem !important;
        border-radius: 10px !important;
    }
    .invoice-page .invoice-summary-label {
        font-size: 0.6rem !important;
        margin-bottom: 0.2rem !important;
    }
    .invoice-page .invoice-summary-value {
        font-size: 1rem !important;
    }
    .invoice-page .invoice-summary-strip .invoice-summary-card:first-child .invoice-summary-value,
    .invoice-page .invoice-summary-strip .invoice-summary-card:nth-child(1) .invoice-summary-value {
        font-size: 1.1rem !important;
    }
    .invoice-page .invoice-sort-row {
        margin-bottom: 0.75rem !important;
    }
    .invoice-page .invoice-sort-row label,
    .invoice-page .invoice-sort-row select {
        font-size: 0.8125rem !important;
    }
    .invoice-page .invoice-sort-row select {
        padding: 0.4rem 0.6rem !important;
    }
    .invoice-page .invoice-bulk-toolbar {
        padding: 0.4rem 0.75rem !important;
        margin-bottom: 0.5rem !important;
        font-size: 0.75rem !important;
    }
    .invoice-page .invoices-compact-list {
        gap: 0.75rem !important;
    }
    /* Invoice row – vertical card on mobile, nothing overlapping, clear and readable */
    .invoice-page .invoice-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0.85rem 1rem !important;
        gap: 0 !important;
        border-radius: 12px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
        border: 1px solid var(--crm-gray-100) !important;
    }
    .invoice-page .invoice-row > div:first-child {
        margin-bottom: 0.5rem;
    }
    .invoice-page .invoice-row .inv-row-main {
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.65rem !important;
        margin-bottom: 0.6rem !important;
    }
    .invoice-page .invoice-row .inv-row-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }
    .invoice-page .invoice-row .inv-row-icon span {
        font-size: 1rem !important;
    }
    .invoice-page .invoice-row .inv-row-details {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.4rem !important;
        min-width: 0 !important;
    }
    .invoice-page .invoice-row .inv-row-num-status {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        line-height: 1.4 !important;
    }
    .invoice-page .invoice-row .inv-row-num-status > span:first-child {
        font-size: 0.8rem !important;
        font-weight: 700 !important;
    }
    .invoice-page .invoice-row .inv-row-num-status > span[style*="font-size: 0.7rem"],
    .invoice-page .invoice-row .inv-row-num-status > span[style*="0.65rem"] {
        font-size: 0.65rem !important;
        padding: 0.15rem 0.4rem !important;
    }
    .invoice-page .invoice-row .inv-row-client-date {
        margin-top: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }
    .invoice-page .invoice-row .inv-row-client-date span,
    .invoice-page .invoice-row .inv-row-client-date a {
        font-size: 0.75rem !important;
    }
    .invoice-page .invoice-row .inv-row-payment-amount {
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        padding: 0.6rem 0 0 !important;
        border-top: 1px solid var(--crm-gray-100) !important;
        gap: 0.5rem !important;
    }
    .invoice-page .invoice-row .inv-row-payment-amount > div:first-child span:last-child {
        font-size: 0.72rem !important;
        font-weight: 600 !important;
    }
    .invoice-page .invoice-row .inv-row-payment-amount > div:last-child {
        text-align: right !important;
        min-width: 0 !important;
    }
    .invoice-page .invoice-row .inv-row-payment-amount > div:last-child > div:first-child {
        font-size: 1rem !important;
        font-weight: 700 !important;
    }
    .invoice-page .invoice-row .inv-row-payment-amount > div:last-child > div:not(:first-child) {
        font-size: 0.68rem !important;
    }
    .invoice-page .invoice-row .inv-row-actions {
        padding-top: 0.5rem !important;
        border-top: 1px solid var(--crm-gray-100) !important;
        justify-content: flex-end !important;
        gap: 0.35rem !important;
    }
    .invoice-page .invoice-row .inv-action-btn,
    .invoice-page .invoice-row .inv-action-btn + a,
    .invoice-page .invoice-row form button[type="submit"] {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 0.8rem !important;
    }

    /* ========== Detail pages (Leads show, Clients show, Tours show, etc.) – compact ========== */
    .container .crm-card h1 {
        font-size: var(--crm-font-h1) !important;
    }
    .container > div[style*="display: flex"][style*="space-between"] {
        margin-bottom: var(--crm-gap-section) !important;
        gap: var(--crm-gap-tight) !important;
    }
    .container > div .crm-btn {
        padding: 0.4rem 0.65rem !important;
        font-size: var(--crm-font-sm) !important;
    }

    /* ========== Settings – compact tabs and cards ========== */
    .settings-container {
        padding-left: 14px;
        padding-right: 14px;
    }
    .settings-header {
        margin-bottom: var(--crm-gap-section) !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .settings-header h1 {
        font-size: var(--crm-font-h1) !important;
    }
    .settings-header h1 span {
        font-size: 1.25rem !important;
    }
    .settings-tabs {
        padding: 0.35rem !important;
        margin-bottom: 1rem !important;
        border-radius: 12px !important;
    }
    .settings-tab {
        padding: 0.5rem 0.75rem !important;
        font-size: var(--crm-font-sm) !important;
    }
    .settings-tab .tab-icon {
        font-size: 0.9rem !important;
    }
    .settings-card {
        margin-bottom: 1rem !important;
        border-radius: 12px !important;
    }
    .settings-card-header {
        padding: 0.75rem 1rem !important;
    }
    .settings-card-header h2 {
        font-size: var(--crm-font-h3) !important;
    }
    .settings-card-body {
        padding: var(--crm-card-pad) !important;
    }
    .site-config-title,
    .settings-card-body h3 {
        font-size: var(--crm-font-h4) !important;
    }

    /* ========== Financial Report (fr-page) – compact filters & table ========== */
    .fr-page {
        margin-top: 1rem !important;
        padding-left: 14px;
        padding-right: 14px;
    }
    .fr-header {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 0.75rem !important;
    }
    .fr-header h1 {
        font-size: var(--crm-font-h1) !important;
    }
    .fr-header-actions .fr-btn {
        padding: 0.35rem 0.6rem !important;
        font-size: var(--crm-font-xs) !important;
    }
    .fr-filters {
        padding: 0.6rem 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    .fr-filters-top {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }
    .fr-filter-group {
        font-size: var(--crm-font-sm) !important;
    }
    .fr-filter-group input,
    .fr-filter-group select {
        padding: 0.4rem 0.5rem !important;
        font-size: var(--crm-font-sm) !important;
        min-height: var(--crm-input-height) !important;
    }
    .fr-toggle-pill {
        font-size: var(--crm-font-xs) !important;
        padding: 0.3rem 0.5rem !important;
    }
    .fr-page .table,
    .fr-page table {
        font-size: var(--crm-font-xs) !important;
    }
    .fr-page th,
    .fr-page td {
        padding: 0.4rem 0.5rem !important;
    }

    /* ========== Reports – compact header, filter bar, summary cards ========== */
    .report-container {
        padding-left: 14px;
        padding-right: 14px;
    }
    .report-header {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 0.75rem !important;
    }
    .report-header h1 {
        font-size: var(--crm-font-h1) !important;
    }
    .report-header .btn {
        padding: 0.4rem 0.65rem !important;
        font-size: var(--crm-font-sm) !important;
    }
    .filter-bar {
        padding: 0.6rem 0.75rem !important;
        margin-bottom: 0.75rem !important;
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }
    .filter-bar .form-group {
        margin-bottom: 0 !important;
    }
    .filter-bar .btn {
        padding: 0.35rem 0.6rem !important;
        font-size: var(--crm-font-xs) !important;
    }
    .summary-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    .summary-card {
        padding: 0.6rem 0.75rem !important;
        border-radius: 10px !important;
    }
    .summary-card .icon {
        font-size: 1.25rem !important;
    }
    .summary-card .value,
    .summary-card .label {
        font-size: var(--crm-font-sm) !important;
    }
    .chart-container {
        padding: 0.5rem 0 !important;
        min-height: 200px;
    }

    /* ========== Internal Analytics (offers create/show) – compact, readable ========== */
    .internal-analytics {
        padding: var(--crm-card-pad) !important;
        margin-bottom: 1rem !important;
    }
    .internal-analytics h3 {
        font-size: var(--crm-font-h3) !important;
        margin-bottom: 0.75rem !important;
    }
    .internal-service-row {
        padding: 0.5rem 0.6rem !important;
    }
    .internal-service-row-head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.35rem !important;
    }
    .internal-service-name {
        width: 100%;
    }
    .internal-service-metrics {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.35rem 0.75rem !important;
        width: 100%;
        font-size: 0.7rem !important;
    }
    .internal-summary-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    .internal-summary-box {
        padding: 0.5rem 0.4rem !important;
    }
    .internal-summary-box > div:first-child {
        font-size: 0.6rem !important;
        margin-bottom: 0.15rem !important;
    }
    .internal-summary-box > div:last-child {
        font-size: 0.9rem !important;
    }
    .internal-agent-card,
    .internal-agent-card-head {
        flex-wrap: wrap;
    }
    .internal-agent-card-head {
        gap: 0.35rem !important;
    }
    .internal-agent-card-head > span:last-child {
        font-size: 1rem !important;
    }
    .internal-agent-item-row {
        padding: 0.35rem 0 !important;
    }
    .internal-agent-item-name {
        font-size: 0.75rem !important;
    }
    .internal-agent-item-formula {
        font-size: 0.7rem !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
    }

    /* ========== Profile, Login, Users manage – use global card/form vars ========== */
    .profile-page .card,
    .profile-page .crm-card {
        padding: var(--crm-card-pad) !important;
    }
    .login-container,
    .auth-box {
        padding: var(--crm-card-pad) !important;
        margin: 1rem auto !important;
    }
    .users-manage .card {
        padding: var(--crm-card-pad) !important;
    }
}

/* ========== Small mobile (max-width: 480px) ========== */
@media (max-width: 480px) {
    :root {
        --crm-font-h1: 1.05rem;
        --crm-font-h2: 0.9875rem;
        --crm-font-h3: 0.9375rem;
        --crm-font-h4: 0.9rem;
        --crm-font-body: 0.8125rem;
        --crm-font-sm: 0.75rem;
        --crm-font-xs: 0.6875rem;
        --crm-font-2xs: 0.625rem;
        --crm-page-pad: 0.75rem;
        --crm-card-pad: 0.75rem;
        --crm-card-pad-sm: 0.5rem;
        --crm-input-height: 40px;
        --crm-btn-height: 40px;
        --crm-btn-height-sm: 34px;
        --crm-gap-section: 0.6rem;
        --crm-gap-card: 0.5rem;
        --crm-gap-tight: 0.35rem;
    }

    .navbar {
        min-height: 48px;
        height: 48px;
    }
    body {
        padding-top: calc(48px + env(safe-area-inset-top, 0px));
        font-size: 0.8125rem;
    }
    .nav-brand img {
        height: 24px;
    }
    .nav-actions .header-switcher-btn {
        padding: 0 6px;
        font-size: 0.7rem;
    }
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    .card, .crm-card {
        padding: 0.75rem 0.875rem;
    }
    .page-header h1,
    .page-header h2,
    h1, .h1 { font-size: 1.05rem !important; }
    h2, .h2 { font-size: 0.9875rem !important; }
    h3, .h3 { font-size: 0.9375rem !important; }
    .btn {
        padding: 7px 12px;
        font-size: 0.75rem;
        min-height: 40px;
    }
    .table th,
    .table td {
        padding: 0.4rem 0.5rem;
        font-size: 0.6875rem;
    }
    .badge {
        font-size: 0.625rem;
        padding: 0.2rem 0.4rem;
    }
    .alert {
        padding: 0.5rem 0.875rem;
        font-size: 0.75rem;
    }
    /* Invoices page – extra compact on small mobile */
    .invoice-page .invoice-filter-grid {
        grid-template-columns: 1fr !important;
    }
    .invoice-page .invoice-summary-strip {
        gap: 0.4rem !important;
    }
    .invoice-page .invoice-summary-card {
        padding: 0.5rem 0.6rem !important;
    }
    .invoice-page .invoice-summary-value {
        font-size: 0.9rem !important;
    }
    .invoice-page .invoice-row {
        padding: 0.5rem 0.6rem !important;
    }
    /* List pages & Clients – extra compact on small mobile */
    .list-page .list-page-header h1,
    .container > div:first-of-type h1 { font-size: 1rem !important; }
    .compact-row {
        padding: 0.45rem 0.6rem !important;
    }
    .compact-row .row-title { font-size: 0.75rem !important; }
    .compact-row .row-meta { font-size: 0.65rem !important; }
    .cl-page .cl-row { padding: 0.4rem 0.55rem !important; }
    .cl-page .cl-name { font-size: 0.72rem !important; }
    .cl-page .cl-sub { font-size: 0.6rem !important; }
    .settings-tab { padding: 0.4rem 0.6rem !important; font-size: 0.7rem !important; }
    .summary-grid { grid-template-columns: 1fr !important; }
    .fr-filters-top { flex-direction: column !important; }

    /* Dashboard – extra compact on small mobile */
    .db-title {
        font-size: 0.9875rem !important;
    }
    .db-kpi {
        padding: 0.45rem 0.6rem;
    }
    .db-kpi-value {
        font-size: 0.875rem !important;
    }
    .db-pending-strip-val {
        font-size: 0.875rem !important;
    }
    .db-hero-amount {
        font-size: 1.1rem !important;
    }
    .db-lead-tile-val {
        font-size: 1rem !important;
    }
}

/* ========== Mobile visual audit – overflow & polish ========== */
@media (max-width: 768px) {
    /* No horizontal scroll */
    html, body {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    /* Long text in cells/cards */
    .table td,
    .card .text-truncate,
    .list-group-item {
        word-break: break-word;
        overflow-wrap: break-word;
    }
    /* Consistent focus for accessibility */
    .btn:focus-visible,
    .form-group input:focus-visible,
    .form-group select:focus-visible,
    a:focus-visible {
        outline: 2px solid var(--primary, #2563eb);
        outline-offset: 2px;
    }
    /* Flash messages compact */
    .alert-dismissible,
    .flash-message {
        font-size: 0.8125rem;
        padding: 0.6rem 1rem;
    }
}

/* Backdrop: BELOW navbar so menu stays clickable; backdrop closes menu when tapping content area */
@media (max-width: 768px) {
    #mobile-drawer-backdrop {
        padding-top: env(safe-area-inset-top, 0);
        z-index: 1000 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    /* When drawer is open: navbar (and menu inside it) above backdrop so menu links work */
    body.drawer-open .navbar {
        z-index: 1001 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* Main content – no blur on mobile */
    .container {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    body.drawer-open .container {
        backdrop-filter: none !important;
    }
}

/* Search popup: full-screen on mobile */
@media (max-width: 768px) {
    .search-popup-container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 16px 16px 0 0;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 85vh;
    }
    .search-popup-overlay {
        align-items: flex-end;
    }
}

/* Floating chat button: above safe area on mobile */
@media (max-width: 768px) {
    #sc-float-wrap {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        right: calc(16px + env(safe-area-inset-right, 0px));
    }
}

/* ========== Targeted mobile polish: header, FinancialReport, invoice detail ========== */
@media (max-width: 768px) {
    *, *::before, *::after {
        box-sizing: border-box;
    }

    .nav-actions > div[style*="display: flex"] {
        flex-wrap: nowrap !important;
        gap: 0.25rem !important;
    }

    .switcher-dropdown {
        max-width: calc(100vw - 24px) !important;
    }

    .notif-bell-wrap #notif-dropdown {
        position: fixed !important;
        top: calc(54px + env(safe-area-inset-top, 0px)) !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-height: min(70vh, 520px) !important;
    }

    .flatpickr-calendar {
        max-width: calc(100vw - 24px) !important;
    }

    .flatpickr-days,
    .dayContainer {
        max-width: 100% !important;
    }

    /* FinancialReport: filters become a stable compact grid; table stays scrollable. */
    .fr-page {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-top: 0.75rem !important;
    }

    .fr-header {
        padding: 14px 16px !important;
        border-radius: 12px !important;
        margin-bottom: 0.75rem !important;
    }

    .fr-header h2 {
        font-size: 1.05rem !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere;
    }

    .fr-header p {
        font-size: 0.72rem !important;
    }

    .fr-header-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    .fr-header-actions .fr-btn {
        width: 100% !important;
        min-height: 38px !important;
        justify-content: center !important;
        white-space: normal !important;
        text-align: center !important;
        padding: 0.45rem 0.55rem !important;
    }

    .fr-filters {
        padding: 0.75rem !important;
        border-radius: 12px !important;
    }

    .fr-filters-top {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.6rem !important;
        align-items: end !important;
    }

    .fr-filters-top .fr-filter-group:first-child {
        grid-column: 1 / -1 !important;
    }

    .fr-filter-group {
        min-width: 0 !important;
        width: 100% !important;
    }

    .fr-filter-group input,
    .fr-filter-group select,
    .fr-filters input[type="date"],
    .fr-filters input[type="text"],
    .fr-filters select {
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    .fr-filter-group:first-child > div {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        gap: 0.4rem !important;
        width: 100% !important;
    }

    .fr-date-sep {
        align-self: center !important;
        padding-bottom: 0 !important;
    }

    .fr-filters-bottom,
    .fr-period-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none;
        padding-bottom: 0.15rem !important;
    }

    .fr-filters-bottom::-webkit-scrollbar,
    .fr-period-chips::-webkit-scrollbar {
        display: none;
    }

    .fr-toggle-pill,
    .fr-period-btn,
    .fr-clear-btn {
        flex: 0 0 auto !important;
        min-height: 36px !important;
    }

    .fr-summary-main,
    .fr-currency-block {
        padding: 0.75rem !important;
        border-radius: 12px !important;
    }

    .fr-summary-main .fr-main-row,
    .fr-currency-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    .fr-main-card {
        padding: 0.6rem 0.5rem !important;
        min-width: 0 !important;
    }

    .fr-main-card .fr-card-label,
    .fr-currency-block .fr-mini {
        font-size: 0.62rem !important;
        letter-spacing: 0 !important;
    }

    .fr-main-card .fr-card-val,
    .fr-currency-block .fr-mini-val {
        font-size: 0.95rem !important;
        overflow-wrap: anywhere !important;
    }

    .fr-table-actions {
        justify-content: stretch !important;
    }

    .fr-table-actions .fr-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .fr-table-wrap {
        max-height: calc(100vh - 116px) !important;
        min-height: 55vh !important;
        margin-left: -10px !important;
        margin-right: -10px !important;
        border-radius: 10px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .fr-table th {
        padding: 4px 6px !important;
        font-size: 0.58rem !important;
        letter-spacing: 0 !important;
    }

    .fr-table td,
    .fr-table td.num:not(.tc-info) {
        padding: 4px 6px !important;
        font-size: 0.68rem !important;
        letter-spacing: 0 !important;
    }

    #fr-month-bar-sticky {
        font-size: 0.72rem !important;
        min-height: 24px !important;
        padding: 4px 8px !important;
    }

    .fr-table thead tr:nth-child(1) th { top: 24px !important; }
    .fr-table thead tr:nth-child(2) th { top: 52px !important; }

    /* Invoice detail: make inline grids/forms and modals fit the viewport. */
    .invoice-show-page {
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .invoice-show-page > div:first-child {
        margin-bottom: 0.75rem !important;
    }

    .invoice-show-page .crm-card {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
        padding: 0.875rem !important;
        border-radius: 12px !important;
    }

    .invoice-show-page .invoice-hero-card > div:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .invoice-show-page .invoice-hero-card h1 {
        font-size: 1.2rem !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }

    .invoice-show-page .invoice-hero-card h1 span {
        display: inline !important;
        overflow-wrap: anywhere !important;
    }

    .invoice-show-page .invoice-hero-card > div:first-child > div:last-child {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    .invoice-show-page .invoice-hero-card .crm-btn,
    .invoice-show-page .invoice-hero-card form,
    .invoice-show-page .invoice-hero-card form .crm-btn {
        width: 100% !important;
    }

    .invoice-show-page .invoice-hero-card .crm-btn,
    .invoice-show-page .invoice-hero-card form .crm-btn {
        justify-content: center !important;
        min-height: 40px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    #payRow1,
    #editAmountRow,
    .invoice-show-page [style*="grid-template-columns:1fr 1fr"],
    .invoice-show-page [style*="grid-template-columns:1fr 2fr"] {
        grid-template-columns: 1fr !important;
    }

    .invoice-show-page input,
    .invoice-show-page select,
    .invoice-show-page textarea {
        max-width: 100% !important;
        font-size: 16px !important;
    }

    .invoice-show-page [style*="overflow-x: auto"] {
        margin-left: -0.875rem !important;
        margin-right: -0.875rem !important;
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .invoice-show-page [style*="overflow-x: auto"] > table {
        min-width: 920px !important;
    }

    #receiptGalleryModal,
    #receiptLightbox,
    #editPaymentModal,
    #applyBalanceModal,
    #refundPaymentModal,
    #recordPaymentModal,
    #deletePaymentModal {
        padding: max(0.6rem, env(safe-area-inset-top, 0px)) 0.6rem max(0.6rem, env(safe-area-inset-bottom, 0px)) !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    #receiptGalleryModal > div,
    #receiptLightbox > div,
    #editPaymentModal > div,
    #applyBalanceModal > div,
    #refundPaymentModal > div,
    #recordPaymentModal > div,
    #deletePaymentModal > div,
    #correctionsModal,
    .sem-modal {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 12px !important;
    }

    #editPaymentModal > div,
    #applyBalanceModal > div,
    #refundPaymentModal > div {
        padding: 1rem !important;
    }

    #correctionsModal {
        top: 10px !important;
        bottom: 10px !important;
        margin: auto !important;
    }

    #correctionsModal > div {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #correctionsModal [style*="display:flex"],
    #correctionsModal [style*="display: flex"] {
        min-width: 0 !important;
    }

    .invoice-floating-lead {
        left: 12px !important;
        bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
        max-width: calc(100vw - 24px) !important;
        padding: 0.55rem 0.8rem !important;
        font-size: 0.78rem !important;
        border-radius: 999px !important;
    }
}

@media (max-width: 480px) {
    .fr-header-actions,
    .fr-filters-top,
    .fr-summary-main .fr-main-row,
    .fr-currency-grid,
    .invoice-show-page .invoice-hero-card > div:first-child > div:last-child {
        grid-template-columns: 1fr !important;
    }

    .fr-filter-group:first-child > div {
        grid-template-columns: 1fr !important;
    }

    .fr-date-sep {
        display: none !important;
    }

    .invoice-show-page .crm-card {
        padding: 0.75rem !important;
    }

    .invoice-show-page [style*="overflow-x: auto"] > table {
        min-width: 820px !important;
    }

    #receiptLightbox a,
    #receiptLightbox button {
        font-size: 0.72rem !important;
        padding: 0.35rem 0.55rem !important;
    }
}