@import './default.css';

/* ── Page layout ──────────────────────────────────────────────────────────── */

.time-off-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Tab bar ──────────────────────────────────────────────────────────────── */

.tov-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--borderColor);
}

.tov-tab {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--textMuted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.tov-tab:hover { color: var(--text); }

.tov-tab--active {
  color: var(--accentColor);
  border-bottom-color: var(--accentColor);
}

.tov-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.view-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin: 0;
}

.view-empty {
  color: var(--textMuted);
  font-size: var(--text-sm);
}

/* ── Year navigation ──────────────────────────────────────────────────────── */

.tov-year-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

#tov-year-label {
  font-weight: 600;
  font-size: var(--text-sm);
  min-width: 3rem;
  text-align: center;
}

.tov-summary {
  font-size: var(--text-sm);
  color: var(--textMuted);
  margin: 0;
}

/* ── Request list ─────────────────────────────────────────────────────────── */

#tov-list {
  display: flex;
  flex-direction: column;
}

.tor-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--borderColor);
}

.tor-row:first-child {
  border-top: 1px solid var(--borderColor);
}

.tor-row__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tor-row__type {
  font-weight: 600;
  font-size: var(--text-sm);
}

.tor-row__days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tor-day {
  font-size: var(--text-sm);
  color: var(--textMuted);
  background: var(--bgPage);
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
}

.tor-row__note {
  font-size: var(--text-sm);
  color: var(--textMuted);
}

.tor-row__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tor-row__total {
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  min-width: 40px;
  text-align: right;
}

/* ── Status badge ─────────────────────────────────────────────────────────── */

.status-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--accentBg, var(--bgSurfaceHover));
  color: var(--accentText, var(--textMuted));
  align-self: flex-start;
}

/* ── Create form dialog ───────────────────────────────────────────────────── */

.tof-days-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.tof-days-actions {
  display: flex;
  gap: var(--space-2);
}

.tof-range-form {
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bgSurfaceHover);
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-md);
}

.tof-range-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 480px) {
  .tof-range-inputs {
    grid-template-columns: 1fr;
  }
}

.tof-range-inputs .form-group {
  margin: 0;
}

.tof-range-footer {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.tof-day-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
}

.tof-day-row .tof-day-date {
  flex: 2;
}

.tof-day-row .tof-day-dur {
  flex: 1;
  min-width: 5rem;
}

/* ── Team time off Gantt ──────────────────────────────────────────────────── */

.ttov-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.ttov-nav-label {
  font-weight: 600;
  font-size: var(--text-sm);
  min-width: 10rem;
  text-align: center;
}

.ttov-legend {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.ttov-legend-item {
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

.ttov-legend-item--approved {
  background: var(--successBg);
  color: var(--successText);
}

.ttov-legend-item--pending {
  background: var(--warningBg);
  color: var(--warningText);
}

.ttov-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ttov-grid {
  border-collapse: collapse;
  font-size: var(--text-xs);
  white-space: nowrap;
}

.ttov-name-cell {
  position: sticky;
  left: 0;
  background: var(--bgColor);
  z-index: 1;
  min-width: 9rem;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: var(--space-1) var(--space-2);
  border-right: 1px solid var(--borderColor);
  font-weight: 500;
  text-align: left;
}

.ttov-name-cell--own { font-weight: 700; }

.ttov-day-head {
  width: 1.75rem;
  min-width: 1.75rem;
  padding: var(--space-1) 2px;
  text-align: center;
  color: var(--textMuted);
  border-bottom: 1px solid var(--borderColor);
}

.ttov-day-head--weekend { color: var(--borderColorStrong); }

.ttov-day-head--overlap {
  color: var(--accentColor);
  font-weight: 700;
}

.ttov-day-cell {
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid transparent;
}

.ttov-day-cell--weekend { background: var(--bgSurfaceHover); }

.ttov-day-cell--approved {
  background: var(--successBg);
  border-color: var(--successColor);
}

.ttov-day-cell--pending {
  background: var(--warningBg);
  border-color: var(--warningColor);
}

tbody .ttov-name-cell {
  border-top: 1px solid var(--borderColor);
}