@use '../variables/colours' as *;
@import "../../../../node_modules/bootstrap/scss/functions";
@import "../../../../node_modules/bootstrap/scss/variables";

// This file contains overrides to the core Bootstrap 3.x styling
.table { 
  border: 1px solid $color-border-default;   
}

.table thead > tr > th { 
  border-bottom: none;
 }

.table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td { 
  border: 1px solid $color-border-default; 
}

.table thead th {
  background-color: $color-border-default;
  color: $color-primary-text;
}

thead th.table-scope {
  background-color: $color-secondary-background;
  font-weight: normal;

  a {
    color: $color-secondary-text;
    padding: 2px calc($grid-gutter-width / 2) 2px 2px;
  }
}

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: $color-muted-background;
}

th.date-column {
  min-width: 120px;
}

th.download-column {
  min-width: 120px;
}

/* Fix issues with dropdwon within tables being cut off */
.table-responsive > .table {
  width: 100%;
  margin-bottom: calc($grid-gutter-width / 2);
  overflow: auto;
}

@media (max-width: 768px) {
  .table-responsive .dropdown-menu,
  .table-responsive .dropdown-toggle {
    position: static !important;
  }
}

@media (min-width: 768px) {
  .table-responsive {
    overflow: visible !important;
  }
}

.notifications {
  table {
    border: none;

    thead > tr > th {
      border: none;
      background-color: $color-secondary-background;
      color: $color-text-black;
    }
    tbody > tr > td { border: none; }
  }
}
