/* ===== View Toggle ===== */
.cal-view-toggle {
  display: flex;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.cal-toggle-btn {
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
  border: none;
  background: none;
}
.cal-toggle-btn + .cal-toggle-btn { border-left: 1.5px solid var(--border); }
.cal-toggle-btn.active { background: var(--primary); color: #fff; }
.cal-toggle-btn:not(.active):hover { background: var(--bg); color: var(--text); }

/* ===== Calendar Legend ===== */
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 10px;
  padding: 8px 14px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.legend-swatch {
  width: 22px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}
.legend-swatch.sick {
  background: repeating-linear-gradient(
    45deg,
    var(--color, #e03c4a) 0px,
    var(--color, #e03c4a) 3px,
    transparent 3px,
    transparent 8px
  );
  border: 1.5px solid var(--color, #e03c4a);
}
.legend-swatch.vacation { border: 1.5px solid var(--color, #1f00ff); }
.legend-swatch.occasional {
  background: repeating-linear-gradient(
    90deg,
    var(--color, #1bb96b) 0px,
    var(--color, #1bb96b) 4px,
    transparent 4px,
    transparent 8px
  );
  border: 1.5px solid var(--color, #1bb96b);
}

/* ===== Calendar Table ===== */
.calendar-container {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.cal-table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cal-table tbody { height: 100%; }
.cal-table tr { height: calc(100% / 6); }

.cal-table th {
  padding: 6px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  text-align: center;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.cal-table td {
  vertical-align: top;
  border: 1px solid var(--border);
  padding: 0;
  min-width: 0;
}

.cal-cell {
  height: 100%;
  padding: 4px 5px;
  display: flex;
  flex-direction: column;
}

.cal-cell.today .cal-day-num {
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-cell.other-month .cal-day-num { color: #ccc; }
.cal-cell.weekend { background: #fafafa; }
.cal-cell.holiday { background: #fff8f0; }

.cal-day-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  line-height: 1;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-holiday-name {
  font-size: 9px;
  color: var(--warning);
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  flex: 1;
}

/* ===== Absence Chips ===== */
.absence-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  cursor: default;
  position: relative;
}

/* Vacation: solid fill */
.absence-chip.vacation {
  color: #fff;
}

/* Sick: diagonal stripes pattern */
.absence-chip.sick {
  background: repeating-linear-gradient(
    45deg,
    var(--chip-color) 0px,
    var(--chip-color) 4px,
    color-mix(in srgb, var(--chip-color) 40%, white) 4px,
    color-mix(in srgb, var(--chip-color) 40%, white) 10px
  );
  color: var(--chip-color);
  border: 1.5px solid var(--chip-color);
  padding: 1px 5px;
}

/* Occasional: dotted border */
.absence-chip.occasional {
  background: color-mix(in srgb, var(--chip-color) 15%, white);
  color: var(--chip-color);
  border: 1.5px dashed var(--chip-color);
  padding: 1px 5px;
}

.chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ===== Tooltip ===== */
.absence-chip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1d23;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
}

/* ===== Overflow indicator ===== */
.cal-overflow {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 2px;
}

/* ===== Year View ===== */
.cal-year-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 4px;
  overflow-y: auto;
  flex: 1;
}

.cal-year-month {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
  overflow: hidden;
}

.cal-year-month-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  text-align: center;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cal-month-link {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px 4px;
  transition: background var(--transition), color var(--transition);
}
.cal-month-link:hover {
  background: var(--primary-faded);
  color: var(--primary-dark);
}

/* ===== Year view hover tooltip ===== */
.cal-tooltip {
  position: fixed;
  z-index: 500;
  display: none;
  background: #1a1d23;
  color: #fff;
  border-radius: 10px;
  padding: 10px 13px;
  min-width: 190px;
  max-width: 270px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.28);
  pointer-events: none;
  font-size: 12px;
}
.cal-tip-date {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 8px;
}
.cal-tip-person {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.cal-tip-person:first-of-type { border-top: none; }
.cal-tip-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.cal-tip-name {
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
}
.cal-tip-type {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.cal-tip-pending {
  background: rgba(245,166,35,0.25);
  color: #f5a623;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.cal-mini-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cal-mini-table th {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  padding: 2px 0;
}

.cal-mini-table td {
  padding: 1px;
  text-align: center;
}

.mini-day {
  font-size: 10px;
  font-weight: 500;
  color: var(--text);
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  cursor: default;
  line-height: 1;
  flex-direction: column;
  gap: 1px;
}

.mini-day.mini-today { background: var(--primary); color: #fff !important; border: none !important; }
.mini-day.mini-weekend { color: var(--text-muted); }
.mini-day.mini-holiday { color: var(--warning); }

.mini-dots {
  display: flex;
  gap: 2px;
  justify-content: center;
}
.mini-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  display: block;
}

@media (max-width: 1100px) {
  .cal-year-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 750px) {
  .cal-year-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cal-year-month { padding: 8px 6px; overflow: visible; }
  .cal-year-month-title { font-size: 11px; margin-bottom: 4px; }
  .cal-mini-table th { font-size: 8px; }
  .mini-day { width: 20px; height: 20px; font-size: 9px; }
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .cal-table td { height: 80px; }
  .absence-chip { font-size: 9px; padding: 1px 4px; }
}