/* ============================================================
   EVP Portal — Mobile app shell (<768px)
   Pages opt in by setting ViewBag.MobileAppShell = true, which adds
   .mobile-appshell to <body> and renders _MobileTabbar.cshtml.
   Visual language follows the shipped /PPO/Add mobile wizard:
   purple primary #6f5bd3, #fbfaff canvas, 14px-radius cards,
   fixed bottom bars with safe-area padding.
   ============================================================ */

:root {
  --mas-primary: #6f5bd3;
  --mas-primary-light: rgba(111, 91, 211, .10);
  --mas-border-strong: rgba(111, 91, 211, .22);
  --mas-border: rgba(111, 91, 211, .14);
  --mas-text: #1f2450;
  --mas-muted: #8f88b7;
  --mas-tabbar-h: 68px;
}

/* Mobile-only chrome stays hidden on desktop */
.m-tabbar,
.m-home {
  display: none;
}

@media (max-width: 767.98px) {

  /* ---------- Shell swap: hide desktop chrome, free the canvas ---------- */
  body.mobile-appshell {
    background: #fbfaff;
  }

  /* The rail and the sidebar are two separate elements, and the backdrop belongs
     to the sidebar's off-canvas mode — hiding the rail alone leaves the menu
     itself on the page, which is what it did. */
  body.mobile-appshell .app-topbar,
  body.mobile-appshell .color-line,
  body.mobile-appshell .app-rail,
  body.mobile-appshell .sidenav-menu,
  body.mobile-appshell #custom-backdrop {
    display: none !important;
  }

  body.mobile-appshell .page-content {
    margin: 0 !important;
    padding: 0 0 calc(var(--mas-tabbar-h) + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 100vh !important;
  }

  body.mobile-appshell .page-content > .page-container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 14px 0 !important;
  }

  [data-bs-theme="dark"] body.mobile-appshell,
  html.ew-theme-dark body.mobile-appshell {
    background: #16141f;
  }

  /* On the dashboard the desktop widgets give way to the super-app home;
     modal wrappers stay untouched so announcement popups keep working. */
  body.mobile-appshell #dashboardHome .dh-welcome,
  body.mobile-appshell #dashboardHome .dh-ann,
  body.mobile-appshell #dashboardHome #performanceCard,
  body.mobile-appshell #dashboardHome #summaryGrid,
  body.mobile-appshell #dashboardHome .dh-main,
  body.mobile-appshell #dashboardHome .dh-agent {
    display: none !important;
  }

  /* PPO approval bulk bar must sit above the tab bar */
  body.mobile-appshell .ppoa-bulkbar {
    bottom: calc(var(--mas-tabbar-h) + env(safe-area-inset-bottom, 0px) + 8px) !important;
  }

  /* ---------- Bottom tab bar ---------- */
  body.mobile-appshell .m-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--mas-border);
    box-shadow: 0 -8px 24px rgba(111, 91, 211, .10);
  }

  [data-bs-theme="dark"] body.mobile-appshell .m-tabbar,
  html.ew-theme-dark body.mobile-appshell .m-tabbar {
    background: #211d30;
  }

  .m-tabbar .m-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 0 2px;
    border: 0;
    background: none;
    color: var(--mas-muted);
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    position: relative;
  }

  .m-tabbar .m-tab i {
    font-size: 21px;
    line-height: 1;
  }

  .m-tabbar .m-tab.active {
    color: var(--mas-primary);
  }

  .m-tabbar .m-tab-cta {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border: 0;
    background: none;
    color: var(--mas-primary);
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
  }

  .m-tabbar .m-tab-cta .cta-circle {
    width: 46px;
    height: 46px;
    margin-top: -20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #6f5bd3, #9b8cf0);
    color: #fff;
    font-size: 24px;
    box-shadow: 0 10px 24px rgba(111, 91, 211, .45);
    border: 3px solid #fff;
  }

  [data-bs-theme="dark"] .m-tabbar .m-tab-cta .cta-circle,
  html.ew-theme-dark .m-tabbar .m-tab-cta .cta-circle {
    border-color: #211d30;
  }

  .m-tabbar .m-tab .m-tab-dot {
    position: absolute;
    top: 2px;
    left: calc(50% + 6px);
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: grid;
    place-items: center;
  }

  /* ---------- Super-app home (Dashboard) ---------- */
  body.mobile-appshell .m-home {
    display: block;
  }

  .m-home .m-home-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 2px 12px;
  }

  .m-home .m-home-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6f5bd3, #9b8cf0);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    flex: 0 0 auto;
  }

  .m-home .m-home-title {
    flex: 1 1 auto;
    min-width: 0;
  }

  .m-home .m-home-title h1 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--mas-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .m-home .m-home-title p {
    margin: 1px 0 0;
    font-size: 12px;
    color: var(--mas-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .m-home .m-home-bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1.5px solid var(--mas-border-strong);
    background: #fff;
    color: var(--mas-primary);
    font-size: 17px;
    flex: 0 0 auto;
    position: relative;
  }

  [data-bs-theme="dark"] .m-home .m-home-bell,
  html.ew-theme-dark .m-home .m-home-bell {
    background: #211d30;
  }

  .m-home .m-home-bell .m-tab-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: grid;
    place-items: center;
  }

  /* Hero */
  .m-home .m-hero {
    padding: 15px 16px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #6f5bd3 0%, #9b8cf0 100%);
    color: #fff;
    margin-bottom: 12px;
  }

  .m-home .m-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .m-home .m-hero-top h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
  }

  .m-home .m-hero-top .m-hero-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-size: 10.5px;
    font-weight: 700;
  }

  .m-home .m-hero-links {
    display: flex;
    gap: 8px;
    margin-top: 13px;
  }

  .m-home .m-hero-link {
    flex: 1;
    padding: 10px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
    text-decoration: none;
    color: #fff;
    text-align: center;
  }

  .m-home .m-hero-link i {
    font-size: 18px;
    line-height: 1;
  }

  .m-home .m-hero-link span {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    opacity: .9;
  }

  .m-home .m-hero-link.is-alert {
    background: rgba(255, 255, 255, .92);
    color: var(--mas-primary);
  }

  /* Announcement ticker */
  .m-home .m-ann-line {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-bottom: 14px;
    padding: 10px 13px;
    border: 1px solid #ffd591;
    border-radius: 12px;
    background: #fff7e6;
    text-align: left;
    cursor: pointer;
  }

  [data-bs-theme="dark"] .m-home .m-ann-line,
  html.ew-theme-dark .m-home .m-ann-line {
    background: rgba(250, 173, 20, .12);
    border-color: rgba(250, 173, 20, .3);
  }

  .m-home .m-ann-line .m-ann-tag {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .03em;
  }

  .m-home .m-ann-line p {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #ad6800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  [data-bs-theme="dark"] .m-home .m-ann-line p,
  html.ew-theme-dark .m-home .m-ann-line p {
    color: #fadb14;
  }

  .m-home .m-ann-line .m-ann-count {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ad6800;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: grid;
    place-items: center;
  }

  /* Service sections */
  .m-home .m-svc-section {
    margin-bottom: 14px;
    padding: 14px 10px 4px;
    border: 1px solid var(--mas-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(111, 91, 211, .05);
  }

  [data-bs-theme="dark"] .m-home .m-svc-section,
  html.ew-theme-dark .m-home .m-svc-section {
    background: #211d30;
  }

  .m-home .m-svc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 6px 4px;
  }

  .m-home .m-svc-head h2 {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mas-primary);
  }

  .m-home .m-svc-head span {
    font-size: 11px;
    font-weight: 700;
    color: var(--mas-muted);
  }

  .m-home .m-svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .m-home .m-svc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 2px 12px;
    border: 0;
    background: none;
    text-decoration: none;
    color: var(--mas-text);
    text-align: center;
    position: relative;
    cursor: pointer;
  }

  .m-home .m-svc .m-svc-ico {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--mas-primary-light);
    color: var(--mas-primary);
    font-size: 20px;
  }

  .m-home .m-svc b {
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--mas-text);
  }

  [data-bs-theme="dark"] .m-home .m-svc b,
  html.ew-theme-dark .m-home .m-svc b,
  [data-bs-theme="dark"] .m-home .m-home-title h1,
  html.ew-theme-dark .m-home .m-home-title h1 {
    color: #e7e3f7;
  }

  .m-home .m-svc.is-teal .m-svc-ico { background: rgba(2, 192, 206, .12); color: #059aa5; }
  .m-home .m-svc.is-amber .m-svc-ico { background: #fef3c7; color: #b45309; }
  .m-home .m-svc.is-green .m-svc-ico { background: #d1fae5; color: #15803d; }
  .m-home .m-svc.is-rose .m-svc-ico { background: #ffe4e6; color: #be185d; }

  [data-bs-theme="dark"] .m-home .m-svc .m-svc-ico,
  html.ew-theme-dark .m-home .m-svc .m-svc-ico { background: rgba(111, 91, 211, .2); }
  [data-bs-theme="dark"] .m-home .m-svc.is-teal .m-svc-ico,
  html.ew-theme-dark .m-home .m-svc.is-teal .m-svc-ico { background: rgba(2, 192, 206, .18); color: #4dd4dd; }
  [data-bs-theme="dark"] .m-home .m-svc.is-amber .m-svc-ico,
  html.ew-theme-dark .m-home .m-svc.is-amber .m-svc-ico { background: rgba(245, 158, 11, .18); color: #fcd34d; }
  [data-bs-theme="dark"] .m-home .m-svc.is-green .m-svc-ico,
  html.ew-theme-dark .m-home .m-svc.is-green .m-svc-ico { background: rgba(21, 128, 61, .2); color: #86efac; }
  [data-bs-theme="dark"] .m-home .m-svc.is-rose .m-svc-ico,
  html.ew-theme-dark .m-home .m-svc.is-rose .m-svc-ico { background: rgba(190, 24, 93, .2); color: #f9a8d4; }
}

/* ============================================================
   Mobile sub-page header (shared)
   Pages that opt into the app shell lose the desktop topbar on
   phones, so each sub-page carries its own back bar.
   ============================================================ */

.m-subhead {
  display: none;
}

@media (max-width: 767.98px) {
  body.mobile-appshell .m-subhead {
    display: block;
    position: sticky;
    top: 0;
    z-index: 30;
    /* Full-bleed over the .page-container's 12px/14px padding */
    margin: -12px -14px 12px;
    padding: 14px 16px 10px;
    background: #fbfaff;
  }

  [data-bs-theme="dark"] body.mobile-appshell .m-subhead,
  html.ew-theme-dark body.mobile-appshell .m-subhead {
    background: #16141f;
  }
}

/* The row's own styling is not width-scoped: .m-subhead is display:none until a
   shell turns it on, so these are inert everywhere else — and the FreshOps shell,
   which shows the bar at any width, reuses them instead of keeping a second copy. */
.m-subhead .m-subhead-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.m-subhead .m-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid var(--mas-border-strong);
  background: #fff;
  color: var(--mas-primary);
  font-size: 17px;
  flex: 0 0 auto;
  text-decoration: none;
}

[data-bs-theme="dark"] .m-subhead .m-iconbtn,
html.ew-theme-dark .m-subhead .m-iconbtn {
  background: #211d30;
}

.m-subhead .m-subhead-title {
  flex: 1 1 auto;
  min-width: 0;
}

.m-subhead .m-subhead-title h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--mas-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-subhead .m-subhead-title p {
  margin: 1px 0 0;
  font-size: 12px;
  color: var(--mas-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-bs-theme="dark"] .m-subhead .m-subhead-title h1,
html.ew-theme-dark .m-subhead .m-subhead-title h1 {
  color: #e7e3f7;
}

.m-subhead .m-subhead-spacer {
  width: 38px;
  flex: 0 0 auto;
}

/* ============================================================
   Me / Settings page (/Profile/Me)
   Phone-first, but readable on desktop too where the normal
   topbar is still present and .m-subhead stays hidden.
   ============================================================ */

.m-settings {
  max-width: 560px;
  margin: 0 auto;
  padding-bottom: 24px;
}

.m-settings .m-set-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin-bottom: 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #6f5bd3 0%, #9b8cf0 100%);
  color: #fff;
}

.m-settings .m-set-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

.m-settings .m-set-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-settings .m-set-id {
  flex: 1 1 auto;
  min-width: 0;
}

.m-settings .m-set-id h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-settings .m-set-id p {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-settings .m-set-id .m-set-role {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.m-settings .m-set-group {
  margin-bottom: 14px;
  padding: 4px 0;
  border: 1px solid var(--mas-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(111, 91, 211, .05);
  overflow: hidden;
}

[data-bs-theme="dark"] .m-settings .m-set-group,
html.ew-theme-dark .m-settings .m-set-group {
  background: #211d30;
}

.m-settings .m-set-group-title {
  padding: 10px 16px 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mas-primary);
}

.m-settings .m-set-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-top: 1px solid var(--mas-border);
  background: none;
  color: var(--mas-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.m-settings .m-set-item:first-of-type {
  border-top: 0;
}

.m-settings .m-set-item:active {
  background: var(--mas-primary-light);
}

.m-settings .m-set-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--mas-primary-light);
  color: var(--mas-primary);
  font-size: 19px;
}

.m-settings .m-set-item.is-teal .m-set-ico { background: rgba(2, 192, 206, .12); color: #059aa5; }
.m-settings .m-set-item.is-amber .m-set-ico { background: #fef3c7; color: #b45309; }

.m-settings .m-set-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.m-settings .m-set-copy b {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--mas-text);
}

.m-settings .m-set-copy small {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--mas-muted);
}

[data-bs-theme="dark"] .m-settings .m-set-copy b,
html.ew-theme-dark .m-settings .m-set-copy b {
  color: #e7e3f7;
}

.m-settings .m-set-chev {
  flex: 0 0 auto;
  color: var(--mas-muted);
  font-size: 18px;
}

.m-settings .m-set-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid rgba(220, 53, 69, .28);
  border-radius: 14px;
  background: rgba(220, 53, 69, .07);
  color: #dc3545;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.m-settings .m-set-logout i {
  font-size: 18px;
}

.m-settings .m-set-foot {
  margin: 14px 0 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--mas-muted);
}

/* ============================================================
   FreshOps shell (shared /FreshOps link)
   The mobile app shell above is a phone treatment: everything it
   swaps lives inside a max-width:767.98px query, and above that the
   portal chrome comes back. A session that arrived through the
   shared link has to keep the shell at every width — the link gets
   opened on tablets and laptops, and the tab bar is the only
   navigation those sessions have. These rules are the same swap,
   unconditioned on width, plus a phone-width column so a desk
   browser gets the app rather than a stretched one.
   ============================================================ */

body.freshops-shell {
  background: #fbfaff;
}

[data-bs-theme="dark"] body.freshops-shell,
html.ew-theme-dark body.freshops-shell {
  background: #16141f;
}

body.freshops-shell .app-topbar,
body.freshops-shell .color-line,
body.freshops-shell .app-rail,
body.freshops-shell .sidenav-menu,
body.freshops-shell #custom-backdrop {
  display: none !important;
}

/* No tab bar in this shell, so nothing to reserve at the foot beyond the
   device's own safe area. */
body.freshops-shell .page-content {
  margin: 0 !important;
  padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
  min-height: 100vh !important;
}

body.freshops-shell .page-content > .page-container {
  max-width: 560px !important;
  margin: 0 auto !important;
  padding: 12px 14px 0 !important;
}

/* The bar renders at every width here, so it carries its own layout rather than
   the width-scoped copy above. */
body.freshops-shell .m-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  display: flex;
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--mas-border);
  box-shadow: 0 -8px 24px rgba(111, 91, 211, .10);
}

[data-bs-theme="dark"] body.freshops-shell .m-tabbar,
html.ew-theme-dark body.freshops-shell .m-tabbar {
  background: #211d30;
}

body.freshops-shell .m-tabbar .m-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0 2px;
  border: 0;
  background: none;
  color: var(--mas-muted);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  position: relative;
}

body.freshops-shell .m-tabbar .m-tab i {
  font-size: 21px;
  line-height: 1;
}

body.freshops-shell .m-tabbar .m-tab.active {
  color: var(--mas-primary);
}

/* The sub-page back bar (Me, My Profile, Change Password) is phone-scoped for the
   same reason as the rest; its inner styling is shared, so only the container. */
body.freshops-shell .m-subhead {
  display: block;
  position: sticky;
  top: 0;
  z-index: 30;
  margin: -12px -14px 12px;
  padding: 14px 16px 10px;
  background: #fbfaff;
}

[data-bs-theme="dark"] body.freshops-shell .m-subhead,
html.ew-theme-dark body.freshops-shell .m-subhead {
  background: #16141f;
}