html,
body {
    font-family: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--af-ink);
    background-color: var(--bs-background);
    -webkit-font-smoothing: antialiased;
    line-height: 1.65;
}

html {
    scrollbar-gutter: stable;
}

/*
    Overlay chrome lives here (not in scoped component CSS). Isolation + left/right/width
    together were shrinking the bar to the layout viewport, so it sat behind the sticky
    sidebar and stopped at the scrollbar gutter.
*/
#components-reconnect-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 10000;
    pointer-events: none;
    background: var(--af-amber-tint);
    border-bottom: 1px solid var(--af-border);
    box-shadow: var(--af-shadow-sm), 100vmax 0 0 var(--af-amber-tint);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-resume-failed {
    display: block;
}

#components-reconnect-modal.af-reconnect-auto {
    display: none;
}

#components-reconnect-modal.components-reconnect-show {
    visibility: hidden;
    opacity: 0;
    animation: af-reconnect-reveal 0.2s ease 3s forwards;
}

#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-resume-failed {
    visibility: visible;
    opacity: 1;
    animation: none;
}

@keyframes af-reconnect-reveal {
    to {
        visibility: visible;
        opacity: 1;
    }
}

body:has(#components-reconnect-modal.components-reconnect-show) #blazor-error-ui,
body:has(#components-reconnect-modal.components-reconnect-retrying) #blazor-error-ui,
body:has(#components-reconnect-modal.components-reconnect-paused) #blazor-error-ui,
body:has(#components-reconnect-modal.components-reconnect-failed) #blazor-error-ui,
body:has(#components-reconnect-modal.components-reconnect-rejected) #blazor-error-ui,
body:has(#components-reconnect-modal.components-reconnect-resume-failed) #blazor-error-ui {
    display: none !important;
}

.container {
    max-width: 1200px;
}

/* The sidebar anchors the page to the left. Centering the container is fine while the
   leftover space is modest, but on very wide screens it drifts far from the sidebar and
   starts to look like an accident rather than a deliberate layout — left-align it there instead. */
@media (min-width: 2000px) {
    .container {
        margin-left: 3rem;
        margin-right: auto;
    }
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    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;
}

.table {
    table-layout: auto;
    max-width: 100%;
    border: 1px solid var(--af-border);
    box-shadow: var(--af-shadow-xs);
    border-radius: var(--af-radius-sm);
    overflow: hidden;
}

/* Modals */
.modal-dialog {
    max-width: 800px;
}

.modal-content {
    border: 1px solid var(--af-border);
    border-radius: var(--af-radius-lg);
    box-shadow: var(--af-shadow-lg);
}

.modal-backdrop {
    background-color: rgba(15, 23, 33, 0.55) !important;
}

.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.modal-body {
    max-height: 75vh;
    overflow-y: auto;
}

/* Extensions */
.smaller {
    font-size: 0.8rem;
}

/* Activity list month headers (also used by JS temporary scroll headers) */
.activity-list .month-header {
    margin-top: 34px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--af-border);
}

.activity-list .month-header.text-muted {
    color: var(--af-ink-faint) !important;
}

/* Categories */
.category-none {
    background-color: var(--bs-category-none) !important;
}

.category-workshop {
    background-color: var(--bs-category-workshop) !important;
}

.category-presentation {
    background-color: var(--bs-category-presentation) !important;
}

.category-ceremony {
    background-color: var(--bs-category-ceremony) !important;
}

.category-showcase {
    background-color: var(--bs-category-showcase) !important;
}

.category-community {
    background-color: var(--bs-category-community) !important;
}

/* Calendar chips (month/week) — tinted surfaces, category accent on the left */
.activity-link {
    color: var(--af-ink) !important;
    border: 1px solid var(--af-border);
    border-left-width: 3px;
}

.activity-link.category-none {
    background-color: color-mix(in srgb, var(--bs-category-none) 14%, var(--af-surface)) !important;
    border-left-color: var(--bs-category-none) !important;
    border-color: color-mix(in srgb, var(--bs-category-none) 22%, var(--af-border)) !important;
}

.activity-link.category-workshop {
    background-color: color-mix(in srgb, var(--bs-category-workshop) 14%, var(--af-surface)) !important;
    border-left-color: var(--bs-category-workshop) !important;
    border-color: color-mix(in srgb, var(--bs-category-workshop) 22%, var(--af-border)) !important;
}

.activity-link.category-presentation {
    background-color: color-mix(in srgb, var(--bs-category-presentation) 14%, var(--af-surface)) !important;
    border-left-color: var(--bs-category-presentation) !important;
    border-color: color-mix(in srgb, var(--bs-category-presentation) 22%, var(--af-border)) !important;
}

.activity-link.category-ceremony {
    background-color: color-mix(in srgb, var(--bs-category-ceremony) 14%, var(--af-surface)) !important;
    border-left-color: var(--bs-category-ceremony) !important;
    border-color: color-mix(in srgb, var(--bs-category-ceremony) 22%, var(--af-border)) !important;
}

.activity-link.category-showcase {
    background-color: color-mix(in srgb, var(--bs-category-showcase) 14%, var(--af-surface)) !important;
    border-left-color: var(--bs-category-showcase) !important;
    border-color: color-mix(in srgb, var(--bs-category-showcase) 22%, var(--af-border)) !important;
}

.activity-link.category-community {
    background-color: color-mix(in srgb, var(--bs-category-community) 14%, var(--af-surface)) !important;
    border-left-color: var(--bs-category-community) !important;
    border-color: color-mix(in srgb, var(--bs-category-community) 22%, var(--af-border)) !important;
}