/*
 * cool-blue.css
 * Cool Blue Theme for HESK Help Desk
 *
 * INSTALLATION:
 *   1. Place this file at:
 *      customer/css/themes/cool-blue.css
 *
 *   2. In your HESK admin panel go to:
 *      Admin → Settings → Look & Feel → Theme
 *      and select "cool-blue"
 *
 *      OR manually set in hesk_settings.inc.php:
 *      $hesk_settings['customer_theme'] = 'cool-blue';
 *
 *   This file ONLY overrides CSS custom properties.
 *   Zero PHP changes required. Zero risk to functionality.
 *
 * HOW IT WORKS:
 *   HESK loads this file BEFORE its own 0_01_variables.css calculations run.
 *   That means color-mix() derived values (hover states, borders, etc.)
 *   automatically recalculate from these new base values — for free.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@300;400;500&family=DM+Sans:wght@300;400;500&display=swap');

:root {

    /* ================================================================
       CORE PALETTE
       These three drive the majority of HESK's derived color-mix() values.
       ================================================================ */

    /* Primary — darkest base, used for header bg, strong text, borders */
    --primary:            #0d1117;

    /* Secondary — mid tone, used for buttons, nav, secondary actions */
    --secondary:          #1e2d3d;

    /* Tertiary — the cyan accent, used for links, CTAs, active states */
    --tertiary:           #5fffff;


    /* ================================================================
       BACKGROUNDS
       ================================================================ */

    /* Main page background — the near-black with a blue undertone */
    --main-background:    #0a0a0f;

    /* Surface — cards, modals, dropdowns, ticket bodies */
    --surface:            #13131e;


    /* ================================================================
       TYPOGRAPHY
       ================================================================ */

    --font__pri-clr:      #e8e8f0;   /* primary body text */
    --font__sec-clr:      #8b8ba8;   /* secondary / muted text */

    --dark-text:          #e8e8f0;   /* text inside inputs and buttons */


    /* ================================================================
       HEADER & NAVIGATION
       ================================================================ */

    --header__bg:                       #0a0a0f;
    --header_logo__clr:                 #e8e8f0;
    --header_nav__clr:                  #e8e8f0;
    --header_nav__hover_clr:            #5fffff;

    --header_profile__clr:              #e8e8f0;
    --header_profile__menu-bg:          #13131e;
    --header_profile__user-avatar-bg:   #1e2d3d;
    --header_profile__mobile-user-avatar-bg: #1e2d3d;

    /* Circle icons in nav */
    --icon_circle__clr:                 #0a0a0f;
    --icon_circle__bg:                  #5fffff;
    --navlink_icon_hover__clr:          #0a0a0f;
    --navlink_icon_hover__bg:           #5fffff;

    /* Side / dropdown nav links */
    --navlink__bg:                      #13131e;
    --navlink__clr:                     #8b8ba8;
    --navlink__hover-bg:                #1a1a2e;
    --navlink__title-clr:               #5fffff;

    --notification__clr:                #e8e8f0;


    /* ================================================================
       INPUTS & FORMS
       ================================================================ */

    --input-bg:           #0d0d15;      /* slightly darker than surface */
    --input-clr:          #e8e8f0;

    --radio__bg:                        #13131e;
    --radio__fill-clr:                  #5fffff;
    --radio__hover-bg:                  #1a1a2e;
    --radio__hover-fill-clr:            #5fffff;

    --checkbox__bg:                     #13131e;
    --checkbox__hover-bg:               #1a1a2e;


    /* ================================================================
       LINKS
       ================================================================ */

    --link__pri-clr:        #5fffff;    /* standard links */
    --link__pri-hover-clr:  #a0ffff;    /* lighter cyan on hover */

    --link__sec-clr:        #5fffff;    /* standout links (view ticket, refresh) */
    --link__sec-hover-clr:  #a0ffff;

    --footer__link-clr:     #5fffff;


    /* ================================================================
       BUTTONS
       ================================================================ */

    --btn__bg-clr-pri:      #5fffff;    /* primary button background */
    --btn__clr-pri:         #0a0a0f;    /* primary button text — dark on cyan */
    --btn__border-clr-pri:  #3dd9d9;    /* slightly deeper cyan border */

    --btn__disabled-bg-clr: #1e1e2e;
    --btn__disabled-clr:    #44445a;


    /* ================================================================
       DROPDOWNS
       ================================================================ */

    --dropdown__bg:                  #13131e;
    --dropdown__clr:                 #e8e8f0;
    --dropdown__border-clr:          #1e2d3d;
    --dropdown_ver1__border-clr:     transparent;
    --dropdown_ver2__border-clr:     #5fffff;

    --dropdown__hover-bg:            #5fffff;
    --dropdown__hover-clr:           #0a0a0f;
    --dropdown__hover-border-clr:    #5fffff;
    --dropdown_ver2__hover-border-clr: #3dd9d9;


    /* ================================================================
       DATEPICKER
       ================================================================ */

    --datepicker_btn__bg:   #5fffff;
    --datepicker_btn__clr:  #0a0a0f;

    --datepicker__bg:       #13131e;
    --datepicker__clr:      #e8e8f0;


    /* ================================================================
       TICKET DISPLAY
       ================================================================ */

    --ticket_body__bg:      #13131e;

    /* Ticket response area — very subtle cyan tint */
    --ticket_response__bg:  #0f1a1a;


    /* ================================================================
       ARTICLE / KB PREVIEWS
       ================================================================ */

    --preview__clr:             #8b8ba8;
    --preview__bg:              #13131e;
    --preview__border-clr:      #1e2d3d;
    --preview__hover-bg:        #1a1a2e;
    --preview__hover-icon-fill: #0a0a0f;
    --preview__title-clr:       #5fffff;

    --suggest_preview__bg:              #13131e;
    --suggest_preview__clr:             #e8e8f0;
    --suggest_preview__border-clr:      #1a1a2e;
    --suggest_preview__hover-bg:        #1a1a2e;
    --suggest_preview__hover-icon-fill: #0a0a0f;
    --suggest_preview__title-clr:       #5fffff;

    --article_preview__hover-clr:       #a0ffff;
    --article_preview_suggestion_clr:   #8b8ba8;


    /* ================================================================
       TABLES
       ================================================================ */

    --table_row__bg:        #0f0f18;    /* odd rows */
    --table_row__bg-even:   #13131e;    /* even rows — slightly lighter */
    --table_row__bg-hover:  #1a1a2e;    /* row hover */


    /* ================================================================
       SEARCH BAR
       ================================================================ */

    --search__clr:                      #e8e8f0;
    --search__bg:                       #1e2d3d;
    --search__title-clr:                #e8e8f0;
    --search__input-placeholder-clr:    #44445a;
    --search__icon-fill:                #5fffff;
    --search__input-bg:                 #0d0d15;


    /* ================================================================
       STEP BAR (multi-step ticket submission)
       ================================================================ */

    --step_bar__item-clr:   #5fffff;


    /* ================================================================
       BREADCRUMBS
       ================================================================ */

    --breadcrumbs__a-clr:       #5fffff;
    --breadcrumbs__a-hover-clr: #a0ffff;


    /* ================================================================
       MODALS
       ================================================================ */

    --modal_body__bg:   #13131e;


    /* ================================================================
       SHADOWS
       Shift shadows from gray-7 (#26282a) to near-black with blue tint.
       ================================================================ */

    --shadow-1:         #05050a;
    --shadow-1-hsla:    240, 30%, 3%;   /* hsl equivalent of #05050a */

    --shadow-1-90: hsla(var(--shadow-1-hsla), 0.9);
    --shadow-1-80: hsla(var(--shadow-1-hsla), 0.8);
    --shadow-1-70: hsla(var(--shadow-1-hsla), 0.7);
    --shadow-1-60: hsla(var(--shadow-1-hsla), 0.6);
    --shadow-1-50: hsla(var(--shadow-1-hsla), 0.5);
    --shadow-1-40: hsla(var(--shadow-1-hsla), 0.4);
    --shadow-1-30: hsla(var(--shadow-1-hsla), 0.3);
    --shadow-1-20: hsla(var(--shadow-1-hsla), 0.2);
    --shadow-1-10: hsla(var(--shadow-1-hsla), 0.1);


    /* ================================================================
       STATUS / NOTIFICATION COLORS
       These stay close to standard meaning but are shifted to suit
       the dark background — slightly more saturated/bright.
       ================================================================ */

    --green-1:      #3dd97d;    /* success — slightly brighter on dark bg */
    --success:      var(--green-1);
    --success-2:    #0a1f14;    /* success background tint */

    --red-1:        #ff6b6b;    /* error — warm coral, readable on dark */
    --red-2:        #e02020;
    --error:        var(--red-1);
    --error-2:      #1f0a0a;    /* error background tint */
    --error-3:      #ff4444;

    --yellow-1:     #ffe066;    /* warning — yellow accent */
    --yellow-2:     #ffc200;
    --warning:      var(--yellow-1);
    --warning-2:    #1f1c00;    /* warning background tint */

    --info:         #5fffff;    /* info — reuse cyan accent */
    --info-2:       #0a1a1a;    /* info background tint */
    --info-3:       #8b8ba8;


    /* ================================================================
       GRAY SCALE
       Shift the grays toward the blue-dark palette.
       ================================================================ */

    --white-1:  #e8e8f0;    /* "white" text on dark bg */
    --white-2:  #1a1a2e;
    --white-3:  #16162a;
    --white-4:  #13131e;
    --white-5:  #111118;
    --white-6:  #0f0f18;
    --white-7:  #1e1e2e;
    --white-8:  #2a2a3e;
    --white-9:  #3a3a54;

    --gray-1:   #44445a;
    --gray-2:   #6b6b8a;
    --gray-3:   #5a5a78;
    --gray-4:   #8b8ba8;
    --gray-5:   #b8b8cc;
    --gray-6:   #d0d0e0;
    --gray-6-hsl: 240, 20%, 85%;
    --gray-7:   #e8e8f0;


    /* ================================================================
       TYPOGRAPHY OVERRIDE
       Apply DM Sans as the main font across all HESK UI.
       DM Mono is pulled in for code/monospace contexts.
       ================================================================ */
}

/* ================================================================
   BODY & BASE ELEMENT OVERRIDES
   These handle anything that wasn't covered by a CSS variable
   (e.g. border colors, scrollbar, selection highlight).
   ================================================================ */

body,
.wrapper,
.main {
    background-color: #0a0a0f;
    font-family: 'DM Sans', sans-serif;
    color: #e8e8f0;
}

/* Grid background — matching the Cool Blue Theme dot grid */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(95,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(95,255,255,0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* Make sure main content sits above the grid */
.wrapper {
    position: relative;
    z-index: 1;
}

/* Borders — shift all light borders to dark */
hr,
.separator {
    border-color: #1e1e2e;
}

/* Scrollbar (Chromium browsers) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #0a0a0f;
}
::-webkit-scrollbar-thumb {
    background: #1e2d3d;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #5fffff;
}

/* Text selection highlight */
::selection {
    background: #5fffff;
    color: #0a0a0f;
}

/* Code blocks / preformatted text */
code,
pre,
kbd {
    font-family: 'DM Mono', monospace;
    background: #0d0d15;
    color: #5fffff;
    border: 1px solid #1e1e2e;
}

/* Input focus ring — cyan glow instead of blue */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #5fffff !important;
    box-shadow: 0 0 0 2px rgba(95, 255, 255, 0.15) !important;
}

/* Table borders */
table,
th,
td {
    border-color: #1e1e2e;
}

th {
    background: #111118;
    color: #8b8ba8;
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Alerts / notices — make sure tint backgrounds are visible on dark */
.notice,
.alert {
    border-left-width: 3px;
}

/* Header border bottom */
header,
.header {
    border-bottom: 1px solid #1e1e2e;
}

/* Card / box surfaces */
.box,
.card,
.block,
.panel {
    background: #13131e;
    border: 1px solid #1e1e2e;
}

/* Active / selected nav items */
.navlink--active,
.nav-item.active {
    color: #5fffff;
    border-left: 2px solid #5fffff;
}