/*
 * SzervizX - modern téma a Bootstrap 5 felülethez (UI_THEME=bs5)
 * A régi téma (skin/2/css/styles-bs5.css) után töltődik be, és azt frissíti: a régi színek harsányabb árnyalatai,
 * kerekebb, levegősebb elemek, jól elkülönülő beviteli mezők. Elrendezést (méretek, pozíciók) csak kis mértékben módosít.
 */

:root {
    --szx-primary: #1b8ad0;
    --szx-primary-dark: #1170ad;
    --szx-primary-soft: #e6f3fc;
    --szx-success: #5cb82f;
    --szx-success-dark: #4a9a24;
    --szx-info: #20b6e3;
    --szx-info-dark: #1597bf;
    --szx-warning: #f5a524;
    --szx-danger: #e84a2b;
    --szx-danger-dark: #c93a1e;
    --szx-default: #848f9c;
    --szx-dark: #2a2f35;
    --szx-frame: #262b31;
    --szx-frame-light: #343a41;
    --szx-content: #f3f5f8;
    --szx-surface: #ffffff;
    --szx-border: #dbe1e8;
    --szx-text: #2a2f35;
    --szx-muted: #6b7785;
    --szx-label: #5b6673;
    /* beviteli mezők: a beírt adat mélykék, félkövér, enyhén színezett háttéren */
    --szx-input-color: #0d3f6b;
    --szx-input-bg: #f7fbff;
    --szx-input-border: #a9b8c8;
    --szx-input-border-hover: #7f97b0;
    --szx-input-placeholder: #9aa5b1;
    --szx-input-readonly-bg: #edf0f4;
    --szx-input-readonly-color: #46515e;
    --szx-radius: 8px;
    --szx-radius-lg: 12px;
    --szx-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --szx-shadow: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .06);
    --szx-shadow-lg: 0 20px 45px rgba(16, 24, 40, .22), 0 6px 14px rgba(16, 24, 40, .1);
    --szx-focus-ring: 0 0 0 3px rgba(27, 138, 208, .22);
    --bs-body-font-family: "Inter", "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Alap ---------- */
html, body {
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    color: var(--szx-text);
    background-color: var(--szx-frame);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--bs-body-font-family);
    color: #1f2630;
    text-shadow: none;
    letter-spacing: -.01em;
}
a { color: var(--szx-primary); }
a:hover, a:focus { color: var(--szx-primary-dark); }
::selection { background: rgba(27, 138, 208, .2); }
:focus-visible { outline: 2px solid var(--szx-primary); outline-offset: 2px; }
legend {
    color: #1f2630;
    font-weight: 700;
    border-bottom: 2px solid var(--szx-border);
    padding-bottom: 8px;
}
hr { border-color: var(--szx-border); opacity: 1; }

/* Görgetősáv */
* { scrollbar-width: thin; scrollbar-color: #b9c3ce transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #b9c3ce; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: #94a3b4; }

/* ---------- Keret: fejléc, oldalmenü, tartalom ---------- */
.navbar.navbar-default {
    background: var(--szx-surface);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .06), 0 6px 20px rgba(16, 24, 40, .12) !important;
    text-transform: none;
}
.navbar-default .navbar-content .btn { margin-right: 3px; }
.navbar-default .navbar-nav > li > a { color: var(--szx-text); font-weight: 600; }
.navbar-default .navbar-nav > li > .dropdown-menu,
.navbar-default .navbar-nav .dropdown-menu {
    background: var(--szx-surface);
    border: 1px solid var(--szx-border);
    border-radius: var(--szx-radius-lg);
    box-shadow: var(--szx-shadow-lg);
    padding: 6px;
    text-transform: none;
}
.navbar-default .navbar-nav .dropdown-menu > li > a {
    color: var(--szx-text);
    border-radius: 6px;
    padding: 8px 12px;
}
.navbar-default .navbar-nav .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .dropdown-menu > li > a:focus {
    color: #fff;
    background: var(--szx-info);
}
.navbar-default .navbar-nav .dropdown-menu .divider { background-color: var(--szx-border); margin: 6px 0; }

.content-wrapper {
    background: var(--szx-content);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 8px 30px rgba(0, 0, 0, .35);
}

/* Oldalmenü */
.responsive-admin-menu ul li a {
    letter-spacing: .02em;
    font-weight: 500;
    text-shadow: none;
    border-left: 3px solid transparent;
    transition: background .15s, border-color .15s, color .15s;
}
.responsive-admin-menu ul li a:hover {
    background: rgba(255, 255, 255, .08);
    border-left-color: var(--szx-info);
}
.responsive-admin-menu #menu li a.downarrow {
    background: rgba(255, 255, 255, .12);
    border-left-color: var(--szx-primary);
}
.responsive-admin-menu #menu li a.submenu.active {
    color: #1f2630;
    background-color: var(--szx-content);
    border-left-color: var(--szx-primary);
    box-shadow: none;
    font-weight: 700;
}
.responsive-admin-menu #menu li:first-child a.active { box-shadow: 5px 0 0 0 var(--szx-content); }
.responsive-admin-menu #menu li a.submenu.active .badge { background: var(--szx-primary); }
.responsive-admin-menu .badge { border-radius: 10px; font-weight: 700; }

/* ---------- Gombok ---------- */
/* a régi téma közvetlenül állítja a gombok színeit; a BS5-ben is létező változatokat a BS5 változókra (harsány színek) vezetjük vissza,
   a téma egyedi gombjait (pl. .btn-user) nem érintjük */
.btn-white { --bs-btn-color: var(--szx-text); --bs-btn-bg: #fff; --bs-btn-border-color: var(--szx-border); --bs-btn-hover-color: var(--szx-primary-dark); --bs-btn-hover-bg: var(--szx-primary-soft); --bs-btn-hover-border-color: #b9d9ef; --bs-btn-active-color: var(--szx-primary-dark); --bs-btn-active-bg: #d6ebfa; --bs-btn-active-border-color: #9ccbea; --bs-btn-focus-shadow-rgb: 27, 138, 208; --bs-btn-disabled-color: var(--szx-muted); --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: var(--szx-border); }
.btn {
    border-radius: var(--szx-radius);
    border: 1px solid var(--bs-btn-border-color, transparent);
    font-family: var(--bs-body-font-family);
    font-weight: 600;
    letter-spacing: .01em;
    transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s, color .15s;
}
.btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-dark, .btn-light, .btn-default, .btn-white, .btn-link) {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}
.btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-dark, .btn-light, .btn-default, .btn-white, .btn-link):hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    text-decoration: none;
}
.btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-dark, .btn-light, .btn-default, .btn-white, .btn-link):focus-visible {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    box-shadow: 0 0 0 3px rgba(var(--bs-btn-focus-shadow-rgb), .35);
    outline: 0;
}
.btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-dark, .btn-light, .btn-default, .btn-white, .btn-link):active, .btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-dark, .btn-light, .btn-default, .btn-white, .btn-link).active, .show > .btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-dark, .btn-light, .btn-default, .btn-white, .btn-link).dropdown-toggle, .open > .btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-dark, .btn-light, .btn-default, .btn-white, .btn-link).dropdown-toggle {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .12);
}
.btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-dark, .btn-light, .btn-default, .btn-white, .btn-link):disabled, .btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-dark, .btn-light, .btn-default, .btn-white, .btn-link).disabled, fieldset:disabled .btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-dark, .btn-light, .btn-default, .btn-white, .btn-link) {
    color: var(--bs-btn-disabled-color);
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    opacity: .6;
}
.btn-primary, .btn-success, .btn-info, .btn-danger, .btn-default, .btn-dark, .btn-secondary {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover, .btn-danger:hover, .btn-warning:hover, .btn-default:hover, .btn-dark:hover {
    box-shadow: 0 4px 10px rgba(16, 24, 40, .18);
}
.btn-xs, .btn-group-xs > .btn, .btn-sm, .btn-group-sm > .btn { border-radius: 6px; }
.btn-lg, .btn-group-lg > .btn { border-radius: 10px; }
.btn-link { box-shadow: none; }
.btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn:nth-child(n+2), .btn-group > :not(.btn-check) + .btn, .btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn i { font-weight: inherit; }

/* ---------- Beviteli mezők: a beírt adat jól elkülönül ---------- */
.form-control,
input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"],
input[type="password"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"],
input:not([type]), select, textarea {
    color: var(--szx-input-color);
    font-weight: 600;
    font-family: var(--bs-body-font-family);
}
.form-control {
    background-color: var(--szx-input-bg);
    border: 1.5px solid var(--szx-input-border);
    border-radius: var(--szx-radius);
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, .05);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-control:hover:not(:focus):not([readonly]):not([disabled]) {
    border-color: var(--szx-input-border-hover);
}
.form-control:focus {
    color: var(--szx-input-color);
    background-color: #fff;
    border-color: var(--szx-primary);
    box-shadow: var(--szx-focus-ring);
    outline: 0;
}
.form-control::placeholder, input::placeholder, textarea::placeholder {
    color: var(--szx-input-placeholder);
    font-weight: 400;
    opacity: 1;
}
.form-control[readonly], .form-control[disabled], fieldset[disabled] .form-control, .form-control:disabled {
    color: var(--szx-input-readonly-color);
    background-color: var(--szx-input-readonly-bg);
    border-color: #d3dae2;
    border-style: dashed;
    box-shadow: none;
}
select option { color: var(--szx-text); font-weight: 500; }
select option:checked { font-weight: 700; }
textarea.form-control { line-height: 1.5; }
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--szx-primary);
    width: 15px;
    height: 15px;
    cursor: pointer;
}
/* címkék: visszafogottabbak, hogy a mezők tartalma legyen a hangsúlyos */
label, .control-label {
    color: var(--szx-label);
    font-weight: 600;
    font-size: .95rem;
}
.checkbox label, .radio label, .checkbox-inline, .radio-inline { color: var(--szx-text); font-weight: 500; font-size: 1rem; }
.input-group-addon, .input-group-text {
    background: #eaf0f6;
    color: var(--szx-label);
    border: 1.5px solid var(--szx-input-border);
    font-weight: 600;
}
.input-group > .form-control:focus { z-index: 3; }
.help-block { color: var(--szx-muted); }
/* külső komponensek kiválasztott értéke ugyanúgy hangsúlyos */
.select2-container .select2-selection__rendered, .select2-container .select2-chosen, .select2-container .select2-choice > .select2-chosen,
.selectize-input > .item, .typeahead__field input {
    color: var(--szx-input-color) !important;
    font-weight: 600 !important;
}
.select2-container .select2-selection, .select2-container .select2-choice, .selectize-input {
    border-radius: var(--szx-radius) !important;
    border-color: var(--szx-input-border) !important;
    background-color: var(--szx-input-bg) !important;
}

/* ---------- Panel, well, kártya ---------- */
.panel {
    border: 1px solid var(--szx-border);
    border-radius: var(--szx-radius-lg);
    box-shadow: var(--szx-shadow-sm);
    overflow: visible;
}
.panel > .panel-heading {
    border-top-left-radius: calc(var(--szx-radius-lg) - 1px);
    border-top-right-radius: calc(var(--szx-radius-lg) - 1px);
    padding: 11px 15px;
}
.panel-default > .panel-heading { background: #6b7785; color: #fff; border-color: #6b7785; }
.panel-primary { border-color: rgba(27, 138, 208, .35); }
.panel-primary > .panel-heading { background: linear-gradient(135deg, var(--szx-primary), var(--szx-primary-dark)); }
.panel-success > .panel-heading { background: linear-gradient(135deg, var(--szx-success), var(--szx-success-dark)); }
.panel-info > .panel-heading { background: linear-gradient(135deg, var(--szx-info), var(--szx-info-dark)); }
.panel-warning > .panel-heading { background: var(--szx-warning); color: #2a2f35; }
.panel-danger > .panel-heading { background: linear-gradient(135deg, var(--szx-danger), var(--szx-danger-dark)); }
.panel-footer { border-bottom-left-radius: calc(var(--szx-radius-lg) - 1px); border-bottom-right-radius: calc(var(--szx-radius-lg) - 1px); }
section.panel { background: var(--szx-surface); }
.well {
    background: var(--szx-surface);
    border: 1px solid var(--szx-border);
    border-radius: var(--szx-radius-lg);
    box-shadow: var(--szx-shadow-sm);
}
.card { border-color: var(--szx-border); border-radius: var(--szx-radius-lg); box-shadow: var(--szx-shadow-sm); }

/* ---------- Táblázatok ---------- */
.table {
    --bs-table-border-color: #e3e8ee;
    --bs-table-striped-bg: #f7f9fc;
    --bs-table-hover-bg: #eaf5fd;
    background: var(--szx-surface);
}
.table > thead > tr > th {
    background: #4f5964;
    color: #fff;
    font-size: .85em;
    letter-spacing: .04em;
    font-weight: 700;
    border: 1px solid #4f5964;
    border-bottom: 3px solid var(--szx-primary);
    padding: 8px 10px;
}
.table > tbody > tr > td, .table > tbody > tr > th { vertical-align: middle; }
.table-bordered { border-radius: var(--szx-radius); }
.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: #eaf5fd; }
.table.airtable > thead > tr > th { background: transparent; color: #4f5964; border-bottom: 3px solid var(--szx-primary); }
.table-responsive { border-radius: var(--szx-radius); }

/* ---------- Modális ablakok ---------- */
.modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: var(--szx-shadow-lg);
    overflow: hidden;
}
.modal-header {
    background: #f6f8fb;
    border-bottom: 1px solid var(--szx-border);
    padding: 14px 20px;
}
.modal-header strong, .modal-title { font-size: 1.15rem; font-weight: 700; color: #1f2630; }
.modal-header .close {
    width: 32px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    opacity: .55;
    text-shadow: none;
    transition: background .15s, opacity .15s;
}
.modal-header .close:hover { background: rgba(0, 0, 0, .08); opacity: 1; }
.modal-footer { border-top: 1px solid var(--szx-border); background: #fafbfc; padding: 12px 20px; margin-top: 0; }
.modal-backdrop.show, .modal-backdrop.in { opacity: .5; }
.modal-backdrop { background-color: #11161c; }

/* ---------- Lenyíló menük, címkék, jelvények ---------- */
.dropdown-menu {
    --bs-dropdown-bg: #fff;
    background-color: #fff;
    border: 1px solid var(--szx-border);
    border-radius: var(--szx-radius-lg);
    box-shadow: var(--szx-shadow-lg);
    padding: 6px;
}
.dropdown-menu > li > a, .dropdown-item { border-radius: 6px; }
.dropdown-menu > li > a:hover, .dropdown-item:hover { background: var(--szx-primary-soft); color: var(--szx-primary-dark); }
.label {
    border-radius: 999px;
    padding: .25em .7em;
    letter-spacing: .03em;
    text-transform: none;
}
.label-success { background-color: var(--szx-success); }
.label-primary { background-color: var(--szx-primary); }
.label-info { background-color: var(--szx-info); }
.label-warning { background-color: var(--szx-warning); color: #2a2f35; }
.label-danger { background-color: var(--szx-danger); }
.label-default { background-color: var(--szx-default); }
.badge { border-radius: 999px; font-weight: 700; }

/* ---------- Értesítések, tabok, listák ---------- */
.alert {
    border: 0;
    border-left: 4px solid currentColor;
    border-radius: var(--szx-radius);
    box-shadow: var(--szx-shadow-sm);
}
.alert-success { background: #ecf8e5; color: #2f6b12; }
.alert-info { background: #e3f6fc; color: #0d6683; }
.alert-warning { background: #fff4e0; color: #8a5600; }
.alert-danger { background: #fdebe7; color: #9c2a12; }

.nav-tabs { border-bottom: 2px solid var(--szx-border); }
.nav-tabs > li { margin-bottom: -2px; }
.nav-tabs > li > a {
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: var(--szx-muted);
    font-weight: 600;
    background: transparent;
}
.nav-tabs > li > a:hover { color: var(--szx-primary); background: transparent; border-bottom-color: #b9d9ef; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus, .nav-tabs .nav-link.active {
    color: var(--szx-primary);
    background: transparent;
    border: 0;
    border-bottom: 3px solid var(--szx-primary);
}
.nav-pills > li > a { border-radius: var(--szx-radius); font-weight: 600; }

.list-group-item { border-color: var(--szx-border); }
.list-group-item:first-child { border-top-left-radius: var(--szx-radius-lg); border-top-right-radius: var(--szx-radius-lg); }
.list-group-item:last-child { border-bottom-left-radius: var(--szx-radius-lg); border-bottom-right-radius: var(--szx-radius-lg); }
a.list-group-item:hover { background: var(--szx-primary-soft); }

.pagination > li > a, .pagination > li > span { border-color: var(--szx-border); font-weight: 600; }
.pagination > .active > a, .pagination > .active > span { background: var(--szx-primary); border-color: var(--szx-primary); }
.progress { border-radius: 999px; background: #e3e8ee; }

/* jQuery UI datepicker */
.ui-datepicker {
    border: 1px solid var(--szx-border) !important;
    border-radius: var(--szx-radius-lg) !important;
    box-shadow: var(--szx-shadow-lg);
    padding: 6px !important;
    font-family: var(--bs-body-font-family) !important;
}
.ui-datepicker .ui-datepicker-header { border-radius: var(--szx-radius) !important; }
.ui-datepicker td a.ui-state-active, .ui-datepicker td a.ui-state-highlight { border-radius: 6px; }

/* Tooltip: BS5 alatt a jQuery UI tooltipje jelenik meg (a jquery-ui.css nincs betöltve), fekete háttérrel */
.ui-tooltip { position: absolute; z-index: 10000; max-width: 320px; padding: 6px 10px; background: #111 !important; color: #fff !important; border: 0 !important; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); font-size: 12.5px; font-weight: 500; line-height: 1.4; text-align: center; pointer-events: none; }
.ui-tooltip .ui-tooltip-content { color: #fff !important; }
.ui-helper-hidden-accessible { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.tooltip { --bs-tooltip-bg: #111; --bs-tooltip-color: #fff; }

/* Nyomtatás: a modern hatások nélkül */
@media print {
    .content-wrapper, .panel, .well, .modal-content { box-shadow: none !important; }
}