/* Dashboard Mode owns its internal navigation and scroll frame. No GNB/LNB CSS variable or responsive dependency. */
:root, [data-hm-theme] {
  --hm-dashboard-height: 100dvh;
  --hm-dashboard-background: var(--hm-sem-palette-green-light-2);
  --hm-dashboard-content-background: var(--hm-sem-bg-content);
  --hm-dashboard-content-top-radius: 12px;
  --hm-dashboard-content-side-radius: 18px;
  --hm-dashboard-sidebar-width: 272px;
  --hm-dashboard-min-width: 960px;
  --hm-dashboard-header-background: linear-gradient(180deg, var(--hm-sem-action-surface-stop-0) 0%, var(--hm-sem-action-surface-stop-30) 30%, var(--hm-sem-action-surface-stop-65) 65%, var(--hm-sem-action-surface-stop-100) 100%);
  /* Compact 48px source surface; independent of shared action/GNB/LNB gradients. */
  --hm-dashboard-compact-background:
    linear-gradient(270deg, rgba(18, 66, 51, 0.4) 0%, rgba(20, 112, 95, 0.4) 100%),
    linear-gradient(178deg, #103D2E 1.07%, #2A6652 11.07%, #12352A 87.72%);
  --hm-dashboard-nav-text: var(--hm-sem-on-action-primary);
  --hm-dashboard-nav-text-secondary: var(--hm-sem-palette-green-tint);
  --hm-dashboard-nav-text-stroke-width: 1px;
  --hm-dashboard-nav-text-stroke-color: color-mix(in srgb, var(--hm-sem-palette-black) 30%, transparent);
  --hm-dashboard-nav-focus-outline: 2px solid var(--hm-sem-on-action-primary);
  --hm-dashboard-padding: 34px;
  --hm-dashboard-gap: 24px;
  --hm-dashboard-content-shadow-top: 0 -8px 18px color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 18%, transparent);
  --hm-dashboard-content-shadow-side: -8px 0 18px color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 18%, transparent);
}

[data-slot="dashboard-scroll"] {
  box-sizing: border-box;
  height: var(--hm-dashboard-height);
  min-width: 0;
  max-width: 100%;
  overflow: auto;
}
[data-slot="dashboard-layout"] {
  box-sizing: border-box;
  height: 100%;
  /* 4 × 200px KPI cards + 3 × 24px gaps + 2 × 34px padding + 20px scrollbar allowance.
     Also fits the measured 549px compact status bar, its wings and the 125px brand without overlap. */
  min-width: var(--hm-dashboard-min-width, 960px);
}
[data-slot="dashboard-layout"][data-sidebar] {
  min-width: calc(var(--hm-dashboard-min-width) + var(--hm-dashboard-sidebar-width));
}
[data-slot="dashboard-body"] {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  background: var(--hm-dashboard-background);
}
[data-slot="dashboard-header"] {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 48px;
  padding: 0 20px;
  background: var(--hm-dashboard-header-background);
  color: var(--hm-dashboard-nav-text);
}
[data-slot="dashboard-body"] > [data-slot="dashboard-sidebar"] {
  flex: none;
  width: var(--hm-dashboard-sidebar-width);
  min-height: 0;
  padding: 28px 20px 22px;
  gap: 22px;
  background: linear-gradient(90deg, var(--hm-sem-action-primary) 0%, var(--hm-sem-palette-green-light-1) 30%, var(--hm-sem-palette-green-light-2) 50%, var(--hm-sem-palette-green-light-3) 90%, var(--hm-sem-palette-green-light-2) 100%);
  color: var(--hm-dashboard-nav-text);
}
[data-slot="dashboard-sidebar"] > nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
[data-slot="dashboard-sidebar"] [data-slot="button"] {
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  height: auto;
  white-space: normal;
  color: var(--hm-dashboard-nav-text);
}
[data-slot="dashboard-sidebar"] [data-slot="button"]:hover {
  background: color-mix(in srgb, var(--hm-sem-palette-black) 10%, transparent);
}
[data-slot="dashboard-sidebar"] [data-slot="button"][aria-expanded="true"] {
  background: color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
}
[data-slot="dashboard-sidebar"] [data-slot="collapsible"][data-current] > [data-slot="button"] {
  color: var(--hm-sem-palette-yellow-accent);
}
[data-slot="dashboard-sidebar"] [data-slot="button"][aria-expanded="true"] > svg {
  transform: rotate(90deg);
}
[data-slot="dashboard-sidebar"] [aria-current="page"],
[data-slot="dashboard-sidebar"] [aria-current="page"]:hover {
  background: var(--hm-dashboard-content-background);
  color: var(--hm-sem-action-primary);
}
[data-slot="dashboard-sidebar"] [data-slot="button"]:focus-visible {
  outline: var(--hm-dashboard-nav-focus-outline);
}
[data-slot="dashboard-sidebar"] [aria-current="page"]:focus-visible {
  outline-color: var(--hm-sem-action-primary);
}

/* Content surface and vertical scroll container, positioned after Dashboard's internal navigation. */
[data-slot="dashboard-main"] {
  position: relative;
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  padding: var(--hm-dashboard-padding);
  overflow-x: auto;
  overflow-y: auto;
  /* Let horizontal wheel/touch gestures chain to the outer Dashboard frame. */
  overscroll-behavior-y: contain;
  background: var(--hm-dashboard-content-background);
}
/* Dashboard header and sidebar use Dashboard-owned radii. */
[data-slot="dashboard-layout"][data-header] [data-slot="dashboard-main"] {
  border-radius: var(--hm-dashboard-content-top-radius) var(--hm-dashboard-content-top-radius) 0 0;
  box-shadow: var(--hm-dashboard-content-shadow-top);
}

[data-slot="dashboard-content"] {
  gap: var(--hm-dashboard-gap);
  min-width: 0;
}
[data-slot="dashboard-content"] > * {
  min-width: 0;
}

/* Preserve the desktop filter row inside the minimum-width frame, independent of the viewport's mobile Filter Bar rules. */
[data-slot="dashboard-layout"] [data-slot="filter-bar"] {
  flex-wrap: nowrap;
}
[data-slot="dashboard-layout"] [data-slot="filter-bar"][data-layout] { flex-wrap: wrap; }
[data-slot="dashboard-layout"] [data-slot="filter-bar-search"] {
  flex: 0 0 var(--hm-filter-bar-search-width);
}
[data-slot="dashboard-layout"] [data-slot="filter-bar"] > :is([data-slot="select-trigger"], [data-slot="combobox-trigger"], [data-slot="date-picker-trigger"], [data-slot="input"]) {
  flex: 0 0 var(--hm-filter-bar-control-width);
  width: var(--hm-filter-bar-control-width);
}
[data-slot="dashboard-layout"] [data-slot="filter-bar-actions"] {
  flex: 0 0 auto;
}

/* The sidebar remains inside the Dashboard minimum-width frame at every viewport width. */
[data-slot="dashboard-layout"][data-sidebar] [data-slot="dashboard-main"] {
  border-radius: var(--hm-dashboard-content-side-radius) 0 0 var(--hm-dashboard-content-side-radius);
  box-shadow: var(--hm-dashboard-content-shadow-side);
}