@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');

:root {
  --primary: #2d6a4f;
  --primary-light: #40916c;
  --primary-dark: #1b4332;
  --accent: #52b788;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Sarabun', sans-serif; background: #f0f4f0; color: #2d3436; }

/* Login */
.login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--accent) 100%);
}
.login-card {
  background: #fff; border-radius: 16px; width: 400px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.login-header {
  background: var(--primary-dark); color: #fff; padding: 32px; text-align: center;
}
.login-header i { font-size: 3rem; color: var(--accent); margin-bottom: 12px; }
.login-header h3 { margin: 8px 0 4px; }
.login-header p { opacity: 0.7; font-size: 0.9rem; }
.login-body { padding: 32px; }

/* Nav */
.admin-nav {
  background: var(--primary-dark); padding: 12px 24px;
  display: flex; justify-content: space-between; align-items: center;
}

/* Tabs */
.admin-tabs {
  background: #fff; padding: 0 24px; display: flex; gap: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06); overflow-x: auto;
}
.tab-btn {
  background: none; border: none; padding: 12px 16px; font-size: 0.9rem;
  color: #636e72; cursor: pointer; border-bottom: 3px solid transparent;
  font-family: inherit; white-space: nowrap; transition: all 0.2s;
}
.tab-btn:hover { color: var(--primary); background: #f8f9fa; }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--accent); font-weight: 600; }

/* Content */
.admin-content { padding: 24px; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Cards */
.card { border: none; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

.admin-stat {
  background: #fff; border-radius: 12px; padding: 20px; text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.admin-stat .value { font-size: 2rem; font-weight: 700; }
.admin-stat .label { font-size: 0.85rem; color: #636e72; }

/* Table */
.table th { font-weight: 600; font-size: 0.8rem; color: #636e72; }
.table td { vertical-align: middle; font-size: 0.88rem; }

.badge-status { padding: 3px 8px; border-radius: 12px; font-size: 0.75rem; }
.badge-pending { background: #ffeaa7; color: #6c5ce7; }
.badge-completed { background: #d4edda; color: #155724; }
.badge-in_progress { background: #cce5ff; color: #004085; }
.badge-overdue { background: #f8d7da; color: #721c24; }

/* Responsive */
@media (max-width: 768px) {
  .login-card { width: 90%; }
  .admin-content { padding: 12px; }
  .admin-tabs { padding: 0 8px; }
}