IssueDashboard.module.css

.issuesTableResponsive :global(.text-end) {
  font-weight: 500;
  color: #6c757d;
  border-bottom-width: 1px;
}

.issuesTableResponsive:global(.bg-oxford-blue) :global(.text-end),
.issuesTableResponsive:global(.bg-oxford-blue) :global(th) {
  color: #ffffff !important;
}

/* Improved positioning for the action menu */
.actionMenu {
  position: absolute;
  top: 0;          /* Position at the top of relative parent */
  right: 100%;     /* Position to the left of the button */
  transform: translateY(-25%); /* Adjust vertical position */
  min-width: 10rem;
  z-index: 1050;
  padding: 0.5rem 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  background-color: white;
}

.actionMenuDark {
  background-color: #1c2541;
  border-color: #3a506b;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

.issueDashboardDropdownItem {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  color: #1C1E1C;
  background-color: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s;
}

.issueDashboardDropdownItem:hover {
  background-color: #f0f0f0;
}

.issueDashboardDropdownItemDark {
  color: #ffffff;
}

.issueDashboardDropdownItemDark:hover {
  background-color: #2f4157;
}

.exportDropdownMenuDark {
  background-color: #1c2541;
  border: 1px solid #3a506b;
}

.exportDropdownItemDark {
  color: #ffffff !important;
}

.exportDropdownItemDark:hover,
.exportDropdownItemDark:focus {
  background-color: #2d3b66 !important;
  color: #ffffff !important;
}

.issueDashboardDropdownItemDark.textDanger {
  color: #ff6b6b;
}

.issueDashboardDropdownItemDark.textDanger:hover {
  background-color: #2f4157;
  color: #ff8787;
}

.badge :global(.bg-info) {
  background-color: #cfe2ff !important;
  color: #084298 !important;
  font-weight: 500;
}

.badge :global(.bg-info-dark) {
  background-color: #3a506b !important;
  color: #ffffff !important;
  font-weight: 500;
}

.pagination :global(.page-link) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
}

.btnLight {
  color: #6c757d;
  border-color: #e9ecef;
}

.issueDashboardDropdown :global(.btn-link) {
  color: #6c757d;
  text-decoration: none;
}

.issueDashboardDropdownDark :global(.btn-link) {
  color: #ffffff;
}

.issueDashboardDropdownDark :global(.btn-link:hover) {
  color: #ffffff;
}

/* Fixed table responsiveness */
.issuesTableResponsive {
  overflow-x: visible !important; /* Prevent horizontal scrollbar */
  overflow-y: visible !important; /* Ensure dropdowns aren't clipped */
  position: relative;
  width: 100%;
  table-layout: fixed;
}

.issuesTableResponsive :global(td),
.issuesTableResponsive :global(th) {
  text-align: left !important;
}

.textEnd {
  text-align: right;
}

/* Improved dropdown positioning */
.issueDashboardDropdown {
  position: static;  /* Make it relative to the table cell instead */
}

:global(td.text-end) {
  position: relative; /* Create positioning context for dropdown */
  white-space: nowrap;
  width: 1%;
}

/* Ensure card doesn't create scrollbars */
:global(.card) {
  overflow: hidden;
}

/* Make sure content doesn't force horizontal scroll */
:global(.container-fluid) {
  max-width: 100%;
  overflow-x: hidden;
}

/* Fix for the dropdown menu to appear inside table */
:global(td.text-end) .issueDashboardDropdown :global(.issue-dashboard-dropdown-menu) {
  position: absolute;
  right: 3rem !important;
  top: 65px !important;
  left: auto !important;
}

.issuesModalBackdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
  z-index: 1050 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


.issuesModalBackdrop :global(.modal-dialog) {
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
}

.issuesModalBackdrop :global(.modal-content) {
  background-color: white;
}

.issuesModalBackdropDark :global(.modal-content) {
  background-color: #1c2541;
  color: #ffffff;
  border: 1px solid #3a506b;
}

.issuesModalBackdropDark :global(.modal-content input) {
  background-color: #1b2a41;
  border-color: #3a506b;
  color: #ffffff;
}

.issuesModalBackdropDark :global(.modal-content input::placeholder) {
  color: #b5bac5;
}

.issuesModalBackdropDark :global(.modal-content input:focus) {
  background-color: #1b2a41;
  border-color: #4a5f7a;
  color: #ffffff;
}

.issuesModalBackdropDark :global(.modal-content h5) {
  color: #ffffff;
}

.issuesModalBackdropDark :global(.modal-content p) {
  color: #ffffff;
}

.issuesModalBackdropDark :global(.modal-content strong) {
  color: #ffffff;
}

:global(.table-dark thead tr:hover) {
  background-color: #1b2a41;
}

:global(.table-dark thead tr th) {
  color: #ffffff;
}

:global(.table-dark tbody tr) {
  color: #ffffff;
}

:global(.table-dark tbody tr:hover) {
  background-color: #2f4157;
}