/* ============================================================================
   Sample Pass — unified modern design system
   One app shell, one type scale, one surface + control language across Login,
   Ringkasan, Generator, Riwayat, Master data, and Template Designer.
   Direction: fresh, calm, operational. No decorative gradients/glow.
   ========================================================================== */
:root {
  /* Brand + structure */
  --ui-navy:#0e2638; --ui-navy-2:#15324a; --ui-navy-3:#1d445f;
  --ui-blue:#1c6fb0; --ui-blue-dark:#155a90; --ui-blue-soft:#eaf3fb;
  --ui-gold:#e0ad5a; --ui-gold-soft:#f8efdc;
  /* Ink + neutrals */
  --ui-ink:#15303f; --ui-ink-2:#1f4257; --ui-muted:#627787; --ui-faint:#8597a4;
  --ui-line:#e4eaf0; --ui-line-2:#eef2f6;
  --ui-soft:#f6f8fb; --ui-soft-2:#f0f4f8; --ui-white:#ffffff;
  --ui-danger:#b23a33; --ui-danger-soft:#fbeceb;
  --ui-success:#1f7a57; --ui-success-soft:#e6f4ee;
  /* Shape + depth */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(14,38,56,.06);
  --sh:0 1px 2px rgba(14,38,56,.05), 0 10px 26px -14px rgba(14,38,56,.22);
  --sh-lg:0 24px 60px -24px rgba(14,38,56,.38);
  --ring:0 0 0 3px rgba(28,111,176,.22);
  --ease:cubic-bezier(.4,.1,.2,1);
  --sans:"Inter var",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",sans-serif;
}

.legacy-modern body { color:var(--ui-ink); background:var(--ui-soft); font-family:var(--sans); -webkit-font-smoothing:antialiased; letter-spacing:-.01em; }

/* ---- Shell layout ---------------------------------------------------------
   Legacy build uses `.shell { display:flex }`. Overview mistakenly used
   `.app-shell` which had no layout rule (sidebar stacked above content).
   Make both shells real two-column flex layouts.                            */
.legacy-modern .app-shell,
.legacy-modern .overview-app { min-height:100dvh; display:flex; background:var(--ui-soft); }
.legacy-modern .shell { min-height:100dvh; }

/* ---- Sidebar -------------------------------------------------------------- */
.legacy-modern .sidebar {
  flex:none; width:244px; padding:20px 14px 16px;
  display:flex; flex-direction:column;
  background:var(--ui-navy);
  background-image:linear-gradient(180deg,#123049 0%,var(--ui-navy) 42%);
  border-right:1px solid #0a1e2e;
}
.legacy-modern .brand { margin:0 6px 22px; display:flex; align-items:center; gap:11px; }
.legacy-modern .brand-mark {
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border-radius:11px; background:var(--ui-gold); color:#2a1c05;
  font-size:14px; font-weight:900; letter-spacing:-.02em;
  box-shadow:0 4px 14px -6px rgba(224,173,90,.7);
}
.legacy-modern .brand strong { display:block; color:#fff; font-size:16px; font-weight:800; letter-spacing:-.02em; }
.legacy-modern .brand small { color:#8fabbd; font-size:0; }
.legacy-modern .brand small::after { content:"Dokumen operasional"; font-size:11.5px; font-weight:500; letter-spacing:0; }

.legacy-modern .sidebar nav { display:grid; gap:2px; padding-top:48px; }
.legacy-modern .sidebar nav a {
  min-height:42px; padding:0 12px; display:flex; align-items:center; gap:10px;
  position:relative; color:#c6d6e1; border-radius:9px;
  font-size:13.5px; font-weight:600; text-decoration:none;
  transition:background .14s var(--ease), color .14s var(--ease);
}
.legacy-modern .sidebar nav a:hover { background:rgba(255,255,255,.07); color:#fff; }
.legacy-modern .sidebar nav a.active,
.legacy-modern .sidebar nav a[aria-current="page"] {
  color:#fff; background:rgba(255,255,255,.1); font-weight:700;
}
.legacy-modern .sidebar nav a.active::before,
.legacy-modern .sidebar nav a[aria-current="page"]::before {
  content:""; position:absolute; left:4px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:2px; background:var(--ui-gold);
}
.legacy-modern .nav-group {
  margin:18px 12px 6px; color:#7a9bb0; font-size:10.5px;
  font-weight:800; letter-spacing:.09em; text-transform:uppercase;
}
/* Floating overview link injected into legacy pages that lack it in nav */
.global-overview-link {
  position:fixed; z-index:25; top:98px; left:26px; width:200px; min-height:42px;
  padding:0 12px; display:flex; align-items:center; color:#c6d6e1;
  border-radius:9px; font-size:13.5px; font-weight:600; text-decoration:none;
  transition:background .14s var(--ease), color .14s var(--ease);
}
.global-overview-link:hover { color:#fff; background:rgba(255,255,255,.07); }
.global-overview-link.active { color:#fff; background:rgba(255,255,255,.1); font-weight:700; }

.legacy-modern .sidebar-foot {
  margin-top:auto; padding:12px 12px 4px; color:#b9cdd9; font-size:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.legacy-modern .sidebar-foot small { display:block; margin-top:2px; color:#88a6b7; }
.legacy-modern .sidebar-foot .dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#3ecb8e; box-shadow:0 0 0 3px rgba(62,203,142,.18); }

/* ---- Main / page header --------------------------------------------------- */
.legacy-modern .main {
  flex:1; min-width:0; margin-left:0;
  padding:30px clamp(22px,3.4vw,48px) 72px; max-width:1360px;
}
.legacy-modern .topbar { min-height:auto; margin-bottom:26px; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.legacy-modern .topbar h1 { margin:0; color:var(--ui-ink); font-size:clamp(25px,2.6vw,32px); font-weight:800; line-height:1.12; letter-spacing:-.03em; }
.legacy-modern .topbar h1[data-modern-title],
.legacy-modern .generator-form h2[data-modern-title] { font-size:0; }
.legacy-modern .topbar h1[data-modern-title]::after { content:attr(data-modern-title); font-size:clamp(25px,2.6vw,32px); }
.legacy-modern .generator-form h2[data-modern-title]::after { content:attr(data-modern-title); font-size:15px; }
.legacy-modern button span[data-modern-label] { font-size:0; }
.legacy-modern button span[data-modern-label]::after { content:attr(data-modern-label); font-size:13px; }
.legacy-modern .topbar > div[data-description]:not(:has(.page-description))::after {
  content:attr(data-description); max-width:640px; margin-top:6px; display:block;
  color:var(--ui-muted); font-size:14px; font-weight:450; line-height:1.55;
}
.legacy-modern .page-description { max-width:640px; margin:6px 0 0; color:var(--ui-muted); font-size:14px; line-height:1.55; }

/* ---- Surfaces: function over uniform cards -------------------------------- */
.legacy-modern .panel { background:var(--ui-white); border:1px solid var(--ui-line); border-radius:var(--r); box-shadow:none; }
.legacy-modern .entity-header { margin-bottom:20px; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.legacy-modern .entity-header p { margin:4px 0 0; color:var(--ui-muted); }

/* ---- Controls ------------------------------------------------------------- */
.legacy-modern .button {
  min-height:42px; padding:0 15px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:10px; font-size:13.5px; font-weight:700; letter-spacing:-.01em; cursor:pointer;
  transition:background .14s var(--ease), border-color .14s var(--ease), transform .06s var(--ease), box-shadow .14s var(--ease);
}
.legacy-modern .button--primary { color:#fff; background:var(--ui-blue); border:1px solid var(--ui-blue); box-shadow:0 1px 2px rgba(21,90,144,.3); }
.legacy-modern .button--primary:hover { background:var(--ui-blue-dark); border-color:var(--ui-blue-dark); }
.legacy-modern .button--secondary { color:var(--ui-ink-2); background:var(--ui-white); border:1px solid var(--ui-line); }
.legacy-modern .button--secondary:hover { background:var(--ui-soft-2); border-color:#cfdbe4; }
.legacy-modern .button--ghost { color:var(--ui-blue); background:transparent; border:1px solid transparent; }
.legacy-modern .button--ghost:hover { background:var(--ui-blue-soft); }
.legacy-modern .button:focus-visible { outline:none; box-shadow:var(--ring); }
.legacy-modern .button:active { transform:translateY(1px); }
.legacy-modern .button--sm { min-height:38px; padding:0 12px; font-size:13px; }
/* Demoted manual refresh — secondary, compact, never competes with the page's primary action */
.legacy-modern .refresh-button,
.legacy-modern .topbar .refresh-button { min-height:38px; padding:0 12px; color:var(--ui-muted)!important; background:var(--ui-white)!important; border:1px solid var(--ui-line)!important; box-shadow:none!important; font-size:12.5px; font-weight:600; }
.legacy-modern .refresh-button:hover { background:var(--ui-soft-2)!important; color:var(--ui-ink-2)!important; }
.legacy-modern .refresh-button svg { width:14px; height:14px; }

.legacy-modern input,.legacy-modern select,.legacy-modern textarea {
  min-height:44px; padding:10px 12px; color:var(--ui-ink);
  background:var(--ui-white); border:1px solid #cfdbe4; border-radius:10px;
  font-size:15px; transition:border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.legacy-modern input:hover,.legacy-modern select:hover,.legacy-modern textarea:hover { border-color:#aec1cf; }
.legacy-modern input:focus,.legacy-modern select:focus,.legacy-modern textarea:focus { outline:none; border-color:var(--ui-blue); box-shadow:var(--ring); }
.legacy-modern .form-field { gap:7px; color:var(--ui-ink-2); font-weight:650; }
.legacy-modern .field-hint { color:var(--ui-muted); font-size:12.5px; line-height:1.5; }

/* ---- Tables --------------------------------------------------------------- */
.legacy-modern .page-search { margin-bottom:16px; }
.legacy-modern .search-input { max-width:520px; }
.legacy-modern .table-wrap { overflow:visible; }
.legacy-modern table { width:100%; border-collapse:collapse; }
.legacy-modern th { padding:11px 12px; color:var(--ui-faint); font-size:11px; font-weight:800; letter-spacing:.045em; text-transform:uppercase; text-align:left; border-bottom:1px solid var(--ui-line); }
.legacy-modern td { padding:13px 12px; border-bottom:1px solid var(--ui-line-2); }
.legacy-modern tbody tr:last-child td { border-bottom:0; }
.legacy-modern tbody tr { transition:background .12s var(--ease); }
.legacy-modern tbody tr:hover { background:var(--ui-soft); }
.legacy-modern .actions { display:flex; gap:8px; }
.legacy-modern .pagination { margin-top:18px; }

/* ---- Dialogs -------------------------------------------------------------- */
.legacy-modern dialog { border:1px solid var(--ui-line); border-radius:var(--r-lg); box-shadow:var(--sh-lg); }

/* ---- Generator: two-column working surface -------------------------------- */
.legacy-modern .generator-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.78fr); gap:18px; align-items:start; }
.legacy-modern .generator-form { padding:0; overflow:hidden; }
.legacy-modern .generator-form > section { margin:0; padding:24px 26px; border-bottom:1px solid var(--ui-line); }
.legacy-modern .generator-form > section:last-child { border-bottom:0; }
.legacy-modern .generator-form h2 { margin:0 0 20px; color:var(--ui-ink); font-size:15px; font-weight:800; letter-spacing:-.01em; }
/* Numbered step ribbon above the form */
.legacy-modern .is-generator-page .generator-grid::before {
  content:"1  Rute   ·   2  Penumpang   ·   3  Waktu   ·   4  Periksa hasil";
  grid-column:1 / -1; min-height:46px; padding:13px 18px; display:flex; align-items:center;
  color:var(--ui-ink-2); background:var(--ui-white); border:1px solid var(--ui-line);
  border-radius:var(--r); font-size:13px; font-weight:700; letter-spacing:.01em;
}
.legacy-modern .preview-panel { position:sticky; top:20px; align-self:start; }
.legacy-modern .empty-preview { min-height:320px; display:grid; place-items:center; padding:24px; color:var(--ui-muted); text-align:center; background:var(--ui-soft); border:1px dashed #c3d2dd; border-radius:var(--r); }
.legacy-modern .time-submit::after { content:"Lengkapi maskapai, rute, data penumpang, dan waktu keberangkatan untuk membuat preview."; margin-top:10px; display:block; color:var(--ui-muted); font-size:12.5px; line-height:1.5; }
.legacy-modern .time-submit[data-ready="true"]::after { content:"Data utama sudah lengkap — buat preview untuk pemeriksaan akhir."; color:var(--ui-success); font-weight:600; }

.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.mobile-nav-toggle,.mobile-nav-backdrop { display:none; }

/* ============================ Responsive ================================== */
@media (max-width:960px) {
  .legacy-modern .main { padding-inline:22px; }
  .legacy-modern .sidebar { width:214px; }
  .legacy-modern .generator-grid { grid-template-columns:1fr; }
  .legacy-modern .preview-panel { position:static; }
}

@media (min-width:701px) and (max-width:900px) {
  .legacy-modern table,.legacy-modern tbody,.legacy-modern tr,.legacy-modern td { display:block; width:100%; }
  .legacy-modern thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .legacy-modern tbody { display:grid; gap:12px; }
  .legacy-modern tbody tr { padding:12px 14px; background:var(--ui-white); border:1px solid var(--ui-line); border-radius:var(--r); }
  .legacy-modern tbody tr:hover { background:var(--ui-white); }
  .legacy-modern tbody td { min-height:36px; padding:8px 0; display:grid; grid-template-columns:minmax(130px,34%) minmax(0,1fr); gap:12px; border-bottom:1px solid var(--ui-line-2); }
  .legacy-modern tbody td:last-child { border-bottom:0; }
  .legacy-modern tbody td::before { content:attr(data-label); color:var(--ui-faint); font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
  .legacy-modern tbody td .actions { display:flex; flex-wrap:wrap; }
}

@media (max-width:700px) {
  .legacy-modern .main { margin-left:0; padding:82px 15px 48px; }
  .legacy-modern .sidebar { position:fixed; z-index:120; inset:0 auto 0 0; width:min(290px,86vw); height:100dvh; padding-top:22px; overflow:auto; transform:translateX(-102%); transition:transform .22s var(--ease); box-shadow:var(--sh-lg); }
  .legacy-modern .sidebar.sidebar--open { transform:translateX(0); }
  .legacy-modern .sidebar-foot { position:static; margin-top:24px; }
  .legacy-modern .auth-session-control { position:static; width:auto; margin-top:16px; }
  .mobile-nav-toggle { position:fixed; z-index:110; top:13px; left:14px; min-width:92px; min-height:46px; padding:8px 13px; display:flex; align-items:center; justify-content:center; gap:8px; color:#fff; background:var(--ui-navy); border:0; border-radius:11px; box-shadow:var(--sh); font-weight:700; }
  .mobile-nav-toggle span:first-child { font-size:17px; line-height:1; }
  .mobile-nav-backdrop { position:fixed; z-index:115; inset:0; display:block; background:rgba(8,25,36,.5); border:0; backdrop-filter:blur(2px); }
  .mobile-nav-backdrop[hidden] { display:none; }
  .global-overview-link { z-index:125; top:100px; left:26px; width:min(236px,calc(86vw - 54px)); display:none; }
  body.mobile-nav-open .global-overview-link { display:flex; }
  .legacy-modern .topbar { flex-direction:column; align-items:stretch; margin-bottom:20px; gap:12px; }
  .legacy-modern .topbar h1 { font-size:26px; }
  .legacy-modern .topbar > .button { align-self:flex-start; }
  .legacy-modern .panel { padding:16px 14px; }
  .legacy-modern .entity-header { gap:14px; }
  .legacy-modern .entity-header,.legacy-modern .inline-actions { align-items:stretch; }
  .legacy-modern .entity-header > .inline-actions .button { width:100%; }
  .legacy-modern .generator-form > section { padding:20px 16px; }
  .legacy-modern .form-pair,.legacy-modern .time-fields { grid-template-columns:1fr; }
  .legacy-modern .is-generator-page .generator-grid::before { min-height:auto; padding:12px 14px; line-height:1.9; flex-wrap:wrap; }
  .legacy-modern table,.legacy-modern tbody,.legacy-modern tr,.legacy-modern td { display:block; width:100%; }
  .legacy-modern thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .legacy-modern tbody { display:grid; gap:12px; }
  .legacy-modern tbody tr { padding:12px 14px; background:var(--ui-white); border:1px solid var(--ui-line); border-radius:var(--r); }
  .legacy-modern tbody tr:hover { background:var(--ui-white); }
  .legacy-modern tbody td { min-height:36px; padding:8px 0; display:grid; grid-template-columns:minmax(102px,38%) minmax(0,1fr); align-items:start; gap:12px; border-bottom:1px solid var(--ui-line-2); text-align:left; overflow-wrap:anywhere; }
  .legacy-modern tbody td:last-child { border-bottom:0; }
  .legacy-modern tbody td::before { content:attr(data-label); color:var(--ui-faint); font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
  .legacy-modern tbody td .actions { display:grid; grid-template-columns:1fr; }
  .legacy-modern tbody td .actions .button { width:100%; }
  .legacy-modern .pagination { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .legacy-modern .pagination > span { grid-column:1/-1; grid-row:1; text-align:center; }
  .legacy-modern .pagination .button { width:100%; }
}

@media (prefers-reduced-motion:reduce) { .legacy-modern *,.legacy-modern *::before,.legacy-modern *::after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }