/* =========================================================================
   HI Transportes — HESK Visual Upgrade
   Reskin sobre o app.css vendor. Não altera nenhum comportamento JS.
   Paleta acento #8fdf82, superfícies claras, cantos arredondados (SaaS look).
   Escrito para carregar DEPOIS do css/app.css.
   ========================================================================= */

:root {
    --hi-accent:        #8fdf82;
    --hi-accent-dark:   #5fb856;
    --hi-accent-soft:   #e6f8e2;
    --hi-accent-glow:   rgba(143, 223, 130, 0.35);

    --hi-bg:            #f4f6f8;
    --hi-surface:       #ffffff;
    --hi-sidebar:       #f7f8fa;
    --hi-sidebar-hover: #eef0f4;
    --hi-sidebar-active:#e9ebef;

    --hi-text:          #1a1d21;
    --hi-text-strong:   #0f1113;
    --hi-muted:         #6b7280;
    --hi-muted-soft:    #9ca3af;

    --hi-border:        #e5e7eb;
    --hi-border-strong: #d1d5db;
    --hi-focus:         rgba(143, 223, 130, 0.45);

    --hi-radius-sm:     8px;
    --hi-radius:        12px;
    --hi-radius-lg:     16px;
    --hi-radius-pill:   999px;

    --hi-shadow-sm:     0 1px 2px rgba(16, 24, 40, 0.05);
    --hi-shadow:        0 4px 12px rgba(16, 24, 40, 0.06);
    --hi-shadow-lg:     0 12px 32px rgba(16, 24, 40, 0.08);

    --hi-font:          "Lato", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* -------------------------------------------------------------------------
   1. SHELL: wrapper, main, main content
   ------------------------------------------------------------------------- */

body {
    background-color: var(--hi-bg);
}

.wrapper {
    background-color: var(--hi-bg) !important;
    color: var(--hi-text) !important;
    font-family: var(--hi-font) !important;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
}

.main {
    background-color: var(--hi-bg);
}

.main__content {
    padding: 20px 24px 24px 24px;
}

.main__content > .contr,
.main__content.tickets,
.main__content.ticket,
.main__content.categories,
.main__content.team,
.main__content.knowledge,
.main__content.settings,
.main__content.templates {
    color: var(--hi-text);
}

/* Text default color inside content */
.main p,
.main span,
.main label,
.main li,
.main td,
.main th,
.main h1,
.main h2,
.main h3,
.main h4,
.main h5,
.main h6 {
    color: inherit;
}

/* -------------------------------------------------------------------------
   2. SIDEBAR (.main-menu / .navbar)
   Antes: azul escuro #133e5e. Depois: sidebar clara, item ativo em pill verde.
   ------------------------------------------------------------------------- */

.main-menu {
    background-color: var(--hi-sidebar) !important;
    color: var(--hi-text) !important;
    border-right: 1px solid var(--hi-border);
    box-shadow: none;
}

/* Sidebar header (logo area) */
.navbar__header {
    padding: 20px 0 12px;
    border-bottom: 1px solid var(--hi-border);
    margin-bottom: 8px;
}

.navbar__toggler,
.navbar__toggler .icon {
    color: var(--hi-muted) !important;
}

.navbar__toggler:hover .icon,
.navbar__toggler .icon:hover {
    color: var(--hi-text) !important;
}

.navbar__logo,
a.navbar__logo {
    color: var(--hi-text-strong) !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    letter-spacing: -0.2px;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

.navbar__logo::before,
a.navbar__logo::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hi-accent);
    box-shadow: 0 0 0 3px var(--hi-accent-soft);
    flex-shrink: 0;
}

.main-menu.is-toggled .navbar__logo::before,
.main-menu.is-toggled a.navbar__logo::before {
    display: none;
}

/* Menu list */
.navbar__list {
    padding: 8px 8px 8px 8px;
}

.navbar__list li {
    margin: 2px 8px !important;
    border-radius: var(--hi-radius);
    overflow: hidden;
    transition: background-color 120ms ease;
}

.navbar__list li.separator {
    background-color: var(--hi-border) !important;
    opacity: 1 !important;
    margin: 8px 12px !important;
}

.listitem {
    color: var(--hi-muted);
    border-radius: var(--hi-radius);
}

.listitem:hover {
    background-color: var(--hi-sidebar-hover) !important;
    color: var(--hi-text);
}

.listitem.current {
    background-color: var(--hi-sidebar-active) !important;
    color: var(--hi-text-strong) !important;
    box-shadow: inset 0 0 0 1px var(--hi-border);
}

/* Green accent bar on the active item */
.listitem.current::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--hi-accent);
}

.navbar__list li.is-active,
.navbar__list li.submenu-is-opened {
    background-color: var(--hi-sidebar-hover) !important;
}

.navbar__list li.current .listitem__icon,
.navbar__list li.current .listitem__menu > a {
    color: var(--hi-text-strong) !important;
}

.navbar__list li.is-active:hover .listitem__icon,
.navbar__list li.submenu-is-opened:hover .listitem__icon,
.navbar__list li.is-active:hover::after,
.navbar__list li.submenu-is-opened:hover::after,
.navbar__list li.current::after {
    color: var(--hi-text) !important;
    border-color: transparent transparent var(--hi-muted) !important;
}

.listitem__icon {
    color: var(--hi-muted-soft);
}

.listitem:hover .listitem__icon,
.listitem.current .listitem__icon {
    color: var(--hi-text-strong);
}

/* Submenu */
.navbar__list li .submenu__list .submenu__listitem.current::before {
    background: var(--hi-accent) !important;
}

.submenu__listitem,
.submenu__listitem a {
    color: var(--hi-muted);
}

/* Vendor paints the selected submenu item white for the original dark sidebar */
.navbar__list li.current .submenu__list li.current,
.navbar__list li.current .submenu__list li.current a,
.submenu__listitem.current,
.submenu__listitem.current a {
    color: var(--hi-text-strong) !important;
    font-weight: 700;
}

.submenu__listitem:hover,
.submenu__listitem:hover a {
    color: var(--hi-text-strong);
}

.submenu__listitem:before {
    background-color: transparent !important;
    border-top: 1px solid var(--hi-border) !important;
}

.submenu__listitem:hover:before {
    background-color: var(--hi-sidebar-hover) !important;
}

/* Notification badge inside menu */
.listitem__notification,
.admin-nav-badge {
    background-color: var(--hi-accent) !important;
    color: var(--hi-text-strong) !important;
    font-weight: 700;
}

/* Collapsed sidebar popover keeps light theme */
@media screen and (min-width: 900px) {
    .main-menu.is-toggled .listitem__menu {
        background-color: var(--hi-surface) !important;
        color: var(--hi-text) !important;
        border: 1px solid var(--hi-border);
        border-radius: var(--hi-radius);
        box-shadow: var(--hi-shadow);
    }
    .main-menu.is-toggled .submenu__list {
        background-color: transparent !important;
    }
    .main-menu.is-toggled .listitem__menu .submenu__listitem:hover {
        background-color: var(--hi-sidebar-hover) !important;
    }
    .main-menu.is-toggled .navbar__toggler {
        color: var(--hi-text) !important;
    }
}

/* -------------------------------------------------------------------------
   3. TOP HEADER (.header)
   ------------------------------------------------------------------------- */

.header {
    background-color: var(--hi-surface);
    border-bottom: 1px solid var(--hi-border) !important;
    box-shadow: var(--hi-shadow-sm);
    min-height: 64px;
}

.header .icon,
.header .icon:hover,
.header button:hover .icon,
.header .header__left form:hover .btn svg {
    fill: var(--hi-muted) !important;
}

.header .profile__item .btn:hover svg,
.header .header__left .search-clear:hover .icon {
    fill: var(--hi-text-strong) !important;
}

/* Search input inside header */
.header .header__left input[type="text"],
.header .header__left input[type="search"] {
    background: var(--hi-bg);
    border: 1px solid var(--hi-border);
    border-radius: var(--hi-radius-pill);
    padding: 8px 16px 8px 40px;
    color: var(--hi-text);
    transition: box-shadow 120ms ease, border-color 120ms ease;
}

.header .header__left input:focus {
    outline: none;
    border-color: var(--hi-accent);
    box-shadow: 0 0 0 3px var(--hi-focus);
}

/* Profile dropdown / avatar */
.header .profile__item.profile__item--notification .notification-list,
.header .profile__item .dropdown-list {
    border-radius: var(--hi-radius) !important;
    border: 1px solid var(--hi-border) !important;
    box-shadow: var(--hi-shadow-lg) !important;
}

/* Trigger: subtle pill instead of the vendor's dark blue block */
.header .profile__user {
    height: auto !important;
    margin: 12px 8px 12px 0;
    padding: 6px 10px !important;
    border-radius: var(--hi-radius-pill);
    color: var(--hi-text) !important;
    transition: background-color 120ms ease;
}

.header .profile__user:hover,
.header .profile__user.active {
    background-color: var(--hi-sidebar-hover) !important;
}

.header .profile__user .user__ava {
    background-color: var(--hi-accent) !important;
    color: var(--hi-text-strong) !important;
    font-weight: 700;
}

.header .profile__user.active .user__ava {
    background-color: var(--hi-accent) !important;
    color: var(--hi-text-strong) !important;
}

.header .profile__user .user__name p span,
.header .profile__user.active .user__name p span {
    color: var(--hi-text) !important;
    font-weight: 600;
}

.header .profile__user .icon-chevron-down,
.header .profile__user.active .icon-chevron-down {
    fill: var(--hi-muted) !important;
}

/* Panel */
.header .profile__user .profile__menu {
    width: auto;
    min-width: 220px;
    margin-top: 6px;
    padding: 6px;
    background: var(--hi-surface);
    border: 1px solid var(--hi-border);
    border-radius: var(--hi-radius);
    box-shadow: var(--hi-shadow-lg);
}

/* Menu rows: both entries become plain list items */
.header .profile__user .profile__menu .profile--view {
    padding: 0;
}

.header .profile__user .profile__menu .profile--view .btn-border,
.header .profile__user .profile__menu .profile--view .btn-border:hover {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0 !important;
    height: 38px;
    margin: 0;
    padding: 0 10px;
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--hi-radius-sm) !important;
    color: var(--hi-text) !important;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.header .profile__user .profile__menu .profile--view .btn-border:hover {
    background: var(--hi-sidebar-hover) !important;
}

.header .profile__user .profile__menu .profile--logout {
    margin-top: 6px;
    padding-top: 6px;
    background: transparent;
    border-top: 1px solid var(--hi-border);
}

.header .profile__user .profile__menu .profile--logout a {
    justify-content: flex-start;
    height: 38px;
    padding: 0 10px;
    border-radius: var(--hi-radius-sm);
    color: var(--hi-text) !important;
    font-weight: 600;
}

.header .profile__user .profile__menu .profile--logout a:hover {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
}

.header .profile__user .profile__menu .profile--logout a .icon-log-out {
    fill: var(--hi-muted) !important;
}

.header .profile__user .profile__menu .profile--logout a:hover .icon-log-out {
    fill: #b91c1c !important;
}

/* Notification / badge */
.header .badge,
.badge {
    background-color: #ef4444 !important;
    color: #fff !important;
    border-radius: var(--hi-radius-pill);
    font-weight: 700;
}

/* -------------------------------------------------------------------------
   4. LINKS & TYPOGRAPHY
   ------------------------------------------------------------------------- */

.main a:not(.btn):not(.btn-full):not(.btn-border):not(.listitem__caption):not(.navbar__logo) {
    color: var(--hi-text-strong);
}

.main a:not(.btn):not(.btn-full):not(.btn-border):hover {
    color: var(--hi-accent-dark);
}

th > a,
h3 > a {
    color: var(--hi-text-strong) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--hi-text-strong);
    font-weight: 700;
    letter-spacing: -0.2px;
}

/* -------------------------------------------------------------------------
   5. BUTTONS
   ------------------------------------------------------------------------- */

.btn-full {
    background-color: var(--hi-accent) !important;
    color: var(--hi-text-strong) !important;
    border: 1px solid var(--hi-accent) !important;
    border-radius: var(--hi-radius) !important;
    font-weight: 700;
    box-shadow: var(--hi-shadow-sm);
    transition: background-color 120ms ease, box-shadow 120ms ease, transform 60ms ease;
}

.btn-full:hover {
    background-color: var(--hi-accent-dark) !important;
    border-color: var(--hi-accent-dark) !important;
    color: var(--hi-text-strong) !important;
    box-shadow: var(--hi-shadow);
}

.btn-full:active {
    transform: translateY(1px);
}

.btn-full.disabled,
.btn-full:disabled {
    background-color: var(--hi-border-strong) !important;
    border-color: var(--hi-border-strong) !important;
    color: var(--hi-muted) !important;
    box-shadow: none;
}

.btn-border {
    background: var(--hi-surface) !important;
    border: 1px solid var(--hi-border-strong) !important;
    color: var(--hi-text) !important;
    border-radius: var(--hi-radius) !important;
    font-weight: 600;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.btn-border:hover {
    background: var(--hi-sidebar-hover) !important;
    border-color: var(--hi-text) !important;
    color: var(--hi-text-strong) !important;
}

.btn {
    border-radius: var(--hi-radius);
    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

/* -------------------------------------------------------------------------
   6. FORMS
   ------------------------------------------------------------------------- */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea,
.selectize-input {
    background-color: var(--hi-surface) !important;
    border: 1px solid var(--hi-border) !important;
    border-radius: var(--hi-radius) !important;
    color: var(--hi-text) !important;
    padding: 10px 12px;
    font-family: var(--hi-font);
    font-size: 14px;
    box-shadow: none !important;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus,
.selectize-input.focus {
    outline: none;
    border-color: var(--hi-accent) !important;
    box-shadow: 0 0 0 3px var(--hi-focus) !important;
}

label {
    color: var(--hi-text);
    font-weight: 600;
}

/* Custom checkbox — respect original layout, retint accent */
.checkbox-custom [type='checkbox']:checked + label:before {
    background-color: var(--hi-accent) !important;
    border-color: var(--hi-accent) !important;
}

.checkbox-custom [type='checkbox']:checked + label:after {
    color: var(--hi-text-strong) !important;
}

/* Dropdown menus */
.dropdown-list,
.dropdown-select .dropdown-list {
    background: var(--hi-surface) !important;
    border: 1px solid var(--hi-border) !important;
    border-radius: var(--hi-radius) !important;
    box-shadow: var(--hi-shadow-lg) !important;
    padding: 6px !important;
}

.dropdown .dropdown-list > li,
.dropdown-select .dropdown-list > li {
    border-radius: var(--hi-radius-sm);
}

.dropdown .dropdown-list > li:hover,
.dropdown-select .dropdown-list > li:hover {
    background-color: var(--hi-sidebar-hover) !important;
}

.dropdown .dropdown-list > li.selected,
.dropdown-select .dropdown-list > li.selected {
    background-color: var(--hi-accent-soft) !important;
    color: var(--hi-text-strong) !important;
}

/* -------------------------------------------------------------------------
   7. CARDS / SURFACES / TABLES
   ------------------------------------------------------------------------- */

.banner,
.notice,
.info,
.warning,
.success {
    border-radius: var(--hi-radius) !important;
    border: 1px solid var(--hi-border) !important;
    background-color: var(--hi-surface) !important;
    box-shadow: var(--hi-shadow-sm);
}

.table,
table.ticket-list,
.table-wrap table {
    background-color: var(--hi-surface);
    border-radius: var(--hi-radius) !important;
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0;
}

.table thead,
table.ticket-list thead,
.table-wrap thead {
    background-color: var(--hi-accent) !important;
    color: var(--hi-text-strong) !important;
}

.table thead th,
table.ticket-list thead th,
.table-wrap thead th {
    background-color: var(--hi-accent) !important;
    color: var(--hi-text-strong) !important;
    font-weight: 700;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--hi-accent-dark) !important;
    padding: 12px 16px;
    font-size: 11px;
}

.table thead th:not(:first-child),
table.ticket-list thead th:not(:first-child),
.table-wrap thead th:not(:first-child) {
    border-left: 1px solid rgba(15, 17, 19, .1) !important;
}

/* Sort links and arrows: vendor paints them white for the original blue header */
.table thead th > a,
.table thead .sort,
.table thead th > a:hover {
    color: var(--hi-text-strong) !important;
}

.table thead th .handle::before {
    border-bottom-color: var(--hi-text-strong);
}

.table thead th .handle::after {
    border-top-color: var(--hi-text-strong);
}

.table thead th > a:hover .sort {
    opacity: .7;
}

/* Header checkbox needs contrast against the green background */
.table thead th.table__first_th .checkbox-custom [type='checkbox'] + label:before {
    background-color: var(--hi-surface) !important;
    border-color: var(--hi-accent-dark) !important;
}

.table tbody td,
table.ticket-list tbody td,
.table-wrap tbody td {
    border-bottom: 1px solid var(--hi-border) !important;
    padding: 14px 16px;
    color: var(--hi-text);
    background-color: var(--hi-surface);
    transition: background-color 100ms ease;
}

.table tbody tr:hover td,
table.ticket-list tbody tr:hover td,
.table-wrap tbody tr:hover td {
    background-color: var(--hi-sidebar-hover) !important;
}

.table tbody tr:last-child td,
table.ticket-list tbody tr:last-child td,
.table-wrap tbody tr:last-child td {
    border-bottom: none !important;
}

/* Ticket list container (admin_main sets margin-left:-16px margin-right:-24px) */
.main__content.tickets {
    padding-top: 8px;
}

.main__content.tickets > div {
    background-color: var(--hi-surface);
    border-radius: var(--hi-radius-lg);
    border: 1px solid var(--hi-border);
    box-shadow: var(--hi-shadow-sm);
    overflow: hidden;
}

/* Individual ticket page */
.main__content.ticket {
    background: transparent;
}

.ticket__body_block,
.note,
.ticket__reply,
.ticket__block,
.card,
.tabs__content,
.settings__block,
.knowledge__tabs .knowledge__tabs_tab {
    background: var(--hi-surface);
    border: 1px solid var(--hi-border);
    border-radius: var(--hi-radius);
    box-shadow: var(--hi-shadow-sm);
}

/* -------------------------------------------------------------------------
   8. PRIORITY / STATUS PILLS
   Keep semantic meaning but modernize. .priority3 = low → verde marca.
   ------------------------------------------------------------------------- */

.priority3,
.dropdown.priority[data-value="low"] span,
.dropdown-select.priority[data-value="low"] span,
.dropdown.priority[data-value="3"] span,
.dropdown-select.priority[data-value="3"] span {
    color: var(--hi-accent-dark) !important;
}

.priority2 { color: #6b7280 !important; }
.priority1 { color: #f59e0b !important; }
.priority0 { color: #dc2626 !important; }

.bg-critical {
    background-color: rgba(220, 38, 38, 0.08) !important;
}

/* Status pills */
[class*="status-"] {
    border-radius: var(--hi-radius-pill) !important;
}

/* -------------------------------------------------------------------------
   9. LOGIN (admin/index.php uses .reg__wrap)
   ------------------------------------------------------------------------- */

.wrapper.login {
    background:
        radial-gradient(circle at 85% 15%, var(--hi-accent-glow), transparent 55%),
        radial-gradient(circle at 15% 85%, rgba(143, 223, 130, 0.15), transparent 60%),
        var(--hi-bg) !important;
}

.reg__wrap {
    background: var(--hi-surface);
    border: 1px solid var(--hi-border);
    border-radius: var(--hi-radius-lg);
    box-shadow: var(--hi-shadow-lg);
    overflow: hidden;
}

.reg__image {
    background: linear-gradient(135deg, #eaf7e6, #b6ecad) !important;
    color: var(--hi-text-strong);
}

.reg__section {
    background: var(--hi-surface);
    padding: 32px !important;
}

.reg__section h1,
.reg__section h2 {
    color: var(--hi-text-strong);
}

/* -------------------------------------------------------------------------
   10. TABS
   ------------------------------------------------------------------------- */

.tabs__nav li,
.emails__head_tabs li,
.knowledge__head_tabs li {
    border-radius: var(--hi-radius) var(--hi-radius) 0 0;
    color: var(--hi-muted);
    transition: color 120ms ease, background-color 120ms ease;
}

.tabs__nav li.current,
.emails__head_tabs li.current,
.knowledge__head_tabs li.current {
    color: var(--hi-text-strong) !important;
    border-bottom: 2px solid var(--hi-accent) !important;
}

/* -------------------------------------------------------------------------
   11. MODALS
   ------------------------------------------------------------------------- */

.modal,
.jquery-modal .modal,
.reveal-modal {
    border-radius: var(--hi-radius-lg) !important;
    border: 1px solid var(--hi-border) !important;
    box-shadow: var(--hi-shadow-lg) !important;
}

/* -------------------------------------------------------------------------
   12. CUSTOMER / PUBLIC PORTAL (theme/hesk3/customer)
   Loaded via head.txt from the customer templates.
   ------------------------------------------------------------------------- */

body.cust-help {
    background-color: var(--hi-bg);
}

.cust-help .wrapper {
    background-color: var(--hi-bg) !important;
    color: var(--hi-text) !important;
    font-family: var(--hi-font) !important;
}

.cust-help .header {
    background-color: var(--hi-surface) !important;
    border-bottom: 1px solid var(--hi-border) !important;
    box-shadow: var(--hi-shadow-sm);
}

.cust-help .header__logo {
    color: var(--hi-text-strong) !important;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.cust-help .header__inner .header__nav .nav-item a {
    color: var(--hi-muted);
    font-weight: 600;
    transition: color 120ms ease;
}

.cust-help .header__inner .header__nav .nav-item a:hover {
    color: var(--hi-accent-dark);
}

.cust-help .contr {
    max-width: 1200px;
    color: var(--hi-text);
}

.cust-help .breadcrumbs {
    background: transparent;
}

.cust-help .breadcrumbs__inner a {
    color: var(--hi-muted);
}

.cust-help .breadcrumbs__inner a:hover {
    color: var(--hi-accent-dark);
}

.cust-help .kb--folder {
    background: var(--hi-surface);
    border: 1px solid var(--hi-border);
    border-radius: var(--hi-radius);
    box-shadow: var(--hi-shadow-sm);
    transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.cust-help .kb--folder:hover {
    box-shadow: var(--hi-shadow);
    border-color: var(--hi-accent);
    transform: translateY(-1px);
}

.cust-help .kb-suggestions.boxed {
    background-color: var(--hi-surface) !important;
    border: 1px solid var(--hi-border);
    border-radius: var(--hi-radius);
    box-shadow: var(--hi-shadow);
}

/* Public buttons */
.cust-help .btn-full {
    background-color: var(--hi-accent) !important;
    color: var(--hi-text-strong) !important;
    border-color: var(--hi-accent) !important;
}

.cust-help .btn-full:hover {
    background-color: var(--hi-accent-dark) !important;
    border-color: var(--hi-accent-dark) !important;
}

/* Public forms already covered by the generic .form-control rules above. */

/* Public login / register cards */
.cust-help .form-block,
.cust-help .article,
.cust-help .articles__block,
.cust-help .main__content > .contr > div,
.cust-help .kb__content {
    color: var(--hi-text);
}

/* Hero search area on the homepage */
.cust-help .help-search {
    background:
        radial-gradient(circle at 90% 20%, var(--hi-accent-glow), transparent 60%),
        var(--hi-surface);
    border: 1px solid var(--hi-border);
    border-radius: var(--hi-radius-lg);
    padding: 40px 32px;
    margin-bottom: 24px;
    box-shadow: var(--hi-shadow-sm);
}

.cust-help .search__title {
    color: var(--hi-text-strong);
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -0.5px;
    text-align: center;
    margin-bottom: 20px;
}

.cust-help .search__form .form-group input {
    border-radius: var(--hi-radius-pill) !important;
    border: 1px solid var(--hi-border) !important;
    background: var(--hi-bg) !important;
    padding: 12px 20px 12px 44px !important;
    height: 48px;
    font-size: 15px;
    color: var(--hi-text) !important;
    box-shadow: var(--hi-shadow-sm);
}

.cust-help .search__form .form-group input:focus,
.cust-help .search__form .form-group input:hover {
    border-color: var(--hi-accent) !important;
    box-shadow: 0 0 0 3px var(--hi-focus) !important;
    background: var(--hi-surface) !important;
}

.cust-help .search__form .form-group .icon-search {
    fill: var(--hi-muted);
}

.cust-help .search__form .search__submit {
    background-color: var(--hi-accent) !important;
    color: var(--hi-text-strong) !important;
    border-color: var(--hi-accent) !important;
    border-radius: var(--hi-radius-pill) !important;
}

.cust-help .search__form .search__submit:hover {
    background-color: var(--hi-accent-dark) !important;
    border-color: var(--hi-accent-dark) !important;
}

/* Homepage nav cards (Submit ticket / My tickets) */
.cust-help .nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.cust-help .navlink {
    background: var(--hi-surface);
    border: 1px solid var(--hi-border);
    border-radius: var(--hi-radius);
    box-shadow: var(--hi-shadow-sm);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
    color: var(--hi-text);
}

.cust-help .navlink:hover {
    box-shadow: var(--hi-shadow);
    border-color: var(--hi-accent);
    transform: translateY(-2px);
    text-decoration: none;
}

.cust-help .navlink__title {
    color: var(--hi-text-strong);
    font-weight: 700;
    margin-bottom: 4px;
}

.cust-help .navlink__descr {
    color: var(--hi-muted);
    font-size: 13px;
}

/* Circular icon badge */
.cust-help .icon-in-circle {
    width: 44px;
    height: 44px;
    border-radius: var(--hi-radius-pill);
    background: var(--hi-accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(143, 223, 130, 0.4);
}

.cust-help .icon-in-circle .icon {
    fill: var(--hi-accent-dark);
    width: 20px;
    height: 20px;
}

/* Knowledgebase card + tabs */
.cust-help .article {
    background: var(--hi-surface);
    border: 1px solid var(--hi-border);
    border-radius: var(--hi-radius);
    box-shadow: var(--hi-shadow-sm);
    padding: 24px;
    margin-bottom: 24px;
}

.cust-help .article__heading {
    color: var(--hi-text-strong);
    font-weight: 700;
    margin-bottom: 16px;
}

.cust-help .article__heading a {
    color: var(--hi-text-strong);
}

.cust-help .tabbed__head_tabs {
    border-bottom: 1px solid var(--hi-border);
    display: flex;
    gap: 8px;
    padding: 0 0 0 4px;
    margin-bottom: 12px;
}

.cust-help .tabbed__head_tabs li {
    padding: 10px 14px;
    color: var(--hi-muted);
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms ease, border-color 120ms ease;
}

.cust-help .tabbed__head_tabs li.current,
.cust-help .tabbed__head_tabs li:hover {
    color: var(--hi-text-strong);
}

.cust-help .tabbed__head_tabs li.current {
    border-bottom-color: var(--hi-accent);
}

/* Article preview rows */
.cust-help .preview {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: var(--hi-radius);
    transition: background-color 120ms ease;
    color: var(--hi-text);
}

.cust-help .preview:hover {
    background: var(--hi-sidebar-hover);
    text-decoration: none;
}

.cust-help .preview__title {
    color: var(--hi-text-strong);
    font-weight: 700;
    margin-bottom: 4px;
}

.cust-help .lightgrey {
    color: var(--hi-muted) !important;
}

/* Article footer button (blue-border → outlined accent) */
.cust-help .btn--blue-border {
    border-radius: var(--hi-radius) !important;
    border: 1px solid var(--hi-accent) !important;
    color: var(--hi-accent-dark) !important;
    background: transparent !important;
    transition: background-color 120ms ease, color 120ms ease;
}

.cust-help .btn--blue-border:hover {
    background: var(--hi-accent) !important;
    color: var(--hi-text-strong) !important;
}

/* Form headings inside customer forms */
.cust-help .article__heading--form {
    color: var(--hi-text-strong);
    font-weight: 700;
}

/* Public KB folder cards get bigger padding for breathing room */
.cust-help .kb--folder {
    padding: 16px 20px;
}

/* Public breadcrumbs — subtle */
.cust-help .breadcrumbs {
    padding: 8px 0;
    color: var(--hi-muted);
}

.cust-help .breadcrumbs .last {
    color: var(--hi-text-strong);
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   13. UTILITY-STYLE HELPERS (Tailwind-inspired, opt-in)
   Use these on any wrapper divs we add later without disturbing HESK CSS.
   ------------------------------------------------------------------------- */

.hi-card {
    background: var(--hi-surface);
    border: 1px solid var(--hi-border);
    border-radius: var(--hi-radius);
    box-shadow: var(--hi-shadow-sm);
    padding: 16px;
}

.hi-stack       { display: flex; flex-direction: column; gap: 12px; }
.hi-row         { display: flex; align-items: center; gap: 12px; }
.hi-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hi-muted       { color: var(--hi-muted); }
.hi-pill        { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--hi-radius-pill); background: var(--hi-sidebar-hover); color: var(--hi-text); font-size: 12px; font-weight: 600; }
.hi-pill-accent { background: var(--hi-accent-soft); color: var(--hi-accent-dark); }

/* -------------------------------------------------------------------------
   13.5 TICKET LIST SURFACES: filters, quick-links, mobile head, pagination
   ------------------------------------------------------------------------- */

.tickets__mobile_head {
    padding: 4px 12px;
    background: transparent;
    border-bottom: none;
}

.tickets__mobile_head h2 {
    color: var(--hi-text-strong);
    font-weight: 700;
    font-size: 18px;
}

/* Quick-link chips */
.filters__listing .btn {
    border-radius: var(--hi-radius-pill) !important;
    background: var(--hi-surface);
    border: 1px solid var(--hi-border);
    color: var(--hi-muted) !important;
    height: 32px;
    padding: 0 14px !important;
    box-shadow: none !important;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.filters__listing .btn:hover {
    background: var(--hi-sidebar-hover);
    color: var(--hi-text-strong) !important;
    border-color: var(--hi-border-strong);
}

.filters__listing .btn.is-selected {
    background-color: var(--hi-accent) !important;
    border-color: var(--hi-accent) !important;
    color: var(--hi-text-strong) !important;
    box-shadow: 0 2px 8px var(--hi-accent-glow) !important;
}

.filters__listing .btn.is-selected .filters__btn-value {
    color: inherit !important;
}

.filters__btn-value {
    font-weight: 700;
    opacity: 0.9;
}

/* Special-purpose chips keep semantic hue but modernized */
.filters__listing .btn.is-bookmarks {
    background-color: var(--hi-accent-soft) !important;
    border-color: var(--hi-accent) !important;
    color: var(--hi-accent-dark) !important;
}

.filters__listing .btn.is-bookmarks:hover {
    background-color: var(--hi-accent) !important;
    color: var(--hi-text-strong) !important;
}

.filters__listing .btn.is-due-soon {
    background-color: #fef9c3 !important;
    border-color: #eab308 !important;
    color: #854d0e !important;
}

.filters__listing .btn.is-due-soon:hover {
    background-color: #facc15 !important;
    color: #1a1d21 !important;
}

.filters__listing .btn.is-overdue {
    background-color: #fee2e2 !important;
    border-color: #ef4444 !important;
    color: #b91c1c !important;
}

.filters__listing .btn.is-overdue:hover {
    background-color: #ef4444 !important;
    color: #fff !important;
}

.is-bookmark {
    fill: var(--hi-accent-dark) !important;
}

/* Filter items in the search sidebar */
.filters__listing .filter-item .item--body {
    border-radius: var(--hi-radius-pill) !important;
    background: var(--hi-surface);
    border: 1px solid var(--hi-border);
    color: var(--hi-text);
    padding: 4px 12px;
}

.filters__listing .filter-item .item--body:hover {
    background: var(--hi-sidebar-hover);
    border-color: var(--hi-border-strong);
}

.filters__listing .filter-item input[type="checkbox"]:checked + .item--body {
    background: var(--hi-accent-soft) !important;
    border-color: var(--hi-accent) !important;
    color: var(--hi-accent-dark) !important;
}

/* Pagination */
.pagination {
    display: inline-flex;
    gap: 4px;
    padding: 8px;
}

.pagination a,
.pagination span {
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: var(--hi-radius-sm);
    color: var(--hi-text);
    background: transparent;
    transition: background-color 120ms ease, color 120ms ease;
}

.pagination a:hover {
    background: var(--hi-sidebar-hover);
    color: var(--hi-text-strong);
}

.pagination .current,
.pagination .active,
.pagination span.selected {
    background: var(--hi-accent) !important;
    color: var(--hi-text-strong) !important;
    font-weight: 700;
}

/* Params bar (sidebar in ticket detail, filter breadcrumb) */
.params--bar {
    background: var(--hi-surface);
    border: 1px solid var(--hi-border);
    border-radius: var(--hi-radius);
    padding: 12px 16px;
}

.params--bar a {
    color: var(--hi-text);
}

.params--bar a:hover {
    color: var(--hi-accent-dark);
}

.tag-list a {
    background: var(--hi-sidebar-hover);
    color: var(--hi-text);
    padding: 3px 10px;
    border-radius: var(--hi-radius-pill);
    font-size: 12px;
    font-weight: 600;
}

.tag-list a:hover {
    background: var(--hi-accent-soft);
    color: var(--hi-accent-dark);
}

/* Ticket detail: notes / replies */
.note,
.ticket__reply,
.ticket__body_block {
    padding: 16px 20px;
    margin-bottom: 12px;
}

.note.private,
.note[data-type="note"] {
    background: #fffbeb !important;
    border-color: #fcd34d !important;
}

/* Selectize (multi-select) — align with the theme */
.selectize-input {
    min-height: 40px;
}

.selectize-input.focus {
    border-color: var(--hi-accent) !important;
    box-shadow: 0 0 0 3px var(--hi-focus) !important;
}

.selectize-dropdown {
    border: 1px solid var(--hi-border) !important;
    border-radius: var(--hi-radius) !important;
    box-shadow: var(--hi-shadow-lg) !important;
    background: var(--hi-surface) !important;
}

.selectize-dropdown [data-selectable].active {
    background: var(--hi-accent-soft) !important;
    color: var(--hi-text-strong) !important;
}

/* -------------------------------------------------------------------------
   14. SCROLLBARS (subtle, matches theme)
   ------------------------------------------------------------------------- */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--hi-border-strong) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: var(--hi-border-strong);
    border-radius: var(--hi-radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--hi-muted-soft); background-clip: content-box; border: 2px solid transparent; }
*::-webkit-scrollbar-track { background: transparent; }

/* -------------------------------------------------------------------------
   15. ATTACHMENT PREVIEW MODAL (admin/admin_ticket.php)
   ------------------------------------------------------------------------- */
.hi-att-preview {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
}

.hi-att-preview[hidden] {
    display: none;
}

.hi-att-preview__backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(15, 17, 19, .55);
}

.hi-att-preview__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1040px, 100%);
    height: min(88vh, 100%);
    overflow: hidden;
    background: var(--hi-surface);
    border-radius: var(--hi-radius-lg);
    box-shadow: var(--hi-shadow-lg);
}

.hi-att-preview__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    padding: 12px 16px;
    background: var(--hi-surface);
    border-bottom: 1px solid var(--hi-border);
}

.hi-att-preview__name {
    overflow: hidden;
    color: var(--hi-text-strong);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hi-att-preview__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.hi-att-preview__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    color: var(--hi-text) !important;
    background: var(--hi-surface);
    border: 1px solid var(--hi-border);
    border-radius: var(--hi-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.hi-att-preview__btn:hover {
    background: var(--hi-sidebar-hover);
    border-color: var(--hi-border-strong);
    text-decoration: none;
}

.hi-att-preview__btn .icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.hi-att-preview__btn--icon {
    padding: 0;
    width: 34px;
    justify-content: center;
}

.hi-att-preview__body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--hi-bg);
}

.hi-att-preview__loading {
    position: absolute;
    color: var(--hi-muted);
    font-size: 13px;
}

.hi-att-preview__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 16px;
}

.hi-att-preview__stage img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--hi-radius-sm);
    box-shadow: var(--hi-shadow-sm);
    object-fit: contain;
}

.hi-att-preview__stage iframe {
    width: 100%;
    height: 100%;
    background: var(--hi-surface);
    border: 0;
    border-radius: var(--hi-radius-sm);
}

@media screen and (max-width: 620px) {
    .hi-att-preview {
        padding: 0;
    }

    .hi-att-preview__dialog {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

/* -------------------------------------------------------------------------
   16. REPORT FILTERS (admin/reports.php)
   ------------------------------------------------------------------------- */
/* Align the page title with the filter card */
.main__content.reports .reports__head {
    padding-left: 0;
}

.hi-filters {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px 28px;
    margin: 16px 0 8px;
    padding: 18px 20px;
    background: var(--hi-surface);
    border: 1px solid var(--hi-border);
    border-radius: var(--hi-radius-lg);
    box-shadow: var(--hi-shadow-sm);
}

.hi-filters__field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hi-filters__label {
    color: var(--hi-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hi-filters__option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
}

.hi-filters__control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hi-filters__control .dropdown-select {
    margin: 0;
}

.hi-filters__date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--hi-muted);
    font-size: 13px;
    font-weight: 600;
}

.hi-filters__date input[type="date"] {
    min-width: 155px;
    padding: 9px 12px;
    color: var(--hi-text);
    font-weight: 600;
}

.hi-filters__actions {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.hi-filters__actions .btn {
    min-height: 40px;
    padding: 0 22px;
}

@media screen and (max-width: 899px) {
    .hi-filters {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
    }

    .hi-filters__control--dates {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .hi-filters__date {
        justify-content: space-between;
    }

    .hi-filters__date input[type="date"] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .hi-filters__actions {
        margin-left: 0;
    }

    .hi-filters__actions .btn {
        width: 100%;
    }
}

/* -------------------------------------------------------------------------
   17. STATISTICS DASHBOARD
   ------------------------------------------------------------------------- */
.hi-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hi-dashboard__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.hi-dashboard__header h2 {
    margin: 3px 0 4px;
    font-size: 26px;
}

.hi-dashboard__header p {
    margin: 0;
    color: var(--hi-muted);
}

.hi-dashboard__eyebrow {
    color: var(--hi-accent-dark) !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hi-dashboard__filters {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px;
    background: var(--hi-surface);
    border: 1px solid var(--hi-border);
    border-radius: var(--hi-radius);
    box-shadow: var(--hi-shadow-sm);
}

.hi-dashboard__filters label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--hi-muted);
    font-size: 11px;
}

.hi-dashboard__filters input[type="date"] {
    min-width: 145px;
    padding: 8px 10px;
}

.hi-dashboard__filters .btn {
    min-height: 39px;
    padding: 0 18px;
}

.hi-dashboard__notice {
    padding: 10px 14px;
    color: #854d0e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--hi-radius);
    font-size: 13px;
}

.hi-dashboard__kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.hi-kpi {
    position: relative;
    min-width: 0;
    padding: 16px;
    overflow: hidden;
    background: var(--hi-surface);
    border: 1px solid var(--hi-border);
    border-radius: var(--hi-radius);
    box-shadow: var(--hi-shadow-sm);
}

.hi-kpi::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: #3b82f6;
    content: "";
}

.hi-kpi--success::before { background: var(--hi-accent); }
.hi-kpi--danger::before { background: #ef4444; }

.hi-kpi > span {
    display: block;
    min-height: 36px;
    color: var(--hi-muted);
    font-size: 12px;
    font-weight: 700;
}

.hi-kpi strong {
    display: block;
    margin: 3px 0 4px;
    color: var(--hi-text-strong);
    font-size: 25px;
    line-height: 1.15;
    letter-spacing: -.03em;
}

.hi-kpi small {
    display: block;
    overflow: hidden;
    color: var(--hi-muted-soft);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hi-dashboard__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.hi-chart-card {
    min-width: 0;
    padding: 18px;
    background: var(--hi-surface);
    border: 1px solid var(--hi-border);
    border-radius: var(--hi-radius-lg);
    box-shadow: var(--hi-shadow-sm);
}

.hi-chart-card--wide {
    grid-column: span 2;
}

.hi-chart-card__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.hi-chart-card__title h3 {
    margin: 0;
    font-size: 16px;
}

.hi-chart-card__title span {
    color: var(--hi-muted);
    font-size: 12px;
    text-align: right;
}

.hi-chart-card__canvas {
    position: relative;
    height: 300px;
}

.hi-chart-card__canvas--donut {
    height: 280px;
}

.hi-chart-card__canvas--short {
    height: 235px;
}

.hi-dashboard__overdue {
    margin-bottom: 4px;
}

.hi-dashboard__table-wrap {
    overflow-x: auto;
}

.hi-dashboard__table {
    width: 100%;
    border-collapse: collapse;
}

.hi-dashboard__table th,
.hi-dashboard__table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--hi-border);
    text-align: left;
}

.hi-dashboard__table th {
    color: var(--hi-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hi-dashboard__table tbody tr:last-child td {
    border-bottom: 0;
}

.hi-priority {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: var(--hi-radius-pill);
    font-size: 11px;
    font-weight: 700;
}

.hi-priority--0 { color: #b91c1c !important; background: #fee2e2; }
.hi-priority--1 { color: #92400e !important; background: #fef3c7; }
.hi-priority--2 { color: #1d4ed8 !important; background: #dbeafe; }
.hi-priority--3 { color: #3f7c39 !important; background: var(--hi-accent-soft); }

.hi-dashboard__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    color: var(--hi-muted);
    background: var(--hi-bg);
    border-radius: var(--hi-radius);
}

@media screen and (max-width: 1400px) {
    .hi-dashboard__kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 900px) {
    .hi-dashboard__header {
        align-items: stretch;
        flex-direction: column;
    }

    .hi-dashboard__filters {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .hi-dashboard__filters label {
        flex: 1 1 150px;
    }

    .hi-dashboard__filters input[type="date"] {
        width: 100%;
    }

    .hi-dashboard__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hi-dashboard__grid {
        grid-template-columns: 1fr;
    }

    .hi-chart-card--wide {
        grid-column: auto;
    }
}

@media screen and (max-width: 520px) {
    .hi-dashboard {
        padding-right: 14px;
        padding-left: 14px;
    }

    .hi-dashboard__kpis {
        grid-template-columns: 1fr;
    }

    .hi-chart-card__title {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .hi-chart-card__title span {
        text-align: left;
    }
}