/*
 * @hb/shared-frontend/styles/group-day-view.css
 * Tages-Übersicht: Spalten = Ressourcen, Zeilen = Stunden.
 */

.gdv-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 480px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.gdv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  gap: var(--space-3);
  flex-wrap: wrap;
}
.gdv-nav { display: flex; gap: 4px; align-items: center; }
.gdv-nav .btn { padding: 6px 10px; font-size: var(--font-size-md); }
.gdv-datepicker {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  margin-left: 8px;
}
.gdv-title { margin: 0; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
.gdv-body { flex: 1; overflow: auto; }

.gdv-empty {
  padding: 24px;
  color: var(--color-text-muted);
  text-align: center;
}

.gdv-grid {
  display: grid;
  grid-template-rows: auto 1fr;
  /* kein min-width: max-content — Spalten dürfen schmal werden, damit alle passen */
  width: 100%;
  position: relative;
}

.gdv-corner {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  position: sticky;
  left: 0;
  z-index: 4;
}
.gdv-colhead {
  padding: 6px 4px;
  text-align: center;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  position: sticky;
  top: 0;
  z-index: 3;
  min-width: 0;
}
.gdv-colhead-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gdv-colhead.is-absence-urlaub { background: rgba(187, 247, 208, 0.7); }
.gdv-colhead.is-absence-krank  { background: rgba(254, 202, 202, 0.7); }
.gdv-colhead-absence {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
.gdv-colhead-absence-urlaub { background: #d1fae5; color: #065f46; }
.gdv-colhead-absence-krank  { background: #fde2e2; color: #991b1b; }

/* Vorlauf/Tour/Nachlauf als 3 separate Blöcke mit eigenem Rahmen und kleinem Gap */
.gdv-entry-wrap {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
  background: transparent;
  border: none !important;
}
.gdv-entry-seg {
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.gdv-entry-vorlauf,
.gdv-entry-nachlauf {
  background-color: rgba(0, 0, 0, 0.03);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0) 0 5px,
    rgba(0, 0, 0, 0.18) 5px 10px
  );
}
.gdv-entry-tour {
  flex: 1;
  padding: 3px 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gdv-entry-gap { flex: 0 0 auto; }

/* Resource-Picker (im Wizard genutzt) */
.gdv-colhead.is-pickable {
  cursor: pointer;
  transition: background 100ms ease;
}
.gdv-colhead.is-pickable:hover {
  background: var(--color-surface-muted);
}
.gdv-colhead.is-picked {
  background: var(--color-brand-primary-soft) !important;
  box-shadow: inset 0 -3px 0 0 var(--color-brand-primary);
}
.gdv-colhead-picked {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 11px;
  color: var(--color-brand-primary);
  font-weight: 700;
}
.gdv-col.is-pickable {
  cursor: pointer;
}
.gdv-col.is-picked .gdv-col-bg,
.gdv-col.is-picked {
  background-color: color-mix(in srgb, var(--color-brand-primary) 6%, transparent);
}

.gdv-hours {
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  position: sticky;
  left: 0;
  z-index: 2;
}
.gdv-hour {
  position: relative;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.gdv-hour span {
  position: absolute;
  top: -8px;
  right: 4px;
  background: var(--color-surface-alt);
  padding: 0 4px;
}

.gdv-col {
  position: relative;
  border-right: 1px solid var(--color-border);
  cursor: pointer;
  min-width: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 35px,
    var(--color-border) 35px,
    var(--color-border) 36px
  );
}
.gdv-root.is-feiertag .gdv-col::before,
.gdv-root.is-ferien   .gdv-col::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.gdv-root.is-feiertag .gdv-col::before { background: rgba(254, 243, 199, 0.55); }
.gdv-root.is-ferien   .gdv-col::before { background: rgba(224, 242, 254, 0.45); }

.gdv-col.is-absence-urlaub::after,
.gdv-col.is-absence-krank::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.gdv-col.is-absence-urlaub::after { background: rgba(187, 247, 208, 0.55); }
.gdv-col.is-absence-krank::after  { background: rgba(254, 202, 202, 0.55); }
.gdv-col-bg {
  position: absolute;
  left: 0; right: 0;
  background: color-mix(in srgb, var(--color-brand-primary) 6%, transparent);
  pointer-events: none;
}

.gdv-selection {
  position: absolute;
  left: 2px;
  right: 2px;
  background: var(--color-brand-primary-soft);
  border: 2px dashed var(--color-brand-primary);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  font-size: var(--font-size-xs);
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-primary);
  z-index: 3;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.gdv-entry {
  position: absolute;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  font-size: 11px;
  line-height: 1.3;
  cursor: grab;
  z-index: 2;
  overflow: hidden;
}
.gdv-entry:active { cursor: grabbing; }
.gdv-entry.is-dragging {
  cursor: grabbing;
  opacity: 0.85;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  z-index: 5;
}

.gdv-resize {
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
  z-index: 3;
}
.gdv-resize-top { top: -2px; }
.gdv-resize-bottom { bottom: -2px; }
.gdv-entry:hover .gdv-resize::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.5;
}
.gdv-entry:hover .gdv-resize-top::after { top: 2px; }
.gdv-entry:hover .gdv-resize-bottom::after { bottom: 2px; }

/* Urlaub und Krank: nur Anzeige, nicht verschiebbar/resizebar. */
.gdv-entry[data-kategorie="urlaub"],
.gdv-entry[data-kategorie="krank"] { cursor: default; }
.gdv-entry[data-kategorie="urlaub"]:active,
.gdv-entry[data-kategorie="krank"]:active { cursor: default; }
.gdv-entry[data-kategorie="urlaub"] .gdv-resize,
.gdv-entry[data-kategorie="krank"] .gdv-resize { display: none; }

.gdv-toast {
  padding: 10px 16px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background: #fde2e2;
  color: #991b1b;
  border-bottom: 1px solid #fca5a5;
}
.gdv-toast[data-type="warn"] {
  background: #fef3c7;
  color: #92400e;
  border-bottom-color: #fcd34d;
}
.gdv-entry-title {
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gdv-entry-time {
  opacity: 0.7;
  font-family: var(--font-family-mono);
}