/* ==========================================================================
   MyChoice Bookkeeping — design system
   Warm light background, white cards, MyChoice red accents, charcoal text.
   Matches the approved page drafts.
   ========================================================================== */

:root {
	--mcb-bg: #fbf7f4;
	--mcb-bg-tint-1: rgba(229, 27, 35, 0.05);
	--mcb-bg-tint-2: rgba(255, 170, 120, 0.10);

	--mcb-surface: #ffffff;
	--mcb-surface-2: #fdfbfa;
	--mcb-sidebar: #fdfaf8;

	--mcb-border: #efe7e2;
	--mcb-border-strong: #e4d9d3;

	--mcb-text: #1a1a1a;
	--mcb-text-2: #6b625d;
	--mcb-text-3: #9a908a;

	--mcb-red: #e51b23;
	--mcb-red-dark: #b31319;
	--mcb-green: #16a34a;
	--mcb-amber: #f59e0b;
	--mcb-blue: #2563eb;
	--mcb-purple: #8b5cf6;
	--mcb-gray: #94a3b8;

	--mcb-radius: 16px;
	--mcb-radius-sm: 10px;
	--mcb-shadow: 0 1px 3px rgba(26, 26, 26, 0.04), 0 6px 20px rgba(26, 26, 26, 0.05);
	--mcb-shadow-lift: 0 2px 6px rgba(26, 26, 26, 0.06), 0 12px 32px rgba(26, 26, 26, 0.08);

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

/* ---------- Layout ---------- */

.mcb-app {
	display: flex;
	min-height: 100vh;
	background-color: var(--mcb-bg);
	background-image:
		radial-gradient(circle at 8% 6%, var(--mcb-bg-tint-1), transparent 42%),
		radial-gradient(circle at 96% 92%, var(--mcb-bg-tint-2), transparent 45%);
	font-family: var(--mcb-font);
	color: var(--mcb-text);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

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

.mcb-main {
	flex: 1;
	min-width: 0;
	padding: 22px 26px 40px;
}

/* ---------- Sidebar ---------- */

.mcb-sidebar {
	width: 244px;
	flex: 0 0 244px;
	display: flex;
	flex-direction: column;
	background: var(--mcb-sidebar);
	border-right: 1px solid var(--mcb-border);
	border-radius: 0 22px 22px 0;
	padding: 20px 14px 16px;
	position: sticky;
	top: 0;
	align-self: flex-start;
	height: 100vh;
}

.mcb-sidebar__logo {
	padding: 4px 8px 22px;
	text-align: center;
}

.mcb-sidebar__logo img {
	max-width: 150px;
	height: auto;
	display: inline-block;
}

.mcb-nav {
	display: flex;
	flex-direction: column;
	gap: 3px;
	overflow-y: auto;
	flex: 1;
}

.mcb-nav__item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 13px;
	border-radius: 11px;
	color: var(--mcb-text-2);
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 500;
	transition: background 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.mcb-nav__item:hover {
	background: rgba(229, 27, 35, 0.06);
	color: var(--mcb-red-dark);
}

.mcb-nav__item.is-active {
	background: linear-gradient(135deg, var(--mcb-red), var(--mcb-red-dark));
	color: #fff;
	box-shadow: 0 4px 12px rgba(229, 27, 35, 0.28);
}

.mcb-nav__item.is-active:hover {
	color: #fff;
}

.mcb-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

/* Branch switcher pinned to the sidebar bottom */
.mcb-branch-switch {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding: 11px 12px;
	background: var(--mcb-surface);
	border: 1px solid var(--mcb-border);
	border-radius: 13px;
	box-shadow: var(--mcb-shadow);
}

.mcb-branch-switch__icon {
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: rgba(229, 27, 35, 0.09);
	color: var(--mcb-red);
}

.mcb-branch-switch__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.mcb-branch-switch__biz {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mcb-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mcb-branch-switch__branch {
	font-size: 11.5px;
	color: var(--mcb-text-3);
}

.mcb-branch-switch select {
	border: 0;
	background: transparent;
	font-size: 11.5px;
	color: var(--mcb-text-3);
	padding: 0;
	max-width: 130px;
	cursor: pointer;
}

/* ---------- Topbar ---------- */

.mcb-topbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.mcb-topbar__title {
	margin: 0;
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--mcb-text);
	padding: 0;
}

.mcb-topbar__subtitle {
	margin: 3px 0 0;
	font-size: 13px;
	color: var(--mcb-text-2);
}

.mcb-topbar__right {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.mcb-user {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 10px 5px 5px;
	background: var(--mcb-surface);
	border: 1px solid var(--mcb-border);
	border-radius: 30px;
	box-shadow: var(--mcb-shadow);
}

.mcb-user__avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #4b5563;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.mcb-user__meta {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.mcb-user__name {
	font-size: 13px;
	font-weight: 600;
}

.mcb-user__role {
	font-size: 11px;
	color: var(--mcb-text-3);
}

.mcb-user__logout {
	color: var(--mcb-text-3);
	display: grid;
	place-items: center;
	padding: 4px;
	border-radius: 8px;
}

.mcb-user__logout:hover {
	color: var(--mcb-red);
	background: rgba(229, 27, 35, 0.07);
}

/* ---------- Cards ---------- */

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

.mcb-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.mcb-card__title {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	font-weight: 650;
	margin: 0;
}

.mcb-card__title .mcb-badge-icon {
	width: 28px;
	height: 28px;
	border-radius: 8px;
}

/* Filter strip above the content */
.mcb-filters {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	flex-wrap: wrap;
	background: var(--mcb-surface);
	border: 1px solid var(--mcb-border);
	border-radius: var(--mcb-radius);
	box-shadow: var(--mcb-shadow);
	padding: 14px 18px;
	margin-bottom: 18px;
}

.mcb-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.mcb-field__label {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--mcb-text-2);
	letter-spacing: 0.01em;
}

.mcb-field input[type="text"],
.mcb-field input[type="number"],
.mcb-field input[type="date"],
.mcb-field input[type="time"],
.mcb-field select,
.mcb-field textarea {
	font-family: inherit;
	font-size: 13.5px;
	color: var(--mcb-text);
	background: var(--mcb-surface-2);
	border: 1px solid var(--mcb-border-strong);
	border-radius: var(--mcb-radius-sm);
	padding: 9px 12px;
	min-height: 40px;
	box-shadow: none;
	max-width: 100%;
}

.mcb-field input:focus,
.mcb-field select:focus,
.mcb-field textarea:focus {
	outline: none;
	border-color: var(--mcb-red);
	box-shadow: 0 0 0 3px rgba(229, 27, 35, 0.12);
}

.mcb-field input[readonly],
.mcb-field input:disabled,
.mcb-field select:disabled {
	background: #f4efec;
	color: var(--mcb-text-2);
	cursor: not-allowed;
}

.mcb-field--grow { flex: 1 1 180px; }

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

.mcb-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
	margin-bottom: 18px;
}

.mcb-kpi {
	background: var(--mcb-surface);
	border: 1px solid var(--mcb-border);
	border-radius: var(--mcb-radius);
	box-shadow: var(--mcb-shadow);
	padding: 16px 17px;
	display: flex;
	align-items: flex-start;
	gap: 13px;
}

.mcb-kpi__icon {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
}

.mcb-kpi__icon .mcb-icon { width: 20px; height: 20px; }

.mcb-kpi__icon--red    { background: linear-gradient(135deg, #ef4444, #dc2626); }
.mcb-kpi__icon--green  { background: linear-gradient(135deg, #22c55e, #16a34a); }
.mcb-kpi__icon--amber  { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.mcb-kpi__icon--purple { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.mcb-kpi__icon--blue   { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.mcb-kpi__icon--gray   { background: linear-gradient(135deg, #a8b3c1, #8794a3); }

.mcb-kpi__body { min-width: 0; }

.mcb-kpi__label {
	font-size: 12.5px;
	color: var(--mcb-text-2);
	font-weight: 500;
	margin-bottom: 3px;
}

.mcb-kpi__value {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--mcb-text);
}

.mcb-kpi__delta {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	font-size: 11.5px;
	color: var(--mcb-text-3);
}

.mcb-delta {
	font-weight: 650;
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.mcb-delta--up { color: var(--mcb-green); }
.mcb-delta--down { color: var(--mcb-red); }

/* ---------- Tables ---------- */

.mcb-table-wrap {
	overflow-x: auto;
	margin: 0 -4px;
}

.mcb-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.mcb-table th {
	text-align: left;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--mcb-text-3);
	padding: 9px 12px;
	border-bottom: 1px solid var(--mcb-border);
	white-space: nowrap;
}

.mcb-table td {
	padding: 12px;
	border-bottom: 1px solid #f6f1ee;
	vertical-align: middle;
	color: var(--mcb-text);
}

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

.mcb-table tbody tr:hover { background: #fdf8f6; }

.mcb-table__ticket {
	color: var(--mcb-red);
	font-weight: 650;
	text-decoration: none;
}

.mcb-table__ticket:hover { text-decoration: underline; }

.mcb-table__sub {
	display: block;
	font-size: 11.5px;
	color: var(--mcb-text-3);
}

.mcb-table__num { text-align: right; font-variant-numeric: tabular-nums; }

.mcb-empty {
	text-align: center;
	padding: 38px 16px;
	color: var(--mcb-text-3);
	font-size: 13.5px;
}

/* ---------- Pills / badges ---------- */

.mcb-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
}

.mcb-pill--green  { background: #e8f8ee; color: #15803d; }
.mcb-pill--amber  { background: #fef3e2; color: #b45309; }
.mcb-pill--blue   { background: #e8f0fe; color: #1d4ed8; }
.mcb-pill--red    { background: #fdeaea; color: #b31319; }
.mcb-pill--gray   { background: #f1f0ef; color: #57534e; }
.mcb-pill--purple { background: #f1ebfe; color: #6d28d9; }

.mcb-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 7px;
}

/* ---------- Buttons ---------- */

.mcb-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	padding: 10px 16px;
	border-radius: 11px;
	border: 1px solid var(--mcb-border-strong);
	background: var(--mcb-surface);
	color: var(--mcb-text);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
	line-height: 1.2;
}

.mcb-btn:hover { background: #faf6f4; box-shadow: var(--mcb-shadow); }
.mcb-btn:active { transform: translateY(1px); }

.mcb-btn--primary {
	background: linear-gradient(135deg, var(--mcb-red), var(--mcb-red-dark));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 4px 14px rgba(229, 27, 35, 0.3);
}

.mcb-btn--primary:hover {
	background: linear-gradient(135deg, #f0242c, #a51116);
	color: #fff;
	box-shadow: 0 6px 18px rgba(229, 27, 35, 0.36);
}

.mcb-btn--ghost { background: transparent; border-color: transparent; color: var(--mcb-text-2); }
.mcb-btn--ghost:hover { background: rgba(229, 27, 35, 0.07); color: var(--mcb-red); box-shadow: none; }

.mcb-btn--sm { padding: 7px 12px; font-size: 12.5px; border-radius: 9px; }

.mcb-btn--danger { color: var(--mcb-red); }
.mcb-btn--danger:hover { background: #fdeaea; }

.mcb-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.mcb-add-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--mcb-red);
	font-size: 12.5px;
	font-weight: 650;
	text-decoration: none;
	cursor: pointer;
	background: none;
	border: 0;
	font-family: inherit;
	padding: 0;
}

.mcb-add-link:hover { text-decoration: underline; }

.mcb-row-actions { display: flex; gap: 3px; justify-content: flex-end; }

.mcb-icon-btn {
	background: none;
	border: 0;
	padding: 5px;
	border-radius: 7px;
	color: var(--mcb-text-3);
	cursor: pointer;
	display: grid;
	place-items: center;
}

.mcb-icon-btn:hover { background: #f4efec; color: var(--mcb-text); }
.mcb-icon-btn--danger:hover { background: #fdeaea; color: var(--mcb-red); }

/* ---------- Grid helpers ---------- */

.mcb-grid { display: grid; gap: 16px; }
.mcb-grid--main-side { grid-template-columns: minmax(0, 1fr) 320px; }
.mcb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mcb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mcb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Fits as many equal columns as the width allows — no orphan card on the
   last row when the number of cards changes. */
.mcb-grid--auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Save button row at the foot of the day form. */
.mcb-saverow {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

/* Quiet explanatory line under a figure or a form. */
.mcb-hint {
	margin: 8px 0 0;
	font-size: 11px;
	line-height: 1.45;
	color: var(--mcb-text-3);
}

.mcb-stack { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Summary panel ---------- */

.mcb-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	font-size: 13.5px;
}

.mcb-summary__row + .mcb-summary__row { border-top: 1px solid #f6f1ee; }

.mcb-summary__label { color: var(--mcb-text-2); }
.mcb-summary__value { font-weight: 650; font-variant-numeric: tabular-nums; }
.mcb-summary__value--red { color: var(--mcb-red); font-size: 16px; }
.mcb-summary__value--green { color: var(--mcb-green); font-size: 16px; }
.mcb-summary__divider { height: 1px; background: var(--mcb-border); margin: 8px 0; }

/* ---------- Charts ---------- */

.mcb-chart { position: relative; height: 240px; }
.mcb-chart--donut { height: 190px; }

.mcb-legend { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }

.mcb-legend__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
}

.mcb-legend__left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mcb-legend__label { color: var(--mcb-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcb-legend__value { color: var(--mcb-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mcb-legend__pct { color: var(--mcb-text-3); font-size: 12px; }

/* ---------- Notices ---------- */

.mcb-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 15px;
	border-radius: 12px;
	font-size: 13.5px;
	margin-bottom: 16px;
}

.mcb-notice--success { background: #e8f8ee; color: #15803d; }
.mcb-notice--error { background: #fdeaea; color: #b31319; }
.mcb-notice--info { background: #e8f0fe; color: #1d4ed8; }
.mcb-notice--warn { background: #fef3e2; color: #b45309; }

/* ---------- Alerts list ---------- */

.mcb-alerts { display: flex; flex-direction: column; gap: 12px; }

.mcb-alert { display: flex; gap: 11px; align-items: flex-start; }

.mcb-alert__icon {
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 9px;
	display: grid;
	place-items: center;
}

.mcb-alert__title { font-size: 13px; font-weight: 650; margin-bottom: 1px; }
.mcb-alert__text { font-size: 12.5px; color: var(--mcb-text-2); }
.mcb-alert__time { font-size: 11px; color: var(--mcb-text-3); white-space: nowrap; margin-left: auto; }

/* ---------- Line-item editor rows ---------- */

.mcb-lineitems { display: flex; flex-direction: column; gap: 0; }

.mcb-lineitem {
	display: grid;
	gap: 10px;
	align-items: end;
	padding: 12px 0;
	border-bottom: 1px solid #f6f1ee;
}

.mcb-lineitem:last-child { border-bottom: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 1200px) {
	.mcb-grid--main-side { grid-template-columns: minmax(0, 1fr); }
	.mcb-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.mcb-sidebar {
		position: fixed;
		z-index: 60;
		left: 0;
		top: 0;
		transform: translateX(-100%);
		transition: transform 0.2s ease;
		box-shadow: var(--mcb-shadow-lift);
	}
	.mcb-app.is-nav-open .mcb-sidebar { transform: translateX(0); }
	.mcb-main { padding: 16px 16px 40px; }
	.mcb-grid--2, .mcb-grid--3, .mcb-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.mcb-nav-toggle { display: inline-flex !important; }
}

@media (min-width: 901px) {
	.mcb-nav-toggle { display: none !important; }
}

@media (max-width: 600px) {
	.mcb-topbar__title { font-size: 21px; }
	.mcb-kpis { grid-template-columns: minmax(0, 1fr); }
	.mcb-filters { padding: 12px 14px; }
	.mcb-field { flex: 1 1 100%; }
}

/* ---------- Print ---------- */

@media print {
	.mcb-sidebar, .mcb-topbar__right, .mcb-btn, .mcb-row-actions, .mcb-filters { display: none !important; }
	.mcb-app { background: #fff; }
	.mcb-card { box-shadow: none; border-color: #ddd; break-inside: avoid; }
}

/* ---------- Inline topbar filters ---------- */

.mcb-inline-filters { display: flex; align-items: center; gap: 8px; }

.mcb-select-inline {
	font-family: inherit;
	font-size: 13px;
	color: var(--mcb-text);
	background: var(--mcb-surface);
	border: 1px solid var(--mcb-border);
	border-radius: 11px;
	padding: 9px 12px;
	min-height: 40px;
	box-shadow: var(--mcb-shadow);
	cursor: pointer;
}

.mcb-grid--dash-charts { grid-template-columns: 1.6fr 1fr 1fr; }

@media (max-width: 1400px) {
	.mcb-grid--dash-charts { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
	.mcb-grid--dash-charts { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Inline add-row forms ---------- */

.mcb-addrow {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--mcb-border-strong);
}

.mcb-addrow .mcb-field input,
.mcb-addrow .mcb-field select { min-width: 110px; }
.mcb-addrow .mcb-field--grow { flex: 1 1 150px; }
.mcb-addrow .mcb-field--grow input { width: 100%; }

/* ---------- Pager ---------- */

.mcb-pager { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }

.mcb-pager__link {
	padding: 6px 11px;
	border-radius: 9px;
	border: 1px solid var(--mcb-border-strong);
	color: var(--mcb-text-2);
	text-decoration: none;
	font-size: 13px;
	background: var(--mcb-surface);
}

.mcb-pager__link.is-active {
	background: var(--mcb-red);
	border-color: var(--mcb-red);
	color: #fff;
	font-weight: 600;
}

/* ---------- Entry form above each log ---------- */

.mcb-entryform {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
	padding: 14px;
	margin-bottom: 16px;
	background: linear-gradient(135deg, rgba(229,27,35,0.035), rgba(255,170,120,0.05));
	border: 1px solid var(--mcb-border);
	border-radius: var(--mcb-radius-sm);
}

.mcb-entryform .mcb-field input,
.mcb-entryform .mcb-field select { min-width: 120px; }
.mcb-entryform .mcb-field--sm input { min-width: 84px; width: 84px; }
.mcb-entryform .mcb-field--grow { flex: 1 1 140px; }
.mcb-entryform .mcb-field--grow input { width: 100%; min-width: 0; }
.mcb-entryform .mcb-btn { min-height: 40px; }

/* ---------- Form grid inside the day card ---------- */

.mcb-formgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 4px;
}

.mcb-formgrid .mcb-field input,
.mcb-formgrid .mcb-field select { width: 100%; }

.mcb-section-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mcb-text-3);
	margin: 18px 0 8px;
	padding-top: 14px;
	border-top: 1px solid var(--mcb-border);
}

@media (max-width: 700px) {
	.mcb-entryform .mcb-field,
	.mcb-entryform .mcb-field--sm { flex: 1 1 100%; }
	.mcb-entryform .mcb-field input,
	.mcb-entryform .mcb-field select,
	.mcb-entryform .mcb-field--sm input { width: 100%; min-width: 0; }
}

/* ==========================================================================
   Compact entry: tabbed logs + single-line entry rows
   ========================================================================== */

.mcb-tabs {
	display: flex;
	gap: 4px;
	padding: 5px;
	background: var(--mcb-surface-2);
	border: 1px solid var(--mcb-border);
	border-radius: 13px;
	margin-bottom: 14px;
	overflow-x: auto;
}

.mcb-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border: 0;
	background: transparent;
	border-radius: 10px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mcb-text-2);
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.mcb-tab:hover { background: rgba(229, 27, 35, 0.06); color: var(--mcb-red-dark); }

.mcb-tab.is-active {
	background: linear-gradient(135deg, var(--mcb-red), var(--mcb-red-dark));
	color: #fff;
	box-shadow: 0 3px 10px rgba(229, 27, 35, 0.25);
}

.mcb-tab__count {
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 20px;
	background: rgba(23, 23, 23, 0.07);
	color: var(--mcb-text-2);
}

.mcb-tab.is-active .mcb-tab__count { background: rgba(255, 255, 255, 0.22); color: #fff; }

.mcb-tabpanel { display: none; }
.mcb-tabpanel.is-active { display: block; }

/* --- single-line entry row --- */

.mcb-entryform {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px;
	padding: 12px;
	margin-bottom: 14px;
	background: linear-gradient(135deg, rgba(229, 27, 35, 0.035), rgba(255, 170, 120, 0.05));
	border: 1px solid var(--mcb-border);
	border-radius: var(--mcb-radius-sm);
}

.mcb-entryform .mcb-field { gap: 3px; }

.mcb-entryform .mcb-field__label {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--mcb-text-3);
}

.mcb-entryform input,
.mcb-entryform select {
	min-height: 36px !important;
	padding: 7px 10px !important;
	font-size: 13px !important;
	background: #fff !important;
}

/* Field widths tuned so the common fields sit on one line */
.mcb-entryform .mcb-w-xs input,
.mcb-entryform .mcb-w-xs select { width: 76px; min-width: 76px; }
.mcb-entryform .mcb-w-sm input,
.mcb-entryform .mcb-w-sm select { width: 108px; min-width: 108px; }
.mcb-entryform .mcb-w-md input,
.mcb-entryform .mcb-w-md select { width: 138px; min-width: 138px; }
.mcb-entryform .mcb-w-flex { flex: 1 1 130px; min-width: 0; }
.mcb-entryform .mcb-w-flex input { width: 100%; min-width: 0; }

.mcb-entryform .mcb-btn { min-height: 36px; padding: 8px 14px; }

/* Secondary fields, revealed by the toggle */
.mcb-entry-more {
	display: none;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px;
	width: 100%;
	padding-top: 10px;
	margin-top: 2px;
	border-top: 1px dashed var(--mcb-border-strong);
}

.mcb-entryform.is-expanded .mcb-entry-more { display: flex; }

.mcb-more-toggle {
	background: none;
	border: 1px solid var(--mcb-border-strong);
	border-radius: 9px;
	min-height: 36px;
	padding: 0 11px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--mcb-text-2);
	cursor: pointer;
}

.mcb-more-toggle:hover { background: #fff; color: var(--mcb-red); }

/* Denser tables so more rows fit without scrolling */
.mcb-tabpanel .mcb-table th { padding: 7px 10px; }
.mcb-tabpanel .mcb-table td { padding: 9px 10px; }

@media (max-width: 780px) {
	.mcb-entryform .mcb-field,
	.mcb-entryform .mcb-w-xs,
	.mcb-entryform .mcb-w-sm,
	.mcb-entryform .mcb-w-md { flex: 1 1 100%; }
	.mcb-entryform input,
	.mcb-entryform select,
	.mcb-entryform .mcb-w-xs input,
	.mcb-entryform .mcb-w-sm input,
	.mcb-entryform .mcb-w-md input,
	.mcb-entryform .mcb-w-xs select,
	.mcb-entryform .mcb-w-sm select,
	.mcb-entryform .mcb-w-md select { width: 100% !important; min-width: 0 !important; }
}

/* ---------- Day header: date / duty person / branch / hours on one line ---------- */

.mcb-dayrow {
	display: grid;
	grid-template-columns: 150px 170px minmax(140px, 1fr) 240px;
	gap: 12px;
	align-items: end;
}

.mcb-dayrow .mcb-field input,
.mcb-dayrow .mcb-field select { width: 100%; }

.mcb-dayrow .mcb-field input[type="time"] { min-width: 0; }

@media (max-width: 900px) {
	.mcb-dayrow { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.mcb-dayrow { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Day record — icon-prefixed inputs, per the approved design
   ========================================================================== */

.mcb-ig {
	display: flex;
	align-items: stretch;
	background: var(--mcb-surface);
	border: 1px solid var(--mcb-border-strong);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mcb-ig:focus-within {
	border-color: var(--mcb-red);
	box-shadow: 0 0 0 3px rgba(229, 27, 35, 0.1);
}

.mcb-ig__icon {
	display: grid;
	place-items: center;
	width: 42px;
	flex: 0 0 42px;
	color: var(--mcb-text-3);
	border-right: 1px solid var(--mcb-border);
	background: var(--mcb-surface-2);
}

.mcb-ig__icon .mcb-icon { width: 17px; height: 17px; }

.mcb-ig input,
.mcb-ig select,
.mcb-ig textarea {
	flex: 1;
	min-width: 0;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 10px 12px !important;
	font-family: inherit;
	font-size: 14px !important;
	color: var(--mcb-text);
	min-height: 44px !important;
	border-radius: 0 !important;
}

.mcb-ig input:focus,
.mcb-ig select:focus { outline: none; box-shadow: none !important; }

.mcb-ig select { cursor: pointer; appearance: auto; }

.mcb-ig--readonly { background: var(--mcb-surface-2); }
.mcb-ig--readonly input { color: var(--mcb-text-2); }

/* Shift range: two times sharing one control */
.mcb-ig--range { align-items: center; }
.mcb-ig--range input[type="time"] { text-align: center; padding: 10px 4px !important; }
.mcb-ig--range .mcb-ig__dash { color: var(--mcb-text-3); padding: 0 2px; flex: 0 0 auto; }

/* Total Entered — the one figure that should stand out */
.mcb-ig--total { border-color: rgba(229, 27, 35, 0.35); background: rgba(229, 27, 35, 0.04); }
.mcb-ig--total .mcb-ig__icon { background: rgba(229, 27, 35, 0.07); color: var(--mcb-red); border-right-color: rgba(229, 27, 35, 0.18); }
.mcb-ig--total input { color: var(--mcb-red) !important; font-weight: 700; font-size: 15px !important; }
.mcb-field__label--total { color: var(--mcb-red); }

/* Grids for the day card */
.mcb-daygrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

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

@media (max-width: 1100px) {
	.mcb-daygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.mcb-daygrid,
	.mcb-paygrid { grid-template-columns: minmax(0, 1fr); }
}

/* Notes with a character counter */
.mcb-notes textarea {
	width: 100%;
	min-height: 96px;
	resize: vertical;
	border: 1px solid var(--mcb-border-strong);
	border-radius: 12px;
	background: var(--mcb-surface-2);
	padding: 12px 14px;
	font-family: inherit;
	font-size: 14px;
	color: var(--mcb-text);
}

.mcb-notes textarea:focus {
	outline: none;
	border-color: var(--mcb-red);
	box-shadow: 0 0 0 3px rgba(229, 27, 35, 0.1);
	background: var(--mcb-surface);
}

.mcb-charcount {
	display: block;
	text-align: right;
	font-size: 11.5px;
	color: var(--mcb-text-3);
	margin-top: 6px;
}

/* Card titles get a soft icon chip like the design */
.mcb-card__title .mcb-icon { color: var(--mcb-red); }

/* ==========================================================================
   Branded login page
   ========================================================================== */

.mcb-login-body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--mcb-font);
	color: var(--mcb-text);
	background-color: var(--mcb-bg);
	background-image:
		radial-gradient(circle at 10% 8%, rgba(229, 27, 35, 0.09), transparent 45%),
		radial-gradient(circle at 92% 90%, rgba(255, 170, 120, 0.14), transparent 45%);
	-webkit-font-smoothing: antialiased;
}

.mcb-login {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 18px;
	box-sizing: border-box;
}

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

.mcb-login__card {
	width: 100%;
	max-width: 400px;
	background: var(--mcb-surface);
	border: 1px solid var(--mcb-border);
	border-radius: 20px;
	box-shadow: var(--mcb-shadow-lift);
	padding: 32px 30px 26px;
	text-align: center;
}

.mcb-login__logo { max-width: 140px; height: auto; margin-bottom: 16px; }

.mcb-login__title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }

.mcb-login__sub { margin: 4px 0 22px; font-size: 13px; color: var(--mcb-text-2); }

.mcb-login__form { text-align: left; display: flex; flex-direction: column; gap: 14px; }

.mcb-login__remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--mcb-text-2);
	cursor: pointer;
}

.mcb-login__submit { width: 100%; justify-content: center; min-height: 46px; font-size: 15px; }

.mcb-login__lost {
	display: inline-block;
	margin-top: 18px;
	font-size: 12.5px;
	color: var(--mcb-text-3);
	text-decoration: none;
}

.mcb-login__lost:hover { color: var(--mcb-red); text-decoration: underline; }

.mcb-login__footer { margin-top: 20px; font-size: 12px; color: var(--mcb-text-3); }

/* ==========================================================================
   Responsive — phone, tablet, laptop
   ========================================================================== */

/* Hamburger, shown only when the sidebar collapses */
.mcb-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: 11px;
	border: 1px solid var(--mcb-border);
	background: var(--mcb-surface);
	color: var(--mcb-text);
	cursor: pointer;
	box-shadow: var(--mcb-shadow);
	margin-right: 10px;
}

.mcb-nav-toggle .mcb-icon { width: 20px; height: 20px; }

.mcb-topbar__left { display: flex; align-items: center; min-width: 0; }

/* Dim the page behind the drawer */
.mcb-scrim {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(23, 23, 23, 0.35);
	z-index: 55;
	backdrop-filter: blur(2px);
}

.mcb-app.is-nav-open .mcb-scrim { display: block; }

/* ---- Laptop / small desktop ---- */
@media (max-width: 1280px) {
	.mcb-sidebar { width: 210px; flex: 0 0 210px; }
	.mcb-main { padding: 18px 18px 40px; }
	.mcb-grid--main-side { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ---- Tablet (iPad portrait and below): sidebar becomes a drawer ---- */
@media (max-width: 1024px) {
	.mcb-grid--main-side { grid-template-columns: minmax(0, 1fr); }

	.mcb-sidebar {
		position: fixed;
		z-index: 60;
		left: 0;
		top: 0;
		bottom: 0;
		width: 260px;
		flex-basis: 260px;
		height: 100vh;
		transform: translateX(-100%);
		transition: transform 0.22s ease;
		box-shadow: var(--mcb-shadow-lift);
		border-radius: 0 20px 20px 0;
	}

	.mcb-app.is-nav-open .mcb-sidebar { transform: translateX(0); }

	.mcb-nav-toggle { display: inline-flex; }

	.mcb-topbar {
		position: sticky;
		top: 0;
		z-index: 40;
		background: var(--mcb-bg);
		padding: 12px 0;
		margin-bottom: 14px;
	}

	.mcb-daygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mcb-paygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mcb-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}

/* ---- Phone ---- */
@media (max-width: 680px) {
	.mcb-main { padding: 14px 12px 36px; }

	.mcb-topbar { flex-wrap: wrap; gap: 10px; }
	.mcb-topbar__title { font-size: 19px; }
	.mcb-topbar__subtitle { font-size: 12px; }
	.mcb-topbar__right { width: 100%; justify-content: space-between; gap: 8px; }
	.mcb-topbar__right .mcb-btn { flex: 0 1 auto; padding: 9px 12px; font-size: 12.5px; }

	/* The user chip loses its text, keeping just the avatar */
	.mcb-user { padding: 4px; }
	.mcb-user__meta { display: none; }

	.mcb-card { padding: 14px 14px; border-radius: 14px; }
	.mcb-daygrid,
	.mcb-paygrid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.mcb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.mcb-kpi { padding: 12px; gap: 10px; }
	.mcb-kpi__icon { width: 34px; height: 34px; flex-basis: 34px; }
	.mcb-kpi__value { font-size: 17px; }
	.mcb-kpi__label { font-size: 11.5px; }

	.mcb-filters { padding: 12px; gap: 10px; }
	.mcb-filters .mcb-field { flex: 1 1 100%; }
	.mcb-filters .mcb-field input,
	.mcb-filters .mcb-field select { width: 100%; }

	.mcb-tabs { gap: 2px; padding: 4px; }
	.mcb-tab { padding: 8px 11px; font-size: 12.5px; gap: 6px; }
	.mcb-tab .mcb-icon { display: none; }

	/* Tables keep their own scroll rather than squashing */
	.mcb-table-wrap {
		margin: 0 -14px;
		padding: 0 14px;
		-webkit-overflow-scrolling: touch;
	}
	.mcb-table { font-size: 12.5px; }
	.mcb-table th, .mcb-table td { padding: 8px 9px; }

	.mcb-pager { justify-content: center; }

	.mcb-login__card { padding: 26px 20px 20px; }
}

/* ---- Very small phones ---- */
@media (max-width: 400px) {
	.mcb-kpis { grid-template-columns: minmax(0, 1fr); }
	.mcb-topbar__right { flex-wrap: wrap; }
}

/* Bigger touch targets on touch devices */
@media (hover: none) and (pointer: coarse) {
	.mcb-nav__item { padding: 12px 13px; }
	.mcb-btn { min-height: 42px; }
	.mcb-icon-btn { padding: 8px; }
	.mcb-ig input, .mcb-ig select { min-height: 46px !important; font-size: 16px !important; }
	.mcb-entryform input, .mcb-entryform select { min-height: 42px !important; font-size: 16px !important; }
}