/* ==========================================================================
   Lacak Dumas — gaya tambahan panel Filament (tanpa build Vite).
   Warna memakai variabel palet Filament (--primary-*, --gray-*, dst.),
   sehingga otomatis mengikuti mode terang/gelap.
   ========================================================================== */

.ld-mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; letter-spacing: .01em; }
.ld-muted { color: var(--gray-500); }
.ld-hint { font-size: .75rem; color: var(--gray-500); }

/* ---------- Alur penanganan (pipeline) ---------- */
.ld-pipe-wrap { overflow-x: auto; padding-bottom: .25rem; }
.ld-pipe { display: grid; grid-template-columns: repeat(7, minmax(112px, 1fr)) 1.25rem repeat(3, minmax(104px, 1fr)); gap: .375rem; min-width: 1000px; }
.ld-stage { display: grid; gap: .25rem; padding: .625rem .625rem .5625rem; border-radius: .5rem; border: 1px solid var(--gray-200); background: #fff; text-decoration: none; color: inherit; transition: border-color .15s; }
.ld-stage:hover { border-color: var(--primary-500); }
.ld-stage--out { border-style: dashed; }
.ld-stage__idx { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .6875rem; color: var(--gray-500); }
.ld-stage__nm { font-size: .8125rem; font-weight: 600; line-height: 1.25; }
.ld-stage__c { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ld-stage__flags { display: flex; flex-wrap: wrap; gap: .25rem; min-height: 1.125rem; }
.ld-fork { display: flex; align-items: center; justify-content: center; color: var(--gray-400); }
.ld-flag { font-size: .6875rem; font-weight: 600; padding: .0625rem .375rem; border-radius: 999px; white-space: nowrap; }
.ld-flag--crit { background: var(--danger-50); color: var(--danger-700); }
.ld-flag--warn { background: var(--warning-50); color: var(--warning-700); }
.dark .ld-stage { background: var(--gray-900); border-color: var(--gray-700); }
.dark .ld-flag--crit { background: color-mix(in oklab, var(--danger-500) 18%, transparent); color: var(--danger-300); }
.dark .ld-flag--warn { background: color-mix(in oklab, var(--warning-500) 18%, transparent); color: var(--warning-300); }

/* ---------- Progres tersegmen (kolom tabel) ---------- */
.ld-segs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; width: 7.5rem; }
.ld-segs i { height: 6px; border-radius: 1px; background: var(--gray-200); }
.ld-segs i.d { background: var(--primary-600); }
.ld-segs i.c { background: var(--primary-600); opacity: .35; }
.ld-segs.fin i { background: var(--success-600); }
.dark .ld-segs i { background: var(--gray-700); }
.dark .ld-segs i.d { background: var(--primary-400); }
.dark .ld-segs.fin i { background: var(--success-500); }

/* ---------- Batas waktu ---------- */
.ld-deadline { display: grid; gap: .375rem; }
.ld-deadline__top { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.ld-track { position: relative; height: .5rem; border-radius: .25rem; background: var(--gray-100); overflow: hidden; }
.ld-track b { position: absolute; inset: 0 auto 0 0; border-radius: .25rem; }
.ld-track b.aman, .ld-track b.selesai { background: var(--success-600); }
.ld-track b.waspada { background: var(--warning-500); }
.ld-track b.lewat, .ld-track b.selesai_terlambat { background: var(--danger-600); }
.ld-scale { display: flex; justify-content: space-between; font-size: .6875rem; color: var(--gray-500); font-family: "IBM Plex Mono", ui-monospace, monospace; }
.dark .ld-track { background: var(--gray-800); }
.ld-due { font-weight: 600; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.ld-due.aman, .ld-due.selesai { color: var(--success-700); }
.ld-due.waspada { color: var(--warning-700); }
.ld-due.lewat, .ld-due.selesai_terlambat { color: var(--danger-700); }
.dark .ld-due.aman, .dark .ld-due.selesai { color: var(--success-400); }
.dark .ld-due.waspada { color: var(--warning-400); }
.dark .ld-due.lewat, .dark .ld-due.selesai_terlambat { color: var(--danger-400); }

/* ---------- Stepper tahap + checklist ---------- */
.ld-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.ld-step { position: relative; display: grid; grid-template-columns: 1.75rem 1fr; column-gap: .75rem; }
.ld-step::before { content: ""; position: absolute; left: calc(.875rem - 1px); top: 1.75rem; bottom: 0; width: 2px; background: var(--gray-200); }
.ld-step:last-child::before { display: none; }
.ld-step--done::before { background: var(--primary-600); }
.ld-dot { z-index: 1; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; border: 2px solid var(--gray-300); background: var(--gray-50); color: var(--gray-500); font: 500 .71875rem/1 "IBM Plex Mono", ui-monospace, monospace; }
.ld-step--done .ld-dot { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
.ld-step--cur .ld-dot { border-color: var(--primary-600); color: var(--primary-700); background: var(--primary-50); }
.ld-step__body { padding: .1875rem 0 1rem; min-width: 0; }
.ld-step__head { display: flex; justify-content: space-between; gap: .625rem; flex-wrap: wrap; align-items: baseline; }
.ld-step__name { font-weight: 600; }
.ld-step--todo .ld-step__name { color: var(--gray-500); font-weight: 500; }
.ld-step__when { font-size: .75rem; color: var(--gray-500); }
.ld-box { margin-top: .5rem; display: grid; gap: .5rem; padding: .625rem .75rem; border-radius: .5rem; border: 1px solid var(--gray-200); background: #fff; }
.ld-chk { display: flex; align-items: flex-start; gap: .625rem; font-size: .875rem; cursor: pointer; }
.ld-chk input { margin-top: .1875rem; width: 1rem; height: 1rem; accent-color: var(--primary-600); flex: none; }
.ld-chk--ro { cursor: default; }
.ld-chk--done span { color: var(--gray-500); }
.ld-lock { font-size: .75rem; color: var(--gray-600); background: var(--gray-100); border-radius: .375rem; padding: .4375rem .625rem; }
.ld-note { width: 100%; font: inherit; font-size: .875rem; border-radius: .375rem; border: 1px solid var(--gray-300); padding: .4375rem .5625rem; background: var(--gray-50); color: inherit; }
.ld-box__foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; border-top: 1px dashed var(--gray-200); padding-top: .5rem; }
.dark .ld-step::before { background: var(--gray-700); }
.dark .ld-step--done::before { background: var(--primary-500); }
.dark .ld-dot { background: var(--gray-900); border-color: var(--gray-600); }
.dark .ld-step--done .ld-dot { background: var(--primary-500); border-color: var(--primary-500); color: var(--gray-950); }
.dark .ld-step--cur .ld-dot { background: color-mix(in oklab, var(--primary-500) 20%, transparent); color: var(--primary-300); border-color: var(--primary-400); }
.dark .ld-box { background: var(--gray-900); border-color: var(--gray-700); }
.dark .ld-lock { background: var(--gray-800); color: var(--gray-300); }
.dark .ld-note { background: var(--gray-950); border-color: var(--gray-700); }
.dark .ld-box__foot { border-color: var(--gray-700); }

/* ---------- Riwayat aktivitas ---------- */
.ld-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .8125rem; }
.ld-log li { display: grid; grid-template-columns: auto 1fr; gap: .625rem; }
.ld-log time { color: var(--gray-500); font: .71875rem/1.5 "IBM Plex Mono", ui-monospace, monospace; white-space: nowrap; }

/* ---------- Gelembung WhatsApp ---------- */
.ld-wa { background: #EDE7DE; border-radius: .5rem; padding: .625rem; }
.ld-wa__bubble { margin-left: auto; max-width: 30rem; white-space: pre-wrap; background: #DCF5D0; color: #12301B; border-radius: .5rem .5rem .125rem .5rem; padding: .5rem .625rem .375rem; font-size: .8125rem; }
.ld-wa__time { display: block; text-align: right; font-size: .65625rem; opacity: .7; margin-top: .125rem; }
.dark .ld-wa { background: #121A17; }
.dark .ld-wa__bubble { background: #1D3B2A; color: #DDEFE2; }

/* ---------- Rekap unit ---------- */
.ld-table { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.ld-table th { text-align: left; font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-500); font-weight: 600; padding: .625rem .75rem; border-bottom: 1px solid var(--gray-200); }
.ld-table td { padding: .625rem .75rem; border-bottom: 1px solid var(--gray-100); }
.ld-table tr:last-child td { border-bottom: 0; }
.ld-table .num { text-align: right; }
.dark .ld-table th { border-color: var(--gray-700); }
.dark .ld-table td { border-color: var(--gray-800); }