/* Scope-picker widget CSS - built by `npm run build:picker` (the
   tailwind.picker.config.js pipeline: the two picker components only,
   preflight off). The token layer mirrors dvs-core's theme system so the
   SelectOneStack utilities resolve, with bootstrap-friendly values. */

/* preflight is off for this build - the transform/ring/shadow utilities
   compose with these vars and compute to invalid without them (the
   chevron buttons' tops sat at the input's middle, the panel shadows
   were dropped) */

*, ::before, ::after {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / .5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
}

.visible {
  visibility: visible;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.inset-0 {
  inset: 0px;
}

.bottom-full {
  bottom: 100%;
}

.left-0 {
  left: 0px;
}

.right-0 {
  right: 0px;
}

.right-1\.5 {
  right: 0.375rem;
}

.right-7 {
  right: 1.75rem;
}

.top-1\/2 {
  top: 50%;
}

.top-full {
  top: 100%;
}

.z-30 {
  z-index: 30;
}

.z-\[34\] {
  z-index: 34;
}

.z-\[35\] {
  z-index: 35;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.flex {
  display: flex;
}

.hidden {
  display: none;
}

.size-4 {
  width: 1rem;
  height: 1rem;
}

.max-h-60 {
  max-height: 15rem;
}

.max-h-72 {
  max-height: 18rem;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.flex-1 {
  flex: 1 1 0%;
}

.shrink-0 {
  flex-shrink: 0;
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
  cursor: pointer;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.gap-2 {
  gap: 0.5rem;
}

.overflow-y-auto {
  overflow-y: auto;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.border {
  border-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-amber-500 {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}

.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-line-mid {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-line-mid) / var(--tw-border-opacity, 1));
}

.border-primary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-primary) / var(--tw-border-opacity, 1));
}

.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-primary-hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-primary-hover) / var(--tw-bg-opacity, 1));
}

.bg-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface) / var(--tw-bg-opacity, 1));
}

.bg-surface-2 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface-2) / var(--tw-bg-opacity, 1));
}

.p-0\.5 {
  padding: 0.125rem;
}

.p-2 {
  padding: 0.5rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.pr-14 {
  padding-right: 3.5rem;
}

.text-left {
  text-align: left;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.text-fg {
  --tw-text-opacity: 1;
  color: rgb(var(--c-fg) / var(--tw-text-opacity, 1));
}

.text-fg-faint {
  --tw-text-opacity: 1;
  color: rgb(var(--c-fg-faint) / var(--tw-text-opacity, 1));
}

.text-fg-muted {
  --tw-text-opacity: 1;
  color: rgb(var(--c-fg-muted) / var(--tw-text-opacity, 1));
}

.text-fg-strong {
  --tw-text-opacity: 1;
  color: rgb(var(--c-fg-strong) / var(--tw-text-opacity, 1));
}

.text-primary {
  --tw-text-opacity: 1;
  color: rgb(var(--c-primary) / var(--tw-text-opacity, 1));
}

.text-sky-600 {
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}

.text-surface {
  --tw-text-opacity: 1;
  color: rgb(var(--c-surface) / var(--tw-text-opacity, 1));
}

.placeholder-fg-faint::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(var(--c-fg-faint) / var(--tw-placeholder-opacity, 1));
}

.placeholder-fg-faint::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(var(--c-fg-faint) / var(--tw-placeholder-opacity, 1));
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-black\/5 {
  --tw-ring-color: rgb(0 0 0 / 0.05);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/* dvs-core token defaults (light mode); dark mode left to the site */

:root {
  --root-fs: 16px;
  --pad-card: 1rem;
  --pad-row: 0.5rem;
  --pad-chip: 0.25rem;
  --c-primary: 13 110 253;
  --c-primary-hover: 10 88 202;
  --c-primary-soft: 199 210 254;
  --c-accent: 224 242 254;
  --c-accent-line: 125 211 252;
  --c-surface: 255 255 255;
  --c-surface-2: 243 244 246;
  --c-surface-3: 229 231 235;
  --c-surface-muted: 209 213 219;
  --c-fg: 55 65 81;
  --c-fg-strong: 31 41 55;
  --c-fg-mid: 75 85 99;
  --c-fg-muted: 107 114 128;
  --c-fg-faint: 156 163 175;
  --c-line: 229 231 235;
  --c-line-mid: 209 213 219;
  --c-line-strong: 31 41 55;
  --c-danger: 220 38 38;
  --c-ok: 5 150 105;
  --c-warn: 217 119 6;
}

/* the picker box in the dark navbar: the input reads like a form field */

.cbi-scope-picker-box {
  min-width: 12rem;
}

.cbi-scope-picker-box input {
  display: block;
  height: 2rem;
  /* a clear step darker than tailwind's gray-200 default */
  border-color: rgb(var(--c-fg-mid));
}

/* the selected value (the placeholder shows the current scope) darker
   than the component's faint default */

.cbi-scope-picker-box input::-moz-placeholder {
  color: rgb(var(--c-fg-strong));
}

.cbi-scope-picker-box input::placeholder {
  color: rgb(var(--c-fg-strong));
}

/* the funnel + chevron buttons sit inside the search bar: the input's
   right padding (pr-14) clears the button column; darker icons so they
   read against the light input */

.cbi-scope-picker-box input[type="text"] {
  padding-right: 3.5rem;
}

.cbi-scope-picker-box div.relative > button {
  color: rgb(var(--c-fg-mid));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-sky-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
}

.hover\:text-fg-mid:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--c-fg-mid) / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
  .md\:inline {
    display: inline;
  }

  .md\:hidden {
    display: none;
  }
}