/* Custom styles beyond Tailwind defaults */
[x-cloak] { display: none !important; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator { display: inline; }

/* Kanban board */
.kanban-col { min-height: 200px; }

/* Status badges */
.badge { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium; }

/* ── Public inquiry form (/inquire/) — brand palette treatment ──
   Colors are the approved values from the brand book (primary palette p17,
   expanded palette p18): sage card, cream inputs, Peacock Teal borders,
   Forest Green text, deep red for errors.

   Scoped to .inquiry-form on purpose. templates/components/form_field.html
   hardcodes border-gray-300 on white and is used by ~100 internal forms, so
   restyling the component would restyle the whole CRM. Scoping here keeps that
   component untouched everywhere else.

   No !important needed: `.inquiry-form input` has specificity 0,1,1 and beats a
   Tailwind utility's 0,1,0 regardless of stylesheet order — which matters
   because the Tailwind CDN injects its <style> at runtime, after this file. */
/* Fields sit one shade lighter than the sage card, as in the reference design.
   #BDD2C3 is a tint of Sage (70% Sage / 30% Cream) — the brand book has no
   green lighter than Sage. Field-to-card contrast is deliberately low at
   1.2:1, so the Peacock Teal border is what makes the click target findable. */
.inquiry-form input:not([type="hidden"]),
.inquiry-form select,
.inquiry-form textarea {
  background-color: #BDD2C3;
  border-color: #48897D;
}

.inquiry-form label,
.inquiry-form [data-date-range-calendar] > p {
  color: #1D342C;
  font-weight: 600;
}

/* Help text and hints. Targeted as p.<class> rather than a blanket class
   override so the calendar's day cells — which use text-gray-400 to mark
   outside-the-month days — keep that distinction. */
.inquiry-form p.text-gray-400,
.inquiry-form p.text-gray-500,
.inquiry-form p.text-gray-600 { color: #1D342C; }

/* Field errors and the required-field asterisk. Brick Ember (#BE1E2D) only
   reaches 3.2:1 on the sage card and fails WCAG AA; this deep red is 5.7:1. */
.inquiry-form p.text-red-600,
.inquiry-form span.text-red-500,
.inquiry-form [data-live-error] { color: #790F1C; }

.inquiry-form ::placeholder { color: #4b5563; opacity: 1; }

/* Inline calendar chrome. The panel is an off-white with a whisper of Sage in
   it (10% Sage / 90% white) rather than pure white — still clearly the
   lightest surface on the page, but softened so it doesn't glare against the
   card. It stays light so the component's own brand-600 selection and dark day
   text keep working without restyling every day-cell state. */
.inquiry-form [data-dr-calendar] > .rounded-xl {
  background-color: #F6F9F8;
  border-color: #48897D;
}
.inquiry-form [data-dr-prev],
.inquiry-form [data-dr-next] { color: #1D342C; }
.inquiry-form [data-dr-calendar] .grid-cols-7:not([data-dr-grid]) { color: #1D342C; }
.inquiry-form [data-dr-clear] {
  background-color: #F6F9F8;
  border-color: #48897D;
  color: #1D342C;
}

/* Days between the start and end of a selected range. The component fills them
   with bg-brand-50 (#E9F3F1), which was designed to sit on white — against the
   softened panel above it nearly disappears. Deepening it keeps the selected
   span readable, which matters because it's the only cue that a multi-day
   booking was understood. Matches .bg-brand-50 only, not the separate
   hover:bg-brand-50 class, so hover feedback is untouched. */
.inquiry-form [data-dr-grid] .bg-brand-50 { background-color: #DEEAE5; }

/* ── Elder / Large Text accessibility mode ── */
/* Bump the root font-size so all rem-based Tailwind sizes scale up uniformly */
html.elder-mode { font-size: 120%; }
html.elder-mode body { letter-spacing: 0.01em; }

/* Stronger contrast for muted text */
html.elder-mode .text-gray-400,
html.elder-mode .text-gray-500 { color: #374151 !important; } /* gray-700 */
html.elder-mode .text-gray-600 { color: #1f2937 !important; } /* gray-800 */

/* Heavier borders so dividers are easier to spot */
html.elder-mode .border-gray-100 { border-color: #d1d5db !important; } /* gray-300 */
html.elder-mode .border-gray-200 { border-color: #9ca3af !important; } /* gray-400 */

/* Slightly larger minimum click targets */
html.elder-mode button,
html.elder-mode [type="submit"],
html.elder-mode [type="button"],
html.elder-mode a.btn { min-height: 2.5rem; }

/* Table rows — thicker separator line between rows */
html.elder-mode table tbody tr { border-bottom: 2px solid #d1d5db !important; }

/* ---------------------------------------------------------------------------
   Mobile: keep the native date field inside the page.

   Two separate things made it bleed off the right edge on a phone, and fixing
   either one alone isn't enough:

   1. iOS Safari zooms the whole page whenever a focused input is under 16px.
      components/form_field.html renders controls at Tailwind's text-sm (14px),
      so tapping any field zoomed the layout — the field wasn't too wide, the
      viewport was. This is the one that produced the visible symptom.
   2. iOS gives <input type="date"> an intrinsic minimum width from its native
      control and ignores width:100%. Stripping the native appearance is what
      lets it shrink to its container.

   Scoped to .inquiry-form for the same reason as the palette rules above: this
   is the one public, customer-facing form, and form_field.html is shared by
   ~100 internal screens that shouldn't change. Specificity beats Tailwind's
   0,1,0 utilities regardless of the CDN's runtime injection order. */
.inquiry-form input:not([type="hidden"]),
.inquiry-form select,
.inquiry-form textarea {
  font-size: 16px;
  max-width: 100%;
  min-width: 0;
}

.inquiry-form input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 2.75rem;   /* 44px: comfortable touch target */
}

/* Grid and flex children default to min-width:auto, which is what actually
   lets a too-wide control push past the viewport edge instead of shrinking.
   The date field sits in a sm:grid-cols-2 pair, so this is load-bearing. */
.inquiry-form .grid > * { min-width: 0; }