/* PestScope — Fluent UI Blazor overrides only.
   Tokens + base reset live in tokens.css. Generic primitives in components.css. */

/* ── Fluent UI Blazor overrides ── */
fluent-text-field::part(root),
fluent-text-area::part(root),
fluent-select::part(control),
fluent-combobox::part(control) {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
}

fluent-text-field::part(root)::placeholder,
fluent-text-area::part(root)::placeholder {
    color: var(--text-tertiary);
}

fluent-text-field::part(root):focus-within,
fluent-text-area::part(root):focus-within,
fluent-select::part(control):focus-within,
fluent-combobox::part(control):focus-within {
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 2px rgba(46, 148, 132, 0.2);
    outline: none;
}

/* Hide Fluent UI's built-in bottom accent indicator on focus */
fluent-text-field::part(root)::after,
fluent-text-field::part(control)::after,
fluent-text-area::part(root)::after,
fluent-text-area::part(control)::after,
fluent-select::part(control)::after,
fluent-select::part(root)::after,
fluent-combobox::part(control)::after,
fluent-combobox::part(root)::after {
    display: none !important;
    height: 0 !important;
    border: none !important;
}

/* Also suppress via design tokens */
fluent-text-field,
fluent-text-area,
fluent-select,
fluent-combobox {
    --accent-fill-rest: transparent;
    --accent-fill-hover: transparent;
    --accent-fill-active: transparent;
    --accent-fill-focus: transparent;
    --accent-stroke-control-rest: transparent;
    --accent-stroke-control-hover: transparent;
    --accent-stroke-control-active: transparent;
    --focus-stroke-outer: transparent;
    --focus-stroke-inner: transparent;
}

/* Ensure inner control parts inherit border-radius */
fluent-text-field::part(control),
fluent-select::part(selected-value),
fluent-combobox::part(selected-value) {
    border-radius: var(--radius-md);
}

/* Force select/combobox internal backgrounds to match theme */
fluent-select,
fluent-combobox {
    --neutral-fill-input-rest: var(--input-bg);
    --neutral-fill-input-hover: var(--input-bg);
    --neutral-fill-input-active: var(--input-bg);
    --neutral-fill-input-focus: var(--input-bg);
    --neutral-fill-rest: var(--input-bg);
    --neutral-fill-hover: var(--input-bg);
    --neutral-layer-floating: var(--surface);
    background: var(--input-bg);
}

fluent-select::part(selected-value),
fluent-combobox::part(selected-value) {
    color: var(--text-primary);
    background: transparent;
}

fluent-text-field label,
fluent-text-area label,
fluent-select label,
fluent-combobox label,
fluent-checkbox label,
fluent-radio-group label,
.fluent-input-label {
    color: var(--text-primary) !important;
    font-size: 14px;
    font-weight: 600;
}

/* Hide the red asterisk on required fields — the label text already contains "*" */
.fluent-input-label span[aria-label="required"] {
    display: none !important;
}

/* Textarea dark mode fix */
fluent-text-area::part(control),
fluent-text-area textarea {
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
}

/* Accent (primary) button */
fluent-button[appearance="accent"] {
    border-radius: var(--radius-md);
    --accent-fill-rest: var(--primary);
    --accent-fill-hover: var(--primary-hover);
    --accent-foreground-rest: #ffffff;
    --accent-foreground-hover: #ffffff;
}

/* Outline / neutral / default button — visible border and text in both themes */
fluent-button[appearance="outline"],
fluent-button[appearance="neutral"],
fluent-button:not([appearance]) {
    --neutral-foreground-rest: var(--text-primary);
    --neutral-foreground-hover: var(--primary);
    --neutral-stroke-rest: var(--border);
    --neutral-stroke-hover: var(--primary);
    --neutral-fill-rest: transparent;
    --neutral-fill-hover: transparent;
    --neutral-fill-stealth-rest: transparent;
    --neutral-fill-stealth-hover: transparent;
    --neutral-layer-floating: transparent;
    border-radius: var(--radius-md);
}

fluent-button[appearance="neutral"]::part(control),
fluent-button[appearance="outline"]::part(control),
fluent-button:not([appearance])::part(control) {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md);
}

fluent-button[appearance="neutral"]:hover::part(control),
fluent-button[appearance="outline"]:hover::part(control),
fluent-button:not([appearance]):hover::part(control) {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: rgba(46, 148, 132, 0.08) !important;
}

/* Links */
a { color: var(--primary); text-decoration: none; transition: color 200ms ease; }
a:hover { color: var(--primary-hover); }

/* ── Definition lists (detail pages) ── */
dl { color: var(--text-primary); }
dt { color: var(--text-secondary); font-weight: 600; font-size: 14px; }
dd { color: var(--text-primary); font-size: 14px; margin-left: 0; }

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 { color: var(--text-primary); }

/* ── Paragraphs ── */
p { color: var(--text-primary); }

/* ── Fluent UI Tabs ── */
fluent-tabs {
    --accent-fill-rest: var(--primary);
    --accent-fill-hover: var(--primary-hover);
    --neutral-foreground-rest: var(--text-primary);
    --neutral-foreground-hover: var(--text-primary);
}

fluent-tab {
    color: var(--text-secondary);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

fluent-tab[aria-selected="true"],
fluent-tab.tab[aria-selected="true"] {
    color: var(--text-primary) !important;
}

fluent-tab::part(content) {
    color: inherit;
}

fluent-tabs::part(activeIndicator),
fluent-tabs::part(active-indicator) {
    background: var(--primary) !important;
}

/* ── Fluent UI Radio & Checkbox labels ── */
fluent-radio::part(label),
fluent-radio-group label,
fluent-radio label {
    color: var(--text-primary) !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

fluent-checkbox::part(label),
fluent-checkbox label {
    color: var(--text-primary) !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Fluent radio/checkbox indicator colors */
fluent-radio::part(control) {
    border-color: var(--border);
}

fluent-radio[checked]::part(control),
fluent-radio[current-checked]::part(control) {
    background: var(--primary);
    border-color: var(--primary);
}

fluent-checkbox::part(control) {
    border-color: var(--border);
}

fluent-checkbox[checked]::part(control),
fluent-checkbox[current-checked]::part(control) {
    background: var(--primary);
    border-color: var(--primary);
}

/* ── Fluent UI Data Grid ── */
fluent-data-grid {
    color: var(--text-primary);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

fluent-data-grid-row {
    color: var(--text-primary);
    background: var(--surface);
    border-color: var(--border-subtle);
}

fluent-data-grid-row:hover {
    background: var(--surface-hover);
}

fluent-data-grid-row[row-type="header"],
fluent-data-grid-row[row-type="header"] fluent-data-grid-cell {
    color: var(--text-secondary);
    font-weight: 600;
    background: var(--surface);
}

fluent-data-grid-cell {
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

/* ── Fluent UI Message Bar ── */
fluent-message-bar,
.fluent-message-bar {
    font-family: 'Plus Jakarta Sans', sans-serif;
    border-radius: var(--radius-md);
}

.form-dialog-error {
    margin-top: 1rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

[data-theme="dark"] .form-dialog-error {
    background: rgba(220, 38, 38, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(220, 38, 38, 0.3);
}

/* ── Fluent UI Badge overrides ── */
fluent-badge {
    font-family: 'Plus Jakarta Sans', sans-serif;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
}

fluent-badge[appearance="accent"]::part(control) {
    background: var(--surface-accent);
    color: var(--primary);
    border: none;
}

fluent-badge[appearance="neutral"]::part(control) {
    background: var(--border);
    color: var(--text-secondary);
    border: none;
}

/* ── Fluent UI Select/Combobox dropdown listbox ── */
fluent-option {
    color: var(--text-primary) !important;
    background: var(--surface) !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

fluent-option:hover {
    background: var(--surface-hover) !important;
}

fluent-option[selected],
fluent-option[aria-selected="true"] {
    background: var(--surface-hover) !important;
    color: var(--primary) !important;
    font-weight: 600;
}

/* Hide Fluent UI's built-in selection indicator bar */
fluent-option::part(content)::before,
fluent-option::before {
    display: none !important;
}

fluent-listbox,
fluent-select::part(listbox),
fluent-combobox::part(listbox) {
    background: var(--surface) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

/* ── Detail page definition list ── */
dl.detail-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--space-sm) var(--space-lg);
    padding: var(--space-md) 0;
}

dl.detail-grid dt {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 14px;
}

dl.detail-grid dd {
    color: var(--text-primary);
    font-size: 14px;
    margin: 0;
}

/* ── Clickable reference links in detail grids ── */
a.ref-link {
    color: var(--text-primary);
    text-decoration: none;
    /* Dotted underline at rest signals "this is clickable" without competing
       with the field label/value typography. Becomes solid + primary on hover. */
    border-bottom: 1px dotted var(--text-tertiary);
    font-weight: 500;
    transition: color 200ms ease, border-bottom-color 200ms ease, border-bottom-style 200ms ease;
}
a.ref-link:hover {
    color: var(--primary);
    border-bottom-color: var(--primary);
    border-bottom-style: solid;
}

/* ── Radio label text contrast (dark mode) ── */
fluent-radio .label__hidden {
    color: var(--text-primary) !important;
}

/* ── Fluent neutral color overrides for theme awareness ── */
fluent-text-field,
fluent-text-area,
fluent-select,
fluent-combobox,
fluent-checkbox,
fluent-radio,
fluent-radio-group,
fluent-button,
fluent-tabs,
fluent-tab,
fluent-data-grid,
fluent-data-grid-row,
fluent-data-grid-cell,
fluent-badge,
fluent-dialog {
    --dialog-bg: var(--surface);
    --neutral-foreground-rest: var(--text-primary);
    --neutral-foreground-hover: var(--text-primary);
    --neutral-fill-input-rest: var(--input-bg);
    --neutral-fill-stealth-rest: transparent;
    --neutral-fill-stealth-hover: var(--surface-hover);
    --neutral-stroke-rest: var(--border);
    --neutral-stroke-hover: var(--border);
    --neutral-layer-1: var(--surface);
    --neutral-layer-2: var(--page-bg);
    --neutral-layer-floating: var(--surface);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ── Fluent UI Dialog dark/light mode ── */
fluent-dialog::part(control),
fluent-dialog::part(dialog) {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}

/* ── Fluent UI Card dark/light mode ── */
fluent-card,
fluent-card::part(control) {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

fluent-dialog-header,
fluent-dialog-body,
fluent-dialog-footer,
.fluent-dialog-header,
.fluent-dialog-body,
.fluent-dialog-footer {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
}