@import "elements.less";
@import "colors.less";

@dashboard-color: @muted-blue;
@dashboard-border-color: darken(@dashboard-color, 5%);

#page-dashboard .panel-heading {
  background-color: @dashboard-color;
  color: #fff;
}

#page-dashboard .panel-heading, #page-dashboard .panel {
  border-color: @dashboard-border-color;
}

.dashboard {
  margin-top: 15px;
  border: 1px solid @color-boxes-complement-3;
  background-color: @color-boxes-content;
  .rounded();
  .box-shadow(0px 0px 5px 1px @color-boxes-primary-0);
}

.dashboardContents {
  padding: 15px;
}

.dashboardHeader {
  letter-spacing: 1px;
  padding: 5px 20px;
  color: #fff;
  background-color: @color-boxes-complement-2; //@color-secondary-2-0;
  .badge {
    background-color: @color-boxes-complement-1;
  }
  a {
    color: #fff;
  }
}

.dashboard .noresults {
  text-align: center;
  font-style: italic;
}

.dashboardContents a {
  color: #3D72A4;
  padding: 5px;
}

.dashboardContents .table {
  margin-bottom: 1px;
}

.upcomingReservationsDashboard {
  .timespan {
    padding: 3px;
    font-style: italic;
    color: #000;
    background-color: @off-white;
    border-bottom: 1px solid @light-gray;
  }

  .reservation {
    padding: 3px 0;
    border-bottom: 1px solid @light-gray;
    margin: 0 3px;
  }

  .reservation.hover {
    cursor: pointer;
    background-color: lighten(@muted-blue, 25%);
    color: #222;
  }

  .reservation.clicked {
    cursor: pointer;
    background-color: #F0F0F0;
  }

  .reservation.pending {
    background-color: #ffb540
  }

  .reservation.pending.hover, .reservation.pending.clicked {
    background-color: #ffc973;
  }
}

.availabilityDashboard {
  .header {
    font-size: 1.2em;
    font-weight: bold;
  }
  .resourceName {
    text-overflow: ellipsis;
    color: @color-secondary-2-3;
    a {
      color: @color-secondary-2-3;
    }
    .rounded(2px);
    padding: 1px;
    display: inline-block;
    margin-right: 2px;
    .fa:last-of-type {
      margin-right: 2px;
    }
    background-color: @color-secondary-2-1;

  }
  .availability {
    text-overflow: ellipsis;
  }
  .reserveButton {
  }
  .availabilityItem {
    padding: 10px 0;
    @btn-color: @color-complement-3;
    .btn {
      background-color: @btn-color;
      color: #fff;
      border-color: darken(@btn-color, 10%);
      padding: 1px 20px;
    }
    .btn:hover {
      background-color: darken(@btn-color, 5%);
      border-color: darken(@btn-color, 15%);
    }
  }

  h5 {
    margin: 0;
    font-weight: bold;
    color: @mid-gray;
  }
}
