/**
 * LandlordPro - Mobile Responsive Stylesheet
 * ============================================
 * SAFE: Every rule is inside @media queries.
 * Desktop styles are NEVER affected by this file.
 * 
 * Include AFTER styles.css and modals.css:
 *   <link rel="stylesheet" href="./00-CORE/css/mobile.css">
 *
 * Covers:
 *   1. Sidebar & navigation
 *   2. Top bar & breadcrumbs
 *   3. Summary cards & stat bars
 *   4. Filter bars & toolbars
 *   5. Tables (horizontal scroll)
 *   6. Modals, wizards, confirm dialogs
 *   7. Property cards (Monopoly flip cards)
 *   8. Forms & form rows
 *   9. Rent roll specifics
 *  10. Floating elements (FAB, tooltips)
 *  11. Utility overrides
 */


/* ==========================================================
   TABLET BREAKPOINT (769px - 1024px)
   Light touch: stack grids earlier, shrink spacing
   ========================================================== */
@media (max-width: 1024px) {

    /* Summary cards: 2-col on tablet */
    .summary-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        flex-wrap: wrap !important;
    }

    /* Property grid: 2-col on tablet */
    .properties-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }

    /* Reduce content padding slightly */
    .dashboard-content,
    .content-wrapper {
        padding: 16px !important;
    }
}


/* ==========================================================
   MOBILE BREAKPOINT (max-width: 768px)
   Primary mobile layout — all four pain points addressed
   ========================================================== */
@media (max-width: 768px) {

    /* -------------------------------------------------------
       1. SIDEBAR & NAVIGATION
       Sidebar slides in from left; overlay dims background.
       Base transform/transition already in styles.css.
       These rules enhance touch targets and spacing.
       ------------------------------------------------------- */

    .sidebar {
        width: 280px;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
        /* iOS safe area — clears bottom browser chrome */
        padding-bottom: env(safe-area-inset-bottom, 70px) !important;
    }

    .nav-item {
        padding: 12px 16px;
        font-size: 1rem;
        min-height: 44px; /* Apple HIG touch target */
    }

    .sidebar-footer {
        padding: 12px 16px;
    }

    .btn-logout {
        min-height: 44px;
        font-size: 1rem;
    }

    /* Hamburger suppressed — topbar LandlordPro logo handles sidebar */
    .mobile-menu-toggle,
    .mobile-menu-btn {
        display: none !important;
    }

    /* -------------------------------------------------------
       2. TOP BAR & BREADCRUMBS
       Compact header, smaller breadcrumb, stacked actions
       ------------------------------------------------------- */

    .top-bar,
    header.top-bar {
        height: auto;
        min-height: 56px;
        padding: 8px 12px !important;
        flex-wrap: wrap;
        gap: 8px;
        /* Disable sticky on mobile — global topbar always provides context */
        position: static !important;
    }

    .global-topbar {
        height: auto;
        min-height: 56px;
        padding: 8px 12px !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    .breadcrumb {
        font-size: 1rem;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .top-bar-actions {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 6px !important;
        align-items: center !important;
    }

    /* View toggles (Pro/Focus, Expand/Collapse) — shrink to fit */
    .view-toggle {
        gap: 0 !important;
    }

    .view-toggle-btn {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
    }

    .credit-badge {
        font-size: 0.75rem;
        padding: 4px 8px;
    }

    /* Month navigator arrows */
    .month-nav-btn,
    [class*="month-nav"] button {
        min-width: 44px;
        min-height: 44px;
    }

    /* -------------------------------------------------------
       3. SUMMARY CARDS & STAT BARS
       Stack vertically; override inline flex/min-width
       ------------------------------------------------------- */

    .summary-cards {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .summary-card {
        min-width: 0 !important;
        width: 100% !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 12px !important;
    }

    /* Let h3 labels wrap and use full card width on mobile */
    .summary-card h3 {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    /* Rent progress card — kill the 400px min-width */
    .rent-progress-card {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        order: -1; /* Progress bar first on mobile */
    }

    .stat-card-watermark {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    /* Rent progress labels — wrap on mobile */
    .rent-progress-labels {
        flex-wrap: wrap !important;
        gap: 4px 12px !important;
    }

    .card-value {
        font-size: 1.25rem !important;
    }

    /* -------------------------------------------------------
       4. FILTER BARS & TOOLBARS
       Stack filters vertically; full-width selects
       ------------------------------------------------------- */

    #filterBar,
    [id*="filterBar"],
    .filter-bar,
    .carousel-unified-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 12px !important;
    }

    /* Filter form groups inside filter bars */
    #filterBar .form-group,
    .filter-bar .form-group {
        min-width: 0 !important;
        width: 100% !important;
    }

    #filterBar .form-select,
    .filter-bar .form-select,
    #filterBar select,
    .filter-bar select {
        width: 100% !important;
    }

    /* Filter action buttons row */
    #filterBar button,
    .filter-bar button {
        margin-top: 0 !important;
        width: 100%;
    }

    /* Bulk action menus — position for mobile */
    [class*="bulk-action"] {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        top: auto !important;
        transform: none !important;
        width: auto !important;
        z-index: 10001 !important;
        border-radius: 12px !important;
    }

    /* Month picker popup */
    [id*="monthPicker"],
    .month-picker-popup {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
    }

    /* Delinquency toggle button */
    #delinquencyToggleBtn {
        width: 100% !important;
        margin-top: 0 !important;
        justify-content: center !important;
    }

    /* -------------------------------------------------------
       5. TABLES — HORIZONTAL SCROLL
       Wrap every table in a scrollable container.
       For tables that can't be wrapped, force scroll on parent.
       ------------------------------------------------------- */

    /* Activity table wrapper */
    .activity-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .activity-table table {
        min-width: 600px; /* Ensures table doesn't crush columns */
    }

    /* Generic table overflow protection */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    thead, tbody, tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    /* Restore table display on the table element itself if it's inside a scroll wrapper */
    .activity-table table,
    .table-scroll-wrapper table {
        display: table;
    }

    th, td {
        padding: 10px 8px;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    /* Allow long text cells to wrap */
    td:first-child,
    td:nth-child(2) {
        white-space: normal;
        word-break: break-word;
    }

    /* -------------------------------------------------------
       6. MODALS, WIZARDS, CONFIRM DIALOGS
       Rule #13 canonical pattern: .modal is scroll container,
       .modal-content has overflow-y: visible (no cap), sticky header.
       ------------------------------------------------------- */

    /* The .modal overlay becomes a full-screen flex column scroll container */
    .modal.active {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }

    /* Content fills width, no max-height — let the parent scroll */
    .modal.active > .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        max-height: none !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        border-radius: 0 !important;
        min-height: 100% !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    /* Wide modals also go full-width */
    .modal-content.wide {
        max-width: 100% !important;
    }

    /* Header sticks — close button always reachable */
    .modal.active > .modal-content > .modal-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: white !important;
        border-bottom: 1px solid #e5e7eb !important;
        padding: 12px 16px !important;
    }

    .modal-header h2 {
        font-size: 1.1rem !important;
    }

    /* Body padding — 100px = home indicator clearance + breathing room */
    .modal.active > .modal-content > .modal-body {
        padding: 16px !important;
        padding-bottom: 100px !important;
        overflow-x: hidden !important;
    }

    .modal-footer {
        padding: 12px 16px !important;
        position: sticky !important;
        bottom: 0 !important;
        background: white !important;
        z-index: 10 !important;
        flex-wrap: wrap !important;
        border-top: 1px solid #e5e7eb !important;
    }

    .modal-footer .btn,
    .modal-footer button {
        flex: 1 1 auto;
        min-width: 100px;
    }

    /* All inputs fill their column, no overflow, no iOS zoom */
    .modal-body input:not([type="checkbox"]):not([type="radio"]),
    .modal-body select,
    .modal-body textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        min-height: 44px !important;
        font-size: 16px !important;
    }

    /* Grid cells get a consistent gap */
    .modal-body div[style*="grid-template-columns"] {
        gap: 12px !important;
    }

    /* Stack ALL inline multi-col grids inside modals to single column —
       covers .modal-body, .modal, .vendor-modal-box, .schedule-modal-box, .assign-modal-box
       Also handles both "columns: 1fr" (with space) and "columns:1fr" (no space) variants */
    .modal-body [style*="grid-template-columns: 1fr 1fr"],
    .modal-body [style*="grid-template-columns:1fr 1fr"],
    .modal-body [style*="grid-template-columns: 2fr 1fr"],
    .modal-body [style*="grid-template-columns:2fr 1fr"],
    .modal-body [style*="grid-template-columns: 1fr 2fr"],
    .modal-body [style*="grid-template-columns: repeat(2, 1fr)"],
    .modal-body [style*="grid-template-columns: 1fr 1fr 1fr"],
    .modal-body [style*="grid-template-columns:1fr 1fr 1fr"],
    .modal-body [style*="grid-template-columns: repeat(3, 1fr)"],
    .modal [style*="grid-template-columns: 1fr 1fr"],
    .modal [style*="grid-template-columns:1fr 1fr"],
    .modal [style*="grid-template-columns: 1fr 1fr 1fr"],
    .modal [style*="grid-template-columns:1fr 1fr 1fr"],
    .modal [style*="grid-template-columns: repeat(3, 1fr)"],
    [class*="modal-box"] [style*="grid-template-columns: 1fr 1fr"],
    [class*="modal-box"] [style*="grid-template-columns:1fr 1fr"],
    [class*="modal-box"] [style*="grid-template-columns: 1fr 1fr 1fr"],
    [class*="modal-box"] [style*="grid-template-columns:1fr 1fr 1fr"],
    [class*="modal-box"] [style*="grid-template-columns: 2fr 1fr"],
    [class*="modal-box"] [style*="grid-template-columns:2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Modal grids — stack on mobile */
    .modal-grid-2 {
        grid-template-columns: 1fr !important;
    }

    /* Form rows inside modals — stack vertically */
    .form-row,
    [class*="form-grid"],
    [class*="form-row"],
    .modal-body .form-row {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Wizard modals */
    .wizard-container,
    .wizard-content,
    [class*="wizard-container"] {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Wizard step buttons */
    .wizard-footer,
    .wizard-nav,
    [class*="wizard-footer"],
    [class*="wizard-nav"] {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Confirm modal — keep it compact (small message + 2 buttons, no need to fill screen) */
    .confirm-modal.active {
        padding: 16px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .confirm-modal.active > .modal-content {
        max-width: calc(100vw - 32px) !important;
        min-height: auto !important;
        border-radius: 12px !important;
    }
    /* Confirm-content inner card: reduce padding + stack buttons so long labels (e.g.
       "Permanently Delete") don't wrap to 2 lines on narrow screens */
    .confirm-content {
        padding: 20px !important;
    }
    .confirm-actions {
        flex-direction: column !important;
    }
    .confirm-actions button {
        width: 100% !important;
    }

    /* Modal overlay */
    .modal-overlay {
        padding: 8px;
    }

    .modal-overlay .modal-content {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* -------------------------------------------------------
       7. PROPERTY CARDS (MONOPOLY FLIP CARDS)
       Full-width, no aspect-ratio lock on mobile
       ------------------------------------------------------- */

    .properties-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        row-gap: 24px !important;
    }

    .property-card-container {
        max-width: 100% !important;
    }

    .property-card-flipper {
        aspect-ratio: auto !important;
        height: auto !important;
    }

    /* Front and back of card — release from absolute positioning on mobile */
    .property-card-front {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Back stays absolute (needed for flip) but auto-height */
    .property-card-back {
        height: auto !important;
    }

    .property-card.monopoly-style {
        aspect-ratio: auto !important;
    }

    .property-card.monopoly-style .title-banner {
        padding: 16px 12px !important;
    }

    .property-card.monopoly-style .property-name {
        font-size: 1.1rem !important;
    }

    /* Units preview grid — single column on mobile */
    .property-card.monopoly-style .units-preview-grid {
        grid-template-columns: 1fr !important;
    }

    /* Property sections / buttons */
    .property-sections,
    .property-buttons-section {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* -------------------------------------------------------
       8. FORMS & INPUT LAYOUT
       Full-width inputs, stacked form groups
       ------------------------------------------------------- */

    /* Ensure all inputs are comfortably tappable — exclude checkboxes/radios (Rule #24) */
    input:not([type="checkbox"]):not([type="radio"]), select, textarea {
        min-height: 44px;
    }

    .form-group {
        width: 100% !important;
    }

    .form-input,
    .form-select,
    .form-textarea,
    .form-control {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Inline styles with explicit widths — override on mobile (exclude checkboxes/radios) */
    input[style*="width"]:not([type="checkbox"]):not([type="radio"]),
    select[style*="width"],
    textarea[style*="width"] {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Checkbox and radio rows — keep side by side */
    .form-check,
    .form-radio {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* -------------------------------------------------------
       9. RENT ROLL SPECIFICS
       Card-based rent roll entries, stacked layout
       ------------------------------------------------------- */

    /* Rent roll cards — full width */
    .rent-card,
    .rent-roll-card,
    [class*="rent-card"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Unit carousel — fill screen width */
    .carousel-container,
    [class*="carousel-container"] {
        width: 100% !important;
        padding: 0 !important;
    }

    .carousel-nav {
        min-width: 36px;
        min-height: 44px;
    }

    /* Expanded card view */
    .expanded-card-overlay,
    [class*="expanded-card"] {
        padding: 8px !important;
    }

    .expanded-card-content {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Payment entries inside cards */
    .payment-row,
    .payment-entry,
    [class*="payment-row"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* -------------------------------------------------------
       10. FLOATING ELEMENTS (FAB, TOOLTIPS)
       Position FAB so it doesn't overlap sidebar overlay
       ------------------------------------------------------- */

    /* Wizard FAB — move above bottom nav if any */
    .wizard-fab-container,
    [class*="wizard-fab"] {
        bottom: 16px !important;
        right: 16px !important;
    }

    .wizard-fab-button {
        width: 56px !important;
        height: 56px !important;
    }

    /* Wizard FAB menu — position above button, full width */
    .wizard-fab-menu {
        right: 0 !important;
        left: auto !important;
        width: calc(100vw - 32px) !important;
        max-width: 320px !important;
    }

    /* Tooltips — ensure they don't overflow screen */
    .tooltip-content,
    .tenant-contact-tooltip,
    .rent-stats-tooltip,
    [class*="tooltip"] {
        max-width: calc(100vw - 32px) !important;
        white-space: normal !important;
    }

    /* Fixed dropdown menus — ensure visible on mobile */
    [style*="position: fixed"][style*="z-index: 9999"] {
        max-width: calc(100vw - 24px) !important;
    }

    /* -------------------------------------------------------
       11. UTILITY & GENERAL OVERRIDES
       ------------------------------------------------------- */

    /* Content wrapper max-width */
    .content-wrapper {
        padding: 12px !important;
        max-width: 100% !important;
    }

    .dashboard-content {
        padding: 12px !important;
    }

    /* Section headers — stack if needed */
    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Buttons — full width on very narrow screens handled at 480px */
    .btn, .btn-primary, .btn-secondary, .btn-success {
        min-height: 44px;
    }

    /* Quick actions on dashboard */
    .dash-quick-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .dash-quick-actions .btn,
    .dash-quick-actions button {
        flex: 1 1 calc(50% - 4px);
        min-width: 120px;
    }

    /* Empty states — less padding */
    .empty-state {
        padding: 32px 16px;
    }

    .empty-icon {
        font-size: 3rem;
    }

    /* Alerts */
    .alert {
        font-size: 0.85rem;
        padding: 10px 12px;
    }

    /* -------------------------------------------------------
       SIDEBAR NAV — no scroll on mobile
       Compress item padding so all items fit without scrolling.
       Eliminates vertical scroll conflict with swipe-to-close.
       ------------------------------------------------------- */
    .nav-menu {
        overflow-y: visible !important;
        overflow: visible !important;
        padding: 8px !important;
    }

    .nav-item {
        padding: 7px 10px !important;
        margin-bottom: 2px !important;
        font-size: 0.9rem !important;
        min-height: 0 !important;
    }

    .nav-item .icon {
        font-size: 1.1rem !important;
    }

    .sidebar .logo {
        padding: 10px 12px !important;
    }

    .sidebar .logo img {
        max-height: 48px !important;
    }

    .sidebar-footer {
        padding: 8px 12px !important;
    }

    /* Prevent horizontal page scroll — nuclear option */
    .app-container,
    .main-content {
        overflow-x: hidden;
    }

    /* Hide elements marked desktop-only */
    .desktop-only,
    .hide-mobile {
        display: none !important;
    }

    /* Show elements marked mobile-only */
    .mobile-only,
    .show-mobile {
        display: block !important;
    }

    /* Search bar in topbar */
    .topbar-search {
        width: 100% !important;
        max-width: 100% !important;
    }

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

    /* Topbar right section */
    .topbar-right {
        gap: 8px !important;
    }

    /* Glossy page header */
    .glossy-page-header {
        padding: 16px !important;
    }

    .glossy-page-header h1,
    .glossy-page-header .page-title {
        font-size: 1.25rem !important;
    }

    /* -------------------------------------------------------
       12. DASHBOARD WIDGET GRID
       The JS-injected dw-grid only sets 6x/8x widgets to
       full-width at 640px. Shapes like 4x1, 3x2, 2x2, 2x1
       try to span 4–8 columns in a 2-col grid → blows off
       screen to the right. Force all non-half widgets full-
       width. !important overrides the JS-injected <style>.
       ------------------------------------------------------- */

    /* Ensure grid itself can't overflow */
    .dw-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: auto !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Every widget that isn't a "half" tile goes full-width */
    .dw-widget[data-shape="4x1"],
    .dw-widget[data-shape="3x1"],
    .dw-widget[data-shape="2x1"],
    .dw-widget[data-shape="1x2"],
    .dw-widget[data-shape="2x2"],
    .dw-widget[data-shape="3x2"],
    .dw-widget[data-shape="4x2"],
    .dw-widget[data-shape="6x1"],
    .dw-widget[data-shape="6x2"],
    .dw-widget[data-shape="8x1"] {
        grid-column: 1 / -1 !important;
    }

    /* Half tiles stay 2-per-row */
    .dw-widget[data-shape="half"] {
        grid-column: span 1 !important;
    }

    /* Widget body min-height — let content set height on mobile */
    .dw-widget-body {
        min-height: 0 !important;
        height: auto !important;
    }

    /* Metrics row inside the metrics widget: 2-col not 1-col */
    .metrics-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Warnings timeline items — remove fixed widths */
    .dw-scroll {
        overflow-x: hidden !important;
        width: 100% !important;
    }
}


/* ==========================================================
   NARROW MOBILE (max-width: 480px)
   Extra-small screens: further compress
   ========================================================== */
@media (max-width: 480px) {

    /* Buttons go full-width */
    .btn, .btn-primary, .btn-secondary, .btn-success, .btn-warning, .btn-error {
        width: 100%;
        justify-content: center;
    }

    /* Exception: inline action buttons inside flex header rows (e.g. "Add Policy" next to a label)
       must NOT expand full-width — use [style*="space-between"] to target those specific rows */
    .modal-body [style*="space-between"] button,
    .modal-body [style*="space-between"] .btn,
    .modal-body [style*="space-between"] .btn-primary,
    .modal-body [style*="space-between"] .btn-secondary,
    .modal-body [style*="space-between"] .btn-success {
        width: auto !important;
        flex-shrink: 0 !important;
    }

    /* Fee/section header label clusters: give left div flex:1 so it doesn't get squeezed,
       and reduce bold span font-size so long labels like "Registration & Tags" don't wrap */
    .fee-section [style*="space-between"] > div:first-child {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }
    .fee-section [style*="space-between"] > div:first-child > span[style*="font-weight"] {
        font-size: 0.82rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Modal footer buttons stack */
    .modal-footer {
        flex-direction: column !important;
    }

    .modal-footer .btn,
    .modal-footer button {
        width: 100%;
    }

    /* Top bar — hamburger + title only */
    .breadcrumb {
        font-size: 0.9rem;
    }

    /* View toggles — smaller */
    .view-toggle-btn {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
    }

    /* Property card name */
    .property-card.monopoly-style .property-name {
        font-size: 0.95rem !important;
    }

    /* Table cells tighter */
    th, td {
        padding: 8px 6px;
        font-size: 0.75rem;
    }

    /* Rent progress labels stack fully */
    .rent-progress-labels {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .progress-label {
        flex-direction: row !important;
        justify-content: space-between !important;
    }

    /* Summary card icon — smaller */
    .card-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    /* Sidebar wider on very small screens for easier tapping */
    .sidebar {
        width: 85vw !important;
        max-width: 300px;
    }
}


/* ==========================================================
   LANDSCAPE MOBILE (short + wide)
   Phones held sideways are ~844-932px wide -- they MISS the
   max-width: 768px block entirely. This query catches them.
   Condition: short viewport (phone) + landscape orientation.
   ========================================================== */
@media (max-height: 500px) and (orientation: landscape) {

    /* ---- Sidebar: same slide-in treatment as portrait ---- */
    .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100% !important;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        width: 240px !important;
    }

    .sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    .mobile-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }

    .mobile-overlay.active {
        display: block !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    /* Topbar logo button stays visible and tappable */
    .topbar-hamburger {
        display: flex !important;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    /* In-page hamburger suppressed — logo handles sidebar */
    .mobile-menu-toggle,
    .mobile-menu-btn {
        display: none !important;
    }

    /* ---- Content padding ---- */
    .content-wrapper,
    .dashboard-content {
        padding: 8px 12px !important;
        max-width: 100% !important;
    }

    /* ---- Top bar ---- */
    .top-bar,
    header.top-bar {
        height: auto !important;
        min-height: 48px !important;
        padding: 4px 12px !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 6px;
        /* Disable sticky on mobile — global topbar always provides context */
        position: static !important;
    }

    .global-topbar {
        height: auto !important;
        min-height: 48px !important;
        padding: 4px 12px !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 6px;
    }

    /* Topbar logo button stays left-most */
    .topbar-hamburger {
        flex-shrink: 0 !important;
        order: -1 !important;
    }

    /* Right-side actions don't push to far right */
    .top-bar-actions,
    .topbar-right {
        flex-shrink: 0 !important;
        gap: 6px !important;
    }

    /* Title/breadcrumb fills the middle */
    .breadcrumb,
    .top-bar-title,
    .topbar-center {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    /* ---- Summary cards: 2-col in landscape ---- */
    .summary-cards {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .summary-card,
    .stat-card-watermark {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    /* ---- Dashboard widget grid ---- */
    .dw-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: auto !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* All non-half widgets go full width */
    .dw-widget[data-shape="4x1"],
    .dw-widget[data-shape="3x1"],
    .dw-widget[data-shape="2x1"],
    .dw-widget[data-shape="1x2"],
    .dw-widget[data-shape="2x2"],
    .dw-widget[data-shape="3x2"],
    .dw-widget[data-shape="4x2"],
    .dw-widget[data-shape="6x1"],
    .dw-widget[data-shape="6x2"],
    .dw-widget[data-shape="8x1"] {
        grid-column: 1 / -1 !important;
    }

    .dw-widget[data-shape="half"] {
        grid-column: span 1 !important;
    }

    .dw-widget-body {
        min-height: 0 !important;
        height: auto !important;
    }

    /* Metrics row inside metrics widget */
    .metrics-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Mobile widget collapse headers */
    .dw-mobile-header {
        display: flex !important;
    }

    /* ---- Modals: compact in landscape (Rule 13 applies here too) ---- */
    .modal.active {
        padding: 0 !important;
    }

    .modal.active > .modal-content {
        max-height: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    .modal.active > .modal-content > .modal-header {
        padding: 8px 12px !important;
    }

    .modal-header h2 {
        font-size: 1rem !important;
    }

    .modal.active > .modal-content > .modal-body {
        padding: 8px 12px !important;
        padding-bottom: 60px !important;
        overflow-x: hidden !important;
    }

    .modal-footer {
        padding: 8px 12px !important;
        gap: 6px;
    }

    /* ---- Filter bars ---- */
    #filterBar,
    .filter-bar,
    .carousel-unified-filter-bar {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    /* ---- Tables ---- */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- Property grid ---- */
    .properties-grid,
    .glossy-properties-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 0 !important;
        gap: 12px !important;
    }

    /* ---- Overflow protection ---- */
    .app-container,
    .main-content {
        overflow-x: hidden;
    }

    .dw-scroll {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* ---- Utility ---- */
    .desktop-only,
    .hide-mobile {
        display: none !important;
    }

    .mobile-only,
    .show-mobile {
        display: block !important;
    }

    .glossy-page-header {
        padding: 8px 12px !important;
    }

    .glossy-page-header h1,
    .glossy-page-header .page-title {
        font-size: 1.1rem !important;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 6px;
    }

    .btn, .btn-primary, .btn-secondary, .btn-success {
        min-height: 40px;
    }

    /* Sidebar nav — landscape is too short, must scroll */
    .nav-menu {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 4px 8px !important;
        -webkit-overflow-scrolling: touch;
    }

    .nav-item {
        padding: 5px 8px !important;
        margin-bottom: 1px !important;
        font-size: 0.82rem !important;
        min-height: 0 !important;
    }

    .nav-item .icon {
        font-size: 1rem !important;
    }

    .sidebar .logo {
        padding: 6px 10px !important;
    }

    .sidebar .logo img {
        max-height: 36px !important;
    }

    .sidebar-footer {
        padding: 4px 10px !important;
    }
}


/* ==========================================================
   PAGE-SPECIFIC MOBILE FIXES
   Added 2026-03-04 — retrofitting all app pages to mobile.
   Each section targets a specific page's unique layout issues.
   The base mobile.css rules (sidebar, modals, forms, tables)
   handle the shared infrastructure once the link is added.
   ========================================================== */


/* ──────────────────────────────────────────────────────────
   TENANTS PAGE
   Main issue: .units-grid minmax(380px,1fr) overflows 390px.
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Unit pod grid: override the 380px minimum — goes 1-col */
    .units-grid {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
        gap: 12px !important;
    }

    /* Property header: stack address+icon left, stats right → column */
    .property-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 16px !important;
    }

    /* Property stats: allow wrapping on narrow screens */
    .property-stats {
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .property-stat {
        flex: 1 1 auto !important;
        min-width: 60px !important;
    }

    /* Tenant slider: remove forced min-height on mobile */
    .tenant-slider {
        min-height: 0 !important;
    }
}


/* ──────────────────────────────────────────────────────────
   REPAIRS PAGE
   Issues: tabs overflow, filters need stacking, table needs
   scroll container, detail panel width, vendor header layout.
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Root fix: .main-content is a flex column container, so
       .repairs-container as a flex item sizes to its content.
       Force it to fill the viewport width instead. */
    .repairs-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Tabs: horizontal scroll — 4 tabs won't fit on 390px */
    .repairs-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        padding-bottom: 2px !important;
        /* Hide scrollbar visually but keep functional */
        scrollbar-width: none !important;
    }
    .repairs-tabs::-webkit-scrollbar { display: none !important; }

    .repairs-tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Stats bar: wrap chips on small screens */
    .repairs-stats {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .repairs-stat {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        text-align: center !important;
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }

    /* Filters: stack vertically, full-width selects */
    .repairs-filters {
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .repairs-filters select {
        min-width: 0 !important;
        width: 100% !important;
        font-size: 16px !important; /* iOS zoom prevention */
        min-height: 44px !important;
    }

    /* Tickets table: put scroll on container, preserve real table layout */
    #ticketsContainer {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Override the global "table { display: block }" for repairs table —
       the scroll wrapper above handles horizontal scrolling instead */
    .repairs-table {
        display: table !important;
        width: auto !important;
        min-width: 580px !important;
    }

    .repairs-table thead {
        display: table-header-group !important;
        width: auto !important;
    }

    .repairs-table tbody {
        display: table-row-group !important;
        width: auto !important;
    }

    .repairs-table tr {
        display: table-row !important;
        width: auto !important;
        table-layout: auto !important;
    }

    /* Slide-in detail panel: full screen width on mobile */
    .repair-detail-panel {
        width: 100% !important;
    }

    /* Vendor view header row: stack filter + action buttons */
    #vendorsView > div:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    #vendorsView > div:first-child > div:last-child {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    #vendorsView > div:first-child > div:last-child button {
        flex: 1 1 auto !important;
    }

    /* Maintenance view header: stack on mobile */
    #maintenanceView > div:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    #maintenanceView > div:first-child > div:last-child {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Bulk action bar: wrap buttons on narrow screens */
    .bulk-action-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 10px 12px !important;
    }

    .bulk-action-bar button {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}


/* ──────────────────────────────────────────────────────────
   REPORTS PAGE
   Issues: control-group inputs have min-width: 150px, report
   buttons need full-width, doc manager filter inputs overflow.
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Report controls: stack all groups vertically */
    .report-controls {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    .report-controls .control-group {
        width: 100% !important;
    }

    .report-controls .control-group select,
    .report-controls .control-group input {
        min-width: 0 !important;
        width: 100% !important;
        font-size: 16px !important;
        min-height: 44px !important;
    }

    /* Report action buttons: full-width on mobile */
    .btn-generate,
    .btn-export,
    .btn-pdf,
    .btn-documents {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Doc manager modal filters: stack + full-width */
    .doc-manager-filters {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .doc-manager-filters select,
    .doc-manager-filters input,
    .doc-manager-filters input[type="search"] {
        min-width: 0 !important;
        width: 100% !important;
        font-size: 16px !important;
        min-height: 44px !important;
    }

    /* Reconciliation controls: stack */
    .recon-controls {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .recon-controls .control-group {
        width: 100% !important;
    }

    .recon-controls .control-group select,
    .recon-controls .control-group input {
        min-width: 0 !important;
        width: 100% !important;
        font-size: 16px !important;
        min-height: 44px !important;
    }
}


/* ──────────────────────────────────────────────────────────
   RECEIPTS PAGE
   Main issue: topbar has 4 buttons that overflow on 390px.
   Also: #aiCreditsBar hero card has a flex-shrink:0 right
   column that forces the card to ~429px — stack vertically.
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Hide secondary topbar actions on narrow screens */
    #splitGroupingBtn,
    #topExportBtn {
        display: none !important;
    }

    /* Hide Pro/Focus view toggle on mobile — IDs are receipts-specific.
       .view-toggle class is also used on other pages so target by ID. */
    #proViewBtn,
    #focusViewBtn {
        display: none !important;
    }

    /* Hero bar (aiCreditsBar): stack left-col (icon+text) and
       right-col (credits count + action buttons) vertically so
       nothing overflows on 390px screens. The right col is 288px
       in a row layout — fine once stacked. */
    #aiCreditsBar > div:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    /* Right col: remove flex-shrink:0 so it can breathe */
    #aiCreditsBar > div:first-child > div:last-child {
        flex-shrink: 1 !important;
        justify-content: flex-start !important;
    }

    /* "+ Add Receipt(s)" primary button: full width */
    #aiCreditsBar > div:first-child > div:last-child > div:last-child > button:first-child {
        width: 100% !important;
        justify-content: center !important;
    }

    /* CC Statement + Reconcile row: spread evenly */
    #aiCreditsBar > div:first-child > div:last-child > div:last-child > div {
        flex-wrap: nowrap !important;
    }
    #aiCreditsBar > div:first-child > div:last-child > div:last-child > div button {
        flex: 1 1 auto !important;
    }

    /* "Buy More Credits" button: full width */
    #aiCreditsBar > div:first-child > div:last-child > div:last-child > button:last-child {
        width: 100% !important;
    }

    /* Pro table: always hide on mobile — too many columns for a small screen.
       JS also forces focus (cards) mode on init, this is a belt-and-suspenders
       safety net in case localStorage had 'pro' saved. */
    #receiptsTableContainer {
        display: none !important;
    }

    /* Focus/cards grid: ensure it can show (JS sets display:grid on focus mode) */
    #receiptsGrid {
        min-height: 0 !important;
    }

    /* Bulk action bar: stack left section vertically, full-width selects */
    #bulkActionBar > div {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Left section: full width */
    #bulkActionBar > div > div:first-child {
        width: 100% !important;
        padding: 14px 16px !important;
    }

    /* Top row (Select All / count / batch select): allow wrap */
    #bulkActionBar > div > div:first-child > div:first-child {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    /* Batch selector: full width on mobile */
    #batchSelector {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
    }

    /* Assign-property and assign-category selects: full width */
    #bulkProperty,
    #bulkCategory {
        min-width: 0 !important;
        width: 100% !important;
        font-size: 16px !important;
    }

    /* Assign action rows: stack select + Apply button vertically */
    #bulkActionBar > div > div:first-child > div:last-child > div {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    #bulkActionBar > div > div:first-child > div:last-child > div button {
        width: 100% !important;
    }

    /* Right section (Snap + Delete): full width, row layout */
    #bulkActionBar > div > div:last-child {
        flex-direction: row !important;
        padding: 0 16px 14px !important;
        gap: 10px !important;
    }

    #bulkActionBar > div > div:last-child button {
        flex: 1 1 auto !important;
        height: 48px !important;
        padding: 0 !important;
    }
}


/* ──────────────────────────────────────────────────────────
   SETTINGS PAGE
   settings.html already has mobile-header show/hide in its
   own inline <style>. The base mobile.css rules handle the
   rest (sidebar, modals, form stacking). No page-specific
   rules needed beyond what's already inline.
   ────────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────
   NOTICES-ACTIONS PAGE
   Issues: filter chips overflow, legal stats, court package
   modal needs full-screen on mobile (Rule 13).
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Legal container: constrain to mobile width */
    .legal-container {
        padding: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Legal case cards: don't let them exceed container */
    .legal-case-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Legal stats bar: wrap on narrow screens */
    .legal-stats {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .legal-stat {
        flex: 1 1 auto !important;
        min-width: 60px !important;
        text-align: center !important;
    }

    /* Timeline filter chips: horizontal scroll — many chips, won't wrap nicely */
    .tl-filter-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        padding-bottom: 8px !important;
        margin-bottom: 12px !important;
        /* Hide scrollbar visually */
        scrollbar-width: none !important;
    }
    .tl-filter-bar::-webkit-scrollbar { display: none !important; }

    .tl-filter-chip {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* Case header actions: wrap buttons */
    .case-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* Case action buttons: horizontal scroll row (like filter chips) */
    .case-header-actions {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        scrollbar-width: none !important;
    }
    .case-header-actions::-webkit-scrollbar { display: none !important; }

    .case-header-actions button {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* Court package modal: full-screen (Rule 13 pattern) */
    .cp-modal-overlay.active {
        align-items: stretch !important;
        padding: 0 !important;
    }

    .cp-modal {
        width: 100vw !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    /* Stack selection + preview vertically inside modal */
    .cp-modal-body {
        flex-direction: column !important;
        overflow-y: auto !important;
    }

    .cp-selection {
        border-right: none !important;
        border-bottom: 1px solid #e5e7eb !important;
        overflow-y: visible !important;
    }

    .cp-preview {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* ──────────────────────────────────────────────────────────
   TENANTS — SUMMARY CARD LABEL FIX
   .summary-card h3 has white-space: nowrap from desktop CSS.
   On mobile half-width cards (~191px) "Avg On-Time Rate"
   clips. Allow wrapping and tighten font slightly.
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .summary-card h3 {
        white-space: normal !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
    .summary-card .value {
        font-size: 24px !important;
    }
}


/* ──────────────────────────────────────────────────────────
   COMMUNICATIONS PAGE
   communications.html has its own inline mobile CSS for
   global-settings-bar and tenant-row. Remaining gaps:
   timing buttons and filter bar overflow edge cases.
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Reminder timing buttons: wrap on narrow screens */
    .reminder-timing-selector {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .timing-btn {
        flex: 1 1 auto !important;
        text-align: center !important;
        min-height: 40px !important;
    }

    /* Communications filter bar: tighten gap */
    .comm-filters {
        gap: 8px !important;
        padding: 0 !important;
    }

    /* Select-all wrap: reset auto-margin on mobile so it doesn't push odd */
    .select-all-wrap {
        margin-left: 0 !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }
}