/* ============================================================================
   AQUA HOMESPACE - GLOBAL STYLES
   ============================================================================ */

/* CSS VARIABLES - Color, Spacing, Typography */
:root {
  /* Brand Colors */
  --main: #00b5ef;
  --main-light: #33c5f4;
  --main-dark: #0070b8;
  --main-gradient: linear-gradient(135deg, var(--main) 0%, var(--main-dark) 100%);
  --accent: #b8f879;
  --accent-dark: #00ef6f;

  /* Neutral System */
  --text-main: #5d585a;
  --text-muted: #7c7779;
  --text-on-main: #ffffff;
  --text-on-accent: var(--text-main);
  --light-mode-bg: #f4f4f4;
  --surface: #ffffff;
  --footer: #56535a;
  --white: #ffffff;
  --line-main: #00b5ef;
  --line-strong: #d5d5d7;
  --line-soft: #e7e7ea;
  --line-faint: #fbfbfb;
  --app-bg: #ffffff;
  --silverish-gradient: var(--app-bg);

  /* Shared Effects */
  --drop-shadow: 0 5px 12px rgba(0, 0, 0, 0.06);
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* Typography */
  --font-family-headlines: 'Lato', sans-serif;
  --font-family-body: 'Plus Jakarta Sans', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Motion */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
}

/* ============================================================================
   BASE ELEMENT STYLES
   ============================================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-main);
  background-color: var(--light-mode-bg);
}

body.internal-page {
  background: var(--app-bg);
  background-attachment: fixed;
}

body.internal-page #authShell {
  background: transparent;
  background-image: none;
}

html,
body {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-headlines);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-md);
  color: var(--text-main);
}

h1 {
  font-size: var(--font-size-4xl);
}

h2 {
  font-size: var(--font-size-3xl);
}

h3 {
  font-size: var(--font-size-2xl);
}

h4 {
  font-size: var(--font-size-xl);
}

h5 {
  font-size: var(--font-size-lg);
}

h6 {
  font-size: var(--font-size-base);
}

p {
  margin-bottom: var(--spacing-md);
  color: var(--text-main);
}

small,
cite {
  font-family: var(--font-family-body);
  color: var(--text-muted);
}

a {
  color: var(--main);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-dark);
}

button,
.btn {
  font-family: var(--font-family-headlines);
}

/* Button Color Rules */
.btn-main,
[data-btn-theme="main"] {
  background-color: var(--main);
  color: var(--text-on-main);
}

.btn-accent,
[data-btn-theme="accent"] {
  background-color: var(--accent);
  color: var(--text-on-accent);
  border: 1px solid #84be4b;
}

.btn-main-light,
[data-btn-theme="main-light"] {
  background-color: var(--line-faint);
  color: var(--main);
  border: 1px solid var(--line-soft);
}

.btn-main-light:hover,
[data-btn-theme="main-light"]:hover {
  border-color: var(--main);
}

/* ============================================================================
   AUTOCOMPLETE / MEMBER SEARCH DROPDOWN — global pattern
   Use .search-results as the container, .search-result-item for each row,
   .member-name (left) and .member-role (right) for the two text columns.
   See structure-conventions.md for usage guidance.
   ============================================================================ */

.search-results {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 4px;
  border: 1px solid var(--line-strong, #d5d5d7);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface, #ffffff);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
}

.search-results:empty {
  display: none;
}

.search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-faint, #f0f0f2);
  cursor: pointer;
  transition: background 0.12s ease;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: #f4f8fc;
}

.member-name {
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-main, #5d585a);
  font-size: var(--font-size-sm, 0.875rem);
}

.member-role {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--text-muted, #7c7779);
  white-space: nowrap;
}

/* Location / city–zip autocomplete reuses the search-results pattern above.
   No additional CSS needed — .member-name = city+state, .member-role = zip.
   See structure-conventions.md § "Location / City–Zip Autocomplete". */

/* ============================================================================
   HIDDEN ATTRIBUTE — CSS display rules must never override [hidden]
   ============================================================================ */
[hidden] { display: none !important; }

/* ============================================================================
   PAGE.PHP — Generic View All layout
   ============================================================================ */
.page-container {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-lg);
}

.page-header {
  margin-bottom: var(--spacing-xl);
}

.page-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--spacing-md);
}

.page-back-link:hover {
  color: var(--main);
}

.page-title {
  font-size: var(--font-size-2xl);
  margin-bottom: 4px;
}

.page-count {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin: 0;
}

.page-empty-state {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-lg);
  color: var(--text-muted);
}

.page-documents-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-resources-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--spacing-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-journey-category {
  margin-bottom: var(--spacing-lg);
}

.page-journey-category-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--spacing-sm);
}

.page-journey-category-name {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
  flex: 1;
}

.page-journey-category-due {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.journey-status.completed-status {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #157154;
}

.journey-status.in-progress-status {
  background: rgba(0, 181, 239, 0.08);
  border-color: rgba(0, 181, 239, 0.26);
  color: #165f87;
}

.journey-status.upcoming-status {
  background: #f3f6f9;
  border-color: #d6dee8;
  color: #617287;
}

.journey-status.needs-attention-status {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.journey-status.pending-review-status {
  background: rgba(235, 170, 39, 0.14);
  border-color: rgba(235, 170, 39, 0.34);
  color: #7d5300;
}

/* ============================================================================
   DOCUMENT INTAKE FORM (Digital Documents feature)
   ============================================================================ */

/* Wider than the shared .page-container — this form fills out real,
   multi-column source documents (W-4, employment applications, etc.) and
   needs more room per field than a plain "View All" list page. */
.document-intake-page {
  max-width: 1280px;
}

.document-intake-form .app-modal-edit-grid {
  gap: var(--spacing-md) var(--spacing-xl);
}

/* Underlined blank-line inputs instead of boxed fields — matches how the
   source PDF itself presents a fillable field ("Full Name: ________"),
   rather than looking like a generic web form. */
.document-intake-form .app-modal-edit-label input,
.document-intake-form .app-modal-edit-label select {
  height: auto;
  flex: 1;
  min-width: 0;
  margin-top: 0;
  border: none;
  border-bottom: 1.5px solid #7c8798;
  border-radius: 0;
  background: transparent;
  padding: 0 2px 5px;
  color: #1c2430;
}

.document-intake-form .app-modal-edit-label input:focus,
.document-intake-form .app-modal-edit-label select:focus {
  outline: none;
  border-bottom-color: var(--main);
  border-bottom-width: 2px;
}

.document-intake-form .app-modal-edit-label textarea {
  margin-top: 6px;
  border: none;
  border-bottom: 1.5px solid #7c8798;
  border-radius: 0;
  background: transparent;
  padding: 0 2px 5px;
}

.document-intake-form .app-modal-edit-label textarea:focus {
  outline: none;
  border-bottom-color: var(--main);
  border-bottom-width: 2px;
}

.document-intake-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid rgba(235, 170, 39, 0.34);
  border-radius: var(--radius-md);
  background: rgba(235, 170, 39, 0.1);
  color: #7d5300;
  font-size: var(--font-size-sm);
}

.document-intake-banner p {
  margin: 0;
}

.document-intake-download-link {
  font-weight: var(--font-weight-semibold);
  color: var(--main);
  white-space: nowrap;
}

.document-intake-view-row {
  margin-bottom: var(--spacing-lg);
}

.document-intake-view-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  min-height: 36px;
  border: 1px solid var(--main);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-decoration: none;
  color: var(--main);
  background: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.document-intake-view-link:hover {
  background: var(--main);
  color: var(--text-on-accent);
}

.document-intake-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.document-intake-section h2 {
  font-size: var(--font-size-base);
  margin: 0 0 var(--spacing-sm);
}

/* Section title bar — mirrors the solid color banner headers on the source
   PDF (e.g. "GENERAL INFORMATION") so the digital form reads as the same
   structured sections instead of one flat list of fields. */
.document-intake-section h2.document-intake-section-header {
  background: var(--main);
  color: var(--text-on-accent, #ffffff);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 10px var(--spacing-md);
  margin: 0 0 var(--spacing-md);
  border-radius: var(--radius-md);
}

/* Label sits inline before the blank, like "Full Name: ______" on the
   source document, instead of stacked above a boxed input. Textarea fields
   are the one exception — a multi-line answer still reads better with its
   label on its own line above. Scoped to this form so it doesn't touch the
   shared .app-modal-edit-label used by admin edit modals elsewhere. */
.document-intake-form .app-modal-edit-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: var(--font-weight-semibold);
  color: var(--text-heading, #3f4a5c);
  letter-spacing: 0.01em;
}

.document-intake-form .app-modal-edit-label:has(textarea) {
  display: block;
}

.document-intake-field-label {
  flex-shrink: 0;
  white-space: nowrap;
}

.document-intake-field-label::after {
  content: ":";
}

.document-intake-form .app-modal-edit-label:has(textarea) .document-intake-field-label {
  display: block;
  margin-bottom: 6px;
}

/* Compact checkbox + label, not a bordered card — reads closer to the small
   "☐ Yes" boxes on the source document, and lets two related checkboxes
   (e.g. a Yes/No pair placed side by side in the grid) sit naturally next
   to each other instead of looking like two separate buttons. */
.document-intake-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  width: fit-content;
  font-size: 0.92rem;
  font-weight: var(--font-weight-normal);
  color: #222c3a;
  cursor: pointer;
}

/* Custom-drawn box (rather than accent-color alone) so the checked/unchecked
   state reads unambiguously against the source document being filled out,
   consistent across browsers instead of depending on native OS styling. */
.document-intake-checkbox-label input[type="checkbox"],
.document-intake-checkbox-label input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin: 0;
  flex-shrink: 0;
  border: 2px solid #b7c0cd;
  border-radius: 4px;
  background: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.document-intake-checkbox-label input[type="checkbox"]:hover,
.document-intake-checkbox-label input[type="radio"]:hover {
  border-color: var(--main);
}

.document-intake-checkbox-label input[type="checkbox"]:checked,
.document-intake-checkbox-label input[type="radio"]:checked {
  border-color: var(--main);
  background: var(--main);
}

.document-intake-checkbox-label input[type="checkbox"]:checked::after,
.document-intake-checkbox-label input[type="radio"]:checked::after {
  content: "";
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.document-intake-checkbox-label input[type="checkbox"]:focus-visible,
.document-intake-checkbox-label input[type="radio"]:focus-visible {
  outline: 2px solid var(--main);
  outline-offset: 2px;
}

.document-intake-checkbox-label span {
  line-height: 1.3;
}

/* Yes/No question pair — a single field rendered as two mutually-exclusive
   radio inputs (visually squared off to match the checkbox styling above),
   replicating the "Question? [ ] Yes [ ] No" layout used throughout the
   source document instead of one generic boolean checkbox. */
.document-intake-form .document-intake-yesno-field {
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
}

.document-intake-question-label {
  flex: 1 1 auto;
  min-width: 120px;
}

.document-intake-yesno-options {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 0;
}

/* Lets a Yes/No field hug its own content instead of stretching to fill the
   whole grid column it's allotted (CSS Grid stretches items by default) —
   two such fields placed in the same section (and therefore the same
   2-column grid row) then read as sitting close together on that row rather
   than each one spanning its full half of the form. */
.document-intake-form .document-intake-yesno-field {
  width: fit-content;
}

/* Signature fields get their own full row (not packed two-per-row like a
   regular field) and extra breathing room above, separating them from the
   rest of the form — but only when there IS a "rest of the form": a
   documentIntake.php-side check skips this class entirely for a document
   that's nothing but a signature. The 20px gap applies only when coming
   from a non-signature field; consecutive signature fields (e.g. the
   signature itself + its date) sit close together with no double gap. */
.document-intake-signature-field {
  grid-column: 1 / -1;
  margin-top: 20px;
}

.document-intake-signature-field + .document-intake-signature-field {
  margin-top: 0;
}

.document-intake-actions {
  margin-top: 0;
}

.document-intake-status-banner.journey-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}

.document-intake-status-banner p {
  margin: 0;
}

.document-intake-review-section {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-color, #e2e8f0);
}

.document-intake-review-section h2 {
  font-size: var(--font-size-base);
  margin: 0 0 var(--spacing-sm);
}

.document-intake-preview-frame {
  display: block;
  width: 100%;
  height: 60vh;
  margin: var(--spacing-sm) 0 var(--spacing-md);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md);
  background: #fff;
}

.document-upload-status {
  display: block;
  margin-top: 4px;
  font-size: var(--font-size-sm);
  min-height: 1.2em;
}

.document-upload-status--uploading {
  color: var(--text-muted, #64748b);
}

.document-upload-status--error {
  color: var(--color-danger, #dc2626);
}