/**
 * Cross-platform responsive + PWA compatibility
 * Safe areas, modern viewport units, touch targets — no visual redesign.
 *
 * Mobile header chrome (SSoT):
 *   padding-top = safe-area inset + minimum chrome breath
 *     (safe-area alone is often 0 in mobile browsers / DevTools, which
 *      pinned brand/hamburger flush to the viewport edge and looked clipped)
 *   content row = --portal-topbar-h / --public-header-content-h
 *   total occupied height = --public-header-offset / --portal-header-offset
 *   flex align-items centers logo, hamburger, avatar, bell, title
 */

:root {
  /* Safe-area chain: 0 → iOS constant() → modern env() */
  --safe-top: 0px;
  --safe-right: 0px;
  --safe-bottom: 0px;
  --safe-left: 0px;
  --safe-top: constant(safe-area-inset-top);
  --safe-right: constant(safe-area-inset-right);
  --safe-bottom: constant(safe-area-inset-bottom);
  --safe-left: constant(safe-area-inset-left);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --portal-topbar-h: 3.5rem;
  --public-header-content-h: 4.5rem;
  --mobile-header-pad-y: 0.75rem;
  --mobile-header-pad-x: 1.5rem;
  /* Minimum top breath when safe-area is 0; notches add safe-top on top. */
  --chrome-pad-top: 0px;
  --public-header-offset: calc(
    var(--safe-top) + var(--chrome-pad-top) + var(--public-header-content-h)
  );
  --portal-header-offset: calc(
    var(--safe-top) + var(--chrome-pad-top) + var(--portal-topbar-h)
  );
  --app-vh: 100vh;
  --app-vh: 100dvh;
}

@media (max-width: 768px) {
  :root {
    /* ~16px minimum breath when safe-area is 0 (common in mobile browsers). */
    --chrome-pad-top: 1rem;
  }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

@supports (height: 100dvh) {
  body {
    min-height: 100dvh;
  }
}

/* ── Portal / admin shell height ── */
.admin-main,
.main,
.student-main {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ═══════════════════════════════════════════════════════════
   Shared mobile header chrome — portals + public site
   ═══════════════════════════════════════════════════════════ */

.topbar-mobile,
.student-topbar {
  box-sizing: border-box;
  height: var(--portal-header-offset);
  min-height: var(--portal-header-offset);
  padding-top: calc(var(--safe-top) + var(--chrome-pad-top));
  padding-bottom: 0;
  padding-left: max(1rem, var(--safe-left));
  padding-right: max(1rem, var(--safe-right));
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Public sticky / site headers — paint into the inset, center the row */
#site-header,
.site-header,
header.nav-header,
.fm-public-header {
  box-sizing: border-box;
  padding-top: calc(var(--safe-top) + var(--chrome-pad-top));
  padding-left: max(var(--mobile-header-pad-x), var(--safe-left));
  padding-right: max(var(--mobile-header-pad-x), var(--safe-right));
}

#site-header .header-inner,
.site-header .header-inner {
  box-sizing: border-box;
  height: var(--public-header-content-h);
  min-height: var(--public-header-content-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-left: 0;
  padding-right: 0;
  max-width: 75rem;
  margin: 0 auto;
  width: 100%;
}

/* Lightweight public back-bars (programs, blogs, admission, etc.) */
.topbar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Already has --mobile-header-pad-y breath; do not stack chrome-pad on top of it. */
  min-height: calc(var(--portal-topbar-h) + var(--safe-top) + max(var(--mobile-header-pad-y), var(--chrome-pad-top)));
  padding-top: calc(max(var(--mobile-header-pad-y), var(--chrome-pad-top)) + var(--safe-top));
  padding-bottom: var(--mobile-header-pad-y);
  padding-left: max(var(--mobile-header-pad-x), var(--safe-left));
  padding-right: max(var(--mobile-header-pad-x), var(--safe-right));
}

.fm-public-header {
  min-height: var(--portal-header-offset);
  padding-bottom: var(--mobile-header-pad-y);
  align-items: center;
}

/* Sidebar drawers respect safe areas */
.sidebar,
.student-sidebar {
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
}

@media (max-width: 768px) {
  .admin-main,
  .main,
  .student-main {
    padding-top: var(--portal-header-offset);
  }

  .admin-content,
  .main-inner,
  .student-content {
    padding-bottom: calc(3.75rem + var(--safe-bottom));
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
  }

  /* Keep public brand row from feeling clipped on narrow phones */
  #site-header .logo-emblem svg,
  .site-header .logo-emblem svg {
    width: 36px;
    height: 36px;
  }

  #site-header .logo-text,
  .site-header .logo-text {
    line-height: 1.15;
    padding-block: 2px;
  }

  #site-header .brand-name,
  .site-header .brand-name {
    font-size: 1.2rem;
    letter-spacing: 1.5px;
  }

  #site-header .hamburger,
  .site-header .hamburger {
    align-self: center;
  }
}

/* Sticky desktop portal header — extend into notch, center controls */
.portal-desktop-header {
  box-sizing: border-box;
  min-height: var(--portal-header-offset);
  height: auto;
  padding-top: calc(var(--safe-top) + var(--chrome-pad-top));
  padding-left: max(var(--content-pad, 2rem), var(--safe-left));
  padding-right: max(var(--content-pad, 2rem), var(--safe-right));
  top: 0;
  align-items: center;
}

/* Touch targets — hamburger + header actions.
   Sits inside header-inner (which is already offset by --safe-top via the
   header's padding-top), so this only needs to guarantee the tap target
   itself stays interactive and above adjacent sticky chrome. */
.hamburger {
  position: relative;
  z-index: 2;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  flex-shrink: 0;
}

.portal-notif-bell {
  min-width: 44px;
  min-height: 44px;
}

.portal-profile-trigger-mobile {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.topbar-mobile .portal-mobile-brand,
.student-topbar .portal-mobile-brand,
.topbar-mobile .topbar-mobile-label,
.student-topbar .topbar-mobile-label,
.topbar-mobile .student-count-pill,
.student-topbar .student-count-pill {
  align-self: center;
}

/* Tables / wide data — graceful horizontal scroll without page scroll */
.table-scroll,
.att-table-scroll,
.cm-table-wrap,
.sm-table-wrap,
.cl-table-wrap,
.roles-table-wrap,
.fee-history-scroll,
.register-section-body.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
}

.table-wrap,
.att-table-wrap {
  max-width: 100%;
}

/* Forms fit narrow screens */
input,
select,
textarea,
button,
.form-input,
.form-select,
.form-textarea {
  max-width: 100%;
}

@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px; /* prevent iOS Safari zoom on focus */
  }
}

/* Toast / floating UI — clear home indicator */
.toast {
  bottom: max(1rem, calc(1rem + var(--safe-bottom))) !important;
  right: max(1rem, calc(1rem + var(--safe-right))) !important;
}

/* PWA install banner — clear home indicator */
#pwa-install-banner {
  padding-bottom: max(0.625rem, var(--safe-bottom)) !important;
  padding-left: max(1rem, var(--safe-left)) !important;
  padding-right: max(1rem, var(--safe-right)) !important;
}

/* Auth walls use dynamic viewport */
.auth-wall,
body.gold-v1 .auth-wall-split {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Prevent horizontal page scroll from rare layout overflow */
html,
body {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* Landscape phones: keep topbar usable, reduce excess vertical padding */
@media (max-width: 900px) and (orientation: landscape) {
  .dash-v1 .welcome-strip,
  .dash-v1 .sp-page-header,
  .dash-v1 .student-welcome {
    margin-bottom: 0.5rem;
  }
}

/* iPad / Stage Manager: ensure content doesn't overflow narrow columns */
@media (min-width: 769px) and (max-width: 1180px) {
  .admin-content,
  .main-inner,
  .student-content {
    padding-left: max(1rem, var(--content-pad, 1.5rem));
    padding-right: max(1rem, var(--content-pad, 1.5rem));
  }
}

/* Mobile polish — touch targets, filters, sticky actions */
@media (max-width: 768px) {
  .btn-primary,
  .btn-ghost,
  .btn-action,
  .btn-add,
  .btn-fac-primary,
  .btn-fac-edit,
  button.btn-primary,
  button.btn-ghost {
    min-height: 44px;
    padding-inline: 0.875rem;
  }

  .filter-bar,
  .filters-row,
  .page-filters,
  .toolbar-filters {
    gap: 0.625rem;
  }

  .filter-bar select,
  .filter-bar input,
  .page-filters select,
  .page-filters input,
  .form-input,
  .form-select {
    min-height: 44px;
  }

  .nav-group-flyout--mobile,
  .nav-flyout.nav-group-flyout--mobile {
    max-height: min(70dvh, calc(100dvh - 1.5rem - var(--safe-top) - var(--safe-bottom)));
    padding-bottom: max(0.75rem, var(--safe-bottom));
  }

  .ks-academic-dialog,
  .fac-academic-dialog {
    max-height: min(88dvh, calc(100dvh - 1.5rem - var(--safe-top) - var(--safe-bottom)));
  }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}