/* ============================================================
   KOUSVIT — WONN213: KOUCH RESPONSIVE JENERIK PÈMANAN (NALA 2026-10-14)
   Règ pèmanan: telefòn kou laptop, tout bagay dwe parèt an antye,
   anyen pa dwe koupe — epi lè w ajoute yon lòt bagay, layout la
   dwe ranje tèt li OTOMATIKMAN, san reparasyon detanzantan.
   Règ sa yo JENERIK: nenpòt nouvo eleman (kat, tablo, bouton,
   banyè, imaj, fòmilè) eritye konpòtman an otomatikman.
   ADITIF SÈLMAN: yo pa retire ni defèt okenn lojik/estil ki egziste.
   ============================================================ */

/* 1) Debòdman orizontal: paj la pa janm defile sou kote.
      'clip' (pa 'hidden') pou position:sticky yo kontinye mache. */
html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }

/* 2) Tout eleman rete anndan bwat li */
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas { max-width: 100%; height: auto; }
svg, iframe { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
pre, code { max-width: 100%; overflow-x: auto; }

/* 3) Kontenè flex yo: timoun yo ka retresi epi liy la vlope pwòp
      olye l debòde (kòz prensipal « Se co… » koupe yo) */
.antet, .ranje, .lis-ranje, .chat-antre, .tab, .selekte-lang,
.nav-anba, .hero-premium, .pz-ranje, .tel-gwoup { min-width: 0; }
.antet > *, .ranje > *, .lis-ranje > *, .chat-antre > *, .tab > *,
.nav-anba > *, .hero-premium > *, .pz-ranje > *, .griy-kpi > *,
.tel-gwoup > * { min-width: 0; }
.ranje { flex-wrap: wrap; }
.selekte-lang { flex-wrap: wrap; }

/* 4) Tablo: yo pa janm pouse paj la deyò — tablo a defile ANDEDAN
      pwòp bwat li sou ti ekran, epi li rete yon tablo nòmal sou laptop */
table { max-width: 100%; }
.tab-wrap, .tablo-vlope { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 860px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
}
@media print {
  table { display: table; overflow: visible; width: auto; }
}

/* 5) Tèks long (non, imèl, lyen, referans) vlope olye yo koupe paj la */
p, li, td, th, .kat, .kpi, .ti-tèks, .badj { overflow-wrap: break-word; }

/* 6) Bouton ak banyè sou telefòn: tèks la vlope, anyen pa koupe */
@media (max-width: 640px) {
  .hero-premium { flex-wrap: wrap; }
  .hero-premium .badj24 { white-space: normal; }
  .btn { white-space: normal; }
  .antet h1, .antet .sou-tit { overflow-wrap: break-word; }
}

/* 7) Gri yo: timoun yo pa janm fòse kolòn yo deyò ekran an */
.griy-kpi > *, .vwati-grid > *, .kat-grid > *, .etap-grid > *,
.griy-kat > *, .stats-andan > *, .pye-andan > * { min-width: 0; }

/* ============================================================
   WONN 251 (NALA 2026-10-15 06:53 + 06:57): PORTAL ADMIN + BRANCH
   SOU TELEFÒN AK TABLÈT — tout dwe parèt, anyen pa bouche.
   Modèl NALA a: menm kontni, menm konsepsyon, anyen pa retire,
   lèt gwosè nòmal. Telefòn: kat yo anpile tout lajè, TABLO YO
   VIN KAT (klas .kv-kat + data-th — chrome portal yo tann yo),
   meni bò a aksesib san kouvri kontni, ba anlè yo NAN KOULE A.
   Tablèt: aranjman mitan (tablo yo rete tablo). Desktop
   (>=1024px): ZEWO chanjman. Règ portal yo limite ak
   html.kv-portal (admin-api.js / branch.js mete klas la) — app
   kliyan / chofè / patnè yo pa touche.
   ============================================================ */

/* --- Portal, telefòn + tablèt (<=1023px): ba anlè a nan koule a --- */
@media (max-width: 1023px) {
  html.kv-portal .antet { position: static; }
  /* Selektè lang flotan branch la (lang-branch.js) DOUBLE selektè
     ki deja nan antèt la epi li flote sou kwen anlè adwat la —
     antèt la kenbe selektè pa l, kopi flotan an kache. */
  #kvLangBranch { display: none !important; }

  /* Grap chat AI a sou portal yo: pil lang la + gwo bouton an te
     kouvri ba navigasyon anba admin an (lyen Swivi / Plis yo pa t
     klike) ak kontni branch la. Pil lang la kache (antèt portal
     la deja gen selektè lang pa l), bouton an vin ti wonn 52px,
     epi l chita ANLÈ ba anba a. « !important » nesesè: estil
     widget la antre apre fèy sa a nan paj la. */
  html.kv-portal #aiLang { display: none !important; }
  html.kv-portal #aiPale { display: none !important; }
  html.kv-portal #aiBtn {
    width: 52px !important; height: 52px !important; padding: 0 !important;
    border-radius: 50% !important; justify-content: center !important;
  }
  html.kv-portal #aiBar {
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }
  html.kv-portal #aiPanel {
    bottom: calc(158px + env(safe-area-inset-bottom)) !important;
  }
}

/* --- Telefòn (<=700px) --- */
@media (max-width: 700px) {
  /* Ba ekspò / pataj la (rechèch.js): bouton yo vlope olye yo
     koupe deyò ekran an (bouton Pataje a te a 381px sou 360px) */
  .kvr-eks { flex-wrap: wrap; max-width: 100%; }

  /* Ranje flex andedan kat yo: timoun yo dwe ka retresi — san sa,
     chan dat/lè yo (filtè sipèvizyon, orè, foto) pouse paj la
     deyò (mezire: jiska 497px sou 360px) */
  html.kv-portal .kat div[style*="display:flex"] > *,
  html.kv-portal .kat div[style*="display: flex"] > * { min-width: 0; }
  input[type="date"], input[type="time"], input[type="month"],
  input[type="datetime-local"], input[type="file"] { min-width: 0; }

  /* Apèsi badj la (admin/anplwaye.html): blòk apèsi a te kwense
     andan ranje Salè/Foto a (chan yo te peze a 39px) — li pran
     pwòp liy li, chan Salè ak Foto yo respire */
  html.kv-portal .ranje > div:has(> #aPrevBadj) { flex: 1 1 100%; }

  /* Orè sikisal yo (admin/sikisal.html): liy yo vlope, chan lè
     yo retresi olye yo debòde (433px sou 360px anvan) */
  #orèBlòk label, #oreToutBlòk label { flex-wrap: wrap; }
  #orèBlòk label input[type="time"], #oreToutBlòk label input[type="time"] {
    flex: 1 1 105px; min-width: 0; width: auto;
  }

  /* TABLO VIN KAT: chak liy = yon kat pwòp, chak selil = etikèt
     (data-th) + valè. Sèlman tablo chrome portal yo tann ak klas
     .kv-kat la. Koulè yo net (gri transparan) pou yo mache sou
     tèm fonse admin an ak tèm klè branch la tou. */
  table.kv-kat { display: block; width: 100%; overflow: visible; }
  table.kv-kat thead { position: absolute; left: -9999px; top: -9999px; }
  table.kv-kat tbody, table.kv-kat tfoot { display: block; }
  table.kv-kat tr {
    display: block; border: 1px solid rgba(128,128,128,.38);
    border-radius: 12px; padding: 6px 4px; margin: 0 0 10px;
  }
  table.kv-kat th, table.kv-kat td { white-space: normal; }
  table.kv-kat td {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 14px; width: 100%; padding: 7px 10px; border: 0;
    border-bottom: 1px solid rgba(128,128,128,.16); text-align: right;
  }
  table.kv-kat td:last-child { border-bottom: 0; }
  table.kv-kat td::before {
    content: attr(data-th); font-weight: 700; text-align: left; opacity: .72;
  }
  table.kv-kat td:not([data-th]) { display: block; text-align: left; }
}

/* Enpresyon: kat yo tounen tablo nòmal sou papye */
@media print {
  table.kv-kat { display: table; overflow: visible; }
  table.kv-kat thead { position: static; }
  table.kv-kat tbody, table.kv-kat tfoot { display: table-row-group; }
  table.kv-kat tr { display: table-row; border: 0; padding: 0; margin: 0; }
  table.kv-kat td { display: table-cell; text-align: inherit; }
  table.kv-kat td::before { content: none; }
}