/* ============================================================================
   CSS Custom Properties — single source of truth for all SP brand colors.
   Override only these variables in themes/reseller.css or themes/colorblind.css
   ============================================================================ */
:root,
[data-bs-theme=light] {
    /* ── Sidebar ─────────────────────────────────────────────────────────── */
    --sp-sidebar-bg: #0B1727;
    --sp-sidebar-grad-1: #2531ab;
    --sp-sidebar-grad-2: #121d5c;

    /* ── Primary brand color ─────────────────────────────────────────────── */
    --sp-primary: #2e2ee5;
    --sp-primary-rgb: 46, 46, 229;

    /* ── Wizard colors (separate from nav primary) ───────────────────────── */
    --sp-wizard-primary: #3849ff;
    --sp-wizard-primary-rgb: 56, 73, 255;
    --sp-wizard-primary-hover: #2a38cc;
    --sp-wizard-primary-soft: #f0f2ff;
    --sp-wizard-inactive: #aeb4c0;
    --sp-wizard-done: #00d27a;

    /* ── Semantic colors ─────────────────────────────────────────────────── */
    --sp-danger: #f24040;
    --sp-success: #00dc99;
    --sp-delete: #dc3545;
    --sp-muted: #718292;

    /* ── Nav hover states (light / dark) ────────────────────────────────── */
    --sp-nav-hover-bg: #fff;
    --sp-nav-hover-color: #2e2ee5;
    --sp-nav-hover-bg-dark: #121e2d;
    --sp-nav-hover-color-dark: #d8e2ef;

    /* ── Borders ─────────────────────────────────────────────────────────── */
    --sp-border-color: #e2e5eb;
    --sp-border-light: #D8E2EF;

    /* ── Surface / background aliases (alias Falcon vars for dark-mode compat) */
    --sp-bg: var(--falcon-body-bg, #fff);
    --sp-bg-card: var(--falcon-card-bg, #fff);
    --sp-bg-subtle: var(--falcon-gray-100, #f9fafd);
    --sp-bg-lightest: var(--falcon-100, #f9fbfd);
    --sp-bg-muted: var(--falcon-200, #e5e5e5);
    --sp-white: var(--falcon-white, #fff);
    --sp-border: var(--sp-border-color);
    --sp-border-medium: var(--falcon-300, #d8e2ef);

    /* ── Text scale aliases ──────────────────────────────────────────────── */
    --sp-text-body: var(--falcon-body-color, #344050);
    --sp-text-400: var(--falcon-400, #9da9bb);
    --sp-text-500: var(--falcon-500, #748194);
    --sp-text-muted-alt: var(--falcon-600, #718292);
    --sp-text-700: var(--falcon-700, #5e6e82);
    --sp-text-900: var(--falcon-900, #232e3c);
    --sp-text-dark: var(--falcon-gray-1000, #0b1727);

    /* ── Primary tints ───────────────────────────────────────────────────── */
    --sp-primary-bg-subtle: var(--falcon-primary-bg-subtle, color-mix(in srgb, var(--sp-primary) 10%, #fff));
    --sp-primary-hover: var(--falcon-primary-hover, color-mix(in srgb, var(--sp-primary) 85%, #000));

    /* ── Danger / success tints ──────────────────────────────────────────── */
    --sp-danger-bg-subtle: color-mix(in srgb, var(--sp-danger) 10%, #fff);

    /* ── Shadow aliases ──────────────────────────────────────────────────── */
    --sp-shadow-sm: var(--falcon-box-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
    --sp-shadow: var(--falcon-box-shadow, 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1));

    /* ── Falcon vars — kept as original hardcoded values, never use var() here.
          The reseller bridge (--falcon-primary override) lives only in base.html
          so it only applies when a reseller is active. ─────────────────────── */
    --falcon-navbar-vertical-inverted-bg-color: #0B1727;
    --falcon-navbar-vertical-inverted-label-color: #fff;
    --falcon-navbar-vertical-inverted-link-color: #fff;
    /* Hover/active colors for inverted sidebar — not defined in Falcon light mode,
       so we set them here to guarantee a valid blue value in all sidebar states. */
    --falcon-navbar-vertical-inverted-link-hover-color: #2e2ee5;
    --falcon-navbar-vertical-inverted-link-active-color: #2e2ee5;
    --falcon-primary-rgb: 46, 46, 229;
    --falcon-blue: #2e2ee5;
    --falcon-red: #f24040;
    --falcon-green: #00dc99;
    --falcon-card-cap-padding-y: 1rem;
    --falcon-card-cap-padding-x: 1rem;
}

/* -------------------------------------------------------------------------- */
/*                               Sidebar / Navbar                             */
/* -------------------------------------------------------------------------- */

/* Force Menu Background Color with Gradients */
.navbar-vertical.navbar-inverted {
    background-color: var(--sp-sidebar-bg) !important;
    background-image:
        radial-gradient(circle at top left, var(--sp-sidebar-grad-1), transparent 40%),
        radial-gradient(circle at bottom right, var(--sp-sidebar-grad-2), transparent 40%) !important;
    background-repeat: no-repeat !important;
}

/* Floating effect (clip) only when expanded (Desktop) */
@media (min-width: 1200px) {
    html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-inverted {
        background-clip: content-box !important;
    }
}

/* Fix search bar alignment when collapsed */
html.navbar-vertical-collapsed .navbar-top {
    padding-left: 1rem !important;
}

/* Remove default background from collapse so parent gradient shows through */
.navbar-vertical .navbar-collapse,
.navbar-vertical.navbar-inverted .navbar-collapse {
    background-color: transparent !important;
}

/* -------------------------------------------------------------------------- */
/*                           Content Margins                                  */
/* -------------------------------------------------------------------------- */

/* Adjust Content Margin to compensate for removed gutter - Only when expanded */
@media (min-width: 1200px) {

    html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-xl.navbar-inverted~.content,
    html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-xl.navbar-card~.content,
    html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-xl.navbar-vibrant~.content {
        margin-left: 15.625rem !important;
        margin-right: 2rem;
    }

    /* Hide Topbar Toggler and Brand when Menu is Expanded (Desktop) */
    html:not(.navbar-vertical-collapsed) .navbar-top .navbar-toggler,
    html:not(.navbar-vertical-collapsed) .navbar-top .navbar-brand {
        display: none !important;
    }

    /* Collapsed Content Margin Override */
    html.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl.navbar-inverted+.content,
    html.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl.navbar-card+.content,
    html.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl.navbar-vibrant+.content {
        margin-left: 4.125rem !important;
    }

    /* Decoupled Topbar Rules for Expanded Menu */
    html:not(.navbar-vertical-collapsed) .navbar-top {
        margin-left: 15.625rem !important;
        padding-left: 0 !important;
    }

    /* Decoupled Topbar Rules for Collapsed Menu */
    html.navbar-vertical-collapsed .navbar-top {
        margin-left: 3.125rem !important;
        padding-left: 0 !important;
    }

    html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-xl.navbar-inverted~.navbar-top {
        margin-right: 2rem;
    }
}

@media (min-width: 1200px) {
    html.navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical.navbar-expand-xl.navbar-inverted {
        width: 3.125rem !important;
    }

    /* Fix Menu Left Alignment on Desktop (Counteract Container Padding) */
    .navbar-vertical {
        margin-left: calc(var(--falcon-gutter-x) * -0.5) !important;
    }
}

/* Base Mobile Content Margins */
.content {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}

/* -------------------------------------------------------------------------- */
/*                              Mobile Navbar                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .navbar-top {
        background-color: var(--sp-sidebar-bg) !important;
        background-image:
            radial-gradient(circle at top left, var(--sp-sidebar-grad-1), transparent 40%),
            radial-gradient(circle at bottom right, var(--sp-sidebar-grad-2), transparent 40%) !important;
        background-repeat: no-repeat !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        border-radius: 0 0 0.375rem 0.375rem !important;
    }

    /* Add breathing room below the top navbar: navbar-vertical is taken out of
       flow at this breakpoint (see "Fix Mobile Menu Position" below), so .content
       would otherwise sit flush against the navbar. */
    .content {
        margin-top: 1rem !important;
    }

    /* Force White Toggler on Mobile (Dark Background) */
    .navbar-toggler .navbar-toggle-icon .toggle-line,
    .navbar-toggler .navbar-toggle-icon::before,
    .navbar-toggler .navbar-toggle-icon::after {
        background-color: #fff !important;
    }

    /* Force Toggler Display despite navbar-expand */
    .navbar-top .navbar-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 1rem !important;
        width: 45px !important;
        height: 45px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    /* Remove background when collapsed (Mobile) */
    .navbar-top .navbar-toggler.collapsed {
        background-color: transparent !important;
        border-radius: 0 !important;
    }

    /* Fix Logo Centering: Remove ms-2 effect on mobile */
    .navbar-top .navbar-brand>div {
        margin-left: 0 !important;
    }

    html,
    body {
        background-attachment: fixed;
    }

    /* Fix Mobile Menu Position */
    .navbar-vertical {
        margin: 0 !important;
        left: 0 !important;
        width: 100% !important;
        position: absolute;
        transform: none !important;
    }

    .navbar-vertical .navbar-collapse.show {
        min-height: 100vh !important;
        top: 0;
    }

    /* Force White Icons in Topbar on Mobile */
    .navbar-top .nav-link,
    .navbar-top .search-box-icon {
        color: var(--falcon-navbar-vertical-inverted-link-color) !important;
    }
}

/* Fix Z-Index to prevent Gallery overlap bleed-through */
.navbar-vertical {
    z-index: 1040 !important;
}

/* Center Navbar Brand on Mobile */
@media (max-width: 991.98px) {
    .navbar-top .navbar-brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-right: 0 !important;
    }
}

/* -------------------------------------------------------------------------- */
/*                              Choices.js                                    */
/* -------------------------------------------------------------------------- */

/* Global Highlight Override */
.choices .choices__list--dropdown .choices__item--choice:hover,
.choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
    filter: brightness(0.78) !important;
    outline: 2px solid rgba(0, 0, 0, 0.25) !important;
    outline-offset: -2px !important;
}

.choices__item.choices__item--selectable .choices__button {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==") !important;
    background-color: transparent !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* Vertical centering of tags inside the select input */
.choices__inner {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    padding: 4px 7.5px !important;
    gap: 4px !important;
}

.choices__inner .choices__list--multiple {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.choices__inner .choices__list--multiple .choices__item {
    margin: 0 !important;
}

.choices__inner .choices__input {
    margin: 0 !important;
    padding: 2px 0 2px 2px !important;
    flex: 1 1 60px !important;
    min-width: 60px !important;
    align-self: center !important;
    line-height: 1.4 !important;
}

/* Multiple Select Selected Items: primary-colored pills (same shape as .sp-tag) */
.choices .choices__list--multiple .choices__item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    padding: 1px 4px 1px 8px !important;
    border: 1px solid var(--falcon-primary) !important;
    border-radius: 50rem !important;
    background-color: var(--falcon-primary) !important;
    color: #fff !important;
    word-break: normal !important;
    margin-bottom: 0 !important;
}

/* Remove button: the small "×" of the tag pills, in the item's text color */
.choices .choices__list--multiple .choices__item .choices__button {
    background-image: none !important;
    border: none !important;
    opacity: 0.6;
    color: inherit !important;
    width: 14px !important;
    padding: 0 2px !important;
    margin: 0 !important;
    font-size: 0 !important;
    text-indent: 0 !important;
    flex-shrink: 0 !important;
    filter: none !important;
}

.choices .choices__list--multiple .choices__item .choices__button::after {
    content: '×';
    font-size: 12px;
    color: inherit;
    line-height: 1;
    display: block;
}

.choices .choices__list--multiple .choices__item .choices__button:hover {
    opacity: 1;
}

/* Theme.css inverts the remove button in dark mode; the "×" already follows the text color */
html[data-bs-theme=dark] .choices .choices__list--multiple .choices__item .choices__button {
    filter: none !important;
}

/* Resource tags listed after a resource label: Choices.js dropdown choices
   (choices-resource-tags.js) and list-picker rows (tag_extras.resource_tag_pills) */
.sp-choice-tags {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    vertical-align: middle;
    gap: 2px;
    margin-left: 6px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.sp-choice-tags .sp-tag {
    margin: 0;
}

/* Sliding tag list (detail panel collapse rows): pills keep their full size and
   the list slides sideways on row hover instead of squeezing them. */
.sp-choice-tags.auto-slide-on-hover>.auto-slide-inner {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.sp-choice-tags.auto-slide-on-hover .sp-tag {
    flex-shrink: 0;
    max-width: none;
}

.sp-choice-tags.auto-slide-on-hover .sp-tag-label {
    flex: none;
}

/* Non-tag multiple select: readable dropdown items */
.choices[data-type="select-multiple"]:not([data-tag-select]) .choices__list--dropdown .choices__item {
    color: var(--falcon-body-color) !important;
    background-color: var(--falcon-body-bg) !important;
    font-size: 0.875rem !important;
}

.choices[data-type="select-multiple"]:not([data-tag-select]) .choices__list--dropdown .choices__item.is-selected {
    color: var(--falcon-primary) !important;
    font-weight: 600 !important;
}

.choices[data-type="select-multiple"]:not([data-tag-select]) .choices__list--dropdown .choices__item.is-selected::after {
    content: " ✓";
}

/* Single select (e.g. LinkedIn account picker): same readable-items fix as
   above, which only covered select-multiple -- single selects had no base
   color/background set, so the hover darken filter below was applied on top
   of Choices.js's own unset/mismatched default, making it illegible. */
.choices[data-type="select-one"] .choices__list--dropdown .choices__item {
    color: var(--falcon-body-color) !important;
    background-color: var(--falcon-body-bg) !important;
    font-size: 0.875rem !important;
}

.choices[data-type="select-one"] .choices__list--dropdown .choices__item.is-selected {
    color: var(--falcon-primary) !important;
    font-weight: 600 !important;
}

/* -------------------------------------------------------------------------- */
/*                               SP Tag Pills                                 */
/* -------------------------------------------------------------------------- */

/* sp-tag: base design for all tag badges */
.sp-tag {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 1px 8px !important;
    white-space: nowrap;
    border-radius: 50rem !important;
    border: 1px solid !important;
    line-height: 1.4;
    vertical-align: middle;
    margin: 2px;
    gap: 2px;
    max-width: 100%;
    overflow: hidden;
}

.sp-tag .sp-tag-icon {
    font-size: 0.65em;
    line-height: 1;
    opacity: 0.8;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Sub-tag marker (tag_extras.render_tag_pill / tag-pill.js): tiny "level down" arrow */
.sp-tag .sp-subtag-icon {
    font-size: 0.6em;
    line-height: 1;
    opacity: 0.7;
    flex-shrink: 0;
}

.sp-tag-label {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.sp-tag-text {
    display: inline-block;
    white-space: nowrap;
}

/* Pills inside Choices.js have a remove button on the right — reduce right padding */
.choices__list--multiple .choices__item.sp-tag {
    padding-right: 4px !important;
}

/* Remove button — flex item, never shrinks */
.choices__list--multiple .choices__item.sp-tag .choices__button {
    background-image: none !important;
    border: none !important;
    opacity: 0.5;
    color: inherit !important;
    width: 14px !important;
    padding: 0 2px !important;
    margin: 0 !important;
    font-size: 0 !important;
    text-indent: 0 !important;
    flex-shrink: 0 !important;
}

.choices__list--multiple .choices__item.sp-tag .choices__button::after {
    content: '×';
    font-size: 12px;
    color: inherit;
    line-height: 1;
    display: block;
}

.choices__list--multiple .choices__item.sp-tag .choices__button:hover {
    opacity: 1;
}

/* -------------------------------------------------------------------------- */
/*               Generic auto-slide-on-hover (overflowing text)               */
/* -------------------------------------------------------------------------- */
/* Wrapper clips the text; inner element scrolls horizontally on hover.       */
/* JS (auto-slide.js) measures overflow and sets --slide-dist/--slide-duration*/
/* before adding the `is-overflow` class that enables the animation.          */

.auto-slide-on-hover {
    overflow: hidden;
    white-space: nowrap;
    /* position: relative is required so overflow: hidden correctly clips children
       that are animated via transform — static containers can leak in some browsers. */
    position: relative;
}

/* When text overflows, force left-align so the animation always starts from the
   beginning of the text — not the center (which would happen with text-center wrappers). */
.auto-slide-on-hover.is-overflow {
    text-align: left;
}

.auto-slide-on-hover>.auto-slide-inner {
    display: inline-block;
    white-space: nowrap;
}

/* Self-hover: animation plays when hovering the title wrapper itself.
   This is the primary trigger — the card-level hover has been removed so that
   the animation only runs when the user is actually over the text, not the card. */
.auto-slide-on-hover.is-overflow:hover>.auto-slide-inner {
    animation: auto-slide var(--slide-duration, 2s) linear infinite;
}

/* Parent-hover: for contexts where a stretched-link or pointer-events:none overlay
   prevents direct :hover on the wrapper.
   .item-card = tag cards (stretched-link intercepts all pointer events on the card).
   .auto-slide-row = list rows whose whole line slides when any part of the row is hovered.
   .sp-tag, .sp-custom-item, .dropdown-item = other non-card interactive parents.
   Media cards (.card without .item-card) are excluded — they use self-hover above. */
.item-card:hover .auto-slide-on-hover.is-overflow>.auto-slide-inner,
.auto-slide-row:hover .auto-slide-on-hover.is-overflow>.auto-slide-inner,
.sp-tag:hover .auto-slide-on-hover.is-overflow>.auto-slide-inner,
.sp-custom-item:hover .auto-slide-on-hover.is-overflow>.auto-slide-inner,
.dropdown-item:hover .auto-slide-on-hover.is-overflow>.auto-slide-inner {
    animation: auto-slide var(--slide-duration, 2s) linear infinite;
}

/* Ellipsis variant: the clipped text ends with "…" until the slide starts on hover. */
.auto-slide-on-hover.auto-slide-ellipsis>.auto-slide-inner {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.auto-slide-on-hover.auto-slide-ellipsis.is-overflow:hover>.auto-slide-inner,
.item-card:hover .auto-slide-on-hover.auto-slide-ellipsis.is-overflow>.auto-slide-inner,
.auto-slide-row:hover .auto-slide-on-hover.auto-slide-ellipsis.is-overflow>.auto-slide-inner,
.sp-tag:hover .auto-slide-on-hover.auto-slide-ellipsis.is-overflow>.auto-slide-inner,
.sp-custom-item:hover .auto-slide-on-hover.auto-slide-ellipsis.is-overflow>.auto-slide-inner,
.dropdown-item:hover .auto-slide-on-hover.auto-slide-ellipsis.is-overflow>.auto-slide-inner {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

@keyframes auto-slide {

    0%,
    5% {
        transform: translateX(0);
    }

    80%,
    95% {
        transform: translateX(var(--slide-dist));
    }

    100% {
        transform: translateX(0);
    }
}

/* -------------------------------------------------------------------------- */
/*                                Menu Hover                                  */
/* -------------------------------------------------------------------------- */

/* Light Mode */
html:not(.navbar-vertical-collapsed)[data-bs-theme="light"] .navbar-vertical .nav-link:hover,
html:not(.navbar-vertical-collapsed)[data-bs-theme="light"] .navbar-vertical .nav-link.active {
    background-color: var(--sp-nav-hover-bg) !important;
    color: var(--sp-nav-hover-color) !important;
    border-radius: 15px;
    padding-left: 1rem;
}

html:not(.navbar-vertical-collapsed)[data-bs-theme="light"] .navbar-vertical .nav-link:hover .nav-link-icon,
html:not(.navbar-vertical-collapsed)[data-bs-theme="light"] .navbar-vertical .nav-link:hover .nav-link-text,
html:not(.navbar-vertical-collapsed)[data-bs-theme="light"] .navbar-vertical .nav-link.active .nav-link-icon,
html:not(.navbar-vertical-collapsed)[data-bs-theme="light"] .navbar-vertical .nav-link.active .nav-link-text {
    color: var(--sp-nav-hover-color) !important;
}

/* Dark Mode */
html:not(.navbar-vertical-collapsed)[data-bs-theme="dark"] .navbar-vertical .nav-link:hover,
html:not(.navbar-vertical-collapsed)[data-bs-theme="dark"] .navbar-vertical .nav-link.active {
    background-color: var(--sp-nav-hover-bg-dark) !important;
    color: var(--sp-nav-hover-color-dark) !important;
    border-radius: 15px;
    padding-left: 1rem;
}

html:not(.navbar-vertical-collapsed)[data-bs-theme="dark"] .navbar-vertical .nav-link:hover .nav-link-icon,
html:not(.navbar-vertical-collapsed)[data-bs-theme="dark"] .navbar-vertical .nav-link:hover .nav-link-text,
html:not(.navbar-vertical-collapsed)[data-bs-theme="dark"] .navbar-vertical .nav-link.active .nav-link-icon,
html:not(.navbar-vertical-collapsed)[data-bs-theme="dark"] .navbar-vertical .nav-link.active .nav-link-text {
    color: var(--sp-nav-hover-color-dark) !important;
}

/* -------------------------------------------------------------------------- */
/*                            Media Add Button                                */
/* -------------------------------------------------------------------------- */

.add-media-btn .add-media-icon {
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease-in-out;
    width: 30px;
    height: 30px;
    background-color: transparent;
}

/* Light Mode Hover */
html:not(.navbar-vertical-collapsed)[data-bs-theme="light"] .add-media-btn:hover .add-media-icon {
    background-color: var(--sp-nav-hover-bg);
    color: var(--sp-nav-hover-color);
    border-radius: 50%;
}

/* Dark Mode Hover */
html:not(.navbar-vertical-collapsed)[data-bs-theme="dark"] .add-media-btn:hover .add-media-icon {
    background-color: var(--sp-nav-hover-bg-dark);
    color: var(--sp-nav-hover-color-dark);
    border-radius: 50%;
}

/* -------------------------------------------------------------------------- */
/*                            Logout Button                                   */
/* -------------------------------------------------------------------------- */

.logout-btn .logout-icon {
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease-in-out;
    width: 30px;
    height: 30px;
    background-color: transparent;
}

/* Light Mode Hover */
html:not(.navbar-vertical-collapsed)[data-bs-theme="light"] .logout-btn:hover .logout-icon {
    background-color: var(--sp-nav-hover-bg);
    color: var(--sp-nav-hover-color);
    border-radius: 50%;
}

/* Dark Mode Hover */
html:not(.navbar-vertical-collapsed)[data-bs-theme="dark"] .logout-btn:hover .logout-icon {
    background-color: var(--sp-nav-hover-bg-dark);
    color: var(--sp-nav-hover-color-dark);
    border-radius: 50%;
}

/* -------------------------------------------------------------------------- */
/*                            Navbar Toggle & Brand                           */
/* -------------------------------------------------------------------------- */

/* Brand visibility on collapse - BUT show on hover */
html.navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical .navbar-brand {
    visibility: hidden !important;
}

/* Toggle Icon Styling - Default State */
.navbar-vertical-toggle .navbar-toggle-icon .toggle-line,
.navbar-vertical-toggle .navbar-toggle-icon::before,
.navbar-vertical-toggle .navbar-toggle-icon::after {
    background-color: #fff !important;
}

/* Hover State - Button Background White Circle */
.navbar-vertical-toggle:hover {
    background-color: var(--sp-nav-hover-bg) !important;
    border-radius: 50%;
}

/* Hover state - icon lines match sidebar background */
.navbar-vertical-toggle:hover .navbar-toggle-icon .toggle-line,
.navbar-vertical-toggle:hover .navbar-toggle-icon::before,
.navbar-vertical-toggle:hover .navbar-toggle-icon::after {
    background-color: var(--sp-sidebar-bg) !important;
}

/* -------------------------------------------------------------------------- */
/*                            Media Actions Responsive                        */
/* -------------------------------------------------------------------------- */

.media-actions-responsive {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-bottom: 1px solid var(--falcon-border-color);
    background-color: var(--falcon-light);
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
}

@media (min-width: 1200px) {
    .media-actions-responsive {
        flex-wrap: wrap;
        overflow-x: visible;
        white-space: normal;
        justify-content: center;
    }
}

/* -------------------------------------------------------------------------- */
/*                            Preview Close Button                            */
/* -------------------------------------------------------------------------- */
.preview-close-btn {
    border-radius: 50%;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    width: 2.5rem;
    height: 2.5rem;
    background-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.preview-close-btn:hover {
    background-color: var(--falcon-primary) !important;
    opacity: 1 !important;
}

/* -------------------------------------------------------------------------- */
/*                        Generic Expanding Button                            */
/* -------------------------------------------------------------------------- */
.btn-expand-on-hover {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    white-space: nowrap;
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50rem !important;
}

.btn-expand-on-hover .fas,
.btn-expand-on-hover .far,
.btn-expand-on-hover .fab {
    flex-shrink: 0;
}

/* Text hidden by default */
.btn-expand-on-hover .btn-text {
    opacity: 0;
    display: none;
    width: 0;
    margin-left: 0;
    transition: opacity 0.2s ease;
}

/* Hover State: Expand */
.btn-expand-on-hover:hover {
    width: auto;
    min-width: 100px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-shadow: var(--falcon-btn-falcon-box-shadow) !important;
}

.btn-expand-on-hover:hover .btn-text {
    display: inline-block;
    opacity: 1;
    width: auto;
    margin-left: 0.5rem;
}

/* -------------------------------------------------------------------------- */
/*                            Generic SP Dropdown                             */
/* -------------------------------------------------------------------------- */
.sp-custom-dropdown {
    width: max-content;
    min-width: 0 !important;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding: 3px !important;
    margin: 0 !important;
    background-color: var(--falcon-body-bg, #fff);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.sp-custom-dropdown-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-custom-item {
    box-sizing: border-box;
    width: 115px;
    height: 25px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 1;
    padding: 4px 12px 4px 12px !important;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    background-color: transparent;
    transition: background-color 0.2s, color 0.2s;
    border: none;
}

.sp-custom-item:hover,
.sp-custom-item:focus {
    background-color: var(--sp-primary) !important;
    color: #ffffff !important;
}

.sp-custom-item:hover>svg,
.sp-custom-item:focus>svg,
.sp-custom-item:hover .fas,
.sp-custom-item:focus .fas {
    fill: #ffffff !important;
    color: #ffffff !important;
}

.sp-item-delete {
    color: var(--falcon-body-color);
}

.sp-item-delete:hover,
.sp-item-delete:focus {
    background-color: var(--sp-delete) !important;
    color: #ffffff !important;
}

.sp-custom-item svg,
.sp-custom-item i {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
}

.sp-custom-item:not(:hover) .sp-icon-blue {
    color: var(--sp-primary);
    fill: var(--sp-primary);
}

.sp-custom-item:not(:hover) .sp-icon-red {
    color: var(--sp-delete);
    fill: var(--sp-delete);
}

.sp-custom-item:hover .sp-icon-blue,
.sp-custom-item:hover .sp-icon-red {
    color: #ffffff;
    fill: #ffffff;
}

/* Choices.js generic overrides to match sp-custom */
.choices__list--dropdown {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding: 8px !important;
    margin: 5px 0 0 0 !important;
    background-color: var(--falcon-body-bg, #fff) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* An open dropdown stays above the positioned page elements (e.g. the template edit buttons). */
.choices__list--dropdown.is-active,
.choices__list[aria-expanded].is-active {
    z-index: 1000 !important;
}

.choices__list--dropdown .choices__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    max-height: 250px !important;
    overflow-y: auto !important;
}

.choices .choices__list--dropdown .choices__item--choice {
    display: flex !important;
    align-items: center !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 3px 8px !important;
    white-space: nowrap !important;
    border-radius: 50rem !important;
    border: 1px solid transparent !important;
    line-height: 1.4 !important;
    margin: 1px 0 !important;
    gap: 2px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.choices .choices__list--dropdown .choices__item--choice .sp-tag-label {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.choices .choices__list--dropdown .choices__item--choice:hover .sp-tag-text {
    overflow: visible;
    text-overflow: clip;
}

/* Choices.js keeps the same rounded corners whatever its state: the theme and the
   vendor CSS square the input off while it is focused, open or flipped. */
.choices .choices__inner,
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner,
.choices.is-flipped.is-open .choices__inner,
.selectize-input {
    border-radius: 0.75rem !important;
}

/* Tag selects: stronger radius for multi-pill containers */
.choices[data-type*="select-multiple"] .choices__inner,
.choices[data-type*="select-multiple"].is-focused .choices__inner,
.choices[data-type*="select-multiple"].is-open .choices__inner,
.choices[data-type*="select-multiple"].is-flipped.is-open .choices__inner {
    border-radius: 1.25rem !important;
}

/* The open list of a single select and its search field get the same rounded
   corners as the select: the vendor CSS draws the field as a square bar. */
.choices[data-type*="select-one"] .choices__list--dropdown {
    border-radius: 0.75rem;
    overflow: hidden;
}

.choices[data-type*="select-one"] .choices__list--dropdown .choices__input {
    width: calc(100% - 1rem);
    margin: 0.5rem;
    border: 1px solid var(--falcon-gray-300);
    border-radius: 0.75rem;
}

/* A selected single value reads as normal text, even inside a dropdown-menu whose
   light text color would otherwise be inherited (only the placeholder stays dimmed). */
.choices__list--single .choices__item {
    color: var(--falcon-body-color);
}

/* A remove button whose background gets reset by a page must never tile its icon. */
.choices__item.choices__item--selectable .choices__button {
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Status indicators (main/templates/components/blocks/status-indicator.html).
   Only the states that are still moving animate, so a settled list stays calm. */
.sp-status-spin,
.sp-status-bounce,
.sp-status-flip,
.sp-status-pulse {
    display: inline-block;
}

@keyframes sp-status-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sp-status-bounce {

    0%,
    100% {
        transform: translateY(-1px);
    }

    50% {
        transform: translateY(2px);
    }
}

/* Held flat, then flipped over, like an hourglass being turned. */
@keyframes sp-status-flip {

    0%,
    40% {
        transform: rotate(0deg);
    }

    60%,
    100% {
        transform: rotate(180deg);
    }
}

@keyframes sp-status-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.85);
    }
}

.sp-status-spin {
    animation: sp-status-spin 2.6s linear infinite;
}

.sp-status-bounce {
    animation: sp-status-bounce 1.2s ease-in-out infinite;
}

.sp-status-flip {
    animation: sp-status-flip 2.4s ease-in-out infinite;
}

.sp-status-pulse {
    animation: sp-status-pulse 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {

    .sp-status-spin,
    .sp-status-bounce,
    .sp-status-flip,
    .sp-status-pulse {
        animation: none;
    }
}

/* Layered status indicator: glyphs stacked in a fixed box so each one animates
   on its own centre instead of swinging around a shared one. */
.sp-status-layers {
    display: inline-flex;
    align-items: center;
    gap: 0px;
}

/* inline-block so each glyph rotates on its own centre, side by side. */
.sp-status-layers>span {
    display: inline-block;
    line-height: 1;
}

.sp-status-gear-main {
    font-size: 11px;
}

.sp-status-gear-small {
    font-size: 8px;
}

/* Fixed column: the icons, and the Open button after them, line up on every row
   whatever the number of indicators a row carries. */
.sp-status-indicators {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 58px;
}

@keyframes sp-status-spin-reverse {
    to {
        transform: rotate(-360deg);
    }
}

/* Opacity only: a paused or finished row must breathe, not jump. */
@keyframes sp-status-breathe {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

.sp-status-spin-reverse {
    animation: sp-status-spin-reverse 1.9s linear infinite;
}

.sp-status-breathe {
    animation: sp-status-breathe 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {

    .sp-status-spin-reverse,
    .sp-status-breathe {
        animation: none;
    }
}

/* On laptops and smaller keep the wizard navigation buttons always visible by
   pinning the footer to the bottom of the viewport, so the user never has to
   scroll to reach Previous / Next / Finish. The footer is the last child of its
   container, so position:sticky with bottom:0 never engages (nothing to scroll
   past); position:fixed pins it to the viewport reliably on every wizard.
   Active up to 1440px so it also covers a MacBook Air 13.3" (1440px wide). */
@media (max-width: 1440px) {
    .wizard-footer-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        background-color: var(--sp-body-bg, #fff);
        padding: 0.75rem 1.5rem;
        margin: 0;
        column-gap: 1rem;
        box-shadow: 0 -0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.15);
    }
    /* The flex spacer pushes Prev/Next to the far edges; a side margin on each
       keeps them off the full-bleed footer borders. */
    .wizard-footer-nav .btn-wizard-prev {
        margin-left: 0.75rem;
    }
    .wizard-footer-nav .btn-wizard-next {
        margin-right: 0.75rem;
    }
    /* Reserve space so the fixed footer never hides the last fields. */
    body:has(.wizard-footer-nav) {
        padding-bottom: 5.5rem;
    }
}

/* On desktop the left sidebar is a fixed-width column that sits above the footer
   (z-index 1040 > 1030), so a full-bleed left:0 footer runs under it and the
   sidebar hides Previous/Finish. Inset the footer's left edge to match the
   content margin (sidebar width) so it starts after the sidebar, expanded or
   collapsed. Only 1200-1440px: below 1200px the sidebar is off-canvas. */
@media (min-width: 1200px) and (max-width: 1440px) {
    html:not(.navbar-vertical-collapsed) .wizard-footer-nav {
        left: 14.625rem;
    }
    html.navbar-vertical-collapsed .wizard-footer-nav {
        left: 4.125rem;
    }
}
/* "Coming soon" / "Not available" pill badge, shared by the apps gallery cards
   and the coming-soon entries of other pages (e.g. the help page). */
.sp-locked-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 10px;
    border-radius: 999px;
}

.sp-coming-soon .sp-locked-badge { background: #e0e7f7; color: var(--bs-primary); }
.sp-not-available .sp-locked-badge { background: #e5e7eb; color: #6b7280; }

/* Localized date pickers (SPDate): the visible input replaces the ISO one. */
.sp-date-display { cursor: pointer; }
.modal .flatpickr-wrapper { display: block; }

/* External account rows of the preferences: fixed width provider icon. */
.external-account-row .external-account-icon { width: 1.75rem; font-size: 1.35rem; text-align: center; flex-shrink: 0; }
.external-account-row .external-account-lock { cursor: help; }

/* Collapsible "Additional information" sections of the forms: the chevron points up once open. */
.sp-variables-toggle .fa-chevron-down { transition: transform .2s; }
.sp-variables-toggle:not(.collapsed) .fa-chevron-down { transform: rotate(180deg); }

/* Phone field (to_bs data-component="phone-input"): country dial code dropdown + number. */
.sp-phone-input .sp-phone-country {
    border: 1px solid var(--falcon-input-border-color, #d8e2ef);
    border-right: 0;
    box-shadow: none;
    white-space: nowrap;
    font-size: 0.875rem;
}
.sp-phone-input .sp-phone-flag {
    font-size: 1.1rem;
    line-height: 1;
}
.sp-phone-input .sp-phone-menu {
    width: 300px;
    border-radius: 0.75rem;
}
.sp-phone-input .sp-phone-list {
    max-height: 260px;
    overflow-y: auto;
}
.sp-phone-input .sp-phone-option {
    border-radius: 0.5rem;
    font-size: 0.85rem;
}
.sp-phone-input .sp-phone-option.active {
    color: var(--sp-primary);
    background: var(--sp-primary-bg-subtle, #eef1fd);
}

/* Unread count on the notification bell of the top bar. */
.sp-notif-badge {
  position: absolute;
  top: 4px;
  left: 50%;
  margin-left: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ff3b30;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--falcon-navbar-top-bg, #fff);
  pointer-events: none;
  animation: sp-notif-badge-in .25s ease-out;
}
@keyframes sp-notif-badge-in {
  from { transform: scale(.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Phones: the sticky hero of the detail panels would take half the screen at 300px. */
@media (max-width: 575.98px) {
    .modal-header:has(> .modal-hero-container),
    .media-modal-root > .modal-header {
        height: 220px !important;
    }
}