/* static/css/hp-app.css
 * Phone "app look" (<= 768px), Flutter / Material 3 style, on top of hp-mobile.css.
 * Pilot pages: Dashboard, My Requests, New Request, Edit Request. Every rule is tied to
 * a class that only those pages use, so other pages are unchanged until rolled out.
 * Look: flat filled cards (no border, 20px corners) on the tinted page, sentence-case
 * 16px section titles instead of uppercase header strips, one-line swipeable chips,
 * compact segmented choices. Desktop is untouched.
 * Loaded in templates/base.html after hp-mobile.css.
 */

@media screen and (max-width: 768px) {
    :root {
        --app-radius: 20px;
        --app-gap: 12px;
        --app-pad: 16px;
        --app-tonal: color-mix(in srgb, var(--hp-accent) 14%, transparent);
    }

    /* ── Shared: flat filled cards and M3 section titles ───────────── */
    #mainContent :is(.rc-card, .chart-card, .activity-card, .panel-box, .catalog-panel, .items-panel,
                     .requests-card:has(.req-mobile-card, .mobile-card-view)) {
        border: 0 !important;
        border-radius: var(--app-radius) !important;
        box-shadow: none !important;
        background: var(--hp-card) !important;
    }
    #mainContent :is(.rc-card-hdr, .panel-box-header, .activity-card > .card-header,
                     #currentRequests > .card-header) {
        background: transparent !important;
        border: 0 !important;
        padding: var(--app-pad) var(--app-pad) 4px !important;
    }
    #mainContent :is(.rc-card-title, .panel-box-title, .section-title, .chart-card h3, .chart-card-title,
                     .activity-card .card-header :is(h2, h3, h4, h5), #currentRequests .card-header :is(h2, h3, h4, h5)) {
        font-size: 16px !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        color: var(--hp-text) !important;
    }
    #mainContent :is(.rc-dot, .section-dot) { display: none !important; }
    #mainContent .rc-card-body,
    #mainContent .panel-box-body { padding: 8px var(--app-pad) var(--app-pad) !important; }
    #mainContent .rc-card + .rc-card { margin-top: var(--app-gap); }

    /* Swipeable chip row that runs to the screen edges */
    #mainContent .rq-tabs,
    #mainContent .catalog-filter-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        overflow-x: auto;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding: 2px 16px !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #mainContent :is(.rq-tabs, .catalog-filter-tabs)::-webkit-scrollbar { display: none; }
    #mainContent :is(.rq-tabs, .catalog-filter-tabs) > * { flex: 0 0 auto !important; }
    #mainContent .rq-tab {
        min-height: 40px;
        padding: 0 14px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
    }
    #mainContent .rq-tab.active {
        background: var(--app-tonal) !important;
        border-color: transparent !important;
        color: var(--hp-accent) !important;
    }
    #mainContent .rq-tab.active .n { background: var(--hp-card); color: var(--hp-accent); }

    /* Request list cards (Dashboard + My Requests) */
    #mainContent .req-mobile-card {
        display: block;
        margin: 0 0 10px !important;
        padding: 14px var(--app-pad) !important;
        border: 0 !important;
        border-radius: var(--app-radius) !important;
        box-shadow: none !important;
        background: var(--hp-card) !important;
    }
    #mainContent .req-mobile-card:active { background: color-mix(in srgb, var(--hp-text) 6%, var(--hp-card)) !important; }
    #mainContent .req-mobile-card .req-card-number { color: var(--hp-text) !important; font-weight: 600 !important; }
    /* Empty footers (no Edit / Delete buttons) left a line and a gap under the card */
    #mainContent .req-card-footer:not(:has(*)) { display: none !important; }

    /* ── Dashboard ─────────────────────────────────────────────────── */
    #mainContent .stat-card-headline { font-size: 12px !important; letter-spacing: .02em !important; }
    #mainContent .stat-card-sub { font-size: 13px !important; }
    #mainContent .stat-cards-row > * { border: 0 !important; border-radius: var(--app-radius) !important; box-shadow: none !important; }
    #mainContent .charts-row { gap: var(--app-gap) !important; }
    #mainContent .chart-card { padding: var(--app-pad) !important; }
    /* "Current Requests" was printed twice (card header + phone list header) */
    #currentRequests .mobile-cards-header { display: none !important; }
    /* The list sits straight on the page: cards inside a card looked boxed-in */
    #currentRequests { background: transparent !important; }
    #currentRequests > .card-header { padding: 4px 4px 8px !important; }
    #currentRequests .mobile-cards-container { padding: 0 !important; }
    /* Filters: search, then Dept / Status / Type side by side as compact dropdowns */
    #currentRequests .toolbar-row {
        padding: 0 0 12px !important;
        gap: 8px !important;
        background: transparent !important;
        border: 0 !important;
    }
    #currentRequests .toolbar-row .toolbar-label { display: none !important; }
    #currentRequests .toolbar-row > :is(select, input:not([type="hidden"])) {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding-left: 10px !important;
        padding-right: 22px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        text-overflow: ellipsis;
    }
    #currentRequests .toolbar-row .toolbar-meta { flex: 1 0 100% !important; text-align: left; color: var(--hp-muted); }

    /* ── My Requests ───────────────────────────────────────────────── */
    #mainContent .rq-tabs { margin-bottom: 12px !important; }
    #mainContent .search-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 12px;
    }
    #mainContent .search-toolbar .search-wrapper { flex: 1 0 100%; }
    #mainContent .search-toolbar input {
        width: 100% !important;
        min-height: 48px;
        border: 0 !important;
        border-radius: 24px !important;
        background: var(--hp-card) !important;
    }
    #mainContent .search-toolbar .table-meta-text { padding-left: 16px; font-size: 13px; color: var(--hp-muted); }
    /* Title is already in the app bar; the count is under the search */
    #mainContent .requests-card:has(.req-mobile-card) { background: transparent !important; }
    #mainContent .requests-card:has(.req-mobile-card) > .requests-card-header { display: none !important; }
    #mainContent .requests-card .mobile-cards-container { padding: 0 !important; }
    /* Card body on two lines: dept + requester, then amount + date */
    #mainContent .req-mobile-card .req-card-body {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "dept who" "amount amount";
        align-items: center;
        gap: 8px 12px;
        margin-top: 10px;
        padding: 0 !important;
        border: 0 !important;
    }
    #mainContent .req-mobile-card .req-card-dept { grid-area: dept; }
    #mainContent .req-mobile-card .req-card-body > div:last-child:not(.req-card-amount-row) { grid-area: who; font-size: 13px !important; }
    #mainContent .req-mobile-card .req-card-amount-row {
        grid-area: amount;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin: 0 !important;
    }
    #mainContent .req-mobile-card .req-card-amount { font-size: 20px !important; }
    #mainContent .req-mobile-card .req-card-date { font-size: 13px; color: var(--hp-muted); }

    /* ── New / Edit Request ────────────────────────────────────────── */
    /* New Request sits in .app-content (16px gutter), so its own padding made it 32px.
       Edit Request has no .app-content: its shell gives the same 16px. */
    #mainContent .rc-layout { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; }
    #mainContent .edit-shell { padding: 12px 16px 6rem !important; }
    /* Strips inside cards (catalog row, Add Item bar, items header) blend into the card */
    #mainContent :is(.cat-toggle, .add-bar, .items-panel-header, .catalog-panel-header, .add-item-wrap) {
        background: transparent !important;
        border: 0 !important;
    }
    #mainContent .cat-toggle { padding: 14px var(--app-pad) !important; }
    #mainContent .add-bar { padding: 4px 12px 14px !important; }
    #mainContent .empty-row td { text-align: center !important; }
    #mainContent .empty-row .ei { margin: 0 auto; }
    #mainContent .form-progress-rail { display: none !important; }
    #mainContent .rc-card { margin-bottom: var(--app-gap) !important; }
    #mainContent :is(.panel-box, .catalog-panel, .items-section) { margin-bottom: var(--app-gap) !important; }

    /* Request type: three tall boxes become one segmented button row */
    #mainContent .rt-picker {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0 !important;
        border: 1px solid var(--hp-line);
        border-radius: 16px;
        overflow: hidden;
    }
    #mainContent .rt-opt {
        flex-direction: row;
        justify-content: center;
        gap: 6px !important;
        min-height: 48px;
        padding: 6px 4px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        text-align: center;
    }
    #mainContent .rt-opt + .rt-opt { border-left: 1px solid var(--hp-line) !important; }
    /* Tick box beside each label: empty outline, filled with a check when chosen.
       The hint line is hidden so the row stays one line high */
    #mainContent .rt-opt .rt-box { width: 18px; height: 18px; border-radius: 5px; font-size: 12px; border-color: var(--hp-line); }
    #mainContent .rt-opt:has(input:checked) .rt-box { background: var(--hp-accent); border-color: var(--hp-accent); }
    #mainContent .rt-opt .rt-txt { align-items: center; }
    #mainContent .rt-opt .rt-txt b { font-size: 14px; }
    #mainContent .rt-opt .rt-txt small { display: none; }
    #mainContent .rt-opt:has(input:checked) { background: var(--app-tonal) !important; }
    #mainContent .rt-opt:has(input:checked) .rt-txt b { color: var(--hp-accent); }

    /* Short "New" so all three choices fit on one line */
    #mainContent .rt-opt .rt-long { display: none; }
    #mainContent .rt-opt .rt-short { display: inline; }

    /* Remarks + Attachments: same 12px gap as the cards above (grid gap and
       the card's own top margin were stacking into double spacing) */
    #mainContent .two-col { gap: 0 !important; margin-top: 0 !important; }
    #mainContent .two-col > .rc-card + .rc-card { margin-top: 0 !important; }

    /* Attachments: one slim "Add files" row instead of a tall drop box */
    #mainContent .dz {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        padding: 8px 14px !important;
        border-width: 1.5px !important;
        border-radius: 12px !important;
        text-align: left !important;
        margin-bottom: 8px;
    }
    #mainContent .dz .dz-ico { margin: 0 !important; font-size: 1.25rem !important; line-height: 1; color: var(--hp-accent); }
    #mainContent .dz :is(.dz-lbl, .dz-fmt) { display: none !important; }
    #mainContent .dz .dz-m { display: block !important; font-size: 15px; font-weight: 600; color: var(--hp-text); }

    /* Item cards: flat like the other cards, on the tinted page */
    #mainContent #itemsBody > tr:not(:has(> td[colspan])) {
        border: 0 !important;
        border-radius: var(--app-radius) !important;
        box-shadow: none !important;
        background: var(--hp-bg-2) !important;     /* the page tint, so items stand out inside the white card */
    }
    #mainContent .items-scroll:has(#itemsBody) { padding: 8px 12px !important; }

    /* Item card layout (New + Edit share the cell order, see hp-mobile.css):
         Item 1 ................ ✕
         [photo] [description    ]
         [Qty ] [Unit ] [Code ]
         [Supplier ] [Contact  ]
       12 columns so the three-up and two-up rows line up */
    #mainContent #itemsBody > tr:not(:has(> td[colspan])) {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        grid-template-areas:
            "num num num num num num num num num num del del"
            "img img img desc desc desc desc desc desc desc desc desc"
            "qty qty qty qty unit unit unit unit code code code code"
            "sup sup sup sup sup sup sup sup sup sup sup sup" !important;
        gap: 10px 8px !important;
        padding: 10px 12px 14px !important;
        margin-bottom: 10px !important;
    }
    #mainContent #itemsBody > tr > td:nth-child(1) { font-size: 14px !important; }
    /* Photo cell as a column: the empty inline image holder added a 26px text line */
    #mainContent #itemsBody > tr > td:nth-child(2) {
        display: flex !important;
        flex-direction: column;
        align-self: center;
    }
    /* Remove: small quiet icon instead of a big outlined box */
    #mainContent #itemsBody :is(.btn-del, .btn-remove-item) {
        width: 32px !important;
        height: 32px !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--hp-muted) !important;
    }
    /* Same text size in every field (the unit dropdown and supplier boxes were smaller) */
    #mainContent #itemsBody > tr :is(input:not([type="hidden"]):not([type="file"]), select) {
        min-height: 44px !important;
        font-size: 15px !important;
    }
    #mainContent #itemsBody > tr input::placeholder { font-size: 15px !important; }
    /* Unit dropdown: text and arrow on one line (Edit's .form-select forced
       display:block, which put the arrow under the text) */
    #mainContent #itemsBody > tr :is(.f-unit, .item-unit) {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        height: 44px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-right: .7rem !important;
    }
    /* Supplier and contact side by side under one "Supplier" label */
    #mainContent #itemsBody > tr > td:nth-child(7) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 8px;
    }
    #mainContent #itemsBody > tr > td:nth-child(7)::before { grid-column: 1 / -1; }
    #mainContent #itemsBody > tr > td:nth-child(7) input { margin: 0 !important; }
}