/* SETUP */
* { box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f8; margin: 0; padding: 10px; color: #333; }
.container { max-width: 1100px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

/* HEADER */
.header-section { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; border-bottom: 3px solid #00695c; padding-bottom: 15px; }
.logo-area { flex-shrink: 0; }
.logo-img { width: 80px; height: auto; }
.title-area { flex-grow: 1; text-align: center; }
.title-area h1 { font-size: 1.4rem; color: #00695c; margin: 0; }
.title-area h2 { font-size: 0.95rem; color: #555; margin: 5px 0 0 0; }

/* INFO BOX */
.info-box { background: #e8f5e9; padding: 15px; border-radius: 6px; display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 15px; border-left: 5px solid #4caf50; }
.info-col { flex: 1; min-width: 200px; text-align: left; }
.guide-box { background: #fff3e0; padding: 10px; border-radius: 6px; margin-bottom: 15px; font-size: 0.85rem; }
.status-badge { padding: 2px 5px; border-radius: 3px; color: white; font-size: 0.8rem; }
.pending { background-color: #e53935; }

/* TOMBOL */
.action-buttons { margin-bottom: 20px; text-align: right; }
.btn-print { background-color: #0288d1; color: white; border: none; padding: 10px 20px; font-size: 1rem; border-radius: 5px; cursor: pointer; }
.btn-print:hover { background-color: #01579b; }
.btn-reset { background-color: #d32f2f; color: white; border: none; padding: 10px 20px; font-size: 1rem; border-radius: 5px; cursor: pointer; margin-left: 10px; }
.btn-reset:hover { background-color: #b71c1c; }

/* TABEL */
.table-wrapper { width: 100%; overflow-x: auto; border: 1px solid #ddd; border-radius: 5px; }
table { width: 100%; min-width: 900px; border-collapse: collapse; }
table th, table td { border: 1px solid #ddd; padding: 8px; font-size: 13px; text-align: center; }
table th { background-color: #00695c; color: white; }
.cell-center { background-color: #fafafa; font-weight: bold; }

/* LOGIKA WARNA */
.rencana-cell { cursor: pointer; background-color: #fff; }
.rencana-cell:hover { background-color: #e1f5fe; }
.rencana-cell.active-rencana { background-color: #29b6f6; } /* BIRU */

.rencana-label { color: #0277bd; font-size: 12px; }
.eksekusi-label { color: #2e7d32; font-size: 12px; }

.done { background-color: #66bb6a !important; } /* HIJAU */
.pending { background-color: #ef5350 !important; } /* MERAH */

.check-exec { width: 16px; height: 16px; cursor: pointer; }
.print-only-check { display: none; font-weight: bold; color: white; font-size: 18px; }

/* FOOTER */
.footer-note { margin-top: 15px; font-size: 0.8rem; color: #666; display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.blue { background-color: #29b6f6; }
.red { background-color: #ef5350; }
.green { background-color: #66bb6a; }

/* TOAST */
.toast { visibility: hidden; min-width: 200px; background-color: #333; color: #fff; text-align: center; border-radius: 8px; padding: 12px; position: fixed; z-index: 999; right: 20px; bottom: 30px; }
.toast.show { visibility: visible; animation: fadein 0.5s, fadeout 0.5s 1.5s; }

/* RESPONSIVE MOBILE */
@media screen and (max-width: 768px) {
    .header-section { flex-direction: column; text-align: center; }
    .action-buttons { text-align: center; }
    .btn-reset { margin-left: 0; margin-top: 10px; display: block; width: 100%; }
    .btn-print { display: block; width: 100%; }
}

/* PRINT */
@media print {
    body { background-color: white; }
    .no-print { display: none !important; }
    .check-exec { display: none !important; }
    .print-only-check { display: block !important; }
    .done { background-color: #66bb6a !important; -webkit-print-color-adjust: exact; }
    .pending { background-color: #ef5350 !important; -webkit-print-color-adjust: exact; }
    .active-rencana { background-color: #29b6f6 !important; -webkit-print-color-adjust: exact; }
}