/* ==========================================================================
   Mailhook admin – redesign v2
   Téma-réteg a meglévő admin sablon (Pixel Admin / Bootstrap 4 alpha alapú
   main.css) fölött. A DOM, a menürendszer, az űrlapok és a JS változatlan –
   csak a megjelenés új: oldalsáv + felső sáv, kártyák, gombok, mezők, táblák,
   modálok, világos/sötét téma.
   Betöltés: az utolsó stíluslap (a main.css / virtualcom.css után).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap");

:root,
[data-theme="light"] {
    --bg: #ffffff;
    --bg2: #f3f6fb;
    --card: #ffffff;
    --track: #e6ebf3;
    --fg: #0f1a2e;
    --fg2: #3d4a60;
    --muted: #66728a;
    --muted2: #8b96aa;
    --muted3: #c2c9d6;
    --line: rgba(15, 26, 46, .12);
    --line2: rgba(15, 26, 46, .09);
    --line3: rgba(15, 26, 46, .06);
    --line-strong: rgba(15, 26, 46, .28);
    --hover: rgba(15, 26, 46, .06);
    --hover2: rgba(15, 26, 46, .035);
    --header-bg: rgba(255, 255, 255, .88);
    --accent: #2f6be3;
    --accent-hover: #2559c4;
    --accent-text: #1f4fb0;
    --accent-deep: #173a82;
    --accent-tint: #e6efff;
    --accent-tint2: rgba(47, 107, 227, .09);
    --accent-tint3: rgba(47, 107, 227, .28);
    --accent-soft: #a9c6ff;
    --on-accent: #ffffff;
    --danger: #c0392b;
    --danger-tint: #fdecea;
    --success: #1f7a4d;
    --success-tint: #e6f5ec;
    --warn: #9a6700;
    --warn-tint: #fff4d6;
    --shadow: 0 1px 2px rgba(15, 26, 46, .05), 0 10px 30px rgba(15, 26, 46, .06);
    --radius: 16px;
    --radius-sm: 10px;
    --side-w: 220px;
    --head-h: 60px;
    color-scheme: light;
}

[data-theme="dark"] {
    --bg: #0d1117;
    --bg2: #121820;
    --card: #171e29;
    --track: #252d3a;
    --fg: #eef2f8;
    --fg2: #c3cbd8;
    --muted: #8d98ab;
    --muted2: #6d7789;
    --muted3: #48526a;
    --line: rgba(255, 255, 255, .12);
    --line2: rgba(255, 255, 255, .09);
    --line3: rgba(255, 255, 255, .06);
    --line-strong: rgba(255, 255, 255, .28);
    --hover: rgba(255, 255, 255, .07);
    --hover2: rgba(255, 255, 255, .04);
    --header-bg: rgba(13, 17, 23, .85);
    --accent: #5b8dee;
    --accent-hover: #3f78e6;
    --accent-text: #8fb3ff;
    --accent-deep: #d6e3ff;
    --accent-tint: #182747;
    --accent-tint2: rgba(91, 141, 238, .14);
    --accent-tint3: rgba(91, 141, 238, .35);
    --accent-soft: #2f4f8f;
    --on-accent: #ffffff;
    --danger: #ff7b6b;
    --danger-tint: #3a1f1c;
    --success: #6fd39b;
    --success-tint: #16301f;
    --warn: #f0c060;
    --warn-tint: #3a2f12;
    --shadow: 0 0 0 1px rgba(255, 255, 255, .03), 0 10px 30px rgba(0, 0, 0, .35);
    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Alap
   -------------------------------------------------------------------------- */
html {
    background: var(--bg);
}

body {
    background: var(--bg) !important;
    color: var(--fg);
    font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

body a {
    color: var(--accent-text);
}

body a:hover,
body a:focus {
    color: var(--accent-deep);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Barlow", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--fg);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

::selection {
    background: var(--accent-tint3);
}

/* --------------------------------------------------------------------------

/* --------------------------------------------------------------------------
   Keret: oldalsáv + fejléc + tartalom (redesign v2 admin képernyő)
   Elrendezés: body = flex sor; .side-menu fix 220px; .site-header + .page-content
   a maradék szélességen. A sablon régi .site-header / .side-menu szabályait
   itt felülírjuk (magas specificitás + !important a main.css ellen).
   -------------------------------------------------------------------------- */
body.mh-admin {
    margin: 0;
    padding: 0 !important;
    min-height: 100vh;
}

/* ---------- Oldalsáv ---------- */
body .side-menu,
body .side-menu.side-menu-compact {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--side-w) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--bg) !important;
    border-right: 1px solid var(--line);
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column;
    /* A görgetés a menülistán (.mh-side-nav) történik; ez csak tartalék nagyon
       alacsony ablaknál, és a görgetés nem "folyik át" a fő tartalomra. */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1001;
    transform: none;
    transition: transform .2s ease-in-out;
    text-align: left;
}

body .side-menu.side-menu-compact .jspPane,
body .side-menu.side-menu-compact .jspContainer {
    padding-top: 0 !important;
    width: 100% !important;
    position: static;
}

/* A márkablokk pontosan a fejléc magasságát (+ alsó szegély) foglalja, így az
   alatta futó vonal egy magasságban van a fejléc alsó vonalával. */
body .mh-side-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none !important;
    color: var(--fg) !important;
    box-sizing: border-box;
    height: calc(var(--head-h) + 1px);
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
    flex: none;
}

body .mh-side-brand-mark {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--accent);
    display: block;
    position: relative;
    flex: none;
}

body .mh-side-brand-mark::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    width: 7px;
    height: 7px;
    border: 2px solid var(--on-accent);
    border-left: 0;
    border-top: 0;
}

body .mh-side-brand-text {
    font-family: "Barlow", system-ui, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    letter-spacing: .04em;
}

/* A menülista a görgethető rész: a márka felül és a csomag/téma blokk alul
   rögzített marad. Korábban a lista összenyomódott, az alsó menüpontok a láb
   alá csúsztak, és a görgő a fő tartalmat mozgatta. */
body .mh-side-nav {
    flex: 1 1 auto;
    padding: 12px 0 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

body .side-menu.side-menu-compact .side-menu-list,
body .side-menu.side-menu-compact .side-menu-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    display: block;
}

body .side-menu.side-menu-compact .side-menu-list li {
    display: block;
    margin: 0;
    padding: 0;
    text-align: left;
}

body .side-menu.side-menu-compact .side-menu-list a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 20px 9px 18px !important;
    margin: 0;
    height: auto !important;
    line-height: 1.35;
    text-align: left;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 400;
    color: var(--fg2) !important;
    border-left: 2px solid transparent;
    background: transparent !important;
    transition: background .12s;
}

body .side-menu.side-menu-compact .side-menu-list a:hover {
    background: var(--accent-tint2) !important;
    color: var(--fg) !important;
}

body .side-menu.side-menu-compact .side-menu-list a.active,
body .side-menu.side-menu-compact .side-menu-list li.active > a {
    background: var(--accent-tint2) !important;
    color: var(--fg) !important;
    border-left-color: var(--accent);
    font-weight: 500;
}

/* Az ikonok a designban nincsenek – a felirat marad */
body .side-menu.side-menu-compact .side-menu-list .fa,
body .side-menu.side-menu-compact .side-menu-list .font-icon,
body .side-menu.side-menu-compact .side-menu-list .glyphicon {
    display: none !important;
}

body .side-menu.side-menu-compact .side-menu-list .lbl {
    display: inline !important;
    font-size: 14px !important;
    line-height: inherit;
    color: inherit !important;
    padding: 0;
    margin: 0;
    white-space: normal;
}

/* Csak szuperfelhasználónak látható menüpontok (a menükonfigban su-menu-item
   osztály): piros felirat, ahogy a régi témában. */
body .side-menu.side-menu-compact .side-menu-list a.su-menu-item,
body .side-menu.side-menu-compact .side-menu-list a.su-menu-item .lbl,
body .side-menu.side-menu-compact .side-menu-list a.su-menu-item:hover,
body .side-menu.side-menu-compact .side-menu-list a.su-menu-item.active,
body .side-menu.side-menu-compact .side-menu-list li.active > a.su-menu-item {
    color: var(--danger) !important;
}

/* A "Kilépés" saját gombként a menülista alján van (.mh-side-logout) – a
   menükonfigból jövő duplikátum rejtve */
body .side-menu.side-menu-compact .side-menu-list li:has(> a[href*="logout"]),
body .side-menu.side-menu-compact .side-menu-list a[href*="logout"] {
    display: none !important;
}

/* Kilépés: a görgethető menü aljára ragad, átlátszatlan háttérrel */
body .mh-side-logout-wrap {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding: 10px 12px 12px;
    background: var(--bg);
}

body .mh-side-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--fg2) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none !important;
    transition: background .12s, border-color .12s, color .12s;
}

body .mh-side-logout .fa {
    width: 16px;
    font-size: 15px;
    text-align: center;
    color: var(--danger);
}

body .mh-side-logout:hover,
body .mh-side-logout:focus-visible {
    background: var(--danger-tint);
    border-color: var(--danger);
    color: var(--danger) !important;
}

/* almenük (ha a menürendszer használ) */
body .side-menu.side-menu-compact .side-menu-list li ul {
    display: none;
    padding-left: 12px;
}

body .side-menu.side-menu-compact .side-menu-list li.opened > ul {
    display: block;
}

body .mh-side-foot {
    flex: none;
    padding: 16px 20px 18px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
}

body .mh-side-plan {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Díjcsomag neve és a feliratkozók száma egy sorban; hosszú csomagnévnél a név
   rövidül (…), a teljes név a title-ben */
body .mh-side-plan-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
}

body .mh-side-plan-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--fg2);
    font-weight: 600;
}

body .mh-side-plan-row strong {
    flex: none;
    color: var(--fg);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

body .mh-side-plan-media {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .mh-side-track {
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--track);
}

body .mh-side-track > div {
    height: 100%;
    background: var(--accent);
}

body .mh-side-track.is-warn > div {
    background: var(--warn);
}

body .mh-side-track.is-danger > div {
    background: var(--danger);
}

body .mh-side-plan-state {
    font-size: 12px;
}

body .mh-side-plan-state.is-warn {
    color: var(--warn);
}

body .mh-side-plan-state.is-danger {
    color: var(--danger);
}

/* Csomagváltás: teljes szélességű, jól látható gomb */
body .mh-side-plan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    background: var(--accent-tint);
    color: var(--accent-text) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    transition: background .12s, color .12s;
}

body .mh-side-plan-btn:hover,
body .mh-side-plan-btn:focus-visible {
    background: var(--accent);
    color: var(--on-accent) !important;
}

body .mh-theme-toggle {
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 12px;
    align-self: flex-start;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--fg);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}

body .mh-theme-toggle:hover {
    background: var(--hover);
}

body .mh-theme-toggle .mh-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    display: block;
}

html[data-theme="dark"] .mh-theme-light-label,
html:not([data-theme="dark"]) .mh-theme-dark-label {
    display: none;
}

body .mh-side-version {
    font-size: 11px;
    color: var(--muted2);
}

/* ---------- Fejléc / oldalcím sáv ---------- */
body .site-header {
    position: sticky !important;
    top: 0;
    left: auto !important;
    right: auto !important;
    z-index: 900;
    margin: 0 0 0 var(--side-w) !important;
    height: auto !important;
    min-height: var(--head-h);
    padding: 12px 28px !important;
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    background: var(--header-bg) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    box-shadow: none !important;
    color: var(--fg);
    transition: margin .2s ease-in-out;
}

body .site-header .site-logo {
    display: none;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    color: var(--fg) !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

body .mh-topbar-brand-text {
    font-family: "Barlow", system-ui, sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.01em;
}

body .site-header .hamburger,
body .site-header .show-hide-sidebar {
    cursor: pointer;
    background: transparent !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px;
    width: 38px !important;
    height: 36px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: var(--fg);
    position: static !important;
    float: none !important;
    overflow: hidden;
    flex: none;
    box-shadow: none !important;
    outline: none;
}

body .site-header .hamburger:hover,
body .site-header .show-hide-sidebar:hover {
    background: var(--hover) !important;
}

body .site-header .show-hide-sidebar {
    display: inline-flex;
}

body .site-header .hamburger span,
body .site-header .show-hide-sidebar span {
    position: static !important;
    display: block !important;
    width: 16px !important;
    height: 2px !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: currentColor !important;
    border-radius: 2px;
    font-size: 0;
    text-indent: 0;
    transition: none;
    transform: none !important;
    opacity: 1 !important;
}

body .mh-page-title {
    margin: 0;
    font-family: "Barlow", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -.01em;
    font-size: 28px;
    line-height: 1;
    color: var(--fg);
    /* a cím balra marad; az eszközöket és a gombokat a .mh-head-tools
       margin-left:auto-ja tolja a fejléc jobb szélére */
    margin-right: 0;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .mh-page-title:empty {
    display: none;
}

/* Profil menü: a műveleti gombok után, a túra és a súgó előtt */
body .mh-head-user {
    display: flex;
    align-items: center;
    flex: none;
}

/* Előfizetés állapota a fejlécben: mindig látható, hány nap van hátra
   (zöld: rendben, sárga: 7 napon belül / ma jár le, piros: lejárt) */
body .mh-sub-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px 0 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    transition: box-shadow .12s;
}

body .mh-sub-chip .glyphicon {
    top: 0;
    font-size: 14px;
    line-height: 1;
}

body .mh-sub-chip:hover,
body .mh-sub-chip:focus-visible {
    box-shadow: inset 0 0 0 1px currentColor;
}

body .mh-sub-chip.is-ok {
    color: var(--success) !important;
    background: var(--success-tint);
}

body .mh-sub-chip.is-warn {
    color: var(--warn) !important;
    border-color: var(--warn);
    background: var(--warn-tint);
}

body .mh-sub-chip.is-danger {
    color: var(--danger) !important;
    border-color: var(--danger);
    background: var(--danger-tint);
}

@media (max-width: 767px) {
    body .mh-sub-chip {
        width: 36px;
        padding: 0;
        justify-content: center;
    }

    body .mh-sub-chip-text {
        display: none;
    }
}

/* Címlista szűrése: csoportosított feltétel-kártyák (rádió), műveleti sáv,
   találatok / üres állapot */
body .mh-filter-hint {
    margin: 0 0 16px;
    color: var(--muted);
}

body .mh-filter-group + .mh-filter-group {
    margin-top: 20px;
}

body .mh-filter-group-title {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Feltételek soronként: a rádió + cím és a mezők egy sorban; csak ha nem fér
   ki, akkor törnek a mezők a cím alá */
body .mh-filter-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body .mh-filter-option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

body .mh-filter-option:hover {
    border-color: var(--accent-soft);
}

body .mh-filter-option.is-selected {
    border-color: var(--accent);
    background: var(--accent-tint2);
    box-shadow: inset 0 0 0 1px var(--accent);
}

body .mh-filter-option-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--fg);
    white-space: nowrap;
    cursor: pointer;
}

body .mh-filter-option-head input[type="radio"] {
    flex: none;
    margin: 0;
}

body .mh-filter-option-fields {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}

body .mh-filter-option-fields .form-control {
    display: inline-block;
    width: 90px;
    min-height: 38px;
    margin: 0;
}

body .mh-filter-option-fields .form-control.mh-filter-date {
    width: 160px;
}

body .mh-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line2);
}

body .mh-filter-results {
    border-top: 1px solid var(--line);
}

body .mh-filter-results-title {
    margin: 0 0 4px;
    font-size: 16px;
    color: var(--fg);
}

body .mh-filter-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 16px;
    text-align: center;
    color: var(--muted);
}

body .mh-filter-empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: var(--bg2);
    color: var(--muted);
    display: grid;
    place-items: center;
    font-size: 20px;
}

body .mh-filter-empty strong {
    font-size: 15px;
    color: var(--fg);
}

/* Keskeny kijelzőn a mezők a cím alá törnek, a címhez igazítva */
@media (max-width: 575px) {
    body .mh-filter-option-head {
        white-space: normal;
    }

    body .mh-filter-option-fields {
        flex-wrap: wrap;
        padding-left: 26px;
    }
}

/* Drag & drop hírlevélszerkesztő (NewsletterBuilderWidget): a sötétbarna
   (#463a3c) sáv helyett a design fejléce – kártya háttér, alsó vonal, márkajel –,
   a "Mégse" keretes gomb jól olvasható felirattal. A widget inline stílusai
   tartaléknak maradnak, ezért itt !important kell. */
body .mh-builder-overlay {
    background: var(--bg) !important;
}

body .mh-builder-bar {
    display: flex !important;
    align-items: center;
    gap: 12px;
    height: 56px !important;
    padding: 0 20px !important;
    background: var(--card) !important;
    color: var(--fg) !important;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    z-index: 1;
}

body .mh-builder-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.2 !important;
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .mh-builder-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    float: none !important;
}

body .mh-builder-actions .btn {
    margin: 0 !important;
}

body .mh-builder-actions .btn.btn-default {
    background: transparent !important;
    border-color: var(--line-strong) !important;
    color: var(--fg) !important;
}

body .mh-builder-actions .btn.btn-default:hover,
body .mh-builder-actions .btn.btn-default:focus {
    background: var(--hover) !important;
}

body .mh-builder-canvas-wrap {
    top: 56px !important;
}

/* Hírlevél írás – csatolmányok: a feltöltési folyamat (fine-uploader
   .qq-upload-list) és a feltöltött fájlok (#attachmentIds) fájl-chipekként –
   ikon, levágott név, törlés gomb (a régi szürke doboz és delete.gif helyett) */
body #attachmentsArea {
    margin-top: 12px;
}

body #attachmentIds {
    padding: 0 !important;
    margin-top: 10px;
}

body #attachmentIds > ul,
body #attachmentsArea .qq-upload-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body #attachmentsArea .qq-upload-list {
    margin-top: 10px;
}

body #attachmentIds .mh-attach-item,
body #attachmentsArea .qq-upload-list > li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin: 0;
    padding: 6px 6px 6px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--fg);
    font-size: 13px;
    line-height: 1.3;
}

body #attachmentsArea .qq-upload-list > li {
    padding-right: 12px;
}

body #attachmentIds .mh-attach-item > .fa {
    flex: none;
    font-size: 15px;
    color: var(--accent-text);
}

body #attachmentIds .mh-attach-item > .fa-file-pdf-o {
    color: var(--danger);
}

body .mh-attach-name {
    min-width: 0;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

body .mh-attach-remove {
    flex: none;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background .12s, color .12s;
}

body .mh-attach-remove:hover,
body .mh-attach-remove:focus-visible {
    background: var(--danger-tint);
    color: var(--danger);
}

body #attachmentsArea .qq-upload-size,
body #attachmentsArea .qq-upload-cancel {
    color: var(--muted);
}

body #attachmentsArea .qq-upload-failed-text {
    color: var(--danger);
    font-weight: 600;
}

/* Az előfizetés-chip és az ikonok a fejléc jobb oldalán; utánuk jönnek a
   műveleti gombok és a profil menü, így ezek is jobbra zártak */
body .mh-head-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    margin-left: auto;
}

body .mh-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

/* pill gombok (design: secondary = keretes, primary = accent) */
body .mh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none !important;
    font-family: "Barlow", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -.01em;
    font-size: 14px;
    line-height: 1;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--fg) !important;
    background: transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

body .mh-btn:hover {
    background: var(--hover);
}

body .mh-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent) !important;
}

body .mh-btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* ikon gombok a fejlécben */
body .mh-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    position: relative;
    cursor: pointer;
    float: none !important;
    font-size: 15px !important;
    line-height: 1;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

body .mh-icon-btn:hover {
    background: var(--hover);
    color: var(--fg) !important;
}

body .mh-icon-btn .glyphicon,
body .mh-icon-btn .fa {
    font-size: 15px !important;
    float: none !important;
    margin: 0 !important;
    top: 0;
    line-height: 1;
}

body .mh-icon-btn.is-warn {
    color: var(--warn) !important;
    border-color: var(--warn);
    background: var(--warn-tint);
}

body .mh-icon-btn.is-danger {
    color: var(--danger) !important;
    border-color: var(--danger);
    background: var(--danger-tint);
}

/* Értesítés widget (MsMessageBoxWidget) */
body .mh-notice {
    position: relative;
    display: inline-flex;
    align-items: center;
}

body .mh-notice #MsNoticeBoxWidget {
    display: inline-flex !important;
    align-items: center;
    text-decoration: none !important;
    position: relative;
    vertical-align: middle;
    /* a régi téma scale(.8)+translateY-t tesz rá – ettől ült feljebb és kisebbre */
    transform: none !important;
    top: auto !important;
}

body .mh-notice .messageCounter {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 2;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* Súgó + túra gombok (AdminContextSensitiveHelpButton) */
body .mh-help {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
}

body .mh-help #initiate_tour,
body .mh-help .grayHeaderButton {
    height: 36px !important;
    line-height: 1 !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid var(--line) !important;
    background: transparent !important;
    color: var(--fg2) !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin: 0 !important;
    box-shadow: none !important;
}

body .mh-help #initiate_tour:hover,
body .mh-help .grayHeaderButton:hover {
    background: var(--hover) !important;
    color: var(--fg) !important;
}

body .mh-help .glyphicon {
    font-size: 13px;
    top: 0;
    color: var(--muted);
}

/* Túra és súgó: csak ikon (a felirat a title-ben), a fejléc jobb szélén */
body .site-header > .mh-help {
    flex: none;
}

body .mh-help #initiate_tour,
body .mh-help .grayHeaderButton {
    width: 36px;
    padding: 0 !important;
    justify-content: center;
}

body .mh-help #initiate_tour .glyphicon,
body .mh-help .grayHeaderButton .glyphicon {
    font-size: 15px;
}

body .mh-help #initiate_tour:hover .glyphicon,
body .mh-help .grayHeaderButton:hover .glyphicon {
    color: var(--fg);
}

/* Felhasználó menü */
body .site-header .user-menu {
    margin: 0 0 0 4px !important;
    padding: 0 !important;
    float: none !important;
    position: relative;
    /* flex, hogy a gomb ne sorközi dobozban üljön (az tolta 3px-szel lejjebb) */
    display: flex;
    align-items: center;
    height: 36px;
    line-height: 1;
}

/* .user-menu.dropdown szelektorral, mert a main.css így adja a 30px magasságot */
body .site-header .user-menu.dropdown .dropdown-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    height: 36px;
    line-height: 34px;
    padding: 0 12px 0 0 !important;
    margin: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px;
    background: transparent !important;
    color: var(--fg) !important;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: none !important;
    line-height: 1;
}

body .site-header .user-menu .dropdown-toggle:hover {
    background: var(--hover) !important;
}

body .site-header .user-menu .dropdown-toggle::after {
    display: inline-block;
    margin: 0;
    border-top-color: var(--muted);
    vertical-align: middle;
}

/* Az avatar a pill bal szegélyéhez simul: a keret belmagasságát tölti ki */
body .site-header .user-menu.dropdown .dropdown-toggle img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50%;
    border: 0 !important;
    object-fit: cover;
    margin: 0 !important;
    float: none !important;
    display: block;
    flex: none;
}

body .mh-user-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .mh-dd-head {
    padding: 8px 14px 10px;
    font-size: 12px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
}

body .mh-dd-head b {
    color: var(--fg);
    font-weight: 600;
}

/* Legördülő menük (Bootstrap) */
body .dropdown-menu {
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    background: var(--card) !important;
    box-shadow: var(--shadow) !important;
    padding: 6px !important;
    min-width: 200px;
    margin-top: 6px !important;
    color: var(--fg);
}

body .dropdown-menu .dropdown-item,
body .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px !important;
    border-radius: 8px;
    color: var(--fg) !important;
    background: transparent !important;
    font-size: 13px;
    text-decoration: none !important;
    line-height: 1.3;
    white-space: nowrap;
}

body .dropdown-menu .dropdown-item:hover,
body .dropdown-menu > li > a:hover {
    background: var(--hover) !important;
}

body .dropdown-menu .dropdown-item .font-icon,
body .dropdown-menu .dropdown-item .fa,
body .dropdown-menu .dropdown-item .glyphicon {
    width: 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    top: 0;
    line-height: 1;
}

body .dropdown-menu .dropdown-divider {
    border-top: 1px solid var(--line);
    margin: 6px 0;
    background: transparent;
    height: 0;
}

/* Az oldalsáv rejtése (#show-hide-sidebar-toggle → body.sidebar-hidden) */
body.sidebar-hidden .side-menu,
body.sidebar-hidden .side-menu.side-menu-compact {
    transform: translateX(-100%);
}

body.sidebar-hidden .site-header {
    margin-left: 0 !important;
}

body.sidebar-hidden .site-header .site-logo {
    display: inline-flex;
}

body.sidebar-hidden .page-content {
    margin-left: 0 !important;
}

/* ---------- Tartalom ---------- */
body .page-content {
    margin: 0 0 0 var(--side-w) !important;
    padding: 20px 28px 32px !important;
    min-height: calc(100vh - var(--head-h));
    transition: margin .2s ease-in-out;
    background: transparent;
}

body .page-content > .container-fluid {
    padding: 0;
    max-width: none;
    width: 100%;
    margin: 0;
}

body #right-col {
    padding: 0;
    margin: 0;
    width: auto;
    float: none;
}

body #right-col > .row,
body .page-content > .container-fluid > .row {
    margin-left: -10px;
    margin-right: -10px;
}

body #right-col > .row > [class*="col-"],
body .page-content > .container-fluid > .row > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

/* Lista oldalak fejléc-sávja (cím + kereső + gomb): eszköztárként a cím alatt.
   A h1 szövegét a JS a fejléc oldalcímébe emeli (mh-title-taken). */
body .page-content-header {
    background: transparent;
    border: 0;
    margin: 0 0 20px !important;
    padding: 0;
    position: static;
    display: block;
}

body .page-content-header .container-fluid {
    padding: 0;
}

body .page-content-header .tbl {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    width: auto;
}

body .page-content-header .tbl-row {
    display: contents;
}

body .page-content-header .tbl-cell {
    display: block;
    padding: 0 !important;
    vertical-align: middle;
    width: auto;
}

body .page-content-header .tbl-cell-action {
    margin-left: auto;
    padding-left: 0 !important;
    white-space: nowrap;
}

/* Több műveleti cellánál csak az első tolódik jobbra: a gombok együtt, a jobb
   szélen sorakoznak (korábban mindegyik margin-left:auto-t kapott, és a szabad
   hely eloszlott köztük, pl. Hírlevél címlisták "Elnyomó lista" /
   "Csoportos műveletek"); a kereső a bal oldalon marad. */
body .page-content-header .tbl-cell-action ~ .tbl-cell-action {
    margin-left: 0;
}

body .page-content-header h1,
body .page-content-header h2,
body .page-content-header h3,
body .page-content-header .title {
    font-size: 22px;
    line-height: 1.1;
    margin: 0;
    color: var(--fg);
    font-weight: 700;
}

body .page-content-header h1.mh-title-taken {
    display: none;
}

body .page-content-header .form-control,
body #searchbar {
    max-width: 360px;
    width: 100% !important;
    display: inline-block;
    margin-left: 0 !important;
}

/* Részletes statisztikák: cím + dátumszűrő egy tömör sorban, a cím mellett
   balra zárva; a dátummezők a design beviteli mezői (a fejléc általános
   .form-control szabálya 100%-os szélességet adna nekik). */
body .mh-stat-filter {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
}

body .mh-stat-filter h1 {
    align-self: center;
    margin: 0 12px 0 0;
}

body .mh-stat-field label {
    display: block;
    margin: 0 0 5px;
}

body .page-content-header .mh-stat-filter .form-control {
    display: block;
    width: 170px !important;
    max-width: none;
}

body .mh-stat-action .btn {
    min-height: 40px;
}

body .page-content-header .glyphicon-search {
    color: var(--muted);
    margin-right: 8px;
}

/* Oldalcímek a tartalomban */
body #right-col > h1,
body #right-col > .row > .col-sm-12 > h1,
body .task-card-create h1,
body .task-card-create h2,
body .task-card-create h3,
body .task-card-create .task-card-title {
    font-size: 22px;
    margin: 0 0 16px;
}

/* ---------- Infópult (welcome.php) ---------- */
body .mh-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px;
    margin: 0 0 20px;
}

body .mh-kpis .statistic-box,
body .dashboard-four-box-col .statistic-box {
    background: var(--card) !important;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px !important;
    margin: 0 0 20px;
    min-height: 0;
    color: var(--fg) !important;
    display: block;
    text-align: left;
}

body .mh-kpis .statistic-box {
    margin: 0;
}

body .statistic-box > div {
    display: block;
}

body .statistic-box .actLabel {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 10px;
}

body .statistic-box .number {
    font-family: "Barlow", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    font-size: 36px;
    line-height: 1;
    color: var(--fg) !important;
    margin: 0 0 8px;
}

body .statistic-box .caption,
body .statistic-box .caption div {
    font-size: 12px;
    color: var(--muted) !important;
    text-align: left;
}

body .statistic-box .percent {
    margin-top: 12px;
}

body .statistic-box .percent p {
    margin: 0;
    font-size: 12px;
    color: var(--accent-text);
}

body .statistic-box progress,
body progress.progress {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--track);
    display: block;
    margin: 0;
}

body progress.progress::-webkit-progress-bar {
    background: var(--track);
    border-radius: 999px;
}

body progress.progress::-webkit-progress-value {
    background: var(--accent);
    border-radius: 999px;
}

body progress.progress::-moz-progress-bar {
    background: var(--accent);
    border-radius: 999px;
}

body progress.progress.warning::-webkit-progress-value,
body progress.progress.progress-warning::-webkit-progress-value {
    background: var(--warn);
}

body progress.progress.error::-webkit-progress-value,
body progress.progress.progress-danger::-webkit-progress-value {
    background: var(--danger);
}

body .statistic-box progress strong {
    display: none;
}

/* Infópult alsó sor: Hírek + Előfizetés + KPI-dobozok oszlopa egyforma magas.
   A KPI-oszlop (.dashboard-four-box-col) tartalma adja a sor magasságát, a
   másik két kártya ehhez nyúlik, a törzsük görgethető. */
body .dahsboard-column {
    display: flex;
    flex-direction: column;
}

body .dahsboard-column > .box-typical-dashboard {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0 0 20px;
    overflow: visible;
}

body .dahsboard-column > .box-typical-dashboard > .box-typical-header {
    flex: none;
}

body .news-dashboard-column > .box-typical-dashboard > .box-typical-body,
body .subscription-info-holder > .box-typical-dashboard > .box-typical-body {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow: auto;
}

/* Ha csak a Hírek kártya van a sorban (nincs csomag), ne essen össze */
body .news-dashboard-column:only-child > .box-typical-dashboard > .box-typical-body {
    flex-basis: auto;
    max-height: 420px;
}

body .dashboard-four-box-col > .row {
    flex: none;
}

body .dashboard-four-box-col .statistic-box {
    margin: 0 0 20px;
}

/* Előfizetés kártya fejléce: a címben két .value blokk ül (csomag + állapot),
   ezek nem dobozok, a fejléc pedig a tartalomhoz nő. */
body .news-dashboard-column .box-typical-header,
body .subscription-info-holder .box-typical-header {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: auto;
    min-height: 57px;
    overflow: visible;
    padding: 12px 18px;
}

body .news-dashboard-column .box-typical-header .panel-title,
body .subscription-info-holder .box-typical-header .panel-title {
    width: 100%;
}

body .subscription-info-holder .box-typical-header .panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 28px;
    line-height: 1.3;
}

body .subscription-info-holder .box-typical-header .panel-title .value {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0;
    padding: 0;
    margin: 0;
    background: none;
    border-radius: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fg);
    text-align: left !important;
}

body .subscription-info-holder .box-typical-header .panel-title .value:first-child {
    flex: 1 1 160px;
    min-width: 0;
}

body .subscription-info-holder .box-typical-header .panel-title .value:last-child {
    flex: none;
    font-size: 13px;
    white-space: nowrap;
}

body .dahsboard-column .panel-title .value {
    font-size: 16px;
}

body .open-statistics-column .panel-body {
    min-height: 260px;
}

body #chart-holder-div .p-a {
    padding: 0;
}

body .adminNewsBox {
    font-size: 13px;
}

body .subscription-info-holder .p-a {
    text-align: left !important;
}

/* Hírlevél írás: a spam-ellenőrzés eredménydoboza a CKEditor szélességéhez
   igazodik (a szerkesztő a CKeditorWidget-ben 98% széles) */
body #spamCheckResult > .alert,
body .newsletterFormBox .alert.alert-info,
body .newsletterFormBox #CoreMailContent_mail_content_subject {
    width: calc(98% + 2px); /* a .cke content-box + 1px keret két oldalt */
    box-sizing: border-box;
}

/* Sablon szerkesztése "Tárgy, vagy nyomtatvány neve" és Termék szerkesztése
   "Termék neve": a mező az alatta lévő CKEditor (98% + keret) szélességét
   kapja, nyelvi fülenként */
body input[id^="Templates_template_subject"].form-control,
body input[id^="ProductItem_product_item_name"].form-control {
    width: calc(98% + 2px);
    box-sizing: border-box;
}

/* Szövegméret-számláló: jobb széle a CKEditor jobb keretére esik */
body .newsletterFormBox #characterCounter {
    float: right !important;
    padding-right: 0 !important;
    margin-right: calc(2% - 2px);
    margin-top: 6px;
    font-size: 13px;
}


   Kártyák: .box-typical, .task-card, .panel
   -------------------------------------------------------------------------- */
body .box-typical,
body .panel,
body .task-card,
body .card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin: 0 0 20px;
    color: var(--fg);
    overflow: visible;
}

body .box-typical-header,
body .panel-heading,
body .box-typical-header-sm,
body .task-card-create {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 16px 18px;
    border-radius: var(--radius) var(--radius) 0 0;
    margin: 0;
}

body .box-typical-header .tbl-cell,
body .panel-heading .tbl-cell {
    padding: 0 !important;
    vertical-align: middle;
}

body .box-typical-header .tbl-cell-action,
body .panel-heading .tbl-cell-action {
    padding-left: 14px !important;
}

body .panel-title,
body .box-typical-header h3,
body .box-typical-header h4,
body .box-typical-header .title,
body .box-typical-header-sm {
    font-size: 20px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--fg);
    margin: 0;
}

body .box-typical-body,
body .panel-body,
body .task-card-footer,
body .box-typical-section {
    padding: 18px;
    background: transparent;
    color: var(--fg);
}

body .box-typical-footer,
body .panel-footer {
    background: var(--bg2);
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 12px 18px;
}

body .box-typical-dashboard .box-typical-body {
    height: auto;
    max-height: 420px;
    overflow: auto;
}

body .task-card-create + .task-card-footer,
body .task-card .task-card-footer {
    border-top: 0;
}

/* Fájlkezelő-szerű listák (hírlevelek, folyamok) */
body .files-manager {
    overflow: hidden;
}

body .files-manager-side {
    background: var(--bg2);
    border-right: 1px solid var(--line);
    border-radius: var(--radius) 0 0 var(--radius);
}

body .files-manager-side-title,
body .files-manager-side-list .files-manager-side-title {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    padding: 16px 18px 8px;
    border: 0;
}

body .files-manager-side-list {
    padding: 0 8px 12px;
}

body .files-manager-side-list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--fg2);
    font-size: 14px;
    text-decoration: none;
    border: 0;
    background: transparent;
}

body .files-manager-side-list li a:hover,
body .files-manager-side-list li a.active,
body .files-manager-side-list li.active a {
    background: var(--accent-tint2);
    color: var(--fg);
}

body .files-manager-panel,
body .files-manager-panel-in,
body .files-manager-content,
body .files-manager-aside {
    background: transparent;
    border-color: var(--line);
}

body .files-manager-aside {
    border-left: 1px solid var(--line);
}

body .fm-file-grid,
body .fm-file {
    background: transparent;
}

/* Üres állapot (add-customers-screen) */
body .add-customers-screen {
    padding: 40px 20px;
}

body .add-customers-screen-user {
    width: 72px;
    height: 72px;
    border: 1px dashed var(--line-strong);
    border-radius: 16px;
    background: var(--bg2);
    color: var(--muted);
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    font-size: 26px;
}

body .add-customers-screen-user .font-icon,
body .add-customers-screen-user .fa {
    color: var(--muted);
    font-size: 26px;
}

body .add-customers-screen h1,
body .add-customers-screen h2,
body .add-customers-screen h3,
body .add-customers-screen .add-customers-screen-title {
    font-size: 24px;
    line-height: 1.15;
    color: var(--fg);
    margin: 0 0 8px;
}

body .add-customers-screen p {
    font-size: 14px;
    color: var(--muted);
    max-width: 60ch;
    margin: 0 auto;
}

/* Hír-lista a vezérlőpulton */
body .widget-activity-item,
body .user-card-row {
    border-color: var(--line2);
}

body .user-card-row .tbl-cell {
    color: var(--fg2);
}

body .user-card-row .tbl-cell a,
body .user-card-row .tbl-cell b,
body .user-card-row .tbl-cell strong {
    color: var(--fg);
}

/* --------------------------------------------------------------------------
   Gombok
   -------------------------------------------------------------------------- */
body .btn,
body .btn-rounded,
body .viButtonDesigned,
body input[type="submit"].btn,
body button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: auto;
    min-height: 36px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--fg);
    font-family: "Barlow", system-ui, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-decoration: none;
    box-shadow: none;
    text-shadow: none;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    vertical-align: middle;
}

body .btn:hover,
body .btn:focus,
body .btn-rounded:hover,
body .viButtonDesigned:hover {
    background: var(--hover);
    color: var(--fg);
    border-color: var(--line-strong);
    box-shadow: none;
    text-decoration: none;
}

body .btn-primary,
body .btn-success,
body .btn-info,
body .btn-inline.btn-success,
body .btn-rounded.btn-success,
body .btn-rounded.btn-primary,
body .btn.btn-primary.viButtonDesigned,
body .btn.btn-success.viButtonDesigned,
body .site-header .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

body .btn-primary:hover,
body .btn-primary:focus,
body .btn-success:hover,
body .btn-success:focus,
body .btn-info:hover,
body .btn-info:focus,
body .btn-inline.btn-success:hover,
body .btn-rounded.btn-success:hover,
body .btn-rounded.btn-primary:hover,
body .btn.btn-primary.viButtonDesigned:hover,
body .btn.btn-success.viButtonDesigned:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--on-accent);
}

body .btn-default,
body .btn-secondary,
body .btn-rounded.btn-default,
body .btn-inline.btn-default,
body .btn.btn-default.viButtonDesigned {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--fg);
}

body .btn-default:hover,
body .btn-secondary:hover,
body .btn-rounded.btn-default:hover {
    background: var(--hover);
    color: var(--fg);
}

body .btn-danger,
body .btn-rounded.btn-danger {
    background: transparent;
    border-color: var(--danger);
    color: var(--danger);
}

body .btn-danger:hover,
body .btn-rounded.btn-danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

body .btn-warning,
body .btn-rounded.btn-warning {
    background: var(--warn-tint);
    border-color: var(--warn-tint);
    color: var(--warn);
}

body .btn-warning:hover {
    background: var(--warn);
    border-color: var(--warn);
    color: #fff;
}

/* A viButtonDesigned/btn-rounded fehér szövege a halvány sárga alapon nem
   látszott (pl. hírlevél "Előnézet" gomb) – borostyán szöveg és ikon */
body .btn.btn-warning,
body .btn-warning.viButtonDesigned,
body .btn-rounded.btn-warning.viButtonDesigned,
body .btn-warning .fa,
body .btn-warning .glyphicon {
    color: var(--warn) !important;
    background: var(--warn-tint);
    border-color: var(--warn);
}

body .btn.btn-warning:hover,
body .btn-warning.viButtonDesigned:hover,
body .btn-warning:hover .fa,
body .btn-warning:hover .glyphicon {
    color: #fff !important;
    background: var(--warn);
    border-color: var(--warn);
}

body .btn-sm,
body .btn-xs {
    min-height: 30px;
    padding: 4px 12px;
    font-size: 13px;
}

body .btn-lg {
    min-height: 44px;
    padding: 10px 22px;
    font-size: 16px;
}

body .btn .fa,
body .btn .glyphicon,
body .btn .font-icon {
    font-size: 13px;
    line-height: 1;
    top: 0;
}

body .btn-group > .btn {
    border-radius: 999px;
}

/* Táblázat sorvégi műveletgombok (tabledit-toolbar): egy szürke pill, benne
   középre igazított ikonok. A "Publikál" link csak egy <a><img> (nincs .btn
   osztálya), ezért ugyanazt a kinézetet a szelektor adja, nem az osztály. */
body .tabledit-toolbar .btn-group {
    display: inline-flex;
    align-items: stretch;
    float: none;
    vertical-align: middle;
}

body .tabledit-toolbar .btn-group > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    box-sizing: border-box;
    min-width: 31px;
    height: 30px;
    min-height: 0;
    padding: 0 8px;
    margin: 0;
    border: 1px solid #adb7be;
    border-radius: 0;
    background: #adb7be;
    color: var(--fg) !important;
    line-height: 1;
    text-decoration: none !important;
}

body .tabledit-toolbar .btn-group > a + a {
    margin-left: -1px;
}

body .tabledit-toolbar .btn-group > a:first-child {
    border-radius: 999px 0 0 999px;
}

body .tabledit-toolbar .btn-group > a:last-child {
    border-radius: 0 999px 999px 0;
}

body .tabledit-toolbar .btn-group > a:only-child {
    border-radius: 999px;
}

body .tabledit-toolbar .btn-group > a:hover {
    background: #9aa6ae;
    border-color: #9aa6ae;
}

body .tabledit-toolbar .btn-group > a .glyphicon,
body .tabledit-toolbar .btn-group > a .fa,
body .tabledit-toolbar .btn-group > a .font-icon {
    font-size: 13px;
    line-height: 1;
    top: 0;
    display: block;
}

body .tabledit-toolbar .btn-group > a img {
    display: block;
    width: 14px;
    height: 14px;
}

body .btn.disabled,
body .btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

body .btn-link,
body a.btn-link {
    border: 0;
    background: transparent;
    color: var(--accent-text);
    padding: 0 6px;
    min-height: 0;
}

/* --------------------------------------------------------------------------
   Űrlapok
   -------------------------------------------------------------------------- */
body label,
body .form-group > label,
body .control-label {
    font-family: "Barlow", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    margin: 0 0 5px;
}

body .form-group {
    margin-bottom: 14px;
}

body .form-control,
body select.form-control,
body textarea.form-control,
body input.form-control,
body .form-control-wrapper .form-control,
body .select2-container .select2-selection,
body .select2-container--default .select2-selection--single {
    display: block;
    width: 100%;
    height: auto;
    min-height: 40px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    background: var(--bg2);
    border: 1px solid var(--line);
    color: var(--fg);
    box-shadow: none;
    transition: border-color .15s;
}

body .form-control:focus,
body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--accent);
    box-shadow: none;
    background: var(--bg2);
    color: var(--fg);
    outline: none;
}

body .form-control::placeholder {
    color: var(--muted2);
}

body .form-control:disabled,
body .form-control[readonly] {
    background: var(--track);
    color: var(--fg2);
}

body textarea.form-control {
    min-height: 110px;
    resize: vertical;
}

body .form-control.error,
body input.error,
body select.error,
body textarea.error,
body .has-error .form-control {
    border-color: var(--danger);
}

body .error.error_msg,
body .error_msg,
body .help-block.error,
body label.error,
body .field-error {
    font-size: 12px;
    color: var(--danger);
    margin-top: 4px;
}

body .error.error_msg:empty {
    display: none;
}

body .value,
body .form-control-static {
    min-height: 40px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: var(--track);
    font-size: 14px;
    color: var(--fg);
}

/* Mezőként elhelyezett, csak olvasható érték (pl. hírlevél profil azonosító):
   a virtualcom.css ".value { width:49% }" helyett a mezők teljes szélessége */
body .form-control-wrapper > .value {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Egyedi legördülő (pl. Csomagváltás "Új csomag"): natív select a mezők
   kinézetével és saját, a témához igazodó nyíllal */
body .mh-select {
    position: relative;
    display: block;
    margin-top: 6px;
}

body .mh-select > select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 9px 40px 9px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--fg);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body .mh-select > select:hover {
    border-color: var(--accent-soft);
}

body .mh-select > select:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint2);
}

body .mh-select > select option {
    background: var(--card);
    color: var(--fg);
}

body .mh-select::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    pointer-events: none;
}

body .mh-select:focus-within::after {
    border-color: var(--accent);
}

/* Előtagos mező (pl. feliratkozó telefonszám "+36"): az előtag és a mező
   egy összefüggő beviteli sáv */
body .mh-input-prefix {
    display: flex;
    align-items: stretch;
}

body .mh-input-prefix-label {
    display: flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--bg2);
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

body .mh-input-prefix > .form-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Feliratkozó hozzáadása / szerkesztése: címke | mező rács, modern mezők */
body .mh-subscriber-form fieldset.form-group {
    display: grid;
    grid-template-columns: minmax(140px, 200px) minmax(0, 560px);
    align-items: start;
    column-gap: 20px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

body .mh-subscriber-form fieldset.form-group > label,
body .mh-subscriber-form fieldset.form-group > .form-control-wrapper {
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
}

body .mh-subscriber-form fieldset.form-group > label {
    margin: 0;
    padding-top: 11px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fg2);
}

body .mh-subscriber-form .form-control {
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid var(--line-strong);
    background: var(--card);
    transition: border-color .15s ease, box-shadow .15s ease;
}

body .mh-subscriber-form .form-control:hover {
    border-color: var(--accent-soft);
}

body .mh-subscriber-form .form-control:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint2);
}

body .mh-subscriber-form .form-control[readonly] {
    background: var(--bg2);
    border-color: var(--line);
    cursor: default;
    box-shadow: none;
}

/* Egyedi adatok (kulcs–érték sorok): kulcs | érték | szögletes törlés gomb */
body .mh-subscriber-form .key-value-list {
    display: grid;
    gap: 8px;
}

body .mh-subscriber-form .key-value-row.input-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 42px;
    gap: 8px;
    width: 100%;
    margin: 0 !important;
}

body .mh-subscriber-form .key-value-row .form-control {
    width: 100%;
    border-radius: var(--radius-sm) !important;
}

body .mh-subscriber-form .key-value-row .input-group-append {
    display: flex;
}

body .mh-subscriber-form .key-value-row .btn.remove-row {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border: 1px solid var(--line-strong) !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    color: var(--muted) !important;
    transition: background .12s, border-color .12s, color .12s;
}

body .mh-subscriber-form .key-value-row .btn.remove-row .fa {
    color: inherit !important;
    font-size: 14px;
}

body .mh-subscriber-form .key-value-row .btn.remove-row:hover,
body .mh-subscriber-form .key-value-row .btn.remove-row:focus {
    border-color: var(--danger) !important;
    background: var(--danger-tint) !important;
    color: var(--danger) !important;
}

body .mh-subscriber-form .key-value-row .btn.remove-row:hover .fa,
body .mh-subscriber-form .key-value-row .btn.remove-row:focus .fa {
    color: var(--danger) !important;
}

body .mh-subscriber-form #add_key_value_row {
    margin-top: 10px;
}

@media (max-width: 767px) {
    body .mh-subscriber-form fieldset.form-group {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 6px;
    }

    body .mh-subscriber-form fieldset.form-group > label {
        padding-top: 0;
    }
}

/* Címlista importálása: számozott lépések, mintatáblázat, fájl-ejtőzóna,
   hibás sorok listája */
body .mh-import-step {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
    margin: 0 0 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

body .mh-import-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent-text);
    font-size: 14px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

body .mh-import-step-title {
    margin: 4px 0 8px;
    font-size: 16px;
    color: var(--fg);
}

body .mh-import-step-body > p {
    margin: 0 0 12px;
    color: var(--fg2);
}

body .mh-import-sample {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin: 0 0 10px;
}

body .mh-import-sample .table {
    margin: 0;
    border: 0;
    white-space: nowrap;
}

body .mh-import-sample .table th,
body .mh-import-sample .table td {
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--line2);
    font-size: 13px;
}

body .mh-import-sample .table tbody tr:last-child td {
    border-bottom: 0;
}

body .mh-import-sample .table th {
    background: var(--bg2);
    color: var(--fg);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

body .mh-import-sample .table td {
    color: var(--fg2);
}

body .mh-import-sample .table .is-optional {
    color: var(--muted);
    font-style: italic;
}

body .mh-import-sample .table th.is-optional {
    font-weight: 500;
}

body .mh-import-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0 0 10px;
    font-size: 12.5px;
    color: var(--muted);
}

body .mh-import-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body .mh-import-legend span::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

body .mh-import-legend .is-required::before {
    background: var(--accent);
}

body .mh-import-legend .is-optional::before {
    border: 1.5px dashed var(--muted2);
}

body .mh-import-step-body > .mh-import-hint {
    font-size: 13px;
    color: var(--muted);
}

/* Ejtőzóna: a natív fájlmező átlátszóan lefedi, így kattintásra tallóz és a
   ráejtett fájlt is átveszi */
body .mh-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 20px;
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius);
    background: var(--bg2);
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
}

body .mh-dropzone:hover,
body .mh-dropzone.is-dragover {
    border-color: var(--accent);
    background: var(--accent-tint2);
}

body .mh-dropzone:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

body .mh-dropzone.has-file {
    border-style: solid;
    border-color: var(--accent);
}

body .mh-dropzone > .mh-dropzone-input {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

body .mh-dropzone-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent-text);
    display: grid;
    place-items: center;
    font-size: 20px;
    margin-bottom: 4px;
}

body .mh-dropzone-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--fg);
}

body .mh-dropzone-hint {
    font-size: 12.5px;
    color: var(--muted);
}

body .mh-dropzone-file {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--fg);
    font-size: 13px;
    font-weight: 500;
    max-width: 100%;
}

body .mh-dropzone-file #fileName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .mh-dropzone.has-file .mh-dropzone-file {
    display: inline-flex;
}

body .mh-import-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

body .mh-import-errors {
    margin: 0 0 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

body .mh-import-errors-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--danger-tint);
    color: var(--danger);
    font-weight: 600;
}

body .mh-import-errors-count {
    margin-left: auto;
    min-width: 24px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--danger);
    color: var(--on-accent);
    font-size: 12px;
    text-align: center;
}

body .mh-import-errors-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

body .mh-import-errors-list > li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--line2);
    font-size: 13px;
}

body .mh-import-errors-row {
    flex: none;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--bg2);
    color: var(--fg2);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

body .mh-import-errors-body {
    min-width: 0;
    color: var(--fg2);
}

body .mh-import-errors-msg {
    color: var(--fg);
    font-weight: 500;
}

body .mh-import-errors-details {
    margin-top: 4px;
    color: var(--muted);
    word-break: break-word;
}

@media (max-width: 575px) {
    body .mh-import-step {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px;
    }
}

/* Jelölőnégyzet pipája. A sablon a ::after-ben startui-ikonnal rajzolja a
   pipát, egy korábbi szabály viszont a ::after-nek is világos hátteret adott:
   bejelölve ez eltakarta a kék négyzetet, és a fehér pipa nem látszott.
   A ::after átlátszó, a pipa CSS-sel rajzolt (ikonfonttól független). */
body .checkbox input[type="checkbox"]:not(:checked) + label::after,
body .radio input[type="checkbox"]:not(:checked) + label::after {
    content: "";
    background: transparent;
    border: 0;
}

body .checkbox input[type="checkbox"]:checked + label::after,
body .radio input[type="checkbox"]:checked + label::after {
    content: "";
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid var(--on-accent);
    border-width: 0 2px 2px 0;
    border-radius: 0;
    background: transparent;
    font-size: 0;
    transform: rotate(45deg);
}

body .checkbox input[type="checkbox"]:disabled:checked + label::before,
body .radio input[type="checkbox"]:disabled:checked + label::before {
    background: var(--muted3);
    border-color: var(--muted3);
}

/* Legördülők magassága: a bootstrap "select.form-control:not([size]):not([multiple])
   { height: calc(2.25rem + 2px) }" szabálya erősebb volt a mezők min-height: 40px-énél,
   így a select alacsonyabb volt a szövegmezőknél (pl. Feliratkozó űrlap generálás) */
body select.form-control:not([size]):not([multiple]) {
    height: auto;
    min-height: 40px;
}

/* Táblázatok feletti információs sáv (ViGridTableWidget .information-box):
   "Találatok száma" chip számjelvénnyel, az export gombok a sor jobb szélén
   (a virtualcom.css padding / float szabályai helyett) */
body .information-box,
body .StartUiGridTableForm .information-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
    padding: 0;
}

body .information-box .totalNumber,
body .StartUiGridTableForm .totalNumber {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 5px 4px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg2);
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

body .information-box .totalNumberValue {
    min-width: 26px;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--accent-tint);
    color: var(--accent-text);
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

body .information-box .greenButton {
    float: none;
    margin: 0 !important;
}

body .information-box .totalNumber ~ .greenButton:first-of-type,
body .information-box .greenButton:first-child {
    margin-left: auto !important;
}

/* Űrlapok modul (formContent.php): az almenü ("Űrlap") és az elintézetlen
   űrlapok két külön kártya-táblázatban; a menüpontok és az űrlapok soronként,
   elválasztóval. Az #left-col a sötét téma táblázat-háttér szabálya ellen kell. */
body #left-col.mh-form-subnav > [class*="col-"] {
    margin-bottom: 16px;
}

body #left-col table.zebra.mh-subnav-card {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow);
}

body #left-col table.zebra.mh-subnav-card > thead > tr > th {
    padding: 12px 16px;
    background: var(--bg2);
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* a fejléc régi ikon-helye (üres span) */
body #left-col #submenu-header > span:first-child {
    display: none;
}

/* Almenü kártya: a menülista egy cellában ül, a sorokat a li-k adják */
body #left-col table.mh-subnav-card:not(.mh-todo-card) > tbody > tr > td {
    padding: 0;
    border: 0;
    background: transparent;
}

body #left-col .mh-subnav-card .left-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

body #left-col .mh-subnav-card .left-menu > li.sep {
    display: none;
}

body #left-col .mh-subnav-card .left-menu > li:not(.sep) ~ li:not(.sep) {
    border-top: 1px solid var(--line2);
}

body #left-col .mh-subnav-card .left-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    color: var(--fg2);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .12s, color .12s;
}

body #left-col .mh-subnav-card .left-menu > li > a::after {
    content: "";
    flex: none;
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--muted2);
    border-bottom: 2px solid var(--muted2);
    transform: rotate(-45deg);
}

body #left-col .mh-subnav-card .left-menu > li > a:hover {
    background: var(--hover2);
    color: var(--fg);
}

body #left-col .mh-subnav-card .left-menu > li.activeItem > a,
body #left-col .mh-subnav-card .left-menu > li > a.activeItem {
    background: var(--accent-tint2);
    color: var(--accent-text);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--accent);
}

body #left-col .mh-subnav-card .left-menu > li.activeItem > a::after,
body #left-col .mh-subnav-card .left-menu > li > a.activeItem::after {
    border-color: var(--accent-text);
}

/* Elintézetlen kártya: űrlap neve | darabszám jelvény */
body #left-col table.zebra.mh-todo-card > tbody > tr > td {
    padding: 11px 16px;
    border: 0;
    border-top: 1px solid var(--line2);
    vertical-align: middle;
    background: transparent;
}

body #left-col table.zebra.mh-todo-card > tbody > tr:first-child > td {
    border-top: 0;
}

body #left-col table.zebra.mh-todo-card > tbody > tr:hover > td {
    background: var(--hover2);
}

body #left-col .mh-todo-card .mh-todo-name a {
    color: var(--fg);
    font-weight: 500;
    text-decoration: none;
}

body #left-col .mh-todo-card .mh-todo-name a:hover {
    color: var(--accent-text);
}

body #left-col .mh-todo-card .mh-todo-count {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

body #left-col .mh-todo-card .label.span-pendingFormNum {
    display: inline-block;
    min-width: 26px;
    padding: 2px 9px;
    border: 0;
    border-radius: 999px;
    background: var(--danger-tint);
    color: var(--danger);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

/* Csomagváltás ablak: a "Módosítási igény jelzése" a lábban, a "Bezárás"
   mellett egy sorban (a virtualcom.css felső/alsó margója nélkül) */
body #change-package .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

body #change-package .modal-footer > .btn,
body #change-package #submit-package-change-btn {
    width: auto;
    margin: 0;
}

/* A régi sablonokban a p.form-control-static gyakran csak beviteli mezőt
   csomagol, vagy a böngésző üresre zárja (div a p-ben) – ilyenkor ne legyen doboz. */
body .form-control-static:empty,
body .form-control-static:has(> .form-control),
body .form-control-static:has(> .value) {
    min-height: 0;
    padding: 0;
    background: none;
    margin: 0;
}

body .checkbox,
body .radio,
body .checkbox-toggle {
    color: var(--fg2);
    font-size: 14px;
    margin: 8px 0;
}

body .checkbox label,
body .radio label {
    font-size: 14px;
    color: var(--fg2);
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
    cursor: pointer;
}

body input[type="checkbox"],
body input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    margin: 0;
    vertical-align: middle;
}

/* A sablon saját, rajzolt jelölőnégyzete (span-alapú) – hagyjuk a natívra */
body .checkbox input[type="checkbox"] + label::before,
body .checkbox input[type="checkbox"] + label::after,
body .radio input[type="radio"] + label::before,
body .radio input[type="radio"] + label::after {
    border-color: var(--line-strong);
    background: var(--bg2);
    border-radius: 4px;
}

body .checkbox input[type="checkbox"]:checked + label::before,
body .radio input[type="radio"]:checked + label::before {
    background: var(--accent);
    border-color: var(--accent);
}

body .input-group-addon,
body .input-group-text {
    background: var(--bg2);
    border-color: var(--line);
    color: var(--muted);
    border-radius: var(--radius-sm);
}

body .bootstrap-touchspin .btn {
    min-height: 40px;
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Táblázatok
   -------------------------------------------------------------------------- */
body .table,
body .tbl-typical,
body table.zebra,
body .table-striped,
body .dataTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: var(--fg);
    background: transparent;
    margin: 0;
}

/* ViGridTable: a virtualcom.css ".table .table" szabálya szürkére festi (a
   csomagoló div is .table osztályú); a Bootstrap .table-responsive miatt a
   táblázat blokk, a sorai csak a tartalom szélességét töltik ki, így a szürke
   háttér a sorok mellett látszott (pl. Menü csoportok). A szélesség marad,
   csak a háttér átlátszó. */
body .table .table,
body table.ViGridTable {
    background: transparent !important;
}

body .table thead th,
body .tbl-typical thead th,
body .table > thead > tr > th,
body table.zebra th,
body .dataTable thead th {
    text-align: left;
    font-family: "Barlow", system-ui, sans-serif;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

body .table td,
body .tbl-typical td,
body .table > tbody > tr > td,
body table.zebra td,
body .dataTable td {
    padding: 11px 12px;
    border: 0;
    border-bottom: 1px solid var(--line3);
    vertical-align: middle;
    background: transparent;
    color: var(--fg);
}

body .table-striped > tbody > tr:nth-of-type(odd),
body .table-striped > tbody > tr:nth-of-type(odd) > td,
body table.zebra tr.odd td,
body table.zebra tr.even td {
    background: transparent;
}

body .table > tbody > tr:hover > td,
body .table-hover > tbody > tr:hover > td,
body table.zebra tbody tr:hover td {
    background: var(--hover2);
}

body .table-bordered,
body .table-bordered td,
body .table-bordered th {
    border-color: var(--line3);
}

body .tbl-cell-btns .btn,
body td .btn {
    min-height: 30px;
    padding: 4px 12px;
    font-size: 13px;
}

/* Címkék, jelvények */
body .label,
body .badge,
body .tag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: .04em;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--track);
    color: var(--fg2);
    line-height: 1.4;
    text-transform: none;
}

body .label-primary,
body .badge-primary,
body .label-info,
body .badge-info,
body .label-success,
body .badge-success {
    background: var(--accent-tint);
    color: var(--accent-deep);
}

body .label-danger,
body .badge-danger {
    background: var(--danger-tint);
    color: var(--danger);
}

body .label-warning,
body .badge-warning {
    background: var(--warn-tint);
    color: var(--warn);
}

/* Lapozás */
body .pagination {
    display: inline-flex;
    gap: 4px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

body .pagination > li > a,
body .pagination > li > span,
body .pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--fg2);
    font-size: 13px;
    text-decoration: none;
    margin: 0;
}

body .pagination > li > a:hover,
body .pagination .page-link:hover {
    background: var(--hover);
    color: var(--fg);
}

body .pagination > li.active > a,
body .pagination > li.active > span,
body .pagination .page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* Fülek */
body .nav-tabs {
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
}

body .nav-tabs > li > a,
body .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--muted);
    font-weight: 500;
    padding: 10px 14px;
    background: transparent;
    margin-bottom: -1px;
}

body .nav-tabs > li.active > a,
body .nav-tabs .nav-link.active,
body .nav-tabs > li > a:hover {
    color: var(--fg);
    border-bottom-color: var(--accent);
    background: transparent;
}

body .tab-content {
    background: transparent;
    border: 0;
    padding: 0;
}

/* Figyelmeztetések */
body .alert {
    border-radius: 12px;
    border: 1px solid var(--line);
    padding: 12px 16px;
    font-size: 14px;
    background: var(--bg2);
    color: var(--fg2);
    margin: 0 0 20px;
}

body .alert-info,
body .upper-information-text {
    background: var(--accent-tint);
    border-color: var(--accent-soft);
    color: var(--accent-deep);
}

body .alert-info a {
    color: var(--accent-deep);
    text-decoration: underline;
}

body .alert-success {
    background: var(--success-tint);
    border-color: var(--success);
    color: var(--success);
}

body .alert-danger,
body .alert-error {
    background: var(--danger-tint);
    border-color: var(--danger);
    color: var(--danger);
}

body .alert-warning {
    background: var(--warn-tint);
    border-color: var(--warn);
    color: var(--warn);
}

/* Modálok */
body .modal-content {
    background: var(--card);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

body .modal-header {
    border-bottom: 1px solid var(--line);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

body .modal-title {
    font-size: 20px;
    line-height: 1.1;
    margin: 0;
    color: var(--fg);
    flex: 1;
}

body .modal-header .modal-close,
body .modal-header .close {
    order: 2;
    margin: 0;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    opacity: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: static;
    float: none;
    text-shadow: none;
}

body .modal-header .modal-close:hover,
body .modal-header .close:hover {
    background: var(--hover);
    color: var(--fg);
}

body .modal-body {
    padding: 18px;
    color: var(--fg2);
}

body .modal-footer {
    border-top: 1px solid var(--line);
    padding: 14px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

body .modal-backdrop {
    background: #0f1a2e;
}

body .modal-backdrop.in,
body .modal-backdrop.show {
    opacity: .45;
}

/* Legördülők */
body .dropdown-menu {
    background: var(--card);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 6px;
    min-width: 200px;
}

body .dropdown-menu .dropdown-item,
body .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--fg2);
    font-size: 14px;
    text-decoration: none;
    background: transparent;
    line-height: 1.3;
}

body .dropdown-menu .dropdown-item:hover,
body .dropdown-menu > li > a:hover {
    background: var(--hover);
    color: var(--fg);
}

body .dropdown-menu .dropdown-item .font-icon,
body .dropdown-menu .dropdown-item .fa,
body .dropdown-menu .dropdown-item .glyphicon {
    width: 16px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    top: 0;
}

body .dropdown-divider {
    border-top: 1px solid var(--line);
    margin: 6px 0;
}

/* Popover / tooltip / tour */
body .popover {
    background: var(--card);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    font-family: inherit;
}

body .popover-title,
body .popover-header {
    background: transparent;
    border-bottom: 1px solid var(--line);
    color: var(--fg);
    font-weight: 700;
    border-radius: 12px 12px 0 0;
}

body .popover-content,
body .popover-body {
    color: var(--fg2);
}

body .tooltip-inner {
    background: var(--fg);
    color: var(--bg);
    border-radius: 8px;
    font-family: inherit;
}

/* SweetAlert */
body .sweet-alert {
    background: var(--card);
    color: var(--fg);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    font-family: inherit;
}

body .sweet-alert h2 {
    color: var(--fg);
    font-size: 22px;
}

body .sweet-alert p {
    color: var(--fg2);
}

/* Szövegbe ágyazott gomb (pl. ÁSZF-változás: "Kattints ide a részletekért")
   – a szöveg alatt külön sorban, kis távolsággal */
body .sweet-alert p .btn {
    display: inline-block;
    margin-top: 16px;
    margin-bottom: 4px;
    line-height: 1.4;
}

body .sweet-alert button,
body .sweet-alert .btn {
    border-radius: 999px;
    font-family: "Barlow", system-ui, sans-serif;
    font-weight: 700;
    box-shadow: none !important;
    min-height: 40px;
    padding: 8px 20px;
}

body .sweet-alert button.confirm {
    background: var(--accent) !important;
    border: 1px solid var(--accent);
    color: var(--on-accent);
}

body .sweet-alert button.cancel {
    background: transparent !important;
    border: 1px solid var(--line-strong);
    color: var(--fg);
}

/* --------------------------------------------------------------------------
   Vezérlőpult (AdminControlPanel): az adminisztrációs területek csempékként.
   A lista az AdminModuleMenuWidget kimenete (ul.mh-cp-list > li > a), a
   li.sep elválasztók rejtve; az ikon-jelvényt a redesign-admin.js teszi be.
   -------------------------------------------------------------------------- */
body .mh-cp-lead {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--muted);
}

body ul.mh-cp-list {
    list-style: none;
    margin: 0;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

body ul.mh-cp-list > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

body ul.mh-cp-list > li.sep {
    display: none;
}

body ul.mh-cp-list > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    min-height: 72px;
    box-sizing: border-box;
    padding: 16px 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--fg) !important;
    font-family: "Barlow", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none !important;
    transition: border-color .15s, background .15s;
}

body ul.mh-cp-list > li > a::after {
    content: "\2192";
    margin-left: auto;
    padding-left: 8px;
    color: var(--muted2);
    font-weight: 400;
    transition: transform .15s, color .15s;
}

body ul.mh-cp-list > li > a:hover,
body ul.mh-cp-list > li > a:focus-visible {
    border-color: var(--accent);
    background: var(--accent-tint2);
    outline: none;
}

body ul.mh-cp-list > li > a:hover::after,
body ul.mh-cp-list > li > a:focus-visible::after {
    color: var(--accent);
    transform: translateX(3px);
}

body .mh-cp-mark {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--accent-tint2);
    color: var(--accent);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

body .mh-cp-mark .fa {
    font-size: 16px;
    line-height: 1;
}

/* Limitek módosítása: a hírlevél és az alap rendszer limit blokkja kártya-
   szekcióként (korábban inline "border: solid 1px", szögletes, %-os térköz). */
body .mh-limit-group {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: transparent;
    padding: 16px 18px 4px;
    margin: 0 0 18px;
}

body .mh-limit-group-title {
    font-family: "Barlow", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--fg);
    margin: 0 0 14px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Címlisták kártyái: a design kék akcentusa (a virtualcom.css olivedrab címe és
   #166aa1 felső csíkja helyett), egyforma magas kártyák, a gombsorok alul.
   A kereső a kártya oszlopára display:block-ot tesz, ezért az oszlop marad
   blokk; a kártya az oszlop teljes magasságát tölti ki (flex sor = stretch).
   -------------------------------------------------------------------------- */
body .address-list-row > [class*="col-"] {
    padding-bottom: 20px;
}

body .address-list-row .task-card.task {
    height: 100%;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    border-top: 4px solid var(--accent) !important;
}

body .address-list-row .task-card.task > .task-card-in {
    flex: 1 1 auto;
}

body .address-list-row .task-card-title h2.task-card-name {
    color: var(--accent-text) !important;
}

/* Veszély (piros) körvonalas gombok: a main.css ".btn {color:#fff !important}"
   miatt a szöveg fehér volt az átlátszó háttéren – csak a keret látszott
   (pl. "Hibás adatok törlése"). Nyugalmi állapot: piros szöveg; hover: kitöltés. */
body .btn.btn-danger,
body a.btn.btn-danger,
body .btn-danger.viButtonDesigned,
body .btn.btn-danger .fa,
body .btn.btn-danger .glyphicon {
    color: var(--danger) !important;
}

body .btn.btn-danger,
body a.btn.btn-danger {
    background: transparent !important;
    border-color: var(--danger) !important;
}

body .btn.btn-danger:hover,
body .btn.btn-danger:focus,
body a.btn.btn-danger:hover,
body .btn.btn-danger:hover .fa,
body .btn.btn-danger:hover .glyphicon {
    color: #fff !important;
}

body .btn.btn-danger:hover,
body .btn.btn-danger:focus,
body a.btn.btn-danger:hover {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
}

/* Elsődleges gombok: a virtualcom.css ".btn.btn-primary" (#166aa1) szabálya
   erősebb a redesign "body .btn-primary"-nél, ezért a design kékje itt nyer
   (pl. címlista kártyák "Hírlevél küldése / Címek listája / Szűrés"). */
body .btn.btn-primary,
body a.btn.btn-primary,
body .btn.btn-success,
body a.btn.btn-success {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--on-accent) !important;
}

body .btn.btn-primary:hover,
body .btn.btn-primary:focus,
body a.btn.btn-primary:hover,
body .btn.btn-success:hover,
body .btn.btn-success:focus,
body a.btn.btn-success:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    color: var(--on-accent) !important;
}

/* Címlista számláló csempék (Feliratkozók, Leiratkozott, ...): design tokenek,
   sötét témában is (main.css világos háttér + inline szürke szín ellen) */
body .address-list-row .btn-square-icon,
body .files-manager-to-stream .btn-square-icon {
    background: var(--bg2) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm);
    color: var(--muted) !important;
    transition: border-color .15s, background .15s;
}

body .address-list-row .btn-square-icon:hover,
body .files-manager-to-stream .btn-square-icon:hover {
    border-color: var(--accent) !important;
    background: var(--accent-tint2) !important;
    color: var(--fg) !important;
}

/* "Leiratkozottak azonnali törlése" jelvény: ikon, a szöveg hoverre (tooltip) */
body .address-list-row .mh-list-flags {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 6px;
}

body .mh-list-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    font-size: 15px;
    line-height: 1;
    cursor: help;
    outline: none;
}

body .mh-list-flag.is-danger {
    background: var(--danger-tint);
    color: var(--danger);
}

body .mh-list-flag:focus-visible {
    box-shadow: 0 0 0 2px var(--danger);
}

/* --------------------------------------------------------------------------
   Hírlevelek (archívum lista + részletek panel)
   -------------------------------------------------------------------------- */
body .folders-actions-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 16px;
}

body .folders-actions-wrapper .btn {
    margin: 0 !important;
    float: none !important;
}

body .proj-page-attach-holder {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm);
    background: var(--card) !important;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

body .proj-page-attach-holder:hover {
    border-color: var(--accent) !important;
}

body .proj-page-attach-holder.selected {
    background: var(--accent-tint2) !important;
    border: 1px solid var(--accent) !important;
}

body .proj-page-attach-holder .proj-page-attach > .font-icon {
    color: var(--muted2);
}

body .proj-page-attach-holder.selected .proj-page-attach > .font-icon {
    color: var(--accent);
}

/* Szövegszínek: a cím és a meta értékek egy ősről öröklik a sötétszürke
   #343434-et, ami sötét témában olvashatatlan – témaszín öröklődjön */
body .proj-page-attach,
body .files-manager-aside-section .info-list {
    color: var(--fg);
}

body .proj-page-attach p.name {
    color: var(--fg) !important;
}

body .proj-page-attach p.date {
    color: var(--muted) !important;
}

/* Előnézet: a sablon inline "border: 1px solid #919fa9" helyett; belül fehér
   marad, mert a levél tartalmát mutatja */
body iframe.view-newsletter-archieve-modal {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm);
    background: #fff;
}

body .files-manager-aside-section .info-list p > b {
    color: var(--muted);
    font-weight: 600;
    margin-right: 6px;
}

body .files-manager-aside-section .info-list p > b > .fa {
    width: 16px;
    margin-right: 4px;
    text-align: center;
    color: var(--muted2);
}

/* --------------------------------------------------------------------------
   Hírlevél folyamok (newsletterStream/adminList.php)
   -------------------------------------------------------------------------- */
body .files-manager.files-manager-to-stream {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    overflow: hidden;
}

body .files-manager-to-stream .files-manager-header {
    border-color: var(--line) !important;
    padding: 16px 20px !important;
}

body .files-manager-to-stream .files-manager-header-first {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* A sablon clearfix ::before/::after-je flex elemként eltolta a címet */
body .files-manager-to-stream .files-manager-header::before,
body .files-manager-to-stream .files-manager-header::after {
    display: none !important;
    content: none !important;
}

body .files-manager-to-stream .files-manager-header-left,
body .files-manager-to-stream .files-manager-header-right {
    float: none !important;
}

body .files-manager-to-stream .files-manager-header-left h2 {
    font-size: 24px !important;
    line-height: 1.15;
    margin: 0 0 4px !important;
    color: var(--fg);
}

body .files-manager-to-stream .files-manager-header-left span {
    font-style: normal !important;
    font-size: 13px !important;
    color: var(--muted) !important;
}

body .files-manager-to-stream .files-manager-header-right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

body .files-manager-to-stream .files-manager-header-right .btn {
    margin: 0 !important;
}

/* számláló csempék + címlista-név egy sorban */
body .files-manager-to-stream .files-manager-header:not(.files-manager-header-first) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

body .files-manager-to-stream .files-manager-header .btn-square-icon {
    margin: 0 !important;
}

body .newsletter-stream-address-list-name {
    float: none !important;
    margin-left: auto;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg2);
    color: var(--fg2) !important;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.3;
}

/* Folyam lépései (nestable lista) */
body .files-manager-to-stream #nestable9 {
    padding: 16px 20px 8px !important;
}

body .files-manager-to-stream .dd3-item {
    margin: 0 0 10px;
}

body .files-manager-to-stream .dd3-content {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: auto !important;
    min-height: 48px;
    margin: 0 !important;
    padding: 10px 14px 10px 54px !important;
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--fg) !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    transition: border-color .15s, background .15s;
}

body .files-manager-to-stream .dd3-content:hover {
    border-color: var(--accent) !important;
}

body .files-manager-to-stream .dd3-handle {
    width: 42px !important;
    height: 100% !important;
    bottom: 0;
    border: 0 !important;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
    background: var(--accent-tint2) !important;
    color: var(--accent) !important;
}

body .files-manager-to-stream .dd3-handle:before {
    color: var(--accent) !important;
    top: 0 !important;
    bottom: 0;
    height: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
}

body .files-manager-to-stream .dd3-handle:hover {
    background: var(--accent) !important;
}

body .files-manager-to-stream .dd3-handle:hover:before {
    color: var(--on-accent) !important;
}

body .files-manager-to-stream .dd3-handle:hover + .dd3-content {
    border-color: var(--accent) !important;
}

body .newsletter-stream-newsl-settings {
    float: none !important;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1;
    color: var(--muted) !important;
    white-space: nowrap;
}

body .newsletter-stream-newsl-settings a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: var(--muted) !important;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}

body .newsletter-stream-newsl-settings a .fa {
    font-size: 14px;
}

body .newsletter-stream-newsl-settings a:hover {
    background: var(--accent-tint2);
    color: var(--accent) !important;
}

body .newsletter-stream-newsl-settings a.confirmation:hover {
    background: var(--danger-tint);
    color: var(--danger) !important;
}

/* Gombok: a sablon inline margin-left: 11px-e helyett a listához igazítva */
body .files-manager-to-stream .files-manager-side > .btn {
    margin: 10px 8px 0 !important;
}

body .files-manager-to-stream .files-manager-content > .files-manager-content > .btn {
    margin: 0 0 20px 20px !important;
}

body .files-manager-to-stream .files-manager-content > .files-manager-content > .btn + .btn {
    margin-left: 8px !important;
}

/* --------------------------------------------------------------------------
   Számléptető (bootstrap-touchspin, függőleges gombok) – pl. "Késleltetés".
   A sablonban a két 40px-es szürke gomb egymás alatt kétszer olyan magasra
   nyújtotta a mezőt és kilógott az oszlopból; itt normál 40px-es mező, a
   léptető a mező jobb szélén belül.
   -------------------------------------------------------------------------- */
body .bootstrap-touchspin {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

body .bootstrap-touchspin > .form-control {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px;
    padding-right: 38px !important;
    border-radius: var(--radius-sm) !important;
}

body .bootstrap-touchspin .input-group-btn-vertical {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 30px;
    display: flex;
    flex-direction: column;
    z-index: 3;
    border-left: 1px solid var(--line);
}

body .bootstrap-touchspin .input-group-btn-vertical > .btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--muted) !important;
    box-shadow: none !important;
    line-height: 1;
}

body .bootstrap-touchspin .input-group-btn-vertical > .bootstrap-touchspin-up {
    border-top-right-radius: var(--radius-sm) !important;
}

body .bootstrap-touchspin .input-group-btn-vertical > .bootstrap-touchspin-down {
    border-top: 1px solid var(--line) !important;
    border-bottom-right-radius: var(--radius-sm) !important;
}

body .bootstrap-touchspin .input-group-btn-vertical > .btn:hover {
    background: var(--accent-tint2) !important;
    color: var(--accent) !important;
}

body .bootstrap-touchspin .input-group-btn-vertical .glyphicon {
    font-size: 9px !important;
    top: 0;
    color: inherit !important;
}

/* --------------------------------------------------------------------------
   Email sablon választó (Hírlevél írás → "Email sablon kiválasztása")
   -------------------------------------------------------------------------- */
body .mh-tpl-dialog {
    max-width: min(1120px, 94vw) !important;
    width: auto;
}

body .mh-tpl-modal .modal-content {
    border-radius: var(--radius);
    overflow: hidden;
}

body .mh-tpl-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 12px !important;
    border-bottom: 0 !important;
}

body .mh-tpl-header .modal-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

body .mh-tpl-sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--muted);
}

body .mh-tpl-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px 14px;
    border-bottom: 1px solid var(--line);
}

body .mh-tpl-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 420px;
}

body .mh-tpl-search .fa {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted2);
    pointer-events: none;
}

body .mh-tpl-search .form-control {
    padding-left: 36px !important;
}

body .mh-tpl-count {
    margin-left: auto;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}

body .mh-tpl-body {
    max-height: min(68vh, 720px) !important;
    overflow-y: auto;
    padding: 20px 24px !important;
    background: var(--bg2);
}

body .mh-tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
    margin: 0 !important;
    transform: none !important;
}

body .mh-tpl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    outline: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

body .mh-tpl-card[hidden] {
    display: none !important;
}

body .mh-tpl-card:hover,
body .mh-tpl-card:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint2), var(--shadow);
    transform: translateY(-2px);
}

body .mh-tpl-thumb {
    position: relative;
    height: 240px;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

body .mh-tpl-thumb iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 640px !important;
    height: 900px !important;
    border: 0;
    background: #fff;
    transform-origin: top left;
    transform: scale(.32);
    pointer-events: none;
}

/* Betöltés alatt: halvány csillámló helykitöltő boríték-ikonnal, majd az
   előnézet beúszik (a JS a thumb-ra teszi az is-loaded osztályt) */
body .mh-tpl-thumb::before {
    content: "\f003";
    font-family: FontAwesome;
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--muted3);
    background: linear-gradient(100deg, var(--bg2) 30%, var(--track) 50%, var(--bg2) 70%);
    background-size: 200% 100%;
    animation: mh-tpl-shimmer 1.3s linear infinite;
}

body .mh-tpl-thumb.is-loaded::before {
    display: none;
}

body .mh-tpl-thumb iframe {
    opacity: 0;
    transition: opacity .25s ease;
}

body .mh-tpl-thumb.is-loaded iframe {
    opacity: 1;
}

@keyframes mh-tpl-shimmer {
    from { background-position: 100% 0; }
    to   { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    body .mh-tpl-thumb::before { animation: none; }
    body .mh-tpl-card { transition: none; }
}

body .mh-tpl-pick {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translate(-50%, 8px);
    opacity: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--shadow);
    transition: opacity .15s, transform .15s;
    z-index: 2;
}

body .mh-tpl-card:hover .mh-tpl-pick,
body .mh-tpl-card:focus-visible .mh-tpl-pick {
    opacity: 1;
    transform: translate(-50%, 0);
}

body .mh-tpl-name {
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fg);
}

body .mh-tpl-empty {
    margin: 24px 0;
    text-align: center;
    color: var(--muted);
}

body .mh-tpl-footer {
    padding: 12px 24px !important;
    border-top: 1px solid var(--line);
}

/* pnotify / bootstrap-notify */
body .ui-pnotify-container,
body .alert.alert-notify,
body .bootstrap-notify {
    border-radius: 12px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    background: var(--card);
    color: var(--fg);
}

/* Görgethető blokkok */
body .scrollable-block,
body .scrollable {
    scrollbar-color: var(--muted3) transparent;
}

/* Hr */
body hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 16px 0;
}

/* Ikonok a régi színekkel – egységes semleges szín */
body .font-icon,
body .fa {
    color: inherit;
}

body .glyphicon-info-sign,
body .fa-info-circle {
    color: var(--muted);
}

/* Ikonos, színes régi gombok a tartalomban (pl. lila statisztika gomb) */
body .btn[style*="background"],
body a.btn[style*="background-color"] {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--on-accent) !important;
}

/* --------------------------------------------------------------------------

/* --------------------------------------------------------------------------
   Reszponzív – < 1056px: az oldalsáv fiókként nyílik (a sablon
   body.menu-left-opened + .mobile-menu-left-overlay mechanizmusával),
   a fejléc mobil felső sávvá válik (menü gomb, márka, elsődleges gomb).
   -------------------------------------------------------------------------- */
@media (max-width: 1056px) {
    body .side-menu,
    body .side-menu.side-menu-compact {
        width: min(300px, 85vw) !important;
        transform: translateX(-100%);
        z-index: 1001;
    }

    body.menu-left-opened .side-menu,
    body.menu-left-opened .side-menu.side-menu-compact {
        transform: none;
        box-shadow: var(--shadow) !important;
    }

    body .mobile-menu-left-overlay {
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, .4);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        display: none;
    }

    body.menu-left-opened .mobile-menu-left-overlay {
        display: block;
    }

    body .side-menu.side-menu-compact .side-menu-list a {
        font-size: 16px;
        padding: 13px 20px !important;
    }

    body .site-header,
    body.sidebar-hidden .site-header {
        margin-left: 0 !important;
        padding: 10px 16px !important;
        gap: 10px;
    }

    body .site-header .site-logo {
        display: inline-flex;
    }

    body .site-header .show-hide-sidebar {
        display: none;
    }

    body .site-header .hamburger {
        display: inline-flex;
    }

    body .mh-page-title {
        order: 10;
        flex: 1 1 100%;
        font-size: 24px;
        margin: 4px 0 0;
        white-space: normal;
    }

    body .mh-head-tools {
        margin-left: auto;
    }

    body .mh-help #initiate_tour,
    body .expiration-icon {
        display: none !important;
    }

    body .mh-help .grayHeaderButton {
        width: 36px;
        padding: 0 !important;
        justify-content: center;
        font-size: 0 !important;
    }

    body .mh-help .grayHeaderButton .glyphicon {
        font-size: 15px;
    }

    body .site-header .user-menu .dropdown-toggle {
        padding-right: 4px !important;
    }

    body .mh-user-name,
    body .site-header .user-menu .dropdown-toggle::after {
        display: none;
    }

    body .mh-head-actions .mh-btn-secondary {
        display: none;
    }

    body .mh-head-actions .mh-btn-primary {
        font-size: 13px;
        padding: 8px 12px;
    }

    body .page-content,
    body.sidebar-hidden .page-content {
        margin-left: 0 !important;
        padding: 16px 16px 24px !important;
    }

    body .page-content-header .tbl-cell-action {
        margin-left: 0;
    }

    body .box-typical-body,
    body .panel-body,
    body .task-card-footer {
        padding: 14px;
    }

    body .files-manager-side {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        border-radius: var(--radius) var(--radius) 0 0;
    }
}

@media (max-width: 544px) {
    body .page-content-header h1,
    body .page-content-header h2 {
        font-size: 20px;
    }

    body #searchbar,
    body .page-content-header .form-control {
        max-width: none;
        width: 100% !important;
    }

    body .mh-kpis {
        grid-template-columns: 1fr;
    }
}


/* --------------------------------------------------------------------------
   Specificitás-javítások a sablon erősebb szabályai ellen
   -------------------------------------------------------------------------- */

/* A lista-fejléc fehér oldalsávjai (:before/:after) */
body .page-content-header::before,
body .page-content-header::after {
    display: none !important;
}

/* Üres flash-üzenet konténer ne rajzoljon csíkot */
body .alert:empty {
    display: none;
}

/* Sorok, rácsok háttere sötét témában is átlátszó */
body #right-col .row,
body .tasks-grid,
body .address-list-row,
body .widget-activity,
body .widget-activity-item,
body .user-card-row,
body .user-card-row .tbl-cell,
body .newsletterFormBox,
body .files-manager-content-in {
    background: transparent;
}

/* A sablon rajzolt jelölőnégyzete: input rejtve, label::before a doboz */
body .checkbox input + label,
body .radio input + label,
body .checkbox-toggle input + label {
    display: inline-block;
    padding-left: 24px;
    font-size: 14px;
    color: var(--fg2);
    line-height: 18px;
}

body .checkbox input + label::before,
body .radio input + label::before {
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
}

body .radio input + label::before {
    border-radius: 50%;
}

body .checkbox input + label:hover::before,
body .radio input + label:hover::before {
    background: var(--accent-tint);
    border-color: var(--accent);
}

body .checkbox input:checked + label::before,
body .radio input:checked + label::before {
    background: var(--accent);
    border-color: var(--accent);
}

body .checkbox input:checked + label::after,
body .radio input:checked + label::after {
    color: #fff;
}

/* Fájlfeltöltő gomb (fine-uploader) */
body .qq-upload-button,
body #imageUploaderButton .qq-upload-button {
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    border-radius: 999px !important;
    color: var(--on-accent) !important;
    font-family: "Barlow", system-ui, sans-serif;
    font-weight: 700;
    padding: 8px 16px;
    width: auto !important;
    box-shadow: none;
}

body .value:empty {
    display: none;
}

/* Kártya-törzsek háttere (a sablon .task-card .task-card-footer szabálya ellen) */
body .task-card .task-card-footer,
body .box-typical .task-card-footer,
body .box-typical .box-typical-body,
body .task-card .task-card-in,
body .panel .panel-body {
    background: transparent !important;
}

/* Körvonalas gombok szövege minden témában olvasható */
body .btn-default,
body .btn-secondary,
body .btn.btn-default,
body .btn-rounded.btn-default,
body .btn-inline.btn-default,
body .btn.btn-default.viButtonDesigned,
body .btn-default .fa,
body .btn-default .glyphicon {
    color: var(--fg) !important;
}

/* Jelölőnégyzet kerete világos témában is látszik */
body .checkbox input + label::before,
body .radio input + label::before {
    border-color: var(--muted3);
}

/* Fájlfeltöltő gomb ne legyen teljes szélességű */
body #imageUploaderButton,
body #imageUploaderButton > div,
body .qq-upload-button,
body .qq-upload-button-selector {
    display: inline-block !important;
    width: auto !important;
    max-width: 100%;
}

/* Mezőértékek színe sötét témában is */
body .form-control,
body .form-control:focus {
    color: var(--fg) !important;
}


@media print {
    body .side-menu,
    body .site-header {
        display: none !important;
    }

    body .page-content {
        padding: 0 !important;
    }
}
/* Infópult: lila/zöld sablon-gombok → accent; a Hírek oszlop egyedül is kitölti a sort */
body .btn.btn-info,
body .btn-inline.btn-info,
body .btn.positive,
body .viButtonDesigned.positive,
body .btn-rounded.positive {
    background: var(--accent) !important;
    background-image: none !important;
    border-color: var(--accent) !important;
    color: var(--on-accent) !important;
}

body .btn.btn-info:hover,
body .btn.positive:hover,
body .viButtonDesigned.positive:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

body .news-dashboard-column:only-child {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Fejléc: a sablon width:100%-a túllógna az oldalsáv mellett; a menügomb-vonalak
   pszeudo-elemei (main.css) széles csíkot húznának; az értesítés link kerete */
body .site-header {
    width: auto !important;
    max-width: none;
}

body .site-header .hamburger span::before,
body .site-header .hamburger span::after,
body .site-header .show-hide-sidebar span::before,
body .site-header .show-hide-sidebar span::after {
    display: none !important;
    content: none !important;
}

body .mh-notice #MsNoticeBoxWidget,
body .mh-notice .popover_button {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
}

/* Kártyák háttere sötét témában is (tasks.min.css .task-card{background:#fff}) */
body .box-typical,
body .task-card,
body .box-typical.task-card,
body .panel,
body .card,
body .files-manager,
body .files-manager-panel,
body .files-manager-side {
    background: var(--card) !important;
    color: var(--fg);
}

/* Figyelmeztető dobozok */
body .alert {
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--bg2) !important;
    color: var(--fg2) !important;
    font-size: 13px;
    line-height: 1.6;
}

body .alert a {
    color: var(--accent-text) !important;
}

body .alert-info {
    background: var(--accent-tint) !important;
    border-color: var(--accent-tint3);
    color: var(--accent-deep) !important;
}

body .alert-info a {
    color: var(--accent-deep) !important;
    text-decoration: underline;
}

body .alert-success {
    background: var(--success-tint) !important;
    border-color: var(--success);
    color: var(--success) !important;
}

body .alert-warning {
    background: var(--warn-tint) !important;
    border-color: var(--warn);
    color: var(--warn) !important;
}

body .alert-danger {
    background: var(--danger-tint) !important;
    border-color: var(--danger);
    color: var(--danger) !important;
}

/* Másodlagos (szürke) gombok → keretes pill */
body .btn.btn-secondary,
body button.btn-secondary {
    background: transparent !important;
    border-color: var(--line-strong) !important;
    color: var(--fg) !important;
}

body .btn.btn-secondary:hover {
    background: var(--hover) !important;
}

/* Lista-fejléc kereső: ikon + mező egy sorban */
body .page-content-header .tbl-cell > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

body .page-content-header .tbl-cell > div .form-control {
    margin: 0 !important;
    width: 320px !important;
    max-width: 100%;
}

/* Mobil fejléc: a menügomb, márka és a jobb oldali gombok egy sorban maradnak */
@media (max-width: 1056px) {
    body .site-header {
        flex-wrap: wrap;
    }

    body .mh-head-tools {
        gap: 4px;
    }

    body .mh-head-actions {
        margin-left: auto;
    }
}

@media (max-width: 480px) {
    body .mh-help .grayHeaderButton {
        display: none !important;
    }
}

/* Hírlevél profilok: SPF beállítási útmutató (a korábbi sablonból jövő alert-info helyett) */
body .mh-spf-guide {
    background: var(--accent-tint2);
    border: 1px solid var(--accent-tint3);
    border-radius: var(--radius);
    padding: 20px;
    color: var(--fg2);
    font-size: 14px;
    line-height: 1.6;
}

body .mh-spf-guide p {
    margin: 0 0 12px;
}

body .mh-spf-guide-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

body .mh-spf-guide-head p {
    margin: 0;
}

body .mh-spf-guide-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--accent);
    color: var(--on-accent);
    display: grid;
    place-items: center;
    font-size: 18px;
}

body .mh-spf-guide-title {
    font-size: 17px;
    line-height: 1.25;
    margin: 0 0 4px;
    color: var(--fg);
}

body .mh-spf-guide .label {
    display: inline-block;
    white-space: nowrap;
}

/* Témaváltó dobozok: a fül-csempék a panel tetejére ülnek, az aktív egybeolvad vele */
body .mh-spf-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

body .mh-spf-tab {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 -1px;
    padding: 12px 14px;
    border: 1px solid var(--accent-tint3);
    border-bottom: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: transparent;
    color: var(--fg2);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

body .mh-spf-tab:hover {
    background: var(--card);
    color: var(--fg);
}

body .mh-spf-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

body .mh-spf-tab.is-active {
    background: var(--card);
    border-color: var(--line);
    color: var(--fg);
    box-shadow: inset 0 3px 0 var(--accent);
}

body .mh-spf-tab-icon {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--accent-tint);
    color: var(--accent-text);
    display: grid;
    place-items: center;
    font-size: 15px;
}

body .mh-spf-tab.is-active .mh-spf-tab-icon {
    background: var(--accent);
    color: var(--on-accent);
}

body .mh-spf-tab-text {
    min-width: 0;
}

body .mh-spf-tab-text strong {
    display: block;
    font-size: 14px;
    line-height: 1.3;
}

body .mh-spf-tab-text small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--muted);
}

body .mh-spf-panel {
    padding: 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

body .mh-spf-panel[hidden] {
    display: none !important;
}

body .mh-spf-guide .mh-spf-panel > p:last-child {
    margin-bottom: 0;
}

/* Állapotok */
body .mh-spf-status-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin: 0 0 16px;
}

body .mh-spf-status {
    padding: 10px 12px;
    background: var(--bg2);
    border: 1px solid var(--line2);
    border-radius: var(--radius-sm);
}

body .mh-spf-guide .mh-spf-status p {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted);
}

body .mh-spf-callout {
    display: flex;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.55;
}

body .mh-spf-callout > .fa {
    flex: none;
    margin-top: 3px;
}

body .mh-spf-callout strong {
    display: block;
    margin-bottom: 2px;
}

body .mh-spf-callout-danger {
    background: var(--danger-tint);
    color: var(--fg2);
}

body .mh-spf-callout-danger > .fa,
body .mh-spf-callout-danger strong {
    color: var(--danger);
}

body .mh-spf-callout-warn {
    background: var(--warn-tint);
    color: var(--warn);
}

body .mh-spf-callout-info {
    background: var(--accent-tint2);
    color: var(--fg2);
}

body .mh-spf-callout-info > .fa {
    color: var(--accent-text);
}

body .mh-spf-subtitle {
    margin: 20px 0 10px;
    font-size: 15px;
    color: var(--fg);
}

/* a) nincs rekord / b) van rekord */
body .mh-spf-options {
    display: grid;
    gap: 10px;
    margin: 0 0 14px;
}

body .mh-spf-option {
    position: relative;
    padding: 14px 14px 14px 50px;
    background: var(--bg2);
    border: 1px solid var(--line2);
    border-radius: var(--radius-sm);
}

body .mh-spf-option-tag {
    position: absolute;
    left: 14px;
    top: 14px;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--accent-tint);
    color: var(--accent-text);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    display: grid;
    place-items: center;
}

body .mh-spf-option strong {
    display: block;
    color: var(--fg);
}

body .mh-spf-guide .mh-spf-option p {
    margin: 2px 0 0;
}

body .mh-spf-guide .mh-spf-option .mh-spf-hint {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--muted);
}

body .mh-spf-record {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 6px 6px 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

body .mh-spf-record code,
body .mh-spf-example {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    overflow-x: auto;
    white-space: nowrap;
}

body .mh-spf-record code {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: transparent;
    color: var(--fg);
    font-size: 13px;
}

body .mh-spf-example {
    display: block;
    margin-top: 6px;
    padding: 8px 12px;
    background: var(--card);
    border: 1px solid var(--line2);
    border-radius: 8px;
    color: var(--fg2);
    font-size: 12.5px;
}

body .mh-spf-example mark {
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--success-tint);
    color: var(--success);
}

body .mh-spf-copy {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--card);
    color: var(--fg);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

body .mh-spf-copy:hover {
    background: var(--hover);
}

body .mh-spf-copy.is-copied {
    border-color: var(--success);
    color: var(--success);
}

body .mh-spf-timeline {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 13px;
}

body .mh-spf-timeline > .fa {
    margin-top: 3px;
    color: var(--accent-text);
}

body .mh-spf-guide .mh-spf-timeline p {
    margin: 0;
}

body .mh-spf-transition {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    white-space: nowrap;
}

body .mh-spf-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line2);
    font-size: 13px;
    color: var(--muted);
}

body .mh-spf-contact > span {
    flex-basis: 100%;
    color: var(--fg2);
}

body .mh-spf-contact a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-text);
    font-weight: 600;
    text-decoration: none;
}

/* SPF ellenőrzés fül: számozott lépések */
body .mh-spf-steps {
    list-style: none;
    counter-reset: mh-spf-step;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

body .mh-spf-steps > li {
    counter-increment: mh-spf-step;
    position: relative;
    min-height: 24px;
    padding-left: 36px;
}

body .mh-spf-steps > li::before {
    content: counter(mh-spf-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent-text);
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

body .mh-spf-steps a {
    font-weight: 600;
}

@media (max-width: 575px) {
    body .mh-spf-guide {
        margin-top: 16px;
        padding: 16px;
    }

    body .mh-spf-tab {
        padding: 10px;
    }

    body .mh-spf-tab-text small {
        display: none;
    }

    body .mh-spf-panel {
        padding: 14px;
    }

    body .mh-spf-option {
        padding-left: 14px;
        padding-top: 46px;
    }
}

/* ==========================================================================
   Sötét téma – kontraszt-javítások
   Minden szabály [data-theme="dark"] alatt van: a világos téma megjelenése
   változatlan. A régi sablon (main.css, virtualcom.css), a modulok inline és
   <style> színei, valamint a külső widgetek világos témára szabott, fix
   színeit írja felül.
   ========================================================================== */

/* Tokenek: a halvány szöveg (placeholder, ikonok) és a kék gombok fehér
   felirata kevés kontrasztot adott */
[data-theme="dark"] {
    --muted2: #7d889b;
    --accent: #2f6be3;
    --accent-hover: #2559c4;
}

/* Piros / sárga gombok hover: a sötét témában világos alapon a fehér felirat
   nem látszott – sötét felirat */
[data-theme="dark"] body .btn-danger:hover,
[data-theme="dark"] body .btn-rounded.btn-danger:hover,
[data-theme="dark"] body .btn.btn-danger:hover,
[data-theme="dark"] body .btn.btn-danger:focus,
[data-theme="dark"] body a.btn.btn-danger:hover,
[data-theme="dark"] body .btn.btn-danger:hover .fa,
[data-theme="dark"] body .btn.btn-danger:hover .glyphicon,
[data-theme="dark"] body .btn-warning:hover,
[data-theme="dark"] body .btn.btn-warning:hover,
[data-theme="dark"] body .btn-warning.viButtonDesigned:hover,
[data-theme="dark"] body .btn-warning:hover .fa,
[data-theme="dark"] body .btn-warning:hover .glyphicon {
    color: var(--bg) !important;
}

/* Táblázat sorvégi műveletgombok: a világos szürke pill helyett sötét */
[data-theme="dark"] body .tabledit-toolbar .btn-group > a {
    background: var(--track);
    border-color: var(--line);
}

[data-theme="dark"] body .tabledit-toolbar .btn-group > a:hover {
    background: var(--muted3);
    border-color: var(--muted3);
}

[data-theme="dark"] body .mh-tpl-thumb {
    background: var(--bg2);
}

/* Szürke segédszöveg-osztályok (main.css #6c7a86 / #919fa9 !important) */
[data-theme="dark"] body .text-muted,
[data-theme="dark"] body .color-blue-grey,
[data-theme="dark"] body .color-blue-grey-lighter {
    color: var(--muted) !important;
}

/* Div-alapú folyamatjelző (vezérlőpult "utolsó hírlevelek") világos sávja */
[data-theme="dark"] body div.progress {
    background-color: var(--track);
}

[data-theme="dark"] body [style*="rgba(0,0,0,0.08)"],
[data-theme="dark"] body [style*="rgba(0, 0, 0, 0.08)"] {
    background-color: var(--track) !important;
}

/* Tooltip: a buborék sötét témában világos (--fg), a nyíl is az legyen
   (Bootstrap 4 alpha.6 osztályok) */
[data-theme="dark"] body .tooltip.tooltip-top .tooltip-inner::before,
[data-theme="dark"] body .tooltip.bs-tether-element-attached-bottom .tooltip-inner::before {
    border-top-color: var(--fg);
}

[data-theme="dark"] body .tooltip.tooltip-right .tooltip-inner::before,
[data-theme="dark"] body .tooltip.bs-tether-element-attached-left .tooltip-inner::before {
    border-right-color: var(--fg);
}

[data-theme="dark"] body .tooltip.tooltip-bottom .tooltip-inner::before,
[data-theme="dark"] body .tooltip.bs-tether-element-attached-top .tooltip-inner::before {
    border-bottom-color: var(--fg);
}

[data-theme="dark"] body .tooltip.tooltip-left .tooltip-inner::before,
[data-theme="dark"] body .tooltip.bs-tether-element-attached-right .tooltip-inner::before {
    border-left-color: var(--fg);
}

/* Popover (súgó-túra, üzenetdoboz) nyilai: a kártya színe és kerete */
[data-theme="dark"] body .popover.popover-top::before,
[data-theme="dark"] body .popover.bs-tether-element-attached-bottom::before {
    border-top-color: var(--line);
}

[data-theme="dark"] body .popover.popover-top::after,
[data-theme="dark"] body .popover.bs-tether-element-attached-bottom::after {
    border-top-color: var(--card);
}

[data-theme="dark"] body .popover.popover-right::before,
[data-theme="dark"] body .popover.bs-tether-element-attached-left::before {
    border-right-color: var(--line);
}

[data-theme="dark"] body .popover.popover-right::after,
[data-theme="dark"] body .popover.bs-tether-element-attached-left::after {
    border-right-color: var(--card);
}

[data-theme="dark"] body .popover.popover-bottom::before,
[data-theme="dark"] body .popover.bs-tether-element-attached-top::before {
    border-bottom-color: var(--line);
}

[data-theme="dark"] body .popover.popover-bottom::after,
[data-theme="dark"] body .popover.bs-tether-element-attached-top::after {
    border-bottom-color: var(--card);
}

[data-theme="dark"] body .popover.popover-left::before,
[data-theme="dark"] body .popover.bs-tether-element-attached-right::before {
    border-left-color: var(--line);
}

[data-theme="dark"] body .popover.popover-left::after,
[data-theme="dark"] body .popover.bs-tether-element-attached-right::after {
    border-left-color: var(--card);
}

/* SweetAlert "siker" ikon: a kör takaró elemei fehérek voltak */
[data-theme="dark"] body .sweet-alert .sa-icon.sa-success::before,
[data-theme="dark"] body .sweet-alert .sa-icon.sa-success::after,
[data-theme="dark"] body .sweet-alert .sa-icon.sa-success .sa-fix {
    background: var(--card) !important;
}

/* --- Modulok inline / <style> színei ------------------------------------- */

/* SMS rendelés varázsló (ServiceOrder*/ServiceConfirmOrder*): fehér lépésdobozok
   és #eceff4 számkörök */
[data-theme="dark"] body .box[style*="background-color:white"] {
    background-color: var(--card) !important;
    border-color: var(--line) !important;
}

[data-theme="dark"] body [style*="#eceff4"] {
    background-color: var(--accent-tint) !important;
}

/* Fekete / szürke inline feliratok (kiküldési % címke, vezérlőpult %) */
[data-theme="dark"] body [style*="color:black; margin-left:5px"],
[data-theme="dark"] body [style="color:gray"] {
    color: var(--fg2) !important;
}

[data-theme="dark"] body [style*="color: #6c7a86"] {
    color: var(--muted) !important;
}

/* Limit-doboz "Lejárt" sötétpiros ikon és szöveg */
[data-theme="dark"] body [style*="color: #bf2222"] {
    color: var(--danger) !important;
}

/* Email cím kereső (adminNewsletterManageEmails): a lap globális th / tr
   szabályai (#ddd fejléc, fehér páros sorok) */
[data-theme="dark"] body .mh-manage-emails th {
    background-color: var(--bg2);
    border-color: var(--line);
    color: var(--fg);
}

[data-theme="dark"] body .mh-manage-emails td {
    border-color: var(--line);
}

[data-theme="dark"] body .mh-manage-emails tr:nth-child(even) {
    background-color: transparent;
}

/* Felugró feliratkozó űrlap előnézete (GeneratePopUpForm): a valódi, fehér
   megjelenést mutatja, ezért benne a szöveg sötét marad */
[data-theme="dark"] body .mh-modal-content {
    color: #0f1a2e;
}

[data-theme="dark"] body .mh-modal-content :is(p, span, label, small, h1, h2, h3, h4, h5, h6, .form-control-label) {
    color: inherit;
}

/* Belső üzenet címzettválasztó (sendMessage): világos kártyák, sárga
   csoportdoboz, fekete bezáró ikon; a kijelölést a JS inline állítja */
[data-theme="dark"] body .manage-leader-holder {
    border-color: var(--line);
}

[data-theme="dark"] body .leader-person-name-holder,
[data-theme="dark"] body .leader-checkbox-holder {
    color: var(--muted);
}

[data-theme="dark"] body .leader-card {
    background: var(--bg2) !important;
    border-color: var(--line) !important;
}

[data-theme="dark"] body .leader-in-box-row .leader-card {
    background: var(--hover) !important;
}

[data-theme="dark"] body .leader-card[style*="204, 239, 255"],
[data-theme="dark"] body .leader-card[style*="#ccefff"] {
    background: var(--accent-tint) !important;
    border-color: var(--accent) !important;
}

[data-theme="dark"] body .new-leader-group-box {
    background: var(--warn-tint);
    border-color: var(--line);
}

[data-theme="dark"] body .new-leader-group-box:hover {
    background: var(--success-tint);
}

[data-theme="dark"] body .new-leader-group-box .close,
[data-theme="dark"] body .new-leader-group-box:hover .close {
    color: var(--fg) !important;
}

/* Google Charts (hírlevél / SMS archívum statisztika): fehér vászon, sötét
   feliratok és rácsvonalak helyett a kártya színei */
[data-theme="dark"] body [id^="chart_div"] svg rect[fill="#ffffff"] {
    fill: transparent;
}

[data-theme="dark"] body [id^="chart_div"] svg path[fill="#ffffff"] {
    fill: var(--card);
}

[data-theme="dark"] body [id^="chart_div"] svg text[fill="#000000"],
[data-theme="dark"] body [id^="chart_div"] svg text[fill="#222222"],
[data-theme="dark"] body [id^="chart_div"] svg text[fill="#444444"],
[data-theme="dark"] body [id^="chart_div"] svg text[fill="#757575"] {
    fill: var(--fg2);
}

[data-theme="dark"] body [id^="chart_div"] svg rect[fill="#cccccc"],
[data-theme="dark"] body [id^="chart_div"] svg rect[fill="#ebebeb"] {
    fill: var(--line);
}

[data-theme="dark"] body [id^="chart_div"] svg rect[fill="#333333"] {
    fill: var(--line-strong);
}

/* --- Régi sablon (main.css, virtualcom.css, bootstrap, tasks/files) ------ */

/* Táblázatok: a virtualcom.css fehér tbody/thead-je és #f6f8fa háttere – a
   saját háttérszínt megadó (pl. levél-tartalom) táblák kivételével */
[data-theme="dark"] body table:not([bgcolor]):not([style*="background"]),
[data-theme="dark"] body table:not([bgcolor]):not([style*="background"]) > tbody,
[data-theme="dark"] body table:not([bgcolor]):not([style*="background"]) > thead,
[data-theme="dark"] body .table .table,
[data-theme="dark"] body .bootstrap-table .table,
[data-theme="dark"] body .fixed-table-body .table {
    background-color: transparent;
}

[data-theme="dark"] body .bootstrap-table .table thead th,
[data-theme="dark"] body .fixed-table-body .table thead th {
    background-color: var(--bg2);
    border-color: var(--line);
}

[data-theme="dark"] body .bootstrap-table .table td {
    border-color: var(--line);
    border-top-color: var(--line) !important;
}

[data-theme="dark"] body .table-hover tbody tr:hover,
[data-theme="dark"] body .table-striped tbody tr:nth-of-type(even),
[data-theme="dark"] body .tbl-typical tr:nth-child(even) td {
    background-color: transparent;
}

[data-theme="dark"] body .tbl-typical th {
    background-color: var(--bg2);
    border-color: var(--line);
    color: var(--muted);
}

[data-theme="dark"] body .tbl-typical th > div::before {
    background: var(--line);
}

[data-theme="dark"] body .table-active,
[data-theme="dark"] body .table-active > td,
[data-theme="dark"] body .table-active > th,
[data-theme="dark"] body .table-hover .table-active:hover,
[data-theme="dark"] body .table-hover .table-active:hover > td,
[data-theme="dark"] body .table-hover .table-active:hover > th {
    background-color: var(--hover);
}

[data-theme="dark"] body .table-success,
[data-theme="dark"] body .table-success > td,
[data-theme="dark"] body .table-success > th,
[data-theme="dark"] body .table-hover .table-success:hover,
[data-theme="dark"] body .table-hover .table-success:hover > td,
[data-theme="dark"] body .table-hover .table-success:hover > th {
    background-color: var(--success-tint);
}

[data-theme="dark"] body .table-warning,
[data-theme="dark"] body .table-warning > td,
[data-theme="dark"] body .table-warning > th,
[data-theme="dark"] body .table-hover .table-warning:hover,
[data-theme="dark"] body .table-hover .table-warning:hover > td,
[data-theme="dark"] body .table-hover .table-warning:hover > th {
    background-color: var(--warn-tint);
}

[data-theme="dark"] body .table-danger,
[data-theme="dark"] body .table-danger > td,
[data-theme="dark"] body .table-danger > th,
[data-theme="dark"] body .table-hover .table-danger:hover,
[data-theme="dark"] body .table-hover .table-danger:hover > td,
[data-theme="dark"] body .table-hover .table-danger:hover > th {
    background-color: var(--danger-tint);
}

[data-theme="dark"] body .table-info,
[data-theme="dark"] body .table-info > td,
[data-theme="dark"] body .table-info > th,
[data-theme="dark"] body .table-hover .table-info:hover,
[data-theme="dark"] body .table-hover .table-info:hover > td,
[data-theme="dark"] body .table-hover .table-info:hover > th {
    background-color: var(--accent-tint);
}

/* SMS egyenleg-táblázat */
[data-theme="dark"] body .smsBalanceTable th,
[data-theme="dark"] body .smsBalanceTable td {
    border-color: var(--line);
}

[data-theme="dark"] body .smsBalanceTable th,
[data-theme="dark"] body .smsBalanceTable thead th {
    background-color: var(--bg2);
    color: var(--fg);
}

[data-theme="dark"] body .smsBalanceTable tr,
[data-theme="dark"] body .smsBalanceTable tr:nth-child(odd),
[data-theme="dark"] body .smsBalanceTable tbody tr:nth-child(odd) {
    background-color: transparent;
}

[data-theme="dark"] body .smsBalanceTable .transactionDetails {
    color: var(--accent-text);
}

[data-theme="dark"] body .smsBalanceTable .transactionDetails:hover {
    color: var(--accent-deep);
}

/* Címlista-import hibás / figyelmeztető email sorai (lazac / khaki háttér) */
[data-theme="dark"] body .emailError {
    background-color: var(--danger-tint) !important;
    color: var(--danger);
}

[data-theme="dark"] body .emailWarning {
    background-color: var(--warn-tint) !important;
    color: var(--warn);
}

/* Natív mezők: main.css "button, input, select, textarea { color:#343434 }" –
   sötét natív vezérlőn sötét szöveg. A CKEditor forráskód-nézete kivétel. */
[data-theme="dark"] body .page-content input,
[data-theme="dark"] body .page-content select,
[data-theme="dark"] body .page-content textarea:not(.cke_source),
[data-theme="dark"] body .modal input,
[data-theme="dark"] body .modal select,
[data-theme="dark"] body .modal textarea,
[data-theme="dark"] body .task-card-create input[type=text] {
    color: var(--fg);
}

/* ...a felugró űrlap előnézetének mezője viszont fehér alapú marad */
[data-theme="dark"] body .mh-modal-content .mh-form-input-field {
    color: #555;
}

/* Lapméret-választó a táblázatok alatt */
[data-theme="dark"] body .ViPaginationWidget.limitSelect select {
    color: var(--fg);
    background-color: var(--card);
    border-color: var(--line);
}

[data-theme="dark"] body .form-control.form-control-error,
[data-theme="dark"] body .error .form-control-wrapper .form-control {
    background-color: var(--danger-tint);
}

[data-theme="dark"] body .error.form-group-checkbox .checkbox label {
    color: var(--danger);
}

[data-theme="dark"] body .form-control-blue-fill {
    background-color: var(--accent-tint);
}

[data-theme="dark"] body .form-control-green-fill {
    background-color: var(--success-tint);
}

[data-theme="dark"] body .form-control-red-fill {
    background-color: var(--danger-tint);
}

[data-theme="dark"] body .form-control-purple-fill {
    background-color: var(--accent-tint2);
}

[data-theme="dark"] body .form-control-orange-fill {
    background-color: var(--warn-tint);
}

/* Dátumválasztó */
[data-theme="dark"] body .input-group.date .input-group-addon {
    background-color: var(--bg2);
    border-color: var(--line);
    color: var(--muted);
}

[data-theme="dark"] body .bootstrap-datetimepicker-widget td span:hover,
[data-theme="dark"] body .bootstrap-datetimepicker-widget .accordion-toggle span {
    background-color: var(--hover);
}

/* Checkbox / rádió / kapcsoló skinek */
[data-theme="dark"] body .checkbox input[type=radio]:checked + label::after,
[data-theme="dark"] body .radio input[type=radio]:checked + label::after {
    background: var(--fg);
}

[data-theme="dark"] body .checkbox input:disabled + label::before,
[data-theme="dark"] body .radio input:disabled + label::before {
    background-color: var(--track);
    border-color: var(--line);
}

[data-theme="dark"] body .checkbox-toggle input + label::before {
    background: var(--muted3);
}

[data-theme="dark"] body .checkbox-toggle input + label::after,
[data-theme="dark"] body .checkbox-toggle input:disabled + label::after {
    background: var(--fg2);
    border-color: var(--muted3);
}

[data-theme="dark"] body .checkbox-toggle input + label:hover::after,
[data-theme="dark"] body .checkbox-toggle input:checked + label::after {
    background: var(--fg);
    border-color: var(--accent);
}

[data-theme="dark"] body .checkbox-toggle input:disabled + label::before {
    background-color: var(--track);
}

[data-theme="dark"] body .checkbox-detailed input + label {
    border-color: var(--line);
}

[data-theme="dark"] body .checkbox-detailed input:checked + label {
    background-color: var(--accent-tint);
    border-color: var(--accent);
}

/* Szürke / legördülő / letiltott gombok (main.css #dbe4ea alap) – a színes
   (primary, success…) legördülő gombok kivételével */
[data-theme="dark"] body .page-content .btn.btn-grey,
[data-theme="dark"] body .page-content .btn.dropdown-toggle:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info),
[data-theme="dark"] body .modal .btn.btn-grey,
[data-theme="dark"] body .modal .btn.dropdown-toggle:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) {
    background-color: var(--track);
    border-color: var(--line);
    color: var(--fg2);
}

[data-theme="dark"] body .btn.btn-grey.btn-default-outline,
[data-theme="dark"] body .btn.dropdown-toggle.btn-default-outline {
    background-color: transparent;
    border-color: var(--line);
    color: var(--muted);
}

[data-theme="dark"] body .btn.btn-grey.btn-default-outline:hover,
[data-theme="dark"] body .btn.dropdown-toggle.btn-default-outline:hover {
    background-color: var(--hover);
    color: var(--fg) !important;
}

[data-theme="dark"] body .btn.disabled,
[data-theme="dark"] body .btn:disabled {
    background-color: var(--track);
    border-color: var(--track);
    color: var(--muted);
}

[data-theme="dark"] body .btn.btn-select {
    background: var(--card);
    border-color: var(--line);
    color: var(--fg);
}

[data-theme="dark"] body .btn.btn-select:hover {
    background-color: var(--hover);
}

/* bootstrap-select és a bootstrap-table lapméret gombja (!important a
   main.css-ben) */
[data-theme="dark"] body .btn-group.bootstrap-select > .btn.dropdown-toggle,
[data-theme="dark"] body .bootstrap-table .fixed-table-pagination .btn.dropdown-toggle {
    background: var(--card) !important;
    color: var(--fg) !important;
    border-color: var(--line) !important;
}

[data-theme="dark"] body .btn-group.bootstrap-select > .btn.dropdown-toggle .bs-caret {
    background: var(--bg2);
}

[data-theme="dark"] body .btn-group.bootstrap-select .dropdown-menu a {
    color: var(--fg2);
}

[data-theme="dark"] body .btn-group.bootstrap-select .dropdown-menu .dropdown-header {
    color: var(--muted);
}

[data-theme="dark"] body .bootstrap-table .fixed-table-pagination ul.pagination a {
    color: var(--fg2);
}

[data-theme="dark"] body .bootstrap-table .fixed-table-pagination ul.pagination li.active a {
    border-color: var(--line);
    color: var(--fg);
}

/* select2 */
[data-theme="dark"] body .select2-dropdown {
    background-color: var(--card);
    border-color: var(--line);
    color: var(--fg);
}

[data-theme="dark"] body .select2-container--arrow .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] body .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] body .select2-container--white .select2-selection--single .select2-selection__rendered {
    background: var(--card);
    border-color: var(--line);
    color: var(--fg);
}

[data-theme="dark"] body .select2-container--arrow .select2-selection--single .select2-selection__arrow,
[data-theme="dark"] body .select2-container--default .select2-selection--single .select2-selection__arrow,
[data-theme="dark"] body .select2-container--white .select2-selection--single .select2-selection__arrow {
    background: var(--bg2);
}

[data-theme="dark"] body .select2-container--arrow.select2-container--open .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] body .select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] body .select2-container--white.select2-container--open .select2-selection--single .select2-selection__rendered {
    border-bottom-color: var(--card);
}

[data-theme="dark"] body .select2-container--arrow.select2-container--disabled .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] body .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] body .select2-container--white.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    background-color: var(--track);
    color: var(--muted);
}

[data-theme="dark"] body .dropdown-more-sub-in {
    background: var(--card);
    border-color: var(--line);
}

/* Lapozó: letiltott elem fehér háttere; az aktív elem ciánja (#00a8ff) a
   fehér számmal kevés kontrasztot adott */
[data-theme="dark"] body .page-item.disabled .page-link,
[data-theme="dark"] body .pager .disabled > a,
[data-theme="dark"] body .pager .disabled > span {
    background-color: transparent;
    border-color: var(--line);
    color: var(--muted2);
}

[data-theme="dark"] body .page-item.active .page-link {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--on-accent);
}

/* Bezáró "×" gombok (bootstrap: fekete, fehér árnyékkal) */
[data-theme="dark"] body .close,
[data-theme="dark"] body .close:hover,
[data-theme="dark"] body .close:focus {
    color: var(--fg);
    text-shadow: none;
}

/* Csomagváltó modál (virtualcom.css #change-package) */
[data-theme="dark"] body #change-package .modal-content {
    background-color: var(--card);
    border-color: var(--line);
    color: var(--fg);
}

[data-theme="dark"] body #change-package .close {
    color: var(--muted);
}

[data-theme="dark"] body #change-package .close:hover,
[data-theme="dark"] body #change-package .close:focus {
    color: var(--fg);
}

/* SweetAlert szövege ("lead text-muted", a bootstrap !important szürkéje) */
[data-theme="dark"] body .sweet-alert .lead,
[data-theme="dark"] body .sweet-alert .text-muted {
    color: var(--fg2) !important;
}

/* A sablon saját tooltip- és popover-nyilai (.tooltip-arrow / .popover-arrow) */
[data-theme="dark"] body .tooltip.bs-tether-element-attached-top .tooltip-arrow,
[data-theme="dark"] body .tooltip.tooltip-bottom .tooltip-arrow {
    border-bottom-color: var(--fg);
}

[data-theme="dark"] body .tooltip.bs-tether-element-attached-bottom .tooltip-arrow,
[data-theme="dark"] body .tooltip.tooltip-top .tooltip-arrow {
    border-top-color: var(--fg);
}

[data-theme="dark"] body .popover.bs-tether-element-attached-bottom .popover-arrow,
[data-theme="dark"] body .popover.popover-top .popover-arrow {
    border-top-color: var(--line);
}

[data-theme="dark"] body .popover.bs-tether-element-attached-top .popover-arrow,
[data-theme="dark"] body .popover.popover-bottom .popover-arrow {
    border-bottom-color: var(--line);
}

[data-theme="dark"] body .popover.bs-tether-element-attached-top .popover-arrow::after,
[data-theme="dark"] body .popover.popover-bottom .popover-arrow::after {
    border-bottom-color: var(--card);
}

[data-theme="dark"] body .popover.bs-tether-element-attached-left .popover-arrow,
[data-theme="dark"] body .popover.popover-right .popover-arrow {
    border-right-color: var(--line);
}

[data-theme="dark"] body .popover.bs-tether-element-attached-right .popover-arrow,
[data-theme="dark"] body .popover.popover-left .popover-arrow {
    border-left-color: var(--line);
}

[data-theme="dark"] body .popover.bs-tether-element-attached-top .popover-title::before,
[data-theme="dark"] body .popover.popover-bottom .popover-title::before {
    border-bottom-color: var(--card);
}

/* Címkék a fülekben és a feladatkártyákon */
[data-theme="dark"] body .tabs-section-nav .nav-link:not(.active) .label {
    background-color: var(--track);
    color: var(--fg2);
}

[data-theme="dark"] body .task-card .task-card-tags .label {
    color: var(--fg2);
}

/* Fülek (.tabs-section): világos fülsor, fehér aktív fül, #343434 szöveg */
[data-theme="dark"] body .tabs-section > .tab-content:not(.no-styled) {
    background: var(--card);
    border-color: var(--line);
}

[data-theme="dark"] body .tabs-section-nav {
    border-top-color: var(--line);
}

[data-theme="dark"] body .tabs-section-nav .nav-item {
    background: var(--bg2);
}

[data-theme="dark"] body .tabs-section-nav .nav-link {
    color: var(--muted);
    border-color: var(--line);
    border-left-color: transparent;
    border-right-color: transparent;
}

[data-theme="dark"] body .tabs-section-nav .nav-link:hover {
    color: var(--fg);
}

[data-theme="dark"] body .tabs-section-nav .nav-item:first-child .nav-link {
    border-left-color: var(--line);
}

[data-theme="dark"] body .tabs-section-nav .nav-item:last-child .nav-link {
    border-right-color: var(--line);
}

[data-theme="dark"] body .tabs-section-nav .nav-link.active {
    background: var(--card);
    color: var(--fg);
    border-left-color: var(--line);
    border-right-color: var(--line);
    border-bottom-color: var(--card);
}

[data-theme="dark"] body .tabs-section .nav .nav-item.active a {
    color: var(--fg);
    border-bottom-color: var(--accent);
}

[data-theme="dark"] body .tabs-section-nav.tabs-section-nav-left .nav,
[data-theme="dark"] body .tabs-section-nav.tabs-section-nav-inline .nav {
    background-color: var(--bg2);
    border-color: var(--line);
}

[data-theme="dark"] body .tabs-section-nav.tabs-section-nav-inline .nav-link {
    border-bottom-color: var(--line);
}

[data-theme="dark"] body .tabs-section-nav.tabs-section-nav-inline .nav-link.active {
    border-bottom-color: var(--accent);
    color: var(--fg);
}

[data-theme="dark"] body .tabs-section-nav.tabs-section-nav-data .number,
[data-theme="dark"] body .tabs-section-nav.tabs-section-nav-data .nav-link.active .title,
[data-theme="dark"] body .tabs-section-simple .nav-link.active {
    color: var(--fg);
}

[data-theme="dark"] body .tabs-section-nav.tabs-section-nav-data .title,
[data-theme="dark"] body .tabs-section-simple .nav-link {
    color: var(--muted);
}

/* Szöveg-segédosztályok, kód */
[data-theme="dark"] body .error-list {
    color: var(--muted);
}

[data-theme="dark"] body .color-black-blue {
    color: var(--fg) !important;
}

[data-theme="dark"] body pre,
[data-theme="dark"] body code {
    color: var(--fg2);
    background-color: var(--bg2);
}

[data-theme="dark"] body pre,
[data-theme="dark"] body pre.code {
    border-color: var(--line);
}

[data-theme="dark"] body .mh-spf-record code {
    background-color: transparent;
    color: var(--fg);
}

[data-theme="dark"] body code.mh-spf-example {
    background-color: var(--card);
}

/* Kártyák (.card) fej- és láblécei */
[data-theme="dark"] body .card-header,
[data-theme="dark"] body .card-footer,
[data-theme="dark"] body .card-default .card-header,
[data-theme="dark"] body .card-inversed .card-block {
    background-color: var(--bg2);
    border-color: var(--line);
}

[data-theme="dark"] body .card-blue .card-header {
    background-color: var(--accent-tint);
    border-color: var(--line);
}

[data-theme="dark"] body .card-green .card-header {
    background-color: var(--success-tint);
    border-color: var(--line);
}

[data-theme="dark"] body .card-purple .card-header {
    background-color: var(--accent-tint2);
    border-color: var(--line);
}

[data-theme="dark"] body .card-red .card-header {
    background-color: var(--danger-tint);
    border-color: var(--line);
}

[data-theme="dark"] body .card-orange .card-header {
    background-color: var(--warn-tint);
    border-color: var(--line);
}

/* .box-typical láb, szekció- és fejléc-elválasztók (#d8e2e7) */
[data-theme="dark"] body .box-typical .box-typical-footer {
    background: var(--bg2);
    border-top-color: var(--line);
}

[data-theme="dark"] body .box-typical .box-typical-section,
[data-theme="dark"] body .box-typical-header-bordered,
[data-theme="dark"] body .box-typical-header-sm.bordered,
[data-theme="dark"] body .box-typical-max-280,
[data-theme="dark"] body .box-typical-dashboard .box-typical-header,
[data-theme="dark"] body .box-panel .box-typical-header,
[data-theme="dark"] body .tbl-cell-action-bordered {
    border-color: var(--line);
}

/* Folyamatjelzők sávja */
[data-theme="dark"] body .progress,
[data-theme="dark"] body .progress-compact-style .progress {
    background-color: var(--track);
}

[data-theme="dark"] body .progress[value]::-webkit-progress-bar {
    background-color: var(--track);
}

/* Fájlkezelő, csatolmányok */
[data-theme="dark"] body .files-manager-header,
[data-theme="dark"] body .files-manager-aside-section,
[data-theme="dark"] body .files-manager-content-in,
[data-theme="dark"] body .proj-page-section {
    border-color: var(--line);
}

[data-theme="dark"] body .fm-file .fm-file-size {
    color: var(--muted);
}

[data-theme="dark"] body .fm-file.selected,
[data-theme="dark"] body .fm-file:hover {
    background-color: var(--hover);
}

[data-theme="dark"] body .files-manager-aside,
[data-theme="dark"] body .proj-page-attach-holder.selected,
[data-theme="dark"] body .proj-page-attach-holder:hover {
    color: var(--fg);
}

/* Feladatkártyák (tasks.min.css) */
[data-theme="dark"] body .task-card .task-card-title a {
    color: var(--fg);
}

[data-theme="dark"] body .task-card-title-label {
    color: var(--muted);
}

/* Vezérlőpult, üres állapot, rendezhető lista */
[data-theme="dark"] body .user-card-row .tbl-cell.tbl-cell-date {
    color: var(--muted);
}

[data-theme="dark"] body .add-customers-screen .add-customers-screen-user {
    border-color: var(--line-strong);
    color: var(--muted);
}

[data-theme="dark"] body .dd-empty,
[data-theme="dark"] body .dd-placeholder {
    background: var(--accent-tint2);
}