/* Shared panel presentation, including navigation between sections. */
.mentorem-mobile-toggle { display: none; }
@media (max-width: 1199px) {
html.mentorem-panel .mentorem-mobile-layout {
  flex-direction: column;
}

html.mentorem-panel .mentorem-mobile-sidebar {
  position: relative; width: 100%; height: auto; border-right: 0; flex-shrink: 0;
}

html.mentorem-panel aside > div:first-child {
  height: 48px; padding-inline: 16px;
}

html.mentorem-panel aside > div:nth-child(2) {
  display: none;
}

html.mentorem-panel aside > button {
  display: none;
}

html.mentorem-panel aside .mentorem-mobile-toggle {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-left: auto; padding: 8px 16px; border: 1px solid currentColor; border-radius: 8px; font-size: 14px; font-weight: 600;
}

html.mentorem-panel aside nav {
  display: none; flex: none; gap: 6px; overflow: visible; padding: 8px 12px 12px;
}

html.mentorem-panel aside.mentorem-mobile-menu-open nav {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.mentorem-panel aside nav .sidebar-item {
  min-width: 0; min-height: 44px; margin: 0; padding: 10px 12px; white-space: normal; overflow-wrap: anywhere;
}

html.mentorem-panel aside nav .sidebar-item span {
  min-width: 0;
}

html.mentorem-panel header {
  height: auto; min-height: 56px; padding: 12px 16px; flex-wrap: wrap; gap: 8px;
}

html.mentorem-panel header > div:first-child {
  display: none;
}

html.mentorem-panel header > div:last-child {
  flex: 1 1 100%; min-width: 0; flex-wrap: wrap; gap: 8px;
}

html.mentorem-panel header > div:last-child > .relative {
  min-width: 0; max-width: 100%;
}

html.mentorem-panel header button {
  min-height: 44px; max-width: 100%;
}

html.mentorem-panel header button.p-2 {
  min-width: 44px;
}

html.mentorem-panel header button > svg {
  flex-shrink: 0;
}

html.mentorem-panel header .relative > button > .min-w-0 {
  max-width: 140px;
}

html.mentorem-panel header .absolute.z-50 {
  position: fixed; top: 12px; right: 12px; left: 12px; width: auto; max-height: calc(100dvh - 24px); overflow-y: auto;
}

html.mentorem-panel main {
  min-width: 0; width: 100%; padding: 16px; overflow-wrap: anywhere;
}

html.mentorem-panel main .grid > *,
html.mentorem-panel main .flex > * {
  min-width: 0;
}

html.mentorem-panel main .kpi-card {
  padding: 14px;
}

html.mentorem-panel main > .space-y-6 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 16px;
}

html.mentorem-panel main .grid {
  gap: 12px;
}

html.mentorem-panel main .flex.justify-between {
  flex-wrap: wrap; gap: 12px;
}

html.mentorem-panel main .flex.gap-2 {
  flex-wrap: wrap;
}

html.mentorem-panel main button,
html.mentorem-panel main [role="tab"],
html.mentorem-panel main a.inline-flex {
  min-height: 44px; height: auto; white-space: normal;
}

html.mentorem-panel main input:not([type="checkbox"]):not([type="radio"]),
html.mentorem-panel main select,
html.mentorem-panel main textarea {
  font-size: 16px; min-height: 44px; max-width: 100%;
}

html.mentorem-panel main [role="tablist"] {
  display: flex; flex-wrap: wrap; height: auto; width: 100%; gap: 4px;
}

html.mentorem-panel main [role="tab"] {
  flex: 1 1 auto;
}

html.mentorem-panel main .overflow-x-auto {
  max-width: 100%; overscroll-behavior-x: contain;
}

html.mentorem-panel main .mentorem-mobile-chart {
  overflow-x: auto;
}

html.mentorem-panel main .recharts-responsive-container {
  min-width: 480px !important;
}

html.mentorem-panel [role="dialog"] {
  width: calc(100% - 24px); max-width: calc(100% - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 20px 16px; overflow-wrap: anywhere;
}

html.mentorem-panel aside nav a.mentorem-mobile-label::after {
  content: attr(data-mobile-label);
}
}

@media (min-width: 360px) and (max-width: 1199px) {
html.mentorem-panel main .mentorem-mobile-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}