/* ============================================================================
   Dashboard - DARK GLASS BENTO design
   ============================================================================ */

/* ============================================
   BODY FONAS - sodrūs spalvų dėmės pro kuriuos matosi stiklas
   ============================================ */

body {
  background-color: #050505;
  background-image:
    /* Subtilus dot grid - visiškai žemai, kad pro stiklą subliuruotų į textūrą */
    radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    /* Kairysis-viršutinis: amber/auksinis */
    radial-gradient(ellipse 800px 600px at 15% 20%, rgba(245, 158, 11, 0.18), transparent 60%),
    /* Dešinysis-vidurys: violetinis */
    radial-gradient(ellipse 700px 500px at 85% 50%, rgba(124, 58, 237, 0.15), transparent 60%),
    /* Apačia-centras: žalsvas akcentas */
    radial-gradient(ellipse 600px 400px at 50% 100%, rgba(16, 185, 129, 0.08), transparent 60%),
    /* Vertikali raudonai-amber juosta pasviro kampu */
    linear-gradient(115deg, transparent 30%, rgba(239, 68, 68, 0.06) 50%, transparent 70%);
  background-size: 32px 32px, auto, auto, auto, auto;
  background-attachment: fixed;
  color: #e6e6e6;
  min-height: 100vh;
}


/* ============================================
   BENTO GLASS CARD - storo juodo stiklo efektas
   ============================================ */

/* .backdrop-blur-xl yra ant VISŲ bento korteles (sutiketa HTML) -
   per šitą selektorių taikom glass styling visoms.
   Tailwind klases bg-zinc-900/60 ir border-white/5 nuslopina !important. */
.backdrop-blur-xl {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem !important;

  /* PERMATOMAS juodas tonas su gradient'iniu shading'u */
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.01) 30%,
      rgba(0, 0, 0, 0.10) 70%,
      rgba(0, 0, 0, 0.25) 100%
    ),
    rgba(8, 8, 10, 0.55) !important;

  /* STORAS stiklas - smarkus blur */
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);

  /* Stiklo kraštas - šviesi linija */
  border: 1px solid rgba(255, 255, 255, 0.06) !important;

  /* Gylio nuvitos:
     - Plati outer shadow (objektas tarsi virš lapo)
     - Viršutinis vidinis highlight (šviesos atspindys)
     - Apatinė vidinė šešėlinė linija (storumas) */
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
    0 -1px 0 0 rgba(0, 0, 0, 0.2) inset,
    0 8px 24px -4px rgba(0, 0, 0, 0.45),
    0 24px 64px -16px rgba(0, 0, 0, 0.55);
}

/* Top edge - šviesos linija (kaip atspindys realiame stikle) */
.backdrop-blur-xl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.10),
    transparent
  );
  pointer-events: none;
  z-index: 2;
}

/* Apatinis dekoratyvus pasviras striukas - subtili pasviro kampo
   "tape" linija (industrial / Bento jausmas) */
.backdrop-blur-xl::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0.18) 0 14px,
    rgba(250, 204, 21, 0.025) 14px 28px
  );
  pointer-events: none;
  opacity: 0.5;
  z-index: 1;
}

/* Hover - švelnus lift efektas, ryškesnis kraštas */
.backdrop-blur-xl:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
    0 -1px 0 0 rgba(0, 0, 0, 0.2) inset,
    0 12px 32px -4px rgba(0, 0, 0, 0.55),
    0 32px 80px -16px rgba(0, 0, 0, 0.65);
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.2, 1),
              box-shadow 0.3s,
              border-color 0.3s;
}


/* ============================================
   AKCENTAI - amber gradientai mygtukuose ir antraštėse
   ============================================ */

.bg-amber-500 {
  background-image: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #ea580c 100%);
  box-shadow: 0 4px 12px -2px rgba(245, 158, 11, 0.4);
}

.bg-amber-600 {
  background-image: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 4px 12px -2px rgba(245, 158, 11, 0.3);
}

.title-gradient {
  background: linear-gradient(90deg, #f59e0b, #fb923c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ============================================
   TIPOGRAFIJA - subtilios šešėlių sustiprinimui
   ============================================ */

.text-2xl,
.text-3xl,
.text-4xl {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}


/* ============================================
   DEKORATYVŪS ELEMENTAI VIDUJE
   ============================================ */

/* "Sistemos apkrova" radar SVG - subtilus blur, kad atrodytų giliau */
.absolute svg {
  filter: blur(0.3px);
  opacity: 0.85;
}

/* Service kortelės ikonos dėžutė - papildomas glow */
article .rounded-xl.from-amber-500\/20 {
  box-shadow:
    0 0 24px -4px rgba(245, 158, 11, 0.2),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}


/* ============================================
   FOOTER
   ============================================ */

footer {
  opacity: 0.7;
}


/* ============================================
   MOBILE / RESPONSIVE
   ============================================ */

/* Apsauga: jokio horizontalaus scroll'o telefone (kad puslapis
   neatitoltų / „neišsikreiptų") */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Lietimo įrenginiuose (telefonai/planšetės) hover „lift" efektas
   įstringa (užsifiksuoja) – jį išjungiam, kad kortelės nešokinėtų */
@media (hover: none) {
  .backdrop-blur-xl:hover {
    transform: none;
  }
}

@media (max-width: 640px) {
  /* iOS Safari blogai palaiko fixed foną – „attachment: scroll" stabilesnis */
  body {
    background-attachment: scroll;
  }

  /* Storas blur(40px) telefone brangus (lag'as) – sumažinam našumui */
  .backdrop-blur-xl {
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-radius: 1rem !important;
  }

  /* Mažesnės kortelių dekoracijos – kad neperpildytų siauro ekrano */
  .backdrop-blur-xl::after {
    height: 16px;
  }
}