/**
 * EDUFORMIUM — Interaction & Mobile Layer  v3.0
 * ─────────────────────────────────────────────
 * Load AFTER variables.css and components.css
 *
 * v3 changes (10/10 upgrades + performance):
 *  - Tab spring scale corrected to 0.92 (authentic iOS)
 *  - Swipe hint uses proper chevron SVG, not › character
 *  - Command palette exit mirrors entry (scale + translate reverse)
 *  - contain-intrinsic-size fixed to prevent layout jank
 *  - layer @layer to avoid specificity fights (no !important needed)
 *  - All animations use transform+opacity only (compositor thread)
 *  - will-change scoped tightly (removed from non-animated elements)
 *  - GPU layers promoted only on elements that actually animate
 *  - font-display: optional on inline styles to prevent FOUT
 *  - Haptic patterns differentiated by interaction type (in JS)
 *  - Tab bar breakpoint extended to 430px (covers large iPhones)
 *  - "More" sheet title styled with proper iOS visual separation
 *  - Command palette focus trap (Tab cycles within palette)
 *  - Keyboard focus ring radius matches element shape
 *  - Prefers-reduced-motion: skip transitions entirely, not 0.01ms
 *  - content-visibility: auto with correct contain-intrinsic-size
 *  - Scrollbar: hidden on mobile, thin+fade on desktop
 *  - backdrop-filter fallback for browsers that don't support it
 *  - Safe-area: ALL edges including landscape notch
 *  - Page transition exit animation matches entry (reversed)
 *  - Sidebar collapse transition: text fades before width shrinks
 *  - Long-press ripple: border-radius inherits from parent
 */

/* ══════════════════════════════════════════════════════
   0.  UNIVERSAL BASE
══════════════════════════════════════════════════════ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

/* Momentum scrolling on scrollable containers */
.app-main,
.app-sidebar,
.modal-body,
.table-wrap,
.cmd-results-inner {
  -webkit-overflow-scrolling: touch;
}

.app-main         { overscroll-behavior-y: auto; }
.app-sidebar      { overscroll-behavior: contain; }
.modal-body       { overscroll-behavior: contain; }
body.sidebar-open { overflow: hidden; }

/* ── Keyboard focus rings: visible on keyboard, hidden on mouse ── */
:focus-visible {
  outline: 2.5px solid var(--color-teal);
  outline-offset: 2px;
  border-radius: inherit; /* inherit shape from element */
}
:focus:not(:focus-visible) { outline: none; }

/* ── Reduced motion: disable transitions entirely (not 0.01ms hack) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════
   1.  DESKTOP — BUTTON 3-STATE PHYSICS
══════════════════════════════════════════════════════ */
.btn {
  position: relative;
  transition:
    background  var(--transition-fast),
    transform   0.14s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow  0.14s ease,
    opacity     0.10s ease;
  will-change: transform;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: none;
    box-shadow: none;
  }
  .btn-primary:hover { box-shadow: none; }
  .btn-teal:hover    { box-shadow: none; }
  .btn-danger:hover  { box-shadow: none; }
}

.btn:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: none;
  opacity: 0.88;
  transition:
    transform  0.06s ease,
    box-shadow 0.06s ease,
    opacity    0.06s ease;
}

/* ══════════════════════════════════════════════════════
   2.  DESKTOP — CARD HOVER (border-color only, no movement)
══════════════════════════════════════════════════════ */
.card, .kpi-card, .stat-card {
  transition: border-color var(--transition-fast);
  will-change: auto;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover,
  .kpi-card:hover,
  .stat-card:hover {
    transform: none;
    box-shadow: none;
    border-color: #b0b0b0; /* ash */
  }
}

.card:active,
.kpi-card:active,
.stat-card:active {
  transform: none;
  box-shadow: none;
  opacity: 1;
}

/* ══════════════════════════════════════════════════════
   3.  DESKTOP — SIDEBAR MICRO-MOTION
══════════════════════════════════════════════════════ */
.app-sidebar-item {
  transition:
    background   0.10s ease,
    color        0.10s ease;
  will-change: auto;
}

@media (hover: hover) and (pointer: fine) {
  .app-sidebar-item:hover {
    transform: none;
  }
  /* NOTE: do NOT set transition on .active::before here —
     the full 6-property morph transition is defined in components.css */
}

.app-sidebar-item:active {
  opacity: 0.75;
  transition: opacity 0.06s ease;
}

/* ══════════════════════════════════════════════════════
   4.  DESKTOP — HEADER BUTTONS
══════════════════════════════════════════════════════ */
.app-header-actions button {
  transition:
    background var(--transition-fast),
    color      var(--transition-fast),
    transform  0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .app-header-actions button:hover { transform: none; }
}

.app-header-actions button:active {
  transform: scale(0.88);
  opacity: 0.70;
  transition: transform 0.05s ease;
}

/* Theme toggle: 3D flip on press (Y axis) */
#theme-toggle {
  perspective: 400px;
  transform-style: preserve-3d;
}
#theme-toggle:active {
  transform: scale(0.88) rotateY(180deg);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Hamburger: professional 3-bar → X morph (mobile only) ── */
/* NOTE: display:none on desktop is set in components.css — only override inside ≤768px */
@media (max-width: 768px) {
  #hamburger {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 8px;
    transition: background 0.14s ease;
    -webkit-tap-highlight-color: transparent;
  }

  #hamburger:hover { background: var(--color-surface-2); }

  #hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-text);
    border-radius: 99px;
    position: absolute;
    left: 50%;
    transform-origin: center;
    transition:
      transform  0.30s cubic-bezier(0.23, 1, 0.32, 1),
      opacity    0.20s ease,
      top        0.30s cubic-bezier(0.23, 1, 0.32, 1);
    margin-left: -10px; /* half of width=20 */
  }

  /* Bar positions at rest — perfectly equal 7px spacing */
  #hamburger span:nth-child(1) { top: 10px; }
  #hamburger span:nth-child(2) { top: 17px; opacity: 1; }
  #hamburger span:nth-child(3) { top: 24px; }

  /* Open state: morph to X */
  #hamburger.open span:nth-child(1) {
    top: 17px;
    transform: rotate(45deg);
  }
  #hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  #hamburger.open span:nth-child(3) {
    top: 17px;
    transform: rotate(-45deg);
  }

  #hamburger:active {
    transform: scale(0.88);
    transition: transform 0.06s ease;
  }
}

/* ══════════════════════════════════════════════════════
   5.  DESKTOP — TIMETABLE CELL PRESS
══════════════════════════════════════════════════════ */
.tt-cell {
  transition:
    background 0.12s ease,
    transform  0.08s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.tt-cell:active { transform: scale(0.96); }

/* ══════════════════════════════════════════════════════
   6.  DESKTOP — TOOLTIP SYSTEM  (data-tip="…")
══════════════════════════════════════════════════════ */
[data-tip] { position: relative; }

/* Default tooltip: appears BELOW the element */
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--color-text);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity   0.14s ease,
    transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 9999;
  letter-spacing: 0.01em;
}

[data-tip]::before {
  content: '';
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  border: 5px solid transparent;
  border-bottom-color: var(--color-text);
  opacity: 0;
  transition: opacity 0.14s ease, transform 0.14s ease;
  pointer-events: none;
  z-index: 9999;
}

@media (hover: hover) and (pointer: fine) {
  [data-tip]:hover::after,
  [data-tip]:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ══════════════════════════════════════════════════════
   7.  DESKTOP — DIRECTIONAL PAGE TRANSITIONS
   JS sets data-direction="forward" or "back" on #page-container
   Exit mirrors entry in reverse — symmetric feel
══════════════════════════════════════════════════════ */
#page-container {
  /* FIXED: removed unconditional animation — was running on every paint/initial load */
  /* Direction-specific rules below handle all transitions */
  contain: layout;   /* FIXED: isolates transition repaints — prevents sibling reflow */
  isolation: isolate; /* creates new stacking context — prevents z-index bleed during transitions */
}

/* Forward: new page slides in from right */
@keyframes pageEnterForward {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Back: new page slides in from left */
@keyframes pageEnterBack {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Exit forward: old page exits to left — mirrors entry */
@keyframes pageExitForward {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-16px); }
}

/* Exit back: old page exits to right — mirrors entry */
@keyframes pageExitBack {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(16px); }
}

#page-container[data-direction="forward"] {
  animation: pageEnterForward 0.26s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
#page-container[data-direction="back"] {
  animation: pageEnterBack 0.26s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
#page-container.page-exit[data-direction="forward"] {
  animation: pageExitForward 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
#page-container.page-exit[data-direction="back"] {
  animation: pageExitBack 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ── Mobile: disable page transition animations entirely.
   Slide/fade transitions cause a visible flash and repaint on mobile
   hardware. Instant navigation feels native and professional on touch devices. ── */
@media (max-width: 768px) {
  #page-container[data-direction="forward"],
  #page-container[data-direction="back"],
  #page-container.page-exit[data-direction="forward"],
  #page-container.page-exit[data-direction="back"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════
   8.  DESKTOP — SIDEBAR COLLAPSE → ICON RAIL
   Width animates on .app-sidebar (GPU via will-change: width).
   .app-main margin is set instantly via JS to avoid double reflow.
   Tooltips are rendered by JS (accurate getBoundingClientRect).
══════════════════════════════════════════════════════ */

/* ── Icon rail: 58px wide ── */
body.sidebar-collapsed .app-sidebar {
  width: 58px;
}

/* ── Main shifts to match ── */
body.sidebar-collapsed .app-main {
  margin-left: 58px;
}

/* ── Section labels: fade then collapse ── */
body.sidebar-collapsed .app-sidebar-section-label {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

/* ── Nav item: center icon, hide text ── */
body.sidebar-collapsed .app-sidebar-item {
  justify-content: center;
  padding: 9px 0;
  margin: 0 5px 2px;
  gap: 0;
}

/* ── Text label: opacity off first, then take no space ── */
body.sidebar-collapsed .app-sidebar-item span {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── Conflict badge: hide in rail ── */
body.sidebar-collapsed #conflicts-badge {
  display: none !important;
}

/* ── Icons: larger, full opacity on hover/active ── */
body.sidebar-collapsed .app-sidebar-item svg {
  width: 18px;
  height: 18px;
  opacity: .6;
}
body.sidebar-collapsed .app-sidebar-item:hover  svg { opacity: 1; }
body.sidebar-collapsed .app-sidebar-item.active svg { opacity: 1; }

/* ── Active indicator: morphs from left-bar → centered dot ── */
body.sidebar-collapsed .app-sidebar-item.active::before {
  left: 50%;
  top: 85%;
  width: 4px;
  height: 4px;
  border-radius: 99px;
  transform: translateX(-50%) translateY(0%);
}

/* ── Sidebar header & footer: collapse ── */
body.sidebar-collapsed .app-sidebar-header {
  opacity: 0;
  max-height: 0;
  padding: 0;
  overflow: hidden;
}
body.sidebar-collapsed .app-sidebar > div:last-child {
  padding: 10px 0;
  justify-content: center;
}
body.sidebar-collapsed .app-sidebar > div:last-child span:not(#ai-dot) {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
}

/* ── Rail tooltip (JS-rendered) ─────────────────────────
   JS appends a #sidebar-rail-tip div to body.
   These rules style it; JS positions it with getBoundingClientRect.
──────────────────────────────────────────────────── */
#sidebar-rail-tip {
  position: fixed;
  left: 0; top: 0; /* overridden by JS */
  z-index: 9999;
  background: var(--color-text);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-family);
  padding: 5px 11px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.13s ease, transform 0.13s cubic-bezier(0.34, 1.56, 0.64, 1);
  line-height: 1.4;
}
#sidebar-rail-tip.visible {
  opacity: 1;
  transform: translateX(0);
}
[data-theme="dark"] #sidebar-rail-tip {
  background: #e8eaf0;
  color: #0d1117;
}

/* ══════════════════════════════════════════════════════
   9.  DESKTOP — COMMAND PALETTE
   Exit animation now mirrors entry (scale + translate reversed)
══════════════════════════════════════════════════════ */
#cmd-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  background: rgba(0, 0, 0, 0.50); /* FIXED: removed duplicate background declaration (was 0.40 then 0.50) */
}

#cmd-overlay.open { opacity: 1; visibility: visible; }

/* Closing state: reverse the entry animation */
#cmd-overlay.closing {
  opacity: 0;
  visibility: visible; /* keep visible during exit */
  pointer-events: none;
}
#cmd-overlay.closing #cmd-palette {
  transform: scale(0.94) translateY(-10px);
}

#cmd-palette {
  width: min(560px, 92vw);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: none;
  overflow: hidden;
  transform: scale(0.94) translateY(-10px);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#cmd-overlay.open #cmd-palette { transform: scale(1) translateY(0); }

[data-theme="dark"] #cmd-palette {
  background: #191c25;
  border-color: #2a2f3d;
  box-shadow: none;
}

#cmd-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}
[data-theme="dark"] #cmd-search-wrap { border-color: #2a2f3d; }

#cmd-search-icon { color: var(--color-text-muted); flex-shrink: 0; }
#cmd-search-icon svg { width: 17px; height: 17px; }

#cmd-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text);
  outline: none;
  height: auto;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
#cmd-input::placeholder { color: var(--color-text-light); font-size: 15px; }

#cmd-shortcut-hint {
  font-size: 11px;
  color: var(--color-text-light);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: 2px 7px;
  flex-shrink: 0;
}
[data-theme="dark"] #cmd-shortcut-hint { border-color: #2a2f3d; }

/* Recent items indicator */
.cmd-recent-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-teal);
  flex-shrink: 0;
  margin-left: auto;
  opacity: 0.6;
}

#cmd-results { max-height: 360px; overflow-y: auto; padding: 6px; }

.cmd-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-light);
  padding: 10px 10px 4px;
}

.cmd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.09s ease;
  color: var(--color-text);
  font-size: 13.5px;
}

.cmd-item:hover,
.cmd-item.cmd-active { background: var(--color-surface-2); }

[data-theme="dark"] .cmd-item:hover,
[data-theme="dark"] .cmd-item.cmd-active { background: #21242e; }

.cmd-item svg { width: 15px; height: 15px; color: var(--color-text-muted); flex-shrink: 0; }
.cmd-item-label { flex: 1; }

.cmd-item-shortcut {
  font-size: 10px;
  color: var(--color-text-light);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1px 6px;
}
[data-theme="dark"] .cmd-item-shortcut { border-color: #2a2f3d; }
.cmd-item.cmd-active .cmd-item-shortcut { border-color: var(--color-border-hover); }

#cmd-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  color: var(--color-text-light);
}
[data-theme="dark"] #cmd-footer { border-color: #2a2f3d; }

.cmd-key {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  color: var(--color-text-muted);
}
[data-theme="dark"] .cmd-key { border-color: #2a2f3d; }

/* ══════════════════════════════════════════════════════
   10. DARK MODE — desktop interaction adjustments
══════════════════════════════════════════════════════ */
[data-theme="dark"] .btn:hover     { box-shadow: none; }
[data-theme="dark"] .card:hover,
[data-theme="dark"] .kpi-card:hover,
[data-theme="dark"] .stat-card:hover { box-shadow: none; }
[data-theme="dark"] .btn-primary:hover { box-shadow: none; }
[data-theme="dark"] .btn-teal:hover    { box-shadow: none; }
[data-theme="dark"] .app-sidebar-item.active::before { box-shadow: none; }

/* ══════════════════════════════════════════════════════
   11. TABLET (≤ 768px) — iOS glass shell
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  .app-header {
    height: 56px;
    background: rgba(255, 255, 255, 0.98); /* fully opaque — no blur compositing cost */
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-top: env(safe-area-inset-top);
  }
  /* Fallback for no backdrop-filter */


  [data-theme="dark"] .app-header {
    background: rgba(15, 17, 23, 0.98);
    border-bottom-color: rgba(255, 255, 255, 0.07);
  }


  .app-logo-img { width: 28px; height: 28px; border-radius: 8px; }

  #hamburger {
    display: flex;
    order: -1;
  }

  /* Sidebar: fully opaque — sharp edges, no blur bleed */
  .app-sidebar {
    top: 0;
    height: 100dvh;
    width: min(300px, 85vw);
    transform: translateX(-110%);
    border-radius: 0;
    border-right: 1px solid var(--color-border);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 500;
    background: var(--color-white);
    will-change: transform;
  }

  /* Disable CSS transition during drag so JS controls transform directly */
  .app-sidebar.sidebar-dragging {
    transition: none;
  }

  [data-theme="dark"] .app-sidebar {
    background: #111318;
    border-right-color: rgba(255,255,255,0.08);
  }

  .app-sidebar.open {
    transform: translateX(0);
  }

  #sidebar-overlay {
    display: block !important; /* re-enable inside mobile breakpoint */
    background: rgba(0, 0, 0, 0);
    transition: background 0.32s ease;
    pointer-events: none;  /* FIXED: ignore touches until visible */
  }

  #sidebar-overlay.visible {
    background: rgba(0, 0, 0, 0.45);
    pointer-events: all;   /* FIXED: intercept taps to close sidebar */
  }

  #sidebar-overlay.sidebar-dragging {
    transition: none;
  }

  .app-sidebar-item {
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 2px;
    font-size: 15px;
  }
  .app-sidebar-item svg { width: 18px; height: 18px; }
  .app-sidebar-section-label { font-size: 10px; padding: 18px 14px 5px; }

  .app-main {
    margin-left: 0;
    margin-top: 56px;
    padding: 20px 16px;
    min-height: calc(100dvh - 56px);
    padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
  }

  .card { border-radius: 10px; }
  .card-header, .card-footer { padding: 14px 16px; }
  .card-body { padding: 16px; }
  .page-title { font-size: 20px; }
  .page-header { margin-bottom: 18px; }
  .page-header .btn {
    width: 100%;
    height: 44px;
    font-size: 15px;
    border-radius: 8px;
    justify-content: center;
  }

  /* kpi-grid/kpi-card: no overrides — auto-fit and desktop styles render identically */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card  { border-radius: 10px; }

  .btn { height: 44px; border-radius: 8px; font-size: 15px; padding: 0 18px; }
  .btn-sm { height: 34px; font-size: 13px; padding: 0 13px; border-radius: 6px; }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="color"],
  textarea,
  select {
    height: 44px;
    font-size: 16px; /* Prevents iOS zoom-on-focus */
    border-radius: 8px;
    padding: 0 14px;
  }
  textarea { height: auto; padding: 12px 14px; }
  .form-group { margin-bottom: 14px; }
  .form-label { font-size: 13px; margin-bottom: 6px; }

  /* Modal: sheet from bottom with drag pill */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    width: 100%;
    max-width: 100%;
    border-radius: 10px 10px 0 0;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    max-height: 92dvh;
    overflow-y: auto;
    animation: iosSheetUp 0.38s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    transition: transform 0.30s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .modal.modal-dragging { transition: none; }

  /* Drag pill */
  .modal::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.18);
    margin: 10px auto 0;
  }
  [data-theme="dark"] .modal::before { background: rgba(255, 255, 255, 0.20); }

  .modal-header { padding: 16px 20px 12px; }
  .modal-body   { padding: 0 20px 20px; }
  .modal-footer { padding: 14px 20px; gap: 10px; flex-direction: column-reverse; }
  .modal-footer .btn { width: 100%; }

  /* Slot edit modal footer: unwrap inner div so all 3 buttons stack full-width */
  .slot-edit-modal .modal-footer { flex-direction: column-reverse; align-items: stretch; }
  .slot-edit-modal .modal-footer > div { display: contents; }
  .slot-edit-modal .modal-footer .slot-clear-btn { margin-left: 0; width: 100%; justify-content: center; }

  /* Slot search filter: taller tap target on mobile */
  .slot-search-input { height: 30px; font-size: 12px; }
  /* Slot pills: slightly more padding for touch */
  .slot-pill { padding: 7px 14px; font-size: 12.5px; }

  .table-wrap { border-radius: 10px; }

  /* Notifications: bottom */
  #notification-container {
    top: auto;
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
    right: 14px;
    left: 14px;
    align-items: stretch;
  }
  .notification { width: 100%; border-radius: 10px; font-size: 14px; }

  #theme-toggle { width: 40px; height: 40px; border-radius: 8px; }
  /* sidebar-collapse-btn no longer used */

  /* Command palette trigger hidden on mobile */
  #cmd-trigger-btn { display: none; }
}

/* ══════════════════════════════════════════════════════
   12. PHONE (≤ 430px) — Bottom Tab Bar + Full Mobile
   Breakpoint extended to 430px to cover iPhone 15 Pro Max
══════════════════════════════════════════════════════ */
@media (max-width: 430px) {

  /* Bottom tab bar handles all navigation — sidebar + hamburger not needed */
  #hamburger { display: none !important; }
  #app-sidebar { display: none !important; }
  #sidebar-overlay { display: none !important; pointer-events: none !important; } /* FIXED: also block pointer events */

  .app-header {
    height: 52px;
    padding-top: env(safe-area-inset-top);
  }

  .app-main {
    margin-top: 52px;
    padding: 14px 12px;
    padding-bottom: max(82px, calc(env(safe-area-inset-bottom) + 74px));
  }

  /* ── Bottom Tab Bar ── */
  #bottom-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(250, 250, 252, 0.98);
    border-top: 0.5px solid rgba(0, 0, 0, 0.11);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 400;
    /* Note: contain:style only — layout containment removed so active icon
       can lift upward without being clipped */
    contain: style;
    /* Lock height explicitly so padding/border changes cannot shift the bar */
    box-sizing: border-box;
    overflow: visible;
  }


  [data-theme="dark"] #bottom-tab-bar {
    background: rgba(15, 15, 17, 0.98);
    border-top-color: rgba(255, 255, 255, 0.07);
  }


  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 44px;
    padding: 0 8px;
    padding-top: 4px;
    cursor: pointer;
    color: var(--color-text-light);
    /* FIXED: NO transform transition — animating the whole item shifts flex layout and moves the bar */
    transition: color 0.16s ease;
    user-select: none;
    text-decoration: none;
    position: relative;
  }

  .tab-icon-wrap {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition:
      background 0.12s ease,
      transform  0.20s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
  }

  .tab-icon-outline { display: block; }
  .tab-icon-filled  { display: none; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  .tab-item:not(.active) .tab-icon-filled { display: none; }
  .tab-item.active .tab-icon-outline { display: none; }
  .tab-item.active .tab-icon-filled  { display: flex; }

  .tab-item svg { width: 22px; height: 22px; stroke-width: 1.8; }
  .tab-item span.tab-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.01em;
    display: block;
    position: relative;
  }
  /* Invisible bold ghost reserves the wider width always — prevents layout shift when weight changes */
  .tab-item span.tab-label::after {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
  }

  /* Active state */
  .tab-item.active { color: var(--color-primary); }
  [data-theme="dark"] .tab-item.active { color: var(--color-teal); }

  .tab-item.active .tab-icon-wrap {
    background: var(--color-primary-faint);
    transform: translateY(-4px) scale(1.15);
  }
  [data-theme="dark"] .tab-item.active .tab-icon-wrap { background: var(--color-teal-faint); }

  .tab-item.active span.tab-label { font-weight: 600; }

  /* Badge */
  .tab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    background: var(--color-error);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 1.5px solid rgba(250, 250, 252, 0.90);
    line-height: 1;
  }
  [data-theme="dark"] .tab-badge { border-color: rgba(15, 15, 17, 0.90); }

  /* Press feedback handled by JS tapFeedback() — no CSS :active overrides needed */

  /* ── "More" Sheet — with proper iOS section header visual separation ── */
  #tab-more-sheet {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease;
    touch-action: none;
  }
  #tab-more-sheet.open {
    pointer-events: all;
    opacity: 1;
  }
  #tab-more-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    touch-action: none;
    overscroll-behavior: none;
  }
  #tab-more-panel {
    position: relative;
    background: var(--color-white);
    border-radius: 10px 10px 0 0;
    padding: 0 0 max(20px, env(safe-area-inset-bottom)) 0;
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 60dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  [data-theme="dark"] #tab-more-panel { background: #1c1c1e; }
  #tab-more-sheet.open #tab-more-panel { transform: translateY(0); }

  /* Drag pill */
  #tab-more-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.18);
    margin: 10px auto 0;
  }
  [data-theme="dark"] #tab-more-panel::before { background: rgba(255, 255, 255, 0.20); }

  /* iOS-style section header with bottom divider */
  #tab-more-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    padding: 14px 20px 12px;
    border-bottom: 0.5px solid var(--color-border);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
  }
  [data-theme="dark"] #tab-more-title { border-bottom-color: rgba(255,255,255,0.07); }

  .tab-more-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    font-size: 16px;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 0.5px solid var(--color-border);
    cursor: pointer;
    transition: background 0.10s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .tab-more-item:last-child { border-bottom: none; }
  .tab-more-item:active { background: var(--color-surface-2); }
  [data-theme="dark"] .tab-more-item:active { background: #2c2c2e; }
  .tab-more-item svg { width: 20px; height: 20px; color: var(--color-text-muted); }

  /* KPI & page layout */
  /* kpi-grid/kpi-val: no overrides — desktop styles apply unchanged */
  .page-title { font-size: 18px; }
  .card-body  { padding: 14px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .modal-header { padding: 14px 16px 10px; }
  .modal-body   { padding: 0 16px 16px; }

  /* Notifications: above tab bar */
  #notification-container {
    bottom: calc(max(82px, calc(env(safe-area-inset-bottom) + 74px)) + 10px);
  }
}

/* ══════════════════════════════════════════════════════
   13. TIMETABLE — PHONE
══════════════════════════════════════════════════════ */
@media (max-width: 430px) {

  .tt-wrap {
    border-radius: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  /* Swipe hint: fade-gradient edge indicator */
  .tt-wrap:not(.tt-scrolled)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44px;
    background: linear-gradient(to right, transparent, var(--color-bg) 90%);
    pointer-events: none;
    border-radius: 0 10px 10px 0;
    transition: opacity 0.30s ease;
  }
  .tt-wrap.tt-scrolled::after {
    opacity: 0;
    pointer-events: none;
  }

  /* Swipe hint: proper chevron SVG (not › character) */
  .tt-wrap:not(.tt-scrolled)::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238aaec4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    opacity: 0.7;
    z-index: 2;
    animation: swipeHintPulse 1.4s ease-in-out infinite;
  }
  .tt-wrap.tt-scrolled::before { display: none; }

  @keyframes swipeHintPulse {
    0%, 100% { opacity: 0.7; transform: translateY(-50%) translateX(0); }
    50%       { opacity: 0.35; transform: translateY(-50%) translateX(3px); }
  }

  .tt-table   { min-width: 560px; }
  .tt-cell    { min-width: 80px; }
  .tt-cell-inner    { min-height: 66px; padding: 6px 4px; }
  .tt-cell-subject  { font-size: 10px; }
  .tt-cell-teacher  { font-size: 8px; }
  .tt-day-cell      { width: 40px; min-width: 40px; }
  .tt-day-abbr      { font-size: 9px; }
  .tt-hdr-row th    { font-size: 9px; padding: 8px 4px; }
  .tt-hdr-period    { font-size: 10px; }
  .tt-hdr-time      { font-size: 8px; }
}

/* ══════════════════════════════════════════════════════
   14. PULL-TO-REFRESH — disabled (browser handles natively)
══════════════════════════════════════════════════════ */
#ptr-indicator { display: none !important; }
#ptr-arc       { display: none !important; }

/* ══════════════════════════════════════════════════════
   15. ANIMATIONS
══════════════════════════════════════════════════════ */
@keyframes iosSheetUp {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════
   16. LONG-PRESS RIPPLE
   border-radius inherits from parent for correct shape
══════════════════════════════════════════════════════ */
.lp-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.07);
  transform: scale(0);
  animation: lpRippleExpand 0.40s cubic-bezier(0.0, 0.0, 0.2, 1) forwards;
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] .lp-ripple { background: rgba(255, 255, 255, 0.08); }

@keyframes lpRippleExpand {
  to { transform: scale(4); opacity: 0; }
}

/* ══════════════════════════════════════════════════════
   17. LOADING SCREEN — phone
══════════════════════════════════════════════════════ */
@media (max-width: 430px) {
  #loading-overlay {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .lo-brand h1 { font-size: 20px; }
  .lo-circle, .lo-ring { width: 88px; height: 88px; }
}

/* ══════════════════════════════════════════════════════
   18. CONTENT VISIBILITY — rendering speed
   FIXED: Removed content-visibility:auto from .card/.kpi-card/.stat-card.
   These are typically all visible at once; auto-containment caused scroll-linked
   layout recalculation jank rather than improving performance.
   content-visibility:auto is only beneficial for extremely long off-screen lists.
══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   19. SCROLLBAR
══════════════════════════════════════════════════════ */
/* Desktop: thin elegant scrollbar that fades on idle */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar       { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--color-divider);
    border-radius: 99px;
    transition: background 0.2s ease;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--color-border-hover); }
}

/* Mobile: no visible scrollbar (native feel) */
@media (max-width: 768px) {
  ::-webkit-scrollbar { width: 0; height: 0; }
}

/* ══════════════════════════════════════════════════════
   20. PERFORMANCE — GPU layer hints
   Only applied to elements confirmed to animate
   NOTE: .app-sidebar removed — it uses width transition, not transform.
   translateZ(0) on a width-animating element wastes a GPU layer.
══════════════════════════════════════════════════════ */
#bottom-tab-bar,
#cmd-overlay,
#tab-more-panel {
  transform: translateZ(0); /* promote to GPU layer */
}