/* Simple CRM — application stylesheet.
   Layered on top of Bootstrap 5.3; overrides live here, never inline. */

:root {
  --crm-accent: #2a78d6;
  --crm-accent-subtle: #eaf2fc;
  --crm-radius: 0.5rem;
  --crm-border: rgba(11, 11, 11, 0.08);
  --crm-shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.05);
  --crm-shadow: 0 1px 3px rgba(11, 11, 11, 0.07), 0 4px 12px rgba(11, 11, 11, 0.04);
}

/* Buttons and links pick up the accent */
.btn-primary {
  --bs-btn-bg: var(--crm-accent);
  --bs-btn-border-color: var(--crm-accent);
  --bs-btn-hover-bg: #2266bb;
  --bs-btn-hover-border-color: #2266bb;
  --bs-btn-active-bg: #1d5aa7;
  --bs-btn-active-border-color: #1d5aa7;
}
.btn-outline-primary {
  --bs-btn-color: var(--crm-accent);
  --bs-btn-border-color: var(--crm-accent);
  --bs-btn-hover-bg: var(--crm-accent);
  --bs-btn-hover-border-color: var(--crm-accent);
  --bs-btn-active-bg: var(--crm-accent);
  --bs-btn-active-border-color: var(--crm-accent);
}
a { color: var(--crm-accent); }

/* Navbar */
.navbar {
  box-shadow: var(--crm-shadow-sm);
}
.navbar-brand {
  color: var(--crm-accent) !important;
  letter-spacing: -0.01em;
}
.navbar .nav-link {
  border-radius: calc(var(--crm-radius) - 0.125rem);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.navbar .nav-link.active {
  color: var(--crm-accent);
  background-color: var(--crm-accent-subtle);
  font-weight: 500;
}

/* Cards */
.card {
  border-color: var(--crm-border);
  border-radius: var(--crm-radius);
  box-shadow: var(--crm-shadow-sm);
}
.stat-card .card-body h6 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stat-card .display-6 {
  font-size: 1.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Tables */
.table > thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bs-secondary-color);
  font-weight: 600;
}
.table-hover > tbody > tr:hover > * {
  background-color: var(--crm-accent-subtle);
  --bs-table-bg-state: var(--crm-accent-subtle);
}
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Sortable column headers: a muted ⇅ marks a header as clickable; it turns into a
   solid ↑/↓ (via .sort-indicator.active, set in the template) once that column is
   the active sort, and the whole header underlines on hover. */
.sortable-th:hover {
  text-decoration: underline;
}
.sort-indicator {
  opacity: 0.35;
  margin-left: 0.15rem;
}
.sort-indicator.active {
  opacity: 1;
  color: var(--crm-accent);
}

/* Reports home: tile grid */
.report-tile {
  transition: box-shadow 150ms ease-in, border-color 150ms ease-in;
}
.report-tile:hover {
  box-shadow: var(--crm-shadow);
  border-color: var(--crm-accent);
}

/* Alerts: the compact `py-2` alerts used throughout the app shrink the bar height, but
   Bootstrap's default .btn-close positioning (top:0 + large fixed padding) assumes the
   taller default alert height, so the X ends up hanging below center — recenter it. */
.alert-dismissible .btn-close {
  top: 50%;
  transform: translateY(-50%);
  padding: 0.5rem 1rem;
}

/* Empty states */
.empty-state {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--bs-secondary-color);
}
.empty-state .empty-state-title {
  font-weight: 600;
  color: var(--bs-body-color);
  margin-bottom: 0.25rem;
}

/* htmx loading indicator: hidden until htmx flags the request in flight */
.htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* Login page */
.login-wrap {
  min-height: calc(100vh - 12rem);
  display: flex;
  align-items: center;
}