/*
 * Soda ZW Billing V12.8 — mobile UX layer
 * Loaded last so the established navy/orange desktop design is preserved.
 */

@media (max-width: 920px) {
    html,
    body { max-width: 100%; overflow-x: hidden; }

    body.sodazw-v12.nav-open {
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: none;
    }

    body.sodazw-v12 .sidebar {
        z-index: 1000;
        width: min(86vw,320px);
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        padding-top: max(16px,env(safe-area-inset-top));
        padding-bottom: max(12px,env(safe-area-inset-bottom));
        box-shadow: 24px 0 60px rgba(2,27,51,.30);
    }

    body.sodazw-v12 .sidebar nav {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.sodazw-v12 .mobile-backdrop {
        position: fixed;
        inset: 0;
        z-index: 990;
        border: 0;
        background: rgba(2,22,41,.58);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }

    body.sodazw-v12 .main {
        width: 100%;
        min-width: 0;
        margin-left: 0;
        padding: 0 clamp(14px,3vw,24px) max(24px,env(safe-area-inset-bottom));
    }

    body.sodazw-v12 .system-topbar {
        position: sticky;
        top: 0;
        z-index: 90;
        width: auto;
        min-width: 0;
        height: auto;
        min-height: 72px;
        margin: 0 calc(-1 * clamp(14px,3vw,24px)) 16px;
        padding: max(10px,env(safe-area-inset-top)) clamp(14px,3vw,24px) 10px;
        background: rgba(247,250,252,.96);
        box-shadow: 0 8px 24px rgba(5,40,68,.06);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    body.sodazw-v12 .menu-toggle,
    body.sodazw-v12 .topbar-icon,
    body.sodazw-v12 .topbar-profile,
    body.sodazw-v12 .create-menu > summary {
        min-width: 44px;
        min-height: 44px;
    }

    body.sodazw-v12 .menu-toggle {
        flex: 0 0 44px;
        border: 1px solid var(--sz-line);
        border-radius: 12px;
        background: #fff;
        color: var(--sz-navy-900);
        box-shadow: 0 5px 16px rgba(5,40,68,.06);
    }

    body.sodazw-v12 .page-identity { min-width: 0; }
    body.sodazw-v12 .page-identity h1 {
        overflow: hidden;
        font-size: clamp(18px,4.4vw,24px);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.sodazw-v12 .topbar-tools { flex: 0 0 auto; }
    body.sodazw-v12 .create-menu > div {
        max-height: calc(100dvh - 84px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.sodazw-v12 .panel,
    body.sodazw-v12 .stat,
    body.sodazw-v12 .document-studio,
    body.sodazw-v12 .studio-main,
    body.sodazw-v12 .studio-summary { min-width: 0; }

    body.sodazw-v12 .document-studio {
        display: flex;
        flex-direction: column;
    }

    body.sodazw-v12 .studio-main { order: 1; }
    body.sodazw-v12 .studio-summary {
        position: static;
        order: 2;
    }

    body.sodazw-v12 .table-wrap,
    body.sodazw-v12 .finance-tabs,
    body.sodazw-v12 .invoice-tabs,
    body.sodazw-v12 .filter-pills,
    body.sodazw-v12 .studio-workflow,
    body.sodazw-v12 .document-type-switch {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    body.sodazw-v12 .table-wrap table { min-width: 680px; }
    body.sodazw-v12 .finance-tabs,
    body.sodazw-v12 .invoice-tabs,
    body.sodazw-v12 .filter-pills { flex-wrap: nowrap; }

    body.sodazw-v12 input,
    body.sodazw-v12 select,
    body.sodazw-v12 textarea {
        max-width: 100%;
        font-size: 16px;
    }

    body.sodazw-v12 input:not([type="checkbox"]):not([type="radio"]),
    body.sodazw-v12 select,
    body.sodazw-v12 .button,
    body.sodazw-v12 button:not(.remove-row):not(.studio-remove) { min-height: 44px; }

    body.sodazw-v12 .form-grid,
    body.sodazw-v12 .document-layout,
    body.sodazw-v12 .crm-detail-grid,
    body.sodazw-v12 .permission-grid,
    body.sodazw-v12 .reconciliation-row,
    body.sodazw-v12 .match-form,
    body.sodazw-v12 .stock-receipt-line,
    body.sodazw-v12 .stock-receipt-footer {
        grid-template-columns: minmax(0,1fr) !important;
    }

    body.sodazw-v12 .reconciliation-row,
    body.sodazw-v12 .stock-receipt-line { gap: 10px; }
}

@media (max-width: 680px) {
    body.sodazw-v12 .main { padding-inline: 12px; }

    body.sodazw-v12 .system-topbar {
        margin-inline: -12px;
        padding-inline: 12px;
    }

    body.sodazw-v12 .page-identity > span { display: none; }
    body.sodazw-v12 .topbar-icon { display: none; }
    body.sodazw-v12 .topbar-profile {
        min-width: 44px;
        padding: 4px;
    }
    body.sodazw-v12 .topbar-profile > b { display: none; }

    body.sodazw-v12 .create-menu > summary {
        width: 44px;
        padding: 0;
        font-size: 0;
    }
    body.sodazw-v12 .create-menu > summary span {
        width: 24px;
        height: 24px;
        margin: auto;
        font-size: 19px;
    }
    body.sodazw-v12 .create-menu > summary::after { display: none; content: none; }
    body.sodazw-v12 .create-menu > div {
        position: fixed;
        top: max(74px,calc(env(safe-area-inset-top) + 64px));
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100dvh - 90px);
        padding: 10px;
        border-radius: 18px;
        box-shadow: 0 24px 70px rgba(2,27,51,.24);
    }
    body.sodazw-v12 .create-menu > div a {
        min-height: 56px;
        padding: 10px;
    }

    /* Undo narrow percentage widths inherited from the desktop enhancement. */
    body.sodazw-v12 .accounting-command-hero,
    body.sodazw-v12 .accounting-kpis,
    body.sodazw-v12 .accounting-primary-grid,
    body.sodazw-v12 .accounting-secondary-grid,
    body.sodazw-v12 .accounting-activity-grid,
    body.sodazw-v12 .accounting-dashboard-grid,
    body.sodazw-v12 .command-grid,
    body.sodazw-v12 .finance-hero,
    body.sodazw-v12 .finance-tabs,
    body.sodazw-v12 .finance-kpis,
    body.sodazw-v12 .finance-grid,
    body.sodazw-v12 .toolbar,
    body.sodazw-v12 .document-studio-heading,
    body.sodazw-v12 .studio-workflow,
    body.sodazw-v12 .document-studio,
    body.sodazw-v12 .paynow-readiness,
    body.sodazw-v12 .paynow-invoice-panel,
    body.sodazw-v12 .document-state-actions,
    body.sodazw-v12 article.document-card,
    body.sodazw-v12 article.document-card + .panel {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    body.sodazw-v12 .panel {
        padding: 16px;
        border-radius: 16px;
    }

    body.sodazw-v12 .panel-head,
    body.sodazw-v12 .page-actions,
    body.sodazw-v12 .document-studio-heading,
    body.sodazw-v12 .finance-hero,
    body.sodazw-v12 .paynow-readiness,
    body.sodazw-v12 .studio-section-actions {
        align-items: stretch;
        flex-direction: column;
    }

    body.sodazw-v12 .panel-head > .button,
    body.sodazw-v12 .page-actions > .button,
    body.sodazw-v12 .studio-section-actions .button,
    body.sodazw-v12 .paynow-readiness .button { width: 100%; }

    body.sodazw-v12 .toolbar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    body.sodazw-v12 .toolbar form {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }
    body.sodazw-v12 .toolbar input,
    body.sodazw-v12 .toolbar select,
    body.sodazw-v12 .toolbar .button { max-width: none; width: 100%; }

    body.sodazw-v12 .stats,
    body.sodazw-v12 .accounting-kpis,
    body.sodazw-v12 .finance-kpis {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 10px;
    }
    body.sodazw-v12 .stat,
    body.sodazw-v12 .accounting-kpis article,
    body.sodazw-v12 .accounting-kpis > a,
    body.sodazw-v12 .finance-kpis article {
        min-height: 108px;
        padding: 14px;
    }

    body.sodazw-v12 .document-type-switch,
    body.sodazw-v12 .studio-workflow {
        width: 100%;
        justify-content: flex-start;
    }
    body.sodazw-v12 .document-type-switch a,
    body.sodazw-v12 .studio-workflow button { flex: 0 0 auto; }

    body.sodazw-v12 .quick-choice,
    body.sodazw-v12 .studio-customer-mode,
    body.sodazw-v12 .studio-delivery,
    body.sodazw-v12 .studio-fee-presets {
        grid-template-columns: minmax(0,1fr) !important;
    }

    body.sodazw-v12 .studio-items {
        margin-right: 12px;
        margin-left: 12px;
        overflow: visible;
    }
    body.sodazw-v12 .studio-item {
        position: relative;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        padding-top: 48px;
        border: 1px solid var(--sz-line);
        border-radius: 13px;
    }
    body.sodazw-v12 .studio-item-product { grid-column: 1/-1; }
    body.sodazw-v12 .studio-remove {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 36px;
        min-width: 36px;
        height: 36px;
    }
    body.sodazw-v12 .studio-summary { width: 100%; }

    body.sodazw-v12 .document-state-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
    body.sodazw-v12 .document-state-actions .button { width: 100%; }

    body.sodazw-v12 article.document-card {
        padding: 22px 16px;
        overflow-x: auto;
        border-radius: 16px;
        -webkit-overflow-scrolling: touch;
    }
    body.sodazw-v12 article.document-card .document-head,
    body.sodazw-v12 article.document-card .document-meta { grid-template-columns: 1fr; }
    body.sodazw-v12 article.document-card .document-title,
    body.sodazw-v12 article.document-card .text-right { text-align: left; }
    body.sodazw-v12 article.document-card .document-summary {
        width: 100%;
        margin-left: 0;
    }

    body.sodazw-v12 .auth-shell {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0;
    }
    body.sodazw-v12 .auth-card {
        min-height: 100vh;
        min-height: 100dvh;
        padding: max(28px,env(safe-area-inset-top)) 20px max(28px,env(safe-area-inset-bottom));
    }
    body.sodazw-v12 .auth-card-heading h2 { font-size: clamp(30px,10vw,38px); }
}

@media (max-width: 420px) {
    body.sodazw-v12 .stats,
    body.sodazw-v12 .accounting-kpis,
    body.sodazw-v12 .finance-kpis { grid-template-columns: 1fr; }

    body.sodazw-v12 .page-identity h1 { font-size: 18px; }
    body.sodazw-v12 .topbar-tools { gap: 5px; }
    body.sodazw-v12 .topbar-profile { display: none; }
    body.sodazw-v12 .studio-item { grid-template-columns: minmax(0,1fr); }
    body.sodazw-v12 .studio-item-product { grid-column: auto; }
}

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

/* V13: keep the CSRF-protected logout form visually identical to the old link. */
.sidebar-logout-form{margin:0}
.sidebar-logout-form .sidebar-logout{font-family:inherit;cursor:pointer}
body.sidebar-collapsed .sidebar-logout-form{display:block}
