/* ==========================================================================
   A KÉT LAP KÖZÖS FELÜLETI ELEMEI: a márkajel és az ikonméretek
   ==========================================================================
   !!! MIÉRT KÜLÖN FÁJL (2026-09-19): az admin pult ikonkészlete emoji volt, a
   szerkesztőé Lucide - két világ ugyanabban a programban. Az összehangoláskor
   a pultnak pont ezekre volt szüksége, és a választás megint az volt, hogy vagy
   a saját másolatát hordozza (akkor egy ikonméret-változtatás a felét átállítja,
   a felét nem), vagy KIKERÜL ide. Ugyanaz a döntés, mint a szinek.css-nél.
   Betöltési sorrend: szinek.css -> kozos.css -> style.css / pult.css. */

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand-mark { width: 28px; height: 28px; display: block; flex-shrink: 0; }
.brand-name {
    font-family: 'Barlow Condensed', 'Barlow', 'Segoe UI', Helvetica, sans-serif;
    font-weight: 600; font-size: 22px; line-height: 1;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--brand-deep);
    /* A betűköz az UTOLSÓ betű után is helyet hagy - enélkül a jel optikailag
       jobbra csúszna a szomszédjához képest. */
    margin-right: -0.22em;
    white-space: nowrap;
}
/* Mobilon csak a jel fér el - a felső sáv amúgy is zsúfolt. */
}
@media (max-width: 768px) { .brand-name { display: none; } }

.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 16px; height: 16px; }
.icon-lg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   AZ ÉRTESÍTŐ CSÍK (static/js/ertesito/) - a szerkesztő felső sávja fölött
   --------------------------------------------------------------------------
   Azért itt, és nem a style.css-ben: a pult Rendszerüzenet lapja UGYANEZZEL a stílussal
   mutatja az előnézetet - két másolat előbb-utóbb másként nézne ki.
   A body oszlopos flex, ezért a csík nem takar semmit, hanem a felületet lejjebb tolja.
   EGY SOR: a hosszú szöveg levágódik (a teljes a buborékban), a gombok mindig látszanak. */
.ertesito-csik {
    flex-shrink: 0; display: flex; align-items: center; gap: 10px;
    min-height: 36px; box-sizing: border-box; padding: 4px 8px 4px 15px;
    font-size: 13px; line-height: 1.3; border-bottom: 1px solid;
    background: var(--primary-soft); color: var(--primary-soft-text);
    border-color: var(--primary-soft-border);
}
.ertesito-csik[hidden] { display: none; }
.ertesito-figyelmeztetes { background: var(--figyelmeztet-bg); color: var(--figyelmeztet-szoveg);
    border-color: var(--figyelmeztet-szel); }
.ertesito-kritikus { background: var(--riaszt-bg); color: var(--riaszt-szoveg);
    border-color: var(--riaszt-szel); font-weight: 600; }
.ertesito-ikon { flex-shrink: 0; }
.ertesito-szoveg { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
.ertesito-gomb, .ertesito-tovabbi, .ertesito-bezar {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font: inherit;
    font-size: 12px; font-weight: 600; color: inherit; cursor: pointer; white-space: nowrap;
    background: transparent; border: 1px solid currentColor; border-radius: var(--radius);
    padding: 3px 10px;
}
.ertesito-gomb:hover, .ertesito-tovabbi:hover { background: rgba(0, 0, 0, 0.06); }
.ertesito-tovabbi { border-style: dashed; padding: 3px 8px; }
.ertesito-bezar { border: none; padding: 4px; opacity: 0.75; }
.ertesito-bezar:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }
/* ASZTALON KÖZÉPEN (a user kérése, 2026-09-26: balra zárva „nagyon elviszi a szemet"). Az ikon,
   a szöveg és a gomb EGY csoportként áll középen, az X a jobb szélre kerül, KIVÉVE a
   folyamból - különben a csoport közepe az X szélességével balra csúszna. A két oldali
   belső margó azonos, így a csoport a teljes szélesség közepén van, nem a maradékén. */
@media (min-width: 769px) {
    .ertesito-csik { position: relative; justify-content: center; padding: 4px 48px; }
    .ertesito-szoveg { flex: 0 1 auto; }
    .ertesito-bezar { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
@media (max-width: 768px) {
    .ertesito-csik { gap: 6px; padding: 4px 4px 4px 10px; font-size: 12px; }
    /* Telefonon nincs egérrámutatás, tehát a buborékból sem olvasható ki a levágott vége -
       MÉRVE a kritikus mentési üzenet fele („addig ne zárd be a lapot") elveszett. Két sor. */
    .ertesito-szoveg { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; }
}
