/* ============================================================================
   MOVASOL UI KIT — "Control Room" design system
   Loaded AFTER movasol-brand.css (see layouts/head-css.blade.php). Plain CSS, no
   build step. This is the SHARED component layer the redesign composes from:
   one canonical table, card, chip, tile, page-shell, form field and state — so
   pages stay consistent and new features are "compose components", not copy-paste.

   Character (Control Room): high density, green reserved for actions + status,
   the dark #333b4b table header as the signature — in BOTH light and dark themes.
   All surfaces/text/borders are TOKENS so dark mode is free and per-page hardcoded
   colors can be retired onto --mv-* over time.
   Namespace: .mv-* classes + <x-ui.*> Blade components in components/ui/.
   ============================================================================ */

:root {
  /* spacing scale (4px base) */
  --mv-space-1: 4px;  --mv-space-2: 8px;  --mv-space-3: 12px;
  --mv-space-4: 16px; --mv-space-5: 20px; --mv-space-6: 24px; --mv-space-8: 32px;
  --mv-radius-sm: 6px; --mv-radius: 9px; --mv-radius-lg: 14px;

  /* surfaces / text / lines — LIGHT theme (dense, high-contrast, not washed-out) */
  --mv-surface:   #ffffff;
  --mv-surface-2: #f3f6f7;
  --mv-surface-3: #e9edef;
  --mv-line:      #e2e7ea;
  --mv-line-2:    #d2d9dd;
  --mv-text:        #1b2126;
  --mv-text-muted:  #58636b;
  --mv-text-faint:  #8b959c;

  /* the signature: dark table header in BOTH modes */
  --mv-tblhead:      #333b4b;
  --mv-tblhead-text: #eef1f6;
  --mv-tblhead-mut:  #aab3c0;

  /* accent (brand green) — reserved for actions + active/OK state */
  --mv-accent:        #2fad6f;
  --mv-accent-strong: #1f8052;
  --mv-accent-wash:   rgba(47, 173, 111, .10);
  --mv-on-accent:     #06140d;

  /* semantic status — SEPARATE from the accent hue */
  --mv-ok:   #2fad6f; --mv-ok-rgb: 47,173,111;
  --mv-warn: #c1841c; --mv-warn-rgb: 193,132,28;
  --mv-crit: #d43b39; --mv-crit-rgb: 212,59,57;
  --mv-info: #366fd0; --mv-info-rgb: 54,111,208;
  --mv-idle: #8b959c; --mv-idle-rgb: 139,149,156;

  --mv-shadow:    0 1px 2px rgba(16,24,40,.06), 0 6px 22px rgba(16,24,40,.07);
  --mv-shadow-sm: 0 1px 2px rgba(16,24,40,.08);
}

:root.dark, [data-color-theme="dark"] {
  --mv-surface:   #161a20;
  --mv-surface-2: #1c212a;
  --mv-surface-3: #232a34;
  --mv-line:      #29313b;
  --mv-line-2:    #39434f;
  --mv-text:        #e9efeb;
  --mv-text-muted:  #94a19b;
  --mv-text-faint:  #68736d;

  --mv-tblhead:      #2c333f;
  --mv-tblhead-text: #e2e8f0;
  --mv-tblhead-mut:  #97a2b2;

  --mv-accent:        #34c07b;
  --mv-accent-strong: #41cf88;
  --mv-accent-wash:   rgba(47, 173, 111, .15);
  --mv-on-accent:     #06140d;

  --mv-ok:   #41cf88; --mv-ok-rgb: 65,207,136;
  --mv-warn: #e3a83a; --mv-warn-rgb: 227,168,58;
  --mv-crit: #e5544c; --mv-crit-rgb: 229,84,76;
  --mv-info: #5b8def; --mv-info-rgb: 91,141,239;
  --mv-idle: #7c8891; --mv-idle-rgb: 124,136,145;

  --mv-shadow:    0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.32);
  --mv-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
}

/* ============================ Page shell ============================ */
.mv-page { display: flex; flex-direction: column; gap: var(--mv-space-5); }
.mv-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--mv-space-4); }
.mv-page-head .mv-h { display: flex; flex-direction: column; gap: 3px; }
.mv-page-title { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--mv-text); margin: 0; line-height: 1.1; }
.mv-page-sub { font-size: 13px; color: var(--mv-text-muted); }
.mv-page-actions { display: flex; align-items: center; gap: var(--mv-space-2); flex-wrap: wrap; }

/* ============================ Card ============================ */
.mv-card { background: var(--mv-surface); border: 1px solid var(--mv-line); border-radius: var(--mv-radius); box-shadow: var(--mv-shadow-sm); overflow: hidden; }
.mv-card-head { display: flex; align-items: center; gap: var(--mv-space-3); padding: 13px var(--mv-space-4); border-bottom: 1px solid var(--mv-line); }
.mv-card-head h3, .mv-card-title { font-size: 14px; font-weight: 800; color: var(--mv-text); margin: 0; }
.mv-card-head .mv-card-actions { margin-left: auto; display: flex; align-items: center; gap: var(--mv-space-2); }
.mv-card-body { padding: var(--mv-space-4); }
.mv-card-body.flush { padding: 0; }

/* ============================ Stat tile ============================ */
.mv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--mv-space-3); }
.mv-tile { position: relative; background: var(--mv-surface); border: 1px solid var(--mv-line); border-radius: var(--mv-radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.mv-tile-label { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--mv-text-muted); font-weight: 700; }
.mv-tile-value { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--mv-text); font-variant-numeric: tabular-nums; }
.mv-tile-value small { font-size: 13px; font-weight: 600; color: var(--mv-text-faint); letter-spacing: 0; }
.mv-tile-delta { font-size: 12px; font-weight: 700; }
.mv-tile-delta.up { color: var(--mv-ok); } .mv-tile-delta.down { color: var(--mv-crit); } .mv-tile-delta.flat { color: var(--mv-text-muted); }
.mv-tile.alert { border-color: rgba(var(--mv-crit-rgb), .5); }

/* ============================ Data table (canonical) ============================ */
.mv-table-wrap { overflow-x: auto; }                    /* wide tables scroll here, page body never does */
.mv-table-scroll { max-height: 62vh; overflow-y: auto; }
/* Széles DataTables lista: a .mv-card overflow:hidden levágná a jobb szélső (Művelet) oszlopot,
   ha a tábla szélesebb a kártyánál → a táblát init után ebbe csomagoljuk, itt görget vízszintesen.
   (overflow-x:auto → a spec overflow-y-t is auto-ra húzza; a sticky fejléc emiatt nem tapad
   görgetéskor, ami lapozott 10-soros listákon elhanyagolható.) */
.mv-dt-scroll { overflow-x: auto; }
table.mv-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; color: var(--mv-text); }
/* NOTE: child combinators (> tbody > tr > td) — specificity 0,1,4 — so these tie DataTables'
   own `table.dataTable>tbody>tr>td` rules and win by load order (movasol-ui.css loads AFTER the
   DataTables CDN). Descendant selectors (0,1,3) would LOSE to DataTables and the spacing/colours
   would never apply on server-side tables. */
table.mv-table > thead > tr > th {
  position: sticky; top: 0; z-index: 4;
  background: var(--mv-tblhead); color: var(--mv-tblhead-text);
  text-align: left; font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  padding: 13px 16px; white-space: nowrap; box-shadow: inset 0 -1px 0 rgba(255,255,255,.10);
}
table.mv-table > thead > tr > th.r, table.mv-table > tbody > tr > td.r { text-align: right; }
table.mv-table > thead > tr > th.c, table.mv-table > tbody > tr > td.c { text-align: center; }
table.mv-table > tbody > tr > td { padding: 17px 16px; border-top: 1px solid var(--mv-line); vertical-align: middle; }
table.mv-table > tbody > tr > td.num, table.mv-table > tbody > tr > td.r { font-variant-numeric: tabular-nums; }
table.mv-table > tbody > tr { border-left: 3px solid transparent; }
table.mv-table > tbody > tr:nth-child(even) > td { background: color-mix(in srgb, var(--mv-surface-2) 55%, transparent); }
table.mv-table > tbody > tr:hover > td { background: var(--mv-accent-wash); }
table.mv-table > tbody > tr.is-active { border-left-color: var(--mv-accent); }
table.mv-table > tbody > tr.is-active > td { background: var(--mv-accent-wash); }
table.mv-table td.ellip, table.mv-table td.col-ellip { max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.mv-table td.col-park { overflow: hidden; }
table.mv-table.fixed { table-layout: fixed; }   /* dense server-side tables: widths from <th style="width:…"> */
/* A bootstrap validációs jelzése 18px ikont ÉS 36px jobb paddinget rak a mezőbe — egy szűk
   tétel-oszlopban (pl. Mennyiség, ~70px) ettől kicsúszik a látóterből a beírt érték.
   A sűrű táblákban ezért csak a keret-szín jelzi az állapotot. */
.mv-table .form-control.is-valid, .mv-table .form-control.is-invalid {
    background-image: none; padding-right: 12px;
}
/* Ugyanitt a szám-mezők pörgetője is elfogy: a szűk cellában ráúszik az értékre, és a
   tört lépésköz miatt (0,01) használhatatlan. Pörgető nélkül a mező szabadon gépelhető,
   de type=number marad → mobilon numerikus billentyűzet, és numerikus validáció. */
.mv-table input[type=number]::-webkit-outer-spin-button,
.mv-table input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mv-table input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* --- Régi Bootstrap .table-k → a Feladatok-etalon (mv-table) kinézete: homogén dizájn ---
   Sok űrlap/nézet még sima .table (table-bordered/striped/hover) al-táblát használ; ezekkel
   ugyanazt a sötét fejléc + finom vonalak + zöld hover stílust kapják. .page-content-re szűkítve
   (login/e-mail/PDF nem tölti ezt a CSS-t). Child combinatorok — hogy a Bootstrap/DataTables
   szabályokat specificitásban verjék (mv-table alól kizárva). Opt-out: .table.mv-raw. */
.page-content .table:not(.mv-table):not(.mv-raw) {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13.5px; color: var(--mv-text); margin-bottom: 0; border: 0;
}
.page-content .table:not(.mv-table):not(.mv-raw) > thead > tr > th {
  background: var(--mv-tblhead); color: var(--mv-tblhead-text);
  text-align: left; font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  padding: 12px 14px; white-space: nowrap; border: 0; box-shadow: inset 0 -1px 0 rgba(255,255,255,.10);
}
.page-content .table:not(.mv-table):not(.mv-raw) > tbody > tr > td,
.page-content .table:not(.mv-table):not(.mv-raw) > tbody > tr > th,
.page-content .table:not(.mv-table):not(.mv-raw) > tr > td,
.page-content .table:not(.mv-table):not(.mv-raw) > tr > th {
  padding: 12px 14px; border: 0; border-top: 1px solid var(--mv-line);
  vertical-align: middle; color: var(--mv-text); background: transparent;
}
.page-content .table:not(.mv-table):not(.mv-raw) > tbody > tr:nth-child(even) > td { background: color-mix(in srgb, var(--mv-surface-2) 55%, transparent); }
.page-content .table:not(.mv-table):not(.mv-raw) > tbody > tr:hover > td { background: var(--mv-accent-wash); }
.page-content .table:not(.mv-table):not(.mv-raw) > tfoot > tr > td { padding: 12px 14px; border-top: 2px solid var(--mv-line); font-weight: 700; }

/* card toolbar (tabs left · actions right) + search input */
.mv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px var(--mv-space-4); border-bottom: 1px solid var(--mv-line); }
.mv-toolbar-end { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mv-search { display: inline-flex; align-items: center; gap: 8px; background: var(--mv-surface); border: 1px solid var(--mv-line-2); border-radius: 8px; padding: 0 12px; height: 34px; color: var(--mv-text-faint); min-width: 210px; }
.mv-search input { border: 0; background: transparent; outline: 0; color: var(--mv-text); font: inherit; font-size: 13px; width: 100%; }
.mv-search input::placeholder { color: var(--mv-text-faint); }
.mv-cellstack { display: flex; flex-direction: column; gap: 3px; line-height: 1.4; }
.mv-cellstack b { font-weight: 700; color: var(--mv-text); }
.mv-cellstack .sub, .mv-id { font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; font-size: 11px; color: var(--mv-text-faint); letter-spacing: .03em; }

/* ============================ Status chip (dot + label) ============================ */
.mv-chip { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12px; line-height: 1; padding: 4px 10px 4px 8px; border-radius: 100px; border: 1px solid var(--mv-line-2); background: var(--mv-surface); color: var(--mv-text-muted); white-space: nowrap; }
.mv-chip .mv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mv-idle); flex: 0 0 auto; }
.mv-chip.ok   { color: var(--mv-accent-strong); border-color: rgba(var(--mv-ok-rgb), .40); }   .mv-chip.ok .mv-dot   { background: var(--mv-ok);   box-shadow: 0 0 0 3px rgba(var(--mv-ok-rgb), .16); }
.mv-chip.warn { color: var(--mv-warn); border-color: rgba(var(--mv-warn-rgb), .42); }          .mv-chip.warn .mv-dot { background: var(--mv-warn); box-shadow: 0 0 0 3px rgba(var(--mv-warn-rgb), .16); }
.mv-chip.crit { color: var(--mv-crit); border-color: rgba(var(--mv-crit-rgb), .46); }          .mv-chip.crit .mv-dot { background: var(--mv-crit); box-shadow: 0 0 0 3px rgba(var(--mv-crit-rgb), .16); }
.mv-chip.info { color: var(--mv-info); border-color: rgba(var(--mv-info-rgb), .42); }           .mv-chip.info .mv-dot { background: var(--mv-info); }
.mv-chip.idle { color: var(--mv-text-muted); }
.mv-chip.plain { border-radius: var(--mv-radius-sm); }

/* severity band (bar + label) */
.mv-sev { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.mv-sev .bar { width: 44px; height: 6px; border-radius: 100px; background: var(--mv-surface-3); overflow: hidden; flex: 0 0 auto; }
.mv-sev .bar i { display: block; height: 100%; border-radius: 100px; }

/* ============================ Buttons ============================ */
.mv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid transparent; font-family: inherit; font-weight: 700; font-size: 13.5px; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s; }
.mv-btn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.mv-btn.block { width: 100%; }
.mv-btn-primary { background: var(--mv-accent); color: var(--mv-on-accent); }
.mv-btn-primary:hover { background: var(--mv-accent-strong); color: var(--mv-on-accent); }
.mv-btn-ghost { background: transparent; border-color: var(--mv-line-2); color: var(--mv-text); }
.mv-btn-ghost:hover { background: var(--mv-surface-2); color: var(--mv-text); }
.mv-btn-danger { background: transparent; border-color: rgba(var(--mv-crit-rgb), .5); color: var(--mv-crit); }
.mv-btn-danger:hover { background: rgba(var(--mv-crit-rgb), .10); }
/* <a class="mv-btn"> must keep its own text color, not inherit the theme's dark-mode link color (brand.css `[data-color-theme=dark] a`, specificity 0,1,1). These a.* rules are 0,2,0 and win. */
a.mv-btn-primary, a.mv-btn-primary:hover, a.mv-btn-primary:focus { color: var(--mv-on-accent); }
a.mv-btn-ghost,   a.mv-btn-ghost:hover,   a.mv-btn-ghost:focus   { color: var(--mv-text); }
a.mv-btn-danger,  a.mv-btn-danger:hover,  a.mv-btn-danger:focus  { color: var(--mv-crit); }
.mv-btn-icon { width: 34px; height: 34px; padding: 0; border-radius: 8px; border: 1px solid var(--mv-line-2); background: var(--mv-surface); color: var(--mv-text-muted); display: inline-grid; place-items: center; }
.mv-btn-icon:hover { color: var(--mv-text); background: var(--mv-surface-2); }

/* ============================ Form field ============================ */
.mv-field { display: flex; flex-direction: column; gap: 6px; }
.mv-field > label, .mv-label { font-size: 12.5px; font-weight: 700; color: var(--mv-text); }
.mv-field.req > label::after, .mv-label.req::after { content: " *"; color: var(--mv-crit); font-weight: 800; }
.mv-field .mv-hint { font-size: 12px; color: var(--mv-text-muted); }
.mv-field .mv-err { font-size: 12px; color: var(--mv-crit); font-weight: 600; }
.mv-field.has-error .mv-control, .mv-field.has-error :is(input,select,textarea).form-control { border-color: var(--mv-crit); }

/* ============================ Form section ============================ */
.mv-section { display: flex; flex-direction: column; gap: var(--mv-space-4); }
.mv-section + .mv-section { margin-top: var(--mv-space-6); padding-top: var(--mv-space-6); border-top: 1px solid var(--mv-line); }
.mv-section-title { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--mv-text-muted); }
.mv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--mv-space-4); }
.mv-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .mv-grid, .mv-grid.cols-2 { grid-template-columns: 1fr; } }

/* ============================ States (empty / loading / error) ============================ */
.mv-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 44px 24px; color: var(--mv-text-muted); }
.mv-state .mv-state-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: var(--mv-surface-2); color: var(--mv-text-faint); }
.mv-state.error .mv-state-icon { background: rgba(var(--mv-crit-rgb), .12); color: var(--mv-crit); }
.mv-state .mv-state-title { font-size: 15px; font-weight: 700; color: var(--mv-text); }
.mv-state .mv-state-sub { font-size: 13px; max-width: 42ch; }
.mv-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--mv-line-2); border-top-color: var(--mv-accent); animation: mv-spin .8s linear infinite; }
@keyframes mv-spin { to { transform: rotate(360deg); } }

/* ============================ Tabs / pills ============================ */
.mv-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.mv-tab { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--mv-text-muted); padding: 6px 12px; border-radius: 100px; border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.mv-tab:hover { background: var(--mv-surface-2); color: var(--mv-text); }
.mv-tab.active { background: var(--mv-surface-3); color: var(--mv-text); border-color: var(--mv-line-2); }
.mv-tab .mv-count { font-size: 11px; font-weight: 800; background: var(--mv-surface); color: var(--mv-text-muted); border-radius: 100px; padding: 1px 7px; }
.mv-tab.active .mv-count { background: var(--mv-accent); color: var(--mv-on-accent); }

/* keyboard focus — visible in both themes */
.mv-btn:focus-visible, .mv-tab:focus-visible, .mv-btn-icon:focus-visible, .mv-chip:focus-visible {
  outline: 2px solid var(--mv-accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { .mv-spinner { animation: none; } }

/* ============================================================================
   GLOBAL BASE-COMPONENT ALIGNMENT
   Makes EVERY ERP page — converted to <x-ui.*> or still legacy — inherit the
   Control Room look, by mapping the base Bootstrap/Limitless classes onto the
   --mv-* tokens. Deliberately conservative: colours, surfaces, borders and the
   signature dark table header only — NO layout/spacing changes, so legacy pages
   don't shift. Coloured utilities (.bg-success etc.) keep their colour via their
   own !important. Per-page <x-ui.*> conversion just cleans the markup later.
   ============================================================================ */
:root { --mv-bg: #eceff1; }
:root.dark, [data-color-theme="dark"] { --mv-bg: #0f1216; }

/* page canvas */
.content, .content-wrapper, .content-inner { background: var(--mv-bg); }

/* cards (plain only — .card.bg-* utilities keep their colour) */
.card { background: var(--mv-surface); border: 1px solid var(--mv-line); border-radius: var(--mv-radius); box-shadow: var(--mv-shadow-sm); color: var(--mv-text); }
.card > .card-header, .card > .card-footer { background: transparent; border-color: var(--mv-line); color: var(--mv-text); }
.card .card-title { color: var(--mv-text); }

/* the signature: dark table header on EVERY table */
.table { color: var(--mv-text); border-color: var(--mv-line); vertical-align: middle; }
.table > thead > tr > th, .table > thead > tr > td {
  background: var(--mv-tblhead) !important; color: var(--mv-tblhead-text) !important;
  border-color: transparent !important; font-weight: 700; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.table > tbody > tr > td, .table > tbody > tr > th { border-color: var(--mv-line); color: var(--mv-text); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: color-mix(in srgb, var(--mv-surface-2) 55%, transparent); color: var(--mv-text); }
.table-hover > tbody > tr:hover > * { background: var(--mv-accent-wash); }
.table-bordered > :not(caption) > * > * { border-color: var(--mv-line); }
.table > tfoot > tr > th { background: var(--mv-surface-2); color: var(--mv-text-muted); border-color: var(--mv-line); }

/* DataTables chrome (search / length / pagination / info on every list) */
.dataTables_wrapper, .dt-container { color: var(--mv-text-muted); }
.dataTables_paginate .paginate_button, .dt-paging-button { color: var(--mv-text) !important; }
.dataTables_paginate .paginate_button.current, .dt-paging-button.current { background: var(--mv-accent) !important; color: var(--mv-on-accent) !important; border-color: var(--mv-accent) !important; }
/* !important because DataTables' own default CSS uses `div.dt-container div.dt-search input` (0,2,3) — higher than any reasonable class selector — and left the search box a light #aaa border on dark. Matches the pagination !important overrides above. */
.dataTables_filter input, .dataTables_length select,
.dt-container .dt-search input, .dt-container .dt-length select { background: var(--mv-surface) !important; border: 1px solid var(--mv-line-2) !important; color: var(--mv-text) !important; border-radius: 8px !important; min-height: 36px; padding: 6px 12px !important; }
.dt-container .dt-search input:focus, .dt-container .dt-length select:focus { border-color: var(--mv-accent) !important; box-shadow: 0 0 0 3px var(--mv-accent-wash); outline: none; }
.dt-container .dt-search input::placeholder { color: var(--mv-text-faint); }
/* Footer: the length <select> inherits Bootstrap `.form-select{width:100%}` (→ 500px) and the
   pagination is sized by Bootstrap's --pagination-* vars (40px). Compact both + inset the row from
   the flush card edge so it lines up with the table's column padding. Global — every list. */
.dt-container .dt-length select { width: auto !important; min-width: 84px; padding-right: 32px !important; }
.dt-container .dt-length label { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--mv-text-muted); font-size: 12.5px; }
.dt-container .dt-paging .page-link { padding: 4px 10px !important; font-size: 13px !important; min-width: 30px; line-height: 1.6; border-radius: 7px; }
.dt-container .dt-paging .dt-paging-button { margin-left: 3px; }
.mv-card-body.flush .dt-container > .row { padding-left: 16px; padding-right: 16px; }

/* form controls */
/* background-COLOR (nem shorthand!): a shorthand kinullázta a bootstrap .form-select nyíl-képének
   repeat/position longhandjait → fókuszban csempézett chevron-sor jelent meg */
.form-control, .form-select, .input-group-text { background-color: var(--mv-surface); border-color: var(--mv-line-2); color: var(--mv-text); }
.form-control::placeholder { color: var(--mv-text-faint); }
/* Fájl-input: a natív "Choose files"/"No file chosen" egybefolyt — a gombot tagoltan, márka-stílusban
   jelenítjük meg (minden ERP fájlmezőre hat) */
.form-control[type=file] { padding: 8px 12px; }
.form-control[type=file]::file-selector-button {
  margin-right: 14px; padding: 6px 14px; border: 1px solid var(--mv-line-2); border-radius: 7px;
  background: var(--mv-surface-2); color: var(--mv-text); font: inherit; font-weight: 700; cursor: pointer;
}
.form-control[type=file]::file-selector-button:hover { background: var(--mv-surface-3); }
.form-control:focus, .form-select:focus { background-color: var(--mv-surface); border-color: var(--mv-accent); box-shadow: 0 0 0 3px var(--mv-accent-wash); color: var(--mv-text); }
.form-label, .col-form-label { color: var(--mv-text); }
.form-check-input { background-color: var(--mv-surface); border-color: var(--mv-line-2); }
.form-check-input:checked { background-color: var(--mv-accent); border-color: var(--mv-accent); }

/* neutral badges → tokens (coloured bg-* keep their colour) */
.badge.bg-light, .badge.bg-secondary { background: var(--mv-surface-3) !important; color: var(--mv-text-muted) !important; }

/* neutral / outline buttons → tokens (btn-primary already green via brand css) */
/* .btn.btn-white (0,2,0) + the theme's own --btn-* vars: Limitless `[dir] .btn{background:var(--btn-bg)}`
   (0,2,0) with --btn-bg:#fff outranked a plain `.btn-white` rule, leaving white Mégse buttons on dark forms. */
.btn.btn-white, .btn.btn-light { --btn-bg: var(--mv-surface); --btn-color: var(--mv-text); --btn-border-color: var(--mv-line-2); --btn-hover-bg: var(--mv-surface-2); --btn-hover-color: var(--mv-text); background: var(--mv-surface) !important; border-color: var(--mv-line-2); color: var(--mv-text); }
.btn.btn-white:hover, .btn.btn-light:hover { background: var(--mv-surface-2) !important; color: var(--mv-text); }
.btn-outline-secondary { border-color: var(--mv-line-2); color: var(--mv-text); }
.btn-outline-secondary:hover { background: var(--mv-surface-2); color: var(--mv-text); }

/* list-row action icons: the generated repos emit SOLID btn-primary/info/danger icon blobs —
   quiet them app-wide into the dispatch-style outline icons (danger stays red, but outlined) */
table .btn-icon.btn-primary, table .btn-icon.btn-info, table .btn-icon.btn-secondary {
    background: var(--mv-surface) !important; border: 1px solid var(--mv-line-2) !important; color: var(--mv-text-muted) !important;
}
table .btn-icon.btn-primary:hover, table .btn-icon.btn-info:hover, table .btn-icon.btn-secondary:hover {
    background: var(--mv-surface-2) !important; color: var(--mv-text) !important;
}
table .btn-icon.btn-danger {
    background: transparent !important; border: 1px solid rgba(var(--mv-crit-rgb), .5) !important; color: var(--mv-crit) !important;
}
table .btn-icon.btn-danger:hover { background: rgba(var(--mv-crit-rgb), .12) !important; }
/* action column on every generated list (#main_table): header + buttons right-aligned, dispatch-style */
table#main_table.mv-table > thead > tr > th:last-child { text-align: right; padding-right: 17px; }
table#main_table.mv-table > tbody > tr > td:last-child { text-align: right; }

/* tabs */
.nav-tabs { border-color: var(--mv-line); }
/* Fülek: mindig kéz-kurzor. Egy href nélküli <a data-bs-toggle="tab" data-bs-target> nem "link",
   ezért a böngésző szöveg-kurzort adna — ezzel minden fül/pill kattinthatónak látszik. */
.nav-tabs .nav-link,
.nav-pills .nav-link,
[data-bs-toggle="tab"],
[data-toggle="tab"],
[data-bs-toggle="pill"] { cursor: pointer; }
.nav-tabs .nav-link { color: var(--mv-text-muted); }
.nav-tabs .nav-link:hover { color: var(--mv-text); }
.nav-tabs .nav-link.active { color: var(--mv-text); background: var(--mv-surface); border-color: var(--mv-line) var(--mv-line) var(--mv-surface); }

/* modals */
.modal-content { background: var(--mv-surface); border: 1px solid var(--mv-line); color: var(--mv-text); }
.modal-header, .modal-footer { border-color: var(--mv-line); }
/* Széles lista-modál (Beszerzés): szélesebb az xl-nél (1140→1360), hogy a beágyazott iframe
   táblái elférjenek. vw-kupak: keskenyebb kijelzőn is középen marad. */
.modal-dialog.mv-modal-wide { max-width: min(1360px, 94vw); }
/* A sidebar-main futásidőben inline z-index:14000-et kap (resources/js/custom.js) → a modál
   (custom.scss: .modal z-index:1050 !important) ALÁ kerülne, és széles dialógusnál a bal szélét
   levágja. Amíg a széles Beszerzés-modál NYITVA van, a sidebart a backdrop (1040) ALÁ visszük:
   így a modál (1050) fölé kerül, a sidebar pedig — helyesen — a sötétítő háttér mögé. */
body:has(.modal.show .modal-dialog.mv-modal-wide) .sidebar-main { z-index: 1030 !important; }
/* Ha az iframe-ben belső modál (árajánlat/összevetés/raktár) nyílik, a szülő pageModal fejlécét
   elrejtjük — így nincs két egymásra tolt fejléc ("dupla modál"). A belső modál a saját fejlécével
   tölti ki a keretet. (A .mv-inner-open osztályt CSAK a beszerzés-iframe teszi rá.) */
#pageModal.mv-inner-open .modal-header { display: none; }

/* dropdowns */
.dropdown-menu { background: var(--mv-surface); border: 1px solid var(--mv-line); box-shadow: var(--mv-shadow); }
.dropdown-item { color: var(--mv-text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--mv-surface-2); color: var(--mv-text); }
.dropdown-divider { border-color: var(--mv-line); }

/* Select2 (used across the ERP) */
/* The theme's custom.scss forces `.select2-container { z-index: 9999 !important }`, which floats
   every select2 FIELD above modals (z-index 1050) — e.g. the schedule board's "Dolgozók" select
   rendered on top of the task page-modal. Only the dropdown needs to sit high; keep the container
   in normal flow so modals cover it. (.select2-dropdown keeps its own high z-index.) */
.select2-container { z-index: auto !important; }
.select2-container .select2-selection { background: var(--mv-surface) !important; border-color: var(--mv-line-2) !important; }
.select2-container .select2-selection__rendered, .select2-selection__placeholder { color: var(--mv-text) !important; }
.select2-dropdown { background: var(--mv-surface); border-color: var(--mv-line-2); }
.select2-search__field { background: var(--mv-surface) !important; color: var(--mv-text) !important; }
.select2-results__option { color: var(--mv-text); }
.select2-results__option--highlighted { background: var(--mv-accent) !important; color: var(--mv-on-accent) !important; }
/* multi-select STRUCTURE — global (was hand-patched per page, each copy incomplete).
   Select2 4.1's inline search is a <textarea>: it overflows its own ~22px height, so Windows
   paints a mini scrollbar (▲▼) under the chips, and select2 sizes its width to the placeholder
   text, shoving it onto a new row. Kill the overflow, flex it into the remaining row space. */
/* the theme's custom2.min.css prefixes its select2 rules with [dir] → (0,4,0) — every
   selector below matches that depth so our !important wins by load order (same trick as
   the __display fix further down). */
[dir] .select2-container .select2-selection--multiple {
    display: flex !important; flex-wrap: wrap; align-items: center;
    min-height: 38px; height: auto !important; padding: 2px 8px !important;
}
/* 4.1: the search is a SIBLING of the rendered <ul>, not a child — the ul must stay
   content-width so the search can share its row. */
[dir] .select2-container .select2-selection--multiple .select2-selection__rendered {
    display: inline-flex !important; flex-wrap: wrap; align-items: center; list-style: none;
    width: auto !important; max-width: 100%; flex: 0 1 auto; margin: 0 !important; padding: 0 !important; float: none;
}
[dir] .select2-container .select2-selection--multiple .select2-search--inline {
    display: inline-flex !important; align-items: center; float: none;
    flex: 1 1 60px; min-width: 60px; max-width: 100%; margin: 0 !important;
}
[dir] .select2-container .select2-selection--multiple .select2-search__field {
    width: 100% !important; height: 24px !important; min-height: 0 !important;
    overflow: hidden !important; resize: none !important;
    margin: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important;
}
.select2-container--focus .select2-selection--multiple,
.select2-container--open .select2-selection--multiple {
    border-color: var(--mv-accent) !important; box-shadow: 0 0 0 3px rgba(47, 173, 111, .15);
}
/* multi-select tags → clean OUTLINED chips (a frame around the name, no grey box), both themes */
[dir] .select2-container--classic .select2-selection--multiple .select2-selection__choice,
[dir] .select2-container--default .select2-selection--multiple .select2-selection__choice,
[dir] .select2-container .select2-selection--multiple .select2-selection__choice {
    background: transparent !important; border: 1px solid var(--mv-line-2) !important; color: var(--mv-text) !important;
    border-radius: 7px !important; padding: 2px 9px !important; margin: 2px 5px 2px 0 !important; font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; float: none;
}
/* select2's __display span has `padding-top:4px !important` at 0,4,0 (`[dir] .rendered .choice .display`),
   which pushed the name 3px below the ×. Match that depth (0,4,0) so our !important wins by load order. */
.select2-container .select2-selection__rendered .select2-selection__choice .select2-selection__choice__display { padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; line-height: 15px !important; position: relative !important; top: -1px !important; }
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--mv-text-faint) !important; background: transparent !important; border: 0 !important; margin: 0 !important; padding: 0 !important; font-size: 15px; line-height: 1; order: 2;
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--mv-crit) !important; background: transparent !important;
}

/* ===== list-kit: Sheets-style header funnel + toolbar (movasol-listkit.js injects these
   on every DataTables list; the styles were page-scoped on the feladatok etalon before) ===== */
/* A menü a <th>-ből indul (a kit nyitáskor a body-ra emeli): a fejléc uppercase + letter-spacing
   stílusát nem szabad örökölnie, a bootstrap dropdown 1rem-je pedig túl nagy ide. */
.hf-menu { z-index: 1001; min-width: 230px; padding: 6px !important;
    text-transform: none; letter-spacing: normal; font-size: 13px; font-weight: 400; }
.hf-menu .dropdown-item { font-size: 13px; padding: 6px 10px; border-radius: 6px; text-transform: none; letter-spacing: normal; }
.hf-menu .hf-search { font-size: 13px; }
.hf-menu .dropdown-divider { margin: 4px 0 !important; }
.th-h { display: inline-flex; align-items: center; gap: 5px; }
.th-filter-toggle { color: var(--mv-tblhead-mut, rgba(226,232,240,.55)); text-decoration: none; font-size: 14px; line-height: 1; }
.th-filter-toggle:hover, .th-filter-toggle.active, .th-filter.has-filter .th-filter-toggle { color: var(--mv-accent); }
.hf-options { max-height: 230px; overflow-y: auto; }
.hf-opt { display: flex; align-items: center; gap: 6px; padding: 3px 0; margin: 0; font-weight: 400; cursor: pointer; white-space: nowrap; }
.hf-opt:hover { color: var(--mv-accent); }
/* the injected toolbar sits inside the card body, above the table */
/* a chip-sort a saját margója választja el a táblától — a .mv-toolbar alsó vonala itt csak zaj */
.mvlk-toolbar { margin-bottom: 10px; border-bottom: 0; }
.mv-card-body.flush .mvlk-toolbar { padding: 12px 16px 0; }
/* the kit opens funnel menus itself (position:fixed, no popper) */
.hf-menu.mvlk-open { display: block; position: fixed; }
/* kit search replaces the native dt-search box */
.mvlk-active .dt-search { display: none !important; }

/* sidebar szekció-feliratok (MenuSeeder header_* elemei) */
.nav-sidebar .mv-nav-header {
    padding: 16px 20px 5px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: rgba(255, 255, 255, .34);
    user-select: none;
}
.nav-sidebar .mv-nav-header:first-child { padding-top: 6px; }

/* muted text → token (readable in both themes) */
.text-muted { color: var(--mv-text-muted) !important; }

/* ===== Sidebar — "Control Room" artifact style: onyx-gradient rail, rounded muted
   nav items inset from the edges, green-wash + 3px left-accent active, caption header. ===== */
.sidebar-dark { background-color: #111419 !important; background-image: linear-gradient(180deg, #13161c, #0e1116) !important; }
.sidebar-dark .sidebar-content, .sidebar-dark .sidebar-section { background-color: transparent !important; }
.sidebar-dark .nav-sidebar { padding: 4px 10px; }
/* "Menü" header → caption typography (tiny, tracked-out, faint) */
.sidebar-dark .sidebar-section-body h5 { font-size: 11px !important; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6c7681; margin: 2px 0 4px; }
.sidebar-dark .sidebar-section-header, .sidebar-dark .sidebar-header-content { color: #7d8794; }
/* top-level items: rounded, muted, artifact spacing */
.sidebar-dark .nav-sidebar > .nav-item { margin: 1px 0; }
.sidebar-dark .nav-sidebar > .nav-item > .nav-link { color: #aeb6c0; font-size: 13.5px; font-weight: 600; padding: 9px 11px; border-radius: 8px; }
.sidebar-dark .nav-sidebar > .nav-item > .nav-link > i { font-size: 17px; margin-right: 11px; opacity: .85; }
.sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .055); }
.sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover > i { opacity: 1; }
/* active / open — green-wash + left accent (override Limitless's white active bg) */
.sidebar-dark .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark .nav-sidebar > .nav-item-open > .nav-link { background-color: rgba(47, 173, 111, .15) !important; color: #fff !important; box-shadow: inset 3px 0 0 var(--mv-accent); }
.sidebar-dark .nav-sidebar .nav-link.active > i { color: var(--mv-accent) !important; opacity: 1; }
/* submenu children: indented under the parent label, same rounded/active language */
.sidebar-dark .nav-sidebar .nav-group-sub .nav-link { color: #93a0ac; font-size: 13px; padding: 8px 11px 8px 40px; border-radius: 8px; margin: 1px 0; }
.sidebar-dark .nav-sidebar .nav-group-sub .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.sidebar-dark .nav-sidebar .nav-group-sub .nav-link.active { color: #fff !important; background-color: rgba(47, 173, 111, .14) !important; box-shadow: inset 3px 0 0 var(--mv-accent); }

/* Sidebar scrollbar: keskeny + a sötét sávba olvad (a vastag világos default zavaró volt).
   Track átlátszó, a thumb halvány fehér, ami csak hoverkor erősödik. */
.sidebar-dark .sidebar-content { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
.sidebar-dark .sidebar-content::-webkit-scrollbar { width: 6px; }
.sidebar-dark .sidebar-content::-webkit-scrollbar-track { background: transparent; }
.sidebar-dark .sidebar-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 6px; }
.sidebar-dark .sidebar-content:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .24); }

/* Natív <select>, amit a vendor CRUD form-control osztállyal szed fel: a Bootstrap 5
   appearance:none-ja eltünteti a lenyíló nyilat → "nem látszik, hogy választani lehet"
   (UI-teszt: park Riport nyelve, Sungrow objektumok). Visszakapja a natív nyilat. */
select.form-control:not([multiple]) { appearance: auto; -webkit-appearance: menulist; }

/* Bootstrap tooltip a Control Room témára (UI-teszt: az SLA (i) buborékok "nem szépek") */
.tooltip .tooltip-inner {
    background: #1d222b; color: #e6e9ee; border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35); border-radius: 9px;
    padding: 9px 12px; font-size: 12.5px; line-height: 1.45; max-width: 300px; text-align: left;
}
.tooltip .tooltip-arrow::before { color: #1d222b; }
.tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: #1d222b; }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #1d222b; }
.tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: #1d222b; }
.tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: #1d222b; }

/* a little more air in every table (user: rows too tight) — vertical padding only,
   so column widths / horizontal layout don't shift. */
.table > tbody > tr > td, .table > tbody > tr > th { padding-top: 16px; padding-bottom: 16px; }

/* ─────────────────────────────────────────────────────────────────────────
   SweetAlert2 — modern, compact confirm/alert dialogs (Control Room).
   The stock dialog had a huge ~80px icon and dated buttons. Restyled app-wide.
   ───────────────────────────────────────────────────────────────────────── */
.swal2-popup {
    background: var(--mv-surface) !important;
    color: var(--mv-text) !important;
    border: 1px solid var(--mv-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--mv-shadow) !important;
    font-family: inherit !important;
}
.swal2-popup:not(.swal2-toast) { padding: 24px 24px 20px !important; }
.swal2-popup:not(.swal2-toast) .swal2-title {
    color: var(--mv-text) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    padding: 4px 8px 0 !important;
    line-height: 1.3 !important;
}
.swal2-html-container {
    color: var(--mv-text-muted) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 6px 8px 0 !important;
}
/* compact icon (the stock one is ~192px because its font-size drives em-based sizing;
   pin the size in px + reset the icon font-size so the ?/! content scales down too).
   Flex-center so the ?/! glyph sits dead-centre in the circle. */
.swal2-popup:not(.swal2-toast) .swal2-icon {
    --swal-icon-size: 44px !important;
    width: 44px !important; height: 44px !important;
    font-size: 11px !important;
    border-width: 2.5px !important;
    margin: 6px auto 14px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    line-height: 1 !important;
}
.swal2-popup:not(.swal2-toast) .swal2-icon .swal2-icon-content {
    font-size: 2.2em !important; font-weight: 700 !important;
    line-height: 1 !important; margin: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.swal2-icon.swal2-question { border-color: var(--mv-line-2) !important; color: var(--mv-accent) !important; }
.swal2-icon.swal2-warning  { border-color: rgba(var(--mv-warn-rgb), .5) !important; color: var(--mv-warn) !important; }
.swal2-icon.swal2-info     { border-color: var(--mv-line-2) !important; color: var(--mv-text-muted) !important; }
.swal2-icon.swal2-error    { border-color: rgba(var(--mv-crit-rgb), .5) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--mv-crit) !important; }
.swal2-icon.swal2-success  { border-color: rgba(47,173,111,.5) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--mv-accent) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(47,173,111,.3) !important; }
/* buttons — match the mv-btn language */
.swal2-actions { gap: 10px !important; margin-top: 18px !important; }
.swal2-styled {
    border-radius: 10px !important; font-weight: 700 !important; font-size: 14px !important;
    padding: 10px 20px !important; box-shadow: none !important; transition: filter .12s, background .12s;
}
.swal2-styled.swal2-confirm { background: var(--mv-accent) !important; color: var(--mv-on-accent) !important; border: 0 !important; }
.swal2-styled.swal2-confirm:hover { filter: brightness(1.06); }
.swal2-styled.swal2-cancel, .swal2-styled.swal2-deny {
    background: var(--mv-surface-2) !important; color: var(--mv-text) !important; border: 1px solid var(--mv-line-2) !important;
}
.swal2-styled.swal2-cancel:hover, .swal2-styled.swal2-deny:hover { background: var(--mv-surface-3) !important; }
.swal2-styled:focus { box-shadow: 0 0 0 3px var(--mv-accent-wash) !important; }
/* darker, softer backdrop — MODAL dialogs only. A toast (position corner) keeps a fixed,
   full-height container with the swal2-backdrop-show class too, so without this scope the dim
   greyed out a strip of the page behind every toast. body.swal2-toast-shown marks toast mode. */
body.swal2-shown:not(.swal2-toast-shown) div.swal2-container.swal2-backdrop-show { background: rgba(8, 12, 16, .55) !important; }
/* inputs used by prompt-style dialogs */
.swal2-input, .swal2-textarea, .swal2-select {
    background: var(--mv-surface) !important; color: var(--mv-text) !important;
    border: 1.5px solid var(--mv-line) !important; border-radius: 9px !important; font-size: 14px !important; box-shadow: none !important;
}
.swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus { border-color: var(--mv-accent) !important; box-shadow: 0 0 0 3px var(--mv-accent-wash) !important; }
/* Toast variant — notification(): slim pill, icon + text on ONE line (fits content).
   The modal icon/title overrides above are scoped :not(.swal2-toast), so here SweetAlert2's
   native compact toast layout applies; we only tighten width/padding + theme the text. */
.swal2-popup.swal2-toast.ezro-toast {
    width: auto !important;
    max-width: 340px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    align-items: center !important;
}
.swal2-toast.ezro-toast .swal2-title {
    margin: 0 !important;
    font-size: 14px !important; font-weight: 600 !important;
    color: var(--mv-text) !important; text-align: left !important;
}
/* swal2's toast icon is 2em (=40px) and spans grid-row 1/99, so with a single-line
   message its centre sinks below the text. Shrink it via font-size (all its geometry is
   em-based, so the checkmark stays correct) and pin it to row 1 → centred inline pill. */
.swal2-toast.ezro-toast .swal2-icon { margin: 0 10px 0 0 !important; font-size: 11px !important; grid-row: 1 !important; }

/* ============================ Naptár (FullCalendar retheme) ============================ */
.mv-cal { padding: var(--mv-space-4); }
.mv-cal.fc {
  --fc-border-color: var(--mv-line);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: var(--mv-surface-2);
  --fc-today-bg-color: var(--mv-accent-wash);
  --fc-list-event-hover-bg-color: var(--mv-surface-2);
  --fc-event-text-color: #10151b;
  --fc-event-border-color: transparent;
  --fc-highlight-color: rgba(var(--mv-info-rgb), .12);
  /* az FC saját gomb-szabályai ezekből a változókból dolgoznak — nem kell specificitás-harc */
  --fc-button-bg-color: var(--mv-surface);
  --fc-button-border-color: var(--mv-line-2);
  --fc-button-text-color: var(--mv-text);
  --fc-button-hover-bg-color: var(--mv-surface-2);
  --fc-button-hover-border-color: var(--mv-line-2);
  --fc-button-active-bg-color: var(--mv-tblhead);
  --fc-button-active-border-color: var(--mv-tblhead);
}
.mv-cal.fc a { text-decoration: none; }
/* a téma link-színe erősebb az FC 0,1,0-s esemény-szabályánál — sötét szöveg a színes sávokon */
.mv-cal .fc-h-event, .mv-cal .fc-v-event,
.mv-cal .fc-h-event .fc-event-main, .mv-cal .fc-v-event .fc-event-main { color: #10151b; }
.mv-cal .fc-toolbar.fc-header-toolbar { margin-bottom: var(--mv-space-4); gap: 8px; flex-wrap: wrap; }
.mv-cal .fc-toolbar-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--mv-text); text-transform: capitalize; }
.mv-cal.fc .fc-button { background: var(--mv-surface); border: 1px solid var(--mv-line-2); color: var(--mv-text); font-weight: 700; font-size: 12.5px; padding: 7px 12px; border-radius: 8px; box-shadow: none !important; text-transform: capitalize; }
.mv-cal.fc .fc-button:hover { background: var(--mv-surface-2); color: var(--mv-text); }
.mv-cal.fc .fc-button:disabled { opacity: .5; background: var(--mv-surface); color: var(--mv-text-muted); }
.mv-cal.fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--mv-tblhead); border-color: var(--mv-tblhead); color: var(--mv-tblhead-text); }
.mv-cal.fc .fc-today-button:not(:disabled) { background: var(--mv-accent); border-color: var(--mv-accent); color: var(--mv-on-accent); }
.mv-cal .fc-col-header-cell { background: var(--mv-tblhead); }
.mv-cal .fc-col-header-cell-cushion { color: var(--mv-tblhead-text); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 9px 4px; }
.mv-cal .fc-daygrid-day-number { color: var(--mv-text-muted); font-size: 12px; font-weight: 700; padding: 5px 8px; }
.mv-cal .fc-day-today .fc-daygrid-day-number { color: var(--mv-accent-strong); }
.mv-cal .fc-daygrid-day.fc-day-sat, .mv-cal .fc-daygrid-day.fc-day-sun { background: rgba(var(--mv-idle-rgb), .07); }
.mv-cal .fc-daygrid-day.fc-day-today { background: var(--mv-accent-wash); }
.mv-cal .fc-day-other .fc-daygrid-day-top { opacity: .45; }
.mv-cal .fc-event { border-radius: 5px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.mv-cal .fc-daygrid-event { padding: 1px 5px; margin-top: 2px; }
/* teljes Naptár oldal: magasabb hónap-cellák (négyzetesebb csempék) — a dashboard-widget kompakt marad */
.mv-cal-full .fc-dayGridMonth-view .fc-daygrid-day-frame { min-height: 120px; }
.mv-cal .fc-daygrid-day-events { padding-bottom: 2px; }
.mv-cal .fc-timegrid-slot-label-cushion, .mv-cal .fc-timegrid-axis-cushion { color: var(--mv-text-muted); font-size: 11.5px; }
.mv-cal .fc-list { border-radius: var(--mv-radius-sm); }
.mv-cal .fc-list-day-cushion { background: var(--mv-surface-2); }
.mv-cal .fc-list-day-text, .mv-cal .fc-list-day-side-text { color: var(--mv-text); font-weight: 800; font-size: 12.5px; }
.mv-cal .fc-list-event-title { color: var(--mv-text); }
.mv-cal .fc-list-event-time { color: var(--mv-text-muted); font-variant-numeric: tabular-nums; }
.mv-cal .fc-popover { background: var(--mv-surface); border: 1px solid var(--mv-line-2); box-shadow: var(--mv-shadow); }
.mv-cal .fc-popover-header { background: var(--mv-surface-2); color: var(--mv-text); }
/* zsúfolt napok "+N további" linkje + popovere */
.mv-cal .fc-daygrid-more-link { color: var(--mv-accent-strong); font-size: 11.5px; font-weight: 700; }
.mv-cal .fc-daygrid-more-link:hover { background: var(--mv-accent-wash); }
.mv-cal .fc-popover { z-index: 60; border-radius: var(--mv-radius-sm); }
.mv-cal .fc-popover-title { font-weight: 800; font-size: 12.5px; }
/* legenda-kapcsolók a naptár fölött */
.mv-cal-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
button.mv-chip { cursor: pointer; }
button.mv-chip:hover { background: var(--mv-surface-2); }
.mv-chip.off { opacity: .42; }
.mv-chip.off .mv-dot { box-shadow: none !important; }
.mv-cal-userlabel { font-size: 12.5px; font-weight: 700; color: var(--mv-text-muted); }