/* ── Responsive faza A: tablet (768–1366px) ──────────────────
   Ovaj fajl ne mijenja NIŠTA na desktopu (≥1200px), osim globalnog
   modal safety-cap-a ispod (koji na desktopu ne radi ništa vizuelno,
   jer su fiksne širine modala manje od cap-a).
   Ispod 768px se ništa ne obećava u ovoj fazi — vidi PLAN_RESPONSIVE.md. */

/* 1. Globalno-bezbjedno (bez media upita) */

.modal-dialog    { max-width: 94vw; }
.modal-dialog-lg { max-width: 96vw; }
.detail-panel    { min-width: 0; }

/* Istorija pregleda (mini-table, 8 kolona + do 4 dugmeta) preliva detalj
   panel čim je panel dovoljno uzak (zavisi i od uloge — admin ima najšire
   redove), a overflow-y:auto na .detail-panel implicira overflow-x:auto,
   pa bi horizontalno skrolovao CIO panel. Ovako skroluje samo kartica.
   Na desktopu kartica ne preliva, pa pravilo ništa ne mijenja. */
.detail-panel .card:has(.mini-table) { overflow-x: auto; }

/* 2. @media (max-width: 1150px) — tablet landscape / mali laptop */

@media (max-width: 1150px) {
  .list-panel      { width: 240px; }
  .pregled-sidebar { width: 240px; }
  .pregled-main    { padding: 14px 16px; }
  .rang-body       { padding: 14px 16px; }
  .content-header  { padding: 14px 16px; }
}

/* 3. @media (max-width: 900px) — tablet portrait */

@media (max-width: 900px) {
  .list-panel { width: 216px; }

  .hero-stats { flex-wrap: wrap; }
  .hero-photo-thumb { max-width: 140px; }

  .pregled-meta-grid   { grid-template-columns: 1fr 1fr; }
  .pregled-header      { flex-wrap: wrap; }
  .pregled-bridge-sel  { min-width: 160px; }
  .pregled-sidebar     { width: 220px; }

  .stats-row { grid-template-columns: repeat(3, 1fr); }

  #users-table-wrap { overflow-x: auto; }

  #screen-mapa .mapa-body { margin: 0 12px 12px; }
  .mapa-legend { font-size: 10px; padding: 6px 8px; }
}

/* 4. @media (pointer: coarse) — touch polish (minimalno) */

@media (pointer: coarse) {
  /* mostovi.js renderuje inline style="padding:2px 10px;font-size:10px" na
     dugmadima istorije pregleda — inline stil se ne može pregaziti bez
     !important; ovo je jedini dozvoljeni !important u ovom fajlu. */
  .mini-table .btn-sec { padding: 6px 12px !important; font-size: 11px !important; }

  .th-sort { padding-top: 10px; padding-bottom: 10px; }

  .check-label input { width: 18px; height: 18px; }
}