/* ==========================================================================
   MyHome — interoperability home for the GVS / My… suite
   Built on the GVS Design System tokens (colors_and_type.css).
   Layout chrome + components only; all colour/type via var(--gvs-*).
   ========================================================================== */

/* Shared component layer (data tables, page headers, status pills, empty states,
   pagers) promoted out of the GVS.Suite admin pages. Imported here rather than
   linked separately so every consumer that already links this stylesheet picks it
   up without touching its index.html. @import must stay above the first rule. */
@import url("gvs-skeletons.css");
@import url("./gvs-suite-components.css");

/* Guided tours — spotlight page tour + cross-page release ("what's new") tour.
   Only pages that host GvsTourGuide / GvsVersionTour render this markup. */
@import url("./gvs-tour.css");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

.mh-root {
  font-family: var(--gvs-font-sans);
  background: var(--gvs-bg);
  color: var(--gvs-fg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Product accents matched to the live apps (override design-system defaults) */
  --gvs-product-porter: #1E80D8;   /* MyPorter — blue */
  --gvs-product-cleaning: #2EA64C; /* MyCleaning — green */
  --gvs-product-audit: #6FAE2B;    /* MyAudit — apple/lime green */
  --gvs-product-alert: #6FAE2B;    /* MyAlert — apple/lime green (matches MyAudit) */
}
.mh-root *::selection { background: var(--gvs-primary-weak); }

.material-symbols-rounded { font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; line-height: 1; user-select: none; }
.fill .material-symbols-rounded, .material-symbols-rounded.fill { font-variation-settings: 'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---------- Top app bar --------------------------------------------------- */
.mh-bar {
  position: sticky; top: 0; z-index: 60;
  height: 64px; display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  background: color-mix(in srgb, var(--gvs-surface) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gvs-border);
}
.mh-bar-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mh-bar-spacer { flex: 1; }
.mh-bar-right { display: flex; align-items: center; gap: 4px; }

.mh-iconbtn {
  width: 40px; height: 40px; border-radius: var(--gvs-radius-pill);
  display: grid; place-items: center; color: var(--gvs-fg-2);
  transition: background var(--gvs-dur-fast) var(--gvs-ease-standard), color var(--gvs-dur-fast);
  position: relative;
}
.mh-iconbtn:hover { background: rgba(10,26,46,.06); color: var(--gvs-fg-1); }
[data-theme="dark"] .mh-iconbtn:hover { background: rgba(255,255,255,.08); }
.mh-iconbtn .material-symbols-rounded { font-size: 22px; }
.mh-iconbtn .mh-dot {
  position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gvs-danger-500); border: 2px solid var(--gvs-surface);
}

/* App-switcher trigger */
.mh-switch-trigger {
  display: flex; align-items: center; gap: 10px; height: 44px;
  padding: 0 10px 0 8px; border-radius: var(--gvs-radius-md);
  transition: background var(--gvs-dur-fast) var(--gvs-ease-standard);
}
.mh-switch-trigger:hover { background: rgba(10,26,46,.05); }
[data-theme="dark"] .mh-switch-trigger:hover { background: rgba(255,255,255,.06); }
.mh-switch-trigger .material-symbols-rounded.mh-waffle { font-size: 22px; color: var(--gvs-fg-2); }
.mh-switch-trigger .mh-chev { font-size: 18px; color: var(--gvs-fg-3); transition: transform var(--gvs-dur-base); }
.mh-switch-trigger[aria-expanded="true"] .mh-chev { transform: rotate(180deg); }

/* MyHome wordmark */
.mh-wordmark { display: flex; align-items: center; gap: 9px; }
.mh-wordmark .mh-mark { width: 26px; height: 26px; color: var(--gvs-primary); }
.mh-wordmark .mh-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--gvs-fg-1); }
.mh-wordmark .mh-name b { font-weight: 800; color: var(--gvs-primary); }
.mh-wordmark .mh-name span { font-weight: 300; }

/* product brand mark sizing */
.mh-mark svg { width: 100%; height: 100%; display: block; }

/* ---------- App switcher panel ------------------------------------------- */
.mh-overlay { position: fixed; inset: 0; z-index: 2000; }
.mh-switch-panel {
  position: absolute; z-index: 2001; top: 60px; left: 12px; width: 344px;
  background: var(--gvs-surface); border: 1px solid var(--gvs-border);
  border-radius: var(--gvs-radius-lg); box-shadow: var(--gvs-elev-4);
  padding: 8px; overflow: hidden;
  animation: mh-pop var(--gvs-dur-base) var(--gvs-ease-decelerate);
  transform-origin: top left;
}
@keyframes mh-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.mh-switch-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 6px;
}
.mh-switch-head .gvs-overline { color: var(--gvs-fg-3); }
.mh-switch-row {
  display: flex; align-items: center; gap: 12px; padding: 10px;
  border-radius: var(--gvs-radius-md); transition: background var(--gvs-dur-fast);
  width: 100%; text-align: left;
}
.mh-switch-row:hover { background: var(--gvs-surface-alt); }
.mh-app-tile {
  flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff;
  box-shadow: var(--gvs-elev-1);
}
.mh-app-tile.sm { width: 40px; height: 40px; }
.mh-app-tile.sm .mh-mark { width: 22px; height: 22px; }
.mh-switch-row .mh-sr-body { min-width: 0; flex: 1; }
.mh-switch-row .mh-sr-name { font-weight: 700; font-size: 15px; color: var(--gvs-fg-1); }
.mh-switch-row .mh-sr-sum { font-size: 12.5px; color: var(--gvs-fg-3); margin-top: 1px; }
.mh-switch-row .mh-sr-arrow { color: var(--gvs-fg-3); font-size: 20px; opacity: 0; transition: opacity var(--gvs-dur-fast), transform var(--gvs-dur-fast); }
.mh-switch-row:hover .mh-sr-arrow { opacity: 1; transform: translateX(2px); }
.mh-switch-row.current { background: var(--gvs-primary-weak); }
.mh-switch-row.current .mh-sr-name { color: var(--gvs-primary); }
.mh-switch-row.locked { opacity: .55; cursor: default; }
.mh-switch-row.locked:hover { background: transparent; }
.mh-sr-lock { color: var(--gvs-fg-3); font-size: 20px; }
.mh-switch-sep { height: 1px; background: var(--gvs-divider); margin: 6px 8px; }
.mh-switch-foot { padding: 4px; }
.mh-switch-foot .mh-link-row {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--gvs-radius-md);
  color: var(--gvs-fg-2); font-weight: 600; font-size: 14px; width: 100%;
}
.mh-switch-foot .mh-link-row:hover { background: var(--gvs-surface-alt); }
.mh-switch-foot .material-symbols-rounded { font-size: 20px; color: var(--gvs-fg-3); }

/* ---------- Search -------------------------------------------------------- */
.mh-search {
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 14px; border-radius: var(--gvs-radius-pill);
  background: var(--gvs-surface-sunken); border: 1px solid transparent;
  color: var(--gvs-fg-3); transition: border-color var(--gvs-dur-fast), background var(--gvs-dur-fast);
}
.mh-bar .mh-search { width: min(420px, 36vw); }
.mh-search:hover { border-color: var(--gvs-border); }
.mh-search:focus-within { background: var(--gvs-surface); border-color: var(--gvs-primary); box-shadow: var(--gvs-focus-ring); }
.mh-search .material-symbols-rounded { font-size: 20px; }
.mh-search input { flex: 1; border: none; background: none; outline: none; font: inherit; font-size: 14px; color: var(--gvs-fg-1); }
.mh-search input::placeholder { color: var(--gvs-fg-3); }
.mh-search .mh-kbd {
  font-size: 11px; font-weight: 600; color: var(--gvs-fg-3);
  border: 1px solid var(--gvs-border); border-radius: 5px; padding: 2px 6px; background: var(--gvs-surface);
}
.mh-beta {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gvs-amber-700); background: var(--gvs-amber-50);
  padding: 2px 7px; border-radius: var(--gvs-radius-pill); white-space: nowrap;
}
[data-theme="dark"] .mh-beta { color: var(--gvs-amber-300); }

/* Search placed in content (sidebar / top-nav) */
.mh-search-wrap { max-width: 760px; margin: 0 0 32px; }
.mh-greet + .mh-search-wrap { margin-top: 4px; }

/* Hero search (centred layout) */
.mh-hero-search {
  display: flex; align-items: center; gap: 12px;
  height: 60px; padding: 0 20px; border-radius: var(--gvs-radius-xl);
  background: var(--gvs-surface); border: 1px solid var(--gvs-border);
  box-shadow: var(--gvs-elev-2); transition: border-color var(--gvs-dur-fast), box-shadow var(--gvs-dur-fast);
}
.mh-hero-search:focus-within { border-color: var(--gvs-primary); box-shadow: var(--gvs-focus-ring); }
.mh-hero-search .material-symbols-rounded { font-size: 26px; color: var(--gvs-fg-3); }
.mh-hero-search input { flex: 1; border: none; background: none; outline: none; font: inherit; font-size: 17px; color: var(--gvs-fg-1); }
.mh-hero-search input::placeholder { color: var(--gvs-fg-3); }

/* Search results panel.
   Anchored to the wrapper rather than the box so the hero and inline variants both position it,
   and z-indexed above the product tiles it overlaps. */
.mh-hero-search-wrap, .mh-search-wrap-inner { position: relative; }
.mh-search-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40;
  max-height: min(60vh, 520px); overflow-y: auto;
  background: var(--gvs-surface); border: 1px solid var(--gvs-border);
  border-radius: var(--gvs-radius-lg); box-shadow: var(--gvs-elev-3);
  padding: 6px;
}
.mh-search-group + .mh-search-group { border-top: 1px solid var(--gvs-border); margin-top: 6px; padding-top: 6px; }
.mh-search-group-head {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gvs-fg-3);
}
.mh-search-group-head .material-symbols-rounded { font-size: 16px; }
.mh-search-hit {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 10px;
  width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  padding: 8px 10px; border-radius: var(--gvs-radius-md); font: inherit; color: var(--gvs-fg-1);
}
.mh-search-hit:hover, .mh-search-hit.on { background: var(--gvs-surface-2); }
.mh-search-hit.on { outline: 2px solid var(--gvs-primary); outline-offset: -2px; }
.mh-search-hit-title { font-weight: 600; }
.mh-search-hit-sub { grid-column: 1; font-size: 12px; color: var(--gvs-fg-3); }
.mh-search-hit-badge {
  grid-row: 1; grid-column: 2; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--gvs-amber-700); background: var(--gvs-amber-50);
  padding: 2px 7px; border-radius: var(--gvs-radius-pill);
}
[data-theme="dark"] .mh-search-hit-badge { color: var(--gvs-amber-300); }
.mh-search-more {
  display: block; padding: 8px 10px; font-size: 12px; font-weight: 600;
  color: var(--gvs-primary); text-decoration: none; border-radius: var(--gvs-radius-md);
}
.mh-search-more:hover { background: var(--gvs-surface-2); }
.mh-search-empty {
  display: flex; align-items: center; gap: 10px; padding: 18px 12px; color: var(--gvs-fg-3);
}
/* A quiet breathing dot rather than a spinner: it sits inside the input, where a spinning ring
   reads as an error state. */
.mh-search-busy {
  width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--gvs-primary);
  animation: mh-search-pulse 1s ease-in-out infinite;
}
@keyframes mh-search-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mh-search-busy { animation: none; opacity: .6; } }

/* ---------- Layout shells ------------------------------------------------- */
.mh-shell { display: flex; align-items: stretch; min-height: calc(100vh - 64px); }

/* Sidebar */
.mh-sidebar {
  width: 248px; flex: none; border-right: 1px solid var(--gvs-border);
  background: var(--gvs-surface); padding: 16px 12px; position: sticky; top: 64px;
  height: calc(100vh - 64px); overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
}
.mh-nav-group { margin-top: 8px; }
.mh-nav-label { padding: 12px 12px 6px; }
.mh-nav-item {
  display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px;
  border-radius: var(--gvs-radius-md); color: var(--gvs-fg-2); font-size: 14px; font-weight: 500;
  width: 100%; text-align: left; transition: background var(--gvs-dur-fast), color var(--gvs-dur-fast);
}
.mh-nav-item:hover { background: var(--gvs-surface-alt); color: var(--gvs-fg-1); }
.mh-nav-item.active { background: var(--gvs-primary-weak); color: var(--gvs-primary); font-weight: 600; }
.mh-nav-item .material-symbols-rounded { font-size: 21px; }
.mh-nav-item .mh-app-tile.xs { width: 24px; height: 24px; border-radius: 6px; box-shadow: none; }
.mh-nav-item .mh-app-tile.xs .mh-mark { width: 15px; height: 15px; }
.mh-nav-item .mh-pip { margin-left: auto; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; background: var(--gvs-surface-sunken); color: var(--gvs-fg-2); }
.mh-nav-item .mh-pip.alert { background: var(--gvs-danger-50); color: var(--gvs-danger-500); }
.mh-sidebar-foot { margin-top: auto; }

/* Nav rows built from GvsNavRow. The icon is a MudBlazor SVG rather than a ligature, so it needs
   its own sizing rule - the existing .mh-nav-item .material-symbols-rounded rule cannot match it. */
.mh-nav-item .mh-nav-icon { width: 21px; height: 21px; flex: 0 0 auto; }
.mh-nav-item .mh-nav-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-nav-item.mh-nav-sub { padding-left: 34px; }
.mh-nav-item.disabled { opacity: .45; cursor: default; pointer-events: none; }
.mh-version { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--gvs-radius-md); transition: background var(--gvs-dur-fast); }
.mh-version:hover { background: var(--gvs-surface-alt); }
.mh-version .mh-ver-label { display: flex; flex-direction: column; line-height: 1.3; text-align: left; }
.mh-version .mh-ver-name { font-size: 13px; color: var(--gvs-fg-2); }
.mh-version .mh-ver-name b { font-weight: 700; color: var(--gvs-fg-1); }
.mh-version .mh-ver-num { font-size: 11.5px; color: var(--gvs-fg-3); font-weight: 500; }
.mh-version .material-symbols-rounded { font-size: 19px; color: var(--gvs-fg-3); }
.mh-version:hover .material-symbols-rounded { color: var(--gvs-primary); }

/* Changelog */
.mh-cl-rel { padding: 18px 0; border-bottom: 1px solid var(--gvs-divider); }
.mh-cl-rel:first-child { padding-top: 4px; }
.mh-cl-rel:last-child { border-bottom: none; padding-bottom: 4px; }
.mh-cl-relhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mh-cl-ver { font-family: var(--gvs-font-display); font-weight: 800; font-size: 17px; color: var(--gvs-fg-1); }
.mh-cl-date { margin-left: auto; font-size: 12.5px; color: var(--gvs-fg-3); }
.mh-cl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mh-cl-list li { display: flex; align-items: flex-start; gap: 10px; }
.mh-cl-tag { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--gvs-radius-pill); margin-top: 1px; min-width: 64px; text-align: center; }
.mh-cl-text { font-size: 14px; color: var(--gvs-fg-1); line-height: 1.45; }

/* Content area */
.mh-main { flex: 1; min-width: 0; }
.mh-canvas { padding: 32px clamp(20px, 4vw, 56px) 80px; }
.mh-canvas.narrow { max-width: 1080px; margin: 0 auto; }
.mh-canvas.centred { max-width: 920px; margin: 0 auto; padding-top: 56px; }

/* Top-nav variant strip */
.mh-topnav { display: flex; align-items: center; gap: 4px; padding: 0 clamp(20px,4vw,56px); height: 48px; border-bottom: 1px solid var(--gvs-border); background: var(--gvs-surface); position: sticky; top: 64px; z-index: 50; overflow-x: auto; }
.mh-topnav-item { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 14px; font-size: 14px; font-weight: 600; color: var(--gvs-fg-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.mh-topnav-item:hover { color: var(--gvs-fg-1); }
.mh-topnav-item.active { color: var(--gvs-primary); border-bottom-color: var(--gvs-primary); }
.mh-topnav-item .material-symbols-rounded { font-size: 19px; }

/* ---------- Greeting ------------------------------------------------------ */
.mh-greet { margin-bottom: 28px; }
.mh-greet.centred { text-align: center; margin-bottom: 28px; }
.mh-greet h1 { font-family: var(--gvs-font-display); font-weight: 800; letter-spacing: -0.02em; color: var(--gvs-fg-1); margin: 0; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; }
.mh-greet .mh-date { display: flex; align-items: center; gap: 8px; color: var(--gvs-fg-3); font-size: 14px; font-weight: 500; margin-top: 8px; }
.mh-greet.centred .mh-date { justify-content: center; }
.mh-greet .mh-date .material-symbols-rounded { font-size: 18px; }

/* ---------- Section heads ------------------------------------------------- */
.mh-section { margin-top: 36px; }
.mh-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.mh-section-head h2 { font-family: var(--gvs-font-sans); font-weight: 700; font-size: 17px; letter-spacing: .01em; color: var(--gvs-fg-1); margin: 0; }
.mh-section-head .mh-see { font-size: 13px; font-weight: 600; color: var(--gvs-primary); display: flex; align-items: center; gap: 2px; }
.mh-section-head .mh-see .material-symbols-rounded { font-size: 16px; }

/* segmented toggle (Worked on / Viewed) */
.mh-seg { display: inline-flex; background: var(--gvs-surface-sunken); border-radius: var(--gvs-radius-pill); padding: 3px; gap: 2px; }
.mh-seg button { padding: 5px 14px; border-radius: var(--gvs-radius-pill); font-size: 13px; font-weight: 600; color: var(--gvs-fg-3); }
.mh-seg button.on { background: var(--gvs-surface); color: var(--gvs-fg-1); box-shadow: var(--gvs-elev-1); }

/* ---------- Launcher cards ------------------------------------------------ */
.mh-launch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; }
.mh-launch {
  display: block; text-align: left; background: var(--gvs-surface); border: 1px solid var(--gvs-border);
  border-radius: var(--gvs-radius-lg); padding: 18px; box-shadow: var(--gvs-elev-1);
  transition: box-shadow var(--gvs-dur-base) var(--gvs-ease-standard), transform var(--gvs-dur-base), border-color var(--gvs-dur-base);
  position: relative; overflow: hidden;
}
.mh-launch::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--app); opacity: .9; }
.mh-launch:hover { box-shadow: var(--gvs-elev-3); transform: translateY(-3px); border-color: color-mix(in srgb, var(--app) 40%, var(--gvs-border)); }
.mh-launch-top { display: flex; align-items: center; gap: 13px; }
.mh-launch .mh-app-tile.md { width: 46px; height: 46px; }
.mh-launch .mh-app-tile.md .mh-mark { width: 26px; height: 26px; }
.mh-launch-name { font-weight: 700; font-size: 17px; color: var(--gvs-fg-1); }
.mh-launch-desc { font-size: 13px; color: var(--gvs-fg-3); margin-top: 1px; }
.mh-launch-stats { display: flex; gap: 18px; margin-top: 16px; }
.mh-stat .mh-stat-v { font-family: var(--gvs-font-display); font-weight: 800; font-size: 26px; color: var(--gvs-fg-1); line-height: 1; }
.mh-stat .mh-stat-v.accent { color: color-mix(in srgb, var(--app) 80%, #000); }
.mh-stat .mh-stat-l { font-size: 11.5px; color: var(--gvs-fg-3); margin-top: 5px; font-weight: 500; }
.mh-launch-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gvs-divider); }
.mh-launch-meta { font-size: 12.5px; color: var(--gvs-fg-3); display: flex; align-items: center; gap: 6px; }
.mh-launch-open { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--app) 80%, #000); }
.mh-launch-open .material-symbols-rounded { font-size: 17px; transition: transform var(--gvs-dur-fast); }
.mh-launch:hover .mh-launch-open .material-symbols-rounded { transform: translateX(3px); }
[data-theme="dark"] .mh-stat .mh-stat-v.accent { color: color-mix(in srgb, var(--app) 55%, #fff); }
[data-theme="dark"] .mh-launch-open { color: color-mix(in srgb, var(--app) 55%, #fff); }
/* Locked launcher card: greyed + a lock state in place of stats/open, but still clickable (opens the lock dialog). */
.mh-launch.locked { opacity: .68; }
.mh-launch.locked::before { background: var(--gvs-border); opacity: .8; }
.mh-launch.locked:hover { transform: none; box-shadow: var(--gvs-elev-1); border-color: var(--gvs-border); }
.mh-launch-locked { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gvs-divider); color: var(--gvs-fg-3); font-size: 13px; font-weight: 600; }
.mh-launch-lock { font-size: 18px; }

/* ---------- Two-column body ----------------------------------------------- */
.mh-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 1080px) { .mh-cols { grid-template-columns: 1fr; } }

/* Card shell */
.mh-card { background: var(--gvs-surface); border: 1px solid var(--gvs-border); border-radius: var(--gvs-radius-lg); box-shadow: var(--gvs-elev-1); }
.mh-card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--gvs-divider); }
.mh-card-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--gvs-fg-1); display: flex; align-items: center; gap: 9px; }
.mh-card-head .mh-count { font-size: 12px; font-weight: 700; color: var(--gvs-fg-2); background: var(--gvs-surface-sunken); border-radius: var(--gvs-radius-pill); padding: 2px 9px; }

/* Attention feed */
.mh-att-row { display: flex; align-items: flex-start; gap: 13px; padding: 14px 18px; transition: background var(--gvs-dur-fast); border-bottom: 1px solid var(--gvs-divider); }
.mh-att-row:last-child { border-bottom: none; }
.mh-att-row:hover { background: var(--gvs-surface-alt); }
.mh-att-icon { flex: none; width: 36px; height: 36px; border-radius: var(--gvs-radius-md); display: grid; place-items: center; }
.mh-att-icon .material-symbols-rounded { font-size: 20px; }
.mh-att-icon.danger { background: var(--gvs-danger-50); color: var(--gvs-danger-500); }
.mh-att-icon.warning { background: var(--gvs-warning-50); color: var(--gvs-warning-700); }
.mh-att-icon.info { background: var(--gvs-info-50); color: var(--gvs-info-500); }
[data-theme="dark"] .mh-att-icon.warning { color: var(--gvs-amber-300); }
.mh-att-body { flex: 1; min-width: 0; }
.mh-att-title { font-size: 14px; font-weight: 600; color: var(--gvs-fg-1); }
.mh-att-meta { font-size: 12.5px; color: var(--gvs-fg-3); margin-top: 2px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mh-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 2px 8px 2px 6px; border-radius: var(--gvs-radius-pill); color: #fff; }
.mh-chip .mh-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.85); }
.mh-att-cta { flex: none; align-self: center; font-size: 12.5px; font-weight: 600; color: var(--gvs-fg-2); border: 1px solid var(--gvs-border); border-radius: var(--gvs-radius-pill); padding: 6px 13px; transition: background var(--gvs-dur-fast), border-color var(--gvs-dur-fast); white-space: nowrap; }
.mh-att-cta:hover { background: var(--gvs-surface-sunken); border-color: var(--gvs-border-strong); }
.mh-att-cta.danger { color: #fff; background: var(--gvs-danger-500); border-color: transparent; }
.mh-att-cta.danger:hover { background: var(--gvs-danger-700); }

/* Recents list */
.mh-rec-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; transition: background var(--gvs-dur-fast); }
.mh-rec-row:hover { background: var(--gvs-surface-alt); }
.mh-rec-row .mh-app-tile.xs { width: 28px; height: 28px; border-radius: 7px; box-shadow: none; }
.mh-rec-row .mh-app-tile.xs .mh-mark { width: 16px; height: 16px; }
.mh-rec-body { flex: 1; min-width: 0; }
.mh-rec-title { font-size: 13.5px; font-weight: 600; color: var(--gvs-fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-rec-meta { font-size: 12px; color: var(--gvs-fg-3); margin-top: 1px; }
.mh-rec-star { color: var(--gvs-fg-3); font-size: 19px; opacity: 0; }
.mh-rec-row:hover .mh-rec-star { opacity: 1; }

/* Admin shortcuts */
.mh-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mh-admin-tile { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid var(--gvs-border); border-radius: var(--gvs-radius-md); background: var(--gvs-surface); transition: background var(--gvs-dur-fast), border-color var(--gvs-dur-fast); }
.mh-admin-tile:hover { background: var(--gvs-surface-alt); border-color: var(--gvs-border-strong); }
.mh-admin-tile .material-symbols-rounded { font-size: 21px; color: var(--gvs-secondary); }
[data-theme="dark"] .mh-admin-tile .material-symbols-rounded { color: var(--gvs-primary); }
.mh-admin-tile span.t { font-size: 13.5px; font-weight: 600; color: var(--gvs-fg-1); }

/* ---------- Account menu + modal ----------------------------------------- */
.mh-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; background: var(--gvs-secondary); box-shadow: var(--gvs-elev-1); }
.mh-bar-right .mh-avatar-btn { border-radius: 50%; transition: box-shadow var(--gvs-dur-fast); margin-left: 4px; }
.mh-bar-right .mh-avatar-btn:hover { box-shadow: var(--gvs-focus-ring); }

.mh-menu { position: absolute; top: 60px; right: 12px; z-index: 2001; width: 300px; background: var(--gvs-surface); border: 1px solid var(--gvs-border); border-radius: var(--gvs-radius-lg); box-shadow: var(--gvs-elev-4); overflow: hidden; animation: mh-pop var(--gvs-dur-base) var(--gvs-ease-decelerate); transform-origin: top right; }
.mh-menu-head { display: flex; align-items: center; gap: 13px; padding: 16px; border-bottom: 1px solid var(--gvs-divider); }
.mh-menu-head .mh-avatar { width: 44px; height: 44px; font-size: 16px; }
.mh-menu-head .mh-mu-name { font-weight: 700; font-size: 15px; color: var(--gvs-fg-1); }
.mh-menu-head .mh-mu-mail { font-size: 12.5px; color: var(--gvs-fg-3); }
.mh-admin-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; font-weight: 700; padding: 2px 9px 2px 7px; border-radius: 999px; background: var(--gvs-navy-900); color: #fff; }
.mh-admin-badge .material-symbols-rounded { font-size: 14px; color: var(--gvs-teal-300); }
.mh-menu-appearance { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 4px; }
.mh-menu-appearance .mh-mu-mail { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.mh-menu-appitems{padding:8px 14px 4px;}
/* justify-content is NOT redundant with text-align here, and removing it will silently centre
   every menu item again: a <button> with display:flex is centred by the browser's own UA sheet,
   and text-align has no say over flex item placement. The tell is a computed justify-content of
   `center` that no rule in document.styleSheets explains. It made the tour row (a button) look
   centred beside the FAQ row (an anchor), which is left by default - two items in one menu,
   aligned differently, with nothing in the CSS to explain why. */
.mh-menu-item { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 11px 16px; font-size: 14px; font-weight: 500; color: var(--gvs-fg-2); width: 100%; text-align: left; transition: background var(--gvs-dur-fast); }
.mh-menu-item:hover { background: var(--gvs-surface-alt); color: var(--gvs-fg-1); }
.mh-menu-item .material-symbols-rounded { font-size: 20px; color: var(--gvs-fg-3); }
.mh-menu-item.danger { color: var(--gvs-danger-500); }
.mh-menu-item.danger .material-symbols-rounded { color: var(--gvs-danger-500); }

/* Avatar photo + sizes (used by GvsUserAvatar) */
.mh-avatar { background-size: cover; background-position: center; background-repeat: no-repeat; }
.mh-avatar.lg { width: 44px; height: 44px; font-size: 16px; }
.mh-avatar.xl { width: 72px; height: 72px; font-size: 24px; }

/* Compact top-bar popovers (appearance / help / notifications) */
.mh-menu.mh-menu-sm { width: 220px; padding: 6px; }
.mh-menu.mh-menu-sm .mh-menu-item { border-radius: var(--gvs-radius-md); padding: 10px 16px; }
.mh-menu-item .mh-menu-check { margin-left: auto; font-size: 20px; color: var(--gvs-primary); }
.mh-menu-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; font-size: 13.5px; color: var(--gvs-fg-2); line-height: 1.4; }
.mh-menu-note .material-symbols-rounded { font-size: 20px; color: var(--gvs-fg-3); flex: 0 0 auto; }

/* Avatar editing (account & security dialog) */
.mh-avatar-edit { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.mh-avatar-edit-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mh-avatar-upload { cursor: pointer; }
.mh-avatar-upload .material-symbols-rounded { font-size: 20px; }
.mh-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.mh-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; box-shadow: var(--gvs-elev-1); transition: transform var(--gvs-dur-fast), border-color var(--gvs-dur-fast); }
.mh-swatch:hover { transform: scale(1.08); }
.mh-swatch.on { border-color: var(--gvs-fg-1); outline: 2px solid var(--gvs-surface); }

.mh-scrim { position: fixed; inset: 0; z-index: 2002; background: rgba(10,26,46,.5); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 24px; animation: mh-fade var(--gvs-dur-base); }
@keyframes mh-fade { from { opacity: 0; } to { opacity: 1; } }
.mh-modal { width: min(520px, 100%); background: var(--gvs-surface); border-radius: var(--gvs-radius-xl); box-shadow: var(--gvs-elev-5); overflow: hidden; animation: mh-rise var(--gvs-dur-slow) var(--gvs-ease-decelerate); }
@keyframes mh-rise { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.mh-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--gvs-divider); }
.mh-modal-head h3 { margin: 0; font-size: 19px; font-weight: 700; color: var(--gvs-fg-1); }
.mh-modal-body { padding: 22px; }
.mh-modal-tabs { display: flex; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--gvs-divider); }
.mh-modal-tab { padding: 12px 4px; margin-right: 16px; font-size: 14px; font-weight: 600; color: var(--gvs-fg-3); border-bottom: 2px solid transparent; }
.mh-modal-tab.on { color: var(--gvs-primary); border-bottom-color: var(--gvs-primary); }

.mh-field { margin-bottom: 16px; }
.mh-field label { display: block; font-size: 13px; font-weight: 600; color: var(--gvs-fg-2); margin-bottom: 6px; }
.mh-input { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid var(--gvs-border-strong); border-radius: var(--gvs-radius-md); background: var(--gvs-surface); transition: border-color var(--gvs-dur-fast), box-shadow var(--gvs-dur-fast); }
.mh-input:focus-within { border-color: var(--gvs-primary); box-shadow: var(--gvs-focus-ring); }
.mh-input input { flex: 1; border: none; background: none; outline: none; font: inherit; font-size: 15px; color: var(--gvs-fg-1); }
.mh-input .material-symbols-rounded { font-size: 20px; color: var(--gvs-fg-3); }
.mh-meter { height: 6px; border-radius: 3px; background: var(--gvs-surface-sunken); overflow: hidden; margin-top: 8px; }
.mh-meter i { display: block; height: 100%; border-radius: 3px; transition: width var(--gvs-dur-base), background var(--gvs-dur-base); }
.mh-help { font-size: 12px; color: var(--gvs-fg-3); margin-top: 6px; }

.mh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--gvs-radius-sm); font-size: 14px; font-weight: 600; letter-spacing: .02em; transition: background var(--gvs-dur-fast), transform 80ms; }
.mh-btn:active { transform: scale(.98); }
.mh-btn.primary { background: var(--gvs-primary); color: var(--gvs-fg-on-primary); }
.mh-btn.primary:hover { background: var(--gvs-primary-hover); }
.mh-btn.ghost { color: var(--gvs-fg-2); }
.mh-btn.ghost:hover { background: var(--gvs-surface-sunken); }
.mh-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--gvs-divider); background: var(--gvs-surface-alt); }

.mh-rowline { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--gvs-divider); }
.mh-rowline:last-child { border-bottom: none; }
.mh-rowline .ml { font-size: 14px; color: var(--gvs-fg-1); font-weight: 600; }
.mh-rowline .ms { font-size: 12.5px; color: var(--gvs-fg-3); margin-top: 2px; }

/* Toast */
.mh-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 120; display: flex; align-items: center; gap: 10px; background: var(--gvs-navy-900); color: #fff; padding: 13px 18px; border-radius: var(--gvs-radius-md); box-shadow: var(--gvs-elev-4); font-size: 14px; font-weight: 500; animation: mh-rise var(--gvs-dur-base) var(--gvs-ease-decelerate); }
.mh-toast .material-symbols-rounded { font-size: 20px; color: var(--gvs-teal-300); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* GvsProductTopBar */
.gvs-ptb{position:sticky;top:0;z-index:60;height:64px;display:flex;align-items:center;gap:12px;padding:0 16px;background:color-mix(in srgb,var(--gvs-surface) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--gvs-border);box-shadow:inset 0 -3px 0 var(--gvs-mc-accent);}
.gvs-ptb-spacer{flex:1;}
.gvs-ptb-right{display:flex;align-items:center;gap:6px;}
.gvs-ptb-switch{display:flex;align-items:center;gap:10px;height:46px;padding:0 10px 0 8px;border-radius:var(--gvs-radius-md);background:none;border:none;cursor:pointer;transition:background var(--gvs-dur-fast);}
.gvs-ptb-switch:hover{background:var(--gvs-surface-sunken);}
.gvs-ptb-waffle{font-size:22px;color:var(--gvs-fg-2);}
.gvs-ptb-chev{font-size:18px;color:var(--gvs-fg-3);}
.gvs-ptb-logo{display:flex;align-items:center;gap:9px;}
.gvs-ptb-mark{width:30px;height:30px;border-radius:50%;background:var(--gvs-mc-accent);display:grid;place-items:center;color:#fff;}
.gvs-ptb-mark .material-symbols-rounded{font-size:19px;}
.gvs-ptb-name{font-size:19px;color:var(--gvs-fg-1);font-weight:300;}
.gvs-ptb-name b{font-weight:800;}
.gvs-ptb-name span{font-weight:300;}
.gvs-ptb-search{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;width:min(440px,34vw);border-radius:var(--gvs-radius-pill);background:var(--gvs-surface-sunken);border:1px solid transparent;color:var(--gvs-fg-3);}
.gvs-ptb-search:focus-within{background:var(--gvs-surface);border-color:var(--gvs-mc-accent);}
.gvs-ptb-search input{flex:1;border:none;background:none;outline:none;font:inherit;font-size:14px;color:var(--gvs-fg-1);}
.gvs-ptb-kbd{font-size:11px;font-weight:600;color:var(--gvs-fg-3);border:1px solid var(--gvs-border);border-radius:5px;padding:2px 6px;}
.gvs-ptb-avatar-btn{border-radius:50%;padding:2px;border:none;background:none;cursor:pointer;margin-left:10px;}
.gvs-ptb-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;}
.gvs-ptb-avatar-btn .mh-avatar{width:36px;height:36px;font-size:14px;}
.gvs-ptb-avatar-btn.online .gvs-ptb-avatar{box-shadow:0 0 0 2px var(--gvs-success-500);}
.gvs-ptb-avatar-btn.offline .gvs-ptb-avatar{box-shadow:0 0 0 2px var(--gvs-danger-500);}
.gvs-ptb-avatar-btn.online .mh-avatar{box-shadow:0 0 0 2px var(--gvs-success-500);}
.gvs-ptb-avatar-btn.offline .mh-avatar{box-shadow:0 0 0 2px var(--gvs-danger-500);}
.gvs-ptb-menu{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--gvs-radius-md);background:none;border:none;cursor:pointer;color:var(--gvs-fg-2);transition:background var(--gvs-dur-fast);}
.gvs-ptb-menu:hover{background:var(--gvs-surface-sunken);}
.gvs-ptb-menu .material-symbols-rounded{font-size:22px;}
@media(max-width:899px){.gvs-ptb-menu{display:flex;}}
.gvs-ptb-iconbtn{position:relative;width:40px;height:40px;border-radius:var(--gvs-radius-pill);display:grid;place-items:center;color:var(--gvs-fg-2);background:none;border:none;cursor:pointer;opacity:1;transition:background var(--gvs-dur-fast),color var(--gvs-dur-fast);}
.gvs-ptb-iconbtn:hover:not(:disabled){background:var(--gvs-surface-sunken);color:var(--gvs-fg-1);}
.gvs-ptb-iconbtn:disabled{cursor:not-allowed;opacity:.55;}
.gvs-ptb-iconbtn .material-symbols-rounded{font-size:22px;}
.gvs-ptb-dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--gvs-danger-500);border:2px solid var(--gvs-surface);}
.gvs-ptb-nav{display:flex;align-items:center;gap:4px;margin-left:8px;padding-left:12px;border-left:1px solid var(--gvs-border);}
/* Collapsed-to-icon nav (mockup mc-topnav). BASE (laptops / medium screens): items are
   icon-only and never change width — hover only tints them, so the search bar next to the strip
   never jiggles. Labels reveal (on hover + for the active route) ONLY on wide desktops via the
   >=1537px block below, where the strip also reserves a fixed width so an expanding label can
   never reflow the search. Below 900px the whole strip is hidden behind the hamburger. */
.gvs-ptb-navitem{display:inline-flex;align-items:center;gap:0;height:40px;padding:0 10px;border-radius:10px;color:var(--gvs-fg-2);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;transition:background var(--gvs-dur-fast) ease,color var(--gvs-dur-fast) ease,padding var(--gvs-dur-base) ease;}
.gvs-ptb-navitem:hover{background:var(--gvs-surface-sunken);color:var(--gvs-fg-1);}
.gvs-ptb-navitem.active{background:var(--gvs-primary-weak);color:var(--gvs-primary);}
.gvs-ptb-navitem[aria-disabled="true"]{opacity:.5;pointer-events:none;}
.gvs-ptb-navitem .material-symbols-rounded{font-size:20px;flex-shrink:0;}
.gvs-ptb-navitem-label{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;margin-left:0;transition:max-width var(--gvs-dur-base) ease,opacity var(--gvs-dur-fast) ease,margin-left var(--gvs-dur-base) ease;}
@media(min-width:1537px){
    .gvs-ptb-nav{width:450px;overflow:hidden;}
    .gvs-ptb-navitem:hover,.gvs-ptb-navitem.active{padding:0 13px;}
    .gvs-ptb-navitem:hover .gvs-ptb-navitem-label,.gvs-ptb-navitem.active .gvs-ptb-navitem-label{max-width:150px;opacity:1;margin-left:8px;}
}
@media(max-width:899px){.gvs-ptb-nav{display:none;}}
.gvs-ptb-centre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:min(420px,34vw);display:flex;justify-content:center;align-items:center;min-width:0;padding:0 12px;font-weight:600;}
.gvs-ptb-centre>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(max-width:700px){.gvs-ptb-centre{display:none;}}

/* ---------- App lock dialog ------------------------------------------------ */
.mh-lock-dialog { position: fixed; z-index: 2001; top: 64px; left: 12px; width: 320px; background: var(--gvs-surface); border: 1px solid var(--gvs-border); border-radius: var(--gvs-radius-lg); box-shadow: var(--gvs-elev-4); padding: 16px; }
.mh-lock-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mh-lock-title { font-weight: 700; }
.mh-lock-body { font-size: 13.5px; color: var(--gvs-fg-2); margin: 0 0 14px; }
.mh-lock-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.mh-lock-cta { background: var(--gvs-primary); color: #fff; border: none; border-radius: var(--gvs-radius-md); padding: 8px 14px; font-weight: 600; cursor: pointer; }
.mh-lock-close { background: none; border: none; color: var(--gvs-fg-3); cursor: pointer; }
.mh-lock-contact { font-size: 12.5px; color: var(--gvs-fg-3); margin-right: auto; }

/* ---------- GvsNavSection -------------------------------------------------- */
.mh-nav-section-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; border-radius: 8px; width: 100%; text-align: left; }
.mh-nav-section-head:hover { background: var(--gvs-surface-alt); }
.mh-nav-section-head .mh-nav-chevron { margin-left: auto; width: 18px; height: 18px; }
.mh-nav-section-body { display: flex; flex-direction: column; }

/* ---------- GvsNavSidebar -------------------------------------------------- */
/* collapsed genuinely hides the rail at every width - there is no docked-desktop-rail override
   here. GvsNavSidebar's own consumer owns the hamburger/"Close Menu"/persisted preference that
   toggle it, so a desktop-only override would make those controls dead on desktop. */
.mh-sidebar.collapsed { display: none; }

/* GvsSidebarRow wraps itself in GvsTooltip so a long name can be read in full on hover. MudTooltip's
   ACTIVATOR is .mud-tooltip-root.mud-tooltip-inline, an inline-block that sizes to the row's natural,
   untruncated width - measured at 351px inside a 240px rail - so the row overflowed the sidebar and was
   clipped instead of ellipsising, and the tooltip anchored to the right edge of that oversized box,
   appearing detached from the name. Constraining the activator to the rail's width is what makes
   .gvs-ctx-body's text-overflow: ellipsis actually engage.

   It must be global, not in GvsSidebarRow.razor.css: the activator is MudBlazor's element and carries no
   scope attribute. GvsTooltip's own Class lands on the POPUP (.mud-popover.mud-tooltip), which is why
   gvs-ctx-tipwrap cannot do this job. :has() keeps it to wrappers that directly hold a row, so tooltips
   on icon buttons elsewhere are untouched. */
.mud-tooltip-root:has(> .gvs-ctx) {
  display: block;
  width: 100%;
}

/* Shared sidebar collapse chevron (GvsSidebarChevron). Fixed to the bottom-left of the viewport and
   sliding on `left`, so it sits at the screen edge when the rail is collapsed and just inside the rail's
   right edge when open - the movement reads as the rail pushing it. It lives OUTSIDE the rail in the
   markup because .mh-sidebar.collapsed is display:none and would hide a nested control exactly when the
   reopen affordance is needed. --gvs-rail-width lets each product set its own rail width: .mh-sidebar is
   248px, MyCleaning's MudDrawer supplies its own. The hover rule nudges it clear so it stays grabbable
   while the pointer is over the rail. */
.gvs-rail-chevron {
  position: fixed; bottom: 0; left: 0; z-index: 55;
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  cursor: pointer; color: var(--gvs-fg-3);
  background: var(--gvs-surface);
  border: 1px solid var(--gvs-border); border-left: none; border-bottom: none;
  border-top-right-radius: var(--gvs-radius-md);
  transition: left 225ms cubic-bezier(0, 0, .2, 1), background var(--gvs-dur-fast), color var(--gvs-dur-fast);
}
.gvs-rail-chevron:hover { color: var(--gvs-fg-1); background: var(--gvs-surface-alt); }
.gvs-rail-chevron .material-symbols-rounded { font-size: 20px; }
/* Open, it sits just PAST the rail's right edge, never over it. Tucking it inside (rail - 2.25rem, as
   MyCleaning originally did) put it on top of the footer's changelog icon, which then swallowed the
   click - and no z-index would fix that without the chevron covering a real control. Outside the rail
   there is nothing to fight, so no hover nudge is needed either. */
.gvs-rail-chevron.open { left: var(--gvs-rail-width, 248px); }

/* Below the shell's breakpoint the top bar's own hamburger is the toggle, so a second control would
   just cover content on a small screen. */
@media (max-width: 899px) {
  .gvs-rail-chevron { display: none; }
}
.mh-sidebar-body { display: flex; flex-direction: column; overflow-y: auto; flex: 1 1 auto; }

/* ---------- Notification item -------------------------------------------- */
/* A notification is two lines, unlike the single-line menu items around it. */
.mh-menu-item.mh-notif-item { align-items: flex-start; height: auto; padding: 10px 14px; text-align: left; }
.mh-notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mh-notif-title { font-weight: 600; color: var(--gvs-fg-1); }
.mh-notif-sub { font-size: 12px; color: var(--gvs-fg-3); white-space: normal; }

/* ==========================================================================
   RESPONSIVE LAYER — KEEP THIS LAST IN THIS FILE
   --------------------------------------------------------------------------
   Ported from the design kit's mobile.css. The kit says "link mobile.css last";
   here it is appended to the end of this stylesheet instead, because an @import
   would place these rules BEFORE the ones above and lose every equal-specificity
   tie (.mh-canvas padding, .mh-bar gap, and so on). Same guarantee, and no
   consumer has to remember a fourth <link>.

   The kit's rules named each admin page's own copy of a pattern —
   ".us-head, .rg-head, .lo-head, .lc-head, .op-head, .au-head" and the same again
   for tables and toolbars. Those are now one shared class each, so most of these
   rules are a single selector. Page-specific responsive behaviour (which table
   cell lands where) stays with the page.

   Breakpoints
     900px  sidebar becomes an off-canvas drawer
     700px  single column, toolbars stack, wide tables become stacked cards
     560px  handset: compressed app bar, dialogs become bottom sheets
   Nothing here changes desktop rendering.
   ========================================================================== */

/* Hidden until the drawer layout is active. */
.mh-navtoggle, .mh-drawer-head { display: none; }

/* Set by gvs-shell.js while the drawer is open: <body> is outside the Blazor tree,
   so the content behind the drawer would otherwise scroll under the user's thumb. */
body.gvs-nav-locked { overflow: hidden; }

@media (min-width: 901px) { .mh-nav-scrim { display: none; } }

@media (max-width: 900px) {
  .mh-navtoggle { display: grid; }

  /* Sidebar → off-canvas drawer. The open flag sits on .mh-root, not <html>:
     Blazor owns that element, and the kit's html[data-nav] would need JS to write
     to a node outside the app. */
  .mh-shell { display: block; min-height: calc(100vh - 64px); }
  .mh-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; width: min(288px, 84vw);
    z-index: 95; padding-top: 14px; border-right: 1px solid var(--gvs-border);
    box-shadow: var(--gvs-elev-4); transform: translateX(-100%);
    transition: transform var(--gvs-dur-base) var(--gvs-ease-standard);
    overscroll-behavior: contain; overflow-y: auto;
  }
  .mh-root[data-nav="open"] .mh-sidebar { transform: none; }

  /* A collapsed rail is a desktop idea; on a handset the drawer is either open or
     shut, so the collapsed modifier must not hide it. */
  .mh-sidebar.collapsed { display: flex; }

  .mh-nav-scrim {
    position: fixed; inset: 0; z-index: 94; background: rgba(10,26,46,.5);
    backdrop-filter: blur(2px); opacity: 0; pointer-events: none;
    transition: opacity var(--gvs-dur-base) var(--gvs-ease-standard);
  }
  .mh-root[data-nav="open"] .mh-nav-scrim { opacity: 1; pointer-events: auto; }

  /* The drawer needs its own header so its first item is not under the app bar. */
  .mh-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 2px 4px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--gvs-divider);
  }
  .mh-drawer-head .gvs-overline { color: var(--gvs-fg-3); padding-left: 8px; }
  .mh-sidebar .mh-nav-item { height: 48px; font-size: 15px; }
  .mh-sidebar .mh-version { padding: 12px; }
  .mh-rail-chevron, .gvs-rail-chevron { display: none; }

  .mh-main { width: 100%; }
  .mh-topnav { top: 64px; }

  /* App bar: the in-bar search is the first thing to go. */
  .mh-bar { gap: 8px; padding: 0 10px; }
  .mh-bar .mh-search { display: none; }
  .mh-bar-right { gap: 0; }
  .mh-switch-trigger { gap: 7px; padding: 0 6px; }
  .mh-switch-panel { left: 8px; right: 8px; width: auto; max-width: 380px; }

  .mh-canvas { padding: 22px 18px 72px; }
  .mh-canvas.centred { padding-top: 30px; }
  .mh-cols { grid-template-columns: 1fr; gap: 18px; }
  .mh-section { margin-top: 28px; }
  .mh-launch-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }

  /* Product top bar (the library's own chrome, which the kit does not cover). */
  .gvs-ptb-search { display: none; }
  .gvs-ptb-right { gap: 2px; }
}

@media (max-width: 700px) {
  /* Page header and toolbar stack instead of squeezing. One rule now, where the
     kit needed six. */
  .gvs-page-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .gvs-page-toolbar { gap: 8px; flex-wrap: wrap; }
  .gvs-page-toolbar .mh-search { width: 100%; }

  /* A button never squashes its label: secondaries share a row if they fit, the
     primary takes a full-width row of its own. */
  .mh-btn { white-space: nowrap; }
  .gvs-page-toolbar .mh-btn { flex: 1 1 auto; min-width: fit-content; justify-content: center; }
  .gvs-page-toolbar .mh-btn.primary { flex: 1 0 100%; }
  .gvs-page-toolbar .gvs-select, .gvs-page-toolbar .gvs-select select { width: 100%; }

  /* Segmented and tab rows scroll rather than wrap mid-control. */
  .mh-seg, .mh-modal-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .mh-seg::-webkit-scrollbar, .mh-modal-tabs::-webkit-scrollbar { display: none; }
  .mh-modal-tabs .mh-modal-tab { white-space: nowrap; }

  /* Wide tables become stacked cards — row data should never need sideways
     scrolling. thead is dropped and each row becomes a two-column card. Which
     cell lands where is the page's business; this is the mechanism. */
  .gvs-dt-wrap, .gvs-dt-scroll { overflow: visible; }
  .gvs-dt { min-width: 0; width: 100%; display: block; }
  .gvs-dt thead { display: none; }
  .gvs-dt tbody { display: block; width: 100%; }
  .gvs-dt tbody tr {
    display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; align-items: center;
    padding: 14px 16px; border-bottom: 1px solid var(--gvs-divider);
  }
  .gvs-dt tbody tr:last-child { border-bottom: none; }
  .gvs-dt tbody td { padding: 0 !important; border: none !important; display: block; min-width: 0; }
  .gvs-dt tbody td[colspan] { grid-column: 1 / -1; }
  .gvs-dt tbody td.gvs-dt-actions { grid-column: 2; justify-self: end; }

  /* A cell out of its column needs its own label to stay readable. */
  .gvs-dt tbody td[data-label]::before {
    content: attr(data-label); display: block; font-size: 10.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--gvs-fg-3); margin-bottom: 3px;
  }

  .gvs-pager { justify-content: space-between; }
  .gvs-empty { padding: 40px 16px; }

  .mh-card { border-radius: var(--gvs-radius-md); }
  .mh-att-row { align-items: flex-start; }
  .mh-att-cta { align-self: flex-start; }
  .mh-section-head { align-items: flex-start; gap: 10px; }
  .mh-section-head h2 { min-width: 0; }

  /* Dense two-pane layouts have to be allowed to shrink. */
  .mh-cols > * { min-width: 0; }
}

@media (max-width: 560px) {
  /* Handset app bar: the wordmark drops to its mark. */
  .mh-bar { height: 56px; padding: 0 6px; }
  .mh-shell { min-height: calc(100vh - 56px); }
  .mh-topnav { top: 56px; }
  .mh-wordmark .mh-name { display: none; }
  .mh-switch-trigger .mh-chev { display: none; }
  .mh-iconbtn { width: 38px; height: 38px; }
  .mh-iconbtn .material-symbols-rounded { font-size: 21px; }
  .mh-switch-panel { top: 54px; }
  .gvs-ptb-name .gvs-ptb-suffix, .gvs-ptb-chev { display: none; }

  .mh-canvas { padding: 18px 14px 64px; }
  .mh-search-wrap, .mh-hero-search, .mh-search-wrap .mh-search { min-width: 0; max-width: 100%; }
  .mh-search-wrap .mh-search input, .mh-hero-search input { min-width: 0; }
  .mh-hero-search { height: 52px; padding: 0 14px; }
  .mh-hero-search .mh-beta, .mh-search-wrap .mh-kbd, .mh-hero-search .mh-kbd { display: none; }
  .mh-search-wrap .mh-beta { flex: none; }
  .mh-greet { margin-bottom: 20px; }
  .mh-greet h1 { font-size: clamp(24px, 7vw, 30px); }
  .gvs-page-head h1 { font-size: clamp(22px, 6.5vw, 27px); }
  .mh-launch-grid { grid-template-columns: 1fr; }

  /* Dialogs become bottom sheets. */
  .mh-scrim { padding: 0; place-items: end stretch; }
  .mh-modal {
    width: 100%; max-height: 92vh; display: flex; flex-direction: column;
    border-radius: var(--gvs-radius-2xl) var(--gvs-radius-2xl) 0 0;
    animation: mh-sheet var(--gvs-dur-slow) var(--gvs-ease-decelerate);
  }
  @keyframes mh-sheet { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .mh-modal-head { padding: 16px 18px; }
  .mh-modal-head h3 { font-size: 17px; }
  .mh-modal-body { padding: 18px; overflow-y: auto; }
  .mh-modal-tabs { padding: 0 18px; }
  .mh-modal-foot { padding: 14px 18px; }
  .mh-modal-foot .mh-btn { flex: 1; justify-content: center; }
  .mh-modal-foot.gvs-modal-foot-split { flex-wrap: wrap; gap: 10px; }
  .gvs-modal-foot-actions { flex: 1 1 100%; }

  /* Menus sit as sheets too, so they cannot run off-screen. */
  .mh-menu { left: 8px !important; right: 8px; width: auto !important; min-width: 0; }
  .mh-toast { left: 12px; right: 12px; transform: none; justify-content: center; }

  /* Touch targets: nothing interactive below 44px on a handset. */
  .mh-btn, .mh-input, .gvs-rowbtn, .mh-att-cta { min-height: 44px; }
  .gvs-select select { min-height: 44px; }
  .mh-seg button { min-height: 36px; }
  .gvs-dt tbody tr { padding: 13px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mh-sidebar, .mh-nav-scrim, .mh-modal { transition: none !important; animation: none !important; }
}