/* =====================================================================
   PLIK: css/mf-spojnosc.css
   Warstwa spójności Manawa Flow — wczytywana JAKO OSTATNIA na każdej stronie.

   Robi trzy rzeczy:
     1. pilnuje, żeby na telefonie nic nie wychodziło poza ekran
     2. wymusza ostre kąty na tabelach, kafelkach i przyciskach
     3. zostawia okrągłe to, co ma być okrągłe (ikony, awatary, kropki)

   Zasada: reguły są celowane, nie hurtowe. Żadnego `* { border-radius: 0 }`,
   bo to spłaszczyłoby też awatary i kółka z ikonami.
   ===================================================================== */


/* =====================================================================
   1. TELEFON — NIC POZA EKRAN
   ===================================================================== */

/* Ostatnia linia obrony. Gdy jakiś element mimo wszystko rozepchnie stronę,
   użytkownik nie zobaczy pustego pasa i uciętej treści po prawej. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Najczęstsza prawdziwa przyczyna rozpychania: długi, nieprzerwany ciąg
   znaków — adres e-mail, token z linku, URL wklejony w treść. */
body, p, li, td, th, div, span, a, h1, h2, h3, h4, h5, h6,
figcaption, blockquote, label, dd, dt {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Elementy w siatkach i flexie domyślnie nie chcą się zwężać poniżej
   swojej treści. To druga najczęstsza przyczyna. */
[class*="grid"] > *,
[class*="flex"] > *,
[class*="row"] > *,
[class*="layout"] > * {
    min-width: 0;
}

/* Media nigdy szersze niż kontener */
img, svg, video, iframe, canvas, embed, object {
    max-width: 100%;
}
img, svg, video { height: auto; }

/* Tabele i kod dostają własne przewijanie, zamiast rozpychać stronę */
table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
pre, code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Pola formularzy potrafią mieć własną szerokość domyślną */
input, select, textarea, button {
    max-width: 100%;
}

/* Na telefonie odbieramy sztywne szerokości minimalne — to one najczęściej
   powodują, że kafelek nie chce się zmieścić. */
@media (max-width: 640px) {
    [class*="card"],
    [class*="box"],
    [class*="tile"],
    [class*="kafel"],
    [class*="panel"],
    [class*="wrapper"],
    [class*="container"],
    [class*="section"] {
        min-width: 0 !important;
    }
}

/* Świadomie NIE wymuszamy tu jednej kolumny na wszystkich siatkach.
   To by przebudowało układy, które działają poprawnie — a przyczyną
   ucinania treści są sztywne szerokości minimalne i długie ciągi znaków,
   czyli to, co reguły wyżej już naprawiają. Jeśli konkretna strona nadal
   się rozpycha, poprawiamy ją u niej, nie globalnie. */


/* =====================================================================
   2. OSTRE KĄTY — STANDARD MARKI
   ===================================================================== */

table, thead, tbody, tfoot, tr, th, td,
fieldset, legend, hr,
input, select, textarea, button,
[class*="card"], [class*="Card"],
[class*="box"], [class*="Box"],
[class*="tile"], [class*="kafel"],
[class*="panel"], [class*="Panel"],
[class*="widget"],
[class*="alert"], [class*="flash"], [class*="notice"],
[class*="badge"], [class*="tag"], [class*="chip"], [class*="label"],
[class*="btn"], [class*="button"],
[class*="modal"], [class*="popup"], [class*="dropdown"],
[class*="form"], [class*="field"], [class*="input"],
[class*="footer"], [class*="header"], [class*="nav"],
[class*="thumb"], [class*="cover"], [class*="banner"],
[class*="menu"], [class*="list"], [class*="item"] {
    border-radius: 0 !important;
}


/* =====================================================================
   3. WYJĄTKI — TO ZOSTAJE OKRĄGŁE
   Kolejność ma znaczenie: te reguły stoją PO zerowaniu, więc wygrywają.
   ===================================================================== */

[class*="circle"], [class*="Circle"],
[class*="avatar"], [class*="Avatar"],
[class*="kolo"], [class*="kropka"], [class*="dot"],
[class*="icon-circle"], [class*="ikona-kolo"],
[class*="initials"], [class*="inicjaly"],
[class*="spinner"], [class*="loader"],
input[type="radio"],
.przystanek::before {
    border-radius: 50% !important;
}

/* Suwaki i przełączniki bez zaokrągleń wyglądają na zepsute */
input[type="range"],
[class*="switch"], [class*="toggle"] {
    border-radius: 999px !important;
}

/* Kropki i linia na osi „Twoja droga" — okrąg jest tam sensem, nie ozdobą */
.os .przystanek::before { border-radius: 50% !important; }