/*--------------------------------------------------------------
# LFJ Water brand theme
# Every brand color used anywhere in the app traces back to the
# tokens below - change the palette here, nothing else.
--------------------------------------------------------------*/
:root {
  --brand-primary: #204882;
  --brand-primary-rgb: 32, 72, 130;
  --brand-primary-hover: #16335f;
  --brand-primary-tint: #eaf1f8;
  --brand-primary-muted: #51678f;

  --brand-accent: #9ed3db;
  --brand-accent-rgb: 158, 211, 219;
  --brand-accent-tint: #eef8f9;
}

/* Bootstrap semantic tokens - drives bg-primary, text-primary,
   link-primary, alert-primary, badge bg-primary, border-primary, etc. */
:root,
[data-bs-theme="light"] {
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);
  --bs-primary-text-emphasis: var(--brand-primary-hover);
  --bs-primary-bg-subtle: var(--brand-primary-tint);
  --bs-primary-border-subtle: var(--brand-accent);
  --bs-link-color: var(--brand-primary);
  --bs-link-color-rgb: var(--brand-primary-rgb);
  --bs-link-hover-color: var(--brand-primary-hover);
}

/* .btn-primary / .btn-outline-primary bake literal colors into their own
   component-scoped variables in the compiled Bootstrap CSS, so they need
   a direct override rather than inheriting --bs-primary above. */
.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary-hover);
  --bs-btn-hover-border-color: var(--brand-primary-hover);
  --bs-btn-active-bg: var(--brand-primary-hover);
  --bs-btn-active-border-color: var(--brand-primary-hover);
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
  --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-bg: var(--brand-primary);
  --bs-btn-active-border-color: var(--brand-primary);
  --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}

/* The template's own chrome (links, sidebar, headings, dashboard
   numbers, active-nav highlight) is retokenized in style.css to
   reference these variables directly - see the "brand token"
   replacements there. */

/* Accent color gets a real, deliberate presence: headers every data
   table in the app (new - the template didn't style thead at all). */
.table > thead {
  background-color: var(--brand-accent-tint);
}

.table > thead th {
  color: var(--brand-primary);
  border-color: var(--brand-accent);
}

/* Highlights any row carrying a comment, across every recent-log table
   in the app, so it's visible at a glance without opening anything. */
.table > tbody > tr.row-has-note > * {
  background-color: var(--brand-accent-tint) !important;
}

/* Dashboard summary cards that open a breakdown modal on click. */
.card.card-clickable {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card.card-clickable:hover,
.card.card-clickable:focus-visible {
  box-shadow: 0 0.5rem 1rem rgba(var(--brand-primary-rgb), 0.15);
  transform: translateY(-2px);
}

.card.card-clickable:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}