/* Professional engineering workspace. Presentation is isolated from the solver,
   viewer palette, and existing dialog/command contracts. All assets are local. */
:root {
  --bg: #e8edf2;
  --panel: #fff;
  --line: #cbd3dc;
  --text: #263648;
  --muted: #667689;
  --accent: #2368a2;
  --isian: #f8fafc;
  --isian-terpilih: #e1edf8;
  --isian-redup: #f1f4f7;
}

body {
  --explorer-width: 244px;
  --properties-width: 252px;
  height: 100dvh;
  overflow: hidden;
  font: 12px/1.45 "Segoe UI", system-ui, sans-serif;
}

button, input, select, summary { -webkit-tap-highlight-color: transparent; }
button, select, input[type="number"], input[type="text"], input[type="file"] {
  border-radius: 2px;
  padding: 5px 8px;
  font-size: 12px;
}
button { transition: background-color 100ms, border-color 100ms; }
button:hover:not(:disabled) { background: var(--isian-terpilih); }
button:disabled {
  opacity: 1;
  border-style: solid;
  border-color: #dfe5eb;
  color: #8e9aa7;
  background: var(--isian-redup);
}
button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible,
.dock-splitter:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input[type="checkbox"], input[type="range"], progress { accent-color: var(--accent); }
select, input[type="text"], input[type="number"] { background: #fff; }
label, .muted, legend { font-size: 12px; }
h2 { font-size: 11px; letter-spacing: .035em; }
aside, dialog, .tabel-bungkus, .workspace-ribbon {
  scrollbar-width: thin;
  scrollbar-color: #b9c5d0 transparent;
}
[hidden] { display: none !important; }

/* A quiet title strip, with the menu and workflow on their own shared row. */
.titlebar {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 12px;
  background: #243d55;
  color: #e6edf4;
}
.brand-mark, .empty-mark {
  display: grid;
  place-items: center;
  color: #fff;
  background: #3275ac;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.brand-mark { width: 26px; height: 26px; background: transparent; }
.brand-mark img, .empty-mark img { display: block; width: 100%; height: 100%; }
.titlebar .merek { font-size: 11px; color: #edf4fa; letter-spacing: .11em; }
.titlebar .merek b { color: #99c9ee; margin-left: 3px; }
.titlebar-product {
  padding-left: 12px;
  margin-left: 3px;
  border-left: 1px solid #53677a;
  font-size: 11px;
  color: #b8c8d7;
}
body > header {
  min-height: 32px;
  padding: 0 9px;
  gap: 12px;
  flex-shrink: 0;
  background: #f5f7fa;
}
.menu { gap: 1px; }
.menu > .menu-slot > button, #tab-alur button {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 0;
}
.menu-isi { border-radius: 3px; padding: 4px; top: 100%; }
.menu-isi button, .menu-berkas { font-size: 12px; padding: 6px 12px; }
#tab-alur { gap: 0; align-self: stretch; }
#tab-alur button { min-width: 78px; border: 0; border-bottom: 2px solid transparent; }
#tab-alur button.aktif { background: #fff; border-bottom-color: var(--accent); font-weight: 600; }

/* Ribbon commands use the existing controls, with the same disabled state. */
.workspace-ribbon {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  padding: 5px 8px 3px;
  min-height: 86px;
  gap: 4px;
  overflow-x: auto;
  background: #f5f7fa;
  border-bottom: 1px solid #b8c5d1;
}
.ribbon-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 0 8px;
  border-right: 1px solid #d7dee6;
}
.ribbon-group:last-child { border-right: 0; }
.ribbon-actions, #ribbon-draw .alat { display: flex; align-items: stretch; gap: 2px; }
.workspace-command, #ribbon-draw .alat button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 47px;
  min-height: 52px;
  width: auto;
  margin: 0;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  font-size: 11px;
  white-space: nowrap;
}
.workspace-command .ui-icon { color: #356c99; }
.workspace-command:disabled, #ribbon-draw .alat button:disabled {
  background: transparent;
  border-color: transparent;
  color: #8c99a7;
}
.workspace-command:disabled .ui-icon, #ribbon-draw .alat button:disabled .ui-icon { color: #a6b1bc; }
.workspace-command.aktif, #ribbon-draw .alat button.aktif {
  border-color: #91b6d7;
  background: #deebf8;
  color: #205e93;
}
.ui-icon { display: inline-flex; flex: 0 0 auto; width: 22px; height: 22px; }
.ui-icon svg { display: block; width: 100%; height: 100%; }
.ribbon-caption {
  display: block;
  text-align: center;
  color: #758292;
  font-size: 10px;
  padding-top: 3px;
}
#ribbon-draw { order: 0; }
#ribbon-draw section { padding: 0; margin: 0; border: 0; }
#ribbon-draw details { display: flex; }
#ribbon-draw summary { display: none; }
#ribbon-draw .alat.terkunci { outline: none; }
#ribbon-draw .alat { margin-bottom: 2px; }
#ribbon-draw .alat::after { content: none; }
#ribbon-draw .alat button { min-width: 45px; }
#ribbon-draw .alat button .ui-icon { color: #376e9c; }
#ribbon-analysis [data-command="#jalankan"] .ui-icon { color: #328165; }
#ribbon-draw #status-editor:empty { display: none; }

/* Docked panels and the canvas share the remaining height without page scrolling. */
main { gap: 0; overflow: hidden; padding: 5px 5px 0; }
aside { padding: 0; background: #f8fafc; }
#sidebar { width: var(--explorer-width); border: 1px solid var(--line); }
#properti { width: var(--properties-width); border: 1px solid var(--line); transition: none; }
.dock-heading, #properti .properti-alih {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  margin: 0;
  padding: 5px 10px;
  color: #31465b;
  background: #e7edf3;
  border: 0;
  border-bottom: 1px solid #cbd5df;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.dock-heading { position: sticky; top: 0; z-index: 6; }
.dock-heading button { width: 22px; height: 22px; margin: -2px -4px -2px 0; padding: 0; border: 0; background: transparent; }
#sidebar > section, #properti > section {
  padding: 10px;
  margin: 0;
  border-bottom: 1px solid #dce3eb;
}
#sidebar > section:has(> #kelompok-temuan[hidden]) { display: none; }
#sidebar .kelompok > summary, #properti .kelompok > summary {
  margin: 0 0 7px;
  color: #42576c;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: .01em;
}
#sidebar .kelompok:not([open]) > summary, #properti .kelompok:not([open]) > summary { margin-bottom: 0; }
.kelompok > summary::before { color: #7a8d9f; width: 14px; }
#sidebar .kisi { grid-template-columns: 1fr; gap: 0; }
#sidebar .kisi button {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin: 0;
  padding: 4px 7px 4px 17px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  font-size: 12px;
  line-height: 1.5;
}
#sidebar .kisi button:hover:not(:disabled) { background: var(--isian-terpilih); border-color: #b9cfe3; }
#sidebar .kisi button .ui-icon { width: 15px; height: 15px; color: #62819e; }
#sidebar h2.berjarak { margin: 12px 0 5px; }
#sidebar dl { margin-top: 5px; font-size: 12px; }
#sidebar dd { font-weight: 600; color: #365f82; }
#sidebar label, #properti label { margin-top: 7px; }
#sidebar select, #properti select { margin-top: 3px; }
#sidebar p:empty, #properti p:empty { display: none; }
#properti .kisi { gap: 4px; }
#properti .kisi button { font-size: 11px; padding: 5px 3px; margin-top: 3px; min-height: 28px; }
#properti-isi:empty { display: none; }
#properti-isi:not(:empty) { padding: 10px; background: #fff; border-bottom: 1px solid var(--line); }
#properti-isi dl { margin: 0; font-size: 12px; gap: 0; }
#properti-isi dt, #properti-isi dd { padding: 5px; border-bottom: 1px solid #edf0f4; }
#panel-view .menu-view button { margin: 0; padding: 5px 7px; border: 0; background: transparent; text-align: left; font-size: 11px; }
#panel-view .menu-view button:hover:not(:disabled) { background: var(--isian-terpilih); }
#panel-view hr { margin: 5px 0; border: 0; border-top: 1px solid var(--line); }
.dock-splitter { flex: 0 0 5px; cursor: col-resize; touch-action: none; }
.dock-splitter:hover, .dock-splitter:focus-visible { background: #81aaca; }
.dock-resizing { cursor: col-resize; user-select: none; }
.explorer-collapsed #sidebar { width: 29px; overflow: hidden; }
.explorer-collapsed #sidebar > section { display: none; }
.explorer-collapsed .dock-heading { writing-mode: vertical-rl; gap: 12px; padding: 8px 4px; border: 0; }
.explorer-collapsed .dock-heading button { transform: rotate(180deg); }
.explorer-collapsed #sidebar + .dock-splitter { pointer-events: none; }
body.properti-tertutup #properti { width: 29px; }
body.properti-tertutup #properti > section { display: none; }
body.properti-tertutup #properti .properti-alih { padding: 8px 4px; height: 100%; justify-content: flex-start; gap: 12px; }
body.properti-tertutup .dock-splitter:has(+ #properti) { pointer-events: none; }
.mengambang { right: calc(var(--properties-width) + 20px); bottom: 38px; }

.workspace-view { display: flex; flex: 1; flex-direction: column; min-width: 0; border: 1px solid #b9c7d4; background: #fff; }
.viewport-toolbar { display: flex; align-items: center; height: 32px; flex-shrink: 0; padding: 0 5px; border-bottom: 1px solid #cbd5df; background: #eef3f8; }
.viewport-toolbar > .workspace-command { flex-direction: row; gap: 5px; min-height: 25px; padding: 3px 9px; }
.viewport-toolbar .ui-icon { width: 16px; height: 16px; }
.viewport-navigation { display: flex; gap: 2px; margin-left: auto; }
.workspace-command.compact { min-width: 26px; min-height: 25px; padding: 4px; }
#viewport { min-height: 0; overflow: hidden; }
#tampak-awal { display: none; }
.bar-tampak-bungkus { top: 9px; left: 10px; }
.bar-tampak-tab { border-radius: 2px; padding: 3px 8px; font-size: 11px; }
.bar-tampak { border-radius: 3px; }
.workspace-empty {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #f9fbfd;
}
.empty-mark { width: 64px; height: 64px; background: transparent; margin-bottom: 16px; }
.workspace-empty h1 { font-size: 17px; letter-spacing: .09em; font-weight: 400; color: #3c5268; margin: 0 0 25px; }
.workspace-empty h1 b { color: var(--accent); }
#empty-actions { display: flex; flex-direction: column; gap: 8px; }
#empty-actions .workspace-command { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 38px; min-width: 218px; border: 1px solid #cbd8e4; background: #fff; padding: 8px 14px; font-size: 12px; }
#empty-actions .workspace-command:first-child { background: #e9f1f9; border-color: #a2bed6; }
#empty-actions .ui-icon { width: 19px; height: 19px; }
.workspace-status { display: flex; align-items: center; flex-shrink: 0; min-height: 25px; padding: 3px 12px; gap: 15px; border-top: 1px solid #cbd5df; background: #edf2f7; font-size: 11px; }
.workspace-status .status-global { max-width: none; min-width: 0; flex: 1; font-size: 11px; }
.workspace-status #status-editor { min-width: 0; max-width: 65vw; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.workspace-status #status-editor:empty { display: none; }
.workspace-status #health { margin-left: auto; font-size: 10px; }
.workspace-status #health::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #8293a3; }
.workspace-status #health.galat::before { background: var(--error); }

/* Compact dialogs and numerical tables retain all existing field arrangements. */
dialog { position: fixed; top: 12vh; bottom: auto; margin: 0 auto; max-height: calc(88dvh - 16px); border: 1px solid #91a6b9; border-radius: 3px; padding: 14px; box-shadow: 0 10px 32px #20344933; }
dialog h3 { margin: -14px -14px 12px; padding: 9px 13px; background: #e9eff5; border-bottom: 1px solid #cbd5df; color: #2c4964; font-size: 12px; }
dialog.panel-gambar { top: 174px; max-height: calc(100dvh - 190px); }
dialog .tutup { min-height: 29px; }
fieldset { border-radius: 2px; }
th { background: #eaf0f5; color: #435c72; font-weight: 600; }
th, td { padding: 5px 7px; }
tbody tr:nth-child(even) { background: #f6f8fb; }
tbody tr:hover { background: #eaf2fa; }
progress { width: 100%; height: 5px; margin-top: 10px; }
#jalankan:not(:disabled) { background: #287150; border-color: #236548; color: #fff; }

@media (max-width: 1200px) {
  .ribbon-group { padding: 0 5px; }
  .workspace-command, #ribbon-draw .alat button { padding-left: 5px; padding-right: 5px; }
}
@media (max-width: 900px) {
  #sidebar { width: 205px; }
  #properti { width: 210px; }
  .titlebar-product { display: none; }
  #tab-alur button { min-width: 57px; padding: 6px 9px; }
  .menu > .menu-slot > button { padding: 6px 8px; }
  .viewport-toolbar > .workspace-command { padding: 3px 5px; font-size: 10px; }
}
@media (max-width: 700px) {
  #sidebar { width: 175px; }
  #properti { width: 170px; }
  .viewport-toolbar { height: auto; min-height: 32px; flex-wrap: wrap; }
  .viewport-navigation { margin-left: 0; }
  #empty-actions .workspace-command { min-width: 0; }
  .workspace-empty h1 { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }
#viewport[aria-busy="true"] { cursor: progress; }
#viewport[aria-busy="true"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32%;
  height: 3px;
  background: var(--accent, #1976c9);
  z-index: 20;
  pointer-events: none;
  animation: result-progress 1s ease-in-out infinite alternate;
}
@keyframes result-progress { to { left: 68%; } }
@media (prefers-reduced-motion: reduce) {
  #viewport[aria-busy="true"]::after { animation: none; width: 100%; }
}