/* ==========================================================
   WAYNETECH COMMAND SYSTEM // HUD v2
   ========================================================== */

:root {
  --wt-bg: #050a0f;
  --wt-panel: rgba(7, 17, 25, 0.88);
  --wt-panel-2: rgba(9, 23, 34, 0.94);

  --wt-line: rgba(78, 196, 255, 0.16);
  --wt-line-strong: rgba(78, 196, 255, 0.38);

  --wt-cyan: #62d6ff;
  --wt-cyan-soft: rgba(98, 214, 255, 0.16);

  --wt-text: #e7f7ff;
  --wt-muted: #7893a3;

  --wt-green: #12d99b;
}


/* ==========================================================
   GLOBAL BACKGROUND
   ========================================================== */

html,
body {
  background:
    radial-gradient(
      circle at 50% -20%,
      rgba(39, 133, 184, 0.12),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      #07111a 0%,
      #050b11 45%,
      #03070b 100%
    ) !important;

  background-attachment: fixed !important;
}


/* Technical grid */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(98, 214, 255, 0.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(98, 214, 255, 0.018) 1px,
      transparent 1px
    );

  background-size: 40px 40px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.85),
      rgba(0,0,0,.15)
    );

  z-index: 0;
}


/* ==========================================================
   MAIN PAGE
   ========================================================== */

#page_container {
  position: relative;
  z-index: 1;
}


/* Slightly more breathing room */

main {
  max-width: 1800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ==========================================================
   SECTION HEADERS
   ========================================================== */

h2 {
  position: relative;

  color: var(--wt-text) !important;

  font-size: 1.02rem !important;
  font-weight: 650 !important;

  letter-spacing: .12em !important;
  text-transform: uppercase !important;

  margin-top: 1.15rem !important;
  margin-bottom: .55rem !important;

  text-shadow:
    0 0 16px rgba(98, 214, 255, .12);
}


/* Cyan line after group title */

h2::after {
  content: "";

  display: inline-block;

  height: 1px;
  width: 70px;

  margin-left: 14px;
  vertical-align: middle;

  background:
    linear-gradient(
      90deg,
      rgba(98,214,255,.55),
      transparent
    );
}


/* ==========================================================
   SERVICE CARDS
   ========================================================== */

.service,
.service-card {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      rgba(9, 23, 34, .94),
      rgba(5, 13, 20, .94)
    ) !important;

  border:
    1px solid
    var(--wt-line) !important;

  border-radius: 4px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 8px 22px rgba(0,0,0,.22);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}


/* HUD top accent */

.service::before,
.service-card::before {
  content: "";

  position: absolute;
  left: 0;
  top: 0;

  width: 55px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--wt-cyan),
      transparent
    );

  opacity: .75;
}


/* HUD lower-right corner */

.service::after,
.service-card::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 0;

  width: 18px;
  height: 18px;

  border-right:
    1px solid rgba(98,214,255,.4);

  border-bottom:
    1px solid rgba(98,214,255,.4);

  opacity: .6;

  pointer-events: none;
}


/* Hover */

.service:hover,
.service-card:hover {
  transform:
    translateY(-2px);

  border-color:
    var(--wt-line-strong) !important;

  box-shadow:
    0 0 0 1px rgba(98,214,255,.04),
    0 0 20px rgba(43,175,230,.09),
    0 12px 28px rgba(0,0,0,.32);
}


/* ==========================================================
   CARD CONTENT
   ========================================================== */

.service-name,
[class*="service-name"] {
  color:
    var(--wt-text) !important;

  font-weight:
    650 !important;
}


.service-description,
[class*="service-description"] {
  color:
    var(--wt-muted) !important;

  font-size:
    .79rem !important;
}


/* Icons */

.service img,
.service-card img {
  filter:
    drop-shadow(
      0 0 5px rgba(98,214,255,.12)
    );
}


/* ==========================================================
   INTERNAL SERVICE WIDGETS
   ========================================================== */

.service .grid > div,
.service-card .grid > div {

  background:
    rgba(3, 11, 17, .55) !important;

  border:
    1px solid rgba(98,214,255,.09) !important;

  border-radius:
    3px !important;
}


/* Numbers */

.service .grid > div > div:first-child,
.service-card .grid > div > div:first-child {
  color:
    #d9f5ff !important;
}


/* Labels */

.service .grid p,
.service-card .grid p {
  letter-spacing:
    .04em;
}


/* ==========================================================
   STATUS DOT
   ========================================================== */

.service [class*="bg-green"],
.service-card [class*="bg-green"] {
  background:
    var(--wt-green) !important;

  box-shadow:
    0 0 8px rgba(18,217,155,.6);
}


/* ==========================================================
   HEADER / INFO WIDGET AREA
   ========================================================== */

#information-widgets {
  background:
    rgba(3,10,15,.68);

  border:
    1px solid rgba(98,214,255,.08);

  border-radius:
    6px;

  padding:
    5px 10px;

  backdrop-filter:
    blur(12px);
}


/* ==========================================================
   SEARCH BAR
   ========================================================== */

input[type="text"],
input[type="search"] {

  background:
    rgba(2, 9, 14, .78) !important;

  border:
    1px solid rgba(98,214,255,.16) !important;

  border-radius:
    4px !important;

  color:
    var(--wt-text) !important;

  box-shadow:
    inset 0 0 14px rgba(98,214,255,.02);

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}


input[type="text"]:focus,
input[type="search"]:focus {

  border-color:
    rgba(98,214,255,.5) !important;

  box-shadow:
    0 0 0 1px rgba(98,214,255,.07),
    0 0 16px rgba(98,214,255,.07) !important;
}


/* ==========================================================
   LINKS
   ========================================================== */

a {
  transition:
    color .15s ease,
    opacity .15s ease;
}


a:hover {
  color:
    var(--wt-cyan) !important;
}


/* ==========================================================
   SCROLLBAR
   ========================================================== */

::-webkit-scrollbar {
  width: 7px;
}


::-webkit-scrollbar-track {
  background:
    #03080c;
}


::-webkit-scrollbar-thumb {
  background:
    rgba(98,214,255,.16);

  border-radius:
    10px;
}


::-webkit-scrollbar-thumb:hover {
  background:
    rgba(98,214,255,.35);
}


/* ==========================================================
   AI CORE — slightly stronger accent
   ========================================================== */

#openwebui,
#omniroute,
#n8n {
  border-color:
    rgba(98,214,255,.20) !important;
}


#openwebui:hover,
#omniroute:hover,
#n8n:hover {
  box-shadow:
    0 0 20px rgba(98,214,255,.10),
    0 12px 28px rgba(0,0,0,.3);
}


/* ==========================================================
   OBSERVABILITY
   ========================================================== */

#uptime,
#beszel,
#dozzle {
  border-color:
    rgba(18,217,155,.16) !important;
}


/* ==========================================================
   COMMAND CENTER
   ========================================================== */

#homepage {
  border-color:
    rgba(98,214,255,.24) !important;
}


/* ==========================================================
   SUBTLE LOAD ANIMATION
   ========================================================== */

@keyframes wayneBoot {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.service,
.service-card {
  animation:
    wayneBoot .28s ease both;
}


/* ==========================================================
   VERY SUBTLE SCANLINES
   ========================================================== */

body::after {
  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.009) 0px,
      rgba(255,255,255,.009) 1px,
      transparent 1px,
      transparent 5px
    );

  opacity:
    .15;

  z-index:
    9999;
}

/* =========================================
   FORCE DARK BACKGROUND OVERRIDE
   ========================================= */

/* Wyłącz granatowe tła warstw Homepage */
html,
body,
#page_container,
main,
header,
nav,
footer,
div[class*="bg-"],
section[class*="bg-"] {
  background-color: transparent !important;
}

/* Główne tło - prawie czarne */
html,
body {
  background:
    radial-gradient(circle at 50% -10%, rgba(0, 180, 255, 0.08), transparent 28%),
    radial-gradient(circle at 15% 20%, rgba(0, 180, 255, 0.04), transparent 20%),
    linear-gradient(180deg, #04070a 0%, #020508 55%, #010304 100%) !important;
  background-attachment: fixed !important;
}

/* Główny kontener też przezroczysty */
#page_container,
main {
  background: transparent !important;
}

/* Górny pasek info/search - ciemniejszy */
header,
#information-widgets,
div[class*="search"],
div[class*="header"] {
  background: rgba(3, 8, 12, 0.88) !important;
  border: 1px solid rgba(98, 214, 255, 0.10) !important;
  backdrop-filter: blur(10px);
}

/* Sekcje niech nie mają własnego tła */
section {
  background: transparent !important;
}

/* Dodatkowe przyciemnienie pustych przestrzeni */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.28));
  z-index: 0;
}