/* =============================================================
   HHPS Portal — Responsive Utility Classes
   Include on any page that needs mobile / tablet support.

   HOW TO USE
   ──────────
   Card table (checklist-style rows with action | data | buttons):
     1. Add class="hhps-card-tbl" to your <table>
     2. Mark each <tr> with class="card-row" (add "card-row-checked" when done)
     3. Inside each tr use td classes: card-act  card-data  card-btns
     4. For expand panels (hidden rows below): class="card-expand-row"
        – wrap the buttons inside with class="card-expand-btns"

   Box header stacking (title + toolbar buttons on separate rows on mobile):
     Add class="box-header-stacked" alongside box-header on a .box-header div.

   Scrollable table wrapper:
     Wrap any wide table in <div class="tbl-scroll-wrap">.

   Color policy: never use btn-info (cyan). Use btn-primary or btn-default.
   ============================================================= */


/* ── Card Table ─────────────────────────────────────────────
   Converts action | data | buttons table rows into touch-
   friendly cards on mobile (≤ 767px).
   ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    table.hhps-card-tbl,
    table.hhps-card-tbl > tbody { display: block; }

    /* Each data row becomes a flex card */
    table.hhps-card-tbl > tbody > tr.card-row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        border-bottom: 6px solid #f0f2f4;
        background: #fff;
    }

    /* Checked / completed state */
    table.hhps-card-tbl > tbody > tr.card-row-checked { background: #f5fff7; }

    /* Expand / actions panel row */
    table.hhps-card-tbl > tbody > tr.card-expand-row { display: block; }

    /* ── Action bar: light strip across top of card ── */
    table.hhps-card-tbl > tbody > tr.card-row > td.card-act,
    table.hhps-card-tbl > tbody > tr.card-row > td.card-btns {
        background: #f6f8fa;
        border: none !important;
    }
    table.hhps-card-tbl > tbody > tr.card-row-checked > td.card-act,
    table.hhps-card-tbl > tbody > tr.card-row-checked > td.card-btns {
        background: #edfaf2;
    }

    /* Action cell — left side of action bar */
    table.hhps-card-tbl > tbody > tr.card-row > td.card-act {
        order: 1;
        width: auto !important;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        padding: 10px 10px 8px !important;
    }

    /* Button cell — right side of action bar */
    table.hhps-card-tbl > tbody > tr.card-row > td.card-btns {
        order: 2;
        flex: 1 0 auto;
        width: auto !important;
        display: flex !important;
        flex-wrap: wrap;
        gap: 5px;
        align-items: center;
        justify-content: flex-end;
        padding: 10px 10px 8px !important;
    }

    /* Data cell — full width below the action bar */
    table.hhps-card-tbl > tbody > tr.card-row > td.card-data {
        order: 3;
        width: 100% !important;
        flex: 1 1 100%;
        background: #fff;
        border-top: 1px solid #e8eaed !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        padding: 10px 12px 12px !important;
    }
    table.hhps-card-tbl > tbody > tr.card-row-checked > td.card-data {
        background: #f5fff7;
    }

    /* Expand panel td — spans full width (colspan ignored in block layout) */
    table.hhps-card-tbl > tbody > tr.card-expand-row > td {
        display: block;
        width: 100%;
        border: none !important;
        border-top: 2px solid #d6d8db !important;
        border-bottom: 6px solid #f0f2f4 !important;
        padding: 12px !important;
    }

    /* Expand panel buttons — 2-column grid on mobile */
    .card-expand-btns {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .card-expand-btns .btn {
        width: 100%;
        text-align: left;
        padding: 9px 10px;
        font-size: 13px;
        margin: 0;
    }

    /* ── Field grid inside data cell ──────────────────────────
       Forces a clean 2-column layout regardless of col-xs-*
       ─────────────────────────────────────────────────────── */
    .card-data .row > [class*="col-"] {
        width: 50%;
        float: left;
        padding-bottom: 8px;
    }
    .card-data .row > .col-xs-8,
    .card-data .row > .col-xs-12 { width: 100%; }

    /* ── Box headers ───────────────────────────────────────────
       Hide overflow stat labels; keep the collapse button.
       ─────────────────────────────────────────────────────── */
    .box-header .box-tools .label { display: none !important; }
    .box-header .box-title        { font-size: 13px !important; }

    /* ── Box header stacking ───────────────────────────────────
       Use class="box-header-stacked" on a .box-header to stack
       the title on one row and the toolbar buttons below it.
       ─────────────────────────────────────────────────────── */
    .box-header-stacked {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 10px 12px;
    }
    .box-header-stacked .box-title { margin: 0; font-size: 14px !important; }
    .box-header-stacked .box-tools.pull-right {
        float: none !important;
        position: static !important;
        width: 100%;
    }
    .box-header-stacked .box-tools .btn-group {
        display: flex;
        width: 100%;
        gap: 4px;
    }
    .box-header-stacked .box-tools .btn-group .btn {
        flex: 1;
        text-align: center;
        font-size: 12px;
        padding: 6px 4px;
    }

    /* ── Touch-friendly button sizing ──────────────────────── */
    .btn-touch { min-height: 36px; padding: 6px 12px; font-size: 13px; }

    /* ── Full-width modals ─────────────────────────────────── */
    .modal-dialog,
    .modal-dialog.modal-lg { margin: 8px; width: auto; }

    /* ── Scrollable table / grid wrapper ───────────────────── */
    .tbl-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* ── Tablet (768px – 991px) ─────────────────────────────────
   Section box-headers become flex so stat label clusters
   (e.g. "DC 10 / ZM 4 / ⚡2") never push over the title.
   Expand-panel buttons use a 3-column grid.
   ─────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991px) {

    /* Flex box-header prevents stat labels overflowing the title */
    .box-header.with-border {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        padding-right: 8px;
    }
    .box-header.with-border .box-title { flex: 1 1 auto; min-width: 0; }
    .box-header.with-border .box-tools.pull-right {
        float: none;
        position: static;
        flex: 0 0 auto;
    }
    .box-header .box-tools .label { font-size: 10px; padding: 2px 5px; }

    /* Expand panel buttons — 3-column grid on tablet */
    .card-expand-btns {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }
    .card-expand-btns .btn { text-align: left; padding: 7px 10px; }
}