/* =====================================================================
 * 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.
   Properties listed explicitly — `all` also animates layout properties, which
   forces off-compositor work on every hover. */
a, button, .rz-button {
    transition: background-color var(--flexops-transition),
                border-color var(--flexops-transition),
                color var(--flexops-transition),
                box-shadow var(--flexops-transition),
                transform var(--flexops-transition);
}


/* =================================================================
   2. TYPOGRAPHY
   ================================================================= */

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

/* 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;
    /* Badges are routinely placed directly in a RadzenStack column, where
       `display: inline-flex` blockifies to `flex` and the default stretch
       alignment inflates the pill to the full card width. An explicit
       cross-size opts out of stretch without disturbing row layouts. */
    width: fit-content;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    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-sky {
    background: var(--color-bg-sky-primary);
    color: var(--color-sky-700);
    border: 1px solid var(--color-sky-200);
}

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

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

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

.badge-orange {
    background: var(--color-bg-orange-primary);
    color: var(--color-orange-700);
    border: 1px solid var(--color-orange-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);
}

/* Sky/Indigo/Purple/Pink/Orange only ship 50/200/700 (flexops-tokens.css:109) —
   no 500 or 300 stop to mix from the way .badge-success does. Mix from -700
   (the only saturated stop in the ramp) for the wash and border, and use -200
   (the lightest non-tint stop) for text — the same kind of adaptation
   .badge-blue makes below for its own partial ramp. */
[data-theme="dark"] .badge-sky {
    background: color-mix(in srgb, var(--flexops-sky-700) 20%, transparent);
    color: var(--flexops-sky-200);
    border-color: color-mix(in srgb, var(--flexops-sky-700) 40%, transparent);
}

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

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

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

[data-theme="dark"] .badge-orange {
    background: color-mix(in srgb, var(--flexops-orange-700) 20%, transparent);
    color: var(--flexops-orange-200);
    border-color: color-mix(in srgb, var(--flexops-orange-700) 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);
}

/* .badge-gray needs no dark rule — its tokens are semantic and already
   remap. .badge-blue's are raw ramp stops, so without this it keeps the
   light blue-50 wash in dark mode. Text stop is blue-100 rather than the
   -300 used above: the blue ramp is partial (50/100/500/600/700).
   Mirrors .rz-badge-info in flexops-radzen-overrides.css §29. */
[data-theme="dark"] .badge-blue {
    background: color-mix(in srgb, var(--flexops-blue-500) 20%, transparent);
    color: var(--flexops-blue-100);
    border-color: color-mix(in srgb, var(--flexops-blue-500) 40%, transparent);
}

/* The leading dot marks a state that is still in flight. `.badge` already declares
   `gap: 4px`, so this needs no margin of its own — adding one would double the spacing.
   currentColor ties the dot to the family's text colour, so a new family gets a correct
   dot for free rather than needing a sixth rule. */
.badge-dot::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: currentColor;
    flex: 0 0 auto;
}


/* =================================================================
   5. SECTION STYLING
   ================================================================= */

.section-header {
    color: var(--color-text-primary);
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    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: var(--font-weight-medium);
    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); }