/* ==========================================================================
   05 JEMBATAN — rupa iOS untuk kelas lama.
   --------------------------------------------------------------------------
   Halaman yang belum dibangun ulang di views/v2 masih memakai kelas lama
   (.card, .btn, .table, .form-control, .topbar, .stat-card, .badge, .alert).
   Berkas ini memberi kelas-kelas itu bahasa visual baru supaya tidak ada
   halaman yang tampil dengan identitas lama. Struktur, id, dan nama kelas
   yang dibaca JavaScript tidak disentuh.
   Lingkup: hanya di dalam .ios-app (pratinjau).
   ========================================================================== */

/* ---------- Judul halaman lama -> navigation bar judul besar ---------- */
.ios-app .topbar {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--sp-4); flex-wrap: wrap;
    margin: 0 0 var(--sp-6);
    padding: 0;
    background: transparent; border: 0; box-shadow: none;
}
.ios-app .topbar h1 {
    font-size: var(--fs-large); font-weight: 700; letter-spacing: -.028em; line-height: 1.12;
    margin: 0; color: var(--ios-ink);
}
.ios-app .topbar .lead { font-size: var(--fs-callout); color: var(--ios-ink-3); margin-top: 6px; }
.ios-app .topbar > div:first-child { min-width: 0; flex: 1 1 260px; }

/* ---------- Kartu ---------- */
.ios-app :is(.card, .chart-box, .msx-card, .lp-kartu, .kotak) {
    background: var(--glass-tint-bg);
    -webkit-backdrop-filter: var(--glass-tint-blur);
    backdrop-filter: var(--glass-tint-blur);
    border: .5px solid var(--glass-line);
    border-radius: var(--r-xl);
    box-shadow: var(--glass-hi), var(--sh-2);
    color: var(--ios-ink);
}
.ios-app .card { padding: var(--sp-5); }
.ios-app :is(.card, .chart-box) h2, .ios-app :is(.card, .chart-box) h3 { letter-spacing: -.017em; }

/* ---------- Kartu statistik -> widget ---------- */
.ios-app .stats-grid { gap: var(--sp-3); }
.ios-app .stat-card {
    background: var(--glass-tint-bg);
    -webkit-backdrop-filter: var(--glass-tint-blur);
    backdrop-filter: var(--glass-tint-blur);
    border: .5px solid var(--glass-line);
    border-radius: var(--r-xl);
    box-shadow: var(--glass-hi), var(--sh-2);
    padding: 16px;
}
.ios-app .stat-card:hover { transform: translateY(-2px); border-color: var(--glass-line); box-shadow: var(--glass-hi), var(--sh-3); }
.ios-app .stat-card .label { font-size: var(--fs-foot); color: var(--ios-ink-2); font-weight: 600; text-transform: none; letter-spacing: 0; }
.ios-app .stat-card .value { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.ios-app .stat-card .icon:not(.kpi-ico) {
    border-radius: 23%;
    background: var(--tl-sage); color: var(--tl-sage-ink);
    box-shadow: inset 0 0 0 .5px var(--tl-tepi), var(--tl-bayang);
}
.ios-app .stat-card .icon.orange, .ios-app .stat-card .icon.purple { background: var(--tl-hangat); color: var(--tl-hangat-ink); }
.ios-app .stat-card .icon.red { background: var(--tl-hangat); color: var(--tl-merah-ink); }
.ios-app .stat-card .icon.blue { background: var(--tl-biru); color: var(--tl-biru-ink); }
.ios-app .stat-card .icon.green { background: var(--tl-sage); color: var(--tl-sage-ink); }

/* ---------- Tombol ---------- */
.ios-app .btn {
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--r-md);
    border: 0;
    background: var(--ios-gray-bg);
    color: var(--ios-ink);
    font: 600 var(--fs-callout)/1.1 var(--font);
    letter-spacing: -.01em;
    box-shadow: none;
    gap: 8px;
    transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast), background-color var(--t-base);
}
.ios-app .btn:hover { filter: brightness(1.04); border-color: transparent; box-shadow: none; }
.ios-app .btn:active { transform: scale(.96); filter: brightness(.94); }
.ios-app .btn[disabled] { opacity: .42; }
.ios-app .btn-primary { background: var(--ios-emerald); color: var(--ios-on-accent); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--ios-emerald) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22); }
.ios-app .btn-primary:hover { background: var(--ios-emerald); color: var(--ios-on-accent); }
.ios-app .btn-danger { background: var(--ios-red); color: #fff; }
.ios-app .btn-success { background: var(--ios-green); color: #fff; }
.ios-app :is(.btn-outline-primary, .btn-outline-secondary) { background: var(--ios-emerald-soft); color: var(--ios-emerald-2); border: 0; }
.ios-app .btn-outline-danger { background: var(--ios-red-bg); color: var(--ios-red-ink); border: 0; }
.ios-app .btn-sm { min-height: 34px; padding: 0 12px; font-size: var(--fs-sub); border-radius: var(--r-sm); }
.ios-app .btn-lg { min-height: 54px; font-size: var(--fs-headline); border-radius: var(--r-lg); }
.ios-app .btn-icon { width: 40px; padding: 0; justify-content: center; border-radius: 50%; }
.ios-app .btn-white { background: rgba(255, 255, 255, .92); color: var(--ios-emerald-2); }

/* ---------- Form ---------- */
.ios-app .form-label { font-size: var(--fs-foot); font-weight: 600; color: var(--ios-ink-2); margin-bottom: 6px; }
.ios-app :is(.form-control, .form-select) {
    min-height: 44px;
    border-radius: var(--r-md);
    border: .5px solid var(--ios-sep);
    background-color: var(--glass-row-bg);
    color: var(--ios-ink);
    font-family: var(--font);
    font-size: var(--fs-body);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
}
.ios-app :is(.form-control, .form-select):focus { border-color: var(--ios-emerald); box-shadow: var(--sh-focus); }
.ios-app .form-select {
    -webkit-appearance: none; appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a908b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9l5-5 5 5M7 15l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
.ios-app textarea.form-control { min-height: 90px; }
.ios-app .form-control-sm { min-height: 36px; font-size: var(--fs-sub); }
.ios-app input[type="checkbox"].form-check-input,
.ios-app .form-check-input[type="checkbox"] { accent-color: var(--ios-emerald); width: 20px; height: 20px; }

/* ---------- Tabel lama -> daftar iOS padat ---------- */
.ios-app .table-wrap,
.ios-app .lp-tabel-wadah,
.ios-app .tbl-scroll {
    background: var(--glass-row-bg);
    -webkit-backdrop-filter: var(--glass-tint-blur);
    backdrop-filter: var(--glass-tint-blur);
    border: .5px solid var(--glass-line);
    border-radius: var(--r-lg);
    box-shadow: var(--glass-hi), var(--sh-1);
}
.ios-app .table th,
.ios-app .lp-tabel th {
    background: transparent;
    font-size: var(--fs-cap);
    font-weight: 600;
    color: var(--ios-ink-3);
    text-transform: none;
    letter-spacing: 0;
    border-bottom: .5px solid var(--ios-sep);
}
.ios-app .table td,
.ios-app .lp-tabel td { border-bottom: .5px solid var(--ios-sep); }
.ios-app .table tbody tr:hover,
.ios-app .lp-tabel tbody tr:hover { background: color-mix(in srgb, var(--ios-ink) 3.5%, transparent); }
.ios-app .angka, .ios-app .num, .ios-app .nw { font-variant-numeric: tabular-nums; }

/* ---------- Lencana ---------- */
.ios-app .badge {
    border-radius: 7px;
    font: 600 var(--fs-cap)/1 var(--font);
    letter-spacing: 0;
    text-transform: none;
    padding: 5px 8px;
    border: 0;
}
.ios-app .badge-gray { background: var(--ios-gray-bg); color: var(--ios-gray-ink); border: 0; }

/* ---------- Peringatan ---------- */
.ios-app .alert {
    border-radius: var(--r-md);
    border: .5px solid var(--glass-line);
    background: var(--glass-row-bg);
    box-shadow: var(--glass-hi), var(--sh-1);
    color: var(--ios-ink);
    padding: 12px 14px 12px 44px;
    position: relative;
    font-size: var(--fs-sub);
}
.ios-app .alert::before {
    content: "";
    position: absolute; left: 12px; top: 12px;
    width: 22px; height: 22px; border-radius: 7px;
    background: var(--tile-blue);
    -webkit-mask: none;
}
.ios-app .alert-success::before { background: var(--tile-emerald); }
.ios-app .alert-danger::before { background: var(--tile-red); }
.ios-app .alert-warning::before { background: var(--tile-orange); }
.ios-app .alert-danger { color: var(--ios-red-ink); }
.ios-app .alert-success { color: var(--ios-green-ink); }

/* ---------- Tombol cepat lama ---------- */
.ios-app .quick-btn {
    background: var(--glass-tint-bg);
    -webkit-backdrop-filter: var(--glass-tint-blur);
    backdrop-filter: var(--glass-tint-blur);
    border: .5px solid var(--glass-line);
    border-radius: var(--r-lg);
    box-shadow: var(--glass-hi), var(--sh-1);
}
.ios-app .quick-btn .qi { border-radius: 23%; background: var(--tl-sage); color: var(--tl-sage-ink); box-shadow: inset 0 0 0 .5px var(--tl-tepi); }

/* ---------- Rincian lipat (details) ---------- */
.ios-app details > summary { cursor: pointer; }

/* ---------- Teks bantu lama ---------- */
.ios-app .text-muted, .ios-app .muted { color: var(--ios-ink-3) !important; }

/* ---------- "Cara pakai": lembar mengambang di semua halaman ----------
   bantuan.js memindahkan panel ke <body> dan menambahkan latar redup +
   tombol Tutup. Halaman tidak lagi terdorong ke bawah saat panel dibuka. */
.ios-app .bantuan-redup {
    position: fixed; inset: 0; z-index: calc(var(--z-sheet) - 1);
    background: var(--glass-scrim);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ios-app > .bantuan-panel {
    position: fixed; z-index: var(--z-sheet);
    /* Ditengahkan dengan properti `translate` (bukan `transform`): animasi
       masuk memakai `transform`, dan dulu menimpa translate(-50%,-50%) sehingga
       lembar muncul di kanan-bawah lalu "meloncat" ke tengah begitu animasi
       selesai. `translate` dan `transform` digabung peramban, tidak bertabrakan. */
    top: 50%; left: 50%; translate: -50% -50%;
    width: min(560px, calc(100vw - 32px));
    max-height: min(80dvh, 720px); overflow-y: auto;
    margin: 0; padding: 20px 22px;
    border-radius: var(--r-2xl);
    background: var(--glass-overlay-bg);
    -webkit-backdrop-filter: var(--glass-overlay-blur); backdrop-filter: var(--glass-overlay-blur);
    border: .5px solid var(--glass-line);
    box-shadow: var(--sh-4);
    color: var(--ios-ink);
    animation: ios-modal-masuk var(--t-slow) var(--ease-spring);
}
.ios-app > .bantuan-panel[hidden] { display: none; }
.ios-app > .bantuan-panel:focus { outline: none; }
.ios-app .bantuan-tutup {
    float: right; margin: -6px -6px 6px 12px;
    min-height: 34px; padding: 0 14px;
    border: 0; border-radius: var(--r-pill);
    background: var(--ios-gray-bg); color: var(--ios-ink);
    font: 600 var(--fs-sub)/1 var(--font);
}
.ios-app .bantuan-tutup:hover { background: var(--ios-emerald-soft); color: var(--ios-emerald-2); }
@media (max-width: 767px) {
    .ios-app > .bantuan-panel {
        top: auto; bottom: 0; left: 0; right: 0; margin: 0; transform: none; translate: none;
        width: 100%; max-height: 85dvh;
        border-radius: 30px 30px 0 0;
        padding-bottom: calc(20px + var(--safe-b));
        animation: ios-sheet-naik var(--t-slow) var(--ease-out);
    }
}