/* UP ProDev — SHELL & PUSTAKA KOMPONEN
 *
 * Rujukan: docs/UP_PRODEV_DESIGN_SYSTEM.md (konstitusi UI, 70 pasal).
 * Nomor pasal ditulis di tiap blok supaya nilainya bisa dilacak ke sumbernya.
 *
 * ATURAN PASAL 60 — SEBELUM MEMBUAT KOMPONEN BARU, CARI DI SINI DULU.
 * Dilarang membuat ulang komponen yang sama dengan padding / font-size /
 * radius / warna / shadow / tinggi / ukuran ikon yang sedikit berbeda.
 *
 * Komponen yang SUDAH ADA di berkas ini:
 *   .up-btn .up-btn--primary .up-btn--ghost   tombol
 *   .up-card .up-card__head .up-card__title   kartu
 *   .up-kpi                                   kartu KPI
 *   .up-table                                 tabel ringan
 *   .up-badge .up-badge--<status>             badge status produk
 *   .up-cat                                   badge kategori
 *   .up-tabs .up-tab                          tab filter segmented
 *   .up-bar                                   progress bar
 *   .up-stage .up-stage--<tahap>              bulatan tahap
 *   .up-input .up-search                      form
 *   .up-ic                                    ikon Lucide
 *   .up-empty                                 empty state
 *   .up-skel                                  skeleton loading
 *
 * TANPA hex — semua warna dari var(--up-*) di prodev_tokens.css.
 */

/* ── Inter, di-host sendiri (Pasal 4). Tanpa CDN supaya halaman tidak
      bergantung jaringan luar saat dibuka. ─────────────────────────────── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter/inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter/inter-700.woff2') format('woff2');
}

/* ── dasar ────────────────────────────────────────────────────────────── */
.up-scope,
.up-scope *,
.up-scope *::before,
.up-scope *::after { box-sizing: border-box; }

.up-scope {
    font-family: var(--up-font);
    background: var(--up-bg-app);
    color: var(--up-text-primary);
    font-size: var(--up-fs-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* ── ikon (Pasal 3) ───────────────────────────────────────────────────── */
/* Sprite <symbol> tidak boleh ikut tergambar; disembunyikan lewat kelas, bukan
   style="" inline yang dilarang aturan repo. */
.up-sprite { display: none; }

/* Ketebalan garis & bentuk ujung ditetapkan SEKALI di sini, bukan di tiap
   <symbol> — supaya mengubahnya cukup satu tempat. */
.up-ic {
    width: var(--up-icon);
    height: var(--up-icon);
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--up-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
}
.up-ic--sm { width: var(--up-icon-sm); height: var(--up-icon-sm); }
.up-ic--lg { width: 20px; height: 20px; }

/* ── SIDEBAR (Pasal 10–13) ────────────────────────────────────────────── */
.up-side {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--up-sidebar-w);
    background: var(--up-bg-card);
    border-right: 1px solid var(--up-sidebar-border);
    padding: var(--up-sp-5) var(--up-sp-3);
    display: flex;
    flex-direction: column;
    z-index: 30;
}

.up-brand {
    height: var(--up-brand-h);
    display: flex;
    align-items: center;
    gap: var(--up-sp-2);
    padding: 0 var(--up-sp-3);
    text-decoration: none;
    color: var(--up-text-primary);
    flex: none;
}
.up-brand__mark {
    width: 26px;
    height: 26px;
    border-radius: var(--up-radius-md);
    background: var(--up-primary-light);
    color: var(--up-primary);
    display: grid;
    place-items: center;
    flex: none;
}
.up-brand__name {
    font-size: var(--up-fs-subtitle);
    font-weight: var(--up-fw-semi);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.up-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;                       /* Pasal 12: jarak antar item */
    margin-top: var(--up-sp-2);
    overflow-y: auto;
}
.up-nav__item {
    display: flex;
    align-items: center;
    gap: 11px;                      /* Pasal 12 */
    height: var(--up-h-sidebar-item);
    padding: 0 var(--up-sp-3);
    border-radius: var(--up-radius-nav);
    font-size: var(--up-fs-body);
    font-weight: var(--up-fw-med);
    color: var(--up-sidebar-item-tx);
    text-decoration: none;
    background: transparent;
    transition: background var(--up-transition), color var(--up-transition);
    white-space: nowrap;
}
.up-nav__item:hover { background: var(--up-sidebar-item-hover); color: var(--up-sidebar-item-tx); }
.up-nav__item.is-active {
    background: var(--up-sidebar-item-active-bg);
    color: var(--up-sidebar-item-active-tx);
    font-weight: var(--up-fw-med);
}
.up-nav__item.is-active .up-ic { color: var(--up-sidebar-item-active-ic); }
.up-nav__item:focus-visible {
    outline: 2px solid var(--up-primary);
    outline-offset: 1px;
}

/* Pemisah antara 11 menu produk (Pasal 13) dan menu ADMIN. Menandai bahwa yang
   di bawahnya BUKAN bagian dari urutan menu yang dikunci owner. */
.up-nav__pisah {
    display: block;
    height: 1px;
    background: var(--up-border);
    margin: var(--up-sp-2) var(--up-sp-3);
}

/* Kaki sidebar — didorong ke bawah, tetap terlihat tanpa menggulir nav. */
.up-side__foot {
    margin-top: auto;
    padding-top: var(--up-sp-2);
    border-top: 1px solid var(--up-border);
}

/* ── AREA KONTEN (Pasal 14) ───────────────────────────────────────────── */
.up-main {
    margin-left: var(--up-sidebar-w);
    padding: var(--up-page-pad) var(--up-page-pad) var(--up-sp-8);
    /* Pasal 14: lebar maksimum TIDAK dibatasi — pakai lebar layar. */
}

/* ── PAGE HEADER (Pasal 15) ───────────────────────────────────────────── */
.up-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--up-sp-4);
    margin-bottom: var(--up-sp-5);   /* Pasal 15: 20px */
    flex-wrap: wrap;
}
.up-head__title {
    font-size: var(--up-fs-title);
    line-height: var(--up-lh-title);
    font-weight: var(--up-fw-bold);
    letter-spacing: -0.5px;
    color: var(--up-text-primary);
    margin: 0;
}
.up-head__sub {
    font-size: var(--up-fs-subtitle);
    line-height: var(--up-lh-subtitle);
    font-weight: var(--up-fw-reg);
    color: var(--up-text-secondary);
    margin: 2px 0 0;                 /* Pasal 5 */
}
.up-head__right {
    display: flex;
    align-items: center;
    gap: var(--up-sp-2);
    flex-wrap: wrap;
}

/* ── SEARCH (Pasal 16) ────────────────────────────────────────────────── */
.up-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 280px;
    height: var(--up-h-search);
}
.up-search .up-ic {
    position: absolute;
    left: 10px;
    color: var(--up-text-muted);
    pointer-events: none;
}
.up-search input {
    width: 100%;
    height: 100%;
    padding: 0 var(--up-sp-3) 0 34px;
    background: var(--up-search-bg);
    border: 1px solid var(--up-search-border);
    border-radius: var(--up-radius-md);
    font-family: inherit;
    font-size: var(--up-fs-meta);
    color: var(--up-text-primary);
}
.up-search input::placeholder { color: var(--up-text-muted); }
.up-search input:focus {
    outline: none;
    border-color: var(--up-focus-border);
    box-shadow: var(--up-focus-ring);
}

/* ── TOMBOL (Pasal 17) ────────────────────────────────────────────────── */
.up-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;                        /* Pasal 17 */
    height: var(--up-h-btn);
    padding: 0 var(--up-sp-4);
    border-radius: var(--up-radius-md);
    border: 1px solid var(--up-border-strong);
    background: var(--up-bg-card);
    color: var(--up-text-primary);
    font-family: inherit;
    font-size: var(--up-fs-body);
    font-weight: var(--up-fw-med);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--up-transition), border-color var(--up-transition);
}
.up-btn:hover { background: var(--up-hover-soft); }
.up-btn:focus-visible { outline: none; box-shadow: var(--up-focus-ring); }
.up-btn:disabled { opacity: 0.5; cursor: default; }

.up-btn--primary {
    background: var(--up-btn-primary-bg);
    border-color: var(--up-btn-primary-bg);
    color: var(--up-bg-card);
    font-weight: var(--up-fw-semi);   /* Pasal 17 */
}
.up-btn--primary:hover {
    background: var(--up-btn-primary-hover);
    border-color: var(--up-btn-primary-hover);
}
.up-btn--ghost { border-color: transparent; background: transparent; }
.up-btn--ghost:hover { background: var(--up-hover-soft); }

/* Tombol ikon bulat kecil — notifikasi, more menu (Pasal 32). */
.up-iconbtn {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    border-radius: var(--up-radius-sm);
    color: var(--up-text-secondary);
    cursor: pointer;
    transition: background var(--up-transition);
}
.up-iconbtn:hover { background: var(--up-hover-soft); }
.up-iconbtn--lg { width: var(--up-h-btn); height: var(--up-h-btn); }

/* ── USER CHIP (Pasal 15) ─────────────────────────────────────────────── */
.up-user {
    display: flex;
    align-items: center;
    gap: var(--up-sp-2);
    height: var(--up-h-btn);
    padding: 0 var(--up-sp-2);
    border-radius: var(--up-radius-md);
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    transition: background var(--up-transition);
}
.up-user:hover { background: var(--up-hover-soft); }
.up-user__ava {
    width: 26px;
    height: 26px;
    border-radius: var(--up-radius-pill);
    background: var(--up-primary-light);
    color: var(--up-primary);
    display: grid;
    place-items: center;
    font-size: var(--up-fs-small);
    font-weight: var(--up-fw-semi);
    flex: none;
}
.up-user__name {
    font-size: var(--up-fs-meta);
    font-weight: var(--up-fw-med);
    color: var(--up-text-primary);
}

/* ── KARTU (Pasal 18) ─────────────────────────────────────────────────── */
.up-card {
    background: var(--up-bg-card);
    border: 1px solid var(--up-border);
    border-radius: var(--up-radius-card);
    box-shadow: var(--up-shadow-card);
}
.up-card--pad { padding: var(--up-sp-4); }
.up-card--pad-lg { padding: var(--up-sp-5); }

.up-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--up-sp-3);
    padding: var(--up-sp-4) var(--up-sp-4) 0;
}
.up-card--pad > .up-card__head,
.up-card--pad-lg > .up-card__head { padding: 0; }
.up-card__title {
    font-size: var(--up-fs-section);
    line-height: var(--up-lh-section);
    font-weight: var(--up-fw-semi);
    color: var(--up-text-primary);
    margin: 0;
}

/* ── GRID SECTION (Pasal 65) ──────────────────────────────────────────── */
.up-stack { display: flex; flex-direction: column; gap: var(--up-sp-4); }
.up-row { display: flex; gap: var(--up-sp-3); flex-wrap: wrap; }

/* ── KPI (Pasal 19, 20) ───────────────────────────────────────────────── */
.up-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--up-sp-3);
}
.up-kpi {
    background: var(--up-bg-card);
    border: 1px solid var(--up-border);
    border-radius: var(--up-radius-card);
    box-shadow: var(--up-shadow-card);
    min-height: 102px;               /* Pasal 19 */
    padding: 14px var(--up-sp-4);    /* Pasal 19 */
    display: flex;
    flex-direction: column;
    gap: var(--up-sp-2);
}
.up-kpi__top { display: flex; align-items: center; gap: var(--up-sp-2); }
.up-kpi__ico {
    width: var(--up-h-kpi-icon);
    height: var(--up-h-kpi-icon);
    border-radius: 10px;             /* Pasal 19 */
    display: grid;
    place-items: center;
    flex: none;
}
.up-kpi__label {
    font-size: var(--up-fs-card-title);
    font-weight: var(--up-fw-med);
    color: var(--up-text-secondary);
    line-height: 1.35;
}
.up-kpi__val {
    font-size: var(--up-fs-kpi);
    line-height: var(--up-lh-kpi);
    font-weight: var(--up-fw-bold);
    color: var(--up-text-primary);
    font-variant-numeric: tabular-nums;
}
.up-kpi__foot { display: flex; align-items: center; gap: var(--up-sp-2); margin-top: auto; }

/* ── PROGRESS BAR (Pasal 20, 30) ──────────────────────────────────────── */
.up-bar {
    flex: 1;
    height: 7px;                     /* Pasal 20 */
    background: var(--up-track);
    border-radius: var(--up-radius-pill);
    overflow: hidden;
    min-width: 40px;
}
.up-bar__fill {
    height: 100%;
    border-radius: var(--up-radius-pill);
    background: var(--up-success);
}
.up-bar__fill--warning { background: var(--up-warning); }
.up-bar__fill--danger { background: var(--up-danger); }
.up-pct {
    font-size: var(--up-fs-small);
    color: var(--up-text-secondary);
    font-variant-numeric: tabular-nums;
    flex: none;
}
/* Progress di dalam tabel (Pasal 30) */
.up-bar--table { max-width: 115px; min-width: 90px; }

/* ── BULATAN TAHAP (Pasal 8, 21, 29) ──────────────────────────────────── */
.up-stage {
    width: 44px;
    height: 44px;
    border-radius: var(--up-radius-pill);
    display: grid;
    place-items: center;
    flex: none;
}
.up-stage--ideation   { background: var(--up-stage-ideation-bg);   color: var(--up-stage-ideation-ic); }
.up-stage--supplier   { background: var(--up-stage-supplier-bg);   color: var(--up-stage-supplier-ic); }
.up-stage--formula    { background: var(--up-stage-formula-bg);    color: var(--up-stage-formula-ic); }
.up-stage--packaging  { background: var(--up-stage-packaging-bg);  color: var(--up-stage-packaging-ic); }
.up-stage--design     { background: var(--up-stage-design-bg);     color: var(--up-stage-design-ic); }
.up-stage--bpom       { background: var(--up-stage-bpom-bg);       color: var(--up-stage-bpom-ic); }
.up-stage--po         { background: var(--up-stage-po-bg);         color: var(--up-stage-po-ic); }
.up-stage--production { background: var(--up-stage-production-bg); color: var(--up-stage-production-ic); }
.up-stage--launch     { background: var(--up-stage-launch-bg);     color: var(--up-stage-launch-ic); }

/* ── BADGE STATUS PRODUK (Pasal 31) ───────────────────────────────────── */
.up-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--up-sp-1);
    height: var(--up-h-badge-status);
    padding: 0 10px;                 /* Pasal 31 */
    border-radius: 7px;
    font-size: var(--up-fs-small);
    font-weight: var(--up-fw-med);
    white-space: nowrap;
}
.up-badge::before {
    content: '';
    width: 6px;                      /* Pasal 31: titik status 6px */
    height: 6px;
    border-radius: var(--up-radius-pill);
    background: currentColor;
    flex: none;
}
.up-badge--ontrack   { background: var(--up-st-ontrack-bg);   color: var(--up-st-ontrack-tx); }
.up-badge--atrisk    { background: var(--up-st-atrisk-bg);    color: var(--up-st-atrisk-tx); }
.up-badge--delayed   { background: var(--up-st-delayed-bg);   color: var(--up-st-delayed-tx); }
.up-badge--completed { background: var(--up-st-completed-bg); color: var(--up-st-completed-tx); }
.up-badge--paused    { background: var(--up-st-paused-bg);    color: var(--up-st-paused-tx); }

/* ── BADGE KATEGORI (Pasal 28) ────────────────────────────────────────── */
.up-cat {
    display: inline-flex;
    align-items: center;
    height: var(--up-h-badge-cat);
    padding: 0 var(--up-sp-2);
    border-radius: 7px;
    font-size: var(--up-fs-small);
    font-weight: var(--up-fw-med);
    white-space: nowrap;
}
.up-cat--skincare { background: var(--up-blue-light);    color: var(--up-blue); }
.up-cat--makeup   { background: var(--up-pink-light);    color: var(--up-pink); }
.up-cat--haircare { background: var(--up-success-light); color: var(--up-success); }
.up-cat--bodycare { background: var(--up-warning-light); color: var(--up-warning); }
.up-cat--lipcare  { background: var(--up-primary-light); color: var(--up-primary); }

/* ── TAB FILTER SEGMENTED (Pasal 24) ──────────────────────────────────── */
.up-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.up-tab {
    display: inline-flex;
    align-items: center;
    height: var(--up-h-tab);
    padding: 0 13px;                 /* Pasal 24 */
    border-radius: var(--up-radius-md);
    border: none;
    background: var(--up-tab-bg);
    color: var(--up-text-secondary);
    font-family: inherit;
    font-size: var(--up-fs-meta);
    font-weight: var(--up-fw-med);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--up-transition), color var(--up-transition);
}
.up-tab:hover { background: var(--up-hover-soft); color: var(--up-text-secondary); }
.up-tab.is-active {
    background: var(--up-tab-active-bg);
    color: var(--up-tab-active-tx);
}

/* ── TABEL (Pasal 25–27) ──────────────────────────────────────────────── */
/* HARUS terasa ringan. Tanpa garis vertikal, tanpa border tebal, tanpa
   zebra kuat, tanpa header gelap — lihat larangan di Pasal 25. */
.up-tablewrap { overflow-x: auto; }
.up-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--up-fs-body);
}
.up-table thead th {
    background: var(--up-table-head-bg);
    height: var(--up-h-table-head);
    padding: 0 var(--up-sp-3);
    text-align: left;
    font-size: var(--up-fs-small);
    font-weight: var(--up-fw-med);
    color: var(--up-text-secondary);
    white-space: nowrap;
    border-bottom: 1px solid var(--up-table-row-line);
}
.up-table tbody td {
    height: var(--up-h-table-row);
    padding: var(--up-sp-2) var(--up-sp-3);
    border-bottom: 1px solid var(--up-table-row-line);  /* HANYA horizontal */
    color: var(--up-table-text);
    font-weight: var(--up-fw-med);
    vertical-align: middle;
}
.up-table tbody tr:last-child td { border-bottom: none; }
.up-table tbody tr:hover { background: var(--up-table-row-hover); }
.up-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.up-table .ctr { text-align: center; }

/* Sel produk (Pasal 27) */
.up-prod { display: flex; align-items: center; gap: 9px; }
.up-prod__thumb {
    width: 32px;
    height: 32px;
    border-radius: var(--up-radius-sm);
    background: var(--up-thumb-bg);
    flex: none;
    display: grid;
    place-items: center;
    color: var(--up-text-muted);
    overflow: hidden;
}
.up-prod__thumb img { width: 100%; height: 100%; object-fit: cover; }
.up-prod__name {
    font-size: var(--up-fs-body);
    font-weight: var(--up-fw-semi);
    color: var(--up-text-primary);
    line-height: 1.3;
}
.up-prod__code {
    font-size: var(--up-fs-small);
    font-weight: var(--up-fw-reg);
    color: var(--up-text-muted);
    line-height: 1.3;
}

/* Ikon status tahap di dalam tabel (Pasal 29) */
.up-dot {
    width: 22px;
    height: 22px;
    border-radius: var(--up-radius-pill);
    display: inline-grid;
    place-items: center;
    flex: none;
}
.up-dot .up-ic { width: 13px; height: 13px; stroke-width: 2.25; }
.up-dot--done { background: var(--up-success); color: var(--up-bg-card); }
.up-dot--prog { background: transparent; border: 1.75px solid var(--up-warning); color: var(--up-warning); }
.up-dot--wait { background: var(--up-track); color: var(--up-text-muted); }
.up-dot--block { background: transparent; border: 1.75px solid var(--up-danger); color: var(--up-danger); }

/* ── FORM (Pasal 40) ──────────────────────────────────────────────────── */
.up-label {
    display: block;
    font-size: var(--up-fs-meta);
    font-weight: var(--up-fw-med);
    color: var(--up-sidebar-item-tx);
    margin-bottom: var(--up-sp-1);
}
.up-input {
    width: 100%;
    height: var(--up-h-input);
    padding: 0 var(--up-sp-3);
    background: var(--up-bg-card);
    border: 1px solid var(--up-border-strong);
    border-radius: var(--up-radius-md);
    font-family: inherit;
    font-size: var(--up-fs-body);
    color: var(--up-text-primary);
}
.up-input--lg { height: var(--up-h-input-lg); }
.up-input:focus {
    outline: none;
    border-color: var(--up-focus-border);
    box-shadow: var(--up-focus-ring);
}
.up-help { font-size: var(--up-fs-small); color: var(--up-text-muted); margin-top: var(--up-sp-1); }

/* ── EMPTY STATE (Pasal 58) ───────────────────────────────────────────── */
/* Minimal: ikon Lucide, judul singkat, penjelasan singkat, CTA opsional.
   DILARANG ilustrasi raksasa. */
.up-empty {
    padding: var(--up-sp-12) var(--up-sp-5);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--up-sp-2);
}
.up-empty__ico {
    width: 44px;
    height: 44px;
    border-radius: var(--up-radius-card);
    background: var(--up-track);
    color: var(--up-text-muted);
    display: grid;
    place-items: center;
    margin-bottom: var(--up-sp-1);
}
.up-empty__title {
    font-size: var(--up-fs-subtitle);
    font-weight: var(--up-fw-semi);
    color: var(--up-text-primary);
}
.up-empty__desc {
    font-size: var(--up-fs-meta);
    color: var(--up-text-secondary);
    max-width: 44ch;
}
/* CTA opsional di empty state — jaraknya dari komponen, bukan style inline. */
.up-empty .up-btn { margin-top: var(--up-sp-2); }

/* ── SKELETON (Pasal 57) ──────────────────────────────────────────────── */
/* Ukurannya harus sama dengan komponen akhir. DILARANG spinner raksasa. */
.up-skel {
    background: var(--up-track);
    border-radius: var(--up-radius-sm);
    animation: up-pulse 1.4s ease-in-out infinite;
}
@keyframes up-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
    .up-skel { animation: none; }
    .up-scope * { transition: none !important; }
}

/* ── RESPONSIF (Pasal 59) ─────────────────────────────────────────────── */
/* Target utama 1440px, baik di 1280–1920px. Desktop kecil: KPI wrap, tabel
   gulir horizontal. Mobile SEKUNDER — jangan rusak kualitas desktop. */
@media (max-width: 1500px) {
    .up-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .up-side { transform: translateX(-100%); transition: transform var(--up-transition); }
    .up-side.is-open { transform: none; }
    .up-main { margin-left: 0; }
    .up-search { width: 200px; }
}
@media (max-width: 720px) {
    .up-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .up-head__title { font-size: var(--up-fs-kpi); line-height: var(--up-lh-kpi); }
    .up-search { width: 100%; }
}

/* ── MODAL (Pasal 40–42) ──────────────────────────────────────────────── */
/* Pasal 42 sudah menetapkan bentuknya sejak awal, tapi komponennya belum
 * pernah dibangun sampai layar Update Lajur membutuhkannya (owner 30 Sep
 * 2026). Jadi ini BUKAN gaya baru — pasal yang akhirnya diwujudkan, dan
 * ditaruh di berkas bersama supaya modal berikutnya tidak dibikin ulang
 * dengan padding yang beda beberapa piksel (Pasal 60).
 *
 * Nilainya apa adanya dari Pasal 42: overlay rgba(15,23,42,.30), latar putih,
 * radius 14px, lebar tipikal 520px, padding 22–24px, judul 18px/600,
 * deskripsi 13px sekunder, tombol footer rata kanan.
 *
 * PENTING: modal WAJIB ditempel di dalam .up-scope, bukan <body>. Token
 * --up-* di-scope ke kelas itu; di luarnya setiap var() kosong dan modalnya
 * kehilangan seluruh warna tanpa satu pun pesan error. */
.up-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: var(--up-sp-4);
    background: var(--up-overlay);
}
.up-modal__kotak {
    width: 520px;
    max-width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--up-bg-card);
    border-radius: var(--up-radius-modal);
    box-shadow: var(--up-shadow-dropdown);
}
.up-modal__kotak--lebar { width: 760px; }     /* Pasal 42: varian besar */
.up-modal__kepala { padding: 22px 22px 0; }
.up-modal__judul {
    margin: 0;
    font-size: 18px;
    line-height: 26px;
    font-weight: var(--up-fw-semi);
    color: var(--up-text-primary);
}
.up-modal__sub {
    margin: var(--up-sp-1) 0 0;
    font-size: var(--up-fs-body);
    color: var(--up-text-secondary);
}
.up-modal__isi { padding: var(--up-sp-4) 22px; overflow-y: auto; }
.up-modal__kaki {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--up-sp-2);
    padding: var(--up-sp-3) 22px 22px;
    border-top: 1px solid var(--up-border);
}
.up-modal__kaki .up-help { margin-right: auto; margin-top: 0; }

/* Pilihan bertingkat — judul + penjelasan singkat, satu klik sudah cukup. */
.up-pilih { display: flex; flex-direction: column; gap: var(--up-sp-2); }
.up-pilih__i {
    display: flex;
    align-items: flex-start;
    gap: var(--up-sp-3);
    padding: var(--up-sp-3);
    border: 1px solid var(--up-border);
    border-radius: var(--up-radius-md);
    cursor: pointer;
    transition: background var(--up-transition), border-color var(--up-transition);
}
.up-pilih__i:hover { background: var(--up-hover-soft); }
.up-pilih__i.is-active { border-color: var(--up-focus-border); background: var(--up-primary-light); }
.up-pilih__i input { margin: 3px 0 0; accent-color: var(--up-primary); }
.up-pilih__t { display: block; font-size: var(--up-fs-body); font-weight: var(--up-fw-med); color: var(--up-text-primary); }
.up-pilih__d { display: block; margin-top: 2px; font-size: var(--up-fs-small); color: var(--up-text-secondary); }

/* Textarea memakai rangka .up-input yang sama supaya tingginya tidak diarang
   per halaman (Pasal 62 mengunci tinggi kontrol, bukan melarang textarea). */
textarea.up-input {
    min-height: 74px;
    height: auto;
    padding: var(--up-sp-2) var(--up-sp-3);
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}
.up-help.is-salah { color: var(--up-st-delayed-tx); }