/* Wells Intelligence component styles (design tokens + controls).
   Loaded once from the app head. Component classes are deliberately more
   specific than the global `.btn` reset in app.R (which forces 14px / 10x16 /
   8px radius / no border with !important on every button), so chips, segmented
   controls and small buttons keep their own shape. Reference: the product film
   frames (Find Wells card, well card). */
:root {
  --wi-ink: #0f172a; --wi-ink-2: #334155; --wi-muted: #64748b; --wi-faint: #94a3b8;
  --wi-line: #cbd5e1; --wi-line-soft: #e2e8f0; --wi-bg-soft: #f8fafc;
  --wi-green: var(--primary-oil, #1B5E20); --wi-green-dark: #14532d; --wi-green-soft: #e8f3ea;
  --wi-radius: 8px; --wi-radius-sm: 6px;
  --wi-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .08);
}
/* tracked uppercase caption used above every control group */
.wi-label { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wi-muted); margin: 12px 0 6px; display: flex; align-items: center; gap: 6px; }
.wi-label .wi-hint { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--wi-faint); }
/* pill chips (checkbox / radio group buttons from shinyWidgets) */
.wi-chips .btn-group-container-sw { display: flex !important; flex-wrap: wrap; gap: 6px; margin: 0; }
.wi-chips .btn, .wi-chips label.btn {
  display: inline-flex !important; align-items: center; margin: 0 !important;
  font-size: .78rem !important; font-weight: 500 !important; line-height: 1.2 !important; padding: 5px 12px !important;
  border-radius: 999px !important; border: 1px solid var(--wi-line) !important;
  background: #fff !important; color: var(--wi-ink-2) !important; box-shadow: none !important; white-space: nowrap; transition: border-color .12s, background .12s, color .12s;
}
.wi-chips .btn:hover { border-color: var(--wi-green) !important; color: var(--wi-green) !important; }
.wi-chips .btn-check:checked + .btn, .wi-chips .btn.active { background: var(--wi-green) !important; border-color: var(--wi-green) !important; color: #fff !important; }
.wi-chips .btn-check:focus-visible + .btn { outline: 2px solid var(--wi-green); outline-offset: 1px; }
/* segmented control: one joined bar, dark-green active segment (film: BOE | Oil | Gas | Water) */
.wi-segmented .btn-group-container-sw { display: inline-flex !important; gap: 0; padding: 2px; border: 1px solid var(--wi-line-soft); border-radius: var(--wi-radius-sm); background: var(--wi-bg-soft); }
.wi-segmented .btn, .wi-segmented label.btn {
  display: inline-flex !important; align-items: center; margin: 0 !important; font-size: .76rem !important; font-weight: 500 !important; line-height: 1.2 !important;
  padding: 4px 10px !important; border-radius: 4px !important; border: 1px solid transparent !important; background: transparent !important; color: var(--wi-ink-2) !important; box-shadow: none !important; white-space: nowrap;
}
.wi-segmented .btn-check:checked + .btn, .wi-segmented .btn.active { background: var(--wi-green-dark) !important; color: #fff !important; }
/* range slider: thin track, hollow ring handles, no bubbles */
.wi-range .irs { margin: 0; height: 30px; }
.wi-range .irs--shiny .irs-line { top: 12px; height: 3px; background: var(--wi-line-soft); border: none; border-radius: 2px; }
.wi-range .irs--shiny .irs-bar { top: 12px; height: 3px; background: var(--wi-green) !important; border: none !important; }
.wi-range .irs--shiny .irs-from, .wi-range .irs--shiny .irs-to, .wi-range .irs--shiny .irs-single, .wi-range .irs--shiny .irs-min, .wi-range .irs--shiny .irs-max { display: none !important; }
.wi-range .irs--shiny .irs-handle { width: 16px; height: 16px; top: 5px; background: #fff !important; border: 2px solid var(--wi-green) !important; border-radius: 50%; box-shadow: none !important; cursor: grab; }
.wi-range .irs--shiny .irs-handle > i:first-child { display: none; }
.wi-range .irs--shiny .irs-handle:hover, .wi-range .irs--shiny .irs-handle.state_hover { background: var(--wi-green-soft) !important; }
/* from/to fields: bordered box, tiny caption inside-left, value right (film) */
.wi-fields { display: flex; gap: 8px; margin-top: 6px; }
.wi-field { flex: 1; min-width: 0; position: relative; }
.wi-field .form-group { margin: 0; }
.wi-field .wi-field-cap { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wi-faint); pointer-events: none; }
.wi-field .form-control { height: 34px; padding: 4px 10px 4px 46px; font-size: .84rem; font-weight: 600; text-align: right; color: var(--wi-ink); border: 1px solid var(--wi-line-soft); border-radius: var(--wi-radius-sm); background: #fff; box-shadow: none; }
.wi-field .form-control:focus { border-color: var(--wi-green); box-shadow: 0 0 0 2px var(--wi-green-soft); }
.wi-field .form-control::placeholder { color: var(--wi-faint); font-weight: 500; }
/* result line: big count, small buttons on the right */
.wi-result { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.wi-count { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; color: var(--wi-ink); line-height: 1; }
.wi-count-unit { font-size: .84rem; color: var(--wi-ink-2); margin-left: 4px; }
.wi-spacer { flex: 1; }
/* small buttons that ignore the global reset */
.wi-btn-sm, .wi-btn-sm.btn, .wi-btn-sm.action-button { font-size: .76rem !important; font-weight: 600 !important; padding: 5px 11px !important; border-radius: var(--wi-radius-sm) !important; border: 1px solid var(--wi-line-soft) !important; background: var(--wi-bg-soft) !important; color: var(--wi-green-dark) !important; box-shadow: none !important; line-height: 1.2 !important; }
.wi-btn-sm:hover { background: var(--wi-green-soft) !important; }
.wi-btn-sm.wi-primary, .wi-btn-sm.wi-primary.btn { background: var(--wi-green) !important; border-color: var(--wi-green) !important; color: #fff !important; }
/* accordion headers in the Find Wells panel: quieter, tracked */
.wi-panel .accordion-button { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wi-ink-2); padding: 10px 10px; background: #fff; }
.wi-panel .accordion-button:not(.collapsed) { color: var(--wi-green-dark); box-shadow: none; }
.wi-panel .accordion-item { border-color: var(--wi-line-soft); }
.wi-panel .accordion-body { padding: 2px 10px 12px; }
.wi-panel .form-group:has(> .irs), .wi-panel .form-group:has(.irs) { padding: 0 8px; }
.wi-panel .selectize-input { font-size: .8rem; min-height: 34px; padding: 5px 10px; border: 1px solid var(--wi-line-soft); border-radius: var(--wi-radius-sm); box-shadow: none; }
.wi-panel .selectize-input .item { background: var(--wi-green-soft); color: var(--wi-green-dark); border-radius: 4px; padding: 0 6px; }
.wi-note { font-size: .74rem; color: var(--wi-muted); }
/* stat grid (film's well card): caption over value, optional sub line */
.wi-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; margin: 4px 0 12px; }
.wi-stat-cap { font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wi-muted); }
.wi-stat-val { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; color: var(--wi-ink); line-height: 1.25; margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wi-stat-sub { font-size: .72rem; color: var(--wi-faint); margin-top: 1px; }
@media (max-width: 720px) { .wi-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* modal title: eyebrow + heading (Selection Analysis / Portfolio trend pattern) */
.wi-modal-title { border-left: 4px solid var(--wi-green); padding: 4px 0 4px 12px; margin-right: 16px; }
.wi-modal-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wi-green); }
.wi-modal-heading { font-size: 1.05rem; font-weight: 700; color: var(--wi-ink); margin-top: 2px; line-height: 1.25; }
.wi-modal-heading .wi-heading-sub { font-size: .82rem; font-weight: 500; color: var(--wi-muted); margin-left: 8px; }
/* inline control row label + model line */
.wi-control-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 6px 0 4px; }
.wi-control { display: inline-flex; align-items: center; gap: 8px; }
.wi-control .wi-label { margin: 0; }
.wi-model-line { font-size: .78rem; color: var(--wi-ink-2); margin: 6px 0 2px; }
.wi-model-line b { color: var(--wi-green-dark); font-weight: 600; }
/* soft note box replacing the yellow/blue alert boxes */
.wi-note-box { margin-top: 12px; padding: 10px 12px; background: var(--wi-bg-soft); border-left: 3px solid var(--wi-line); border-radius: 6px; font-size: .78rem; color: var(--wi-ink-2); line-height: 1.5; }
.wi-note-box b { color: var(--wi-ink); }