/* Snips app.css: UI editor, login, admin. Semua warna, ukuran, dan tipografi dari token Unibit
   (tokens.css + typography.css, mode Stockbit Web Light, font Bit Sans).
   Gaya HASIL email/PDF ada di output.css dan sengaja tetap hex. */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--artboard);
  color: var(--primary);
  font: var(--text-body-3r);
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; }
[hidden] { display: none !important; }

/* Tombol: block (primary) atau tanpa isian (outline / text) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-item-loose);
  height: var(--btn-h); padding: 0 var(--btn-px);
  border: 1px solid transparent; border-radius: var(--radius-field);
  background: transparent; color: var(--primary);
  font: var(--text-body-3b); white-space: nowrap; cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--white); }
.btn-danger { background: var(--negative); border-color: var(--negative); color: var(--white); }
.btn-outline { border-color: var(--surface-border); }
.btn-outline:hover, .btn-text:hover { background: var(--surface-hover); }
.btn-block { width: 100%; }
.btn:disabled { cursor: wait; }
.btn-primary:disabled { background: var(--inactive-button-positive); border-color: var(--inactive-button-positive); }
.btn-outline:disabled, .btn-text:disabled { color: var(--disabled); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--gap-section-tight); }

/* Field: input transparan, garis ikut wadahnya */
.field { display: flex; flex-direction: column; gap: var(--gap-item-base); }
.field__label { font: var(--text-body-4r); color: var(--secondary); }
.input {
  width: 100%; min-height: var(--inp-h); padding: 0 var(--inp-px);
  background: transparent; color: var(--primary);
  border: 1px solid var(--surface-border); border-radius: var(--radius-field);
  font: var(--text-body-3r);
}
.input::placeholder { color: var(--tertiary); }
.input:focus { outline: none; border-color: var(--brand); }
select.input { appearance: auto; }
.textarea { padding: var(--padding-vertical-tight) var(--inp-px); resize: vertical; min-height: 64px; }
.textarea--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; min-height: 96px; }

.form { display: flex; flex-direction: column; gap: var(--gap-section-loose); }
.form__actions { display: flex; justify-content: flex-end; gap: var(--gap-section-tight); }

.alert { margin: 0; padding: var(--padding-vertical-tight) var(--padding-horizontal-tight); border-radius: var(--radius-field); border: 1px solid; font: var(--text-body-3r); }
.alert--error { color: var(--primary); background: var(--surface-negative); border-color: var(--negative); }
.alert--success { color: var(--primary); background: var(--surface-positive); border-color: var(--positive); }

/* Kartu (login, notice, form) */
.page-center { display: flex; align-items: center; justify-content: center; padding: var(--gap-layout-base); }
.card {
  background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-card);
  padding: var(--padding-uniform-loose) var(--padding-horizontal-loose);
  display: flex; flex-direction: column; gap: var(--gap-section-loose);
}
.card--narrow { width: 100%; max-width: 360px; }
.card--form { width: 100%; max-width: 480px; }
.card--wide { width: 100%; }
.card--read { width: 100%; max-width: 680px; }
.card__logo { height: 48px; align-self: center; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-section-base); }
.card__title { font: var(--text-title-3); }
.card__sub { margin: 0; color: var(--secondary); font: var(--text-body-3r); }
.card__text { margin: 0; font: var(--text-paragraph-3); }

/* App bar */
.page-app, .page-editor { display: flex; flex-direction: column; height: 100vh; }
.appbar {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap-section-base);
  min-height: 56px; padding: var(--padding-vertical-tight) var(--padding-horizontal-base);
  background: var(--surface); border-bottom: 1px solid var(--surface-border);
}
.appbar__left { display: flex; align-items: center; gap: var(--gap-section-base); min-width: 0; flex: 1 1 240px; }
.appbar__brand { display: flex; flex: none; }
.appbar__logo { height: 28px; display: block; }
.appbar__title {
  font: var(--text-body-2b); color: var(--primary);
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  padding-left: var(--gap-section-base); border-left: 1px solid var(--divider);
}
.appbar__title:empty { display: none; }
.appbar__right { display: flex; align-items: center; gap: var(--gap-section-tight); flex: none; }
.appbar__status { font: var(--text-body-4r); color: var(--secondary); white-space: nowrap; }

.usermenu { position: relative; margin-left: var(--gap-item-loose); }
.usermenu__trigger {
  display: flex; align-items: center; gap: var(--gap-item-loose);
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.usermenu__name { font: var(--text-body-3b); }
.usermenu__avatar {
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--white); font: var(--text-body-3b);
}
.usermenu__popover {
  position: absolute; right: 0; top: calc(100% + var(--gap-item-loose)); z-index: 50;
  min-width: 200px; padding: var(--padding-uniform-tight) 0;
  background: var(--popover); border: 1px solid var(--popover-border); border-radius: var(--radius-card);
  display: flex; flex-direction: column;
}
.usermenu__meta { padding: var(--padding-vertical-tight) var(--padding-horizontal-tight); font: var(--text-body-4r); color: var(--secondary); border-bottom: 1px solid var(--divider); }
.usermenu__popover a, .usermenu__popover button {
  display: block; width: 100%; text-align: left;
  padding: var(--padding-vertical-tight) var(--padding-horizontal-tight);
  background: transparent; border: 0; color: var(--primary); font: var(--text-body-3r); cursor: pointer;
}
.usermenu__popover a:hover, .usermenu__popover button:hover { background: var(--surface-hover); text-decoration: none; }
.usermenu__popover form { margin: 0; }

.page-body {
  flex: 1; overflow: auto; padding: var(--gap-layout-base);
  display: flex; flex-direction: column; align-items: center; gap: var(--gap-layout-base);
}

/* Tabel admin */
.table-wrap { overflow-x: auto; border: 1px solid var(--surface-border); border-radius: var(--radius-card); }
.table { width: 100%; border-collapse: collapse; font: var(--text-table-1r); }
.table th { background: var(--emphasis); font: var(--text-table-1b); text-align: left; white-space: nowrap; }
.table th, .table td { padding: var(--padding-vertical-tight) var(--padding-horizontal-tight); border-bottom: 1px solid var(--divider); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; }
.table__actions { width: 100%; text-align: right; }
.table__actions a + a { margin-left: var(--gap-section-base); }
.status { font: var(--text-body-4b); }
.status--active { color: var(--positive); }
.status--frozen { color: var(--negative); }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--gap-item-loose) var(--gap-section-loose); margin: 0; }
.dl dt { color: var(--secondary); }
.dl dd { margin: 0; }

/* Halaman baca (Saved Snips) */
.read-meta { display: flex; flex-direction: column; gap: var(--gap-item-base); padding-bottom: var(--gap-section-base); border-bottom: 1px solid var(--divider); }
.read-meta__title { font: var(--text-title-3); }
.read-meta__sub { font: var(--text-body-4r); color: var(--secondary); }

/* =========================================================
   Editor: 4 panel di atas artboard
   ========================================================= */
.workspace {
  flex: 1; min-height: 0; display: flex; gap: var(--gap-item-base);
  padding: var(--gap-item-base) var(--gap-section-tight);
}

/* Pegangan geser lebar kolom: menempati persis celah antar panel */
.resizer {
  flex: none; position: relative; z-index: 2;
  width: var(--gap-item-base); margin: 0 calc(var(--gap-item-base) * -1);
  cursor: col-resize; touch-action: none;
}
.resizer::before { content: ""; position: absolute; inset: 0 calc(var(--gap-item-base) * -1); }
.resizer::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%);
  border-radius: var(--radius-pill);
}
.resizer:hover::after, .resizer.is-dragging::after { background: var(--brand); }
body.is-resizing { cursor: col-resize; user-select: none; }
body.is-resizing .panel { pointer-events: none; }
.panel {
  min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-card);
  overflow: hidden;
}
.panel--left { flex: 0 0 290px; }
.panel--editor, .panel--preview { flex: 0 0 620px; }
.panel--html { flex: 1 1 0; }
.panel__head {
  flex: none; display: flex; align-items: center; min-height: 44px;
  padding: 0 var(--padding-horizontal-base); border-bottom: 1px solid var(--divider);
}
.panel__title { font: var(--text-body-2b); }
.panel__body {
  flex: 1; min-height: 0; overflow-y: auto; padding: var(--padding-horizontal-base);
  scrollbar-width: thin; scrollbar-color: var(--track) transparent;
}

@media (max-width: 1680px) {
  .panel--editor, .panel--preview { flex: 1 1 0; }
  .workspace:not(.show-html) .panel--html { display: none; }
  .workspace.show-html .panel--left,
  .workspace.show-html .panel--editor { display: none; }
  .workspace:not(.show-html) .resizer[data-between="preview-html"],
  .workspace.show-html .resizer[data-between="left-editor"],
  .workspace.show-html .resizer[data-between="editor-preview"] { display: none; }
}

/* Tab: terpilih ditandai garis brand, bukan isian */
.tabs { flex: none; display: flex; padding: 0 var(--padding-horizontal-tight); border-bottom: 1px solid var(--divider); }
.tab {
  height: 44px; padding: 0 var(--padding-horizontal-tight);
  background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--secondary); font: var(--text-body-3b); cursor: pointer;
}
.tab:hover { color: var(--primary); }
.tab.is-active { color: var(--primary); border-bottom-color: var(--brand); }
.left-tab { flex: 1; }

.left-pane, .preview-pane { display: none; }
.left-pane.is-active, .preview-pane.is-active { display: block; }
.left-pane.is-active { display: flex; flex-direction: column; gap: var(--gap-layout-base); }

.group { display: flex; flex-direction: column; gap: var(--gap-section-tight); }
.group__title { font: var(--text-body-3b); color: var(--primary); }

.thumbnail {
  display: block; width: 100%; max-height: 100px; object-fit: contain; cursor: pointer;
  padding: var(--padding-uniform-base); border: 1px solid var(--surface-border); border-radius: var(--radius-field);
}
.thumbnail:hover { border-color: var(--brand); }
#image-thumbnails { display: flex; flex-direction: column; gap: var(--gap-section-tight); }
#image-thumbnails:empty, #stock-logo-thumbnails:empty { display: none; }
#stock-logo-thumbnails { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-section-tight); }

.preview-pdf-toolbar { display: flex; justify-content: flex-end; gap: var(--gap-section-tight); margin-bottom: var(--gap-section-base); }

#tag-summary {
  margin-bottom: var(--gap-section-base); padding: var(--padding-vertical-tight) var(--padding-horizontal-tight);
  background: var(--emphasis); border-radius: var(--radius-field); font: var(--text-body-4r);
}
.appfooter {
  flex: none; padding: var(--padding-uniform-base) var(--padding-horizontal-base);
  background: var(--surface); border-top: 1px solid var(--surface-border);
  font: var(--text-body-5r); color: var(--secondary);
}

/* =========================================================
   Modal Table to Image
   ========================================================= */
.t2i-modal { display: none; position: fixed; inset: 0; z-index: 100; }
.t2i-modal.is-open { display: block; }
.t2i-backdrop { position: absolute; inset: 0; background: var(--overlay); }
.t2i-content {
  position: relative; width: 90%; max-width: 760px; max-height: 90vh; margin: 5vh auto 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--modal); border: 1px solid var(--modal-border); border-radius: var(--radius-modal);
}
.t2i-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--padding-vertical-base) var(--padding-horizontal-base); border-bottom: 1px solid var(--divider);
}
.t2i-title { font: var(--text-title-3); }
.t2i-close {
  display: flex; padding: var(--padding-uniform-tight); border: 0; border-radius: var(--radius-field);
  background: transparent; color: var(--icon); cursor: pointer;
}
.t2i-close:hover { background: var(--surface-hover); }
.t2i-body {
  flex: 1; overflow-y: auto; padding: var(--padding-horizontal-base);
  display: flex; flex-direction: column; gap: var(--gap-section-base);
}
.t2i-paste-area {
  min-height: 80px; padding: var(--padding-uniform-base) var(--padding-horizontal-tight);
  border: 1px dashed var(--modal-border); border-radius: var(--radius-field); overflow: auto; cursor: text;
}
.t2i-paste-area:focus { outline: none; border-color: var(--brand); }
.t2i-paste-area:empty::before { content: attr(data-placeholder); color: var(--tertiary); }
.t2i-label { display: flex; align-items: center; gap: var(--gap-item-loose); font: var(--text-body-3b); }
.t2i-preview-wrap { padding: var(--padding-uniform-loose); border: 1px solid var(--modal-border); border-radius: var(--radius-field); overflow-x: auto; }
#t2i-preview:empty::before { content: "Belum ada tabel"; color: var(--tertiary); }

.t2i-help { position: relative; display: inline-flex; cursor: help; outline: none; }
.t2i-help-icon {
  width: 16px; height: 16px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--modal-border); color: var(--icon); font: var(--text-body-5b);
}
.t2i-help:hover .t2i-help-icon, .t2i-help:focus-within .t2i-help-icon { border-color: var(--brand); color: var(--brand); }
.t2i-help-popover {
  position: absolute; left: 0; top: calc(100% + var(--gap-item-loose)); z-index: 10; width: 280px;
  display: flex; flex-direction: column; gap: var(--gap-item-loose);
  padding: var(--padding-uniform-base) var(--padding-horizontal-tight);
  background: var(--popover); border: 1px solid var(--popover-border); border-radius: var(--radius-card);
  font: var(--text-body-3r); opacity: 0; pointer-events: none;
}
.t2i-help:hover .t2i-help-popover, .t2i-help:focus-within .t2i-help-popover { opacity: 1; pointer-events: auto; }
.t2i-popover-title { font: var(--text-body-4b); color: var(--secondary); }
.t2i-popover-note { font: var(--text-body-4r); color: var(--secondary); }
.t2i-toggle { display: flex; align-items: center; gap: var(--gap-item-loose); cursor: pointer; }
.t2i-toggle input { accent-color: var(--brand); margin: 0; }

.t2i-actions {
  display: flex; justify-content: flex-end; gap: var(--gap-section-tight);
  padding: var(--padding-vertical-base) var(--padding-horizontal-base); border-top: 1px solid var(--divider);
}