/* Final overrides for the shared navigation, report action, and mobile detail. */
#root [data-karma-mobile-nav],
#root #karma-shared-drawer,
#root [data-karma-desktop-rail] {
  --md-sys-color-on-surface: #edf4f8;
  --md-sys-color-on-surface-variant: #b3c4d0;
  --md-sys-color-surface-container-high: #263747;
  --md-sys-color-secondary-container: #304357;
  --md-sys-color-on-secondary-container: #edf4f8;
  --m3-surface-high: #263747;
  background: #0f1c2d !important;
  background-image: none !important;
  color: #edf4f8 !important;
}

/* Keep the native sidebar's internal surfaces from restoring the old color. */
#root [data-karma-mobile-nav] > :first-child,
#root #karma-shared-drawer > :first-child {
  background: transparent !important;
  background-image: none !important;
}

body[data-karma-view="reports"] #root [class~="min-w-0"][class~="flex-col"] > [class~="border-b"] {
  top: 26px !important;
  right: 34px !important;
}

@media (max-width: 899px) {
  body[data-karma-view="dialog-detail"] #root [data-karma-dialog-detail-content] {
    padding-top: 0 !important;
    background: #0f1c2d !important;
  }

  /* This element is a small item inside the scrolling surface, not a full-width row. */
  body[data-karma-view="dialog-detail"] #root [data-karma-dialog-detail-surface] > [data-karma-dialog-detail-back-row] {
    position: sticky !important;
    top: 8px !important;
    z-index: 25 !important;
    display: flex !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    flex: 0 0 56px !important;
    align-self: flex-start !important;
    align-items: center !important;
    margin: 8px 16px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  body[data-karma-view="dialog-detail"] #root [data-karma-dialog-detail-surface] [data-karma-dialog-detail-back-button],
  html:not(.dark) body[data-karma-view="dialog-detail"] #root [data-karma-dialog-detail-surface] [data-karma-dialog-detail-back-button] {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    border: 1px solid rgba(179, 196, 208, .48) !important;
    border-radius: 16px !important;
    background: transparent !important;
    background-image: none !important;
    color: #b3c4d0 !important;
    box-shadow: none !important;
  }

  body[data-karma-view="dialog-detail"] #root [data-karma-dialog-detail-surface] [data-karma-dialog-detail-back-button]:is(:hover, :active),
  html:not(.dark) body[data-karma-view="dialog-detail"] #root [data-karma-dialog-detail-surface] [data-karma-dialog-detail-back-button]:is(:hover, :active) {
    background: transparent !important;
    color: #edf4f8 !important;
    border-color: #edf4f8 !important;
  }

  body[data-karma-view="reports"] #root [class~="min-w-0"][class~="flex-col"] > [class~="border-b"] {
    top: 24px !important;
    right: 30px !important;
  }
}