/*
 * © Copyright 2022 · Willem Vervuurt, Studio Delfuego
 * 
 * You can modify, use and distribute this package under one of two licenses:
 * 1. GNU AGPLv3
 * 2. A perpetual, non-revocable and 100% free (as in beer) do-what-you-want 
 *    license that allows both non-commercial and commercial use, under conditions.
 *    See LICENSE.md for details.
 * 
 *    (it boils down to: do what you want as long as you're building and/or
 *     using calendar views, but don't embed this package or a modified version
 *     of it in free or paid-for software libraries and packages aimed at developers).
 */


/*
 *  Global
 */

:root {
  --nc-transparent: rgba(255, 255, 255, 0);
  --nc-highlight-bg: rgba(var(--colors-primary-500), 0.02);
  --nc-highlight-border: rgba(var(--colors-primary-500), 0.4);
  --nc-weekend-border: rgba(var(--colors-gray-500), 0.2);
  --nc-weekend-bg: rgba(var(--colors-gray-900), 0);
  --nc-event-height-multi-day: 2.2em;
  --nc-event-border: rgba(10, 10, 10, 0.3);
  --nc-event-border-radius: 7px;
}

.nova-calendar.noselect {
cursor: default;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.noscrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.noscrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


/*
 *  Controls (above calendar)
 */

#nc-control {
  border: 0px #555 solid;
  position: relative;
  height: 3em;
}

#nc-control a.disabled {
  pointer-events: none;
  opacity: 0.2;
}

#nc-control > a, #nc-control > h1 {
  display: block;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
}

#nc-control > a.left {
  left: 0;
  right: initial;
}

#nc-control > a.right {
  right: 0;
  left: initial;
}

#nc-control h1 span {
  cursor: pointer;
}


/*
 *  Calendar global
 */

div.nova-calendar {
  width: 100%;
}

div.nova-calendar div.nc-header {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(7, 1fr);
}

div.nova-calendar div.nc-header div {
  padding: 0.6em 0.6em 0.5em 0.6em;
  text-align: left;
  font-weight: bold;
  word-break: break-all;
}

div.nova-calendar .week {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

div.nova-calendar .nc-col-1 { grid-column: 1 / 2; }
div.nova-calendar .nc-col-2 { grid-column: 2 / 3; }
div.nova-calendar .nc-col-3 { grid-column: 3 / 4; }
div.nova-calendar .nc-col-4 { grid-column: 4 / 5; }
div.nova-calendar .nc-col-5 { grid-column: 5 / 6; }
div.nova-calendar .nc-col-6 { grid-column: 6 / 7; }
div.nova-calendar .nc-col-7 { grid-column: 7 / -1; }

div.nova-calendar .nc-event.multi.span-1 { grid-column-end: span 1; }
div.nova-calendar .nc-event.multi.span-2 { grid-column-end: span 2; }
div.nova-calendar .nc-event.multi.span-3 { grid-column-end: span 3; }
div.nova-calendar .nc-event.multi.span-4 { grid-column-end: span 4; }
div.nova-calendar .nc-event.multi.span-5 { grid-column-end: span 5; }
div.nova-calendar .nc-event.multi.span-6 { grid-column-end: span 6; }
div.nova-calendar .nc-event.multi.span-7 { grid-column-end: span 7; }


/*
 *  Day cells
 */

div.nova-calendar .day {
  z-index: 0;
  grid-row: 1/-1;
  min-height: 9em;
  border-width: 0.5px;
  border-color: rgba(var(--colors-gray-500), 0.15);
}

div.nova-calendar .day:not(.withinRange) {
  opacity: 0.5;
  background: repeating-linear-gradient(
    -45deg,
    rgba(225,225,255, 0.1),
    rgba(225,225,255, 0.1) 4px,
    rgba(100,100,100, 0.1) 4px,
    rgba(100,100,100, 0.1) 6px
  );
}

div.nova-calendar .day.today {

}

div.nova-calendar .dayheader {
  z-index: 1;
  padding: 0.4em;
}

div.nova-calendar .day .dayheader .daylabel {
  font-size: 9pt;
  opacity: 0.84;
}

div.nova-calendar .day.today .dayheader .daylabel {
  font-size: 10pt;
  font-weight: bold;
  opacity: 1.0;
  background-color: rgba(var(--colors-primary-500), 0.2);
  padding: 0.2em 0.5em;
  border-radius: 100%;
}


/*
 *  Day Badges
 */
div.nova-calendar .dayheader .badges {
  max-width: 80%;
  float: right;
}

div.nova-calendar .dayheader span.badge {
  opacity: 0.8;
  font-size: 10pt;
  line-height: 12pt;
  min-width: 22px;
  text-align: center;
  padding: 0.25em;
}


/*
 *  Events, general
 */

div.nova-calendar .week-events {
  z-index: 2;
  margin-top: 2.2em;
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-flow: column dense;
}

div.nova-calendar .single-day-events {
  border: 0px #f00 solid;      
  grid-row-start: span 9000;
  min-height: 2px;
  margin-bottom: 1em;
}

div.nova-calendar .nc-event {
  transition: opacity 0.25s;
  opacity: 0.92;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  min-height: var(--nc-event-height-multi-day);
  margin: 0.1em 0.1em;
  padding: 0.2em;
  font-size: 10pt;
  text-align: left;
  border-bottom: 1px var(--nc-event-border) solid;
}

div.nova-calendar .nc-event:not(.withinRange) {
  opacity: 0.6;
}

div.nova-calendar .nc-event:hover {
  opacity: 1.0;
}

div.nova-calendar .nc-event.starts {
  border-top-left-radius: var(--nc-event-border-radius);
  border-bottom-left-radius: var(--nc-event-border-radius);
}

div.nova-calendar .nc-event.ends {
  border-top-right-radius: var(--nc-event-border-radius);
  border-bottom-right-radius: var(--nc-event-border-radius);
}

div.nova-calendar div.nc-event.clickable {
  cursor: pointer;
}


/*
 *  Events, single day
 */

div.nova-calendar div.nc-event div.name {
  grid-row: 1/2;
  grid-column: 1/2;
  white-space: nowrap; 
  overflow: scroll;
  border: 0px #fff dashed;
  font-weight: bold;
  margin-right: 0.2em;
  margin-left: 0.2em;
}

div.nova-calendar div.nc-event:not(.starts) div.name {
  font-weight: normal;
  font-size: 9pt;
  opacity: 0.8;
  padding-top: 0.1em;
}

/*
 *  Event Badges
 */

div.nova-calendar div.nc-event div.badges {
  grid-row: 1 / 2;
  grid-column: 2 / -1;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  text-align: right;
  border: 0px #0f0 solid;
}

div.nova-calendar div.nc-event div.badges span.badge-bg {
  display: inline-block;
  border-radius: 4px;
  background-color: rgba(50,50,64,0.5);
  border-bottom: 1px rgba(var(--colors-primary-500), 0.5) solid;
  margin-left: 0.5px;
  margin-right: 0.5px;
}

div.nova-calendar div.nc-event div.badges span.badge {
  opacity: 1.0;
  font-size: 9pt;
  line-height: 12pt;
  min-width: 22px;
  text-align: center;
  padding: 0.25em;
}


/*
 *  Event content
 */

div.nova-calendar .nc-event div.content {
  grid-row: 2 / 3;
  grid-column: 1 / span 2;
  overflow: scroll;
  border: 0px #f00 dashed;
  padding-left: 0.2em;
}

div.nova-calendar div.nc-event span.time {
  display: inline-block;
  font-size: 9pt;
  opacity: 0.8;
  margin-right: 0.2em;
}

div.nova-calendar div.nc-event span.notes {
  font-size: 9pt;
  line-height: 10pt;
}


/*
 *  Events, multi day
 */

div.nova-calendar .nc-event.multi {
  max-height: var(--nc-event-height-multi-day);
  align-items: top;
  overflow: hidden;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto;
}

div.nova-calendar .nc-event:not(.starts) {
  border-left: 1px rgba(228,228,228,0.6) dashed;
  opacity: 0.8;
}

div.nova-calendar .nc-event:not(.ends) {
  border-right: 1px rgba(228,228,228,0.6) dashed;
}

div.nova-calendar div.nc-event.multi div.name {
  white-space: nowrap; 
  overflow: scroll;
  grid-row: 1 / -1;
  grid-column: 1 / 2;
}

div.nova-calendar div.nc-event.multi div.badges {
  white-space: nowrap; 
  overflow: scroll;
  grid-row: 1 / -1;
  grid-column: 3 / -1;
}

div.nova-calendar div.nc-event.multi div.content {
  white-space: nowrap; 
  overflow: scroll;
  grid-row: 1 / -1;
  grid-column: 2 / 3;
}