/* lmex-global.css — site-wide font + colour overrides to match lmex.ai.
   Loaded after bootstrap/icons/app/custom so it wins the cascade.
   Tokens cribbed from the lmex.ai Next.js build (Space Grotesk + navy palette).

   Strategy: override Velzon (--vz-*) and Bootstrap (--bs-*) tokens so every
   component picks up the new palette without rewriting each class. Font
   family is set at :root and inherited through !important on the common
   components that Velzon forces onto specific stacks.
*/

:root,
[data-bs-theme="dark"],
[data-bs-theme="light"] {
  --lmex-bg-0:       #080c12;
  --lmex-bg-1:       #0a1018;
  --lmex-bg-2:       #0e1622;
  --lmex-panel:      #1a2840;
  --lmex-panel-hi:   #1e3050;
  --lmex-border:     #1e3050;
  --lmex-text-dim:   #3d5a72;
  --lmex-text-muted: #7da0bc;
  --lmex-text:       #e2eaf4;
  --lmex-text-hi:    #ffffff;
  --lmex-brand:      #276fdd;
  --lmex-brand-hi:   #4a8ce8;
  --lmex-teal:       #23b0a8;
  --lmex-success:    #3dd68c;
  --lmex-danger:     #f05252;
  --lmex-warning:    #f8da91;

  /* Bootstrap token overrides */
  --bs-body-bg:          var(--lmex-bg-1);
  --bs-body-color:       var(--lmex-text);
  --bs-body-color-rgb:   226, 234, 244;
  --bs-primary:          var(--lmex-brand);
  --bs-primary-rgb:      39, 111, 221;
  --bs-success:          var(--lmex-success);
  --bs-success-rgb:      61, 214, 140;
  --bs-danger:           var(--lmex-danger);
  --bs-danger-rgb:       240, 82, 82;
  --bs-warning:          var(--lmex-warning);
  --bs-warning-rgb:      248, 218, 145;
  --bs-info:             var(--lmex-teal);
  --bs-info-rgb:         35, 176, 168;
  --bs-secondary-color:  var(--lmex-text-muted);
  --bs-border-color:     var(--lmex-border);
  --bs-link-color:       var(--lmex-brand);
  --bs-link-hover-color: var(--lmex-brand-hi);

  /* Velzon token overrides */
  --vz-body-bg:          var(--lmex-bg-1);
  --vz-body-color:       var(--lmex-text);
  --vz-body-color-rgb:   226, 234, 244;
  --vz-primary:          var(--lmex-brand);
  --vz-primary-rgb:      39, 111, 221;
  --vz-success:          var(--lmex-success);
  --vz-success-rgb:      61, 214, 140;
  --vz-danger:           var(--lmex-danger);
  --vz-danger-rgb:       240, 82, 82;
  --vz-warning:          var(--lmex-warning);
  --vz-warning-rgb:      248, 218, 145;
  --vz-info:             var(--lmex-teal);
  --vz-info-rgb:         35, 176, 168;
  --vz-secondary-color:  var(--lmex-text-muted);
  --vz-border-color:     var(--lmex-border);
  --vz-card-bg:          var(--lmex-panel);
  --vz-card-bg-custom:   var(--lmex-panel);
  --vz-topbar-bg:        var(--lmex-bg-2);
  --vz-topbar-user-bg:   var(--lmex-bg-2);
  --vz-topbar-item-color:var(--lmex-text);
  --vz-topbar-search-bg: var(--lmex-bg-2);
  --vz-header-bg:        var(--lmex-bg-2);
  --vz-light:            var(--lmex-panel-hi);
  --vz-light-rgb:        30, 48, 80;
  --vz-dark:             var(--lmex-bg-0);
  --vz-dark-rgb:         8, 12, 18;
  --vz-link-color:       var(--lmex-brand);
  --vz-link-hover-color: var(--lmex-brand-hi);
  --vz-input-bg:         var(--lmex-bg-2);
  --vz-input-border:     var(--lmex-border);
  --vz-input-color:      var(--lmex-text);
  --vz-input-placeholder-color: var(--lmex-text-dim);
}

/* ═══ FONTS ═══ */
body,
.navbar, .nav-link, .navbar-brand,
h1, h2, h3, h4, h5, h6,
p, span, div, a, label, small,
.card, .card-title, .card-header, .card-body, .card-footer,
.btn, .badge, .alert,
.form-control, .form-select, .form-label, .form-check-label,
.table, .table thead, .table tbody, .table tr, .table th, .table td,
.dropdown-menu, .dropdown-item,
input, select, textarea, button {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

code, pre, kbd, samp, .font-monospace, .mono, .text-mono,
.table-number, .numeric, [data-numeric] {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

/* Number columns in tables get tabular figures so they line up vertically */
.table td, .table th {
  font-variant-numeric: tabular-nums;
}

/* ═══ BODY + CORE SURFACES ═══ */
body {
  background-color: var(--lmex-bg-1) !important;
  color: var(--lmex-text) !important;
}

#layout-wrapper, .main-content, .page-content {
  background-color: var(--lmex-bg-1) !important;
}

/* ═══ TOP NAV + SIDEBAR ═══ */
#page-topbar,
.navbar-header,
.app-menu .navbar-menu,
.topnav {
  background-color: var(--lmex-bg-2) !important;
  border-color: var(--lmex-border) !important;
}

.topnav .navbar-nav .nav-link,
.navbar-nav .nav-link {
  color: var(--lmex-text-muted) !important;
  font-weight: 500;
}
.topnav .navbar-nav .nav-link:hover,
.navbar-nav .nav-link:hover {
  color: var(--lmex-text-hi) !important;
}
.topnav .navbar-nav .nav-link.active,
.navbar-nav .nav-link.active,
.topnav .navbar-nav .nav-item.active > .nav-link {
  color: var(--lmex-brand) !important;
}

/* ═══ CARDS ═══ */
.card {
  background-color: var(--lmex-panel) !important;
  border: 1px solid var(--lmex-border) !important;
  border-radius: 10px;
}
.card-header {
  background-color: transparent !important;
  border-bottom-color: var(--lmex-border) !important;
  color: var(--lmex-text) !important;
}
.card-title { color: var(--lmex-text) !important; }

/* ═══ TABLES ═══ */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--lmex-text);
  --bs-table-border-color: var(--lmex-border);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-hover-bg: rgba(39, 111, 221, 0.08);
  color: var(--lmex-text) !important;
}
.table thead th,
.table .table-light,
.table-light {
  background-color: var(--lmex-bg-2) !important;
  color: var(--lmex-text-muted) !important;
  border-color: var(--lmex-border) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.table td, .table th {
  border-color: var(--lmex-border) !important;
}

/* ═══ BUTTONS ═══ */
.btn-primary,
.btn-primary:focus {
  background-color: var(--lmex-brand) !important;
  border-color: var(--lmex-brand) !important;
  color: #fff !important;
}
.btn-primary:hover { background-color: var(--lmex-brand-hi) !important; border-color: var(--lmex-brand-hi) !important; }

.btn-success {
  background-color: var(--lmex-success) !important;
  border-color: var(--lmex-success) !important;
  color: #0a1018 !important;
  font-weight: 600;
}
.btn-success:hover { filter: brightness(1.1); }

.btn-danger  { background-color: var(--lmex-danger) !important;  border-color: var(--lmex-danger) !important;  color: #fff !important; }
.btn-warning { background-color: var(--lmex-warning) !important; border-color: var(--lmex-warning) !important; color: #0a1018 !important; }
.btn-info    { background-color: var(--lmex-teal) !important;    border-color: var(--lmex-teal) !important;    color: #fff !important; }

.btn-outline-secondary {
  color: var(--lmex-text-muted) !important;
  border-color: var(--lmex-border) !important;
}
.btn-outline-secondary:hover {
  background-color: var(--lmex-panel-hi) !important;
  color: var(--lmex-text) !important;
}

/* ═══ FORMS ═══ */
.form-control,
.form-select,
.form-control:focus,
.form-select:focus,
.input-group-text {
  background-color: var(--lmex-bg-2) !important;
  border: 1px solid var(--lmex-border) !important;
  color: var(--lmex-text) !important;
}
.form-control::placeholder { color: var(--lmex-text-dim) !important; }
.form-control:focus, .form-select:focus {
  border-color: var(--lmex-brand) !important;
  box-shadow: 0 0 0 3px rgba(39, 111, 221, 0.2) !important;
}
.form-label, label { color: var(--lmex-text) !important; }
.form-check-label { color: var(--lmex-text-muted) !important; }
.form-check-input {
  background-color: var(--lmex-bg-2);
  border-color: var(--lmex-border);
}
.form-check-input:checked {
  background-color: var(--lmex-brand);
  border-color: var(--lmex-brand);
}

/* ═══ BADGES ═══ keep semantic colours but tweak the "subtle" variants
   so they read well on dark navy panels. */
.badge.bg-primary-subtle   { background-color: rgba(39, 111, 221, 0.15) !important; color: var(--lmex-brand) !important; }
.badge.bg-success-subtle   { background-color: rgba(61, 214, 140, 0.15) !important; color: var(--lmex-success) !important; }
.badge.bg-danger-subtle    { background-color: rgba(240, 82, 82, 0.15) !important;  color: var(--lmex-danger) !important; }
.badge.bg-warning-subtle   { background-color: rgba(248, 218, 145, 0.15) !important;color: var(--lmex-warning) !important; }
.badge.bg-info-subtle      { background-color: rgba(35, 176, 168, 0.15) !important; color: var(--lmex-teal) !important; }
.badge.bg-secondary-subtle { background-color: rgba(125, 160, 188, 0.15) !important;color: var(--lmex-text-muted) !important; }

/* ═══ ALERTS ═══ */
.alert-primary { background-color: rgba(39, 111, 221, 0.12) !important; border-color: rgba(39, 111, 221, 0.3) !important; color: var(--lmex-brand) !important; }
.alert-success { background-color: rgba(61, 214, 140, 0.12) !important; border-color: rgba(61, 214, 140, 0.3) !important; color: var(--lmex-success) !important; }
.alert-danger  { background-color: rgba(240, 82, 82, 0.12) !important;  border-color: rgba(240, 82, 82, 0.3) !important;  color: var(--lmex-danger) !important; }
.alert-warning { background-color: rgba(248, 218, 145, 0.12) !important;border-color: rgba(248, 218, 145, 0.3) !important;color: var(--lmex-warning) !important; }
.alert-info    { background-color: rgba(35, 176, 168, 0.12) !important; border-color: rgba(35, 176, 168, 0.3) !important; color: var(--lmex-teal) !important; }

/* ═══ TEXT COLOURS ═══ (semantic) */
.text-primary   { color: var(--lmex-brand) !important; }
.text-success   { color: var(--lmex-success) !important; }
.text-danger    { color: var(--lmex-danger) !important; }
.text-warning   { color: var(--lmex-warning) !important; }
.text-info      { color: var(--lmex-teal) !important; }
.text-muted     { color: var(--lmex-text-muted) !important; }
.text-secondary { color: var(--lmex-text-muted) !important; }
.text-body      { color: var(--lmex-text) !important; }

/* ═══ DROPDOWNS ═══ */
.dropdown-menu {
  background-color: var(--lmex-panel) !important;
  border: 1px solid var(--lmex-border) !important;
  color: var(--lmex-text) !important;
}
.dropdown-item { color: var(--lmex-text) !important; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--lmex-panel-hi) !important; }

/* ═══ MODALS ═══ */
.modal-content {
  background-color: var(--lmex-panel) !important;
  border-color: var(--lmex-border) !important;
  color: var(--lmex-text) !important;
}
.modal-header, .modal-footer { border-color: var(--lmex-border) !important; }

/* ═══ MISC ═══ */
hr { border-color: var(--lmex-border) !important; }
a { color: var(--lmex-brand); }
a:hover { color: var(--lmex-brand-hi); }
.breadcrumb .breadcrumb-item.active { color: var(--lmex-text-muted); }
.page-title-box { background-color: transparent !important; }

/* Preserve the already-shipped auth-page CSS */
.auth-page-wrapper { background-color: var(--lmex-bg-1) !important; }