/* Shared visual layer — Casa Verde site (admin + customer-facing pages).
 *
 * Factored out of public/css/admin-shared.css (2026-10-21) so the
 * token/chip/button/select system that the admin dashboard redesign (#148)
 * introduced has exactly one source of truth instead of a third copy. This
 * file holds only what is genuinely generic across BOTH the admin dashboard
 * and the front-of-site storefront pages: modernized native form controls,
 * the unified pill-chip shape for badges/tags/pills, base button sizing,
 * and the no-horizontal-scroll rule. admin-shared.css builds on top of this
 * with its own admin-only chip/button classes and layout rules.
 *
 * Every front-of-site page (index, login, register, forgot/reset-password,
 * profile, catalogue, order, pricing, approve) links this file in <head>
 * BEFORE its own local <style> block, so a page's own more-specific or
 * later-declared rules (e.g. a particular badge's colour, a button's exact
 * padding) still win on the normal CSS cascade. This is the opposite load
 * order from admin-shared.css (which loads AFTER each admin page's local
 * <style>, relying on source order to win equal-specificity ties) — either
 * order is fine, this file just picks the more conventional one for pages
 * that don't already depend on the old order.
 *
 * Pure visual/CSS layer: nothing here is new application behaviour, and
 * nothing here should ever need a matching JS or markup change.
 */

/* ---------- Links ----------
 * A bare <a> with no page-specific class (footer copyright links, mailto
 * links, Drive/document links rendered by admin-orders.js, etc.) fell
 * through to the browser default blue-and-underlined — this is the one
 * rule that keeps every such link on-brand instead. A more specific
 * selector (nav links, .pill, button-styled anchors, explicit inline
 * `style="color:..."`) still wins the cascade as before. */
a {
  color: var(--sage);
  text-decoration: none;
}
a:hover,
a:focus-visible {
  text-decoration: underline;
}

/* ---------- Modernized native form controls ---------- */
select,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--charcoal);
  background: white;
  border: 1.5px solid var(--cream-dark);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  min-height: 36px;
  line-height: 1.3;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

textarea { min-height: 72px; }

select {
  padding-right: 2.1rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M5.5 7.5L10 12l4.5-4.5' stroke='%238a8a84' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 16px 16px;
  cursor: pointer;
}

select:disabled,
input:disabled,
textarea:disabled {
  background: var(--cream);
  color: var(--text-muted);
  cursor: not-allowed;
}

select:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(122, 154, 109, 0.18);
}

input[type="checkbox"],
input[type="radio"] {
  width: 17px;
  height: 17px;
  accent-color: var(--sage);
  cursor: pointer;
  vertical-align: middle;
}

/* ---------- Unified small "chip" shape ----------
 * One shape (pill, same padding/font-scale) for every small status/tag/
 * category label across admin and the storefront. Colour stays wherever it
 * already lived (a more specific selector such as `.badge-pending` or
 * `.badge-premium`); this only normalizes size and geometry. Deliberately
 * excludes larger, purpose-built pills like the homepage hero badge or the
 * catalogue/pricing filter pills, which are controls, not status chips. */
.badge,
.detail-tag,
.tier-badge,
.product-line-badge,
.product-tag,
.dl-badge,
.finish-tag,
.shipment-chip .pill,
.fq-selected-pill,
.fq-alternate-pill,
.fq-used-pill,
.fq-expired-pill,
.archived-flag,
.qr-source,
.qr-tier,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.65rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- Base button sizing ----------
 * Shared sizing/weight/transition for every button-like control, without
 * renaming any existing class the JS/tests rely on. Colour, border and exact
 * padding per-variant (.btn-primary/.btn-outline/.btn-dark/.filter-btn.active,
 * etc.) still come from each page's own rules, which are more specific or
 * load later and so are unaffected. */
.btn,
.filter-btn,
.filter-pill,
.login-btn,
.approve-btn,
.add-line-btn,
.clear-btn {
  font-family: var(--sans);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

/* ---------- No page-level horizontal scroll ---------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ---------- Admin dashboard restyle (JP punch list, 2026-10-21) ----------
 * Single source of truth for tokens the admin pages used to each define
 * identically in their own inline <root>. This file loads AFTER each admin
 * page's local <style> (see admin-shared.css's own head comment), so these
 * :root values win the cascade there without editing three files by hand —
 * exactly how the earlier redesign normalized --serif. Front-of-site pages
 * load this file BEFORE their own <style>, so their own --text-muted (same
 * value) still wins there and nothing changes for them.
 *
 * --text-muted was #8a8a84 (~3.4:1 on white — fails WCAG AA for the body-size
 * text it's actually used for: stat labels, grid labels, table headers,
 * timestamps). Darkened to #6b6b64 (~4.6:1) without losing the "muted, not
 * just dark grey" read against white/--cream/--warm-white.
 *
 * --space-sm/md/lg replace the scattered one-off inline margin-top values
 * (1.1rem / 0.9rem / 0.7rem / 0.5rem / 0.4rem, etc.) with one small scale. */
:root {
  --text-muted: #6b6b64;
  --space-sm: 0.5rem;
  --space-md: 0.9rem;
  --space-lg: 1.25rem;
}