/* ==========================================================================
   SPOT-ON — desktop.css  (fase 2, stap 2)
   Tablet- en desktopindeling. Dit bestand doet NIETS onder 768 px: de
   smartphoneweergave blijft exact zoals ze was. Alle regels staan binnen
   een media-query en gebruiken uitsluitend de bestaande tokens uit
   base.css (kleuren, lettertypes, radius, schaduwen) — geen nieuwe
   kleuren, gradients of animaties.

   Breekpunten
     768–1023 px  tablet   : bredere kolom (760 px), tabbalk blijft onderaan,
                             kaarten in 2 kolommen.
     >= 1024 px   desktop  : header over de volle breedte met logo links en
                             de navigatie (dezelfde tabbladen) rechts; inhoud
                             tot 1200 px; kaarten in 3 kolommen.

   Hulpattribuut: navigate() in app.js zet <body data-screen="...">, zodat
   hier per scherm een indeling gekozen kan worden zonder de HTML of de
   rendercode van de schermen aan te passen.
   ========================================================================== */

/* ------------------------------------------------------------------ TABLET */
@media (min-width: 768px) {
  :root { --content-max: 760px; }

  #app { max-width: var(--content-max); }
  .top-header { max-width: var(--content-max); }
  #toast-host { max-width: var(--content-max); }

  .screen-body { padding: 24px 28px 12px; }

  /* Restaurantkaarten (Ontdekken, Favorieten) in een raster. De sectie
     zelf wordt het raster; titel en ondertitel beslaan de volle breedte. */
  #discover-list,
  #discover-content .section:has(> .discover-card),
  #favorites-content:has(.discover-card, .restaurant-card) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    align-items: start;
  }
  #discover-content .section:has(> .discover-card) > :not(.discover-card),
  #favorites-content > :not(.discover-card):not(.restaurant-card),
  #discover-list > .empty-state { grid-column: 1 / -1; }
  #discover-content .section:has(> .discover-card) > .section-title { margin-bottom: 14px; }
  #discover-content .section:has(> .discover-card) > .section-title + .muted { margin-top: -10px !important; }

  /* Infomeldingen (bv. "nog niet verbonden"): het icoon zou in een brede
     kolom mee uitrekken; vaste maat zoals op smartphone. */
  .card-pad > div[style*="display:flex"] > svg:first-child { width: 22px; height: 22px; flex: none; }

  /* Onderste schuifpanelen: ietsje smaller dan de kolom, blijven onderaan. */
  .sheet { max-width: 560px; }
}

/* ----------------------------------------------------------------- DESKTOP */
@media (min-width: 1024px) {
  :root {
    --content-max: 1200px;
    --content-narrow: 760px;
    --page-gutter: max(32px, calc(50% - 600px + 32px));
  }

  #app { max-width: none; box-shadow: none; }

  /* ---- Header over de volle breedte ---- */
  .top-header {
    max-width: none;
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
  }
  /* Op desktop staat het logo (= homeknop) er altijd, ook naast een
     terugknop in de header. */
  .top-header .top-header__home.hidden { display: inline-flex !important; }
  .top-header .back-btn { margin-left: 0; }

  /* ---- Navigatie: dezelfde #tab-bar, als horizontale balk in de header ---- */
  .tab-bar {
    top: var(--safe-top);
    bottom: auto;
    left: auto;
    right: var(--page-gutter);
    height: var(--header-h);
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 4px;
    align-items: center;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    z-index: 41;
  }
  .tab-bar.is-scrolled-away { transform: none; }
  [data-theme="dark"] .tab-bar { box-shadow: none; }
  .tab-item {
    flex: none;
    height: 40px;
    padding: 0 14px;
    gap: 8px;
    color: var(--ink-soft);
  }
  .tab-item:hover { color: var(--copper-dark); background: var(--copper-mist); }
  .tab-item.is-active { color: var(--copper-dark); }
  .tab-item svg { width: 20px; height: 20px; }
  /* Labels zijn op desktop zichtbaar (op smartphone visueel verborgen). */
  .tab-item span {
    position: static;
    width: auto; height: auto;
    margin: 0; overflow: visible;
    clip: auto; clip-path: none;
    font-size: 14px; font-weight: 600;
    text-transform: lowercase;
  }
  .tab-item span::first-letter { text-transform: uppercase; }
  .tab-item .tab-count { top: 2px; left: 26px; }

  /* Geen tabbalk onderaan meer: die ruimte hoeft niet gereserveerd. */
  .screen { padding-bottom: 56px; }
  #toast-host { bottom: 32px; max-width: 560px; }

  /* ---- Inhoudsbreedte ---- */
  .screen-body {
    max-width: var(--content-narrow);
    margin: 0 auto;
    padding: 32px 32px 16px;
  }
  /* Brede schermen: rasters en overzichten. */
  #discover-content,
  #favorites-content,
  #wallet-content,
  #dashboard-content,
  #deals-manager-content,
  #restaurant-reservations-content,
  #vouchers-manager-content,
  #floorplan-editor-content { max-width: var(--content-max); }
  #map-full-container { max-width: var(--content-max); margin: 0 auto; padding: 24px 32px 0; }

  /* ---- Ontdekken / Favorieten: 3 kolommen ---- */
  #discover-list,
  #discover-content .section:has(> .discover-card),
  #favorites-content:has(.discover-card, .restaurant-card) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 20px;
  }
  #discover-content > .search-bar,
  #discover-content > .chip-row { max-width: 640px; }
  #discover-content .discover-card { transition: box-shadow var(--dur-fast) var(--ease-fast), transform var(--dur-fast) var(--ease-fast); }
  #discover-content .discover-card:hover { box-shadow: var(--shadow-md); }

  /* ---- Wallet: vouchers naast elkaar ---- */
  #wallet-content:has(.voucher-card) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    align-items: start;
  }
  #wallet-content > :not(.voucher-card) { grid-column: 1 / -1; }
  #wallet-content > .segmented { max-width: 560px; }

  /* ---- Dashboard van de zaak ---- */
  #dashboard-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }
  #dashboard-content > * { grid-column: 1 / -1; }
  #dashboard-content > .dash-chart-card { grid-column: 1; }
  #dashboard-content > .dash-resv-section { grid-column: 2; }
  #dashboard-content .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* ---- Deals en vouchers van de zaak: kaarten in 2 kolommen ---- */
  #deals-manager-content:has(> .card),
  #vouchers-manager-content:has(> .voucher-card) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    align-items: start;
  }
  #deals-manager-content > :not(.card),
  #vouchers-manager-content > :not(.voucher-card) { grid-column: 1 / -1; }

  /* ---- Schermen zonder eigen header (restaurantdetail, reserveren,
     meldingen, menukaart, juridisch): op desktop toch de site-header en
     navigatie tonen, zodat logo en menu overal hetzelfde zijn. Alleen
     wanneer de navigatie gevuld is (dus binnen de app, niet vóór het
     inloggen). De oude headertitel hoort bij het vorige scherm en wordt
     daarom verborgen. */
  body:is([data-screen="restaurant-detail"], [data-screen="reserve"], [data-screen="notifications"],
          [data-screen="restaurant-menu"], [data-screen="legal"]):has(#tab-bar > .tab-item) #top-header.hidden,
  body:is([data-screen="restaurant-detail"], [data-screen="reserve"], [data-screen="notifications"],
          [data-screen="restaurant-menu"], [data-screen="legal"]):has(#tab-bar > .tab-item) #tab-bar.hidden {
    display: flex !important;
  }
  body:is([data-screen="restaurant-detail"], [data-screen="reserve"], [data-screen="notifications"],
          [data-screen="restaurant-menu"], [data-screen="legal"]):has(#tab-bar > .tab-item) :is(#header-title, #header-back-btn) {
    visibility: hidden;
  }
  body:is([data-screen="restaurant-detail"], [data-screen="reserve"], [data-screen="notifications"],
          [data-screen="restaurant-menu"], [data-screen="legal"]):has(#tab-bar > .tab-item) .screen.is-active {
    padding-top: calc(var(--header-h) + var(--safe-top));
  }
  .detail-safe-top-cover { display: none; }

  /* Subheader (terugknop + titel) van deze schermen: zelfde breedte als de inhoud. */
  :is(#screen-reserve, #screen-notifications, #screen-restaurant-menu, #screen-legal) .legal-header {
    max-width: var(--content-narrow);
    margin: 0 auto;
    padding: 20px 32px 14px;
  }
  #screen-legal .legal-body {
    max-width: var(--content-narrow);
    margin: 0 auto;
    padding: 24px 32px 48px;
    height: auto;
    overflow: visible;
  }

  /* ---- Restaurantdetail: grote foto, inhoud links, reserveren rechts ---- */
  #detail-body { max-width: var(--content-max); margin: 0 auto; padding: 24px 32px 0; }
  #detail-body .hero-photo { height: 420px; border-radius: var(--radius-lg); }
  #detail-body .detail-header { padding-left: 0; padding-right: 0; }
  #detail-body .detail-content { padding: 0; }
  #detail-body .detail-content:has(#deal-calendar-wrap) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    column-gap: 48px;
    align-items: start;
  }
  #detail-body .detail-content:has(#deal-calendar-wrap) > * { grid-column: 1; }
  #detail-body .detail-content > .detail-content__group:has(#deal-calendar-wrap) {
    grid-column: 2;
    grid-row: 1 / span 12;
    margin-top: 0;
    padding: 20px;
    border-top: none;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
  }
  /* Eerste groep in de linkerkolom krijgt geen scheidingslijn bovenaan. */
  #detail-body .detail-content:has(#deal-calendar-wrap) > .detail-content__group:first-child:has(#deal-calendar-wrap) + .detail-content__group {
    padding-top: 0; margin-top: 0; border-top: none;
  }
  #detail-body .detail-map-breakout { margin-left: 0; margin-right: 0; border-radius: var(--radius-md); overflow: hidden; }
  /* Reserveerknop: rechts uitgelijnd, zelfde breedte als de reserveerkolom. */
  #detail-body .sticky-cta {
    width: 400px;
    margin-left: auto;
    padding: 16px 0 24px;
    background: none;
  }
  #detail-body .sticky-cta .btn { box-shadow: var(--shadow-md); }

  /* ---- Aanmelden, registreren, onboarding: gecentreerde kolom zoals nu ---- */
  :is(#screen-onboarding, #screen-login, #screen-register-choice, #screen-register-customer,
      #screen-register-business, #screen-verify-email) {
    max-width: 560px;
    margin: 0 auto;
  }

  /* ---- Schuifpanelen worden een gecentreerd venster ---- */
  .sheet-overlay { align-items: center; padding: 32px; }
  .sheet { max-width: 560px; border-radius: 24px; max-height: calc(100vh - 64px); }
  .sheet-handle { visibility: hidden; height: 0; margin-bottom: 8px; }
}