/* =========================================================================
   Naturalis Fakture — customer portal
   Visual language: Material Design 3 (light + system-driven dark).
   ========================================================================= */

:root {
	color-scheme: light dark;

	--font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
		"Helvetica Neue", Arial, sans-serif;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 72px;

	/* M3 shape scale */
	--shape-xs: 4px;
	--shape-sm: 8px;
	--shape-md: 12px;
	--shape-lg: 16px;
	--shape-xl: 28px;
	--shape-full: 999px;

	/* M3 motion */
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
	--dur-short: 150ms;
	--dur-medium: 250ms;

	/* M3 elevation (light) */
	--elev-1: 0 1px 2px 0 rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 15%);
	--elev-2: 0 1px 2px 0 rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
	--elev-3: 0 4px 8px 3px rgb(0 0 0 / 15%), 0 1px 3px 0 rgb(0 0 0 / 30%);

	/* ---- Brand palette — light (matches Android Fakture app) ----
	   Seeds (from app/ui/Color.kt):
	     primary   = #4CAF50 (Material Green 500)
	     secondary = #388E3C (Material Green 700)
	     tertiary  = #FF9800 (Material Orange 500) — used sparingly as accent
	*/
	--primary:                #4CAF50;
	--primary-dark:           #388E3C;
	--on-primary:             #FFFFFF;
	--primary-container:      #C8E6C9;
	--on-primary-container:   #1B5E20;
	--secondary:              #2E7D32;
	--on-secondary:           #FFFFFF;
	--secondary-container:    #DCEDC8;
	--on-secondary-container: #1B5E20;
	--tertiary:               #F57C00;
	--on-tertiary:            #FFFFFF;
	--tertiary-container:     #FFE0B2;
	--on-tertiary-container:  #6E3500;
	--error:                  #B3261E;
	--error-container:        #F9DEDC;
	--on-error-container:     #410E0B;

	--background:             #F8F9F7;
	--on-background:          #1A1C19;
	--surface:                #F8F9F7;
	--surface-dim:            #D8DBD4;
	--surface-bright:         #FFFFFF;
	--surface-container-lowest: #FFFFFF;
	--surface-container-low:  #F2F4EF;
	--surface-container:      #ECEEE8;
	--surface-container-high: #E6E9E2;
	--surface-container-highest: #E0E3DC;
	--on-surface:             #1A1C19;
	--on-surface-variant:     #43483F;
	--outline:                #73796F;
	--outline-variant:        #C3C8BC;
	--scrim:                  rgb(0 0 0 / 32%);

	/* State-layer alpha values */
	--state-hover: 0.08;
	--state-focus: 0.12;
	--state-press: 0.12;

	/* Chart palette (derived) */
	--chart-grid:    rgb(67 72 63 / 16%);
	--chart-axis:    rgb(67 72 63 / 80%);
	--chart-line:    #4CAF50;
	--chart-fill:    rgb(76 175 80 / 18%);
	--chart-bar:      rgb(76 175 80 / 80%);
	--chart-bar-muted: rgb(76 175 80 / 14%);
	--chart-line-muted: rgb(76 175 80 / 28%);
	--chart-tooltip:      rgb(26 28 25 / 95%);
	--chart-tooltip-text: #fff;
}

@media (prefers-color-scheme: dark) {
	:root {
		--primary:                #81C784;
		--primary-dark:           #4CAF50;
		--on-primary:             #00390A;
		--primary-container:      #2E7D32;
		--on-primary-container:   #C8E6C9;
		--secondary:              #A5D6A7;
		--on-secondary:           #003910;
		--secondary-container:    #1B5E20;
		--on-secondary-container: #DCEDC8;
		--tertiary:               #FFB74D;
		--on-tertiary:            #4A2800;
		--tertiary-container:     #6D3A00;
		--on-tertiary-container:  #FFE0B2;
		--error:                  #F2B8B5;
		--error-container:        #8C1D18;
		--on-error-container:     #F9DEDC;

		--background:             #111411;
		--on-background:          #E2E3DD;
		--surface:                #111411;
		--surface-dim:            #111411;
		--surface-bright:         #373A35;
		--surface-container-lowest: #0B0E0B;
		--surface-container-low:  #191C18;
		--surface-container:      #1D211C;
		--surface-container-high: #272B26;
		--surface-container-highest: #323630;
		--on-surface:             #E2E3DD;
		--on-surface-variant:     #C3C8BC;
		--outline:                #8D9388;
		--outline-variant:        #43483F;

		--elev-1: 0 1px 3px 1px rgb(0 0 0 / 60%), 0 1px 2px 0 rgb(0 0 0 / 50%);
		--elev-2: 0 2px 6px 2px rgb(0 0 0 / 50%), 0 1px 2px 0 rgb(0 0 0 / 50%);
		--elev-3: 0 4px 12px 4px rgb(0 0 0 / 55%), 0 1px 3px 0 rgb(0 0 0 / 50%);

		--chart-grid:    rgb(195 200 188 / 14%);
		--chart-axis:    rgb(195 200 188 / 80%);
		--chart-line:    #81C784;
		--chart-fill:    rgb(129 199 132 / 20%);
		--chart-bar:      rgb(129 199 132 / 82%);
		--chart-bar-muted: rgb(129 199 132 / 14%);
		--chart-line-muted: rgb(129 199 132 / 30%);
		--chart-tooltip:      rgb(226 227 221 / 96%);
		--chart-tooltip-text: #1a1c19;
	}
}

/* ---------- reset & base ---------- */

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

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

body {
	background: var(--background);
	color: var(--on-background);
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "tnum";
}

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 500;
	letter-spacing: 0;
}
p { margin: 0; }

a {
	color: var(--primary);
	text-decoration: none;
}

button { font: inherit; cursor: pointer; }
input, button, select, textarea { font-family: inherit; }

::selection {
	background: var(--primary-container);
	color: var(--on-primary-container);
}

/* M3 typography presets */
.t-display-sm { font-size: 36px; line-height: 44px; font-weight: 400; letter-spacing: 0; }
.t-headline   { font-size: 24px; line-height: 32px; font-weight: 400; letter-spacing: 0; }
.t-title-lg   { font-size: 22px; line-height: 28px; font-weight: 400; }
.t-title      { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.15px; }
.t-body       { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0.25px; }
.t-label      { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.5px; }

/* ---------- top app bar ---------- */

.app-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--primary);
	color: var(--on-primary);
	box-shadow: var(--elev-1);
}
@media (prefers-color-scheme: dark) {
	.app-header {
		background: var(--surface-container);
		color: #fff;
	}
	.app-header .app-header__title h1,
	.app-header .iconbtn,
	.app-header .iconbtn:hover,
	.app-header .iconbtn:focus-visible { color: #fff; }
	.app-header .app-header__title p { color: rgba(255,255,255,0.7); }
	.app-header .iconbtn:hover { background: rgba(255,255,255,0.08); }
	.app-header .iconbtn:focus-visible { background: rgba(255,255,255,0.12); }
}

.app-header__inner {
	position: relative;
	max-width: 1600px;
	margin: 0 auto;
	padding: 8px 12px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--space-2);
	align-items: center;
	min-height: 64px;
}

.app-header__title {
	min-width: 0;
	padding: 0 var(--space-2);
}
.app-header__title h1 {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0.15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--on-primary);
}
.app-header__title p {
	color: rgb(255 255 255 / 80%);
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 0.4px;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.app-header__actions {
	display: inline-flex;
	gap: var(--space-1);
}

.iconbtn {
	display: inline-grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: var(--shape-full);
	color: var(--on-primary);
	background: transparent;
	border: none;
	transition: background var(--dur-short) var(--ease-standard),
	            color var(--dur-short) var(--ease-standard);
}
.iconbtn:hover {
	background: rgb(255 255 255 / 12%);
	color: var(--on-primary);
}
.iconbtn:focus-visible {
	background: rgb(255 255 255 / 16%);
	outline: none;
}

/* ---------- page shell ---------- */

.page {
	max-width: 1600px;
	margin: 0 auto;
	padding: var(--space-5) 16px var(--space-8);
	display: grid;
	gap: var(--space-4);
}

.layout {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
}

.layout__side {
	display: grid;
	gap: var(--space-4);
}

.layout__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
}

.view-switch {
	display: flex;
	gap: var(--space-2);
}
.view-switch[hidden] { display: none; }
.view-switch .mode[hidden] { display: none; }

.view-switch .mode {
	flex: 0 1 auto;
}

/* M3 filled card */
.surface {
	background: var(--surface-container-low);
	border-radius: var(--shape-lg);
	border: none;
}
.surface--padded { padding: var(--space-5); }

/* ---------- date range ---------- */

.daterange {
	display: grid;
	gap: var(--space-4);
}

.daterange__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
}
.daterange__fields[hidden] { display: none; }

.daterange__modes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.mode {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 72px;
	min-width: 56px;
	height: 40px;
	padding: 0 16px;
	border-radius: var(--shape-full);
	border: 1px solid var(--outline-variant);
	background: transparent;
	color: var(--on-surface-variant);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1px;
	transition: background var(--dur-short) var(--ease-standard),
	            border-color var(--dur-short) var(--ease-standard),
	            color var(--dur-short) var(--ease-standard);
}
.mode:hover {
	background: color-mix(in srgb, var(--on-surface) calc(var(--state-hover) * 100%), transparent);
}
.mode:focus-visible {
	outline: none;
	background: color-mix(in srgb, var(--on-surface) calc(var(--state-focus) * 100%), transparent);
}
.mode--active {
	background: var(--primary-container);
	border-color: var(--primary-container);
	color: var(--on-primary-container);
}
.mode--active:hover {
	background: color-mix(in srgb, var(--on-primary-container) 8%, var(--primary-container));
}
.mode--alt { flex: 0 1 auto; }

.daterange__stepper {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.stepbtn {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--shape-full);
	border: none;
	background: transparent;
	color: var(--on-surface);
	transition: background var(--dur-short) var(--ease-standard),
	            opacity var(--dur-short) var(--ease-standard);
}
.stepbtn:hover:not(:disabled) {
	background: color-mix(in srgb, var(--on-surface) calc(var(--state-hover) * 100%), transparent);
}
.stepbtn:disabled {
	opacity: 0.3;
	cursor: default;
}

.stepper__label {
	flex: 1;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.15px;
	color: var(--on-surface);
	font-variant-numeric: tabular-nums;
}

.stepbtn--snap {
	width: auto;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1px;
	color: var(--primary);
}

.daterange--custom .daterange__stepper { display: none; }

.field {
	display: grid;
	gap: 6px;
}
.field__label {
	font-size: 12px;
	font-weight: 500;
	color: var(--on-surface-variant);
	letter-spacing: 0.4px;
	padding-left: 4px;
}
.field input {
	appearance: none;
	-webkit-appearance: none;
	background: var(--surface-container-highest);
	border: 1px solid transparent;
	color: var(--on-surface);
	border-radius: var(--shape-xs);
	padding: 14px 16px;
	font-size: 16px;
	width: 100%;
	min-height: 56px;
	transition: background var(--dur-short) var(--ease-standard),
	            border-color var(--dur-short) var(--ease-standard),
	            box-shadow var(--dur-short) var(--ease-standard);
}
.field input:hover { background: color-mix(in srgb, var(--surface-container-highest) 92%, var(--on-surface)); }
.field input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: inset 0 -2px 0 0 var(--primary);
}

input[type="date"] {
	color-scheme: light dark;
}

/* ---------- Air Datepicker theme ---------- */

.daterange__fields input[data-adp] {
	cursor: pointer;
	caret-color: transparent;
}

.air-datepicker {
	--adp-font-family: var(--font-sans);
	--adp-font-size: 14px;
	--adp-background-color: var(--surface-container-high);
	--adp-background-color-hover: color-mix(in srgb, var(--on-surface) 8%, var(--surface-container-high));
	--adp-background-color-active: color-mix(in srgb, var(--on-surface) 12%, var(--surface-container-high));
	--adp-background-color-in-range: color-mix(in srgb, var(--primary) 16%, transparent);
	--adp-background-color-in-range-focused: color-mix(in srgb, var(--primary) 24%, transparent);
	--adp-background-color-selected-other-month-focused: var(--primary-dark);
	--adp-background-color-selected-other-month: var(--primary);
	--adp-color: var(--on-surface);
	--adp-color-secondary: var(--on-surface-variant);
	--adp-accent-color: var(--primary);
	--adp-color-current-date: var(--primary);
	--adp-color-other-month: color-mix(in srgb, var(--on-surface-variant) 60%, transparent);
	--adp-color-disabled: color-mix(in srgb, var(--on-surface-variant) 40%, transparent);
	--adp-color-disabled-in-range: color-mix(in srgb, var(--on-surface-variant) 55%, transparent);
	--adp-color-other-month-hover: var(--on-surface-variant);
	--adp-border-color: var(--outline-variant);
	--adp-border-color-inner: var(--outline-variant);
	--adp-border-radius: var(--shape-md);
	--adp-border-color-inline: var(--outline-variant);
	--adp-nav-height: 40px;
	--adp-nav-arrow-color: var(--on-surface-variant);
	--adp-nav-action-size: 32px;
	--adp-nav-color-secondary: var(--on-surface-variant);
	--adp-day-name-color: var(--on-surface-variant);
	--adp-day-name-color-hover: var(--on-surface);
	--adp-day-cell-width: 1fr;
	--adp-day-cell-height: 36px;
	--adp-month-cell-height: 42px;
	--adp-year-cell-height: 42px;
	--adp-cell-background-color-hover: color-mix(in srgb, var(--on-surface) 8%, transparent);
	--adp-cell-background-color-selected: var(--primary);
	--adp-cell-background-color-selected-hover: var(--primary-dark);
	--adp-cell-background-color-in-range: color-mix(in srgb, var(--primary) 16%, transparent);
	--adp-cell-background-color-in-range-hover: color-mix(in srgb, var(--primary) 24%, transparent);
	--adp-cell-border-color-in-range: var(--primary);
	--adp-cell-border-radius: var(--shape-sm);
	--adp-btn-height: 36px;
	--adp-btn-color: var(--primary);
	--adp-btn-color-hover: var(--primary);
	--adp-btn-background-color-hover: color-mix(in srgb, var(--primary) 10%, transparent);
	--adp-btn-background-color-active: color-mix(in srgb, var(--primary) 16%, transparent);
	--adp-btn-border-radius: var(--shape-full);
	--adp-z-index: 40;
	box-shadow: var(--elev-2);
}

.air-datepicker.-inline- { box-shadow: none; }

.air-datepicker-cell.-current- { font-weight: 600; }
.air-datepicker-cell.-selected-,
.air-datepicker-cell.-selected-.-current- { color: var(--on-primary); }
.air-datepicker-cell.-selected-:hover,
.air-datepicker-cell.-selected-.-focus- { color: var(--on-primary); }

.air-datepicker-nav--title { font-weight: 500; }
.air-datepicker-nav--title:hover { color: var(--primary); }

/* ---------- buttons (M3) ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	border: none;
	background: transparent;
	color: var(--primary);
	height: 40px;
	padding: 0 24px;
	border-radius: var(--shape-full);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1px;
	transition: background var(--dur-short) var(--ease-standard),
	            box-shadow var(--dur-short) var(--ease-standard);
}
.btn:hover {
	background: color-mix(in srgb, var(--primary) calc(var(--state-hover) * 100%), transparent);
}

.btn--primary {
	background: var(--primary);
	color: var(--on-primary);
}
.btn--primary:hover {
	background: var(--primary);
	box-shadow: var(--elev-1);
	background: color-mix(in srgb, var(--on-primary) calc(var(--state-hover) * 100%), var(--primary));
}

.btn--full { width: 100%; }

.btn[hidden] { display: none; }

/* ---------- summary / stat tiles ---------- */

.summary {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
}

.summary__stat {
	background: var(--primary-container);
	color: var(--on-primary-container);
	border-radius: var(--shape-lg);
	padding: var(--space-4) var(--space-5);
	display: grid;
	gap: 4px;
}
.summary__stat:nth-child(2),
.summary__stat:nth-child(3) {
	background: var(--surface-container-high);
	color: var(--on-surface);
}

.summary__label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.4px;
	opacity: 0.85;
}
.summary__value {
	font-size: clamp(22px, 3.4vw, 28px);
	font-weight: 500;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

/* ---------- empty state ---------- */

.empty {
	background: var(--surface-container-low);
	border-radius: var(--shape-lg);
	padding: var(--space-7) var(--space-5);
	text-align: center;
	display: grid;
	gap: var(--space-2);
	justify-items: center;
}
.empty__icon {
	color: var(--on-surface-variant);
	margin-bottom: var(--space-2);
}
.empty h2 {
	font-size: 22px;
	line-height: 28px;
	font-weight: 400;
	color: var(--on-surface);
}
.empty p { color: var(--on-surface-variant); }

/* ---------- seller cards ---------- */

.cards {
	display: grid;
	gap: var(--space-3);
}

/* Seller cards — button-based, act as in-page filter */
.seller {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	background: var(--surface-container-low);
	border-radius: var(--shape-lg);
	padding: var(--space-5);
	color: var(--on-surface);
	border: none;
	cursor: pointer;
	text-align: left;
	font: inherit;
	width: 100%;
	transition: background var(--dur-short) var(--ease-standard),
	            box-shadow var(--dur-short) var(--ease-standard);
}
.seller:hover {
	background: var(--surface-container);
	box-shadow: var(--elev-1);
	color: var(--on-surface);
}
.seller--selected {
	background: var(--primary-container);
	color: var(--on-primary-container);
	box-shadow: var(--elev-1);
	outline: 2px solid var(--primary);
	outline-offset: -2px;
}
.seller--selected:hover {
	background: color-mix(in srgb, var(--on-primary-container) 6%, var(--primary-container));
	color: var(--on-primary-container);
}
.seller:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}


.seller__head {
	grid-column: 1 / -1;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.seller__name {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.15px;
}
.seller__name--total {
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.seller__sum {
	font-size: 22px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.seller__lines {
	margin: 0;
	display: grid;
	gap: 4px;
	color: var(--on-surface-variant);
	font-size: 14px;
}
.seller--selected .seller__lines { color: inherit; opacity: 0.8; }

.seller__line {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
}
.seller__line dt { margin: 0; }
.seller__line dd {
	margin: 0;
	color: var(--on-surface);
	font-variant-numeric: tabular-nums;
}
.seller--selected .seller__line dd { color: inherit; }

/* ---------- alert ---------- */

.alert {
	background: var(--error-container);
	color: var(--on-error-container);
	border-radius: var(--shape-sm);
	padding: var(--space-3) var(--space-4);
	font-size: 14px;
	letter-spacing: 0.25px;
}

/* ---------- auth (login) ---------- */

body.is-auth {
	display: grid;
	place-items: center;
	min-height: 100dvh;
	background: var(--background);
}

.auth {
	width: 100%;
	max-width: 420px;
	padding: var(--space-5) 16px;
}

.auth__card {
	background: var(--surface-container-low);
	border-radius: var(--shape-xl);
	padding: var(--space-7) var(--space-6);
	box-shadow: var(--elev-1);
	display: grid;
	gap: var(--space-5);
}

.auth__brand {
	display: grid;
	gap: 6px;
	justify-items: center;
	text-align: center;
	margin-bottom: var(--space-2);
}

.auth__mark {
	display: inline-grid;
	place-items: center;
	margin-bottom: var(--space-3);
}

.auth__brand h1 {
	font-size: 24px;
	line-height: 32px;
	font-weight: 400;
	color: var(--on-surface);
	letter-spacing: 0;
}
.auth__brand p {
	color: var(--on-surface-variant);
	font-size: 14px;
	letter-spacing: 0.25px;
}

.auth__form {
	display: grid;
	gap: var(--space-3);
}

.auth__foot {
	text-align: center;
	color: var(--on-surface-variant);
	font-size: 12px;
	letter-spacing: 0.4px;
}

/* ---------- chart cards ---------- */

#charts-section {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
}
#charts-section[hidden] { display: none; }

.chart-card {
	padding: var(--space-5);
}

.chart-card__head {
	margin-bottom: var(--space-4);
}
.chart-card__head--row {
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: var(--space-3);
}
.chart-card__head h2 {
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
	color: var(--on-surface);
	letter-spacing: 0.15px;
}

.chart {
	position: relative;
	height: 220px;
}
.chart--tall { height: 320px; }

/* ---------- section top (view-switch + nav link row) ---------- */

.section-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-bottom: var(--space-4);
}

.navlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: none;
	background: transparent;
	color: var(--primary);
	height: 40px;
	padding: 0 12px;
	border-radius: var(--shape-full);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1px;
	transition: background var(--dur-short) var(--ease-standard);
}
.navlink:hover {
	background: color-mix(in srgb, var(--primary) calc(var(--state-hover) * 100%), transparent);
}
.navlink:focus-visible {
	outline: none;
	background: color-mix(in srgb, var(--primary) calc(var(--state-focus) * 100%), transparent);
}

/* ---------- invoice list ---------- */

.invoice-list {
	background: transparent;
	border-radius: 0;
	padding: 0;
	display: grid;
	gap: var(--space-3);
}

.inv-day {
	background: var(--surface-container-low);
	border-radius: var(--shape-lg);
}

.inv-day__head {
	position: sticky;
	top: 64px;
	z-index: 2;
	background: var(--surface-container);
	padding: var(--space-3) var(--space-5);
	border-bottom: 1px solid var(--outline-variant);
	border-top-left-radius: var(--shape-lg);
	border-top-right-radius: var(--shape-lg);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-3);
}
.inv-day__head h3 {
	font-size: 14px;
	font-weight: 500;
	color: var(--on-surface);
	letter-spacing: 0.1px;
}
.inv-day__count {
	color: var(--on-surface-variant);
	font-size: 12px;
	letter-spacing: 0.4px;
	font-variant-numeric: tabular-nums;
}

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

.inv-row {
	display: grid;
	grid-template-columns: 56px 110px minmax(0, 1fr) 130px 130px;
	align-items: center;
	gap: var(--space-3);
	padding: 10px var(--space-5);
	border-bottom: 1px solid var(--outline-variant);
	font-size: 14px;
}
.inv-row:last-child { border-bottom: none; }
.inv-row:hover {
	background: color-mix(in srgb, var(--on-surface) calc(var(--state-hover) * 100%), transparent);
}

.inv-row__time   { color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }
.inv-row__st     { color: var(--on-surface-variant); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-row__seller { color: var(--on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-row__nacin  { color: var(--on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-row__amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--on-surface); }

.inv-day__foot {
	background: var(--surface-container);
	padding: var(--space-3) var(--space-5);
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
	font-size: 14px;
	border-top: 1px solid var(--outline-variant);
	border-bottom-left-radius: var(--shape-lg);
	border-bottom-right-radius: var(--shape-lg);
}
.inv-day__payments {
	display: flex;
	gap: var(--space-4);
	color: var(--on-surface-variant);
	flex-wrap: wrap;
}
.inv-day__pay {
	display: inline-flex;
	gap: 6px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--on-surface);
}
.inv-day__pay > span { color: var(--on-surface-variant); font-weight: 400; }
.inv-day__total {
	display: inline-flex;
	gap: 8px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--on-surface);
}
.inv-day__total > span { color: var(--on-surface-variant); font-weight: 400; }

.list-more {
	display: flex;
	justify-content: center;
	margin-top: var(--space-4);
}

/* ---------- responsive ---------- */

@media (min-width: 1000px) {
	.layout {
		grid-template-columns: 400px minmax(0, 1fr);
		align-items: start;
	}

	.layout__side {
		position: sticky;
		top: var(--space-4);
		max-height: calc(100dvh - var(--space-6));
		overflow: auto;
	}

	.layout__side .summary {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.summary { grid-template-columns: 1fr; }
	.summary__stat { padding: var(--space-3) var(--space-4); }
	.summary__value { font-size: 22px; }

	.app-header__inner { padding: 8px; }
	.app-header__title h1 { font-size: 14px; }
	.app-header__title p  { font-size: 11px; }

	.page { padding: var(--space-4) 12px var(--space-7); gap: var(--space-3); }

	.surface--padded { padding: var(--space-4); }
	.seller { padding: var(--space-4); }

	.daterange__fields { grid-template-columns: 1fr; }

	.auth__card { padding: var(--space-6) var(--space-5); border-radius: var(--shape-lg); }

	.inv-day__head, .inv-day__foot { padding: var(--space-3) var(--space-4); }

	.inv-row {
		grid-template-columns: 48px minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		gap: 2px var(--space-3);
		padding: var(--space-3) var(--space-4);
	}
	.inv-row__time   { grid-row: 1; grid-column: 1; }
	.inv-row__seller { grid-row: 1; grid-column: 2; font-weight: 500; }
	.inv-row__amount { grid-row: 1; grid-column: 3; }
	.inv-row__st     { grid-row: 2; grid-column: 1 / span 2; font-size: 12px; }
	.inv-row__nacin  { grid-row: 2; grid-column: 3; font-size: 12px; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------- skeleton loader ---------- */

@keyframes shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.skel-text {
	display: inline-block;
	min-width: 5em;
	height: 0.7em;
	border-radius: 4px;
	background: linear-gradient(90deg,
		var(--surface-container-high) 25%,
		var(--surface-container-highest) 50%,
		var(--surface-container-high) 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	vertical-align: middle;
}

.skel-card {
	min-height: 96px;
	background: linear-gradient(90deg,
		var(--surface-container-high) 25%,
		var(--surface-container-highest) 50%,
		var(--surface-container-high) 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	border: none;
	cursor: default;
	pointer-events: none;
}