/**
 * Mtjatlanta admin panel.
 *
 * Layout is a fixed left sidebar plus a sticky top bar, in the style of the
 * usual dashboard templates: light chrome, cards on a grey page, one accent
 * colour. Hand-written — no framework, no build step, so the panel stays a
 * plain server-rendered part of the backend.
 */

/* ---------------------------------------------------------------- tokens */

:root {
	--bg: #f5f6f8;
	--surface: #fff;
	--line: #e6ebf1;
	--line-soft: #eef1f5;

	--ink: #1a3353;
	--ink-soft: #455560;
	--muted: #72849a;

	--primary: #3e79f7;
	--primary-dark: #2f63d4;
	--primary-tint: #eaf0fe;

	--ok: #04d182;
	--ok-tint: #e5faf3;
	--danger: #ff6b72;
	--danger-tint: #ffeff0;
	--warn: #ffc542;
	--warn-tint: #fff8e8;

	--radius: 10px;
	--radius-sm: 7px;
	--shadow: 0 1px 4px rgb(0 0 0 / 6%);
	--shadow-lift: 0 6px 20px rgb(26 51 83 / 12%);

	--sidebar-w: 248px;
	--topbar-h: 64px;
}

/* ------------------------------------------------------------------ base */

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a:hover {
	color: var(--primary-dark);
}

h1,
h2,
h3 {
	margin: 0;
	color: var(--ink);
	font-weight: 600;
	line-height: 1.3;
}

h1 {
	font-size: 20px;
}

h2 {
	font-size: 16px;
}

code {
	background: var(--line-soft);
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 12px;
	color: var(--ink-soft);
}

.muted {
	color: var(--muted);
}

.req {
	color: var(--danger);
}

/* --------------------------------------------------------------- sidebar */

.sidebar {
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 40;
	width: var(--sidebar-w);
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border-right: 1px solid var(--line);
}

.sidebar-brand {
	display: flex;
	align-items: center;
	height: var(--topbar-h);
	padding: 0 24px;
	flex: 0 0 auto;
	color: var(--ink);
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -0.6px;
}

.sidebar-brand:hover {
	color: var(--ink);
}

.sidebar-nav {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 18px 0 24px;
}

.nav-section {
	display: block;
	padding: 20px 24px 8px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

.nav-section:first-child {
	padding-top: 0;
}

.nav-item {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 44px;
	padding: 0 24px;
	color: var(--ink-soft);
	font-size: 14px;
}

.nav-item svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	opacity: 0.8;
}

.nav-item:hover {
	background: var(--line-soft);
	color: var(--ink);
}

.nav-item.active {
	background: var(--primary-tint);
	color: var(--primary);
	font-weight: 500;
}

.nav-item.active svg {
	opacity: 1;
}

/* Off-canvas on small screens */
.sidebar-scrim {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 35;
	background: rgb(26 51 83 / 40%);
}

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

.app {
	margin-left: var(--sidebar-w);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 14px;
	height: var(--topbar-h);
	flex: 0 0 auto;
	padding: 0 24px;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

/* Search field in the top bar — the icon sits inside the box */
.topsearch {
	position: relative;
	flex: 0 1 300px;
	margin: 0;
}

.topsearch svg {
	position: absolute;
	top: 50%;
	left: 12px;
	width: 15px;
	height: 15px;
	margin-top: -7.5px;
	color: var(--muted);
	pointer-events: none;
}

/* Typed with [type] so it outweighs the generic input rule further down,
   which would otherwise reset the left padding and put the text under the icon */
.topsearch input[type="search"] {
	width: 100%;
	padding: 8px 12px 8px 34px;
	border-radius: var(--radius-sm);
}

.topbar-right {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 0 auto;
}

.topbar-right form {
	display: flex;
	margin: 0;
}

.topuser {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-left: 12px;
	margin-left: 6px;
	border-left: 1px solid var(--line);
}

.avatar {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--primary-tint);
	color: var(--primary);
	font-size: 14px;
	font-weight: 600;
}

.topuser-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.topuser-text strong {
	font-size: 13.5px;
	font-weight: 600;
}

.topuser-text em {
	font-style: normal;
	font-size: 12px;
	color: var(--muted);
}

.icon-btn {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--ink-soft);
	cursor: pointer;
}

.icon-btn svg {
	width: 19px;
	height: 19px;
}

.icon-btn:hover {
	background: var(--line-soft);
	color: var(--ink);
}

.sidebar-toggle {
	display: none;
}

.foot {
	flex: 0 0 auto;
	padding: 18px 24px 26px;
	color: var(--muted);
	font-size: 12px;
	text-align: center;
}

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

.page {
	flex: 1 1 auto;
	width: 100%;
	max-width: 1180px;
	padding: 24px;
}

.page-wide {
	max-width: none;
}

.page-narrow {
	max-width: 760px;
}

.page-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.page-head p {
	margin: 2px 0 0;
	font-size: 13px;
}

/* A form page's heading, with a back arrow to its list */
.head-back {
	display: flex;
	align-items: center;
	gap: 12px;
}

.back-btn {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--ink-soft);
}

.back-btn svg {
	width: 18px;
	height: 18px;
}

.back-btn:hover {
	border-color: var(--primary);
	background: var(--primary-tint);
	color: var(--primary);
}

.section-heading {
	margin: 28px 0 12px;
	font-size: 15px;
}

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

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

.card > h2 {
	margin-bottom: 14px;
}

/* A card heading with an action next to it */
.card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.card-head h2 {
	margin: 0;
}

.empty {
	background: var(--surface);
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	padding: 44px 20px;
	text-align: center;
	color: var(--muted);
}

.empty p {
	margin: 0 0 14px;
}

/* ------------------------------------------------------------- dashboard */

/* Two columns: the wide side carries the numbers and the chart, the narrow
   side the gauge and the ranking. They scroll independently of each other. */
.dash {
	display: grid;
	grid-template-columns: 3fr 1fr;
	gap: 20px;
}

/* `auto 1fr` lets the chart card take whatever height is left over */
.dash-main {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 20px;
}

.dash-side {
	display: grid;
	align-content: start;
	gap: 20px;
}

.dash-bottom {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 20px;
	align-items: start;
	margin-top: 20px;
}

.metric-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* Inside the dashboard grids the gap does the spacing, not the card margin */
.dash .card,
.dash-bottom .card {
	margin-bottom: 0;
}

.metric-title {
	margin-bottom: 10px;
	font-size: 15px;
}

.metric-value {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.5px;
}

.delta {
	font-size: 14px;
	font-weight: 600;
}

.delta.up {
	color: var(--ok);
}

.delta.down {
	color: var(--danger);
}

.metric-note {
	margin: 8px 0 0;
	color: var(--muted);
	font-size: 13px;
}

/* ----- column chart (plain elements, so the labels stay crisp) ----- */

/* The chart card fills whatever height the row ends up with, so the two
   dashboard columns finish level instead of leaving a gap under the chart. */
.chart-card {
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
}

.bars {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	flex: 1 1 auto;
	min-height: 260px;
	/* Capped so a tall side column cannot stretch the chart out of proportion */
	max-height: 420px;
	padding-top: 8px;
}

.bar-col {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 0;
	height: 100%;
	color: var(--ink);
}

.bar-track {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
}

/* Height is set inline as a percentage of the tallest bar. The label sits above
   the fill inside this box, so it tracks the top of the bar. */
.bar-stack {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	max-width: 56px;
}

.bar-value {
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-soft);
	white-space: nowrap;
}

.bar-fill {
	display: block;
	flex: 1 1 auto;
	border-radius: 6px 6px 0 0;
	background: linear-gradient(180deg, var(--primary) 0%, #7aa4fa 100%);
	transition: opacity 0.15s;
}

.bar-col:hover .bar-fill {
	opacity: 0.8;
}

.bar-label {
	width: 100%;
	overflow: hidden;
	color: var(--muted);
	font-size: 12px;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ----- gauge ----- */

.gauge-card {
	text-align: center;
}

.gauge-card > h2 {
	margin-bottom: 6px;
}

.gauge {
	display: block;
	width: 100%;
	max-width: 190px;
	margin: 0 auto;
	/* Rotate so the 270° arc opens at the bottom rather than the right */
	transform: rotate(135deg);
}

.gauge circle {
	fill: none;
	stroke-width: 11;
	stroke-linecap: round;
}

.gauge-track {
	stroke: var(--line-soft);
}

.gauge-fill {
	stroke: var(--primary);
}

.gauge-text {
	/* Undo the rotation on the svg so the number reads upright */
	transform: rotate(-135deg);
	transform-origin: 70px 70px;
	fill: var(--ink);
	font-size: 26px;
	font-weight: 700;
}

.gauge-card > p {
	margin: 4px 0 18px;
	font-size: 13px;
}

/* ----- ranked bar list ----- */

.rank {
	display: grid;
	gap: 16px;
}

.rank-head {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
}

.rank-head span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rank-track {
	display: block;
	height: 6px;
	margin: 6px 0 3px;
	border-radius: 3px;
	background: var(--line-soft);
}

.rank-fill {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: var(--primary);
}

.rank-row small {
	font-size: 11.5px;
}

/* ----- compact list ----- */

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

.mini-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line-soft);
}

.mini-list li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.mini-list strong {
	display: block;
	font-size: 13.5px;
	font-weight: 500;
}

.mini-list em {
	font-style: normal;
	font-size: 12px;
	color: var(--muted);
}

/* ---------------------------------------------------------------- tables */

/* A wide table scrolls inside its own box rather than pushing the page sideways */
.table-scroll {
	overflow-x: auto;
	border-radius: var(--radius);
}

.table {
	width: 100%;
	min-width: 620px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

/* A table that already sits inside a card brings no chrome of its own */
.table-flat {
	min-width: 420px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.table-flat td {
	padding-left: 0;
	padding-right: 0;
}

.table th,
.table td {
	padding: 12px 16px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--line-soft);
}

.table th {
	background: #fafbfc;
	color: var(--muted);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	white-space: nowrap;
}

.table tbody tr:last-child td {
	border-bottom: 0;
}

.table tbody tr:hover td {
	background: #fafbfc;
}

.table .row-off td {
	background: #fcfcfd;
	color: var(--muted);
}

.col-no {
	width: 1%;
	white-space: nowrap;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.col-cats {
	max-width: 240px;
	font-size: 13px;
}

.col-thumb {
	width: 56px;
}

/* The product photos are JPGs with a white background baked in, so setting a
   background colour behind them shows nothing — the image covers it.
   `mix-blend-mode: multiply` fixes that: white multiplied by the tint gives the
   tint, while the jewellery itself stays as it is. The colour has to live on
   this wrapper, because multiply blends an element with what is *behind* it. */
.thumb {
	display: block;
	width: 40px;
	height: 40px;
	overflow: hidden;
	background: var(--line-soft);
	border-radius: var(--radius-sm);
}

.thumb-lg {
	width: 90px;
	height: 90px;
}

.thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.no-img {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--line-soft);
	border-radius: var(--radius-sm);
	color: var(--muted);
}

.col-title a {
	font-weight: 500;
	color: var(--ink);
}

.col-title a:hover {
	color: var(--primary);
}

.col-price {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.col-url {
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--muted);
	font-size: 12.5px;
}

.col-actions {
	width: 1%;
	white-space: nowrap;
}

.col-actions form {
	display: inline;
}

/* The action cell holds several inline forms — keep them apart */
.col-actions > * + * {
	margin-left: 6px;
}

.table td form {
	display: inline;
	margin: 0;
}

/* Nested category rows */
.indent {
	color: var(--muted);
}

.tree-line {
	color: var(--line);
	user-select: none;
}

/* --------------------------------------------------------------- buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--ink-soft);
	font: inherit;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn:hover {
	border-color: #d3dbe5;
	background: #fafbfc;
	color: var(--ink);
}

.btn-primary {
	border-color: var(--primary);
	background: var(--primary);
	color: #fff;
}

.btn-primary:hover {
	border-color: var(--primary-dark);
	background: var(--primary-dark);
	color: #fff;
}

.btn-danger {
	border-color: transparent;
	background: var(--danger-tint);
	color: var(--danger);
}

.btn-danger:hover {
	background: var(--danger);
	color: #fff;
}

.btn-ghost {
	border-color: transparent;
	background: transparent;
	color: var(--muted);
}

.btn-ghost:hover {
	background: var(--line-soft);
	color: var(--ink);
}

.btn-sm {
	padding: 5px 11px;
	font-size: 12.5px;
}

.btn-block {
	width: 100%;
}

/* Square button for a single glyph — the menu reorder arrows */
.btn-icon {
	width: 30px;
	padding: 0;
	height: 30px;
	font-size: 11px;
	line-height: 1;
}

/* ------------------------------------------------------------- pills etc */

.pill {
	display: inline-block;
	padding: 3px 11px;
	border: 0;
	border-radius: 20px;
	font: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.6;
	cursor: pointer;
}

.pill-on {
	background: var(--ok-tint);
	color: #06a869;
}

.pill-off {
	background: var(--line-soft);
	color: var(--muted);
}

.pill-star {
	background: var(--warn-tint);
	color: #d99a06;
}

.badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--line-soft);
	color: var(--muted);
	font-size: 11px;
	font-weight: 500;
}

/* Menu item types — a colour each, so the tree can be read at a glance */
.badge-link {
	background: var(--primary-tint);
	color: var(--primary);
}

.badge-mega_title {
	background: var(--ok-tint);
	color: #06a869;
}

.badge-banner {
	background: var(--warn-tint);
	color: #d99a06;
}

.swatch {
	display: inline-block;
	width: 18px;
	height: 18px;
	vertical-align: -4px;
	margin-right: 6px;
	border: 1px solid var(--line);
	border-radius: 50%;
}

/* --------------------------------------------------------------- alerts */

.alert {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 12px 16px;
	margin-bottom: 20px;
	border-radius: var(--radius-sm);
	border-left: 3px solid;
}

.alert-ok {
	background: var(--ok-tint);
	border-color: var(--ok);
	color: #06865a;
}

.alert-err {
	background: var(--danger-tint);
	border-color: var(--danger);
	color: #d2454c;
}

.alert-warn {
	background: var(--warn-tint);
	border-color: var(--warn);
	color: #96700a;
}

.alert a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

/* ---------------------------------------------------------------- forms */

.field {
	margin-bottom: 16px;
}

.field > label,
.login-card label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-soft);
}

/* Every text-like input is listed by name on purpose.
   `input:not([type="checkbox"]):not([type="file"])...` would cover new types
   automatically, but each `:not()` raises the specificity — the rule would then
   outweigh the targeted ones further down (`.topsearch input[type="search"]`,
   `.input-icon input[type="password"]`) and undo their padding.
   So: adding a new input type to a form means adding it here too. */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus,
select:focus,
textarea:focus {
	outline: 0;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-tint);
}

textarea {
	min-height: 110px;
	resize: vertical;
}

.field small {
	display: block;
	margin-top: 5px;
	color: var(--muted);
	font-size: 12px;
}

.row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.row-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.row-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

/* A multi-select is a list box, not a dropdown — give the rows room to breathe */
select[multiple] {
	padding: 6px;
	height: auto;
}

select[multiple] option {
	padding: 5px 8px;
	border-radius: 4px;
}

.field-check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-size: 13px;
	cursor: pointer;
}

.field-check input {
	width: auto;
	margin: 0;
	accent-color: var(--primary);
}

/* Upload field: the existing image, then the file picker under it */
.image-current {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px;
}

.image-field input[type="file"] {
	width: auto;
	max-width: 100%;
	padding: 7px 10px;
	border: 1px dashed var(--line);
	background: #fafbfc;
	font-size: 13px;
	cursor: pointer;
}

.card-title {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
}

.check-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	cursor: pointer;
}

.check-item input {
	width: auto;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--primary);
}

.check-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 4px 16px;
	max-height: 260px;
	overflow-y: auto;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: #fafbfc;
}

.form-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding-top: 18px;
	margin-top: 4px;
	border-top: 1px solid var(--line-soft);
}

.form-actions .spacer {
	flex: 1 1 auto;
}

.advanced {
	margin-bottom: 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow);
}

.advanced > summary {
	padding: 14px 20px;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.advanced > summary::-webkit-details-marker {
	display: none;
}

.advanced > summary::before {
	content: "▸ ";
	color: var(--muted);
}

.advanced[open] > summary::before {
	content: "▾ ";
}

.advanced[open] > summary {
	border-bottom: 1px solid var(--line-soft);
}

.advanced > *:not(summary) {
	padding: 0 20px;
}

.advanced > *:last-child {
	padding-bottom: 18px;
}

.legend {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
}

/* ------------------------------------------------------------- messages */

.nav-badge {
	margin-left: auto;
	padding: 1px 7px;
	border-radius: 10px;
	background: var(--danger);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
}

.enquiry-list {
	display: grid;
	gap: 16px;
}

.enquiry {
	margin-bottom: 0;
}

/* Unread stands out with a bar down the side rather than a different
   background — the card stays readable either way */
.enquiry--unread {
	border-left: 3px solid var(--primary);
}

.enquiry-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.enquiry-name {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 4px;
	font-size: 15px;
}

.enquiry-meta {
	margin: 0;
	font-size: 12.5px;
}

.enquiry-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.enquiry-actions form {
	margin: 0;
}

.enquiry-message {
	margin: 0;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	background: #fafbfc;
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.7;
	/* The message is typed in a textarea — keep the line breaks it was written with */
	white-space: pre-wrap;
}

/* What was already sent back */
.enquiry-reply {
	margin-top: 12px;
	padding: 12px 16px;
	border-left: 3px solid var(--ok);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: var(--ok-tint);
}

.enquiry-reply-head {
	margin: 0 0 6px;
	color: #06865a;
	font-size: 12px;
	font-weight: 600;
}

.enquiry-reply-body {
	margin: 0;
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.7;
	white-space: pre-wrap;
}

.enquiry-replybox {
	margin-top: 12px;
}

.enquiry-replybox > summary {
	display: inline-block;
	padding: 5px 11px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink-soft);
	font-size: 12.5px;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.enquiry-replybox > summary::-webkit-details-marker {
	display: none;
}

.enquiry-replybox > summary:hover {
	border-color: var(--primary);
	color: var(--primary);
}

.enquiry-replybox form {
	margin-top: 12px;
}

/* --------------------------------------------------------------- orders */

.order-totals {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line-soft);
	font-size: 14px;
}

.order-totals > div {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 5px 0;
	color: var(--muted);
}

.order-total {
	margin-top: 6px;
	padding-top: 10px !important;
	border-top: 1px solid var(--line-soft);
	font-size: 16px;
}

.order-total strong {
	color: var(--ink);
}

.order-address {
	font-style: normal;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--ink-soft);
}

/* ---------------------------------------------------------------- notes */

/* Standing explanation under a table — deliberately quieter than an .alert,
   which is reserved for "something just happened". */
.note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 20px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--muted);
	font-size: 13px;
	line-height: 1.55;
}

.note svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--primary);
}

.note strong {
	color: var(--ink-soft);
	font-weight: 600;
}

/* --------------------------------------------------------------- toolbar */

.toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 14px 16px;
	margin-bottom: 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.toolbar input[type="search"] {
	width: auto;
	flex: 0 1 340px;
}

.toolbar-select {
	width: auto;
	flex: 0 1 240px;
}

/* An active filter, with an × to drop it */
.filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 8px 5px 12px;
	border-radius: 20px;
	background: var(--primary-tint);
	color: var(--primary);
	font-size: 13px;
}

.filter-chip a {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	color: inherit;
	font-size: 15px;
	line-height: 1;
}

.filter-chip a:hover {
	background: var(--primary);
	color: #fff;
}

/* A row that is only present to give a search hit its parent */
.row-context td {
	opacity: 0.55;
}

/* ----------------------------------------------------------------- tabs */

.tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--line);
}

.tab {
	padding: 10px 16px;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--muted);
	font-weight: 500;
}

.tab:hover {
	color: var(--ink);
}

.tab.active {
	border-bottom-color: var(--primary);
	color: var(--primary);
}

/* --------------------------------------------------------------- pager */

.pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 20px;
}

.pager-gap {
	color: var(--muted);
}


/* ---------------------------------------------------------------- login */

/* Blue field with soft organic shapes. The shapes are an inline SVG rather than
   an image file, so the panel still ships as just CSS + EJS. They are white at
   low opacity, which keeps them in key with whatever --primary is set to. */
.login-wrap {
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding: 24px;
	background-color: var(--primary);
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'><path fill='%23ffffff' fill-opacity='.08' d='M-40 0C180 90 300 250 250 420 200 590 20 640 60 900H-40Z'/><path fill='%23ffffff' fill-opacity='.07' d='M1030 0c150 160 120 380 410 430V0Z'/><path fill='%23ffffff' fill-opacity='.10' d='M1440 600c-260-20-460 90-540 300h540Z'/><path fill='%23ffffff' fill-opacity='.06' d='M360 900c40-200 240-270 440-210 160 48 240 160 260 210Z'/></svg>");
	background-size: cover;
	background-position: center;
}

.login-card {
	width: 100%;
	max-width: 400px;
	padding: 44px 40px 40px;
	background: var(--surface);
	border-radius: var(--radius);
	box-shadow: 0 10px 40px rgb(26 51 83 / 18%);
}

.login-card h1 {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.4px;
	text-align: center;
}

.login-sub {
	margin: 8px 0 30px;
	color: var(--muted);
	font-size: 13px;
	text-align: center;
}

/* A magnifier/lock sitting inside the field, as the reference has it */
.input-icon {
	position: relative;
}

.input-icon svg {
	position: absolute;
	top: 50%;
	left: 12px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	color: var(--muted);
	pointer-events: none;
}

.input-icon input[type="password"] {
	padding-left: 36px;
}

.login-card .btn {
	margin-top: 22px;
	padding: 11px 16px;
	font-weight: 600;
}

.hint {
	margin: 22px 0 0;
	color: var(--muted);
	font-size: 12px;
	text-align: center;
}

/* ---------------------------------------------------------------- error */

/* The error page borrows the login layout, but not its blue takeover — it shows
   up mid-task, where a full-screen colour change would be jarring. */
.error-wrap {
	background-color: var(--bg);
	background-image: none;
}

.error-card {
	max-width: 480px;
	text-align: center;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}

.error-code {
	display: block;
	font-size: 46px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--ink);
}

.error-card > p.muted {
	margin: 6px 0 22px;
}

.error-card .advanced {
	margin-bottom: 22px;
	text-align: left;
	box-shadow: none;
}

.error-stack {
	margin: 0;
	overflow: auto;
	font-size: 12px;
	color: var(--muted);
}

/* ---------------------------------------------------------- small screens */

@media (max-width: 1200px) {
	.row-4 {
		grid-template-columns: 1fr 1fr;
	}

	.dash,
	.dash-bottom {
		grid-template-columns: 1fr;
	}

	.dash-side {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 900px) {
	.metric-row,
	.dash-side {
		grid-template-columns: 1fr;
	}

	.topsearch {
		flex: 1 1 auto;
	}

	.topuser-text {
		display: none;
	}

	.sidebar {
		transform: translateX(-100%);
		transition: transform 0.2s ease;
	}

	body.nav-open .sidebar {
		transform: none;
		box-shadow: var(--shadow-lift);
	}

	body.nav-open .sidebar-scrim {
		display: block;
	}

	.app {
		margin-left: 0;
	}

	.sidebar-toggle {
		display: grid;
	}

	.page {
		padding: 16px;
	}

	.row-2,
	.row-3,
	.row-4 {
		grid-template-columns: 1fr;
	}
}