/*
    VoiceAgents.ca — Ink (dark)
    ---------------------------------------------------------------------
    The default help desk skin: Ink dominates, Cream carries the text,
    Lime is the signal. Built per VoiceAgents.ca Brand Guidelines v1.0 §02.

    Raw palette tokens (--va-*) live in customer/css/core_overrides.css.
    This file only MAPS them onto Hesk's variables — add no new hex values here.

    Structure follows Hesk's official Midnight Ocean theme, which is the
    supported starting point for dark themes.
*/

:root {
    /* ── MAIN theme colours ───────────────────────────────────────────
       --primary drives headings and strong text, so it is Cream, not Lime:
       the guide reserves Lime for action and forbids it for body copy. */
    --primary:   var(--va-cream);
    --secondary: var(--va-cream);         /* Hesk uses this for TEXT as often as for
                                             backgrounds (titles, tooltips, input
                                             borders) — so it must stay readable.
                                             Lime signals are set explicitly below. */
    --tertiary:  var(--va-lime);          /* accents & standout links */

    --surface:         var(--va-ink-soft); /* cards and elevated surfaces */
    --foreground:      var(--va-cream);
    --main-background: var(--va-ink);      /* the dominant 60% */

    --font__pri-clr: var(--va-cream);
    --font__sec-clr: var(--va-cream-muted);

    /* ── Header & navigation ── */
    --header__bg:            var(--va-ink);
    --header_logo__clr:      var(--va-cream);
    --header_nav__clr:       var(--va-cream);
    --header_nav__hover_clr: var(--va-lime);

    --header_profile__clr:                  var(--va-cream);
    --header_profile__menu-bg:              var(--va-ink-soft);
    --header_profile__user-avatar-bg:       var(--va-lime);
    --header_profile__mobile-user-avatar-bg: var(--va-lime);

    --icon_circle__clr:        var(--va-ink);
    --icon_circle__bg:         var(--va-lime);
    --navlink_icon_hover__clr: var(--va-ink);
    --navlink_icon_hover__bg:  var(--va-lime);

    --navlink__bg:        var(--va-ink-soft);
    --navlink__clr:       var(--va-cream);
    --navlink__hover-bg:  color-mix(in srgb, var(--va-lime) 12%, var(--va-ink-soft));
    --navlink__title-clr: var(--va-cream);

    --notification__clr: var(--va-cream);

    /* ── Inputs ──
       Sunk slightly below both the Ink canvas and the Ink Soft cards, so
       fields read as inputs on either surface. */
    --input-bg:  #191B15;
    --input-clr: var(--va-cream);

    --radio__bg:              var(--va-ink);
    --radio__fill-clr:        var(--va-lime);
    --radio__hover-bg:        color-mix(in srgb, var(--va-lime) 22%, var(--va-ink));
    --radio__hover-fill-clr:  var(--va-lime);
    --checkbox__bg:           var(--radio__bg);
    --checkbox__hover-bg:     var(--radio__hover-bg);

    /* ── Links ── */
    --link__pri-clr:       var(--va-lime);
    --link__pri-hover-clr: var(--va-cream);
    --link__sec-clr:       var(--va-lime);
    --link__sec-hover-clr: var(--va-cream);
    --footer__link-clr:    var(--va-cream-muted);

    --breadcrumbs__a-clr:       var(--va-cream-muted);
    --breadcrumbs__a-hover-clr: var(--va-lime);

    /* ── Buttons · "Ink on Lime — ads, banners, CTAs" (§01) ── */
    --btn__bg-clr-pri:     var(--va-lime);
    --btn__clr-pri:        var(--va-ink);
    --btn__border-clr-pri: var(--va-lime);
    --btn__disabled-bg-clr: color-mix(in srgb, var(--va-cream) 14%, var(--va-ink));
    --btn__disabled-clr:    var(--va-cream-dim);

    /* ── Tickets & previews ── */

    --ticket_body__bg:     var(--va-ink-soft);
    --ticket_response__bg: color-mix(in srgb, var(--va-lime) 7%, var(--va-ink-soft));

    --preview__clr:              var(--va-cream-muted);
    --preview__bg:               var(--va-ink-soft);
    --preview__border-clr:       var(--va-hairline);
    --preview__hover-bg:         color-mix(in srgb, var(--va-lime) 9%, var(--va-ink-soft));
    --preview__hover-icon-fill:  var(--va-lime);
    --preview__title-clr:        var(--va-cream);

    --suggest_preview__bg:              var(--va-ink-soft);
    --suggest_preview__clr:             var(--va-cream-muted);
    --suggest_preview__border-clr:      var(--va-hairline);
    --suggest_preview__hover-bg:        var(--preview__hover-bg);
    --suggest_preview__hover-icon-fill: var(--va-lime);
    --suggest_preview__title-clr:       var(--va-cream);

    --article_preview__hover-clr:        var(--va-lime);
    --article_preview_suggestion_clr:    var(--va-cream);

    /* ── Tables ── */
    --table_row__bg:       var(--va-ink);
    --table_row__bg-even:  color-mix(in srgb, var(--va-cream) 4%, var(--va-ink));
    --table_row__bg-hover: color-mix(in srgb, var(--va-lime) 10%, var(--va-ink));

    --step_bar__item-clr: var(--va-lime);

    /* ── Search ── */
    --search__clr:                    var(--va-cream);
    --search__bg:                     var(--va-ink);
    --search__title-clr:              var(--va-cream);
    --search__input-placeholder-clr:  var(--va-cream-dim);
    --search__icon-fill:              var(--va-lime);
    --search__input-bg:               var(--input-bg);

    --modal_body__bg: var(--va-ink-soft);

    /* ── Dropdowns ── */
    --dropdown__bg:              var(--va-ink-soft);
    --dropdown__clr:             var(--va-cream);
    --dropdown__border-clr:      var(--va-hairline);
    --dropdown_ver1__border-clr: transparent;
    --dropdown_ver2__border-clr: var(--va-hairline);
    --dropdown__hover-bg:        var(--va-lime);
    --dropdown__hover-clr:       var(--va-ink);
    --dropdown__hover-border-clr: var(--va-lime);
    --dropdown_ver2__hover-border-clr: var(--va-lime);

    /* ── Datepickers ── */
    --datepicker_btn__bg:  var(--va-lime);
    --datepicker_btn__clr: var(--va-ink);
    --datepicker__bg:      var(--va-ink-soft);
    --datepicker__clr:     var(--va-cream);

    /* ── Status colours ──
       Kept semantic (a red error must read as an error), but their pale
       "-2" backgrounds are swapped to Ink Soft so they work on dark. */
    --success:   #4ED88E;
    --success-2: var(--va-ink-soft);
    --error:     #FF8382;   /* 5.05:1 on the alert surface — #FF6B6A missed AA at 4.33 */
    --error-2:   var(--va-ink-soft);
    --error-3:   #FF8382;
    --warning:   #F5C542;
    --warning-2: var(--va-ink-soft);
    --info:      var(--va-lime);
    --info-2:    var(--va-ink-soft);
    --info-3:    var(--va-cream-dim);

    /* ── Shadows · on Ink, depth comes from darkness, not from grey ── */
    --shadow-1:      rgba(0, 0, 0, 0.55);
    --shadow-1-hsla: 0, 0%, 0%;
    --shadow_smaller:        0 1px 2px 0;
    --shadow_smaller_invert: 0 -1px 2px 0;
    --shadow_small:  0 1px 3px 0;
    --shadow_med:    0 2px 6px 0;
    --shadow_blur-only: 0 0 6px 0;
    --shadow_dropdown_label:        inset 1px 1px 1px;
    --shadow_dropdown_label_invert: inset -1px -1px 1px;

}

/*
    Selector-level fixes.
    This file loads BEFORE app.min.css, so these need !important — the same
    convention Hesk's own Midnight Ocean theme uses.
*/
:root {
    /* Outline buttons are the SECONDARY action: quiet until hovered, so each
       surface carries exactly one lime CTA (guide §03). */
    --btn_blue_border__border-clr: var(--va-hairline) !important;
    --btn_blue_border__clr:        var(--va-cream) !important;
    --btn_blue_border__bg:         transparent !important;
    --btn_blue_border__hover_bg:   var(--va-lime) !important;
    --btn_blue_border__hover_clr:  var(--va-ink) !important;
    --btn_full__hover_bg:          var(--va-lime-press) !important;
    --btn_border__clr:             var(--va-cream) !important;
    --btn_border__border-clr:      var(--va-hairline) !important;
    --btn_border__hover-bg:        var(--va-lime) !important;
    --btn_border__hover-clr:       var(--va-ink) !important;
    --btn_border__hover-border-clr: var(--va-lime) !important;
    --btn_border__hover-fill:      var(--va-ink) !important;
    /* Re-declared in 0_01_variables.css (inside app.min.css), which loads after
       this file — these only take effect with !important. */
    --header_border__clr:       var(--va-hairline) !important;
    --article__head-bg:         var(--va-ink-soft) !important;
    --article__head-clr:        var(--va-cream) !important;
    --article__head-border-clr: var(--va-hairline) !important;

    --datepicker_cell__selected-clr: var(--va-ink) !important;
}

.theme_ink .header {
    border-bottom: 1px solid var(--va-hairline) !important;
}
/* Dark-UI icon corrections: several Hesk icons are dark-on-light bitmaps. */
.theme_ink .selectize-control .selectize-input::after {
    transition: all var(--transition-time-sec) ease;
    filter: brightness(0%) invert(100%);
    opacity: 1 !important;
}
.theme_ink .checkbox-custom [type="checkbox"]:checked + label::after,
.theme_ink .checkbox-custom [type="checkbox"]:not(:checked) + label::after {
    filter: invert(100%) brightness(200%);
}
.theme_ink .table thead th .handle {
    filter: invert(100%);
}
.theme_ink .table thead th a:hover .handle {
    filter: none;
}
.theme_ink .modal a.close-modal {
    filter: invert(100%);
    border-radius: 50%;
}
.theme_ink .modal a.close-modal:hover {
    filter: none !important;
    border: 1px solid var(--va-lime);
}

/* Text that must stay legible on Ink. */
.theme_ink .cust-help .block__head .h-3,
.theme_ink article.article .block__head .h-3,
.theme_ink .ticket__body_block h1 {
    color: var(--va-cream) !important;
}
.theme_ink .article__heading,
.theme_ink .block__head .kb--folder a {
    color: var(--va-lime) !important;
}
.theme_ink .kb--folder a:hover {
    color: var(--va-cream) !important;
}
.theme_ink .modal {
    background: var(--va-ink-soft) !important;
}
.theme_ink .alert {
    background: color-mix(in srgb, var(--va-cream) 6%, var(--va-ink-soft)) !important;
}
.theme_ink .browser-default code {
    color: var(--va-ink) !important;
}
.theme_ink .radio-custom [type="radio"]:not(:checked) + label,
.theme_ink .radio-custom [type="radio"]:checked + label,
.theme_ink .checkbox-custom [type="checkbox"]:not(:checked) + label,
.theme_ink .checkbox-custom [type="checkbox"]:checked + label {
    color: var(--va-cream) !important;
}
.theme_ink .table-wrap .table thead,
.theme_ink .table-wrap .table thead a {
    color: var(--va-ink) !important;     /* Ink on Lime */
}
.theme_ink .tabbed__head .tabbed__head_tabs li {
    color: var(--va-cream) !important;
    background: var(--va-ink-soft) !important;
}
.theme_ink .tabbed__head .tabbed__head_tabs li.current {
    color: var(--va-ink) !important;
    background: var(--va-lime) !important;
    border-color: var(--va-lime) !important;
}
.theme_ink .ticket__body_block .block--head .contact b {
    color: var(--va-cream) !important;
}
.theme_ink .ticket__body_block.response {
    border: 1px solid color-mix(in srgb, var(--va-lime) 45%, transparent) !important;
}
.theme_ink .ticket__body_block.response .block--head .contact b {
    color: var(--va-lime) !important;
}
.theme_ink .notification.green p:first-child  { color: var(--success); }
.theme_ink .notification.red p:first-child    { color: var(--error); }
.theme_ink .notification.orange p:first-child { color: var(--warning); }
.theme_ink .notification.blue p:first-child   { color: var(--info); }
.theme_ink .form-group .form-control__error {
    background: none !important;
}
/* Hesk attribution stays intact and legible (EULA requirement). */
.theme_ink #cc-link a,
.theme_ink .footer a {
    color: var(--va-cream-muted) !important;
}

/* ── Deliberate Lime signals ──
   --secondary is Cream (above), so the few places that should genuinely read as
   "Ink on Lime" are named here rather than inherited. */
.theme_ink .table-wrap .table thead {
    background-color: var(--va-lime) !important;
}
.theme_ink .table-wrap .table tbody tr.new td:first-child::before {
    background-color: var(--va-lime) !important;   /* unread-ticket marker */
}

/* ── Form fields ──
   Hesk borders inputs with --secondary. A full-strength border on every field
   is too loud on Ink, so fields get a hairline and Lime marks focus only. */
.theme_ink .form input.form-control,
.theme_ink .form textarea.form-control,
.theme_ink .form select,
.theme_ink .dz-default.dz-message,
.theme_ink .dropzone {
    border-color: var(--va-hairline) !important;
}
.theme_ink .form input.form-control:hover,
.theme_ink .form textarea.form-control:hover {
    border-color: color-mix(in srgb, var(--va-cream) 32%, transparent) !important;
}
.theme_ink .form input.form-control:focus,
.theme_ink .form textarea.form-control:focus,
.theme_ink .form select:focus {
    border-color: var(--va-lime) !important;
}
.theme_ink .form-group.error input,
.theme_ink .form.invalid .form-control.isError,
.theme_ink .invalid .form-control {
    border-color: var(--error) !important;
}

/* "Add file" ships as .btn-full, which would put a second lime CTA next to
   Submit. Demote it to the secondary treatment. */
.theme_ink .btn.btn-full.fileinput-button {
    background-color: transparent !important;
    color: var(--va-cream) !important;
    border: 1px solid var(--va-hairline) !important;
}
.theme_ink .btn.btn-full.fileinput-button:hover {
    background-color: var(--va-lime) !important;
    color: var(--va-ink) !important;
    border-color: var(--va-lime) !important;
}

/* Alert titles ship as --gray-7 (#26282a), which disappears on this surface. */
.theme_ink .alert__title {
    color: var(--va-cream) !important;
}
.theme_ink .alert.danger .alert__title  { color: var(--error) !important; }
.theme_ink .alert.warning .alert__title { color: var(--warning) !important; }

/* "Go back" ships as a filled --secondary button; keep it a quiet secondary. */
.theme_ink .go-back-button {
    background-color: transparent !important;
}
.theme_ink .go-back-button,
.theme_ink .go-back-button .link {
    color: var(--va-cream) !important;
}
.theme_ink .go-back-button:hover .link {
    color: var(--va-lime) !important;
}
.theme_ink .tabbed__head .tabbed__head_tabs li:not(.current):hover {
    background: var(--va-lime) !important;
    color: var(--va-ink) !important;
}