/*
 * Shared foundations for every layout: design tokens, reset, base typography,
 * and flash messages. Loaded by both the auth (`application`) layout and the
 * authenticated `portal` layout. Propshaft serves this directly; keep it plain
 * CSS. Layout-specific rules live in auth.css and portal.css.
 */

:root {
  --color-page: #f5fafd;
  --color-surface: #ffffff;
  --color-border: #d3e0e8;
  --color-field: #f5f9fc;
  --color-primary: #0970c5;
  --color-primary-edge: #0d61a6;
  --color-text: #323a41;
  --color-muted: #7a8c99;
  --color-success: #1f8a5b;
  --color-error: #c0392b;
  --radius: 6px;
  --font-sans: "Avenir", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

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

body {
  background-color: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  min-height: 100vh;
}

/* Generic page title (the main <h1> of a page): large, semi-bold, in the brand
   blue. Shared chrome so every page across both layouts renders its title
   consistently. */
.page-title {
  margin: 0;
  color: var(--color-primary);
  font-size: 28px;
  font-weight: 600;
}

/* Utility toggled by the stimulus-components reveal/dropdown controllers, which
   show and hide elements by adding/removing this class. */
.hidden {
  display: none;
}

.flash {
  margin: 0 0 16px;
  font-size: 14px;
}

.flash--notice {
  color: var(--color-success);
}

.flash--alert {
  color: var(--color-error);
}

/* Secondary action button: white fill with a brand border and text. Shared by
   both the auth (`application`) and authenticated `portal` layouts, e.g. the
   Invite agent / Invite agency toolbar buttons and the per-row View links.
   Self-contained (its own box, type, and centering) so it styles both a
   <button> and an <a> under any layout. */
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  color: var(--color-primary);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.button-secondary:hover {
  background-color: rgba(9, 112, 197, 0.06);
}

.button-secondary:disabled {
  color: var(--color-muted);
  border-color: var(--color-border);
  background-color: var(--color-surface);
  cursor: not-allowed;
}

/* The shared button vocabulary, alongside .button-secondary above: every button
   carries its own style class (primary / danger / plain / secondary / link) rather
   than being styled by its container. Defined in base.css so they're available in
   every layout (portal + auth). The auth `.card`-scoped submit rules in forms.css are
   more specific and still win for full-width card forms. */
.button-primary,
.button-plain,
.button-link,
.button-danger {
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.button-primary {
  background-color: var(--color-primary);
  color: var(--color-surface);
  border: none;
}

.button-primary:hover {
  background-color: #0862ab;
}

/* Destructive fill (Terminate / Disable / Delete); sizing from the shared group. */
.button-danger {
  background-color: var(--color-error);
  color: var(--color-surface);
  border: none;
  box-shadow: none;
}

.button-danger:hover {
  background-color: #a5342a;
}

.button-plain {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  text-decoration: none;
}

.button-plain:not(:disabled):hover {
  background-color: var(--color-field);
  border-color: var(--color-primary);
}

.button-plain:disabled {
  color: var(--color-muted);
  cursor: not-allowed;
}

.button-link {
  height: auto;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-primary);
  text-decoration: underline;
}

/* Breadcrumb trail: a generic, shallow (up to 4 levels) navigation trail,
   rendered via shared/_breadcrumbs. Shared chrome so any page in any layout can
   use it (base.css is loaded by every layout). */
.breadcrumbs {
  margin-bottom: 12px;
  font-size: 14px;
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.breadcrumbs__link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.breadcrumbs__link:hover {
  text-decoration: underline;
}

.breadcrumbs__current {
  color: var(--color-muted);
}

.breadcrumbs__sep {
  color: var(--color-muted);
}

/* Modal dialog chrome: a header/body/footer card with tinted header and footer
   bars. Layout-agnostic and shared by both the auth (`application`) layout and
   the authenticated `portal` layout, so any page can host a `<dialog class=
   "modal">` (e.g. the agency downline invite and the carrier "Invite agent"). */
.modal {
  width: min(560px, 92vw);
  /* Cap the height so a long form can't push the footer off-screen; the body
     scrolls independently while the header and footer stay pinned. */
  max-height: 90vh;
  flex-direction: column;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(50, 58, 65, 0.25);
  color: var(--color-text);
}

/* Only lay the modal out as a flex column while open. A closed <dialog> is
   display:none via UA styles; declaring display on `.modal` itself would
   override that and render the modal inline in the page. */
.modal[open] {
  display: flex;
}

/* The form spans the body and footer between the fixed header, so it carries
   the column layout that lets the body flex and scroll. min-height: 0 lets the
   scroll area actually shrink inside the flex column. */
.modal__form {
  display: flex;
  flex-direction: column;
  /* Intrinsic sizing avoids Safari collapsing the form to zero height when the
     native dialog has auto height; the body still scrolls within max-height. */
  flex: 0 1 auto;
  min-height: 0;
}

.modal::backdrop {
  background-color: rgba(50, 58, 65, 0.5);
}

.modal__header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background-color: var(--color-field);
  border-bottom: 1px solid var(--color-border);
}

.modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
}

/* Muted one-line description under the modal title (e.g. the Add payment modal's
   "Create a manual payment entry to be released."). */
.modal__subtitle {
  margin: 4px 0 0;
  color: var(--color-muted);
  font-size: 14px;
}

/* When the description introduces the body instead of sitting in the header
   (e.g. the Contact support modal), add room before the first field. */
.modal__body > .modal__subtitle {
  margin: 0 0 20px;
}

.modal__close {
  padding: 0;
  background: none;
  border: none;
  color: var(--color-muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.modal__body {
  padding: 24px;
  /* Only the body scrolls when the form is taller than the capped modal. */
  overflow-y: auto;
  min-height: 0;
}

.modal__footer {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  background-color: var(--color-field);
  border-top: 1px solid var(--color-border);
}

/* Dialog form button bar: keep the cancel + submit actions right-justified but
   add a little breathing room between them (e.g. the "Invite agent" modal). */
.modal__footer--split {
  gap: 16px;
}

/* Field/label/submit styling for controls inside a modal lives in the shared
   forms.css (grouped with the .card rules), so the modal looks right under any
   layout — including `portal`, which has no auth-layout `.card` styles. */