/* Mobile-only experience. Desktop styles intentionally remain in style.css. */

@media (max-width:768px) {
    :root {
        --mobile-bg:#f2f2f7;
        --mobile-card:rgba(255,255,255,.94);
        --mobile-border:rgba(60,60,67,.13);
        --mobile-label:#6e6e73;
        --mobile-text:#1c1c1e;
        --mobile-yellow:#ffd400;
        --mobile-radius:18px;
        --mobile-shadow:0 8px 24px rgba(15,23,42,.07);
    }

    html {
        -webkit-text-size-adjust:100%;
        scroll-behavior:smooth;
        background:var(--mobile-bg);
    }

    body {
        min-width:320px;
        overflow-x:hidden;
        background:var(--mobile-bg);
        color:var(--mobile-text);
        font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Poppins,sans-serif;
        -webkit-font-smoothing:antialiased;
        -webkit-tap-highlight-color:transparent;
        overscroll-behavior-y:none;
    }

    .layout {
        display:block;
        min-height:100vh;
        min-height:100svh;
        min-height:100dvh;
    }

    main {
        width:100%;
        padding:14px 12px calc(102px + env(safe-area-inset-bottom));
    }

    .sidebar {
        position:fixed;
        z-index:10000;
        right:10px;
        bottom:calc(8px + env(safe-area-inset-bottom));
        left:10px;
        width:auto;
        height:auto;
        min-height:0;
        padding:6px;
        border:1px solid rgba(255,255,255,.72);
        border-radius:22px;
        background:rgba(32,32,34,.88);
        box-shadow:0 12px 34px rgba(0,0,0,.24);
        backdrop-filter:saturate(180%) blur(22px);
        -webkit-backdrop-filter:saturate(180%) blur(22px);
    }

    .logo-area {
        display:none;
    }

    .sidebar nav {
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap:3px;
        padding:0;
    }

    .sidebar nav a {
        display:flex;
        min-width:0;
        min-height:52px;
        margin:0;
        padding:7px 3px;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:2px;
        border-radius:16px;
        color:#f2f2f7;
        font-size:0;
        font-weight:700;
        line-height:1.1;
        text-align:center;
        touch-action:manipulation;
    }

    .sidebar nav a::first-letter {
        font-size:22px;
        line-height:1;
    }

    .sidebar nav a::after {
        font-size:9px;
        font-weight:700;
        letter-spacing:-.1px;
        opacity:.86;
    }

    .sidebar nav a[data-page-link="dashboard"]::after { content:"Dashboard"; }
    .sidebar nav a[data-page-link="ib-manage"]::after { content:"IB Manage"; }
    .sidebar nav a[data-page-link="analytics"]::after { content:"Analytics"; }
    .sidebar nav a[data-page-link="reports"]::after { content:"Reports"; }
    .sidebar nav a[data-page-link="settings"]::after { content:"Settings"; }

    .sidebar nav a:hover,
    .sidebar nav a.active {
        background:var(--mobile-yellow);
        color:#1c1c1e;
        box-shadow:0 4px 14px rgba(255,212,0,.26);
    }

    .app-page > header {
        position:relative;
        z-index:20;
        margin:0 -2px 16px;
        padding:10px 4px 14px;
        align-items:stretch;
        gap:12px;
        border-bottom:1px solid var(--mobile-border);
    }

    header h1 {
        font-size:clamp(25px,7vw,32px);
        line-height:1.08;
        letter-spacing:-.8px;
    }

    .header-left,
    header > div {
        min-width:0;
        gap:6px;
    }

    .loading-status,
    .manage-status,
    .refresh-notice {
        max-width:100%;
        font-size:11px;
        line-height:1.45;
    }

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

    .header-actions > button,
    #refreshBtn,
    .theme-toggle,
    .manage-back-btn {
        width:100%;
        min-width:0;
        min-height:46px;
        height:auto;
        padding:10px 12px;
        border-radius:14px;
        font-size:13px;
        touch-action:manipulation;
    }

    #ibManagePage .header-actions {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    #ibManagePage .header-actions button:last-child {
        grid-column:1 / -1;
    }

    button:active,
    .sidebar nav a:active {
        transform:scale(.97) !important;
    }

    .cards {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px;
    }

    .card {
        min-height:136px;
        padding:15px 12px;
        align-items:flex-start;
        border-color:var(--mobile-border);
        border-radius:var(--mobile-radius);
        box-shadow:var(--mobile-shadow);
    }

    .card:hover {
        transform:none;
    }

    .card-top {
        width:100%;
        flex-direction:column;
        gap:9px;
    }

    .icon {
        width:38px;
        height:38px;
        flex-basis:38px;
        border-radius:11px;
        font-size:18px;
    }

    .card-title {
        margin-bottom:4px;
        font-size:11px;
        line-height:1.25;
    }

    .card-value {
        margin-bottom:4px;
        overflow:hidden;
        font-size:clamp(20px,5.7vw,27px);
        line-height:1.1;
        letter-spacing:-.6px;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .card-sub {
        font-size:10px;
    }

    .analytics-card {
        margin-top:24px;
    }

    .analytics-card h2,
    .table-header h2,
    .manage-table-header h2 {
        font-size:20px;
        letter-spacing:-.3px;
    }

    .chart-grid {
        grid-template-columns:1fr;
        gap:14px;
        margin-top:14px;
        margin-bottom:28px;
    }

    .chart-box {
        min-height:390px;
        padding:17px 14px;
        border-radius:var(--mobile-radius);
        box-shadow:var(--mobile-shadow);
    }

    .chart-box:hover {
        transform:none;
    }

    .chart-header {
        gap:8px;
        padding-bottom:12px;
        margin-bottom:12px;
    }

    .chart-header h3 {
        font-size:17px;
    }

    .chart-box canvas {
        height:270px !important;
        max-height:270px !important;
    }

    .type-layout,
    .subwh-layout {
        flex-direction:column;
        gap:16px;
    }

    .type-chart,
    .subwh-chart {
        width:100%;
        flex-basis:auto;
    }

    .custom-legend {
        width:100%;
        gap:8px;
    }

    .legend-item {
        padding:11px 12px;
        border-radius:13px;
    }

    .chart-filter-option,
    .manage-mini-bar[data-manage-chart-filter] {
        min-height:48px;
        touch-action:manipulation;
    }

    .table-area,
    #dashboardPage .table-area,
    .manage-table-area,
    .manage-panel,
    .manage-summary-card {
        border-color:var(--mobile-border);
        border-radius:var(--mobile-radius);
        box-shadow:var(--mobile-shadow);
    }

    .table-area,
    #dashboardPage .table-area,
    .manage-table-area {
        margin-top:24px;
        padding:14px 10px 16px;
    }

    .table-tools {
        gap:12px;
        padding:12px;
        border-radius:15px;
    }

    .search-row,
    .table-actions {
        gap:8px;
    }

    .search-row input,
    .table-tools input,
    .table-tools select,
    input[type="date"],
    .choices__inner,
    .pbi-filter-button,
    .manage-multi-button {
        min-height:46px !important;
        border-radius:12px !important;
        font-size:16px !important;
    }

    input[type="date"] {
        width:100%;
    }

    .date-row {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .date-row label {
        grid-column:1 / -1;
        width:auto;
        font-size:12px;
    }

    .date-row > span {
        display:none;
    }

    #dashboardPage .table-wrapper,
    .manage-table-area .table-wrapper {
        margin:0 -10px;
        border-right:0;
        border-left:0;
        border-radius:0;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-x:contain;
        scroll-snap-type:x proximity;
    }

    table th,
    table td,
    #pendingTable th,
    #pendingTable td,
    .manage-data-table th,
    .manage-data-table td {
        height:44px;
        padding:10px 12px;
        font-size:12px;
        white-space:nowrap;
    }

    table th:first-child,
    table td:first-child {
        position:sticky;
        left:0;
        z-index:4;
        background:inherit;
        box-shadow:5px 0 10px rgba(15,23,42,.06);
    }

    table th:first-child {
        z-index:8;
        background:#2b2b2b;
    }

    .manage-subnav {
        position:sticky;
        top:0;
        z-index:40;
        display:flex;
        margin:0 -2px 14px;
        padding:6px;
        flex-direction:row;
        overflow-x:auto;
        border-radius:16px;
        background:rgba(255,255,255,.78);
        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);
        scrollbar-width:none;
    }

    .manage-subnav::-webkit-scrollbar { display:none; }

    .manage-subnav button {
        min-width:max-content;
        min-height:44px;
        padding:10px 14px;
        border-radius:12px;
        font-size:12px;
    }

    .manage-data-summary {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        margin-bottom:14px;
    }

    .manage-summary-card {
        min-height:108px;
        padding:13px 11px;
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .manage-summary-card span {
        width:36px;
        height:36px;
        border-radius:10px;
        font-size:18px;
    }

    .manage-summary-card small {
        margin-bottom:3px;
        font-size:10px;
    }

    .manage-summary-card strong {
        font-size:clamp(19px,5.3vw,25px);
    }

    .manage-command-center,
    .manage-monitor-grid {
        grid-template-columns:1fr;
        gap:12px;
        margin-bottom:14px;
    }

    .manage-panel,
    .manage-filters-panel,
    .manage-aging-panel {
        min-height:0 !important;
        padding:14px;
    }

    .manage-filter-grid {
        grid-template-columns:1fr !important;
        gap:10px;
    }

    .ib-manage-view-qta .manage-date-filters {
        grid-template-columns:1fr;
        margin-top:12px;
        padding:11px;
        border-radius:14px;
    }

    .ib-manage-view-qta .manage-date-row {
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .ib-manage-view-qta .manage-date-row label {
        grid-column:1 / -1;
    }

    .ib-manage-view-qta .manage-date-row > span {
        display:none;
    }

    .ib-manage-view-qta .manage-quick-focus {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        margin-top:12px;
    }

    .ib-manage-view-qta .manage-quick-focus button {
        min-height:72px;
        padding:10px;
        column-gap:8px;
    }

    .ib-manage-view-qta .manage-quick-focus span {
        width:36px;
        height:36px;
        font-size:18px;
    }

    .ib-manage-view-qta .manage-quick-focus small { font-size:10px; }
    .ib-manage-view-qta .manage-quick-focus strong { font-size:18px; }

    .manage-aging-canvas-wrap,
    .ib-manage-view-qta .manage-aging-canvas-wrap {
        height:230px;
        min-height:230px;
    }

    .manage-table-tools,
    .manage-pagination {
        gap:9px;
    }

    .manage-page-size button,
    .manage-page-nav button,
    .manage-page-jump button {
        min-width:42px;
        min-height:42px;
        border-radius:12px;
    }

    .manage-maintenance-notice {
        padding:14px;
        border-radius:16px;
    }

    .manage-multi-panel,
    .pbi-filter-panel,
    .choices__list--dropdown,
    .choices__list[aria-expanded] {
        max-height:55dvh;
        border-radius:16px !important;
        box-shadow:0 18px 42px rgba(0,0,0,.2) !important;
    }

    body.dark-mode {
        --mobile-bg:#000;
        --mobile-card:rgba(28,28,30,.95);
        --mobile-border:rgba(235,235,245,.18);
        --mobile-label:#aeaeb2;
        --mobile-text:#f2f2f7;
        background:#000;
    }

    body.dark-mode .manage-subnav {
        background:rgba(28,28,30,.82);
    }
}

/* Android WebView / older Samsung Internet fallback without backdrop-filter. */
@media (max-width:768px) {
    @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
        .sidebar {
            background:rgba(32,32,34,.97);
        }

        .manage-subnav {
            background:rgba(255,255,255,.97);
        }

        body.dark-mode .manage-subnav {
            background:rgba(28,28,30,.97);
        }
    }
}

/* Comfortable Android touch targets without relying on hover behavior. */
@media (max-width:768px) and (pointer:coarse) {
    button,
    input,
    select,
    .sidebar nav a,
    .pbi-filter-button,
    .manage-multi-button {
        touch-action:manipulation;
    }

    button:hover,
    .card:hover,
    .chart-box:hover {
        transform:none;
    }
}

@media (max-width:340px) {
    main {
        padding-right:9px;
        padding-left:9px;
    }

    .cards,
    .manage-data-summary {
        grid-template-columns:1fr !important;
    }

    .card {
        min-height:112px;
    }

    .card-top {
        flex-direction:row;
    }

    .sidebar nav a::after {
        font-size:8px;
    }
}

@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }
}