/* ============================================================
   Pod Components — Blazor Subset of the Directional Soft UI
   Import AFTER tokens.css, BEFORE MudBlazor.min.css.

   Canonical source: design/system/components.css
   This file contains only the primitives NOT handled by
   MudBlazor + mud-overrides.css:
     surface utilities, LED system, typography helpers,
     toggle switch, chip/badge, doc cards, progress strips,
     toolbar chips, avatar badge.

   Omitted (MudBlazor handles): .btn, .input__field,
   .select__field, .option, .tab-bar/.tab-item, .alert,
   .soft-table, .tree, .breadcrumb.
   ============================================================ */

/* ============================================================
   UTILITY — SURFACE & MATERIAL
   ============================================================ */

.soft-border        { border: 1px solid var(--color-border-soft); }
.pressed:active     { transform: translateY(1px); }

/* ── Surface Materials ──────────────────────────────────────── */

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

.surface-sunken {
	background: var(--color-surface);
	box-shadow: var(--shadow-inset);
}

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

.surface-brushed {
	background: var(--color-surface-brushed);
	border: 1px solid var(--color-border-soft);
}

.surface-paper {
	background: linear-gradient(180deg, var(--paper-top), var(--paper-bottom));
	border: 1px solid var(--color-border-paper);
}

.surface-grooved {
	background: var(--color-surface);
	box-shadow:
		inset 1px 1px 0 0 rgba(0,0,0,0.14),
		inset -1px -1px 0 0 rgba(255,255,255,0.80),
		inset 2px 2px 0 0 rgba(255,255,255,0.75),
		inset -2px -2px 0 0 rgba(0,0,0,0.10);
}

/* ============================================================
   LED INDICATOR
   ============================================================ */

.led {
	display: inline-block;
	width: var(--led-size);
	height: var(--led-size);
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-led-outline);
	flex-shrink: 0;
	transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.led--off     { background: var(--led-off); }
.led--on      { background: var(--led-on);      border-color: rgba(0, 0, 0, 0.15); box-shadow: var(--led-glow); }
.led--success { background: var(--led-success);  border-color: rgba(0, 0, 0, 0.12); box-shadow: var(--led-success-glow); }
.led--warning { background: var(--led-warning);  border-color: rgba(0, 0, 0, 0.12); box-shadow: var(--led-warning-glow); }
.led--error   { background: var(--led-error);    border-color: rgba(0, 0, 0, 0.12); box-shadow: var(--led-error-glow); }
.led--info    { background: var(--led-info);     border-color: rgba(0, 0, 0, 0.15); box-shadow: var(--led-info-glow); }

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */

.type-h1 { font-size: var(--text-4xl); font-weight: var(--weight-bold);     line-height: var(--leading-tight); }
.type-h2 { font-size: var(--text-3xl); font-weight: var(--weight-bold);     line-height: var(--leading-tight); }
.type-h3 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.type-h4 { font-size: var(--text-xl);  font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.type-h5 { font-size: var(--text-lg);  font-weight: var(--weight-medium);   line-height: var(--leading-tight); }
.type-h6 { font-size: var(--text-base); font-weight: var(--weight-medium);  line-height: var(--leading-tight); }

.type-body    { font-size: var(--text-base); line-height: var(--leading-normal); }
.type-small   { font-size: var(--text-sm);   line-height: var(--leading-normal); color: var(--color-text-secondary); }
.type-caption { font-size: var(--text-xs);   line-height: var(--leading-normal); color: var(--color-text-secondary); }
.type-mono    { font-family: var(--font-mono); font-size: var(--text-sm); }
.type-serif   { font-family: var(--font-serif); font-size: var(--text-lg); font-style: italic; }

/* ============================================================
   TOGGLE SWITCH
   (Use when MudSwitch LED-in-thumb behaviour is needed)
   ============================================================ */

.toggle {
	display: inline-flex;
	align-items: center;
	position: relative;
}

.toggle__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.toggle__track {
	position: relative;
	width: var(--toggle-width);
	height: var(--toggle-height);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	border: 1px solid var(--color-border-soft);
	box-shadow: var(--shadow-inset);
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: box-shadow var(--transition-normal);
}

.toggle__thumb {
	position: absolute;
	top: var(--toggle-thumb-offset);
	left: var(--toggle-thumb-offset);
	width: var(--toggle-thumb-size);
	height: var(--toggle-thumb-size);
	border-radius: var(--radius-pill);
	background: var(--color-surface-elevated);
	border: 1px solid var(--color-border-input);
	box-shadow:
		0 2px 6px rgba(0, 0, 0, 0.14),
		0 1px 2px rgba(0, 0, 0, 0.08);
	display: grid;
	place-items: center;
	transition: transform 160ms ease;
}

.toggle__input:checked + .toggle__track .toggle__thumb {
	transform: translateX(var(--toggle-thumb-travel));
}

/* ============================================================
   CHIP / BADGE
   ============================================================ */

.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-4);
	border-radius: var(--radius-pill);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
}

.chip--accent {
	background: var(--color-accent-subtle);
	color: var(--color-accent);
}

.chip--neutral {
	background: var(--color-surface-elevated);
	color: var(--color-text-secondary);
	border: 1px solid var(--color-border-soft);
}

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

.doc-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: var(--radius-md);
	padding: var(--space-5);
	cursor: pointer;
	transition: box-shadow var(--transition-normal), transform var(--transition-fast), border-color var(--transition-fast);
	min-height: 100px;
	border: 1px solid transparent;
}

.doc-card:hover {
	box-shadow: var(--shadow-raised);
	transform: translateY(-1px);
}

.doc-card--selected {
	border-color: var(--color-accent);
	background: var(--selected-surface);
}

.doc-card--selected .led {
	background: var(--led-on);
	border-color: rgba(0, 0, 0, 0.15);
	box-shadow: var(--led-glow);
}

.doc-card__footer {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--space-3);
}

.doc-card__title {
	font-weight: var(--weight-medium);
	margin-bottom: var(--space-2);
}

.doc-card__meta {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

/* ============================================================
   PROGRESS BAR (segmented LED strip)
   ============================================================ */

.progress {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.progress__label {
	display: flex;
	justify-content: space-between;
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
}

.progress__track {
	height: 5px;
	border-radius: var(--radius-pill);
	background: transparent;
	display: flex;
	gap: 2px;
	padding: 0;
	align-items: center;
}

.progress__segment {
	flex: 1;
	height: 100%;
	border-radius: 1px;
	background: var(--led-off);
	transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.progress__segment--lit {
	background: var(--led-on);
	box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 0 4px rgba(255, 255, 255, 0.7);
}

.progress__segment--accent {
	background: var(--color-accent);
	box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 0 4px rgba(74, 53, 96, 0.4);
}

.progress__segment--success {
	background: var(--led-success);
	box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}

.progress__segment--warning {
	background: var(--led-warning);
	box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}

.progress__segment--error {
	background: var(--led-error);
	box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}

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

.toolbar {
	display: flex;
	gap: var(--space-4);
	align-items: center;
	flex-wrap: wrap;
}

.toolbar-chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-xs);
	background: linear-gradient(180deg, var(--paper-top), var(--paper-bottom));
	border: 1px solid var(--color-border-paper-soft);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	cursor: pointer;
	gap: var(--space-2);
	transition: background var(--transition-fast), border-color var(--transition-fast);
}

.toolbar-chip--active {
	background: var(--selected-surface);
	border-color: var(--color-accent);
}

.toolbar__spacer {
	flex: 1;
}

/* ============================================================
   AVATAR BADGE (extends MudAvatar)
   ============================================================ */

.avatar__badge {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 14px;
	height: 14px;
	border-radius: var(--radius-pill);
	border: 2px solid var(--color-surface);
	background: var(--color-accent);
}