/* ============================================================
   Desktop dashboard layout  —  min-width: 481px
   Fixed left sidebar + right viewport.
   Phone overrides live in dashboard-phone.css (≤ 480px).
   ============================================================ */

/* ── Sidebar: hidden by default, desktop only ─────────────── */

.db-sidebar {
  display: none;
}

/* Panel card headings — hidden on desktop (outer phone-panel-title takes over) */
.panel-card-heading { display: none; }

/* ============================================================
   @media (min-width: 481px)
   ============================================================ */

@media (min-width: 481px) {

  /* ── Fixed left sidebar ────────────────────────────────────── */

  .db-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--panel-bg, var(--bg));
    border-right: 1px solid var(--border2);
    z-index: 60;
    padding: 0 0 24px;
    gap: 0;
  }

  /* Brand row at top of sidebar */
  .db-sidebar__brand {
    display: flex;
    align-items: center;
    padding: 20px 16px 16px;
    border-bottom: 0px solid var(--border2);
    flex-shrink: 0;
  }

  .db-sidebar__brand-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--theme-text-size-lg, 13px);
    text-transform: uppercase;
    letter-spacing: var(--theme-tracking-caps-xl, 0.06em);
    white-space: nowrap;
  }

  .db-sidebar__brand-text {
    display: inline-block;
  }

  /* Section groups */
  .db-sidebar__nav,
  .db-sidebar__util {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 0 0;
  }

  .db-sidebar__util {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--border2);
  }

  /* Section label (muted heading between groups) */
  .db-sidebar__section-label {
    display: block;
    font-size: var(--theme-text-size-xs, 10px);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    opacity: 0.38;
    padding: 14px 16px 4px;
    pointer-events: none;
    user-select: none;
  }

  /* Divider */
  .db-sidebar__divider {
    height: 1px;
    background: var(--border2);
    margin: 6px 12px;
    flex-shrink: 0;
  }

  /* Sidebar nav/util buttons and links */
  .db-sidebar__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 16px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--theme-text-size-sm, 11px);
    text-transform: uppercase;
    letter-spacing: var(--theme-tracking-label-wide, 0.04em);
    font-weight: 400;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    opacity: 1;
    transition: background 110ms ease, color 110ms ease, opacity 110ms ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .db-sidebar__item svg {
    flex-shrink: 0;
  }

  .db-sidebar__item:hover,
  .db-sidebar__item:focus-visible {
    background: var(--fg, #111);
    color: var(--bg, #fff);
    opacity: 1;
    outline: none;
  }

  .db-sidebar__item.danger {
    color: #c50000;
  }

  .db-sidebar__item.danger:hover,
  .db-sidebar__item.danger:focus-visible {
    background: #c50000;
    color: #fff;
  }

  /* Active panel highlight — body attr set by dashboard-panel-tabs.js */
  body[data-dashboard-panel="remote"]        .db-sidebar__item[data-dashboard-panel-tab="remote"],
  body[data-dashboard-panel="library"]       .db-sidebar__item[data-dashboard-panel-tab="library"],
  body[data-dashboard-panel="account"]       .db-sidebar__item[data-dashboard-panel-tab="account"],
  body[data-dashboard-panel="notifications"] .db-sidebar__item[data-dashboard-panel-tab="notifications"] {
    background: var(--fg, #111);
    color: var(--bg, #fff);
    opacity: 1;
    font-weight: 500;
  }

  /* Transfer subtabs — always visible */
  .db-sidebar__subtabs {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 2px 0 4px 0;
  }

  .db-sidebar__subtab {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 6px 16px 6px 32px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--theme-text-size-xs, 10px);
    text-transform: uppercase;
    letter-spacing: var(--theme-tracking-label-wide, 0.04em);
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background 110ms ease, color 110ms ease, opacity 110ms ease;
    white-space: nowrap;
  }

  .db-sidebar__subtab svg {
    flex-shrink: 0;
  }

  .db-sidebar__subtab:hover,
  .db-sidebar__subtab:focus-visible {
    background: var(--fg, #111);
    color: var(--bg, #fff);
    opacity: 1;
    outline: none;
  }

  /* Sidebar notification preview list */
  .db-sidebar__notif-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 2px 0 4px 0;
    border-top: 1px solid currentColor;
    border-top-color: color-mix(in srgb, currentColor 18%, transparent);
  }

  .db-sidebar__notif-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 5px 16px 5px 14px;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-family: var(--theme-font-sidebar-notification);
    font-size: var(--theme-text-size-xs, 10px);
    text-align: left;
    text-decoration: none;
    opacity: 0.6;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 110ms ease, color 110ms ease, opacity 110ms ease;
  }

  .db-sidebar__notif-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    opacity: 0;
  }

  .db-sidebar__notif-item.is-unread .db-sidebar__notif-dot {
    opacity: 1;
  }

  .db-sidebar__notif-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
  }

  .db-sidebar__notif-time {
    flex-shrink: 0;
    padding: 1px 5px;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 3px;
    background: color-mix(in srgb, currentColor 6%, transparent);
    font-family: var(--theme-font-mono, "Roboto Mono", monospace);
    font-size: var(--theme-text-size-2xs, 9px);
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: none;
    opacity: 0.9;
  }

  .db-sidebar__notif-item:hover,
  .db-sidebar__notif-item:focus-visible {
    background: var(--fg, #111);
    color: var(--bg, #fff);
    opacity: 1;
    outline: none;
  }

  /* ── Push all in-flow page sections right of sidebar ─────── */

  header.sc-header,
  main,
  footer.dashboard-page-footer {
    margin-left: 220px;
  }

  /* ── Header: notification bell + avatar only ─────────────── */

  header.sc-header {
    position: sticky;
    top: 0;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: transparent;
    border-bottom: none;
    z-index: 50;
    gap: 10px;
  }

  /* Hide brand panel, phone title, and all hamburger items */
  .sc-header__brand-panel { display: none; }
  .db-phone-title         { display: none !important; }

  /* Items panel: hide all (navigation is in sidebar; bell+avatar moved to db-header-actions) */
  .sc-header__items-panel > * { display: none !important; }
  .sc-header__items-panel { display: none; }

  /* Push db-header-actions to right edge */
  header.sc-header .sc-header__inner { justify-content: flex-end; }

  /* db-header-actions — visible on desktop too, styled to match existing bell+avatar */
  .db-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
  }

  .db-header-actions .header-notification-bell,
  .db-header-actions .header-account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 7px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms ease;
    position: relative;
  }

  .db-header-actions .header-notification-bell:hover,
  .db-header-actions .header-account-avatar:hover {
    background: var(--hover, rgba(0,0,0,0.06));
  }

  .db-header-actions .header-account-avatar img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }

  .db-header-actions .header-account-avatar__placeholder {
    font-size: 11px;
    font-weight: 600;
  }

  .db-header-actions .header-notification-badge {
    position: absolute;
    top: 4px;
    right: 6px;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    background: #c50000;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
  }

  /* ── Old sidebar column hidden ───────────────────────────── */

  .dashboard-sidebar-column {
    display: none !important;
  }

  /* ── Panel tabs row hidden (navigation moved to sidebar) ─── */

  .dashboard-panel-tabs {
    display: none !important;
  }

  /* ── Main viewport ─────────────────────────────────────────── */

  main {
    padding: 0;
    min-height: calc(100vh - 60px);
  }

  /* ── Panel page headings ──────────────────────────────────── */

  /* Remove grid split — sidebar-column is gone, main-column fills all */
  .wrap.grid {
    display: block;
    max-width: none;
    padding: 0;
    margin: 0;
    gap: 0;
  }

  .dashboard-main-column {
    width: 100%;
  }

  /* Remove card chrome from playlists-panel — viewport IS the card */
  .playlists-panel.card {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0 32px 48px;
    box-shadow: none;
  }

  .playlists-panel.card > .body {
    padding-top: 0;
  }

  .playlists-panel.card:hover {
    border-color: transparent;
    box-shadow: none;
  }

  /* Each panel view fills the viewport */
  .dashboard-panel-view {
    width: 100%;
  }

  /* Content panels — centered within the content area */
  #dashboardRemotePanel,
  #dashboardLibraryPanel,
  #dashboardAccountPanel,
  #dashboardTransferPanel,
  #dashboardNotificationsPanel,
  #dashboardDocumentationPanel,
  #dashboardPricingPanel {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Transfer panel — full-width card-free layout */
  #dashboardTransferPanel,
  #dashboardNotificationsPanel {
    padding: 0;
  }

  #dashboardNotificationsPanel > .dashboard-panel-heading {
    width: 100%;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
  }

  #dashboardNotificationsPanel .dashboard-notifications-shell {
    width: 100%;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
  }

  #dashboardNotificationsPanel .notifications-card {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  #dashboardNotificationsPanel .notifications-card::before {
    display: none;
  }

  #dashboardNotificationsPanel .notifications-card:hover {
    border-color: transparent;
    box-shadow: none;
    transform: none;
  }

  #dashboardTransferPanel .card {
    border: 1px solid var(--border2);
    border-radius: 12px;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
  }

  #dashboardNotificationsPanel .card {
    border: none;
    border-radius: 0;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    box-shadow: none;
  }

  #dashboardDocumentationPanel .dashboard-documentation-shell {
    width: 100%;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
  }

  #dashboardDocumentationPanel [data-documentation-host] .about-panel {
    margin-left: 0;
    margin-right: auto;
  }

  #dashboardPricingPanel .dashboard-pricing-shell {
    width: 100%;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
  }

  #dashboardPricingPanel [data-pricing-host] .about-panel {
    margin-left: 0;
    margin-right: auto;
  }

  /* ── All gates — offset left edge by sidebar width ───────────── */
  /*    Ensures cards center within the content viewport, not full 100vw */

  .key-gate,
  .publish-gate {
    padding-left: 220px;
  }

  /* Auth gates must sit above the dashboard chrome so the full page blurs. */
  #keyGate,
  #recoverGate {
    padding-left: var(--popup-overlay-padding, 16px);
    --popup-z-index: 80;
  }

  /* ── Utility gates — above sidebar (sidebar z-index: 60) ─────── */

  #helpGate,
  #reportBugGate,
  #pricingGate,
  #docsGate,
  #termsGate {
    --popup-z-index: 80;
  }

  /* ── Editor panel — full-height iframe ──────────────────────── */

  /* Editor is now inside .playlists-panel.card > .body like all other panels,
     so heading padding/position is identical — no overrides needed. */

  #dashboardEditorPanel {
    width: 100%;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
  }

  #dashboardEditorMount {
    width: 100%;
  }

  #dashboardEditorPanel .transfer-editor-shell {
    max-width: 800px;
    margin-left: 0;
    margin-right: auto;
  }

  #dashboardEditorPanel .transfer-editor-shell__body {
    padding-bottom: calc(240px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Footer ─────────────────────────────────────────────────── */

  footer.dashboard-page-footer {
    padding: 20px 32px;
    text-align: left;
  }

}