/* ===== RESET & DASAR ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; background: #0a0a0a; min-height: 100vh; color: #e0e0e0; }
h1, h2, h3, h4 { font-weight: 600; color: #ffffff; }
a { text-decoration: none; color: inherit; }

/* ===== LOGIN PAGE ===== */
.login-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; background: radial-gradient(circle at 10% 30%, #1a3300, #0a0a0a); }
.login-box { background: rgba(20,20,20,0.95); backdrop-filter: blur(10px); border: 1px solid #2ecc71; border-radius: 20px; box-shadow: 0 20px 50px rgba(46,204,113,0.2); width: 100%; max-width: 400px; padding: 40px; text-align: center; animation: fadeInUp 0.8s ease; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.login-box h2 { margin-bottom: 10px; color: #2ecc71; font-size: 28px; }
.login-box .subtitle { color: #b0b0b0; margin-bottom: 30px; font-size: 14px; }
.input-group { margin-bottom: 20px; text-align: left; }
.input-group label { display: block; margin-bottom: 8px; font-weight: 500; color: #ccc; font-size: 14px; }
.input-group label i { color: #2ecc71; margin-right: 6px; }
.input-group input, .input-group select, .input-group textarea { width: 100%; padding: 12px 15px; background: #1e1e1e; border: 2px solid #333; border-radius: 10px; font-size: 14px; color: #fff; transition: all 0.3s; }
.input-group input:focus, .input-group select:focus, .input-group textarea:focus { border-color: #2ecc71; outline: none; box-shadow: 0 0 0 3px rgba(46,204,113,0.2); background: #252525; }
.btn-login, .btn-primary { width: 100%; padding: 14px; background: #2ecc71; border: none; border-radius: 10px; color: #000; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; margin-top: 10px; }
.btn-login:hover, .btn-primary:hover { background: #27ae60; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(46,204,113,0.3); color: #fff; }
.btn-secondary { background: #555; color: #fff; padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; transition: 0.3s; }
.btn-secondary:hover { background: #666; }
.error { background: rgba(255,70,70,0.2); color: #ff6b6b; padding: 12px; border-radius: 10px; margin-bottom: 20px; font-size: 14px; border: 1px solid #ff4444; display: flex; align-items: center; gap: 8px; }
.error i { color: #ff4444; }
.message { background: rgba(46,204,113,0.2); border: 1px solid #2ecc71; color: #2ecc71; padding: 12px; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.message i { color: #2ecc71; }

/* ===== DASHBOARD LAYOUT ===== */
.dashboard { display: flex; min-height: 100vh; background: #0f0f0f; }

/* ===== SIDEBAR ===== */
.sidebar { width: 280px; background: #111; color: #fff; padding: 30px 20px; position: fixed; height: 100vh; overflow-y: auto; border-right: 1px solid #2ecc71; box-shadow: 2px 0 10px rgba(0,0,0,0.5); display: flex; flex-direction: column; }
.sidebar-header h3 { font-size: 24px; margin-bottom: 40px; text-align: center; color: #fff; font-weight: 700; }
.sidebar-header h3 span { color: #2ecc71; }
.sidebar-menu { list-style: none; flex: 1; }
.sidebar-menu li { margin: 8px 0; }
.sidebar-menu li a { display: flex; align-items: center; padding: 12px 20px; border-radius: 12px; color: #b0b0b0; font-weight: 500; transition: all 0.3s; gap: 12px; }
.sidebar-menu li a i { width: 24px; font-size: 18px; text-align: center; color: #2ecc71; }
.sidebar-menu li a:hover { background: rgba(46,204,113,0.1); color: #fff; padding-left: 30px; }
.sidebar-menu li a.active { background: #2ecc71; color: #000; box-shadow: 0 5px 15px rgba(46,204,113,0.4); }
.sidebar-menu li a.active i { color: #000; }
.disabled-link { opacity: 0.8; cursor: pointer; }
.disabled-link:hover { background: rgba(255,68,68,0.15) !important; color: #ff4444 !important; }
.disabled-link:hover i { color: #ff4444 !important; }

/* ===== CONTENT AREA ===== */
.content { flex: 1; margin-left: 280px; padding: 30px; }
.content h1 { font-size: 28px; margin-bottom: 20px; color: #fff; }
.content p { font-size: 16px; color: #ccc; line-height: 1.6; }

/* ===== TAB NAVIGATION ===== */
.tab-nav { display: flex; gap: 10px; margin-bottom: 30px; border-bottom: 1px solid #333; padding-bottom: 10px; flex-wrap: wrap; }
.tab-btn { background: transparent; border: none; color: #b0b0b0; padding: 10px 20px; font-size: 16px; font-weight: 500; cursor: pointer; border-radius: 30px; transition: all 0.3s; display: flex; align-items: center; gap: 8px; }
.tab-btn i { color: #2ecc71; }
.tab-btn:hover { background: rgba(46,204,113,0.1); color: #fff; }
.tab-btn.active { background: #2ecc71; color: #000; }
.tab-btn.active i { color: #000; }
.tab-pane { display: none; animation: fadeIn 0.3s; }
.tab-pane.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== TABEL ===== */
table { width: 100%; border-collapse: collapse; background: #1a1a1a; border-radius: 10px; overflow: hidden; margin-top: 20px; }
th { background: #2ecc71; color: #000; padding: 12px; text-align: left; font-weight: 600; }
td { padding: 12px; border-bottom: 1px solid #333; color: #e0e0e0; vertical-align: middle; }
.action-btn { background: transparent; border: 1px solid #2ecc71; color: #2ecc71; padding: 5px 10px; border-radius: 4px; cursor: pointer; margin-right: 5px; transition: 0.3s; font-size: 14px; }
.action-btn:hover { background: #2ecc71; color: #000; }
.delete-btn { border-color: #ff4444; color: #ff4444; }
.delete-btn:hover { background: #ff4444; color: #fff; }
.approve-btn { background: #2ecc71; color: #000; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-weight: 500; font-size: 14px; }
.approve-btn:hover { background: #27ae60; color: #fff; }

/* ===== CARD ===== */
.card { background: #1a1a1a; border-radius: 16px; padding: 25px; border: 1px solid #2ecc71; box-shadow: 0 5px 20px rgba(0,0,0,0.5); margin-bottom: 30px; }
.card h3 { margin-bottom: 20px; color: #2ecc71; display: flex; align-items: center; gap: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 20px; }

/* ===== QRIS PREVIEW ===== */
.qris-preview { max-width: 200px; margin-top: 15px; border: 2px solid #2ecc71; border-radius: 12px; padding: 10px; background: #fff; }
.qris-preview img { width: 100%; height: auto; border-radius: 8px; }

/* ===== MODAL (default, sebagian sudah di internal settings) ===== */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); align-items: center; justify-content: center; }
.modal-content { background: #1a1a1a; margin: auto; padding: 30px; border: 2px solid #2ecc71; border-radius: 24px; width: 90%; max-width: 450px; box-shadow: 0 15px 50px rgba(0,0,0,0.8); animation: modalPop 0.4s ease; }
@keyframes modalPop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; padding-bottom: 15px; margin-bottom: 20px; }
.modal-header h3 { margin: 0; font-size: 22px; }
.close { color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; }
.close:hover { color: #ff4444; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; }
.btn-cancel { background: #555; color: #fff; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; }
.btn-submit { background: #2ecc71; color: #000; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; }

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) { .sidebar { width: 240px; } .content { margin-left: 240px; } }
@media (max-width: 768px) {
    .dashboard { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: relative; padding: 20px; border-right: none; border-bottom: 1px solid #2ecc71; }
    .sidebar-header h3 { margin-bottom: 20px; }
    .sidebar-menu { display: flex; flex-wrap: wrap; gap: 5px; }
    .sidebar-menu li { flex: 1 1 auto; }
    .sidebar-menu li a { padding: 10px 15px; justify-content: center; }
    .content { margin-left: 0; padding: 20px; }
    .login-box { padding: 30px 20px; }
    .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .sidebar-menu li a span { display: none; }
    .sidebar-menu li a i { font-size: 20px; margin: 0; }
    .content h1 { font-size: 24px; }
    table { font-size: 14px; }
    .action-btn, .approve-btn { padding: 4px 6px; font-size: 12px; }
}
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');