/* Phase 4: ausgelagerte Overtime-Styles aus modules.css */

/* ---------------- Overtime ---------------- */
#view-overtime .grid{
  max-width: var(--content-max);
}

.overtime-metric-row{
  align-items: stretch;
}

.overtime-toolbar,
.overtime-admin-filters,
.overtime-admin-form-actions{
  display:flex;
  align-items:flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.overtime-metric-card{
  padding: 14px 16px;
  min-width: 180px;
  flex: 1 1 180px;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.overtime-toolbar__year{
  min-width: 140px;
}

.overtime-toolbar__action{
  min-width: 160px;
}

.overtime-admin-booking,
.overtime-admin-panel{
  overflow: hidden;
}

.table--overtime-year .table__head,
.table--overtime-year .table__row{
  grid-template-columns: 110px 130px 130px 110px 110px 90px;
}

.table--overtime-user .table__head,
.table--overtime-user .table__row{
  grid-template-columns: 110px 120px 100px minmax(220px, 1.4fr) 150px 140px;
}

.table--overtime-user .table__row{
  align-items: start;
}

.table--overtime-admin-overview .table__head,
.table--overtime-admin-overview .table__row{
  grid-template-columns: minmax(180px, 1.4fr) 120px 110px 110px 110px 90px 110px;
}

.table--overtime-admin-journal .table__head,
.table--overtime-admin-journal .table__row{
  grid-template-columns: 110px minmax(180px, 1fr) 120px 100px minmax(220px, 1.5fr) 140px 140px;
}

.table--overtime-admin-journal .table__row{
  align-items: start;
}

@media (max-width: 900px){
  .overtime-hero,
  .overtime-admin-panel__head,
  .overtime-admin-booking__head{
    align-items: flex-start;
  }

  .overtime-toolbar,
  .overtime-admin-filters,
  .overtime-admin-form-grid,
  .overtime-admin-form-actions{
    width: 100%;
  }

  .overtime-admin-filters .field,
  .overtime-admin-form-grid .field{
    min-width: 0;
  }

  .overtime-admin-filters__user,
  .overtime-admin-form-grid__user,
  .overtime-admin-form-grid__note,
  .overtime-admin-form-grid__ref{
    flex: 1 1 100%;
  }
}

@media (max-width: 820px){
  .table--overtime-year,
  .table--overtime-user,
  .table--overtime-admin-overview,
  .table--overtime-admin-journal{
    border: 0;
    background: transparent;
  }

  .table--overtime-year .table__body,
  .table--overtime-user .table__body,
  .table--overtime-admin-overview .table__body,
  .table--overtime-admin-journal .table__body{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 2px;
  }

  .table--overtime-year .table__row,
  .table--overtime-user .table__row,
  .table--overtime-admin-overview .table__row,
  .table--overtime-admin-journal .table__row{
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(15,23,42,.06);
  }

  .table--overtime-year .table__row > div,
  .table--overtime-user .table__row > div,
  .table--overtime-admin-overview .table__row > div,
  .table--overtime-admin-journal .table__row > div{
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 1px dashed rgba(226,232,240,.9);
    padding-bottom: 8px;
    white-space: normal !important;
  }

  .table--overtime-year .table__row > div:last-child,
  .table--overtime-user .table__row > div:last-child,
  .table--overtime-admin-overview .table__row > div:last-child,
  .table--overtime-admin-journal .table__row > div:last-child{
    border-bottom: 0;
    padding-bottom: 0;
    justify-content: space-between;
  }

  .table--overtime-year .table__row > div:nth-child(1)::before{ content: "Monat"; }
  .table--overtime-year .table__row > div:nth-child(2)::before{ content: "Startsaldo"; }
  .table--overtime-year .table__row > div:nth-child(3)::before{ content: "Endsaldo"; }
  .table--overtime-year .table__row > div:nth-child(4)::before{ content: "Gutschrift"; }
  .table--overtime-year .table__row > div:nth-child(5)::before{ content: "Abzug"; }
  .table--overtime-year .table__row > div:nth-child(6)::before{ content: "Buchungen"; }

  .table--overtime-user .table__row > div:nth-child(1)::before{ content: "Datum"; }
  .table--overtime-user .table__row > div:nth-child(2)::before{ content: "Typ"; }
  .table--overtime-user .table__row > div:nth-child(3)::before{ content: "Minuten"; }
  .table--overtime-user .table__row > div:nth-child(4)::before{ content: "Notiz"; }
  .table--overtime-user .table__row > div:nth-child(5)::before{ content: "Erstellt"; }
  .table--overtime-user .table__row > div:nth-child(6)::before{ content: "Von"; }

  .table--overtime-admin-overview .table__row > div:nth-child(1)::before{ content: "Mitarbeiter"; }
  .table--overtime-admin-overview .table__row > div:nth-child(2)::before{ content: "Kontostand"; }
  .table--overtime-admin-overview .table__row > div:nth-child(3)::before{ content: "Credits"; }
  .table--overtime-admin-overview .table__row > div:nth-child(4)::before{ content: "Abzuege"; }
  .table--overtime-admin-overview .table__row > div:nth-child(5)::before{ content: "Filter-Netto"; }
  .table--overtime-admin-overview .table__row > div:nth-child(6)::before{ content: "Filter"; }
  .table--overtime-admin-overview .table__row > div:nth-child(7)::before{ content: "Letzte Buchung"; }

  .table--overtime-admin-journal .table__row > div:nth-child(1)::before{ content: "Datum"; }
  .table--overtime-admin-journal .table__row > div:nth-child(2)::before{ content: "Mitarbeiter"; }
  .table--overtime-admin-journal .table__row > div:nth-child(3)::before{ content: "Typ"; }
  .table--overtime-admin-journal .table__row > div:nth-child(4)::before{ content: "Minuten"; }
  .table--overtime-admin-journal .table__row > div:nth-child(5)::before{ content: "Notiz"; }
  .table--overtime-admin-journal .table__row > div:nth-child(6)::before{ content: "Erstellt"; }
  .table--overtime-admin-journal .table__row > div:nth-child(7)::before{ content: "Von"; }
}

@media (max-width: 640px){
  body.app-view-overtime .overtime-toolbar,
  #view-admin .overtime-admin-filters,
  #view-admin .overtime-admin-form-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.app-view-overtime .overtime-toolbar__year,
  body.app-view-overtime .overtime-toolbar__action,
  #view-admin .overtime-admin-filters .field,
  #view-admin .overtime-admin-form-grid .field{
    width: 100%;
  }

  body.app-view-overtime .overtime-toolbar .label,
  #view-admin .overtime-admin-filters .label,
  #view-admin .overtime-admin-form-grid .label{
    white-space: normal;
  }

  #view-admin .overtime-admin-form-actions{
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  #view-admin .overtime-admin-form-actions .btn{
    width: 100%;
    min-width: 0;
  }

  .table--overtime-year .table__row > div,
  .table--overtime-user .table__row > div,
  .table--overtime-admin-overview .table__row > div,
  .table--overtime-admin-journal .table__row > div{
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .table--overtime-year .table__row > div::before,
  .table--overtime-user .table__row > div::before,
  .table--overtime-admin-overview .table__row > div::before,
  .table--overtime-admin-journal .table__row > div::before{
    min-width: 0;
    padding-right: 0;
  }
}