@import url('css/custom-properties.css');
@import url('css/public-message.css');

/* Screen-reader-only text — hidden visually but announced by assistive technology */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body {
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: clamp(14px, 0.7rem + 0.175vw, 15px) !important;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

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

.validation-message {
    color: #e50000;
}

#blazor-error-ui {
    top: 0;
    display: none;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.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;
}

.hero {
    display: flex;
    align-items: center;
}

    .hero section {
        flex: 1;
    }

.hero-left {
    padding-inline: 24px;
}

.right {
    padding-top: 30px;
}

    .right img {
        width: 100%;
        max-width: 465px;
    }

@media screen and (max-width: 1000px) {
    nav img {
        width: 100px;
    }

    nav li {
        list-style: none;
        margin: 0 8px
    }

    .hero {
        flex-direction: column;
        text-align: center;
    }

        .hero .right {
            order: -1;
            padding-bottom: 2rem;
            width: 80%;
        }
}

.site-layout-background {
    background: #fff;
}

.mybox {
    padding: 10px;
    background: rgb(228,242,255);
    border-radius: 6px;
    box-shadow: 2px 2px 4px;
}

.shadow-sm {
    box-shadow: 0px 4px 8px 4px rgb(150 147 211 / 5%);
}

.header-section {
	background: #ffffff !important;
	padding: 0 1rem !important;
    z-index: 10;
    position: absolute;
    width: 100%;
    box-shadow: 1px 13px 18px -7px rgba(var(--shadow-primary),0.07);
    -webkit-box-shadow: 1px 13px 18px -7px rgba(var(--shadow-primary),0.07);
    -moz-box-shadow: 1px 13px 18px -7px rgba(var(--shadow-primary),0.07);
}

.fail-label {
    color: #000;
}

    .fail-label:hover {
        color: #40a9ff;
    }

.fail-label-active {
    color: #1890ff;
}

.fail-label-alert {
    color: red;
}

.invalid-input {
    border-color: #dc3545;
    transition: all 0.3s ease;
}

.invalid-input:focus {
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.6);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

.card-icon {
    width: 40px;
    height: 40px;
    background: var(--card-icon-bg, rgba(49, 93, 174, 0.12));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-title {
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin: 0 !important;
}

.mud-table-cell {
    padding: 12px 0.75rem !important;
}


/* Custom Tab Styling */
.mud-tabs {
    gap: 1rem !important;
}

.mud-tabs .mud-tabs-tabbar {
    border-radius: 1rem !important;
}

.mud-tabs .mud-tabs-tabbar-content .mud-tabs-tabbar-wrapper {
    gap: 1rem !important;
    padding: 1.125rem !important;
}

.mud-tabs .mud-tab {
    border-radius: 0.8rem !important;
    overflow: hidden !important;
    margin: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 500 !important;
}

    .mud-tabs .mud-tab:hover {
        background-color: rgba(var(--shadow-primary), 0.1) !important;
    }

    .mud-tabs .mud-tab.mud-tab-active {
        background-color: rgba(var(--shadow-primary), 0.04) !important;
        box-shadow: 0 2px 9px rgba(var(--shadow-primary), 0.25) !important;
        color: var(--mud-palette-primary) !important;
        font-weight: 600 !important;
    }

    .mud-tabs .mud-tabs-panels {
        background: #FFFFFF !important;
        border-radius: 1rem !important;
    }

    .mud-tabs .mud-tab-slider {
        display: none !important;
    }

/* ------------------------------- */

/* Custom Breadcrumb Styling */
.breadcrumb-link:hover {
    color: var(--mud-palette-secondary) !important;
    text-decoration: underline !important;
}

/* Tab Panel Content Styling */
.mud-tab-panel {
    background: transparent !important;
}

/* PageHero — on phones, let the Actions slot (e.g. the tutorial button) wrap to its
   own full-width row below the title instead of squeezing beside it. */
@media (max-width: 599px) {
    .page-header-main {
        flex-wrap: wrap !important;
    }

    .page-header-actions {
        flex-basis: 100%;
        width: 100%;
        margin-top: 12px;
    }

    .page-header-actions .ahub-tutorial-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
}
/* ------------------------------- */

.mud-dialog {
    overflow-x: hidden;
}

/* Fill Grade Timeline Styling */
.mud-dialog .fill-grade-container {
    background-color: #f6f9fb;
    padding: 1rem;
}

.fill-grade-timeline .mud-card-actions {
    display: none;
}

.fill-grade-timeline .mud-step-label-icon {
    width: 36px !important;
    height: 36px !important;
}

.fill-grade-timeline .mud-step-label-icon .mud-typography-caption {
    font-size: 1rem !important;
}

.fill-grade-timeline .mud-step-label-content .mud-step-label-content-title {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}

.fill-grade-timeline .mud-step-label-content .mud-step-label-content-secondary-text {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    opacity: 0.7 !important;
}

.fill-grade-timeline .mud-stepper-nav-connector {
    margin-inline-start: 33px !important;
}

.fill-grade-timeline .mud-step {
    opacity: 0.3 !important;
}

.fill-grade-timeline .mud-step-completed, .fill-grade-timeline .mud-step.active, .fill-grade-timeline .mud-step-error {
    opacity: 1 !important;
}

/* ------------------------------- */

/* Quick Stats Cards */
.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.stat-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    animation: fadeIn 0.6s ease-out;
}

    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

.stat-card-active {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    border: 2px solid var(--mud-palette-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--shadow-primary), 0.2);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 2rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    margin-bottom: 0.25rem !important;
}

.stat-label {
    color: #64748b !important;
    font-size: 0.875rem !important;
}

.grade-reject-alert .mud-alert-message {
    width: 100%;
}

.import-info-card {
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-tertiary) 100%);
}

.mud-input-control>.mud-input-control-input-container>.mud-input-label-outlined.mud-input-label-inputcontrol {
    line-height: 1.25rem !important;
    font-size: 0.875rem;
}

/* =============================================
   Landing Page Styles
   ============================================= */

/* Vertical Landing Page - MudBlazor Version */
.vertical-landing-page {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    position: relative;
    font-family: "Noto Sans Thai", "Noto Color Emoji", "Helvetica", "Arial", sans-serif;
    background: #f8fafc;
    overflow-x: hidden;
}

/* Landing Page AppBar (public — absolute over hero) */
.landing-appbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0.75rem 0;
    background: #f8fafc;
    z-index: 100;
    border-bottom: 1px solid var(--mud-palette-divider, #e2e8f0);
}

.landing-appbar .appbar-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 3vw, 3rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.landing-appbar .mud-button {
    color: var(--mud-palette-text-primary, #1e293b) !important;
    font-weight: 500 !important;
}

.landing-appbar .brand-logo {
    filter: none;
}

/* Private Zone AppBar (MudAppBar — has its own padding) */
.modern-appbar {
    background: #f8fafc !important;
    border-bottom: 1px solid var(--mud-palette-divider, #e2e8f0) !important;
}

.modern-appbar .brand-logo {
    filter: none;
}

.appbar-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.brand-logo {
    height: 40px;
    width: auto;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-title {
    margin: 0 !important;
    font-weight: 500;
}

.brand-subtitle {
    color: rgba(0, 0, 0, 0.7) !important;
    margin: 0 !important;
}

.appbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Hero Section */
.landing-page-hero-section {
    padding: 0;
    background: #f8fafc;
    color: var(--mud-palette-text-primary, #1e293b);
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--mud-palette-divider, #e2e8f0);
}

/* Gradient container and layers — kept in DOM, visually inert */
.landing-page-hero-gradient-container,
.landing-page-hero-gradient-background,
.landing-page-hero-gradient-background::before,
.landing-page-hero-gradient-overlay {
    display: none;
}

.landing-page-hero-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 3vw, 3rem);
    position: relative;
    z-index: 10;
    width: 100%;
}

/* Split Hero Grid */
.landing-page-hero-grid {
    display: grid;
    grid-template-columns: 5fr 9fr;
    gap: clamp(2rem, 4vw, 5rem);
    align-items: center;
    padding-top: 80px;
    padding-bottom: 2rem;
}

/* Left Column - Headline + Login */
.landing-page-hero-left {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: clamp(2rem, 4vw, 3rem) 0;
    animation: heroFadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

/* Hero Label (overline) — with accent line */
.hero-label {
    color: var(--mud-palette-primary, #315DAE) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    margin-bottom: clamp(1.25rem, 2vw, 2rem);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hero-label::before {
    content: '';
    display: block;
    width: 28px;
    height: 3px;
    background: var(--mud-palette-primary, #315DAE);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Hero Headline — restrained per .impeccable.md (H2 weight 400, headings are not display-bold) */
.landing-page-hero-title {
    color: var(--mud-palette-tertiary, #003C71) !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: clamp(1.35rem, 2vw, 1.75rem);
    text-wrap: balance;
}

/* Hero Description — #475569 clears WCAG 4.5:1 on #f8fafc */
.landing-page-hero-description {
    color: #475569 !important;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem) !important;
    line-height: 1.7;
    max-width: 440px;
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

/* Login actions */
.landing-page-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 380px;
    margin-top: 1rem;
}

/* Forgot password */
.forgot-password-link {
    align-self: flex-end;
    margin-top: 1rem;
    text-decoration: none !important;
    color: var(--mud-palette-text-secondary, #64748b) !important;
    font-size: 0.78rem !important;
    font-weight: 400;
    transition: color 0.15s ease;
}

.forgot-password-link:hover {
    color: var(--mud-palette-primary, #315DAE) !important;
    text-decoration: underline !important;
}

/* Right Column - Screen Mockup */
.landing-page-hero-right {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: heroFadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
    overflow: visible;
    margin-right: clamp(-3rem, -5vw, -8rem);
    padding: 1.5rem 0;
    min-width: 0;
}

/* =============================================
   Floating Fragments Carousel — illustrative
   grade-sheet flows broken into floating pieces
   ============================================= */
.ff-carousel {
    position: relative;
    width: 100%;
    height: 540px;
    overflow: hidden;
    /* The hero grid centres text below 960px — the illustrative canvas must
       not inherit that; the card and fragments are designed left-aligned. */
    text-align: left;
    --ff-01: #003C71;
    --ff-02: #315DAE;
    --ff-03: #0085AD;
    --ff-04: #009CDE;
}

/* Fixed design canvas (880x540) — JS scales it to fit the column */
.ff-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 880px;
    height: 540px;
    transform-origin: 0 0;
}

/* subtle dotted grid backdrop */
.ff-grid-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.45;
    z-index: 0;
}

/* Each flow is a stacked layer that crossfades */
.ff-stage {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.985);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0.7s;
    pointer-events: none;
}

.ff-stage.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s;
}

/* ---- Flow tag (top-right) ---- */
.ff-flowtag {
    position: absolute;
    top: 28px;
    right: 32px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: #fff;
    border: 1px solid rgba(0, 60, 113, 0.10);
    border-radius: 999px;
    padding: 0.4rem 0.95rem 0.4rem 0.45rem;
    box-shadow: 0 2px 6px rgba(0, 60, 113, 0.06), 0 10px 26px rgba(0, 60, 113, 0.10);
}

.ff-flowtag-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ff-flowtag-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
}

.ff-flowtag--01 .ff-flowtag-num { background: var(--ff-01); }
.ff-flowtag--02 .ff-flowtag-num { background: var(--ff-02); }
.ff-flowtag--03 .ff-flowtag-num { background: var(--ff-03); }
.ff-flowtag--04 .ff-flowtag-num { background: var(--ff-04); }

/* ---- Central grade-sheet card ---- */
.ff-card {
    position: absolute;
    left: 290px;
    top: 80px;
    width: 290px;
    background: #fff;
    border-radius: 0.6rem;
    border: 1px solid rgba(0, 60, 113, 0.08);
    box-shadow:
        0 1px 3px rgba(0, 60, 113, 0.05),
        0 8px 20px rgba(0, 60, 113, 0.08),
        0 22px 48px rgba(0, 60, 113, 0.10);
    padding: 1.35rem 1.35rem 1.1rem;
    display: flex;
    flex-direction: column;
    z-index: 3;
    overflow: hidden;
    will-change: transform;
    backface-visibility: hidden;
    animation: ffFloatA 7s ease-in-out infinite;
}

.ff-card-stripe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.ff-card-stripe--01 { background: var(--ff-01); }
.ff-card-stripe--02 { background: var(--ff-02); }
.ff-card-stripe--03 { background: var(--ff-03); }
.ff-card-stripe--04 { background: var(--ff-04); }

/* status chip — submission type, colored per card header (mirrors SubjectHeaderCard) */
.ff-status-chip {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    margin-top: 0.1rem;
    letter-spacing: 0.01em;
}

.ff-status-chip--01 { background: var(--ff-01); }
.ff-status-chip--02 { background: var(--ff-02); }
.ff-status-chip--03 { background: var(--ff-03); }
.ff-status-chip--04 { background: var(--ff-04); }

.ff-card-code {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.15;
    margin-top: 0.5rem;
    letter-spacing: -0.01em;
}

.ff-card-name {
    font-size: 0.85rem;
    color: #475569;
    margin-top: 0.1rem;
}

/* title row: subject code + section chip (mirrors SubjectHeaderCard header) */
.ff-card-titlerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.ff-card-titlerow .ff-card-code {
    margin-top: 0;
}

.ff-card-section {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* credit + faculty/department subtitle (mirrors SubjectHeaderCard h6 subtitle) */
.ff-card-meta {
    font-size: 0.68rem;
    color: #64748b;
    margin-top: 0.35rem;
    line-height: 1.35;
}

.ff-card-label {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 0.85rem;
}

/* mini bar-chart (flow 01) */
.ff-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.55rem;
    height: 84px;
    margin-top: 0.7rem;
    padding-bottom: 1.2rem;
    position: relative;
}

.ff-bar {
    flex: 1;
    height: var(--h);
    position: relative;
    display: flex;
    align-items: flex-end;
}

.ff-bar-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0.25rem 0.25rem 0 0;
    background: linear-gradient(180deg, rgba(0, 60, 113, 0.55), rgba(0, 60, 113, 0.22));
}

.ff-bar:nth-child(3) .ff-bar-fill { background: linear-gradient(180deg, var(--ff-01), rgba(0, 60, 113, 0.55)); }

.ff-bar em {
    position: absolute;
    bottom: -1.2rem;
    left: 0;
    right: 0;
    text-align: center;
    font-style: normal;
    font-size: 0.6rem;
    color: #94a3b8;
}

.ff-card-total {
    font-size: 0.74rem;
    color: #64748b;
    margin-top: 0.85rem;
}

.ff-card-total strong { color: #1e293b; font-weight: 700; }

/* card rows */
.ff-rows {
    list-style: none;
    padding: 0;
    margin: 0.7rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ff-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #f1f5f9;
    border-radius: 0.35rem;
    padding: 0.42rem 0.6rem;
}

.ff-row--add { background: rgba(0, 133, 173, 0.08); }

.ff-row-id {
    font-size: 0.72rem;
    color: #475569;
    letter-spacing: 0.01em;
}

.ff-row-grade { margin-left: auto; }
/* uniform grade-chip width across all flow rows (single char vs "B+" align) */
.ff-rows .ff-chip { width: 2rem; min-width: 2rem; padding-left: 0; padding-right: 0; }

.ff-row-add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ff-03);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.ff-arrow { color: #94a3b8; font-size: 0.78rem; }

/* chips */
.ff-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0.15rem 0.42rem;
    border-radius: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.ff-chip--xs { font-size: 0.65rem; min-width: 1.1rem; padding: 0.12rem 0.3rem; margin-right: 0.4rem; }
.ff-chip--muted   { background: #e2e8f0; color: #64748b; }
.ff-chip--info    { background: rgba(0, 156, 222, 0.14); color: #036; }
.ff-chip--success { background: rgba(16, 185, 129, 0.14); color: #047857; }
.ff-chip--error   { background: rgba(239, 68, 68, 0.13); color: #b91c1c; }

.ff-card-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.55rem;
    padding: 0.42rem 0.6rem;
    border-radius: 0.35rem;
    font-size: 0.72rem;
    font-weight: 500;
}

.ff-card-status--02 { background: rgba(49, 93, 174, 0.08); color: var(--ff-02); }
.ff-card-status--04 { background: rgba(0, 156, 222, 0.10); color: #0369a1; }

.ff-dot-mark {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* =====================================================
   Floating fragments — shared shell + positions
   ===================================================== */
.ff-frag {
    position: absolute;
    z-index: 4;
    background: #fff;
    border: 1px solid rgba(0, 60, 113, 0.08);
    border-radius: 0.55rem;
    box-shadow: 0 2px 8px rgba(0, 60, 113, 0.06), 0 14px 32px rgba(0, 60, 113, 0.10);
    padding: 0.7rem 0.85rem;
    will-change: transform;
    backface-visibility: hidden;
}

/* fixed canvas slots (px within the 880x540 canvas) — pieces hug the card */
.ff-pos-tl { left: 80px;  top: 95px;  max-width: 232px; animation: ffFloatB 6s ease-in-out infinite; }
.ff-pos-bl { left: 70px;  top: 300px; max-width: 224px; animation: ffFloatC 8s ease-in-out infinite; }
.ff-pos-tr { left: 612px; top: 110px; animation: ffFloatD 5.5s ease-in-out infinite; }
.ff-pos-br { left: 600px; top: 355px; max-width: 230px; z-index: 2; animation: ffFloatE 6.5s ease-in-out infinite; }

/* independent idle float — gentle drift with a touch of rotation */
@keyframes ffFloatA { 0%, 100% { transform: translate3d(0, 0, 0); }              50% { transform: translate3d(0, -8px, 0); } }
@keyframes ffFloatB { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); } 50% { transform: translate3d(0, -10px, 0) rotate(-1deg); } }
@keyframes ffFloatC { 0%, 100% { transform: translate3d(0, 0, 0) rotate(2deg); }  50% { transform: translate3d(0, -6px, 0) rotate(3deg); } }
@keyframes ffFloatD { 0%, 100% { transform: translate3d(0, 0, 0) rotate(4deg); }  50% { transform: translate3d(0, -12px, 0) rotate(2deg); } }
@keyframes ffFloatE { 0%, 100% { transform: translate3d(0, 0, 0); }              50% { transform: translate3d(0, -9px, 0); } }

/* ---- Toast fragment (flow 01) ---- */
.ff-frag--toast { display: flex; align-items: flex-start; gap: 0.55rem; }
.ff-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 0.4rem;
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    flex-shrink: 0;
}
.ff-toast-icon svg { width: 14px; height: 14px; }
.ff-toast-body { display: flex; flex-direction: column; gap: 0.15rem; }
.ff-toast-title { font-size: 0.76rem; font-weight: 700; color: #1e293b; }
.ff-toast-sub { font-size: 0.66rem; color: #94a3b8; }

/* ---- Solid pills ---- */
.ff-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: none;
    color: #fff;
    border-radius: 999px;
    padding: 0.5rem 0.95rem;
    font-size: 0.74rem;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0, 60, 113, 0.18);
}
.ff-pill .ff-dot-mark { background: #fff; }
.ff-pill .ff-bare-icon { width: 14px; height: 14px; }
.ff-pill-emoji { font-family: "Noto Color Emoji", sans-serif; font-size: 0.95rem; line-height: 1; }
.ff-pill--solid01 { background: var(--ff-01); }
.ff-pill--solid02 { background: var(--ff-02); }
.ff-pill--solid03 { background: var(--ff-03); }
.ff-pill--solid04 { background: var(--ff-04); }

/* ---- Bare chip (time, no card bg lightened) ---- */
.ff-frag--bare {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
    color: #64748b;
}
.ff-bare-icon { width: 15px; height: 15px; flex-shrink: 0; }

/* ---- Signed-by fragment (flow 01) ---- */
.ff-signed-label { font-size: 0.62rem; letter-spacing: 0.08em; color: #94a3b8; text-transform: uppercase; }
.ff-signed-name { font-size: 0.82rem; font-weight: 700; color: #1e293b; margin-top: 0.2rem; }
.ff-signed-role { font-size: 0.66rem; color: #64748b; margin-top: 0.1rem; }

/* ---- Swap / before-after fragments ---- */
.ff-swap-label { font-size: 0.76rem; font-weight: 700; color: #1e293b; margin-bottom: 0.45rem; }
.ff-swap-body { display: flex; align-items: center; gap: 0.55rem; }
.ff-swap-old {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 0.45rem;
    background: #f1f5f9; color: #64748b; font-size: 1.05rem; font-weight: 700;
}
.ff-swap-new {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 0.45rem;
    color: #fff; font-size: 1.05rem; font-weight: 700;
}
.ff-swap-new--02 { background: var(--ff-02); }

.ff-ba-body { display: flex; align-items: flex-end; gap: 0.5rem; }
.ff-ba-body .ff-arrow { align-self: flex-end; height: 40px; display: inline-flex; align-items: center; }
.ff-ba-cell { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.ff-ba-cell em { font-style: normal; font-size: 0.6rem; color: #94a3b8; }
.ff-ba-old, .ff-ba-new {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 40px; border-radius: 0.45rem; font-size: 1.1rem; font-weight: 700;
}
.ff-ba-old { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.ff-ba-new { background: rgba(0, 156, 222, 0.14); color: #0369a1; }

/* ---- List fragment (pending I / evidence) ---- */
.ff-list-label { font-size: 0.76rem; font-weight: 700; color: #1e293b; margin-bottom: 0.4rem; }
.ff-list-label--icon { display: flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; font-weight: 700; color: #1e293b; letter-spacing: normal; text-transform: none; }
.ff-attach-icon { width: 14px; height: 14px; flex-shrink: 0; color: #0369a1; }
.ff-list-item { display: flex; align-items: center; font-size: 0.7rem; color: #475569; padding: 0.18rem 0; }
.ff-evidence-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.64rem; color: #94a3b8; padding: 0.16rem 0; }
.ff-doc-icon { flex: none; width: 12px; height: 12px; color: #94a3b8; }

/* ---- Big-number badge (flow 03) ---- */
.ff-frag--bignum { display: flex; align-items: center; gap: 0.6rem; }
.ff-bignum {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 0.5rem;
    color: #fff; font-size: 1rem; font-weight: 700; flex-shrink: 0;
}
.ff-bignum--03 { background: var(--ff-03); }
.ff-bignum-body { display: flex; flex-direction: column; gap: 0.1rem; }
.ff-bignum-title { font-size: 0.76rem; font-weight: 700; color: #1e293b; }
.ff-bignum-sub { font-size: 0.66rem; color: #94a3b8; }

/* ---- Reason fragment (flow 03) ---- */
.ff-reason-label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; font-weight: 700; color: #1e293b; margin-bottom: 0.3rem; }
.ff-note-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--ff-03); }
.ff-reason-text { font-size: 0.66rem; color: #94a3b8; line-height: 1.5; }


/* ---- Status fragment (waiting approver) ---- */
.ff-frag--status { display: flex; align-items: flex-start; gap: 0.5rem; }
.ff-status-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 0.25rem; flex-shrink: 0; }
.ff-status-dot--02 { background: #f59e0b; }
.ff-status-body { display: flex; flex-direction: column; gap: 0.12rem; }
.ff-status-note { font-size: 0.74rem; font-weight: 400; color: #64748b; line-height: 1.5; }
.ff-status-note-icon { width: 15px; height: 15px; flex-shrink: 0; margin-top: 0.05rem; color: #64748b; }
.ff-status-title { font-size: 0.76rem; font-weight: 700; color: #1e293b; }
.ff-status-sub { font-size: 0.66rem; color: #94a3b8; }

/* =====================================================
   Dots + countdown progress
   ===================================================== */
.ff-dots {
    position: absolute;
    bottom: 28px;
    right: 40px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 6;
}

.ff-dot {
    position: relative;
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    overflow: hidden;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}

.ff-dot.is-active {
    width: 44px;
    background: #e2e8f0;
}

.ff-dot-progress {
    position: absolute;
    inset: 0;
    width: 0;
    background: var(--mud-palette-primary, #315DAE);
    border-radius: 999px;
}

@keyframes ffDotProgress {
    from { width: 0; }
    to   { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    /* Idle float, auto-advance + countdown all stay on (explicitly requested);
       just shorten the crossfade between flows. */
    .ff-stage {
        transition: opacity 0.3s ease, visibility 0s;
    }
}

/* Hero Animations */
@keyframes heroFadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Skeleton (unused but preserved) */
.screen-skeleton { display: flex; gap: 1.5rem; height: 100%; }
.skeleton-sidebar { width: 180px; background: #f3f4f6; border-radius: 8px; position: relative; overflow: hidden; border: 1px solid #e5e7eb; height: 100%; }
.skeleton-sidebar::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); animation: shimmer 2s infinite; }
.skeleton-main { flex: 1; display: flex; flex-direction: column; gap: 1.5rem; height: 100%; }
.skeleton-header { height: 60px; background: #f9fafb; border-radius: 8px; position: relative; overflow: hidden; border: 1px solid #e5e7eb; }
.skeleton-header::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); animation: shimmer 2s infinite 0.2s; }
.skeleton-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; flex: 1; align-content: start; }
.skeleton-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; position: relative; overflow: hidden; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); }
.skeleton-card::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.04), transparent); animation: shimmer 2s infinite; }
.skeleton-card:nth-child(2)::after { animation-delay: 0.2s; }
.skeleton-card:nth-child(3)::after { animation-delay: 0.4s; }
@keyframes shimmer { 100% { left: 100%; } }
@keyframes gradientShift { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } }

/* Logo Section */
.logo-section { margin-top: 4rem; width: 100%; max-width: 900px; margin-inline: auto; }
.logo-container { display: flex; justify-content: center; align-items: center; gap: 2rem; flex-wrap: wrap; padding: 2rem 1rem; }
.logo-item { text-decoration: none !important; transition: transform 0.3s ease, filter 0.3s ease; animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) both; }
.logo-item:nth-child(1) { animation-delay: 0.6s; }
.logo-item:nth-child(2) { animation-delay: 0.7s; }
.logo-item:nth-child(3) { animation-delay: 0.8s; }
.logo-item:nth-child(4) { animation-delay: 0.9s; }
.logo-item:nth-child(5) { animation-delay: 1s; }
.logo-placeholder { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; min-width: 120px; min-height: 100px; transition: all 0.3s ease; cursor: pointer; }
.logo-placeholder:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.4); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 5px 15px rgba(251,146,60,0.2); }
.logo-placeholder .mud-icon-root { color: white !important; font-size: 2rem !important; transition: color 0.3s ease; }
.logo-placeholder:hover .mud-icon-root { color: #fbbf24 !important; }
.logo-text { color: rgba(255,255,255,0.9); font-size: 0.875rem; font-weight: 500; text-align: center; transition: color 0.3s ease; }
.logo-placeholder:hover .logo-text { color: white; }

@media (max-width: 768px) {
    .logo-container { gap: 1rem; }
    .logo-placeholder { min-width: 100px; min-height: 90px; padding: 1rem; }
}

/* Features Section */
.features-section { padding: 80px 0; background: #fefefe; position: relative; }
.features-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.section-header { text-align: center; margin-bottom: 4rem; }
.section-title { margin-bottom: 0.5rem !important; }
.section-subtitle { color: #6b7280 !important; margin-bottom: 3rem !important; }

.feature-card {
    height: 100%;
    border-radius: 12px !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: #fefefe !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(49, 93, 174, 0.06) !important;
    box-shadow: 0 1px 3px rgba(0, 60, 113, 0.06), 0 4px 12px rgba(0, 60, 113, 0.04) !important;
}

.feature-card::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: radial-gradient(circle, rgba(var(--shadow-primary), 0.15) 0%, transparent 70%); transform: translate(-50%, -50%); transition: width 0.6s ease, height 0.6s ease; pointer-events: none; }
.feature-card:hover::before { width: 600px; height: 600px; }
.feature-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(var(--shadow-primary), 0.06) 0%, transparent 40%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.feature-card:hover::after { opacity: 1; }
.feature-card:hover { transform: translateY(-4px) !important; box-shadow: 0 4px 12px rgba(0, 60, 113, 0.08), 0 12px 32px rgba(0, 60, 113, 0.10) !important; border-color: rgba(49, 93, 174, 0.12) !important; }
.feature-card:active { transform: translateY(-2px) !important; }

.feature-content { padding: 2.5rem 2rem !important; text-align: center; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.feature-icon-wrapper { position: relative; display: flex; align-items: center; justify-content: center; perspective: 1000px; background-color: #eff6fb; width: 100%; height: 140px; border-radius: 0.7rem; margin-bottom: 0.5rem; }
.feature-icon { font-size: 2.5rem !important; color: white !important; }
.feature-title { font-weight: 600 !important; margin-bottom: 0.75rem !important; color: #1f2937 !important; }
.feature-content .feature-description { color: #6b7280 !important; line-height: 1.6 !important; opacity: 0.4 !important; }

/* Workflow Section */
.workflow-section { padding: 80px 0; background: white; }
.workflow-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

/* Contact Section */
.contact-section {
    padding: clamp(60px, 8vw, 100px) 0 !important;
    background: #f7f9fc;
    position: relative;
    overflow: hidden;
    min-height: auto;
    /* Reveal animation — hidden until .is-visible added by IntersectionObserver */
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered campus card reveal */
.contact-section .campus-contact-card {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-section.is-visible .campus-contact-card:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.10s; }
.contact-section.is-visible .campus-contact-card:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.20s; }
.contact-section.is-visible .campus-contact-card:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.30s; }
.contact-section.is-visible .campus-contact-card:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.40s; }
.contact-section.is-visible .campus-contact-card:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.50s; }

@media (prefers-reduced-motion: reduce) {
    .contact-section,
    .contact-section .campus-contact-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

.contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(49, 93, 174, 0.06);
    pointer-events: none;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 3vw, 3rem);
    position: relative;
    z-index: 1;
}

/* Contact header — mirrors hero design language */
.contact-header {
    margin-bottom: clamp(2rem, 3vw, 3rem);
}

.contact-label {
    color: var(--mud-palette-primary, #315DAE) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.contact-label::before {
    content: '';
    display: block;
    width: 28px;
    height: 3px;
    background: var(--mud-palette-primary, #315DAE);
    border-radius: 2px;
    flex-shrink: 0;
}

.contact-title {
    color: var(--mud-palette-tertiary, #003C71) !important;
    font-size: clamp(1.5rem, 2.2vw, 2rem) !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em;
    margin: 0 !important;
}

/* Campus contact card grid */
.campus-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    width: 100%;
}

.campus-contact-card {
    background: #fefefe;
    border: 1px solid rgba(49, 93, 174, 0.06);
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(0, 60, 113, 0.04);
}

.campus-contact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 60, 113, 0.06), 0 8px 24px rgba(0, 60, 113, 0.04);
}

/* Card header */
.campus-contact-card-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.campus-contact-card-campus {
    font-weight: 700 !important;
    color: var(--mud-palette-tertiary, #003C71) !important;
    font-size: 1rem !important;
    line-height: 1.3;
}

.campus-contact-card-name {
    color: var(--mud-palette-text-secondary, #64748b) !important;
    font-size: 0.82rem !important;
    line-height: 1.4;
}

/* Primary actions — phone and email */
.campus-contact-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.campus-contact-action {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.15s ease;
    color: var(--mud-palette-text-primary, #1e293b);
}

.campus-contact-action--phone {
    background: rgba(49, 93, 174, 0.05);
}

.campus-contact-action--phone:hover {
    background: rgba(49, 93, 174, 0.10);
}

.campus-contact-action--email {
    background: rgba(0, 156, 222, 0.05);
}

.campus-contact-action--email:hover {
    background: rgba(0, 156, 222, 0.10);
}

.campus-contact-action .mud-icon-root {
    color: var(--mud-palette-primary, #315DAE) !important;
    flex-shrink: 0;
}

/* Secondary links — social/map icons */
.campus-contact-card-links {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(49, 93, 174, 0.06);
}

.campus-contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(49, 93, 174, 0.04);
    transition: background 0.15s ease;
    text-decoration: none !important;
}

.campus-contact-link:hover {
    background: rgba(49, 93, 174, 0.10);
}

.campus-contact-link .mud-icon-root {
    font-size: 1rem !important;
    color: var(--mud-palette-text-secondary, #64748b) !important;
}

/* Footer — compact */
.footer-section {
    background: var(--mud-palette-tertiary, #003C71);
    color: white;
    padding: 2rem 0 1.25rem;
    position: relative;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 3vw, 3rem);
}

/* Top row: brand + links on left, legal on right — wraps on narrow screens */
.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    flex-wrap: wrap;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Brand + links grouped together */
.footer-primary {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.footer-separator {
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.9rem;
}

.footer-description {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.75rem !important;
    white-space: nowrap;
}

/* Footer links */
.footer-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.footer-link,
.footer-link.mud-link {
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
    font-size: 0.82rem !important;
    transition: color 0.15s ease !important;
}

.footer-link:hover,
.footer-link.mud-link:hover {
    color: rgba(255, 255, 255, 1) !important;
    text-decoration: none !important;
}

/* Legal links row */
.footer-legal {
    display: flex;
    align-items: center;
}

.footer-legal .mud-button {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.72rem !important;
    padding: 0.15rem 0.4rem !important;
    min-width: auto !important;
    filter: none !important;
}

.footer-legal .mud-button:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    background: transparent !important;
}

/* Bottom row: copyright + support */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.75rem !important;
}

.footer-support {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.75rem !important;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.footer-support-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.footer-support-icon {
    width: 0.95rem !important;
    height: 0.95rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.footer-support-link,
.footer-support-link.mud-link {
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
    font-size: 0.75rem !important;
    transition: color 0.15s ease !important;
}

.footer-support-link:hover,
.footer-support-link.mud-link:hover {
    color: rgba(255, 255, 255, 1) !important;
    text-decoration: underline !important;
}

.footer-support-link:focus-visible,
.footer-support-link.mud-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
    border-radius: 0.15rem;
}

.footer-support-separator {
    color: rgba(255, 255, 255, 0.35);
}

.footer-support-ext {
    color: rgba(255, 255, 255, 0.45);
}

/* Landing Page Responsive — Tablet */
@media (max-width: 960px) {
    .landing-appbar .appbar-container { padding: 0 1rem; }
    .landing-page-hero-grid { grid-template-columns: 1fr; gap: 2rem; padding-top: 100px; padding-bottom: 2rem; text-align: center; }
    .landing-page-hero-left { align-items: center; }
    .landing-page-hero-description { max-width: 480px; }
    .landing-page-hero-actions { align-items: center; max-width: 100%; }
    .landing-page-hero-right { margin-right: 0; justify-content: center; padding: 0; }
    /* Canvas is scaled to fit by initFloatingFragments(); nothing to override here. */
    .skeleton-cards { grid-template-columns: repeat(2, 1fr); }
    .skeleton-sidebar { width: 150px; }
    .features-section, .workflow-section, .contact-section { padding: 60px 0; }
    .section-header { margin-bottom: 2rem; }
    .footer-primary { align-items: center; }
    .footer-top { flex-direction: column; align-items: center; }
    .footer-bottom { justify-content: center; }
}

/* Landing Page Hover Effects */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .feature-icon-wrapper { animation: float 6s ease-in-out infinite; }
    @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-4px); } }
}

/* Landing Page Responsive — Mobile */
@media (max-width: 600px) {
    .vertical-landing-page { width: 100%; left: 0; transform: none; }
    .appbar-brand { flex-direction: column; text-align: center; gap: 0.5rem; }
    .brand-text { align-items: center; }
    .landing-page-hero-grid { gap: 1.5rem; padding-top: 80px; }
    .hero-label { font-size: 0.7rem !important; margin-bottom: 0.75rem; }
    .landing-page-hero-title { margin-bottom: 1rem; }
    .landing-page-hero-description { margin-bottom: 1.5rem; }
    /* On phones JS zooms the canvas onto the card; the visible window is
       canvas x ≈ 195–675 (centred on the card), so everything anchored to
       the canvas edges falls outside it. Re-anchor to the card instead:
       flow label above, page dots below, and keep the two compact floating
       pieces — the pill peeking over the card's top-right corner, the info
       chip tucked behind the bottom-left (it sits under the card, z-index 2).
       The two large list fragments (tl/bl) have no room beside the card. */
    .ff-grid-bg { display: none; }
    .ff-pos-tl, .ff-pos-bl { display: none; }
    /* 205 = visible window's left edge (195) + a small inset, so the label
       hugs the left like the desktop layout hugs the right. */
    .ff-flowtag { right: auto; left: 205px; top: 24px; }
    .ff-pos-tr { left: auto; right: 215px; top: 74px; }
    .ff-pos-br { left: 205px; top: auto; bottom: 34px; max-width: 175px; }
    .ff-dots { right: auto; left: 435px; transform: translateX(-50%); }
    .skeleton-cards { grid-template-columns: 1fr; gap: 0.75rem; }
    .skeleton-sidebar { display: none; }
    .features-section, .workflow-section, .contact-section { padding: 40px 0; }
    .contact-title { font-size: 1.8rem !important; }
    .section-header { margin-bottom: 2rem; }
    .feature-card { margin-bottom: 1rem; }
    .footer-links { flex-direction: column; gap: 0.5rem; }
}

/* Landing Page Animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInFromTop { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.landing-appbar { animation: slideInFromTop 0.6s ease-out; }
.feature-card { animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) both; }

/* Staggered feature card animations */
.mud-grid-item:nth-child(1) .feature-card { animation-delay: 0.1s; }
.mud-grid-item:nth-child(2) .feature-card { animation-delay: 0.2s; }
.mud-grid-item:nth-child(3) .feature-card { animation-delay: 0.3s; }
.mud-grid-item:nth-child(4) .feature-card { animation-delay: 0.4s; }
.mud-grid-item:nth-child(5) .feature-card { animation-delay: 0.5s; }
.mud-grid-item:nth-child(6) .feature-card { animation-delay: 0.6s; }


/* Landing Page Global Overrides */
html { scroll-behavior: smooth; }
body { margin: 0 !important; padding: 0 !important; }

/* Global guard: no page should scroll the whole viewport sideways. If any
   descendant is wider than the viewport (wide data grids, an over-extended
   MudBadge, a non-wrapping row), clip the page-level overspill at the main
   content region instead of letting it widen <body>. Inner scrollers keep
   their OWN horizontal scroll (e.g. .mud-table-container { overflow-x: auto }),
   so no content is hidden. overflow-x: clip (not hidden/auto) creates no
   scroll container, so sticky headers and root-level popovers/dialogs are
   unaffected. */
.mud-main-content {
    max-width: 100%;
    overflow-x: clip;
}

/* =============================================
   Login Component Styles
   ============================================= */

/* Login Container */
.login-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Login Divider */
.login-divider { display: flex; align-items: center; gap: 0.75rem; margin: 0.75rem 0; }
.divider-line { flex: 1; height: 1px; background: rgba(49, 93, 174, 0.1); }
.divider-text { color: var(--mud-palette-text-secondary, #64748b); font-size: 0.8rem; font-weight: 500; padding: 0; white-space: nowrap; }

@media (max-width: 480px) {
    .login-container { padding: 0 0.5rem; }
    .login-divider { margin: 0.5rem 0; }
}

@media (prefers-reduced-motion: reduce) {
    .login-container * { animation: none !important; transition: none !important; }
    .landing-page-hero-left,
    .landing-page-hero-right,
    .landing-appbar,
    .feature-card { animation: none !important; }
}

@media (prefers-contrast: high) {
    .divider-line { background: currentColor; }
}

/* =============================================
   OAuth Login Button Styles
   ============================================= */

.modern-login-button-container { width: 100%; }

.modern-login-button {
    position: relative;
    overflow: hidden;
    font-weight: 600;
    background: var(--mud-palette-primary, #315DAE) !important;
    box-shadow: 0 1px 3px rgba(0, 60, 113, 0.12), 0 4px 12px rgba(0, 60, 113, 0.08);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: none !important;
}

.modern-login-button:hover { transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 60, 113, 0.16), 0 8px 24px rgba(0, 60, 113, 0.12) !important; }
.modern-login-button:active { transform: translateY(0) !important; }
.modern-login-button:disabled { transform: none !important; opacity: 0.75 !important; cursor: not-allowed !important; }

.login-button-content { display: flex; align-items: center; width: 100%; padding: 0 4px; gap: 0.75rem; }
.login-button-icon { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; background: rgba(255, 255, 255, 0.92); border-radius: 8px; }
.login-button-text { flex: 1; text-align: left; }
.login-text-main { font-size: 0.95rem; font-weight: 600; color: white; line-height: 1.3; }
.login-text-sub { font-size: 0.72rem; color: rgba(255, 255, 255, 0.7); font-weight: 400; line-height: 1.2; margin-top: 1px; }
.login-button-arrow { display: flex; align-items: center; justify-content: center; opacity: 0.6; transition: opacity 0.2s ease, transform 0.2s ease; }
.modern-login-button:hover .login-button-arrow { opacity: 1; transform: translateX(3px); }
.modern-login-button:disabled .login-button-icon { background: rgba(255, 255, 255, 0.2); }
.modern-login-button:focus-visible { outline: 2px solid var(--mud-palette-primary, #315DAE); outline-offset: 2px; }

@media (max-width: 480px) {
    .modern-login-button { height: 52px !important; }
    .login-text-main { font-size: 0.9rem; }
    .login-button-icon { min-width: 32px; height: 32px; }
}

@media (prefers-contrast: high) { .modern-login-button { border: 2px solid white !important; } }
@media (prefers-reduced-motion: reduce) { .modern-login-button, .login-button-arrow { transition: none !important; } .modern-login-button:hover { transform: none !important; } }

/* =============================================
   Dev Login (UnAuthenLogin) Styles
   ============================================= */

.dev-login-wrapper { width: 100%; }

/* Row layout — no ::deep needed in global CSS */
.dev-login-wrapper .dev-login-row { display: flex; flex-direction: row; align-items: flex-start; gap: 0.5rem; width: 100%; }
.dev-login-wrapper .dev-input-container { flex: 1; min-width: 0; }

/* Kill MudTextField spacing */
.dev-login-wrapper .mud-input-control { margin: 0 !important; }
.dev-login-wrapper .mud-input-helper-text { margin-top: 2px !important; min-height: 0 !important; }

/* Input */
.dev-login-wrapper .mud-input-root { background: #fefefe !important; border-radius: 8px !important; }
.dev-login-wrapper .mud-input-root-outlined { border: 1px solid #e2e8f0 !important; }
.dev-login-wrapper .mud-input-root:hover .mud-input-outlined-border { border-color: rgba(245, 158, 11, 0.4) !important; }
.dev-login-wrapper .mud-input-root.mud-input-focused .mud-input-outlined-border { border-color: #f59e0b !important; border-width: 2px !important; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.08) !important; }
.dev-login-wrapper .mud-input-slot { padding: 0 12px !important; font-size: 0.88rem !important; height: 40px !important; }
.dev-login-wrapper input { font-size: 0.88rem !important; }
.dev-login-wrapper .mud-input-label { display: none; }

/* Dev Button */
.dev-login-wrapper .dev-login-button { flex-shrink: 0; transition: transform 0.15s ease, box-shadow 0.15s ease !important; box-shadow: none !important; }
.dev-login-wrapper .dev-login-button:hover:not(:disabled) { background: #d97706 !important; transform: translateY(-1px) !important; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2) !important; }
.dev-login-wrapper .dev-login-button:active:not(:disabled) { transform: translateY(0) !important; }
.dev-login-wrapper .dev-login-button:disabled { background: #d4d4d8 !important; cursor: not-allowed; }
.dev-login-wrapper .dev-login-button:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }

@media (prefers-contrast: high) { .dev-login-wrapper .mud-input-root-outlined { border: 2px solid #000 !important; } }
@media (prefers-reduced-motion: reduce) { .dev-login-wrapper .dev-login-button { transition: none !important; } }
@media (max-width: 360px) { .dev-login-wrapper .dev-login-row { flex-direction: column; } .dev-login-wrapper .dev-login-button { width: 100%; } }

/* =============================================
   Driver.js — PSU theme overrides
   ============================================= */

.driver-popover {
    border-radius: 12px;
    font-family: "Noto Sans Thai", "Noto Color Emoji", "Helvetica", "Arial", sans-serif;
    font-size: 0.875rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.10);
    border: 1px solid #dde6f5;
    max-width: 500px;
    padding: 0;
    overflow: hidden;
}

.driver-popover .driver-popover-title {
    background-color: #315DAE;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 400;
    font-family: inherit;
    padding: 14px 18px;
    margin: 0;
    border-bottom: none;
    text-align: center;
}

.driver-popover .driver-popover-description {
    font-size: 0.8125rem;
    color: #475569;
    line-height: 1.65;
    font-family: inherit;
    white-space: pre-line;
    padding: 14px 18px 0;
}

.driver-popover-footer {
    border-top: 1px solid #f1f5f9;
    margin-top: 14px;
    padding: 12px 18px 16px;
    align-items: center;
}

.driver-popover .driver-popover-progress-text {
    font-size: 0.7rem;
    color: #fff;
    background-color: #315DAE;
    padding: 2px 10px;
    border-radius: 20px;
    font-family: inherit;
    font-weight: 500;
}

.driver-popover .driver-popover-next-btn,
.driver-popover .driver-popover-prev-btn {
    background: transparent;
    border-radius: 7px;
    font-size: 0.825rem;
    font-family: inherit;
    font-weight: 500;
    padding: 7px 14px;
    min-width: 90px;
    text-align: center;
    color: #315DAE;
    border: 1.5px solid #c8d8f0;
    text-shadow: none;
    letter-spacing: 0.01em;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.driver-popover .driver-popover-next-btn:hover,
.driver-popover .driver-popover-prev-btn:hover {
    background-color: #f0f5ff;
    border-color: #315DAE;
}

.driver-popover .driver-popover-done-btn {
    background-color: #10b981;
    border-color: #10b981;
    border-radius: 7px;
    font-size: 0.825rem;
    font-family: inherit;
    font-weight: 600;
    padding: 7px 16px;
    min-width: 90px;
    text-align: center;
    color: #fff;
    text-shadow: none;
    letter-spacing: 0.01em;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.driver-popover .driver-popover-done-btn:hover {
    background-color: #0ea271;
    border-color: #0ea271;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.driver-popover-close-btn {
    color: #94a3b8;
    border-radius: 6px;
    transition: color 0.15s, background-color 0.15s;
}

.driver-popover-close-btn:hover {
    color: #1e293b;
    background-color: #f1f5f9;
}

@media (prefers-reduced-motion: reduce) {
    .driver-overlay,
    .driver-popover {
        transition: none !important;
        animation: none !important;
    }
}

/* Tutorial guide button — shared across all pages that use driver.js tutorials */
.ahub-tutorial-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.775rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.ahub-tutorial-btn:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, white);
}

.driver-popover .driver-skip-all-btn {
    background: transparent;
    border-radius: 7px;
    font-size: 0.825rem;
    font-family: inherit;
    font-weight: 500;
    padding: 7px 14px;
    min-width: 90px;
    text-align: center;
    color: #315DAE;
    border: 1.5px solid #c8d8f0;
    text-shadow: none;
    letter-spacing: 0.01em;
    cursor: pointer;
    margin-left: 12px;
    transition: background-color 0.15s, border-color 0.15s;
}

.driver-popover .driver-skip-all-btn:hover {
    background-color: #f0f5ff;
    border-color: #315DAE;
}

.driver-popover .driver-popover-navigation-btns {
    margin-left: 12px;
}

/* Approver hub toolbar (total / approve-all / search).
   This is a plain flex row — NOT a MudStack — on purpose: MudStack writes an
   inline `flex-direction: row`, which an external class cannot override without
   !important. Owning the flex container here lets the phone layout reorder
   cleanly. The DOM order is [search, approve-all]; desktop keeps that order on
   one right-aligned line, phones reverse it so "approve all" sits on top of the
   full-width search field. */
.approve-toolbar-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.approve-search-field {
    width: 25rem;
    max-width: 100%;
}

/* Phone-only companion bar that restores select-all + sort for the approval
   data grid: MudBlazor's stacked-cell layout drops the column-header row, so the
   SelectColumn "select all" checkbox and the sortable headers disappear. The bar
   lives inside a SmAndUp MudHidden in each *ApprovalSubmit, so it never shows on
   desktop and needs no media query of its own. */
.approve-mobile-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Sort menu item: label on the left, the "current" check on the right. The
   check keeps its slot (visibility, not display) so labels stay aligned. */
.approve-mobile-sort-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-width: 9rem;
}

/* Phones only (xs). Matches both the PageHero wrap above and the approver
   tab selector, which switch from horizontal tabs to the vertical selector at
   the sm boundary (600px) — keep all three in lockstep so there is no width
   band where the layouts disagree. */
@media (max-width: 599px) {
    /* Restore the page "card" on phones: at full width the Outlined data grid
       reads as a surface, but in the stacked small-device layout the toolbar
       would otherwise float on the bare page background. Wrap everything back
       into one surface card. */
    .approve-grid-surface {
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 0.75rem;
    }

    /* Toolbar drops to its own full-width line and stacks vertically. */
    .approve-toolbar-actions {
        flex: 1 1 100%;
        flex-direction: column-reverse;
        align-items: stretch;
        width: 100%;
    }

    .approve-search-field {
        width: 100%;
    }

    /* Stacked-cell layout (MudDataGrid small-device mode) renders each cell as
       "label  …  value". Long values (e.g. the subject owner) are forced to
       text-align: start by MudBlazor, so they sprawl left instead of hugging
       the right edge. Right-align the value content and let it wrap. Targeting
       the cell's child element beats the inherited start alignment without
       !important. */
    .approve-grid-surface :is(.mud-xs-table, .mud-sm-table, .mud-md-table, .mud-lg-table, .mud-xl-table, .mud-xxl-table) .mud-table-cell > * {
        text-align: end;
        min-width: 0;
        overflow-wrap: anywhere;
    }

}

/* Standalone version of the stacked-cell fix above, for grids outside the
   approver surface (edit-grade-i section table, the AddGradeIDialog student
   list, …). Put it on the MudDataGrid itself via Class="grid-stack-align-end".
   Only use it on grids that actually stack on phones (Breakpoint = Xs, the
   default). 600px (not 599) because MudBlazor's own stacked-mode media query
   is max-width: 600px — keep the two in lockstep. */
@media (max-width: 600px) {
    /* Column CellStyle widths (width: 48px / 155px …) are emitted as INLINE
       styles on the td. In stacked mode they shrink each row-cell to a sliver
       pinned to the left edge — this, not text-align, is why values and the
       select checkbox sit left. !important is required to beat inline styles. */
    .grid-stack-align-end .mud-table-cell {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* MudBlazor forces text-align: start !important on the stacked cell; long
       wrapped values then sprawl left. Right-align the value content (the
       cell's child element is outside that !important rule). */
    .grid-stack-align-end .mud-table-cell > * {
        text-align: end;
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

/* Approval-history grid toolbar (total / status filter / search). Same plain-
   flex rationale as .approve-toolbar-actions above: MudStack writes an inline
   flex-direction that an external class can't override without !important, so we
   own the flex container here. Desktop: total on the left, the two filters on
   one right-hand line. The history grid reuses .approve-grid-surface for the
   phone card + stacked-cell alignment fix. */
.hist-toolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.hist-toolbar-filters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.hist-filter-status {
    width: 150px;
    max-width: 100%;
}

.hist-filter-search {
    width: 240px;
    max-width: 100%;
}

/* Phones only (xs) — same 600px boundary as the approver layouts above. */
@media (max-width: 599px) {
    /* Filters drop to their own full-width line and stack in natural order
       (status above search), each control full width. */
    .hist-toolbar-filters {
        flex: 1 1 100%;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .hist-filter-status,
    .hist-filter-search {
        width: 100%;
    }
}

/* Edit-grade-i filter bar (show courses / faculty / study level / search).
   Self-adapting grid: tracks auto-fit to the available width so the four
   filters land as 4-up on wide desktops, then 3-/2-up on tablets, without
   the uneven wrapping a fixed-width flex row produced at in-between sizes.
   The phone breakpoint below forces a single column. */
.gei-filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: center;
    justify-items: stretch;
    gap: 1rem;
}

/* Each filter fills its grid cell; widths are driven by the track, not here. */
.gei-filter-show,
.gei-filter-faculty,
.gei-filter-level,
.gei-filter-search {
    width: 100%;
    min-width: 0;
}

/* Phones only (xs) — single column so the dense dropdowns aren't cramped.
   Same 600px boundary as the approver layouts above. */
@media (max-width: 599px) {
    .gei-filter-bar {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}