timetracking/httpdocs/assets/styles/components/_crud.scss

@use '../atoms/variables' as *;
@use '../atoms/mixins' as *;

// ─── CRUD Seiten Layout ────────────────────────────────────────────────────────
.crud-page {
  max-width: $content-max-width;
  margin: 0 auto;
  padding: $space-6;
}

.crud-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $space-6;
}

.crud-page__title {
  font-size: $font-size-xl;
  font-weight: $font-weight-bold;
  color: $color-text-dark;
}

// ─── Liste ─────────────────────────────────────────────────────────────────────
.crud-list {
  @include card;
  overflow: hidden;
}

// ─── Zeile ─────────────────────────────────────────────────────────────────────
.crud-row {
  border-bottom: 1px solid rgba($color-border, 0.5);
  transition: opacity 0.28s ease, transform 0.28s ease;

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

  &--removing {
    opacity: 0;
    transform: translateX(12px);
  }

  &--new {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.crud-row__display {
  display: flex;
  align-items: center;
  gap: $space-4;
  padding: $space-4 $space-6;
  transition: background $transition-fast;

  &:hover {
    background: rgba(var(--color-primary-rgb), 0.05);

    .crud-row__btn { opacity: 1; }
  }
}

.crud-row__info {
  flex: 1;
  min-width: 0;
}

.crud-row__name {
  font-size: $font-size-base;
  font-weight: $font-weight-bold;
  color: $color-text-dark;
}

.crud-row__meta {
  font-size: $font-size-sm;
  color: $color-text-muted;
  margin-left: $space-2;
  font-weight: $font-weight-regular;
}

.crud-row__actions {
  display: flex;
  align-items: center;
  gap: $space-2;
  flex-shrink: 0;
}

.crud-row__btn {
  @include icon-btn;
  opacity: 0;
  color: $color-text-muted;

  svg { width: $icon-svg-size; height: $icon-svg-size; }

  &--edit:hover  { background: rgba(var(--color-primary-rgb), 0.1); color: var(--color-primary); }
  &--delete:hover{ background: rgba($color-error, 0.1); color: $color-error; }

  @media (hover: none) { opacity: 1; }
}

// ─── Edit-Formular innerhalb der Zeile ─────────────────────────────────────────
.crud-row__edit {
  padding: $space-4 $space-6;
  background: rgba(var(--color-primary-rgb), 0.04);
  border-top: 1px solid rgba($color-border, 0.5);
}

// ─── Create-Formular oben ──────────────────────────────────────────────────────
.crud-create {
  @include card($color-card);
  padding: $space-5 $space-6;
  margin-bottom: $space-4;
  display: none;

  &--visible { display: block; }
}

// ─── Tabs (Aktiv / Archiviert) ─────────────────────────────────────────────────
.crud-tabs {
  display: inline-flex;
  @include card;
  border-radius: $radius-pill;
  padding: 3px;
  margin-bottom: $space-4;
}

.crud-tab {
  padding: $space-1 $space-5;
  border: none;
  background: transparent;
  border-radius: $radius-pill;
  font-family: $font-family-base;
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  color: $color-text-muted;
  cursor: pointer;
  transition: background $transition-fast, color $transition-fast;

  &:hover { color: $color-text-dark; }

  &--active {
    background: var(--color-primary);
    color: var(--header-text);
  }
}

// ─── Archivierte Zeile ─────────────────────────────────────────────────────────
.crud-row--archived {
  .crud-row__name {
    color: $color-text-muted;
    text-decoration: line-through;
    text-decoration-color: rgba($color-text-muted, 0.5);
  }
}

.crud-row__btn--restore {
  &:hover { background: rgba($color-activate-light, 0.12); color: $color-activate; }
}

// ─── Gruppen-Header (z.B. Verrechenbar / Nicht-verrechenbar) ──────────────────
.crud-list__group {
  & + & {
    border-top: 2px solid $color-border;
  }
}

.crud-list__group-label {
  padding: $space-3 $space-6;
  font-size: $font-size-xs;
  font-weight: $font-weight-bold;
  color: $color-text-muted;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(var(--color-primary-rgb), 0.03);
  border-bottom: 1px solid rgba($color-border, 0.5);
}

// ─── Checkbox-Label (Verrechenbar-Feld) ────────────────────────────────────────
.crud-checkbox-label {
  display: flex;
  align-items: center;
  gap: $space-2;
  cursor: pointer;
  font-size: $font-size-base;
  color: $color-text-base;

  input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--color-primary);
  }
}