/* ========== FONT FACE DECLARATIONS ========== */
@font-face {
    font-family: 'Archivo';
    src: url('../fonts/Archivo-VariableFont_wdth_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    src: url('../fonts/Archivo-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: italic;
    font-display: swap;
}

:root {
    /* ========== BASE COLORS ========== */
    --color-white: rgba(255, 255, 255, 1);
    --color-black: rgba(23, 22, 22, 1);
    --color-gray: rgba(139, 129, 120, 1);
    --color-yellow: rgba(237, 212, 132, 1);
    --color-blue: rgba(19, 81, 147, 1);
    --color-red: rgba(210, 44, 34, 1);
    --color-green: rgba(27, 169, 102, 1);
    --color-orange: rgba(235, 151, 53, 1);
    --color-purple: rgba(95, 86, 220, 1);
    /* ========== VARIANT COLORS ========== */
    --color-gray-light: rgba(172, 163, 154, 1);
    --color-black-alt: rgba(40, 40, 40, 1);
    --color-white-alt: rgba(250, 250, 250, 1);
    --color-yellow-bright: rgba(238, 202, 88, 1);
    --color-orange-bright: rgba(243, 114, 44, 1);
    --color-blue-dark: rgba(27, 54, 93, 1);
    --color-blue-light: rgba(142, 159, 188, 1);
    --color-blue-bright: rgba(45, 156, 219, 1);
    --color-purple-dark: rgba(73, 66, 160, 1);
    --color-lime: rgba(135, 195, 90, 1);
    --color-green-bright: rgba(15, 133, 44, 1);
    --color-green-dark: rgba(0, 104, 94, 1);
    --color-teal: rgba(44, 218, 189, 1);
    --color-pink: rgba(215, 50, 168, 1);
    --color-red-dark: rgba(166, 25, 46, 1);
    --color-pink-bright: rgba(230, 39, 136, 1);
    /* ========== BOOTSTRAP THEME COLORS ========== */
    --bs-primary: rgb(238, 212, 132);
    --bs-primary-rgb: 238, 212, 132;
    --bs-secondary: rgb(172, 163, 154);
    --bs-secondary-rgb: 172, 163, 154;
    --bs-success: rgb(0, 104, 94);
    --bs-success-rgb: 0, 104, 94;
    --bs-info: rgb(0, 81, 147);
    --bs-info-rgb: 0, 81, 147;
    --bs-warning: rgb(199, 150, 153);
    --bs-warning-rgb: 199, 150, 153;
    --bs-danger: rgb(166, 25, 46);
    --bs-danger-rgb: 166, 25, 46;
    --bs-light: rgb(242, 224, 181);
    --bs-light-rgb: 242, 224, 181;
    --bs-dark: rgb(0, 0, 0);
    --bs-dark-rgb: 0, 0, 0;
    --bs-white: rgb(255, 255, 255);
    --bs-white-rgb: 255, 255, 255;
    --bs-black: rgb(23, 22, 22);
    --bs-black-rgb: 23, 22, 22;
    /* ========== GRAY SCALE ========== */
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    /* ========== SEMANTIC ALIASES ========== */
    --color-text-primary: var(--color-black);
    --color-text-secondary: var(--color-gray);
    --color-text-muted: var(--color-gray-light);
    --color-bg-primary: var(--color-white);
    --color-bg-secondary: var(--color-white-alt);
    --color-border: #e5e7eb;
    --color-border-light: #f3f4f6;
    /* ========== FONT WEIGHTS ========== */
    --font-weight-thin: 100;
    --font-weight-extra-light: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;
    /* ========== FONT FAMILY ========== */
    --font-family-primary: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ========== BASE TYPOGRAPHY ========== */
body {
    font-family: var(--font-family-primary) !important;
    font-weight: var(--font-weight-regular) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-primary) !important;
    font-weight: var(--font-weight-bold);
}

h1 {
    font-size: 2.5rem;
    line-height: 1.2;
}

h2 {
    font-size: 2rem;
    line-height: 1.3;
}

h3 {
    font-size: 1.75rem;
    line-height: 1.3;
}

h4 {
    font-size: 1.5rem;
    line-height: 1.4;
}

h5 {
    font-size: 1.25rem;
    line-height: 1.4;
}

h6 {
    font-size: 1rem;
    line-height: 1.5;
}

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

.invalid {
    outline: 1px solid red;
}

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

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.app-spinner {
    width: 32px;
    height: 32px;
    margin: 0 auto;
    border: 3px solid rgba(0,0,0,0.15);
    border-top-color: var(--bs-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* =========================================================
   Skeleton Loading — shared utilities
   All skeleton components use these classes for enter
   animations. @keyframes are global (not scoped by Blazor).
   ========================================================= */

.skeleton-enter {
    animation: skeleton-enter 0.4s ease forwards;
}

.content-enter {
    animation: content-enter 0.4s ease forwards;
}

@keyframes skeleton-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes content-enter {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   App Splash Screen
   ========================================================= */

.app-splash {
    position: fixed;
    inset: 0;
    background-color: var(--bs-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.app-splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.app-splash-logo {
    width: 96px;
    height: auto;
}

.app-splash-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--color-white);
    border-radius: 50%;
    animation: splash-spin 0.8s linear infinite;
}

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

/* =========================================================
   Blazor Error UI
   ========================================================= */

#blazor-error-ui {
    position: fixed;
    inset: 0;
    background-color: var(--bs-primary);
    z-index: 10000;
}

    #blazor-error-ui.hidden {
        display: none;
    }

    #blazor-error-ui .app-error-card {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: var(--color-white);
        border-radius: 16px;
        padding: 2.5rem 2rem;
        max-width: 420px;
        width: calc(100% - 2rem);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
        text-align: center;
    }

.app-error-logo {
    width: 72px;
    margin-bottom: 1.5rem;
}

.app-error-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #1f2937;
}

.app-error-message {
    font-size: 0.95rem;
    color: #4b5563;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.app-error-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.app-error-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 44px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: none;
    text-transform: capitalize;
}

    .app-error-button.primary {
        background-color: var(--bs-info);
        color: var(--color-white);
    }

        .app-error-button.primary:hover {
            background-color: #155a9c;
        }

    .app-error-button.secondary {
        background: transparent;
        color: #68707d;
    }

        .app-error-button.secondary:hover {
            text-decoration: underline;
        }

.dismiss {
    display: none;
}

.empty-area-placeholder {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-secondary, #64748b);
    background: #f7f7f7;
    border-radius: 6px;
    border: 1px dashed var(--border-color, #e2e8f0);
    font-size: 0.875rem;
}

    .empty-area-placeholder > p {
        margin-bottom: 0;
    }