/* ============================================================================
   Veraius Mixed Theme — Architectural Precision Overrides
   ----------------------------------------------------------------------------
   Loaded AFTER veraius-base.css and veraius-components.css so every selector
   here wins specificity vs. the brutalist defaults.

   SCOPING — measured 2026-09-18, 165 unconditional rules:
     · 114 rules are scoped to [data-theme="mixed"]. These are theme overrides:
       dark and light are unaffected by them.
     · The rest are NOT scoped, and deliberately so — the .va-* opt-in classes of
       section 11. An opt-in class is applied per element; it is meant to look
       identical whichever theme is active, which is why its colours are literal hex
       rather than var(--token). Turning those into tokens would make them
       theme-reactive and change how every screen using them renders.

   CAUTION — ".va-* utilities" is only HALF true, and the difference bites.
   Measured over the unscoped .va-* classes: only a handful are utilities
   (<= 2 declarations); most are full COMPONENTS. Only a minority are live in
   markup; the rest are dead.

   DEAD-CLASS SWEEP 2026-09-18, two passes.
   Pass 1 — 56 unconditional .va-* classes, 16 live, 40 dead. The 30 written as a
   STANDALONE selector were removed (23 rules).
   Pass 2 — the "entangled" ones were re-measured per RULE rather than per class,
   and the entanglement turned out not to be a barrier: 25 rules had EVERY part
   dead, including descendant selectors (.va-chart-bar-monolith .va-bar-fill) and
   one mixed-family rule (.va-agent-response-header .agent-identity — .agent-identity
   is dead too). 22 of them were unconditional and were removed; 3 sit inside an
   @-block and were left to the branch that owns them.
   Now: 143 unconditional rules, 29 .va-* classes, 13 still dead — each of those
   shares a rule with a LIVE class, so removing the name would change what the
   surviving selectors match.

   The rule that made this safe: delete a rule only when ALL of its
   comma-separated parts are dead. Never strip a single name out of a shared
   selector list.

   Origin was measured before deleting: `git log -S` puts all of them in
   eb469213c "tüm ağaç tek mimariye hizalandı" (the DDD move), and none has a
   canonical twin in the 13 hand-written package files — so these were not
   copies of an existing component, they were simply never wired to markup. The family was BORN as utilities — commit 0864688e6
   "feat(design-system): formalize visual foundation layer" says it adds ".va-*
   utility helpers", and docs/design-system/foundations.md still defines the .va-*
   surface as utilities living in veraius-components.css. Scope drifted afterwards.

   Before adding a .va-* rule here, ask which one you are writing. A theme
   override belongs under [data-theme="mixed"]; a real utility belongs in
   veraius-components.css per the docs; and a component that duplicates a
   canonical class does not belong anywhere (see the retirement note below).

   The header previously claimed "every rule is scoped to [data-theme=mixed]".
   That was never true of the .va-* block, and the claim mattered: this file is
   linked unconditionally from App.razor, the WASM index.html and the MAUI
   index.html — not behind a theme switch. Anyone trusting the old sentence would
   conclude an unscoped rule here could not reach dark/light, when in fact it does.

   Structure:
     1. Token nudges  (radius family; fonts follow theme tokens)
     2. Page chrome   (body, app shell, sidebar, breadcrumb, command palette)
     3. Surfaces      (cards, glass panels, bento, sections)
     4. Forms         (inputs, textareas, search, filter bar)
     5. Controls      (buttons, tabs, dropdown, status badges)
     6. Tabular & data (data-table, lists, timeline, accordion)
     7. Feedback      (modal, dialog, toast, alert, empty/error/loading)
     8. Charts        (mini-chart, monolith chart utility)
     9. Typography    (display tracking, label-sm uppercase tech-label)
    10. Chat surfaces (chat-page two-layer, conversation sidebar, chat bubbles)
    11. Reusable .va-* utilities for new screens
   ============================================================================ */

/* 1 ─────────────────────────────────────────────────────────────────────────
   Token nudges — moderate radius family.
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="mixed"] {
    /* Generic radius scale — named radii (--btn/card/input/panel-radius) come from
       themes/mixed.css (generated). Do not override those here. */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 0.875rem;
    --radius-2xl: 1.25rem;
    --radius-pill: 9999px;
    --font-headline: 'Manrope', sans-serif;
    --font-body: 'Manrope', sans-serif;
    --font-label: 'Manrope', sans-serif;

    /* Input-field tokens consumed by scoped CSS fallbacks (e.g. Auth pages). */
    --input-field-bg: var(--surface-container);
    --input-field-bg-focus: var(--surface-container-high);
    --input-field-color: var(--on-surface);

    /* on-dark-* — text/outline colours for the dark sidebar that the
       Mixed theme keeps even though page content is light. Fixed dark
       values by design (the sidebar is always the dark "Control Room").
       Referenced by the rules further down in this file. */
    /* stylelint-disable color-no-hex -- tema belirteci tanımı: değer bir yerde ham olmak zorunda */
    --on-dark-surface: #dde3ef;
    --on-dark-surface-variant: #bfc8c8;
    --on-dark-outline: #404849;
    /* stylelint-enable color-no-hex */
    --glass-border: var(--ghost-border);
    --shadow-glow: 0 0 0 1px var(--primary-glow), var(--shadow-lg);
    --tracking-display: var(--tracking-tightest);
    color-scheme: light dark;
}

/* 2 ─────────────────────────────────────────────────────────────────────────
   Page chrome
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="mixed"] body,
[data-theme="mixed"] .ops-screen,
[data-theme="mixed"] .ops-container,
[data-theme="mixed"] .app-main,
[data-theme="mixed"] main {
    background: var(--background);
    color: var(--on-surface);
    font-family: var(--font-body);
}

[data-theme="mixed"] .app-sidebar,
[data-theme="mixed"] .sidebar,
[data-theme="mixed"] nav.sidebar {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    border-right: none;
    color: var(--on-surface);
    box-shadow: 1px 0 0 var(--outline-variant);
}

[data-theme="mixed"] .app-sidebar a,
[data-theme="mixed"] .sidebar a {
    color: var(--on-surface);
}

[data-theme="mixed"] .app-sidebar a:hover,
[data-theme="mixed"] .sidebar a:hover,
[data-theme="mixed"] .app-sidebar .nav-item.active,
[data-theme="mixed"] .sidebar .nav-item.active {
    background: rgba(255, 211, 105, 0.12);
    color: var(--on-surface);
}

[data-theme="mixed"] .bottom-nav-bar,
[data-theme="mixed"] .app-bottom-nav {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    border-top: none;
    box-shadow: 0 -1px 0 var(--outline-variant);
}

[data-theme="mixed"] .breadcrumb,
[data-theme="mixed"] .breadcrumb a,
[data-theme="mixed"] .breadcrumb span {
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-surface-variant);
}

[data-theme="mixed"] .command-palette {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(32px) saturate(160%);
    backdrop-filter: blur(32px) saturate(160%);
    color: var(--on-dark-surface);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-xl);
}

[data-theme="mixed"] .page-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.5rem 1rem;
}
[data-theme="mixed"] .page-header > h1,
[data-theme="mixed"] .page-header > .display-md,
[data-theme="mixed"] .page-header > .headline-lg,
[data-theme="mixed"] .page-header .page-title {
    grid-column: 1;
    grid-row: 1;
}
[data-theme="mixed"] .page-header .page-header-actions,
[data-theme="mixed"] .page-header .header-actions,
[data-theme="mixed"] .page-header .actions {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: end;
}

/* 3 ─────────────────────────────────────────────────────────────────────────
   Surfaces — cards, glass, bento, sections
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="mixed"] .card,
[data-theme="mixed"] .section-card,
[data-theme="mixed"] .stat-card,
[data-theme="mixed"] .kpi-card,
[data-theme="mixed"] .state-card,
[data-theme="mixed"] .info-card,
[data-theme="mixed"] .panel-card {
    background: var(--surface-container-low);
    color: var(--on-dark-surface);
    border: none;
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-sm), var(--shadow-lg);
}

[data-theme="mixed"] .card.card-elevated,
[data-theme="mixed"] .card-elevated {
    background: var(--surface-container-high);
    box-shadow: var(--shadow-xl);
}

[data-theme="mixed"] .card h1,
[data-theme="mixed"] .card h2,
[data-theme="mixed"] .card h3,
[data-theme="mixed"] .card h4,
[data-theme="mixed"] .section-card h1,
[data-theme="mixed"] .section-card h2,
[data-theme="mixed"] .section-card h3,
[data-theme="mixed"] .stat-card h1,
[data-theme="mixed"] .stat-card h2,
[data-theme="mixed"] .stat-card h3,
[data-theme="mixed"] .kpi-card h1,
[data-theme="mixed"] .kpi-card h2,
[data-theme="mixed"] .kpi-card h3 {
    color: var(--on-dark-surface);
}

[data-theme="mixed"] .card p,
[data-theme="mixed"] .card .body-md,
[data-theme="mixed"] .card .body-sm,
[data-theme="mixed"] .section-card p,
[data-theme="mixed"] .stat-card p,
[data-theme="mixed"] .kpi-card p {
    color: var(--on-dark-surface);
}

[data-theme="mixed"] .card .label-sm,
[data-theme="mixed"] .card .label-md,
[data-theme="mixed"] .card .text-on-surface-variant,
[data-theme="mixed"] .section-card .label-sm,
[data-theme="mixed"] .stat-card .label-sm,
[data-theme="mixed"] .kpi-card .label-sm {
    color: var(--on-dark-surface-variant);
}

[data-theme="mixed"] .glass-panel {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid var(--glass-border);
    color: var(--on-dark-surface);
    border-radius: var(--card-radius);
}
[data-theme="mixed"] .glass-panel-light {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid var(--outline-variant);
    color: var(--on-surface);
    border-radius: var(--card-radius);
}

[data-theme="mixed"] .bento-grid,
[data-theme="mixed"] .kpi-grid {
    gap: 1.5rem;
}

/* 4 ─────────────────────────────────────────────────────────────────────────
   Forms — filled inputs, focus bottom-stroke
   ────────────────────────────────────────────────────────────────────────── */
/* Dark-tonal inputs — filled on surface-container, subtle bottom focus stroke.
   The whole mixed canvas is dark, so inputs always sit on a dark tier. */
[data-theme="mixed"] input[type="text"],
[data-theme="mixed"] input[type="search"],
[data-theme="mixed"] input[type="email"],
[data-theme="mixed"] input[type="password"],
[data-theme="mixed"] input[type="number"],
[data-theme="mixed"] input[type="url"],
[data-theme="mixed"] input[type="tel"],
[data-theme="mixed"] textarea,
[data-theme="mixed"] select,
[data-theme="mixed"] .va-input,
[data-theme="mixed"] .form-input,
[data-theme="mixed"] .input-field,
[data-theme="mixed"] .input-field-sentient {
    background: var(--surface-container);
    color: var(--on-surface);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--input-radius);
    padding: 0.625rem 0.875rem;
    font-family: var(--font-body);
    transition: border-color var(--transition-card), background-color var(--transition-card);
}

[data-theme="mixed"] input::placeholder,
[data-theme="mixed"] textarea::placeholder {
    color: var(--on-surface-variant);
    opacity: 0.7;
}

[data-theme="mixed"] input:focus,
[data-theme="mixed"] textarea:focus,
[data-theme="mixed"] select:focus,
[data-theme="mixed"] .va-input:focus,
[data-theme="mixed"] .form-input:focus,
[data-theme="mixed"] .input-field:focus,
[data-theme="mixed"] .input-field-sentient:focus {
    outline: none;
    background: var(--surface-container-high);
    border-bottom-color: var(--secondary);
}

/* Filter / search bars — same dark tonal shell */
[data-theme="mixed"] .filter-bar,
[data-theme="mixed"] .search-bar {
    background: var(--surface-container);
    border: none;
    border-radius: var(--card-radius);
    color: var(--on-surface);
    padding: 0.875rem 1rem;
    gap: 0.75rem;
}

/* 5 ─────────────────────────────────────────────────────────────────────────
   Controls — buttons, tabs, badges, dropdowns
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="mixed"] .btn-primary,
[data-theme="mixed"] button.btn-primary {
    background: var(--gradient-accent);
    color: var(--on-primary);
    border: none;
    border-radius: var(--btn-radius);
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.625rem 1.25rem;
    transition: var(--transition-btn);
}
[data-theme="mixed"] .btn-primary:hover {
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}

[data-theme="mixed"] .btn-secondary,
[data-theme="mixed"] button.btn-secondary {
    background: var(--surface-container-highest);
    color: var(--on-dark-surface);
    border: none;
    border-radius: var(--btn-radius);
    font-weight: 600;
    padding: 0.625rem 1.25rem;
}

[data-theme="mixed"] .btn-ghost {
    background: transparent;
    color: var(--on-surface-variant);
    border: none;
}
[data-theme="mixed"] .btn-ghost:hover {
    color: var(--on-surface);
    background: rgba(17, 24, 39, 0.04);
}

[data-theme="mixed"] .tab-bar,
[data-theme="mixed"] .tabs-bar {
    background: transparent;
    border-bottom: none;
}
[data-theme="mixed"] .tab-btn,
[data-theme="mixed"] .tab-bar .tab,
[data-theme="mixed"] .tabs-bar .tab {
    background: transparent;
    color: var(--on-surface-variant);
    border: none;
    padding: 0.625rem 1rem;
}
[data-theme="mixed"] .tab-btn.active,
[data-theme="mixed"] .tab-bar .tab.active,
[data-theme="mixed"] .tabs-bar .tab.active {
    color: var(--on-surface);
    box-shadow: inset 0 -2px 0 var(--secondary);
}

[data-theme="mixed"] .status-badge,
[data-theme="mixed"] .badge {
    border: none;
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.625rem;
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

[data-theme="mixed"] .dropdown-menu {
    background: var(--surface-bright);
    color: var(--on-surface);
    border: none;
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-xl);
}

[data-theme="mixed"] .tooltip {
    background: var(--surface-container-highest);
    color: var(--on-dark-surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

/* 6 ─────────────────────────────────────────────────────────────────────────
   Tabular & data
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="mixed"] .data-table {
    background: var(--surface-container-low);
    color: var(--on-dark-surface);
    border-radius: var(--card-radius);
    overflow: hidden;
}
[data-theme="mixed"] .data-table th {
    background: transparent;
    color: var(--on-dark-surface-variant);
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--font-size-2xs);
    font-weight: 600;
    padding: 0.875rem 1rem;
}
[data-theme="mixed"] .data-table td {
    border: none;
    padding: 0.875rem 1rem;
    color: var(--on-dark-surface);
}
[data-theme="mixed"] .data-table tbody tr {
    background: transparent;
    transition: background-color var(--transition-btn);
}
[data-theme="mixed"] .data-table tbody tr:hover {
    background: var(--surface-container-highest);
}
[data-theme="mixed"] .data-table tbody tr + tr td {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-theme="mixed"] .timeline::before {
    display: none;
}
[data-theme="mixed"] .timeline-item {
    background: var(--surface-container-low);
    color: var(--on-dark-surface);
    border: none;
    border-radius: var(--card-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.6rem;
}

[data-theme="mixed"] .accordion-item {
    background: var(--surface-container-low);
    color: var(--on-dark-surface);
    border: none;
    border-radius: var(--card-radius);
    margin-bottom: 0.6rem;
}
[data-theme="mixed"] .accordion-header {
    background: transparent;
    border: none;
    color: var(--on-dark-surface);
}

[data-theme="mixed"] .progress-bar-track {
    background: var(--surface-container-highest);
    border: none;
    border-radius: var(--radius-pill);
}
[data-theme="mixed"] .progress-bar-fill {
    background: var(--gradient-accent);
}

/* 7 ─────────────────────────────────────────────────────────────────────────
   Feedback — modal, dialog, alerts, empty/error/loading state
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="mixed"] .v-modal,
[data-theme="mixed"] .modal,
[data-theme="mixed"] .dialog,
[data-theme="mixed"] .confirm-dialog {
    background: var(--surface-bright);
    color: var(--on-surface);
    border: none;
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-xl);
}

[data-theme="mixed"] .inline-alert {
    border: none;
    border-radius: var(--card-radius);
    padding: 1rem 1.25rem;
    background: var(--state-info-bg);
    color: var(--on-dark-surface);
}

[data-theme="mixed"] .empty-state,
[data-theme="mixed"] .error-state,
[data-theme="mixed"] .loading-state {
    background: var(--surface-container-low);
    border: none;
    border-radius: var(--card-radius);
    color: var(--on-dark-surface-variant);
    padding: 2rem 1.5rem;
}

[data-theme="mixed"] .skeleton {
    background: linear-gradient(90deg,
        var(--surface-container-low) 0%,
        var(--surface-container-high) 50%,
        var(--surface-container-low) 100%);
}

/* 8 ─────────────────────────────────────────────────────────────────────────
   Charts — monolith style
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="mixed"] .mini-chart,
[data-theme="mixed"] .chart-container {
    --chart-grid: rgba(221, 227, 239, 0.08);
    --chart-line: var(--secondary);
    background: transparent;
}
[data-theme="mixed"] .mini-chart .axis-line {
    display: none;
}

/* 9 ─────────────────────────────────────────────────────────────────────────
   Typography — display tracking, label tech-label
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="mixed"] .display-lg,
[data-theme="mixed"] .display-md,
[data-theme="mixed"] .display-sm,
[data-theme="mixed"] .headline-lg,
[data-theme="mixed"] .headline-md {
    letter-spacing: var(--tracking-display);
    font-family: var(--font-headline);
}

[data-theme="mixed"] .label-sm,
[data-theme="mixed"] .label-xs {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-feature-settings: "tnum" 1;
}

/* 10 ────────────────────────────────────────────────────────────────────────
    Chat surfaces — Architectural Two-Layer
    Targets: Web project Chat/* AND shared Components/Chat/*
    ─────────────────────────────────────────────────────────────────────── */

/* Whole chat page: paper background outer, dark monolith chat column */
[data-theme="mixed"] .chat-page,
[data-theme="mixed"] .chat-layout,
[data-theme="mixed"] page-chat {
    background: var(--background);
    color: var(--on-surface);
}

/* Web project Chat root container (.chat-container in Chat.razor.css) */
[data-theme="mixed"] .chat-container {
    background: var(--surface-container-low);
    color: var(--on-dark-surface);
    border-top: none;
    box-shadow: 0 -1px 0 var(--outline-variant);
}

/* Conversation sidebar = paper glass panel */
[data-theme="mixed"] .conversation-sidebar,
[data-theme="mixed"] .chat-sidebar {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    border-right: none;
    color: var(--on-surface);
    box-shadow: 1px 0 0 var(--outline-variant);
}

/* Chat input box shell */
[data-theme="mixed"] .input-box {
    background: var(--surface-container-high);
    color: var(--on-dark-surface);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--card-radius);
    transition: border-color var(--transition-card);
}
[data-theme="mixed"] .input-box:focus-within {
    outline: none;
    border-bottom-color: var(--secondary);
}
[data-theme="mixed"] .input-box textarea {
    background: transparent;
    color: var(--on-dark-surface);
    border: none;
}
[data-theme="mixed"] .input-box textarea::placeholder {
    color: var(--on-dark-surface-variant);
}

[data-theme="mixed"] .input-box .send-button {
    color: var(--on-primary);
    background: var(--gradient-accent);
    border-radius: var(--btn-radius);
    border: none;
    padding: 0.375rem 0.75rem;
    transition: var(--transition-btn);
}
[data-theme="mixed"] .input-box textarea:placeholder-shown ~ .tools .send-button,
[data-theme="mixed"] .input-box textarea:placeholder-shown + .tools .send-button {
    background: var(--surface-container-highest);
    color: var(--on-dark-surface-variant);
}
[data-theme="mixed"] .input-box .send-button:hover {
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}

[data-theme="mixed"] .input-box .attach {
    background: transparent;
    border-style: dashed;
    border-color: var(--on-dark-outline);
    color: var(--on-dark-surface-variant);
}
[data-theme="mixed"] .input-box .attach:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--on-dark-surface);
}

/* Chat user message bubble + assistant message */
[data-theme="mixed"] .user-message {
    background: var(--surface-container-high);
    color: var(--on-dark-surface);
    border-radius: var(--card-radius);
}
[data-theme="mixed"] .assistant-message,
[data-theme="mixed"] .assistant-search {
    color: var(--on-dark-surface);
}
[data-theme="mixed"] .assistant-message-icon {
    background: var(--gradient-accent);
    color: var(--on-primary);
}

/* Markdown content inside assistant messages */
[data-theme="mixed"] .assistant-message ::deep th,
[data-theme="mixed"] .assistant-message ::deep td {
    color: var(--on-dark-surface);
}
[data-theme="mixed"] .assistant-message ::deep th {
    border-bottom: 1px solid var(--on-dark-outline);
}
[data-theme="mixed"] .assistant-message ::deep th,
[data-theme="mixed"] .assistant-message ::deep tr:nth-child(even) {
    background-color: rgba(221, 227, 239, 0.04);
}
[data-theme="mixed"] .assistant-message ::deep pre > code {
    background-color: var(--surface-container-lowest);
    color: var(--on-dark-surface);
}

/* Chat rounding — see veraius-components.css (all themes). */
/* 11 ────────────────────────────────────────────────────────────────────────
    Reusable .va-* utilities (theme-agnostic but tuned for mixed cascade)
    ─────────────────────────────────────────────────────────────────────── */
.va-surface-dark {
    background: var(--surface-container-low);
    color: var(--on-dark-surface, var(--on-surface));
    border-radius: var(--card-radius);
    padding: 1.5rem;
}
/* EMEKLI EDILDI 2026-09-17: .va-glass-panel, .va-glass-panel-light, .va-btn-primary

   Bu uc sinif kanonik ikizlerinin ZAYIF kopyalariydi ve markup'ta HIC
   kullanilmiyordu (olculdu: tarayicida CSSOM'a yukleniyorlardi ama DOM'da
   onlari tasiyan tek eleman yoktu; kanonik .btn-primary 22 kural / .glass-panel
   5 kural ile CANLI).

     .va-btn-primary      8 bildirim   <->  .btn-primary   17 bildirim
       eksik: display, justify-content, align-items, gap, font-family,
              font-size, letter-spacing, text-transform, box-shadow

   Dagitilabilir bir tema paketinde ayni bilesenin iki varyantini tasimak
   TUZAKTIR: hangisinin kullanilacagi belirsizdir ve zayif olan sessizce
   eksik render eder.

   Kokeni olculdu (git log -S): commit 0864688e6 "feat(design-system):
   formalize visual foundation layer" (2026-04-14) — mesaji ".va-* utility
   helpers" ekledigini soyluyor. docs/design-system/foundations.md de `.va-*`
   yuzeyini UTILITY olarak tanimlar ve yerini veraius-components.css der.
   Yani bunlar bilincli bir "mixed tema alternatifi" DEGIL, utility olarak
   dogup bilesene kaymis kurallardi. Tema ezmesi gerekiyorsa dogru yer
   [data-theme="mixed"] kapsamidir — bu dosyada o desen zaten var. */

.va-input-architectural {
    background: var(--surface-container-low);
    color: var(--on-dark-surface, var(--on-surface));
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.625rem 0.875rem;
    transition: border-color var(--transition-card);
}

/* 12 ─────────────────────────────────────────────────────────────────────────
   Phase 2 — Shared primitive overrides (uncovered components)
   ────────────────────────────────────────────────────────────────────────── */

/* Avatar — tonal fallback background on dark surfaces */
[data-theme="mixed"] .avatar,
[data-theme="mixed"] .avatar-initials,
[data-theme="mixed"] .va-avatar {
    background: var(--surface-container-high);
    color: var(--on-dark-surface);
    border: none;
    border-radius: var(--radius-pill);
}
[data-theme="mixed"] .avatar-ring,
[data-theme="mixed"] .avatar-primary {
    background: var(--gradient-accent);
    color: var(--on-primary);
}

/* Badge — remove borders, tonal tiers */
[data-theme="mixed"] .badge,
[data-theme="mixed"] .badge-default,
[data-theme="mixed"] .va-badge {
    background: var(--surface-container-high);
    color: var(--on-dark-surface);
    border: none;
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.625rem;
    font-size: var(--font-size-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
[data-theme="mixed"] .badge-primary {
    background: var(--gradient-accent);
    color: var(--on-primary);
}
[data-theme="mixed"] .badge-secondary {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
}

/* KbdShortcut — monospace tonal chip */
[data-theme="mixed"] kbd,
[data-theme="mixed"] .kbd,
[data-theme="mixed"] .kbd-shortcut,
[data-theme="mixed"] .va-kbd {
    background: var(--surface-container-highest);
    color: var(--on-dark-surface);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.125rem 0.4rem;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: var(--font-size-sm);
    box-shadow: inset 0 -1px 0 rgba(var(--overlay-scrim-rgb), 0.25);
}

/* DateRangePicker — dark-tonal filled input + dark glass popover */
[data-theme="mixed"] .date-range-picker,
[data-theme="mixed"] .date-range-picker input {
    background: var(--surface-container);
    color: var(--on-surface);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--input-radius);
    transition: border-color var(--transition-card);
}
[data-theme="mixed"] .date-range-picker input:focus {
    outline: none;
    background: var(--surface-container-high);
    border-bottom-color: var(--secondary);
}
[data-theme="mixed"] .date-range-picker-popover,
[data-theme="mixed"] .date-range-popup,
[data-theme="mixed"] .calendar-popup {
    background: var(--surface-bright);
    color: var(--on-surface);
    border: none;
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-xl);
}
[data-theme="mixed"] .calendar-day.selected,
[data-theme="mixed"] .calendar-day.in-range {
    background: var(--gradient-accent);
    color: var(--on-primary);
}

/* TagInput — dark-tonal filled input */
[data-theme="mixed"] .tag-input,
[data-theme="mixed"] .va-tag-input {
    background: var(--surface-container);
    color: var(--on-surface);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--input-radius);
    padding: 0.5rem 0.75rem;
    transition: border-color var(--transition-card);
}
[data-theme="mixed"] .tag-input:focus-within {
    background: var(--surface-container-high);
    border-bottom-color: var(--secondary);
}
[data-theme="mixed"] .tag-chip,
[data-theme="mixed"] .tag-input .chip {
    background: var(--surface-container-high);
    color: var(--on-dark-surface);
    border: none;
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.6rem;
    font-size: var(--font-size-sm);
}
[data-theme="mixed"] .tag-chip .tag-remove {
    color: var(--on-dark-surface-variant);
}

/* ToastContainer — glass panel + tonal accent per state */
[data-theme="mixed"] .toast-container,
[data-theme="mixed"] .toast {
    background: var(--glass-bg);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    color: var(--on-dark-surface);
    border: none;
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-xl);
}
[data-theme="mixed"] .toast-success { box-shadow: var(--shadow-xl), inset 3px 0 0 var(--state-success); }
[data-theme="mixed"] .toast-warning { box-shadow: var(--shadow-xl), inset 3px 0 0 var(--state-warning); }
[data-theme="mixed"] .toast-error   { box-shadow: var(--shadow-xl), inset 3px 0 0 var(--state-error); }
[data-theme="mixed"] .toast-info    { box-shadow: var(--shadow-xl), inset 3px 0 0 var(--state-info); }

/* StepIndicator — tonal dots with tantalum active state */
[data-theme="mixed"] .step-indicator,
[data-theme="mixed"] .step-indicator-list {
    background: transparent;
    border: none;
}
[data-theme="mixed"] .step-indicator .step-dot {
    background: var(--surface-container-high);
    color: var(--on-dark-surface-variant);
    border: none;
    border-radius: var(--radius-pill);
}
[data-theme="mixed"] .step-indicator .step.active .step-dot,
[data-theme="mixed"] .step-indicator .step-dot.active {
    background: var(--gradient-accent);
    color: var(--on-primary);
    box-shadow: var(--shadow-glow);
}
[data-theme="mixed"] .step-indicator .step.completed .step-dot {
    background: var(--secondary);
    color: var(--on-secondary);
}
[data-theme="mixed"] .step-indicator .step-connector,
[data-theme="mixed"] .step-indicator hr {
    background: var(--outline-variant);
    border: none;
    height: 1px;
}

/* AppFooter / SharedFooter — keep the slim, brand-accented bar identical to
   dark/light. Mixed only differs by the surface tier; geometry (slim padding)
   and the brand hairline (owned by .app-footer::before) must stay consistent
   so switching theme never changes the footer's shape. No flat border-top. */
/* `.shared-footer` seçicisi KALDIRILDI (2026-09-03): hiçbir markup onu
   taşımıyordu. SharedFooter bileşeni de `.sentient-footer-bar` kullanıyordu,
   yani bu kural zaten hiçbir şeyle eşleşmiyordu; bileşenin kendisi de hiçbir
   yerden çağrılmadığı için silindi. Geriye kalan seçici hâlâ geçerli: bir
   sayfa kendi <footer>'ını render ederse mixed temada tutarlı kalsın. */
[data-theme="mixed"] footer:not(.app-footer) {
    background: transparent;
    color: var(--on-surface-variant);
    border-top: none;
    box-shadow: 0 -1px 0 var(--outline-variant);
    padding: var(--space-6, 1.5rem) var(--space-7, 2rem);
}

/* .app-footer geometry + surface is owned globally by veraius-host-chrome.css
   (always loaded) so it never goes stale per-route. Only link colours here. */
[data-theme="mixed"] .app-footer a,
[data-theme="mixed"] .shared-footer a,
[data-theme="mixed"] footer a {
    color: var(--on-surface);
    text-decoration: none;
}
[data-theme="mixed"] .app-footer a:hover,
[data-theme="mixed"] .shared-footer a:hover,
[data-theme="mixed"] footer a:hover {
    color: var(--primary);
}

/* ExportMenu — dropdown variant */
[data-theme="mixed"] .export-menu,
[data-theme="mixed"] .export-menu-panel {
    background: var(--surface-bright);
    color: var(--on-surface);
    border: none;
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-xl);
}
[data-theme="mixed"] .export-menu button {
    background: transparent;
    color: var(--on-surface);
    border: none;
}
[data-theme="mixed"] .export-menu button:hover {
    background: color-mix(in srgb, var(--on-surface) 6%, transparent);
}

/* CopyButton — ghost button cascade */
[data-theme="mixed"] .copy-button,
[data-theme="mixed"] button.copy-btn {
    background: transparent;
    color: var(--on-surface-variant);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
}
[data-theme="mixed"] .copy-button:hover {
    background: var(--surface-container);
    color: var(--on-surface);
}
[data-theme="mixed"] .copy-button.copied {
    color: var(--secondary);
}

/* SearchBar — dark-tonal filled input */
[data-theme="mixed"] .search-bar input {
    background: var(--surface-container);
    color: var(--on-surface);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--input-radius);
    transition: border-color var(--transition-card);
}
[data-theme="mixed"] .search-bar:focus-within,
[data-theme="mixed"] .search-bar input:focus {
    outline: none;
    border-bottom-color: var(--secondary);
    background: var(--surface-container-high);
}
[data-theme="mixed"] .search-bar .search-icon {
    color: var(--on-surface-variant);
}

/* Reduced motion — disable hover transforms */
@media (prefers-reduced-motion: reduce) {
    [data-theme="mixed"] .btn-primary:hover,
    [data-theme="mixed"] .input-box .send-button:hover {
        transform: none;
    }
}

/* ============================================================
   Monolith Workspace — Chat Reference Utilities (2026-04-14)
   All classes below are theme-agnostic opt-in utilities used by
   the ChatPage redesign. Most rules also cascade on mixed via
   existing tokens.
   ============================================================ */

/* 1. Monolith tantalum gradient utility (buttons, avatars, dots) */
.va-monolith-gradient,
[data-theme="mixed"] .va-monolith-gradient {
    background: var(--gradient-accent);
    color: var(--on-primary);
}

/* 2. Reasoning chain timeline — vertical slate line + amber glow dots */
.va-reasoning-chain {
    position: relative;
    margin: 0 0 2rem 1rem;
    padding-left: 2rem;
    border-left: 1px solid var(--outline-variant);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.va-thinking-step {
    position: relative;
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--on-surface-variant);
}
.va-thinking-step::before {
    content: '';
    position: absolute;
    left: -2.1rem;
    top: 0.45rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 8px var(--brand-gold), 0 0 16px color-mix(in srgb, var(--brand-gold) 45%, transparent);
}
.va-thinking-step.is-pending {
    opacity: 0.5;
    font-style: italic;
}
.va-thinking-step.is-pending::before {
    background: var(--on-surface-variant);
    box-shadow: none;
}
.va-thinking-step-time {
    color: var(--secondary);
    font-weight: 700;
    margin-right: 0.5rem;
    font-feature-settings: "tnum" 1;
}

/* 3. Bento visualization card (for agent data-viz grid) */
.va-bento-viz-card {
    background: var(--surface-container-low);
    color: var(--on-surface);
    border: 1px solid rgba(var(--outline-variant-rgb), 0.10);
    border-radius: 1rem;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.va-bento-viz-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.va-bento-viz-card-title {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin: 0;
}
@media (max-width: 900px) {
    .va-bento-viz-grid { grid-template-columns: 1fr; }
}
.va-chart-bar-monolith .va-bar-fill.is-critical {
    background: var(--error);
    opacity: 0.55;
}

/* 5. Chat input controls bar (FAST / ADVANCED chips + icon actions) */
/* Command Deck: the controls bar is a header strip INSIDE the input card.
   No separate background, no hairline — visual cohesion via shared surface. */
.va-input-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4) 0;
    background: transparent;
    gap: var(--space-2);
}
.va-input-mode-chip .material-symbols-outlined {
    font-size: 14px;
}
.va-input-mode-chip.is-active {
    background: var(--surface);
    color: var(--secondary);
    opacity: 1;
}
.va-input-mode-chip:hover:not(.is-active) {
    color: var(--on-surface);
    opacity: 1;
}
.va-chat-footer-labels .material-symbols-outlined {
    font-size: 12px;
}
.va-topbar-metric {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.va-topbar-metric-label {
    font-size: 0.5625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    opacity: 0.65;
}
.va-topbar-metric-value {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--on-surface);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.va-topbar-metric-value.is-success { color: var(--secondary); }
.va-topbar-metric-value .pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: va-pulse 2s ease-in-out infinite;
}
@keyframes va-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* 14. Grain texture overlay (subtle noise over full viewport) */
.va-grain-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.03;
    mix-blend-mode: overlay;
    z-index: 1;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 200px 200px;
}

/* Sidebar Deploy Agent CTA — explicit monolith gradient on the primary
   CTA regardless of scoped tokens */
[data-theme="mixed"] .va-sidebar-deploy-cta {
    background: var(--gradient-accent);
    color: var(--on-primary);
    border: none;
    border-radius: var(--btn-radius);
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: var(--font-size-sm);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: var(--transition-btn);
}
[data-theme="mixed"] .va-sidebar-deploy-cta:hover {
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}

/* Force chat-shell / chat-main to mixed dark background */
[data-theme="mixed"] .chat-shell,
[data-theme="mixed"] .chat-main {
    background: var(--background);
    color: var(--on-surface);
}

/* =========================================================
   Chat Message Bubble — Assistant header + User asymmetric
   ========================================================= */

/* Assistant — tantalum avatar + strategist analysis label */
.va-agent-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(255, 211, 105, 0.2);
}
.va-agent-avatar .material-symbols-outlined {
    font-size: var(--font-size-2xl);
    color: var(--on-primary);
    font-variation-settings: 'FILL' 1;
}
.va-agent-identity-text .agent-name {
    font-size: var(--font-size-2xs);
    color: var(--on-surface-variant);
    opacity: 0.7;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* User bubble — asymmetric top-right corner + amber accent border */
[data-theme="mixed"] .va-user-message-bubble,
.va-user-message-bubble {
    border-top-right-radius: 0 !important;
    border-left: 2px solid rgba(255, 211, 105, 0.25);
    padding-left: 1rem;
}

/* Textarea wrapper + helper labels */
.va-input-architectural-wrap {
    position: relative;
}
.va-input-helper .material-symbols-outlined {
    font-size: var(--font-size-sm);
}