/* ===== 17-staff.css
   Staff holiday & overtime tracking view styles.
   ================================================= */

/* ── Summary cards grid ── */
.staff-summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.staff-summary-card {
  background: var(--brand-green-light);
  border: 1px solid var(--brand-green-light-hover);
  border-radius: 6px;
  padding: .75rem 1rem;
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 320px;
}

.staff-summary-card__name {
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .5rem;
  color: var(--brand-green);
}

.staff-summary-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .85rem;
  gap: .5rem;
  margin-bottom: .2rem;
}

.staff-summary-card__label {
  color: #555;
  white-space: nowrap;
}

.staff-summary-card__value {
  font-weight: 500;
}

/* Balance indicators */
.balance-ok {
  color: #16a34a;
}

.balance-warn {
  color: #dc2626;
  font-weight: 600;
}

/* No-summary placeholder */
.staff-no-summary {
  color: #888;
  font-size: .9rem;
  margin: .5rem 0 1.5rem;
}

/* ── Entry type badges ── */
.badge-holiday {
  background: var(--brand-green);
  color: #fff;
  font-size: .75rem;
  padding: .15rem .45rem;
  border-radius: 4px;
  white-space: nowrap;
}

.badge-overtime {
  background: #6366f1;
  color: #fff;
  font-size: .75rem;
  padding: .15rem .45rem;
  border-radius: 4px;
  white-space: nowrap;
}

/* ── Form layout ── */
.staff-form-grid {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  gap: .75rem;
  margin-bottom: .75rem;
}

.staff-form-grid .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.staff-form-grid .grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .75rem;
}

.staff-form-grid .grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: .75rem;
}

/* Greyed-out disabled selects (e.g. "Ende" day-type until a multi-day range is set) */
.staff-form-grid select:disabled {
  background-color: #f0f0f0;
  color: #aaa;
  opacity: 1;
  cursor: not-allowed;
}

/* Subtle hint text below form fields */
.field-hint {
  display: block;
  color: #888;
  font-size: .78rem;
  margin-top: .2rem;
}

/* Separator between inline table actions */
.table-action-sep {
  color: #ccc;
  margin: 0 .2rem;
}

/* ── Overtime compensation badges ── */
.badge-compensated {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
  font-size: .75rem;
  padding: .15rem .45rem;
  border-radius: 4px;
  white-space: nowrap;
}

.badge-open {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  font-size: .75rem;
  padding: .15rem .45rem;
  border-radius: 4px;
  white-space: nowrap;
}

/* Compensated row: subtle visual de-emphasis */
tr.entry-compensated {
  opacity: .7;
}

/* Summary card overtime breakdown */
.overtime-open {
  color: #b45309;
  font-weight: 600;
}

.overtime-compensated {
  color: #16a34a;
}

/* Divider line between holiday and overtime sections in card */
.staff-summary-card__divider {
  border-top: 1px solid var(--brand-green-light-hover);
  margin: .4rem 0;
}

/* ── Holiday date-range entry form ── */

/* Date input + full/half radio side by side */
.date-daytype-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* Horizontal inline radio buttons */
.daytype-radios ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: .75rem;
  align-items: center;
}

.daytype-radios li {
  display: flex;
  align-items: center;
}

.daytype-radios li label {
  display: flex;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
  font-weight: normal;
}

/* Auto-calculated day count shown below the end date row */
.holiday-day-count {
  font-size: .9rem;
  color: var(--brand-green);
  font-weight: 600;
  margin-top: .4rem;
  min-height: 1.2em;
}

/* Warning indicator for missing StaffUserProfile */
.profile-missing-hint {
  color: #b45309;
  cursor: help;
  font-size: .85rem;
  margin-left: .2rem;
}