.app-shell {
  height: 100vh;
  min-height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 272px 1fr;
  overflow: hidden;
  background: #f8faf9;
}

.sidebar {
  position: relative;
  z-index: 220;
  height: 100vh;
  min-height: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 14px;
  overflow: visible;
  background: var(--primary);
  color: #fff;
  box-shadow: 10px 0 30px rgba(15, 118, 110, 0.14);
}

.sidebar .brand-mark {
  --mark-size: 44px;
  --mark-stem-top: 10px;
  --mark-u-bottom: 8px;
  flex: 0 0 var(--mark-size);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.1);
}

.product-lockup {
  width: 100%; min-height: 48px; border: 0; padding: 0 8px;
  flex: 0 0 auto;
  background: transparent; color: inherit; cursor: pointer; font: inherit;
  overflow: hidden; text-align: left; white-space: nowrap;
}

.product-lockup strong {
  display: block;
}

.product-lockup span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
}

.main-nav {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.36) transparent;
}

.main-nav button,
.user-menu-button,
.user-menu button,
.collapse-button {
  min-height: 46px;
  display: flex;
  gap: 12px;
  align-items: center;
  border: 0;
  border-radius: 12px;
  padding: 11px 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 800;
}

.main-nav button:hover,
.user-menu-button:hover,
.user-menu button:hover,
.collapse-button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.main-nav button.active {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 10px 24px rgba(5, 46, 40, 0.16);
}

.user-menu-wrap {
  flex: 0 0 auto;
  position: relative;
}

.user-menu-button {
  min-width: 0;
  width: 100%;
}

.user-menu-button .nav-label,
.user-menu-head strong,
.user-menu-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 240;
  display: none;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 18px 38px rgba(5, 46, 40, 0.22);
}

.user-menu.open {
  display: block;
}

.user-menu-head,
.user-menu button {
  width: 100%;
  padding: 12px;
}

.user-menu-head {
  border-bottom: 1px solid var(--border);
}

.user-menu-head strong,
.user-menu-head span {
  display: block;
}

.user-menu-head span {
  color: var(--muted);
  font-size: 0.82rem;
}

.user-menu button {
  justify-content: flex-start;
  border-radius: 0;
  color: var(--ink);
}

.user-menu button:hover {
  background: var(--panel-soft);
  color: var(--primary);
}

.collapse-button {
  flex: 0 0 auto;
  justify-content: center;
  width: 46px;
  margin-left: auto;
}

.nav-icon {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  display: inline-block;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.nav-user {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c1.4-4 3.7-6 7-6s5.6 2 7 6'/%3E%3C/svg%3E");
}

.nav-calendar {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='2.5'/%3E%3Cpath d='M8 3.5v4M16 3.5v4M4 10h16'/%3E%3C/svg%3E");
}

.nav-clients {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='8' r='3.4'/%3E%3Cpath d='M3.5 19c1.1-3.3 3.1-5 5.5-5s4.4 1.7 5.5 5'/%3E%3Cpath d='M15.5 11.2a3 3 0 1 0-1-5.8M16.5 14c2 .4 3.4 2.1 4 5'/%3E%3C/svg%3E");
}

.nav-statistics {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19h17M7 16V9M12 16V5M17 16v-7'/%3E%3C/svg%3E");
}

.nav-settings {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.3 2.8h-.6a1.7 1.7 0 0 0-1.7 1.7v.4a1.7 1.7 0 0 1-1 1.5l-.2.1a1.7 1.7 0 0 1-1.7 0l-.4-.2A1.7 1.7 0 0 0 4.4 7l-.3.5a1.7 1.7 0 0 0 .6 2.3l.3.2a1.7 1.7 0 0 1 .8 1.5v.3a1.7 1.7 0 0 1-.8 1.5l-.3.2a1.7 1.7 0 0 0-.6 2.3l.3.5a1.7 1.7 0 0 0 2.3.6l.4-.2a1.7 1.7 0 0 1 1.7 0l.2.1a1.7 1.7 0 0 1 1 1.5v.4a1.7 1.7 0 0 0 1.7 1.7h.6a1.7 1.7 0 0 0 1.7-1.7v-.4a1.7 1.7 0 0 1 1-1.5l.2-.1a1.7 1.7 0 0 1 1.7 0l.4.2a1.7 1.7 0 0 0 2.3-.6l.3-.5a1.7 1.7 0 0 0-.6-2.3l-.3-.2a1.7 1.7 0 0 1-.8-1.5v-.3a1.7 1.7 0 0 1 .8-1.5l.3-.2a1.7 1.7 0 0 0 .6-2.3l-.3-.5a1.7 1.7 0 0 0-2.3-.6l-.4.2a1.7 1.7 0 0 1-1.7 0l-.2-.1a1.7 1.7 0 0 1-1-1.5v-.4a1.7 1.7 0 0 0-1.7-1.7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.nav-logout {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 5H5v14h5M15 17l5-5-5-5M20 12H9'/%3E%3C/svg%3E");
}

.nav-collapse {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
}

.mobile-nav {
  display: none;
}

.mobile-user-menu-wrap {
  position: relative;
  min-width: 0;
}

.mobile-user-menu-button {
  width: 100%;
}

.mobile-user-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 30;
  display: none;
  width: min(260px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}

.mobile-user-menu.open {
  display: block;
}

.mobile-user-menu button {
  width: 100%;
  min-height: 44px;
  display: flex;
  gap: 10px;
  align-items: center;
  border: 0;
  border-radius: 0;
  padding: 12px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.mobile-user-menu button:hover {
  background: var(--panel-soft);
  color: var(--primary);
}

.workspace {
  position: relative;
  z-index: 0;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: auto;
  padding: 28px;
}

.workspace:has(.crm-dialog-backdrop) {
  z-index: 260;
}