/*
 * ixFabric Looking Glass theme for Alice-LG
 * Brand tokens + aliases mirrored from ixFabric Tailwind @theme / :root / @variant dark
 */

/* Comfortaa (same family as https://ixfabric.staging.oftc.be/) */
@font-face {
  font-family: "Comfortaa";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/theme/fonts/comfortaa-300.woff2") format("woff2");
}
@font-face {
  font-family: "Comfortaa";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/theme/fonts/comfortaa-400.woff2") format("woff2");
}
@font-face {
  font-family: "Comfortaa";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/theme/fonts/comfortaa-500.woff2") format("woff2");
}
@font-face {
  font-family: "Comfortaa";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/theme/fonts/comfortaa-600.woff2") format("woff2");
}
@font-face {
  font-family: "Comfortaa";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/theme/fonts/comfortaa-700.woff2") format("woff2");
}

:root,
html[data-theme="light"] {
  --font-sans: "Comfortaa", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";

  --brand-start: oklch(0.286 0.151 301.91);
  --brand-end: oklch(0.534 0.25 301.38);

  --brand-primary-50: oklch(0.927 0.042 300.81);
  --brand-primary-100: oklch(0.86 0.082 301.27);
  --brand-primary-200: oklch(0.723 0.172 301.23);
  --brand-primary-300: oklch(0.594 0.268 301.71);
  --brand-primary-400: oklch(0.447 0.236 301.91);
  --brand-primary-500: oklch(0.286 0.151 301.91);
  --brand-primary-600: oklch(0.26 0.137 301.97);
  --brand-primary-700: oklch(0.233 0.123 302.04);
  --brand-primary-800: oklch(0.203 0.108 301.73);
  --brand-primary-900: oklch(0.161 0.085 301.37);
  --brand-primary-950: oklch(0.111 0.059 300.83);

  --brand-secondary-50: oklch(0.95 0.025 301.14);
  --brand-secondary-100: oklch(0.9 0.05 300.62);
  --brand-secondary-200: oklch(0.81 0.101 301.24);
  --brand-secondary-300: oklch(0.715 0.157 300.88);
  --brand-secondary-400: oklch(0.627 0.211 301);
  --brand-secondary-500: oklch(0.534 0.25 301.38);
  --brand-secondary-600: oklch(0.459 0.216 301.39);
  --brand-secondary-700: oklch(0.376 0.176 301.27);
  --brand-secondary-800: oklch(0.303 0.142 301.58);
  --brand-secondary-900: oklch(0.22 0.102 301.22);
  --brand-secondary-950: oklch(0.175 0.081 302.17);

  --brand-text-0: oklch(100% 0.00011 271.152);
  --brand-text-50: oklch(0.923 0.007 247.87);
  --brand-text-100: oklch(0.854 0.014 247.98);
  --brand-text-200: oklch(0.706 0.026 248.19);
  --brand-text-300: oklch(0.56 0.02 245.58);
  --brand-text-400: oklch(0.413 0.015 248.18);
  --brand-text-500: oklch(0.262 0.009 248.18);
  --brand-text-600: oklch(0.241 0.01 248.22);
  --brand-text-700: oklch(0.216 0.007 248.16);
  --brand-text-800: oklch(0.189 0.006 236.91);
  --brand-text-900: oklch(0.148 0.005 247.79);
  --brand-text-950: oklch(0.104 0.003 196.59);
  --brand-text-1000: oklch(0% 0 0);

  --brand-back-0: oklch(0.991 0.001 287.33);
  --brand-back-50: oklch(0.923 0.007 247.87);
  --brand-back-100: oklch(0.991 0.001 287.33);
  --brand-back-200: oklch(0.975 0.002 228.43);
  --brand-back-300: oklch(0.966 0.002 228.43);
  --brand-back-400: oklch(0.957 0.003 247.8);
  --brand-back-500: oklch(0.942 0.005 247.84);
  --brand-back-600: oklch(0.783 0.022 248.09);
  --brand-back-700: oklch(0.621 0.02 245.53);
  --brand-back-800: oklch(0.456 0.015 244.49);
  --brand-back-900: oklch(0.302 0.01 241.99);
  --brand-back-950: oklch(0.216 0.007 248.16);
  --brand-back-1000: oklch(0% 0 0);

  /* @theme color aliases */
  --color-brand-start: var(--brand-start);
  --color-brand-end: var(--brand-end);
  --color-primary-50: var(--brand-primary-50);
  --color-primary-100: var(--brand-primary-100);
  --color-primary-200: var(--brand-primary-200);
  --color-primary-300: var(--brand-primary-300);
  --color-primary-400: var(--brand-primary-400);
  --color-primary-500: var(--brand-primary-500);
  --color-primary-600: var(--brand-primary-600);
  --color-primary-700: var(--brand-primary-700);
  --color-primary-800: var(--brand-primary-800);
  --color-primary-900: var(--brand-primary-900);
  --color-primary-950: var(--brand-primary-950);
  --color-secondary-50: var(--brand-secondary-50);
  --color-secondary-100: var(--brand-secondary-100);
  --color-secondary-200: var(--brand-secondary-200);
  --color-secondary-300: var(--brand-secondary-300);
  --color-secondary-400: var(--brand-secondary-400);
  --color-secondary-500: var(--brand-secondary-500);
  --color-secondary-600: var(--brand-secondary-600);
  --color-secondary-700: var(--brand-secondary-700);
  --color-secondary-800: var(--brand-secondary-800);
  --color-secondary-900: var(--brand-secondary-900);
  --color-secondary-950: var(--brand-secondary-950);
  --color-text-0: var(--brand-text-0);
  --color-text-50: var(--brand-text-50);
  --color-text-100: var(--brand-text-100);
  --color-text-200: var(--brand-text-200);
  --color-text-300: var(--brand-text-300);
  --color-text-400: var(--brand-text-400);
  --color-text-500: var(--brand-text-500);
  --color-text-600: var(--brand-text-600);
  --color-text-700: var(--brand-text-700);
  --color-text-800: var(--brand-text-800);
  --color-text-900: var(--brand-text-900);
  --color-text-950: var(--brand-text-950);
  --color-text-1000: var(--brand-text-1000);
  --color-back-0: var(--brand-back-0);
  --color-back-50: var(--brand-back-50);
  --color-back-100: var(--brand-back-100);
  --color-back-200: var(--brand-back-200);
  --color-back-300: var(--brand-back-300);
  --color-back-400: var(--brand-back-400);
  --color-back-500: var(--brand-back-500);
  --color-back-600: var(--brand-back-600);
  --color-back-700: var(--brand-back-700);
  --color-back-800: var(--brand-back-800);
  --color-back-900: var(--brand-back-900);
  --color-back-950: var(--brand-back-950);
  --color-back-1000: var(--brand-back-1000);

  /* Alice theme shorthand (maps to 500s) */
  --brand-primary: var(--brand-primary-500);
  --brand-secondary: var(--brand-secondary-500);
  --brand-text: var(--brand-text-500);
  --brand-back: var(--brand-back-500);

  /* Surfaces derived from scale */
  --ixf-surface: var(--brand-back-0);
  --ixf-surface-muted: var(--brand-back-200);
  --ixf-border: color-mix(in oklch, var(--brand-text-500) 14%, transparent);
  --ixf-muted: var(--brand-text-300);
  --ixf-danger: #c0392b;
  --ixf-success: #1e7a46;
  --ixf-link: var(--brand-primary-500);
  --ixf-link-hover: var(--brand-secondary-500);
  --ixf-sidebar-fg: var(--brand-text-0);
  --ixf-sidebar-muted: color-mix(in oklch, var(--brand-text-0) 62%, var(--brand-primary-500));
  --ixf-sidebar-bg: linear-gradient(
    165deg,
    var(--brand-start) 0%,
    var(--brand-end) 55%,
    color-mix(in oklch, var(--brand-end) 70%, black) 100%
  );
  --ixf-header-bg: color-mix(in oklch, var(--brand-start) 82%, black);
  --ixf-select-bg: color-mix(in oklch, var(--brand-end) 55%, black);
  --ixf-shadow: 0 1px 2px color-mix(in oklch, var(--brand-text-500) 8%, transparent),
    0 10px 28px color-mix(in oklch, var(--brand-primary-500) 10%, transparent);
  --ixf-brand-gradient: linear-gradient(120deg, var(--brand-start), var(--brand-end));

  /* Staging scrollbar helpers */
  --spacing: .25rem;
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --tw-border-style: solid;

  color-scheme: light;
}

/* @variant dark — Alice data-theme + system preference */
html[data-theme="dark"] {
  --brand-start: oklch(0.534 0.25 301.38);
  --brand-end: oklch(0.286 0.151 301.91);

  --brand-primary-950: oklch(0.95 0.025 301.14);
  --brand-primary-900: oklch(0.9 0.05 300.62);
  --brand-primary-800: oklch(0.81 0.101 301.24);
  --brand-primary-700: oklch(0.715 0.157 300.88);
  --brand-primary-600: oklch(0.627 0.211 301);
  --brand-primary-500: oklch(0.534 0.25 301.38);
  --brand-primary-400: oklch(0.459 0.216 301.39);
  --brand-primary-300: oklch(0.376 0.176 301.27);
  --brand-primary-200: oklch(0.303 0.142 301.58);
  --brand-primary-100: oklch(0.22 0.102 301.22);
  --brand-primary-50: oklch(0.175 0.081 302.17);

  --brand-secondary-950: oklch(0.927 0.042 300.81);
  --brand-secondary-900: oklch(0.86 0.082 301.27);
  --brand-secondary-800: oklch(0.723 0.172 301.23);
  --brand-secondary-700: oklch(0.594 0.268 301.71);
  --brand-secondary-600: oklch(0.447 0.236 301.91);
  --brand-secondary-500: oklch(0.286 0.151 301.91);
  --brand-secondary-400: oklch(0.26 0.137 301.97);
  --brand-secondary-300: oklch(0.233 0.123 302.04);
  --brand-secondary-200: oklch(0.203 0.108 301.73);
  --brand-secondary-100: oklch(0.161 0.085 301.37);
  --brand-secondary-50: oklch(0.111 0.059 300.83);

  --brand-text-1000: oklch(0.991 0.001 287.33);
  --brand-text-950: oklch(0.923 0.007 247.87);
  --brand-text-900: oklch(0.991 0.001 287.33);
  --brand-text-800: oklch(0.975 0.002 228.43);
  --brand-text-700: oklch(0.966 0.002 228.43);
  --brand-text-600: oklch(0.957 0.003 247.8);
  --brand-text-500: oklch(0.942 0.005 247.84);
  --brand-text-400: oklch(0.783 0.022 248.09);
  --brand-text-300: oklch(0.621 0.02 245.53);
  --brand-text-200: oklch(0.456 0.015 244.49);
  --brand-text-100: oklch(0.302 0.01 241.99);
  --brand-text-50: oklch(0.216 0.007 248.16);
  --brand-text-0: oklch(0% 0 0);

  --brand-back-1000: oklch(100% 0.00011 271.152);
  --brand-back-950: oklch(0.923 0.007 247.87);
  --brand-back-900: oklch(0.854 0.014 247.98);
  --brand-back-800: oklch(0.706 0.026 248.19);
  --brand-back-700: oklch(0.56 0.02 245.58);
  --brand-back-600: oklch(0.413 0.015 248.18);
  --brand-back-500: oklch(0.262 0.009 248.18);
  --brand-back-400: oklch(0.241 0.01 248.22);
  --brand-back-300: oklch(0.216 0.007 248.16);
  --brand-back-200: oklch(0.189 0.006 236.91);
  --brand-back-100: oklch(0.148 0.005 247.79);
  --brand-back-50: oklch(0.104 0.003 196.59);
  --brand-back-0: oklch(0% 0 0);

  --brand-primary: var(--brand-primary-500);
  --brand-secondary: var(--brand-secondary-500);
  --brand-text: var(--brand-text-500);
  --brand-back: var(--brand-back-500);

  --ixf-surface: color-mix(in oklch, var(--brand-back-500) 88%, black);
  --ixf-surface-muted: var(--brand-back-300);
  --ixf-border: color-mix(in oklch, var(--brand-text-500) 16%, transparent);
  --ixf-muted: var(--brand-text-300);
  --ixf-danger: #ff7b72;
  --ixf-success: #3dd68c;
  --ixf-link: var(--brand-primary-500);
  --ixf-link-hover: var(--brand-primary-600);
  --ixf-sidebar-fg: var(--brand-text-500);
  --ixf-sidebar-muted: color-mix(in oklch, var(--brand-text-500) 70%, var(--brand-back-500));
  --ixf-sidebar-bg: linear-gradient(
    165deg,
    color-mix(in oklch, var(--brand-end) 75%, black) 0%,
    var(--brand-end) 45%,
    color-mix(in oklch, var(--brand-start) 35%, black) 100%
  );
  --ixf-header-bg: color-mix(in oklch, var(--brand-end) 70%, black);
  --ixf-select-bg: color-mix(in oklch, var(--brand-secondary-500) 55%, black);
  --ixf-shadow: 0 1px 2px rgb(0 0 0 / 25%), 0 12px 32px rgb(0 0 0 / 35%);
  --ixf-brand-gradient: linear-gradient(120deg, var(--brand-start), var(--brand-end));

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"],
  html:not([data-theme]) {
    --brand-start: oklch(0.534 0.25 301.38);
    --brand-end: oklch(0.286 0.151 301.91);

    --brand-primary-950: oklch(0.95 0.025 301.14);
    --brand-primary-900: oklch(0.9 0.05 300.62);
    --brand-primary-800: oklch(0.81 0.101 301.24);
    --brand-primary-700: oklch(0.715 0.157 300.88);
    --brand-primary-600: oklch(0.627 0.211 301);
    --brand-primary-500: oklch(0.534 0.25 301.38);
    --brand-primary-400: oklch(0.459 0.216 301.39);
    --brand-primary-300: oklch(0.376 0.176 301.27);
    --brand-primary-200: oklch(0.303 0.142 301.58);
    --brand-primary-100: oklch(0.22 0.102 301.22);
    --brand-primary-50: oklch(0.175 0.081 302.17);

    --brand-secondary-950: oklch(0.927 0.042 300.81);
    --brand-secondary-900: oklch(0.86 0.082 301.27);
    --brand-secondary-800: oklch(0.723 0.172 301.23);
    --brand-secondary-700: oklch(0.594 0.268 301.71);
    --brand-secondary-600: oklch(0.447 0.236 301.91);
    --brand-secondary-500: oklch(0.286 0.151 301.91);
    --brand-secondary-400: oklch(0.26 0.137 301.97);
    --brand-secondary-300: oklch(0.233 0.123 302.04);
    --brand-secondary-200: oklch(0.203 0.108 301.73);
    --brand-secondary-100: oklch(0.161 0.085 301.37);
    --brand-secondary-50: oklch(0.111 0.059 300.83);

    --brand-text-1000: oklch(0.991 0.001 287.33);
    --brand-text-950: oklch(0.923 0.007 247.87);
    --brand-text-900: oklch(0.991 0.001 287.33);
    --brand-text-800: oklch(0.975 0.002 228.43);
    --brand-text-700: oklch(0.966 0.002 228.43);
    --brand-text-600: oklch(0.957 0.003 247.8);
    --brand-text-500: oklch(0.942 0.005 247.84);
    --brand-text-400: oklch(0.783 0.022 248.09);
    --brand-text-300: oklch(0.621 0.02 245.53);
    --brand-text-200: oklch(0.456 0.015 244.49);
    --brand-text-100: oklch(0.302 0.01 241.99);
    --brand-text-50: oklch(0.216 0.007 248.16);
    --brand-text-0: oklch(0% 0 0);

    --brand-back-1000: oklch(100% 0.00011 271.152);
    --brand-back-950: oklch(0.923 0.007 247.87);
    --brand-back-900: oklch(0.854 0.014 247.98);
    --brand-back-800: oklch(0.706 0.026 248.19);
    --brand-back-700: oklch(0.56 0.02 245.58);
    --brand-back-600: oklch(0.413 0.015 248.18);
    --brand-back-500: oklch(0.262 0.009 248.18);
    --brand-back-400: oklch(0.241 0.01 248.22);
    --brand-back-300: oklch(0.216 0.007 248.16);
    --brand-back-200: oklch(0.189 0.006 236.91);
    --brand-back-100: oklch(0.148 0.005 247.79);
    --brand-back-50: oklch(0.104 0.003 196.59);
    --brand-back-0: oklch(0% 0 0);

    --brand-primary: var(--brand-primary-500);
    --brand-secondary: var(--brand-secondary-500);
    --brand-text: var(--brand-text-500);
    --brand-back: var(--brand-back-500);

    --ixf-surface: color-mix(in oklch, var(--brand-back-500) 88%, black);
    --ixf-surface-muted: var(--brand-back-300);
    --ixf-border: color-mix(in oklch, var(--brand-text-500) 16%, transparent);
    --ixf-muted: var(--brand-text-300);
    --ixf-danger: #ff7b72;
    --ixf-success: #3dd68c;
    --ixf-link: var(--brand-primary-500);
    --ixf-link-hover: var(--brand-primary-600);
    --ixf-sidebar-fg: var(--brand-text-500);
    --ixf-sidebar-muted: color-mix(in oklch, var(--brand-text-500) 70%, var(--brand-back-500));
    --ixf-sidebar-bg: linear-gradient(
      165deg,
      color-mix(in oklch, var(--brand-end) 75%, black) 0%,
      var(--brand-end) 45%,
      color-mix(in oklch, var(--brand-start) 35%, black) 100%
    );
    --ixf-header-bg: color-mix(in oklch, var(--brand-end) 70%, black);
    --ixf-select-bg: color-mix(in oklch, var(--brand-secondary-500) 55%, black);
    --ixf-shadow: 0 1px 2px rgb(0 0 0 / 25%), 0 12px 32px rgb(0 0 0 / 35%);
    --ixf-brand-gradient: linear-gradient(120deg, var(--brand-start), var(--brand-end));

    color-scheme: dark;
  }
}

/* Base */
html,
body,
#app {
  background: var(--brand-back) !important;
  color: var(--brand-text) !important;
}

body {
  font-family: var(--font-sans);
}

a,
a:link,
a:visited {
  color: var(--ixf-link);
}

a:hover,
a:focus {
  color: var(--ixf-link-hover);
}

/* Sidebar */
.page-sidebar {
  background: var(--ixf-sidebar-bg) !important;
  color: var(--ixf-sidebar-fg) !important;
  border-right: 1px solid color-mix(in oklch, white 10%, transparent);
}

.page-sidebar h2 {
  color: var(--ixf-sidebar-muted) !important;
  letter-spacing: 0.04em;
}

.page-sidebar .sidebar-header {
  background: var(--ixf-header-bg) !important;
  color: var(--ixf-sidebar-fg) !important;
  border-bottom: 1px solid color-mix(in oklch, white 12%, transparent);
  position: relative;
}

/* Main content top bar (Alice default is white) */
.page-header {
  background: var(--ixf-header-bg) !important;
  color: var(--ixf-sidebar-fg) !important;
  border-bottom: 1px solid color-mix(in oklch, white 12%, transparent) !important;
  border-color: color-mix(in oklch, white 12%, transparent) !important;
  box-shadow: none !important;
}

.page-header,
.page-header a,
.page-header h1,
.page-header h2,
.page-header h3,
.page-header .title {
  color: var(--ixf-sidebar-fg) !important;
}

.page-sidebar .sidebar-header .title h1,
.page-sidebar .sidebar-header .title p,
.page-sidebar .sidebar-header .logo a,
.page-sidebar .sidebar-header .logo-icon {
  color: var(--ixf-sidebar-fg) !important;
}

.page-sidebar .sidebar-header .title h1 {
  font-weight: 700;
  background: var(--ixf-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  filter: brightness(1.35);
}

.page-sidebar .routeservers-list a.routeserver-id {
  color: var(--ixf-sidebar-fg) !important;
}

.page-sidebar .routeservers-list a.routeserver-id:hover {
  color: #fff !important;
}

.page-sidebar .routeservers-list .routeserver-status .bird-version {
  color: var(--ixf-sidebar-muted) !important;
}

.page-sidebar .routeservers-list .routeserver-status .api-error {
  color: #ffb4a8 !important;
}

.page-sidebar .routeservers-list > ul li.active,
.page-sidebar .routeservers-list > ul li:hover {
  background: color-mix(in oklch, white 10%, transparent);
  border-radius: 6px;
}

/* City dropdown */
.page-sidebar .routeservers-groups-select .btn-select {
  background: var(--ixf-select-bg) !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: 6px;
}

.page-sidebar .routeservers-groups-select .btn-select:focus,
.page-sidebar .routeservers-groups-select .btn-select:hover {
  background: color-mix(in oklch, var(--brand-primary) 55%, black) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px color-mix(in oklch, white 25%, transparent);
}

.page-sidebar .routeservers-groups-select .dropdown-options {
  background: var(--ixf-surface) !important;
  color: var(--brand-text) !important;
  border: 1px solid var(--ixf-border);
  box-shadow: var(--ixf-shadow) !important;
}

.page-sidebar .routeservers-groups-select .btn-option {
  color: var(--brand-text) !important;
}

.page-sidebar .routeservers-groups-select .btn-option:hover {
  background: color-mix(in oklch, var(--brand-primary) 12%, var(--ixf-surface)) !important;
  color: var(--brand-primary) !important;
}

/* Main content */
.page-content {
  background-color: var(--brand-back) !important;
  background-image:
    radial-gradient(1200px 500px at 90% -10%, color-mix(in oklch, var(--brand-primary) 16%, transparent), transparent 60%),
    radial-gradient(900px 400px at 10% 110%, color-mix(in oklch, var(--brand-secondary) 12%, transparent), transparent 55%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  color: var(--brand-text) !important;
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.welcome-title,
.card-header {
  color: var(--brand-text) !important;
}

/* Cards / tables / panels */
.card,
.panel,
.well,
.lookup-results,
.routes-list,
.neighbors-table-container {
  background: var(--ixf-surface) !important;
  color: var(--brand-text) !important;
  border: 1px solid var(--ixf-border) !important;
  box-shadow: var(--ixf-shadow) !important;
  border-radius: 10px !important;
}

.card::before {
  content: "";
  display: block;
  height: 3px;
  margin: -15px -15px 12px;
  border-radius: 10px 10px 0 0;
  background: var(--ixf-brand-gradient);
}

.table,
.table td,
.table th,
.table > tbody > tr > td,
.table > thead > tr > th {
  background-color: transparent !important;
  color: var(--brand-text) !important;
  border-color: var(--ixf-border) !important;
}

.table > thead > tr > th {
  color: var(--ixf-muted) !important;
  font-weight: 600;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: color-mix(in oklch, var(--brand-primary) 4%, var(--ixf-surface)) !important;
}

.table-hover > tbody > tr:hover {
  background-color: color-mix(in oklch, var(--brand-primary) 8%, var(--ixf-surface)) !important;
}

/* Buttons / tabs / inputs */
.btn-primary,
.btn-primary:active,
.btn-primary.active {
  background: var(--ixf-brand-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  text-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus {
  filter: brightness(1.08);
  background: var(--ixf-brand-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-default {
  background: var(--ixf-surface) !important;
  border-color: var(--ixf-border) !important;
  color: var(--brand-text) !important;
}

.nav-tabs {
  border-bottom-color: var(--ixf-border) !important;
}

.nav-tabs > li > a {
  color: var(--ixf-muted) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: var(--ixf-surface) !important;
  border-color: var(--ixf-border) var(--ixf-border) var(--ixf-surface) !important;
  color: var(--brand-primary) !important;
}

input.form-control,
select.form-control,
textarea.form-control,
.main-search input,
.search-input input {
  background: var(--ixf-surface) !important;
  color: var(--brand-text) !important;
  border-color: var(--ixf-border) !important;
  box-shadow: none !important;
}

input.form-control:focus,
.main-search input:focus,
.search-input input:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand-primary) 22%, transparent) !important;
}

/* Status colors */
.card-header-neighbors.established,
.text-success,
.label-success {
  color: var(--ixf-success) !important;
}

.text-danger,
.label-danger,
.api-error {
  color: var(--ixf-danger) !important;
}


/* BGP attributes / route details popup — readable in light & dark */
.modal-content,
.bgp-attributes-modal .modal-content,
.modal-show .modal-content {
  background: var(--ixf-surface) !important;
  background-color: var(--ixf-surface) !important;
  color: var(--brand-text) !important;
  border: 1px solid var(--ixf-border) !important;
  box-shadow: var(--ixf-shadow) !important;
}

.modal-header,
.modal-body,
.modal-footer,
.bgp-attributes-modal .modal-header,
.bgp-attributes-modal .modal-body,
.bgp-attributes-modal .modal-footer {
  background: transparent !important;
  color: var(--brand-text) !important;
  border-color: var(--ixf-border) !important;
}

.bgp-attributes-modal .modal-header p,
.bgp-attributes-modal .modal-header h4,
.bgp-attributes-modal .modal-title,
.modal-title {
  color: var(--brand-text) !important;
}

.bgp-attributes-modal .modal-header h4 {
  color: var(--brand-primary) !important;
  font-weight: 700;
}

.bgp-attributes-modal .close,
.modal-header .close {
  color: var(--brand-text) !important;
  opacity: 0.75;
  text-shadow: none !important;
}

.bgp-attributes-modal .close:hover,
.modal-header .close:hover {
  opacity: 1;
  color: var(--brand-primary) !important;
}

/* Modal tables must not inherit page transparent/washed styles */
.bgp-attributes-modal .table,
.bgp-attributes-modal .table td,
.bgp-attributes-modal .table th,
.bgp-attributes-modal .table-nolines td,
.bgp-attributes-modal .table-nolines th,
.modal-content .table,
.modal-content .table td,
.modal-content .table th {
  background-color: transparent !important;
  color: var(--brand-text) !important;
  border-color: transparent !important;
}

.bgp-attributes-modal .table th,
.modal-content .table th {
  color: color-mix(in oklch, var(--brand-text) 72%, var(--ixf-muted)) !important;
  font-weight: 600;
  vertical-align: top;
  padding: 8px 16px 8px 0 !important;
  white-space: nowrap;
  width: 1%;
}

.bgp-attributes-modal .table td,
.modal-content .table td {
  color: var(--brand-text) !important;
  padding: 8px 0 !important;
  word-break: break-word;
  line-height: 1.7 !important;
}

.bgp-attributes-modal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
  line-height: 1.45;
  padding: 18px 22px !important;
}

.bgp-attributes-modal .modal-header,
.bgp-attributes-modal .modal-footer {
  padding-left: 22px !important;
  padding-right: 22px !important;
}

.bgp-attributes-modal .modal-dialog {
  width: min(720px, 92vw);
}

.bgp-attributes-modal code,
.bgp-attributes-modal pre,
.modal-content code,
.modal-content pre {
  color: var(--brand-text) !important;
  background: color-mix(in oklch, var(--brand-primary) 10%, var(--ixf-surface)) !important;
  border-radius: 4px;
  padding: 1px 4px;
}

.bgp-attributes-modal a,
.modal-content a {
  color: var(--ixf-link) !important;
}

/* Community chips in route popup — spacing + contrast */
.bgp-attributes-modal .label,
.modal-content .label,
.bgp-attributes-modal .label-bgp-community,
.modal-content .label-bgp-community {
  display: inline-block !important;
  float: none !important;
  margin: 0 10px 10px 0 !important;
  padding: 5px 10px !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  vertical-align: middle !important;
  white-space: nowrap;
  background: color-mix(in oklch, var(--brand-primary) 28%, var(--ixf-surface)) !important;
  color: var(--brand-text) !important;
  border: 1px solid color-mix(in oklch, var(--brand-primary) 45%, transparent) !important;
}

.bgp-attributes-modal .label-bgp-unknown,
.modal-content .label-bgp-unknown {
  background: color-mix(in oklch, var(--brand-primary) 22%, var(--ixf-surface)) !important;
  border-color: color-mix(in oklch, var(--brand-primary) 40%, transparent) !important;
  color: var(--brand-text) !important;
}

.bgp-attributes-modal .label-bgp-community + .label-bgp-community {
  margin-left: 0 !important;
}

/* Hide bird/backend version under each route server (Alice has no show_version=false) */
.page-sidebar .routeserver-status .bird-version {
  display: none !important;
}

/* Scrollbars — exact match to https://ixfabric.staging.oftc.be/ (compiled Tailwind v4) */
::-webkit-scrollbar {
  width: 8.5px;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .3s;
  --tw-ease: var(--ease-in-out);
  transition-duration: .3s;
  transition-timing-function: var(--ease-in-out);
}

::-webkit-scrollbar-track {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .3s;
  --tw-ease: var(--ease-in-out);
  transition-duration: .3s;
  transition-timing-function: var(--ease-in-out);
  border-left-style: var(--tw-border-style);
  border-left-width: 2px;
  border-color: var(--color-brand-start);
  background-color: #0000;
}

@supports (color: color-mix(in lab, red, red)) {
  ::-webkit-scrollbar-track {
    border-color: color-mix(in oklab, var(--color-brand-start) 25%, transparent);
  }
}

::-webkit-scrollbar-thumb {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .3s;
  --tw-ease: var(--ease-in-out);
  transition-duration: .3s;
  transition-timing-function: var(--ease-in-out);
  background-color: var(--color-primary-500);
}

@supports (color: color-mix(in lab, red, red)) {
  ::-webkit-scrollbar-thumb {
    background-color: color-mix(in oklab, var(--color-primary-500) 80%, transparent);
  }

  ::-webkit-scrollbar-thumb:active {
    background-color: color-mix(in oklab, var(--color-primary-500) 70%, transparent);
  }

  ::-webkit-scrollbar-thumb:active:hover {
    background-color: color-mix(in oklab, var(--color-primary-500) 90%, transparent);
  }
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--color-primary-500);
}

::-webkit-scrollbar-thumb:active:hover {
  background-color: var(--color-primary-500);
}


/* Theme toggle */
.ixf-theme-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, white 22%, transparent);
  background: color-mix(in oklch, white 10%, transparent);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  font-size: 14px;
}

.ixf-theme-toggle:hover {
  background: color-mix(in oklch, white 18%, transparent);
}

.ixf-theme-toggle:focus {
  outline: 2px solid color-mix(in oklch, white 45%, transparent);
  outline-offset: 2px;
}

/* Welcome / search chrome */
.welcome-tagline,
.did-you-know,
.main-search-header,
.lookup-info {
  color: var(--ixf-muted) !important;
}

.main-search {
  background: var(--ixf-surface) !important;
  border: 1px solid var(--ixf-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--ixf-shadow) !important;
}