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

.timesheet-week-view {
  &__week-picker {
    display: flex;
    align-items: center;
    gap: $space-sm;
    margin-bottom: $space-md;
  }

  &__table-wrapper {
    overflow-x: auto;
    margin-top: $space-sm;
  }

  &__table {
    width: 100%;
    border-collapse: collapse;

    th, td {
      border: 1px solid $color-border;
      padding: $space-xs $space-sm;
      font-size: $font-size-sm;
    }

    thead th {
      background: var(--p-surface-100);
      font-weight: 600;
    }

    tfoot td {
      background: var(--p-surface-50);
      font-weight: 600;
    }
  }

  &__summary {
    margin-top: $space-md;
  }

  &__summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: $space-md;
  }

  &__summary-actions {
    display: flex;
    gap: $space-sm;
  }

  &__warnings {
    display: flex;
    flex-direction: column;
    gap: $space-xs;
    margin-top: $space-md;
  }
}
