/* Official SDA typeface (Noto Sans) — must precede all other rules */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Design tokens — SDA brand palette
   Primary green reflects the Church symbol as commonly rendered on local
   church signage worldwide; Flush Orange is a documented NAD accent color.
   ========================================================================== */
:root {
  --brand-primary: #0F7A3D;
  --brand-secondary: #08421F;
  --brand-accent: #ff8200;
  --brand-gradient: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  --ink: #1f2333;
  --ink-muted: #6b7280;
  --surface: #ffffff;
  --surface-alt: #f8f9fc;
  --border: #e5e7ef;
  --success: #22a06b;
  --danger: #e5484d;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 8px rgba(31, 35, 51, 0.06);
  --shadow-md: 0 8px 24px rgba(31, 35, 51, 0.10);
  --shadow-lg: 0 16px 40px rgba(31, 35, 51, 0.16);
}

body {
  background-color: var(--surface-alt);
  color: var(--ink);
  padding-top: 64px;
  padding-bottom: 76px;
  font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.bg-brand { background: var(--brand-gradient) !important; }
.text-brand { color: var(--brand-primary) !important; }

/* Subtle silhouette watermark on auth card headers */
.auth-header-watermark {
  position: absolute;
  right: -10px;
  bottom: -20px;
  width: 110px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.14;
  pointer-events: none;
}

/* ==========================================================================
   App shell — sticky top bar
   ========================================================================== */
#appTopBar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: none;
}
#appTopBar.is-active { display: block; }

.app-topbar-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.app-brand {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  font-size: 15px;
}

.app-progress-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.app-progress-label {
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.app-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.app-progress-fill {
  height: 100%;
  background: var(--brand-gradient);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.app-save-status {
  font-size: 12px;
  color: var(--ink-muted);
  white-space: nowrap;
  min-width: 76px;
  text-align: right;
  transition: opacity 0.2s ease;
}
.app-save-status.is-saving { color: var(--brand-primary); }
.app-save-status.is-saved { color: var(--success); }
.app-save-status.is-error { color: var(--danger); }

.app-user-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.app-user-menu .app-user-name {
  font-size: 13px;
  color: var(--ink-muted);
}

/* ==========================================================================
   App shell — sticky bottom nav
   ========================================================================== */
#appBottomBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(31, 35, 51, 0.06);
  display: none;
}
#appBottomBar.is-active { display: block; }

.app-bottombar-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-brand {
  background: var(--brand-gradient);
  border: none;
  color: #fff;
  font-weight: 600;
}
.btn-brand:hover,
.btn-brand:focus {
  color: #fff;
  filter: brightness(1.05);
}

.btn {
  border-radius: var(--radius-sm);
}

/* True/False style toggle buttons */
.tf-btn {
  min-width: 96px;
  min-height: 44px;
  font-weight: 600;
  border-width: 2px;
  border-radius: 999px;
  transition: all 0.15s ease;
}
.tf-btn.tf-true { color: var(--success); border-color: var(--success); }
.tf-btn.tf-true.active,
.tf-btn.tf-true.is-selected {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.tf-btn.tf-false { color: var(--danger); border-color: var(--danger); }
.tf-btn.tf-false.active,
.tf-btn.tf-false.is-selected {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

/* 1-5 Likert scale buttons */
.scale-btn-group {
  display: inline-flex;
  gap: 6px;
}
.scale-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--ink-muted);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s ease;
}
.scale-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.scale-btn.active,
.scale-btn.is-selected,
.btn-check:checked + .scale-btn {
  background: var(--brand-gradient);
  border-color: transparent;
  color: #fff;
  transform: scale(1.08);
}

.question-item {
  border-radius: var(--radius-sm) !important;
}

/* ==========================================================================
   Cards & accordion
   ========================================================================== */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.card-header {
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

.accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md) !important;
  margin-bottom: 10px;
}
/* Clip only the header's own corners (not overflow:hidden on the whole item —
   that would break position:sticky for any descendant, e.g. .sticky-legend) */
.accordion-item .accordion-header,
.accordion-item .accordion-button {
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}
.accordion-item .accordion-button.collapsed {
  border-radius: var(--radius-md) !important;
}
.accordion-button {
  cursor: pointer;
  font-weight: 600;
}
.accordion-button:not(.collapsed) {
  color: var(--brand-primary);
  background: #e9f5ee;
}
.accordion-collapse, .collapse { display: none; }
.accordion-collapse.show,
.collapse.show,
.accordion-collapse.is-open { display: block; }

.list-group-item {
  border-color: var(--border);
}

/* ==========================================================================
   Sticky inline legend (inventory)
   ========================================================================== */
.sticky-legend {
  position: sticky;
  top: 60px;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

.progress-counter {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-primary);
}

/* ==========================================================================
   Toast
   ========================================================================== */
#appToastContainer {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.app-toast {
  pointer-events: auto;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.app-toast.is-visible { opacity: 1; transform: translateY(0); }
.app-toast.toast-success { background: var(--success); }
.app-toast.toast-danger { background: var(--danger); }

/* ==========================================================================
   Confirm modal
   ========================================================================== */
#appModalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 34, 0.5);
  z-index: 1090;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#appModalOverlay.is-active { display: flex; }

.app-modal-box {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-width: 400px;
  width: 100%;
  padding: 24px;
}
.app-modal-message {
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 20px;
}
.app-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ==========================================================================
   Save button (legacy inline)
   ========================================================================== */
.save-btn {
  float: right;
}

/* ==========================================================================
   Read-only "from account" fields
   ========================================================================== */
.field-from-account {
  background: var(--surface-alt) !important;
}
.field-from-account-hint {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 576px) {
  .app-brand { display: none; }
  .app-user-menu .app-user-name { display: none; }
}