/* ===================================================================
   FlexOps Identity Portal - Design System
   Color system, typography, and base styles aligned with the
   FlexOps Website (Next.JS/FlexOpsWebSite/src/styles/theme.css).
   =================================================================== */

/* =================================================================
   1. DESIGN TOKENS (from FlexOps Website theme.css)
   ================================================================= */

:root {
    /* --- Font Family --- */
    --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: ui-monospace, "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* --- Brand Colors (Purple) --- */
    --color-brand-25: #FAFAFF;
    --color-brand-50: #F4F3FF;
    --color-brand-100: #EBE9FE;
    --color-brand-200: #D9D6FE;
    --color-brand-300: #BDB4FE;
    --color-brand-400: #9B8AFB;
    --color-brand-500: #7A5AF8;
    --color-brand-600: #6938EF;
    --color-brand-700: #5925DC;
    --color-brand-800: #4A1FB8;
    --color-brand-900: #3E1C96;
    --color-brand-950: #27115F;

    /* --- Gray --- */
    --color-gray-25: #FDFDFD;
    --color-gray-50: #FAFAFA;
    --color-gray-100: #F5F5F5;
    --color-gray-200: #E9EAEB;
    --color-gray-300: #D5D7DA;
    --color-gray-400: #A4A7AE;
    --color-gray-500: #717680;
    --color-gray-600: #535862;
    --color-gray-700: #414651;
    --color-gray-800: #252B37;
    --color-gray-900: #181D27;
    --color-gray-950: #0A0D12;

    /* --- Error / Danger --- */
    --color-error-25: #FFFBFA;
    --color-error-50: #FEF3F2;
    --color-error-100: #FEE4E2;
    --color-error-200: #FECDCA;
    --color-error-300: #FDA29B;
    --color-error-400: #F97066;
    --color-error-500: #F04438;
    --color-error-600: #D92D20;
    --color-error-700: #B42318;
    --color-error-800: #912018;
    --color-error-900: #7A271A;
    --color-error-950: #55160C;

    /* --- Warning --- */
    --color-warning-25: #FFFCF5;
    --color-warning-50: #FFFAEB;
    --color-warning-100: #FEF0C7;
    --color-warning-200: #FEDF89;
    --color-warning-300: #FEC84B;
    --color-warning-400: #FDB022;
    --color-warning-500: #F79009;
    --color-warning-600: #DC6803;
    --color-warning-700: #B54708;
    --color-warning-800: #93370D;
    --color-warning-900: #7A2E0E;
    --color-warning-950: #4E1D09;

    /* --- Success --- */
    --color-success-25: #F6FEF9;
    --color-success-50: #ECFDF3;
    --color-success-100: #DCFAE6;
    --color-success-200: #ABEFC6;
    --color-success-300: #75E0A7;
    --color-success-400: #47CD89;
    --color-success-500: #17B26A;
    --color-success-600: #079455;
    --color-success-700: #067647;
    --color-success-800: #085D3A;
    --color-success-900: #074D31;
    --color-success-950: #053321;

    /* --- Blue --- */
    --color-blue-50: #EFF8FF;
    --color-blue-100: #D1E9FF;
    --color-blue-500: #2E90FA;
    --color-blue-600: #1570EF;
    --color-blue-700: #175CD3;

    /* --- Semantic: Text --- */
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-700);
    --color-text-tertiary: var(--color-gray-600);
    --color-text-quaternary: var(--color-gray-500);
    --color-text-disabled: var(--color-gray-500);
    --color-text-placeholder: var(--color-gray-500);
    --color-text-brand-primary: var(--color-brand-900);
    --color-text-brand-secondary: var(--color-brand-700);
    --color-text-brand-tertiary: var(--color-brand-600);
    --color-text-error-primary: var(--color-error-600);
    --color-text-warning-primary: var(--color-warning-600);
    --color-text-success-primary: var(--color-success-600);
    --color-text-white: #FFFFFF;

    /* --- Semantic: Background --- */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: var(--color-gray-50);
    --color-bg-tertiary: var(--color-gray-100);
    --color-bg-quaternary: var(--color-gray-200);
    --color-bg-disabled: var(--color-gray-100);
    --color-bg-active: var(--color-gray-50);
    --color-bg-brand-primary: var(--color-brand-50);
    --color-bg-brand-secondary: var(--color-brand-100);
    --color-bg-brand-solid: var(--color-brand-600);
    --color-bg-brand-solid_hover: var(--color-brand-700);
    --color-bg-brand-section: var(--color-brand-800);
    --color-bg-error-primary: var(--color-error-50);
    --color-bg-error-secondary: var(--color-error-100);
    --color-bg-error-solid: var(--color-error-600);
    --color-bg-warning-primary: var(--color-warning-50);
    --color-bg-warning-solid: var(--color-warning-600);
    --color-bg-success-primary: var(--color-success-50);
    --color-bg-success-solid: var(--color-success-600);
    --color-bg-overlay: var(--color-gray-950);

    /* --- Semantic: Border --- */
    --color-border-primary: var(--color-gray-300);
    --color-border-secondary: var(--color-gray-200);
    --color-border-tertiary: var(--color-gray-100);
    --color-border-brand: var(--color-brand-500);
    --color-border-brand_alt: var(--color-brand-600);
    --color-border-error: var(--color-error-500);
    --color-border-disabled: var(--color-gray-300);

    /* --- Semantic: Foreground --- */
    --color-fg-primary: var(--color-gray-900);
    --color-fg-secondary: var(--color-gray-700);
    --color-fg-tertiary: var(--color-gray-600);
    --color-fg-quaternary: var(--color-gray-400);
    --color-fg-disabled: var(--color-gray-400);
    --color-fg-brand-primary: var(--color-brand-600);
    --color-fg-brand-secondary: var(--color-brand-500);
    --color-fg-error-primary: var(--color-error-600);
    --color-fg-success-primary: var(--color-success-600);
    --color-fg-warning-primary: var(--color-warning-600);
    --color-fg-white: #FFFFFF;

    /* --- Radius --- */
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;

    /* --- Shadows --- */
    --shadow-xs: 0px 1px 2px rgba(10, 13, 18, 0.05);
    --shadow-sm: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px -1px rgba(10, 13, 18, 0.1);
    --shadow-md: 0px 4px 6px -1px rgba(10, 13, 18, 0.1), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);
    --shadow-lg: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 2px 2px -1px rgba(10, 13, 18, 0.04);
    --shadow-xl: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
    --shadow-2xl: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
    --shadow-skeumorphic: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset;
    --shadow-xs-skeumorphic: var(--shadow-skeumorphic), var(--shadow-xs);

    /* --- Focus Ring --- */
    --color-focus-ring: rgba(122, 90, 248, 0.12);
}


/* =================================================================
   2. BASE STYLES
   ================================================================= */

html, body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-ligatures: contextual;
    font-kerning: normal;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
}

/* Accessibility: skip link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-bg-brand-solid);
    color: var(--color-text-white);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    z-index: 100;
    font-weight: 600;
}

.skip-link:focus {
    top: 8px;
    left: 8px;
}

/* Smooth transitions for interactive elements */
a, button, .rz-button {
    transition: all 0.1s ease-in-out;
}

/* Focus states — brand purple focus ring matching website */
:where(a, button, input, select, textarea):focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--color-focus-ring);
    border-radius: var(--radius-sm);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =================================================================
   3. TYPOGRAPHY
   ================================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--color-text-primary);
    font-weight: 600;
}

/* Monospace for code elements */
code, pre, .code {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

code:not(pre code) {
    background: var(--color-bg-secondary);
    box-shadow: 0 0 0 1px var(--color-border-secondary);
    padding: 2px 6px;
    border-radius: 6px;
}


/* =================================================================
   4. CARD STYLES
   ================================================================= */

/* Clickable card hover — website-style lift + shadow */
.rz-card[style*="cursor: pointer"]:hover,
.settings-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Summary cards on hub overview */
.settings-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}


/* =================================================================
   5. BADGE / STATUS STYLES
   ================================================================= */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.badge-success {
    background: var(--color-bg-success-primary);
    color: var(--color-success-700);
    border: 1px solid var(--color-success-200);
}

.badge-warning {
    background: var(--color-bg-warning-primary);
    color: var(--color-warning-700);
    border: 1px solid var(--color-warning-200);
}

.badge-error {
    background: var(--color-bg-error-primary);
    color: var(--color-error-700);
    border: 1px solid var(--color-error-200);
}

.badge-brand {
    background: var(--color-bg-brand-primary);
    color: var(--color-brand-700);
    border: 1px solid var(--color-brand-200);
}

.badge-gray {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-secondary);
}

.badge-blue {
    background: var(--color-blue-50);
    color: var(--color-blue-700);
    border: 1px solid var(--color-blue-100);
}


/* =================================================================
   6. SECTION STYLING
   ================================================================= */

.section-header {
    color: var(--color-text-primary);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.75rem;
    margin-bottom: 4px;
}

.section-description {
    color: var(--color-text-tertiary);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.section-divider {
    border: none;
    border-top: 1px solid var(--color-border-secondary);
    margin: 24px 0;
}


/* =================================================================
   7. FORM HELPERS
   ================================================================= */

.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    line-height: 1.25rem;
}

.form-hint {
    font-size: 0.875rem;
    color: var(--color-text-tertiary);
    line-height: 1.25rem;
    margin-top: 6px;
}

.form-error {
    font-size: 0.875rem;
    color: var(--color-text-error-primary);
    line-height: 1.25rem;
    margin-top: 6px;
}


/* =================================================================
   8. UTILITY CLASSES
   ================================================================= */

.text-brand { color: var(--color-fg-brand-primary); }
.text-success { color: var(--color-fg-success-primary); }
.text-warning { color: var(--color-fg-warning-primary); }
.text-error { color: var(--color-fg-error-primary); }
.text-muted { color: var(--color-text-tertiary); }
.text-disabled { color: var(--color-text-disabled); }

.bg-brand-subtle { background: var(--color-bg-brand-primary); }
.bg-success-subtle { background: var(--color-bg-success-primary); }
.bg-warning-subtle { background: var(--color-bg-warning-primary); }
.bg-error-subtle { background: var(--color-bg-error-primary); }


/* =================================================================
   9. BLAZOR ERROR UI
   ================================================================= */

#blazor-error-ui {
    background: var(--color-bg-warning-primary);
    border-top: 2px solid var(--color-warning-400);
    bottom: 0;
    box-shadow: var(--shadow-lg);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: var(--color-text-primary);
    font-size: 0.875rem;
}

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