/* ============================================================
   Shared utility / framework-compat layer
   ============================================================
   No Bootstrap is loaded anywhere in this app, yet templates use a
   handful of Bootstrap utility and component class names. These were
   defined in NO stylesheet and NO inline <style>, so they silently
   rendered unstyled in every theme. This file defines them once,
   using each theme's own custom properties, so they adapt per theme.

   Everything here is theme-agnostic on purpose: it must not encode a
   palette. Colour comes from the --info / --success / --danger /
   --primary-color tokens the themes already define.

   Loaded last in every base_*.html so theme CSS keeps precedence.
   ============================================================ */

/* Spacing (Bootstrap .p-*) */
.p-4 {
  padding: 1.5rem;
}

.p-5 {
  padding: 3rem;
}

/* Checkbox / radio rows (Bootstrap .form-check-*) */
.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.form-check-input {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--primary-color, #0066cc);
  cursor: pointer;
}

.form-check-label {
  margin: 0;
  font-size: inherit;
  line-height: 1.4;
  cursor: pointer;
}

/* Outline button variant */
.btn-outline-info {
  background: transparent;
  color: var(--info, var(--primary-color, #0066cc));
  border: 1px solid currentColor;
}

.btn-outline-info:hover {
  background: var(--info, var(--primary-color, #0066cc));
  color: var(--bg-primary, #ffffff);
}

/* Table helpers */
.align-middle {
  vertical-align: middle;
}

.table-hover tbody tr:hover {
  background-color: var(--color-bg-tertiary, var(--bg-tertiary, rgba(0, 0, 0, 0.04)));
}

/* Elevation */
.shadow {
  box-shadow: var(--shadow-md, 0 4px 10px rgba(0, 0, 0, 0.2));
}

.shadow-sm {
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.12));
}

.shadow-none {
  box-shadow: none;
}

/* ============================================================
   Bootstrap utility + variant layer
   ============================================================
   Second pass. Measured by extracting every class token from every
   template and testing each against all stylesheets plus all inline
   <style> blocks. These were the remainder that appeared nowhere.

   Deliberately NOT implemented: the col-* / offset-* grid. .row in
   lh-2026-design.css is only `gap` with no flex or negative margins,
   so there is no grid to hang columns off. The ~12 col-* usages stay
   unstyled rather than half-working; fixing that needs a real grid
   decision, not a shim.

   House rule: this file only fills genuine gaps, it never overrides.
   A collision check (every class here vs every other stylesheet)
   removed 13 utilities that themes already define with their own
   --spacing-* tokens - lh-2026 sets .mt-3 to --spacing-lg (24px), so a
   hardcoded 1rem here would have silently changed it. The three
   overlaps that remain (.form-check, .form-check-input,
   .btn-outline-info) are needed on the 90+ pages that do NOT load
   ticket-detail.css, where those same names happen to be defined.
   ============================================================ */

/* ---------- Spacing (Bootstrap $spacer scale) ---------- */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-5 { padding: 3rem; }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-5 { padding-left: 3rem; padding-right: 3rem; }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }
.pl-2 { padding-left: 0.5rem; }
.pr-2 { padding-right: 0.5rem; }

.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-md-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.ms-1 { margin-left: 0.25rem; }
.ms-2 { margin-left: 0.5rem; }
.ms-3 { margin-left: 1rem; }
.me-1 { margin-right: 0.25rem; }
.me-2 { margin-right: 0.5rem; }
.me-3 { margin-right: 1rem; }
.me-auto { margin-right: auto; }
.ml-1 { margin-left: 0.25rem; }
.ml-3 { margin-left: 1rem; }
.ml-auto { margin-left: auto; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- Typography ---------- */
.fw-light { font-weight: 300; }
.fw-normal { font-weight: 400; }
.fw-bold { font-weight: 700; }
.font-weight-bold { font-weight: 700; }
.font-weight-normal { font-weight: 400; }
.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.text-decoration-none { text-decoration: none; }

.fs-1 { font-size: 2.5rem; }
.fs-2 { font-size: 2rem; }
.fs-3 { font-size: 1.75rem; }
.fs-4 { font-size: 1.5rem; }
.fs-5 { font-size: 1.25rem; }
.fs-6 { font-size: 1rem; }

.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0 0 0.5rem;
  font-weight: 600;
  line-height: 1.25;
}
.h1 { font-size: 2.25rem; }
.h2 { font-size: 1.75rem; }
.h3 { font-size: 1.5rem; }
.h4 { font-size: 1.25rem; }
.h5 { font-size: 1.1rem; }
.h6 { font-size: 1rem; }

small, .small { font-size: 0.875em; }

/* ---------- Text colour ---------- */
.text-white { color: #fff; }
.text-black { color: #000; }
.text-start { text-align: left; }
.text-end { text-align: right; }
.text-md-end { text-align: right; }
.text-md-start { text-align: left; }

/* ---------- Backgrounds ---------- */
.bg-primary { background-color: var(--primary-color, #0066cc); color: #fff; }
.bg-light { background-color: var(--color-bg-secondary, #f8f9fa); }
.bg-dark { background-color: var(--color-bg-tertiary, #343a46); color: #fff; }
.bg-white { background-color: #fff; }
.bg-transparent { background-color: transparent; }

/* ---------- Borders / shape ---------- */
.border { border: 1px solid var(--border-color, #dee2e6); }
.border-0 { border: 0; }
.border-top { border-top: 1px solid var(--border-color, #dee2e6); }
.border-bottom { border-bottom: 1px solid var(--border-color, #dee2e6); }
.rounded { border-radius: var(--radius-sm, 4px); }
.rounded-0 { border-radius: 0; }
.rounded-circle { border-radius: 50%; }

/* ---------- Flex / layout ---------- */
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-none { display: none; }

.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1 1 0%; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.align-self-start { align-self: flex-start; }
.align-self-center { align-self: center; }
.align-self-end { align-self: flex-end; }
.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.h-100 { height: 100%; }

/* Gap for flex/grid children */
.g-0 { gap: 0; }
.g-1 { gap: 0.25rem; }
.g-2 { gap: 0.5rem; }
.g-3 { gap: 1rem; }
.g-4 { gap: 1.5rem; }
.g-5 { gap: 3rem; }

/* ---------- Button variants ---------- */
.btn-outline-primary {
  background: transparent;
  color: var(--primary-color, #0066cc);
  border: 1px solid currentColor;
}

.btn-outline-primary:hover {
  background: var(--primary-color, #0066cc);
  color: var(--bg-primary, #fff);
}

.btn-outline-secondary {
  background: transparent;
  color: var(--text-secondary, #6c757d);
  border: 1px solid currentColor;
}

.btn-outline-secondary:hover {
  background: var(--color-bg-tertiary, #6c757d);
  color: var(--text-primary, #fff);
}

.btn-info {
  background: var(--info, var(--primary-color, #0066cc));
  color: #fff;
  border: 1px solid transparent;
}

.btn-info:hover {
  filter: brightness(1.1);
}

/* ---------- Form helpers ---------- */
.form-text {
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--color-text-muted, #6c757d);
}

.form-select,
.form-select-sm,
.form-select-lg {
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text-primary, #212529);
  background-color: var(--bg-input, var(--bg-primary, #fff));
  border: 1px solid var(--border-color, #ced4da);
  border-radius: var(--radius-sm, 4px);
}

.form-select-sm { padding: 0.2rem 0.5rem; font-size: 0.875rem; }
.form-select-lg { padding: 0.5rem 1rem; font-size: 1.125rem; }

/* ---------- Table variants ---------- */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--color-bg-tertiary, rgba(0, 0, 0, 0.03));
}

.table-light {
  background-color: var(--color-bg-secondary, #f8f9fa);
  color: var(--text-primary, #212529);
}

/* ---------- Progress ---------- */
.progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  animation: compat-progress-stripes 1s linear infinite;
}

@keyframes compat-progress-stripes {
  from { background-position: 1rem 0; }
  to { background-position: 0 0; }
}

/* Invoice totals block (Bootstrap .totals-row / .totals-card /
   .table-borderless). Used by invoice_create.html and by the line-item editor
   on invoice_detail.html; previously undefined, so both totals tables rendered
   as unbordered left-aligned plain text. */
.totals-row {
  display: flex;
  justify-content: flex-end;
  margin: 1rem 0;
}

.totals-card {
  min-width: 18rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-color, rgba(128, 128, 128, 0.35));
  border-radius: 6px;
  background: var(--card-bg, rgba(128, 128, 128, 0.06));
}

.table-borderless,
.table-borderless > thead > tr > th,
.table-borderless > tbody > tr > td,
.table-borderless > tfoot > tr > td {
  border: 0;
}

.table-borderless > thead > tr > th,
.table-borderless > tbody > tr > td {
  padding: 0.35rem 0.5rem;
}