/* Global settings */
html {
    scrollbar-gutter: stable;
}

/* Force white text - MudBlazor doesn't provide this utility class,
   needed for text on colored backgrounds (pricing cards, banners, etc.) */
.text-white,
.text-white.mud-typography {
    color: white !important;
}

/* Equal height cards per row - for grid layouts with cards */
.home-grid,
.match-height {
    align-items: stretch;
}

.home-grid > .mud-grid-item,
.match-height > .mud-grid-item {
    display: flex;
}

.home-grid > .mud-grid-item > .mud-card,
.match-height > .mud-grid-item > .mud-card,
.match-height > .mud-grid-item > .mud-paper {
    width: 100%;
}

/* Authentication pages */
.login-container,
.vh-80 {
    min-height: 80vh;
}

.login-card {
    width: 100%;
    max-width: 25rem;
}

.register-paper {
    max-width: 31.25rem;
}

.initialize-paper {
    width: 31.25rem;
}

.initialize-icon {
    font-size: 5rem;
}

/* YouTube-style video page layout */
.video-page-layout {
    display: grid;
    grid-template-columns: 1fr 20rem;
    gap: 1.5rem;
    align-items: start;
}

.video-main {
    min-width: 0; /* Prevent grid blowout */
}

/* Remove margin from video in dedicated video page layout */
.video-container .cf-stream-video {
    margin: 0;
}

.video-playlist {
    position: sticky;
    top: 5rem; /* Below app bar */
    height: fit-content;
    max-height: calc(100vh - 6rem);
}

.playlist-container {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 6rem);
    overflow: hidden;
}

.playlist-header {
    flex-shrink: 0;
}

.playlist-list {
    overflow-y: auto;
    flex-grow: 1;
}

.playlist-item {
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
}

.playlist-item:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.playlist-item-active {
    border-left-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-hover);
}

/* Mobile: stack vertically */
@media (max-width: 960px) {
    .video-page-layout {
        grid-template-columns: 1fr;
    }

    .video-playlist {
        position: static;
        max-height: none;
    }

    .playlist-container {
        max-height: 20rem;
    }
}

/* Extra large icons for hero/empty state displays */
.icon-xl {
    font-size: 3rem !important;
}

.icon-xxl {
    font-size: 5rem !important;
}

.role-card {
    width: 9.375rem;
    min-width: 7rem;
    flex: 1;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-grab {
    cursor: grab;
}

/* Clickable program cards with hover effect */
.program-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.program-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mud-elevation-6);
}

/* Opacity utility */
.opacity-80 {
    opacity: 0.8;
}

.line-height-tight {
    line-height: 1.3;
}

.pointer-events-none {
    pointer-events: none;
}

.whitespace-pre-wrap {
    white-space: pre-wrap;
}

.bg-transparent {
    background: transparent;
}

.font-monospace {
    font-family: monospace;
}

.text-transform-none {
    text-transform: none;
}

.fw-bold {
    font-weight: 700;
}

/* Theme loader - prevents flashbang on load */
.theme-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background-color: #FFFFFF;
    /* White */
}

@media (prefers-color-scheme: dark) {
    .theme-loader {
        background-color: #1E2A30;
        /* Dark Background */
    }
}

/* College Search Ribbon */
.ribbon-container {
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.ribbon-tabs .mud-tabs-toolbar {
    background: var(--mud-palette-background-grey);
    min-height: 2.5rem;
}

.ribbon-tabs .mud-tab {
    min-width: auto;
    padding: 0 1rem;
    font-size: 0.8125rem;
    text-transform: none;
}

.ribbon-content {
    display: flex;
    align-items: stretch;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    overflow-x: auto;
    min-height: 4.5rem;
}

.ribbon-group {
    display: flex;
    flex-direction: column;
    min-width: fit-content;
}

.ribbon-group-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.ribbon-group-label {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    padding-top: 0.375rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.ribbon-state-field { min-width: 11rem; }
.ribbon-dropdown { min-width: 9rem; }
.ribbon-dropdown-sm { min-width: 6rem; }
.ribbon-dropdown-wide { min-width: 12rem; }
.ribbon-zip-field { width: 5.5rem; }
.ribbon-distance-field { width: 5rem; }
.ribbon-num-field { width: 8rem; }
.ribbon-num-sm { width: 5rem; }
.ribbon-money-field { width: 10rem; }
.ribbon-score-field { width: 5rem; }
.ribbon-act-field { width: 4rem; }
.ribbon-cip-field { min-width: 16rem; }

/* Major category gallery popover */
.gallery-popover {
    padding: 0.75rem;
    width: 22rem;
    max-height: 24rem;
    overflow-y: auto;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
}

.gallery-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
    transition: all 0.15s ease;
}

.gallery-cell:hover {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.gallery-cell-label {
    font-size: 0.625rem;
    line-height: 1.2;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Cloudflare Stream video embeds */
.cf-stream-video,
.content-body iframe[src*="cloudflarestream.com"],
.tiptap-editor-host iframe[src*="cloudflarestream.com"] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: 8px;
    margin: 1.5rem 0;
    background: #000;
}

/* Quiz options - force vertical layout */
.quiz-options-vertical .mud-radio-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.quiz-options-vertical .mud-radio {
    margin-bottom: 0.25rem;
}

.quiz-option-item {
    display: block;
    margin-bottom: 0.75rem;
}

/* Blazor Reconnect Modal Styles - MudBlazor Themed */
#components-reconnect-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
    backdrop-filter: blur(2px); /* Nice blur effect */
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-refused {
    display: flex; /* Show when Blazor adds these classes */
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* The inner dialog box */
#components-reconnect-modal .components-reconnect-dialog {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    padding: 24px;
    border-radius: var(--mud-default-borderradius);
    box-shadow: var(--mud-elevation-8);
    max-width: 400px;
    width: 90%;
    text-align: center;
    border: 1px solid var(--mud-palette-lines-default);
}

/* Visibility toggles based on state classes added by Blazor */
#components-reconnect-modal .show,
#components-reconnect-modal .failed,
#components-reconnect-modal .refused {
    display: none;
}

/* Reconnecting state */
#components-reconnect-modal.components-reconnect-show .show {
    display: block;
}

/* Failed state */
#components-reconnect-modal.components-reconnect-failed .failed {
    display: block;
}

/* Refused/Rejected state */
#components-reconnect-modal.components-reconnect-refused .refused {
    display: block;
}

/* Text styles */
#components-reconnect-modal p {
    color: var(--mud-palette-text-secondary);
    margin-bottom: 1rem;
}

/* Helper utility for text colors inside the modal if needed */
.text-danger {
    color: var(--mud-palette-error) !important;
}

.text-warning {
    color: var(--mud-palette-warning) !important;
}

/* Upgrade banner for free-tier users */
.upgrade-banner {
    position: fixed;
    top: 4rem;
    left: 0;
    right: 0;
    z-index: 1099;
    background-color: var(--mud-palette-primary);
    color: #FFFFFF;
    min-height: 2.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.upgrade-banner .upgrade-banner-text {
    color: #FFFFFF !important;
    letter-spacing: 0.01em;
}

.upgrade-banner .upgrade-banner-cta {
    text-transform: none;
    letter-spacing: 0.02em;
    padding-inline: 1rem;
}

/* Footer - always dark blue background with light text regardless of theme */
.site-footer {
    background-color: #2F4550;
}

.site-footer .footer-heading {
    color: #FFFFFF !important;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.site-footer .footer-link {
    color: #9CA3AF !important;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer .footer-link:hover {
    color: #FFFFFF !important;
}

.site-footer .footer-copyright,
.site-footer .footer-copyright .mud-typography {
    color: #9CA3AF !important;
}

.site-footer .footer-hidden-link,
.site-footer .footer-hidden-link.mud-typography {
    color: #9CA3AF !important;
}

.site-footer .footer-hidden-link:hover {
    color: #FFFFFF !important;
}

.site-footer .footer-bottom-divider {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.site-footer .footer-social-icon,
.site-footer .mud-icon-button {
    color: #9CA3AF !important;
    transition: color 0.2s ease;
}

.site-footer .footer-social-icon:hover,
.site-footer .mud-icon-button:hover {
    color: #FFFFFF !important;
}

/* Blazor Error UI - styled as modal overlay */
#blazor-error-ui {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
}

#blazor-error-ui[style*="display: block"],
#blazor-error-ui[style*="display:block"] {
    display: flex !important;
    animation: fadeIn 0.3s ease-out;
}

#blazor-error-ui .blazor-error-dialog {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    padding: 24px;
    border-radius: var(--mud-default-borderradius);
    box-shadow: var(--mud-elevation-8);
    max-width: 400px;
    width: 90%;
    text-align: center;
    border: 1px solid var(--mud-palette-lines-default);
}

#blazor-error-ui p {
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.5rem;
}