/*
    IT ART — "Obsidian Glass" theme for HESK 3
    Glassmorphism + deep space gradient + IT ART brand colors
*/

/* ─── CSS VARIABLES ─────────────────────────────────────────────── */
:root {
    --primary: #231A84;
    --secondary: #08B786;
    --tertiary: #03CF86;

    --main-background: #0a0913;
    --surface: rgba(28, 26, 46, 0.75);

    --font__pri-clr: #ffffff;
    --font__sec-clr: #b8b6d4;

    --input-bg: rgba(37, 35, 64, 0.85);
    --input-clr: #f0efff;

    --radio__bg: rgba(37, 35, 64, 0.85);
    --radio__fill-clr: var(--secondary);
    --radio__hover-bg: rgba(35, 26, 132, 0.5);

    --shadow-1: rgba(0, 0, 0, 0.6);
    --shadow-1-hsla: 247, 40%, 5%;

    --header__bg: var(--primary);
    --header_nav__clr: #ffffff;
    --header_nav__hover_clr: var(--tertiary);
    --header_profile__clr: #ffffff;
    --header_profile__menu-bg: #1c1a2e;
    --header_profile__user-avatar-bg: var(--secondary);

    --link__pri-clr: var(--tertiary);
    --link__pri-hover-clr: var(--secondary);
    --link__sec-clr: var(--secondary);
    --link__sec-hover-clr: var(--tertiary);

    --breadcrumbs__a-clr: var(--tertiary);
    --breadcrumbs__a-hover-clr: var(--secondary);

    --navlink__bg: rgba(28, 26, 46, 0.7);
    --navlink__clr: var(--font__sec-clr);
    --navlink__hover-bg: rgba(35, 26, 132, 0.35);
    --navlink__title-clr: var(--tertiary);

    --icon_circle__clr: #ffffff;
    --icon_circle__bg: var(--secondary);
    --navlink_icon_hover__clr: #ffffff;
    --navlink_icon_hover__bg: var(--primary);

    --notification__clr: var(--font__pri-clr);

    --search__clr: #ffffff;
    --search__bg: var(--primary);
    --search__input-bg: rgba(37, 35, 64, 0.85);
    --search__icon-fill: var(--tertiary);

    --table_row__bg: rgba(35, 26, 132, 0.12);
    --table_row__bg-even: rgba(8, 183, 134, 0.06);
    --table_row__bg-hover: rgba(8, 183, 134, 0.1);

    --ticket_body__bg: rgba(28, 26, 46, 0.8);
    --ticket_response__bg: rgba(8, 183, 134, 0.06);

    --preview__clr: var(--font__sec-clr);
    --preview__bg: rgba(28, 26, 46, 0.7);
    --preview__border-clr: rgba(255, 255, 255, 0.07);
    --preview__hover-bg: rgba(35, 26, 132, 0.3);
    --preview__title-clr: var(--tertiary);

    --suggest_preview__bg: rgba(28, 26, 46, 0.7);
    --suggest_preview__clr: var(--font__sec-clr);
    --suggest_preview__hover-bg: rgba(35, 26, 132, 0.3);
    --suggest_preview__title-clr: var(--tertiary);

    --btn__bg-clr-pri: var(--secondary);
    --btn__clr-pri: #ffffff;
    --btn__border-clr-pri: var(--tertiary);

    --dropdown__bg: #1c1a2e;
    --dropdown__clr: var(--font__pri-clr);
    --dropdown__border-clr: rgba(255, 255, 255, 0.1);
    --dropdown__hover-bg: rgba(35, 26, 132, 0.5);
    --dropdown__hover-clr: #ffffff;

    --datepicker_btn__bg: var(--secondary);
    --datepicker_btn__clr: #ffffff;
    --datepicker__bg: #1c1a2e;
    --datepicker__clr: var(--tertiary);

    --success: #38bc7d;
    --success-2: rgba(28, 26, 46, 0.8);
    --error: #e64342;
    --error-2: rgba(28, 26, 46, 0.8);
    --warning: #eeb707;
    --warning-2: rgba(28, 26, 46, 0.8);
    --info: var(--tertiary);
    --info-2: rgba(28, 26, 46, 0.8);
    --info-3: #3a3a4a;

    --modal_body__bg: #1c1a2e;
}

:root {
    --btn_blue_border__border-clr: var(--btn_full_border-clr) !important;
    --btn_blue_border__clr: var(--btn_full_clr) !important;
    --btn_blue_border__bg: var(--btn_full_bg) !important;
    --btn_blue_border__hover_bg: var(--btn_full__hover_bg) !important;
    --datepicker_cell__selected-clr: #ffffff !important;
}

/* ─── BACKGROUND — deep space gradient ──────────────────────────── */
body.cust-help {
    background:
        radial-gradient(ellipse at 15% 40%, rgba(35, 26, 132, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 70%, rgba(8, 183, 134, 0.12) 0%, transparent 45%),
        linear-gradient(160deg, #0e0c1e 0%, #0a0913 40%, #060d18 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

/* ─── HEADER ─────────────────────────────────────────────────────── */
.header {
    background: linear-gradient(135deg, #231A84 0%, #1a1260 100%) !important;
    border-bottom: 2px solid rgba(8, 183, 134, 0.6) !important;
    box-shadow:
        0 4px 30px rgba(8, 183, 134, 0.15),
        0 1px 0 rgba(255,255,255,0.05) !important;
}

.header__logo {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    color: #ffffff !important;
    letter-spacing: 0.06em !important;
    text-decoration: none !important;
}

.header .header__nav .profile__user .profile__menu .profile--logout a {
    color: var(--btn_full_clr);
}

/* ─── BREADCRUMBS ────────────────────────────────────────────────── */
.breadcrumbs {
    background: rgba(35, 26, 132, 0.2) !important;
    border-bottom: 1px solid rgba(8, 183, 134, 0.15) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* ─── SEARCH / HERO SECTION ─────────────────────────────────────── */
.help-search {
    padding: 3.5rem 0 2rem !important;
    text-align: center;
}

.search__title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
    text-shadow: 0 0 40px rgba(8, 183, 134, 0.3) !important;
}

/* ─── NAV CARDS (Submit ticket, My tickets) ──────────────────────── */
.navlink {
    background: rgba(28, 26, 46, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

.navlink::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #08B786, #03CF86, #231A84) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
}

.navlink:hover {
    background: rgba(35, 26, 132, 0.35) !important;
    border-color: rgba(8, 183, 134, 0.35) !important;
    box-shadow:
        0 8px 32px rgba(8, 183, 134, 0.2),
        0 0 0 1px rgba(8, 183, 134, 0.15) !important;
    transform: translateY(-3px) !important;
}

.navlink:hover::after {
    opacity: 1 !important;
}

.icon-in-circle {
    background: linear-gradient(135deg, #08B786 0%, #231A84 100%) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 16px rgba(8, 183, 134, 0.35) !important;
}

/* ─── FORMS ──────────────────────────────────────────────────────── */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
    background: rgba(37, 35, 64, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #f0efff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
    border-color: #08B786 !important;
    box-shadow: 0 0 0 3px rgba(8, 183, 134, 0.2) !important;
    background: rgba(37, 35, 64, 0.95) !important;
    outline: none !important;
}

/* ─── BUTTONS ────────────────────────────────────────────────────── */
.btn-full,
input[type="submit"],
button[type="submit"] {
    background: linear-gradient(135deg, #08B786 0%, #06a070 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    box-shadow: 0 4px 16px rgba(8, 183, 134, 0.3) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
    cursor: pointer !important;
}

.btn-full:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    box-shadow: 0 6px 24px rgba(8, 183, 134, 0.5) !important;
    transform: translateY(-1px) !important;
}

/* ─── CARDS / BLOCKS ─────────────────────────────────────────────── */
.block,
.article.article,
.ticket-details,
.create-ticket-section {
    background: rgba(28, 26, 46, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* ─── TABLE ──────────────────────────────────────────────────────── */
.table-wrap {
    background: rgba(28, 26, 46, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.table thead {
    background: rgba(35, 26, 132, 0.35) !important;
    border-bottom: 1px solid rgba(8, 183, 134, 0.25) !important;
}

.table thead th {
    color: #b8b6d4 !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

.table-wrap .table thead a { color: #b8b6d4 !important; }
.table thead th .handle { filter: invert(100%); }
.table thead th a:hover .handle { filter: none; }

/* ─── TICKET BODY ────────────────────────────────────────────────── */
.ticket__body_block {
    background: rgba(28, 26, 46, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.ticket__body_block.response {
    border: 1px solid rgba(8, 183, 134, 0.4) !important;
    background: rgba(8, 183, 134, 0.05) !important;
}

.ticket__body_block .block--head .contact b { color: #ffffff !important; }
.ticket__body_block.response .block--head .contact b { color: var(--success) !important; }
.ticket__body_block h1 { color: var(--tertiary) !important; }

/* ─── MODAL ──────────────────────────────────────────────────────── */
.modal {
    background: #1c1a2e !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(8, 183, 134, 0.1) !important;
}
.modal a.close-modal {
    filter: invert(100%);
    border-radius: 50%;
}
.modal a.close-modal:hover {
    filter: none !important;
    border: 1px solid rgba(255,255,255,0.5);
}

/* ─── ALERTS / NOTIFICATIONS ─────────────────────────────────────── */
.notification {
    border-radius: 12px !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.notification.green p:first-child { color: var(--success); }
.notification.red p:first-child { color: var(--error); }
.notification.orange p:first-child { color: var(--warning); }
.notification.blue p:first-child { color: var(--info); }

.alert {
    background: rgba(35, 26, 132, 0.25) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
}

/* ─── TABS ───────────────────────────────────────────────────────── */
.tabbed__head .tabbed__head_tabs li {
    color: #b8b6d4 !important;
    background: rgba(37, 35, 64, 0.6) !important;
    border-radius: 8px 8px 0 0 !important;
}
.tabbed__head .tabbed__head_tabs li.current {
    background: linear-gradient(135deg, #231A84, #1a1260) !important;
    color: #ffffff !important;
    border-color: rgba(8, 183, 134, 0.3) !important;
}

/* ─── HEADINGS ───────────────────────────────────────────────────── */
.article__heading {
    color: var(--tertiary) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
}

.article__heading--form {
    color: #ffffff !important;
}

article.article .block__head .h-3 { color: #ffffff !important; }
.cust-help .block__head .h-3 { color: #ffffff; }
.block__head .kb--folder a { color: var(--tertiary); }
#cc-link a { color: #b8b6d4 !important; }

/* ─── SELECTIZE ──────────────────────────────────────────────────── */
.selectize-control .selectize-input {
    background: rgba(37, 35, 64, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #f0efff !important;
}

.selectize-control .selectize-input::after {
    filter: brightness(0%) invert(100%);
    opacity: 1 !important;
}

.selectize-dropdown {
    background: #1c1a2e !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
}

/* ─── PREVIEW CARDS (KB articles) ───────────────────────────────── */
.preview,
.suggest_preview {
    background: rgba(28, 26, 46, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(20px) !important;
    transition: all 0.2s ease !important;
}

.preview:hover,
.suggest_preview:hover {
    background: rgba(35, 26, 132, 0.3) !important;
    border-color: rgba(8, 183, 134, 0.25) !important;
}

.kb--folder a:hover { color: var(--secondary) !important; }

/* ─── RADIO / CHECKBOX ───────────────────────────────────────────── */
.radio-custom [type="radio"]:not(:checked) + label,
.radio-custom [type="radio"]:checked + label {
    color: #b8b6d4 !important;
}
.checkbox-custom [type="checkbox"]:not(:checked) + label,
.checkbox-custom [type="checkbox"]:checked + label {
    color: #b8b6d4 !important;
}
.checkbox-custom [type="checkbox"]:checked + label::after,
.checkbox-custom [type="checkbox"]:not(:checked) + label::after {
    filter: invert(100%) brightness(200%);
}

/* ─── MISC ───────────────────────────────────────────────────────── */
.browser-default code { color: #b8b6d4 !important; }
.form-group .form-control__error { background: none !important; }

/* ─── FONT ───────────────────────────────────────────────────────── */
body, input, textarea, select, button,
h1, h2, h3, h4, h5, .h-1, .h-2, .h-3, .h-4 {
    font-family: 'Outfit', sans-serif !important;
}