/* Apple design layer — loaded LAST on every page (_Layout, _AuthLayout) so it
   refines the shared classes (sidebar, topbar, cards, tables, buttons, forms,
   login) without touching per-page markup. Principles applied:
   response (instant press feedback), critically-damped springs (no overshoot
   on passive UI), translucent materials (topbar, menus, sheets), size-specific
   tracking, and reduced-motion / reduced-transparency / more-contrast support. */

:root {
  /* Critically damped settle (damping 1.0, response ~0.4s) — iOS sheet curve. */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-press: 100ms;
  --dur-move: 400ms;

  --material-bg: rgba(255, 255, 255, 0.72);
  --material-border: rgba(255, 255, 255, 0.5);
  --material-edge: rgba(0, 0, 0, 0.06);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 8px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 20px;
  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--brand-700) 28%, transparent);
}

html[data-theme="dark"] {
  --material-bg: rgba(27, 34, 34, 0.7);
  --material-border: rgba(255, 255, 255, 0.08);
  --material-edge: rgba(255, 255, 255, 0.08);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.6);
}

/* ---------- Typography: size-specific tracking & leading ---------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss03";
  line-height: 1.5;
}

h1, .page-header h1 { letter-spacing: -0.03em; line-height: 1.1; font-weight: 650; }
h2 { letter-spacing: -0.02em; line-height: 1.2; }
h3, h4 { letter-spacing: -0.012em; line-height: 1.25; }
h5, h6 { letter-spacing: -0.006em; }
.kpi-card__value { letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.mono, .pm-table td, .kpi-card__delta { font-variant-numeric: tabular-nums; }
/* Small caps-style labels want a little extra air for legibility. */
.kpi-card__label, .form-label-custom, .pm-table thead th { letter-spacing: 0.04em; }

/* ---------- Response: instant press feedback everywhere ---------- */
.btn, .btn-export, .btn-outline-filter, .btn-filled-export, .btn-signin,
.icon-btn, .sidebar-toggle, .sidebar__link, .topbar-org-trigger,
.topbar-org-option, .pm-filter-bar__reset, .ua-link-btn, .ua-crumb {
  transition: transform var(--dur-press) var(--ease-out),
    background-color 180ms ease, border-color 180ms ease,
    color 180ms ease, box-shadow 220ms var(--ease-out), opacity 180ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* removes the 300ms tap delay */
}

.btn:active, .btn-export:active, .btn-outline-filter:active,
.btn-filled-export:active, .btn-signin:active, .icon-btn:active,
.sidebar-toggle:active, .topbar-org-trigger:active, .account-menu__trigger:active {
  transform: scale(0.96);
  transition-duration: 60ms;
}
.sidebar__link:active { transform: scale(0.985); transition-duration: 60ms; }

/* Buttons: rounder, softer, less shouty. */
.btn-export, .btn-outline-filter, .btn-filled-export, .btn-signin, .btn {
  border-radius: 999px;
}
.btn-export, .btn-outline-filter, .btn-filled-export { padding: 8px 18px; letter-spacing: 0.04em; }
.btn-filled-export, .btn-signin {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.btn-filled-export:hover, .btn-signin:hover { box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-900) 35%, transparent); }
.btn-outline-filter, .btn-export { box-shadow: var(--shadow-1); }

/* Focus: a soft halo, not a hard outline. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: inherit;
}
.sidebar__link:focus-visible { box-shadow: inset 0 0 0 2px var(--mint-300); }

/* ---------- Materials: translucent chrome, scroll-edge instead of a divider ---------- */
.topbar {
  background-color: var(--material-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  box-shadow: 0 1px 0 var(--material-edge);
  transition: box-shadow 250ms var(--ease-out), background-color 250ms ease;
}
/* Content scrolls under the bar — a soft fade replaces the hard rule. */
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 16px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 55%, transparent), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms var(--ease-out);
}
.topbar.is-scrolled::after { opacity: 1; }
.topbar.is-scrolled { box-shadow: 0 1px 0 var(--material-edge), 0 6px 20px rgba(0, 0, 0, 0.04); }

.sidebar {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 30%);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04);
  transition: transform var(--dur-move) var(--ease-spring);
}
.main-content { transition: margin-left var(--dur-move) var(--ease-spring); }

/* Sidebar links: pill-shaped selection instead of a hard left bar. */
.sidebar__nav { padding: 8px 10px; }
.sidebar__footer { padding-left: 10px; padding-right: 10px; }
.sidebar__link {
  border-left: 0;
  border-radius: var(--radius-s);
  padding: 10px 14px;
  margin-bottom: 2px;
}
.sidebar__link:hover { border-left-color: transparent; }
.sidebar__link.active {
  background-color: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.sidebar__link.active:hover { background-color: rgba(255, 255, 255, 0.14); }

/* Dropdown / org menus: floating glass sheets that grow from their trigger. */
.topbar-org-menu, .sidebar__org-menu, .account-menu__panel {
  background-color: var(--material-bg);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--material-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-3);
  transform-origin: top right;
}
.sidebar__org-menu { transform-origin: bottom left; }
.topbar-org-menu:not(.is-visible), .sidebar__org-menu:not(.is-visible), .account-menu__panel:not(.is-visible) {
  transform: scale(0.96);
}
.topbar-org-menu.is-visible, .sidebar__org-menu.is-visible, .account-menu__panel.is-visible { transform: scale(1); }
.topbar-org-menu, .sidebar__org-menu, .account-menu__panel {
  transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-spring), visibility 0s linear 260ms;
}
.topbar-org-menu.is-visible, .sidebar__org-menu.is-visible, .account-menu__panel.is-visible {
  transition-delay: 0s;
}
.topbar-org-option { border-radius: var(--radius-s); }
/* The account panel carries text blocks (name, email), so it stays opaque —
   page content showing through the glass made them hard to read. */
.account-menu__panel {
  background-color: var(--surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Backdrops: dim + gentle blur, fading (not popping) in and out. */
.sidebar-backdrop {
  display: block;
  visibility: hidden;
  opacity: 0;
  background: rgba(10, 20, 20, 0.36);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: opacity var(--dur-move) var(--ease-spring), visibility 0s linear var(--dur-move);
}
body.sidebar-open .sidebar-backdrop {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.hover-dim-overlay {
  background: rgba(10, 20, 20, 0.32);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: opacity 260ms var(--ease-spring);
}

/* ---------- Surfaces: cards ---------- */
.kpi-card, .chart-card, .pm-table-card, .login-card, .auth-card,
.assets-grid > * {
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
}
.kpi-card, .chart-card {
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  transition: transform var(--dur-move) var(--ease-spring), box-shadow var(--dur-move) var(--ease-spring);
}
.pm-table-card, .auth-card, .login-card {
  border-color: color-mix(in srgb, var(--border) 60%, transparent);
}
/* Larger surfaces read thicker: deeper shadow when they lift. */
@media (hover: hover) and (pointer: fine) {
  .kpi-card:hover { box-shadow: var(--shadow-2); }
  .chart-card:hover { box-shadow: var(--shadow-2); }
}
.kpi-card:active, .chart-card:active { transition-duration: 80ms; }

/* Page entrance: rise + fade for the header and the main content blocks. */
@keyframes apple-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .page-header, .pm-filter-bar, .pm-table-card, .auth-card {
    animation: apple-rise 520ms var(--ease-spring) both;
  }
  .pm-filter-bar { animation-delay: 60ms; }
  .pm-table-card { animation-delay: 110ms; }
}

/* ---------- Tables ---------- */
.pm-table thead th { background: color-mix(in srgb, var(--bg) 70%, var(--surface)); }
.pm-table tbody tr { transition: background-color 160ms ease; }
.pm-table tbody tr:active { background: color-mix(in srgb, var(--border) 45%, transparent); }
.pm-table-card { border-radius: var(--radius-m); }

/* ---------- Forms ---------- */
.form-control, .form-select, .pm-filter-bar__search input {
  border-radius: var(--radius-s);
  transition: box-shadow 220ms var(--ease-out), border-color 180ms ease, background-color 180ms ease;
}
.form-control:focus, .form-select:focus, .form-check-input:focus,
.pm-filter-bar__search input:focus {
  border-color: var(--brand-700);
  box-shadow: var(--focus-ring);
  outline: none;
}
.form-check-input { transition: background-color 160ms ease, border-color 160ms ease, box-shadow 220ms var(--ease-out); }
.form-check-input:checked { background-color: var(--brand-700); border-color: var(--brand-700); }
.form-switch .form-check-input { transition: background-position 260ms var(--ease-spring), background-color 160ms ease; }
.invalid-feedback, .text-danger.field-validation-error, .field-validation-error {
  animation: apple-rise 240ms var(--ease-spring) both;
}

/* Status pills / badges: soft, rounded. */
.pm-status, .live-badge { border-radius: 999px; }

/* ---------- Login / auth ---------- */
.login-card, .auth-card {
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
}
.btn-signin { padding-top: 0.75rem; padding-bottom: 0.75rem; }

/* ---------- Scrolling ---------- */
html { scroll-behavior: smooth; }
.sidebar__nav, .table-responsive, .pm-table-card { overscroll-behavior: contain; }
.sidebar__nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
::selection { background: color-mix(in srgb, var(--brand-700) 28%, transparent); }

/* Mobile drawer is dragged 1:1 by apple.js; while dragging, disable the transition. */
.sidebar.is-dragging { transition: none; }
.sidebar-backdrop.is-dragging { transition: none; }

/* ============ Accessibility: reduced motion / transparency / contrast ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .page-header, .pm-filter-bar, .pm-table-card, .auth-card { animation: none; }
  .btn:active, .btn-export:active, .btn-outline-filter:active, .btn-filled-export:active,
  .btn-signin:active, .icon-btn:active, .sidebar-toggle:active, .sidebar__link:active,
  .topbar-org-trigger:active { transform: none; }
  .sidebar, .main-content { transition-duration: 1ms; }
  /* Menus & backdrops cross-fade only — no scale/slide. */
  .topbar-org-menu:not(.is-visible), .sidebar__org-menu:not(.is-visible), .account-menu__panel:not(.is-visible) { transform: none; }
  .topbar-org-menu, .sidebar__org-menu, .account-menu__panel { transition: opacity 160ms ease, visibility 0s linear 160ms; }
  .sidebar-backdrop { transition: opacity 160ms ease, visibility 0s linear 160ms; }
}

@media (prefers-reduced-transparency: reduce) {
  :root { --material-bg: var(--surface); }
  .topbar, .topbar-org-menu, .sidebar__org-menu, .account-menu__panel, .login-card, .auth-card,
  .sidebar-backdrop, .hover-dim-overlay {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .topbar-org-menu, .sidebar__org-menu, .account-menu__panel { background-color: var(--surface); }
}

@media (prefers-contrast: more) {
  :root { --material-bg: var(--surface); --material-edge: currentColor; }
  .kpi-card, .chart-card, .pm-table-card, .login-card, .auth-card {
    border: 1px solid var(--ink);
  }
  .btn-outline-filter, .btn-export { border-color: var(--ink); }
  .topbar-org-menu, .sidebar__org-menu, .account-menu__panel { border-color: var(--ink); background-color: var(--surface); }
}

/* ============ Sidebar on short screens ============
   The drawer is taller than many phones once SuperAdmin's footer links
   (Monitoring, User Management, User Analytics, Organizations) are added, and
   on mobile browsers `bottom: 0` can sit behind the dynamic toolbar. So:
   - size to the VISIBLE viewport (dvh), not the layout viewport;
   - the whole sidebar scrolls when its content is taller than the screen
     (previously only the nav list could, so the footer was simply cut off);
   - the nav keeps its natural height and the footer is never shrunk, so on a
     tall screen the footer still sits at the bottom, and on a short one it
     scrolls into reach. */
.sidebar {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sidebar__brand { flex-shrink: 0; }
.sidebar__nav { flex: 1 0 auto; overflow: visible; }
.sidebar__footer { flex-shrink: 0; }
@supports (height: 100dvh) {
  .sidebar { bottom: auto; height: 100dvh; }
}