/* =====================================================================
   HRV Raktárkezelő — arculati stíluslap
   Forrás: dokumentacio/tervek/design-system.md (5–6. fejezet).
   Minden szín, méret és árnyék innen jön; a Bootstrap 5.3 runtime
   változóit is itt írjuk felül, SCSS-build nélkül.
   ===================================================================== */

/* ===================== 1. DESIGN TOKENEK ===================== */
:root {
    /* --- Márkaszín-skála (lila) --- */
    --hrv-primary-50: #faf5f9;
    --hrv-primary-100: #f3e8f0;
    --hrv-primary-200: #e5cfe0;
    --hrv-primary-300: #cfa8c6;
    --hrv-primary-400: #b47ba8;
    --hrv-primary-500: #98598c;   /* = --hrv-primary */
    --hrv-primary-600: #88507e;
    --hrv-primary-700: #78476f;
    --hrv-primary-800: #6e4968;
    --hrv-primary-900: #4b3047;

    --hrv-primary: var(--hrv-primary-500);
    --hrv-primary-rgb: 152, 89, 140;
    --hrv-primary-hover: var(--hrv-primary-600);
    --hrv-primary-light: #a66699;
    --hrv-primary-dark: var(--hrv-primary-700);
    --hrv-primary-deep: var(--hrv-primary-800);
    --hrv-primary-soft: var(--hrv-primary-100);

    /* --- Grafit / semleges skála --- */
    --hrv-dark: #222529;
    --hrv-dark-rgb: 34, 37, 41;
    --hrv-ink: #2b2f34;         /* sidebar emelt felület */
    --hrv-gray-900: #1f2328;
    --hrv-gray-800: #343a40;
    --hrv-gray-700: #495057;
    --hrv-gray-600: #595e5d;    /* = --hrv-text */
    --hrv-gray-500: #777777;    /* = --hrv-muted */
    --hrv-gray-400: #a3a8ad;
    --hrv-gray-300: #d1d5d9;
    --hrv-gray-200: #e5e7ea;
    --hrv-gray-100: #f1f2f4;
    --hrv-gray-50: #f8f9fa;

    /* --- Szöveg --- */
    --hrv-text: var(--hrv-gray-600);
    --hrv-text-strong: var(--hrv-dark);
    --hrv-muted: var(--hrv-gray-500);
    --hrv-text-on-primary: #ffffff;

    /* --- Felületek és szegélyek --- */
    --hrv-bg: #f4f4f4;                 /* oldalháttér */
    --hrv-bg-subtle: #f4f4f4;          /* alias (régi név) */
    --hrv-surface: #ffffff;            /* kártya, navbar */
    --hrv-surface-subtle: #f8f8f8;     /* táblázatfej, input-ikon */
    --hrv-surface-hover: #f4f4f4;
    --hrv-border: #dddddd;
    --hrv-border-light: #e7e7e7;
    --hrv-border-strong: #c9ccd1;

    /* --- Visszajelző színek (funkcionális, nem márkaszín) --- */
    --hrv-danger: #af2323;
    --hrv-danger-rgb: 175, 35, 35;
    --hrv-danger-soft: #fbe6e6;
    --hrv-success: #1f7a4d;
    --hrv-success-rgb: 31, 122, 77;
    --hrv-success-soft: #ddf3e6;
    --hrv-warning: #b26a00;
    --hrv-warning-rgb: 178, 106, 0;
    --hrv-warning-soft: #fff1d6;
    --hrv-info: #2f5f8f;
    --hrv-info-rgb: 47, 95, 143;
    --hrv-info-soft: #e2edf7;
    --hrv-secondary: #6c757d;

    /* --- Státusz → szín leképezés (badge-ek: .badge-status.status-*) --- */
    --status-new-bg: #e9ecf8;        --status-new-fg: #34418f;      /* Új */
    --status-progress-bg: #fff1d6;   --status-progress-fg: #8a5200; /* Folyamatban */
    --status-picked-bg: #f1e6ef;     --status-picked-fg: #6e4968;   /* Kiszedve (márkalila) */
    --status-delivered-bg: #d8f3ef;  --status-delivered-fg: #0f5f55;/* Kiszállítva */
    --status-paid-bg: #ddf3e6;       --status-paid-fg: #1a6b43;     /* Fizetve */
    --status-cancelled-bg: #fbe6e6;  --status-cancelled-fg: #9a1f1f;/* Sztornó */
    --status-draft-bg: #eceef1;      --status-draft-fg: #4b5563;    /* Piszkozat / Lezárt */

    /* --- Készletszint --- */
    --stock-ok: #1f7a4d;   --stock-ok-soft: #ddf3e6;
    --stock-low: #b26a00;  --stock-low-soft: #fff1d6;
    --stock-none: #af2323; --stock-none-soft: #fbe6e6;

    /* --- Forma: radius, árnyék, térköz --- */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(34, 37, 41, 0.05);
    --shadow-sm: 0 1px 3px rgba(34, 37, 41, 0.08), 0 1px 2px rgba(34, 37, 41, 0.04);
    --shadow: 0 2px 8px rgba(34, 37, 41, 0.08);
    --shadow-lg: 0 8px 24px rgba(34, 37, 41, 0.14);
    --shadow-top: 0 -4px 16px rgba(34, 37, 41, 0.10);
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --focus-ring: 0 0 0 0.2rem rgba(var(--hrv-primary-rgb), 0.22);

    /* --- Tipográfia --- */
    --hrv-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --hrv-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;

    /* --- Layout --- */
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 72px;
    --topbar-height: 70px;
    --topbar-height-mobile: 60px;
    --sticky-bar-height: 84px;
    --touch-target: 48px;
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Sablon-aliasok (régi nevek a tokenekre mutatnak) --- */
    --primary-color: var(--hrv-primary);
    --primary-hover: var(--hrv-primary-hover);
    --border-radius: var(--radius);
    --border-radius-lg: var(--radius-lg);
    --gray-50: var(--hrv-gray-50);
    --gray-100: var(--hrv-gray-100);
    --gray-200: var(--hrv-gray-200);
    --gray-300: var(--hrv-gray-300);
    --gray-500: var(--hrv-gray-500);
    --gray-700: var(--hrv-gray-700);
    --gray-900: var(--hrv-gray-900);

    /* --- Bootstrap 5.3 runtime változók --- */
    --bs-primary: var(--hrv-primary);
    --bs-primary-rgb: var(--hrv-primary-rgb);
    --bs-dark: var(--hrv-dark);
    --bs-dark-rgb: var(--hrv-dark-rgb);
    --bs-danger: var(--hrv-danger);
    --bs-danger-rgb: var(--hrv-danger-rgb);
    --bs-success: var(--hrv-success);
    --bs-success-rgb: var(--hrv-success-rgb);
    --bs-warning: var(--hrv-warning);
    --bs-warning-rgb: var(--hrv-warning-rgb);
    --bs-info: var(--hrv-info);
    --bs-info-rgb: var(--hrv-info-rgb);
    --bs-link-color: var(--hrv-primary);
    --bs-link-color-rgb: var(--hrv-primary-rgb);
    --bs-link-hover-color: var(--hrv-primary-dark);
    --bs-link-hover-color-rgb: 120, 71, 111;
    --bs-font-sans-serif: var(--hrv-font);
    --bs-body-font-family: var(--hrv-font);
    --bs-body-font-size: 1rem;
    --bs-body-color: var(--hrv-text);
    --bs-body-bg: var(--hrv-bg);
    --bs-heading-color: var(--hrv-text-strong);
    --bs-border-color: var(--hrv-border);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-box-shadow-sm: var(--shadow-sm);
    --bs-box-shadow: var(--shadow);
    --bs-box-shadow-lg: var(--shadow-lg);
    --bs-secondary-color: var(--hrv-muted);
    --bs-tertiary-bg: var(--hrv-surface-subtle);
    --bs-focus-ring-color: rgba(var(--hrv-primary-rgb), 0.25);
}

/* ===================== 2. ALAP ===================== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--hrv-font);
    color: var(--hrv-text);
    background: var(--hrv-bg);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--hrv-text-strong);
    font-weight: 600;
    letter-spacing: -0.01em;
}
h1, .h1 { font-size: var(--fs-2xl); }
h2, .h2 { font-size: var(--fs-xl); }
h3, .h3 { font-size: var(--fs-lg); }
h4, .h4 { font-size: 1.0625rem; }
h5, .h5 { font-size: var(--fs-base); }
h6, .h6 { font-size: var(--fs-sm); }
a { color: var(--hrv-primary); text-decoration: none; }
a:hover { color: var(--hrv-primary-dark); }
code, .mono { font-family: var(--hrv-font-mono); font-size: 0.9em; }
.text-muted { color: var(--hrv-muted) !important; }
.text-strong { color: var(--hrv-text-strong) !important; }
.text-primary { color: var(--hrv-primary) !important; }
.bg-primary { background-color: var(--hrv-primary) !important; }
.bg-primary-soft { background-color: var(--hrv-primary-soft) !important; }
.fw-medium { font-weight: 500 !important; }
::selection { background: rgba(var(--hrv-primary-rgb), 0.25); }

/* Vékony, visszafogott görgetősáv (sidebar, táblázat) */
.sidebar, .table-responsive {
    scrollbar-width: thin;
    scrollbar-color: rgba(127, 127, 127, 0.35) transparent;
}
.sidebar::-webkit-scrollbar, .table-responsive::-webkit-scrollbar { width: 6px; height: 6px; }
.sidebar::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb {
    background: rgba(127, 127, 127, 0.35); border-radius: 3px;
}

/* ===================== 3. ALKALMAZÁS-KERET ===================== */
/*  body
      .sidebar-overlay   (csak mobilon)
      aside.sidebar      (fix, 280px / 72px összecsukva / off-canvas mobilon)
      .app-main          (margin-left = sidebar)
        header.topbar    (sticky, 70px)
        main.main-content
*/
.app-main {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left 0.25s ease;
}
body.sidebar-collapsed .app-main { margin-left: var(--sidebar-collapsed-width); }

.main-content { flex: 1; padding: var(--space-5); }
.main-content.has-sticky-bar { padding-bottom: calc(var(--sticky-bar-height) + var(--space-5)); }

/* ----- Sidebar ----- */
.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sidebar-width);
    background: var(--hrv-dark);
    color: rgba(255, 255, 255, 0.78);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.25s ease, transform 0.25s ease;
}
body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); }

.sidebar-brand {
    height: var(--topbar-height);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 var(--space-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--hrv-ink);
}
.sidebar-brand a { display: flex; align-items: center; gap: var(--space-3); color: #fff; min-width: 0; }
.sidebar-brand .brand-logo { height: 34px; width: auto; display: block; }
.sidebar-brand .brand-mark { height: 32px; width: 32px; display: none; }
.sidebar-brand .brand-sub {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    padding-left: var(--space-3);
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    line-height: 1.2;
    white-space: nowrap;
}
body.sidebar-collapsed .sidebar-brand { padding: 0; justify-content: center; }
body.sidebar-collapsed .sidebar-brand .brand-logo,
body.sidebar-collapsed .sidebar-brand .brand-sub { display: none; }
body.sidebar-collapsed .sidebar-brand .brand-mark { display: block; }

.sidebar-nav { flex: 1; padding: var(--space-3) 0 var(--space-4); margin: 0; list-style: none; }
.sidebar-section {
    padding: var(--space-4) var(--space-5) var(--space-2);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    white-space: nowrap;
}
.sidebar-nav .nav-item { margin: 1px var(--space-3); list-style: none; }
.sidebar-nav .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 42px;
    padding: 0.5rem 0.75rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--radius);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.sidebar-nav .nav-link .nav-icon {
    width: 24px;
    flex-shrink: 0;
    text-align: center;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.15s ease;
}
.sidebar-nav .nav-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.sidebar-nav .nav-link:hover .nav-icon { color: #fff; }
.sidebar-nav .nav-link.active {
    background: rgba(var(--hrv-primary-rgb), 0.22);
    color: #fff;
    font-weight: 600;
}
.sidebar-nav .nav-link.active .nav-icon { color: var(--hrv-primary-300); }
.sidebar-nav .nav-link.active::before {
    content: "";
    position: absolute;
    left: -0.75rem; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--hrv-primary-400);
}
.sidebar-nav .nav-link .nav-badge {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.15em 0.55em;
    border-radius: var(--radius-pill);
    background: var(--hrv-primary);
    color: #fff;
}

/* Összecsukott sín: csak ikonok, a csoportfejléc vékony elválasztóvá válik */
body.sidebar-collapsed .sidebar-section {
    padding: 0;
    margin: var(--space-3) var(--space-4);
    height: 1px;
    font-size: 0;
    background: rgba(255, 255, 255, 0.1);
}
body.sidebar-collapsed .sidebar-section:first-child { display: none; }
body.sidebar-collapsed .sidebar-nav .nav-item { margin: 2px var(--space-2); }
body.sidebar-collapsed .sidebar-nav .nav-link { justify-content: center; padding: 0.5rem 0; }
body.sidebar-collapsed .sidebar-nav .nav-link .nav-label,
body.sidebar-collapsed .sidebar-nav .nav-link .nav-badge { display: none; }
body.sidebar-collapsed .sidebar-nav .nav-link.active::before { left: -0.5rem; }

.sidebar-foot {
    flex-shrink: 0;
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.sidebar-collapsed .sidebar-foot { text-align: center; padding-left: 0; padding-right: 0; }
body.sidebar-collapsed .sidebar-foot .foot-text { display: none; }

.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(34, 37, 41, 0.55);
    z-index: 1035;
    backdrop-filter: blur(1px);
}

/* ----- Fejléc (topbar) ----- */
.topbar {
    position: sticky; top: 0;
    height: var(--topbar-height);
    background: var(--hrv-surface);
    border-bottom: 1px solid var(--hrv-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0 var(--space-5);
    z-index: 1030;
}
.topbar-left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
/* Oldal-súgó: „i” gomb a címsor jobb végén; tartalma a PageHelp szekcióból, SweetAlert2 ablakban */
.page-help-btn {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--hrv-border-light); border-radius: 50%;
    background: var(--hrv-surface); color: var(--hrv-primary);
    font-size: 0.95rem; cursor: pointer; flex-shrink: 0;
    transition: background-color .15s, color .15s;
}
.page-help-btn:hover, .page-help-btn:focus-visible { background: var(--hrv-primary); color: #fff; }
.hrv-help-popup .swal2-html-container { text-align: left; font-size: var(--fs-sm, .9rem); line-height: 1.55; }
.hrv-help-popup .swal2-html-container h6 { font-weight: 600; margin: 1rem 0 .35rem; color: var(--hrv-text-strong); }
.hrv-help-popup .swal2-html-container h6:first-child { margin-top: 0; }
.hrv-help-popup .swal2-html-container p:last-child, .hrv-help-popup .swal2-html-container ul:last-child { margin-bottom: 0; }
.topbar .page-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--hrv-text-strong);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: var(--space-2); }
.page-actions .btn { white-space: nowrap; }

.sidebar-toggle {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0;
    font-size: 1.125rem;
    color: var(--hrv-gray-700);
    border-radius: var(--radius);
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition);
}
.sidebar-toggle:hover { background: var(--hrv-gray-100); color: var(--hrv-text-strong); }
.sidebar-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Felhasználó-menü */
.user-menu .dropdown-toggle {
    display: flex; align-items: center; gap: 10px;
    background: none; border: 0;
    padding: 6px 8px 6px 6px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.9rem;
    transition: var(--transition);
}
.user-menu .dropdown-toggle::after { display: none; }
.user-menu .dropdown-toggle:hover { background: var(--hrv-gray-100); }
.user-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--hrv-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.95rem;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--hrv-surface), 0 0 0 3px var(--hrv-primary-200);
}
.user-menu .user-info { display: flex; flex-direction: column; line-height: 1.25; text-align: left; min-width: 0; }
.user-menu .user-name { font-weight: 600; font-size: 0.85rem; color: var(--hrv-text-strong); white-space: nowrap; }
.user-menu .user-role { font-size: 0.72rem; color: var(--hrv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.user-menu .fa-chevron-down { font-size: 0.65rem; color: var(--hrv-gray-400); }
.user-menu .dropdown-menu {
    min-width: 250px;
    padding: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--hrv-border-light);
    overflow: hidden;
    margin-top: 8px !important;
}
.user-dropdown-header { padding: 14px 16px; background: var(--hrv-surface-subtle); }
.user-dropdown-header strong { display: block; font-size: 0.95rem; color: var(--hrv-text-strong); margin-bottom: 2px; }
.user-dropdown-header .user-email, .user-dropdown-header .user-role-label { font-size: 0.78rem; color: var(--hrv-muted); display: block; word-break: break-all; }
.user-menu .dropdown-item { padding: 10px 16px; font-size: 0.88rem; color: var(--hrv-gray-700); display: flex; align-items: center; gap: 10px; }
.user-menu .dropdown-item i { width: 18px; text-align: center; color: var(--hrv-gray-500); }
.user-menu .dropdown-item:hover { background: var(--hrv-primary-50); color: var(--hrv-primary-dark); }
.user-menu .dropdown-item:hover i { color: var(--hrv-primary); }

/* Oldalfejléc a tartalomban (opcionális: cím + leírás a kártyák felett) */
.page-header { margin-bottom: var(--space-5); }
.page-header h2 { margin-bottom: var(--space-1); }
.page-header .page-lead { color: var(--hrv-muted); margin: 0; }

/* ===================== 4. KÁRTYÁK ===================== */
.card {
    border: 1px solid var(--hrv-border-light);
    border-radius: var(--radius-lg);
    background: var(--hrv-surface);
    box-shadow: var(--shadow-sm);
}
.card-header {
    background: var(--hrv-surface);
    border-bottom: 1px solid var(--hrv-border-light);
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
.card-header .card-title { font-size: var(--fs-base); font-weight: 600; color: var(--hrv-text-strong); margin: 0; display: flex; align-items: center; }
.card-header .card-title i { color: var(--hrv-primary); }
.card-title { font-weight: 600; color: var(--hrv-text-strong); }
.card-footer { background: var(--hrv-surface-subtle); border-top: 1px solid var(--hrv-border-light); border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important; }
.card.card-flush .card-body { padding: 0; }

/* Mutatószám-kártya (irányítópult) */
.stat-card { display: flex; flex-direction: row; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.stat-card .stat-icon {
    width: 48px; height: 48px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius);
    background: var(--hrv-primary-soft);
    color: var(--hrv-primary);
    font-size: 1.25rem;
}
.stat-card .stat-value { font-size: var(--fs-xl); font-weight: 600; color: var(--hrv-text-strong); line-height: 1.1; }
.stat-card .stat-label { font-size: var(--fs-sm); color: var(--hrv-muted); }

/* ===================== 5. GOMBOK ===================== */
.btn {
    font-weight: 500;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    line-height: 1.4;
    padding: 0.5rem 1rem;
    transition: var(--transition);
}
.btn i { line-height: 1; }
.btn i.me-1 { margin-right: 0 !important; }      /* a gap kezeli a távolságot */
.btn-sm { padding: 0.3rem 0.7rem; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.btn-lg { padding: 0.75rem 1.5rem; font-size: var(--fs-base); }
.btn:focus-visible { box-shadow: var(--focus-ring); }

.btn-primary {
    --bs-btn-bg: var(--hrv-primary); --bs-btn-border-color: var(--hrv-primary);
    --bs-btn-hover-bg: var(--hrv-primary-hover); --bs-btn-hover-border-color: var(--hrv-primary-hover);
    --bs-btn-active-bg: var(--hrv-primary-dark); --bs-btn-active-border-color: var(--hrv-primary-dark);
    --bs-btn-disabled-bg: var(--hrv-primary-300); --bs-btn-disabled-border-color: var(--hrv-primary-300);
    --bs-btn-focus-shadow-rgb: var(--hrv-primary-rgb);
    box-shadow: 0 1px 2px rgba(var(--hrv-primary-rgb), 0.25);
}
.btn-outline-primary {
    --bs-btn-color: var(--hrv-primary); --bs-btn-border-color: var(--hrv-primary-300);
    --bs-btn-hover-bg: var(--hrv-primary-soft); --bs-btn-hover-color: var(--hrv-primary-dark); --bs-btn-hover-border-color: var(--hrv-primary);
    --bs-btn-active-bg: var(--hrv-primary); --bs-btn-active-border-color: var(--hrv-primary);
    --bs-btn-focus-shadow-rgb: var(--hrv-primary-rgb);
}
.btn-secondary {
    --bs-btn-bg: var(--hrv-gray-700); --bs-btn-border-color: var(--hrv-gray-700);
    --bs-btn-hover-bg: var(--hrv-gray-800); --bs-btn-hover-border-color: var(--hrv-gray-800);
}
.btn-outline-secondary {
    --bs-btn-color: var(--hrv-gray-700); --bs-btn-border-color: var(--hrv-border);
    --bs-btn-hover-bg: var(--hrv-gray-100); --bs-btn-hover-color: var(--hrv-text-strong); --bs-btn-hover-border-color: var(--hrv-border-strong);
    --bs-btn-active-bg: var(--hrv-gray-200); --bs-btn-active-color: var(--hrv-text-strong); --bs-btn-active-border-color: var(--hrv-border-strong);
}
.btn-danger {
    --bs-btn-bg: var(--hrv-danger); --bs-btn-border-color: var(--hrv-danger);
    --bs-btn-hover-bg: #961d1d; --bs-btn-hover-border-color: #961d1d;
    --bs-btn-active-bg: #7f1818; --bs-btn-active-border-color: #7f1818;
}
.btn-outline-danger {
    --bs-btn-color: var(--hrv-danger); --bs-btn-border-color: #e8b4b4;
    --bs-btn-hover-bg: var(--hrv-danger-soft); --bs-btn-hover-color: var(--hrv-danger); --bs-btn-hover-border-color: var(--hrv-danger);
    --bs-btn-active-bg: var(--hrv-danger); --bs-btn-active-border-color: var(--hrv-danger);
}
.btn-success {
    --bs-btn-bg: var(--hrv-success); --bs-btn-border-color: var(--hrv-success);
    --bs-btn-hover-bg: #19653f; --bs-btn-hover-border-color: #19653f;
    --bs-btn-active-bg: #145233; --bs-btn-active-border-color: #145233;
}
.btn-light {
    --bs-btn-bg: var(--hrv-surface); --bs-btn-border-color: var(--hrv-border);
    --bs-btn-color: var(--hrv-gray-700);
    --bs-btn-hover-bg: var(--hrv-gray-100); --bs-btn-hover-border-color: var(--hrv-border-strong);
}
.btn-ghost {
    --bs-btn-color: var(--hrv-gray-700); --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--hrv-gray-100); --bs-btn-hover-color: var(--hrv-text-strong);
    --bs-btn-active-bg: var(--hrv-gray-200);
}
.btn-icon { width: 38px; height: 38px; padding: 0; }
.btn-icon.btn-sm { width: 31px; height: 31px; }

/* Érintőbarát gombok (raktári telefonos képernyők) */
.btn-touch { min-height: var(--touch-target); padding: 0.75rem 1.25rem; font-size: var(--fs-base); font-weight: 600; }
.btn-xl { min-height: 56px; padding: 0.875rem 1.5rem; font-size: var(--fs-lg); font-weight: 600; border-radius: var(--radius-lg); }

/* ===================== 6. ŰRLAPOK ===================== */
.form-label {
    font-weight: 500;
    color: var(--hrv-gray-700);
    margin-bottom: 0.375rem;
    font-size: var(--fs-sm);
}
.form-label .text-danger { font-weight: 600; }
.form-control, .form-select {
    border: 1px solid var(--hrv-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.875rem;
    min-height: 42px;
    color: var(--hrv-text-strong);
    background-color: var(--hrv-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control::placeholder { color: var(--hrv-gray-400); }
.form-control:focus, .form-select:focus {
    border-color: var(--hrv-primary);
    box-shadow: var(--focus-ring);
}
.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color: var(--hrv-surface-subtle);
    color: var(--hrv-gray-600);
}
.form-control-sm { min-height: 34px; padding: 0.25rem 0.625rem; border-radius: var(--radius-sm); }
.form-select-sm { min-height: 34px; padding: 0.25rem 2rem 0.25rem 0.625rem; border-radius: var(--radius-sm); }
.form-control-lg, .form-select-lg { min-height: 52px; font-size: var(--fs-lg); border-radius: var(--radius-lg); }
textarea.form-control { min-height: 96px; }
.form-text { color: var(--hrv-muted); font-size: var(--fs-xs); }

.input-group-text {
    background: var(--hrv-surface-subtle);
    border: 1px solid var(--hrv-border);
    color: var(--hrv-gray-500);
    min-width: 44px;
    justify-content: center;
    border-radius: var(--radius);
}
.input-group:focus-within .input-group-text { border-color: var(--hrv-primary); color: var(--hrv-primary); }
.input-group .form-control.is-invalid ~ .invalid-feedback,
.input-group .form-select.is-invalid ~ .invalid-feedback { display: block; width: 100%; }

.form-check-input {
    width: 1.15em; height: 1.15em;
    margin-top: 0.175em;
    border-radius: 4px;
    border: 2px solid var(--hrv-gray-300);
    cursor: pointer;
}
.form-check-input:checked { background-color: var(--hrv-primary); border-color: var(--hrv-primary); }
.form-check-input:focus { border-color: var(--hrv-primary); box-shadow: var(--focus-ring); }
.form-check-label { cursor: pointer; }
.form-switch .form-check-input { width: 2.2em; height: 1.2em; border-radius: 2em; }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23cfa8c6'/%3e%3c/svg%3e"); }

fieldset:disabled .btn { pointer-events: none; }

/* Validáció */
.field-validation-error, .text-danger.small { color: var(--hrv-danger); font-size: var(--fs-xs); display: block; margin-top: 0.25rem; }
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid { border-color: var(--hrv-danger); background-image: none; }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 0.2rem rgba(var(--hrv-danger-rgb), 0.2); }
.invalid-feedback { color: var(--hrv-danger); font-size: var(--fs-xs); }
.validation-summary-errors ul { margin: 0; padding-left: 1.2rem; }
.validation-summary-errors { background: var(--hrv-danger-soft); border: 1px solid #f0c4c4; color: var(--hrv-danger); border-radius: var(--radius); padding: 0.75rem 1rem; font-size: var(--fs-sm); }
.validation-summary-valid { display: none; }

/* Űrlap-lábléc (Vissza / Mentés) */
.form-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* ===================== 7. TÁBLÁZAT ÉS GRID ===================== */
.table { --bs-table-color: var(--hrv-text); --bs-table-hover-bg: var(--hrv-primary-50); --bs-table-hover-color: var(--hrv-text); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 0.75rem 1rem; border-bottom-color: var(--hrv-border-light); }
.table thead th, .table-light th {
    --bs-table-bg: var(--hrv-surface-subtle);
    background: var(--hrv-surface-subtle);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hrv-gray-600);
    white-space: nowrap;
    border-bottom: 1px solid var(--hrv-border-light);
}
.table td { vertical-align: middle; font-size: var(--fs-sm); }
.table td:first-child { color: var(--hrv-text-strong); font-weight: 500; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .btn-group .btn { box-shadow: none; }
.table .text-end .btn-group { justify-content: flex-end; }
.sort-icon { cursor: pointer; user-select: none; color: inherit !important; display: inline-flex; align-items: center; gap: 0.25rem; }
.sort-icon:hover { color: var(--hrv-primary) !important; }
.sort-icon .fa-sort { opacity: 0.35; }
.table th .sort-icon .fa-sort-up, .table th .sort-icon .fa-sort-down { color: var(--hrv-primary); }
.table-num, .text-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Grid-kártya: szűrősor + lista + lábléc */
.grid-footer {
    background: var(--hrv-surface-subtle);
    border-top: 1px solid var(--hrv-border-light) !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    font-size: var(--fs-sm);
}
.grid-footer .form-select-sm { min-height: 32px; }
.pagination { --bs-pagination-color: var(--hrv-gray-700); --bs-pagination-border-color: var(--hrv-border-light); --bs-pagination-hover-bg: var(--hrv-primary-50); --bs-pagination-hover-color: var(--hrv-primary-dark); --bs-pagination-hover-border-color: var(--hrv-border-light); --bs-pagination-focus-box-shadow: var(--focus-ring); --bs-pagination-focus-bg: var(--hrv-primary-50); --bs-pagination-focus-color: var(--hrv-primary-dark); --bs-pagination-active-bg: var(--hrv-primary); --bs-pagination-active-border-color: var(--hrv-primary); --bs-pagination-disabled-color: var(--hrv-gray-400); --bs-pagination-disabled-border-color: var(--hrv-border-light); gap: 4px; }
.pagination .page-link { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm) !important; font-size: var(--fs-sm); font-weight: 500; padding: 0 0.5rem; }
.pagination .page-item.active .page-link { font-weight: 600; }

/* Szűrősor (a lista feletti kártya) */
.filter-card .card-body { padding: 1rem 1.25rem; }
.filter-card .form-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--hrv-muted); margin-bottom: 0.25rem; }

/* Üres állapot */
.empty-state { text-align: center; padding: var(--space-6) var(--space-4); color: var(--hrv-muted); }
.empty-state .empty-icon {
    width: 64px; height: 64px; margin: 0 auto var(--space-4);
    border-radius: 50%;
    background: var(--hrv-primary-50);
    color: var(--hrv-primary-300);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
}
.empty-state .empty-title { font-weight: 600; color: var(--hrv-text-strong); margin-bottom: var(--space-1); }
.empty-state p { margin: 0; font-size: var(--fs-sm); }
.empty-state .btn { margin-top: var(--space-4); }

/* Komponens-betöltő */
.component-loader { display: flex; justify-content: center; align-items: center; padding: 3rem; }
.spinner-border.text-primary { color: var(--hrv-primary) !important; }

/* Jogosultság-mátrix */
.permission-matrix .form-check-input { float: none; margin: 0; cursor: pointer; }
.permission-matrix .form-check-input:disabled { cursor: default; }
.permission-matrix .permission-group-row td { background: var(--hrv-surface-subtle) !important; font-size: var(--fs-xs); letter-spacing: 0.06em; }

/* ===================== 8. BADGE-EK, STÁTUSZOK ===================== */
.badge { font-weight: 600; letter-spacing: 0.01em; border-radius: var(--radius-sm); padding: 0.35em 0.6em; }
.badge-active { background: var(--hrv-success-soft); color: var(--hrv-success); }
.badge-inactive { background: var(--hrv-gray-200); color: var(--hrv-gray-700); }

/* Státusz-pötty badge: <span class="badge-status status-new">Új</span> */
.badge-status {
    --st-bg: var(--status-draft-bg); --st-fg: var(--status-draft-fg);
    display: inline-flex; align-items: center; gap: 0.4em;
    padding: 0.3em 0.7em 0.3em 0.6em;
    border-radius: var(--radius-pill);
    background: var(--st-bg); color: var(--st-fg);
    font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
    white-space: nowrap;
}
.badge-status::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-status.badge-lg { font-size: var(--fs-sm); padding: 0.4em 0.9em 0.4em 0.75em; }
.status-new       { --st-bg: var(--status-new-bg);       --st-fg: var(--status-new-fg); }
.status-progress  { --st-bg: var(--status-progress-bg);  --st-fg: var(--status-progress-fg); }
.status-picked    { --st-bg: var(--status-picked-bg);    --st-fg: var(--status-picked-fg); }
.status-delivered { --st-bg: var(--status-delivered-bg); --st-fg: var(--status-delivered-fg); }
.status-paid      { --st-bg: var(--status-paid-bg);      --st-fg: var(--status-paid-fg); }
.status-cancelled { --st-bg: var(--status-cancelled-bg); --st-fg: var(--status-cancelled-fg); }
.status-draft     { --st-bg: var(--status-draft-bg);     --st-fg: var(--status-draft-fg); }

/* Készletszint-jelző: <span class="stock-pill stock-low">12 db</span> */
.stock-pill {
    display: inline-flex; align-items: center; gap: 0.4em;
    padding: 0.25em 0.65em;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm); font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.stock-pill::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.stock-ok   { background: var(--stock-ok-soft);   color: var(--stock-ok); }
.stock-low  { background: var(--stock-low-soft);  color: var(--stock-low); }
.stock-none { background: var(--stock-none-soft); color: var(--stock-none); }
.stock-always { background: var(--hrv-info-soft); color: var(--hrv-info); }

/* Alert-ek */
.alert { border-radius: var(--radius); border-width: 1px; font-size: var(--fs-sm); }
.alert-info { --bs-alert-bg: var(--hrv-info-soft); --bs-alert-color: var(--hrv-info); --bs-alert-border-color: #c6d9ec; }
.alert-warning { --bs-alert-bg: var(--hrv-warning-soft); --bs-alert-color: var(--hrv-warning); --bs-alert-border-color: #f1d9a8; }
.alert-danger { --bs-alert-bg: var(--hrv-danger-soft); --bs-alert-color: var(--hrv-danger); --bs-alert-border-color: #f0c4c4; }
.alert-success { --bs-alert-bg: var(--hrv-success-soft); --bs-alert-color: var(--hrv-success); --bs-alert-border-color: #b9e3c9; }

/* Modal, dropdown, tooltip */
.modal-content { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom-color: var(--hrv-border-light); padding: 1rem 1.25rem; }
.modal-title { font-weight: 600; }
.modal-footer { border-top-color: var(--hrv-border-light); background: var(--hrv-surface-subtle); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.dropdown-menu { border-radius: var(--radius); border-color: var(--hrv-border-light); box-shadow: var(--shadow); font-size: var(--fs-sm); }
.dropdown-item:active { background: var(--hrv-primary); }
.nav-tabs { border-bottom-color: var(--hrv-border-light); }
.nav-tabs .nav-link { color: var(--hrv-gray-600); font-weight: 500; border: 0; border-bottom: 2px solid transparent; padding: 0.625rem 1rem; }
.nav-tabs .nav-link:hover { color: var(--hrv-text-strong); border-color: transparent; }
.nav-tabs .nav-link.active { color: var(--hrv-primary); background: transparent; border-bottom-color: var(--hrv-primary); }
.progress { height: 8px; border-radius: var(--radius-pill); background: var(--hrv-gray-200); }
.progress-bar { background-color: var(--hrv-primary); }

/* ===================== 9. SWEETALERT2 TÉMA ===================== */
.swal2-popup {
    font-family: var(--hrv-font);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem 1.5rem;
    color: var(--hrv-text);
    box-shadow: var(--shadow-lg);
}
.swal2-title { font-size: var(--fs-xl); font-weight: 600; color: var(--hrv-text-strong); }
.swal2-html-container { font-size: var(--fs-base); color: var(--hrv-text); line-height: 1.55; }
.swal2-icon { border-width: 3px; margin-top: 0.5rem; }
.swal2-icon.swal2-warning { border-color: var(--hrv-warning); color: var(--hrv-warning); }
.swal2-icon.swal2-question { border-color: var(--hrv-primary-300); color: var(--hrv-primary); }
.swal2-icon.swal2-error { border-color: #e8b4b4; }
.swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--hrv-danger); }
.swal2-icon.swal2-success { border-color: #b9e3c9; }
.swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--hrv-success); }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(var(--hrv-success-rgb), 0.3); }
.swal2-actions { gap: 0.5rem; margin-top: 1.5rem; }
.swal2-styled { font-family: var(--hrv-font); font-weight: 600; border-radius: var(--radius) !important; padding: 0.625rem 1.375rem; font-size: var(--fs-sm); min-width: 110px; margin: 0; }
.swal2-styled:focus { box-shadow: var(--focus-ring) !important; }
.swal2-styled.swal2-cancel { background: var(--hrv-surface) !important; color: var(--hrv-gray-700) !important; border: 1px solid var(--hrv-border) !important; }
.swal2-styled.swal2-cancel:hover { background: var(--hrv-gray-100) !important; }

/* Toast: keskeny, színes bal szegély a típus szerint */
.swal2-container.swal2-top-end > .swal2-popup.swal2-toast,
.swal2-popup.swal2-toast {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--hrv-primary);
    background: var(--hrv-surface);
    font-size: var(--fs-sm);
}
.swal2-popup.swal2-toast .swal2-title { font-size: var(--fs-sm); font-weight: 500; color: var(--hrv-text-strong); margin: 0 0.5rem; }
.swal2-popup.swal2-toast .swal2-icon { margin: 0; width: 1.6em; height: 1.6em; min-width: 1.6em; }
.swal2-popup.swal2-toast.hrv-toast-success { border-left-color: var(--hrv-success); }
.swal2-popup.swal2-toast.hrv-toast-error { border-left-color: var(--hrv-danger); }
.swal2-popup.swal2-toast.hrv-toast-warning { border-left-color: var(--hrv-warning); }
.swal2-popup.swal2-toast.hrv-toast-info { border-left-color: var(--hrv-info); }
.swal2-popup.swal2-toast .swal2-timer-progress-bar { background: rgba(var(--hrv-primary-rgb), 0.35); }

/* ===================== 10. BEJELENTKEZÉS ===================== */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5) var(--space-4);
    background:
        radial-gradient(900px 500px at 85% -10%, rgba(var(--hrv-primary-rgb), 0.18), transparent 60%),
        radial-gradient(700px 400px at -10% 110%, rgba(var(--hrv-dark-rgb), 0.10), transparent 60%),
        var(--hrv-bg);
}
.login-container { width: 100%; max-width: 440px; }
.login-card {
    background: var(--hrv-surface);
    border-radius: 16px;
    border: 1px solid var(--hrv-border-light);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 2.25rem 2rem;
    position: relative;
    overflow: hidden;
}
.login-card::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--hrv-primary-400), var(--hrv-primary), var(--hrv-primary-deep));
}
.login-logo { text-align: center; margin-bottom: 1.75rem; }
.login-logo img { height: 56px; width: auto; max-width: 100%; }
.login-logo .login-app-name {
    display: inline-block;
    margin-top: 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hrv-muted);
}
.login-card h4 { font-size: var(--fs-lg); margin-bottom: 1.25rem; }
.login-card .form-control { min-height: 46px; }
.login-card .btn-primary { min-height: 46px; font-weight: 600; }
.login-foot { text-align: center; margin-top: 1.25rem; font-size: var(--fs-xs); color: var(--hrv-muted); }

/* ===================== 11. MOBIL RAKTÁRI KOMPONENSEK ===================== */
/*  Telefonos feladat-képernyő (kiszedés, bevételezés, leltár):
      .task-screen                  – képernyő-wrapper (a progress JS ebben keresi a listát)
        .task-header                – rendelésfej kártya (partner, azonosító, meta, státusz)
        .task-progress              – állapotsor: "3 / 8 tétel" + csík
        .mobile-task-list           – tétellista (kártya, elválasztott sorok)
          label.task-row[.is-done]  – egy tétel, teljes sor érinthető (min. 64px)
            .task-check > input     – nagy pipa (28px, 48px-es érintési cél)
            .task-body > .task-title / .task-meta
            .task-qty > .qty / .unit
        .sticky-action-bar          – alul rögzített fő művelet (body/main: .has-sticky-bar)
      .qty-stepper                  – [−] [mennyiség] [+] 48px gombokkal
*/
.task-screen { max-width: 720px; margin: 0 auto; }

.task-header {
    background: var(--hrv-surface);
    border: 1px solid var(--hrv-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4) var(--space-4) var(--space-3);
    margin-bottom: var(--space-3);
}
.task-header .task-kicker { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hrv-muted); }
.task-header .task-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.task-header .task-id { font-size: var(--fs-xl); font-weight: 600; color: var(--hrv-text-strong); line-height: 1.2; font-variant-numeric: tabular-nums; }
.task-header .task-partner { font-size: var(--fs-base); color: var(--hrv-text-strong); font-weight: 500; margin-top: 2px; }
.task-header .task-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--hrv-muted); }
.task-header .task-meta-row i { width: 16px; text-align: center; color: var(--hrv-primary); margin-right: 4px; }

.task-progress { display: flex; align-items: center; gap: var(--space-3); margin: 0 var(--space-1) var(--space-3); font-size: var(--fs-sm); color: var(--hrv-muted); }
.task-progress .task-progress-text { font-weight: 600; color: var(--hrv-text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.task-progress .progress { flex: 1; height: 10px; }
.task-progress.is-complete .progress-bar { background-color: var(--hrv-success); }
.task-progress.is-complete .task-progress-text { color: var(--hrv-success); }

.mobile-task-list {
    background: var(--hrv-surface);
    border: 1px solid var(--hrv-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin: 0; padding: 0; list-style: none;
}
.task-row {
    display: grid;
    grid-template-columns: var(--touch-target) 1fr auto;
    align-items: center;
    gap: var(--space-2);
    min-height: 68px;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--hrv-border-light);
    cursor: pointer;
    margin: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
    background: var(--hrv-surface);
}
.task-row:last-child { border-bottom: 0; }
.task-row:active { background: var(--hrv-primary-50); }
.task-row .task-check {
    width: var(--touch-target); height: var(--touch-target);
    display: flex; align-items: center; justify-content: center;
}
.task-row .task-check input {
    appearance: none; -webkit-appearance: none;
    width: 28px; height: 28px; margin: 0;
    border: 2px solid var(--hrv-gray-400);
    border-radius: 8px;
    background: var(--hrv-surface);
    display: grid; place-content: center;
    cursor: pointer;
    transition: var(--transition);
}
.task-row .task-check input::before {
    content: "";
    width: 14px; height: 14px;
    transform: scale(0);
    transition: transform 0.12s ease-in-out;
    background: #fff;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.task-row .task-check input:checked { background: var(--hrv-success); border-color: var(--hrv-success); }
.task-row .task-check input:checked::before { transform: scale(1); }
.task-row .task-check input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.task-row .task-body { min-width: 0; }
.task-row .task-title { font-size: var(--fs-base); font-weight: 600; color: var(--hrv-text-strong); line-height: 1.3; }
.task-row .task-meta { font-size: var(--fs-sm); color: var(--hrv-muted); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 2px var(--space-3); }
.task-row .task-meta .task-loc { color: var(--hrv-primary-dark); font-weight: 600; font-variant-numeric: tabular-nums; }
.task-row .task-qty { text-align: right; padding-left: var(--space-2); white-space: nowrap; }
.task-row .task-qty .qty { font-size: 1.5rem; font-weight: 600; color: var(--hrv-text-strong); line-height: 1; font-variant-numeric: tabular-nums; }
.task-row .task-qty .unit { font-size: var(--fs-xs); color: var(--hrv-muted); font-weight: 500; margin-left: 2px; }
.task-row .task-qty .qty-expected { display: block; font-size: var(--fs-xs); color: var(--hrv-muted); margin-top: 2px; }
.task-row.is-done { background: var(--hrv-success-soft); }
.task-row.is-done .task-title { color: var(--hrv-gray-600); text-decoration: line-through; text-decoration-color: var(--hrv-gray-400); }
.task-row.is-done .task-qty .qty { color: var(--hrv-success); }
.task-row.is-warning .task-qty .qty { color: var(--hrv-warning); }
.task-row.is-missing .task-qty .qty { color: var(--hrv-danger); }
.task-row.is-missing { background: #fff7f7; }

/* Alul rögzített műveletsáv (fő gomb + opcionális másodlagos) */
.sticky-action-bar {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 1025;
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--hrv-border-light);
    box-shadow: var(--shadow-top);
    transition: left 0.25s ease;
}
.sticky-action-bar .btn { flex: 1; }
.sticky-action-bar .btn.btn-icon, .sticky-action-bar .btn-secondary-action { flex: 0 0 auto; min-width: 56px; }
.sticky-action-bar .bar-summary { flex: 1; font-size: var(--fs-sm); color: var(--hrv-muted); }
.sticky-action-bar .bar-summary strong { display: block; font-size: var(--fs-base); color: var(--hrv-text-strong); }
@media (min-width: 992px) {
    .sticky-action-bar { left: var(--sidebar-width); }
    body.sidebar-collapsed .sticky-action-bar { left: var(--sidebar-collapsed-width); }
    .sticky-action-bar .btn { flex: 0 1 320px; }
    .sticky-action-bar { justify-content: flex-end; }
}

/* Mennyiség-léptető (bevételezés, leltár) */
.qty-stepper {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--hrv-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--hrv-surface);
}
.qty-stepper .qty-btn {
    width: var(--touch-target); min-height: var(--touch-target);
    border: 0; background: var(--hrv-surface-subtle);
    color: var(--hrv-primary); font-size: 1.125rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}
.qty-stepper .qty-btn:hover { background: var(--hrv-primary-50); }
.qty-stepper .qty-btn:active { background: var(--hrv-primary-100); }
.qty-stepper .qty-btn:disabled { color: var(--hrv-gray-400); cursor: default; }
.qty-stepper input {
    width: 72px; border: 0; text-align: center;
    font-size: var(--fs-lg); font-weight: 600; color: var(--hrv-text-strong);
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    border-left: 1px solid var(--hrv-border-light); border-right: 1px solid var(--hrv-border-light);
}
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper input:focus { outline: none; background: var(--hrv-primary-50); }
.qty-stepper.qty-stepper-block { display: flex; }
.qty-stepper.qty-stepper-block input { flex: 1; }

/* Vonalkód / keresőmező raktári képernyőn */
.scan-field .input-group-text { background: var(--hrv-primary-soft); color: var(--hrv-primary-dark); border-color: var(--hrv-primary-200); }
.scan-field .form-control { font-size: var(--fs-lg); }

/* Feladatkártya-lista (pl. kiszedendő rendelések listája telefonon) */
.task-card-list { display: grid; gap: var(--space-3); }
.task-card {
    display: block;
    background: var(--hrv-surface);
    border: 1px solid var(--hrv-border-light);
    border-left: 4px solid var(--hrv-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-3) var(--space-4);
    color: inherit;
    transition: var(--transition);
}
.task-card:hover { box-shadow: var(--shadow); color: inherit; border-color: var(--hrv-primary-200); border-left-color: var(--hrv-primary); }
.task-card .task-card-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.task-card .task-card-id { font-weight: 600; color: var(--hrv-text-strong); font-variant-numeric: tabular-nums; }
.task-card .task-card-title { font-size: var(--fs-base); color: var(--hrv-text-strong); margin-top: 2px; }
.task-card .task-card-meta { font-size: var(--fs-sm); color: var(--hrv-muted); margin-top: var(--space-1); display: flex; flex-wrap: wrap; gap: 2px var(--space-3); }

/* ===================== 12. RESZPONZÍV ===================== */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); width: min(var(--sidebar-width), 86vw); box-shadow: none; }
    .sidebar.show { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .sidebar-overlay.show { display: block; }
    .app-main, body.sidebar-collapsed .app-main { margin-left: 0; }
    /* Mobilon nincs összecsukott sín – mindig a teljes menü csúszik be */
    body.sidebar-collapsed .sidebar { width: min(var(--sidebar-width), 86vw); }
    body.sidebar-collapsed .sidebar-brand { padding: 0 var(--space-5); justify-content: flex-start; }
    body.sidebar-collapsed .sidebar-brand .brand-logo, body.sidebar-collapsed .sidebar-brand .brand-sub { display: block; }
    body.sidebar-collapsed .sidebar-brand .brand-mark { display: none; }
    body.sidebar-collapsed .sidebar-section { padding: var(--space-4) var(--space-5) var(--space-2); margin: 0; height: auto; font-size: 0.6875rem; background: none; }
    body.sidebar-collapsed .sidebar-section:first-child { display: block; }
    body.sidebar-collapsed .sidebar-nav .nav-item { margin: 1px var(--space-3); }
    body.sidebar-collapsed .sidebar-nav .nav-link { justify-content: flex-start; padding: 0.5rem 0.75rem; }
    body.sidebar-collapsed .sidebar-nav .nav-link .nav-label, body.sidebar-collapsed .sidebar-nav .nav-link .nav-badge { display: inline; }
    body.sidebar-collapsed .sidebar-foot { text-align: left; padding: var(--space-3) var(--space-5); }
    body.sidebar-collapsed .sidebar-foot .foot-text { display: inline; }

    .topbar { height: var(--topbar-height-mobile); padding: 0 var(--space-3); }
    .user-menu .user-info, .user-menu .fa-chevron-down { display: none; }
    .user-avatar { width: 36px; height: 36px; }
    .main-content { padding: var(--space-4) var(--space-3); }
    .sticky-action-bar { left: 0; }
}

@media (max-width: 767.98px) {
    .topbar .page-title { font-size: var(--fs-base); }
    /* Fejléc-gombok: csak ikon marad, a felirat (<span class="btn-label">) elrejtve */
    .page-actions .btn .btn-label, .navbar-page-actions .btn span { display: none; }
    .page-actions .btn { padding-left: 0.6rem; padding-right: 0.6rem; }
    .page-actions .btn i.me-1 { margin: 0 !important; }
    .card-body { padding: 1rem; }
    .form-actions .btn { flex: 1; }

    /* Táblázat → kártyák (minden _Grid-lista automatikusan: .responsive-table) */
    .responsive-table thead { display: none; }
    .responsive-table, .responsive-table tbody { display: block; width: 100%; }
    .responsive-table tr {
        display: block;
        margin: 0.75rem;
        padding: 0.5rem 1rem;
        border: 1px solid var(--hrv-border-light);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        background: var(--hrv-surface);
    }
    .responsive-table tr:first-child { margin-top: 0.75rem; }
    .responsive-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.5rem 0 !important;
        border: 0 !important;
        border-bottom: 1px dashed var(--hrv-border-light) !important;
        font-size: var(--fs-sm);
        text-align: right;
    }
    .responsive-table td:last-child { border-bottom: 0 !important; }
    .responsive-table td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: var(--fs-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--hrv-muted);
        text-align: left;
    }
    .responsive-table td[data-label=""]::before { display: none; }
    .responsive-table td:first-child { font-size: var(--fs-base); }
    .responsive-table td:not([data-label]) { justify-content: flex-end; padding-top: 0.75rem !important; }
    .responsive-table td:not([data-label]) .btn-group { gap: 0.5rem; }
    .responsive-table td:not([data-label]) .btn-group .btn {
        border-radius: var(--radius-sm) !important;
        min-width: var(--touch-target); min-height: 40px;
    }
    .responsive-table tr.empty-row { border: 0; box-shadow: none; background: transparent; }
    .responsive-table tr.empty-row td { justify-content: center; }
    .grid-footer { flex-direction: column; align-items: stretch !important; text-align: center; }
    .grid-footer > div { display: flex; justify-content: center; }

    .task-row .task-qty .qty { font-size: 1.625rem; }
    .main-content.has-sticky-bar { padding-bottom: calc(var(--sticky-bar-height) + var(--space-6)); }
}

@media print {
    .sidebar, .topbar, .sticky-action-bar, .sidebar-overlay, .page-actions { display: none !important; }
    .app-main { margin-left: 0; }
    .main-content { padding: 0; }
    .card { box-shadow: none; border-color: #bbb; }
}