@import "src/assets/scss/variables";

.calendar-sidebar {
  width: 100%;

  .months {
    width: 100%;
    display: grid;
    // was: repeat(3, 1fr) — fixed 3 columns break on narrow sidebars/mobile
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 10px;

    @media (max-width: 992px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (max-width: 576px) {
      grid-template-columns: 1fr;
      gap: 12px;
    }
  }

  .month {
    position: relative;
    background: $app-background;
    // was: 15px 30px flat — too wide for small columns, causes text wrap/overflow
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: 600;
    border-radius: 3px;
    min-width: 0; // allows flex/grid children to shrink instead of overflowing

    &-name {
      margin-top: 0 !important;
      margin-left: 10px;
      color: $title-color;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }

    .tooltip-wrapper {
      position: relative;
      display: inline-block;
      min-width: 0;
      max-width: 100%;
      margin-top:0!important;
    }

    .tooltip-box {
      visibility: hidden;
      opacity: 0;
      background-color: #040059;
      color: #fff;
      font-size: 12px;
      line-height: 1.5;
      white-space: pre-line;
      text-align: left;
      padding: 6px 10px;
      border-radius: 6px;
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      pointer-events: none;
      transition: opacity 0.15s ease;
      // was: min-width: 160px with no max — overflows narrow columns/viewport
      width: max-content;
      min-width: 140px;
      max-width: min(220px, 90vw);

      // Prevent left/right clipping when a month is near the sidebar edge
      @media (max-width: 576px) {
        left: 0;
        transform: translateX(0);
      }
    }

    .tooltip-box::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: #040059;

      @media (max-width: 576px) {
        left: 16px;
        transform: none;
      }
    }

    .tooltip-wrapper:hover .tooltip-box {
      visibility: visible;
      opacity: 1;
    }

    &.is-okay {
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    }

    &.is-not-okay {
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    }

    &.disabled {
      background-color: #D9D9D9;
      .month-name {
        color: #B5B5B5;
      }
    }
  }

  .dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px;
    border-radius: 50%;
    margin-top: 0 !important;
    flex-shrink: 0;

    &.green {
      background: #4caf50;
    }
    &.orange {
      background: #E3AC16;
    }
  }
}