/* ============================================================
   MealManage — Phase 1 application styles (Bootstrap 5 base)
   Palette follows the wireframes: neutral slate shell, deep
   teal brand, amber accent reserved for token states (Phase 5+).
   ============================================================ */
:root {
  --mm-brand: #0f5e5e;
  --mm-brand-dark: #0a4343;
  --mm-sidebar-bg: #10201f;
  --mm-sidebar-fg: #b7c9c7;
  --mm-accent: #e8a13a;
  --mm-bg: #f2f4f5;
}

body { background: var(--mm-bg); }

.mm-shell { display: flex; min-height: 100vh; }

/* ============================================================
   Icon rail + hover flyout navigation
   ============================================================ */
.mm-rail {
  width: 64px; flex-shrink: 0; background: var(--mm-sidebar-bg);
  display: flex; flex-direction: column; align-items: center;
  padding: .7rem 0; z-index: 1045; position: sticky; top: 0; height: 100vh;
}
.mm-rail-logo {
  width: 40px; height: 40px; border-radius: 11px; background: var(--mm-accent);
  color: var(--mm-brand-dark); display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; text-decoration: none; margin-bottom: .7rem; flex-shrink: 0;
}
.mm-rail-close { display: none; }   /* only used in mobile drawer */
.mm-rail-icons { display: flex; flex-direction: column; gap: .25rem; flex: 1; overflow-y: auto; width: 100%; align-items: center; }
.mm-rail-icons::-webkit-scrollbar { width: 0; }
.mm-rail-item {
  width: 46px; height: 46px; border-radius: 13px; border: 0; background: transparent;
  color: #8fa8a5; display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; cursor: pointer; position: relative; transition: background .14s, color .14s;
}
.mm-rail-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.mm-rail-item.active { background: var(--mm-brand); color: var(--mm-accent); }
.mm-rail-item:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 2px; }
/* tooltip label on hover (desktop) */
.mm-rail-tip {
  position: absolute; left: 54px; white-space: nowrap;
  background: var(--mm-brand-dark); color: #fff; padding: .2rem .55rem;
  border-radius: 6px; font-size: .75rem; opacity: 0; pointer-events: none;
  transition: opacity .12s; z-index: 60;
}
.mm-rail-item:hover .mm-rail-tip { opacity: 1; }
.mm-property-mini {
  width: 40px; height: 40px; border-radius: 11px; margin-top: .5rem;
  display: flex; align-items: center; justify-content: center;
  color: #7f9694; font-size: 1rem; border: 1px solid rgba(255,255,255,.08); flex-shrink: 0;
}

/* Flyout panels — float beside the rail on hover/tap */
.mm-flyout {
  position: fixed; left: 64px; width: 232px; z-index: 1044;
  background: color-mix(in srgb, var(--mm-sidebar-bg) 88%, #ffffff 12%);
  padding: .8rem .6rem; border-radius: 0 14px 14px 0;
  box-shadow: 10px 0 30px rgba(0,0,0,.22);
  transform: translateX(-10px); opacity: 0; pointer-events: none;
  transition: opacity .15s, transform .15s; max-height: 86vh; overflow-y: auto;
}
.mm-flyout.show { transform: translateX(0); opacity: 1; pointer-events: auto; }
.mm-flyout-head {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .9px; font-weight: 700;
  color: #8fb0ad; padding: .1rem .6rem .55rem;
}
.mm-flyout a {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem;
  border-radius: 8px; color: var(--mm-sidebar-fg); text-decoration: none;
  font-size: .87rem; margin-bottom: 1px;
}
.mm-flyout a i { width: 18px; text-align: center; font-size: 1rem; color: #7f9a97; }
.mm-flyout a:hover { background: rgba(255,255,255,.08); color: #fff; }
.mm-flyout a.active { background: var(--mm-brand); color: #fff; }
.mm-flyout a.active i { color: var(--mm-accent); }

/* Breadcrumb in the top bar */
.mm-breadcrumb { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: .92rem; color: #5a6b6a; }
.mm-crumb-home { color: #7a8a89; text-decoration: none; display: inline-flex; }
.mm-crumb-home:hover { color: var(--mm-brand); }
.mm-crumb-sep { color: #c2cdcc; }
.mm-crumb-sec { color: #6a7a79; }
.mm-crumb-cur { font-weight: 700; color: var(--mm-brand-dark); display: inline-flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-crumb-cur i { color: var(--mm-brand); }

/* Main column */
.mm-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mm-topbar {
  display: flex; align-items: center; gap: .75rem;
  background: #fff; border-bottom: 1px solid #e3e7e8; padding: .65rem 1.25rem;
}
.mm-topbar-toggle { display: none; }   /* hamburger only on mobile */
.mm-page-title { font-size: 1.05rem; font-weight: 600; margin: 0; }
.mm-user-btn { display: flex; align-items: center; gap: .5rem; border: 0; }
.mm-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--mm-brand);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 600;
}
.mm-content { padding: 1.25rem; flex: 1; }
.mm-footer {
  padding: .6rem 1.25rem; font-size: .75rem; color: #8a9698;
  border-top: 1px solid #e3e7e8; background: #fff;
}

/* Stat cards */
.mm-stat .card-body { display: flex; align-items: center; gap: .9rem; }
.mm-stat-icon {
  width: 44px; height: 44px; border-radius: .65rem; display: flex;
  align-items: center; justify-content: center; font-size: 1.25rem;
}
.mm-stat-value { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.mm-stat-label { font-size: .78rem; color: #79878a; }

/* Auth screens */
.mm-auth-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--mm-sidebar-bg) 0%, var(--mm-brand-dark) 100%);
  padding: 1rem;
}
.mm-auth-card {
  background: #fff; border-radius: .9rem; padding: 2rem;
  width: 100%; max-width: 400px; box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.mm-auth-logo {
  width: 56px; height: 56px; margin: 0 auto; border-radius: .9rem;
  background: var(--mm-brand); color: var(--mm-accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
}

.btn-primary { --bs-btn-bg: var(--mm-brand); --bs-btn-border-color: var(--mm-brand);
  --bs-btn-hover-bg: var(--mm-brand-dark); --bs-btn-hover-border-color: var(--mm-brand-dark);
  --bs-btn-active-bg: var(--mm-brand-dark); --bs-btn-active-border-color: var(--mm-brand-dark); }
.btn-outline-primary { --bs-btn-color: var(--mm-brand); --bs-btn-border-color: var(--mm-brand);
  --bs-btn-hover-bg: var(--mm-brand); --bs-btn-hover-border-color: var(--mm-brand); }

table.dataTable thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .4px; color: #6a787b; }

/* ============================================================
   Phase 2 — Property-wide colour themes (Configuration → Appearance)
   The super-admin's selection is written to settings and rendered
   as body[data-theme] for every user.
   ============================================================ */
body[data-theme="teal"]     { --mm-brand:#0f5e5e; --mm-brand-dark:#0a4343; --mm-sidebar-bg:#10201f; --mm-accent:#e8a13a; }
body[data-theme="indigo"]   { --mm-brand:#3b3f8f; --mm-brand-dark:#2b2e6b; --mm-sidebar-bg:#161832; --mm-accent:#f0b429; }
body[data-theme="maroon"]   { --mm-brand:#7c2333; --mm-brand-dark:#5c1a26; --mm-sidebar-bg:#241014; --mm-accent:#d9a441; }
body[data-theme="emerald"]  { --mm-brand:#1c6b46; --mm-brand-dark:#144d32; --mm-sidebar-bg:#0e1f17; --mm-accent:#e2b93b; }
body[data-theme="midnight"] { --mm-brand:#0e7490; --mm-brand-dark:#155e75; --mm-sidebar-bg:#111827; --mm-accent:#38bdf8; }

/* Widget headings on the role-based dashboard */
.mm-widget-title { font-size: .85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: #6a787b; display: flex; align-items: center; gap: .4rem; }
.mm-widget-title i { color: var(--mm-brand); }

/* Theme picker cards (Appearance) */
.mm-theme-card { display: flex; flex-direction: column; align-items: center; gap: .4rem;
  border: 2px solid #e3e7e8; border-radius: .75rem; padding: 1rem; width: 100%;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; position: relative; }
.mm-theme-card:hover { border-color: var(--mm-brand); box-shadow: 0 2px 10px rgba(15,94,94,.12); }
.mm-theme-card.selected {
  border-color: var(--mm-brand);
  background: var(--mm-surface-tint, #eef7f6);
  box-shadow: 0 0 0 3px var(--mm-brand), 0 4px 14px rgba(15,94,94,.2);
}
/* check-mark badge on the selected card */
.mm-theme-card.selected::after {
  content: "\F633";               /* bootstrap-icons check-lg */
  font-family: "bootstrap-icons"; position: absolute; top: -10px; right: -10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--mm-brand); color: #fff; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.mm-theme-card input { position: absolute; opacity: 0; }
.mm-theme-swatch { width: 72px; height: 44px; border-radius: .5rem; position: relative; display: block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.mm-theme-accent { position: absolute; right: 6px; bottom: 6px; width: 16px; height: 16px; border-radius: 50%; display: block; }
.mm-theme-name { font-size: .82rem; font-weight: 600; }
.mm-theme-card.selected .mm-theme-name { color: var(--mm-brand-dark); }

/* Phase 4 — booking profile */
.mm-avatar-lg { width: 56px; height: 56px; font-size: 1.4rem; }

/* ============================================================
   Phase 10.1 — Drawer sidebar (default closed), accordion nav,
   mobile responsiveness
   ============================================================ */

/* Backdrop (mobile drawer only) */
.mm-backdrop {
  position: fixed; inset: 0; background: rgba(8,16,15,.45); z-index: 1043;
  opacity: 0; visibility: hidden; transition: opacity .2s ease;
}
body.mm-rail-open .mm-backdrop { opacity: 1; visibility: visible; }

/* ---- Mobile: rail collapses into a slide-in drawer ---- */
@media (max-width: 991.98px) {
  .mm-topbar-toggle { display: inline-flex; }        /* show hamburger */
  .mm-rail {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100vh;
    transform: translateX(-105%); transition: transform .22s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.28);
  }
  body.mm-rail-open .mm-rail { transform: translateX(0); }
  body.mm-rail-open { overflow: hidden; }
  /* In the drawer the logo slot becomes the close button so nothing
     protrudes over the rail icons or the flyout panel. */
  .mm-rail-logo { display: none; }
  .mm-rail-close {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-bottom: .7rem; flex-shrink: 0;
    background: rgba(255,255,255,.1); color: #fff; border: 0; border-radius: 11px;
  }
  .mm-rail-close:hover { background: rgba(255,255,255,.18); }
  /* On mobile the flyout docks right next to the drawer rail and the
     tooltip labels are hidden (the flyout already shows the names). */
  .mm-rail-tip { display: none; }
  .mm-flyout { box-shadow: 10px 0 30px rgba(0,0,0,.3); }
  body:not(.mm-rail-open) .mm-flyout { display: none; }
}

/* Clickable KPI cards */
a.mm-kpi { display: block; color: inherit; text-decoration: none; height: 100%; }
a.mm-kpi .card, .mm-kpi-cell { transition: transform .12s ease, box-shadow .12s ease; }
a.mm-kpi:hover .card { transform: translateY(-2px); box-shadow: 0 .35rem .9rem rgba(15,94,94,.18); border-color: var(--mm-brand); }
a.mm-kpi-cell { display: block; color: inherit; text-decoration: none; border-radius: .5rem; padding: .35rem .15rem; }
a.mm-kpi-cell:hover { background: #eef4f4; box-shadow: inset 0 0 0 1px var(--mm-brand); }

/* Responsive: wide tables scroll inside cards instead of breaking layout */
.mm-content .card-body:has(table) { overflow-x: auto; }
.mm-page-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 575.98px) {
  .mm-content { padding: .85rem; }
  .mm-topbar { padding: .55rem .85rem; }
  .mm-footer { padding: .5rem .85rem; }
  .mm-stat-value { font-size: 1.15rem; }
  .fs-4 { font-size: 1.15rem !important; }  /* summary cards on reports */
  .modal-dialog { margin: .5rem; }
}

/* ============================================================
   Phase 10.2 — Option A: branded top bar + on-screen theme accents
   All colour comes from the theme variables (--mm-brand /
   --mm-brand-dark / --mm-accent), so every palette on the
   Appearance screen restyles this automatically.
   ============================================================ */

/* ---- Branded top bar (teal gradient) with breadcrumb ---- */
.mm-topbar {
  position: relative;
  background: linear-gradient(100deg, var(--mm-brand-dark) 0%, var(--mm-brand) 78%);
  border-bottom: 0;
  color: #fff;
}
.mm-topbar-toggle { color: #fff !important; }
.mm-topbar-toggle:hover { color: var(--mm-accent) !important; }

/* Breadcrumb sits on the dark bar → white text */
.mm-topbar .mm-breadcrumb { color: rgba(255,255,255,.82); }
.mm-topbar .mm-crumb-home { color: rgba(255,255,255,.75); }
.mm-topbar .mm-crumb-home:hover { color: var(--mm-accent); }
.mm-topbar .mm-crumb-sep { color: rgba(255,255,255,.4); }
.mm-topbar .mm-crumb-sec { color: rgba(255,255,255,.8); }
.mm-topbar .mm-crumb-cur { color: #fff; }
.mm-topbar .mm-crumb-cur i { color: var(--mm-accent); }

/* User button on the dark bar */
.mm-topbar .mm-user-btn { color: #fff; }
.mm-topbar .mm-user-btn:hover { color: var(--mm-accent); }
.mm-topbar .mm-user-btn .mm-avatar { background: var(--mm-accent); color: var(--mm-brand-dark); }
.mm-topbar .dropdown-toggle::after { color: rgba(255,255,255,.7); }

/* Amber accent rule under the bar */
.mm-topbar-accent { height: 3px; background: var(--mm-accent); }

@media (max-width: 575.98px) {
  .mm-breadcrumb { font-size: .84rem; }
  .mm-crumb-sec { display: none; }   /* keep just home / current on tiny screens */
}

/* ---- On-screen theme accents (so pages aren't flat white) ---- */

/* Card headers get a subtle brand tint + accent tab */
.mm-content .card > .card-header {
  background: var(--mm-surface-tint, #f4f8f8);
  border-bottom: 1px solid #e7eded;
  font-weight: 600; color: var(--mm-brand-dark);
  position: relative;
}
.mm-content .card > .card-header::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--mm-brand); border-radius: 3px 0 0 3px;
}

/* Panel/section titles inside cards */
.mm-widget-title { color: var(--mm-brand-dark); font-weight: 600; }
.mm-widget-title i { color: var(--mm-brand); }

/* Token codes and money read in brand colour */
.mm-content code, .mm-tokencode, td .tok { color: var(--mm-brand); font-weight: 600; }

/* DataTables header row: subtle brand tint */
.mm-content table.dataTable thead th,
.mm-content table thead th {
  background: #f5f9f9; color: #4a5f5e;
  border-bottom: 2px solid #e6eded;
}
.mm-content table.dataTable tbody tr:hover > * {
  background: var(--mm-row-hover, #f2f8f7);
}

/* Primary-toned table row-hover + links */
.mm-content a:not(.btn):not(.mm-kpi):not(.mm-kpi-cell):not(.mm-hero) { color: var(--mm-brand); }
.mm-content a:not(.btn):not(.mm-kpi):not(.mm-kpi-cell):not(.mm-hero):hover { color: var(--mm-brand-dark); }

/* Section/label pills used across reports */
.mm-content .badge.text-bg-primary { background: var(--mm-brand) !important; }

/* Per-theme surface tints + row hover (derived shades) */
body[data-theme="teal"]     { --mm-surface-tint:#f1f7f6; --mm-row-hover:#eef6f5; }
body[data-theme="indigo"]   { --mm-surface-tint:#f2f2fa; --mm-row-hover:#eeeef8; }
body[data-theme="maroon"]   { --mm-surface-tint:#faf2f3; --mm-row-hover:#f7eef0; }
body[data-theme="emerald"]  { --mm-surface-tint:#f0f7f3; --mm-row-hover:#ecf5f0; }
body[data-theme="midnight"] { --mm-surface-tint:#eef6f9; --mm-row-hover:#eaf4f8; }

/* KPI cards: brand-tinted left border (already have .mm-kpi hover from 10.1) */
.mm-content .mm-stat .mm-stat-value { color: var(--mm-brand-dark); }

/* Footer keeps a hairline brand accent */
.mm-footer { border-top: 2px solid var(--mm-brand); }

/* ============================================================
   Phase 10.3 — sticky top bar (logo header stays frozen on scroll)
   ============================================================ */

/* Freeze the branded top bar (and its accent rule) on vertical scroll */
.mm-topbar {
  position: sticky; top: 0; z-index: 1030;
}
.mm-topbar-accent {
  position: sticky; top: 56px;   /* sits right under the bar */
  z-index: 1029;
}
@media (max-width: 575.98px) {
  .mm-topbar-accent { top: 50px; }
}

/* ============================================================
   Phase 10.4 — Immersive Outlet Scanner (Option 1)
   ============================================================ */
.mm-scanner { max-width: 560px; margin: 0 auto; }

.mm-scan-outlet .form-select { border-radius: 10px; }

/* Stage shell */
.mm-scan-stage {
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(9,40,39,.12); border: 1px solid #e2e8e8;
}
.mm-scan-topbar {
  background: linear-gradient(100deg, var(--mm-brand-dark), var(--mm-brand));
  color: #fff; padding: .7rem 1rem; display: flex; align-items: center; gap: .5rem;
}
.mm-scan-title { font-weight: 700; letter-spacing: .2px; }
.mm-scan-title i { color: var(--mm-accent); margin-right: .25rem; }
.mm-scan-outlet-chip {
  margin-left: auto; font-size: .78rem; background: rgba(255,255,255,.15);
  padding: .2rem .6rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .35rem;
  max-width: 55%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* Camera viewport */
.mm-scan-viewport {
  position: relative; aspect-ratio: 1 / 1; width: 100%;
  background: radial-gradient(circle at center, #10302f 0%, #061413 100%);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mm-scan-viewport #qrReader { position: absolute; inset: 0; }
.mm-scan-viewport #qrReader video { width: 100% !important; height: 100% !important; object-fit: cover; }
/* hide the library's default UI chrome */
.mm-scan-viewport #qrReader img[alt="Info icon"], .mm-scan-viewport #qrReader__dashboard_section_csr button { display: none !important; }
.mm-scan-viewport #qrReader__dashboard { display: none !important; }

/* Amber targeting frame */
.mm-scan-frame { position: relative; width: 64%; aspect-ratio: 1/1; z-index: 3; pointer-events: none; }
.mm-scan-frame .c { position: absolute; width: 32px; height: 32px; border: 3px solid var(--mm-accent); }
.mm-scan-frame .tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.mm-scan-frame .tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 12px 0 0; }
.mm-scan-frame .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; }
.mm-scan-frame .br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
.mm-scan-line {
  position: absolute; left: 8%; right: 8%; height: 2px; top: 8%;
  background: var(--mm-accent); box-shadow: 0 0 12px 2px var(--mm-accent);
  animation: mmScan 2.4s ease-in-out infinite;
}
@keyframes mmScan { 0%,100% { top: 8%; } 50% { top: 90%; } }

/* Idle overlay */
.mm-scan-idle {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; color: #d8ecea; padding: 1.5rem;
}
.mm-scan-idle i { font-size: 3.2rem; color: rgba(255,255,255,.5); }
.mm-scan-hint {
  position: absolute; bottom: 12px; z-index: 4; color: #d8ecea; font-size: .82rem;
  background: rgba(0,0,0,.35); padding: .25rem .7rem; border-radius: 999px;
}

/* Action bar */
.mm-scan-actions { padding: .85rem 1rem; display: flex; gap: .6rem; align-items: center; }
.mm-scan-manual { padding: 0 1rem 1rem; }

/* Accent buttons (use theme accent) */
.btn-accent {
  background: var(--mm-accent); border: 0; color: #3a2a08; font-weight: 600;
}
.btn-accent:hover { filter: brightness(.95); color: #3a2a08; }
.btn-ghost-accent {
  background: #fff; border: 1px solid var(--mm-brand); color: var(--mm-brand); font-weight: 600; border-radius: 10px;
}
.btn-ghost-accent:hover { background: var(--mm-brand); color: #fff; }

/* Result sheet (slides up) */
.mm-sheet-backdrop { position: fixed; inset: 0; background: rgba(8,16,15,.4); z-index: 1050; }
.mm-result-sheet {
  position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%);
  width: 100%; max-width: 560px; background: #fff; z-index: 1051;
  border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.25);
  transition: transform .24s ease; max-height: 92vh; overflow-y: auto;
}
.mm-result-sheet.is-open { transform: translate(-50%, 0); }
.mm-sheet-grip { width: 42px; height: 4px; background: #d4dcdc; border-radius: 3px; margin: .5rem auto .25rem; }

.mm-result-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; }
.mm-result-head.is-valid { border-top: 4px solid #1c8a5b; }
.mm-result-head.is-invalid { background: #c0392b; color: #fff; border-radius: 0; }
.mm-result-badge {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: #fff; flex-shrink: 0;
}
.is-valid .mm-result-badge { background: #1c8a5b; }
.is-invalid .mm-result-badge { background: rgba(255,255,255,.2); }
.mm-result-name { font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.mm-result-sub { font-size: .85rem; opacity: .85; }
.mm-result-body { padding: 0 1.1rem 1.3rem; }

/* Key-value grid */
.mm-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .9rem; margin-top: .4rem; }
.mm-kv { display: flex; justify-content: space-between; gap: .5rem; padding: .5rem .1rem; border-bottom: 1px solid #f0f3f3; font-size: .87rem; }
.mm-kv .k { color: #7a8a89; }
.mm-kv .v { font-weight: 600; text-align: right; }
.mm-tokencode { color: var(--mm-brand) !important; letter-spacing: .3px; }

/* Bill block */
.mm-bill-block { margin-top: 1rem; padding: 1rem; background: var(--mm-surface-tint, #f4f8f8); border-radius: 12px; }
.mm-bill-block .form-label { font-size: .8rem; font-weight: 600; color: #566968; margin-bottom: .2rem; }
.mm-math {
  display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
  margin-top: .85rem; padding: .7rem .9rem; background: #fff; border-radius: 9px; font-size: .88rem;
  border: 1px dashed #cdd8d7;
}
.mm-math span { white-space: nowrap; }
.mm-done-math { max-width: 340px; margin: 0 auto 1rem; }
.mm-done-math th { color: #7a8a89; font-weight: 500; }
.mm-done-math td { text-align: right; font-weight: 600; }

/* Recent list */
.mm-scan-recent {
  background: #fff; border-radius: 14px; margin-top: 1rem; padding: .9rem 1.1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); border: 1px solid #e6ecec;
}
.mm-recent-title { font-weight: 600; color: var(--mm-brand-dark); margin-bottom: .5rem; font-size: .92rem; }
.mm-recent-title i { color: var(--mm-brand); }
.mm-recent-empty { color: #9aa7a6; font-size: .85rem; }
.mm-recent-row {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: .6rem; align-items: center;
  padding: .45rem 0; border-bottom: 1px solid #f2f5f5; font-size: .85rem;
}
.mm-recent-row:last-child { border-bottom: 0; }
.mm-recent-tok { color: var(--mm-brand); font-weight: 600; }
.mm-recent-guest { color: #445; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-recent-val { font-weight: 600; color: var(--mm-brand-dark); }
.mm-recent-time { color: #9aa7a6; font-size: .78rem; }

@media (max-width: 575.98px) {
  .mm-kv-grid { grid-template-columns: 1fr; }
  .mm-scan-viewport { aspect-ratio: 4 / 5; }
}

/* ============================================================
   Phase 10.5 — global density: slightly smaller base font so
   tables and controls read tighter and more professional
   ============================================================ */
html { font-size: 16px; }               /* density base (was 15px, +1 per request) */

.mm-content { font-size: .92rem; }
.mm-content .table { font-size: .86rem; }
.mm-content .table > :not(caption) > * > * { padding-top: .5rem; padding-bottom: .5rem; }
.mm-content table.dataTable thead th,
.mm-content table thead th { font-size: .72rem; }

/* Compact action buttons in table rows */
.mm-content td .btn-group-sm > .btn,
.mm-content td .btn-sm { padding: .2rem .45rem; font-size: .8rem; line-height: 1.2; }

/* DataTables chrome (length/filter/info/paginate) a touch smaller */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { font-size: .84rem; }

/* Form controls & labels slightly tighter */
.mm-content .form-label { font-size: .82rem; margin-bottom: .25rem; }
.mm-content .form-control, .mm-content .form-select { font-size: .9rem; }
.mm-content .badge { font-weight: 600; }

/* ============================================================
   Phase 10.6 — Option A dashboard: hero band + context lines
   ============================================================ */
.mm-hero-band {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem;
}
.mm-hero {
  position: relative; overflow: hidden; text-decoration: none;
  border-radius: 14px; padding: 1.1rem 1.3rem; color: #fff;
  display: flex; flex-direction: column; justify-content: center; min-height: 104px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.mm-hero { color: #fff !important; }
.mm-hero:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.1rem rgba(9,40,39,.22); color: #fff !important; }
.mm-hero-brand { background: linear-gradient(120deg, var(--mm-brand-dark), var(--mm-brand)); }
.mm-hero-green { background: linear-gradient(120deg, #155e3f, #1c8a5b); }
.mm-hero-amber { background: linear-gradient(120deg, #8a5a10, #c9902f); }
.mm-hero-big { font-size: 2.2rem; font-weight: 800; line-height: 1; color: #fff; }
.mm-hero-lbl { color: rgba(255,255,255,.95); font-size: .82rem; margin-top: .3rem; }
.mm-hero-ico { position: absolute; right: 1rem; top: .9rem; font-size: 1.3rem; color: rgba(255,255,255,.9); }

/* Context line under a "today" stat so a zero still tells a story */
.mm-stat-ctx { font-size: .7rem; color: #5b8f74; font-weight: 600; margin-top: .15rem; }

@media (max-width: 767.98px) {
  .mm-hero-band { grid-template-columns: 1fr; }
  .mm-hero { min-height: 88px; }
  .mm-hero-big { font-size: 1.9rem; }
}