/* app/static/css/layout-3col.css */

/* =========================
   Laeh Tattoo — Layout 3 colonnes (edge-to-edge)
   Zones : sidenav (gauche), header (haut), content (centre), rightbar (droite)
   Objectifs : plein écran, responsive, cadre continu (sans doubles bordures)
   ========================= */

:root {
  --col-left: 220px; /* largeur colonne gauche (desktop) */
  --col-right: 320px; /* largeur colonne droite (desktop) */
}

/* ===== Grille (desktop par défaut) ===== */
.shell {
  display: grid;
  grid-template-columns: var(--col-left) 1fr var(--col-right);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidenav header header"
    "sidenav content rightbar";
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  gap: 0;
  position: relative; /* nécessaire pour le cadre global */
  background: var(--page-bg);
}

/* autoriser le rétrécissement de tous les enfants directs de la grille */
.shell > * {
  min-width: 0;
}

/* Assignations de zones */
.sidenav {
  grid-area: sidenav;
}
.site-header {
  grid-area: header;
}
.rightbar {
  grid-area: rightbar;
}
.content {
  grid-area: content;
}

/* Neutraliser les contraintes globales (styles.css) DANS la grille */
.shell .sidenav,
.shell .site-header,
.shell .rightbar,
.shell .content {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0; /* évite les débordements */
}

/* Conteneur interne de chaque zone */
.box {
  background: var(--bg);
  border: 0;
  border-radius: 0;
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ===== Cadre global (entoure tout l’écran) — Desktop ===== */
@media (min-width: 992px) {
  .shell::after {
    content: "";
    position: fixed;
    inset: 0;
    border: 1px solid var(--line);
    pointer-events: none;
    z-index: 1;
  }
}

/* ===== Séparateurs internes — Desktop ===== */
@media (min-width: 992px) {
  .sidenav {
    position: relative;
  }
  .sidenav::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: var(--line);
    opacity: 0.85;
  }

  .site-header {
    position: relative;
  }
  .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--line);
    opacity: 0.85;
  }

  .rightbar {
    position: relative;
  }
  .rightbar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--line);
    opacity: 0.85;
    z-index: 2;
  }

  /* En desktop : pas de bordures locales, on s’appuie sur cadre + séparateurs */
  .sidenav .box,
  .site-header .box,
  .rightbar .box,
  .content .box {
    border: 0 !important;
  }
}

/* ===== Mode mobile / tablettes : empilement des zones ===== */
@media (max-width: 991px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "sidenav"
      "header"
      "rightbar"
      "content";
    gap: 12px; /* respiration entre blocs empilés */
    min-height: auto;
  }

  /* Le cadre global fixe ne suit pas la hauteur → on le désactive */
  .shell::after {
    display: none;
  }

  /* En mobile : encadrés locaux pour garder une lecture claire */
  .sidenav .box,
  .site-header .box,
  .rightbar .box,
  .content .box {
    border: 1px solid var(--line) !important;
  }

  /* Cacher les séparateurs internes desktop */
  .sidenav::after,
  .site-header::after,
  .rightbar::before {
    display: none;
  }
}

/* ===== Accessibilité : lien d’évitement ===== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  width: auto;
  height: auto;
  background: #000;
  color: #fff;
  padding: 8px;
  border-radius: 6px;
  z-index: 1000;
}

/* ===== Robustesse : césures longues ===== */
.header-row,
.sidenav,
.rightbar,
.content {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* =========================
   Sidenav sticky + colonne pleine hauteur (desktop)
   ========================= */
@media (min-width: 992px) {
  .sidenav {
    position: sticky;
    top: 0;
    align-self: start;
  }

  /* Peindre la colonne sur toute la hauteur même si le contenu est court */
  .sidenav::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg);
    z-index: 0; /* sous le contenu */
  }

  /* S’assurer que le séparateur reste visible au-dessus du fond peint */
  .sidenav::after {
    z-index: 2;
  }

  /* La box remplit le viewport et scrolle en interne */
  .sidenav .box {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    max-height: 100vh;
    overflow: auto;
    overscroll-behavior: contain;
  }
}

/* =========================
   Header layout helpers
   ========================= */
.header-row {
  display: grid;
  grid-template-columns: auto 1fr minmax(220px, 360px);
  align-items: center;
  gap: 12px;
}
.header-hours {
  justify-self: end;
  width: auto;
}

/* Mobile : une seule rangée (logo | titre | heures) + espace FAB */
@media (max-width: 991px) {
  .header-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    justify-items: stretch;
    text-align: left;
  }
  .site-header .box {
    padding-left: calc(72px + env(safe-area-inset-left, 0px)); /* espace FAB */
  }
}

/* =========================
   Layout sans colonne gauche (desktop)
   ========================= */
@media (min-width: 992px) {
  .shell.no-sidenav {
    grid-template-columns: 1fr var(--col-right);
    grid-template-areas:
      "header header"
      "content rightbar";
  }
  .shell.no-sidenav .sidenav {
    display: none !important;
  }
}

/* (Optionnel) plein contenu sans colonne droite */
@media (min-width: 992px) {
  .shell.no-sidenav.full-content {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "content";
  }
  .shell.no-sidenav.full-content .rightbar {
    display: none !important;
  }
}