/* =============================================================================
   Application shell containment — "the page fits the screen, the table does not
   have to".
   -----------------------------------------------------------------------------
   Loaded globally from partials/head-css.php, so every module gets the same
   behaviour the Dashboard already had:

     APPLICATION
       ├── SIDEBAR          fixed, always clickable, scrolls vertically on its own
       └── MAIN CONTENT     never wider than the space left over by the sidebar
             └── TABLE AREA the only element that scrolls horizontally

   `.page-content` is a flex item whose `min-width` resolved to `auto`, i.e. to
   its content's minimum size. One very wide table was therefore able to push the
   whole shell past the right edge of the viewport, where `body { overflow-x:
   hidden }` then made the overflowing part unreachable — the sidebar included.
   Pinning `min-width: 0` lets the flex item shrink to the viewport again and
   hands the excess width to the table's own scroll container.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. The shell (§3, §4, §5)
   -------------------------------------------------------------------------- */
html,
body {
    max-width: 100%;
}

.wrapper {
    max-width: 100%;
}

/* The flex item that holds the whole page. Without `min-width: 0` its automatic
   minimum size is its content's, and wide content widens the application. */
.page-content {
    min-width: 0;
    max-width: 100%;
}

/* Same rule one level down: the <main>, the page title row, the KPI grid and the
   filter card must all take their width from the page, never from the table. */
.page-content > *,
.page-content > main > * {
    min-width: 0;
}

.page-content > main {
    min-width: 0;
    max-width: 100%;
}

/* -----------------------------------------------------------------------------
   2. The table scroll container (§6, §7, §9)
   -----------------------------------------------------------------------------
   `.md-scroll` is the explicit name used by the master-data screens.
   `.table-responsive` and Tailwind's `.overflow-x-auto` are the two wrappers the
   rest of the ERP already uses, so the same containment applies to Products,
   Suppliers, Inventory, Sales, Finance, HR, Logistics, Assets, Agents and
   Reports without touching those pages (§52).
   -------------------------------------------------------------------------- */
.md-scroll,
.table-responsive,
.overflow-x-auto {
    max-width: 100%;
    overflow-x: auto;
    /* Momentum scrolling on trackpads and touch devices. */
    -webkit-overflow-scrolling: touch;
    /* A sideways gesture that reaches the end of the table must not turn into a
       browser back-navigation or scroll the page sideways (§7). */
    overscroll-behavior-x: contain;
}

/* Vertical wheel/trackpad gestures keep scrolling the page, horizontal ones the
   table — the two never fight (§8, §9). */
.md-scroll {
    touch-action: pan-x pan-y;
}

/* A visible, grab-able scrollbar. Without one the user cannot tell that there
   are more columns to the right. */
.md-scroll {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.md-scroll::-webkit-scrollbar {
    height: 10px;
}
.md-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.md-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}
.md-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
.dark .md-scroll {
    scrollbar-color: #475569 transparent;
}
.dark .md-scroll::-webkit-scrollbar-thumb {
    background: #475569;
}
.dark .md-scroll::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Keyboard access: the scroller is focusable, so arrow keys reach the far
   columns without a mouse. */
.md-scroll:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

/* -----------------------------------------------------------------------------
   3. The sidebar stays a sibling of the page, not a passenger of it (§10, §11)
   -----------------------------------------------------------------------------
   The sidebar is fixed and above the content, so scrolling a table sideways or
   scrolling the page down can never move it out of reach or bury it under the
   table's sticky header.
   -------------------------------------------------------------------------- */
.app-menu,
.startbar {
    /* Above the page content, so a table's sticky header can never cover a menu
       item; below nothing else in the shell. */
    z-index: 40;
}

/* The sidebar keeps its own width whatever the page contains. */
.app-menu {
    flex: 0 0 auto;
}

/* The master-data tables use sticky headers and frozen identity columns. Their
   z-index must stay below the sidebar and the topbar. */
.md-table thead th {
    z-index: 5;
}
.md-table .md-freeze-1,
.md-table .md-freeze-2,
.md-table .md-freeze-last {
    z-index: 6;
}
.md-table thead .md-freeze-1,
.md-table thead .md-freeze-2,
.md-table thead .md-freeze-last {
    z-index: 7;
}

/* -----------------------------------------------------------------------------
   4. Grid and flex children (§12, §51)
   -----------------------------------------------------------------------------
   A grid or flex child's automatic minimum size is its content's, so one wide
   child — a chart canvas that renders at a fixed pixel width, a long unbroken
   string — makes its track wider than the track it was given, and the page with
   it. This was hidden while `.page-content` clipped its own overflow; the cards
   simply extended past the right edge of a phone screen.
   -------------------------------------------------------------------------- */
.grid-compact > *,
.compact-card {
    min-width: 0;
    max-width: 100%;
}

/* A rendered chart never dictates the width of the card that holds it. */
.apexcharts-canvas,
.apexcharts-canvas svg,
.chart-container,
.chart-container canvas {
    max-width: 100%;
}