// WARNING: this is just a magic value, I do not know why it works
$table-columns-width: 17em;
$search-header-width: 110px;

table {
  td, th {
    height: 2.6em;
    line-height: 1.5;
    vertical-align: middle;
    text-align: left;
    padding: 0 0 0 0;

    &.u-underline {
      border-bottom: 1px solid $border-color;
    }
  }
}


table.data {
  margin-bottom: 24px;
  margin-top: 12px;
  width: 100%;

  a.is-inline {
    display: inline;
    text-decoration: underline;
    padding: 0 0 0 0;
  }

  a {
    display: block;
    line-height: 1.5;
    margin: 0 5% 0 0;
    padding: 6px 0;
    width: 95%;
  }

  thead {
    vertical-align: middle;

    tr.search { background-color: $table-search-background-color;  }

    th {
      padding: 6px 0 6px 0;
      border-bottom: 1px solid $border-color;
      font-size: 14px;
      &.actions, &.right { text-align: right; }

      a.button { font-size: 10px }

      a.down {
          background: url(../images/arrow_down.gif)  no-repeat 100% 55%;
          padding-right: 10px;
      }

      a.up {
          background: url(../images/arrow_up.gif) no-repeat 100% 55%;
          padding-right: 10px;
      }

      a {
        &.up, &.down {
          padding-right: 0;
          background: none;
        }
      }

    }
  }

  tbody {
    tr.even, tr:nth-child(2n) { background: $tr-even-color; }
    tr.odd,  tr:nth-child(2n-1) { background: $tr-odd-color; }
    a.button { font-size: 10px }

    td.actions {
      text-align: right;
    }
  }
}

.u-fiveEqualColumns {
  td,
  th {
    width: 20%;
  }
}

.u-sixEqualColumns {
  td,
  th {
    width: 16.67%;
  }
}

table.data, table.list {
  td, th {
    max-width: $table-columns-width;
    word-wrap: break-word;

    input, select {
      max-width: $search-header-width;
    }
 }
}

table#keys td {
  max-width: none;

  // if they are part of another table
  table & {
    padding-left: 0;
    padding-right: 0;
  }
}

// fit long keys to the table, reduce width of the heading
#application_keys table th {
  max-width: 4em;
}

// with long keys links can break to two lines
#application_keys table {
  .button-to {
    white-space: nowrap;
  }
}

table.mini td {
  padding-right: 24px;
}

table.mini, table#configs {
  width: auto;
}


/* --- components/tables.css --- */




table.list, table.data {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 3px;
  margin-top: 3px;
}

td.right {
  text-align: right;
}

td.right.action { width: 10px; }

td.operations {
  //text-align: right;
}

table.payment_breakdown tr.total_cost th, table.payment_breakdown tr.total_cost td {
  border-top: 2px solid #888;
  border-bottom: 2px solid #888;
  padding-top: 5px;
  padding-bottom: 5px;
}

table.payment_breakdown tr th {
  border-width: 1px;
  border-color: $border-color;
}

table .select {
  min-width: 1.5em;
}

table.data td, table.horizontal th {
  border-bottom: 1px solid $border-color;
}

table.list th {
  padding-right: 10px;
}

table.inverted th {
  font-weight: normal;
}

table.inverted td {
  font-weight: bold;
}


table#contracts_table {
  position: relative;
}


table#contracts_table ul.usage_limits {
  list-style: none;
  padding: 0;
}


table#contracts_table tr td.thhead {
  padding-top: 0;
  padding-right: 0;
  margin: 6px;
  -webkit-border-top-right-radius: 25px;
  -webkit-border-top-left-radius: 25px;
  -moz-border-radius-topleft: 25px;
  -moz-border-radius-topright: 25px;

}

td.thhead h3 {
  margin-top: 0;
  padding-right: 16px;
  padding-top: 20px;
}

.u-amount {
  text-align: right;
}

.u-tabular-number {
  font-family: 'Source Code Pro', 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', Courier, monospace;
}
