/* ============================================
   Kuka Tech CMS - 全局统一样式 v5.0
   基于 Design System 变量，确保跨页面一致性
   与 design-system.css 配合使用
   ============================================ */

/* --- 修复 fixed navbar 顶部孔隙：navbar 高 64px，body padding-top 同步 64px，hero 紧贴 navbar 底部 --- */
html, body { margin: 0 !important; padding: 0 !important; }
body {
    padding-top: 64px !important; /* 等于 navbar 高度，避免内容从 navbar 中间穿过 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
}
/* 首屏区块（hero）紧贴 navbar 底部，不再用负 margin，避免露出 hero 上方内容 */
/* 移动端不显示 fixed navbar 时，移除 body padding-top */
@media (max-width: 768px) {
    body.mobile-no-navbar { padding-top: 0 !important; }
}

/* ============================================
   前台导航栏样式 - 纯白底 + 深色字（常驻显示）
   ============================================ */
.navbar-root {
    background: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(12px);
    border-bottom: none;
}

/* 导航文字 - 深色 */
.nav-text {
    color: #1D2129 !important;
}
.nav-text .text-secondary {
    color: #165DFF;
}

/* 导航链接 - 深色文字 */
.nav-link {
    color: #4E5969 !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
}
.nav-link:hover {
    color: #165DFF !important;
}

/* 当前页面高亮 */
.nav-item.font-medium {
    color: #165DFF !important;
    font-weight: 600 !important;
}

/* Logo 图片 */
.logo-img {
    object-fit: cover;
}

/* 购物车徽章 */
.cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #F53F3F;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(245, 63, 63, 0.3);
}

/* 用户下拉菜单 */
.user-dropdown {
    position: relative;
    display: inline-block;
}
.user-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
    font-family: inherit;
}
.user-trigger:hover {
    background: #F2F7FF;
}
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.user-avatar-text {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #165DFF;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.user-name-text {
    color: #4E5969 !important;
    font-size: 14px;
    font-weight: 500;
}
.dropdown-arrow {
    color: #86909C;
    transition: transform 0.2s ease;
}
.user-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

/* 用户菜单弹出层 */
.user-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid #F2F3F5;
    padding: 6px;
    display: none;
    z-index: 100;
}
.user-dropdown.open .user-menu {
    display: block;
    animation: menuFadeIn 0.2s ease;
}
@keyframes menuFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #4E5969;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.15s ease;
    cursor: pointer;
}
.user-menu-item:hover {
    background: #F2F7FF;
    color: #165DFF;
}
.user-menu-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}
.user-menu-item:hover svg {
    opacity: 1;
}
.user-menu-divider {
    height: 1px;
    background: #F2F3F5;
    margin: 4px 0;
}
.user-menu-danger {
    color: #F53F3F !important;
}
.user-menu-danger:hover {
    background: #FFF2F0 !important;
    color: #F53F3F !important;
}

/* 移动端导航菜单 */
.mobile-nav-menu {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #F2F3F5;
    padding: 12px 16px;
    z-index: 49;
    flex-direction: column;
    gap: 4px;
}
.mobile-nav-menu.show {
    display: flex;
    animation: menuFadeIn 0.25s ease;
}
.mobile-nav-menu a {
    padding: 12px 16px;
    border-radius: 8px;
    color: #4E5969;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.15s ease;
}
.mobile-nav-menu a:hover {
    background: #F2F7FF;
    color: #165DFF;
}
.mobile-nav-menu a.active {
    color: #165DFF;
    background: #E8F3FF;
    font-weight: 600;
}

/* --- 基础输入框 --- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
textarea,
select {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.6;
  color: #1D2129;
  background-color: #FFFFFF;
  border: 1.5px solid #E5E6EB;
  border-radius: 10px;
  outline: none;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
textarea:hover,
select:hover {
  border-color: #165DFF;
  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.08);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
  border-color: #165DFF;
  box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* --- 禁用状态 --- */
input:disabled,
textarea:disabled,
select:disabled {
  background-color: var(--color-bg-component);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  border-color: var(--color-border-light);
}

/* --- 只读状态 --- */
input[readonly],
textarea[readonly] {
  background-color: var(--color-bg-component);
  border-color: var(--color-border-light);
  color: var(--color-text-secondary);
}

/* --- 错误状态 --- */
input.error,
textarea.error,
select.error {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(245, 63, 63, 0.08);
}

input.error:focus,
textarea.error:focus,
select.error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(245, 63, 63, 0.12);
}

/* --- 成功状态 --- */
input.success,
textarea.success,
select.success {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(0, 180, 42, 0.08);
}

/* --- Placeholder --- */
input::placeholder,
textarea::placeholder {
  color: #C9CDD4;
  font-size: 14px;
  opacity: 0.8;
}

/* --- 输入框聚焦时 placeholder 颜色变化 --- */
input:focus::placeholder,
textarea:focus::placeholder {
  color: #86909C;
}

/* --- 文本域 --- */
textarea {
  min-height: 120px;
  resize: vertical;
  padding: 14px 16px;
}

/* --- 下拉选择框 --- */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2386909C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding-right: 40px;
  cursor: pointer;
}

select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23165DFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* --- 复选框 & 单选框 --- */
input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* --- 文件上传 --- */
input[type="file"] {
  width: 100%;
  padding: 24px;
  font-size: 14px;
  color: #86909C;
  border: 2px dashed #E5E6EB;
  border-radius: 12px;
  background-color: #FAFBFC;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

input[type="file"]:hover {
  border-color: #165DFF;
  background-color: #F2F7FF;
}

input[type="file"]::file-selector-button {
  padding: 8px 20px;
  font-size: 14px;
  color: #fff;
  background-color: #165DFF;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-right: 12px;
  transition: all 0.2s ease;
  font-family: inherit;
  font-weight: 500;
}

input[type="file"]::file-selector-button:hover {
  background-color: #4080FF;
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.25);
}

/* --- 搜索框特殊样式 --- */
input[type="search"] {
  padding-left: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2386909C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 18px;
}

input[type="search"]:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23165DFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

input[type="search"]:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23165DFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

/* --- 标签文本 --- */
label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

label.required::after {
  content: " *";
  color: var(--color-danger);
}

/* --- 表单组 --- */
.form-group {
  margin-bottom: var(--space-lg);
}

/* --- 帮助文本 --- */
.form-help {
  margin-top: 4px;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.form-error {
  margin-top: 4px;
  font-size: var(--font-size-xs);
  color: var(--color-danger);
}

/* --- 输入框尺寸变体 --- */
.input-sm {
  padding: 4px 8px;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.input-lg {
  padding: 10px 16px;
  font-size: var(--font-size-md);
  border-radius: var(--radius-md);
}

/* --- 输入框组（前缀/后缀） --- */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group input {
  flex: 1;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-group .input-addon {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-component);
  border: 1px solid var(--color-border-input);
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  white-space: nowrap;
}

.input-group .input-addon-left {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border-right: none;
  border-left: 1px solid var(--color-border-input);
}

.input-group .input-addon-left + input {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ============================================
   兼容旧版类名（向后兼容）
   ============================================ */

/* 旧版侧边栏样式（兼容未升级的页面） */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  min-height: 100vh;
  background: var(--color-bg-container);
  border-right: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 9px var(--space-md);
  margin: 1px var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
  position: relative;
}

.sidebar-item:hover {
  background: var(--color-bg-component);
  color: var(--color-text-primary);
}

.sidebar-item.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.sidebar-item .nav-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-item .badge-count {
  margin-left: auto;
  background: var(--color-danger);
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
  min-width: 18px;
  text-align: center;
}

/* 旧版卡片 */
.glass-card {
  background: var(--color-bg-container);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  transition: all var(--transition-normal);
}

/* 旧版按钮 */
.btn-blue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  background: var(--color-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
}

.btn-blue:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-primary);
}

/* 旧版标签页 */
.tab-btn {
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  background: var(--color-bg-container);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
  cursor: pointer;
}

.tab-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.tab-btn:not(.active):hover {
  background: var(--color-bg-component);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* 旧版统计卡片 */
.pillar-card {
  background: var(--color-bg-container);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  padding: var(--space-xl);
  text-align: center;
  transition: all var(--transition-normal);
}

/* ============================================
   响应式调整
   ============================================ */
@media (max-width: 640px) {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="datetime-local"],
  textarea,
  select {
    font-size: 16px; /* 防止iOS缩放 */
    padding: 8px 12px;
  }
}

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }

  .sidebar.open {
    display: flex;
    position: fixed;
    z-index: 50;
    height: 100vh;
    width: 260px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
  }
}