/* ═══════════════════════════════════════════════════════════════════════════
   components.css — shared macOS/iOS design language
   Loaded by both planner.html and editor.html, after app.css / forms.css.
   Contains: app shell, sidebar classes, button treatments, modal design.
   ─────────────────────────────────────────────────────────────────────────
   NOT in this file: page-specific IDs (#plannerSidebar, #editorSidebar,
   #plannerMain, #editorMain). Those live in planner.css / editor-design.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Desktop app shell ────────────────────────────────────────────────────────
   Transforms the page into a fixed-height sidebar + content-area layout.
   Both planner and editor use this shell on ≥ 640px.                         */

@media (min-width: 640px) {
  html:has(#plannerMain),
  html:has(#editorMain) { overflow: hidden; height: 100%; }

  body:has(#plannerMain),
  body:has(#editorMain) {
    display: flex;
    flex-direction: row;
    height: 100dvh;
    overflow: hidden;
    background: #f2f2f7;
    min-height: unset;
  }

  /* Site header moves into the sidebar — hide the top bar */
  body:has(#plannerMain) .header-shell,
  body:has(#editorMain) .header-shell { display: none; }

  /* Strip the dark accordion shell — sidebar provides the nav chrome. */
  body:has(#plannerMain) .editor-meta-accordion,
  body:has(#editorMain) .editor-meta-accordion {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
}

/* ── Sidebar: shared classes ──────────────────────────────────────────────────
   Design: macOS sidebar — subtle tinted background, tinted selection,
   SF Pro system font, tight density, no uppercase group headers.
   ID-specific dimensions (#plannerSidebar, #editorSidebar) live in their
   respective stylesheets. These class rules apply to both.                    */

@media (min-width: 640px) {

  /* ── Brand area ── */
  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0.75rem 0.625rem 0.625rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .sidebar-app-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #007AFF;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sidebar-event-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1c1c1e;
    line-height: 1.2;
  }

  .sidebar-dirty-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.15rem;
  }

  .sidebar-dirty-dot  { font-size: 0.4rem; }
  .sidebar-dirty-label { font-size: 0.6875rem; color: #8e8e93; }

  /* Collapse toggle */
  .sidebar-toggle-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.3);
    font-size: 0.6875rem;
    transition: background 120ms, color 120ms;
  }
  .sidebar-toggle-btn:hover { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.55); }

  /* ── Group headers ── */
  .sidebar-group { margin-bottom: 0.125rem; }

  .sidebar-group-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(0, 0, 0, 0.35);
    padding: 0.5rem 0.625rem 0.15rem;
    white-space: nowrap;
    overflow: hidden;
  }

  /* ── Nav items ── */
  .sidebar-tab-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 26px;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1c1c1e;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: background 100ms;
  }
  .sidebar-tab-btn:hover:not(.is-active) { background: rgba(0, 0, 0, 0.04); }
  .sidebar-tab-btn.is-active {
    background: rgba(0, 122, 255, 0.12);
    color: #007AFF;
  }
  .sidebar-tab-btn.is-active .sidebar-item-icon { color: #007AFF; }

  .sidebar-item-icon {
    font-size: 0.8125rem;
    flex-shrink: 0;
    color: rgba(0, 0, 0, 0.45);
    line-height: 1;
  }

  .sidebar-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Collapsed state (class-based — works for any sidebar element) ── */
  .sidebar-collapsed .sidebar-label       { display: none; }
  .sidebar-collapsed .sidebar-group-label { display: none; }
  .sidebar-collapsed .sidebar-brand-text  { display: none; }

  .sidebar-collapsed .sidebar-tab-btn {
    justify-content: center;
    padding: 0.3rem 0;
    gap: 0;
    min-height: 30px;
  }

  .sidebar-collapsed .sidebar-toggle-btn { margin: 0 auto; }
  .sidebar-collapsed .sidebar-brand      { justify-content: center; padding: 0.625rem 0.25rem; }

  /* ── Dark theme ── */
  .theme-dark .sidebar-brand        { border-bottom-color: rgba(255, 255, 255, 0.06); }
  .theme-dark .sidebar-event-name   { color: rgba(255, 255, 255, 0.88); }
  .theme-dark .sidebar-dirty-label  { color: rgba(255, 255, 255, 0.3); }
  .theme-dark .sidebar-toggle-btn   { color: rgba(255, 255, 255, 0.25); }
  .theme-dark .sidebar-toggle-btn:hover { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.55); }
  .theme-dark .sidebar-tab-btn      { color: rgba(255, 255, 255, 0.82); }
  .theme-dark .sidebar-tab-btn:hover:not(.is-active) { background: rgba(255, 255, 255, 0.05); }
  .theme-dark .sidebar-tab-btn.is-active {
    background: rgba(10, 132, 255, 0.2);
    color: #0a84ff;
  }
  .theme-dark .sidebar-tab-btn.is-active .sidebar-item-icon { color: #0a84ff; }
  .theme-dark .sidebar-item-icon    { color: rgba(255, 255, 255, 0.42); }
  .theme-dark .sidebar-group-label  { color: rgba(255, 255, 255, 0.25); }
}

/* ── Buttons: native design language ─────────────────────────────────────────
   Applied globally (modals are outside app containers, so unscoped selectors
   are required). Both planner and editor use these treatments.                */

@media (min-width: 640px) {

  button, a[role="button"] {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  }

  /* Primary filled → system blue */
  button.bg-gray-800, a.bg-gray-800,
  button.bg-gray-700 {
    background-color: #007AFF;
    border-color: transparent;
    border-radius: 6px;
    letter-spacing: -0.01em;
  }
  button.bg-gray-800:hover, a.bg-gray-800:hover,
  button.bg-gray-700:hover { background-color: #0071e3; }

  .theme-dark button.bg-gray-800, .theme-dark a.bg-gray-800,
  .theme-dark button.bg-gray-700 { background-color: #0a84ff; }
  .theme-dark button.bg-gray-800:hover, .theme-dark a.bg-gray-800:hover,
  .theme-dark button.bg-gray-700:hover { background-color: #409cff; }

  /* Cancel / secondary */
  button.bg-gray-50, button.bg-gray-100 {
    background: rgba(0, 0, 0, 0.05);
    color: #3c3c3e;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
  }
  button.bg-gray-50:hover, button.bg-gray-100:hover {
    background: rgba(0, 0, 0, 0.09);
  }
  .theme-dark button.bg-gray-50, .theme-dark button.bg-gray-100 {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .theme-dark button.bg-gray-50:hover, .theme-dark button.bg-gray-100:hover {
    background: rgba(255, 255, 255, 0.12);
  }
}

/* ── Touch: always-visible action buttons ────────────────────────────────────
   Card action buttons use opacity-0 group-hover:opacity-100 — invisible on
   touch devices that have no hover event. Make them permanently visible.      */
@media (pointer: coarse) {
  .opacity-0[class*="group-hover"] { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Modal: macOS-native design language
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Desktop (≥640px): frosted backdrop + flat card ──────────────────────── */
@media (min-width: 640px) {

  [role="dialog"] {
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
  }

  [role="dialog"] > div {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
    border-radius: 12px;
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    box-shadow:
      0 2px 8px  rgba(0, 0, 0, 0.08),
      0 16px 48px rgba(0, 0, 0, 0.10);
  }

  .theme-dark [role="dialog"] > div {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow:
      0 2px 8px  rgba(0, 0, 0, 0.30),
      0 16px 48px rgba(0, 0, 0, 0.45);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  [role="dialog"] .border-b.border-gray-200,
  [role="dialog"] .border-t.border-gray-200 {
    border-color: rgba(0, 0, 0, 0.07);
  }
  .theme-dark [role="dialog"] .border-b.border-gray-200,
  .theme-dark [role="dialog"] .border-t.border-gray-200 {
    border-color: rgba(255, 255, 255, 0.07);
  }

  [role="dialog"] h2 {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1c1c1e;
  }
  .theme-dark [role="dialog"] h2 { color: rgba(255, 255, 255, 0.9); }

  [role="dialog"] button[aria-label="Close"] {
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.40);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  [role="dialog"] button[aria-label="Close"]:hover {
    background: rgba(0, 0, 0, 0.10);
    color: rgba(0, 0, 0, 0.65);
  }
  .theme-dark [role="dialog"] button[aria-label="Close"] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.40);
  }
  .theme-dark [role="dialog"] button[aria-label="Close"]:hover {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.65);
  }

  [role="dialog"] .editor-field-label {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    color: #3c3c3e;
  }
  .theme-dark [role="dialog"] .editor-field-label { color: rgba(255, 255, 255, 0.70); }

  [role="dialog"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  [role="dialog"] select {
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: none;
    background: rgba(0, 0, 0, 0.03);
    color: #1c1c1e;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
    font-size: 0.875rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }
  [role="dialog"] textarea {
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: none;
    background: rgba(0, 0, 0, 0.03);
    color: #1c1c1e;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
    font-size: 0.875rem;
    padding: 0.5rem 0.625rem;
  }
  [role="dialog"] input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  [role="dialog"] select:focus,
  [role="dialog"] textarea:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
    outline: none;
    background: #fff;
  }
  .theme-dark [role="dialog"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .theme-dark [role="dialog"] select,
  .theme-dark [role="dialog"] textarea {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.90);
  }
  .theme-dark [role="dialog"] input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .theme-dark [role="dialog"] select:focus,
  .theme-dark [role="dialog"] textarea:focus {
    border-color: #0a84ff;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.20);
    background: rgba(255, 255, 255, 0.09);
  }

  [role="dialog"] .border-t button,
  [role="dialog"] .border-t a[role="button"] {
    height: 32px;
    min-height: 32px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    border-radius: 6px;
  }

  [role="dialog"] button.border-red-200,
  [role="dialog"] button.text-red-600 {
    color: #FF3B30;
    border-color: rgba(255, 59, 48, 0.25);
    background: transparent;
  }
  [role="dialog"] button.border-red-200:hover,
  [role="dialog"] button.text-red-600:hover {
    background: rgba(255, 59, 48, 0.06);
    border-color: rgba(255, 59, 48, 0.40);
  }
  .theme-dark [role="dialog"] button.border-red-200,
  .theme-dark [role="dialog"] button.text-red-600 {
    color: #FF453A;
    border-color: rgba(255, 69, 58, 0.30);
  }
  .theme-dark [role="dialog"] button.border-red-200:hover,
  .theme-dark [role="dialog"] button.text-red-600:hover {
    background: rgba(255, 69, 58, 0.10);
    border-color: rgba(255, 69, 58, 0.50);
  }
}

/* ── Mobile (<640px): modals as bottom sheets ─────────────────────────────── */
@media (max-width: 639px) {

  [role="dialog"] {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  [role="dialog"] > div {
    width: 100%;
    max-width: 100%;
    max-height: 90dvh;
    margin: 0;
    border-radius: 12px 12px 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: planner-sheet-up 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  }

  @keyframes planner-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  [role="dialog"] > div::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.15);
    margin: 10px auto 4px;
  }
  .theme-dark [role="dialog"] > div::before { background: rgba(255, 255, 255, 0.20); }

  [role="dialog"] h2 {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  [role="dialog"] button[aria-label="Close"] {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: rgba(0, 0, 0, 0.35);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .theme-dark [role="dialog"] button[aria-label="Close"] {
    color: rgba(255, 255, 255, 0.35);
  }

  /* Mobile: Apple design language baseline */
  #plannerMain,
  .editor-meta-accordion {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  }

  button.bg-gray-800, a.bg-gray-800,
  button.bg-gray-700, a.bg-gray-700 {
    background-color: #007AFF;
    border-color: transparent;
    border-radius: 8px;
    letter-spacing: 0;
  }
  button.bg-gray-800:hover, a.bg-gray-800:hover,
  button.bg-gray-700:hover, a.bg-gray-700:hover { background-color: #0071e3; }
  .theme-dark button.bg-gray-800, .theme-dark a.bg-gray-800,
  .theme-dark button.bg-gray-700, .theme-dark a.bg-gray-700 { background-color: #0a84ff; }
  .theme-dark button.bg-gray-800:hover, .theme-dark a.bg-gray-800:hover,
  .theme-dark button.bg-gray-700:hover, .theme-dark a.bg-gray-700:hover { background-color: #409cff; }

  button.bg-gray-50, button.bg-gray-100 {
    background: rgba(0, 0, 0, 0.05);
    color: #3c3c3e;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 8px;
  }
  button.bg-gray-50:hover, button.bg-gray-100:hover { background: rgba(0, 0, 0, 0.09); }
  .theme-dark button.bg-gray-50, .theme-dark button.bg-gray-100 {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    border-color: rgba(255, 255, 255, 0.10);
  }
  .theme-dark button.bg-gray-50:hover, .theme-dark button.bg-gray-100:hover {
    background: rgba(255, 255, 255, 0.12);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Mobile (<640px): iOS native design language — planner & editor pages
   Scoped via :has() so the schedule page (index.html) aurora header is
   left untouched on mobile.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {

  /* ── App page body: flat system backgrounds (no aurora gradient bleed) ─────
     Light → #f2f2f7 (iOS grouped background). Dark → #000 (iOS true black).   */
  body:has(#plannerMain),
  body:has(#editorMain) { background: #f2f2f7; }
  body.theme-dark:has(#plannerMain),
  body.theme-dark:has(#editorMain) { background: #000000; }

  /* ── App header: iOS navigation bar ───────────────────────────────────────
     On desktop the header-shell is replaced by the sidebar. On mobile it
     should feel like a native iOS nav bar — light, translucent, flat.        */
  body:has(#plannerMain) .header-shell,
  body:has(#editorMain) .header-shell {
    background: rgba(246, 246, 248, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    animation: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: none;
  }
  body:has(#plannerMain) .header-shell::before,
  body:has(#editorMain) .header-shell::before { display: none; }
  body:has(#plannerMain) .header-shell::after,
  body:has(#editorMain) .header-shell::after  { display: none; }

  body:has(#plannerMain) .header-title,
  body:has(#editorMain) .header-title { color: #1c1c1e; }

  body:has(#plannerMain) .header-title .header-event,
  body:has(#editorMain) .header-title .header-event {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #1c1c1e;
  }
  body:has(#plannerMain) .header-title .header-suffix,
  body:has(#editorMain) .header-title .header-suffix {
    color: #007AFF;
    border-color: rgba(0, 122, 255, 0.30);
    background: rgba(0, 122, 255, 0.08);
  }
  body:has(#plannerMain) .header-logo,
  body:has(#editorMain) .header-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 0.8125rem;
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(0, 122, 255, 0.08);
    animation: none;
    box-shadow: none;
    color: #007AFF;
  }

  /* ── Header inner wrapper: compact nav bar height ────────────────────────── */
  body:has(#plannerMain) .header-shell > div,
  body:has(#editorMain) .header-shell > div {
    padding-top: 0.5rem;
    padding-bottom: 0.375rem;
  }

  /* ── Header icon+title row: tighter gap for 32px icon ──────────────────── */
  body:has(#plannerMain) .header-shell > div > div,
  body:has(#editorMain) .header-shell > div > div { gap: 0.5rem; }

  /* ── SF Pro throughout the nav bar ──────────────────────────────────────── */
  body:has(#plannerMain) .header-shell,
  body:has(#editorMain) .header-shell {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  }

  body:has(#plannerMain) .header-kicker,
  body:has(#editorMain) .header-kicker {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.10em;
  }

  body:has(#plannerMain) .header-title,
  body:has(#editorMain) .header-title {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.022em;
    margin-top: 0.05rem;
  }

  /* ── Dark theme: app header ──────────────────────────────────────────────── */
  body.theme-dark:has(#plannerMain) .header-shell,
  body.theme-dark:has(#editorMain) .header-shell {
    background: rgba(28, 28, 30, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
  body.theme-dark:has(#plannerMain) .header-kicker,
  body.theme-dark:has(#editorMain) .header-kicker { color: rgba(255, 255, 255, 0.40); }
  body.theme-dark:has(#plannerMain) .header-title,
  body.theme-dark:has(#editorMain) .header-title {
    color: rgba(255, 255, 255, 0.90);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.90);
  }
  body.theme-dark:has(#plannerMain) .header-title .header-event,
  body.theme-dark:has(#editorMain) .header-title .header-event {
    -webkit-text-fill-color: rgba(255, 255, 255, 0.90);
  }
  body.theme-dark:has(#plannerMain) .header-title .header-suffix,
  body.theme-dark:has(#editorMain) .header-title .header-suffix {
    color: #0a84ff;
    border-color: rgba(10, 132, 255, 0.30);
    background: rgba(10, 132, 255, 0.12);
  }
  body.theme-dark:has(#plannerMain) .header-logo,
  body.theme-dark:has(#editorMain) .header-logo {
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(10, 132, 255, 0.15);
    color: #0a84ff;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   iOS native bottom tab bar
   ══════════════════════════════════════════════════════════════════════════ */

#mobileBottomBar,
#editorMobileBottomBar,
#scheduleBottomBar {
  display: flex;
  align-items: stretch;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(248, 248, 248, 0.94);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 0.5px solid rgba(0, 0, 0, 0.15);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 640px) {
  #mobileBottomBar,
  #editorMobileBottomBar,
  #scheduleBottomBar { display: none; }
}

.mobile-bottom-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  padding: 0.375rem 0.25rem 0.3125rem;
  min-height: 49px;
  border: none;
  background: transparent;
  color: rgba(0, 0, 0, 0.38);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 80ms;
}
.mobile-bottom-tab.is-active { color: #007AFF; }
.mobile-bottom-tab:active:not(.is-active) { color: rgba(0, 0, 0, 0.6); }

.mobile-bottom-tab-icon {
  font-size: 1.375rem;
  line-height: 1;
}
.mobile-bottom-tab-label {
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}

.theme-dark #mobileBottomBar,
.theme-dark #editorMobileBottomBar,
.theme-dark #scheduleBottomBar {
  background: rgba(28, 28, 30, 0.94);
  border-top-color: rgba(255, 255, 255, 0.10);
}
.theme-dark .mobile-bottom-tab { color: rgba(255, 255, 255, 0.38); }
.theme-dark .mobile-bottom-tab.is-active { color: #0a84ff; }

/* ══════════════════════════════════════════════════════════════════════════
   Schedule page — mobile compact header (aurora gradient preserved)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
  /* Banner logo — larger than planner/editor nav, aurora animation kept */
  body:has(#scheduleMain) .header-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 1.125rem;
  }
  body:has(#scheduleMain) .header-logo::before {
    inset: 5px;
    border-radius: 10px;
  }
  body:has(#scheduleMain) .header-logo-image {
    padding: 0.5rem;
  }

  /* Banner padding — room to breathe and show the aurora */
  body:has(#scheduleMain) .header-shell .w-\[94\%\] {
    padding-top: 0;
    padding-bottom: 0.5rem;
  }
  body:has(#scheduleMain) .header-shell .flex.justify-between {
    padding-top: 1.125rem;
    padding-bottom: 0.875rem;
  }
  body:has(#scheduleMain) .header-shell .flex.items-center.gap-3 {
    gap: 0.75rem;
  }

  /* Flag: show on mobile for the schedule banner */
  body:has(#scheduleMain) .header-flag {
    display: inline-block;
  }

  /* SF Pro + generous title for banner feel */
  body:has(#scheduleMain) .header-shell {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  }
  body:has(#scheduleMain) .header-kicker {
    font-size: 0.625rem;
    letter-spacing: 0.12em;
  }
  body:has(#scheduleMain) .header-title {
    font-size: clamp(1.2rem, 5.5vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
  }

  /* Main content: pad bottom so tab bar doesn't overlap */
  #scheduleMain,
  #plannerMain,
  #editorMain {
    padding-bottom: calc(49px + env(safe-area-inset-bottom, 0px) + 1rem);
  }

  /* Selection overview: sit above the tab bar */
  body:has(#scheduleMain) #selectionOverview {
    bottom: calc(49px + env(safe-area-inset-bottom, 0px));
  }

  /* Find Event tab: highlights while modal is open */
  body.session-modal-open #scheduleEventFinderTab { color: #007AFF; }
  body.theme-dark.session-modal-open #scheduleEventFinderTab { color: #0a84ff; }

  /* ── Pill action buttons ─────────────────────────────────────────────────── */
  body:has(#scheduleMain) #filtersPanel button:not(#clearKeywords),
  body:has(#scheduleMain) #sessionFiltersContent button:not(#clearKeywords) {
    height: 34px;
    border: none;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.75);
    font-size: 0.875rem;
  }
  body.theme-dark:has(#scheduleMain) #filtersPanel button:not(#clearKeywords),
  body.theme-dark:has(#scheduleMain) #sessionFiltersContent button:not(#clearKeywords) {
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.85);
  }
  /* Primary action — blue pill (must come after generic rule to win source order) */
  body:has(#scheduleMain) #filtersPanel button#searchEvents {
    background: #007AFF;
    color: #fff;
  }
  body.theme-dark:has(#scheduleMain) #filtersPanel button#searchEvents {
    background: #0a84ff;
    color: #fff;
  }

  /* ── Strip accordion card chrome ────────────────────────────────────────── */
  body:has(#scheduleMain) .mobile-instructions-panel,
  body:has(#scheduleMain) #sessionFiltersPanel {
    background: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
  }
  body.theme-dark:has(#scheduleMain) .mobile-instructions-panel,
  body.theme-dark:has(#scheduleMain) #sessionFiltersPanel {
    border-bottom-color: rgba(255, 255, 255, 0.10);
  }

  /* Accordion toggle: section-label colour (overrides the neon #d7e7f8 default) */
  body:has(#scheduleMain) .mobile-instructions-panel .mobile-accordion-toggle,
  body:has(#scheduleMain) #sessionFiltersPanel .mobile-accordion-toggle {
    color: rgba(0, 0, 0, 0.75);
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  }
  body.theme-dark:has(#scheduleMain) .mobile-instructions-panel .mobile-accordion-toggle,
  body.theme-dark:has(#scheduleMain) #sessionFiltersPanel .mobile-accordion-toggle {
    color: rgba(255, 255, 255, 0.88);
  }

  /* Accordion content: pad top/bottom so it breathes inside the stripped panel */
  body:has(#scheduleMain) #usageInstructionsContent,
  body:has(#scheduleMain) #sessionFiltersContent {
    padding-bottom: 0.75rem;
  }

  /* ── System background ───────────────────────────────────────────────────── */
  body:has(#scheduleMain) {
    background: #f2f2f7;
  }
  body.theme-dark:has(#scheduleMain) {
    background: #000000;
  }

  /* ── Flat content cards (light) ──────────────────────────────────────────── */
  body:has(#scheduleMain) .bg-white.rounded-lg:not(button):not(a) {
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.07);
    backdrop-filter: none;
  }

  /* ── Flat content cards (dark) ───────────────────────────────────────────── */
  body.theme-dark:has(#scheduleMain) .bg-white.rounded-lg:not(button):not(a) {
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: #1e1e20;
    backdrop-filter: none;
  }
}
.theme-dark .mobile-bottom-tab:active:not(.is-active) { color: rgba(255, 255, 255, 0.7); }

/* ── S3 sync progress bar ────────────────────────────────────────────────── */
.s3-progress-track {
  height: 3px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}
.s3-progress-bar {
  height: 100%;
  width: 40%;
  background: #3b82f6;
  border-radius: 2px;
  animation: s3-sweep 1.4s ease-in-out infinite;
}
@keyframes s3-sweep {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(350%); }
}