/* Roof Quote Easy — component layer.
 *
 * Values come from design-tokens.css, which is generated from DESIGN.md
 * (brand-kits/roof-quote-easy). Nothing here invents a colour: if a value is
 * needed that is not a token, the token is added to DESIGN.md and regenerated.
 *
 * Written as plain CSS rather than Tailwind @apply because this project has no
 * build step — Tailwind arrives from a CDN, where @apply does not exist. These
 * classes are referenced from templates and from Python form widget attrs, so
 * they must resolve without a compiler.
 */

/* ---------------------------------------------------------------- base --- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--color-surface-muted);
  color: var(--color-primary);
  font-size: var(--size-body-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Money, roof areas and counts sit in columns; proportional digits make the
   column ragged and read as sloppy. Inter ships tabular figures. */
.tabular,
td.num,
.metric-value { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4 {
  color: var(--color-primary);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

a { color: var(--color-link-text); }

/* One focus treatment everywhere. Never removed: the dashboard has keyboard
   users on desktop, and an invisible focus ring strands them. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-neutral);
  padding: .625rem 1rem;
  font-size: var(--size-body-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: #4338CA; }
.btn:active { background: #3730A3; }
.btn[disabled],
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.btn-secondary {
  background: var(--color-neutral);
  color: var(--color-primary);
  border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-surface-muted); }

.btn-danger { background: var(--color-danger-text); }
.btn-danger:hover { background: #991B1B; }

.btn-sm { padding: .4rem .7rem; font-size: 13px; }
.btn-block { width: 100%; }

/* --------------------------------------------------------------- inputs --- */

.input,
.select,
.textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: .55rem .75rem;
  font: inherit;
  font-size: var(--size-body-sm);
  color: var(--color-primary);
  background: var(--color-neutral);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: var(--color-secondary); }
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  /* Ring rather than a thicker border, so the control does not shift by 1px
     and nudge everything beside it when focused. */
  box-shadow: 0 0 0 3px rgb(79 70 229 / .15);
}
.input[aria-invalid="true"] { border-color: var(--color-danger); }

/* allauth's own forms (password reset, change password) build their widgets
   without our .input class, so they would render as browser-default boxes on
   an otherwise styled page. Matching bare controls inside a card gives every
   allauth screen the same field styling without a form subclass per view.
   Controls that already carry .input resolve to identical properties, so this
   never fights the explicit class. */
.card form :where(
  input[type="text"], input[type="email"], input[type="password"],
  input[type="url"], input[type="tel"], input[type="number"], input[type="search"]
):not(.input),
.card form select:not(.select):not(.input),
.card form textarea:not(.textarea):not(.input) {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: .55rem .75rem;
  font: inherit;
  font-size: var(--size-body-sm);
  color: var(--color-primary);
  background: var(--color-neutral);
}
.card form :where(input, select, textarea):not(.input):focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgb(79 70 229 / .15);
}

.label {
  display: block;
  font-size: var(--size-body-sm);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: .35rem;
}
.hint {
  font-size: 13px;
  color: var(--color-secondary);
  margin-top: .35rem;
}
.error-text {
  font-size: 13px;
  color: var(--color-danger-text);
  margin-top: .35rem;
}

/* ---------------------------------------------------------------- cards --- */

.card {
  background: var(--color-neutral);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.card-pad { padding: var(--space-md); }
@media (min-width: 768px) { .card-pad { padding: 1.25rem; } }

.card-head {
  padding: 1rem var(--space-md);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
}

/* A hairline separates without implying the thing can be dismissed; a lead row
   cannot. Shadow is reserved for genuinely floating surfaces. */
.elevated { box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -2px rgb(0 0 0 / .05); }

/* ---------------------------------------------------------------- pills --- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border-radius: var(--radius-full);
  padding: .2rem .6rem;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.pill-neutral { background: #F3F4F6; color: #374151; }
.pill-accent  { background: #EEF2FF; color: #4338CA; }
.pill-success { background: #ECFDF5; color: var(--color-success-text); }
.pill-danger  { background: #FEF2F2; color: var(--color-danger-text); }
.pill-warn    { background: #FFFBEB; color: #B45309; }

/* --------------------------------------------------------------- layout --- */

.metric-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.metric-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.muted { color: var(--color-secondary); }
.small { font-size: var(--size-body-sm); }

/* ------------------------------------------------------------------ nav --- */

.nav-link {
  display: flex;
  align-items: center;
  gap: .625rem;
  border-radius: var(--radius-md);
  padding: .5rem .7rem;
  font-size: var(--size-body-sm);
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.nav-link:hover { background: #F3F4F6; color: var(--color-primary); }
.nav-link[aria-current="page"] {
  background: var(--color-accent);
  color: var(--color-neutral);
}
.nav-link[aria-current="page"] .nav-icon { opacity: 1; }
.nav-icon { width: 18px; height: 18px; flex: none; opacity: .7; }

.tabbar-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: .5rem 0 .55rem;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-secondary);
  text-decoration: none;
}
.tabbar-link[aria-current="page"] { color: var(--color-accent); }

/* --------------------------------------------------------------- tables --- */

.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-secondary);
  padding: .6rem var(--space-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  white-space: nowrap;
}
.table td {
  padding: .75rem var(--space-md);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--size-body-sm);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #FAFAFB; }

/* ---------------------------------------------------------------- misc --- */

.divider { height: 1px; background: var(--color-border); border: 0; }

.empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-secondary);
}

/* htmx swaps the leads table on every keystroke; a brief dim tells the user
   the list they are looking at is one request behind. */
.htmx-request.htmx-indicator,
.htmx-request .htmx-indicator { opacity: .5; transition: opacity .1s ease; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}