/* Core.Blazor DrawerHost – Telerik Drawer wrapper, semantic tokens */
:root {
  --core-drawer-width: 256px;
  /* Visual width of the icon rail (mini drawer); used for full-height rail paint when the DOM column is content-sized. */
  --core-drawer-fixed-rail-width: 3.5rem;
  --core-drawer-spacing: var(--core-spacing-4, 16px);
  --core-drawer-radius: var(--core-radius-md, 8px);
  --core-drawer-elevation: var(--core-elevation-2, 0 4px 6px -1px rgba(17, 24, 39, 0.1));
  --core-drawer-surface: var(--core-semantic-panel, var(--core-panel, #EEF2F9));
  --core-drawer-border: var(--core-semantic-border-default, var(--core-border, #D5DCEC));
}

.core-drawer-host {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  /* Match flex parent height from PortalShell so the nav column can run full viewport. */
  height: 100%;
}

.core-drawer-nav {
  padding: var(--core-drawer-spacing);
  min-height: 100%;
  flex: 1 1 auto;
  box-sizing: border-box;
}

.core-drawer-content {
  flex: 1;
  min-width: 0;
  min-height: 100%;
}

/*
 * Telerik `Class="core-drawer"` applies to the drawer root, which wraps BOTH the template (nav)
 * and `DrawerContent`. Never zero that root's width — it hides the main content.
 * Collapsed width is applied only to `.core-drawer-nav-pane` (see DrawerHost.razor).
 */
.core-drawer-host .core-drawer.k-drawer {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  align-items: stretch;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  /* Fill portal main row so the nav column can run theme surface to the footer. */
  height: 100%;
  min-height: 100%;
}

.core-drawer-host .core-drawer.k-drawer .k-drawer-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Telerik wraps the template here; without this it can shrink to icon stack height while content stays tall. */
.core-drawer-host .core-drawer.k-drawer .k-drawer-items {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
  box-sizing: border-box;
}

.core-drawer-nav-pane {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
  /* Theme rail: on the pane so it fills column height (nav content alone is shorter than the viewport). */
  background: var(--core-drawer-surface);
  border-right: 1px solid var(--core-drawer-border);
  overflow: hidden;
}

.core-drawer-host.core-drawer-expanded .core-drawer-nav-pane {
  flex: 0 0 var(--core-drawer-width, 256px);
  width: var(--core-drawer-width, 256px);
  max-width: var(--core-drawer-width, 256px);
}

/* Collapsed: optional mini rail width comes from Telerik `MiniMode` (e.g. Sidekick sets `DrawerMiniMode`). */
.core-drawer-host.core-drawer-collapsed .core-drawer-nav-pane {
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 0;
}

/* Permanent mini rail: allow hover tooltips to extend past the nav column. */
.core-drawer-host--fixed-rail .core-drawer-nav-pane,
.core-drawer-host--fixed-rail .core-drawer-nav {
  overflow: visible;
}

.core-drawer-host--fixed-rail .core-drawer.k-drawer {
  overflow: visible;
  background-color: transparent;
  /*
   * Telerik's nav column can stay content-height while `.k-drawer` stretches with main content.
   * Paint the theme rail on the full drawer row so the tint reaches the footer (no white band under icons).
   */
  background-image:
    linear-gradient(to bottom, var(--core-drawer-border), var(--core-drawer-border)),
    linear-gradient(to right, var(--core-drawer-surface), var(--core-drawer-surface));
  background-size:
    1px 100%,
    var(--core-drawer-fixed-rail-width, 3.5rem) 100%;
  background-position:
    var(--core-drawer-fixed-rail-width, 3.5rem) 0,
    0 0;
  background-repeat: no-repeat;
}

.core-drawer-host--fixed-rail .core-drawer-nav-pane {
  background-color: transparent;
  border-right: none;
}

/* Fixed expand/collapse control — bottom of viewport (safe areas for notched devices). */
.core-drawer-viewport-toggle {
  position: fixed;
  z-index: 1200;
  left: max(0.75rem, env(safe-area-inset-left, 0px));
  bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--core-drawer-border, #d5dcec);
  background: var(--core-drawer-surface, #eef2f9);
  color: var(--core-semantic-text-secondary, #3b4255);
  box-shadow: var(--core-drawer-elevation, 0 4px 6px -1px rgba(17, 24, 39, 0.1));
  cursor: pointer;
}

.core-drawer-viewport-toggle:hover {
  filter: brightness(0.97);
}

.core-drawer-viewport-toggle:focus-visible {
  outline: 2px solid var(--core-semantic-focus-ring, #4b5ffa);
  outline-offset: 2px;
}

.core-drawer-viewport-toggle__icon {
  font-size: 1.5rem;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

/* Responsive: desktop pinned, tablet collapsible, mobile overlay handled by Telerik Mode (Push/Overlay) */
@media (max-width: 768px) {
  :root {
    --core-drawer-width: 280px;
  }
}