/* =============================================================
   Core360 Brand Layer · v1.0 (Brand Kit Abril 2026)
   -------------------------------------------------------------
   Loads AFTER core360-tokens.css, site.css, pos.css, overrides.
   Locks identity:
     · Iconography: Font Awesome 6 SHARP (paid kit)
         Default     → fa-sharp fa-regular  (light, geometric, brand voice)
         Emphasis    → fa-sharp fa-solid    (only on primary actions / status)
         Branded     → fa-brands            (Visa, MC, etc., kept as-is)
     · Typography:  Space Grotesk (display) · Inter (UI) · JetBrains Mono (data)
     · Components:  cards, chips, eyebrows, buttons, section heads
     · Motion:      cubic-bezier(.2,.8,.2,1) 150–250ms
   No purple. No bouncy easing. No emoji. No pure white at scale.
   ============================================================= */

/* ─────────────────────────────────────────────
   1. ICON ROLE SYSTEM  (Font Awesome SHARP — light + dark aware)
   ─────────────────────────────────────────────
   The user's paid FA Pro kit is loaded in App.razor. Among FA's 31 styles
   (Classic, Sharp, Slab, Chisel, Brands × Solid/Regular/Light/Thin/Duotone),
   we pick **SHARP** because it is:
     · geometric (matches the hexagonal logomark)
     · technical & precise (matches the brand voice)
     · paid-only (Bootstrap/Tailwind sites can't replicate)
   We REJECT Chisel (too casual/hand-drawn) and Slab (too heavy/blocky).

   Five icon roles — each maps to a specific Sharp weight:

   ┌───────────────────────┬──────────────────────────┬─────────────────────────┐
   │ ROLE                  │ MARKUP                   │ WHEN TO USE             │
   ├───────────────────────┼──────────────────────────┼─────────────────────────┤
   │ default (regular)     │ fa-sharp fa-regular      │ 90% of all icons        │
   │ emphasis (solid)      │ fa-sharp fa-solid        │ primary CTA, active     │
   │ decorative (light)    │ fa-sharp fa-light        │ empty states, hero      │
   │ subtle (thin)         │ fa-sharp fa-thin         │ section headers, kicker │
   │ feature (duotone)     │ fa-sharp-duotone fa-solid│ module cards, KPIs      │
   └───────────────────────┴──────────────────────────┴─────────────────────────┘

   Convention in NEW markup:
       <i class="c360-i fa-sharp fa-regular fa-receipt"></i>             default
       <i class="c360-i c360-i-strong fa-sharp fa-solid fa-receipt"></i> emphasis
       <i class="c360-i c360-i-deco fa-sharp fa-light fa-receipt"></i>   decorative
       <i class="c360-i fa-sharp fa-thin fa-receipt"></i>                hairline
       <i class="c360-i c360-i-feature fa-sharp-duotone fa-solid fa-receipt"></i>  duotone

   Color is derived from THEME TOKENS (light/dark aware), never hardcoded.
   Legacy `fa-solid` is auto-promoted to Sharp Regular below.
   ============================================================= */

/* ── Family auto-upgrade ─────────────────────────────────────
   Legacy bare `fa-solid` (1700+ usages) is rendered as Sharp Regular
   for brand coherence. Brands, duotone, and intentionally-strong
   solid icons (`.c360-i-strong`, primary-button icons, status circles)
   keep their declared family/weight. */
.c360-i,
i.fa-solid:not(.c360-i-strong):not(.fa-brands):not(.fa-duotone):not(.fa-sharp-duotone):not([class*="fa-circle"]) {
    font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Pro", "Font Awesome 6 Free" !important;
    font-weight: 400 !important;            /* Regular */
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Status / dot icons stay solid for visibility */
i.fa-solid.fa-circle,
i.fa-solid.fa-circle-check,
i.fa-solid.fa-circle-xmark,
i.fa-solid.fa-circle-exclamation,
i.fa-solid.fa-circle-info,
i.fa-solid.fa-circle-dot,
.c360-i-strong,
.btn-primary i,
[render-style="primary"] i,
.dxbl-btn-primary i,
.dxbl-btn-danger i,
.btn-danger i {
    font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Pro", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;            /* Sharp Solid */
}

/* Light role — empty states, hero illustrations, decorative */
.c360-i-deco,
i.fa-light:not(.fa-brands) {
    font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Pro" !important;
    font-weight: 300 !important;            /* Sharp Light */
}

/* Thin role — section headers, kickers, ultra-fine */
i.fa-thin {
    font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Pro" !important;
    font-weight: 100 !important;            /* Sharp Thin */
}

/* ── Duotone defaults · TWO USE-CASES, ONE FAMILY ──

   1. FEATURE role (`.c360-i-feature`) → KPI cards, module tiles.
      Explicit two-tone: brand primary + accent. Reads as a hero.

   2. UI role (default duotone inside row toolbars / inline icons) →
      Both layers bound to `currentColor`. Primary 100%, secondary 35%.
      The whole icon stays in ONE tonal family but gains layered depth.
      Hue follows the parent's text color, so when a button hovers and
      the text color shifts (e.g. slate → Marino), the icon follows. */

i.fa-sharp-duotone,
i.fa-duotone {
    --fa-primary-color:   currentColor;
    --fa-secondary-color: currentColor;
    --fa-primary-opacity:   1;
    --fa-secondary-opacity: 0.35;
}

/* Feature role overrides the default with explicit brand colors */
.c360-i-feature {
    --fa-primary-color:   var(--c360-primary,  var(--c360-marino));
    --fa-secondary-color: var(--c360-accent,   var(--c360-electric));
    --fa-primary-opacity:   1;
    --fa-secondary-opacity: 0.40;
}
[data-theme="dark"] .c360-i-feature {
    --fa-primary-color:   var(--c360-accent, var(--c360-electric));
    --fa-secondary-color: var(--c360-cyan);
    --fa-primary-opacity:   1;
    --fa-secondary-opacity: 0.55;
}

/* Slightly lift the secondary opacity in dark mode so the second layer
   still reads against deep navy surfaces */
[data-theme="dark"] i.fa-sharp-duotone:not(.c360-i-feature),
[data-theme="dark"] i.fa-duotone:not(.c360-i-feature) {
    --fa-secondary-opacity: 0.45;
}

/* ── Sizes ──
   Aligned with the type scale so icons sit on text baseline. */
.c360-i        { font-size: 1em; line-height: 1; vertical-align: -0.0625em; }
.c360-i-xs     { font-size: 11px; }
.c360-i-sm     { font-size: 13px; }
.c360-i-md     { font-size: 16px; }
.c360-i-lg     { font-size: 20px; }
.c360-i-xl     { font-size: 28px; }
.c360-i-2xl    { font-size: 40px; }
.c360-i-3xl    { font-size: 56px; }       /* hero / empty states */

/* ── Color tokens (theme-aware by default) ──
   Defaults use semantic theme tokens so light/dark switch is automatic.
   Brand color helpers (-marino, -royal, etc.) are kept for one-off accents. */
.c360-i             { color: var(--c360-text-secondary, var(--c360-graphite)); }
.c360-i-default     { color: var(--c360-text-secondary); }   /* secondary text color */
.c360-i-strong      { color: var(--c360-text); }             /* primary text color */
.c360-i-muted       { color: var(--c360-text-muted); }
.c360-i-on-brand    { color: var(--c360-text-on-brand); }    /* on cobalt / gradient bg */
.c360-i-on-surface  { color: var(--c360-text); }
.c360-i-deco        { color: var(--c360-border-strong); opacity: .85; }

/* Theme-aware semantic roles */
.c360-i-primary     { color: var(--c360-primary); }
.c360-i-accent      { color: var(--c360-accent); }
.c360-i-signal      { color: var(--c360-signal); }
.c360-i-success     { color: var(--c360-success); }
.c360-i-warning     { color: var(--c360-warning); }
.c360-i-danger      { color: var(--c360-danger); }
.c360-i-info        { color: var(--c360-info); }

/* Brand color overrides (use only when a specific brand color is required regardless of theme) */
.c360-i-marino      { color: var(--c360-marino); }
.c360-i-royal       { color: var(--c360-royal); }
.c360-i-electric    { color: var(--c360-electric); }
.c360-i-cyan        { color: var(--c360-cyan); }
.c360-i-slate       { color: var(--c360-slate); }

/* Dark-theme overrides — secondary/decorative icons need a tiny brightness lift
   in dark mode to stay legible against the deep navy surfaces. */
[data-theme="dark"] .c360-i-deco       { color: var(--c360-border-strong); opacity: .9; }
[data-theme="dark"] .c360-i-marino     { color: var(--c360-electric); }   /* Marino doesn't render on dark navy */
[data-theme="dark"] .c360-i-royal      { color: var(--c360-electric); }   /* Royal too dim on dark */

/* Icons sitting on a primary/coloured DevExpress button must always be white,
   regardless of theme. Their default theme-aware token would render dark text. */
.dxbl-btn-primary .c360-i,
.dxbl-btn-success .c360-i,
.dxbl-btn-danger .c360-i,
.dxbl-btn-info .c360-i,
.dxbl-btn-warning .c360-i,
.dxbl-btn-dark .c360-i,
.dxbl-btn-primary i.fa-sharp,
.dxbl-btn-success i.fa-sharp,
.dxbl-btn-danger i.fa-sharp,
.dxbl-btn-info i.fa-sharp,
.dxbl-btn-warning i.fa-sharp,
.dxbl-btn-dark i.fa-sharp {
    color: var(--c360-text-on-brand) !important;
}

/* Auto-detect dark theme via OS preference if no explicit data-theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .c360-i-marino { color: var(--c360-electric); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .c360-i-royal  { color: var(--c360-electric); }
}

/* ─────────────────────────────────────────────
   2. TYPOGRAPHY ENFORCEMENT
   ───────────────────────────────────────────── */

body,
.dxbl-text,
.dxbl-input,
.dxbl-textbox-input,
.dxbl-combobox-input,
.dxbl-grid {
    font-family: var(--c360-font-body) !important;   /* Inter */
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.dxbl-popup-header,
.dxbl-card-header,
.modal-title {
    font-family: var(--c360-font-display) !important; /* Space Grotesk */
    letter-spacing: var(--c360-tracking-tight);
    color: var(--c360-text);
}

.mono, .c360-mono,
.numeric, .number,
code, kbd, samp, pre {
    font-family: var(--c360-font-mono) !important;    /* JetBrains Mono */
    letter-spacing: var(--c360-tracking-mono);
}

/* ─────────────────────────────────────────────
   3. EYEBROW · the brand kit's `— TEXT` mono kicker
   ───────────────────────────────────────────── */

.c360-eyebrow {
    font-family: var(--c360-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--c360-accent);
    display: inline-block;
}
.c360-eyebrow::before { content: "— "; opacity: .85; }

/* ─────────────────────────────────────────────
   4. SECTION HEAD · `— NN  Title          subtitle`
   ───────────────────────────────────────────── */

.c360-section-head {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin: 32px 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--c360-border);
}
.c360-section-num {
    font-family: var(--c360-font-mono);
    font-size: 13px;
    color: var(--c360-accent);
    font-weight: 500;
}
.c360-section-title {
    font-family: var(--c360-font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    color: var(--c360-text);
    margin: 0;
}
.c360-section-sub {
    margin-left: auto;
    font-size: 13px;
    color: var(--c360-text-muted);
    text-align: right;
    max-width: 360px;
}

/* ─────────────────────────────────────────────
   5. CARDS · brand recipe (14–20px radius, mist border, fog/paper surface, hover lift)
   ───────────────────────────────────────────── */

.c360-card {
    background: var(--c360-surface);
    color: var(--c360-text);
    border: 1px solid var(--c360-border);
    border-radius: var(--c360-radius-lg);
    padding: 24px;
    box-shadow: var(--c360-shadow-sm);
    transition: transform 250ms cubic-bezier(.2,.8,.2,1),
                box-shadow 250ms cubic-bezier(.2,.8,.2,1),
                border-color 250ms cubic-bezier(.2,.8,.2,1);
}
.c360-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--c360-shadow-lg);
    border-color: var(--c360-primary);
}
.c360-card-flat        { box-shadow: none; }
.c360-card-flat:hover  { transform: none; box-shadow: var(--c360-shadow-sm); }

.c360-card-lg          { border-radius: var(--c360-radius-xl); padding: 28px; }
.c360-card-sm          { border-radius: var(--c360-radius-md); padding: 16px; }

/* ─────────────────────────────────────────────
   6. CHIPS · pill, mist bg, navy text, JetBrains Mono 11px
   ───────────────────────────────────────────── */

.c360-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--c360-radius-pill);
    background: var(--c360-surface-sunken);
    color: var(--c360-text);
    font-family: var(--c360-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 1.4;
    white-space: nowrap;
}
.c360-chip::before     { content: "— "; opacity: .85; }
.c360-chip-no-prefix::before { content: ""; }

.c360-chip-primary     { background: var(--c360-primary);        color: var(--c360-text-on-brand); }
.c360-chip-accent      { background: var(--c360-accent-subtle);  color: var(--c360-accent); }
.c360-chip-info        { background: var(--c360-info-subtle);    color: var(--c360-info); }
.c360-chip-success     { background: var(--c360-success-subtle); color: var(--c360-success); }
.c360-chip-warning     { background: var(--c360-warning-subtle); color: var(--c360-warning); }
.c360-chip-danger      { background: var(--c360-danger-subtle);  color: var(--c360-danger); }

/* ─────────────────────────────────────────────
   7. BUTTONS · brand recipe (8px radius, Inter 600, darken on hover, scale on press)
   These are utility classes for non-DevExpress buttons (raw <button>).
   DevExpress buttons keep their RenderStyle but inherit our font/colors via overrides.
   ───────────────────────────────────────────── */

.c360-btn,
.c360-btn-primary,
.c360-btn-ghost,
.c360-btn-grad,
.c360-btn-danger {
    --_btn-py: 10px;
    --_btn-px: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--c360-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: var(--_btn-py) var(--_btn-px);
    border-radius: var(--c360-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 200ms cubic-bezier(.2,.8,.2,1),
                color           200ms cubic-bezier(.2,.8,.2,1),
                border-color    200ms cubic-bezier(.2,.8,.2,1),
                transform       150ms cubic-bezier(.2,.8,.2,1);
}
.c360-btn:active,
.c360-btn-primary:active,
.c360-btn-ghost:active,
.c360-btn-grad:active,
.c360-btn-danger:active   { transform: scale(.98); }

.c360-btn-primary    { background: var(--c360-primary);       color: var(--c360-text-on-brand); }
.c360-btn-primary:hover { background: var(--c360-primary-hover); color: var(--c360-text-on-brand); }
.c360-btn-primary:active { background: var(--c360-primary-active); }

.c360-btn-ghost      { background: var(--c360-surface);       border-color: var(--c360-border); color: var(--c360-text); }
.c360-btn-ghost:hover { border-color: var(--c360-primary);     color: var(--c360-text); background: var(--c360-surface-raised); }

.c360-btn-grad       { background: var(--c360-gradient-signature); color: var(--c360-text-on-brand); }
.c360-btn-grad:hover { filter: brightness(.92); color: var(--c360-text-on-brand); }

.c360-btn-danger     { background: var(--c360-danger); color: #fff; }
.c360-btn-danger:hover { background: #c83232; color: #fff; }

.c360-btn-sm  { --_btn-py: 7px;  --_btn-px: 12px; font-size: 13px; }
.c360-btn-lg  { --_btn-py: 14px; --_btn-px: 24px; font-size: 15px; }

/* ═════════════════════════════════════════════════════════════════
   ICON BUTTON · enterprise monochrome (Linear / Stripe / Notion DNA)
   ═════════════════════════════════════════════════════════════════
   Row toolbars in world-class SaaS are MONOCHROME. Color signals
   STATE (a paid pill, an overdue badge), never ACTION TYPE.
   Five identical PDF / XML / Email / Edit / Delete buttons in five
   different colors reads as a carnival, not a tool.

   Default state  → flat, transparent, slate icon
   Hover          → subtle slate-tint wash + Marino icon (light) /
                    Electric icon (dark) — same gesture each time
   Active row     → faint Royal underline-tint to mark "current"

   Color variants (-primary / -danger / -success / etc.) exist for
   DESTRUCTIVE confirmation contexts (delete in popup, primary CTA
   on a wizard) — NOT for grid row actions. Use them sparingly.
   ═════════════════════════════════════════════════════════════════ */
.c360-iconbtn {
    --_size: 32px;
    --_bg: transparent;
    --_fg: var(--c360-text-muted);
    --_bd: transparent;
    --_hover-bg: var(--c360-surface-sunken);
    --_hover-fg: var(--c360-text);
    --_hover-bd: var(--c360-border);

    width: var(--_size);
    height: var(--_size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--_bg);
    border: 1px solid var(--_bd);
    color: var(--_fg);
    cursor: pointer;
    transition: background-color 160ms cubic-bezier(.2,.8,.2,1),
                color           160ms cubic-bezier(.2,.8,.2,1),
                border-color    160ms cubic-bezier(.2,.8,.2,1),
                transform       120ms cubic-bezier(.2,.8,.2,1);
}
.c360-iconbtn i { font-size: 14px; line-height: 1; }
.c360-iconbtn:hover {
    background: var(--_hover-bg);
    color: var(--_hover-fg);
    border-color: var(--_hover-bd);
}
.c360-iconbtn:active { transform: scale(.94); }
.c360-iconbtn:focus-visible {
    outline: 2px solid var(--c360-border-focus);
    outline-offset: 2px;
}
.c360-iconbtn:disabled,
.c360-iconbtn[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

/* ── Primary · the ONE action that earns emphasis (e.g. View detail) ──
   Stays monochrome at rest, hovers to a refined Royal-tinted wash with
   the icon shifting to Marino — the exact pattern Linear uses for
   primary row actions. */
.c360-iconbtn-primary {
    --_bg:       transparent;
    --_fg:       var(--c360-text-secondary);
    --_bd:       transparent;
    --_hover-bg: var(--c360-primary-subtle);
    --_hover-fg: var(--c360-primary);
    --_hover-bd: transparent;
}

/* ── Color-charged variants · reserved for confirmation dialogs and
   isolated callouts (NOT for grid row toolbars). When a destructive
   action sits alone in a popup footer, these variants make the
   intent unambiguous. ── */
.c360-iconbtn-danger {
    --_bg:       transparent;
    --_fg:       var(--c360-danger);
    --_bd:       transparent;
    --_hover-bg: var(--c360-danger-subtle);
    --_hover-fg: var(--c360-danger);
    --_hover-bd: transparent;
}
.c360-iconbtn-warning {
    --_bg:       transparent;
    --_fg:       var(--c360-warning);
    --_hover-bg: var(--c360-warning-subtle);
    --_hover-fg: var(--c360-warning);
}
.c360-iconbtn-success {
    --_bg:       transparent;
    --_fg:       var(--c360-success);
    --_hover-bg: var(--c360-success-subtle);
    --_hover-fg: var(--c360-success);
}
.c360-iconbtn-accent {
    --_bg:       transparent;
    --_fg:       var(--c360-accent);
    --_hover-bg: var(--c360-accent-subtle);
    --_hover-fg: var(--c360-accent);
}
.c360-iconbtn-info {
    --_bg:       transparent;
    --_fg:       var(--c360-info);
    --_hover-bg: var(--c360-info-subtle);
    --_hover-fg: var(--c360-info);
}

/* ── Sizes ── */
.c360-iconbtn-sm { --_size: 28px; border-radius: 6px; }
.c360-iconbtn-sm i { font-size: 12px; }
.c360-iconbtn-lg { --_size: 40px; border-radius: 10px; }
.c360-iconbtn-lg i { font-size: 16px; }

/* ── Group ──
   Tight rhythm for grid toolbars; the divider variant adds a hairline
   between conceptual groups (e.g. "Read actions | Document actions"). */
.c360-iconbtn-group {
    display: inline-flex;
    gap: 2px;
    align-items: center;
    padding: 2px;
    border-radius: 10px;
    background: transparent;
}
.c360-iconbtn-group--bordered {
    background: var(--c360-surface);
    border: 1px solid var(--c360-border);
}
.c360-iconbtn-divider {
    width: 1px;
    height: 18px;
    background: var(--c360-border);
    margin: 0 4px;
    flex: 0 0 auto;
}

/* ─────────────────────────────────────────────
   8. STATUS BADGES · for IsActive / Pending / etc. (replaces .pos-badge-*)
   ───────────────────────────────────────────── */

.c360-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--c360-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .05em;
    padding: 3px 9px;
    border-radius: var(--c360-radius-pill);
    line-height: 1.4;
}
.c360-badge i        { font-size: 7px; }
.c360-badge-active   { background: var(--c360-success-subtle); color: var(--c360-success); }
.c360-badge-inactive { background: var(--c360-surface-sunken); color: var(--c360-text-muted); }
.c360-badge-pending  { background: var(--c360-warning-subtle); color: var(--c360-warning); }
.c360-badge-danger   { background: var(--c360-danger-subtle);  color: var(--c360-danger); }
.c360-badge-info     { background: var(--c360-info-subtle);    color: var(--c360-info); }

/* ─────────────────────────────────────────────
   9. PAGE WRAPPER + EMPTY STATES (brand-compliant)
   ───────────────────────────────────────────── */

.c360-page {
    background: var(--c360-bg);
    color: var(--c360-text);
    min-height: 100vh;
}
.c360-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}
.c360-page-title {
    font-family: var(--c360-font-display);
    font-size: clamp(1.5rem, 3vw, 1.75rem);
    font-weight: 600;
    color: var(--c360-text);
    margin: 0;
    line-height: 1.15;
}
.c360-page-subtitle {
    font-family: var(--c360-font-body);
    font-size: 13px;
    color: var(--c360-text-muted);
    margin: 4px 0 0;
}

.c360-empty {
    text-align: center;
    padding: 48px 24px;
    background: var(--c360-surface);
    border: 1px dashed var(--c360-border);
    border-radius: var(--c360-radius-lg);
}
.c360-empty > i  { color: var(--c360-border-strong); font-size: 56px; opacity: .7; }
.c360-empty h5   { color: var(--c360-text); margin: 16px 0 4px; }
.c360-empty p    { color: var(--c360-text-muted); font-size: 13px; margin: 0 0 16px; }

/* ─────────────────────────────────────────────
   10. DEVEXPRESS BUTTON BRAND ALIGNMENT
   ───────────────────────────────────────────── */

.dxbl-btn {
    font-family: var(--c360-font-body) !important;
    font-weight: 600 !important;
    border-radius: var(--c360-radius-sm) !important;
    transition: background-color 200ms cubic-bezier(.2,.8,.2,1),
                transform        150ms cubic-bezier(.2,.8,.2,1) !important;
}
.dxbl-btn:active { transform: scale(.98); }

.dxbl-btn-primary {
    background: var(--c360-primary) !important;
    border-color: var(--c360-primary) !important;
    color: var(--c360-text-on-brand) !important;
}
.dxbl-btn-primary:hover {
    background: var(--c360-primary-hover) !important;
    border-color: var(--c360-primary-hover) !important;
}

/* ─────────────────────────────────────────────
   11. POPUP HEADER POLISH
   ───────────────────────────────────────────── */

.dxbl-popup-header {
    border-bottom: 1px solid var(--c360-border) !important;
}
.dxbl-popup-header-text {
    font-family: var(--c360-font-display) !important;
    font-weight: 600 !important;
    color: var(--c360-text) !important;
    letter-spacing: -.01em;
}

/* ─────────────────────────────────────────────
   12. ACCESSIBILITY · focus rings stay on-brand (theme-aware)
   ───────────────────────────────────────────── */

:focus-visible {
    outline: 2px solid var(--c360-border-focus) !important;
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────
   13. ICON-IN-CONTEXT FALLBACKS
   When an icon sits inside a card/button/chip without an explicit color,
   inherit from the parent so theme switching is automatic.
   ───────────────────────────────────────────── */
.c360-card  i:not([class*="c360-i-"]):not([class*="text-"]),
.c360-chip  i:not([class*="c360-i-"]):not([class*="text-"]),
.c360-badge i:not([class*="c360-i-"]):not([class*="text-"]) {
    color: inherit;
}

/* =============================================================
   14. HOME DASHBOARD LAYOUT
   Inspired by QuickBooks Online structure (KPI strip + glance grid),
   expressed through Core360 brand: navy/cobalt/cyan, JetBrains Mono
   numerics, Sharp Duotone feature icons, area-spline cash flow.
   ============================================================= */

.c360-home {
    padding: 24px clamp(16px, 2.5vw, 32px) 64px;
    background: var(--c360-bg);
    color: var(--c360-text);
    min-height: 100vh;
}

/* ── Hero greeting ── */
.c360-home-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--c360-border);
}
.c360-home-hello {
    font-family: var(--c360-font-mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--c360-accent);
}
.c360-home-hello::before { content: "— "; opacity: .85; }
.c360-home-title {
    font-family: var(--c360-font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 600;
    color: var(--c360-text);
    letter-spacing: -.02em;
    margin: 4px 0 0;
    line-height: 1.05;
}
.c360-home-title .c360-home-grad {
    background: var(--c360-gradient-signature);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.c360-home-meta {
    font-family: var(--c360-font-mono);
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--c360-text-muted);
    text-align: right;
}
.c360-home-meta b {
    display: block;
    font-family: var(--c360-font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--c360-text);
    margin-top: 2px;
}

/* ── Quick actions row (replaces sidebar) ── */
.c360-quick-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 14px 20px;
    background: var(--c360-surface);
    border: 1px solid var(--c360-border);
    border-radius: var(--c360-radius-lg);
    box-shadow: var(--c360-shadow-xs);
}
.c360-quick-actions-label {
    font-family: var(--c360-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--c360-accent);
    margin-right: 4px;
    white-space: nowrap;
}
.c360-quick-actions-label::before { content: "— "; opacity: .85; }
.c360-qa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--c360-radius-pill);
    border: 1px solid var(--c360-border);
    background: transparent;
    color: var(--c360-text);
    font-family: var(--c360-font-body);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 200ms cubic-bezier(.2,.8,.2,1);
    cursor: pointer;
}
.c360-qa:hover {
    border-color: var(--c360-primary);
    color: var(--c360-text);
    background: var(--c360-primary-subtle);
    transform: translateY(-1px);
    text-decoration: none;
}
.c360-qa:active { transform: scale(.98); }
.c360-qa i { color: var(--c360-primary); font-size: 13px; }
.c360-qa-primary {
    background: var(--c360-primary);
    border-color: var(--c360-primary);
    color: var(--c360-text-on-brand);
}
.c360-qa-primary:hover {
    background: var(--c360-primary-hover);
    border-color: var(--c360-primary-hover);
    color: var(--c360-text-on-brand);
}
.c360-qa-primary i { color: var(--c360-text-on-brand); }

/* ── KPI strip ── */
.c360-home-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 1100px) { .c360-home-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .c360-home-kpis { grid-template-columns: 1fr; } }

.c360-kpi {
    position: relative;
    background: var(--c360-surface);
    border: 1px solid var(--c360-border);
    border-radius: var(--c360-radius-lg);
    padding: 20px 22px 14px;
    overflow: hidden;
    transition: transform 250ms cubic-bezier(.2,.8,.2,1),
                box-shadow 250ms cubic-bezier(.2,.8,.2,1),
                border-color 250ms cubic-bezier(.2,.8,.2,1);
    box-shadow: var(--c360-shadow-xs);
    min-height: 144px;
    display: flex;
    flex-direction: column;
}
.c360-kpi:hover {
    transform: translateY(-3px);
    box-shadow: var(--c360-shadow-md);
    border-color: var(--c360-primary);
}
.c360-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.c360-kpi-eyebrow {
    font-family: var(--c360-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c360-text-muted);
}
.c360-kpi-eyebrow::before { content: "— "; opacity: .7; }
.c360-kpi-icon {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--c360-primary-subtle);
}
.c360-kpi-icon i { font-size: 16px; color: var(--c360-primary); }
.c360-kpi-icon-accent  { background: var(--c360-accent-subtle); }
.c360-kpi-icon-accent  i { color: var(--c360-accent); }
.c360-kpi-icon-success { background: var(--c360-success-subtle); }
.c360-kpi-icon-success i { color: var(--c360-success); }
.c360-kpi-icon-danger  { background: var(--c360-danger-subtle); }
.c360-kpi-icon-danger  i { color: var(--c360-danger); }

.c360-kpi-value {
    font-family: var(--c360-font-mono);
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--c360-text);
    line-height: 1;
}
.c360-kpi-label {
    font-family: var(--c360-font-body);
    font-size: 13px;
    color: var(--c360-text-muted);
    margin-top: 4px;
}
.c360-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--c360-font-mono);
    font-size: 11px;
    font-weight: 500;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: var(--c360-radius-pill);
}
.c360-kpi-trend-up   { color: var(--c360-success); background: var(--c360-success-subtle); }
.c360-kpi-trend-down { color: var(--c360-danger);  background: var(--c360-danger-subtle); }

.c360-kpi-spark {
    margin-top: auto;
    padding-top: 10px;
    height: 36px;
}

/* ── Glance grid (chart panels) ── */
.c360-glance {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 1100px) { .c360-glance { grid-template-columns: 1fr; } }

.c360-panel {
    background: var(--c360-surface);
    border: 1px solid var(--c360-border);
    border-radius: var(--c360-radius-lg);
    padding: 20px 22px;
    box-shadow: var(--c360-shadow-xs);
    display: flex;
    flex-direction: column;
    min-height: 320px;
}
.c360-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c360-border);
}
.c360-panel-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.c360-panel-title h4 {
    font-family: var(--c360-font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--c360-text);
    margin: 0;
    letter-spacing: -.01em;
}
.c360-panel-title small {
    font-family: var(--c360-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--c360-accent);
}
.c360-panel-title small::before { content: "— "; opacity: .85; }
.c360-panel-actions { display: inline-flex; gap: 6px; }
.c360-panel-body { flex: 1; min-height: 220px; }

.c360-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 800px) { .c360-mini-grid { grid-template-columns: 1fr; } }

/* ── DevExpress Chart brand alignment ──
   Force chart fonts + subtle background. Series colors are wired via
   inline `Color="..."` props bound to brand tokens in the .razor. */
.c360-chart-wrap, .c360-chart-wrap > div, .c360-chart-wrap svg {
    font-family: var(--c360-font-body) !important;
}
.c360-chart-wrap text { fill: var(--c360-text-muted) !important; }
.c360-chart-wrap .dxc-title text { fill: var(--c360-text) !important; }

/* DxGrid in panels — sit closer to the brand */
.c360-panel .dxbl-grid {
    border: none !important;
    background: transparent !important;
}
.c360-panel .dxbl-grid-header {
    font-family: var(--c360-font-mono) !important;
    font-size: 11px !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c360-text-muted) !important;
}

/* ── Bank/account snapshot list (right rail) ── */
.c360-snapshot { display: flex; flex-direction: column; gap: 10px; }
.c360-snapshot-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--c360-radius-md);
    border: 1px solid var(--c360-border);
    background: var(--c360-surface);
    transition: all 200ms cubic-bezier(.2,.8,.2,1);
    text-decoration: none;
    color: inherit;
}
.c360-snapshot-row:hover {
    border-color: var(--c360-primary);
    background: var(--c360-surface-raised);
    text-decoration: none;
}
.c360-snapshot-icon {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--c360-accent-subtle);
}
.c360-snapshot-icon i { color: var(--c360-accent); font-size: 14px; }
.c360-snapshot-name { font-weight: 500; color: var(--c360-text); font-size: 14px; }
.c360-snapshot-sub  { font-family: var(--c360-font-mono); font-size: 11px; color: var(--c360-text-muted); margin-top: 2px; }
.c360-snapshot-amount {
    font-family: var(--c360-font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--c360-text);
    text-align: right;
    white-space: nowrap;
}
.c360-snapshot-amount.is-negative { color: var(--c360-danger); }