/* ============================================
   OAFINDO-STYLE — Sidebar gelap + chrome korporat
   Dimuat paling akhir agar meng-override main.css.
   Mudah dibalik: hapus 1 <link> di index.html.
   ============================================ */

/* ---------- Sidebar gelap ---------- */
.sidebar {
    background: #0f172a !important;
    border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.sidebar-logo {
    color: #ffffff;
}

/* Logo gambar dipaksa putih agar kontras di sidebar gelap */
.sidebar-logo-full,
.sidebar-logo-icon {
    filter: brightness(0) invert(1);
    opacity: 0.96;
}

/* Label section "MENU" */
.nav-label {
    color: #64748b;
    font-weight: 600;
    letter-spacing: 0.6px;
}

/* Item menu */
.nav-link {
    color: #cbd5e1;
    font-weight: 500;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

/* Active: pill hijau halus + ikon hijau terang, tanpa bar kiri */
.nav-item.active .nav-link {
    background: rgba(34, 197, 94, 0.15);
    color: #ffffff;
}

.nav-item.active .nav-link i {
    color: #4ade80;
}

.nav-link::before {
    display: none !important;
}

.nav-link i {
    color: #94a3b8;
}

.nav-link:hover i,
.nav-item.active .nav-link:hover i {
    color: inherit;
}

/* Badge counter di item menu (mis. Approval) tetap kontras */
.nav-link .badge,
#approval-badge,
#pengajuan-badge {
    margin-left: auto;
}

/* ---------- Footer user di sidebar ---------- */
.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.user-name {
    color: #f1f5f9;
}

.user-role {
    color: #94a3b8;
}

.btn-logout {
    color: #94a3b8;
}

.btn-logout:hover {
    background: rgba(239, 68, 68, 0.9);
    color: #ffffff;
}

/* ---------- Toggle collapse ---------- */
.sidebar-toggle {
    color: #94a3b8;
}

.sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* ---------- Top bar lebih bersih ---------- */
.top-bar {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* ---------- Konten: latar abu lembut ala SaaS ---------- */
body {
    background-color: #f1f5f9 !important;
}

/* Kartu sedikit lebih lembut (radius + border halus) */
.card,
.stat-card,
.dashboard-card,
.data-card {
    border: 1px solid #e9eef4;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    border-radius: 14px;
}

/* ---------- Tabel ala Oafindo (clean, lapang) ---------- */
.reports-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.reports-table thead th {
    background: #f8fafc;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    padding: 12px 16px !important;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.reports-table tbody td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #334155;
    vertical-align: middle;
}

.reports-table tbody tr {
    transition: background 0.12s ease;
    border-bottom: none !important;
}

.reports-table tbody tr:hover {
    background: #f8fafc;
}

.reports-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Pill/badge dalam tabel sedikit lebih rapi */
.reports-table .badge,
.reports-table .status-badge {
    font-weight: 600;
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 11.5px;
}

/* ============================================
   POLISH SIDEBAR — jarak, font, ikon rapi
   (override main.css, dimuat paling akhir)
   ============================================ */

/* Header & logo: padding lega, logo proporsional */
.sidebar-header {
    padding: 18px 20px;
    min-height: 68px;
}
.sidebar-logo-full { height: 30px; }
.sidebar-logo-icon { height: 30px; }

/* Area nav: ritme vertikal lebih rapat & teratur */
.sidebar-nav {
    padding: 12px 0 16px;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}
.nav-section { margin-bottom: 18px; }
.nav-section:last-child { margin-bottom: 4px; }

/* Label section: kecil, kalem, jarak konsisten */
.nav-label {
    padding: 0 20px;
    margin-bottom: 8px;
    font-size: 10.5px;
    letter-spacing: 0.7px;
}

/* Item menu: padding seimbang, font 14px, ikon sejajar */
.nav-list { padding: 0 12px; }
.nav-item { margin-bottom: 3px; }
.nav-link {
    gap: 12px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}
.nav-link i {
    font-size: 16px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.nav-link span { font-size: 14px; }

/* Active pill sedikit lebih tegas */
.nav-item.active .nav-link { font-weight: 600; }

/* Footer user: rapi, sejajar */
.sidebar-footer { padding: 14px 16px; }
.user-name { font-size: 13.5px; }
.user-role { font-size: 11.5px; }

/* ---------- RAIL MODE (collapsed) ---------- */
.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
.sidebar.collapsed .nav-list { padding: 0 10px; }
.sidebar.collapsed .nav-link {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
    position: relative;
}
.sidebar.collapsed .nav-link i { width: auto; }

/* Label jadi tooltip mengambang saat hover (bukan badge ber-id) */
.sidebar.collapsed .nav-link > span:not([id]) {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    width: auto;
    height: auto;
    padding: 6px 11px;
    background: #0f172a;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
    transition: opacity 0.15s ease;
    z-index: 300;
}
.sidebar.collapsed .nav-link:hover > span:not([id]) { opacity: 1; }

/* Badge counter jadi titik kecil di pojok ikon saat collapsed */
.sidebar.collapsed .nav-link > span[id] {
    position: absolute;
    top: 6px;
    right: 14px;
    min-width: 9px;
    width: 9px;
    height: 9px;
    padding: 0;
    margin: 0 !important;
    font-size: 0;
    line-height: 0;
    border-radius: 50%;
}

/* Footer collapsed: avatar di tengah, sisanya disembunyikan */
.sidebar.collapsed .user-profile { justify-content: center; }
.sidebar.collapsed .btn-logout { display: none; }

/* Active state di collapsed tetap kebaca: pill penuh */
.sidebar.collapsed .nav-item.active .nav-link {
    background: rgba(34, 197, 94, 0.16);
}

/* ============================================
   TOP BAR — satu baris ringkas (toggle + judul + jam)
   ============================================ */
.top-bar {
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: 60px;
}
/* .top-bar-left tak punya style di main.css → tombol & <h1> menumpuk ke bawah. Jadikan 1 baris. */
.top-bar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.page-title {
    font-size: 19px;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.current-time { line-height: 1.15; }
.current-time .time { font-size: 15px; }

/* ============================================
   COLLAPSE lebih mulus (kurangi reflow saat menyempit)
   ============================================ */
.sidebar {
    transition: width 0.22s ease;
    will-change: width;
}
.main-content,
.sidebar.collapsed ~ .main-content {
    transition: margin-left 0.22s ease;
}
/* Teks menu tak membungkus saat sidebar menyempit = sumber utama "ngadat" hilang */
.nav-link { white-space: nowrap; overflow: hidden; }
.nav-link span { white-space: nowrap; }

/* ============================================
   DASHBOARD — elegant corporate (gaya Oafindo)
   ============================================ */
.oaf-welcome {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin: 4px 0 24px;
}
.oaf-welcome h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.8px;
    line-height: 1.15;
}
.oaf-welcome-sub { margin: 8px 0 0; font-size: 14.5px; color: #64748b; }
.oaf-welcome-date { margin: 3px 0 0; font-size: 12px; color: #94a3b8; }
.oaf-refresh {
    background: #fff;
    color: #475569;
    border: 1px solid #e2e8f0;
    padding: 9px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.oaf-refresh:hover { background: #f8fafc; border-color: #cbd5e1; color: #15803d; }

.oaf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}
.oaf-stat {
    background: #fff;
    border: 1px solid #e9eef4;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.oaf-stat:hover { box-shadow: 0 12px 26px -12px rgba(15, 23, 42, 0.18); transform: translateY(-1px); }
.oaf-stat.clickable { cursor: pointer; }
.oaf-stat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.oaf-stat-label { font-size: 13.5px; font-weight: 600; color: #64748b; }
.oaf-stat-ico {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.oaf-stat-value {
    font-size: 27px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.05;
    letter-spacing: -0.6px;
}
.oaf-stat-value small { font-size: 14px; font-weight: 600; color: #94a3b8; letter-spacing: 0; }
.oaf-stat-value.warn { color: #ea580c; }
.oaf-stat-value.good { color: #15803d; }
.oaf-stat-desc { font-size: 12.5px; color: #94a3b8; margin-top: 9px; }
.oaf-stat-desc.link { color: #15803d; font-weight: 500; }

@media (max-width: 640px) {
    .oaf-welcome h1 { font-size: 24px; }
    /* HP: kartu dashboard 2 per baris (lebih rapi & ringkas) */
    .oaf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
    .oaf-stat { padding: 14px 13px; border-radius: 14px; }
    .oaf-stat-head { margin-bottom: 8px; }
    .oaf-stat-label { font-size: 12px; }
    .oaf-stat-ico { width: 32px; height: 32px; border-radius: 10px; font-size: 14px; }
    .oaf-stat-value { font-size: 23px; letter-spacing: -0.4px; }
    .oaf-stat-value small { font-size: 11px; }
    .oaf-stat-desc { font-size: 11px; margin-top: 5px; }
}

/* ============================================
   PENGATURAN — hub kartu (gaya Kledo)
   ============================================ */
.set-group-title {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 18px 0 12px;
}
.set-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 6px;
}
.set-card {
    background: #fff;
    border: 1px solid #e9eef4;
    border-radius: 16px;
    padding: 22px 20px;
    cursor: pointer;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.set-card:hover {
    box-shadow: 0 12px 26px -12px rgba(15, 23, 42, 0.16);
    transform: translateY(-2px);
    border-color: #dbe3ec;
}
.set-card-ico {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    margin-bottom: 14px;
}
.set-card h4 { margin: 0; font-size: 14.5px; font-weight: 700; color: #0f172a; }
.set-card p { margin: 5px 0 0; font-size: 12px; color: #94a3b8; line-height: 1.4; }
#set-back:hover { background: #f8fafc; border-color: #cbd5e1; color: #15803d; }

/* ============================================
   PENGINGAT PIUTANG — tabel responsif (kurangi scroll horizontal)
   Kolom kurang penting otomatis hilang & sel mengecil di layar sempit.
   Prioritas tetap tampil: Customer, Sisa Tagihan, Status, Tindakan.
   ============================================ */
#piutang-tbl .pi-aksi-sel { min-width: 150px; }
#piutang-tbl .pi-aksi-inp { min-width: 130px; }

/* Layar makin sempit → sembunyikan bertahap dari yang paling kurang penting */
@media (max-width: 1300px) {
    #piutang-tbl .pi-c-ket { display: none; }          /* Keterangan (input lebar) */
}
@media (max-width: 1080px) {
    #piutang-tbl .pi-c-inv { display: none; }           /* No. Invoice (customer jadi penanda utama) */
}
@media (max-width: 920px) {
    #piutang-tbl .pi-c-date { display: none; }          /* Tgl Jatuh Tempo (Umur & Status sudah mewakili) */
}
@media (max-width: 760px) {
    #piutang-tbl .pi-c-umur { display: none; }          /* Umur (badge Status sudah menunjukkan kategori) */
    #piutang-tbl th, #piutang-tbl td { padding: 9px 8px !important; }
    #piutang-tbl .pi-aksi-sel, #piutang-tbl .pi-aksi-inp { min-width: 0; font-size: 11px; padding: 5px 6px; }
    #piutang-tbl { font-size: 12px; }
}

/* ============================================
   KPI & JOBDESK — tampilan rapi ala ERP Oafindo
   (header lepas, tab pill, tabel lapang, chip)
   Dipakai halaman /kpi (admin-kpi.js + index.html)
   ============================================ */

.kpix-head { margin-bottom: 18px; }
.kpix-head-title { font-size: 26px; font-weight: 800; color: #0f172a; margin: 0; letter-spacing: -0.3px; }
.kpix-head-title i { color: #15803d; font-size: 21px; }
.kpix-head-sub { color: #64748b; font-size: 14px; margin: 5px 0 0; }
.kpix-head-chip { display: inline-block; vertical-align: 2px; background: #f0fdf4; color: #14532d; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; margin-left: 8px; letter-spacing: 0.2px; }

/* Tab pill (aktif = terisi hijau) */
.kpix-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.kpix-pill { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #e5e7eb; color: #0f172a; border-radius: 8px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; }
.kpix-pill:hover { border-color: #d1d5db; background: #f8fafc; }
.kpix-pill.active { background: #15803d; border-color: #15803d; color: #fff; font-weight: 700; }
.kpix-pill.active:hover { background: #166534; }
.kpix-badge { background: #f97316; color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 800; line-height: 1.5; }

/* Baris periode: label kiri, dropdown kanan */
.kpix-period-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kpix-period-label { font-size: 14px; color: #475569; }
.kpix-period-label b { color: #0f172a; }
.kpix-select { padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; background: #fff; color: #0f172a; }

/* Kotak catatan abu lembut (penjelasan skor) */
.kpix-note { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 16px; font-size: 12px; color: #475569; line-height: 1.65; margin-bottom: 14px; }
.kpix-note b { color: #1e293b; }

.kpix-hint { color: #64748b; font-size: 12px; margin: 0 0 12px; }

/* Kartu pembungkus tabel + tabel lapang */
.kpix-card { border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; background: #fff; }
.kpix-scroll { overflow-x: auto; }
.kpix-table { width: 100%; border-collapse: collapse; }
.kpix-table thead th { padding: 10px 14px; font-size: 12px; color: #0f172a; font-weight: 600; background: #f8fafc; text-align: left; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.kpix-table tbody td { padding: 12px 14px; font-size: 14px; color: #475569; border-bottom: 1px solid #f1f5f9; }
.kpix-table tbody tr:last-child td { border-bottom: none; }
.kpix-table tbody tr.kpix-row-click { cursor: pointer; }
.kpix-table tbody tr.kpix-row-click:hover { background: #fafcff; }
.kpix-name { font-weight: 600; color: #0f172a; font-size: 14px; }

/* Skala tipografi KPI diseragamkan 2026-09-01 (perbandingan langsung dgn erp.oafindo.com/kpi):
   Oafindo memakai tangga ukuran yang JAUH jaraknya (30 judul · 18 skor · 16 judul kartu ·
   14 isi · 12 label) dan HANYA SATU angka besar per baris; Bisatani sebelumnya punya 15 ukuran
   berdempetan 10–15,5px sehingga tak ada yang menonjol. Kini disisakan 12 / 14 / 16 (+18 skor).
   Penekanan memakai KETEBALAN, bukan ukuran. Warna garis kartu disatukan ke #e5e7eb. */
/* Chip */
.kpix-chip { display: inline-block; background: #f1f5f9; color: #475569; border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.kpix-chip-orange { display: inline-block; background: #f59e0b; color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.kpix-chip-red { display: inline-block; background: #fee2e2; color: #991b1b; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* Tombol: 1 warna utama per layar, sisanya putih berbingkai */
.kpix-btn { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #e5e7eb; color: #0f172a; border-radius: 8px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s; }
.kpix-btn:hover { background: #f8fafc; }
.kpix-btn-primary { display: inline-flex; align-items: center; gap: 7px; background: #15803d; border: 1px solid #15803d; color: #fff; border-radius: 8px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.kpix-btn-primary:hover { background: #166534; }
.kpix-btn-sm { padding: 6px 11px; font-size: 12px; }

/* Label kecil di atas kontrol filter */
.kpix-flabel { display: block; font-size: 12px; color: #64748b; margin-bottom: 4px; font-weight: 600; }

/* Keadaan kosong yang rapi */
.kpix-empty { text-align: center; color: #94a3b8; padding: 48px 20px; font-size: 14px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; }

/* Baris grup divisi di tabel approval */
.kpix-table .kpix-divrow td { background: #f8fafc; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; padding: 10px 14px; }

/* ============================================================
   HALAMAN SETTING ala Oafindo (2026-09-01)
   Angka di bawah DIUKUR LANGSUNG dari erp.oafindo.com/pengaturan (Chrome user).
   ⚠️ Oafindo memakai root font 18px; semua nilai sudah DIKONVERSI ke root 16px
   milik Bisatani (dibagi 1,125) supaya proporsinya identik, bukan sekadar mirip.
   Referensi asli → hasil konversi:
     panel radius 11,25px → 10px  ·  header padding 18px → 16px
     body padding 18px → 16px     ·  grid gap 13,5px → 12px (3 kolom)
     kartu padding 22,5px → 20px  ·  radius 15,75px → 14px  ·  gap ikon 18px → 16px
     kotak ikon 50px → 44px       ·  judul kartu 18px/600 → 16px/600
     deskripsi 15,75px → 14px     ·  warna teks #0a0a0a, deskripsi #737373
   ============================================================ */
.setx-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 24px;
    overflow: hidden;
}
.setx-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    cursor: pointer;
    user-select: none;
}
.setx-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #0a0a0a;
}
.setx-caret { font-size: 13px; color: #9ca3af; transition: transform 0.18s ease; }
.setx-panel.tertutup .setx-caret { transform: rotate(180deg); }
.setx-panel.tertutup .setx-body { display: none; }
.setx-body { border-top: 1px solid #e5e7eb; padding: 16px; }

/* Grid kartu di dalam panel: 3 kolom pada layar lebar (seperti Oafindo) */
#set-hub .set-grid, #setk-hub .set-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin: 0;
}

/* Kartu: ikon di KIRI, teks di kanan (dulu ikon di atas teks) */
#set-hub .set-card, #setk-hub .set-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: none;
}
#set-hub .set-card:hover, #setk-hub .set-card:hover {
    transform: none;
    box-shadow: none;
    border-color: #93c5fd;
    background: #fafafa;
}
#set-hub .set-card-ico, #setk-hub .set-card-ico {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 18px;
    margin-bottom: 0;
    flex: 0 0 auto;
}
.set-card-txt { flex: 1; min-width: 0; }
#set-hub .set-card h4, #setk-hub .set-card h4 { font-size: 16px; font-weight: 600; color: #0a0a0a; line-height: 24px; }
#set-hub .set-card p, #setk-hub .set-card p { margin: 4px 0 0; font-size: 14px; color: #737373; line-height: 20px; }

/* ============================================================
   HAK AKSES ala Oafindo (2026-09-01) — diukur dari erp.oafindo.com/pengaturan/akses,
   dikonversi dari root 18px ke root 16px Bisatani (÷1,125).
   Referensi → konversi: baris pad 13,5→12px · nama modul 15,75/500→14px/500
   · deskripsi 15,75→14px #737373 · checkbox 18→16px · badge radius 29,25→26px
   pad 2,25/9→2px 8px font 13,5→12px · tombol radius 9→8px font 14,4→13px
   ============================================================ */
.akx-lead { color: #737373; font-size: 14px; line-height: 20px; margin: 0 0 16px; }
.akx-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.akx-card + .akx-card { margin-top: 16px; }

/* Baris divisi pada layar daftar */
.akx-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; }
.akx-row + .akx-row { border-top: 1px solid #f1f5f9; }
.akx-row:hover { background: #fafafa; }
.akx-ico {
    width: 36px; height: 36px; flex: 0 0 auto;
    border-radius: 10px; background: #eff6ff; color: #2563eb;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.akx-ico-hijau { background: #f0fdf4; color: #15803d; }
.akx-txt { flex: 1; min-width: 0; }
.akx-nama { font-size: 15px; font-weight: 600; color: #0a0a0a; }
.akx-sub { font-size: 14px; color: #737373; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akx-badge {
    flex: 0 0 auto; border: 1px solid #e5e7eb; border-radius: 26px;
    padding: 2px 8px; font-size: 12px; font-weight: 500; color: #0a0a0a; white-space: nowrap;
}
.akx-arrow { color: #9ca3af; font-size: 12px; flex: 0 0 auto; }
.akx-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; }
.akx-note .akx-sub { white-space: normal; }

/* Layar detail satu divisi */
.akx-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer; margin-bottom: 10px; }
.akx-back:hover { color: #15803d; }
.akx-judul { font-size: 22px; font-weight: 800; color: #0a0a0a; letter-spacing: -0.3px; }
.akx-tools { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; }
.akx-btn {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 7px 12px; font-size: 13px; font-weight: 500; color: #0a0a0a; cursor: pointer;
}
.akx-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.akx-hitung { margin-left: auto; font-size: 13px; color: #737373; }
.akx-grup {
    padding: 10px 16px; background: #fafafa; border-bottom: 1px solid #f1f5f9;
    font-size: 12px; font-weight: 700; color: #64748b; letter-spacing: 0.4px; text-transform: uppercase;
}
.akx-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; }
.akx-item + .akx-item { border-top: 1px solid #f1f5f9; }
.akx-item:hover { background: #fafafa; }
.akx-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: #2563eb; flex: 0 0 auto; }
.akx-item-nama { font-size: 14px; font-weight: 500; color: #0a0a0a; }

/* Keterangan singkat tiap modul di layar detail Hak Akses (pola Oafindo:
   "Nama Modul · keterangan abu-abu"). Dibungkus agar bisa melipat rapi di layar sempit. */
.akx-item-txt { flex: 1; min-width: 0; }
.akx-item-desc { font-size: 14px; color: #737373; }

/* Izin BERTINGKAT (pola Oafindo): baris induk sedikit berlatar + penghitung "n/m",
   baris rincian menjorok ke kanan. */
.akx-item.akx-induk { background: #fafafa; }
.akx-item.akx-anak { padding-left: 44px; }
.akx-hitung-kecil { flex: 0 0 auto; font-size: 12px; color: #737373; }

/* Kepala tab Approval KPI — dirapatkan jadi 2 baris (2026-09-01).
   Baris 1: kalimat panduan + chip status di kanan. Baris 2: penyaring Divisi,
   tombol Approve Divisi (bila divisi dipilih), jumlah, lalu Refresh di kanan. */
.kpix-apvhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.kpix-apvbar { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.kpix-apvinfo { margin-left: auto; font-size: 12px; color: #737373; padding-bottom: 8px; }

/* Periode masa kerja ditulis kecil di samping tombol filter (menggantikan barisnya sendiri). */
.kpix-periodinline { font-size: 12px; color: #737373; padding-bottom: 8px; white-space: nowrap; }
.kpix-periodinline b { color: #0f172a; font-weight: 600; }
.kpix-apvinfo b { color: #0f172a; font-weight: 600; }

/* Stok Opname — bar kontrol + tabel isian */
.opn-bar { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.opn-ringkas { margin-left: auto; font-size: 13px; color: #475569; padding-bottom: 8px; }
.opn-table tbody td { padding: 8px 12px; vertical-align: middle; }
.opn-in { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; color: #0f172a; }
.opn-in:focus { outline: none; border-color: #93c5fd; background: #fafcff; }
/* Hasil hitungan di bawah isian Fisik ("10x7" -> "= 70"). Kosong saat yang diketik angka biasa,
   jadi tidak menambah tinggi baris untuk isian yang lazim. Dibuat mencolok karena inilah yang
   dipakai orang memeriksa hitungannya SEBELUM menekan Simpan. */
.opn-hasil:not(:empty) { margin-top: 3px; font-size: 12px; font-weight: 700; color: #15803d; }
.opn-acc { background: #f8fafc; }

/* Tombol "Tarik dari Accurate" — dibedakan (biru) karena inilah aksi utama sebelum menghitung */
.opn-tarik { border-color: #bfdbfe !important; color: #1d4ed8 !important; background: #eff6ff !important; }
.opn-tarik:hover:not(:disabled) { background: #dbeafe !important; }
.opn-tarik:disabled { opacity: .65; cursor: default; }
/* Jejak kecil di bawah nama item: nama padanannya di Accurate, atau ajakan menghubungkan */
.opn-acclbl { font-size: 11.5px; color: #94a3b8; margin-top: 2px; line-height: 1.4; }
.opn-belum { color: #b45309; cursor: pointer; }
.opn-belum:hover { text-decoration: underline; }
/* Ikon pensil kecil di belakang nama padanan Accurate — ganti padanan yang salah hubung */
.opn-editsku { margin-left: 5px; color: #94a3b8; cursor: pointer; font-size: 10.5px; }
.opn-editsku:hover { color: #15803d; }
.opn-tarikinfo { font-size: 11.5px; color: #64748b; }
/* Pemilih SKU */
.opn-modal { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 2000; align-items: center; justify-content: center; padding: 20px; }
.opn-modal-box { background: #fff; border-radius: 14px; width: 100%; max-width: 560px; max-height: 82vh; display: flex; flex-direction: column; padding: 16px; gap: 10px; box-shadow: 0 20px 50px rgba(15,23,42,.25); }
.opn-modal-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.opn-sku-list { overflow-y: auto; border: 1px solid #eef2f7; border-radius: 10px; }
.opn-sku-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid #f1f5f9; cursor: pointer; font-size: 13.5px; }
.opn-sku-row:last-child { border-bottom: none; }
.opn-sku-row:hover { background: #f8fafc; }
/* Sembunyikan / tampilkan item */
.opn-eye { background: none; border: none; cursor: pointer; color: #cbd5e1; font-size: 14px; padding: 4px 6px; border-radius: 6px; }
.opn-eye:hover { color: #475569; background: #f1f5f9; }
.opn-off { background: #fbfcfd; }
.opn-off .kpix-name { color: #94a3b8; text-decoration: line-through; }
.opn-off .opn-in { background: #f8fafc; color: #cbd5e1; }
.opn-off .opn-eye { color: #94a3b8; }
.opn-sembunyibar { margin-bottom: 10px; font-size: 13px; color: #475569; }
.opn-sembunyibar label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }

/* ---------- Opname 21 Sep 2026: layar dirapikan supaya gudang berhenti memakai spreadsheet ---------- */
/* Tab Isi Opname / Rekap Bulanan */
.opn-tabs { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid #eef2f7; }
.opn-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: #64748b; cursor: pointer; }
.opn-tab:hover { color: #0f172a; }
.opn-tab.aktif { color: #15803d; border-bottom-color: #15803d; }
/* Baris cari + saringan + batang kemajuan */
.opn-filterbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.opn-cari { position: relative; flex: 1 1 260px; max-width: 420px; }
.opn-cari i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 12.5px; }
.opn-cari input { width: 100%; box-sizing: border-box; padding: 9px 12px 9px 32px; border: 1px solid #e5e7eb; border-radius: 9px; font-size: 14px; }
.opn-cari input:focus { outline: none; border-color: #93c5fd; }
.opn-sw { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #475569; cursor: pointer; white-space: nowrap; }
.opn-progres { flex: 1 1 140px; max-width: 260px; height: 8px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.opn-progres-isi { height: 100%; width: 0; background: #60a5fa; border-radius: 999px; transition: width .2s; }
.opn-progres-isi.penuh { background: #22c55e; }
.opn-progres-teks { font-size: 12.5px; color: #64748b; white-space: nowrap; }
/* Pita pemberitahuan di atas tabel (satu gaya, beda warna) */
.opn-pita { border-radius: 10px; padding: 9px 14px; margin-bottom: 10px; font-size: 12.5px; border: 1px solid; }
.opn-pita-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.opn-pita-bahaya { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.opn-pita-hijau { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.opn-pita-draf { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.opn-pita-draf a { color: #b45309; font-weight: 600; }
.opn-table { min-width: 820px; }
.opn-nomor { color: #94a3b8; font-size: 12px; }
.opn-alasan { width: 100%; margin-bottom: 3px; font-size: 12px; padding: 3px 4px; border: 1px solid #e2e8f0; border-radius: 6px; color: #475569; }
/* Mengatur urutan rak */
.opn-urutbar { display: flex; gap: 8px; margin-bottom: 10px; }
.opn-urutrow { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #f1f5f9; }
.opn-urutrow:last-child { border-bottom: none; }
.opn-urutrow .kpix-name { flex: 1; }
.opn-uruttombol { display: flex; gap: 4px; }
.opn-uruttombol .kpix-btn { padding: 4px 10px; }
/* Dialog "Lengkapi daftar" */
.opn-modal-lebar { max-width: 760px; }
.opn-lg-isi { overflow-y: auto; }
.opn-lg-isi h4 { margin: 4px 0 8px; font-size: 13.5px; color: #0f172a; }
.opn-lg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 4px; border-bottom: 1px solid #f1f5f9; font-size: 13.5px; }
.opn-lg-kand { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.opn-lg-kand .kpix-btn { font-size: 12px; padding: 5px 10px; }
.opn-lg-utama { border-color: #bbf7d0 !important; background: #f0fdf4 !important; color: #166534 !important; }
.opn-lg-pilih { justify-content: flex-start; cursor: pointer; }
.opn-lg-pilih input { margin-right: 4px; }
.opn-lg-sub { margin: 12px 0 4px; font-size: 13px; color: #0f172a; }
.opn-lg-lipat { margin-top: 12px; }
.opn-lg-lipat > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #475569; padding: 6px 0; }
.opn-modal-kaki { border-top: 1px solid #eef2f7; padding-top: 10px; display: flex; justify-content: flex-end; }
/* Rekap bulanan — dua mode: per item (sebulan) & per tanggal. Bentuk matriks item × tanggal
   DIBUANG 21 Sep 2026: begitu opname harian, kolomnya 26 dan tabelnya tak terbaca. */
.opn-rk-kartu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.opn-rk-k { background: #fff; border: 1px solid #eef2f7; border-radius: 12px; padding: 12px 14px; display: flex; align-items: baseline; gap: 10px; }
.opn-rk-kv { font-size: 24px; font-weight: 800; color: #0f172a; line-height: 1; }
.opn-rk-kl { font-size: 12px; color: #64748b; line-height: 1.45; }
.opn-rk-kl small { color: #94a3b8; font-size: 11px; }
/* Deret tanggal opname — sekaligus pemilih tanggal untuk mode harian */
.opn-rk-deretlbl { font-size: 11.5px; color: #94a3b8; margin-bottom: 6px; }
.opn-rk-deretlbl b { color: #64748b; font-weight: 600; }
.opn-rk-deret { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.opn-rk-tgl { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 5px 9px 4px; cursor: pointer; font-size: 14px; font-weight: 700; color: #0f172a; line-height: 1.15; text-align: center; min-width: 44px; }
.opn-rk-tgl:hover { border-color: #93c5fd; background: #f8fbff; }
.opn-rk-tgl.aktif { border-color: #15803d; background: #f0fdf4; color: #15803d; }
.opn-rk-tglh { display: block; font-size: 9.5px; font-weight: 700; color: #94a3b8; text-transform: uppercase; }
.opn-rk-tgln { display: block; font-size: 10px; font-weight: 600; color: #94a3b8; }
.opn-rk-tgl.aktif .opn-rk-tgln, .opn-rk-tgl.aktif .opn-rk-tglh { color: #16a34a; }
.opn-rk-mode { display: flex; gap: 6px; border-bottom: 1px solid #eef2f7; margin-bottom: 12px; }
/* Baris kendali di atas tabel (penggeser tanggal / kotak cari / legenda) */
.opn-rk-geser { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.opn-rk-gesertgl { font-size: 14px; color: #0f172a; min-width: 150px; text-align: center; }
.opn-rk-cari { flex: 0 1 220px; margin-left: auto; }
.opn-rk-legenda { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #64748b; flex-wrap: wrap; }
.opn-rk-legenda .opn-kotak { margin-left: 8px; }
/* Tabel rekap: angka rata kanan supaya Fisik/Accurate/Selisih sejajar & tak terbaca menyatu */
.opn-rekap2 { font-size: 13px; }
.opn-rekap2 th, .opn-rekap2 td { padding: 8px 12px; vertical-align: middle; }
.opn-rekap2 .opn-rk-num { text-align: right; white-space: nowrap; }
.opn-rekap2 .opn-rk-num .opn-acclbl { text-align: right; }
.opn-rk-baris { cursor: pointer; }
.opn-rk-baris:hover { background: #f8fafc; }
.opn-rk-panah { color: #cbd5e1; font-size: 10px; margin-left: 8px; }
.opn-rk-lewat td { color: #cbd5e1; }
.opn-rk-kosong { color: #cbd5e1; }
/* Strip riwayat: satu kotak = satu tanggal opname. Lebarnya tetap berapa pun jumlah harinya. */
.opn-strip { display: inline-flex; gap: 2px; flex-wrap: wrap; max-width: 380px; vertical-align: middle; }
.opn-kotak { width: 12px; height: 12px; border-radius: 3px; display: inline-block; background: #eef2f7; flex: none; }
.opn-m-cocok { background: #22c55e; }
.opn-m-kecil { background: #facc15; }
.opn-m-besar { background: #ef4444; }
.opn-m-tanpa { background: #93c5fd; }
.opn-m-kosong { background: #eef2f7; }
/* warna yang sama dipakai sebagai warna ANGKA di kolom selisih */
td.opn-m-cocok, td.opn-m-kecil, td.opn-m-besar, td.opn-m-tanpa { background: none; font-weight: 700; }
td.opn-m-cocok { color: #15803d; }
td.opn-m-kecil { color: #b45309; }
td.opn-m-besar { color: #b91c1c; }
td.opn-m-tanpa { color: #64748b; }
td.opn-m-kosong { color: #cbd5e1; background: none; }
/* Rincian per tanggal yang terbuka saat baris item diklik */
.opn-rk-rinci > td { background: #f8fafc; padding: 0 12px 12px !important; }
.opn-rk-mini { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.opn-rk-mini th { text-align: left; color: #94a3b8; font-size: 10.5px; text-transform: uppercase; padding: 8px 8px 4px; font-weight: 700; }
.opn-rk-mini td { padding: 5px 8px; border-top: 1px solid #eef2f7; }
.opn-rk-mini .opn-rk-num { text-align: right; white-space: nowrap; }

/* Kewajiban Pajak */
.pjk-chip { min-width: 58px; padding: 8px 10px 6px; font-size: 13.5px; }
/* Kotak unggah bukti (BPE & SPT). Input file aslinya disembunyikan — label-nya yang jadi tombol. */
.pjk-unggah { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed #cbd5e1; border-radius: 8px;
    padding: 7px 10px; font-size: 12px; color: #64748b; cursor: pointer; width: 100%; box-sizing: border-box; }
.pjk-unggah:hover { border-color: #93c5fd; color: #1d4ed8; background: #f8fbff; }
.pjk-unggah.terpilih { border-style: solid; border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.pjk-unggah input[type=file], .pjk-ganti input[type=file] { display: none; }
/* 8 kolom tidak muat di layar sempit tanpa memeras kolom Catatan jadi tak terbaca — biarkan
   tabelnya digeser ke samping (di HP tetap jadi kartu bertumpuk lewat media query opn-rekap2). */
.pjk-tabel { min-width: 1080px; }
.pjk-file { font-size: 12px; line-height: 1.5; }
.pjk-nama { display: block; }
.pjk-aksi { display: flex; gap: 8px; margin-top: 2px; }
.pjk-file a { color: #1d4ed8; text-decoration: none; }
.pjk-file a:hover { text-decoration: underline; }
.pjk-ganti { color: #64748b; cursor: pointer; }
.pjk-ganti:hover { color: #1d4ed8; text-decoration: underline; }
.pjk-hapus { color: #b91c1c !important; }
.pjk-titik { display: block; width: 6px; height: 6px; border-radius: 999px; margin: 4px auto 0; }

/* Tombol Simpan mengambang: disembunyikan di layar lebar (dinyalakan di media query HP di bawah).
   Aturan dasarnya HARUS di atas media query — kalau di bawah, ia selalu menang dan tombolnya hilang. */
.opn-simpan-hp { display: none; }
.opn-hp, .opn-acc-lbl, .opn-dari { display: none; }
.opn-kilat { background: #dcfce7 !important; transition: background .4s; }

/* ---------- Ramah HP: tabel isian jadi kartu bertumpuk ---------- */
/* Gudang menghitung sambil berjalan dengan HP di tangan — tabel 7 kolom yang harus digeser
   ke samping adalah alasan utama mereka tetap memakai kertas/spreadsheet. */
@media (max-width: 760px) {
    .opn-ringkas { margin-left: 0; width: 100%; }
    .opn-bar .kpix-btn, .opn-bar .kpix-btn-primary { flex: 1 1 auto; }
    .opn-wrap { overflow: visible; padding: 0; border: none; box-shadow: none; background: none; }
    .opn-table { min-width: 0; width: 100%; display: block; }
    .opn-table thead { display: none; }
    .opn-table tbody, .opn-table tbody tr, .opn-table tbody td { display: block; width: auto; }
    /* RINGKAS (owner 1 Okt 2026): satu barang = satu baris pendek — nama + "Accurate N · ✓ cocok" di kiri,
       kotak Fisik di kanan; alasan muncul hanya bila ada selisih, catatan hanya sesudah alasan dipilih.
       Dulu satu kartu ±230px (2–3 barang per layar); kini ±55px. Atribut data-sel/data-al/data-cat diisi
       opname._tandaBaris(). Kolom-kolom disusun dgn grid: Accurate & Selisih memakai display:contents. */
    .opn-table tbody tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto 86px; column-gap: 6px; row-gap: 2px; align-items: center;
        background: #fff; border: 1px solid #eef2f7; border-radius: 10px; margin-bottom: 6px; padding: 8px 10px; }
    .opn-table tbody tr[data-isi] { border-color: #bbf7d0; background: #fbfffc; }
    .opn-table tbody td { padding: 0; border: none; }
    .opn-table tbody td::before { content: none; }
    .opn-table tbody td.opn-nomor { display: none; }
    .opn-table tbody td[data-lbl="Item"] { grid-column: 1 / 5; grid-row: 1; min-width: 0; }
    .opn-table tbody td[data-lbl="Item"] .kpix-name { font-weight: 600; font-size: 14px; }
    .opn-table tbody td[data-lbl="Fisik"] { grid-column: 5; grid-row: 1 / 3; align-self: center; text-align: center; }
    .opn-table tbody td[data-lbl="Accurate"] { display: contents; }
    .opn-acc-lbl { display: inline; grid-column: 1; grid-row: 2; font-size: 12px; color: #64748b; }
    .opn-table tbody td[data-lbl="Accurate"] .opn-acc { grid-column: 2; grid-row: 2; width: 56px; padding: 1px 2px; font-size: 14px; color: #334155;
        background: transparent; border: none; border-bottom: 1px dashed #94a3b8; border-radius: 0; }
    .opn-table tbody td[data-lbl="Accurate"] .opn-acclbl { grid-column: 1 / 5; grid-row: 3; }
    .opn-table tbody td[data-lbl="Selisih"] { grid-column: 3; grid-row: 2; font-size: 12.5px; text-align: left !important; min-width: 0; white-space: nowrap; }
    .opn-table tbody td[data-lbl="Selisih"] .opn-acclbl { white-space: normal; }
    .opn-table tbody td[data-lbl="Item"] .kpix-chip { font-size: 10.5px; padding: 1px 6px; }
    .opn-table tbody td[data-lbl="Selisih"] .opn-acclbl { font-size: 11px; }
    .opn-hp { display: inline; } .opn-desk { display: none; } .opn-dari { display: inline; color: #1d4ed8; font-weight: 600; }
    .opn-hp-salah { color: #b91c1c; }
    .opn-table tbody td.opn-kolom-eye { grid-column: 4; grid-row: 2; }
    .opn-table tbody td.opn-kolom-eye .opn-eye { font-size: 12px; padding: 2px 4px; opacity: .55; }
    .opn-table tbody td[data-lbl="Catatan"] { display: none; grid-column: 1 / -1; grid-row: 4; margin-top: 6px; padding: 8px; background: #fef2f2; border-radius: 8px; }
    .opn-table tbody tr[data-sel] td[data-lbl="Catatan"], .opn-table tbody tr[data-cat] td[data-lbl="Catatan"] { display: block; }
    .opn-table tbody tr[data-off] td[data-lbl="Catatan"] { display: none; }
    .opn-table tbody td[data-lbl="Catatan"] .opn-alasan { padding: 8px 6px; font-size: 14px; margin-bottom: 6px; background: #fff; }
    .opn-table tbody td[data-lbl="Catatan"] .opn-cat { display: none; }
    .opn-table tbody tr[data-al] td[data-lbl="Catatan"] .opn-cat, .opn-table tbody tr[data-cat] td[data-lbl="Catatan"] .opn-cat { display: block; }
    .opn-table tbody td[data-lbl="Fisik"] .opn-fisik { padding: 8px 4px; text-align: center; height: 42px; }
    .opn-table .opn-acclbl.opn-sama { display: inline; margin-left: 4px; }
    .opn-table .opn-acclbl.opn-sama .opn-jejak-teks { display: none; }
    .opn-in { padding: 10px 12px; font-size: 16px; }   /* 16px: iOS tidak ikut memperbesar layar saat diketik */
    /* Rekap ikut jadi kartu bertumpuk; strip riwayat dibiarkan penuh selebar kartu. */
    .opn-rk-kartu { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    /* Deret tanggal digeser ke samping, bukan dibungkus jadi 5 baris yang memakan setengah layar. */
    .opn-rk-deret { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
    .opn-rk-tgl { flex: none; }
    .opn-rk-kv { font-size: 19px; }
    .opn-rk-cari { flex: 1 1 100%; margin-left: 0; }
    .opn-rekap2, .pjk-tabel { min-width: 0; width: 100%; display: block; }
    .opn-rekap2 thead { display: none; }
    .opn-rekap2 tbody, .opn-rekap2 tbody tr, .opn-rekap2 tbody td { display: block; width: auto; }
    .opn-rekap2 tbody tr { background: #fff; border: 1px solid #eef2f7; border-radius: 12px; margin-bottom: 10px; padding: 10px 12px; }
    .opn-rekap2 tbody td { padding: 3px 0; border: none; display: flex; align-items: center; gap: 10px; }
    .opn-rekap2 tbody td::before { content: attr(data-lbl); flex: 0 0 96px; font-size: 11px; color: #94a3b8; text-transform: uppercase; }
    .opn-rekap2 tbody td[data-lbl="Item"] { display: block; }
    .opn-rekap2 tbody td[data-lbl="Item"]::before { content: none; }
    .opn-rekap2 .opn-rk-num { text-align: left; }
    .opn-rekap2 .opn-rk-num .opn-acclbl { text-align: left; }
    .opn-rk-rinci > td { padding: 0 !important; }
    .opn-rk-rinci > td::before { content: none; }
    .opn-strip { max-width: none; }
    /* Ruang di bawah daftar supaya kartu terakhir tidak tertutup menu bawah + tombol mengambang. */
    #opn-jadi-content, #opn-bahan-content { padding-bottom: 96px; }
    /* z-index 90 < 100 milik .bottom-nav → tombol duduk DI ATAS daftar, bukan menutupi menu bawah. */
    .opn-simpan-hp { display: inline-flex; align-items: center; gap: 7px; position: fixed; right: 14px; bottom: 68px; z-index: 90;
        background: #15803d; color: #fff; border: none; border-radius: 999px; padding: 13px 20px; font-size: 14px; font-weight: 700;
        box-shadow: 0 8px 22px rgba(21,128,61,.35); cursor: pointer; }
    .opn-simpan-hp:active { background: #166534; }
}

/* ---------- IBP · Alur Kerja ---------- */
/* Lingkaran keadaan di kiri tiap langkah: hijau = penanda terpenuhi hari ini,
   abu kosong = belum, putus-putus = langkah bacaan (tanpa penanda). */
.ibp-dot { flex: none; width: 26px; height: 26px; margin-top: 12px; border-radius: 999px; border: 2px solid #cbd5e1; background: #fff; display: flex; align-items: center; justify-content: center; }
.ibp-dot-ok { border-color: #16a34a; background: #16a34a; color: #fff; font-size: 12px; }
.ibp-dot-baca { border-style: dashed; opacity: .6; }
.ibp-sum { cursor: pointer; font-size: 12.5px; font-weight: 700; color: #334155; list-style: none; display: inline-flex; align-items: center; gap: 6px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 999px; padding: 4px 12px; }
.ibp-sum::-webkit-details-marker { display: none; }
details[open] > .ibp-sum .fa-chevron-right { transform: rotate(90deg); }

/* Tombol toolbar editor SOP di IBP */
.ibp-tb { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; border: none; background: transparent; border-radius: 6px; color: #475569; font-size: 12.5px; cursor: pointer; }
.ibp-tb:hover { background: #eef2f7; color: #0f172a; }

/* Tombol "Kembali" di atas halaman tujuan tautan langkah IBP (seragam dgn tombol Kembali Setting) */
.ibp-balik { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; padding: 8px 13px; cursor: pointer; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 14px; }
.ibp-balik:hover { background: #f8fafc; }

/* Rel alur IBP: lingkaran + garis vertikal putus-putus penghubung antar langkah dlm satu fase */
.ibp-rail { flex: none; width: 26px; display: flex; flex-direction: column; align-items: center; }
.ibp-line { flex: 1; width: 0; border-left: 2px dashed #d3dce6; margin-top: 6px; min-height: 12px; }

/* ===== SCAN RETUR (rtr-*) & PROSES RETUR (rtp-*) — tema ERP: hijau #15803d, slate, sudut 8–14px ===== */
.rtr-bar { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.rtr-scan { display: flex; gap: 10px; align-items: stretch; margin-bottom: 12px; }
.rtr-scan input {
    flex: 1; min-width: 0; padding: 16px 18px; font-size: 19px; font-weight: 600; letter-spacing: .4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    border: 2px solid #bbf7d0; border-radius: 12px; background: #f0fdf4; color: #0f172a;
}
.rtr-scan input:focus { outline: none; border-color: #15803d; background: #fff; box-shadow: 0 0 0 4px rgba(21,128,61,.10); }
.rtr-scan input::placeholder { color: #86bfa0; font-weight: 500; letter-spacing: 0; font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.rtr-kb { padding: 0 14px; font-size: 18px; color: #475569; }
.rtr-kb.on { background: #15803d; color: #fff; border-color: #15803d; }
@media (max-width: 480px) { .rtr-cari-l { display: none; } .rtr-scan { gap: 6px; } .rtr-scan input { padding: 14px 12px; font-size: 17px; } }
.rtr-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.rtr-stat { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; padding: 12px 14px; }
.rtr-stat-n { font-size: 27px; font-weight: 800; line-height: 1.1; letter-spacing: -0.5px; }
.rtr-stat-l { font-size: 12.5px; color: #475569; font-weight: 600; margin-top: 2px; }
.rtr-stat-k { font-size: 11px; color: #94a3b8; margin-top: 1px; }
.rtr-dim { font-size: 12px; color: #94a3b8; }
.rtr-note { color: #b91c1c; }
.rtr-ok { color: #15803d; font-weight: 600; }
.rtr-bad { color: #b91c1c; font-weight: 600; }
.rtr-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 10px; padding: 11px 14px; font-size: 13px; margin-bottom: 12px; }
.rtr-warn-keras { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.rtr-panel { border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; padding: 16px; margin-bottom: 16px; }
.rtr-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 15px; }
.rtr-faktur { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; background: #f8fafc; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.rtr-sub { font-size: 13px; color: #475569; font-weight: 600; margin: 4px 0 8px; }
.rtr-pilih { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.rtr-item { text-align: left; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.rtr-item:hover { border-color: #15803d; background: #f0fdf4; }
.rtr-item-n { font-weight: 600; color: #0f172a; font-size: 13.5px; }
.rtr-item-off { opacity: .45; cursor: not-allowed; }
.rtr-item-off:hover { border-color: #e5e7eb; background: #fff; }
.rtr-kandidat { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; align-items: start; }
.rtr-kosong { color: #94a3b8; font-size: 13px; padding: 14px 0 4px; }
.rtr-krj { margin-top: 14px; border-top: 1px dashed #e5e7eb; padding-top: 12px; }
.rtr-krj-row { display: grid; grid-template-columns: 1fr 110px 280px 36px; gap: 12px; align-items: end; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.rtr-krj-nama { min-width: 0; }
.rtr-krj-cat { grid-column: 1 / -1; }
.rtr-in { width: 100%; box-sizing: border-box; padding: 8px 11px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; color: #0f172a; }
.rtr-in:focus { outline: none; border-color: #15803d; background: #fafffb; }
.rtr-seg { display: flex; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.rtr-seg button { flex: 1; border: none; background: #fff; padding: 8px 6px; font-size: 12.5px; font-weight: 600; color: #64748b; cursor: pointer; border-right: 1px solid #e5e7eb; }
.rtr-seg button:last-child { border-right: none; }
.rtr-seg button:hover { background: #f8fafc; }
.rtr-seg button.on.bagus { background: #15803d; color: #fff; }
.rtr-seg button.on.rusak { background: #b45309; color: #fff; }
.rtr-seg button.on.beda { background: #b91c1c; color: #fff; }
.rtr-krj-aksi { display: flex; justify-content: end; padding-top: 12px; }
.rtr-x { background: none; border: none; color: #cbd5e1; cursor: pointer; font-size: 14px; padding: 6px 8px; border-radius: 6px; }
.rtr-x:hover { color: #b91c1c; background: #fef2f2; }
.rtr-brs { font-size: 13px; color: #334155; padding: 2px 0; }
.rtr-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.rtr-k-bagus { background: #f0fdf4; color: #15803d; }
.rtr-k-rusak { background: #fffbeb; color: #b45309; }
.rtr-k-beda { background: #fef2f2; color: #b91c1c; }
.rtr-k-ok { background: #fffbeb; color: #b45309; }
.rtr-k-perlu { background: #fef2f2; color: #b91c1c; }
.rtr-k-kirim { background: #f1f5f9; color: #475569; }
.rtr-modal { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 2000; align-items: center; justify-content: center; padding: 20px; }
.rtr-modal.buka { display: flex; }
.rtr-modal-box { background: #fff; border-radius: 14px; width: 100%; max-width: 520px; max-height: 80vh; display: flex; flex-direction: column; padding: 16px; gap: 10px; box-shadow: 0 20px 50px rgba(15,23,42,.25); }
.rtr-sku-list { overflow-y: auto; border: 1px solid #eef2f7; border-radius: 10px; }
.rtr-sku-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid #f1f5f9; cursor: pointer; font-size: 13.5px; }
.rtr-sku-row:last-child { border-bottom: none; }
.rtr-sku-row:hover { background: #f0fdf4; }

.rtp-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.rtp-tab { background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; color: #475569; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.rtp-tab:hover { background: #f8fafc; }
.rtp-tab.on { background: #15803d; border-color: #15803d; color: #fff; }
.rtp-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; color: #fff; font-size: 11.5px; font-weight: 700; }
.rtp-tip { background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; border-radius: 10px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 12px; }
.rtp-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.rtp-all { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #475569; cursor: pointer; }
.rtp-card { display: grid; grid-template-columns: 1fr 320px; gap: 16px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; padding: 14px 16px; margin-bottom: 10px; }
.rtp-card-r { border-left: 1px solid #f1f5f9; padding-left: 16px; }
.rtp-aksi { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
/* Saringan tanggal tabel Terkirim (pemeriksaan harian tim FAT) */
.rtp-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.rtp-filter .rtr-in { width: auto; padding: 7px 10px; font-size: 13px; }
.rtp-cari { position: relative; display: inline-flex; align-items: center; flex: 1 1 220px; max-width: 320px; }
.rtp-cari i { position: absolute; left: 10px; color: #94a3b8; font-size: 12px; pointer-events: none; }
.rtp-filter .rtp-cari .rtr-in { width: 100%; padding-left: 30px; }
.rtp-resi { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; font-weight: 700; color: #0f172a; letter-spacing: .3px; margin: 3px 0 7px; display: flex; align-items: center; gap: 8px; }
.rtp-salin { background: none; border: none; color: #cbd5e1; cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: 6px; }
.rtp-salin:hover { color: #15803d; background: #f0fdf4; }
.rtp-isi { display: flex; gap: 8px; }
.rtp-hasil { font-size: 12.5px; margin-top: 7px; min-height: 18px; }
.rtp-pick { display: flex; align-items: start; gap: 10px; cursor: pointer; margin-bottom: 6px; }
.rtp-pick input { margin-top: 3px; }

@media (max-width: 820px) {
    .rtr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rtr-krj-row { grid-template-columns: 1fr 84px; grid-template-areas: 'nama qty' 'kond kond' 'cat cat'; }
    .rtr-krj-nama { grid-area: nama; } .rtr-krj-qty { grid-area: qty; }
    .rtr-krj-kond { grid-area: kond; } .rtr-krj-cat { grid-area: cat; }
    .rtr-krj-row .rtr-x { position: absolute; right: 10px; }
    .rtp-card { grid-template-columns: 1fr; }
    .rtp-card-r { border-left: none; border-top: 1px solid #f1f5f9; padding-left: 0; padding-top: 12px; }
}

/* ===== Kerangka KPI baru — skor bayangan (2026-09-16, Tahap 2.1 blueprint; web/js/kpi-kerangka.js) ===== */
.kkr-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;margin-bottom:14px}
.kkr-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}
.kkr-title{font-size:14px;font-weight:700;color:#1e293b;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kkr-sub{font-size:11.5px;color:#64748b;line-height:1.45;margin-top:2px}
.kkr-lbl{font-size:13px;font-weight:600;color:#1e293b}
.kkr-total{font-size:34px;font-weight:800;line-height:1;text-align:right}
.kkr-total small{font-size:14px;color:#94a3b8;font-weight:600}
.kkr-chip{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:.02em;white-space:nowrap;vertical-align:middle}
.kkr-grps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 12px}
@media (max-width:640px){.kkr-grps{grid-template-columns:1fr}}
.kkr-grp{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px}
.kkr-grp-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:6px;gap:6px}
.kkr-grp-sub{font-size:11px;color:#64748b;margin-top:5px}
.kkr-track{height:7px;background:#e2e8f0;border-radius:4px;overflow:hidden}
.kkr-fill{height:100%;border-radius:4px;transition:width .3s}
.kkr-table td{vertical-align:top}
.kkr-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.kkr-foot{font-size:11.5px;color:#64748b;margin-top:10px;padding-top:8px;border-top:1px dashed #e2e8f0;line-height:1.5}
.kkr-warn{background:#fef3c7;color:#92400e;border-radius:8px;padding:8px 12px;font-size:12.5px;margin-bottom:10px}
.kkr-bar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:14px}
/* HP: daftar indikator Kerangka Baru jadi KARTU BERTUMPUK, bukan tabel yang digeser ke samping
   (laporan owner 23 Sep: "barisnya muat tapi harus geser ke kiri" — layar ini dipakai presentasi).
   Pola yang sama sudah dipakai layar Opname. Dikunci ke .kkr-scroll supaya kartu skor per orang
   (tabel kkr-table satunya, 8 kolom) TIDAK ikut berubah. */
@media (max-width:640px){
  .kkr-scroll{overflow-x:visible}
  .kkr-scroll .kkr-table{min-width:0!important;width:100%}
  .kkr-scroll .kkr-table thead{display:none}
  .kkr-scroll .kkr-table tbody tr{display:block;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;margin-bottom:10px}
  .kkr-scroll .kkr-table tbody td{display:block;border:none!important;padding:3px 0}
  .kkr-scroll .kkr-table tbody td.kkr-no{display:none}
  .kkr-scroll .kkr-table tbody td[data-l]::before{content:attr(data-l);display:inline-block;min-width:74px;color:#94a3b8;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
  .kkr-scroll .kkr-table tbody td.kkr-num{text-align:left}
  .kkr-scroll .kkr-table tbody td .kkr-in{width:100%;max-width:100%}
  .kkr-scroll .kkr-table tfoot tr{display:block;padding-top:8px;border-top:2px solid #e2e8f0}
  .kkr-scroll .kkr-table tfoot td{display:inline-block;border:none!important;text-align:left!important;padding:0 6px 0 0}
}
/* HP: kartu SKOR BAYANGAN PER ORANG (8 kolom) — laporan owner 23 Sep, layar ini ikut dipresentasikan.
   Bedanya dengan daftar indikator: enam angkanya dibuat DUA PER BARIS, bukan ditumpuk satu-satu —
   8 baris × 7 indikator akan jadi layar yang sangat panjang dan justru lebih sulit dibaca. */
@media (max-width:640px){
  .kkr-skor-scroll{overflow-x:visible}
  .kkr-skor-scroll .kkr-table{min-width:0!important;width:100%}
  .kkr-skor-scroll .kkr-table thead{display:none}
  .kkr-skor-scroll .kkr-table tbody tr{display:block;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;margin-bottom:10px}
  .kkr-skor-scroll .kkr-table tbody td{border:none!important;padding:0}
  .kkr-skor-scroll .kkr-table tbody td.kkr-ind{display:block;margin-bottom:6px}
  .kkr-skor-scroll .kkr-table tbody td.kkr-jen{display:block;margin-bottom:8px}
  .kkr-skor-scroll .kkr-table tbody td.kpix-empty{display:block;text-align:center}
  .kkr-skor-scroll .kkr-table tbody td[data-l]{display:inline-block;width:50%;vertical-align:top;text-align:left!important;padding:4px 0}
  .kkr-skor-scroll .kkr-table tbody td[data-l]::before{content:attr(data-l);display:block;color:#94a3b8;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
}
.kkr-two{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:980px){.kkr-two{grid-template-columns:1fr}}
.kkr-pane{padding:14px 16px}
.kkr-pane-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:#1e293b;margin-bottom:10px}
.kkr-frow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f1f5f9;font-size:13px;color:#334155}
.kkr-frow label{flex:1}
.kkr-in{width:100%;box-sizing:border-box;font:inherit;font-size:12.5px;padding:5px 7px;border:1px solid #e2e8f0;border-radius:7px;background:#fff;color:#1e293b}
.kkr-in:focus{outline:none;border-color:#15803d}

/* ===== Target Periode: judul kolom BEKU saat scroll (permintaan owner 2026-09-16) =====
   Sticky tidak bisa menempel ke jendela karena .page-content ber-overflow, jadi tabelnya
   diberi kotak scroll sendiri (tinggi ± layar) dan thead menempel di atas kotak itu. */
.tp-scroll { overflow: auto; max-height: calc(100vh - 150px); min-height: 260px; border-radius: 12px; }
.tp-scroll .kpix-table thead th { position: sticky; top: 0; z-index: 3; box-shadow: 0 1px 0 #e5e7eb; }

/* ===== Dashboard Tumbuh (2026-09-17; web/js/tumbuh.js) ===== */
.tmb-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.tmb-kartu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:16px}
.tmb-kartu{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px}
.tmb-kartu-h{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:#64748b;font-weight:600}
.tmb-kartu-v{font-size:22px;font-weight:800;line-height:1.2;margin:6px 0 2px}
.tmb-kartu-s{font-size:11px;color:#64748b;line-height:1.45}
.tmb-h{font-size:14px;font-weight:800;color:#334155;margin:18px 0 8px}
.tmb-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ===== Dashboard SUPER ADMIN (2026-09-17): Tumbuh → KPI → widget; blok operasional admin disembunyikan ===== */
#dash-tumbuh,#dash-kpi,#dash-tumbuh-emp,#dash-kpi-emp,#dash-produksi,#dash-gudang,#dash-produksi-emp,#dash-gudang-emp{background:#fff;border-radius:12px;padding:16px 18px;margin:0 0 16px}
/* Setting → Dashboard per divisi */
.dbk-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px;margin-bottom:10px}
.dbk-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.dbk-nama{font-size:14px;font-weight:800;color:#0f172a}
.dbk-sub{font-size:11.5px;color:#64748b}
.dbk-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid #eef2f7;border-radius:9px;margin-bottom:5px;background:#fafafa}
.dbk-row.on{background:#f0fdf4;border-color:#bbf7d0}
.dbk-row .dbk-l{flex:1;min-width:0;font-size:13px;color:#0f172a;font-weight:600}
.dbk-row .dbk-d{display:block;font-size:11px;color:#64748b;font-weight:400;line-height:1.4}
.dbk-btn{border:1px solid #e2e8f0;background:#fff;border-radius:7px;width:26px;height:26px;cursor:pointer;color:#475569;font-size:11px}
.dbk-btn:disabled{opacity:.35;cursor:default}
.dkp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}

/* ===== Tumbuh model TAB (17 Sep 2026 sesi 2): tab jalur, chip toko, panel grafik, tabel lengkap dilipat ===== */
.tmb-tabs{display:flex;gap:2px;border-bottom:1px solid #e2e8f0;margin:4px 0 10px;flex-wrap:wrap}
.tmb-tab{padding:8px 14px;font-size:13px;font-weight:700;color:#64748b;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;margin-bottom:-1px;border-radius:0}
.tmb-tab:hover{color:#334155}
.tmb-tab.on{color:#15803d;border-bottom-color:#15803d}
.tmb-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tmb-chip{font-size:12px;padding:3px 10px;border-radius:12px;border:1px solid #e2e8f0;color:#475569;background:#fff;cursor:pointer;user-select:none}
.tmb-chip:hover{border-color:#94a3b8}
.tmb-chip.on{background:#dcfce7;color:#14532d;border-color:#86efac;font-weight:700}
.tmb-pan{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px;min-width:0}
.tmb-pan-h{font-size:13px;font-weight:800;color:#334155;margin:0}
.tmb-pan-s{font-size:11px;color:#64748b;margin:2px 0 8px}
.tmb-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-bottom:12px}
.tmb-donat{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.tmb-donat-c{position:relative;width:170px;height:170px;flex-shrink:0}
.tmb-legend{flex:1;min-width:150px;font-size:12px}
.tmb-legend>div{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px dashed #f1f5f9}
.tmb-sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.tmb-fold{margin-top:4px}
.tmb-fold-btn{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:7px 12px;font-size:12px;font-weight:700;color:#475569;cursor:pointer;text-align:left}
.tmb-fold-btn:hover{border-color:#94a3b8}

/* grafik harian + panel samping kontribusi live (17 Sep sesi 2) */
.tmb-grid-h{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:12px}
@media(max-width:860px){.tmb-grid-h{grid-template-columns:1fr}}
.tmb-live-k{padding:8px 0;border-bottom:1px dashed #e2e8f0}
.tmb-live-k:last-of-type{border-bottom:0}
.tmb-live-n{font-size:12px;font-weight:700;color:#334155}
.tmb-live-v{font-size:20px;font-weight:800;line-height:1.2;margin:2px 0}
.tmb-live-s{font-size:11px;color:#64748b;line-height:1.5}
.tmb-live-t{margin-top:8px;padding-top:8px;border-top:1px solid #e2e8f0;font-size:11px;color:#64748b}
.tmb-live-t>div{display:flex;justify-content:space-between;gap:8px;padding:2px 0}
.tmb-live-t b{color:#334155}

/* ===== Target Periode — tampilan baris alokasi (17 Sep 2026) ===== */
.tgp-stp{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px}
.tgp-stp span{padding:4px 10px;border-radius:12px;border:1px solid #e2e8f0;color:#64748b;background:#fff}
.tgp-stp span.on{background:#fef3c7;color:#92400e;border-color:#f59e0b;font-weight:700}
.tgp-stp span.lewat{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
.tgp-stp-sep{font-size:10px;color:#cbd5e1}
.tgp-warn{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:9px 14px;margin:10px 0 0;font-size:12.5px;color:#92400e;line-height:1.5}
.tgp-kartu{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;align-items:start;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;margin:12px 0}
.tgp-besar{font-size:24px;font-weight:800;line-height:1.2;color:#0f172a}
.tgp-sub{font-size:11.5px;color:#64748b;line-height:1.5}
.tgp-aksi{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.tgp-aksi button{white-space:nowrap}
.tgp-in{font-size:13px;font-weight:700;text-align:right;padding:5px 8px;border:1px solid #cbd5e1;border-radius:7px;width:130px;background:#fff;color:#0f172a}
.tgp-in.lock{border-color:#15803d;background:#f0fdf4;color:#14532d}
.tgp-in-besar{font-size:20px;width:210px}
.tgp-in-baca{display:inline-block}
.tgp-row{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(0,2fr) 140px 30px;gap:12px;align-items:center;padding:9px 0;border-top:1px solid #f1f5f9}
.tgp-row:first-child{border-top:0}
.tgp-row.kepala .tgp-nm{font-weight:800;color:#1e293b}
.tgp-nm{font-size:13px;color:#0f172a;font-weight:600;min-width:0}
.tgp-nm small{display:block;font-size:11px;color:#94a3b8;font-weight:400;line-height:1.4}
.tgp-nm small a{color:#15803d;font-weight:600;text-decoration:none}
.tgp-bars{min-width:0}
.tgp-trk{height:10px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;position:relative;overflow:visible}
.tgp-fil{height:100%;background:#9fe1cb;border-radius:5px}
.tgp-fil.lock{background:#15803d}
.tgp-porsi{position:absolute;right:6px;top:-1px;font-size:10px;line-height:10px;color:#334155;font-weight:700}
.tgp-cap{height:5px;background:#f1f5f9;border-radius:3px;position:relative;margin-top:5px}
.tgp-cap>div:first-child{height:100%;border-radius:3px}
.tgp-mark{position:absolute;top:-3px;width:2px;height:calc(100% + 6px);background:#0f172a;opacity:.7}
.tgp-val{text-align:right}
.tgp-lock{border:0;background:none;cursor:pointer;color:#cbd5e1;font-size:14px;padding:4px}
.tgp-lock.on{color:#15803d}
.tgp-legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:#64748b;margin-top:8px}
.tgp-sw{display:inline-block;width:12px;height:9px;border-radius:2px;vertical-align:-1px;margin-right:4px}
@media(max-width:640px){.tgp-row{grid-template-columns:minmax(0,1fr) 120px 26px}.tgp-row .tgp-nm{grid-column:1/-1}.tgp-aksi{align-items:flex-start}}
/* ===== Media (17 Sep 2026) ===== */
.med-chips{display:flex;gap:6px;flex-wrap:wrap}
.med-chip{font-size:12px;padding:5px 11px;border-radius:12px;border:1px solid #e2e8f0;color:#475569;background:#fff;cursor:pointer;user-select:none}
.med-chip.on{background:#ede9fe;color:#4c1d95;border-color:#c4b5fd;font-weight:700}
.med-grid{width:100%;border-collapse:collapse;font-size:12px}
.med-grid th{font-weight:600;color:#64748b;text-align:center;padding:6px 3px;border-bottom:1px solid #e2e8f0;white-space:nowrap}
.med-grid th:first-child,.med-grid td:first-child{text-align:left;min-width:150px}
.med-grid td{padding:4px 3px;border-bottom:1px solid #f1f5f9;text-align:center}
.med-grid input{width:88px;box-sizing:border-box;height:30px;text-align:right;font-size:12px;padding:0 6px;border:1px solid #cbd5e1;border-radius:6px}
.med-grid input.yt{background:#f5f3ff;border-color:#c4b5fd}
.med-grid td.auto{color:#7c3aed;font-weight:700}
.med-grid td.depan{color:#cbd5e1}
.med-grid th.tot,.med-grid td.tot{border-left:2px solid #e2e8f0;background:#fefce8}
.med-grid input.tot{background:#fef9c3;border-color:#fde047;font-weight:700;width:104px}
.med-grid td.tot.auto{color:#475569;font-weight:700}
.med-grid td.auto.tunggu{color:#a78bfa;font-weight:500;font-size:11px;font-style:italic}
.med-ket{font-size:11px;color:#94a3b8;display:block;font-weight:400}
/* Menu Media — tab Konten/View/Rekap/Kanal dirapikan (25 Sep 2026) */
.mdk-aksi{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.mdk-knl{display:inline-flex;align-items:center;gap:6px}
.mdk-knl .fa-tiktok{color:#0f172a}.mdk-knl .fa-instagram{color:#db2777}.mdk-knl .fa-youtube{color:#dc2626}.mdk-knl .fa-bolt{color:#f59e0b}
.mdk-merek{font-size:10px;font-weight:700;padding:1px 8px;border-radius:9px;background:#f1f5f9;color:#475569;white-space:nowrap}
.mdk-m-BISATANI{background:#dcfce7;color:#166534}.mdk-m-UTAMATANI{background:#dbeafe;color:#1e40af}.mdk-m-GROWAT{background:#fef3c7;color:#92400e}
.mdk-tag2{font-size:10px;padding:1px 7px;border-radius:9px;background:#f8fafc;border:1px solid #e2e8f0;color:#64748b;white-space:nowrap}
.mdk-tag2.oto{background:#f5f3ff;border-color:#ddd6fe;color:#6d28d9}
/* konten: daftar per tanggal */
.mdk-hari{font-size:12px;font-weight:700;color:#64748b;margin:14px 0 6px;text-transform:capitalize}
.mdk-kartu{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:10px 14px;margin-bottom:8px}
.mdk-k-h{display:flex;gap:10px;align-items:flex-start}
.mdk-k-j{flex:1;font-size:14px;font-weight:700;color:#0f172a;line-height:1.35}
.mdk-k-a{display:flex;gap:2px;flex:none}
.mdk-k-a button{border:none;background:none;color:#94a3b8;cursor:pointer;padding:4px 6px;border-radius:6px}
.mdk-k-a button:hover{background:#f1f5f9;color:#334155}
.mdk-k-m{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:#475569;margin-top:4px}
.mdk-k-m i{color:#94a3b8;font-size:11px}
.mdk-sbs{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.mdk-sb{font-size:11px;padding:2px 9px;border-radius:10px;border:1px solid #e2e8f0;background:#fff;color:#94a3b8;display:inline-flex;align-items:center;gap:4px;text-decoration:none;white-space:nowrap}
.mdk-sb.ok{background:#f0fdf4;border-color:#86efac;color:#166534}
.mdk-sb.ok .fa-circle-check{color:#16a34a}
.mdk-sb.ada{background:#f8fafc;border-color:#cbd5e1;color:#475569}
.mdk-sb.tunggu{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.mdk-sb.gagal{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.mdk-sb.centang{background:#f8fafc;border-color:#cbd5e1;color:#334155}
.mdk-sb.belum{border-style:dashed}
.mdk-belum{border-color:#fde68a;background:#fffdf5}
.mdk-bl{padding:6px 0;border-top:1px solid #fef3c7}.mdk-bl:first-child{border-top:none}
.mdk-bl-h{font-size:12px;color:#92400e;margin-bottom:4px}.mdk-bl-h b{margin-left:4px}
.mdk-bl-v{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:#334155;padding:3px 0 3px 10px}
/* jendela form */
.mdk-latar{position:fixed;inset:0;z-index:1100;background:rgba(15,23,42,.45);display:flex;align-items:flex-start;justify-content:center;padding:4vh 12px;overflow:auto}
.mdk-jendela{background:#fff;border-radius:16px;width:100%;max-width:640px;box-shadow:0 20px 50px rgba(15,23,42,.3);display:flex;flex-direction:column;max-height:92vh}
.mdk-j-h{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #f1f5f9;font-size:15px}
.mdk-j-h button{border:none;background:none;font-size:24px;line-height:1;color:#94a3b8;cursor:pointer}
.mdk-j-i{padding:14px 18px;overflow:auto}
.mdk-j-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid #f1f5f9}
.mdk-baris{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mdk-seg{display:inline-flex;border:1px solid #e2e8f0;border-radius:9px;overflow:hidden}
.mdk-seg button{border:none;background:#fff;padding:6px 12px;font-size:12px;color:#475569;cursor:pointer;border-right:1px solid #e2e8f0}
.mdk-seg button:last-child{border-right:none}
.mdk-seg button.on{background:#16a34a;color:#fff;font-weight:700}
.mdk-lbl{font-size:12px;font-weight:700;color:#334155;margin:14px 0 6px}.mdk-lbl span{font-weight:400;color:#94a3b8}
.mdk-vids{border:1px solid #e2e8f0;border-radius:10px;max-height:230px;overflow:auto;padding:4px}
.mdk-vid{display:flex;gap:10px;align-items:flex-start;padding:7px 8px;border-radius:8px;cursor:pointer}
.mdk-vid:hover{background:#f8fafc}
.mdk-vid.on{background:#f0fdf4}
.mdk-vid.pakai{opacity:.55;cursor:not-allowed}
.mdk-vid-c{color:#cbd5e1;margin-top:3px}.mdk-vid.on .mdk-vid-c{color:#16a34a}
.mdk-vid-j{font-size:13px;font-weight:600;color:#0f172a;line-height:1.3}
.mdk-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* view mingguan */
.mdk-minggu{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:3px}
.mdk-minggu button{border:none;background:none;width:28px;height:28px;border-radius:7px;color:#475569;cursor:pointer}
.mdk-minggu button:hover:not(:disabled){background:#f1f5f9}.mdk-minggu button:disabled{color:#cbd5e1;cursor:default}
.mdk-minggu b{font-size:13px;padding:0 6px}
.mdk-kaki{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
/* rekap */
.mdk-kanal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.mdk-kanal{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px}
.mdk-kanal.pantau{background:#f8fafc}
.mdk-kanal-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#334155}
.mdk-bar{height:7px;background:#f1f5f9;border-radius:4px;overflow:hidden;margin:8px 0 6px}
.mdk-bar i{display:block;height:100%;border-radius:4px}
.mdk-kanal-a{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:#475569;align-items:center}
.mdk-kanal-v{font-size:18px;font-weight:800;color:#0f172a;margin-top:6px}.mdk-kanal-v small{font-size:11px;font-weight:500;color:#94a3b8}
.mdk-graf-grid{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.mdk-graf{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;min-width:0}
.mdk-graf-h{font-size:13px;font-weight:700;color:#334155;margin-bottom:6px}.mdk-graf-h span{font-weight:400;font-size:11px;color:#94a3b8;margin-left:4px}
.mdk-graf-c{position:relative;height:230px}
.mdk-graf-kosong{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#94a3b8;font-size:12px}.mdk-graf-kosong i{font-size:22px;color:#cbd5e1}
@media (max-width:760px){.mdk-graf-grid{grid-template-columns:1fr}.mdk-graf-c{height:210px}}
.mdk-waktu{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:#64748b}
.mdk-orang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.mdk-orang{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px}
.mdk-ava{flex:none;width:36px;height:36px;border-radius:18px;background:#ede9fe;color:#5b21b6;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.mdk-orang-n{font-size:13px;font-weight:700;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdk-orang-v{flex:none;text-align:center;display:flex;flex-direction:column}.mdk-orang-v b{font-size:20px;color:#4c1d95;line-height:1}.mdk-orang-v span{font-size:10px;color:#94a3b8}
.mdk-tgt{width:92px;text-align:right;padding:2px 6px;border:1px solid #cbd5e1;border-radius:6px;font-size:11.5px}
.mdk-tgt.isian{border-color:#7c3aed;background:#f5f3ff}
.mdk-5{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
/* kanal */
.mdk-kanal-list{display:grid;gap:8px}
.mdk-kanal-d{background:#fff;border:1px solid #e2e8f0;border-radius:12px}
.mdk-kanal-d.mati{opacity:.6}
.mdk-kanal-d.baru{border-style:dashed}
.mdk-kanal-d summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;font-size:13px}
.mdk-kanal-d summary::-webkit-details-marker{display:none}
.mdk-kanal-e{margin-left:auto;color:#cbd5e1;font-size:12px}
.mdk-kanal-d[open] .mdk-kanal-e{color:#2563eb}
.mdk-kform{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;padding:4px 14px 14px;border-top:1px solid #f1f5f9;margin-top:2px;padding-top:12px}
.mdk-kform .kpix-select{width:100%;font-size:12px;padding:5px 8px}
.mdk-kform .mono{font-family:monospace;font-size:11px}
.mdk-tt-info{font-size:12px;color:#475569;padding:6px 0}
.mdk-tag2.mdk-tt{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.mdk-kform-c{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;color:#475569;align-self:end}
.mdk-kform-c label{display:inline-flex;align-items:center;gap:5px}
.mdk-papan{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:12px}
.mdk-papan-h{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px}
.mdk-papan-h b{font-size:15px;color:#0f172a;min-width:190px;text-align:center}
.mdk-papan-h button{border:1px solid #e2e8f0;background:#fff;width:34px;height:34px;border-radius:10px;color:#475569;cursor:pointer}
.mdk-papan-h button:hover:not(:disabled){background:#f1f5f9}.mdk-papan-h button:disabled{color:#cbd5e1;cursor:default}
.mdk-deret{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:12px}
.mdk-dh{border:1px solid #e2e8f0;background:#f8fafc;border-radius:10px;padding:6px 2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px}
.mdk-dh span{font-size:10px;color:#64748b}.mdk-dh b{font-size:15px;color:#0f172a}.mdk-dh em{font-style:normal;font-size:10px;color:#94a3b8;white-space:nowrap}
.mdk-dh em i{font-style:normal;color:#d97706}
.mdk-dh.on{background:#16a34a;border-color:#16a34a}.mdk-dh.on span,.mdk-dh.on b,.mdk-dh.on em,.mdk-dh.on em i{color:#fff}
.mdk-dh.depan{opacity:.45;cursor:default}
.mdk-belum-h{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:8px 12px;margin-bottom:10px}
.mdk-pkotak-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:14px}
.mdk-pkotak{text-align:left;background:#fff;border:1px solid #e2e8f0;border-top:3px solid var(--c);border-radius:12px;padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:2px;font:inherit;transition:box-shadow .15s,transform .15s}
.mdk-pkotak:hover{box-shadow:0 4px 14px rgba(15,23,42,.08);transform:translateY(-1px)}
.mdk-pkotak.on{background:linear-gradient(180deg,#f8fafc,#fff);box-shadow:0 0 0 2px var(--c) inset}
.mdk-pk-h{font-size:12px;font-weight:700;color:#475569;display:flex;align-items:center;gap:6px;width:100%}
.mdk-pk-h i{color:var(--c);font-size:14px}
.mdk-pk-v{font-size:20px;font-weight:800;color:#0f172a;margin-top:4px;line-height:1.2}.mdk-pk-v small{font-size:11px;color:#94a3b8;font-weight:600}
.mdk-pk-k{font-size:11px;color:#64748b}
.mdk-vk-list{display:grid;gap:10px}
.mdk-vk{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px}
.mdk-vk-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;font-size:13px}
.mdk-vk-f{margin-left:auto;font-size:11px;color:#64748b;font-weight:600}
.mdk-vs{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.mdk-vs-c{display:flex;flex-direction:column;gap:3px;min-width:0}
.mdk-vs-c span{font-size:10px;color:#64748b;text-align:center}
.mdk-vs-c input{width:100%;box-sizing:border-box;height:32px;text-align:right;font-size:12px;padding:0 6px;border:1px solid #cbd5e1;border-radius:7px}
.mdk-vs-c.draf input{border-color:#f59e0b;background:#fffbeb}
.mdk-vs-c b,.mdk-vs-c em{height:32px;display:flex;align-items:center;justify-content:flex-end;padding:0 6px;border-radius:7px;font-size:12px;background:#f5f3ff;color:#6d28d9}
.mdk-vs-c em{font-style:italic;font-weight:400;color:#a78bfa;justify-content:center}
.mdk-vs-c.depan em{background:#f8fafc;color:#cbd5e1;font-style:normal}
.mdk-vs-c.tot input{background:#fef9c3;border-color:#fde047;font-weight:700}
.mdk-vs-c.tot b{background:#fef9c3;color:#334155}
@media (max-width:640px){.mdk-vs{grid-template-columns:repeat(4,1fr)}.mdk-pkotak-grid{grid-template-columns:1fr 1fr}.mdk-pk-v{font-size:17px}}
.mdk-ptabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.mdk-ptab{border:1px solid #e2e8f0;background:#fff;border-radius:10px;padding:7px 14px;font-size:13px;font-weight:600;color:#475569;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.mdk-ptab span{font-size:11px;background:#f1f5f9;color:#64748b;border-radius:8px;padding:0 7px;font-weight:700}
.mdk-ptab.on{background:#0f172a;border-color:#0f172a;color:#fff}.mdk-ptab.on span{background:rgba(255,255,255,.2);color:#fff}
.mdk-ptab .fa-instagram{color:#db2777}.mdk-ptab .fa-youtube{color:#dc2626}.mdk-ptab .fa-bolt{color:#f59e0b}.mdk-ptab.on i{color:#fff}
@media (max-width:640px){.mdk-2{grid-template-columns:1fr}.mdk-deret{gap:3px}.mdk-dh em{font-size:9px}.mdk-papan-h b{min-width:0;font-size:14px}.mdk-kanal-grid{grid-template-columns:1fr}.mdk-jendela{max-height:none}}
.mdm-yakin{font-size:10px;font-weight:700;padding:1px 7px;border-radius:9px;margin-left:6px;white-space:nowrap;vertical-align:middle}
/* Media → Masukan (rapor video, 25 Sep 2026; dirapikan "jawaban dulu, bukti belakangan") */
.mdm-ket{font-size:11px;color:#94a3b8;display:block;font-weight:400}
.mdm-saklar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.mdm-sumber{margin-bottom:12px}
.mdm-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.mdm-stat>div{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px 12px;display:flex;flex-direction:column}
.mdm-stat span{font-size:11px;color:#64748b}.mdm-stat b{font-size:20px;color:#0f172a;line-height:1.2}
.mdm-stat em{font-style:normal;font-size:11px;color:#94a3b8;line-height:1.35}.mdm-stat em i{font-style:normal;font-weight:700}
.mdm-blok-h{display:flex;align-items:center;justify-content:space-between;margin:18px 0 8px;font-weight:700;color:#334155;font-size:14px}
.mdm-info{position:relative}
.mdm-info summary{list-style:none;cursor:pointer;color:#94a3b8;font-size:14px}
.mdm-info summary::-webkit-details-marker{display:none}
.mdm-info[open] summary{color:#2563eb}
.mdm-info>div{position:absolute;right:0;top:22px;z-index:1050;width:300px;max-width:80vw;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 8px 24px rgba(15,23,42,.12);padding:10px 12px;font-size:12px;font-weight:400;color:#475569;line-height:1.5}
/* kotak resep */
.mdm-resep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:stretch}
.mdm-resep{background:#fff;border:1px solid #e2e8f0;border-top:3px solid var(--c);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;cursor:pointer;transition:box-shadow .15s,transform .15s}
.mdm-resep:hover{box-shadow:0 4px 14px rgba(15,23,42,.08);transform:translateY(-1px)}
.mdm-resep-h{font-size:11px;color:#64748b;font-weight:600;display:flex;align-items:center;gap:5px}
.mdm-resep-h i{color:var(--c)}
.mdm-resep-h .mdm-yakin{margin-left:auto}
.mdm-resep-v{font-size:18px;font-weight:800;color:#0f172a;margin-top:6px;line-height:1.25;word-break:break-word}
.mdm-resep-k{font-size:11px;color:#b45309;margin-top:2px}
.mdm-resep-t{font-size:10px;color:#94a3b8;margin-top:auto;padding-top:6px}
.mdm-bk{font-size:12px;color:#475569;line-height:1.55;padding:6px 0;border-top:1px dashed #e2e8f0}
.mdm-bk:first-of-type{border-top:none}
.mdm-pop{position:fixed;z-index:1000;background:#fff;border:1px solid #e2e8f0;border-top:3px solid var(--c);border-radius:12px;box-shadow:0 12px 32px rgba(15,23,42,.18);padding:10px 14px 8px;max-height:60vh;overflow:auto}
.mdm-pop-h{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:13px;color:#0f172a;margin-bottom:4px}
.mdm-pop-h button{border:none;background:none;font-size:20px;line-height:1;color:#94a3b8;cursor:pointer;padding:0 2px}
.mdm-vs-k{display:block;font-size:10px;color:#94a3b8;margin-top:1px;white-space:nowrap}
/* sorotan */
.mdm-sorot{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mdm-sorot li{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:9px 12px}
.mdm-sorot-i{flex:none;width:28px;height:28px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:12px}
.mdm-sorot b{font-size:13px;display:block}.mdm-sorot em{font-style:normal;font-size:12px;color:#64748b}
.mdm-sorot a,.mdm-row-j a,.mdm-pod-j a{color:#1e3a8a;text-decoration:none}
.mdm-sorot a:hover,.mdm-row-j a:hover,.mdm-pod-j a:hover{text-decoration:underline}
/* daftar video ringkas */
.mdm-list{padding:4px 12px}
.mdm-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid #f1f5f9}
.mdm-row:first-child{border-top:none}
.mdm-row-t{flex:1;min-width:0}
.mdm-row-j{font-size:13px;font-weight:600;line-height:1.35}
.mdm-row-m{font-size:11px;color:#94a3b8;margin-top:2px}
.mdm-row-r{flex:none;text-align:right;min-width:90px}
.mdm-row-r b{font-size:14px;color:#0f172a}
.mdm-vs{display:flex;align-items:center;gap:6px;justify-content:flex-end;margin-top:2px;position:relative;cursor:help;outline:none}
.mdm-tip{position:fixed;z-index:1001;width:250px;max-width:calc(100vw - 24px);background:#0f172a;color:#f8fafc;font-size:11px;line-height:1.45;padding:7px 9px;border-radius:8px;box-shadow:0 6px 18px rgba(15,23,42,.25);pointer-events:none}
.mdm-vs-b{position:relative;width:56px;height:6px;background:#f1f5f9;border-radius:3px;overflow:hidden}
.mdm-vs-b i{display:block;height:100%;border-radius:3px}
.mdm-vs-b em{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:#64748b}
.mdm-vs-n{font-size:11px;font-weight:700;min-width:34px}
.mdm-lagi{display:block;width:100%;border:none;background:none;color:#2563eb;font-size:12px;font-weight:600;padding:8px 0;cursor:pointer;border-top:1px solid #f1f5f9}
/* bagian terlipat */
.mdm-lipat{background:#fff;border:1px solid #e2e8f0;border-radius:12px;margin-top:10px}
.mdm-lipat summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:11px 14px;font-weight:700;font-size:13px;color:#334155}
.mdm-lipat summary::-webkit-details-marker{display:none}
.mdm-lipat summary>i{margin-left:auto;color:#94a3b8;transition:transform .15s}
.mdm-lipat[open] summary>i{transform:rotate(180deg)}
.mdm-lipat-s{font-weight:400;font-size:11px;color:#94a3b8}
.mdm-lipat-i{padding:4px 14px 14px}
.mdm-lipat-i .mdm-list{padding:0}
.mdm-ph{font-weight:700;color:#334155;font-size:12px;margin-bottom:8px}
.mdm-pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.mdm-pkartu{background:#f8fafc;border-radius:10px;padding:10px 12px}
.mdm-pbar{display:flex;align-items:center;gap:8px;font-size:12px;margin:4px 0}
.mdm-pbar .l{width:72px;color:#475569;flex:none}
.mdm-pbar .b{flex:1;height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden}
.mdm-pbar .b i{display:block;height:100%;border-radius:4px}
.mdm-pbar .v{width:44px;text-align:right;font-weight:700;color:#334155;flex:none}
.mdm-pbar.sedikit .l,.mdm-pbar.sedikit .v{color:#cbd5e1;font-weight:400}
.mdm-pbar .v2{width:62px;flex:none;font-size:10px;color:#94a3b8;text-align:right}
.mdm-tag{display:inline-block;font-size:12px;border:1px solid;border-radius:12px;padding:2px 9px;margin:2px 4px 2px 0;background:#fff}
.mdm-tren-g{display:flex;align-items:flex-end;gap:4px;height:150px;padding-top:16px;margin-bottom:6px}
.mdm-tren-c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.mdm-tren-c i{display:block;width:100%;max-width:28px;background:#a78bfa;border-radius:4px 4px 0 0}
.mdm-tren-v{font-size:9px;color:#64748b;margin-bottom:2px;white-space:nowrap}
.mdm-tren-n{font-size:9px;color:#94a3b8;margin-top:2px}
.mdm-tren-l{font-size:9px;color:#64748b;white-space:nowrap}
/* juara per bulan */
.mdm-jbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.mdm-jbar .mdm-info{margin-left:auto}
.mdm-peringatan{background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:7px 10px;margin-bottom:10px;color:#92400e;font-size:12px}
.mdm-topik{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px;font-size:12px;color:#475569;font-weight:600}
.mdm-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mdm-pod{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px}
.mdm-pod-1{border-color:#fcd34d;background:linear-gradient(180deg,#fffbeb,#fff 60%)}
.mdm-pod-h{display:flex;align-items:center;justify-content:space-between}
.mdm-pod-v{font-size:20px;color:#0f172a}.mdm-pod-v em{font-style:normal;font-size:11px;color:#94a3b8;font-weight:400;margin-left:3px}
.mdm-pod-j{font-size:13px;font-weight:700;line-height:1.35}
.mdm-rank{flex:none;width:28px;height:28px;border-radius:14px;background:#ede9fe;color:#4c1d95;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.mdm-pod-1 .mdm-rank{background:#fbbf24;color:#fff}.mdm-pod-2 .mdm-rank{background:#cbd5e1;color:#1e293b}.mdm-pod-3 .mdm-rank{background:#fdba74;color:#7c2d12}
.mdm-rank.kecil{width:22px;height:22px;font-size:11px;background:#f1f5f9;color:#475569}
.mdm-als{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.mdm-al{font-size:11px;padding:2px 8px;border-radius:10px;background:#f1f5f9;color:#334155;white-space:nowrap;cursor:help}
.mdm-al i{font-size:10px;margin-right:2px}
.mdm-al-BULAN{background:#dcfce7;color:#166534}.mdm-al-MUSIM{background:#ccfbf1;color:#115e59}.mdm-al-TEMA{background:#ffedd5;color:#9a3412}
.mdm-al-JAM{background:#dbeafe;color:#1e40af}.mdm-al-LAMA{background:#fef9c3;color:#854d0e}
@media (max-width:640px){.mdm-stat b{font-size:17px}.mdm-resep-grid{grid-template-columns:1fr 1fr}.mdm-resep-v{font-size:15px}
.mdm-podium{grid-template-columns:1fr}.mdm-row-r{min-width:74px}.mdm-vs-b{width:40px}.mdm-tren-v{display:none}.mdm-pbar .l{width:60px}}

/* ===== Target PRODUK di Target Periode (Tahap 3, 18 Sep 2026) ===== */
.tpd-panel{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;margin:4px 0 12px}
.tpd-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.tpd-tabel td{vertical-align:middle}
.tpd-gol{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap}
.tpd-gol.a{background:#dcfce7;color:#166534}
.tpd-gol.d{background:#ede9fe;color:#5b21b6}
.tpd-gol.l{background:#f1f5f9;color:#475569}
.tpd-tambah{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}

/* ===== Target Periode — tampilan KARTU (19 Sep 2026, permintaan owner "rapi & modern seperti dashboard") ===== */
.tgx-atas{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.tgx-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:14px 16px}
.tgx-grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.tgx-m{background:#f8fafc;border-radius:10px;padding:12px 14px;min-width:0}
.tgx-l{font-size:12px;color:#64748b;display:flex;gap:6px;align-items:center}
.tgx-l i{color:#94a3b8}
.tgx-v{display:block;font-size:24px;font-weight:800;color:#0f172a;line-height:1.25;margin-top:2px}
.tgx-s{font-size:12px;color:#64748b;line-height:1.5}
.tgx-bar{position:relative;height:8px;background:#f1f5f9;border-radius:6px;margin:8px 0 6px}
.tgx-bar.tebal{height:10px;margin-top:14px}
.tgx-bar>div{height:100%;border-radius:6px;transition:width .3s}
.tgx-bar>i{position:absolute;top:-4px;width:2px;height:calc(100% + 8px);background:#0f172a;border-radius:1px}
.tgx-kaki{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:11.5px;color:#94a3b8}
.tgx-garis{display:inline-block;width:2px;height:10px;background:#0f172a;vertical-align:-1px;margin-right:4px}
.tgx-aksi{display:flex;gap:6px;flex-wrap:wrap}
.tgx-aksi button{white-space:nowrap}
.tgx-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:10px;white-space:nowrap}
.tgx-chip.hijau{background:#dcfce7;color:#166534}.tgx-chip.kuning{background:#fef3c7;color:#92400e}.tgx-chip.merah{background:#fee2e2;color:#991b1b}
.tgx-chip.abu{background:#f1f5f9;color:#475569}.tgx-chip.biru{background:#dbeafe;color:#1e40af}.tgx-chip.ungu{background:#ede9fe;color:#5b21b6}
.tgx-klik{cursor:pointer;border-radius:6px}
.tgx-klik:hover{background:#f0fdf4}
.tgx-pen{font-size:10px;color:#94a3b8;margin-left:3px}
.tgx-in{font:inherit;font-size:15px;font-weight:700;width:150px;max-width:100%;padding:4px 8px;border:1.5px solid #15803d;border-radius:8px;text-align:right;color:#0f172a}
.tgx-pils{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:14px 0 12px}
.tgx-pil{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:12px 14px;cursor:pointer;min-width:0;transition:border-color .15s,background .15s}
.tgx-pil:hover{border-color:#86efac}
.tgx-pil.on{border:2px solid #15803d;padding:11px 13px;background:#f0fdf4}
.tgx-pil-nama{font-size:14px;font-weight:700;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgx-pil.on .tgx-pil-nama{color:#15803d}
.tgx-pil-besar{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.tgx-pil-besar>b{font-size:26px;font-weight:800;line-height:1.2;color:#0f172a}
.tgx-pil-besar small{font-size:12px;font-weight:700}
.tgx-pil .tgx-bar{margin:6px 0 4px}
.tgx-pil .tgx-kepala{flex-direction:column;align-items:flex-start;gap:4px}
.tgx-pil-nama{max-width:100%}
.tgx-petunjuk{grid-column:1/-1;text-align:center;padding:22px 12px;border:1px dashed #cbd5e1;border-radius:12px;color:#64748b;font-size:13px}
.tgx-petunjuk i{color:#15803d;margin-right:6px}
.tgx-kartu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.tgx-toko{display:flex;flex-direction:column;gap:2px}
.tgx-toko.dipilih{border:2px solid #15803d;padding:13px 15px}
.tgx-kepala{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tgx-nama{font-size:14px;font-weight:700;color:#0f172a;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tgx-besar{font-size:28px;font-weight:800;line-height:1.2;margin-top:6px;color:#0f172a}
.tgx-gembok{border:0;background:none;cursor:pointer;color:#cbd5e1;font-size:12px;padding:2px 4px}
.tgx-gembok.on{color:#15803d}
.tgx-tombol{margin-top:10px;width:100%;border:1px solid #cbd5e1;background:#fff;border-radius:9px;padding:7px 10px;font-size:12.5px;font-weight:600;color:#334155;cursor:pointer}
.tgx-tombol:hover{border-color:#15803d;color:#15803d}
.tgx-tombol.on{background:#15803d;border-color:#15803d;color:#fff}
.tgx-lebar{grid-column:1/-1}
.tgx-catatan{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:8px 12px;margin:0 0 12px;font-size:12.5px;color:#92400e;line-height:1.55}
.tgx-catatan summary{cursor:pointer;font-weight:600}
.tgx-catatan>div{margin-top:6px}
details.tgx-catatan[style]{background:#f8fafc;border-color:#e2e8f0;color:#475569}
.tgx-komp{display:flex;height:14px;border-radius:7px;overflow:hidden;background:#f1f5f9;margin:10px 0 6px}
.tgx-legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:#475569;margin-bottom:10px}
.tgx-legenda i{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:4px}
.tgx-kosong{background:#fff;border:1px dashed #cbd5e1;border-radius:10px;padding:12px 14px;font-size:12.5px;color:#475569;margin-bottom:10px}
.tgx-plist{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:2px 12px}
.tgx-prod{display:grid;grid-template-columns:minmax(0,2fr) 120px minmax(90px,1fr) 56px;gap:12px;align-items:center;padding:10px 0;border-top:1px solid #f1f5f9}
.tgx-prod:first-child{border-top:0}
.tgx-pnama{display:flex;gap:8px;align-items:flex-start;min-width:0}
.tgx-pn{font-size:13px;font-weight:700;color:#0f172a}
.tgx-ptarget{text-align:right;font-size:14px}
.tgx-kunci{color:#15803d}
.tgx-capr b{font-size:13px}
.tgx-capr .tgx-bar{margin:4px 0 0}
.tgx-paksi{text-align:right;white-space:nowrap}
@media(max-width:640px){.tgx-prod{grid-template-columns:minmax(0,1fr) 100px}.tgx-prod>div:nth-child(3){grid-column:1/2}.tgx-v{font-size:20px}.tgx-besar{font-size:24px}}

/* ============================================
   TAB FORECAST PRODUKSI — di HP MENUMPUK KE BAWAH (22 Sep 2026, permintaan owner)
   ============================================
   Lima tab butuh ±490px, layar HP 375px. Sempat dibuat bisa digeser ke samping, tapi owner benar:
   menu yang harus digeser menyulitkan orang MENCARI — tab yang tak terlihat sama saja tidak ada.
   Di HP tabnya ditumpuk ke bawah (semuanya kelihatan sekaligus); di desktop tetap mendatar.
   Penanda tab aktif dipasang lewat kelas .prd-aktif, karena warna & tebal huruf diatur JS secara
   inline dan gaya inline mengalahkan CSS biasa. */
@media (max-width: 640px) {
    /* DUA KOLOM, bukan lima baris memanjang (revisi owner 22 Sep): lima baris membuat layar panjang dan
       isinya terdorong jauh ke bawah. Grid dipakai supaya tiap baris tingginya sama walau teksnya
       membungkus dua baris — kalau flex, tombol jadi tidak rata. Butir kelima menempati kolom kiri. */
    .prd-tabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow-x: visible !important; gap: 6px !important; border-bottom: none !important; margin-bottom: 12px !important; }
    .prd-tabs button { width: 100%; text-align: left; white-space: normal !important; line-height: 1.25;
        padding: 10px 11px !important; font-size: 13px !important; border: 1px solid #eef2f7 !important; border-radius: 9px; }
    .prd-tabs button.prd-aktif { background: #f0fdf4 !important; border-color: #bbf7d0 !important; }
}
/* Media — label tema & keranjang kuning per konten (28 Sep 2026) */
.mdk-lbl-k{font-weight:400;color:#94a3b8;font-size:11px;margin-left:4px;text-transform:none;letter-spacing:0}
.mdk-tm{display:flex;gap:10px;align-items:flex-start;margin:6px 0}
.mdk-tm-l{flex:0 0 90px;font-size:11.5px;color:#64748b;padding-top:6px}
.mdk-tm .med-chips{flex:1}
.mdk-tema{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;font-size:11.5px}
.mdk-tema span{background:#f1f5f9;color:#334155;border-radius:999px;padding:2px 9px}
.mdk-tema span.kosong{background:#fef3c7;color:#92400e}
.mdk-tema span.krj{background:#fef9c3;color:#854d0e}
@media (max-width:640px){.mdk-tm{flex-direction:column;gap:4px}.mdk-tm-l{flex:none;padding-top:0}}
.mdk-tm-i{flex:1;display:flex;gap:8px;flex-wrap:wrap}.mdk-tm-i select,.mdk-tm-i input{flex:1 1 200px;min-width:0}
/* Media → Masukan → Rencana tema (28 Sep 2026) */
.mdt-prog{display:block;height:5px;background:#e2e8f0;border-radius:3px;margin:3px 0 4px;overflow:hidden}.mdt-prog i{display:block;height:100%;background:#16a34a}
.mdt-rencana{display:grid;gap:8px}
.mdt-rc{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:10px 14px}
.mdt-rc.coba{background:#f8fafc;border-style:dashed}
.mdt-rc-v{font-size:22px;font-weight:800;color:#0f172a;min-width:64px;line-height:1}.mdt-rc-v em{display:block;font-style:normal;font-size:10.5px;font-weight:500;color:#94a3b8;margin-top:2px}
.mdt-rc-t{flex:1;min-width:0}.mdt-rc-t b{display:block;font-size:14px;color:#0f172a}
.mdt-rc-s{font-size:13px;font-weight:700;color:#166534;text-align:right}
.mdt-kosong{display:flex;gap:12px;align-items:flex-start;background:#f0fdf4;border:1px dashed #86efac;border-radius:12px;padding:14px}
.mdt-kosong>i{font-size:22px;color:#16a34a;margin-top:2px}.mdt-kosong b{color:#14532d}
.mdt-dorong{margin:10px 0 4px;font-size:12.5px;color:#334155;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:8px 12px}.mdt-dorong>i{color:#ea580c;margin-right:4px}
.mdt-tabel td,.mdt-tabel th{vertical-align:top}.mdt-tabel{min-width:640px}
.mdt-bobot{font-size:10px;font-weight:500;color:#94a3b8}
.mdt-ix{font-weight:700;color:#475569}.mdt-ix.naik{color:#16a34a}.mdt-ix.turun{color:#dc2626}
.mdt-n{display:block;font-style:normal;font-size:10.5px;color:#94a3b8}
.mdt-na{color:#cbd5e1}
tr.mdt-redup td{opacity:.6}
.mdt-krj-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.mdt-krj{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px}
.mdt-krj-b{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:4px 0;border-bottom:1px solid #f1f5f9;font-size:12.5px}
.mdt-krj-b .mdt-n{display:inline;margin-left:4px}
@media (max-width:640px){.mdt-scroll table,.mdt-scroll thead,.mdt-scroll tbody,.mdt-scroll tr,.mdt-scroll td{display:block;min-width:0}.mdt-scroll thead{display:none}
 .mdt-scroll tr{border:1px solid #e2e8f0;border-radius:10px;margin-bottom:8px;padding:6px 10px;display:grid;grid-template-columns:1fr 1fr}
 .mdt-scroll td{border:none;padding:3px 0;text-align:left!important}.mdt-scroll td:first-child{grid-column:1/-1}
 .mdt-scroll td:not(:first-child)::before{content:attr(data-l);display:block;font-size:10px;color:#94a3b8}}
.mdt-prs{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.mdt-pr{font-size:10.5px;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:1px 8px;font-weight:600}.mdt-pr.dorong{background:#ffedd5;color:#c2410c}
.mdt-plist{display:grid;gap:6px}
.mdt-prow{border:1px solid #e2e8f0;border-radius:10px;padding:8px 12px;background:#fff}
.mdt-prow-h{display:grid;grid-template-columns:minmax(150px,1fr) 2fr auto;gap:10px;align-items:center}
.mdt-prow-n b{margin-right:6px}.mdt-prow-a{display:flex;gap:4px;justify-content:flex-end}
.mdt-tg{display:inline-block;font-size:11px;background:#dcfce7;color:#166534;border-radius:999px;padding:2px 9px;margin:2px 4px 2px 0}
.mdt-tg.tn{background:#e0f2fe;color:#075985}.mdt-tg.usul{background:#fff;border:1px dashed #94a3b8;color:#475569}
.mdt-pedit{border-top:1px dashed #e2e8f0;margin-top:8px;padding-top:8px}
@media (max-width:640px){.mdt-prow-h{grid-template-columns:1fr auto}.mdt-prow-i{grid-column:1/-1;order:3}}

/* ===== PKL (pkl-*) — 30 Sep 2026, web/js/pkl.js. Gaya "kotak besar, rapi" (selera owner) ===== */
.pkl-sembunyi { display: none !important; }
.pkl-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.pkl-tabs button, .pkl-seg button, .pkl-pilih button { border: 1px solid #e2e8f0; background: #fff; color: #334155; border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 13px; cursor: pointer; }
.pkl-tabs button.on, .pkl-seg button.on, .pkl-pilih button.on { background: #15803d; border-color: #15803d; color: #fff; }
.pkl-seg, .pkl-pilih { display: flex; gap: 6px; flex-wrap: wrap; }
.pkl-bar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.pkl-bar .kpix-select { max-width: 100%; }
.pkl-dim { color: #64748b; font-size: 12.5px; }
.pkl-kotak { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.pkl-info { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.pkl-atas { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pkl-besar { font-size: 30px; font-weight: 800; color: #0f172a; line-height: 1.15; margin: 2px 0; }
.pkl-besar small { font-size: 15px; color: #94a3b8; font-weight: 600; }
.pkl-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pkl-3.pkl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pkl-kartu { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 5px; }
.pkl-kartu-head { display: flex; gap: 8px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.pkl-aksi { display: flex; gap: 6px; flex-wrap: wrap; }
.pkl-keg { font-size: 14px; }
.pkl-kk { background: #fef3c7; color: #92400e; border-radius: 6px; padding: 1px 6px; font-weight: 700; font-size: 12px; }
.pkl-bukti { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.pkl-bukti a { color: #15803d; font-weight: 600; text-decoration: none; }
.pkl-st { display: inline-flex; gap: 5px; align-items: center; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.pkl-st-tunggu { background: #fef3c7; color: #92400e; } .pkl-st-ok { background: #dcfce7; color: #166534; }
.pkl-st-bintang { background: #ede9fe; color: #6d28d9; } .pkl-st-tolak { background: #fee2e2; color: #b91c1c; }
.pkl-nilai-btn { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.pkl-nilai-btn button { flex: 1; min-width: 90px; border: 0; border-radius: 10px; padding: 10px; font-weight: 700; cursor: pointer; }
.pkl-b-tolak { background: #fee2e2; color: #b91c1c; } .pkl-b-ok { background: #dcfce7; color: #166534; } .pkl-b-bintang { background: #ede9fe; color: #6d28d9; }
.pkl-huruf { text-align: right; } .pkl-huruf b { font-size: 26px; color: #15803d; display: block; line-height: 1; } .pkl-huruf span { font-size: 12px; color: #64748b; }
.pkl-komp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; background: #f8fafc; border-radius: 10px; padding: 10px; }
.pkl-komp b { font-size: 18px; }
.pkl-akhir { border-top: 1px dashed #e2e8f0; padding-top: 8px; }
.pkl-tabel td.r, .pkl-tabel th.r { text-align: right; }
.pkl-target { margin-bottom: 10px; }
.pkl-batang { height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden; margin-top: 4px; }
.pkl-batang span { display: block; height: 100%; background: #15803d; border-radius: 999px; }
.pkl-geser { display: flex; gap: 10px; align-items: center; }
.pkl-sandi { display: flex; gap: 10px; justify-content: center; margin: 14px 0; }
.pkl-sandi > div { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; }
.pkl-sandi b { font-family: ui-monospace, Menlo, monospace; font-size: 22px; letter-spacing: 1px; color: #0f172a; }
.pkl-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 30px 16px; overflow-y: auto; }
.pkl-modal-box { background: #fff; border-radius: 16px; padding: 18px 20px; width: 100%; max-width: 480px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.pkl-modal-box h4 { margin: 16px 0 8px; }
.pkl-in { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
.pkl-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.pkl-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 10px; }
.pkl-jam { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.pkl-jam label { width: 90px; display: flex; gap: 6px; align-items: center; }
.pkl-jam input[type=time] { border: 1px solid #e2e8f0; border-radius: 8px; padding: 5px 8px; }
.pkl-keg-baris { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.pkl-keg-baris > input:first-child { flex: 1; min-width: 150px; }
.pkl-sesi { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.pkl-sesi button { text-align: left; border: 1px solid #e2e8f0; background: #fff; border-radius: 10px; padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.pkl-sesi button span { color: #64748b; font-size: 12.5px; }
.pkl-sesi button.on { border-color: #15803d; background: #f0fdf4; }
@media (max-width: 640px) {
  .pkl-3 { grid-template-columns: 1fr; }
  .pkl-komp, .pkl-grid4 { grid-template-columns: 1fr 1fr; }
  .pkl-grid2 { grid-template-columns: 1fr; }
  .pkl-besar { font-size: 26px; }
}

/* PKL tab Nilai (1 Okt): baris ringkas per anak, klik = rincian */
.pkl-hchips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pkl-hchip { border: 1px solid var(--w); color: var(--w); border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.pkl-nrow { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.pkl-nrow.buka { border-color: #86efac; box-shadow: 0 2px 10px rgba(21,128,61,.08); }
.pkl-nrow-h { display: grid; grid-template-columns: 46px minmax(140px, 1.2fr) minmax(0, 2fr) auto; gap: 12px; align-items: center; padding: 10px 14px; cursor: pointer; }
.pkl-nrow-h:hover { background: #f8fafc; }
.pkl-nh { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: var(--w); background: color-mix(in srgb, var(--w) 12%, #fff); }
.pkl-nn { display: flex; flex-direction: column; min-width: 0; }
.pkl-nn b, .pkl-nn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkl-nk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pkl-nk small { display: block; font-size: 10.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pkl-mb { height: 7px; background: #f1f5f9; border-radius: 999px; overflow: hidden; margin-top: 3px; }
.pkl-mb span { display: block; height: 100%; border-radius: 999px; }
.pkl-mb.kosong { background: repeating-linear-gradient(90deg, #f1f5f9 0 4px, #fff 4px 8px); }
.pkl-ni { display: flex; gap: 6px; align-items: center; color: #94a3b8; }
.pkl-nrow-d { border-top: 1px dashed #e2e8f0; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.pkl-akhir-i { display: flex; gap: 8px; flex-wrap: wrap; }
.pkl-akhir-i input:first-child { width: 90px; } .pkl-akhir-i input:nth-child(2) { flex: 1; min-width: 180px; }
@media (max-width: 760px) {
  .pkl-nrow-h { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .pkl-nk { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* PKL form gelombang (1 Okt): jendela berkepala/berkaki tetap, 5 langkah bernomor, kolom rata */
.pkl-jendela { background: #fff; border-radius: 16px; width: 100%; max-width: 780px; max-height: calc(100vh - 60px); display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.pkl-j-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid #eef2f7; font-size: 17px; }
.pkl-j-h button { border: 0; background: none; font-size: 26px; color: #94a3b8; cursor: pointer; line-height: 1; }
.pkl-j-i { padding: 6px 20px 16px; overflow-y: auto; }
.pkl-j-f { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid #eef2f7; background: #fafafa; border-radius: 0 0 16px 16px; }
.pkl-lbl { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #0f172a; margin: 18px 0 10px; font-size: 14px; flex-wrap: wrap; }
.pkl-lbl > span { width: 22px; height: 22px; border-radius: 50%; background: #15803d; color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.pkl-lbl small { font-weight: 500; color: #64748b; font-size: 12px; }
.pkl-rp { display: flex; align-items: stretch; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.pkl-rp span { background: #f8fafc; color: #64748b; padding: 0 10px; display: flex; align-items: center; font-size: 13px; }
.pkl-rp input { border: 0 !important; flex: 1; min-width: 0; }
.pkl-jam-wrap { border: 1px solid #eef2f7; border-radius: 12px; overflow: hidden; }
.pkl-jr { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid #f1f5f9; flex-wrap: wrap; }
.pkl-jr:last-child { border-bottom: 0; }
.pkl-jr.libur { background: #fafafa; }
.pkl-jr input[type=time] { border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 8px; font-size: 14px; }
.pkl-hari { width: 84px; border: 1px solid #e2e8f0; background: #fff; color: #94a3b8; border-radius: 999px; padding: 6px 0; font-weight: 700; font-size: 13px; cursor: pointer; }
.pkl-hari.on { background: #15803d; border-color: #15803d; color: #fff; }
.pkl-kr { display: grid; grid-template-columns: minmax(150px, 2fr) minmax(150px, 1.6fr) 90px 80px 90px 34px; gap: 6px; align-items: center; margin-bottom: 6px; }
.pkl-kr-h span { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; }
.pkl-kr input, .pkl-kr select, .pkl-hr input { width: 100%; box-sizing: border-box; }
.pkl-hapus { border: 0; background: #fef2f2; color: #ef4444; border-radius: 8px; height: 34px; cursor: pointer; }
.pkl-tambah { border: 1px dashed #86efac; background: #f0fdf4; color: #15803d; border-radius: 10px; padding: 8px 12px; font-weight: 600; cursor: pointer; width: 100%; margin-top: 2px; }
.pkl-bobot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 90px; gap: 10px; align-items: start; }
.pkl-bobot input { width: 100%; box-sizing: border-box; }
.pkl-tot { border-radius: 12px; background: #fef2f2; color: #b91c1c; text-align: center; padding: 8px 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.pkl-tot.ok { background: #dcfce7; color: #166534; }
.pkl-tot b { font-size: 24px; }
.pkl-hr { display: grid; grid-template-columns: 70px 140px 1fr 34px; gap: 6px; align-items: center; margin-bottom: 6px; }
.pkl-hr-h { text-align: center; font-weight: 800; }
.pkl-hr-min { display: flex; align-items: center; gap: 6px; }
@media (max-width: 700px) {
  .pkl-kr { grid-template-columns: 1fr 1fr; background: #f8fafc; padding: 8px; border-radius: 10px; }
  .pkl-kr-h { display: none; }
  .pkl-kr > input:first-child { grid-column: 1 / -1; }
  .pkl-bobot { grid-template-columns: 1fr 1fr; }
  .pkl-hr { grid-template-columns: 60px 1fr 34px; } .pkl-hr > input:nth-child(3) { grid-column: 1 / -2; }
  .pkl-hari { width: 70px; }
}

/* PKL riwayat jurnal (1 Okt) */
.pkl-riw { border-top: 1px dashed #e2e8f0; padding-top: 10px; }
.pkl-riw-f { margin-bottom: 10px; } .pkl-riw-f button small { opacity: .7; margin-left: 2px; }
.pkl-riw-m { border: 1px solid #eef2f7; border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.pkl-riw-mh { background: #f8fafc; padding: 8px 12px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.pkl-riw-r { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; padding: 8px 12px; border-top: 1px solid #f1f5f9; align-items: start; font-size: 13px; }
.pkl-riw-t { text-align: center; color: #64748b; font-size: 11px; line-height: 1.2; } .pkl-riw-t b { font-size: 17px; color: #0f172a; }
.pkl-riw-i { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pkl-riw-tgl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.pkl-riw-tgl input { width: auto; }
.pkl-pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pkl-pager button[disabled] { opacity: .4; cursor: default; }
.pkl-kb { margin-bottom: 10px; }
.pkl-kb .pkl-kr { margin-bottom: 4px; }
.pkl-uraian { width: 100%; box-sizing: border-box; font-size: 13px; resize: vertical; }
.pkl-jd summary { cursor: pointer; font-weight: 700; list-style: none; }
.pkl-jd summary::-webkit-details-marker { display: none; }
.pkl-jd-r { border-top: 1px solid #f1f5f9; padding: 9px 0; display: flex; flex-direction: column; gap: 3px; }
.pkl-jd-r:first-of-type { margin-top: 8px; }
.pkl-jd-h { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pkl-jd-u { font-size: 13.5px; color: #334155; }
.pkl-jdk { display: flex; flex-direction: column; gap: 8px; }
.pkl-no { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: #15803d; color: #fff; font-size: 12px; align-items: center; justify-content: center; }
.pkl-jamchips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pkl-jamchip { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.pkl-jamchip.libur { background: #f8fafc; border-color: #e2e8f0; color: #94a3b8; }
.pkl-kop-pre { display: flex; gap: 12px; align-items: center; border-bottom: 3px double #15803d; padding: 10px 0; margin: 10px 0; font-size: 12.5px; color: #334155; }
.pkl-kop-pre img { height: 40px; } .pkl-kop-pre b { font-size: 15px; color: #14532d; }