/* MAHTECH One — the menu, top bar and section tabs, the same on every page. */
:root { --m-side: 240px; --m-navy: #012754; --m-blue: #0a74d9; --m-line: #d5dde8; --m-muted: #5a6880; --m-top: 60px; }

.m-side { display: none; }
.m-top { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 8px; min-height: var(--m-top); padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--m-line); }
.m-top h1 { min-width: 0; margin: 0; font-size: 1.08rem; font-weight: 700; color: var(--m-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-logo { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--m-navy); }
.m-back { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; padding: 0; color: var(--m-navy); background: #f1f4f8; border: 0; border-radius: 10px; cursor: pointer; }
.m-back:hover { background: #e4eaf2; }
.m-back:focus-visible, .m-icon:focus-visible, .m-plus summary:focus-visible { outline: 2px solid var(--m-blue); outline-offset: 2px; }
.m-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.m-sync { max-width: 34vw; font-size: 0.74rem; text-align: right; color: var(--m-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-sync.ok { color: #157347; }
.m-sync.bad { color: #b42318; }
.m-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--m-navy); background: none; border-radius: 10px; }
.m-icon:hover { background: #f1f4f8; }

/* the + button */
.m-plus { position: relative; }
.m-plus summary { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 10px; font-weight: 700; color: #fff; background: var(--m-blue); border-radius: 10px; cursor: pointer; list-style: none; }
.m-plus summary::-webkit-details-marker { display: none; }
.m-plus summary span { display: none; }
.m-plus-list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; display: grid; width: 220px; padding: 6px; background: #fff; border: 1px solid var(--m-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(1, 39, 84, 0.18); }
.m-plus-list a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 600; color: var(--m-navy); border-radius: 8px; }
.m-plus-list a:hover { background: #f1f4f8; }

/* tabs at the top of a section */
.m-subs { position: sticky; top: var(--m-top); z-index: 14; display: flex; gap: 4px; padding: 0 12px; overflow-x: auto; background: #fff; border-bottom: 1px solid var(--m-line); scrollbar-width: none; }
.m-subs:empty { display: none; }
.m-subs a { flex-shrink: 0; display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 600; color: var(--m-muted); border-bottom: 3px solid transparent; }
.m-subs a:hover { color: var(--m-navy); }
.m-subs a.on { color: var(--m-navy); border-bottom-color: var(--m-blue); }

/* phone bar */
.m-bottom { position: fixed; inset: auto 0 0 0; z-index: 15; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding-bottom: env(safe-area-inset-bottom, 0px); background: #fff; border-top: 1px solid var(--m-line); }
.m-bottom a { position: relative; display: grid; justify-items: center; gap: 2px; padding: 9px 2px 8px; font-size: 0.72rem; font-weight: 600; color: var(--m-muted); }
.m-bottom a.on { color: var(--m-navy); }
.m-bottom a.on svg { color: var(--m-blue); }
.m-dot { position: absolute; top: 7px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: #d92d20; }
.m-shell .main { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--app-bar-space, 0px)); }

@media (min-width: 901px) {
  .m-shell { padding-left: var(--m-side); }
  .m-side { position: fixed; inset: 0 auto 0 0; z-index: 20; width: var(--m-side); display: flex; flex-direction: column; gap: 1px; padding: 14px 12px 10px; color: #c6d3e4; background: var(--m-navy); overflow-y: auto; }
  .m-side-logo { display: block; padding: 0 8px 10px; }
  .m-side-logo img { display: block; width: 170px; height: auto; }
  .m-side a.m-item { display: flex; align-items: center; gap: 11px; min-height: 37px; padding: 0 10px; font-weight: 550; color: #c6d3e4; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; }
  .m-side a.m-item:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
  .m-side a.m-item.on { color: #fff; background: rgba(255, 255, 255, 0.1); border-left-color: #4ba0f2; }
  .m-side a.m-item.on svg { color: #6fb1f5; }
  .m-group { margin: 10px 10px 2px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8ba3c2; }
  .m-count { margin-left: auto; min-width: 22px; padding: 1px 7px; font-size: 0.74rem; font-weight: 700; text-align: center; color: #fff; background: #d92d20; border-radius: 99px; }
  .m-user { display: grid; gap: 4px; margin-top: auto; padding: 12px 10px 2px; font-size: 0.84rem; word-break: break-word; border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .m-user .link, .m-user a { justify-self: start; font-weight: 600; color: #9ec2ff; background: none; border: 0; padding: 0; font-family: inherit; font-size: inherit; cursor: pointer; }
  .m-bottom, .m-logo { display: none; }
  .m-top { padding: 10px 24px; }
  .m-top h1 { font-size: 1.25rem; }
  .m-subs { padding: 0 24px; }
  .m-plus summary { padding: 0 14px; }
  .m-plus summary span { display: inline; }
  .m-shell .main { padding-bottom: 40px; }
  .m-sync { max-width: 340px; }
}

@media print {
  .m-side, .m-top, .m-subs, .m-bottom { display: none !important; }
}

.m-side a, .m-top a, .m-subs a, .m-bottom a, .m-plus-list a { text-decoration: none; }

/* the client journey */
.jn-wrap { overflow-x: auto; scrollbar-width: thin; }
.jn-bar { display: flex; min-width: max-content; margin: 0; padding: 4px 0 8px; list-style: none; }
.jn-bar li { position: relative; display: grid; justify-items: center; gap: 4px; width: 84px; font-size: 0.74rem; font-weight: 600; text-align: center; color: var(--m-muted); }
.jn-bar li + li::before { content: ''; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--m-line); }
.jn-bar li.jn-done + li::before, .jn-bar li.jn-off + li::before { background: #8fc1a6; }
.jn-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; font-size: 0.78rem; font-weight: 700; color: var(--m-muted); background: #fff; border: 2px solid var(--m-line); border-radius: 50%; }
.jn-done .jn-dot { color: #fff; background: #157347; border-color: #157347; }
.jn-off .jn-dot { color: var(--m-muted); background: #eef1f5; border-color: #eef1f5; }
.jn-now { color: var(--m-navy); }
.jn-now .jn-dot { color: #fff; background: var(--m-blue); border-color: var(--m-blue); box-shadow: 0 0 0 4px rgba(10, 116, 217, 0.18); }
.jn-done { margin: 0 0 10px; padding: 9px 12px; border-radius: 7px; background: #e4f4ec; color: #0b5e39; font-weight: 600; }
.jn-next { display: grid; gap: 8px; border-left: 4px solid var(--m-blue); }
.jn-next h3 { margin: 0; font-size: 1.2rem; color: var(--m-navy); }
.jn-next p { margin: 0; }
.jn-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--m-blue); }
.jn-flat { padding: 12px 14px; background: #f4f8fd; border-radius: 8px; }
.jn-checks { display: grid; gap: 8px; margin: 4px 0; }
.jn-all summary { font-weight: 700; color: var(--m-navy); cursor: pointer; }
.jn-all .list { margin-top: 12px; }
.cl-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--m-line); scrollbar-width: none; }
.cl-tabs a { flex-shrink: 0; display: flex; align-items: center; min-height: 42px; padding: 0 12px; font-weight: 600; color: var(--m-muted); text-decoration: none; border-bottom: 3px solid transparent; }
.cl-tabs a.on { color: var(--m-navy); border-bottom-color: var(--m-blue); }
.cl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-chip { min-height: 36px; padding: 0 14px; font: inherit; font-weight: 600; color: var(--m-navy); background: #fff; border: 1px solid var(--m-line); border-radius: 99px; cursor: pointer; }
.cl-chip.on { color: #fff; background: var(--m-navy); border-color: var(--m-navy); }
.sec .btn { letter-spacing: normal; text-transform: none; }
.jn-wrap { position: relative; }
.stat-link { display: block; color: inherit; text-decoration: none; }
.stat-link:hover { border-color: var(--m-blue); }
.jn-client { display: grid; gap: 8px; }