/* ===== Témák: világos (alap) és sötét. A színek változókból jönnek, a Bootstrap sötét módját a [data-bs-theme=dark] kapcsolja. ===== */
:root {
  --sb-w: 252px; --brand: #1d4ed8; --brand-ink: #fff;
  --bg: #e9edf5; --surface: #ffffff; --surface-2: #f1f4fa; --ink: #0f172a; --muted: #475569; --border: #cbd3e1;
  --th-bg: #dfe6f3; --th-ink: #1e293b; --hover: #eaf0fb;
  --sb-bg: #0b1220; --sb-ink: #e2e8f0; --sb-muted: #94a3b8; --sb-hover: #1c2a45; --sb-active: #2563eb;
  --topbar-bg: #ffffff; --shadow: 0 1px 3px rgba(15,23,42,.12), 0 1px 2px rgba(15,23,42,.08);
  --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-border-color: var(--border); --bs-secondary-color: var(--muted); --bs-link-color: #1d4ed8;
}
[data-bs-theme="dark"] {
  --brand: #3b82f6; --brand-ink: #fff;
  --bg: #0a1020; --surface: #141d30; --surface-2: #1a2540; --ink: #e8edf6; --muted: #aab6cc; --border: #2c3a57;
  --th-bg: #1d2a47; --th-ink: #d5deee; --hover: #1a2744;
  --sb-bg: #060b17; --sb-ink: #e2e8f0; --sb-muted: #8392ad; --sb-hover: #16223b; --sb-active: #3b82f6;
  --topbar-bg: #101828; --shadow: 0 1px 3px rgba(0,0,0,.5);
  --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-border-color: var(--border); --bs-secondary-color: var(--muted); --bs-link-color: #7db0ff; --bs-link-hover-color: #a8c8ff;
  --bs-card-bg: var(--surface); --bs-tertiary-bg: var(--surface-2); --bs-secondary-bg: var(--surface-2);
}
body { background: var(--bg); color: var(--ink); font-size: .95rem; }
a { text-underline-offset: 2px; }
.text-muted, .form-text { color: var(--muted) !important; }
.app { display: flex; min-height: 100vh; }
.sidebar { width: var(--sb-w); background: var(--sb-bg); color: var(--sb-ink); flex-shrink: 0; padding: 1rem .75rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid rgba(255,255,255,.06); }
.sidebar .brand { font-weight: 800; color: #fff; font-size: 1.1rem; padding: .25rem .75rem 1rem; letter-spacing: .01em; }
.sidebar .brand i { color: #6aa5ff; margin-right: .35rem; }
.sidebar .nav-link { color: var(--sb-ink); font-weight: 500; border-radius: .65rem; padding: .6rem .8rem; display: flex; gap: .7rem; align-items: center; }
.sidebar .nav-link i { font-size: 1.05rem; color: #8fb4ff; width: 1.2rem; text-align: center; }
.sidebar .nav-link:hover { background: var(--sb-hover); color: #fff; }
.sidebar .nav-link.active { background: var(--sb-active); color: #fff; box-shadow: 0 2px 8px rgba(37,99,235,.45); }
.sidebar .nav-link.active i { color: #fff; }
.sidebar .nav-section { text-transform: uppercase; font-size: .7rem; font-weight: 700; letter-spacing: .09em; color: var(--sb-muted); padding: 1.1rem .8rem .35rem; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--border); padding: .6rem 1.25rem; display: flex; align-items: center; gap: .75rem; position: sticky; top: 0; z-index: 10; flex-wrap: wrap; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
.quick { display: flex; gap: .4rem; flex-wrap: wrap; }
.content { padding: 1.25rem 1.5rem 3rem; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.45rem; font-weight: 800; margin: 0; color: var(--ink); }
.card { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); }
.card .card-header { background: transparent; font-weight: 700; border-bottom: 1px solid var(--border); color: var(--ink); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--border); --bs-table-hover-bg: var(--hover); --bs-table-hover-color: var(--ink); }
.table > :not(caption) > * > * { padding: .65rem .8rem; }
.table thead th { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--th-ink); background: var(--th-bg); white-space: nowrap; border-bottom: 1px solid var(--border); }
.table-responsive { border-radius: 1rem; }
.table-light, .table-light > th, .table-light > td { --bs-table-bg: var(--surface-2); --bs-table-color: var(--ink); background: var(--surface-2); color: var(--ink); }
.table-secondary { --bs-table-bg: var(--surface-2); --bs-table-color: var(--muted); }
.stat { border-radius: 1rem; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.stat .n { font-size: 1.6rem; font-weight: 800; }
.pills .nav-link { border-radius: 2rem; color: var(--ink); background: var(--surface); border: 1px solid var(--border); font-weight: 600; padding: .4rem .95rem; }
.pills .nav-link:hover { background: var(--hover); }
.pills .nav-link.active { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.pills .badge { color: var(--ink); background: var(--surface-2) !important; }
.badge-st { font-weight: 700; }
.form-label { font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: .2rem; }
.form-control, .form-select { background-color: var(--surface); color: var(--ink); border-color: var(--border); }
.form-control::placeholder { color: var(--muted); opacity: .7; }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(59,130,246,.25); background-color: var(--surface); color: var(--ink); }
.form-control:disabled, .form-select:disabled { background-color: var(--surface-2); }
.btn-light { --bs-btn-bg: var(--surface); --bs-btn-color: var(--ink); --bs-btn-border-color: var(--border); --bs-btn-hover-bg: var(--hover); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: var(--border); --bs-btn-active-bg: var(--hover); --bs-btn-active-color: var(--ink); }
.bg-light, .text-bg-light { background-color: var(--surface-2) !important; color: var(--ink) !important; }
.list-group-item { background: var(--surface); color: var(--ink); border-color: var(--border); }
.list-group-item-action:hover { background: var(--hover); color: var(--ink); }
.dropdown-menu, .modal-content { background: var(--surface); color: var(--ink); border-color: var(--border); }
.dropdown-item { color: var(--ink); } .dropdown-item:hover { background: var(--hover); color: var(--ink); }
.theme-toggle { width: 2.3rem; padding-left: 0; padding-right: 0; }
.theme-float { position: fixed; top: .75rem; right: .75rem; z-index: 50; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #1e3a8a, #2563eb 60%, #60a5fa); }
[data-bs-theme="dark"] .login-wrap { background: linear-gradient(135deg, #050a16, #0f1d3d 60%, #1d3a7a); }
.login-card { width: min(380px, 92vw); padding: 2rem; }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.cart-total { font-size: 1.5rem; font-weight: 800; }
.name-cell { min-width: 170px; }
@media (max-width: 991.98px) { .sidebar { position: fixed; } .content { padding: 1rem; } }
@media print {
  :root, [data-bs-theme="dark"] { --bg: #fff; --surface: #fff; --surface-2: #f3f4f6; --ink: #000; --muted: #333; --border: #bbb; --th-bg: #eee; --th-ink: #000; --bs-body-bg: #fff; --bs-body-color: #000; }
  .sidebar, .topbar, .no-print, .bottom-nav, .theme-float { display: none !important; } .content { padding: 0; } .card { box-shadow: none; }
  .app, .main { display: block !important; min-height: 0 !important; }   /* a flex-keret nyomtatáskor nem tördelhető: az első oldalon marad / üres oldalakat okoz */
}

/* Telefonon a táblázat sorai kártyákká alakulnak (data-label alapján) */
@media (max-width: 767.98px) {
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards tr { background: var(--surface); border: 1px solid var(--border); border-radius: .9rem; box-shadow: var(--shadow); margin: 0 0 .75rem; padding: .5rem .25rem; }
  .table-cards td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .3rem .75rem; text-align: right; }
  .table-cards td::before { content: attr(data-label); color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-align: left; flex-shrink: 0; }
  .table-cards td.actions { justify-content: flex-end; }
  .table-cards td.actions::before { content: none; }
  .table-cards td.name-cell { font-weight: 700; }
  .table-cards td[colspan] { display: block; text-align: center; }
  .card:has(.table-cards) { background: transparent; box-shadow: none; border: 0; }
  .page-head .btn { flex: 1 1 auto; }
  .topbar .quick .btn { font-size: .8rem; }
  .pills { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding-bottom: .25rem; }
}

.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; background: var(--topbar-bg); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a { flex: 1; text-align: center; padding: .45rem 0 .35rem; color: var(--muted); text-decoration: none; font-size: .68rem; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: .05rem; }
.bottom-nav a i { font-size: 1.25rem; line-height: 1.2; }
.bottom-nav a.active { color: var(--brand); }
.bottom-nav a.sell { color: #fff; background: #198754; border-radius: 1rem; margin: .3rem .25rem; padding: .3rem 0; }
.filter-toggle { display: none; }
@media (max-width: 991.98px) {
  .topbar .quick { display: none; }
  .content { padding-bottom: 5.5rem; }
  .topbar { padding: .5rem .75rem; }
}
@media (max-width: 767.98px) {
  .filter-toggle { display: inline-flex; margin-bottom: .75rem; }
  form.filter-collapsed { display: none; }
  input, select, textarea { font-size: 16px !important; } /* iOS ne nagyítson rá fókuszkor */
}

/* Asztali nézetben a Bootstrap .offcanvas-lg átlátszóvá tenné a menüt (világos módban olvashatatlan) – ezt írjuk felül */
@media (min-width: 992px) {
  .sidebar.offcanvas-lg { background-color: var(--sb-bg) !important; color: var(--sb-ink) !important; width: var(--sb-w) !important; flex: 0 0 var(--sb-w) !important; height: 100vh !important; position: sticky !important; top: 0; border-right: 1px solid rgba(255,255,255,.06) !important; }
}
/* Mobilon a kinyíló menü ugyanolyan sötét */
.sidebar.offcanvas-lg { --bs-offcanvas-bg: var(--sb-bg); --bs-offcanvas-color: var(--sb-ink); }

/* Súgó panel */
.help-panel { --bs-offcanvas-bg: var(--surface); --bs-offcanvas-color: var(--ink); --bs-offcanvas-width: min(440px, 94vw); border-left: 1px solid var(--border) !important; }
.help-panel .offcanvas-title { font-weight: 800; }
.help-panel h6 { text-transform: uppercase; font-size: .72rem; letter-spacing: .07em; color: var(--muted); margin: 1.1rem 0 .4rem; font-weight: 800; }
.help-what { font-size: 1rem; }
.help-steps, .help-tips { padding-left: 1.2rem; } .help-steps li, .help-tips li { margin-bottom: .45rem; }
.help-tips li::marker { color: #f59e0b; }
.help-topic { scroll-margin-top: 5rem; }

/* Modulok a bal oldali menüben (lenyíló almenüvel) */
.sidebar .nav-module { margin-top: .15rem; }
.sidebar .nav-mod-toggle { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; margin-top: .35rem; border-radius: .5rem; color: var(--sb-ink); font-weight: 600; text-decoration: none; cursor: pointer; background: rgba(255,255,255,.06); }
.sidebar .nav-mod-toggle:hover, .sidebar .nav-mod-toggle.has-active { background: rgba(255,255,255,.13); }
.sidebar .nav-mod-toggle > i:first-child { font-size: 1.1rem; }
.sidebar .nav-mod-toggle span { flex: 1; }
.sidebar .nav-mod-toggle .chev { transition: transform .2s; font-size: .8rem; opacity: .8; }
.sidebar .nav-mod-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.sidebar .nav-mod-body { padding-left: .6rem; border-left: 2px solid rgba(255,255,255,.12); margin: .2rem 0 .2rem .9rem; }
.sidebar .nav-top-btn { margin-bottom: .45rem; font-weight: 600; }

/* OPWM 2.0 – egyszerűsítés */
.sidebar .nav-simple { font-size: 1.05rem; padding: .7rem .9rem; font-weight: 600; }
.gsearch { display: flex; gap: .35rem; min-width: 260px; max-width: 420px; flex: 1 1 300px; }
.tile-card { transition: transform .08s, box-shadow .12s; } .tile-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.14); }

/* ===== Mobil-csomag (telefon: érintésbarát, egysoros fejléc, kártyás táblák) – 1.0 és 2.0 közös ===== */
@media screen and (max-width: 991.98px) {
  .topbar { flex-wrap: wrap; align-items: center; gap: .4rem; padding: .4rem .55rem; position: sticky; top: 0; z-index: 1020; }
  .topbar > .ms-auto { gap: .3rem !important; flex: 1 1 auto; justify-content: flex-end; min-width: 0; flex-wrap: nowrap; }
  .topbar select[name=account_id] { max-width: 42vw; min-width: 0; text-overflow: ellipsis; }
  .topbar .dropdown-toggle { font-size: 0; padding-left: .7rem; padding-right: .7rem; } .topbar .dropdown-toggle i { font-size: 1.25rem; }
  .topbar .dropdown-toggle::after { display: none; }
  .topbar .help-btn { padding-left: .7rem; padding-right: .7rem; }
  .gsearch { order: 9; flex: 1 0 100%; min-width: 0; max-width: none; }
}
@media screen and (pointer: coarse), screen and (max-width: 767.98px) {
  .btn, .form-control, .form-select, .nav-link, .dropdown-item, summary { min-height: 44px; }
  .btn-sm { min-height: 40px; padding: .4rem .8rem; }
  .form-control-sm, .form-select-sm { min-height: 40px; }
  input[type=checkbox].form-check-input, input[type=radio].form-check-input { width: 1.45rem; height: 1.45rem; margin-top: .1rem; }
  .form-check { min-height: 2.2rem; display: flex; align-items: center; gap: .5rem; } .form-check .form-check-input { float: none; margin-left: 0; }
  .table-sm > :not(caption) > * > * { padding: .45rem .5rem; }
  .bottom-nav a { min-height: 58px; justify-content: center; font-size: .7rem; }
  .offcanvas .nav-link, .sidebar .nav-link { padding-top: .75rem; padding-bottom: .75rem; }
  .sidebar .nav-mod-toggle { padding: .8rem .9rem; }
  .pagination .page-link { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .page-head { flex-wrap: wrap; gap: .5rem; }
  .page-head h1 { font-size: 1.4rem; }
  .card-body { padding: .85rem; }
  .alert { font-size: .95rem; }
  #sigModal canvas { height: 46vh; }
}
@media screen and (max-width: 767.98px) {
  /* kártyás táblák: a Pénztár kosara és a Napilap sorai (a címkét a JS a fejlécből tölti ki) */
  .nl-table thead, #cart thead { display: none; }
  .nl-table, .nl-table tbody, .nl-table tfoot, .nl-table tr, .nl-table td, .nl-table th, #cart, #cart tbody, #cart tr, #cart td { display: block; width: 100% !important; }
  .nl-table tr, #cart tr { background: var(--surface); border: 1px solid var(--border); border-radius: .8rem; margin: 0 0 .6rem; padding: .35rem .25rem; }
  .nl-table td, .nl-table th, #cart td { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border: 0 !important; padding: .25rem .6rem !important; text-align: right; }
  .nl-table td::before, #cart td::before { content: attr(data-label); color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; flex-shrink: 0; text-align: left; }
  .nl-table td[data-label=""]::before, #cart td[data-label=""]::before { content: none; }
  .nl-table td > input.form-control, #cart td > input.form-control { max-width: 62%; min-width: 0 !important; text-align: right; }
  .nl-table td[colspan] { display: block; text-align: center; } .nl-table td[colspan]::before { content: none !important; }
  .nl-table .table-responsive, .card:has(#cart) .table-responsive { overflow: visible; }
  .nl-body > .table-responsive { padding: .4rem; }
}
@media screen and (pointer: coarse), screen and (max-width: 767.98px) {
  .table-cards td a:not(.btn), .form-text a, .list-group-item a:not(.btn) { display: inline-block; padding: .55rem .2rem; }
  button.btn-sm { min-width: 40px; }
  .badge { font-size: .8rem; }
  .small, small, .form-text, .text-muted.small { font-size: .875rem; }
}