/*
This file should only be used by hesk clients to apply any custom overwrites to core files,
and ensure these changes are included in the bundled css.

Please only change this file if you know what you are doing.
Any general thematic changes should rather be done as part of /theme changes of theme_overrides.css
*/

:root {
    /* Override main theme colors for FreeScout / Actycrea look */
    --main-background: #ffffff;
    --header__bg: #ffffff;
    --header_nav__clr: #6b7480;
    --header_nav__hover_clr: #303030;
    --header_logo__clr: #303030;
    --header_profile__clr: #303030;
    --header_profile__menu-bg: #ffffff;
    --primary: #303030;
    --secondary: #6b7480;
    --tertiary: #303030;
    --font__pri-clr: #303030;
    --font__sec-clr: #6b7480;
    --surface: #ffffff;
    --link__pri-clr: #6b7480;
    --link__pri-hover-clr: #303030;
    --icon_circle__clr: #ffffff;
    --icon_circle__bg: #6b7480;

    /* Input fields - white background */
    --input-bg: #ffffff;
    --input-clr: #303030;

    /* Buttons - outlined/ghost style */
    --btn__bg-clr-pri: transparent;
    --btn__clr-pri: #303030;
    --btn__border-clr-pri: #303030;

    /* Search area - light background instead of blue */
    --search__bg: #f5f5f5;
    --search__title-clr: #303030;
    --search__icon-fill: #6b7480;
    --search__input-placeholder-clr: #999999;
}

/* ================================================================
   LAYOUT OVERRIDES
   ================================================================ */

/* Header: white with subtle bottom border */
.header {
    border-bottom: 1px solid #e1e1e1;
    box-shadow: none;
}

.main__content {
    background-color: #ffffff;
}

/* Panels/cards: subtle border instead of heavy shadow */
.panel,
.form-submit-ticket {
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ================================================================
   INPUT FIELD OVERRIDES
   ================================================================ */

/* Override input fields: white background, thin gray border */
.form input.form-control,
.form textarea.form-control {
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
    border-radius: 6px !important;
    color: #303030 !important;
}

.form input.form-control:hover,
.form textarea.form-control:hover {
    border-color: #999999 !important;
}

.form input.form-control:focus,
.form textarea.form-control:focus {
    border-color: #303030 !important;
    box-shadow: none !important;
}

.form select.form-control {
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
    border-radius: 6px !important;
    color: #303030 !important;
}

.form select.form-control:hover {
    border-color: #999999 !important;
}

.form select.form-control:focus {
    border-color: #303030 !important;
}

/* ================================================================
   BUTTON OVERRIDES - Rounded outlined style like FreeScout
   ================================================================ */

/* Main action buttons: outlined, rounded */
.btn-full {
    background-color: transparent !important;
    color: #303030 !important;
    border: 1px solid #303030 !important;
    border-radius: 20px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-full:hover {
    background-color: #6b7480 !important;
    color: #ffffff !important;
    border-color: #6b7480 !important;
}

/* Blue-border button: also rounded outlined */
.btn--blue-border {
    border-radius: 20px !important;
    background-color: transparent !important;
    color: #303030 !important;
    border-color: #303030 !important;
}

.btn--blue-border:hover {
    background-color: #6b7480 !important;
    color: #ffffff !important;
    border-color: #6b7480 !important;
}

/* Border button: rounded */
.btn-border {
    border-radius: 20px !important;
    border-color: #cccccc !important;
    color: #6b7480 !important;
}

.btn-border:hover {
    background-color: #6b7480 !important;
    color: #ffffff !important;
    border-color: #6b7480 !important;
}

/* ================================================================
   DROPDOWN OVERRIDES
   ================================================================ */

.dropdown__list,
.dropdown-list {
    border-radius: 6px;
}

/* ================================================================
   FOOTER OVERRIDES
   ================================================================ */

.footer {
    background-color: #ffffff !important;
    border-top: none !important;
}

.footer p,
.footer a {
    color: #999999 !important;
}

.footer a:hover {
    color: #303030 !important;
}

/* ================================================================
   NOTIFICATION / ALERT OVERRIDES
   ================================================================ */

.notification {
    border-radius: 6px;
}

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

.search__form {
    background-color: #f5f5f5;
    border-radius: 6px;
}

.search__form .form-group input {
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
    border-radius: 6px !important;
}

.search__form .form-group input:hover,
.search__form .form-group input:focus {
    border-color: #303030 !important;
}

/* ================================================================
   TICKET LIST / TABLE OVERRIDES
   ================================================================ */

.tickets__table,
.table {
    border-radius: 6px;
    overflow: hidden;
}

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

.breadcrumbs a {
    color: #6b7480 !important;
}

.breadcrumbs a:hover {
    color: #303030 !important;
}

/* ================================================================
   MISC
   ================================================================ */

/* Form submit ticket card */
.form-submit-ticket {
    background-color: #ffffff;
}

/* Category select cards */
.navlink {
    border-radius: 6px !important;
}

/* Step bar */
.step-bar__item.is-current {
    color: #303030;
}

/* ================================================================
   RESPONSIVE HEADER / HAMBURGER MENU OVERRIDES
   ================================================================ */

.cust-help .header__toggle {
    display: none;
}

@media screen and (max-width: 768px) {
    .cust-help .header__inner {
        position: relative;
        flex-wrap: nowrap;
        gap: 15px;
    }

    .cust-help .header__toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1001;
        order: 3;
        flex-shrink: 0;
    }

    .cust-help .header__toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--header_nav__clr, #6b7480);
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .cust-help .header__toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .cust-help .header__toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .cust-help .header__toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .cust-help .header__inner .header__nav {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--header__bg, #ffffff);
        border-top: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;
        padding: 15px;
        margin: 0;
        z-index: 1000;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }

    .cust-help .header__inner .header__nav.active {
        display: flex;
    }

    .cust-help .header__inner .header__nav .nav-item {
        margin: 10px 0;
    }

    .cust-help .header__inner .header__nav .nav-item:not(:first-child) {
        margin-left: 0;
    }

    /* Style adjusting for profile user if logged in */
    .cust-help .header__inner .header__nav .profile__user {
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 0;
        height: auto;
    }

    .cust-help .header__inner .header__nav .profile__user .user__name svg.icon-chevron-down {
        display: none;
    }

    .cust-help .header__inner .header__nav .profile__user .user__ava,
    .cust-help .header__inner .header__nav .profile__user .user__name {
        cursor: default !important;
    }

    .cust-help .header__inner .header__nav .profile__user .profile__menu {
        position: static;
        box-shadow: none;
        display: block !important;
        padding: 10px 0 0 0;
        border-radius: 0;
        width: 100%;
    }

    .cust-help .header__inner .header__nav .profile__user .profile__menu .profile--logout {
        background-color: transparent;
        border-top: 1px solid #e1e1e1;
        margin-top: 10px;
    }

    .cust-help .header__inner .header__nav .profile__user .profile__menu .profile--logout a {
        background-color: #6b7480;
        color: #FFFFFF;
        justify-content: flex-start;
        padding-left: 15px;
    }

    .cust-help .header__inner .header__nav .profile__user .profile__menu .profile--logout a:hover {
        background-color: var(--btn_full__hover_bg);
    }

    .cust-help .header__inner .header__nav .profile__user .profile__menu .profile--logout a .icon-log-out {
        fill: #FFFFFF;
    }

    /* Align logo and lang properly on mobile */
    .cust-help .header__logo {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cust-help .header__logo img {
        flex-shrink: 0;
    }

    .cust-help .header__inner .header__lang {
        order: 2;
        margin-left: auto;
        margin-right: 0;
        flex-shrink: 0;
    }
}