html, body, div#app {
  height: 100%;
  margin: 0;
}

:root {
  --merlin-orange-10: #fef0e7;
  --merlin-orange-20: #fcd2b6;
  --merlin-orange-30: #fab585;
  --merlin-orange-40: #f89754;
  --merlin-orange-50: #eb660a;
  --merlin-orange-60: #dc6009;
  --merlin-orange-70: #ab4a07;
  --merlin-orange-80: #7a3505;
  --merlin-orange-90: #492003;
  --merlin-orange-100: #180b01;
}

.ag-theme-alpine, .ag-theme-alpine-dark {
  --ag-row-hover-color: var(--merlin-orange-10);
  --ag-selected-row-background-color: var(--merlin-orange-20);
  --ag-range-selection-border-color: var(--merlin-orange-40);
  --ag-value-change-value-highlight-background-color: var(--merlin-orange-30);
  --ag-font-family: 'Gudea';
  --ag-grid-size: 4px;
  --ag-font-size: 12px;
  --ag-checkbox-checked-color: var(--merlin-orange-50);
  --ag-checkbox-unchecked-color: var(--merlin-orange-80);
}

.ag-theme-alpine-dark {
  --ag-row-hover-color: var(--merlin-orange-80);
  --ag-selected-row-background-color: var(--merlin-orange-70);
  --ag-background-color: #1e1e1e;
}

.ag-cell-editable, .ag-cell-not-editable {
  text-align: right;
}

.ag-theme-alpine-dark .ag-row-hover.ag-row-even .ag-cell-not-editable {
  background-color: var(--merlin-orange-90);
}

.ag-theme-alpine-dark .ag-row-even .ag-cell-not-editable {
  background-color: black;
}

.ag-theme-alpine-dark .ag-row-hover.ag-row-odd .ag-cell-not-editable {
  background-color: var(--merlin-orange-90);
}

.ag-theme-alpine-dark .ag-row-odd .ag-cell-not-editable {
  background-color: #111111;
}

.ag-theme-alpine .ag-row-hover.ag-row-even .ag-cell-not-editable {
  background-color: var(--merlin-orange-20);
}

.ag-theme-alpine .ag-row-even .ag-cell-not-editable {
  background-color: #e1e1e1;
}

.ag-theme-alpine .ag-row-hover.ag-row-odd .ag-cell-not-editable {
  background-color: var(--merlin-orange-20);
}

.ag-theme-alpine .ag-row-odd .ag-cell-not-editable {
  background-color: #efefef;
}

/* Highlight row matching an externally-driven selection (e.g. the
   hindcasting results grid mirroring a chart-clicked point). Distinct
   from ag-grid's native selection colour so it doesn't clash with
   checkbox-driven multi-select. !important trumps the per-cell
   `.ag-cell-not-editable` rules above which otherwise win specificity. */
.ag-theme-alpine .hindcasting-highlighted-row,
.ag-theme-alpine .hindcasting-highlighted-row .ag-cell-not-editable,
.ag-theme-alpine .hindcasting-highlighted-row .ag-cell-editable {
  background-color: var(--merlin-orange-30) !important;
}

.ag-theme-alpine-dark .hindcasting-highlighted-row,
.ag-theme-alpine-dark .hindcasting-highlighted-row .ag-cell-not-editable,
.ag-theme-alpine-dark .hindcasting-highlighted-row .ag-cell-editable {
  background-color: var(--merlin-orange-70) !important;
}

div[data-cy-root] {
  width: 100vw;
  height: 100vh;
}

#auth-component {
  background-image: url("../img/auth-bg-black.webp");
  background-size: 100% auto;
}

.settings-unit-button {
  text-transform: none !important;
}

rect.wellbore-graphics {
  fill: var(--merlin-orange-80);
  stroke-width: 1px;
  stroke: var(--merlin-orange-80);
}


rect.drill-string-graphics {
  fill: var(--merlin-orange-60);
  stroke-width: 1px;
  stroke: var(--merlin-orange-60);
}


rect.drill-string-inner-graphics {
  fill: var(--merlin-orange-30);
  stroke-width: 1px;
  stroke: var(--merlin-orange-30);
}

.chart-menu {
  width: 1000px;
  height: 600px;
}

.MuiModal-backdrop {
  background-color: rgba(0,0,0,0.4) !important;
}

@keyframes spin {
  0% { transform: rotate(360deg); }
  100% {  transform: rotate(1deg); }
}

.sync-icon {
  animation: spin 0.5s linear infinite;
}

.ag-aria-description-container {
  display: none;
}

.ag-root-wrapper {
  overflow: visible;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.faded-in {
  animation: fadeIn 500ms;
}


.Panel {
  color: transparent
}

.ResizeHandle {
  flex: 0 0 var(--resize-handle-width, 2px);
  outline: none;
  padding: 0;
}

/* Touch devices: widen the hit-target while keeping the visible line thin */
@media (pointer: coarse) {
  .ResizeHandle {
    flex: 0 0 2rem;
  }
}

.input-helper {
  color: gray;
}

.ag-popup-child {
  z-index: 1400;
  top: 0;
}

.MuiAutocomplete-popper {
  z-index: 1500 !important;
}

/* ---- videx-wellog (from @equinor/videx-wellog/dist/styles/styles.css) ---- */
.log-controller {
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex: 1 1 0%;
  flex-direction: row;
  display: flex;
  font-family: Verdana, Tahoma, sans-serif;
  background-color: white;
  pointer-events: none;
  overflow: hidden;
}
.log-controller .track {
  border-right: 1px solid #333;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.log-controller .track .track-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  font-weight: bold;
  overflow: hidden;
  background-color: transparent;
  color: #555;
  text-align: center;
  text-anchor: middle;
  white-space: nowrap;
  border-bottom: 1px solid #333;
  pointer-events: auto;
  cursor: help;
}
.log-controller .track .track-legend {
  pointer-events: all;
  overflow: hidden;
  border-bottom: 1px solid #333;
}
.log-controller .track .track-container {
  flex: 1 1 auto;
  overflow: hidden;
}
.log-controller .track .track-container canvas,
.log-controller .track .track-container svg {
  overflow: hidden;
}
.log-controller .track:last-child {
  border-right: none;
}
.log-controller .track .error {
  background: repeating-linear-gradient(-45deg, #f99, #f99 10px, #fff 10px, #fff 20px);
}
.log-controller .overlay {
  pointer-events: auto;
  min-height: 0;
  position: absolute;
  z-index: 200;
  cursor: grab;
}
.log-controller .overlay:active {
  cursor: grabbing;
}

/* Track-to-track resize handle injected by rt-viewer. Sits as a flex-item
   sibling between two adjacent .track children of .log-controller. */
.log-controller .rt-resize-handle {
  flex: 0 0 6px;
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 300;
  pointer-events: auto;
  user-select: none;
}
.log-controller .rt-resize-handle:hover,
.log-controller .rt-resize-handle.rt-resize-active {
  background: rgba(25, 118, 210, 0.25);
}

/* RT viewer theme tokens. `.rt-root` wraps the whole site; `.rt-dark` is
   added when the app-wide dark mode switch is on. Inline styles in the
   Reagent components use `var(--rt-*)` so flipping the switch updates
   every divider / muted-text / chip / input border at once. */
.rt-root {
  --rt-divider:        rgba(0, 0, 0, 0.12);
  --rt-divider-weak:   rgba(0, 0, 0, 0.08);
  --rt-fg-muted:       rgba(0, 0, 0, 0.60);
  --rt-fg-dim:         rgba(0, 0, 0, 0.35);
  --rt-input-border:   rgba(0, 0, 0, 0.20);
  --rt-chip-bg:        rgba(0, 0, 0, 0.06);
  --rt-track-divider:  #333;
  --rt-scale-text:     #555;
  --rt-label-bg:       #fff;
}
.rt-root.rt-dark {
  --rt-divider:        rgba(255, 255, 255, 0.18);
  --rt-divider-weak:   rgba(255, 255, 255, 0.10);
  --rt-fg-muted:       rgba(255, 255, 255, 0.75);
  --rt-fg-dim:         rgba(255, 255, 255, 0.45);
  --rt-input-border:   rgba(255, 255, 255, 0.25);
  --rt-chip-bg:        rgba(255, 255, 255, 0.08);
  --rt-track-divider:  rgba(255, 255, 255, 0.20);
  --rt-scale-text:     #ccc;
  --rt-label-bg:       #1e1e1e;
}

/* videx-wellog dark overrides. videx's stylesheet hard-codes a white log
   surface, `#555` title text, and `#333` track borders; these rules
   re-theme it when `.rt-dark` is active on the ancestor root. */
.rt-root.rt-dark .log-controller {
  background-color: transparent;
}
.rt-root.rt-dark .log-controller .track {
  border-right: 1px solid var(--rt-track-divider);
}
.rt-root.rt-dark .log-controller .track:last-child {
  border-right: none;
}
.rt-root.rt-dark .log-controller .track .track-title {
  color:         var(--rt-scale-text);
  border-bottom: 1px solid var(--rt-track-divider);
}
.rt-root.rt-dark .log-controller .track .track-legend {
  border-bottom: 1px solid var(--rt-track-divider);
}
/* All SVG text inside the log-controller — scale title, min/max labels,
   curve headers, tick labels. videx sets these via SVG `fill` attribute
   which is lower-priority than CSS, so a plain rule wins without
   !important. */
.rt-root.rt-dark .log-controller text {
  fill: var(--rt-scale-text);
}
.rt-root.rt-dark .log-controller line.major-tick-line {
  stroke: rgba(255, 255, 255, 0.25);
}
/* Rectangle that sits under each tick label to mask the ruler line. In
   light mode the browser default (black) is invisible because the ruler
   renders over the white surface; in dark mode we need it to match the
   Paper behind. */
.rt-root.rt-dark .log-controller rect.label-bg {
  fill: var(--rt-label-bg);
}
/* Range-value backgrounds. videx-wellog's `setupDomainBackground` paints a
   <rect> behind each curve-header min/max text with an inline
   `style="fill: white"` so the domain number masks the ruler line. That
   inline style beats any plain CSS rule on specificity, which left a
   bright white patch around every range number in dark mode. Override
   via attribute selector + `!important` to force the same track-surface
   colour we already use for the classed `label-bg` rects. */
.rt-root.rt-dark .log-controller rect[style*="fill: white"] {
  fill: var(--rt-label-bg) !important;
}
.log-controller .hidden {
  display: none !important;
}

.log-controller.horizontal {
  flex-direction: column;
}
.log-controller.horizontal .track {
  flex-direction: row;
  border-right: none;
  border-bottom: 1px solid #333;
}
.log-controller.horizontal .track .track-title {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  border-bottom: none;
  border-left: 1px solid #333;
}
.log-controller.horizontal .track .track-legend {
  border-bottom: none;
  border-right: 1px solid #333;
}
.log-controller.horizontal .track:last-child {
  border-bottom: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dot-keyframes {
  0% {
    opacity: 0.4;
    transform: scale(1, 1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2, 1.2);
  }
  100% {
    opacity: 0.4;
    transform: scale(1, 1);
  }
}
.track .loader {
  flex: 1 1 auto;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.track .loader .loading-dots {
  animation: dot-keyframes 0.6s infinite ease-in-out;
  background-color: #eee;
  border-radius: 10px;
  display: inline-block;
  height: 10px;
  width: 10px;
  margin: 4px 0;
}

.track .loader :nth-child(2) {
  animation-delay: 0.2s;
}

.track .loader :nth-child(1) {
  animation-delay: 0.4s;
}

.horizontal .track .loader {
  flex-direction: row;
}
.horizontal .track .loader .loading-dots {
  margin: 0 4px;
}
.horizontal .track .loader :nth-child(1) {
  animation-delay: 0.2s;
}
.horizontal .track .loader :nth-child(2) {
  animation-delay: 0.4s;
}

.scale-track {
  stroke: #555;
}

.scale-track .label-bg {
  stroke: white;
  fill: white;
}

.slave-scale {
  background-color: #f9f9f9;
}

.slave-scale .label-bg {
  stroke: #f9f9f9;
  fill: #f9f9f9;
}

.slave-scale text {
  stroke: #777;
  fill: #777;
}

.slave-scale .major-tick-line {
  stroke-width: 0.5;
  stroke: #777;
}

.master-scale .major-tick .label-bg {
  stroke: white;
  fill: white;
}

.master-scale .major-tick text {
  stroke: #555;
  fill: #555;
}

.master-scale .minor-tick-line {
  stroke-width: 0.5;
  stroke: #555;
}
/* WITSML object-browser spinner — used in browser_views.cljs */
@keyframes rt-witsml-spin {
  to { transform: rotate(360deg); }
}

/* Dashboard alarm flash — used in dashboard/views.cljs */
@keyframes rt-dash-flash {
  0%   { opacity: 1.0; }
  50%  { opacity: 0.55; }
  100% { opacity: 1.0; }
}