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

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

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