/* ── TEMA TERANG (LIGHT MODE) ── */
:root{
  --bg: #f4f7f6;
  --card: #ffffff;
  --light: #e9ecef;
  --border: #dee2e6;
  --accent: #d97706;
  --green: #16a34a;
  --blue: #2563eb;
  --red: #dc2626;
  --orange: #ea580c;
  --teal: #0d9488;
  --muted: #6c757d;
  --text: #212529;
  --sub: #495057;
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Courier New',Courier,monospace;min-height:100vh;font-size:13px}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* ── HEADER ── */
.hdr{background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;box-shadow:0 2px 4px rgba(0,0,0,0.02);transition:transform .25s ease}
.hdr.hdr-hidden{transform:translateY(-100%)}
.hdr-top{display:flex;align-items:center;gap:14px;padding:13px 24px;flex-wrap:wrap}
.logo{width:38px;height:38px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--green));display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;color:#fff}
.hdr-title h1{font-size:13px;font-weight:800;letter-spacing:1px;color:var(--accent)}
.hdr-title p{font-size:10px;color:var(--sub);letter-spacing:1px;font-weight:600}
.hdr-stats{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.hstat{text-align:right}
.hstat span:first-child{display:block;font-size:9px;color:var(--sub);letter-spacing:1px;font-weight:700}
.hstat span:last-child{font-size:15px;font-weight:800;color:var(--text)}
.hdr-btns{display:flex;gap:6px;margin-left:8px}

.nav{display:flex;overflow-x:auto;padding:0 24px;border-bottom:1px solid var(--border);background:#fff}
.nav-btn{padding:10px 16px;border:none;background:transparent;color:var(--muted);font-size:11px;letter-spacing:1px;font-weight:600;border-bottom:3px solid transparent;white-space:nowrap;cursor:pointer;font-family:inherit;transition:all .2s}
.nav-btn.active{color:var(--accent);font-weight:800;border-bottom-color:var(--accent)}
.nav-btn:hover:not(.active){color:var(--text);background:var(--bg)}

/* ── SLICER BAR ── */
.slicer-bar{background:#f8f9fa;padding:10px 24px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);overflow-x:auto}
.slicer-label{font-size:10px;color:var(--sub);font-weight:800;letter-spacing:1px;white-space:nowrap}

/* ── LAYOUT ── */
.main{padding:20px 24px;max-width:1440px;margin:0 auto; background:var(--bg)}
/* width:100% wajib di sini — tanpanya .main (flex item dgn margin:0 auto di kolom flex) cuma shrink-to-fit ke lebar kontennya sendiri, bukan melebar ke ruang yang tersedia */
.main.tk-full-width{max-width:none;width:100%}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:15px;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.card-title{font-size:11px;color:var(--text);letter-spacing:1px;margin-bottom:14px;text-transform:uppercase;font-weight:800;border-bottom:1px dashed var(--border);padding-bottom:8px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.flex{display:flex;gap:12px;flex-wrap:wrap}

/* ── KPI ── */
.kpi{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:15px;flex:1;min-width:140px;box-shadow:0 1px 2px rgba(0,0,0,0.02)}
.kpi-lbl{font-size:10px;color:var(--sub);letter-spacing:1px;margin-bottom:4px;text-transform:uppercase;font-weight:700}
.kpi-val{font-size:24px;font-weight:800;margin-bottom:2px;color:var(--text)}
.kpi-sub{font-size:10px;color:var(--muted);font-weight:600}

/* ── TABLE UMUM ── */
.tbl-wrap{overflow-x:auto;max-height:450px;overflow-y:auto; width:100%}
table{width:100%;border-collapse:collapse;font-size:12px; table-layout:auto}
thead tr{border-bottom:2px solid var(--border);background:#f8f9fa;position:static;}
thead th{position:sticky;top:0;z-index:10;background:#f8f9fa;}
th{padding:10px 12px;text-align:left;color:var(--sub);font-size:10px;letter-spacing:1px;font-weight:800;text-transform:uppercase;white-space:nowrap}

/* Efek Global untuk Tabel Dashboard */
tbody tr {
    border-bottom: 1px solid var(--light);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

tbody tr:hover {
    background-color: #f0fdf4 !important; /* Hijau Lite */
    transform: scale(1.008);
    transform-origin: left center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    position: relative;
    z-index: 15;
    outline: 1px solid #22c55e;
}

/* Pastikan kolom beku (sticky) juga berubah warna saat hover */
tbody tr:hover td {
    background-color: #f0fdf4 !important;
    color: #064e3b !important;
    text-shadow: 0 0 1px rgba(6, 78, 59, 0.4);
}

/* Highlight Baris Terpilih (Klik) */
tbody tr.selected-row {
    background-color: #dcfce7 !important; /* Emerald-100 */
}
tbody tr.selected-row td {
    background-color: #dcfce7 !important;
    color: #064e3b !important;
    font-weight: 700;
}

td{padding:10px 12px;white-space:nowrap;color:var(--text)}

.wrap-text { white-space: normal !important; min-width: 110px; line-height: 1.2; }
.tbl-compact th, .tbl-compact td { padding: 4px 6px !important; font-size: 10px !important; }
.tbl-compact .badge { padding: 3px 6px !important; font-size: 9px !important; }
.tbl-bordered th, .tbl-bordered td { border: 1px solid var(--border); }

/* ── TABEL TAKSASI KHUSUS ── */
.tbl-taksasi { width:100%; border-collapse:collapse; font-size:10.5px; font-family:sans-serif; }
.tbl-taksasi th { background-color:#006400; color:#ffffff; border:1px solid #004d00; padding:6px 4px; text-align:center; vertical-align:middle; font-weight:800; font-size:10px; }
.tbl-taksasi td { padding:6px 4px; border:1px solid #ccc; color:inherit; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; transition: 0.2s; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ── TABEL KOMITMEN REKRUTMEN TK PANEN (target-khusus) ── */
/* container-type:inline-size membuat satuan cqw tersedia agar font ikut menyusut/mengembang sesuai lebar kontainer (bukan cuma viewport) */
.rekrut-wrap{container-type:inline-size;width:100%;max-height:70vh;overflow:auto}
.rekrut-tbl{width:100%;border-collapse:collapse;table-layout:fixed;font-size:clamp(8px,1.05cqw,12.5px)}
.rekrut-tbl th,.rekrut-tbl td{padding:4px 5px;word-break:break-word;overflow-wrap:break-word;white-space:normal}
/* th punya background sendiri lewat aturan global "thead th{background:#f8f9fa}" (untuk sticky header) —
   background sel selalu tampil di atas background tr, jadi harus di-override eksplisit per th/td di sini, bukan cuma color */
.rekrut-tbl thead tr:nth-child(1) > th{background:#1e293b;color:#fff}
.rekrut-tbl thead tr:nth-child(2) > td{background:#334155;color:#e2e8f0}
.rekrut-tbl tr.rk-total td,.rekrut-tbl tr.rk-grand td{color:#fff}
.rekrut-tbl .badge{font-size:0.85em}
/* kolom sempit (angka/centang singkat) -> header diputar vertikal agar tak pecah huruf-per-huruf, sama seperti pola .qc-table-panen */
.rekrut-tbl .rk-vert{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;text-align:left;padding:6px 2px;font-weight:800}

/* ── TABEL QUALITY CONTROL KHUSUS ── */
.qc-table-panen { width: 100% !important; table-layout: auto; border-collapse: collapse; }
.qc-table-panen th { background-color: #3b82f6 !important; color: #ffffff !important; text-align: center; vertical-align: middle; border: 1px solid #1d4ed8; font-size: 9px !important; padding: 5px 3px !important; line-height: 1.2; font-family: sans-serif; cursor: pointer; transition: background 0.2s; }
.qc-table-panen th:hover { background-color: #1e40af !important; }
.qc-table-panen th:not([colspan]) { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap !important; text-align: left; padding: 8px 3px !important; }
.qc-table-panen td { border: 1px solid #cbd5e1; padding: 4px 3px !important; font-size: 9px !important; text-align: center; white-space: normal; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; line-height: 1.2; font-family: sans-serif; color: #212529; }
.qc-table-panen tbody tr:nth-child(even) { background-color: #f8fafc; }
.qc-table-panen tbody tr:hover { background-color: #f1f5f9; }

/* ── ATURAN KHUSUS EKSPOR (PDF/PNG) ── */
.exporting #captureArea,
.exporting .main {
    width: 1440px !important; /* Lebar standar desktop untuk menjamin grid g3 tetap 3 kolom */
    max-width: none !important;
    margin: 0 !important;
    padding: 20px !important;
    height: auto !important;
    overflow: visible !important;
    background-color: #f4f7f6 !important;
}

.exporting .tbl-wrap,
.exporting .ch-wrap {
    max-height: none !important;
    overflow: visible !important;
}

.exporting .g2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 15px !important; }
.exporting .g3 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
.exporting .g4 { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; }
.exporting .card { page-break-inside: avoid; break-inside: avoid; overflow: visible !important; }

/* PAKSA MATIKAN SEMUA STICKY/FIXED SAAT EKSPOR AGAR TIDAK MENUTUPI DATA */
.exporting * { position: static !important; }
.exporting .main, 
.exporting .card, 
.exporting .tbl-wrap, 
.exporting .ch-wrap { position: relative !important; }

/* FIX EXPORT WORKAROUND UNTUK HEADER TABEL QC PANEN */
.exporting .qc-table-panen th:not([colspan]) {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    white-space: normal !important;
    padding: 8px !important;
}
.exporting .qc-table-panen th { background-color: #3b82f6 !important; color: #ffffff !important; }

/* ── TABEL GRADING MILL (header horizontal, tidak diputar) ── */
.qc-table-mill { width: 100% !important; table-layout: auto; border-collapse: collapse; }
.qc-table-mill th { background-color: #3b82f6 !important; color: #ffffff !important; text-align: center; vertical-align: middle; border: 1px solid #1d4ed8; font-size: 9px !important; padding: 6px 5px !important; line-height: 1.3; font-family: sans-serif; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.qc-table-mill th:hover { background-color: #1e40af !important; }
.qc-table-mill td { border: 1px solid #cbd5e1; padding: 4px 5px !important; font-size: 9px !important; text-align: center; white-space: nowrap; line-height: 1.2; font-family: sans-serif; color: #212529; }
.qc-table-mill tbody tr:nth-child(even) { background-color: #f8fafc; }
.qc-table-mill tbody tr:hover { background-color: #f1f5f9; }

/* ── PROGRESS ── */
.pbar{background:var(--light);border-radius:99px;height:6px;overflow:hidden;margin-bottom:4px}
.pbar-fill{height:100%;border-radius:99px;transition:width .6s}
.badge{display:inline-block;padding:3px 8px;border-radius:99px;font-size:10px;font-weight:800}

/* ── BUTTONS & PILLS ── */
.btn{padding:9px 16px;border-radius:7px;border:none;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;letter-spacing:.3px}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 4px rgba(217,119,6,0.2)}.btn-primary:hover{background:#b45309}
.btn-outline{background:var(--card);border:1px solid var(--border);color:var(--text)}.btn-outline:hover{background:var(--light)}
.btn-sm{padding:6px 12px;font-size:11px;border-radius:6px}
.btn-icon{padding:8px 12px;border-radius:7px;border:1px solid var(--border);background:#fff;color:var(--text);cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,0.02)}
.btn-icon:hover{background:var(--light)}
.btn-icon:disabled{opacity:0.5;cursor:not-allowed}

.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pill{padding:6px 14px;border-radius:99px;border:1px solid var(--border);background:#fff;color:var(--sub);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,0.02)}
.pill.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:800}
.pill:hover:not(.on){background:var(--light);color:var(--text)}

/* ── CHART ── */
.ch-wrap{position:relative;height:240px}.ch-wrap.tall{height:300px}

/* ── HR QUADRANT CARDS ── */
.quad-box { border-radius:10px; padding:15px; color:#fff; height:100%; display:flex; flex-direction:column; gap:6px; box-shadow:0 2px 4px rgba(0,0,0,0.1) }
.quad-star { background: linear-gradient(135deg, #16a34a, #15803d); }
.quad-work { background: linear-gradient(135deg, #d97706, #b45309); }
.quad-pot  { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.quad-under { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.quad-box h3 { font-size:14px; font-weight:800; border-bottom:1px solid rgba(255,255,255,0.2); padding-bottom:6px; margin-bottom:4px; display:flex; justify-content:space-between; align-items:center }
.quad-box p { font-size:11px; font-weight:600; line-height:1.4; margin-bottom:6px; opacity: 0.9 }
.quad-box ul { list-style:none; font-size:10px; margin-left:0; font-family: sans-serif; font-weight:500 }
.quad-box li { margin-bottom:5px; padding-left:14px; position:relative }
.quad-box li::before { content:'→'; position:absolute; left:0; top:0; font-weight:bold }

/* ── WIDGET CUACA ── */
.w-card { background: linear-gradient(135deg, #0ea5e9, #1d4ed8); color: white; border-radius: 12px; padding: 20px; font-family: sans-serif; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-bottom: 20px;}
.w-card.night { background: linear-gradient(135deg, #1e293b, #0f172a); }
.w-current { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 15px; margin-bottom: 15px; flex-wrap: wrap; gap:15px;}
.w-temp { font-size: 48px; font-weight: 800; line-height: 1; }
.w-desc { font-size: 16px; font-weight: 600; opacity: 0.9; margin-top:4px;}
.w-loc { font-size: 11px; opacity: 0.9; margin-bottom: 8px; display: flex; align-items: center; gap: 5px; font-weight: 600; background: rgba(0,0,0,0.2); padding: 4px 10px; border-radius: 20px; width: fit-content; }
.w-icon { font-size: 64px; line-height: 1; filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.2)); }
.w-details { display: flex; gap: 10px; font-size: 11px; opacity: 0.9; flex-wrap: wrap; }
.w-details div { background: rgba(0,0,0,0.2); padding: 6px 10px; border-radius: 6px; display: flex; gap:6px; align-items:center; }
.w-hourly { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.2); margin-bottom: 15px; }
.w-hourly::-webkit-scrollbar { height: 6px; }
.w-hourly::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.4); border-radius: 4px; }
.w-hourly::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 4px; }
.w-hour-item { text-align: center; min-width: 60px; background: rgba(255,255,255,0.1); padding: 12px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); }
.w-hour-time { font-size: 11px; font-weight: 600; margin-bottom: 8px; opacity: 0.8;}
.w-hour-icon { font-size: 24px; margin-bottom: 8px; filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.2)); }
.w-hour-temp { font-size: 14px; font-weight: 800; }
.w-daily { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.w-day-item { display: flex; align-items: center; justify-content: space-between; font-size: 12px; background: rgba(0,0,0,0.2); padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); }
.w-day-name { width: 80px; font-weight: 600; }
.w-day-icon { font-size: 18px; width: 30px; text-align: center; }
.w-day-temp { font-weight: 800; width: 70px; text-align: right; }
.w-day-precip { font-size: 11px; opacity: 0.8; width: 50px; text-align: right; color:#bae6fd; font-weight:600;}

/* ── MODAL & FORM ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);z-index:200;display:none;align-items:flex-start;justify-content:center;padding:32px 12px;overflow-y:auto}
.overlay.show{display:flex}
.modal{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px;width:100%;max-width:620px;position:relative;animation:fadeIn .2s;box-shadow:0 10px 25px rgba(0,0,0,0.1)}
@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.modal h2{font-size:15px;font-weight:800;color:var(--text);letter-spacing:1px;margin-bottom:4px}
.modal-x{position:absolute;top:16px;right:18px;background:transparent;border:none;color:var(--muted);font-size:20px;cursor:pointer}.modal-x:hover{color:var(--red)}

.fg{margin-bottom:14px}
.fl{display:block;font-size:10px;color:var(--sub);letter-spacing:1px;margin-bottom:6px;text-transform:uppercase;font-weight:700}
.fc{width:100%;background:#fff;border:1px solid var(--border);border-radius:7px;padding:10px 12px;color:var(--text);font-size:13px;font-family:inherit;outline:none;transition:border .15s;box-shadow:inset 0 1px 2px rgba(0,0,0,0.01)}
.fc:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(217,119,6,0.1)}
textarea.fc{resize:vertical; min-height:80px; font-family:monospace; font-size:11px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fr3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fr4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}

.info-box{background:#f0f9ff;border-left:4px solid var(--blue);padding:12px 16px;border-radius:0 8px 8px 0;margin-bottom:14px;font-size:12px;color:#0369a1;line-height:1.5;font-weight:600}
.err{background:#fef2f2;border:1px solid #fecaca;border-radius:7px;padding:12px 16px;color:#b91c1c;font-size:12px;margin:10px 0;font-weight:600}
.ok-msg{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:7px;padding:12px 16px;color:#15803d;font-size:12px;margin:10px 0;font-weight:600}

.setup{text-align:center;padding:80px 20px}
.setup h2{font-size:22px;color:var(--text);margin-bottom:10px;font-weight:800}
.loading{text-align:center;padding:60px;color:var(--sub);font-size:14px;font-weight:600}

.text-ac{color:var(--accent)}.text-gr{color:var(--green)}.text-bl{color:var(--blue)}.text-rd{color:var(--red)}.text-sb{color:var(--sub)}
.fw7{font-weight:700}.fs9{font-size:10px}
/* ── SIDEBAR LAYOUT ── */
.layout-wrapper{display:flex;min-height:100vh;}

.sidebar{
  width:158px;min-width:158px;flex-shrink:0;
  background:var(--card);border-right:1px solid var(--border);
  position:sticky;top:0;height:100vh;overflow-y:auto;
  z-index:60;box-shadow:2px 0 6px rgba(0,0,0,0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* State Sidebar Tertutup */
.layout-wrapper.sidebar-collapsed .sidebar {
  width: 0;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  border-right: none;
}

.sidebar-brand{
  padding:14px 10px 12px;border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;gap:5px;
}
.sidebar-brand-text{font-size:9px;font-weight:800;color:var(--accent);letter-spacing:2px;}

.main-wrap{flex:1;min-width:0;display:flex;flex-direction:column;}

/* ── NAV VERTIKAL (SIDEBAR) ── */
.nav-side{
  display:flex;flex-direction:column;padding:6px 0;
  border-bottom:none;background:transparent;overflow-x:visible;
}
.nav-side .nav-btn{
  text-align:left;padding:10px 12px;width:100%;
  border-bottom:none !important;border-left:3px solid transparent;
  white-space:normal;line-height:1.3;
}
.nav-side .nav-btn.active{
  color:var(--accent);font-weight:800;
  border-left-color:var(--accent) !important;
  border-bottom-color:transparent !important;
  background:rgba(217,119,6,0.06);
}
.nav-side .nav-btn:hover:not(.active){color:var(--text);background:var(--bg);}

/* Export: sembunyikan sidebar agar tidak ikut ter-render */
.exporting .sidebar{display:none;}
.exporting .layout-wrapper{display:block;}
.exporting .main-wrap{width:100%;}

@media(max-width:700px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .fr,.fr3,.fr4{grid-template-columns:1fr 1fr}
  .hdr-stats{display:none}
  .main{padding:14px}
  .layout-wrapper{flex-direction:column;}
  .sidebar{width:100%;min-width:0;height:auto;position:relative;overflow-x:auto;overflow-y:hidden;}
  .sidebar-brand{display:none;}
  .nav-side{flex-direction:row;padding:0;overflow-x:auto;}
  .nav-side .nav-btn{border-left:none !important;border-bottom:3px solid transparent;white-space:nowrap;padding:10px 14px;}
  .nav-side .nav-btn.active{border-bottom-color:var(--accent) !important;border-left-color:transparent !important;background:transparent;}
}
/* =========================================================
   YIELD STATISTIC
========================================================= */

.yield-main-card{
    background:#ffffff;
    border-radius:12px;
    padding:12px;
    border:1px solid #d1d5db;
    overflow:hidden;
}

.yield-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
    gap:12px;
}

.yield-title{
    font-size:20px;
    font-weight:700;
    color:#111827;
}

.yield-select{
    padding:4px 8px;
    border-radius:6px;
    border:1px solid #d1d5db;
    background:#ffffff;
    font-size:12px;
    font-weight:600;
}

.yield-table-wrapper{
    width:100%;
    overflow:auto;
    border:1px solid #d1d5db;
    max-height:75vh;
    background:#ffffff;
}

/* =========================================================
   TABLE
========================================================= */

.yield-table{
    width:100%;
    border-collapse:collapse;
    table-layout:auto;
    font-size:9px;
    background:#ffffff;
}

.yield-table th,
.yield-table td{
    border:1px solid #9ca3af;
    padding:4px 6px;
    text-align:center;
    vertical-align:middle;
    white-space:nowrap;
    background:#ffffff;
}

/* =========================================================
   HEADER
========================================================= */

.yield-table thead th{
    font-weight:700;
    line-height:1.2;
    white-space:normal;
    word-break:keep-all;
    overflow-wrap:normal;
    font-size:9px;
}

/* =========================================================
   BODY
========================================================= */

.yield-table tbody td{
    white-space:nowrap;
    font-size:9px;
}

/* =========================================================
   INTI / PLASMA WRAP
========================================================= */

.yield-table td:nth-child(10){
    white-space:normal;
    min-width:70px;
}

/* =========================================================
   HEADER GROUP
========================================================= */

.group-blue{
    background:#00e5ff !important;
    color:#000 !important;
}

.group-green{
    background:#b7e1a1 !important;
    color:#000 !important;
}

/* =========================================================
   FREEZE HEADER
========================================================= */

/* HEADER ROW 1 */

.yield-table thead tr:nth-child(1) th{
    position:sticky !important;
    top:0 !important;
    z-index:100;
    background-color:#f1f5f9 !important; /* Warna abu-abu sangat muda agar kontras */
    box-shadow: 0 1px 0 #9ca3af;
    text-align: center !important;
    vertical-align: middle !important; /* Memastikan perataan vertikal di tengah */
    height: 32px !important;
    padding: 2px 6px !important;
}

/* HEADER ROW 2 */
.yield-table thead tr:nth-child(2) th{
    position:sticky;
    top:32px; /* Harus sama dengan tinggi baris 1 */
    z-index:90; 
    background-color:#dbeafe !important;
    box-shadow: 0 1px 0 #9ca3af;
    vertical-align: middle !important;
    line-height: 1 !important;
    padding: 0 4px 4px 4px !important; /* Menghilangkan padding atas untuk mengangkat teks */
    height: 32px !important;
}


/* =========================================================
   FREEZE COLUMN
========================================================= */

/* Body Columns (Z-index harus lebih rendah dari Header tapi lebih tinggi dari Body normal) */
.yield-table tbody td:nth-child(1),
.yield-table tbody td:nth-child(2),
.yield-table tbody td:nth-child(3) {
    position:sticky;
    z-index:20;
    background-color:#ffffff !important;
}

.yield-table td:nth-child(1) { left:0; width:70px; min-width:70px; max-width:70px; }
.yield-table td:nth-child(2) { left:70px; width:70px; min-width:70px; max-width:70px; }
.yield-table td:nth-child(3) { left:140px; width:70px; min-width:70px; max-width:70px; border-right: 2px solid #9ca3af !important; }

/* =========================================================
   CORNER HANDLING (Intersection)
========================================================= */

/* Reset agar baris 2 tidak ikut membeku ke kiri secara otomatis */
.yield-table thead tr:nth-child(2) th {
    left: auto !important;
}

/* Pojok Atas: Pertemuan Row 1 dan Kolom 1-3 */
.yield-table thead tr:nth-child(1) th:nth-child(1),
.yield-table thead tr:nth-child(1) th:nth-child(2),
.yield-table thead tr:nth-child(1) th:nth-child(3) {
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
    background-color: #f1f5f9 !important; /* Samakan dengan Row 1 */
}
.yield-table thead tr:nth-child(1) th:nth-child(1) { left: 0; }
.yield-table thead tr:nth-child(1) th:nth-child(2) { left: 70px; }
.yield-table thead tr:nth-child(1) th:nth-child(3) { left: 140px; }

/* Perbaikan warna background agar tidak transparan saat scroll */
.yield-table tbody tr:nth-child(even) td:nth-child(1),
.yield-table tbody tr:nth-child(even) td:nth-child(2),
.yield-table tbody tr:nth-child(even) td:nth-child(3) {
    background-color: #f9fafb !important;
}

.yield-table tbody tr:hover td:nth-child(1),
.yield-table tbody tr:hover td:nth-child(2),
.yield-table tbody tr:hover td:nth-child(3) {
    background-color: #eef2ff !important;
}

/* =========================================================
   BODY ROW
========================================================= */

.yield-table tbody tr:nth-child(even){
    background:#f9fafb;
}

.yield-table tbody tr:hover{
    background:#eef2ff;
}

/* =========================================================
   EMPTY
========================================================= */

.yield-empty{
    padding:20px;
    text-align:center;
    color:#6b7280;
    font-weight:600;
}

/* ── PICA FREEZE PANES ── */

.pica-table thead th {
    /* Efek gradasi modern untuk kedalaman visual (Glossy Overlay) */
    background-image: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    vertical-align: middle !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}
.pica-table thead th:hover {
    filter: brightness(1.1); /* Mencerahkan sedikit saat di-hover */
    transition: filter 0.2s ease-in-out;
}

/* 1. Vertical Freeze (Sticky Header) */
/* Baris 1: Grup Utama */
.pica-table thead tr:nth-child(1) th { position: sticky !important; top: 0 !important; z-index: 100; height: 32px !important; }
/* Baris 2: Sub-Grup (Offset ~28px dari atas) */
.pica-table thead tr:nth-child(2) th { position: sticky !important; top: 32px !important; z-index: 95; height: 32px !important; }
/* Baris 3: Kolom Daun (Offset ~54px dari atas) */
.pica-table thead tr:nth-child(3) th { position: sticky !important; top: 64px !important; z-index: 90; }

/* Batas bawah header PICA warna ungu tegas */
.pica-table thead tr:nth-child(3) th,
.pica-table thead tr:nth-child(1) th[rowspan="3"],
.pica-table thead tr:nth-child(2) th[rowspan="2"] {
    border-bottom: 3px solid #7030A0 !important;
}

/* 2. Horizontal Freeze (Kolom NO sampai DESKRIPSI) */
.pica-table td:nth-child(1), .pica-table thead tr:nth-child(1) th:nth-child(1) { position: sticky; left: 0; }
.pica-table td:nth-child(2), .pica-table thead tr:nth-child(1) th:nth-child(2) { position: sticky; left: 30px; }
.pica-table td:nth-child(3), .pica-table thead tr:nth-child(1) th:nth-child(3) { position: sticky; left: 98px; }
.pica-table td:nth-child(4), .pica-table thead tr:nth-child(1) th:nth-child(4) { position: sticky; left: 156px; }
.pica-table td:nth-child(5), .pica-table thead tr:nth-child(1) th:nth-child(5) { 
    position: sticky; 
    left: 224px; 
    border-right: 2px solid #cbd5e1 !important; 
    box-shadow: 4px 0 8px -2px rgba(0,0,0,0.05);
}

/* 3. Stacking & Background Management */
/* Corner Cells: Persimpangan Header dan Kolom Kiri (Z-index Tertinggi) */
.pica-table thead tr:nth-child(1) th:nth-child(-n+5) {
    z-index: 110 !important;
    background-clip: padding-box;
}

/* Background Solid agar data tidak 'tembus' saat di-scroll */
.pica-table tbody td:nth-child(-n+5) {
    z-index: 20;
    background-color: #ffffff;
}
.pica-table tbody tr:nth-child(even) td:nth-child(-n+5) {
    background-color: #fafafa;
}
.pica-table tbody tr:hover td:nth-child(-n+5) {
    background-color: #f1f5f9 !important;
}