/* Custom styles */

/* Navbar styles */
.navbar {
  background-color: var(--bs-primary);
  padding: 1rem;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
  color: white;
  font-weight: bold;
  font-size: 1rem;
}

/* Navbar logo styling */
.navbar-logo {
  height: 32px;
  width: auto;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition:
    transform 0.2s ease,
    -webkit-transform 0.2s ease;
}

.navbar-logo:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

/* Navbar brand with logo */
.navbar-dark .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  padding: 0.5rem 1rem;
  -webkit-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  border-radius: 0.25rem;
  position: relative;
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link.active {
  color: white !important;
}

/* Enhanced active link styling */
.navbar-dark .nav-link.active {
  background-color: rgba(255, 255, 255, 0.15);
  -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
  font-weight: 600;
}

/* Active indicator line */
.navbar-dark .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.5rem;
  right: 0.5rem;
  height: 2px;
  background-color: white;
  border-radius: 1px;
}

.navbar-dark .nav-link i {
  margin-right: 0.5rem;
  font-size: 0.9em;
}

/* ============================================
   LOGIN FORM STYLES
   ============================================ */

/* Login page body */
body#login {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
}

/* Login container */
body#login .container {
  max-width: 500px;
  margin: 0 auto;
}

/* Login form card styling */
body#login .col-12.col-md-8.col-lg-7.col-xl-5 {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
  padding: 3rem 2.5rem;
  -webkit-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Login form headings */
body#login h1 {
  color: #2d3748;
  font-weight: 700;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

body#login .text-h3 {
  color: #718096;
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 2rem;
  font-weight: 400;
}

/* Login form labels */
body#login .form-label {
  color: #4a5568;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  display: block;
}

/* Login form inputs */
body#login .form-control {
  border: 2px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

body#login .form-control:focus {
  border-color: #667eea;
  -webkit-box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  background-color: #fff;
}

body#login .form-control::-webkit-input-placeholder {
  color: #a0aec0;
  font-size: 0.95rem;
}

body#login .form-control::-moz-placeholder {
  color: #a0aec0;
  font-size: 0.95rem;
}

body#login .form-control:-ms-input-placeholder {
  color: #a0aec0;
  font-size: 0.95rem;
}

body#login .form-control::-ms-input-placeholder {
  color: #a0aec0;
  font-size: 0.95rem;
}

body#login .form-control::placeholder {
  color: #a0aec0;
  font-size: 0.95rem;
}

/* Login button styling */
body#login .btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 0.875rem 2rem;
  border-radius: 0.75rem;
  width: 100%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  text-transform: none;
  letter-spacing: 0.025em;
  -webkit-box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

body#login .btn:hover:not(:disabled) {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

body#login .btn:active:not(:disabled) {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

body#login .btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  -webkit-transform: none;
  transform: none;
}

/* Loading spinner styling */
body#login .spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

/* Error alert styling */
body#login .alert-danger {
  background-color: rgba(254, 226, 226, 0.9);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: #dc2626;
  border-radius: 0.75rem;
  padding: 1rem;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* Responsive adjustments for login */
@media (max-width: 576px) {
  body#login .col-12.col-md-8.col-lg-7.col-xl-5 {
    padding: 2rem 1.5rem;
    margin: 1rem;
  }

  body#login h1 {
    font-size: 2rem;
  }

  body#login .text-h3 {
    font-size: 1rem;
  }
}

/* Custom Glowing Checkbox */
.glowing-checkbox {
  position: relative;
  width: 24px;
  height: 24px;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  outline: none;
  cursor: pointer;
  border: 2px solid var(--bs-primary);
  border-radius: 4px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin: 0;
  display: inline-block;
}

.glowing-checkbox::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  width: 12px;
  height: 12px;
  background-color: var(--bs-primary);
  border-radius: 2px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.glowing-checkbox:checked::before {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

/* Modified checkbox checked state - removed glow */
.glowing-checkbox:checked {
  border-color: var(--bs-success);
  background-color: rgba(var(--bs-success-rgb), 0.1);
}

/* Hover effect - simplified */
.glowing-checkbox:hover {
  border-color: var(--bs-primary);
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

/* Mobile navigation adjustments */
@media (max-width: 991.98px) {
  .navbar-collapse {
    padding: 1rem 0;
  }

  .navbar-nav .nav-item {
    padding: 0.5rem 0;
  }

  /* Adjust active indicator for mobile */
  .navbar-dark .nav-link.active::after {
    left: 0;
    right: 0;
  }

  /* Adjust logo size for mobile */
  .navbar-logo {
    height: 28px;
  }
}

/* Table styles */
.table {
  margin-top: 2rem;
  --bs-table-hover-bg: rgba(var(--bs-primary-rgb), 0.05);
}

/* Items table specific styles */
.items-table {
  -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  border-radius: 0.375rem;
  overflow: hidden;
}

.items-table .table {
  margin: 0;
  border-radius: 0;
}

.items-table .table thead th {
  background: linear-gradient(45deg, var(--bs-dark), #495057);
  color: white;
  border: none;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  padding: 1rem 0.75rem;
}

.items-table .table tbody td {
  vertical-align: middle;
  padding: 0.75rem;
  border-color: var(--bs-border-color-translucent);
}

.items-table .table tbody tr:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.05);
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

/* Status column styling */
.status-column {
  width: 150px;
  white-space: nowrap;
}

/* Custom checkbox styles */
.form-check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 0.5rem;
  margin: 0;
}

.form-check-input {
  cursor: pointer;
  margin: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  width: 1.25rem;
  height: 1.25rem;
  border-width: 2px;
}

.form-check-label {
  cursor: pointer;
  margin: 0;
  font-weight: 500;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

/* Checkbox states */
.form-check-input:checked {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
  -webkit-animation: checkbox-success 0.3s ease-in-out;
  animation: checkbox-success 0.3s ease-in-out;
}

.form-check-input:not(:checked) {
  background-color: var(--bs-light);
  border-color: var(--bs-secondary);
}

/* Status label colors */
.status-completed {
  color: var(--bs-success);
  font-weight: 500;
  font-size: 0.85rem;
  background-color: rgba(var(--bs-success-rgb), 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
}

.status-pending {
  color: var(--bs-warning);
  font-weight: 500;
  font-size: 0.85rem;
  background-color: rgba(var(--bs-warning-rgb), 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
}

/* Checkbox animation - simplified */
@-webkit-keyframes checkbox-success {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes checkbox-success {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.form-check-input:focus {
  border-color: var(--bs-primary);
  -webkit-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Loading and empty states */
.loading-container {
  min-height: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.empty-state {
  padding: 3rem 2rem;
  text-align: center;
}

.empty-state i {
  opacity: 0.6;
}

/* Card styling */
.items-card {
  border: none;
  -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  border-radius: 0.5rem;
}

.items-card .card-header {
  background: linear-gradient(135deg, var(--bs-primary), #0056b3);
  color: white;
  border-radius: 0.5rem 0.5rem 0 0 !important;
  border: none;
  padding: 1.25rem 1.5rem;
}

.items-card .card-title {
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0;
}

.items-card .card-body {
  padding: 1.5rem;
}

/* Completed item styling */
.table tbody tr.completed-item {
  background-color: rgba(var(--bs-success-rgb), 0.05);
}

.table tbody tr.completed-item td:nth-child(2) {
  text-decoration: line-through;
  opacity: 0.7;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .items-card .card-body {
    padding: 1rem;
  }

  .table-responsive {
    font-size: 0.9rem;
  }

  .items-table .table thead th {
    padding: 0.75rem 0.5rem;
    font-size: 0.8rem;
  }

  .items-table .table tbody td {
    padding: 0.5rem;
  }
}

/* Updated checkbox button styles - clean and crisp */
.checkbox-btn {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition:
    transform 0.2s ease,
    -webkit-transform 0.2s ease;
  border: none;
  font-size: 14px;
  position: relative;
  padding: 0;
  overflow: hidden;
}

/* Style for the check mark - adjusted for crisp appearance */
.check-icon {
  font-size: 11px;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: 0;
}

/* Clean checked state - solid background, no gradient or fuzz */
.btn-success.checkbox-btn {
  background-color: var(--bs-success) !important;
  color: white !important;
  border: 1px solid var(--bs-success) !important;
  -webkit-filter: none !important;
  filter: none !important; /* Removes any filter effects */
}

/* Clean unchecked state */
.btn-secondary.checkbox-btn {
  background-color: var(--bs-light) !important;
  color: var(--bs-dark) !important;
  border: 1px solid var(--bs-gray-400) !important;
  -webkit-filter: none !important;
  filter: none !important; /* Removes any filter effects */
}

/* Hover effect - simple transform only */
.checkbox-btn:hover {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}

.checkbox-btn:active {
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
}

/* Edit Modal Styles */
.modal-content {
  border-radius: 0.75rem;
  border: none;
  -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

.modal-header {
  border-bottom: 1px solid var(--bs-border-color-translucent);
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--bs-primary), #0056b3);
  color: white;
  border-radius: 0.75rem 0.75rem 0 0;
}

.modal-header .modal-title {
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0;
}

.modal-header .btn-close {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.modal-header .btn-close:hover {
  opacity: 1;
}

.modal-body {
  padding: 2rem;
}

.modal-footer {
  border-top: 1px solid var(--bs-border-color-translucent);
  padding: 1.5rem;
  background-color: var(--bs-gray-50);
  border-radius: 0 0 0.75rem 0.75rem;
}

/* Action Button Styles */
.btn-sm.btn-outline-primary,
.btn-sm.btn-outline-danger {
  padding: 0.375rem 0.5rem;
  font-size: 0.8rem;
  border-width: 1px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.btn-sm.btn-outline-primary:hover {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  -webkit-box-shadow: 0 0.25rem 0.5rem rgba(var(--bs-primary-rgb), 0.3);
  box-shadow: 0 0.25rem 0.5rem rgba(var(--bs-primary-rgb), 0.3);
}

.btn-sm.btn-outline-danger:hover {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  -webkit-box-shadow: 0 0.25rem 0.5rem rgba(var(--bs-danger-rgb), 0.3);
  box-shadow: 0 0.25rem 0.5rem rgba(var(--bs-danger-rgb), 0.3);
}

/* Form validation styles */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--bs-danger);
  background-image: none;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  -webkit-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Loading spinner in button */
.spinner-border-sm {
  width: 1rem;
  height: 1rem;
}

/* Responsive action buttons */
@media (max-width: 576px) {
  .btn-sm.btn-outline-primary,
  .btn-sm.btn-outline-danger {
    padding: 0.25rem 0.375rem;
    font-size: 0.75rem;
  }

  .modal-body {
    padding: 1.5rem;
  }

  .modal-footer {
    padding: 1rem 1.5rem;
  }
}

/* ============================================
   SORTABLE TABLE HEADERS
   ============================================ */

/* Sortable header styling */
.sortable-header {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  position: relative;
  white-space: nowrap;
}

.sortable-header:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}

.sortable-header:active {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* Sort icon styling */
.sortable-header i {
  font-size: 0.8rem;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  vertical-align: middle;
}

.sortable-header .fa-sort {
  opacity: 0.5;
}

.sortable-header:hover .fa-sort {
  opacity: 0.8;
}

.sortable-header .fa-sort-up,
.sortable-header .fa-sort-down {
  opacity: 1;
}

/* Ensure proper spacing for sort icons */
.sortable-header .fa-check {
  margin-right: 0.25rem;
}

/* Mobile responsiveness for sortable headers */
@media (max-width: 768px) {
  .sortable-header {
    font-size: 0.8rem;
    padding: 0.5rem 0.25rem;
  }

  .sortable-header i {
    font-size: 0.7rem;
  }
}

/* ============================================
   TYPE-BASED ROW COLOR CODING SYSTEM - OVERRIDE BOOTSTRAP COMPLETELY
   ============================================ */

/* CRITICAL: Override Bootstrap's table striping completely */
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
  --bs-table-striped-bg: transparent !important;
}

/* Force all type-based rows to have their colors regardless of Bootstrap */
/* GROBAK - Light Blue */
tr.type-grobak,
tr.type-grobak > td,
.table tbody tr.type-grobak,
.table tbody tr.type-grobak > td {
  background-color: rgba(173, 216, 230, 0.4) !important;
  border-left: 5px solid #87ceeb !important;
}

tr.type-grobak:hover,
tr.type-grobak:hover > td,
.table tbody tr.type-grobak:hover,
.table tbody tr.type-grobak:hover > td {
  background-color: rgba(173, 216, 230, 0.6) !important;
}

/* GROCER - Light Green */
tr.type-grocer,
tr.type-grocer > td,
.table tbody tr.type-grocer,
.table tbody tr.type-grocer > td {
  background-color: rgba(144, 238, 144, 0.4) !important;
  border-left: 5px solid #90ee90 !important;
}

tr.type-grocer:hover,
tr.type-grocer:hover > td,
.table tbody tr.type-grocer:hover,
.table tbody tr.type-grocer:hover > td {
  background-color: rgba(144, 238, 144, 0.6) !important;
}

/* GROPHA - Lavender */
tr.type-gropha,
tr.type-gropha > td,
.table tbody tr.type-gropha,
.table tbody tr.type-gropha > td {
  background-color: rgba(230, 230, 250, 0.5) !important;
  border-left: 5px solid #e6e6fa !important;
}

tr.type-gropha:hover,
tr.type-gropha:hover > td,
.table tbody tr.type-gropha:hover,
.table tbody tr.type-gropha:hover > td {
  background-color: rgba(230, 230, 250, 0.7) !important;
}

/* GROPRO - Light Salmon */
tr.type-gropro,
tr.type-gropro > td,
.table tbody tr.type-gropro,
.table tbody tr.type-gropro > td {
  background-color: rgba(255, 160, 122, 0.4) !important;
  border-left: 5px solid #ffa07a !important;
}

tr.type-gropro:hover,
tr.type-gropro:hover > td,
.table tbody tr.type-gropro:hover,
.table tbody tr.type-gropro:hover > td {
  background-color: rgba(255, 160, 122, 0.6) !important;
}

/* HARDWR - Light Gray */
tr.type-hardwr,
tr.type-hardwr > td,
.table tbody tr.type-hardwr,
.table tbody tr.type-hardwr > td {
  background-color: rgba(211, 211, 211, 0.5) !important;
  border-left: 5px solid #d3d3d3 !important;
}

tr.type-hardwr:hover,
tr.type-hardwr:hover > td,
.table tbody tr.type-hardwr:hover,
.table tbody tr.type-hardwr:hover > td {
  background-color: rgba(211, 211, 211, 0.7) !important;
}

/* GROFRZ - Light Cyan */
tr.type-grofrz,
tr.type-grofrz > td,
.table tbody tr.type-grofrz,
.table tbody tr.type-grofrz > td {
  background-color: #6cafd699 !important;
  border-left: 5px solid #194ee2 !important;
}

tr.type-grofrz:hover,
tr.type-grofrz:hover > td,
.table tbody tr.type-grofrz:hover,
.table tbody tr.type-grofrz:hover > td {
  background-color: rgba(125, 113, 230, 0.8) !important;
}

/* GROREF - Mint Cream */
tr.type-groref,
tr.type-groref > td,
.table tbody tr.type-groref,
.table tbody tr.type-groref > td {
  background-color: #90d3e4b3 !important;
  border-left: 5px solid #3209ebb3 !important;
}

tr.type-groref:hover,
tr.type-groref:hover > td,
.table tbody tr.type-groref:hover,
.table tbody tr.type-groref:hover > td {
  background-color: #3f5de2b3 !important;
}

/* GROPER - Peach Puff */
tr.type-groper,
tr.type-groper > td,
.table tbody tr.type-groper,
.table tbody tr.type-groper > td {
  background-color: rgba(255, 218, 185, 0.5) !important;
  border-left: 5px solid #ffdab9 !important;
}

tr.type-groper:hover,
tr.type-groper:hover > td,
.table tbody tr.type-groper:hover,
.table tbody tr.type-groper:hover > td {
  background-color: rgba(255, 218, 185, 0.7) !important;
}

/* GROMRO - Light Yellow */
tr.type-gromro,
tr.type-gromro > td,
.table tbody tr.type-gromro,
.table tbody tr.type-gromro > td {
  background-color: rgba(219, 175, 30, 0.6) !important;
  border-left: 5px solid #ffffe0 !important;
}

tr.type-gromro:hover,
tr.type-gromro:hover > td,
.table tbody tr.type-gromro:hover,
.table tbody tr.type-gromro:hover > td {
  background-color: rgba(255, 255, 224, 0.8) !important;
}

/* ACCOUN - Linen */
tr.type-accoun,
tr.type-accoun > td,
.table tbody tr.type-accoun,
.table tbody tr.type-accoun > td {
  background-color: rgba(250, 240, 230, 0.6) !important;
  border-left: 5px solid #faf0e6 !important;
}

tr.type-accoun:hover,
tr.type-accoun:hover > td,
.table tbody tr.type-accoun:hover,
.table tbody tr.type-accoun:hover > td {
  background-color: rgba(250, 240, 230, 0.8) !important;
}

/* ADMIN - Misty Rose */
tr.type-admin,
tr.type-admin > td,
.table tbody tr.type-admin,
.table tbody tr.type-admin > td {
  background-color: rgba(255, 228, 225, 0.6) !important;
  border-left: 5px solid #ffe4e1 !important;
}

tr.type-admin:hover,
tr.type-admin:hover > td,
.table tbody tr.type-admin:hover,
.table tbody tr.type-admin:hover > td {
  background-color: rgba(255, 228, 225, 0.8) !important;
}

/* PLANT - Honeydew */
tr.type-plant,
tr.type-plant > td,
.table tbody tr.type-plant,
.table tbody tr.type-plant > td {
  background-color: rgba(240, 255, 240, 0.6) !important;
  border-left: 5px solid #f0fff0 !important;
}

tr.type-plant:hover,
tr.type-plant:hover > td,
.table tbody tr.type-plant:hover,
.table tbody tr.type-plant:hover > td {
  background-color: rgba(240, 255, 240, 0.8) !important;
}

/* Ensure text remains readable on all type backgrounds */
tr[class*="type-"] td,
.table tbody tr[class*="type-"] td {
  color: #212529 !important;
  font-weight: 500 !important;
}

/* Special handling for completed items with type colors */
tr[class*="type-"].completed-item td:nth-child(2),
.table tbody tr[class*="type-"].completed-item td:nth-child(2) {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Responsive adjustments for type colors */
@media (max-width: 768px) {
  tr[class*="type-"],
  .table tbody tr[class*="type-"] {
    border-left-width: 3px !important;
  }
}

/* ============================================
   TABLE FOOTER STYLES
   ============================================ */

/* Table footer styling */
.table-footer {
  border-top: 1px solid var(--bs-border-color);
  background-color: var(--bs-gray-50);
  border-radius: 0 0 0.5rem 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--bs-secondary);
}

.table-footer i {
  color: var(--bs-primary);
  opacity: 0.8;
}

/* Responsive adjustments for table footer */
@media (max-width: 768px) {
  .table-footer {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }
}

/* ============================================
   EXTENSIBLE TYPE SYSTEM DOCUMENTATION
   ============================================ */

/*
To add new type colors, follow this pattern:

tr.type-NEWTYPE,
tr.type-NEWTYPE > td,
.table tbody tr.type-NEWTYPE,
.table tbody tr.type-NEWTYPE > td {
    background-color: rgba(R, G, B, 0.4-0.6) !important;
    border-left: 5px solid #HEXCOLOR !important;
}

tr.type-NEWTYPE:hover,
tr.type-NEWTYPE:hover > td,
.table tbody tr.type-NEWTYPE:hover,
.table tbody tr.type-NEWTYPE:hover > td {
    background-color: rgba(R, G, B, 0.6-0.8) !important;
}

Replace:
- NEWTYPE with your type name (lowercase)
- R, G, B with RGB values (0-255)
- #HEXCOLOR with the border color in hex format
*/