/*
 * OrgTrack – theme.css
 * All colour values are driven by CSS variables set in base.html
 * from the active BrandingProfile. Fallback values match the Between Friends AB palette.
 */

:root {
  --ot-primary:    #0057a8;
  --ot-secondary:  #6c757d;
  --ot-accent:     #f7941d;
  --ot-nav-text:   #ffffff;
  --ot-font:       'Inter', 'Segoe UI', sans-serif;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
body {
  font-family: var(--ot-font);
  background-color: #f4f6f9;
  color: #333;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

/* ── Navbar ────────────────────────────────────────────────────────────── */
.ot-navbar {
  background-color: var(--ot-primary) !important;
}

.ot-navbar .navbar-brand,
.ot-navbar .nav-link,
.ot-navbar .navbar-toggler-icon {
  color: var(--ot-nav-text) !important;
}

.ot-navbar .nav-link:hover,
.ot-navbar .nav-link.active {
  color: var(--ot-accent) !important;
  border-bottom: 2px solid var(--ot-accent);
}

.ot-navbar .dropdown-menu {
  border-top: 3px solid var(--ot-accent);
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.ot-footer {
  background-color: var(--ot-primary);
  color: var(--ot-nav-text);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--ot-primary);
  border-color: var(--ot-primary);
}

.btn-primary:hover {
  background-color: color-mix(in srgb, var(--ot-primary) 80%, black);
  border-color: color-mix(in srgb, var(--ot-primary) 80%, black);
}

.btn-accent {
  background-color: var(--ot-accent);
  border-color: var(--ot-accent);
  color: #fff;
}

.btn-accent:hover {
  background-color: color-mix(in srgb, var(--ot-accent) 80%, black);
  border-color: color-mix(in srgb, var(--ot-accent) 80%, black);
  color: #fff;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  border-radius: .5rem;
}

.card-header {
  background-color: var(--ot-primary);
  color: var(--ot-nav-text);
  border-radius: .5rem .5rem 0 0 !important;
  font-weight: 600;
}

/* ── Stat cards (dashboard) ─────────────────────────────────────────────── */
.stat-card {
  border-left: 4px solid var(--ot-accent);
  background: #fff;
  border-radius: .5rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.stat-card .stat-value {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ot-primary);
  line-height: 1;
}

.stat-card .stat-label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ot-secondary);
}

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header {
  border-bottom: 2px solid var(--ot-accent);
  padding-bottom: .5rem;
  margin-bottom: 1.5rem;
}

/* ── Badge overrides ────────────────────────────────────────────────────── */
.badge-active   { background-color: #198754; }
.badge-inactive { background-color: #6c757d; }
.badge-pending  { background-color: #ffc107; color: #000; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table thead th {
  background-color: var(--ot-primary);
  color: var(--ot-nav-text);
  border: none;
  font-weight: 600;
}

/* ── Colour swatches (branding page) ───────────────────────────────────── */
.colour-swatch {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.2);
  vertical-align: middle;
}