/* ============================================
   INFRATRACK MOBILE — Complete Production CSS
   Loaded last; overrides all desktop styles
   ============================================ */

/* ── 1. Global overflow prevention ─────────────────── */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* ── 2. Mobile app bar (hidden on desktop) ─────────── */
.mobile-app-bar {
    display: none;
}

/* ── 3. Table-to-card base styles ──────────────────── */
/* Applied via JS .mobilizeTables() which adds class mobile-card-table */

/* ── Team member cards (replaces table on all sizes) ──── */
.team-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.team-member-card {
    background: var(--bg-secondary, #f4f6fb);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    overflow: hidden;
    width: 100%;
    transition: box-shadow .2s;
}

.team-member-card:hover { box-shadow: 0 6px 20px rgba(10,15,30,.1); }

[data-theme="dark"] .team-member-card {
    background: var(--bg-secondary, #171e30);
    border-color: var(--line, #1e273e);
}

.tmc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.tmc-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    word-break: break-word;
    line-height: 1.3;
}

.tmc-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.tmc-field:last-of-type { border-bottom: none; }

.tmc-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-secondary);
    flex-shrink: 0;
    min-width: 60px;
}

.tmc-value {
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    word-break: break-word;
    overflow-wrap: anywhere;
    flex: 1;
}

.tmc-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

/* ── Allowed Access list (clean label + checkbox rows) ── */
.access-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.access-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    background: var(--bg-secondary, #f8fafc);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    gap: 12px;
    transition: border-color .2s, background .15s;
    -webkit-tap-highlight-color: transparent;
}

.access-row:hover { border-color: var(--blue, #1E5BFF); }

.access-row input:checked ~ span,
.access-row:has(:checked) { border-color: var(--blue, #1E5BFF); background: rgba(30,91,255,.07); }

[data-theme="dark"] .access-row { background: var(--bg-tertiary, #1d2438); border-color: var(--line, #1e273e); }
[data-theme="dark"] .access-row:hover { border-color: var(--blue, #1E5BFF); }

.access-row span {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    pointer-events: none;
}

.access-check {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    padding: 0 !important;
    border-radius: 5px !important;
    accent-color: var(--blue, #1E5BFF);
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Stat card value: responsive font-size clamp ─────── */
.stat-value {
    font-size: clamp(0.95rem, 4vw, 2.2rem) !important;
    overflow-wrap: break-word !important;
    word-break: break-all !important;
    line-height: 1.15 !important;
}

/* ── Active project cards: guaranteed full-width ─────── */
#projectsGrid .card,
#projectsGrid .project-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* ── Budget bar item (dashboard + detail chart) ──────── */
.budget-bar-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.budget-bar-item:last-child { border-bottom: none; }

.bbi-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.bbi-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    word-break: break-word;
    line-height: 1.3;
}

.bbi-value {
    font-size: 13px;
    font-weight: 800;
    color: var(--blue, #1E5BFF);
    white-space: nowrap;
    flex-shrink: 0;
}

.budget-bar-item .bar-track {
    margin-bottom: 6px;
    height: 8px !important;
}

.bbi-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bbi-sub {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

.bbi-pct {
    font-size: 12px;
    font-weight: 800;
    color: var(--blue, #1E5BFF);
}

/* ── Notification cards (new clean design) ──────────── */
.notif-card {
    background: var(--bg-primary);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 0 14px 12px;
    width: calc(100% - 28px);
    box-sizing: border-box;
    border-left-width: 4px;
    border-left-color: var(--blue, #1E5BFF);
    transition: box-shadow .2s;
}

.notif-card:hover { box-shadow: 0 6px 18px rgba(10,15,30,.1); }

.notif-unread { border-left-color: var(--blue, #1E5BFF); }
.notif-read   { opacity: .65; }

.notif-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.notif-type-badge {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--blue, #1E5BFF);
    background: rgba(30,91,255,.12);
    padding: 3px 9px;
    border-radius: 999px;
}

.notif-unread .notif-type-badge {
    color: var(--blue, #1E5BFF);
    background: rgba(111,197,100,.14);
}

.notif-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.notif-mark-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
}

.notif-del-btn {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
}

.notif-del-btn .icon { width: 15px !important; height: 15px !important; }

.notif-msg {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.55;
    margin: 0 0 8px;
    word-break: break-word;
    overflow-wrap: break-word;
}

.notif-time {
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 600;
    display: block;
}

/* ── Supplier info rows (mirrors project-info-row) ──── */
.supplier-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.supplier-info-row:last-of-type { border-bottom: none; }
.supplier-info-row span {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
    flex-shrink: 0;
    min-width: 70px;
}
.supplier-info-row strong {
    font-weight: 700;
    color: var(--text-primary);
    text-align: right;
    word-break: break-word;
}

/* ── 4. Inline phone picker ─────────────────────────── */
.pic-compound {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--line, #d8e1ec);
    border-radius: 10px;
    background: var(--bg-primary, #fff);
    overflow: visible;
    position: relative;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
}

.pic-compound:focus-within {
    border-color: var(--blue, #1E5BFF);
    box-shadow: 0 0 0 3px rgba(30,91,255,.18);
}

.pic-code-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 10px 12px 14px;
    background: none;
    border: none;
    border-right: 1.5px solid var(--line, #d8e1ec);
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink, #0a0f1e);
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 10px 0 0 10px;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
}

.pic-code-btn:hover, .pic-code-btn:focus { background: var(--bg-secondary, #f6f6f6); outline: none; }

.pic-code-btn svg { width: 13px; height: 13px; opacity: .6; }

.pic-number-input {
    flex: 1;
    padding: 12px 14px;
    border: none;
    background: transparent;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink, #0a0f1e);
    min-width: 0;
    border-radius: 0 10px 10px 0;
}

.pic-number-input:focus { outline: none; }
.pic-number-input::placeholder { color: var(--text-tertiary, #999); font-weight: 400; }

.pic-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 280px;
    max-width: min(360px, 92vw);
    background: var(--bg-primary, #fff);
    border: 1.5px solid var(--line, #d8e1ec);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(10,15,30,.2);
    z-index: 3000;
    overflow: hidden;
}

.pic-dropdown.open { display: block; }

.pic-search-wrap { padding: 10px 10px 6px; }

.pic-search-input {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--line, #d8e1ec);
    border-radius: 8px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    background: var(--bg-secondary, #f8fafc);
    color: var(--ink, #0a0f1e);
}

.pic-search-input:focus { outline: none; border-color: var(--blue, #1E5BFF); }

.pic-list {
    list-style: none;
    margin: 0;
    padding: 0 6px 8px;
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.pic-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 8px;
    transition: background .12s;
    -webkit-tap-highlight-color: transparent;
}

.pic-list li:hover, .pic-list li:active { background: var(--bg-secondary, #f6f6f6); }

.pic-list li .pic-code { font-weight: 800; min-width: 50px; color: var(--blue, #1E5BFF); }
.pic-list li .pic-name { flex: 1; color: var(--text-secondary, #666); }
.pic-list li .pic-iso  { font-size: 11px; color: var(--text-tertiary, #999); font-weight: 700; }

/* Dark theme notification cards */
[data-theme="dark"] .notif-card { background: var(--card, #131826); border-color: var(--line, #1e273e); }
[data-theme="dark"] .notif-msg  { color: var(--ink, #e8ecf8); }

[data-theme="dark"] .pic-compound { background: var(--bg-secondary, #171e30); border-color: var(--line, #1e273e); }
[data-theme="dark"] .pic-code-btn { color: var(--ink, #e8ecf8); border-color: var(--line, #1e273e); }
[data-theme="dark"] .pic-code-btn:hover { background: var(--bg-tertiary, #1d2438); }
[data-theme="dark"] .pic-number-input { color: var(--ink, #e8ecf8); }
[data-theme="dark"] .pic-dropdown { background: var(--card, #131826); border-color: var(--line, #1e273e); }
[data-theme="dark"] .pic-search-input { background: var(--bg-secondary, #171e30); border-color: var(--line, #1e273e); color: var(--ink, #e8ecf8); }
[data-theme="dark"] .pic-list li:hover { background: var(--bg-tertiary, #1d2438); }

/* =====================================================
   MOBILE BREAKPOINT — 768px and below
   ===================================================== */
@media (max-width: 768px) {

    /* ── Layout: single column, no grid ─────────────── */
    body {
        display: block !important;
        overflow-x: hidden !important;
    }

    .main-content {
        display: block !important;
        grid-column: unset !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 0 calc(70px + env(safe-area-inset-bottom, 0px)) !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    /* ── Sidebar: drawer only ───────────────────────── */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 1050 !important;
        transform: translateX(-100%) !important;
        transition: transform .3s cubic-bezier(.22,1,.36,1) !important;
        overflow-y: auto !important;
        padding-top: max(20px, env(safe-area-inset-top, 20px)) !important;
        border-right: 1.5px solid var(--border) !important;
    }

    .sidebar.open {
        transform: translateX(0) !important;
        box-shadow: 12px 0 60px rgba(0,0,0,.35) !important;
    }

    /* ── Hide old hamburger button ──────────────────── */
    .mobile-menu-btn { display: none !important; }

    /* ── Mobile app bar ─────────────────────────────── */
    .mobile-app-bar {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 900;
        align-items: center;
        padding: max(12px, env(safe-area-inset-top, 12px)) 16px 12px;
        background: var(--bg-primary, #fff);
        border-bottom: 1.5px solid var(--border, #eee);
        gap: 10px;
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
    }

    [data-theme="dark"] .mobile-app-bar {
        background: var(--card, #131826);
        border-color: var(--line, #1e273e);
    }

    .mab-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border: none;
        background: var(--bg-secondary, #f6f6f6);
        border-radius: 12px;
        cursor: pointer;
        flex-shrink: 0;
        color: var(--ink, #0a0f1e);
        -webkit-tap-highlight-color: transparent;
    }

    [data-theme="dark"] .mab-menu {
        background: var(--bg-tertiary, #1d2438);
        color: var(--ink, #e8ecf8);
    }

    .mab-menu .icon { width: 20px; height: 20px; }

    .mab-logo {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .mab-logo-img {
        height: 34px;
        width: auto;
        object-fit: contain;
    }

    [data-theme="dark"] .mab-logo-img { filter: brightness(0) invert(1); }

    .mab-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .mab-icon-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        color: var(--ink, #0a0f1e);
        text-decoration: none;
        background: var(--bg-secondary, #f6f6f6);
        transition: background .15s;
        -webkit-tap-highlight-color: transparent;
        position: relative;
    }

    [data-theme="dark"] .mab-icon-btn { background: var(--bg-tertiary, #1d2438); color: var(--ink, #e8ecf8); }

    .mab-icon-btn .icon { width: 18px; height: 18px; }

    .mab-icon-btn.active { color: var(--blue, #1E5BFF); }

    .mab-upgrade {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 8px 12px;
        background: var(--blue, #1E5BFF);
        color: #fff;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 800;
        text-decoration: none;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }

    .mab-upgrade .icon { width: 14px; height: 14px; stroke: #fff; }

    /* ── Bottom nav: 4 items ────────────────────────── */
    .bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        background: var(--sidebar-bg, #0d1323) !important;
        border-top: 1px solid rgba(255,255,255,.07) !important;
        z-index: 1000 !important;
        box-shadow: 0 -6px 24px rgba(0,0,0,.22) !important;
        align-items: stretch !important;
    }

    [data-theme="dark"] .bottom-nav { background: #080c16 !important; }

    .bottom-nav-item {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        color: rgba(255,255,255,.42) !important;
        text-decoration: none !important;
        font-family: 'Raleway', sans-serif !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        letter-spacing: .4px !important;
        text-transform: uppercase !important;
        padding: 6px 2px !important;
        transition: color .2s !important;
        -webkit-tap-highlight-color: transparent !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
    }

    .bottom-nav-item .icon {
        width: 22px !important;
        height: 22px !important;
        stroke-width: 1.8 !important;
    }

    .bottom-nav-item.active { color: var(--blue, #1E5BFF) !important; }

    .bottom-nav-item:active { transform: scale(.88); }

    /* ── Content padding inside main ─────────────────── */
    .main-content > *:not(.mobile-app-bar) {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* First real section after app bar */
    .dashboard-header,
    .page-hero {
        padding: 16px !important;
        margin: 14px 0 16px !important;
        border-radius: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .dash-top-bar {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "title action"
            "search search" !important;
        gap: 12px 10px !important;
        padding: 14px 16px !important;
        margin: 14px 0 16px !important;
        border-radius: 14px !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .dash-title-wrap {
        grid-area: title !important;
        min-width: 0 !important;
    }

    .dash-title-wrap h1 {
        font-size: 20px !important;
        margin: 0 !important;
    }

    .dash-title-wrap p {
        font-size: 12px !important;
        margin: 0 !important;
    }

    .dash-create-btn {
        grid-area: action !important;
        height: 38px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        justify-self: end !important;
        align-self: center !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .dash-top-bar .search-wrap {
        grid-area: search !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .dash-top-bar #dashSearch,
    .dash-top-bar input[type="search"] {
        width: 100% !important;
        height: 42px !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
    }

    .dashboard-header h1,
    .dash-top-bar h1,
    .page-hero h1 {
        font-size: 20px !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
        margin: 0 !important;
    }

    .dashboard-header > .btn,
    .page-hero > .btn,
    .dashboard-header button,
    .page-hero button {
        width: 100% !important;
        justify-content: center !important;
        padding: 13px !important;
        font-size: 15px !important;
    }

    /* ── Cards: always full-width, no overflow ─────── */
    .card,
    .stat-card,
    .plan-card,
    .project-card,
    .metric-box,
    .preference-row,
    .permission-pill {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .card {
        margin: 0 14px 12px !important;
        width: calc(100% - 28px) !important;
        border-radius: 14px !important;
        padding: 14px !important;
    }

    /* Cards that live inside a grid don't need the side margins */
    .grid-2 .card,
    .grid-3 .card,
    .grid-4 .card,
    .stats-grid .stat-card,
    .chart-grid .card,
    .settings-layout .card,
    #projectsGrid .card,
    #suppliersGrid .card {
        margin: 0 !important;
        width: 100% !important;
    }

    /* ── Grids: always single column ──────────────── */
    .grid-2, .grid-3, .grid-4,
    .chart-grid, .settings-layout,
    .project-meta, .stats-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* Stats: 2-up is fine */
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        margin: 0 14px 12px !important;
        width: calc(100% - 28px) !important;
    }

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

    .stat-value { font-size: 1.25rem !important; word-break: break-all !important; }
    .stat-card h4 { font-size: 9px !important; margin-bottom: 4px !important; }
    .stat-label { font-size: 10px !important; }

    /* Active Projects Grid Responsive Rule */
    .active-projects-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* Grids with padding */
    #projectsGrid,
    #suppliersGrid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 14px !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* ── TABLES → STACKED CARDS (platform-wide) ────── */
    table.mobile-card-table {
        display: block !important;
        width: 100% !important;
        min-width: unset !important;
        overflow: hidden !important;
        border: none !important;
    }

    table.mobile-card-table thead { display: none !important; }

    table.mobile-card-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    table.mobile-card-table tr {
        display: block !important;
        background: var(--bg-secondary, #f8fafc) !important;
        border: 1.5px solid var(--border, #eee) !important;
        border-radius: 16px !important;
        padding: 14px 16px !important;
        overflow: hidden !important;
        width: 100% !important;
        cursor: pointer;
    }

    [data-theme="dark"] table.mobile-card-table tr {
        background: var(--bg-secondary, #171e30) !important;
        border-color: var(--line, #1e273e) !important;
    }

    table.mobile-card-table td {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        text-align: right !important;
        gap: 8px !important;
        padding: 6px 0 !important;
        border: none !important;
        font-size: 14px !important;
        width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* First td = title row */
    table.mobile-card-table td:first-child {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: var(--ink, #0a0f1e) !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid var(--border, #eee) !important;
        margin-bottom: 4px !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 4px !important;
    }

    table.mobile-card-table td::before {
        content: attr(data-label);
        font-weight: 700 !important;
        font-size: 10px !important;
        text-transform: uppercase !important;
        letter-spacing: .5px !important;
        color: var(--text-secondary, #666) !important;
        flex-shrink: 0 !important;
        min-width: 80px !important;
    }

    table.mobile-card-table td:first-child::before { display: none !important; }

    /* Last td = actions row */
    table.mobile-card-table td:last-child {
        padding-top: 12px !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        border-top: 1px solid var(--border, #eee) !important;
        margin-top: 4px !important;
    }

    table.mobile-card-table td:last-child::before { display: none !important; }

    /* ── Project cards: no overflow ─────────────────── */
    .project-card {
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

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

    .project-card .card-header h3 {
        font-size: 15px !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        hyphens: auto !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Project info rows */
    .project-info-row {
        padding: 8px 0 !important;
        font-size: 13px !important;
    }

    .proj-info-value {
        font-size: 13px !important;
        text-align: right !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        max-width: 55% !important;
    }

    /* Project action buttons */
    .project-card-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding-top: 12px !important;
        border-top: 1px solid var(--border) !important;
    }

    .proj-action-btn {
        padding: 12px 8px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
        gap: 5px !important;
        justify-content: center !important;
    }

    .proj-action-btn .icon { width: 16px !important; height: 16px !important; }

    /* ── Progress bars ──────────────────────────────── */
    .progress-track {
        margin: 10px 0 6px !important;
        height: 8px !important;
    }

    /* ── Search / filter bar ─────────────────────────── */
    .card-header {
        padding: 12px 14px !important;
        margin-bottom: 0 !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .card-header h3 {
        font-size: 15px !important;
        margin: 0 !important;
    }

    .card-header input[type="text"],
    .card-header input[type="search"],
    .card-header select,
    .select-wrap,
    .projects-filters input,
    .projects-filters select {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        font-size: 14px !important;
    }

    .card-header .select-wrap,
    .card-header > div {
        width: 100% !important;
    }

    /* ── Card body ──────────────────────────────────── */
    .card-body {
        padding: 12px 0 0 !important;
        overflow-x: hidden !important;
    }

    /* ── Tabs ───────────────────────────────────────── */
    .tab-list {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding: 5px 14px !important;
        background: var(--bg-secondary, #f6f6f6) !important;
        border-radius: 0 !important;
        scrollbar-width: none !important;
        margin: 0 0 12px !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .tab-list::-webkit-scrollbar { display: none !important; }

    .tab-button {
        flex-shrink: 0 !important;
        padding: 9px 14px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }

    /* ── Modals: slide up, solid, fixed header ──────── */
    .modal {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 90vh !important;
        max-height: 90dvh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        background: var(--bg-primary, #fff) !important;
        animation: slideUpModal .3s cubic-bezier(.22,1,.36,1) !important;
    }

    [data-theme="dark"] .modal-content { background: var(--card, #131826) !important; }

    .modal-header {
        flex-shrink: 0 !important;
        position: sticky !important;
        top: 0 !important;
        background: var(--bg-primary, #fff) !important;
        z-index: 10 !important;
        padding: 16px !important;
        border-radius: 20px 20px 0 0 !important;
        border-bottom: 1px solid var(--border) !important;
    }

    [data-theme="dark"] .modal-header { background: var(--card, #131826) !important; }

    .modal-body {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px !important;
    }

    .modal-footer {
        flex-shrink: 0 !important;
        position: sticky !important;
        bottom: 0 !important;
        background: var(--bg-primary, #fff) !important;
        z-index: 10 !important;
        padding: 12px 16px !important;
        border-top: 1px solid var(--border) !important;
    }

    [data-theme="dark"] .modal-footer { background: var(--card, #131826) !important; }

    @keyframes slideUpModal {
        from { transform: translateY(50px); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    /* ── Notification cards ─────────────────────────── */
    #notificationsList .card {
        padding: 14px !important;
    }

    #notificationsList .card-header {
        align-items: flex-start !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }

    #notificationsList .card-header > div:first-child {
        flex: 1 !important;
        min-width: 0 !important;
    }

    #notificationsList .card-header > div:last-child {
        display: flex !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        padding: 0 4px !important;
    }

    #notificationsList .btn-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }

    /* ── Form elements ──────────────────────────────── */
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    textarea,
    select {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 15px !important;
        padding: 12px 14px !important;
        -webkit-appearance: none !important;
    }

    /* Preserve search icon padding offset on mobile/tablet */
    .search-wrap input,
    .search-inline input,
    .workspace-search input,
    .dash-top-actions input[type="search"] {
        padding-left: 44px !important;
        padding-right: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .search-wrap .icon,
    .search-inline .icon,
    .workspace-search .icon {
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 5 !important;
        pointer-events: none !important;
    }

    /* Inline phone picker (compound field) */
    .pic-compound { width: 100% !important; }

    .pic-dropdown {
        position: fixed !important;
        top: auto !important;
        bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        min-width: unset !important;
        max-width: calc(100vw - 24px) !important;
        z-index: 3500 !important;
    }

    /* ── Settings phone row ─────────────────────────── */
    .settings-phone-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* ── Procurement/supplier action buttons ─────────── */
    .card-footer {
        display: flex !important;
        gap: 8px !important;
        padding-top: 12px !important;
        flex-wrap: wrap !important;
    }

    .card-footer .btn-icon,
    .card-footer .btn-small {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .card-footer .btn-icon .icon,
    .card-footer .btn-small .icon {
        width: 18px !important;
        height: 18px !important;
    }

    /* ── Back button ────────────────────────────────── */
    .back-btn {
        display: inline-flex !important;
        margin: 12px 14px !important;
        font-size: 13px !important;
        padding: 9px 14px !important;
    }

    /* ── Bar chart rows ─────────────────────────────── */
    .bar-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        margin-bottom: 12px !important;
    }

    .bar-row strong {
        font-size: 13px !important;
    }

    /* ── Donut chart ────────────────────────────────── */
    .donut {
        width: 140px !important;
        margin: 10px auto !important;
    }

    /* ── Metric boxes ───────────────────────────────── */
    .metric-box {
        padding: 12px !important;
        border-radius: 10px !important;
    }

    .metric-box strong { font-size: 14px !important; overflow-wrap: break-word !important; }
    .metric-box span { font-size: 10px !important; }

    /* ── Team / finance table wrapper ───────────────── */
    #teamTable,
    #financeTalbe,
    .card-body {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* ── Select chevron consistency ─────────────────── */
    .select-wrap {
        position: relative !important;
        width: 100% !important;
    }

    .select-wrap select {
        padding-right: 44px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        width: 100% !important;
    }

    .select-wrap .select-chevron {
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        pointer-events: none !important;
    }

    /* ── Activity/notification feed ──────────────────── */
    #activityFeed > div,
    #notificationsFeed > div {
        padding: 10px 0 !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    /* ── Plan cards (upgrade page) ───────────────────── */
    .plan-card {
        padding: 16px !important;
    }

    .plan-price {
        font-size: 1.6rem !important;
    }

    /* ── File preview grid ──────────────────────────── */
    .file-preview-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* ── Settings layout ────────────────────────────── */
    .settings-layout {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .preference-row {
        padding: 12px !important;
        gap: 10px !important;
    }

    .preference-row label { font-size: 14px !important; }
    .preference-row p { font-size: 12px !important; }

    /* ── Dashboard project card list ─────────────────── */
    .dash-project-card { padding: 14px !important; }

    .dash-project-name { font-size: 15px !important; }

    .dash-project-budget strong { font-size: 13px !important; }

    /* ── Update cards ───────────────────────────────── */
    .update-card { padding: 14px !important; margin-bottom: 10px !important; }

    .update-card-body { font-size: 14px !important; }

    /* ── Permission pills ───────────────────────────── */
    .pill-list { gap: 6px !important; }

    .permission-pill {
        font-size: 12px !important;
        padding: 7px 10px !important;
    }

    /* ── Footer links in auth ───────────────────────── */
    .auth-footer { margin-top: 16px !important; }

}

/* ── Extra small phones (iPhone SE, Galaxy A series) ── */
@media (max-width: 390px) {

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

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

    .dashboard-header h1,
    .page-hero h1 { font-size: 18px !important; }

    .proj-action-btn span { display: none !important; }
    .proj-action-btn { flex: 0 0 auto !important; width: 48px !important; padding: 12px !important; }
    .project-card-actions { justify-content: flex-end !important; }

    .tab-button { padding: 8px 12px !important; font-size: 11px !important; }

    .card { padding: 12px !important; }

    .file-preview-grid { grid-template-columns: 1fr !important; }

    .mab-upgrade span { display: none !important; }
    .mab-upgrade { padding: 8px !important; border-radius: 10px !important; }

    .mab-logo-img { height: 28px !important; }
}

/* ── Table card: labels always from data-label attribute ── */
@media (max-width: 768px) {
    /* Always use the data-label set by JS mobilizeTables() */
    table.mobile-card-table td[data-label]::before {
        content: attr(data-label) !important;
    }
    /* If data-label is empty, hide the ::before */
    table.mobile-card-table td:not([data-label])::before,
    table.mobile-card-table td[data-label=""]::before {
        display: none !important;
    }
}

/* ── Stats grid: hard 2-column override ──────────────── */
@media (max-width: 768px) {
    /* Both dashboard and finance stats */
    .stats-grid,
    div.stats-grid,
    main .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .stats-grid .stat-card {
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .stat-value {
        font-size: 1.15rem !important;
        overflow-wrap: break-word !important;
        word-break: break-all !important;
    }
}

/* ── Bar chart on mobile: proper layout ──────────────── */
@media (max-width: 768px) {
    .bar-chart {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Legacy bar-row (if still used) */
    .bar-row {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        gap: 4px 8px !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid var(--border) !important;
        align-items: center !important;
    }

    .bar-row:last-child { border-bottom: none !important; }

    .bar-row strong {
        grid-column: 1 !important;
        grid-row: 1 !important;
        font-size: 13px !important;
        word-break: break-word !important;
    }

    .bar-row > span {
        grid-column: 2 !important;
        grid-row: 1 !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        color: var(--blue, #1E5BFF) !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    .bar-row .bar-track {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        height: 8px !important;
        margin: 0 !important;
    }
}

/* ── Team table action td ────────────────────────────── */
@media (max-width: 768px) {
    /* In team card (td:last-child), show buttons as a row */
    table.mobile-card-table td:last-child {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    table.mobile-card-table td:last-child .proj-action-btn {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 10px 6px !important;
        font-size: 12px !important;
    }
}

/* ── Notifications: override card spacing for notif-card ── */
@media (max-width: 768px) {
    /* Suppress old card styles inside notification list */
    #notificationsList .card { display: none !important; }
    .notif-card { display: block !important; }

    /* If somehow both show, prefer notif-card */
    #notificationsList { padding: 0 !important; }
}

/* ── Landscape mobile ──────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
    .main-content {
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .bottom-nav {
        height: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .modal-content { max-height: 85vh !important; }
}