/* ==========================================================
   NeverMissed Brand Theme
   Re-skins admin / portal / dashboard / KB to match
   the nevermissed.tech marketing site (lime + dark cinematic).
   Loaded LAST so it wins over the existing inline <style> blocks.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root, html, body {
  /* Surfaces */
  --bg:  #08080A !important;
  --bg2: #0C0C0F !important;
  --bg3: #121217 !important;

  /* Borders / lines */
  --b1: rgba(255,255,255,0.08) !important;
  --b2: rgba(255,255,255,0.14) !important;

  /* PRIMARY = electric lime (was indigo) */
  --p:  #C7F22E !important;
  --p2: #9BC014 !important;
  --pl: #DBFF5C !important;
  --on-primary: #10140A;

  /* Status colors */
  --g:   #C7F22E !important;
  --gbg: rgba(199,242,46,0.10) !important;
  --gbr: rgba(199,242,46,0.40) !important;

  --r:   #FF6464 !important;
  --rbg: rgba(255,100,100,0.10) !important;
  --rbr: rgba(255,100,100,0.40) !important;

  --y:   #FFB94A !important;
  --ybg: rgba(255,185,74,0.10) !important;
  --ybr: rgba(255,185,74,0.40) !important;

  --bl:  #5CC8FF !important;
  --blbg:rgba(92,200,255,0.10) !important;

  /* Text */
  --t1: #ECEAE3 !important;
  --t2: #C5C2BC !important;
  --t3: #8D8B86 !important;
  --t4: #5E5C58 !important;
}

/* ----------- typography ----------- */
html, body, input, select, button, textarea {
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
code, pre, [class*="mono"], .mono, .label, .lbl, .badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
h1, h2, h3 {
  letter-spacing: -0.025em;
  font-weight: 600;
}

/* ----------- LOGIN SCREEN (the .ls / .lc card on admin + portal) ----------- */
.ls, .login-screen, .login {
  background: radial-gradient(60% 50% at 50% 0%, rgba(199,242,46,0.12), transparent 70%),
              radial-gradient(50% 50% at 100% 100%, rgba(199,242,46,0.06), transparent 70%),
              var(--bg) !important;
}
.lc, .login-card {
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 32px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(199,242,46,0.06);
  position: relative;
  overflow: hidden;
}
.lc::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(199,242,46,0.6), transparent);
  opacity: 0.6;
}

.logo, .sb-logo {
  background: var(--p) !important;
  box-shadow: 0 0 0 1px rgba(199,242,46,0.3), 0 8px 24px rgba(199,242,46,0.35) !important;
}
.logo svg, .sb-logo svg {
  fill: var(--on-primary) !important;
  stroke: var(--on-primary) !important;
}

.lt h1, .login h1 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 24px !important;
  letter-spacing: -0.03em !important;
  color: var(--t1) !important;
}
.lt p, .login p {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--p) !important;
}
.admin-pill, .pill, .badge-pill {
  background: rgba(199,242,46,0.1) !important;
  border: 1px solid rgba(199,242,46,0.3) !important;
  color: var(--p) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.1em !important;
}

/* ----------- INPUTS ----------- */
input, select, textarea, .ff input {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 10px !important;
  color: var(--t1) !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
}
input:focus, select:focus, textarea:focus, .ff input:focus {
  border-color: rgba(199,242,46,0.6) !important;
  box-shadow: 0 0 0 3px rgba(199,242,46,0.15) !important;
  background: rgba(255,255,255,0.05) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--t4) !important; }
.ff label, label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--t3) !important;
}

/* ----------- BUTTONS ----------- */
.btn-sign, .btn-primary, .btn-create, button[type="submit"], .btn-add {
  background: var(--p) !important;
  color: var(--on-primary) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  padding: 12px 22px !important;
  letter-spacing: -0.005em !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s !important;
  box-shadow: 0 0 0 1px rgba(199,242,46,0.3), 0 6px 18px rgba(199,242,46,0.25) !important;
}
.btn-sign:hover, .btn-primary:hover, .btn-create:hover, button[type="submit"]:hover, .btn-add:hover {
  background: var(--pl) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(199,242,46,0.5), 0 10px 26px rgba(199,242,46,0.4) !important;
}
.btn-sign:active, .btn-primary:active, button[type="submit"]:active { transform: translateY(0); }

button.btn-secondary, .btn-ghost, .btn-outline, .btn-cancel {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--b1) !important;
  color: var(--t1) !important;
  border-radius: 10px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 500 !important;
}
button.btn-secondary:hover, .btn-ghost:hover, .btn-outline:hover {
  border-color: rgba(199,242,46,0.4) !important;
  background: rgba(199,242,46,0.05) !important;
  color: var(--t1) !important;
}

.btn-danger, .btn-delete, .btn-cancel-reservation {
  background: rgba(255,100,100,0.12) !important;
  border: 1px solid rgba(255,100,100,0.35) !important;
  color: #FF8888 !important;
}
.btn-danger:hover, .btn-delete:hover { background: rgba(255,100,100,0.2) !important; color: #FFB0B0 !important; }

/* ----------- SIDEBAR / NAV ----------- */
.sidebar, .sb, .nav, .navbar {
  background: var(--bg2) !important;
  border-right: 1px solid var(--b1) !important;
}
.sb-top, .sb-section, .sb-item {
  border-color: var(--b1) !important;
}
.sb-item, .nav-item, .menu-item {
  color: var(--t2) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  border-radius: 8px !important;
}
.sb-item:hover, .nav-item:hover, .menu-item:hover {
  background: rgba(199,242,46,0.06) !important;
  color: var(--t1) !important;
}
.sb-item.active, .nav-item.active, .menu-item.active {
  background: rgba(199,242,46,0.1) !important;
  color: var(--p) !important;
  border-left: 2px solid var(--p);
}

/* ----------- TABLES ----------- */
table, .table {
  background: var(--bg2) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
thead, th {
  background: rgba(199,242,46,0.04) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--t3) !important;
  border-bottom: 1px solid var(--b1) !important;
  text-align: left;
}
td {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  color: var(--t1) !important;
}
tr:hover td { background: rgba(199,242,46,0.03) !important; }

/* ----------- CARDS / PANELS / MODALS ----------- */
.card, .panel, .box, .stat-card, .kpi-card, .modal-content, .modal {
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.modal-overlay, .modal-bg {
  background: rgba(0,0,0,0.75) !important;
  backdrop-filter: blur(4px);
}

/* ----------- STATUS PILLS / BADGES ----------- */
.status-confirmed, .status-active, .badge-success, .pill-green {
  background: var(--gbg) !important; color: var(--g) !important; border: 1px solid var(--gbr) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.08em !important;
}
.status-cancelled, .status-error, .badge-error, .pill-red {
  background: var(--rbg) !important; color: var(--r) !important; border: 1px solid var(--rbr) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.08em !important;
}
.status-pending, .badge-warning, .pill-yellow {
  background: var(--ybg) !important; color: var(--y) !important; border: 1px solid var(--ybr) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* ----------- LINKS ----------- */
a { color: var(--p); transition: color 0.2s; }
a:hover { color: var(--pl); }

/* ----------- SCROLLBAR ----------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(199,242,46,0.3); }

/* ----------- SELECTION ----------- */
::selection { background: rgba(199,242,46,0.3); color: #fff; }

/* ----------- DIVIDERS ----------- */
hr, .divider { border-color: var(--b1) !important; opacity: 0.6; }

/* ----------- ERROR / SUCCESS TEXT ----------- */
.lerr, .error, .err-msg { color: var(--r) !important; font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; }
.success-msg { color: var(--g) !important; }

/* ----------- CHARTS (Chart.js color overrides) ----------- */
canvas { filter: hue-rotate(220deg) saturate(0.9); }

/* ----------- BRAND TICKER (top stripe for parity with marketing) ----------- */
body::before {
  content: "NEVERMISSED  ·  VOICE RECEPTIONIST  ·  AGENTIC BY DEFAULT  ·  PSTN-NATIVE  ·  24/7";
  position: fixed; top: 0; left: 0; right: 0;
  background: rgba(8,8,10,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--b1);
  color: var(--p);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  padding: 6px 18px;
  text-align: center;
  z-index: 9998;
  pointer-events: none;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(199,242,46,0.35);
}
body { padding-top: 26px !important; }
.sidebar { top: 26px !important; height: calc(100vh - 26px) !important; }
.ls { padding-top: 26px; }