@import url('../_content/Fontys.Components/fonts/roboto.css');
@import url('../_content/Fontys.Components/fonts/roboto-condensed.css');
@import url('../_content/Fontys.Components/fontyscomponents.css');

:root {
    /* Fontys custom design tokens */
    --fontys-color-purple: #663366;
    --fontys-color-purple-light1: #845B84;
    --fontys-color-purple-light2: #A384A3;
    --fontys-color-lightblue: #3391E6;
    --fontys-color-lightblue-light: #99D6EB;
    --fontys-color-pink: #E5087E;
    --fontys-color-pink-light: #F59CCB;
    --fontys-padding-button: 4px 10px;
    --fontys-border-radius-button: 3px;
    --fontys-border-width-button: 1px;

    /* Map Fontys tokens to Fluent UI design tokens used in this stylesheet */
    --accent-fill-rest: var(--fontys-color-purple);
    --accent-fill-hover: var(--fontys-color-purple-light1);
    --accent-fill-active: var(--fontys-color-purple-light2);
    --accent-foreground-rest: #ffffff;
    /* white text on purple */

    /* Additional convenient mappings */
    --brand-color: var(--fontys-color-lightblue);
    --brand-color-light: var(--fontys-color-lightblue-light);

    /* Button utility tokens */
    --fontys-button-padding: var(--fontys-padding-button);
    --fontys-button-border-radius: var(--fontys-border-radius-button);
    --fontys-button-border-width: var(--fontys-border-width-button);
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--body-font, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial);
    font-size: var(--type-ramp-base-font-size, 16px);
    line-height: var(--type-ramp-base-line-height, 1.5);
    font-weight: var(--font-weight, 400);
    color: var(--neutral-foreground-rest, #111);
    background-color: var(--neutral-fill-layer-rest, #fff);
    box-sizing: border-box;
}

main {
    margin: 90px 20px 0 20px;
}

h1:focus {
    outline: none;
}

/* Fluent UI native link styling */
a {
    color: var(--accent-fill-rest);
    text-decoration: none;
}

a:hover {
    color: var(--accent-fill-hover);
    text-decoration: underline;
}

a:active {
    color: var(--accent-fill-active);
}

/* Focus states using Fluent UI tokens */
*:focus-visible {
    outline: calc(var(--stroke-width) * 1px) solid var(--focus-stroke-outer);
    outline-offset: calc(var(--focus-stroke-width) * 1px);
}

.content {
    padding-top: 1.1rem;
}

/* Form validation using Fluent UI semantic colors */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success);
}

.invalid {
    outline: 1px solid var(--error);
}

.validation-message {
    color: var(--error);
}

/* Blazor Error UI with Fluent theming */
#blazor-error-ui {
    background: var(--neutral-layer-floating);
    bottom: 0;
    box-shadow: var(--elevation-shadow-card-rest);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    border-top: 3px solid var(--error);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    color: var(--neutral-foreground-rest);
}

#blazor-error-ui .dismiss:hover {
    color: var(--neutral-foreground-hover);
}

.blazor-error-boundary {
    background: var(--error);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--neutral-fill-layer-rest);
    border-radius: var(--control-corner-radius);
    position: relative;
}

.blazor-error-boundary::before {
    content: "?";
    position: absolute;
    left: 1rem;
    font-size: 1.5rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Fluent UI Loader Styles */
.fluent-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--neutral-fill-layer-rest);
    z-index: 9999;
}

.fluent-loader-ring {
    width: 60px;
    height: 60px;
    border: 4px solid var(--neutral-stroke-divider-rest);
    border-top-color: var(--accent-fill-rest);
    border-radius: 50%;
    animation: fluent-spinner 1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}

@keyframes fluent-spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.fluent-loader-text {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--neutral-foreground-rest);
    font-size: var(--type-ramp-base-font-size);
    font-weight: var(--font-weight-semibold);
}

.fluent-loader-logo {
    width: 32px;
    height: 32px;
    color: var(--accent-fill-rest);
    opacity: 0.8;
}

.fluent-loader-text span {
    animation: fluent-pulse 1.5s ease-in-out infinite;
}

@keyframes fluent-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* Legacy loading progress (for backward compatibility) */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

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

.loading-progress circle:last-child {
    stroke: var(--accent-fill-rest);
    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: var(--font-weight-semibold);
    color: var(--neutral-foreground-rest);
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

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

/* Utility classes using Fluent design tokens */
.elevation-card {
    box-shadow: var(--elevation-shadow-card-rest);
}

.elevation-dialog {
    box-shadow: var(--elevation-shadow-dialog);
}

.elevation-flyout {
    box-shadow: var(--elevation-shadow-flyout);
}

/* Spacing utilities based on Fluent spacing scale */
.spacing-xs {
    margin: var(--design-unit);
}

.spacing-sm {
    margin: calc(var(--design-unit) * 2px);
}

.spacing-md {
    margin: calc(var(--design-unit) * 3px);
}

.spacing-lg {
    margin: calc(var(--design-unit) * 4px);
}

.spacing-xl {
    margin: calc(var(--design-unit) * 6px);
}

/* Fontys button utility */
.fontys-button,
button.fontys-button,
button,
.btn {
    padding: var(--fontys-button-padding);
    border-radius: var(--fontys-button-border-radius);
    border: var(--fontys-button-border-width) solid var(--accent-fill-rest);
    background: var(--accent-fill-rest);
    color: var(--accent-foreground-rest);
    cursor: pointer;
}

button:hover,
.btn:hover,
.fontys-button:hover {
    background: var(--accent-fill-hover);
    border-color: var(--accent-fill-hover);
}

button:active,
.btn:active,
.fontys-button:active {
    background: var(--accent-fill-active);
    border-color: var(--accent-fill-active);
}

/* Fontys legacy/fallback button styles (.fcButton) provided by designer */
.fcButton {
    border: var(--fontys-border-width-button) solid var(--fontys-color-purple);
    border-radius: var(--fontys-border-radius-button);
    padding: var(--fontys-padding-button);
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    font-family: 'Roboto Condensed';
    letter-spacing: 0.04em;
}

.fcButton:disabled {
    border-color: grey;
}

.fcButton:hover:enabled,
.fcButton:focus:enabled,
.fcButton:active:enabled {
    color: black;
    background-color: var(--fontys-color-purple-light2);
}

.fcButton-heavy {
    background-color: var(--fontys-color-purple);
    color: white;
}

.fcButton-heavy:disabled {
    color: white;
    background-color: var(--fontys-color-purple-light2);
    border-color: var(--fontys-color-purple);
}

.fcButton-heavy:hover:enabled,
.fcButton-heavy:focus:enabled,
.fcButton-heavy:active:enabled {
    color: white;
    text-decoration: underline;
    background-color: var(--fontys-color-purple);
    border-color: var(--fontys-color-purple);
}

.fcButton-subtle {
    background-color: white;
    color: black;
}

.fcButton-subtle:disabled {
    background-color: white;
    color: grey;
    border-color: var(--fontys-color-purple-light2);
}

.fcButton-subtle:hover:enabled,
.fcButton-subtle:focus:enabled,
.fcButton-subtle:active:enabled {
    background-color: white;
    border-color: var(--fontys-color-lightblue);
}

.fcButton-pink {
    background-color: white;
    color: black;
    border-color: var(--fontys-color-pink);
}

.fcButton-pink:disabled {
    background-color: white;
    color: grey;
    border-color: var(--fontys-color-pink-light);
}

.fcButton-pink:hover:enabled,
.fcButton-pink:focus:enabled,
.fcButton-pink:active:enabled {
    color: black;
    background-color: var(--fontys-color-pink-light);
    border-color: var(--fontys-color-pink);
}

.fcButton-blue {
    background-color: white;
    color: black;
    border-color: var(--fontys-color-lightblue);
}

.fcButton-blue:disabled {
    background-color: white;
    color: grey;
    border-color: var(--fontys-color-lightblue-light);
}

.fcButton-blue:hover:enabled,
.fcButton-blue:focus:enabled,
.fcButton-blue:active:enabled {
    color: black;
    background-color: var(--fontys-color-lightblue-light);
    border-color: var(--fontys-color-lightblue);
}