/* =============================================================================
 * calendar-invites.css — C2: pending emailed calendar invites.
 *
 * Styles a "pending invites" strip the calendar view renders above the grid,
 * one card per invite, each with ACCEPT / DECLINE actions. Uses the app's dark
 * theme custom properties (defined in styles.css :root) so it inherits the
 * instance branding (primary/accent/success/danger) and stays consistent.
 *
 * All class names are prefixed `ci-` so the conductor's app.js markup targets
 * them without colliding with the existing calendar / kanban styles.
 * ========================================================================== */

/* The horizontal strip wrapping the pending-invite cards. Hidden when empty
 * (the conductor toggles .ci-invite-strip--empty or simply renders nothing). */
.ci-invite-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
  background: var(--bg-dark, #1e293b);
  border: 1px solid var(--border-color, #475569);
  border-left: 3px solid var(--accent, #6366f1);
  border-radius: var(--radius-lg, 0.5rem);
}

.ci-invite-strip--empty {
  display: none;
}

/* Strip heading / count (optional element the conductor may render). */
.ci-invite-strip-title {
  flex: 1 1 100%;
  margin: 0 0 0.25rem;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary, #94a3b8);
}

.ci-invite-strip-title .ci-invite-count {
  display: inline-block;
  min-width: 1.25rem;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--accent, #6366f1);
  color: #fff;
  font-size: var(--text-xs, 0.75rem);
  text-align: center;
}

/* A single invite card. */
.ci-invite {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 18rem;
  max-width: 24rem;
  padding: 0.75rem 0.85rem;
  background: var(--bg-card, #334155);
  border: 1px solid var(--border-color, #475569);
  border-radius: var(--radius-md, 0.375rem);
  color: var(--text-primary, #f8fafc);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.ci-invite:hover {
  border-color: var(--accent, #6366f1);
  transform: translateY(-1px);
}

/* Status accents on the left edge. */
.ci-invite--accepted {
  border-left: 3px solid var(--success, #22c55e);
}
.ci-invite--declined {
  border-left: 3px solid var(--danger, #ef4444);
  opacity: 0.75;
}
.ci-invite--cancelled {
  border-left: 3px solid var(--text-muted, #9aa7b4);
  opacity: 0.65;
}
.ci-invite--pending {
  border-left: 3px solid var(--accent, #6366f1);
}

.ci-invite-summary {
  font-size: var(--text-md, 1rem);
  font-weight: 600;
  line-height: 1.25;
  word-break: break-word;
}

.ci-invite-when {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-primary, #f8fafc);
}

.ci-invite-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-secondary, #94a3b8);
}

.ci-invite-location::before {
  content: "\1F4CD"; /* round pushpin */
  margin-right: 0.25rem;
}

.ci-invite-organizer::before {
  content: "\2709"; /* envelope */
  margin-right: 0.25rem;
}

/* Status pill (top-right) for non-pending invites. */
.ci-invite-status {
  align-self: flex-start;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ci-invite-status--accepted {
  background: var(--success-bg, rgba(34, 197, 94, 0.12));
  color: var(--success, #22c55e);
  border: 1px solid var(--success-border, rgba(34, 197, 94, 0.4));
}
.ci-invite-status--declined {
  background: var(--danger-bg, rgba(239, 68, 68, 0.12));
  color: var(--danger, #ef4444);
  border: 1px solid var(--danger-border, rgba(239, 68, 68, 0.4));
}
.ci-invite-status--cancelled {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted, #9aa7b4);
  border: 1px solid rgba(148, 163, 184, 0.4);
}

/* CalDAV-pushed indicator (set when accept() reached the user's calendar). */
.ci-invite-pushed {
  font-size: var(--text-xs, 0.75rem);
  color: var(--success, #22c55e);
}
.ci-invite-pushed::before {
  content: "\2713\00A0"; /* check + nbsp */
}

/* Action row. */
.ci-invite-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.ci-accept,
.ci-decline {
  flex: 1 1 auto;
  padding: 0.4rem 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 0.375rem);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.ci-accept {
  background: var(--success, #22c55e);
  color: #06210f;
}
.ci-accept:hover {
  background: #16a34a;
}

.ci-decline {
  background: transparent;
  color: var(--danger, #ef4444);
  border-color: var(--danger-border, rgba(239, 68, 68, 0.4));
}
.ci-decline:hover {
  background: var(--danger-bg, rgba(239, 68, 68, 0.12));
}

.ci-accept:disabled,
.ci-decline:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Inline error (e.g. accept failed) the conductor may render under the actions. */
.ci-invite-error {
  font-size: var(--text-xs, 0.75rem);
  color: var(--danger, #ef4444);
}

/* Narrow screens: cards go full width and stack. */
@media (max-width: 640px) {
  .ci-invite {
    flex: 1 1 100%;
    max-width: none;
  }
}