/* NBrain Executive Live Preview & AI Ecosystem — Multi-Vertical Design System
   Adapted from NBrain Design System (tokens.css), NileERP 2026 & Odoo Enterprise Suite */

:root {
  --brand-primary: hsl(245, 82%, 64%);
  --brand-secondary: hsl(189, 94%, 43%);
  --brand-accent: hsl(168, 80%, 42%);
  --brand-glow: hsla(245, 82%, 64%, 0.26);
  --bg-canvas: hsl(228, 45%, 6%);
  --bg-surface: hsl(226, 38%, 10%);
  --bg-elevated: hsla(225, 32%, 15%, 0.78);
  --bg-glass: hsla(226, 35%, 12%, 0.72);
  --text-main: hsl(210, 40%, 98%);
  --text-muted: hsl(215, 20%, 69%);
  --border-subtle: hsla(215, 28%, 85%, 0.1);
  --border-strong: hsla(245, 82%, 64%, 0.42);
  --hero-gradient: radial-gradient(ellipse 85% 55% at 50% -10%, hsla(245, 82%, 64%, 0.22), transparent 70%);
}

/* Skin 1: Luxury Medical & Aesthetic Flagship (Mayo Clinic / Vezeeta VIP / Dubai Derma) */
[data-skin="medical"] {
  --brand-primary: hsl(172, 82%, 39%);
  --brand-secondary: hsl(196, 88%, 46%);
  --brand-accent: hsl(158, 76%, 44%);
  --brand-glow: hsla(172, 82%, 39%, 0.25);
  --border-strong: hsla(172, 82%, 45%, 0.45);
  --hero-gradient: radial-gradient(ellipse 85% 55% at 50% -10%, hsla(172, 82%, 39%, 0.24), transparent 70%);
}

/* Skin 2: Luxury Architecture, Finishing & Real Estate (Emaar / Foster+Partners Obsidian Gold) */
[data-skin="architecture"] {
  --brand-primary: hsl(42, 78%, 54%);
  --brand-secondary: hsl(32, 85%, 48%);
  --brand-accent: hsl(45, 92%, 62%);
  --brand-glow: hsla(42, 78%, 54%, 0.24);
  --border-strong: hsla(42, 78%, 54%, 0.45);
  --hero-gradient: radial-gradient(ellipse 85% 55% at 50% -10%, hsla(42, 78%, 54%, 0.22), transparent 70%);
}

/* Skin 3: Industrial, Trade, Wholesale & Enterprise ERP (Odoo Enterprise / SAP / NileERP) */
[data-skin="industrial_erp"] {
  --brand-primary: hsl(217, 91%, 60%);
  --brand-secondary: hsl(175, 84%, 40%);
  --brand-accent: hsl(199, 89%, 48%);
  --brand-glow: hsla(217, 91%, 60%, 0.25);
  --border-strong: hsla(217, 91%, 60%, 0.45);
  --hero-gradient: radial-gradient(ellipse 85% 55% at 50% -10%, hsla(217, 91%, 60%, 0.24), transparent 70%);
}

/* Light Mode Support */
html.light {
  --bg-canvas: hsl(210, 33%, 98%);
  --bg-surface: hsl(0, 0%, 100%);
  --bg-elevated: hsla(0, 0%, 100%, 0.92);
  --bg-glass: hsla(0, 0%, 100%, 0.85);
  --text-main: hsl(222, 47%, 11%);
  --text-muted: hsl(215, 16%, 42%);
  --border-subtle: hsla(222, 47%, 11%, 0.09);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: 'Cairo', 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-canvas);
  color: var(--text-main);
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.font-mono-code {
  font-family: 'JetBrains Mono', monospace;
}

.nb-hero-bg {
  background-image: var(--hero-gradient);
}

.nb-glass {
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.nb-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

.nb-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 20px 44px var(--brand-glow);
}

.nb-btn-primary {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: #ffffff;
  font-weight: 800;
  border-radius: 16px;
  box-shadow: 0 10px 28px var(--brand-glow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

[data-skin="architecture"] .nb-btn-primary {
  color: #090d16;
}

.nb-btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 14px 34px var(--brand-glow);
}

.nb-badge {
  background: var(--brand-glow);
  border: 1px solid var(--border-strong);
  color: var(--text-main);
}

.nb-gradient-text {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Modern Web Guidance: light-dismiss-a-dialog backdrop styling */
dialog#auditDialog {
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  background: var(--bg-surface);
  color: var(--text-main);
  max-width: 680px;
  width: calc(100% - 2rem);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.65);
}

dialog::backdrop {
  background-color: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(6px);
}

/* Modern Web Guidance: scroll-entry-exit-effects (performant compositor properties + feature detection) */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes nb-scroll-enter {
      from {
        opacity: 0.15;
        transform: translateY(28px) scale(0.97);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes nb-scroll-exit {
      from {
        opacity: 1;
        transform: scale(1);
      }
      to {
        opacity: 0.35;
        transform: scale(0.98);
      }
    }

    .nb-scroll-card {
      animation:
        nb-scroll-enter auto linear backwards,
        nb-scroll-exit auto linear forwards;
      animation-timeline: view();
      animation-range: entry, exit;
    }
  }
}

/* Custom subtle scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsla(215, 20%, 60%, 0.35);
  border-radius: 999px;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.55; }
}

.live-dot {
  animation: pulse-dot 1.8s infinite;
}