/* =========================================================================
   Nexus ERP — Mobile / Responsive layer (loaded on every page via base.html)
   Desktop view stays unchanged; only <= 900px gets the mobile treatment.
   ========================================================================= */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    overscroll-behavior-y: contain;
}
button, a, select, input, textarea {
    touch-action: manipulation;
}

/* ---- bottom mobile nav (already used by base.html) ---- */
.mobile-nav-link {
    align-items: center;
    border-radius: 0.75rem;
    color: rgb(100 116 139);
    display: flex;
    flex-direction: column;
    font-size: 0.68rem;
    font-weight: 700;
    gap: 0.05rem;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0.3rem 0.2rem;
}
.mobile-nav-link .material-symbols-outlined { font-size: 1.25rem; }
.mobile-nav-link.text-primary,
.mobile-nav-link.active { background: rgb(238 242 255); color: #4f46e5; }
.dark .mobile-nav-link { color: rgb(148 163 184); }
.dark .mobile-nav-link.text-primary,
.dark .mobile-nav-link.active { background: rgba(79, 70, 229, 0.16); color: #a5b4fc; }

/* =========================================================================
   PHONE / SMALL TABLET  (<= 900px)
   ========================================================================= */
@media (max-width: 900px) {
    /* never let anything push the page wider than the screen */
    html, body { max-width: 100%; overflow-x: hidden; }
    .erp-main, main.erp-main, main.erp-main > div { max-width: 100% !important; }
    .erp-main > div, .erp-main section { width: 100%; }

    /* 16px inputs so iOS/Android don't zoom on focus */
    input, select, textarea { font-size: 16px !important; }

    /* page wrappers: kill big max-widths + side padding so cards use full width */
    [class*="max-w-["] { max-width: 100% !important; }
    .erp-main .p-3, .erp-main .p-4, .erp-main .md\:p-4 { padding-left: 0.6rem !important; padding-right: 0.6rem !important; }

    /* gradient header bands: let buttons wrap instead of overflowing */
    .erp-main section .flex.flex-wrap { row-gap: 0.5rem; }
    .erp-main h1.text-lg { font-size: 1rem; }

    /* ---- LISTS / BOOK tables: horizontal scroll inside a contained box ---- */
    .overflow-x-auto { -webkit-overflow-scrolling: touch; max-width: 100%; }
    .overflow-x-auto > table { min-width: 640px; }      /* book tables scroll, not break layout */
    .overflow-x-auto > table th,
    .overflow-x-auto > table td { white-space: nowrap; }
}

/* =========================================================================
   ENTRY LINE-ITEM TABLES -> stacked cards on phones
   Applies to Sale Entry / Sample / Stock Adjustment item grids (tbody#itemBody).
   Each row becomes a card; each cell shows its column label via data-label.
   ========================================================================= */
@media (max-width: 768px) {
    table:has(> tbody#itemBody) { min-width: 0 !important; width: 100%; }
    table:has(> tbody#itemBody) > thead { display: none; }
    #itemBody { display: block; }
    #itemBody > tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem 0.5rem;
        border: 1px solid rgb(226 232 240);
        border-radius: 0.6rem;
        padding: 0.6rem;
        margin-bottom: 0.6rem;
        background: #fff;
    }
    .dark #itemBody > tr { background: rgb(30 41 59); border-color: rgb(51 65 85); }
    #itemBody > tr > td {
        display: flex;
        flex-direction: column;
        padding: 0 !important;
        border: 0 !important;
        min-width: 0;
    }
    #itemBody > tr > td:first-child { grid-column: 1 / -1; }   /* product full width on top */
    #itemBody > tr > td::before {
        content: attr(data-label);
        font-size: 0.6rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: rgb(100 116 139);
        margin-bottom: 0.15rem;
    }
    #itemBody > tr > td:first-child::before { content: ""; margin: 0; }
    #itemBody > tr > td:last-child { grid-column: 1 / -1; align-items: flex-end; }
    #itemBody input, #itemBody button, #itemBody .r-batch { width: 100% !important; min-height: 40px; }
    #itemBody .r-amt { font-size: 1rem; }
    #itemBody .r-dd { position: fixed !important; left: 0.6rem !important; right: 0.6rem !important; width: auto !important; }
}

/* =========================================================================
   FORM GRIDS -> single column on phones (customer/date/bill rows)
   ========================================================================= */
@media (max-width: 640px) {
    .erp-main .grid.md\:grid-cols-4,
    .erp-main .grid.md\:grid-cols-3,
    .erp-main .grid.md\:grid-cols-2,
    .erp-main .grid.sm\:grid-cols-3,
    .erp-main .grid.sm\:grid-cols-2 { grid-template-columns: 1fr !important; }

    .erp-main .max-w-\[340px\], .erp-main .max-w-\[320px\] { max-width: 100% !important; }

    .sales-page-actions, .erp-main .justify-end.gap-2 { width: 100%; }
    .sales-page-actions button { min-height: 44px; width: 100%; }

    .erp-scope-selector { max-width: calc(100vw - 4.5rem) !important; overflow: hidden; }
    #global-company-selector { max-width: none !important; width: 100%; }
    #global-financial-year-selector { max-width: 5.2rem !important; }

    /* room above fixed bottom nav so last row isn't hidden */
    .erp-main { padding-bottom: 4.5rem; }
}

/* tablet: 2-col forms instead of 4 */
@media (min-width: 641px) and (max-width: 900px) {
    .erp-main .grid.md\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}