/* Powered by AXING */
/* ========================================================================== 
   Design Tokens
   Shared `--axing-*` variables keep spacing, color, and component tuning in
   one place for easier manufacturer-side maintenance.
   ========================================================================== */

:root {
	--axing-font-family: "Helvetica", system-ui, sans-serif;
	--axing-font-size: 16px;
	--axing-font-size-label: 0.875rem;
	--axing-font-size-label-compact: 0.8125rem;
	--axing-font-size-table-head: 0.8125rem;
	--axing-letter-spacing-label: 0.06em;
	--axing-letter-spacing-table: 0.04em;
	--axing-green: hsl(178, 62%, 36%);
	--axing-green-dark: hsl(178, 62%, 26%);
	--axing-green-soft: hsl(176, 36%, 93%);
	--axing-ink: hsl(180, 18%, 14%);
	--axing-muted: hsl(180, 8%, 36%);
	--axing-border: hsl(180, 12%, 84%);
	--axing-border-strong: hsl(180, 14%, 76%);
	--axing-surface: hsl(0, 0%, 100%);
	--axing-surface-alt: hsl(180, 18%, 98%);
	--axing-shell: hsl(165, 24%, 95%);
	--axing-nav-surface: hsl(174, 24%, 96%);
	--axing-main-surface: hsl(0, 0%, 100%);
	--axing-danger: hsl(3, 66%, 45%);
	--axing-danger-soft: hsl(8, 65%, 96%);
	--axing-shadow-sm: 0 0.5rem 1.5rem hsla(176, 35%, 24%, 0.05);
	--axing-shadow-md: 0 0.75rem 2rem hsla(176, 35%, 24%, 0.08);
	--axing-shadow-xs: 0 0.125rem 0.375rem hsla(176, 35%, 24%, 0.05);
	--axing-ring: 0 0 0 0.2rem hsla(178, 62%, 36%, 0.15);
	--axing-transition-fast: 120ms ease;
	--axing-transition-medium: 180ms ease;
	--axing-space-2xs: 0.25rem;
	--axing-space-xs: 0.5rem;
	--axing-space-sm: 0.75rem;
	--axing-space-md: 1rem;
	--axing-space-lg: 1.5rem;
	--axing-space-xl: 2rem;
	--axing-space-2xl: 3rem;
	--axing-radius-sm: 0.375rem;
	--axing-radius-md: 0.5rem;
	--axing-radius-lg: 0.875rem;
	--axing-nav-width: 14rem;
	--axing-content-width: 72rem;
	--axing-logo-width: 8.875rem;
	--axing-control-height: 2.5rem;
	--axing-control-padding: 0.5rem 0.875rem;
	--axing-control-radius: var(--axing-radius-sm);
	--axing-control-border-width: 1px;
	--axing-control-line-height: 1.25;
	--axing-control-padding-select: 0.5rem 2.25rem 0.5rem 0.875rem;
	--axing-card-gap: var(--axing-space-md);
	--axing-card-gap-compact: var(--axing-space-sm);
	--axing-card-padding: var(--axing-space-md);
	--axing-card-padding-compact: 0.875rem 1rem;
	--axing-card-border: 1px solid var(--axing-border);
	--axing-card-radius: var(--axing-radius-md);
	--axing-card-background: var(--axing-surface-alt);
	--axing-banner-padding: 0.875rem 1rem;
	--axing-hint-padding: 0.5rem 0.75rem;
	--axing-metric-label-width: 7rem;
	--axing-pill-height: 2rem;
	--axing-pill-padding: 0.375rem 0.75rem;
	--axing-panel-width-login: 29rem;
	--axing-panel-gap-login: 1.875rem;
	--axing-brand-gap-login: 1rem;
	--axing-brand-copy-gap-login: 0.5rem;
	--axing-form-gap-login: 1.25rem;
	--axing-field-gap-login: 0.625rem;
	--axing-actions-gap-login: 0.75rem;
	--axing-actions-offset-login: 0.5rem;
	--axing-shell-background: linear-gradient(180deg, var(--axing-shell) 0%, #f6faf9 100%);
	--axing-shell-background-login: radial-gradient(circle at top right, hsla(178, 62%, 36%, 0.12), transparent 28%), var(--axing-shell-background);
	--axing-focus-color-strong: hsla(178, 62%, 45%, 0.34);
	--axing-text-on-accent: #fff;
	--axing-accent-soft-text: var(--axing-green-dark);
	--axing-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23506c6b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
	--axing-icon-theme-system: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='12' rx='2'/%3E%3Cpath d='M8 19.5h8M12 16.5v3'/%3E%3C/svg%3E");
	--axing-icon-theme-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5' fill='black' stroke='none'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M4.93 4.93l1.77 1.77M17.3 17.3l1.77 1.77M2 12h2.5M19.5 12H22M4.93 19.07l1.77-1.77M17.3 6.7l1.77-1.77'/%3E%3C/svg%3E");
	--axing-icon-theme-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 15.5A8.5 8.5 0 0 1 8.5 4 9 9 0 1 0 20 15.5z'/%3E%3C/svg%3E");
}

:root:not([data-theme="dark"]),
[data-theme="light"] {
	color-scheme: light;
}

[data-theme="dark"] {
	color-scheme: dark;
	--axing-green-soft: hsla(178, 62%, 36%, 0.18);
	--axing-ink: hsl(210, 14%, 80%);
	--axing-muted: hsl(215, 14%, 67%);
	--axing-border: hsl(218, 24%, 24%);
	--axing-border-strong: hsl(218, 20%, 34%);
	--axing-surface: hsl(218, 28%, 16%);
	--axing-surface-alt: hsl(218, 24%, 18%);
	--axing-shell: hsl(220, 28%, 11%);
	--axing-nav-surface: hsl(218, 24%, 16%);
	--axing-main-surface: hsl(218, 24%, 15%);
	--axing-danger-soft: hsla(3, 66%, 45%, 0.16);
	--axing-shadow-sm: 0 0.5rem 1.5rem hsla(220, 38%, 4%, 0.32);
	--axing-shadow-md: 0 0.75rem 2rem hsla(220, 38%, 4%, 0.4);
	--axing-shadow-xs: 0 0.125rem 0.375rem hsla(220, 38%, 4%, 0.24);
	--axing-ring: 0 0 0 0.2rem hsla(178, 62%, 52%, 0.2);
	--axing-shell-background: linear-gradient(180deg, hsl(220, 28%, 11%) 0%, hsl(216, 24%, 13%) 100%);
	--axing-shell-background-login: radial-gradient(circle at top right, hsla(178, 62%, 36%, 0.24), transparent 30%), var(--axing-shell-background);
	--axing-focus-color-strong: hsla(178, 62%, 56%, 0.56);
	--axing-text-on-accent: #f8fbfb;
	--axing-accent-soft-text: hsl(178, 72%, 78%);
	--axing-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23a9b4c5' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		color-scheme: dark;
		--axing-green-soft: hsla(178, 62%, 36%, 0.18);
		--axing-ink: hsl(210, 14%, 80%);
		--axing-muted: hsl(215, 14%, 67%);
		--axing-border: hsl(218, 24%, 24%);
		--axing-border-strong: hsl(218, 20%, 34%);
		--axing-surface: hsl(218, 28%, 16%);
		--axing-surface-alt: hsl(218, 24%, 18%);
		--axing-shell: hsl(220, 28%, 11%);
		--axing-nav-surface: hsl(218, 24%, 16%);
		--axing-main-surface: hsl(218, 24%, 15%);
		--axing-danger-soft: hsla(3, 66%, 45%, 0.16);
		--axing-shadow-sm: 0 0.5rem 1.5rem hsla(220, 38%, 4%, 0.32);
		--axing-shadow-md: 0 0.75rem 2rem hsla(220, 38%, 4%, 0.4);
		--axing-shadow-xs: 0 0.125rem 0.375rem hsla(220, 38%, 4%, 0.24);
		--axing-ring: 0 0 0 0.2rem hsla(178, 62%, 52%, 0.2);
		--axing-shell-background: linear-gradient(180deg, hsl(220, 28%, 11%) 0%, hsl(216, 24%, 13%) 100%);
		--axing-shell-background-login: radial-gradient(circle at top right, hsla(178, 62%, 36%, 0.24), transparent 30%), var(--axing-shell-background);
		--axing-focus-color-strong: hsla(178, 62%, 56%, 0.56);
		--axing-text-on-accent: #f8fbfb;
		--axing-accent-soft-text: hsl(178, 72%, 78%);
		--axing-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23a9b4c5' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
	}
}

/* ==========================================================================
   Reset And Page Foundations
   ========================================================================== */

html {
	font-size: var(--axing-font-size);
    /* force-disable text autoscaling on mobile devices to preserve layout integrity */
    -webkit-text-size-adjust: 100%; /* iOS Safari */
    text-size-adjust: 100%;         /* Standard */
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

[hidden] {
	display: none !important;
}

*::selection {
	background: var(--axing-green);
	color: #fafbfb;
}

html,
body {
	min-height: 100%;
}

body {
	margin: 0;
	font-family: var(--axing-font-family);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--axing-ink);
	background: var(--axing-shell-background);
}

body.login-page {
	background: var(--axing-shell-background-login);
}

img {
	display: block;
	max-width: 100%;
}

/* ==========================================================================
   Login View
   Login layout is intentionally isolated here. Form controls should reuse the
   shared control styles lower in the file instead of redefining them.
   ========================================================================== */

.login-shell {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: var(--axing-space-xl);
}

.login-panel {
	width: min(100%, var(--axing-panel-width-login));
	display: grid;
	gap: var(--axing-panel-gap-login);
	padding: clamp(1.25rem, 2vw, 2rem);
	border: var(--axing-card-border);
	border-radius: var(--axing-radius-lg);
	background: color-mix(in srgb, var(--axing-surface) 92%, white);
	box-shadow: var(--axing-shadow-md);
}

.login-brand {
	display: grid;
	gap: var(--axing-brand-gap-login);
}

.login-utility-row {
	display: flex;
	justify-content: flex-end;
}

.login-logo {
	width: 8.875rem;
	height: auto;
}

.login-brand-copy {
	display: grid;
	gap: var(--axing-brand-copy-gap-login);
}

.login-kicker,
.login-subtitle,
.login-status,
.login-hint {
	margin: 0;
}

.login-kicker,
.login-label {
	color: var(--axing-muted);
	font-size: var(--axing-font-size-label-compact);
	letter-spacing: var(--axing-letter-spacing-label);
	text-transform: uppercase;
}

.login-title {
	margin: 0;
	font-size: clamp(1.5rem, 4vw, 2rem);
	line-height: 1.05;
}

.login-subtitle {
	color: var(--axing-muted);
	line-height: 1.45;
}

.login-hint {
	padding: var(--axing-hint-padding);
	border: 1px dotted var(--axing-danger);
	border-radius: var(--axing-radius-sm);
	color: var(--axing-danger);
	background: color-mix(in srgb, var(--axing-danger-soft) 40%, white);
	font-size: var(--axing-font-size-label-compact);
	line-height: 1.35;
}

.login-form {
	display: grid;
	gap: var(--axing-form-gap-login);
}

.login-field {
	display: grid;
	gap: var(--axing-field-gap-login);
}

.login-actions {
	display: grid;
	gap: var(--axing-actions-gap-login);
	margin-top: var(--axing-actions-offset-login);
}

.login-status {
	min-height: 1.25rem;
	color: var(--axing-muted);
	line-height: 1.4;
}

.login-status[data-tone="error"] {
	color: var(--axing-danger);
}

.login-status[data-tone="success"] {
	color: var(--axing-green-dark);
}

/* ==========================================================================
   Shared Controls And Links
   ========================================================================== */

button,
input,
select {
	font: inherit;
	margin: 0;
}

button,
input[type="text"],
input[type="password"] {
	appearance: none;
	height: var(--axing-control-height);
	padding: var(--axing-control-padding);
	border: var(--axing-control-border-width) solid var(--axing-border);
	border-radius: var(--axing-control-radius);
	line-height: var(--axing-control-line-height);
}

input[type="number"] {
	height: var(--axing-control-height);
	padding: var(--axing-control-padding);
	border: var(--axing-control-border-width) solid var(--axing-border);
	border-radius: var(--axing-control-radius);
	line-height: var(--axing-control-line-height);
}

input[type="file"] {
	min-height: var(--axing-control-height);
	padding: 0;
	border: var(--axing-control-border-width) solid var(--axing-border);
	border-radius: var(--axing-control-radius);
	line-height: var(--axing-control-line-height);
}

input[type="file"]::file-selector-button {
	margin: calc(var(--axing-control-padding) * -1);
	margin-right: var(--axing-space-sm);
	min-height: var(--axing-control-height);
	padding: var(--axing-control-padding);
	border: 0;
	border-right: var(--axing-control-border-width) solid var(--axing-border);
	background: var(--axing-green);
	color: var(--axing-text-on-accent);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

input[type="file"]:hover::file-selector-button,
input[type="file"]:focus-within::file-selector-button {
	background: var(--axing-green-dark);
}

select {
	appearance: none;
	height: var(--axing-control-height);
	padding: var(--axing-control-padding-select);
	border: var(--axing-control-border-width) solid var(--axing-border);
	border-radius: var(--axing-control-radius);
	line-height: var(--axing-control-line-height);
	background-color: var(--axing-surface);
	background-image: var(--axing-select-chevron);
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
	background-size: 0.875rem;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	cursor: pointer;
}

button:disabled {
	cursor: not-allowed;
	opacity: 0.65;
}

.button-primary,
.view-refresh {
	border-color: var(--axing-green);
	background: var(--axing-green);
	color: var(--axing-text-on-accent);
	font-weight: 600;
	transition:
		background-color var(--axing-transition-fast),
		border-color var(--axing-transition-fast),
		transform var(--axing-transition-fast),
		box-shadow var(--axing-transition-fast);
}

.button-primary:hover,
.button-primary:focus-visible,
.view-refresh:hover,
.view-refresh:focus-visible {
	background: var(--axing-green-dark);
	border-color: var(--axing-green-dark);
	box-shadow: var(--axing-ring);
	outline: 0;
}

.button-secondary,
.view-link-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--axing-control-height);
	padding: var(--axing-control-padding);
	border: 1px solid var(--axing-border);
	border-radius: var(--axing-control-radius);
	background: var(--axing-surface);
	color: var(--axing-ink);
	font-weight: 600;
	line-height: var(--axing-control-line-height);
	transition:
		background-color var(--axing-transition-fast),
		border-color var(--axing-transition-fast),
		box-shadow var(--axing-transition-fast);
}

.button-secondary:hover,
.button-secondary:focus-visible,
.view-link-action:hover,
.view-link-action:focus-visible {
	border-color: var(--axing-border-strong);
	background: var(--axing-surface-alt);
	box-shadow: var(--axing-ring);
	outline: 0;
}

/* ==========================================================================
   Theme Toggle
   ========================================================================== */

.theme-toggle {
	--axing-theme-toggle-size: 2.375rem;
	display: inline-flex;
	align-items: stretch;
	min-height: var(--axing-theme-toggle-size);
	border-radius: var(--axing-control-radius);
}

.theme-toggle__option {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--axing-theme-toggle-size);
	min-width: var(--axing-theme-toggle-size);
	height: var(--axing-theme-toggle-size);
	min-height: var(--axing-theme-toggle-size);
	padding: 0;
	border: 1px solid var(--axing-green);
	border-radius: var(--axing-control-radius);
	background: var(--axing-green);
	color: color-mix(in srgb, var(--axing-text-on-accent) 72%, transparent);
	cursor: pointer;
	font: inherit;
	line-height: 1;
	position: relative;
	z-index: 1;
	transition:
		background-color var(--axing-transition-fast),
		border-color var(--axing-transition-fast),
		color var(--axing-transition-fast),
		transform var(--axing-transition-fast),
		outline-color var(--axing-transition-fast);
}

.theme-toggle > :not(:first-child) {
	margin-left: -1px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.theme-toggle > :not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.theme-toggle__option:hover {
	background: var(--axing-green-dark);
	border-color: var(--axing-green-dark);
	color: color-mix(in srgb, var(--axing-text-on-accent) 88%, transparent);
}

.theme-toggle__option:focus-visible {
	outline: 2px solid var(--axing-focus-color-strong);
	outline-offset: -1px;
	z-index: 2;
}

.theme-toggle__option[aria-pressed="true"] {
	background: var(--axing-green-dark);
	border-color: var(--axing-green-dark);
	color: var(--axing-text-on-accent);
}

.theme-toggle__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	flex: 0 0 auto;
}

.theme-toggle__icon::before {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	background-color: currentColor;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 1.125rem 1.125rem;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: 1.125rem 1.125rem;
}

.theme-toggle__icon--system::before {
	-webkit-mask-image: var(--axing-icon-theme-system);
	mask-image: var(--axing-icon-theme-system);
}

.theme-toggle__icon--sun::before {
	-webkit-mask-image: var(--axing-icon-theme-sun);
	mask-image: var(--axing-icon-theme-sun);
}

.theme-toggle__icon--moon::before {
	-webkit-mask-image: var(--axing-icon-theme-moon);
	mask-image: var(--axing-icon-theme-moon);
	-webkit-mask-size: 1rem 1rem;
	mask-size: 1rem 1rem;
}

/* ==========================================================================
   App Shell
   ========================================================================== */

.app-shell {
	display: grid;
	grid-template-areas:
		"nav"
		"main";
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr);
	gap: var(--axing-space-md);
	min-height: 100vh;
	padding: var(--axing-space-md);
}

.app-nav,
.app-main {
	min-width: 0;
	border: 1px solid var(--axing-border);
	border-radius: var(--axing-radius-lg);
	box-shadow: var(--axing-shadow-sm);
}

.app-nav {
	grid-area: nav;
	padding: var(--axing-space-md);
	background: var(--axing-nav-surface);
}

.app-main {
	grid-area: main;
	padding: var(--axing-space-md);
	background: var(--axing-main-surface);
}

.app-brand {
	display: grid;
	gap: var(--axing-space-md);
	margin-bottom: var(--axing-space-2xs);
}

.app-nav-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--axing-space-md);
}

.app-logo {
	width: var(--axing-logo-width);
	height: auto;
}

.app-menu-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.25rem;
	width: 2.75rem;
	min-width: 2.75rem;
	padding: 0.625rem;
	background: var(--axing-surface);
	transition:
		background-color var(--axing-transition-fast),
		box-shadow var(--axing-transition-fast),
		border-color var(--axing-transition-fast);
}

.app-menu-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--axing-green);
	border-radius: 999px;
	transform-origin: center;
	transition:
		transform var(--axing-transition-fast),
		opacity var(--axing-transition-fast);
}

.app-menu-toggle:hover,
.app-menu-toggle:focus-visible {
	background: var(--axing-green-soft);
	border-color: color-mix(in srgb, var(--axing-green) 18%, var(--axing-border));
	box-shadow: var(--axing-ring);
	outline: 0;
}

.app-menu-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(0.375rem) rotate(45deg);
}

.app-menu-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.app-menu-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-0.375rem) rotate(-45deg);
}

.app-eyebrow,
.view-kicker,
.view-description,
.view-banner,
.view-status,
.metric-empty,
.client-empty,
.placeholder-note {
	margin: 0;
	color: var(--axing-muted);
}

.app-eyebrow,
.view-kicker,
.form-label {
	font-size: var(--axing-font-size-label);
	letter-spacing: var(--axing-letter-spacing-label);
	text-transform: uppercase;
}

.view-kicker {
	display: none;
}

.app-device,
.view-title,
.section-title,
.radio-title,
.clients-title,
.placeholder-title {
	margin: 0;
	line-height: 1.1;
}

.app-device {
	font-size: 1.5rem;
}

.section-title,
.radio-title {
	font-size: 1.25rem;
}

.app-menu {
	display: grid;
	gap: var(--axing-space-2xs);
	margin: var(--axing-space-md) 0 0 0;
	padding: 0;
	list-style: none;
}

.app-shell[data-nav-open="false"] .app-menu {
	display: none;
}

.app-menu a {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: var(--axing-control-height);
	padding: var(--axing-control-padding);
	border: 1px solid transparent;
	border-radius: var(--axing-radius-sm);
	line-height: var(--axing-control-line-height);
	font-weight: 600;
	transition:
		background-color var(--axing-transition-fast),
		border-color var(--axing-transition-fast),
		color var(--axing-transition-fast),
		transform var(--axing-transition-fast);
}

.app-menu a[aria-current="page"] {
	background: var(--axing-green-soft);
	border-color: color-mix(in srgb, var(--axing-green) 18%, var(--axing-border));
	color: var(--axing-accent-soft-text);
}

.app-menu a:hover,
.app-menu a:focus-visible {
	background: color-mix(in srgb, var(--axing-green-soft) 22%, transparent);
	border-color: color-mix(in srgb, var(--axing-green) 14%, var(--axing-border));
	outline: 0;
}

.app-menu-theme {
	display: grid;
	gap: var(--axing-space-xs);
	margin-top: var(--axing-space-xs);
	padding: var(--axing-space-sm);
}

.app-menu-theme-label {
	color: var(--axing-muted);
	font-size: var(--axing-font-size-label);
	font-weight: 600;
	letter-spacing: var(--axing-letter-spacing-label);
	text-transform: uppercase;
}

.app-menu-theme .theme-toggle {
	justify-self: start;
}

.view-head {
	display: grid;
	gap: var(--axing-space-sm);
	margin-bottom: var(--axing-space-md);
	padding-bottom: var(--axing-space-md);
}

.view-head-row {
	display: grid;
	gap: var(--axing-space-sm);
}

.view-actions {
	display: grid;
	gap: var(--axing-space-sm);
}

.view-title {
	font-size: 1.5rem;
}

.view-description {
	max-width: 42rem;
}

.view-banner {
	padding: var(--axing-banner-padding);
	border: 1px solid var(--axing-border);
	border-radius: var(--axing-radius-sm);
	background: var(--axing-surface-alt);
	color: var(--axing-ink);
}

.view-banner[data-tone="success"] {
	border-color: color-mix(in srgb, var(--axing-green) 30%, var(--axing-border));
	background: color-mix(in srgb, var(--axing-green-soft) 68%, white);
	color: var(--axing-accent-soft-text);
}

.view-banner[data-tone="error"] {
	border-color: color-mix(in srgb, var(--axing-danger) 34%, var(--axing-border));
	background: var(--axing-danger-soft);
}

.view-banner[data-tone="muted"] {
	color: var(--axing-muted);
}

.app-hint {
	margin: 0;
	padding: var(--axing-hint-padding);
	border: 1px dotted var(--axing-danger);
	border-radius: var(--axing-radius-sm);
	color: var(--axing-danger);
	background: color-mix(in srgb, var(--axing-danger-soft) 40%, white);
	font-size: var(--axing-font-size-label-compact);
	line-height: 1.35;
}

.view-refresh {
	justify-self: start;
}

.outline {
	border-color: var(--axing-green);
	color: var(--axing-green);
	background: var(--axing-surface);
}

.outline:hover,
.outline:focus-visible {
	border-color: var(--axing-green-dark);
	background: var(--axing-green-soft);
	color: var(--axing-accent-soft-text);
}

/* ==========================================================================
   Shared Panels And Layout Primitives
   ========================================================================== */

.view-body,
.config-form {
	display: grid;
	gap: var(--axing-space-lg);
}

.section-block,
.radio-card,
.clients-panel,
.placeholder-panel {
	display: grid;
	gap: var(--axing-card-gap);
	padding: var(--axing-card-padding);
	background: var(--axing-card-background);
	border: var(--axing-card-border);
	border-radius: var(--axing-card-radius);
	box-shadow: var(--axing-shadow-xs);
}

.section-head {
	display: grid;
	gap: var(--axing-space-xs);
}

.section-note {
	margin: 0;
	color: var(--axing-muted);
	font-size: 0.9375rem;
	max-width: 48rem;
}

/*
  Compact cards share the same tighter spacing. Keeping this grouped avoids
  repeating the same padding value across each feature section.
*/
.info-layout .section-block,
.info-layout .radio-card,
.info-layout .clients-panel,
.upload-card,
.vap-summary-card,
.vlan-toolbar-card,
.vlan-table-card,
.radio-general-card,
.radio-band-card,
.user-card {
	gap: var(--axing-card-gap-compact);
	padding: var(--axing-card-padding-compact);
}

.section-grid,
.radio-grid,
.form-grid,
.port-grid,
.vap-grid {
	display: grid;
	gap: var(--axing-space-md);
}

.section-grid.info-device-grid {
	grid-template-columns: 1fr;
}

/* ==========================================================================
   Information View
   Compact status/summary presentation for the read-only dashboard page.
   ========================================================================== */

.info-layout,
.info-radio-grid {
	display: grid;
	gap: var(--axing-space-md);
}

.info-card-head,
.info-subsection-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--axing-space-sm);
}

.info-card-head > :first-child,
.info-subsection-head > :first-child {
	min-width: 0;
}

.info-status,
.info-row-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 1.75rem;
	padding: 0.125rem 0.625rem;
	border: 1px solid var(--axing-border);
	border-radius: 999px;
	background: var(--axing-surface);
	color: var(--axing-muted);
	font-size: var(--axing-font-size-table-head);
	font-weight: 700;
	white-space: nowrap;
}

.info-status[data-active="true"] {
	border-color: color-mix(in srgb, var(--axing-green) 18%, var(--axing-border));
	background: var(--axing-green-soft);
	color: var(--axing-accent-soft-text);
}

.info-subsection {
	display: grid;
	gap: var(--axing-space-xs);
}

.metric-list-compact {
	grid-template-columns: minmax(5rem, 6.25rem) minmax(0, 1fr);
	column-gap: var(--axing-space-sm);
}

.metric-list-compact dt,
.metric-list-compact dd {
	padding-top: 0.125rem;
	padding-bottom: 0.125rem;
	font-size: 0.9375rem;
}

.metric-list-compact dt {
	padding-right: 0;
}

.metric-list-compact dd {
	padding-left: 0;
}

.placeholder-panel {
	max-width: 44rem;
}

.action-copy {
	margin: 0;
	font-size: 1rem;
}

.action-panel .form-actions-row {
	justify-items: start;
}

/* ==========================================================================
   Upload View
   ========================================================================== */

.sr-only,
.vap-card-service-toggle .form-label,
.radio-band-service-toggle .form-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.upload-field .form-input {
	min-height: auto;
	padding: 0;
}

.upload-config-form {
	gap: var(--axing-space-md);
}

.upload-head {
	display: grid;
	gap: var(--axing-space-sm);
}

.upload-summary {
	display: grid;
	gap: var(--axing-space-xs);
}

.upload-rules {
	display: grid;
	gap: 0.25rem;
	min-width: 0;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--axing-border);
	border-radius: var(--axing-radius-sm);
	background: color-mix(in srgb, var(--axing-surface-alt) 72%, white);
}

.upload-rule {
	color: var(--axing-muted);
	font-size: 0.875rem;
	line-height: 1.35;
}

.upload-body {
	display: grid;
	gap: var(--axing-space-sm);
}

.upload-version {
	margin: 0.375rem 0 0 0;
	color: var(--axing-ink);
	font-size: 1.0625rem;
	line-height: 1.35;
}

.upload-version strong {
	font-size: inherit;
	font-weight: 700;
	color: inherit;
}

.upload-status {
	margin-top: calc(var(--axing-space-xs) * -1);
}

.upload-progress {
	display: grid;
	gap: var(--axing-space-2xs);
	padding: var(--axing-space-sm);
	border: 1px dashed var(--axing-border);
	border-radius: var(--axing-radius-sm);
	background: var(--axing-surface);
}

.upload-actions {
	margin-top: var(--axing-space-xs);
}

/* ==========================================================================
   VAP Views
   ========================================================================== */

.vap-card {
	height: 100%;
	align-content: start;
}

.vap-config-form {
	gap: var(--axing-space-md);
}

.vap-config-form .section-block {
	gap: var(--axing-space-sm);
}

.vap-summary-head,
.vap-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--axing-space-sm);
	flex-wrap: wrap;
}

.vap-grid {
	gap: var(--axing-space-lg);
}

.vap-card .form-field {
	grid-template-columns: 1fr;
	gap: 0.375rem;
}

.vap-card .form-label {
	display: flex;
	align-items: center;
	min-height: 0;
}

.vap-card .vap-details {
	display: grid;
	gap: var(--axing-space-sm);
}

.vap-main-row {
	display: grid;
	gap: var(--axing-space-sm);
}

.vap-card .vap-security-row {
	grid-template-columns: 1fr;
}

.vap-card-service-toggle {
	min-width: min(100%, 12.5rem);
}

.vap-card-service-toggle .form-toggle {
	min-width: 11rem;
}

.vap-card-service-toggle .form-toggle-option {
	min-height: 2.125rem;
	padding: 0.375rem 0.75rem;
}

/* ==========================================================================
   VLAN View
   ========================================================================== */

.vlan-config-form {
	gap: var(--axing-space-md);
}

.vlan-config-form .section-block {
	gap: var(--axing-space-sm);
}

.vlan-toolbar-row {
	display: grid;
	gap: var(--axing-space-md);
	align-items: start;
	justify-items: start;
}

.vlan-toolbar-control {
	width: min(100%, 14rem);
}

.vlan-enable-toggle .form-label {
	margin-bottom: 0.375rem;
}

.vlan-table-body {
	display: grid;
	gap: 0;
}

.vlan-table-head,
.vlan-port-row {
	display: grid;
	gap: var(--axing-space-sm);
}

.vlan-table-head {
	display: none;
}

.vlan-port-row {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 0.625rem 0;
	border-top: 1px solid color-mix(in srgb, var(--axing-border) 74%, white);
}

.vlan-port-row:first-child {
	border-top: 0;
}

.vlan-port-name {
	grid-column: 1 / -1;
	font-weight: 700;
}

.vlan-port-field {
	display: grid;
	gap: 0.25rem;
	min-width: 0;
}

.vlan-port-label {
	color: var(--axing-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--axing-letter-spacing-table);
	text-transform: uppercase;
}

.vlan-port-field:has(.form-input:invalid) .vlan-port-label {
	color: var(--axing-danger);
}

.vlan-port-field .form-input:invalid {
	border-color: var(--axing-danger);
	background: color-mix(in srgb, var(--axing-danger-soft) 60%, white);
}

/* ==========================================================================
   Radio View
   ========================================================================== */

.radio-band-grid {
	display: grid;
	gap: var(--axing-space-lg);
}

.radio-config-form {
	gap: var(--axing-space-md);
}

.radio-config-form .section-block {
	gap: var(--axing-space-sm);
}

.radio-general-head,
.radio-band-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--axing-space-sm);
	flex-wrap: wrap;
}

.radio-general-grid,
.radio-band-fields {
	display: grid;
	gap: var(--axing-space-sm);
}

.radio-general-grid .form-field-toggle,
.radio-band-fields .form-field-toggle {
	min-width: 0;
}

.radio-general-grid .form-field-toggle .form-label,
.radio-band-fields .form-field-toggle .form-label {
	margin-bottom: 0.375rem;
}

.radio-band-service-toggle {
	min-width: min(100%, 12.5rem);
}

.radio-band-service-toggle .form-toggle {
	min-width: 11rem;
}

.radio-band-service-toggle .form-toggle-option {
	min-height: 2.125rem;
	padding: 0.375rem 0.75rem;
}

.radio-band-card .form-grid {
	grid-template-columns: 1fr;
}

.user-config-form {
	gap: var(--axing-space-md);
}

.user-form-grid {
	grid-template-columns: 1fr;
}

.user-card .form-actions-row {
	margin-top: var(--axing-space-sm);
	justify-items: start;
}

/* ==========================================================================
   Shared Form Components
   ========================================================================== */

.form-field {
	display: grid;
	gap: var(--axing-space-xs);
	align-content: start;
}

.form-field-toggle {
	margin: 0;
	padding: 0;
	border: 0;
}

.form-field-toggle .form-label {
	margin: 0 0 var(--axing-space-xs);
	padding: 0;
}

.form-label {
	color: var(--axing-muted);
}

.form-check {
	display: inline-flex;
	align-items: center;
	gap: var(--axing-space-xs);
	color: var(--axing-ink);
	font-weight: 600;
}

.form-check input[type="checkbox"] {
	appearance: none;
	width: 1.375rem;
	height: 1.375rem;
	margin: 0;
	border: 1px solid var(--axing-border);
	border-radius: 0.3125rem;
	background: var(--axing-surface);
	box-shadow: var(--axing-shadow-xs);
	cursor: pointer;
	position: relative;
	transition:
		border-color var(--axing-transition-fast),
		background-color var(--axing-transition-fast),
		box-shadow var(--axing-transition-fast),
		transform var(--axing-transition-fast);
}

.form-check input[type="checkbox"]:hover {
	border-color: var(--axing-border-strong);
}

.form-check input[type="checkbox"]:focus-visible {
	border-color: var(--axing-green);
	box-shadow: var(--axing-ring);
	outline: 0;
}

.form-check input[type="checkbox"]:checked {
	border-color: var(--axing-green);
	background: var(--axing-green);
}

.form-check input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0.4rem;
	height: 0.78rem;
	border: solid #fff;
	border-width: 0 0.16rem 0.16rem 0;
	transform: translate(-50%, -58%) rotate(45deg);
}

.form-toggle {
	position: relative;
	display: inline-grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	border: 1px solid var(--axing-border);
	border-radius: var(--axing-control-radius);
	background: var(--axing-surface);
	overflow: hidden;
}

.form-toggle::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 50%;
	background: var(--axing-green-soft);
	border-radius: calc(var(--axing-control-radius) - 1px) 0 0 calc(var(--axing-control-radius) - 1px);
	transition:
		transform var(--axing-transition-medium),
		background-color var(--axing-transition-fast),
		border-radius var(--axing-transition-medium);
}

.form-toggle:has(.form-toggle-option:nth-child(2) input:checked)::before {
	transform: translateX(100%);
	border-radius: 0 calc(var(--axing-control-radius) - 1px) calc(var(--axing-control-radius) - 1px) 0;
}

.form-toggle-option {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--axing-control-height);
	padding: 0.5rem 0.75rem;
	border-radius: 0;
	color: var(--axing-muted);
	background: transparent;
	cursor: pointer;
	font-weight: 600;
	z-index: 1;
	transition:
		background-color var(--axing-transition-fast),
		color var(--axing-transition-fast),
		box-shadow var(--axing-transition-fast),
		transform var(--axing-transition-fast);
}

.form-toggle-option:not(:has(input:checked)) {
	color: var(--axing-muted);
}

.form-toggle-option + .form-toggle-option {
	border-left: 1px solid var(--axing-border);
}

.form-toggle-option:not(:has(input:checked)):hover {
	background: color-mix(in srgb, var(--axing-green-soft) 35%, transparent);
}

.form-toggle:hover,
.form-toggle:focus-within {
	border-color: var(--axing-border-strong);
}

.form-toggle-option input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.form-toggle-option:has(input:checked) {
	color: var(--axing-accent-soft-text);
}

.form-toggle-option:has(input:focus-visible) {
	box-shadow: var(--axing-ring);
}

.form-toggle-option span {
	position: relative;
	z-index: 1;
	opacity: 0.72;
	transition:
		transform var(--axing-transition-medium),
		opacity var(--axing-transition-fast);
}

.form-toggle-option:not(:has(input:checked)):hover span {
	opacity: 0.9;
}

.form-toggle-option:has(input:checked) span {
	transform: translateX(0);
	opacity: 1;
}

.form-input {
	width: 100%;
	background-color: var(--axing-surface);
	color: var(--axing-ink);
	transition:
		border-color var(--axing-transition-fast),
		box-shadow var(--axing-transition-fast),
		background-color var(--axing-transition-fast);
}

.form-input:hover {
	border-color: var(--axing-border-strong);
}

.form-input:focus {
	border-color: var(--axing-green);
	box-shadow: var(--axing-ring);
	outline: 0;
}

/*
  Readonly fields should look intentionally inactive across both the login and
  main application views.
*/
.form-input[readonly] {
	border-color: var(--axing-border);
	background: var(--axing-surface-alt);
	box-shadow: none;
	color: var(--axing-muted);
}

.form-input[readonly]:hover,
.form-input[readonly]:focus {
	border-color: var(--axing-border);
	background: var(--axing-surface-alt);
	box-shadow: none;
	outline: 0;
}

.radio-band-fields[aria-disabled="true"] {
	opacity: 0.55;
}

.radio-band-fields[aria-disabled="true"] .form-input {
	background: var(--axing-surface-alt);
	color: var(--axing-muted);
	cursor: not-allowed;
}

.form-actions {
	padding-top: var(--axing-space-sm);
	background: transparent;
	border-style: dashed;
	box-shadow: none;
}

/*
  Form action rows intentionally stay simple. Individual views should add as few
  extra overrides as possible and rely on this shared alignment.
*/
.form-actions-row {
	display: grid;
	gap: var(--axing-space-sm);
}

.pill-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--axing-space-xs);
}

.pill {
	display: inline-flex;
	align-items: center;
	min-height: var(--axing-pill-height);
	padding: var(--axing-pill-padding);
	border: 1px solid var(--axing-border);
	border-radius: 999px;
	background: var(--axing-surface);
	color: var(--axing-muted);
	font-size: var(--axing-font-size-label);
}

.metric-list {
	display: grid;
	grid-template-columns: var(--axing-metric-label-width) minmax(0, 1fr);
	gap: 0;
	margin: 0;
}

.metric-list dt {
	display: flex;
	align-items: center;
	padding: var(--axing-space-2xs) var(--axing-space-sm) var(--axing-space-2xs) 0;
	background: transparent;
	color: var(--axing-muted);
	font-size: 1rem;
}

.metric-list dd {
	display: flex;
	align-items: center;
	margin: 0;
	padding: var(--axing-space-2xs) 0 var(--axing-space-2xs) var(--axing-space-sm);
	min-height: 0;
	background: transparent;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
	word-break: break-word;
}

.client-list {
	display: grid;
	gap: var(--axing-space-sm);
	margin: 0.375rem 0 0 0;
	padding: 0;
	list-style: none;
}

.client-list li {
	padding: var(--axing-space-sm);
	background: var(--axing-surface);
	border: 1px solid var(--axing-border);
	border-radius: var(--axing-radius-sm);
}

.radio-vap-table {
	display: grid;
	gap: 0;
	margin-top: var(--axing-space-xs);
}

.radio-vap-table-head,
.radio-vap-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--axing-space-sm);
	align-items: center;
}

.radio-vap-table-head {
	padding: var(--axing-space-2xs) 0;
	color: var(--axing-muted);
	font-size: 1rem;
}

.radio-vap-table-body {
	display: grid;
	gap: 0;
}

.radio-vap-row {
	padding: var(--axing-space-2xs) 0;
}

.info-radio-card .radio-vap-table {
	margin-top: 0;
}

.info-radio-card .radio-vap-table-head {
	padding-top: 0;
	padding-bottom: 0.125rem;
	font-size: 0.875rem;
}

.info-radio-card .radio-vap-row {
	padding: 0.375rem 0;
	border-top: 1px solid color-mix(in srgb, var(--axing-border) 74%, white);
}

.info-radio-card .radio-vap-row:first-child {
	border-top: 0;
}

.info-radio-card .vap-rate {
	text-align: right;
}

.info-clients-table,
.info-clients-body {
	display: grid;
	gap: 0;
}

.info-clients-head,
.info-client-row {
	display: grid;
	gap: var(--axing-space-sm);
}

.info-clients-head {
	display: none;
}

.info-client-row {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding: 0.5rem 0;
	border-top: 1px solid color-mix(in srgb, var(--axing-border) 74%, white);
}

.info-client-row:first-child {
	border-top: 0;
}

.info-client-row .client-mac {
	grid-column: 1 / -1;
}

.info-client-cell {
	display: grid;
	gap: 0.125rem;
	min-width: 0;
	font-weight: 600;
	font-size: 0.9375rem;
}

.info-client-cell::before {
	content: attr(data-label);
	color: var(--axing-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--axing-letter-spacing-table);
	text-transform: uppercase;
}

.vap-name,
.client-mac {
	display: block;
	font-weight: 600;
}

.vap-rate,
.client-meta {
	display: block;
	color: var(--axing-muted);
	font-size: 1rem;
}

/* ==========================================================================
   Responsive Layout
   Group breakpoints so desktop/tablet changes are easier to audit.
   ========================================================================== */

@media (min-width: 768px) {
	.login-panel {
		padding: 2rem;
	}

	.app-menu-toggle {
		display: none;
	}

	.app-shell[data-nav-open="false"] .app-menu {
		display: grid;
	}

	.app-shell {
		grid-template-areas: "nav main";
		grid-template-columns: var(--axing-nav-width) minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr);
		align-items: stretch;
		max-width: calc(var(--axing-content-width) + var(--axing-nav-width) + var(--axing-space-md));
		margin: 0 auto;
		padding: var(--axing-space-md);
		gap: var(--axing-space-md);
	}

	.app-nav {
		align-self: stretch;
		position: sticky;
		top: var(--axing-space-md);
	}

	.view-head-row {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
	}

	.view-actions {
		grid-template-columns: repeat(2, auto);
		align-items: center;
	}

	.form-actions-row {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
	}

	.info-clients-head,
	.info-client-row {
		grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 0.8fr));
		align-items: center;
	}

	.info-clients-head {
		display: grid;
		padding-bottom: 0.25rem;
		border-bottom: 1px solid color-mix(in srgb, var(--axing-border) 74%, white);
		color: var(--axing-muted);
		font-size: var(--axing-font-size-table-head);
		font-weight: 700;
		letter-spacing: var(--axing-letter-spacing-table);
		text-transform: uppercase;
	}

	.info-client-row .client-mac {
		grid-column: auto;
	}

	.info-client-cell::before {
		content: none;
	}

	.radio-general-grid,
	.radio-band-fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.vap-main-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

@media (min-width: 992px) {
	.vlan-table-head,
	.vlan-port-row {
		grid-template-columns:
			minmax(0, 1.1fr)
			minmax(5rem, 0.8fr)
			minmax(6rem, 0.8fr)
			minmax(8rem, 1fr)
			minmax(8rem, 1fr);
		align-items: center;
	}

	.vlan-table-head {
		display: grid;
		padding-bottom: 0.25rem;
		border-bottom: 1px solid color-mix(in srgb, var(--axing-border) 74%, white);
		color: var(--axing-muted);
		font-size: var(--axing-font-size-table-head);
		font-weight: 700;
		letter-spacing: var(--axing-letter-spacing-table);
		text-transform: uppercase;
	}

	.vlan-port-name {
		grid-column: auto;
	}

	.vlan-port-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.info-radio-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.section-grid,
	.radio-grid,
	.form-grid,
	.port-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vap-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.radio-band-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.app-nav,
	.app-main {
		height: min(100%, 800px);
		overflow: auto;
	}

	.info-layout {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
		align-items: stretch;
	}

	.info-overview-card {
		grid-column: 1;
	}

	.info-radio-grid {
		grid-column: 2 / 4;
		align-items: stretch;
	}

	.info-clients-panel {
		grid-column: 1 / -1;
	}

	.info-radio-grid .info-radio-card {
		height: 100%;
	}
}