/*
 * Medworx — app-only additions.
 *
 * style.css is the locked Phase 2C design system and the source of truth for
 * tokens, type, spacing and primitives. Anything here is a component the
 * wireframes did not cover (sign-in screen, flash messages, form fields).
 * Always reach for an existing token — never a raw colour.
 */

/* ────────────────────────────────────────────────
   Flash messages
   ──────────────────────────────────────────────── */
.flash-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.flash {
  font-size: 14px;
  padding: 9px 14px;
  border-radius: var(--radius-md);
  border: 0.5px solid var(--border-tertiary);
}
.flash-info {
  background: var(--bg-info);
  border-color: var(--border-info);
  color: var(--text-info-dark);
}
.flash-danger {
  background: var(--bg-danger);
  border-color: var(--border-danger);
  color: var(--text-danger);
}

/* ────────────────────────────────────────────────
   Form fields
   ──────────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}
.field-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.field-input {
  width: 100%;
}

/* ────────────────────────────────────────────────
   Buttons
   ──────────────────────────────────────────────── */
.btn-primary {
  width: 100%;
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
  font-weight: 500;
  margin-top: 4px;
}
.btn-primary:hover { background: var(--brand-red-dark); }

/* A button that reads as a link — used for sign out, which must be a DELETE
   rather than a plain anchor. */
.btn-link {
  background: none;
  border: none;
  padding: 0;
  height: auto;
  font-size: 13px;
  color: var(--text-info);
  cursor: pointer;
}
.btn-link:hover { background: none; text-decoration: underline; }

/* button_to wraps its button in a form; keep it on the same line as the name. */
.app-header .user { display: flex; align-items: center; gap: 12px; }
.app-header .user form { margin: 0; }

/* Wordmark plus the always-available way back to the search screen. */
.app-header .brand-group {
  display: flex;
  align-items: center;
  gap: 14px;
}
.app-header .brand {
  color: var(--text-primary);
  text-decoration: none;
}
.app-header .brand:hover { color: var(--brand-red); }

/* Reads as a control rather than a body link — this is navigation, and #70
   keeps red off anything that is not a primary action. */
.btn-nav {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background 60ms ease, color 60ms ease;
}
.btn-nav:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* ────────────────────────────────────────────────
   Search screen (wireframe screen #20)

   Promoted verbatim from the inlined block in wireframes/search-results.html,
   per that file's "inline first, promote if reused" note. Keep the two in sync
   if the wireframe is revised.
   ──────────────────────────────────────────────── */
.search-row {
  background: var(--bg-primary);
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}
.search-row label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.search-row input[type="text"] {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  font: 400 14px var(--font-sans);
  color: var(--text-primary);
}
.search-row input[type="text"]:focus {
  outline: none;
  border-color: var(--border-info);
  box-shadow: 0 0 0 3px var(--bg-info);
}
.search-row input[type="submit"] {
  height: 36px;
  padding: 0 18px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--text-info);
  color: #fff;
  font: 500 14px var(--font-sans);
  cursor: pointer;
}
.search-row input[type="submit"]:hover { background: var(--text-info-dark); }

/* Single-column on a phone — repair reporting (Chunk 20) is phone-targeted and
   techs will reach the search from the same device. */
@media (max-width: 640px) {
  .search-row { grid-template-columns: 1fr; }
}

.result-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}
.result-meta .count { color: var(--text-primary); font-weight: 500; }
.result-meta .query {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--bg-secondary);
  padding: 1px 6px;
  border-radius: 4px;
}
.result-meta a { color: var(--text-info); text-decoration: none; }
.result-meta a:hover { text-decoration: underline; }

.results {
  background: var(--bg-primary);
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.results-head,
.result-row-data {
  display: grid;
  grid-template-columns: 90px 130px 1fr 1fr 110px 90px;
  gap: 14px;
  padding: 14px 18px;
  align-items: center;
}
/* Joel, 2026-08-05: the header row was grey-on-grey and easy to miss. Darker,
   heavier and letter-spaced so the columns read as headings at a glance. */
.results-head {
  padding: 10px 18px;
  background: var(--bg-secondary);
  border-bottom: 0.5px solid var(--border-tertiary);
  font-size: 11px;
  color: var(--text-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.result-row-data {
  border-bottom: 0.5px solid var(--border-tertiary);
  cursor: pointer;
  transition: background 80ms ease;
  font-size: 13px;
  text-decoration: none;
  color: inherit;
}
.result-row-data:last-child { border-bottom: none; }
.result-row-data:hover { background: var(--bg-secondary); }

/* ~12% dim for retired assets and archived clients (decisions #62, #82). */
.result-row-data.retired { opacity: 0.88; }

.result-row-data .asset-no {
  color: var(--text-primary);
  font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.result-row-data:hover .asset-no {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.result-row-data .serial { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.result-row-data .serial .match,
.result-row-data .asset-no .match,
.result-row-data .org-site .match { font-weight: 700; }

.result-row-data .org-site .site {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.result-row-data .class-cell { font-size: 12px; color: var(--text-secondary); }

.results-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 4px 4px;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Neutral grey, not a status colour — archived is a client-level state, not an
   asset status, and must not read as one of the four status pills. */
.pill-archived {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
  vertical-align: 1px;
}

.search-empty {
  background: var(--bg-primary);
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}
.search-empty-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.search-empty p { margin: 0 auto; max-width: 46ch; }

/* ────────────────────────────────────────────────
   Register screens — shared bits
   (client overview, site overview, asset dashboard)
   ──────────────────────────────────────────────── */

/* Current page in a breadcrumb — a plain span, not a link to itself. */
.crumb .here { color: var(--text-primary); }

/* Screen-reader-only label for a column whose header is visually empty. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Archived client banner (decisions #47, #82, #85) — informational, not a
   warning. The client is still perfectly valid to look at. */
.archived-banner {
  background: var(--bg-muted);
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* A disabled control is an affordance for something not yet built. Muted, not
   struck through — it says "not yet", not "forbidden". */
.footer-actions button[disabled],
.report-buttons button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.status-edit.disabled,
.notes-block .edit.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: none;
}

/* ────────────────────────────────────────────────
   Matching clients, above the asset rows (decision #87)
   ──────────────────────────────────────────────── */
.client-matches {
  background: var(--bg-primary);
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 16px;
}
.client-matches-head {
  background: var(--bg-secondary);
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 0.5px solid var(--border-tertiary);
}
.client-matches-head .more {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-tertiary);
}
.client-match {
  display: grid;
  grid-template-columns: 1.6fr 1.4fr auto;
  column-gap: 16px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--border-tertiary);
  font-size: 13px;
  text-decoration: none;
  transition: background 60ms ease;
}
.client-match:last-of-type { border-bottom: none; }
.client-match:hover { background: var(--bg-secondary); }
.client-match.retired { opacity: 0.88; }
.client-match .name { font-weight: 500; color: var(--text-primary); }
.client-match .name .match { font-weight: 700; }
.client-match .meta { color: var(--text-secondary); font-size: 12px; }
.client-match .open-link { color: var(--text-info); font-size: 12px; }

@media (max-width: 640px) {
  .client-match { grid-template-columns: 1fr; row-gap: 3px; }
  .client-match .open-link { display: none; }
}

/* ────────────────────────────────────────────────
   Typeahead dropdown (decisions #88, #89)
   ──────────────────────────────────────────────── */
.combobox { position: relative; }
.combobox-list {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 4px 0;
  list-style: none;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-secondary);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
  max-height: 260px;
  overflow-y: auto;
}
.combobox-list[hidden] { display: none; }
.combobox-option {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
.combobox-option:hover,
.combobox-option.active { background: var(--bg-secondary); }

/* style.css's .toolbar is a flex row that stretches `input` as a *direct*
   child. A real form has to wrap the field to submit it, which made the form
   the flex child instead and collapsed the search box to a stub. Make the form
   transparent to the layout so the field fills the row as the wireframe has it. */
.toolbar form {
  display: flex;
  flex: 1;
  gap: 8px;
  margin: 0;
}
.toolbar form .combobox { flex: 1; }
.toolbar form input[type="search"] { width: 100%; }

/* Notes are prose typed by a tech, never markup. They are rendered escaped —
   not through simple_format, which permits a subset of HTML — so line breaks
   have to be preserved here instead. */
.notes-block .body { white-space: pre-wrap; }

/* Asset notes reuse the shared yellow callout, with the edit affordance pulled
   to the right of the body (asset-dashboard wireframe). */
.notes-block.with-edit {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.notes-block.with-edit .edit {
  font-size: 12px;
  color: var(--text-warning);
  text-decoration: underline;
  white-space: nowrap;
  align-self: center;
}

/* Table rows that navigate as a whole (decision #64). The pointer is the only
   visual cue beyond the existing row hover in style.css. */
.asset-table tbody tr.linked-row { cursor: pointer; }
.asset-table tbody tr.linked-row td a {
  color: var(--text-primary);
  text-decoration: none;
}
.asset-table tbody tr.linked-row:hover td a { text-decoration: underline; }

/* ────────────────────────────────────────────────
   Client overview (screens #5/#9)
   ──────────────────────────────────────────────── */
.contact-box {
  background: var(--bg-primary);
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  margin: 12px 0 14px;
  font-size: 13px;
}
.contact-box .line {
  color: var(--text-secondary);
  margin-bottom: 3px;
}
.contact-box .line:last-of-type { margin-bottom: 0; }
.contact-box .line.empty { color: var(--text-tertiary); font-style: italic; }
.contact-box .line a { color: var(--text-info); }
.contact-box .summary {
  color: var(--text-tertiary);
  font-size: 12px;
  margin-top: 2px;
}

.sites-tbl {
  background: var(--bg-primary);
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.sites-tbl .tbl-head,
.sites-tbl .row {
  display: grid;
  grid-template-columns: 1.5fr 1.3fr 0.85fr 0.7fr 0.4fr;
  column-gap: 16px;
  align-items: center;
}
.sites-tbl .tbl-head {
  background: var(--bg-secondary);
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 0.5px solid var(--border-tertiary);
}
.sites-tbl .tbl-head .num,
.sites-tbl .row .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* The count carries its own unit, so a bare number in a narrow column can never
   be mistaken for something else. */
.sites-tbl .row .num .unit {
  color: var(--text-tertiary);
  font-size: 11px;
  margin-left: 2px;
}
.sites-tbl .row {
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--border-tertiary);
  font-size: 13px;
  text-decoration: none;
  transition: background 60ms ease;
}
.sites-tbl .row:last-of-type { border-bottom: none; }
.sites-tbl .row:hover { background: var(--bg-secondary); }
.sites-tbl .site-name { font-weight: 500; color: var(--text-primary); }
.sites-tbl .addr { color: var(--text-secondary); font-size: 12px; }
.sites-tbl .last-visit {
  color: var(--text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.sites-tbl .open-link {
  color: var(--text-info);
  text-align: right;
  font-size: 12px;
}

/* ────────────────────────────────────────────────
   Asset dashboard (screen #3)
   ──────────────────────────────────────────────── */
.identity {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  gap: 24px;
}
.identity .title {
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 4px;
  letter-spacing: -0.012em;
  line-height: 1.2;
}
.identity .title .label {
  color: var(--text-tertiary);
  font-weight: 400;
  margin-right: 2px;
}
.identity .title .num { font-variant-numeric: tabular-nums; }
.identity .title .sep {
  color: var(--text-tertiary);
  margin: 0 10px;
  font-weight: 400;
}
.identity .sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.identity .status-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}
.identity .status-edit {
  font-size: 12px;
  color: var(--text-tertiary);
  text-decoration: underline;
}

.due-row {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.due-badge {
  background: var(--bg-primary);
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
}
.due-badge .label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 500;
}
.due-badge .value {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.due-badge .value .when {
  color: var(--text-secondary);
  font-weight: 400;
  margin-left: 4px;
}
.due-badge.overdue {
  background: var(--bg-danger);
  border-color: var(--border-danger);
}
.due-badge.overdue .label,
.due-badge.overdue .value { color: var(--text-danger); }
.due-badge.overdue .value .when {
  color: var(--text-danger);
  font-weight: 500;
}

/* Also used for the site overview's Site details tab. */
.details-grid {
  background: var(--bg-primary);
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 22px;
}
.details-grid .detail .label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 3px;
  font-weight: 500;
}
.details-grid .detail .value {
  font-size: 14px;
  color: var(--text-primary);
  margin: 0;
}
.details-grid .detail .value a { color: var(--text-info); }

.report-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

/* Single column on a phone — the register screens are read on a tablet in a
   clinic at least as often as at a desk. */
@media (max-width: 640px) {
  .details-grid { grid-template-columns: 1fr; }
  .identity { flex-direction: column; gap: 10px; }
  .sites-tbl .tbl-head { display: none; }
  .sites-tbl .row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .sites-tbl .row .addr,
  .sites-tbl .row .last-visit { grid-column: 1 / -1; }
  .sites-tbl .open-link { display: none; }
}

/* ────────────────────────────────────────────────
   Sign-in screen
   ──────────────────────────────────────────────── */
.auth-screen {
  display: flex;
  justify-content: center;
  padding-top: 9vh;
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-lg);
  padding: 28px 30px 30px;
}
.auth-brand {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-red);
  margin-bottom: 18px;
}
.auth-card .page-title { margin-top: 0; }
.auth-form { margin-top: 22px; }

/* ────────────────────────────────────────────────
   Register forms — client, site and asset create/edit
   (Chunk 3 pass 2)

   .field, .field-label and .field-input above are shared with the sign-in
   screen. Everything here is the multi-field page those two never needed.
   ──────────────────────────────────────────────── */
.form-card {
  background: var(--bg-primary);
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-lg);
  padding: 22px 24px 24px;
  margin-top: 18px;
}

/* Three across on a desktop, one on a tablet held in a clinic. Fields that need
   the full width opt in with .span-2. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 18px;
}
.form-grid .span-2 { grid-column: span 2; }

.form-card .section-header { margin-top: 18px; }
.form-card .section-header:first-child { margin-top: 0; }

.form-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: -8px 0 14px;
  line-height: 1.45;
}
.field .form-hint { margin: 2px 0 0; }

/* A value shown for context rather than edited — the client a site belongs to,
   which comes from the URL and is deliberately not a picker. */
.field-static {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  padding: 8px 0;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 0.5px solid var(--border-tertiary);
}

/* .btn-primary is full-width for the sign-in card; on a form with several
   actions side by side it has to size to its label. */
.btn-inline {
  width: auto;
  margin-top: 0;
  height: 36px;
  padding: 0 18px;
}

.form-errors {
  background: var(--bg-danger);
  border: 0.5px solid var(--border-danger);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  margin-bottom: 18px;
  color: var(--text-danger);
  font-size: 13px;
}
.form-errors-title { font-weight: 500; margin: 0 0 4px; }
.form-errors ul { margin: 0; padding-left: 18px; }

/* Asset class picker (decision #4) — radio buttons drawn as a button row, so it
   works with no JavaScript and the whole label is the tap target. */
.class-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.class-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  height: 36px;
  border: 0.5px solid var(--border-secondary);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  font-size: 14px;
  cursor: pointer;
  transition: background 60ms ease, border-color 60ms ease;
}
.class-option:hover { background: var(--bg-secondary); }
/* :has keeps the checked state in CSS rather than needing a Stimulus controller
   to toggle a class. Browsers without it still show the radio itself, so the
   selection is never invisible. */
.class-option:has(input:checked) {
  border-color: var(--brand-red);
  background: var(--brand-red-tint);
  font-weight: 500;
}
.class-option:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--bg-info-strong);
}

/* Duplicate asset number (decisions #65/#66). Info blue, not danger red: two
   records disagree, which is worth fixing — but nothing has failed and no
   certificate is wrong. Red here would read as "this asset is unsafe". */
.duplicate-warning {
  background: var(--bg-info);
  border: 0.5px solid var(--border-info);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  margin-bottom: 20px;
}
.duplicate-warning .label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-info-dark);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.duplicate-warning .body {
  font-size: 13px;
  color: var(--text-info-dark);
  margin: 0;
  line-height: 1.5;
}
.duplicate-warning .body a { color: var(--text-info-dark); text-decoration: underline; }

/* The "add a new client" line under the search results. Quiet on purpose —
   search is single-purpose (#61) and this must not compete with it. */
.search-aside {
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-tertiary);
  text-align: center;
}

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: span 1; }
  .form-actions .btn-inline { flex: 1; }
}

/* ────────────────────────────────────────────────
   Action buttons — "+ Add new client", "+ Add new asset"
   (Joel, 2026-08-06)

   Info blue with white text, matching the search screen's Search button. Not
   Medworx red: #70 keeps red for the primary action *within* a form, and these
   are navigation to a form. Deliberately the same weight as Search, because
   adding a client is as routine as looking one up.
   ──────────────────────────────────────────────── */
.btn-action {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--text-info);
  color: #fff;
  font: 500 14px var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background 80ms ease;
}
.btn-action:hover {
  background: var(--text-info-dark);
  color: #fff;
  text-decoration: none;
}

/* Sits under the search row, right-aligned to line up with the Search button
   directly above it. */
.search-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

/* The tab row doubles as an action row on the site overview. margin-left:auto
   pushes the button to the far right so it can never read as a fourth tab, and
   the negative margin lifts it clear of the row's bottom border. */
.tabs.with-action {
  display: flex;
  align-items: center;
}
.tabs .tabs-action {
  margin-left: auto;
  margin-bottom: 8px;
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
}

/* Reversible destructive action — outline, not solid fill (#47, probe #7).
   Archiving a client can be undone from the same screen. */
.btn-danger-outline {
  color: var(--text-danger);
  border-color: var(--border-danger);
}
.btn-danger-outline:hover {
  background: var(--bg-danger);
  color: var(--text-danger);
}

/* button_to wraps its button in a form, which would otherwise break the
   footer's flex row. */
.footer-actions form { margin: 0; display: inline-flex; }

/* ────────────────────────────────────────────────
   Acknowledgement modal (duplicate asset number)
   ──────────────────────────────────────────────── */
.ack-modal {
  max-width: 480px;
  width: calc(100% - 32px);
  padding: 22px 24px 20px;
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}
.ack-modal::backdrop {
  background: rgba(22, 23, 28, 0.42);
}
.ack-title {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.ack-body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 10px;
}
.ack-body strong { color: var(--text-primary); font-weight: 500; }
.ack-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* Google Places lookup above the address field (decision #96). Visually a
   subordinate control, not a second address — it writes into the field below
   it and is never itself submitted. */
.address-lookup {
  margin-bottom: 8px;
}
.address-lookup input:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Google's suggestion dropdown. It attaches to <body>, so it cannot be styled
   as a descendant of the form — matched to the app's own combobox instead so it
   does not arrive looking like someone else's website. */
.pac-container {
  border-radius: var(--radius-md);
  border: 0.5px solid var(--border-secondary);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
  font-family: var(--font-sans);
  margin-top: 4px;
}
.pac-item {
  padding: 7px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  border-top: none;
  cursor: pointer;
}
.pac-item:hover,
.pac-item-selected { background: var(--bg-secondary); }
.pac-item-query { font-size: 13px; color: var(--text-primary); }