/* ==========================================================
   WARM NEUTRAL ERGONOMIC — osTicket 1.18.4 STAFF & ADMIN
   LOW-CONTRAST / MAXIMUM EYE-COMFORT / WCAG COMPLIANT
   ========================================================== */


/* ==========================================================
   01 — VARIABLES (SZEMKÍMÉLŐ, LÁGY SZÍNPALETTA)
   ========================================================== */

:root {
    /* Nyugtató, nem rikító sötétszürke kiemelő és gomb színek */
    --mt-primary: #334155;
    --mt-primary-hover: #1e293b;
    --mt-primary-dark: #0f172a;

    /* Szelíd, világos fejléc (nincs éles kontraszt-különbség) */
    --mt-header-1: #e2e8f0;
    --mt-header-2: #cbd5e1;

    /* Meleg, szemkímélő háttér (kiszűri a vakító kék fényt) */
    --mt-bg: #f1f5f9;
    --mt-surface: #ffffff;
    --mt-surface-soft: #f8fafc;

    /* Puha grafit szövegek a vakító fekete helyett */
    --mt-text: #1e293b;
    --mt-text-soft: #475569;
    --mt-text-muted: #64748b;

    /* Szegélyek és elválasztók */
    --mt-border: #cbd5e1;
    --mt-border-light: #e2e8f0;
    --mt-border-dark: #94a3b8;

    /* Kijelölések & Hover állapotok (Lágy zsálya/szürke) */
    --mt-hover: #e2e8f0;
    --mt-active: #cbd5e1;

    /* Állapotjelzők */
    --mt-danger: #991b1b;
    --mt-warning: #92400e;

    /* Dimenziók */
    --mt-radius: 6px;
    --mt-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

    --mt-page-width: 95%;
}


/* ==========================================================
   02 — GLOBAL RESET & BASE
   ========================================================== */

html {
    margin: 0;
    padding: 0;
    background: var(--mt-bg);
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    background: var(--mt-bg);
    color: var(--mt-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ==========================================================
   03 — MEDIA
   ========================================================== */

img, iframe, embed, object, video {
    max-width: 100%;
}

img {
    height: auto;
}


/* ==========================================================
   04 — LINKS
   ========================================================== */

a {
    color: var(--mt-primary-hover);
    text-decoration: none;
    font-weight: 600;
    transition: color .15s ease, background-color .15s ease;
}

a:hover {
    color: #000000;
    text-decoration: underline;
}


/* ==========================================================
   05 — HEADER (VILÁGOS, SZEMKÍMÉLŐ KIALAKÍTÁS)
   ========================================================== */

#header {
    position: relative;
    z-index: 10000;
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    background: linear-gradient(180deg, var(--mt-header-1) 0%, var(--mt-header-2) 100%) !important;
    border-bottom: 1px solid var(--mt-border-dark) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: visible !important;
}

#header a {
    color: var(--mt-text) !important;
    text-decoration: none !important;
    font-weight: 500;
}

#header a:hover {
    color: var(--mt-primary-dark) !important;
}


/* ==========================================================
   06 — HEADER LOGO
   ========================================================== */

#header img {
    display: inline-block;
    max-width: 100%;
    max-height: 48px;
    width: auto;
    height: auto;
    vertical-align: middle;
}

#header .logo, #header #logo, #header .pull-left {
    vertical-align: middle;
}

#header .pull-left img,
#header .logo img,
#header #logo img {
    position: relative;
    top: 0;
    max-height: 48px;
    vertical-align: middle;
}


/* ==========================================================
   07 — HEADER RIGHT
   ========================================================== */

#header .pull-right {
    max-width: 100%;
    vertical-align: middle;
    box-sizing: border-box;
}


/* ==========================================================
   08 — MAIN NAV
   ========================================================== */

#nav {
    position: relative;
    z-index: 9000;
    display: block;
    width: 100%;
    min-height: 40px;
    clear: both;
    background: #ffffff !important;
    border-bottom: 2px solid var(--mt-border) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    overflow: visible !important;
}

#nav ul, #nav > ul {
    position: relative;
    z-index: 9001;
    max-width: 100%;
    margin-top: 0;
}

#nav li {
    position: relative;
}

#nav a {
    color: var(--mt-text-soft) !important;
    font-weight: 500;
}

#nav li.active {
    background: var(--mt-hover);
    border-bottom: 3px solid var(--mt-primary);
}

#nav li.active > a {
    color: var(--mt-primary-dark) !important;
    font-weight: 600;
}

#nav li.inactive:hover {
    background: #f8fafc;
}

#nav li.inactive:hover > a {
    color: var(--mt-primary-dark) !important;
}


/* ==========================================================
   09 — DROPDOWNS
   ========================================================== */

#nav li, #nav ul, #sub_nav li, #sub_nav ul {
    overflow: visible !important;
}

#nav li > ul,
#sub_nav li > ul,
#nav .dropdown-menu,
#sub_nav .dropdown-menu {
    position: absolute;
    z-index: 99999 !important;
    min-width: 190px;
    max-width: calc(100vw - 20px);
    background: #ffffff !important;
    color: var(--mt-text);
    border: 1px solid var(--mt-border) !important;
    border-radius: var(--mt-radius);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    overflow: visible !important;
}

#nav li > ul a,
#sub_nav li > ul a,
#nav .dropdown-menu a,
#sub_nav .dropdown-menu a {
    display: block;
    color: var(--mt-text) !important;
    background: transparent !important;
    white-space: nowrap;
    padding: 8px 16px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

#nav li > ul a:hover,
#sub_nav li > ul a:hover,
#nav .dropdown-menu a:hover,
#sub_nav .dropdown-menu a:hover {
    color: var(--mt-primary-dark) !important;
    background: var(--mt-hover) !important;
}


/* ==========================================================
   10 — SUB NAV
   ========================================================== */

#sub_nav {
    position: relative;
    z-index: 8000;
    display: block;
    width: 100%;
    clear: both;
    min-height: 0;
    background: #ffffff !important;
    border-bottom: 1px solid var(--mt-border) !important;
    overflow: visible !important;
}

#sub_nav a {
    color: var(--mt-text-soft) !important;
    text-decoration: none !important;
}

#sub_nav a:hover {
    color: var(--mt-primary-dark) !important;
    background: var(--mt-hover);
}


/* ==========================================================
   11 — PAGE CONTAINER
   ========================================================== */

#container {
    position: relative;
    width: calc(100% - 14px);
    max-width: none;
    min-width: 0;
    margin-left: 7px;
    margin-right: 7px;
    overflow: visible;
}


/* ==========================================================
   12 — CONTENT
   ========================================================== */

#content, #pjax-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow: visible;
}


/* ==========================================================
   13 — BREADCRUMBS
   ========================================================== */

#breadcrumbs {
    position: relative;
    z-index: 100;
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
    background: var(--mt-surface);
    border: 1px solid var(--mt-border);
    border-radius: var(--mt-radius);
    box-shadow: var(--mt-shadow);
}


/* ==========================================================
   14 — GENERAL PANELS & CONTAINERS
   ========================================================== */

.panel, .box, .section, .form-box, .dialog, #popup {
    max-width: 100%;
    background: var(--mt-surface);
    border: 1px solid var(--mt-border);
    border-radius: var(--mt-radius);
    box-shadow: var(--mt-shadow);
}


/* ==========================================================
   15 — TYPOGRAPHY
   ========================================================== */

h1, h2, h3, h4, h5, h6 {
    color: var(--mt-text);
    font-weight: 600;
}


/* ==========================================================
   16 — FORM ELEMENTS & DROPDOWNS
   ========================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea {
    box-sizing: border-box !important;
    width: auto;
    max-width: 100%;
    height: auto !important;
    background: #ffffff;
    color: var(--mt-text);
    border: 1px solid var(--mt-border-dark);
    border-radius: var(--mt-radius);
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}

select {
    box-sizing: border-box !important;
    width: auto;
    max-width: 100%;
    height: auto !important;
    min-height: 38px !important;
    background: #ffffff;
    color: var(--mt-text);
    border: 1px solid var(--mt-border-dark);
    border-radius: var(--mt-radius);
    padding: 8px 32px 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    vertical-align: middle;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--mt-primary);
    box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.15);
}


/* ==========================================================
   17 — BUTTON BASE & PRIMARY/SECONDARY
   ========================================================== */

button, .button, input[type="submit"], input[type="button"], input[type="reset"] {
    box-sizing: border-box !important;
    max-width: 100%;
    height: auto !important;
    min-height: 38px !important;
    border-radius: var(--mt-radius);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    background: var(--mt-primary);
    border: 1px solid var(--mt-primary);
    color: #ffffff !important;
    
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.25 !important;
    white-space: nowrap;
    text-decoration: none !important;
}

button:hover, .button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    background: var(--mt-primary-hover);
    border-color: var(--mt-primary-hover);
    color: #ffffff !important;
}

.button.alt, .button.secondary, input[type="reset"] {
    background: #ffffff;
    border-color: var(--mt-border-dark);
    color: var(--mt-text-soft) !important;
}

.button.alt:hover, .button.secondary:hover, input[type="reset"]:hover {
    background: #f8fafc;
    border-color: var(--mt-text-muted);
    color: var(--mt-text) !important;
}


/* ==========================================================
   18 — ACTION AREAS
   ========================================================== */

#content .actions,
#content .action-bar,
#content .toolbar {
    position: relative;
    z-index: 200;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible !important;
    box-sizing: border-box;
}

#content .actions > *, #content .action-bar > *, #content .toolbar > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#content .actions .pull-left,
#content .actions .pull-right,
#content .action-bar .pull-left,
#content .action-bar .pull-right,
#content .toolbar .pull-left,
#content .toolbar .pull-right {
    float: none !important;
    max-width: 100%;
}

#content .actions button, #content .actions .button,
#content .action-bar button, #content .action-bar .button,
#content .toolbar button, #content .toolbar .button {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    min-height: 38px !important;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}


/* ==========================================================
   19 — GENERAL TABLE UNIFICATION
   ========================================================== */

table, table.list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    box-sizing: border-box !important;
}

table th, table.list th {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    font-weight: 600;
    border-bottom: 2px solid var(--mt-border) !important;
    padding: 10px 12px !important;
    text-align: left;
}

table td, table.list td {
    background: #ffffff;
    transition: background-color .12s ease;
    border-bottom: 1px solid var(--mt-border-light);
    padding: 10px 12px !important;
    vertical-align: middle;
}

table tbody tr:hover td, table.list tbody tr:hover td {
    background: var(--mt-hover) !important;
}

table tfoot td, table.list tfoot td {
    background: #f8fafc !important;
    color: var(--mt-text-muted);
    border-top: 2px solid var(--mt-border) !important;
}


/* ==========================================================
   20 — ADMIN & LIST TABLES FLEXIBLE LAYOUT
   ========================================================== */

table.list {
    table-layout: auto !important;
}

table.list.queue.tickets {
    table-layout: fixed !important;
}

table.list th, table.list td {
    box-sizing: border-box !important;
    word-break: break-word;
}

table.list th:first-child, table.list td:first-child {
    width: 38px !important;
    min-width: 38px !important;
    text-align: center;
    padding-left: 6px !important;
    padding-right: 6px !important;
}


/* ==========================================================
   21 — TRUNCATION & LINKS
   ========================================================== */

table.list.queue.tickets .truncate {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

table.list:not(.queue) .truncate {
    white-space: normal !important;
    overflow: visible !important;
}

table.list td a {
    max-width: 100%;
    overflow-wrap: anywhere;
    display: inline-block;
}


/* ==========================================================
   22 — PRIORITY OVERRIDES
   ========================================================== */

table.list td[style*="FFFFF0"], table.list.queue.tickets td[style*="FFFFF0"] {
    background: #fef3c7 !important;
    color: #78350f;
}

table.list td[style*="FFFFF0"] > div, table.list.queue.tickets td[style*="FFFFF0"] > div {
    background: transparent !important;
}


/* ==========================================================
   23 — CHECKBOXES & RADIOS
   ========================================================== */

input[type="checkbox"], input[type="radio"] {
    accent-color: var(--mt-primary);
    cursor: pointer;
    margin: 0;
    vertical-align: middle;
}


/* ==========================================================
   24 — TICKET THREAD & DIALOGS
   ========================================================== */

#ticket_thread {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}

#ticket_thread .message, #ticket_thread .response, #ticket_thread .note {
    width: 100%;
    max-width: 100%;
    border-radius: var(--mt-radius) !important;
}

#ticket_thread .message {
    border-left: 4px solid var(--mt-primary) !important;
}

#ticket_thread .response {
    border-left: 4px solid #475569 !important;
}

#ticket_thread .note {
    border-left: 4px solid #d97706 !important;
}


/* ==========================================================
   25 — MOBILE: REAL RESPONSIVE (APPLIED TO ALL TABLES)
   ========================================================== */

@media (max-width: 700px) {

    #container {
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
    }

    #header {
        width: 100%;
        min-height: 0 !important;
        height: auto !important;
    }

    #header img {
        max-height: 40px;
    }

    #nav, #sub_nav {
        min-height: 40px;
        overflow: visible !important;
    }

    #nav li > ul, #sub_nav li > ul, #nav .dropdown-menu, #sub_nav .dropdown-menu {
        max-width: calc(100vw - 20px);
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #nav li > ul a, #sub_nav li > ul a, #nav .dropdown-menu a, #sub_nav .dropdown-menu a {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #content .actions, #content .action-bar, #content .toolbar {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 6px;
        align-items: stretch;
        overflow: visible !important;
    }

    #content .actions button, #content .actions .button,
    #content .action-bar button, #content .action-bar .button,
    #content .toolbar button, #content .toolbar .button {
        flex: 1 1 auto;
        min-width: 110px;
        max-width: 100%;
        min-height: 40px !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #pjax-container {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    table.list, table.list.queue.tickets {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: table !important;
        table-layout: auto !important;
    }

    table.list thead, table.list.queue.tickets thead {
        display: none !important;
    }

    table.list tbody, table.list tbody tr, table.list tbody td,
    table.list.queue.tickets tbody, table.list.queue.tickets tbody tr, table.list.queue.tickets tbody td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    table.list tbody tr, table.list.queue.tickets tbody tr {
        position: relative;
        margin-bottom: 8px;
        padding: 8px 8px 8px 38px;
        background: #ffffff;
        border: 1px solid var(--mt-border);
        border-radius: var(--mt-radius);
        box-shadow: var(--mt-shadow);
    }

    table.list tbody td, table.list.queue.tickets tbody td {
        padding: 4px 0 !important;
        border: 0 !important;
        overflow: visible !important;
    }

    table.list tbody td:first-child, table.list.queue.tickets tbody td:first-child {
        position: absolute;
        top: 12px;
        left: 10px;
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        padding: 0 !important;
    }

    table.list .truncate, table.list.queue.tickets .truncate {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
    }

    table.list tfoot, table.list tfoot tr, table.list tfoot td,
    table.list.queue.tickets tfoot, table.list.queue.tickets tfoot tr, table.list.queue.tickets tfoot td {
        display: block !important;
        width: 100% !important;
    }

    table.list tfoot td, table.list.queue.tickets tfoot td {
        padding: 10px !important;
    }
}


/* ==========================================================
   26 — VERY SMALL MOBILE
   ========================================================== */

@media (max-width: 420px) {

    #container {
        width: calc(100% - 8px);
        margin-left: 4px;
        margin-right: 4px;
    }

    #content .actions button, #content .actions .button,
    #content .action-bar button, #content .action-bar .button,
    #content .toolbar button, #content .toolbar .button {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    table.list tbody tr, table.list.queue.tickets tbody tr {
        padding-left: 36px;
    }
}


/* ==========================================================
   27 — TABLET
   ========================================================== */

@media (min-width: 701px) and (max-width: 900px) {

    #container {
        width: 94%;
        margin-left: 3%;
        margin-right: 3%;
    }

    #content .actions, #content .action-bar, #content .toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }

    #content .actions button, #content .actions .button,
    #content .action-bar button, #content .action-bar .button,
    #content .toolbar button, #content .toolbar .button {
        flex: 0 1 auto;
        max-width: 100%;
    }

    table.list {
        table-layout: auto !important;
    }

    table.list.queue.tickets {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}


/* ==========================================================
   28 — DESKTOP
   ========================================================== */

@media (min-width: 901px) {

    #container {
        width: var(--mt-page-width);
        margin-left: calc((100% - var(--mt-page-width)) / 2);
        margin-right: calc((100% - var(--mt-page-width)) / 2);
    }

    #header {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    #header img {
        max-height: 48px;
    }

    #nav, #sub_nav {
        overflow: visible !important;
    }

    table.list {
        display: table !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
    }

    table.list.queue.tickets {
        table-layout: fixed !important;
    }

    #content .actions, #content .action-bar, #content .toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        overflow: visible !important;
    }

    #content .actions button, #content .actions .button,
    #content .action-bar button, #content .action-bar .button,
    #content .toolbar button, #content .toolbar .button {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
    }
}


/* ==========================================================
   29 — LARGE DESKTOP
   ========================================================== */

@media (min-width: 1400px) {

    #container {
        width: 94%;
        margin-left: 3%;
        margin-right: 3%;
    }
}


/* ==========================================================
   30 — DROPDOWN FINAL SAFETY & OVERLAYS
   ========================================================== */

#header, #nav, #sub_nav, #container, #content, #pjax-container {
    overflow-y: visible !important;
}

.dropdown, .dropup, .dropstart, .dropright {
    position: relative;
    overflow: visible !important;
}

.dropdown-menu {
    z-index: 99999 !important;
    background: #ffffff !important;
    color: var(--mt-text) !important;
    border: 1px solid var(--mt-border) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    padding: 6px 0 !important;
}

.dropdown-menu > li > a {
    padding: 8px 16px !important;
    line-height: 1.4 !important;
    display: block !important;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background: var(--mt-hover) !important;
    color: var(--mt-primary-dark) !important;
}


/* ==========================================================
   31 — HOVER & FOCUS READABILITY
   ========================================================== */

a:hover, button:hover, .button:hover, #nav a:hover, #sub_nav a:hover {
    text-shadow: none !important;
}

button:focus, .button:focus, input:focus, select:focus, textarea:focus, a:focus {
    outline-color: var(--mt-primary);
}


/* ==========================================================
   32 — NO PAGE SIDEWAYS SCROLL
   ========================================================== */

html, body {
    max-width: 100%;
    overflow-x: hidden;
}


/* ==========================================================
   END
   ========================================================== */
/* ==========================================================
   33 — LAYOUT CONSISTENCY PATCH
   Megjelenési javítások az eredeti színpaletta módosítása nélkül.
   ========================================================== */

/* Egységes belső méretezés osTicket komponenseknél */
#header *,
#nav *,
#sub_nav *,
#container *,
#content *,
#pjax-container * {
    box-sizing: border-box;
}

/* A lebegő elemek ne tudják széthúzni a fejlécet / eszköztárakat */
#header::after,
#nav::after,
#sub_nav::after,
#content::after,
#pjax-container::after,
.actions::after,
.action-bar::after,
.toolbar::after {
    content: "";
    display: table;
    clear: both;
}

/* Egységes függőleges ritmus */
#content > h1:first-child,
#content > h2:first-child,
#pjax-container > h1:first-child,
#pjax-container > h2:first-child {
    margin-top: 0;
}

#content > .panel,
#content > .box,
#content > .section,
#content > .form-box,
#pjax-container > .panel,
#pjax-container > .box,
#pjax-container > .section,
#pjax-container > .form-box {
    margin-bottom: 14px;
}

.panel,
.box,
.section,
.form-box,
.dialog,
#popup {
    overflow-wrap: anywhere;
}

/* Űrlapsorok ne csússzanak egymásra */
form label {
    line-height: 1.35;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="number"],
form input[type="tel"],
form input[type="search"],
form select,
form textarea {
    vertical-align: middle;
}

textarea {
    resize: vertical;
}

/* Select2 / autocomplete elemek igazítása az alap űrlapmezőkhöz */
.select2-container,
.select2-container-multi,
.ui-autocomplete-input {
    max-width: 100% !important;
}

.select2-container {
    vertical-align: middle;
}

/* Gombcsoportok és műveleti sorok stabilabb tördelése */
.button-group,
.btn-group,
.actions,
.action-bar,
.toolbar {
    max-width: 100%;
}

.button-group,
.btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.actions form,
.action-bar form,
.toolbar form {
    max-width: 100%;
    margin: 0;
}

/* Ikonok ne nyújtsák meg a gombokat */
button img,
.button img,
button svg,
.button svg {
    flex: 0 0 auto;
    vertical-align: middle;
}

/* Táblák: hosszú tartalom ne tolja szét az oldalt */
table th,
table td,
table.list th,
table.list td {
    min-width: 0;
}

table td pre,
table td code,
table.list td pre,
table.list td code {
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Jegylista: a checkbox oszlop fix, a többi oszlop rugalmas */
table.list.queue.tickets th:not(:first-child),
table.list.queue.tickets td:not(:first-child) {
    min-width: 0 !important;
}

/* Ticket thread: hosszú URL-ek és csatolmánynevek kezelése */
#ticket_thread .message,
#ticket_thread .response,
#ticket_thread .note,
#ticket_thread .thread-body,
#ticket_thread .thread-entry {
    overflow-wrap: anywhere;
    word-break: normal;
}

#ticket_thread pre,
#ticket_thread code {
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Modális / popup tartalom ne lógjon ki a viewportból */
.dialog,
#popup,
.ui-dialog,
.modal {
    max-width: calc(100vw - 20px) !important;
}

.ui-dialog-content,
.modal-body {
    max-width: 100%;
    overflow-x: auto;
}

/* Pagination egységes tördelése */
.pagination,
.pages,
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    max-width: 100%;
}

.pagination a,
.pagination span,
.pages a,
.pages span,
.pager a,
.pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
}

/* Kisebb képernyőkön biztonságosabb margók és formok */
@media (max-width: 700px) {
    #breadcrumbs {
        margin-bottom: 8px;
    }

    form,
    fieldset,
    .form-box,
    .panel,
    .box,
    .section {
        min-width: 0;
        max-width: 100%;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea {
        max-width: 100% !important;
    }

    .pagination,
    .pages,
    .pager {
        justify-content: flex-start;
    }

    #ticket_thread .message,
    #ticket_thread .response,
    #ticket_thread .note {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Nagy képernyőn a tartalom maradjon optikailag egységes */
@media (min-width: 901px) {
    #breadcrumbs,
    #content,
    #pjax-container {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==========================================================
   34 — TASK LIST, EDITOR ALIGNMENT & SEARCH FOCUS FINISH
   ========================================================== */

/* Feladatlista: a cím használja ki az oszlop tényleges szélességét.
   Desktop/tablet: legfeljebb két sor, utána kulturált levágás. */
table.list:not(.queue) td .truncate,
table.list:not(.queue) td a.truncate,
table.list:not(.queue) .truncate {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.4;
}

/* A cellán belüli wrapper se korlátozza mesterségesen a címet. */
table.list:not(.queue) td > div,
table.list:not(.queue) td > span {
    max-width: 100%;
}

/* Válasz / belső feljegyzés: a hosszú szöveges szerkesztő ne legyen középre szűkítve. */
#content .redactor-box,
#pjax-container .redactor-box,
#content .redactor-editor,
#pjax-container .redactor-editor,
#content .redactor-toolbar,
#pjax-container .redactor-toolbar,
#content textarea.richtext,
#pjax-container textarea.richtext,
#content .richtext,
#pjax-container .richtext {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

#content .redactor-editor,
#pjax-container .redactor-editor,
#content textarea.richtext,
#pjax-container textarea.richtext {
    min-height: 180px;
    text-align: left;
}

/* A szerkesztő körüli form-row/wrapper se központosítsa a mezőt. */
#content form .redactor-box,
#pjax-container form .redactor-box,
#content form .richtext,
#pjax-container form .richtext {
    float: none !important;
    clear: both;
}

/* Felső keresőmező: böngésző fekete fókuszkeretének eltávolítása,
   a meglévő palettához illő, diszkrét fókusz megtartásával. */
input[type="search"]:focus,
#header input:focus,
#nav input:focus,
#sub_nav input:focus,
.search input:focus,
.search-box input:focus {
    outline: none !important;
    border-color: var(--mt-primary) !important;
    box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.15) !important;
}

/* ==========================================================
   35 — MOBILE POLISH
   ========================================================== */

@media (max-width: 700px) {
    /* Mobilon a feladatcím inkább törjön, mint túl korán levágódjon. */
    table.list:not(.queue) td .truncate,
    table.list:not(.queue) td a.truncate,
    table.list:not(.queue) .truncate {
        display: block !important;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
    }

    /* Rich text editor teljes mobil szélességgel. */
    #content .redactor-box,
    #pjax-container .redactor-box,
    #content .redactor-toolbar,
    #pjax-container .redactor-toolbar,
    #content .redactor-editor,
    #pjax-container .redactor-editor {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #content .redactor-toolbar,
    #pjax-container .redactor-toolbar {
        white-space: normal !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #content .redactor-editor,
    #pjax-container .redactor-editor,
    #content textarea.richtext,
    #pjax-container textarea.richtext {
        min-height: 220px;
    }

    /* Kereső és általános mezők ne lógjanak túl kis képernyőn. */
    #header input[type="search"],
    #nav input[type="search"],
    #sub_nav input[type="search"],
    .search input,
    .search-box input {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 420px) {
    #content .redactor-editor,
    #pjax-container .redactor-editor,
    #content textarea.richtext,
    #pjax-container textarea.richtext {
        min-height: 240px;
    }
}

/* ==========================================================
   36 — BASIC SEARCH: CLEAN FOCUS / ATTACHED INPUT
   ========================================================== */

/* osTicket staff/task basic search uses:
   #basic_search > form > .attached.input > input.basic-search + button
   Keep the original palette, but remove the heavy/dark focus frame. */
#basic_search .attached.input,
#basic_search .attached.input:focus,
#basic_search .attached.input:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
}

#basic_search input.basic-search,
#basic_search input[type="text"].basic-search {
    min-height: 38px !important;
    margin: 0 !important;
    border: 1px solid var(--mt-border-dark) !important;
    border-radius: var(--mt-radius) 0 0 var(--mt-radius) !important;
    box-shadow: none !important;
    outline: none !important;
    background: #ffffff !important;
    color: var(--mt-text) !important;
}

#basic_search input.basic-search:focus,
#basic_search input.basic-search:focus-visible,
#basic_search input[type="text"].basic-search:focus,
#basic_search input[type="text"].basic-search:focus-visible {
    outline: none !important;
    border-color: var(--mt-border-dark) !important;
    box-shadow: inset 0 0 0 1px var(--mt-border-light) !important;
}

#basic_search .attached.button,
#basic_search button.attached.button {
    min-height: 38px !important;
    margin: 0 !important;
    border: 1px solid var(--mt-border-dark) !important;
    border-left: 0 !important;
    border-radius: 0 var(--mt-radius) var(--mt-radius) 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

#basic_search .attached.button:focus,
#basic_search .attached.button:focus-visible,
#basic_search button.attached.button:focus,
#basic_search button.attached.button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Task title cells: once osTicket passes the full title to the HTML,
   allow the available column width to be used naturally. */
#tasks table.list td .truncate,
#tasks table.list td a.truncate,
#tasks table.list td span.truncate {
    max-width: 100% !important;
    width: 100% !important;
}

@media (min-width: 701px) {
    #tasks table.list td .truncate,
    #tasks table.list td a.truncate,
    #tasks table.list td span.truncate {
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

@media (max-width: 700px) {
    #basic_search,
    #basic_search form,
    #basic_search .attached.input {
        width: 100% !important;
        max-width: 100% !important;
    }

    #basic_search .attached.input {
        display: flex !important;
    }

    #basic_search input.basic-search {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    #basic_search .attached.button {
        flex: 0 0 auto !important;
        width: auto !important;
    }
}

/* ==========================================================
   37 — STAFF ACTION TOOLBARS / ICON BUTTON CONSISTENCY
   ========================================================== */

/* osTicket több listanézetben különböző eredeti gombméreteket használ.
   A globális modern gombstílus mellett ezek optikailag széteshetnek.
   Itt csak a tartalmi toolbar/action területeket egységesítjük. */
#content .actions,
#content .action-bar,
#content .toolbar,
#pjax-container .actions,
#pjax-container .action-bar,
#pjax-container .toolbar {
    align-items: center !important;
    gap: 7px !important;
}

/* Egységes magasság a toolbarban lévő normál és ikon gomboknak. */
#content .actions button,
#content .actions .button,
#content .action-bar button,
#content .action-bar .button,
#content .toolbar button,
#content .toolbar .button,
#pjax-container .actions button,
#pjax-container .actions .button,
#pjax-container .action-bar button,
#pjax-container .action-bar .button,
#pjax-container .toolbar button,
#pjax-container .toolbar .button {
    min-height: 38px !important;
    height: 38px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* A régi osTicket button-group elemek ne ugráljanak eltérő baseline-ra. */
#content .button-group,
#content .button-group > span,
#content .button-group > div,
#pjax-container .button-group,
#pjax-container .button-group > span,
#pjax-container .button-group > div {
    display: inline-flex !important;
    align-items: stretch !important;
    vertical-align: middle !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#content .button-group > .button,
#content .button-group > button,
#content .button-group > a,
#pjax-container .button-group > .button,
#pjax-container .button-group > button,
#pjax-container .button-group > a {
    min-height: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* Ikonok optikai középre igazítása. */
#content button > i,
#content .button > i,
#content .button-group i,
#pjax-container button > i,
#pjax-container .button > i,
#pjax-container .button-group i {
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Modern böngészőkben az önálló ikon-gombokat négyzetesre vesszük.
   Szöveges gombokra ez nem vonatkozik. */
@supports selector(button:has(> i)) {
    #content .actions button:has(> i):not(:has(> span)):not(:has(> strong)),
    #content .actions a.button:has(> i):not(:has(> span)):not(:has(> strong)),
    #content .action-bar button:has(> i):not(:has(> span)):not(:has(> strong)),
    #content .action-bar a.button:has(> i):not(:has(> span)):not(:has(> strong)),
    #content .toolbar button:has(> i):not(:has(> span)):not(:has(> strong)),
    #content .toolbar a.button:has(> i):not(:has(> span)):not(:has(> strong)),
    #pjax-container .actions button:has(> i):not(:has(> span)):not(:has(> strong)),
    #pjax-container .actions a.button:has(> i):not(:has(> span)):not(:has(> strong)),
    #pjax-container .action-bar button:has(> i):not(:has(> span)):not(:has(> strong)),
    #pjax-container .action-bar a.button:has(> i):not(:has(> span)):not(:has(> strong)),
    #pjax-container .toolbar button:has(> i):not(:has(> span)):not(:has(> strong)),
    #pjax-container .toolbar a.button:has(> i):not(:has(> span)):not(:has(> strong)) {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Split/dropdown párok: a nyíl-rész maradjon kompakt, de azonos magasságú. */
#content .button-group .dropdown-toggle,
#content .button-group [data-dropdown],
#pjax-container .button-group .dropdown-toggle,
#pjax-container .button-group [data-dropdown] {
    min-width: 32px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Sort/Rendezés jellegű kontrollok ne legyenek magasabbak az akciógomboknál. */
#content .sort-dropdown .button,
#content .sort-dropdown button,
#pjax-container .sort-dropdown .button,
#pjax-container .sort-dropdown button {
    min-height: 38px !important;
    height: 38px !important;
}

@media (max-width: 700px) {
    /* Mobilon ne erőltessük minden ikon-gombra a korábbi 110px minimumot. */
    #content .actions .button-group button,
    #content .actions .button-group .button,
    #content .action-bar .button-group button,
    #content .action-bar .button-group .button,
    #content .toolbar .button-group button,
    #content .toolbar .button-group .button,
    #pjax-container .actions .button-group button,
    #pjax-container .actions .button-group .button,
    #pjax-container .action-bar .button-group button,
    #pjax-container .action-bar .button-group .button,
    #pjax-container .toolbar .button-group button,
    #pjax-container .toolbar .button-group .button {
        flex: 0 0 auto !important;
        min-width: 38px !important;
        width: auto !important;
        white-space: nowrap !important;
    }

    #content .button-group,
    #pjax-container .button-group {
        max-width: 100% !important;
    }
}

/* ==========================================================
   38 — TASK TITLE: FULL VALUE SUPPLIED BY PLUGIN
   ========================================================== */

/* A Task Full Title plugin a teljes címet teszi vissza a HTML-be.
   Desktopon két sorig mutatjuk, mobilon természetesen tördeljük. */
body[data-mt-task-title-plugin="1"] #content table.list td a[href*="tasks.php?id="],
body[data-mt-task-title-plugin="1"] #pjax-container table.list td a[href*="tasks.php?id="] {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

@media (min-width: 701px) {
    body[data-mt-task-title-plugin="1"] #content table.list td a.mt-full-task-title,
    body[data-mt-task-title-plugin="1"] #pjax-container table.list td a.mt-full-task-title {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.35;
    }
}

@media (max-width: 700px) {
    body[data-mt-task-title-plugin="1"] #content table.list td a.mt-full-task-title,
    body[data-mt-task-title-plugin="1"] #pjax-container table.list td a.mt-full-task-title {
        display: block !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        -webkit-line-clamp: unset;
        line-clamp: unset;
    }
}

/* ==========================================================
   39 — OSTICKET 1.18 RICH TEXT: TICKET & TASK ALIGNMENT FIX
   ========================================================== */

/*
   osTicket 1.18 a jegy válasz/belső feljegyzés mezőit a
   #response_options alatt, a feladat mezőit pedig a
   #task_response_options alatt rendereli. A Redactor 3
   tényleges szerkeszthető területe .redactor-in, nem a régi
   .redactor-editor. Ezért az alábbi szabályok célzottan ezt a
   struktúrát igazítják, a színpaletta módosítása nélkül.
*/

/* A két válaszpanel mindig a rendelkezésre álló tartalmi szélességet használja. */
#response_options,
#task_response_options,
#task_response_options.ticket_task_actions,
#response_options > form.tab_content,
#task_response_options > form.tab_content,
#response_options #reply,
#response_options #note,
#task_response_options #task_reply,
#task_response_options #task_note {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
}

/* A tabfülek és az alattuk lévő tartalom ugyanazon a bal szélen induljon. */
#response_options > ul.tabs,
#task_response_options > ul.tabs {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* A szerkesztőt tartalmazó osTicket táblák/cellák ne korlátozzák a szélességet. */
#response_options table,
#task_response_options table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
}

#response_options table td,
#response_options table td[colspan],
#task_response_options table td,
#task_response_options table td[colspan] {
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Redactor 3 teljes szélesség: wrapper, toolbar és tényleges editable rész. */
#response_options .redactor-box,
#response_options .redactor-toolbar,
#response_options .redactor-in,
#response_options .redactor-source,
#task_response_options .redactor-box,
#task_response_options .redactor-toolbar,
#task_response_options .redactor-in,
#task_response_options .redactor-source {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* A jegynézetben ez szünteti meg a „középre csúszott” beviteli területet. */
#response_options .redactor-in,
#task_response_options .redactor-in {
    min-height: 220px !important;
    padding: 18px 20px !important;
    text-align: left !important;
    text-indent: 0 !important;
}

#response_options .redactor-in > :first-child,
#task_response_options .redactor-in > :first-child {
    margin-left: 0 !important;
    text-indent: 0 !important;
}

/* A nyers textarea is teljes szélességű marad JS betöltés előtt / HTML módnál. */
#response,
#internal_note,
#task-response,
#task-note,
#response_options textarea.richtext,
#task_response_options textarea.richtext {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Csatolmánydoboz igazodjon pontosan a szerkesztő szélességéhez. */
#response_options .attachments,
#task_response_options .attachments {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Feladat megnyitásakor a core .ticket_task_actions se szűkítse/központosítsa a panelt. */
.ticket_task_actions,
#task_response_options.ticket_task_actions .tab_content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* Az űrlap belsejének csak kis, egységes levegőt hagyunk; nem központosítunk. */
#response_options > form.tab_content,
#task_response_options > form.tab_content {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

/* Feladatnál a szerkesztő ne maradjon egy keskeny, középre húzott blokkban. */
#task_response_options .redactor-box {
    display: block !important;
}

/* Mobilon kisebb belső margó, továbbra is teljes szélességgel. */
@media (max-width: 700px) {
    #response_options > form.tab_content,
    #task_response_options > form.tab_content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #response_options .redactor-in,
    #task_response_options .redactor-in {
        min-height: 240px !important;
        padding: 14px !important;
    }

    #response_options .redactor-toolbar,
    #task_response_options .redactor-toolbar {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================================
   40 — osTicket 1.18.x ACTION BUTTONS — CORE-AWARE FIX
   ========================================================== */

/*
 * FONTOS:
 * Az osTicket saját felülete külön .action-button és .button elemeket,
 * valamint split/dropdown gombcsoportokat használ. Nem szabad általánosan
 * minden .pull-right alatti gombot átformázni, mert ettől eltérő méretűvé
 * válhatnak a jegy-, feladat- és egyéb részletes nézetek akciógombjai.
 *
 * Itt kizárólag a core által használt akciógomb-osztályokat normalizáljuk.
 * A meglévő háttér- és szövegszíneket szándékosan nem írjuk felül.
 */

/* Önálló osTicket akciógombok — azonos geometria, eredeti színekkel. */
a.action-button,
button.action-button,
input.action-button,
.action-button,
a.button.action-button,
button.button.action-button {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 11px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 30px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    border-radius: var(--mt-radius) !important;
    text-decoration: none !important;
    transform: none !important;
}

/* A core akciósorban előforduló sima .button elemek csak méretben igazodjanak. */
#content .button-group > .button,
#content .button-group > button,
#content .button-group > a,
#pjax-container .button-group > .button,
#pjax-container .button-group > button,
#pjax-container .button-group > a,
#content .actions .button,
#content .actions button,
#content .action-bar .button,
#content .action-bar button,
#content .toolbar .button,
#content .toolbar button {
    box-sizing: border-box !important;
    height: 32px !important;
    min-height: 32px !important;
    line-height: 30px !important;
    vertical-align: middle !important;
    transform: none !important;
}

/* Split/dropdown csoport — a fő rész és a nyíl pontosan egy magas legyen. */
.button-group {
    display: inline-flex !important;
    align-items: stretch !important;
    vertical-align: middle !important;
    max-width: 100%;
}

.button-group > .button,
.button-group > button,
.button-group > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.button-group > :first-child {
    border-top-left-radius: var(--mt-radius) !important;
    border-bottom-left-radius: var(--mt-radius) !important;
}

.button-group > :last-child {
    border-top-right-radius: var(--mt-radius) !important;
    border-bottom-right-radius: var(--mt-radius) !important;
}

/* A külön nyíl-rész maradjon keskeny, de ne legyen alacsonyabb/magasabb. */
.button-group .dropdown-toggle,
.button-group [data-dropdown],
.button-group .caret-button {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ikonok optikai középre igazítása a core Font-Awesome ikonokhoz. */
.action-button > i,
.action-button > [class^="icon-"],
.action-button > [class*=" icon-"],
.button-group i,
.button-group [class^="icon-"],
.button-group [class*=" icon-"] {
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Ikon és felirat között kis, egységes rés — csak ahol van szöveg is. */
.action-button > i:not(:last-child),
.action-button > [class^="icon-"]:not(:last-child),
.action-button > [class*=" icon-"]:not(:last-child) {
    margin-right: 5px !important;
}

/*
 * Ikon-only gomboknál nem használunk :has()-t. Az osTicket különböző
 * böngészőkön/PJAX nézetekben stabilabb, ha a szélességet a tényleges
 * action-button/dropdown szerkezet szabályozza.
 */

/* Ne a globális hover-transzformáció mozgassa el a fejléc-akciókat. */
a.action-button:hover,
button.action-button:hover,
.button-group > .button:hover,
.button-group > button:hover,
.button-group > a:hover {
    transform: none !important;
}

/* Mobil: törhet több sorba, de a gombok nem nyúlnak teljes szélességre. */
@media (max-width: 700px) {
    .action-button,
    .button-group,
    .button-group > .button,
    .button-group > button,
    .button-group > a {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 100% !important;
    }

    .button-group .dropdown-toggle,
    .button-group [data-dropdown],
    .button-group .caret-button {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
    }
}

/* ==========================================================
   41 — TICKET QUEUE ANNOTATIONS / THREAD COUNT
   A Subject mező melletti osTicket annotációk (beszélgetés,
   csatolmány, közreműködő stb.) maradjanak ugyanabban a sorban.
   ========================================================== */

/*
 * Az osTicket queue annotációkat a mező értéke MELLÉ rendereli.
 * A korábbi 100%-os/block .truncate szabály viszont elfoglalta az
 * egész cellaszélességet, ezért a buborék + darabszám új sorba tört.
 */
table.list.queue.tickets td .truncate,
table.list.queue.tickets td a.truncate,
table.list.queue.tickets td span.truncate {
    display: inline-block !important;
    width: auto !important;
    max-width: calc(100% - 76px) !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* A core annotációk és a kis számláló ne növeljék meg a sor magasságát. */
table.list.queue.tickets td small,
table.list.queue.tickets td i[class*="icon-comment"],
table.list.queue.tickets td i[class*="icon-paperclip"],
table.list.queue.tickets td i[class*="icon-group"],
table.list.queue.tickets td [class*="annotation"] {
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* A Subject cell tartalma optikailag egy sorban maradjon. */
table.list.queue.tickets tbody td {
    line-height: 1.35;
}

/* Mobilon továbbra is engedjük a teljes szövegtördelést; ott fontosabb
 * az olvashatóság, mint az egysoros queue-megjelenés. */
@media (max-width: 700px) {
    table.list.queue.tickets td .truncate,
    table.list.queue.tickets td a.truncate,
    table.list.queue.tickets td span.truncate {
        display: inline !important;
        width: auto !important;
        max-width: none !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* ==========================================================
   42 — TICKET / TASK RESPONSE PANEL — NORMAL DOCUMENT FLOW
   A válasz / belső feljegyzés / állapot panel ne lebegjen a
   jegy tartalma fölött görgetés közben.
   ========================================================== */

/*
 * Az osTicket a válaszpanel környékén használhat rögzített vagy
 * "sticky" viselkedést, illetve ezt JavaScript is ráteheti az elemre.
 * A saját témában ezt kikapcsoljuk: a panel maradjon ott, ahol a
 * dokumentumban van, és ne takarja el a jegy előzményeit.
 */
#response_options,
#response_options.sticky,
#response_options.fixed,
#task_response_options,
#task_response_options.sticky,
#task_response_options.fixed {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;
    z-index: auto !important;
    transform: none !important;
}

/* A fülsor se váljon külön lebegő réteggé. */
#response_options > ul.tabs,
#task_response_options > ul.tabs,
#response_options .tabs,
#task_response_options .tabs {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    transform: none !important;
}

/* Maga az aktív válasz/feljegyzés űrlap is normál rétegben maradjon. */
#response_options > form.tab_content,
#task_response_options > form.tab_content,
#response_options .tab_content,
#task_response_options .tab_content {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 1 !important;
}

/* Ha a core/JS a panel köré sticky segédosztályt tesz, az se emelje
 * a szerkesztőt a ticket-thread fölé. A szabály szándékosan csak a
 * válaszpanelek közvetlen környezetére vonatkozik. */
#response_options [class~="sticky"],
#task_response_options [class~="sticky"] {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    z-index: auto !important;
}

/* ==========================================================
   43 — SUB NAV AKTÍV MENÜPONT KIEMELÉSE
   Nyitott / Saját jegyeim / Lezárt / Keresés / Új jegy
   A meglévő színpalettát használja, új színt nem vezet be.
   ========================================================== */

/* Az aktív elem háttere és alsó jelölése legyen egyértelmű. */
#sub_nav li.active,
#sub_nav li.current,
#sub_nav li.selected {
    background: var(--mt-hover) !important;
    box-shadow: inset 0 -3px 0 var(--mt-primary) !important;
}

#sub_nav li.active > a,
#sub_nav li.current > a,
#sub_nav li.selected > a,
#sub_nav a.active,
#sub_nav a.current,
#sub_nav a.selected,
#sub_nav a[aria-current="page"] {
    color: var(--mt-primary-dark) !important;
    background: var(--mt-hover) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Ha az aktív osztály közvetlenül az <a> elemen van, akkor is kapjon
 * egy jól látható alsó jelölést. */
#sub_nav a.active,
#sub_nav a.current,
#sub_nav a.selected,
#sub_nav a[aria-current="page"] {
    box-shadow: inset 0 -3px 0 var(--mt-primary) !important;
}

/* Hover közben az aktív elem ne veszítse el a kijelölését. */
#sub_nav li.active > a:hover,
#sub_nav li.current > a:hover,
#sub_nav li.selected > a:hover,
#sub_nav a.active:hover,
#sub_nav a.current:hover,
#sub_nav a.selected:hover,
#sub_nav a[aria-current="page"]:hover {
    color: var(--mt-primary-dark) !important;
    background: var(--mt-active) !important;
}

/* ==========================================================
   V14 — CÉLZOTT STABILITÁSI JAVÍTÁSOK
   Alap: a korábban stabil modern-staff-v10.
   ========================================================== */

/* ----------------------------------------------------------
   1) Lista-fejlécek: csak normál szótörés.
   Nem törünk egy szót betűnként ("Munkatárs" stb.).
   ---------------------------------------------------------- */
table.list thead th,
table.list.queue thead th,
table.list.queue.tickets thead th {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    line-height: 1.3 !important;
    vertical-align: middle !important;
}

table.list thead th > a,
table.list thead th > span,
table.list thead th > div {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    max-width: 100% !important;
}

/* A fejlécoszlop ne tudjon néhány pixel szélesre összeroppanni.
   A checkbox/oszlopjelölő első oszlop marad az eredeti keskeny méretén. */
table.list thead th:not(:first-child) {
    min-width: 72px !important;
}

/* ----------------------------------------------------------
   2) Popup/modal: viewporthoz igazodjon resize közben is.
   Nem módosítja a menük rétegsorrendjét.
   ---------------------------------------------------------- */
#popup,
.dialog,
.ui-dialog {
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 32px) !important;
    box-sizing: border-box !important;
}

#popup .content,
#popup .body,
#popup .dialog-content,
.dialog .content,
.dialog .body,
.ui-dialog .ui-dialog-content {
    max-height: calc(100vh - 110px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
}

/* Ha a core inline magasságot ad a popupnak, a viewport legyen a felső korlát. */
#popup[style],
.dialog[style],
.ui-dialog[style] {
    height: auto !important;
}

/* Overlay fedje le a fejlécet is; popup maradjon fölötte.
   A normál nav/dropdown z-index értékekhez nem nyúlunk. */
#overlay,
.ui-widget-overlay,
.modal-backdrop {
    z-index: 100000 !important;
}

#popup,
.dialog,
.ui-dialog,
.tip_box {
    z-index: 100001 !important;
}

@media (max-width: 700px) {
    #popup,
    .dialog,
    .ui-dialog {
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
    }

    #popup .content,
    #popup .body,
    #popup .dialog-content,
    .dialog .content,
    .dialog .body,
    .ui-dialog .ui-dialog-content {
        max-height: calc(100vh - 86px) !important;
    }
}

/* ----------------------------------------------------------
   3) SUB NAV — csak a közvetlen felső szintet egységesítjük.
   A lenyíló menükre ezek a szabályok NEM vonatkoznak.
   ---------------------------------------------------------- */

/* Felső szintű almenüpontok alapja */
#sub_nav > ul > li > a {
    background: transparent !important;
    color: var(--mt-text-soft) !important;
    text-decoration: none !important;
}

/* Hover: ugyanaz a visszafogott kiemelés minden felső szintű pontnál */
#sub_nav > ul > li:not(.active):not(.current):not(.selected):hover > a {
    background: var(--mt-hover) !important;
    color: var(--mt-primary-dark) !important;
    text-decoration: none !important;
}

/* Aktív felső szint: egységes alsó jelölés */
#sub_nav > ul > li.active,
#sub_nav > ul > li.current,
#sub_nav > ul > li.selected {
    background: var(--mt-hover) !important;
    box-shadow: inset 0 -3px 0 var(--mt-primary) !important;
}

#sub_nav > ul > li.active > a,
#sub_nav > ul > li.current > a,
#sub_nav > ul > li.selected > a,
#sub_nav > ul > li > a.active,
#sub_nav > ul > li > a.current,
#sub_nav > ul > li > a.selected,
#sub_nav > ul > li > a[aria-current="page"] {
    background: transparent !important;
    color: var(--mt-primary-dark) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Aktív elem hoverkor se váltson más kinézetre */
#sub_nav > ul > li.active:hover > a,
#sub_nav > ul > li.current:hover > a,
#sub_nav > ul > li.selected:hover > a {
    background: transparent !important;
    color: var(--mt-primary-dark) !important;
}

/* A lenyíló almenüket visszaengedjük az osTicket eredeti/v10 rétegére.
   Ez biztosítja, hogy a Feladatok hover-menü ne kerüljön az "Új jegy" mögé. */
#nav li > ul,
#sub_nav li > ul,
#nav .dropdown-menu,
#sub_nav .dropdown-menu,
.dropdown-menu {
    z-index: 99999 !important;
}

/* Dropdown hover — csak a dropdownon belül, fehér villanás nélkül */
#nav .dropdown-menu > li > a:hover,
#nav .dropdown-menu > li > a:focus,
#sub_nav .dropdown-menu > li > a:hover,
#sub_nav .dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--mt-hover) !important;
    color: var(--mt-primary-dark) !important;
    text-decoration: none !important;
}

/* ==========================================================
   V15 — ADMIN KEZDŐLAP / NAPTÁR / INFORMÁCIÓ JAVÍTÁSOK
   Célzott javítások, a többi staff elemhez nem nyúlunk.
   ========================================================== */

/* ----------------------------------------------------------
   1) Admin főoldali kis gombok: legyenek mindig olvashatóak
   ---------------------------------------------------------- */
#content .button,
#content button,
#content input[type="button"],
#content input[type="submit"],
#content input[type="reset"] {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Disabled gomb: ne legyen fehér szöveg fehér háttéren */
#content button[disabled],
#content .button.disabled,
#content input[type="button"][disabled],
#content input[type="submit"][disabled],
#content input[type="reset"][disabled] {
    background: var(--mt-surface-soft) !important;
    color: var(--mt-text-muted) !important;
    border-color: var(--mt-border-dark) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    cursor: not-allowed !important;
}

/* Másodlagos / világos gombok olvashatósága */
#content .button.alt,
#content .button.secondary,
#content .action-button.alt,
#content .action-button.secondary {
    background: #ffffff !important;
    color: var(--mt-text-soft) !important;
    border-color: var(--mt-border-dark) !important;
}

#content .button.alt:hover,
#content .button.secondary:hover,
#content .action-button.alt:hover,
#content .action-button.secondary:hover {
    background: var(--mt-hover) !important;
    color: var(--mt-primary-dark) !important;
}

/* ----------------------------------------------------------
   2) Datepicker / naptár: ne csússzon szét és ne lógjon ki
   ---------------------------------------------------------- */
.ui-datepicker,
.datepicker,
#ui-datepicker-div {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 560px !important;
    max-width: min(720px, calc(100vw - 32px)) !important;
    overflow: hidden !important;
    z-index: 100002 !important;
}

.ui-datepicker .ui-datepicker-group,
#ui-datepicker-div .ui-datepicker-group {
    box-sizing: border-box !important;
    width: 50% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ui-datepicker table,
#ui-datepicker-div table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

.ui-datepicker th,
.ui-datepicker td,
#ui-datepicker-div th,
#ui-datepicker-div td {
    width: 14.2857% !important;
    min-width: 0 !important;
    padding: 4px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.ui-datepicker td a,
.ui-datepicker td span,
#ui-datepicker-div td a,
#ui-datepicker-div td span {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.ui-datepicker .ui-datepicker-header,
#ui-datepicker-div .ui-datepicker-header {
    box-sizing: border-box !important;
    overflow: hidden !important;
}

@media (max-width: 700px) {
    .ui-datepicker,
    .datepicker,
    #ui-datepicker-div {
        min-width: 0 !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        left: 8px !important;
        right: 8px !important;
    }

    .ui-datepicker .ui-datepicker-group,
    #ui-datepicker-div .ui-datepicker-group {
        float: none !important;
        width: 100% !important;
        display: block !important;
    }
}

/* ----------------------------------------------------------
   3) Admin Információ fül — rendszerinformációs táblázat
   Ne roppanjon össze az első oszlop betűnként.
   ---------------------------------------------------------- */
#content table.system-info,
#content table.info,
#content .system-info table,
#content .info table,
#content table:has(th[colspan]) {
    table-layout: auto !important;
}

#content table.system-info th,
#content table.system-info td,
#content table.info th,
#content table.info td,
#content .system-info table th,
#content .system-info table td,
#content .info table th,
#content .info table td {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

#content table.system-info tr > *:first-child,
#content table.info tr > *:first-child,
#content .system-info table tr > *:first-child,
#content .info table tr > *:first-child {
    width: 1% !important;
    min-width: 150px !important;
    max-width: 260px !important;
    white-space: normal !important;
    word-break: normal !important;
}

/* Fallback az Információ oldali 2 oszlopos admin táblákra */
#content h2 + table tr > *:first-child,
#content h3 + table tr > *:first-child {
    min-width: 150px !important;
    white-space: normal !important;
    word-break: normal !important;
}

/* ----------------------------------------------------------
   4) Admin szűrősáv: inputok/gombok maradjanak egy sorban,
   de törhessenek, ha elfogy a hely.
   ---------------------------------------------------------- */
#content form .filters,
#content .filter,
#content .search-form,
#content .toolbar {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#content form input,
#content form select,
#content form button {
    vertical-align: middle !important;
}

/* ==========================================================
   V16 — RENDSZERNAPLÓ GOMBOK + ÚJ FELADAT MODAL
   ========================================================== */

/* ----------------------------------------------------------
   1) Rendszernaplók: dátummezők közti kis gomb és disabled törlés
   ---------------------------------------------------------- */

/* A dátummezők közötti ikon/gomb legyen kompakt, látható és ne örökölje a nagy primary gomb stílust */
#content form button.ui-datepicker-trigger,
#content form .ui-datepicker-trigger,
#content form .date-icon,
#content form .calendar-icon,
#content form .icon-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    margin: 0 6px !important;
    background: #ffffff !important;
    color: var(--mt-text-soft) !important;
    border: 1px solid var(--mt-border-dark) !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: none !important;
    line-height: 1 !important;
}

#content form button.ui-datepicker-trigger:hover,
#content form .ui-datepicker-trigger:hover,
#content form .date-icon:hover,
#content form .calendar-icon:hover,
#content form .icon-button:hover {
    background: var(--mt-hover) !important;
    color: var(--mt-primary-dark) !important;
    border-color: var(--mt-text-muted) !important;
}

/* Rendszernapló törlés gomb: disabled állapotban is legyen kontrasztos és olvasható */
#content input[type="submit"][disabled],
#content button[disabled],
#content .button.disabled {
    background: var(--mt-surface-soft) !important;
    color: var(--mt-text-muted) !important;
    border: 1px solid var(--mt-border-dark) !important;
    opacity: 1 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* ----------------------------------------------------------
   2) Új feladat modal — viselkedjen az Új jegy modalhoz hasonlóan
   ---------------------------------------------------------- */

/* A modal legyen szélesebb és stabilabb desktopon */
#popup:has(form[action*="task"]),
.dialog:has(form[action*="task"]),
.ui-dialog:has(form[action*="task"]),
#popup:has(#taskForm),
.dialog:has(#taskForm),
.ui-dialog:has(#taskForm) {
    width: min(960px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
    max-height: calc(100vh - 32px) !important;
    box-sizing: border-box !important;
}

/* Task modal belső tartalom és form teljes szélességen */
#popup:has(form[action*="task"]) form,
.dialog:has(form[action*="task"]) form,
.ui-dialog:has(form[action*="task"]) form,
#popup:has(#taskForm) form,
.dialog:has(#taskForm) form,
.ui-dialog:has(#taskForm) form,
#popup #taskForm,
.dialog #taskForm,
.ui-dialog #taskForm {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Rich text szerkesztő és attachment rész ne legyen keskeny / középre húzott */
#popup:has(form[action*="task"]) .redactor-box,
#popup:has(form[action*="task"]) .redactor-editor,
#popup:has(form[action*="task"]) .redactor-toolbar,
#popup:has(form[action*="task"]) .filedrop,
#popup:has(#taskForm) .redactor-box,
#popup:has(#taskForm) .redactor-editor,
#popup:has(#taskForm) .redactor-toolbar,
#popup:has(#taskForm) .filedrop,
.dialog:has(form[action*="task"]) .redactor-box,
.dialog:has(form[action*="task"]) .redactor-editor,
.dialog:has(form[action*="task"]) .redactor-toolbar,
.dialog:has(form[action*="task"]) .filedrop,
.ui-dialog:has(form[action*="task"]) .redactor-box,
.ui-dialog:has(form[action*="task"]) .redactor-editor,
.ui-dialog:has(form[action*="task"]) .redactor-toolbar,
.ui-dialog:has(form[action*="task"]) .filedrop {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Task modal mezők ne fussanak túl */
#popup:has(form[action*="task"]) input,
#popup:has(form[action*="task"]) select,
#popup:has(form[action*="task"]) textarea,
#popup:has(form[action*="task"]) .select2-container,
#popup:has(#taskForm) input,
#popup:has(#taskForm) select,
#popup:has(#taskForm) textarea,
#popup:has(#taskForm) .select2-container {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Task modal belső scroll */
#popup:has(form[action*="task"]) .content,
#popup:has(form[action*="task"]) .body,
#popup:has(form[action*="task"]) .dialog-content,
#popup:has(#taskForm) .content,
#popup:has(#taskForm) .body,
#popup:has(#taskForm) .dialog-content,
.dialog:has(form[action*="task"]) .content,
.ui-dialog:has(form[action*="task"]) .ui-dialog-content {
    max-height: calc(100vh - 110px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Mobil */
@media (max-width: 700px) {
    #popup:has(form[action*="task"]),
    .dialog:has(form[action*="task"]),
    .ui-dialog:has(form[action*="task"]),
    #popup:has(#taskForm),
    .dialog:has(#taskForm),
    .ui-dialog:has(#taskForm) {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 0 !important;
    }

    #popup:has(form[action*="task"]) .redactor-editor,
    #popup:has(#taskForm) .redactor-editor,
    .dialog:has(form[action*="task"]) .redactor-editor,
    .ui-dialog:has(form[action*="task"]) .redactor-editor {
        min-height: 180px !important;
    }
}

/* ==========================================================
   V17 — ÚJ FELADAT MODAL MÉRET / BEZÁRÁS JAVÍTÁS
   ========================================================== */

/* Az Új feladat modal ne legyen túl széles, maradjon a viewporton belül */
#popup:has(form[action*="task"]),
.dialog:has(form[action*="task"]),
.ui-dialog:has(form[action*="task"]),
#popup:has(#taskForm),
.dialog:has(#taskForm),
.ui-dialog:has(#taskForm) {
    width: min(780px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100vh - 32px) !important;
    left: 50% !important;
    right: auto !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* A modal tartalma maradjon saját scrollban */
#popup:has(form[action*="task"]) .content,
#popup:has(form[action*="task"]) .body,
#popup:has(form[action*="task"]) .dialog-content,
#popup:has(#taskForm) .content,
#popup:has(#taskForm) .body,
#popup:has(#taskForm) .dialog-content,
.dialog:has(form[action*="task"]) .content,
.ui-dialog:has(form[action*="task"]) .ui-dialog-content {
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Bezárás ikon mindig a jobb felső sarokban maradjon */
#popup:has(form[action*="task"]) .close,
#popup:has(form[action*="task"]) .dialog-close,
#popup:has(form[action*="task"]) .ui-dialog-titlebar-close,
#popup:has(#taskForm) .close,
#popup:has(#taskForm) .dialog-close,
#popup:has(#taskForm) .ui-dialog-titlebar-close,
.dialog:has(form[action*="task"]) .close,
.dialog:has(form[action*="task"]) .dialog-close,
.ui-dialog:has(form[action*="task"]) .ui-dialog-titlebar-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    z-index: 3 !important;
    margin: 0 !important;
}

/* Mobilon teljesen biztonságos szélesség */
@media (max-width: 700px) {
    #popup:has(form[action*="task"]),
    .dialog:has(form[action*="task"]),
    .ui-dialog:has(form[action*="task"]),
    #popup:has(#taskForm),
    .dialog:has(#taskForm),
    .ui-dialog:has(#taskForm) {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        left: 8px !important;
        right: 8px !important;
        transform: none !important;
    }
}

/* ==========================================================
   V18 — TASK MODAL CLOSE + TASK TABLE HEADER FIX
   Csak a két jelzett hibát javítja.
   ========================================================== */

/* ----------------------------------------------------------
   1) Új feladat modal: méret és valódi bezáró ikon helyreállítása
   ---------------------------------------------------------- */

/* Biztonságosabb, keskenyebb modal; ne lógjon ki a viewportból */
#popup:has(form[action*="task"]),
.dialog:has(form[action*="task"]),
.ui-dialog:has(form[action*="task"]),
#popup:has(#taskForm),
.dialog:has(#taskForm),
.ui-dialog:has(#taskForm) {
    width: min(720px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 24px) !important;
    left: 50% !important;
    right: auto !important;
    top: 12px !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Belső tartalom gördüljön, ne maga az egész modal lógjon túl */
#popup:has(form[action*="task"]) .content,
#popup:has(form[action*="task"]) .body,
#popup:has(form[action*="task"]) .dialog-content,
#popup:has(#taskForm) .content,
#popup:has(#taskForm) .body,
#popup:has(#taskForm) .dialog-content,
.dialog:has(form[action*="task"]) .content,
.ui-dialog:has(form[action*="task"]) .ui-dialog-content {
    max-height: calc(100vh - 76px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* V17-ben a .close túl tág célzás volt.
   A tényleges bezáró ikonokat célozzuk, és a Mégsem/Törlés gombokat békén hagyjuk. */
#popup:has(form[action*="task"]) .ui-dialog-titlebar-close,
#popup:has(form[action*="task"]) .dialog-close,
#popup:has(form[action*="task"]) .close-icon,
#popup:has(#taskForm) .ui-dialog-titlebar-close,
#popup:has(#taskForm) .dialog-close,
#popup:has(#taskForm) .close-icon,
.dialog:has(form[action*="task"]) .ui-dialog-titlebar-close,
.dialog:has(form[action*="task"]) .dialog-close,
.dialog:has(form[action*="task"]) .close-icon,
.ui-dialog:has(form[action*="task"]) .ui-dialog-titlebar-close,
.ui-dialog:has(form[action*="task"]) .dialog-close,
.ui-dialog:has(form[action*="task"]) .close-icon {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    z-index: 5 !important;
    margin: 0 !important;
}

/* Expliciten visszaadjuk a normál pozíciót a form action gombjainak */
#popup:has(form[action*="task"]) button,
#popup:has(form[action*="task"]) .button,
#popup:has(form[action*="task"]) input[type="button"],
#popup:has(form[action*="task"]) input[type="submit"],
#popup:has(form[action*="task"]) input[type="reset"],
#popup:has(#taskForm) button,
#popup:has(#taskForm) .button,
#popup:has(#taskForm) input[type="button"],
#popup:has(#taskForm) input[type="submit"],
#popup:has(#taskForm) input[type="reset"] {
    position: static !important;
}

/* Mobil */
@media (max-width: 700px) {
    #popup:has(form[action*="task"]),
    .dialog:has(form[action*="task"]),
    .ui-dialog:has(form[action*="task"]),
    #popup:has(#taskForm),
    .dialog:has(#taskForm),
    .ui-dialog:has(#taskForm) {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        left: 6px !important;
        right: 6px !important;
        top: 6px !important;
        transform: none !important;
        max-height: calc(100vh - 12px) !important;
    }

    #popup:has(form[action*="task"]) .content,
    #popup:has(form[action*="task"]) .body,
    #popup:has(form[action*="task"]) .dialog-content,
    #popup:has(#taskForm) .content,
    #popup:has(#taskForm) .body,
    #popup:has(#taskForm) .dialog-content,
    .dialog:has(form[action*="task"]) .content,
    .ui-dialog:has(form[action*="task"]) .ui-dialog-content {
        max-height: calc(100vh - 64px) !important;
    }
}

/* ----------------------------------------------------------
   2) Feladatlista: hosszú fejléc ne lógjon ki a cellából
   ---------------------------------------------------------- */

table.list.queue.tasks thead th,
table.list.tasks thead th,
table.queue.tasks thead th {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto !important;
    line-height: 1.25 !important;
    vertical-align: middle !important;
}

/* A jobb szélső munkatárs oszlop kapjon minimális helyet */
table.list.queue.tasks thead th:last-child,
table.list.tasks thead th:last-child,
table.queue.tasks thead th:last-child {
    min-width: 110px !important;
}

/* A cím link/span is törhessen normálisan */
table.list.queue.tasks thead th > a,
table.list.queue.tasks thead th > span,
table.list.queue.tasks thead th > div,
table.list.tasks thead th > a,
table.list.tasks thead th > span,
table.list.tasks thead th > div,
table.queue.tasks thead th > a,
table.queue.tasks thead th > span,
table.queue.tasks thead th > div {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    max-width: 100% !important;
}

/* ==========================================================
   V19 — TASK MODAL CLOSE + MUNKATÁRS OSZLOP
   Csak a két jelzett hibát javítja.
   ========================================================== */

/* 1) Új feladat modal: bezáró ikon kerüljön beljebb a jobb széltől */
#popup:has(form[action*="task"]) .ui-dialog-titlebar-close,
#popup:has(form[action*="task"]) .dialog-close,
#popup:has(form[action*="task"]) .close-icon,
#popup:has(#taskForm) .ui-dialog-titlebar-close,
#popup:has(#taskForm) .dialog-close,
#popup:has(#taskForm) .close-icon,
.dialog:has(form[action*="task"]) .ui-dialog-titlebar-close,
.dialog:has(form[action*="task"]) .dialog-close,
.dialog:has(form[action*="task"]) .close-icon,
.ui-dialog:has(form[action*="task"]) .ui-dialog-titlebar-close,
.ui-dialog:has(form[action*="task"]) .dialog-close,
.ui-dialog:has(form[action*="task"]) .close-icon {
    top: 12px !important;
    right: 18px !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    box-sizing: border-box !important;
}

/* A modal jobb belső széle kapjon egy kis tartalékot, hogy a scrollbar se takarja */
#popup:has(form[action*="task"]) .content,
#popup:has(form[action*="task"]) .body,
#popup:has(form[action*="task"]) .dialog-content,
#popup:has(#taskForm) .content,
#popup:has(#taskForm) .body,
#popup:has(#taskForm) .dialog-content,
.dialog:has(form[action*="task"]) .content,
.ui-dialog:has(form[action*="task"]) .ui-dialog-content {
    padding-right: 18px !important;
}

/* 2) Feladatlista: a Munkatárs oszlop ne tudjon túl keskenyre összeesni */
table.list.queue.tasks,
table.list.tasks,
table.queue.tasks {
    table-layout: auto !important;
}

/* Jobb szélső Munkatárs oszlop szélessége */
table.list.queue.tasks thead th:last-child,
table.list.queue.tasks tbody td:last-child,
table.list.tasks thead th:last-child,
table.list.tasks tbody td:last-child,
table.queue.tasks thead th:last-child,
table.queue.tasks tbody td:last-child {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 180px !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* A fejléc felirata maradjon vízszintes és olvasható */
table.list.queue.tasks thead th:last-child,
table.list.tasks thead th:last-child,
table.queue.tasks thead th:last-child {
    text-align: left !important;
    line-height: 1.25 !important;
}

/* A szomszédos oszlopok se nyomják össze */
table.list.queue.tasks thead th:nth-last-child(2),
table.list.tasks thead th:nth-last-child(2),
table.queue.tasks thead th:nth-last-child(2) {
    min-width: 110px !important;
}

/* ==========================================================
   V20 — ÚJ FELADAT DÁTUMGOMB + DATE/TIME PICKER JAVÍTÁS
   Csak a task modal határidő mezőjét és naptárát érinti.
   ========================================================== */

/* 1) Határidő mező melletti naptárgomb legyen alapból is látható */
#popup:has(form[action*="task"]) .ui-datepicker-trigger,
#popup:has(#taskForm) .ui-datepicker-trigger,
.dialog:has(form[action*="task"]) .ui-datepicker-trigger,
.ui-dialog:has(form[action*="task"]) .ui-datepicker-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin-left: 6px !important;

    background: var(--mt-primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--mt-primary) !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#popup:has(form[action*="task"]) .ui-datepicker-trigger:hover,
#popup:has(form[action*="task"]) .ui-datepicker-trigger:focus,
#popup:has(#taskForm) .ui-datepicker-trigger:hover,
#popup:has(#taskForm) .ui-datepicker-trigger:focus,
.dialog:has(form[action*="task"]) .ui-datepicker-trigger:hover,
.ui-dialog:has(form[action*="task"]) .ui-datepicker-trigger:hover {
    background: var(--mt-primary-hover) !important;
    border-color: var(--mt-primary-hover) !important;
    color: #ffffff !important;
}

/* Ha képes ikon van benne, legyen látható */
#popup:has(form[action*="task"]) .ui-datepicker-trigger img,
#popup:has(#taskForm) .ui-datepicker-trigger img,
.dialog:has(form[action*="task"]) .ui-datepicker-trigger img,
.ui-dialog:has(form[action*="task"]) .ui-datepicker-trigger img {
    display: block !important;
    max-width: 18px !important;
    max-height: 18px !important;
    filter: brightness(0) invert(1);
}

/* 2) Date/time picker kompaktabb, rendezettebb */
#ui-datepicker-div,
.ui-datepicker {
    width: min(560px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 100003 !important;
}

/* Két hónap egymás mellett desktopon */
#ui-datepicker-div .ui-datepicker-group,
.ui-datepicker .ui-datepicker-group {
    width: 50% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Táblázat stabil méretezés */
#ui-datepicker-div table,
.ui-datepicker table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
}

#ui-datepicker-div th,
#ui-datepicker-div td,
.ui-datepicker th,
.ui-datepicker td {
    width: 14.2857% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

#ui-datepicker-div td a,
#ui-datepicker-div td span,
.ui-datepicker td a,
.ui-datepicker td span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Hónap fejléc ne torzuljon */
#ui-datepicker-div .ui-datepicker-header,
.ui-datepicker .ui-datepicker-header {
    min-height: 42px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Timepicker rész: kompakt sorok */
#ui-datepicker-div .ui-timepicker-div,
.ui-datepicker .ui-timepicker-div {
    padding: 12px !important;
    box-sizing: border-box !important;
}

#ui-datepicker-div .ui-timepicker-div dl,
.ui-datepicker .ui-timepicker-div dl {
    display: grid !important;
    grid-template-columns: 90px minmax(0, 1fr) !important;
    gap: 10px 16px !important;
    margin: 0 !important;
    align-items: center !important;
}

#ui-datepicker-div .ui-timepicker-div dt,
#ui-datepicker-div .ui-timepicker-div dd,
.ui-datepicker .ui-timepicker-div dt,
.ui-datepicker .ui-timepicker-div dd {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
}

#ui-datepicker-div .ui-timepicker-div select,
.ui-datepicker .ui-timepicker-div select {
    width: auto !important;
    min-width: 90px !important;
    max-width: 140px !important;
}

/* Alsó gombsor */
#ui-datepicker-div .ui-datepicker-buttonpane,
.ui-datepicker .ui-datepicker-buttonpane {
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
}

#ui-datepicker-div .ui-datepicker-buttonpane button,
.ui-datepicker .ui-datepicker-buttonpane button {
    width: auto !important;
    min-width: 80px !important;
    margin: 0 !important;
}

/* Mobilon egy hónap oszloponként, kompakt időválasztó */
@media (max-width: 700px) {
    #ui-datepicker-div,
    .ui-datepicker {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        left: 6px !important;
        right: 6px !important;
    }

    #ui-datepicker-div .ui-datepicker-group,
    .ui-datepicker .ui-datepicker-group {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }

    #ui-datepicker-div .ui-timepicker-div dl,
    .ui-datepicker .ui-timepicker-div dl {
        grid-template-columns: 80px minmax(0, 1fr) !important;
    }
}

/* ==========================================================
   V21 — GLOBÁLIS STAFF DÁTUMGOMB + DATE/TIME PICKER
   Minden staff oldali dátummezőre egységesen vonatkozik.
   ========================================================== */

/* 1) MINDEN staff datepicker-trigger legyen alapból látható */
.ui-datepicker-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;

    height: 40px !important;
    min-height: 40px !important;

    padding: 0 !important;
    margin: 0 6px !important;

    background: var(--mt-primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--mt-primary) !important;
    border-radius: var(--mt-radius) !important;

    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;

    vertical-align: middle !important;
    cursor: pointer !important;
}

.ui-datepicker-trigger:hover,
.ui-datepicker-trigger:focus {
    background: var(--mt-primary-hover) !important;
    color: #ffffff !important;
    border-color: var(--mt-primary-hover) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.12) !important;
}

.ui-datepicker-trigger img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    filter: brightness(0) invert(1);
}

/* Ha az ikon fontból jön */
.ui-datepicker-trigger i,
.ui-datepicker-trigger [class^="icon-"],
.ui-datepicker-trigger [class*=" icon-"] {
    color: #ffffff !important;
    line-height: 1 !important;
}

/* Disabled dátumgomb */
.ui-datepicker-trigger:disabled,
.ui-datepicker-trigger.disabled {
    background: var(--mt-surface-soft) !important;
    color: var(--mt-text-muted) !important;
    border-color: var(--mt-border-dark) !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

.ui-datepicker-trigger:disabled img,
.ui-datepicker-trigger.disabled img {
    filter: none !important;
    opacity: .55 !important;
}

/* 2) Datepicker popup — közös, staff-szintű stabil méretezés */
#ui-datepicker-div,
.ui-datepicker {
    width: min(560px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 100003 !important;
}

/* Két hónapos nézet */
#ui-datepicker-div.ui-datepicker-multi-2,
.ui-datepicker.ui-datepicker-multi-2 {
    width: min(560px, calc(100vw - 24px)) !important;
}

#ui-datepicker-div .ui-datepicker-group,
.ui-datepicker .ui-datepicker-group {
    width: 50% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Egy hónapos nézet ne maradjon fél szélességen */
#ui-datepicker-div:not(.ui-datepicker-multi) .ui-datepicker-group,
.ui-datepicker:not(.ui-datepicker-multi) .ui-datepicker-group {
    width: 100% !important;
}

/* Hónap fejlécek */
#ui-datepicker-div .ui-datepicker-header,
.ui-datepicker .ui-datepicker-header {
    min-height: 42px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#ui-datepicker-div .ui-datepicker-title,
.ui-datepicker .ui-datepicker-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Naptártábla */
#ui-datepicker-div table,
.ui-datepicker table {
    width: 100% !important;
    max-width: 100% !important;

    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;

    margin: 0 !important;
    box-sizing: border-box !important;
}

#ui-datepicker-div th,
#ui-datepicker-div td,
.ui-datepicker th,
.ui-datepicker td {
    width: 14.2857% !important;
    min-width: 0 !important;
    max-width: none !important;

    padding: 4px !important;
    box-sizing: border-box !important;

    text-align: center !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

#ui-datepicker-div td a,
#ui-datepicker-div td span,
.ui-datepicker td a,
.ui-datepicker td span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;

    padding: 0 !important;
    margin: 0 !important;

    box-sizing: border-box !important;
    text-align: center !important;
}

/* 3) Timepicker — mindenhol kompakt */
#ui-datepicker-div .ui-timepicker-div,
.ui-datepicker .ui-timepicker-div {
    padding: 12px !important;
    box-sizing: border-box !important;
}

#ui-datepicker-div .ui-timepicker-div dl,
.ui-datepicker .ui-timepicker-div dl {
    display: grid !important;
    grid-template-columns: 90px minmax(0, 1fr) !important;

    gap: 10px 16px !important;
    margin: 0 !important;

    align-items: center !important;
}

#ui-datepicker-div .ui-timepicker-div dt,
#ui-datepicker-div .ui-timepicker-div dd,
.ui-datepicker .ui-timepicker-div dt,
.ui-datepicker .ui-timepicker-div dd {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
}

#ui-datepicker-div .ui-timepicker-div select,
.ui-datepicker .ui-timepicker-div select {
    width: auto !important;
    min-width: 90px !important;
    max-width: 140px !important;
    min-height: 38px !important;
}

/* Slideres időválasztó esetére */
#ui-datepicker-div .ui_tpicker_time,
#ui-datepicker-div .ui_tpicker_hour,
#ui-datepicker-div .ui_tpicker_minute,
.ui-datepicker .ui_tpicker_time,
.ui-datepicker .ui_tpicker_hour,
.ui-datepicker .ui_tpicker_minute {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Alsó Today / Done sáv */
#ui-datepicker-div .ui-datepicker-buttonpane,
.ui-datepicker .ui-datepicker-buttonpane {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 8px !important;
    margin: 0 !important;
    padding: 10px 12px !important;

    box-sizing: border-box !important;
}

#ui-datepicker-div .ui-datepicker-buttonpane button,
.ui-datepicker .ui-datepicker-buttonpane button {
    width: auto !important;
    min-width: 80px !important;
    margin: 0 !important;
}

/* 4) Mobil */
@media (max-width: 700px) {
    #ui-datepicker-div,
    .ui-datepicker,
    #ui-datepicker-div.ui-datepicker-multi-2,
    .ui-datepicker.ui-datepicker-multi-2 {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        min-width: 0 !important;

        left: 6px !important;
        right: 6px !important;
    }

    #ui-datepicker-div .ui-datepicker-group,
    .ui-datepicker .ui-datepicker-group {
        float: none !important;
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
    }

    #ui-datepicker-div .ui-timepicker-div dl,
    .ui-datepicker .ui-timepicker-div dl {
        grid-template-columns: 80px minmax(0, 1fr) !important;
        gap: 8px 10px !important;
    }

    .ui-datepicker-trigger {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
    }
}

/* ==========================================================
   V22 — GLOBÁLIS osTicket DÁTUMTRIGGER JAVÍTÁS
   Hivatalos osTicket markup: input.dp + jQuery UI trigger.
   ========================================================== */

/* Minden osTicket dátummező közvetlen triggerének egységes megjelenése */
input.dp + .ui-datepicker-trigger,
input.hasDatepicker + .ui-datepicker-trigger,
input.dp + button,
input.hasDatepicker + button,
input.dp + img,
input.hasDatepicker + img {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    margin: 0 6px !important;
    padding: 0 !important;

    background: var(--mt-primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--mt-primary) !important;
    border-radius: var(--mt-radius) !important;

    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;

    vertical-align: middle !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* Hover / focus */
input.dp + .ui-datepicker-trigger:hover,
input.hasDatepicker + .ui-datepicker-trigger:hover,
input.dp + button:hover,
input.hasDatepicker + button:hover,
input.dp + img:hover,
input.hasDatepicker + img:hover,
input.dp + .ui-datepicker-trigger:focus,
input.hasDatepicker + .ui-datepicker-trigger:focus,
input.dp + button:focus,
input.hasDatepicker + button:focus {
    background: var(--mt-primary-hover) !important;
    color: #ffffff !important;
    border-color: var(--mt-primary-hover) !important;
    outline: none !important;
}

/* Ha a trigger gombon belül kép van */
input.dp + .ui-datepicker-trigger img,
input.hasDatepicker + .ui-datepicker-trigger img,
input.dp + button img,
input.hasDatepicker + button img {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
}

/* Ha maga a trigger egy img elem */
input.dp + img.ui-datepicker-trigger,
input.hasDatepicker + img.ui-datepicker-trigger,
input.dp + img,
input.hasDatepicker + img {
    object-fit: contain !important;
    padding: 10px !important;
    filter: none !important;
}

/* Dátum input és trigger maradjon optikailag egy sorban */
input.dp,
input.hasDatepicker {
    vertical-align: middle !important;
}

/* Disabled trigger */
input.dp:disabled + .ui-datepicker-trigger,
input.hasDatepicker:disabled + .ui-datepicker-trigger,
input.dp:disabled + button,
input.hasDatepicker:disabled + button,
input.dp:disabled + img,
input.hasDatepicker:disabled + img {
    background: var(--mt-surface-soft) !important;
    color: var(--mt-text-muted) !important;
    border-color: var(--mt-border-dark) !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

/* ==========================================================
   V23 — GLOBÁLIS STAFF GOMBKONTRASZT + DATEPICKER ALSÓ GOMBOK
   ========================================================== */

/* ----------------------------------------------------------
   1) Segéd-/másodlagos gombok: mindig legyen olvasható kontraszt
   ---------------------------------------------------------- */

#content .button.alt,
#content .button.secondary,
#content .action-button.alt,
#content .action-button.secondary,
#content button.alt,
#content button.secondary,
#content input[type="reset"],
#content .ui-button:not(.ui-state-disabled) {
    background: #ffffff !important;
    color: var(--mt-text-soft) !important;
    border: 1px solid var(--mt-border-dark) !important;
    text-shadow: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

#content .button.alt:hover,
#content .button.secondary:hover,
#content .action-button.alt:hover,
#content .action-button.secondary:hover,
#content button.alt:hover,
#content button.secondary:hover,
#content input[type="reset"]:hover,
#content .ui-button:not(.ui-state-disabled):hover,
#content .ui-button:not(.ui-state-disabled):focus {
    background: var(--mt-hover) !important;
    color: var(--mt-primary-dark) !important;
    border-color: var(--mt-text-muted) !important;
}

/* Disabled gombok: ne legyen fehér-fehéren */
#content button:disabled,
#content button[disabled],
#content .button.disabled,
#content .action-button.disabled,
#content input[type="button"]:disabled,
#content input[type="submit"]:disabled,
#content input[type="reset"]:disabled,
#content .ui-button.ui-state-disabled,
#content .ui-state-disabled {
    background: var(--mt-surface-soft) !important;
    color: var(--mt-text-muted) !important;
    border: 1px solid var(--mt-border-dark) !important;
    text-shadow: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* Ha disabled gombban ikon van, az se tűnjön el */
#content button:disabled i,
#content button[disabled] i,
#content .button.disabled i,
#content .action-button.disabled i,
#content .ui-state-disabled i {
    color: var(--mt-text-muted) !important;
    opacity: 1 !important;
}

/* ----------------------------------------------------------
   2) Rendszernaplók dátummezői melletti trigger/segédgombok
   ---------------------------------------------------------- */

#content input.dp + button,
#content input.hasDatepicker + button,
#content input.dp + .ui-datepicker-trigger,
#content input.hasDatepicker + .ui-datepicker-trigger,
#content input.dp + img.ui-datepicker-trigger,
#content input.hasDatepicker + img.ui-datepicker-trigger {
    background: var(--mt-primary) !important;
    color: #ffffff !important;
    border-color: var(--mt-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#content input.dp + button:hover,
#content input.hasDatepicker + button:hover,
#content input.dp + .ui-datepicker-trigger:hover,
#content input.hasDatepicker + .ui-datepicker-trigger:hover,
#content input.dp + img.ui-datepicker-trigger:hover,
#content input.hasDatepicker + img.ui-datepicker-trigger:hover {
    background: var(--mt-primary-hover) !important;
    color: #ffffff !important;
    border-color: var(--mt-primary-hover) !important;
}

/* ----------------------------------------------------------
   3) Datepicker Today / Done gombok — globálisan
   ---------------------------------------------------------- */

#ui-datepicker-div .ui-datepicker-buttonpane button,
.ui-datepicker .ui-datepicker-buttonpane button,
#ui-datepicker-div button.ui-datepicker-current,
#ui-datepicker-div button.ui-datepicker-close,
.ui-datepicker button.ui-datepicker-current,
.ui-datepicker button.ui-datepicker-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 84px !important;
    min-height: 38px !important;

    padding: 8px 14px !important;
    margin: 0 !important;

    background: var(--mt-primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--mt-primary) !important;
    border-radius: var(--mt-radius) !important;

    text-shadow: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

#ui-datepicker-div .ui-datepicker-buttonpane button:hover,
#ui-datepicker-div .ui-datepicker-buttonpane button:focus,
.ui-datepicker .ui-datepicker-buttonpane button:hover,
.ui-datepicker .ui-datepicker-buttonpane button:focus,
#ui-datepicker-div button.ui-datepicker-current:hover,
#ui-datepicker-div button.ui-datepicker-close:hover,
.ui-datepicker button.ui-datepicker-current:hover,
.ui-datepicker button.ui-datepicker-close:hover {
    background: var(--mt-primary-hover) !important;
    color: #ffffff !important;
    border-color: var(--mt-primary-hover) !important;
}

/* Valóban disabled Today / Done */
#ui-datepicker-div .ui-datepicker-buttonpane button.ui-state-disabled,
#ui-datepicker-div .ui-datepicker-buttonpane button:disabled,
.ui-datepicker .ui-datepicker-buttonpane button.ui-state-disabled,
.ui-datepicker .ui-datepicker-buttonpane button:disabled {
    background: var(--mt-surface-soft) !important;
    color: var(--mt-text-muted) !important;
    border-color: var(--mt-border-dark) !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

/* ----------------------------------------------------------
   4) Általános olvashatósági védelem világos staff-gombokra
   ---------------------------------------------------------- */

#content button[style*="background: white"],
#content button[style*="background:#fff"],
#content button[style*="background: #fff"],
#content .button[style*="background: white"],
#content .button[style*="background:#fff"],
#content .button[style*="background: #fff"] {
    color: var(--mt-text-soft) !important;
    text-shadow: none !important;
}

/* ==========================================================
   V24 — MAGYAR DATEPICKER GOMBOK + TASK MODAL CLOSE/SPACING
   ========================================================== */

/* 1) Datepicker alsó gombfeliratok magyarul */
#ui-datepicker-div button.ui-datepicker-current,
.ui-datepicker button.ui-datepicker-current {
    font-size: 0 !important;
}

#ui-datepicker-div button.ui-datepicker-current::after,
.ui-datepicker button.ui-datepicker-current::after {
    content: "Ma";
    font-size: 14px;
    font-weight: 600;
    color: inherit;
}

#ui-datepicker-div button.ui-datepicker-close,
.ui-datepicker button.ui-datepicker-close {
    font-size: 0 !important;
}

#ui-datepicker-div button.ui-datepicker-close::after,
.ui-datepicker button.ui-datepicker-close::after {
    content: "Kész";
    font-size: 14px;
    font-weight: 600;
    color: inherit;
}

/* 2) Új feladat modal: a bezáró ikon ne ütközzön a görgetősávval */
#popup:has(form[action*="task"]) .ui-dialog-titlebar-close,
#popup:has(form[action*="task"]) .dialog-close,
#popup:has(form[action*="task"]) .close-icon,
#popup:has(#taskForm) .ui-dialog-titlebar-close,
#popup:has(#taskForm) .dialog-close,
#popup:has(#taskForm) .close-icon,
.dialog:has(form[action*="task"]) .ui-dialog-titlebar-close,
.dialog:has(form[action*="task"]) .dialog-close,
.dialog:has(form[action*="task"]) .close-icon,
.ui-dialog:has(form[action*="task"]) .ui-dialog-titlebar-close,
.ui-dialog:has(form[action*="task"]) .dialog-close,
.ui-dialog:has(form[action*="task"]) .close-icon {
    top: 10px !important;
    right: 34px !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    z-index: 10 !important;
}

/* Hagyjunk fix helyet a scrollbar és a close ikon között */
#popup:has(form[action*="task"]) .content,
#popup:has(form[action*="task"]) .body,
#popup:has(form[action*="task"]) .dialog-content,
#popup:has(#taskForm) .content,
#popup:has(#taskForm) .body,
#popup:has(#taskForm) .dialog-content,
.dialog:has(form[action*="task"]) .content,
.ui-dialog:has(form[action*="task"]) .ui-dialog-content {
    padding-right: 34px !important;
    scrollbar-gutter: stable !important;
}

/* Mobilon is maradjon elkülönítve */
@media (max-width: 700px) {
    #popup:has(form[action*="task"]) .ui-dialog-titlebar-close,
    #popup:has(form[action*="task"]) .dialog-close,
    #popup:has(form[action*="task"]) .close-icon,
    #popup:has(#taskForm) .ui-dialog-titlebar-close,
    #popup:has(#taskForm) .dialog-close,
    #popup:has(#taskForm) .close-icon,
    .dialog:has(form[action*="task"]) .ui-dialog-titlebar-close,
    .dialog:has(form[action*="task"]) .dialog-close,
    .dialog:has(form[action*="task"]) .close-icon,
    .ui-dialog:has(form[action*="task"]) .ui-dialog-titlebar-close,
    .ui-dialog:has(form[action*="task"]) .dialog-close,
    .ui-dialog:has(form[action*="task"]) .close-icon {
        right: 28px !important;
    }
}