/*
 * EVA Engineering Workbench, index-only visual layer.
 * Design Read: operator workbench for network engineering teams, paper-white surfaces,
 * restrained EVA mint, ENERGY 2 / RHYTHM 2 / MOTION 1.
 *
 * Decision reasons:
 * Color: warm white and slate establish hierarchy; EVA mint marks only the next action and healthy state.
 * Layout: fixed input rail plus result-first workspace mirrors input, process, inspect, then external operations.
 * Typography: Inter stays for dense Indonesian controls and existing brand continuity; data keeps tabular numerals.
 * Spacing: 4/8/12/16/24 scale keeps the workbench compact without collapsing task groups.
 * Surfaces: solid panels and one-pixel borders replace glass because hierarchy must come from workflow, not decoration.
 * Radius: 6/8/10px separates controls, task groups, and panels without turning every element into a pill.
 */

body:has(> .app-shell) {
  background: #f4f8f6 !important;
  color: #14231c !important;
}

body:has(> .app-shell)::before {
  content: none !important;
}

body > .app-shell {
  --bg-page: #f4f8f6;
  --bg-panel: #ffffff;
  --bg-panel-2: #f7faf8;
  --bg-card: #ffffff;
  --bg-card-2: #f7faf8;
  --bg-input: #ffffff;
  --bg-glass: #ffffff;
  --border: #d9e5df;
  --border-strong: #b9cec4;
  --border-soft: rgba(20, 35, 28, 0.08);
  --text-primary: #14231c;
  --text-secondary: #33473e;
  --text-muted: #61756b;
  --text-faint: #75887f;
  --brand: #23966c;
  --brand-soft: #e6f5ee;
  --brand-soft-2: #f0f8f4;
  --brand-strong: #176d4e;
  --accent: #1d825d;
  --accent-strong: #176d4e;
  --info: #356b9b;
  --info-soft: #edf5fb;
  --warning: #94651f;
  --warning-soft: #fbf5e9;
  --danger: #b74747;
  --danger-soft: #fceeee;
  --neutral-soft: #f3f6f4;
  --ring-focus: 0 0 0 3px rgba(35, 150, 108, 0.22);
  --shadow-sm: 0 1px 2px rgba(20, 35, 28, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 80, 58, 0.06);
  --shadow-lg: 0 20px 55px rgba(20, 35, 28, 0.16);
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  color-scheme: light;
  min-width: 0;
  background: #f4f8f6 !important;
  color: var(--text-primary) !important;
}

body > .app-shell,
body > .app-shell button,
body > .app-shell input,
body > .app-shell select,
body > .app-shell textarea {
  font-family: "Inter", "Noto Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body > .app-shell :is(.text-white, .text-zinc-100, .text-zinc-200, .text-zinc-800, .text-zinc-900, .text-sky-800, .text-sky-900, .text-emerald-800, .text-emerald-900, .text-indigo-800, .text-indigo-900, .text-violet-900) {
  color: var(--text-primary) !important;
}

body > .app-shell :is(.text-zinc-300, .text-zinc-400, .text-zinc-500, .text-zinc-600, .text-zinc-700) {
  color: var(--text-muted) !important;
}

body > .app-shell :is(.text-emerald-200, .text-emerald-300, .text-emerald-700, .text-cyan-200, .text-cyan-700) {
  color: var(--brand-strong) !important;
}

body > .app-shell :is(.text-amber-100, .text-amber-700, .text-amber-800, .text-amber-900) {
  color: var(--warning) !important;
}

body > .app-shell :is(.text-rose-700, .text-rose-800, .text-rose-900, .text-red-700, .text-red-800, .text-red-900) {
  color: var(--danger) !important;
}

/* Header and orientation */
body > .app-shell .app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--border) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body > .app-shell .app-header > div {
  min-height: 64px;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

body > .app-shell .brand-mark,
body > .app-shell .brand-logo {
  width: 42px !important;
  height: 42px !important;
}

body > .app-shell .brand-heading {
  color: var(--text-primary) !important;
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.18rem) !important;
  font-weight: 750 !important;
  letter-spacing: -0.018em !important;
}

body > .app-shell .brand-description {
  max-width: 68ch;
  color: var(--text-muted) !important;
  font-size: 0.78rem !important;
}

body > .app-shell .header-right {
  min-width: 0;
}

body > .app-shell :is(.supported-files-trigger, .icon-button) {
  min-width: 44px !important;
  min-height: 44px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

body > .app-shell .supported-files-trigger:hover,
body > .app-shell .supported-files-menu[open] .supported-files-trigger,
body > .app-shell .icon-button:hover {
  border-color: var(--border-strong) !important;
  background: #edf5f1 !important;
  color: var(--text-primary) !important;
}

body > .app-shell .supported-files-popover {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42) !important;
}

body > .app-shell .supported-files-popover span {
  border-radius: 6px !important;
  background: #f7faf8 !important;
  color: var(--text-secondary) !important;
}

/* Workflow rail */
body > .app-shell .app-header + section {
  padding-top: 12px !important;
}

body > .app-shell .workflow-stepper {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: #f3f8f5 !important;
  box-shadow: none !important;
}

body > .app-shell .workflow-step {
  min-width: 0 !important;
  min-height: 48px;
  padding: 7px 12px !important;
  gap: 8px !important;
  background: transparent !important;
}

body > .app-shell .workflow-step + .workflow-step {
  border-left: 1px solid var(--border) !important;
}

body > .app-shell .workflow-step::after {
  left: 10px !important;
  right: 10px !important;
  height: 2px !important;
  border-radius: 0 !important;
}

body > .app-shell .workflow-step-index {
  width: 26px !important;
  height: 26px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 6px !important;
  background: #f7faf8 !important;
  color: var(--text-secondary) !important;
}

body > .app-shell .workflow-step-label {
  color: var(--text-primary) !important;
  font-size: 0.78rem !important;
  font-weight: 650 !important;
}

body > .app-shell .workflow-step-status {
  margin-top: 1px !important;
  color: var(--text-muted) !important;
  font-size: 0.68rem !important;
}

body > .app-shell .workflow-step[aria-current="step"] {
  background: #f0f8f4 !important;
}

body > .app-shell .workflow-step[aria-current="step"] .workflow-step-index,
body > .app-shell .workflow-step[data-status="complete"] .workflow-step-index {
  border-color: rgba(35, 150, 108, 0.58) !important;
  background: var(--brand-soft) !important;
  color: var(--brand-strong) !important;
}

body > .app-shell .workflow-step[data-status="processing"] .workflow-step-index {
  animation: none !important;
}

body > .app-shell .workflow-mobile-count {
  display: none;
}

/* Primary workbench composition */
body > .app-shell .app-layout {
  grid-template-columns: minmax(380px, 420px) minmax(0, 1fr) !important;
  gap: 16px !important;
  padding-top: 12px !important;
  padding-bottom: 24px !important;
}

body > .app-shell :is(.left-workspace, .right-workspace) {
  min-width: 0;
}

body > .app-shell .right-workspace {
  display: flex !important;
  flex-direction: column;
  gap: 16px !important;
  scrollbar-gutter: stable;
}

body > .app-shell .right-workspace > * {
  margin-top: 0 !important;
}

body > .app-shell #resultDashboard { order: 10; }
body > .app-shell #validationResultPanel { order: 15; }
body > .app-shell #previewWorkspacePanel { order: 20; }
body > .app-shell #astriIntegrationPanel { order: 30; }
body > .app-shell #documentAbdPanel { order: 40; }
body > .app-shell #supportModulesPanel { order: 50; }
body > .app-shell #stellaIntegrationPanel { order: 60; }

/* Solid surfaces */
body > .app-shell :is(.app-panel, #astriIntegrationPanel, #documentAbdPanel, #supportModulesPanel, .validation-result-card, .dashboard-section, .console-panel-embedded) {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  --tw-ring-color: transparent !important;
}

body > .app-shell #resultDashboard {
  border-top: 2px solid var(--brand) !important;
}

body > .app-shell #upload-area {
  padding: 16px !important;
}

body > .app-shell #upload-area > div:first-child {
  margin-bottom: 12px !important;
}

body > .app-shell #upload-area h2,
body > .app-shell #resultDashboard h2 {
  color: var(--text-primary) !important;
  font-size: 1.08rem !important;
  font-weight: 720 !important;
  letter-spacing: -0.018em !important;
}

body > .app-shell :is(#astriIntegrationPanel, #documentAbdPanel, #supportModulesPanel) h3 {
  color: var(--text-primary) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

body > .app-shell :is(#astriIntegrationPanel, #documentAbdPanel, #supportModulesPanel) > div:first-child {
  margin-bottom: 0 !important;
}

body > .app-shell #uploadForm > * + * {
  margin-top: 12px !important;
}

body > .app-shell :is(.flow-section-card, .mode-card) {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: #f7faf8 !important;
  background-image: none !important;
  padding: 12px !important;
  box-shadow: none !important;
}

body > .app-shell .flow-section-head {
  gap: 8px !important;
  margin-bottom: 8px !important;
}

body > .app-shell .flow-step {
  width: 24px !important;
  height: 24px !important;
  border: 1px solid rgba(93, 187, 154, 0.54) !important;
  border-radius: 6px !important;
  background: var(--brand-soft) !important;
  color: var(--brand-strong) !important;
}

body > .app-shell .flow-section-head :is(strong, h3) {
  color: var(--text-primary) !important;
  font-size: 0.86rem !important;
}

body > .app-shell .flow-section-head :is(small, p) {
  color: var(--text-muted) !important;
  font-size: 0.72rem !important;
}

body > .app-shell .mode-card > .mt-4 {
  margin-top: 10px !important;
}

body > .app-shell :is(#scopeTypeSelector, #networkTypeSelector, #outputModeSelector) {
  gap: 6px !important;
}

body > .app-shell #scopeTypeSelector {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body > .app-shell #networkTypeSelector {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body > .app-shell #outputModeSelector {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body > .app-shell :is(.network-type-option, .output-mode-option, .boundary-toggle) {
  min-height: 44px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

body > .app-shell :is(.network-type-option, .output-mode-option, .boundary-toggle):hover {
  border-color: #8eaa9d !important;
  background: #edf5f1 !important;
  color: var(--text-primary) !important;
}

body > .app-shell .network-type-option {
  padding: 7px 9px !important;
}

body > .app-shell .output-mode-option {
  padding: 7px 8px 7px 34px !important;
  font-size: 0.72rem !important;
}

body > .app-shell .output-mode-option > span::before {
  left: 10px !important;
  width: 14px !important;
  height: 14px !important;
  border-color: var(--border-strong) !important;
  border-radius: 4px !important;
  background: #f4f8f6 !important;
}

body > .app-shell .network-type-option:has(input:checked),
body > .app-shell .output-mode-option:has(input:checked) {
  border-color: rgba(35, 150, 108, 0.68) !important;
  background: #e9f6f0 !important;
  color: var(--text-primary) !important;
  box-shadow: inset 0 0 0 1px rgba(35, 150, 108, 0.10) !important;
}

body > .app-shell .network-type-option small {
  color: var(--text-muted) !important;
}

body > .app-shell .network-type-option:has(input:checked) small {
  color: var(--brand-strong) !important;
}

/* File intake */
body > .app-shell .drop-zone {
  min-height: 96px !important;
  gap: 8px !important;
  border: 1px dashed #91b8a7 !important;
  border-radius: 8px !important;
  background: #f3f8f5 !important;
  background-image: none !important;
  padding: 12px !important;
  color: var(--text-primary) !important;
  transform: none !important;
}

body > .app-shell .drop-zone:hover,
body > .app-shell .drag-active {
  border-color: var(--brand) !important;
  background: #eef8f3 !important;
  transform: none !important;
}

body > .app-shell .drop-zone-icon {
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 7px !important;
  background: var(--brand-soft) !important;
  color: var(--brand-strong) !important;
  transform: none !important;
}

body > .app-shell .drop-zone-copy {
  margin-top: 0 !important;
  color: var(--text-primary) !important;
  font-size: 0.78rem !important;
}

body > .app-shell .drop-zone-helper {
  color: var(--text-muted) !important;
  font-size: 0.69rem !important;
}

body > .app-shell .drop-zone-add-btn {
  min-height: 32px;
  margin-top: 8px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 6px !important;
  background: #f7faf8 !important;
  color: var(--text-primary) !important;
}

/* Controls and focus */
body > .app-shell :is(button, a.secondary-button, a.download-primary, summary) {
  min-height: 44px;
}

body > .app-shell :is(.primary-button, .download-primary) {
  min-height: 44px !important;
  border: 1px solid var(--brand) !important;
  border-radius: 7px !important;
  background: var(--brand) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-size: 0.86rem !important;
  font-weight: 750 !important;
  box-shadow: none !important;
  transform: none !important;
}

body > .app-shell :is(.primary-button, .download-primary):hover:not(:disabled) {
  border-color: #176d4e !important;
  background: #176d4e !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

body > .app-shell .primary-button:disabled {
  border-color: var(--border) !important;
  background: #edf2ef !important;
  color: #788981 !important;
}

body > .app-shell :is(.secondary-button, .console-action-button, .map-legend-toggle, .map-lock-toggle, .preview-tab, .preview-sub-tab) {
  min-height: 44px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 7px !important;
  background: #f7faf8 !important;
  background-image: none !important;
  color: var(--text-secondary) !important;
  font-size: 0.78rem !important;
  font-weight: 620 !important;
  box-shadow: none !important;
  transform: none !important;
}

body > .app-shell :is(.secondary-button, .console-action-button, .map-legend-toggle, .map-lock-toggle, .preview-tab, .preview-sub-tab):hover:not(:disabled) {
  border-color: #8eaa9d !important;
  background: #e9f3ee !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  transform: none !important;
}

body > .app-shell :is(.secondary-button, .console-action-button, button):disabled {
  opacity: 1 !important;
  border-color: #dbe4df !important;
  background: #f0f3f1 !important;
  color: #788981 !important;
}

body > .app-shell :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .ui-input, .boq-filter-select) {
  min-height: 44px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  background-image: none !important;
  color: var(--text-primary) !important;
  font-size: 0.82rem !important;
  box-shadow: none !important;
}

body > .app-shell :is(input, textarea)::placeholder {
  color: #74867d !important;
  opacity: 1;
}

body > .app-shell select option {
  background: #ffffff;
  color: var(--text-primary);
}

body > .app-shell :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid #23966c !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* The visible info circle stays small; its keyboard hit area is 44px. */
body > .app-shell #upload-area .tip-icon {
  position: relative;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin: -10px -8px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: transparent !important;
}

body > .app-shell #upload-area .tip-icon::before {
  content: "i";
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: #ffffff;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

body > .app-shell #upload-area .tip-icon:focus-visible::before,
body > .app-shell #upload-area .tip-icon:hover::before {
  border-color: var(--brand);
  color: var(--brand-strong);
}

/* Main action remains visible once it reaches the work area. */
body > .app-shell .sticky-action-bar {
  bottom: 8px !important;
  z-index: 30;
  gap: 5px !important;
  margin-top: 12px !important;
  padding: 8px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  box-shadow: 0 -8px 20px rgba(20, 35, 28, 0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body > .app-shell .generate-button-reason {
  color: var(--text-muted) !important;
  font-size: 0.69rem !important;
}

/* Result-first workspace */
body > .app-shell #resultDashboard {
  padding: 16px !important;
}

body > .app-shell #resultDashboard > div:first-child {
  margin-bottom: 12px !important;
}

body > .app-shell .dashboard-empty-state {
  min-height: 108px !important;
  border: 1px dashed var(--border-strong) !important;
  border-radius: 8px !important;
  background: #f3f8f5 !important;
  color: var(--text-secondary) !important;
  padding: 18px !important;
}

body > .app-shell .dashboard-empty-state strong {
  color: var(--text-primary) !important;
}

body > .app-shell .dashboard-empty-state .empty-step-list {
  display: none !important;
}

body > .app-shell .progress-track {
  height: 6px !important;
  border-radius: 3px !important;
  background: #e4ece8 !important;
}

body > .app-shell #progressBar {
  border-radius: 3px !important;
  background: var(--brand) !important;
  background-image: none !important;
}

body > .app-shell :is(.dashboard-section, .result-card, .summary-tile, .dashboard-metric, .map-stat, .stat-card, .issue-center-hero, .issue-center-grid > div) {
  border-color: var(--border) !important;
  background: #f7faf8 !important;
  background-image: none !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

body > .app-shell :is(.boq-table-shell, .hpdb-table-shell, .console-log-shell) {
  border-color: var(--border) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body > .app-shell .boq-preview-table :is(th, td) {
  border-color: var(--border) !important;
}

body > .app-shell .boq-preview-table th {
  background: #f7faf8 !important;
  color: var(--text-muted) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.02em !important;
}

body > .app-shell .boq-preview-table td,
body > .app-shell .boq-preview-table tbody tr:nth-child(odd) td,
body > .app-shell .boq-preview-table tbody tr:hover td {
  background: #ffffff !important;
  color: var(--text-secondary) !important;
}

body > .app-shell #consolePanel,
body > .app-shell .console-log-shell {
  background: #f7faf8 !important;
}

body > .app-shell .console-log-entry {
  border-color: var(--border-soft) !important;
}

/* ASTRI operations stay direct, but read as one controlled action matrix. */
body > .app-shell :is(#astriIntegrationPanel, #documentAbdPanel, #supportModulesPanel) {
  padding: 14px !important;
}

body > .app-shell #astriActionButtons {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px !important;
}

body > .app-shell #astriActionButtons > :is(button, a) {
  width: 100%;
  min-width: 0;
  min-height: 44px !important;
  justify-content: flex-start !important;
  padding: 8px 10px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 7px !important;
  background: #f7faf8 !important;
  background-image: none !important;
  color: var(--text-secondary) !important;
  font-size: 0.74rem !important;
  font-weight: 620 !important;
  line-height: 1.25 !important;
  text-align: left;
  box-shadow: none !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body > .app-shell #astriActionButtons > :is(button, a):hover:not(:disabled) {
  border-color: #8eaa9d !important;
  background: #e9f3ee !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  transform: none !important;
}

body > .app-shell #astriApdConvertButton {
  border-color: rgba(35, 150, 108, 0.68) !important;
  background: #e9f6f0 !important;
  color: var(--brand-strong) !important;
}

body > .app-shell #astriUnverifyButton:not(:disabled) {
  border-color: rgba(224, 107, 107, 0.54) !important;
  color: var(--danger) !important;
}

body > .app-shell #astriIntegrationPanel :is(.rounded-2xl, #astriMatchBox),
body > .app-shell #documentAbdPanel :is(.rounded-2xl, #documentAbdMatchBox) {
  border-color: var(--border) !important;
  border-radius: 8px !important;
  background: #f3f8f5 !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Supporting tools become a command strip, not five decorative cards. */
body > .app-shell #supportModulesPanel .dashboard-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  overflow: hidden;
  margin-top: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

body > .app-shell #supportModulesPanel .fdt-coding-panel {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 0 !important;
  border-right: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body > .app-shell #supportModulesPanel .fdt-coding-panel:last-child {
  border-right: 0 !important;
}

body > .app-shell #supportModulesPanel .fdt-coding-panel:hover {
  background: #edf5f1 !important;
  color: var(--text-primary) !important;
  transform: none !important;
}

body > .app-shell #supportModulesPanel .fdt-coding-panel > span {
  width: 100% !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: 0.72rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

/* Internal scroll containment */
body > .app-shell :is(.boq-table-shell, .hpdb-table-shell) {
  max-width: 100%;
  overflow-x: auto;
}

body > .app-shell #map {
  max-height: 55dvh;
  border-radius: 8px !important;
}

@media (min-width: 1181px) {
  body > .app-shell .left-workspace {
    align-self: start;
  }

  body > .app-shell .right-workspace {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 1180px) {
  body > .app-shell .app-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body > .app-shell .right-workspace {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 900px) {
  body > .app-shell #astriActionButtons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body > .app-shell #supportModulesPanel .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
    background: var(--border) !important;
  }

  body > .app-shell #supportModulesPanel .fdt-coding-panel {
    border: 0 !important;
  }
}

@media (max-width: 720px) {
  body > .app-shell .app-header > div {
    min-height: 58px;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 7px 10px !important;
  }

  body > .app-shell .brand-lockup {
    width: auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body > .app-shell .brand-mark,
  body > .app-shell .brand-logo {
    width: 36px !important;
    height: 36px !important;
  }

  body > .app-shell .brand-heading {
    font-size: 0.9rem !important;
  }

  body > .app-shell .brand-description {
    display: none !important;
  }

  body > .app-shell .header-right {
    width: auto !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
  }

  body > .app-shell .supported-files-trigger {
    width: 44px !important;
    padding-inline: 0 !important;
    justify-content: center !important;
  }

  body > .app-shell .supported-files-trigger span {
    display: none !important;
  }

  body > .app-shell .app-header + section {
    padding: 8px 10px 0 !important;
  }

  body > .app-shell .workflow-stepper {
    display: block;
    min-height: 54px;
    padding-bottom: 4px;
  }

  body > .app-shell .workflow-stepper::before,
  body > .app-shell .workflow-stepper::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
  }

  body > .app-shell .workflow-stepper::before {
    right: 0;
    background: #e4ece8;
  }

  body > .app-shell .workflow-stepper::after {
    width: 25%;
    background: var(--brand);
  }

  body > .app-shell .workflow-stepper[data-current-step="2"]::after { width: 50%; }
  body > .app-shell .workflow-stepper[data-current-step="3"]::after { width: 75%; }
  body > .app-shell .workflow-stepper[data-current-step="4"]::after { width: 100%; }

  body > .app-shell .workflow-step {
    display: none !important;
    min-height: 50px;
    border: 0 !important;
  }

  body > .app-shell .workflow-step[aria-current="step"] {
    display: flex !important;
  }

  body > .app-shell .workflow-step::after {
    content: none !important;
  }

  body > .app-shell .workflow-step > .min-w-0 {
    flex: 1 1 auto;
  }

  body > .app-shell .workflow-mobile-count {
    display: block;
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  body > .app-shell .app-layout {
    width: 100% !important;
    max-width: 100vw !important;
    gap: 12px !important;
    padding: 10px 10px calc(18px + env(safe-area-inset-bottom)) !important;
  }

  body > .app-shell :is(.left-workspace, .right-workspace, .app-panel, #astriIntegrationPanel, #documentAbdPanel, #supportModulesPanel) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body > .app-shell #upload-area,
  body > .app-shell #resultDashboard,
  body > .app-shell :is(#astriIntegrationPanel, #documentAbdPanel, #supportModulesPanel) {
    padding: 12px !important;
  }

  body > .app-shell #scopeTypeSelector {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body > .app-shell #networkTypeSelector,
  body > .app-shell #outputModeSelector {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body > .app-shell .network-type-option > span {
    justify-content: flex-start !important;
  }

  body > .app-shell .network-type-option small {
    display: none;
  }

  body > .app-shell :is(#astriLoginForm, #documentAbdPanel .grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body > .app-shell #astriIntegrationPanel > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body > .app-shell #astriClusterSearchInput {
    grid-column: 1 / -1;
  }

  body > .app-shell #astriClusterSearchButton {
    grid-column: 1 / -1;
  }

  body > .app-shell .output-file-row {
    flex-direction: column;
  }

  body > .app-shell .output-file-row > * {
    width: 100%;
  }

  body > .app-shell #map {
    height: 55dvh !important;
    min-height: 280px !important;
  }
}

@media (max-width: 480px) {
  body > .app-shell #astriActionButtons {
    grid-template-columns: minmax(0, 1fr);
  }

  body > .app-shell #astriIntegrationPanel > .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body > .app-shell #astriClusterSearchInput,
  body > .app-shell #astriClusterSearchButton {
    grid-column: auto;
  }

  body > .app-shell #supportModulesPanel .dashboard-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body > .app-shell *,
  body > .app-shell *::before,
  body > .app-shell *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* Light EVA refinement: restrained mint, neutral work surfaces, no decorative gradients. */
body:has(> .app-shell) {
  background: #f4f8f6 !important;
  color: #14231c !important;
}
body > .app-shell {
  background: #f4f8f6 !important;
  color: var(--text-primary) !important;
}
body > .app-shell .app-header {
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom-color: #d9e5df !important;
  box-shadow: 0 1px 0 rgba(20, 35, 28, 0.03) !important;
}
body > .app-shell :is(.supported-files-trigger, .icon-button) {
  background: #ffffff !important;
  color: #40564b !important;
}
body > .app-shell .workflow-stepper {
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(20, 35, 28, 0.03) !important;
}
body > .app-shell :is(.app-panel, #astriIntegrationPanel, #documentAbdPanel, #supportModulesPanel, .validation-result-card, .dashboard-section, .console-panel-embedded) {
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(20, 35, 28, 0.035), 0 10px 30px rgba(20, 80, 58, 0.045) !important;
}
body > .app-shell #resultDashboard {
  border-top: 3px solid var(--brand) !important;
}
body > .app-shell :is(.flow-section-card, .mode-card) {
  background: #f8fbf9 !important;
}
body > .app-shell .drop-zone {
  background: #f2f9f5 !important;
}
body > .app-shell .drop-zone:hover,
body > .app-shell .drag-active {
  background: #eaf7f0 !important;
}
body > .app-shell :is(.network-type-option, .output-mode-option, .boundary-toggle) {
  background: #ffffff !important;
  color: #33473e !important;
}
body > .app-shell :is(.network-type-option, .output-mode-option, .boundary-toggle):hover {
  background: #f1f7f4 !important;
  color: #14231c !important;
}
body > .app-shell .output-mode-option > span::before {
  background: #ffffff !important;
}
body > .app-shell :is(.primary-button, .download-primary) {
  background: #1f8f66 !important;
  border-color: #1f8f66 !important;
  color: #ffffff !important;
}
body > .app-shell :is(.primary-button, .download-primary):hover:not(:disabled) {
  background: #176d4e !important;
  border-color: #176d4e !important;
  color: #ffffff !important;
}
body > .app-shell :is(.secondary-button, .console-action-button, .map-legend-toggle, .map-lock-toggle, .preview-tab, .preview-sub-tab) {
  background: #ffffff !important;
  color: #33473e !important;
}
body > .app-shell :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .ui-input, .boq-filter-select) {
  background: #ffffff !important;
  color: #14231c !important;
}
body > .app-shell select option {
  background: #ffffff;
  color: #14231c;
}
body > .app-shell .sticky-action-bar {
  background: rgba(255, 255, 255, 0.98) !important;
}
body > .app-shell .dashboard-empty-state,
body > .app-shell #astriIntegrationPanel :is(.rounded-2xl, #astriMatchBox),
body > .app-shell #documentAbdPanel :is(.rounded-2xl, #documentAbdMatchBox) {
  background: #f6faf8 !important;
}
body > .app-shell :is(.dashboard-section, .result-card, .summary-tile, .dashboard-metric, .map-stat, .stat-card, .issue-center-hero, .issue-center-grid > div) {
  background: #f8fbf9 !important;
  color: #33473e !important;
}
body > .app-shell :is(.boq-table-shell, .hpdb-table-shell, .console-log-shell),
body > .app-shell #consolePanel {
  background: #f8fbf9 !important;
}
body > .app-shell .boq-preview-table th {
  background: #eef5f1 !important;
  color: #52675d !important;
}
body > .app-shell .boq-preview-table td,
body > .app-shell .boq-preview-table tbody tr:nth-child(odd) td,
body > .app-shell .boq-preview-table tbody tr:hover td {
  background: #ffffff !important;
  color: #33473e !important;
}
body > .app-shell #astriActionButtons > :is(button, a) {
  background: #ffffff !important;
  color: #33473e !important;
}
body > .app-shell #astriActionButtons > :is(button, a):hover:not(:disabled) {
  background: #f0f7f3 !important;
  color: #14231c !important;
}
body > .app-shell #astriApdConvertButton {
  background: #e9f6f0 !important;
  color: #176d4e !important;
}
body > .app-shell #supportModulesPanel .dashboard-grid {
  background: #ffffff !important;
}
body > .app-shell #supportModulesPanel .fdt-coding-panel {
  background: #ffffff !important;
  color: #33473e !important;
}
body > .app-shell #supportModulesPanel .fdt-coding-panel:hover {
  background: #edf7f2 !important;
  color: #176d4e !important;
}
@media (max-width: 720px) {
  body > .app-shell .app-header > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  body > .app-shell .brand-lockup,
  body > .app-shell .brand-title-row,
  body > .app-shell .brand-lockup > div {
    min-width: 0 !important;
  }
  body > .app-shell .brand-heading {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body > .app-shell :is(.supported-files-trigger, .icon-button) {
    width: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
  body > .app-shell .header-actions,
  body > .app-shell .header-right {
    gap: 4px !important;
  }
  body > .app-shell #astriActionButtons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body > .app-shell #supportModulesPanel .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body > .app-shell #supportModulesPanel .fdt-coding-panel:last-child {
    grid-column: 1 / -1;
  }
}
/* Compact process log belongs to Ruang Hasil, not a separate workspace panel. */
body > .app-shell .result-process-log {
  margin-top: 16px;
  padding: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: #f8fbf9 !important;
  box-shadow: none !important;
}

body > .app-shell .result-process-log[data-tone="warning"] {
  border-color: #e3c78e !important;
}

body > .app-shell .result-process-log[data-tone="error"] {
  border-color: #e5b2b2 !important;
}

body > .app-shell .result-process-log .console-header-row {
  gap: 8px;
}

body > .app-shell .result-process-log .console-title-row {
  gap: 6px;
}

body > .app-shell .result-process-log h3 {
  color: var(--text-primary) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

body > .app-shell .result-process-log .console-meta-badge,
body > .app-shell .result-process-log .console-live {
  border-color: #d9e5df !important;
  background: #ffffff !important;
  color: #60736c !important;
  letter-spacing: 0 !important;
}

body > .app-shell .result-process-log .console-live {
  border-color: #b9d2c7 !important;
  color: #176d4e !important;
}

body > .app-shell .result-process-log .console-live::before {
  background: #23966c !important;
  box-shadow: none !important;
  animation: none !important;
}

body > .app-shell .result-process-log .console-meta-badge[data-tone="warning"] {
  border-color: #e3c78e !important;
  background: #fbf5e9 !important;
  color: #8a5700 !important;
}

body > .app-shell .result-process-log .console-meta-badge[data-tone="error"] {
  border-color: #e5b2b2 !important;
  background: #fceeee !important;
  color: #b42318 !important;
}

body > .app-shell .result-process-log .console-actions {
  margin-left: auto;
}

body > .app-shell .result-process-log .console-action-button {
  min-height: 34px !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 0.72rem !important;
}

body > .app-shell .result-process-log #consoleLogShell {
  height: 210px !important;
  margin-top: 10px;
  border-color: var(--border) !important;
  background: #ffffff !important;
}

body > .app-shell .result-process-log #consoleLogShell[hidden],
body > .app-shell .result-process-log [data-log-detail-action][hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  body > .app-shell .result-process-log .console-header-row {
    align-items: stretch;
  }

  body > .app-shell .result-process-log .console-actions {
    width: 100%;
    margin-left: 0;
  }

  body > .app-shell .result-process-log .console-action-button {
    flex: 1 1 auto;
  }
}

@media (max-width: 380px) {
  body > .app-shell .brand-heading { max-width: 112px; }
  body > .app-shell :is(.supported-files-trigger, .icon-button) {
    width: 36px !important;
    min-width: 36px !important;
  }
}