html.sp-theme-dark {
    --color-primary-100: hsl(210 21% 70% / 1) !important;
    --color-primary-200: hsl(210 24% 60% / 1) !important;
    --color-primary-300: hsl(220 18% 46% / 1) !important;
    --color-primary-400: hsl(220 18% 40% / 1) !important;
    --color-primary-500: hsl(220 18% 33% / 1) !important;
    --color-primary-600: hsl(220 18% 26% / 1) !important;
    --color-primary-700: hsl(220 19% 18% / 1) !important;
    --color-primary-800: hsl(220 42% 11% / 1) !important;
    --color-primary-900: hsl(220 100% 4% / 1) !important;
    --color-background-primary: hsl(220 30% 18% / 1) !important;
    --color-background-secondary: hsl(220 32% 28% / 1) !important;
    --color-background-tertiary: hsl(220 18% 33% / 1) !important;
    --color-text-primary: hsl(217deg 100% 94%) !important;
    --color-text-secondary: hsl(210 46% 80% / 1) !important;
    --color-text-tertiary: hsl(220 15% 52% / 1) !important;
}

.sp-theme-dark {
    --color-primary-100: hsl(210 21% 70% / 1) !important;
    --color-primary-200: hsl(210 24% 60% / 1) !important;
    --color-primary-300: hsl(220 18% 46% / 1) !important;
    --color-primary-400: hsl(220 18% 40% / 1) !important;
    --color-primary-500: hsl(220 18% 33% / 1) !important;
    --color-primary-600: hsl(220 18% 26% / 1) !important;
    --color-primary-700: hsl(220 19% 18% / 1) !important;
    --color-primary-800: hsl(220 42% 11% / 1) !important;
    --color-primary-900: hsl(220 100% 4% / 1) !important;
    --color-background-primary: hsl(220 30% 18% / 1) !important;
    --color-background-secondary: hsl(220 32% 28% / 1) !important;
    --color-background-tertiary: hsl(220 18% 33% / 1) !important;
    --color-text-primary: hsl(217deg 100% 94%) !important;
    --color-text-secondary: hsl(210 46% 80% / 1) !important;
    --color-text-tertiary: hsl(220 15% 52% / 1) !important;
}

/*
    If you use an sp-alert-close in an sp-alert-with-icon, align it to the top
    and prevent its height from expanding
 */
.sp-alert.sp-alert-with-icon {
    align-items: flex-start;
}
.sp-alert-with-icon .sp-alert-close {
    margin-left: 0.75rem;
}

/* Fix to actually show when TinyMCE toolbar buttons are selected */
.tox .tox-tbtn.tox-tbtn--enabled svg {
    fill: var(--color-text-secondary) !important;
}

/* Selected class for buttons */
.sp-button.selected {
    background-color: var(--color-background-tertiary);
}


/* Attachments: one row per file, with its whole name (wrapping, never cut short), size
   and delete button, everywhere SupportPal lists them: ticket messages and articles in
   the operator panel and the portal, and the upload lists under the reply, new ticket
   and article editors. The templates sort them by name and no longer mark the names
   sp-truncate-middle, so SupportPal's script leaves them whole. Message and upload lists
   flow into columns when there's room, each read top to bottom; article lists are one
   column with larger rows. */

ul.sp-attachments,
ul.sp-attached-files:has(li:not(.sp\:hidden)) {
    display: block;
    columns: 3 22rem;
    column-gap: 0.5rem;
    overflow: visible;
}

ul.sp-attachments>li,
ul.sp-attached-files>li:not(.sp\:hidden) {
    display: flex;
    align-items: stretch;
    break-inside: avoid;
    width: 100%;
    max-width: none;
    margin: 0 0 0.375rem;
    overflow: hidden;
    border-radius: 0.375rem;
}

/* The file: icon, name, size */
ul.sp-attachments>li a,
ul.sp-attached-files>li .sp-file-information {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem 0.375rem 0.625rem;
    border-radius: 0;
    background-color: var(--sp-color-secondary, var(--color-background-secondary));
}

ul.sp-attachments>li a:hover,
ul.sp-attached-files>li a.sp-file-information:hover {
    background-color: var(--sp-color-tertiary, var(--color-background-tertiary));
}

ul.sp-attachments>li a .sp-attachment-icon {
    flex: none;
    padding: 0;
    line-height: 0;
}

ul.sp-attachments>li a .sp-attachment-name,
ul.sp-attached-files>li .sp-filename {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

ul.sp-attachments>li a .sp-attachment-size {
    flex: none;
    margin-left: auto;
    padding-left: 0.25rem;
    white-space: nowrap;
}

/* Delete: a full-height strip at the row's end */
ul.sp-attachments>li .sp-delete-attachment,
ul.sp-attached-files>li .sp-delete-attachment:not(.sp\:hidden) {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: auto;
    padding: 0;
    border-radius: 0;
    border-left: 1px solid var(--sp-color-tertiary, var(--color-background-tertiary));
    background-color: var(--sp-color-secondary, var(--color-background-secondary));
    color: var(--sp-color-red-600, oklch(57.7% .245 27.325));
}

/* Upload lists sit on the form's own grey, so their rows get the page colour and an outline */
ul.sp-attached-files>li:not(.sp\:hidden) {
    border: 1px solid var(--sp-color-tertiary, var(--color-background-tertiary));
}

ul.sp-attached-files>li .sp-file-information,
ul.sp-attached-files>li .sp-delete-attachment:not(.sp\:hidden) {
    background-color: var(--color-background-primary);
}

/* Quiet until pointed at, then SupportPal's red */
ul.sp-attachments>li .sp-delete-attachment i,
ul.sp-attached-files>li .sp-delete-attachment i {
    color: inherit !important;
}

ul.sp-attachments>li .sp-delete-attachment:hover,
ul.sp-attached-files>li .sp-delete-attachment:not(.sp-disabled):hover {
    background-color: var(--sp-color-red-600, oklch(57.7% .245 27.325));
    color: var(--sp-color-white, #fff);
}

/* "Download All" after a message's files */
ul.sp-attachments>li:not([data-filename]) {
    column-span: all;
    width: auto;
    margin-top: 0.125rem;
    overflow: visible;
    border-radius: 0;
}

ul.sp-attachments>li:not([data-filename]) button {
    width: auto;
}

/* Articles: one column, larger rows */
ul.sp-attachments.cts-attachments-article {
    columns: auto;
}

ul.sp-attachments.cts-attachments-article>li {
    margin-bottom: 0.5rem;
}

ul.sp-attachments.cts-attachments-article>li a {
    min-height: 2.75rem;
    gap: 0.75rem;
    padding: 0.5rem 0.875rem 0.5rem 0.75rem;
    font-weight: 600;
}

ul.sp-attachments.cts-attachments-article>li a .sp-attachment-icon .fiv-viv {
    font-size: 1.75rem;
}

ul.sp-attachments.cts-attachments-article>li a .sp-attachment-size {
    font-weight: 400;
}


/* Article, potentially frontend ticket response, Add Attachment button styling */

.sp-file-input input.sp-file-upload {
    pointer-events: none;
}