:root{/*  --bg: #f5f7fa; */--fg: #2d2d2d;--muted: #7d7d7d;--card: #ffffff;--accent: #767676; /* hover / highlight */--accent-light: #ededed;--border: #dcdcdc;--btn-primary: #6c8efb;  /* soft blue */--btn-info: #55c1c9;     /* soft teal */--btn-danger: #f87171;   /* soft red */--btn-secondary: #d1d5db; /* soft grey */--radius: 14px;--shadow: 0 4px 14px rgba(0,0,0,0.06);}

*{box-sizing:border-box}
html,body {margin:0;padding:0;font-family:Inter,system-ui,Arial,sans-serif;background:var(--bg);color:var(--fg)}
img.profile {display:block; margin:5px auto;width: 150px; height: 150px; object-fit: cover; border-radius: 15%; margin-top: 10px;}
.success { color: green; text-align: center; }
a {color:var(--accent);text-decoration:none;}
h2 {font-size: 20px;margin-bottom: 2px;color: #3F51B5;}
h3 {font-size: 16px;margin-bottom: 2px;color: #3F51B5;}
h4 {font-size: 13px;margin-bottom: 2px;color: #3F51B5;}
h5 {font-size: 10px;margin-bottom: 2px;color: #3F51B5;}

.container {max-width:1100px;margin:auto;padding:8px}
.card {background:var(--card);margin:auto;border:1px solid var(--border);border-radius:16px;padding:10px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.row {display:grid;gap:12px;margin:auto;}
.row.foto {display:grid;gap:5px}
.profile-thumb {width: 40px;height: 40px;object-fit: cover;border-radius: 50%;border: 2px solid #ddd;transition: 0.25s ease;}
.profile-thumb:hover {transform: scale(1.12);border-color: #4a90e2;box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);}
.profile-name {display: block;font-size: 11px;font-weight: 600;margin-top: 1px;transition: 0.25s ease;}
.profile-name:hover {color: #4a90e2;}
.row.cols-2 {grid-template-columns:repeat(2,minmax(0,1fr))}
.row.cols-3 {grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){.row.cols-2,.row.cols-3{grid-template-columns:1fr}}
form label { display: block; margin-bottom: 10px; font-size: 14px;}

.input,select,textarea{
    width:100%;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid #ddd;
    box-sizing:border-box;
    font-size:11px;
}

.input[type="date"] {width: auto !important;}
.form-group {display: flex;flex-direction: column;}



/* =========================================== BASE BUTTON ================================================ */

.btn{margin:5px 5px 5px 5px;border:none;border-radius:15px;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:500;text-decoration:none;user-select:none;white-space:nowrap;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn:disabled{opacity:.6;cursor:not-allowed;}
/* ================= SIZE NORMAL ================= */
.btn.primary,
.btn.primary_black,
.btn.secondary,
.btn.danger,
.btn.info,
.btn.ghost{font-size:13px;padding:10px 14px;}
/* ================= SIZE SMALL ================= */
.btn.primary2,
.btn.primary_black2,
.btn.secondary2,
.btn.danger2,
.btn.info2,
.btn.ghost2{font-size:12px;padding:6px 10px;border-radius:15px;}
.btn.primary{background:#2196f3;color:#fff;}
.btn.primary:hover{background:#1976d2;box-shadow:0 3px 8px rgba(33,150,243,.35);}
.btn.primary_black{background:var(--accent);color:#fff;}
.btn.primary_black:hover{background:#272c32;box-shadow:0 3px 8px rgba(0,0,0,.25);}
.btn.secondary{background:#e0e0e0;color:#333;}
.btn.secondary:hover{background:#546E7A;color:#fff;box-shadow:0 3px 8px rgba(96,125,139,.35);}
.btn.danger{background:#E53935;color:#fff;}
.btn.danger:hover{background:#C62828;box-shadow:0 3px 8px rgba(229,57,53,.35);}
.btn.info{background:#17a2b8;color:#fff;}
.btn.info:hover{background:#0d6d7b;box-shadow:0 3px 8px rgba(23,162,184,.35);}
.btn.ghost{background:#f5f5f5;color:#555;border:1px solid #ddd;}
.btn.ghost:hover{background:#e0e0e0;}
/* ================= SMALL VERSION ================= */
.btn.primary2{background:#2196f3;color:#fff;}
.btn.primary2:hover{background:#1976d2;box-shadow:0 3px 8px rgba(33,150,243,.35);}
.btn.primary_black2{background:var(--accent);color:#fff;}
.btn.primary_black2:hover{background:#272c32;box-shadow:0 3px 8px rgba(0,0,0,.25);}
.btn.secondary2{background:#e0e0e0;color:#555;}
.btn.secondary2:hover{background:#546E7A;color:#fff;box-shadow:0 3px 8px rgba(96,125,139,.35);}
.btn.danger2{background:#E53935;color:#fff;}
.btn.danger2:hover{background:#C62828;box-shadow:0 3px 8px rgba(229,57,53,.35);}
.btn.info2{background:#17a2b8;color:#fff;}
.btn.info2:hover{background:#0d6d7b;box-shadow:0 3px 8px rgba(23,162,184,.35);}
.btn.ghost2{background:#fff;color:#555;border:1px solid #ddd;}
.btn.ghost2:hover{background:#e0e0e0;}
/* ================= MOBILE ================= */
@media (max-width:800px){
    .btn.primary2,
    .btn.primary_black2,
    .btn.secondary2,
    .btn.danger2,
    .btn.info2,
    .btn.ghost2{font-size:10px;padding:5px 8px;    }
}


/*
.search-row {display: flex;align-items: center;gap: 6px;flex-wrap: wrap;}
.search-row label {font-size: 12px;margin-right: 3px;}
.search-row .date-group {display: flex;align-items: center;gap: 5px;}
.search-row .input {padding: 1px 2px;}
@media (max-width: 400px) {
.search-row {flex-direction: column;align-items: flex-start;}
.date-group {width: 100%;}
.date-group input {width: 100%;}}
*/

.sejajar {display: flex;grid-template-columns: 180px auto;align-items: center;margin-bottom: 5px;gap: 10px;flex-wrap: wrap;}
.sejajar label {width: 180px;font-size: 13px;}
.sejajar input[type="checkbox"] {width: 18px;height: 18px;cursor: pointer;}
.sejajar label {min-width: 140px;margin: 0;}
.sejajar .btn {height: 32px;display: flex;align-items: center;justify-content: center;}

/* ================= Thumbnails gambar upload & Modal ================= */
.modal {display: none;position: fixed;z-index: 9999;padding-top: 60px;left: 0; top: 0;width: 100%; height: 100%;background-color: rgba(0,0,0,0.9);overflow-y: auto;}
.modal-content {margin: auto;display: block;max-width: 90%;max-height: 80%;}
.modal-box{background:#fff;margin:40px auto;padding:20px;border-radius:12px;width:95%;max-width:900px;}
.modal-box.large{max-width:1200px;}
.modal-header-custom{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.close {position: absolute;top: 20px;right: 40px;color: #fff;font-size: 40px;cursor: pointer;}
.thumb-box{position: relative;display: inline-block;margin-top: 5px;}
.thumb{width: 120px;height: 120px;object-fit: cover;border-radius: 8px;border: 1px solid #ccc;cursor: pointer;transition: 0.2s;}
.thumb:hover{transform: scale(1.05);}
.thumb-box button{position: absolute;top: -8px;right: -8px;background: red;color: #fff;border: none;border-radius: 50%;width: 22px;height: 22px;cursor: pointer;font-size: 12px;}
.preview-grid{display: grid;grid-template-columns: repeat(auto-fill, minmax(120px,1fr));gap:10px;margin-top:10px;}
.preview-item{position:relative;}
.preview-item img{width:100%;height:120px;object-fit:cover;border-radius:8px;cursor:pointer;}
.preview-item button{position:absolute;top:5px;right:5px;background:red;color:#fff;border:none;border-radius:50%;width:22px;height:22px;cursor:pointer;}

/* ================= Progress Bar / Slider ================= */
.progress-wrapper {position: relative;margin: 15px 0;}
.progress-bar {position: absolute;height: 4px;background: #4caf50;width: 0%;top: 20px;left: 0;transition: width 0.4s ease;z-index: 1;}
.steps {display: flex;justify-content: space-between;position: relative;z-index: 2;}
.step {text-align: center;cursor: pointer;transition: all 0.3s ease;}
.step span {display: inline-block;width: 30px;height: 30px;line-height: 30px;border-radius: 50%;background: #ccc;color: #fff;margin-bottom: 5px;transition: all 0.3s ease;}
.step.active span {background: #4caf50;transform: scale(1.2);}
.step small {display: block;font-size: 12px;width: 80px;}


/* ================= Progress Bar / Slider - MOBILE RESPONSIF 2 ROW ================= */
@media (max-width:700px){
.progress-wrapper{margin: 15px 0;position: relative;}
/* bar atas */
.progress-bar{position:absolute;height:3px;background:#4caf50; width:0%;top:16px;left:0;z-index:1;transition: width 0.4s ease;}
/* 🔥 bar bawah */
.progress-bar.second{top:70px;width:0%;}
.progress-wrapper::before,
.progress-wrapper::after{content:'';position:absolute;height:3px;background:#ddd;width:100%;left:0;z-index:0;}
.progress-wrapper::before{ top:16px; }
.progress-wrapper::after{ top:70px; }
.steps{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 0;}
.step{ width:25%; text-align:center; }
.step span{width:22px;height:22px;line-height:22px;font-size:10px;}
.step small{font-size:10px;display:none;}
.step.active small{display:block;margin-top:3px;}
.step.active span{transform: scale(1.1);background:#4caf50;color:#fff;}
.step.done span{background:#4caf50;color:#fff;}
}

.filter-box {display:flex;gap:2px;flex-wrap:wrap;align-items:flex-end;}
.filter-box .input{min-width:150px;}
.filter-actions {margin-left:auto;display:flex;gap:2px;}

/* ========================================================== TABEL DASAR ====================================================== */

.table-responsive { width: 100%; overflow-x: auto; overflow-y: auto; max-height: 70vh; border: 1px solid #ddd; border-radius: 6px;}
.table {font-size: 10px;width:100%; table-layout: auto; border-collapse:collapse}
table.table { width: 100%; border-collapse: collapse; min-width: 700px; }
.table th, .table td {padding: 2px 3px; text-align: left; border-bottom: 1px solid #eee; font-size: 10px;}
.table tr:hover { background-color: #e9f0ea;}
.row-utama td {font-size:10px; padding-top: 11px !important;padding-bottom: 11px !important;}


@media (min-width: 700px) {.table th, .table td {font-size: 13px;}}
/* === STICKY HEADER (VERTIKAL SAJA) === */
.table input,select,textarea {font-size:11px;font-family:Inter,system-ui,Arial,sans-serif;width:100%;padding:5px;border:1px solid var(--border);border-radius:5px;background:#fff;} 
.table thead th{background:#1976d2;color:#fff;padding:9px;font-size:11px;text-align:left;font-weight:600;}
/* === STICKY KOLOM PERTAMA "NO" === */
.table th:first-child,
.table td:first-child {position: sticky;left: 0;background: #f7f7f7;z-index: 10;font-weight: bold;}
a {color:var(--accent);text-decoration:none;font-size: 12px;}

.table-dashboard {width:100%; table-layout: auto; border-collapse:collapse}
.table-dashboard thead th {background:#1976d2;position: sticky;top: 0;z-index: 10;}
.table-dashboard th, td {padding: 2px 3px;border: 0px solid #ddd;text-align: left;flex: 1 1 180px;padding: 3px;box-shadow: 0 5px 15px rgba(0,0,0,0.08);transition: transform 0.3s ease, box-shadow 0.3s ease;}
.table-dashboard tr:nth-child(odd) {background-color: #f9f9f9; /* abu muda */}
.table-dashboard tr:hover { background-color: #daeddd; }

@media (max-width: 700px) {
#myTable2 thead {background:#1976d2;display: none;}
#myTable2 tr {display: block;margin-bottom: 5px;background: #ffffff;border-radius: 10px;box-shadow: 0 4px 12px rgba(0,0,0,0.06);overflow: hidden;border: 1px solid #eee;transition: all 0.2s ease;}
#myTable2 tr:hover {transform: translateY(-2px);box-shadow: 0 6px 16px rgba(0,0,0,0.10);}
#myTable2 td {display: block;padding: 8px 10px;border: none;font-size: 10px;}
#myTable2 td::before {content: attr(data-label);font-weight: 600;color: #555;}
#myTable2 td span {font-weight: 500;color: #222;}

/* PEMISAH HALUS */
#myTable2 td:not(:last-child) {border-bottom: 1px solid #ffffff;}
/* NOMINAL STYLE */
#myTable2 td:nth-child(5),
#myTable2 td:nth-child(6) {font-weight: bold;color: #0d6efd;}
/* BUTTON AREA */
#myTable2 td:last-child {justify-content: flex-end;gap: 6px;}
#myTable2 td::before {content: attr(data-label);display: block;font-weight: 600;color: #666;margin-bottom: 2px;font-size: 11px;}
#myTable2 td span,
#myTable2 td {text-align: left;}

.row-utama td {font-size:8px; padding-top: 11px !important;padding-bottom: 11px !important;}
.row-progress td {font-size:8px; background: #fafafa;}
.row-action td {background: #f5f5f5;}
.action-cell a {display: inline-block;margin: 2px 1px;}
.badge {font-size:8px; padding-top: 11px !important;padding-bottom: 11px !important;}
}

.signature-pad {border: 1px solid #ccc;border-radius:15px;background-color: white;height: 160px;border: 1px solid #ccc;touch-action: none; /* WAJIB untuk stylus */}.floating-menu {position: fixed;bottom: 0;left: 0;right: 0;background: #f2f2f2;box-shadow: 0 -1px 6px rgba(0,0,0,0.1);z-index: 999;padding: 8px 0;}/* Floating bottom nav (mobile) */
.signature-pad-modal {width: 100% !important;max-width: 400px;   /* biar tidak kepanjangan */height: 100px !important;  /* 🔥 tinggi fix */border: 1px solid #ccc;background: #fff;display: block;touch-action: none; /* 🔥 penting biar tidak scroll saat tanda tangan */}
.bottom-nav {display: none;position: fixed;bottom: 0;width: 100%;background: #1976d2;color: white;display: flex;justify-content: space-around;padding: 10px 0;z-index: 100;}
.bottom-nav a {color: white;font-size: 1em;text-align: center;text-decoration: none;}


.pagination { display: flex; justify-content: center; gap: 5px; margin-top: 15px; flex-wrap: wrap; }
.pagination a { padding: 6px 12px; background: #f4f4f4; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; color: #333; font-size: 14px; }
.pagination a {padding: 5px 10px;border-radius: 6px;text-decoration: none;border: 1px solid #ccc;margin: 2px;}
.pagination a:hover {background: #ddd;}
.pagination a.active-page {font-weight: bold !important;text-decoration: underline !important;background: #444;color: white !important;border-color: #444;}
.pagination{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:20px;flex-wrap:wrap;}
.page-btn{padding:8px 12px;border-radius:8px;background:#f1f1f1;text-decoration:none;color:#333;font-weight:600;min-width:40px;text-align:center;transition:.2s;}
.page-btn:hover{background:#dcdcdc;}
.page-btn.active{background:#1976d2;color:#fff;}
.last-btn{background:#111;color:#fff;}

.login-card { max-width: 420px; margin: 40px auto; padding: 20px; }
.login-links { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.login-links .btn { text-align: center; background: #f8f8f8; border: 1px solid #ccc; }
.login-links .btn:hover { background: #e6e6e6; }


.nav{position:sticky;top:0;margin:10px 10px 0px 10px;backdrop-filter:blur(8px);z-index:20}
.nav .inner{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:10px 16px}

/* ========== NAVBAR RESPONSIVE ========== */
.navbar {display: flex;align-items: center;justify-content: space-between;background: #ffffff;padding: 5px 5px;border-radius: 14px;border: 1px solid #e5e7eb;box-shadow: 0 4px 12px rgba(0,0,0,0.04);margin: auto;width: 100%;}
.nav-logo {display: flex;align-items: center;gap: 8px;}
.nav-logo-img {width: auto;height: 25px;object-fit: cover;border-radius: 10%;border: 0px solid #ddd;transition: 0.25s ease;}
.nav-logo-img:hover {transform: scale(1.12);border-color: #4a90e2;box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);}
.nav-title {font-weight: 600;font-size: 14px;letter-spacing: 0.3px;}
.nav-links {list-style: none;display: flex;gap: 22px;margin: 0;padding: 0;}
.nav-links li a {font-size: 13px;font-weight: 500;padding: 8px 14px;border-radius: 10px;transition: 0.25s ease;}
.nav-links li a:hover {background: #f2f2f2;}
.nav-links li a.active {background: #e9e9e9;box-shadow: inset 0 0 4px rgba(0,0,0,0.08);}
.nav-links .logout {background: #e53935;color: #fff;}
.nav-links .logout:hover {background: #c62828;}
.nav-toggle {display: none;background: transparent;font-size: 30px;border: none;cursor: pointer;transition: transform 0.25s ease,color 0.25s ease,       text-shadow 0.25s ease;}
.nav-toggle:hover {transform: scale(1.18);color: #f2f2f2; text-shadow: 0 0 6px #222;}
.nav-tema {background: transparent;font-size: 30px;border: none;cursor: pointer;transition: transform 0.25s ease,color 0.25s ease,       text-shadow 0.25s ease;}
.nav-tema:hover {transform: scale(1.18);color: #f2f2f2; text-shadow: 0 0 6px #222;}
@media (max-width: 1000px) {.nav-links {position: absolute;top: 65px;right: 15px;background: #ffffff;flex-direction: column;gap: 12px;padding: 18px;border-radius: 14px;box-shadow: 0 6px 18px rgba(0,0,0,0.12);width: 200px;display: none;border: 1px solid #e5e7eb;animation: fadeInMenu 0.25s ease;}
.nav-links.show {display: flex;}
.nav-toggle {display: block;}}
/* Animasi dropdown */
@keyframes fadeInMenu {from { opacity: 0; transform: translateY(-8px); } to   { opacity: 1; transform: translateY(0); }}
.menu {display: flex;justify-content: space-around;margin: 0;padding: 0;list-style: none;}
.menu .menu-item:hover .submenu {display: block;}
.menu-item {position: relative;}
.menu-item span,
.menu-item > a {font-size: 13px;padding: 10px 14px;border-radius: 10px;transition: 0.2s;}
.menu-item span:hover {background: #efefef;}

.submenu {list-style:none;display: none;position: absolute;top: 40px;left: 0;background: #ffffff;border: 1px solid #e5e7eb;border-radius: 12px;min-width: 165px;padding: 6px 0;z-index: 1000;box-shadow: 0 6px 18px rgba(0,0,0,0.08);}
.submenu li {padding: 0;margin: 0;}
.submenu li a {display: block;padding: 10px 14px;font-size: 13px;text-decoration: none;border-radius: 10px;/* rounding konsisten */transition: 0.2s ease;}



.chart-section {display: flex;flex-wrap: wrap;justify-content: center;gap: 15px;margin: 10px auto;width: 95%;max-width: 1400px;}
.chart-card {flex: 1 1 180px;background: #fff;border-radius: 20px;padding: 3px;box-shadow: 0 5px 15px rgba(0,0,0,0.08);transition: transform 0.3s ease, box-shadow 0.3s ease;max-width: 400px;}
.chart-card:hover {transform: translateY(-3px);box-shadow: 0 4px 12px rgba(0,0,0,0.12);}
.filter-form {display: flex;justify-content: center;align-items: center;margin-bottom: 10px;gap: 5px;}
.filter-form select {padding: 3px 5px;font-size: 14px;border-radius: 8px;border: 1px solid #ccc;}
.filter-form button {padding: 5px 14px;background-color: #9d4edd;color: white;border: none;border-radius: 8px;cursor: pointer;}
.filter-form button:hover {background-color: #7b2cbf;}
.flex-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px;align-items: stretch;}
#toggleChartsBtn {background: linear-gradient(45deg, #007bff, #00b4ff);color: white;padding: 8px 18px;border: none;border-radius: 20px;font-weight: bold;cursor: pointer;transition: 0.3s ease;}
#toggleChartsBtn:hover {background: linear-gradient(45deg, #0062cc, #0090cc);transform: scale(1.03);}
#extraCharts {display: none;flex-wrap: wrap;gap: 15px;justify-content: center;width: 100%;opacity: 0;transform: translateY(-10px);transition: opacity 0.4s ease, transform 0.4s ease;}
#extraCharts.show {opacity: 1;transform: translateY(0);}
canvas {width: 100% !important;height: auto !important;}


/* ======== Navigasi Cepat dengan SVG (App Style) (Mobile Friendly) ======== */
.quick-btn {flex: 0 0 auto; /* penting: mencegah wrap */width: 110px;   /* sesuaikan */}
.quick-nav-card {position: relative;margin:5px 5px;padding: 10px;border-radius: 20px;box-shadow: 0 4px 15px rgba(0,0,0,0.1);animation: fadeIn 0.5s ease-in-out;}
.quick-nav-title {text-align: center;font-size: 13px;padding:1-px;margin-bottom: 10px;margin-top: 0px;font-weight: 600;letter-spacing: 0.5px;}
.quick-nav-grid {display: flex;gap: 10px;overflow-x: auto;white-space: nowrap;padding: 10px 5px;scroll-behavior: smooth;scrollbar-width: none;   /* Firefox */}


.quick-btn {background: linear-gradient(135deg, #f8f9fb, #e8ecf2);border-radius: 16px;text-align: center;padding: 12px 5px;text-decoration: none;color: #333;display: flex;flex-direction: column;align-items: center;justify-content: center;box-shadow: 0 2px 10px rgba(0,0,0,0.08);transition: all 0.25s ease;}
.quick-btn:hover {transform: translateY(-4px) scale(1.03);background: linear-gradient(145deg, #eaf3ff, #ffffff);box-shadow: 0 5px 14px rgba(0,0,0,0.15);color: #1a73e8;}
.quick-btn img {width: 50px;height: 50px;margin-bottom: 6px;filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));}
.quick-btn span {font-size: 13px;font-weight: 500;}
.quick-btn .icon {width: 30px;height: 30px;margin-bottom: 6px;stroke-width: 1.8;color: #3F51B5;transition: color 0.3s;}

/* Tombol panah */
.arrow-btn {position: absolute;top: 55%;transform: translateY(-50%);background: rgba(255, 255, 255, 0.85);border: 1px solid #ccc;font-size: 18px;width: 32px;height: 32px;border-radius: 50%;cursor: pointer;z-index: 20;box-shadow: 0 2px 6px rgba(0,0,0,0.15);  display: flex;align-items: center;justify-content: center;transition: 0.2s;}
.arrow-btn:hover {background: #eee;transform: translateY(-50%) scale(1.1);}
.arrow-btn.left {left: -5px;}
.arrow-btn.right {right: -5px;}


.status-badge {display: inline-block;font-size:12px; font-weight: 600;color: #fff;text-align: center;padding: 5px 10px;border-radius: 10px;border: 2px solid transparent;transition: all 0.25s ease;box-shadow: 0 2px 6px rgba(0,0,0,0.06);}
.status-badge-wrap{display:flex;flex-wrap:wrap;gap:6px;}
.status-badge{padding:5px 10px;border-radius:20px;font-size:12px;font-weight:600;color:#fff;display:inline-flex;align-items:center;line-height:1;white-space:nowrap;}
.status-badge.success{background:#16a34a;}
.status-badge.info{background:#0284c7;}
.status-badge.warning{background:#d97706;}
.status-badge.primary{background:#7c3aed;}
.status-badge.danger{background:#dc2626;}
/* Warna Glassy */
.status-terisi {background: rgba(0, 123, 255, 0.55);}
.status-kosong {background: rgba(40, 167, 69, 0.55);}
.status-progress {background: rgba(255, 193, 7, 0.55);}
.status-other {background: rgba(108, 117, 125, 0.5);}
.status-cekin {background: rgba(40, 167, 69, 0.55);}
.status-cekout {background: rgba(171, 43, 43, 0.5);}
.status-filter{display:flex;flex-wrap:wrap;gap:10px;margin-top:5px;}
.badge-filter input{display:none;}
.badge-filter .badge{padding:5px 8px;border-radius:20px;font-size:11px;cursor:pointer;transition:0.2s;border:1px solid transparent;}

/* ================= STATUS APPROVAL ================= */

.status-group{display:grid;grid-template-columns:repeat(4, 1fr); /* 4 kolom */gap:2px 3px;align-items:start;}
.status-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:28px;text-align:center;gap:5px;}
.status-item small{font-size:10px;font-weight:200;line-height:1.2;color:#555;min-height:20px;display:flex;align-items:flex-end;justify-content:center;}
.status-item .badge-approve{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:bold;background:#f5f5f5;color:#c62828;border:1px solid #ddd;}
.status-item .badge-approve.active{background:#4CAF50;color:#fff;border-color:#4CAF50;}
/* ================= MOBILE ================= */
@media (max-width:800px){
   .status-group{gap:9px;}
   .status-item{min-width:35px;}
   .status-item small{font-size:8px;min-height:20px;}
   .status-item .badge-approve{width:20px;height:20px;font-size:9px;}
}

/* WARNA */
.badge.draft{background:#eee;color:#555;}
.badge.proses{background:#fff3cd;color:#856404;}
.badge.approved{background:#d4edda;color:#155724;}
.badge.rejected{background:#f8d7da;color:#721c24;}

/* ACTIVE */
.badge-filter input:checked + .badge{
    transform:scale(1.05);
    border:1px solid #000;
}



/* --- Badge --- */
.badge {display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid var(--border);font-size:.8rem;color:var(--muted);text-transform: capitalize;}
.badge.active { background: #43A047; }
.badge.pending { background: #FB8C00; }
.badge.user { background: #c5d533; }
.badge.admin { background: #d02fa5; }
.badge.root { background: #4d0a0eff; }

.badge-approve{padding:6px 12px;border-radius:20px;font-size:12px;cursor:pointer;background:#ccc;color:#333;user-select:none;transition:0.2s;}
.badge-approve{padding: 5px 12px;border-radius: 20px;font-size: 12px;cursor: pointer;background: #ccc;color: #333;display: inline-flex;align-items: center;height: 32px;}
.badge-approve{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:30px;background:#e5e7eb;color:#111827;font-size:13px;font-weight:600;text-decoration:none;transition:.2s;cursor:pointer;}
.badge-approve{display:inline-block;padding:4px 10px;border-radius:20px;font-size:12px;background:#ddd;color:#333;margin:2px;}
.badge-approve.active{background:#28a745;color:#fff;}
.badge-approve.active {background: #28a745;color: #fff;}
.badge-approve.active{background:#16a34a;color:#fff;}
.badge-approve.active{background:#16a34a;color:#fff;}
.badge-approve:hover{opacity:.85;}
.rupiah {text-align: left;}


/* --- Form dan Badge di payment--- */
.payment-card {border-left: 5px solid #4CAF50;background: linear-gradient(135deg, #f8fff9, #ffffff);}
.payment-status {display: flex;gap: 15px;margin: 10px 0 20px;}
.dark .payment-card {background: #1e1e1e;border-left: 5px solid #66bb6a;}
.dark .badge-option {border: 1px solid #555;}
.dark .badge-option.unpaid {background: #3a2a00;color: #ffcc80;}
.dark .badge-option.paid {background: #1b3a1b;color: #a5d6a7;}
.payment-wrapper {margin: 25px 0;}
.payment-card-modern {padding: 25px;border-radius: 18px;background: linear-gradient(135deg, #ffffff, #f4f7ff);box-shadow: 0 10px 25px rgba(0,0,0,0.08);border: 1px solid #eee;}
.card-header h3 {margin: 0;font-size: 20px;}
.card-header .sub {font-size: 12px;color: #777;}
.form-group {margin-top: 20px;}
.input-group {display: flex;align-items: center;border-radius: 10px;border: 1px solid #ddd;overflow: hidden;background: #fff;}
.prefix {padding: 10px 12px;background: #f1f3f6;font-weight: bold;color: #555;}
.input-group input {border: none;flex: 1;padding: 10px;outline: none;}
.payment-status-modern {display: flex;gap: 15px;}
.badge-radio {flex: 1;cursor: pointer;}
.badge-radio input {display: none;}
.badge-content {padding: 15px;border-radius: 12px;text-align: center; border: 2px solid #eee;transition: all 0.25s ease;}
.badge-radio input:checked + .badge-content {transform: scale(1.05);box-shadow: 0 5px 15px rgba(0,0,0,0.1);}
.badge-radio.paid .badge-content {background: #e8f5e9;color: #1b5e20;}
.badge-radio.unpaid .badge-content {background: #fff8e1;color: #b26a00;}
.badge-radio.paid input:checked + .badge-content {border-color: #4CAF50;background: #4CAF50;color: #fff;}
.badge-radio.unpaid input:checked + .badge-content {border-color: #ff9800;background: #ff9800;color: #fff;}
.badge-radio.checkin input:checked + .badge-content {border-color: #4CAF50;background: #4CAF50;color: #fff;}
.badge-radio.checkout input:checked + .badge-content {border-color: #d1a0ae;background: #e49fb3;color: #fff;}


.upload-box {border: 2px dashed #ccc;border-radius: 12px;padding: 20px;text-align: center;cursor: pointer;background: #fafafa;transition: 0.3s;}
.upload-box:hover {border-color: #4CAF50;background: #f1fff4;}
.dark .payment-card-modern {background: #1e1e1e;border: 1px solid #333;}
.dark .input-group {background: #2a2a2a;border: 1px solid #444;}
.dark .prefix {background: #333;color: #ccc;}
.dark .upload-box {background: #2a2a2a;border: 1px dashed #555;}


/* ===== BADGE TABLE LIST TT.SERTFIKAT (PEMBAYARAN) ===== */
.badge-option {cursor: pointer;padding: 5px 10px;border-radius: 15px;border: 2px solid transparent;transition: all 0.25s ease;box-shadow: 0 2px 6px rgba(0,0,0,0.06);}
.badge-option.unpaid {color: #7a4b00;background: linear-gradient(135deg, #ffe0b2, #ffcc80);border-color: #ffb74d;}
.badge-option.paid {color: #1b5e20;background: linear-gradient(135deg, #c8e6c9, #a5d6a7);border-color: #81c784;}
.badge-option input:checked + span {color: #fff;}
.badge-option:hover {transform: translateY(-2px) scale(1.03);box-shadow: 0 6px 15px rgba(0,0,0,0.1);}
.badge-option.unpaid input:checked + span {background: linear-gradient(135deg, #fb8c00, #ef6c00);padding: 8px 15px;border-radius: 20px;box-shadow: 0 3px 10px rgba(255,152,0,0.4);}
.badge-option.paid input:checked + span {background: linear-gradient(135deg, #43a047, #2e7d32);padding: 8px 15px;border-radius: 20px;box-shadow: 0 3px 10px rgba(76,175,80,0.4);}


/* default desktop */
.row-progress {display: table-row;}
.row-action {display: table-row;}




/* ================= Progress Bar / badge di Table List  ================= */
.progress-cell{min-width:180px;}
.badge2 {display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;font-size:12px;color:#fff;animation:fadeIn .4s ease;}
.badge2 .icon{font-size:13px;}
/* warna */
.bg-gray{background:#9e9e9e;}
.bg-blue{background:#2196f3;}
.bg-purple{background:#9c27b0;}
.bg-orange{background:#ff9800;}
.bg-yellow{background:#fbc02d;color:#000;}
.bg-teal{background:#009688;}
.bg-green{background:#4caf50;}
/* progress bar mini */
.mini-bar{height:5px;background:#ddd;border-radius:10px;margin-top:4px;overflow:hidden;}
.mini-fill{height:100%;background:linear-gradient(90deg,#4caf50,#81c784);width:0;transition:width 0.6s ease;}
/* animasi */
@keyframes fadeIn{from{opacity:0; transform:translateY(5px);}to{opacity:1; transform:translateY(0);}}
@media (max-width:700px){
.progress-cell{min-width:120px;}
.badge2 {display:inline-flex;align-items:center;gap:3px;padding:2px 5px;border-radius:8px;font-size:12px;color:#fff;animation:fadeIn .4s ease;}
.badge2 .icon{font-size:12px;}
}

.summary-box{min-width:180px;padding:15px;background:#f8f9fa;border-radius:12px;display:flex;gap:20px;margin-top:15px;flex-wrap:wrap;}
.summary-item{flex:1;padding:15px 20px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.08);background:#fff;min-width:180px;}
.summary-item small{display:block;font-size:13px;color:#777;margin-bottom:5px;}
.summary-item div{font-size:20px;font-weight:bold;}
.summary-item.debit{border-left:5px solid #2e7d32;}
.summary-item.debit div{color:#2e7d32;}
.summary-item.kredit{border-left:5px solid #c62828;}
.summary-item.kredit div{color:#c62828;}
.dark .summary-item{background:#1e1e1e;box-shadow:0 0 10px rgba(255,255,255,0.05);}
.dark .summary-item small{color:#aaa;}
.summary-item.saldo{border-left:5px solid #1565c0;}
.summary-item.saldo div{color:#1565c0;}
.saldo-box{margin-top:10px;}


.modal{position:fixed;top:0;left:0;right:0;bottom:0;display:none;background:rgba(0,0,0,0.5);justify-content:center;align-items:center;z-index:1000;}
.modal-content button {position: relative;z-index: 5;}
.modal.active{display:flex;}
.modal-content {
  max-height: 90vh;       /* agar tidak melebihi tinggi layar */
  overflow-y: auto;       /* bisa discroll jika konten tinggi */
  position: relative;     /* pastikan posisi relatif terhadap cropper */
  background:#fff;
  padding:20px;
  border-radius:15px;
  width:90%;
  max-width:400px;
}

.kbd{font-family:ui-monospace,monospace;background:#eee;border-radius:6px;padding:2px 6px;border:1px solid #ddd}
.grid-qrs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media print{.no-print{display:none}.grid-qrs{grid-template-columns:repeat(4,1fr)}.card{box-shadow:none;border:none}}
.marker{position:absolute;transform:translate(-50%,-100%);background:#111;color:#fff;border-radius:10px;padding:4px 6px;font-size:12px;cursor:grab}
.map-wrap{position:relative;width:100%;overflow:auto;border-radius:16px;border:1px solid var(--border);background:#fff}
.map-img{max-width:100%;display:block}
.tooltip{position:absolute;background:#111;color:#fff;padding:6px 8px;border-radius:8px;font-size:12px;white-space:nowrap;transform:translate(-50%,-120%);pointer-events:none}


/* ===== TAB STYLE (support dark/light) ===== */
.tabs {display: flex;gap: 8px;margin-bottom: 15px;}
.tab-btn {padding: 10px 18px;border-radius: 12px;cursor: pointer;border: none;background: var(--card);color: var(--fg); box-shadow: 0 4px 10px rgba(0,0,0,.08);font-weight: 600;}
.tab-btn.active {background: var(--primary);color: #a98888ff;}
.tab-content {display: none;}
.tab-content.active {display: block;}




/* ------------------ SELECT2 DARK MODE ------------------ */
body.dark .select2-container--default .select2-selection--multiple {background-color: #2a2a2a !important;border-color: #555 !important;color: #fff !important;}
body.dark .select2-container--default .select2-selection__choice {background-color: #444 !important;border-color: #666 !important;color: #fff !important;}
body.dark .select2-container--default .select2-results__option {background-color: #1e1e1e !important;color: #fff !important;}
body.dark .select2-container--default .select2-results__option--highlighted {background-color: #333 !important;color: #fff !important;}
body.dark .select2-dropdown {background-color: #1e1e1e !important;border-color: #555 !important;}
/* ==================================
   SELECT2 DARK MODE – FORCE OVERRIDE
   ================================== */
body.dark .select2-container--default .select2-selection--multiple,
body.dark .select2-container--default .select2-selection--single {background-color: #222 !important;border-color: #555 !important;color: #fff !important;}
body.dark .select2-container--default .select2-selection__placeholder {color: #bbb !important;}
body.dark .select2-container--default .select2-selection__rendered {color: #fff !important;}
body.dark .select2-dropdown {background-color: #222 !important;border-color: #555 !important;}
body.dark .select2-results__option {background-color: #222 !important;color: #fff !important;}
body.dark .select2-results__option--highlighted {background-color: #333 !important;color: #fff !important;}
body.dark .select2-container--default .select2-selection__choice {background-color: #444 !important;border-color: #666 !important;color: #fff !important;}
/* HOVER PAKSA UNTUK TABEL APAPUN */
#myTable tbody tr:hover > td,
#myTable tbody tr:hover {background: rgba(155, 223, 182, 0.45) !important;transition: background 0.15s ease-in-out;}
/* KHUSUS DARK MODE */
body.dark #myTable tbody tr:hover > td,
body.dark #myTable tbody tr:hover {background: rgba(80, 120, 80, 0.55) !important;}

/* ===== TOGGLE SWITCH ===== */
.toggle-switch {position: relative;display: inline-block;width: 52px;height: 28px;}
.toggle-switch input {opacity: 0;width: 0;height: 0;}
.slider {position: absolute;cursor: pointer;background-color: #ccc;border-radius: 30px;top: 0;left: 0;right: 0;bottom: 0;transition: 0.3s;}
.slider::before {position: absolute;content: "";height: 22px;width: 22px;left: 3px;bottom: 3px;background-color: white;border-radius: 50%;transition: 0.3s;}
.toggle-switch input:checked + .slider {background-color: #7c60b2;}
.toggle-switch input:checked + .slider::before {transform: translateX(24px);}
/* ===== PASSWORD FIELD ===== */
.password-wrap {position: relative;}
.password-wrap input {padding-right: 40px;}
.toggle-password {position: absolute;right: 12px;top: 50%;transform: translateY(-50%);cursor: pointer;opacity: 0.7;}
.toggle-password:hover {opacity: 1;}
/* ===== DARK MODE ===== */
body.dark .slider {background-color: #555;}
body.dark .toggle-switch input:checked + .slider {background-color: #9f8be8;}

.status-toggle-wrap {display: flex;align-items: center;gap: 12px;}
.toggle-switch {position: relative;width: 52px;height: 28px;}
.toggle-switch input {opacity: 0;}
.slider {position: absolute;inset: 0;background: #ccc;border-radius: 30px;transition: .3s;}
.slider::before {content: "";position: absolute;width: 22px;height: 22px;left: 3px;bottom: 3px;background: #fff;border-radius: 50%;transition: .3s;}
.toggle-switch input:checked + .slider {background: #4CAF50;}
.toggle-switch input:checked + .slider::before {transform: translateX(24px);}
/* dark mode */
.dark .slider { background:#555; }
.dark input:checked + .slider { background:#66bb6a; }






/* ===================== DARK MODE ===================== */
body.dark {--bg: #111;--fg: #eaeaea;--muted: #999;--card: #1b1b1b;--accent: #4a90e2;--accent-light: #2a2a2a;--border: #333;--btn-primary: #3b82f6;--btn-info: #0ea5e9;--btn-danger: #ef4444;--btn-secondary: #555;background: var(--bg);color: var(--fg);}

/* Elemen khusus dark */
body.dark .navbar,
body.dark .nav-links,
body.dark .submenu,
body.dark .card,
body.dark .mini-card,
body.dark .chart-card,
body.dark .quick-btn,
body.dark .table th,
body.dark .table td,
body.dark .table-dashboard th,
body.dark .table-dashboard td {background: #2a2a2a !important;color: var(--fg) !important;border-color: #333 !important;}
body.dark .nav-toggle{color: #fff}
/* Hover */
body.dark .nav-links li a:hover,
body.dark .submenu li a:hover,
body.dark .profile-thumb:hover {background: #333 !important;color: #fff !important;}
/* Tabel hover */
body.dark .table tr:hover,
body.dark .table-dashboard tr:hover {background: #222 !important;}
/* Sticky headers */
body.dark .table thead th,
body.dark .table-dashboard thead th {background: #222 !important;}
/* Inputs */
body.dark input,
body.dark select,
body.dark textarea {background: #222 !important;color: #fff !important;border-color: #444 !important;}
/* Buttons */
body.dark .btn {background: #222;border-color: #444;color: #eee;}
body.dark .btn:hover {background: #333;}
/* photo border */
body.dark .profile-thumb {border-color: #555 !important;}








/* ===== RESPONSIVE FONT INPUT & LABEL ===== */

/* Default (>=700px) */
form label {font-size: 14px;}
.input,select,label,textarea {font-size: 12px;}

/* Mobile (<700px) */
@media (max-width:700px) {
form label {font-size: 12px;}
.input,select,label,textarea {font-size: 12px;}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection__rendered {font-size: 12px !important;}
.select2-container--default .select2-selection__placeholder {font-size: 12px !important;}
.select2-container--default .select2-results__option {font-size: 12px !important;}
}


/* ===== SELECT2 STYLE SAMA DENGAN INPUT ===== */
.select2-container {width: 100% !important;font-family: Inter, system-ui, Arial, sans-serif;}
.select2-container--default .select2-selection--single {font-size: 14px;border-radius: 10px;border-color: #cab8b8;}
.select2-container--default .select2-selection__rendered {color: #cab8b8;padding-left: 0;}
.select2-container--default .select2-selection__placeholder {color: #cab8b8;}
.select2-container--default .select2-selection__arrow {height: 100%;right: 10px;}
.select2-dropdown {border-radius: 12px;border: 1px solid var(--border);font-family: Inter, system-ui, Arial, sans-serif;}
.select2-container--default .select2-results__option {padding: 10px;font-size: 14px;}
.select2-container--default .select2-results__option--highlighted { background: var(--accent-light);color: #cab8b8;}.select2-container--default.select2-container--focus .select2-selection--single {border-color: #2196f3;box-shadow: 0 0 0 2px rgba(33, 243, 145, 0.49);}



























/* ===== MODERN FORM ===== */
.modern-form {
    padding: 20px;
    border-radius: 16px;
}

/* HEADER */
.modal-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

/* GRID */
.form-grid {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media(max-width:700px){
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* FORM GROUP */
.form-group {
    display:flex;
    flex-direction:column;
}

/* LABEL */
.form-group label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
}

/* INPUT MODERN */
.input, select, textarea {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #ddd;
    transition: all 0.25s ease;
    background: #fafafa;
}

/* FOCUS EFFECT */
.input:focus, select:focus, textarea:focus {
    border-color: #4CAF50;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(76,175,80,0.15);
    outline: none;
}

/* DIVIDER */
.divider {
    margin: 20px 0;
    border: none;
    border-top: 1px dashed #ddd;
}

/* SIGNATURE */
.signature-section {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.signature-box {
    background: #fafafa;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #eee;
}

.signature-pad {
    width:100%;
    height:120px;
    border:1px dashed #bbb;
    border-radius:10px;
    background:#fff;
}

/* FOOTER */
.modal-footer {
    margin-top: 20px;
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

/* SMALL BUTTON */
.btn-sm {
    font-size: 12px;
    padding: 6px 10px;
}

/* HOVER EFFECT INPUT */
.input:hover {
    border-color:#bbb;
}

/* DARK MODE SUPPORT */
.dark .input {
    background:#2a2a2a;
    border:1px solid #444;
    color:#eee;
}

.dark .signature-box {
    background:#1f1f1f;
}

.dark .divider {
    border-top:1px dashed #444;
}






.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.60);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:20px;
    overflow-y:auto;
    backdrop-filter:blur(3px);
}

.modal-content{
    background:#fff;
    width:90%;
    max-width:1050px;
    min-width:320px;
    border-radius:22px;
    padding:22px;
    max-height:92vh;
    overflow:auto;
    box-shadow:0 20px 60px rgba(0,0,0,.18);
    animation:modalFade .18s ease;
}

/* animasi */
@keyframes modalFade{
    from{
        opacity:0;
        transform:translateY(10px) scale(.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}