/* ──────────────────────────────────────────────────────────────────────
   dashboard-5.css — Phase 5 (td-11)
   1) Server picker: hide the workspace tabs until a server is chosen
   2) Premium crown badge (everywhere a server is picked)
   3) Mobile: left sidebar → horizontal scrollable tab bar (FIX)
   Loaded last, additive only — uses the existing design tokens.
   ──────────────────────────────────────────────────────────────────── */

/* ── 1) Server picker: no left tabs before a server is selected ──────── */
body.no-server .sidebar        { display: none; }
body.no-server .layout         { grid-template-columns: 1fr; }
body.no-server .topbar-divider { display: none; }
body.no-server #server-switcher { pointer-events: none; }
body.no-server #server-switcher .caret { display: none; }

/* ── 2) Premium crown badge ──────────────────────────────────────────── */
.td-crown {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  color: #FBBF24; flex-shrink: 0; vertical-align: middle;
}
.picker-card-name .td-crown { margin-left: 6px; }
.server-dropdown-item .info .td-crown { margin-left: 6px; }
.td-crown svg { display: block; filter: drop-shadow(0 0 4px rgba(251,191,36,.45)); }
.picker-card.is-premium { border-color: rgba(251,191,36,.35); }
.picker-card.is-premium:hover { border-color: rgba(251,191,36,.6); }

/* ── 3) MOBILE — left nav becomes a horizontal tab bar ───────────────── */
/* The base @media(880) rule tries to shrink the rail to 60px, but the nav
   labels are bare text nodes (not <span>s) so they can't be hidden and
   overflow the rail. We instead lay the nav out horizontally with icon+label,
   which reads correctly on phones. Loaded last → wins.                    */
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr !important; }

  .sidebar {
    position: sticky;
    top: var(--topbar-h, 52px);
    z-index: 40;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 7px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-right: none;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }

  .sidebar .nav-section,
  .sidebar .nav-section-bottom {
    display: flex;
    flex-direction: row;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: none;
    flex: 0 0 auto;
  }
  .sidebar .nav-label { display: none; }

  .sidebar .nav-item {
    flex-direction: row;
    justify-content: center;
    white-space: nowrap;
    padding: 8px 13px;
    margin: 0;
    border-radius: 8px;
    flex: 0 0 auto;
  }
  .sidebar .nav-ic { width: 15px; height: 15px; }
  .sidebar .nav-badge { margin-left: 6px; }

  /* hide the footer/privacy note in the horizontal bar */
  .sidebar-footer, .sidebar .privacy-note { display: none; }

  /* picker stays clean (no bar at all) */
  body.no-server .sidebar { display: none; }

  .content { padding: 16px 12px; }
}

/* ── 3b) Smaller refinements ─────────────────────────────────────────── */
@media (max-width: 720px) {
  .topbar      { padding: 0 10px; gap: 8px; }
  .topbar-left { gap: 8px; min-width: 0; }
  .brand-name  { display: none; }
  .server-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .server-dropdown { left: 8px !important; right: 8px; min-width: 0; }
  .user-dropdown   { right: 8px; }

  .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

  .settings-pane .form-grid { grid-template-columns: 1fr !important; }
  .settings-section { padding: 14px; }
  .settings-save-bar { left: 12px; right: 12px; transform: none; border-radius: 12px; }

  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-grid, .panel-grid { grid-template-columns: 1fr; }

  .audit-row  { grid-template-columns: 28px 1fr; }
  .audit-time { grid-column: 2; justify-self: start; padding-top: 2px; }

  .modal { max-width: 100%; max-height: 92vh; }
}

@media (max-width: 480px) {
  .page-title { font-size: 19px; }
  .page-desc  { font-size: 13px; }
  .stat-grid  { grid-template-columns: 1fr; }
  .stat-value { font-size: 22px; }
  .picker-page { padding: 32px 16px; }
  .btn { padding: 8px 12px; }
  .tabs { flex-wrap: wrap; }
}