/* Kopdes Merah Putih | Tahap 4. Lapisan visual aman, tanpa modifikasi query atau proses formulir. */
:root{--k4-red:#087184;--k4-ink:#243d36;--k4-muted:#6c7a75;--k4-line:#e9e9e4;--k4-shadow:0 12px 35px rgba(31,52,45,.065)}
#main.main{background:#f7f8f6;min-height:calc(100vh - 72px)}
#main .pagetitle{padding:5px 0 15px;margin-bottom:14px;border-bottom:1px solid var(--k4-line)}
#main .pagetitle h1{font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.35;color:var(--k4-ink)}
#main .breadcrumb{margin-top:8px;font-size:.82rem}
#main .breadcrumb a{color:var(--k4-red);text-decoration:none}
#main .card{border:1px solid var(--k4-line);border-radius:18px;box-shadow:var(--k4-shadow);background:#fff}
#main .card-header{background:linear-gradient(120deg,#fff,#fcfaf8);border-bottom:1px solid var(--k4-line);padding:18px 20px;font-weight:700;color:var(--k4-ink)}
#main .card-body{padding:22px}
#main .card-footer{background:#fff;border-top:1px solid var(--k4-line);padding:16px 20px}
#main .card-title{font-weight:800;color:var(--k4-ink)}
#main .alert{border-radius:13px;border-width:1px;padding:15px 18px;line-height:1.55}
#main .alert-info{background:#eff6f3;color:#A4BB11;border-color:#d4e9df}
#main label,#main .form-label{font-size:.87rem;font-weight:650;color:#40534d;margin-bottom:6px}
#main :is(.form-control,.form-select,select.form-control,textarea.form-control){border:1px solid #dfe6e1;border-radius:10px;min-height:41px;background-color:#fff;color:#A4BB11;box-shadow:none;max-width:100%}
#main :is(.form-control,.form-select):focus{border-color:#087184;box-shadow:0 0 0 3px rgba(0, 82, 103,.10)}
#main :is(.btn,.btn-rounded){border-radius:10px;font-weight:650;transition:background .18s,box-shadow .18s,transform .18s}
#main .btn:hover{transform:translateY(-1px)}
#main :is(.btn-primary,.btn-dark){background:#087184;border-color:#087184;color:#fff}
#main :is(.btn-primary,.btn-dark):hover{background:#005267;border-color:#005267}
#main .btn-info{background:#eaf3ee;color:#A4BB11;border-color:#d2e6d9}
#main .btn-info:hover{background:#dcece3;border-color:#bcd7c8;color:#A4BB11}
#main .btn-success{background:#A4BB11;border-color:#A4BB11}
#main .btn-warning{color:#E6A912}
#main .table-responsive{border-radius:12px;overflow-x:auto}
#main table.table{--bs-table-bg:transparent;margin-bottom:0;vertical-align:middle;color:#A4BB11}
#main table.table thead th{background:#f5f6f3;color:#41584e;border-bottom:1px solid #e3e8e3;font-size:.8rem;letter-spacing:.15px;font-weight:750;white-space:nowrap;padding:13px 12px}
#main table.table tbody td{padding:12px;border-color:#eff0ec}
#main table.table tbody tr:hover{background:#fcf8f8}
#main .pagination .page-link{border-radius:9px;margin:0 2px;color:#087184;border-color:#e7e8e3}
#main .pagination .active .page-link{background:#087184;border-color:#087184;color:white}
#main .badge{border-radius:7px;padding:6px 9px;font-weight:650}
.modal-content{border:0;border-radius:18px;box-shadow:0 22px 80px #172a2530;overflow:hidden}
.modal-header{background:#faf8f7;border-bottom:1px solid #ece8e4;padding:19px 23px}
.modal-title{color:#A4BB11;font-weight:800}
.modal-body{padding:23px}
.modal-footer{border-top:1px solid #efede9;padding:16px 23px}
.modal :is(.form-control,.form-select){border-radius:10px;border-color:#dfe6e1;min-height:40px}
.modal .btn{border-radius:10px}
#main .dataTables_wrapper,#main .datatable-wrapper{max-width:100%;overflow-x:auto}
@media(max-width:767px){#main.main{padding-left:14px;padding-right:14px}#main .card-body{padding:16px}#main .card-header{padding:15px}#main .btn{margin-bottom:3px}#main table.table{font-size:.83rem}#main .pagetitle{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){#main .btn{transition:none}#main .btn:hover{transform:none}}