@import "retina.less";

.datagrid {
  border-collapse: collapse;
  width: 100%;

  tr {
    background-color: white;

    &.even {
      background-color: #F2F2F2;
    }

    &:hover {
      background-color: #d4e0f3;
    }

    &:hover.headers {
      background-color: transparent;
    }
  }

  td {
    line-height: 1.4em;
    padding: 4px;

    a {
      color: black;
      text-decoration: none;
    }
  }

  th.day {
    background-color: #E9E9E9;
    border-bottom: 1px #999999 solid;
  }
}

.datagrid-header {
  background: url("../images/datagrid/header_bg.png") repeat-x bottom left;
  border-top: 1px #999999 solid;
  border-bottom: 1px #999999 solid;
  border-right: 1px #CCCCCC solid;
  color: black;
  cursor: pointer;
  font-weight: bold;
  padding: 4px;
  text-align: left;
  white-space: nowrap;

  &:hover {
    background: url("../images/datagrid/header_bg_primary.png") repeat-x bottom left;

    a {
      text-decoration: underline;
    }
  }

  a {
    color: black;
    text-decoration: none;

    &.unsort {
      color: #444444;
    }

    &:hover {
      text-decoration: underline;
    }
  }

  img, div {
    vertical-align: middle;
  }
}

.datagrid-header-drag {
  border: 1px #999999 solid;
  border-top: 0;
}

.edit-columns {
  width: 1.2em;
}


/****************************************************************************
 * Titles
 ****************************************************************************/
.datagrid-title,
.datagrid-titlebox {
  background-color: #a2bedc;
  border-bottom: 1px #728eac solid;
  margin: 0;
  padding: 5px 10px 5px 5px;
}

.datagrid-titlebox {
  h1 {
    display: inline;
    font-size: 120%;
    padding-right: 10px;
  }

  ul {
    list-style: none;
    display: inline;
    margin: 0;
    padding: 0;

    li {
      display: inline;

      a {
        color: #0000CC;
      }
    }
  }
}

/****************************************************************************
 * Paginator
 ****************************************************************************/

.datagrid-wrapper .paginator {
  padding: 8px 4px 4px 4px;

  .current-page {
    font-weight: bold;
    padding: 2px 6px;
  }

  .page-count {
    color: #444444;
    margin-left: 10px;
  }

  a {
    border: 1px solid #CCCCCC;
    color: black;
    padding: 2px 6px;
    text-decoration: none;

    &:hover {
      background-color: #9BC0F2;
      border-color: #003366;
      color: black;
    }

    &:visited {
      color: black;
    }
  }
}


/****************************************************************************
 * Column-specific classes
 ****************************************************************************/
.datagrid {
  .age1 {
    background-color: #beedbc;
    border-left: 1px #8bbd5c solid;
    border-right: 1px #8bbd5c solid;
    white-space: nowrap;

    &:hover {
      background-color: #a1cb9f;
    }
  }

  tr.even .age1 {
    background-color: #b4e3b2;
  }

  .age2 {
    background-color: #ddfa8e;
    border-left: 1px #a3e266 solid;
    border-right: 1px #a3e266 solid;
    white-space: nowrap;

    &:hover {
      background-color: #bcd675;
    }
  }

  tr.even .age2 {
    background-color: #d3f084;
  }

  .age3 {
    background-color: #fdf18c;
    border-left: 1px #d8c158 solid;
    border-right: 1px #d8c158 solid;
    white-space: nowrap;

    &:hover {
      background-color: #d9ce74;
    }
  }

  tr.even .age3 {
    background-color: #f3e782;
  }

  .age4 {
    background-color: #fed3a9;
    border-left: 1px #d49659 solid;
    border-right: 1px #d49659 solid;
    white-space: nowrap;

    &:hover {
      background-color: #dab38e;
    }
  }

  tr.even .age4 {
    background-color: #f4c99f;
  }

  .age5 {
    background-color: #fab6b6;
    border-left: 1px #f56363 solid;
    border-right: 1px #f56363 solid;
    white-space: nowrap;

    &:hover {
      background-color: #d69999;
    }
  }

  tr.even .age5 {
    background-color: #f0acac;
  }

  tr.month {
    background-color: #E9E9E9;
  }

  td.summary {
    cursor: pointer;
  }
}

.datagrid-head,
.datagrid-body {
  border-collapse: collapse;
}

.datagrid-menu {
  background-color: #F0F0F0;
  border-left: 1px #303030 solid;
  border-bottom: 1px #303030 solid;
  margin: 0;
  padding: 2px 4px;

  td {
    margin: 2px;

    img, div {
      vertical-align: sub;
    }

    input {
      vertical-align: baseline;
    }
  }

  a {
    color: black;
    text-decoration: none;
  }

  tr:hover {
    .datagrid-menu-checkbox {
      background-color: #E0E0E0;
      cursor: pointer;
    }

    .datagrid-menu-label {
      text-decoration: underline;
    }
  }
}

.datagrid-menu-checkbox {
  border: 1px #C0C0C0 solid;
  height: 1.4em;
  width: 1.4em;

  img {
    display: block;
    margin: 0 auto;
    margin-top: 0.4em;
  }
}

.datagrid-icon {
  background-repeat: no-repeat;
  display: inline-block;
  overflow: hidden;
  text-indent: -99999px;
  vertical-align: middle;

  background-image: url("../images/datagrid/icons.png");
  .at2x('../images/datagrid/icons.png', 66px, 16px);

  // For IE7
  zoom: 1;
  *display: inline;
}

.icon(@name, @x, @y, @width, @height) {
  .datagrid-icon-@{name} {
    background-position: -@x -@y;
    width: @width;
    height: @height;
  }
}

/*
 * NOTE: Keep these in the same order as found in the spritesheet.
 */
.icon(edit, 1px, 1px, 18px, 14px);
.icon(sort-asc-primary, 21px, 2px, 10px, 5px);
.icon(sort-desc-primary, 21px, 9px, 10px, 5px);
.icon(sort-asc-secondary, 33px, 2px, 10px, 5px);
.icon(sort-desc-secondary, 33px, 9px, 10px, 5px);
.icon(unsort, 45px, 2px, 8px, 8px);
.icon(checkmark, 53px, -1px, 12px, 12px);
