/* ═══════════════════════════════════════════════════════════════════════════
   Snap Union — Frontend Styles
   Design tokens: navy #0B1D3A, blue #1258C2, gold #E8A838
   WCAG AA: all text meets 4.5:1 contrast; focus rings visible.
   ═══════════════════════════════════════════════════════════════════════════ */

.snapunion-app {
  --su-navy:   #0B1D3A;
  --su-blue:   #1258C2;
  --su-blue-dark: #0E45A0;
  --su-gold:   #E8A838;
  --su-green:  #2ECC71;
  --su-red:    #B00020;
  --su-bg:     #F7F9FC;
  --su-card:   #FFFFFF;
  --su-text:   #1F2937;
  --su-muted:  #4B5563;
  --su-border: #D1D5DB;
  --su-radius: 8px;
  --su-shadow: 0 1px 3px rgba(11,29,58,0.08), 0 1px 2px rgba(11,29,58,0.06);
  --su-shadow-lg: 0 8px 24px rgba(11,29,58,0.12);

  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--su-text) !important;
  background: var(--su-bg);
  padding: 2rem 1rem;
  min-height: 60vh;
  max-width: 1080px;
  margin: 0 auto;
}

/* Force dark text on every text element inside the app — beats aggressive themes */
.snapunion-app,
.snapunion-app p,
.snapunion-app span,
.snapunion-app li,
.snapunion-app dt,
.snapunion-app dd,
.snapunion-app label,
.snapunion-app strong,
.snapunion-app em,
.snapunion-app code,
.snapunion-app div {
  color: var(--su-text) !important;
}

.snapunion-app h1,
.snapunion-app h2,
.snapunion-app h3,
.snapunion-app h4 {
  font-family: 'DM Serif Display', Georgia, serif !important;
  color: var(--su-navy) !important;
  margin: 0 0 0.5em 0;
  line-height: 1.2;
  text-shadow: none !important;
}
.snapunion-app h1 { font-size: 2.25rem !important; }
.snapunion-app h2 { font-size: 1.5rem !important; margin-top: 1.25em; }
.snapunion-app h3 { font-size: 1.15rem !important; }

/* Links inside the app — dark navy by default, blue on hover, dark even after visit */
.snapunion-app a:not(.snapunion-btn):not(.snapunion-card) {
  color: var(--su-blue) !important;
  text-decoration: underline;
}
.snapunion-app a:not(.snapunion-btn):not(.snapunion-card):visited {
  color: var(--su-blue) !important;
}
.snapunion-app a:not(.snapunion-btn):not(.snapunion-card):hover {
  color: var(--su-blue-dark) !important;
}

.snapunion-hero { margin-bottom: 2rem; }
.snapunion-lead { color: var(--su-muted); font-size: 1.125rem; }

/* Grid of cards */
.snapunion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.snapunion-card {
  display: block;
  padding: 1.5rem;
  background: var(--su-card);
  border: 1px solid var(--su-border);
  border-radius: var(--su-radius);
  box-shadow: var(--su-shadow);
  color: var(--su-text) !important;
  text-decoration: none !important;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.snapunion-card:link,
.snapunion-card:visited { color: var(--su-text) !important; }
.snapunion-card:visited:hover,
.snapunion-card:hover {
  color: var(--su-text) !important;
  border-color: var(--su-blue);
  box-shadow: var(--su-shadow-lg);
  transform: translateY(-1px);
}
.snapunion-card:active { transform: translateY(0); }
.snapunion-card:focus-visible {
  outline: 3px solid var(--su-gold);
  outline-offset: 2px;
}
.snapunion-card.is-coming-soon { opacity: .6; pointer-events: none; }
.snapunion-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: var(--su-navy);
  color: var(--su-gold);
  border-radius: var(--su-radius);
  font-size: 1.5rem;
  margin-bottom: .75rem;
}

/* Panels */
.snapunion-panel {
  background: var(--su-card);
  border: 1px solid var(--su-border);
  border-radius: var(--su-radius);
  padding: 1.5rem;
  box-shadow: var(--su-shadow);
  margin-bottom: 1.5rem;
}
.snapunion-panel label {
  display: block;
  font-weight: 600;
  color: var(--su-navy);
  margin-bottom: .25rem;
  margin-top: 1rem;
}
.snapunion-panel label:first-of-type { margin-top: 0; }

/* Form controls — reinforced against theme overrides */
.snapunion-app input[type=text],
.snapunion-app input[type=date],
.snapunion-app input[type=number],
.snapunion-app input[type=password],
.snapunion-app input[type=email],
.snapunion-app select,
.snapunion-app textarea {
  width: 100% !important;
  padding: .6rem .75rem !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  color: var(--su-text) !important;
  background: #fff !important;
  border: 1px solid var(--su-border) !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.snapunion-app select {
  /* Restore the dropdown arrow that appearance:none stripped */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%230B1D3A' d='M6 8L0 0h12z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  padding-right: 2rem !important;
}
.snapunion-app input:focus,
.snapunion-app select:focus,
.snapunion-app textarea:focus {
  outline: none !important;
  border-color: var(--su-blue) !important;
  box-shadow: 0 0 0 3px rgba(18,88,194,.18) !important;
}
.snapunion-app textarea { resize: vertical !important; min-height: 80px !important; }

.snapunion-field-group { margin-bottom: .25rem; }
.snapunion-field-hint { font-size: .875rem; color: var(--su-muted); margin-top: .25rem; }
.snapunion-required { color: var(--su-red); margin-left: .25rem; }

.snapunion-checkgroup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .5rem;
  margin-top: .25rem;
}
.snapunion-checkgroup label {
  display: flex !important;
  align-items: flex-start;
  gap: .5rem;
  margin: 0 !important;
  padding: .5rem .75rem;
  background: #F3F4F6;
  border-radius: 6px;
  font-weight: 400;
  color: var(--su-text);
  cursor: pointer;
}
.snapunion-checkgroup input[type=checkbox] { margin-top: .25rem; }

/* Buttons */
.snapunion-app .snapunion-btn,
.snapunion-app button.snapunion-btn,
.snapunion-app a.snapunion-btn {
  display: inline-block !important;
  padding: .625rem 1.25rem !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--su-navy) !important;
  background: #fff !important;
  border: 1px solid var(--su-border) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
.snapunion-app .snapunion-btn:link,
.snapunion-app .snapunion-btn:visited { color: var(--su-navy) !important; }
.snapunion-app .snapunion-btn:visited:hover,
.snapunion-app .snapunion-btn:hover {
  background: var(--su-blue) !important;
  color: #fff !important;
  border-color: var(--su-blue) !important;
}
.snapunion-app .snapunion-btn:focus-visible {
  outline: 3px solid var(--su-gold) !important;
  outline-offset: 2px !important;
}
.snapunion-app .snapunion-btn:disabled { opacity: .5 !important; cursor: not-allowed !important; }

.snapunion-app .snapunion-btn-primary,
.snapunion-app button.snapunion-btn-primary {
  color: #fff !important;
  background: var(--su-blue) !important;
  border-color: var(--su-blue) !important;
}
.snapunion-app .snapunion-btn-primary:link,
.snapunion-app .snapunion-btn-primary:visited { color: #fff !important; }
.snapunion-app .snapunion-btn-primary:visited:hover,
.snapunion-app .snapunion-btn-primary:hover {
  background: var(--su-blue-dark) !important;
  color: #fff !important;
  border-color: var(--su-blue-dark) !important;
}

.snapunion-app a.snapunion-btn-save,
.snapunion-app button.snapunion-btn-save,
.snapunion-app .snapunion-btn-save {
  /* Make the save button unmistakably visible even when themes redefine a/button */
  display: inline-block !important;
  font-size: 1.05rem !important;
  padding: .75rem 1.75rem !important;
  background: var(--su-blue) !important;
  background-color: var(--su-blue) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 2px solid var(--su-blue) !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
}
.snapunion-app a.snapunion-btn-save:link,
.snapunion-app a.snapunion-btn-save:visited,
.snapunion-app a.snapunion-btn-save:hover,
.snapunion-app a.snapunion-btn-save:active,
.snapunion-app .snapunion-btn-save:hover,
.snapunion-app .snapunion-btn-save:focus {
  color: #ffffff !important;
  background-color: var(--su-navy) !important;
  background-image: none !important;
  border-color: var(--su-navy) !important;
  text-decoration: none !important;
}

.snapunion-app .snapunion-btn-ghost { background: transparent !important; border-color: transparent !important; color: var(--su-muted) !important; }
.snapunion-app .snapunion-btn-ghost:link,
.snapunion-app .snapunion-btn-ghost:visited { color: var(--su-muted) !important; }
.snapunion-app .snapunion-btn-ghost:visited:hover,
.snapunion-app .snapunion-btn-ghost:hover { background: #F3F4F6 !important; color: var(--su-navy) !important; border-color: transparent !important; }

.snapunion-app .snapunion-btn-danger {
  color: #fff !important;
  background: var(--su-red) !important;
  border-color: var(--su-red) !important;
}
.snapunion-app .snapunion-btn-danger:visited:hover,
.snapunion-app .snapunion-btn-danger:hover { background: #900019 !important; color: #fff !important; border-color: #900019 !important; }

.snapunion-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* Document preview */
.snapunion-preview {
  background: #fff;
  border: 1px solid var(--su-border);
  border-radius: var(--su-radius);
  padding: 2rem;
  font-family: 'Times New Roman', Georgia, serif;
  line-height: 1.6;
  max-height: 600px;
  overflow-y: auto;
}
.snapunion-preview h1,
.snapunion-preview h2,
.snapunion-preview h3 {
  font-family: 'Times New Roman', Georgia, serif;
  color: var(--su-text);
}
.snapunion-preview table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.snapunion-preview table td { border: 1px solid #000; padding: .5rem; vertical-align: top; }

/* Doc list */
.snapunion-doc-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--su-border);
}
.snapunion-doc-row:last-child { border-bottom: none; }
.snapunion-doc-title { font-weight: 600; color: var(--su-navy); }
.snapunion-doc-meta  { font-size: .875rem; color: var(--su-muted); }
.snapunion-doc-actions { display: flex; gap: .5rem; }

/* Notices */
.snapunion-notice {
  padding: .75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-weight: 500;
  border-left: 4px solid;
}
.snapunion-notice-success { background: #ECFDF5; color: #065F46; border-color: var(--su-green); }
.snapunion-notice-error   { background: #FEF2F2; color: #7F1D1D; border-color: var(--su-red); }
.snapunion-notice-info    { background: #EFF6FF; color: #1E40AF; border-color: var(--su-blue); }

.snapunion-disclaimer {
  margin-top: 2rem;
  padding: .75rem 1rem;
  background: #FFF8E1;
  border-left: 4px solid var(--su-gold);
  font-size: .9rem;
  color: var(--su-muted);
  border-radius: 4px;
}

/* Loading */
.snapunion-loading {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--su-muted);
  font-style: italic;
}
.snapunion-spinner {
  width: 18px; height: 18px;
  border: 2px solid #D1D5DB;
  border-top-color: var(--su-blue);
  border-radius: 50%;
  animation: snapunion-spin .7s linear infinite;
}
@keyframes snapunion-spin { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 640px) {
  .snapunion-app { padding: 1rem .5rem; }
  .snapunion-app h1 { font-size: 1.75rem; }
  .snapunion-doc-row { grid-template-columns: 1fr; }
}

/* Print / document output */
@media print {
  .snapunion-app { background: #fff; padding: 0; }
  .snapunion-actions, .snapunion-btn { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Auth (login / register / profile) — added in v1.2.0
   ═══════════════════════════════════════════════════════════════════════════ */
.snapunion-auth {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem 1rem;
}
.snapunion-auth-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 12px;
  padding: 2rem 2rem 1.5rem;
  box-shadow: 0 10px 40px rgba(11,29,58,.12);
  border: 1px solid var(--su-border);
}
.snapunion-auth-card-wide { max-width: 560px; }

.snapunion-auth-brand {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--su-border);
}
.snapunion-auth-seal {
  width: 64px; height: 64px;
  margin: 0 auto 1rem;
  background: linear-gradient(135deg, var(--su-navy), var(--su-blue));
  border: 3px solid var(--su-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Serif Display', Georgia, serif;
  color: var(--su-gold);
  font-size: 1.75rem;
  font-weight: 700;
}
.snapunion-auth-brand h1 {
  margin: 0 0 .25rem !important;
  font-size: 1.75rem !important;
}
.snapunion-auth-brand p {
  margin: 0;
  color: var(--su-muted);
  font-size: .95rem;
}

.snapunion-auth-form label {
  display: block;
  font-weight: 600;
  color: var(--su-navy);
  margin: 1rem 0 .25rem;
  font-size: .92rem;
}
.snapunion-auth-form label.snapunion-checkbox {
  display: flex !important;
  align-items: center;
  gap: .5rem;
  font-weight: 400;
  margin-top: 1rem;
  cursor: pointer;
}
.snapunion-app .snapunion-checkbox input[type="checkbox"] {
  width: auto !important;
  margin: 0 !important;
}

.snapunion-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.snapunion-form-grid > div { display: flex; flex-direction: column; }

.snapunion-hint {
  font-size: .8rem;
  color: var(--su-muted);
  margin: .25rem 0 0;
}

.snapunion-btn-block,
.snapunion-app .snapunion-btn-block {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 1.25rem !important;
}

.snapunion-auth-footer {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--su-border);
  font-size: .92rem;
  color: var(--su-muted);
}
.snapunion-auth-footer a {
  color: var(--su-blue);
  text-decoration: none;
}
.snapunion-auth-footer a:hover { text-decoration: underline; }
.snapunion-auth-sep { margin: 0 .5rem; color: var(--su-border); }

/* Profile page */
.snapunion-dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: .75rem 1rem;
  margin: 0;
}
.snapunion-dl dt {
  color: var(--su-muted);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.snapunion-dl dd {
  margin: 0;
  color: var(--su-text);
  font-weight: 500;
}

/* Hero with logout actions */
.snapunion-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.snapunion-hero-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}