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

:root,
[data-theme="light"] {
  --color-black: #000000;
  --color-navy: #062e3a;
  --color-blue-dark: #0b546a;
  --color-blue-mid: #107796;
  --color-blue-light: #00d2ff;
  --color-gray-900: #031820;
  --color-gray-700: #084051;
  --color-gray-500: #426271;
  --color-gray-300: #6d8a96;
  --color-gray-100: #e6eff3;
  --color-gray-50: #f3f7fa;
  --color-white: #ffffff;
  --color-success: #1abc9c;
  --color-warning: #f39200;
  --color-danger: #e8308a;
  --color-info: #41c0f0;
  --font-family-base: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
  --shadow-sm: 0 2px 8px rgba(6, 46, 58, 0.14);
  --shadow-md: 0 14px 36px rgba(6, 46, 58, 0.2);
  --shadow-lg: 0 24px 52px rgba(6, 46, 58, 0.24);
  --intelego-accent: #f39200;
  --intelego-deep: #062e3a;
  --intelego-mid: #0b546a;
  --intelego-cyan: #41c0f0;

  --iio-bg: #eef5f8;
  --iio-bg-subtle: #f7fbfd;
  --iio-bg-raised: #ffffff;
  --iio-bg-sunken: #e3edf2;
  --iio-surface: #ffffff;
  --iio-surface-soft: #f2f8fb;
  --iio-surface-mid: #e6f0f5;
  --iio-ink: #18313b;
  --iio-ink-soft: #174657;
  --iio-muted: #426271;
  --iio-muted-light: #6d8a96;
  --iio-line: #bfd0d8;
  --iio-line-strong: #8faab7;
  --iio-line-subtle: #d9e5ea;
  --iio-accent: #0b546a;
  --iio-accent-mid: #107796;
  --iio-accent-light: #dff3fb;
  --iio-accent-hover: #084051;
  --iio-ok: #0e6252;
  --iio-ok-bg: #daf3ed;
  --iio-ok-line: #91d8c6;
  --iio-warn: #8d5500;
  --iio-warn-bg: #fdeed4;
  --iio-warn-line: #efc06e;
  --iio-risk: #8a1c57;
  --iio-risk-bg: #f8dce9;
  --iio-risk-line: #eba3c8;
  --iio-info: #0b6682;
  --iio-info-bg: #ddf2fa;
  --iio-info-line: #97d4ea;
  --iio-h-bg: #f7fbfd;
  --iio-h-ink: #18313b;
  --iio-h-muted: #55717d;
  --iio-h-line: #c9d7de;
  --iio-code-bg: rgba(6, 46, 58, 0.08);
  --iio-code-ink: #0b4e63;
  --iio-pre-bg: #082731;
  --iio-pre-line: rgba(65, 192, 240, 0.24);
  --iio-thead-bg: #def1f8;
  --iio-tr-hover: #eff8fc;
  --iio-tr-active: #e3f1f6;
  --iio-tab-bg: #edf5f9;
  --iio-tab-active-bg: #dcecf4;
  --iio-tab-active-ink: #0b546a;
  --iio-shadow-sm: 0 2px 8px rgba(6, 46, 58, 0.14);
  --iio-shadow-md: 0 14px 36px rgba(6, 46, 58, 0.2);
  --iio-shadow-lg: 0 24px 52px rgba(6, 46, 58, 0.24);

  --intelego-page-glow-a: rgba(65, 192, 240, 0.16);
  --intelego-page-glow-b: rgba(243, 146, 0, 0.16);
  --intelego-page-bg: linear-gradient(180deg, #f8fcff 0%, #edf4f8 52%, #e7f0f4 100%);
  --intelego-header-core: linear-gradient(120deg, rgba(6, 46, 58, 0.95), rgba(11, 84, 106, 0.94));
  --intelego-header-glow: radial-gradient(circle at 88% 50%, rgba(243, 146, 0, 0.2), transparent 46%);
  --intelego-header-ink: #f5fbff;
  --intelego-header-muted: rgba(245, 251, 255, 0.88);
  --intelego-nav-bg: rgba(255, 255, 255, 0.9);
  --intelego-nav-hover-bg: rgba(65, 192, 240, 0.13);
  --intelego-card-bg: linear-gradient(170deg, rgba(255, 255, 255, 0.95), rgba(240, 248, 252, 0.95));
  --intelego-card-glow: radial-gradient(circle at 90% 5%, rgba(65, 192, 240, 0.12), transparent 40%);
  --intelego-button-bg: linear-gradient(180deg, #f39200, #d37b00);
  --intelego-button-hover-bg: linear-gradient(180deg, #ffa929, #e18a0f);
  --intelego-secondary-button-bg: linear-gradient(180deg, #0b546a, #084051);
  --intelego-secondary-button-hover-bg: linear-gradient(180deg, #107796, #0b546a);
  --intelego-theme-picker-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.95), rgba(241, 248, 252, 0.95));
  --intelego-soft-panel-bg: rgba(255, 255, 255, 0.9);
  --intelego-chip-bg: rgba(65, 192, 240, 0.1);
}

[data-theme="dark"] {
  --iio-bg: #0c161b;
  --iio-bg-subtle: #111d24;
  --iio-bg-raised: #15242c;
  --iio-bg-sunken: #091015;
  --iio-surface: #15242c;
  --iio-surface-soft: #1a2d37;
  --iio-surface-mid: #112029;
  --iio-ink: #d8e7ed;
  --iio-ink-soft: #c0d6df;
  --iio-muted: #87a3b1;
  --iio-muted-light: #618091;
  --iio-line: #28414d;
  --iio-line-strong: #3d5d6d;
  --iio-line-subtle: #1a2e38;
  --iio-accent: #5eb5cf;
  --iio-accent-mid: #41c0f0;
  --iio-accent-light: #143340;
  --iio-accent-hover: #8fd6ee;
  --iio-ok: #63d3bc;
  --iio-ok-bg: #0d372f;
  --iio-ok-line: #1b594b;
  --iio-warn: #f0bf63;
  --iio-warn-bg: #422907;
  --iio-warn-line: #704c16;
  --iio-risk: #ef98c2;
  --iio-risk-bg: #421127;
  --iio-risk-line: #723049;
  --iio-info: #83d4f3;
  --iio-info-bg: #133543;
  --iio-info-line: #1c5870;
  --iio-h-bg: #101b22;
  --iio-h-ink: #d8e7ed;
  --iio-h-muted: #87a3b1;
  --iio-h-line: #28414d;
  --iio-code-bg: rgba(65, 192, 240, 0.12);
  --iio-code-ink: #9edff6;
  --iio-pre-bg: #08141a;
  --iio-pre-line: rgba(65, 192, 240, 0.2);
  --iio-thead-bg: #14313d;
  --iio-tr-hover: #1a2d37;
  --iio-tr-active: #1d3846;
  --iio-tab-bg: #14262f;
  --iio-tab-active-bg: #173340;
  --iio-tab-active-ink: #83d4f3;
  --iio-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
  --iio-shadow-md: 0 14px 36px rgba(0, 0, 0, 0.34);
  --iio-shadow-lg: 0 24px 52px rgba(0, 0, 0, 0.42);

  --intelego-page-glow-a: rgba(65, 192, 240, 0.1);
  --intelego-page-glow-b: rgba(243, 146, 0, 0.1);
  --intelego-page-bg: linear-gradient(180deg, #0d171d 0%, #101d24 52%, #0b1419 100%);
  --intelego-header-core: linear-gradient(120deg, rgba(6, 46, 58, 0.98), rgba(11, 84, 106, 0.9));
  --intelego-header-glow: radial-gradient(circle at 88% 50%, rgba(243, 146, 0, 0.14), transparent 46%);
  --intelego-header-ink: #eef8fb;
  --intelego-header-muted: rgba(220, 235, 241, 0.84);
  --intelego-nav-bg: rgba(17, 29, 36, 0.9);
  --intelego-nav-hover-bg: rgba(65, 192, 240, 0.16);
  --intelego-card-bg: linear-gradient(170deg, rgba(21, 36, 44, 0.95), rgba(17, 32, 41, 0.95));
  --intelego-card-glow: radial-gradient(circle at 90% 5%, rgba(65, 192, 240, 0.08), transparent 40%);
  --intelego-button-bg: linear-gradient(180deg, #d98509, #ad6700);
  --intelego-button-hover-bg: linear-gradient(180deg, #f0a63f, #ca7808);
  --intelego-secondary-button-bg: linear-gradient(180deg, #146581, #0c4a5d);
  --intelego-secondary-button-hover-bg: linear-gradient(180deg, #1b85a7, #146581);
  --intelego-theme-picker-bg: linear-gradient(120deg, rgba(21, 36, 44, 0.95), rgba(17, 32, 41, 0.95));
  --intelego-soft-panel-bg: rgba(21, 36, 44, 0.92);
  --intelego-chip-bg: rgba(65, 192, 240, 0.14);
}

html,
body {
  background:
    radial-gradient(circle at 12% -10%, var(--intelego-page-glow-a), transparent 36%),
    radial-gradient(circle at 88% 0%, var(--intelego-page-glow-b), transparent 30%),
    var(--intelego-page-bg);
  color: var(--iio-ink);
}

body {
  min-height: 100vh;
}

header {
  border-bottom: 1px solid color-mix(in srgb, var(--iio-line-strong) 70%, transparent);
  background:
    var(--intelego-header-core),
    var(--intelego-header-glow);
  color: var(--intelego-header-ink);
  box-shadow: var(--iio-shadow-sm);
}

header h1,
h1,
h2,
h3 {
  letter-spacing: 0.015em;
}

header h1 {
  text-transform: none;
  font-weight: 700;
}

header p {
  color: var(--intelego-header-muted);
}

nav {
  background: var(--intelego-nav-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--iio-line) 75%, transparent);
  backdrop-filter: blur(4px);
}

nav a {
  color: var(--iio-accent);
  border: 1px solid transparent;
}

nav a:hover {
  color: var(--iio-accent-hover);
  border-color: color-mix(in srgb, var(--iio-line-strong) 80%, transparent);
  background: var(--intelego-nav-hover-bg);
}

a {
  color: var(--iio-info);
}

a:hover {
  color: var(--iio-accent-hover);
}

.sidebar,
.card {
  background:
    var(--intelego-card-bg),
    var(--intelego-card-glow);
  border: 1px solid color-mix(in srgb, var(--iio-line) 85%, transparent);
  box-shadow: var(--iio-shadow-sm);
}

.card:hover,
.sidebar:hover {
  border-color: color-mix(in srgb, var(--color-warning) 56%, transparent);
  box-shadow: var(--iio-shadow-md);
}

.card-header {
  border-bottom-color: color-mix(in srgb, var(--iio-line-strong) 90%, transparent);
}

table {
  background: color-mix(in srgb, var(--iio-surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--iio-line) 90%, transparent);
}

thead {
  background: linear-gradient(180deg, color-mix(in srgb, var(--iio-info-line) 48%, transparent), color-mix(in srgb, var(--iio-info-line) 16%, transparent));
  border-bottom-color: color-mix(in srgb, var(--iio-line-strong) 90%, transparent);
}

th,
td {
  border-color: color-mix(in srgb, var(--iio-line) 70%, transparent);
}

code {
  background: var(--iio-code-bg);
  color: var(--iio-code-ink);
  border: 1px solid color-mix(in srgb, var(--iio-line) 80%, transparent);
}

pre {
  background: var(--iio-pre-bg);
  color: #e7fbff;
  border-color: var(--iio-pre-line);
}

button,
.btn {
  background: var(--intelego-button-bg);
  border-color: #d17a00;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(243, 146, 0, 0.2), 0 8px 18px rgba(211, 123, 0, 0.2);
}

button:hover,
.btn:hover {
  background: var(--intelego-button-hover-bg);
  border-color: #dd860d;
}

.btn-secondary {
  background: var(--intelego-secondary-button-bg);
  border-color: #084051;
  color: #f1f9fc;
}

.btn-secondary:hover {
  background: var(--intelego-secondary-button-hover-bg);
  border-color: #0b546a;
}

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

.badge-active,
.badge-passed {
  background: color-mix(in srgb, var(--iio-ok-bg) 88%, transparent);
  color: var(--iio-ok);
}

.badge-pending {
  background: color-mix(in srgb, var(--iio-warn-bg) 88%, transparent);
  color: var(--iio-warn);
}

.badge-failed,
.badge-archived {
  background: color-mix(in srgb, var(--iio-risk-bg) 88%, transparent);
  color: var(--iio-risk);
}

.iio-theme-picker {
  background: var(--intelego-theme-picker-bg);
  border-color: color-mix(in srgb, var(--iio-line-strong) 85%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--iio-info-line) 32%, transparent);
}

.iio-theme-picker label {
  color: var(--iio-ink-soft);
}

.iio-theme-picker select {
  background: var(--iio-surface);
  color: var(--iio-ink);
  border-color: color-mix(in srgb, var(--iio-line-strong) 85%, transparent);
}

/* Legacy utility strip inspired by intelego.net top tools area. */
.intelego-classic-topline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--iio-line) 85%, transparent);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--intelego-soft-panel-bg);
}

.intelego-classic-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--iio-line) 88%, transparent);
  background: var(--intelego-chip-bg);
  color: var(--iio-accent);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 700;
}

.intelego-classic-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.intelego-classic-service {
  border: 1px solid color-mix(in srgb, var(--iio-line) 85%, transparent);
  border-radius: 10px;
  padding: 12px;
  background: color-mix(in srgb, var(--iio-surface) 94%, transparent);
}

.intelego-classic-service h3 {
  margin: 0 0 8px;
  color: var(--iio-accent);
  font-size: 0.96rem;
}

.intelego-classic-service p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--iio-muted);
}

.intelego-classic-kontakt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.intelego-classic-kontakt .item {
  border: 1px solid color-mix(in srgb, var(--iio-line) 82%, transparent);
  border-radius: 8px;
  padding: 8px;
  background: var(--intelego-soft-panel-bg);
}

@media (max-width: 900px) {
  .intelego-classic-topline {
    border-radius: 10px;
  }
}