/* =========================================================
   MessMeal — application design system
   A self-contained visual language: sidebar + topbar app shell,
   dark mode, and a small inline icon set. No WordPress admin
   classes or theme chrome are used anywhere in this file.
   ========================================================= */

:root {
	--mm-bg: #f7f8fa;
	--mm-card: #ffffff;
	--mm-ink: #14171f;
	--mm-muted: #6b7280;
	--mm-line: #eceef1;
	--mm-line-soft: #f3f4f6;
	--mm-sidebar-bg: #12131a;
	--mm-sidebar-ink: #cfd2dc;
	--mm-sidebar-muted: #8489a0;
	--mm-sidebar-active: #1f2130;
	--mm-brand: #22c55e;
	--mm-brand-2: #16a34a;
	--mm-accent: #22c55e;
	--mm-accent-2: #4ade80;
	--mm-accent-soft: #dcfce7;
	--mm-green: #0f9d58;
	--mm-green-soft: #eafaf1;
	--mm-green-line: #cdeed9;
	--mm-red: #d7392b;
	--mm-red-soft: #fdf1f0;
	--mm-red-line: #f6d2ce;
	--mm-amber: #a06600;
	--mm-amber-soft: #fff6df;
	--mm-blue: #1c4e9c;
	--mm-blue-soft: #eef4ff;
	--mm-balance-bg: #f6f7fc;
	--mm-radius: 16px;
	--mm-radius-sm: 10px;
	--mm-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
	--mm-shadow-md: 0 4px 10px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.05);
	--mm-shadow-lg: 0 12px 28px rgba(16,24,40,.14), 0 4px 10px rgba(16,24,40,.08);
	--mm-sidebar-width: 264px;
	--mm-topbar-height: 68px;
}

[data-mm-theme="dark"] {
	--mm-bg: #0b0d14;
	--mm-card: #12141d;
	--mm-ink: #eef0f4;
	--mm-muted: #9297a8;
	--mm-line: #232636;
	--mm-line-soft: #1a1c29;
	--mm-sidebar-bg: #0a0b11;
	--mm-accent-soft: rgba(34,197,94,.18);
	--mm-green-soft: rgba(15,157,88,.14);
	--mm-green-line: rgba(15,157,88,.35);
	--mm-red-soft: rgba(215,57,43,.14);
	--mm-red-line: rgba(215,57,43,.35);
	--mm-amber-soft: rgba(160,102,0,.18);
	--mm-blue-soft: rgba(28,78,156,.22);
	--mm-balance-bg: #171a26;
	--mm-shadow: 0 1px 2px rgba(0,0,0,.3);
	--mm-shadow-md: 0 4px 14px rgba(0,0,0,.35);
	--mm-shadow-lg: 0 16px 32px rgba(0,0,0,.5);
}

body.messmeal-app-body {
	margin: 0;
	background: var(--mm-bg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Bengali", sans-serif;
}

.messmeal-wrap {
	color: var(--mm-ink);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.messmeal-wrap * { box-sizing: border-box; }
.messmeal-wrap a { color: var(--mm-accent); }

/* Non-shell pages (onboarding / login / join) — simple centered card, full viewport */
.messmeal-wrap:not(.mm-app) {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.messmeal-wrap.mm-onboarding { flex-direction: column; max-width: 720px; margin: 0 auto; }

/* ---------------- App shell: sidebar + topbar ---------------- */
.mm-app { display: block; min-height: 100vh; }

.mm-sidebar {
	position: fixed; top: 0; left: 0; bottom: 0; width: var(--mm-sidebar-width);
	background: var(--mm-sidebar-bg); color: var(--mm-sidebar-ink);
	display: flex; flex-direction: column; z-index: 40;
	transition: transform .25s ease;
}
.mm-sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 22px 20px 18px; position: relative; }
.mm-sidebar-brand .mm-title { color: #fff; }
.mm-sidebar-brand .mm-subtitle { color: var(--mm-sidebar-muted); }
.mm-sidebar-close { display: none; position: absolute; right: 14px; top: 18px; color: var(--mm-sidebar-ink); background: transparent; border: none; }

.mm-nav { flex: 1; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.mm-sidebar .mm-nav-item {
	display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px;
	color: var(--mm-sidebar-ink); text-decoration: none; font-size: 14px; font-weight: 550;
	transition: background .15s ease, color .15s ease; cursor: pointer;
}
.mm-sidebar .mm-nav-item .mm-icon { flex-shrink: 0; opacity: .9; color: var(--mm-sidebar-ink); }
.mm-sidebar .mm-nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.mm-sidebar .mm-nav-item:hover .mm-icon { color: #fff; }
.mm-sidebar .mm-nav-item.mm-nav-active { background: linear-gradient(135deg, var(--mm-accent), var(--mm-accent-2)); color: #fff; box-shadow: var(--mm-shadow-md); }
.mm-sidebar .mm-nav-item.mm-nav-active .mm-icon { opacity: 1; color: #fff; }

.mm-sidebar-footer { padding: 14px 12px 20px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 4px; }
.mm-theme-toggle {
	display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; border: none;
	background: transparent; color: var(--mm-sidebar-ink); font-size: 14px; font-weight: 550; cursor: pointer; width: 100%; text-align: left;
}
.mm-theme-toggle:hover { background: rgba(255,255,255,.06); color: #fff; }
.mm-theme-icon-light, .mm-theme-icon-dark { display: flex; }
[data-mm-theme="dark"] .mm-theme-icon-dark { display: none; }
[data-mm-theme="dark"] .mm-theme-icon-light { display: flex; }
:root:not([data-mm-theme="dark"]) .mm-theme-icon-light { display: none; }
.mm-logout-link { color: #ff9b93; }
.mm-sidebar .mm-logout-link { color: #ff9b93; }
.mm-logout-link:hover { background: rgba(215,57,43,.14); color: #ffb3ac; }

.mm-mobile-toggle {
	display: none; border: none; background: var(--mm-card); color: var(--mm-ink); width: 40px; height: 40px;
	border-radius: 10px; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--mm-shadow);
}
.mm-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 39; }

.mm-main { margin-left: var(--mm-sidebar-width); display: flex; flex-direction: column; min-height: 100vh; }
.mm-topbar {
	height: var(--mm-topbar-height); display: flex; align-items: center; justify-content: space-between;
	padding: 0 28px; background: var(--mm-card); border-bottom: 1px solid var(--mm-line);
	position: sticky; top: 0; z-index: 30; gap: 14px;
}
.mm-topbar-title { font-size: 17px; font-weight: 750; letter-spacing: -0.01em; }
.mm-topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.mm-content { padding: 26px 28px 60px; flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; }

.mm-panel { display: none; }
.mm-panel.mm-panel-active { display: block; animation: mm-fade .15s ease; }
@keyframes mm-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.mm-panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

/* Topbar widgets */
.mm-mess-switch select, .mm-header-actions select,
.mm-header-actions input[type="month"], .mm-header-actions input[type="date"],
#mm-month-picker {
	border: 1px solid var(--mm-line); border-radius: var(--mm-radius-sm); padding: 8px 12px;
	font-size: 13px; background: var(--mm-card); color: var(--mm-ink);
}
.mm-topbar-avatar { width: 36px; height: 36px; font-size: 14px; }

/* Uploaded profile photos: same circle shape as the initial-letter tiles,
   just filled with an actual image instead of text. */
.mm-avatar-photo { padding: 0; overflow: hidden; background: var(--mm-line-soft); }
.mm-avatar-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* Self-service "upload your own photo" control on the topbar avatar. */
.mm-topbar-avatar-wrap { position: relative; display: inline-flex; cursor: pointer; }
.mm-avatar-upload-btn {
	position: absolute; bottom: -2px; right: -2px; width: 17px; height: 17px; border-radius: 50%;
	background: var(--mm-accent); color: #fff; border: 2px solid var(--mm-card); display: flex;
	align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
.mm-avatar-upload-btn .mm-icon { width: 10px; height: 10px; }
.mm-quickadd { position: relative; }
.mm-quickadd-menu {
	display: none; position: absolute; right: 0; top: calc(100% + 8px); background: var(--mm-card);
	border: 1px solid var(--mm-line); border-radius: var(--mm-radius-sm); box-shadow: var(--mm-shadow-lg);
	min-width: 200px; padding: 6px; z-index: 60; flex-direction: column;
}
.mm-quickadd-menu.mm-open { display: flex; }
.mm-quickadd-menu button, .mm-quickadd-menu a {
	background: none; border: none; text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 13.5px;
	color: var(--mm-ink); text-decoration: none; cursor: pointer;
}
.mm-quickadd-menu button:hover, .mm-quickadd-menu a:hover { background: var(--mm-line-soft); }

/* ---------------- Buttons ---------------- */
.mm-btn {
	border: 1px solid var(--mm-line); background: var(--mm-card); border-radius: var(--mm-radius-sm);
	padding: 9px 15px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
	color: var(--mm-ink); display: inline-flex; align-items: center; gap: 6px;
	transition: all .15s ease; box-shadow: var(--mm-shadow);
}
.mm-btn:hover { background: var(--mm-line-soft); transform: translateY(-1px); box-shadow: var(--mm-shadow-md); }
.mm-btn:active { transform: translateY(0); }
.mm-btn-dark { background: var(--mm-brand); color: #fff; border-color: var(--mm-brand); }
.mm-btn-dark:hover { background: var(--mm-brand-2); }
.mm-btn-danger { background: var(--mm-card); color: var(--mm-red); border-color: var(--mm-red-line); }
.mm-btn-danger:hover { background: var(--mm-red-soft); }
.mm-btn-small { padding: 5px 11px; font-size: 12px; border-radius: 8px; }
.mm-btn-block { width: 100%; justify-content: center; }

/* ---------------- Banners ---------------- */
.mm-banner {
	padding: 12px 18px; border-radius: var(--mm-radius-sm); margin: 0 0 18px; font-size: 13.5px;
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 500;
}
.mm-banner-info { background: var(--mm-blue-soft); color: var(--mm-blue); }
.mm-banner-warn { background: var(--mm-amber-soft); color: var(--mm-amber); }
.mm-banner-danger { background: var(--mm-red-soft); color: var(--mm-red); }

/* ---------------- Stat cards ---------------- */
.mm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.mm-stat-card {
	background: var(--mm-card); border: 1px solid var(--mm-line); border-radius: var(--mm-radius);
	padding: 18px 20px; box-shadow: var(--mm-shadow); transition: box-shadow .15s ease;
}
.mm-stat-card:hover { box-shadow: var(--mm-shadow-md); }
.mm-stat-label { color: var(--mm-muted); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.mm-stat-value { font-size: 27px; font-weight: 800; margin: 8px 0 2px; letter-spacing: -0.02em; }
.mm-stat-hint { color: var(--mm-muted); font-size: 12px; }

.mm-section-title { margin: 0 0 14px; font-size: 16.5px; font-weight: 750; letter-spacing: -0.01em; }

/* ---------------- Balance cards ---------------- */
.mm-balances { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 26px; }
.mm-balance-card { border-radius: var(--mm-radius); padding: 18px; border: 1px solid var(--mm-line); box-shadow: var(--mm-shadow); transition: transform .15s ease, box-shadow .15s ease; background: var(--mm-balance-bg); }
.mm-balance-card:hover { transform: translateY(-2px); box-shadow: var(--mm-shadow-md); }
.mm-positive { background: var(--mm-green-soft); border-color: var(--mm-green-line); }
.mm-negative { background: var(--mm-red-soft); border-color: var(--mm-red-line); }
.mm-balance-person { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mm-avatar {
	width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--mm-accent), var(--mm-accent-2));
	font-size: 14px; flex-shrink: 0; position: relative;
}
.mm-avatar-sm { width: 27px; height: 27px; font-size: 11.5px; }

/* Member avatar palette — 8 deterministic colors (by member id) so people
   are visually distinguishable from one another at a glance. Kept pale/
   pastel on purpose so the avatars sit gently on the page; text uses a
   dark ink color instead of white since these backgrounds are light. */
.mm-avatar-c1 { background: linear-gradient(135deg, #dbe0fd, #ede9fe); color: #4338ca; }
.mm-avatar-c2 { background: linear-gradient(135deg, #cffafe, #e0f7fa); color: #0e7490; }
.mm-avatar-c3 { background: linear-gradient(135deg, #fce7f3, #fdf2f8); color: #be185d; }
.mm-avatar-c4 { background: linear-gradient(135deg, #ffedd5, #fff7ed); color: #c2410c; }
.mm-avatar-c5 { background: linear-gradient(135deg, #dcfce7, #f0fdf4); color: #15803d; }
.mm-avatar-c6 { background: linear-gradient(135deg, #ede9fe, #f5f3ff); color: #6d28d9; }
.mm-avatar-c7 { background: linear-gradient(135deg, #fef9c3, #fefce8); color: #a16207; }
.mm-avatar-c8 { background: linear-gradient(135deg, #fee2e2, #fef2f2); color: #b91c1c; }

/* Manager / mess-admin avatar — distinct pale-gold ring + star badge so
   the mess manager is instantly recognizable from regular members. */
.mm-avatar-manager {
	background: linear-gradient(135deg, #fde68a, #fef3c7);
	color: #92400e;
	box-shadow: 0 0 0 2px var(--mm-card), 0 0 0 4px #fcd34d;
}
.mm-avatar-manager::after {
	content: "★"; position: absolute; bottom: -3px; right: -3px; width: 15px; height: 15px;
	border-radius: 50%; background: #fcd34d; color: #92400e; font-size: 9px; line-height: 15px;
	text-align: center; box-shadow: 0 0 0 2px var(--mm-card);
}
.mm-avatar-sm.mm-avatar-manager::after { width: 12px; height: 12px; font-size: 7px; line-height: 12px; }

.mm-balance-name { font-weight: 700; }
.mm-balance-units { color: var(--mm-muted); font-size: 12.5px; margin-bottom: 8px; }
.mm-balance-amount { font-size: 25px; font-weight: 800; margin-bottom: 10px; letter-spacing: -0.02em; }
.mm-positive .mm-balance-amount { color: var(--mm-green); }
.mm-negative .mm-balance-amount { color: var(--mm-red); }
.mm-balance-tag { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.mm-positive .mm-balance-tag { background: rgba(15,157,88,.16); color: var(--mm-green); }
.mm-negative .mm-balance-tag { background: rgba(215,57,43,.16); color: var(--mm-red); }

.mm-chart-card { background: var(--mm-card); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 16px; box-shadow: var(--mm-shadow); max-width: 100%; position: relative; min-height: 220px; }
#mm-trend-chart { max-width: 100%; height: 220px !important; }
.mm-chart-empty {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	min-height: 220px; text-align: center; color: var(--mm-muted); font-size: 13.5px;
}
.mm-chart-empty .mm-icon { opacity: .45; }
.mm-chart-empty strong { color: var(--mm-ink); font-size: 14.5px; font-weight: 700; }

/* ---------------- Settlements ---------------- */
.mm-settlements { border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 4px 20px; box-shadow: var(--mm-shadow); background: var(--mm-card); margin-bottom: 26px; }
.mm-settle-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--mm-line-soft); gap: 10px; flex-wrap: wrap; }
.mm-settle-row:last-child { border-bottom: none; }
.mm-settle-amount { font-weight: 800; }
.mm-muted { color: var(--mm-muted); }

/* ---------------- Meal tracker ---------------- */
.mm-tracker-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }

/* "Today's total meals" strip — lets whoever's cooking see quantities
   for the selected date at a glance, without scanning every row. */
.mm-day-totals { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.mm-day-total-item {
	flex: 1 1 100px; background: var(--mm-line-soft); border: 1px solid var(--mm-line); border-radius: 12px;
	padding: 10px 14px; display: flex; flex-direction: column; gap: 2px;
}
.mm-day-total-label { font-size: 12px; color: var(--mm-muted); }
.mm-day-total-value { font-size: 20px; font-weight: 700; }
.mm-day-total-grand { background: var(--mm-accent-soft); border-color: var(--mm-accent); }
.mm-day-total-grand .mm-day-total-value { color: var(--mm-accent); }
.mm-date-nav { display: flex; align-items: center; gap: 6px; }
.mm-date-nav input[type="date"] { border: 1px solid var(--mm-line); border-radius: var(--mm-radius-sm); padding: 7px 10px; background: var(--mm-card); color: var(--mm-ink); }

.mm-tracker-table, .mm-simple-table, .mm-pro-table {
	width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 12px;
	background: var(--mm-card); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); overflow: hidden;
}
.mm-tracker-table th, .mm-simple-table th, .mm-pro-table th {
	background: var(--mm-line-soft); color: var(--mm-muted); font-size: 12px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .03em; text-align: left; padding: 12px 14px;
}
.mm-tracker-table td, .mm-simple-table td, .mm-pro-table td {
	border-top: 1px solid var(--mm-line-soft); padding: 12px 14px; text-align: left; font-size: 14px; vertical-align: middle;
}
.mm-tracker-table tbody tr:hover, .mm-simple-table tbody tr:hover, .mm-pro-table tbody tr:hover { background: var(--mm-line-soft); }
.mm-person-cell { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.mm-slot {
	width: 42px; height: 36px; border-radius: 10px; border: 1px solid var(--mm-line); background: var(--mm-line-soft);
	cursor: pointer; font-size: 17px; transition: all .15s ease; color: var(--mm-ink);
}
.mm-slot:hover { background: var(--mm-accent-soft); border-color: var(--mm-accent); }
.mm-extra-cell { display: flex; align-items: center; gap: 8px; }
.mm-extra-minus, .mm-extra-plus {
	width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--mm-line); background: var(--mm-card);
	cursor: pointer; font-weight: 700; transition: background .15s ease; color: var(--mm-ink);
}
.mm-extra-minus:hover, .mm-extra-plus:hover { background: var(--mm-line-soft); }
.mm-units-cell { font-weight: 800; }

.mm-table-scroll { overflow-x: auto; }

/* ---------------- Modals ---------------- */
.mm-modal { display: none; position: fixed; inset: 0; background: rgba(8,9,14,.55); backdrop-filter: blur(2px); z-index: 9999; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.mm-modal.mm-open { display: flex; }
.mm-modal-box {
	background: var(--mm-card); border-radius: 18px; padding: 26px; width: 380px; max-width: 100%;
	display: flex; flex-direction: column; gap: 12px; box-shadow: var(--mm-shadow-lg);
	max-height: calc(100vh - 40px); overflow-y: auto; margin: auto;
}
.mm-modal-box h3 { margin: 0 0 4px; font-size: 18px; font-weight: 750; }
.mm-modal-box input, .mm-modal-box select {
	padding: 10px 12px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius-sm); font-size: 14px; width: 100%;
	background: var(--mm-card); color: var(--mm-ink);
}
.mm-modal-box input:focus, .mm-modal-box select:focus { outline: none; border-color: var(--mm-accent); box-shadow: 0 0 0 3px var(--mm-accent-soft); }
.mm-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.mm-btn[data-close]:hover, #mm-info-cancel:hover {
	background: var(--mm-red); border-color: var(--mm-red); color: #fff;
}
.mm-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mm-checkbox input[type="checkbox"] { accent-color: var(--mm-accent); }
.mm-modal-subtitle { margin: -6px 0 6px; font-size: 13px; line-height: 1.5; color: var(--mm-muted); }
.mm-modal-box .mm-field-label { margin: 2px 0 0; }
.mm-note-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.mm-note-chip {
	border: 1px solid var(--mm-line); background: var(--mm-card); color: var(--mm-ink);
	border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s ease;
}
.mm-note-chip:hover { background: var(--mm-line-soft); }
.mm-note-chip.mm-chip-active { background: var(--mm-brand); color: #fff; border-color: var(--mm-brand); }
.mm-info-note {
	display: flex; align-items: flex-start; gap: 8px; background: var(--mm-blue-soft); color: var(--mm-blue);
	border-radius: var(--mm-radius-sm); padding: 10px 12px; font-size: 12.5px; line-height: 1.5; margin-top: 4px;
}
.mm-info-note .mm-icon { flex-shrink: 0; margin-top: 1px; }

/* ---------------- Onboarding ---------------- */
.mm-onboarding-brand { text-align: center; margin-bottom: 6px; }
.mm-onboarding h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 10px 0 4px; }
.mm-onboarding-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; width: 100%; }
.mm-card {
	background: var(--mm-card); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 22px;
	display: flex; flex-direction: column; gap: 11px; box-shadow: var(--mm-shadow);
}
.mm-card h3, .mm-card h4 { margin: 0; font-size: 15.5px; font-weight: 750; }
.mm-card input, .mm-card select { padding: 10px 12px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius-sm); font-size: 14px; background: var(--mm-card); color: var(--mm-ink); }
.mm-card input:focus { outline: none; border-color: var(--mm-accent); box-shadow: 0 0 0 3px var(--mm-accent-soft); }
.mm-center-card { max-width: 420px; text-align: center; }

.mm-logo {
	width: 40px; height: 40px; border-radius: 12px; color: #fff; font-weight: 700; font-size: 17px;
	display: flex; align-items: center; justify-content: center;
	background: #fff;
	box-shadow: var(--mm-shadow-md); flex-shrink: 0; padding: 5px; box-sizing: border-box;
}
.mm-logo-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mm-logo-lg { width: 56px; height: 56px; font-size: 22px; border-radius: 16px; margin: 0 auto 14px; padding: 8px; }
.mm-title { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; color: var(--mm-ink); }
.mm-subtitle { font-size: 12.5px; color: var(--mm-muted); font-weight: 500; }

/* ---------------- Auth (login / join) ---------------- */
.mm-auth-card { background: var(--mm-card); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 34px 30px; width: 380px; max-width: 100%; box-shadow: var(--mm-shadow-lg); }
.mm-auth-brand { text-align: center; margin-bottom: 20px; }
.mm-auth-title { font-size: 19px; font-weight: 800; margin-top: 12px; }
.mm-auth-subtitle { font-size: 13px; color: var(--mm-muted); margin-top: 4px; }
.mm-auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.mm-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--mm-muted); }
.mm-field input, .mm-field select { padding: 10px 12px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius-sm); font-size: 14px; font-weight: 400; color: var(--mm-ink); background: var(--mm-card); }
.mm-field input:focus, .mm-field select:focus { outline: none; border-color: var(--mm-accent); box-shadow: 0 0 0 3px var(--mm-accent-soft); }
.mm-auth-footer { text-align: center; margin-top: 18px; font-size: 12.5px; color: var(--mm-muted); }
.mm-settings-form { display: flex; flex-direction: column; gap: 14px; }
.mm-settings-form select { padding: 9px 10px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius-sm); background: var(--mm-card); color: var(--mm-ink); width: 100%; }

/* ---------------- Billing / referrals ---------------- */
.mm-billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mm-billing-grid .mm-card input[readonly] { background: var(--mm-line-soft); font-family: monospace; font-size: 13px; }

/* ---------------- Super Admin console ---------------- */
.mm-actions-cell { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }
.mm-actions-cell form { display: flex; gap: 6px; align-items: center; }
.mm-mini-input { width: 52px; padding: 6px 8px; border: 1px solid var(--mm-line); border-radius: 8px; font-size: 12px; background: var(--mm-card); color: var(--mm-ink); }
.mm-status-tag { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.mm-tag-trial { background: var(--mm-blue-soft); color: var(--mm-blue); }
.mm-tag-active { background: var(--mm-green-soft); color: var(--mm-green); }
.mm-tag-expired { background: var(--mm-red-soft); color: var(--mm-red); }
.mm-tag-suspended { background: var(--mm-line-soft); color: var(--mm-muted); }
.mm-superadmin-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.mm-superadmin-chip {
	display: flex; align-items: center; gap: 8px; background: var(--mm-line-soft); border-radius: 999px;
	padding: 7px 8px 7px 14px; font-size: 13px;
}
.mm-superadmin-chip form { display: inline-flex; }
.mm-chip-remove {
	width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--mm-card); cursor: pointer;
	font-size: 11px; line-height: 1; color: var(--mm-muted);
}
.mm-chip-remove:hover { background: var(--mm-red-soft); color: var(--mm-red); }
.mm-inline-form { display: flex; gap: 8px; flex-wrap: wrap; max-width: 420px; }
.mm-inline-form input { flex: 1; padding: 10px 12px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius-sm); font-size: 13px; background: var(--mm-card); color: var(--mm-ink); }

/* ---------------- Responsive ---------------- */
@media (max-width: 960px) {
	.mm-sidebar { transform: translateX(-100%); }
	.mm-sidebar.mm-sidebar-open { transform: translateX(0); }
	.mm-sidebar-close { display: block; }
	.mm-sidebar-backdrop.mm-open { display: block; }
	.mm-main { margin-left: 0; }
	.mm-mobile-toggle { display: flex; }
	.mm-app > .mm-mobile-toggle { position: fixed; top: 14px; left: 14px; z-index: 45; }
}
/* =========================================================
   Real-time collaboration layer: notification bell, live
   activity feed, and the shared comments drawer.
   ========================================================= */

.mm-icon-btn {
	width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; border: 1px solid var(--mm-line); background: var(--mm-card); color: var(--mm-ink);
	cursor: pointer; position: relative; flex: 0 0 auto;
}
.mm-icon-btn:hover { background: var(--mm-line-soft); }
.mm-link-btn { border: none; background: none; color: var(--mm-accent); font-size: 12.5px; cursor: pointer; padding: 0; }
.mm-link-btn:hover { text-decoration: underline; }

.mm-notif-wrap { position: relative; }
.mm-notif-badge {
	position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px;
	border-radius: 999px; background: var(--mm-red); color: #fff; font-size: 10.5px; font-weight: 700;
	display: flex; align-items: center; justify-content: center; line-height: 1;
}
.mm-notif-dropdown {
	position: absolute; top: calc(100% + 10px); right: 0; width: 320px; max-width: 88vw;
	background: var(--mm-card); border: 1px solid var(--mm-line); border-radius: var(--mm-radius);
	box-shadow: var(--mm-shadow-lg); z-index: 60; display: none; overflow: hidden;
}
.mm-notif-dropdown.mm-open { display: block; }
.mm-notif-dropdown-head {
	display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
	border-bottom: 1px solid var(--mm-line); font-size: 13px; font-weight: 700;
}
.mm-notif-list { max-height: 360px; overflow-y: auto; }
.mm-notif-item {
	display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 10px 14px;
	border: none; border-bottom: 1px solid var(--mm-line-soft); background: none; cursor: pointer; color: var(--mm-ink);
}
.mm-notif-item:hover { background: var(--mm-line-soft); }
.mm-notif-item.mm-notif-unread { background: var(--mm-accent-soft); }
.mm-notif-message { font-size: 13px; line-height: 1.4; }
.mm-notif-time { font-size: 11px; color: var(--mm-muted); }
.mm-notif-empty { padding: 18px 14px !important; }

.mm-live-dot {
	display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mm-green);
	margin-left: 8px; vertical-align: middle; box-shadow: 0 0 0 0 rgba(15,157,88,.5);
	animation: mm-live-pulse 2s infinite;
}
@keyframes mm-live-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(15,157,88,.55); }
	70%  { box-shadow: 0 0 0 7px rgba(15,157,88,0); }
	100% { box-shadow: 0 0 0 0 rgba(15,157,88,0); }
}

.mm-activity-feed { display: flex; flex-direction: column; gap: 2px; }
.mm-activity-row { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--mm-line-soft); }
.mm-activity-row:last-child { border-bottom: none; }
.mm-activity-row.mm-activity-new { animation: mm-activity-in .5s ease; background: var(--mm-accent-soft); border-radius: var(--mm-radius-sm); }
@keyframes mm-activity-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.mm-activity-summary { font-size: 13.5px; line-height: 1.45; }
.mm-activity-time { font-size: 11.5px; color: var(--mm-muted); margin-top: 2px; }

.mm-comment-toggle {
	display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; font-size: 12px;
	border: 1px solid var(--mm-line); background: var(--mm-card); border-radius: 999px; color: var(--mm-muted); cursor: pointer;
}
.mm-comment-toggle:hover { color: var(--mm-ink); background: var(--mm-line-soft); }
.mm-comment-count { font-weight: 700; }

.mm-drawer { position: fixed; inset: 0; z-index: 90; display: none; }
.mm-drawer.mm-open { display: block; }
.mm-drawer-backdrop { position: absolute; inset: 0; background: rgba(10,11,17,.45); }
.mm-drawer-panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw;
	background: var(--mm-card); box-shadow: var(--mm-shadow-lg); display: flex; flex-direction: column;
	transform: translateX(0); animation: mm-drawer-in .22s ease;
}
@keyframes mm-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.mm-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 18px 14px; border-bottom: 1px solid var(--mm-line); }
.mm-drawer-head h3 { margin: 0; font-size: 16px; }
.mm-comments-list { flex: 1; overflow-y: auto; padding: 14px 18px; }
.mm-comment-row { display: flex; gap: 10px; margin-bottom: 16px; }
.mm-comment-meta { font-size: 12.5px; margin-bottom: 2px; }
.mm-comment-text { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.mm-comments-composer { padding: 12px 18px 18px; border-top: 1px solid var(--mm-line); position: relative; }
.mm-comments-composer textarea {
	width: 100%; resize: vertical; padding: 10px 12px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius-sm);
	background: var(--mm-bg); color: var(--mm-ink); font: inherit; margin-bottom: 8px;
}
.mm-mention-suggest {
	position: absolute; bottom: 60px; left: 18px; right: 18px; background: var(--mm-card);
	border: 1px solid var(--mm-line); border-radius: var(--mm-radius-sm); box-shadow: var(--mm-shadow-md);
	max-height: 160px; overflow-y: auto; z-index: 5;
}
.mm-mention-suggest button { display: block; width: 100%; text-align: left; padding: 8px 12px; border: none; background: none; cursor: pointer; color: var(--mm-ink); font-size: 13px; }
.mm-mention-suggest button:hover { background: var(--mm-line-soft); }

/* Split meal / fixed-cost balances (never merged into one figure) */
.mm-balance-card { display: flex; flex-direction: column; gap: 10px; }
.mm-balance-split { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.mm-balance-line { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-radius: var(--mm-radius-sm); background: var(--mm-line-soft); font-size: 13px; }
.mm-balance-line-label { color: var(--mm-muted); }
.mm-balance-line-amount { font-weight: 700; }
.mm-balance-line.mm-positive .mm-balance-line-amount { color: var(--mm-green); }
.mm-balance-line.mm-negative .mm-balance-line-amount { color: var(--mm-red); }
.mm-balance-note { font-size: 12.5px; margin-top: -4px; }

/* Manager-assigned fixed-cost shares */
.mm-field-label { font-size: 12.5px; font-weight: 700; color: var(--mm-muted); margin: 12px 0 4px; }

/* ---- Mess Information ---- */
.mm-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.mm-info-item { background: var(--mm-card); border: 1px solid var(--mm-line); border-radius: 12px; padding: 14px 16px; }
.mm-info-item-wide { grid-column: 1 / -1; }
.mm-info-label { font-size: 12px; color: var(--mm-muted); margin-bottom: 4px; }
.mm-info-value { font-size: 15px; font-weight: 600; }
.mm-info-notes { font-weight: 400; white-space: pre-line; }
.mm-info-form { max-width: 640px; display: flex; flex-direction: column; gap: 4px; }
.mm-info-form input[type="text"], .mm-info-form textarea {
	padding: 10px 12px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius-sm); font-size: 14px; width: 100%;
	background: var(--mm-card); color: var(--mm-ink); font-family: inherit;
}
.mm-info-form input:focus, .mm-info-form textarea:focus { outline: none; border-color: var(--mm-accent); box-shadow: 0 0 0 3px var(--mm-accent-soft); }
.mm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) {
	.mm-info-grid { grid-template-columns: 1fr; }
	.mm-field-row { grid-template-columns: 1fr; }
	.mm-modal { padding: 10px; }
	.mm-modal-box { padding: 18px; max-height: calc(100vh - 20px); }
	.mm-fixed-share-row input { width: 84px; }
}
.mm-fixed-shares { border: 1px dashed var(--mm-line); border-radius: var(--mm-radius-sm); padding: 10px 12px; margin-top: 4px; }
.mm-fixed-share-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.mm-fixed-share-row input { width: 110px; }
.mm-fixed-shares-total { text-align: right; font-size: 12.5px; font-weight: 700; margin-top: 4px; }
.mm-fixed-shares-total.mm-shares-ok { color: var(--mm-green); }
.mm-fixed-shares-total.mm-shares-bad { color: var(--mm-red); }

@media (max-width: 780px) {
	.mm-stats { grid-template-columns: repeat(2, 1fr); }
	.mm-onboarding-grid { grid-template-columns: 1fr; }
	.mm-billing-grid { grid-template-columns: 1fr; }
	.mm-content { padding: 20px 16px 50px; }
	.mm-topbar { padding: 0 16px; }
}

/* ---- v2.3 "Advanced": tracker toolbar, leaves, receipts, budget, bulk ---- */

.mm-tracker-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.mm-row-on-leave { opacity: .6; }
.mm-leave-badge {
	display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
	font-size: 11px; font-weight: 700; color: var(--mm-muted);
	background: var(--mm-line-soft); border-radius: 999px; padding: 2px 8px;
}
.mm-slot-disabled { opacity: .45; cursor: not-allowed !important; }

.mm-receipt-thumb { display: inline-block; line-height: 0; }
.mm-receipt-thumb img {
	width: 34px; height: 34px; object-fit: cover; border-radius: 8px;
	border: 1px solid var(--mm-line); box-shadow: var(--mm-shadow-sm);
}

.mm-budget-card { background: var(--mm-card); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-md); padding: 14px 16px; margin-bottom: 18px; }
.mm-budget-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.mm-budget-bar { height: 8px; border-radius: 999px; background: var(--mm-line-soft); overflow: hidden; }
.mm-budget-bar-fill { height: 100%; border-radius: 999px; background: var(--mm-brand); transition: width .3s ease; }
.mm-budget-bar-fill.mm-budget-over { background: var(--mm-red); }

.mm-carry-note { margin-top: 8px; font-size: 11.5px; }

.mm-bulk-member-list {
	display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px;
	max-height: 200px; overflow-y: auto; border: 1px dashed var(--mm-line);
	border-radius: var(--mm-radius-sm); padding: 10px 12px; margin-top: 4px;
}
@media (max-width: 480px) { .mm-bulk-member-list { grid-template-columns: 1fr; } }