/* =====================================================================
   NIS — Responsive helpers for the Wasting (NMR) and SupplyWatch areas
   ---------------------------------------------------------------------
   These two areas keep their own "pastel / modern-card" look; this file
   ONLY adds responsive behaviour (adaptation to small screens). It is
   purely presentational — no JS, form bindings, DataTables config, or
   grid logic is affected.

   Two kinds of rules live here:
     1. Opt-in helper classes (prefixed .rx-*) added to markup where needed.
     2. A few safe overrides scoped to classes used only in these two areas
        (.w-60-page, .modern-table, .ip-grid, .stat-card, .page-header.pastel),
        so nothing else in the app is touched.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. DataTables Responsive expand/collapse control.
      The stock control renders as an indistinct blob here because the
      app's icon fonts (Font Awesome / icons.css) hijack the pseudo-element
      font, so the "+" glyph never shows. Force a plain font and an explicit
      circle so the control is unmistakable.
   --------------------------------------------------------------------- */
/* IMPORTANT: only style/show the control when Responsive has actually hidden
   columns. DataTables marks that state by adding `collapsed` to the table.
   Without this gate the +/- badge would show on every row even at full width
   with nothing to expand. */
table.dataTable.collapsed > tbody > tr > td.dtr-control {
    cursor: pointer;
    position: relative;
}

table.dataTable.collapsed > tbody > tr > td.dtr-control::before {
    content: "+" !important;
    /* plain UI font — never an icon font */
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: .8rem !important;
    line-height: 1.1rem !important;
    width: 1.1rem !important;
    height: 1.1rem !important;
    margin-top: -0.55rem !important;
    color: #ffffff !important;
    background-color: #2563eb !important; /* NIS blue */
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    text-align: center !important;
    text-indent: 0 !important;
    box-sizing: content-box;
    display: block !important;
}

/* Expanded row -> minus. (DataTables 1.x uses tr.parent, 2.x uses tr.dtr-expanded.) */
table.dataTable.collapsed > tbody > tr.parent > td.dtr-control::before,
table.dataTable.collapsed > tbody > tr.dtr-expanded > td.dtr-control::before {
    content: "\2212" !important; /* true minus sign */
    background-color: #64748b !important;
}

/* Nothing hidden (wide screen) -> no control at all. */
table.dataTable:not(.collapsed) > tbody > tr > td.dtr-control::before {
    content: none !important;
    display: none !important;
}

/* The expanded detail list should read cleanly, not as cramped rows. */
table.dataTable ul.dtr-details {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}

    table.dataTable ul.dtr-details > li {
        display: flex;
        gap: .5rem;
        padding: .35rem 0;
        border-bottom: 1px solid rgba(15, 23, 42, .06);
    }

        table.dataTable ul.dtr-details > li:last-child {
            border-bottom: 0;
        }

        table.dataTable ul.dtr-details > li .dtr-title {
            min-width: 8rem;
            font-weight: 600;
            color: #475569;
        }

/* ---------------------------------------------------------------------
   1. Bounded horizontal scroll for any wide block (grids, toolbars).
      Keeps overflow INSIDE the block so the page body never scrolls
      sideways on a phone/tablet.
   --------------------------------------------------------------------- */
.rx-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
    max-width: 100%;
}

/* ---------------------------------------------------------------------
   2. Sticky first column — for WIDE data-entry / data grids only.
      When you scroll right to reach a numeric cell, the row's label
      (facility / indicator) stays pinned on the left.
      Add class .rx-sticky-first to the <table>.
   --------------------------------------------------------------------- */
.rx-sticky-first {
    border-collapse: separate;
    border-spacing: 0;
}
.rx-sticky-first > thead > tr > th:first-child,
.rx-sticky-first > tbody > tr > th:first-child,
.rx-sticky-first > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    /* opaque so scrolled cells don't bleed through the frozen column */
    background: var(--rx-freeze-bg, #ffffff);
    box-shadow: inset -1px 0 0 rgba(15, 23, 42, .08);
}
.rx-sticky-first > thead > tr > th:first-child {
    z-index: 3;
    background: var(--rx-freeze-head-bg, #f1f5f9);
}
.rx-sticky-first > tbody > tr:hover > td:first-child,
.rx-sticky-first > tbody > tr:hover > th:first-child {
    background: var(--rx-freeze-hover-bg, #eef2f7);
}

/* ---------------------------------------------------------------------
   3. Stat / KPI card rows: never cram more than 2 across on a phone.
      These areas use .stat-card inside Bootstrap columns; on very small
      screens force a readable 2-up (Bootstrap handles md+ via col-md-*).
   --------------------------------------------------------------------- */
.rx-cards-2up > [class*="col-"] {
    flex: 0 0 auto;
    width: 50%;
}
@media (min-width: 768px) {
    /* let the markup's col-md-* take over from tablet up */
    .rx-cards-2up > [class*="col-"] {
        width: auto;
        flex: 1 1 0;
    }
}

/* ---------------------------------------------------------------------
   4. Toolbars / filter bars: always wrap instead of overflowing.
      Opt-in via .rx-wrap (safe superset of d-flex flex-wrap).
   --------------------------------------------------------------------- */
.rx-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

/* ---------------------------------------------------------------------
   5. Safety net for these areas' fluid page container.
      .w-60-page is a custom width used across both areas; make sure it
      can never force page-level horizontal scroll on narrow screens.
      (Desktop widths defined in each area's own CSS are preserved.)
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .container-xxl.w-60-page,
    .w-60-page {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Any element that hard-codes a wide fixed width inside these areas should
   still be reachable via scroll, not clip the page. Opt-in wrapper does the
   scrolling (.rx-scroll); this just stops accidental page overflow. */
.rx-scroll > table,
.rx-scroll > .table-responsive > table {
    margin-bottom: 0;
}