@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;400;600&display=swap');

/* SocialFox Gen2 — alternative semantic palette (browser UI). Orange = brand/workflow; blue-grey = data/info/selection; green = success only; grey = structure; amber = warning; red = danger. */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    --bs-font-sans-serif: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    /* Shell & dark CTAs */
    --sf-shell: #2B2E35;
    --sf-btn-dark: #252B35;
    --sf-dark-hover: #303743;
    --sf-dark-pressed: #22262A;

    /* Text */
    --sf-text-strong: #2B2E35;
    --sf-text-body: #454A57;
    --sf-text-muted: #666B73;
    --sf-info-text: #314A54;

    /* Brand / workflow orange */
    --sf-brand: #F09537;
    --sf-brand-bright: #F4A85D;
    --sf-brand-hover: #D9822F;
    --sf-brand-pressed: #BC6626;
    --sf-orange-tint: rgba(240, 149, 55, 0.08);
    --sf-orange-tint-strong: rgba(240, 149, 55, 0.12);
    --sf-orange-border: rgba(240, 149, 55, 0.42);
    --sf-orange-border-strong: rgba(240, 149, 55, 0.58);

    /* Data / info / selection (blue-grey) */
    --sf-blue-grey: #7299A8;
    --sf-blue-grey-dark: #5E838F;
    --sf-blue-grey-bg: #EEF4F6;

    /* Success (published / connected / completed / OK) */
    --sf-success: #3F7B58;
    --sf-success-bg: #EEF7F1;
    --sf-success-border: #8DB99E;

    /* Warning (amber) */
    --sf-warning: #B45309;
    --sf-warning-bg: #FFF7ED;
    --sf-warning-border: #FDBA74;

    /* Danger */
    --sf-danger: #B91C1C;
    --sf-danger-bg: #FEF2F2;
    --sf-danger-border: #F87171;

    /* Surfaces & structure */
    --sf-surface: #FFFFFF;
    --sf-app-bg: #F7F7F7;
    --sf-cool-bg: #F8FAFC;
    --sf-grey-hover: #F1F2F4;
    --sf-border: #D8D8D8;
    --sf-soft-border: #E8E8E8;
    --sf-grey-mid: #999999;
    --sf-grey-light: #B0B0B0;

    /* Legacy aliases (templates / drag-drop JS) */
    --sf-accent-border: var(--sf-orange-border);
    --sf-accent-border-strong: var(--sf-orange-border-strong);
    --sf-brand-tint-12: var(--sf-orange-tint-strong);
    --palette-main-hex: var(--sf-brand);
    --palette-secondary-hex: var(--sf-shell);
    --palette-background-hex: var(--sf-app-bg);
    --palette-font-hex: var(--sf-text-strong);
}

:root,
[data-bs-theme=light] {
    color: var(--sf-text-body);

    --bs-body-color: var(--sf-text-body);
    --bs-body-bg: var(--sf-app-bg);
    --bs-heading-color: var(--sf-text-strong);
    --bs-border-color: var(--sf-border);
    --bs-border-color-translucent: rgba(43, 46, 53, 0.125);

    /* Bootstrap “primary” scale = blue-grey (focus, links, calm UI) */
    --bs-primary-hue: 198;
    --bs-primary-saturation: 24%;
    --bs-primary-100-hsl: var(--bs-primary-hue), var(--bs-primary-saturation), 93%;
    --bs-primary-200-hsl: var(--bs-primary-hue), var(--bs-primary-saturation), 84%;
    --bs-primary-300-hsl: var(--bs-primary-hue), var(--bs-primary-saturation), 74%;
    --bs-primary-400-hsl: var(--bs-primary-hue), var(--bs-primary-saturation), 65%;
    --bs-primary-500-hsl: var(--bs-primary-hue), var(--bs-primary-saturation), 55%;
    --bs-primary-600-hsl: var(--bs-primary-hue), var(--bs-primary-saturation), 46%;
    --bs-primary-700-hsl: var(--bs-primary-hue), var(--bs-primary-saturation), 38%;
    --bs-primary-800-hsl: var(--bs-primary-hue), var(--bs-primary-saturation), 28%;
    --bs-primary-900-hsl: var(--bs-primary-hue), var(--bs-primary-saturation), 18%;
    --bs-primary-100: hsl(var(--bs-primary-100-hsl));
    --bs-primary-200: hsl(var(--bs-primary-200-hsl));
    --bs-primary-300: hsl(var(--bs-primary-300-hsl));
    --bs-primary-400: hsl(var(--bs-primary-400-hsl));
    --bs-primary-500: hsl(var(--bs-primary-500-hsl));
    --bs-primary-600: hsl(var(--bs-primary-600-hsl));
    --bs-primary-700: hsl(var(--bs-primary-700-hsl));
    --bs-primary-800: hsl(var(--bs-primary-800-hsl));
    --bs-primary-900: hsl(var(--bs-primary-900-hsl));
    --bs-primary-hsl: var(--bs-primary-500-hsl);
    --bs-primary: hsl(var(--bs-primary-500-hsl));
    --bs-primary-foreground-hsl: 0, 0%, 100%;
    --bs-primary-foreground: #ffffff;
    --bs-primary-text-emphasis-hsl: var(--bs-primary-700-hsl);
    --bs-primary-text-emphasis: hsl(var(--bs-primary-text-emphasis-hsl));
    --bs-primary-hover-bg: var(--bs-primary-400);
    --bs-primary-active-bg: var(--bs-primary-600);
    --bs-primary-bg-subtle: var(--sf-blue-grey-bg);
    --bs-primary-border-subtle: var(--bs-primary-300);
    --bs-primary-checkbox-svg: var(--bs-checkbox-svg-light);
    --bs-primary-dash-svg: var(--bs-dash-svg-dark-light);
    --bs-primary-radio-svg: var(--bs-radio-svg-dark-light);
    --bs-primary-switch-svg: var(--bs-switch-svg-dark-light);

    /* Links: blue-grey, not orange */
    --bs-link-color-hsl: var(--bs-primary-600-hsl);
    --bs-link-color: hsl(var(--bs-link-color-hsl));
    --bs-link-decoration: underline;
    --bs-link-decoration-offset: var(--bs-relative-font-size-4xs);
    --bs-link-hover-color-hsl: var(--bs-primary-500-hsl);
    --bs-link-hover-color: hsl(var(--bs-link-hover-color-hsl));
    --bs-link-hover-decoration: underline;

    /* Form focus: blue-grey */
    --bs-form-focus-border-color: var(--sf-blue-grey);
    --bs-form-focus-shadow-hsl: var(--bs-primary-500-hsl);

    /* Tables: neutral hover (override any primary-tinted hover) */
    --bs-table-hover-bg: var(--sf-grey-hover);

    /* Semantic families for Bootstrap/Halfmoon alerts, badges, buttons */
    --bs-success: #3F7B58;
    --bs-success-bg-subtle: var(--sf-success-bg);
    --bs-success-border-subtle: var(--sf-success-border);
    --bs-success-text-emphasis: var(--sf-success);
    --bs-danger: #B91C1C;
    --bs-danger-bg-subtle: var(--sf-danger-bg);
    --bs-danger-border-subtle: var(--sf-danger-border);
    --bs-danger-text-emphasis: var(--sf-danger);
    --bs-warning: #B45309;
    --bs-warning-bg-subtle: var(--sf-warning-bg);
    --bs-warning-border-subtle: var(--sf-warning-border);
    --bs-warning-text-emphasis: var(--sf-warning);
}

/* disable grey overlay for touch on iOS devices */
a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.main-content-container {
    overflow: auto !important;
    background-color: var(--sf-app-bg);
}

nav.navbar {
    background-color: var(--sf-shell);
}

/* Top bar: brand orange icons & labels; notification bell */
#sidebar-toggle svg {
    color: var(--sf-brand);
}

nav.navbar > .container > .navbar-collapse > a.position-relative {
    color: var(--sf-brand);
}

nav.navbar > .container > .navbar-collapse > a.position-relative:hover {
    color: var(--sf-brand-hover);
}

#sidebar-toggle:hover {
    background: var(--sf-dark-hover) !important;
}

#sidebar-toggle:focus-visible {
    background: var(--sf-dark-hover) !important;
}

nav .btn-secondary.btn-link {
    color: var(--sf-brand);
}

nav .btn-secondary.btn-link:hover {
    color: var(--sf-brand-hover);
    background-color: var(--sf-dark-hover) !important;
}

nav .btn-secondary.btn-link:active {
    color: var(--sf-brand-pressed);
    background-color: var(--sf-dark-pressed) !important;
}

/* Org selector: aligned with nav warmth; quieter than active nav */
#logout-button.btn-outline {
    color: var(--sf-brand-bright);
    border: 1px solid rgba(240, 149, 55, 0.38);
    background-color: rgba(34, 38, 42, 0.55);
}

#logout-button.btn-outline:hover {
    color: var(--sf-brand-hover);
    background-color: var(--sf-dark-hover) !important;
    border-color: rgba(240, 149, 55, 0.5);
}

#logout-button.btn-outline:active,
#logout-button.btn-outline.show {
    color: var(--sf-brand);
    background-color: var(--sf-dark-pressed) !important;
    border-color: var(--sf-orange-border-strong);
}

nav a.nav-link,
nav #logout-button,
nav a.nav-link:visited,
nav #logout-button:visited {
    color: var(--sf-brand);
    cursor: pointer;
}

/* Active section: stronger than default alternative — obvious without full orange fill */
nav a.nav-link.active {
    background-color: var(--sf-orange-tint-strong) !important;
    border-radius: 6px;
    color: var(--sf-brand-bright) !important;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid var(--sf-orange-border-strong);
    padding-inline: 0.45rem;
    box-shadow: none;
}

nav a.nav-link:hover,
nav #logout-button:hover {
    color: var(--sf-brand-hover);
}

nav a.nav-link:active,
nav #logout-button:active {
    color: var(--sf-brand-pressed);
}

.unstyled-select {
    -webkit-appearance: none;
    background: none;
    border: none;
    outline: none;
}

form label {
    margin-bottom: 0.5rem;
    font-weight: bold;
}

details.plain > summary {
    list-style: none;
}

details.plain > summary::-webkit-details-marker {
    display: none;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--sf-text-strong);
}

.drag-container > article {
    cursor: grab;
}

.drag-container > article:active {
    opacity: 0.6;
    cursor: grabbing;
}

.drag-container > article.drag-hover img {
    opacity: 0.4;
    border: 2px dashed var(--sf-orange-border-strong);
    padding: 32px;
}

/* Primary slot: muted orange workflow frame */
.drag-container > article:first-of-type img {
    border: 2px solid var(--sf-orange-border-strong);
}

/* Image tiles: structural border = neutral grey (blue-grey reserved for info/focus, not boxes) */
#image-list.drag-container > article img.img-thumbnail {
    border: 1px solid #D8D8D8;
}

#image-list.drag-container > article:first-of-type img.img-thumbnail {
    border: 2px solid var(--sf-orange-border-strong);
}

.drag-container > article:first-of-type .primary-image-container {
    display: block !important;
    background-color: var(--sf-orange-tint-strong);
}

/* Delete control: compact overlay; neutral unchecked / danger checked; 1px border both states */
.drag-container > article div.image-action {
    --sf-img-delete-border: #D8D8D8;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--sf-img-delete-border);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 1px 2px rgba(43, 46, 53, 0.06);
}

.drag-container > article:first-of-type div.image-action {
    bottom: 5px;
    left: 5px;
}

.drag-container .image-action label {
    color: var(--sf-text-body);
    font-weight: 500;
    font-size: 0.9rem;
}

.drag-container .image-action input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin-top: 0.15rem;
    accent-color: #6B7280;
}

.drag-container .image-action input[type="checkbox"]:checked {
    accent-color: var(--sf-danger);
}

/* Checked: danger family; same 1px geometry */
.drag-container .image-action:has(input[type="checkbox"]:checked) {
    --sf-img-delete-border: var(--sf-danger-border);
    background-color: var(--sf-danger-bg);
    box-shadow: 0 1px 2px rgba(185, 28, 28, 0.14);
}

.drag-container .image-action:has(input[type="checkbox"]:checked) label {
    color: var(--sf-danger);
}

/* Promotion sidebar: note semantics */
#main-sidebar aside .alert.alert-info {
    background-color: var(--sf-blue-grey-bg);
    border: 1px solid var(--sf-border);
    border-left: 3px solid var(--sf-blue-grey);
    color: var(--sf-info-text);
}

#main-sidebar aside .alert.alert-warning {
    background-color: var(--sf-warning-bg);
    border: 1px solid var(--sf-warning-border);
    border-left: 3px solid var(--sf-warning-border);
    color: var(--sf-warning);
}

#main-sidebar aside .alert.sf-note-action-required {
    background-color: var(--sf-cool-bg);
    border: 1px solid var(--sf-border);
    border-left: 3px solid var(--sf-orange-border-strong);
    color: var(--sf-text-body);
}

#main-sidebar aside .alert.sf-note-action-required a,
#main-sidebar aside .alert.sf-note-action-required a:visited {
    color: var(--sf-brand) !important;
    font-weight: 600;
    text-decoration-color: currentColor;
}

#main-sidebar aside .alert.sf-note-action-required a:hover,
#main-sidebar aside .alert.sf-note-action-required a:focus-visible {
    color: var(--sf-brand-hover) !important;
    text-decoration-color: currentColor;
}

#main-sidebar aside .alert.alert-danger {
    background-color: var(--sf-danger-bg);
    border: 1px solid var(--sf-danger-border);
    border-left: 3px solid var(--sf-danger);
    color: var(--sf-danger);
}

#main-sidebar aside .alert.alert-danger a {
    color: var(--sf-danger);
    font-weight: 600;
}

#main-sidebar aside .alert.alert-danger a:hover {
    color: #991b1b;
}

#image-list img {
    transition: transform 0.2s ease-in-out 0s;
}

.sidebar {
    top: 52px;
}

.specific-w-18 {
    width: 18px;
}

#selectedOrgId {
    word-wrap: normal;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

/* Primary CTAs: dark family + quiet orange bottom affordance (no orange hover fill) */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sf-btn-dark);
    --bs-btn-border-color: var(--sf-btn-dark);
    --bs-btn-hover-color: #F8FAFC;
    --bs-btn-hover-bg: #3A414E;
    --bs-btn-hover-border-color: #3A414E;
    --bs-btn-focus-shadow-rgb: 114, 153, 168;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sf-dark-pressed);
    --bs-btn-active-border-color: var(--sf-dark-pressed);
    --bs-btn-active-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.24);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--sf-btn-dark);
    --bs-btn-disabled-border-color: var(--sf-btn-dark);
    background: var(--sf-btn-dark);
    border: 1px solid var(--sf-btn-dark);
    color: #fff;
    display: inline-block;
    box-shadow: inset 0 -2px 0 rgba(240, 149, 55, 0.32);
}

.btn-primary:hover {
    background: #3A414E;
    border-color: #3A414E;
    color: #F8FAFC;
    box-shadow:
        inset 0 -4px 0 rgba(240, 149, 55, 0.72),
        0 0 0 3px rgba(43, 46, 53, 0.12);
}

.btn-primary:active,
.btn-primary.active,
.btn-primary.show {
    background: var(--sf-dark-pressed);
    border-color: var(--sf-dark-pressed);
    color: #fff;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.24),
        inset 0 -2px 0 rgba(240, 149, 55, 0.22);
}

.btn-primary:focus-visible {
    box-shadow:
        inset 0 -2px 0 rgba(240, 149, 55, 0.32),
        0 0 0 0.25rem rgba(114, 153, 168, 0.4);
}

/*
 * Dark secondary — important page nav actions (e.g. Statistics).
 * Dark fill + warm rim + weaker orange inset than .btn-primary; not orange-filled.
 */
.btn-sf-dark-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sf-btn-dark);
    --bs-btn-border-color: var(--sf-orange-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sf-dark-hover);
    --bs-btn-hover-border-color: var(--sf-orange-border-strong);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sf-dark-pressed);
    --bs-btn-active-border-color: var(--sf-orange-border-strong);
    background: var(--sf-btn-dark);
    color: #fff;
    border: 1px solid var(--sf-orange-border);
    box-shadow: inset 0 -2px 0 rgba(240, 149, 55, 0.22);
}

.btn-sf-dark-secondary:hover {
    background: var(--sf-dark-hover);
    border-color: var(--sf-orange-border-strong);
    color: #fff;
    box-shadow:
        inset 0 -2px 0 rgba(240, 149, 55, 0.36),
        0 0 0 3px rgba(43, 46, 53, 0.1);
}

.btn-sf-dark-secondary:active,
.btn-sf-dark-secondary.active {
    background: var(--sf-dark-pressed);
    border-color: var(--sf-orange-border-strong);
    color: #fff;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.24);
}

.btn-sf-dark-secondary:focus-visible {
    box-shadow:
        inset 0 -2px 0 rgba(240, 149, 55, 0.22),
        0 0 0 0.25rem rgba(114, 153, 168, 0.38);
}

/* Sidebar filter Apply — light filter-commit; neutral border + orange bottom inset only (never full orange rim / fill) */
.btn-filter-action {
    --bs-btn-color: var(--sf-text-strong);
    --bs-btn-bg: var(--sf-cool-bg);
    --bs-btn-border-color: var(--sf-grey-light);
    --bs-btn-hover-color: var(--sf-dark-pressed);
    --bs-btn-hover-bg: var(--sf-grey-hover);
    --bs-btn-hover-border-color: var(--sf-grey-mid);
    --bs-btn-active-color: var(--sf-dark-pressed);
    --bs-btn-active-bg: var(--sf-soft-border);
    --bs-btn-active-border-color: #55595e;
    background-color: var(--sf-cool-bg);
    border: 1px solid var(--sf-grey-light);
    color: var(--sf-text-strong);
    box-shadow: inset 0 -2px 0 rgba(240, 149, 55, 0.28);
}

.btn-filter-action:hover {
    background-color: var(--sf-grey-hover);
    border-color: var(--sf-grey-mid);
    color: var(--sf-dark-pressed);
    box-shadow:
        inset 0 -2px 0 rgba(240, 149, 55, 0.46),
        0 0 0 3px rgba(43, 46, 53, 0.08);
}

.btn-filter-action:active,
.btn-filter-action.active {
    background-color: var(--sf-soft-border);
    border-color: #55595e;
    color: var(--sf-dark-pressed);
    box-shadow:
        inset 0 2px 5px rgba(43, 46, 53, 0.12),
        inset 0 -2px 0 rgba(240, 149, 55, 0.22);
}

.btn-filter-action:focus-visible {
    box-shadow:
        inset 0 -2px 0 rgba(240, 149, 55, 0.28),
        0 0 0 0.25rem rgba(114, 153, 168, 0.35);
}

/* Calm secondary / data actions: blue-grey outline + subtle bottom affordance (signature, not primary strength) */
.btn-outline-primary {
    --bs-btn-color: var(--sf-text-strong);
    --bs-btn-border-color: var(--sf-blue-grey);
    --bs-btn-hover-color: var(--sf-info-text);
    --bs-btn-hover-bg: var(--sf-blue-grey-bg);
    --bs-btn-hover-border-color: var(--sf-blue-grey-dark);
    --bs-btn-active-color: var(--sf-info-text);
    --bs-btn-active-bg: var(--sf-blue-grey-bg);
    --bs-btn-active-border-color: var(--sf-blue-grey-dark);
    background-color: #FFFFFF;
    border: 1px solid var(--sf-blue-grey);
    color: var(--sf-text-strong);
    box-shadow: inset 0 -2px 0 rgba(114, 153, 168, 0.22);
}

.btn-outline-primary:hover {
    background-color: var(--sf-blue-grey-bg);
    border-color: var(--sf-blue-grey-dark);
    color: var(--sf-info-text);
    box-shadow:
        inset 0 -2px 0 rgba(114, 153, 168, 0.34),
        0 0 0 3px rgba(114, 153, 168, 0.1);
}

.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--sf-blue-grey-bg);
    border-color: var(--sf-blue-grey-dark);
    color: var(--sf-info-text);
    box-shadow: inset 0 2px 4px rgba(114, 153, 168, 0.12);
}

.btn-outline-primary:focus-visible {
    box-shadow:
        inset 0 -2px 0 rgba(114, 153, 168, 0.22),
        0 0 0 0.25rem rgba(114, 153, 168, 0.35);
}

/* Workflow: Clone — muted orange + orange bottom affordance + stronger hover delta */
button[data-testid="promotion-clone-button"].btn-outline-primary {
    --bs-btn-color: var(--sf-brand-pressed);
    --bs-btn-border-color: var(--sf-orange-border-strong);
    --bs-btn-hover-color: var(--sf-brand-pressed);
    --bs-btn-hover-bg: rgba(240, 149, 55, 0.08);
    --bs-btn-hover-border-color: var(--sf-brand);
    --bs-btn-active-color: var(--sf-brand-pressed);
    --bs-btn-active-bg: rgba(240, 149, 55, 0.12);
    --bs-btn-active-border-color: var(--sf-brand);
    background-color: #FFFFFF;
    border: 1px solid var(--sf-orange-border-strong);
    box-shadow: inset 0 -2px 0 rgba(240, 149, 55, 0.2);
}

button[data-testid="promotion-clone-button"].btn-outline-primary:hover {
    background-color: rgba(240, 149, 55, 0.08);
    border-color: var(--sf-brand);
    color: var(--sf-brand-pressed);
    box-shadow:
        inset 0 -2px 0 rgba(240, 149, 55, 0.34),
        0 0 0 3px rgba(240, 149, 55, 0.08);
}

button[data-testid="promotion-clone-button"].btn-outline-primary:active,
button[data-testid="promotion-clone-button"].btn-outline-primary.active {
    background-color: rgba(240, 149, 55, 0.12);
    border-color: var(--sf-brand);
    box-shadow: inset 0 2px 4px rgba(240, 149, 55, 0.14);
}

button[data-testid="promotion-clone-button"].btn-outline-primary:focus-visible {
    box-shadow:
        inset 0 -2px 0 rgba(240, 149, 55, 0.2),
        0 0 0 0.25rem rgba(240, 149, 55, 0.2);
}

/* Neutral grey buttons (not nav btn-link) — quiet bottom affordance */
.btn-secondary:not(.btn-link) {
    --bs-btn-bg: #ffffff;
    --bs-btn-color: var(--sf-text-strong);
    --bs-btn-border-color: var(--sf-border);
    --bs-btn-hover-bg: var(--sf-grey-hover);
    --bs-btn-hover-border-color: var(--sf-grey-mid);
    --bs-btn-hover-color: var(--sf-text-strong);
    --bs-btn-active-bg: #ebecee;
    --bs-btn-active-border-color: var(--sf-grey-mid);
    --bs-btn-active-color: var(--sf-text-strong);
    background-color: #FFFFFF;
    border: 1px solid var(--sf-border);
    color: var(--sf-text-strong);
    box-shadow: inset 0 -2px 0 rgba(43, 46, 53, 0.06);
}

.btn-secondary:not(.btn-link):hover {
    box-shadow: inset 0 -2px 0 rgba(43, 46, 53, 0.1);
}

.btn-secondary:not(.btn-link):active {
    box-shadow: inset 0 2px 4px rgba(43, 46, 53, 0.08);
}

/* Danger: no orange / blue-grey bottom rim */
.btn-danger,
.btn-outline-danger {
    box-shadow: none;
}

.btn-outline-danger:hover,
.btn-outline-danger:active,
.btn-danger:hover,
.btn-danger:active {
    box-shadow: none;
}

.btn-outline-danger:focus-visible,
.btn-danger:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(185, 28, 28, 0.28);
}

/* Tables: white surfaces, grey dividers, no banding; hover grey; selected row = blue-grey rail */
.paginated-table.table {
    --bs-table-striped-bg: transparent;
    --bs-table-bg: var(--sf-surface);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--sf-border);
}

.table > tbody > tr.table-active > * {
    --bs-table-active-bg: var(--sf-blue-grey-bg);
    --bs-table-active-color: var(--sf-text-strong);
    box-shadow: inset 3px 0 0 var(--sf-blue-grey);
}

.paginated-table thead a.link-secondary {
    color: var(--sf-blue-grey-dark);
}

/* Success / warning badges — semantic quiet chips */
.badge.text-bg-success {
    background-color: var(--sf-success-bg) !important;
    color: var(--sf-success) !important;
    border: 1px solid var(--sf-success-border);
    font-weight: 600;
}

.badge.text-bg-warning {
    background-color: var(--sf-warning-bg) !important;
    color: var(--sf-warning) !important;
    border: 1px solid var(--sf-warning-border);
    font-weight: 600;
}

/* Sidebar “sharing” chip used workflow primary badge — muted orange, not data blue */
#main-sidebar aside .badge.text-bg-primary {
    background-color: var(--sf-orange-tint-strong) !important;
    color: var(--sf-brand-pressed) !important;
    border: 1px solid var(--sf-orange-border-strong);
    font-weight: 600;
}

/* Bootstrap text-bg-* badge variants — repo tokens (neutral / selection / featured; not pure black) */
.badge.text-bg-secondary {
    background-color: var(--sf-cool-bg) !important;
    color: var(--sf-text-body) !important;
    border: 1px solid var(--sf-border);
    font-weight: 600;
}

.badge.text-bg-light {
    background-color: var(--sf-blue-grey-bg) !important;
    color: var(--sf-info-text) !important;
    border: 1px solid var(--sf-border);
    font-weight: 600;
}

.badge.text-bg-dark:not(.beta-label) {
    background-color: var(--sf-shell) !important;
    color: var(--sf-surface) !important;
    border: 1px solid var(--sf-dark-pressed);
    font-weight: 600;
}

/* Global alerts (email templates out of scope) */
.alert-success {
    background-color: var(--sf-success-bg);
    border: 1px solid var(--sf-success-border);
    border-left: 3px solid var(--sf-success);
    color: var(--sf-success);
}

.alert-info {
    background-color: var(--sf-blue-grey-bg);
    border: 1px solid var(--sf-border);
    border-left: 3px solid var(--sf-blue-grey);
    color: var(--sf-info-text);
}

.alert-warning {
    background-color: var(--sf-warning-bg);
    border: 1px solid var(--sf-warning-border);
    border-left: 3px solid var(--sf-warning-border);
    color: var(--sf-warning);
}

.alert-danger {
    background-color: var(--sf-danger-bg);
    border: 1px solid var(--sf-danger-border);
    border-left: 3px solid var(--sf-danger);
    color: var(--sf-danger);
}

.alert-primary {
    background-color: var(--sf-blue-grey-bg);
    border: 1px solid var(--sf-blue-grey);
    border-left: 3px solid var(--sf-blue-grey);
    color: var(--sf-info-text);
}

.alert-secondary {
    background-color: var(--sf-cool-bg);
    border: 1px solid var(--sf-border);
    border-left: 3px solid var(--sf-grey-mid);
    color: var(--sf-text-body);
}

.beta-label {
    margin-left: 8px;
    background: linear-gradient(135deg, var(--sf-brand) 0%, var(--sf-brand-hover) 100%);
    color: #fff;
}

.size-6 {
    width: 1.5625rem;
}

table:not(.paginated-table) tbody tr td {
    white-space: nowrap;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-hover-bg: var(--sf-grey-hover);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: var(--sf-grey-hover);
    color: var(--sf-text-strong);
}

@media (max-width: 576px) {
    .paginated-table td {
        display: block !important;
    }

    .paginated-table thead {
        display: none !important;
    }

    .paginated-table a.emphasize {
        font-size: 2rem;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: calc(100% - (2 * var(--bs-spacer-5)))
    }

    .sidebar.show {
        translate: -100%;
    }

    .sidebar.show {
        display: none !important;
    }

    .sidebar.show + .main-article {
        padding-left: 0 !important;
    }

    .sidebar:not(.show) + .main-article {
        padding-left: var(--bs-padding-sbwidth);
    }


    .offcanvas-backdrop.show {
        display: none !important;
    }
}

/* Tom Select clear-all: neutral reset, not danger */
.plugin-clear_button .clear-button {
    font-size: 18px !important;
    color: var(--sf-text-muted) !important;
}

.plugin-clear_button.has-items .clear-button:hover,
.plugin-clear_button:not(.disabled):hover.has-items .clear-button:hover {
    color: var(--sf-text-strong) !important;
}

.ts-control {
    padding: 0.33rem var(--bs-action-padding-x);
    font-size: var(--bs-action-font-size);
    font-weight: var(--bs-font-weight-normal);
    line-height: var(--bs-action-line-height);
    color: var(--bs-form-color);
    background-color: var(--bs-form-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-form-border-color);
    border-radius: var(--bs-border-radius);
}

.ts-dropdown {
    top: calc(100% - 8px) !important;
}

.ts-control.focus,
.ts-control.dropdown-active {
    border-color: var(--sf-blue-grey);
    box-shadow: 0 0 0 0.25rem rgba(114, 153, 168, 0.35);
}

/* Tom Select multi: hide input placeholder once tags are selected (reversible clear restores it) */
.ts-wrapper.multi.has-items .ts-control > input::placeholder {
    opacity: 0;
    color: transparent;
}

.ts-wrapper.multi.has-items .ts-control > input::-webkit-input-placeholder {
    opacity: 0;
    color: transparent;
}