@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');

/* ── Design tokens + Bootstrap 5 overrides ──────────────────────── */
:root {
  /* Palette */
  --ink:            #181d26;
  --ink-active:     #0d1218;
  --canvas:         #ffffff;
  --surface-soft:   #f8fafc;
  --surface-strong: #e0e2e6;
  --hairline:       #dddddd;
  --color-body:     #333840;
  --color-muted:    #41454d;
  --sig-coral:      #aa2d00;
  --sig-forest:     #0a2e0e;
  --sig-cream:      #f5e9d4;
  --link:           #1b61c9;

  /* Spacing */
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-xxl: 48px;

  /* Border radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;

  /* Backward-compat aliases — child templates use var(--brand) without changes */
  --brand:       #181d26;
  --brand-dark:  #0d1218;
  --brand-light: #f8fafc;

  /* Bootstrap 5 token overrides */
  --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-body-font-size:   14px;
  --bs-body-color:       #333840;
  --bs-body-bg:          #ffffff;
  --bs-primary:          #181d26;
  --bs-primary-rgb:      24, 29, 38;
  --bs-border-color:     #dddddd;
  --bs-link-color:       #1b61c9;
  --bs-link-color-rgb:   27, 97, 201;
}

/* ── Navbar ──────────────────────────────────────────────────────── */
.navbar {
  background: var(--canvas) !important;
  border-bottom: 1px solid var(--hairline);
  min-height: 64px;
}
.navbar-brand { color: var(--ink) !important; font-weight: 500; }
.nav-link, .navbar-text { color: var(--color-muted) !important; }
.nav-link:hover { color: var(--ink) !important; }
.navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(0); }
.navbar .btn-outline-light {
  color: var(--ink);
  border-color: var(--hairline);
  background: transparent;
}
.navbar .btn-outline-light:hover {
  background: var(--surface-soft);
  color: var(--ink);
  border-color: var(--hairline);
}
.dropdown-menu {
  border-color: var(--hairline);
  border-radius: var(--r-md);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.dropdown-item:active {
  background: var(--surface-soft);
  color: var(--ink);
}

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: none;
}
.card-header {
  background: var(--surface-soft) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--hairline);
  font-weight: 500;
  border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0 !important;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  font-weight: 500;
  padding: 10px 20px;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--ink-active) !important;
  border-color: var(--ink-active) !important;
  color: #fff !important;
}
.btn-outline-primary {
  color: var(--ink);
  border-color: var(--hairline);
  border-radius: var(--r-lg);
  font-weight: 500;
}
.btn-outline-primary:hover {
  background: var(--surface-soft);
  color: var(--ink);
  border-color: var(--ink);
}
.btn-secondary {
  background: var(--canvas);
  border-color: var(--hairline);
  color: var(--ink);
  border-radius: var(--r-lg);
  font-weight: 500;
}
.btn-secondary:hover {
  background: var(--surface-soft);
  color: var(--ink);
  border-color: var(--hairline);
}
.btn-outline-secondary {
  color: var(--color-muted);
  border-color: var(--hairline);
  border-radius: var(--r-lg);
}
.btn-outline-secondary:hover {
  background: var(--surface-soft);
  color: var(--ink);
  border-color: var(--hairline);
}
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ── Tables ──────────────────────────────────────────────────────── */
table thead th {
  background: var(--surface-soft) !important;
  color: var(--ink) !important;
  border-color: var(--hairline) !important;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .4px;
  white-space: nowrap;
}
.table {
  --bs-table-hover-bg: #f3f5f8;
  --bs-table-border-color: var(--hairline);
}

/* ── Forms ───────────────────────────────────────────────────────── */
.form-control, .form-select {
  border-color: var(--hairline);
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--ink);
}
.form-control:focus, .form-select:focus {
  border-color: #458fff;
  box-shadow: 0 0 0 3px rgba(69,143,255,.15);
}
.form-label {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--ink);
}
.input-group-text {
  background: var(--surface-soft);
  border-color: var(--hairline);
  color: var(--color-muted);
}

/* ── Page header ─────────────────────────────────────────────────── */
.page-header {
  background: transparent;
  color: var(--ink);
  padding: var(--sp-lg) 0;
  border-radius: 0;
  margin-bottom: var(--sp-lg);
  border-bottom: 1px solid var(--hairline);
}
.page-header h4 {
  margin: 0;
  font-weight: 400;
  font-size: 24px;
  color: var(--ink);
}

/* ── Sidebar + stat cards ────────────────────────────────────────── */
.sidebar-link {
  display: block;
  padding: .5rem .75rem;
  border-radius: .5rem;
  text-decoration: none;
  color: var(--color-body);
}
.sidebar-link i { width: 1.3em; }
.sidebar-link:hover, .sidebar-link.active {
  background: var(--surface-soft);
  color: var(--ink);
}
.stat-card { border-left: 3px solid var(--ink) !important; }

/* ── Modals ──────────────────────────────────────────────────────── */
.modal-content {
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.modal-header { border-bottom: 1px solid var(--hairline); }
.modal-footer { border-top: 1px solid var(--hairline); }

/* ── Typography weight cap ───────────────────────────────────────── */
.fw-bold, .fw-semibold { font-weight: 500 !important; }

/* ── Photo thumbs ────────────────────────────────────────────────── */
.photo-thumb {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid var(--hairline);
}
.photo-thumb:hover { border-color: var(--ink); }
.badge-admin { background: #dc3545; }