/* ===================================================================
   FlexTime design tokens
   Dark-blue, mobile-first visual identity.
   =================================================================== */

:root {
    /* core surfaces */
    --ft-ink: #0a1628; /* page background */
    --ft-deep: #10233f; /* card / surface background */
    --ft-deep-2: #142a4d; /* card gradient end / elevated surface */
    --ft-line: rgba(143, 166, 196, 0.16); /* hairline borders on dark */
    /* accents */
    --ft-blue: #2f6fed; /* primary accent — office */
    --ft-blue-soft: #4f86ff; /* office accent, text/icon on dark */
    --ft-teal: #36c2b4; /* secondary accent — WFH / positive action */
    --ft-teal-soft: #50d6c7; /* WFH accent, text/icon on dark */
    --ft-amber: #e8a23d; /* warning / late state, use sparingly */
    --ft-red: #e2574c; /* error state */
    /* text */
    --ft-paper: #eef3fb; /* primary text on dark */
    --ft-mist: #8fa6c4; /* secondary text on dark */
    --ft-mist-dim: #5d7494; /* tertiary text / labels on dark */
    /* type */
    --ft-font-display: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --ft-font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* radii */
    --ft-radius-lg: 20px;
    --ft-radius-md: 14px;
    --ft-radius-sm: 10px;
}

html, body {
    background-color: var(--ft-ink);
    color: var(--ft-paper);
    font-family: var(--ft-font-body);
}

a, .btn-link {
    color: var(--ft-blue-soft);
}

.btn-primary {
    color: var(--ft-ink);
    background-color: var(--ft-teal);
    border-color: var(--ft-teal);
    font-weight: 600;
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: var(--ft-teal-soft);
        border-color: var(--ft-teal-soft);
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--ft-ink), 0 0 0 0.25rem var(--ft-blue-soft);
}

.content {
    padding-top: 1.1rem;
}

.loading-progress {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    z-index: 9999;
}

.loading-progress circle:nth-child(1) {
    fill: none;
    stroke: var(--ft-blue-soft);
    stroke-width: 3;
    stroke-dasharray: 251;
    stroke-dashoffset: 0;
    animation: spin 2s linear infinite;
    transform-origin: 50% 50%;
}

.loading-progress circle:nth-child(2) {
    fill: none;
    stroke: var(--ft-teal-soft);
    stroke-width: 2;
    stroke-dasharray: 251;
    stroke-dashoffset: 62;
    animation: spin 3s linear infinite reverse;
    transform-origin: 50% 50%;
    opacity: 0.6;
}

@keyframes spin {
    0% {
        stroke-dashoffset: 0;
        transform: rotate(0deg);
    }
    100% {
        stroke-dashoffset: 251;
        transform: rotate(360deg);
    }
}

/* Reusable inline spinner for buttons mid-request. Inherits the button's
   text colour via currentColor, so it tints itself per button. */
.btn-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ft-rotate 0.6s linear infinite;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

@keyframes ft-rotate {
    to {
        transform: rotate(360deg);
    }
}

.loading-progress-text {
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    color: var(--ft-mist);
    margin-top: 50px;
    white-space: nowrap;
}

code {
    color: var(--ft-teal-soft);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    color-scheme: dark only;
    background: var(--ft-amber);
    color: #2c1c02;
    padding: 1rem;
    z-index: 1000;
}

#blazor-error-ui.show {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    font-size: 1.5rem;
}

.blazor-error-boundary {
    background-color: var(--ft-red);
}