table {
  border-collapse: collapse;
  border-spacing: 0;
  max-width: 100%;
  width: 100%;
}

th,
td {
  padding: 0.375rem 0.75rem;
  line-height: inherit;
}

th {
  text-align: left;
  font-weight: bold;
  vertical-align: bottom;
}

td {
  vertical-align: top;
}

#summary-budget-null1 {
  background-color: transparent;
}

.budget-table {
  font-size: 12px;
  input,
  .ds-c-field__before--currency {
    font-size: 12px;
  }
  &.budget-table--totals {
    width: 50%;
  }
  + .budget-table {
    margin-top: $spacer-2;
  }

  .budget-table--category-row_highlight {
    background-color: #f1f1f1;
  }

  .budget-table--category-row_highlight-lighter {
    background-color: #fdf9eb;
  }

  .budget-table--cell__hightlight-lighter {
    background-color: #fdf9eb;
  }

  caption {
    text-align: left;
    /* override for design system where first-child has a top margin of 0 */
    &.ds-h3,
    &.ds-h4 {
      margin-top: $spacer-1 !important;
    }
  }

  th {
    font-weight: $font-semibold;
  }

  th,
  tr {
    &.budget-table--total,
    &.budget-table--subtotal,
    &.budget-table--sum {
      font-weight: $font-bold;
      th,
      td {
        font-weight: $font-bold;
      }
    }
  }

  tr.budget-table--row__header {
    th,
    td {
      background-color: $color-gray-lighter;
    }
  }

  thead {
    th,
    td.th {
      background-color: $color-gray-lighter;
      white-space: pre-line;
      /* used for highlights in a column */
      &.budget-table--col__highlight {
        background-color: $color-warn-lightest;
      }
    }
    .budget-table--row__highlight-gray-dark {
      td,
      th {
        background-color: $color-gray-dark;
        color: $color-white;
      }
    }

    .budget-table--row__highlight-gray-light {
      td,
      th {
        background-color: #f1f1f1;
      }
    }
  }

  tbody {
    tr {
      border-top: 1px dotted $color-gray-lighter;
      border-bottom: 1px dotted $color-gray-lighter;
      &:first-child {
        border-top: none;
      }
      th,
      td {
        vertical-align: middle; /* Ace.css override */

        /* used for highlights in a column */
        &.budget-table--col__highlight {
          background-color: $color-warn-lightest;
        }
      }
    }
    /* used on a tr to highlight a whole row */
    .budget-table--row__highlight {
      td,
      th {
        background-color: #fad980;
      }
    }

    /* used on a tr to highlight a whole row */
    .budget-table--row__highlight-lighter {
      td,
      th {
        background-color: #fdf9eb;
      }
    }

    /* used on a tr to highlight a whole row */
    .summary-table--gray_row__highlight {
      td,
      th {
        background-color: $color-gray-lightest;
      }
    }
  }

  .budget-table__alternate-striping:nth-child(even) {
    th,
    td {
      background-color: #f1f1f1;
    }
  }
}

.budget-table.activity-budget-table {
  td {
    width: 1%;
    white-space: nowrap;

    &.title {
      padding-left: 3em;
      width: 100%;
      white-space: normal;
    }
  }
}

.budget-table.executive-summary-budget-table {
  th {
    @extend .ds-u-text-align--center;
  }
  &.ddi-table {
    max-width: 1000px;
  }
  &.mando-table {
    max-width: 850px;
  }
}

.budget-table--cell__nowrap {
  white-space: nowrap;
}

.budget-table--input__number-error {
  border: 3px solid #e31c3d;
  border-radius: 5px;
}

/* override our default rule that causes tables to be 100% of parent container */
.table-fit-contents {
  width: auto;
}
/* use on tables in sections where some tables are small, but some aren't so we can standardize width */
.budget-table--col-header__fixed-width {
  width: 175px;
}

tr.budget-table--row__primary-header {
  th,
  td {
    color: $color-white;
    background-color: $color-gray-dark;
    white-space: nowrap;
  }
}

tr.budget-table--row__primary-header__light {
  th,
  td {
    color: #323a44;
    background-color: #d6d7d9;
    white-space: nowrap;
    font-weight: 700;
  }
}

tr.budget-table--row__primary-header {
  th {
    border-right: none;
  }
}

.indent-title {
  padding-left: 3em;
}

.budget-table--col-divider__right {
  border-right: 3px solid #d6d7d9;
}

.budget-table--col-divider__left {
  border-left: 3px solid #d6d7d9;
}

/* Custom borders to support highlighted rows for validation */
.table-error-border-no-bottom {
  border-top: 2px solid $color-error !important;
  border-left: 2px solid $color-error;
  border-right: 2px solid $color-error;
}

.table-error-border-no-top {
  border-bottom: 2px solid $color-error !important;
  border-left: 2px solid $color-error;
  border-right: 2px solid $color-error;
}
