/* header tweak */
header h1.h2 { color: darkred; }

/* table header styling */
#tasksTable thead tr:nth-child(1) th,
#tasksTableColor thead tr:nth-child(1) th {
  background-color: darkred;
  color: #fff;
}
#tasksTable thead tr:nth-child(2) th,
#tasksTableColor thead tr:nth-child(2) th {
  background-color: #6c757d;
  color: #fff;
}
#manageTasksModal .modal-content {
  /* a light, soft shadow around the edges */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* add this alongside your other table-header CSS */
#tasksTableConstruction thead tr:nth-child(1) th {
  background-color: darkred;
  color: #fff;
}
#tasksTableConstruction thead tr:nth-child(2) th {
  background-color: #6c757d;
  color: #fff;
}

/* shared styling for any table-[anything] headers */
[id^="table-"] thead tr:nth-child(1) th {
  background-color: darkred !important;
  color: #fff !important;
}
[id^="table-"] thead tr:nth-child(2) th {
  background-color: #6c757d !important;
  color: #fff !important;
}

/* buttons */
.btn-primary {
  background-color: darkred !important;
  border-color: darkred !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #8b0000 !important;
  border-color: #8b0000 !important;
}

/* avatar dropdown arrow removed */
#userAvatar.dropdown-toggle::after {
  display: none !important;
}

/* report-section tables */
#reportsSection table td,
#reportsSection table th {
  border: 1px solid #dee2e6;
}
#reportsSection table {
  border-collapse: collapse;
}

/* “Add Task” button inside the tasksModal */
#tasksModal #addTaskBtn {
  border-color: darkred !important;
  color: darkred !important;
}
#tasksModal #addTaskBtn:hover,
#tasksModal #addTaskBtn:focus {
  background-color: darkred !important;
  border-color: darkred !important;
  color: #fff !important;
}

/* subtle shadow only on the “add” modals */
#addTaskModal .modal-content,
#addTaskModalGlobal .modal-content,
#addEmployeeModal .modal-content,
#addMemberModalGlobal .modal-content {
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

/* sidebar */
#sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 1rem 0;
  background-color: #f8f9fa;
  border-right: 1px solid #dee2e6;
  z-index: 1040;
}
body {
  padding-left: 60px;
}
#sidebar .dropdown {
  margin-bottom: 2rem;
  position: relative;
  z-index: 1050;
}
#sidebar .nav-link {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.75rem 0;
  color: #495057;
}
#sidebar .nav-link:hover,
#sidebar .nav-link.active i {
  color: darkred;
}

/* department section */
#departmentsSection .nav-tabs .nav-link.active {
  color: darkred !important;
  border-color: darkred !important;
}
#departmentsSection .nav-tabs .nav-link {
  color: #6c757d;
}
#departmentsSection .nav-tabs .nav-link:hover {
  color: darkred !important;
}
#departmentsSection .card,
#departmentsSection .card-header,
#departmentsSection .table thead th {
  background-color: darkred !important;
  color: #fff !important;
  border-color: darkred !important;
}
#departmentsSection .btn-outline-primary {
  color: darkred !important;
  border-color: darkred !important;
}
#departmentsSection .btn-outline-primary:hover,
#departmentsSection .btn-outline-primary:focus {
  background-color: darkred !important;
  color: #fff !important;
}
#departmentsSection .text-indigo {
  color: darkred !important;
}
#departmentsSection .bg-indigo {
  background-color: darkred !important;
}

/* sub-tabs in departments */
[id^="subTabs-"] .nav-link {
  background-color: #f8f9fa;
  color: darkred;
  border: 1px solid #dee2e6;
}
[id^="subTabs-"] .nav-link.active {
  background-color: #e9ecef;
  color: darkred;
}

/* report-section nav-tabs */
#reportsSection .nav-tabs .nav-link {
  color: var(--bs-gray-700);
  border-color: transparent transparent #dee2e6;
}
#reportsSection .nav-tabs .nav-link:hover,
#reportsSection .nav-tabs .nav-link:focus {
  color: darkred;
}
#reportsSection .nav-tabs .nav-link.active {
  color: darkred !important;
  border-color: transparent transparent darkred !important;
  background-color: transparent;
}

/* print buttons */
#printBtn,
.print-btn {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}
#printBtn:hover,
#printBtn:focus,
.print-btn:hover,
.print-btn:focus {
  background-color: darkred !important;
  border-color: darkred !important;
  color: #fff;
}

/* login button */
#loginBtn {
  min-width: 220px;
}

/* logout overlay spinner */
.kaplan-spinner {
  width: 3rem;
  aspect-ratio: 1;
  --clr: #8b0000; --track: #d7d7d7; --thick: .35rem; --dur: 1.2s;
  border-radius: 50%;
  background:
    conic-gradient(var(--clr) 0 25%, transparent 0)
    border-box;
  mask: radial-gradient(farthest-side,
    transparent calc(100% - var(--thick)), #000 0);
  background-color: var(--track);
  animation: spin var(--dur) linear infinite;
}
@keyframes spin {
  to { transform: rotate(1turn); }
}