/* ============================================================================
   Business Max — Hercules.app theme
   ----------------------------------------------------------------------------
   A single shared re-skin layer loaded LAST on every public page. It replaces
   the legacy navy (#0F2338) + gold (#B08D3E) look with the Hercules.app look:

     • light, airy page background with a faint blueprint grid
     • clean white cards with large radii and soft shadows
     • deep plum/indigo chrome, primary blue calls-to-action
     • indigo -> purple -> blue gradient accent panels
     • emerald success accent, small pill badges
     • Inter typography

   Colours are declared as tokens so future tweaks happen in one place. The
   layer is intentionally written with low-specificity selectors plus a few
   targeted !important rules for background/radius so it wins over the many
   page-level inline <style> blocks without editing every page by hand.
   ========================================================================= */

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

:root {
  --hx-ink:        #1E1236;   /* deep plum — chrome, headings, dark text   */
  --hx-ink-2:      #2A1B4D;   /* plum, one step lighter                     */
  --hx-ink-3:      #3B2A63;   /* plum, two steps lighter                    */
  --hx-blue:       #2E5BFF;   /* primary call-to-action                     */
  --hx-blue-d:     #1D4ED8;   /* hover / pressed                            */
  --hx-purple:     #7C5CFF;   /* secondary accent                           */
  --hx-indigo:     #4F46E5;   /* tertiary accent                            */
  --hx-green:      #12B981;   /* success                                    */
  --hx-grad:       linear-gradient(135deg, #2B32B2 0%, #6D3BF5 55%, #2E5BFF 100%);
  --hx-bg:         #F6F7FB;   /* page background                            */
  --hx-card:       #FFFFFF;   /* card surface                               */
  --hx-line:       #E3E6EF;   /* hairline borders                           */
  --hx-muted:      #5B6072;   /* secondary text                             */
  --hx-radius:     18px;      /* card radius                                */
  --hx-radius-sm:  10px;      /* control radius                             */
  --hx-shadow:     0 10px 30px rgba(30, 18, 54, .08);
  --hx-shadow-sm:  0 2px 10px rgba(30, 18, 54, .06);
}

/* ---------------------------------------------------------------- typography */
body,
body * {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
/* Font Awesome / icon glyphs keep their own family via higher-specificity
   (class) rules — the shorthand above never wins against .fa/.fas/.far/.fab. */

h1, h2, h3, h4 { color: var(--hx-ink); }

a { color: var(--hx-blue); }

/* ------------------------------------------------------------- page surface */
html { background: var(--hx-bg); }

body {
  background-color: var(--hx-bg) !important;
  background-image: none !important;   /* retire legacy page gradients */
  color: var(--hx-ink);
  -webkit-font-smoothing: antialiased;
}

/* Faint blueprint grid, drawn behind all content. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(30, 18, 54, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 18, 54, .045) 1px, transparent 1px);
  background-size: 46px 46px;
}

/* Keep real content above the grid. */
body > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------------- chrome */
/* Top bars / navs get the deep plum chrome with a subtle gradient. */
.nav,
.navbar,
.topbar,
.top-bar,
header.nav,
.app-nav,
.site-header {
  background: linear-gradient(135deg, var(--hx-ink-2) 0%, var(--hx-ink) 60%, var(--hx-ink-3) 100%) !important;
  color: #fff;
  box-shadow: 0 6px 24px rgba(30, 18, 54, .22);
}

.nav .brand,
.navbar .brand,
.nav .logo {
  color: #fff !important;
  letter-spacing: .4px;
}

/* Public-site header menu: every nav item reads white on the dark plum chrome.
   These beat the legacy dark-navy .site-nav a colour in glass.css (and any
   page-level inline style), so the menu is always legible. */
.site-header .site-nav a,
.site-header .site-nav a:visited,
.site-header .site-nav a.active {
  color: #fff !important;
}
.site-header .site-nav a:hover {
  color: #fff !important;
  opacity: .82;
}
/* Hamburger bars need to read on the dark chrome too. */
.site-header .menu-toggle span {
  background-color: #fff;
}
/* The mobile dropdown sits inside .site-header, so it inherits the chrome's
   white text — but its panel is white, which made the links invisible. Repaint
   the panel to the dark chrome so the white menu items stay readable. */
.site-header .mobile-nav {
  background: linear-gradient(135deg, var(--hx-ink-2) 0%, var(--hx-ink) 60%, var(--hx-ink-3) 100%) !important;
}
.site-header .mobile-nav a,
.site-header .mobile-nav a:visited,
.site-header .mobile-nav a:hover {
  color: #fff !important;
  border-bottom-color: rgba(255, 255, 255, .18) !important;
}

/* -------------------------------------------------------------------- cards */
.card,
.stat-card,
.table-section,
.panel,
.form-card,
.login-card,
.auth-card,
.box,
.tile {
  border-radius: var(--hx-radius) !important;
}

.card,
.stat-card,
.table-section,
.login-card,
.auth-card,
.form-card {
  box-shadow: var(--hx-shadow) !important;
  border-color: var(--hx-line) !important;
}

/* Rounded, softer controls. */
input, select, textarea, button, .btn {
  border-radius: var(--hx-radius-sm);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--hx-blue) !important;
  box-shadow: 0 0 0 3px rgba(46, 91, 255, .14) !important;
}

/* Primary calls-to-action: blue, with the Hercules hover lift. */
.btn:not(.btn-ghost):not(.btn-secondary):not(.btn-outline):not(.btn-danger):not(.btn-dark),
button.primary,
.btn-primary {
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:not(.btn-ghost):not(.btn-secondary):not(.btn-outline):not(.btn-danger):not(.btn-dark):hover,
.btn-primary:hover {
  transform: translateY(-1px);
}

/* Outlined "Log in"-style secondary button. */
.btn-outline,
.btn-ghost {
  background: #fff !important;
  color: var(--hx-ink) !important;
  border: 1.5px solid var(--hx-line) !important;
}
.btn-outline:hover,
.btn-ghost:hover {
  border-color: var(--hx-blue) !important;
  color: var(--hx-blue) !important;
}

/* --------------------------------------------------------------- accents */
/* Gradient accent panels (heroes, marketing strips, upgrade cards). */
.hx-gradient { background: var(--hx-grad) !important; color: #fff !important; }

/* Small pill badge. */
.hx-pill {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2px;
  background: rgba(46, 91, 255, .10);
  color: var(--hx-blue);
}
.hx-pill.green { background: rgba(18, 185, 129, .12); color: #0E9F6E; }
.hx-pill.purple { background: rgba(124, 92, 255, .14); color: var(--hx-purple); }

/* Tables: airy, with plum headers and hairline rows. */
th {
  color: #fff;
  background: linear-gradient(135deg, var(--hx-ink-2), var(--hx-ink));
}
th, td { border-color: var(--hx-line); }
tbody tr:hover { background: rgba(46, 91, 255, .03); }

/* Text helpers. */
.hx-muted, .muted { color: var(--hx-muted); }
.hx-accent { color: var(--hx-blue); }

/* ------------------------------------------------------- nav submenus/nesting */
/* Reduced primary menu: only a few top-level items stay on the bar; the rest
   live inside hover/focus dropdowns (desktop) and labelled groups (mobile).
   Styled on the plum chrome with white text to match the header. */
.site-header .site-nav .nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.site-header .site-nav .nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-header .site-nav .nav-item > a .fa-chevron-down {
  font-size: .6em;
  opacity: .7;
  transition: transform .2s ease;
}
.site-header .site-nav .nav-item.has-dropdown:hover > a .fa-chevron-down,
.site-header .site-nav .nav-item.has-dropdown:focus-within > a .fa-chevron-down {
  transform: rotate(180deg);
}

/* invisible bridge so the pointer can travel from the trigger into the panel */
.site-header .site-nav .nav-item.has-dropdown::after {
  content: '';
  position: absolute;
  left: -8px;
  right: -8px;
  top: 100%;
  height: 18px;
}

.site-header .nav-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: linear-gradient(135deg, var(--hx-ink-2) 0%, var(--hx-ink) 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--hx-radius-sm);
  box-shadow: 0 18px 44px rgba(30, 18, 54, .4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 1200;
}
.site-header .site-nav .nav-item.has-dropdown:hover .nav-dropdown,
.site-header .site-nav .nav-item.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.site-header .nav-dropdown a,
.site-header .nav-dropdown a:visited {
  color: #fff !important;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .9rem !important;
  font-weight: 500 !important;
  white-space: nowrap;
  opacity: .9;
}
.site-header .nav-dropdown a:hover {
  background: rgba(255, 255, 255, .12);
  opacity: 1;
}
.site-header .nav-dropdown a.active {
  background: rgba(255, 255, 255, .14);
  opacity: 1;
  font-weight: 700 !important;
}
.site-header .site-nav .nav-item > a.active {
  opacity: 1;
}

/* Mobile: grouped sections with a non-clickable heading. */
.site-header .mobile-nav-group + .mobile-nav-group {
  margin-top: 6px;
}
.site-header .mobile-nav-heading {
  color: rgba(255, 255, 255, .6) !important;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 18px 0 4px;
}
.site-header .mobile-nav .mobile-nav-group a {
  padding-left: 14px;
  font-size: 1.02rem;
}

/* -------------------------------------------------------- print safety net */
@media print {
  body::before { display: none !important; }
  body { background: #fff !important; }
}