/* =============================================================================
   v2-components.css — DawlessArcade web "v2" shared component layer
   -----------------------------------------------------------------------------
   Mirrors the .NET MAUI mobile app's reusable controls.

   CANONICAL v2 RULES encoded here:
     - Flat only. NO gradients anywhere.
     - One canonical Card: flat bg, 1px subtle border, card-radius, NO shadow.
     - SectionCard = Card + a single 4px teal LEFT rail (the only sanctioned rail).
     - One flat AccentHero CTA per page (.btn-cta).
     - Buttons flat, 8px radius, 44px min touch target (CTA 48px).
     - Inputs get a magenta focus ring.

   Everything is driven by the CSS token layer in site.css. NEVER hardcode hex
   here except unavoidable "ink" colours that sit on a fixed accent fill:
     - #06262a (dark teal ink) on the teal flat-primary button
     - #fff      (white glyph) on the section brand-icon
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Global heading font — propagate Sora to every existing view.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Sora', sans-serif;
}

/* -----------------------------------------------------------------------------
   2. .v2-card — the ONE canonical card. Flat. No shadow.
   --------------------------------------------------------------------------- */
.v2-card {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    box-shadow: none;
}

/* -----------------------------------------------------------------------------
   3. .v2-section-card — Card + a single 4px teal LEFT rail.
      CSS-only: thicken the left border to 4px teal, keep the other three
      sides on the 1px subtle border. (Cleaner than a nested rail div.)
   --------------------------------------------------------------------------- */
.v2-section-card {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--rail-color);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    box-shadow: none;
}

/* -----------------------------------------------------------------------------
   4. .title-card — page header row.
      Left column: greeting / title / subtitle. Right: trailing slot (CTA, etc.)
      Empty greeting/subtitle/trailing simply aren't rendered by the tag helper,
      so no extra spacing leaks in.
   --------------------------------------------------------------------------- */
.title-card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: var(--section-gap);
}

.title-card-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* allow text truncation inside flex */
}

.title-card-greeting {
    /* mirrors .v2-caption */
    font-size: 0.75rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.title-card-title {
    /* mirrors .v2-h1 — let the global .v2-h1 do the heavy lifting if applied,
       but keep a sensible default here so the helper output stands alone. */
    margin: 0;
    color: var(--text-primary);
}

.title-card-subtitle {
    /* mirrors .v2-body-sm */
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.title-card-trailing {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 8px;
}

/* -----------------------------------------------------------------------------
   5. .status-pill — tinted status pills.
      bg = the matching *-surface token, fg = the matching status token.
   --------------------------------------------------------------------------- */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 10px;
    /* mirrors .v2-label */
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.status-pill .lucide {
    font-size: 0.875rem;
    line-height: 1;
}

.status-pill.status-success {
    background: var(--success-surface);
    color: var(--success);
}

.status-pill.status-warning {
    background: var(--warning-surface);
    color: var(--warning);
}

.status-pill.status-error {
    background: var(--error-surface);
    color: var(--error);
}

.status-pill.status-info {
    background: var(--info-surface);
    color: var(--info);
}

.status-pill.status-neutral {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   6. Buttons — all flat, 8px radius, no gradient.
      Distinct names so we never clobber Bootstrap's .btn-primary.
      Min touch target 44px; the single hero CTA is 48px.
   --------------------------------------------------------------------------- */
.btn-cta,
.btn-flat-primary,
.btn-flat-secondary,
.btn-flat-tertiary,
.btn-flat-destructive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 8px;
    font-family: 'Sora', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-image: none; /* belt-and-braces: never a gradient */
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* The single flat AccentHero CTA (one per page). 48px tall, bold. */
.btn-cta {
    min-height: 48px;
    background: var(--accent-hero);
    color: var(--accent-hero-text);
    font-weight: 700;
}

.btn-cta:hover {
    /* darken the hero fill slightly, no gradient */
    background: color-mix(in srgb, var(--accent-hero) 88%, black);
    color: var(--accent-hero-text);
}

/* Flat primary — teal fill, dark teal ink. */
.btn-flat-primary {
    background: var(--accent-primary);
    color: #06262a; /* fixed ink that reads on teal across themes */
}

.btn-flat-primary:hover {
    background: color-mix(in srgb, var(--accent-primary) 88%, black);
    color: #06262a;
}

/* Flat secondary — outlined teal. */
.btn-flat-secondary {
    background: transparent;
    border: 1.5px solid var(--accent-primary);
    color: var(--accent-primary);
}

.btn-flat-secondary:hover {
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    color: var(--accent-primary);
}

/* Flat tertiary — text-only teal. */
.btn-flat-tertiary {
    background: transparent;
    color: var(--accent-primary);
}

.btn-flat-tertiary:hover {
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    color: var(--accent-primary);
}

/* Flat destructive — tinted error surface. */
.btn-flat-destructive {
    background: var(--error-surface);
    color: var(--error);
}

.btn-flat-destructive:hover {
    background: color-mix(in srgb, var(--error-surface) 80%, var(--error));
    color: var(--error);
}

/* Shared disabled state for all flat buttons. */
.btn-cta:disabled,
.btn-cta.disabled,
.btn-flat-primary:disabled,
.btn-flat-primary.disabled,
.btn-flat-secondary:disabled,
.btn-flat-secondary.disabled,
.btn-flat-tertiary:disabled,
.btn-flat-tertiary.disabled,
.btn-flat-destructive:disabled,
.btn-flat-destructive.disabled {
    background: var(--locked);
    border-color: var(--locked);
    color: var(--text-muted);
    cursor: not-allowed;
    pointer-events: none;
}

/* -----------------------------------------------------------------------------
   7. .v2-field — input wrapper with a magenta focus ring.
      .v2-input — the bare inner input element.
   --------------------------------------------------------------------------- */
.v2-field {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    padding: 10px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.v2-field:focus-within {
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring) 35%, transparent);
}

.v2-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.4;
}

.v2-input::placeholder {
    color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   8. .brand-icon — Lucide glyph chips in four sizes + a --pink accent variant.
   --------------------------------------------------------------------------- */
.brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.brand-icon .lucide {
    line-height: 1;
}

/* Hero: 44x44 round, tertiary bg, teal glyph ~20px. */
.brand-icon--hero {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--accent-primary);
}

.brand-icon--hero .lucide {
    font-size: 20px;
    color: var(--accent-primary);
}

/* Section: 32x32 round, teal fill, white glyph ~14px. */
.brand-icon--section {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: #fff;
}

.brand-icon--section .lucide {
    font-size: 14px;
    color: #fff; /* fixed white glyph on the teal fill */
}

/* Action: 32x32 round, tertiary bg, teal glyph ~14px. */
.brand-icon--action {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--accent-primary);
}

.brand-icon--action .lucide {
    font-size: 14px;
    color: var(--accent-primary);
}

/* Inline: no container chrome, teal glyph ~14px. */
.brand-icon--inline {
    background: transparent;
}

.brand-icon--inline .lucide {
    font-size: 14px;
    color: var(--accent-primary);
}

/* --pink accent variant — override the relevant colour to magenta.
   Works for both the container glyph colour and the section fill. */
.brand-icon--hero.brand-icon--pink .lucide,
.brand-icon--action.brand-icon--pink .lucide,
.brand-icon--inline.brand-icon--pink .lucide {
    color: var(--accent-secondary);
}

.brand-icon--section.brand-icon--pink {
    background: var(--accent-secondary);
}

/* Semantic tone accents (error|warning|success|info) — recolour the glyph for
   hero/action/inline (the section variant recolours its fill instead). Lets views
   express an error/warning/success/info hero without hand-authored inline styles. */
.brand-icon--hero.brand-icon--error .lucide,
.brand-icon--action.brand-icon--error .lucide,
.brand-icon--inline.brand-icon--error .lucide { color: var(--error); }
.brand-icon--section.brand-icon--error { background: var(--error); }

.brand-icon--hero.brand-icon--warning .lucide,
.brand-icon--action.brand-icon--warning .lucide,
.brand-icon--inline.brand-icon--warning .lucide { color: var(--warning); }
.brand-icon--section.brand-icon--warning { background: var(--warning); }

.brand-icon--hero.brand-icon--success .lucide,
.brand-icon--action.brand-icon--success .lucide,
.brand-icon--inline.brand-icon--success .lucide { color: var(--success); }
.brand-icon--section.brand-icon--success { background: var(--success); }

.brand-icon--hero.brand-icon--info .lucide,
.brand-icon--action.brand-icon--info .lucide,
.brand-icon--inline.brand-icon--info .lucide { color: var(--info); }
.brand-icon--section.brand-icon--info { background: var(--info); }