<!-- codex pipeline e2e test, no visible change. -->
/* MSK MSO brand theme — repaint OHIF to show logo colors.
   Key insight: OHIF's React root wraps the app in a <div style="bg-black">
   that covers the body gradient. We make that container transparent so the
   logo-color gradient shows through, and paint the main chrome in brand blues. */

/* Body: gentle cyan-blue gradient — desaturated so it's easier on the eyes. */
html, body {
  min-height: 100vh !important;
  height: 100% !important;
  background-image: linear-gradient(160deg, #9bc4dc 0%, #5e9bbd 50%, #3d729a 100%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* OHIF's outer app container is opaque black by default — make it transparent
   so the body gradient shows. Scoped tightly so we don't break viewports. */
#root > div {
  background-color: transparent !important;
}

/* Muted cyan-blue palette — chrome reads as brand without glaring. */
.bg-primary-dark {
  background-color: #3d729a !important;
}
.bg-primary-light {
  background-color: #5e9bbd !important;
}
.bg-primary-main {
  background-color: #4a8faf !important;
}
.bg-customblue-300 {
  background-color: #7eb0c8 !important;
}

/* .bg-black on chrome elements (not canvas/viewport) — muted brand blue */
div.bg-black {
  background-color: #3d729a !important;
}

/* Thin lime accent line under the top toolbar */
body > div#root > div > header,
body > div#root > div > div > header {
  border-bottom: 2px solid rgba(159,204,59,0.55) !important;
}

/* CRITICAL: keep image viewports black for clinical imaging */
.viewport-element,
.cornerstone-viewport-element,
[class*="ViewportGrid"] canvas,
[class*="cornerstone"] canvas,
canvas {
  background: #000 !important;
}

body.msk-ruler-cursor-active .viewport-element,
body.msk-ruler-cursor-active .cornerstone-viewport-element,
body.msk-ruler-cursor-active [class*="Viewport"] canvas,
body.msk-ruler-cursor-active [class*="cornerstone"] canvas,
body.msk-ruler-cursor-active canvas {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M2 12h20' stroke='%23081424' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M12 2v20M2 12h20' stroke='%23f8fbff' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='4.5' fill='none' stroke='%239fcc3b' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23081424'/%3E%3C/svg%3E") 12 12, crosshair !important;
}

#msk-upload-date-filter {
  position: fixed;
  top: 82px;
  right: 260px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(174, 218, 237, 0.62);
  border-radius: 8px;
  background: rgba(9, 42, 70, 0.92);
  color: #f4fbff;
  box-shadow: 0 8px 24px rgba(4, 18, 30, 0.26);
  font: 12px/1.2 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

#msk-upload-date-filter[hidden] {
  display: none !important;
}

#msk-upload-date-filter .msk-upload-date-title {
  font-weight: 700;
  letter-spacing: 0;
}

#msk-upload-date-filter .msk-upload-date-field {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(244, 251, 255, 0.85);
}

#msk-upload-date-filter input[type="date"] {
  width: 124px;
  height: 28px;
  box-sizing: border-box;
  border: 1px solid rgba(174, 218, 237, 0.7);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.96);
  color: #08273d;
  font: 12px/1.2 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

#msk-upload-date-filter .msk-upload-date-clear {
  height: 28px;
  border: 1px solid rgba(174, 218, 237, 0.7);
  border-radius: 6px;
  background: rgba(94, 197, 241, 0.16);
  color: #f4fbff;
  font: 700 12px/1 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
}

#msk-upload-date-filter .msk-upload-date-clear:hover {
  background: rgba(94, 197, 241, 0.28);
}