/* ==========================================================================
   02 KOMPONEN — tile ikon, tombol, input, daftar iOS, widget, lencana,
   segmented, toggle, tabel ringkas, state kosong/memuat/galat, toast.
   ========================================================================== */

/* ---------- Ikon SVG ---------- */
.ios-ic { width: var(--ic-md); height: var(--ic-md); flex: none; display: inline-block; vertical-align: middle; }
.ios-ic-sm { width: var(--ic-sm); height: var(--ic-sm); }
.ios-ic-xs { width: var(--ic-xs); height: var(--ic-xs); }
.ios-ic-lg { width: var(--ic-lg); height: var(--ic-lg); }

/* Rendering simbol (lihat views/v2/partials/ikon-v2.php untuk peran lapisan).
   Hierarchical (bawaan): lapisan sekunder .s lebih tembus, memberi kedalaman
   tanpa warna tambahan, seperti SF Symbols "hierarchical". Pada ukuran kecil
   dan di atas tombol solid, kembali monochrome supaya tetap tegas. */
.ios-ic { --ic-sekunder: .5; overflow: visible; }
.ios-ic .s { opacity: var(--ic-sekunder); }
.ios-ic--isi { --ic-sekunder: .42; }
.ios-ic-xs,
.ios-ic--mono,
.ios-btn--primary .ios-ic,
.ios-btn--destructive-solid .ios-ic,
.ios-btn--success .ios-ic { --ic-sekunder: 1; }
/* Palette: lapisan sekunder memakai warna kedua (--ic-palet). */
.ios-ic--palet .s { opacity: 1; stroke: var(--ic-palet, var(--ios-ink-3)); }
.ios-ic--palet .f.s[fill] { fill: var(--ic-palet, var(--ios-ink-3)); }
/* Garis miring varian .coret sedikit lebih tebal dari glyph, seperti ".slash". */
.ios-ic-garis-coret { stroke-width: 1.9; }
/* Multicolor status: warna identitas tetap di mana pun simbol tampil. */
.ios-ic--status { --ic-sekunder: 1; }
.ios-ic--sukses { color: var(--ios-green); }
.ios-ic--galat { color: var(--ios-red); }
.ios-ic--peringatan { color: var(--ios-amber, #f0a00c); }
.ios-ic--info { color: var(--ios-blue); }

/* ---------- Tile ikon (gaya ikon aplikasi iOS, soft monochrome) ----------
   Empat keluarga nada saja, bukan satu warna per modul:
     sage  (emerald, lime, teal)               glyph hijau tua
     biru  (blue, indigo)                      glyph biru redup
     hangat(orange, yellow, pink, purple, red) glyph arang; red = aksen merah redup
     abu   (graphite, ink)                     glyph arang
   Nama kelas warna tetap sama supaya pemetaan modul tidak berubah.
   Material: latar solid dengan gradien tonal sangat tipis, kilau atas
   lembut, tepi dalam 0.5px, dan bayangan netral pendek. Tanpa glow, tanpa
   bayangan berwarna, tanpa gradien multiwarna. */
:root {
    --tl-sage: #E8EEE9;  --tl-sage-ink: #2F5A44;
    --tl-biru: #E9EFF5;  --tl-biru-ink: #3C5A78;
    --tl-hangat: #F1EEE8; --tl-hangat-ink: #3A3833;
    --tl-abu: #F1F2F0;   --tl-abu-ink: #2E322F;
    --tl-merah-ink: #9A4A42;
    --tl-tepi: rgba(20, 24, 22, .07);
    --tl-kilau: rgba(255, 255, 255, .7);
    --tl-bayang: 0 .5px 1px rgba(20, 24, 22, .06), 0 1px 3px rgba(20, 24, 22, .06);
}
html[data-mode="dark"] {
    --tl-sage: #26352E;  --tl-sage-ink: #CFE3D6;
    --tl-biru: #283541;  --tl-biru-ink: #CAD9E8;
    --tl-hangat: #34312C; --tl-hangat-ink: #EDE7DD;
    --tl-abu: #292D2B;   --tl-abu-ink: #E9ECEA;
    --tl-merah-ink: #E7B3AC;
    --tl-tepi: rgba(255, 255, 255, .08);
    --tl-kilau: rgba(255, 255, 255, .07);
    --tl-bayang: 0 1px 2px rgba(0, 0, 0, .28);
}
.ios-tile {
    --tile: var(--tl-sage);
    --tile-ink: var(--tl-sage-ink);
    --size: var(--tile-md);
    position: relative;
    width: var(--size);
    height: var(--size);
    flex: none;
    display: inline-grid;
    place-items: center;
    border-radius: var(--r-tile);
    background: var(--tile);
    color: var(--tile-ink);
    box-shadow: var(--tl-bayang);
    overflow: hidden;
    isolation: isolate;
}
.ios-tile::before {      /* gradien tonal tipis + kilau atas lembut */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--tl-kilau), rgba(255, 255, 255, 0) 46%);
    opacity: .55;
    pointer-events: none;
    z-index: -1;
}
.ios-tile::after {       /* tepi dalam halus */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 .5px var(--tl-tepi);
    pointer-events: none;
}
.ios-tile .ios-ic {
    width: 58%;
    height: 58%;
    position: relative;
    stroke-width: 2;
    --ic-sekunder: .45;
}
.ios-tile--sm { --size: var(--tile-sm); }
.ios-tile--lg { --size: var(--tile-lg); box-shadow: var(--tl-bayang), 0 6px 14px -8px rgba(20, 24, 22, .16); }
.ios-tile--lg .ios-ic { stroke-width: 1.85; }
.ios-tile--emerald, .ios-tile--lime, .ios-tile--teal { --tile: var(--tl-sage); --tile-ink: var(--tl-sage-ink); }
.ios-tile--blue, .ios-tile--indigo { --tile: var(--tl-biru); --tile-ink: var(--tl-biru-ink); }
.ios-tile--orange, .ios-tile--yellow, .ios-tile--pink, .ios-tile--purple { --tile: var(--tl-hangat); --tile-ink: var(--tl-hangat-ink); }
.ios-tile--red { --tile: var(--tl-hangat); --tile-ink: var(--tl-merah-ink); }
.ios-tile--graphite, .ios-tile--ink { --tile: var(--tl-abu); --tile-ink: var(--tl-abu-ink); }
/* Di atas pulau hitam (Dynamic Island) tile selalu memakai nada gelap. */
.ios-island .ios-tile { --tl-sage: #26352E; --tl-sage-ink: #CFE3D6; --tl-biru: #283541; --tl-biru-ink: #CAD9E8; --tl-hangat: #34312C; --tl-hangat-ink: #EDE7DD; --tl-abu: #292D2B; --tl-abu-ink: #E9ECEA; --tl-merah-ink: #E7B3AC; --tl-tepi: rgba(255, 255, 255, .08); --tl-kilau: rgba(255, 255, 255, .07); }
/* Tile berwarna lembut (untuk baris data: tidak berteriak) */
.ios-tile--soft { background: var(--tl-sage); color: var(--tl-sage-ink); box-shadow: none; }
.ios-tile--soft::before, .ios-tile--soft::after { display: none; }
.ios-tile--soft .ios-ic { filter: none; }

/* ---------- Avatar dan thumbnail ---------- */
.ios-avatar {
    --size: 40px;
    width: var(--size); height: var(--size);
    flex: none;
    border-radius: 50%;
    display: inline-grid; place-items: center;
    font-weight: 600; font-size: calc(var(--size) * .38);
    letter-spacing: -.01em;
    color: #fff;
    background: var(--tile-graphite);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
    overflow: hidden;
    text-transform: uppercase;
}
.ios-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ios-thumb {
    --size: 44px;
    width: var(--size); height: var(--size);
    flex: none;
    border-radius: var(--r-sm);
    background: var(--ios-gray-bg);
    display: inline-grid; place-items: center;
    overflow: hidden;
    color: var(--ios-ink-3);
    font-weight: 600; font-size: calc(var(--size) * .34);
    border: .5px solid var(--ios-sep);
}
.ios-thumb img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }

/* ==========================================================================
   TOMBOL — 10 varian (master prompt bag. 15).
   ========================================================================== */
.ios-btn {
    --bg: var(--ios-gray-bg);
    --fg: var(--ios-ink);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--r-md);
    background: var(--bg);
    color: var(--fg);
    font: 600 var(--fs-callout)/1.1 var(--font);
    letter-spacing: -.01em;
    text-decoration: none !important;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast), background-color var(--t-base), box-shadow var(--t-base), opacity var(--t-base);
    user-select: none;
}
.ios-btn:hover { filter: brightness(1.04); }
.ios-btn:active { transform: scale(.96); filter: brightness(.94); }
.ios-btn[disabled], .ios-btn[aria-disabled="true"] { opacity: .42; pointer-events: none; }
.ios-btn .ios-ic { width: 18px; height: 18px; }

.ios-btn--primary { --bg: var(--ios-emerald); --fg: 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-btn--secondary { --bg: var(--ios-emerald-soft); --fg: var(--ios-emerald-2); }
.ios-btn--tertiary { --bg: transparent; --fg: var(--ios-emerald-2); padding: 0 10px; }
.ios-btn--tertiary:hover { background: var(--ios-emerald-soft); filter: none; }
.ios-btn--glass {
    --bg: var(--glass-float-bg);
    -webkit-backdrop-filter: var(--glass-float-blur);
    backdrop-filter: var(--glass-float-blur);
    border: .5px solid var(--glass-line);
    box-shadow: var(--glass-hi), var(--sh-1);
}
.ios-btn--floating {
    --bg: var(--ios-emerald); --fg: var(--ios-on-accent);
    min-height: 56px; padding: 0 22px; border-radius: var(--r-pill);
    box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--ios-emerald) 80%, transparent), var(--sh-2);
}
.ios-btn--icon { width: 44px; padding: 0; border-radius: 50%; }
.ios-btn--icon.ios-btn--sm { width: 34px; min-height: 34px; }
.ios-btn--destructive { --bg: var(--ios-red-bg); --fg: var(--ios-red-ink); }
.ios-btn--destructive-solid { --bg: var(--ios-red); --fg: #fff; }
.ios-btn--success { --bg: var(--ios-green); --fg: #fff; }
.ios-btn--sm { min-height: 34px; padding: 0 12px; font-size: var(--fs-sub); border-radius: var(--r-sm); gap: 6px; }
.ios-btn--sm .ios-ic { width: 16px; height: 16px; }
.ios-btn--lg { min-height: 54px; font-size: var(--fs-headline); border-radius: var(--r-lg); padding: 0 24px; }
.ios-btn--icon.ios-btn--sm { padding: 0; }
.ios-btn--block { display: flex; width: 100%; }
.ios-btn--pill { border-radius: var(--r-pill); }

/* Status memuat: tombol menahan lebarnya, label diganti putaran. */
.ios-btn.is-loading { color: transparent !important; pointer-events: none; }
.ios-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--fg);
    border-right-color: transparent;
    animation: ios-putar .7s linear infinite;
}

.ios-btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* ==========================================================================
   INPUT
   ========================================================================== */
.ios-field { display: grid; gap: 6px; min-width: 0; }
.ios-label { font-size: var(--fs-foot); font-weight: 600; color: var(--ios-ink-2); padding-left: 2px; }
.ios-help { font-size: var(--fs-cap); color: var(--ios-ink-3); padding-left: 2px; }
.ios-error-text { font-size: var(--fs-cap); color: var(--ios-red-ink); padding-left: 2px; font-weight: 500; }

.ios-input,
.ios-select,
.ios-textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    border: .5px solid var(--ios-sep);
    background: var(--glass-row-bg);
    color: var(--ios-ink);
    font: 400 var(--fs-body)/1.3 var(--font);
    letter-spacing: -.01em;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
    -webkit-appearance: none;
    appearance: none;
}
.ios-input::placeholder, .ios-textarea::placeholder { color: var(--ios-ink-3); opacity: 1; }
.ios-input:hover, .ios-select:hover, .ios-textarea:hover { border-color: var(--ios-sep-strong); }
.ios-input:focus, .ios-select:focus, .ios-textarea:focus,
.ios-input:focus-visible, .ios-select:focus-visible, .ios-textarea:focus-visible { border-color: var(--ios-emerald); box-shadow: var(--sh-focus); outline: none; }
.ios-input[aria-invalid="true"], .ios-input.is-invalid { border-color: var(--ios-red); box-shadow: 0 0 0 3px var(--ios-red-bg); }
.ios-input.is-valid { border-color: var(--ios-green); }
.ios-input[disabled], .ios-select[disabled], .ios-textarea[disabled] { opacity: .55; }
.ios-textarea { min-height: 96px; resize: vertical; }
.ios-select {
    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-input-money { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Kotak cari gaya iOS: ikon kaca pembesar di kiri, tombol hapus di kanan. */
.ios-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}
.ios-search > .ios-ic { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--ios-ink-3); pointer-events: none; }
.ios-search .ios-input { padding-left: 38px; padding-right: 38px; background: var(--ios-gray-bg); border-color: transparent; border-radius: var(--r-md); box-shadow: none; }
.ios-search .ios-input:focus { background: var(--glass-row-bg); }
.ios-search-clear {
    position: absolute; right: 8px;
    width: 28px; height: 28px; border-radius: 50%;
    border: 0; background: transparent; color: var(--ios-ink-3);
    display: grid; place-items: center;
}
.ios-search-clear:hover { background: var(--ios-gray-bg); }

/* Toggle (switch) iOS memakai checkbox asli: tetap terkirim di form. */
.ios-switch {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 51px; height: 31px;
    flex: none;
    margin: 0;
    border-radius: var(--r-pill);
    background: var(--ios-sep-strong);
    transition: background-color var(--t-base) var(--ease-out);
}
.ios-switch::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 27px; height: 27px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16);
    transition: transform var(--t-base) var(--ease-spring);
}
.ios-switch:checked { background: var(--ios-green); }
.ios-switch:checked::after { transform: translateX(20px); }
.ios-switch:active::after { width: 32px; }
.ios-switch:checked:active::after { transform: translateX(15px); }
.ios-switch:focus-visible { outline: 2px solid var(--ios-emerald); outline-offset: 2px; }

/* Checkbox dan radio bundar ala iOS */
.ios-check {
    -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px; margin: 0; flex: none;
    border-radius: 50%;
    border: 1.5px solid var(--ios-ink-4);
    display: inline-grid; place-items: center;
    transition: background-color var(--t-fast), border-color var(--t-fast);
}
.ios-check:checked { background: var(--ios-emerald); border-color: var(--ios-emerald); }
.ios-check:checked::after {
    content: ""; width: 10px; height: 6px;
    border: solid var(--ios-on-accent); border-width: 0 0 2px 2px;
    transform: translateY(-1px) rotate(-45deg);
}

/* Segmented control */
.ios-seg {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    border-radius: 11px;
    background: var(--ios-gray-bg);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.ios-seg::-webkit-scrollbar { display: none; }
.ios-seg > * {
    flex: 1 0 auto;
    min-height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ios-ink);
    font: 500 var(--fs-foot)/1 var(--font);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background-color var(--t-base) var(--ease-out), box-shadow var(--t-base);
}
.ios-seg > :is(.is-active, [aria-selected="true"], [aria-pressed="true"], :checked) {
    background: var(--glass-row-bg);
    background: color-mix(in srgb, #fff 92%, transparent);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .04);
    font-weight: 600;
}
html[data-mode="dark"] .ios-seg > :is(.is-active, [aria-selected="true"], [aria-pressed="true"]) { background: #5b605d; }

/* Chip filter (gulir mendatar) */
.ios-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 6px; min-width: 0; }
.ios-chips::-webkit-scrollbar { display: none; }
.ios-chip {
    flex: none;
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 34px; padding: 0 14px;
    border-radius: var(--r-pill);
    border: .5px solid var(--glass-line);
    background: var(--glass-float-bg);
    -webkit-backdrop-filter: var(--glass-float-blur);
    backdrop-filter: var(--glass-float-blur);
    color: var(--ios-ink);
    font: 500 var(--fs-sub)/1 var(--font);
    white-space: nowrap;
    text-decoration: none !important;
    box-shadow: var(--glass-hi);
    transition: background-color var(--t-base), color var(--t-base), transform var(--t-fast);
}
.ios-chip:active { transform: scale(.96); }
.ios-chip.is-active, .ios-chip[aria-pressed="true"] { background: var(--ios-ink); color: var(--ios-bg); border-color: transparent; }
.ios-chip .ios-num { opacity: .7; font-size: var(--fs-cap); }

/* ==========================================================================
   LENCANA STATUS
   Kapsul hanya untuk status nyata (lunas, habis, menipis). Tanpa glow,
   tanpa titik berdenyut (R-09).
   ========================================================================== */
.ios-badge {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 22px; padding: 0 8px;
    border-radius: 7px;
    font: 600 var(--fs-cap)/1 var(--font);
    letter-spacing: 0;
    white-space: nowrap;
    background: var(--ios-gray-bg); color: var(--ios-gray-ink);
}
.ios-badge--green { background: var(--ios-green-bg); color: var(--ios-green-ink); }
.ios-badge--red { background: var(--ios-red-bg); color: var(--ios-red-ink); }
.ios-badge--orange { background: var(--ios-orange-bg); color: var(--ios-orange-ink); }
.ios-badge--blue { background: var(--ios-blue-bg); color: var(--ios-blue-ink); }
.ios-badge--accent { background: var(--ios-emerald-soft); color: var(--ios-emerald-2); }
.ios-count {     /* angka bulat merah di ikon (jumlah belum dibaca) */
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px;
    background: var(--ios-red); color: #fff;
    font: 600 12px/20px var(--font);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   KELOMPOK DAFTAR iOS (inset grouped list)
   ========================================================================== */
.ios-group {
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--glass-row-bg);
    -webkit-backdrop-filter: var(--glass-tint-blur);
    backdrop-filter: var(--glass-tint-blur);
    border: .5px solid var(--glass-line);
    box-shadow: var(--glass-hi), var(--sh-1);
}
.ios-group + .ios-section-label, .ios-group + .ios-group { margin-top: var(--sp-6); }
/* Menu konteks yang terbuka di dalam baris tidak boleh terpotong grupnya. */
.ios-group:has(details[open]) { overflow: visible; }
.ios-group-foot { font-size: var(--fs-foot); color: var(--ios-ink-3); margin: var(--sp-2) var(--sp-4) 0; line-height: 1.4; }

.ios-row {
    --inset: 16px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 10px 16px;
    color: var(--ios-ink);
    text-decoration: none !important;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    font: inherit;
    transition: background-color var(--t-fast);
}
.ios-row.has-tile { --inset: 62px; }
.ios-row.has-thumb { --inset: 72px; }
.ios-row + .ios-row::before,
.ios-row + .ios-row-wrap::before,
.ios-row-wrap + .ios-row-wrap::before {
    content: "";
    position: absolute;
    top: 0; right: 0; left: var(--inset);
    height: .5px;
    background: var(--ios-sep);
}
.ios-row-wrap { position: relative; --inset: 16px; }
.ios-row-wrap.has-thumb { --inset: 72px; }
:is(a, button).ios-row:hover { background: color-mix(in srgb, var(--ios-ink) 4%, transparent); }
:is(a, button).ios-row:active { background: color-mix(in srgb, var(--ios-ink) 9%, transparent); }
.ios-row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ios-row-title { font-size: var(--fs-body); font-weight: 500; letter-spacing: -.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ios-row-sub { font-size: var(--fs-foot); color: var(--ios-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ios-row-end { display: flex; align-items: center; gap: 8px; flex: none; color: var(--ios-ink-3); font-size: var(--fs-callout); }
.ios-row-end .ios-money { color: var(--ios-ink); font-weight: 600; }
.ios-row-value { color: var(--ios-ink-3); font-size: var(--fs-callout); white-space: nowrap; }
.ios-chev { width: 14px; height: 14px; color: var(--ios-ink-4); flex: none; }
.ios-row--danger .ios-row-title { color: var(--ios-red); }
.ios-row--accent .ios-row-title { color: var(--ios-emerald-2); }

/* ==========================================================================
   KARTU dan WIDGET
   ========================================================================== */
.ios-card {
    position: relative;
    border-radius: var(--r-xl);
    padding: var(--sp-5);
    background: var(--glass-tint-bg);
    -webkit-backdrop-filter: var(--glass-tint-blur);
    backdrop-filter: var(--glass-tint-blur);
    border: .5px solid var(--glass-line);
    box-shadow: var(--glass-hi), var(--sh-2);
    min-width: 0;
}
.ios-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-4); min-width: 0; }
.ios-card-head h2, .ios-card-head h3 { font-size: var(--fs-headline); font-weight: 600; margin: 0; letter-spacing: -.015em; flex: 1; min-width: 0; }
.ios-card-head .ios-tile { --size: 28px; border-radius: 8px; }

.ios-widget {
    position: relative;
    border-radius: var(--r-xl);
    padding: 16px 16px 14px;
    background: var(--glass-tint-bg);
    -webkit-backdrop-filter: var(--glass-tint-blur);
    backdrop-filter: var(--glass-tint-blur);
    border: .5px solid var(--glass-line);
    box-shadow: var(--glass-hi), var(--sh-2);
    display: flex; flex-direction: column; gap: 6px;
    min-width: 0;
    color: var(--ios-ink);
    text-decoration: none !important;
    overflow: hidden;
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base);
}
a.ios-widget:hover { transform: translateY(-2px); box-shadow: var(--glass-hi), var(--sh-3); }
a.ios-widget:active { transform: scale(.98); }
.ios-widget-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-foot); font-weight: 600; color: var(--ios-ink-2); }
.ios-widget-label .ios-tile { --size: 20px; border-radius: 6px; }
.ios-widget-value { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-widget-note { font-size: var(--fs-cap); color: var(--ios-ink-3); }
/* Widget sorotan: latar gradien emerald ke lime. Hanya satu per layar. */
.ios-widget--hero { background: var(--grad-deep-emerald); color: #fff; border-color: rgba(255, 255, 255, .14); }
.ios-widget--hero .ios-widget-label, .ios-widget--hero .ios-widget-note { color: rgba(255, 255, 255, .86); }
html[data-mode="dark"] .ios-widget--hero { background: linear-gradient(135deg, #063d28, #0b6e48); }

/* ---------- Tabel ringkas bergaya iOS (data padat) ---------- */
.ios-table-wrap { overflow-x: auto; border-radius: var(--r-lg); -webkit-overflow-scrolling: touch; }
.ios-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sub); }
ul.ios-group, ol.ios-group { list-style: none; margin: 0; padding: 0; }
.ios-table tbody th[scope="row"] { text-align: left; font-weight: 600; padding: 11px 14px; border-bottom: .5px solid var(--ios-sep); }
.ios-table thead th {
    position: sticky; top: 0;
    text-align: left;
    font-size: var(--fs-cap); font-weight: 600; color: var(--ios-ink-3);
    padding: 10px 14px;
    background: var(--glass-std-bg);
    -webkit-backdrop-filter: var(--glass-std-blur);
    backdrop-filter: var(--glass-std-blur);
    border-bottom: .5px solid var(--ios-sep);
    white-space: nowrap;
}
.ios-table td { padding: 11px 14px; border-bottom: .5px solid var(--ios-sep); vertical-align: middle; }
.ios-table tbody tr { transition: background-color var(--t-fast); }
.ios-table tbody tr:hover { background: color-mix(in srgb, var(--ios-ink) 3.5%, transparent); }
.ios-table tbody tr:last-child td { border-bottom: 0; }
.ios-table .r, .ios-table .kanan { text-align: right; }

/* ==========================================================================
   STATE: kosong, memuat, galat, berhasil
   ========================================================================== */
.ios-empty {
    display: grid; justify-items: center; text-align: center; gap: 8px;
    padding: var(--sp-8) var(--sp-5);
    color: var(--ios-ink-3);
}
.ios-empty .ios-tile { --size: 56px; margin-bottom: 6px; }
.ios-empty h3 { margin: 0; font-size: var(--fs-headline); color: var(--ios-ink); font-weight: 600; }
.ios-empty p { margin: 0; max-width: 34ch; font-size: var(--fs-sub); }
.ios-empty .ios-btn { margin-top: 8px; }

.ios-skel {
    border-radius: 8px;
    background: linear-gradient(90deg, var(--ios-gray-bg) 25%, color-mix(in srgb, var(--ios-gray-bg) 40%, transparent) 50%, var(--ios-gray-bg) 75%);
    background-size: 200% 100%;
    animation: ios-kilau 1.3s ease-in-out infinite;
    min-height: 14px;
}
.ios-spinner {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2.5px solid var(--ios-sep-strong);
    border-top-color: var(--ios-ink-2);
    animation: ios-putar .8s linear infinite;
    display: inline-block;
}

.ios-alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--glass-row-bg);
    border: .5px solid var(--glass-line);
    box-shadow: var(--glass-hi), var(--sh-1);
    font-size: var(--fs-sub);
}
.ios-alert .ios-tile { --size: 26px; border-radius: 8px; }
.ios-alert-body { flex: 1; min-width: 0; }
.ios-alert-body strong { display: block; font-weight: 600; margin-bottom: 2px; }

/* ---------- Toast ---------- */
.ios-toasts {
    position: fixed;
    top: calc(var(--safe-t) + 64px);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: grid; gap: 8px;
    width: min(420px, calc(100vw - 24px));
    pointer-events: none;
}
.ios-toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    font-size: var(--fs-sub);
    animation: ios-turun var(--t-slow) var(--ease-spring);
}
.ios-toast.is-out { animation: ios-naik-hilang var(--t-base) var(--ease-io) forwards; }
.ios-toast .ios-tile { --size: 30px; border-radius: 9px; }

/* ---------- Grid sederhana ---------- */
.ios-stack { display: grid; gap: var(--sp-4); min-width: 0; }
.ios-stack-lg { display: grid; gap: var(--sp-6); min-width: 0; }
.ios-grid-2 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.ios-grid-3 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.ios-grid-4 { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.ios-hr { height: .5px; background: var(--ios-sep); border: 0; margin: var(--sp-4) 0; }

/* Tabel yang masih bisa digeser ke kanan (ditandai shell.js). */
.ios-table-wrap.bisa-geser {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
}

/* Bilah simpan/total yang menempel di bawah (stok masuk/opname/atur, nota
   sales, gaji, produk): latar dibuat hampir padat. Dulu kaca tipis membuat
   tombol & judul baris di belakangnya tetap terbaca dan bertumpuk. */
:is(.msx-totalbar, .psk-lengket, .prd-savebar, .kry-bayar-bar) {
    background: color-mix(in srgb, var(--ios-bg) 90%, transparent) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
}
/* Tombol nonaktif tetap terbaca (dulu teks pucat di atas latar pucat). */
html[data-ui="ios26"] .ios-btn:disabled, html[data-ui="ios26"] .ios-btn[aria-disabled="true"] { opacity: .55; color: var(--ios-ink-2); }

/* Layar sentuh: setiap target ketuk minimal 44 px. Hanya untuk pointer kasar
   (HP/tablet); tampilan desktop dengan tetikus tidak berubah. !important
   karena CSS halaman (pages/*.css, dimuat sesudah berkas ini) memasang
   min-height 34-36 px dengan bobot yang sama. Tombol barcode di baris
   produk kasir (.kp-bc, .kp-bc-add) sengaja tidak disentuh: area ketuk yang melebar ke tengah baris pernah
   membuat ketukan pada baris membuka form barcode. */
@media (pointer: coarse) {
    :root .ios-chip, :root .kx-chip, :root .ios-seg > *,
    :root .ios-btn--sm, :root .ios-menu-item, :root .bantuan-pemicu,
    :root .ios-skip, :root .ios-page summary:not(.ios-btn),
    :root .ios-navhead-actions > .ios-btn { min-height: 44px !important; }
    :root .bantuan-pemicu { display: inline-flex; align-items: center; }
    :root .ios-btn--icon.ios-btn--sm { width: 44px; min-width: 44px; }
    :root .ios-avatar:is(a, button) { min-width: 44px; min-height: 44px; }
    :root .ios-topbtn, :root .ios-side-collapse { width: 44px; height: 44px; }
    /* Tautan teks di dalam kartu: area ketuk diperluas ke atas-bawah tanpa
       menggeser isi (padding dibalas margin negatif). */
    :root .ios-w-link, :root .prd-name { padding-block: 12px; margin-block: -12px; }
    :root .ios-side-head > a { display: inline-flex; padding: 2px; margin: -2px; }
    /* Dynamic island: lapisan ketuk tak terlihat sedikit di luar pil. */
    :root .ios-island-compact::before { content: ""; position: absolute; inset: -4px -2px; }
}