/* ──────────────────────────────────────────────────────────────────────────
 * Global responsive baseline — loaded on every page via the HTML rewriter.
 * Mobile-first guardrails plus a hamburger-drawer sidebar at <1024px.
 * Per-page nuances live in each page's own <style> block.
 *
 * Rules in this file are NOT inside an @layer, so they beat any Tailwind
 * utility class — important for overriding inline `flex` and `margin-left`
 * on the page-wrapper and brand link.
 * ────────────────────────────────────────────────────────────────────── */

/* ── Sidebar collapse (desktop) ────────────────────────────────────────
 * The collapse toggle now lives in the topbar (rendered by initTopbar in
 * app.js), so the old floating ".sidebar-rail-toggle" pill is gone. The
 * in-brand ".sidebar-collapse-btn" is left visible/working as a secondary
 * control — no desktop override needed here. */

/* Hide hamburger by default — only visible on mobile/tablet. */
.mobile-nav-toggle {
  display: none;
}

@media (max-width: 1023px) {
  /* Prevent horizontal page scroll caused by hardcoded widths. */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Drop the hardcoded margin-left:240px that pushes every page off-screen.
     The page-wrapper is inlined on every HTML file as
       <div id="page-wrapper" style="margin-left:240px"> */
  #page-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0;
  }

  /* Sidebar becomes a slide-in drawer. */
  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 6px 0 24px rgba(15, 23, 42, 0.18);
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Backdrop behind drawer. */
  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .mobile-nav-backdrop.mobile-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Hamburger button — fixed top-left, floats over content. */
  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 98;
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    color: #0f172a;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
  }
  .mobile-nav-toggle:hover {
    background: #f8fafc;
  }
  .mobile-nav-toggle i {
    font-size: 20px;
  }

  /* Push first-row content (breadcrumb / page header) right of the
     hamburger so it doesn't sit under the button. */
  .cd-container,
  .ms-container,
  .cl-container,
  .rs-container,
  .dv-container,
  .eq-container,
  .mh-container,
  .dq-container,
  main {
    padding-top: 56px !important;
  }
}

/* Wider mobile breakpoint — tighter spacing + KPI grid relaxation. */
@media (max-width: 767px) {
  .cd-container,
  .ms-container,
  .cl-container,
  .rs-container,
  .dv-container,
  .eq-container,
  .mh-container,
  .dq-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* KPI grids that hardcode 4 columns become 2 cols on phone. */
  .cd-kpi-quad,
  .cl-kpi-strip,
  .rs-kpi-strip,
  .dv-kpi-strip,
  .ms-kpi-strip,
  .kpi-quad {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Detail shells (main + right rail) stack. Their own page CSS already
     does this at 1200px, but ensure single-col on phone too. */
  .cd-shell,
  .cl-shell,
  .rs-shell,
  .dv-shell {
    grid-template-columns: 1fr !important;
  }

  /* Sticky headers eat too much vertical real estate on a phone — release. */
  .cd-sticky-h,
  .cl-sticky-h,
  .rs-sticky-h {
    position: static !important;
  }

  /* Filter pills / saved-views rows wrap naturally. */
  .cd-filter-bar,
  .cl-filter-bar,
  .rs-filter-bar,
  .cl-pills-row,
  .rs-pills-row {
    flex-wrap: wrap !important;
  }

  /* Messagerie 3-pane (.mg-shell = 380px list + 1fr body) → single col.
     Page-specific JS may add a back-button to swap panes; until then,
     show whichever pane has .mg-active or fall back to the list. */
  .mg-shell {
    grid-template-columns: 1fr !important;
  }
}

/* ── Dashboard (Tableau de bord, index.html, .rp-* classes) ──────────────── */

/* Tablet — KPI row drops from 4 to 2, .rp-grid-3-2 stacks. */
@media (max-width: 1023px) {
  .rp-container {
    padding: 16px !important;
  }
  .rp-kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .rp-grid-3-2 {
    grid-template-columns: 1fr !important;
  }
  /* Tables in panels: horizontal scroll inside the panel, not the page. */
  .rp-panel {
    overflow-x: auto;
  }
  table.rp-t {
    min-width: 520px;
  }
  /* Tabs row (Direction / Manager / Support) — let it scroll horizontally
     instead of wrapping into two visually-confusing lines. */
  .rp-ptabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .rp-ptab {
    flex-shrink: 0;
  }
}

/* Phone — KPI 1 column, every grid stacks, charts shorter. */
@media (max-width: 640px) {
  .rp-container {
    padding: 12px !important;
  }
  .rp-title {
    font-size: 18px !important;
  }
  .rp-kpi-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  .rp-kpi {
    padding: 14px 16px !important;
  }
  .rp-kpi .v {
    font-size: 26px !important;
  }
  .rp-grid-2,
  .rp-grid-3-2 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .rp-compare {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .rp-compare .sep {
    display: none;
  }
  /* Charts are heavy on phones — shorten the tall ones so two stack visibly. */
  .rp-chart {
    height: 220px !important;
  }
  .rp-chart-tall {
    height: 260px !important;
  }
  /* Panel padding tighter. */
  .rp-panel {
    padding: 14px !important;
  }
  /* age-row's hardcoded 90px label column is cramped on narrow phones. */
  .age-row {
    grid-template-columns: 70px 1fr 50px !important;
    gap: 8px !important;
    font-size: 12px !important;
  }
  .stack-bar {
    min-width: 0 !important;
  }
  /* The page-wrapper uses Tailwind's h-screen overflow-hidden combined with
     an inner overflow-y-auto. That works as long as the topbar is short.
     Force the inner scroller to fill the viewport. */
  body.rp-page #page-wrapper > .flex-1 {
    min-height: 0;
  }
}

/* Very-narrow phones (<380px) — drop tab subtitles to save space. */
@media (max-width: 380px) {
  .rp-ptab .sub {
    display: none;
  }
  .rp-ptab {
    padding: 8px 10px 10px !important;
  }
}

/* Tablet — Messagerie list/body stay side-by-side but list narrower. */
@media (min-width: 768px) and (max-width: 1023px) {
  .mg-shell {
    grid-template-columns: 280px 1fr !important;
  }
}

/* Tables: any table inside a .scroll-wrap can overflow horizontally without
   blowing the page width. Page-level styles can opt in by wrapping
   <table> with <div class="scroll-wrap">. */
.scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 1023px) {
  /* Make ALL data tables horizontally scrollable inside their card without
     wrapping work per page. The card keeps its own width. */
  .cd-card table,
  .cl-card table,
  .rs-card table,
  .ms-card table,
  table.cd-table,
  table.cl-table,
  table.rs-table,
  table.ms-table {
    min-width: 600px;
  }
  .cd-card,
  .cl-card,
  .rs-card,
  .ms-card,
  .dv-card,
  .dm-card,
  .rp-card,
  .mg-card {
    overflow-x: auto;
  }

  /* demandes.html uses a custom grid for the row layout — let it scroll. */
  .dv-table-row,
  .dv-table-head {
    min-width: 760px;
  }
  .dv-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Demande detail (dm-) sticky elements release on mobile. */
  .dm-sticky-h {
    position: static !important;
  }
}