/*
 * FXBG Tech theme for SupportPal 6.1, mapped from the MSP Ops theme handoff.
 *
 * The core --color-* values are set in Controllers/FXBGTheme.php, except the light primary shades, which come from
 * the Settings > Brands colour (#2c1577). This file covers what those can't reach, mostly by remapping SupportPal's
 * --sp-color-* tokens rather than restyling components. Values not in the handoff are marked "derived".
 * Colours are screen only, so SupportPal's print styles still print light.
 */

/* Headings: Montserrat, self-hosted variable font (weights 600-800, latin + latin-ext). Licence in ../fonts/OFL.txt. */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url("../fonts/montserrat-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --sp-font-display: "Montserrat", "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
}

@media screen {

    /* ---------------------------------------------------------------- Both themes */

    /* Top bar: white 13% hover, search field white 12% with white 60% placeholder and icon. */
    :root .sp-nav-item:not(.sp-nav-icon-item):hover,
    :root nav > ul > li:hover > .sp-nav-item,
    :root .sp-nav-item.sp-hover {
        background-color: rgba(255, 255, 255, .13);
    }

    :root #header .search-form {
        --sp-color-primary-600: rgba(255, 255, 255, .12);
        --sp-color-primary-100: rgba(255, 255, 255, .6);
    }

    /* Focus ring: orange. Set on the focused element so it also wins inside selected rows. */
    :root :focus-visible,
    :root :is(input, select, textarea, button, a.sp-button):is(:focus, :focus-visible) {
        --sp-color-primary-200: #f05a22;
    }

    /* Active tab: 3px orange underline. */
    :root ul.sp-tabs li.sp-active a {
        box-shadow: inset 0 -3px 0 #f05a22;
    }

    /* Message author names: staff purple and users orange instead of SupportPal's red and green (light -700, dark -300). */
    :root .sp-message-header .sp-name {
        --sp-color-red-700: #2c1577;
        --sp-color-red-300: #c3b6ee;
        --sp-color-green-700: #b13a13;
        --sp-color-green-300: #ff7a5c;
    }

    /* Notes count: gold fill takes dark purple text, never white. */
    :root .sp-ticket-metadata .sp-notes-count {
        background-color: #fcb017;
        color: #1a0c3d;
    }

    /* Customer portal: gold active-nav indicator. */
    :root .sp-sidebar ul.sp-nav li a.current {
        border-color: #fcb017;
    }

    /* Navigation divider uses primary-200 (orange in dark): plain divider in the account menu, white 18% on the purple mobile menu. */
    :root hr.sp\:border-primary-200 {
        border-color: var(--color-background-tertiary);
    }

    :root .sp-mobile-nav hr.sp\:border-primary-200 {
        border-color: rgba(255, 255, 255, .18);
    }

    /* ---------------------------------------------------------------- Light */

    /* Link hover: orange-700. Kept at a:hover specificity so component and top bar link colours still win. */
    a:hover:where(:root:not(.sp-theme-dark) *):not(:where(#header *, .sp-mobile-nav *)) {
        color: #d14d1c;
    }

    /* Flyout menus: purple-100 active item with link-strong text. */
    :root:not(.sp-theme-dark) .sp-nav-dropdown li > a:hover,
    :root:not(.sp-theme-dark) nav > ul > li > ul > li:hover > .sp-nav-sub-menu {
        background-color: #ede8f9;
        color: #1e0f52;
    }

    /* Primary buttons: purple-700, hover purple-600. */
    :root:not(.sp-theme-dark) :is(input[type=submit], input[type=button].sp-button-submit, .sp-button-submit) {
        --sp-color-primary-900: #3a1d9e;
    }

    /* Selected rows: purple-100. */
    :root:not(.sp-theme-dark) table.dataTable tbody tr.selected {
        --sp-color-primary-200: #ede8f9;
    }

    /* Count badges: purple-100 with link text. */
    :root:not(.sp-theme-dark) .sp-badge {
        background-color: #ede8f9;
        color: #2c1577;
    }

    /* Notices: tinted status background, status-coloured 4px edge, darker text in the same hue. */
    :root:not(.sp-theme-dark) .sp-alert {
        background-color: #f3f4f6;
        border-color: #9ca3af;
        color: #374151;
    }

    :root:not(.sp-theme-dark) .sp-alert.sp-alert-error {
        background-color: rgba(240, 90, 34, .12);
        border-color: #f05a22;
        color: #b13a13;
    }

    :root:not(.sp-theme-dark) .sp-alert.sp-alert-warning {
        background-color: rgba(252, 176, 23, .18);
        border-color: #fcb017;
        color: #6a4400;
    }

    :root:not(.sp-theme-dark) .sp-alert.sp-alert-success {
        background-color: rgba(16, 185, 129, .15);
        border-color: #10b981;
        color: #047857;
    }

    :root:not(.sp-theme-dark) .sp-alert.sp-alert-info {
        background-color: #ede8f9;
        border-color: #2c1577;
        color: #2c1577;
    }

    /* Ticket messages: new-message highlight in purple-100 (blue is reserved for "in progress"), notes in gold tint. */
    :root:not(.sp-theme-dark) :is(.sp-message, .sp-pinned-message, .sp-draft-message) {
        --sp-color-blue-100: #ede8f9;
        --sp-color-blue-300: #9e87e4;
        --sp-color-blue-400: #7356d9;
        --sp-color-yellow-100: rgba(252, 176, 23, .18);
        --sp-color-yellow-300: #fcb017;
        --sp-color-yellow-400: #fcb017;
        --sp-color-yellow-500: #fcb017;
    }

    /* Reply box: reply icon in link colour instead of blue, note icon in warning gold. */
    :root:not(.sp-theme-dark) .sp-quick-actions .sp-reply-type .sp-action.sp-active[data-type="0"] {
        color: #2c1577;
    }

    :root:not(.sp-theme-dark) .sp-quick-actions .sp-reply-type .sp-action.sp-active[data-type="1"] {
        color: #b8860b;
    }

    /* ---------------------------------------------------------------- Dark */

    /* Neutrals: the handoff's dark neutral scale, re-indexed to Tailwind's order so gray-700 is still a dark shade. */
    :root.sp-theme-dark {
        --sp-color-gray-50: #ece8f7;
        --sp-color-gray-100: #ded9ee;
        --sp-color-gray-200: #cdc7e0;
        --sp-color-gray-300: #b6afce;
        --sp-color-gray-400: #9990b3;
        --sp-color-gray-500: #6f6890;
        --sp-color-gray-600: #3a3352;
        --sp-color-gray-700: #2f2946;
        --sp-color-gray-800: #262038;
        --sp-color-gray-900: #211c34;
        --sp-color-gray-950: #100d1c;
    }

    /* Flyout menus: purple-tinted active item. */
    .sp-theme-dark .sp-nav-dropdown li > a:hover,
    .sp-theme-dark nav > ul > li > ul > li:hover > .sp-nav-sub-menu {
        background-color: rgba(115, 86, 217, .2);
        color: var(--color-text-primary);
    }

    /* Primary buttons: purple-600, hover purple-400. */
    .sp-theme-dark :is(input[type=submit], input[type=button].sp-button-submit, .sp-button-submit) {
        --sp-color-primary-800: #3a1d9e;
        --sp-color-primary-900: #7356d9;
    }

    /* Count badges: info tint (the core scheme would make them near-black). */
    .sp-theme-dark .sp-badge {
        background-color: rgba(180, 154, 255, .18);
        color: #d4c6ff;
    }

    /* Notices: tinted status background, status-coloured 4px edge, lighter text in the same hue. */
    .sp-theme-dark .sp-alert {
        background-color: rgba(255, 255, 255, .05);
        border-color: #3a3352;
        color: #b6afce;
    }

    .sp-theme-dark .sp-alert.sp-alert-error {
        background-color: rgba(240, 90, 34, .18);
        border-color: #f05a22;
        color: #ffb59a;
    }

    .sp-theme-dark .sp-alert.sp-alert-warning {
        background-color: rgba(252, 176, 23, .15);
        border-color: #fcb017;
        color: #fed977;
    }

    .sp-theme-dark .sp-alert.sp-alert-success {
        background-color: rgba(16, 185, 129, .18);
        border-color: #10b981;
        color: #6ee7b7;
    }

    .sp-theme-dark .sp-alert.sp-alert-info {
        background-color: rgba(180, 154, 255, .18);
        border-color: #7356d9;
        color: #d4c6ff;
    }

    /* Ticket messages: new-message highlight in purple (blue is reserved for "in progress"), notes in gold tint. */
    .sp-theme-dark :is(.sp-message, .sp-pinned-message, .sp-draft-message) {
        --sp-color-blue-900: rgba(115, 86, 217, .2);
        --sp-color-blue-700: #7356d9;
        --sp-color-blue-600: #7356d9;
        --sp-color-yellow-900: rgba(252, 176, 23, .12);
        --sp-color-yellow-700: #fcb017;
        --sp-color-yellow-600: #fcb017;
    }

    /* Reply box: reply icon in link colour instead of blue, note icon in warning gold. */
    .sp-theme-dark .sp-quick-actions .sp-reply-type .sp-action.sp-active[data-type="0"] {
        color: #a99ce0;
    }

    .sp-theme-dark .sp-quick-actions .sp-reply-type .sp-action.sp-active[data-type="1"] {
        color: #fed977;
    }

    /* Customer portal: no card shadow in dark. */
    .sp-theme-dark .sp-sidebar ul.sp-nav li a.current {
        box-shadow: none;
    }

}