﻿/*$brand-bg: #edf2f9;
$brand-color: #0D79F2;
$brand-primary: #0D79F2;
$brand-dark-primary: #004899;
*/
:root {
  --position-Floor: var(--bs-success);
  --position-Bartender: #6f42c1;
  --position-Front: #004899;
  --position-Kitchen: #ff7900;
  --position-Barback: #6c757d;
  --position-Event: var(--bs-warning);
}

/*

    This cheduler works as follows:

    scheduler - wraps the overall schedule
    every row in a scheduler contains an inner div that represents each day in the current view
    div > a single div that will span as needed for what's being displayed.


*/
.scheduler {
  height: fit-content;
  width: fit-content;
}
.scheduler .scheduler-row {
  display: flex;
  border-bottom: 1px dotted #999;
  --width: 30px;
  /*        &:nth-child(even) {
      background-color: var(--bs-gray-400);
  }

  &:nth-child(odd) {
      background-color: var(--bs-gray-200);
  }*/
}
.scheduler .scheduler-row:hover {
  background-color: #666;
}
.scheduler .scheduler-row:hover > div:first-child {
  background-color: #666;
  color: #fff;
}
.scheduler .scheduler-row.scheduler-header > div {
  background-color: var(--bs-gray-200);
  font-weight: bold;
  font-size: 0.9rem;
}
.scheduler .scheduler-row.scheduler-footer > div, .scheduler .scheduler-row.scheduler-footer > div:first-child {
  background-color: var(--bs-gray-700);
  color: #fff;
  font-weight: bold;
  font-size: 0.8rem;
}
.scheduler .scheduler-row.position-row {
  background-color: yellow;
  font-weight: bold;
  font-size: 0.9rem;
}
.scheduler .scheduler-row.position-row:first-child {
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity));
  color: #fff;
}
.scheduler .scheduler-row.position-row:first-child > div:first-child {
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity));
  color: #fff;
}
.scheduler .scheduler-row > :has(.schedule-shift-uncovered) {
  background-color: pink;
}
.scheduler .scheduler-row:first-child {
  position: sticky;
  top: 0;
  z-index: 4;
}
.scheduler .scheduler-row:first-child > div:first-child {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
}
.scheduler .scheduler-row > div {
  width: var(--width);
  padding: 0.25rem 0.5rem;
  border-left: 1px dotted var(--bs-gray-900);
}
.scheduler .scheduler-row > div:first-child {
  width: 200px;
  position: sticky;
  left: 0;
  border-right: 1px solid #666;
  z-index: 1;
  background-color: var(--first-child-bg, #fff);
  color: var(--first-child-fg, #000);
}
.scheduler .scheduler-row > div div.schedule-day {
  --scheduled-days: 1;
  background-color: var(--bgColor);
  color: var(--color);
  text-align: left;
  align-self: self-start;
  position: relative;
  width: calc(var(--width) * var(--scheduled-days) - 10px);
  padding: 0.15rem 0.4rem;
  border-end-start-radius: 10px;
  border-start-start-radius: 10px;
  border-end-end-radius: 10px;
  border-start-end-radius: 10px;
}
.scheduler .scheduler-row > div div.schedule-day.sr-none {
  --bgColor: var(--bs-danger);
  --color: #fff;
}
.scheduler .scheduler-row > div div.schedule-day:hover {
  transition: all ease-in-out 0.2s;
  transform: scale(1.05);
  cursor: pointer;
}

.page-title {
  color: #efefef;
  font-size: 1.5em;
}

.page-title span {
  font-size: 13px;
  color: #999;
  display: block;
  margin-bottom: 0;
}

html, body {
  background-color: #333;
}

.cursor-pointer {
  cursor: pointer;
}

/* .fs-6 = 1rem */
.fs-7 {
  font-size: 0.9em;
}

.fs-8 {
  font-size: 0.8em;
}

.fs-9 {
  font-size: 0.7em;
}

.fs-10 {
  font-size: 0.5em;
}

#blazor-error-ui {
  color-scheme: light only;
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.position-Floor {
  --bgColor: var(--position-Floor);
  --color: #fff;
}

.position-Bartender {
  --bgColor: var(--position-Bartender);
  --color: #fff;
}

.position-Front {
  --bgColor: var(--position-Front);
  --color: #fff;
}

.position-Kitchen {
  --bgColor: var(--position-Kitchen);
  --color: #fff;
}

.position-Barback {
  --bgColor: var(--position-Barback);
  --color: #333;
}

.position-Event {
  --bgColor: var(--position-Event);
  --color: #333;
}

.text-Floor {
  color: var(--position-Floor);
}

.text-Bartender {
  color: var(--position-Bartender);
}

.text-Front {
  color: var(--position-Front);
}

.text-Kitchen {
  color: var(--position-Kitchen);
}

.text-Barback {
  color: var(--position-Barback);
}

.text-Event {
  color: var(--position-Event);
}

.badge-Floor {
  --bgColor: var(--position-Floor);
  --color: #fff;
  --bs-badge-color: var(--color);
  background-color: var(--bgColor);
}

.badge-Bartender {
  --bgColor: var(--position-Bartender);
  --color: #fff;
  --bs-badge-color: var(--color);
  background-color: var(--bgColor);
}

.badge-Front {
  --bgColor: var(--position-Front);
  --color: #fff;
  --bs-badge-color: var(--color);
  background-color: var(--bgColor);
}

.badge-Kitchen {
  --bgColor: var(--position-Kitchen);
  --color: #fff;
  --bs-badge-color: var(--color);
  background-color: var(--bgColor);
}

.badge-Barback {
  --bgColor: var(--position-Barback);
  --color: #fff;
  --bs-badge-color: var(--color);
  background-color: var(--bgColor);
}

.badge-Event {
  --bgColor: var(--position-Event);
  --color: #fff;
  --bs-badge-color: var(--color);
  background-color: var(--bgColor);
}

.badge-warning {
  background-color: var(--bs-warning);
  color: #333;
}

.badge-success {
  background-color: var(--bs-success);
  color: #fff;
}

.badge-danger {
  background-color: var(--bs-danger);
  color: #fff;
}

.badge-info {
  background-color: var(--bs-orange);
  color: #fff;
}

td.cursor-pointer:hover {
  background-color: #333;
  color: #fff !important;
}

.table.frozen > tbody > tr > td:first-child {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
}

.table.frozen > thead > tr > th:first-child {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 5;
}

.table.frozen > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 3;
}

.schedule-container {
  background-color: #fff;
}

@media screen and (max-width: 768px) {
  .schedule-container {
    margin-right: -1.2rem;
  }
}

/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///D:/NewWaveBilliards/NewWaveBillards.Internal/CSS/app.scss%22,%22file:///D:/NewWaveBilliards/NewWaveBillards.Internal/CSS/scheduling_grid.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AACA;AAAA;AAAA;AAAA;AAAA;AAYA;EACI;EACA;EACA;EACA;EACA;EACA;;;ACnBJ;;AAAA;;AAAA;AAAA;AAAA;;;AAAA;AAYA;EACI;EACA;;AAGA;EACI;EACA;EACA;AACA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAQA;EACI;;AAQI;EACI;EACA;;AAKZ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAKZ;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;;ADxGpB;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;AACA;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAEJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAIJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAEJ;EACI;;;AAKJ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAIJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;IACI%22%7D */