/* BWS_AI_THEMES_V1 — palette, tab AI, dan panel personalisasi. */

:root {
  --bws-theme-bg: #f1f8f7;
  --bws-theme-surface: #ffffff;
  --bws-theme-surface-2: #f7fcfb;
  --bws-theme-surface-3: #e4f3ef;
  --bws-theme-text: #102a2a;
  --bws-theme-muted: #55706f;
  --bws-theme-border: #cfe3df;
  --bws-theme-primary: #0f766e;
  --bws-theme-primary-strong: #0b5f59;
  --bws-theme-accent: #f59e0b;
  --bws-theme-header-start: #083344;
  --bws-theme-header-end: #0f766e;
  --bws-theme-on-primary: #ffffff;
  --bws-theme-focus: #2dd4bf;
  --bws-theme-soft-primary: #e6fffb;
  --bws-theme-soft-accent: #fff7df;
  --bws-theme-table-head: #e8f5f3;
  --bws-theme-input-bg: #ffffff;
  --bws-theme-shadow: rgba(8, 51, 68, .18);
  --bws-theme-overlay: rgba(2, 12, 27, .64);
}

html[data-bws-theme] {
  background: var(--bws-theme-bg);
  color: var(--bws-theme-text);
  /* Alias variabel lama agar Data Hidrologi ikut berganti palette. */
  --bws-hydro-navy: var(--bws-theme-header-start);
  --bws-hydro-teal: var(--bws-theme-primary);
  --bws-hydro-teal-dark: var(--bws-theme-primary-strong);
  --bws-hydro-surface: var(--bws-theme-surface);
  --bws-hydro-soft: var(--bws-theme-bg);
  --bws-hydro-line: var(--bws-theme-border);
  --bws-hydro-text: var(--bws-theme-text);
  --bws-hydro-muted: var(--bws-theme-muted);
  /* Alias palette utama pada app.css agar header, kartu, dan kontrol peta
     mengikuti tema tanpa mengubah warna semantik status/error. */
  --primary: var(--bws-theme-primary);
  --primary-dark: var(--bws-theme-primary-strong);
  --primary-soft: var(--bws-theme-soft-primary);
  --surface: var(--bws-theme-surface);
  --surface-solid: var(--bws-theme-surface);
  --text-main: var(--bws-theme-text);
  --text-muted: var(--bws-theme-muted);
  --border: var(--bws-theme-border);
  --warning: var(--bws-theme-accent);
  --shadow-sm: 0 1px 2px var(--bws-theme-shadow);
  --shadow-md: 0 12px 30px var(--bws-theme-shadow);
  --shadow-lg: 0 22px 55px var(--bws-theme-shadow);
}

html[data-bws-theme] body {
  background-color: var(--bws-theme-bg);
  color: var(--bws-theme-text);
}

/* Komponen AI */
.bws-ai-overlay { background: var(--bws-theme-overlay); }
.bws-ai-workspace {
  color: var(--bws-theme-text);
  background: var(--bws-theme-surface);
  border-color: var(--bws-theme-border);
  box-shadow: 0 32px 100px var(--bws-theme-shadow);
}
.bws-ai-head {
  color: var(--bws-theme-on-primary);
  background: linear-gradient(135deg, var(--bws-theme-header-start), var(--bws-theme-header-end));
}
.bws-ai-head button { color: var(--bws-theme-on-primary); }
.bws-ai-main { background: var(--bws-theme-bg); }
.bws-ai-form {
  background: var(--bws-theme-surface);
  border-top-color: var(--bws-theme-border);
}
.bws-ai-form textarea {
  color: var(--bws-theme-text);
  background: var(--bws-theme-input-bg);
  border-color: var(--bws-theme-border);
}
.bws-ai-form textarea:focus,
.bws-ai-theme-field input:focus,
.bws-ai-theme-field select:focus {
  border-color: var(--bws-theme-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bws-theme-focus) 24%, transparent);
}
.bws-ai-form > button,
.bws-ai-result-actions button,
.bws-ai-feature-launch button,
.bws-ai-coordinate button,
.bws-ai-data-action.is-apply,
.bws-ai-code-action.is-apply,
.bws-ai-data-upload-bar label {
  color: var(--bws-theme-on-primary);
  background: var(--bws-theme-primary);
  border-color: var(--bws-theme-primary);
}
.bws-ai-form > button:hover,
.bws-ai-result-actions button:hover,
.bws-ai-feature-launch button:hover,
.bws-ai-coordinate button:hover,
.bws-ai-data-action.is-apply:hover,
.bws-ai-code-action.is-apply:hover,
.bws-ai-data-upload-bar label:hover {
  background: var(--bws-theme-primary-strong);
}
.bws-ai-status { color: var(--bws-theme-text); background: var(--bws-theme-surface-3); }
.bws-ai-empty span,
.bws-ai-code-empty span { color: var(--bws-theme-primary); background: var(--bws-theme-soft-primary); border-color: var(--bws-theme-focus); }
.bws-ai-result-head h3,
.bws-ai-metrics b,
.bws-ai-transfer-grid button { color: var(--bws-theme-text); }
.bws-ai-result-head p,
.bws-ai-metrics span,
.bws-ai-search-grid span,
.bws-ai-coordinate label,
.bws-ai-inline-status { color: var(--bws-theme-muted); }
.bws-ai-metrics article,
.bws-ai-chart-wrap,
.bws-ai-table-wrap,
.bws-ai-search-grid article,
.bws-ai-transfer-grid button,
.bws-ai-upload,
.bws-ai-coordinate,
.bws-ai-feature-launch,
.bws-ai-cloned-result > *,
.bws-ai-code-meta article,
.bws-ai-code-files details,
.bws-ai-data-datasets details {
  color: var(--bws-theme-text);
  background: var(--bws-theme-surface);
  border-color: var(--bws-theme-border);
}
.bws-ai-table-wrap th,
.bws-ai-cloned-result th { color: var(--bws-theme-text); background: var(--bws-theme-table-head); }
.bws-ai-table-wrap th,
.bws-ai-table-wrap td,
.bws-ai-cloned-result th,
.bws-ai-cloned-result td { border-bottom-color: var(--bws-theme-border); }
.bws-ai-coordinate input,
.bws-ai-theme-field select { color: var(--bws-theme-text); background: var(--bws-theme-input-bg); border-color: var(--bws-theme-border); }
.bws-ai-coordinate label,
.bws-ai-code-meta span,
.bws-ai-code-files details > p,
.bws-ai-data-upload-bar span,
.bws-ai-data-datasets summary small { color: var(--bws-theme-muted); }
.bws-ai-code-meta b,
.bws-ai-code-files summary b,
.bws-ai-data-datasets summary b { color: var(--bws-theme-text); }
.bws-ai-code-files summary span,
.bws-ai-data-counts span,
.bws-ai-data-parameters span,
.bws-ai-code-tests span { color: var(--bws-theme-primary-strong); background: var(--bws-theme-soft-primary); }

/* Pilihan Data / Update / Kode menjadi tab yang jelas. */
.bws-ai-mode-switch {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 3px;
  min-width: 0;
  max-width: min(100%, 640px);
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 15px;
  background: rgba(0, 0, 0, .16);
}
.bws-ai-mode-switch[role="tablist"] { isolation: isolate; }
.bws-ai-mode-switch .bws-ai-tab {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 10px;
  color: rgba(255, 255, 255, .82);
  background: transparent;
  padding: 0 11px;
  font: 800 12px/1 Inter, system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.bws-ai-mode-switch .bws-ai-tab:hover { color: #fff; background: rgba(255, 255, 255, .13); }
.bws-ai-mode-switch .bws-ai-tab:focus-visible {
  outline: 2px solid var(--bws-theme-focus);
  outline-offset: 1px;
}
.bws-ai-mode-switch .bws-ai-tab.is-active,
.bws-ai-mode-switch .bws-ai-tab[aria-selected="true"] {
  color: var(--bws-theme-primary-strong);
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
}
.bws-ai-mode-switch .bws-ai-themes-tab span {
  color: var(--bws-theme-accent);
  font-size: 14px;
}
.bws-ai-mode-switch .bws-ai-themes-tab b { font-weight: 850; }
.bws-ai-mode-switch select,
.bws-ai-mode-switch > #bwsAiCodeHistory {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 10px;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  padding: 0 9px;
  font: 800 11px/1 Inter, system-ui, sans-serif;
}
.bws-ai-mode-switch select option { color: #0f172a; background: #fff; }
.bws-ai-mode-switch > #bwsAiCodeHistory { min-width: 34px; padding: 0 8px; cursor: pointer; }

/* Panel themes */
.bws-ai-theme-panel {
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: clamp(2px, 1vw, 10px) 0 18px;
  color: var(--bws-theme-text);
}
.bws-ai-theme-panel[hidden] { display: none !important; }
.bws-ai-theme-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 2px 0;
}
.bws-ai-theme-kicker {
  display: block;
  color: var(--bws-theme-primary);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}
.bws-ai-theme-heading h3 { margin: 5px 0 3px; color: var(--bws-theme-text); font-size: clamp(20px, 2.5vw, 28px); line-height: 1.15; }
.bws-ai-theme-heading p { max-width: 680px; margin: 0; color: var(--bws-theme-muted); font-size: 13px; line-height: 1.5; }
.bws-ai-theme-current {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  border: 1px solid var(--bws-theme-border);
  border-radius: 999px;
  color: var(--bws-theme-primary-strong);
  background: var(--bws-theme-soft-primary);
  padding: 0 11px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}
.bws-ai-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}
.bws-ai-theme-card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 92px;
  border: 1px solid var(--bws-theme-border);
  border-radius: 16px;
  color: var(--bws-theme-text);
  background: var(--bws-theme-surface);
  padding: 11px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 13px rgba(15, 23, 42, .04);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bws-ai-theme-card:hover { border-color: var(--bws-card-primary); box-shadow: 0 8px 20px rgba(15, 23, 42, .1); transform: translateY(-1px); }
.bws-ai-theme-card:focus-visible { outline: 3px solid var(--bws-theme-focus); outline-offset: 2px; }
.bws-ai-theme-card.is-selected { border-color: var(--bws-card-primary); box-shadow: 0 0 0 2px var(--bws-card-primary), 0 8px 22px rgba(15, 23, 42, .1); }
.bws-ai-theme-preview {
  position: relative;
  width: 58px;
  height: 66px;
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bws-card-primary) 25%, #fff);
  border-radius: 12px;
  background: var(--bws-card-surface);
}
.bws-ai-theme-preview::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 20px;
  background: linear-gradient(120deg, var(--bws-card-primary), var(--bws-card-secondary));
}
.bws-ai-theme-preview i { position: absolute; left: 8px; right: 8px; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--bws-card-primary) 18%, #fff); }
.bws-ai-theme-preview i:nth-of-type(1) { top: 29px; width: 30px; }
.bws-ai-theme-preview i:nth-of-type(2) { top: 39px; width: 40px; opacity: .72; }
.bws-ai-theme-preview i:nth-of-type(3) { top: 49px; width: 23px; opacity: .5; }
.bws-ai-theme-preview b { position: absolute; right: 7px; bottom: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--bws-card-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bws-card-accent) 22%, transparent); }
.bws-ai-theme-card-copy { min-width: 0; display: grid; gap: 5px; }
.bws-ai-theme-card-copy strong { overflow: hidden; color: var(--bws-theme-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.bws-ai-theme-card-copy small { display: -webkit-box; overflow: hidden; color: var(--bws-theme-muted); font-size: 11px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.bws-ai-theme-check {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bws-theme-border);
  border-radius: 50%;
  color: transparent;
  background: var(--bws-theme-surface-2);
  font-size: 13px;
  font-weight: 900;
}
.bws-ai-theme-card.is-selected .bws-ai-theme-check { color: var(--bws-theme-on-primary); background: var(--bws-card-primary); border-color: var(--bws-card-primary); }

.bws-ai-theme-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--bws-theme-border);
  border-radius: 16px;
  background: var(--bws-theme-surface-2);
}
.bws-ai-theme-field { min-width: 0; display: grid; align-content: center; gap: 4px; }
.bws-ai-theme-field > span,
.bws-ai-theme-toggle b { color: var(--bws-theme-text); font-size: 12px; font-weight: 850; }
.bws-ai-theme-field > small,
.bws-ai-theme-toggle small { color: var(--bws-theme-muted); font-size: 10px; line-height: 1.35; }
.bws-ai-theme-field input[type="color"] { width: 100%; min-height: 35px; border: 1px solid var(--bws-theme-border); border-radius: 9px; background: var(--bws-theme-input-bg); padding: 3px; cursor: pointer; }
.bws-ai-theme-field select { width: 100%; min-height: 35px; border: 1px solid var(--bws-theme-border); border-radius: 9px; padding: 0 9px; font: 700 12px/1 Inter, system-ui, sans-serif; }
.bws-ai-theme-toggle { min-width: 150px; display: flex; align-items: center; gap: 8px; padding: 0 3px; cursor: pointer; }
.bws-ai-theme-toggle input { width: 17px; height: 17px; accent-color: var(--bws-theme-primary); }
.bws-ai-theme-toggle span { display: grid; gap: 3px; }
.bws-ai-theme-reset { align-self: center; min-height: 35px; border: 1px solid var(--bws-theme-border); border-radius: 9px; color: var(--bws-theme-primary-strong); background: var(--bws-theme-surface); padding: 0 11px; font: 800 11px/1 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.bws-ai-theme-reset:hover { border-color: var(--bws-theme-primary); background: var(--bws-theme-soft-primary); }
.bws-ai-theme-note { margin: -7px 2px 0; color: var(--bws-theme-muted); font-size: 11px; }

/* Penerapan palette pada panel-panel utama website. Peta/tiles tidak diubah. */
html[data-bws-theme] .bws-hydro-dialog,
html[data-bws-theme] .bws-terrain-modal,
html[data-bws-theme] .bws-terrain-panel,
html[data-bws-theme] .bws-hydro-chart-card,
html[data-bws-theme] .bws-hydro-sync-panel,
html[data-bws-theme] .bws-sync-card,
html[data-bws-theme] .data-range-panel,
html[data-bws-theme] .export-data-panel,
html[data-bws-theme] .map-legend-card,
html[data-bws-theme] .station-popup,
html[data-bws-theme] .leaflet-popup-content-wrapper,
html[data-bws-theme] .leaflet-popup-tip {
  color: var(--bws-theme-text);
  background: var(--bws-theme-surface);
  border-color: var(--bws-theme-border);
}
html[data-bws-theme] .bws-hydro-head,
html[data-bws-theme] .bws-dem-workspace-header {
  color: var(--bws-theme-on-primary);
  background: linear-gradient(135deg, var(--bws-theme-header-start), var(--bws-theme-header-end));
}
html[data-bws-theme] .bws-hydro-tabs,
html[data-bws-theme] .bws-sync-card-head { background: var(--bws-theme-surface-2); border-color: var(--bws-theme-border); }
html[data-bws-theme] .bws-hydro-dialog input,
html[data-bws-theme] .bws-hydro-dialog select,
html[data-bws-theme] .bws-hydro-dialog textarea,
html[data-bws-theme] .bws-sync-card input,
html[data-bws-theme] .bws-sync-card select {
  color: var(--bws-theme-text);
  background: var(--bws-theme-input-bg);
  border-color: var(--bws-theme-border);
}
html[data-bws-theme] .bws-hydro-dialog button:not(.bws-panel-close),
html[data-bws-theme] .bws-sync-card button,
html[data-bws-theme] .export-data-panel button { border-color: var(--bws-theme-primary); }
html[data-bws-theme] .leaflet-popup-content-wrapper,
html[data-bws-theme] .leaflet-popup-tip { box-shadow: 0 5px 22px var(--bws-theme-shadow); }

/* Mode kontras tinggi dan kerapatan ringkas. */
html[data-bws-theme-contrast="high"] .bws-ai-theme-card,
html[data-bws-theme-contrast="high"] .bws-ai-theme-options,
html[data-bws-theme-contrast="high"] .bws-ai-metrics article,
html[data-bws-theme-contrast="high"] .bws-ai-chart-wrap,
html[data-bws-theme-contrast="high"] .bws-ai-table-wrap {
  border-width: 2px;
}
html[data-bws-theme-contrast="high"] .bws-ai-theme-card-copy strong,
html[data-bws-theme-contrast="high"] .bws-ai-theme-heading h3 { font-weight: 950; }
html[data-bws-theme-density="compact"] .bws-ai-main { padding: 11px; }
html[data-bws-theme-density="compact"] .bws-ai-theme-panel { gap: 11px; }
html[data-bws-theme-density="compact"] .bws-ai-theme-card { min-height: 76px; padding: 8px; }
html[data-bws-theme-density="compact"] .bws-ai-theme-preview { width: 48px; height: 54px; }
html[data-bws-theme-density="compact"] .bws-ai-theme-grid { gap: 8px; }

/* Midnight: tabel/input dan teks komponen lama mengikuti mode gelap. */
html[data-bws-theme="midnight"] .bws-ai-code-files pre { background: #050c16; }
html[data-bws-theme="midnight"] .bws-ai-status[data-tone="success"] { color: #bbf7d0; background: #123a2a; }
html[data-bws-theme="midnight"] .bws-ai-status[data-tone="warning"] { color: #fde68a; background: #493511; }
html[data-bws-theme="midnight"] .bws-ai-status[data-tone="error"] { color: #fecaca; background: #4b1d25; }
html[data-bws-theme="midnight"] .bws-ai-status[data-tone="loading"] { color: #bae6fd; background: #12354a; }
html[data-bws-theme="midnight"] .bws-ai-mode-switch .bws-ai-tab.is-active,
html[data-bws-theme="midnight"] .bws-ai-mode-switch .bws-ai-tab[aria-selected="true"] { color: #04243a; background: #e0f2fe; }

@media (max-width: 900px) {
  .bws-ai-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bws-ai-theme-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bws-ai-theme-reset { justify-self: start; }
}

@media (max-width: 700px) {
  .bws-ai-mode-switch { order: 3; grid-column: 1 / -1; margin: 2px 0 0; max-width: 100%; overflow-x: auto; }
  .bws-ai-mode-switch .bws-ai-tab { flex: 1 0 auto; min-height: 31px; padding: 0 9px; font-size: 10px; }
  .bws-ai-mode-switch select,
  .bws-ai-mode-switch > #bwsAiCodeHistory { min-height: 31px; font-size: 10px; }
  .bws-ai-theme-heading { display: grid; gap: 9px; }
  .bws-ai-theme-current { justify-self: start; }
}

@media (max-width: 520px) {
  .bws-ai-theme-grid { grid-template-columns: 1fr; }
  .bws-ai-theme-options { grid-template-columns: 1fr; }
  .bws-ai-theme-reset { width: 100%; justify-self: stretch; }
  .bws-ai-theme-card { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .bws-ai-theme-preview { width: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .bws-ai-theme-card,
  .bws-ai-mode-switch .bws-ai-tab { transition: none; }
}