/**
 * Shared component styles (Figma "Components" page). Values come only from
 * tokens.css; layout uses logical properties so right-to-left works unchanged.
 */
@import "../tokens/tokens.css";

/* ---------- Root ---------- */

.ako-ml {
	--ako-checkbox-size: 18px;
	--ako-control-height: 36px;
	--ako-control-height-small: 28px;
	--ako-panel-width: 400px;

	color: var(--ako-admin-text-primary);
	font: var(--ako-text-body);
	letter-spacing: var(--ako-text-body-tracking);
	-webkit-font-smoothing: antialiased;
}

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

.ako-ml :where(h1, h2, p) {
	margin: 0;
	padding: 0;
	color: inherit;
}

.ako-ml :where(a) {
	color: inherit;
}

.ako-ml :focus {
	box-shadow: none;
	outline: none;
}

.ako-ml :focus-visible {
	outline: var(--ako-admin-border-width-strong) solid var(--ako-admin-border-accent);
	outline-offset: var(--ako-admin-space-3xs);
}

.ako-ml [hidden] {
	display: none !important;
}

.ako-overline {
	color: var(--ako-admin-text-tertiary);
	font: var(--ako-text-overline);
	letter-spacing: var(--ako-text-overline-tracking);
	text-transform: uppercase;
}

/* ---------- Button ---------- */

.ako-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ako-admin-space-xs);
	min-block-size: var(--ako-control-height);
	margin: 0;
	padding: var(--ako-admin-space-sm) var(--ako-admin-space-lg);
	border: var(--ako-admin-border-width) solid transparent;
	border-radius: var(--ako-admin-radius-control);
	background: transparent;
	color: var(--ako-admin-text-primary);
	font: var(--ako-text-body-strong);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.ako-button.is-small {
	min-block-size: var(--ako-control-height-small);
	padding: var(--ako-admin-space-2xs) var(--ako-admin-space-md);
}

.ako-button.is-icon-only {
	inline-size: var(--ako-control-height);
	padding: 0;
}

.ako-button.is-icon-only.is-small {
	inline-size: var(--ako-control-height-small);
}

.ako-button.is-primary {
	background: var(--ako-admin-bg-accent);
	color: var(--ako-admin-text-on-accent);
}

.ako-button.is-primary:hover {
	background: var(--ako-admin-bg-accent-hover);
	color: var(--ako-admin-text-on-accent);
}

.ako-button.is-secondary {
	background: var(--ako-admin-bg-surface);
	border-color: var(--ako-admin-border-default);
}

.ako-button.is-secondary:hover,
.ako-button.is-ghost:hover {
	background: var(--ako-admin-bg-subtle);
	color: var(--ako-admin-text-primary);
}

.ako-button.is-danger {
	background: var(--ako-admin-icon-danger);
	color: var(--ako-admin-text-on-accent);
}

.ako-button.is-danger:hover {
	background: var(--ako-admin-text-danger);
	color: var(--ako-admin-text-on-accent);
}

.ako-button:disabled,
.ako-button:disabled:hover {
	background: var(--ako-admin-bg-subtle);
	border-color: transparent;
	color: var(--ako-admin-text-tertiary);
	cursor: not-allowed;
}

.ako-button.is-secondary:disabled {
	border-color: var(--ako-admin-border-subtle);
}

.ako-button.is-ghost:disabled {
	background: transparent;
}

/* ---------- Badge ---------- */

.ako-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ako-admin-space-xs);
	padding: var(--ako-admin-space-3xs) var(--ako-admin-space-sm);
	border-radius: var(--ako-admin-radius-pill);
	font: var(--ako-text-label);
	white-space: nowrap;
}

.ako-badge__dot {
	inline-size: var(--ako-admin-space-xs);
	block-size: var(--ako-admin-space-xs);
	border-radius: var(--ako-admin-radius-pill);
	background: currentcolor;
}

.ako-badge.is-linked {
	background: var(--ako-admin-bg-success-subtle);
	color: var(--ako-admin-text-success);
}

.ako-badge.is-missing {
	background: var(--ako-admin-bg-warning-subtle);
	color: var(--ako-admin-text-warning);
}

.ako-badge.is-draft {
	background: var(--ako-admin-bg-subtle);
	color: var(--ako-admin-text-secondary);
}

.ako-badge.is-info {
	background: var(--ako-admin-bg-info-subtle);
	color: var(--ako-admin-text-info);
}

.ako-badge.is-error {
	background: var(--ako-admin-bg-danger-subtle);
	color: var(--ako-admin-text-danger);
}

.ako-badge.is-pro {
	background: var(--ako-admin-bg-brand);
	color: var(--ako-admin-text-on-accent);
}

/* ---------- Language tag ---------- */

.ako-language-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--ako-admin-space-sm);
	min-inline-size: 0;
}

.ako-language-tag__code {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 22px;
	block-size: 22px;
	border-radius: var(--ako-admin-radius-tile);
	background: var(--ako-admin-bg-brand-subtle);
	color: var(--ako-admin-text-brand);
	font: var(--ako-text-overline);
}

.ako-language-tag__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ako-language-tag.is-large {
	gap: var(--ako-admin-space-md);
}

.ako-language-tag.is-large .ako-language-tag__code {
	inline-size: 32px;
	block-size: 32px;
	border-radius: var(--ako-admin-radius-control);
	font: var(--ako-text-label);
	font-weight: var(--ako-font-weight-600);
}

.ako-language-tag.is-large .ako-language-tag__name {
	font: var(--ako-text-body-strong);
}

/* ---------- Tabs ---------- */

.ako-tabs {
	display: inline-flex;
	gap: var(--ako-admin-space-3xs);
	padding: var(--ako-admin-space-2xs);
	border-radius: var(--ako-admin-radius-control);
	background: var(--ako-admin-bg-subtle);
}

.ako-tab {
	display: inline-flex;
	align-items: center;
	gap: var(--ako-admin-space-xs);
	margin: 0;
	padding: var(--ako-admin-space-xs) var(--ako-admin-space-md);
	border: var(--ako-admin-border-width) solid transparent;
	border-radius: var(--ako-admin-radius-control);
	background: transparent;
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-body);
	cursor: pointer;
}

.ako-tab:hover {
	color: var(--ako-admin-text-primary);
}

.ako-tab.is-active {
	background: var(--ako-admin-bg-surface);
	border-color: var(--ako-admin-border-subtle);
	color: var(--ako-admin-text-primary);
	font: var(--ako-text-body-strong);
}

.ako-tab__count {
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-label);
}

.ako-tab.is-active .ako-tab__count {
	padding: 0 var(--ako-admin-space-xs);
	border-radius: var(--ako-admin-radius-pill);
	background: var(--ako-admin-bg-subtle);
}

/* ---------- Input ---------- */

.ako-input {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--ako-admin-space-sm);
	inline-size: 100%;
	min-block-size: var(--ako-control-height);
	padding: 0 var(--ako-admin-space-md);
	border: var(--ako-admin-border-width) solid var(--ako-admin-border-default);
	border-radius: var(--ako-admin-radius-control);
	background: var(--ako-admin-bg-surface);
	color: var(--ako-admin-text-primary);
}

.ako-input .ako-icon {
	flex: none;
	color: var(--ako-admin-text-tertiary);
}

.ako-ml .ako-input input,
.ako-ml .ako-input select {
	flex: 1;
	min-inline-size: 0;
	min-block-size: calc(var(--ako-control-height) - 2 * var(--ako-admin-border-width));
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: var(--ako-text-body);
	line-height: inherit;
	appearance: none;
}

.ako-ml .ako-input input::placeholder {
	color: var(--ako-admin-text-tertiary);
}

.ako-ml .ako-input input:focus,
.ako-ml .ako-input select:focus {
	box-shadow: none;
	outline: none;
}

.ako-ml .ako-input input[type="search"]::-webkit-search-cancel-button {
	appearance: none;
}

.ako-ml .ako-input.is-select select {
	padding-inline-end: var(--ako-admin-space-2xl);
	cursor: pointer;
}

.ako-input.is-select > .ako-icon {
	position: absolute;
	inset-inline-end: var(--ako-admin-space-md);
	pointer-events: none;
}

.ako-input:focus-within {
	border-color: var(--ako-admin-border-accent);
	box-shadow: 0 0 0 var(--ako-admin-border-width) var(--ako-admin-border-accent);
}

.ako-input.is-invalid {
	border-color: var(--ako-admin-border-danger);
	box-shadow: 0 0 0 var(--ako-admin-border-width) var(--ako-admin-border-danger);
}

.ako-input.is-disabled {
	border-color: var(--ako-admin-border-subtle);
	background: var(--ako-admin-bg-subtle);
	color: var(--ako-admin-text-tertiary);
}

/* Select-styled menu trigger (content type). */
button.ako-input.is-trigger {
	justify-content: space-between;
	inline-size: auto;
	min-inline-size: 180px;
	margin: 0;
	font: var(--ako-text-body);
	text-align: start;
	cursor: pointer;
}

button.ako-input.is-trigger > .ako-icon {
	position: static;
}

button.ako-input.is-trigger[aria-expanded="true"] {
	border-color: var(--ako-admin-border-accent);
	box-shadow: 0 0 0 var(--ako-admin-border-width) var(--ako-admin-border-accent);
}

/* ---------- Field ---------- */

.ako-field {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-xs);
}

.ako-field__label {
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-label);
}

.ako-field__help {
	display: flex;
	align-items: flex-start;
	gap: var(--ako-admin-space-2xs);
	color: var(--ako-admin-text-tertiary);
	font: var(--ako-text-help);
}

.ako-field.is-error .ako-field__help {
	color: var(--ako-admin-text-danger);
}

.ako-field__help .ako-icon {
	flex: none;
	margin-block-start: var(--ako-admin-space-3xs);
	color: var(--ako-admin-icon-danger);
}

/* ---------- Checkbox ---------- */

.ako-checkbox {
	position: relative;
	display: inline-flex;
	inline-size: var(--ako-checkbox-size);
	block-size: var(--ako-checkbox-size);
}

.ako-ml .ako-checkbox input {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ako-checkbox__box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	border: var(--ako-admin-border-width-strong) solid var(--ako-admin-border-default);
	border-radius: var(--ako-admin-radius-tile);
	background: var(--ako-admin-bg-surface);
	color: var(--ako-admin-text-on-accent);
	pointer-events: none;
}

.ako-checkbox__box .ako-icon {
	visibility: hidden;
	stroke-width: 2.5;
}

.ako-checkbox:hover .ako-checkbox__box {
	border-color: var(--ako-admin-border-accent);
}

.ako-checkbox input:checked + .ako-checkbox__box,
.ako-checkbox input:indeterminate + .ako-checkbox__box {
	border-color: transparent;
	background: var(--ako-admin-bg-accent);
}

.ako-checkbox:hover input:checked + .ako-checkbox__box,
.ako-checkbox:hover input:indeterminate + .ako-checkbox__box {
	background: var(--ako-admin-bg-accent-hover);
}

.ako-checkbox input:checked + .ako-checkbox__box .ako-icon,
.ako-checkbox input:indeterminate + .ako-checkbox__box .ako-icon {
	visibility: visible;
}

.ako-checkbox input:focus-visible + .ako-checkbox__box {
	outline: var(--ako-admin-border-width-strong) solid var(--ako-admin-border-accent);
	outline-offset: var(--ako-admin-space-3xs);
}

.ako-checkbox input:disabled + .ako-checkbox__box {
	border-color: var(--ako-admin-border-default);
	background: var(--ako-admin-bg-canvas);
}

/* ---------- Toggle ---------- */

.ako-toggle {
	display: inline-flex;
	flex: none;
	align-items: center;
	inline-size: 36px;
	block-size: 20px;
	margin: 0;
	padding: 0 var(--ako-admin-space-3xs);
	border: 0;
	border-radius: var(--ako-admin-radius-pill);
	background: var(--ako-admin-border-default);
	cursor: pointer;
	transition: background-color 120ms ease;
}

.ako-toggle__knob {
	inline-size: 16px;
	block-size: 16px;
	border-radius: var(--ako-admin-radius-pill);
	background: var(--ako-admin-bg-surface);
	transition: transform 120ms ease;
}

.ako-toggle[aria-checked="true"] {
	background: var(--ako-admin-bg-accent);
}

.ako-toggle[aria-checked="true"] .ako-toggle__knob {
	transform: translateX(16px);
}

[dir="rtl"] .ako-toggle[aria-checked="true"] .ako-toggle__knob {
	transform: translateX(-16px);
}

.ako-toggle:disabled {
	background: var(--ako-admin-bg-subtle);
	cursor: not-allowed;
}

.ako-toggle[aria-checked="true"]:disabled {
	background: var(--ako-admin-bg-brand-subtle);
}

/* ---------- Menu ---------- */

.ako-menu-wrap {
	position: relative;
	display: inline-flex;
}

.ako-menu {
	z-index: 50;
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-3xs);
	min-inline-size: 260px;
	margin: 0;
	padding: var(--ako-admin-space-2xs);
	border: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
	border-radius: var(--ako-admin-radius-surface);
	background: var(--ako-admin-bg-surface);
	box-shadow: var(--ako-shadow-menu);
	list-style: none;
}

.ako-menu.is-static {
	position: static;
	min-inline-size: 0;
}

.ako-menu.is-rich {
	inline-size: 300px;
}

.ako-menu__item {
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-sm);
	margin: 0;
	padding: var(--ako-admin-space-sm) var(--ako-admin-space-md);
	border-radius: var(--ako-admin-radius-control);
	color: var(--ako-admin-text-primary);
	cursor: pointer;
}

.ako-menu__item:hover,
.ako-menu__item:focus,
.ako-menu__item.is-active {
	background: var(--ako-admin-bg-subtle);
	outline: none;
}

.ako-menu__item:focus-visible {
	box-shadow: inset 0 0 0 var(--ako-admin-border-width-strong) var(--ako-admin-border-accent);
}

.ako-menu__item.is-selected .ako-menu__label {
	font: var(--ako-text-body-strong);
}

.ako-menu__item.is-disabled {
	color: var(--ako-admin-text-tertiary);
	cursor: default;
}

.ako-menu__label {
	flex: 1 0 auto;
	max-inline-size: 100%;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ako-menu__end {
	flex: none;
	color: var(--ako-admin-text-tertiary);
	font: var(--ako-text-help);
}

.ako-menu__meta {
	flex: 0 1 auto;
	min-inline-size: 0;
	overflow: hidden;
	color: var(--ako-admin-text-tertiary);
	font: var(--ako-text-help);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ako-menu__end {
	display: inline-flex;
	align-items: center;
	gap: var(--ako-admin-space-2xs);
}

.ako-menu__item[aria-disabled="true"] .ako-menu__end {
	color: var(--ako-admin-text-success);
}

.ako-menu__empty {
	padding: var(--ako-admin-space-sm) var(--ako-admin-space-md);
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-help);
}

.ako-menu.is-rich .ako-menu__item {
	align-items: flex-start;
	gap: var(--ako-admin-space-md);
	padding: var(--ako-admin-space-md);
}

.ako-menu__tile {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	border-radius: var(--ako-admin-radius-control);
	background: var(--ako-admin-bg-accent-subtle);
	color: var(--ako-admin-text-accent);
}

.ako-menu__copy {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-3xs);
}

.ako-menu.is-rich .ako-menu__label {
	font: var(--ako-text-body-strong);
	white-space: normal;
}

.ako-menu__description {
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-help);
}

/* ---------- Dialog ---------- */

.ako-dialog-backdrop {
	position: fixed;
	z-index: 100000;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ako-admin-space-lg);
	background: color-mix(in srgb, var(--ako-admin-bg-overlay) 40%, transparent);
}

.ako-dialog {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-lg);
	inline-size: min(440px, 100%);
	padding: var(--ako-admin-space-2xl);
	border-radius: var(--ako-admin-radius-surface);
	background: var(--ako-admin-bg-surface);
	box-shadow: var(--ako-shadow-floating);
}

.ako-dialog__head {
	display: flex;
	gap: var(--ako-admin-space-md);
}

.ako-dialog__tile {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: var(--ako-admin-radius-control);
	background: var(--ako-admin-bg-info-subtle);
	color: var(--ako-admin-icon-info);
}

.ako-dialog.is-danger .ako-dialog__tile {
	background: var(--ako-admin-bg-danger-subtle);
	color: var(--ako-admin-icon-danger);
}

.ako-dialog__copy {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-xs);
}

.ako-dialog__title {
	font: var(--ako-text-section-title);
	letter-spacing: var(--ako-text-section-title-tracking);
}

.ako-dialog__description {
	color: var(--ako-admin-text-secondary);
}

.ako-dialog__actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--ako-admin-space-sm);
}

/* ---------- Toast ---------- */

.ako-toast-region {
	position: fixed;
	z-index: 100001;
	inset-block-end: var(--ako-admin-space-2xl);
	inset-inline-end: var(--ako-admin-space-2xl);
}

.ako-toast {
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-sm);
	max-inline-size: 480px;
	padding: var(--ako-admin-space-md) var(--ako-admin-space-lg);
	border: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
	border-radius: var(--ako-admin-radius-control);
	background: var(--ako-admin-bg-surface);
	box-shadow: var(--ako-shadow-menu);
}

.ako-toast > .ako-icon {
	flex: none;
}

.ako-toast.is-success > .ako-icon {
	color: var(--ako-admin-icon-success);
}

.ako-toast.is-error > .ako-icon {
	color: var(--ako-admin-icon-danger);
}

.ako-toast.is-info > .ako-icon {
	color: var(--ako-admin-icon-info);
}

.ako-toast__message {
	font: var(--ako-text-body-strong);
}

.ako-toast__action,
.ako-toast__close,
.ako-bulkbar__clear,
.ako-link {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: var(--ako-text-body-strong);
}

.ako-toast__action {
	color: var(--ako-admin-text-accent);
	text-decoration: underline;
}

.ako-toast__close {
	display: inline-flex;
	color: var(--ako-admin-text-tertiary);
}

.ako-link {
	color: var(--ako-admin-text-accent);
	font: var(--ako-text-label);
}

.ako-link:hover {
	text-decoration: underline;
}

/* ---------- Empty state & skeleton ---------- */

.ako-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ako-admin-space-md);
	padding: var(--ako-admin-space-4xl);
	border-radius: var(--ako-admin-radius-surface);
	background: var(--ako-admin-bg-canvas);
	text-align: center;
}

.ako-empty__tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 56px;
	block-size: 56px;
	border: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
	border-radius: var(--ako-admin-radius-surface);
	background: var(--ako-admin-bg-surface);
}

.ako-empty__title {
	font: var(--ako-text-section-title);
	letter-spacing: var(--ako-text-section-title-tracking);
}

.ako-empty__description {
	max-inline-size: 440px;
	color: var(--ako-admin-text-secondary);
}

.ako-empty__actions {
	display: flex;
	gap: var(--ako-admin-space-sm);
}

.ako-skeleton {
	display: block;
	block-size: var(--ako-admin-space-md);
	border-radius: var(--ako-admin-radius-tile);
	background: var(--ako-admin-bg-subtle);
}

.ako-skeleton.is-box {
	inline-size: var(--ako-checkbox-size);
	block-size: var(--ako-checkbox-size);
}

.ako-skeleton.is-title {
	inline-size: 180px;
}

.ako-skeleton.is-slug {
	inline-size: 110px;
	block-size: var(--ako-admin-space-sm);
}

.ako-skeleton.is-cell {
	inline-size: 80%;
}

.ako-skeleton.is-date {
	inline-size: 72px;
}

@media (prefers-reduced-motion: no-preference) {

	.ako-skeleton {
		animation: ako-pulse 1.4s ease-in-out infinite;
	}
}

@keyframes ako-pulse {

	50% {
		opacity: 0.55;
	}
}

/* ---------- Progress ---------- */

.ako-progress {
	overflow: hidden;
	block-size: var(--ako-admin-space-xs);
	border-radius: var(--ako-admin-radius-pill);
	background: var(--ako-admin-bg-subtle);
}

.ako-progress__value {
	display: block;
	block-size: 100%;
	border-radius: var(--ako-admin-radius-tile);
	background: var(--ako-admin-bg-accent);
}