/* General and Reset Styles:  */
@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Michroma', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    color: #000;
    height: calc(100vh);
    display: flex;
    justify-content: center;
    align-items: center;
}

a {
    color: #000;  
    text-decoration: underline; 
}

a:hover {
    color: #000; 
    text-decoration: none; }

/* Main containers  */

#calendar-container {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-gap: 16px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
}

#all-buttons-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px;
}

#view-buttons-container,
#navigation-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

#view-period {
    font-size: calc(1em + 1vw); 
    margin: 0 10px;
}

#view-container {
    border: 6px solid #000;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-radius: 4px;
    height: 100%;
    overflow: auto;

}

#info-container {
    border: 2px solid #000;
    font-size: 1em;  
    text-transform: none;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    padding: 40px; 
}

/* Cell Styles  */

.cell {
  cursor: pointer;
  user-select: none;
  border: 2px solid #000;
  padding: 2px;
  text-align: left;
  font-size: calc(0.3em + 0.7vw);
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.cell.empty {
  cursor: default;  
  border: 2px solid #000;
  position: relative;
  overflow: hidden;
}

.cell.weekend {
  cursor: default;
  background-color: #000;
  color: #fff;
}

.cell.header {
  cursor: default;
}



.cell.empty::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: repeating-linear-gradient(
        45deg,
        #000,
        #000 4px,
        #fff 4px,
        #fff 10px
    );
  z-index: -1;
}


.delete-button {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px;
    display: none;
    background: none;
    color: #000;
    border: none;
    font: inherit;
    outline: inherit;
}

.cell.period:hover .delete-button {
    display: block;
}

.cell.period {
  overflow: visible;
}

.period-content {
    cursor: text;
    text-transform: none;
    position: absolute;    
    z-index: 2;
}

.period-content:focus {
    outline: none;
}

/* month view specific styles  */

/* Main container for month view */
#view-container.month-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header grid containing day names */
#month-header-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

/* Month grid for days */
#month-grid-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex-grow: 1; /* This will make it take up the remaining space in the view-container */
}




#view-container.month-view .period-content {
    padding: 4px;
    bottom: 8px;
    left: 8px;
    width: calc((100% + 4px) * var(--period-length) - 20px);
    white-space: pre-wrap; 
    height: calc(80% - 12px);
    max-height: calc(80% - 12px);
    overflow-y: auto;
    font-size: calc(0.5em + 1vw);
}

.cell.month::after {
    cursor: default;
    z-index: 1;
}

.cell.month.period::after {
    content: "";
    position: absolute;
    top: 20%;   /* Start box from the lower 80% of a cell */
    left: 4px;  /* 4px margin */
    right: 4px; /* 4px margin */
    bottom: 4px; /* 4px margin */
    background-color: #FFF;
    border: 4px solid #000;
}

.cell.month.period.start::after {
    border-right: none;
    right: 0px;
}

.cell.month.period.end::after {
    border-left: none;
    left: -4px;
}

.cell.month.period.middle::after {
    border-left: none;
    left: -4px;
    border-right: none;
    right: 0px;
}

.cell.month.period.single::after {
}

/* Year view specific styles  */

#view-container.year-view {
    display: grid;
    grid-template-columns: auto repeat(37, 1fr);
    grid-template-rows: auto repeat(12, 1fr);
}

#view-container.year-view .period-content {
    padding: 4px;
    bottom: 0px;
    left: 2px;
    width: calc((100% + 2px) * var(--period-length) - 4px);
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(60% - 4px);
    max-height: calc(60% - 0px);
    font-size: calc(0.3em + 0.7vw);
    /*transition: all 0.5s ease; /* smooth transition */
}

#view-container.year-view .period-content:hover {
    overflow: visible; 
    white-space: normal;
    width: calc((100% + 2px) * (var(--period-length) + 2) - 4px);
    height:  max-content;
    max-height: max-content;
    border: 2px solid #000;
    background: #fff;
    z-index: 3; /* to ensure the text appears on top */
}

.cell.year {
  cursor: default;  
  font-size: calc(0.2em + 0.8vw);

}

/* Month names in year view - first cell of each month row */
#view-container.year-view > .cell:nth-child(38n+39) {
  font-size: calc(0.24em + 0.56vw);
  font-weight: 900;
}

/* Day names in year view - header row (positions 2-38) */
#view-container.year-view > .cell.year:nth-child(n+2):nth-child(-n+38) {
  font-size: calc(0.16em + 0.64vw);
  font-weight: 900;
}

.cell.year::after {
    cursor: default;
    z-index: 1;
}

.cell.year.period::after {
    content: "";
    position: absolute;
    top: 40%;   /* Start box from the lower 50% of a cell */
    left: -2px;  /* 4px margin */
    right: -2px; /* 4px margin */
    bottom: -2px; /* 4px margin */
    background-color: #FFF;
    border: 4px solid #000;
}

.cell.year.period.start::after {
    border-right: none;
    right: 0px;
}

.cell.year.period.end::after {
    border-left: none;
    left: -4px;
}

.cell.year.period.middle::after {
    border-left: none;
    left: -4px;
    border-right: none;
    right: 0px;
}

.cell.year.period.single::after {
    /* Styles for single day periods */
}

/* Info view specific styles */

#info-container {
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.1em;
}

#info-container h1,
#info-container h2,
#info-container b {
  font-family: 'Michroma', sans-serif;
  letter-spacing: normal;
}

#info-container p {
  margin-bottom: 16px;
}

#info-container br {
  margin-bottom: 8px;
}


/* Scrollbar styling (wont work on all browsers) */
::-webkit-scrollbar {
    width: 8px;  
    border: none;
    background: #fff; 
}

::-webkit-scrollbar-thumb {
    background: #000; 
    border-radius: 0px;
    width: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: #000;  
}

::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

/* Print settings */

@media print {
    @page {
        size: landscape;
    }

    .cell.empty::before {
        content: "\2573"; /* a big cross */
        font-size: 4em;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .noprint {
        display: none !important;      
    }
}


/* Button Styles  */

.btn {
  cursor: pointer;
  font-family: 'Michroma', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 1.2;
  top: 0;
  left: 0;
  transition: all .15s linear 0s;
  position: relative;
  padding: 4px 8px 6px 8px;
  margin: 10px 4px;
  border-radius: 4px;
  border: 4px solid #000;
  box-shadow: 6px 6px 0 #000;
  background-color: #fff;
  text-decoration: none;
}

#phoneModeButton.hidden {
  display: none;
}

.btn:first-child {
  margin-left: 0px; 
}

.btn::after {
  transition: all .15s linear 0s;
  content: '';
  position: absolute;
  top: -1.5px;
  right: -7.5px;
  width: 10px;
  height: 10px;
  border-radius: 1.5px;
  background-color: #000;
  transform: rotate(45deg);
  z-index: -1;
}

.btn::before {
  transition: all .15s linear 0s;
  content: '';
  position: absolute;
  bottom: -7.5px;
  left: -1.5px;
  width: 9px;
  height: 9px;
  border-radius: 1.5px;
  background-color: #000;
  transform: rotate(45deg);
  z-index: -1;
}

.btn:hover {
  top: 2px;
  left: 2px;
  box-shadow: -4px 4px 0 #000;
}

.btn:hover::after {
  top: -2px;
  right: -5.5px;
  width: 8px;
  height: 8px;
}

.btn:hover::before {
  bottom: -5.5px;
  left: -2px;
  width: 7px;
  height: 7px;
}

.btn:active{
  top: 4px;
  left: 4px;
  box-shadow: 2px 2px 0 #000;
}

.btn:active::after {
  top: -2.5px;
  right: -4.5px;
  width: 5px;
  height: 5px;
}

.btn:active::before {
  bottom: -4.5px;
  left: -2.5px;
  width: 4px;
  height: 4px;
}

.btn.selected {
  top: 4px;
  left: 4px;
  box-shadow: 2px 2px 0 #000;
  cursor: default;
}

.btn.selected::after {
  top: -2.5px;
  right: -4.5px;
  width: 5px;
  height: 5px;
}

.btn.selected::before {
  bottom: -4.5px;
  left: -2.5px;
  width: 4px;
  height: 4px;
}

.btn.disabled {
  top: 4px;
  left: 4px;
  color: #000 !important;
  box-shadow: 2px 2px 0 #000;
  cursor: default;
}

.btn.disabled::after {
  top: -2.5px;
  right: -4.5px;
  width: 5px;
  height: 5px;
}

.btn.disabled::before {
  bottom: -4.5px;
  left: -2.5px;
  width: 4px;
  height: 4px;
}

.btn:not(.selected):hover {
  top: 2px;
  left: 2px;
  box-shadow: 4px 4px 0 #000;
}

.btn:not(.selected):active {
  top: 4px;
  left: 4px;
  box-shadow: 2px 2px 0 #000;
}

/* Apply a slight delay when the next/prev buttons return to the normal state */
.btn.next-prev {
  transition: all .15s linear .05s;
}

/* Apply the normal transition when the next/prev buttons are active */
.btn.next-prev:active {
  transition: all .15s linear 0s;
}