/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* daisyUI v5's .textarea defaults to field-sizing: content, which makes the box grow/shrink
 * as the user types and shifts the rest of the form. Force a stable size. */
.textarea {
  field-sizing: fixed;
  resize: vertical;
}

/* Title-case the main page H1 (set via the shared/page_header partial).
 * CSS `capitalize` is smarter than Ruby's .titleize — it preserves
 * intra-word casing (acronyms like "PGx" stay PGx) and treats hyphens
 * as word boundaries so "two-factor" becomes "Two-Factor". */
.page-title {
  text-transform: capitalize;
}

/* Canonical panel / card title style across the app: small uppercase
 * primary header with wide tracking. Overrides daisyUI's default
 * .card-title (which is text-lg, semibold, default color). Defined
 * outside daisyUI's cascade layer so our rule wins without !important.
 *
 * Hero card titles on auth pages add a .text-2xl utility that bumps
 * the font-size; everything else (color, tracking, transform, weight)
 * still inherits from this rule. */
.card-title {
  font-size: 0.875rem;       /* text-sm */
  font-weight: 700;          /* font-bold */
  text-transform: uppercase;
  letter-spacing: 0.05em;    /* tracking-wider */
  color: var(--color-primary);
}

/* Mobile (< 640px / sm): navbar dropdowns break out of dropdown-end's
 * right-anchored absolute position and become a full-width sheet
 * docked just under the 4rem-tall navbar. Keeps the trigger menus
 * (account switcher, bell, avatar) tappable without horizontal
 * overflow when their daisyUI width (w-64/w-72/w-80) plus dropdown-end
 * pushes the content off-screen left. Add `mobile-fullwidth-dropdown`
 * to the dropdown-content <ul> to opt in. */
@media (max-width: 639px) {
  .mobile-fullwidth-dropdown {
    position: fixed !important;
    top: 4rem !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
  }
}

/* Mobile (< 640px / sm): form action rows go vertical so the Cancel +
 * Submit buttons each fill the row width. Targets the common
 * .flex.justify-end and .flex.justify-between patterns at the foot of
 * every form. Reverses child order so the primary action stays at the
 * top of the stack — that's what users tap first on mobile. */
@media (max-width: 639px) {
  form .flex.justify-end > .btn,
  form .flex.justify-between > .btn,
  form .flex.justify-end > input.btn[type="submit"],
  form .flex.justify-between > input.btn[type="submit"] {
    width: 100%;
  }
  form .flex.justify-end,
  form .flex.justify-between {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.5rem;
  }
}