/* =============================================================================
   LLM Provider Panel Styles (WP03)
   Scoped to #llm-providers-mount; consistent with the Atlas design system.
   ============================================================================= */

/* Utility: hidden state */
.llm-hidden {
    display: none !important;
}

/* Soft-warning banner shown when no active LLM */
.llm-warning-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: 6px;
    background-color: var(--color-warning-bg, #fff8e1);
    border: 1px solid var(--color-warning-border, #f9a825);
    color: var(--color-warning-text, #6d4c00);
    font-size: 0.875rem;
    font-weight: 500;
}

[data-theme="dark"] .llm-warning-banner {
    background-color: #3d2e00;
    border-color: #c67c00;
    color: #ffd04a;
}

/* Section headings within the panel */
.llm-section-title {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
    letter-spacing: 0.01em;
}

[data-theme="dark"] .llm-section-title {
    color: var(--color-text-primary-dark, #f3f4f6);
}

/* Add provider section */
.llm-add-section {
    padding: 1rem 0 1.5rem;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    margin-bottom: 1.5rem;
}

/* Provider dropdown */
.llm-provider-select {
    width: 100%;
    max-width: 360px;
}

/* Field group show/hide containers */
.llm-field-group {
    margin-top: 0.75rem;
}

/* Form result message area */
.llm-form-result {
    min-height: 1.25rem;
    margin: 0.5rem 0;
    font-size: 0.85rem;
}

.llm-error {
    color: var(--color-error, #dc2626);
}

.llm-info {
    color: var(--color-text-muted, #6b7280);
}

/* Action row for the Save button */
.llm-add-actions {
    margin-top: 1rem;
}

/* Labels for required / optional markers */
.llm-required {
    color: var(--color-error, #dc2626);
    margin-left: 2px;
}

.llm-optional {
    font-size: 0.8em;
    color: var(--color-text-muted, #9ca3af);
    font-weight: 400;
}

/* List section */
.llm-list-section {
    padding-top: 0.5rem;
}

/* "None active" control row */
.llm-active-control {
    margin-bottom: 0.75rem;
}

.llm-active-none-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary, #374151);
    cursor: pointer;
}

/* Config list container */
.llm-config-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Individual config row */
.llm-config-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    background: var(--color-surface, #ffffff);
    font-size: 0.875rem;
    transition: border-color 0.15s;
}

.llm-config-row--active {
    border-color: var(--color-primary, #2563eb);
    background: var(--color-primary-bg, #eff6ff);
}

[data-theme="dark"] .llm-config-row {
    background: var(--color-surface-dark, #1f2937);
    border-color: var(--color-border-dark, #374151);
}

[data-theme="dark"] .llm-config-row--active {
    border-color: var(--color-primary, #3b82f6);
    background: rgba(59, 130, 246, 0.1);
}

/* Radio column */
.llm-config-row-active {
    flex-shrink: 0;
}

/* Info column */
.llm-config-row-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.llm-config-name {
    font-weight: 600;
    color: var(--color-text-primary, #111827);
}

[data-theme="dark"] .llm-config-name {
    color: var(--color-text-primary-dark, #f3f4f6);
}

.llm-active-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--color-primary, #2563eb);
    color: #fff;
    vertical-align: middle;
}

.llm-config-detail,
.llm-config-key {
    color: var(--color-text-muted, #6b7280);
    font-size: 0.82rem;
}

.llm-config-key code {
    font-family: var(--font-mono, 'DM Mono', monospace);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

/* Actions column */
.llm-config-row-actions {
    flex-shrink: 0;
}

/* Empty state */
.llm-empty {
    color: var(--color-text-muted, #9ca3af);
    font-size: 0.875rem;
    font-style: italic;
    margin: 0.5rem 0;
}

/* Error banner shown on load failure */
.llm-error-banner {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    background: var(--color-error-bg, #fee2e2);
    border: 1px solid var(--color-error-border, #fca5a5);
    color: var(--color-error, #dc2626);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Price-per-token hint under the preset model dropdown */
.llm-price-hint {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-muted, #94a3b8);
    font-size: 0.8rem;
}

/* =============================================================================
   WP07 — Residency badges, EU-egress note, test result card, usage dashboard.
   Theme-aware via the core ATLAS variables (styles.css :root / [data-theme=dark]):
   --surface, --border, --text-primary/secondary/muted, --primary-color,
   --success-color, --error-color, --warning-color, --status-*-bg/fg.
   ============================================================================= */

/* Config row now stacks an info block + an optional full-width test result. */
.llm-config-row {
    flex-wrap: wrap;
}

.llm-config-row-headline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.llm-config-row-meta {
    margin-top: 0.15rem;
    white-space: normal;
}

/* Residency badge (T017) — EU (green) / Non-EU (amber) / unknown (neutral). */
.llm-residency-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid transparent;
    vertical-align: middle;
}

.llm-residency-badge--eu {
    background: var(--status-success-bg, #dcfce7);
    color: var(--status-success-fg, #166534);
    border-color: var(--success-color, #10b981);
}

.llm-residency-badge--noneu {
    background: var(--status-warning-bg, #fef3c7);
    color: var(--status-warning-fg, #d97706);
    border-color: var(--warning-color, #f59e0b);
}

.llm-residency-badge--unknown {
    background: var(--status-info-bg, #dbeafe);
    color: var(--status-info-fg, #1e40af);
    border-color: var(--secondary-color, #64748b);
}

/* Residency explanatory note under a provider / in the add form. */
.llm-residency-note {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--text-muted, #94a3b8);
}

/* Add-form residency strip (badge + note) shown above the Save/Cancel actions. */
.llm-add-residency {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.75rem 0;
}

.llm-add-residency .llm-residency-note {
    margin-top: 0;
}

/* Inline edit form fields (used by the Replace-credentials flow). */
.llm-edit-form {
    padding: 0.85rem 1rem;
    margin: -0.25rem 0 0.5rem;
    border: 1px solid var(--border, #e2e8f0);
    border-top: none;
    border-radius: 0 0 6px 6px;
    background: var(--surface, #ffffff);
}

.llm-edit-form-fields {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.llm-edit-label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
}

.llm-edit-label input,
.llm-edit-label select {
    font-weight: 400;
    max-width: 420px;
}

.llm-edit-hint {
    font-weight: 400;
    font-size: 0.76rem;
    color: var(--text-muted, #94a3b8);
}

.llm-edit-hint code {
    font-family: var(--font-mono, monospace);
}

.llm-edit-form-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
    flex-wrap: wrap;
}

.llm-edit-result {
    font-size: 0.8rem;
    color: var(--text-muted, #94a3b8);
}

/* Test result card (T018) — full-width within the row, dismissible. */
.llm-test-result-slot {
    flex-basis: 100%;
}

.llm-test-result {
    position: relative;
    margin-top: 0.6rem;
    padding: 0.6rem 2rem 0.6rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border, #e2e8f0);
    font-size: 0.82rem;
}

.llm-test-result--pending {
    background: var(--background, #f8fafc);
    color: var(--text-muted, #94a3b8);
}

.llm-test-result--pass {
    background: var(--status-success-bg, #dcfce7);
    color: var(--status-success-fg, #166534);
    border-color: var(--success-color, #10b981);
}

.llm-test-result--fail {
    background: rgba(239, 68, 68, 0.12);
    color: var(--error-color, #dc2626);
    border-color: var(--error-color, #ef4444);
}

[data-theme="dark"] .llm-test-result--fail {
    background: rgba(239, 68, 68, 0.18);
    color: var(--error-color, #f87171);
}

.llm-test-headline {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.llm-test-status {
    font-weight: 700;
}

.llm-test-summary {
    font-variant-numeric: tabular-nums;
}

.llm-test-echo,
.llm-test-error {
    margin-top: 0.35rem;
    font-size: 0.8rem;
}

.llm-test-echo code {
    font-family: var(--font-mono, monospace);
}

.llm-test-dismiss {
    position: absolute;
    top: 0.25rem;
    right: 0.4rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: inherit;
    opacity: 0.65;
    padding: 0.15rem 0.3rem;
}

.llm-test-dismiss:hover {
    opacity: 1;
}

/* =============================================================================
   Token-usage dashboard (T020) — #llm-usage-mount
   ============================================================================= */

.llm-usage-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.llm-usage-ranges {
    display: inline-flex;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    overflow: hidden;
}

.llm-usage-range-btn {
    background: var(--surface, #ffffff);
    color: var(--text-secondary, #64748b);
    border: none;
    border-right: 1px solid var(--border, #e2e8f0);
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.llm-usage-range-btn:last-child {
    border-right: none;
}

.llm-usage-range-btn:hover {
    background: var(--background, #f8fafc);
}

.llm-usage-range-btn--active {
    background: var(--primary-color, #3b82f6);
    color: #fff;
    font-weight: 600;
}

.llm-usage-custom {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.llm-usage-custom-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.76rem;
    color: var(--text-secondary, #64748b);
}

/* Summary cards */
.llm-usage-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.llm-usage-card {
    padding: 0.85rem 1rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    background: var(--surface, #ffffff);
}

.llm-usage-card-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    font-variant-numeric: tabular-nums;
}

.llm-usage-card-label {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Breakdown table */
.llm-usage-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
}

.llm-usage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.llm-usage-table th,
.llm-usage-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border, #e2e8f0);
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
}

.llm-usage-table thead th {
    background: var(--background, #f8fafc);
    color: var(--text-primary, #1e293b);
    font-weight: 600;
}

.llm-usage-table tbody tr:last-child td {
    border-bottom: none;
}

.llm-usage-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Empty + loading states */
.llm-usage-empty {
    color: var(--text-muted, #94a3b8);
    font-size: 0.85rem;
    font-style: italic;
    margin: 0.5rem 0;
}

.llm-usage-empty-state {
    padding: 1.5rem 1rem;
    text-align: center;
    border: 1px dashed var(--border, #e2e8f0);
    border-radius: 8px;
    color: var(--text-secondary, #64748b);
}

.llm-usage-empty-hint {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-muted, #94a3b8);
}