/* Burn.Camp theme glue: what tokens.css does not hold, plus Bootstrap and Syncfusion mappings.
   Loads after Bootstrap and Syncfusion, before app.css. Theme = data-theme on <html> (see App.razor head script). */

:root {
    --bc-transition: 0.2s ease;
    --bc-font-sans: var(--font-sans);
    --bc-font-mono: var(--font-mono);
}

:root, [data-theme="dark"] { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

:focus-visible {
    outline: 2px solid var(--bc-focus-ring);
    outline-offset: 2px;
}

/* ---------- Bootstrap 5.3: primary = ember ---------- */
:root, [data-theme="dark"] {
    --bc-fire-orange-rgb: 236, 112, 64;
    --bc-fire-orange-hot-rgb: 242, 135, 90;
}
[data-theme="light"] {
    --bc-fire-orange-rgb: 181, 73, 27;
    --bc-fire-orange-hot-rgb: 156, 64, 23;
}

:root, [data-bs-theme] {
    --bs-primary: var(--bc-fire-orange);
    --bs-primary-rgb: var(--bc-fire-orange-rgb);
    --bs-link-color: var(--bc-fire-orange);
    --bs-link-color-rgb: var(--bc-fire-orange-rgb);
    --bs-link-hover-color: var(--bc-fire-orange-hot);
    --bs-link-hover-color-rgb: var(--bc-fire-orange-hot-rgb);
    --bs-body-bg: var(--bc-bg);
    --bs-body-color: var(--bc-fg-primary);
    --bs-border-color: var(--bc-border);
}

.btn-primary {
    --bs-btn-color: var(--bc-fg-inverse);
    --bs-btn-bg: var(--bc-fire-orange);
    --bs-btn-border-color: var(--bc-fire-orange);
    --bs-btn-hover-color: var(--bc-fg-inverse);
    --bs-btn-hover-bg: var(--bc-fire-orange-hot);
    --bs-btn-hover-border-color: var(--bc-fire-orange-hot);
    --bs-btn-focus-shadow-rgb: var(--bc-fire-orange-rgb);
    --bs-btn-active-color: var(--bc-fg-inverse);
    --bs-btn-active-bg: var(--bc-fire-orange-hot);
    --bs-btn-active-border-color: var(--bc-fire-orange-hot);
    --bs-btn-disabled-color: var(--bc-fg-inverse);
    --bs-btn-disabled-bg: var(--bc-fire-orange);
    --bs-btn-disabled-border-color: var(--bc-fire-orange);
}

.btn-outline-primary {
    --bs-btn-color: var(--bc-fire-orange);
    --bs-btn-border-color: var(--bc-fire-orange);
    --bs-btn-hover-color: var(--bc-fg-inverse);
    --bs-btn-hover-bg: var(--bc-fire-orange);
    --bs-btn-hover-border-color: var(--bc-fire-orange);
    --bs-btn-focus-shadow-rgb: var(--bc-fire-orange-rgb);
    --bs-btn-active-color: var(--bc-fg-inverse);
    --bs-btn-active-bg: var(--bc-fire-orange-hot);
    --bs-btn-active-border-color: var(--bc-fire-orange-hot);
    --bs-btn-disabled-color: var(--bc-fire-orange);
    --bs-btn-disabled-border-color: var(--bc-fire-orange);
}

/* ---------- Syncfusion bootstrap5.3 theme: primary = ember ----------
   bootstrap5.3.css is the only Syncfusion theme linked; the head script toggles .e-dark-mode on <html>
   (the theme's own dark variant, same variables as bootstrap5.3-dark.css). */
:root, .e-dark-mode {
    --color-sf-primary: var(--bc-fire-orange);
    --color-sf-primary-shadow: var(--bc-fire-orange-rgb);
    --color-sf-primary-text-color: var(--bc-fg-inverse);
    --color-sf-primary-bg-color-hover: var(--bc-fire-orange-hot);
    --color-sf-primary-bg-color-pressed: var(--bc-fire-orange-hot);
    --color-sf-primary-border-color-hover: var(--bc-fire-orange-hot);
    --color-sf-primary-border-color-pressed: var(--bc-fire-orange-hot);
    --color-sf-content-bg-color-selected: var(--bc-fire-orange);
    --color-sf-flyout-bg-color-pressed: var(--bc-fire-orange);
    --color-sf-content-text-color-selected: var(--bc-fg-inverse);
    --color-sf-flyout-text-color-pressed: var(--bc-fg-inverse);
    --color-sf-primary-bg-color-disabled: rgba(var(--bc-fire-orange-rgb), .65);
    --color-sf-primary-border-color-disabled: rgba(var(--bc-fire-orange-rgb), .65);

    /* Neutrals: warm surfaces so inputs and grids sit on the cards */
    --color-sf-content-bg-color: var(--bc-bg-card);
    --color-sf-flyout-bg-color: var(--bc-bg-card);
    --color-sf-content-bg-color-alt1: var(--bc-bg);
    --color-sf-content-text-color: var(--bc-fg-primary);
    --color-sf-content-text-color-alt1: var(--bc-fg-secondary);
    --color-sf-border: var(--bc-border);
    --color-sf-placeholder-text-color: var(--bc-fg-secondary);

    /* Secondary / neutral buttons (e.g. upload "Browse") */
    --color-sf-secondary-bg-color: var(--bc-bg-card);
    --color-sf-secondary-border-color: var(--bc-border);
    --color-sf-secondary-text-color: var(--bc-fg-primary);
    --color-sf-secondary-bg-color-hover: var(--bc-bg-card-hover);
    --color-sf-secondary-bg-color-pressed: var(--bc-bg-card-hover);
    --color-sf-secondary-border-color-hover: var(--bc-border-hover);
    --color-sf-secondary-border-color-pressed: var(--bc-border-hover);
    /* Outline-button text; Syncfusion derives it from secondary-bg, i.e. the card colour */
    --color-sf-secondary-outline: var(--bc-fg-primary);
}

/* Flat buttons take their text colour from secondary-bg too (no variable to remap) */
.e-btn.e-flat, .e-css.e-btn.e-flat { color: var(--bc-fg-primary); }

.e-file-drop { color: var(--bc-fg-secondary); }

/* ---------- Bootstrap status badges: tinted fill + coloured text ---------- */
.badge.bg-success, .badge.text-bg-success { background-color: var(--bc-status-accepted-bg) !important; color: var(--bc-status-accepted) !important; }
.badge.bg-danger, .badge.text-bg-danger { background-color: var(--bc-status-rejected-bg) !important; color: var(--bc-status-rejected) !important; }
.badge.bg-warning, .badge.text-bg-warning { background-color: var(--bc-status-review-bg) !important; color: var(--bc-status-review) !important; }
.badge.bg-info, .badge.text-bg-info { background-color: var(--bc-status-info-bg) !important; color: var(--bc-status-info) !important; }
.badge.bg-secondary, .badge.text-bg-secondary { background-color: var(--bc-status-incomplete-bg) !important; color: var(--bc-status-incomplete) !important; }

/* Organizations grid: soft-deleted row (class added in Organizations.razor OnQueryCellInfo) */
td.e-rowcell.deleted-row { background: var(--bc-bg); color: var(--bc-fg-muted); opacity: 0.7; }