.module-page { display: none; }
.module-page.active { display: block; }

body[data-module="calendar"] .sidebar-section { display: none; }

.calendar-page-heading { margin-bottom: 17px; }

.calendar-palette-panel,
.calendar-toolbar,
.calendar-workbench {
  border: 1px solid var(--line);
  background: var(--surface);
}

.calendar-palette-panel {
  margin-bottom: 12px;
  border-radius: 17px;
  overflow: hidden;
}

.calendar-palette-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 15px 10px;
  border-bottom: 1px solid var(--line-soft);
}

.calendar-palette-heading h2,
.agenda-head h3 {
  margin: 0;
  font-size: 15px;
}

.calendar-palette-heading p,
.agenda-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.calendar-recurring-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.calendar-recurring-legend span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 750;
}

.recurring-week { color: var(--green); background: var(--green-soft); }
.recurring-day { color: #9b6f1a; background: var(--gold-soft); }
html[data-theme="night"] .recurring-day { color: var(--gold); }

.event-palette {
  display: flex;
  gap: 7px;
  padding: 11px 15px 13px;
  overflow-x: auto;
}

.palette-event {
  --event-color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  color: var(--text-soft);
  background: var(--field);
  font-size: 11px;
  font-weight: 720;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.palette-event:hover,
.palette-event.selected {
  color: var(--text);
  border-color: color-mix(in srgb, var(--event-color) 48%, transparent);
  background: color-mix(in srgb, var(--event-color) 13%, var(--field));
}

.palette-event.selected { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--event-color) 38%, transparent); }
.palette-event:active { transform: translateY(1px); }
.palette-event i { width: 8px; height: 8px; border-radius: 3px; background: var(--event-color); }

.palette-event.summit, .calendar-event.summit { --event-color: #9271c7; --event-fill: #7c64b1; }
.palette-event.interview, .calendar-event.interview { --event-color: #5f9dad; --event-fill: #4e8997; }
.palette-event.kickoff, .calendar-event.kickoff { --event-color: #5e9c84; --event-fill: #4c866f; }
.palette-event.review, .calendar-event.review { --event-color: #c39a4c; --event-fill: #ac853c; }
.palette-event.sprint, .calendar-event.sprint { --event-color: #c47771; --event-fill: #ae625d; }
.palette-event.recruit, .calendar-event.recruit { --event-color: #6c8fb8; --event-fill: #587ba3; }
.palette-event.groupTraining1, .calendar-event.groupTraining1 { --event-color: #2f9b90; --event-fill: #247f76; }
.palette-event.groupTraining2, .calendar-event.groupTraining2 { --event-color: #d27d42; --event-fill: #b96631; }
.palette-event.groupTraining3, .calendar-event.groupTraining3 { --event-color: #b44f7b; --event-fill: #963d66; }
.palette-event.monthlyManagement, .calendar-event.monthlyManagement { --event-color: #687ab6; --event-fill: #52639c; }
.palette-event.other, .calendar-event.other { --event-color: #829394; --event-fill: #6c7e7f; }

.calendar-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  margin-bottom: 12px;
  padding: 7px 10px;
  border-radius: 15px;
}

.calendar-org-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  color: var(--muted);
  font-size: 13px;
}

.calendar-org-breadcrumb button {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  color: var(--cyan);
  background: var(--surface-strong);
}

.calendar-org-breadcrumb strong { color: var(--ink); }

.calendar-view-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--deep-field);
}

.calendar-view-switch button {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 720;
}

.calendar-view-switch button:hover { color: var(--text); }
.calendar-view-switch button.active { color: var(--text); background: var(--glass-strong); box-shadow: var(--small-shadow); }

.calendar-branch-picker,
.calendar-label-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
}

.calendar-branch-picker select { min-width: 102px; height: 34px; padding-inline: 9px 28px; }
.calendar-label-toggle input { accent-color: var(--cyan); }
.calendar-density-note { margin: 0 2px 0 auto; color: var(--muted); font-size: 10px; }

.calendar-workbench { border-radius: 18px; overflow: hidden; }

.calendar-scroll {
  --branch-width: 126px;
  --day-width: 27px;
  --row-height: 58px;
  position: relative;
  isolation: isolate;
  max-height: calc(100vh - 318px);
  min-height: 430px;
  overflow: auto;
  background: color-mix(in srgb, var(--surface-2) 64%, transparent);
  scrollbar-color: color-mix(in srgb, var(--cyan) 30%, transparent) transparent;
  scrollbar-width: thin;
}

.calendar-scroll.focus { --day-width: 34px; --row-height: 114px; min-height: 360px; }
.calendar-stage { width: calc(var(--branch-width) + var(--timeline-days, 276) * var(--day-width)); min-width: 100%; }

.calendar-timeline-header {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  grid-template-columns: var(--branch-width) calc(var(--timeline-days, 276) * var(--day-width));
  min-height: 65px;
  border-bottom: 1px solid var(--line);
  background: #f2f5f8;
  overflow: clip;
}

.calendar-header-branch {
  position: sticky;
  z-index: 40;
  left: 0;
  display: flex;
  align-items: flex-end;
  padding: 0 10px 10px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  background: #f2f5f8;
  box-shadow: 8px 0 12px rgba(73, 91, 116, .08);
  font-size: 10px;
  font-weight: 720;
}

.calendar-header-track {
  display: grid;
  grid-template-rows: 28px 37px;
  width: calc(var(--timeline-days, 276) * var(--day-width));
}

.calendar-month-row,
.calendar-day-row { display: grid; grid-template-columns: repeat(var(--timeline-days, 276), var(--day-width)); }

.calendar-month-label {
  display: flex;
  align-items: center;
  padding-left: 10px;
  border-right: 1px solid var(--line-soft);
  color: var(--text-soft);
  background: var(--field);
  font-size: 10px;
  font-weight: 760;
}

.calendar-day-head {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  border-right: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 9px;
}

.calendar-day-head.month-start { border-left: 1px solid var(--line); }
.calendar-day-number { display: grid; place-items: center; min-width: 19px; height: 18px; font-weight: 760; }
.calendar-weekday { font-size: 8px; line-height: 1; transform: scale(.92); transform-origin: top center; }
.calendar-day-head.today .calendar-day-number { border-radius: 7px; color: #fff; background: var(--cyan); font-weight: 800; }

.calendar-row {
  display: grid;
  grid-template-columns: var(--branch-width) calc(var(--timeline-days, 276) * var(--day-width));
  min-height: var(--row-height);
  border-bottom: 1px solid var(--line-soft);
}

.calendar-row:last-child { border-bottom: 0; }
.calendar-row:hover, .calendar-row.selected { background: var(--cyan-soft); }

.calendar-branch-label {
  position: sticky;
  z-index: 20;
  left: 0;
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 7px;
  min-height: var(--row-height);
  padding: 0 9px;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--text-soft);
  background: #f2f5f8;
  box-shadow: 8px 0 12px rgba(73, 91, 116, .06);
  overflow: hidden;
  text-align: left;
}

.calendar-row:hover .calendar-branch-label,
.calendar-row.selected .calendar-branch-label { color: var(--text); background: var(--cyan-soft); }
.branch-handle { color: var(--muted); font-size: 13px; letter-spacing: -.17em; }
.reorder-mode .branch-handle { color: var(--cyan-deep); }
.branch-copy strong, .branch-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.branch-copy strong { font-size: 11px; }
.branch-copy small { margin-top: 1px; color: var(--muted); font-size: 8px; }
.calendar-row[data-org-level="central"] .calendar-branch-label,
.calendar-row[data-org-level="unit"] .calendar-branch-label { padding-left: 18px; background: var(--surface-strong); }

html[data-theme="night"] .calendar-timeline-header,
html[data-theme="night"] .calendar-header-branch,
html[data-theme="night"] .calendar-branch-label { background: #18242f; }

.calendar-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--timeline-days, 276), var(--day-width));
  grid-template-rows: repeat(2, minmax(16px, 1fr));
  width: calc(var(--timeline-days, 276) * var(--day-width));
  min-height: var(--row-height);
}

.calendar-scroll.focus .calendar-track { grid-template-rows: repeat(3, minmax(24px, 1fr)); }
.calendar-day-cell { grid-row: 1 / -1; min-width: var(--day-width); padding: 0; border: 0; border-right: 1px solid var(--line-soft); border-radius: 0; background: transparent; cursor: crosshair; }
.calendar-day-cell:hover { background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.calendar-day-cell.month-start { border-left: 1px solid var(--line); }
.calendar-day-cell.recruitment-week { background: color-mix(in srgb, var(--green) 9%, transparent); }
.calendar-day-cell.recruitment-day { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.calendar-track.drag-target { background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.calendar-scroll.panning, .calendar-scroll.panning * { cursor: grabbing !important; user-select: none; }

.calendar-event {
  --event-fill: var(--cyan);
  position: relative;
  z-index: 3;
  align-self: center;
  min-width: 0;
  height: 22px;
  margin: 2px 1px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--event-color) 72%, white);
  border-radius: 7px;
  color: #fff;
  background: var(--event-fill);
  box-shadow: 0 4px 10px rgba(44, 65, 66, .16);
  overflow: hidden;
  text-align: left;
  cursor: grab;
  transition: filter 150ms ease, transform 150ms ease;
}

.calendar-event:hover { z-index: 4; filter: brightness(1.08); transform: translateY(-1px); }
.calendar-event:active { cursor: grabbing; }
.calendar-event-title { display: block; overflow: hidden; font-size: 9px; font-weight: 760; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-scroll.focus .calendar-event { height: 28px; padding-inline: 10px; }
.calendar-scroll.focus .calendar-event-title { font-size: 10px; line-height: 26px; }

.event-resize-handle { position: absolute; z-index: 2; top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
.event-resize-handle.start { left: 0; }
.event-resize-handle.end { right: 0; }
.event-resize-handle::after { position: absolute; top: 5px; bottom: 5px; width: 1px; background: rgba(255,255,255,.65); content: ""; opacity: 0; }
.event-resize-handle.start::after { left: 2px; }
.event-resize-handle.end::after { right: 2px; }
.calendar-event:hover .event-resize-handle::after { opacity: 1; }

.calendar-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 42px;
  padding: 8px 12px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  background: var(--field);
  font-size: 9px;
}

.calendar-foot > div { display: flex; flex-wrap: wrap; gap: 12px; }
.calendar-foot span { display: inline-flex; align-items: center; gap: 5px; }
.calendar-foot i { width: 9px; height: 9px; border-radius: 3px; }
.foot-week { background: color-mix(in srgb, var(--green) 45%, transparent); }
.foot-day { background: color-mix(in srgb, var(--gold) 50%, transparent); }
.foot-event { background: var(--cyan); }
.calendar-foot strong { color: var(--text-soft); }

.calendar-drawer { position: fixed; z-index: 60; inset: 0; visibility: hidden; pointer-events: none; }
.calendar-drawer.open { visibility: visible; pointer-events: auto; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(23,39,42,.45); backdrop-filter: blur(7px); opacity: 0; transition: opacity 190ms ease; }
.calendar-drawer.open .drawer-backdrop { opacity: 1; }

.calendar-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(640px, 96vw);
  border-left: 1px solid var(--line);
  color: var(--text);
  background: var(--glass-strong);
  box-shadow: -24px 0 70px rgba(31, 48, 49, .24);
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}

.calendar-drawer.open .calendar-drawer-panel { transform: translateX(0); }
.calendar-drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 72px; padding: 15px 18px; border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.calendar-drawer-header span { color: var(--cyan-deep); font-size: 9px; font-weight: 750; }
.calendar-drawer-header h2 { margin: 3px 0 0; font-size: 18px; }

.calendar-drawer-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.calendar-drawer-tabs button { min-height: 38px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-weight: 720; }
.calendar-drawer-tabs button.active { color: var(--text); background: var(--field); }
.calendar-drawer-content { min-height: 0; flex: 1 1 auto; overflow-y: auto; }
.calendar-drawer-view { display: none; padding: 18px; }
.calendar-drawer-view.active { display: block; }

.calendar-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.calendar-form-grid label, .agenda-editor-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.calendar-form-grid label.wide, .agenda-editor-grid label.wide { grid-column: 1 / -1; }
.calendar-form-grid input, .calendar-form-grid select, .calendar-form-grid textarea,
.agenda-editor-grid input, .agenda-editor-grid select, .agenda-editor-grid textarea { width: 100%; min-height: 38px; padding: 8px 10px; }
.calendar-form-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 11px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.calendar-form-summary span { color: var(--cyan-deep); font-size: 11px; font-weight: 750; }
.calendar-form-summary small { color: var(--muted); font-size: 9px; text-align: right; }
.calendar-drawer-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.btn.danger-quiet { color: var(--red); border-color: transparent; background: var(--red-soft); }
.btn.danger-quiet:hover { background: color-mix(in srgb, var(--red) 18%, transparent); }

.agenda-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.agenda-date-tabs { display: flex; gap: 6px; margin: 13px 0; padding-bottom: 2px; overflow-x: auto; }
.agenda-date-tabs button { flex: 0 0 auto; min-height: 34px; padding: 0 10px; border: 1px solid var(--line-soft); border-radius: 10px; color: var(--muted); background: var(--field); font-size: 9px; font-weight: 720; }
.agenda-date-tabs button.active { color: #fff; border-color: transparent; background: var(--cyan); }

.agenda-editor { margin-bottom: 13px; padding: 13px; border: 1px solid color-mix(in srgb, var(--cyan) 34%, transparent); border-radius: 14px; background: var(--cyan-soft); }
.agenda-editor-head, .agenda-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.agenda-editor-head { margin-bottom: 11px; }
.agenda-editor-head strong { font-size: 12px; }
.agenda-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.agenda-editor-actions { margin-top: 12px; }
.agenda-editor-actions .btn.primary { margin-left: auto; }
.agenda-conflict { margin: 10px 0 0; padding: 8px 10px; color: var(--red); background: var(--red-soft); border-radius: 9px; font-size: 10px; }

.agenda-timeline { position: relative; height: 1080px; border: 1px solid var(--line-soft); border-radius: 13px; background: var(--deep-field); overflow: hidden; }
.agenda-slot { position: absolute; right: 0; left: 0; height: 30px; border-bottom: 1px solid var(--line-soft); }
.agenda-slot.hour { border-bottom-color: var(--line); }
.agenda-slot-button { position: absolute; z-index: 1; inset: 0 0 0 58px; border: 0; background: transparent; }
.agenda-slot-button:hover { background: var(--cyan-soft); }
.agenda-time { position: absolute; left: 8px; width: 42px; color: var(--muted); font-size: 8px; transform: translateY(-6px); }
.agenda-block { position: absolute; z-index: 3; right: 9px; left: 62px; display: grid; grid-template-columns: 72px minmax(0,1fr) auto; align-items: start; gap: 8px; min-height: 28px; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--cyan) 42%, transparent); border-radius: 8px; color: var(--text); background: color-mix(in srgb, var(--cyan) 16%, var(--glass-strong)); box-shadow: 0 7px 18px rgba(55,78,78,.12); overflow: hidden; text-align: left; }
.agenda-block:hover { border-color: var(--cyan); }
.agenda-block time { color: var(--cyan-deep); font-size: 9px; font-weight: 760; }
.agenda-block strong, .agenda-block span, .agenda-block small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-block strong { font-size: 10px; }
.agenda-block span { color: var(--muted); font-size: 8px; }
.agenda-block small { color: var(--green); font-size: 8px; }
.agenda-empty { position: absolute; z-index: 2; top: 12px; right: 12px; padding: 7px 9px; border-radius: 8px; color: var(--muted); background: var(--glass-strong); font-size: 9px; }

@media (max-width: 1180px) {
  .calendar-scroll { --branch-width: 112px; max-height: 650px; }
  .calendar-density-note { display: none; }
}

@media (max-width: 900px) {
  body[data-module="calendar"] .sidebar-section { display: block; }
  .calendar-palette-heading, .calendar-toolbar, .calendar-foot { align-items: flex-start; flex-direction: column; }
  .calendar-recurring-legend { justify-content: flex-start; }
  .calendar-scroll { min-height: 520px; }
}

@media (max-width: 660px) {
  .calendar-form-grid, .agenda-editor-grid { grid-template-columns: 1fr; }
  .calendar-form-grid label.wide, .agenda-editor-grid label.wide { grid-column: auto; }
  .calendar-view-switch { width: 100%; }
  .calendar-view-switch button { flex: 1 1 0; }
  .calendar-branch-picker { width: 100%; justify-content: space-between; }
  .calendar-branch-picker select { flex: 1; }
  .calendar-drawer-panel { width: 100%; }
  .agenda-block { grid-template-columns: 66px minmax(0,1fr); }
  .agenda-block small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-drawer-panel, .drawer-backdrop { transition-duration: .01ms; }
}