/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
 
 @import "../../node_modules/@teamsnap/teamsnap-ui/src/css/teamsnap-ui.scss";
 @import url('/font/helvetica-now/stylesheet.css');
 

$color-success: #b7e1cd;
$color-danger: #f4c7c3;
$color-neutral: #acc9fe;
$color-warning: rgb(249, 228, 180);
$color-grey-100: #f8f9fa;
$color-grey-200: #e9ecef;
$color-grey-300: #dee2e6;
$color-grey-400: #ced4da;
$color-grey-500: #adb5bd;
$color-grey-600: #6c757d;
$color-grey-700: #495057;
$color-grey-800: #343a40;
$color-grey-900: #212529;
$row-height: 14px;
$monospace-font: "Inconsolata", monospace;


 // Components
 @import "components/progress";
 
:root {
  --bc-text-muted:#6c757d;
  --bc-avail-color-yes: $cu-positive;
  --bc-avail-color-no: $cu-negative;
  --bc-avail-color-maybe:#113b63;
}

.availability-bar {
  &.going {
    background-color: $ts-green;
  }

  &.not-going {
    background-color: $ts-red;
  }

  &.maybe {
    background-color: $ts-blue;
  }

  &.unknown {
    background-color: $ts-grey;
  }
}

header {
  background: #323669;
  padding: 8px 0;
  // margin: 0 0 16px 0;
  box-shadow: 0 4px 0 rgba(0, 0, 25, 0.1);
  border-bottom: 1px solid #d6d6d6;
  color: white;
  text-decoration: none;

  .Header-banner {
    display: flex;
    justify-content: center;
  }

  .filler {
    flex-grow:1,
  }

  :has(>.Header-bannerLogo):has(>.Header-bannerTitle) {
    display: inline-flex
  }

  .Header-bannerLogo, .Header-bannerTitle {
    margin: 0;
    padding: 0;
    margin-left: 0.5em;
  }
  
  .Header-bannerLogo img {
    height: 36px;
    width: auto;
  }
  
  .Header-bannerTitle {
    font-family: "Helvetica", sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    text-align: left;
    color: white;
    font-size: 28px;
  }

}

.btn--Full {
  display: block;
  width: 100%;
  text-align: center;
}

body {
  background-color: rgb(246, 246, 246);
}

/* .u-padSm.u-border.u-borderRadiusLg.u-spaceEndsSm.u-maxWidthXs */

.event-card {
  font-family: "Open Sans", Helvetica, sans-serif;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  max-width: 480px;
  margin-top: 8px;
  margin-bottom: 8px;
  background: white;

  .title {
    margin-bottom: 4px;
  }

  .event-card-body {
    padding: 8px 8px 8px 8px;
  }
}

.event-card-body {
  > .availability-bar {
    margin: 4px;

    &.fullwidth {
      margin-top: 4px;
      margin-bottom: -8px;
      margin-left: -8px;
      margin-right: -8px;
    }
  }

  .availability-bar.fullwidth .progress {
    margin-left: -8px;
    margin-right: -8px;
    border-radius: 0;
  }
}

.event-card {
  .date, .location {
    color: #7a7a7a;
    font-size: 0.9em;
  }

  .opponent {}

  .Button span {
    margin-left: 4px;
  }

  .event-card-footer {
    padding: 8px;
    border-radius: 0px 0px 8px 8px;
    background-color: rgb(251, 251, 251);
    border-top: solid 1px rgb(214, 214, 214);
  }
}

.event-card-footer div {
  text-align: center;
}

a.Panel-row {
  color: inherit;
}

.lineup-slot .Panel-cell {
  display: inline-flex;
  align-items: center;
}

div.event-lineup {
  max-width: 576px;
  counter-reset: lineup-sequence-counter 0;
  margin-left: 8px;
  margin-right: 9px;
}

.lineup-slot {
  counter-increment: lineup-sequence-counter 1;

  .Panel-cell {
    &.Panel-cell--header {
      background: rgba(256, 256, 256, 0);
    }

  }

  [class*="availability-status-code"]::before {
    padding-right: 6px;
    font-family: "bootstrap-icons";
  }
}

.lineup-slot .availability-status-code-1 .icon {
  color: $ts-green;
}

.lineup-slot .availability-status-code-2 .icon {
  color: $ts-blue;
}

.lineup-slot .availability-status-code-0 .icon {
  color: $ts-red;
}

.lineup-slot {
  .availability-status-code-nil .icon, .availability-status-code- .icon {
    color: $ts-grey;
  }
}

li .availability-status-code- {
  content: "\F50B";
  color: var(--bs-secondary);
}

.lineup-slot {
  line-height: 100%;
  vertical-align: middle;
  span {
    margin:auto;
  }
  .lastname {
    text-transform: uppercase;
    font-weight: bold;
  }

  .jerseynumber {
    text-transform: uppercase;
    font-weight: light;
    color: var(--bc-text-muted);
    font-size: 0.8em;

    // &::before {
    //   content: "-";
      // margin-right: 4px;
      margin-left: 4px;
    // }
  }

  button {
    margin-right: 0.5ch;
  }
  .sequence {
    width: 2.4ch;
    text-align: right;
    margin-right: 0.3ch;

    &::before {
      content: counter(lineup-sequence-counter);
    }
  }

  .drag-handle {
    width: 2ch;
  }

  .position-select-box {
    width: 11ch;
  }

  .Panel-cell {
    &:has(.sequence), &:has(.drag-handle), &:has(.position-select-box) {
      flex: 0 0 0% !important;
      padding: 0;
    }
  }
  
}

div.event-lineup {
  .lineup-segment {
    &:has(input.Toggle-input:not(:checked)) {
      &.out {
        .Panel-cell:has(.SelectBox), 
        .Panel-cell:has(.drag-handle), 
        button:has(+.position-label-flags), 
        button.addToStarting, 
        button.addToBench
        {
          display: none;
        }
      }
    }
    &.bench, &.position-only, &.out {
    .Panel-cell:has(.sequence) {
      display: none;
    }
    &.bench button.addToBench {
      display: none;
    }
  }
  &.starting button.addToStarting, &.position-only button.addToStarting {
    display: none;
  }
  }
}
  
.Tooltip:after {
  padding: 2px !important;
  font-size: inherit !important;
}

@media (max-width: 480px){
.Panel--full {
    border-radius: 0;
    // margin-right: -16px;
    // margin-left: -16px;
    border-right: none;
    border-left: none;
}}

.lineup-email {
  font-family: "Helvetica", sans-serif;
  
  .title-cell {
    font-weight:bold;
    background-color:#323669;
    color:#fff;
    padding:2px 5px;
    text-transform: uppercase;
    
    &.out {
      background-color: rgb(244, 199, 195);
      color: black;
    }
  }
  
  .sequence-cell {
    font-weight:bold;
    padding: 1px 5px;
    text-align: left
  }
  
  .name-cell {
    width:200px;
    text-align: left;
  }

  .position-label-cell {
    font-weight: bold;
    text-align: right;
  }
}


.Panel .Panel{
  // padding: 0;
  // border-radius: 0;
  // border: none;
  // border-top: 1px solid #d6d6d6;
  // border-bottom: 1px solid #d6d6d6;
  margin: 8px;
}

.scroll-horizontal {
  overflow-x: scroll;
}

button:has(+.position-label-flags :checked) {
  @extend .Button--blue
}