/* ===== Custom Theme (Red & White) ===== */
body { background-color: #f8f9fa; font-family: "Inter","Segoe UI",sans-serif; color: #212529; }
.navbar { background: linear-gradient(135deg,#dc3545,#b02a37); }
.navbar .navbar-brand { font-weight:700; color:#fff !important; }
.navbar .nav-link { color:#f8f9fa !important; transition:color 0.2s; }
.navbar .nav-link:hover { color:#ffe6e9 !important; }
.card { border:none; border-radius:1rem; box-shadow:0 4px 12px rgba(0,0,0,0.08); }
.bg-gradient-red { background:linear-gradient(135deg,#dc3545,#b02a37); color:#fff; }
.bg-gradient-green { background:linear-gradient(135deg,#1cc88a,#0f6848); color:#fff; }
.bg-gradient-yellow { background:linear-gradient(135deg,#f6c23e,#d39e00); color:#fff; }
.bg-gradient-gray { background:linear-gradient(135deg,#6c757d,#495057); color:#fff; }
.table th { background-color:#dc3545; color:#fff; }
.table-hover tbody tr:hover { background-color:#ffe6e9; }
.badge-status { font-size:0.85rem; padding:0.35em 0.65em; border-radius:0.5rem; }
.badge-active { background-color:#dc3545; color:#fff; }
.badge-pending { background-color:#f6c23e; color:#000; }
.badge-inactive { background-color:#6c757d; color:#fff; }
.badge-paid { background-color:#1cc88a; color:#fff; }
.badge-overdue { background-color:#e74a3b; color:#fff; }
.badge-completed { background-color:#0d6efd; color:#fff; }
.btn-primary { background-color:#dc3545; border-color:#dc3545; }
.btn-primary:hover { background-color:#b02a37; border-color:#a52834; }
.login-card { border-radius:1rem; box-shadow:0 10px 24px rgba(0,0,0,0.12); }

<!-- ✅ Button styling -->
<style>
.btn-group .btn.active {
    background-color: #212529 !important;
    color: #fff !important;
    border-color: #212529 !important;
}

.due-date-input {
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 13px;
  width: 140px;
}
.due-date-input:focus {
  box-shadow: 0 0 4px rgba(0,123,255,0.15);
  border-color: #0d6efd;
}

/* ===== Reduce overall font size for Tasks page ===== */
body,
.container-fluid,
.card,
.table,
.table th,
.table td {
  font-size: 0.875rem !important; /* = 14px (was 16px) */
}

/* slightly smaller for smaller devices */
@media (max-width: 768px) {
  .table,
  .table th,
  .table td {
    font-size: 0.8125rem !important; /* ≈ 13px */
  }
}

/* Keep buttons & badges legible */
.btn,
.badge {
  font-size: 0.75rem !important; /* 12px */
}

/* prevent excessive wrapping */
.table td {
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 250px; /* adjust column width */
}

/* align columns neatly */
.table th {
  white-space: nowrap;
}

.logo {
  max-height: 50px;
  width: auto;
}