@import url("./font-awesome.min.css");

:root {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8pt;

  --normal-day: white;
  --half-day: orange;
  --full-day: rgb(209, 0, 0);
  --sa-holiday: rgba(0, 149, 255, 0.75);
  --india-holiday: rgba(208, 0, 255, 0.804);

  --day-height: 3rem;
  --day-padding: calc(var(--day-height) / 6);
  --day-height-hover: calc(var(--day-height) * 3);
  --day-border: 1px solid lightgray;

  --event-background: lightblue;
  --event-border: 1px darkblue solid;
  --event-border-radius: var(--day-padding);

  --day-top: 3em;

   user-select: none;
   -webkit-user-select: none;
}


body {
  display: grid;
  grid-template-columns: 0.1fr 1000fr;
  grid-template-rows: auto;
  grid-template-areas:
    'header header'
    'aside main';
}

@media screen and (min-width: 1700px) {
  body {
     grid-template-columns: 1fr 10fr;
  }
}



@media screen and (max-width: 1700px) {
  aside {
    display: none;
  }
}


#page-title {
  grid-area: header;
}

aside {
  grid-area: aside;
}

aside > ul {
  padding: var(--day-padding);
  margin: 0;
  list-style: none;
  line-height: 2;
  & li .fa {
    margin-inline-end: var(--day-padding);
  }
}

main {
  grid-area: main;
  display: grid;
  grid-template-rows:
    [day-of-week-start] auto[day-of-week-end
    jan-start] var(
      --day-top
    ) [jan-icons-start] auto [jan-icons-end jan-all-start jan-eng-start] auto [jan-eng-end jan-ba-start] auto [jan-ba-end jan-fresher-start] auto [jan-fresher-end jan-all-end jan-end
    feb-start] var(--day-top) [feb-icons-start] auto [feb-icons-end feb-all-start feb-eng-start] auto [feb-eng-end feb-ba-start] auto [feb-ba-end feb-fresher-start] auto [feb-fresher-end feb-all-end feb-end
    mar-start] var(--day-top) [mar-icons-start] auto [mar-icons-end mar-all-start mar-eng-start] auto [mar-eng-end mar-ba-start] auto [mar-ba-end mar-fresher-start] auto [mar-fresher-end mar-all-end mar-end
    apr-start] var(--day-top) [apr-icons-start] auto [apr-icons-end apr-all-start apr-eng-start] auto [apr-eng-end apr-ba-start] auto [apr-ba-end apr-fresher-start] auto [apr-fresher-end apr-all-end apr-end
    may-start] var(--day-top) [may-icons-start] auto [may-icons-end may-all-start may-eng-start] auto [may-eng-end may-ba-start] auto [may-ba-end may-fresher-start] auto [may-fresher-end may-all-end may-end
    jun-start] var(--day-top) [jun-icons-start] auto [jun-icons-end jun-all-start jun-eng-start] auto [jun-eng-end jun-ba-start] auto [jun-ba-end jun-fresher-start] auto [jun-fresher-end jun-all-end jun-end
    jul-start] var(--day-top) [jul-icons-start] auto [jul-icons-end jul-all-start jul-eng-start] auto [jul-eng-end jul-ba-start] auto [jul-ba-end jul-fresher-start] auto [jul-fresher-end jul-all-end jul-end
    aug-start] var(--day-top) [aug-icons-start] auto [aug-icons-end aug-all-start aug-eng-start] auto [aug-eng-end aug-ba-start] auto [aug-ba-end aug-fresher-start] auto [aug-fresher-end aug-all-end aug-end
    sep-start] var(--day-top) [sep-icons-start] auto [sep-icons-end sep-all-start sep-eng-start] auto [sep-eng-end sep-ba-start] auto [sep-ba-end sep-fresher-start] auto [sep-fresher-end sep-all-end sep-end
    oct-start] var(--day-top) [oct-icons-start] auto [oct-icons-end oct-all-start oct-eng-start] auto [oct-eng-end oct-ba-start] auto [oct-ba-end oct-fresher-start] auto [oct-fresher-end oct-all-end oct-end
    nov-start] var(--day-top) [nov-icons-start] auto [nov-icons-end nov-all-start nov-eng-start] auto [nov-eng-end nov-ba-start] auto [nov-ba-end nov-fresher-start] auto [nov-fresher-end nov-all-end nov-end
    dec-start] var(--day-top) [dec-icons-start] auto [dec-icons-end dec-all-start dec-eng-start] auto [dec-eng-end dec-ba-start] auto [dec-ba-end dec-fresher-start] auto [dec-fresher-end dec-all-end dec-end];
  grid-template-columns: [month-start] auto [month-end] repeat(37, auto) [row-end];
}

#days-of-week {
  grid-row: day-of-week-start / day-of-week-end;
  grid-column: month-end/row-end;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: subgrid;

  & div {
    display: flex;
    font-size: small;
    border: var(--day-border);
    & p {
      padding-inline: var(--day-padding);
      writing-mode: vertical-lr;
      text-orientation: upright;
      margin-block: auto;
    }
  }
}

#year {
  font-size: x-large;
  padding: var(--day-padding);
}

#month-labels {
  grid-row: jan-start/dec-end;
  grid-column: month;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: subgrid;

  & div {
    min-width: var(--day-height);
    min-height: var(--day-height);
    padding: var(--day-padding);
    border: var(--day-border);
  }

  /* & div:hover {
    min-height: var(--day-height-hover);
  } */
}

#jan-label {
  grid-row: jan;
}

#feb-label {
  grid-row: feb;
}

#mar-label {
  grid-row: mar;
}

#apr-label {
  grid-row: apr;
}

#may-label {
  grid-row: may;
}

#jun-label {
  grid-row: jun;
}

#jul-label {
  grid-row: jul;
}

#aug-label {
  grid-row: aug;
}

#sep-label {
  grid-row: sep;
}

#oct-label {
  grid-row: oct;
}

#nov-label {
  grid-row: nov;
}

#dec-label {
  grid-row: dec;
}

#year-calendar {
  grid-column: month-end/row-end;
  grid-row: jan-start/dec-end;
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;

  & .month-detail {
    grid-column: month-end/row-end;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: subgrid;
  }

  & > #jan {
    grid-row: jan;
  }
  & > #feb {
    grid-row: feb;
  }
  & > #mar {
    grid-row: mar;
  }
  & > #apr {
    grid-row: apr;
  }
  & > #may {
    grid-row: may;
  }
  & > #jun {
    grid-row: jun;
  }
  & > #jul {
    grid-row: jul;
  }
  & > #aug {
    grid-row: aug;
  }
  & > #sep {
    grid-row: sep;
  }
  & > #oct {
    grid-row: oct;
  }
  & > #nov {
    grid-row: nov;
  }
  & > #dec {
    grid-row: dec;
  }
}

.day {
  padding: var(--day-padding);
  padding-inline-end: 0;
  background-color: var(--normal-day);
  min-width: var(--day-height);
  min-height: var(--day-height);
  border: var(--day-border);
}

/* .day:hover {
  min-height: var(--day-height-hover);
  min-width: var(--day-height-hover);
} */

.empty {
  background-color: grey;
}

.legend {
  padding-inline-start: var(--day-padding);
  min-height: 3em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  text-align: center;

  & > i.fa.rotated {
    rotate: 45deg;
  }
}

.weekend {
  background-color: lightgreen;
}

.weekday {
  background-color: var(--normal-day);
  border: 1px solid lightgray;
}

.sa-holiday {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 0.5) 50%, var(--sa-holiday));
}

.india-holiday {
  background-image: linear-gradient(45deg, var(--india-holiday), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5));
}

.sa-holiday.india-holiday {
  background-image: linear-gradient(45deg, var(--india-holiday),rgba(255, 255, 255, 0.5) 50%, var(--sa-holiday));
}

.half-day {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 25%, var(--half-day));
}

.full-day,
.half-day.full-day {
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 25%, var(--full-day));
}

.level-up {
  background-color: var(--event-background);
  margin: var(--day-padding);
  padding: var(--day-padding);
  border: var(--event-border);
  border-radius: var(--event-border-radius);
  max-height: 1lh;
  line-height: 1.3em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tooltip-holder {
  position: relative;
  & .icon {
    text-align: end;
  }
}

.tooltip-text {
  display: none;
  position: absolute;
  z-index: 100;

  background-color: white;

  left: calc(-1 * var(--day-height) / 2);
  top: calc(-2.5 * var(--day-height));
  width: calc(var(--day-height) * 2);
  height: calc(var(--day-height) * 2);
  padding: var(--day-padding);
  border: var(--day-border);
  border-radius: var(--event-border-radius);
  white-space: initial;
  text-align: center;

  opacity: 0%;
  transition: opacity 5s;
}

.tooltip-holder:hover .tooltip-text {
  display: flex;
  opacity: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.event {
  padding: 0.125em;
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
}

.track-icon {
  padding-inline: 0.25em;
}

.day-icons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.escape {
  min-width: 4em;
  min-height: 4em;
  background-color: rgba(247, 58, 58, 0.75);
  z-index: 2;
}

#escape-text {
  rotate: 45deg;
  text-align: center;
}


@media print {

  aside {
    display: none;
  }

  .escape {
    min-width: 3em;
    min-height: 3em;
  }

  #escape-text {
    rotate: 0deg;
    text-align: center;
  }

  #days-of-week > div {
    max-height: 3em;
    overflow: hidden;
  }

  .level-up {
    line-height: 1em;
    max-height: 1em;
  }
}