/*
	Design intent: a cheerful pet-shop workbench, not a generic SaaS admin.
	Sunlit-meadow neutrals + a sky-blue brand accent (nature: sky, water bowls -
	deliberately a different hue family than every status color, so "press this"
	is never confused with "this means ready/soon/overdue"). Status colors are
	bright and candy-like (leaf green / honey / coral) but still map 1:1 to the
	same meaning they always have. Paw-print motif is the one signature mark
	unique to this product (favicon, header brand badge, header texture).
*/

:root {
	--bg: #fbf7ea;
	--surface: #ffffff;
	--surface-2: #fef1da;
	--ink: #2c3a2e;
	--ink-secondary: #5a6b57;
	--ink-muted: #8a9686;
	--border: rgba(44, 58, 46, 0.1);
	--border-strong: rgba(44, 58, 46, 0.18);

	--accent: #2f9bd6;
	--accent-ink: #ffffff;
	--accent-wash: #e3f3fb;

	--green: #2fa866;
	--green-bg: #e3f7eb;
	--orange: #e8970f;
	--orange-bg: #fdf1d8;
	--red: #e8595f;
	--red-bg: #fde9ea;
	--unknown: #938aa3;
	--unknown-bg: #ece9f3;

	--waiting: #7c6fd1;
	--waiting-bg: #ece9fb;
	--renew: #e4679e;
	--renew-bg: #fbe6f0;

	--whatsapp: #25d366;
	--whatsapp-ink: #ffffff;

	--radius-s: 10px;
	--radius-m: 14px;
	--radius-l: 20px;

	--shadow-card: 0 0 0 1px rgba(44, 58, 46, 0.06), 0 1px 2px -1px rgba(44, 58, 46, 0.06), 0 2px 6px rgba(44, 58, 46, 0.05);
	--shadow-modal: 0 0 0 1px rgba(44, 58, 46, 0.08), 0 12px 32px -8px rgba(44, 58, 46, 0.28);

	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);

	--cursor-paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%232c3a2e' stroke='%23ffffff' stroke-width='1.4' stroke-linejoin='round'%3E%3Cellipse cx='16' cy='22' rx='8' ry='6.5'/%3E%3Cellipse cx='7' cy='13' rx='3.6' ry='4.6'/%3E%3Cellipse cx='25' cy='13' rx='3.6' ry='4.6'/%3E%3Cellipse cx='11.5' cy='6.5' rx='3' ry='3.8'/%3E%3Cellipse cx='20.5' cy='6.5' rx='3' ry='3.8'/%3E%3C/g%3E%3C/svg%3E") 14 10, auto;

	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #181f1a;
		--surface: #212a22;
		--surface-2: #273025;
		--ink: #eef3ea;
		--ink-secondary: #c2cdbf;
		--ink-muted: #8d9a8a;
		--border: rgba(255, 255, 255, 0.09);
		--border-strong: rgba(255, 255, 255, 0.15);

		--accent: #5bb8ea;
		--accent-ink: #0c2433;
		--accent-wash: #1d3340;

		--green: #6fcf96;
		--green-bg: #1e3426;
		--orange: #f0b949;
		--orange-bg: #3b3017;
		--red: #ee8086;
		--red-bg: #3a2325;
		--unknown: #b0a8c2;
		--unknown-bg: #2c2a37;

		--waiting: #a79af0;
		--waiting-bg: #2a2740;
		--renew: #ef8fbb;
		--renew-bg: #3a2530;

		--shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.07);
		--shadow-modal: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 16px 40px -8px rgba(0, 0, 0, 0.55);
		color-scheme: dark;
	}

	:root:not([data-theme="light"]) .app-header {
		background:
			radial-gradient(circle, rgba(238, 243, 234, 0.05) 2.4px, transparent 2.6px) 0 0 / 30px 30px,
			var(--surface);
	}

	:root:not([data-theme="light"]) .brand-mark {
		box-shadow: var(--shadow-card), 0 0 0 4px var(--surface), 0 0 0 6px rgba(91, 184, 234, 0.35);
	}

	:root:not([data-theme="light"]) body {
		background-image:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='%23eef3ea' fill-opacity='0.04' transform='rotate(18 32 32)'%3E%3Cellipse cx='32' cy='42' rx='10' ry='8'/%3E%3Cellipse cx='18' cy='26' rx='5' ry='6.5'/%3E%3Cellipse cx='46' cy='26' rx='5' ry='6.5'/%3E%3Cellipse cx='24' cy='16' rx='4' ry='5.5'/%3E%3Cellipse cx='40' cy='16' rx='4' ry='5.5'/%3E%3C/g%3E%3C/svg%3E"),
			radial-gradient(640px circle at 100% -10%, rgba(91, 184, 234, 0.16), transparent 60%),
			radial-gradient(520px circle at -10% 15%, rgba(111, 207, 150, 0.13), transparent 60%),
			radial-gradient(560px circle at 100% 60%, rgba(239, 143, 187, 0.12), transparent 55%),
			radial-gradient(520px circle at -5% 100%, rgba(240, 185, 73, 0.12), transparent 60%);
	}
}

/* Manual override via the theme-toggle button (localStorage-backed data-theme
   attribute) - mirrors the prefers-color-scheme block above so forcing dark
   works even when the OS itself is set to light, and vice versa. */
:root[data-theme="dark"] {
	--bg: #181f1a;
	--surface: #212a22;
	--surface-2: #273025;
	--ink: #eef3ea;
	--ink-secondary: #c2cdbf;
	--ink-muted: #8d9a8a;
	--border: rgba(255, 255, 255, 0.09);
	--border-strong: rgba(255, 255, 255, 0.15);

	--accent: #5bb8ea;
	--accent-ink: #0c2433;
	--accent-wash: #1d3340;

	--green: #6fcf96;
	--green-bg: #1e3426;
	--orange: #f0b949;
	--orange-bg: #3b3017;
	--red: #ee8086;
	--red-bg: #3a2325;
	--unknown: #b0a8c2;
	--unknown-bg: #2c2a37;

	--waiting: #a79af0;
	--waiting-bg: #2a2740;
	--renew: #ef8fbb;
	--renew-bg: #3a2530;

	--shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.07);
	--shadow-modal: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 16px 40px -8px rgba(0, 0, 0, 0.55);
	color-scheme: dark;
}
:root[data-theme="dark"] .app-header {
	background:
		radial-gradient(circle, rgba(238, 243, 234, 0.05) 2.4px, transparent 2.6px) 0 0 / 30px 30px,
		var(--surface);
}
:root[data-theme="dark"] .brand-mark {
	box-shadow: var(--shadow-card), 0 0 0 4px var(--surface), 0 0 0 6px rgba(91, 184, 234, 0.35);
}
:root[data-theme="dark"] body {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='%23eef3ea' fill-opacity='0.04' transform='rotate(18 32 32)'%3E%3Cellipse cx='32' cy='42' rx='10' ry='8'/%3E%3Cellipse cx='18' cy='26' rx='5' ry='6.5'/%3E%3Cellipse cx='46' cy='26' rx='5' ry='6.5'/%3E%3Cellipse cx='24' cy='16' rx='4' ry='5.5'/%3E%3Cellipse cx='40' cy='16' rx='4' ry='5.5'/%3E%3C/g%3E%3C/svg%3E"),
		radial-gradient(640px circle at 100% -10%, rgba(91, 184, 234, 0.16), transparent 60%),
		radial-gradient(520px circle at -10% 15%, rgba(111, 207, 150, 0.13), transparent 60%),
		radial-gradient(560px circle at 100% 60%, rgba(239, 143, 187, 0.12), transparent 55%),
		radial-gradient(520px circle at -5% 100%, rgba(240, 185, 73, 0.12), transparent 60%);
}

* { box-sizing: border-box; cursor: var(--cursor-paw); }

input[type="text"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea {
	cursor: text;
}

html { -webkit-font-smoothing: antialiased; }

body {
	margin: 0;
	font-family: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	background-color: var(--bg);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='%232c3a2e' fill-opacity='0.045' transform='rotate(18 32 32)'%3E%3Cellipse cx='32' cy='42' rx='10' ry='8'/%3E%3Cellipse cx='18' cy='26' rx='5' ry='6.5'/%3E%3Cellipse cx='46' cy='26' rx='5' ry='6.5'/%3E%3Cellipse cx='24' cy='16' rx='4' ry='5.5'/%3E%3Cellipse cx='40' cy='16' rx='4' ry='5.5'/%3E%3C/g%3E%3C/svg%3E"),
		radial-gradient(640px circle at 100% -10%, rgba(47, 155, 214, 0.14), transparent 60%),
		radial-gradient(520px circle at -10% 15%, rgba(47, 168, 102, 0.12), transparent 60%),
		radial-gradient(560px circle at 100% 60%, rgba(228, 103, 158, 0.1), transparent 55%),
		radial-gradient(520px circle at -5% 100%, rgba(232, 151, 15, 0.12), transparent 60%);
	background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	background-size: 110px 110px, auto, auto, auto, auto;
	color: var(--ink);
	font-size: 14px;
	line-height: 1.5;
}

h1, h2, h3 { text-wrap: balance; margin: 0; }

.app-header {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: center;
	padding: 20px 20px 22px;
	background:
		radial-gradient(circle, rgba(44, 58, 46, 0.05) 2.4px, transparent 2.6px) 0 0 / 30px 30px,
		var(--surface);
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	z-index: 5;
}

.app-header-side {
	flex: 1 1 120px;
	display: flex;
	min-width: 0;
}
.app-header-side--end { justify-content: flex-end; }

.app-header-brand {
	display: flex;
	flex: none;
	align-items: center;
	gap: 14px;
	padding: 8px 22px 8px 12px;
	border-radius: 999px;
	background: linear-gradient(120deg, var(--accent-wash), var(--renew-bg));
	box-shadow: var(--shadow-card);
}

.brand-mark {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 68px;
	height: 68px;
	border-radius: 999px;
	background: var(--surface);
	box-shadow: var(--shadow-card), 0 0 0 4px var(--surface), 0 0 0 6px rgba(47, 155, 214, 0.35);
	animation: brand-pop 550ms var(--ease-out), brand-float 4s ease-in-out 550ms infinite;
}

.brand-mark-sparkle {
	position: absolute;
	font-size: 15px;
	line-height: 1;
	animation: sparkle-twinkle 2.4s ease-in-out infinite;
}
.brand-mark-sparkle--1 { top: -4px; left: -8px; animation-delay: 0ms; }
.brand-mark-sparkle--2 { bottom: -2px; right: -8px; font-size: 11px; animation-delay: 1.1s; }

@keyframes brand-pop {
	from { transform: scale(0.5) rotate(-12deg); opacity: 0; }
	to { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes brand-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}
@keyframes sparkle-twinkle {
	0%, 100% { opacity: 0.35; transform: scale(0.85); }
	50% { opacity: 1; transform: scale(1.1); }
}

.app-header-titles {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	text-align: center;
}

.app-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--accent);
	letter-spacing: 0.02em;
}

.app-header h1 {
	font-size: 1.7rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	background: linear-gradient(90deg, var(--accent), var(--renew));
	-webkit-background-clip: text;
	background-clip: text;
	color: var(--ink);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
	.app-header h1 { -webkit-text-fill-color: transparent; color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
	.brand-mark, .brand-mark-sparkle { animation: none !important; }
}

.page-nav {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px 20px 0;
}

.nav-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--ink-secondary);
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: var(--cursor-paw);
	transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.nav-btn:hover { background: var(--surface-2); transform: translateY(-1px); }
.nav-btn.active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}
.nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.nav-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--red);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.nav-btn.active .nav-badge { background: #fff; color: var(--accent); }

.nav-tooltip {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 220px;
	max-width: 280px;
	background: var(--ink);
	color: var(--bg);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	padding: 10px 12px;
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-modal);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
	z-index: 10;
	pointer-events: none;
	text-align: right;
	white-space: normal;
}
.nav-btn:hover .nav-tooltip,
.nav-btn:focus-visible .nav-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.page { display: none; }
.page.active { display: block; }

.stat-strip {
	display: flex;
	gap: 1px;
	background: var(--border);
	max-width: 1100px;
	margin: 16px auto 0;
	border-radius: var(--radius-m);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.stat-tile {
	flex: 1;
	min-width: 90px;
	background: var(--surface);
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.stat-tile .stat-value {
	font-size: 22px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.stat-tile .stat-label {
	font-size: 11.5px;
	font-weight: 500;
	color: var(--ink-muted);
}

.stat-tile.stat-green { background: var(--green-bg); }
.stat-tile.stat-green .stat-value { color: var(--green); }
.stat-tile.stat-orange { background: var(--orange-bg); }
.stat-tile.stat-orange .stat-value { color: var(--orange); }
.stat-tile.stat-waiting { background: var(--waiting-bg); }
.stat-tile.stat-waiting .stat-value { color: var(--waiting); }
.stat-tile.stat-renew { background: var(--renew-bg); }
.stat-tile.stat-renew .stat-value { color: var(--renew); }
.stat-tile.stat-stuck { background: var(--red-bg); }
.stat-tile.stat-stuck .stat-value { color: var(--red); }

.stat-tile.stat-green .stat-label::before { content: "📣 "; }
.stat-tile.stat-orange .stat-label::before { content: "⏳ "; }
.stat-tile.stat-waiting .stat-label::before { content: "🐾 "; }
.stat-tile.stat-renew .stat-label::before { content: "🦴 "; }
.stat-tile.stat-stuck .stat-label::before { content: "💬 "; }

.stat-strip--inline {
	max-width: none;
	margin: 0;
}

.chart-wrap {
	overflow-x: auto;
}

.bar-chart {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 140px;
	padding-top: 20px;
}

.bar-chart-col {
	flex: 1;
	min-width: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	gap: 4px;
	border-bottom: 1px solid var(--border);
	padding-bottom: 6px;
}

.bar-chart-value {
	font-size: 10px;
	font-weight: 700;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}

.bar-chart-bar {
	width: 100%;
	background: var(--accent);
	opacity: 0.55;
	border-radius: 3px 3px 0 0;
	min-height: 2px;
	transition: opacity 120ms var(--ease-out);
}
.bar-chart-bar.today { opacity: 1; }
.bar-chart-col:hover .bar-chart-bar { opacity: 0.85; }

.bar-chart-label {
	font-size: 9.5px;
	color: var(--ink-muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.bar-chart-label.today { color: var(--accent); font-weight: 700; }

.activity-log {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	border-radius: var(--radius-m);
	overflow: hidden;
}

.activity-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	background: var(--surface);
	font-size: 12.5px;
}

.activity-row.undone { opacity: 0.5; }

.activity-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.activity-summary {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--ink);
	font-weight: 500;
}
.activity-summary .dot { flex: none; }
.activity-meta {
	color: var(--ink-muted);
	font-size: 11px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

#app {
	padding: 16px 20px 40px;
	max-width: 1100px;
	margin: 0 auto;
}

.toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}
.toolbar--end { justify-content: flex-end; margin-bottom: 14px; }

#search-box {
	flex: 1;
	min-width: 180px;
	max-width: 400px;
	padding: 9px 14px;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 0.9rem;
	font-family: inherit;
	color: var(--ink);
	transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}
#search-box:focus {
	outline: none;
	border-color: var(--accent);
	background: var(--surface);
}
#search-box::placeholder { color: var(--ink-muted); }

.sort-select {
	padding: 9px 14px;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 0.85rem;
	font-family: inherit;
	color: var(--ink-secondary);
	cursor: var(--cursor-paw);
	transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}
.sort-select:focus {
	outline: none;
	border-color: var(--accent);
	background: var(--surface);
}

.table-section {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-card);
	padding: 18px 20px;
	margin-bottom: 20px;
}

.table-section + .table-section {
	padding: 14px 18px;
}

.table-section h2 {
	font-size: 0.95rem;
	font-weight: 700;
	margin: 0 0 10px;
}

.legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: center;
	margin: 0 0 14px;
}

.legend-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 500;
	font-family: inherit;
	color: var(--ink-secondary);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 4px 10px 4px 8px;
	cursor: var(--cursor-paw);
	transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.legend-chip:hover { background: var(--surface); border-color: var(--border-strong); }
.legend-chip.active {
	background: var(--accent-wash);
	border-color: var(--accent);
	color: var(--ink);
	font-weight: 600;
}
.legend-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.legend-note {
	font-size: 11.5px;
	color: var(--ink-muted);
	flex-basis: 100%;
}

.dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
}
.dot-green { background: var(--green); }
.dot-orange { background: var(--orange); }
.dot-red { background: var(--red); }
.dot-unknown { background: var(--unknown); }

.table-wrap {
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.86rem;
}

th, td {
	padding: 10px 12px;
	text-align: right;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
	vertical-align: middle;
}

th {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ink-muted);
}

tr { transition: background 150ms var(--ease-out); }

tr.row-green { background: var(--green-bg); }
tr.row-orange { background: var(--orange-bg); }
tr.row-red { background: var(--red-bg); }
tr.row-unknown { background: var(--unknown-bg); }

.status-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink-secondary);
	border: 1px solid var(--border-strong);
	white-space: nowrap;
}
.status-chip .dot { width: 6px; height: 6px; }
.row-green .status-chip { color: var(--green); }
.row-orange .status-chip { color: var(--orange); }
.row-red .status-chip { color: var(--red); }
.row-unknown .status-chip { color: var(--unknown); }

.name-cell {
	font-weight: 700;
	color: var(--ink);
	white-space: normal;
	min-width: 140px;
}

.name-line {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.notes-line {
	font-weight: 400;
	font-size: 11.5px;
	color: var(--ink-muted);
	white-space: normal;
	max-width: 220px;
	margin-top: 2px;
}

.phone-link {
	color: var(--ink-secondary);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	direction: ltr;
	unicode-bidi: embed;
	display: inline-block;
}
.phone-link:hover { color: var(--accent); }

.phone-cell {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 1px solid transparent;
	background: transparent;
	color: var(--ink-muted);
	border-radius: var(--radius-s);
	cursor: var(--cursor-paw);
	transition: background 120ms var(--ease-out), color 120ms var(--ease-out);
}
.icon-btn:hover { background: var(--surface-2); color: var(--accent); }
.icon-btn:active { transform: scale(0.93); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.icon-btn--lg {
	width: 38px;
	height: 38px;
	font-size: 17px;
	border: 1px solid var(--border);
	background: var(--surface);
}

.awaiting-badge {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 600;
	color: var(--accent);
	background: var(--accent-wash);
	border: 1px solid var(--accent);
	border-radius: 999px;
	padding: 2px 8px;
	white-space: nowrap;
}
.awaiting-badge.stuck {
	color: #fff;
	background: var(--red);
	border-color: var(--red);
}

.bag-gauge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
.bag-gauge svg { flex: none; display: block; }

td.date-cell, .date-cell { font-variant-numeric: tabular-nums; color: var(--ink-secondary); }

.date-cell.has-interval {
	text-decoration: underline dotted var(--ink-muted) 1px;
	text-underline-offset: 3px;
	cursor: help;
}

.actions-cell {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
}

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

.menu-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--border-strong);
	background: var(--surface);
	color: var(--ink-secondary);
	border-radius: var(--radius-s);
	font-size: 16px;
	line-height: 1;
	cursor: var(--cursor-paw);
	transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.menu-trigger:hover { background: var(--surface-2); }
.menu-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.dropdown-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 180px;
	background: var(--surface-2);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-modal);
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	z-index: 15;
	transform-origin: top left;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.95) translateY(-4px);
	transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 150ms;
}
.dropdown-menu.open {
	opacity: 1;
	visibility: visible;
	transform: scale(1) translateY(0);
}

.menu-item {
	display: block;
	width: 100%;
	text-align: right;
	padding: 8px 10px;
	border: none;
	background: transparent;
	color: var(--ink);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 500;
	border-radius: var(--radius-s);
	cursor: var(--cursor-paw);
	white-space: nowrap;
}
.menu-item:hover { background: var(--surface); }
.menu-item.danger { color: var(--red); }
.menu-item.danger:hover { background: var(--red-bg); }

.btn {
	border: 1px solid var(--border-strong);
	background: var(--surface);
	color: var(--ink);
	border-radius: var(--radius-s);
	padding: 6px 11px;
	font-size: 12.5px;
	font-weight: 500;
	font-family: inherit;
	cursor: var(--cursor-paw);
	white-space: nowrap;
	transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out), transform 100ms var(--ease-out);
}
.btn:hover { background: var(--surface-2); border-color: var(--border-strong); transform: translateY(-1px); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn-primary {
	background: var(--accent);
	color: var(--accent-ink);
	border-color: var(--accent);
	font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.06); }

.btn-whatsapp {
	background: var(--whatsapp);
	color: var(--whatsapp-ink);
	border-color: var(--whatsapp);
	font-weight: 600;
}
.btn-whatsapp:hover { filter: brightness(1.05); }

.btn-danger {
	color: var(--red);
	border-color: var(--red);
	background: var(--surface);
}
.btn-danger:hover { background: var(--red-bg); }

.empty-hint {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--ink-muted);
	font-size: 0.9rem;
	padding: 26px 2px 18px;
	text-align: center;
	overflow: hidden;
}
.empty-hint.hidden { display: none; }
.empty-hint p { margin: 0; }
.empty-illustration { color: var(--border-strong); }

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding-top: 16px;
}
.pagination:empty { padding: 0; }

.pagination-label {
	font-size: 12.5px;
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(20, 16, 13, 0.45);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	z-index: 20;
	animation: backdrop-in 160ms var(--ease-out);
}
.modal-backdrop.hidden { display: none; }

@keyframes backdrop-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.modal {
	background: var(--surface);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-modal);
	padding: 22px;
	width: 100%;
	max-width: 380px;
	max-height: 90vh;
	overflow-y: auto;
	animation: modal-in 180ms var(--ease-out);
}

@keyframes modal-in {
	from { opacity: 0; transform: scale(0.96) translateY(4px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal h3 { font-size: 1rem; font-weight: 700; margin: 0 0 16px; }

.modal-note {
	font-size: 12.5px;
	color: var(--ink-muted);
	margin: -6px 0 14px;
	line-height: 1.5;
}

.field {
	margin-bottom: 14px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.field label { font-size: 12.5px; font-weight: 500; color: var(--ink-secondary); }

.field input,
.field textarea {
	padding: 9px 11px;
	background: var(--surface-2);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-s);
	font-size: 0.9rem;
	font-family: inherit;
	color: var(--ink);
	resize: vertical;
	transition: border-color 120ms var(--ease-out);
}
.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--accent);
}

#history-list .history-row { align-items: center; }
#history-list .hist-bags {
	font-size: 12.5px;
	color: var(--ink-muted);
	white-space: nowrap;
}
.empty-hint.small { padding: 8px 0; font-size: 0.85rem; }

.history-row {
	display: flex;
	gap: 6px;
	margin-bottom: 6px;
}
.history-row input {
	flex: 1;
	padding: 8px 10px;
	background: var(--surface-2);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-s);
	font-size: 0.9rem;
	font-family: inherit;
	color: var(--ink);
}

.field-error {
	color: var(--red);
	font-size: 0.78rem;
	min-height: 1em;
}

.modal-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-start;
	margin-top: 18px;
}

.toast {
	position: fixed;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--ink);
	color: var(--bg);
	padding: 10px 14px 10px 18px;
	border-radius: var(--radius-m);
	font-size: 0.85rem;
	font-weight: 500;
	z-index: 30;
	max-width: 90vw;
	box-shadow: var(--shadow-modal);
	animation: toast-in 200ms var(--ease-out);
}
.toast.error { background: var(--red); color: #fff; }
.toast::before { content: "🐾"; flex: none; }
.toast.error::before { content: "⚠️"; }

.toast-undo {
	flex: none;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: inherit;
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 0.78rem;
	font-weight: 700;
	font-family: inherit;
	cursor: var(--cursor-paw);
}
.toast-undo:hover { background: rgba(255, 255, 255, 0.12); }
.toast.hidden { display: none; }

@keyframes toast-in {
	from { opacity: 0; transform: translate(-50%, 6px); }
	to { opacity: 1; transform: translate(-50%, 0); }
}

.loading-paws {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 48px 0;
	font-size: 30px;
}
.loading-paws span {
	display: inline-block;
	opacity: 1;
	animation: paw-bounce 1s ease-in-out infinite;
}
.loading-paws span:nth-child(2) { animation-delay: 150ms; }
.loading-paws span:nth-child(3) { animation-delay: 300ms; }
@keyframes paw-bounce {
	0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
	40% { transform: translateY(-10px); opacity: 1; }
}

.confetti-piece {
	position: absolute;
	top: 6px;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	animation: confetti-fall 900ms ease-out forwards;
	pointer-events: none;
}
@keyframes confetti-fall {
	0% { transform: translateY(0) rotate(0deg); opacity: 1; }
	100% { transform: translateY(70px) rotate(220deg); opacity: 0; }
}

.daily-progress {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-card);
	padding: 14px 18px;
	margin-bottom: 18px;
}
.daily-progress.hidden { display: none; }
.daily-progress-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
}
.daily-progress-track {
	flex: 1;
	min-width: 60px;
	height: 10px;
	background: var(--surface-2);
	border-radius: 999px;
	overflow: hidden;
}
.daily-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--accent), var(--renew));
	border-radius: 999px;
	transition: width 500ms var(--ease-out);
}
.daily-progress-fill.complete { background: linear-gradient(90deg, var(--green), var(--accent)); }

tr.row-flash td {
	animation: row-flash-cell 1.4s var(--ease-out);
}
@keyframes row-flash-cell {
	0% { box-shadow: inset 0 0 0 9999px rgba(47, 155, 214, 0.28); }
	100% { box-shadow: inset 0 0 0 9999px rgba(47, 155, 214, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.modal-backdrop, .modal, .toast, .btn { animation: none !important; transition: none !important; }
	.loading-paws span, .confetti-piece, tr.row-flash td { animation: none !important; }
	.confetti-piece { display: none; }
}

.removed-results {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--unknown-bg);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	padding: 14px 16px;
	margin-bottom: 16px;
}
.removed-results.hidden { display: none; }

.removed-results-title {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ink-secondary);
	margin: 0;
}

.removed-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-s);
	padding: 10px 12px;
}

.removed-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ink-secondary);
	font-size: 0.82rem;
}

.removed-date { font-variant-numeric: tabular-nums; }

.removed-reason {
	flex-basis: 100%;
	font-size: 0.82rem;
	color: var(--ink-muted);
}

.status-chip--removed {
	color: var(--unknown);
	border-color: var(--unknown);
}

/* Responsive: below 640px, tables become stacked label/value cards */
@media (max-width: 640px) {
	.app-header { padding: 16px 16px 18px; }
	.app-header-brand { order: 1; }
	.app-header-side--end { order: 2; flex: 0 0 100%; justify-content: center; }
	.app-header-side:first-child { order: 3; flex: 0 0 100%; justify-content: center; }
	.brand-mark { width: 60px; height: 60px; }
	.app-header h1 { font-size: 1.4rem; }
	.page-nav { padding: 12px 16px 0; }
	#app { padding: 12px 16px 32px; }
	.nav-tooltip { display: none; }
	.table-section { padding: 14px 14px; border-radius: var(--radius-m); }

	table, thead, tbody, th, td, tr { display: block; }
	thead { display: none; }

	#table-main tbody tr,
	#table-waiting tbody tr,
	#table-lastbag tbody tr {
		border: 1px solid var(--border);
		border-radius: var(--radius-m);
		padding: 10px 12px;
		margin-bottom: 10px;
	}

	td {
		border-bottom: none;
		white-space: normal;
		padding: 4px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 10px;
	}

	td::before {
		content: attr(data-label);
		font-size: 11px;
		font-weight: 600;
		color: var(--ink-muted);
		flex: none;
	}

	td.name-cell {
		display: block;
	}
	td.name-cell::before { display: none; }

	td.actions-cell {
		display: flex;
		justify-content: flex-start;
		padding-top: 8px;
	}
	td.actions-cell::before { display: none; }

	.stat-strip { flex-wrap: wrap; }
	.stat-tile { min-width: calc(50% - 1px); }
}