/**
 * ETEA Crisis Management — Master Design System
 * Dark monolithic B2B SaaS. 4/8px grid. 150ms motion only.
 */

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

:root {
  color-scheme: dark;

  /* ── Palette ─────────────────────────────────── */
  --et-bg:           #0a0e14;
  --et-bg-elevated:  #0f141c;
  --et-surface:      #141a24;
  --et-surface-2:    #1a2230;
  --et-border:       #2a3444;
  --et-border-subtle:#1e2633;

  --et-text:         #e8ecf1;
  --et-text-soft:    #a8b0bd;
  --et-text-muted:   #6b7585;

  /* Single controlled accent — alerts / critical */
  --et-alert:        #dc2626;
  --et-alert-soft:   rgba(220, 38, 38, 0.12);
  --et-alert-border: rgba(220, 38, 38, 0.35);

  /* Secondary signal — warnings only */
  --et-warn:         #d97706;
  --et-warn-soft:    rgba(217, 119, 6, 0.12);

  /* Monochrome action (no rainbow) */
  --et-action:       #e8ecf1;
  --et-action-bg:    #1a2230;
  --et-action-hover: #232d3d;

  /* Legacy token bridge (dashboard critical-css) */
  --bg:              var(--et-bg);
  --bg2:             var(--et-bg-elevated);
  --surface:         var(--et-surface);
  --border:          var(--et-border);
  --text:            var(--et-text);
  --accent:          var(--et-alert);
  --warn:            var(--et-warn);
  --accent-rgb:      220 38 38;
  --warn-rgb:        217 119 6;

  /* Sergio bridge */
  --sergio-bg:           var(--et-bg);
  --sergio-bg-soft:      var(--et-bg-elevated);
  --sergio-surface:      var(--et-surface);
  --sergio-surface-soft: var(--et-surface-2);
  --sergio-border-subtle:var(--et-border-subtle);
  --sergio-border-strong:var(--et-border);
  --sergio-text:         var(--et-text);
  --sergio-text-soft:    var(--et-text-soft);
  --sergio-muted:        var(--et-text-muted);
  --sergio-danger:       var(--et-alert);
  --sergio-danger-soft:  var(--et-alert-soft);
  --sergio-accent:       var(--et-action);
  --sergio-accent-soft:  rgba(232, 236, 241, 0.08);
  --sergio-gold:         var(--et-warn);
  --sergio-gold-soft:    var(--et-warn-soft);
  --sergio-success:      #4ade80;
  --sergio-success-soft: rgba(74, 222, 128, 0.1);
  --sergio-radius-lg:    4px;
  --sergio-radius-md:    4px;
  --sergio-shadow-soft:  0 4px 16px rgba(0, 0, 0, 0.35);
  --sergio-backdrop:     rgba(0, 0, 0, 0.72);

  --wp-text:             var(--et-text);
  --wp-text-muted:       var(--et-text-muted);
  --wp-border:           var(--et-border);
  --wp-border-light:     var(--et-border-subtle);
  --wp-primary:          var(--et-action);

  /* Spacing (4/8 grid) */
  --et-space-1: 4px;
  --et-space-2: 8px;
  --et-space-3: 12px;
  --et-space-4: 16px;
  --et-space-5: 24px;
  --et-space-6: 32px;

  --radius: 4px;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  --transition: 150ms ease;

  --sidebar-rgb: 15 20 28;
  --sidebar-alpha: 1;
  --topbar-rgb: 15 20 28;
  --topbar-alpha: 1;
  --main-bg-rgb: 10 14 20;
  --main-bg-alpha: 1;
}

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

html {
  background: var(--et-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--et-text);
  background: rgb(var(--main-bg-rgb) / var(--main-bg-alpha));
  letter-spacing: -0.01em;
}

/* ── Typography ──────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--et-text);
}

/* ── Icons ───────────────────────────────────── */
.et-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--et-text-muted);
  transition: color var(--transition);
}

.et-icon--sm {
  width: 14px;
  height: 14px;
}

a:hover .et-icon,
button:hover .et-icon,
.is-active .et-icon {
  color: var(--et-text);
}

.sergio-btn .et-icon,
.et-card__actions .et-icon {
  width: 16px;
  height: 16px;
}

/* ── Building effect (viewport entry) ────────── */
.et-build {
  opacity: 0;
  transform: translateY(4px) scale(0.992);
  filter: blur(3px);
  transition:
    opacity 150ms ease,
    transform 150ms ease,
    filter 150ms ease;
  will-change: opacity, transform, filter;
}

.et-build.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .et-build {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ── Modal enter ─────────────────────────────── */
.et-modal-enter {
  animation: etModalIn 150ms ease forwards;
}

@keyframes etModalIn {
  from { opacity: 0; transform: translateY(4px) scale(0.992); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .et-modal-enter { animation: none; }
}

/* ── Shell: sidebar ──────────────────────────── */
.sidebar {
  background: rgb(var(--sidebar-rgb) / var(--sidebar-alpha)) !important;
  border-right: 1px solid var(--et-border-subtle) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.sidebar nav a {
  display: flex !important;
  align-items: center !important;
  gap: var(--et-space-2) !important;
  padding: var(--et-space-2) var(--et-space-3) !important;
  border-radius: var(--radius) !important;
  color: var(--et-text-soft) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  transition: background var(--transition), color var(--transition), border-color var(--transition) !important;
}

.sidebar nav a:hover,
.sidebar nav a:focus-visible {
  background: var(--et-surface-2) !important;
  color: var(--et-text) !important;
  transform: none !important;
}

.sidebar nav a.is-active {
  background: var(--et-surface-2) !important;
  color: var(--et-text) !important;
  border-color: var(--et-border) !important;
}

.sidebar nav a.is-active .et-icon {
  color: var(--et-alert);
}

.sidebar a[href*="logout"] {
  display: flex !important;
  align-items: center !important;
  gap: var(--et-space-2) !important;
  padding: var(--et-space-2) var(--et-space-3) !important;
  border-radius: var(--radius) !important;
  color: var(--et-text-soft) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  transition: background 150ms ease, color 150ms ease !important;
}

.sidebar a[href*="logout"]:hover {
  background: var(--et-alert-soft) !important;
  color: #fca5a5 !important;
}

#pinBtn {
  border: 1px solid var(--et-border) !important;
  background: var(--et-surface) !important;
  color: var(--et-text-muted) !important;
  border-radius: var(--radius) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* ── Shell: topbar ───────────────────────────── */
.topbar {
  background: rgb(var(--topbar-rgb) / var(--topbar-alpha)) !important;
  border-bottom: 1px solid var(--et-border-subtle) !important;
  backdrop-filter: none !important;
  color: var(--et-text) !important;
}

/* ── Main content area ───────────────────────── */
main.flex-1 {
  padding: var(--et-space-5) !important;
}

@media (max-width: 640px) {
  main.flex-1 { padding: var(--et-space-4) !important; }
}

/* ── Charts / dashboard widgets ──────────────── */
.dashboard-chart-box {
  background: var(--et-surface) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

.dashboard-chart-title {
  color: var(--et-text-soft) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

/* ── Kill decorative motion ──────────────────── */
.animate-pulse,
.animate-bounce,
.blinking-alarm,
[class*="animate-"] {
  animation: none !important;
}

.backdrop-blur,
.backdrop-blur-sm,
.backdrop-blur-lg,
.backdrop-blur-xl {
  backdrop-filter: none !important;
}

/* Gradients → flat */
[class*="gradient"],
.bg-gradient-to-r,
.bg-gradient-to-br {
  background-image: none !important;
  background-color: var(--et-surface) !important;
}

#tsparticles { display: none !important; }

/* ── Settings panel ──────────────────────────── */
#settings-gear {
  background: var(--et-surface) !important;
  border: 1px solid var(--et-border) !important;
  color: var(--et-text-muted) !important;
  box-shadow: var(--shadow) !important;
  font-size: 0 !important;
}

#settings-gear::after {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}

#settings-panel {
  background: var(--et-surface) !important;
  border-left: 1px solid var(--et-border) !important;
  color: var(--et-text) !important;
}

#settings-panel input[type="text"],
#settings-panel input[type="color"],
#settings-panel input[type="range"] {
  background: var(--et-bg-elevated) !important;
  border: 1px solid var(--et-border) !important;
  color: var(--et-text) !important;
}

#settings-backdrop {
  background: var(--sergio-backdrop) !important;
  backdrop-filter: none !important;
}

/* ── Scrollbars ──────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--et-bg); }
::-webkit-scrollbar-thumb { background: var(--et-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3d4a5c; }

/* ── Focus rings ─────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--et-text-soft);
  outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}