/* Fork Calendar app (src/js/fork/apps/calendar/). Follows upstream's look:
   tab-bar tabs, flat list rows like #events-view, upstream weights and
   tokens. The only extra colour is --fork-private-color, which marks private
   (space) events; public RSVPs use the highlight colour. */

#calendar-view {
  --calendar-public-tint: color-mix(
    in srgb,
    var(--highlight-color) 14%,
    transparent
  );
  --calendar-private-tint: color-mix(
    in srgb,
    var(--fork-private-color) 16%,
    transparent
  );
}

.calendar-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
}

.calendar-month-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.calendar-month-nav .icon-button app-icon {
  width: 20px;
  height: 20px;
}

.calendar-month-title {
  margin: 0;
  min-width: 9em;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.calendar-today-button {
  padding: 4px 12px;
  font-size: 13px;
}

.calendar-sources {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-color-secondary);
  font-size: 14px;
}

.calendar-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.calendar-source--public input {
  accent-color: var(--highlight-color);
}

.calendar-source--private input {
  accent-color: var(--calendar-color, var(--fork-private-color));
}

.calendar-refresh-button app-icon {
  width: 18px;
  height: 18px;
}

.calendar-refresh-button--busy app-icon {
  animation: spin 1s linear infinite;
}

.calendar-form-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  cursor: pointer;
}

.calendar-manage {
  margin: 12px 16px;
  padding: 12px;
  border: var(--hair) solid var(--post-border-color);
  border-radius: var(--callout-border-radius);
}

.calendar-manage h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
}

.calendar-manage-list {
  margin: 8px 0;
  padding: 0;
  list-style: none;
}

.calendar-manage-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.calendar-manage-row input[type="color"] {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
}

.calendar-manage-name {
  flex: 1;
  min-width: 0;
  padding: 8px;
  border: var(--hair) solid var(--post-border-color);
  border-radius: var(--text-input-border-radius);
  background: var(--text-input-background-color);
  color: var(--text-color);
  font: inherit;
}

.calendar-manage-count {
  flex-shrink: 0;
  color: var(--text-color-secondary);
  font-size: 13px;
  white-space: nowrap;
}

.calendar-manage-row .icon-button:disabled {
  opacity: 0.35;
}

/* .ics import panel */
.calendar-import-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.calendar-import-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--fork-private-color);
}

.calendar-import--done .calendar-import-icon {
  color: var(--highlight-color);
}

.calendar-import-title {
  flex: 1;
  min-width: 0;
}

.calendar-import-head .icon-button {
  flex-shrink: 0;
  margin: -6px -6px 0 0;
}

.calendar-import-file {
  overflow: hidden;
  color: var(--text-color-muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-import-summary {
  margin: 8px 0 0;
  color: var(--text-color-secondary);
  font-size: 13px;
}

.calendar-import-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  border: var(--hair) solid var(--post-border-color);
  border-radius: var(--callout-border-radius);
  overflow: hidden;
}

.calendar-import-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px 10px 14px;
  border-left: 3px solid var(--calendar-color, var(--fork-private-color));
}

.calendar-import-item + .calendar-import-item,
.calendar-import-more {
  border-top: var(--hair) solid var(--post-border-color);
}

.calendar-import-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.calendar-import-item .calendar-event-meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.calendar-import-more {
  padding: 8px 14px;
  color: var(--text-color-muted);
  font-size: 13px;
}

.calendar-import-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
}

.calendar-import-calendar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-color-secondary);
  font-size: 13px;
}

.calendar-import-calendar select {
  padding: 6px 8px;
  border: var(--hair) solid var(--post-border-color);
  border-radius: var(--text-input-border-radius);
  background: var(--text-input-background-color);
  color: var(--text-color);
  font: inherit;
}

.calendar-import-progress {
  color: var(--text-color-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.calendar-import-buttons {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.calendar-calendars {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 0 12px 8px;
  color: var(--text-color-secondary);
  font-size: 13px;
}

.calendar-notice {
  margin: 12px 16px;
  padding: 10px 12px;
  border-radius: var(--callout-border-radius);
  background: var(--background-color-secondary);
  color: var(--text-color-secondary);
  font-size: 14px;
}

.calendar-loading {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: var(--hair) solid var(--post-border-color);
}

.calendar-dow {
  padding: 6px;
  border-bottom: var(--hair) solid var(--post-border-color);
  color: var(--text-color-muted);
  font-size: 12px;
}

.calendar-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  min-width: 0;
  min-height: 92px;
  padding: 4px;
  border: none;
  border-right: var(--hair) solid var(--post-border-color);
  border-bottom: var(--hair) solid var(--post-border-color);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.calendar-cell:nth-child(7n) {
  border-right: none;
}

@media (hover: hover) {
  .calendar-cell:hover {
    background: var(--post-hover-color);
  }
}

.calendar-cell--out {
  color: var(--text-color-muted);
}

.calendar-cell--selected {
  background: var(--highlight-color-tint);
}

.calendar-day-number {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.calendar-cell--today .calendar-day-number {
  background: var(--highlight-color);
  color: var(--primary-button-text-color);
  font-weight: 600;
}

.calendar-chip {
  display: block;
  min-width: 0;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11.5px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-chip--public {
  background: var(--calendar-public-tint);
}

.calendar-chip--private {
  background: var(--calendar-private-tint);
}

/* A private calendar's own colour (from the bridge's Fossify colours), set
   inline as --calendar-color by the view. */
.calendar-chip--private[style*="--calendar-color"] {
  background: color-mix(in srgb, var(--calendar-color) 22%, transparent);
}

.calendar-more {
  padding-left: 4px;
  color: var(--text-color-muted);
  font-size: 11px;
}

.calendar-day-panel,
.calendar-agenda {
  display: flex;
  flex-direction: column;
  padding-bottom: 32px;
}

.calendar-day-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 16px 8px;
}

.calendar-day-panel-head:empty {
  display: none;
}

.calendar-day-panel-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.calendar-new-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
}

.calendar-new-button app-icon {
  width: 18px;
  height: 18px;
}

/* Flat rows, as #events-view */
.calendar-event-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--hair) solid var(--post-border-color);
}

.calendar-event {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: var(--hair) solid var(--post-border-color);
}

.calendar-event:has(> a.calendar-event-body) {
  padding: 0;
}

.calendar-event > a.calendar-event-body {
  padding: 14px 16px;
}

@media (hover: hover) {
  .calendar-event > a.calendar-event-body:hover {
    background: var(--post-hover-color);
  }
}

.calendar-event-body {
  display: flex;
  flex: 1 1 16em;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.calendar-event-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* A dot in the source's colour before the name */
.calendar-event-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.calendar-event-name::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--highlight-color);
  vertical-align: middle;
}

.calendar-event--private .calendar-event-name::before {
  background: var(--calendar-color, var(--fork-private-color));
}

.calendar-pill {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: var(--pill-button-border-radius);
  background: var(--background-color-secondary);
  color: var(--text-color-secondary);
  font-size: 12px;
  white-space: nowrap;
}

.calendar-pill app-icon {
  width: 12px;
  height: 12px;
}

.calendar-event-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-color-muted);
  font-size: 13px;
}

.calendar-event-meta app-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.calendar-event-description {
  margin: 2px 0 0;
  color: var(--text-color-secondary);
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.calendar-notes-toggle {
  margin-top: 4px;
  padding: 0;
  border: none;
  background: none;
  color: var(--highlight-color);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

@media (hover: hover) {
  .calendar-notes-toggle:hover {
    text-decoration: underline;
  }
}

.calendar-event-actions {
  display: flex;
  gap: 6px;
}

.calendar-event-actions {
  flex-wrap: wrap;
}

/* The app's nav column already links Month, Agenda, Search and RSVPs. */
@media (min-width: 800px) {
  .fork-rail-layout:not(.fork-nav-collapsed) .calendar-view-tabs {
    display: none;
  }
}

.calendar-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 8px 12px;
}

.calendar-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 36px;
  border: var(--hair) solid var(--post-border-color);
  border-radius: var(--text-input-border-radius);
  background: var(--text-input-background-color);
  color: var(--text-color);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}

/* Our own clear button replaces the browser's. */
.calendar-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.calendar-search input::placeholder {
  color: var(--text-color-muted);
}

.calendar-search input:focus {
  border-color: var(--highlight-color);
}

@media (hover: hover) {
  .calendar-search input:hover {
    background: var(--post-hover-color);
  }
}

.calendar-search > app-icon {
  position: absolute;
  left: 10px;
  width: 18px;
  height: 18px;
  color: var(--text-color-muted);
  pointer-events: none;
}

.calendar-search-clear {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: var(--circular-button-border-radius);
  background: var(--background-color-secondary);
  color: var(--text-color-muted);
  cursor: pointer;
}

.calendar-search-clear app-icon {
  width: 14px;
  height: 14px;
}

button.calendar-event-jump {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.calendar-event-meta.calendar-event-jump {
  cursor: pointer;
}

.calendar-scope {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.calendar-event-actions .rounded-button {
  padding: 4px 12px;
  font-size: 13px;
}

.calendar-empty {
  margin: 0;
  padding: 8px 16px;
  color: var(--text-color-muted);
}

/* Same as #events-view .events-heading */
.calendar-agenda-heading {
  margin: 0;
  padding: 16px 16px 4px;
  color: var(--text-color-secondary);
  font-size: 13px;
  font-weight: 600;
}

.calendar-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 16px 16px;
  padding: 12px;
  border: var(--hair) solid var(--post-border-color);
  border-radius: var(--card-border-radius);
}

.calendar-form h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
}

/* Same look as upstream's form inputs */
.calendar-form textarea,
.calendar-form select {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border: var(--hair) solid var(--post-border-color);
  border-radius: var(--text-input-border-radius);
  background: var(--text-input-background-color);
  color: var(--text-color);
  font: inherit;
  resize: vertical;
}

.calendar-form select {
  resize: none;
}

.calendar-form .form-group {
  margin-bottom: 8px;
}

.calendar-form .button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}

.calendar-form .settings-hint {
  margin: 4px 0 0;
  color: var(--text-color-muted);
  font-size: 13px;
}

.calendar-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
}

.calendar-form-row .form-group {
  flex: 1 1 8em;
}

/* Phone: chips become coloured bars, as in the mockup */
@media (max-width: 599px) {
  .calendar-cell {
    min-height: 58px;
    padding: 3px;
  }

  .calendar-chip {
    height: 5px;
    padding: 0;
    border-radius: 3px;
    font-size: 0;
  }

  .calendar-chip--public {
    background: var(--highlight-color);
  }

  .calendar-chip--private {
    background: var(--calendar-color, var(--fork-private-color));
  }

  .calendar-day-number {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }

  .calendar-month-title {
    min-width: 0;
  }
}

/* Fork app pages (Calendar, Map, Goals): the right column is Bluesky's
   (search, feeds, trending), so drop it and give the page that room. */
@media (min-width: 800px) {
  .fork-app-page .view-column-right {
    display: none;
  }

  .fork-app-page .view-column-center {
    max-width: 900px;
  }
}

/* Fork: Saved Posts archive toolbar (src/js/fork/bookmarkArchive.template.js).
   The search box reuses .calendar-search. */
.archive-toolbar {
  padding-bottom: 4px;
  border-bottom: var(--hair) solid var(--post-border-color);
}

.archive-controls,
.archive-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 12px 8px;
}

.archive-status-line {
  justify-content: space-between;
  color: var(--text-color-muted);
  font-size: 13px;
}

.archive-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.archive-select select {
  padding: 5px 8px;
  border: var(--hair) solid var(--post-border-color);
  border-radius: var(--text-input-border-radius);
  background: var(--text-input-background-color);
  color: var(--text-color);
  font-size: 14px;
}

.archive-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: var(--hair) solid var(--post-border-color);
  border-radius: var(--pill-button-border-radius);
  background: var(--background-color-secondary);
  color: var(--text-color);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}

.archive-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.archive-button app-icon {
  width: 15px;
  height: 15px;
}

.archive-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: var(--hair) solid var(--post-border-color);
  color: var(--text-color-secondary);
  font-size: 13px;
}

.archive-facets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.archive-facets-label {
  min-width: 72px;
  color: var(--text-color-muted);
}

.archive-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border: var(--hair) solid transparent;
  border-radius: var(--pill-button-border-radius);
  background: var(--background-color-secondary);
  color: var(--text-color-secondary);
  font-size: 12px;
  cursor: pointer;
}

.archive-chip--on {
  border-color: var(--highlight-color);
  color: var(--text-color);
}

.archive-chip-count {
  color: var(--text-color-muted);
}

.archive-note {
  padding: 10px 16px 0;
  color: var(--text-color-muted);
  font-size: 12px;
}

.archive-missing {
  padding: 12px 16px;
  color: var(--text-color-muted);
  font-size: 14px;
}