/* Keep the expanded sidebar brand snug to the header edges. */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

.app-shell {
  margin: 0 !important;
}

.app-sidebar {
  width: 280px !important;
  min-width: 280px !important;
  flex-basis: 280px !important;
}

.sidebar-collapsed .app-sidebar {
  width: 68px !important;
  min-width: 68px !important;
  flex-basis: 68px !important;
}

.app-sidebar-header {
  /* Match the compact topbar: the brand starts at the top with a 2px inset. */
  height: 76px !important;
  padding: 0 !important;
  position: relative !important;
  overflow: visible !important;
}

.premium-topbar {
  height: 72px !important;
  min-height: 72px !important;
  padding-left: 14px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.app-topbar {
  height: 72px !important;
}

.app-sidebar-header .app-brand-logo {
  left: 50% !important;
  /* Offset the image itself so its visible mark sits close to the top edge. */
  top: -10px !important;
  width: 218px !important;
  height: 72px !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
}

/* This higher-specificity rule wins over the older expanded-sidebar scale rule. */
.app-sidebar:not(.sidebar-collapsed .app-sidebar) .app-sidebar-header .app-brand-logo {
  width: 218px !important;
  height: 72px !important;
  transform: translateX(-50%) !important;
}

.app-sidebar-header .app-sidebar-logo {
  width: 216px !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center top !important;
  margin: 0 auto !important;
}

.app-sidebar:not(.sidebar-collapsed .app-sidebar) .app-sidebar-header .app-sidebar-logo {
  width: 216px !important;
  height: auto !important;
}

.app-sidebar-header .app-sidebar-toggle {
  position: absolute !important;
  right: -17px !important;
  top: 30px !important;
  z-index: 20 !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(246, 214, 108, .55) !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, rgba(48, 82, 65, .98), rgba(27, 55, 42, .98)) !important;
  box-shadow: 0 8px 18px rgba(7, 25, 16, .28), inset 0 1px rgba(255, 255, 255, .16) !important;
  color: #f6d66c !important;
}

.app-sidebar-header .app-sidebar-toggle:hover {
  border-color: #f6d66c !important;
  background: linear-gradient(145deg, #3b7356, #244d39) !important;
  box-shadow: 0 10px 22px rgba(7, 25, 16, .36), 0 0 0 4px rgba(246, 214, 108, .1) !important;
  transform: translateY(-1px) !important;
}

.sidebar-collapsed .app-sidebar-header {
  height: 58px !important;
}

.sidebar-collapsed .app-sidebar {
  position: relative;
}

.sidebar-collapsed .app-sidebar-header .app-sidebar-toggle {
  position: absolute !important;
  right: -17px !important;
  top: 17px !important;
}

.app-content .page-main {
  min-height: calc(100vh - 72px) !important;
}

.sidebar-collapsed .app-sidebar-header .app-brand-logo {
  display: none !important;
}

/* Navigation toggle lives in the topbar, clear of the sidebar brand. */
.premium-topbar .topbar-sidebar-toggle {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: 42px !important;
  height: 42px !important;
  margin-right: 0 !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, #ffffff, #e8f4ec 58%, #d6ebdd) !important;
  box-shadow: inset 0 1px #fff, inset 0 -1px rgba(23, 106, 67, .08), 0 5px 14px rgba(31, 106, 67, .18), 0 0 0 1px rgba(70, 188, 114, .12) !important;
  color: #176a43 !important;
  overflow: hidden !important;
  isolation: isolate;
  z-index: 2 !important;
}

.premium-topbar .topbar-sidebar-toggle::before {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  right: -9px;
  top: -9px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 214, 108, .62), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.premium-topbar .topbar-sidebar-toggle:hover {
  border-color: #a9d2b6 !important;
  background: linear-gradient(145deg, #fefcf1, #e4f4e7 58%, #c9e6d2) !important;
  box-shadow: inset 0 1px #fff, 0 8px 20px rgba(31, 106, 67, .24), 0 0 0 5px rgba(70, 188, 114, .1) !important;
  transform: translateY(-2px) scale(1.04) !important;
}

.premium-topbar .topbar-sidebar-toggle i {
  font-size: 18px !important;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .8));
  transition: transform .25s ease;
}

.sidebar-collapsed-toggle-logo {
  display: none;
}

.premium-topbar .topbar-sidebar-toggle:hover i {
  transform: scale(1.12);
}

/* In collapsed mode, dock the control inside the compact sidebar rail. */
.sidebar-collapsed .premium-topbar .topbar-sidebar-toggle {
  position: absolute !important;
  left: -57px !important;
  right: auto !important;
  top: 12px !important;
  margin: 0 !important;
  width: 46px !important;
  height: 46px !important;
  border: 1px solid rgba(246, 214, 108, .84) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .3), transparent 28%), linear-gradient(145deg, #3d7056, #213e30 68%) !important;
  box-shadow: 0 7px 16px rgba(4, 18, 11, .38), 0 0 0 3px rgba(246, 214, 108, .1), inset 0 1px rgba(255, 255, 255, .32), inset 0 -5px 9px rgba(4, 18, 11, .2) !important;
  color: #f6d66c !important;
}

.sidebar-collapsed .premium-topbar .topbar-sidebar-toggle:hover {
  border-color: #fff0a2 !important;
  background: radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .42), transparent 28%), linear-gradient(145deg, #4a805f, #284b39 68%) !important;
  box-shadow: 0 9px 19px rgba(4, 18, 11, .46), 0 0 0 4px rgba(246, 214, 108, .15), inset 0 1px rgba(255, 255, 255, .4), inset 0 -5px 9px rgba(4, 18, 11, .18) !important;
}

.sidebar-collapsed .premium-topbar .topbar-sidebar-toggle::before {
  display: block !important;
  inset: 3px !important;
  width: auto !important;
  height: auto !important;
  right: auto !important;
  top: auto !important;
  border: 1px solid rgba(255, 239, 157, .28);
  background: transparent;
  box-shadow: none;
}

.sidebar-collapsed .premium-topbar .topbar-sidebar-toggle i {
  display: none !important;
}

.sidebar-collapsed .premium-topbar .sidebar-collapsed-toggle-logo {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(4, 18, 11, .3));
  transform: scale(1.05);
  transition: transform .22s ease, filter .22s ease;
}

.sidebar-collapsed .premium-topbar .topbar-sidebar-toggle:hover .sidebar-collapsed-toggle-logo {
  transform: scale(1.13);
  filter: drop-shadow(0 5px 10px rgba(4, 18, 11, .4));
}

/* Soft section marker for the master-data navigation group. */
.sidebar-section-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 8px 5px 1px;
  color: #91a399;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}

.sidebar-section-label::before,
.sidebar-section-label::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(151, 181, 161, .28));
}

.sidebar-section-label::after {
  background: linear-gradient(90deg, rgba(151, 181, 161, .28), transparent);
}

.sidebar-section-label span {
  white-space: nowrap;
}

.sidebar-collapsed .sidebar-section-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 46px;
  height: 18px;
  /* Equal visual breathing room above and below every section separator. */
  margin: 4px 0;
}

/* Use the same centering anchor as collapsed menu icons. */
.sidebar-collapsed .app-sidebar-menu > .nav > .sidebar-section-label {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  align-self: flex-start !important;
}

/* Match the header-to-dashboard divider with the compact section dividers. */
.sidebar-collapsed .app-sidebar-menu {
  padding-top: 24px !important;
}

.sidebar-collapsed .app-sidebar-menu::before {
  top: 7px !important;
  /* Match the inset used by the Dashboard–Organizational Structure divider. */
  left: 15px !important;
  right: 15px !important;
  height: 1px !important;
  background:
    linear-gradient(90deg, transparent, rgba(151, 181, 161, .42)) left center / calc(50% - 11px) 1px no-repeat,
    linear-gradient(90deg, rgba(151, 181, 161, .42), transparent) right center / calc(50% - 11px) 1px no-repeat !important;
  box-shadow: none !important;
}

.sidebar-collapsed .app-sidebar-menu::after {
  display: block !important;
  top: 4px !important;
  left: 50% !important;
  width: 7px !important;
  height: 7px !important;
  transform: translateX(-50%) rotate(45deg) !important;
  border: 1px solid rgba(246, 214, 108, .74) !important;
  background: #294638 !important;
  box-shadow: 0 0 0 2px #24332b, 0 0 9px rgba(246, 214, 108, .22) !important;
}

.sidebar-header-divider {
  display: none;
}

/* A dedicated first divider avoids inherited menu pseudo-element styling. */
.sidebar-collapsed .sidebar-header-divider {
  position: absolute;
  top: 69px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  width: 50px;
  height: 18px;
  margin: 0;
  z-index: 2;
}

.sidebar-collapsed .sidebar-header-divider span {
  height: 2px;
  flex: 1;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(151, 181, 161, .25), rgba(246, 214, 108, .82));
  box-shadow: 0 1px rgba(255, 255, 255, .08);
}

.sidebar-collapsed .sidebar-header-divider span:last-child {
  background: linear-gradient(90deg, rgba(246, 214, 108, .82), rgba(151, 181, 161, .25), transparent);
}

.sidebar-collapsed .sidebar-header-divider b {
  position: relative;
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #fff3ad 0%, #f6d66c 38%, #b98220 100%);
  border: 1px solid rgba(255, 239, 157, .95);
  box-shadow: 0 0 0 2px #24332b, 0 0 13px rgba(246, 214, 108, .48), inset 0 1px rgba(255, 255, 255, .75);
}

.sidebar-collapsed .sidebar-header-divider b::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(67, 49, 16, .25);
  background: rgba(255, 255, 255, .24);
}

.sidebar-collapsed .app-sidebar-menu {
  /* Reserve the same visual interval below the independently positioned divider. */
  padding-top: 31px !important;
}

.sidebar-collapsed .app-sidebar-menu::before,
.sidebar-collapsed .app-sidebar-menu::after {
  display: none !important;
}

.sidebar-collapsed .sidebar-section-label span {
  display: block;
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  overflow: hidden;
  font-size: 0;
  transform: rotate(45deg);
  background: #294638;
  border: 1px solid rgba(246, 214, 108, .74);
  box-shadow: 0 0 0 2px #24332b, 0 0 9px rgba(246, 214, 108, .22);
}

/* Every collapsed divider uses a line–diamond–line construction. */
.sidebar-collapsed .sidebar-section-label::before,
.sidebar-collapsed .sidebar-section-label::after {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: auto;
  height: 1px;
  flex: 1;
  transform: none;
  border: 0;
  box-shadow: none;
  background: linear-gradient(90deg, transparent, rgba(151, 181, 161, .42)) !important;
}

.sidebar-collapsed .sidebar-section-label::after {
  background: linear-gradient(90deg, rgba(151, 181, 161, .42), transparent) !important;
}