/**
 * nutri-responsive.css — mobile and tablet behaviour for the EMR theme and
 * the nutrition screens.
 *
 * emr-theme.css ships with no media queries at all, so every screen built on
 * it was desktop-only: hero action bars overflowed, KPI grids stayed at four
 * columns on a 375px phone, tab rows wrapped into a stack of full-width
 * buttons, and tables pushed the page sideways.
 *
 * Breakpoints follow main.css so the sidebar and the content agree:
 *   ≤992px  tablet / small laptop
 *   ≤768px  phone landscape
 *   ≤576px  phone portrait
 *
 * Loaded after emr-theme.css, so plain class selectors here win on equal
 * specificity without needing !important.
 */

/* =====================================================================
   Universal: nothing may push the page sideways.
   ===================================================================== */
.emr-page { max-width: 100%; overflow-x: clip; }
.emr-page img, .emr-page canvas, .emr-page svg { max-width: 100%; height: auto; }

/* Any wide block scrolls inside itself rather than widening the document. */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* =====================================================================
   ≤992px — tablet
   ===================================================================== */
@media (max-width: 992px) {
    .emr-page { padding-inline: 12px; }

    /* Hero: title above, actions below and full width. */
    .emr-hero { padding: 18px 18px; border-radius: 14px; }
    .emr-hero-row { flex-direction: column; align-items: stretch; gap: 14px; }
    .emr-hero-row > .d-flex:last-child { width: 100%; }
    .emr-hero h1 { font-size: 1.2rem; }
    .emr-hero p { font-size: .84rem; }

    /* Action clusters in a hero become an even, wrapping row. */
    .emr-hero-row .d-flex.gap-2 { flex-wrap: wrap; }
    .emr-hero-row .d-flex.gap-2 > * { flex: 1 1 auto; min-width: 0; }

    /* The client picker was sized for a desktop toolbar. */
    .emr-hero-row [id$="Patient"],
    .emr-hero-row .nui-picker { min-width: 0 !important; width: 100%; flex-basis: 100%; }

    /* KPI strips: two across reads far better than four squeezed. */
    .emr-stats,
    .ntg-kpis, .bcx-kpis, .cki-kpis, .nut-grid, .ses-cmp {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    }

    /* Two-pane layouts stack. */
    .ntg-grid, .mpb-shell { grid-template-columns: 1fr !important; }
}

/* =====================================================================
   ≤768px — phone landscape
   ===================================================================== */
@media (max-width: 768px) {
    .emr-page { padding-inline: 10px; }

    /* Tab rows scroll horizontally instead of collapsing into a tall stack.
       A dietitian switching tabs one-handed should swipe, not scroll a page. */
    .emr-tabs, .ses-tabs, .mpb-days, .fdb-filters, .mpl-filters, .nas-tags {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
    }
    .emr-tabs::-webkit-scrollbar,
    .ses-tabs::-webkit-scrollbar,
    .mpb-days::-webkit-scrollbar,
    .fdb-filters::-webkit-scrollbar,
    .mpl-filters::-webkit-scrollbar { display: none; }
    .emr-tabs > *, .ses-tabs > *, .mpb-days > * { flex: 0 0 auto; scroll-snap-align: start; }

    /* Tags wrap — they are a set, not a sequence. */
    .nas-tags { flex-wrap: wrap; overflow: visible; }

    /* Filter bars: inputs go full width instead of squeezing to nothing. */
    .fdb-filters, .mpl-filters { flex-wrap: wrap; overflow: visible; }
    .fdb-filters > input, .fdb-filters > select,
    .mpl-filters > input, .mpl-filters > select { width: 100% !important; flex: 1 1 100%; }

    /* Card headers stack their title and their action. */
    .ntg-card-head, .bcx-head, .cki-head, .fdb-head, .mpl-head,
    .ses-card-head, .mpb-head, .rcp-head, .fdy-head, .nas-head, .emr-card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .ntg-card-head > select, .bcx-head > select, .cki-head > select,
    .ses-card-head > a, .fdy-head > div { width: 100%; }

    /* Tables: tighter, and readable without zooming. */
    .emr-table th, .emr-table td, .table-sm th, .table-sm td {
        padding: 8px 6px;
        font-size: .8rem;
        white-space: nowrap;
    }

    /* Modals use the full sheet on a phone. */
    .modal-dialog { margin: 8px; }
    .modal-lg, .modal-dialog-scrollable { max-width: calc(100% - 16px); }

    /* Supplement rows in the session screen already stack; make the
       delete affordance reachable rather than a 12px target. */
    .ses-supp { gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
    .ses-supp .ses-supp-del { align-self: flex-end; padding: 6px 10px; }

    /* Meal-plan items: name on its own line, macros beneath. */
    .mpb-item { flex-wrap: wrap; row-gap: 4px; }
    .mpb-item .nm { flex: 1 1 100%; }
    .mpb-item .mac { font-size: .7rem; }

    /* Give charts room without dominating the fold. */
    #bcxChart, #nutChart { min-height: 220px !important; }
}

/* =====================================================================
   ≤576px — phone portrait
   ===================================================================== */
@media (max-width: 576px) {
    .emr-hero { padding: 14px; }
    .emr-hero-icon { width: 42px; height: 42px; font-size: 1rem; }
    .emr-hero h1 { font-size: 1.05rem; }

    /* One KPI per row below this width: two columns leaves numbers clipped. */
    .emr-stats,
    .ntg-kpis, .bcx-kpis, .cki-kpis, .nut-grid, .ses-cmp {
        grid-template-columns: 1fr !important;
    }
    .ntg-kpi .num, .bcx-kpi .num, .cki-kpi .num, .nut-big { font-size: 1.35rem; }

    /* Macro trio stays three-across — it is a comparison, not a list. */
    .ntg-macro, .nut-macros { gap: 6px; }
    .ntg-macro-box { padding: 10px 6px; }
    .ntg-macro-box .g { font-size: 1.15rem; }

    /* Cards and grids of cards go single-column. */
    .mpl-tpl, .rcp-grid, .fdb-grid { grid-template-columns: 1fr !important; }

    /* Timeline: reclaim the indent the rail was eating. */
    .emr-timeline { padding-inline-start: 20px; }
    .emr-tl-item::before { inset-inline-start: -18px; width: 11px; height: 11px; }
    .emr-tl-head { flex-direction: column; align-items: flex-start; gap: 6px; }

    /* Touch targets: 40px minimum on anything tappable. */
    .btn-sm, .form-control-sm, .form-select-sm { min-height: 40px; }
    .emr-tabs button, .ses-tab, .mpb-day-btn, .fdb-chip, .nas-tag { min-height: 40px; }

    /* Body-composition modal: the section grids were built for a wide form. */
    .modal-body .row.g-2 > [class*="col-md-"] { flex: 0 0 50%; max-width: 50%; }
    .modal-body .row.g-2 > .col-md-12,
    .modal-body .row.g-2 > .col-12 { flex: 0 0 100%; max-width: 100%; }

    /* The food picker popover must not run off the edge. */
    .nui-pop { max-height: 240px; }

    /* Session comparison metrics read better as rows on a narrow screen. */
    .ses-metric { display: flex; align-items: baseline; gap: 10px; text-align: start; }
    .ses-metric .now { font-size: 1.2rem; }
    .ses-metric .lbl { flex: 1; margin-top: 0; }
}

/* =====================================================================
   Print — the plan and the progress report are handed to clients.
   ===================================================================== */
@media print {
    .sidebar, .navbar, .mobile-menu-toggle,
    .emr-tabs, .ses-tabs, .mpb-days,
    .btn, .modal, .emr-toast { display: none !important; }
    .emr-page { padding: 0; }
    .emr-card, .ntg-card, .ses-card, .nut-box { break-inside: avoid; box-shadow: none; }
}

/* =====================================================================
   Sidebar: quick filter + work badges
   ---------------------------------------------------------------------
   A 60-screen menu is not scannable. The filter turns it into a
   type-to-jump list, and the badges make the menu tell you where the
   work is instead of you going to look for it.
   ===================================================================== */
.nav-filter {
    position: relative;
    padding: 10px 12px 6px;
}
.nav-filter i {
    position: absolute;
    inset-inline-start: 22px;
    top: 50%;
    transform: translateY(-30%);
    font-size: .78rem;
    color: #94a3b8;
    pointer-events: none;
}
.nav-filter input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
    padding: 8px 10px;
    padding-inline-start: 30px;
    font-size: .82rem;
    color: #1e293b;
    outline: none;
    transition: border-color .15s, background .15s;
}
.nav-filter input:focus {
    border-color: var(--brand-navy, #1e4d7b);
    background: #fff;
}
.nav-filter input::-webkit-search-cancel-button { cursor: pointer; }

.nav-filter-empty {
    padding: 18px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: .82rem;
}

/* While filtering, groups are forced open so matches inside them show. */
.sidebar-nav.is-filtering .nav-item.has-dropdown .nav-dropdown {
    max-height: none;
    display: block;
}
.sidebar-nav.is-filtering .dropdown-arrow { display: none; }

/* The filter is meaningless in the collapsed rail — there is nowhere to type. */
.sidebar.collapsed .nav-filter { display: none; }
.sidebar.collapsed:hover .nav-filter { display: block; }

/* Badge: a count, not decoration — it only renders when non-zero. */
.nav-badge {
    margin-inline-start: auto;
    background: #dc2626;
    color: #fff;
    border-radius: 20px;
    padding: 1px 7px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.5;
    min-width: 20px;
    text-align: center;
}
.nav-dropdown-link .nav-badge { margin-inline-start: auto; }
.nav-link, .nav-dropdown-link { display: flex; align-items: center; gap: 8px; }
.nav-link .nav-link-text, .nav-dropdown-link .nav-txt { flex: 1; min-width: 0; }

/* Highlight a filter match without moving anything. */
.nav-hit > .nav-link, .nav-hit .nav-dropdown-link.nav-hit-link {
    background: #eef6ff;
}