/* ═══════════════════════════════════════════════════════════════════════
   MEATRIX UI v2 — közös stíluslap
   Csak a <body class="mx"> oldalakon érvényes, így a régi oldalak
   változatlanok maradnak, amíg át nem állítjuk őket.
   Minden saját osztály "mx-" előtagú, hogy ne ütközzön a régi CSS-sel.
   Forrás: MEATRIX design vászon (Alapok, Elemek, Mintaoldalak).
   ═══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Márka */
  --mx-brand: #c4261f; --mx-brand-600: #a31f19; --mx-brand-50: #fcefee;
  --mx-link: #1d5fbf; --mx-focus: rgba(29,95,191,0.30);
  /* Semleges */
  --mx-ink-900: #161a1f; --mx-ink-700: #3b434d; --mx-ink-600: #5b6470; --mx-ink-400: #8a939e;
  --mx-line-300: #c9cfd6; --mx-line-200: #dfe3e8; --mx-line-100: #eceff2; --mx-bg: #e9ecf0;
  /* Állapot (pötty) */
  --mx-ok: #1e7d4f; --mx-info: #1d5fbf; --mx-warn: #b76e00; --mx-idle: #8a939e; --mx-err: #b42318;
  /* Üveg */
  --mx-glass: rgba(255,255,255,0.72);
  --mx-glass-ctl: rgba(255,255,255,0.62);
  --mx-glass-border: rgba(255,255,255,0.85);
  --mx-blur: blur(24px) saturate(170%);
  --mx-glass-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(22,26,31,0.10), 0 8px 24px rgba(22,26,31,0.06);
  --mx-float-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(22,26,31,0.10), 0 18px 40px rgba(22,26,31,0.12), 0 2px 6px rgba(22,26,31,0.06);
  /* Mezők */
  --mx-fill: rgba(118,118,128,0.12);
  /* Mozgás */
  --mx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mx-slide: 0.7s; --mx-fade: 0.38s;
  /* Betű */
  --mx-font: 'Nunito', 'SF Pro Rounded', -apple-system, 'Segoe UI', sans-serif;
  --mx-mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* ── Alap ─────────────────────────────────────────────────────────────── */
body.mx { font-family: var(--mx-font); }
body.mx:not(.mx-dark):not(.mx-solo) { font-size: 14px; color: var(--mx-ink-900); }
body.mx:not(.mx-dark) {
  background-color: var(--mx-bg);
  background-image:
    radial-gradient(1200px 700px at 0% 0%, rgba(196,38,31,0.10), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(214,140,60,0.10), transparent 60%),
    radial-gradient(1200px 800px at 50% 100%, rgba(59,99,160,0.10), transparent 60%);
  background-attachment: fixed;
}
body.mx a { color: var(--mx-link); }
body.mx :focus-visible { outline: 2px solid var(--mx-link); outline-offset: 2px; }
body.mx .mx-mono { font-family: var(--mx-mono); font-size: 0.93em; }
body.mx .mx-num { font-variant-numeric: tabular-nums; }

/* A régi, teljes képernyős betöltő helyett panelenkénti betöltés van */
body.mx #meatrix-loader { display: none !important; }
body.mx .page-content > .content-wrap { animation: none; }

/* ── Lebegő oldalsáv (sidebar.php átfestése) ──────────────────────────── */
@media (min-width: 1025px) {
  /* Az oldalsáv fixen áll, és a megnyitott oldal saját hátterén lebeg egy
     áttetsző üvegbuborékban – ugyanolyan üveg, mint a tartalom panelei,
     így a háttér színe átlátszik rajta, nem válik külön oszloppá. */
  /* FONTOS: az üveg (blur) egy ::before rétegen van, NEM magán a .side-menu-n.
     A backdrop-filter / overflow:hidden a menün „befogná” az összecsukott állapot
     position:fixed oldalsó almenüit (m-flyout) — így azok nem nyílnának ki oldalra. */
  body.mx .side-menu {
    position: fixed; top: 12px; left: 12px; bottom: 12px;
    border-radius: 32px;
    border: 0;
    background: transparent !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none;
    overflow: visible;
  }
  body.mx .side-menu::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    border-radius: 32px;
    border: 1px solid rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.42);
    -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 0.5px rgba(22,26,31,0.08), 0 10px 30px rgba(22,26,31,0.07);
  }
  body.mx .side-menu .menu-header { border-radius: 32px 32px 0 0; }
  /* Az oldal (háttér + fejléc sáv) a menü alá is befut, a menü rálebeg;
     a panelek a menü mellett kezdődnek. */
  body.mx { --mx-inset: calc(var(--side-w) + 24px); }
  body.mx.sidebar-collapsed { --mx-inset: calc(var(--side-c) + 24px); }
  body.mx .admin-main {
    margin-left: 0 !important; width: 100% !important; box-sizing: border-box;
    padding-left: var(--mx-inset);
    transition: none;   /* a menüvel együtt csúszást a meatrix.js végzi transformmal */
  }
  /* A fejléc külön üvegbuborék: a menü mellett, 12 px réssel, egy vonalban vele */
  body.mx .admin-main > .admin-header { margin-left: 0; margin-right: 12px; }
}
/* A buborék belseje is áttetsző (a régi menüben ezek tömör fehérek voltak) */
body.mx .side-menu .menu-foot { background: transparent; border-top-color: rgba(22,26,31,0.07); }
/* A bejelentkezett felhasználó: nincs külön buborék — maga a menü az üveg */
body.mx .side-menu .user-card { border-radius: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.mx .side-menu .s-toggle { background: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.75); border-radius: 999px; }
body.mx .side-menu.collapsed .m-flyout, body.mx .side-menu.collapsed .m-flyout.is-popup-arrow::after {
  background: rgba(255,255,255,0.85); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
}
body.mx .side-menu .menu-scroll::-webkit-scrollbar-thumb { background: rgba(22,26,31,0.12); }
body.mx .side-menu .menu-header { border-bottom-color: rgba(22,26,31,0.08); }
body.mx .side-menu .menu-scroll { position: relative; }
body.mx .side-menu .m-section { color: var(--mx-ink-600); font-weight: 700; }
body.mx .side-menu .m-link,
body.mx .side-menu .m-sublink {
  position: relative; z-index: 1; border: 1px solid transparent; border-radius: 16px;
  color: var(--mx-ink-700); font-family: var(--mx-font); font-size: 13.5px; font-weight: 600;
  background: transparent; box-shadow: none;
  transition: color 0.6s var(--mx-ease), background 0.3s ease;
}
body.mx .side-menu .m-link:hover,
body.mx .side-menu .m-sublink:hover { background: rgba(255,255,255,0.55); color: var(--mx-ink-900); border-color: transparent; }
body.mx .side-menu .m-link.active,
body.mx .side-menu .m-sublink.active { background: transparent; border-color: transparent; box-shadow: none; color: #8f1d16; font-weight: 700; }
body.mx .side-menu .m-flyout-wrap.has-active > .m-link { color: var(--mx-ink-900); }
/* A csúszó kiemelés (meatrix.js teszi be) */
body.mx .mx-nav-hl {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  border-radius: 16px; opacity: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(252,239,238,0.95));
  box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(196,38,31,0.25), 0 4px 12px rgba(196,38,31,0.14);
  transition: transform var(--mx-slide) var(--mx-ease), width var(--mx-slide) var(--mx-ease), height var(--mx-slide) var(--mx-ease), opacity 0.3s ease;
}
body.mx .mx-nav-hl.is-on { opacity: 1; }
body.mx .mx-nav-hl.no-anim { transition: none; }
body.mx .side-menu .user-avatar { background: var(--mx-ink-700); }

/* ── Lebegő fejléc ────────────────────────────────────────────────────── */
body.mx .admin-header {
  position: sticky; top: 12px; z-index: 900; height: 56px; margin: 12px 12px 0;
  padding: 0 12px 0 20px; border-radius: 18px;
  background: rgba(255,255,255,0.62); border: 1px solid var(--mx-glass-border);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(22,26,31,0.10), 0 8px 24px rgba(22,26,31,0.08);
}
body.mx .mx-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mx-ink-600); min-width: 0; }
body.mx .mx-crumbs a { color: var(--mx-ink-600); text-decoration: none; }
body.mx .mx-crumbs a:hover { color: var(--mx-ink-900); }
body.mx .mx-crumbs [aria-current] { color: var(--mx-ink-900); font-weight: 700; }
body.mx .mx-crumbs svg { flex-shrink: 0; color: var(--mx-ink-400); }


/* ── Fejlécek: lebegő üvegbuborék, mögötte az oldal saját háttere ────────
   (.admin-header = általános oldalak, .dash-header = főoldal,
    .header = termelési dashboardok világos témában) */
body.mx .admin-header,
body.mx .admin-main > .dash-header,
html[data-theme="light"] body.mx.mx-dash .admin-main > .header {
  background: rgba(255,255,255,0.42) !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 0.5px rgba(22,26,31,0.08), 0 10px 30px rgba(22,26,31,0.07) !important;
  border-radius: 999px !important;
}
body.mx .admin-main > .dash-header,
html[data-theme="light"] body.mx.mx-dash .admin-main > .header {
  position: sticky; top: 12px; margin: 12px 12px 4px; z-index: 900;
}
@media (min-width: 1025px) {
  body.mx .admin-main > .dash-header,
  html[data-theme="light"] body.mx.mx-dash .admin-main > .header { margin-left: 0; margin-right: 12px; }
}

/* ── Oldal váz ────────────────────────────────────────────────────────── */
body.mx .page-content { padding: 16px 12px 32px; }
body.mx .mx-page { display: flex; flex-direction: column; gap: 16px; }
body.mx .page-content { transition: opacity var(--mx-fade) ease, transform 0.6s var(--mx-ease); }
body.mx.mx-leaving .page-content { opacity: 0; transform: translateY(10px); }
body.mx .mx-page-head {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding: 20px 24px; border-radius: 28px;
  background: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.8);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
}
body.mx .mx-page-title { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; min-width: 0; }
body.mx .mx-page-title h1 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.2px; color: var(--mx-ink-900); }
body.mx .mx-page-title p { margin: 0; font-size: 13px; color: var(--mx-ink-600); }
body.mx .mx-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Panel (üveg) ─────────────────────────────────────────────────────── */
body.mx .mx-panel {
  background: var(--mx-glass); border: 1px solid var(--mx-glass-border); border-radius: 24px;
  -webkit-backdrop-filter: var(--mx-blur); backdrop-filter: var(--mx-blur);
  box-shadow: var(--mx-glass-shadow); overflow: hidden;
}
body.mx .mx-panel-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(22,26,31,0.08); flex-wrap: wrap; }
body.mx .mx-panel-head h2 { margin: 0; font-size: 15px; font-weight: 700; flex: 1; }
body.mx .mx-panel-head .mx-meta { font-size: 12px; color: var(--mx-ink-600); }
body.mx .mx-panel-body { padding: 20px; }
body.mx .mx-panel-foot { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; font-size: 12.5px; color: var(--mx-ink-600); border-top: 1px solid rgba(22,26,31,0.06); }

/* KPI sor */
body.mx .mx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
body.mx .mx-kpi { padding: 16px 20px; border-right: 1px solid rgba(22,26,31,0.07); display: flex; flex-direction: column; gap: 4px; }
body.mx .mx-kpi:last-child { border-right: 0; }
body.mx .mx-kpi-label { font-size: 13px; color: var(--mx-ink-600); }
body.mx .mx-kpi-value { font-size: 24px; line-height: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
body.mx .mx-kpi-sub { font-size: 12px; color: var(--mx-ink-600); }
body.mx .mx-kpi--brand .mx-kpi-value { color: var(--mx-brand); }

/* ── Gombok (kapszula üveg) ───────────────────────────────────────────── */
body.mx .mx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: 999px; box-sizing: border-box;
  font-family: var(--mx-font); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer; color: var(--mx-ink-900);
  border: 1px solid rgba(255,255,255,0.9); background: var(--mx-glass-ctl);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(22,26,31,0.14), 0 2px 6px rgba(22,26,31,0.08);
  transition: filter .15s ease, background .15s ease;
}
body.mx .mx-btn:hover { background: rgba(255,255,255,0.9); }
body.mx .mx-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
body.mx .mx-btn--primary {
  color: #fff; border-color: rgba(255,255,255,0.28);
  background: linear-gradient(180deg, rgba(212,52,44,0.96), rgba(180,32,26,0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.12), 0 4px 12px rgba(196,38,31,0.26);
}
body.mx .mx-btn--primary:hover { background: linear-gradient(180deg, rgba(212,52,44,0.96), rgba(180,32,26,0.96)); filter: brightness(1.06); }
body.mx .mx-btn--danger { color: var(--mx-err); }
body.mx .mx-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.mx .mx-btn--icon { width: 36px; padding: 0; }
body.mx .mx-btn--sm { height: 32px; font-size: 13px; padding: 0 12px; }
body.mx .mx-btn--sm.mx-btn--icon { width: 32px; }
body.mx .mx-btn:disabled, body.mx .mx-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none; }

/* Szegmens / fülek */
body.mx .mx-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(118,118,128,0.12); box-shadow: inset 0 0 0 0.5px rgba(22,26,31,0.08); }
body.mx .mx-seg > button, body.mx .mx-seg > a {
  height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent;
  font-family: var(--mx-font); font-size: 13px; font-weight: 600; color: var(--mx-ink-700);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
  transition: background .3s var(--mx-ease), box-shadow .3s var(--mx-ease), color .3s ease;
}
body.mx .mx-seg > [aria-selected="true"], body.mx .mx-seg > [aria-pressed="true"], body.mx .mx-seg > .is-on {
  background: #fff; color: var(--mx-ink-900); font-weight: 700;
  box-shadow: 0 0 0 0.5px rgba(22,26,31,0.12), 0 2px 6px rgba(22,26,31,0.12);
}

/* Dátumléptető */
body.mx .mx-stepper { display: inline-flex; align-items: center; gap: 4px; }

/* ── Mezők (Apple, kitöltött) ─────────────────────────────────────────── */
body.mx .mx-field { display: flex; flex-direction: column; gap: 6px; }
body.mx .mx-field > label, body.mx .mx-label { font-size: 13px; font-weight: 600; color: var(--mx-ink-900); }
body.mx .mx-help { font-size: 12px; color: var(--mx-ink-600); }
body.mx .mx-input, body.mx .mx-select, body.mx .mx-textarea {
  height: 38px; padding: 0 12px; box-sizing: border-box; width: 100%;
  border: 0; border-radius: 12px; background: var(--mx-fill);
  box-shadow: inset 0 0 0 0.5px rgba(22,26,31,0.05);
  font-family: var(--mx-font); font-size: 14px; color: var(--mx-ink-900);
  transition: box-shadow .2s ease, background .2s ease;
}
body.mx .mx-textarea { height: auto; padding: 10px 12px; resize: vertical; }
body.mx .mx-input:focus, body.mx .mx-select:focus, body.mx .mx-textarea:focus { outline: none; background: rgba(255,255,255,0.95); box-shadow: 0 0 0 3px var(--mx-focus); }
body.mx .mx-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--mx-err); }
body.mx .mx-input[readonly] { background: rgba(118,118,128,0.06); box-shadow: inset 0 0 0 0.5px rgba(22,26,31,0.08); }
body.mx .mx-input--date { width: auto; min-width: 150px; font-variant-numeric: tabular-nums; }
body.mx .mx-select {
  -webkit-appearance: none; appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6470' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5-5 5 5M7 15l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* Kerek jelölő (iOS) — <input type="checkbox" class="mx-check"> */
body.mx input.mx-check, body.mx input.mx-radio {
  -webkit-appearance: none; appearance: none; margin: 0; flex-shrink: 0; cursor: pointer;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid rgba(60,60,67,0.30); background: rgba(255,255,255,0.85);
  box-shadow: 0 1px 2px rgba(22,26,31,0.06);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
body.mx input.mx-check:checked {
  border-color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat, linear-gradient(180deg, #d4342c, #b4201a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 1px 3px rgba(196,38,31,0.35);
}
body.mx input.mx-check:indeterminate {
  border-color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / 12px no-repeat, linear-gradient(180deg, #d4342c, #b4201a);
}
body.mx input.mx-radio:checked { border-color: rgba(60,60,67,0.30); background: radial-gradient(circle, var(--mx-brand) 0 5px, rgba(255,255,255,0.85) 5.5px); }
/* Kapcsoló (iOS) — <input type="checkbox" class="mx-switch"> */
body.mx input.mx-switch {
  -webkit-appearance: none; appearance: none; margin: 0; flex-shrink: 0; cursor: pointer; position: relative;
  width: 46px; height: 28px; border-radius: 999px; background: rgba(120,120,128,0.24);
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.06); transition: background .25s ease;
}
body.mx input.mx-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.16);
  transition: transform .3s var(--mx-ease);
}
body.mx input.mx-switch:checked { background: #34c759; }
body.mx input.mx-switch:checked::after { transform: translateX(18px); }

/* ── Táblázat ─────────────────────────────────────────────────────────── */
body.mx .mx-table-wrap { overflow-x: auto; }
body.mx .mx-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
body.mx .mx-table th {
  text-align: left; padding: 0 12px; height: 36px; white-space: nowrap;
  background: rgba(248,249,250,0.55); border-bottom: 1px solid rgba(22,26,31,0.08);
  font-size: 12px; font-weight: 700; color: var(--mx-ink-700);
}
body.mx .mx-table td { padding: 0 12px; height: 40px; border-bottom: 1px solid rgba(22,26,31,0.06); }
body.mx .mx-table th:first-child, body.mx .mx-table td:first-child { padding-left: 16px; }
body.mx .mx-table th:last-child, body.mx .mx-table td:last-child { padding-right: 16px; }
body.mx .mx-table tbody tr:hover td { background: rgba(255,255,255,0.6); }
body.mx .mx-table tr.is-selected td { background: rgba(196,38,31,0.05); }
body.mx .mx-table .r { text-align: right; }
body.mx .mx-table .muted { color: var(--mx-ink-700); }
body.mx .mx-table .strong { font-weight: 700; }
body.mx .mx-idx { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(118,118,128,0.12); font-size: 12px; font-weight: 700; color: var(--mx-ink-700); }

/* ── Címkék, üzenetek ─────────────────────────────────────────────────── */
body.mx .mx-tag {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px;
  font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--mx-ink-900);
  background: rgba(255,255,255,0.8); border: 1px solid var(--mx-line-300);
}
body.mx .mx-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mx-idle); }
body.mx .mx-tag--ok::before { background: var(--mx-ok); }
body.mx .mx-tag--info::before { background: var(--mx-info); }
body.mx .mx-tag--warn::before { background: var(--mx-warn); }
body.mx .mx-tag--err { background: #fdf0ef; color: #8f1d16; border-color: #f1c4c0; }
body.mx .mx-tag--err::before { background: var(--mx-err); }
body.mx .mx-notice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; border: 1px solid; }
body.mx .mx-notice--ok { background: #f1f8f4; border-color: #b7dcc8; color: #14532d; }
body.mx .mx-notice--warn { background: #fdf7ec; border-color: #ecd3a4; color: #6b3f00; }
body.mx .mx-notice--err { background: #fdf0ef; border-color: #f1c4c0; color: #8f1d16; }
body.mx .mx-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 24px; text-align: center; }
body.mx .mx-empty strong { font-size: 15px; }
body.mx .mx-empty span { font-size: 13px; color: var(--mx-ink-600); }

/* ── Panelenkénti betöltés ────────────────────────────────────────────── */
body.mx .mx-ploader { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 22px 16px; }
body.mx .mx-ploader-logo { position: relative; width: 96px; height: 52px; flex-shrink: 0; }
body.mx .mx-ploader-logo::before {
  content: ''; position: absolute; inset: 15% 12%; border-radius: 999px;
  background: radial-gradient(closest-side, rgba(196,38,31,0.22), rgba(214,140,60,0.10), transparent);
  animation: mx-halo 1.6s cubic-bezier(.45,0,.55,1) infinite;
}
body.mx .mx-ploader-logo img { position: relative; width: 100%; height: 100%; object-fit: cover; animation: mx-pulse 1.6s cubic-bezier(.45,0,.55,1) infinite; }
body.mx .mx-ploader-text { font-size: 13px; font-weight: 600; color: var(--mx-ink-600); }
body.mx .mx-sk {
  display: block; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, rgba(118,118,128,0.10) 30%, rgba(118,118,128,0.20) 50%, rgba(118,118,128,0.10) 70%);
  background-size: 300% 100%; animation: mx-sk 1.6s ease-in-out infinite;
}
body.mx .mx-sk-row { display: flex; gap: 16px; align-items: center; height: 40px; padding: 0 16px; border-bottom: 1px solid rgba(22,26,31,0.06); }
body.mx .mx-in { animation: mx-in .6s var(--mx-ease) both; }


/* ── Buborékonkénti betöltés a régi oldalakon ────────────────────────────
   A meatrix.js a „Betöltés…” helyőrzőket .mx-busy jelöléssel látja el:
   ott a saját helyén pulzál a MEATRIX logó, a többi panel közben látszik.
   A főoldal (index) régi, mindent eltakaró betöltője helyett ez működik. */
body.mx #mx-init-loader { display: none !important; }
body.mx .mx-busy {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 96px; padding: 14px 10px !important; text-align: center;
  font-size: 13px !important; font-weight: 600 !important; color: var(--mx-ink-600) !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
body.mx .mx-busy::before {
  content: ''; width: 84px; height: 46px; flex-shrink: 0;
  background: url("meatrix.png") center / cover no-repeat;
  animation: mx-pulse 1.6s cubic-bezier(.45,0,.55,1) infinite;
}
body.mx.mx-dark .mx-busy { color: rgba(255,255,255,0.7) !important; }

@keyframes mx-pulse { 0%,100% { transform: scale(1); opacity: .82; filter: drop-shadow(0 4px 10px rgba(196,38,31,0.10)); } 50% { transform: scale(1.07); opacity: 1; filter: drop-shadow(0 10px 24px rgba(196,38,31,0.28)); } }
@keyframes mx-halo { 0%,100% { transform: scale(.85); opacity: .35; } 50% { transform: scale(1.15); opacity: .9; } }
@keyframes mx-sk { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes mx-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   RÉGI OLDALAK – ÁLTALÁNOS ÁTFESTÉS (minden …_v2.php)
   A régi oldalak saját <style>-ja megmarad (az adja az elrendezést),
   ez a réteg csak a közös színeket, betűt és a gyakori elemeket festi át.
   HTML és JavaScript nem változik.
   ═══════════════════════════════════════════════════════════════════════ */
/* A régi oldalak változóinak új értékei */
body.mx:not(.mx-dash):not(.mx-dark) {
  --accent: #c4261f; --accent-dark: #a31f19; --accent-dim: rgba(196,38,31,0.08);
  --t1: #161a1f; --t2: #5b6470; --t3: #8a939e;
  --text-main: #161a1f; --text-muted: #5b6470; --text-faint: #8a939e;
  --border: rgba(22,26,31,0.08);
  --bg: #eef1f5; --bg-body: transparent;
  --primary: #1d5fbf; --primary-dim: rgba(29,95,191,0.08);
}
/* Betű mindenhol Nunito (ikonbetűk és kódok kivételével) */
body.mx, body.mx *:not(.bi):not([class^="bi-"]):not([class*=" bi-"]):not(code):not(pre):not(kbd):not(samp):not(.mx-mono) {
  font-family: var(--mx-font) !important;
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .header-title { font-size: 15px !important; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--mx-ink-900); }

/* Gombok → kapszula üveg */
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .btn, :root:not([data-theme="dark"]) body.mx:not(.mx-dark) .btn-secondary, :root:not([data-theme="dark"]) body.mx:not(.mx-dark) .btn-primary, :root:not([data-theme="dark"]) body.mx:not(.mx-dark) .btn-success, :root:not([data-theme="dark"]) body.mx:not(.mx-dark) .btn-danger {
  border-radius: 999px; font-weight: 600;
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  transition: filter .15s ease, background .15s ease, box-shadow .15s ease;
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .btn:not(.btn-primary):not(.btn-success):not(.btn-danger), :root:not([data-theme="dark"]) body.mx:not(.mx-dark) .btn-secondary {
  color: var(--mx-ink-900); background: var(--mx-glass-ctl); border: 1px solid rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(22,26,31,0.14), 0 2px 6px rgba(22,26,31,0.08);
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):hover, :root:not([data-theme="dark"]) body.mx:not(.mx-dark) .btn-secondary:hover { background: rgba(255,255,255,0.92); }
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .btn-primary {
  color: #fff; border: 1px solid rgba(255,255,255,0.28);
  background: linear-gradient(180deg, rgba(212,52,44,0.96), rgba(180,32,26,0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.12), 0 4px 12px rgba(196,38,31,0.26);
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .btn-success {
  color: #fff; border: 1px solid rgba(255,255,255,0.28);
  background: linear-gradient(180deg, #2a9a62, #1e7d4f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 12px rgba(30,125,79,0.24);
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .btn-danger {
  color: var(--mx-err); background: var(--mx-glass-ctl); border: 1px solid rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(180,35,24,0.35), 0 2px 6px rgba(22,26,31,0.08);
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .btn-primary:hover, :root:not([data-theme="dark"]) body.mx:not(.mx-dark) .btn-success:hover { filter: brightness(1.06); }
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .btn:disabled, :root:not([data-theme="dark"]) body.mx:not(.mx-dark) .btn-primary:disabled, :root:not([data-theme="dark"]) body.mx:not(.mx-dark) .btn-secondary:disabled { opacity: .55; filter: none; cursor: not-allowed; }

/* Fejléc chip-navigáció (sidebar.php .page-nav-chip) */
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .page-nav-chip {
  color: var(--mx-ink-700); background: var(--mx-glass-ctl); border: 1px solid rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(22,26,31,0.14);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-weight: 600;
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .page-nav-chip:hover { color: var(--mx-ink-900); border-color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.92); }
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .page-nav-chip.active {
  color: #fff; border-color: rgba(255,255,255,0.28);
  background: linear-gradient(180deg, rgba(212,52,44,0.96), rgba(180,32,26,0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 12px rgba(196,38,31,0.26);
}

/* Mezők → Apple kitöltött mező */
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) select:not([multiple]):not([size]), :root:not([data-theme="dark"]) body.mx:not(.mx-dark) textarea {
  border: 1px solid transparent; border-radius: 12px;
  background-color: rgba(118,118,128,0.12); box-shadow: inset 0 0 0 0.5px rgba(22,26,31,0.05);
  color: var(--mx-ink-900);
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]):focus,
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) select:not([multiple]):not([size]):focus, :root:not([data-theme="dark"]) body.mx:not(.mx-dark) textarea:focus {
  outline: none; border-color: transparent; background-color: rgba(255,255,255,0.95); box-shadow: 0 0 0 3px var(--mx-focus);
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6470' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5-5 5 5M7 15l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
/* Jelölőnégyzet és választógomb → kerek (iOS) */
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) input[type="checkbox"]:not(.mx-switch), :root:not([data-theme="dark"]) body.mx:not(.mx-dark) input[type="radio"] {
  -webkit-appearance: none; appearance: none; margin: 0; flex-shrink: 0; cursor: pointer; vertical-align: middle;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(60,60,67,0.30); background: rgba(255,255,255,0.85);
  box-shadow: 0 1px 2px rgba(22,26,31,0.06);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) input[type="checkbox"]:not(.mx-switch):checked {
  border-color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat, linear-gradient(180deg, #d4342c, #b4201a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 1px 3px rgba(196,38,31,0.35);
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) input[type="checkbox"]:not(.mx-switch):indeterminate {
  border-color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / 11px no-repeat, linear-gradient(180deg, #d4342c, #b4201a);
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) input[type="radio"]:checked { background: radial-gradient(circle, var(--mx-brand) 0 4.5px, rgba(255,255,255,0.9) 5px); }
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) input[type="checkbox"]:disabled, :root:not([data-theme="dark"]) body.mx:not(.mx-dark) input[type="radio"]:disabled { opacity: .45; cursor: not-allowed; }

/* Felugró ablak (.modal) – csak a kinézet; megjelenítés, pozíció a régi oldalé */
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .modal {
  background: rgba(255,255,255,0.88); border: 1px solid rgba(255,255,255,0.9); border-radius: 30px;
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(22,26,31,0.12), 0 24px 60px rgba(22,26,31,0.22);
}




/* ── Sötét kioszk / üzemi képernyők (body.mx.mx-dark) ────────────────────
   A saját sötét háttér és színek megmaradnak (távolról olvasható kijelzők);
   az új dizájnból a betű, a kapszula gombok és az Apple vezérlők jönnek. */
body.mx.mx-dark .btn, body.mx.mx-dark .btn-primary, body.mx.mx-dark .btn-secondary, body.mx.mx-dark .btn-success, body.mx.mx-dark .btn-danger { border-radius: 999px; }
body.mx.mx-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
body.mx.mx-dark select:not([multiple]):not([size]), body.mx.mx-dark textarea {
  border-radius: 10px; border-color: rgba(255,255,255,0.14);
}
body.mx.mx-dark input:focus, body.mx.mx-dark select:focus, body.mx.mx-dark textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(96,150,240,0.45); }
body.mx.mx-dark input[type="checkbox"], body.mx.mx-dark input[type="radio"] {
  -webkit-appearance: none; appearance: none; margin: 0; flex-shrink: 0; cursor: pointer; vertical-align: middle;
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.40); background: rgba(255,255,255,0.06);
  transition: background .25s ease, border-color .25s ease;
}
body.mx.mx-dark input[type="checkbox"]:checked {
  border-color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat, linear-gradient(180deg, #e0443c, #c4261f);
}
body.mx.mx-dark input[type="radio"]:checked { background: radial-gradient(circle, #e0443c 0 5px, rgba(255,255,255,0.06) 5.5px); }

/* ── Termelési dashboardok (husuzem, paniruzem: body.mx.mx-dash) ─────────
   Ezeknek saját világos/sötét témájuk van (☀/🌙 gomb). Világos témában
   az új dizájn színeit kapják; sötét témában a saját sötét kinézetük marad. */
html[data-theme="light"] body.mx.mx-dash {
  --bg: #e9ecf0;
  --surface: rgba(255,255,255,0.72); --surface2: rgba(255,255,255,0.55); --surface3: rgba(255,255,255,0.40);
  --border: rgba(22,26,31,0.10); --border-mid: rgba(22,26,31,0.16);
  --text: #161a1f; --text-sub: #3b434d; --text-muted: #5b6470;
  --card: rgba(255,255,255,0.72); --cardSolid: #ffffff;
  --stroke: rgba(22,26,31,0.10); --stroke2: rgba(196,38,31,0.22);
  --shadow: 0 8px 24px rgba(22,26,31,0.06); --shadow2: 0 2px 8px rgba(22,26,31,0.05);
  --primary: #c4261f; --primary2: #a31f19;
  --tableHead: rgba(248,249,250,0.75); --tableRowHover: rgba(29,95,191,0.06);
  background-color: #e9ecf0 !important;
  background-image:
    radial-gradient(1200px 700px at 0% 0%, rgba(196,38,31,0.10), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(214,140,60,0.10), transparent 60%),
    radial-gradient(1200px 800px at 50% 100%, rgba(59,99,160,0.10), transparent 60%) !important;
  background-attachment: fixed !important;
  color: var(--mx-ink-900) !important;
}
html[data-theme="light"] body.mx.mx-dash .card {
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  border-color: rgba(255,255,255,0.85);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(22,26,31,0.10), 0 8px 24px rgba(22,26,31,0.06);
}
html[data-theme="light"] body.mx.mx-dash .header {
  background: rgba(255,255,255,0.62); border-bottom: 1px solid rgba(22,26,31,0.08);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
/* ── Oldalspecifikus átfestések (csak kinézet) ────────────────────────── */
/* Kaizen, SOP: saját változók a .kz / .sp konténeren */
body.mx .kz, body.mx .sp {
  --ink: #161a1f; --ink2: #3b434d; --ink3: #5b6470;
  --line: rgba(22,26,31,0.10); --line2: rgba(22,26,31,0.06); --bg: transparent; --acc: #c4261f;
}
body.mx .kz-btn, body.mx .sp-btn, body.mx .btn-new {
  border-radius: 999px; font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,0.28);
  background: linear-gradient(180deg, rgba(212,52,44,0.96), rgba(180,32,26,0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.12), 0 4px 12px rgba(196,38,31,0.26);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transform: none;
}
body.mx .kz-btn:hover, body.mx .sp-btn:hover, body.mx .btn-new:hover {
  background: linear-gradient(180deg, rgba(212,52,44,0.96), rgba(180,32,26,0.96)); border-color: rgba(255,255,255,0.28);
  filter: brightness(1.06); transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 12px rgba(196,38,31,0.3);
}
body.mx .kz-btn.ghost, body.mx .sp-btn.ghost, body.mx .kz-btn.danger, body.mx .sp-btn.danger, body.mx .sp-btn.ok {
  color: var(--mx-ink-900); background: var(--mx-glass-ctl); border: 1px solid rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(22,26,31,0.14), 0 2px 6px rgba(22,26,31,0.08); filter: none;
}
body.mx .kz-btn.danger, body.mx .sp-btn.danger { color: var(--mx-err); }
body.mx .sp-btn.ok { color: var(--mx-ok); }
body.mx .kz-btn.ghost:hover, body.mx .sp-btn.ghost:hover, body.mx .kz-btn.danger:hover, body.mx .sp-btn.danger:hover, body.mx .sp-btn.ok:hover {
  background: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.9);
}
/* Kaizen nézetváltó → Apple szegmens */
body.mx .kz-seg { border: 0; border-radius: 999px; padding: 3px; gap: 2px; height: auto; background: rgba(118,118,128,0.12); box-shadow: inset 0 0 0 0.5px rgba(22,26,31,0.08); }
body.mx .kz-seg button { height: 28px; border-radius: 999px; font-weight: 600; color: var(--mx-ink-700); transition: background .3s var(--mx-ease), box-shadow .3s var(--mx-ease); }
body.mx .kz-seg button.on { background: #fff; color: var(--mx-ink-900); font-weight: 700; box-shadow: 0 0 0 0.5px rgba(22,26,31,0.12), 0 2px 6px rgba(22,26,31,0.12); }
/* Panír ellenőrzések: „3D” gombok → üveg kapszula */
body.mx .insp-subbtn {
  border-radius: 999px; padding: 10px 26px; font-size: 1rem; font-weight: 700; letter-spacing: 0; text-shadow: none;
  color: var(--mx-ink-700); background: var(--mx-glass-ctl); border: 1px solid rgba(255,255,255,0.9);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(22,26,31,0.14), 0 2px 6px rgba(22,26,31,0.08);
}
body.mx .insp-subbtn:hover, body.mx .insp-subbtn:active { transform: none; color: var(--mx-ink-900); background: rgba(255,255,255,0.92); box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(22,26,31,0.14), 0 2px 6px rgba(22,26,31,0.08); }
body.mx .insp-subbtn.active, body.mx .insp-subbtn.active:hover, body.mx .insp-subbtn.active:active {
  transform: none; color: #fff; border-color: rgba(255,255,255,0.28); text-shadow: none;
  background: linear-gradient(180deg, rgba(212,52,44,0.96), rgba(180,32,26,0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 12px rgba(196,38,31,0.26);
}

/* ═══════════════════════════════════════════════════════════════════════
   HIBABEJELENTŐ OLDALAK (body.mx.mx-hb)
   Az átállított hibabejelentő oldalak a saját HTML-jüket és JavaScriptjüket
   változatlanul megtartják – csak a régi osztályok kapnak új kinézetet.
   ═══════════════════════════════════════════════════════════════════════ */

/* Oldalcím sáv a régi oldalakon */
body.mx.mx-hb .content-wrap { max-width: none; margin: 0; display: flex; flex-direction: column; gap: 16px; }
body.mx.mx-hb .page-content > .content-wrap:not(:last-child) { margin-bottom: 16px; }
body.mx.mx-hb .intro-meta, body.mx.mx-hb .mx-legacy-head {
  padding: 20px 24px; border-radius: 28px; margin: 0 0 16px;
  background: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.8);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
}
body.mx.mx-hb .content-wrap > .intro-meta, body.mx.mx-hb .content-wrap > .mx-legacy-head { margin: 0; }
body.mx.mx-hb .intro-meta h1, body.mx.mx-hb .mx-legacy-head h1 { margin: 0 0 4px; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.2px; color: var(--mx-ink-900); }
body.mx.mx-hb .intro-meta p, body.mx.mx-hb .mx-legacy-head p { margin: 0; font-size: 13px; color: var(--mx-ink-600); }

/* Állapotüzenet (#status) – a megjelenítést a régi JS vezérli (style.display) */
body.mx.mx-hb .status {
  display: none; padding: 10px 14px; border-radius: 16px; margin: 0 0 16px;
  font-size: 13.5px; font-weight: 600;
  background: #f1f8f4; border: 1px solid #b7dcc8; color: #14532d;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
body.mx.mx-hb .status.error { background: #fdf0ef; border-color: #f1c4c0; color: #8f1d16; }

/* Hibabejelentő: területgombok */
body.mx.mx-hb .area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.mx.mx-hb .area-btn {
  display: flex; align-items: center; gap: 12px; text-align: left; min-height: 72px;
  padding: 14px 16px; border-radius: 22px; cursor: pointer;
  font-family: var(--mx-font); font-size: 14px; font-weight: 700; color: var(--mx-ink-900);
  background: var(--mx-glass); border: 1px solid var(--mx-glass-border);
  -webkit-backdrop-filter: var(--mx-blur); backdrop-filter: var(--mx-blur);
  box-shadow: var(--mx-glass-shadow);
  transition: transform .3s var(--mx-ease), box-shadow .3s var(--mx-ease), background .2s ease, color .2s ease;
}
body.mx.mx-hb .area-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,0.9); color: #8f1d16; box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(196,38,31,0.22), 0 12px 28px rgba(196,38,31,0.12); }
body.mx.mx-hb .area-btn:focus-visible { outline: 2px solid var(--mx-link); outline-offset: 2px; }
body.mx.mx-hb .area-btn .ico {
  width: 40px; height: 40px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(118,118,128,0.12); color: var(--mx-ink-700); font-size: 20px; font-weight: 800;
  transition: background .3s var(--mx-ease), color .3s ease;
}
body.mx.mx-hb .area-btn .ico svg { width: 20px; height: 20px; }
body.mx.mx-hb .area-btn:hover .ico { background: rgba(196,38,31,0.12); transform: scale(1.06); }
body.mx.mx-hb .area-btn .lbl { line-height: 1.3; }

/* Felugró ablak (#modal, .modal) – a megnyitást a régi JS vezérli (style.display) */
body.mx.mx-hb #overlay {
  display: none; position: fixed; inset: 0; z-index: 1500;
  background: rgba(22,26,31,0.30); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body.mx.mx-hb #modal, body.mx.mx-hb .modal {
  display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1501;
  width: min(540px, 92vw); max-height: 92vh; overflow-y: auto; box-sizing: border-box;
  padding: 24px; border-radius: 30px;
  background: rgba(255,255,255,0.86); border: 1px solid rgba(255,255,255,0.9);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(22,26,31,0.12), 0 24px 60px rgba(22,26,31,0.22);
  font-family: var(--mx-font); color: var(--mx-ink-900);
}
body.mx.mx-hb #modal h2, body.mx.mx-hb .modal h2 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: var(--mx-ink-900); }
body.mx.mx-hb #modal .modal-area, body.mx.mx-hb .modal .modal-sub, body.mx.mx-hb .modal .modal-area {
  font-size: 13.5px; color: var(--mx-ink-600); margin: 0 0 8px; padding-bottom: 14px; border-bottom: 1px solid rgba(22,26,31,0.08);
}
body.mx.mx-hb #modal .modal-area strong, body.mx.mx-hb .modal .modal-sub strong { color: var(--mx-ink-900); font-weight: 700; }
body.mx.mx-hb .fld-label { display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--mx-ink-900); text-transform: none; letter-spacing: 0; }
body.mx.mx-hb #modal select, body.mx.mx-hb #modal textarea, body.mx.mx-hb #modal input[type="text"],
body.mx.mx-hb .modal select, body.mx.mx-hb .modal textarea, body.mx.mx-hb .modal input[type="text"] {
  width: 100%; box-sizing: border-box; min-height: 40px; padding: 10px 12px;
  border: 0; border-radius: 10px; background-color: var(--mx-fill); box-shadow: inset 0 0 0 0.5px rgba(22,26,31,0.05);
  font-family: var(--mx-font); font-size: 15px; color: var(--mx-ink-900); outline: none;
  transition: box-shadow .2s ease, background-color .2s ease;
}
body.mx.mx-hb #modal select, body.mx.mx-hb .modal select {
  -webkit-appearance: none; appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6470' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5-5 5 5M7 15l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
body.mx.mx-hb #modal textarea, body.mx.mx-hb .modal textarea { min-height: 100px; resize: vertical; }
body.mx.mx-hb #modal select:focus, body.mx.mx-hb #modal textarea:focus, body.mx.mx-hb .modal select:focus, body.mx.mx-hb .modal textarea:focus, body.mx.mx-hb .modal input[type="text"]:focus {
  background-color: rgba(255,255,255,0.95); box-shadow: 0 0 0 3px var(--mx-focus);
}
/* „Állást okozó karbantartás” – iOS kapcsoló a régi checkboxból */
body.mx.mx-hb .downtime-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0;
  padding: 10px 12px; border-radius: 12px; cursor: pointer; user-select: none;
  background: rgba(118,118,128,0.08); border: 0; font-size: 14px; font-weight: 600; color: var(--mx-ink-900);
}
body.mx.mx-hb .downtime-row:hover { background: rgba(118,118,128,0.12); }
body.mx.mx-hb .downtime-row input[type="checkbox"] {
  order: 2; -webkit-appearance: none; appearance: none; margin: 0; flex-shrink: 0; cursor: pointer; position: relative;
  width: 46px; height: 28px; border-radius: 999px; background: rgba(120,120,128,0.24);
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.06); transition: background .25s ease;
}
body.mx.mx-hb .downtime-row input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.16); transition: transform .3s var(--mx-ease);
}
body.mx.mx-hb .downtime-row input[type="checkbox"]:checked { background: #34c759; }
body.mx.mx-hb .downtime-row input[type="checkbox"]:checked::after { transform: translateX(18px); }
body.mx.mx-hb .downtime-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--mx-link); outline-offset: 2px; }
body.mx.mx-hb .downtime-row > span { order: 1; }
/* Gombsor */
body.mx.mx-hb .modal-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
body.mx.mx-hb .modal-buttons button {
  flex: 0 0 auto; height: 40px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  font-family: var(--mx-font); font-size: 14px; font-weight: 600; line-height: 1;
  transition: filter .15s ease, background .15s ease;
}
body.mx.mx-hb .modal-buttons .btn-cancel, body.mx.mx-hb .modal-buttons .btn-secondary {
  color: var(--mx-ink-900); border: 1px solid rgba(255,255,255,0.9) !important; background: var(--mx-glass-ctl);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(22,26,31,0.14), 0 2px 6px rgba(22,26,31,0.08);
}
body.mx.mx-hb .modal-buttons .btn-cancel:hover, body.mx.mx-hb .modal-buttons .btn-secondary:hover { background: rgba(255,255,255,0.95); }
body.mx.mx-hb .modal-buttons .btn-submit, body.mx.mx-hb .modal-buttons .btn-primary {
  color: #fff; border: 1px solid rgba(255,255,255,0.28);
  background: linear-gradient(180deg, rgba(212,52,44,0.96), rgba(180,32,26,0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.12), 0 4px 12px rgba(196,38,31,0.26);
  transform: none;
}
body.mx.mx-hb .modal-buttons .btn-submit:hover, body.mx.mx-hb .modal-buttons .btn-primary:hover { filter: brightness(1.06); transform: none; }
body.mx.mx-hb .modal-buttons button:disabled { opacity: .6; cursor: not-allowed; filter: none; }

/* Raktár hibabejelentő: áttekintő panelek */
body.mx.mx-hb .rk-layout { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
body.mx.mx-hb .rk-left { min-width: 0; }
body.mx.mx-hb .rk-right { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }
body.mx.mx-hb .rk-panel {
  padding: 16px; border-radius: 24px; background: var(--mx-glass); border: 1px solid var(--mx-glass-border);
  -webkit-backdrop-filter: var(--mx-blur); backdrop-filter: var(--mx-blur); box-shadow: var(--mx-glass-shadow);
}
body.mx.mx-hb .rk-panel h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 15px; font-weight: 700; color: var(--mx-ink-900); }
body.mx.mx-hb .rk-sub { margin: 0 0 12px; font-size: 12.5px; color: var(--mx-ink-600); font-weight: 500; }
body.mx.mx-hb .rk-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--mx-brand); color: #fff; font-size: 11.5px; font-weight: 700; }
body.mx.mx-hb .rk-list { display: flex; flex-direction: column; gap: 8px; }
body.mx.mx-hb .rk-empty { padding: 8px 2px; font-size: 13px; color: var(--mx-ink-600); font-weight: 500; }
body.mx.mx-hb .rk-item { padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,0.6); border: 1px solid rgba(22,26,31,0.06); }
body.mx.mx-hb .rk-area { font-size: 14px; font-weight: 700; color: var(--mx-ink-900); line-height: 1.3; }
body.mx.mx-hb .rk-msg { margin-top: 3px; font-size: 13px; color: var(--mx-ink-700); line-height: 1.4; word-break: break-word; }
body.mx.mx-hb .rk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; font-size: 12px; color: var(--mx-ink-600); font-weight: 500; }
body.mx.mx-hb .rk-who { color: var(--mx-ink-700); }
body.mx.mx-hb .rk-fix { margin-top: 6px; padding: 6px 10px; border-radius: 10px; font-size: 13px; line-height: 1.4; color: #14532d; background: #f1f8f4; border: 1px solid #b7dcc8; word-break: break-word; }
body.mx.mx-hb .rk-fix-lbl { font-weight: 700; }
body.mx.mx-hb .rk-badge { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--mx-ink-900); background: rgba(255,255,255,0.85); border: 1px solid var(--mx-line-300); }
body.mx.mx-hb .rk-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mx-idle); }
body.mx.mx-hb .rk-badge.uj::before { background: var(--mx-warn); }
body.mx.mx-hb .rk-badge.folyamatban::before { background: var(--mx-info); }
body.mx.mx-hb .rk-badge.kesz::before { background: var(--mx-ok); }
body.mx.mx-hb .rk-badge.allas { background: #fdf0ef; color: #8f1d16; border-color: #f1c4c0; }
body.mx.mx-hb .rk-badge.allas::before { background: var(--mx-err); }

@media (max-width: 1024px) {
  body.mx.mx-hb .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.mx.mx-hb .rk-layout { grid-template-columns: 1fr; }
  body.mx.mx-hb .rk-right { position: static; }
}
@media (max-width: 700px) {
  body.mx.mx-hb .area-btn { flex-direction: column; text-align: center; justify-content: center; min-height: 100px; padding: 14px 10px; font-size: 13px; }
  body.mx.mx-hb #modal, body.mx.mx-hb .modal { width: 100%; max-width: 100%; max-height: 100vh; top: 0; left: 0; transform: none; border-radius: 0; padding: 22px 20px; }
  body.mx.mx-hb .modal-buttons { flex-direction: column-reverse; }
  body.mx.mx-hb .modal-buttons button { width: 100%; height: 48px; }
}
@media (max-width: 380px) {
  body.mx.mx-hb .area-grid { grid-template-columns: 1fr; }
  body.mx.mx-hb .area-btn { flex-direction: row; text-align: left; justify-content: flex-start; min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  body.mx *, body.mx *::before, body.mx *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (max-width: 1024px) {
  body.mx .admin-header { margin: 8px 8px 0; padding-left: 64px !important; }
  body.mx .page-content { padding: 12px 8px 24px; }
  body.mx .mx-page-head { padding: 16px; }
}

/* ── Lekerekítés a régi oldalak kártyáin (Liquid Glass arányok) ───────── */
body.mx .kpi, body.mx .prog-card, body.mx .act-card, body.mx .chart-card, body.mx .live-status-card,
body.mx .timeline-card, body.mx .v2-embed-card, body.mx .pm-bubble, body.mx .mvi-ablak { border-radius: 24px; }
body.mx .mv-item, body.mx .pm-tile, body.mx .q-tomeg-block { border-radius: 18px; }
html[data-theme="light"] body.mx.mx-dash .card { border-radius: 24px; }
body.mx .login-box { border-radius: 32px; }

/* A gyártási asszisztens robotja nem jelenik meg az oldalsávban */
body.mx #mxAiBtn { display: none !important; }

/* ───────── Index kártyák és fejléceik – Liquid Glass ───────── */
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) :is(.kpi, .prog-card, .act-card, .chart-card, .live-status-card, .timeline-card, .v2-embed-card) {
  background: rgba(255,255,255,.62) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255,255,255,.8) !important;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(22,26,31,.08), 0 10px 30px rgba(22,26,31,.07) !important;
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) :is(.act-head, .card-hd) {
  background: rgba(255,255,255,.35) !important;
  border-bottom: 1px solid rgba(22,26,31,.07) !important;
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) :is(.act-head .ah-btn, .card-hd .hd-db-link, .card-hd .hd-report-link, .v2-slider-now, .lsc-report-btn:not(.lsc-kijelzo-btn)) {
  border-radius: 999px !important;
  background: rgba(255,255,255,.6) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  color: var(--mx-ink-900, #161a1f) !important;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(22,26,31,.1), 0 2px 8px rgba(22,26,31,.06) !important;
  -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%);
  transition: background .25s ease, box-shadow .25s ease, transform .2s ease;
}
/* Hover: márkapiros árnyalatú üveg, enyhe emelkedés */
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) :is(.act-head .ah-btn, .card-hd .hd-db-link, .card-hd .hd-report-link, .v2-slider-now, .lsc-report-btn:not(.lsc-kijelzo-btn)):hover {
  background: linear-gradient(rgba(196,38,31,.12), rgba(196,38,31,.12)), rgba(255,255,255,.7) !important;
  color: #a51f19 !important;
  border-color: rgba(196,38,31,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(196,38,31,.2), 0 6px 18px rgba(196,38,31,.16) !important;
  transform: translateY(-1px);
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) :is(.act-head .ah-btn, .card-hd .hd-db-link, .card-hd .hd-report-link, .v2-slider-now, .lsc-report-btn):active { transform: scale(.97); }
/* Tervező link: zöld árnyalatú üveg */
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .card-hd .hd-tervezo-link { background: rgba(220,252,231,.6) !important; color: #15803d !important; }
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .card-hd .hd-tervezo-link:hover { background: linear-gradient(rgba(22,163,74,.16), rgba(22,163,74,.16)), rgba(255,255,255,.7) !important; color: #15803d !important; border-color: rgba(22,163,74,.3) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 18px rgba(22,163,74,.18) !important; }
/* Kijelző gomb: sötét üveg */
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .lsc-kijelzo-btn {
  border-radius: 999px !important; background: rgba(22,26,31,.78) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(22,26,31,.18) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .25s ease;
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .lsc-kijelzo-btn:hover { background: rgba(22,26,31,.9) !important; color: #fff !important; }
/* Beágyazott (iframe) v2 oldalak: átlátszó háttér, a kártya üvege látszik */
html:has(body.mx.mx-embed), body.mx.mx-embed { background: transparent !important; }
body.mx.mx-embed::before, body.mx.mx-embed::after { display: none !important; }
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) :is(.act-row:hover, .hsess:hover) { background: rgba(255,255,255,.45) !important; }
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) :is(.q-tomeg-block, .pm-tile:not(.up):not(.lead), .pm-note, .shift-selector button, .day-nav-btn) {
  background: rgba(255,255,255,.5) !important;
  border-color: rgba(22,26,31,.08) !important;
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .day-nav-btn { border-radius: 999px !important; }
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) :is(.pm-bubble, .mvi-ablak) {
  background: rgba(255,255,255,.88) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255,255,255,.9) !important;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(22,26,31,.1), 0 24px 60px rgba(22,26,31,.18) !important;
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .pm-caret { background: rgba(255,255,255,.88) !important; }

/* „Nap összesen” sor: lekerekített üvegbuborék, a kártya ívéhez illesztve */
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .tp-table { border-collapse: separate !important; border-spacing: 0; }
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .tp-table tr.tp-sum td {
  background: rgba(255,255,255,.62) !important;
  border-top: 1px solid rgba(255,255,255,.9) !important;
  border-bottom: 1px solid rgba(22,26,31,.06) !important;
  box-shadow: inset 0 1px 0 #fff;
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .tp-table tr.tp-sum td:first-child {
  border-radius: 16px 0 0 16px; border-left: 1px solid rgba(255,255,255,.9) !important;
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .tp-table tr.tp-sum td:last-child {
  border-radius: 0 16px 16px 0; border-right: 1px solid rgba(255,255,255,.9) !important;
}
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .tp-table tbody tr:nth-last-child(2):has(+ tr.tp-sum) td { border-bottom-color: transparent !important; }

/* ───────── Oldalsáv: logó középen, kapszula alakú kijelölés (Liquid Glass) ───────── */
@media (min-width: 1025px) {
  body.mx .side-menu:not(.collapsed) .menu-header { position: relative; justify-content: center; }
  body.mx .side-menu:not(.collapsed) .mh-brand { justify-content: center; }
  body.mx .side-menu:not(.collapsed) .menu-header .s-toggle { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
}
@media (max-width: 1024px) {
  body.mx .side-menu .menu-header { position: relative; justify-content: center !important; }
  body.mx .side-menu .mh-brand { justify-content: center; }
  body.mx .side-menu .menu-header .s-toggle { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
}
body.mx .side-menu .s-toggle { min-width: 32px; width: 32px; height: 32px; padding: 0; box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(22,26,31,.1), 0 2px 6px rgba(22,26,31,.06); }

/* Menüpontok: kapszula (pill) — hover és a csúszó kijelölés is */
body.mx .side-menu .m-link,
body.mx .side-menu .m-sublink { border-radius: 999px; }
body.mx .mx-nav-hl {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.62)), rgba(196,38,31,.06);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(196,38,31,.06), 0 0 0 .5px rgba(196,38,31,.18), 0 6px 16px rgba(196,38,31,.12), 0 1px 3px rgba(22,26,31,.06);
  box-sizing: border-box;
}
body.mx .side-menu.collapsed .m-flyout .m-sublink { border-radius: 999px; }
body.mx .side-menu .m-flyout { border-radius: 22px; }

/* ───────── Átnézés (2026-10-01): maradék szögletes elemek → Liquid Glass ívek ───────── */
/* Gombok: kapszula */
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) :is(
  .glass-chart-btn, [id^="btnHcu"], .rot-btn, .au-b, .au-pdf, .au-lezar, .au-tab, .au-archbtn, .au-lockbtn, .au-add,
  .gt-mini, .gt-nav, .pb-btn, .pb-off, .nav-day, .tab-btn, .subtab, .month-display, .view-cap-nav,
  .kz-clear, .ws-btn, .pg-btn, .op-tab, .seg-btn, .day-nav-btn, .shift-selector button
) { border-radius: 999px !important; }
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .page-content button:not([class]):not([id]),
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .page-content button.danger,
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .page-content button.ok,
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .page-content button.bad { border-radius: 999px !important; }
/* Panelek, kártyák: nagy ív */
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) :is(
  .chart-section, .work-card, .kz-col, .ws-card, .month-wrap, .gen-section, .v2-live-wrap,
  .tld-sidebar, #spTabla.sp-tw, .kz-kpis > *, .ws-kpis > *
) { border-radius: 24px !important; }
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) :is(
  .hcu-stat-pie-col, .toolbar-strip, .chart-tabbar, .gt-shift, .terv-item, .mini-timeline, .insp-item,
  .legend, .warn, .pagebar, .au-foot, .v2-week-strip
) { border-radius: 18px !important; }
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .tmkmonitor .panel-head,
:root:not([data-theme="dark"]) body.mx:not(.mx-dark) .panel-head { border-top-left-radius: inherit; border-top-right-radius: inherit; }
/* Címkék: kapszula */
body.mx .mx-tag { border-radius: 999px; }

/* ═══════════ Beágyazott oldalak + GYÁRTÁSTERVEZŐK (panír, hús) — Liquid Glass ═══════════ */
/* Keret: nincs szögletes háttér-kocka — a külső oldal háttere fut alá */
html.mx-framed:has(body.mx:not(.mx-dark)), html.mx-framed body.mx:not(.mx-dark),
html:has(body.mx.mx-terv), body.mx.mx-terv { background: transparent !important; }
body.mx :is(.terv-shell-frame, .terv-frame-wrap) { background: transparent !important; }
body.mx .terv-shell-frame { color-scheme: light; }

body.mx.mx-terv {
  --card: rgba(255,255,255,.55);
  --mx-glass: rgba(255,255,255,.55);
  --mx-glass-strong: rgba(255,255,255,.72);
  --mx-glass-edge: rgba(255,255,255,.8);
  --mx-glass-sh: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 .5px rgba(22,26,31,.07), 0 10px 28px rgba(22,26,31,.07);
}
/* Nagy panelek: üveg + blur */
body.mx.mx-terv :is(.card, .toolbar, .gtx-hint, .readonly-note, .empty, #piszkozat-cards > div) {
  background: var(--mx-glass) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid var(--mx-glass-edge) !important;
  box-shadow: var(--mx-glass-sh) !important;
  border-radius: 24px !important;
}
#piszkozat-cards > div { border-radius: 20px !important; }
body.mx.mx-terv #piszkozat-cards > div:hover { background: var(--mx-glass-strong) !important; transform: translateY(-1px); }
/* Sorok, csempék a paneleken belül: áttetsző üveg (blur nélkül — a panel már homályosít) */
body.mx.mx-terv :is(.item-row, .product-row, .stat-tile, .type-btn, .wk-card, .mid-card, .cat-card, .be-item, .be-pcat, .be-pitem) {
  background: rgba(255,255,255,.4) !important;
  border: 1px solid rgba(255,255,255,.75) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(22,26,31,.06), 0 2px 8px rgba(22,26,31,.04) !important;
}
body.mx.mx-terv :is(.item-row, .product-row, .be-item) { border-radius: 16px !important; }
body.mx.mx-terv :is(.stat-tile, .type-btn, .wk-card, .mid-card, .cat-card, .be-pcat) { border-radius: 20px !important; }
body.mx.mx-terv .be-pitem { border-radius: 14px !important; }
body.mx.mx-terv :is(.item-row, .wk-card, .mid-card, .cat-card, .type-btn, .stat-tile):hover {
  background: rgba(255,255,255,.75) !important;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(22,26,31,.08), 0 8px 20px rgba(22,26,31,.08) !important;
}
/* Kiválasztott / aktív: márkapiros árnyalatú üveg */
body.mx.mx-terv :is(.wk-card.active, .mid-card.active, .mid-card.heti.active, .type-btn.active) {
  background: linear-gradient(rgba(196,38,31,.08), rgba(196,38,31,.08)), rgba(255,255,255,.7) !important;
  border-color: rgba(196,38,31,.38) !important;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(196,38,31,.25), 0 8px 22px rgba(196,38,31,.14) !important;
}
body.mx.mx-terv .mid-card.heti:not(.active) { background: linear-gradient(rgba(196,38,31,.05), rgba(196,38,31,.05)), rgba(255,255,255,.55) !important; }
/* Állapot-színek megmaradnak, üvegesen */
body.mx.mx-terv .cat-card.st-amber { background: linear-gradient(rgba(245,158,11,.14), rgba(245,158,11,.14)), rgba(255,255,255,.55) !important; border-color: rgba(245,158,11,.45) !important; }
body.mx.mx-terv .cat-card.st-green { background: linear-gradient(rgba(16,185,129,.14), rgba(16,185,129,.14)), rgba(255,255,255,.55) !important; border-color: rgba(16,185,129,.45) !important; }
body.mx.mx-terv .cat-card.active { border-color: rgba(196,38,31,.45) !important; box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(196,38,31,.25), 0 8px 22px rgba(196,38,31,.14) !important; }
body.mx.mx-terv .mid-card.day-target { background: linear-gradient(rgba(250,204,21,.22), rgba(250,204,21,.22)), rgba(255,255,255,.6) !important; border-color: rgba(245,158,11,.6) !important; outline: none; }
body.mx.mx-terv .be-item.cont { background: rgba(255,255,255,.35) !important; }
/* Napfejléc (panír): kék sáv helyett üveg kapszula */
body.mx.mx-terv .day-header {
  background: linear-gradient(rgba(37,99,235,.08), rgba(37,99,235,.08)), rgba(255,255,255,.5) !important;
  border: 1px solid rgba(255,255,255,.8) !important; border-left: 1px solid rgba(255,255,255,.8) !important;
  border-radius: 999px !important; padding: 7px 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(37,99,235,.15) !important;
}
/* Idővonal sáv */
body.mx.mx-terv .week-strip { border-radius: 16px !important; overflow: hidden; background: rgba(255,255,255,.4) !important; box-shadow: inset 0 0 0 .5px rgba(22,26,31,.08); }
/* Típus-pont: kör */
body.mx.mx-terv .type-dot { border-radius: 50% !important; }
/* Gombok: kapszula */
body.mx.mx-terv :is(.btn, .btn-icon, .wk-acts button, .be-mini, .item-row .raklap-edit button, .add-form .raklap-counter button) { border-radius: 999px !important; }
body.mx.mx-terv .btn-icon { background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8); }
body.mx.mx-terv .btn-icon:hover { background: rgba(255,255,255,.9); }
/* Raklap léptető: iOS stepper */
body.mx.mx-terv .item-row .raklap-edit {
  border-radius: 999px !important; background: rgba(118,118,128,.10) !important; border: 0 !important; padding: 2px; overflow: hidden;
}
body.mx.mx-terv .item-row .raklap-edit input { background: transparent !important; border: 0 !important; border-radius: 999px !important; }
body.mx.mx-terv :is(.product-row .product-raklap-input, .product-row .product-karton-input, td.incell input, td.incell.uc .uin) { border-radius: 10px !important; }
/* Táblák (hús heti rács, panír statisztika, mátrix) */
body.mx.mx-terv :is(table.grid thead th, table.grid th.pnev, table.grid td.pnev, th.oss, td.oss, .stat-table th, .matrix-grid th) { background: rgba(255,255,255,.45) !important; }
body.mx.mx-terv :is(table.grid tr.fogrp td, table.grid tr.fogrp td.pnev) { background: rgba(37,99,235,.07) !important; }
body.mx.mx-terv .card table { border-collapse: separate; border-spacing: 0; }
/* Felugró ablakok, lenyíló lista */
body.mx.mx-terv :is(.modal) {
  background: rgba(255,255,255,.86) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255,255,255,.9) !important; border-radius: 28px !important;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(22,26,31,.1), 0 24px 60px rgba(22,26,31,.2) !important;
}
body.mx.mx-terv .autocomplete-list {
  background: rgba(255,255,255,.9) !important; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border-radius: 0 0 18px 18px !important; box-shadow: 0 16px 40px rgba(22,26,31,.14) !important;
}
/* Takarítás-sávok a listában: kapszula */
body.mx.mx-terv .tak-sav { border-radius: 999px !important; padding-left: 16px !important; }
body.mx.mx-terv .tak-sav-kell { background: linear-gradient(rgba(249,115,22,.10), rgba(249,115,22,.10)), rgba(255,255,255,.5) !important; border: 1px solid rgba(249,115,22,.35) !important; }
body.mx.mx-terv .tak-sav-kihagyva { background: rgba(255,255,255,.45) !important; border: 1px dashed rgba(100,116,139,.45) !important; }
body.mx.mx-terv #items-list > div[style*="dashed"] { border-radius: 999px !important; padding-left: 16px !important; }

/* ═══════════ Gyártási terv (panír, hús): lebegő üveg hét-oldalsáv ═══════════ */
@media screen and (min-width: 769px) {
  body.mx .tld-sidebar {
    top: 12px !important; left: 12px !important; bottom: 12px !important; width: 258px !important;
    background: rgba(255,255,255,.5) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255,255,255,.8) !important; border-radius: 28px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 .5px rgba(22,26,31,.08), 0 18px 44px rgba(22,26,31,.12) !important;
    padding: 14px 10px 24px !important;
  }
  body.mx .tld-main { margin-left: 282px !important; }
}
body.mx .tld-sidebar::-webkit-scrollbar { width: 6px; }
body.mx .tld-sidebar::-webkit-scrollbar-thumb { background: rgba(22,26,31,.14); border-radius: 999px; }
/* Hét-sorok: kapszula, fekete hétszám */
body.mx .tld-sb-link, body.mx .tld-sb-print { border-radius: 999px !important; }
body.mx .tld-sb-link, body.mx .tld-sb-link .w,
body.mx .tld-sb-row.active .tld-sb-link, body.mx .tld-sb-row.active .tld-sb-link .w { color: #16191d !important; }
body.mx .tld-sb-row.active .tld-sb-link .d { color: var(--mx-ink-600, #5b636d) !important; }
body.mx .tld-sb-link:hover { background: rgba(255,255,255,.6) !important; }
body.mx .tld-sb-print:hover { background: rgba(255,255,255,.7) !important; }
body.mx .tld-sb-link .tag { border-radius: 999px !important; }
/* Csúszó jelölő: üveg kapszula (a piros/zöld teli sáv helyett) */
body.mx .tld-sb-ind {
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.7)), rgba(196,38,31,.06) !important;
  border: 1px solid rgba(255,255,255,.9); box-sizing: border-box;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(196,38,31,.2), 0 6px 16px rgba(196,38,31,.12), 0 1px 3px rgba(22,26,31,.06);
  transition: transform .55s var(--mx-ease, cubic-bezier(.32,.72,0,1)), height .55s var(--mx-ease, cubic-bezier(.32,.72,0,1)) !important;
}
/* Alapanyag igény gomb + mobil kinyitó: kapszula */
body.mx .tld-sb-alap { border-radius: 999px !important; }
body.mx .tld-sb-toggle { border-radius: 0 999px 999px 0 !important; }
body.mx .tld-sb-alap, body.mx .tld-sb-alap:hover { color: #fff !important; }
body.mx .tld-sb-alap { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px rgba(30,58,138,.25) !important; }

/* Beágyazott (shell-iframe) oldal: nincs saját oldalsáv → nincs bal behúzás sem (ne csússzon el) */
body.mx.embed-mode { --mx-inset: 12px; }
body.mx.embed-mode .admin-main { padding-left: 12px !important; padding-right: 0 !important; }
html.mx-framed body.mx:has(.side-menu[style*="none"]) .admin-main,
html.mx-framed body.mx.embed-mode .admin-main { padding-left: 12px !important; }

/* Összecsukott menü oldalsó almenüje: üveg buborék, a menü mellett */
@media (min-width: 1025px) {
  body.mx .side-menu.collapsed .m-flyout {
    border-radius: 22px !important; border: 1px solid rgba(255,255,255,.85) !important;
    box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(22,26,31,.08), 0 22px 50px rgba(22,26,31,.18) !important;
  }
}

/* Összecsukott menü almenüje: SIMA kinyílás, pattogás nélkül */
@media (min-width: 1025px) {
  body.mx .side-menu.collapsed .m-flyout {
    transform: translateX(-10px) scale(.97) !important; transform-origin: left top;
    transition: opacity .26s cubic-bezier(.32,.72,0,1), transform .34s cubic-bezier(.32,.72,0,1), visibility 0s linear .26s !important;
  }
  body.mx .side-menu.collapsed .m-flyout-wrap.open > .m-flyout {
    transform: translateX(0) scale(1) !important;
    transition: opacity .22s cubic-bezier(.32,.72,0,1), transform .34s cubic-bezier(.32,.72,0,1), visibility 0s linear 0s !important;
  }
  /* Láthatatlan „híd” a menücsík és a buborék közti résen: átvitelkor nem zárul be */
  body.mx .side-menu.collapsed .m-flyout { overflow: visible !important; }   /* a híd ne vágódjon le */
  body.mx .side-menu.collapsed .m-flyout::before {
    display: block !important; content: ""; position: absolute; top: -6px; bottom: -6px; left: -18px; width: 18px; background: transparent;
    pointer-events: none !important;
  }
  body.mx .side-menu.collapsed .m-flyout-wrap.open > .m-flyout::before { pointer-events: auto !important; }
}

/* ═══════════ Olvashatóság: vastagabb, picit nagyobb betű mindenhol ═══════════ */
/* A Nunito 400-as vágása vékony → alapból 500; a kis x-magasságot a font-size-adjust
   egységesen, minimálisan (~4%) megnöveli; egy hajszálnyi körvonal (text-stroke)
   minden súlyon — a régi oldalak saját font-weight értékein is — vastagít. */
body.mx { font-weight: 500; font-size-adjust: 0.505; -webkit-font-smoothing: auto; }
body.mx :is(input, select, textarea, button) { font-size-adjust: 0.505; }
body.mx:not(.mx-dark) { -webkit-text-stroke: 0.2px currentColor; }
body.mx.mx-dark { -webkit-text-stroke: 0.15px currentColor; }
/* Ikonok / emojik / kódok ne kapjanak körvonalat */
body.mx :is(svg, svg *, img, .icon, .ico, code, pre, kbd, [class*="emoji"]) { -webkit-text-stroke: 0; }
@media print { body.mx { -webkit-text-stroke: 0 !important; } }

/* Összecsukott menü: menüpont neve üveg címkében (meatrix.js) */
.mx-side-tip {
  position: fixed; z-index: 10000; left: 0; top: 0; pointer-events: none;
  padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  font-family: var(--mx-font); font-size: 13.5px; font-weight: 700; color: var(--mx-ink-900, #16191d);
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(22,26,31,.08), 0 12px 30px rgba(22,26,31,.16);
  opacity: 0; transform: translate(-8px, -50%) scale(.97); transform-origin: left center;
  transition: opacity .22s cubic-bezier(.32,.72,0,1), transform .3s cubic-bezier(.32,.72,0,1);
}
.mx-side-tip.is-on { opacity: 1; transform: translate(0, -50%) scale(1); }
@media (max-width: 1024px) { .mx-side-tip { display: none; } }

/* Almenüs csoport neve az összecsukott menü buborékában: ugyanaz a forma, mint a sima menüpontok név-címkéjén */
body.mx .side-menu.collapsed .m-flyout .m-flyout-title {
  font-family: var(--mx-font); font-size: 13.5px !important; font-weight: 700 !important;
  text-transform: none !important; letter-spacing: 0 !important; color: var(--mx-ink-900, #16191d) !important;
  padding: 4px 12px 8px !important; margin: 0 0 4px !important;
  border-bottom: 1px solid rgba(22,26,31,.07);
}

/* Menü összecsukás/kinyitás alatt: könnyített rajzolás, a kiemelés rejtve */
body.mx .mx-nav-hl.mx-hl-hide { opacity: 0 !important; transition: opacity .12s ease !important; }

/* ═══════════ Minden oldal tartalma pontosan a fejléc szélességében ═══════════
   A fejléc a menü mellett (bal behúzás) indul és 12 px-re végződik a jobb széltől;
   a tartalom bal és jobb széle ugyanide igazodik (nincs plusz belső behúzás,
   nincs középre szűkített maximális szélesség). */
@media (min-width: 1025px) {
  body.mx:not(.mx-dark) .admin-main > .page-content { padding-left: 0 !important; padding-right: 12px !important; }
  body.mx:not(.mx-dark) .admin-main > .page-content > .content-wrap { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
  body.mx .terv-frame-wrap { margin-right: 12px; }
  body.mx.embed-mode .admin-main > .page-content { padding-right: 12px !important; }
}