/* BLACK X ERP — Canonical Dark Green Identity: tokens, reset, typography */
:root {
  --bx-sidebar-open: 304px;
  --bx-sidebar-collapsed: 86px;
  --bx-topbar-height: 76px;

  /* Canonical BLACK X green identity. Dark Green Base (#0B241F) is the
     primary brand material. Legacy --bx-teal-* and --bx-neon-* names remain
     as compatibility aliases so verified templates and components do not break. */
  --bx-green-950: #07100f;
  --bx-green-900: #091713;
  --bx-green-850: #0b241f;
  --bx-green-800: #0d3a2d;
  --bx-green-700: #0d6044;
  --bx-green-600: #17905f;
  --bx-green-500: #26d791;
  --bx-green-300: #86ebcd;
  --bx-green-accent-rgb: 13, 96, 68;

  --bx-teal-950: var(--bx-green-950);
  --bx-teal-900: var(--bx-green-900);
  --bx-teal-850: var(--bx-green-850);
  --bx-teal-800: var(--bx-green-800);
  --bx-teal-700: var(--bx-green-700);
  --bx-teal-600: var(--bx-green-600);
  /* Premium dark highlight. The legacy neon aliases remain for compatibility,
     but no longer resolve to a bright fluorescent green. */
  --bx-highlight: var(--bx-green-700);
  --bx-highlight-rgb: 13, 96, 68;
  --bx-highlight-shell: var(--bx-green-600);
  --bx-highlight-shell-rgb: 23, 144, 95;
  --bx-neon: var(--bx-highlight);
  --bx-neon-rgb: var(--bx-highlight-rgb);
  --bx-neon-soft: rgba(var(--bx-neon-rgb), .075);
  --bx-neon-line: rgba(var(--bx-neon-rgb), .20);
  --bx-neon-strong: rgba(var(--bx-neon-rgb), .42);

  --bx-color-primary: var(--bx-green-850);
  --bx-color-primary-deep: var(--bx-green-950);
  --bx-color-accent: var(--bx-highlight);
  --bx-color-accent-rgb: var(--bx-highlight-rgb);

  --bx-graphite-950: #0a0f10;
  --bx-graphite-900: #12191a;
  --bx-graphite-800: #1c2527;
  --bx-graphite-700: #2c383a;
  --bx-metal-600: #87999b;
  --bx-metal-500: #a8b8ba;
  --bx-metal-400: #c6d2d3;
  --bx-metal-300: #dbe4e4;
  --bx-metal-200: #edf3f3;
  --bx-metal-100: #f7fafa;

  --bx-canvas: #f3f7f7;
  --bx-canvas-deep: #eaf1f1;
  --bx-surface: #ffffff;
  --bx-surface-glass: rgba(255, 255, 255, .76);
  --bx-surface-glass-strong: rgba(255, 255, 255, .88);
  --bx-surface-green-glass: rgba(13, 58, 45, .72);
  --bx-surface-teal-glass: var(--bx-surface-green-glass);

  --bx-text: #132322;
  --bx-text-strong: #081716;
  --bx-text-muted: #536967;
  --bx-text-subtle: #718583;
  --bx-text-inverse: #f2fffc;
  --bx-text-inverse-muted: #c7dcda;
  --bx-text-on-dark: var(--bx-text-inverse);
  --bx-text-on-dark-muted: var(--bx-text-inverse-muted);
  --bx-text-on-light: var(--bx-text);
  --bx-text-on-light-strong: var(--bx-text-strong);
  --bx-text-on-light-muted: var(--bx-text-muted);

  --bx-success: #08766c;
  --bx-warning: #a96713;
  --bx-danger: #d81b34;
  --bx-danger-hot: #e3263f;
  --bx-danger-deep: #8c0e22;
  --bx-info: #116b8b;

  --bx-border: rgba(128, 154, 156, .30);
  --bx-border-soft: rgba(128, 154, 156, .18);
  --bx-border-neon: rgba(var(--bx-neon-rgb), .20);

  --bx-radius-xs: 10px;
  --bx-radius-sm: 14px;
  --bx-radius-md: 18px;
  --bx-radius-lg: 22px;
  --bx-radius-xl: 28px;
  --bx-radius-pill: 999px;

  --bx-shadow-xs: 0 3px 10px rgba(7, 16, 15, .05);
  --bx-shadow-sm: 0 8px 22px rgba(7, 16, 15, .07);
  --bx-shadow-md: 0 16px 36px rgba(7, 16, 15, .10);
  --bx-shadow-lg: 0 24px 56px rgba(7, 16, 15, .18);
  --bx-shadow-shell: 0 24px 60px rgba(7, 16, 15, .36);
  --bx-shadow-neon: 0 0 0 1px var(--bx-border-neon), 0 0 16px rgba(var(--bx-neon-rgb), .09), 0 14px 32px rgba(7, 16, 15, .16);
  --bx-focus-ring: 0 0 0 3px rgba(var(--bx-neon-rgb), .14), 0 0 0 1px rgba(var(--bx-neon-rgb), .56);

  --bx-transition-fast: 150ms ease;
  --bx-transition: 240ms cubic-bezier(.22, .61, .36, 1);
  --bx-transition-slow: 360ms cubic-bezier(.16, 1, .3, 1);

  --blackx-sidebar-width: var(--bx-sidebar-open);
  --blackx-sidebar-collapsed-width: var(--bx-sidebar-collapsed);
  --blackx-topbar-height: var(--bx-topbar-height);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; color-scheme: light; }
body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 10% 0%, rgba(var(--bx-neon-rgb), .035), transparent 26rem),
    linear-gradient(180deg, var(--bx-canvas) 0%, #f8fbfb 42%, var(--bx-canvas) 100%);
  color: var(--bx-text);
  font-family: "Segoe UI", "Cairo", Tahoma, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.blackx-sidebar-collapsed,
body.is-sidebar-collapsed { --blackx-sidebar-width: var(--bx-sidebar-collapsed); }

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }
button:not(:disabled), summary, a[href], label[for], select { cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .62; }

h1, h2, h3, h4, h5, h6 {
  margin-block: 0 0.65em;
  color: var(--bx-text-strong);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.015em;
}
h1 { font-size: clamp(1.9rem, 3vw, 3rem); }
h2 { font-size: clamp(1.45rem, 2.1vw, 2.15rem); }
h3 { font-size: clamp(1.18rem, 1.6vw, 1.55rem); }
h4 { font-size: 1.16rem; }
h5, h6 { font-size: 1rem; }
p { margin-block: 0 1rem; color: var(--bx-text-muted); }
small { color: inherit; }
.text-muted, .text-secondary, .form-text, .helptext { color: var(--bx-text-muted) !important; }
strong, b { color: inherit; }
ul, ol { margin-block: .5rem 1rem; }
hr { border: 0; border-top: 1px solid var(--bx-border-soft); margin-block: 1.5rem; }

::selection { background: rgba(var(--bx-neon-rgb), .22); color: var(--bx-text-strong); }

:where(a) {
  color: #0d6044;
  text-decoration-thickness: .08em;
  text-underline-offset: .17em;
  transition: color var(--bx-transition-fast), opacity var(--bx-transition-fast);
}
:where(a:hover, a:focus-visible) { color: #0b4a35; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--bx-focus-ring);
}

.container {
  width: min(100% - 32px, 1480px);
  margin-inline: auto;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.no-print { display: initial; }
.blackx-skip-link {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 12px;
  z-index: 5000;
  transform: translateY(-160%);
  padding: .65rem 1rem;
  border-radius: var(--bx-radius-sm);
  background: var(--bx-teal-850);
  color: var(--bx-text-inverse);
  box-shadow: var(--bx-shadow-neon);
  text-decoration: none;
}
.blackx-skip-link:focus { transform: translateY(0); }

[hidden] { display: none !important; }

@media (max-width: 760px) {
  body { font-size: 14px; }
  .container { width: min(100% - 22px, 1480px); }
}

@media print {
  :root { --blackx-sidebar-width: 0px; }
  body { background: #fff !important; color: #111 !important; }
  .blackx-topbar, .blackx-universal-sidebar, .blackx-sidebar-mobile-scrim, .blackx-page-loader, .no-print { display: none !important; }
  .blackx-app-frame { margin: 0 !important; padding: 0 !important; }
  .blackx-app-content { width: 100% !important; max-width: none !important; padding: 0 !important; }
}