/* ============================================================================
   Rebuilt pages (Generator, Riwayat, Master) — editable vanilla modules.
   Uses the unified tokens from legacy-modern.css (--ui-*).
   ========================================================================== */
.legacy-modern .topbar-actions { display:flex; flex-wrap:wrap; gap:8px; }
.legacy-modern .page-body { min-width:0; }
.field-error { color:var(--ui-danger); font-size:12.5px; font-weight:650; }
.form-field .opt { color:var(--ui-faint); font-weight:500; }

/* Toast */
.gen-toast { position:fixed; z-index:300; right:18px; bottom:18px; max-width:min(420px,calc(100vw - 36px)); padding:13px 16px; color:#fff; background:var(--ui-success); border-radius:var(--r); box-shadow:var(--sh-lg); font-size:13.5px; font-weight:600; }
.gen-toast[data-kind="error"] { background:var(--ui-danger); }

.gen-loading,.gen-error { padding:22px; }
.gen-error strong { display:block; margin-bottom:6px; font-size:15px; }
.gen-error p { margin:0; color:var(--ui-muted); }

/* ---- Generator layout ----------------------------------------------------- */
.gen-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,.7fr); gap:20px; align-items:start; }
.gen-flow { min-width:0; display:grid; gap:16px; }

/* Stepper */
.stepper { margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; list-style:none; }
.stepper li { min-width:0; }
.stepper button { width:100%; min-height:52px; padding:9px 12px; display:flex; align-items:center; gap:9px; color:var(--ui-muted); text-align:left; background:var(--ui-white); border:1px solid var(--ui-line); border-radius:var(--r); cursor:pointer; font-size:12.5px; font-weight:700; transition:border-color .14s var(--ease), background .14s var(--ease), color .14s var(--ease); }
.stepper button:hover { border-color:#cfdbe4; }
.stepper__n { width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--ui-soft-2); color:var(--ui-muted); font-size:12px; font-weight:800; }
.stepper li.is-done button { color:var(--ui-ink-2); }
.stepper li.is-done .stepper__n { background:var(--ui-success-soft); color:var(--ui-success); }
.stepper li.is-active button { color:var(--ui-ink); background:var(--ui-blue-soft); border-color:var(--ui-blue); box-shadow:inset 0 0 0 1px var(--ui-blue); }
.stepper li.is-active .stepper__n { background:var(--ui-blue); color:#fff; }

.gen-panel { padding:24px 26px; }
.gen-panel h2 { margin:0 0 18px; color:var(--ui-ink); font-size:16px; font-weight:800; letter-spacing:-.01em; }
.gen-panel .form-field { margin-bottom:16px; display:grid; gap:7px; color:var(--ui-ink-2); font-size:13.5px; font-weight:650; }
.gen-panel .form-field:last-child { margin-bottom:0; }
.gen-panel input,.gen-panel select { width:100%; }
.form-pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.gen-tz { margin:0 0 16px; padding:11px 13px; color:var(--ui-ink-2); background:var(--ui-blue-soft); border-radius:var(--r-sm); font-size:13px; }
.gen-tz strong { color:var(--ui-blue-dark); }

.gen-nav { display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* Searchable route combobox */
.combo { position:relative; }
.combo-list { position:absolute; z-index:40; left:0; right:0; top:calc(100% + 6px); margin:0; padding:5px; max-height:300px; overflow:auto; list-style:none; background:var(--ui-white); border:1px solid var(--ui-line); border-radius:var(--r-sm); box-shadow:var(--sh-lg); }
.combo-list li { padding:9px 11px; border-radius:8px; color:var(--ui-ink); font-size:13.5px; font-weight:550; cursor:pointer; }
.combo-list li[role="option"]:hover,.combo-list li.is-active { background:var(--ui-blue-soft); color:var(--ui-blue-dark); }
.combo-list .combo-empty,.combo-list .combo-more { color:var(--ui-muted); font-size:12.5px; font-weight:600; cursor:default; }

.gen-review { margin:0; display:grid; gap:1px; background:var(--ui-line-2); border:1px solid var(--ui-line-2); border-radius:var(--r); overflow:hidden; }
.gen-review > div { display:grid; grid-template-columns:150px 1fr; gap:12px; padding:12px 14px; background:var(--ui-white); }
.gen-review dt { margin:0; color:var(--ui-muted); font-size:12.5px; font-weight:700; }
.gen-review dd { margin:0; color:var(--ui-ink); font-size:13.5px; font-weight:600; overflow-wrap:anywhere; }
.gen-review + .form-field { margin-top:18px; }
.gen-note { margin:14px 0 0; color:var(--ui-muted); font-size:12.5px; }
.gen-note strong { color:var(--ui-danger); }
.gen-missing { margin-bottom:16px; padding:11px 13px; color:#8a3c30; background:var(--ui-gold-soft); border:1px solid #e8d2a6; border-radius:var(--r-sm); font-size:13px; font-weight:600; }

/* Result / preview */
.gen-preview { position:sticky; top:20px; padding:22px; }
.gen-preview h2 { margin:0 0 16px; color:var(--ui-ink); font-size:15px; font-weight:800; }
.gen-empty { min-height:240px; display:grid; place-items:center; padding:22px; color:var(--ui-muted); text-align:center; font-size:13px; line-height:1.55; background:var(--ui-soft); border:1px dashed #c3d2dd; border-radius:var(--r); }
.gen-result { display:flex; gap:16px; align-items:center; padding-bottom:16px; border-bottom:1px solid var(--ui-line-2); }
.gen-qr { flex:none; width:120px; height:120px; border:1px solid var(--ui-line); border-radius:var(--r-sm); background:#fff; }
.gen-result__info { min-width:0; display:grid; gap:4px; }
.gen-result__info strong { color:var(--ui-ink); font-size:15px; }
.gen-result__info span { color:var(--ui-muted); font-size:12.5px; }
.gen-result__actions { margin-top:16px; display:grid; gap:9px; }
.gen-result__actions .button { width:100%; }
.gen-badge { margin:16px 0 0; padding:7px; text-align:center; color:var(--ui-danger); background:var(--ui-danger-soft); border-radius:var(--r-sm); font-size:11px; font-weight:800; letter-spacing:.03em; }

@media (max-width:960px) {
  .gen-grid { grid-template-columns:1fr; }
  .gen-preview { position:static; }
}
@media (max-width:620px) {
  .stepper { grid-template-columns:1fr 1fr; }
  .form-pair { grid-template-columns:1fr; }
  .gen-panel { padding:18px 16px; }
  .gen-review > div { grid-template-columns:1fr; gap:2px; }
}

/* ---- Riwayat & Master tables ---------------------------------------------- */
.hist-panel { padding:18px 20px 20px; }
.hist-search { margin-bottom:14px; }
.hist-search .search-input { width:100%; max-width:520px; }
.legacy-modern .actions { display:flex; flex-wrap:wrap; gap:8px; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-pill); font-size:11px; font-weight:800; letter-spacing:.02em; }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill--on { color:var(--ui-success); background:var(--ui-success-soft); }
.pill--off { color:var(--ui-muted); background:var(--ui-soft-2); }
/* Embedded Template Designer (original editor in an iframe) */
.legacy-modern .main.designer-embed-main { padding:0; max-width:none; height:100dvh; display:flex; flex-direction:column; }
.designer-embed-main .page-body { flex:1; min-height:0; padding:0; }
.designer-embed { width:100%; height:100%; border:0; display:block; background:#fff; }
@media (max-width:860px) { .legacy-modern .main.designer-embed-main { padding:0; } }

.td-name-cell { display:grid; gap:2px; }
.td-name-cell strong { color:var(--ui-ink); font-weight:700; }
.td-name-cell span { color:var(--ui-muted); font-size:12.5px; }
.danger-ghost { color:var(--ui-danger)!important; }
.danger-ghost:hover { background:var(--ui-danger-soft)!important; }
.muted-note { color:var(--ui-faint); }

/* ---- Master dialog -------------------------------------------------------- */
.master-dialog { position:fixed; inset:0; margin:auto; width:min(460px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); padding:0; color:var(--ui-ink); background:#fff; border:1px solid var(--ui-line); border-radius:var(--r-lg); box-shadow:var(--sh-lg); }
.master-dialog::backdrop { background:rgba(8,25,36,.55); backdrop-filter:blur(2px); }
.master-form header,.master-form footer { padding:16px 18px; display:flex; align-items:center; gap:12px; }
.master-form header { justify-content:space-between; border-bottom:1px solid var(--ui-line); }
.master-form header h2 { margin:0; font-size:18px; font-weight:800; }
.master-close { width:40px; height:40px; flex:none; color:var(--ui-muted); background:transparent; border:0; border-radius:9px; cursor:pointer; font-size:24px; }
.master-close:hover { background:var(--ui-soft-2); }
.master-form__body { padding:18px; display:grid; gap:14px; }
.master-form__body .form-field { display:grid; gap:7px; color:var(--ui-ink-2); font-size:13.5px; font-weight:650; }
.master-form__body input,.master-form__body select { width:100%; }
.master-form footer { justify-content:flex-end; border-top:1px solid var(--ui-line); }
.form-error { padding:10px 12px; color:#7b2622; background:var(--ui-danger-soft); border:1px solid #e4a9a6; border-radius:var(--r-sm); font-size:13px; }
.form-error[hidden] { display:none; }
@media (max-width:480px) { .master-form footer { flex-direction:column-reverse; } .master-form footer .button { width:100%; } }