/*
 * glass.css — iOS 风格毛玻璃(磨砂材质)覆盖层
 *
 * 只作用于浮在内容之上的界面:底部导航、桌面侧栏、顶部圆形按钮、
 * 「更多」弹出菜单 / 底部弹层、确认框、登录框和提示气泡。
 * 正文卡片保持不透明,避免长列表滚动时大量模糊图层拖慢旧手机。
 *
 * 默认开启;设置页「毛玻璃效果」选关闭后,<html data-glass="off">,
 * 下面所有规则都不再匹配,界面回到原来的样子(只存在当前设备)。
 * 开关条件写在 :where() 里,不改变原有选择器的优先级。
 *
 * 用法:在 index.html 中最后引入,删除该行即回滚。
 * iOS 18 之前的 Safari 只认 -webkit-backdrop-filter,所以每处都写两遍。
 * 浏览器不支持模糊时,整段不生效,保持原来的不透明样式;
 * 系统开启「降低透明度」时,改回接近不透明的底色。
 */

:root {
  --glass-filter: blur(22px) saturate(180%);
  --glass-bg: rgba(255, 253, 250, 0.62);
  --glass-bg-thick: rgba(255, 253, 250, 0.76);
  --glass-fill: rgba(255, 255, 255, 0.46);
  --glass-border: rgba(255, 255, 255, 0.66);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  --glass-shadow: 0 12px 36px -14px rgba(21, 52, 44, 0.3);
}

:root[data-theme="dark"] {
  --glass-bg: rgba(22, 34, 29, 0.58);
  --glass-bg-thick: rgba(22, 34, 29, 0.74);
  --glass-fill: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.11);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.72);
}

@media (prefers-reduced-transparency: reduce) {
  :root,
  :root[data-theme="dark"] {
    --glass-bg: var(--paper);
    --glass-bg-thick: var(--paper);
    --glass-fill: var(--surface);
  }
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  /* 桌面侧栏 */
  :where(:root:not([data-glass="off"])) .desktop-primary-nav {
    border-color: var(--glass-border);
    background: var(--glass-bg);
    box-shadow: var(--glass-edge), var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
  }

  /* 弹出确认框、新增选择、日历当天、登录卡片 */
  :where(:root:not([data-glass="off"])) .app-confirm-card,
  :where(:root:not([data-glass="off"])) .add-choice-card,
  :where(:root:not([data-glass="off"])) .calendar-day-card,
  :where(:root:not([data-glass="off"])) .auth-card {
    border-color: var(--glass-border);
    background: var(--glass-bg-thick);
    box-shadow: var(--glass-edge), var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
  }

  /* 提示气泡:保持深色底,只换成磨砂 */
  :where(:root:not([data-glass="off"])) .site-toast {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(36, 55, 51, 0.78);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
  }

  :where(:root:not([data-glass="off"])) .site-toast.is-error {
    background: rgba(143, 47, 65, 0.82);
  }

  @media (max-width: 860px) {
    /* 底部导航栏 */
    :where(:root:not([data-glass="off"])) .mobile-nav:not(.hidden),
    :root[data-theme="dark"]:where(:not([data-glass="off"])) .mobile-nav:not(.hidden) {
      border-color: var(--glass-border);
      background: var(--glass-bg);
      box-shadow: var(--glass-edge), var(--glass-shadow);
      -webkit-backdrop-filter: var(--glass-filter);
      backdrop-filter: var(--glass-filter);
    }

    /* 顶部返回 / 更多 圆形按钮 */
    :where(:root:not([data-glass="off"])) .topbar .mobile-topbar-back,
    :where(:root:not([data-glass="off"])) .topbar .mobile-topbar-more {
      border-color: var(--glass-border);
      background: var(--glass-bg);
      box-shadow: var(--glass-edge), 0 6px 18px -10px rgba(21, 52, 44, 0.3);
      -webkit-backdrop-filter: var(--glass-filter);
      backdrop-filter: var(--glass-filter);
    }

    /* 「更多」弹出菜单与底部弹层 */
    :where(:root:not([data-glass="off"])) .topbar .topbar-actions,
    :where(:root:not([data-glass="off"])) body > .topbar-actions[role="dialog"],
    :where(:root:not([data-glass="off"])) #plansTopActions {
      border-color: var(--glass-border) !important;
      background: var(--glass-bg-thick) !important;
      box-shadow: var(--glass-edge), 0 18px 48px -14px rgba(8, 24, 19, 0.32) !important;
      -webkit-backdrop-filter: var(--glass-filter);
      backdrop-filter: var(--glass-filter);
    }

    :where(:root:not([data-glass="off"])) .topbar .topbar-actions button,
    :where(:root:not([data-glass="off"])) body > .topbar-actions[role="dialog"] button,
    :where(:root:not([data-glass="off"])) #plansTopActions button,
    :where(:root:not([data-glass="off"])) .topbar .topbar-actions select,
    :where(:root:not([data-glass="off"])) body > .topbar-actions[role="dialog"] select {
      border-color: var(--glass-border);
      background-color: var(--glass-fill);
    }
  }
}