/* ===========================================================================
   GunTracker — Modern Tactical theme.
   Dark warm graphite surfaces, brass accent, olive drab kept for status.
   ===========================================================================*/

:root {
  /* Palette — warm-toned dark, not blue-black */
  --gt-bg:           #1c1b18;
  --gt-bg-2:         #232220;
  --gt-surface:      #282720;
  --gt-surface-2:    #32302b;
  --gt-surface-3:    #3a3832;
  --gt-hover:        #3f3c36;
  --gt-border:       #3a3834;
  --gt-border-strong:#4e4a44;
  --gt-divider:      rgba(236, 230, 214, 0.08);

  /* Text. Muted lifted from #9c9485 (2026-06 review) — at the small sizes it's
     used for (table headers, spec labels) the old tone sat near the AA floor
     for an audience that skews older. */
  --gt-heading:      #f4efe0;
  --gt-text:         #ece6d6;
  --gt-text-muted:   #a8a191;
  --gt-text-dim:     #6e685d;

  /* Brass accent (primary actions, focus rings, active states) */
  --gt-accent:       #c98a3a;
  --gt-accent-hover: #d99c4c;
  --gt-accent-dim:   #a47028;
  --gt-accent-soft:  rgba(201, 138, 58, 0.18);
  --gt-on-accent:    #1c1b18;

  /* Status palette (kept warm; status badges/buttons key off these) */
  --gt-od:           #7a8456;
  --gt-od-hover:     #8c9663;
  --gt-od-soft:      rgba(122, 132, 86, 0.22);

  --gt-danger:       #c25a3f;
  --gt-danger-soft:  rgba(194, 90, 63, 0.18);
  --gt-warn:         #d4a350;
  --gt-warn-soft:    rgba(212, 163, 80, 0.20);
  --gt-success:      #7a9d5a;
  --gt-success-soft: rgba(122, 157, 90, 0.22);
  --gt-info:         #6f8389;
  --gt-info-soft:    rgba(111, 131, 137, 0.22);

  /* Bootstrap overrides — let stock components inherit the theme */
  --bs-body-bg: var(--gt-bg);
  --bs-body-color: var(--gt-text);
  --bs-emphasis-color: var(--gt-heading);
  --bs-emphasis-color-rgb: 244, 239, 224;
  --bs-border-color: var(--gt-border);
  --bs-border-color-translucent: var(--gt-divider);
  --bs-link-color: var(--gt-accent);
  --bs-link-hover-color: var(--gt-accent-hover);
  --bs-link-color-rgb: 201, 138, 58;
  --bs-link-hover-color-rgb: 217, 156, 76;
  --bs-secondary-bg: var(--gt-surface-2);
  --bs-tertiary-bg: var(--gt-surface);
  --bs-secondary-color: var(--gt-text-muted);
  --bs-tertiary-color: var(--gt-text-muted);
  --bs-heading-color: var(--gt-heading);

  /* Tables */
  --bs-table-bg: transparent;
  --bs-table-color: var(--gt-text);
  --bs-table-border-color: var(--gt-border);
  --bs-table-striped-bg: rgba(236, 230, 214, 0.03);
  --bs-table-hover-bg: rgba(236, 230, 214, 0.05);
  --bs-table-hover-color: var(--gt-heading);

  /* Forms */
  --bs-form-control-bg: var(--gt-surface-2);
  --bs-form-control-color: var(--gt-text);
  --bs-form-control-disabled-bg: var(--gt-surface);
}

/* --- Base typography ------------------------------------------------------ */

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 768px) {
  html { font-size: 17px; }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  background-color: var(--gt-bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(201, 138, 58, 0.07), transparent 60%),
    linear-gradient(180deg, var(--gt-bg) 0%, var(--gt-bg-2) 100%);
  background-attachment: fixed;
  color: var(--gt-text);
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--gt-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

h1 { font-weight: 700; letter-spacing: -0.025em; }

a { color: var(--gt-accent); text-decoration: none; }
a:hover { color: var(--gt-accent-hover); text-decoration: underline; }

.text-muted { color: var(--gt-text-muted) !important; }
.text-danger  { color: #ef9b85 !important; }
.text-warning { color: #f0d59a !important; }
.text-success { color: #cdd6a2 !important; }
.text-info    { color: #c9d8dc !important; }

hr { border-color: var(--gt-divider); opacity: 1; }

::selection {
  background-color: var(--gt-accent);
  color: var(--gt-on-accent);
}

/* --- Layout shell --------------------------------------------------------- */

main {
  /* Drop the old cream-box wrap. The body bg handles the canvas now;
     individual sections use .card or bespoke containers as needed. */
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 2.5rem;
}

.container { max-width: 1200px; }

/* --- Navbar --------------------------------------------------------------- */

.navbar {
  background-color: rgba(17, 16, 14, 0.92) !important;
  border-bottom: 1px solid var(--gt-border) !important;
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--gt-heading) !important;
}

.navbar-brand .brand-mark {
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.35rem;
  background: linear-gradient(135deg, var(--gt-accent), var(--gt-accent-dim));
  color: var(--gt-on-accent);
  font-weight: 800;
  font-size: 0.9rem;
}

.navbar .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem !important;
  color: var(--gt-text-muted) !important;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: color 0.15s, background-color 0.15s;
}

.navbar .nav-link:hover {
  color: var(--gt-heading) !important;
  background-color: rgba(236, 230, 214, 0.05);
}

.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  color: var(--gt-accent) !important;
  background-color: var(--gt-accent-soft);
}

.navbar-toggler {
  border-color: var(--gt-border) !important;
  padding: 0.4rem 0.55rem;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28236, 230, 214, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* --- Site-wide dev / pre-launch warning banner --------------------------- */
/* Rendered at the very top of <body> by _Layout when App:DevelopmentBanner is
   true. Persistent (no dismiss) — the whole point is that the warning stays
   visible. Flip the config flag to remove without a code change. */
.dev-banner {
  background: repeating-linear-gradient(
    -45deg,
    var(--gt-warn-soft),
    var(--gt-warn-soft) 14px,
    rgba(212, 163, 80, 0.05) 14px,
    rgba(212, 163, 80, 0.05) 28px
  );
  border-bottom: 2px solid var(--gt-warn);
  color: var(--gt-text);
  font-size: 0.92rem;
  text-align: center;
  padding: 0.55rem 1rem;
  line-height: 1.35;
}
.dev-banner .fa-solid { color: var(--gt-warn); }
.dev-banner strong { color: #f0d59a; }

/* --- Trial banner --------------------------------------------------------- */
/* Three urgency tiers. Default = calm khaki gradient. ≤7 days = brass-bordered
   alert. ≤1 day = red urgency with a Subscribe CTA. */
.trial-banner {
  background: linear-gradient(90deg, var(--gt-accent-soft), transparent);
  color: var(--gt-text);
  border-bottom: 1px solid var(--gt-border);
  font-size: 0.95rem;
}
.trial-banner strong { color: var(--gt-accent); }

.trial-banner.trial-banner-warn {
  background: linear-gradient(90deg, var(--gt-accent-soft), var(--gt-accent-soft));
  border-top: 1px solid var(--gt-accent);
  border-bottom: 1px solid var(--gt-accent);
  font-weight: 500;
}
.trial-banner.trial-banner-warn strong { color: #f1bf80; }

.trial-banner.trial-banner-urgent {
  background: var(--gt-danger-soft);
  border-top: 2px solid var(--gt-danger);
  border-bottom: 2px solid var(--gt-danger);
  font-weight: 600;
  color: #f4cdbf;
}
.trial-banner.trial-banner-urgent strong { color: #f4cdbf; font-size: 1.1em; }
.trial-banner-cta {
  color: #f4cdbf;
  text-decoration: underline;
  font-weight: 600;
}
.trial-banner-cta:hover { color: #ffe5d8; }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  padding: 0.5rem 1.1rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 0.4rem;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.05s, box-shadow 0.15s;
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.0625rem;
  border-radius: 0.5rem;
}

.btn-sm {
  padding: 0.32rem 0.7rem;
  font-size: 0.875rem;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background-color: var(--gt-accent);
  border-color: var(--gt-accent);
  color: var(--gt-on-accent);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--gt-accent-hover);
  border-color: var(--gt-accent-hover);
  color: var(--gt-on-accent);
}
.btn-primary:active,
.btn-primary:focus:active {
  background-color: var(--gt-accent-dim) !important;
  border-color: var(--gt-accent-dim) !important;
  color: var(--gt-on-accent);
}

.btn-outline-primary {
  background-color: transparent;
  color: var(--gt-accent);
  border-color: var(--gt-accent);
}
.btn-outline-primary:hover {
  background-color: var(--gt-accent);
  border-color: var(--gt-accent);
  color: var(--gt-on-accent);
}

.btn-secondary,
.btn-outline-secondary {
  background-color: transparent;
  color: var(--gt-text);
  border-color: var(--gt-border-strong);
}
.btn-secondary:hover,
.btn-outline-secondary:hover {
  background-color: var(--gt-surface-3);
  border-color: var(--gt-border-strong);
  color: var(--gt-heading);
}

.btn-outline-danger {
  color: var(--gt-danger);
  border-color: var(--gt-danger);
  background-color: transparent;
}
.btn-outline-danger:hover {
  background-color: var(--gt-danger);
  color: var(--gt-on-accent);
}

.btn-link { color: var(--gt-accent); }
.btn-link:hover { color: var(--gt-accent-hover); }

.btn:focus,
.btn:active:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem var(--gt-accent-soft);
}

/* Keyboard-visible focus on interactive elements that have no Bootstrap focus
   ring of their own. :focus-visible only fires for keyboard navigation, so
   mouse/touch users don't see outlines on click. */
.navbar-toggler:focus-visible,
.nav-form-btn:focus-visible,
.gt-inline-trigger:focus-visible,
.gt-select-trigger:focus-visible,
.photo-tile-delete button:focus-visible,
tr[data-href]:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gt-accent);
  outline-offset: 2px;
}

/* "Nav form button" — used by the sign-out form in the navbar */
.nav-form-btn {
  border: 0;
  background: transparent;
  padding: 0.55rem 0.9rem;
  font-size: inherit;
  color: var(--gt-text-muted);
  font-weight: 500;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.nav-form-btn:hover {
  color: var(--gt-heading);
  background-color: rgba(236, 230, 214, 0.05);
}

/* --- Forms ---------------------------------------------------------------- */

.form-label {
  font-weight: 500;
  color: var(--gt-text);
  margin-bottom: 0.4rem;
}

.form-control,
.form-select {
  padding: 0.55rem 0.85rem;
  font-size: 1rem;
  background-color: var(--gt-surface-2);
  border: 1px solid var(--gt-border-strong);
  color: var(--gt-text);
  border-radius: 0.4rem;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--gt-surface-2);
  border-color: var(--gt-accent);
  color: var(--gt-text);
  box-shadow: 0 0 0 0.2rem var(--gt-accent-soft);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--gt-surface);
  color: var(--gt-text-muted);
}

.form-control::placeholder {
  color: var(--gt-text-dim);
  opacity: 1;
}

.form-control-lg,
.form-select-lg {
  padding: 0.75rem 1rem;
  font-size: 1.0625rem;
  border-radius: 0.5rem;
}

.form-check-input {
  background-color: var(--gt-surface-2);
  border-color: var(--gt-border-strong);
}
.form-check-input:checked {
  background-color: var(--gt-accent);
  border-color: var(--gt-accent);
}
.form-check-input:focus {
  border-color: var(--gt-accent);
  box-shadow: 0 0 0 0.2rem var(--gt-accent-soft);
}
.form-check-label { color: var(--gt-text); }

.form-text {
  color: var(--gt-text-muted);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.invalid-feedback { color: #ef9b85; }  /* brighter than --gt-danger so AA on dark bg */
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--gt-danger); }
.form-control.is-invalid:focus,
.form-select.is-invalid:focus { box-shadow: 0 0 0 0.2rem var(--gt-danger-soft); }

/* --- Tables --------------------------------------------------------------- */

.table {
  color: var(--gt-text);
  border-color: var(--gt-border);
  --bs-table-bg: transparent;
}

.table > :not(caption) > * > * {
  border-bottom-color: var(--gt-divider);
  padding: 0.7rem 0.75rem;
}

.table > thead > tr > th {
  color: var(--gt-text-muted);
  font-weight: 600;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: transparent;
  border-bottom: 1px solid var(--gt-border);
}

.table > tbody > tr:hover {
  background-color: rgba(236, 230, 214, 0.04);
}

.table-sm > :not(caption) > * > * { padding: 0.45rem 0.6rem; }

/* --- Cards ---------------------------------------------------------------- */

.card {
  background-color: var(--gt-surface);
  border: 1px solid var(--gt-border);
  border-radius: 0.6rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  color: var(--gt-text);
}

.card-body { padding: 1.1rem 1.25rem; }
.card .h3, .card .h4, .card .h5 { color: var(--gt-heading); }

/* --- Alerts --------------------------------------------------------------- */

.alert {
  border-radius: 0.45rem;
  border-width: 1px;
  font-size: 0.95rem;
}
.alert-danger    { background-color: var(--gt-danger-soft);  border-color: var(--gt-danger);  color: #f4cdbf; }
.alert-warning   { background-color: var(--gt-warn-soft);    border-color: var(--gt-warn);    color: #f0d59a; }
.alert-success   { background-color: var(--gt-success-soft); border-color: var(--gt-success); color: #d2e0bc; }
.alert-secondary { background-color: var(--gt-surface-2);    border-color: var(--gt-border);  color: var(--gt-text); }
.alert-info      { background-color: var(--gt-info-soft);    border-color: var(--gt-info);    color: #c9d8dc; }
.alert a { color: inherit; text-decoration: underline; }

/* --- Lists / dl ----------------------------------------------------------- */

dl.row dt { color: var(--gt-text-muted); font-weight: 500; }
dl.row dd { color: var(--gt-text); margin-bottom: 0.5rem; }

.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--gt-divider);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.feature-list li::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: var(--gt-accent);
  flex-shrink: 0;
}
.feature-list li:last-child { border-bottom: 0; }

/* --- Hero / privacy / login panels --------------------------------------- */

.privacy-block {
  background-color: var(--gt-surface);
  border: 1px solid var(--gt-border);
  border-left: 4px solid var(--gt-accent);
  border-radius: 0.5rem;
  padding: 1.4rem 1.6rem;
}

.login-card {
  background-color: var(--gt-surface);
  border: 1px solid var(--gt-border);
  border-radius: 0.6rem;
  padding: 1.6rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Dashboard / admin tiles */
.admin-tile,
.stat-tile {
  background-color: var(--gt-surface);
  border: 1px solid var(--gt-border);
  border-radius: 0.6rem;
  padding: 1.25rem 1.4rem;
  height: 100%;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.admin-tile:hover,
.stat-tile:hover {
  border-color: var(--gt-border-strong);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

a.admin-tile { color: var(--gt-text); }
a.admin-tile:hover {
  color: var(--gt-text);
  border-color: var(--gt-accent);
  transform: translateY(-2px);
  text-decoration: none;
}
a.admin-tile h2 { transition: color 0.15s; }
a.admin-tile:hover h2 { color: var(--gt-accent); }

.hub-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.5rem;
  background-color: var(--gt-accent-soft);
  color: var(--gt-accent);
  font-size: 1.3rem;
}

/* Page header: icon-tile + title + optional action button on the right.
   Used by every entity index/detail/form for a consistent landing rhythm. */
.page-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.page-header > h1,
.page-header > .page-title {
  margin: 0;
  flex-grow: 1;
}
.page-title {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--gt-heading);
  font-size: 1.75rem;
  line-height: 1.2;
}
.page-title-eyebrow {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--gt-text-muted);
  margin-bottom: 0.15rem;
}
.page-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.6rem;
  background-color: var(--gt-accent-soft);
  color: var(--gt-accent);
  font-size: 1.4rem;
  flex-shrink: 0;
}
.page-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--gt-text-muted);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  text-decoration: none;
}
.page-back:hover { color: var(--gt-accent); text-decoration: none; }

/* --- Detail page pattern -------------------------------------------------- */

/* Hero band: title + subtitle on the left, status badge + key stats on the right.
   Wraps on narrow screens; stats become inline pills. */
.detail-hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem 2rem;
  background-color: var(--gt-surface);
  background-image: linear-gradient(135deg, var(--gt-surface) 0%, var(--gt-surface-2) 100%);
  border: 1px solid var(--gt-border);
  border-radius: 0.7rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.detail-hero-titleblock { min-width: 0; }
.detail-hero-title {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 0.35rem 0;
  color: var(--gt-heading);
  line-height: 1.15;
}
.detail-hero-subtitle {
  color: var(--gt-text-muted);
  font-size: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  align-items: center;
}
.detail-hero-subtitle code {
  color: var(--gt-text);
  background-color: rgba(28, 27, 24, 0.55);
  border: 1px solid var(--gt-border);
  padding: 0.1rem 0.45rem;
  border-radius: 0.3rem;
  font-size: 0.85em;
}
.detail-hero-meta {
  display: flex;
  align-items: center;
  gap: 1.25rem 1.75rem;
  flex-wrap: wrap;
}
.detail-hero-stat .stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gt-text-muted);
  font-weight: 600;
  line-height: 1;
  margin-bottom: 0.3rem;
}
.detail-hero-stat .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gt-heading);
  line-height: 1;
}
.detail-hero-stat .stat-value.is-accent { color: var(--gt-accent); }
.detail-hero-stat .stat-value.is-dim    { color: var(--gt-text-muted); font-weight: 500; }
.detail-hero-stat .stat-sub {
  font-size: 0.78rem;
  color: var(--gt-text-muted);
  margin-top: 0.15rem;
}

/* Action button row (sits right under the hero) */
.detail-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }

/* Card-style section with a header bar */
.detail-section {
  background-color: var(--gt-surface);
  border: 1px solid var(--gt-border);
  border-radius: 0.6rem;
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.25rem;
}
.detail-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--gt-divider);
}
.detail-section-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gt-text-muted);
  font-weight: 600;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.detail-section-title .gt-icon { color: var(--gt-accent); font-size: 1.15em; }

/* Two-column spec grid; labels small uppercase, values larger */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 2rem;
  margin: 0;
}
@media (max-width: 640px) {
  .spec-grid { grid-template-columns: 1fr; gap: 0.85rem; }
}
.spec-grid .spec-row { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.spec-grid .spec-row.is-full { grid-column: 1 / -1; }
.spec-grid dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: var(--gt-text-muted);
  margin: 0;
}
.spec-grid dd {
  margin: 0;
  font-size: 1.02rem;
  color: var(--gt-heading);
  font-weight: 500;
  word-break: break-word;
}
.spec-grid dd.spec-empty { color: var(--gt-text-dim); font-weight: 400; }
.spec-grid dd code {
  background-color: rgba(28, 27, 24, 0.55);
  border: 1px solid var(--gt-border);
  padding: 0.12rem 0.45rem;
  border-radius: 0.3rem;
  font-size: 0.95em;
  color: var(--gt-text);
}
.spec-grid dd .spec-sub {
  display: block;
  font-size: 0.82rem;
  color: var(--gt-text-muted);
  font-weight: 400;
  margin-top: 0.1rem;
}

/* Icons inside buttons: tighten spacing slightly */
.btn .gt-icon { margin-right: 0; }
.btn > svg.gt-icon + span,
.btn > span + svg.gt-icon { /* no-op, the d-inline-flex gap handles it */ }

.hero-eyebrow {
  color: var(--gt-accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.display-5, .display-6 {
  color: var(--gt-heading);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.stat-tile .stat-label {
  color: var(--gt-text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.stat-tile .stat-value {
  color: var(--gt-heading);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 0.2rem;
  line-height: 1.1;
}
.stat-tile .stat-value.is-accent { color: var(--gt-accent); }
.stat-tile .stat-sub {
  color: var(--gt-text-muted);
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

/* --- Badges --------------------------------------------------------------- */

.gt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.22rem 0.6rem;
  border-radius: 0.3rem;
  border: 1px solid transparent;
  background-color: var(--gt-surface-2);
  color: var(--gt-text);
  white-space: nowrap;
  text-transform: uppercase;
}
.gt-badge .status-glyph { font-size: 0.85em; }

/* Account/role badges. Text colors lifted to clear ~5-7:1 contrast against
   their dark, semi-transparent backgrounds (older-user audience skews to AAA). */
.gt-badge.is-active   { background-color: var(--gt-success-soft); border-color: var(--gt-success); color: #d2e0bc; }
.gt-badge.is-trial    { background-color: var(--gt-warn-soft);    border-color: var(--gt-warn);    color: #f0d59a; }
.gt-badge.is-expired  { background-color: var(--gt-surface-2);    border-color: var(--gt-border-strong); color: #cfc8b7; }
.gt-badge.is-admin    { background-color: var(--gt-accent-soft);  border-color: var(--gt-accent);  color: #f1bf80; }
.gt-badge.is-2fa      { background-color: var(--gt-info-soft);    border-color: var(--gt-info);    color: #c9d8dc; }
.gt-badge.is-locked   { background-color: var(--gt-danger-soft);  border-color: var(--gt-danger);  color: #f4cdbf; }

/* Gun status badges. Same lift on the muted ones (destroyed, loaned). */
.gt-badge.status-active    { background-color: var(--gt-od-soft);     border-color: var(--gt-od);     color: #cdd6a2; }
.gt-badge.status-sold      { background-color: var(--gt-info-soft);   border-color: var(--gt-info);   color: #c9d8dc; }
.gt-badge.status-lost      { background-color: var(--gt-warn-soft);   border-color: var(--gt-warn);   color: #f0d59a; }
.gt-badge.status-stolen    { background-color: var(--gt-danger-soft); border-color: var(--gt-danger); color: #f4cdbf; }
.gt-badge.status-loaned    { background-color: var(--gt-accent-soft); border-color: var(--gt-accent); color: #f1bf80; }
.gt-badge.status-destroyed { background-color: var(--gt-surface-3);   border-color: var(--gt-border-strong); color: #cfc8b7; }
.gt-badge.status-other     { background-color: var(--gt-surface-2);   border-color: var(--gt-border); color: var(--gt-text); }

/* Attention badge for maintenance alerts (cleaning due, stale valuation).
   Same warn treatment as status-lost, but decoupled from gun-status semantics
   so restyling "Lost" never silently restyles maintenance alerts. */
.gt-badge.is-due           { background-color: var(--gt-warn-soft);   border-color: var(--gt-warn);   color: #f0d59a; }

/* Status action buttons */
.btn-status { background-color: transparent; border: 1px solid; font-weight: 500; }
.btn-status-active       { border-color: var(--gt-od);     color: #cdd6a2; }
.btn-status-active:hover { background-color: var(--gt-od-soft); color: #e2e9c3; }
.btn-status-sold         { border-color: var(--gt-info);   color: #c9d8dc; }
.btn-status-sold:hover   { background-color: var(--gt-info-soft); color: #dee9ed; }
.btn-status-lost         { border-color: var(--gt-warn);   color: #f0d59a; }
.btn-status-lost:hover   { background-color: var(--gt-warn-soft); color: #f8e6b6; }
.btn-status-stolen       { border-color: var(--gt-danger); color: #f4cdbf; }
.btn-status-stolen:hover { background-color: var(--gt-danger-soft); color: #fbdcd0; }
.btn-status-loaned       { border-color: var(--gt-accent); color: var(--gt-accent-hover); }
.btn-status-loaned:hover { background-color: var(--gt-accent-soft); color: #e8b27a; }
.btn-status-destroyed       { border-color: var(--gt-border-strong); color: var(--gt-text-muted); }
.btn-status-destroyed:hover { background-color: var(--gt-surface-3); color: var(--gt-text); }

/* --- Empty state --------------------------------------------------------- */

.empty-state {
  background-color: var(--gt-surface);
  border: 1px dashed var(--gt-border-strong);
  border-radius: 0.6rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--gt-text);
}
.empty-state .lead { color: var(--gt-heading); font-weight: 600; }
.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: var(--gt-accent-soft);
  color: var(--gt-accent);
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

/* --- Gun / Accessory cards (collection grid) ---------------------------- */

.gun-card {
  display: block;
  background-color: var(--gt-surface);
  border: 1px solid var(--gt-border);
  border-radius: 0.6rem;
  overflow: hidden;
  text-decoration: none;
  color: var(--gt-text);
  height: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.gun-card:hover {
  border-color: var(--gt-accent);
  color: var(--gt-text);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  text-decoration: none;
}

.gun-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--gt-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--gt-border);
  overflow: hidden;
}
.gun-card-image img { width: 100%; height: 100%; object-fit: cover; }
.gun-card-body { padding: 0.95rem 1.1rem; }
.gun-card-body h2 { color: var(--gt-heading); }

/* --- Compact horizontal card variant (collection pages) ------------------
   Used by the gun + accessory collection lists. Same hover/border affordance
   as .gun-card; horizontal layout so dozens of items scan quickly. */
.gun-card.gun-card-compact {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100%;
}
.gun-card-compact .gun-card-image {
  width: 110px;
  min-width: 110px;
  aspect-ratio: auto;
  border-bottom: 0;
  border-right: 1px solid var(--gt-border);
}
.gun-card-compact .gun-card-body {
  flex: 1;
  min-width: 0;                 /* lets text-truncate work inside the flex item */
  padding: 0.6rem 0.85rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.4rem;
}
.gun-card-compact .gun-card-body h2 {
  font-size: 1rem;
}

/* --- Status / sort selects ----------------------------------------------- */
/* Status labels like "Loaned out" / "Destroyed" need room to render without
   ellipsis. min-width sets the floor; max-width caps it on wide screens so
   the row stays balanced. */
.gt-status-select { min-width: 9rem; }

/* --- Inline-edit cells --------------------------------------------------- */
/* See site.js for behavior. The view + form swap is purely a class toggle. */
.gt-inline-edit-cell .gt-inline-view {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.gt-inline-edit-cell .gt-inline-form {
  display: none;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}
.gt-inline-edit-cell.is-editing .gt-inline-view { display: none; }
.gt-inline-edit-cell.is-editing .gt-inline-form { display: inline-flex; }

.gt-inline-trigger {
  background: transparent;
  border: 0;
  color: var(--gt-text-muted);
  padding: 0.15rem 0.3rem;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85em;
  transition: color 0.15s, background-color 0.15s;
}
.gt-inline-trigger:hover {
  color: var(--gt-accent);
  background-color: var(--gt-accent-soft);
}
.gt-inline-trigger:focus-visible {
  outline: 2px solid var(--gt-accent);
  outline-offset: 1px;
}

.gt-inline-form input,
.gt-inline-form select {
  min-width: 7rem;
  max-width: 18rem;
}

/* --- Photos -------------------------------------------------------------- */

.photo-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: var(--gt-surface-2);
  border: 1px solid var(--gt-border);
  border-radius: 0.4rem;
  overflow: hidden;
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile-delete { position: absolute; top: 0.4rem; right: 0.4rem; }
.photo-tile-delete button {
  padding: 0 0.45rem;
  line-height: 1.4;
  background-color: rgba(28, 27, 24, 0.85);
  color: var(--gt-text);
  border-color: var(--gt-border-strong);
}
.photo-tile-delete button:hover {
  background-color: var(--gt-danger);
  color: var(--gt-heading);
}

/* --- Admin / forms section labels ---------------------------------------- */

.admin-page table.table { background-color: transparent; }
.admin-page .admin-fields th { width: 12rem; font-weight: 500; color: var(--gt-text-muted); }
.admin-page .admin-actions th { width: 8rem; font-weight: 500; color: var(--gt-text-muted); }

/* --- Footer -------------------------------------------------------------- */

.footer {
  font-size: 0.9rem;
  background-color: transparent;
  color: var(--gt-text-muted);  /* not --gt-text-dim: AA 5.7:1 vs 3.1:1 */
  border-top: 1px solid var(--gt-border) !important;
  padding: 1.4rem 0;
}
.footer a { color: var(--gt-text-muted); }
.footer a:hover { color: var(--gt-accent); }

/* --- Utility ------------------------------------------------------------- */

.bg-light { background-color: var(--gt-surface-3) !important; color: var(--gt-text) !important; }
.bg-body-tertiary { background-color: var(--gt-surface-2) !important; color: var(--gt-text); }
.text-dark { color: var(--gt-text) !important; }
.border-top { border-top-color: var(--gt-border) !important; }
.border-bottom { border-bottom-color: var(--gt-border) !important; }

/* Subtle glow ring */
.gt-glow {
  box-shadow: 0 0 0 1px var(--gt-accent-soft), 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* --- Dashboard widgets --------------------------------------------------- */

/* Compact, divider-separated list used by attention callouts and recent activity */
.dash-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dash-list li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--gt-divider);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
}
.dash-list li:last-child { border-bottom: 0; }
.dash-list li > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-list .item-meta {
  color: var(--gt-text-muted);
  font-size: 0.82rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.dash-list a { color: var(--gt-text); text-decoration: none; }
.dash-list a:hover { color: var(--gt-accent); text-decoration: none; }

/* "Needs attention" callout card */
.dash-attention {
  background-color: var(--gt-surface);
  border: 1px solid var(--gt-border);
  border-left: 3px solid var(--gt-warn);
  border-radius: 0.6rem;
  padding: 1rem 1.2rem;
  height: 100%;
}
.dash-attention .attention-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--gt-divider);
}
.dash-attention .attention-count {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--gt-heading);
  line-height: 1;
}
.dash-attention .attention-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gt-text-muted);
  font-weight: 600;
  margin-top: 0.15rem;
}

/* --- Segmented mode-toggle (range-trip ammo entry, etc.) ----------------- */

.ammo-mode-toggle .btn { font-weight: 500; }
.ammo-mode-toggle .btn.active {
  background-color: var(--gt-accent-soft);
  border-color: var(--gt-accent);
  color: var(--gt-accent-hover);
  z-index: 1;
}
.ammo-mode-toggle .btn.active:hover {
  background-color: var(--gt-accent-soft);
  border-color: var(--gt-accent);
  color: var(--gt-accent-hover);
}

/* --- Searchable select ---------------------------------------------------- */

.gt-select {
  position: relative;
  display: block;
  width: 100%;
}
/* The native <select> stays in the DOM so the form posts, but visually hidden
   under the trigger. We use opacity + pointer-events:none rather than display:none
   so validation focus + screen readers still see it. */
.gt-select-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.gt-select-trigger {
  width: 100%;
  text-align: left;
  cursor: pointer;
  background-color: var(--gt-surface-2);
  color: var(--gt-text);
  position: relative;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 2.25rem; /* room for the form-select caret */
}
.gt-select-trigger.is-placeholder { color: var(--gt-text-dim); }
.gt-select-trigger:focus,
.gt-select.is-open .gt-select-trigger {
  border-color: var(--gt-accent);
  box-shadow: 0 0 0 0.2rem var(--gt-accent-soft);
  outline: none;
}
.gt-select.is-invalid .gt-select-trigger { border-color: var(--gt-danger); }
.gt-select.is-invalid.is-open .gt-select-trigger { box-shadow: 0 0 0 0.2rem var(--gt-danger-soft); }

.gt-select-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1050;
  background-color: var(--gt-surface);
  border: 1px solid var(--gt-border-strong);
  border-radius: 0.5rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  max-height: 18rem;
}

.gt-select-search {
  width: 100%;
  padding: 0.45rem 0.7rem;
  background-color: var(--gt-bg);
  border: 1px solid var(--gt-border);
  border-radius: 0.35rem;
  color: var(--gt-text);
  font-size: 0.95rem;
  margin-bottom: 0.45rem;
}
.gt-select-search::placeholder { color: var(--gt-text-dim); }
.gt-select-search:focus {
  outline: none;
  border-color: var(--gt-accent);
  box-shadow: 0 0 0 0.15rem var(--gt-accent-soft);
}

.gt-select-options {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 14rem;
}
.gt-select-option {
  padding: 0.5rem 0.7rem;
  border-radius: 0.35rem;
  cursor: pointer;
  color: var(--gt-text);
  font-size: 0.95rem;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gt-select-option.is-active {
  background-color: var(--gt-surface-3);
  color: var(--gt-heading);
}
.gt-select-option.is-selected {
  color: var(--gt-accent);
  font-weight: 500;
}
.gt-select-option.is-selected.is-active {
  background-color: var(--gt-accent-soft);
  color: var(--gt-accent-hover);
}
.gt-select-option.is-disabled {
  color: var(--gt-text-dim);
  cursor: not-allowed;
}
.gt-select-option.is-placeholder {
  color: var(--gt-text-muted);
  font-style: italic;
}
.gt-select-empty {
  padding: 0.6rem 0.7rem;
  color: var(--gt-text-muted);
  font-size: 0.9rem;
  text-align: center;
}

/* --- Confirmation dialog ------------------------------------------------- */

.gt-confirm {
  background-color: var(--gt-surface);
  color: var(--gt-text);
  border: 1px solid var(--gt-border-strong);
  border-radius: 0.7rem;
  padding: 0;
  max-width: 32rem;
  width: 92vw;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.gt-confirm::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.gt-confirm form { margin: 0; padding: 1.5rem 1.5rem 1.25rem 1.5rem; }
.gt-confirm-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.6rem 0;
  color: var(--gt-heading);
  letter-spacing: -0.01em;
}
.gt-confirm-body {
  margin: 0 0 1.25rem 0;
  color: var(--gt-text);
  font-size: 0.95rem;
  line-height: 1.55;
}
.gt-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.gt-confirm-actions .btn:focus { box-shadow: 0 0 0 0.2rem var(--gt-accent-soft); }

/* --- Date / time picker indicators (dark mode) --------------------------- */
/* The default Webkit picker icon is dark and vanishes against our dark form
   controls. Invert so it stays visible. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85) hue-rotate(180deg);
  cursor: pointer;
  opacity: 0.85;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Scrollbar — dark, brass on hover */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gt-bg); }
::-webkit-scrollbar-thumb {
  background: var(--gt-surface-3);
  border-radius: 6px;
  border: 2px solid var(--gt-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--gt-accent-dim); }

/* --- Icons --------------------------------------------------------------- */
/* FontAwesome icons. Size follows surrounding font-size; color inherits.
   `.gt-icon` is the application-side class kept on every icon element so
   existing selectors like `.page-title-icon .gt-icon` still target it. */
.gt-icon {
  display: inline-block;
  line-height: 1;
  vertical-align: -0.1em;
  flex-shrink: 0;
  text-decoration: none;
}
.gt-icon-lg { font-size: 1.25em; }
.gt-icon-xl { font-size: 1.75em; }

/* When a link contains an icon, the link's own underline is drawn across
   the icon's bounding box (text-decoration on the parent applies through
   inline-block descendants in most browsers). Strip the underline from the
   link itself and apply it only to the text span — the icon stays clean. */
a:has(.gt-icon):hover,
a:has(.gt-icon):focus-visible,
.btn:has(.gt-icon):hover,
.btn:has(.gt-icon):focus-visible {
  text-decoration: none;
}
a:has(.gt-icon):hover > span,
a:has(.gt-icon):focus-visible > span {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Lightbox ------------------------------------------------------------ */
/* Vanilla overlay shown when a photo tile's image is clicked. Keyboard nav
   (Esc/Arrow), prev/next buttons, and a counter when the gallery has multiple
   photos. JS is in site.js. */
.gt-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.gt-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.gt-lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border: 1px solid var(--gt-border-strong);
  background: var(--gt-bg);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
}
.gt-lightbox-close,
.gt-lightbox-prev,
.gt-lightbox-next {
  position: absolute;
  background: transparent;
  border: 0;
  color: var(--gt-text);
  cursor: pointer;
  font-size: 1.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  opacity: 0.85;
  transition: opacity 0.15s, background-color 0.15s;
}
.gt-lightbox-close { top: 1rem; right: 1rem; font-size: 1.75rem; }
.gt-lightbox-prev { left: 0.75rem; top: 50%; transform: translateY(-50%); font-size: 2.5rem; line-height: 1; }
.gt-lightbox-next { right: 0.75rem; top: 50%; transform: translateY(-50%); font-size: 2.5rem; line-height: 1; }
.gt-lightbox-close:hover,
.gt-lightbox-prev:hover,
.gt-lightbox-next:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.08);
}
.gt-lightbox-counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gt-text);
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.45);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  opacity: 0.85;
}
.photo-tile img { cursor: zoom-in; }

/* --- Photo upload error banner ------------------------------------------ */
/* Pinned brass-bordered block listing per-file failures from a photo upload.
   Fades out via .gt-auto-hide (JS toggles `is-hiding`) after 10 seconds.
   Close button dismisses manually. */
.photo-upload-errors {
  background-color: var(--gt-accent-soft);
  border: 1px solid var(--gt-accent);
  border-left-width: 4px;
  color: var(--gt-text);
  padding: 0.85rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.photo-upload-errors i,
.photo-upload-errors .fa-solid { color: var(--gt-accent); }
.photo-upload-errors.is-hiding {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
.photo-upload-errors .btn-close {
  filter: invert(0.9);
  opacity: 0.7;
}
.photo-upload-errors .btn-close:hover { opacity: 1; }

/* --- "POP" alerts -------------------------------------------------------- */
/* Brass-tinted callout for instructions that need to land. Used on report
   landing/forms where we want the user to actually read the line. */
.alert-brass {
  background-color: var(--gt-accent-soft);
  border: 1px solid var(--gt-accent);
  border-left-width: 4px;
  color: var(--gt-text);
  padding: 0.85rem 1rem;
  border-radius: 4px;
}
.alert-brass i,
.alert-brass .fa-solid { color: var(--gt-accent); }

/* --- Clickable table rows ------------------------------------------------ */
/* Rows in a <table class="gt-row-link"> behave like links — pointer cursor,
   hover tint, focus ring for keyboard nav. The actual nav is wired in site.js. */
table.gt-row-link tbody tr[data-href] {
  cursor: pointer;
  transition: background-color 80ms ease;
}
table.gt-row-link tbody tr[data-href]:hover {
  background-color: var(--gt-accent-soft);
}
table.gt-row-link tbody tr[data-href]:focus-visible {
  outline: 2px solid var(--gt-accent);
  outline-offset: -2px;
}

/* ---------- Legal documents (privacy policy, terms of service) ----------
   Constrain measure for readability; keep headings calm and consistent.   */
.legal-doc {
  max-width: 76ch;
  margin: 0 auto;
  line-height: 1.65;
  color: var(--gt-text);
}
.legal-doc .legal-section {
  margin-top: 2rem;
}
.legal-doc .legal-section h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gt-accent);
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--gt-border);
}
.legal-doc .legal-section h3 {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--gt-text);
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
}
.legal-doc p,
.legal-doc ul {
  margin-bottom: 1rem;
}
.legal-doc ul {
  padding-left: 1.4rem;
}
.legal-doc li {
  margin-bottom: 0.35rem;
}
.legal-doc code {
  background-color: var(--gt-surface);
  color: var(--gt-accent);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.92em;
}
.legal-doc a {
  color: var(--gt-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-doc a:hover { filter: brightness(1.15); }

/* ---- Bulk-add landscape hint (mobile portrait only) -------------------- */
/* Hidden by default via Bootstrap .d-none. CSS flips it on for narrow
   portrait viewports, where the bulk-add table truncates columns badly. */
@media (max-width: 575px) and (orientation: portrait) {
  .bulk-rotate-hint.d-none { display: block !important; }
}

/* ---- Admin users table row tints --------------------------------------- */
/* Subtle per-status background tint on the users list so admins can scan
   for problem accounts (payment failed) and special cases (Free Account)
   without reading every Status column. Uses Bootstrap table CSS variables
   so .table-hover still works correctly on top of the tint. */
.admin-row-active    { --bs-table-bg: rgba(122, 157, 90, 0.10); }   /* gt-success */
.admin-row-trial     { --bs-table-bg: rgba(201, 138, 58, 0.08); }   /* gt-accent (brass), softer */
.admin-row-free      { --bs-table-bg: rgba(201, 138, 58, 0.20); }   /* gt-accent (brass), stronger to distinguish from trial */
.admin-row-pastdue   { --bs-table-bg: rgba(194, 90, 63, 0.18); }    /* gt-danger */
.admin-row-expired   { --bs-table-bg: rgba(160, 156, 142, 0.08); }  /* gt-muted */

/* Free Account also gets a left-border accent because brass is reused for trial.
   Strong enough to be unambiguous on a wide table where the row tint alone
   may be hard to distinguish at a glance. */
.admin-row-free      { box-shadow: inset 3px 0 0 0 var(--gt-accent); }
.admin-row-pastdue   { box-shadow: inset 3px 0 0 0 var(--gt-danger); }

/* Legend strip above the table. Mirrors the row tints in chip form so the
   color coding is self-documenting. */
.admin-row-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.admin-row-legend .legend-chip {
  font-size: 0.78rem;
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  border: 1px solid var(--gt-border);
  background-color: var(--bs-table-bg, var(--gt-surface));
  color: var(--gt-text);
}
.admin-row-legend .legend-chip.admin-row-free,
.admin-row-legend .legend-chip.admin-row-pastdue {
  box-shadow: none; /* the inset accent doesn't translate to chips, drop it */
}

/* ---- Mobile touch targets ----------------------------------------------- */
/* The audience skews older. On small screens, bump the smallest interactive
   elements toward the 44px minimum without changing the desktop density. */
@media (max-width: 575px) {
  .btn-sm { padding: 0.55rem 0.95rem; }
  .gt-inline-trigger { padding: 0.45rem 0.65rem; }
  .photo-tile-delete button { padding: 0.3rem 0.65rem; }
}

/* ---- Shared utility classes (extracted from repeated inline styles) ------ */

/* Free-text fields (notes, descriptions) rendered with author line breaks. */
.text-prewrap { white-space: pre-wrap; }

/* De-emphasized count suffix inside a section title, e.g. "Photos  3 / 20".
   Resets the title's uppercase treatment for the suffix portion. */
.section-title-suffix {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin-left: 0.4rem;
}

/* Photo-upload input group: capped on desktop, full width on phones. */
.form-photo-upload { max-width: 24rem; }
@media (max-width: 575px) {
  .form-photo-upload { max-width: 100%; }
}

/* Danger-zone section treatment (account delete, destructive admin panels). */
.detail-section.detail-section-danger { border-color: var(--gt-danger); }
.detail-section-danger > .detail-section-header { border-bottom-color: var(--gt-danger-soft); }
.detail-section-danger > .detail-section-header > .detail-section-title { color: var(--gt-danger); }

/* ---- Anonymous landing page --------------------------------------------- */

.landing-hub-icon { font-size: 1.4rem; }

.landing-feature {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  background-color: var(--gt-surface);
  border: 1px solid var(--gt-border);
  border-radius: 0.6rem;
  padding: 1rem;
  height: 100%;
}
.landing-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.5rem;
  background-color: var(--gt-accent-soft);
  color: var(--gt-accent);
  font-size: 1.05rem;
}
.landing-features .col-sm-6 { display: flex; }

.landing-pricing {
  background-color: var(--gt-surface);
  border: 1px solid var(--gt-accent);
  border-radius: 0.6rem;
  padding: 1.25rem 1.5rem;
}
.landing-price {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gt-heading);
  line-height: 1;
}

/* ---- Printable report — declared-values section ------------------------ */
/* Keep the values block together when the browser paginates for print. */
.report-values-section {
  page-break-inside: avoid;
  break-inside: avoid;
  page-break-before: auto;
  margin-top: 1.25rem;
}
.report-values-section .values-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 1.5rem;
  margin-bottom: 0.75rem;
}
.report-values-section .values-grid dt {
  font-weight: 600;
  color: var(--gt-text);
}
.report-values-section .values-grid dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.report-values-section .values-missing {
  margin-top: 0.75rem;
}
.report-values-section .values-missing h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.report-values-section .values-missing ul {
  padding-left: 1.2rem;
  margin-bottom: 0;
}