/*
 * toko.yoseeacademy.com/assets/css/theme.css
 * Tema "Stiker" Yosee Skate Shop. SATU-SATUNYA tempat warna & token desain didefinisikan.
 * Komponen dan halaman tidak memakai hex langsung: pakai var(--ya-*) atau class Bootstrap.
 * Nama token sama dengan tema akademi (theme.css "Sporty jersey"), jadi pola komponen akademi tetap berlaku,
 * ditambah token khas Stiker: garis tinta tebal, bayangan keras tanpa blur, dan warna grup.
 *
 * Ciri Stiker: Baloo 2 (judul) + Nunito (isi), garis tinta 2px, bayangan keras 4px (3px untuk kontrol kecil),
 * radius 16px kartu / 12px kontrol, latar krem (terang) / navy (gelap), satu CTA oranye per layar.
 */

/* ============ Font (offline) ============
   Folder: assets/vendor/fonts/ (dari paket npm @fontsource/baloo-2 dan @fontsource/nunito, subset latin).
   Selama file belum ada, browser memakai fallback di --ya-font / --ya-font-judul. */
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 700; font-display: swap;
             src: url('../vendor/fonts/baloo-2/baloo-2-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 800; font-display: swap;
             src: url('../vendor/fonts/baloo-2/baloo-2-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap;
             src: url('../vendor/fonts/nunito/nunito-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap;
             src: url('../vendor/fonts/nunito/nunito-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap;
             src: url('../vendor/fonts/nunito/nunito-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap;
             src: url('../vendor/fonts/nunito/nunito-latin-800-normal.woff2') format('woff2'); }

/* ============ Token non-warna ============ */
:root {
    --ya-font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ya-font-judul: "Baloo 2", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ya-radius-kontrol: .75rem;    /* tombol, input */
    --ya-radius-kartu: 1rem;        /* kartu, alert, dropdown */
    --ya-radius-lapis: 1.25rem;     /* modal, sheet, palette */
    --ya-garis: 2px;                /* tebal garis tinta */
    --ya-geser-keras: 4px;          /* jarak bayangan keras kartu */
    --ya-geser-kecil: 3px;          /* jarak bayangan keras tombol & kontrol */
    --ya-transisi: .15s ease;
}

/* ============ Token warna ============ */
:root,
[data-bs-theme="light"] {
    /* Merek */
    --ya-primary: #10628B;
    --ya-primary-rgb: 16, 98, 139;
    --ya-primary-hover: #0C5274;
    --ya-primary-subtle: #DDEFF7;
    --ya-on-primary: #FFFFFF;

    --ya-accent: #F28A3C;            /* CTA oranye: satu per layar, teks navy */
    --ya-accent-rgb: 242, 138, 60;
    --ya-accent-hover: #F49A55;
    --ya-on-accent: #0B1C3D;

    --ya-merah: #B8323E;             /* merah logo: avatar, tanda 2nd */
    --ya-on-merah: #FFFFFF;

    /* Tinta & bayangan keras */
    --ya-tinta: #0B1C3D;
    --ya-tinta-rgb: 11, 28, 61;
    --ya-bayangan: #0B1C3D;

    /* Netral */
    --ya-bg: #FFF8EE;
    --ya-bg-titik: rgba(11, 28, 61, .07);
    --ya-surface: #FFFFFF;
    --ya-surface-rgb: 255, 255, 255;
    --ya-sidebar: #FFFFFF;
    --ya-border: #E7DCCB;            /* garis halus di dalam kartu (baris daftar, tabel) */
    --ya-border-input: #0B1C3D;
    --ya-teks: #0B1C3D;
    --ya-teks-2: #4E5B76;
    --ya-zebra: #FFF4E3;
    --ya-wajib: #B8323E;

    /* Status (tidak pernah oranye: oranye khusus CTA) */
    --ya-sukses: #1E7B4F;
    --ya-sukses-rgb: 30, 123, 79;
    --ya-on-sukses: #FFFFFF;
    --ya-sukses-teks: #17633F;
    --ya-sukses-bg: #DCF3E6;

    --ya-peringatan: #F5C518;
    --ya-peringatan-rgb: 245, 197, 24;
    --ya-on-peringatan: #0B1C3D;
    --ya-peringatan-teks: #7A5300;
    --ya-peringatan-bg: #FFF1C2;

    --ya-bahaya: #B8323E;
    --ya-bahaya-rgb: 184, 50, 62;
    --ya-on-bahaya: #FFFFFF;
    --ya-bahaya-teks: #A82B37;
    --ya-bahaya-bg: #FBE1E4;

    --ya-info: #10628B;
    --ya-info-rgb: 16, 98, 139;
    --ya-on-info: #FFFFFF;
    --ya-info-teks: #0F6189;
    --ya-info-bg: #DDEFF7;

    --ya-netral-teks: #4E5B76;
    --ya-netral-bg: #EFE6D8;

    /* Warna grup menu (ikon bulat): Toko, Care, Karyawan, Lainnya */
    --ya-grup-toko-bg: #DDEFF7;      --ya-grup-toko-fg: #0F6189;
    --ya-grup-care-bg: #D6F1F8;      --ya-grup-care-fg: #00739A;
    --ya-grup-karyawan-bg: #FDE9D6;  --ya-grup-karyawan-fg: #A3480A;
    --ya-grup-lainnya-bg: #FBE1E4;   --ya-grup-lainnya-fg: #A82B37;

    --ya-scrim: rgba(11, 28, 61, .45);
}

[data-bs-theme="dark"] {
    --ya-primary: #6CCCE4;
    --ya-primary-rgb: 108, 204, 228;
    --ya-primary-hover: #8FD8EB;
    --ya-primary-subtle: #12395A;
    --ya-on-primary: #0B1C3D;

    --ya-accent: #F7A55C;
    --ya-accent-rgb: 247, 165, 92;
    --ya-accent-hover: #F9B676;
    --ya-on-accent: #0B1C3D;

    --ya-merah: #F07F89;
    --ya-on-merah: #0B1C3D;

    --ya-tinta: #EAF4FA;
    --ya-tinta-rgb: 234, 244, 250;
    --ya-bayangan: #000814;

    --ya-bg: #0B1C3D;
    --ya-bg-titik: rgba(234, 244, 250, .05);
    --ya-surface: #13264D;
    --ya-surface-rgb: 19, 38, 77;
    --ya-sidebar: #102145;
    --ya-border: #2A4373;
    --ya-border-input: #EAF4FA;
    --ya-teks: #F3F7FC;
    --ya-teks-2: #A7B6CF;
    --ya-zebra: #172C57;
    --ya-wajib: #F07F89;

    --ya-sukses: #5FD39A;
    --ya-sukses-rgb: 95, 211, 154;
    --ya-on-sukses: #0B1C3D;
    --ya-sukses-teks: #7EE0AE;
    --ya-sukses-bg: #123F35;

    --ya-peringatan: #FDB022;
    --ya-peringatan-rgb: 253, 176, 34;
    --ya-on-peringatan: #0B1C3D;
    --ya-peringatan-teks: #FFD27A;
    --ya-peringatan-bg: #4A3A12;

    --ya-bahaya: #F07F89;
    --ya-bahaya-rgb: 240, 127, 137;
    --ya-on-bahaya: #0B1C3D;
    --ya-bahaya-teks: #F7A5AC;
    --ya-bahaya-bg: #4D1E2A;

    --ya-info: #6CCCE4;
    --ya-info-rgb: 108, 204, 228;
    --ya-on-info: #0B1C3D;
    --ya-info-teks: #8FD8EB;
    --ya-info-bg: #12395A;

    --ya-netral-teks: #C3CEE0;
    --ya-netral-bg: #22365F;

    --ya-grup-toko-bg: #6CCCE4;      --ya-grup-toko-fg: #0B1C3D;
    --ya-grup-care-bg: #2EC4E8;      --ya-grup-care-fg: #0B1C3D;
    --ya-grup-karyawan-bg: #F7A55C;  --ya-grup-karyawan-fg: #0B1C3D;
    --ya-grup-lainnya-bg: #F07F89;   --ya-grup-lainnya-fg: #0B1C3D;

    --ya-scrim: rgba(0, 8, 20, .62);
}

/* ============ Pemetaan ke variabel Bootstrap 5.3 ============ */
:root,
[data-bs-theme] {
    --bs-body-font-family: var(--ya-font);
    --bs-body-bg: var(--ya-bg);
    --bs-body-color: var(--ya-teks);
    --bs-emphasis-color: var(--ya-teks);
    --bs-secondary-color: var(--ya-teks-2);
    --bs-secondary-bg: var(--ya-zebra);
    --bs-tertiary-bg: var(--ya-zebra);
    --bs-border-color: var(--ya-border);
    --bs-heading-color: var(--ya-teks);

    --bs-border-radius: var(--ya-radius-kontrol);
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: var(--ya-radius-kartu);
    --bs-border-radius-xl: var(--ya-radius-lapis);

    --bs-primary: var(--ya-primary);
    --bs-primary-rgb: var(--ya-primary-rgb);
    --bs-primary-text-emphasis: var(--ya-primary);
    --bs-primary-bg-subtle: var(--ya-primary-subtle);
    --bs-primary-border-subtle: var(--ya-primary-subtle);

    --bs-link-color: var(--ya-primary);
    --bs-link-color-rgb: var(--ya-primary-rgb);
    --bs-link-hover-color: var(--ya-primary-hover);
    --bs-link-hover-color-rgb: var(--ya-primary-rgb);

    --bs-success: var(--ya-sukses);
    --bs-success-rgb: var(--ya-sukses-rgb);
    --bs-success-text-emphasis: var(--ya-sukses-teks);
    --bs-success-bg-subtle: var(--ya-sukses-bg);
    --bs-success-border-subtle: var(--ya-sukses-bg);
    --bs-warning: var(--ya-peringatan);
    --bs-warning-rgb: var(--ya-peringatan-rgb);
    --bs-warning-text-emphasis: var(--ya-peringatan-teks);
    --bs-warning-bg-subtle: var(--ya-peringatan-bg);
    --bs-warning-border-subtle: var(--ya-peringatan-bg);
    --bs-danger: var(--ya-bahaya);
    --bs-danger-rgb: var(--ya-bahaya-rgb);
    --bs-danger-text-emphasis: var(--ya-bahaya-teks);
    --bs-danger-bg-subtle: var(--ya-bahaya-bg);
    --bs-danger-border-subtle: var(--ya-bahaya-bg);
    --bs-info: var(--ya-info);
    --bs-info-rgb: var(--ya-info-rgb);
    --bs-info-text-emphasis: var(--ya-info-teks);
    --bs-info-bg-subtle: var(--ya-info-bg);
    --bs-info-border-subtle: var(--ya-info-bg);

    --bs-focus-ring-color: rgba(var(--ya-accent-rgb), .55);
    --bs-form-invalid-color: var(--ya-bahaya-teks);
    --bs-form-invalid-border-color: var(--ya-wajib);
}

body {
    background-color: var(--ya-bg);
    color: var(--ya-teks);
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============ Tipografi ============ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--ya-font-judul); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
b, strong, .fw-bold { font-weight: 800; }
.fw-semibold { font-weight: 700 !important; }
.small, small { font-weight: 600; }

/* Nominal & angka sejajar per digit (nota, stok, laporan) */
.table, .ya-angka, [data-ya-rupiah] { font-variant-numeric: tabular-nums; }

::selection { background-color: rgba(var(--ya-accent-rgb), .35); color: var(--ya-teks); }

/* ============ Warna grup (ikon bulat menu, tile, palette) ============ */
.ya-warna-toko     { --ya-ikon-bg: var(--ya-grup-toko-bg);     --ya-ikon-fg: var(--ya-grup-toko-fg); }
.ya-warna-care     { --ya-ikon-bg: var(--ya-grup-care-bg);     --ya-ikon-fg: var(--ya-grup-care-fg); }
.ya-warna-karyawan { --ya-ikon-bg: var(--ya-grup-karyawan-bg); --ya-ikon-fg: var(--ya-grup-karyawan-fg); }
.ya-warna-lainnya  { --ya-ikon-bg: var(--ya-grup-lainnya-bg);  --ya-ikon-fg: var(--ya-grup-lainnya-fg); }

/* ============ Permukaan ============ */
.card {
    --bs-card-bg: var(--ya-surface);
    --bs-card-border-width: var(--ya-garis);
    --bs-card-border-color: var(--ya-tinta);
    --bs-card-border-radius: var(--ya-radius-kartu);
    --bs-card-inner-border-radius: calc(var(--ya-radius-kartu) - var(--ya-garis));
    --bs-card-cap-bg: transparent;
    box-shadow: var(--ya-geser-keras) var(--ya-geser-keras) 0 var(--ya-bayangan);
}
.card-header { font-family: var(--ya-font-judul); font-weight: 800; font-size: 1.0625rem; border-bottom: var(--ya-garis) solid var(--ya-tinta); }
.card-footer { border-top: var(--ya-garis) solid var(--ya-tinta); }

.modal { --bs-modal-bg: var(--ya-surface); --bs-modal-border-width: var(--ya-garis); --bs-modal-border-color: var(--ya-tinta);
         --bs-modal-border-radius: var(--ya-radius-lapis); --bs-modal-inner-border-radius: calc(var(--ya-radius-lapis) - var(--ya-garis));
         --bs-modal-header-border-color: var(--ya-border); --bs-modal-footer-border-color: var(--ya-border); }
.modal-content { box-shadow: 6px 6px 0 var(--ya-bayangan); }
.modal-backdrop { --bs-backdrop-bg: var(--ya-bayangan); }
.offcanvas { --bs-offcanvas-bg: var(--ya-surface); --bs-offcanvas-border-width: var(--ya-garis); --bs-offcanvas-border-color: var(--ya-tinta); }
.offcanvas-title { font-family: var(--ya-font-judul); font-weight: 800; }

.list-group { --bs-list-group-bg: var(--ya-surface); --bs-list-group-border-color: var(--ya-border);
              --bs-list-group-active-bg: var(--ya-primary); --bs-list-group-active-border-color: var(--ya-primary);
              --bs-list-group-active-color: var(--ya-on-primary); }

.dropdown-menu {
    --bs-dropdown-bg: var(--ya-surface);
    --bs-dropdown-border-width: var(--ya-garis);
    --bs-dropdown-border-color: var(--ya-tinta);
    --bs-dropdown-border-radius: var(--ya-radius-kartu);
    --bs-dropdown-padding-x: .375rem;
    --bs-dropdown-item-border-radius: .625rem;
    --bs-dropdown-link-color: var(--ya-teks);
    --bs-dropdown-link-hover-color: var(--ya-teks);
    --bs-dropdown-link-hover-bg: var(--ya-zebra);
    --bs-dropdown-link-active-color: var(--ya-on-accent);
    --bs-dropdown-link-active-bg: var(--ya-accent);
    --bs-dropdown-divider-bg: var(--ya-border);
    box-shadow: var(--ya-geser-keras) var(--ya-geser-keras) 0 var(--ya-bayangan);
    font-weight: 700;
}

/* ============ Tombol ============ */
.btn {
    --bs-btn-font-weight: 800;
    --bs-btn-border-width: var(--ya-garis);
    --bs-btn-border-radius: var(--ya-radius-kontrol);
    --bs-btn-focus-shadow-rgb: var(--ya-accent-rgb);
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    box-shadow: var(--ya-geser-kecil) var(--ya-geser-kecil) 0 var(--ya-bayangan);
    transition: color var(--ya-transisi), background-color var(--ya-transisi), border-color var(--ya-transisi),
                box-shadow .1s ease, transform .1s ease;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: calc(var(--ya-geser-kecil) + 1px) calc(var(--ya-geser-kecil) + 1px) 0 var(--ya-bayangan); }
.btn:active,
.btn.active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ya-bayangan); }
.btn:disabled,
.btn.disabled { transform: none; box-shadow: none; opacity: .55; }
.btn:focus-visible { box-shadow: var(--ya-geser-kecil) var(--ya-geser-kecil) 0 var(--ya-bayangan), 0 0 0 .25rem rgba(var(--ya-accent-rgb), .55); }
.btn-sm { min-height: 36px; --bs-btn-border-radius: .625rem; box-shadow: 2px 2px 0 var(--ya-bayangan); }
.btn-lg { min-height: 52px; --bs-btn-font-size: 1.0625rem; }
.btn-link { --bs-btn-border-width: 0; box-shadow: none; font-weight: 800; }
.btn-link:hover, .btn-link:active { box-shadow: none; transform: none; }

.btn-primary {
    --bs-btn-color: var(--ya-on-primary); --bs-btn-bg: var(--ya-primary); --bs-btn-border-color: var(--ya-tinta);
    --bs-btn-hover-color: var(--ya-on-primary); --bs-btn-hover-bg: var(--ya-primary-hover); --bs-btn-hover-border-color: var(--ya-tinta);
    --bs-btn-active-color: var(--ya-on-primary); --bs-btn-active-bg: var(--ya-primary-hover); --bs-btn-active-border-color: var(--ya-tinta);
    --bs-btn-disabled-color: var(--ya-on-primary); --bs-btn-disabled-bg: var(--ya-primary); --bs-btn-disabled-border-color: var(--ya-tinta);
}
/* CTA terpenting. Hanya SATU per layar (Masuk, Bayar, Simpan nota, Absen). */
.btn-accent {
    --bs-btn-color: var(--ya-on-accent); --bs-btn-bg: var(--ya-accent); --bs-btn-border-color: var(--ya-tinta);
    --bs-btn-hover-color: var(--ya-on-accent); --bs-btn-hover-bg: var(--ya-accent-hover); --bs-btn-hover-border-color: var(--ya-tinta);
    --bs-btn-active-color: var(--ya-on-accent); --bs-btn-active-bg: var(--ya-accent-hover); --bs-btn-active-border-color: var(--ya-tinta);
    --bs-btn-disabled-color: var(--ya-on-accent); --bs-btn-disabled-bg: var(--ya-accent); --bs-btn-disabled-border-color: var(--ya-tinta);
}
.btn-danger {
    --bs-btn-color: var(--ya-on-bahaya); --bs-btn-bg: var(--ya-bahaya); --bs-btn-border-color: var(--ya-tinta);
    --bs-btn-hover-color: var(--ya-on-bahaya); --bs-btn-hover-bg: var(--ya-bahaya); --bs-btn-hover-border-color: var(--ya-tinta);
    --bs-btn-active-color: var(--ya-on-bahaya); --bs-btn-active-bg: var(--ya-bahaya); --bs-btn-active-border-color: var(--ya-tinta);
}
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger {
    --bs-btn-bg: var(--ya-surface); --bs-btn-border-color: var(--ya-tinta);
    --bs-btn-hover-bg: var(--ya-zebra); --bs-btn-hover-border-color: var(--ya-tinta);
    --bs-btn-active-bg: var(--ya-zebra); --bs-btn-active-border-color: var(--ya-tinta);
    --bs-btn-disabled-bg: var(--ya-surface); --bs-btn-disabled-border-color: var(--ya-tinta);
}
.btn-outline-primary { --bs-btn-color: var(--ya-primary); --bs-btn-hover-color: var(--ya-primary); --bs-btn-active-color: var(--ya-primary); --bs-btn-disabled-color: var(--ya-primary); }
.btn-outline-secondary { --bs-btn-color: var(--ya-teks); --bs-btn-hover-color: var(--ya-teks); --bs-btn-active-color: var(--ya-teks); --bs-btn-disabled-color: var(--ya-teks-2); }
.btn-outline-danger { --bs-btn-color: var(--ya-bahaya-teks); --bs-btn-hover-color: var(--ya-bahaya-teks); --bs-btn-active-color: var(--ya-bahaya-teks); --bs-btn-disabled-color: var(--ya-bahaya-teks); }

.btn-close { --bs-btn-close-focus-shadow: 0 0 0 .25rem rgba(var(--ya-accent-rgb), .55); width: 1.5rem; height: 1.5rem; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ============ Form ============ */
.form-label { font-size: .875rem; font-weight: 800; margin-bottom: .375rem; }
.form-text { color: var(--ya-teks-2); font-weight: 600; }
.form-control,
.form-select {
    min-height: 44px; border-width: var(--ya-garis); border-color: var(--ya-border-input); border-radius: var(--ya-radius-kontrol);
    background-color: var(--ya-surface); color: var(--ya-teks); font-weight: 700;
}
.form-control-lg, .form-select-lg { min-height: 52px; }
.form-control::placeholder { color: var(--ya-teks-2); opacity: 1; font-weight: 600; }
.form-control:focus,
.form-select:focus { background-color: var(--ya-surface); color: var(--ya-teks); border-color: var(--ya-border-input);
                     box-shadow: 0 0 0 .25rem rgba(var(--ya-accent-rgb), .5); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--ya-wajib); }
.form-check-input { width: 1.25em; height: 1.25em; border: var(--ya-garis) solid var(--ya-tinta); background-color: var(--ya-surface); }
.form-check-input:checked { background-color: var(--ya-primary); border-color: var(--ya-tinta); }
.form-check-input:focus { border-color: var(--ya-tinta); box-shadow: 0 0 0 .25rem rgba(var(--ya-accent-rgb), .5); }
.form-check-label { font-weight: 700; }
.input-group { --bs-border-width: var(--ya-garis); }
.input-group-text { background-color: var(--ya-zebra); border-width: var(--ya-garis); border-color: var(--ya-border-input); color: var(--ya-teks-2); }
.input-group > .btn { box-shadow: none; transform: none; }

/* Autofill browser ikut tema */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--ya-teks);
    caret-color: var(--ya-teks);
    -webkit-box-shadow: 0 0 0 1000px var(--ya-surface) inset;
}
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ya-teks);
    -webkit-box-shadow: 0 0 0 1000px var(--ya-surface) inset, 0 0 0 .25rem rgba(var(--ya-accent-rgb), .5);
}

/* ============ Tabel ============ */
.table {
    --bs-table-bg: var(--ya-surface);
    --bs-table-color: var(--ya-teks);
    --bs-table-border-color: var(--ya-border);
    --bs-table-striped-bg: var(--ya-zebra);
    --bs-table-striped-color: var(--ya-teks);
    --bs-table-hover-bg: var(--ya-zebra);
    --bs-table-hover-color: var(--ya-teks);
}
.table > thead > tr > th {
    --bs-table-bg: var(--ya-zebra);
    --bs-table-color: var(--ya-teks);
    border-bottom: var(--ya-garis) solid var(--ya-tinta);
    font-weight: 800; white-space: nowrap;
}
.table > tbody > tr.ya-baris-grup > td { --bs-table-bg: var(--ya-zebra); color: var(--ya-teks-2); }

/* ============ Navigasi ============ */
.pagination {
    --bs-pagination-color: var(--ya-teks);
    --bs-pagination-bg: var(--ya-surface);
    --bs-pagination-border-width: var(--ya-garis);
    --bs-pagination-border-color: var(--ya-tinta);
    --bs-pagination-hover-color: var(--ya-teks);
    --bs-pagination-hover-bg: var(--ya-zebra);
    --bs-pagination-hover-border-color: var(--ya-tinta);
    --bs-pagination-focus-color: var(--ya-teks);
    --bs-pagination-focus-bg: var(--ya-zebra);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--ya-accent-rgb), .5);
    --bs-pagination-active-color: var(--ya-on-accent);
    --bs-pagination-active-bg: var(--ya-accent);
    --bs-pagination-active-border-color: var(--ya-tinta);
    --bs-pagination-disabled-color: var(--ya-teks-2);
    --bs-pagination-disabled-bg: var(--ya-surface);
    --bs-pagination-disabled-border-color: var(--ya-border);
    font-weight: 800;
}
.page-link { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

.nav { --bs-nav-link-color: var(--ya-teks-2); --bs-nav-link-hover-color: var(--ya-teks); --bs-nav-link-font-weight: 800; }
.nav-pills { --bs-nav-pills-border-radius: 999px; --bs-nav-pills-link-active-color: var(--ya-on-accent); --bs-nav-pills-link-active-bg: var(--ya-accent); }
.nav-pills .nav-link.active { box-shadow: inset 0 0 0 var(--ya-garis) var(--ya-tinta); }
.nav-tabs {
    --bs-nav-tabs-border-width: var(--ya-garis);
    --bs-nav-tabs-border-color: var(--ya-tinta);
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-color: var(--ya-teks);
    --bs-nav-tabs-link-active-bg: var(--ya-surface);
    --bs-nav-tabs-link-active-border-color: var(--ya-tinta) var(--ya-tinta) var(--ya-surface);
}
.progress { --bs-progress-bg: var(--ya-zebra); --bs-progress-bar-bg: var(--ya-primary); border: var(--ya-garis) solid var(--ya-tinta); }

/* ============ Alert ============ */
.alert { --bs-alert-border-radius: var(--ya-radius-kartu); --bs-alert-border-width: var(--ya-garis); font-weight: 700; }
.alert-info    { --bs-alert-color: var(--ya-info-teks); --bs-alert-bg: var(--ya-info-bg); --bs-alert-border-color: var(--ya-info); --bs-alert-link-color: var(--ya-info-teks); }
.alert-success { --bs-alert-color: var(--ya-sukses-teks); --bs-alert-bg: var(--ya-sukses-bg); --bs-alert-border-color: var(--ya-sukses); }
.alert-warning { --bs-alert-color: var(--ya-peringatan-teks); --bs-alert-bg: var(--ya-peringatan-bg); --bs-alert-border-color: var(--ya-peringatan); }
.alert-danger  { --bs-alert-color: var(--ya-bahaya-teks); --bs-alert-bg: var(--ya-bahaya-bg); --bs-alert-border-color: var(--ya-bahaya); }

/* ============ Status (hijau/kuning/merah/biru/abu, tidak pernah oranye) ============ */
.ya-status { display: inline-flex; align-items: center; gap: .3em; padding: .2em .7em; border-radius: 999px;
             border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent);
             font-size: .78125rem; font-weight: 800; line-height: 1.4; white-space: nowrap; }
.ya-status-sukses { color: var(--ya-sukses-teks); background-color: var(--ya-sukses-bg); }
.ya-status-peringatan { color: var(--ya-peringatan-teks); background-color: var(--ya-peringatan-bg); }
.ya-status-bahaya { color: var(--ya-bahaya-teks); background-color: var(--ya-bahaya-bg); }
.ya-status-netral { color: var(--ya-netral-teks); background-color: var(--ya-netral-bg); }
.ya-status-info { color: var(--ya-info-teks); background-color: var(--ya-info-bg); }
/* Tanda barang 2nd (prelove): merah logo, dipakai di stok, keranjang, dan nota */
.ya-tanda-2nd { display: inline-flex; align-items: center; padding: .1em .55em; border-radius: .5rem;
                border: 1.5px solid var(--ya-tinta); background: var(--ya-merah); color: var(--ya-on-merah);
                font-family: var(--ya-font-judul); font-size: .75rem; font-weight: 800; line-height: 1.3; }

/* ============ SweetAlert2 ============ */
.swal2-popup { background: var(--ya-surface); color: var(--ya-teks); border: var(--ya-garis) solid var(--ya-tinta);
               border-radius: var(--ya-radius-lapis); box-shadow: 6px 6px 0 var(--ya-bayangan); font-family: var(--ya-font); }
.swal2-title { font-family: var(--ya-font-judul); font-weight: 800; color: var(--ya-teks); }
.swal2-html-container { color: var(--ya-teks); font-weight: 600; }
.swal2-icon.swal2-question, .swal2-icon.swal2-info { border-color: var(--ya-primary); color: var(--ya-primary); }
.swal2-actions .btn { min-width: 96px; }
.swal2-container.swal2-backdrop-show { background: var(--ya-scrim); }
.swal2-popup .swal2-input { width: 100%; max-width: 280px; margin: 1rem auto 0; text-align: center; letter-spacing: .1em; font-weight: 800; }
.swal2-popup .swal2-validation-message { background: var(--ya-bahaya-bg); color: var(--ya-bahaya-teks); }

/* ============ Select2 ============ */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 44px; background-color: var(--ya-surface);
    border: var(--ya-garis) solid var(--ya-border-input); border-radius: var(--ya-radius-kontrol);
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single { box-shadow: 0 0 0 .25rem rgba(var(--ya-accent-rgb), .5); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; color: var(--ya-teks); padding-left: .75rem; font-weight: 700; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
.select2-container--default .select2-selection__placeholder { color: var(--ya-teks-2); }
.select2-dropdown { background-color: var(--ya-surface); border: var(--ya-garis) solid var(--ya-tinta); color: var(--ya-teks); }
.select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--ya-surface); color: var(--ya-teks); border-color: var(--ya-border-input); }
.select2-results__option { min-height: 44px; display: flex; align-items: center; font-weight: 700; }
.select2-container--default .select2-results__option--selected { background-color: var(--ya-zebra); color: var(--ya-teks); }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--ya-accent); color: var(--ya-on-accent); }

/* ============ Penanda isian wajib ============ */
.form-label:has(+ :is(input, select, textarea)[required])::after,
.form-label:has(+ .input-group :is(input, select, textarea)[required])::after,
.form-label:has(+ .ya-tgl .ya-tgl-teks[required])::after,
.form-label.ya-wajib::after,
.form-check-label.ya-wajib::after { content: " *"; color: var(--ya-wajib); font-weight: 800; }

/* ============ Kurangi gerak (pengaturan aksesibilitas perangkat) ============ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover, .btn:active { transform: none; }
}