#root {
    padding: 0; /* was 0.25rem — stray 4px on top of #main_content's 32px/16px, off-grid on every page */
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
    display: flex;
    overflow: auto;
    width: 100%;
    background: var(--white);
}

#app_container {
    margin-bottom: 4rem;
    background: var(--white);
}

#app_container .top_branding {
    top: 0px;
    position: sticky;
    box-sizing: border-box;
    border-style: solid;
    border-color: var(--border);
    border-bottom-width: 1px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
    background: var(--white);

}

#app_container .top_branding .image_container {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    justify-content: flex-start;
}
#app_container .top_branding .image_container img {
    display: block;
    vertical-align: middle; 
    height: 2.5rem;
}

#desktop_sidebar {
  border-right: none;
  display: none;
  flex-direction: column;
  background: var(--chrome);
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  transition: width var(--tr), min-width var(--tr);
  overflow: visible;
}

/* Inner wrapper clips sidebar content while the pill bleeds to the right edge */
#desktop_sidebar .sidebar-inner {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

#mobile_menu {
    z-index: 50;
    background: transparent;
    border-width: 0;
    border-style: solid;
    border-top: 1px solid var(--border);
    border-color: var(--border) !important;
    border-top-width: 1px !important;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
}

/* The bar surface: a solid/frosted layer that paints ABOVE the sheet so the
   sheet slides in and out from BEHIND the bar. */
#mobile_menu > *::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--white) 92%, transparent);
}

/* Nav items sit above the bar surface; the sheet sits behind it. */
#mobile_menu > * > button {
    position: relative;
    z-index: 2;
}

#mobile_menu button {
  border: none;
}

/* Mobile "More" bottom sheet — rises from behind the bar, tucks back down */
.mobile_sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;                /* bottom edge sits flush on the bar's top line */
  z-index: 0;                  /* BEHIND the bar surface (::before, z-index:1) */
  background: var(--white);    /* fully solid — no fade */
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.16);
  padding: 0 0 0.4rem;
  transform: translateY(100%); /* tucked fully behind the bar */
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.mobile_sheet.open {
  transform: translateY(0);    /* slides up, above the bar */
  pointer-events: auto;
}

.mobile_sheet.dragging {
  transition: none;
}

.mobile_sheet_handle {
  width: 36px;
  height: 4px;
  border-radius: 9999px;
  background: var(--border-strong);
  margin: 0.5rem auto 0.25rem;
}

.mobile_sheet_item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  background: transparent;
  border: none;
  border-top: 0.5px solid var(--border);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.mobile_sheet_item:first-of-type {
  border-top: none;
}

.mobile_sheet_item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-secondary);
}

#app_container{
    width: 100% !important;
}

#app_container #main_content{
    padding: 32px;
    width: 100% !important;
    background: var(--white);
}

#app_container #main_content .page {
    max-width: none !important;
    margin-left: 0;
    margin-right: 0;
    background: var(--white);
}

#root.fullwidth-page #app_container {
    width: 100% !important;
}

#root.fullwidth-page #app_container #main_content .page {
    max-width: none !important;
}

.mt-auto {
    margin-top: auto !important;
}

/* Frosted glass (where supported) — on the bar surface layer */
@supports ((backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))) {
  #mobile_menu > *::before {
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%); /* Safari */
    background: color-mix(in srgb, var(--white) 72%, transparent); /* lighter when blurred */
  }
  #mobile_menu {
    border-top-color: var(--border-strong);
    box-shadow: 0 -1px 2px rgba(0,0,0,0.04);           /* optional tiny lift */
  }
}
:root {
  --nav-max: 1250px;
  /* Shell layout + transition tokens (v7 design — brand color/font tokens live in home.css) */
  --tr: 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  --sidebar-w: 220px;
  --sidebar-collapsed: 68px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}
/* Inner container: cap the width + side padding */
#mobile_menu > *{
  position: relative;
  width: min(100%, var(--nav-max));
  padding-inline: 0px !important; /* adjust gutter as you like */
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

div.welcome {
    border-color: var(--border);
    border-width: 1px;
    border-radius: 16px;
    border-style: solid;
    padding: 1.5rem;
    background-image: var(--gradient-warm);
    box-shadow: var(--shadow-1);
}

div.welcome h1 {
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 2rem;
    color: var(--ink);
}

.brand_logo {
  max-width: 160px;
  height: auto;
}

.stats {
    margin-top: 24px;
}

.stat_container {
    border-color: var(--border);
    border-style: solid;
    box-sizing: border-box;
    border-radius: 16px;
    border-width: 1px;
    background: var(--white);
    box-shadow: var(--shadow-1);
}
.stat_content {
    padding: 1rem;
    text-align: center;
}

.stat_value {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
}
.stat_label {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* Active bottom-nav tab: navy reads stronger on the white bar than orange did */
#root.pagecareflows #mobile_menu button.careflows {
    color: var(--navy);
    font-weight: 600;
}
#root.pageguests #mobile_menu button.guests {
  color: var(--navy);
  font-weight: 600;
}
#root.pageactivity #mobile_menu button.activity {
  color: var(--navy);
  font-weight: 600;
}
#root.pageactivity #mobile_menu button.more {
  color: var(--navy);
  font-weight: 600;
}
#root.pageleaders #mobile_menu button.leaders {
    color: var(--navy);
    font-weight: 600;
}
#root.pagehome #mobile_menu button.home {
    color: var(--navy);
    font-weight: 600;
}
#root.pageintegrations #mobile_menu button.integrations {
  color: var(--orange-dark);
}
#root.pagesettings #mobile_menu button.settings {
    color: var(--orange-dark);
}

/* ══════════════════════════════
   SIDEBAR — v7 design port
══════════════════════════════ */
/* Logo */
.sidebar_brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 22px 18px 18px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  min-height: 76px;
}

.sidebar_brand .brand_logo,
.logo-full-img {
  height: 36px;
  width: auto;
  max-width: 160px;
  mix-blend-mode: screen;
  object-fit: contain;
}

.logo-icon-wrap {
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.logo-icon-wrap img {
  height: 36px;
  width: 36px;
  object-fit: contain;
  mix-blend-mode: screen;
}

#desktop_sidebar:not(.collapsed) .logo-full-img { display: block; }
#desktop_sidebar:not(.collapsed) .logo-icon-wrap { display: none; }
#desktop_sidebar.collapsed .logo-full-img { display: none; }
#desktop_sidebar.collapsed .logo-icon-wrap { display: flex; }

/* Nav list — positioning context for the sliding pill */
.sidebar_list {
  list-style: none;
  margin: 0;
  padding: 10px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* The single light pill that slides to the active item; rounded left, square
   right, bleeding into the content area to connect the menu to the page */
.sidebar_pill {
  position: absolute;
  left: 8px;
  right: 0;
  top: 120px;
  height: 38px;
  background: var(--white);
  border-radius: 9999px 0 0 9999px;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: top var(--tr), height var(--tr), opacity 0.2s ease;
}

.sidebar_item {
  display: flex;
  align-items: center;
  padding: 0 12px 0 42px;
  border-radius: 9999px;
  background: transparent;
  border: none;
  text-align: left;
  width: 100%;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: color 0.14s;
  margin-bottom: 2px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  height: 38px;
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar_item:not(.sidebar_item--active):hover {
  color: rgba(255, 255, 255, 0.72);
}
.sidebar_item--active {
  color: var(--ink);
  font-weight: 500;
  background: var(--white);
}

.sidebar_icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar_icon svg {
  width: 18px;
  height: 18px;
}
.sidebar_text {
  font-size: 13px;
  opacity: 1;
  transition: opacity var(--tr);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar_title {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.2);
  padding: 10px 12px 4px;
  white-space: nowrap;
  transition: opacity var(--tr), max-height var(--tr), padding var(--tr);
}

/* ── Collapsed state ── */
#desktop_sidebar.collapsed {
  width: var(--sidebar-collapsed) !important;
  min-width: var(--sidebar-collapsed) !important;
}
#desktop_sidebar.collapsed .sidebar_title { visibility: hidden; }
#desktop_sidebar.collapsed .sidebar_text { opacity: 0; width: 0; }

/* Tooltips when collapsed */
#desktop_sidebar.collapsed .sidebar_item[data-tip]:hover::before {
  content: attr(data-tip);
  position: fixed;
  left: 80px;
  background: var(--chrome-raised);
  color: var(--on-media);
  font-size: 12px;
  font-family: var(--font-body);
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 999;
}

/* ── Bottom: collapse toggle + logout ── */
.sidebar-bottom {
  padding: 10px 8px 16px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 1;
}

.collapse-toggle {
  display: flex;
  align-items: center;
  padding: 0 12px 0 42px;
  border-radius: 9999px;
  color: rgba(255, 255, 255, 0.28);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-radius 0.14s, margin 0.14s, padding 0.14s;
  border: none;
  background: none;
  font-family: var(--font-body);
  white-space: nowrap;
  width: 100%;
  text-align: left;
  height: 38px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.collapse-toggle:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.5);
  border-radius: 9999px 0 0 9999px;
  margin-right: -8px;
  padding-right: 20px;
}
#desktop_sidebar.collapsed .collapse-toggle:hover {
  margin-right: -8px;
  padding-right: 18px;
}
.collapse-toggle .t-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--tr);
}
#desktop_sidebar.collapsed .collapse-toggle .t-text { opacity: 0; width: 0; overflow: hidden; }
#desktop_sidebar.collapsed .collapse-toggle .t-icon { transform: translateY(-50%) rotate(180deg); }
.t-text {
  opacity: 1;
  transition: opacity var(--tr);
  overflow: hidden;
  white-space: nowrap;
}

.logout-item,
.sidebar_help {
  display: flex;
  align-items: center;
  padding: 0 12px 0 42px;
  border-radius: 9999px;
  background: none;
  border: none;
  font-family: var(--font-body);
  text-align: left;
  width: 100%;
  color: rgba(255, 255, 255, 0.22);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.14s;
  height: 38px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.logout-item:hover,
.sidebar_help:hover { color: rgba(255, 255, 255, 0.5); }
.logout-item .nav-icon,
.sidebar_help .nav-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logout-item .nav-icon svg { width: 18px; height: 18px; }
.logout-item .nav-text,
.sidebar_help .nav-text {
  opacity: 1;
  transition: opacity var(--tr);
  white-space: nowrap;
  overflow: hidden;
}
#desktop_sidebar.collapsed .logout-item .nav-text,
#desktop_sidebar.collapsed .sidebar_help .nav-text { opacity: 0; width: 0; }

/* Help & contact is visually demoted: smaller type + icon than the items above it */
.sidebar_help { font-size: 11px; height: 30px; }
.sidebar_help .nav-icon svg { width: 14px; height: 14px; }

/* Theme toggle — one control carrying both icons; the visible one is the mode
   you are switching TO, which is what the label next to it says. Sun is hidden
   by default so the moon still shows if the boot script never ran. */
.theme_icon--sun { display: none; }
html[data-theme="dark"] .theme_icon--sun { display: block; }
html[data-theme="dark"] .theme_icon--moon { display: none; }

.tooltip-trigger { position: relative; display: inline-block; }
.tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 0.5rem);
  min-width: 340px;
  max-width: 560px;
  background: var(--popover, var(--white));
  border: 0.5px solid var(--border-strong);
  box-shadow: var(--shadow-2);
  color: var(--text-primary, var(--ink));
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  z-index: 60;
  font-size: 0.875rem;
  white-space: normal;
  line-height: 1.25rem;
}

.tooltip p { margin: 0; }
.tooltip.hidden { display: none; }

.tooltip--below {
  top: calc(100% + 0.5rem);
  bottom: auto;
}

/* ══════════════════════════════
   GLOBAL SHELL — v7 design body type + full-width content
══════════════════════════════ */
body {
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Desktop: fixed-width dark sidebar (220px) with the page filling the rest.
   These override the legacy 256px/260px values in mobile.css, which loads
   after this file. */
@media (min-width: 1024px) {
  #desktop_sidebar {
    width: var(--sidebar-w) !important;
    min-width: var(--sidebar-w) !important;
  }
  #app_container {
    margin-left: var(--sidebar-w) !important;
    width: calc(100% - var(--sidebar-w)) !important;
    transition: margin-left var(--tr), width var(--tr);
  }
  #app_container.sidebar-collapsed {
    margin-left: var(--sidebar-collapsed) !important;
    width: calc(100% - var(--sidebar-collapsed)) !important;
  }
}