/*
 * HESK — Midnight Ocean Pro
 * Modern dark IT helpdesk theme
 */

:root {
    color-scheme: dark;

    /* Core palette */
    --primary: #3978f6;
    --secondary: #253754;
    --tertiary: #55c7f5;

    /* Surfaces */
    --main-background: #0b1120;
    --surface: #151e2e;
    --foreground: #eaf1fc;

    /* Header stays dark even if the default theme uses a light bar */
    --header__bg: #0e1726;
    --header_logo__clr: #edf4ff;

    /* Typography */
    --font__pri-clr: #edf4ff;
    --font__sec-clr: #b8c7dc;

    /* Form controls */
    --input-bg: #10192a;
    --input-clr: #edf4ff;

    --radio__bg: var(--input-bg);
    --radio__fill-clr: var(--tertiary);
    --radio__hover-bg: var(--primary);

    /* Shadows */
    --shadow-1: rgba(0, 0, 0, 0.35);
    --shadow-1-hsla: 220, 45%, 5%;

    --shadow_smaller: 0 1px 2px 0;
    --shadow_smaller_invert: 0 -1px 2px 0;
    --shadow_small: 0 2px 6px 0;
    --shadow_med: 0 5px 16px 0;
    --shadow_blur-only: 0 0 14px 0;

    --shadow_dropdown_label: inset 1px 1px 1px;
    --shadow_dropdown_label_invert: inset -1px -1px 1px;

    /* Navigation */
    --header_nav__clr: #c4d0e2;
    --header_nav__hover_clr: #ffffff;
    --header_profile__clr: #edf4ff;

    --icon_circle__clr: #7dd3fc;
    --icon_circle__bg: #1b2940;
    --navlink_icon_hover__clr: #ffffff;
    --navlink_icon_hover__bg: var(--primary);

    --navlink__clr: #c4d0e2;
    --navlink__hover-bg: #202e44;

    /* Links */
    --link__pri-clr: #70baff;
    --link__pri-hover-clr: #ffffff;
    --link__sec-hover-clr: #7de0ff;

    --breadcrumbs__a-clr: var(--link__pri-clr);
    --breadcrumbs__a-hover-clr: var(--link__sec-hover-clr);
    --preview__title-clr: var(--link__pri-clr);
    --navlink__title-clr: var(--link__pri-clr);
    --search__icon-fill: var(--link__pri-clr);

    /* Search */
    --search__clr: #edf4ff;
    --search__bg: #10192a;

    /* Dropdowns */
    --dropdown__clr: #edf4ff;

    /* Article previews */
    --article_preview__hover-clr: #ffffff;
    --article_preview_suggestion_clr: #edf4ff;

    --preview__hover-bg: #1b2940;
    --suggest_preview__clr: #c4d0e2;
    --suggest_preview__hover-bg: #202e44;

    /* Tables */
    --table_row__bg: #1b2a42;
    --table_row__bg-even: #172235;
    --table_row__bg-hover: #263a58;

    /* Tickets */
    --ticket_response__bg: var(--ticket_body__bg);

    /* Date picker */
    --datepicker__clr: var(--tertiary);

    /* Status colors */
    --success: #45d6a0;
    --success-2: #173d35;

    --error: #ff7e89;
    --error-2: #48252f;

    --warning: #ffd166;
    --warning-2: #47391f;

    --info: #62c8ff;
    --info-2: #1b3a52;
    --info-3: #192b40;

    --notification__clr: #edf4ff;
}

/* Button colors */
: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;
}

/* --------------------------------------------------
   GENERAL POLISH
   -------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--main-background);
    color: var(--foreground);
}

a {
    transition: color 0.18s ease;
}

button,
input,
select,
textarea,
.btn {
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        color 0.18s ease;
}

/* Keyboard accessibility */
:where(a, button, input, select, textarea, .btn):focus-visible {
    outline: 2px solid var(--tertiary);
    outline-offset: 3px;
}

/* --------------------------------------------------
   HEADER AND NAVIGATION
   -------------------------------------------------- */

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

.header .header__nav a:hover {
    color: var(--header_nav__hover_clr);
}

/* --------------------------------------------------
   FORMS
   -------------------------------------------------- */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea,
.selectize-input {
    border-radius: 9px;
}

.form-control,
.selectize-input {
    background-color: var(--input-bg);
    color: var(--input-clr);
}

textarea,
input,
select {
    accent-color: var(--primary);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus,
.selectize-input.focus {
    border-color: var(--tertiary) !important;
    box-shadow: 0 0 0 3px rgba(85, 199, 245, 0.13);
}

input::placeholder,
textarea::placeholder {
    color: #8495ad;
    opacity: 1;
}

/* Select dropdown arrow */
.selectize-control .selectize-input::after {
    transition: all var(--transition-time-sec) ease;
    color: var(--dropdown_input__hover-after-clr);
    fill: var(--dropdown_input__hover-after-fill);
    filter: brightness(0%) invert(100%);
    opacity: 1 !important;
}

/* Radio and checkbox labels */
.radio-custom [type="radio"] + label {
    color: var(--font__sec-clr) !important;
}

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

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

/* Validation messages */
.form-group .form-control__error {
    background: transparent !important;
}

/* --------------------------------------------------
   BUTTONS
   -------------------------------------------------- */

.btn,
button,
input[type="submit"] {
    border-radius: 9px;
}

.btn-full,
.btn-blue,
button[type="submit"],
input[type="submit"] {
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.btn-full:hover,
.btn-blue:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    box-shadow: 0 4px 14px rgba(57, 120, 246, 0.2);
}

/* --------------------------------------------------
   CARDS, SECTIONS AND ARTICLES
   -------------------------------------------------- */

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

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

.article__heading {
    color: var(--link__pri-clr) !important;
}

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

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

/* --------------------------------------------------
   ALERTS AND NOTIFICATIONS
   -------------------------------------------------- */

.alert {
    background: color-mix(
        in srgb,
        var(--surface) 88%,
        var(--primary)
    ) !important;

    border-radius: 10px;
}

.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);
}

/* --------------------------------------------------
   TABS
   -------------------------------------------------- */

.tabbed__head .tabbed__head_tabs li {
    color: var(--foreground) !important;
    background: #1b2940 !important;
    transition: background-color 0.18s ease;
}

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

/* --------------------------------------------------
   TABLES
   -------------------------------------------------- */

.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 DETAILS
   -------------------------------------------------- */

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

.ticket__body_block .block--head .contact b {
    overflow-wrap: anywhere;
}

.ticket__body_block.response {
    border: 1px solid var(--success) !important;
    border-radius: 10px;
}

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

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

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

/* --------------------------------------------------
   MODALS
   -------------------------------------------------- */

.modal {
    background: var(--surface) !important;
    border: 1px solid #29374d;
    border-radius: 12px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.4);
}

.modal a.close-modal {
    filter: invert(100%);
    border-radius: 50%;
}

.modal a.close-modal:hover {
    filter: none !important;
    border: 1px solid #ffffff;
}

/* --------------------------------------------------
   CODE BLOCKS
   -------------------------------------------------- */

.browser-default code {
    color: #111827 !important;
    background: #e8eef7;
    border-radius: 4px;
    padding: 2px 5px;
}

/* --------------------------------------------------
   GENERAL READABILITY
   -------------------------------------------------- */

.ticket__body_block,
.alert,
.modal,
.table-wrap {
    overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}