/* Fonts */

@font-face {
  font-family: ForkAwesome;
  src: local("ForkAwesome"), url(/static/fonts/forkawesome-webfont.woff2);
}

/* Variables */

:root {
  --black: #000;
  --grey: #515151;
  --grey-light: #f9f9f9;
  --white: #ffffff;
  --pink: #e090d0;
  --pink-opacity: #e090d025;
  --purple: #9050a0;
  --purple-opacity: #9050a080;
  --red: #da0505;
}

/* Common */

html {
  background: var(--white);
  color: var(--black);
  font-family: sans-serif;
  font-size: 11pt;
  line-height: 1.5;
  overflow: hidden;
}

body {
  height: calc(100vh - 4em);
  margin: 4em 0 0 0;
  overflow: scroll;
}

body[id$=login] {
  margin-top: 0;
}

main {
  border-top: 1px solid transparent;
  margin: 0 auto;
  max-width: 1400px;
  overflow: auto;
  padding: 0 1em;
}

body[id$="followup"] main {
  max-width: none;
}

main ::before {
  display: inline-block;
  font-size: 1.5rem;
  width: 1em;
}

main div[class^="ql"] ::before {
  font-size: 1em;
  width: auto;
}

::before {
  font-family: ForkAwesome;
  text-align: center;
  padding-right: 0.5em;
}

a:hover::before,
a:focus::before {
  text-decoration: none;
}

a {
  color: var(--purple);
  text-decoration: none;
  transition: 0.2s;
}

a:hover {
  color: var(--pink);
  text-decoration: underline;
}

body[id$="followup"] table a {
  color: inherit
}

ul {
  break-inside: avoid;
}

li {
  list-style: none;
}

details ul {
  padding: 0;
}

summary {
  font-weight: bold;
}

dd {
  break-before: avoid;
  break-inside: avoid;
  margin: 0;
}

#page-spectacles h2,
#page-spectacle h2,
body[id$="followup"] h2 {
  display: none;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

h2,
#page-spectacle main > dl:first-of-type {
  font-size: 2em;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h3 {
  clear: both;
  font-size: 1.6em;
}

/* Flash Messages */

#messages {
  bottom: 0;
  font-size: 1.2em;
  max-width: 100%;
  position: fixed;
  right: 0;
  width: 20em;
}

#messages section {
  backdrop-filter: blur(0.3em);
  background: #fffc;
  border: 1px solid;
  border-radius: 0.1em;
  box-shadow: 0.1em 0.1em 0.3em #0004;
  font-size: 0.8em;
  line-height: 1.2;
  margin: 1em;
  padding: 1em 2em 1em 1em;
  position: relative;
}

#messages section input {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  line-height: 0.5;
  font-size: 1.5em;
  margin: 0;
  padding: 0.2em;
  position: absolute;
  right: 0;
  top: 0;
  width: min-content;
}

#messages section input::after {
  content: '×';
}

#messages section:has(input:checked) {
  display: none;
}

/* Nav */

body::before {
  display: block;
  height: 4em;
  left: 0;
  position: fixed;
  top: 0;
  transform: scale(0.75) translate(-12%, -25%);
  z-index: 3;
}

header {
  background: var(--black);
  height: 4em;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 2
}

header h1 {
  display: block;
  font-size: 0;
  height: 100%;
  position: absolute;
  width: 20rem;
}

header h1 a {
  background: url(/static/logo.jpg) 1rem center / auto 100% no-repeat;
  display: block;
  height: 100%;
  width: 100%;
}

header nav::before {
  align-items: center;
  background: var(--black);
  color: var(--purple);
  content: "\f0c9";
  display: flex;
  height: 3em;
  justify-content: center;
  padding-right: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 3em;
  z-index: 2;
}

header nav {
  box-sizing: border-box;
  display: block;
  font-size: 1.3em;
  height: 3em;
  margin-left: auto;
  order: -1;
  overflow: hidden;
  padding: 1rem;
  position: relative;
  transition-delay: 0.25s;
  transition-property: z-index;
  width: 3em;
  z-index: 3;
}

header nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

header nav ul li {
  padding-right: 1rem;
}

header nav:hover {
  background: var(--black);
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  width: 33vw;
  z-index: 1;
}

header nav:hover ul {
  background: var(--black);
  max-height: 20em;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
}

header nav:hover li:last-child {
  margin-left: 0;
}

header nav:hover ~ * {
  display: block !important;
  height: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}

header nav:hover::before {
  display: none;
}

header nav li:first-child a::before {
  display: none;
}

header > ul {
  align-items: center;
  display: flex;
  font-size: 1.3em;
  height: 100%;
  justify-content: center;
  left: 50%;
  margin: 0;
  padding: 0;
  position: absolute;
  transform: translate(-50%);
}

header > ul a {
  padding: 0 2em;
}

body[id^="page-spectacle"] header > ul li:first-of-type a,
body[id="page-roadmap_send"] header > ul li:first-of-type a,
body[id$="followup"] header > ul li:nth-of-type(2) a {
  text-decoration: underline;
}

/* Forms */

[hidden],
datalist {
  display: none !important;
}

fieldset {
  border: inherit;
}

fieldset label {
  border: inherit;
  display: block;
}

form {
  width: 50%;
}

form > * {
  display: block;
}

#spectacles-list > li:nth-of-type(2) {
  border-top: 1px solid var(--purple-opacity);
}

form ul {
  margin: 0 0 1rem 0;
  padding: 0;
}

form ul li:last-of-type {
  border-bottom: 1px solid var(--purple-opacity);
}

form div[class^="ql"] ul,
form div[class^="ql"] ol {
  margin: 0;
  padding: 0;
}

form div[class^="ql"] ul li,
form div[class^="ql"] ol li {
  border-bottom: 0;
}

input,
select,
textarea {
  accent-color: var(--pink);
  background: inherit;
  border: 1px solid var(--pink);
  border-radius: 0;
  margin-bottom: 1em;
  padding: 1em;
  /* 100% - padding left and right - border left and right */
  width: calc(100% - 2em - 2px);
}

input[type="file"] {
  height: auto;
  margin-right: 1em;
}

option {
  width: 100%;
}

input:focus,
textarea:focus {
  background: var(--grey-light);
}

input[type="color"] {
  cursor: pointer;
  height: 3em;
  padding: 0.2em;
  width: 3em;
}

input[type="radio"],
input[type="checkbox"] {
  height: 1.2em;
  margin: 0 1em 0 0;
  width: 1.2em;
}

label:has(+[required])::after {
  content: "*";
}

button::before {
  padding-right: 0;
}

.button {
  background: var(--purple);
  border: 1px solid var(--purple);
  color: var(--white);
  float: right;
  margin: 1rem 0;
  padding: 1em;
  text-align: center;
  transition: 0.2s;
  width: 35%;
}

.button:hover,
.button:focus {
  background: var(--purple-opacity);
  cursor: pointer;
}

.add,
.cancel,
.delete {
  background: inherit;
  border: 0;
  cursor: pointer;
  font-size: 0;
}

.cancel {
  float: left;
}

.delete {
  margin-left: 1rem;
}

.add:hover::before,
.cancel:hover::before,
.delete:hover::before {
  color: var(--pink);
  cursor: pointer;
}

.add::before {
  color: var(--purple);
  content: "\f196";
  font-size: 2rem;
}

.cancel::before {
  content: "\f190";
}

.delete::before {
  color: var(--red);
  content: "\f014";
  font-size: 1.5rem;
  padding: 0.2em;
}

.cancel::before {
  color: var(--red);
  font-size: 2rem;
  margin: 1rem 0;
}

#page-spectacle_create form,
#page-spectacle_update form {
  display: grid;
  gap: 1em;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: 100%;
}

#page-spectacle_create form h3,
#page-spectacle_update form h3 {
  grid-column: span 4;
  margin-bottom: 0.5em;
}

#page-spectacle_create form > label:has(> textarea, > input[type=checkbox]),
#page-spectacle_update form > label:has(> textarea, > input[type=checkbox]) {
  grid-column: span 4;
  padding-right: calc(50% + 1em / 2);
}

#page-spectacle_create form > label:has(ul),
#page-spectacle_update form > label:has(ul) {
  grid-column: span 2;
}

#page-spectacle_create form > label:has([data-name=beeper], [data-name=card]),
#page-spectacle_update form > label:has([data-name=beeper], [data-name=card]) {
  grid-column: span 1;
}

#page-spectacle_create form div,
#page-spectacle_update form div {
  display: flex;
}

#spectacles-list > li {
  padding: 1rem;
}

.item-list {
  padding: 0 1rem 1rem;
}

.item-list > li:nth-child(even),
#spectacles-list > li:nth-child(even) {
  background: var(--grey-light);
}

/* Before */

.active::before {
  border: 2px solid var(--purple);
  border-radius: 15%;
  padding: 0.1em 0.25em;
}

.artist,
.beeper,
.card,
.copy,
.costume,
.create,
.filter,
.hide,
.makeup,
.next,
.overview,
.previous,
.remove,
.search,
.send,
.show,
.sound,
.update,
.vehicle {
  font-size: 0;
}

.artist::before {
  content: "👩";
}

.beeper::before {
  content: "🛣️";
}

.card::before {
  content: "💳";
}

.configuration::before {
  content: "👩";
}

.copy::before {
  content: "\f0c5";
}

.costume::before {
  content: "💃";
}

.create::before {
  content: "\f196";
}

.date::before {
  content: "📅";
}

.filter::before {
  content: "\f0b0";
}

.hide::before {
  content: "\f070";
}

.makeup::before {
  content: "💄";
}

.next::before {
  content: "\f105";
  padding-left: 0.5em;
}

.overview::before {
  content: "\f06e";
}

.place::before {
  content: "\f041";
}

.previous::before {
  content: "\f104";
  padding-left: 0.5em;
}

.remove::before {
  content: "\f1f8";
}

.search::before {
  content: "\f002";
}

.send::before {
  content: "\f016";
}

.show::before {
  content: "\f06e";
}

.sound::before {
  content: "🎵";
}

.update::before {
  content: "\f044";
}

.vehicle::before {
  content: "🚗";
}

.contract::before {
  content: "🪪";
}

.event::before {
  content: "🎉";
}

.pocket::before {
  content: "📁";
}

.spectacles::before {
  content: "✨";
}

/* Actions */

.actions {
  background: white;
  display: flex;
  font-size: 2em;
  margin: 0;
  padding-left: 0.5em;
  position: fixed;
  right: 1rem;
  top: 5rem;
}

/* Follow, Time, Days */

.follow,
.time,
.days {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 0;
  width: 100%;
}

.time li:nth-child(2) {
  text-align: center;
  width: 12em;
}

.follow *::before {
  margin: 0 2em;
  padding: 0.1em 0.25em;
}

.days {
  margin-top: 0;
}

.days li {
  cursor: pointer;
  padding: 0 0.5em;
}

.days a {
  color: inherit;
}

.days .active {
  text-decoration: underline;
}

/* Login */

#page-login header::before,
#page-login header nav {
  display: none;
}

#page-login header {
  height: auto;
}

#page-login {
  align-items: center;
  background: var(--black);
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

#page-login main {
  align-items: center;
  display: flex;
  margin: auto;
}

#page-login img {
  display: block;
  margin: 1em 2em;
  width: 40em;
}

#page-login main input:not([type="submit"]) {
  background: var(--white);
}

#page-login form {
  width: 100%;
}

#page-login label {
  color: var(--white);
}

#page-login main section {
  width: 50%;
}

#page-login .cancel {
  display: none;
}

#page-login a {
  display: block;
  float: left;
  line-height: 0.75;
  margin: 1rem 0;
  padding: 1em 0;
}

/* Artists, Costumes, Make-up, Persons, Sounds, Vehicles */

#page-artists h2,
#page-beepers h2,
#page-cards h2,
#page-costumes h2,
#page-makeups h2,
#page-persons h2,
#page-sounds h2,
#page-vehicles h2 {
  font-size: 2em;
}

#page-artists div,
#page-beepers div,
#page-cards div,
#page-costumes div,
#page-makeups div,
#page-persons div,
#page-sounds div,
#page-vehicles div
{
  display: flex;
  margin-bottom: 1em;
  width: 50%;
}

#page-artists div:hover,
#page-beepers div:hover,
#page-cards div:hover,
#page-costumes div:hover,
#page-makeups div:hover,
#page-persons div:hover,
#page-sounds div:hover,
#page-vehicles div:hover
{
  background: var(--grey-light);
}

#page-artists dl ::before,
#page-beepers dl ::before,
#page-cards dl ::before,
#page-costumes dl ::before,
#page-makeups dl ::before,
#page-persons dl ::before,
#page-sounds dl ::before,
#page-vehicles dl ::before
{
  font-size: 1rem;
  padding: 0;
}

#page-artists dt a,
#page-beepers dt a,
#page-cards dt a,
#page-costumes dt a,
#page-makeups dt a,
#page-persons dt a,
#page-sounds dt a,
#page-vehicles dt a
{
  color: inherit;
}

#page-artists div dt,
#page-beepers div dt,
#page-cards div dt,
#page-costumes div dt,
#page-makeups div dt,
#page-persons div dt,
#page-sounds div dt,
#page-vehicles div dt
{
  width: 75%;
}

#page-artists div dd,
#page-beepers div dd,
#page-cards div dd,
#page-costumes div dd,
#page-makeups div dd,
#page-sounds div dd,
#page-vehicles div dd
{
  margin: 0 1em;
}

#page-artists div dt::before,
#page-beepers div dt::before,
#page-cards div dt::before,
#page-costumes div dt::before,
#page-makeups div dt::before,
#page-sounds div dt::before,
#page-vehicles div dt::before
{
  color: var(--data-color);
  content: "\f0c8";
  padding-right: 0.5em;
}

/* Spectacles */

#page-spectacles_filter h3,
#page-spectacles h3 {
  display: none;
}

#page-spectacles_filter h2,
#page-spectacles_filter form {
  width: 100%;
}

#page-spectacles_filter main,
#page-spectacles main {
  display: flex;
  flex-wrap: wrap;
}

.spectacle {
  box-sizing: border-box;
  font-size: 10pt;
  padding: 0.5em;
  width: 25%;
}

.spectacle a {
  background: var(--pink-opacity);
  color: var(--grey);
  display: block;
  padding: 0.5em;
  transition: 0.5s;
}

.spectacle a:hover {
  background: var(--pink);
  text-decoration: none;
}

.spectacle a dl {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.spectacle a dl dt {
  text-align: center;
  width: 2rem;
}

.spectacle a dl dd {
  line-height: 1.6;
  width: calc(100% - 2rem);
}

.spectacle a dl dt {
  font-size: 0;
}

.spectacle .place {
  display: none;
}

.spectacle a dl dd:first-of-type {
  font-size: 1.4em;
  line-height: 1.1;
  margin: 0.5em 0;
  width: 100%;
}

.spectacle a dl dd + dd {
  padding-left: 2rem;
}

.spectacle a dl ::before {
  font-size: 1.2rem;
  line-height: 1;
  margin: 0;
}

.spectacle .half {
  width: calc(50% - 2rem);
}


/* Roadmap */

#images_comment {
  display: none;
}

#add-images,
#images li,
#recipients li {
  align-items: center;
  display: flex;
}

#images {
  padding: 0;
  width: 50%;
}

#images li {
  align-items: center;
  justify-content: space-between;
  margin: 0.5em;
  padding: 0.5em;
}

#images li:nth-child(even) {
  background: var(--grey-light);
}

#images img {
  max-width: 10em;
}

#add-images .button,
#images .button {
  float: initial;
  width: auto;
}

#add-images {
  justify-content: space-between;
}

#recipients li input {
  width: 50%;
}

#page-roadmap_send div:not([class^="ql"]) {
  display: flex;
  width: 100%;
}

/* Follows */

table {
  border-spacing: 0;
  display: block;
  max-height: calc(100vh - 4rem);
  margin: 0 auto;
  overflow: auto;
  scrollbar-color: var(--purple) var(--white);
  max-width: calc(100vw - 2rem);
  width: min-content;
}

tr td,
tbody th,
thead th {
  border-bottom: 2px solid var(--pink-opacity);
}

td,
th {
  border-right: 2px solid var(--pink-opacity);
  padding: 0.3em;
}

td {
  position: relative;
}

td select {
  appearance: none;
  border: none;
  cursor: pointer;
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

td select option[hidden] {
  display: none !important;
}

thead th {
  top: 0;
}

tbody th {
  left: 0;
  position: sticky;
  text-align: right;
  white-space: nowrap;
  z-index: 1;
}

tbody th span {
  font-weight: bold;
  margin-left: 1em;
}

thead th {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 1;
}

tbody tr {
  text-align: center;
}

tbody tr:nth-child(odd) > * {
  background: var(--white);
}

tbody tr:nth-child(even) > * {
  background: var(--grey-light);
}

th {
  font-weight: normal;
}

thead span {
  display: block;
  font-weight: bold;
}

#page-makeups_followup td:has(span:not(:empty)) {
  background: var(--cell-background-color) !important;
}

/* For Firefox */
#page-makeups_followup span:not(:empty) {
  background: var(--cell-background-color) !important;
  display: block;
  margin: -0.3em;
  padding: 0.3em;
}

#page-vehicles_followup tbody th,
#page-sounds_followup tbody th {
  min-width: 20vw;
  white-space: normal;
}