@import '../_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

/* =============================================================
   NDSU Brand Palette — CSS Custom Properties
   Primary: NDSU Green + NDSU Yellow
   Secondary/expanded palette available for component authors
   ============================================================= */
:root {
    --accent-base-color: #FFC425;
    --neutral-base-color: #f5f5f5;

    /* Primary */
    --ndsu-green: #005835;
    --ndsu-yellow: #FFC425;

    /* Secondary / expanded */
    --ndsu-dark-green: #003524;
    --ndsu-lime-green: #BED738;
    --ndsu-teal: #1A8BA0;
    --ndsu-lemon-yellow: #FEF389;
    --ndsu-sage: #A0B878;
    --ndsu-pale-sage: #D7E5C8;
    --ndsu-rust: #BE5E27;
    --ndsu-morning-sky: #90D9F7;
    --ndsu-night: #0F3748;

    /* =============================================================
       NDSU Brand Fonts (Google Font alternatives per brand guidelines)
       Display  : Young Serif   → replaces New Spirit (headlines)
       Eyebrow  : Antonio Bold  → native Google Font (eyebrows / sub-heads)
       Body/Sub : Montserrat    → replaces Gotham (body, sub-heads)
       Formal   : EB Garamond  → replaces Adobe Garamond Pro
       CTA      : Permanent Marker → replaces Chantal (use sparingly)
       ============================================================= */
    --font-display:  'Young Serif', Georgia, serif;
    --font-eyebrow:  'Antonio', 'Arial Narrow', Arial, sans-serif;
    --font-body:     'Montserrat', 'Segoe UI', Arial, sans-serif;
    --font-formal:   'EB Garamond', Georgia, serif;
    --font-cta:      'Permanent Marker', cursive;

    /* Bootstrap 5.3 font overrides */
    --bs-body-font-family: var(--font-body);
    --bs-heading-font-family: var(--font-display);
}

/* =============================================================
   Bootstrap ↔ FluentUI CSS Variable Integration
   Overrides Bootstrap 5.3 CSS custom properties so that both
   design systems share the same palette.  These rules come
   after bootstrap.min.css in index.html and therefore win.

   Colour key:
     Primary   = NDSU Yellow  #FFC425  (≡ FluentUI accent base)
     Secondary = NDSU Green   #005835  (≡ brand / header colour)
     Body bg   = FluentUI neutral-layer-1   (near-white at runtime)
     Body text = FluentUI neutral-foreground-rest (near-black at runtime)
     Borders   = FluentUI neutral-stroke-rest
     Danger    = FluentUI error token

   Where a Bootstrap property requires an RGB triplet (for rgba()
   opacity calculations) a hard-coded fallback is provided; the
   CSS var() is used so FluentUI's runtime value wins when set.
   ============================================================= */
:root {
    /* ── Primary → NDSU Yellow (= FluentUI accent base) ────── */
    --bs-primary: #FFC425;
    --bs-primary-rgb: 255, 196, 37;
    --bs-primary-text-emphasis: #4d3700;
    /* dark amber, WCAG AA on subtle bg */
    --bs-primary-bg-subtle: #fff8dc;
    --bs-primary-border-subtle: #ffe082;

    /* ── Secondary → NDSU Green ─────────────────────────────── */
    --bs-secondary: #005835;
    --bs-secondary-rgb: 0, 88, 53;
    --bs-secondary-text-emphasis: #002e1b;
    --bs-secondary-bg-subtle: #d9efe4;
    --bs-secondary-border-subtle: #8bcaac;

    /* ── Links → FluentUI accent foreground (dark amber) ────── */
    --bs-link-color: var(--accent-foreground-rest, #7a5500);
    --bs-link-color-rgb: 122, 85, 0;
    --bs-link-hover-color: var(--accent-foreground-rest, #5c4000);

    /* ── Body background & text → FluentUI neutral layers ───── */
    --bs-body-bg: var(--neutral-layer-1, #ffffff);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: var(--neutral-foreground-rest, #212529);
    --bs-body-color-rgb: 33, 37, 41;

    /* ── Elevated surfaces → FluentUI neutral layers ─────────── */
    --bs-secondary-bg: var(--neutral-layer-2, #f5f5f5);
    --bs-tertiary-bg: var(--neutral-layer-3, #f0f0f0);

    /* ── Borders → FluentUI stroke token ────────────────────── */
    --bs-border-color: var(--neutral-stroke-rest, #dee2e6);

    /* ── Danger / validation → FluentUI error token ─────────── */
    --bs-danger: var(--error, #d13438);
    --bs-danger-rgb: 209, 52, 56;
    --bs-form-invalid-color: var(--error, #d13438);
    --bs-form-invalid-border-color: var(--error, #d13438);

    /* ── Warning → NDSU Yellow (same as primary / accent) ───── */
    --bs-warning: #FFC425;
    --bs-warning-rgb: 255, 196, 37;

    /* ── Border radius → match FluentUI's 4 px default ──────── */
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 2px;
    --bs-border-radius-lg: 6px;
    --bs-border-radius-xl: 8px;

    /* ── Focus ring → accent colour at 35 % opacity ─────────── */
    --bs-focus-ring-color: rgba(255, 196, 37, 0.35);
}

/* Primary button: yellow fill needs dark text for WCAG contrast  */
.btn-primary {
    --bs-btn-color: #1a1200;
    --bs-btn-hover-color: #1a1200;
    --bs-btn-active-color: #1a1200;
    --bs-btn-disabled-color: #5c4400;
    --bs-btn-bg: #FFC425;
    --bs-btn-hover-bg: #e6b020;
    --bs-btn-active-bg: #ccaa1e;
    --bs-btn-border-color: #FFC425;
    --bs-btn-hover-border-color: #e6b020;
    --bs-btn-active-border-color: #ccaa1e;
    --bs-btn-focus-shadow-rgb: 255, 196, 37;
}

/* Outline-primary: yellow stroke with dark amber text */
.btn-outline-primary {
    --bs-btn-color: #7a5500;
    --bs-btn-border-color: #FFC425;
    --bs-btn-hover-color: #1a1200;
    --bs-btn-hover-bg: #FFC425;
    --bs-btn-hover-border-color: #FFC425;
    --bs-btn-focus-shadow-rgb: 255, 196, 37;
}

/* Badge with primary background: dark text for contrast          */
.text-bg-primary {
    color: #1a1200 !important;
}

/* Tables: pull surface and border colours from FluentUI tokens   */
.table {
    --bs-table-bg: var(--neutral-layer-1, #ffffff);
    --bs-table-striped-bg: var(--neutral-layer-2, #f5f5f5);
    --bs-table-border-color: var(--neutral-stroke-subtle, #e0e0e0);
}

/* =============================================================
   Global typography — NDSU brand fonts
   Bootstrap override: --bs-body-font-family (set on :root above)
   FluentUI override:  --body-font (set on body below)
   ============================================================= */
body {
    /* FluentUI Reboot reads --body-font for font-family */
    --body-font: var(--font-body);
    font-family: var(--font-body);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    margin: 0;
}

/* Headings: display font (Young Serif) for h1, Antonio Bold for h2–h3,
   Montserrat SemiBold for h4–h6 — matching NDSU type hierarchy */
h1, .h1 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h2, .h2,
h3, .h3 {
    font-family: var(--font-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: var(--font-body);
    font-weight: 600;
}

/* Brand utility classes ---------------------------------------- */
/* Headline / display copy */
.font-display {
    font-family: var(--font-display) !important;
    font-weight: 600;
}

/* Eyebrow / sub-headline (Antonio Bold, all-caps) */
.font-eyebrow {
    font-family: var(--font-eyebrow) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Sub-head / body leader (Montserrat Medium) */
.font-subhead {
    font-family: var(--font-body) !important;
    font-weight: 500;
}

/* Standard body copy (Montserrat Regular) */
.font-body {
    font-family: var(--font-body) !important;
    font-weight: 400;
}

/* Formal / elegant copy (EB Garamond) */
.font-formal {
    font-family: var(--font-formal) !important;
    font-weight: 400;
}

/* CTA / textural element — use sparingly (Permanent Marker) */
.font-cta {
    font-family: var(--font-cta) !important;
    font-weight: 400;
}

/* =============================================================
   Header — NDSU Green background, white text
   ============================================================= */
fluent-header,
.psep-header {
    background-color: var(--ndsu-green) !important;
    color: #ffffff;
    /* padding: 0 1rem; */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: space-between; */
}

.psep-header-logo {
    height: 50px;
    width: auto;
    display: block;
}

.psep-header-user {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-left: auto;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.92);
}

.psep-header-user-label {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* =============================================================
   Footer — Dark Green background
   ============================================================= */
footer,
fluent-footer {
    background-color: var(--ndsu-dark-green) !important;
    color: #ffffff;
    align-items: center;
    padding: 10px 16px;
}

.psep-footer-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
}

.navmenu-icon {
    display: none;
}

.main {
    min-height: calc(100dvh - 106px);
    color: var(--neutral-foreground-rest);
    /* align-items: stretch !important; */
}

.body-content {
    /* align-self: stretch; */
     /* !important; */
    /* display: flex; */
}

footer {
    background-color: var(--ndsu-dark-green);
    color: #ffffff;
    align-items: center;
    padding: 10px 16px;
}

.alert {
    border: 1px dashed var(--accent-fill-rest);
    padding: 5px;
}


#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    margin: 20px 0;
}

#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::before {
    content: "An error has occurred. "
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

code {
    color: #c02d76;
}

@media (max-width: 600px) {
    .header-gutters {
        margin: 0.5rem 3rem 0.5rem 1.5rem !important;
    }

    [dir="rtl"] .header-gutters {
        margin: 0.5rem 1.5rem 0.5rem 3rem !important;
    }

    .main {
        flex-direction: column !important;
        row-gap: 0 !important;
    }

    nav.sitenav {
        width: 100%;
        height: 100%;
    }

    #main-menu {
        width: 100% !important;
    }

    #main-menu>div:first-child:is(.expander) {
        display: none;
    }

    .navmenu {
        width: 100%;
    }

    .psep-header-user {
        font-size: 0.8rem;
        max-width: 45vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .psep-header-user-label {
        display: none;
    }

    #navmenu-toggle {
        appearance: none;
    }

    #navmenu-toggle~nav {
        display: none;
    }

    #navmenu-toggle:checked~nav {
        display: block;
    }

    .navmenu-icon {
        cursor: pointer;
        z-index: 10;
        display: block;
        position: absolute;
        top: 15px;
        left: unset;
        right: 20px;
        width: 20px;
        height: 20px;
        border: none;
    }

    [dir="rtl"] .navmenu-icon {
        left: 20px;
        right: unset;
    }
}

/* =============================================================
   Bootstrap 5 + FluentUI bridge utility classes
   ============================================================= */

/* FluentUI-variable colours */
.psep-fg-rest {
    color: var(--neutral-foreground-rest);
}

.psep-fg-hint {
    color: var(--neutral-foreground-hint);
}

.psep-fg-accent {
    color: var(--accent-foreground-rest);
}

.psep-fg-error {
    color: var(--error, #d13438);
}

.psep-bg-layer-2 {
    background: var(--neutral-layer-2);
}

.psep-border-rest {
    border: 1px solid var(--neutral-stroke-rest) !important;
}

.psep-locked {
    opacity: 0.65;
}

/* Compact form elements styled to match FluentUI palette */
.psep-form-select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    font-size: 0.875rem;
}

.psep-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--neutral-foreground-rest);
}

/* Inline action elements */
.psep-date-input {
    height: 30px;
    font-size: 0.78rem;
    padding: 0 6px;
}

.psep-open-btn {
    position: relative;
    z-index: 1;
    line-height: 1.5;
}

.psep-inline-editor {
    border-top: 0 !important;
    padding: 10px 16px 12px;
}

.psep-module-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.psep-module-title-link {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--accent-foreground-rest, var(--neutral-foreground-rest));
}

.psep-module-title-link:hover {
    color: var(--accent-foreground-hover, var(--accent-foreground-rest, var(--neutral-foreground-rest)));
}

.psep-locked-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    cursor: not-allowed;
}

.psep-indicator {
    width: 28px;
    flex-shrink: 0;
    text-align: center;
}

/* Dismiss button in TabLayout action bar */
.psep-dismiss-btn {
    min-width: 0 !important;
    padding: 2px 8px !important;
    font-size: 1.1rem;
    line-height: 1;
}

/* Training module row cards */
.psep-group-card {
    border: 1px solid var(--neutral-stroke-rest);
    border-left: 3px solid var(--accent-fill-rest);
    border-radius: 6px;
    overflow: hidden;
}

.psep-group-header {
    padding: 10px 16px;
    background: var(--neutral-layer-2);
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.psep-module-row {
    padding: 12px 16px;
    background: var(--neutral-layer-1);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.psep-module-row.completed {
    background: var(--neutral-layer-2);
}

.psep-module-border-top {
    border-top: 1px solid var(--neutral-stroke-rest);
}

.psep-ungrouped-module-row {
    padding: 12px 16px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.psep-module-row:hover,
.psep-ungrouped-module-row:hover {
    background: var(--neutral-layer-2);
}

.psep-module-row.psep-locked,
.psep-ungrouped-module-row.psep-locked {
    cursor: not-allowed;
}

.psep-ungrouped-module-row.completed {
    background: var(--neutral-layer-2);
}

/* Training module admin drag zones */
.psep-drag-zone-group {
    display: block;
    background: var(--accent-fill-stealth-rest, color-mix(in srgb, var(--accent-base-color, #0078d4) 8%, transparent));
    border-top: 2px solid var(--accent-stroke-control-rest, var(--accent-fill-rest));
    border-bottom: 1px solid var(--neutral-stroke-rest);
    margin-bottom: 4px;
}

.psep-drag-handle {
    width: 28px;
    flex-shrink: 0;
    text-align: center;
    color: var(--accent-fill-rest);
    cursor: grab;
}

.psep-col-width-100 {
    width: 100px;
    text-align: center;
    padding: 0 8px;
    flex-shrink: 0;
}

.psep-module-inner-row {
    padding-left: 28px;
    cursor: grab;
    border-top: 1px solid var(--neutral-stroke-subtle);
}

.psep-ungrouped-top-row {
    cursor: grab;
    border-bottom: 1px solid var(--neutral-stroke-subtle);
}

/* FluentDataGrid: prevent column header text from truncating with ellipsis */
.fluent-data-grid th .col-title-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}