.annual-calendar {
  display: grid;
  gap: 22px;
}

.annual-year-nav {
  min-height: 58px;
  display: grid;
  grid-template-columns: 52px repeat(5, minmax(70px, 1fr)) 52px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface, #25272d);
  overflow: hidden;
}

.annual-year-nav button {
  align-self: stretch;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 30px;
  cursor: pointer;
}

.annual-year-nav button:hover,
.annual-year-nav button:focus-visible {
  background: color-mix(in srgb, var(--brand, #0aa37f) 12%, transparent);
  outline: none;
}

.annual-year-nav span,
.annual-year-nav strong {
  height: 58px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.annual-year-nav strong {
  position: relative;
  color: var(--text);
  font-size: 21px;
}

.annual-year-nav strong::after {
  content: "";
  position: absolute;
  right: 10%;
  bottom: 0;
  left: 10%;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brand, #0aa37f);
}

.annual-month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 28px;
}

.annual-month-card {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

.annual-month-card h3 {
  margin: 0;
  padding: 13px 16px;
  border-bottom: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
}

.annual-weekdays,
.annual-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.annual-weekdays {
  padding: 10px 10px 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
}

.annual-days {
  gap: 4px;
  padding: 4px 10px 12px;
}

.annual-day {
  position: relative;
  min-height: 40px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  border: 0;
  font-family: inherit;
}

.annual-day b {
  font-weight: 400;
  padding-bottom: 8px;
}

.annual-day--busy {
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.annual-day--busy::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--annual-status);
}

.annual-day--multiple::after {
  left: calc(50% - 7px);
  box-shadow: 8px 0 0 var(--annual-status);
}

.annual-day--busy:focus-visible {
  outline: 2px solid var(--brand, #0aa37f);
  outline-offset: 1px;
}

.agenda-event-link,
.checklist-task-chip {
  width: 100%;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.agenda-event-link:hover,
.agenda-event-link:focus-visible,
.checklist-task-chip:hover,
.checklist-task-chip:focus-visible {
  filter: brightness(1.14);
  outline: 2px solid color-mix(in srgb, var(--brand, #0aa37f) 60%, transparent);
  outline-offset: 1px;
}

.agenda-sidebar-link {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.agenda-sidebar-link:hover,
.agenda-sidebar-link:focus-visible {
  background: color-mix(in srgb, var(--brand, #0aa37f) 8%, transparent);
  outline: none;
}

.checklist-calendar {
  width: 100%;
}

.checklist-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 14px;
  color: var(--muted);
  font-size: 12px;
}

.checklist-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.checklist-calendar-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.checklist-calendar-legend .is-pending { background: #6b6f76; }
.checklist-calendar-legend .is-progress { background: #956000; }
.checklist-calendar-legend .is-done { background: #087f63; }

.annual-event-picker {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .62);
}

.annual-event-picker__panel {
  width: min(520px, 100%);
  max-height: min(640px, 82vh);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface, #25272d);
}

.annual-event-picker__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface, #25272d);
}

.annual-event-picker__head h3 { margin: 0; font-size: 17px; }
.annual-event-picker__head button {
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 25px;
  cursor: pointer;
}

.annual-event-picker__list { display: grid; gap: 8px; padding: 12px; }
.annual-event-picker__list button {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.annual-event-picker__list button:hover { border-color: var(--brand, #0aa37f); }
.annual-event-picker__list span { color: var(--muted); font-size: 12px; }

.annual-day--busy:hover {
  background: var(--panel-soft);
}

.annual-summary {
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}

.annual-summary strong {
  color: var(--text);
}

/* Mesmo padrão discreto nas agendas geral e de checklist. */
.view-shell .agenda-cal .calendar-week-header {
  background: transparent;
}

.view-shell .agenda-cal .cal-day-name {
  color: var(--muted);
  font-weight: 400;
}

.view-shell .agenda-cal .cal-cell {
  min-width: 0;
  min-height: 104px;
  padding: 10px 8px;
  background: var(--panel);
  border-color: var(--line);
}

.view-shell .agenda-cal .cal-cell--dim {
  background: var(--panel-soft);
}

.view-shell .agenda-cal .cal-cell.is-today {
  background: color-mix(in srgb, var(--brand, #0aa37f) 5%, var(--panel));
}

.view-shell .agenda-cal .cal-day-num {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
}

.view-shell .agenda-cal .cal-event-chip {
  position: relative;
  background: transparent;
  color: var(--text);
  border-radius: 4px;
  padding: 5px 4px 5px 14px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 2px;
}

.view-shell .agenda-cal .cal-event-chip::before,
.view-shell .agenda-sidebar .cal-event-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--agenda-status);
}

.view-shell .agenda-cal .cal-event-chip::before {
  position: absolute;
  left: 2px;
  top: calc(50% - 3px);
}

.view-shell .agenda-cal .cal-event-chip:hover {
  background: var(--panel-soft);
  filter: none;
}

.view-shell .agenda-sidebar__head {
  background: transparent;
}

.view-shell .agenda-sidebar .cal-event-row {
  padding: 14px;
  border-radius: 0;
}

.view-shell .agenda-sidebar .cal-event-date {
  background: transparent;
  border: 0;
  padding: 3px 0;
}

.view-shell .agenda-sidebar .cal-event-date strong,
.view-shell .agenda-sidebar .cal-event-title {
  color: var(--text);
  font-weight: 500;
}

.view-shell .agenda-sidebar .cal-event-badge {
  background: transparent;
  color: var(--muted);
  padding: 0;
  font-size: 11px;
  font-weight: 400;
}

.view-shell .agenda-sidebar .cal-event-badge::before {
  margin-right: 6px;
}

.cal-legend-item i,
.checklist-calendar-legend i {
  width: 6px;
  height: 6px;
}

@media (pointer: coarse) {
  .annual-day,
  .view-shell .agenda-cal .cal-event-chip { min-height: 44px; }
}

@media (max-width: 760px) {
  .view-shell .checklist-calendar .calendar-grid-wrap {
    display: block;
    overflow-x: auto;
  }
  .view-shell .checklist-calendar .calendar-week-header,
  .view-shell .checklist-calendar .calendar-body { min-width: 700px; }
}

@media (min-width: 1450px) {
  .annual-month-grid { grid-template-columns: repeat(4, minmax(210px, 1fr)); }
}

@media (max-width: 980px) {
  .annual-month-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

@media (max-width: 620px) {
  .annual-year-nav { grid-template-columns: 44px repeat(3, 1fr) 44px; }
  .annual-year-nav span:first-of-type,
  .annual-year-nav span:last-of-type { display: none; }
  .annual-month-grid { grid-template-columns: 1fr; }
}
/* Agenda única: modos ficam dentro da agenda; Eventos mantém somente as OS. */
.agenda-toolbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:0 0 18px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:16px}.agenda-toolbar label{display:flex;flex-direction:column;gap:6px;font-weight:600}.agenda-toolbar select{min-height:44px;min-width:180px;padding:8px 12px}.agenda-toolbar p{flex:1;min-width:200px;margin:0;color:var(--muted)}.agenda-unified .agenda-layout{display:block}.agenda-period-controls{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.agenda-period-controls button,.agenda-context-back{min-width:44px;min-height:44px}.agenda-context-back{margin-bottom:14px}.agenda-list-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.agenda-list-items .cal-event-row{width:100%;text-align:left;min-height:64px}.agenda-unified .annual-day--busy{min-width:44px;min-height:44px}.agenda-unified .annual-month-grid{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}.agenda-unified .cal-event-chip{min-height:44px;white-space:normal;overflow-wrap:anywhere}.agenda-unified .annual-month-card{min-width:0}
@media(max-width:760px){.agenda-toolbar{gap:12px;padding:12px}.agenda-toolbar label,.agenda-toolbar select{width:100%;min-width:0}.agenda-toolbar p{font-size:13px}.agenda-list-items{grid-template-columns:1fr}.agenda-unified .annual-month-grid{grid-template-columns:1fr}.agenda-unified .annual-month-card{padding:8px}.agenda-unified .annual-day--busy{min-width:0;width:100%;min-height:44px}.agenda-unified .annual-days{gap:0}.agenda-unified .calendar-grid-wrap{overflow-x:auto;max-width:100%}.agenda-unified .calendar-body,.agenda-unified .calendar-week-header{min-width:630px}.agenda-unified .calendar-controls{flex-wrap:wrap}.agenda-unified{min-width:0;max-width:100%}.agenda-list-view .calendar-controls strong{font-size:16px}}

.agenda-list-view .cal-event-badge{background:var(--surface);color:var(--text)}

.agenda-unified .cal-btn{min-width:44px;min-height:44px}
