.simple-calendar {
  .calendar-header {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
  }

  .calendar-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }

  .nav-btn {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: #495057;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    transition: all 0.2s ease;

    &:hover {
      background: #e9ecef;
      color: #212529;
      text-decoration: none;
    }

    &.prev .nav-icon {
      margin-right: 0.5rem;
    }

    &.next .nav-icon {
      margin-left: 0.5rem;
    }
  }

  .current-date {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 500;
    color: #212529;

    .month {
      margin-right: 0.5rem;
    }

    .year {
      color: #6c757d;
    }
  }

  .today-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    margin: 0 auto;
    text-decoration: none;
    color: #495057;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    transition: all 0.2s ease;
    width: fit-content;

    &:hover {
      background: #e9ecef;
      color: #212529;
      text-decoration: none;
    }
  }

  .today-icon {
    margin-right: 0.5rem;
    font-size: 0.875rem;
  }

  .table {
    border-collapse: separate;
    border-spacing: 0.5rem;

    th {
      border: none;
      padding: 0.75rem;
      background: #f8f9fa;
      border-radius: 4px;
    }

    td {
      border: 1px solid #dee2e6;
      padding: 0.75rem;
      border-radius: 4px;
      transition: all 0.2s ease;

      &:hover {
        background: #f8f9fa;
      }

      &.today {
        background-color: rgba(13, 110, 253, 0.1);
        border-color: rgba(13, 110, 253, 0.3);
      }

      &.prev-month,
      &.next-month {
        background-color: #f8f9fa;
        opacity: 0.5;
      }
    }
  }
}