/**
 * Servertastic frontend theme for SupportPal 6.0.x
 * Brand red: #d70e24
 */

:root,
.sp-theme-light,
.sp-theme-dark {
    --servertastic-red: #d70e24;
    --servertastic-red-hover: #b90c1f;
    --servertastic-red-dark: #920918;
    --servertastic-red-soft: #fbe9eb;
    --servertastic-charcoal: #252525;
    --servertastic-muted: #60646b;
    --servertastic-canvas: #f4f5f7;
    --servertastic-border: #dfe2e6;
    --servertastic-white: #ffffff;

    /* SupportPal's generated colour scheme variables. */
    --color-primary-50: #fff1f2;
    --color-primary-100: #ffe4e6;
    --color-primary-200: #fecdd3;
    --color-primary-300: #fda4af;
    --color-primary-400: #fb7185;
    --color-primary-500: #ee2941;
    --color-primary-600: #d70e24;
    --color-primary-700: #b90c1f;
    --color-primary-800: #920918;
    --color-primary-900: #790b17;
    --color-primary-950: #46040b;
    --color-background-primary: #ffffff;
    --color-background-secondary: #f4f5f7;
    --color-background-tertiary: #e5e7eb;
    --color-text-primary: #252525;
    --color-text-secondary: #60646b;
    --color-text-tertiary: #777c84;

    /* Direct utility fallbacks used by SupportPal 6.0.3. */
    --sp-color-primary-50: #fff1f2;
    --sp-color-primary-100: #ffe4e6;
    --sp-color-primary-200: #fecdd3;
    --sp-color-primary-300: #fda4af;
    --sp-color-primary-400: #fb7185;
    --sp-color-primary-500: #ee2941;
    --sp-color-primary-600: #d70e24;
    --sp-color-primary-700: #b90c1f;
    --sp-color-primary-800: #d70e24;
    --sp-color-primary-900: #b90c1f;
    --sp-color-primary-950: #46040b;
    --sp-text-color-primary: #252525;
    --sp-text-color-secondary: #60646b;
    --sp-text-color-tertiary: #777c84;
}

html {
    color-scheme: light;
}

body {
    background: var(--servertastic-canvas) !important;
    color: var(--servertastic-charcoal) !important;
    font-family: Inter, Arial, Helvetica, sans-serif;
}

/* Header and navigation */
header {
    background: var(--servertastic-red) !important;
    color: var(--servertastic-white) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 3px 12px rgba(35, 35, 35, 0.2) !important;
}

header a,
header .sp-action,
header .sp-search-button,
header .sp-mobile-nav-button {
    color: var(--servertastic-white) !important;
}

header a:hover,
header .sp-action:hover,
header .sp-search-button:hover {
    color: var(--servertastic-white) !important;
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

header .sp-logo {
    width: auto;
    max-width: min(240px, 58vw);
}

header .sp-search {
    background: var(--servertastic-red) !important;
}

header .sp-search input {
    background: var(--servertastic-white) !important;
    color: var(--servertastic-charcoal) !important;
}

header .sp-search-close {
    background: var(--servertastic-red-hover) !important;
    color: var(--servertastic-white) !important;
}

header .sp-dropdown {
    background: var(--servertastic-white) !important;
    border: 1px solid var(--servertastic-border);
    box-shadow: 0 10px 28px rgba(20, 20, 20, 0.18);
}

header .sp-dropdown a {
    color: var(--servertastic-charcoal) !important;
    text-decoration: none;
}

header .sp-dropdown a:hover {
    background: var(--servertastic-red-soft) !important;
    color: var(--servertastic-red) !important;
}

.sp-mobile-nav {
    background: var(--servertastic-red-dark) !important;
    color: var(--servertastic-white) !important;
}

.sp-mobile-nav a,
.sp-mobile-nav ul.sp-nav li a,
.sp-mobile-nav ul.sp-nav li a:hover,
.sp-mobile-nav ul.sp-nav li a.current {
    color: var(--servertastic-white) !important;
}

.sp-mobile-nav ul.sp-nav li a:hover,
.sp-mobile-nav ul.sp-nav li a.current {
    background: rgba(255, 255, 255, 0.12) !important;
}

.sp-mobile-nav-button > div {
    border-color: rgba(255, 255, 255, 0.8) !important;
}

.sp-mobile-nav-button svg,
.sp-mobile-nav-button path {
    fill: var(--servertastic-white) !important;
}

/* Main content */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--servertastic-charcoal);
}

h1 {
    font-weight: 650 !important;
    letter-spacing: -0.02em;
}

.sp-content-inner {
    background: var(--servertastic-white) !important;
    border: 1px solid var(--servertastic-border);
    border-top: 4px solid var(--servertastic-red);
    border-radius: 0.4rem !important;
    box-shadow: 0 5px 18px rgba(31, 35, 41, 0.07);
}

.sp-breadcrumb,
.sp-breadcrumb a {
    color: var(--servertastic-muted) !important;
}

.sp-breadcrumb a:hover {
    color: var(--servertastic-red) !important;
}

.sp-content-inner a:not(.sp-button),
.sp-sidebar a:not(.sp-button) {
    color: var(--servertastic-charcoal) !important;
}

.sp-content-inner a:not(.sp-button):hover,
.sp-sidebar a:not(.sp-button):hover {
    color: var(--servertastic-charcoal) !important;
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

.sp-dashboard-section {
    border-color: var(--servertastic-border) !important;
}

.sp-dashboard-section .sp-icon,
.sp-dashboard-section .sp-icon .fa-solid,
.sp-dashboard-section .sp-icon svg {
    color: var(--servertastic-charcoal) !important;
}

.sp-dashboard-section .sp-icon svg,
.sp-dashboard-section .sp-icon svg path {
    fill: currentColor !important;
}

/* Generic identity shown for operator replies in the customer ticket view. */
.sp-message .servertastic-operator-name {
    color: var(--servertastic-charcoal) !important;
}

.sp-message .servertastic-operator-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: var(--servertastic-red);
    color: var(--servertastic-white);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

@media (min-width: 80rem) {
    .sp-message .servertastic-operator-avatar {
        width: 3rem;
        height: 3rem;
        font-size: 0.9rem;
    }
}

/* Ticket conversation links need strong contrast against white message cards. */
.sp-content-inner :where(
    .sp-ticket-message,
    .sp-message,
    .sp-message-content,
    .sp-ticket-reply,
    [class*="ticket-message"],
    [class*="message-content"]
) a[href]:not(.sp-button),
.sp-content-inner a[href^="http://"]:not(.sp-button),
.sp-content-inner a[href^="https://"]:not(.sp-button),
.sp-content-inner a[href^="//"]:not(.sp-button),
.sp-content-inner a[href^="mailto:"]:not(.sp-button) {
    color: var(--servertastic-charcoal) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

.sp-content-inner :where(
    .sp-ticket-message,
    .sp-message,
    .sp-message-content,
    .sp-ticket-reply,
    [class*="ticket-message"],
    [class*="message-content"]
) a[href]:not(.sp-button):hover,
.sp-content-inner a[href^="http://"]:not(.sp-button):hover,
.sp-content-inner a[href^="https://"]:not(.sp-button):hover,
.sp-content-inner a[href^="//"]:not(.sp-button):hover,
.sp-content-inner a[href^="mailto:"]:not(.sp-button):hover {
    color: #000000 !important;
}

/*
 * SupportPal intentionally uses primary-100 for ticket links whenever the
 * document has sp-theme-dark. The Servertastic portal is visually light, so
 * override that dark-mode branch as well as the normal light-mode rule.
 */
html body .sp-content-inner .sp-message .sp-message-content .sp-message-text a[href],
html.sp-theme-dark body .sp-content-inner .sp-message .sp-message-content .sp-message-text a[href],
html body .sp-content-inner .sp-message .sp-message-text-original a[href],
html body .sp-content-inner .sp-message .sp-message-text-trimmed a[href] {
    color: #005ea8 !important;
    -webkit-text-fill-color: #005ea8 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 0.08em !important;
    text-underline-offset: 0.18em !important;
    opacity: 1 !important;
}

html body .sp-content-inner .sp-message .sp-message-content .sp-message-text a[href]:hover,
html body .sp-content-inner .sp-message .sp-message-content .sp-message-text a[href]:focus-visible {
    color: #003f73 !important;
    -webkit-text-fill-color: #003f73 !important;
}

.sp-sidebar ul.sp-nav li a.current {
    border-color: var(--servertastic-red) !important;
    background: var(--servertastic-white) !important;
    color: var(--servertastic-charcoal) !important;
}

.sp-sidebar ul.sp-nav li a:hover {
    color: var(--servertastic-charcoal) !important;
}

/* Search panel. This remains compatible with Hide Frontend Search. */
.sp-search-container {
    background: var(--servertastic-white) !important;
    border-bottom: 1px solid var(--servertastic-border);
    box-shadow: 0 4px 12px rgba(31, 35, 41, 0.08) !important;
}

.sp-search-container .sp-search > div:first-child {
    color: var(--servertastic-charcoal);
}

.sp-search input[type="search"] {
    border: 1px solid var(--servertastic-border) !important;
    border-radius: 0.35rem !important;
    box-shadow: 0 2px 8px rgba(31, 35, 41, 0.08);
}

/* Buttons and forms */
input[type="submit"],
input[type="button"].sp-button-submit,
.sp-button-submit,
a.sp-button {
    background: var(--servertastic-red) !important;
    border-color: var(--servertastic-red) !important;
    color: var(--servertastic-white) !important;
    border-radius: 0.3rem !important;
    box-shadow: none !important;
    font-weight: 650;
}

input[type="submit"]:not([disabled]):hover,
input[type="button"].sp-button-submit:not([disabled]):hover,
.sp-button-submit:not([disabled]):hover,
a.sp-button:hover {
    background: var(--servertastic-red-hover) !important;
    border-color: var(--servertastic-red-hover) !important;
    color: var(--servertastic-white) !important;
    text-decoration: none;
}

button.sp-button-red,
input[type="button"].sp-button-red,
.sp-button-red {
    background: var(--servertastic-red-dark) !important;
    color: var(--servertastic-white) !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
    border-color: var(--servertastic-border) !important;
    background: var(--servertastic-white) !important;
    color: var(--servertastic-charcoal) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    border-color: var(--servertastic-red) !important;
    outline: 3px solid rgba(215, 14, 36, 0.16) !important;
    outline-offset: 0;
    box-shadow: none !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: var(--servertastic-red);
}

/* Tabs, labels and status accents */
ul.sp-tabs li.sp-active a {
    border-color: var(--servertastic-red) !important;
    color: var(--servertastic-red) !important;
}

.sp-badge {
    background: var(--servertastic-red) !important;
    color: var(--servertastic-white) !important;
}

.sp-pagination .active,
.sp-pagination .sp-active {
    background: var(--servertastic-red) !important;
    border-color: var(--servertastic-red) !important;
    color: var(--servertastic-white) !important;
}

/* SupportPal footer wrapper */
body > .sp\:px-6.sp\:mt-6.sp\:border-t {
    background: var(--servertastic-charcoal) !important;
    border-top: 4px solid var(--servertastic-red) !important;
    color: #d7d9dd !important;
}

body > .sp\:px-6.sp\:mt-6.sp\:border-t a,
body > .sp\:px-6.sp\:mt-6.sp\:border-t span,
body > .sp\:px-6.sp\:mt-6.sp\:border-t i {
    color: #d7d9dd !important;
}

body > .sp\:px-6.sp\:mt-6.sp\:border-t select {
    background: #333333 !important;
    border-color: #55585d !important;
    color: var(--servertastic-white) !important;
}

@media (max-width: 40rem) {
    .sp-content-inner {
        border-right: 0;
        border-left: 0;
        border-radius: 0 !important;
        box-shadow: none;
    }
}

@media print {
    header,
    .sp-content-inner,
    body > .sp\:px-6.sp\:mt-6.sp\:border-t {
        background: #ffffff !important;
        color: #000000 !important;
        border-color: #cccccc !important;
        box-shadow: none !important;
    }
}