/*
 * Human Logic customer portal theme (frontend template "humanlogic").
 * Unlayered on purpose: beats SupportPal's layered Tailwind rules.
 * Never set `display` on elements toggled by SupportPal JS (sp:hidden toggles,
 * .sp-dropdown, .sp-mobile-nav, collapsible lists) without :not(.sp\:hidden).
 */

/* ---------------------------------------------------------------- Tokens */
:root {
    --hl-font: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --hl-ink: #231F1C;
    --hl-ink-2: #5F5852;
    --hl-ink-3: #8C847C;
    --hl-ink-4: #4A443F;
    --hl-line: #E5E0DA;
    --hl-line-2: #EFEBE6;
    --hl-line-input: #D9D2CA;
    --hl-bg: #F6F4F1;
    --hl-bg-soft: #FBFAF8;
    --hl-accent: #FF893D;
    --hl-primary: #B8530F;
    --hl-primary-dark: #8F400C;
    --hl-icon: #C25A14;
    --hl-tint: #FFF4EC;
    --hl-tint-2: #FFE3CF;
    --hl-focus: #E8701F;
    --hl-danger: #B42318;
    --hl-gutter: 80px;
    --hl-ring: 0 0 0 3px #FFE3CF;

    --hl-i-alert: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5v5.5M12 16.5v.01'/></svg>");
    --hl-i-success: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8 12.5l2.7 2.7L16 9.8'/></svg>");
    --hl-i-info: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5.5M12 7.5v.01'/></svg>");
    --hl-i-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
    --hl-i-tick: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
    --hl-i-chev-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    --hl-i-chev-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 15l6-6 6 6'/></svg>");
    --hl-i-doc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H6v18h12V7z'/><path d='M14 3v4h4M9 13h6M9 17h6'/></svg>");
    --hl-i-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2'/><path d='M3 16l5-5 4 4 3-3 6 6'/></svg>");
    --hl-i-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4-4'/></svg>");
    --hl-i-funnel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M4 5h16l-6 7v6l-4 2v-8z'/></svg>");
    --hl-i-close: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>");
    --hl-select-chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F5852' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");

    /* SupportPal variables */
    --sp-font-body: var(--hl-font);
    --sp-font-display: var(--hl-font);
    --sp-font-sans: var(--hl-font);
    --sp-default-font-family: var(--hl-font);
    --sp-color-primary: #fff;
    --sp-color-secondary: #F6F4F1;
    --sp-color-tertiary: #EFEBE6;
    --sp-text-color-primary: #231F1C;
    --sp-text-color-secondary: #5F5852;
    --sp-text-color-tertiary: #8C847C;
    --sp-color-primary-100: #FFF4EC;
    --sp-color-primary-200: #FFE3CF;
    --sp-color-primary-300: #FFD4B8;
    --sp-color-primary-600: #E8701F;
    --sp-color-primary-700: #B8530F;
    --sp-color-primary-800: #B8530F;
    --sp-color-primary-900: #8F400C;
    --sp-color-red-500: #B42318;
    --sp-color-red-800: #8A1F17;
    --sp-radius-sm: 6px;
}

@media (max-width: 1279px) { :root { --hl-gutter: 40px; } }
@media (max-width: 767px)  { :root { --hl-gutter: 20px; } }

/* ------------------------------------------------------------------ Base */
html.hl-theme { -webkit-text-size-adjust: 100%; }

body.hl-body {
    font-family: var(--hl-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--hl-ink);
    background: var(--hl-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.hl-body a { color: var(--hl-primary); }
.hl-body a:hover { color: var(--hl-primary-dark); }

.hl-body h1, .hl-body h2, .hl-body h3, .hl-body h4 { color: var(--hl-ink); }

.hl-hidden { display: none !important; }

@media (min-width: 768px) { .hl-mobile-only { display: none !important; } }
@media (max-width: 767px) { .hl-desktop-only { display: none !important; } }

/* ---------------------------------------------------------------- Header */
.hl-header {
    position: relative;
    z-index: 40;
    background: #fff;
    border-top: 3px solid var(--hl-accent);
    border-bottom: 1px solid var(--hl-line);
}

.hl-header__inner {
    position: relative;
    max-width: 1440px;
    height: 72px;
    margin: 0 auto;
    padding: 0 var(--hl-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.hl-header__brand { display: flex; align-items: center; flex: none; }
.hl-header__brand a { display: flex; align-items: center; }

.hl-header .hl-header__logo {
    display: block;
    height: 30px;
    width: auto;
    max-height: none;
}

.hl-header__actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

.hl-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hl-ink-2);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.hl-body .hl-icon-btn { color: var(--hl-ink-2); }
.hl-body .hl-icon-btn:hover { background: var(--hl-bg); color: var(--hl-ink); }
.hl-icon-btn svg { width: 20px; height: 20px; }

.hl-header__account .sp-dropdown-container { position: relative; }

.hl-body .hl-account {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--hl-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

.hl-body .hl-account:hover { color: var(--hl-ink); }
.hl-account__chevron { width: 16px; height: 16px; color: var(--hl-ink-3); flex: none; }

.hl-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 50%;
    background: var(--hl-tint-2);
    color: var(--hl-primary-dark);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
}

.hl-avatar--header { width: 34px; height: 34px; font-size: 13px; }

.hl-body .hl-header__login {
    height: 40px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--hl-line);
    border-radius: 8px;
    color: var(--hl-ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s;
}

.hl-body .hl-header__login:hover { border-color: var(--hl-accent); color: var(--hl-ink); }

/* Account dropdown (toggled by SupportPal JS) */
.hl-header .sp-dropdown { z-index: 50; }

.hl-header .sp-dropdown > ul {
    width: 240px;
    margin: 0;
    padding: 6px;
    list-style: none;
    text-align: start;
    background: #fff;
    border: 1px solid var(--hl-line);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(35, 31, 28, .12);
}

.hl-header .sp-dropdown > ul > li { padding: 0; margin: 0; }

.hl-header .sp-dropdown ul li a {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--hl-ink);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
}

.hl-header .sp-dropdown ul li a:hover { background: var(--hl-bg); color: var(--hl-ink); }
.hl-header .sp-dropdown ul li a.current { background: var(--hl-tint); color: var(--hl-primary-dark); font-weight: 700; }
.hl-header .sp-dropdown hr { margin: 6px -6px; border: 0; border-top: 1px solid var(--hl-line-2); }

/* Header search overlay (toggled with sp:hidden) */
.hl-header-search {
    position: absolute;
    inset: 0;
    z-index: 5;
    align-items: center;
    gap: 12px;
    padding: 0 var(--hl-gutter);
    background: #fff;
}

.hl-header-search:not(.sp\:hidden) { display: flex; }
.hl-header-search form { flex: 1; position: relative; }
.hl-header-search form:before { content: none; }

.hl-header-search input[type="text"],
.hl-header-search input[type="search"] {
    height: 44px;
    max-height: none;
    padding: 0 14px 0 42px;
}

.hl-header-search form::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: var(--hl-ink-3);
    -webkit-mask: var(--hl-i-search) center / contain no-repeat;
    mask: var(--hl-i-search) center / contain no-repeat;
    pointer-events: none;
}

/* Mobile menu */
.hl-body .hl-menu-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--hl-line);
    border-radius: 8px;
    color: var(--hl-ink);
    background: #fff;
    cursor: pointer;
}

.hl-menu-btn svg { width: 22px; height: 22px; fill: none; }

.hl-mobile-nav {
    margin-top: 68px;
    max-height: calc(100% - 68px);
    background: #fff;
    border-bottom: 1px solid var(--hl-line);
    box-shadow: 0 12px 24px rgba(35, 31, 28, .08);
}

.hl-mobile-nav__inner { padding: 12px var(--hl-gutter) 16px; }
.hl-mobile-nav ul.sp-nav { margin: 0; padding: 0; list-style: none; }
.hl-mobile-nav ul.sp-nav li { padding: 0; margin: 0; }

.hl-mobile-nav ul.sp-nav li a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--hl-ink);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
}

.hl-mobile-nav ul.sp-nav li a:hover { background: var(--hl-bg); color: var(--hl-ink); }
.hl-mobile-nav ul.sp-nav li a.current { background: var(--hl-tint); color: var(--hl-primary-dark); font-weight: 700; }
.hl-mobile-nav hr { margin: 8px 0; border: 0; border-top: 1px solid var(--hl-line-2); }

@media (max-width: 1023px) {
    .hl-header__inner { height: 64px; gap: 12px; }
    .hl-header .hl-header__logo { height: 24px; }
    .hl-header__actions { gap: 4px; }
    .hl-icon-btn { width: 44px; height: 44px; }
    .hl-icon-btn svg { width: 22px; height: 22px; }
}

/* ---------------------------------------------------------------- Footer */
.hl-footer {
    background: #fff;
    border-top: 1px solid var(--hl-line);
}

.hl-footer__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px var(--hl-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 28px;
}

.hl-footer__brand { display: flex; align-items: center; gap: 12px; }
.hl-footer .hl-footer__mark { display: block; width: 28px; height: 28px; max-height: none; }
.hl-footer .hl-footer__logo { display: none; height: 22px; width: auto; }
.hl-footer__copy { font-size: 14px; line-height: 1.4; color: var(--hl-ink-2); }
.hl-footer__copy--mobile { display: none; }

.hl-footer__links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 14px;
    font-weight: 500;
}

.hl-body .hl-footer__links a { color: var(--hl-ink-2); text-decoration: none; }
.hl-body .hl-footer__links a:hover { color: var(--hl-primary); }

.hl-footer__lang select {
    height: 36px;
    width: auto;
    font-size: 14px;
}

@media (max-width: 767px) {
    .hl-footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 20px; }
    .hl-footer .hl-footer__mark,
    .hl-footer__copy--desktop { display: none; }
    .hl-footer .hl-footer__logo { display: block; }
    .hl-footer__copy--mobile { display: block; }
    .hl-footer__links { gap: 4px 20px; font-size: 15px; line-height: 44px; }
}

/* ------------------------------------------------------- Page head/body */
.hl-main { flex: 1 0 auto; display: block; width: 100%; }

.hl-page-head {
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px var(--hl-gutter) 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.hl-page-head__text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.hl-body .hl-page-title {
    margin: 0;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--hl-ink);
}

.hl-page--ticket .hl-page-title { font-size: 32px; line-height: 1.25; }

.hl-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--hl-ink-2);
}

.hl-body .hl-breadcrumb a { color: var(--hl-ink-2); text-decoration: none; }
.hl-body .hl-breadcrumb a:hover { color: var(--hl-primary); }
.hl-breadcrumb__sep { color: var(--hl-ink-3); }
.hl-breadcrumb__current { color: var(--hl-ink); font-weight: 600; }
.hl-body .hl-breadcrumb__current a { color: var(--hl-ink); }

.hl-page-body {
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px var(--hl-gutter) 72px;
}

.hl-content, .hl-content-inner { min-width: 0; }

.hl-layout { display: block; }

@media (min-width: 1024px) {
    .hl-layout:has(> .sp-sidebar) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 32px;
        align-items: start;
    }

    .hl-page--ticket .hl-layout:has(> .sp-sidebar) { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 1023px) {
    .hl-layout > .sp-sidebar { margin-top: 16px; }
    .hl-page--ticket .hl-layout { display: flex; flex-direction: column; gap: 12px; }
    .hl-page--ticket .hl-layout > .hl-ticket-sidebar { order: -1; margin-top: 0; }
}

/* Generic card around content on pages without a bespoke design */
.hl-content-inner:not(.hl-bare):not(.hl-auth-card) {
    background: #fff;
    border: 1px solid var(--hl-line);
    border-radius: 12px;
    padding: 32px;
}

.hl-content-inner:not(.hl-bare):not(.hl-auth-card) hr {
    margin: 24px -32px;
    border: 0;
    border-top: 1px solid var(--hl-line);
}

.hl-content-inner h2 { font-size: 21px; line-height: 1.3; font-weight: 800; margin: 0 0 16px; }
.hl-content-inner h3 { font-size: 18px; line-height: 1.3; font-weight: 800; }
.hl-content-inner h4 { font-size: 16px; line-height: 1.4; font-weight: 700; }

.hl-card {
    background: #fff;
    border: 1px solid var(--hl-line);
    border-radius: 12px;
}

.hl-card--padded { padding: 28px; }

@media (max-width: 767px) {
    .hl-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 24px 20px 0;
    }

    .hl-page-head__text { gap: 8px; }
    .hl-page-head__text > .hl-breadcrumb { order: -1; }
    .hl-page-head__text > .hl-article-meta-m { order: 1; }
    .hl-body .hl-page-title { font-size: 28px; line-height: 1.25; }
    .hl-page--ticket .hl-page-title { font-size: 24px; line-height: 1.3; }
    .hl-page-body { padding: 20px 20px 40px; }
    .hl-page--ticket .hl-page-body { padding-top: 16px; }

    /* Ticket: "‹ Tickets › #NUM" without the home crumb */
    .hl-page--ticket .hl-breadcrumb__home,
    .hl-page--ticket .hl-breadcrumb__home + .hl-breadcrumb__sep { display: none; }

    .hl-content-inner:not(.hl-bare):not(.hl-auth-card) { padding: 20px; }
    .hl-content-inner:not(.hl-bare):not(.hl-auth-card) hr { margin: 20px -20px; }
}

/* ----------------------------------------------------------------- Alerts */
.hl-body .sp-alert {
    position: relative;
    margin: 0 0 20px;
    padding: 14px 16px 14px 48px;
    border: 1px solid var(--hl-line);
    border-radius: 8px;
    background: var(--hl-bg);
    color: var(--hl-ink);
    font-size: 15px;
    line-height: 1.45;
}

.hl-body .sp-alert::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 14px;
    width: 20px;
    height: 20px;
    background: var(--hl-ink-2);
    -webkit-mask: var(--hl-i-info) center / contain no-repeat;
    mask: var(--hl-i-info) center / contain no-repeat;
}

.hl-body .sp-alert p { margin: 0; }
.hl-body .sp-alert ul { margin: 4px 0 0; padding-left: 18px; }
.hl-body .sp-alert strong { font-weight: 700; }
.hl-body .sp-alert a { color: inherit; font-weight: 700; text-decoration: underline; }

.hl-body .sp-alert-error { background: #FDECEA; border-color: #F5C2BD; color: #8A1F17; }
.hl-body .sp-alert-error::before { background: var(--hl-danger); -webkit-mask-image: var(--hl-i-alert); mask-image: var(--hl-i-alert); }
.hl-body .sp-alert-success { background: #E6F3EA; border-color: #B9DCC4; color: #1E6B3F; }
.hl-body .sp-alert-success::before { background: #1E6B3F; -webkit-mask-image: var(--hl-i-success); mask-image: var(--hl-i-success); }
.hl-body .sp-alert-info { background: #EAF2F8; border-color: #C5DBEA; color: #2C5A7A; }
.hl-body .sp-alert-info::before { background: #2C5A7A; }
.hl-body .sp-alert-warning { background: #FFF3D6; border-color: #F2D9A0; color: #7A5200; }
.hl-body .sp-alert-warning::before { background: #7A5200; -webkit-mask-image: var(--hl-i-alert); mask-image: var(--hl-i-alert); }

.hl-body .sp-alert-close { cursor: pointer; opacity: .7; margin-left: 12px; }
.hl-body .sp-alert-close:hover { opacity: 1; }

/* Sticky (fixed) notification bars keep their stock positioning */
.hl-body .sp-alert.sp-alert-sticky { margin: 0; border-radius: 0; border-width: 0 0 1px; z-index: 60; }
.hl-body .sp-alert.sp-alert-sticky::before { left: max(16px, calc(50% - 640px)); }

.hl-body .sp-feedback.sp-alert { padding: 24px; background: #fff; border-color: var(--hl-line); border-radius: 12px; }
.hl-body .sp-feedback.sp-alert::before { content: none; }

/* ----------------------------------------------------------------- Forms */
.hl-body input[type="text"],
.hl-body input[type="email"],
.hl-body input[type="password"],
.hl-body input[type="search"],
.hl-body input[type="number"],
.hl-body input[type="tel"],
.hl-body input[type="url"],
.hl-body input[type="date"],
.hl-body input[type="datetime-local"],
.hl-body select,
.hl-body textarea {
    height: 46px;
    max-height: none;
    padding: 0 14px;
    border: 1px solid var(--hl-line-input);
    border-radius: 8px;
    background-color: #fff;
    color: var(--hl-ink);
    font-family: var(--hl-font);
    font-size: 16px;
    line-height: 1.4;
    box-shadow: none;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.hl-body select:not([multiple]) {
    padding-right: 40px;
    background-image: var(--hl-select-chev);
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px 18px;
    -webkit-appearance: none;
    appearance: none;
}

.hl-body select[multiple] { height: auto; min-height: 46px; padding: 8px 14px; }

.hl-body textarea {
    height: auto;
    min-height: 120px;
    padding: 12px 14px;
    line-height: 1.55;
}

/* Password show/hide plugin wraps the input in an inline-block, auto-width box */
.hl-body .hideShowPassword-wrapper { display: block !important; }

.hl-body input::placeholder,
.hl-body textarea::placeholder { color: var(--hl-ink-3); opacity: 1; }

.hl-body input[type="text"]:focus,
.hl-body input[type="email"]:focus,
.hl-body input[type="password"]:focus,
.hl-body input[type="search"]:focus,
.hl-body input[type="number"]:focus,
.hl-body input[type="tel"]:focus,
.hl-body input[type="url"]:focus,
.hl-body input[type="date"]:focus,
.hl-body input[type="datetime-local"]:focus,
.hl-body select:focus,
.hl-body textarea:focus {
    border-color: var(--hl-focus);
    box-shadow: var(--hl-ring);
    outline: none;
}

.hl-body input:disabled,
.hl-body select:disabled,
.hl-body textarea:disabled,
.hl-body input[readonly] { background-color: var(--hl-bg); }

/* Checkbox */
.hl-body input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    min-height: 0;
    flex: none;
    margin: 0;
    padding: 0;
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
    border: 1.5px solid #B5ACA3;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.hl-body input[type="checkbox"]::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0;
}

.hl-body input[type="checkbox"]:hover::before { background: transparent; }
.hl-body input[type="checkbox"]:checked { background: var(--hl-primary); border-color: var(--hl-primary); }

.hl-body input[type="checkbox"]:checked::before,
.hl-body input[type="checkbox"]:checked:hover::before {
    background: #fff;
    -webkit-mask: var(--hl-i-check) center / contain no-repeat;
    mask: var(--hl-i-check) center / contain no-repeat;
}

.hl-body input[type="checkbox"]:focus-visible { box-shadow: var(--hl-ring); outline: none; }

/* Stacked form rows inside content */
.hl-content-inner .sp-form-row:not(.sp\:hidden) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0 0 22px;
}

.hl-content-inner .sp-form-row > label,
.hl-content-inner .sp-form-row .hl-label-row > label,
.hl-field-label {
    width: auto;
    margin: 0;
    padding: 0;
    text-align: start;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--hl-ink);
}

.hl-content-inner .sp-form-row > .sp-input-container { width: 100%; }

.hl-content-inner .sp-input-container > input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
.hl-content-inner .sp-input-container > select,
.hl-content-inner .sp-input-container > textarea { width: 100%; }

.hl-content-inner .sp-input-container > div.sp-description,
.hl-content-inner .sp-form-row .sp-description { margin-top: 0; font-size: 14px; line-height: 1.45; color: var(--hl-ink-2); }

.hl-req { color: var(--hl-danger); font-weight: 700; }

/* Validation */
.hl-body .sp-input-error:not(:empty) {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--hl-danger);
}

.hl-body .sp-input-has-error input:focus,
.hl-body .sp-input-has-error select:focus,
.hl-body input.sp-input-has-error:focus { box-shadow: 0 0 0 3px #FDECEA; }

/* --------------------------------------------------------------- Buttons */
.hl-body input[type="submit"],
.hl-body .sp-button-submit,
.hl-body a.sp-button-submit {
    height: 46px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: var(--hl-primary);
    color: #fff;
    font-family: var(--hl-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s;
}

.hl-body input[type="submit"]:hover,
.hl-body .sp-button-submit:hover { background: var(--hl-primary-dark); color: #fff; }

.hl-body input[type="submit"]:focus-visible,
.hl-body .sp-button-submit:focus-visible { box-shadow: var(--hl-ring); outline: none; }

.hl-body input[type="submit"]:disabled,
.hl-body .sp-button-submit:disabled { opacity: .5; cursor: not-allowed; background: var(--hl-primary); }

.hl-body .sp-button:not(.sp-button-submit):not(.sp-button-sm):not(.sp-filter-results),
.hl-body .hl-btn-secondary,
.hl-body button.sp-mark-resolved {
    height: 46px;
    padding: 0 22px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    border: 1px solid var(--hl-line-input);
    border-radius: 8px;
    background: #fff;
    color: var(--hl-ink);
    font-family: var(--hl-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.hl-body .sp-button:not(.sp-button-submit):not(.sp-button-sm):not(.sp-filter-results):not(.sp\:hidden),
.hl-body .hl-btn-secondary:not(.sp\:hidden),
.hl-body button.sp-mark-resolved:not(.sp\:hidden) { display: inline-flex; }

.hl-body .sp-button:not(.sp-button-submit):not(.sp-filter-results):hover,
.hl-body .hl-btn-secondary:hover,
.hl-body button.sp-mark-resolved:hover { background: var(--hl-bg); color: var(--hl-ink); }

.hl-body .sp-form-button { margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.hl-body .sp-form-button input[type="submit"] { margin: 0; }

/* ----------------------------------------------------------------- Badges */
.hl-body .sp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    color: #fff;
}

.hl-body .sp-badge[style*="background"]::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Status */
.hl-body .sp-badge[style*="#fcd32f" i], .hl-body .sp-badge[style*="rgb(252, 211, 47)"] { background-color: #FFEBDE !important; color: #8F400C; }
.hl-body .sp-badge[style*="#48bb78" i], .hl-body .sp-badge[style*="rgb(72, 187, 120)"] { background-color: #E6F3EA !important; color: #1E6B3F; }
.hl-body .sp-badge[style*="#333333" i], .hl-body .sp-badge[style*="rgb(51, 51, 51)"]   { background-color: #EFEBE6 !important; color: #4A443F; }
.hl-body .sp-badge[style*="#1e6ec9" i], .hl-body .sp-badge[style*="rgb(30, 110, 201)"] { background-color: #FFF3D6 !important; color: #7A5200; }
.hl-body .sp-badge[style*="#1af0c5" i], .hl-body .sp-badge[style*="rgb(26, 240, 197)"] { background-color: #EDE9FB !important; color: #4B3A9E; }
/* Status + priority colours set with the operator theme (release/sql/theme-settings.sql).
   Open/High share #8F400C and Pending Client Review/Medium share #7A5200. */
.hl-body .sp-badge[style*="#8F400C" i], .hl-body .sp-badge[style*="rgb(143, 64, 12)"]  { background-color: #FFEBDE !important; color: #8F400C; }
.hl-body .sp-badge[style*="#4A443F" i], .hl-body .sp-badge[style*="rgb(74, 68, 63)"]   { background-color: #EFEBE6 !important; color: #4A443F; }
.hl-body .sp-badge[style*="#7A5200" i], .hl-body .sp-badge[style*="rgb(122, 82, 0)"]   { background-color: #FFF3D6 !important; color: #7A5200; }
.hl-body .sp-badge[style*="#1E6B3F" i], .hl-body .sp-badge[style*="rgb(30, 107, 63)"]  { background-color: #E6F3EA !important; color: #1E6B3F; }
.hl-body .sp-badge[style*="#4B3A9E" i], .hl-body .sp-badge[style*="rgb(75, 58, 158)"]  { background-color: #EDE9FB !important; color: #4B3A9E; }
.hl-body .sp-badge[style*="#2C5A7A" i], .hl-body .sp-badge[style*="rgb(44, 90, 122)"]  { background-color: #EAF2F8 !important; color: #2C5A7A; }
.hl-body .sp-badge[style*="#8A1F17" i], .hl-body .sp-badge[style*="rgb(138, 31, 23)"]  { background-color: #FDECEA !important; color: #8A1F17; }
/* Priority */
.hl-body .sp-badge[style*="#3498db" i], .hl-body .sp-badge[style*="rgb(52, 152, 219)"] { background-color: #EAF2F8 !important; color: #2C5A7A; }
.hl-body .sp-badge[style*="#e67e22" i], .hl-body .sp-badge[style*="rgb(230, 126, 34)"] { background-color: #FFF3D6 !important; color: #7A5200; }
.hl-body .sp-badge[style*="#e74c3c" i], .hl-body .sp-badge[style*="rgb(231, 76, 60)"]  { background-color: #FFE3CF !important; color: #8F400C; }
.hl-body .sp-badge[style*="#9b59b6" i], .hl-body .sp-badge[style*="rgb(155, 89, 182)"] { background-color: #FDECEA !important; color: #8A1F17; }

@media (max-width: 767px) {
    .hl-body .sp-badge { height: 24px; font-size: 12px; padding: 0 9px; border-radius: 12px; }
    .hl-body .sp-badge[style*="background"]::before { content: none; }
}

/* =================================================================== HOME */
.hl-hero {
    background: #fff;
    border-bottom: 1px solid var(--hl-line);
    padding: 64px var(--hl-gutter) 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.hl-hero__eyebrow {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hl-primary);
}

.hl-body .hl-hero__title {
    margin: 0;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--hl-ink);
}

.hl-hero__search-wrap { width: 760px; max-width: 100%; }

.hl-hero-search form {
    height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 0 20px;
    background: #fff;
    border: 1px solid var(--hl-line-input);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(35, 31, 28, .05);
    transition: border-color .15s, box-shadow .15s;
}

.hl-hero-search form:before { content: none; }
.hl-hero-search form:focus-within { border-color: var(--hl-focus); box-shadow: var(--hl-ring); }
.hl-hero-search__icon { width: 20px; height: 20px; flex: none; color: var(--hl-ink-3); }

.hl-body .hl-hero-search input[type="text"],
.hl-body .hl-hero-search input[type="search"] {
    flex: 1;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 17px;
}

.hl-body .hl-hero-search input:focus { box-shadow: none; }

.hl-body .hl-hero-search__button {
    flex: none;
    height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    background: var(--hl-primary);
    color: #fff;
    font-family: var(--hl-font);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.hl-body .hl-hero-search__button:hover { background: var(--hl-primary-dark); }

.hl-page--home .hl-page-body { padding-top: 24px; padding-bottom: 64px; }
.hl-page--home .hl-content-inner { display: flex; flex-direction: column; gap: 24px; }

.hl-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.hl-body .hl-action-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--hl-line);
    border-radius: 12px;
    color: var(--hl-ink);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}

.hl-body .hl-action-card:hover {
    border-color: var(--hl-accent);
    box-shadow: 0 8px 24px rgba(35, 31, 28, .08);
    color: var(--hl-ink);
}

.hl-icon-tile {
    width: 52px;
    height: 52px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--hl-tint);
    color: var(--hl-icon);
}

.hl-icon-tile svg { width: 26px; height: 26px; }

.hl-action-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hl-action-card__title { font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--hl-ink); }
.hl-action-card__desc { font-size: 16px; line-height: 1.55; color: var(--hl-ink-2); }
.hl-action-card__arrow { width: 20px; height: 20px; flex: none; margin-top: 4px; color: var(--hl-primary); }

/* Self-service */
.hl-ss-card {
    background: #fff;
    border: 1px solid var(--hl-line);
    border-radius: 12px;
    overflow: hidden;
}

.hl-body .hl-ss-section {
    margin: 0;
    padding: 0;
    border: 0;
}

.hl-body .hl-ss-section + .hl-ss-section { border-top: 1px solid var(--hl-line); }

.hl-body .hl-ss-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    margin: 0;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
    font-weight: 400;
    cursor: pointer;
}

.hl-body .hl-ss-tile {
    width: 52px;
    height: 52px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--hl-bg);
    color: var(--hl-ink-2);
}

.hl-ss-tile svg { width: 24px; height: 24px; }

.hl-ss-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hl-body .hl-ss-title { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 700; }
.hl-body .hl-ss-title a { color: var(--hl-ink); text-decoration: none; }
.hl-body .hl-ss-title a:hover { color: var(--hl-primary); }
.hl-body .hl-ss-desc { margin: 0; font-size: 16px; line-height: 1.5; color: var(--hl-ink-2); }

.hl-ss-toggle { flex: none; display: inline-flex; width: 22px; height: 22px; }

.hl-ss-toggle i {
    display: block;
    width: 22px;
    height: 22px;
    background: var(--hl-ink-2);
    -webkit-mask: var(--hl-i-chev-down) center / contain no-repeat;
    mask: var(--hl-i-chev-down) center / contain no-repeat;
}

.hl-ss-toggle i::before { content: none; }

.hl-ss-toggle i.fa-chevron-up {
    background: var(--hl-primary);
    -webkit-mask-image: var(--hl-i-chev-up);
    mask-image: var(--hl-i-chev-up);
}

.hl-body .hl-ss-list { margin: 0; padding: 0 28px 24px 100px; }

.hl-ss-list ul.sp-article-list { margin: 0; padding: 0; list-style: none; }

.hl-body .hl-ss-list ul.sp-article-list > li {
    margin: 0;
    padding: 16px 0;
    border-top: 1px solid var(--hl-line-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.hl-ss-list ul.sp-article-list > li > a,
.hl-ss-list ul.sp-article-list > li > div:first-child { min-width: 0; flex: 1; }

.hl-body .hl-ss-list ul.sp-article-list h4,
.hl-body .hl-ss-list ul.sp-article-list h4 a {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--hl-ink);
    text-decoration: none;
}

.hl-body .hl-ss-list ul.sp-article-list a:hover h4,
.hl-body .hl-ss-list ul.sp-article-list h4 a:hover { color: var(--hl-primary); }

.hl-body .hl-ss-list ul.sp-article-list p {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--hl-ink-2);
}

.hl-body .hl-ss-list ul.sp-article-details {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--hl-ink-2);
    white-space: nowrap;
}

.hl-ss-list ul.sp-article-details > li { margin: 0; }
.hl-ss-list .hl-meta-icon,
.hl-ss-list .hl-pub-time { display: none; }
.hl-body .hl-ss-list .sp-item-list a { color: var(--hl-primary); font-weight: 600; text-decoration: none; }

.hl-body a.hl-ss-viewall {
    display: inline-block;
    padding-top: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--hl-primary);
    text-decoration: none;
}

.hl-body a.hl-ss-viewall:hover { color: var(--hl-primary-dark); }

@media (max-width: 1023px) {
    .hl-action-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
    .hl-hero { padding: 32px 20px; gap: 16px; align-items: stretch; text-align: left; }
    .hl-hero__eyebrow { font-size: 13px; }
    .hl-body .hl-hero__title { font-size: 30px; line-height: 1.2; }
    .hl-hero-search form { height: 52px; padding: 0 16px; }
    .hl-body .hl-hero-search__button { display: none; }

    .hl-page--home .hl-page-head { padding-top: 20px; }
    .hl-page--home .hl-page-body { padding: 20px 20px 40px; }
    .hl-page--home .hl-content-inner { gap: 16px; }
    .hl-action-grid { gap: 16px; }
    .hl-body .hl-action-card { padding: 20px; gap: 16px; }
    .hl-icon-tile { width: 44px; height: 44px; border-radius: 10px; }
    .hl-icon-tile svg { width: 22px; height: 22px; }
    .hl-action-card__title { font-size: 18px; }
    .hl-action-card__desc { font-size: 15px; line-height: 1.5; }
    .hl-action-card__arrow { display: none; }

    .hl-body .hl-ss-row { padding: 16px 20px; min-height: 72px; gap: 16px; }
    .hl-body .hl-ss-tile { display: none; }
    .hl-body .hl-ss-title { font-size: 17px; }
    .hl-body .hl-ss-desc { font-size: 14px; }
    .hl-body .hl-ss-list { padding: 0 20px 16px; }
    .hl-body .hl-ss-list ul.sp-article-list > li { flex-direction: column; align-items: flex-start; gap: 6px; }
    .hl-body .hl-ss-list ul.sp-article-list > li > a,
    .hl-body .hl-ss-list ul.sp-article-list > li > div:first-child { width: 100%; }
}

/* ================================================================== LOGIN */
.hl-page--login .hl-page-body { padding-top: 32px; padding-bottom: 96px; }
.hl-page--login .hl-layout { display: flex; justify-content: center; }
.hl-page--login .hl-content { width: 460px; max-width: 100%; }

.hl-auth-card {
    background: #fff;
    border: 1px solid var(--hl-line);
    border-radius: 14px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.hl-auth-card > .sp-alert { margin: 0; }
.hl-auth-card__head { display: flex; flex-direction: column; gap: 6px; }
.hl-auth-card__title { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 800; color: var(--hl-ink); }
.hl-auth-card__sub { margin: 0; font-size: 15px; line-height: 1.5; color: var(--hl-ink-2); }

.hl-auth-form { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.hl-auth-form .sp-form-row:not(.sp\:hidden) { margin: 0; }
.hl-auth-form .sp-input-container > input:not([type="checkbox"]) { width: 100%; }

.hl-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hl-body a.hl-forgot { font-size: 14px; font-weight: 600; color: var(--hl-primary); text-decoration: none; }
.hl-body a.hl-forgot:hover { color: var(--hl-primary-dark); text-decoration: underline; }

.hl-body .hl-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-weight: 400;
    color: var(--hl-ink);
    cursor: pointer;
}

.hl-auth-form .hl-submit-row:not(.sp\:hidden) { margin: 0; }
.hl-auth-form .hl-submit-row input[type="submit"] { width: 100%; height: 48px; }

.hl-or {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--hl-ink-2);
}

.hl-or::before, .hl-or::after { content: ""; flex: 1; height: 1px; background: var(--hl-line); }

.hl-body .hl-btn-ms {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--hl-line-input);
    border-radius: 8px;
    background: #fff;
    color: var(--hl-ink);
    font-family: var(--hl-font);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.hl-body .hl-btn-ms:hover { background: var(--hl-bg); }
.hl-btn-ms img { width: 18px; height: 18px; flex: none; }

.hl-register { text-align: center; font-size: 15px; color: var(--hl-ink-2); }
.hl-body .hl-register a { font-weight: 700; text-decoration: none; }

@media (max-width: 767px) {
    .hl-page--login .hl-page-body { padding: 20px 20px 40px; }
    .hl-auth-card { padding: 24px 20px; border-radius: 12px; gap: 20px; }
    .hl-auth-form { gap: 20px; }
    .hl-auth-form .sp-input-container > input:not([type="checkbox"]) { height: 48px; }
    .hl-forgot-row { margin-top: -4px; }
    .hl-body .hl-forgot-row a.hl-forgot { font-size: 15px; line-height: 44px; display: inline-block; }
    .hl-body .hl-check { min-height: 44px; font-size: 16px; }
    .hl-body .hl-check input[type="checkbox"] { width: 22px; height: 22px; }
    .hl-auth-form .hl-submit-row input[type="submit"],
    .hl-body .hl-btn-ms { height: 50px; }
}

/* ========================================================= TICKET LIST */
.hl-body .hl-page-action { height: 44px; padding: 0 20px; font-size: 15px; gap: 8px; flex: none; }
.hl-page-action svg { width: 18px; height: 18px; }

.hl-grid-card {
    background: #fff;
    border: 1px solid var(--hl-line);
    border-radius: 12px;
    overflow: hidden;
}

.hl-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--hl-line);
}

.hl-tabs { display: flex; align-items: center; gap: 4px; }

.hl-body .hl-tab {
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--hl-ink-2);
    font-family: var(--hl-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.hl-body .hl-tab:hover { background: var(--hl-bg); color: var(--hl-ink); }
.hl-body .hl-tab.is-active { background: var(--hl-ink); color: #fff; font-weight: 700; }

.hl-grid-tools { display: flex; align-items: center; gap: 8px; }
.hl-grid-search { display: flex; align-items: center; gap: 8px; margin: 0; }
.hl-grid-search label:empty { display: none; }

.hl-body .hl-grid-search input.dt-input {
    width: 280px;
    height: 40px;
    margin: 0;
    padding: 0 12px 0 36px;
    border-radius: 8px;
    font-size: 15px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C847C' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px 16px;
}

.hl-body .hl-grid-card a.sp-filter-results {
    width: 40px;
    height: 40px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 1px solid var(--hl-line-input);
    border-radius: 8px;
    background: #fff;
    color: var(--hl-ink-2);
    cursor: pointer;
}

.hl-body .hl-grid-card a.sp-filter-results:hover { background: var(--hl-bg); color: var(--hl-ink); }

.hl-grid-card a.sp-filter-results i {
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--hl-i-funnel) center / contain no-repeat;
    mask: var(--hl-i-funnel) center / contain no-repeat;
}

.hl-grid-card a.sp-filter-results i::before { content: none; }

/* Filter panel (toggled by ticketgrid.js) */
.hl-grid-card div.sp-filter-results {
    padding: 16px 24px;
    background: var(--hl-bg-soft);
    border-bottom: 1px solid var(--hl-line);
    font-size: 14px;
}

.hl-grid-card div.sp-filter-results label { font-size: 14px; font-weight: 700; color: var(--hl-ink-2); }
.hl-body .hl-grid-card div.sp-filter-results input,
.hl-body .hl-grid-card div.sp-filter-results select { height: 40px; font-size: 15px; }

/* DataTables */
.hl-grid-card .dt-container { position: relative; }
.hl-grid-card .dt-layout-row:first-child:not(.dt-layout-table) { display: none; }
.hl-grid-card .dt-processing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 16px;
    background: #fff;
    border: 1px solid var(--hl-line);
    border-radius: 8px;
    font-size: 14px;
    z-index: 3;
}

.hl-grid-card .dt-processing > div { display: none; }

.hl-body table#ticketGridTable {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.hl-grid-card #ticketGridTable col[data-dt-column="0"] { width: 204px !important; }
.hl-grid-card #ticketGridTable col[data-dt-column="2"] { width: 220px !important; }
.hl-grid-card #ticketGridTable col[data-dt-column="3"] { width: 160px !important; }
.hl-grid-card #ticketGridTable col[data-dt-column="4"] { width: 184px !important; }

.hl-body #ticketGridTable thead th {
    padding: 12px 0;
    background: var(--hl-bg-soft);
    border: 0;
    border-bottom: 1px solid var(--hl-line);
    text-align: start;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hl-ink-2);
    cursor: pointer;
    white-space: nowrap;
}

.hl-body #ticketGridTable thead th.dt-ordering-asc,
.hl-body #ticketGridTable thead th.dt-ordering-desc { color: var(--hl-ink); }
#ticketGridTable thead .dt-column-header { display: block; }
#ticketGridTable thead .dt-column-order { display: none; }
#ticketGridTable thead th.dt-ordering-desc .dt-column-title::after { content: " \2193"; }
#ticketGridTable thead th.dt-ordering-asc .dt-column-title::after { content: " \2191"; }

.hl-body #ticketGridTable tbody td {
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid var(--hl-line-2);
    font-size: 15px;
    line-height: 1.4;
    vertical-align: middle;
    color: var(--hl-ink-2);
    background: transparent;
}

.hl-body #ticketGridTable th:first-child,
.hl-body #ticketGridTable td:first-child { padding-left: 24px; }
.hl-body #ticketGridTable th:last-child,
.hl-body #ticketGridTable td:last-child { padding-right: 24px; }
.hl-body #ticketGridTable th[data-dt-column="1"],
.hl-body #ticketGridTable tbody td:nth-child(2) { padding-right: 24px; }

.hl-body #ticketGridTable tbody tr:hover td { background: var(--hl-bg-soft); }
.hl-body #ticketGridTable tbody tr:last-child td { border-bottom: 0; }
#ticketGridTable tbody td .sp-description { font-size: 15px; color: var(--hl-ink-2); font-variant-numeric: tabular-nums; margin: 0; }

.hl-body #ticketGridTable tbody td a {
    color: var(--hl-ink);
    font-weight: 700;
    text-decoration: none;
}

.hl-body #ticketGridTable tbody td a:hover { color: var(--hl-primary); }
#ticketGridTable tbody td > div .sp-badge { margin: 6px 8px 0 0; }

/* Empty state */
.hl-body #ticketGridTable td.dt-empty {
    padding: 72px 24px;
    text-align: center;
    border: 0;
    background: #fff;
}

.hl-empty { display: flex; flex-direction: column; align-items: center; }

.hl-empty__icon {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: var(--hl-tint);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hl-empty__icon::before {
    content: "";
    width: 26px;
    height: 26px;
    background: var(--hl-icon);
    -webkit-mask: var(--hl-i-search) center / contain no-repeat;
    mask: var(--hl-i-search) center / contain no-repeat;
}

.hl-empty__title { font-size: 19px; line-height: 1.3; font-weight: 800; color: var(--hl-ink); margin-bottom: 6px; }
.hl-empty__text { max-width: 380px; font-size: 15px; line-height: 1.5; color: var(--hl-ink-2); }

/* Footer: info, length, pager */
.hl-grid-card .dt-layout-row:last-child:not(.dt-layout-table) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 16px 24px;
    border-top: 1px solid var(--hl-line-2);
    font-size: 14px;
    color: var(--hl-ink-2);
}

.hl-grid-card .dt-layout-row:last-child .dt-layout-cell { display: flex; align-items: center; gap: 20px; padding: 0; }
.hl-grid-card .dt-info { font-size: 14px; color: var(--hl-ink-2); }
.hl-grid-card .dt-length label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 400; color: var(--hl-ink-2); }
.hl-body .hl-grid-card .dt-length select { width: auto; height: 36px; padding: 0 32px 0 10px; font-size: 14px; background-position: right 8px center; background-size: 16px; }
.hl-grid-card .dt-paging { display: none !important; }

.hl-pager { display: flex; align-items: center; gap: 4px; }

.hl-body .hl-pager button {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--hl-ink);
    font-family: var(--hl-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.hl-body .hl-pager button:hover:not(:disabled):not(.is-active) { background: var(--hl-bg); }
.hl-body .hl-pager button.is-active { background: #FFEBDE; color: var(--hl-primary-dark); font-weight: 700; cursor: default; }
.hl-body .hl-pager button:disabled { color: #B5ACA3; cursor: default; opacity: 1; }
.hl-pager__gap { padding: 0 4px; color: var(--hl-ink-3); }

@media (max-width: 767px) {
    .hl-page--tickets .hl-page-head { gap: 20px; }
    .hl-page--tickets .hl-page-body { padding-top: 12px; }
    .hl-body .hl-page-action { width: 100%; height: 48px; justify-content: center; }

    .hl-grid-card { background: transparent; border: 0; border-radius: 0; overflow: visible; }
    .hl-grid-toolbar { padding: 0 0 12px; border: 0; }
    .hl-tabs { display: none; }
    .hl-grid-tools, .hl-grid-search { flex: 1; min-width: 0; }
    .hl-body .hl-grid-search input.dt-input { width: 100%; height: 48px; font-size: 16px; }
    .hl-body .hl-grid-card a.sp-filter-results { width: 48px; height: 48px; }
    .hl-grid-card div.sp-filter-results { margin-bottom: 12px; border: 1px solid var(--hl-line); border-radius: 12px; background: #fff; }

    .hl-body table#ticketGridTable, .hl-body #ticketGridTable tbody { display: block; width: 100%; }
    .hl-body #ticketGridTable colgroup, .hl-body #ticketGridTable thead { display: none; }
    .hl-body #ticketGridTable tbody { display: flex; flex-direction: column; gap: 12px; }

    .hl-body #ticketGridTable tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "num badge" "subj subj" "time time";
        align-items: center;
        gap: 10px 8px;
        padding: 16px;
        background: #fff;
        border: 1px solid var(--hl-line);
        border-radius: 12px;
    }

    .hl-body #ticketGridTable tbody td { padding: 0; border: 0; background: transparent; display: none; }
    .hl-body #ticketGridTable tbody tr:hover td { background: transparent; }
    .hl-body #ticketGridTable tbody td:first-child { display: block; grid-area: num; padding: 0; }
    .hl-body #ticketGridTable tbody td:nth-child(2) { display: contents; }
    .hl-body #ticketGridTable tbody td:first-child .sp-description { font-size: 13px; }
    .hl-body #ticketGridTable tbody td:nth-child(2) > a { grid-area: subj; font-size: 16px; line-height: 1.35; }
    .hl-body #ticketGridTable tbody td:nth-child(2) > a > span { display: none; }
    .hl-body #ticketGridTable tbody td:nth-child(2) > div { display: contents; }
    .hl-body #ticketGridTable tbody td:nth-child(2) > div .sp-badge { grid-area: badge; justify-self: end; margin: 0; }
    .hl-body #ticketGridTable tbody td:nth-child(2) > div .sp-description { display: block; grid-area: time; margin: 0; font-size: 13px; color: var(--hl-ink-2); }
    .hl-body #ticketGridTable tbody td:nth-child(2) > div .sp-description::before { content: var(--hl-last-reply, ''); }

    .hl-body #ticketGridTable tbody tr:has(td.dt-empty) { display: block; padding: 40px 20px; }
    .hl-body #ticketGridTable tbody td.dt-empty { display: block; padding: 0; }

    .hl-grid-card .dt-layout-row:last-child:not(.dt-layout-table) { padding: 16px 0 0; border: 0; justify-content: center; }
    .hl-grid-card .dt-layout-row:last-child .dt-layout-cell { flex-wrap: wrap; justify-content: center; }
}

/* ================================================================ TICKET */
.hl-page--ticket .hl-content-inner { display: flex; flex-direction: column; }

.hl-body .sp-messages-container {
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.hl-body .sp-messages-container::before { display: none; content: none; }
.hl-body .sp-messages-container .sp-loading { margin: 0 0 16px; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid var(--hl-line); color: var(--hl-ink-2); }

.hl-body .hl-message {
    gap: 16px;
    padding: 0;
    margin: 0 0 16px;
}

.hl-msg-avatar-col { width: 44px; margin: 0; padding: 0; }
.hl-avatar--msg { width: 44px; height: 44px; font-size: 15px; font-weight: 800; }
.hl-message--staff .hl-avatar { background: var(--hl-ink); color: #fff; }

.hl-body .hl-message .hl-msg-card {
    min-width: 0;
    margin: 0;
    background: #fff;
    border: 1px solid var(--hl-line);
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;
}

.hl-body .hl-message--staff .hl-msg-card { background: #FFF9F5; border-color: #FFD4B8; }

.hl-body .hl-message.sp-message-collapsed > div.sp\:grow { opacity: 1; color: inherit; }
.hl-body .hl-message.sp-message-collapsed { cursor: pointer; }
.hl-body .hl-message.sp-message-collapsed .hl-msg-body { color: var(--hl-ink-2); }

.hl-body .hl-message .hl-msg-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    margin: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--hl-line-2);
}

.hl-body .hl-message.sp-message-collapsed .hl-msg-head { border-bottom-color: var(--hl-line-2); }
.hl-body .hl-message--staff .hl-msg-head { border-bottom-color: var(--hl-tint-2); }
.hl-message-collapsible .hl-msg-head { cursor: pointer; }

.hl-avatar--msg-inline { display: none; width: 32px; height: 32px; font-size: 12px; font-weight: 800; }

.hl-body .hl-msg-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--hl-ink-2);
}

.hl-body .hl-msg-name { font-size: 15px; font-weight: 800; color: var(--hl-ink); }

.hl-staff-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    background: var(--hl-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.hl-msg-time { color: var(--hl-ink-2); }

.hl-body .hl-msg-body {
    padding: 20px 24px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--hl-ink);
}

.hl-body .hl-msg-body .sp-message-text p { margin: 0 0 12px; }
.hl-body .hl-msg-body .sp-message-text p:last-child { margin-bottom: 0; }
.hl-body .hl-msg-body .sp-message-text a { color: var(--hl-primary); }
.hl-body .hl-msg-body blockquote { margin: 12px 0; padding-left: 14px; border-left: 3px solid var(--hl-line); color: var(--hl-ink-2); }

/* Attachments (messages + article) */
.hl-body ul.sp-attachments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.hl-body ul.sp-attachments:empty { display: none; }

.hl-body ul.sp-attachments > li {
    display: flex;
    align-items: stretch;
    max-width: 100%;
    background: #fff;
    border: 1px solid var(--hl-line);
    border-radius: 8px;
    overflow: hidden;
}

.hl-body ul.sp-attachments > li a {
    display: flex;
    align-items: center;
    gap: 8px;
    height: auto;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 0;
    background: transparent;
    color: var(--hl-ink);
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
}

.hl-body ul.sp-attachments > li a:hover { background: var(--hl-bg-soft); color: var(--hl-ink); }

.hl-body ul.sp-attachments .sp-attachment-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
}

.hl-body ul.sp-attachments .sp-attachment-icon > .fiv-viv { display: none; }

.hl-body ul.sp-attachments .sp-attachment-icon::before {
    content: "";
    width: 16px;
    height: 16px;
    background: var(--hl-icon);
    -webkit-mask: var(--hl-i-doc) center / contain no-repeat;
    mask: var(--hl-i-doc) center / contain no-repeat;
}

.hl-body ul.sp-attachments .sp-attachment-icon:has(.fiv-icon-png, .fiv-icon-jpg, .fiv-icon-jpeg, .fiv-icon-gif, .fiv-icon-webp, .fiv-icon-bmp, .fiv-icon-svg, .fiv-icon-heic, .fiv-icon-tif, .fiv-icon-tiff)::before {
    -webkit-mask-image: var(--hl-i-image);
    mask-image: var(--hl-i-image);
}

.hl-body ul.sp-attachments .sp-attachment-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-body ul.sp-attachments .sp-attachment-size { flex: none; font-size: 14px; color: var(--hl-ink-2); margin: 0; }

.hl-body ul.sp-attachments > li .sp-delete-attachment {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: transparent;
    color: var(--hl-ink-3);
    border-left: 1px solid var(--hl-line);
    border-radius: 0;
}

.hl-body ul.sp-attachments > li .sp-delete-attachment:hover { background: #FDECEA; color: var(--hl-danger); }

.hl-body .sp-download-all {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--hl-line);
    border-radius: 8px;
    background: #fff;
    color: var(--hl-ink-2);
    font-size: 14px;
    font-weight: 600;
}

/* Reply card */
.hl-reply-card {
    margin: 0 0 16px 60px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--hl-line);
    border-radius: 12px;
}

.hl-reply-card--after { margin-bottom: 0; }

.hl-reply-card .sp-message-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.hl-reply-title { font-size: 17px; line-height: 1.3; font-weight: 800; color: var(--hl-ink); }

.hl-body .hl-reply-card .reply-form:not(.sp\:hidden) { display: block; margin: 0; }

.hl-body .hl-cc {
    min-height: 44px;
    margin: 0 0 16px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    border: 1px solid var(--hl-line-input);
    border-radius: 8px;
    font-size: 15px;
}

.hl-body .hl-cc > .sp\:table-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.hl-body .hl-cc div.sp\:table-row > div.sp\:table-cell { display: block; width: auto; padding: 8px 0; flex: 1; min-width: 0; text-align: start; }
.hl-body .hl-cc div.sp\:table-row > div.sp\:table-cell:first-child { flex: none; font-weight: 700; color: var(--hl-ink-2); }
.hl-body .hl-cc .sp-recipients-text { color: var(--hl-ink); }
.hl-body .hl-cc .sp-recipients-text .sp-description { font-size: 15px; color: var(--hl-ink-3); margin: 0; }

/* Tom Select inside CC (no inner border) */
.hl-body .hl-cc .ts-wrapper { border: 0; min-height: 0; padding: 0; box-shadow: none; }
.hl-body .hl-cc .ts-wrapper .ts-control,
.hl-body .hl-cc .sp-recipients-input .ts-control {
    min-height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Tom Select chips (CC everywhere) */
.hl-body .ts-wrapper.multi .ts-control > .item,
.hl-body .ts-wrapper.multi .ts-control > div.item {
    display: inline-flex;
    align-items: center;
    height: 30px;
    margin: 2px 6px 2px 0;
    padding: 0 4px 0 10px;
    border: 0;
    border-radius: 6px;
    background: var(--hl-line-2);
    color: var(--hl-ink);
    font-size: 14px;
}

.hl-body .ts-wrapper.multi .ts-control > .item .remove { border: 0; color: var(--hl-ink-2); padding: 0 6px; margin-left: 4px; }
.hl-body .ts-wrapper.focus .ts-control { box-shadow: none; }

/* TinyMCE frame */
html.hl-theme .hl-body .tox.tox-tinymce {
    border: 1px solid var(--hl-line-input);
    border-radius: 8px;
    box-shadow: none;
}

html.hl-theme .hl-body .tox-rounded-none .tox.tox-tinymce { border-radius: 8px; }
html.hl-theme .hl-body .hl-reply-card .tox.tox-tinymce { border-radius: 8px 8px 0 0; border-bottom: 0; }

html.hl-theme .hl-body .tox .tox-editor-header {
    background: var(--hl-bg-soft);
    border-bottom: 1px solid var(--hl-line-2);
    box-shadow: none;
    padding: 0;
}

html.hl-theme .hl-body .tox .tox-toolbar,
html.hl-theme .hl-body .tox .tox-toolbar__primary,
html.hl-theme .hl-body .tox .tox-toolbar__overflow,
html.hl-theme .hl-body .tox .tox-menubar { background: var(--hl-bg-soft); background-image: none; }

html.hl-theme .hl-body .tox .tox-toolbar__primary { min-height: 44px; padding: 0 6px; align-items: center; }
html.hl-theme .hl-body .tox .tox-tbtn { height: 32px; border-radius: 6px; color: var(--hl-ink-2); }
html.hl-theme .hl-body .tox .tox-tbtn svg { fill: var(--hl-ink-2); }
html.hl-theme .hl-body .tox .tox-tbtn:hover { background: var(--hl-line-2); }
html.hl-theme .hl-body .tox .tox-tbtn--enabled,
html.hl-theme .hl-body .tox .tox-tbtn--enabled:hover { background: var(--hl-tint-2); }
html.hl-theme .hl-body .tox .tox-statusbar { border-top: 1px solid var(--hl-line-2); }
html.hl-theme .hl-body .tox-tinymce.tox-edit-focus,
html.hl-theme .hl-body .tox.tox-tinymce:focus-within { border-color: var(--hl-focus); }

/* Attached files (upload queue) */
.hl-body ul.sp-attached-files { margin: 0; gap: 8px; }

.hl-body ul.sp-attached-files:has(li:not(.sp\:hidden)) {
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--hl-line-input);
    border-top: 1px solid var(--hl-line-2);
    border-bottom: 0;
    border-radius: 0;
}

.hl-body ul.sp-attached-files li { max-width: 280px; border: 1px solid var(--hl-line); border-radius: 8px; overflow: hidden; background: #fff; }
.hl-body ul.sp-attached-files .sp-file-information { height: 32px; padding: 0 10px; background: transparent; font-size: 14px; font-weight: 600; border-radius: 0; }
.hl-body ul.sp-attached-files .sp-delete-attachment { height: 32px; width: 32px; background: transparent; border-left: 1px solid var(--hl-line); border-radius: 0; }
.hl-body ul.sp-attached-files .sp-delete-attachment i { color: var(--hl-ink-3); }
.hl-body ul.sp-attached-files .sp-delete-attachment:hover { background: #FDECEA; }
.hl-body ul.sp-attached-files .sp-delete-attachment:hover i { color: var(--hl-danger); }
.hl-body ul.sp-attached-files .sp-progress-bar .sp-bar { background: var(--hl-accent); }

/* Editor bottom bar */
.hl-editor-bar {
    min-height: 40px;
    padding: 0 14px;
    gap: 12px;
    border: 1px solid var(--hl-line-input);
    border-top: 1px solid var(--hl-line-2);
    border-radius: 0 0 8px 8px;
    background: #fff;
    font-size: 14px;
}

.hl-body label.hl-attach {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--hl-primary);
    cursor: pointer;
}

.hl-body label.hl-attach:hover { color: var(--hl-primary-dark); }
.hl-attach__icon { width: 16px; height: 16px; flex: none; }
.hl-editor-bar .sp-draft-options { color: var(--hl-ink-2); font-size: 13px; }
.hl-editor-bar .tox-button-separator { margin: 10px 0; border-color: var(--hl-line-2); }

.hl-body .reply-form .sp-attachment-dragover,
.hl-body .hl-form-card .sp-attachment-dragover {
    border: 2px dashed var(--hl-accent);
    border-radius: 10px;
    background: rgba(255, 249, 245, .94);
    color: var(--hl-primary);
    font-weight: 700;
}

.hl-reply-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hl-body .hl-reply-actions input[type="submit"] { margin: 0; }
.hl-body button.hl-btn-resolve::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: none;
    background: #1E6B3F;
    -webkit-mask: var(--hl-i-tick) center / contain no-repeat;
    mask: var(--hl-i-tick) center / contain no-repeat;
}

/* Ticket details card */
.hl-body .hl-ticket-sidebar { margin: 0; padding: 0; }

.hl-body .hl-details-card {
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--hl-line);
    border-radius: 12px;
}

.hl-body .sp-sidebar .sp-sidebar-box + .sp-sidebar-box { margin-top: 16px; padding-top: 0; border-top: 1px solid var(--hl-line); }

.hl-details-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--hl-line);
}

.hl-body .hl-details-card__title { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 800; color: var(--hl-ink); }

.hl-body a.hl-btn-print {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--hl-line-input);
    border-radius: 8px;
    background: #fff;
    color: var(--hl-ink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s;
}

.hl-body a.hl-btn-print:hover { background: var(--hl-bg); color: var(--hl-ink); }
.hl-btn-print svg { width: 15px; height: 15px; flex: none; }

.hl-details-card__body { padding: 8px 20px 12px; }
.hl-details-card__body .sp-ticket-details { margin: 0; padding: 0; }

.hl-body .hl-details-card .sp-form-row.hl-detail:not(.sp\:hidden) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--hl-line-2);
    font-size: 15px;
    line-height: 1.4;
}

.hl-body .hl-details-card .hl-detail--subject { display: none !important; }
.hl-body .hl-details-card .sp-ticket-details > .hl-detail:last-child { border-bottom: 0; }

.hl-body .hl-details-card .hl-detail > label {
    flex: none;
    width: auto;
    margin: 0;
    padding: 0;
    text-align: start;
    font-size: 15px;
    font-weight: 400;
    color: var(--hl-ink-2);
}

.hl-body .hl-details-card .hl-detail > .sp-input-container {
    width: auto;
    min-width: 0;
    text-align: end;
    font-weight: 700;
    color: var(--hl-ink);
}

.hl-body .hl-details-card .hl-detail__time { font-weight: 400; }

.hl-body .hl-details-card .sp-custom-fields { margin: 0; padding: 12px 0 4px; border-top: 1px solid var(--hl-line-2); }
.hl-body .hl-details-card .sp-custom-fields .sp-form-row:not(.sp\:hidden) { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.hl-body .hl-details-card .sp-custom-fields label { width: auto; padding: 0; text-align: start; font-size: 14px; font-weight: 700; color: var(--hl-ink-2); }
.hl-body .hl-details-card input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.hl-body .hl-details-card select,
.hl-body .hl-details-card textarea { width: 100%; height: 40px; border-color: var(--hl-line-input); background-color: #fff; font-size: 15px; }
.hl-body .hl-details-card textarea { height: auto; }
.hl-body .hl-details-card input[type="submit"] { height: 40px; font-size: 15px; }

@media (max-width: 767px) {
    .hl-msg-avatar-col { display: none; }
    .hl-body .hl-message { gap: 0; margin-bottom: 12px; }
    .hl-body .hl-message .hl-msg-head { padding: 12px 16px; }
    .hl-avatar--msg-inline { display: inline-flex; }
    .hl-body .hl-msg-meta { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0 4px; }
    .hl-body .hl-msg-name { grid-column: 1 / -1; }
    .hl-staff-pill { height: auto; padding: 0; background: none; color: var(--hl-ink-2); font-size: 13px; font-weight: 400; border-radius: 0; }
    .hl-msg-time { font-size: 13px; }
    .hl-msg-dot { display: none; }
    .hl-staff-pill + .hl-msg-time .hl-msg-dot { display: inline; }
    .hl-body .hl-msg-body { padding: 14px 16px; font-size: 15px; line-height: 1.6; }

    .hl-reply-card { margin: 0 0 12px; padding: 16px; }
    .hl-reply-card--after { margin-bottom: 0; }
    .hl-reply-card .sp-message-form { gap: 12px; }
    .hl-body .hl-cc { margin-bottom: 12px; }
    html.hl-theme .hl-body .tox .tox-toolbar__primary { min-height: 40px; }
    html.hl-theme .hl-body .tox .tox-tbtn { height: 36px; width: 36px; }
    .hl-reply-actions { flex-direction: column; }
    .hl-body .hl-reply-actions input[type="submit"],
    .hl-body .hl-reply-actions button.sp-mark-resolved { width: 100%; height: 50px; }

    .hl-details-card__head { display: none; }
    .hl-details-card__body { padding: 4px 16px; }
    .hl-body .hl-details-card .sp-ticket-details { display: flex; flex-direction: column; }
    .hl-body .hl-details-card .sp-form-row.hl-detail:not(.sp\:hidden) { padding: 10px 0; font-size: 14px; border-bottom: 1px solid var(--hl-line-2); }
    .hl-body .hl-details-card .hl-detail > label { font-size: 14px; }
    .hl-body .hl-details-card .hl-detail--status { order: 1; }
    .hl-body .hl-details-card .hl-detail--priority { order: 2; }
    .hl-body .hl-details-card .hl-detail--department { order: 3; }
    .hl-body .hl-details-card .hl-detail--number { order: 4; }
    .hl-body .hl-details-card .hl-detail--submitted { order: 5; }
    .hl-body .hl-details-card .hl-detail--updated { order: 6; border-bottom: 0; }
    .hl-body .hl-details-card .sp-ticket-details > .hl-detail:last-child:not(.hl-detail--updated) { border-bottom: 1px solid var(--hl-line-2); }
}

/* ============================================================ SUBMIT FORM */
.hl-form-card {
    max-width: 960px;
    margin: 0;
    background: #fff;
    border: 1px solid var(--hl-line);
    border-radius: 12px;
}

.hl-stepper {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 32px;
    border-bottom: 1px solid var(--hl-line);
}

.hl-step { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--hl-ink-2); }
.hl-step--current { font-weight: 700; color: var(--hl-ink); }

.hl-step__dot {
    width: 24px;
    height: 24px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.hl-step--done .hl-step__dot { background: #E6F3EA; color: #1E6B3F; }
.hl-step--current .hl-step__dot { background: var(--hl-primary); color: #fff; }
.hl-step__line { width: 32px; height: 1px; flex: none; background: var(--hl-line-input); }

.hl-form-card > .sp-alert { margin: 24px 32px 0; }

.hl-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 28px 32px;
}

.hl-form-grid > * { grid-column: 1 / -1; min-width: 0; }
.hl-form-grid > .hl-field--half { grid-column: auto; }
.hl-body .hl-form-grid .sp-form-row:not(.sp\:hidden) { margin: 0; }
.hl-body .hl-form-grid > .sp\:hidden { display: none; }

.hl-readonly {
    height: 46px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 8px;
    background: var(--hl-bg);
    font-size: 16px;
    color: var(--hl-ink);
}

.hl-suggested {
    padding: 16px 20px;
    border: 1px solid var(--hl-line);
    border-radius: 10px;
    background: var(--hl-bg-soft);
}

.hl-body .hl-suggested__title { margin: 0 0 8px; font-size: 15px; font-weight: 700; }

.hl-field--message .tox-tinymce + * { margin-top: 0; }
.hl-body .hl-form-card ul.sp-attached-files:has(li:not(.sp\:hidden)) { margin-top: 12px; border: 1px solid var(--hl-line); border-radius: 8px; }

.hl-dropzone-wrap { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

.hl-body label.hl-dropzone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 24px;
    border: 1.5px dashed var(--hl-line-input);
    border-radius: 10px;
    background: var(--hl-bg-soft);
    color: var(--hl-ink-2);
    font-size: 15px;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.hl-body label.hl-dropzone:hover,
.hl-body label.hl-dropzone.is-dragover { border-color: var(--hl-accent); background: #FFF9F5; }
.hl-dropzone__icon { width: 22px; height: 22px; flex: none; color: var(--hl-icon); }
.hl-dropzone__browse { color: var(--hl-primary); font-weight: 700; }

.hl-body .hl-form-footer:not(.sp\:hidden) {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 20px 32px;
    border-top: 1px solid var(--hl-line);
}

.hl-form-footer .hl-btn-secondary { font-size: 16px; }

@media (max-width: 767px) {
    .hl-form-card { padding: 20px; }
    .hl-stepper { display: none; }
    .hl-form-card > .sp-alert { margin: 0 0 20px; }
    .hl-form-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 0; }
    .hl-form-grid > .hl-field--half { grid-column: 1 / -1; }
    .hl-body .hl-form-card input[type="text"],
    .hl-body .hl-form-card input[type="email"],
    .hl-body .hl-form-card select:not([multiple]),
    .hl-readonly { height: 48px; }
    .hl-dropzone-wrap .hl-field-label { display: none; }
    .hl-body label.hl-dropzone { min-height: 56px; padding: 0 16px; gap: 10px; }
    .hl-dropzone__icon { width: 20px; height: 20px; }
    .hl-dropzone__text--mobile { color: var(--hl-primary); font-weight: 700; }
    .hl-body .hl-form-footer:not(.sp\:hidden) { padding: 20px 0 0; border: 0; }
    .hl-body .hl-form-footer input[type="submit"] { width: 100%; height: 50px; }
}

/* ================================================================ ARTICLE */
.hl-article-card {
    background: #fff;
    border: 1px solid var(--hl-line);
    border-radius: 12px;
}

.hl-article-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 32px;
    border-bottom: 1px solid var(--hl-line);
}

.hl-body ul.sp-article-details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.4;
    color: var(--hl-ink-2);
}

.hl-body ul.sp-article-details > li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.hl-meta-icon { width: 16px; height: 16px; flex: none; color: var(--hl-ink-3); }
.hl-body ul.sp-article-details .sp-item-list { display: inline; margin: 0; padding: 0; }
.hl-body ul.sp-article-details .sp-item-list a { font-weight: 700; text-decoration: none; }
.hl-body .hl-article-meta ul.sp-article-details .sp-item-list a { color: var(--hl-primary); }

.hl-body a.hl-btn-print--article { height: 38px; padding: 0 14px; gap: 8px; flex: none; }
.hl-btn-print--article svg { width: 16px; height: 16px; }

.hl-body .hl-article-body {
    max-width: 824px;
    padding: 32px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--hl-ink);
}

.hl-body .hl-article-body p { margin: 0 0 16px; }
.hl-body .hl-article-body h1,
.hl-body .hl-article-body h2,
.hl-body .hl-article-body h3,
.hl-body .hl-article-body h4 { margin: 28px 0 12px; line-height: 1.3; font-weight: 800; color: var(--hl-ink); }
.hl-body .hl-article-body h2 { font-size: 21px; }
.hl-body .hl-article-body h3 { font-size: 18px; }
.hl-body .hl-article-body h4 { font-size: 17px; }
.hl-body .hl-article-body > :first-child,
.hl-body .hl-article-body > div:first-child > :first-child { margin-top: 0; }
.hl-body .hl-article-body > :last-child { margin-bottom: 0; }
.hl-body .hl-article-body ul,
.hl-body .hl-article-body ol { margin: 0 0 16px; padding-left: 22px; }
.hl-body .hl-article-body li { margin-bottom: 8px; }
.hl-body .hl-article-body img { border-radius: 8px; }
.hl-body .hl-article-body table { width: 100%; margin: 0 0 16px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.hl-body .hl-article-body th,
.hl-body .hl-article-body td { padding: 10px 14px; border: 1px solid var(--hl-line); text-align: start; vertical-align: top; }
.hl-body .hl-article-body th { background: var(--hl-bg); font-weight: 700; }
.hl-body .hl-article-body code { padding: 1px 6px; border-radius: 4px; background: var(--hl-bg); font-size: .9em; }
.hl-body .hl-article-body pre { padding: 14px 16px; border-radius: 8px; background: var(--hl-bg); overflow-x: auto; font-size: 14px; }

.hl-article-attachments {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 32px;
    padding: 20px 0;
    border-top: 1px solid var(--hl-line);
}

.hl-body .hl-section-label { margin: 0; font-size: 14px; line-height: 1.4; font-weight: 700; color: var(--hl-ink-2); }
.hl-body .hl-article-attachments ul.sp-attachments { margin: 0; gap: 12px; }
.hl-body .hl-article-attachments ul.sp-attachments > li { width: 360px; max-width: 100%; }

.hl-body .hl-article-attachments ul.sp-attachments > li a {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 0;
    width: 100%;
    padding: 12px 14px;
}

.hl-body .hl-article-attachments ul.sp-attachments .sp-attachment-icon {
    grid-row: 1 / 3;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--hl-tint);
}

.hl-body .hl-article-attachments ul.sp-attachments .sp-attachment-icon::before { width: 18px; height: 18px; }
.hl-body .hl-article-attachments ul.sp-attachments .sp-attachment-name { font-size: 15px; }
.hl-body .hl-article-attachments ul.sp-attachments .sp-attachment-size { font-size: 13px; }

.hl-article-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 18px 32px;
    border-top: 1px solid var(--hl-line);
}

.hl-share { display: flex; align-items: center; gap: 12px; }
.hl-share__label { font-size: 14px; font-weight: 700; color: var(--hl-ink-2); }

.hl-body a.hl-share__btn {
    width: 36px;
    height: 36px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hl-line-input);
    border-radius: 50%;
    background: #fff;
    color: var(--hl-ink);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: border-color .15s;
}

.hl-body a.hl-share__btn:hover { border-color: var(--hl-accent); color: var(--hl-ink); }
.hl-share__btn svg { width: 16px; height: 16px; }
.hl-body a.hl-share__btn--fb { font-family: Arial, sans-serif; font-size: 17px; }

.hl-rate { font-size: 14px; color: var(--hl-ink-2); }
.hl-rate > * { margin: 0; }

.hl-article-section { padding: 24px 32px; border-top: 1px solid var(--hl-line); }
.hl-article-section > .hl-section-label { margin-bottom: 12px; }
.hl-body .hl-article-section ul.sp-article-list { margin: 0; padding: 0; list-style: none; }
.hl-body .hl-article-section ul.sp-article-list > li { margin: 0; padding: 12px 0; border-top: 1px solid var(--hl-line-2); }
.hl-body .hl-article-section ul.sp-article-list > li:first-child { border-top: 0; padding-top: 0; }
.hl-body .hl-article-section ul.sp-article-list h4 { margin: 0; font-size: 16px; font-weight: 700; }
.hl-body .hl-article-section ul.sp-article-list h4 a { color: var(--hl-ink); text-decoration: none; }
.hl-body .hl-article-section ul.sp-article-list h4 a:hover { color: var(--hl-primary); }
.hl-body .hl-article-section ul.sp-article-list p { margin: 4px 0 0; font-size: 14px; color: var(--hl-ink-2); }
.hl-body .hl-article-section ul.sp-article-details { margin-top: 6px; font-size: 13px; }

.hl-body .hl-article-comments .sp-comments-block { margin: 0; padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
.hl-body .hl-article-comments .sp-comments-block::before { content: none; display: none; }

.hl-article-meta-m { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 14px; color: var(--hl-ink-2); }
.hl-body .hl-article-meta-m a { font-weight: 700; text-decoration: none; }

/* Self-service sidebar */
.hl-body .hl-ss-sidebar { margin: 0; padding: 0; }

.hl-body .hl-side-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--hl-line);
    border-radius: 12px;
}

.hl-body .hl-sidebar .hl-side-card + .hl-side-card { margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--hl-line); }

.hl-body .hl-side-card__title {
    margin: 0;
    padding: 0 12px 10px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hl-ink-2);
}

.hl-body .hl-side-nav { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.hl-body .hl-sidebar ul.hl-side-nav li { margin: 0; padding: 0; }

.hl-body .hl-sidebar ul.hl-side-nav li a.hl-side-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--hl-ink);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    text-decoration: none;
    white-space: normal;
}

.hl-body .hl-sidebar ul.hl-side-nav li a.hl-side-nav__link:hover { background: var(--hl-bg); color: var(--hl-ink); }

.hl-body .hl-sidebar ul.hl-side-nav li a.hl-side-nav__link.is-active {
    background: var(--hl-tint);
    box-shadow: inset 3px 0 0 var(--hl-accent);
    color: var(--hl-primary-dark);
    font-weight: 700;
}

.hl-side-nav__link .nav-item { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.hl-body .hl-side-nav .sp-badge.hl-count {
    min-width: 24px;
    height: 22px;
    flex: none;
    justify-content: center;
    gap: 0;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--hl-bg);
    color: var(--hl-ink-2);
    font-size: 12px;
    font-weight: 800;
}

.hl-body .hl-side-nav .is-active .sp-badge.hl-count { background: #fff; color: var(--hl-primary-dark); }

@media (max-width: 767px) {
    .hl-article-meta { display: none; }
    .hl-body .hl-article-body { padding: 20px; font-size: 16px; line-height: 1.65; }
    .hl-body .hl-article-body p { margin-bottom: 14px; }
    .hl-body .hl-article-body h2 { font-size: 19px; margin: 24px 0 10px; }
    .hl-body .hl-article-body ul,
    .hl-body .hl-article-body ol { padding-left: 20px; margin-bottom: 14px; }
    .hl-body .hl-article-body li { margin-bottom: 6px; }
    .hl-body .hl-article-body table { display: block; overflow-x: auto; }
    .hl-article-attachments { margin: 0 20px; padding: 16px 0; }
    .hl-article-foot { margin: 0 20px; padding: 16px 0 20px; gap: 12px; }
    .hl-share { gap: 8px; }
    .hl-share__label { margin-right: 4px; }
    .hl-body a.hl-share__btn { width: 44px; height: 44px; }
    .hl-article-section { padding: 20px; }

    .hl-body .hl-side-card { padding: 12px; }
    .hl-body .hl-sidebar .hl-side-card + .hl-side-card { padding-top: 12px; }
    .hl-body .hl-side-card__title { padding: 6px 8px 8px; }
    .hl-body .hl-sidebar ul.hl-side-nav li a.hl-side-nav__link { min-height: 44px; padding: 0 12px; }
    .hl-body .hl-side-nav .sp-badge.hl-count,
    .hl-body .hl-side-nav .is-active .sp-badge.hl-count { min-width: 0; height: auto; padding: 0; background: none; font-size: 13px; font-weight: 600; color: var(--hl-ink-2); }
}

/* ================================================================== PRINT */
@media print {
    .hl-header, .hl-footer, .hl-page-head .hl-breadcrumb, .hl-btn-print, .hl-share, .hl-ss-sidebar { display: none !important; }
    body.hl-body { background: #fff; }
    .hl-page-head, .hl-page-body { padding-left: 0; padding-right: 0; }
    .hl-article-card, .hl-details-card, .hl-msg-card { border-color: #ccc; }
}