/* ============================================================
   Mud Overrides — Directional Soft UI Bridge
   Loaded AFTER MudBlazor.min.css, BEFORE scoped styles.

   Maps --color-* and --shadow-* tokens (from tokens.css) onto
   MudBlazor component classes to achieve the reference design.

   Specificity discipline:
   - Use class selectors whenever possible
   - !important only where Mud uses inline styles or high-
     specificity selectors that can't be overridden otherwise
   ============================================================ */

/* ── Global: base border radius (affects all Mud components) ── */

:root {
	--mud-default-borderradius: var(--radius-xs);
}

/* ============================================================
   BUTTONS
   ============================================================ */

/* Focus ring — consistent with design-system */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Active / press feedback */
.mud-button-root:active:not(:disabled),
.mud-icon-button:active:not(:disabled) {
	transform: translateY(1px);
}

/* Primary filled — accent raised */
.mud-button-root.mud-button-filled.mud-button-filled-primary {
	box-shadow: var(--shadow-raised);
}

.mud-button-root.mud-button-filled.mud-button-filled-primary:hover:not(:disabled) {
	background-color: var(--color-accent-hover) !important;
}

.mud-button {
	text-transform: none;
	font-weight: 500;
	letter-spacing: 0;
	border-radius: var(--radius-xs);
}

/* Neutral filled — grooved soft texture */
.mud-button-root.mud-button-filled:not([class*="mud-button-filled-primary"]):not([class*="mud-button-filled-secondary"]):not([class*="mud-button-filled-error"]):not([class*="mud-button-filled-success"]):not([class*="mud-button-filled-warning"]):not([class*="mud-button-filled-info"]) {
	background: var(--color-surface) !important;
	color: var(--color-text) !important;
	border: none;
	box-shadow:
		inset  1px  1px 0 0 rgba(255, 255, 255, 0.75),
		inset -1px -1px 0 0 rgba(0, 0, 0, 0.10),
		inset  2px  2px 0 0 rgba(255, 255, 255, 0.70),
		inset -2px -2px 0 0 rgba(0, 0, 0, 0.06);
}

/* Outlined — subtle border */
.mud-button-root.mud-button-outlined:not([class*="mud-button-outlined-primary"]) {
	border-color: var(--color-border-input);
}

.mud-button-root.mud-button-outlined.mud-button-outlined-primary {
	border-color: var(--color-accent);
	color: var(--color-accent);
	background: rgba(0, 0, 0, 0);
}

.mud-button-root.mud-button-outlined:hover:not(:disabled),
.mud-button-root.mud-button-outlined:focus-visible:not(:disabled) {
	background: var(--color-accent-subtle) !important;
}

.mud-button-root.mud-button-text {
	color: var(--color-text);
	border-radius: var(--radius-pill);
}

.mud-button-root.mud-button-text.mud-button-text-primary {
	color: var(--color-accent);
}

.mud-button-root.mud-button-text:hover:not(:disabled),
.mud-button-root.mud-button-text:focus-visible:not(:disabled) {
	background: color-mix(in srgb, var(--color-accent) 10%, transparent) !important;
}

/* Disabled state */
.mud-button-root:disabled {
	box-shadow: var(--shadow-inset) !important;
	color: var(--color-text-disabled) !important;
}

/* ============================================================
   INPUTS (Outlined Variant)
   ============================================================ */

/* Container radius */
.mud-input.mud-input-outlined {
	border-radius: var(--radius-xs);
}

/* Inset shadow on the input slot */
.mud-input.mud-input-outlined .mud-input-slot {
	background: var(--color-surface);
	box-shadow: var(--shadow-inset);
	border-radius: var(--radius-xs);
	transition: box-shadow var(--transition-fast);
}

/* Outline border — soft default */
.mud-input-outlined-border {
	border-radius: var(--radius-xs) !important;
	border-color: var(--color-border-input) !important;
}

/* Focus state — accent border + glow ring */
.mud-input.mud-input-focused .mud-input-outlined-border {
	border-color: var(--color-accent) !important;
	border-width: 2px !important;
}

.mud-input.mud-input-focused .mud-input-slot {
	box-shadow: var(--shadow-inset), 0 0 0 2px var(--color-accent-subtle);
}

/* Placeholder */
.mud-input-root::placeholder {
	color: var(--color-text-disabled);
}

.mud-select,
.mud-select-input {
	border-radius: var(--radius-xs);
}

/* ============================================================
   CARDS
   ============================================================ */

/* Standard card — paper gradient with raised shadow */
.mud-card:not(.mud-card-outlined) {
	background: linear-gradient(180deg, var(--paper-top), var(--paper-bottom)) !important;
	border: 1px solid var(--color-border-paper);
	border-radius: var(--radius-md) !important;
	box-shadow: var(--shadow-raised) !important;
}

/* Outlined card — brushed surface, no gradient */
.mud-card.mud-card-outlined {
	background: var(--color-surface-brushed) !important;
	border-color: var(--color-border-soft) !important;
	border-radius: var(--radius-md) !important;
	box-shadow: none !important;
}

/* ============================================================
   PAPER / ELEVATION
   ============================================================ */

.mud-paper.mud-elevation-0 {
	background: var(--color-surface);
}

.mud-paper.mud-elevation-1 {
	background: var(--color-surface);
	box-shadow: var(--shadow-raised) !important;
	border: 1px solid var(--color-border-soft);
}

.mud-paper.mud-elevation-2 {
	background: var(--color-surface-elevated);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.18),
		0 2px 8px rgba(0, 0, 0, 0.10) !important;
	border: 1px solid var(--color-border-input);
}

/* ============================================================
   ALERTS
   ============================================================ */

.mud-alert.mud-alert-outlined,
.mud-alert.mud-alert-filled {
	background: linear-gradient(180deg, var(--paper-top), var(--paper-bottom));
	border-color: var(--color-border-paper);
	border-radius: var(--radius-md);
	color: var(--color-text);
}

.mud-alert.mud-alert-filled {
	box-shadow: var(--shadow-raised);
}

.mud-alert .mud-alert-message,
.mud-alert .mud-alert-icon {
	color: inherit;
}

/* Status indicator via left border accent */
.mud-alert.mud-alert-outlined.mud-alert-outlined-success,
.mud-alert.mud-alert-filled.mud-alert-filled-success {
	border-left: 3px solid var(--led-success);
}

.mud-alert.mud-alert-outlined.mud-alert-outlined-warning,
.mud-alert.mud-alert-filled.mud-alert-filled-warning {
	border-left: 3px solid var(--led-warning);
}

.mud-alert.mud-alert-outlined.mud-alert-outlined-error,
.mud-alert.mud-alert-filled.mud-alert-filled-error {
	border-left: 3px solid var(--led-error);
}

.mud-alert.mud-alert-outlined.mud-alert-outlined-info,
.mud-alert.mud-alert-filled.mud-alert-filled-info {
	border-left: 3px solid var(--color-accent);
}

/* ============================================================
   DIVIDERS
   ============================================================ */

.mud-divider {
	border-color: var(--color-border-soft);
}

/* ============================================================
   TABS
   ============================================================ */

.mud-tab.mud-tab-active {
	color: var(--color-text);
	border-bottom: 2px solid var(--color-accent);
}

.mud-tab:not(.mud-tab-active) {
	color: var(--color-text-secondary);
}

/* ============================================================
   CHIPS
   ============================================================ */

.mud-chip-root {
	border-radius: var(--radius-pill);
	font-weight: 500;
}

.mud-chip-root.mud-chip-outlined {
	border-color: var(--color-border-input);
	background: rgba(0, 0, 0, 0);
}

.mud-chip-root.mud-chip-text {
	background: color-mix(in srgb, var(--color-surface-elevated) 80%, transparent);
	border: 1px solid var(--color-border-soft);
}

/* ============================================================
   AVATAR
   ============================================================ */

.mud-avatar {
	border: 1px solid var(--color-border-input);
	box-shadow: var(--shadow-raised);
}

/* ============================================================
   LISTS
   ============================================================ */

.mud-list {
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border-soft);
	background: var(--color-surface-elevated);
}

.mud-list-item {
	border-radius: var(--radius-xs);
}

.mud-list-item.mud-selected-item {
	background: var(--color-accent-subtle);
}

/* ============================================================
   TABLES
   ============================================================ */

.mud-table-container,
.mud-simple-table {
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-md);
	background: linear-gradient(180deg, var(--paper-top), var(--paper-bottom));
	box-shadow: var(--shadow-raised);
}

.mud-table thead th,
.mud-simple-table thead th {
	color: var(--color-text-secondary);
	border-bottom: 1px solid var(--color-border-soft);
}

.mud-table tbody td,
.mud-simple-table tbody td {
	border-bottom-color: var(--color-border-soft);
}

/* ============================================================
   EXPANSION PANELS
   ============================================================ */

.mud-expand-panel {
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-md);
	background: linear-gradient(180deg, var(--paper-top), var(--paper-bottom));
	box-shadow: var(--shadow-raised);
}

.mud-expand-panel-header {
	color: var(--color-text);
}

/* ============================================================
   BUTTON GROUPS
   ============================================================ */

.mud-button-group {
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border-soft);
	background: var(--color-surface-elevated);
	padding: 2px;
}

/* ============================================================
   TOGGLE SWITCH (MudSwitch)
   ============================================================ */

/* Track — inset sunken appearance */
.mud-switch-track {
	background-color: var(--color-surface) !important;
	box-shadow: var(--shadow-inset);
	border: 1px solid var(--color-border-soft);
}

/* Checked track — accent tint */
.mud-switch input:checked ~ .mud-switch-track {
	background-color: var(--color-accent-subtle) !important;
	border-color: var(--color-accent);
}

/* Thumb — elevated surface */
.mud-switch-thumb {
	background-color: var(--color-surface-elevated) !important;
	box-shadow:
		0 2px 6px rgba(0, 0, 0, 0.14),
		0 1px 2px rgba(0, 0, 0, 0.08) !important;
	border: 1px solid var(--color-border-input);
}

/* ============================================================
   CHECKBOX & RADIO — LED appearance
   (No MudCheckBox/MudRadio in codebase yet; included for
    future use. Pair with CheckedIcon/UncheckedIcon params.)
   ============================================================ */

.mud-checkbox .mud-icon-button,
.mud-radio-button .mud-icon-button {
	width: var(--led-size);
	height: var(--led-size);
	min-width: unset;
	padding: 0;
	border-radius: var(--radius-pill);
	background: var(--led-off);
	border: 1px solid var(--color-led-outline);
}

.mud-checkbox .mud-icon-button svg,
.mud-radio-button .mud-icon-button svg {
	display: none;
}

.mud-checkbox.mud-checked .mud-icon-button,
.mud-radio-button.mud-checked .mud-icon-button {
	background: var(--led-on);
	border-color: rgba(0, 0, 0, 0.15);
	box-shadow: var(--led-glow);
}