html { font-family: 'Verdana', sans-serif; color: var(--text-color); }

:root {
  --color-primary-050: hsl(205, 100%, 98%);
  --color-primary-100: hsl(205, 100%, 96%);
  --color-primary-150: hsl(205, 100%, 90%);
  --color-primary-200: hsl(205, 100%, 86%);
  --color-primary-300: hsl(205, 100%, 66%);
  --color-primary-400: hsl(205, 100%, 56%);
  --color-primary-500: hsl(205, 100%, 46%);
  --color-primary-600: hsl(205, 100%, 36%);
  --color-primary-700: hsl(205, 100%, 26%);
  --color-primary-800: hsl(205, 100%, 16%);
  --color-primary-900: hsl(205, 100%, 6%);


  --color-complementary-050: hsl(38, 100%, 98%);
  --color-complementary-100: hsl(38, 100%, 96%);
  --color-complementary-150: hsl(38, 100%, 90%);
  --color-complementary-200: hsl(38, 100%, 86%);
  --color-complementary-300: hsl(38, 100%, 66%);
  --color-complementary-400: hsl(38, 100%, 56%);
  --color-complementary-500: hsl(38, 100%, 46%);
  --color-complementary-600: hsl(38, 100%, 36%);
  --color-complementary-700: hsl(38, 100%, 26%);
  --color-complementary-800: hsl(38, 100%, 16%);
  --color-complementary-900: hsl(38, 100%, 6%);

  --color-accent-050: hsl(49, 100%, 98%);
  --color-accent-100: hsl(49, 100%, 96%);
  --color-accent-100: hsl(49, 100%, 90%);
  --color-accent-200: hsl(49, 100%, 86%);
  --color-accent-300: hsl(49, 100%, 66%);
  --color-accent-400: hsl(49, 100%, 56%);
  --color-accent-500: hsl(49, 100%, 46%);
  --color-accent-600: hsl(49, 100%, 36%);
  --color-accent-700: hsl(49, 100%, 26%);
  --color-accent-800: hsl(49, 100%, 16%);
  --color-accent-900: hsl(49, 100%, 6%);
  /* --border-subtle: var(--border-200) solid var(--color-complementary-200); */
  --inactive-gb: hsl(0, 0%, 96%);
  --inactive-fg: hsl(0, 0%, 60%);
  --active-bg: hsl(120, 65%, 96%);
  --border-radius: var(--pad-rem-300);
  --header-height: 4rem;

  --cell-size-unit: .305rem;
  --grid-rows: 288;
  --header-max-height: 64px;

}

nav#top-main-menu {
  top: calc(var(--header-max-height));
  & ul {
    height: calc(100dvh - var(--header-max-height) - var(--container-padding));
    overflow: auto;
    align-content: flex-start;
  }
}


.float-right {
  display: block; float: right; padding: calc(var(--container-padding)/2);
}

.inline-block { display: inline-block; }

.hidden { display: none; }
.live-search { width: fit-content; }

.flex-right { margin-left: auto; }
.t-edit-west-pane, .t-edit-east-pane {
  height: calc(100dvh - calc( var(--container-padding) + var(--header-height)) ); overflow: auto;
}

.msg-error, .msg-info, .msg-warn, .msg-err, .msg-inf, .msg-wrn, .msg {
  padding: calc(var(--container-padding)/2) var(--container-padding);
}

a img, button img, a svg, button svg {
  width: 2rem;
  height: fit-content;
}
button { height: fit-content; }

.pagination button svg { fill: var(--color-complementary-600); }

a, a:visited { text-decoration:  none; }

/* body { background-color: var(--color-complementary-800);} */
/* input, textarea, select { border-top: none; border-left: none; border-right: none; } */
label { color: var(--color-primary-800); }

img.edit {
  width: 1.3rem;
  display: inline-block;
}

.pad-1 { padding: calc(var(--container-padding)/2); }

.mid-icon { width: 1.4rem; height: 1.4rem; }
/* .mid-icon { width: 1.2rem; height: 1.2rem; } */
.small-icon { width: 1rem; height: 1rem; }
.tiny-icon  { width: .8rem; height: .8rem; }

.btn-edit {
  background-color: transparent;
  border: var(--border-interactive);
  padding-inline: calc(var(--container-padding)/2);
}

ul.ul-nav-buttons {
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: var(--container-padding);
  flex-wrap: wrap;
  li button {
    padding-inline: .4rem;
    background-color: var(--color-primary-200);
    color: var(--color-primary-900);
    border-left: none;
    border-right: none;
  }
}

.grid-cols {
  --cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--cols), auto);
  align-items: start;
  gap: var(--container-padding);
  padding: var(--container-padding);

}

.card-container {
  padding: var(--container-padding);
  border: var(--border-subtle);
  border-radius: var(--border-radius);
  background-color: white;
}
.top-level-nav  {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: space-around;

  li {
    background-color: transparent;
    padding: 0;
    margin: 0;
    a {
      background-color: white;
      padding: 1rem;
      border-radius: var(--border-radius);
      border: var(--border-200) solid var(--color-primary-300);
      display: inline-block;
      width: 8rem;
      height: 8rem;
      text-align: center;
      justify-self: center;
    }
    a:hover {
      border: var(--border-200) solid var(--color-accent-200);
      box-shadow: var(--box-shadow);
    }
  }
  img {
    width: 3rem;
    margin: 0 auto;
  }
}


nav#top-main-menu ul {
  /* display: flex; */
  /* flex-direction: column; */
  gap: var(--container-padding);
  flex-basis: content;
}
nav#top-main-menu ul li a {
  background-color: var(--color-primary-050);
  word-break: break-all;
  width: max-content;
  img {
    height: 3rem;
  }
}

img.admin {
 filter: invert(83%) sepia(37%) saturate(2476%) hue-rotate(260deg) brightness(80%) contrast(132%);
}

div.courses-list {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  gap: var(--container-padding);
  .card-container {
    .flex-col {
      gap: calc(var(--container-padding)/2);
    }
  }
}

div.courses {
  display: grid;
  gap: var(--container-padding);
  grid-template-columns: auto 1fr 1fr;
}

.course-title {
  background-color: var(--color-complementary-100);
  padding-inline: var(--container-padding);
  border-radius: var(--border-radius);
  #course-title {
    background-color: transparent;
    color: var(--color-primary-700);
    display: inline-block;
    font-weight: bold;
    padding: 0;
  }
}

/* #course-block-dates {

} */


#class_dates-table {
  display: flex;
  flex-direction: column;
  gap: var(--container-padding);
  .class-date {
    display: flex;
    flex-direction: column;
    gap: var(--container-padding);
    .serial { width: 2ch; }
  }
  .card-container {
    width: 100%;
    display: flex;
    gap: var(--container-padding);
    flex-direction: column;
  /* .buttons {
      display: flex;
      gap: var(--container-padding);
      flex-direction: row;
    } */
    .sched {
      display: flex;
      flex-direction: column;
      gap: var(--container-padding);
      .heading {
        display: flex;
        flex-direction: row;
        gap: var(--container-padding);
        h1 { text-align: left; width: fit-content; font-weight: normal; }
      }

    }
  }
}

tr.is-invalid td {
  background-color: var(--light-red);
}

h1.date {
  font-size: larger;
  .class-from-to-time {
    font-size: .7em;
    font-weight: normal;
  }
}

#course-details {
  display: grid;
  grid-template-areas:
    "head head"
    "course-blocks schedule"
  ;
}


.is-deleted {
  text-decoration: line-through;
  color: var(--red);
}



#courses-admin-dashboard {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--container-padding);
  .search-nav {
    display: flex;
    flex-direction: column;
    gap: var(--container-padding);
  }
  #course-edit-pane {
    display: grid;
    gap: var(--container-padding);
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr 1fr;

    #course-edit-form {
      grid-row: 1/-1;
      form h1 {
        font-size: medium;
      }
    }
    #course-blocks-list {
      grid-row: 1;
      grid-column: 2;
      table#course_blocks-table {
        border: var(--border-subtle);
        border-radius: var(--border-radius);
        background-color: white;
        width: 100%;
        margin: 0;
        border-spacing: 0;
        tr td {
          padding: var(--container-padding);
          border-radius: var(--border-radius);
          border-bottom: var(--border-subtle);
          img {
            width: 1.3rem;
          }
        }
      }
      table#course_blocks-table:has(tr.course-block) {
        tr.no-course-blocks td { display: none; }
      }

    }
    #course-block-dates {
      grid-row: 2;
      grid-column: 2;
      display: flex;
      flex-direction: column;
      gap: var(--container-padding);
      form {
        display: flex;
        flex-direction: column;
        gap: 1.3rem;
        /* .input-block {
          gap: var(--container-padding);
        } */
      }
    }
  }
}

.course-title-container {
  padding: var(--container-padding);
  border: var(--border-subtle);
  border-radius: var(--border-radius);
  /* color: var(--color-accent-900); */
  background-color: transparent;
  /* border-color: var(--color-primary-300); */
  /* display: flex;
  justify-content: space-between;
  flex-direction: row; */
  h1 {
    font-size: large;
  }
}

/*
course_block__80-shred
course_block__80-shred
course_block__course_block__80
course_block__course_block__80
*/


.dancer-roles {
  display: flex;
  flex-direction: row;
  gap: var(--container-padding);
  justify-content: flex-start;
  button {
    /* width: 8rem; */
    /* height: 2rem; */
    padding: var(--container-padding);
    border: var(--border-subtle);
    border-radius: var(--border-radius);
    position: relative;
    border-width: .1rem;
    flex-basis: fit-content;
    img { margin: 0 0 0 2rem; height: auto; }
  }
  button::before {
    content: "";
    position: absolute;
    top: .1rem;
    left: .1rem;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 2rem;
    height: 2rem;
  }
  button.is-assigned::before {
    background-image: url("/static/img/active.svg");
  }
  button.is-unassigned::before {
    background-image: url("/static/img/inactive.svg");
  }
  /* button.is-assigned { border-color: hsla(86, 84%, 39%, 0.8);; background-color: hsla(86, 84%, 39%, 0.2); }
  button.is-unassigned { border-color: hsla(0, 0%, 50%, 0.3); img { opacity: 0.2; } } */
  /* .is-unassigned {
    background-color: grey;
  } */
}

button.is-assigned { border-color: hsla(86, 84%, 39%, 0.8);; background-color: hsla(86, 84%, 39%, 0.2); }
button.is-unassigned { border-color: hsla(0, 0%, 50%, 0.3); img { opacity: 0.2; } }

/* td.is-assigned { background-color: greenyellow; }
td.is-unassigned { background-color: var(--light-red); } */

tr.dancer-roles-missing td, .dancer-roles-missing {
  background-color: var(--light-red);
}

#user-edit-form.center form {
  width: clamp(50ch, 30ch, 100%);
}

.search-and-edit {
  .search-results-popout {
    button.enrollment-popout-result {
      width: 100%;
      min-width: 50%;
      span.course-title-in-button {
        color: var(--color-primary-700);
        font-weight: bold;
        /* padding: var(--container-padding) 0; */
      }
      span.class-date-in-button {
        color: var(--color-complementary-700);
        font-weight: bold;
      }
    }
  }
}

#course-block-enrollments {
  .course-block-for-enrollment {
    padding: var(--container-padding);
    border: var(--border-subtle);
    border-radius: var(--border-radius);
    color: var(--color-accent-900);
    background-color: var(--color-primary-200);
    border-color: var(--color-primary-300);
    position: relative;
    /* button { position: absolute; top: var(--container-padding); right: var(--container-padding); } */
    h1 {
      font-size: 1.2rem;
    }
    .start-time {
      font-size: 1rem;
      font-weight: bolder;
    }
  }
  #enrollments-table {
    padding: var(--container-padding);
    border: var(--border-subtle);
    border-radius: var(--border-radius);
    /* color: var(--color-accent-900); */
    background-color: white;
    width: 100%;
    /* width: 80ch; */
    height: fit-content;
    border-collapse: collapse;
    td {
      padding: var(--container-padding);
      border-top: var(--border-subtle);
    }
  }
  #enrollments-edit-pane {
    grid-row: 2;
    grid-column: 2;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: var(--container-padding);
    .live-search { width: 100%; }
    #users-list {
      background-color: white;
      border: var(--border-subtle);
      border-radius: var(--border-radius);
    }
  }
}

table.search-users-for-enrollment {
  border-collapse: collapse;
  /* padding: var(--container-padding); */
  /* width: 100%; */
  td {
    padding: var(--container-padding);
    border-bottom: var(--border-subtle);
    vertical-align: middle;
    background-color: white;
  }
}

td.follow, tr.follow td, .follow {
  /* background-color: hsla(350, 100%, 88%, 0.123); */
  background-image: linear-gradient(to bottom, hsla(317, 85%, 93%, 0.1), white, hsla(317, 85%, 93%, 0.1));
  /* justify-content: flex-start; */
}

td.lead, tr.lead td, .lead {
  /* background-color: hsla(137, 85%, 93%, 0.1); */
  background-image: linear-gradient(to bottom, hsla(137, 85%, 93%, 0.1), white, hsla(137, 85%, 93%, 0.1));
  /* justify-content: flex-end; */
}
td.dancer-role {
  border-top: var(--border-subtle);
  img { width: .8rem; height: 1.5rem; }
}

td.button-control {
  padding: 0;
}

button.toggle-button {
  background-color: transparent;
  border: none;
  img {
    width: 2rem;
    padding: 0;
  }
}

button.small-with-img {
  background-color: transparent;
  border: none;
  padding: calc(var(--container-padding)/2);
  img {
    width: 1.2rem;
    padding: 0;
  }
}

#ext_bookings-table {
  max-width: 42ch;
  /* border */
}

 /* Calculate height based on viewport height and header height */
/* #ext_booking-list {
  height: calc(100dvh - 100px);
  overflow-y: auto;
}
#ext_booking-details {
  overflow: auto;
} */

/* #class_levels-list table {
 }
  white, }
} */

#class_levels-list table {
  background-color: white;
  border: var(--border-subtle);
  border-radius: var(--border-radius);
  border-collapse: collapse;
  td {
    padding: var(--container-padding);
  }
}

/* #attendances-table td img, #enrollments-table td img,
.role-button img { height: 1.8rem; } */
.role-button {
  padding-inline: .5rem;
  background: var(--color-primary-100);
  img { padding: 0; width: 1.4rem; }
}

#users-list:empty { display:  none; }

#user-edit-form:has(div.taxi-dancer) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--container-padding);
  h3 { padding: var(--container-padding); }
  form.edit-form {
    grid-column: 1;
    height: fit-content;
  }
  .taxi-dancer {
    grid-column: 2;
    /* padding: var(--container-padding); */
    border: var(--border-subtle);
    border-radius: var(--border-radius);
    background-color: white;
    border-collapse: collapse;
    height: max-content;
    td, th {
      padding: var(--container-padding);
      img { width: 1.3rem; }
    }
  }
  .taxi-dancer.is-new {
    display: none;
  }
  #user-send-message {
    grid-column: 1;
    grid-row: 2;
  }
}

.attendance-dashboard {
  display: grid;
  gap: var(--container-padding);
  grid-template-columns: 1fr 3fr;
  .attendance-west-pane {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: var(--container-padding);
  }
}

#attendance-details {
  grid-column: 2;
  width: 100%;
  /* border: 1px solid blue; */
  height: fit-content;
}

#search-users-for-attendance {
  margin-bottom: 1rem;
  .search-and-edit-input {
    display: flex;
    gap: var(--container-padding);
    flex-direction: column;
    #users-list {
      padding: var(--container-padding);
      border: var(--border-subtle);
      background-color: white;
    }
  }
}

.header {
  padding: var(--container-padding);
  border: var(--border-subtle);
  border-radius: var(--border-radius);
  background-color: var(--color-primary-200);
  border-color: var(--color-primary-300);
  h1 {
    font-size: larger;
  }
}
.goto-enrollments {
  /* justify-self: flex-end; */
  display: inline-block;
  /* background-color: var(--color-primary-050); */
  /* border: var(--border-subtle); */
  /* padding-inline: var(--container-padding); */
  /* border-radius: var(--border-radius); */
  font-size: small;
  font-weight: normal;
  color: var(--color-primary-600);
  text-decoration: none;
}
.goto-enrollments:visited { color: var(--color-primary-600); }

.attendance-dashboard2 {
  display: grid;
  grid-template-rows: auto;
  gap: var(--container-padding);
  #search-form {
    display: flex;
    flex-direction: row;
    gap: var(--container-padding);
  }
}

.attendances-table {
  border-collapse: collapse;
  background-color: white;
  /* border: var(--border-subtle); */
  width: 100%;
  height: fit-content;

  /* tr.is-not-confirmed td {
    text-decoration: line-through;
  } */
  td {
    padding: var(--container-padding);
    border-top: var(--border-subtle);
    /* font-size: larger; */
  }
  /* td.dancer-role img {
    height: 2rem;
  } */
}


#edit-controls {
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: var(--container-padding);
}

.attendances-table:has(tr.attendee) {
 .no-attendees {
  display: none;
 }
}

#enrollments-table:has(tr.enrollment) {
  .no-enrollments {
    display: none;
  }
}

tr.is-adhoc td {
  font-style: normal;
}

.course-sched-header-full {
  display: grid;
  gap: var(--container-padding);
  justify-content: space-between;
  grid-template-areas:
    "header header ctls"
    "comments comments comments"
  ;
  h1 { grid-area: header; }
  .ctls { grid-area: ctls; > * { height: 2.2rem; width: 2.2rem; } }
  /* .comments { grid-area: comments; } */
  .ctls img {
    width: 1.2rem;
  }
  .ext-course {
    grid-area: comments;
  }
}

.class-date-header {
  padding: var(--container-padding);
  border: var(--border-subtle);
  border-radius: var(--border-radius);
  background-color: var(--color-primary-100);
  /* .flex-row {
    justify-content: space-between;
  } */
}

.comments, .info {
  color: var(--color-primary-700);
  border: var(--border-subtle);
  /* border-color: var(--color-primary-400); */
  padding-inline: .5rem;
  border-radius: var(--border-radius);
  display: inline-block;
  font-size: 1rem;
  font-weight: normal;
  white-space: preserve-breaks;
  word-wrap: break-word;
  background-color: var(--color-primary-050);
  flex: 1;
}

.info {
  background-color: var(--color-accent-050);
  /* color: var(--color-accent-900); */
}

.comments:empty, .info:empty { display: none; }
.hide-empty:empty { display: none; }

form.live-search-wrapper {
  border: none; width: 100%; padding: 0;
  #search-user-info {
    border: var(--border-subtle);
    background-color: white;
    padding: var(--container-padding);
  }
}

.regular-text {
  font-size: 1rem;
  font-weight: normal;
  font-style: normal;
}

td.user-name {
  /* padding: 0 !important; */
  a {
    text-decoration: underline;
    text-underline-offset: .3rem;
    color: var(--color-accent-800);
    white-space: wrap;
    display: flex;
    flex-direction: row;
    gap: var(--container-padding);
    justify-content: flex-start;
    padding: var(--container-padding);
    /* width: 100%; */
    /* height: 100%; */
  }
}

.buttons-menu {
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: var(--container-padding);
}

.taxi-dancers-dashboard {
  display: grid;
  /* padding: var(--container-padding); */
  gap: var(--container-padding);
  form.course-subjects {
    grid-row: 1;
    grid-column: span;
    flex-wrap: initial;
    select {
      border: var(--border-interactive);
      border-radius: var(--border-radius);
    }
    /* select {
      width: fit-content;
    } */
    /* input[name=class_level_id] {
      width: 12ch;
    } */
  }
}

#taxi-dancers {
  border-collapse: collapse;
  width: fit-content;
  td {
    border: var(--border-subtle);
    padding: var(--container-padding);
    background-color: white;
  }
}

button.toggle-edit-mode {
  background-color: var(--color-primary-600);

  img {
    filter: invert(1) sepia(1) saturate(1) hue-rotate(179deg);
    /* width: inherit;
    height: inherit; */
    padding: 0; margin: 0;
    /* height: 1.2rem; */
    /* width: 1.2rem; */
    /* height: 100%; */
  }
}

/*
taxi-assignment-toggle-button
is-unassigned
*/

.toggle-button img { height: 1.8rem;}

#taxi-dancers-edit-pane {
  display: flex;
  flex-direction: column;
  gap: var(--container-padding);
  > * {
    border: var(--border-subtle);
    border-radius: var(--border-radius);
  }
  h3 {
    background-color: white;
    input.live-search {
      font-size: initial;
      font-weight: initial;
      /* width: fit-content; */
    }
  }
  #taxi-dancers-wrapper {
    border: none;
    /* padding: 0 var(--container-padding); */
  }
}



#taxi-dancers td.taxi-assignments {
  display: flex;
  flex-direction: row;
  gap: var(--container-padding);
  padding-inline: var(--container-padding);
  border: none;
  background-color: transparent;
  flex-wrap: wrap;

}
.taxi-single-assignment {
  display: flex;
  flex-direction: row;
  /* gap: var(--container-padding); */
  border: var(--border-subtle);
  /* display: inline-block; */
  padding: var(--container-padding);
  border-radius: var(--border-radius);
  > * {
    width: 7ch;
    display: inline-block;
  }
  img { width: .9rem;}
}

.taxi-assignment-toggle-button {
  display: flex;
  flex-direction: row;
  gap: var(--container-padding);
  width: 8ch;
  img { width: 1.2rem; }
  position: relative;;
}

.taxi-assignment-toggle-button::before {
  content: "";
  position: absolute;
  top: .1rem;
  left: .1rem;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: .9rem;
  height: .9rem;
}
.taxi-assignment-toggle-button.is-assigned::before {
  background-image: url("/static/img/active.svg");
}
.taxi-assignment-toggle-button.is-unassigned::before {
  background-image: url("/static/img/inactive.svg");
}

.pagination {
  max-width: fit-content;
}

.attendance-user-details {
  height: max-content;
  /* width: 100%; */
  h1 { font-size: large; }
  .comments { border: var(--border-subtle); border-color: var(--color-primary-200); }
}

.right { text-align: right; }
.left { text-align: left; }

.danger:has(img) {
  background: transparent;
  padding: .05rem;
  border: none;
  vertical-align: middle;
  border-radius: 50%;
  border: var(--border-subtle);
  border-color: var(--red);
}
/* .danger img {
  filter: invert(1) sepia(1) saturate(1) hue-rotate(179deg);
} */

button.remove-element {
  background-color: transparent;
  padding: 0;
  border: none;
}

/* .taxi-dancer-nav {
  form, select, input {
    width: 30ch;
  }
  form {
    padding: 0;
  }
} */

.input-block label {
  color: var(--color-primary-600);
}

.taxi-dancer-candidates {
  border-collapse: separate;
  padding: 0;
  /* background-color: white; */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* display: flex;
  flex-direction: row;
  flex-wrap: wrap; */
  gap: calc(var(--container-padding)*2);
  td, th {
    padding: var(--container-padding);
    border-bottom: var(--border-subtle);
  }
  img { width: 1.6rem; }
  button {
    width: fit-content;
  }
  button {
    border-radius: var(--border-radius);
  }
}

.taxi-candidate-card {
  gap: calc(var(--container-padding)*2);
  border-left: .4rem solid var(--color-primary-200);
  /* --shadow-color: var(--color-primary-100); */
  box-shadow: .4rem .4rem .9rem .06rem var(--color-primary-200);

  /* border-right: .4rem solid var(--color-primary-300); */
}
.taxi-candidate-name {
  /* padding: var(--container-padding); */
  /* margin: calc(var(--container-padding)*-1); */
  /* border-bottom: .05rem solid var(--color-primary-300); */
  /* background-color: hsla(53, 62%, 95%, 0.4); */
  margin: calc(var(--container-padding)*-1);
  padding: var(--container-padding);
  /* border-left: .4rem solid var(--color-primary-300); */
  background-color: var(--color-primary-050);
  font-size: larger;
}
.taxi-candidate-name-header {
  position: relative;
  .action {
    position: absolute;
    top: 0;
    right: 0;
  }
}

.taxi-candidate-stats {
  margin: calc(var(--container-padding)*-1);
  padding: var(--container-padding);
  background-color: hsl(0, 0%, 100%, .5);
}

.flex-wrap {
  flex-wrap: wrap;
}

tr.htmx-swapping td {
  opacity: 0;
  transition: opacity 300ms ease-out;
}

td.full-width { width: min-content; }

.gap-2 { gap: 2rem; }

.space-between { justify-content: space-between; }

table.push-left tr td:last-child {
  width: 100%;
}

.course-heading {
  border: var(--border-subtle);
  border-radius: var(--border-radius);
  padding: var(--container-padding);
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
}

.missing-dancer {
  font-weight: normal;
  color: var(--red);
}

table.attendances-table tbody.attendance-groupping {
  tr.attendee:first-child > td {
    border-top-width: .4rem;
    border-top-color: var(--color-primary-300);
  }
  td.group-heading {
    background-color: var(--color-primary-400);
    color: var(--color-primary-050);
    vertical-align: top;
    font-weight: bold;
    background-image: none;
    padding-inline: var(--container-padding);
    /* border-top-color: var(--color-primary-050); */
  }
}
table.need-have {
  width: fit-content;
  border-collapse: collapse;
  background-color: white;
  td, th { padding-inline: var(--container-padding); border: var(--border-subtle); font-size: .9rem; /*min-width: 6rem; max-width: 6rem; */ }
  th { text-overflow: ellipsis; overflow: hidden; font-size: .8rem; /* background-color: var(--color-primary-200); color: var(--color-primary-800); border-color: var(--color-primary-400); font-weight: normal; */ }
  img { width: .9rem; display: inline-block; /* vertical-align: bottom; */ background-color: white; border-radius: 50%; vertical-align: middle; }
  td.role-icon, th.role-icon { min-width: 3rem; max-width: 3rem; text-align: center; }
  th.role-icon { border: none; background-color: transparent; }
}


tr.taxi-req-accepted td, .taxi-req-accepted  {
  background-color: hsla(120, 100%, 50%, 0.12);
}

tr.taxi-req-declined td, .taxi-req-declined  {
  background-color: hsla(0, 100%, 50%, 0.12);
}


tr.taxi-req-already-assigned td, .taxi-req-already-assigned {
  background-color: hsl(49, 100%, 50%, 0.12);
}

.taxi-req-user-message img {
  width: 1.5rem;
  height: 1.5rem;
}


textarea[name=comments], textarea[name=resume] {
  height: 10ch;
  min-width: 30ch;
}



.ext-course {
  background-color: white;
  padding: var(--container-padding);
  p {
    span.label { min-width: 13ch; }
  }
  font-weight: normal;
  button { padding: 0; border: none; background-color: transparent; }
}

.small-print {
  font-size: .8rem;
}

.right {
  text-align: right;
}

.is-not-linked td {
  background-color: var(--light-red);
  color: var(--red);
}

.ext-attendances {
  /* border-collapse: collapse; */
  td {
    background-color: white;
    padding: var(--container-padding);
    /* border: var(--border-subtle); */
    .comments { border: var(--border-subtle); border-color: var(--color-primary-200); }
  }
}

.ext-attendances:has(tr.attendee) {
  .no-attendees {
   display: none;
  }
 }

.no-wrap { text-wrap: nowrap; }
.yes-wrap { text-wrap: wrap; }

table.no-border tr td { border: none; }
.bold { font-weight: bold; }

.border { border: var(--border-subtle); }

div.is-canceled {
  position: relative;
  /* padding: 20px; */
}
/* tr.is-canceled td { */
  /* background-color: hsl(0, 0%, 95%); */
  /* background-image: none; */
/* } */


div.is-canceled::before,
div.is-canceled::after {
  content: "";
  position: absolute;
  opacity: .2;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

div.is-canceled::after {
  left: 0;
  background: linear-gradient(to bottom right, transparent 49%, var(--red) 49%, var(--red) 51%, transparent 51%);
}
div.is-canceled::before{
  right: 0;
  background: linear-gradient(to bottom left, transparent 49%, var(--red) 49%, var(--red) 51%, transparent 51%);
}

.is-hidden-soft {
  background-color: hsl(0, 0%, 77%);
  color: hsl(0, 0%, 46%);
  > * {
    background-color: hsl(0, 0%, 77%);
    color: hsl(0, 0%, 46%);
  }
}

table.nr-row-with-header {
  tr:not(:first-child) {
    counter-increment: rowNumber;
    td:first-child::before {
      content: counter(rowNumber);
    }
  }
}

table.nr-row {
  tr {
    counter-increment: rowNumber;
    td:first-child::before {
      content: counter(rowNumber);
    }
  }
}

table.nr-row tr td:first-child::before, table.nr-row-with-header td:first-child::before {
  /* content: counter(rowNumber); */
  min-width: 1em;
  max-width: 3ch;
  margin-right: 0.5em;
  background-color: var(--color-accent-050);
  color: var(--color-accent-800);
  border: var(--border-subtle);
  border-width: 0 .2rem 0 0;
  border-radius: 50%;
  padding: var(--container-padding);
  position: relative;
  top:0;
  left: -.7rem;
  font-weight: bold;
  text-align: right;
}

tbody:has(span.rn) {
  counter-increment: rowNumber;
}
tbody:has(span.rn) span.rn::before {
  content: counter(rowNumber);
  /* min-width: 1em; */
  /* max-width: 3ch; */
  background-color: var(--color-accent-050);
  color: var(--color-accent-800);
  border: var(--border-interactive);
  /* border-width: 0 .2rem 0 0; */
  /* border-radius: 50%; */
  border-radius: 20%;
  padding-inline: calc(var(--container-padding)/2);
  /* position: relative; */
  font-weight: bold;
  /* text-align: right; */
  display: inline-block;
}

/* tbody:has(span.rn) tr td:first-child {
  position: relative;
} */

/* tbody:has(span.rn) span.rn {
  position: relative;
  top: 0; left: 0;
} */



a.clickable, a[href^="tel:"], a[href^="mailto:"] {
  color: var(--color-primary-600);
  text-decoration: underline;
}

/* table.nr-row tr:not(:first-child) td:first-child::before {
  content: counter(rowNumber);
  min-width: 1em;
  margin-right: 0.5em;
} */

.show-hide { margin-left: auto; padding: 0; position: relative; }
.show-hide .mnu-button { align-self: flex-end; }
.show-hide .mnu-button .icon img, .mnu-button.open:after, .flex-row .mnu-button { width: .8rem; height: .8rem; display: inline-block; }
.show-hide .contents { display: none; }
.show-hide .mnu-button.open .icon { display: none; }
/* .show-hide .mnu-button.open .mnu-contents { display: block; } */
.show-hide .mnu-button.open:after { content: url(/static/img/cross-icon-black.svg); }
.show-hide:has(.mnu-button.open) .contents {
  z-index: 5;
  font-weight: normal;
  display: flex;
  border: var(--border-subtle);
  border-radius: var(--border-radius);
  position: absolute;
  top: 1.5rem;
  right: 0;
  background-color: white;
  box-shadow: var(--box-shadow);
  width: min-content;
  padding: var(--container-padding);
  gap: 1rem;
  /* overflow: auto; */
}

img.ctrl-icon { width: .8rem; height: .8rem; }

.attnd-comments {
  display: flex;
  flex-direction: column;
  gap: var(--container-padding);
  div.attnd-comment-wrapper {
    padding-block: var(--container-padding);
    display: flex;
    flex-direction: column;
    border: var(--border-subtle);
    border-radius: var(--border-radius);
    .comment {
      white-space: preserve-breaks;
      word-wrap: break-word;
      color: var(--color-primary-700);
      padding: var(--container-padding);
      background-color: var(--color-primary-050);
    }
    .footer {
      color: var(--color-primary-400);
      text-align: right;
    }
  }
}

button.edit-comment {
  border: none;
  background-color: transparent;
  color: var(--color-primary-700);
  width: fit-content;
  img {
    width: 1rem;
  }
}

#class_date-edit-form { max-width: 60ch; }

textarea[name=comment] { height: 12ch; width: 32ch; }

dialog { font-weight: initial; max-width: 100dvw; }

.is-count-missmatch { color: red; }


.user-card {
  padding: var(--container-padding);
  border: var(--border-subtle);
  border-radius: var(--border-radius);
  background-color: white;
  button {
    border: none;
    background-color: transparent;
    padding: calc(var(--container-padding)/2);
  }
  .user-title-roles {
    /* margin-left: auto; */
    img { width: 1rem; display: inline-block; }
  }
  .edit-buttons {
    margin-left: auto;
    img { width: 1rem; display: inline-block; }
  }
  .user-id { color: var(--color-primary-300); }
}

.unassigned-role {
  filter: grayscale(100%);
  opacity: .15;
}

tr.is-not-registered td {
  /* background-color: gray; */
  color: hsla(0, 0%, 50%, 0.795);
}

tr.tr-spacer td { background-color: white; border: none; font-size: .4rem; }

.user-attendance-stats {
  border-collapse: collapse;
  background-color: white;
  width: min-content;
  td {
    border: var(--border-subtle);
    padding: var(--container-padding);
  }
}
tr.attendance-stats-course-heading td {
  font-weight: bold;
  color: var(--color-primary-600);
  background-color: var(--color-primary-050);
  border: none;
  .course-name {
    margin-top: 3rem;
    display: inline-block;
    /* padding: var(--container-padding); */
    padding: 0;
  }
  .ext-course {
    display: inline-block;
    font-weight: normal;
    background-color: white;
    padding: var(--container-padding);
    margin-inline: calc(var(--container-padding)*-1);
    border: var(--border-subtle);
  }
}


.select-course {
  tr td {
    width: 35%;
    background-color: white;
    border: var(--border-subtle);
    border-radius: var(--border-radius);
    font-size: .8rem;
    button {
      border: none; background-color: transparent;
    }
  }
  tr td.start-time {
    padding-inline: calc(var(--container-padding)/2);
    font-weight: normal;
    color: var(--color-primary-700);
    background-color: var(--color-primary-100);
    width: 3%;
    vertical-align: middle;
    writing-mode: vertical-lr;
  }
}
.class-date-wrapper {
  display: flex;
  flex-direction: column;
  gap: calc(var(--container-padding)/2);
  justify-content: space-between;
  > * {
    padding: calc(var(--container-padding)/2);
  }
  .stats {
    background-color: var(--color-primary-050);
  }
  .view-course-sched {
    display: flex;
    flex-direction: column;
    gap: var(--container-padding);
    background-color: white;
    padding: calc(var(--container-padding)/2);
    text-align: left;
    /* display: inline-block; */
    /* justify-content: space-between; */
    /* flex-grow: 1; */
    .heading {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      gap: calc(var(--container-padding)/2);
    }
    .btn-course-subject {
      font-size: .8rem;
      text-align: left;
      font-weight: bold;
      display: inline-block;
      /* padding-inline: calc(var(--container-padding)/2); */
      background-color: var(--color-accent-050);
      color: var(--color-accent-800);
      border-radius: var(--border-radius);
      border: var(--border-subtle);
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 13ch;
      overflow: hidden;
    }
    .btn-course-level {
      display: inline-block;
      /* padding-inline: var(--container-padding); */
      background-color: var(--color-primary-050);
      color: var(--color-primary-700);
      white-space: nowrap;
      border-radius: var(--border-radius);
      border: var(--border-subtle);
    }
    .course-dancer-combo {
      margin-left: auto;
      img { height: 1rem; width: .6rem; }
    }
    .course-topic {
      /* font-size: smaller; */
      font-weight: bold;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 14ch;
    }
    .class-duration {
      font-weight: normal;
      color: var(--color-accent-800);
      font-size: smaller;

    }
    .attendee-stats {
      justify-self: flex-end;
      font-size: smaller;
    }
  }

}

.attendee-stats {
  display: flex;
  flex-direction: row;
  gap: calc(var(--container-padding)/2);
  > * {
    padding-inline: calc(var(--container-padding)/2);
    text-align: right;
    border-radius: var(--border-radius);
    font-weight: bold;
    width: 3.5ch;
  }

  /* .enrolled { background-color: hsl(240, 26%, 84%); color: var(--color-primary-800); }
  .present { background-color: hsl(120, 15%, 84%); color: var(--color-primary-800); }
  .taxi { background-color: hsl(64, 8%, 84%); color: var(--color-primary-800); }
  .canceled   { background-color: hsl(0, 26%, 84%); color: var(--color-primary-800); } */
}
.enrolled { padding-inline: calc(var(--container-padding)/2); background-color: hsl(240, 26%, 53%); color: hsl(60, 100%, 97%); }
.present { padding-inline: calc(var(--container-padding)/2); background-color: hsl(120, 15%, 44%); color: hsl(60, 100%, 97%); }
.taxi { padding-inline: calc(var(--container-padding)/2); background-color: hsl(64, 8%, 46%); color: hsl(60, 100%, 97%); }
.canceled   { padding-inline: calc(var(--container-padding)/2); background-color: hsl(0, 26%, 43%); color: hsl(60, 100%, 97%); }

.border {
  border: var(--border-subtle);
  border-radius: var(--border-radius);
}

.no-sched {
  color: gray;
  vertical-align: middle;
  text-align: center;
}

#class_date-by-date-combo-select > h1 {
  text-align: center;
  color: var(--color-primary-800);
  font-size: x-large;
  background-color: white;
}


.space-between {
  justify-content: space-between;
}
.subtle-edit {
  border: none;
  background-color: transparent;
  padding: 0;
  img { width: 1.6rem; padding: calc(var(--container-padding)/2); }
}

.is-inactive {
  background-color: var(--inactive-gb);
  color: var(--inactive-fg);
}

#instructors-list {
  padding: 0;
  border: none;
}

.instructor-list {
  display: flex;
  flex-direction: row;
  gap: var(--container-padding);
  img { height: 1.4rem; padding-inline: 0; }
}

.select-instructors {
  display: flex;
  gap: var(--container-padding);
  flex-direction: row;
  flex-wrap: wrap;
  /* justify-content: space-evenly; */
  padding: var(--container-padding);
  /* display: grid; */
  /* grid-template-columns: repeat(4, minmax(10ch, 1fr) ); */
}

.select-instructor {
  border: var(--border-subtle);
  background-color: var(--color-primary-050);
  padding-inline: var(--container-padding);
  border-radius: var(--border-radius);
}

.is-assigned-true {
  background-color: var(--active-bg);
}
.is-assigned-false {
  background-color: var(--inactive-gb);
  color: var(--inactive-fg);
}

.instructor {
  background-color: var(--active-bg);
  color: var(--color-primary-800);
  border: var(--border-subtle);
  border-radius: var(--border-radius);
  /* border-bottom: .3rem solid var(--color-accent-200); */
  padding: 0;
  padding-inline: calc(var(--container-padding)/2);
  /* border-radius: var(--border-radius); */
}

.course-dancer-combo {
  color: var(--color-accent-800);
  background-color: var(--color-accent-050);
  font-weight: bold;
}

/* .title-edit {
  button { float: right; }
} */


.is-selected {
  background-color: var(--color-accent-050) !important;
  /* box-shadow: .4rem .4rem .9rem .06rem var(--color-accent-700) !important; */
  /* box-shadow: .2rem .2rem .7rem .06rem var(--color-primary-300) !important; */
  box-shadow: .1rem .1rem .5rem .05rem var(--color-primary-500) !important;
  position: relative;
}

.is-selected:not(tr)::before {
  content: "";
  border: calc(var(--container-padding)/2) solid var(--color-primary-400);
  border-radius: var(--border-radius);
  background-color: transparent;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  opacity: .8;
}

/* .is-selected::before {
  content: "-";
  font-size: 5rem;
  transform: rotate(-45deg);
  background-color: transparent;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 0;
  opacity: .6;
} */

.ext-course-status-offline  { border-radius: var(--border-radius); padding-inline: var(--container-padding); background-color: hsl(0, 26%, 43%); color: hsl(60, 100%, 97%); }
.ext-course-status-zu       { border-radius: var(--border-radius); padding-inline: var(--container-padding); background-color: hsl(49, 36%, 43%); color: hsl(60, 100%, 97%); }
.ext-course-status-online   { border-radius: var(--border-radius); padding-inline: var(--container-padding); background-color: hsl(104, 10%, 43%); color: hsl(60, 100%, 97%); }


.is-deleted {
  color: inherit;
  text-decoration: inherit;
}
:has(.is-deleted) {
  position: relative;
}

.is-deleted:not(tr)::before, .is-deleted:not(tr)::after {
  content: "";
  position: absolute;
  opacity: .2;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.is-deleted:not(tr)::after {
  left: 0;
  background: linear-gradient(to bottom right, transparent 49%, var(--red) 49%, var(--red) 51%, transparent 51%);
  z-index: 4;
}
.is-deleted:not(tr)::before{
  right: 0;
  background: linear-gradient(to bottom left, transparent 49%, var(--red) 49%, var(--red) 51%, transparent 51%);
  z-index: 4;
}

.is-canceled {
  td {
    background-color: var(--light-red);
  }
}

:has(.ribbon) {
  position: relative;
}
.ribbon {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: var(--red);
  background-color: var(--light-red);
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  /* background: #79A70A; */
  /* background: linear-gradient(#9BC90D 0%, #79A70A 100%); */
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  /* border-left: 3px solid #79A70A; */
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  /* border-top: 3px solid #79A70A; */
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  /* border-right: 3px solid #79A70A; */
  border-bottom: 3px solid transparent;
  /* border-top: 3px solid #79A70A; */
}


.robbon.red span::before {
  content: "";
  border-left: 3px solid #a70a31;
  border-top: 3px solid #a70a31;
}
.robbon.red span::after {
  border-right: 3px solid #a70a31;
  border-top: 3px solid #a70a31;
}
.robbon.red {
  background: #a70a31;
  background: linear-gradient(#c90d5b 0%, #a70a31 100%);
}


.tab-sparce {
  background-color: white;
  border-collapse: separate;
  width: fit-content;
  td {
    padding: calc(var(--container-padding)/1);
    border: var(--border-subtle);
    border-radius: var(--border-radius);
  }
}

.stats-table {
  border-collapse: collapse;
  width: fit-content;
  td, th {
    border: var(--border-subtle);
    padding: calc(var(--container-padding)/2);
  }
}

#ext-booking-date {
  width: min-content;
}

tr.booking-header td {
  font-weight: bold;
}

.booking-group {
  margin-top: var(--container-padding);
  border-left-width: 1rem;
}

.booking-date {
  display: flex;
  flex-direction: row;
  gap: var(--container-padding);
  border: var(--border-subtle);
  /* flex-wrap: wrap; */
  border-radius: var(--border-radius);
}
/* .vertical-text { writing-mode: vertical-lr; text-orientation: mixed; height: fit-content; padding: var(--container-padding); vertical-align: top; } */
.vertical-text { writing-mode: vertical-lr; transform: rotate(360deg); padding-inline: var(--container-padding);  }
/* width: 4ch; */


.bg-white {
  background-color: white;
}

tbody.spacer tr td {
  background-color: var(--color-primary-050);
  border: none;
  list-style: var(--container-padding);
}

.booking-item-header {
  background-color: var(--color-primary-150);
  color: var(--color-primary-900);
  border: var(--border-subtle);
  border-radius: var(--border-radius);
  padding: calc(var(--container-padding)/2);
}

.booking-item {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--container-padding);
  /* > * > * {
    border: 1px solid blue;
  } */
  .booking-item-detail {
    padding: calc(var(--container-padding)/2);
  }
}

.ext_booking-item td {
  border: var(--border-interactive);
  border-radius: var(--border-radius);
  padding: calc(var(--container-padding)/2);
  border-inline: none;
}

.inline-card {
  border: var(--border-subtle);
  border-radius: var(--border-radius);
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
  padding-inline: calc(var(--container-padding)/2);
}

.inline-card-accent {
  border: var(--border-subtle);
  border-color: var(--color-accent-600);
  border-radius: var(--border-radius);
  background-color: var(--color-accent-050);
  color: var(--color-accent-900);
  padding-inline: calc(var(--container-padding)/2);
}

.never-confirmed {
  background-color: var(--light-red);
  color: var(--red);
}

.likelihood-best      { background-color: hsl(120, 59%, 19%);   color: hsl(0, 0%, 100%); }
.likelihood-better    { background-color: hsl(120, 65%, 28%);   color: hsl(0, 0%, 100%); }
.likelihood-good      { background-color: hsl(120, 19%, 56%);   color: hsl(60, 100%, 93%); }
.likelihood-ok        { background-color: hsl(120, 28%, 84%);   color: hsl(0, 32%, 20%); }
.likelihood-poor      { background-color: hsl(0, 100%, 88%);    color: hsl(0, 23%, 32%); }
.likelihood-bad       { background-color: hsl(0, 75%, 39%);     color: hsl(0, 53%, 94%); }
.likelihood-unknown   { background-color: hsl(0, 0%, 71%, .5);  color: hsl(0, 0%, 50%); }


/*
.likelihood-best      { background-color: var(--color-primary-100); color: var(--color-primary-800); border-left: .5rem solid hsl(120, 59%, 19%);     }
.likelihood-better    { background-color: var(--color-primary-100); color: var(--color-primary-800); border-left: .5rem solid hsl(120, 65%, 28%);    }
.likelihood-good      { background-color: var(--color-primary-100); color: var(--color-primary-800); border-left: .5rem solid hsl(120, 19%, 56%);    }
.likelihood-ok        { background-color: var(--color-primary-100); color: var(--color-primary-800); border-left: .5rem solid hsl(120, 28%, 84%);   }
.likelihood-poor      { background-color: var(--color-primary-100); color: var(--color-primary-800); border-left: .5rem solid hsl(0, 100%, 88%);    }
.likelihood-bad       { background-color: var(--color-primary-100); color: var(--color-primary-800); border-left: .5rem solid hsl(0, 75%, 39%);     }
.likelihood-unknown   { background-color: var(--color-primary-100); color: var(--color-primary-800); border-left: .5rem solid hsl(0, 0%, 71%, .5);  }
*/




.calendar {
  --time-unit-height: calc((100dvh - 155px) / var(--grid-rows));
  /* border: 1px solid blue; */
  width: max-content;
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* days/week */
  grid-template-rows: 1fr auto;
  gap: calc(var(--container-padding)/2);
  padding-block: var(--container-padding);
  overflow: auto;
  scroll-snap-type: x mandatory;
  .day-header {
    background-color: var(--color-primary-600);
    color: var(--color-primary-050);
    font-weight: bold;
    text-align: center;
    border-radius: calc(var(--border-radius)/2);
  }
  .day {
    scroll-snap-align: start;
    display: grid;
    column-gap: calc(var(--container-padding)/2);
    border-radius: calc(var(--border-radius)/2);
    /* gap: calc(var(--container-padding)/2); */
    /* grid-template-rows: repeat(var(--grid-rows), 1fr); */

    grid-template-rows: repeat(var(--grid-rows), var(--time-unit-height));
    max-height: calc(var(--time-unit-height)*var(--grid-rows));
    /* height: calc((100dvh - 10%) / var(--grid-rows)); */
    width: calc(var(--cell-size-unit)*51);
    /* border: 1px solid greenyellow; */
    background-color: var(--color-primary-050);
    /* grid-template-columns: 1fr; */
    grid-auto-columns: minmax(0, 1fr);
    .event {
      /* overflow: hidden; */
      /* text-overflow: ellipsis; */
      border: 1px solid gray;
      border-radius: calc(var(--border-radius)/2);
      background-color: var(--color-primary-100);
      overflow-y: auto;
      > * { gap: .1rem; }
      /* min-width: 50%; */
    }
  }
}

.year-cal {
  --months-across: 4;
  display: grid;
  gap: var(--container-padding);
  grid-template-columns: repeat(var(--months-across), 1fr); /* months across */
  grid-template-rows: repeat(calc(12 / var(--months-across)), 1fr); /* months down */
  align-items: start;
  .year-month {
    /* padding: var(--container-padding); */
    display: grid;
    grid-auto-rows: 1fr auto;
    background-color: white;
    align-items: start;
    .month-header {
      display: flex;
      flex-direction: column;
      h2 {
        background-color: var(--color-primary-600);
        color: var(--color-primary-050);
        text-align: center;
        font-size: smaller;
      }
      .days-of-week {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
      }
    }
    .days {
      /*  */
      display: grid;
      gap: calc(var(--container-padding)/2);
      grid-template-columns: repeat(7, 1fr); /* 7 days across */
      grid-template-rows: repeat(7, 1fr); /* 6 weeks down */
      .day-header {
        background-color: var(--color-accent-100);
        border-radius: calc(var(--border-radius)/2);
        text-align: center;
        border: var(--border-subtle);
        border-color: var(--color-accent-300);
        padding-inline: calc(var(--container-padding)/2);
      }
      .day {
        background-color: var(--color-primary-150);
        text-align: right;
        border-radius: calc(var(--border-radius)/2);
        padding-inline: calc(var(--container-padding)/2);
        display: inline-block;
        min-width: max-content;
        button {
          padding-inline: inherit;
          color: inherit;
          background-color: inherit;
          border: none;
          display: inline-flex;
          gap: calc(var(--container-padding)/2);
        }
      }
      .has-attendance-true {
        background-color: var(--color-accent-600);
        color: white;
      }
    }
  }
}


.show-on-hover {
  position: relative;
  .card {
    display: none;
    position: absolute; top: 0; right: 0;
    background-color: white;
    box-shadow: var(--box-shadow);
    color: var(--color-primary-800);
    min-width: 30ch;
    padding: var(--container-padding);
    z-index: 10;
  }
}
.show-on-hover:hover, .show-on-hover:focus {
  .card { display: inline-block; }
}


/*
--------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------
*/




@media (max-width: 110rem) {
  main {
    padding-inline: var(--container-padding);
  }
}

@media (max-width: 50em) {
  .year-cal {
    --months-across: 1;
  }
  main {
    padding-inline: var(--container-padding);
  }
  .calendar {
    grid-auto-columns: 100%;
    width: calc(100vw - 10px);
    .day { width: calc(100vw - 10px); }
  }
  nav#top-main-menu {
    ul {
      display: flex;
      flex-direction: column;
      gap: var(--container-padding);
      padding: var(--container-padding);
      min-height: calc(100dvh - var(--header-max-height) - var(--container-padding));
      li {
        width: initial;
        overflow: initial;
        word-wrap: initial;
        a {
          display: flex;
          flex-direction: row;
          gap: calc(var(--container-padding)*2);
          height: fit-content;
          width: 100%;
          justify-content: flex-start;
          text-align: left;
          img {
            width: 1.6rem;
            height: 1.6rem;
            margin: 0;
          }
        }
      }
    }
  }
  .attendance-dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    .attendance-west-pane {
      grid-column: 1/2;
      grid-row: 1;
    }
  }
  #user-edit-form {
    grid-template-columns: 1fr;
    .taxi-dancer {
      grid-column: 1/3;
    }
  }
  #courses-admin-dashboard {
    grid-template-columns: 1fr;
    #course-edit-pane {
      grid-template-columns: 1fr;
      header.course-title-container,
      #course-blocks-list {
        grid-column: 1;
        grid-row: 2;
      }
      #course-edit-form {
        grid-column: 1;
        grid-row: 1;
      }

      #course-block-dates {
        grid-column: 1;
      }
      #course-block-dates {
        grid-row: 3;
      }
    }
  }
  .taxi-dancers-dashboard {
    form.course-subjects {
      flex-wrap: wrap;
      > * {
        width: 100%;
      }
    }
  }
  #attendance-details {
    grid-column: 1;
    grid-row: 2;
  }

  table.need-have {
    th { writing-mode: vertical-lr; }
  }
  .user-attendance-stats {
    width: revert;
  }
  table.search-users-for-enrollment {
    width: 100%;
  }
  #class_date-edit-form { max-width: 40ch; }
  .taxi-dancer-candidates {
    grid-template-columns: auto;
  }
}


#app_job_runs-table {
  border-collapse: collapse;
  background-color: white;
  td {
    border: var(--border-subtle);
    padding: var(--container-padding);
    vertical-align: top;
  }
  tr.has-errors {
    td:has(img) {
      background-color: hsla(0, 100%, 50%, 0.1);
    }
  }
}

table#imp_errs-table {
  background-color: white;
  border-collapse: collapse;
  td {
    border: var(--border-subtle);
    padding-inline: var(--container-padding);
  }
  td.error-data {
    padding: 0;
    border: none;
    white-space: pre-wrap;
    font-family: 'Lucida Console', monospace;
    font-size: smaller;
    .error {
      border: var(--border-subtle);
      padding-inline: var(--container-padding);
      background-color: var(--color-accent-050);
    }
    .data {
      padding-inline: var(--container-padding);
      /* background-color: var(--color-accent-200); */
    }
  }
}