/* ==========================================================
   Mikanno Gatus UI
   固定随机背景 + 毛玻璃 UI
   ========================================================== */

/* ----------------------------------------------------------
   基础页面
   ---------------------------------------------------------- */

html,
body {
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;

  background: transparent !important;
  background-color: transparent !important;
}

body {
  overflow-x: hidden;
}

/* ----------------------------------------------------------
   固定背景层
   ---------------------------------------------------------- */

html::before {
  content: "";

  position: fixed;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  z-index: -10;

  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.58),
      rgba(0, 0, 0, 0.58)
    ),
    url("https://api.elaina.cat/random/");

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  pointer-events: none;
}

/* ----------------------------------------------------------
   Gatus 根节点
   ---------------------------------------------------------- */

#app,
#global {
  position: relative;

  min-height: 100vh;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

#global > div {
  background: transparent !important;
  background-color: transparent !important;
}

main,
main.relative,
.dashboard-container,
.dashboard-container > .container {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ----------------------------------------------------------
   Header
   ---------------------------------------------------------- */

#global > div > header {
  position: relative;
  z-index: 10;

  background: rgba(15, 15, 15, 0.58) !important;

  border-color: rgba(255, 255, 255, 0.10) !important;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ----------------------------------------------------------
   Dashboard 标题区域
   ---------------------------------------------------------- */

.dashboard-container > .container > .mb-6 {
  background: transparent !important;
}

/* ----------------------------------------------------------
   搜索 / 筛选区域
   ---------------------------------------------------------- */

.dashboard-container .bg-card {
  background: rgba(20, 20, 20, 0.60) !important;

  border-color: rgba(255, 255, 255, 0.10) !important;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ----------------------------------------------------------
   输入框和选择框
   ---------------------------------------------------------- */

.dashboard-container input.bg-background,
.dashboard-container button.bg-background {
  background: rgba(10, 10, 10, 0.55) !important;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ----------------------------------------------------------
   服务分组
   ---------------------------------------------------------- */

.endpoint-group {
  background: rgba(15, 15, 15, 0.42) !important;

  border-color: rgba(255, 255, 255, 0.14) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 分组标题 */

.endpoint-group-header {
  background: rgba(20, 20, 20, 0.54) !important;

  border-color: rgba(255, 255, 255, 0.10) !important;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* 分组内容 */

.endpoint-group-content {
  background: transparent !important;
  background-color: transparent !important;
}

/* ----------------------------------------------------------
   服务卡片
   ---------------------------------------------------------- */

.endpoint {
  background: rgba(20, 20, 20, 0.66) !important;

  border-color: rgba(255, 255, 255, 0.14) !important;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.18);
}

.endpoint-header,
.endpoint-content {
  background: transparent !important;
  background-color: transparent !important;
}

/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */

#global > div > footer {
  position: relative;
  z-index: 10;

  background: rgba(15, 15, 15, 0.50) !important;

  border-color: rgba(255, 255, 255, 0.10) !important;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ----------------------------------------------------------
   左下角设置栏
   ---------------------------------------------------------- */

#settings > div {
  background: rgba(15, 15, 15, 0.78) !important;

  border-color: rgba(255, 255, 255, 0.12) !important;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.25);
}

/* ----------------------------------------------------------
   Tooltip / Popover
   ---------------------------------------------------------- */

.bg-popover,
[class*="bg-popover"] {
  background: rgba(20, 20, 20, 0.92) !important;

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ----------------------------------------------------------
   移动端
   ---------------------------------------------------------- */

@media (max-width: 768px) {

  html::before {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    /*
     * 仍然使用固定层，不使用 background-attachment。
     * 页面滚动时图片不会跟着内容移动。
     */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  #app,
  #global,
  .dashboard-container {
    min-height: 100vh;
  }

  .endpoint-group {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .endpoint {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* ----------------------------------------------------------
   超小屏幕
   ---------------------------------------------------------- */

@media (max-width: 480px) {

  html::before {
    background-position: center center;
  }

  .endpoint {
    background: rgba(20, 20, 20, 0.70) !important;
  }
}