/* ── Layout desktop (≥1024px) — "app window" flottante ───────────────────
   Inspiré du mockup fourni : toute l'app (#main-app) devient une carte
   centrée, arrondie, ombrée, flottant dans le fond navy — sidebar + contenu
   intégrés dans la même fenêtre plutôt qu'une sidebar collée au bord de
   l'écran. La bottom-nav mobile (.tabs) devient cette sidebar par pur CSS
   (aucun HTML dupliqué, core.js n'a besoin d'aucune modification — il query
   déjà génériquement .tab/data-tab). Palette conservée : navy/cyan/magenta
   déjà validée (le mockup de référence utilisait coral/bleu, écarté plus tôt).

   Le contenu (.screen actif) scrolle DANS son propre panneau — la fenêtre
   elle-même ne scrolle plus (comportement "app de bureau", cohérent avec le
   châssis flottant). Le moniteur du Reel Workshop se recentre tout seul dans
   .rw-wrap via left:50%/translateX(-50%) (voir reelworkshop.css), donc il
   n'a besoin d'aucun ajustement supplémentaire ici quelle que soit la largeur
   réelle du panneau de contenu. */

:root { --sidebar-w: 240px; --window-margin: 12px; }

@media (min-width: 1024px) {
  body {
    padding: 0;
    align-items: center;
    height: 100vh;
    overflow: hidden;
  }

  /* Prend toute la place disponible (pas de max-width/max-height plafonnant la
     fenêtre) — juste une petite marge pour garder les coins arrondis visibles. */
  #main-app {
    position: relative;
    width: calc(100vw - var(--window-margin) * 2);
    height: calc(100vh - var(--window-margin) * 2);
    min-height: 0; /* annule min-height:100vh de la règle mobile (index.css) */
    flex-shrink: 1;
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header" "sidebar content";
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    overflow: hidden;
  }

  #main-app > .header {
    grid-area: header;
    background: var(--bg-card);
    padding: 20px 28px;
  }
  #main-app > .header .header-app-logo { height: 44px; width: 44px; }

  /* Stats déplacées du dashboard vers le header (voir index.html, "pour l'instant") — on
     réutilise .brief-bar/#network-stats-cards/.network-stat-mini tels quels (mêmes IDs que
     sur mobile, remplis par config.js), juste neutralisés visuellement pour s'intégrer dans
     la barre du header plutôt que dans un cadran de dashboard. */
  #main-app > .header .header-stats { display: flex; align-items: center; gap: 20px; }
  #main-app > .header .brief-bar { padding: 0; gap: 12px; background: transparent; border-bottom: none; }
  #main-app > .header .brief-stat-val { font-size: 15px; }
  #main-app > .header #network-stats-cards { gap: 12px; }
  #main-app > .header .network-stat-mini { padding: 0; gap: 1px; }
  #main-app > .header .network-stat-mini-val { font-size: 15px; }

  /* Icônes réseaux dans le header, à côté de la date — en couleur si connecté, grisées sinon
     (voir _renderHeaderNetworks, core.js). */
  #main-app > .header .header-networks { display: flex; align-items: center; gap: 8px; }
  .header-network-icon { display: flex; filter: grayscale(1) opacity(0.35); transition: filter 0.2s ease; }
  .header-network-icon.connected { filter: none; }

  /* Bottom nav mobile → sidebar intégrée à la fenêtre (plus de position:fixed :
     elle devient un panneau normal dans la grille, borné à la hauteur de la
     fenêtre plutôt qu'à 100vh). */
  #main-app > .tabs {
    grid-area: sidebar;
    position: static;
    /* transform survit à position:static (il ne dépend pas du schéma de
       positionnement, contrairement à left/bottom) — sans ce reset, le
       translateX(-50%) de la règle mobile décale la sidebar hors champ. */
    transform: none;
    width: 100%; max-width: none; height: 100%;
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    padding: 20px 12px; gap: 4px;
    background: var(--bg-card);
    border-top: none;
    border-right: 1px solid var(--border-subtle);
    box-shadow: none; backdrop-filter: none;
    overflow-y: auto;
  }
  .tab {
    flex: none;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    transition: background 0.15s;
  }
  .tab:hover { background: rgba(var(--text-rgb),0.03); }
  .tab.active { background: rgba(var(--accent-rgb),0.1); }
  .tab-icon-wrap { width: 22px; height: 22px; }
  .tab-icon-halo { display: none; }
  .tab-label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 13px; font-weight: 600;
    color: rgba(var(--text-rgb),0.55);
    white-space: nowrap;
  }
  .tab.active .tab-label { color: var(--text); }

  /* "Compte" poussé en bas de la sidebar (margin-top:auto dans une colonne
     flex) plutôt que collé aux autres onglets ; le numéro de version suit
     juste en dessous. Le margin-top:auto vit maintenant sur #sidebar-identity
     (juste avant "Compte" dans le DOM, voir index.html) plutôt que sur le tab
     lui-même — un seul auto suffit à pousser tout ce qui suit vers le bas. */
  #main-app .tab[data-tab="config"] .tab-icon-wrap { width: 30px; height: 30px; }
  #main-app .tab[data-tab="config"] .tab-icon { width: 24px; height: 24px; }
  #main-app .tab[data-tab="config"] .tab-label { font-size: 15px; }
  .sidebar-identity {
    display: block;
    margin-top: auto;
    padding: 10px 14px 4px;
    text-align: center;
    border-top: 1px solid rgba(var(--text-rgb),0.08);
  }
  .sidebar-identity-name { font-size: 13px; font-weight: 700; color: var(--text); }
  .sidebar-identity-org { font-size: 11px; color: rgba(var(--text-rgb),0.45); margin-top: 1px; }

  /* Switcheur d'espace : le nom de l'activité devient un menu déroulant dès que le client a
     plusieurs marques. Avec un seul espace, .sidebar-identity-org reste rendu tel quel — aucun
     changement visuel pour les comptes mono-espace. */
  .espace-switcher-wrap { position: relative; }
  .espace-switcher {
    display: inline-flex; align-items: center; gap: 4px;
    max-width: 100%;
    background: none; border: 0; cursor: pointer;
    font: inherit; color: inherit;
    padding: 2px 4px; border-radius: 6px;
  }
  .espace-switcher:hover { background: rgba(var(--text-rgb),0.06); }
  .espace-switcher-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .espace-switcher-chev { width: 12px; height: 12px; flex: 0 0 auto; opacity: 0.6; }
  .espace-menu {
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    min-width: 190px; max-width: 240px;
    background: var(--bg-elevated);
    border: 1px solid rgba(var(--text-rgb),0.12);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.28);
    padding: 4px; z-index: 200;
    text-align: left;
  }
  .espace-menu.hidden { display: none; }
  .espace-menu-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 13px; color: var(--text);
    padding: 8px 10px; border-radius: 7px;
  }
  .espace-menu-item:hover { background: rgba(var(--accent-rgb),0.12); }
  .espace-menu-item.active { font-weight: 700; }
  .espace-menu-check { width: 12px; flex: 0 0 auto; color: var(--accent); font-size: 12px; }
  .espace-menu-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .espace-menu-new {
    border-top: 1px solid rgba(var(--text-rgb),0.1);
    margin-top: 4px; padding-top: 10px;
    color: rgba(var(--text-rgb),0.6);
  }
  .sidebar-version {
    display: block;
    text-align: center;
    font-size: 11px;
    color: rgba(var(--text-rgb),0.3);
    padding: 8px 12px 4px;
  }

  /* Panneau de contenu : occupe la 2e colonne, scroll interne indépendant.
     min-height:0 est nécessaire ici (piège classique de CSS Grid) sinon
     l'item refuse de rétrécir sous sa taille de contenu et overflow:auto
     ne scrolle jamais — la fenêtre grandirait à l'infini à la place. */
  .screen {
    grid-area: content;
    min-height: 0;
  }
  .screen.active {
    overflow-y: auto;
    padding-bottom: 32px;
  }

  /* Chaque écran encore "plat" (Reel) devient une seule grande card
     glass — même traitement que les cadrans du dashboard et les cards du
     Compte (voir dashboard.css / config-desktop.css).
     #screen-today, #screen-config, #screen-atelier, #screen-history,
     #screen-stats et #screen-week sont exclus : ils ont déjà leur propre
     grille/disposition de cards glass imbriquées (voir atelier-desktop.css
     pour Atelier — chat + historique doivent remplir toute la hauteur ;
     history-desktop.css pour Historique — 3 colonnes par mois ;
     stats-desktop.css pour Stats — 3 colonnes de cadrans ; week-desktop.css
     pour Semaine — 2 colonnes x 2 panneaux, chacun scrollable indépendamment).
     #screen-week manquait à cette liste alors que week-desktop.css lui a
     depuis construit sa propre disposition — laissé aussi dans le fond glass
     générique, la liste débordait de sa card (2 scrolls concurrents : la page
     ET chaque panneau), cassant à la fois le liseret et le confinement. */
  .screen.active:not(#screen-today):not(#screen-config):not(#screen-atelier):not(#screen-history):not(#screen-stats):not(#screen-week) {
    margin: 16px 20px 20px;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-xl);
  }

  /* Toast / récap flottant : ancrés à la fenêtre plutôt qu'au viewport complet
     (position:absolute au lieu de fixed) — #main-app est déjà position:relative
     ci-dessus, donc left:50%/transform:translateX(-50%) (déjà posés par les
     règles de base) se recentrent automatiquement sur la fenêtre. */
  .toast, .recap-peek { position: absolute; }
}