/*
    Modern Slate (light theme)

    A modernized HESK theme using an indigo/violet + cyan palette on clean
    neutral-gray surfaces, replacing the classic blue/white look.

    Based on the "Midnight Ocean" theme structure — see that file for the
    full usage notes on how theme variables and color-mix() work.

    USAGE:
    - By adjusting --primary, --secondary and --tertiary, most other colors
      are derived programmatically via color-mix().
    - For the active theme, a "theme_modern_slate" class is added to <html>,
      so you can target it directly, e.g.:
        .theme_modern_slate .btn-full {
            padding: 50px;
        }
*/

:root {
    /* === Core brand colors === */
    --primary: #4c47c9;          /* refined indigo — slightly cooler/cleaner than a straight violet */
    --secondary: #6366f1;        /* indigo-500 — mid brand tone */
    --tertiary: #0891b2;         /* cyan-600 — fresh modern accent */

    /* === Surfaces & background === */
    --surface: #ffffff;
    --main-background: #f4f5f9;  /* soft cool-gray, not the classic pale blue */
    --foreground: #14152b;

    /* === Typography === */
    --font__pri-clr: #14152b;    /* near-black indigo-slate for main text */
    --font__sec-clr: #5b5e78;    /* muted slate-gray for secondary text */

    /* === Inputs === */
    --input-bg: #f7f7fb;
    --input-clr: #14152b;

    /* === Radios/checkboxes === */
    --radio__bg: var(--surface);
    --radio__fill-clr: var(--primary);
    --radio__hover-bg: color-mix(in srgb, var(--primary) 12%, var(--surface));

    /* === Shadows === */
    --shadow-1: rgba(20, 21, 43, 0.12);
    --shadow-1-hsla: 235, 45%, 14%;

    --shadow_smaller: 0 1px 2px 0;
    --shadow_smaller_invert: 0 -1px 2px 0;
    --shadow_small: 0 1px 3px 0;
    --shadow_med: 0 4px 10px 0;
    --shadow_blur-only: 0 0 8px 0;

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

    /* === Notifications panel base === */
    --notification__clr: var(--foreground);

    /* === Header nav === */
    --header_nav__clr: #ffffff;
    --header_nav__hover_clr: color-mix(in srgb, var(--primary) 80%, black);

    /* === Links === */
    --link__pri-clr: #4338ca;
    --link__pri-hover-clr: #312a92;
    --link__sec-hover-clr: #0891b2;

    /* === Buttons === */
    --btn__clr-pri: #ffffff;

    /* === Article / KB previews === */
    --article_preview__hover-clr: var(--primary);
    --article_preview_suggestion_clr: var(--primary);
    --preview__title-clr: var(--link__pri-clr);
    --preview__hover-bg: color-mix(in srgb, var(--surface) 96%, var(--primary));

    --suggest_preview__clr: var(--font__sec-clr);
    --suggest_preview__hover-bg: var(--preview__hover-bg);

    /* === Dropdown / search === */
    --dropdown__clr: var(--foreground);
    --search__clr: var(--foreground);
    --search__bg: var(--main-background);
    --search__icon-fill: var(--link__pri-clr);

    /* === Tables === */
    --table_row__bg: color-mix(in srgb, var(--primary) 5%, var(--surface));
    --table_row__bg-even: var(--surface);
    --table_row__bg-hover: color-mix(in srgb, var(--primary) 8%, var(--surface));

    /* === Nav links === */
    --navlink__clr: var(--font__sec-clr);
    --navlink__title-clr: var(--link__pri-clr);
    --navlink__hover-bg: color-mix(in srgb, var(--surface) 94%, var(--primary));

    /* === Header profile === */
    --header_profile__clr: #ffffff;

    /* === Ticket response === */
    --ticket_response__bg: var(--ticket_body__bg);

    /* === Datepicker === */
    --datepicker__clr: var(--tertiary);

    /* === Status colors — modernized, slightly desaturated for a cleaner feel === */
    --success: #059669;          /* emerald-600 */
    --success-2: #10b981;
    --error: #dc2626;            /* red-600 */
    --error-2: #ef4444;
    --warning: #d97706;          /* amber-600 */
    --warning-2: #f59e0b;
    --info: #0891b2;             /* cyan-600 */
    --info-2: #06b6d4;
    --info-3: #e0f2fe;

    /* === Breadcrumbs === */
    --breadcrumbs__a-clr: var(--link__pri-clr);
    --breadcrumbs__a-hover-clr: var(--link__sec-hover-clr);
}

/* ADDITIONAL OVERWRITES BELOW - CSS helper vars, and general selector overwrites.
   These require !important to properly override followup loaded CSS!
*/
:root {
    --btn_blue_border__border-clr: var(--primary) !important;
    --btn_blue_border__clr: var(--primary) !important;
    --btn_blue_border__bg: var(--surface) !important;
    --btn_blue_border__hover_bg: color-mix(in srgb, var(--primary) 8%, var(--surface)) !important;
    --datepicker_cell__selected-clr: #ffffff !important;
}

.header .header__nav .profile__user .profile__menu .profile--logout a {
    color: var(--primary);
}
.browser-default code {
    color: var(--primary) !important;
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}
.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) 92%, var(--secondary)) !important;
}
.tabbed__head .tabbed__head_tabs li {
    color: var(--font__sec-clr) !important;
    background: var(--main-background) !important;
    border-radius: 6px 6px 0 0;
}
.tabbed__head .tabbed__head_tabs li.current {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !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(--font__sec-clr) !important;
}
.modal {
    background: var(--surface) !important;
    border-radius: 10px;
}
.modal a.close-modal:hover {
    border: 1px solid var(--primary);
}
.table-wrap .table thead a {
    color: var(--foreground) !important;
}
.ticket__body_block .block--head .contact b {
    color: var(--primary) !important;
}
article.article .block__head .h-3 {
    color: var(--foreground) !important;
}
.form-group .form-control__error {
    background: none !important;
}
.checkbox-custom [type="checkbox"]:not(:checked) + label,
.checkbox-custom [type="checkbox"]:checked + label {
    color: var(--font__sec-clr) !important;
}
.ticket__body_block.response {
    border: 1px solid var(--success) !important;
}
.ticket__body_block.response .block--head .contact b {
    color: var(--success) !important;
}
.ticket__body_block h1 {
    color: var(--tertiary) !important;
}
.kb--folder a:hover {
    color: var(--link__sec-hover-clr) !important;
}

/* Rounded, modern card/button feel */
.btn, .btn-full, .btn--blue-border {
    border-radius: 8px !important;
}
.block, .modal, .form-control, .settings__form_block {
    border-radius: 10px;
}

/* === Table header: force readable white text on the purple header,
   instead of low-contrast dark-on-purple === */
.table-wrap .table thead th,
.table-wrap .table thead th a,
.table-wrap .table thead a {
    color: #ffffff !important;
    background: var(--primary) !important;
    font-weight: 600;
}
.table-wrap .table thead th .handle {
    filter: invert(100%) brightness(200%);
}

/* Softer row striping/hover so the header purple is the one strong
   accent in the table, not repeated in every row */
.table-wrap .table tbody tr:nth-child(even) {
    background: var(--table_row__bg-even) !important;
}
.table-wrap .table tbody tr:hover {
    background: var(--table_row__bg-hover) !important;
}

/* === Inputs: subtle neutral border by default, brand color only on
   focus — avoids the "everything is purple" look === */
.form-control,
input[type="text"],
input[type="search"] {
    border: 1px solid #dcdde6 !important;
}
.form-control:focus,
input[type="text"]:focus,
input[type="search"]:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

/* Search/filter select next to the search box — match the neutral border */
.dropdown-select {
    border: 1px solid #dcdde6 !important;
}

/* Breadcrumb area: keep it quiet/neutral, links carry the color instead
   of a colored bar */
.breadcrumbs, .main__breadcrumbs {
    background: var(--surface) !important;
}

/* Avatar bubble in header nav — slightly darker ring so it doesn't
   blend into the header bar */
.header .profile__avatar,
.header .profile__user .avatar {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}