/* Grid-based checklist item styling */


.rdg-checklist-grid-header {


  display: grid;


  grid-template-columns: 0.6fr 2fr 1.2fr 1.2fr 1fr 0.8fr;


  gap: 1rem;


  padding: 1rem;


  font-weight: 600;


  color: #6b7280;


  font-size: 0.85rem;


  border-bottom: 2px solid #dee2e6;


  text-transform: uppercase;


  background-color: #f9fafb;


}





/* Grid-based checklist item styling */


.rdg-checklist-grid-item {


  display: grid;


  grid-template-columns: 0.6fr 2fr 1.2fr 1.2fr 1fr 0.8fr;


  gap: 1rem;


  padding: 1rem;


  border-bottom: 1px solid #e5e7eb;


  align-items: center;


  background-color: transparent;


  transition: background-color 0.2s ease;


}





.rdg-checklist-grid-item:hover {


  background-color: #f8f9fa;


}





.rdg-grid-col-entry-id {


  font-size: 0.85rem;


  color: #6b7280;


  font-weight: 500;


}





.rdg-grid-col-report {


  font-weight: 600;


  color: #1f2937;


  font-size: 0.95rem;


}





.rdg-grid-col-report-desc {


  font-size: 0.85rem;


  color: #6b7280;


  margin-top: 0.25rem;


}





.rdg-grid-col-date,


.rdg-grid-col-user {


  font-size: 0.9rem;


  color: #374151;


}





.rdg-grid-col-status {


  text-align: center;


}





.rdg-status-badge {


  display: inline-block;


  padding: 0.375rem 0.75rem;


  border-radius: 9999px;


  font-size: 0.75rem;


  font-weight: 600;


  color: white;


  white-space: nowrap;


  min-width: 140px;


  text-align: center;


}





.rdg-status-badge.draft {


  background-color: #0dcaf0;


}





.rdg-status-badge.submitted {


  background-color: #198754;


}





.rdg-grid-col-action {


  text-align: right;


}





.rdg-checklist-grid-item .btn-edit {


  background-color: #212529;


  border-color: #212529;


  color: white !important;


  font-size: 12px;


}





.rdg-checklist-grid-item .btn-view {


  background-color: #e7f1f5;


  border-color: #b8dce8;


  color: #0c5460;


  cursor: pointer;


  font-weight: 500;


}





.rdg-checklist-grid-item .btn-view:hover {


  background-color: #d1e8f0;


  border-color: #a3d5e1;


}





/* Search panel styling */


.rdg-completed-report-search-panel {


  background-color: transparent;


  padding: 0;


}





.rdg-search-row {


  display: flex;


  gap: 0.75rem;


  align-items: center;


  flex-wrap: wrap;


}





.rdg-search-row .search-input-wrapper {


  flex: 1;


  min-width: 250px;


}





.rdg-search-row input.form-control {


  border: 1px solid #d1d5db;


  border-radius: 0.375rem;


  font-size: 0.95rem;


  padding: 0.625rem 0.875rem;


  background-color: white;


  transition: all 0.2s ease;


  width: 100%;


}





.rdg-search-row input.form-control:focus {


  border-color: #0dcaf0;


  box-shadow: 0 0 0 3px rgba(13, 202, 240, 0.1);


  outline: none;


}





.rdg-search-row input.form-control::placeholder {


  color: #9ca3af;


}





.rdg-btn-completed-report-summary {


  background-color: white;


  border: 1px solid #d1d5db;


  color: #374151;


  border-radius: 0.375rem;


  padding: 0.35rem 0.75rem;


  font-weight: 500;


  font-size: 0.875rem;


  transition: all 0.2s ease;


  display: flex;


  flex-direction: column;


  align-items: center;


  gap: 0.25rem;


  white-space: nowrap;


}





.rdg-btn-completed-report-summary:hover {


  background-color: #f9fafb;


  border-color: #9ca3af;


}





.rdg-btn-completed-report-summary.bg-danger-subtle {


  background-color: #fee2e2;


  border-color: #fca5a5;


  color: #7f1d1d;


  font-weight: 600;


}





.rdg-btn-completed-report-summary .btn-label {


  font-size: 0.65rem;


  font-weight: 600;


}





.rdg-completed-report-summary {


  font-size: 0.95rem;


  font-weight: 600;


}





.rdg-search-row .btn-light {


  background-color: white;


  border: 1px solid #d1d5db;


  color: #374151;


  border-radius: 0.375rem;


  padding: 0.625rem 0.75rem;


  font-size: 0.875rem;


  transition: all 0.2s ease;


  white-space: nowrap;


}





.rdg-search-row .btn-light:hover {


  background-color: #f3f4f6;


  border-color: #9ca3af;


}





#rdg-btn-delete-checklists-toggle {


  background-color: white;


  border: 1px solid #d1d5db;


  color: #374151;


  border-radius: 0.375rem;


  padding: 0.625rem 0.75rem;


  transition: all 0.2s ease;


}





#rdg-btn-delete-checklists-toggle:hover {


  background-color: #f3f4f6;


  border-color: #9ca3af;


}





#rdg-btn-delete-checklists-toggle.btn-outline-danger {


  background-color: #fee2e2;


  border-color: #fca5a5;


  color: #dc2626;


}





/* Mobile responsiveness */


@media (max-width: 768px) {


  .rdg-search-row {


    gap: 0.5rem;


  }





  .rdg-search-row .search-input-wrapper {


    flex: 1 1 100%;


    min-width: 100%;


  }





  .rdg-btn-completed-report-summary {


    flex: 0 1 calc(33% - 0.5rem);


    padding: 0.35rem 0.6rem;


    font-size: 0.75rem;


  }





  .rdg-search-row .btn-light,


  #rdg-btn-delete-checklists-toggle {


    flex: 0 1 auto;


    padding: 0.5rem;


    font-size: 0.8rem;


  }


}





/* Container stability - prevent layout shift during updates */


#completed-reports-container {


  min-height: 200px;


  width: 100%;


}