/* ═══════════════════════════════════════════════════════════
   OKYU HRM – Personalkalender Premium Styles
   Matching Equinox HR reference design
   ═══════════════════════════════════════════════════════════ */

/* ─── Page Header ─── */
.cal-page-hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.cal-page-title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text-primary);
  margin: 0 0 4px;
  font-family: 'Manrope', sans-serif;
}
.cal-page-sub {
  font-size: .875rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.cal-view-toggle {
  display: flex;
  background: var(--bg-card);
  border-radius: 14px;
  padding: 4px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  gap: 2px;
}
.cal-view-btn {
  padding: 8px 20px;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all .18s;
  color: var(--text-muted);
  background: transparent;
}
.cal-view-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59,79,210,.3);
}

/* ─── Summary Bento Cards ─── */
.cal-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
@media (max-width: 900px) { .cal-bento-grid { grid-template-columns: 1fr; } }

.cal-bento-card {
  background: var(--bg-card);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,.04);
  border: 1px solid rgba(255,255,255,.4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  min-height: 160px;
  transition: box-shadow .2s, transform .2s;
}
.cal-bento-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.09);
  transform: translateY(-2px);
}
.cal-bento-card-bg-icon {
  position: absolute;
  top: 8px; right: 8px;
  font-size: 5rem;
  opacity: .05;
  pointer-events: none;
  transition: transform .4s;
}
.cal-bento-card:hover .cal-bento-card-bg-icon { transform: scale(1.12); }

.cal-bento-icon-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.cal-bento-icon {
  width: 48px; height: 48px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cal-bento-icon.birthday  { background: rgba(99,102,241,.1); color: #4f46e5; }
.cal-bento-icon.jubilee   { background: rgba(20,184,166,.1); color: #0d9488; }
.cal-bento-icon.probation { background: rgba(245,158,11,.1); color: #d97706; }
.cal-bento-icon .ms { font-size: 1.4rem; font-variation-settings: 'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }
.cal-bento-card-label {
  font-size: .875rem;
  font-weight: 700;
  color: var(--text-secondary);
}
.cal-bento-val-row { display: flex; align-items: baseline; gap: 8px; }
.cal-bento-big {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -.05em;
  font-family: 'Manrope', sans-serif;
  line-height: 1;
}
.cal-bento-unit {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-muted);
}
.cal-bento-hint {
  font-size: .72rem;
  font-weight: 700;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cal-bento-hint.indigo  { color: #4f46e5; }
.cal-bento-hint.teal    { color: #0d9488; }
.cal-bento-hint.amber   { color: #d97706; }
.cal-bento-hint .ms { font-size: .9rem; }

/* ─── Two-column Layout ─── */
.cal-main-grid {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.cal-timeline-col {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.cal-table-col {
  flex: 1;
  min-width: 0;
}
@media (max-width: 1100px) {
  .cal-main-grid { flex-direction: column; }
  .cal-timeline-col { width: 100%; }
}

/* ─── Timeline Section ─── */
.cal-section-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  font-family: 'Manrope', sans-serif;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.cal-section-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cal-section-dot.active { background: var(--accent); }
.cal-section-dot.muted  { background: var(--border); }

/* Soon events (next 30 days) - border-left cards */
.cal-event-cards { display: flex; flex-direction: column; gap: 12px; }

.cal-event-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
  border-left-width: 4px;
  border-left-style: solid;
}
.cal-event-card.birthday  { border-left-color: #6366f1; }
.cal-event-card.anniversary { border-left-color: #14b8a6; }
.cal-event-card.probation { border-left-color: #f59e0b; }
.cal-event-card.today     { border-left-color: #22c55e; }

.cal-event-date-box {
  background: var(--bg-input);
  border-radius: 10px;
  padding: 6px 10px;
  text-align: center;
  min-width: 54px;
  flex-shrink: 0;
}
.cal-event-date-month {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.cal-event-date-day {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.2;
  font-family: 'Manrope', sans-serif;
}
.cal-event-info { flex: 1; min-width: 0; }
.cal-event-name {
  font-size: .875rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-event-type-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.cal-event-type-row .ms { font-size: .85rem; }
.cal-event-type-row .ms.birthday   { color: #6366f1; }
.cal-event-type-row .ms.anniversary { color: #14b8a6; }
.cal-event-type-row .ms.probation  { color: #f59e0b; }
.cal-event-type-text {
  font-size: .72rem;
  color: var(--text-muted);
}

/* Later events (31-90 days) - lighter cards */
.cal-later-list { display: flex; flex-direction: column; gap: 8px; }

.cal-later-item {
  background: rgba(255,255,255,.6);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
  transition: background .15s;
}
[data-theme='dark'] .cal-later-item { background: rgba(255,255,255,.04); }
.cal-later-item:hover { background: var(--bg-card); }

.cal-later-left { display: flex; align-items: center; gap: 12px; }
.cal-later-icon-box {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg-input);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.cal-later-icon-box .ms { font-size: 1.1rem; }
.cal-later-name { font-size: .875rem; font-weight: 700; color: var(--text-primary); }
.cal-later-date { font-size: .7rem; color: var(--text-muted); margin-top: 1px; }
.cal-later-tag {
  font-size: .65rem;
  font-weight: 700;
  padding: 4px 10px;
  background: var(--bg-input);
  border-radius: 6px;
  color: var(--text-muted);
}

/* ─── Birthday Table ─── */
.cal-table-card {
  background: var(--bg-card);
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,.04);
  overflow: hidden;
}
.cal-table-hd {
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cal-table-hd-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  font-family: 'Manrope', sans-serif;
}
.cal-table-see-all {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: none;
}
.cal-table-see-all .ms { font-size: .9rem; }
.cal-bday-table {
  width: 100%;
  border-collapse: collapse;
}
.cal-bday-table thead tr {
  background: rgba(248,249,250,.5);
}
.cal-bday-table thead th {
  padding: 12px 24px;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  text-align: left;
}
.cal-bday-table tbody tr {
  border-top: 1px solid var(--border);
  transition: background .12s;
}
.cal-bday-table tbody tr:hover { background: rgba(0,0,0,.015); }
.cal-bday-table tbody td { padding: 14px 24px; font-size: .875rem; }
.cal-bday-table .emp-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--text-primary);
}
.cal-emp-avatar-sm {
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: .7rem;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.cal-bday-date { font-weight: 500; color: var(--text-secondary); }
.cal-bday-age  { font-weight: 700; color: var(--text-primary); }
.cal-tag-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 700;
}
.cal-tag-pill.location { background: rgba(99,102,241,.1); color: #4f46e5; }
.cal-tag-pill.dept     { background: var(--bg-input); color: var(--text-muted); }

/* Empty State */
.cal-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}
.cal-empty .ms { font-size: 2.5rem; display: block; margin-bottom: 8px; }