* { box-sizing: border-box; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
body { background: #f3f4f6; margin: 0; padding: 16px; transition: background 0.3s, color 0.3s; }
body.dark { background: #1e1e2f; color: #e2e2e2; }
body.dark .card { background: #2a2a3a; }
body.dark input, body.dark select, body.dark button, body.dark textarea { background: #3a3a4a; color: #e2e2e2; border-color: #555; }
body.dark .popup-content { background: #2a2a3a; }
body.dark .member-tag { background: #3a3a4a; }
body.dark .stat-card { background: #3a3a4a; }
body.dark .stat-card-header { background: #4a4a5a; }
body.dark .pending-card { background: #2a2a3a; border-color: #4a4a5a; }
body.dark .submission-item { background: #3a3a4a; }
body.dark .total-approved { background: #3a3a4a; }
body.dark .filter-bar select, body.dark .filter-bar input { background: #3a3a4a; }

.container { max-width: 1200px; margin: 0 auto; }
.card { background: white; border-radius: 24px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: background 0.3s; }
h2 { font-size: 1.5rem; margin: 0 0 12px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
h3 { font-size: 1.2rem; margin: 0 0 12px 0; }
.flex-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.form-group { flex: 1; min-width: 120px; }
label { display: block; font-size: 0.8rem; font-weight: 500; margin-bottom: 4px; }
input, select, button, textarea { padding: 10px 12px; border-radius: 14px; border: 1px solid #cbd5e1; font-size: 1rem; background: white; }
textarea { font-family: inherit; resize: vertical; }
button { width: 100%; background: #6366f1; color: white; border: none; font-weight: 600; cursor: pointer; transition: 0.2s; }
button:hover { background: #4f46e5; }
button:disabled { background: #9ca3af; cursor: not-allowed; }
.btn-inline { width: auto; display: inline-block; padding: 4px 10px; font-size: 0.8rem; margin-left: 5px; }
.btn-secondary { background: #f1f5f9; color: #1e293b; border: 1px solid #cbd5e1; }
body.dark .btn-secondary { background: #4a4a5a; color: #e2e2e2; border-color: #666; }
.btn-danger { background: #ef4444; }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; width: auto; }
.btn-success { background: #10b981; }
.btn-warning { background: #f59e0b; }

.member-tag, .store-tag, .schedule-tag { background: #e2e8f0; border-radius: 40px; padding: 6px 14px; display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 8px 0; flex-wrap: wrap; }
.submission-item { background: #f8fafc; border-radius: 20px; padding: 8px 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.submission-checkbox { margin-right: 8px; transform: scale(1.1); }
.submission-details { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }

.progress-bar { background: #e2e8f0; border-radius: 20px; height: 6px; overflow: hidden; margin: 6px 0; }
.progress-fill { background: #10b981; height: 100%; width: 0%; transition: width 0.3s; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; gap: 8px; } }
.stat-card { background: #f1f5f9; border-radius: 16px; text-align: center; font-size: 0.85rem; overflow: hidden; }
.stat-card-header { background: #cbd5e1; padding: 8px; font-weight: bold; }
.stat-card-body { padding: 8px; }

.dark-toggle { position: fixed; bottom: 20px; right: 20px; background: #6366f1; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 24px; z-index: 1000; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; align-items: flex-end; }
.filter-bar select, .filter-bar input { flex: 1; min-width: 120px; }

.positive { color: #10b981; font-weight: bold; }
.negative { color: #ef4444; font-weight: bold; }
.badge { background: #ef4444; color: white; border-radius: 20px; padding: 2px 8px; font-size: 0.7rem; margin-left: 8px; }
.role-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 0.7rem; margin-left: 8px; }
.role-admin { background: #6366f1; color: white; }
.role-spv { background: #10b981; color: white; }
.role-member { background: #f59e0b; color: white; }

.pending-badge { background: #f59e0b; color: white; border-radius: 20px; padding: 2px 8px; font-size: 0.7rem; display: inline-block; }
.approved-badge { background: #10b981; color: white; border-radius: 20px; padding: 2px 8px; font-size: 0.7rem; display: inline-block; }
.emergency-badge { background: #ef4444; color: white; border-radius: 20px; padding: 2px 8px; font-size: 0.7rem; display: inline-block; }

.sticky-top { position: sticky; top: 0; z-index: 100; background: inherit; }
.scrollable-container { max-height: 500px; overflow-y: auto; border-radius: 16px; }
.scrollable-audit { max-height: 300px; overflow-y: auto; }

.password-wrapper { display: flex; gap: 8px; align-items: center; }
.password-wrapper input { flex: 1; }
.toggle-pwd { width: auto; padding: 10px; background: #9ca3af; }

.popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.popup-content { background: white; padding: 24px; border-radius: 30px; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; }
.popup-content h3 { margin-top: 0; }

.schedule-card { background: #f1f5f9; border-radius: 16px; padding: 12px; margin-bottom: 10px; border-left: 4px solid #3b82f6; }
body.dark .schedule-card { background: #3a3a4a; }
.schedule-store { font-weight: bold; font-size: 1.1rem; }
.schedule-date { font-size: 0.8rem; color: #64748b; }
.flag-btn { background: #ef4444; padding: 4px 12px; font-size: 0.7rem; width: auto; }

.pending-card { background: #ffffff; border-radius: 16px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid #e2e8f0; }
.pending-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.pending-member { font-weight: bold; font-size: 1rem; }
.pending-amount { font-weight: bold; color: #3b82f6; }
.pending-card-details-row { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; font-size: 0.75rem; color: #64748b; }
.pending-card-buttons-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e2e8f0; }
.pending-card-buttons-row button { flex: 1; min-width: 70px; padding: 6px 8px; font-size: 0.7rem; border-radius: 20px; }

.btn-approve { background: #10b981; }
.btn-reject { background: #ef4444; }
.btn-resolve { background: #3b82f6; }

@media (max-width: 700px) { 
  .flex-row { flex-direction: column; align-items: stretch; } 
  .sticky-top .card:last-child > div { flex-direction: row; flex-wrap: wrap; }
  .sticky-top .card:last-child button { flex: 1; font-size: 0.7rem; padding: 8px 4px; white-space: nowrap; }
}

.sticky-top .card:first-child { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sticky-top .card:last-child { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

.emergency-icon { color: #ef4444; font-weight: bold; }

.logout-btn:hover {
    background: #dc2626 !important;
}

.emergency-header-btn:hover {
    background: #d97706 !important;
}