/* =====================================================================
   responsive_global.css
   ---------------------------------------------------------------------
   Single global responsive layer for the whole application.

   Loaded LAST in navbar/navbar.html (after every app-specific stylesheet)
   so it wins the cascade everywhere without editing 100+ templates.

   Goal: the SAME content on every page adapts to every screen size —
   phones, tablets, laptops, large desktops, and ultra-wide displays —
   without horizontal page overflow and without hiding information.

   Strategy
   - Never let the page scroll sideways: only designated wrappers scroll.
   - Wide data tables scroll horizontally inside their own container
     instead of stretching the page.
   - Filter grids, Bootstrap grids and card rows collapse to fewer
     columns as the viewport narrows.
   - Cards, forms, modals and the print/invoice sheets shrink to fit.
   - Fluid typography keeps text readable on any display.

   Breakpoints (align with Bootstrap 5):
     >=1400  xxl   large / ultra-wide desktop
     1200    xl    desktop
     992     lg    small desktop / landscape tablet
     768     md    tablet
     576     sm    large phone
     <576    xs    phone
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 0. Global box model + no sideways page scroll                       */
/* ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  /* `clip` prevents sideways scrolling WITHOUT creating a scroll
     container, so it does not break `position: sticky` descendants
     (which `overflow-x: hidden` would). Falls back to hidden on old
     browsers that don't support clip. */
  overflow-x: hidden;
  overflow-x: clip;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

/* Long unbroken strings (URLs, codes) must not force width */
.saa-main-content,
.vyo-page,
.card,
.card-body,
td,
th,
p,
span,
a,
label {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Table cells keep normal wrapping but never explode the layout */
td,
th {
  word-break: normal;
}

/* ------------------------------------------------------------------ */
/* 1. Main content container fluid padding                             */
/* ------------------------------------------------------------------ */
.saa-main-content {
  width: 100%;
  max-width: 100%;
}
.saa-main-content > .container-fluid,
.saa-main-content > .saa-content-wrap {
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* ------------------------------------------------------------------ */
/* 2. Fluid, readable typography                                       */
/* ------------------------------------------------------------------ */
:root {
  --rg-base-font: clamp(13px, 0.6vw + 11px, 15px);
}
body {
  font-size: var(--rg-base-font);
}

/* ------------------------------------------------------------------ */
/* 3. Tables — always scroll horizontally inside their own box         */
/*    instead of stretching the page. Works whether or not the table   */
/*    was wrapped in a .table-responsive / .vyo-table-wrap.            */
/* ------------------------------------------------------------------ */
.table-responsive,
.vyo-table-wrap,
.table-wrap,
.dataTables_wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Any bare <table> that is a direct/near child of the content area and
   is NOT already inside a scroll wrapper: give it a scroll context by
   allowing its parent card body to scroll. */
.card-body > .table,
.saa-main-content .table:not(.dataTable) {
  max-width: 100%;
}

/* On narrow screens (768–991px) keep horizontal scroll for medium tables. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .table-responsive,
  .vyo-table-wrap,
  .table-wrap,
  .dataTables_wrapper {
    overflow-x: auto;
  }
  table.table,
  table.dataTable {
    min-width: 640px;   /* keep columns legible; wrapper scrolls */
  }
}

/* DataTables toolbar (length + search + buttons) stacks on small screens */
@media (max-width: 767.98px) {
  .dataTables_wrapper .row,
  .dataTables_wrapper .dt-layout-row {
    flex-direction: column;
    gap: 6px;
  }
  .dataTables_length,
  .dataTables_filter,
  .dt-buttons {
    text-align: left !important;
    float: none !important;
    width: 100%;
  }
  .dataTables_filter input {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* 3b. MOBILE TABLE CAROUSEL — one row at a time, swipe L/R.           */
/*     Removes the horizontal scrollbar entirely on phones.           */
/* ------------------------------------------------------------------ */
.tcx-carousel { display: none; }

@media (max-width: 767.98px) {
  /* Hide the raw table + its horizontal scroll area when carousel is on. */
  table.tcx-hidden-table { display: none !important; }
  .tcx-wrap-mobile { overflow: visible !important; }
  .tcx-wrap-mobile table.dataTable { min-width: 0 !important; }

  .tcx-carousel {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;               /* no horizontal scrollbar, ever */
    margin-top: 6px;
  }
  .tcx-track {
    display: flex;
    width: 100%;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .tcx-slide {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 2px;
  }
  .tcx-card {
    background: #fff;
    border: 1px solid #e3ecea;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(16, 40, 37, 0.06);
    padding: 6px 12px;
  }
  .tcx-field {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #f0f4f3;
  }
  .tcx-field:last-child { border-bottom: none; }
  .tcx-label {
    flex: 0 0 42%;
    font-size: 11px;
    font-weight: 700;
    color: #5b6b6a;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.4;
    word-break: break-word;
  }
  .tcx-value {
    flex: 1 1 58%;
    font-size: 13px;
    color: #0f2a28;
    line-height: 1.4;
    word-break: break-word;
    min-width: 0;
  }
  .tcx-value a { color: #17736b; font-weight: 600; }
  .tcx-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 12px 0 4px;
  }
  .tcx-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: #17736b;
    color: #fff;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(23, 115, 107, 0.28);
    transition: background 0.15s ease, transform 0.12s ease, opacity 0.15s ease;
  }
  .tcx-btn:hover { background: #12665f; }
  .tcx-btn:active { transform: scale(0.94); }
  .tcx-btn:disabled { background: #cdd9d7; box-shadow: none; cursor: default; }
  .tcx-count {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #33514d;
    min-width: 58px;
    text-align: center;
  }
  .tcx-count .tcx-idx { color: #17736b; }
  .tcx-empty {
    text-align: center;
    padding: 24px 12px;
    color: #8fa4a2;
    font-size: 13px;
  }
}

/* ------------------------------------------------------------------ */
/* 4. Filter grids (vyo- design system) collapse progressively         */
/* ------------------------------------------------------------------ */
.vyo-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  align-items: flex-end;
}

@media (max-width: 991.98px) {
  .vyo-filter-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}
@media (max-width: 767.98px) {
  .vyo-filter-grid {
    grid-template-columns: 1fr 1fr;
  }
  .vyo-filter-actions-block,
  .filter-actions-block,
  .action-block {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}
@media (max-width: 480px) {
  .vyo-filter-grid {
    grid-template-columns: 1fr;
  }
}

.vyo-filter-field-wrap {
  min-width: 0;   /* let fields shrink inside the grid */
}
.vyo-filter-field-wrap .form-control,
.vyo-filter-field-wrap .form-select,
.vyo-filter-field-wrap select,
.vyo-filter-field-wrap input {
  width: 100%;
  max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* 5. Bootstrap grid safety — columns wrap and never overflow          */
/* ------------------------------------------------------------------ */
.row {
  margin-left: 0;
  margin-right: 0;
}
[class^="col-"],
[class*=" col-"] {
  min-width: 0;   /* critical: lets flex/grid children shrink */
}

/* Below md, treat fixed md columns as full width so forms stack cleanly.
   (Bootstrap's own col-md-* already do this; this covers custom columns
   that hard-code widths.) */
@media (max-width: 767.98px) {
  .saa-main-content [class*="col-md-"],
  .saa-main-content [class*="col-lg-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Generic CSS grids that hard-code many columns: cap on small screens */
@media (max-width: 767.98px) {
  .filter-grid,
  .form-grid,
  .field-grid,
  .stats-grid,
  .vyo-stats {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 480px) {
  .filter-grid,
  .form-grid,
  .field-grid,
  .stats-grid,
  .vyo-stats {
    grid-template-columns: 1fr !important;
  }
}

/* ------------------------------------------------------------------ */
/* 6. Cards, page headers, form controls                               */
/* ------------------------------------------------------------------ */
.card,
.vyo-report-filters-card,
.filters-card,
.vyo-card {
  max-width: 100%;
}

/* Page headers with title + actions: stack when cramped */
@media (max-width: 767.98px) {
  .vyo-page-header,
  .page-header,
  .card-header.d-flex {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
  }
  .vyo-page-header .actions,
  .page-header .actions {
    width: 100%;
  }
  /* But the Create / primary action button should size to its content,
     not stretch to the full row width. Keep it compact, aligned left. */
  .vyo-page-header > .vyo-create-btn,
  .vyo-page-header .vyo-create-btn {
    align-self: flex-start;
    width: auto;
    flex: 0 0 auto;
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* Inputs never overflow their container */
.form-control,
.form-select,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="search"],
textarea,
select {
  max-width: 100%;
}

/* d-flex rows of buttons/filters wrap instead of overflowing */
@media (max-width: 767.98px) {
  .saa-main-content .d-flex.flex-nowrap:not(.keep-nowrap) {
    flex-wrap: wrap !important;
  }
}

/* ------------------------------------------------------------------ */
/* 7. Modals — fit the viewport on phones                              */
/* ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    max-width: calc(100% - 1rem);
  }
  .modal-body {
    max-height: 75vh;
    overflow-y: auto;
  }
  .modal-footer {
    flex-wrap: wrap;
    gap: 6px;
  }
  .modal-footer > .btn {
    flex: 1 1 auto;
  }
}

/* Modal bodies that contain wide tables: let them scroll */
.modal-body .table-responsive,
.modal-body .vyo-table-wrap {
  overflow-x: auto;
}

/* ------------------------------------------------------------------ */
/* 8. Buttons and button groups on small screens                       */
/* ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .btn-group.flex-wrap-sm {
    flex-wrap: wrap;
  }
  /* Full-width primary action rows commonly seen in forms */
  .form-actions,
  .vyo-form-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .form-actions .btn,
  .vyo-form-actions .btn {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* 9. Invoice / print / statement sheets                               */
/*    Keep the fixed A4-ish sheet centered and scrollable on screen,   */
/*    but let it print at its true size.                               */
/* ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .invoice-box,
  .invoice-sheet,
  .print-sheet,
  .a4-sheet,
  .statement-sheet {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
  }
}

@media print {
  html,
  body {
    overflow: visible !important;
  }
  .saa-side-nav,
  .saa-nav-toggle,
  .no-print {
    display: none !important;
  }
  .saa-main-content {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ------------------------------------------------------------------ */
/* 9c. Self-contained mobile menu (hamburger + collapse)               */
/*     The app's original mobile toggle relied on an element id that   */
/*     isn't in the template, so on phones the nav could stay fully    */
/*     expanded and "not close" after selecting a page. This adds an   */
/*     independent, reliable collapse driven by body.rg-nav-open,      */
/*     controlled by #rgNavToggle and closed automatically on link     */
/*     tap (see navbar.js). Desktop (>=992px) is untouched.            */
/* ------------------------------------------------------------------ */

/* Hamburger button: hidden on desktop, shown on mobile */
.rg-nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 8px;
}
.rg-nav-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 991.98px) {
  /* Header row: brand + hamburger on one line */
  .saa-sidebar .saa-sidebar-inner {
    position: relative;
  }
  .rg-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 3;
  }

  /* Collapse the nav lists by default on mobile */
  .saa-side-nav,
  .saa-side-bottom {
    display: none;
  }
  /* Reveal them only when the menu is open */
  body.rg-nav-open .saa-side-nav,
  body.rg-nav-open .saa-side-bottom {
    display: flex;
  }

  /* When open, the sidebar becomes a scrollable full-height panel */
  body.rg-nav-open .saa-sidebar {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  body.rg-nav-open .saa-sidebar .saa-sidebar-inner {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  /* Prevent the page behind the open menu from scrolling */
  body.rg-nav-open {
    overflow: hidden;
  }
  /* Rotate hamburger to an X when open */
  body.rg-nav-open .rg-nav-toggle i::before {
    content: "\f00d"; /* fa-xmark */
  }
}

/* ------------------------------------------------------------------ */
/* 9b. Mobile navigation polish                                        */
/*     The base navbar.css opens the mobile menu at height:100vh.      */
/*     On mobile browsers 100vh is taller than the visible area (the   */
/*     address bar is excluded), so the last menu items get cut off    */
/*     and can't be reached. Use the dynamic viewport unit (dvh) where */
/*     supported, add momentum scrolling, and respect the iOS safe     */
/*     area so every nav item is reachable.                            */
/* ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .saa-sidebar.saa-open {
    height: 100vh;            /* fallback for old browsers */
    height: 100dvh;           /* correct visible height on modern mobile */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .saa-sidebar.saa-open .saa-sidebar-inner {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  /* Give nav rows a comfortable tap target (>=44px) on touch screens */
  .saa-side-item,
  .saa-flyout-link,
  .saa-flyout-head {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* Prevent the page behind the open menu from scrolling underneath */
  body:has(.saa-sidebar.saa-open) {
    overflow: hidden;
  }
}

/* ------------------------------------------------------------------ */
/* 10. Charts / map / tracking canvases fill their column              */
/* ------------------------------------------------------------------ */
.chart-container,
canvas,
#map,
.leaflet-container,
.map-container {
  max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* 11. Large-desktop comfort: don't over-stretch dense forms           */
/* ------------------------------------------------------------------ */
@media (min-width: 1600px) {
  .vyo-filter-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* ------------------------------------------------------------------ */
/* 12. Utility: horizontal scroll hint for very wide tables            */
/* ------------------------------------------------------------------ */
.table-responsive,
.vyo-table-wrap {
  scrollbar-width: thin;
}
.table-responsive::-webkit-scrollbar,
.vyo-table-wrap::-webkit-scrollbar {
  height: 8px;
}
.table-responsive::-webkit-scrollbar-thumb,
.vyo-table-wrap::-webkit-scrollbar-thumb {
  background: var(--vyo-primary, #0f736b);
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────
   Global: slightly tighter table rows (reduced row height)
   Trims only vertical cell padding so text/columns are unaffected.
   Loaded on every page via navbar base template, so it applies app-wide.
   ───────────────────────────────────────────────────────────── */
table.dataTable tbody td,
table.dataTable tbody th,
table.table > tbody > tr > td,
table.table > tbody > tr > th,
#datasTable > tbody > tr > td,
#datasTable > tbody > tr > th {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* Keep header rows proportionate to the tighter body rows */
table.dataTable thead th,
table.dataTable thead td,
table.table > thead > tr > th,
table.table > thead > tr > td,
#datasTable > thead > tr > th,
#datasTable > thead > tr > td {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL ACTION-BUTTON COLORS (applies on every page — this file loads
   after page CSS, so these win). Covers both the #datasTable-scoped and
   unscoped class-name variants used across the project.
     View    → purple
     Edit    → yellow
     History → orange
     Delete  → red
     Home    → sky blue
   ═══════════════════════════════════════════════════════════════════════ */

/* View = purple */
#datasTable .viewBtn, #datasTable .vyo-act-view,
.viewBtn, .vyo-act-view {
    background: #1c858533 !important;
    color: #1C8585 !important;
    border: 1.5px solid #1C8585 !important;
}

/* Edit = yellow */
#datasTable .editBtn, #datasTable .vyo-act-edit,
.editBtn, .vyo-act-edit {
  background: #fdf6d8 !important;
  color: #a68b00 !important;
  border: 1.5px solid #a68b00 !important;
}

/* History = orange */
#datasTable .historyBtn, #datasTable .vyo-act-history,
.historyBtn, .vyo-act-history {
  background: #fef3c7 !important;
  color: #e69333 !important;
  border: 1.5px solid #f0a92b !important;
}

/* Delete = red */
#datasTable .deleteBtn, #datasTable .del-button, #datasTable .vyo-act-delete,
.deleteBtn, .del-button, .vyo-act-delete {
  background: #fdecea !important;
  color: #d0342c !important;
  border: 1.5px solid #f4b5b0 !important;
}

/* Home = sky blue */
#datasTable .homeBtn, #datasTable .vyo-act-home,
.homeBtn, .vyo-act-home {
    background: #0891b233 !important;
    color: #0891b2 !important;
    border: 1.5px solid #0891b2 !important;
}