/*
 * GB Design System - design tokens ONLY.
 *
 * Every component's appearance lives in its own <Component>.razor.css (CSS isolation).
 * This file exists because custom properties are the ONE thing that pierces an isolation
 * boundary: a scoped `.gb-group[b-x7f3]` rule cannot be read from another component, but
 * `var(--gb-acc)` resolves anywhere. So tokens go global; nothing else does.
 *
 * RULE 1 - every token derives from a Metronic --kt-* token, never a raw hex.
 *   Metronic already redefines its --kt-* values under [data-theme=dark], so deriving from
 *   them means the whole design system themes itself and this file needs NO dark-mode block.
 *   Writing #fff here would forfeit that: the generated Sales page's `.gm-group { background:#fff }`
 *   is pure white in the dark theme, which is exactly the bug we are not reproducing.
 *
 * RULE 2 - `!important` is forbidden in any gb-* file.
 *   CSS isolation already outranks the Metronic bundle on specificity, so a rule that needs
 *   !important is a signal that the component is emitting the WRONG Metronic class. Fix the
 *   component, not the stylesheet. (The generated form carries 210 !important declarations
 *   precisely because it redefines what btn-light-primary means instead of using btn-primary.)
 *
 * RULE 3 - logical properties only: margin-inline-end, not margin-right; text-align: start,
 *   not right; inset-inline-start, not left. The app is RTL-first but `dir` does the work.
 *   Never `flex-direction: row-reverse` - combined with dir=rtl it double-reverses.
 *
 * See docs/gb-design-system.md.
 */

:root {
    /* ---- accent -------------------------------------------------------------------
       Overridable per subtree with an inline style="--gb-acc: ...", which is how
       GbFieldGroup applies SysFormComponentGroup.ColorCode without a global rule. */
    --gb-acc: var(--kt-primary);
    --gb-acc-on: var(--kt-primary-inverse);
    --gb-acc-soft: var(--kt-primary-light);
    --gb-acc-strong: var(--kt-primary-active);

    /* ---- structure ---------------------------------------------------------------- */
    --gb-line: var(--kt-border-dashed-color);
    --gb-line-solid: var(--kt-border-color);
    --gb-line-soft: var(--kt-gray-200);
    --gb-surface: var(--kt-card-bg);
    --gb-surface-2: var(--kt-gray-100);
    --gb-shadow: var(--kt-card-box-shadow);

    /* ---- text --------------------------------------------------------------------- */
    --gb-text: var(--kt-text-gray-800);

    /* Dashboard ink. The stat cards carry much larger type than body copy, and --gb-text
       (gray-800, #3F4254) reads washed out at 32px next to the reference, which uses near
       black. gray-900 matches the reference's card title exactly and is within a few units of
       its KPI value. Still a --kt-* token, so dark mode is unaffected. */
    --gb-ink: var(--kt-text-gray-900);

    /* Label ink. --gb-muted (#A1A5B7) is too light for a card label; the reference sits around
       gray-600. */
    --gb-ink-soft: var(--kt-text-gray-600);
    --gb-muted: var(--kt-text-muted);

    /* ---- semantic ----------------------------------------------------------------- */
    --gb-danger: var(--kt-danger);
    --gb-danger-soft: var(--kt-danger-light);
    --gb-ok: var(--kt-success);
    --gb-ok-soft: var(--kt-success-light);

    /* ---- geometry & rhythm --------------------------------------------------------
       The one genuinely new idea in the generated page's CSS was its softer radius.
       Metronic has no token for it, so these are the only literals in this file. */
    --gb-radius: 0.625rem;
    --gb-radius-lg: 1rem;
    --gb-radius-pill: 50rem;
    --gb-gap: 0.75rem;
    --gb-gap-sm: 0.5rem;

    /* ---- focus -------------------------------------------------------------------
       A POSITIVE focus ring. The generated form did
       `*:not(.btn):not(.gm-group):focus { box-shadow: none !important }`, which strips
       focus indication from every control in the form - a WCAG 2.4.7 failure. */
    --gb-focus-ring: 0 0 0 0.2rem color-mix(in srgb, var(--gb-acc) 25%, transparent);
}

/* ---- dashboard layout utilities ----------------------------------------------------------
 * These are applied by CONSUMERS to their own markup (inside GbStatPanel's More slot, in the
 * gallery, anywhere a page composes stat cards), so they cannot live in a component's scoped
 * stylesheet: CSS isolation tags only the elements that component renders itself, and a scoped
 * rule would silently fail to match - which it did, stacking every panel full width.
 *
 * Same reasoning as the tokens above: anything a page writes in its own markup is global.
 *
 * The reference pairs a wide panel with a narrow one, then two equal panels, collapsing to a
 * single column on a narrow viewport.
 */
.gb-stat-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-block-start: 16px;
}

.gb-stat-row--even {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 1200px) {
    .gb-stat-row,
    .gb-stat-row--even {
        grid-template-columns: 1fr;
    }
}