/* =============================================================================
   TerraTrack — Desktop & Tablette — Sprint 2.0
   Mobile-first : styles de base dans les autres fichiers.
   ============================================================================= */

/* ─── Tablette ≥ 768px ─────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .app { max-width: 960px; margin: 0 auto; }
  .card { margin: 12px 20px; padding: 20px; border-radius: 16px; }
  .plist { padding: 0 20px; }
  .mb { align-items: center; }
  .ms { border-radius: 16px; max-width: 640px; margin: auto; max-height: 90vh; }
  .sset { padding: 20px 28px; }
}

/* ─── Desktop ≥ 1024px — Sidebar nav ───────────────────────────────────────── */
@media (min-width: 1024px) {
  body { overflow: hidden; height: 100vh; }

  .app {
    display: flex;
    flex-direction: row;
    max-width: 1400px;
    height: 100vh;
    overflow: hidden;
    border-left:  1px solid var(--bor);
    border-right: 1px solid var(--bor);
  }

  /* Sidebar */
  .bnav {
    width:     220px;
    min-width: 220px;
    height:    100vh;
    position:  sticky;
    top:       0;
    border-right: 1px solid var(--bor);
    border-top:   none;
    background:   var(--bg);
    flex-shrink:  0;
    order:        -1;
    padding:      0;
    padding-bottom: 0;
  }

  .bnav-inner {
    flex-direction: column;
    align-items:    flex-start;
    height:         100%;
    padding:        20px 12px;
    gap:            4px;
    overflow-y:     auto;
  }

  /* Logo TT dans la sidebar */
  .bnav-inner::before {
    content:         'TT';
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    background:      linear-gradient(135deg, var(--acc), var(--acc2));
    border-radius:   10px;
    font-family:     'Space Mono', monospace;
    font-weight:     700;
    font-size:       15px;
    color:           #0e1117;
    margin-bottom:   20px;
    margin-left:     6px;
    flex-shrink:     0;
  }

  /* Boutons nav → liste verticale */
  .ni {
    width:           100%;
    flex-direction:  row;
    align-items:     center;
    gap:             10px;
    justify-content: flex-start;
    padding:         10px 12px;
    border-radius:   10px;
    font-size:       13px;
    font-weight:     500;
    height:          auto;
    min-height:      42px;
    text-align:      left;
  }

  .ni-icon { width: 20px; height: 20px; flex-shrink: 0; }
  .ni-icon svg { width: 18px; height: 18px; }
  .ni.active, .ni:hover { background: var(--acc-dim); color: var(--acc2); }
  .nbadge { margin-left: auto; margin-top: 0; }

  /* Contenu scrollable */
  .screen { flex: 1; overflow-y: auto; height: 100vh; }

  /* Modal plus large */
  .ms { max-width: 720px; }

  /* Filtres secteur : wrap (pas de scroll horiz) */
  .scr { flex-wrap: wrap; overflow-x: visible; }
}

/* ─── Grand écran ≥ 1400px ─────────────────────────────────────────────────── */
@media (min-width: 1400px) {
  .app    { max-width: 1600px; }
  .bnav   { width: 240px; min-width: 240px; }
}

/* ─── Carte : pleine hauteur sur desktop ────────────────────────────────────── */
@media (min-width: 1024px) {
  #s-maps, #map-body { overflow: hidden; }
  #tt-map { min-height: 0; }
}

/* ─── Hover desktop ─────────────────────────────────────────────────────────── */
@media (hover: hover) {
  .pc:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.18); }
}

/* ─── Scrollbar fine ────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  *::-webkit-scrollbar       { width: 5px; height: 5px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb { background: var(--bor2); border-radius: 3px; }
}

/* ─── 6 boutons nav — labels plus petits sur petit mobile ──────────────────── */
@media (max-width: 390px) {
  .ni { font-size: 9px; }
  .bnav-inner { gap: 0; }
}

/* ─── Print ─────────────────────────────────────────────────────────────────── */
@media print {
  .bnav, .ph { display: none !important; }
  .app   { display: block; max-width: 100%; }
  .screen { height: auto; overflow: visible; }
}