/* ============================================================
   Falcon UI overrides for BSS Worklines
   - Globálisan egységesíti a form-controlokat, gombokat, checkboxokat
   - DevExpress (ASPxTextBox, BootstrapButton, ASPxCheckBox) Falcon kinézet
   - Bootstrap 5 form-floating support
   - Töltse be a Master page-ekbe a theme.css UTÁN (azért, hogy felülírjon)
   ============================================================ */

/* ---------- 1) FORM-CONTROL (textbox, asp:TextBox) ---------- */
/* Bootstrap form-control alap — rounded, halvány határvonal, fókusz halo */
.form-control,
.form-select,
input[type="text"].form-control,
input[type="password"].form-control,
input[type="email"].form-control,
input[type="number"].form-control,
input[type="tel"].form-control,
input[type="url"].form-control,
input[type="search"].form-control,
textarea.form-control {
    border-radius: 0.5rem;
    border: 1px solid var(--falcon-input-border-color, #d8e2ef);
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.5;
    background-color: var(--falcon-input-bg, #fff);
    color: var(--falcon-input-color, #344050);
    box-shadow: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: #b6c1d2;
    box-shadow: 0 0 0 0.2rem rgba(44, 123, 229, 0.15);
    outline: 0;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #f9fafd;
    opacity: 0.85;
}

/* Méretvariánsok */
.form-control-sm { border-radius: 0.4rem; padding: 0.25rem 0.65rem; font-size: 0.8rem; }
.form-control-lg { border-radius: 0.6rem; padding: 0.6rem 1rem; font-size: 1rem; }

/* ---------- 2) DEVEXPRESS ASPxTextBox / Editors ---------- */
/* DevExpress generált input + wrapper Falcon kinézettel */
.dxeEditAreaSys,
.dxeEditArea,
.dxeEditArea_Material,
.dxeEditArea_Office365,
.dxeEditArea_Moderno {
    border-radius: 0.5rem !important;
    border: 1px solid #d8e2ef !important;
    padding: 0.4rem 0.85rem !important;
    background-color: #fff !important;
    color: #344050 !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

/* DX TextBox/Memo/SpinEdit/DateEdit wrapper */
.dxeTextBoxSys,
.dxeTextBox,
.dxeButtonEditSys,
.dxeButtonEdit,
table.dxeButtonEditSys {
    border-radius: 0.5rem !important;
    border: 1px solid #d8e2ef !important;
    background-color: #fff !important;
    box-shadow: none !important;
}

/* Fókusz állapot DevExpress editors */
.dxeFocused,
.dxeFocused .dxeEditAreaSys,
.dxeTextBoxSys.dxeFocused,
.dxeButtonEditSys.dxeFocused {
    border-color: #b6c1d2 !important;
    box-shadow: 0 0 0 0.2rem rgba(44, 123, 229, 0.15) !important;
    outline: 0 !important;
}

/* DevExpress disabled/readonly */
.dxeDisabled,
.dxeReadOnly {
    background-color: #f9fafd !important;
    opacity: 0.85 !important;
}

/* DevExpress combo dropdown elemei */
.dxeListBoxItem,
.dxeListBoxItemSys {
    padding: 0.4rem 0.85rem !important;
    border-radius: 0.35rem !important;
    font-size: 0.85rem !important;
}

/* ---------- 3) BUTTONS ---------- */
/* Bootstrap btn — Falcon stilus */
.btn {
    border-radius: 0.4rem;
    font-weight: 500;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
    box-shadow: none;
}

.btn-sm { border-radius: 0.35rem; padding: 0.25rem 0.7rem; font-size: 0.78rem; }
.btn-lg { border-radius: 0.5rem; padding: 0.6rem 1.4rem; font-size: 1rem; }

.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-secondary,
.btn-dark {
    border-width: 1px;
}

.btn-primary:hover,
.btn-primary:focus { box-shadow: 0 0 0 0.2rem rgba(44, 123, 229, 0.2); }
.btn-success:hover,
.btn-success:focus { box-shadow: 0 0 0 0.2rem rgba(0, 210, 122, 0.2); }
.btn-danger:hover,
.btn-danger:focus { box-shadow: 0 0 0 0.2rem rgba(230, 55, 87, 0.2); }

/* DevExpress BootstrapButton wrapper */
.dxbsButton {
    border-radius: 0.4rem !important;
}

/* Tisztán DevExpress ASPxButton (nem Bootstrap) */
.dxbButton,
.dxbButtonSys,
input.dxbButton[type="submit"] {
    border-radius: 0.4rem !important;
    padding: 0.4rem 1rem !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    border: 1px solid transparent !important;
    background-color: #2c7be5 !important;
    color: #fff !important;
    transition: background-color 0.15s, box-shadow 0.15s !important;
    box-shadow: none !important;
}

.dxbButton:hover,
.dxbButtonSys:hover {
    background-color: #2367bd !important;
    box-shadow: 0 0 0 0.2rem rgba(44, 123, 229, 0.2) !important;
}

/* DevExpress GridView command oszlop gombok */
.dxgvCommandColumnItem {
    border-radius: 0.35rem !important;
    padding: 0.2rem 0.55rem !important;
}

/* ---------- 4) CHECKBOXES ---------- */
/* Bootstrap 5 form-check */
.form-check-input {
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.2em;
    background-color: #fff;
    border: 1px solid #b6c1d2;
    border-radius: 0.3em !important;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.form-check-input:checked {
    background-color: #2c7be5;
    border-color: #2c7be5;
}

.form-check-input:focus {
    border-color: #b6c1d2;
    box-shadow: 0 0 0 0.2rem rgba(44, 123, 229, 0.15);
}

.form-check-input[type="radio"] {
    border-radius: 50% !important;
}

.form-check-label {
    color: #344050;
    font-size: 0.85rem;
    padding-left: 0.25rem;
    cursor: pointer;
}

/* Switch (form-switch) */
.form-switch .form-check-input {
    border-radius: 2em !important;
    width: 2em;
}

/* ---------- 5) DEVEXPRESS ASPxCheckBox ---------- */
/* DX checkbox span és input együtt — Falcon look */
.dxeBase_Theme .dxICheckBox,
.dxICheckBox,
.dxICheckBox_Theme {
    border-radius: 0.3rem !important;
}

.dxichSys {
    border-radius: 0.3rem !important;
    border: 1px solid #b6c1d2 !important;
    background-color: #fff !important;
    width: 1.1em !important;
    height: 1.1em !important;
    transition: background-color 0.15s, border-color 0.15s !important;
}

/* Checked állapot a span-en */
.dxICheckBox.dxichChecked .dxichSys,
.dxichChecked .dxichSys,
.dxichSys.dxichChecked {
    background-color: #2c7be5 !important;
    border-color: #2c7be5 !important;
}

/* DX checkbox label */
.dxeBase_Theme.dxICheckBox span,
.dxICheckBox span {
    color: #344050 !important;
    font-size: 0.85rem !important;
    padding-left: 0.4rem !important;
}

/* ---------- 6) FORM-FLOATING (Bootstrap 5) ---------- */
.form-floating > .form-control,
.form-floating > .form-select {
    height: calc(3.25rem + 2px);
    padding: 1rem 0.85rem;
}

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
}

.form-floating > label {
    padding: 1rem 0.85rem;
    color: #6c757d;
    font-size: 0.85rem;
    border: 0;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    opacity: 0.7;
    transform: scale(0.78) translateY(-0.5rem) translateX(0.15rem);
}

/* ---------- 7) FORM-LABEL ---------- */
.form-label {
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
    color: #344050;
}

/* ---------- 8) INPUT GROUP ---------- */
.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text {
    border-radius: 0.5rem;
}

.input-group > :first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > :last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-text {
    background-color: #f9fafd;
    border: 1px solid #d8e2ef;
    color: #6c757d;
    font-size: 0.85rem;
}

/* ---------- 9) VALIDATION / IS-INVALID ---------- */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #e63757;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(230, 55, 87, 0.15);
}

.invalid-feedback {
    color: #e63757;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* ---------- 10) SELECT (asp:DropDownList renderel <select>-et) ---------- */
select.form-control,
select.form-select {
    border-radius: 0.5rem;
    padding: 0.45rem 2rem 0.45rem 0.85rem;
    border: 1px solid #d8e2ef;
    background-color: #fff;
    font-size: 0.85rem;
}

/* ---------- 11) JELSZÓ TOGGLE (Login/Register-ben használt minta) ---------- */
.input-wrapper {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #94a3b8;
    background: transparent;
    border: 0;
    padding: 0;
    z-index: 3;
}

.toggle-password:hover { color: #475569; }

/* Form-floating-ben a toggle picit feljebb (mert a textbox magasabb) */
.form-floating .toggle-password {
    top: 50%;
    right: 0.85rem;
}

/* ---------- 12) CARD (Falcon look — körítés a form köré) ---------- */
.card {
    border: 1px solid #e3e6f0;
    border-radius: 0.5rem;
    box-shadow: 0 0.1rem 0.35rem 0 rgba(50, 50, 93, 0.05);
}

/* ============================================================
   FONT AWESOME CSS-ONLY KOMPATIBILITÁS
   A Falcon theme.css alapból FA SVG-with-JS-szel készült:
     .fa-icon-wait { opacity: 0 }
     .fontawesome-i2svg-active .fa-icon-wait { opacity: 1 }
   A FA JS adta volna hozzá a body-hez a 'fontawesome-i2svg-active'
   osztályt, miután SVG-re konvertálta az ikonokat.
   De a projekt CSS-only webfontot használ (font-awesome/6.7.2/all.min.css),
   ezért a JS sosem fut le, az ikonok láthatatlanok maradnak.
   Felülírjuk hogy mindig láthatóak legyenek.
   ============================================================ */
.fa-icon-wait,
.fa-icon-wait > .fas,
.fa-icon-wait > .far,
.fa-icon-wait > .fab,
.fa-icon-wait > .fa {
    opacity: 1 !important;
    visibility: visible !important;
}

/* data-fa-transform="shrink-N" attribútumokat a CSS-only webfont
   ignorálja, ezért közelítő font-size csökkentéssel szimuláljuk.
   Csak akkor érvényes, ha NINCS inline font-size override. */
[data-fa-transform*="shrink-2"]:not([style*="font-size"]) { font-size: 0.85em; }
[data-fa-transform*="shrink-3"]:not([style*="font-size"]) { font-size: 0.78em; }
[data-fa-transform*="shrink-4"]:not([style*="font-size"]) { font-size: 0.70em; }
[data-fa-transform*="shrink-6"]:not([style*="font-size"]) { font-size: 0.55em; }

/* ---------- 13a) NAVBAR ICON SOR — ikonok közti távolság ---------- */
/* A felső navbar ikonsorában (theme switcher, harang, nyelv, avatar)
   szellősebb gap, hogy ne lógjanak össze a kattintási területek. */
.navbar-nav-icons {
    gap: 0.6rem;
    align-items: center;
}

/* Fallback olyan böngészőkre, ahol a flex-gap támogatás gyenge */
@supports not (gap: 0.6rem) {
    .navbar-nav-icons > .nav-item + .nav-item {
        margin-left: 0.6rem;
    }
}

/* A theme-switcher li-ének padding-jét hangoljuk, hogy konzisztens legyen
   a többi ikonnal (eredetileg ps-2 pe-0 volt, ami aszimmetrikus). */
.navbar-nav-icons > li.nav-item.ps-2.pe-0 {
    padding-left: 0 !important;
}

/* ---------- 13) NOTIFICATION BELL — pulse animáció új notif esetén ---------- */
@keyframes wl-bell-shake {
    0%, 100% { transform: rotate(0); }
    10%, 30%, 50% { transform: rotate(-12deg); }
    20%, 40%, 60% { transform: rotate(12deg); }
    70% { transform: rotate(0); }
}

.wl-bell-pulse > span.fas.fa-bell {
    animation: wl-bell-shake 0.9s ease-in-out infinite;
    color: #e63757 !important;
    transform-origin: 50% 0;
}

/* Olvasatlan notif tétel a dropdown-ban — bal oldalon kék jelzés */
.wl-not-unread {
    background-color: #f0f6ff !important;
    border-left: 3px solid #2c7be5 !important;
}

.wl-not-unread .fw-semibold {
    color: #1f4e79 !important;
}

/* Notif item hover */
.wl-not-item {
    padding: 0.6rem 0.85rem !important;
    transition: background-color 0.15s ease;
}

.wl-not-item:hover {
    background-color: #f9fafd;
}

/* ============================================================
   14) NOTIFICATIONS PAGE — kártyás megjelenítés
   ============================================================ */

.notifications-page .notif-kpi-card {
    border-radius: 0.75rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.notifications-page .notif-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(31, 45, 65, 0.08) !important;
}

.notifications-page .notif-kpi-icon {
    font-size: 1.6rem;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    background-color: #f9fafd;
}

.notifications-page .notif-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.notifications-page .notif-kpi-label {
    font-size: 0.78rem;
    color: var(--bs-secondary);
    margin-top: 2px;
}

/* --- Filter pill-ek --- */
.notifications-page .notif-filter-group .btn {
    border-radius: 999px !important;
    padding: 0.3rem 0.85rem;
    font-weight: 500;
    border-color: #d8e2ef;
    color: #344050;
}

.notifications-page .notif-filter-group .btn + .btn {
    margin-left: 4px;
}

.notifications-page .notif-filter-group .btn.active {
    background-color: #2c7be5 !important;
    border-color: #2c7be5 !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(44, 123, 229, 0.25);
}

.notifications-page .notif-filter-group .btn:hover:not(.active) {
    background-color: #f1f3fa;
}

/* --- Notif lista item --- */
.notifications-page .notif-list {
    border-radius: 0.75rem;
    overflow: hidden;
}

.notifications-page .notif-item {
    padding: 1rem 1.25rem;
    border-left: 4px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    cursor: default;
}

.notifications-page .notif-item:hover {
    background-color: #f9fafd;
}

.notifications-page .notif-item.notif-unread {
    background-color: #f0f6ff;
    border-left-color: #2c7be5;
}

.notifications-page .notif-item.notif-unread:hover {
    background-color: #e6f1fb;
}

.notifications-page .notif-item.notif-important {
    border-left-color: #f5803e;
}

.notifications-page .notif-item.notif-unread.notif-important {
    border-left-color: #f5803e;
    background-color: #fff5ec;
}

/* --- Avatar / ikon --- */
.notifications-page .notif-avatar {
    width: 44px;
    height: 44px;
}

.notifications-page .notif-avatar-img {
    width: 44px;
    height: 44px;
    object-fit: cover;
}

.notifications-page .notif-avatar-icon,
.notifications-page .notif-avatar-initials {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
}

.notifications-page .notif-avatar-icon i {
    font-size: 1.1rem;
}

/* --- Tartalom --- */
.notifications-page .notif-sender {
    font-size: 0.9rem;
    color: #344050;
}

.notifications-page .notif-subject {
    font-size: 0.92rem;
    color: #232e3c;
    line-height: 1.4;
}

.notifications-page .notif-item.notif-unread .notif-subject {
    color: #0c2964;
}

.notifications-page .notif-preview {
    font-size: 0.82rem;
    line-height: 1.45;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notifications-page .notif-date {
    font-size: 0.75rem;
    white-space: nowrap;
}

/* --- Akció gombok (csak hover-en jelennek meg desktop-on) --- */
.notifications-page .notif-actions {
    opacity: 0.4;
    transition: opacity 0.15s ease;
    display: flex;
    gap: 2px;
}

.notifications-page .notif-item:hover .notif-actions {
    opacity: 1;
}

.notifications-page .notif-actions .btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    text-decoration: none;
}

.notifications-page .notif-actions .btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* --- "Olvasott" → a check gombot elrejtjük --- */
.notifications-page .notif-item:not(.notif-unread) .notif-mark-btn {
    display: none;
}

/* --- Üres állapot --- */
.notifications-page .notif-empty {
    padding: 3rem 1rem;
}

.notifications-page .notif-empty-icon {
    font-size: 3rem;
    opacity: 0.3;
    display: block;
}

/* --- Min-width 0 a flexgrow-os tartalomhoz, hogy a text-overflow működjön --- */
.notifications-page .min-width-0 {
    min-width: 0;
}

/* --- Mobile: akció gombok mindig láthatóak --- */
@media (max-width: 575.98px) {
    .notifications-page .notif-actions {
        opacity: 1;
    }
    .notifications-page .notif-item {
        padding: 0.75rem 0.85rem;
    }
}