/* Blazor / Bootstrap adapters for the bundled Atalier design tokens. */
:root, [data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: var(--fs-body);
    --bs-body-line-height: var(--lh-normal);
    --bs-body-color: var(--text-heading);
    --bs-body-color-rgb: 232, 234, 240;
    --bs-body-bg: var(--bg-page);
    --bs-body-bg-rgb: 13, 15, 19;
    --bs-emphasis-color: var(--text-heading);
    --bs-secondary-color: var(--text-body);
    --bs-secondary-color-rgb: 144, 152, 168;
    --bs-tertiary-color: var(--text-body);
    --bs-secondary-bg: var(--surface-card);
    --bs-tertiary-bg: var(--surface-raised);
    --bs-border-color: var(--border-default);
    --bs-border-color-translucent: var(--border-default);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-primary: var(--primary);
    --bs-primary-rgb: 218, 157, 0;
    --bs-success: var(--pass-500);
    --bs-success-rgb: 74, 222, 128;
    --bs-danger: var(--blood-500);
    --bs-danger-rgb: 255, 77, 85;
    --bs-warning: var(--gold-400);
    --bs-info: var(--info-500);
    --bs-light: var(--surface-raised);
    --bs-light-rgb: 33, 37, 46;
    --bs-link-color: var(--gold-400);
    --bs-link-color-rgb: 245, 176, 0;
    --bs-link-hover-color: var(--gold-300);
    --bs-link-hover-color-rgb: 255, 201, 51;
    --bs-font-monospace: var(--font-mono);
}
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg-page); color: var(--text-heading); }
::selection { background: var(--gold-500); color: var(--on-primary); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-heading);
    color: var(--text-heading);
    line-height: var(--lh-snug);
}
h1 { font-size: clamp(1.85rem, 3vw, var(--fs-h1)); }
h2 { font-size: var(--fs-h3); }
p { color: var(--text-body); }
a { text-underline-offset: .2em; }
ion-icon { display: inline-block; flex-shrink: 0; width: 1em; height: 1em; vertical-align: -.15em; }
:focus-visible { outline: var(--ring-width) solid var(--gold-400); outline-offset: 3px; }
h1:focus, #main-content:focus { outline: none; }
.skip-link {
    position: fixed;
    left: var(--space-4);
    top: var(--space-4);
    z-index: 1100;
    padding: var(--space-3) var(--space-5);
    background: var(--primary);
    color: var(--on-primary);
    border-radius: var(--radius-pill);
    transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }
.page-header { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.page-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.page-heading h1 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.page-refresh-button { flex-shrink: 0; }
.page-header > h1, .page-header > p, .page-header .breadcrumb { margin-bottom: 0; }
.page-header-controls { margin-top: var(--space-2); }
.page-header-controls > :last-child { margin-bottom: 0 !important; }
.content form { margin-bottom: var(--space-5); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--text-body); --bs-breadcrumb-item-active-color: var(--text-heading); font-size: var(--fs-xs); }
.breadcrumb a { color: var(--text-body); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-400); }
.nav-tabs {
    --bs-nav-tabs-border-width: 0;
    --bs-nav-tabs-link-active-color: var(--on-primary);
    --bs-nav-tabs-link-active-bg: var(--primary);
    --bs-nav-link-color: var(--text-body);
    --bs-nav-link-hover-color: var(--text-heading);
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    gap: var(--space-1);
    padding: var(--space-1);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    background: var(--surface-card);
}
.nav-tabs .nav-link {
    padding: .6rem 1.1rem;
    margin: 0;
    border: 0;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    text-decoration: none;
}
.nav-tabs .nav-link:hover { background: var(--surface-hover); }
.nav-tabs .nav-link.active, .nav-tabs .nav-link.active:hover { background: var(--primary); color: var(--on-primary); }
.btn {
    --bs-btn-font-family: var(--font-display);
    --bs-btn-font-size: var(--fs-sm);
    --bs-btn-font-weight: var(--fw-bold);
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: .65rem;
    --bs-btn-border-radius: var(--radius-pill);
    --bs-btn-focus-box-shadow: var(--ring);
    --bs-btn-disabled-opacity: .45;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn-primary {
    --bs-btn-color: var(--on-primary);
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: var(--on-primary);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-active-bg: var(--primary-press);
    --bs-btn-active-border-color: var(--primary-press);
    --bs-btn-disabled-color: var(--on-primary);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}
.btn-primary:hover { box-shadow: var(--shadow-gold); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-outline-primary {
    --bs-btn-color: var(--gold-400);
    --bs-btn-border-color: var(--gold-border);
    --bs-btn-hover-color: var(--gold-300);
    --bs-btn-hover-bg: var(--gold-bg);
    --bs-btn-hover-border-color: var(--gold-500);
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-disabled-color: var(--gold-400);
    --bs-btn-disabled-border-color: var(--gold-border);
}
.btn-secondary, .btn-outline-secondary {
    --bs-btn-color: var(--text-heading);
    --bs-btn-bg: var(--surface-raised);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--text-heading);
    --bs-btn-hover-bg: var(--surface-hover);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-active-color: var(--text-heading);
    --bs-btn-active-bg: var(--surface-hover);
    --bs-btn-active-border-color: var(--border-strong);
    --bs-btn-disabled-color: var(--text-body);
    --bs-btn-disabled-bg: var(--surface-raised);
    --bs-btn-disabled-border-color: var(--border-default);
}
.btn-outline-secondary { --bs-btn-bg: transparent; }
.btn-danger {
    --bs-btn-color: var(--on-blood);
    --bs-btn-bg: var(--blood-600);
    --bs-btn-border-color: var(--blood-600);
    --bs-btn-hover-color: var(--on-blood);
    --bs-btn-hover-bg: var(--blood-600);
    --bs-btn-hover-border-color: var(--blood-500);
    --bs-btn-active-color: var(--on-blood);
    --bs-btn-active-bg: var(--blood-600);
    --bs-btn-active-border-color: var(--blood-500);
    --bs-btn-disabled-color: var(--on-blood);
    --bs-btn-disabled-bg: var(--blood-600);
    --bs-btn-disabled-border-color: var(--blood-600);
}
.btn-danger:hover { box-shadow: var(--shadow-blood); }
.btn-outline-danger {
    --bs-btn-color: var(--blood-500);
    --bs-btn-border-color: var(--blood-border);
    --bs-btn-hover-color: var(--blood-500);
    --bs-btn-hover-bg: var(--blood-bg);
    --bs-btn-hover-border-color: var(--blood-500);
    --bs-btn-active-color: var(--on-blood);
    --bs-btn-active-bg: var(--blood-600);
    --bs-btn-active-border-color: var(--blood-600);
    --bs-btn-disabled-color: var(--blood-500);
    --bs-btn-disabled-border-color: var(--blood-border);
}
.btn-sm { --bs-btn-padding-y: .4rem; --bs-btn-padding-x: .85rem; --bs-btn-font-size: var(--fs-xs); }
.btn-link { --bs-btn-color: var(--gold-400); --bs-btn-hover-color: var(--gold-300); --bs-btn-active-color: var(--gold-300); }
.form-label, dt {
    font-family: var(--font-mono);
    font-weight: var(--fw-medium);
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    color: var(--text-body);
}
.form-label { margin-bottom: var(--space-2); }
.form-control, .form-select {
    min-height: 44px;
    padding: .7rem .95rem;
    background-color: var(--surface-raised);
    border-color: var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-heading);
    font-size: var(--fs-sm);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-select { padding-right: 2.5rem; }
.form-control::placeholder { color: var(--text-body); opacity: .85; }
.form-control:focus, .form-select:focus {
    color: var(--text-heading);
    background-color: var(--surface-raised);
    border-color: var(--gold-500);
    box-shadow: var(--ring);
}
.form-control:disabled, .form-select:disabled { background: var(--surface-card); color: var(--text-body); opacity: .65; }
.form-check-input { background-color: var(--surface-raised); border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { border-color: var(--primary); box-shadow: var(--ring); }
.form-text, .text-muted, .text-body-secondary { color: var(--text-body) !important; }
.valid.modified:not([type=checkbox]) { border-color: var(--pass-border); }
.invalid, .form-control.invalid, .form-select.invalid { border-color: var(--blood-500); }
.validation-message { margin-top: var(--space-1); color: var(--blood-500); font-size: var(--fs-xs); }
.validation-errors { color: var(--blood-500); }
.card {
    --bs-card-color: var(--text-heading);
    --bs-card-bg: var(--surface-card);
    --bs-card-border-color: var(--border-default);
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-spacer-x: var(--space-5);
    --bs-card-spacer-y: var(--space-5);
}
.card p:last-child { margin-bottom: 0; }
.card-header { background: transparent; border-bottom-color: var(--border-default); }
.dashboard-heading { margin-bottom: var(--space-7); }
.eyebrow { margin-bottom: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-mono-sm); text-transform: uppercase; color: var(--gold-400); }
.dashboard-card { height: 100%; position: relative; overflow: hidden; transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.dashboard-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.dashboard-card .card-body { padding: var(--space-6); display: flex; flex-direction: column; align-items: flex-start; }
.dashboard-card .card-body > p { margin-bottom: var(--space-5); }
.dashboard-card-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-5); border: 1px solid var(--gold-border); border-radius: var(--radius-md); color: var(--gold-400); background: var(--gold-bg); font-size: 1.4rem; }
.dashboard-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.table-responsive { margin-bottom: var(--space-5); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); }
.table {
    --bs-table-color: var(--text-heading);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border-default);
    --bs-table-striped-bg: var(--bg-section);
    --bs-table-hover-color: var(--text-heading);
    --bs-table-hover-bg: var(--surface-raised);
    margin-bottom: 0;
    font-size: var(--fs-sm);
}
.table > :not(caption) > * > * { padding: var(--space-4) var(--space-5); vertical-align: middle; }
.table thead { background: var(--bg-section); }
.table th { color: var(--text-body); font-family: var(--font-mono); font-size: .7rem; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-raised); }
.table a { text-decoration: none; }
.table a:hover { text-decoration: underline; }
.table .font-monospace { font-size: var(--fs-xs); }
dl { padding: var(--space-5); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); }
dl.row { margin-inline: 0; row-gap: var(--space-2); }
dd { overflow-wrap: anywhere; }
.alert { --bs-alert-border-radius: var(--radius-md); font-size: var(--fs-sm); }
.alert-danger { --bs-alert-color: var(--blood-500); --bs-alert-bg: var(--blood-bg); --bs-alert-border-color: var(--blood-border); }
.alert-warning { --bs-alert-color: var(--gold-400); --bs-alert-bg: var(--gold-bg); --bs-alert-border-color: var(--gold-border); }
.alert-success { --bs-alert-color: var(--pass-500); --bs-alert-bg: var(--pass-bg); --bs-alert-border-color: var(--pass-border); }
.alert-info { --bs-alert-color: var(--info-500); --bs-alert-bg: rgba(90,169,255,.08); --bs-alert-border-color: rgba(90,169,255,.3); }
.alert p { color: inherit; }
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: var(--fw-medium);
    letter-spacing: .04em;
    white-space: nowrap;
    color: var(--text-body);
    background: var(--surface-raised);
}
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-running { color: var(--pass-500); background: var(--pass-bg); border-color: var(--pass-border); }
.usage-total { border-color: var(--gold-border); background: var(--gold-bg); }
.usage-total .usage-value { font-family: var(--font-mono); color: var(--gold-400); }
.blazor-error-boundary { padding: var(--space-5); border: 1px solid var(--blood-border); border-radius: var(--radius-md); background: var(--blood-bg); color: var(--blood-500); }
.blazor-error-boundary::after { content: "An error has occurred."; }
@media (max-width: 575.98px) {
    .table > :not(caption) > * > * { padding: var(--space-3) var(--space-4); }
    .dashboard-card .card-body { padding: var(--space-5); }
    .dashboard-heading { margin-bottom: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .btn-primary:hover, .dashboard-card:hover { transform: none; }
}