/* =================================================================
   WF Portal — Global Design Tokens (Light Theme Defaults)
   -----------------------------------------------------------------
   All design tokens live under --theme-*. These are the only values
   you need to change to retheme the application.

   Per-tenant runtime overrides are injected by Theme.razor using the
   same --theme-* variable names. Theme.razor emits a <style> block
   that overrides specific variables — the browser cascade handles
   the rest.

   There is no separate theme.css file. root.css is the single
   source of truth for defaults. Dark themes are just another
   tenant override.
   ================================================================= */

:root {
    /* ── Backgrounds ──────────────────────────────────────────────── */

    --theme-background:               #ffffff;
    --theme-background-subtle:        #f1f4f7;
    --theme-background-raised:        #ffffff;
    --theme-background-float:         #ffffff;
    --theme-background-hover:         #e8ecf0;
    --theme-background-active:        #dde2e8;

    /* ── Surfaces ─────────────────────────────────────────────────────
       Aliases of the tenant-aware background tokens above. The app
       references --theme-surface (and a few variants) in ~12 stylesheets
       but they were never DEFINED here, so every `var(--theme-surface,#fff)`
       fell back to white — invisible/broken on dark tenant themes. Because
       these alias the background tokens (which Theme.razor overrides per
       tenant), surfaces now track light AND dark themes automatically.
       Light defaults resolve to the same whites the old fallbacks produced,
       so light mode is unchanged. (--theme-surface-raised is intentionally
       NOT aliased: its one consumer is a deliberately-dark contrast chip
       that keeps its own #333 fallback.) */

    --theme-surface:                  var(--theme-background-raised);
    --theme-surface-2:                var(--theme-background-subtle);
    --theme-surface-alt:              var(--theme-background-subtle);
    --theme-surface-sunken:           var(--theme-background-subtle);
    --theme-surface-hover:            var(--theme-background-hover);
    --theme-surface-muted:            var(--theme-background-subtle);

    /* ── Borders ──────────────────────────────────────────────────── */

    --theme-border:                   #e2e6eb;
    --theme-border-subtle:            #cdd3db;

    /* ── Primary brand (forest green) ────────────────────────────── */

    --theme-primary:                  #1a6b3c;
    --theme-primary-rgb:              26, 107, 60;
    --theme-primary-hover:            #1e7d46;
    --theme-primary-muted:            rgba(26, 107, 60, .12);
    --theme-text-on-primary:          #ffffff;
    /* Signature ink — brand-primary by default so on-form signatures
       carry tenant identity. Tenant-theme overrides at runtime via
       Theme.razor; this root.css default keeps the pad drawable even
       when the tenant CSS hasn't loaded yet (new-tenant wizard path). */
    --theme-signature-stroke:         #1a6b3c;

    /* ── Accent (warm orange) ────────────────────────────────────── */

    --theme-accent:                   #e26500;
    --theme-accent-hover:             #f07320;
    --theme-accent-muted:             rgba(226, 101, 0, .12);
    /* Foreground color to use ON TOP of --theme-accent (buttons, badges).
       Theme.razor overrides per-tenant based on accent luminance so light
       accents get black text and dark accents get white — always readable. */
    --theme-text-on-accent:           #ffffff;

    /* ── Offset (violet) ─────────────────────────────────────────── */

    --theme-offset:                   #5b21b6;
    --theme-offset-hover:             #6d28d9;
    /* Same pattern as --theme-text-on-accent — driven by --theme-offset's
       luminance so the .btn-info (which paints itself with --theme-offset)
       always has a readable label. */
    --theme-text-on-offset:           #ffffff;
    --theme-offset-muted:             rgba(91, 33, 182, .10);

    /* ── Semantic ─────────────────────────────────────────────────── */

    --theme-success:                  #16a34a;
    --theme-success-muted:            rgba(22, 163, 74, .12);
    --theme-warning:                  #d97706;
    --theme-warning-muted:            rgba(217, 119, 6, .12);
    --theme-danger:                   #dc2626;
    --theme-danger-muted:             rgba(220, 38, 38, .12);
    --theme-info:                     #2563eb;
    --theme-info-rgb:                 37, 99, 235;
    --theme-info-muted:               rgba(37, 99, 235, .12);

    /* ── Text ─────────────────────────────────────────────────────── */

    --theme-text:                     #1e2a38;
    --theme-text-secondary:           #4a5668;
    --theme-text-muted:               #7a8898;
    --theme-text-emphasis:            #111827;
    --theme-text-placeholder:         #9aa5b3;

    /* ── Navigation ───────────────────────────────────────────────── */

    --theme-nav-background:           #1a6b3c;
    --theme-nav-border:               #155c33;
    --theme-nav-text:                 rgba(255, 255, 255, .75);
    --theme-nav-text-hover:           rgba(255, 255, 255, .95);
    --theme-nav-text-active:          #ffffff;
    --theme-nav-hover-background:     rgba(255, 255, 255, .10);
    --theme-nav-dropdown-background:  #155c33;
    --theme-nav-dropdown-hover:       #1a6b3c;
    --theme-nav-divider:              rgba(255, 255, 255, .12);

    /* ── Shape & shadow ───────────────────────────────────────────── */

    --theme-shadow:                   0 1px 3px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .04);
    --theme-shadow-lg:                0 1px 2px rgba(0, 0, 0, .04), 0 6px 16px rgba(0, 0, 0, .06);
    --theme-radius:                   0.625rem;
    --theme-radius-button:            0.5rem;

    /* ── Focus ────────────────────────────────────────────────────── */

    --theme-focus-ring:               0 0 0 3px rgba(26, 107, 60, .18);

    /* ── Typography ───────────────────────────────────────────────── */

    --theme-font:                     'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --theme-font-mono:                'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    --theme-font-size-xs:             0.75rem;
    --theme-font-size-sm:             0.8125rem;
    --theme-font-size-base:           0.875rem;
    --theme-font-size-lg:             1rem;
    --theme-font-size-xl:             1.25rem;
    --theme-font-size-2xl:            1.5rem;
    --theme-font-size-3xl:            1.875rem;

    /* ── Spacing ──────────────────────────────────────────────────── */

    --theme-page-padding:             1.5rem 2rem;
    --theme-section-gap:              1.5rem;

    /* ── Transitions ──────────────────────────────────────────────── */

    --theme-transition:               150ms ease;

}

/* =================================================================
   Base element styles
   ================================================================= */

html {
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--theme-background);
    color: var(--theme-text);
    font-family: var(--theme-font);
    font-size: var(--theme-font-size-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color-scheme: light;
}

#app {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Blazor renders one intermediate wrapper div between #app and the layout.
   Make it flex so the height chain flows through to wf-main. */
#app > div:first-child {
    display: contents;
}

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

a {
    color: var(--theme-primary);
    transition: color var(--theme-transition);
}
/* Generic link-hover color is intentionally scoped AWAY from .btn — when
   an <a> wears a .btn class (e.g. the Data Studio "Upload a file" CTA,
   the Integrations "Open the wizard" links, the Crossover "Save as
   recurring sync" success-screen anchor), the button's own text-color
   rule is what should govern. The bare `a:hover` rule was making
   .btn-primary text invisible on hover across the Integrations area
   (Kirk's bug report 2026-04-28). Excluding .btn keeps real text-link
   hover semantics intact while letting buttons own their typography. */
a:not(.btn):hover { color: var(--theme-primary-hover); }

/* -- Scrollbar --------------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--theme-background); }
::-webkit-scrollbar-thumb { background: var(--theme-border-subtle); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--theme-text-muted); }

/* =================================================================
   Utility classes
   ================================================================= */
.text-accent        { color: var(--theme-accent)          !important; }
.text-offset        { color: var(--theme-offset)          !important; }
.text-primary-wf    { color: var(--theme-primary)         !important; }
.text-secondary-wf  { color: var(--theme-text-secondary)  !important; }
.bg-surface         { background-color: var(--theme-background-subtle)  !important; }
.bg-raised          { background-color: var(--theme-background-raised)  !important; }
.border-wf          { border-color: var(--theme-border)   !important; }

/* =================================================================
   Reusable Component Styles
   ================================================================= */

/* -- Widget / dashboard card ------------------------------------- */
.wf-widget {
    background-color: var(--theme-background-raised);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    padding: 1.25rem;
    transition: border-color var(--theme-transition), box-shadow var(--theme-transition);
}
.wf-widget:hover {
    border-color: var(--theme-border-subtle);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}
.wf-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.wf-widget-title {
    font-size: var(--theme-font-size-sm);
    font-weight: 600;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wf-widget-value {
    font-size: var(--theme-font-size-3xl);
    font-weight: 700;
    color: var(--theme-text-emphasis);
    line-height: 1;
}

/* -- Page header ------------------------------------------------- */
.wf-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--theme-section-gap);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--theme-border);
}
.wf-page-title {
    font-size: var(--theme-font-size-2xl);
    font-weight: 700;
    color: var(--theme-text-emphasis);
    margin: 0;
}
.wf-page-subtitle {
    font-size: var(--theme-font-size-sm);
    color: var(--theme-text-secondary);
    margin: 0.25rem 0 0;
}

/* -- Stub page placeholder --------------------------------------- */
.wf-stub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
}
.wf-stub-icon {
    font-size: 3.5rem;
    color: var(--theme-text-muted);
    margin-bottom: 1rem;
}
.wf-stub-title {
    font-size: var(--theme-font-size-xl);
    font-weight: 600;
    color: var(--theme-text-secondary);
}
.wf-stub-text {
    font-size: var(--theme-font-size-sm);
    color: var(--theme-text-muted);
    max-width: 28rem;
    margin-top: 0.5rem;
}

/* =================================================================
   Responsive — Page padding
   ================================================================= */

@media (max-width: 991.98px) {
    :root { --theme-page-padding: 1.25rem 1.25rem; }
}

@media (max-width: 767.98px) {
    :root { --theme-page-padding: 1rem; }
    .wf-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* ── Loading Spinner + Joke Quote ─────────────────────────────── */

.wf-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    gap: 2rem;
}

.wf-loading-quote {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 36rem;
    padding: 1rem 1.5rem;
    border-radius: var(--theme-radius);
    background: linear-gradient(135deg,
        hsla(var(--theme-primary-hue, 220), 30%, 92%, 0.6),
        hsla(var(--theme-primary-hue, 220), 20%, 96%, 0.4));
    backdrop-filter: blur(8px);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--theme-text);
    line-height: 1.5;
}

.wf-loading-quote-icon {
    flex-shrink: 0;
    font-size: 1.3rem;
    color: var(--theme-primary);
    font-style: normal;
}

.wf-loading-quote-text {
    flex: 1;
}

.wf-loading-spinner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
}

.wf-loading-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: wf-spin 1.2s linear infinite;
}

.wf-loading-ring circle {
    stroke: var(--theme-primary);
    stroke-dasharray: 80, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    opacity: 0.35;
}

.wf-loading-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--theme-text-muted);
    letter-spacing: 0.02em;
}

@keyframes wf-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}