/* Ruang kerja, header dua baris, dan ukuran responsif (skala tampilan). */

:root {
  /* Lebar panel mengikuti skala tampilan (rem), dibatasi agar kanvas tetap lega */
  --dock-width: clamp(250px, 19rem, 360px);
  --inspector-width: clamp(270px, 20rem, 380px);
}

/* ---------- Kerangka ---------- */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
}

.app-header {
  height: auto !important;
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  gap: 0;
}

.hdr-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.9rem;
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 0.4rem;
}

.hdr-top { border-bottom: 1px solid var(--border-subtle); }
.hdr-canvas-tools { background: rgba(10, 12, 18, 0.6); }
.hdr-spacer { flex: 1 1 auto; }
.hdr-actions, .tool-group { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.tool-group + .tool-group { padding-left: 0.6rem; border-left: 1px solid var(--border-subtle); }

.app-header .btn { font-size: 0.82rem; min-height: 2.1rem; }
.app-header .btn-icon { min-width: 2.1rem; padding: 0 0.5rem; font-size: 1rem; }
.header-select { font-size: 0.82rem; min-height: 2.1rem; max-width: 16rem; }
.control-label { font-size: 0.78rem; }
.zoom-slider { width: 7rem; }
.hdr-bill { font-family: var(--font-mono); color: var(--accent); font-size: 0.8rem; }

.brand-title { font-size: 1rem; }
.brand-subtitle { font-size: 0.6rem; }

.ws-tabs {
  display: flex;
  gap: 0.25rem;
  margin-left: 0.8rem;
  background: var(--bg-app);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  padding: 0.2rem;
}
.ws-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ws-tab:hover { color: var(--text-primary); }
.ws-tab.act {
  background: linear-gradient(135deg, #d4a96a 0%, #b8860b 100%);
  color: #0b0f19;
}
.ws-badge {
  font-size: 0.7rem;
  font-family: var(--font-mono);
  padding: 0 0.4rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  min-width: 1.2rem;
  text-align: center;
}
.ws-badge:empty { display: none; }
.ws-tab.act .ws-badge { background: rgba(0, 0, 0, 0.18); }

.scale-ctl {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 0 0.2rem;
}
.scale-ctl span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-secondary); min-width: 2.6rem; text-align: center; }
.scale-ctl .btn { min-height: 1.8rem; padding: 0 0.45rem; }

/* Tampil/sembunyi per ruang kerja */
.studio-main {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
}

/* ---------- Tulisan panel kanvas lebih terbaca ---------- */
.app-dock, .app-inspector { font-size: 0.9rem; }
.app-dock .section-desc, .app-inspector .section-desc { font-size: 0.78rem !important; }
.preset-name { font-size: 0.85rem; }
.preset-meta { font-size: 0.72rem; }

/* ---------- Scrollbar kanvas: lebih tebal & selalu terlihat ---------- */
.viewport-scrollbar { opacity: 0.85 !important; }
.viewport-scrollbar-x { height: 12px !important; bottom: 6px !important; }
.viewport-scrollbar-y { width: 12px !important; right: 6px !important; }
.viewport-thumb { background: rgba(212, 169, 106, 0.75) !important; }
.viewport-thumb:hover { background: rgba(229, 190, 130, 0.95) !important; }

.pan-hint {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  z-index: 90;
  font-size: 0.82rem;
  color: var(--text-primary);
  background: rgba(8, 9, 14, 0.85);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.8rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.pan-hint.show { opacity: 1; }

/* ---------- Layar kecil ---------- */
@media (max-width: 1280px) {
  .hdr-lbl { display: none; }
  .brand-subtitle { display: none; }
  .zoom-slider { width: 5rem; }
}

/* Tab alat lain */
.ws-tabs { align-items: center; flex-wrap: nowrap; }
.ws-tool-wrap { display: inline-flex; align-items: center; position: relative; }
.ws-tool-wrap.hidden, .ws-more-wrap.hidden { display: none; }
.ws-tab.ws-tool { font-size: 0.85rem; padding: 0.45rem 0.75rem; }
.ws-ext {
  position: absolute; top: -0.25rem; right: -0.1rem;
  font-size: 0.65rem; color: var(--text-muted); text-decoration: none;
  width: 1rem; height: 1rem; display: none; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg-surface-elevated); border: 1px solid var(--border-light);
}
.ws-tool-wrap:hover .ws-ext { display: inline-flex; }
.ws-ext:hover { color: var(--accent); }
.ws-more-wrap { position: relative; display: inline-flex; }
.ws-more { font-size: 0.85rem; padding: 0.45rem 0.8rem; }
.ws-more-menu {
  display: none; position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 500; min-width: 13rem;
  background: var(--bg-surface-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 0.3rem;
}
.ws-more-menu.open { display: block; }
.ws-more-item { display: flex; align-items: center; }
.ws-more-item button { flex: 1; text-align: left; background: none; border: none; color: var(--text-primary); font: inherit; font-size: 0.9rem; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); cursor: pointer; }
.ws-more-item button:hover { background: var(--bg-surface-active); }
.ws-more-item a { color: var(--text-muted); text-decoration: none; padding: 0.4rem 0.6rem; }
.ws-more-item a:hover { color: var(--accent); }

.tool-main { flex: 1 1 auto; min-height: 0; display: none; background: #fff; position: relative; }
.tool-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: none; background: #fff; }
.tool-frame.act { display: block; }
body[data-workspace^="tool"] .tool-main { display: block; }
body[data-workspace^="tool"] .studio-main,
body[data-workspace^="tool"] .editor-main,
body[data-workspace^="tool"] .hdr-canvas-tools { display: none !important; }
.app-header.hdr-compact .hdr-lbl { display: none; }
.app-header.hdr-compact .brand-subtitle { display: none; }