/* =================================================================
   mobile.css — Responsive overrides for small screens only.
   Loaded AFTER style.css and invoice.css. Never edit style.css
   for mobile fixes — put them here instead.
   All rules are wrapped in @media queries so they never affect
   desktop layouts.
   ================================================================= */


/* ── 980px and below (matches the layout collapse breakpoint in style.css) ─── */
@media (max-width: 980px) {

    /* Prevent grid/flex children from stretching the page wider than the screen.
       min-width:0 overrides the default min-width:auto on grid/flex children. */
    .content,
    .panel,
    .app-shell > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Tables scroll inside their wrapper — the wrapper clips to the page width */
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* ── General spacing ── */
    .content {
        padding: 0.55rem;
        gap: 0.55rem;
    }

    /* ── App shell: sidebar stacks above content ── */
    .app-shell {
        grid-template-columns: 1fr;
    }

    /* ── Sidebar: 2-column grid layout ── */
    .sidebar {
        padding: 0.55rem 0.65rem;
        gap: 0.45rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "brand   clock"
            "support subscription"
            "menu    menu"
            "logout  logout";
    }

    .brand               { grid-area: brand; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
    .sidebar-clock       { grid-area: clock; }
    .sidebar-subscription{ grid-area: subscription; }
    .menu                { grid-area: menu; }
    .logout-link         { grid-area: logout; }
    .sidebar-support     { grid-area: support; }

    /* All widgets visible, compact */
    .sidebar-clock,
    .sidebar-support,
    .sidebar-subscription {
        display: block;
    }

    /* Clock: smaller, compact */
    .sidebar-clock {
        padding: 0.4rem 0.65rem;
    }

    .sidebar-clock__time {
        font-size: 0.7rem;
    }

    .sidebar-clock__date {
        font-size: 0.7rem;
    }

    /* Support card: compact */
    .sidebar-support {
        padding: 0.4rem 0.65rem;
    }

    .sidebar-support__title  { font-size: 0.73rem; }
    .sidebar-support__text   { font-size: 0.68rem; }
    .sidebar-support__number { font-size: 0.85rem; }

    /* Subscription card: compact */
    .sidebar-subscription {
        padding: 0.4rem 0.65rem;
    }

    .sidebar-subscription__title { font-size: 0.73rem; }
    .sidebar-subscription__row   { font-size: 0.7rem; }

    .brand h1  { font-size: 0.9rem; }
    .brand span { font-size: 0.72rem; }

    /* Menu: compact tile grid */
    .menu {
        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
        gap: 0.25rem;
    }

    .menu a {
        font-size: 0.78rem;
        padding: 0.45rem 0.5rem;
        text-align: center;
        border-radius: 10px;
    }

    .logout-link {
        font-size: 0.78rem;
        padding: 0.4rem 0.6rem;
    }

    /* ── Topbar ── */
    .topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .topbar h2 { font-size: 1rem; }

    .user-chip {
        font-size: 0.78rem;
        padding: 0.38rem 0.7rem;
    }

    /* ── Panels ── */
    .panel { padding: 0.7rem; }

    .panel-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.45rem;
    }

    .panel-head h3 { font-size: 0.9rem; }

    /* ── Buttons ── */
    .btn-group {
        flex-wrap: wrap;
        gap: 0.3rem;
    }

    .btn {
        padding: 0.55rem 0.85rem;
        font-size: 0.85rem;
        border-radius: 10px;
    }

    .btn-secondary-sm,
    .btn-danger,
    .btn-success {
        padding: 0.38rem 0.65rem;
        font-size: 0.8rem;
    }

    /* ── File inputs ── */
    input[type="file"] {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        font-size: 0.82rem;
    }

    /* ── Tables ── */

    table { font-size: 0.8rem; }

    th, td {
        padding: 0.45rem 0.5rem;
        white-space: nowrap;
    }

    .col-name {
        white-space: normal;
        word-break: break-word;
        min-width: 100px;
    }

    .table-search-input {
        min-width: 0;
        width: 100%;
        font-size: 0.84rem;
    }

    /* ── KPI grid: 2 columns ── */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .kpi-card { padding: 0.7rem 0.8rem; }
    .kpi-card h3 { font-size: 0.82rem; }
    .kpi-card strong { font-size: 1.05rem; }

    /* ── Sales summary strip: 2 columns on mobile ── */
    .sales-summary-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .summary-item    { padding: 0.6rem 0.75rem; }
    .summary-item span   { font-size: 0.82rem; }
    .summary-item strong { font-size: 1.05rem; margin-top: 0.25rem; }

    /* ── Sales filter bar ── */
    .filter-custom-dates {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-custom-dates input[type="date"] {
        width: 100%;
    }

    /* ── Forms: single column ── */
    .grid-form {
        grid-template-columns: 1fr;
    }

    .grid-form.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    input,
    select {
        font-size: 0.88rem;
        padding: 0.58rem 0.65rem;
    }

    /* ── Edit-sale new item row ── */
    .new-item-row {
        flex-direction: column;
        align-items: stretch;
    }

    .new-item-row select               { min-width: 0; }
    .new-item-row input[type="number"] { flex: none; width: 100%; }

    /* ── POS catalog ── */
    .pos-layout { grid-template-columns: 1fr; gap: 0.6rem; }

    .pos-search-wrap input { font-size: 0.88rem; }

    .pos-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 0.5rem;

    }

    .pos-card-body         { padding: 0.4rem 0.5rem 0.5rem; }
    .pos-card-body strong  { font-size: 0.78rem; }
    .pos-card-price        { font-size: 0.85rem; }
    .pos-card-stock        { font-size: 0.68rem; }

    /* ── POS cart rows ── */
    .pos-cart-wrap { padding: 0.7rem; }

    .cart-total-row,
    .cart-net-row,
    .cart-discount-row,
    .cart-profit-row,
    .cart-change-row {
        font-size: 0.82rem;
        padding: 0.35rem 0.5rem;
    }

    .cart-paid-row,
    .cart-delivery-row {
        font-size: 0.82rem;
        padding: 0.35rem 0.5rem;
    }

    .cart-total-row strong,
    .cart-net-row strong,
    .cart-profit-row strong,
    .cart-change-row strong { font-size: 0.95rem; }

    .cart-paid-row input,
    .cart-delivery-row input {
        width: 75px;
        font-size: 0.88rem;
    }

    .cart-discount-row input {
        width: 65px;
        font-size: 0.88rem;
    }

    .cart-label { font-size: 0.82rem; padding: 0.4rem 0.5rem; }

    /* ── Invoice preview page ── */
    .invoice-meta-grid {
        gap: 1rem;
        padding: 0.7rem 0.8rem;
        margin: 0.6rem 0 1rem;
    }

    .meta-label { font-size: 0.68rem; }
    .meta-value { font-size: 0.88rem; max-width: 180px; }

    .preview-totals {
        align-items: stretch;
        padding-top: 0.6rem;
    }

    .totals-row {
        min-width: 0;
        width: 100%;
        font-size: 0.85rem;
        gap: 0.75rem;
    }

    /* ── Auth / Login page ── */
    .auth-body  { padding: 0.75rem; }
    .auth-card  { padding: 1rem 0.9rem; }
    .auth-card h1 { font-size: 1.1rem; }

    /* ── Printable invoice (screen view on mobile) ── */
    .invoice-body { padding: 0.75rem; }

    .invoice-wrap {
        padding: 1.2rem 1rem;
        border-radius: 10px;
    }

    /* Header: logo + seller side by side, meta drops below */
    .inv-header {
        grid-template-columns: auto 1fr;
        gap: 0.8rem;
    }

    .inv-meta {
        grid-column: 1 / -1;
    }

    .inv-logo         { width: 65px; height: 65px; }
    .inv-seller h1    { font-size: 1rem; }
    .inv-seller p     { font-size: 0.8rem; }

    /* Invoice table: no scroll — cells wrap instead */
    .inv-table-wrap   { overflow-x: visible; }

    .inv-table        { font-size: 0.75rem; width: 100%; table-layout: fixed; }
    .inv-table thead th,
    .inv-table tbody td {
        padding: 0.38rem 0.35rem;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Column widths: shrink # and numbers, give product max space */
    .inv-table th:nth-child(1),
    .inv-table td:nth-child(1) { width: 5%; }   /* # */

    .inv-table th:nth-child(2),
    .inv-table td:nth-child(2) { width: 15%; }  /* image */

    .inv-table th:nth-child(3),
    .inv-table td:nth-child(3) { width: 30%; }  /* product name */

    .inv-table th:nth-child(4),
    .inv-table td:nth-child(4) { width: 15%; }  /* qty */

    .inv-table th:nth-child(5),
    .inv-table td:nth-child(5) { width: 17%; }  /* unit price */

    .inv-table th:nth-child(6),
    .inv-table td:nth-child(6) { width: 18%; }  /* total */

    .inv-product-img,
    .inv-no-img { width: 30px; height: 30px; line-height: 36px; }

    .inv-totals table { min-width: 0; width: 100%; }

    .inv-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0 0.75rem;
    }

    /* ── Site footer ── */
    .site-footer { font-size: 0.75rem; padding: 0.7rem 0.8rem; }
}


/* ── 480px and below (small phones) ──────────────────────────── */
@media (max-width: 480px) {

    .content { padding: 0.4rem; gap: 0.4rem; }

    .sidebar { padding: 0.4rem 0.5rem; }

    .menu {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
        gap: 0.2rem;
    }

    .menu a { font-size: 0.72rem; padding: 0.38rem; }

    .panel { padding: 0.5rem; }

    .kpi-grid  { gap: 0.35rem; }
    .kpi-card  { padding: 0.55rem 0.65rem; }
    .kpi-card strong { font-size: 0.95rem; }

    .pos-grid {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));

    }

    /* Collapse 4-column forms to single column */
    .grid-form.cols-4 { grid-template-columns: 1fr; }

    table { font-size: 0.72rem; }
    th, td { padding: 0.32rem 0.38rem; }

    .btn {
        font-size: 0.78rem;
        padding: 0.45rem 0.65rem;
        border-radius: 9px;
    }

    .btn-secondary-sm,
    .btn-danger,
    .btn-success {
        padding: 0.32rem 0.55rem;
        font-size: 0.75rem;
    }

    .invoice-wrap { padding: 0.9rem 0.7rem; }

    /* On very small phones, stack logo + seller + meta vertically */
    .inv-header { grid-template-columns: 1fr; }

    .inv-logo { width: 55px; height: 55px; }

    .invoice-meta-grid { gap: 0.7rem; padding: 0.55rem; }
    .meta-value { max-width: 130px; font-size: 0.82rem; }

    .totals-row { font-size: 0.8rem; }
}