/* Shared rounded select fields and pickers. Keep the original select, values,
   change handlers, keyboard controls, labels, and form validation intact.
   Existing searchable dropdowns remain owned by their original components. */
:root {
  --rm-select-field-radius: 14px;
  --rm-select-picker-radius: 16px;
}

html body select {
  border-radius: var(--rm-select-field-radius) !important;
}

/* The native OS picker is not CSS-styleable in older browsers. Those browsers
   keep their working native list and the rounded field above. Supporting
   browsers put the styled picker in the top layer, outside clipped panels.
   Reference: https://developer.chrome.com/blog/a-customizable-select */
@supports (appearance: base-select) and selector(select::picker(select)) {
  :is(html body, html.rm-admin-console #adminModuleContainer) select:where(:not([multiple]):not(.ls-native-select-hidden):not(.lp-native-select-hidden):not(.laporan-saya-native-select)):where(:not([size]), [size="0"], [size="1"]) {
    appearance: base-select !important;
    -webkit-appearance: base-select !important;
    background-image: none !important;
    padding-inline: 12px !important;
    border-radius: var(--rm-select-field-radius) !important;
    gap: 10px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  select::picker(select) {
    appearance: base-select;
    box-sizing: border-box;
    inline-size: anchor-size(self-inline);
    min-inline-size: anchor-size(self-inline);
    max-inline-size: calc(100vw - 24px);
    max-block-size: min(320px, 60dvh);
    margin-block: 6px;
    padding: 6px;
    border: 1px solid #dbe3ea;
    border-radius: var(--rm-select-picker-radius);
    background: #ffffff;
    color: #0f2940;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .16);
    font: inherit;
    overflow: auto;
    overscroll-behavior: contain;
  }

  select::picker-icon {
    flex-shrink: 0;
    color: #56717e;
    transition: rotate .16s ease;
  }

  select:open::picker-icon { rotate: 180deg; }

  select:where(:not([multiple])):where(:not([size]), [size="0"], [size="1"]) option {
    min-block-size: 40px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #0f2940;
    font: inherit;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
  }

  select:where(:not([multiple])):where(:not([size]), [size="0"], [size="1"]) option:checked {
    background: #e7f0d2;
    color: #16392d;
    font-weight: 800;
  }

  select:where(:not([multiple])):where(:not([size]), [size="0"], [size="1"]) option:hover:not(:disabled),
  select:where(:not([multiple])):where(:not([size]), [size="0"], [size="1"]) option:focus-visible {
    background: #eef5df;
    color: #10293d;
    outline: 2px solid #0f766e;
    outline-offset: -2px;
  }

  select:where(:not([multiple])):where(:not([size]), [size="0"], [size="1"]) option:disabled {
    color: #84959d;
    cursor: not-allowed;
  }

  select option::checkmark { color: #0f766e; }

  /* Long dataset names, including Earth Engine, may use a second line. */
  #aiRuangMaslahatPanel select.ai-rm-provider-select {
    height: auto !important;
    min-height: 46px !important;
    padding-block: 10px !important;
    font-size: 12px !important;
    line-height: 1.4;
    white-space: normal !important;
  }
}

/* Native Windows select menempatkan teks di sisi atas ketika appearance:none.
   Dashboard memakai tinggi field tunggal 44px, sehingga tinggi baris yang sama
   membuat nilai normal, loading, dan status tabel tepat di tengah. */
:is(html.rm-admin-console, html.rm-admin-embed) body #adminModuleContainer select:where(:not([multiple]):not(.ls-native-select-hidden):not(.lp-native-select-hidden):not(.laporan-saya-native-select)):where(:not([size]), [size="0"], [size="1"]),
:is(html.rm-admin-console, html.rm-admin-embed) body #adminSpatialAreaReadonly select:where(:not([multiple])) {
  box-sizing: border-box !important;
  display: block !important;
  height: 44px !important;
  min-height: 44px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  line-height: 22px !important;
  vertical-align: middle !important;
}

/* The consolidated admin form layer has a deliberately specific selector.
   Keep this equally targeted rule after it so Windows Chromium honors real
   vertical padding for native select values such as Aktif/Nonaktif. */
:is(html.rm-admin-console, html.rm-admin-embed) body #adminModuleContainer select:not([multiple]):not(.ls-native-select-hidden):not(.lp-native-select-hidden):not(.laporan-saya-native-select):where(:not([size]), [size="0"], [size="1"]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  display: block !important;
  height: 44px !important;
  min-height: 44px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-inline: 13px !important;
  line-height: 22px !important;
  background-image: none !important;
  vertical-align: middle !important;
}

:is(html.rm-admin-console, html.rm-admin-embed) body #adminModuleContainer .rm-combo-trigger {
  display: flex !important;
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  align-items: center !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  line-height: 22px !important;
}

:is(html.rm-admin-console, html.rm-admin-embed) body #adminModuleContainer .rm-combo-label {
  display: flex !important;
  min-width: 0 !important;
  height: 22px !important;
  align-items: center !important;
  line-height: 22px !important;
}

@media (prefers-reduced-motion: reduce) {
  select::picker-icon { transition: none; }
}

/* Fallback dashboard untuk browser lama: pertahankan select native yang bersih
   tanpa menggambar panah CSS kedua. Chromium modern memakai picker terpadu di
   blok @supports berikut, lengkap dengan penanda pilihan aktif. */
:is(html.rm-admin-console, html.rm-admin-embed) body select:where(:not([multiple]):not(.ls-native-select-hidden):not(.lp-native-select-hidden):not(.laporan-saya-native-select)):where(:not([size]), [size="0"], [size="1"]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: none !important;
  background-position: initial !important;
  background-size: initial !important;
  background-repeat: no-repeat !important;
  padding-inline: 13px !important;
  cursor: pointer;
  text-overflow: ellipsis;
}

@supports (appearance: base-select) and selector(select::picker(select)) {
  :is(html.rm-admin-console, html.rm-admin-embed) body #adminModuleContainer select:not([multiple]):not(.ls-native-select-hidden):not(.lp-native-select-hidden):not(.laporan-saya-native-select):where(:not([size]), [size="0"], [size="1"]),
  :is(html.rm-admin-console, html.rm-admin-embed) body #adminSpatialAreaReadonly select:where(:not([multiple])):where(:not([size]), [size="0"], [size="1"]),
  :is(html.rm-admin-console, html.rm-admin-embed) body select:where(:not([multiple]):not(.ls-native-select-hidden):not(.lp-native-select-hidden):not(.laporan-saya-native-select)):where(:not([size]), [size="0"], [size="1"]) {
    appearance: base-select !important;
    -webkit-appearance: base-select !important;
    background-image: none !important;
    padding-inline: 12px !important;
  }

  :is(html.rm-admin-console, html.rm-admin-embed) body select::picker-icon {
    display: block !important;
    color: #56717e !important;
  }
}

/* Ruang Maslahat Stage 5.44.41 — satu bahasa visual untuk seluruh dropdown
   buatan aplikasi. Opsi aktif mengikuti menu Kualitas PDF: warna hijau lembut,
   teks gelap, dan centang yang tidak menggeser label. */
:is(
  .lp-custom-select-option,
  .ls-custom-select-option,
  .laporan-filter-custom-option,
  .rm-combo-option
) {
  position: relative !important;
  padding-right: 40px !important;
}

:is(
  .lp-custom-select-option,
  .ls-custom-select-option,
  .laporan-filter-custom-option,
  .rm-combo-option
):is(:hover, :focus-visible):not(:disabled) {
  border-color: transparent !important;
  background: #eef5df !important;
  color: #10293d !important;
  outline: 0 !important;
  box-shadow: none !important;
}

:is(
  .lp-custom-select-option.is-selected:not(.is-placeholder),
  .ls-custom-select-option.is-selected:not(.is-placeholder),
  .laporan-filter-custom-option.is-selected,
  .rm-combo-option.is-active:not([data-value=""])
) {
  background: #e7f0d2 !important;
  color: #16392d !important;
  font-weight: 800 !important;
}

:is(
  .lp-custom-select-option.is-selected:not(.is-placeholder),
  .ls-custom-select-option.is-selected:not(.is-placeholder),
  .laporan-filter-custom-option.is-selected,
  .rm-combo-option.is-active:not([data-value=""])
)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 9px;
  height: 5px;
  border-bottom: 2px solid #0f766e;
  border-left: 2px solid #0f766e;
  transform: translateY(-68%) rotate(-45deg);
  pointer-events: none;
}

:is(
  .lp-custom-select-option,
  .ls-custom-select-option,
  .laporan-filter-custom-option,
  .rm-combo-option
):disabled::after {
  border-color: #84959d;
}

/* Filter wilayah internal sebelumnya mempunyai palet khusus dengan selector
   sangat spesifik. Samakan juga komponen ini tanpa mengubah pencariannya. */
html.rm-admin-console body #adminModuleContainer .rm540-region-combo .ls-custom-select-option,
html[data-page="tindak-lanjut-laporan"] body .rm540-region-combo .ls-custom-select-option {
  padding-right: 40px !important;
}

html.rm-admin-console body #adminModuleContainer .rm540-region-combo .ls-custom-select-option:is(:hover, :focus-visible):not(:disabled),
html[data-page="tindak-lanjut-laporan"] body .rm540-region-combo .ls-custom-select-option:is(:hover, :focus-visible):not(:disabled) {
  background: #eef5df !important;
  color: #10293d !important;
}

html.rm-admin-console body #adminModuleContainer .rm540-region-combo .ls-custom-select-option.is-selected:not(.is-placeholder),
html[data-page="tindak-lanjut-laporan"] body .rm540-region-combo .ls-custom-select-option.is-selected:not(.is-placeholder) {
  background: #e7f0d2 !important;
  color: #16392d !important;
  font-weight: 800 !important;
}
