/* ============================================================
   ProfesLink — Brand palette & components
   Single source of truth for the new colour system.
   Core colours are also wired into the MudBlazor theme
   (Models/ConfigurationModels/ThemeConfigModel.cs); this file
   holds the variables + brand classes for everything else so
   colours are not scattered inline across pages/components.
   ============================================================ */

:root {
    /* Core brand colours (per Master Developer Spec v1) */
    --pfl-navy:         #0F1F4B;  /* deep brand navy */
    --pfl-indigo:       #2B2E7C;  /* primary indigo */
    --pfl-accent:       #F2A35B;  /* warm orange — use sparingly */
    --pfl-bg:           #FFFFFF;  /* page background */
    --pfl-section:      #F8FAFC;  /* alternating section bg */
    --pfl-border:       #E2E8F0;  /* hairline borders */
    --pfl-indigo-light: #EEF2FF;  /* FAQ / soft panels */

    /* Text — hexes per PROF-47 (Design Tokens Reference, 19 Jul 2026), which is
       the declared single source of truth. The old #1A2233 / #5B6478 predate it
       and were near-misses, not deliberate choices. PROF-47 also bans #1E293B as
       BODY text — it stays legitimate as a dark surface (tooltip background). */
    --pfl-text:         #0F172A;  /* primary text */
    --pfl-text-muted:   #64748B;  /* secondary text, helper text, captions */
    --pfl-on-dark:      #FFFFFF;  /* text on navy/indigo */

    /* Hover pair for the brand colours (PROF-47 §2.1) */
    --pfl-navy-hover:   #1A2D63;
    --pfl-indigo-hover: #3840A0;

    /* Status & feedback (PROF-47 §2.2). The success/error hexes here are the
       same ones fed to MudBlazor's palette in
       Models/ConfigurationModels/ThemeConfigModel.cs — keep the two in step. */
    --pfl-success:      #16A34A;  /* verified states, success messages */
    --pfl-warning:      #F59E0B;  /* pending review, caution messages */
    --pfl-error:        #DC2626;  /* validation failures, rejected status */

    /* Disabled (PROF-47 §3.1 primary button, §4 link states) */
    --pfl-disabled-bg:   #CBD5E1;
    --pfl-disabled-text: #94A3B8;

    /* Status chips — tint/ink pairs (PROF-47 §5). Kept as explicit pairs rather
       than derived from --pfl-success/--pfl-error: the chip tints are separate
       ramp steps, so deriving them would drift the moment a brand hue moves. */
    --pfl-chip-verified-bg:   #DCFCE7;
    --pfl-chip-verified-text: #14532D;
    --pfl-chip-pending-bg:    #FEF3C7;
    --pfl-chip-pending-text:  #92400E;
    --pfl-chip-error-bg:      #FEE2E2;
    --pfl-chip-error-text:    #991B1B;

    /* Info / security banner (PROF-47 §5). The background is the same hex as
       --pfl-indigo-light on purpose but is NOT an alias of it: soft FAQ panels
       and info banners are different roles and may diverge later. */
    --pfl-info-bg:      #EEF2FF;
    --pfl-info-text:    #1E3A8A;

    /* Gradients */
    --pfl-grad-primary: linear-gradient(135deg, var(--pfl-navy) 0%, var(--pfl-indigo) 100%);

    /* PROF-47 §2.3 mandates 90deg for primary CTA buttons. --pfl-grad-primary
       above is 135deg and is already painted across the live site (hero bands,
       gradient headings, the audience toggle), so it is left alone rather than
       repurposed — swapping its angle would silently restyle those. New CTA
       work uses the two below. */
    --pfl-grad-cta:       linear-gradient(90deg, var(--pfl-navy), var(--pfl-indigo));
    --pfl-grad-cta-hover: linear-gradient(90deg, var(--pfl-navy-hover), var(--pfl-indigo-hover));

    /* Radius / elevation */
    --pfl-radius:       12px;
    --pfl-radius-lg:    18px;
    --pfl-shadow-sm:    0 2px 8px rgba(15, 31, 75, 0.08);
    --pfl-shadow-md:    0 8px 24px rgba(15, 31, 75, 0.12);

    /* Typography */
    --pfl-font: 'Plus Jakarta Sans', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Buttons ---------- */

/* Primary — navy→indigo gradient, white text */
.pfl-btn-primary,
.pfl-btn-primary.mud-button-root {
    background: var(--pfl-grad-primary) !important;
    color: var(--pfl-on-dark) !important;
    border: none !important;
    border-radius: var(--pfl-radius) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-transform: none !important;
    box-shadow: var(--pfl-shadow-sm) !important;
    transition: filter .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
.pfl-btn-primary:hover,
.pfl-btn-primary.mud-button-root:hover {
    filter: brightness(1.08);
    box-shadow: var(--pfl-shadow-md) !important;
    transform: translateY(-1px);
}

/* Secondary — white with indigo border + indigo text */
.pfl-btn-secondary,
.pfl-btn-secondary.mud-button-root {
    background: var(--pfl-bg) !important;
    color: var(--pfl-indigo) !important;
    border: 1.5px solid var(--pfl-indigo) !important;
    border-radius: var(--pfl-radius) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-transform: none !important;
    transition: background .2s ease, color .2s ease, transform .2s ease !important;
}
.pfl-btn-secondary:hover,
.pfl-btn-secondary.mud-button-root:hover {
    background: var(--pfl-indigo-light) !important;
    transform: translateY(-1px);
}

/* On-dark — transparent with white border/text, for navy hero bands */
.pfl-btn-on-dark,
.pfl-btn-on-dark.mud-button-root {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: var(--pfl-radius) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    transition: background .2s ease !important;
}
.pfl-btn-on-dark:hover,
.pfl-btn-on-dark.mud-button-root:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

/* Accent — warm orange, sparing use (CTAs that need to pop) */
.pfl-btn-accent,
.pfl-btn-accent.mud-button-root {
    background: var(--pfl-accent) !important;
    color: var(--pfl-navy) !important;
    border: none !important;
    border-radius: var(--pfl-radius) !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

/* ---------- No uppercase, anywhere ---------- */

/* Uppercase Greek drops its accents, so any text-transform:uppercase renders
   Greek labels misspelt — "Επαγγελματικά" became "ΕΠΑΓΓΕΛΜΑΤΙΚΆ" (correct:
   ΕΠΑΓΓΕΛΜΑΤΙΚΑ), "Επαλήθευση" became "ΕΠΑΛΉΘΕΥΣΗ". The brand buttons above
   are sentence case anyway, so MudBlazor's Material-style uppercase is the
   odd one out.

   MudBlazor applies it two different ways, which is why fixing only the first
   left the buttons broken for a while:
     1. literally  — `.mud-tab { text-transform: uppercase }`
     2. by variable — `text-transform: var(--mud-typography-button-text-transform)`
        on .mud-button/.mud-fab/.mud-typography-button, and the same pattern for
        overline. Grepping the stylesheet for "uppercase" never matches these.

   The variable itself is set to "none" in the theme (Settings/ThemeConfigModel.cs
   AND Services/ThemeService.cs — there are two builders). This block is the
   backstop so a future theme edit cannot quietly reintroduce it. */
.mud-tab,
.mud-button,
.mud-fab,
.mud-typography-button,
.mud-typography-overline {
    text-transform: none !important;
}

/* Naming the MudBlazor classes is not enough: our OWN CSS is the likelier
   source. A hand-written `.pfl-field-label { text-transform: uppercase }`
   walked straight past the list above and would have shipped misspelt Greek.
   Design specs keep asking for ALL-CAPS section labels (PROF-47 §5 "PERSONAL
   DETAILS", PROF-39's field-label rule) so this WILL be attempted again.

   Substring matching rather than an explicit class list, because the brand
   classes are named `.pfl-{scope}-{role}` — .pfl-setup-eyebrow,
   .pfl-legal-hub-grouplabel, .pfl-acct-chip, .pfl-signins-daylabel — so any
   fixed list goes stale the moment a new screen lands. The `[class*="pfl-"]`
   conjunct keeps the match inside our own namespace, and over-matching is
   harmless by construction: this rule only ever REMOVES uppercasing, and no
   ProfesLink label/eyebrow/chip is allowed to be uppercase in any language.

   Note this deliberately does NOT reset letter-spacing — tracking on a
   sentence-case label is a style choice, not a spelling bug. */
[class*="pfl-"][class*="label"],
[class*="pfl-"][class*="eyebrow"],
[class*="pfl-"][class*="chip"],
[class*="pfl-"][class*="badge"],
[class*="pfl-"][class*="tag"],
[class*="pfl-"][class*="overline"],
[class*="pfl-"][class*="caps"] {
    text-transform: none !important;
}

.mud-tab {
    letter-spacing: normal !important;
}

/* ---------- Surfaces ---------- */

.pfl-section {
    background: var(--pfl-section) !important;
}
.pfl-section-white {
    background: var(--pfl-bg) !important;
}

.pfl-card {
    background: var(--pfl-bg);
    border: 1px solid var(--pfl-border);
    border-radius: var(--pfl-radius-lg);
    box-shadow: var(--pfl-shadow-sm);
}

/* Soft indigo panel — used for FAQ answers */
.pfl-panel-soft {
    background: var(--pfl-indigo-light) !important;
    border-radius: var(--pfl-radius);
}

/* ---------- Text helpers ---------- */

.pfl-text-navy   { color: var(--pfl-navy) !important; }
.pfl-text-indigo { color: var(--pfl-indigo) !important; }
.pfl-text-muted  { color: var(--pfl-text-muted) !important; }
.pfl-text-accent { color: var(--pfl-accent) !important; }

/* Gradient heading text */
.pfl-heading-gradient {
    background: var(--pfl-grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--pfl-indigo); /* fallback */
}

/* ---------- Header ---------- */

/* White header with a hairline bottom border */
.mud-appbar.mud-appbar-dense,
header.mud-appbar {
    background-color: var(--pfl-bg) !important;
    color: var(--pfl-navy) !important;
    border-bottom: 1px solid var(--pfl-border);
}

/* Clients / Professionals segmented toggle */
.pfl-aud-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--pfl-section);
    border: 1px solid var(--pfl-border);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}
.pfl-aud-toggle-item {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    color: var(--pfl-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}
.pfl-aud-toggle-item:hover {
    color: var(--pfl-indigo);
}
.pfl-aud-toggle-item.active {
    background: var(--pfl-grad-primary);
    color: var(--pfl-on-dark);
}

/* ---------- FAQ accordion ---------- */

.faq-accordion {
    text-align: left;
}
.faq-accordion .mud-expand-panel {
    border: 1px solid var(--pfl-border);
    border-radius: var(--pfl-radius) !important;
    margin-bottom: 12px;
    overflow: hidden;
    background: var(--pfl-bg);
}
.faq-accordion .mud-expand-panel-header {
    border-radius: var(--pfl-radius);
}
.faq-accordion .mud-expand-panel-text {
    color: var(--pfl-navy);
    font-weight: 600;
}
/* Soft indigo answer panel */
.faq-accordion .mud-expand-panel-content,
.faq-accordion .mud-collapse-container .mud-expand-panel-content {
    background: var(--pfl-indigo-light);
}
.faq-accordion .mud-expand-panel-content .mud-typography {
    color: var(--pfl-text);
}

/* ---------- Typography base ---------- */

.pfl-font { font-family: var(--pfl-font) !important; }