/* ============================================================================
   Crawdaddy — DESKTOP LAYER
   Everything here activates ONLY at >= 980px. The iOS Capacitor app loads the
   site in a phone-width WebView (< 980px), so it NEVER renders any of this —
   the mobile/phone experience is untouched. Loaded after app.css so these
   rules win on the cascade. Reuses app.css variables (--bg, --red, etc.).
   ============================================================================ */

/* Desktop-only chrome is hidden by default so the phone layout is pristine. */
#deskTopbar { display: none; }

@media (min-width: 980px) {

  /* ---- 1. Un-frame the phone into a full-viewport desktop app ------------- */
  body { padding: 0; align-items: stretch; justify-content: stretch; background: var(--bg); }
  .stage-label { display: none; }
  .phone {
    width: 100vw; height: 100vh; height: 100dvh; max-width: none;
    border-radius: 0; padding: 0; box-shadow: none; background: var(--bg);
  }
  .screen { border-radius: 0; }
  .notch { display: none; }

  /* The desktop top bar replaces the phone header + bottom tab bar. */
  .screen > .header { display: none; }
  .bottom-nav { display: none; }

  /* ---- 2. Desktop top bar ------------------------------------------------- */
  #deskTopbar {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    height: 64px; padding: 0 24px;
    background: rgba(13, 9, 8, 0.97);
    border-bottom: 1px solid var(--border);
    position: relative; z-index: 50;
  }
  body.light #deskTopbar { background: rgba(255, 247, 225, 0.97); }
  body.order-alarm-on #deskTopbar { margin-top: var(--order-alarm-h, 56px); }

  .dt-logo {
    font-family: var(--font-logo); font-size: 24px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase; line-height: 1;
    cursor: pointer; margin-right: 16px; white-space: nowrap;
  }
  .dt-logo .craw { color: var(--red); }
  .dt-logo .daddy { color: var(--text); }

  .dt-nav { display: flex; align-items: center; gap: 2px; }
  .dt-link {
    background: transparent; border: 0; color: var(--muted);
    font-family: var(--font-body); font-size: 13px; font-weight: 700;
    letter-spacing: 0.3px; padding: 9px 14px; border-radius: 9px;
    cursor: pointer; transition: background 0.14s, color 0.14s;
  }
  .dt-link:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
  body.light .dt-link:hover { background: rgba(0, 0, 0, 0.05); }

  .dt-spacer { flex: 1; }

  .dt-ghost, .dt-vendor {
    font-family: var(--font-body); font-size: 11px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase; padding: 8px 15px;
    border-radius: 999px; cursor: pointer; transition: all 0.15s; white-space: nowrap;
  }
  .dt-ghost { background: transparent; border: 1.5px solid var(--border-mid); color: var(--muted); }
  .dt-ghost:hover { border-color: var(--red); color: var(--red); }
  .dt-vendor { background: transparent; border: 1.5px solid var(--red); color: var(--red); }
  .dt-vendor:hover { background: var(--red); color: #fff; }

  .dt-account {
    width: 38px; height: 38px; border-radius: 50%; margin-left: 6px;
    background: var(--layer-2); border: 1px solid var(--border-mid); color: var(--text);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s; flex-shrink: 0;
  }
  .dt-account:hover { border-color: var(--red); color: var(--red); }
  .dt-account.signed-in { border-color: var(--red); color: var(--red); }
  .dt-account svg { width: 18px; height: 18px; }

  /* Dark / light toggle — shows the mode you'll switch TO (sun in dark, moon in light) */
  .dt-theme {
    width: 38px; height: 38px; border-radius: 50%; margin-left: 6px;
    background: var(--layer-2); border: 1px solid var(--border-mid); color: var(--text);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s; flex-shrink: 0; font-size: 18px; line-height: 1; padding: 0;
  }
  .dt-theme:hover { border-color: var(--red); color: var(--red); }
  .dt-theme .dt-moon { display: none; }
  .dt-theme .dt-sun { display: inline; }
  body.light .dt-theme .dt-sun { display: none; }
  body.light .dt-theme .dt-moon { display: inline; }

  /* ---- 3. Sheets become centered modals (so they're usable on desktop) ---- */
  /* The phone uses bottom slide-up sheets; on a wide screen those read as a
     broken full-width drawer. Re-center them as modals. The .open class still
     drives visibility, so all existing show*/closeSheet() logic is reused. */
  .sheet-backdrop { background: rgba(0, 0, 0, 0.6); }
  .sheet {
    position: fixed; left: 50%; top: 50%; right: auto; bottom: auto;
    width: min(560px, 92vw); max-width: 560px; max-height: 86vh;
    border-radius: 18px; border: 1px solid var(--border-mid);
    transform: translate(-50%, -47%) scale(0.98); opacity: 0;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.24s ease;
    box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.8);
  }
  .sheet.open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  /* Fullscreen sheets (Account, Vendor signup, detail pages) read as a roomy
     centered card rather than edge-to-edge. */
  .sheet.fullscreen {
    width: min(760px, 94vw); height: auto; max-height: 90vh;
    border-radius: 18px; border: 1px solid var(--border-mid);
  }
  body.order-alarm-on .sheet.fullscreen { height: auto; }
  /* Keep the grab handle hidden on desktop (close via backdrop / built-in back). */
  .sheet:not(.fullscreen) .sheet-handle-wrap { padding-top: 14px; }

  /* The map fills the area under the top bar (it's already flex:1). */
  .map-area { flex: 1; }

  /* The desktop sidebar owns mode + availability, so hide the phone's top
     mode-pill row and availability row here (they stay on mobile). */
  #modePillRow, #availRow { display: none !important; }
}

/* ===========================================================================
   PHASE 2 — dual-pane desktop map: spot-list sidebar + full map.
   Reuses the app's own list rows (buildListRowsHtml) and map (glMap).
   =========================================================================== */
#deskSidebar { display: none; }

@media (min-width: 980px) {
  /* The map is position:absolute inset:0, so we can't use grid — instead dock
     an absolute sidebar on the left and inset the map's left edge past it. */
  #deskSidebar {
    display: flex; flex-direction: column; min-height: 0;
    position: absolute; left: 0; top: 0; bottom: 0; width: 372px; z-index: 5;
    background: var(--bg); border-right: 1px solid var(--border);
    /* Theme accent follows the selected mode (set by desktop.js). Defaults to
       boiled red so it's correct before JS runs. */
    --ds-accent: var(--red);
    --ds-accent-text: #ff6a3d;
    --ds-accent-soft: rgba(201, 59, 0, 0.14);
  }
  .map-area > #map { left: 372px; }
  /* Keep the map's floating chrome over the MAP, clear of the sidebar. */
  .feature-strip { left: calc(372px + 12px) !important; right: 12px !important; width: auto !important; }

  /* Sidebar header (mode toggle + search + sort) — stays put while list scrolls. */
  .ds-head { flex-shrink: 0; padding: 14px 14px 10px; border-bottom: 1px solid var(--border); background: var(--layer); }
  .ds-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
  .ds-mode {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 4px; border-radius: 10px; cursor: pointer;
    background: var(--layer-2); border: 1.5px solid var(--border-mid); color: var(--muted);
    font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.2px;
    transition: all 0.14s; line-height: 1.1;
  }
  .ds-mode .ds-mode-ico { width: 26px; height: 26px; object-fit: contain; display: block; pointer-events: none; }
  .ds-mode span { display: block; }
  /* Each mode button hovers in its OWN theme color. */
  .ds-mode.boiled:hover { border-color: var(--red); color: #ff6a3d; }
  .ds-mode.live:hover   { border-color: #4a8bbf; color: #6fb3e0; }
  .ds-mode.cater:hover  { border-color: var(--cater-accent); color: var(--cater-accent-text); }
  .ds-mode.ship:hover   { border-color: #1f9e74; color: #3fd6a2; }
  /* Active mode card — filled solid in its theme color + cream text (matches the
     action buttons), instead of a washed-out tint that vanishes in light mode. */
  .ds-mode.on.boiled  { border-color: var(--red);          color: #fff7e1; background: var(--red); }
  .ds-mode.on.live    { border-color: #4a8bbf;             color: #fff7e1; background: #4a8bbf; }
  .ds-mode.on.cater   { border-color: var(--cater-accent); color: #fff7e1; background: var(--cater-accent); }
  .ds-mode.on.ship    { border-color: #1f9e74;             color: #fff7e1; background: #1f9e74; }

  /* Events + Rankings quick-access sections. */
  .ds-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
  .ds-link2 {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 8px; border-radius: 10px; cursor: pointer;
    background: var(--layer-2); border: 1px solid var(--border-mid); color: var(--muted);
    font-family: var(--font-body); font-size: 11.5px; font-weight: 700; transition: all 0.14s;
  }
  .ds-link2:hover { border-color: var(--ds-accent); color: var(--ds-accent-text); }
  .ds-link2 svg { width: 14px; height: 14px; flex-shrink: 0; }

  /* Availability pills (All / Open Now / Boiling) — reuses app .avail-pill styles,
     re-themed to the selected mode accent. */
  .ds-avail { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
  #deskSidebar .ds-avail .avail-pill:hover { border-color: var(--ds-accent); color: var(--ds-accent-text); }
  #deskSidebar .ds-avail .avail-pill.on {
    border-color: var(--ds-accent); color: #fff7e1; background: var(--ds-accent);
  }

  .ds-search-wrap { position: relative; margin-bottom: 9px; }
  .ds-search {
    width: 100%; padding: 10px 34px 10px 13px; border-radius: 10px;
    background: var(--layer-2); border: 1.5px solid var(--border-mid); color: var(--text);
    font-family: var(--font-body); font-size: 13.5px; outline: none; transition: border-color 0.14s;
  }
  .ds-search:focus { border-color: var(--ds-accent); }
  .ds-search::placeholder { color: var(--muted); }
  .ds-search-x {
    position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; line-height: 1; padding: 0;
  }

  .ds-sorts { display: flex; gap: 6px; flex-wrap: wrap; }
  .ds-sort {
    background: transparent; border: 1px solid var(--border-mid); color: var(--muted);
    padding: 5px 11px; border-radius: 999px; font-family: var(--font-body);
    font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.13s;
  }
  .ds-sort:hover { border-color: var(--ds-accent); color: var(--ds-accent-text); }
  .ds-sort.on { border-color: var(--ds-accent); color: #fff7e1; background: var(--ds-accent); }

  .ds-count { padding: 9px 16px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }

  /* Scrollable list — reuses the app's own .list-row markup verbatim. */
  #deskSidebarList { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 6px 18px; }
  #deskSidebarList .list-row { cursor: pointer; }
  .ds-more {
    margin: 8px 12px; padding: 11px; border-radius: 10px; text-align: center;
    background: var(--layer-2); border: 1px solid var(--border-mid); color: var(--muted);
    font-family: var(--font-body); font-size: 12px; font-weight: 700; cursor: pointer;
  }
  .ds-more:hover { border-color: var(--ds-accent); color: var(--ds-accent-text); }
  .ds-empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 12.5px; }
}

/* ===========================================================================
   PHASE 3 — auth modal + wide dashboard. Both render into the fullscreen sheet
   (centered modal via Phase 1); here we size them for desktop and tidy spacing.
   =========================================================================== */
@media (min-width: 980px) {
  /* Sign in / create account → a compact, centered login card (not a stretched
     sheet). Detected by the auth tab strip it contains. */
  .sheet:has(.auth-tabs) { width: min(440px, 94vw) !important; }
  .sheet:has(.auth-tabs) .fs-body { padding-left: 26px; padding-right: 26px; }

  /* Account dashboard → a roomier modal so the bento KPI/nav grids breathe. */
  .sheet:has(#acctBody) { width: min(880px, 94vw) !important; }
  .sheet:has(#acctBody) .fs-body { padding-left: 28px; padding-right: 28px; }
  /* Give the dashboard's stat/nav bento grids a little more density on desktop. */
  body.desktop .bento-grid-3 { grid-template-columns: repeat(3, 1fr); }
  body.desktop .bento-grid-2 { grid-template-columns: repeat(2, 1fr); }

  /* The fullscreen sheet's sticky header reads better with matching side padding. */
  body.desktop .sheet.fullscreen .fs-header { padding-left: 26px; padding-right: 26px; }
}

/* ===========================================================================
   PHASE 4 — vendor signup desktop polish. The 4-step showVendorSheet() flow
   renders into the fullscreen sheet (centered modal); widen it into a roomy
   multi-step panel. Detected by its progress rail (.vs-progress-wrap).
   =========================================================================== */
@media (min-width: 980px) {
  .sheet:has(.vs-progress-wrap) { width: min(720px, 94vw) !important; }
  .sheet:has(.vs-progress-wrap) .fs-body { padding-left: 30px; padding-right: 30px; }
  .sheet:has(.vs-progress-wrap) .fs-header { padding-left: 30px; padding-right: 30px; }
  /* Give the progress rail a touch more presence at desktop width. */
  body.desktop .vs-progress-wrap { max-width: 100%; }
}

/* ===========================================================================
   Google-Maps-style spot detail: when a spot is clicked, dock its detail as a
   panel right of the list — the map stays visible and the list stays clickable
   (click another row to switch spots). The spot detail is the only sheet that
   contains .detail-wrap, so we target just that one. Other sheets (account,
   vendor, auth) keep the centered-modal treatment.
   =========================================================================== */
@media (min-width: 980px) {
  .sheet:has(.detail-wrap) {
    position: fixed; left: 372px; right: auto; top: 64px; bottom: 0;
    width: 408px; height: calc(100vh - 64px); max-height: calc(100vh - 64px);
    border-radius: 0; border: none; border-right: 1px solid var(--border-mid);
    box-shadow: 10px 0 44px -24px rgba(0, 0, 0, 0.75);
    /* Clean horizontal slide-in from the left; opacity only fast-fades so the
       brief sliver over the sidebar isn't visible. pointer-events:none when
       closed so it never blocks the list. */
    transform: translateX(-56px); opacity: 0; pointer-events: none;
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.16s ease-out;
  }
  .sheet.open:has(.detail-wrap) { transform: translateX(0); opacity: 1; pointer-events: auto; }

  /* No dimming backdrop for the docked panel — keep list + map interactive, and
     keep it transparent through the CLOSE animation (key off .detail-wrap, not
     .open) so there's no dark flash when the panel closes. */
  body:has(.detail-wrap) .sheet-backdrop {
    background: transparent !important; pointer-events: none !important;
  }

  /* Boil/Open Hours + Directions popups (.dir-chooser-overlay) are appended to
     <body>, so on desktop they'd float over the whole screen (the map). Pin them
     to the app column (sidebar + detail panel = 780px) and center the card. */
  .dir-chooser-overlay { right: auto !important; width: 780px !important; align-items: center !important; }
  .dir-chooser-overlay .dir-chooser-card { border-radius: 18px; max-width: 392px; }

  /* In-app directions summary card (drawn over the map). */
  #dsDirCard {
    position: fixed; top: 80px; left: 796px; z-index: 60;
    background: var(--layer); border: 1px solid var(--border-mid); border-radius: 14px;
    padding: 13px 15px; width: 300px; box-shadow: 0 18px 50px -22px rgba(0,0,0,0.8);
    font-family: var(--font-body);
  }
  #dsDirCard .ddc-spot { font-weight: 800; font-size: 13px; color: var(--text); margin-bottom: 10px; padding-right: 22px; line-height: 1.3; }
  #dsDirCard .ddc-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; line-height: 1; }
  #dsDirCard .ddc-rows { display: flex; gap: 10px; }
  #dsDirCard .ddc-row { flex: 1; background: var(--layer-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; }
  #dsDirCard .ddc-mode { font-size: 9.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
  #dsDirCard .ddc-big { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); line-height: 1; }
  #dsDirCard .ddc-sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
  #dsDirCard .ddc-ext { display: block; text-align: center; margin-top: 10px; font-size: 11px; font-weight: 700; color: var(--ds-accent, var(--red)); text-decoration: none; }
  #dsDirCard.loading .ddc-rows, #dsDirCard.loading .ddc-ext { opacity: 0.4; }
  #dsDirCard .ddc-status { font-size: 11px; color: var(--muted); }
}