/* ── Skip navigation link ────────────────────────────────── */

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 1100;
    padding: 0.75rem 1.5rem;
    background-color: var(--bs-primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 0.375rem 0;
}
.skip-link:focus {
    top: 0;
    color: #fff;
    outline: 3px solid var(--bs-secondary);
    outline-offset: 2px;
}

/* ── Sticky footer (flexbox) ─────────────────────────────── */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > .container-lg,
body > .container-fluid,
body > .container-xl,
body > .container-md,
body > .container-sm,
body > [class*="container"] {
    flex: 1;
}

.footer {
    width: 100%;
    padding: 1rem 0;
}

.footer p {
    margin-bottom: 0.25rem;
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem 0;
    font-size: 0.85rem;
}

.footer-links a {
    /* ReSharper disable once CssNotResolved */
    color: var(--bs-link-color);
    text-decoration: underline;
}

.footer-links a:hover {
    color: var(--bs-primary);
}

.footer-separator {
    margin: 0 0.5rem;
    /* ReSharper disable once CssNotResolved */
    color: var(--bs-secondary-color);
}

/* ── User menu (Variant D — Green Banner) ───────────────── */

.dropdown-menu.um-drop {
    width: 260px;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--bs-border-color);
    transform-origin: top right;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
    /* Transition-driven open/close (JS toggles .um-drop-closing) */
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.um-drop.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.um-drop.um-drop-closing {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.15s ease-in, transform 0.15s ease-in;
}

.um-trigger {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    transition: transform 0.1s ease;
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
}

.um-trigger::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
                rgba(var(--bs-primary-rgb, 0, 111, 59), 0.12) 0%,
                transparent 70%);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.35s ease, transform 0.4s ease;
    pointer-events: none;
}

.um-trigger:hover::after {
    opacity: 1;
    transform: scale(1);
}

.um-trigger:active {
    transform: scale(0.97);
}


/* Green gradient banner */
.um-banner {
    background: linear-gradient(135deg, var(--bs-primary), #0f9a4e);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: default;
}

.um-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.um-email {
    font-size: 0.72rem;
    color: #ffffff;
    color: rgba(255, 255, 255, 0.88);
    margin-top: 0.2rem;
}

.um-account {
    font-size: 0.72rem;
    color: #ffffff;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: underline;
    margin-top: 0.15rem;
}

.um-account:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* User avatar (populated via HttpContext.Items by Primer or consuming app) */
@keyframes um-avatar-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

.um-avatar-wrap {
    display: inline-flex;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
    overflow: hidden;
    background: linear-gradient(90deg,
/* ReSharper disable once CssNotResolved */
/* ReSharper disable once InvalidValue */
        var(--bs-secondary-bg) 25%,
/* ReSharper disable once CssNotResolved */
        var(--bs-tertiary-bg) 50%,
/* ReSharper disable once CssNotResolved */
        var(--bs-secondary-bg) 75%);
    background-size: 200% 100%;
    animation: um-avatar-shimmer 1.4s ease-in-out infinite;
}

.um-avatar-wrap.um-loaded {
    animation: none;
    background: none;
}

.um-banner .um-avatar-wrap {
    width: 60px;
    height: 60px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.1) 25%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.1) 75%);
    background-size: 200% 100%;
}

.um-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Menu items */
.um-items {
    padding: 0.375rem;
}

.um-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    /* ReSharper disable once CssNotResolved */
    color: var(--bs-body-color);
    text-decoration: none;
    transition: background-color 0.12s, color 0.12s, border-color 0.12s;
    cursor: pointer;
    border: none;
    border-left: 2px solid transparent;
    background: none;
    width: 100%;
    text-align: left;
}

.um-item:hover {
    background-color: color-mix(in srgb, var(--bs-body-color) 6%, transparent);
    /* ReSharper disable once CssNotResolved */
    color: var(--bs-body-color);
    text-decoration: none;
    border-left-color: var(--bs-primary);
}

.um-danger:hover {
    background-color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.08) !important;
    color: #f87171 !important;
}

/* Divider */
.um-div {
    height: 1px;
    /* ReSharper disable once CssNotResolved */
    /* ReSharper disable once InvalidValue */
    background: color-mix(in srgb, var(--bs-body-color) 8%, transparent);
    margin: 0.125rem 0.375rem;
}

/* ── Theme segmented toggle ─────────────────────────────── */

.um-theme-section {
    padding: 0.5rem 0.625rem 0.625rem;
}

.um-theme-label {
    font-size: 0.65rem;
    font-weight: 600;
    /* ReSharper disable once CssNotResolved */
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.4rem;
}

.um-theme-toggle {
    display: flex;
    position: relative;
    border-radius: 0.5rem;
    padding: 3px;
    gap: 2px;
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.06);
    border: 1px solid #000000;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.um-theme-pill {
    position: absolute;
    top: 3px;
    height: calc(100% - 6px);
    border-radius: 0.375rem;
    background-color: var(--bs-primary);
    box-shadow: 0 2px 10px #0f9a4e;
    box-shadow: 0 2px 10px rgba(15, 154, 78, 0.3);
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}

[data-bs-theme=dark] .um-theme-toggle {
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.3);
    border-color: #ffffff;
    border-color: rgba(255, 255, 255, 0.06);
}

.um-theme-btn {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.375rem 0.3rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 500;
    transition: color 0.15s ease, background-color 0.15s ease;
    /* ReSharper disable once CssNotResolved */
    color: var(--bs-secondary-color);
    background: transparent;
}

.um-theme-btn:hover:not(.active) {
    /* ReSharper disable once CssNotResolved */
    color: var(--bs-body-color);
    /* ReSharper disable once CssNotResolved */
    /* ReSharper disable once InvalidValue */
    background-color: color-mix(in srgb, var(--bs-body-color) 5%, transparent);
}

.um-theme-btn i {
    font-size: 0.75rem;
}

.um-theme-btn.active {
    background-color: transparent !important;
    color: #fff !important;
    box-shadow: none;
}

/* Standalone theme dropdown (unauthenticated / alternate header) */
.um-theme-dropdown {
    min-width: 200px;
    border-radius: 10px !important;
    transform-origin: top right;
    animation: um-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 12px 40px #000000, 0 4px 12px #000000;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ── Alternate header spacer ────────────────────────────── */

.alt-header-spacer {
    width: 38px;
    flex-shrink: 0;
}

/* ── SRU seal image sizing ───────────────────────────────── */

.sruSeal {
    width: 48px;
    height: 48px;
}

/* ── Header text size ────────────────────────────────────── */

.text-header {
    font-size: 2em;
    user-select: none;
}

/* ── BootstrapPrompts component ─────────────────────────── */

.message-card {
    border: 1px solid var(--bs-border-color);
    /* ReSharper disable once CssNotResolved */
    background: var(--bs-body-bg);
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.message-card .btn-close {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.message-card:hover .btn-close,
.message-card:focus-within .btn-close,
.message-card .btn-close:focus-visible {
    opacity: 1;
}

.message-card-accent {
    width: 5px;
    flex-shrink: 0;
}

.message-card-text {
    white-space: pre-line;
}

.message-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.message-toggle {
    font-size: 0.8rem;
}

.announcement-card {
    flex: 0 0 300px;
}

.announcements-nav {
    position: relative;
}

.announcements-scroll {
    flex: 1 1 0;
    overflow-x: auto;
    /* ReSharper disable once CssNotResolved */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 0.25rem;
    justify-content: center;
}

.announcements-scroll::-webkit-scrollbar {
    display: none;
}

.announcements-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    border: none;
    background: transparent;
    /* ReSharper disable once CssNotResolved */
    color: var(--bs-secondary-color);
    font-size: 1.1rem;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    border-radius: 0.375rem;
    padding: 0;
}

.announcements-arrow:hover {
    color: var(--bs-primary);
    /* ReSharper disable once CssNotResolved */
    /* ReSharper disable once InvalidValue */
    background: color-mix(in srgb, var(--bs-primary) 8%, transparent);
}

.announcements-arrow.hidden {
    visibility: hidden;
    pointer-events: none;
}

#bootstrapAlerts:not(:empty) {
    margin-bottom: 1rem;
}

.announcements-chevron {
    transition: transform 0.3s ease;
}

.announcements-chevron-open {
    transform: rotate(180deg);
}

@keyframes jiggle {
    0%   { transform: rotate(0); }
    25%  { transform: rotate(-3deg); }
    50%  { transform: rotate(3deg); }
    75%  { transform: rotate(-2deg); }
    100% { transform: rotate(0); }
}

.announcements-btn:hover .announcements-chevron,
.announcements-btn:active .announcements-chevron {
    animation: jiggle 0.4s ease;
}

/* ── MessageBox component ───────────────────────────────── */

.messageBox {
    z-index: 1055;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    width: 250px;
    max-width: calc(100vw - 2rem);
    display: none;
    /* ReSharper disable once CssNotResolved */
    background-color: var(--bs-body-bg);
    /* ReSharper disable once CssNotResolved */
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

@media (max-width: 575.98px) {
    .messageBox {
        top: 25%;
    }
}

.loading-box {
    position: relative;
    width: 100%;
    height: 25px;
    border-radius: 50px;
    border: 2px solid var(--bs-border-color);
    overflow: hidden;
}

.loader {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50px;
    background: linear-gradient(45deg, #007055, #ffcb0b);
    left: -100%;
    animation: load 3s linear infinite;
}

@keyframes load {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ── File upload component ─────────────────────────────── */

.capstone-file-upload {
    /* ReSharper disable once CssNotResolved */
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: 1.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.capstone-file-upload-title {
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.25rem;
    /* ReSharper disable once CssNotResolved */
    color: var(--bs-body-color);
}

.capstone-file-upload-zone {
    position: relative;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    text-align: center;
    background: transparent;
    transition: background-color 0.2s;
    cursor: pointer;
    border: none;
    display: block;
    width: 100%;
    color: inherit;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.capstone-file-upload-zone:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.capstone-file-upload-zone:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.capstone-file-upload-zone-border {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    overflow: hidden;
}

.capstone-file-upload-zone-border svg {
    width: 100%;
    height: 100%;
}

.capstone-file-upload-zone-border rect {
    transition: stroke 0.2s;
}

.capstone-file-upload-zone:hover {
    /* ReSharper disable once CssNotResolved */
    /* ReSharper disable once InvalidValue */
    background-color: color-mix(in srgb, var(--bs-primary) 4%, transparent);
}

.capstone-file-upload-zone:hover .capstone-file-upload-zone-border rect {
    stroke: var(--bs-primary);
}

.capstone-file-upload-zone-active {
    /* ReSharper disable once CssNotResolved */
    /* ReSharper disable once InvalidValue */
    background-color: color-mix(in srgb, var(--bs-primary) 8%, transparent) !important;
}

.capstone-file-upload-zone-active .capstone-file-upload-zone-border rect {
    stroke: var(--bs-primary);
    stroke-dasharray: none;
}

.capstone-file-upload-icon {
    font-size: 2.25rem;
    color: #f0a500;
    display: block;
    margin-bottom: 0.375rem;
}

@media (prefers-reduced-motion: no-preference) {
    .capstone-file-upload-icon {
        animation: capstone-file-upload-bounce 1s 5;
    }
}

@keyframes capstone-file-upload-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.capstone-file-upload-text {
    /* ReSharper disable once CssNotResolved */
    color: var(--bs-body-color);
    font-size: 0.9375rem;
}

.capstone-file-upload-browse {
    color: var(--bs-primary);
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
}

.capstone-file-upload-browse:hover {
    color: var(--bs-primary);
    text-decoration: none;
}

.capstone-file-upload-list {
    margin-top: 0.75rem;
}

/* Single-file preview */
.capstone-file-upload-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.capstone-file-upload-thumb {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.capstone-file-upload-file-name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.875rem;
    font-weight: 500;
    /* ReSharper disable once CssNotResolved */
    color: var(--bs-body-color);
}

.capstone-file-upload-remove {
    flex-shrink: 0;
    line-height: 1;
}

.capstone-file-upload-remove-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: #dc3545;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s, border-color 0.15s;
}

.capstone-file-upload-remove-icon:hover {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: #dc3545;
}

.capstone-file-upload-remove-icon:focus-visible,
.capstone-file-upload-chip-remove:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}

/* Multi-file pill chips */
.capstone-file-upload-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-height: 180px;
    overflow-y: auto;
}

.capstone-file-upload-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 14rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border-radius: 9999px;
    border: 1px solid var(--bs-border-color);
    /* ReSharper disable once CssNotResolved */
    background: var(--bs-body-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background-color 0.15s;
}

.capstone-file-upload-chip:hover {
    /* ReSharper disable once CssNotResolved */
    /* ReSharper disable once InvalidValue */
    background-color: color-mix(in srgb, var(--bs-body-color) 4%, transparent);
}

.capstone-file-upload-chip-thumb {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.capstone-file-upload-chip-icon {
    font-size: 1rem;
    margin-left: 0.25rem;
    flex-shrink: 0;
}

.capstone-file-upload-chip-name {
    overflow-wrap: anywhere;
    /* ReSharper disable once CssNotResolved */
    color: var(--bs-body-color);
}

.capstone-file-upload-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: #dc3545;
    font-size: 0.55rem;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.capstone-file-upload-chip-remove:hover {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: #dc3545;
}

/* Fade-in animation for new items */
@keyframes capstone-file-upload-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
    .capstone-file-upload-fade-in {
        animation: capstone-file-upload-fade-in 0.3s ease;
    }
}

/* Upload button */
.capstone-file-upload-btn:disabled {
    cursor: no-drop;
    pointer-events: auto;
}

.capstone-file-upload-errors:not(:empty) {
    margin-top: 0.5rem;
}

/* ── Autocomplete component ──────────────────────────────── */

.capstone-autocomplete-wrap {
    position: relative;
}

/* Wrap-scoped to beat Bootstrap's .form-floating > .form-control (specificity 0,2,0).
   Without the wrap selector, this rule loses the cascade tie and the input falls back
   to Bootstrap's 0.75rem right-padding — letting long values render under the clear ×. */
.capstone-autocomplete-wrap .capstone-autocomplete-input {
    padding-right: 2.25rem;
}

.capstone-autocomplete-clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    /* ReSharper disable once CssNotResolved */
    color: var(--bs-body-color);
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.4;
    transition: opacity 0.15s;
    z-index: 5;
    user-select: none;
}

.capstone-autocomplete-clear:hover {
    opacity: 1;
}

.capstone-autocomplete-toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0.25rem 0.4rem;
    /* ReSharper disable once CssNotResolved */
    color: var(--bs-body-color);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 5;
    line-height: 1;
    font-size: 0.875rem;
}

.capstone-autocomplete-toggle:hover {
    opacity: 1;
}

.capstone-autocomplete-toggle.open {
    transform: translateY(-50%) rotate(180deg);
}

/* When the toggle button is present, reserve room for it and shift the clear × to its left */
.capstone-autocomplete-wrap:has(> .capstone-autocomplete-toggle) .capstone-autocomplete-input {
    padding-right: 3.75rem;
}

.capstone-autocomplete-wrap:has(> .capstone-autocomplete-toggle) .capstone-autocomplete-clear {
    right: 2.25rem;
}

.capstone-autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    /* ReSharper disable once CssNotResolved */
    background: var(--bs-body-bg);
    /* ReSharper disable once CssNotResolved */
    border: 1px solid var(--bs-border-color);
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.capstone-autocomplete-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    /* ReSharper disable once CssNotResolved */
    border-bottom: 1px solid var(--bs-border-color);
    transition: background-color 0.1s;
}

.capstone-autocomplete-item:last-child {
    border-bottom: none;
}

.capstone-autocomplete-item:hover {
    /* ReSharper disable once CssNotResolved */
    background-color: var(--bs-secondary-bg);
}

.capstone-autocomplete-active {
    color: #ffffff;
}

.capstone-autocomplete-validation {
    position: absolute;
    top: 0;
    right: 0.5rem;
    transform: translateY(-50%);
    display: none;
    padding: 0.125rem 0.5rem;
    /* ReSharper disable once CssNotResolved */
    background: var(--bs-danger, #dc3545);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 0.25rem;
    z-index: 6;
    pointer-events: none;
    white-space: nowrap;
}

.capstone-autocomplete-input.is-invalid {
    /* ReSharper disable once CssNotResolved */
    border-color: var(--bs-danger, #dc3545);
    /* Reserve room for Bootstrap's is-invalid icon plus the clear × to its left */
    padding-right: 3.5rem;
}

/* Bootstrap renders the is-invalid icon at right: 0.75rem — same slot as the
   clear ×. Shift the × further left so the two don't stack on top of each other. */
.capstone-autocomplete-wrap:has(.capstone-autocomplete-input.is-invalid) .capstone-autocomplete-clear {
    right: 2.25rem;
}

/* When the show-all chevron is present, the toggle button already occupies the
   right: 0.5rem slot — Bootstrap's icon would render directly on top of it.
   Suppress the icon in that combination; the red border and "Required" pill
   still convey the invalid state. */
.capstone-autocomplete-wrap:has(> .capstone-autocomplete-toggle) .capstone-autocomplete-input.is-invalid {
    background-image: none;
    padding-right: 3.75rem;
}

/* Three-dot loading indicator shown inside the input while a read-url fetch is
   in flight. Hidden by default; the container's data-loading attribute (set by
   the TagHelper initially and managed by JS afterwards) gates visibility.
   Sits where the clear button normally lives — both can't be visible at once
   because the input is disabled while loading. */
.capstone-autocomplete-spinner {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: none;
    align-items: center;
    gap: 0.3rem;
}

.capstone-autocomplete[data-loading="true"] .capstone-autocomplete-spinner {
    display: inline-flex;
}

.capstone-autocomplete-spinner > span[aria-hidden="true"] {
    width: 0.5rem;
    height: 0.5rem;
    /* ReSharper disable once CssNotResolved */
    background-color: var(--bs-primary, #006633);
    border-radius: 50%;
    opacity: 0.25;
    animation: capstone-autocomplete-dot 1.5s ease-in-out infinite;
}

.capstone-autocomplete-spinner > span[aria-hidden="true"]:nth-child(2) {
    animation-delay: 0.18s;
}

.capstone-autocomplete-spinner > span[aria-hidden="true"]:nth-child(3) {
    animation-delay: 0.36s;
}

/* Matches the capstone-grid loading dots — same color cycle so the two
   indicators feel like the same component family. */
@keyframes capstone-autocomplete-dot {
    /* ReSharper disable CssNotResolved */
    0%   { opacity: 0.25; background-color: var(--bs-primary, #006633); }
    20%  { opacity: 1;    background-color: var(--bs-primary, #006633); }
    42%  { opacity: 1;    background-color: var(--bs-secondary, #6c757d); }
    63%  { opacity: 1;    background-color: #6cc24a; }
    85%  { opacity: 1;    background-color: #8BD3E6; }
    100% { opacity: 0.25; background-color: var(--bs-primary, #006633); }
    /* ReSharper restore CssNotResolved */
}

/* Hide clear/toggle buttons while loading — input is disabled, no value to clear,
   and the chevron toggle would compete with the spinner for the same slot. */
.capstone-autocomplete[data-loading="true"] .capstone-autocomplete-clear,
.capstone-autocomplete[data-loading="true"] .capstone-autocomplete-toggle {
    display: none;
}