/* Roadline Studio — Design System */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

:root {
  --bg: #fafaf8;
  --surface: #ffffff;
  --surface-muted: #f6f5f1;
  --border: #e8e5df;
  --border-hover: #ccc;
  --text: #111111;
  --text-secondary: #888888;
  --text-tertiary: #bbbbbb;
  --accent: #185FA5;
  --accent-bg: #E6F1FB;
  --accent-text: #0C447C;
  --green: #1D9E75;
  --green-bg: #E1F5EE;
  --green-text: #085041;
  --amber: #EF9F27;
  --amber-bg: #FAEEDA;
  --amber-text: #633806;
  --coral: #D85A30;
  --coral-bg: #FAECE7;
  --coral-text: #712B13;
  --purple: #534AB7;
  --purple-bg: #EEEDFE;
  --purple-text: #3C3489;
  --red: #E24B4A;
  --red-bg: #FCEBEB;
  --red-text: #791F1F;
  --orange: #f97316;
  --orange-bg: #FFF3E8;
  --orange-text: #7C3A06;
  --radius: 10px;
  --radius-sm: 7px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'DM Sans', -apple-system, sans-serif; background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; }
html, body { background: #ffffff; margin: 0; padding: 0; min-height: 100vh; min-height: -webkit-fill-available; overscroll-behavior: none; }
.app { display: flex; height: 100vh; height: -webkit-fill-available; }

/* Sidebar */
.sidebar { width: 200px; background: var(--surface); border-right: 0.5px solid var(--border); display: flex; flex-direction: column; padding: 16px 10px; flex-shrink: 0; }
.sidebar-brand { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; padding: 4px 10px; margin-bottom: 4px; }
.workspace-btn { padding: 6px 10px; margin-bottom: 12px; cursor: pointer; position: relative; }
.workspace-label { font-size: 12px; color: var(--accent); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.workspace-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.workspace-arrow { font-size: 10px; color: var(--text-tertiary); margin-left: auto; }
.workspace-dropdown { position: absolute; left: 0; top: 100%; width: 100%; background: var(--surface); border: 0.5px solid var(--border); border-radius: 8px; padding: 6px; z-index: 10; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.workspace-dropdown.open { display: block; }
.workspace-item { font-size: 12px; padding: 6px 10px; border-radius: 6px; cursor: pointer; color: #666; }
.workspace-item:hover { background: var(--surface-muted); }
.workspace-item.active { color: var(--accent); background: var(--accent-bg); }

.nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.nav-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--text-secondary); transition: all 0.15s; }
.nav-item:hover { background: var(--surface-muted); color: var(--text); }
.nav-item.active { background: #f0efe8; color: var(--text); font-weight: 500; }
.nav-icon { font-size: 14px; opacity: 0.6; width: 18px; text-align: center; }
.nav-divider { height: 1px; background: var(--border); margin: 8px 10px; }
.nav-section { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); padding: 8px 10px 4px; }

.sidebar-footer { border-top: 0.5px solid var(--border); padding-top: 10px; margin-top: 8px; }
.sidebar-user { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 12px; color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-sm); }
.sidebar-user:hover { background: var(--surface-muted); }
.avatar-sm { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 600; }

/* Main */
.main { flex: 1; overflow: auto; padding: 24px 28px; }

/* Shared components */
.page-title { font-size: 18px; font-weight: 500; margin-bottom: 4px; }
.page-subtitle { font-size: 13px; color: var(--text-secondary); }
.metrics-row { display: flex; gap: 10px; margin: 16px 0; }
.metric-card { background: var(--surface-muted); border-radius: 8px; padding: 14px 16px; flex: 1; min-width: 0; }
.metric-label { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
.metric-value { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }

.pill { font-size: 11px; padding: 3px 10px; border-radius: var(--radius-pill); font-weight: 500; white-space: nowrap; display: inline-block; }
.pill-live, .pill-published, .pill-released, .pill-completed, .pill-connected, .pill-active, .pill-complete, .pill-winner { background: var(--green-bg); color: var(--green-text); }
.pill-scheduled, .pill-confirmed, .pill-in_release_cycle { background: var(--accent-bg); color: var(--accent-text); }
.pill-draft, .pill-pending, .pill-pending_review, .pill-backlog, .pill-planned { background: var(--amber-bg); color: var(--amber-text); }
.pill-review, .pill-approved, .pill-in_review, .pill-in_production, .pill-produced { background: var(--coral-bg); color: var(--coral-text); }
.pill-rendering, .pill-generating, .pill-processing, .pill-testing { background: var(--purple-bg); color: var(--purple-text); }
.pill-queued, .pill-configuring, .pill-disconnected { background: var(--surface-muted); color: #666; }
.pill-failed, .pill-rejected, .pill-shelved { background: var(--red-bg); color: var(--red-text); }
.pill-in_progress, .pill-needs_revision { background: var(--orange-bg); color: var(--orange-text); }
.pill-paused { background: var(--amber-bg); color: var(--amber-text); }

.card { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 16px; transition: border-color 0.15s; }
.card:hover { border-color: var(--border-hover); }
.card-title { font-size: 14px; font-weight: 500; margin-bottom: 12px; }

.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.section-label { font-size: 14px; font-weight: 500; }
.section-link { font-size: 12px; color: var(--accent); cursor: pointer; }

.btn { font-size: 12px; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: 500; font-family: inherit; border: none; transition: all 0.15s; }
.btn-primary { background: var(--text); color: #fff; }
.btn-primary:hover { background: #333; }
.btn-outline { background: var(--surface); color: #333; border: 0.5px solid #ddd; }
.btn-outline:hover { border-color: #bbb; }
.btn-sm { padding: 6px 14px; border-radius: 6px; }
.btn-active { background: var(--text); color: #fff; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #1467b5; }
.btn-danger { background: var(--red); color: #fff; }
.btn-success { background: var(--green); color: #fff; }

.thumb { border-radius: var(--radius-sm); }

.progress-track { width: 100%; height: 4px; background: #f0efe8; border-radius: 2px; }
.progress-fill { height: 100%; border-radius: 2px; }

.filter-bar { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-btn { font-size: 11px; padding: 5px 12px; border-radius: var(--radius-pill); border: 0.5px solid #e0e0e0; background: var(--surface); color: #777; cursor: pointer; text-transform: capitalize; font-family: inherit; transition: all 0.15s; }
.filter-btn.active { background: var(--text); color: #fff; border-color: var(--text); }

/* Grids */
.content-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.content-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.content-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Lists */
.list-header { display: flex; padding: 10px 16px; border-bottom: 0.5px solid #f0efe8; font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.list-row { display: flex; padding: 12px 16px; border-bottom: 0.5px solid #f8f7f3; align-items: center; font-size: 12px; cursor: pointer; transition: background 0.1s; }
.list-row:hover { background: var(--bg); }

/* Schedule */
.schedule-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.schedule-day-label { text-align: center; margin-bottom: 8px; }
.schedule-day-name { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; }
.schedule-day-num { font-size: 14px; font-weight: 500; }
.schedule-item { border-radius: 8px; padding: 10px; border-left: 3px solid; cursor: pointer; margin-bottom: 6px; }
.schedule-empty { height: 60px; border: 1px dashed #e0e0d8; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #ddd; cursor: pointer; }
.schedule-empty:hover { border-color: var(--accent); color: var(--accent); }

/* Engagement */
.engagement-row { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 0.5px solid #f0efe8; align-items: start; }
.engagement-avatar { width: 32px; height: 32px; border-radius: 50%; background: #f0efe8; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: #666; flex-shrink: 0; }
.sentiment-dot { width: 6px; height: 6px; border-radius: 50%; }

/* Charts */
.heatmap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 140px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bar { width: 100%; border-radius: 4px; transition: height 0.3s; }

/* Channel / Show rows */
.channel-row { display: flex; align-items: center; gap: 16px; padding: 18px; }
.channel-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 600; flex-shrink: 0; }
.channel-stat { text-align: center; padding: 0 16px; }
.channel-stat-value { font-size: 16px; font-weight: 500; }
.channel-stat-label { font-size: 10px; color: var(--text-secondary); }

/* Pages */
.page { display: none; flex-direction: column; gap: 16px; }
.page.active { display: flex; }

/* Layout helpers */
.flex-row { display: flex; gap: 12px; }
.flex-1 { flex: 1; min-width: 0; }
.flex-2 { flex: 2; min-width: 0; }
.flex-3 { flex: 3; min-width: 0; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.page.active { animation: fadeIn 0.2s ease; }

/* Tabs */
.tab-bar { display: flex; gap: 0; border-bottom: 0.5px solid var(--border); margin-bottom: 16px; }
.tab-item { padding: 8px 16px; font-size: 13px; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; }
.tab-item:hover { color: var(--text); }
.tab-item.active { color: var(--text); font-weight: 500; border-bottom-color: var(--text); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 100; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.15s ease; }
.modal { background: var(--surface); border-radius: 12px; padding: 24px; width: 480px; max-width: 90vw; max-height: 85vh; overflow-y: auto; box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
.modal-title { font-size: 16px; font-weight: 500; margin-bottom: 16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.modal-wide { width: 640px; }

/* Forms */
.form-group { margin-bottom: 14px; }
.form-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; display: block; }
.form-input { width: 100%; padding: 8px 12px; border: 0.5px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text); outline: none; transition: border-color 0.15s; }
.form-input:focus { border-color: var(--accent); }
.form-select { width: 100%; padding: 8px 12px; border: 0.5px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text); outline: none; }
textarea.form-input { min-height: 80px; resize: vertical; }

/* Toast */
.toast-container { position: fixed; top: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 10px 16px; border-radius: 8px; font-size: 12px; font-weight: 500; animation: fadeIn 0.2s ease; }
.toast-success { background: var(--green-bg); color: var(--green-text); }
.toast-error { background: var(--red-bg); color: var(--red-text); }
.toast-info { background: var(--accent-bg); color: var(--accent-text); }

/* States */
.loading { display: flex; align-items: center; justify-content: center; padding: 40px; color: var(--text-secondary); font-size: 13px; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; color: var(--text-secondary); text-align: center; }
.empty-state-icon { font-size: 32px; margin-bottom: 12px; opacity: 0.3; }
.empty-state-text { font-size: 13px; margin-bottom: 16px; }

/* Detail panel */
.detail-panel { position: fixed; right: 0; top: 0; bottom: 0; width: 420px; background: var(--surface); border-left: 0.5px solid var(--border); z-index: 50; overflow-y: auto; padding: 24px; transform: translateX(100%); transition: transform 0.2s ease; }
.detail-panel.open { transform: translateX(0); }
.detail-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.detail-close { cursor: pointer; font-size: 18px; color: var(--text-secondary); background: none; border: none; }
.detail-close:hover { color: var(--text); }

/* Login */
.login-page { display: flex; align-items: center; justify-content: center; height: 100vh; background: var(--bg); }
.login-card { background: var(--surface); border: 0.5px solid var(--border); border-radius: 12px; padding: 32px; width: 360px; }
.login-brand { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; }
.login-subtitle { font-size: 13px; color: var(--text-secondary); margin-bottom: 24px; }
.login-error { font-size: 12px; color: var(--red); margin-bottom: 12px; display: none; }

/* Kanban */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kanban-col { min-width: 220px; flex-shrink: 0; }
.kanban-col-header { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 8px; padding: 0 4px; }
.kanban-card { background: var(--surface); border: 0.5px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; font-size: 12px; transition: border-color 0.15s; }
.kanban-card:hover { border-color: var(--border-hover); }

/* Leaderboard */
.leaderboard-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 0.5px solid #f0efe8; }
.leaderboard-rank { font-size: 16px; font-weight: 600; color: var(--text-tertiary); width: 28px; text-align: center; }
.leaderboard-score { font-size: 18px; font-weight: 600; }

/* Action checklist */
.action-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 0.5px solid #f0efe8; }
.action-check { width: 18px; height: 18px; border: 1.5px solid var(--border); border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; }
.action-check:hover { border-color: var(--accent); }
.action-check.done { background: var(--green); border-color: var(--green); color: #fff; font-size: 10px; }
.action-priority { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.action-priority-high { color: var(--red); }
.action-priority-medium { color: var(--amber); }
.action-priority-low { color: var(--text-tertiary); }

/* Artist tag (clickable artist name in roster views) */
.artist-tag { display:inline-block; font-size:10px; font-weight:600; color:var(--accent-text); background:var(--accent-bg); padding:2px 7px; border-radius:var(--radius-pill); cursor:pointer; transition:background 0.1s; white-space:nowrap; }
.artist-tag:hover { background:var(--accent); color:#fff; }

/* ─────────────────────────────────────────────
   Mobile responsive (Phase 4c · 2026-05 pivot)
   Breakpoints: 768px (tablet) and 480px (phone).
   Sidebar slides in via hamburger; layouts collapse to single column.
   ───────────────────────────────────────────── */

.hamburger { display: none; }
.sidebar-backdrop { display: none; }
.mobile-topbar { display: none; }

@media (max-width: 768px) {
  html, body { background: #fff; }
  .app { height: 100vh; height: 100dvh; }

  /* Sidebar slides in from left */
  .sidebar {
    position: fixed;
    left: 0; top: 0;
    height: 100vh;
    height: 100dvh;
    width: 78vw;
    max-width: 320px;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 2px 0 14px rgba(0,0,0,0.12);
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .sidebar.open { transform: translateX(0); }

  .sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 80;
  }
  .sidebar-backdrop.open { display: block; }

  /* Mobile topbar · sticky full-width opaque header that holds the hamburger
     and prevents content from scrolling past the menu button. Lives inside
     .main which has zero top padding on mobile so the topbar sticks flush
     to the top of the scroll container with no gap above. */
  .mobile-topbar {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 70;
    background: var(--surface);
    border-bottom: 0.5px solid var(--border);
    margin: 0 -14px 12px -14px;
    padding: 8px 14px;
    padding-top: calc(8px + env(safe-area-inset-top));
    min-height: 52px;
    box-sizing: border-box;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  }

  /* Hamburger toggle */
  .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    color: var(--text);
    flex-shrink: 0;
  }
  .hamburger:active { background: var(--surface-muted); }

  /* Main content padding · zero top so the sticky topbar flushes to viewport top */
  .main {
    padding: 0 14px 12px 14px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: var(--surface);
  }

  /* Page title sizing */
  .page-title { font-size: 16px; }
  .page-subtitle { font-size: 12px; }

  /* Section header stacks */
  .section-header { flex-wrap: wrap; gap: 8px; }
  .section-header > * { min-width: 0; }

  /* Metrics row stacks 2-col on tablet, full-width on phone */
  .metrics-row { flex-wrap: wrap; gap: 8px; }
  .metric-card { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 12px; }
  .metric-value { font-size: 18px; }
  .metric-label { font-size: 11px; }

  /* Grids collapse */
  .content-grid-2,
  .content-grid-3 { grid-template-columns: 1fr; gap: 10px; }

  /* Flex rows stack */
  .flex-row { flex-direction: column; gap: 10px; }

  /* Card padding tighter */
  .card { padding: 12px; }
  .card-title { font-size: 13px; }

  /* Tab bar scrolls horizontally */
  .tab-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-item { flex-shrink: 0; }

  /* Modal goes near full-screen */
  .modal {
    width: 95vw;
    max-width: 95vw;
    max-height: 90vh;
    padding: 16px;
    border-radius: 10px;
  }
  .modal-wide { width: 95vw; }

  /* Detail panel goes full-width */
  .detail-panel {
    width: 100vw;
    padding: 16px;
  }

  /* Forms get bigger tap targets */
  .form-input,
  .form-select { padding: 10px 12px; font-size: 14px; }
  .nav-item { padding: 10px 12px; font-size: 14px; }

  /* Tables horizontally scroll */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Booking calendar grid · the previous rule applied min-width AND
     overflow-x to the same grid which made it impossible to scroll.
     Now: shrink the cells with smaller fonts/padding so 7 columns fit
     on 360px+ screens without horizontal scroll at all. */
  [style*="grid-template-columns:repeat(7"],
  [style*="grid-template-columns: repeat(7"] {
    font-size: 10px !important;
    gap: 1px !important;
  }
  [style*="grid-template-columns:repeat(7"] > div,
  [style*="grid-template-columns: repeat(7"] > div {
    padding: 2px !important;
    min-height: 36px !important;
  }

  /* Toast top placement adjusted */
  .toast-container { top: 60px; right: 8px; left: 8px; }

  /* Tour Budget · band rows tighten so × stays on row */
  .tb-band-row {
    grid-template-columns: 1fr 50px 84px 32px !important;
    gap: 4px !important;
  }
  .tb-band-row .form-input,
  .tb-band-row .form-select {
    padding: 8px 8px;
    font-size: 13px;
  }

  /* ─── Channel stats baseline ─── */
  .channel-stat { min-width: 0; padding: 6px 10px; }
  .channel-stat-value { font-size: 13px; }
  .channel-stat-label { font-size: 10px; }

  /* ─── Show cards · semantic structure for mobile stack ─── */
  .show-card-row { flex-wrap: wrap; gap: 10px; align-items: center; }
  .show-card-meta { flex: 1 1 100% !important; min-width: 0; }
  .show-card-stats {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    align-items: stretch !important;
  }
  .show-card-stats .channel-stat {
    padding: 8px 10px;
    background: var(--surface-muted);
    border-radius: 8px;
    text-align: left !important;
  }
  .show-card-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .show-card-actions > * { flex: 1 1 calc(50% - 3px); min-width: 0; }

  /* ─── Section header · stack title + actions ─── */
  .section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
  }
  .section-header > div:first-child { width: 100%; }
  .section-header > div:last-child:not(:first-child),
  .section-header > button:last-child {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ─── Modal · bottom-sheet ─── */
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .modal {
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 92vh !important;
    margin: 0 !important;
    padding: 18px 16px !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .modal-wide { width: 100% !important; max-width: 100vw !important; }

  /* ─── Forms · 44px tap targets ─── */
  .form-input,
  .form-select {
    padding: 12px 14px !important;
    font-size: 15px !important;
    min-height: 44px;
    border-radius: 8px;
  }
  textarea.form-input { min-height: 90px !important; }

  /* ─── Buttons · 44/36 min-height ─── */
  .btn {
    padding: 11px 18px;
    font-size: 14px;
    min-height: 44px;
    border-radius: 10px;
  }
  .btn-sm {
    padding: 8px 12px;
    font-size: 12px;
    min-height: 36px;
  }

  /* ─── Sidebar nav items · 44px tap target ─── */
  .nav-item {
    padding: 12px 14px !important;
    font-size: 14px !important;
    min-height: 44px;
    border-radius: 8px;
  }

  /* ─── Detail panel · safe-area aware ─── */
  .detail-panel {
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  /* ─── Kanban · horizontal scroll, snap ─── */
  .kanban {
    margin: 0 -14px;
    padding: 0 14px 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .kanban-col {
    min-width: 80vw;
    scroll-snap-align: start;
  }

  /* ─── Filter bars · horizontal scroll, no scrollbar ─── */
  .filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    margin: 0 -14px 12px;
    padding: 0 14px;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-bar > * { flex-shrink: 0; }

  /* ─── List headers · hide; use card layout instead ─── */
  .list-header { display: none !important; }

  /* ─── Tab bar margin to edges ─── */
  .tab-bar {
    margin: 0 -14px 12px;
    padding: 0 14px;
  }
  .tab-item { padding: 10px 14px; }

  /* ─── Toast · safe-area aware ─── */
  .toast-container {
    top: max(64px, calc(env(safe-area-inset-top) + 56px)) !important;
  }

  /* ─── Action rows on dashboard · taller ─── */
  .action-row { padding: 12px 0; gap: 12px; }
  .action-check { width: 22px; height: 22px; }

  /* ─── Setlist tool · two-pane stacks ─── */
  .setlist-tool .content-grid-2 { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .main { padding: 10px 10px; }

  /* Metric cards: full-width on phone */
  .metric-card { flex: 1 1 100%; }

  /* Page title even smaller */
  .page-title { font-size: 15px; }

  /* Smaller buttons stay tappable */
  .btn { padding: 8px 12px; font-size: 13px; min-height: 36px; }
  .btn-sm { padding: 6px 10px; font-size: 12px; min-height: 32px; }

  /* Stat row on EPK + similar */
  .stat-row { flex-direction: column; }

  /* Login card */
  .login-card { width: 92vw; padding: 24px 20px; }
}

/* Large phones · landscape and tablets keep 2-col metric cards */
@media (min-width: 481px) and (max-width: 768px) {
  .metric-card { flex: 1 1 calc(50% - 4px); }
}