@use '../styles/variables' as *;

.cal {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: $spacing-5;
  align-items: start;

  @media (max-width: $bp-lg) { grid-template-columns: 1fr; }

  // ── Calendar grid ─────────────────────────────────────────────────────────
  &__grid-wrap {
    border: 1px solid var(--clr-border);
    border-radius: $radius-xl;
    overflow: hidden;
    background: var(--clr-surface);
  }

  &__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: $spacing-4 $spacing-5;
    border-bottom: 1px solid var(--clr-border);
  }

  &__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--clr-border);
    border-radius: $radius-base;
    background: transparent;
    color: var(--clr-text-secondary);
    cursor: pointer;
    transition: background $transition-fast, color $transition-fast;

    &:hover { background: var(--clr-surface-raised); color: var(--clr-text); }
  }

  &__month {
    font-size: $font-size-base;
    font-weight: $font-weight-semibold;
    color: var(--clr-text);
  }

  &__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--clr-surface-raised, #{$gray-50});
    border-bottom: 1px solid var(--clr-border);
  }

  &__weekday {
    padding: $spacing-2;
    text-align: center;
    font-size: $font-size-xs;
    font-weight: $font-weight-semibold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--clr-text-muted);
  }

  &__cells {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--clr-border);
  }

  &__cell {
    background: var(--clr-surface);
    min-height: 60px;
    padding: $spacing-2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: $spacing-1;
    cursor: pointer;
    transition: background $transition-fast;

    &:hover { background: var(--clr-surface-raised, #{$gray-50}); }

    &--selected { background: $primary-50 !important; }

    &--busy {}
  }

  &__cell-overflow {
    background: var(--clr-surface-raised, #{$gray-50});
    min-height: 60px;
    padding: $spacing-2;
    display: flex;
    flex-direction: column;
  }

  &__day-num {
    font-size: $font-size-xs;
    font-weight: $font-weight-medium;
    color: var(--clr-text);
    line-height: 22px;
    width: 22px;
    text-align: center;
    border-radius: $radius-full;
    flex-shrink: 0;

    .cal__cell-overflow & { color: var(--clr-text-muted); }

    &--today {
      background: var(--clr-primary);
      color: #fff;
    }
  }

  &__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 $spacing-1;
    background: $primary-100;
    color: $primary-700;
    border-radius: $radius-full;
    font-size: 10px;
    font-weight: $font-weight-semibold;

    &--high { background: #fef3c7; color: #92400e; }
  }

  // ── Side panel ─────────────────────────────────────────────────────────────
  &__panel {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: $radius-xl;
    overflow: hidden;
  }

  &__panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: $spacing-4 $spacing-5;
    border-bottom: 1px solid var(--clr-border);
    background: var(--clr-surface-raised, #{$gray-50});
  }

  &__panel-date {
    font-size: $font-size-sm;
    font-weight: $font-weight-semibold;
    color: var(--clr-text);
    font-family: $font-family-mono;
  }

  &__panel-count {
    font-size: $font-size-xs;
    color: var(--clr-text-muted);
  }

  &__panel-empty {
    padding: $spacing-6 $spacing-5;
    font-size: $font-size-sm;
    color: var(--clr-text-muted);
    text-align: center;
  }

  &__panel-list { list-style: none; padding: 0; margin: 0; }

  &__panel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: $spacing-3;
    padding: $spacing-3 $spacing-5;
    border-bottom: 1px solid var(--clr-border);

    &:last-child { border-bottom: none; }

    &:hover { background: var(--clr-surface-raised, #{$gray-50}); }
  }

  &__panel-info {
    display: flex;
    flex-direction: column;
    gap: $spacing-1;
    min-width: 0;
  }

  &__panel-time {
    font-size: $font-size-sm;
    font-weight: $font-weight-semibold;
    color: var(--clr-text);
    font-family: $font-family-mono;
  }

  &__panel-meta,
  &__panel-svc {
    font-size: $font-size-xs;
    color: var(--clr-text-muted);
    font-family: $font-family-mono;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
