/* =========================================================
   TETŐABLAK MŰHELY - KÖZPONTI STÍLUSLAP
   Ez a fájl váltja fel a korábbi style.css + admin.css párost -
   minden belső (kollégáknak és adminoknak szóló) weboldal ezt
   használja. A PDF-sablon (includes/ajanlat_pdf_template.php)
   ettől SZÁNDÉKOSAN külön maradt, mert az más renderelő motort
   (dompdf) használ, ami nem tudja betölteni ezt a fájlt.
   ========================================================= */

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/assets/fonts/Nunito-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/assets/fonts/Nunito-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* =================================================================
       MŰHELY DIZÁJNRENDSZER v1.0
       Az értékek a Claude Designban tervezett rendszerből valók.
       Új színt, méretet vagy térközt ne írj közvetlenül a szabályokba:
       mindig ezekből a változókból válassz.
       ================================================================= */

    /* --- Márkaszínek --------------------------------------------------
       A türkiz viszi az interakciót (gomb, aktív elem, kijelölés).
       A sötét változat a SZÖVEGÉ: fehér alapon a világos türkiz nem
       olvasható eleget, ezért linkhez és kiemelt számhoz ez való. */
    --brand: #14BCC2;
    --brand-hover: #0FA5AB;
    --brand-active: #0B8E93;
    --brand-text: #0A8388;
    --brand-soft: #E6F8F9;
    --brand-ring: #D3F4F5;

    /* A narancs SZÁNDÉKOSAN nem interakciós szín: csak az aktuális
       helyet vagy az ügyfél-ikont jelöli, gombra és menüre nem kerül. */
    --admin-accent: #E8740C;
    /* --- Semleges skála ----------------------------------------------
       A --dark és a --border régi nevek, hogy a meglévő hivatkozások
       ne törjenek el; az értékük igazodott a dizájnrendszerhez. */
    --dark: #24282C;            /* alap szöveg */
    --text-muted: #5F6670;      /* leírás, dátum, másodlagos adat */
    --text-faint: #8A9099;      /* inaktív, kitöltetlen */
    --bg: #F0F1F3;              /* az alkalmazás háttere */
    --surface: #FFFFFF;         /* kártya, mező */
    --surface-2: #F7F8F9;       /* hover, szűrősáv */
    --border: #E3E5E8;          /* elválasztó vonal */
    --border-strong: #CFD3D8;   /* mezőkeret, gombkeret */

    /* --- Állapotszínek (szöveg / háttér / keret) --------------------- */
    --success: #1F9D55;
    --success-bg: #E8F7EE;
    --success-border: #BFE6CF;

    /* Projekt-állapot színei (a név színe a listákban). Az Értékesítés
       folyamat lépésének main_status értéke dönt róluk. */
    --deal-uj:          #3E9BDC;   /* új projekt, még nem indult */
    --deal-folyamatban: #1B3F8F;   /* dolgozunk rajta, nincs lezárva */
    --deal-nyert:       #177A42;   /* lezárt, megnyert */
    --deal-vesztett:    #8C1D2C;   /* lezárt, elvesztett */
    --warning: #9A6212;
    --warning-bg: #FFF9E6;
    --warning-border: #F0D98A;
    --error-text: #D12F2F;
    --error-bg: #FDECEC;
    --error-border: #F3B9B9;
    --inactive: #8A9099;
    --inactive-bg: #F0F1F3;

    --admin-dark: #262626;

    /* A CRM-felületek (adatlapok és az ajánlatszerkesztő) egységes
       vezérlő-magassága: minden gomb és egysoros beviteli mező ekkora,
       akkora, mint az ügyfélminősítés kapcsolója. */
    --control-height: 36px;
    --control-height-sm: 28px;

    /* --- Egységes betűméret-rendszer ---
       H1  oldalcím (oldalanként egy)
       H2  fő blokkok, szekciók címe
       H3  alszekciók, pipeline-ok neve, kártyák címe
       body  normál szöveg és mezőértékek
       small  másodlagos információ, mezőcímkék
       tiny   jelvények, kódok, apró jelölők
       Új méretet ne írj közvetlenül: mindig ezekből válassz. */
    /* A dizájnrendszer px-ben adja meg a méreteket; itt rem-ben állnak
       ugyanazok az értékek (1rem = 16px), hogy a böngészőben beállított
       nagyobb betűméret továbbra is arányosan nagyítson. */
    --fs-h1: 1.625rem;   --lh-h1: 2rem;        /* 26 / 32 px */
    --fs-h2: 1.25rem;    --lh-h2: 1.75rem;     /* 20 / 28 px */
    --fs-h3: 1rem;       --lh-h3: 1.5rem;      /* 16 / 24 px */
    --fs-body: 0.875rem; --lh-body: 1.375rem;  /* 14 / 22 px */
    --fs-label: 0.8125rem; --lh-label: 1.125rem; /* 13 / 18 px */
    --fs-small: 0.75rem; --lh-small: 1.125rem; /* 12 / 18 px */
    --fs-tiny: 0.6875rem;                      /* 11 px */

    /* --- Betűsúlyok ---------------------------------------------------
       A dizájnrendszer szerint félkövér a címekre, a táblázat-fejlécre,
       az űrlapcímkékre és a nevekre kerül. A GOMBFELIRAT mindig 400,
       és a menüpont sem félkövér - az aktív sem. */
    --fw-normal: 400;
    --fw-label: 600;
    --fw-bold: 700;
    --fw-strong: 800;

    /* Az összecsukható elemek közös nyila (a projekt saját chevronja).
       Egy helyen definiálva, hogy minden nyíl ugyanaz legyen. */
    --caret-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.5 6 5.5-6 5.5'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-base);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    background: var(--bg);
    color: var(--dark);
    -webkit-font-smoothing: antialiased;
}

/* --- Bejelentkezés / jelszó-oldalak --- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.auth-card {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.auth-card h1 {
    font-size: var(--fs-h1);
    margin: 0 0 4px;
    color: var(--dark);
}

.subtitle {
    margin: 0 0 24px;
    color: #777;
    font-size: var(--fs-h3);
}

form label {
    display: block;
    font-size: var(--fs-body);
    font-weight: 600;
    margin-bottom: 6px;
    margin-top: 16px;
}

form input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: var(--fs-h3);
}

form input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(20,204,204,0.2);
}

button[type="submit"] {
    width: 100%;
    margin-top: 24px;
    padding: 12px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--fs-body);
    font-weight: var(--fw-normal);
    cursor: pointer;
}

button[type="submit"]:hover {
    background: var(--brand-hover);
}

.alert {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: var(--fs-body);
    margin-bottom: 8px;
}

.alert-error {
    background: var(--error-bg);
    color: var(--error-text);
}

.alert-success { background: #E7F7F2; color: #146B5C; }

/* --- Bal oldali navigációs sáv --- */
/* A dizájnrendszer szerint az oldalsáv 232 px. */
:root { --sidebar-width: 232px; }

body { display: block; }

.sidebar-toggle {
    display: none; position: fixed; top: 14px; left: 14px; z-index: 60;
    background: var(--dark); color: #fff; border: none; border-radius: 8px;
    width: 42px; height: 42px; font-size: 1.3rem; cursor: pointer;
}
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 45; }
.sidebar-overlay.visible { display: block; }

.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width);
    background: var(--bg); color: #444; display: flex; flex-direction: column;
    z-index: 50; overflow-y: auto; transition: width 0.15s ease;
}
.sidebar-brand-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px 16px 22px; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; overflow: hidden; line-height: 1.15; }
.sidebar-brand-mark { flex: 0 0 auto; display: block; }
.sidebar-brand-text { min-width: 0; }
.sidebar-brand-name { display: block; font-weight: 800; font-size: var(--fs-h1); letter-spacing: 1.5px; color: var(--brand); }
.sidebar-brand-by { display: block; margin-top: 2px; font-size: var(--fs-tiny); font-weight: 600; color: #9AA0A6; letter-spacing: 0.2px; }
.sidebar-brand:hover .sidebar-brand-name { filter: brightness(1.1); }
.sidebar-collapse-btn { background: rgba(0,0,0,0.06); border: none; color: #555; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: var(--fs-body); flex-shrink: 0; }
.sidebar-collapse-btn:hover { background: rgba(0,0,0,0.12); }

.sidebar.collapsed { width: 60px; }
.sidebar.collapsed .sidebar-brand-text { display: none; }
.sidebar.collapsed .sidebar-brand { justify-content: center; gap: 0; }
.sidebar.collapsed .sidebar-brand-row { justify-content: center; padding: 16px 0; }
.sidebar.collapsed .sidebar-collapse-btn { transform: rotate(180deg); }
.sidebar.collapsed .sidebar-nav, .sidebar.collapsed .sidebar-footer { display: none; }

.sidebar-nav { flex: 1; padding: 10px; overflow-y: auto; }
.sidebar-link, .sidebar-group-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    height: 36px; padding: 0 var(--space-ms); border-radius: var(--radius-sm); color: #444; font-weight: var(--fw-normal);
    font-size: var(--fs-body); text-decoration: none; background: none; border: none;
    font-family: inherit; cursor: pointer; text-align: left; margin-bottom: 2px;
}
.sidebar-link:hover, .sidebar-group-toggle:hover { background: rgba(0,0,0,0.06); color: #111; }
.sidebar-link.active { background: var(--brand); color: #fff; }

.sidebar-caret { font-size: var(--fs-tiny); transition: transform 0.15s ease; color: #999; }
.sidebar-group-toggle.open .sidebar-caret { transform: rotate(180deg); }

.sidebar-submenu { display: none; padding-left: 14px; }
.sidebar-submenu.open { display: block; }
.sidebar-submenu a, .sidebar-sublink {
    display: block; padding: 9px 14px; border-radius: 8px; color: #666;
    font-weight: 500; font-size: var(--fs-body); text-decoration: none; margin-bottom: 2px;
}
.sidebar-submenu a:hover, .sidebar-sublink:hover { background: rgba(0,0,0,0.06); color: #111; }
.sidebar-submenu a.active, .sidebar-sublink.active { background: var(--admin-accent); color: #fff; }
.sidebar-subgroup-toggle { font-size: var(--fs-body); color: #777; padding: 9px 14px; font-weight: 600; }
.sidebar-subgroup .sidebar-submenu { padding-left: 10px; }
.sidebar-subgroup .sidebar-submenu a { font-size: var(--fs-small); }

.sidebar-footer { padding: 14px; border-top: 1px solid #E2E3E6; }
.sidebar-user-name { font-weight: 700; font-size: var(--fs-body); color: #333; padding: 0 14px 8px; }
.sidebar-footer a { display: block; padding: 8px 14px; border-radius: 8px; color: #666; font-size: var(--fs-body); text-decoration: none; }
.sidebar-footer a:hover { background: rgba(0,0,0,0.06); color: #111; }

.field input, .field select {
    height: 42px;
    box-sizing: border-box;
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
    height: var(--control-height); padding: 0 var(--space-md);
    border: none; border-radius: var(--radius-sm);
    font-family: var(--font-base); font-size: var(--fs-body); font-weight: var(--fw-normal);
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
/* FIGYELEM a szelektorokra: feljebb él egy button[type="submit"] szabály,
   ami türkiz hátteret és teljes szélességet ad. Annak a specifikussága
   (0,1,1) ERŐSEBB, mint egy sima osztályé (0,1,0), ezért a variánsokat
   button-nel együtt is fel kell sorolni - különben a submit-gombok
   figyelmen kívül hagynák a .btn-secondary-t. */
.btn-primary, button.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover, button.btn-primary:hover { background: var(--brand-hover); }
.btn-primary:active, button.btn-primary:active { background: var(--brand-active); }
.btn-secondary, button.btn-secondary {
    background: #fff; color: var(--dark); border: 1px solid var(--border-strong);
}
.btn-secondary:hover, button.btn-secondary:hover { background: var(--surface-2); border-color: #B5BBC2; }
.btn-secondary:active, button.btn-secondary:active { background: #EDEFF1; }
/* A .btn magassága és szélessége is felülírja a submit-szabály
   width:100% + margin-top értékét. */
button.btn { width: auto; margin-top: 0; padding: 0 var(--space-md); }
button.btn-small { height: var(--control-height-sm); }
.btn:disabled, .btn[disabled] { background: var(--border); color: #9AA0A8; cursor: not-allowed; }
.btn-small { padding: 0 var(--space-ms) !important; font-size: 13px !important; height: var(--control-height-sm); display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box; }

.content {
    max-width: 1280px;
    margin: 32px auto;
    margin-left: calc(var(--sidebar-width) + 24px);
    padding: 0 24px;
    transition: margin-left 0.15s ease;
}

@media (max-width: 900px) {
    /* A --sidebar-width itt a TARTALOM bal margóját nullázza. A fiók
       szélességét viszont NEM ő adhatja: a .sidebar alapból
       width: var(--sidebar-width), tehát a 0 px-től a kinyíló fiók is
       nulla széles lett - a hamburger "nem csinált semmit". Ezért kap
       a sáv itt saját, fix szélességet. */
    :root { --sidebar-width: 0px; }
    .sidebar-toggle { display: block; }
    .sidebar-collapse-btn { display: none; }
    .sidebar {
        width: 300px; max-width: 85vw;
        transform: translateX(-100%); transition: transform 0.2s ease;
        box-shadow: 4px 0 20px rgba(0,0,0,0.2);
    }
    .sidebar.open { transform: translateX(0); }

    /* Az összecsukott állapot asztali funkció, és a beállítás a
       localStorage-ban él. Mobilon viszont a .collapsed elrejtené a menüt
       (.sidebar-nav / .sidebar-footer display:none), így a kinyíló fiók
       üres maradna. Ezért itt a teljes tartalom visszakapcsol. */
    .sidebar.collapsed { width: 300px; max-width: 85vw; }
    .sidebar.collapsed .sidebar-nav,
    .sidebar.collapsed .sidebar-footer { display: block; }
    .sidebar.collapsed .sidebar-brand-text { display: block; }
    .sidebar.collapsed .sidebar-brand { justify-content: flex-start; gap: 10px; }
    .sidebar.collapsed .sidebar-brand-row { justify-content: space-between; padding: 16px 12px 16px 22px; }

    .content { margin-left: auto; margin-right: auto; padding: 0 16px; padding-top: 66px; }
}

@media (max-width: 640px) {
    .content { padding: 0 16px; padding-top: 66px; margin: 16px auto; }
}

/* =========================================================
   ADMIN-FELÜLET - minden admin/*.php oldal ezt is használja
   ========================================================= */

.admin-banner { background: var(--admin-dark); color: #fff; padding: 14px 20px; border-radius: 10px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; font-weight: 700; }
.admin-banner .tag { background: var(--admin-accent); color: #fff; font-size: var(--fs-tiny); font-weight: 800; padding: 3px 10px; border-radius: 20px; letter-spacing: 0.5px; }

.help-admin-layout { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.help-admin-sidebar { flex: 0 0 240px; background: var(--admin-dark); border-radius: 12px; padding: 10px; }
.help-admin-sidebar a { display: block; padding: 12px 14px; border-radius: 8px; color: #ccc; font-weight: 600; font-size: var(--fs-h3); text-decoration: none; margin-bottom: 2px; }
.help-admin-sidebar a:hover { background: #3a3a3a; color: #fff; }
.help-admin-sidebar a.active { background: var(--admin-accent); color: #fff; }
.sidebar-sublist { margin: 2px 0 8px 12px; border-left: 2px solid #3a3a3a; padding-left: 6px; }
.sidebar-sublist a { font-size: var(--fs-body); padding: 8px 12px; color: #aaa; }
.sidebar-sublist a.active { background: rgba(232,114,12,0.25); color: #fff; font-weight: 700; }

.help-admin-main { flex: 1; min-width: 280px; }

.help-admin-main .card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); margin-bottom: 20px; border-top: 3px solid var(--admin-accent); }
.help-admin-main .card h2 { font-size: var(--fs-h2); font-weight: 700; color: var(--admin-dark); margin: 0 0 4px; }
.help-admin-main .card .card-desc { color: #777; font-size: var(--fs-body); margin: 0 0 14px; }
.help-admin-main .group-heading { font-weight: 700; font-size: var(--fs-h3); color: var(--admin-accent); margin: 20px 0 6px; border-bottom: 1px solid #f0f0f0; padding-bottom: 6px; }
.help-admin-main .group-heading:first-child { margin-top: 0; }

.help-admin-main table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.help-admin-main th, .help-admin-main td { text-align: left; padding: 8px; border-bottom: 1px solid #eee; font-size: var(--fs-body); vertical-align: top; }
input[type=text], input[type=date], input[type=time], input[type=email], input[type=number], input[type=file], input[type=password], input[type=search], input[type=tel], textarea, select {
    padding: 0 var(--space-ms); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    font-family: var(--font-base); font-size: var(--fs-body); color: var(--dark); background: #fff; outline: none;
}
/* Fókuszban türkiz keret és gyűrű - a rendszer egyetlen fókuszjelzése. */
input:focus, textarea:focus, select:focus {
    border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring);
}
input:disabled, textarea:disabled, select:disabled {
    background: var(--surface-2); border-color: var(--border); color: #9AA0A8;
}
input.has-error, textarea.has-error, select.has-error { border-color: var(--error-text); }
/* A többsoros mező nem 36 px magas, ezért kap saját belső margót. */
textarea { padding: var(--space-sm) var(--space-ms); line-height: var(--lh-body); }
input[type=text], input[type=email], input[type=password], input[type=file], textarea, select { width: 100%; box-sizing: border-box; }
textarea { min-height: 140px; resize: vertical; }

/* Az egysoros beviteli mezők egységes magassága. Natív stílussal a dátum- és
   az időmező a beépített ikonja miatt magasabbra nő (45px), a legördülő pedig
   alacsonyabb marad (37px) - egymás mellett ez látható egyenetlenség. */
input[type=text], input[type=date], input[type=time], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], select {
    height: var(--control-height);
    line-height: normal;
}

.help-admin-main td.row-actions { white-space: nowrap; vertical-align: middle; }
.help-admin-main .row-actions a, .help-admin-main .row-actions form { display: inline-block; vertical-align: middle; margin: 0; padding: 0; line-height: 1; }
.help-admin-main .row-actions a { margin-right: 14px; color: var(--admin-accent); cursor: pointer; font-size: var(--fs-body); font-weight: 600; text-decoration: none; }
.help-admin-main .row-actions button {
    display: inline-block; background: none; border: none; margin: 0; padding: 0; font: inherit; line-height: 1;
    color: var(--admin-accent); cursor: pointer; font-size: var(--fs-body); font-weight: 600; text-decoration: none; vertical-align: middle;
}
.help-admin-main .row-actions .delete-btn { color: #B3261E; }

.help-admin-main .add-form { padding-top: 14px; border-top: 1px solid #f0f0f0; margin-top: 6px; }
.help-admin-main .add-form .field-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.help-admin-main .add-form .field { flex: 1; min-width: 180px; }
.help-admin-main .add-form label { display: block; font-size: var(--fs-small); font-weight: 600; color: #555; margin-bottom: 4px; }
.help-admin-main .expiry-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.help-admin-main .expiry-row label.checkbox-label { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: var(--fs-body); color: #555; }

.btn-admin { background: var(--admin-accent); color: #fff; border: none; height: var(--control-height); padding: 0 var(--space-md); border-radius: var(--radius-sm); font-weight: var(--fw-normal); cursor: pointer; font-size: var(--fs-body); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn-admin:hover { filter: brightness(1.05); }

.help-admin-main .topic-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.help-admin-main .topic-pill { background: #fff; color: #555; border: 1px solid #ddd; padding: 7px 14px; border-radius: 20px; font-size: var(--fs-body); font-weight: 600; text-decoration: none; }
.help-admin-main .topic-pill:hover { border-color: var(--admin-accent); color: var(--admin-accent); }
.help-admin-main .topic-pill.active { background: var(--admin-accent); border-color: var(--admin-accent); color: #fff; }

/* =========================================================
   KEZDŐLAP (dashboard.php)
   ========================================================= */

.hero { margin: 8px 0 28px; }
.hero h1 { margin: 0 0 16px; }
.card-subheading { font-size: var(--fs-h2); margin-bottom: 2px; }

.announcement-board { background: #FFF8E1; border: 1px solid #F5D96B; border-radius: 12px; padding: 18px 22px; margin-bottom: 24px; }
.announcement-label { display: flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.4px; color: var(--warning); margin-bottom: 8px; }
.announcement-content { font-size: var(--fs-h3); color: #4a3d00; line-height: 1.5; }
.announcement-content ul, .announcement-content ol { margin: 4px 0 4px 20px; padding: 0; }
.announcement-content p { margin: 0 0 8px; }
.announcement-content p:last-child { margin-bottom: 0; }
.announcement-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.announcement-modal { background: #fff; border-radius: 14px; max-width: 480px; width: 100%; padding: 26px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); }
.announcement-modal-label { display: flex; align-items: center; gap: 6px; font-weight: var(--fw-strong); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.4px; color: var(--warning); margin-bottom: 10px; }
.announcement-modal-content { font-size: var(--fs-h3); color: #333; line-height: 1.55; margin-bottom: 20px; }
.announcement-modal-content ul, .announcement-modal-content ol { margin: 4px 0 4px 20px; padding: 0; }
.announcement-modal-content p { margin: 0 0 8px; }
.announcement-modal-content p:last-child { margin-bottom: 0; }
.announcement-modal-close { background: var(--brand); color: #fff; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: var(--fs-body); }

/* =========================================================
   SÚGÓ (help.php)
   ========================================================= */

.help-search-form { display: flex; gap: 8px; align-items: center; margin: 16px 0 24px; flex-wrap: wrap; }
.help-search-form input[type=text] { flex: 1; min-width: 240px; }
.btn-text-link { color: var(--text-muted); font-size: var(--fs-body); text-decoration: underline; }
/* Szöveges gomb: soron belüli művelet táblázatban, kártyán. */
.btn-text { background: transparent; border: 0; color: var(--brand-text); height: var(--control-height); padding: 0 var(--space-sm); border-radius: var(--radius-sm); font: var(--fw-normal) var(--fs-body) var(--font-base); cursor: pointer; }
.btn-text:hover { background: var(--brand-soft); }
/* Csak ikonos gomb - a dizájnrendszer szerint kizárólag táblázat sorában,
   és mindig title súgóval. */
.btn-icon { width: var(--control-height); height: var(--control-height); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-icon:hover { background: var(--surface-2); }
.btn-icon-plain { width: 30px; height: 30px; border: 0; background: transparent; color: var(--text-muted); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-icon-plain:hover { background: var(--brand-soft); color: var(--brand-text); }
.btn-icon-plain.danger:hover { background: var(--error-bg); color: var(--error-text); }
.help-search-results .article-card { margin-bottom: 10px; }

.help-layout { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.help-sidebar { flex: 0 0 260px; background: #fff; border-radius: 12px; padding: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.help-sidebar a { display: block; padding: 12px 14px; border-radius: 8px; color: #3F3F3F; font-weight: 600; font-size: var(--fs-h3); text-decoration: none; margin-bottom: 2px; }
.help-sidebar a:hover { background: #F0FDFD; }
.help-sidebar a.active { background: #14CCCC; color: #fff; }
.help-sidebar .sep { height: 1px; background: #eee; margin: 8px 6px; }

.help-main { flex: 1; min-width: 280px; }
.help-main h1 { margin-top: 0; }

.article-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); margin-bottom: 14px; overflow: hidden; }
.article-card summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 700; font-size: var(--fs-h2); color: #3F3F3F; display: flex; justify-content: space-between; align-items: center; }
.article-card summary::-webkit-details-marker { display: none; }
.article-card summary::after { content: '\25BE'; color: #999; font-size: var(--fs-body); }
.article-card[open] summary::after { content: '\25B4'; }
.article-card summary:hover { background: #FAFEFE; }
.article-body { padding: 0 22px 20px; color: #444; line-height: 1.6; font-size: var(--fs-h3); }
.article-body h3 { color: #14CCCC; font-size: var(--fs-h2); margin: 16px 0 6px; }
.article-body h3:first-child { margin-top: 0; }
.article-body p { margin: 0 0 10px; }

.empty-hint { color: #999; background: #fff; border-radius: 12px; padding: 24px; text-align: center; }
.faq-category-heading { color: #14CCCC; font-size: var(--fs-h3); font-weight: 700; margin: 22px 0 10px; }
.faq-category-heading:first-child { margin-top: 0; }

/* =========================================================
   ADMIN - közösen használt widgetek (több oldal is használja
   változatlan formában: tabos kártya, fogd-és-vidd menüfa)
   ========================================================= */

.help-admin-main .tabs-card { padding: 0; overflow: hidden; }
.help-admin-main .tabs { display: flex; border-bottom: 1px solid #eee; flex-wrap: wrap; }
.help-admin-main .tab-btn { flex: 1; background: none; border: none; padding: 14px 16px; font-weight: 700; font-size: var(--fs-body); color: #999; cursor: pointer; border-bottom: 3px solid transparent; font-family: inherit; white-space: nowrap; }
.help-admin-main .tab-btn:hover { background: #FAFAFA; color: #555; }
.help-admin-main .tab-btn.active { color: var(--admin-accent); border-bottom-color: var(--admin-accent); }
.help-admin-main .tab-panel { display: none; padding: 22px 24px; }
.help-admin-main .tab-panel.active { display: block; }

.help-admin-main .menu-tree, .help-admin-main .menu-branch { list-style: none; margin: 0; padding: 0; }
.help-admin-main .menu-branch { margin-left: 26px; padding-top: 6px; }
.help-admin-main .menu-node { margin-bottom: 6px; }
.help-admin-main .menu-node-row {
    display: flex; align-items: center; gap: 10px; background: #f7f7f7; border: 1px solid #eee;
    border-radius: 8px; padding: 10px 14px; cursor: grab;
}
.help-admin-main .menu-node-row .drag-handle { color: #bbb; font-size: var(--fs-h3); }
.help-admin-main .menu-node-row .label { font-weight: 600; color: #333; }
.help-admin-main .menu-node-row .url { color: #999; font-size: var(--fs-small); }
.help-admin-main .menu-node-row form { margin: 0; }
.help-admin-main .menu-node.drag-over-before > .menu-node-row { box-shadow: 0 -3px 0 var(--admin-accent); }
.help-admin-main .menu-node.drag-over-after > .menu-node-row { box-shadow: 0 3px 0 var(--admin-accent); }
.help-admin-main .menu-node.drag-over-inside > .menu-node-row { background: rgba(232,114,12,0.18); border-color: var(--admin-accent); }
.help-admin-main .menu-node.dragging > .menu-node-row { opacity: 0.4; }

/* =========================================================
   TERVEZÉSI RENDSZER - alapok (skálák, tipográfia, állapotok,
   újrahasználható minták). Ez a szakasz csak ÚJ dolgokat ad
   hozzá, semmilyen meglévő oldal kinézetét nem változtatja meg -
   a jövőben, külön körökben térünk vissza, hogy a kézzel beírt
   értékeket (pl. border-radius: 12px) fokozatosan lecseréljük
   ezekre a változókra.
   ========================================================= */

:root {
    /* --- Térköz-skála --- */
    --space-xs: 4px;    /* ikon és szöveg között */
    --space-sm: 8px;    /* címke és mező között, gombcsoport */
    --space-ms: 12px;   /* mező belső margó, listaelemek */
    --space-md: 16px;   /* kártyák között, mezők között */
    --space-lg: 24px;   /* kártya belső margó */
    --space-xl: 32px;   /* szekciók között */
    --space-2xl: 48px;  /* nagy tagolás */

    /* --- Lekerekítés-skála --- */
    --radius-xs: 4px;     /* jelölőnégyzet, szögletes címke, menüelem */
    --radius-sm: 6px;     /* gomb, mező, legördülő */
    --radius-box: 8px;    /* belső doboz (javaslatdoboz, kiemelés) */
    --radius-md: 10px;    /* kártya, blokk, figyelmeztető doboz */
    --radius-bar: 12px;   /* lebegő sáv (mobil mentősáv) */
    --radius-lg: 10px;    /* régi név; a rendszerben nincs 14 px, ezért 10 */
    --radius-pill: 999px; /* teendőtípus-címke, avatar */

    /* --- Árnyék-skála --- */
    /* Árnyék CSAK lebegő elemre: legördülő menü, felugró ablak, mobil sáv. */
    --shadow-sm: 0 2px 10px rgba(36,40,44,0.06);
    --shadow-md: 0 8px 24px rgba(36,40,44,0.12);   /* menü, legördülő */
    --shadow-lg: 0 10px 40px rgba(36,40,44,0.25);
    --shadow-bar: 0 10px 28px rgba(36,40,44,0.30); /* lebegő mobil sáv */

    /* --- Alap betűtípus --- */
    --font-base: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/*
   Z-INDEX TÉRKÉP - dokumentáció, hogy elkerüljük az ütközést,
   ha új réteget adunk hozzá:
   10    toolbar / sticky elemek alapszintje (customer-view)
   20    sticky összegző sáv (ajánlat-előnézet, admin oldalak)
   30    sticky lábléc (ajánlatszerkesztő)
   100   topbar legördülő menü
   1000  üzenőfal felugró értesítés (dashboard)
   2000  belső cset widget
   3000  felhasználó-adatlap modal (admin/users.php)
*/

/* --- Alap címsorok --- */
h1, h2, h3 { font-family: var(--font-base); color: var(--dark); margin: 0 0 12px; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-strong); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-strong); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); }

/* --- Állapot-segédosztályok --- */
.is-disabled, [disabled] { opacity: 0.5; cursor: not-allowed; }
.has-error { border-color: var(--error-text) !important; }
.is-hidden { display: none !important; }

/* --- Jelvények (badge-ek) - újrahasználható alapminta --- */
.badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--fs-small); font-weight: 700; }

/* --- Modal-ablakok - újrahasználható alapminta (jövőbeli
   felugró ablakokhoz; a meglévő 3 modal egyelőre a saját,
   korábban megírt osztályait használja tovább) --- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: none; align-items: center; justify-content: center; padding: 16px; }
.modal-overlay.open { display: flex; }
.modal-box { background: #fff; border-radius: var(--radius-lg); max-width: 420px; width: 100%; padding: var(--space-lg); box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto; position: relative; }
.modal-close-x { position: absolute; top: 14px; right: 14px; background: none; border: none; font-size: var(--fs-h1); line-height: 1; color: #999; cursor: pointer; padding: 4px; }
.modal-close-x:hover { color: #333; }

/* =========================================================
   ADMIN - gazdag szövegszerkesztő (Üzenőfal + Súgó közösen)
   ========================================================= */

.help-admin-main .rte-toolbar, .rte-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); background: #F7F7F7; border: 1px solid #e5e5e5; border-radius: var(--radius-sm); padding: 6px; width: fit-content; }
.rte-toolbar button {
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); height: 34px; min-width: 34px;
    padding: 0 10px; cursor: pointer; font-size: var(--fs-body); font-family: inherit; color: #444; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center;
}
.rte-toolbar button:hover { background: #fff; border-color: #ddd; color: var(--admin-accent); }
.rte-toolbar button.b { font-weight: 700; }
.rte-toolbar button.i { font-style: italic; }
.rte-toolbar button.u { text-decoration: underline; }
.rte-toolbar .rte-sep { width: 1px; background: #ddd; margin: 4px 4px; }
.rte-toolbar button.danger:hover { color: var(--error-text); }

.rte-editor { min-height: 160px; border: 1px solid #ccc; border-radius: var(--radius-sm); padding: 12px 14px; font-size: var(--fs-h3); line-height: 1.5; background: #fff; }
.rte-editor:focus { outline: none; border-color: var(--admin-accent); box-shadow: 0 0 0 3px rgba(232,114,12,0.15); }
.rte-editor ul, .rte-editor ol { margin: 0 0 0 20px; padding: 0; }
.rte-editor h3 { color: var(--admin-accent); margin: 10px 0 4px; }
.rte-editor p { margin: 0 0 8px; }

.rte-actions { margin-top: var(--space-md); display: flex; gap: 10px; }
.rte-hint { font-size: var(--fs-small); color: #999; margin-top: 6px; }

/* =========================================================
   ADMIN - Termék import egyedi részei
   ========================================================= */

.help-admin-main form label { display: block; font-weight: 600; margin-top: 14px; margin-bottom: 4px; font-size: var(--fs-body); }
.help-admin-main .stat-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #eee; }
.help-admin-main .stat-row:last-child { border-bottom: none; }
.help-admin-main .stat-label { color: #555; }
.help-admin-main .stat-value { font-weight: 700; }
.help-admin-main .stat-value.removed { color: var(--error-text); }
.help-admin-main .stat-value.added { color: var(--admin-accent); }
.help-admin-main .removed-sample { font-size: var(--fs-body); color: #777; margin-top: 10px; }

/* Új, általánosan használható veszély-gomb (pl. törlés-jellegű elsődleges műveletekhez) */
.btn-danger { background: var(--error-text); color: #fff; }

/* =========================================================
   ADMIN - Jogosultsági körök egyedi részei
   ========================================================= */

.help-admin-main .role-card { margin-bottom: 20px; }
.help-admin-main .access-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.help-admin-main .access-grid label { display: flex; align-items: center; gap: 6px; background: #f7f7f7; border: 1px solid #eee; border-radius: var(--radius-md); padding: 8px 12px; font-size: var(--fs-body); font-weight: 600; color: #444; cursor: pointer; }
.help-admin-main .access-grid input:checked + span { color: var(--admin-accent); }

/* =========================================================
   SEGÉDOSZTÁLYOK (utility classes)
   Gyakran ismétlődő, apró beállítások - céljuk, hogy sehol ne
   kelljen style="..." attribútumot írni az oldalakon.
   ========================================================= */

/* --- Szöveg --- */
.text-muted { color: #777; }
.text-muted-light { color: #999; }
.text-small { font-size: var(--fs-body); }
.text-smaller { font-size: var(--fs-small); }
.text-center { text-align: center; }
.text-danger { color: var(--error-text); }
.text-bold { font-weight: 700; }
.text-tiny { font-size: var(--fs-small); }

/* --- Térköz --- */
.mt-0 { margin-top: 0 !important; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-0 { margin-bottom: 0 !important; }
.m-0 { margin: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.ml-sm { margin-left: var(--space-sm); }
.p-0 { padding: 0; }

/* --- Megjelenés / elrendezés --- */
.d-block { display: block; }
.d-inline { display: inline; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.cursor-pointer { cursor: pointer; }

/* --- Flex-segédek --- */
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-full { flex: 1 1 100%; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.items-end { align-items: flex-end; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.btn-pale-red { background: #FDECEC; color: var(--error-text); }
.wrap { flex-wrap: wrap; }

/* --- Szélesség-segédek (mezőkhöz) --- */
.w-80 { width: 80px; }
.w-100 { width: 100px; }
.w-120 { width: 120px; }
.w-140 { width: 140px; }
.w-160 { width: 160px; }
.w-200 { width: 200px; }
.w-220 { width: 220px; }
.w-auto { width: auto; }
.max-w-140 { max-width: 140px; }
.max-w-160 { max-width: 160px; }
.max-w-200 { max-width: 200px; }
.max-w-220 { max-width: 220px; }
.max-w-400 { max-width: 400px; }
.min-w-220 { min-width: 220px; }
.min-w-260 { min-width: 260px; }

/* --- Kis, beágyazott "+ Új elem hozzáadása" űrlap-minta (pl. egy
   kártyán belüli kinyitható extra hozzáadás-lehetőség) --- */
.inline-add-form { display: flex; gap: 10px; align-items: flex-end; margin-top: 10px; flex-wrap: wrap; }
.inline-add-form .mini-field label { display: block; font-size: var(--fs-small); }

/* --- Rádiógomb / jelölőnégyzet választó-sor (leírással) --- */
label.option-row { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 500; cursor: pointer; }
.option-row input { margin-top: var(--space-xs); }
label.checkbox-row { display: flex !important; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.option-list { flex-direction: column; align-items: stretch; gap: 14px; border-top: none; }
.help-list { margin: 0 0 14px 20px; padding: 0; font-size: var(--fs-body); color: #444; line-height: 1.7; }
.text-body-small { font-size: var(--fs-body); color: #444; }
.no-border-top { border-top: none; }
.ml-auto { margin-left: auto !important; }
.page-subtitle { margin-top: 0; color: #777; font-weight: 600; font-size: var(--fs-h3); }
.text-xs { font-size: var(--fs-small); }

/* --- AI-javaslat kártya (Feltöltött anyagok) --- */
.draft-item-box { border: 1px solid #eee; border-radius: var(--radius-sm); margin-bottom: 12px; }
.draft-item-summary { cursor: pointer; padding: 12px 14px; font-weight: 600; color: #333; }
.draft-item-body { padding: 0 14px 14px; }
.draft-type-badge { padding: 2px 8px; border-radius: var(--radius-md); font-size: var(--fs-tiny); margin-right: 8px; }
.error-raw { white-space: pre-wrap; word-break: break-word; font-family: monospace; font-size: var(--fs-small); }
.import-textarea { min-height: 120px; }

/* =========================================================
   BELSŐ CSET WIDGET (includes/chat_widget.php) - minden
   bejelentkezett oldalon megjelenik, ezért közös alap.
   ========================================================= */

    #chat-bubble {
        position: fixed; bottom: 22px; right: 22px; width: 58px; height: 58px; border-radius: 50%;
        background: var(--brand, #14CCCC); color: #fff; border: none; cursor: pointer; z-index: 2000;
        box-shadow: 0 4px 16px rgba(0,0,0,0.25); font-size: 1.5rem; display: flex; align-items: center; justify-content: center;
    }
    #chat-bubble .chat-badge {
        position: absolute; top: -4px; right: -4px; background: #E53935; color: #fff; border-radius: 50%;
        min-width: 20px; height: 20px; font-size: var(--fs-tiny); font-weight: 700; align-items: center; justify-content: center;
        padding: 0 4px; display: none;
    }
    #chat-panel {
        position: fixed; bottom: 92px; right: 22px; width: 340px; max-width: calc(100vw - 32px); height: 460px;
        max-height: calc(100vh - 140px); background: #fff; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.25);
        z-index: 2000; display: none; flex-direction: column; overflow: hidden;
    }
    #chat-panel.open { display: flex; }
    #chat-header { background: var(--dark, #3F3F3F); color: #fff; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: var(--fs-h3); }
    #chat-header .chat-back { cursor: pointer; margin-right: 8px; display: none; }
    #chat-header .chat-close { cursor: pointer; opacity: 0.8; }
    #chat-body { flex: 1; overflow-y: auto; padding: 10px; }

    .chat-conv-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 8px; border-radius: 8px; cursor: pointer; }
    .chat-conv-item:hover { background: #F5F7F7; }
    .chat-conv-item .name { font-weight: 700; font-size: var(--fs-body); color: #333; }
    .chat-conv-item .preview { font-size: var(--fs-small); color: #999; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .chat-conv-unread { background: #E53935; color: #fff; border-radius: 10px; min-width: 18px; height: 18px; font-size: var(--fs-tiny); font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

    .chat-new-btn { display: block; width: 100%; text-align: left; background: #F0FDFD; color: var(--brand, #14CCCC); border: none; border-radius: 8px; padding: 12px 10px; font-weight: 700; font-size: var(--fs-body); cursor: pointer; margin-bottom: 8px; }

    .chat-msg { max-width: 80%; margin-bottom: 8px; padding: 8px 12px; border-radius: 12px; font-size: var(--fs-body); line-height: 1.4; }
    .chat-msg.mine { background: var(--brand, #14CCCC); color: #fff; margin-left: auto; border-bottom-right-radius: 3px; }
    .chat-msg.theirs { background: #F0F0F0; color: #333; margin-right: auto; border-bottom-left-radius: 3px; }
    .chat-msg.ai { background: #FFF8E1; color: #4a3d00; }
    .chat-msg .meta { display: block; font-size: var(--fs-tiny); opacity: 0.7; margin-top: 3px; }

    #chat-footer { border-top: 1px solid #eee; padding: 8px; }
    #chat-input-row { display: flex; gap: 6px; }
    #chat-input { flex: 1; border: 1px solid #ddd; border-radius: 20px; padding: 8px 14px; font-size: var(--fs-body); font-family: inherit; resize: none; }
    #chat-send-btn { background: var(--brand, #14CCCC); color: #fff; border: none; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; font-size: var(--fs-h3); flex-shrink: 0; }

    #chat-faq-toggle { font-size: var(--fs-small); color: #777; margin-top: 6px; cursor: pointer; user-select: none; }
    #chat-faq-fields { display: none; margin-top: 6px; background: #FAFAFA; border-radius: 8px; padding: 8px; }
    #chat-faq-fields.open { display: block; }
    #chat-faq-fields label { display: block; font-size: var(--fs-tiny); font-weight: 600; color: #666; margin: 6px 0 2px; }
    #chat-faq-fields select, #chat-faq-fields input[type=date] { width: 100%; font-size: var(--fs-small); padding: 4px; border-radius: 4px; border: 1px solid #ddd; }
    #chat-faq-fields .checkbox-row { display: flex; align-items: center; gap: 4px; font-size: var(--fs-tiny); margin-top: 4px; }

    .chat-empty-hint { color: #999; font-size: var(--fs-body); text-align: center; padding: 20px 10px; }
    .chat-new-colleague-select { width: 100%; padding: 8px; border-radius: 8px; border: 1px solid #ddd; font-size: var(--fs-body); margin-bottom: 10px; }

/* =========================================================
   KÖZÖS OLDALFEJLÉC (includes/page_header.php)
   Két rögzített sáv: felül a szürke keresősáv a globális CRM-keresővel,
   alatta a fehér oldalfejléc. Mindkettő a bal sávhoz igazodik, és követi
   annak összecsukását (--sidebar-width).
   ========================================================= */
:root { --searchbar-height: 54px; }

.app-searchbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--searchbar-height);
    margin-left: var(--sidebar-width);
    padding: 0 20px;
    background: var(--bg);
    transition: margin-left 0.15s ease;
}
.app-searchbar-inner { width: 100%; max-width: 560px; }

.app-header {
    position: sticky;
    top: var(--searchbar-height);
    z-index: 39;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-left: var(--sidebar-width);
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid #E2E3E6;
    transition: margin-left 0.15s ease;
}
/* Keresősáv nélküli oldalon a fejléc ül legfelül. */
.app-header-top { top: 0; }

.app-header-main { flex: 1; min-width: 0; }
.app-header-title { margin: 0; font-size: var(--fs-h1); line-height: 1.3; }
.app-header-sub { margin-top: 3px; font-size: var(--fs-small); color: #888; }
.app-header-sub a { color: #666; font-weight: 600; text-decoration: none; }
.app-header-sub a:hover { color: var(--brand); }
.app-header-sub .sep { margin: 0 6px; color: #ccc; }

.app-header-side { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.app-header-actions { display: flex; align-items: center; gap: 8px; }
.app-header-meta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: #9AA0A6; white-space: nowrap; }

/* A fejléc alatti tartalom kapja meg a saját térközét - a sávok maguk
   nem takarnak semmit, mert a tartalom folyamában ülnek. */
.app-shell .content { margin-top: 24px; }
.app-shell.crm-page .content { margin-top: 0; }

@media (max-width: 900px) {
    /* A lebegő menügomb helyet kap a keresősáv bal oldalán. */
    .app-searchbar { padding-left: 58px; justify-content: flex-start; }
    .app-header { padding: 10px 16px; }
    .app-header-title { font-size: var(--fs-h2); }
    .app-header-side { width: 100%; margin-left: 0; }
    .app-shell .content { padding-top: 0; margin-top: 16px; }
}

/* A fejléc önhordó: a kereső és a gombok akkor is egységesek, ha az oldal
   nem a CRM-elrendezést használja (pl. ajánlatlista). */
.app-searchbar .crm-search input { height: var(--control-height); font-size: var(--fs-body); }
.app-header-actions .btn,
.app-header-actions .btn-brand,
.app-header-actions .crm-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control-height);
    padding: 0 14px;
    font-size: var(--fs-body);
    line-height: 1;
    box-sizing: border-box;
}

/* --- Általános tartalmi panel (admin, súgó, vezérlőpult) ---
   Ugyanaz az elv, mint a CRM-adatlapon: a fejléc a panel teteje, alatta
   közvetlenül az első kártya, a kártyák pedig külön dobozok maradnak. */
.app-panel > .app-header {
    margin: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom: none;
    box-shadow: var(--shadow-sm);
}
.app-panel .card { margin-bottom: 16px; }
/* A panel első eleme a fejléchez illeszkedik, akármi is az (kártya,
   üzenőfal, táblázat-blokk). */
.app-panel-body > :first-child,
.app-panel > .card:first-child { border-top-left-radius: 0; border-top-right-radius: 0; }
.app-panel-filter { padding: 14px 20px; background: #FAFBFC; border-bottom: 1px solid #EDEEF0; }
.app-panel-filter form { margin: 0; }
.app-tag-admin { display: inline-block; margin-right: 10px; padding: 3px 10px; background: var(--admin-accent); color: #fff; font-size: var(--fs-tiny); font-weight: 800; letter-spacing: 0.5px; border-radius: 20px; vertical-align: middle; }

/* A panel szűrősorában a gomb és a mezők egy sorban, egységes magassággal
   (az app.css alapértelmezett, teljes szélességű submit gombja helyett). */
.app-panel-filter form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-panel-filter form > input[type="text"] { flex: 1; min-width: 220px; }
.app-panel-filter button[type="submit"],
.app-panel-filter .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: var(--control-height);
    margin-top: 0;
    padding: 0 16px;
    font-size: var(--fs-body);
    line-height: 1;
    box-sizing: border-box;
}

/* =========================================================
   DIZÁJNRENDSZER - ÚJRAHASZNÁLHATÓ KOMPONENSEK
   A Claude Designban tervezett MŰHELY-rendszer elemei.
   Az itt definiált osztályok a teljes belső felületen
   használhatók; új színt vagy méretet ne írj beléjük
   közvetlenül, csak a :root változóit használd.
   ========================================================= */

/* --- Mezőcsoport: címke a mező FÖLÖTT, 6 px távolsággal --- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field-label {
    font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-label); color: var(--dark);
}
.field-hint { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); }
.field-error { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--error-text); }

/* --- Jelölőnégyzet: 18 px, 4 px sarok, türkiz kitöltés --- */
.ds-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-body); user-select: none; }
.ds-check input[type=checkbox] {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px; flex: none; margin: 0;
    border: 1.5px solid #B5BBC2; border-radius: var(--radius-xs); background: #fff;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ds-check input[type=checkbox]:checked { background: var(--brand); border-color: var(--brand); }
/* A pipa háttérképként jön, hogy a natív jelölőnégyzet cseréjéhez ne
   kelljen extra elem a HTML-be. */
.ds-check input[type=checkbox]:checked::after {
    content: ''; width: 12px; height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ds-check input[type=checkbox]:disabled { background: var(--surface-2); border-color: var(--border); cursor: not-allowed; }

/* --- Címkék (badge) ---------------------------------------
   Két forma, két jelentés: a KEREK a teendő típusa, a
   SZÖGLETES nagybetűs az adatlap vagy esemény fajtája. */
.badge-pill {
    display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
    border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: var(--fw-label);
    background: var(--inactive-bg); color: #4A5058;
}
.badge-type {
    display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-sm);
    border-radius: var(--radius-xs); font-size: var(--fs-tiny); font-weight: var(--fw-bold);
    letter-spacing: .04em; text-transform: uppercase;
    background: var(--inactive-bg); color: #4A5058;
}
.badge-none { background: var(--inactive-bg); color: var(--inactive); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-error   { background: var(--error-bg);   color: var(--error-text); }
.badge-brand   { background: var(--brand-soft); color: #0A7479; }
.badge-info    { background: #E6F0FA; color: #1E5F9E; }
.badge-purple  { background: #F2E8FB; color: #6B2AA3; }
.badge-survey  { background: #FFF1E3; color: #A8520A; }  /* Felmérés */
.badge-shop    { background: #E8F7EE; color: #177A42; }  /* Webshop */

/* --- Határidő-jelzés ------------------------------------- */
.due-overdue { color: var(--error-text); font-weight: var(--fw-bold); }
.due-today   { color: var(--warning);    font-weight: var(--fw-label); }
.due-closed  { color: var(--text-faint); font-weight: var(--fw-normal); }
.due-later   { color: var(--text-muted); font-weight: var(--fw-normal); }

/* --- Táblázat: 44 px sor, csak vízszintes elválasztó ------ */
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.ds-table thead tr { border-bottom: 1px solid var(--border-strong); }
.ds-table th {
    padding: 10px var(--space-sm); text-align: left;
    font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--dark);
}
.ds-table td { padding: 0 var(--space-sm); height: 44px; }
.ds-table tbody tr { border-bottom: 1px solid var(--border); }
.ds-table tbody tr:hover { background: var(--surface-2); }
.ds-table tr.is-selected { background: #F2FBFB; }
/* Számok és dátumok: azonos szélességű számjegyek, jobbra igazítva. */
.ds-table .num, .ds-table .col-right { text-align: right; font-variant-numeric: tabular-nums; }
.ds-table .col-date { font-variant-numeric: tabular-nums; }
.ds-table a { font-weight: var(--fw-label); color: var(--brand-text); }

/* --- Összecsukható blokk ---------------------------------
   A TELJES fejléc kattintható, a nyíl jobb oldalon: zárva
   lefelé, nyitva felfelé mutat. Egyszerre több is nyitva lehet.
   <details class="ds-collapse"><summary>Cím</summary>…</details> */
.ds-collapse { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.ds-collapse + .ds-collapse { margin-top: var(--space-ms); }
.ds-collapse > summary {
    min-height: 56px; padding: 0 20px; cursor: pointer; list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
    font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); color: var(--dark);
}
.ds-collapse > summary::-webkit-details-marker { display: none; }
.ds-collapse > summary:hover { background: var(--surface-2); }
.ds-collapse > summary::after {
    content: ''; width: 18px; height: 18px; flex: none; transition: transform .15s;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6670' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ds-collapse[open] > summary::after { transform: rotate(180deg); }
.ds-collapse-body { padding: var(--space-md) 20px 20px; border-top: 1px solid var(--bg); font-size: var(--fs-body); line-height: var(--lh-body); }

/* --- Üzenetdobozok ---------------------------------------- */
.ds-note { border-radius: var(--radius-md); padding: var(--space-md); font-size: var(--fs-body); line-height: var(--lh-body); }
.ds-note-success { background: var(--success-bg); border: 1px solid var(--success-border); }
.ds-note-warning { background: var(--warning-bg); border: 1px solid var(--warning-border); }
.ds-note-error   { background: var(--error-bg);   border: 1px solid var(--error-border); }

/* --- Statisztika-csempe (összesítő kártya) ---------------- */
.ds-stat { background: #fff; border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: var(--space-ms); }
.ds-stat-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ds-stat-label { font-size: var(--fs-label); color: var(--text-muted); }
.ds-stat-value { font-size: 1.75rem; font-weight: var(--fw-strong); line-height: 1; }

/* --- Szegmentált kapcsoló --------------------------------- */
.ds-segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.ds-segmented button {
    height: 34px; padding: 0 14px; border: 0; background: #fff; color: var(--dark);
    font: var(--fw-normal) 13px var(--font-base); cursor: pointer;
}
.ds-segmented button.active { background: var(--brand); color: #fff; }

/* --- A dizájnrendszer viselkedési szabálya ----------------
   A gombfelirat soha nem félkövér. (A menüpontokra ugyanez
   vonatkozik, azt a topbar saját szabályai kezelik.) */
.btn, .btn-admin, .btn-brand, .btn-primary, .btn-secondary { font-weight: var(--fw-normal); }

.announcement-pin { flex: none; }

/* =========================================================
   VISSZAJELZŐ SÁV ELTŰNÉSE
   Az assets/js/toast.js teszi rá 3 másodperc után, utána az
   elem ki is kerül a DOM-ból. A hibajelzések nem tűnnek el.
   ========================================================= */
.is-fading { opacity: 0; transition: opacity .35s ease; }
@media (prefers-reduced-motion: reduce) {
    .is-fading { transition: none; }
}