:root {
  --brand: #4f46e5;
  --brand-dark: #3730a3;
}

body {
  background-color: #f5f6fa;
}

.navbar-brand {
  font-weight: 700;
}

.bg-brand {
  background-color: var(--brand) !important;
}

.btn-brand {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-brand:hover {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

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

.stat-card {
  border-radius: 14px;
  padding: 20px;
  color: #fff;
}
.stat-card h3 { margin: 0; font-size: 1.9rem; font-weight: 700; }
.stat-card span { opacity: .9; font-size: .9rem; }

.stat-blue   { background: linear-gradient(135deg,#4f46e5,#6366f1); }
.stat-green  { background: linear-gradient(135deg,#059669,#10b981); }
.stat-orange { background: linear-gradient(135deg,#d97706,#f59e0b); }
.stat-red    { background: linear-gradient(135deg,#dc2626,#ef4444); }

.clock-widget {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.checkin-btn, .checkout-btn {
  font-size: 1.1rem;
  padding: 14px 30px;
  border-radius: 50px;
}

.table thead th {
  background-color: #f0f1f8;
  border-bottom: none;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #555;
}

.edited-flag {
  cursor: help;
}

.sidebar {
  background: #111827;
}
@media (min-width: 768px) {
  .sidebar { min-height: 100vh; }
}
.sidebar a {
  color: #cbd5e1;
  text-decoration: none;
  display: block;
  padding: 12px 18px;
  border-radius: 8px;
  margin: 2px 10px;
}
.sidebar a:hover, .sidebar a.active {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.sidebar .brand {
  color: #fff;
  font-weight: 700;
  padding: 18px;
  font-size: 1.1rem;
}

/* ---------------------------------------------------------------
   Mobile responsiveness
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body {
    font-size: 0.95rem;
  }

  .container, .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }

  h4, h5, h6 {
    font-size: 1.05rem;
  }

  /* Clock and check-in/out buttons need room to breathe but not overflow */
  .clock-widget {
    font-size: 1.7rem;
  }

  .checkin-btn, .checkout-btn {
    width: 100%;
    font-size: 1rem;
    padding: 12px 20px;
  }

  /* Stat cards: keep 2 per row but shrink padding/text so numbers don't wrap oddly */
  .stat-card {
    padding: 14px;
  }
  .stat-card h3 {
    font-size: 1.5rem;
  }
  .stat-card span {
    font-size: 0.8rem;
  }

  /* Cards generally need less internal padding on small screens */
  .card-body {
    padding: 1rem;
  }

  /* Bigger touch targets for kiosk buttons */
  .btn {
    min-height: 40px;
  }
  .btn-sm {
    min-height: 36px;
    font-size: 0.85rem;
  }

  /* Tables: ensure horizontal scroll never breaks layout, and text stays legible */
  .table {
    font-size: 0.85rem;
  }
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  /* Forms: full-width inputs, comfortable tap height */
  .form-control, .form-select {
    font-size: 1rem;
    min-height: 42px;
  }

  /* Sidebar becomes a dropdown panel under the mobile top bar */
  .sidebar {
    width: 100% !important;
    border-radius: 0;
  }
  .sidebar a {
    padding: 14px 18px;
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  /* Modals (e.g. Leave reason popup) should use most of the screen width */
  .modal-dialog {
    margin: 0.75rem;
  }

  /* Employee kiosk cards: slightly tighter spacing */
  .employee-card .card-body {
    padding: 0.9rem;
  }
}

@media (max-width: 400px) {
  .clock-widget {
    font-size: 1.4rem;
  }
  .stat-card h3 {
    font-size: 1.3rem;
  }
  .employee-card .d-flex.gap-2 {
    flex-direction: column;
  }
}

/* Keep the top navbar from overflowing on narrow phones (app name + live clock) */
@media (max-width: 480px) {
  .navbar-brand {
    font-size: 0.95rem;
    white-space: normal;
  }
  nav.navbar .container,
  nav.navbar .container-fluid {
    flex-wrap: wrap;
    row-gap: 4px;
  }
}