/* Karma Reports — Material 3 Expressive containment pass v10.11
   Scoped strictly to the Reports route. */

body[data-karma-view="reports"] #root [class~="h-screen"][class~="overflow-hidden"] {
  --kr11-canvas: #081421;
  --kr11-surface: #0f1c2d;
  --kr11-surface-high: #14243a;
  --kr11-surface-highest: #1a2c46;
  --kr11-on-surface: #f1f6fb;
  --kr11-on-surface-variant: #aebfd0;
  --kr11-primary: #8fc8ff;
  --kr11-primary-strong: #a8d4ff;
  --kr11-shape-xl: 28px;
  --kr11-shape-lg: 20px;
  --kr11-shape-md: 16px;
  background: var(--kr11-canvas) !important;
  color: var(--kr11-on-surface) !important;
}

/* Keep the page header calm; the actual work area carries the expressive containment. */
body[data-karma-view="reports"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="border-b"] {
  border: 0 !important;
  background: var(--kr11-canvas) !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

body[data-karma-view="reports"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="border-b"] h1 {
  color: var(--kr11-on-surface) !important;
}

body[data-karma-view="reports"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="border-b"] h2 {
  color: var(--kr11-on-surface-variant) !important;
}

/* Main desktop work area: two independent contained regions with breathing room. */
@media (min-width: 900px) {
  body[data-karma-view="reports"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="flex-1"] {
    display: flex !important;
    gap: 12px !important;
    padding: 12px 14px 14px !important;
    background: var(--kr11-canvas) !important;
  }

  body[data-karma-view="reports"] #root [class~="h-screen"][class~="overflow-hidden"] [class~="w-72"] {
    width: 316px !important;
    border: 0 !important;
    border-radius: var(--kr11-shape-xl) !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  body[data-karma-view="reports"] #root [class~="h-screen"][class~="overflow-hidden"] [class~="min-w-0"][class~="flex-col"] {
    gap: 12px !important;
    border-radius: var(--kr11-shape-xl) !important;
    background: transparent !important;
    overflow: hidden !important;
  }
}

/* Parameters column: each logical group gets its own tonal container. */
body[data-karma-view="reports"] #root [class~="w-72"] > [class~="p-4"][class~="space-y-5"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 14px !important;
  background: transparent !important;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgb(143 200 255 / 24%) transparent;
}

body[data-karma-view="reports"] #root [class~="w-72"] > [class~="p-4"][class~="space-y-5"] > * {
  margin-top: 0 !important;
}

body[data-karma-view="reports"] #root [class~="w-72"] > [class~="p-4"][class~="space-y-5"] > p:first-child {
  margin: 2px 4px 0 !important;
  color: var(--kr11-on-surface) !important;
  font-size: 18px !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em;
}

body[data-karma-view="reports"] #root [class~="w-72"] > [class~="p-4"][class~="space-y-5"] > div {
  margin: 0 !important;
  padding: 18px !important;
  border: 0 !important;
  border-radius: var(--kr11-shape-lg) !important;
  background: var(--kr11-surface) !important;
  box-shadow: none !important;
}

body[data-karma-view="reports"] #root [class~="w-72"] [class~="uppercase"] {
  margin-bottom: 10px !important;
  color: var(--kr11-on-surface-variant) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: .045em !important;
}

body[data-karma-view="reports"] #root [class~="w-72"] [class~="space-y-3"] {
  display: grid !important;
  gap: 14px !important;
}

body[data-karma-view="reports"] #root [class~="w-72"] [class~="space-y-3"] > * {
  margin: 0 !important;
}

body[data-karma-view="reports"] #root [class~="w-72"] [class~="space-y-3"] > div > p {
  margin-bottom: 7px !important;
  color: var(--kr11-on-surface-variant) !important;
}

/* Inputs and segmented controls stay inside the parent card and use a higher tonal level. */
body[data-karma-view="reports"] #root [class~="w-72"] button[class~="border"],
body[data-karma-view="reports"] #root [class~="w-72"] [role="combobox"] {
  min-height: 48px !important;
  border: 0 !important;
  border-radius: var(--kr11-shape-md) !important;
  background: var(--kr11-surface-high) !important;
  color: var(--kr11-on-surface) !important;
  box-shadow: none !important;
  transition: background-color 180ms cubic-bezier(.2,0,0,1), transform 180ms cubic-bezier(.2,0,0,1) !important;
}

body[data-karma-view="reports"] #root [class~="w-72"] button[class~="border"]:hover:not(:disabled),
body[data-karma-view="reports"] #root [class~="w-72"] [role="combobox"]:hover {
  background: var(--kr11-surface-highest) !important;
}

body[data-karma-view="reports"] #root [class~="w-72"] [class~="h-8"][class~="border"] {
  min-height: 48px !important;
  padding: 4px !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: var(--kr11-shape-md) !important;
  background: var(--kr11-surface-high) !important;
}

body[data-karma-view="reports"] #root [class~="w-72"] [class~="h-8"][class~="border"] button {
  border: 0 !important;
  border-radius: 12px !important;
  color: var(--kr11-on-surface-variant) !important;
  box-shadow: none !important;
  transition: background-color 180ms cubic-bezier(.2,0,0,1), color 180ms cubic-bezier(.2,0,0,1) !important;
}

body[data-karma-view="reports"] #root [class~="w-72"] [class~="h-8"][class~="border"] button[class~="bg-primary"] {
  background: var(--kr11-surface-highest) !important;
  color: var(--kr11-on-surface) !important;
  box-shadow: none !important;
}

/* Generate action gets its own contained footer card instead of a divider strip. */
body[data-karma-view="reports"] #root [class~="w-72"] > [class~="border-t"] {
  margin: 0 14px 14px !important;
  padding: 14px !important;
  border: 0 !important;
  border-radius: var(--kr11-shape-lg) !important;
  background: var(--kr11-surface) !important;
}

body[data-karma-view="reports"] #root [class~="w-72"] > [class~="border-t"] > button {
  min-height: 50px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: var(--kr11-primary) !important;
  color: #092033 !important;
  font-weight: 720 !important;
  box-shadow: none !important;
  transition: background-color 180ms cubic-bezier(.2,0,0,1), transform 180ms cubic-bezier(.2,0,0,1) !important;
}

body[data-karma-view="reports"] #root [class~="w-72"] > [class~="border-t"] > button:hover:not(:disabled) {
  background: var(--kr11-primary-strong) !important;
}

body[data-karma-view="reports"] #root [class~="w-72"] > [class~="border-t"] > button:active:not(:disabled) {
  transform: scale(.985);
}

body[data-karma-view="reports"] #root [class~="w-72"] > [class~="border-t"] > button:disabled {
  background: var(--kr11-surface-high) !important;
  color: var(--kr11-on-surface-variant) !important;
  opacity: .72 !important;
}

/* Preview side: toolbar and preview become two clear containers. */
body[data-karma-view="reports"] #root [class~="min-w-0"][class~="flex-col"] > [class~="border-b"] {
  min-height: 64px !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: var(--kr11-shape-lg) !important;
  background: var(--kr11-surface) !important;
}

body[data-karma-view="reports"] #root [class~="min-w-0"][class~="flex-col"] > [class~="border-b"] p {
  color: var(--kr11-on-surface) !important;
  font-weight: 600 !important;
}

body[data-karma-view="reports"] #root [class~="min-w-0"][class~="flex-col"] > [class~="border-b"] button {
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--kr11-surface-high) !important;
  color: var(--kr11-on-surface) !important;
  box-shadow: none !important;
}

body[data-karma-view="reports"] #root [class~="min-w-0"][class~="flex-col"] > [class~="border-b"] button:hover:not(:disabled) {
  background: var(--kr11-surface-highest) !important;
}

body[data-karma-view="reports"] #root [class~="min-w-0"][class~="flex-col"] > [class~="flex-1"][class~="relative"] {
  min-height: 0;
  border-radius: var(--kr11-shape-xl) !important;
  background: var(--kr11-surface) !important;
  overflow: hidden !important;
}

body[data-karma-view="reports"] #root [class~="min-w-0"][class~="flex-col"] > [class~="flex-1"][class~="relative"] > [class~="h-full"] {
  color: var(--kr11-on-surface-variant) !important;
}

body[data-karma-view="reports"] #root [class~="min-w-0"][class~="flex-col"] > [class~="flex-1"][class~="relative"] > [class~="h-full"] p[class~="font-medium"] {
  color: var(--kr11-on-surface) !important;
  font-size: 18px !important;
  font-weight: 650 !important;
}

body[data-karma-view="reports"] #root [class~="min-w-0"][class~="flex-col"] iframe {
  margin: 16px !important;
  width: calc(100% - 32px) !important;
  height: calc(100% - 32px) !important;
  border: 0 !important;
  border-radius: var(--kr11-shape-lg) !important;
  box-shadow: none !important;
  background: white !important;
}

/* Popovers remain visually related to the report cards. */
body[data-karma-view="reports"] [data-radix-popper-content-wrapper] [data-radix-select-content],
body[data-karma-view="reports"] [data-radix-popper-content-wrapper] [data-radix-popover-content] {
  border: 0 !important;
  border-radius: var(--kr11-shape-lg) !important;
  background: var(--kr11-surface-high) !important;
  color: var(--kr11-on-surface) !important;
  box-shadow: 0 16px 40px rgb(0 0 0 / 26%) !important;
}

/* Mobile keeps the same containment idea without forcing desktop geometry. */
@media (max-width: 899px) {
  body[data-karma-view="reports"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="flex-1"] {
    padding: 12px !important;
    gap: 12px !important;
    background: var(--kr11-canvas) !important;
  }

  body[data-karma-view="reports"] #root [class~="w-72"] {
    border: 0 !important;
    border-radius: var(--kr11-shape-xl) !important;
    background: transparent !important;
    overflow: visible !important;
  }

  body[data-karma-view="reports"] #root [class~="w-72"] > [class~="p-4"][class~="space-y-5"] {
    padding: 0 !important;
  }

  body[data-karma-view="reports"] #root [class~="w-72"] > [class~="border-t"] {
    margin: 12px 0 0 !important;
  }

  body[data-karma-view="reports"] #root [class~="min-w-0"][class~="flex-col"] {
    gap: 12px !important;
    background: transparent !important;
  }
}