/* ===========================================================================
   Group Buy Tracker theme — dark-navy "neon-tech" palette keyed to the logo
   (electric blue + cyan + lime green, small orange accents). Dark is the
   default (set on <html> in App.razor); a light variant is kept for the toggle.
   =========================================================================== */

:root {
    /* Brand accents — identical in light and dark so the brand reads the same in both.
       Blue/cyan = primary actions & info, green = success, orange = in progress. */
    --gbt-primary: #1677ff;
    --gbt-primary-2: #008cff;
    --gbt-link: #1677ff;
    --gbt-cyan: #00cfe8;
    --gbt-success: #25b84a;
    --gbt-warning: #f5a400;
    --gbt-danger: #e53958;

    /* Surfaces / structure — light mode (default) */
    --gbt-body-bg: #f5f9fe;
    --gbt-surface: #ffffff;
    --gbt-surface-2: #f5f9fe;
    --gbt-border: #d9e5f2;
    --gbt-border-hover: #168cff;
    --gbt-topbar-bg: #ffffff;
    --gbt-topbar-border: #e3e9f2;
    --gbt-sidebar: #ffffff;
    --gbt-hover: #eef8ff;

    /* Text */
    --gbt-heading: #102a43;
    --gbt-muted: #58708a;

    --gbt-pill-bg: #eef2f7;
    --gbt-pill-color: #58708a;

    /* Cards use the brand blue; color is reserved for status, not per-card. */
    --gbt-card-accent: var(--gbt-primary);
}

/* Dark mode (alternate): same brand accents as :root, only surfaces/text change. */
[data-bs-theme="dark"] {
    --gbt-body-bg: #0b1220;
    --gbt-surface: #182231;
    --gbt-surface-2: #111a2a;
    --gbt-border: #2a3a4f;
    --gbt-topbar-bg: #0b1f3a;
    --gbt-topbar-border: #20344d;
    --gbt-sidebar: #071525;
    --gbt-hover: rgba(22, 119, 255, 0.12);

    --gbt-heading: #f4f7fb;
    --gbt-muted: #aab7c7;

    --gbt-pill-bg: rgba(145, 163, 184, 0.14);
    --gbt-pill-color: #c7d2e0;

    /* Bootstrap variable overrides so its own tables/forms/cards/dropdowns pick
       up the navy palette without per-component rules. */
    --bs-body-bg: #0b1220;
    --bs-body-color: #e6edf6;
    --bs-emphasis-color: #f4f7fb;
    --bs-secondary-color: #aab7c7;
    --bs-tertiary-color: #718399;
    --bs-border-color: #2a3a4f;
    --bs-secondary-bg: #182231;
    --bs-tertiary-bg: #111a2a;
    --bs-card-bg: #182231;
    --bs-card-border-color: #2a3a4f;
    --bs-primary: #1677ff;
    --bs-primary-rgb: 22, 119, 255;
    --bs-link-color: #1677ff;
    --bs-link-color-rgb: 22, 119, 255;
    --bs-link-hover-color: #4d9bff;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html {
    font-size: 14px;
}

/* Global compact form controls — match the 14px base */
.form-control,
.form-select {
    font-size: 1rem;
    padding: .75rem .5rem;
}

.btn {
    font-size: 1rem;
    padding: .75rem .75rem;
}

.input-group-text {
    font-size: 1rem;
    padding: .25rem .5rem;
}

.badge,
.status-pill {
    font-size: 1rem;
}

.form-check-label {
    font-size: 1rem;
}

.table th {
    font-size: 1rem;
}

body {
    background-color: var(--gbt-body-bg);
}

/* Subtle blue glow at the top-right ties the page to the logo. */
[data-bs-theme="dark"] body {
    background-image: radial-gradient(circle at 82% -5%, rgba(0, 140, 255, 0.10), transparent 38%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

[data-bs-theme="light"] body {
    background-image: radial-gradient(circle at 85% -5%, rgba(22, 119, 255, 0.06), transparent 42%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Two-tone heading accent ("Group Buy Tracker" -> "Tracker" in brand cyan).
   Deeper cyan on light for legibility on white; the bright logo cyan on dark. */
.text-accent {
    color: #06b6d4;
}

[data-bs-theme="dark"] .text-accent {
    color: #22d3ee;
}

/* ---- Links ---- */
a, .btn-link {
    color: var(--gbt-link);
}

a:hover, .btn-link:hover {
    color: var(--gbt-primary-2);
}

/* ---- Buttons ---- */
.btn-primary {
    --bs-btn-bg: var(--gbt-primary);
    --bs-btn-border-color: var(--gbt-primary);
    --bs-btn-hover-bg: var(--gbt-primary-2);
    --bs-btn-hover-border-color: var(--gbt-primary-2);
    --bs-btn-active-bg: var(--gbt-primary-2);
    --bs-btn-active-border-color: var(--gbt-primary-2);
    background: linear-gradient(135deg, var(--gbt-primary), var(--gbt-primary-2));
    border: none;
    color: #fff;
    font-weight: 500;
    transition: box-shadow .15s ease, filter .15s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(135deg, var(--gbt-primary-2), var(--gbt-primary));
    color: #fff;
    box-shadow: 0 4px 14px rgba(22, 119, 255, 0.35);
}

.btn-outline-secondary {
    --bs-btn-color: var(--gbt-muted);
    --bs-btn-border-color: var(--gbt-border);
    --bs-btn-hover-bg: rgba(22, 119, 255, 0.10);
    --bs-btn-hover-color: var(--gbt-primary);
    --bs-btn-hover-border-color: var(--gbt-primary);
}

.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 217, 255, 0.18);
    border-color: var(--gbt-cyan);
}

/* ---- Inputs ---- */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #0f1928;
    border-color: var(--gbt-border);
    color: var(--gbt-heading);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: #6b7c92;
}

/* ---- Tables ---- */
[data-bs-theme="dark"] .table {
    --bs-table-bg: #111a2a;
    --bs-table-color: #dce6f2;
    --bs-table-border-color: #26394f;
    --bs-table-striped-bg: #14203200;
    --bs-table-striped-color: #dce6f2;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    --bs-table-hover-color: #f4f7fb;
}

.table > thead th {
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--gbt-cyan);
}

[data-bs-theme="dark"] .table > thead th {
    background-color: #18283b;
    color: #c7d2e0;
    border-color: #26394f;
    border-bottom-color: var(--gbt-cyan);
}

[data-bs-theme="light"] .table > thead th {
    background-color: #f1f5fa;
    color: #64748b;
    border-color: #e4eaf2;
    border-bottom-color: var(--gbt-cyan);
}

[data-bs-theme="light"] .table {
    --bs-table-hover-bg: rgba(16, 42, 67, 0.04);
    --bs-table-hover-color: #102a43;
}

/* ---- Cards ---- */
.card {
    position: relative;
    background-color: var(--gbt-surface);
    border-color: var(--gbt-border);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gbt-card-accent);
    border-radius: var(--bs-card-border-radius, .5rem) var(--bs-card-border-radius, .5rem) 0 0;
    opacity: .9;
}

.card:hover {
    border-color: var(--gbt-border-hover);
    box-shadow: 0 6px 22px rgba(16, 42, 67, 0.10);
}

/* ---- Alerts / info box ---- */
[data-bs-theme="dark"] .alert-light {
    --bs-alert-bg: #111d2d;
    --bs-alert-border-color: #29405a;
    --bs-alert-color: #c7d2e0;
}

[data-bs-theme="light"] .alert-light {
    --bs-alert-bg: #eaf2fe;
    --bs-alert-border-color: #cfe2fd;
    --bs-alert-color: #33455c;
}

.alert-light {
    border-left: 3px solid var(--gbt-cyan);
    box-shadow: 0 0 20px rgba(0, 207, 232, 0.07);
}

.alert-link {
    color: var(--gbt-primary);
    font-weight: 600;
}

.alert-link:hover {
    color: var(--gbt-primary-2);
}

[data-bs-theme="dark"] .alert-link {
    color: #4d9bff;
}

[data-bs-theme="dark"] .alert-link:hover {
    color: #7cb6ff;
}

/* ---- Page heading ---- */
.page-header h1 {
    color: var(--gbt-heading);
    font-weight: 700;
    border-left: 3px solid var(--gbt-cyan);
    padding-left: 0.7rem;
    line-height: 1.1;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--gbt-success);
}

.invalid {
    outline: 1px solid var(--gbt-danger);
}

.validation-message {
    color: var(--gbt-danger);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Signed-out pages (login/register): no side menu, just the centered card full-width. */
.anon-main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.anon-theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

/* Theme toggle: show the moon in light mode (click to go dark) and the sun in dark mode. */
.theme-toggle .to-light { display: none; }
.theme-toggle .to-dark { display: inline; }
[data-bs-theme="dark"] .theme-toggle .to-light { display: inline; }
[data-bs-theme="dark"] .theme-toggle .to-dark { display: none; }

/* Auth pages (Login/Register/etc.) — a centered branded card. */
.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 2.5rem 1rem;
}

.login-card {
    width: 100%;
    max-width: 440px;
    background: var(--gbt-surface);
    border: 1px solid var(--gbt-border);
    border-radius: 1rem;
    box-shadow: 0 20px 45px rgba(2, 8, 20, 0.45), 0 0 40px rgba(0, 140, 255, 0.06);
    padding: 2.25rem 2.5rem 2rem;
}

.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

/* Full logo per theme (light = dark text, dark = white text), shown whole. */
.login-brand-logo {
    display: block;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 2129 / 620;
    margin: 0 auto;
    background-image: url("group-buy-logo-light.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

[data-bs-theme="dark"] .login-brand-logo {
    aspect-ratio: 2172 / 724;
    background-image: url("group-buy-logo-dark.png");
}

.login-card h1 {
    text-align: center;
    margin-bottom: 0.25rem;
    color: var(--gbt-heading);
}

.login-card h2 {
    text-align: center;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--gbt-muted);
    margin-top: 0;
    margin-bottom: 1.25rem;
}

/* External login buttons (Discord, etc.) */
.external-login-picker {
    margin-bottom: 0.75rem;
}

.btn-external-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.btn-external-login .external-login-icon svg {
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
}

.btn-discord {
    background: #5865f2;
    color: #fff;
    border: none;
}
.btn-discord:hover { background: #4752c4; color: #fff; }

.btn-telegram {
    background: #2aabee;
    color: #fff;
    border: none;
}
.btn-telegram:hover { background: #1a96d4; color: #fff; }

.external-login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--gbt-muted);
    font-size: 0.8rem;
    margin: 0.5rem 0 1rem;
}
.external-login-divider::before,
.external-login-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--gbt-border);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.page-header .actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.toolbar {
    display: flex;
    gap: .75rem;
    align-items: end;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.toolbar .form-control,
.toolbar .form-select {
    min-width: 12rem;
}

/* ---- Status pills — translucent chips keyed to the logo progress bar ---- */
.status-pill {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    background: var(--gbt-pill-bg);
    color: var(--gbt-pill-color);
    border: 1px solid transparent;
}

.status-pill.paid {
    background: rgba(99, 102, 241, 0.12);
    color: #818cf8;
    border-color: rgba(99, 102, 241, 0.30);
}

.status-pill.received {
    background: rgba(57, 255, 20, 0.10);
    color: var(--gbt-success);
    border-color: rgba(57, 255, 20, 0.28);
}

.status-pill.open,
.status-pill.planning {
    background: rgba(0, 217, 255, 0.10);
    color: var(--gbt-cyan);
    border-color: rgba(0, 217, 255, 0.28);
}

.status-pill.shipped,
.status-pill.intransit {
    background: rgba(255, 176, 0, 0.12);
    color: var(--gbt-warning);
    border-color: rgba(255, 176, 0, 0.30);
}

.status-pill.cancelled,
.status-pill.issue {
    background: rgba(255, 59, 92, 0.12);
    color: var(--gbt-danger);
    border-color: rgba(255, 59, 92, 0.30);
}

.status-pill.draft {
    background: var(--gbt-pill-bg);
    color: var(--gbt-pill-color);
    border-color: var(--gbt-border);
}

html[data-bs-theme="light"] .status-pill.paid {
    background: rgba(79, 70, 229, 0.10);
    color: #4338ca;
    border-color: rgba(79, 70, 229, 0.28);
}

.table-actions {
    white-space: nowrap;
}

th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
th.sortable::after {
    content: ' ⇅';
    opacity: 0.3;
    font-size: .75em;
}
th.sortable.sort-asc::after  { content: ' ↑'; opacity: 0.8; }
th.sortable.sort-desc::after { content: ' ↓'; opacity: 0.8; }

.table-actions a,
.table-actions button {
    margin-right: .35rem;
}

.muted-empty {
    color: var(--gbt-muted);
    padding: 1.5rem 0;
}

.form-section {
    background: var(--gbt-surface);
    border: 1px solid var(--gbt-border);
    border-radius: .5rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}

.form-section h2 {
    font-size: 1.05rem;
    margin-bottom: .85rem;
}

.line-editor-row {
    border: 1px dashed var(--gbt-border);
    border-radius: .5rem;
    padding: .75rem;
    margin-bottom: .75rem;
    background: var(--gbt-surface-2);
}

.alert-inline {
    margin-bottom: 1rem;
}

.badge-global {
    background: rgba(22, 119, 255, 0.15);
    color: #6db1ff;
}

.badge-personal {
    background: rgba(255, 176, 0, 0.15);
    color: var(--gbt-warning);
}

.badge-platform {
    background: rgba(20, 184, 166, 0.15);
    color: #2dd4bf;
    font-weight: 500;
}

.money {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stack-trace {
    font-size: .72rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--gbt-surface-2);
    border-radius: .375rem;
    padding: .5rem .75rem;
    margin-top: .25rem;
}

.audit-table td { vertical-align: top; }

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .75rem 1.25rem;
    margin-bottom: 1rem;
}

.detail-grid .label {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gbt-muted);
}

.detail-grid .value {
    font-weight: 600;
}

/* ---- Home feature cards: brand blue accent + icons (color reserved for status) ---- */
.home-cards .card-icon {
    font-size: 1.6rem;
    margin-bottom: .5rem;
    color: var(--gbt-primary);
}
/* Shared reference-inspired layout. Global selectors intentionally target the
   document theme outside Blazor's isolated component scope. */
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) {
    --gbt-body-bg: #031122;
    --gbt-surface: #0b2032;
    --gbt-surface-2: #071a2d;
    --gbt-border: #173e55;
    --gbt-topbar-bg: #03192c;
    --gbt-topbar-border: #146080;
    --gbt-sidebar: #021b39;
    --gbt-heading: #f5f7ff;
    --gbt-muted: #b4cce7;
    --gbt-link: #00baff;
    --gbt-cyan: #00dcef;
    --bs-body-bg: var(--gbt-body-bg);
    --bs-body-color: #e9f1ff;
    --bs-secondary-color: var(--gbt-muted);
    --bs-border-color: var(--gbt-border);
    --bs-secondary-bg: var(--gbt-surface);
    --bs-tertiary-bg: var(--gbt-surface-2);
    --bs-link-color: var(--gbt-link);
    --bs-link-color-rgb: 0, 186, 255;
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) body {
    background-image: radial-gradient(ellipse at 92% 5%, #00447780, transparent 35%),
                      linear-gradient(120deg, #020f1d, #04142b);
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .page { min-height: 100dvh; }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .page > main { min-width: 0; }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .sidebar {
    background: radial-gradient(ellipse at 110% 30%, #00346b75, transparent 65%), #02162e;
    border-right: 1px solid #14506b;
    display: flex;
    flex-direction: column;
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .brand-row {
    min-height: 110px;
    align-items: center;
    border-bottom: 1px solid #14445e;
    background: radial-gradient(ellipse at 40% 0, #00649260, transparent 70%), #001321;
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .brand-logo {
    aspect-ratio: 2172 / 724;
    background-image: url("group-buy-logo-dark.png");
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .nav-item .nav-link {
    color: #cee3ff;
    border: 1px solid transparent;
    font-size: 1rem;
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .sidebar .nav-item .nav-link {
    min-height: 60px;
    gap: 12px;
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .nav-item .nav-link .bi {
    color: #62b5ff;
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .sidebar .nav-item .nav-link .bi {
    width: 30px;
    font-size: 1.8rem;
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .nav-item a.active,
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .nav-item a.active:hover {
    background: linear-gradient(125deg, #00baff, #0055ff 65%, #008aff);
    border-color: #00d4ff;
    color: white;
    box-shadow: 0 0 20px #007aff55, inset 0 1px 0 #ffffff30;
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .nav-item a.active .bi { color: white; }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .top-row {
    min-height: 76px;
    height: auto;
    gap: 14px;
    background: linear-gradient(110deg, #031827, #002644);
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .top-row .small { font-size: 1rem; }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .top-row a { margin-left: 0; }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .top-row .btn {
    padding: .55rem .8rem;
    border-color: #1686ba;
    background: #00152d;
    color: #c8dfff;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .top-row .bi { color: #14adff; }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .top-row .top-user-name { max-width: 16rem; }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .content { padding-top: 30px; }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .text-accent { color: #00d7ee; }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .btn-primary {
    background: linear-gradient(135deg, #00baff, #0061ff 75%);
    border: 1px solid #00bfff;
    box-shadow: inset 0 1px 0 #ffffff25, 0 0 12px #008cff15;
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .btn-primary:hover { filter: brightness(1.15); }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-header h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    border-left: 6px solid var(--gbt-cyan);
    padding-left: 20px;
    line-height: 1.15;
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-header p { font-size: 1.25rem; margin-top: 10px; }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-notice {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 24px;
    min-height: 106px;
    margin-top: 28px;
    background: linear-gradient(115deg, #0b2031, #0d2134);
    color: #f2f5ff;
    border: 1px solid #16465d;
    border-left: 6px solid var(--gbt-cyan);
    border-radius: 7px;
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-notice > .bi { font-size: 2.2rem; color: #00ccf0; }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .alert-link { color: #00baff; }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-cards { --bs-gutter-x: 14px; --bs-gutter-y: 20px; }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-cards .card {
    --gbt-card-accent: #00d6f4;
    background: linear-gradient(120deg, #061b2c, #0b2135);
    border: 1px solid #194359;
    border-top-color: var(--gbt-card-accent);
    border-radius: 8px;
    overflow: hidden;
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-cards > :nth-child(2) .card { --gbt-card-accent: #7066ff; }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-cards > :nth-child(3) .card { --gbt-card-accent: #4ee000; }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-cards > :nth-child(4) .card { --gbt-card-accent: #ffb900; }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-cards .card::before {
    width: 56%;
    height: 5px;
    right: auto;
    border-radius: 0 0 8px 0;
    background: linear-gradient(90deg, var(--gbt-card-accent), var(--gbt-card-accent));
    box-shadow: 0 0 16px var(--gbt-card-accent);
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-cards .card-body {
    display: flex;
    flex-direction: column;
    padding: 24px 20px 22px;
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-cards .card-icon {
    font-size: 2.9rem;
    line-height: 1.3;
    margin-bottom: 18px;
    color: var(--gbt-card-accent);
    filter: drop-shadow(0 0 9px color-mix(in srgb, var(--gbt-card-accent) 35%, transparent));
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-cards h2 { font-weight: 700; margin-bottom: 14px; }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-cards p { line-height: 1.5; margin-bottom: 12px; }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-cards .btn {
    margin-top: auto;
    margin-left: -12px;
    margin-right: -12px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .7rem .4rem;
    white-space: nowrap;
}
/* Admin nav submenu */
.nav-group { list-style: none; margin: 0; padding: 0; }
.nav-group > summary { list-style: none; cursor: pointer; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}
.nav-group-chevron {
    font-size: .7rem;
    transition: transform .2s ease;
    margin-left: auto;
    flex-shrink: 0;
}
.nav-group[open] .nav-group-chevron { transform: rotate(90deg); }
.nav-sublink { padding-left: 2.5rem !important; font-size: .9rem; }

.sidebar-signature, .home-watermark { display: none; }
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .sidebar-signature {
    display: block;
    margin: auto 22px 28px;
    padding-top: 16px;
    border-top: 1px solid #6090ae;
    text-align: center;
    color: #9bcfff;
    font: italic 2rem "Segoe Script", "Brush Script MT", cursive;
    transform: rotate(-5deg);
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .sidebar-signature::after {
    content: "";
    display: block;
    height: 3px;
    width: 75%;
    margin: 8px auto 0;
    background: linear-gradient(90deg, #0098ff, #00eeef);
    transform: rotate(-8deg);
}
html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-watermark {
    display: flex;
    justify-content: flex-end;
    padding-top: clamp(80px, 20vh, 300px);
    padding-bottom: 20px;
    pointer-events: none;
}
.home-watermark img { width: min(470px, 80%); height: auto; opacity: .65; }
@media (min-width: 641px) {
    html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .sidebar { width: 276px; flex-shrink: 0; }
    html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .nav-scrollable { height: auto; min-height: 0; overflow-y: auto; }
    html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .top-row,
    html:is([data-bs-theme="dark"], [data-bs-theme="light"]) article { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (min-width: 641px) and (max-width: 1050px) {
    html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-cards > div { width: 50%; }
    html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .top-row > .small { display: none; }
}
@media (max-width: 640px) {
    html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .brand-row { min-height: 80px; padding-right: 80px; }
    html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .brand-logo { max-width: 220px; }
    html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .sidebar-signature { display: none; }
    html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .top-row { gap: 8px; padding: 12px !important; }
    html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .top-row > .small { display: none; }
    html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .top-row .top-user { min-width: 0; }
    html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .top-row .top-user-name { max-width: 42vw; }
    html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-notice { padding: 18px; gap: 12px; }
    html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-cards > div { width: 100%; }
    html:is([data-bs-theme="dark"], [data-bs-theme="light"]) .home-watermark { padding-top: 60px; }
}

/* Light palette uses the same geometry and accents, with deeper colors for
   readable text and icons on white and pale-blue surfaces. */
html[data-bs-theme="light"] {
    --gbt-body-bg: #f1f5f9;
    --gbt-surface: #f0f5fa;
    --gbt-surface-2: #e2edf7;
    --gbt-border: #c8dcec;
    --gbt-topbar-bg: #dae8f4;
    --gbt-topbar-border: #b9d9ed;
    --gbt-sidebar: #c1ceda;
    --gbt-heading: #102d4b;
    --gbt-muted: #4b6480;
    --gbt-link: #0067ba;
    --gbt-cyan: #008eaa;
    --bs-body-bg: var(--gbt-body-bg);
    --bs-body-color: #203d5a;
    --bs-emphasis-color: var(--gbt-heading);
    --bs-secondary-color: var(--gbt-muted);
    --bs-border-color: var(--gbt-border);
    --bs-secondary-bg: var(--gbt-surface-2);
    --bs-tertiary-bg: #e2edf7;
    --bs-link-color: var(--gbt-link);
    --bs-link-color-rgb: 0, 103, 186;
    --bs-link-hover-color: #004b90;
}
html[data-bs-theme="light"] body {
    background-image: radial-gradient(ellipse at 92% 5%, #d7e9f440, transparent 45%),
                      linear-gradient(120deg, #f5f8fb, #edf3f8);
}
html[data-bs-theme="light"] .sidebar {
    background: linear-gradient(280deg, #e3edf6, #d3e5f2);
    border-right-color: #b9d9ed;
}
html[data-bs-theme="light"] .brand-row {
    background: linear-gradient(210deg, #e3edf6, #d3e5f2);
    border-bottom-color: #c8dcec;
}
html[data-bs-theme="light"] .brand-logo {
    aspect-ratio: 2129 / 620;
    background-image: url("group-buy-logo-light.png");
}
html[data-bs-theme="light"] .nav-item .nav-link { color: #294766; }
html[data-bs-theme="light"] .nav-item .nav-link .bi { color: #0877c7; }
html[data-bs-theme="light"] .nav-item .nav-link:hover {
    background-color: #dcefff;
    color: #004f99;
}
html[data-bs-theme="light"] .nav-item a.active,
html[data-bs-theme="light"] .nav-item a.active:hover {
    background: linear-gradient(125deg, #0877d5, #0053d9 70%, #0067db);
    border-color: #168dde;
    color: white;
    box-shadow: 0 4px 16px #007aff25, inset 0 1px 0 #ffffff30;
}
html[data-bs-theme="light"] .nav-item a.active .bi,
html[data-bs-theme="light"] .nav-item a.active:hover .bi { color: white; }
html[data-bs-theme="light"] .top-row { background: linear-gradient(110deg, #e3edf6, #d3e5f2); }
html[data-bs-theme="light"] .top-row .btn {
    border-color: #87b9da;
    background: #edf4fa;
    color: #294766;
}
html[data-bs-theme="light"] .top-row .btn:hover { background: #e2f2ff; border-color: #0877c7; }
html[data-bs-theme="light"] .top-row .bi { color: #0877c7; }
html[data-bs-theme="light"] .text-accent { color: #00849e; }
html[data-bs-theme="light"] .btn-primary {
    background: linear-gradient(135deg, #0877d5, #0053d9 75%);
    border-color: #0877d5;
    box-shadow: inset 0 1px 0 #ffffff25, 0 3px 10px #0061ff20;
}
html[data-bs-theme="light"] .btn-primary:hover { filter: brightness(.93); }
html[data-bs-theme="light"] .home-notice {
    background: linear-gradient(115deg, #d4eaf5, #e5f0f8);
    color: #203d5a;
    border-color: #bdddec;
    border-left-color: var(--gbt-cyan);
}
html[data-bs-theme="light"] .home-notice > .bi { color: #008aa8; }
html[data-bs-theme="light"] .alert-link { color: #0067ba; }
html[data-bs-theme="light"] .alert-link:hover { color: #004b90; }
html[data-bs-theme="light"] .home-cards .card {
    --gbt-card-accent: #008aa8;
    background: linear-gradient(120deg, #f0f5fa, #e4eef7);
    border-color: #c8dcec;
    border-top-color: var(--gbt-card-accent);
}
html[data-bs-theme="light"] .home-cards > :nth-child(2) .card { --gbt-card-accent: #6651d5; }
html[data-bs-theme="light"] .home-cards > :nth-child(3) .card { --gbt-card-accent: #288224; }
html[data-bs-theme="light"] .home-cards > :nth-child(4) .card { --gbt-card-accent: #a66700; }
html[data-bs-theme="light"] .home-cards .card-icon { filter: none; }
html[data-bs-theme="light"] .home-cards .card:hover { border-color: #168cce; }
html[data-bs-theme="light"] .sidebar-signature { color: #3273a4; border-top-color: #a4c6df; }
html[data-bs-theme="light"] .home-watermark img { opacity: .8; filter: saturate(.8) brightness(.75); }
html[data-bs-theme="light"] .login-card {
    box-shadow: 0 16px 45px #17497818, 0 0 30px #008cff08;
}
html[data-bs-theme="light"] .navbar-toggler {
    border-color: #87b9da;
    background-color: #0868b7;
}
html[data-bs-theme="light"] .navbar-toggler:checked { background-color: #004b90; }

/* Light mode: separate surfaces with space and fill instead of outlines. */
html[data-bs-theme="light"] .sidebar,
html[data-bs-theme="light"] .brand-row,
html[data-bs-theme="light"] .top-row,
html[data-bs-theme="light"] .form-section,
html[data-bs-theme="light"] .line-editor-row,
html[data-bs-theme="light"] .login-card {
    border-color: transparent;
}
html[data-bs-theme="light"] .form-control:not(:focus):not(.is-invalid):not(.is-valid),
html[data-bs-theme="light"] .form-select:not(:focus):not(.is-invalid):not(.is-valid) {
    border-color: transparent;
    background-color: #dfe9f3;
}
html[data-bs-theme="light"] .form-control:focus,
html[data-bs-theme="light"] .form-select:focus {
    background-color: #f5f9fc;
}
html[data-bs-theme="light"] .top-row .btn:not(:focus-visible):not(:hover),
html[data-bs-theme="light"] .nav-item a.active:not(:focus-visible) {
    border-color: transparent;
}

/* Dark mode: quieter structural surfaces; retain existing input borders. */
html[data-bs-theme="dark"] .sidebar,
html[data-bs-theme="dark"] .brand-row,
html[data-bs-theme="dark"] .top-row,
html[data-bs-theme="dark"] .form-section,
html[data-bs-theme="dark"] .line-editor-row,
html[data-bs-theme="dark"] .login-card {
    border-color: transparent;
}
html[data-bs-theme="dark"] .top-row .btn:not(:focus-visible):not(:hover),
html[data-bs-theme="dark"] .nav-item a.active:not(:focus-visible) {
    border-color: transparent;
}

/* Soft elevation defines the light workspace without adding outlines. */
html[data-bs-theme="light"] .form-section {
    box-shadow: 0 6px 24px #2046660a;
}
html[data-bs-theme="light"] .table {
    --bs-table-bg: var(--gbt-surface);
}
html[data-bs-theme="light"] .table > thead th {
    background-color: #dce8f3;
    color: #3b5670;
}

/* Coordinated dark gradients: one direction, three surface depths. */
html[data-bs-theme="dark"] {
    --gbt-gradient-page: linear-gradient(135deg, #061525, #091d31);
    --gbt-gradient-shell: linear-gradient(270deg, #0b2034, #102a42);
    --gbt-gradient-panel: linear-gradient(135deg, #102638, #142e44);
    --gbt-gradient-action: linear-gradient(135deg, #008ee8, #0064e8);
    --gbt-surface: #102638;
    --gbt-surface-2: #0b2034;
}
html[data-bs-theme="dark"] body {
    background-image: var(--gbt-gradient-page);
}
html[data-bs-theme="dark"] .sidebar,
html[data-bs-theme="dark"] .brand-row,
html[data-bs-theme="dark"] .top-row {
    background: var(--gbt-gradient-shell);
}
html[data-bs-theme="dark"] .form-section,
html[data-bs-theme="dark"] .login-card,
html[data-bs-theme="dark"] .home-notice,
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .home-cards .card {
    background: var(--gbt-gradient-panel);
}
html[data-bs-theme="dark"] .btn-primary,
html[data-bs-theme="dark"] .btn-primary:hover,
html[data-bs-theme="dark"] .btn-primary:focus,
html[data-bs-theme="dark"] .btn-primary:active,
html[data-bs-theme="dark"] .nav-item a.active,
html[data-bs-theme="dark"] .nav-item a.active:hover {
    background: var(--gbt-gradient-action);
}
html[data-bs-theme="dark"] .sidebar-signature::after {
    background: var(--gbt-gradient-action);
}

/* ---- Compact tabbed edit pages (group buy) ---- */
.page-header-compact {
    margin-bottom: 0.75rem;
}
.page-header-compact h1 {
    font-size: 1.35rem;
}
.gbt-page-tabs {
    border-bottom-color: var(--gbt-border);
    gap: 0.15rem;
    flex-wrap: wrap;
}
.gbt-page-tabs .nav-link {
    color: var(--gbt-muted);
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 0.4rem 0.4rem 0 0;
    padding: 0.4rem 0.85rem;
    font-size: 0.875rem;
    background: transparent;
}
.gbt-page-tabs .nav-link:hover {
    color: var(--gbt-heading);
    border-color: var(--gbt-border);
    background: var(--gbt-surface-2);
}
.gbt-page-tabs .nav-link.active {
    color: var(--gbt-heading);
    background: var(--gbt-surface);
    border-color: var(--gbt-border);
    border-bottom-color: var(--gbt-surface);
    font-weight: 600;
}
.form-section-compact {
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.75rem;
}
.gbt-compact-form .form-label {
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
    color: var(--gbt-muted);
}
.gbt-compact-form .form-control-sm,
.gbt-compact-form .form-select-sm {
    min-height: calc(1.5em + 0.5rem + 2px);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
}
.gbt-compact-form .form-text {
    font-size: 0.75rem;
    margin-top: 0.15rem;
}
.gbt-form-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gbt-border);
}
.form-check-sm {
    min-height: 1.25rem;
    padding-left: 1.4rem;
    margin-bottom: 0;
}
.form-check-sm .form-check-input {
    width: 2rem;
    height: 2rem;
    margin-top: 0.15rem;
}
.form-check-sm .form-check-label {
    font-size: 1rem;
    padding: 0.5rem;
}

/* ── Split-pane layout ─────────────────────────────────────────────────────── */
.gbt-split-layout {
    height: calc(100vh - 8.5rem);
    min-height: 26rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gbt-split-pane-top {
    flex: 1 1 auto;
    min-height: 9rem;
    overflow: auto;
    min-width: 0;
}

.gbt-split-layout.collapsed .gbt-split-pane-top {
    flex: 0 1 auto;
}

.gbt-split-splitter {
    flex: 0 0 8px;
    cursor: row-resize;
    position: relative;
    background-color: var(--gbt-border);
    border-top: 1px solid var(--gbt-border);
    border-bottom: 1px solid var(--gbt-border);
    transition: background-color .15s;
}

.gbt-split-splitter::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--gbt-muted);
    opacity: 0.7;
}

.gbt-split-splitter:hover {
    background-color: color-mix(in srgb, var(--gbt-primary) 22%, var(--gbt-border));
}

.gbt-split-pane-bottom {
    flex: 0 0 auto;
    height: 45%;
    min-height: 9rem;
    overflow: auto;
    min-width: 0;
    background-color: var(--gbt-surface-2);
    border-top: 1px solid var(--gbt-border);
}

.gbt-split-layout.collapsed .gbt-split-splitter,
.gbt-split-layout.collapsed .gbt-split-pane-bottom {
    display: none;
}

/* ── Editor tab strip ──────────────────────────────────────────────────────── */
.gbt-tabstrip {
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 0 0.5rem;
    background-color: var(--gbt-surface-2);
    border-bottom: 1px solid var(--gbt-border);
}

.gbt-tabstrip-tabs {
    display: flex;
    align-items: stretch;
    gap: 2px;
    overflow-x: auto;
}

.gbt-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.5rem 0.45rem 0.75rem;
    font-size: 0.85rem;
    color: var(--gbt-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.gbt-tab:hover {
    color: var(--bs-body-color);
    background-color: var(--gbt-hover);
}

.gbt-tab.active {
    color: var(--bs-body-color);
    border-bottom-color: var(--gbt-primary);
    background-color: var(--gbt-surface);
}

.gbt-tab-close {
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0.15rem 0.3rem;
    border-radius: 0.25rem;
    cursor: pointer;
    opacity: 0.55;
}

.gbt-tab-close:hover {
    background-color: var(--gbt-hover);
    opacity: 1;
}

.gbt-tabstrip-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    gap: 0.5rem;
}

.gbt-close-all {
    background-color: var(--gbt-surface-2);
    border: 1px solid var(--gbt-border);
    color: var(--bs-body-color);
    font: inherit;
    border-radius: 0.35rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    cursor: pointer;
}

.gbt-close-all:hover {
    border-color: var(--gbt-primary);
}

/* ── Split-pane page variant (for crud pages with sidebar nav) ─────────────── */
.gbt-split-layout.gbt-split-crud {
    height: calc(100vh - 7rem);
}

.gbt-split-layout.gbt-split-crud .gbt-split-pane-top {
    overflow-y: auto;
}

.gbt-split-pane-top.gbt-table-scroll {
    overflow-y: auto;
}

.gbt-split-pane-bottom .gbt-editor-scroll {
    overflow-y: auto;
    height: 100%;
    padding: 1rem 1.25rem;
}

tr.gbt-row-open {
    background-color: var(--gbt-hover) !important;
}

tr.gbt-row-active {
    background-color: color-mix(in srgb, var(--gbt-primary) 12%, var(--gbt-surface)) !important;
    outline: 1px solid var(--gbt-primary);
    outline-offset: -1px;
}

/* ── Organizer platform-link rows ──────────────────────────────────────────── */
.organizer-platforms {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.organizer-platform-row {
    border: 1px solid var(--gbt-border);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--gbt-surface);
}

.organizer-platform-row.active {
    border-color: var(--gbt-primary);
}

.platform-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-weight: 500;
}

.platform-link-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.platform-link-fields > div {
    flex: 1;
    min-width: 200px;
}

.platform-link-fields label {
    display: block;
    font-size: 0.75rem;
    color: var(--gbt-text-muted);
    margin-bottom: 0.2rem;
}