/* NexConnect Brand — Shared (admin + customer)
 *
 * Source of truth: landing/app/globals.css @theme block. This file
 * mirrors the dashboard's design tokens into Perfex's CSS context.
 *
 * Loaded by nexconnect_ecf.php hooks on every admin AND customer page
 * (app_admin_head + app_customers_head). Fonts are loaded separately
 * as <link> tags in the same hooks for non-blocking parallel fetch.
 */

:root {
  /* Mint scale — exact from dashboard */
  --nxc-mint-50:  #E5FFEE;
  --nxc-mint-200: #B3FFCC;
  --nxc-mint-400: #66FF99;
  --nxc-mint-600: #2EB368;
  --nxc-mint-900: #0F5A2F;
  /* Ink — dark neutrals */
  --nxc-ink-950: #0A0F0D;
  --nxc-ink-900: #14191A;
  --nxc-ink-600: #3A4142;
  --nxc-ink-400: #5A6366;
  /* Mist — light surfaces */
  --nxc-mist-50:  #FAFAF7;
  --nxc-mist-100: #F0F0EC;
  --nxc-mist-200: #D8D8D2;
  --nxc-mist-400: #A8A8A0;
  /* Semantic */
  --nxc-success: #2EB368;
  --nxc-warning: #FFD166;
  --nxc-danger:  #EF476F;
  --nxc-info:    #4EA8DE;
  --nxc-coral:   #E8A87C;
  /* Hairlines (light-mode equivalents of dashboard's rgba(255,255,255,0.07/0.12)) */
  --nxc-hairline:        rgba(15, 23, 42, 0.06);
  --nxc-hairline-strong: rgba(15, 23, 42, 0.12);
  /* Soft tints */
  --nxc-accent-soft:   rgba(102, 255, 153, 0.12);
  --nxc-accent-border: rgba(102, 255, 153, 0.35);
}

/* Typography — Inter body, Space Grotesk display, JetBrains Mono for codes.
 *
 * Selector list is intentionally narrow (no `span` / `div`) so we don't
 * stomp on Font Awesome's `<span class="fa arrow">` and similar icon
 * containers. body inheritance handles plain text inside those tags.
 */
body, .form-control, .btn, .nav-tabs, .panel, .dropdown-menu, .table,
p, td, th, label, input, select, textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5,
.panel_s .panel-heading,
.panel_s > .panel-body > h4:first-child {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* Preserve icon fonts — Font Awesome (4/5/6) + Iconify-style helpers.
 *
 * CRITICAL: FA6 requires BOTH font-family AND font-weight to render.
 * Per fontawesome.css line 7-8:
 *   .fa { font-family: var(--fa-style-family, "Font Awesome 6 Free");
 *         font-weight: var(--fa-style, 900); }
 * The webfont files split by weight (fa-solid-900.woff2,
 * fa-regular-400.woff2, fa-brands-400.woff2) — if font-weight inherits
 * a non-matching value from a parent (e.g. .btn { font-weight: 600 }
 * which I set !important), the glyph falls back and renders as
 * garbled tofu / 3-line boxes / blank.
 *
 * Solid (.fa, .fas, .fa-solid, generic .fa-* legacy): font-weight 900
 * Regular (.far, .fa-regular):                         font-weight 400
 * Light/Thin (FA Pro only):                            300 / 100
 * Brands (.fab, .fa-brands):                           font-weight 400
 *
 * The .fa.arrow span (metisMenu chevron) uses FA4 compat — falls into
 * the solid 900 bucket via fa-v4compatibility.woff2.
 */

/* Step 1 — common base: family + style + rendering */
.fa, .fas, .far, .fal, .fat, .fab,
.fa-solid, .fa-regular, .fa-light, .fa-thin, .fa-brands,
[class^="fa-"], [class*=" fa-"],
i.fa, i.fas, i.far, i.fal, i.fab,
span.fa, span.arrow {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands",
               "Font Awesome 5 Free", "Font Awesome 5 Brands",
               "FontAwesome", sans-serif !important;
  font-style: normal !important;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Step 2 — weight by variant (FA splits font files per weight) */
.fa, .fas, .fa-solid,
[class^="fa-"], [class*=" fa-"],
.fa.arrow,
span.fa, span.arrow {
  font-weight: 900 !important;  /* solid 900 covers FA4 compat too */
}
.far, .fa-regular {
  font-weight: 400 !important;
}
.fal, .fa-light {
  font-weight: 300 !important;
}
.fat, .fa-thin {
  font-weight: 100 !important;
}
.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", sans-serif !important;
  font-weight: 400 !important;
}

/* NCF codes, audit IDs, timestamps — tabular monospace */
code, kbd, pre, .mono, .tnum {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-feature-settings: "tnum" 1, "zero" 1;
}
code {
  background: var(--nxc-mist-100);
  color: var(--nxc-mint-900);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--nxc-hairline);
  font-size: 0.92em;
  font-weight: 500;
}

/* Links → mint-600 (AAA on white) */
a {
  color: var(--nxc-mint-600);
  transition: color .12s ease;
  text-decoration: none;
}
a:hover, a:focus {
  color: var(--nxc-mint-900);
  text-decoration: none;
}

/* Focus ring — matches dashboard's 3px soft mint shadow */
.form-control:focus,
.selectpicker:focus,
.btn:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--nxc-mint-400) !important;
  box-shadow: 0 0 0 3px rgba(102, 255, 153, 0.18) !important;
  outline: 0;
}

/* Form inputs — softer borders, smooth transitions */
.form-control,
input.form-control, select.form-control, textarea.form-control {
  border: 1px solid var(--nxc-hairline-strong);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13.5px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control::placeholder { color: var(--nxc-mist-400); }

/* Selection */
::selection {
  background: var(--nxc-mint-400);
  color: var(--nxc-ink-950);
}

/* Scrollbar — slim hairline */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--nxc-hairline-strong);
  border-radius: 5px;
  border: 2px solid var(--nxc-mist-50);
}
::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.24); }