/* App chrome oat does not cover: bottom list panel, typeahead, charts. */
:root {
	--sheet-footer-gap: 0.25rem;
	--sidebar-width: 15rem;
	--list-sheet-mid: 33dvh;
	--list-sheet-full: 85dvh;
}

/* ponytail: oat tokens use light-dark() on :root — toggling color-scheme alone does not
   recompute them in all engines; explicit values on data-theme make the switch work. */
html[data-theme="light"] {
	color-scheme: light;
	--background: #fff;
	--foreground: #09090b;
	--card: #fff;
	--card-foreground: #09090b;
	--primary: #574747;
	--primary-foreground: #fafafa;
	--secondary: #f4f4f5;
	--secondary-foreground: #574747;
	--muted: #f4f4f5;
	--muted-foreground: #71717a;
	--faint: #fafafa;
	--faint-foreground: #a1a1aa;
	--accent: #f4f4f5;
	--danger: #d32f2f;
	--danger-foreground: #fafafa;
	--success: #008032;
	--success-foreground: #fafafa;
	--warning: #a65b00;
	--warning-foreground: #09090b;
	--border: #d4d4d8;
	--input: #d4d4d8;
	--ring: #574747;
}

html[data-theme="dark"] {
	color-scheme: dark;
	--background: #09090b;
	--foreground: #fafafa;
	--card: #18181b;
	--card-foreground: #fafafa;
	--primary: #fafafa;
	--primary-foreground: #18181b;
	--secondary: #27272a;
	--secondary-foreground: #fafafa;
	--muted: #27272a;
	--muted-foreground: #a1a1aa;
	--faint: #1e1e21;
	--faint-foreground: #71717a;
	--accent: #27272a;
	--danger: #f4807b;
	--danger-foreground: #18181b;
	--success: #6cc070;
	--success-foreground: #18181b;
	--warning: #f0a030;
	--warning-foreground: #09090b;
	--border: #52525b;
	--input: #52525b;
	--ring: #d4d4d8;
}

.d-none {
	display: none !important;
}

.text-end {
	text-align: right;
}

.col-end {
	display: flex;
	justify-content: flex-end;
}

.text-muted,
.text-light {
	color: var(--muted-foreground);
}

[data-topnav] .topnav-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

[data-topnav] .topnav-theme {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-weight: var(--font-normal);
	color: var(--muted-foreground);
}

[data-topnav] .topnav-theme input[role="switch"] {
	margin: 0;
}

[data-topnav] .topnav-user {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

[data-topnav] .topnav-user form {
	margin: 0;
}

/* Sidebar section subheaders (non-collapsible) */

[data-sidebar] nav {
	padding: var(--space-2);
}

[data-sidebar] .sidebar-section > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

[data-sidebar-layout] [data-sidebar] nav .sidebar-heading,
[data-sidebar-layout] [data-sidebar] nav a {
	padding: var(--space-1) var(--space-2);
	gap: 0;
}

[data-sidebar] .sidebar-heading {
	display: block;
	margin-block: var(--space-3) var(--space-1);
	font-size: var(--text-8, 0.75rem);
	font-weight: var(--font-semibold, 600);
	letter-spacing: 0.04em;
	color: var(--muted-foreground);
	user-select: none;
}

[data-sidebar-layout] [data-sidebar] nav a[aria-current="page"] {
	background-color: color-mix(in srgb, var(--primary) 14%, transparent);
	color: var(--primary);
	font-weight: var(--font-semibold, 600);
}

[data-sidebar-layout] [data-sidebar] nav a:hover:not([aria-current="page"]) {
	background-color: var(--accent);
}

[data-sidebar] .sidebar-section:first-child .sidebar-heading {
	margin-block-start: 0;
}

ot-tabs [role="tablist"] {
	border: 1px solid var(--border);
}

/* Bottom record list (no oat equivalent) */

.list-sheet {
	position: fixed;
	z-index: 1;
	left: var(--sidebar-width);
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	height: var(--list-sheet-mid);
	border-top: 1px solid var(--border);
	background: var(--background);
	transition: height var(--transition, 0.2s);
}

.list-sheet[data-sheet-state="min"] {
	height: auto;
}

.list-sheet[data-sheet-state="min"] .list-sheet-body {
	display: none;
}

.list-sheet[data-sheet-state="full"] {
	height: var(--list-sheet-full);
}

@media (max-width: 768px) {
	.list-sheet {
		left: 0;
	}
}

.list-sheet-header {
	display: flex;
	flex-wrap: wrap;
	flex-shrink: 0;
	align-items: center;
	gap: var(--space-2, 0.5rem);
	padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
	border-bottom: 1px solid var(--border);
}

.list-sheet-header menu.buttons {
	margin: 0;
}

.list-sheet-header > div:last-child {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2, 0.5rem);
}

.list-sheet-header > div:last-child form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2, 0.5rem);
}

.list-sheet-body {
	flex: 1;
	overflow: auto;
	min-height: 0;
}

.list-sheet-page-padding {
	padding-bottom: calc(var(--list-sheet-mid) + var(--sheet-footer-gap));
	transition: padding-bottom var(--transition, 0.2s);
}

body:has(.list-sheet[data-sheet-state="full"]) .list-sheet-page-padding {
	padding-bottom: calc(var(--list-sheet-full) + var(--sheet-footer-gap));
}

body:has(.list-sheet[data-sheet-state="min"]) .list-sheet-page-padding {
	padding-bottom: calc(var(--list-sheet-min-h, 3.5rem) + var(--sheet-footer-gap));
}

.list-sheet tbody tr[data-sheet-row-href] {
	cursor: pointer;
}

.list-sheet tbody tr.active,
[data-item-list] tr.active {
	background: var(--muted);
}

.list-sheet [data-sheet-set].active {
	font-weight: 600;
}

/* Entity dialogs: keep long create forms scrollable */

dialog[data-entity-sheet] {
	width: min(42rem, 100vw);
	max-height: min(90vh, 52rem);
}

dialog[data-entity-sheet] form {
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: calc(min(90vh, 52rem) - 2rem);
}

dialog[data-entity-sheet] [data-sheet-body] {
	overflow: auto;
	min-height: 0;
	flex: 1;
}

dialog[data-entity-sheet] [data-sheet-body]:has(.best-cust-suggest:not(:empty)),
dialog[data-entity-sheet] [data-sheet-body]:has(.best-prod-suggest:not(:empty)) {
	overflow: visible;
}

/* Neue Bestellung create dialog */

#best-create-sheet {
	width: min(48rem, calc(100vw - 2rem));
}

#best-create-sheet .best-create-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

#best-create-sheet .best-create-section > header h5,
#best-create-sheet .best-create-section-head h5 {
	margin: 0;
}

#best-create-sheet .best-create-section > header:not(.best-create-section-head) {
	margin-block-end: var(--space-3);
}

#best-create-sheet .best-create-field-label {
	margin: 0 0 var(--space-2);
}

#best-create-sheet .best-create-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-block-end: var(--space-3);
}

#best-create-sheet .best-create-lines table {
	min-width: 0;
}

#best-create-sheet .best-create-lines td {
	vertical-align: top;
}

#best-create-sheet .best-create-lines input {
	margin-block-start: 0;
}

#best-create-sheet .best-create-qty-col {
	width: 6.5rem;
	white-space: nowrap;
}

#best-create-sheet .best-create-lines-actions {
	margin-block-start: var(--space-3);
}

#best-create-sheet .best-create-shipping-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-block-end: var(--space-3);
}

#best-create-sheet .best-create-shipping-list .item {
	margin-bottom: 0;
}

#best-create-sheet [data-field]:last-child {
	margin-block-end: 0;
}

/* Typeahead */

.typeahead-field {
	position: relative;
}

.best-cust-suggest,
.best-prod-suggest {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 0.25rem;
	max-height: 12rem;
	overflow: auto;
	border: 1px solid var(--border);
	border-radius: 5px;
	background: var(--background);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.best-cust-suggest:empty,
.best-prod-suggest:empty {
	display: none;
}

.suggest-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.suggest-list li {
	margin: 0;
	border-bottom: 1px solid var(--border);
}

.suggest-list li:last-child {
	border-bottom: none;
}

.suggest-list button {
	display: block;
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: none;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.suggest-list button:hover,
.suggest-list button:focus-visible {
	background: var(--muted);
	outline: none;
}

.suggest-list .suggest-empty,
.suggest-error {
	margin: 0;
	padding: 0.5rem 0.75rem;
	color: var(--muted-foreground);
}

.suggest-error {
	color: var(--danger);
}

.filter-note .suggest-list a {
	display: block;
	padding: 0.35rem 0.5rem;
}

/* Charts */

.chart-bars-container {
	height: 180px;
}

.chart-bars-container--tall {
	height: 200px;
}

.chart-bars {
	display: flex;
	align-items: flex-end;
	gap: 0.25rem;
	height: 100%;
}

.chart-bar-col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: end;
	height: 100%;
	min-width: 0;
}

.chart-bar {
	width: 100%;
	background: var(--primary);
	border-radius: 3px 3px 0 0;
}

.chart-bar-label {
	margin-top: 0.125rem;
	font-size: 0.75rem;
	color: var(--muted-foreground);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

/* Shipping address picker in create-order dialog */

.item {
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0.5rem 0.75rem;
	margin-bottom: 0.25rem;
	width: 100%;
	text-align: left;
	background: transparent;
	cursor: pointer;
}

.item.active {
	background: var(--muted);
}

.item p {
	margin: 0;
}

.table-detail-row td {
	background: var(--muted);
}

[data-item-list] tbody tr[data-open-edit-sheet] {
	cursor: pointer;
}

.rotated-chevron {
	display: inline-block;
	transform: rotate(90deg);
}

[data-navigate] {
	cursor: pointer;
}

menu.buttons {
	flex-wrap: wrap;
	gap: var(--space-2);
}

menu.buttons > li {
	display: contents;
}

menu.buttons > li > :is(button, a.button, [type="submit"], [type="button"]) {
	border-radius: var(--radius-medium);
	border-inline-end-color: var(--border);
}

menu.buttons form {
	display: contents;
}

/* Danger: red text; outline keeps neutral border/background */

.danger,
:is(button, a.button, [type="submit"], [type="button"]).danger {
	color: var(--danger);
}

:is(button, a.button, [type="submit"], [type="button"]).danger.outline {
	border-color: var(--border);
	background-color: transparent;
}

:is(button, a.button, [type="submit"], [type="button"]).danger.outline:hover:not(:disabled) {
	border-color: var(--border);
	background-color: var(--accent);
	color: var(--danger);
}