body{
  background: var(--colour-green);
  color: white;
}

h1, h2{
  color: white;
}

.login-section{
  padding-top: 150px;
  @media only screen and (max-width: 800px) {
    padding-top: 170px;
  }
}

header #loggedin-indicator {
  flex-wrap: wrap;
  #userInfo {
    color: white;
  }
  #log-out{
    filter: invert(1);
  }
  #calendar-phone-settings{
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 0 0 100%;
    margin-top: 11px;
    label{
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.85);
    }
    input{
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.4);
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      min-width: 190px;
      font-size: 0.85rem;
      &:focus{
        outline: none;
        border-color: rgba(255,255,255,0.8);
        box-shadow: 0 0 0 2px rgba(255,255,255,0.15);
      }
      &.input-error{
        border-color: rgba(255,100,100,0.9);
        box-shadow: 0 0 0 1px rgba(255,100,100,0.4);
      }
    }
  }
  .calendar-phone-feedback{
    font-size: 0.7rem;
    color: rgba(255,255,255,0.7);
    min-height: 0.8rem;
    &.error{
      color: #ffb6b6;
    }
    &.success{
      color: #b8ffc9;
    }
  }
}

#calendar-container {
  background-color: initial;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  /* padding-inline: var(--margins); */
}

.calendar-header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15px 10px;
  background-color: initial;
  color: #fff;
}

.month-selector,
.year-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-arrow {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5em;
  cursor: pointer;
  padding: 0 10px;
  font-weight: bold;
  line-height: 1;
  transition: opacity 0.2s ease;
  width: 23px;
  height: 23px;
  background: url("/wp-content/themes/legendary/images/back.png");
  background-size: contain;
  &#next-month, &#next-year{
    transform: rotate(180deg);
  }
}
 .nav-arrow:hover, .nav-arrow:focus {
    border: initial;
 }

#current-month,
#current-year {
    font-size: 15px;
    line-height: normal;    
    font-weight: bold;
    text-align: center;
    /* font-family: var(--input-font); */
}



.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: white;
  border-radius: 10px;
  font-weight: bold;
  text-align: center;
  font-size: 0.8em;
  color: black;
  padding: 8px 0;
}
.calendar-weekdays div {
     padding: 5px 0;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  list-style: none;
  margin: 0;
  padding: 10px 0;
  gap: 5px;
}

.calendar-days li {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  border: 1px solid white;
  color: white;
  border-radius: 4px;
  font-size: 0.9em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  @media screen and (max-width: 1728px){
   height: calc((120px * -0.47) + (120/1728*100vw * 1.47));
  }
  @media only screen and (max-width: 1200px) {
    height: 100px;
  }
  @media only screen and (max-width: 800px) {
    height: 60px;
  }
  &:before{
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      display: block;
      background-color: black;
      z-index: -1;
      opacity: 0;
      transition: 0.2s ease opacity;
  }
  .note-dot-container{
    position: absolute;
    left: 5px;
    top: 5px;
    display: flex;
    gap: 5px;
    @media only screen and (max-width: 800px) {
      left: 4px;
      top: 4px;
      gap: 3px;
    }
    .note-dot{
      background: white;
      border-radius: 50px;
      @media only screen and (max-width: 800px) {
            flex: 0 0 6px;
            padding: 3px;
      }
    }
  }
}
.calendar-days li:not(.other-month):hover {
     &:before{
      opacity: 0.2;
     }
}
#calendar-container .calendar-days li.selected {
  /* background-color: #042a00; Hover effect for days in current month */
  &:before{
    opacity: 0.6;
  }
}
#calendar-container  .calendar-days .current-day {
  font-weight: bold;
  color: black;
  position: relative;
  z-index: 1;
  &:after{
    content: "";
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    background-color: white;
    width: 45%;
    height: auto;
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%);
    z-index: -1;
    border-radius: 100%;
    @media only screen and (max-width: 1200px) {
      width: 35%;
    }
    @media only screen and (max-width: 800px) {
      width: 57%;
    }
  }
  &:hover, &.selected{
    color: black;
  }
}

.calendar-days li span {
     padding: 5px;
}

.calendar-days .other-month {
    color: #aaa; /* Dim days from other months */
    background-color: #fafafa;
    border-color: #f0f0f0;
}
 .calendar-days .other-month span { visibility: hidden; } /* Hide number, keep cell */
 /* OR hide number only: .calendar-days .other-month span { color: #ccc; } */



/* Basic Loading Indicator (Optional) */
.calendar-loading {
    position: absolute; /* Position relative to container if container is relative */
    /* Or just overlay the days grid */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-style: italic;
    color: #999;
}


#calendarMainContent{
  display: flex;
  column-gap: 70px;
  @media only screen and (max-width: 1200px) {
    flex-direction: column;
  }
  #calendar-scheduling{
    flex-grow: 1;
    .inside{
      padding-top: 80px;
      h1{
        color: white;
        text-align: center;
      }
    }
  }
  #notes-section{
    flex: 0 0 500px;
    max-width: var(--max-width);
    margin-inline: auto;
    margin-top: 55px;
    padding-bottom: 0px;
    @media only screen and (max-width: 1200px) {
          flex: initial;
          width: 100%;
    }
    @media only screen and (max-width: 800px) {
      margin-top: 20px;
    }
    .inside{
      padding-bottom: 0px;
      h2{
        text-align: center;
        margin-top: 40px;
        margin-bottom: 10px;
        @media only screen and (max-width: 800px) {
          margin-top: 20px;
        }
      }
      #noteInput{
        width: 100%;
        @media only screen and (max-width: 800px) {
          height: 50px;
          padding: 12px 26px;
        }
      }
      #addNoteBtn{
        transform: rotate(45deg);
        flex: 0 0 41.6px;
        svg{
          path{
            fill: white;
          }
        }
      }
      .input-selections{
        .input-top-selection{
          display: flex;
          gap: 10px;
          align-items: center;
        }
        .input-bottom-selection{
          display: flex;
          align-items: center;
          margin-top: 10px;
          gap: 20px;
          flex-wrap: wrap;
          @media only screen and (max-width: 800px) {
            gap: 10px;
          }
          input:not(input[type="checkbox"]){
              background: white;
              color: black;
              padding: 5px 10px;
              border-radius: 12px;
              height: 38px;
          }
          #timePickerContainer{
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              gap: 20px;
            .notify-wrap-time{
                  display: flex;
                  align-items: center;
                  gap: 10px;
            }
          }
        }
      }
      .notes-list-items{
        list-style: none;
        padding-left: 0;
        margin-left: 0;
        overflow: auto;
        height: 375px;
        padding-right: 20px;

        @media only screen and (max-width: 1200px) {
          padding-right: initial;
          overflow: initial;
          height: initial;
        }
        /* 1. The entire scrollbar track area */
        &::-webkit-scrollbar {
          width: 10px; /* Width of the vertical scrollbar */
          height: 10px; /* Height of the horizontal scrollbar if any */
        }

        /* 2. The background (track) of the scrollbar */
        &::-webkit-scrollbar-track {
          /* Match background colour exactly, or make transparent, 
            so the thumb appears to float */
          background: white; 
            /* ADJUST #006A4E to your EXACT background green! */
          /* Alternative: background: transparent; */
          /* Alternative: background: rgba(0,0,0, 0.1); // very subtle dark track */
            border-radius: 5px; 
        }

        /* 3. The draggable handle (thumb) */
        &::-webkit-scrollbar-thumb {
          background-color: var(--colour-green); /* Semi-transparent white */
          border-radius: 5px;    /* Matches roundness of your other elements */
          /* Create 'padding' effect around the thumb:
              Border colour MUST match track/page background colour */
            border: 2px solid white; 
            /* ADJUST #006A4E to your EXACT background green! */
        }

          /* 4. Handle on hover */
        &::-webkit-scrollbar-thumb:hover {
          background-color: var(--colour-green); /* More opaque white on hover */
        }
          
        /* Hide arrow buttons (optional, but minimalistic) */
          &::-webkit-scrollbar-button {
          display: none; 
        }
        .note-item{
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          padding: 12px 0;
          gap: 10px;
          border-bottom: 1px solid;
          .note-main{
            display: flex;
            align-items: flex-start;
            width: 100%;
            column-gap: 20px;
            text-align: left;
            margin-bottom: 0px;
            line-height: normal;
          }
          .display-mode{
            width: 100%;;
          }
          .note-meta{
            display: flex;
            align-items: center;
            width: 100%;
            column-gap: 10px;
            text-align: left;
            small{
              font-size: 12px;
            }
            .push-btn {
                border: 1px solid white;
                font-size: 13px;
                text-transform: initial;
                font-weight: initial;
                letter-spacing: initial;
                padding: 4px 17px;
            }
            .edit-cal-btn, .save-btn, .cancel-btn {
                font-size: 13px;
                text-transform: initial;
                font-weight: initial;
                letter-spacing: initial;
                padding: 4px 17px;
                border: 1px solid white;
            }
            .edit-cal-btn, .save-btn{
              margin-left: auto;
            }
            .save-btn, .cancel-btn {
                padding: 10px;
                background: transparent;
            }
            .save-btn img, .cancel-btn img {
                filter: invert(1);
                width: 14px;
                display: block;
            }
          }
        }
      }
    }
  }
}

#notesDisplayArea{
  text-align: left;
}
.notes-view-toggle{
  text-align: left;
  a {
    cursor: pointer;
    font-family: var(--button-font);
    font-size: 20px;
    font-weight: 600;
    color: white;
    text-decoration: initial;
    padding: 10px 20px;
    display: inline-block;
    margin-inline: -20px;
    &.enabled{
      margin-inline: 0px;
      background: white;
      color: black;
      border-radius: 100px;
    }
  }
}

.note-main .display-mode textarea {
width: 100%;
border-radius: 20px;
padding: 7px 17px;
background: #fff;
color: #000;
}