/* 设计风格全局样式 */

/* ========================================
   无边框设计 (Borderless) - 默认且唯一设计风格
   说明：无边框不等于无结构。
   用空间、阴影、色调和排版来建立视觉层次。
   莫兰迪色系与无边框设计最搭配。
   ======================================== */

html[data-design="borderless"] {
  /* 无边框：以空间和深度替代边框 */
}

/* Header / Footer：底部微分割线 + 背景色区分，无需边框 */
html[data-design="borderless"] .header {
  background: rgba(var(--color-surface-rgb, 255, 255, 255), 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(var(--color-border-rgb, 229, 229, 229), 0.3);
}

html[data-design="borderless"] .footer {
  background: var(--color-surface);
  border: none;
  border-radius: 0;
  box-shadow: 0 -1px 0 rgba(var(--color-border-rgb, 229, 229, 229), 0.8);
}

/* 卡片：用多层阴影创造浮起感，无需边框 */
html[data-design="borderless"] .card {
  border: none;
  border-radius: 0;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.05),
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 16px 32px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

html[data-design="borderless"] .card:hover {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.07),
    0 8px 24px rgba(0, 0, 0, 0.09),
    0 20px 40px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* 页面内容区：只用较宽内边距建立区域感 */
html[data-design="borderless"] .page-content,
html[data-design="borderless"] .page-body {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* 登录容器：深度阴影替代边框 */
html[data-design="borderless"] .login-container {
  border: none;
  border-radius: 0;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 16px 48px rgba(0, 0, 0, 0.10),
    0 32px 64px rgba(0, 0, 0, 0.06);
}

/* 按钮：用背景色块和阴影替代边框，悬停上浮 */
html[data-design="borderless"] .button,
html[data-design="borderless"] .btn {
  border: none;
  border-radius: 0;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(var(--color-primary-rgb, 37, 99, 235), 0.18);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

html[data-design="borderless"] .button:hover,
html[data-design="borderless"] .btn:hover {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.1),
    0 8px 24px rgba(var(--color-primary-rgb, 37, 99, 235), 0.28);
  transform: translateY(-1px);
}

html[data-design="borderless"] .button:active,
html[data-design="borderless"] .btn:active {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08);
  transform: translateY(0);
}

/* 输入框：只保留底部微线（underline 风格），无全框 */
html[data-design="borderless"] input,
html[data-design="borderless"] select,
html[data-design="borderless"] textarea {
  border: none;
  border-bottom: 2px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  background: rgba(var(--color-primary-rgb, 37, 99, 235), 0.03);
  padding-left: 0;
  padding-right: 0;
  transition: border-bottom-color 0.2s ease, background 0.2s ease;
}

html[data-design="borderless"] input:focus,
html[data-design="borderless"] select:focus,
html[data-design="borderless"] textarea:focus {
  outline: none;
  border-bottom-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb, 37, 99, 235), 0.05);
  box-shadow: none;
}

/* 导航链接 */
html[data-design="borderless"] .header-nav-link {
  border-radius: 0;
}

/* 下拉菜单：浮起阴影，无边框 */
html[data-design="borderless"] .dropdown,
html[data-design="borderless"] .fab-menu,
html[data-design="borderless"] .language-dropdown,
html[data-design="borderless"] .user-dropdown {
  border: none;
  border-radius: 0;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 16px 40px rgba(0, 0, 0, 0.12);
}

/* 浮动按钮：保持圆形，用阴影替代边框 */
html[data-design="borderless"] .fab-main {
  border: none;
  border-radius: 50%;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.15),
    0 8px 24px rgba(var(--color-primary-rgb, 37, 99, 235), 0.3);
}

/* 表单元素 */
html[data-design="borderless"] .form-group input,
html[data-design="borderless"] .form-group select,
html[data-design="borderless"] .form-group textarea {
  border-radius: 0;
}

/* OAuth 按钮 */
html[data-design="borderless"] .oauth-button {
  border: none;
  border-radius: 0;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.06);
}

/* 登录按钮 */
html[data-design="borderless"] .login-submit {
  border: none;
  border-radius: 0;
}

/* 分隔线 */
html[data-design="borderless"] .login-divider-vertical::before {
  width: 1px;
}

/* ========================================
   响应式调整
   ======================================== */
@media (max-width: 768px) {
  html[data-design="borderless"] .login-divider-vertical::before {
    height: 1px;
    width: 100%;
  }
}