/* PrettyFast Central — kulit antrian v2 × struktur design language POS.
 *
 * Palet, skala tipe, dan spacing hidup di config Tailwind pada
 * views/templates/layouts/base.html (lihat komentar TOKEN di sana untuk
 * provenance per nilai + catatan konflik). Berkas ini hanya memuat yang
 * tidak bisa diekspresikan utilitas Tailwind: kelas ikon SVG, bahasa
 * hairline, dan state turunan yang tak terjangkau varian `peer-*`.
 */

:root {
    /* v2: hairline topbar rgba(0,0,0,.06) (baris 122); brand #3a561d (16). */
    --pf-hairline: rgba(0, 0, 0, 0.08);
    --pf-hairline-soft: rgba(0, 0, 0, 0.04);
    --pf-primary: #3a561d;
    --pf-primary-deep: #2c421a;
}

/* Ikon SVG (sprite di layouts/_icons.html) ------------------------------
 * Pengganti font Material Symbols — hukum nol-emoji: semua ikon = SVG
 * inline stroke 1.8 currentColor. Ukuran ikut font-size (1em), jadi kelas
 * text-[18px] dst. pada elemen ikon tetap bekerja tanpa diubah. */

.ic {
    width: 1em;
    height: 1em;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -0.15em;
}

/* Kedalaman = lapisan tonal + hairline — shadow maksimum 1 level halus
 * (design language); struktur permukaan tetap tanpa shadow. */

.hairline-border {
    border: 1px solid var(--pf-hairline);
}

.hairline-border-focus:focus-within {
    border-color: var(--pf-primary);
}

.pf-dot-grid {
    background-image: radial-gradient(circle, #ffffff 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Angka tabular menjaga uang & hitungan sejajar di kolom. */
.font-data-tabular,
table td,
table th {
    font-variant-numeric: tabular-nums;
}

/* Pemilih cabang ----------------------------------------------------------
 * `peer-checked:` terkompilasi jadi `.peer:checked ~ &`, kombinator saudara,
 * jadi tidak bisa menata apa pun di dalam kartu. Aturan ini mengurus turunannya.
 * Warna terpilih = pola selected v2: bg #eef3e8 + aksen brand (536/544).
 */

.peer:checked ~ .pf-branch-card {
    background-color: #eef3e8;
    border-left: 4px solid var(--pf-primary);
    padding-left: calc(1rem - 3px);
}

.peer:checked ~ .pf-branch-card .pf-branch-icon {
    background-color: rgba(58, 86, 29, 0.1);
    color: var(--pf-primary);
}

.peer:checked ~ .pf-branch-card .pf-branch-ring {
    border-color: var(--pf-primary);
}

.peer:checked ~ .pf-branch-card .pf-branch-dot {
    opacity: 1;
}

.peer:focus-visible ~ .pf-branch-card {
    outline: 2px solid var(--pf-primary);
    outline-offset: 2px;
}

/* Checklist aturan sandi --------------------------------------------------- */

[data-pf-rule] {
    transition: color 150ms ease;
}

[data-pf-rule][data-met="true"] {
    color: var(--pf-primary);
}

[data-pf-rule][data-met="true"] .ic {
    stroke-width: 2.4;
}

/* Gerak -------------------------------------------------------------------- */

@keyframes pf-fade-in-up {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pf-fade-in-up {
    animation: pf-fade-in-up 0.3s ease-out;
}

.pf-flash-item {
    animation: pf-fade-in-up 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}