/* Team login + ministry workspace (loaded after style.css). */

/* ------------------------------ auth cards ----------------------------- */

.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.auth-card {
  width: 100%;
  max-width: 24rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  overflow: hidden;
}
.auth-body { padding: 1.5rem; }
.auth-head { text-align: center; margin-bottom: 1.5rem; }
.auth-head .wordmark-badge { width: 3.5rem; height: 3.5rem; margin: 0.5rem auto 1rem; border-radius: 0.875rem; font-size: 1.375rem; }
.auth-head .lock-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border-radius: 999px;
  background: var(--muted);
  color: var(--muted-foreground);
}
.auth-head h1 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.auth-head p { margin-top: 0.375rem; color: var(--muted-foreground); font-size: 0.875rem; }
.auth-actions { margin-top: 1.25rem; display: grid; gap: 0.5rem; }
.auth-foot {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  text-align: center;
}
.auth-foot a:hover { color: var(--primary); text-decoration: underline; }
.form-error { color: var(--destructive); font-size: 0.875rem; }
.center-spinner { display: flex; justify-content: center; padding: 2rem; color: var(--muted-foreground); }
.loading-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); }

/* ------------------------------ workspace ------------------------------ */

.ws-header {
  border-bottom: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  background: color-mix(in oklab, var(--card) 80%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ws-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4rem; }
.ws-brand { display: flex; align-items: center; gap: 0.75rem; }
.ws-brand .wordmark-badge { background: var(--ink); }
.ws-brand p:first-child { font-size: 13px; font-weight: 600; letter-spacing: 0.025em; }
.ws-brand p:last-child { color: var(--muted-foreground); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }
.ws-actions { display: flex; align-items: center; gap: 0.75rem; }
.ws-actions .view-site { display: none; color: var(--muted-foreground); font-size: 0.875rem; font-weight: 500; }
.ws-actions .view-site:hover { color: var(--foreground); }
@media (min-width: 640px) { .ws-actions .view-site { display: block; } }
.ws-main { padding-block: 2rem; }
.ws-main h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; }
.ws-main .ws-sub { margin-top: 0.25rem; color: var(--muted-foreground); font-size: 0.875rem; }
.badge-cap { text-transform: capitalize; }

.tabs {
  margin-top: 2rem;
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.1875rem;
  border-radius: var(--radius);
  background: var(--muted);
}
.tab {
  height: 1.875rem;
  padding: 0 0.75rem;
  border-radius: calc(var(--radius) - 2px);
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 500;
}
.tab[aria-selected="true"] { background: var(--card); color: var(--foreground); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08); }
.tab-panel { margin-top: 1.5rem; }

.ws-card {
  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  border-radius: 1rem;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.ws-card + .ws-card { margin-top: 2rem; }
.ws-card-pad { padding: 1.25rem; }
@media (min-width: 640px) { .ws-card-pad { padding: 1.5rem; } }
.ws-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
}
@media (min-width: 640px) { .ws-card-head { padding-inline: 1.5rem; } }
.ws-card-head h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; }
.ws-card-head h2 .count { color: var(--muted-foreground); font-weight: 400; }
.ws-card-head h2 .icon { color: var(--primary); }

.ws-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem 1.5rem;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  text-align: center;
}
.ws-empty p { max-width: 24rem; }

.ws-list > li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
}
.ws-list > li + li { border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
@media (min-width: 640px) {
  .ws-list > li { flex-direction: row; align-items: center; padding-inline: 1.5rem; }
  .ws-list.align-start > li { align-items: flex-start; }
}
.ws-item-main { flex: 1; min-width: 0; }
.ws-item-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ws-item-title .name { font-weight: 500; }
.ws-item-meta { margin-top: 0.125rem; color: var(--muted-foreground); font-size: 0.75rem; }
.ws-item-text { margin-top: 0.25rem; color: var(--muted-foreground); font-size: 0.875rem; }
.ws-item-date { margin-top: 0.25rem; color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); font-size: 0.75rem; }
.ws-item-actions { display: flex; align-items: center; gap: 0.25rem; align-self: flex-end; }
@media (min-width: 640px) { .ws-item-actions { align-self: auto; } }
.btn-text { font-size: 0.75rem; }
.btn-danger:hover { color: var(--destructive); }

/* ------------------------------ calendar ------------------------------- */

.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.cal-nav { display: flex; align-items: center; gap: 0.25rem; }
.cal-nav h2 { min-width: 10rem; text-align: center; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.cal-tools { display: flex; align-items: center; gap: 0.5rem; }
.cal-scroll { margin-top: 1.25rem; overflow-x: auto; }
.cal-inner { min-width: 640px; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.cal-weekdays div { padding-bottom: 0.5rem; color: var(--muted-foreground); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--border) 60%, transparent);
}
.cal-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 6rem;
  padding: 0.375rem;
  background: var(--card);
  cursor: pointer;
  transition: background-color 0.15s;
}
.cal-cell:hover { background: color-mix(in oklab, var(--pine-tint) 60%, var(--card)); }
.cal-cell.is-outside { opacity: 0.4; }
.cal-day { align-self: flex-end; padding: 0 0.25rem; font-size: 0.75rem; font-weight: 500; line-height: 1; }
.cal-cell.is-today .cal-day {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
}
.cal-chip {
  overflow: hidden;
  padding: 0.125rem 0.375rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-chip:hover { background: color-mix(in oklab, var(--primary) 20%, transparent); }
.cal-chip.is-draft { border: 1px dashed color-mix(in oklab, var(--primary) 40%, transparent); background: transparent; color: var(--muted-foreground); }
.cal-more { padding: 0 0.375rem; color: var(--muted-foreground); font-size: 10px; }
.cal-hint { margin-top: 0.75rem; color: var(--muted-foreground); font-size: 0.75rem; }

/* ------------------------------- dialogs ------------------------------- */

dialog.modal {
  width: calc(100% - 2rem);
  max-width: 32rem;
  max-height: calc(100vh - 2rem);
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 20px 40px -12px rgb(16 24 40 / 0.3);
}
dialog.modal-sm { max-width: 28rem; }
dialog.modal::backdrop { background: rgb(0 0 0 / 0.5); }
dialog.modal[open] { animation: fade-up 0.2s ease both; }
.modal-head h2 { font-size: 1.125rem; font-weight: 600; line-height: 1; }
.modal-head p { margin-top: 0.5rem; color: var(--muted-foreground); font-size: 0.875rem; }
.modal-body { margin-top: 1rem; display: grid; gap: 1rem; }
.modal-foot { margin-top: 1.5rem; display: flex; flex-direction: column-reverse; gap: 0.5rem; }
@media (min-width: 640px) { .modal-foot { flex-direction: row; justify-content: flex-end; } }

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--background);
}
.switch-row p { margin-top: 0.25rem; color: var(--muted-foreground); font-size: 0.75rem; }
.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 2rem;
  height: 1.15rem;
  margin: 0;
  border-radius: 999px;
  background: var(--input);
  cursor: pointer;
  transition: background-color 0.15s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 0.075rem;
  left: 0.075rem;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
  transition: transform 0.15s;
}
.switch:checked { background: var(--primary); }
.switch:checked::after { transform: translateX(0.85rem); }

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 1rem;
}

.inbox-item { flex: 1; min-width: 0; text-align: left; cursor: pointer; }
.inbox-item .icon { color: var(--muted-foreground); }
.inbox-item.is-unread .icon { color: var(--primary); }
.inbox-item a { color: var(--primary); font-size: 0.75rem; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--primary) 30%, transparent); text-underline-offset: 2px; }
.inbox-text { margin-top: 0.375rem; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.5rem; white-space: pre-line; overflow-wrap: anywhere; }
.reply-link { padding: 0.25rem 0.5rem; border-radius: 0.375rem; color: var(--primary); font-size: 0.75rem; font-weight: 500; }
.reply-link:hover { background: var(--pine-tint); }

/* ------------------------------- photos -------------------------------- */

.photo-slots { margin-top: 1.25rem; display: grid; gap: 1rem; }
.photo-slot {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.25rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--background);
}
@media (max-width: 480px) { .photo-slot { grid-template-columns: 1fr; } }
.photo-slot-preview { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0.5rem; background: #1a1a1a; }
.photo-slot .name { font-weight: 600; }
.photo-slot-actions { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.photo-slot-actions label.btn { cursor: pointer; }