//
// Core
// --------------------------------------------------

// See https://docs.angularjs.org/api/ng/directive/ngCloak
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

// Prevent zooming when focusing input fields in mobile Safari. Try to only
// target mobile devices to avoid larger-than-wanted fonts elsewhere.
@media only screen and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 0) {
  input[type="text"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  select.form-control,
  textarea,
  .console-os .ace_editor {
    font-size: 16px;
  }

  // Fix Bootstrap modal dialog zoom on the iPhone
  // See http://stackoverflow.com/questions/32675849/screen-zooms-in-when-a-bootstrap-modal-is-opened-on-ios-9-safari
  body {
    padding-right: 0px !important
  }
  .modal-open {
    overflow-y: auto;
  }
}

.console-os {
  .wrap > .container { // For projects list page
    margin-top: 35px;
    margin-bottom: @grid-gutter-width * 2;
    h1 {
      margin: 10px 0 20px;
    }
  }
}
.console-os {
  .page-header {
    border-color: @page-header-border-color;
    margin-bottom: 3px;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    .actions {
      margin-top: 0;
    }
  }
}
@media (min-width: @screen-md-min) {
  .console-os {
    .page-header.page-header-bleed-left {
      margin-left: -30px;
      padding-left: 30px;
      margin-right: -30px;
      padding-right: 30px;
    }
    .middle .container-fluid {
      margin-left: 10px;
      margin-right: 10px;
    }
  }
}

// Firefox-specific hack for preventing fieldset content causing the container to expand
// see: https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685
@-moz-document url-prefix() {
  .console-os fieldset {
    display: table-cell;
  }
}

/* Data toolbar
   - Includes customizations for label filter input and active filter
---------------------------------------------------------------------------- */
.data-toolbar {
 .flex-display(@display: flex);
 .flex(@columns: 1 0 0%);
 .flex-wrap(@wrap: wrap);
 padding: 3px 0 1px;
 .data-toolbar-filter {
   .flex-display(@display: flex);
   .flex(@columns: 1 0 0%);
 }
 .data-toolbar-views {
   .flex(@columns: 0 0 55px);
   text-align: right;
 }
}
.filter .navbar-filter-widget {
 @media(min-width: @screen-sm-min) {
   white-space: nowrap; // prevent button wrap in Safari when not at mobile resolutions
 }
 .label-filter-add.btn {
   margin-right: 0;
 }
 @media (min-width: @screen-md-min) {
   .selectize-input.not-full {
     width: 300px !important;
   }
 }
}
@media (max-width: @screen-xs-max) {
 project-filter {
   width: 100%; // Extends flex container full width of flex parent
 }
 .filter .navbar-filter-widget .label-filter {
   min-width: initial;
   width: 80%; // Width of the input field that allows for the 'add' button to be appended down to 320px
 }
 .filter .navbar-filter-widget .selectize-input {
   width: auto !important;
 }
}
.navbar-filter-widget-collapse .form-group {
 margin-bottom: 0;
}
.active-filters {
 line-height: 0;
 .label-filter-active-filters {
   padding-bottom: 3px;
   .label {
     max-width: none;
     word-break: break-all;
   }
 }
}

.separator {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.breadcrumb {
  font-size: @font-size-base - 1;
  padding-bottom: 0;
  strong {
    font-weight: 600;
  }
}

.tile.tile-project h2 {
    padding: 10px 0;
    margin: 0;
}
.nav-tabs {
  // Use Patternfly secondary tab style on tabs
  // https://www.patternfly.org/widgets/#tabs
  .nav-tabs-pf;
}

.nav-tabs, .tab-content {
  margin-bottom: @grid-gutter-width / 2;
  margin-top: @grid-gutter-width / 2;
}

.hide-tabs .nav-tabs {
  display: none;
}

.empty-project {
  margin: 10px auto;
  max-width: 500px;
  padding: 30px;

  // Make sure icons are the same size so text aligns.
  .fa {
    width: 16px;
    text-align: center;
  }
  dd {
    margin-left: 20px;
    margin-bottom: 10px;
  }
}

.empty-state-message {
  margin: 60px auto @grid-gutter-width;
  max-width: 600px;
  padding: 0 (@grid-gutter-width / 2);
  .btn {
    margin: 10px 0 20px;
  }
}

.empty-state-message.empty-state-full-page {
  @media (min-height: 500px) {
    margin-top: 150px;
  }
}

.service-table {
  .text-center;
  max-width: 650px;
  thead {
    tr th {
      .text-center;
    }
  }
}

.events-table {
  .pficon {
    vertical-align: middle;
  }
  .severity-icon-td {
    padding-left: 0;
    padding-right: 0;
  }
}

.build-config-summary {
  .latest-build-status {
    margin-right: 5px;
    .status-icon {
      width: 20px;
    }
  }
  // Indent icon width to align with text above.
  .latest-build-timestamp {
    margin-left: 25px;
  }
}

.image-sources {
  .source-path:after,
  .destination-dir:before {
    content: "\00a0 ";
  }
}

// The chart gets too compressed at narrow widths. Use an approach
// similar to table-responsive on mobile where the user can scroll.
.build-trends-responsive {
  width: 100%;
  margin-top: 20px;
  overflow: auto;
  .build-trends-container {
    min-width: 600px;
    height: 235px;
    // Set initial tooltip position to 0, 0 to avoid scrollbars flickering when
    // c3 first shows the tooltip, but hasn't positioned it.
    // (Doesn't change tooltip positioning.)
    .c3-tooltip-container {
      top: 0;
      left: 0;
    }
    // Disable the gray vertical line when hover over a bar.
    .c3-xgrid-focus {
      display: none;
    }
    .build-trends-avg-line {
      stroke: #d1d1d1;
      stroke-dasharray: 8,5;
      stroke-width: 1;
    }
    .avg-duration {
      margin-right: 30px;
    }
    .avg-duration-text {
      vertical-align: top;
      // same as c3-legend
      font-size: 12px;
    }
    @media (max-width: @screen-xs-max) {
      // Show a border at mobile screen widths so it's obvious you can scroll.
      border: 1px solid #d1d1d1;
      padding: 10px 0;
    }
  }
}


.pod-metrics {
  .metrics-options {
    .form-group {
      margin-bottom: 0;
    }
    .select-container {
      display: inline-block;
    }
    @media (min-width: @screen-sm-min) {
      .form-group {
        display: inline-block;
      }
      .select-container {
        margin-right: 10px;
      }
    }
  }
  .metrics-chart {
    // The utilization chart floats some elements, so this is needed for proper padding.
    clear: both;
    max-width: 800px;
    padding-top: 5px;
  }
}

.quota-chart {
  margin: 0 20px;
}


// Create App
// --------------------------------------------------

label.checkbox {
  font-weight: normal;
}

.form-group .checkbox {
  // Use the default form-group margin for consistency. Otherwise the
  // checkboxes are closer than other form elements.
  margin-bottom: inherit;
}

// Make sure icons are the same size so headings align.
.add-to-project {
  .catalog-legend {
    dt, dd {
      display: inline;
    }
    dt:before {
      content: "";
      display: block;
    }
    dd:before {
      // dash and space
      content: '\2014\00a0';
    }
  }

  .filter-group {
    line-height: 1.75;
    margin: 15px 0 10px;
    .search-input, .btn-group {
      display: inline-block;
      margin-bottom: 10px;
      vertical-align: top;
    }
    .search-input {
      width: 100%;
      @media (min-width: @screen-sm-min) {
        width: 400px;
      }
    }
  }
  @media (min-width:@screen-sm-min) {
    // Line up the description and filter controls with left column tiles.
    .catalog-header-left {
      padding-right: 10px;
    }
    // Line up catalog with right column tiles.
    .catalog-legend {
      padding-left: 15px;
    }
  }
  @media (min-width:@screen-md-min) {
    // Line up the description and filter controls with left column tiles.
    .catalog-header-left {
      padding-right: 15px;
    }
  }
}

.icon-xl {
  font-size: 128px;
}

.create-route-icon,
.create-storage-icon {
  padding-top: 0;
  text-align: right;
}

.about,
.command-line {
  .about-icon {
    img {
      width: 100%;
    }
  }
}

.create-from-template,
.create-from-image {
  .template-name {
    text-align: right;
    span.fa {
      font-size: 40px;
    }
    @media (min-width: @screen-sm-min) {
      span.fa {
        font-size: 100px;
      }
    }
  }
  span.fa.visible-xs-inline {
    margin-right: 10px;
  }
  .flow {
    .separator;
    display: table;
    margin-top: @grid-gutter-width;
    width: 100%;
    > .flow-block {
      display: inline-block;
      &.right {
        font-size: @font-size-small;
        font-weight: normal;
      }
      .action {
          font-size: @font-size-small;
          font-weight: normal;
          // &:extend(.action-inline);
        }
      > ul.list-inline {
        margin-bottom: 0;
        > li {
          font-size: @font-size-small;
          text-align: left;
        }
      }
    }
  }
  .first-section .flow {
    margin-top: (@grid-gutter-width / 2);
    border-top: 0;
  }
  .template-options {
    line-height: 1.5;
    .list-unstyled {
      .options {
        margin-bottom: 12px;
      }
      .help-block {
        margin: 0 0 5px 2px;
      }
    }
    .form-group {
      width: 100%;
      max-width: 600px;
    }
    .help-block {
      margin-bottom: 5px;
    }
  }
}

@media (max-width: @screen-xs-max) {
  .compute-resource .inline-select {
    // Spacing below input at mobile sizes.
    margin-top: 5px;
  }
}

.next-steps {
  .tile {
    margin-bottom: 0;
    &.tile-status {
      margin-top: 0;
    }
  }
}

.catalog-col section {
  margin-bottom: 10px;
  > h3 {
    margin-top: 0;
    small {
      font-size: @font-size-base;
    }
  }
}
@media (min-width:@screen-sm-min) {
  .catalog-col-2 {
    margin-left: 3%;
  }
}

.tag {
  color: #999999;
  text-transform: uppercase;
  margin-right: 10px;
}

.catalog {
  .flex-display(@display: flex);

  // Stack at mobile screen sizes
  .flex-direction(@direction: column);

  .tile-template, .tile-image {
    width: 100%;
    a.tag {
      text-decoration: none;
      &:hover {
        color: black;
        background: #dfdfdf;
        text-decoration: none;
      }
    }
  }

  // Arrange in columns >767px
  @media (min-width: @screen-sm-min) {
    .flex-direction(@direction: row);
    .flex-wrap(@wrap: wrap);
    .justify-content(@justify: flex-start);
    // remove ie prefixes when PostCSS Autoprefixer is included for github issue #7559
    -ms-flex-pack: start;

    .tile-template, .tile-image {
      .flex(@columns: 1 0 auto);
      width: 100%;
      margin-right: (@grid-gutter-width / 2);
    }
    &.catalog-fluid {
      .tile-template, .tile-image {
        width: 375px;
      }
    }
  }
}

@create-form-md-width: 44%;
@media (min-width: 767px) {
  .create-from-template,
  .create-from-image {
    .flow > .flow-block {
      display: table-cell;
      &.right {
        // float: right;
        text-align: right;
      }
    }
    .labels .form-group {
      // Show name/value fields like labels and env vars side by side at wide screen sizes.
      // Align text fields with read-only values.
      width: @create-form-md-width;
      .form-control {
        width: 100%;
      }
    }
  }
}

.label-list li,
.env-variable-list li {
  &:first-child {
    padding: 6px 0 0;
  }
  .key,
  .value {
    display: inline-block;
    margin: 0;
    width: 44%;
  }
  .value {
    max-width: 500px; // enable firefox to truncate
  }
  .btn {
    vertical-align: top;
  }
}

.label + .label {
  margin-left: 3px;
}

.resource-description {
  .word-break();
  .pre-wrap();
}

// Misc
// TODO: pull out into _partials where it makes sense
// --------------------------------------------------
.action-inline {
  margin-left: @action-link-inline-margin;
  font-size: @font-size-small;
  i.pficon, i.fa {
    color: @btn-default-color;
    margin-right: 5px;
  }
}

.project-summary {
  .flex(@columns: 1 0 90%);
  max-width: 90%; // enable truncation without offsetting delete icon
}
.project-delete {
  width: 50px;
}

label.required:before {
  content: '*';
  position: absolute;
  left: 10px;
}

.btn-xs {
  padding: 0 4px;
}
.btn-lg, .btn-group-lg > .btn {
  line-height: 1.334; // needed to make same height as inputs
}

code {
  white-space: normal;
}

pre,
div {
  &.code {
    background-color: #fff;
    border: none;
    border-left: 2px solid rgb(204, 204, 204);
  }
}

div.code {
  &:extend(pre);
}

[data-toggle="tooltip"] {
  cursor: pointer; // so tooltips get correct cursor
}

// Fix to override the Firefox 40+ behavior to add text-decoration
// No other browser does this.
abbr[data-original-title], abbr[title] {
  text-decoration: none;
}

.dl-horizontal {
  &.left {
    dt {
      text-align: left;
    }
  }
  &.indent {
    margin-left: (@grid-gutter-width / 2); // 20px
  }
  dd {
    &:extend(.clearfix all); // Including this here because it's not being set even though it's in /bootstrap/less/type.less dunno why?
  }
  // FIXME: We should just set @dl-horizontal-breakpoint when we upgrade Bootstrap to 3.3.6.
  // We want the definition list to display side-by-side after a smaller breakpoint than @screen-sm-min.
  // Temporarily use the same styles as in
  //   https://github.com/twbs/bootstrap/blob/5ea03fa259ccac4c7ea72f0a19b57f77957fe55d/less/type.less#L214-L225
  @media (min-width: 415px) {
    dt {
      float: left;
      width: (@dl-horizontal-offset - 20);
      clear: left;
      text-align: right;
      .text-overflow();
    }
    dd {
      margin-left: @dl-horizontal-offset;
    }
  }
}

.gutter-top-bottom {
  padding: @grid-gutter-width / 2 0;
  &.gutter-top-bottom-2x {
    padding: @grid-gutter-width 0;
  }
}
.gutter-top {
  padding-top: @grid-gutter-width / 2;
  &.gutter-top-2x {
    padding-top: @grid-gutter-width;
  }
}
.gutter-bottom {
  padding-bottom: @grid-gutter-width / 2;
  &.gutter-bottom-2x {
    padding-bottom: @grid-gutter-width;
  }
}

select:invalid {
    box-shadow: none;
}

.truncate {
  // Bootstrap mixin
  // Note: If truncating within a flex container then the parent needs a width
  .text-overflow();
}

.word-break {
  .word-break();
}

.nowrap {
  white-space: nowrap;
}

.well > {
  h1, h2, h3, h4, h5 {
    &:first-child {
      margin: 5px 0 15px;
    }
  }
}

.spinner.spinner-xs { // set height & width to 12px so that FF displays correctly
  height: 12px;
  width: 12px;
}

.spinner.spinner-inverse {
  border-color: rgba(0,153,211, .25);
  border-top-color: rgba(0,153,211, .75);
}

.attention-message {
  background-color: lighten(@brand-primary, 50%);
  border: 1px solid darken(@brand-primary, 10%);
  position: absolute;
  left: 50%;
  margin-top: 100px;
  transform: translateX(-50%);
  padding: 1em 1em 2em;
  min-width: 85%;
  h1,p {
    text-align: center;
  }
  p {
    max-width: 70em;
    margin: auto;
  }
}

.learn-more-block {
  display: block;
  font-size: @font-size-small;
  font-weight: normal;
}

.short-id {
  background-color: #f1f1f1;
  color: #666;
}

.input-number {
  width: 60px;
}

.alert {
  margin-bottom: 14px;
  margin-top: 7px;
}

.action-button {
  color: @gray-light;
  cursor: pointer;
  &:hover {
    color: #000;
  }
}

a.action-button {
  &:hover, &:active, &:focus {
    text-decoration: none;
  }
}

// Use with aria-disabled="true" and role="button"
a.disabled-link {
  color: #bbbbbb;
  cursor: not-allowed;
  opacity: 0.4;
  &:hover, &:active, &:focus {
    color: #bbbbbb;
    text-decoration: none;
  }
}

.actions-dropdown-btn {
  margin-left: 5px;
}

.actions-dropdown-kebab {
  .action-button;
  // Bigger click target for the dropdown icon, which is a narrow ellipsis
  padding: 0 10px;
  vertical-align: middle;
}

.modal-resource-delete, .modal-confirm-scale {
  background-color: @gray-lighter;
  h1 {
    font-size: 21px;
    font-weight: 500;
    margin-bottom: 20px;
    .word-break();
  }
  p {
    font-size: @font-size-large + 1;
  }
}

// Disable numeric highlighting in YAML and Dockerfile modes because of bugs
.editor.yaml-mode .ace_constant.ace_numeric, .ace_editor.dockerfile-mode .ace_constant.ace_numeric {
  color: inherit;
}

.modal-resource-edit {
  .editor {
    font-family: @font-family-monospace;
    line-height: 1.5;
    width: 100%;
    min-height: 100px;
    .ace_gutter {
      color: #8b8d8f;
    }
  }
  .modal-header {
    h2 {
      // Don't wrap at narrow screen widths.
      .truncate();
      // Avoid clipping descenders with .truncate()
      line-height: 1.4;
      margin: 10px;
      .fa {
        color: #4d5258;
        margin-right: 5px;
      }
    }
  }
  .modal-body {
    border-top: 1px solid #bbbbbb;
    border-bottom: 1px solid #bbbbbb;
    padding: 0;
    .alert {
      margin: 10px;
      &:not(.ng-hide) + .ace_editor {
        border-top: 1px solid #bbb;
      }
    }
  }
  .modal-footer {
    margin-top: 0;
  }
}

.dockerfile-editor {
  height: 200px;
}

.edit-form {
  .labels {
    .form-group {
      width: 44%;
      .form-control {
        width: 100%;
      }
    }
  }
  .checkbox {
    margin: 10px;
  }
  .section {
    padding-bottom: 15px;
  }
  @media (max-width: @screen-sm-min) {
    .labels {
      .form-group {
        width: 100%;
      }
    }
  }
}

.status {
  min-width: 130px;
  .status-icon {
    margin-right: 6px;
    width: 13px;
    text-align: center;
  }
}
pre.clipped {
  display: inline-block;
  margin-top: 10px;
  max-width: 100%;
}

.k8s-label {
  margin-right: 5px;
  // A bit more space below the actions button.
  margin-top: 3px;
  &:before {
    content: ' ';
    white-space: normal;
  }
  .label-pair {
    margin-bottom: 2px;
  .label {
    &:first-child {
      border-radius: 2px 0 0 2px;
    }
    &:last-child {
      border-radius: 0 2px 2px 0;
    }
  }
  .label-key {
    background-color: #bee1f4;
    color: #00659c;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-left: 0;
    font-size: 12px;
  }
  // if its a link
  a.label-key {
    &:hover, &:focus, &:active {
      background-color: #00659c;
      color: #FFFFFF;
    }
  }
  .label-value {
    background-color: #7dc3e8;
    color: #FFFFFF;
    margin-left: 0;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 12px;
  }
  a.label-value {
    &:hover, &:focus, &:active {
      background-color: #00659c;
    }
  }
  }
}
@media (max-width: @screen-sm-min) {
  .k8s-label {
  // enable label to truncate
    width: 100%;
    .label {
      display: block;
      min-width: 50px;
    }
    .label-pair {
      width: 100%;
    }
  }
}

labels + .resource-details {
  margin-top: 10px;
}

[flex].page-header {
  // reduced for consistency if used with flex
  margin-top: 21px;
}

.resource-details h3 {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

h1 small.meta, .build-config-summary .meta {
  font-size: 12px;
  @media (max-width: @screen-xs-min) {
    display: block;
    margin-top: 5px;
  }
}

.ace_editor-bordered {
  border: 1px solid #999999;
}

.action-divider {
  color: @gray-light;
}

.environment-variables {
  &.table.table-bordered > tbody > tr > td:first-child {
    font-weight: bold;
    padding-right: 10px;
    vertical-align: top;
  }
  &.table.table-bordered > tbody > tr > td:last-child {
    word-break: break-all;
    width: 100%;

    .env-var-value {
      font-family: @font-family-monospace;

      a {
        font-family: @font-family-base;
      }
    }
  }
}

.pretty-json {
  font-family: @font-family-monospace;
  white-space: pre-wrap;
}

.warnings-popover {
  cursor: help;
  vertical-align: middle;
}
