/* ============================================================================
   AcadConnect — Shared responsive layer
   ----------------------------------------------------------------------------
   Loaded AFTER assets/system-theme.css on every page. This file is the single
   source of truth for cross-device behaviour (laptop / desktop / tablet /
   mobile) and is written mobile-first-friendly: the desktop layout you already
   have is preserved, and everything here either (a) applies at every size
   harmlessly, or (b) is scoped inside a media query.

   Because this is a Cordova (Android WebView) target, extra care is taken for:
     - safe-area insets (notch / gesture bar / rounded corners)
     - 100vh vs 100dvh (mobile browser chrome shrinking the viewport)
     - 44px minimum touch targets (WCAG 2.5.5 / Android guidelines)
     - 16px minimum form font-size (stops iOS/Android auto-zoom on focus)
     - momentum scrolling + overscroll containment
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. TOKENS
   ------------------------------------------------------------------------ */
:root {
  --rsp-gutter: 1.25rem;          /* horizontal page padding */
  --rsp-tap: 44px;                /* minimum comfortable touch target */
  --rsp-header-h: 60px;           /* sticky header height on small screens */
  --rsp-safe-t: env(safe-area-inset-top, 0px);
  --rsp-safe-r: env(safe-area-inset-right, 0px);
  --rsp-safe-b: env(safe-area-inset-bottom, 0px);
  --rsp-safe-l: env(safe-area-inset-left, 0px);
  --rsp-radius: 1rem;
  --rsp-drawer-w: min(84vw, 320px);
}

/* ---------------------------------------------------------------------------
   1. GLOBAL BOX MODEL + OVERFLOW CONTAINMENT
   ------------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0;                   /* flex/grid children may shrink instead of overflowing */
}

html {
  -webkit-text-size-adjust: 100%; /* never let mobile inflate text unpredictably */
  text-size-adjust: 100%;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;    /* kill horizontal rubber-banding */
}

/* Long unbroken strings (emails, IDs, URLs) must wrap instead of pushing width */
body {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ---------------------------------------------------------------------------
   2. MEDIA — never let an image/video/iframe exceed its container
   ------------------------------------------------------------------------ */
img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
  max-width: 100%;
}

img,
video,
canvas {
  height: auto;
}

/* ---------------------------------------------------------------------------
   3. FLEX / GRID SAFETY
   Anything that can hold a wide child (tables, code, long words) is allowed to
   scroll internally rather than stretch the whole document.
   ------------------------------------------------------------------------ */
.rsp-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
}

pre,
code {
  max-width: 100%;
}

pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------------
   4. TOUCH TARGETS + FORM CONTROLS (every device, incl. touch laptops)
   ------------------------------------------------------------------------ */
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
select,
summary {
  touch-action: manipulation;      /* removes the 300ms tap delay */
}

/* Form controls must be >=16px or mobile browsers zoom the page on focus. */
input,
select,
textarea {
  font-size: max(16px, 1em);
}

textarea {
  resize: vertical;
}

/* ---------------------------------------------------------------------------
   5. TABLES — scroll inside their wrapper, never widen the page
   ------------------------------------------------------------------------ */
.rsp-table-wrap,
.overflow-x-auto {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.rsp-table-wrap > table,
.overflow-x-auto > table {
  width: 100%;
}

/* ---------------------------------------------------------------------------
   6. MODALS / DIALOGS — always reachable and scrollable on a small screen
   ------------------------------------------------------------------------ */
[class*="fixed"][class*="inset-0"] {
  max-width: 100vw;
}

/* SweetAlert2: cap the popup and keep the buttons full-width & tappable. */
.swal2-popup {
  width: min(92vw, 30rem) !important;
  max-height: 90dvh !important;
  padding: 1.25rem !important;
  border-radius: 1.25rem !important;
  overflow-y: auto;
}

.swal2-title {
  font-size: 1.15rem !important;
  line-height: 1.35 !important;
}

.swal2-html-container {
  font-size: 0.9rem !important;
}

.swal2-actions {
  flex-direction: column-reverse;
  gap: 0.6rem;
  width: 100%;
}

.swal2-actions button {
  width: 100% !important;
  min-height: var(--rsp-tap);
  margin: 0 !important;
}

/* ---------------------------------------------------------------------------
   7. MOBILE DRAWER NAVIGATION
   The desktop sidebars (aside#sidebar) become an off-canvas drawer. They stay
   exactly as they are on desktop; the rules below only run at <=1024px.
   ------------------------------------------------------------------------ */

/* Hamburger trigger — hidden on desktop, shown from tablet down. */
.rsp-burger {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: var(--rsp-tap);
  height: var(--rsp-tap);
  flex: none;
  border-radius: 0.75rem;
  border: 1px solid rgba(25, 50, 74, 0.12);
  background: #fff;
  color: #19324a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rsp-burger:active {
  transform: scale(0.96);
}

/* Backdrop behind the open drawer */
.rsp-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(15, 23, 42, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.rsp-drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* Body scroll lock while the drawer is open */
body.rsp-drawer-open {
  overflow: hidden !important;
}

@media (max-width: 1024px) {
  .rsp-burger {
    display: inline-flex;
  }

  /* Off-canvas drawer: works whether the page uses aside#sidebar or aside. */
  aside#sidebar,
  aside.rsp-drawer,
  body > .flex > aside {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100dvh !important;
    min-height: 0 !important;
    width: var(--rsp-drawer-w) !important;
    max-width: var(--rsp-drawer-w) !important;
    margin: 0 !important;
    z-index: 100 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    transform: translate3d(-100%, 0, 0);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    padding-top: var(--rsp-safe-t);
    padding-bottom: var(--rsp-safe-b);
  }

  aside#sidebar.is-open,
  aside.rsp-drawer.is-open,
  body > .flex > aside.is-open {
    transform: translate3d(0, 0, 0);
  }

  /* Never show the collapse chevron once the sidebar is a drawer */
  aside#sidebar [onclick*="toggleSidebarCollapse"],
  aside#sidebar .rsp-hide-in-drawer {
    display: none !important;
  }

  /* Sidebar text must be visible inside the drawer even if the user had
     collapsed the desktop sidebar before rotating/resizing. */
  aside#sidebar .sidebar-text,
  aside#sidebar .sidebar-text * {
    display: block;
  }

  aside#sidebar .sidebar-text.whitespace-nowrap {
    white-space: normal !important;
  }

  /* A collapsed desktop sidebar must not stay 5rem wide on mobile. */
  aside#sidebar.w-20 {
    width: var(--rsp-drawer-w) !important;
  }
}

/* ---------------------------------------------------------------------------
   8. SMALL SCREENS (phones, <=640px)
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  :root {
    --rsp-gutter: 1rem;
  }

  /* ---- 8.1 Page gutters: collapse big desktop padding ---- */
  main,
  main > *,
  .tab-view,
  .tab-content {
    max-width: 100% !important;
  }

  .px-8,
  .px-10,
  .px-12,
  .px-16,
  .px-20 {
    padding-left: var(--rsp-gutter) !important;
    padding-right: var(--rsp-gutter) !important;
  }

  .p-8,
  .p-10,
  .p-12,
  .p-14,
  .p-16 {
    padding: 1.15rem !important;
  }

  .py-10,
  .py-12,
  .py-16 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* ---- 8.2 Every multi-column grid collapses to one column ---- */
  [class*="grid-cols-"]:not([class*="rsp-keep-cols"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Small paired controls (Month/Day, Start/End time) may keep two columns */
  .rsp-pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  /* ---- 8.3 Horizontal flex rows wrap instead of squashing ---- */
  .rsp-stack {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .rsp-stack > * {
    width: 100% !important;
  }

  /* ---- 8.4 Headings scale down so they never clip ---- */
  h1,
  .text-5xl,
  .text-6xl,
  .text-7xl,
  .text-4xl {
    font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
    line-height: 1.15 !important;
  }

  h2,
  .text-3xl {
    font-size: clamp(1.25rem, 5.5vw, 1.6rem) !important;
    line-height: 1.2 !important;
  }

  .text-2xl {
    font-size: 1.2rem !important;
    line-height: 1.25 !important;
  }

  /* Oversized decorative numerals in stat cards stay readable but fit */
  .text-4xl.font-black,
  .text-5xl.font-black {
    font-size: clamp(1.75rem, 9vw, 2.25rem) !important;
  }

  /* ---- 8.5 Corner radii: tame the very round desktop shapes ---- */
  [class*="rounded-[2.5rem]"],
  [class*="rounded-[3rem]"],
  [class*="rounded-[3.5rem]"],
  [class*="rounded-[4rem]"] {
    border-radius: 1.15rem !important;
  }

  [class*="rounded-[1.5rem]"],
  [class*="rounded-[2rem]"],
  [class*="rounded-[2.4rem]"] {
    border-radius: 1rem !important;
  }

  /* ---- 8.6 Sticky headers shrink + respect the notch ---- */
  header,
  nav.sticky,
  .sticky.top-0 {
    padding-top: var(--rsp-safe-t);
  }

  /* ---- 8.7 Tap targets & inputs ---- */
  button,
  [role="button"],
  .action-btn,
  .nav-link,
  .sidebar-btn,
  .nav-tab {
    min-height: var(--rsp-tap);
  }

  input,
  select,
  textarea {
    font-size: 16px !important;   /* prevents mobile auto-zoom on focus */
    min-height: var(--rsp-tap);
  }

  textarea {
    min-height: 6rem;
  }

  /* Icon-inset fields: reduce the huge left padding used on desktop */
  .input-field.pl-12,
  .input-field[class*="px-12"] {
    padding-left: 3rem !important;
  }

  /* ---- 8.8 Tables: allow the horizontal scroll gesture to work ---- */
  .rsp-table-wrap > table,
  .overflow-x-auto > table {
    min-width: 620px;
  }

  .rsp-table-wrap th,
  .rsp-table-wrap td,
  .overflow-x-auto th,
  .overflow-x-auto td {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.78rem !important;
    white-space: nowrap;
  }

  /* ---- 8.9 Modals: framed on-screen, never taller than the viewport ----
     The overlay scrolls only as a fallback. The dialog itself is capped to
     the visible area and scrolls internally, so its action buttons are
     always reachable rather than stranded below the fold.
     `dvh` is preferred because `vh` ignores mobile browser chrome. */
  [class*="fixed"][class*="inset-0"] {
    padding: var(--rsp-gutter) !important;
    padding-top: calc(var(--rsp-gutter) + var(--rsp-safe-t)) !important;
    padding-bottom: calc(var(--rsp-gutter) + var(--rsp-safe-b)) !important;
    align-items: center !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Cap the dialog to the viewport. Any element that was already given a
     max-height utility keeps a sensible cap instead of losing it. */
  [class*="fixed"][class*="inset-0"] > * {
    max-width: 100% !important;
    max-height: calc(100vh - (var(--rsp-gutter) * 2) - var(--rsp-safe-t) - var(--rsp-safe-b)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  @supports (height: 100dvh) {
    [class*="fixed"][class*="inset-0"] > * {
      max-height: calc(100dvh - (var(--rsp-gutter) * 2) - var(--rsp-safe-t) - var(--rsp-safe-b)) !important;
    }
  }

  /* ---- 8.10 Notification / dropdown panels go full-width ---- */
  [class*="w-\[340px\]"],
  .rsp-dropdown-panel {
    width: calc(100vw - (var(--rsp-gutter) * 2)) !important;
    max-width: calc(100vw - (var(--rsp-gutter) * 2)) !important;
    right: 0 !important;
  }

  /* ---- 8.11 Bottom padding so content clears the gesture bar ---- */
  body {
    padding-bottom: var(--rsp-safe-b);
  }
}

/* ---------------------------------------------------------------------------
   9. TABLETS (641px – 1024px)
   Sidebar becomes a drawer here too (rule 7), so the content area takes the
   full width and dense grids drop to two columns instead of four.
   ------------------------------------------------------------------------ */
@media (min-width: 641px) and (max-width: 1024px) {
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .lg\:grid-cols-\[0\.82fr_1\.18fr\] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [class*="grid-cols-"]:not([class*="rsp-keep-cols"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Single-column stacks stay single-column on tablet */
  .rsp-single {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---------------------------------------------------------------------------
   10. LARGE DESKTOP (>=1440px) — let content breathe a little more
   ------------------------------------------------------------------------ */
@media (min-width: 1440px) {
  .max-w-6xl {
    max-width: 80rem;
  }
}

/* ---------------------------------------------------------------------------
   11. DYNAMIC VIEWPORT HEIGHT
   `100vh` is wrong on mobile browsers whose chrome shows/hides. Where a page
   used min-h-screen for a full-height shell, prefer dvh when supported.
   ------------------------------------------------------------------------ */
@supports (height: 100dvh) {
  .min-h-screen {
    min-height: 100dvh;
  }
}

/* ---------------------------------------------------------------------------
   12. ACCESSIBILITY / INPUT MODALITY
   ------------------------------------------------------------------------ */
@media (hover: none) {
  /* Hover-lift effects are meaningless on touch and can cause sticky states */
  button:hover,
  a:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  aside#sidebar {
    transition: none !important;
  }
}

/* Visible focus ring for keyboard users (and TV/desktop remote) */
:focus-visible {
  outline: 2px solid var(--accent, #2f5d62);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   13. PRINT — the report/PDF pages should stay readable
   ------------------------------------------------------------------------ */
@media print {
  .rsp-burger,
  .rsp-drawer-backdrop,
  aside#sidebar,
  nav.sticky {
    display: none !important;
  }

  body {
    overflow: visible !important;
  }
}