/* Shared UI components — buttons, tags, pills, view header */

/* Buttons */
.primary-button,
.ghost-button {
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 11px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.primary-button {
  background: var(--accent);
  color: #0b0f16;
  font-weight: 600;
}

.primary-button:hover { background: var(--accent-hover); }

/* Allow an anchor to be styled as a primary button (e.g. download links). */
a.primary-button { display: inline-block; text-decoration: none; text-align: center; }

.ghost-button {
  background: rgba(var(--overlay-rgb), 0.06);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.ghost-button:hover    { border-color: var(--border-strong); }
.ghost-button.small    { padding: 6px 10px; font-size: 11px; }
.ghost-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Tags / pills */
.tag {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-muted);
}

.pill {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(var(--overlay-rgb), 0.08);
  font-size: 11px;
  color: var(--text-secondary);
}

body.theme-light .ghost-button {
  background: rgba(15, 23, 42, 0.06);
}

body.theme-light .tag {
  background: rgba(15, 23, 42, 0.04);
}

body.theme-light .pill {
  background: rgba(15, 23, 42, 0.06);
}

/* View header (used by month, schedule, settings) */
.view-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.view-head h2 { margin: 0; font-size: 18px; }
.muted        { color: var(--text-secondary); margin: 6px 0 0; }

.view-actions {
  display: flex;
  gap: 10px;
}

/* Intentional-calendar-x event coloring is theme-adaptive. JS sets the source
   vars (--ev-surface-dark/light, --ev-text-dark/light) + the .icx-event-themed
   class; these resolve the consumed --intentional-event-* vars per theme, so a
   light/dark switch recolors existing events without a re-render. Goal-linked
   "task" events get Notion-style pastels in light mode; regular Google-Calendar
   events pass the same saturated value into both themes (so they're unchanged). */
.icx-event-themed {
  --intentional-event-surface-color: var(--ev-surface-dark);
  --intentional-event-text-color: var(--ev-text-dark);
}

body.theme-light .icx-event-themed {
  --intentional-event-surface-color: var(--ev-surface-light);
  --intentional-event-text-color: var(--ev-text-light);
}