/*
 * Define the widths: play around with these 
 * to get a best fit.
 */
@index-width: 25px;
@title-width: 220px;
@comment-width: 120px;
@module-width: 110px;
@reporter-width: 85px;
@status-width: 95px;
@owner-width: 75px;
@severity-width: 80px;
@icon-width: 18px;
@date-width: 110px;
@margin-width: 30px;

/*
 * Basic styles, good for a large display. Everything fits in
 * one row, no wrapping. All text based cells grow equally.
 */
// Main container - row container
.table-row {
  display: flex;          display: -webkit-flex;
  flex-direction: row;    -webkit-flex-direction: row;
  flex-wrap: no-wrap;     -webkit-flex-wrap: no-wrap;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

// Wrappers around cells and other wrappers
.wrapper {
  display: flex; display: -webkit-flex;
  flex-direction: row; -webkit-flex-direction: row;
}

// leaf level containers (cells): common properties 
.column {
  flex-grow: 0; -webkit-flex-grow: 0;
  flex-shrink: 0; -webkit-flex-shrink: 0;
  vertical-align: top;
}

// leaf level containers: widths
.index { width: @index-width; }
.title { width: @title-width; }
.module { width: @module-width; }
.reporter { width: @reporter-width; }
.status { width: @status-width; }
.owner { width: @owner-width; }
.severity { width: @severity-width; }
.watch, .add-comment { width: @icon-width; }
.date { width: @date-width; }

// leaf level containers (cells): special properties 
.index {
  text-align: center;
}

.title {
  font-weight: bold;
  color: #337AB5;
}

.comment {
  width: @comment-width;
}

// these are growable text containers, with ellipsis to show truncated text
.title, .comment {
  flex-grow: 1; -webkit-flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 4px;
}

.date {
  width: @date-width;
  text-align: right;
  padding-right: 4px;
}

/* growable wrappers */
.title-comment, .title-comment-module-reporter, .attributes {
  flex-grow: 1; -webkit-flex-grow: 1;
}

/*
 * Media queries: optimize for different screen widths.
 */

// Wrapper widths
@title-comment-width: max(@title-width, @comment-width);
@module-reporter-width: max(@module-width, @reporter-width);
@status-owner-width: max(@status-width, @owner-width);
@title-comment-module-reporter-width: max(@title-width, @comment-width,
  (@module-width + @reporter-width) );
@status-owner-severity-width: max(@status-width, @owner-width, 
  @severity-width);
@all-attributes-width: max(@title-width, @comment-width, 
  (@module-width + @reporter-width), (@status-width + @owner-width));

.horizontal() {
  flex-direction: row;        -webkit-flex-direction: row;
}

.vertical() {
  // Let the wrapper flex vertically, so we get 2 rows
  flex-direction: column;     -webkit-flex-direction: column;
  // can't have the children grow, since this now means vertical growth
  div {
    flex-grow: 0;  -webkit-flex-grow: 0;
  }
}

.vertical-growing() {
  .vertical();
  > div {
    // Let immediate child divs grow horizontally, 100% to fill the wrapper
    width: 100%;
  }
}

/*
 * Media breaks.
 */

// First break: as many 2-row fields as possible. This will leave Severity
// and Dates still horizontal, as they are odd numbered
@media all and (max-width: (@margin-width * 2 + @index-width
  + @title-width + @comment-width + @module-width + @reporter-width
  + @status-width + @owner-width + @severity-width + @icon-width * 2
  + @date-width * 3) ) {

  .title-comment {
    .vertical-growing();
    width: @title-comment-width;
  }
  .module-reporter, .status-owner {
    .vertical();
  }
}

// Next: as many 3-rows as possible
@media all and (max-width: (@margin-width * 2 + @index-width
  + @title-comment-width + @module-reporter-width
  + @status-owner-width  + @severity-width
  + @icon-width * 2 + @date-width * 3) ) {

  // Change module-report back to horizontal, keep it under title and comment
  // So, we have 3 rows: title, comment, module-reporter
  .module-reporter {
    .horizontal();
  }
  .title-comment-module-reporter {
    .vertical-growing();
    width: @title-comment-module-reporter-width;
  }

  // Line up status, owner, severity into the next column
  .status-owner-severity {
    .vertical();
  }
  // Line up all icons in one column, even though there's only two of them
  .icons {
    .vertical();
  }
  // Line up all dates in one column
  .dates {
    .vertical();
  }
}

// Last break: 4 columns: index, attributes, icons, dates
@media all and (max-width: (@margin-width * 2 + @index-width
  + @title-comment-module-reporter-width + @status-owner-severity-width
  + @icon-width + @date-width) ) {

  // looks better with a little padding on mobile devices
  .table-row {
    padding-left: 4px;
    padding-right: 4px;
  }

  // All attributes: title, comment, module-reporter, status-owner, severity
  .attributes {
    .vertical-growing();
    width: @all-attributes-width;
  }
  .module-reporter, .status-owner {
    .horizontal();
  }
}

/*
 * General good-look styles
 */
.table-row {
  border-bottom: 1px solid #e0e0e0;
  border-collapse: collapse;
  padding-top: 2px;
}

.table-row.header {
  background-color: #FFEEDB;
  font-weight: bold;
  padding-top: 6px;
  padding-bottom: 6px;
}

.glyphicon {
  color: #DDDDDD;
}

.header .glyphicon {
  color: #333
}

.glyphicon-eye-open.active {
  color: blue;
}

.glyphicon-comment.active {
  color: #3EBB0D;
}

.glyphicon:hover {
  color: #666;
  cursor: pointer;
  text-decoration: underline;
}

.reporter {
  color: #999999;
}
.comment {
  font-style: italic;
}

.severity.high { color: red; }
.severity.medium { color: blue; }
.severity.low { color: green; }