/* Halaman /Tracking — tambahan di atas pengadaan.css.
   Kerangka, grid 12 lajur (.content), tab, tombol, isian, dan token datang dari
   pengadaan.css dan _Layout. Di sini hanya susunan pencarian dan daftar tahapan.
   Tanpa hex dan tanpa teks di bawah 12 px. */

/* Mengikuti 12 lajur .content lewat subgrid: pencarian 5 lajur kiri, hasil
   7 lajur kanan. Pencarian ikut menempel saat daftar tahapan panjang. */
.tracking {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
    min-width: 0;
}

/* Header layout 60px + jarak 28px. */
.tracking-search {
    position: sticky;
    top: 88px;
    grid-column: span 5;
    min-width: 0;
    /* Ruang ekstra dari kolom hasil, di atas gap 20px grid. */
    padding-right: 20px;
}

/* Sama dengan .page-header h1 di /pengadaan. */
.tracking-search h1 {
    max-width: 20ch;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.tracking-lede {
    max-width: 44ch;
    margin-top: 6px;
    color: var(--muted-foreground);
    font-size: 13px;
    line-height: 1.5;
}

/* .tabs mengisi 12 lajur di halaman lain; di kolom pencarian selebar isinya. */
.tracking-modes {
    display: inline-flex;
    margin-top: 24px;
}

.tracking-modes .tab[aria-pressed="true"] {
    background: var(--card);
    color: var(--foreground);
    box-shadow: var(--shadow-xs);
}

.tracking-form { margin-top: 20px; }

.tracking-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
}

.tracking-input-row { display: flex; gap: 8px; }

.tracking-input { font-variant-numeric: tabular-nums; }

.tracking-input::placeholder { color: var(--muted-foreground); }
.tracking-input::-webkit-search-cancel-button { cursor: pointer; }

.tracking-submit {
    flex: none;
    gap: 6px;
    padding: 0 16px;
}

.tracking-submit .icon { width: 15px; height: 15px; }
.tracking-submit:disabled { cursor: progress; }

.tracking-feedback {
    margin-top: 10px;
    color: var(--muted-foreground);
    font-size: 13px;
    line-height: 1.5;
}

.tracking-feedback[data-state="error"] { color: var(--destructive-strong); }

.tracking-footnote {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 12px;
}

.tracking-output {
    grid-column: span 7;
    display: grid;
    gap: 16px;
    min-width: 0;
}

/* Kartu ringkasan hasil */
.tracking-result { padding: 20px; scroll-margin-top: 76px; }

.tracking-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.tracking-result-kind {
    display: block;
    color: var(--muted-foreground);
    font-size: 12px;
}

.tracking-result-number {
    margin-top: 2px;
    overflow-wrap: anywhere;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.tracking-badge {
    flex: none;
    max-width: 55%;
    margin-top: 2px;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
}

.tracking-result-title {
    max-width: 60ch;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
}

.tracking-details { margin: 16px 0 0; }

.tracking-details > div {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--border);
}

.tracking-details dt { color: var(--muted-foreground); font-size: 13px; }

.tracking-details dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 13px;
    line-height: 1.5;
}

.tracking-proclist-count {
    margin-bottom: 12px;
    color: var(--muted-foreground);
    font-size: 13px;
}

.tracking-proclist-prompt { padding: 20px; }
.tracking-proclist-prompt .card-description { margin-top: 8px; line-height: 1.5; }
.tracking-proclist-list { display: grid; gap: 12px; }
.tracking-proclist-card { padding: 20px; }
.tracking-proclist-card .tracking-result-title { margin-top: 10px; }
.tracking-proclist-progress {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
}

.tracking-skeleton { display: none; }

.tracking-result[data-state="loading"] .tracking-result-body { display: none; }

.tracking-result[data-state="loading"] .tracking-skeleton {
    display: grid;
    gap: 12px;
}

.tracking-skeleton span {
    height: 14px;
    border-radius: var(--radius-sm);
    background: var(--muted);
}

.tracking-skeleton span:first-child { width: 38%; height: 22px; }
.tracking-skeleton span:nth-child(2) { width: 92%; }
.tracking-skeleton span:nth-child(3) { width: 64%; }

/* Daftar tahapan: tampil sejak awal, ditandai setelah hasil ditemukan. */
.tracking-stages { padding: 20px; }

.tracking-stages-head { margin-bottom: 14px; }
.tracking-stages-head .card-description { font-size: 12px; line-height: 1.5; }
.tracking-stages[data-result="stopped"] .card-description { color: var(--destructive-strong); }

.stage-list { margin: 0; padding: 0; list-style: none; }

.stage {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

/* Garis penghubung antar penanda; menebal hitam untuk tahap yang sudah lewat. */
.stage:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 34px;
    bottom: -6px;
    left: 13.5px;
    width: 1px;
    background: var(--border);
}

.stage[data-state="done"]:not(:last-child)::after { background: var(--primary); }

.stage-marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--card);
    color: var(--muted-foreground);
}

.stage-number {
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.stage-check { display: none; width: 14px; height: 14px; }

.stage-name { font-size: 13px; line-height: 1.4; }

.stage-state {
    color: var(--muted-foreground);
    font-size: 12px;
}

.stage[data-state="done"] .stage-marker {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-foreground);
}

.stage[data-state="done"] .stage-number { display: none; }

/* Tanda centang sudah berarti selesai; teksnya tetap untuk pembaca layar. */
.stage[data-state="done"] .stage-state {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.stage[data-state="done"] .stage-check { display: block; }

.stage[data-state="current"] .stage-marker {
    border: 1.5px solid var(--primary);
    color: var(--foreground);
    box-shadow: 0 0 0 4px var(--muted);
}

.stage[data-state="current"] .stage-number { font-weight: 600; }
.stage[data-state="current"] .stage-name { font-weight: 600; }
.stage[data-state="current"] .stage-state { color: var(--foreground); font-weight: 500; }

/* Setelah ada hasil, tahap yang belum dicapai meredup. */
.tracking-stages[data-result]:not([data-result=""]) .stage[data-state="todo"] .stage-name {
    color: var(--muted-foreground);
}

@media (max-width: 960px) {
    .tracking-search,
    .tracking-output { grid-column: 1 / -1; max-width: 640px; }

    .tracking-search { position: static; padding-right: 0; }
}

@media (max-width: 767.98px) {
    .tracking-search h1 { font-size: 24px; }
}

@media (max-width: 480px) {
    .tracking-input-row { flex-direction: column; }
    .tracking-submit { justify-content: center; width: 100%; }
    .tracking-details > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .tracking-result-head { flex-direction: column; gap: 8px; }
    .tracking-badge { max-width: 100%; }
}

/* Satu gerak yang menjawab pencarian: tahap yang lewat terisi berurutan,
   lalu tahap berjalan mendapat cincin. */
@media (prefers-reduced-motion: no-preference) {
    .stage[data-state="done"] .stage-marker {
        animation: stage-fill .28s ease-out calc(var(--i, 0) * 45ms) both;
    }

    .stage[data-state="current"] .stage-marker {
        animation: stage-ring .5s ease-out calc(var(--i, 0) * 45ms) both;
    }

    .tracking-result[data-state="loading"] .tracking-skeleton span {
        animation: tracking-pulse 1.2s ease-in-out infinite;
    }

    @keyframes stage-fill {
        from { border-color: var(--border); background: var(--card); color: var(--muted-foreground); }
    }

    @keyframes stage-ring {
        from { box-shadow: 0 0 0 0 var(--muted); }
    }

    @keyframes tracking-pulse {
        50% { opacity: .55; }
    }
}