/* =====================================================================
 * FlexOps Portal Base Styles
 * =====================================================================
 * Common base styles shared by all modern FlexOps Blazor portals
 * (SettingsHub, ApiPortal, IdentityPortal).
 *
 * Requires: flexops-tokens.css loaded first.
 * Companion files already in the shared library:
 *   - flexops-radzen-overrides.css  (focus, scrollbar, reduced motion,
 *                                    Blazor error UI, Radzen overrides)
 *   - flexops-components.css        (skip link, skeleton, empty state)
 *
 * Each portal's site.css provides only the accent bar color.
 *
 * Copyright (c) 2021-2026 by FlexOps, LLC. All rights reserved.
 * =================================================================== */


/* =================================================================
   1. 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);
}

/* Dark mode: the page sits on the secondary (deepest) surface so cards —
   which use bg-primary (#1C1A21) — read as raised. Without this the body and
   the cards share one color and the cards visually disappear. */
[data-theme="dark"] html,
[data-theme="dark"] body {
    background-color: var(--color-bg-secondary);
}

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


/* =================================================================
   2. 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;
}


/* =================================================================
   3. 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;
}


/* =================================================================
   4. 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);
}

/* Dark mode: the light -50 washes read as bright chips on the dark surface.
   Swap to a translucent tint of the semantic hue with a lifted -300 text stop
   for legible contrast. (.badge-brand's bg token already remaps in dark.) */
[data-theme="dark"] .badge-success {
    background: color-mix(in srgb, var(--flexops-success-500) 20%, transparent);
    color: var(--flexops-success-300);
    border-color: color-mix(in srgb, var(--flexops-success-500) 40%, transparent);
}

[data-theme="dark"] .badge-warning {
    background: color-mix(in srgb, var(--flexops-warning-500) 20%, transparent);
    color: var(--flexops-warning-300);
    border-color: color-mix(in srgb, var(--flexops-warning-500) 40%, transparent);
}

[data-theme="dark"] .badge-error {
    background: color-mix(in srgb, var(--flexops-error-500) 20%, transparent);
    color: var(--flexops-error-300);
    border-color: color-mix(in srgb, var(--flexops-error-500) 40%, transparent);
}

[data-theme="dark"] .badge-brand {
    background: color-mix(in srgb, var(--flexops-brand-500) 22%, transparent);
    color: var(--flexops-brand-300);
    border-color: color-mix(in srgb, var(--flexops-brand-500) 40%, transparent);
}

.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);
}


/* =================================================================
   5. 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;
}


/* =================================================================
   6. 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;
}


/* =================================================================
   7. 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); }