/* =================================================================
   SOHE Overrides — bridges Phoenix Bootstrap 5 theme → SOHE tokens
   Load AFTER theme.min.css so these values win.
   ================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800;0,6..12,900;1,6..12,400&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

/* ----------------------------------------------------------------
   SOHE token layer (replicated from colors_and_type.css so this
   file is self-contained when loaded alone)
   ---------------------------------------------------------------- */
:root {
  /* Greens */
  --sohe-green-50:  #ecfaf1;
  --sohe-green-100: #d2f3df;
  --sohe-green-200: #a4e5bf;
  --sohe-green-300: #6fd198;
  --sohe-green-400: #3fb55a;
  --sohe-green-500: #1a9a45;
  --sohe-green-600: #0e7b45;
  --sohe-green-700: #0b6238;
  --sohe-green-800: #094d2d;
  --sohe-green-900: #073a23;

  /* Yellow */
  --sohe-yellow-400: #f5c518;
  --sohe-yellow-700: #835d05;

  /* Cool grays */
  --sohe-gray-25:  #fafbfc;
  --sohe-gray-50:  #f5f6f8;
  --sohe-gray-100: #eceef2;
  --sohe-gray-200: #dde1e8;
  --sohe-gray-300: #c5cbd5;
  --sohe-gray-400: #9aa3b2;
  --sohe-gray-500: #6b7382;
  --sohe-gray-600: #4d5462;
  --sohe-gray-700: #363c47;
  --sohe-gray-800: #232831;
  --sohe-gray-900: #14171d;

  /* Semantic */
  --sohe-red-50:  #fef2f2;
  --sohe-red-500: #d6493a;
  --sohe-red-600: #b53527;
  --sohe-blue-50:  #eef5ff;
  --sohe-blue-500: #2f6fd9;
  --sohe-blue-600: #1f56b3;
  --sohe-amber-50:  #fff8eb;
  --sohe-amber-500: #c98a04;

  /* Fonts */
  --font-sans:    "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Plus Jakarta Sans", "Nunito Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Spacing / Radius / Shadow */
  --sohe-radius-md:  8px;
  --sohe-radius-lg:  12px;
  --sohe-radius-pill: 999px;
  --sohe-shadow-xs: 0 1px 2px 0 rgba(20, 30, 25, 0.04);
  --sohe-shadow-sm: 0 1px 2px 0 rgba(20, 30, 25, 0.05), 0 1px 3px 0 rgba(20, 30, 25, 0.04);
  --sohe-shadow-md: 0 4px 6px -2px rgba(20, 30, 25, 0.06), 0 2px 4px -2px rgba(20, 30, 25, 0.05);
  --sohe-shadow-lg: 0 12px 16px -4px rgba(20, 30, 25, 0.08), 0 4px 6px -2px rgba(20, 30, 25, 0.04);
  --sohe-shadow-focus: 0 0 0 3px rgba(14, 123, 69, 0.18);

  /* Motion */
  --sohe-dur-fast: 120ms;
  --sohe-dur-base: 180ms;
  --sohe-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- Remap Phoenix primary → SOHE green ---- */
  --phoenix-primary:                    #0e7b45;
  --phoenix-primary-rgb:                14, 123, 69;
  --phoenix-primary-text-emphasis:      #094d2d;
  --phoenix-primary-bg-subtle:          #ecfaf1;
  --phoenix-primary-border-subtle:      #a4e5bf;
  --phoenix-primary-lighter:            #a4e5bf;
  --phoenix-primary-light:              #3fb55a;
  --phoenix-primary-dark:               #0b6238;
  --phoenix-primary-darker:             #094d2d;
  --phoenix-primary-lighter-rgb:        164, 229, 191;
  --phoenix-primary-light-rgb:          63, 181, 90;
  --phoenix-primary-dark-rgb:           11, 98, 56;
  --phoenix-primary-darker-rgb:         9, 77, 45;
  --phoenix-primary-bg-subtle-rgb:      236, 250, 241;

  /* ---- Remap Bootstrap primary ---- */
  --bs-primary:        #0e7b45;
  --bs-primary-rgb:    14, 123, 69;
  --bs-link-color:     #0b6238;
  --bs-link-hover-color: #094d2d;

  /* ---- Body / page ---- */
  --phoenix-body-bg:         #fafbfc;
  --phoenix-body-color:      #14171d;
  --phoenix-body-font-family: var(--font-sans);
  --phoenix-body-font-size:  0.875rem; /* 14px */
  --phoenix-body-line-height: 1.5;
  --phoenix-heading-color:   #050709;

  /* ---- Borders ---- */
  --phoenix-border-color:    #dde1e8;
  --bs-border-color:         #dde1e8;
  --phoenix-card-border-color: #dde1e8;
}

/* ----------------------------------------------------------------
   Base resets that Phoenix doesn't cover
   ---------------------------------------------------------------- */
html { font-size: 16px; }

body {
  font-family: var(--font-sans) !important;
  font-size: 0.875rem;
  color: var(--sohe-gray-900);
  background: var(--sohe-gray-25);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.015em;
  color: #050709;
}

code, kbd, pre, samp, .font-mono {
  font-family: var(--font-mono) !important;
}

/* Selection */
::selection { background: var(--sohe-green-200); color: var(--sohe-green-900); }

/* ----------------------------------------------------------------
   Sidebar — SOHE-style nav items
   ---------------------------------------------------------------- */
.navbar-vertical .navbar-vertical-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sohe-gray-500);
  padding: 0 12px;
  margin: 0 0 4px;
}

.navbar-vertical .navbar-vertical-line {
  border-color: var(--sohe-gray-100);
  margin: 0 12px 8px;
}

/* Active nav item */
.navbar-vertical .nav-link.active,
.navbar-vertical .nav-link[aria-expanded="true"],
.navbar-vertical .nav-link:focus-visible {
  background: var(--sohe-green-50) !important;
  color: var(--sohe-green-600) !important;
  border-radius: var(--sohe-radius-md);
}

.navbar-vertical .nav-link:hover {
  background: var(--sohe-gray-50) !important;
  color: var(--sohe-gray-900) !important;
  border-radius: var(--sohe-radius-md);
}

/* Nav icon sizing for Lucide (stroke-based, slightly larger) */
.nav-link-icon [data-lucide] {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
  flex-shrink: 0;
}

/* Sidebar collapse toggle */
.navbar-vertical-footer .btn {
  color: var(--sohe-gray-500);
  font-size: 0.75rem;
}

/* ----------------------------------------------------------------
   Top navbar
   ---------------------------------------------------------------- */
.navbar-top {
  background: #ffffff !important;
  border-bottom: 1px solid var(--sohe-gray-200) !important;
  box-shadow: var(--sohe-shadow-xs) !important;
  height: 60px;
}

.navbar-top .navbar-brand img {
  height: 28px;
  width: auto;
}

/* Icon buttons in topbar */
.navbar-top .btn,
.navbar-top .nav-link {
  color: var(--sohe-gray-500) !important;
  border-radius: var(--sohe-radius-md);
  transition: background var(--sohe-dur-fast) var(--sohe-ease-out),
              color var(--sohe-dur-fast) var(--sohe-ease-out);
}
.navbar-top .btn:hover,
.navbar-top .nav-link:hover {
  background: var(--sohe-gray-100) !important;
  color: var(--sohe-gray-900) !important;
}

/* Avatar */
.navbar-top .avatar img {
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--sohe-gray-200);
}

/* ----------------------------------------------------------------
   Cards
   ---------------------------------------------------------------- */
.card {
  background: #ffffff;
  border: 1px solid var(--sohe-gray-200) !important;
  border-radius: var(--sohe-radius-lg) !important;
  box-shadow: var(--sohe-shadow-sm) !important;
}

.card:hover {
  box-shadow: var(--sohe-shadow-md) !important;
  transition: box-shadow var(--sohe-dur-base) var(--sohe-ease-out);
}

/* ----------------------------------------------------------------
   Buttons — primary
   ---------------------------------------------------------------- */
.btn-primary,
.btn-phoenix-primary {
  background: var(--sohe-green-600) !important;
  border-color: var(--sohe-green-600) !important;
  color: #ffffff !important;
  border-radius: var(--sohe-radius-md) !important;
  font-weight: 600;
  transition: background var(--sohe-dur-fast), border-color var(--sohe-dur-fast);
}
.btn-primary:hover,
.btn-phoenix-primary:hover {
  background: var(--sohe-green-700) !important;
  border-color: var(--sohe-green-700) !important;
}
.btn-primary:active,
.btn-phoenix-primary:active {
  background: var(--sohe-green-800) !important;
  border-color: var(--sohe-green-800) !important;
}
.btn-primary:focus-visible,
.btn-phoenix-primary:focus-visible {
  box-shadow: var(--sohe-shadow-focus) !important;
}

/* Secondary buttons */
.btn-secondary,
.btn-phoenix-secondary {
  background: #ffffff !important;
  border-color: var(--sohe-gray-300) !important;
  color: var(--sohe-gray-900) !important;
  border-radius: var(--sohe-radius-md) !important;
}
.btn-secondary:hover,
.btn-phoenix-secondary:hover {
  background: var(--sohe-gray-50) !important;
}

/* Danger */
.btn-danger,
.btn-phoenix-danger {
  background: var(--sohe-red-500) !important;
  border-color: var(--sohe-red-500) !important;
  color: #ffffff !important;
  border-radius: var(--sohe-radius-md) !important;
}
.btn-danger:hover { background: var(--sohe-red-600) !important; border-color: var(--sohe-red-600) !important; }

/* All buttons: consistent radius */
.btn { border-radius: var(--sohe-radius-md) !important; }

/* ----------------------------------------------------------------
   Form controls
   ---------------------------------------------------------------- */
.form-control,
.form-select {
  border-color: var(--sohe-gray-200) !important;
  border-radius: var(--sohe-radius-md) !important;
  font-size: 0.8125rem;
  color: var(--sohe-gray-900);
  background: #ffffff;
  transition: border-color var(--sohe-dur-fast), box-shadow var(--sohe-dur-fast);
}
.form-control:hover,
.form-select:hover {
  border-color: var(--sohe-gray-300) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--sohe-green-600) !important;
  box-shadow: var(--sohe-shadow-focus) !important;
  outline: none;
}

/* ----------------------------------------------------------------
   Badges
   ---------------------------------------------------------------- */
.badge.bg-primary,
.badge.text-bg-primary {
  background: var(--sohe-green-50) !important;
  color: var(--sohe-green-800) !important;
  border: 1px solid var(--sohe-green-200) !important;
}

/* ----------------------------------------------------------------
   Tables
   ---------------------------------------------------------------- */
.table {
  font-size: 0.8125rem;
  color: var(--sohe-gray-900);
}
.table thead th {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sohe-gray-500);
  background: var(--sohe-gray-50);
  border-bottom: 1px solid var(--sohe-gray-200);
}
.table tbody tr:hover { background: var(--sohe-gray-50); }
.table > :not(caption) > * > * { border-color: var(--sohe-gray-100); }

/* ----------------------------------------------------------------
   Footer
   ---------------------------------------------------------------- */
.footer {
  background: #ffffff;
  border-top: 1px solid var(--sohe-gray-100);
  font-size: 0.75rem;
  color: var(--sohe-gray-500);
}

/* ----------------------------------------------------------------
   Page titles — match SOHE display heading style
   ---------------------------------------------------------------- */
.page-header h2,
.page-header h1 {
  font-family: var(--font-display) !important;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* ----------------------------------------------------------------
   Links
   ---------------------------------------------------------------- */
a { color: var(--sohe-green-700); }
a:hover { color: var(--sohe-green-800); }

/* ----------------------------------------------------------------
   Focus rings — replace blue Bootstrap glow with SOHE green
   ---------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--sohe-green-600) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* ----------------------------------------------------------------
   Lucide icon sizing helpers
   ---------------------------------------------------------------- */
[data-lucide] {
  display: inline-block;
  vertical-align: middle;
  stroke-width: 1.75;
}

.icon-16 [data-lucide] { width: 16px; height: 16px; }
.icon-18 [data-lucide] { width: 18px; height: 18px; }
.icon-20 [data-lucide] { width: 20px; height: 20px; }
.icon-24 [data-lucide] { width: 24px; height: 24px; }