/*
    Umbral Software Dark Theme for HESK

    Based on the Midnight Ocean dark theme pattern.
    Mirrors the Umbral Software brand palette:
      Background: #130d1e  (deep dark purple)
      Surface:    #1a0d2e  (slightly elevated containers)
      Primary:    #4d3a6d  (dark muted purple)
      Secondary:  #7355b5  (mid purple)
      Tertiary:   #9b6ff5  (bright CTA violet)
      Accent:     #d4a8ff  (lavender highlight / links)
      Text:       #fffbe6  (warm off-white)

    To apply this theme, set in hesk_settings.inc.php:
        $hesk_settings['customer_theme'] = 'umbral_dark';
*/

:root {
    --primary: #4d3a6d;
    --secondary: #7355b5;
    --tertiary: #9b6ff5;

    --main-background: #130d1e;
    --surface: #1a0d2e;
    --foreground: #fffbe6;

    --font__pri-clr: #fffbe6;
    --font__sec-clr: #b7a6c9;

    --input-bg: #1a0d2e;
    --input-clr: #ede8f7;

    --radio__bg: var(--surface);
    --radio__fill-clr: var(--white-1);
    --radio__hover-bg: var(--primary);

    --shadow-1: rgba(0, 0, 0, 0.6);
    --shadow-1-hsla: 270, 50%, 10%;

    --shadow_smaller: 0 1px 2px 0;
    --shadow_smaller_invert: 0 -1px 2px 0;
    --shadow_small: 0 1px 2px 0;
    --shadow_med: 0 2px 4px 0;
    --shadow_blur-only: 0 0 5px 0;
    --shadow_dropdown_label: inset 1px 1px 1px;
    --shadow_dropdown_label_invert: inset -1px -1px 1px;

    --notification__clr: var(--foreground);

    --header_nav__clr: var(--font__pri-clr);
    --header_nav__hover_clr: var(--surface);

    --link__pri-clr: #d4a8ff;
    --link__pri-hover-clr: var(--font__sec-clr);
    --link__sec-hover-clr: #e8d0ff;

    --btn__clr-pri: var(--font__pri-clr);

    --article_preview__hover-clr: var(--font__pri-clr);
    --article_preview_suggestion_clr: var(--font__pri-clr);

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

    --search__clr: var(--font__pri-clr);
    --search__bg: var(--main-background);
    --search__icon-fill: #d4a8ff;

    --breadcrumbs__a-clr: #d4a8ff;
    --breadcrumbs__a-hover-clr: var(--link__sec-hover-clr);
    --preview__title-clr: #d4a8ff;
    --navlink__title-clr: #d4a8ff;

    --table_row__bg: color-mix(in srgb, var(--primary) 23%, var(--surface));
    --table_row__bg-even: color-mix(in srgb, var(--tertiary) 1%, var(--surface));
    --table_row__bg-hover: color-mix(in srgb, var(--surface) 90%, var(--primary));

    --navlink__clr: var(--font__sec-clr);
    --navlink__hover-bg: color-mix(in srgb, var(--surface) 95%, var(--foreground));
    --header_profile__clr: var(--font__pri-clr);

    --preview__hover-bg: color-mix(in srgb, var(--surface) 98%, var(--foreground));
    --suggest_preview__clr: var(--font__sec-clr);
    --suggest_preview__hover-bg: var(--preview__hover-bg);

    --ticket_response__bg: var(--ticket_body__bg);

    --datepicker__clr: var(--tertiary);
    --datepicker_cell__selected-clr: var(--white-1);

    --success: var(--green-1);
    --success-2: var(--surface);
    --error: var(--red-1);
    --error-2: var(--surface);
    --warning: var(--yellow-1);
    --warning-2: var(--surface);
    --info: #9b6ff5;
    --info-2: var(--surface);
    --info-3: #2e1f4a;
}

/* ----------------------------------------------------------------
   Dark-mode specific selector overrides
   (all require !important to win over later-loaded core CSS)
   ---------------------------------------------------------------- */
: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;
}

/* Dropdown arrow visible on dark bg */
.selectize-control .selectize-input::after {
    transition: all var(--transition-time-sec) ease;
    filter: brightness(0%) invert(100%);
    opacity: 1 !important;
}

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

.browser-default code {
    color: black !important;
}

.article__heading {
    color: var(--link__pri-clr) !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: color-mix(in srgb, var(--surface) 90%, var(--secondary)) !important;
}

.tabbed__head .tabbed__head_tabs li {
    color: var(--foreground) !important;
    background: var(--gray-7) !important;
}
.tabbed__head .tabbed__head_tabs li.current {
    background: var(--primary) !important;
    border-color: var(--surface) !important;
}

.cust-help .block__head .h-3 {
    color: var(--foreground);
}

.block__head .kb--folder a {
    color: var(--link__pri-clr);
}

#cc-link a {
    color: var(--foreground) !important;
}

.radio-custom [type="radio"] + label {
    color: var(--tertiary) !important;
}

.checkbox-custom [type="checkbox"]:checked + label::after,
.checkbox-custom [type="checkbox"]:not(:checked) + label::after {
    filter: invert(100%) brightness(200%);
}

.modal {
    background: var(--surface) !important;
}
.modal a.close-modal {
    filter: invert(100%);
    border-radius: 50%;
}
.modal a.close-modal:hover {
    filter: none !important;
    border: 1px solid white;
}

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

.ticket__body_block .block--head .contact b {
    color: var(--font__pri-clr) !important;
}

.ticket__body_block.response {
    border: 1px solid var(--success) !important;
}
.ticket__body_block.response .block--head .contact b {
    color: var(--success) !important;
}

article.article .block__head .h-3 {
    color: var(--white-1) !important;
}

.form-group .form-control__error {
    background: none !important;
}

.radio-custom [type="radio"]:not(:checked) + label,
.radio-custom [type="radio"]:checked + label {
    color: var(--font__sec-clr) !important;
}

.checkbox-custom [type="checkbox"]:not(:checked) + label,
.checkbox-custom [type="checkbox"]:checked + label {
    color: var(--font__sec-clr) !important;
}

.ticket__body_block h1 {
    color: var(--tertiary) !important;
}

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