/* picker: kalendri-popover (kalender on pickeri osa, seega siin sees) */
.date-picker {
  display: inline-block;
  cursor: pointer; /* kogu trigger avab kalendri */

  /* ainult avatud picker nõuab ühist anchor-nime; korraga saab lahti olla üks */
  &.open { anchor-name: --datepicker; }

  [popover]:popover-open {
    position-anchor: --datepicker;
    inset: auto;
    top: anchor(bottom);
    left: anchor(left);
    margin: 6px 0 0;
    position-try-fallbacks: flip-block;
  }

  .calendar {
    background: #fff;
    border: 1px solid var(--pl-eggshell);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    cursor: default; /* trigger on pointer; kalendri sees tavaline kursor */
    padding: 12px;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 8px;

    &.no-quick {
      grid-template-columns: 1fr;
    }

    .grid {
      min-width: 294px;
    }

    .quick .quick-item {
      padding: 8px 10px;
      border-radius: 8px;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;

      &:hover {
        background: var(--pl-early-dawn);
      }

      &.selected {
        background: #F5F5F5;
        font-weight: 600;
      }
    }
  }

  .calendar-header {
    display: grid;
    grid-template-columns: 36px repeat(7, 28px);
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;

    .head-item.msymbol {
      display: inline-grid;
      place-items: center;
      width: 24px; height: 24px;
      border: 1px solid #BCC7DD;
      border-radius: 8px;
      cursor: pointer;
      user-select: none;
      color: #263E50;

      &:hover {
        background: #F6F7FB;
      }

      &:first-child {
        justify-self: end;
        margin-right: 8px;
      }
    }
    .title {
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
    }
  }

  .calendar-container {
    color: black;
  }

  .weekday-header {
    display: grid;
    grid-template-columns: 36px repeat(7, 28px);
    gap: 8px;
    margin-bottom: 20px;
    align-items: center;

    .week-spacer {
      /* Empty spacer for week labels column */
      grid-area: auto;
    }

    .weekday-label {
      text-align: center;
      color: #8D92A5;
      font-weight: 400;
      font-size: 14px;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
    }
  }

  .weeks-container {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: 36px;
      top: 0;
      bottom: 0;
      width: 0;
      border-left: 1px solid #8D92A5;
    }
  }

  .week-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 8px;
    margin-bottom: 6px;
    align-items: center;

    .week-label {
      text-align: right;
      padding-right: 8px;
      box-sizing: border-box;
      color: #8D92A5;
      font-weight: 400;
      font-size: 14px;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
    }

    .days-row {
      display: grid;
      grid-template-columns: repeat(7, 28px);
      gap: 8px;
    }
  }

  .day {
    display: grid;
    place-items: center;
    width: 28px;
    height: 24px;
    padding: 0;
    border-radius: 8px;
    font-weight: 400;
    cursor: pointer;
    color: inherit;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    position: relative;

    &.filler {
      color: #8D92A5;
    }

    &.in-range {
      background: #FEF3C1;
      border-radius: 0;

      /* Extend background to fill gaps between cells - only for non-start/end cells */
      &:not(.start):not(.end)::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -4px;
        right: -4px;
        background: #FEF3C1;
        z-index: -1;
      }

      /* Don't extend on the first cell of a row */
      &:not(.start):not(.end):first-child::before {
        left: 0;
      }

      /* Don't extend on the last cell of a row */
      &:not(.start):not(.end):last-child::before {
        right: 0;
      }
    }

    &.start, &.end {
      background: #FFA600 !important;
      color: #fff !important;
      font-weight: 700;
      z-index: 2;

      /* Override in-range background */
      &.in-range {
        background: #FFA600 !important;
      }
    }

    &.start {
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;

      /* If start is also end (single day), make it fully rounded */
      &.end {
        border-radius: 8px;
      }

      /* Add connecting background to the right for start cells */
      &:not(.end)::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: -4px;
        width: 4px;
        background: #FEF3C1;
        z-index: -1;
      }

      /* Don't extend on the last cell of a row */
      &:not(.end):last-child::before {
        display: none;
      }
    }

    &.end {
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;

      /* Add connecting background to the left for end cells */
      &:not(.start)::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -4px;
        width: 4px;
        background: #FEF3C1;
        z-index: -1;
      }

      &:not(.start):first-child::before {
        display: none;
      }
    }

    &.today {
      font-weight: 700;
      color: black;
      z-index: 1;

      &:not(.in-range):not(.start):not(.end) {
        border-radius: 8px;
        background: #FEFAEB;
        border: 1px solid #FFC800;
      }
    }

    &.current:hover:not(.start):not(.end):not(.in-range):not(.disabled) {
      border: 1px solid #FFA600;
      font-weight: 700;
    }

    &.filler:hover:not(.start):not(.end):not(.in-range):not(.disabled) {
      border: 1px solid #FFA600;
      font-weight: 700;
    }

    &.disabled {
      color: #C5C9D6;
      cursor: not-allowed;
      pointer-events: none;
    }

    &.available {
      background-color: #FEF3C1;
    }

    &.in-range.first-of-week:not(.start) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &.in-range.last-of-week:not(.end) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}

/* nav: pilli-stiilis trigger — eraldiseisev komponent (m(nav, { get, set, range })) */
.date-picker-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #BCC7DD;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;

  &.range {
    min-width: 140px;
  }

  &.single-date {
    min-width: 100px;
    padding: 0 6px;
    gap: 6px;

    .text-slot {
      width: 70px;
      padding: 0 4px;
    }

    .week-slot {
      width: 30px;
      padding: 0 2px;
    }
  }

  &.hide-year {
    min-width: 110px;

    .day-label {
      margin-right: 4px;
      margin-left: 4px;
    }

    .text-slot {
      width: 70px;
    }

    &.single-date {

      .text-slot {
        width: auto;
        padding: 0;
      }

      .week-slot {
        width: auto;
        padding: 0;
      }
    }
  }

  .day-label, .dot, .week {
    color: #8D92A5;
  }

  .text {
    white-space: nowrap;
  }

  .week-slot {
    display: inline-grid;
    justify-items: center;
  }

  .text-slot {
    display: inline-grid;
    width: 143px;

    &.single {
      justify-items: center;
    }
  }
}

/* shortLabel: kompaktne nädalapäev+kuupäev silt — eraldiseisev komponent (m(shortLabel, { start, end })) */
.date-picker-short-label {
  .weekday { color: #8D92A5; }
  .date    { margin-left: 4px; color: #212121; }
  .sep     { margin: 0 4px; color: #212121; }

  &:hover {
    color: var(--pl-deep-sea);
    background-color: #FFF8DD;
    border-radius: 4px;
    padding: 2px 6px;
    margin: 0 -6px;
  }
}