/* =============================================================================
 * portal-theme.css — A webes ügyfélportál KÖZÖS design-alapja (Fázis 0).
 *
 * Az Android app (BirteWork) 2026-08-13-as „brand-gradient + üveg" design-rendszerének
 * tokenjei webre emelve. Ez az EGYETLEN forrás a portál kinézetéhez — minden portál-oldal
 * (belépés, dashboard, market, rendelés) erre épül.
 *
 * Referencia: BirteWork/docs/design-rendszer/01,05,06 + BirteDesign.kt.
 * Terv: workOrderManagement/docs/webshop-megrendeles/22-webes-market-es-portal-android-harmonizacio-terv-2026-08-19.md §1
 * ============================================================================= */

:root {
    /* ── IDENTITÁS (kék) ─────────────────────────────────────────── */
    --brand:            #0B5FFF;   /* elsődleges márkaszín */
    --brand-light:      #9DBBFF;   /* sötét háttéren olvasható kék (linkek, kiemelés) */
    --on-brand:         #FFFFFF;

    /* ── AKCIÓ (narancs) — képernyőnként MAX 1 filled CTA ────────── */
    --action:           #E8590C;
    --action-pressed:   #C64A08;
    --action-light:     #FFB27A;   /* világos narancs sötét háttéren (szakember-szöveg) */
    --on-action:        #FFFFFF;
    --accent-amber:     #E8590C;   /* alias a meglévő inline hivatkozásokhoz (villám-ikon) */

    /* ── STÁTUSZ ─────────────────────────────────────────────────── */
    --success:  #2E7D32;
    --warning:  #FFA000;
    --danger:   #C62828;
    --info:     #1565C0;

    /* Munkalap-badge színek */
    --status-open:        #1565C0;
    --status-progress:    #FFA000;
    --status-closed:      #2E7D32;
    --status-suspended:   #757575;

    /* Riasztás-szintek (1:1 a MunkalapPlusz-szal) */
    --alert-critical:  #FF3B30;
    --alert-important: #FF9500;
    --alert-warning:   #FFCC00;
    --alert-info:      #007AFF;
    --alert-neutral:   #8E8E93;

    /* ── ÜVEG-FELÜLET (harmadik felület-típus, nem világos/sötét pár) ── */
    --glass-fill:        rgba(255, 255, 255, 0.06);
    --glass-fill-strong: rgba(255, 255, 255, 0.09);
    --glass-border:      rgba(255, 255, 255, 0.14);
    --glass-highlight:   rgba(255, 255, 255, 0.18);   /* felső fény-vonal */
    --glass-on:          rgba(255, 255, 255, 0.94);    /* szöveg üvegen */
    --glass-on-muted:    rgba(255, 255, 255, 0.60);    /* másodlagos szöveg */
    --progress-on-glass: #8FE0AF;

    /* ── BACKDROP (sötétkék → fekete + felső brand-glow) ─────────── */
    --backdrop:
        radial-gradient(130% 90% at 50% -20%, rgba(11, 95, 255, 0.28), transparent 60%),
        linear-gradient(180deg, #0A1430 0%, #070C1B 55%, #04060D 100%);

    /* ── SAROK (radius) ──────────────────────────────────────────── */
    --r-sm:  8px;
    --r-md:  12px;
    --r-lg:  18px;
    --r-xl:  20px;
    --r-pill: 999px;

    /* ── TÉRKÖZ (4px rács) ───────────────────────────────────────── */
    --sp-xs:  4px;
    --sp-sm:  8px;
    --sp-md:  12px;
    --sp-lg:  16px;
    --sp-xl:  24px;
    --sp-xxl: 32px;

    /* Bootstrap-változók ráhúzása (a keretrendszert MEGTARTJUK) */
    --bs-body-bg: transparent;
    --bs-body-color: var(--glass-on);
    --bs-primary: var(--brand);
}

/* ── BOX-SIZING RESET ────────────────────────────────────────────────
 * ⚠️ FONTOS: ezek az oldalak NEM töltik be a Bootstrap CSS-t (csak a bootstrap-icons
 * fontot), így a Bootstrap globális `box-sizing:border-box`-a KIMARAD. Enélkül egy
 * `width:100%` input + padding + border TÚLNYÚLIK a grid-celláján → a mezők egymásra
 * csúsznak (2026-08-19 rendelőlap-hiba). Ezért itt, a portál-gyökéren állítjuk be. */
body.portal-dark, body.portal-dark *, body.portal-dark *::before, body.portal-dark *::after { box-sizing: border-box; }

/* ── ALAP ────────────────────────────────────────────────────────── */
body.portal-dark {
    min-height: 100vh;
    margin: 0;
    background: var(--backdrop) fixed;
    color: var(--glass-on);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ── ÜVEG-PANEL ──────────────────────────────────────────────────── */
.glass-panel {
    position: relative;
    background: var(--glass-fill);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow:
        inset 0 1px 0 var(--glass-highlight),   /* felső fény-vonal (a mélységet ez adja, nem árnyék) */
        0 24px 60px rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--glass-on);
}

/* ── ÜVEG-FEJLÉC (dashboard/market) ──────────────────────────────── */
.glass-header {
    background: rgba(7, 12, 27, 0.72);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--glass-on);
}

/* ── GOMB-HIERARCHIA (SZ2: 1 narancs filled / képernyő) ──────────── */
.btn-action {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm);
    background: var(--action); color: var(--on-action);
    border: none; border-radius: var(--r-md);
    padding: 12px 20px; font-weight: 700; font-size: 1rem; cursor: pointer;
    transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
    box-shadow: 0 8px 24px rgba(232, 89, 12, 0.35);
}
.btn-action:hover  { background: var(--action-pressed); color: var(--on-action); }
.btn-action:active { transform: translateY(1px); }
.btn-action:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }

.btn-brand-outline {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm);
    background: transparent; color: var(--brand-light);
    border: 1.5px solid rgba(157, 187, 255, 0.55); border-radius: var(--r-md);
    padding: 11px 18px; font-weight: 600; cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.btn-brand-outline:hover { background: rgba(157, 187, 255, 0.12); color: var(--brand-light); border-color: var(--brand-light); }

.btn-text-action {
    background: none; border: none; color: var(--brand-light);
    font-weight: 600; cursor: pointer; padding: 6px 8px; text-decoration: none;
}
.btn-text-action:hover { text-decoration: underline; color: var(--brand-light); }

/* ── ÜVEG MEZŐ (input) ───────────────────────────────────────────── */
.glass-field {
    background: var(--glass-fill-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    color: var(--glass-on);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.glass-field::placeholder { color: var(--glass-on-muted); }
.glass-field:focus, .glass-field:focus-within {
    outline: none;
    border-color: var(--brand);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 3px rgba(11, 95, 255, 0.25);
}

/* ── ALSÓ MENÜSÁV (Android-váz: üveg bottom nav) ─────────────────── */
.portal-shell { min-height: 100vh; padding-bottom: 80px; }   /* hely az alsó navnak */
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; justify-content: space-around; align-items: stretch;
    background: rgba(7, 12, 27, 0.92);
    border-top: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-highlight), 0 -8px 24px rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    color: var(--glass-on-muted); text-decoration: none; font-size: .68rem; font-weight: 600;
    padding: 6px 2px; border-radius: var(--r-md);
    transition: color .15s ease;
}
.bottom-nav a i { font-size: 1.25rem; }
.bottom-nav a:hover { color: var(--glass-on); }
.bottom-nav a.active { color: var(--brand-light); }

/* ── CSENGŐ OLVASATLAN-BADGE (doc 24) — a home + minden aloldal fejlécén ── */
.notif-badge {
    position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--r-pill); background: #FF3B30; color: #fff; font-size: .66rem; font-weight: 800;
    line-height: 18px; text-align: center; box-shadow: 0 0 0 2px rgba(7, 12, 27, .92);
}

/* ── KOSÁR darab-badge (kék) + mini-toast (doc 25) ── */
.cart-badge {
    position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--r-pill); background: var(--brand); color: #fff; font-size: .66rem; font-weight: 800;
    line-height: 18px; text-align: center; box-shadow: 0 0 0 2px rgba(7, 12, 27, .92); display: none;
}
.cart-toast {
    position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(20px);
    background: #0B1224; border: 1px solid var(--glass-border); color: var(--glass-on);
    padding: 11px 18px; border-radius: var(--r-pill); font-size: .9rem; font-weight: 600;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; z-index: 1300;
    transition: opacity .2s ease, transform .2s ease;
}
.cart-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── BADGE-EK ────────────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--r-pill); font-size: .78rem; font-weight: 600; }
.pill-open      { background: rgba(21, 101, 192, .18);  color: #7FB0FF; }
.pill-progress  { background: rgba(255, 160, 0, .18);   color: #FFC24D; }
.pill-closed    { background: rgba(46, 125, 50, .18);   color: #86D98C; }
.pill-suspended { background: rgba(117, 117, 117, .2);  color: #C7C7C7; }