/* ======= Modern Dashboard Theme – Agumentik Edition ======= */

/* Global Setup */
body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4ecf4 100%);
  color: #2d2d2d;
  min-height: 100vh;
}

/* Navbar Styling - Fresh Green Edition */
.navbar {
  background: linear-gradient(90deg, #00b09b 0%, #96c93d 100%);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.navbar-brand {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.navbar .nav-link {
  color: rgba(255,255,255,0.95) !important;
  transition: 0.3s;
  margin: 0 6px;
  font-weight: 500;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 6px 12px;
}

/* Make user text (Hi, Admin) readable */
.navbar .me-3, 
.navbar span {
  color: #fff !important;
  font-weight: 500;
}


/* Card Design */
.card {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: none;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

/* Buttons */
.btn {
  border-radius: 10px;
  transition: all 0.3s ease;
  font-weight: 500;
}
.btn-primary {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border: none;
}
.btn-primary:hover {
  background: linear-gradient(90deg, #764ba2 0%, #667eea 100%);
  transform: translateY(-1px);
}
.btn-outline-secondary {
  border-color: #764ba2;
  color: #764ba2;
}
.btn-outline-secondary:hover {
  background: #764ba2;
  color: #fff;
}

/* Tables */
.table {
  border-radius: 10px;
  overflow: hidden;
}
.table thead {
  background: linear-gradient(90deg, #667eea, #764ba2);
  color: #fff;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}
.table-hover tbody tr:hover {
  background-color: rgba(118,75,162,0.08);
  transition: 0.2s;
}

/* Badges */
.badge {
  font-size: 0.8rem;
  border-radius: 6px;
  padding: 6px 10px;
}
.badge.bg-primary {
  background: linear-gradient(90deg, #007bff, #00c6ff);
}
.badge.bg-success {
  background: linear-gradient(90deg, #00c851, #007e33);
}
.badge.bg-danger {
  background: linear-gradient(90deg, #ff5f6d, #ffc371);
}

/* Charts */
#performanceChart {
  animation: fadeUp 0.8s ease-out;
  transition: all 0.4s ease-in-out;
}
@keyframes fadeUp {
  0% { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Forms */
input.form-control, select.form-select, textarea.form-control {
  border-radius: 8px;
  border: 1px solid #d1d9e6;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
  transition: 0.2s;
}
input:focus, select:focus, textarea:focus {
  border-color: #764ba2;
  box-shadow: 0 0 0 3px rgba(118,75,162,0.2);
}

/* Timer */
#timer {
  font-size: 1.4rem;
  font-weight: 600;
  color: #ff4b2b;
  background: #fff;
  border-radius: 8px;
  display: inline-block;
  padding: 5px 12px;
  box-shadow: 0 3px 8px rgba(255,75,43,0.25);
}

/* Animations */
.fade-in {
  animation: fadeIn 0.6s ease;
}
@keyframes fadeIn {
  0% { opacity: 0; transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1); }
}

/* Footer */
.footer-text {
  text-align: center;
  font-size: 0.85rem;
  color: #666;
  padding: 15px 0;
}

/* Hover effects for action icons */
.action-btn {
  cursor: pointer;
  transition: transform 0.2s ease;
}
.action-btn:hover {
  transform: scale(1.15);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #667eea, #764ba2);
  border-radius: 10px;
}
::-webkit-scrollbar-track {
  background: #f0f0f0;
}