/* Theme: knight-rider (IIO unified schema, based on b2b solution-provider) */
@import url('../../../b2b/solution-provider/assets/style.css');

:root {
  --color-black: #000000;
  --color-navy: #0b0f18;
  --color-blue-dark: #2a1212;
  --color-blue-mid: #6a1313;
  --color-blue-light: #ff3131;
  --color-gray-900: #0a0d14;
  --color-gray-700: #182030;
  --color-gray-500: #5f6e86;
  --color-gray-300: #2b3549;
  --color-gray-100: #121a29;
  --color-gray-50: #0d1320;
  --color-white: #f6f8ff;
  --color-success: #3ad67b;
  --color-warning: #f7a637;
  --color-danger: #ff3b3b;
  --color-info: #ff5e5e;
  --font-family-base: 'Rajdhani', 'Eurostile', 'Arial Narrow', sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 26px 48px rgba(0, 0, 0, 0.55);
  --kr-led-size: clamp(90px, 16vw, 160px);
  --kr-led-height: 14px;
  --kr-led-glow: rgba(255, 54, 54, 0.9);

  --iio-bg: #070a12;
  --iio-surface: #0f1522;
  --iio-ink: #f6f8ff;
  --iio-muted: #b2c0d8;
  --iio-line: #2b3549;
  --iio-accent: #ff3131;
  --iio-accent-mid: #ff5e5e;
  --iio-accent-light: #3a1515;
  --iio-ok: #3ad67b;
  --iio-warn: #f7a637;
  --iio-risk: #ff3b3b;
  --iio-thead-bg: #151f30;
  --iio-tab-bg: #101a2b;
  --iio-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
}

html,
body {
  background:
    radial-gradient(circle at 15% -20%, rgba(255, 56, 56, 0.24), transparent 42%),
    radial-gradient(circle at 82% 0%, rgba(255, 82, 82, 0.15), transparent 36%),
    linear-gradient(160deg, #070a12 0%, #070b15 42%, #0c101a 100%);
  color: var(--color-white);
}

body {
  position: relative;
  min-height: 100vh;
  letter-spacing: 0.01em;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.22) 100%),
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.02) 0 1px,
      transparent 1px 3px
    );
  opacity: 0.18;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: -30%;
  width: 26%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 56, 56, 0.5) 45%, transparent 100%);
  filter: blur(22px);
  opacity: 0.34;
  animation: kr-scan 5.8s linear infinite;
  z-index: 0;
}

header,
nav,
main,
footer,
.container,
.card,
.sidebar,
.table-wrap,
.iio-theme-picker {
  position: relative;
  z-index: 1;
}

header,
#app-header {
  border-bottom: 1px solid rgba(255, 49, 49, 0.35);
  background:
    linear-gradient(120deg, rgba(6, 8, 14, 0.92), rgba(19, 7, 8, 0.94)),
    radial-gradient(circle at 8% 50%, rgba(255, 54, 54, 0.2), transparent 48%);
  overflow: visible; /* allow scanner to sit on the border edge */
  position: relative;
}

/* LED track — the dark diffuser strip KITT's scanner sits in.
   Positioned at the very bottom edge of the header, like on the car's front bumper. */
header::before,
#app-header::before {
  content: '';
  position: absolute;
  left: clamp(22px, 6vw, 86px);
  right: clamp(22px, 6vw, 86px);
  bottom: -4px;           /* straddles the header border — sits ON the edge */
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 49, 49, 0.08), rgba(255, 49, 49, 0.03) 22%, rgba(255, 49, 49, 0.03) 78%, rgba(255, 49, 49, 0.08));
  box-shadow:
    inset 0 0 0 1px rgba(255, 95, 95, 0.15),
    0 0 8px rgba(255, 49, 49, 0.15);
  z-index: 10;
}

/* The moving red LED dot — KITT's iconic larson scanner. */
header::after,
#app-header::after {
  content: '';
  position: absolute;
  left: clamp(22px, 6vw, 86px);
  bottom: -4px;           /* aligned with the track */
  width: var(--kr-led-size);
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      rgba(255, 38, 38, 0.0)  0%,
      rgba(255, 81, 81, 0.7) 20%,
      rgba(255, 130, 130, 1.0) 50%,
      rgba(255, 81, 81, 0.7) 80%,
      rgba(255, 38, 38, 0.0) 100%);
  box-shadow:
    0 0 8px  rgba(255, 90, 90, 1.0),
    0 0 20px var(--kr-led-glow),
    0 0 40px rgba(255, 70, 70, 0.7),
    0 0 60px rgba(255, 49, 49, 0.4);
  filter: saturate(120%);
  transform-origin: center;
  animation: kr-led-scan 2.6s ease-in-out infinite;
  z-index: 11;
}

header h1,
h1,
h2,
h3 {
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

header p {
  color: #d2dced;
}

nav {
  background: rgba(10, 14, 22, 0.92);
  border-bottom: 1px solid rgba(255, 49, 49, 0.3);
  backdrop-filter: blur(3px);
}

nav a {
  color: #e7edf6;
  border: 1px solid transparent;
}

nav a:hover {
  background: rgba(255, 49, 49, 0.15);
  border-color: rgba(255, 49, 49, 0.55);
  color: #fff7f7;
  text-shadow: 0 0 9px rgba(255, 49, 49, 0.35);
}

a {
  color: #ff6666;
}

a:hover {
  color: #ff9393;
}

.sidebar,
.card {
  background: linear-gradient(160deg, rgba(10, 14, 22, 0.92), rgba(14, 20, 33, 0.95));
  border: 1px solid rgba(255, 49, 49, 0.2);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 49, 49, 0.04);
  backdrop-filter: blur(1.5px);
}

.card-header {
  border-bottom-color: rgba(255, 49, 49, 0.7);
}

.card:hover,
.sidebar:hover {
  border-color: rgba(255, 108, 108, 0.45);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.42),
    0 0 24px rgba(255, 49, 49, 0.12),
    inset 0 0 0 1px rgba(255, 108, 108, 0.11);
}

table {
  background: rgba(11, 15, 24, 0.9);
  border: 1px solid rgba(255, 49, 49, 0.2);
}

thead {
  background: linear-gradient(180deg, rgba(255, 49, 49, 0.22), rgba(255, 49, 49, 0.08));
  border-bottom-color: rgba(255, 49, 49, 0.45);
}

th,
td {
  border-color: rgba(43, 53, 73, 0.9);
}

code {
  background: rgba(22, 38, 29, 0.75);
  color: #93f7bb;
  border: 1px solid rgba(58, 214, 123, 0.35);
}

pre {
  background: #0a111a;
  color: #9ef6c5;
  border-color: rgba(58, 214, 123, 0.35);
}

button,
.btn {
  background: linear-gradient(180deg, #ff3a3a, #a81212);
  border-color: #ff5d5d;
  color: #fff8f8;
  box-shadow: 0 0 0 1px rgba(255, 49, 49, 0.3), 0 0 18px rgba(255, 49, 49, 0.25);
}

button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(255, 110, 110, 0.9);
  outline-offset: 2px;
}

button:hover,
.btn:hover {
  background: linear-gradient(180deg, #ff5b5b, #be1b1b);
  border-color: #ff7f7f;
}

.btn-secondary {
  background: rgba(17, 24, 37, 0.94);
  border-color: rgba(88, 103, 133, 0.65);
  color: #dde6f6;
}

.btn-secondary:hover {
  background: rgba(24, 34, 50, 0.95);
  border-color: rgba(255, 49, 49, 0.5);
  color: #ffffff;
}

.badge-active {
  background: rgba(58, 214, 123, 0.2);
  color: #8df2b5;
}

.badge-pending {
  background: rgba(247, 166, 55, 0.2);
  color: #ffc979;
}

.badge-archived {
  background: rgba(95, 110, 134, 0.2);
  color: #c2cbdd;
}

.badge-passed {
  background: rgba(255, 94, 94, 0.2);
  color: #ff9e9e;
}

.badge-failed {
  background: rgba(255, 59, 59, 0.25);
  color: #ffb2b2;
}

.iio-theme-picker {
  background: rgba(9, 12, 19, 0.92);
  border-color: rgba(255, 49, 49, 0.4);
  box-shadow: inset 0 0 0 1px rgba(255, 49, 49, 0.08);
}

.iio-theme-picker label {
  color: #f8dede;
  letter-spacing: 0.04em;
}

.iio-theme-picker select {
  background: rgba(14, 19, 29, 0.95);
  color: #f5f8ff;
  border: 1px solid rgba(255, 49, 49, 0.5);
}

.iio-theme-picker select:focus {
  outline: 2px solid rgba(255, 49, 49, 0.55);
  outline-offset: 2px;
}

@keyframes kr-scan {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(520%);
  }
}

@keyframes kr-led-scan {
  0% {
    transform: translateX(0) scaleX(0.86);
    opacity: 0.92;
  }
  45% {
    transform: translateX(calc(100vw - var(--kr-led-size) - clamp(44px, 12vw, 172px))) scaleX(1);
    opacity: 1;
  }
  50% {
    transform: translateX(calc(100vw - var(--kr-led-size) - clamp(44px, 12vw, 172px))) scaleX(1);
    opacity: 0.96;
  }
  95% {
    transform: translateX(0) scaleX(0.86);
    opacity: 1;
  }
  100% {
    transform: translateX(0) scaleX(0.86);
    opacity: 0.92;
  }
}

@media (max-width: 900px) {
  header {
    padding: 18px 18px;
  }

  nav {
    padding-left: 14px;
    padding-right: 14px;
  }

  body::after {
    width: 34%;
    opacity: 0.3;
  }

  header::before,
  #app-header::before {
    left: 14px;
    right: 14px;
    bottom: -4px;
  }

  header::after,
  #app-header::after {
    left: 14px;
    bottom: -4px;
    width: clamp(78px, 30vw, 128px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none;
    opacity: 0.12;
  }

  header::after,
  #app-header::after {
    animation: none;
    opacity: 0.9;
  }
}

/* ═══ PORTAL BRIDGE ═════════════════════════════════════════════════════
   Maps --iio-* tokens to portal CSS vars (--accent, --bg etc.)
   This makes the theme work in the IIO Portal without JS.
   ═══════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --accent:        var(--iio-accent);
  --accent-fg:     var(--iio-on-accent, #ffffff);
  --tenant-accent: var(--iio-accent);
  --bg:            var(--iio-bg);
  --surface:       var(--iio-surface);
  --surface-2:     var(--iio-surface-soft, var(--iio-surface));
  --text:          var(--iio-ink);
  --text-1:        var(--iio-ink);
  --text-2:        var(--iio-muted);
  --text-3:        var(--iio-muted-light, var(--iio-muted));
  --border:        var(--iio-line);
  --border-hover:  var(--iio-line-strong, var(--iio-line));
  --green:         var(--iio-ok);
  --amber:         var(--iio-warn);
  --red:           var(--iio-risk);
}