/* ==========================================================================
   Mini CRM – közös stílus (az emelog design-rendszerének mintájára: docs/DESIGN_RENDSZER.md ott).
   Inline style="" a sablonokban tilos (CSP) – minden stílus ide kerül.

   1. Design-tokenek, a sötét téma palettája (a Bootstrap sötét változóinak átírása)
   2. Fejléc, eszköztár, menüsor, rögzítés
   3. Gombméretek, érintés, okostelefon
   4. Lábléc, lebegő téma-kapcsoló, nyomtatás
   5. Oldal-specifikus apróságok (jogtáblázat, hozzárendelések, előnézetek …)
   ========================================================================== */

/* ---------- 1. Tokenek ---------- */
:root {
    --hd-card-bg: var(--bs-card-bg, #fff);
    --hd-card-border: var(--bs-border-color, #dee2e6);
    --el-gomb-magassag: 2.5rem;       /* fejléc / menü / eszköztár gomb, érintési célméret */
    --el-gomb-ikon: 1rem;
    --el-gomb-kicsi-magassag: 2rem;   /* .btn-sm */
    --el-gomb-kicsi-ikon: 0.875rem;
    --el-fejlec-logo: 100px;          /* a Defensys-logó 2:1 arányú → 50 px magas */
    --el-fejlec-z: 1030;
    --el-max-szelesseg: 1920px;       /* ultrawide képernyőn az oldal középre kerül */
}

[data-bs-theme="dark"] {
    --hd-bg: #0a0e16;
    --hd-card-bg: #121a26;
    --hd-card-border: rgba(255, 255, 255, 0.07);
    --bs-body-bg: #0a0e16;
    --bs-body-bg-rgb: 10, 14, 22;
    --bs-secondary-bg: #121a26;
    --bs-secondary-bg-rgb: 18, 26, 38;
    --bs-tertiary-bg: #0e1520;
    --bs-tertiary-bg-rgb: 14, 21, 32;
    --bs-border-color: rgba(255, 255, 255, 0.12);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.07);
}
[data-bs-theme="dark"] .card { --bs-card-bg: var(--hd-card-bg); --bs-card-border-color: var(--hd-card-border); --bs-card-cap-bg: rgba(255, 255, 255, 0.03); }
[data-bs-theme="dark"] .modal-content { --bs-modal-bg: var(--hd-card-bg); --bs-modal-border-color: var(--hd-card-border); }
[data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: var(--hd-card-bg); --bs-dropdown-border-color: var(--hd-card-border); }
[data-bs-theme="dark"] .list-group { --bs-list-group-bg: var(--hd-card-bg); --bs-list-group-border-color: var(--hd-card-border); }
[data-bs-theme="dark"] .table-light, [data-bs-theme="dark"] .table-info {
    --bs-table-color: var(--bs-body-color); --bs-table-bg: #172234; --bs-table-border-color: var(--hd-card-border);
    color: var(--bs-body-color);
}
/* (A betűtípus mindkét témában ugyanaz – a sötét mód csak színeket vált.) */

/* Defensys-arculat: a logó türkize a fő szín. Világos módban sötétebb árnyalat (fehér felirattal is olvasható,
   kontraszt ≥ 4.5), sötét módban az eredeti türkiz sötét felirattal. A Bootstrap lefordított színeit itt írjuk át. */
:root, [data-bs-theme="light"] {
    --el-brand: #0b7a87; --el-brand-rgb: 11, 122, 135; --el-brand-hover: #096a75; --el-brand-active: #08606a;
    --el-brand-fg: #fff; --el-brand-fenyes: #30c1d1;
    --bs-primary: var(--el-brand); --bs-primary-rgb: var(--el-brand-rgb);
    --bs-link-color: #0b7a87; --bs-link-color-rgb: 11, 122, 135; --bs-link-hover-color: #075761; --bs-link-hover-color-rgb: 7, 87, 97;
    --bs-primary-text-emphasis: #064a52; --bs-primary-bg-subtle: #d6f3f6; --bs-primary-border-subtle: #a5e2e9;
    --bs-focus-ring-color: rgba(11, 122, 135, 0.25);
}
[data-bs-theme="dark"] {
    --el-brand: #30c1d1; --el-brand-rgb: 48, 193, 209; --el-brand-hover: #4fd0de; --el-brand-active: #7ddde8;
    --el-brand-fg: #04161a;
    --bs-primary: var(--el-brand); --bs-primary-rgb: var(--el-brand-rgb);
    --bs-link-color: #4fd0de; --bs-link-color-rgb: 79, 208, 222; --bs-link-hover-color: #8ae2eb; --bs-link-hover-color-rgb: 138, 226, 235;
    --bs-primary-text-emphasis: #8ae2eb; --bs-primary-bg-subtle: #0a2a2e; --bs-primary-border-subtle: #1d6f78;
    --bs-focus-ring-color: rgba(48, 193, 209, 0.3);
}
.btn-primary {
    --bs-btn-color: var(--el-brand-fg); --bs-btn-bg: var(--el-brand); --bs-btn-border-color: var(--el-brand);
    --bs-btn-hover-color: var(--el-brand-fg); --bs-btn-hover-bg: var(--el-brand-hover); --bs-btn-hover-border-color: var(--el-brand-hover);
    --bs-btn-active-color: var(--el-brand-fg); --bs-btn-active-bg: var(--el-brand-active); --bs-btn-active-border-color: var(--el-brand-active);
    --bs-btn-disabled-color: var(--el-brand-fg); --bs-btn-disabled-bg: var(--el-brand); --bs-btn-disabled-border-color: var(--el-brand);
    --bs-btn-focus-shadow-rgb: var(--el-brand-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--el-brand); --bs-btn-border-color: var(--el-brand);
    --bs-btn-hover-color: var(--el-brand-fg); --bs-btn-hover-bg: var(--el-brand); --bs-btn-hover-border-color: var(--el-brand);
    --bs-btn-active-color: var(--el-brand-fg); --bs-btn-active-bg: var(--el-brand); --bs-btn-active-border-color: var(--el-brand);
    --bs-btn-disabled-color: var(--el-brand); --bs-btn-disabled-border-color: var(--el-brand);
    --bs-btn-focus-shadow-rgb: var(--el-brand-rgb);
}
.text-bg-primary { color: var(--el-brand-fg) !important; }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--el-brand); --bs-dropdown-link-active-color: var(--el-brand-fg); }
.list-group { --bs-list-group-active-bg: var(--el-brand); --bs-list-group-active-border-color: var(--el-brand); --bs-list-group-active-color: var(--el-brand-fg); }
.nav-tabs .nav-link.active { border-top: 2px solid var(--el-brand); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--el-brand-fenyes); box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}
.form-check-input:checked { background-color: var(--el-brand); border-color: var(--el-brand); }
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2304161a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.btn-check:checked + .btn-outline-primary, .btn-check:checked + .btn-outline-secondary { color: var(--bs-btn-active-color); }
.el-csempe i { color: var(--el-brand); }

body {
    max-width: var(--el-max-szelesseg);
    margin-left: auto;
    margin-right: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s, color 0.3s;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}
body > * { flex-shrink: 0; }
[data-bs-theme="dark"] body { background-color: var(--hd-bg); }

/* ---------- 2. Fejléc ---------- */
.el-fejlec { background-color: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); margin-bottom: 1.25rem; }
html[data-fejlec-rogzitett="1"] .el-fejlec { position: sticky; top: 0; z-index: var(--el-fejlec-z); }
.el-fejlec .navbar-brand img { width: var(--el-fejlec-logo); height: auto; }
.el-fejlec h1 { font-size: 1.25rem; }

.el-eszkozsor { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.el-eszkozsor .btn, .el-menusor .btn, .el-rogzit-gomb {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    min-width: var(--el-gomb-magassag); height: var(--el-gomb-magassag); padding: 0 0.75rem;
    font-size: var(--el-gomb-ikon); line-height: 1; font-weight: 600;
}
.el-eszkozsor .btn i, .el-menusor .btn i, .el-rogzit-gomb i { font-size: var(--el-gomb-ikon); width: 1.15em; text-align: center; }

/* Menüsor: egyforma gombok, az aktív kitöltött (btn-primary); csoportok lenyíló menüvel. 992 px alatt csak ikon
   (a title / aria-label marad). */
.el-menusor { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color-translucent, var(--bs-border-color)); }
@media (max-width: 991.98px) { .el-menusor .el-menucimke { display: none; } }

/* Rögzítő kitűző: kikapcsolva ferde, bekapcsolva egyenes és kiemelt */
.el-rogzit-gomb i { transition: transform 0.15s ease; transform: rotate(35deg); }
html[data-fejlec-rogzitett="1"] .el-rogzit-gomb i { transform: rotate(0deg); }
html[data-fejlec-rogzitett="1"] .el-rogzit-gomb { background-color: var(--bs-secondary-bg); color: var(--bs-body-color); border-color: var(--bs-primary); }

/* ---------- 3. Gombok, érintés, telefon ---------- */
.btn-sm, .btn-group-sm > .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
    min-height: var(--el-gomb-kicsi-magassag); min-width: var(--el-gomb-kicsi-magassag); line-height: 1.2; vertical-align: middle;
}
.btn i.fa-solid, .btn i.fa-regular { width: 1.15em; text-align: center; }

@media (pointer: coarse) {
    .btn-sm, .btn-group-sm > .btn { min-height: var(--el-gomb-magassag); min-width: var(--el-gomb-magassag); }
    .btn:not(.btn-sm):not(.btn-lg):not(.btn-link) { min-height: var(--el-gomb-magassag); min-width: var(--el-gomb-magassag); }
    .form-control, .form-select { min-height: var(--el-gomb-magassag); font-size: 1rem; }
    .dropdown-item, .list-group-item-action { min-height: var(--el-gomb-magassag); }
    .form-check-input[type="checkbox"]:not([role="switch"]), .form-check-input[type="radio"] { width: 1.4rem; height: 1.4rem; }
    .form-switch { padding-left: 3em; }
    .form-switch .form-check-input { width: 2.5em; height: 1.4em; margin-left: -3em; }
}

@media (max-width: 575.98px) {
    /* Fejléc telefonon: minden középre; 1. sor logó + cím, 2. sor a gombok, alatta a sortörő ikon-menü */
    .el-fejlec .container-fluid > .d-flex { justify-content: center; text-align: center; }
    .el-fejlec .container-fluid > .d-flex > h1 { margin-right: 0 !important; font-size: 1.1rem; min-width: 0; }
    .el-fejlec .el-eszkozsor { flex: 0 0 100%; justify-content: center; }
    .el-fejlec .el-felhasznalonev { display: none; }
    .modal-dialog.modal-xl, .modal-dialog.modal-lg { max-width: none; width: 100%; height: 100%; min-height: 100%; margin: 0; }
    .modal-dialog.modal-xl .modal-content, .modal-dialog.modal-lg .modal-content { min-height: 100%; border-radius: 0; border: 0; }
    .dropdown-menu { max-width: calc(100vw - 1rem); }
}

/* ---------- 4. Lábléc, lebegő téma-kapcsoló, nyomtatás ---------- */
.el-lablec {
    align-self: stretch; margin-top: auto; padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--bs-border-color); background-color: var(--bs-body-bg);
    color: var(--bs-secondary-color); font-size: 0.8rem; text-align: center;
}
.el-tema-lebego { position: fixed; right: calc(1rem + env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 1040; }
.el-tema-lebego .btn {
    width: var(--el-gomb-magassag); height: var(--el-gomb-magassag); padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; background-color: var(--bs-body-bg);
}
.el-belepo-logo { width: 180px; height: auto; }
@media print { .el-fejlec, .el-lablec, .el-tema-lebego { display: none !important; } }

/* ---------- 5. Oldal-specifikus apróságok ---------- */
/* htmx betöltésjelző (az includeIndicatorStyles ki van kapcsolva) */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* Hozzárendelések listája: hosszú partnerlistánál a doboz görget, nem az oldal */
.assign-box { max-height: 24rem; overflow-y: auto; }

/* Céglogó / pecsét / aláírás előnézete */
.company-logo-preview { max-height: 6rem; max-width: 100%; }

/* Többsoros szöveg sortöréseinek megtartása */
.text-prewrap { white-space: pre-wrap; }

/* Jogtáblázat: telefonon a táblázat görget vízszintesen (a .table-responsive-on belül), nem az oldal */
.perm-table { min-width: 46rem; }
.perm-table th[scope="row"] { min-width: 12rem; }
.perm-table select { min-width: 11rem; }

/* Munkalap: aláírási mező (az érintés ne görgesse az oldalt), fotók */
.signature-pad { height: 14rem; touch-action: none; background-color: #fff; cursor: crosshair; }
.ws-photo { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* Ragadós mentés-sáv hosszú űrlapon – telefonon az ablak aljához tapad (emelog .el-urlap-sav) */
@media (max-width: 575.98px) {
    .el-urlap-sav { position: sticky; bottom: 0; z-index: 10; background-color: var(--bs-tertiary-bg);
        margin: 0 -0.75rem; padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--bs-border-color); box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.12); }
}

/* Kezdőlap modul-csempék */
.el-csempe { display: flex; align-items: center; gap: 0.75rem; }
.el-csempe i { font-size: 1.4rem; width: 1.6em; text-align: center; color: var(--bs-primary); }

/* Hibabejelentés: nyilvános (QR) űrlap, QR-kód kép, csapdamező */
.el-nyilvanos { max-width: 640px; }
.el-qr { max-width: 320px; width: 100%; }
.el-csapda { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Napló: a részletek (JSON) tördelve, ne lógjon ki telefonon */
.el-naplo-reszlet { white-space: pre-wrap; word-break: break-word; font-size: .8rem; }
.el-elozmenyek > summary { cursor: pointer; list-style-position: inside; }

/* Karbantartási jegyzőkönyv: a megjegyzés kitölti a sort, telefonon a gombok alá törik */
.el-jk-megjegyzes { flex: 1 1 14rem; min-width: 12rem; }

/* Riport grafikon (szerveren rajzolt SVG) */
.el-grafikon { width: 100%; height: auto; }

/* Lenyíló menücsoport: az ikonok egy oszlopban */
.el-menusor .dropdown-menu .dropdown-item { display: flex; align-items: center; gap: 0.5rem; }
.el-menusor .dropdown-toggle::after { margin-left: 0.15rem; }

/* Főoldal: összesítő kártyák, gyorsgombok (telefonon csak ikon), üres állapot */
.el-kpi:hover { border-color: var(--el-brand); }
.el-ures-ikon { color: var(--el-brand); opacity: 0.6; }
@media (max-width: 767.98px) { .el-gyorsgomb-felirat { display: none; } }
/* Mai munkáim: kártyák, a gombsor alul */
.el-munka-kartya .btn { min-height: var(--el-gomb-magassag); }

/* ---------- 6. Egységes oldalelemek (design 2. kör) ----------
   Lista: .el-lista-fej (csak a műveletek – a cím a fejlécben van), .el-szurosor, .el-darab (találatszám),
   .el-ures (üres állapot). Adatlap: .el-vissza (vissza-link), .el-muveletsav (telefonon az aljhoz tapad). */
.el-lista-fej { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.el-lista-fej:not(:has(*)) { display: none; }
.el-szurosor {
    margin-left: 0; margin-right: 0; padding: 0.5rem 0.25rem; border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color-translucent);
}
.el-darab { font-size: 0.85rem; color: var(--bs-secondary-color); margin-bottom: 0.5rem; }
.el-ures {
    text-align: center; color: var(--bs-secondary-color); padding: 2.5rem 1rem; margin: 0;
    border: 1px dashed var(--bs-border-color); border-radius: var(--bs-border-radius-lg);
}
.el-ures > i { display: block; font-size: 2rem; margin-bottom: 0.5rem; color: var(--el-brand); opacity: 0.6; }
.list-group:has(> .el-ures) { border: 0; }
.el-vissza { display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; font-size: 0.9rem; text-decoration: none; }
.el-vissza:hover { text-decoration: underline; }
.el-muveletsav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
@media (max-width: 575.98px) {
    .el-muveletsav {
        position: sticky; bottom: 0; z-index: 1020; margin: 0 -1rem 1rem; padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
        background-color: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.08);
    }
    .el-muveletsav > *, .el-muveletsav form .btn { flex: 1 1 auto; }
}
/* Gyorskereső a fejlécben (nagy képernyőn mező, kicsin ikon) – a gombokkal egy magasságban */
.el-gyorskereso .form-control { width: 14rem; height: var(--el-gomb-magassag); }
/* A cég saját logója a fejlécben (10. szelet): tetszőleges arányú kép, a fejléc magasságához igazítva */
.el-ceg-logo { width: auto; max-width: var(--el-fejlec-logo); max-height: 50px; object-fit: contain; }
/* Sötét fejlécen a (jellemzően sötét feliratú) céglogó világosítva: a fényerő megfordul (a sötét felirat világos
   lesz), a 180°-os színkör-forgatás pedig nagyjából visszaadja az eredeti színárnyalatokat. Doboz nélkül. */
[data-bs-theme="dark"] .el-ceg-logo { filter: invert(1) hue-rotate(180deg); }
/* A kétlépcsős belépés beállító QR-kódja: fehér háttér sötét témában is (a beolvasáshoz) */
.el-qr { width: 220px; max-width: 100%; height: auto; background-color: #fff; padding: 0.25rem; }
/* Szuperadmin támogatási munkamenete (9. szelet): feltűnő, minden oldalon látszó sáv */
.el-tamogatas-sav {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.5rem 1rem; margin-bottom: 1rem; background-color: var(--bs-danger); color: #fff;
}

/* Kanban-tábla a kezdőlapon (app/board/): nagy képernyőn öt egyforma oszlop, kicsin vízszintesen lapozható
   oszlopok (egy oszlop majdnem a teljes szélesség). A húzás célpontjai: zöld = ide ejthető, halvány = nem. */
.el-tabla-oszlopok {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: 0.75rem;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem;
}
@media (max-width: 767.98px) { .el-tabla-oszlopok { grid-auto-columns: 85%; } }
.el-tabla-oszlop {
    scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0;
    background-color: var(--bs-tertiary-bg); border-radius: var(--bs-border-radius-lg); padding: 0.5rem;
}
.el-tabla-fej { padding: 0.25rem 0.25rem 0.5rem; }
.el-tabla-kartyak {
    display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 auto; min-height: 4rem;
    border: 2px dashed transparent; border-radius: var(--bs-border-radius); transition: border-color 0.15s, opacity 0.15s;
}
.el-kartya { border-left: 3px solid var(--el-brand); }
.el-kartya[draggable="true"] { cursor: grab; }
.el-kartya-keso { border-left-color: var(--bs-danger); }
.el-kartya-huzott { opacity: 0.5; }
.el-cel-ok { border-color: var(--bs-success-border-subtle); }
.el-cel-folott { border-color: var(--bs-success); background-color: var(--bs-success-bg-subtle); }
.el-cel-tilos { opacity: 0.55; }
/* Figyelmeztetések a tábla fölött: összecsukott kártyák */
.el-figyelmeztetes > summary { cursor: pointer; list-style: none; }
.el-figyelmeztetes > summary::-webkit-details-marker { display: none; }

/* Élő jelszó-jelző (templates/_password.html) */
.el-jelszo-jelzo .progress { height: 0.4rem; }
.el-jelszo-jelzo .progress-bar.w-0 { width: 0; }
.el-keskeny-urlap { max-width: 32rem; }

/* Projektek tábla: minden fázis látszik – vízszintes görgetés helyett sorokba tördelve; a sorrendet a fázis
   sorszáma és a nyíl mutatja (balról jobbra, majd a következő sorban). */
.el-tabla-oszlopok.el-tabla-projektek {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    overflow-x: visible; scroll-snap-type: none;
}
.el-fazis-szam {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: 0.85rem; font-weight: 600;
    background-color: var(--el-brand); color: var(--el-brand-fg, #fff);
}
.el-fazis-nyil { color: var(--bs-secondary-color); }