/* Mobile UI — complete redesign (≤768px) */
@media (max-width: 768px) {
  :root {
    --mobile-radius: 16px;
    --mobile-radius-sm: 12px;
    --mobile-radius-xs: 8px;
    --mobile-surface: #0f1219;
    --mobile-surface-raised: #151923;
    --mobile-surface-soft: #1a2030;
    --mobile-border: rgba(255, 255, 255, 0.06);
    --mobile-border-strong: rgba(255, 255, 255, 0.1);
    --mobile-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    --mobile-shadow-soft: 0 6px 22px rgba(0, 0, 0, 0.28);
    --mobile-glass: rgba(12, 14, 20, 0.9);
    --mobile-accent-glow: rgba(124, 92, 255, 0.28);
    --mobile-bottom-nav-height: 4.25rem;
    --mobile-bottom-nav-lift: 0.55rem;
    --mobile-content-bottom-gap: 0.85rem;
    --mobile-bottom-nav-reserve: calc(
      var(--mobile-bottom-nav-lift) + var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px)
    );
  }

  html {
    font-size: 16px;
  }

  body {
    background:
      radial-gradient(130% 90% at 100% -25%, rgba(124, 92, 255, 0.14), transparent 58%),
      radial-gradient(80% 55% at -15% 105%, rgba(34, 211, 238, 0.07), transparent 52%),
      var(--bg);
  }

  /* ——— App header ——— */
  .sidebar {
    padding: 0.7rem 1rem;
    background: var(--mobile-glass);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid var(--mobile-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  .brand-top {
    position: relative;
    gap: 0.65rem;
  }

  .brand-left {
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 3.25rem);
  }

  .header-actions {
    gap: 0.35rem;
    z-index: 4;
  }

  .brand-copy {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
  }

  .brand-identity {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
  }

  .brand-welcome {
    display: none !important;
  }

  .brand-copy:not(:has(.brand-welcome:not(.hidden))) .brand-name {
    font-size: 0;
    line-height: 1.2;
  }

  .brand-copy:not(:has(.brand-welcome:not(.hidden))) .brand-name::before {
    content: '25Pixels';
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
  }

  .brand-mark,
  .brand-logo {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    max-width: 38px;
    max-height: 38px;
    border-radius: 11px;
    box-shadow: var(--mobile-shadow-soft);
  }

  .profile-menu-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-color: var(--mobile-border-strong);
    background: linear-gradient(160deg, rgba(124, 92, 255, 0.28), rgba(124, 92, 255, 0.1));
    box-shadow: 0 4px 14px var(--mobile-accent-glow);
  }

  .profile-menu-avatar {
    font-size: 0.74rem;
  }

  /* ——— Profile sheet ——— */
  .profile-sheet-panel {
    padding: 1.15rem 1rem calc(var(--mobile-bottom-nav-reserve) + var(--mobile-content-bottom-gap));
    background: linear-gradient(180deg, #171b26, #11141c);
    border-top-color: var(--mobile-border-strong);
    border-radius: 22px 22px 0 0;
    box-shadow: var(--mobile-shadow);
  }

  .profile-sheet-identity {
    border-bottom-color: var(--mobile-border);
  }

  .profile-avatar-lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.05rem;
  }

  .profile-display-name {
    font-size: 1.12rem;
  }

  .profile-sheet-links .btn,
  .profile-sheet-extra .btn,
  .profile-sheet-links .import-label {
    min-height: 2.75rem;
    border-radius: var(--mobile-radius-sm);
    border-color: var(--mobile-border);
    background: var(--mobile-surface-soft);
  }

  .profile-sheet-footer {
    border-top-color: var(--mobile-border);
  }

  .profile-sign-out {
    min-height: 2.75rem;
    border-radius: var(--mobile-radius-sm);
  }

  /* ——— Main content ——— */
  .main {
    padding: 0.9rem 1rem calc(var(--mobile-bottom-nav-reserve) + var(--mobile-content-bottom-gap));
    scroll-padding-bottom: calc(var(--mobile-bottom-nav-reserve) + var(--mobile-content-bottom-gap));
  }

  .main > .view {
    padding-bottom: 0.35rem;
  }

  .topbar {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--mobile-border);
  }

  .topbar-left {
    flex: 1;
    min-width: 0;
  }

  .topbar h1 {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.12;
  }

  .topbar .subtitle {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.76rem;
    color: var(--text-dim);
    line-height: 1.35;
  }

  .topbar-actions {
    flex-shrink: 0;
    justify-content: flex-end;
  }

  .topbar-actions .btn-primary {
    padding: 0.48rem 0.9rem;
    font-size: 0.78rem;
    border-radius: 999px;
    box-shadow: 0 6px 18px var(--mobile-accent-glow);
  }

  body[data-active-view="shows"] .topbar {
    flex-direction: row;
    align-items: flex-end;
  }

  body[data-active-view="shows"] .topbar .subtitle {
    display: none;
  }

  body[data-active-view="shows"] #addShowBtn {
    padding: 0.48rem 0.9rem;
    font-size: 0.78rem;
    min-height: auto;
    border-radius: 999px;
  }

  /* ——— Bottom navigation ——— */
  .mobile-bottom-nav {
    --mobile-bottom-nav-height: 4.25rem;
    --mobile-bottom-nav-lift: 0.55rem;
    left: 0.7rem;
    right: 0.7rem;
    bottom: calc(var(--mobile-bottom-nav-lift) + env(safe-area-inset-bottom, 0px));
    width: auto;
    min-height: var(--mobile-bottom-nav-height);
    padding: 0.4rem 0.3rem 0.45rem;
    gap: 0.1rem;
    border: 1px solid var(--mobile-border-strong);
    border-radius: 24px;
    background: var(--mobile-glass);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: var(--mobile-shadow);
    border-top: none;
  }

  .mobile-tab {
    min-height: 2.9rem;
    padding: 0.38rem 0.12rem 0.3rem;
    border-radius: 16px;
    color: var(--text-dim);
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
  }

  .mobile-tab:active {
    transform: scale(0.95);
  }

  .mobile-tab.active {
    background: linear-gradient(180deg, rgba(124, 92, 255, 0.26), rgba(124, 92, 255, 0.09));
    color: var(--accent-hover);
    box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.32);
  }

  .mobile-tab-icon {
    width: 1.58rem;
    height: 1.58rem;
  }

  .mobile-tab.active .mobile-tab-icon {
    filter: drop-shadow(0 0 8px rgba(124, 92, 255, 0.4));
  }

  /* ——— Filters & inputs ——— */
  .filters-bar,
  .view-header-row {
    gap: 0.55rem;
    margin-bottom: 0.9rem;
  }

  .input,
  .select,
  .textarea {
    border-radius: var(--mobile-radius-sm);
    border-color: var(--mobile-border);
    background: var(--mobile-surface);
  }

  .filters-bar .input,
  .view-header-row .input {
    background: var(--mobile-surface-raised);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  }

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

  .btn-primary {
    box-shadow: 0 4px 16px var(--mobile-accent-glow);
  }

  .btn-ghost {
    background: var(--mobile-surface-soft);
    border-color: var(--mobile-border);
  }

  /* ——— Stat cards ——— */
  .insight-grid {
    gap: 0.6rem;
    margin-bottom: 0.9rem;
  }

  .insight-card,
  .stat-card {
    padding: 0.9rem 0.95rem;
    border-radius: var(--mobile-radius);
    border-color: var(--mobile-border);
    background: linear-gradient(180deg, var(--mobile-surface-raised), var(--mobile-surface));
    box-shadow: var(--mobile-shadow-soft);
  }

  .insight-card h3,
  .stat-card h3 {
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 0.35rem;
  }

  .stat-card .stat-value {
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  #view-payments .insight-grid,
  #view-invoices #invoiceStats,
  #view-reports .insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ——— People switch ——— */
  .people-mobile-switch {
    padding: 0.24rem;
    margin-bottom: 0.9rem;
    border-radius: 999px;
    background: var(--mobile-surface);
    border-color: var(--mobile-border);
  }

  .people-switch-btn {
    padding: 0.52rem 0.85rem;
    font-size: 0.8rem;
    border-radius: 999px;
  }

  .people-switch-btn.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 16px var(--mobile-accent-glow);
  }

  /* ——— List cards ——— */
  .card,
  .data-table tr {
    border-radius: var(--mobile-radius);
    border-color: var(--mobile-border);
    background: var(--mobile-surface-raised);
    box-shadow: var(--mobile-shadow-soft);
  }

  #view-clients .card,
  #view-crew .card {
    padding: 0.78rem 0.88rem;
  }

  #view-shows #showsTable tr.shows-month-header {
    display: none !important;
  }

  .shows-mobile-month-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    max-width: 100%;
    margin-bottom: 0.85rem;
    padding: 0.22rem 0.75rem;
    overflow-x: scroll;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
  }

  .shows-mobile-month-tabs::-webkit-scrollbar {
    display: none;
  }

  .shows-month-tab {
    flex: 0 0 auto;
    scroll-snap-align: center;
    touch-action: pan-x;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid var(--mobile-border);
    border-radius: 999px;
    padding: 0.48rem 0.85rem;
    background: var(--mobile-surface);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }

  .shows-month-tab.active {
    background: var(--accent);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 16px var(--mobile-accent-glow);
  }

  #view-shows .data-table tr.shows-mobile-card {
    border-radius: var(--mobile-radius);
    border-color: var(--mobile-border);
    background: linear-gradient(180deg, var(--mobile-surface-raised), var(--mobile-surface));
    box-shadow: var(--mobile-shadow-soft);
    padding: 0.68rem 0.78rem;
  }

  .status-badge,
  .status-select {
    border-radius: 999px;
  }

  /* ——— Calendar ——— */
  .calendar-toolbar {
    gap: 0.45rem;
    margin-bottom: 0.7rem;
  }

  .calendar-toolbar .btn {
    border-radius: 999px;
    padding: 0.42rem 0.78rem;
    font-size: 0.78rem;
  }

  .calendar-grid {
    border-radius: var(--mobile-radius);
    border: 1px solid var(--mobile-border);
    background: var(--mobile-surface-raised);
    overflow: hidden;
    box-shadow: var(--mobile-shadow-soft);
  }

  .calendar-weekdays {
    background: var(--mobile-surface);
    border-bottom: 1px solid var(--mobile-border);
  }

  .calendar-weekdays span {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-dim);
  }

  .calendar-day {
    border-color: var(--mobile-border);
  }

  .calendar-day.selected .day-number,
  .calendar-day.today .day-number {
    box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.5);
  }

  .calendar-day-detail {
    margin-top: 0.9rem;
    border-radius: var(--mobile-radius);
    border-color: var(--mobile-border);
    background: var(--mobile-surface-raised);
    box-shadow: var(--mobile-shadow-soft);
  }

  .calendar-legend {
    gap: 0.55rem;
    margin-bottom: 0.7rem;
  }

  .legend-item {
    font-size: 0.72rem;
    color: var(--text-muted);
  }

  /* ——— Modals ——— */
  dialog.modal .modal-content,
  dialog.modal form.modal-content {
    border-radius: var(--mobile-radius);
    border-color: var(--mobile-border-strong);
    box-shadow: var(--mobile-shadow);
  }

  dialog.modal .modal-header {
    border-bottom: 1px solid var(--mobile-border);
  }

  /* ——— Toast ——— */
  .toast {
    left: 1rem;
    right: 1rem;
    bottom: calc(var(--mobile-bottom-nav-reserve) + var(--mobile-content-bottom-gap));
    text-align: center;
    border-radius: var(--mobile-radius-sm);
    backdrop-filter: blur(14px);
    box-shadow: var(--mobile-shadow);
  }

  /* ——— Empty states ——— */
  .empty-state {
    padding: 2.1rem 1rem;
    border-radius: var(--mobile-radius);
    border: 1px dashed var(--mobile-border-strong);
    background: rgba(255, 255, 255, 0.02);
  }

  .empty-state p {
    color: var(--text-muted);
    font-size: 0.88rem;
  }

  /* ——— Payments & invoices ——— */
  #view-payments .data-table tr {
    border-radius: var(--mobile-radius-sm);
  }

  #view-payments #paymentsTable tr.shows-month-header td {
    background: transparent;
    border-bottom-color: var(--mobile-border);
  }

  #view-invoices > .insight-card {
    border-radius: var(--mobile-radius);
    box-shadow: var(--mobile-shadow-soft);
  }

  .invoice-actions {
    margin-top: 0.9rem;
  }

  .invoice-actions .btn-primary {
    width: 100%;
    min-height: 2.75rem;
    border-radius: var(--mobile-radius-sm);
  }

  /* ——— Login ——— */
  .login-screen,
  .auth-screen {
    padding: 1.25rem 1rem;
    background:
      radial-gradient(120% 80% at 100% -20%, rgba(124, 92, 255, 0.14), transparent 55%),
      radial-gradient(90% 60% at -10% 110%, rgba(34, 211, 238, 0.08), transparent 50%),
      var(--bg);
  }

  .login-card,
  .auth-card {
    width: 100%;
    max-width: 22rem;
    padding: 1.75rem 1.35rem;
    border-radius: var(--mobile-radius);
    border: 1px solid var(--mobile-border-strong);
    background: linear-gradient(180deg, var(--mobile-surface-raised), var(--mobile-surface));
    box-shadow: var(--mobile-shadow);
  }

  .login-submit {
    width: 100%;
    min-height: 2.75rem;
    border-radius: var(--mobile-radius-sm);
  }

  /* ——— Dashboard ——— */
  #view-dashboard .insight-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  #view-dashboard .dashboard-panel {
    border-radius: var(--mobile-radius);
    box-shadow: var(--mobile-shadow-soft);
  }

  #view-reports .filters-bar {
    margin-bottom: 0.9rem;
  }

  #view-reports .table-wrap {
    border-radius: var(--mobile-radius);
    border: 1px solid var(--mobile-border);
    background: var(--mobile-surface-raised);
    box-shadow: var(--mobile-shadow-soft);
  }
}

@media (max-width: 480px) {
  .main {
    padding: 0.7rem 0.7rem calc(var(--mobile-bottom-nav-reserve) + var(--mobile-content-bottom-gap));
  }
}