/* =============================================================================
   GEOPROCESSING PANE (assets/css/geoprocessing.css)
   Pane Geoprocessing bergaya ArcGIS Pro pada sheet Alat: tab Alat | Riwayat,
   pencarian tool, toolbox berbentuk akordeon, form parameter, environment,
   progress bar + tombol batal, daftar output, dan log riwayat.
   ============================================================================= */

.gp-pane { display: flex; flex-direction: column; gap: 10px; }

/* --- tab kepala pane --- */
.gp-tabs {
  display: flex; gap: 4px; padding: 4px;
  border: 1px solid var(--border-color, #dbe3ee);
  border-radius: 10px;
  background: var(--bg-secondary, #f1f5f9);
}
.gp-tab {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 6px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text-secondary, #475569);
  font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.gp-tab:hover { color: var(--text-primary, #1e293b); }
.gp-tab.is-active {
  background: var(--bg-card, #fff);
  color: var(--text-primary, #1e293b);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .14);
}
.gp-tab-count {
  min-width: 17px; padding: 0 5px; border-radius: 9px;
  background: #2563eb; color: #fff;
  font-size: 9px; font-weight: 700; line-height: 17px; text-align: center;
}
.gp-panel { display: flex; flex-direction: column; gap: 9px; min-width: 0; }

/* --- panduan & sumber data (details) --- */
.gp-guide {
  margin: 0; padding: 8px 9px;
  border: 1px solid var(--border-color, #dbe3ee);
  border-radius: 8px;
  background: var(--bg-secondary, #f8fafc);
}
.gp-guide--info { border-color: #bfdbfe; background: #eff6ff; }
.gp-guide > summary {
  cursor: pointer; list-style: none;
  font-size: 11px; font-weight: 700; color: var(--text-primary, #1e3a8a);
}
.gp-guide > summary::-webkit-details-marker { display: none; }
.gp-guide > summary::before { content: '\25B8'; display: inline-block; margin-right: 5px; transition: transform .15s; }
.gp-guide[open] > summary::before { transform: rotate(90deg); }
.gp-guide-body {
  display: grid; gap: 6px; margin-top: 8px;
  font-size: 10px; line-height: 1.55; color: var(--text-secondary, #334155);
}
.gp-guide-body ol { margin: 0; padding-left: 17px; }
.gp-guide-body p { margin: 6px 0 0; }
.gp-source-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gp-source-actions .gp-action-btn { height: 32px; min-height: 32px; font-size: 10px; }
.gp-source-actions .gp-action-btn--full { grid-column: 1 / -1; }
#gpImportStatus, #gpStatus, #gpBoundaryStatus, #gpLayerBoundaryStatus {
  font-size: 10px; line-height: 1.45; color: var(--text-secondary, #64748b);
}
#gpStatus { min-height: 14px; font-size: 11px; }

/* --- pencarian tool --- */
.gp-search-wrap { position: relative; }
.gp-search-wrap svg {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  color: var(--text-tertiary, #94a3b8); pointer-events: none;
}
.gp-search {
  width: 100%; height: 34px; padding: 0 10px 0 29px;
  border: 1px solid var(--border-color, #cbd5e1); border-radius: 8px;
  background: var(--bg-input, #fff); color: var(--text-primary, #1e293b);
  font-family: inherit; font-size: 11px; outline: none;
}
.gp-search:focus { border-color: var(--border-focus, #2563eb); box-shadow: 0 0 0 2px rgba(37, 99, 235, .15); }
.gp-search::placeholder { color: var(--text-tertiary, #94a3b8); }

/* --- daftar toolbox --- */
.gp-toolboxes { display: flex; flex-direction: column; gap: 7px; }
.gp-toolbox {
  border: 1px solid var(--border-color, #dbe3ee);
  border-radius: 9px; overflow: hidden;
  background: var(--bg-card, #fff);
}
.gp-toolbox-head {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 9px 10px; border: 0; background: var(--bg-secondary, #f8fafc);
  color: var(--text-primary, #1e293b); font-family: inherit; font-size: 11px;
  font-weight: 700; text-align: left; cursor: pointer;
}
.gp-toolbox-head:hover { background: var(--bg-card-hover, #eef2f7); }
.gp-toolbox-head .gp-caret { transition: transform .15s; color: var(--text-tertiary, #94a3b8); }
.gp-toolbox.is-open .gp-toolbox-head .gp-caret { transform: rotate(90deg); }
.gp-toolbox-label { flex: 1 1 auto; }
.gp-toolbox-desc { flex: 0 1 auto; font-size: 9px; font-weight: 400; color: var(--text-tertiary, #94a3b8); }
.gp-toolbox-count {
  min-width: 17px; padding: 0 5px; border-radius: 9px;
  background: var(--bg-tertiary, #e2e8f0); color: var(--text-secondary, #475569);
  font-size: 9px; line-height: 17px; text-align: center;
}
.gp-toolbox-body { display: none; padding: 4px; border-top: 1px solid var(--border-color, #eef2f7); }
.gp-toolbox.is-open .gp-toolbox-body { display: block; }
.gp-tool {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 7px 8px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text-primary, #1e293b);
  font-family: inherit; text-align: left; cursor: pointer;
}
.gp-tool:hover { background: rgba(37, 99, 235, .08); }
.gp-tool.is-active { background: rgba(37, 99, 235, .14); }
.gp-tool b { font-size: 11px; }
.gp-tool span { font-size: 9.5px; line-height: 1.4; color: var(--text-tertiary, #64748b); }
.gp-toolbox-result { font-size: 9px; color: var(--text-tertiary, #94a3b8); padding: 0 2px; }
.gp-empty { font-size: 10.5px; color: var(--text-tertiary, #94a3b8); padding: 8px 2px; }

/* --- form tool --- */
.gp-tool-form { display: flex; flex-direction: column; gap: 8px; }
.gp-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px 4px 6px; border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 20px; background: var(--bg-card, #fff);
  color: var(--text-secondary, #475569); font-family: inherit;
  font-size: 10px; font-weight: 700; cursor: pointer;
}
.gp-back:hover { background: var(--bg-secondary, #f1f5f9); color: var(--text-primary, #1e293b); }
.gp-tool-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.gp-tool-head h4 { margin: 0; font-size: 14px; color: var(--text-primary, #0f172a); }
.gp-chip {
  padding: 2px 7px; border-radius: 20px;
  background: rgba(37, 99, 235, .12); color: #1d4ed8;
  font-size: 9px; font-weight: 700;
}
.gp-tool-desc { margin: 0; font-size: 10.5px; line-height: 1.5; color: var(--text-secondary, #475569); }
.gp-fields { display: flex; flex-direction: column; gap: 8px; }
.gp-field-hint { display: block; margin-top: 3px; font-size: 9.5px; color: var(--text-tertiary, #94a3b8); }
.gp-field-row { display: grid; grid-template-columns: 1fr 108px; gap: 6px; }
.gp-checklist { max-height: 150px; }

/* --- environment --- */
.gp-env {
  border: 1px dashed var(--border-color, #cbd5e1);
  border-radius: 8px; background: var(--bg-secondary, #f8fafc);
}
.gp-env > summary {
  cursor: pointer; list-style: none; padding: 8px 9px;
  font-size: 10.5px; font-weight: 700; color: var(--text-secondary, #475569);
}
.gp-env > summary::-webkit-details-marker { display: none; }
.gp-env > summary::before { content: '\25B8'; display: inline-block; margin-right: 5px; }
.gp-env[open] > summary::before { transform: rotate(90deg); }
.gp-env-summary { font-weight: 400; color: var(--text-tertiary, #94a3b8); }
.gp-env-body { display: flex; flex-direction: column; gap: 7px; padding: 0 9px 9px; }
.gp-env-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gp-env-grid label { font-size: 9px; color: var(--text-tertiary, #94a3b8); }
.gp-env-note { font-size: 9.5px; line-height: 1.45; color: var(--text-tertiary, #94a3b8); }

/* --- progress & aksi --- */
.gp-progress {
  display: flex; flex-direction: column; gap: 6px;
  padding: 9px; border: 1px solid #bfdbfe; border-radius: 8px;
  background: #eff6ff;
}
.gp-progress-track {
  height: 7px; border-radius: 5px; overflow: hidden;
  background: #dbeafe;
}
.gp-progress-fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  transition: width .18s ease;
}
.gp-progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gp-progress-label {
  font-size: 10px; color: #1e40af;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gp-btn-cancel {
  padding: 4px 11px; border: 1px solid #fca5a5; border-radius: 6px;
  background: #fff; color: #b91c1c;
  font-family: inherit; font-size: 10px; font-weight: 700; cursor: pointer;
}
.gp-btn-cancel:hover { background: #fef2f2; }
.gp-run-btn { height: 40px !important; font-weight: 700 !important; }
.gp-run-btn[disabled] { opacity: .6; cursor: progress; }
.gp-btn-ghost {
  padding: 4px 9px; border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 6px; background: transparent;
  color: var(--text-secondary, #475569);
  font-family: inherit; font-size: 10px; cursor: pointer;
}
.gp-btn-ghost:hover { background: var(--bg-secondary, #f1f5f9); color: var(--text-primary, #1e293b); }

/* --- daftar hasil --- */
.gp-outputs { display: flex; flex-direction: column; gap: 7px; }
.gp-outputs-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-tertiary, #94a3b8);
}
.gp-output {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 9px; border: 1px solid var(--border-color, #dbe3ee);
  border-radius: 8px; background: var(--bg-card, #fff);
}
.gp-output-head { display: flex; align-items: center; gap: 7px; }
.gp-output-swatch { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.gp-output-name {
  flex: 1 1 auto; font-size: 11px; font-weight: 700; color: var(--text-primary, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gp-output-meta { font-size: 9.5px; color: var(--text-tertiary, #94a3b8); }
.gp-output-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.gp-output-actions button {
  padding: 4px 7px; border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 6px; background: var(--bg-card, #fff);
  color: var(--text-secondary, #475569);
  font-family: inherit; font-size: 9.5px; cursor: pointer;
}
.gp-output-actions button:hover { background: var(--bg-secondary, #f1f5f9); color: var(--text-primary, #1e293b); }
.gp-output-actions button.is-danger:hover { border-color: #fca5a5; background: #fef2f2; color: #b91c1c; }
.gp-output.is-hidden .gp-output-name { opacity: .5; text-decoration: line-through; }
.gp-output-table { border-top: 1px dashed var(--border-color, #e2e8f0); padding-top: 5px; }
.gp-output-table > summary {
  cursor: pointer; list-style: none;
  font-size: 9.5px; color: var(--text-tertiary, #64748b);
}
.gp-output-table > summary::-webkit-details-marker { display: none; }
.gp-table-scroll { max-height: 190px; overflow: auto; margin-top: 5px; }
.gp-table { border-collapse: collapse; width: 100%; font-size: 9px; }
.gp-table th, .gp-table td {
  padding: 3px 5px; border: 1px solid var(--border-color, #e2e8f0);
  text-align: left; white-space: nowrap; max-width: 130px;
  overflow: hidden; text-overflow: ellipsis;
}
.gp-table th { position: sticky; top: 0; background: var(--bg-secondary, #f1f5f9); z-index: 1; }
.gp-table-note { font-size: 9px; color: var(--text-tertiary, #94a3b8); margin-top: 4px; }

/* --- riwayat --- */
.gp-history-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 10px; color: var(--text-tertiary, #94a3b8);
}
.gp-history-list { display: flex; flex-direction: column; gap: 7px; }
.gp-history-item {
  padding: 8px 9px; border: 1px solid var(--border-color, #dbe3ee);
  border-left-width: 3px; border-radius: 8px; background: var(--bg-card, #fff);
}
.gp-history-item.is-ok { border-left-color: #16a34a; }
.gp-history-item.is-error { border-left-color: #dc2626; }
.gp-history-item.is-cancelled { border-left-color: #f59e0b; }
.gp-history-top { display: flex; align-items: center; gap: 6px; }
.gp-history-top b { font-size: 11px; color: var(--text-primary, #0f172a); flex: 1 1 auto; }
.gp-history-top time { font-size: 9px; color: var(--text-tertiary, #94a3b8); }
.gp-history-meta { font-size: 9.5px; color: var(--text-tertiary, #64748b); margin-top: 3px; }
.gp-history-msg {
  margin-top: 5px; padding: 5px 7px; border-radius: 6px;
  background: #fef2f2; color: #b91c1c; font-size: 9.5px; line-height: 1.45;
}
.gp-history-item.is-ok .gp-history-msg { background: #f0fdf4; color: #15803d; }
.gp-history-actions { display: flex; gap: 4px; margin-top: 6px; }
.gp-history-actions button {
  padding: 3px 8px; border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 6px; background: transparent;
  color: var(--text-secondary, #475569);
  font-family: inherit; font-size: 9.5px; cursor: pointer;
}
.gp-history-actions button:hover { background: var(--bg-secondary, #f1f5f9); color: var(--text-primary, #1e293b); }
.gp-history-params {
  margin: 6px 0 0; padding: 7px; max-height: 140px; overflow: auto;
  border-radius: 6px; background: var(--bg-secondary, #f1f5f9);
  font-family: ui-monospace, Consolas, monospace; font-size: 9px;
  color: var(--text-secondary, #475569); white-space: pre-wrap; word-break: break-word;
}
.gp-history-empty { font-size: 10.5px; color: var(--text-tertiary, #94a3b8); padding: 6px 2px; }

/* --- widget batas administrasi (Clip) --- */
.gp-boundary { display: flex; flex-direction: column; gap: 6px; }
.gp-boundary-row { display: flex; gap: 6px; }
.gp-boundary-row .geotani-form-input { flex: 1 1 auto; }
.gp-boundary-row .geotools-btn { width: auto; min-width: 74px; height: 30px; min-height: 30px; padding: 0 9px; }
#gpBoundaryResults { max-height: 108px; }

/* --- aksesibilitas keyboard (focus-visible) --- */
.gp-pane button:focus-visible,
.gp-pane summary:focus-visible,
.gp-pane input:focus-visible,
.gp-pane select:focus-visible,
.gp-pane textarea:focus-visible,
.gp-pane [tabindex]:focus-visible {
  outline: 2px solid var(--border-focus, #2563eb);
  outline-offset: 1px;
}
/* elemen yang menempel di tepi wadah: geser cincin ke dalam agar tidak terpotong */
.gp-tab:focus-visible,
.gp-tool:focus-visible,
.gp-toolbox-head:focus-visible { outline-offset: -2px; }

@media (max-width: 640px) {
  .gp-source-actions { grid-template-columns: 1fr; }
  .gp-env-grid { grid-template-columns: 1fr; }
  .gp-toolbox-desc { display: none; }
}