/* ============================================================================
 * TTDC PMS — Responsive fixes                          ttdc-responsive.v2.css
 * ----------------------------------------------------------------------------
 * Loaded by index.html AFTER app.css, so these rules win where they overlap.
 *
 * v2 (2026-08-25) adds SECTION 0 — the fix for the horizontal scrolling seen on
 * the Dashboard and the Report pages, where the right-hand cards and panels ran
 * off the edge of the screen. Sections 1-4 are unchanged from v1.
 *
 * ---------------------------------------------------------------------------
 * SECTION 0 IS THE ONE PART THAT AFFECTS DESKTOP
 * ---------------------------------------------------------------------------
 * v1 kept every rule inside a max-width media query so laptops and desktops
 * were untouched. That is no longer possible, because the bug being fixed IS a
 * desktop bug. Section 0 therefore applies at every width.
 *
 * It only ever REMOVES an overflow. It sets no colour, no font, no spacing and
 * no size — nothing that can change how a page looks when it already fits.
 * ========================================================================== */


/* ===========================================================================
 * 0. HORIZONTAL OVERFLOW — the whole page scrolling sideways
 * ===========================================================================
 *
 * THE SYMPTOM
 *   On a 1366px laptop the Dashboard's "Total Fund" card was cut off at the
 *   right edge, the "District-wise Progress" chart was clipped, and the
 *   Report page's "Summary" panel was half off-screen. Scrolling right showed
 *   the rest. Every page did it.
 *
 * THE CAUSE — and it is NOT Bootstrap
 *
 *   The Bootstrap grid in this application is used correctly. The Dashboard
 *   stat cards are `col-xl-3 col-md-6`, the two chart panels are `col-lg-6`.
 *   Those are the right classes and they were never the problem.
 *
 *   The problem is one line in app.css:
 *
 *       .app-layout   { display: flex; }
 *       .sidebar      { position: fixed; width: 260px; }
 *       .main-content { margin-left: 260px; flex: 1; }   <- here
 *
 *   `.main-content` is a FLEX ITEM, and a flex item's default `min-width` is
 *   `auto` — meaning it refuses to shrink below the widest thing inside it.
 *
 *   Inside it are the Chart.js canvases. Chart.js with `responsive: true`
 *   measures its parent and sizes the canvas to match. But the parent is a
 *   flex item that will grow to fit its content, and the content is the canvas
 *   — so each measures the other and the pair settles at whatever width they
 *   happened to reach. Nothing was ever telling them to stop.
 *
 *   Two canvases side by side then set the width of `.main-content`, and the
 *   260px sidebar margin is added on top. The page ends up wider than the
 *   screen, and everything to the right of the fold gets pushed off.
 *
 * THE FIX
 *   `min-width: 0` lets the flex item shrink to its allocated space, and
 *   `max-width: 100%` on the canvas stops it claiming more. The feedback loop
 *   has a ceiling, and the Bootstrap columns then lay out at the widths they
 *   were always supposed to have.
 *
 *   This is the standard fix for the standard flexbox trap. The enhancement
 *   layer already applied it at phone widths (for the Permission Matrix); it
 *   simply was never applied at desktop widths, where the charts live.
 * ========================================================================= */

/* -- the flex item must be allowed to shrink -------------------------------- */
.main-content { min-width: 0; }

/* -- nothing inside may be wider than the page ----------------------------- */
.page-content,
.content-card,
.card-body-custom { max-width: 100%; }

/* -- Bootstrap columns are flex items too, and have the same default --------
   Bootstrap sets `width: 50%` on .col-lg-6, but `min-width: auto` still lets
   the column refuse to shrink below its content. This is what allowed one wide
   chart to widen its own column past 50%. */
.row > [class*="col-"] { min-width: 0; }

/* -- charts: give the canvas a ceiling -------------------------------------
   `width` is deliberately NOT set — Chart.js manages that itself, and fighting
   it produces a blurry canvas on high-DPI screens. Only the maximum is capped.
   The `!important` matches the specificity app.css already uses on canvas. */
.chart-wrapper { max-width: 100%; overflow: hidden; }
.chart-wrapper canvas { max-width: 100% !important; }

/* -- media and embeds ------------------------------------------------------ */
.page-content img,
.page-content svg,
.page-content video { max-width: 100%; height: auto; }


/* ===========================================================================
 * 0b. WIDE TABLES — scroll INSIDE the table, not the whole page
 * ===========================================================================
 *
 * A report table with many columns, or a row with a long value, used to widen
 * the page in exactly the same way — because `.dt-responsive` had no rule of
 * its own at any width above 767px. app.css only ever styled it inside the
 * phone breakpoint, where tables become stacked cards.
 *
 * From 768px up, the wrapper now scrolls horizontally on its own. The rest of
 * the page — the sidebar, the header, the cards above and below — stays put.
 *
 * Scoped to min-width 768px on purpose: BELOW that, the enhancement layer sets
 * `overflow-x: visible` so the stacked card view can spill naturally, and
 * overriding that would reintroduce a scrollbar on phones where there is
 * nothing to scroll.
 * ========================================================================= */
@media (min-width: 768px) {
  .dt-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* A table set to width:100% still cannot shrink below its own min-content,
     so it needs a floor to scroll against rather than a stretch instruction. */
  .dt-responsive table.data-table { min-width: 100%; width: auto; }

  /* The Permission Matrix on User Management — the one known table in the
     application that is NOT in a .dt-responsive wrapper and is genuinely wider
     than the page.
     
     Deliberately targeted by its own class rather than "every table that is not
     a .data-table". `display: block` changes how a table renders, and applying
     that to every incidental table in every card — most of which fit perfectly
     well — would be changing the design of pages that had nothing wrong with
     them. The enhancement layer already does exactly this for this same table
     at phone widths; this extends it to desktop, where it was also overflowing. */
  table.perm-matrix-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Make the horizontal scrollbar visible rather than an overlay that only
     appears mid-gesture — otherwise there is no clue the table scrolls. */
  .dt-responsive::-webkit-scrollbar { height: 10px; }
  .dt-responsive::-webkit-scrollbar-track { background: #F1F5F9; border-radius: 6px; }
  .dt-responsive::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 6px; }
  .dt-responsive::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
}


/* ===========================================================================
 * 1. TABLETS AND BELOW  (<= 991.98px — Bootstrap's `lg` boundary)
 * ========================================================================= */
@media (max-width: 991.98px) {
  .main-content { min-width: 0 !important; }
  .page-content { max-width: 100%; }
  .page-content img,
  .page-content canvas,
  .page-content svg { max-width: 100%; height: auto; }
}


/* ===========================================================================
 * 2. PHONES  (<= 767.98px — Bootstrap's `md` boundary)
 * ========================================================================= */
@media (max-width: 767.98px) {

  /* -- 2a. STOP iOS ZOOMING INTO EVERY FORM ------------------------------
     Safari on iPhone and iPad zooms the page in when a form control under
     16px is focused, and does NOT zoom back out. The app's controls are
     13-14px, so tapping any field left the officer zoomed in and scrolling
     sideways. 16px is the threshold; there is no way to opt out. */
  input[type="text"], input[type="number"], input[type="date"],
  input[type="email"], input[type="tel"], input[type="password"],
  input[type="search"], select, textarea,
  .form-group-custom input, .form-group-custom select, .form-group-custom textarea,
  .table-search input, .table-filters select {
    font-size: 16px;
  }
  .form-group-custom input,
  .form-group-custom select,
  .form-group-custom textarea { padding: 9px 12px; }

  /* -- 2b. TOUCH TARGETS -------------------------------------------------
     The edit and delete buttons are sized for a mouse pointer and sit a few
     pixels apart. That is the wrong pair to make easy to confuse. */
  .btn-icon {
    min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .data-table .btn-icon + .btn-icon { margin-left: 4px; }

  /* -- 2c. tables outside a .dt-responsive wrapper ------------------------ */
  .card-body-custom > table,
  .content-card table:not(.data-table) {
    display: block; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  /* -- 2d. long unbroken strings ----------------------------------------- */
  .detail-value,
  .card-body-custom .form-help,
  .data-table td,
  .data-table th { overflow-wrap: anywhere; word-break: break-word; }

  /* -- 2e. the Sub-Division master page ---------------------------------- */
  .ttdc14-chkgrid {
    grid-template-columns: 1fr 1fr; max-height: none; padding: 10px 12px;
  }
  .ttdc14-chk { padding: 3px 0; }
  .ttdc14-chk input { width: 18px; height: 18px; }
  #ttdc14-search { max-width: 100% !important; font-size: 16px; }
  .ttdc14-chip { white-space: normal; max-width: 100%; }
}


/* ===========================================================================
 * 3. SMALL PHONES  (<= 575.98px)
 * ========================================================================= */
@media (max-width: 575.98px) {
  .ttdc14-chkgrid { grid-template-columns: 1fr; }

  .content-card .card-header-custom > .btn-primary-custom,
  .content-card .card-header-custom > .btn-outline-custom {
    width: 100%; justify-content: center;
  }

  .card-body-custom > form > div[style*="justify-content:flex-end"],
  .card-body-custom > div[style*="justify-content:flex-end"] {
    flex-direction: column-reverse;
  }
  .card-body-custom > form > div[style*="justify-content:flex-end"] > button,
  .card-body-custom > div[style*="justify-content:flex-end"] > button {
    width: 100%;
  }

  .detail-grid { grid-template-columns: 1fr; }
}


/* ===========================================================================
 * 4. VERY SMALL / ZOOMED  (<= 400px)
 *    Also covers a desktop browser at 200% zoom, which is an accessibility
 *    requirement rather than an edge case.
 * ========================================================================= */
@media (max-width: 400px) {
  .page-content { padding: 12px 10px; }
  .ttdc14-chip  { font-size: 11px; padding: 2px 8px; }
}