/**
 * 全局UI样式优化 - Material Design 3 风格
 * 包含：圆角统一、阴影统一、间距统一、字体大小统一、颜色变量
 * 
 * 优先级：高
 * 作用：统一全站UI细节
 * 
 * 注意：本文件仅设置变量、通用工具类和基础重置。
 * 具体组件样式由各页面（admin/manage.php, user/index.php）自行定义。
 * 为避免覆盖页面特定样式，通用元素选择器（input, select, button等）
 * 只做最基础的重置，不设置尺寸、边框等可能引起冲突的属性。
 */

/* ============================================
   CSS 变量 - 圆角
   ============================================ */
:root {
    /* 圆角系统 - 默认 medium 风格 (Material Design 3) */
    --radius-xs: 4px;
    --radius-sm: 8px;      /* 小组件、标签 */
    --radius-md: 12px;     /* 按钮、输入框 */
    --radius-lg: 16px;     /* 卡片、面板 */
    --radius-xl: 28px;     /* 大卡片、弹窗 */
    --radius-2xl: 32px;    /* 弹窗/对话框 */
    --radius-3xl: 40px;
    --radius-full: 999px;  /* 药丸形、圆形 */
    
    /* 阴影系统 (Material Design 3 elevation) */
    --shadow-1: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px 1px rgba(0,0,0,0.15);
    --shadow-2: 0 1px 2px rgba(0,0,0,0.30), 0 2px 6px 2px rgba(0,0,0,0.15);
    --shadow-3: 0 1px 3px rgba(0,0,0,0.30), 0 4px 8px 3px rgba(0,0,0,0.15);
    --shadow-4: 0 2px 3px rgba(0,0,0,0.30), 0 6px 10px 4px rgba(0,0,0,0.15);
    --shadow-5: 0 4px 4px rgba(0,0,0,0.30), 0 8px 12px 6px rgba(0,0,0,0.15);
    --shadow-6: 0 4px 5px rgba(0,0,0,0.30), 0 10px 16px 8px rgba(0,0,0,0.15);
    --shadow-7: 0 5px 5px rgba(0,0,0,0.30), 0 14px 20px 10px rgba(0,0,0,0.15);
    --shadow-8: 0 6px 6px rgba(0,0,0,0.30), 0 18px 28px 12px rgba(0,0,0,0.15);
    
    /* 间距系统 (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    
    /* 字体大小系统 */
    --font-xs: 11px;
    --font-sm: 12px;
    --font-md: 14px;      /* 正文 */
    --font-lg: 16px;      /* 小标题 */
    --font-xl: 20px;      /* 中标题 */
    --font-2xl: 24px;     /* 大标题 */
    --font-3xl: 32px;
    --font-4xl: 40px;

    /* 标准组件高度 */
    --input-height: 42px;
    --input-height-sm: 32px;
    --input-height-lg: 48px;
    --btn-height: 40px;
    --btn-height-sm: 32px;
    --search-height: 40px;
}

/* ============================================
   全局基础重置
   ============================================ */

/* 统一 box-sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 基础 body 重置 */
body {
    font-size: var(--font-md);
    line-height: 1.5;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   表单元素基础重置 - 只做重置，不做样式
   具体尺寸和边框由页面级CSS控制
   ============================================ */

input, select, textarea, button {
    font-family: inherit;
    font-size: inherit;
    box-sizing: border-box;
}

/* 移除原生appearance，但不设置尺寸/边框，避免与页面样式冲突 */
input, select, textarea {
    outline: none;
}

/* 统一输入框基础样式 - 42px高度，8px圆角 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="search"],
select {
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--md-outline-variant, #CAC4D0);
    border-radius: 8px;
    background: var(--md-surface, #FFFFFF);
    color: var(--md-on-surface, #1D1B20);
    font-size: 14px;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
select:focus {
    border-color: var(--md-primary, #6750A4);
    box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.15);
    outline: none;
}

textarea {
    min-height: 80px;
    padding: 10px 14px;
    border: 1px solid var(--md-outline-variant, #CAC4D0);
    border-radius: 8px;
    background: var(--md-surface, #FFFFFF);
    color: var(--md-on-surface, #1D1B20);
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea:focus {
    border-color: var(--md-primary, #6750A4);
    box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.15);
    outline: none;
}

/* 按钮重置 */
button {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
}

button:disabled {
    cursor: not-allowed;
}

/* ============================================
   全局圆角统一（仅设置圆角，不设置其他属性）
   ============================================ */

/* 所有按钮 8px 圆角 */
button,
.btn,
.md-btn,
.btn-filled,
.btn-text,
.btn-tonal,
.btn-outlined,
.hero-btn,
.icon-btn,
.admin-icon-btn,
.fab-main,
.fab-action-btn,
.nav-item,
.admin-nav-item,
.notification-mark-all,
.page-btn {
    border-radius: var(--radius-md);
}

/* 药丸形按钮/标签 */
.badge,
.nav-badge,
.tag,
.chip,
.notification-badge,
.lang-badge {
    border-radius: var(--radius-full);
}

/* 卡片、面板 12px 圆角 */
.card,
.panel,
.stat-card,
.feature-card,
.admin-stat-card,
.admin-card,
.form-card,
.info-card,
.data-card,
.chart-card,
.ticket-card,
.order-card,
.user-card,
.app-card,
.sidebar-user-card {
    border-radius: var(--radius-lg);
}

/* 弹窗/对话框 20px 圆角 */
.modal,
.modal-dialog,
.modal-content,
.dialog,
.popup,
.lightbox,
.admin-modal {
    border-radius: var(--radius-2xl);
}

/* 下拉菜单 12px 圆角 */
.dropdown-menu,
.lang-menu,
.admin-lang-menu,
.lang-dropdown,
.user-dropdown,
.admin-dropdown,
.sidebar-user-dropdown,
.notification-panel,
.context-menu,
.i18n-selector-dropdown,
.admin-search-dropdown {
    border-radius: var(--radius-lg);
}

/* Toast 提示 12px 圆角 */
.toast,
.md-toast,
.toast-container .toast,
.admin-toast {
    border-radius: var(--radius-lg);
}

/* 图片/头像 - 圆形或圆角 */
.avatar,
.user-avatar,
.avatar-img,
.avatar-large,
.brand-icon {
    border-radius: var(--radius-full);
}

img.rounded {
    border-radius: var(--radius-lg);
}

/* 进度条 4px+ 圆角 */
.progress,
.progress-bar,
.md-progress,
.progress-track {
    border-radius: var(--radius-xs);
}

.progress-fill,
.progress-bar-fill {
    border-radius: var(--radius-xs);
}

/* 分页按钮 8px 圆角 */
.pagination button,
.pagination a,
.page-item,
.admin-page-btn,
.pagination-btn {
    border-radius: var(--radius-md);
}

/* 选项卡 8px 圆角 */
.tab,
.tabs .tab,
.md-tab,
.notification-tab {
    border-radius: var(--radius-md);
}

/* ============================================
   阴影和层级
   ============================================ */

/* 普通卡片 - elevation 1 */
.card,
.panel,
.stat-card,
.feature-card,
.admin-stat-card,
.admin-card,
.form-card {
    box-shadow: var(--shadow-1);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Hover 状态 - elevation 2 */
.card:hover,
.feature-card:hover,
.app-card:hover,
.stat-card:hover {
    box-shadow: var(--shadow-2);
}

/* 弹窗 - elevation 8 */
.modal,
.modal-dialog,
.modal-content,
.dialog,
.admin-modal {
    box-shadow: var(--shadow-8);
}

/* 下拉菜单 - elevation 4 */
.dropdown-menu,
.lang-menu,
.admin-lang-menu,
.lang-dropdown,
.user-dropdown,
.admin-dropdown,
.sidebar-user-dropdown,
.notification-panel,
.i18n-selector-dropdown,
.admin-search-dropdown {
    box-shadow: var(--shadow-4);
}

/* FAB 按钮 - elevation 3 */
.fab-main,
.fab-action-btn {
    box-shadow: var(--shadow-3);
}

.fab-main:hover {
    box-shadow: var(--shadow-5);
}

/* ============================================
   字体大小统一
   ============================================ */

/* 大标题 */
h1, .h1, .title-large {
    font-size: var(--font-2xl);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

/* 中标题 */
h2, .h2, .title-medium {
    font-size: var(--font-xl);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

/* 小标题 */
h3, .h3, .title-small {
    font-size: var(--font-lg);
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

/* 正文 */
p, .body-medium {
    font-size: var(--font-md);
    line-height: 1.5;
    margin: 0;
}

/* 辅助文字 */
.text-sm,
.small,
small,
.helper-text,
.caption,
.body-small {
    font-size: var(--font-sm);
    line-height: 1.4;
}

/* 最小文字 */
.text-xs,
.label-small {
    font-size: var(--font-xs);
    line-height: 1.4;
}

/* ============================================
   颜色一致性 - 确保使用CSS变量
   ============================================ */

/* 主要按钮 */
.btn-primary,
.btn-filled {
    background: var(--md-primary, #6750A4);
    color: var(--md-on-primary, #FFFFFF);
}

.btn-primary:hover,
.btn-filled:hover {
    background: var(--md-primary-hover, #5a4493);
}

/* 次要按钮 */
.btn-secondary,
.btn-tonal {
    background: var(--md-secondary-container, #E8DEF8);
    color: var(--md-on-secondary-container, #1D192B);
}

/* 轮廓按钮 */
.btn-outlined {
    border: 1px solid var(--md-outline, #79747E);
    background: transparent;
    color: var(--md-primary, #6750A4);
}

/* 文字按钮 */
.btn-text {
    background: transparent;
    color: var(--md-primary, #6750A4);
}

/* 错误/危险 */
.btn-danger,
.danger {
    color: var(--md-error, #B3261E);
}

.btn-danger-filled {
    background: var(--md-error, #B3261E);
    color: var(--md-on-error, #FFFFFF);
}

/* 成功 */
.text-success {
    color: var(--md-tertiary, #386A20);
}

/* 警告 */
.text-warning {
    color: #F9AB00;
}

/* 表面色 */
.surface {
    background: var(--md-surface, #FEF7FF);
    color: var(--md-on-surface, #1D1B20);
}

.surface-variant {
    background: var(--md-surface-variant, #E7E0EC);
    color: var(--md-on-surface-variant, #49454F);
}

/* ============================================
   间距一致性辅助类
   ============================================ */

.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ============================================
   深色主题适配
   ============================================ */

[data-theme="dark"] {
    --shadow-1: 0 1px 2px rgba(0,0,0,0.50), 0 1px 3px 1px rgba(0,0,0,0.30);
    --shadow-2: 0 1px 2px rgba(0,0,0,0.50), 0 2px 6px 2px rgba(0,0,0,0.30);
    --shadow-3: 0 1px 3px rgba(0,0,0,0.50), 0 4px 8px 3px rgba(0,0,0,0.30);
    --shadow-4: 0 2px 3px rgba(0,0,0,0.50), 0 6px 10px 4px rgba(0,0,0,0.30);
    --shadow-5: 0 4px 4px rgba(0,0,0,0.50), 0 8px 12px 6px rgba(0,0,0,0.30);
    --shadow-6: 0 4px 5px rgba(0,0,0,0.50), 0 10px 16px 8px rgba(0,0,0,0.30);
    --shadow-7: 0 5px 5px rgba(0,0,0,0.50), 0 14px 20px 10px rgba(0,0,0,0.30);
    --shadow-8: 0 6px 6px rgba(0,0,0,0.50), 0 18px 28px 12px rgba(0,0,0,0.30);
}

/* ============================================
   滚动条美化
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--md-surface-container-low, #F7F2FA);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
    background: var(--md-outline-variant, #CAC4D0);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--md-outline, #79747E);
}

/* ============================================
   通用过渡动画 - 移除对所有元素的transition，
   避免不必要的动画和性能问题，
   仅对需要过渡的属性在组件级CSS中设置
   ============================================ */

/* 排除不需要过渡的属性 */
img, svg, video, canvas {
    transition: none;
}

/* ============================================
   搜索框内部元素保护样式
   防止通用input/select样式覆盖搜索框内部元素
   ============================================ */

/* 搜索框容器内的input/select不应有独立边框和固定高度 */
.admin-search-box input,
.admin-toolbar-search input,
.search-box input,
.search-input,
.toolbar-search input,
.header-search input,
.user-search-box input,
.content-search input {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    width: 100%;
    min-width: 0;
    border-radius: 0 !important;
    line-height: 1.4;
}

.admin-search-box input::placeholder,
.admin-toolbar-search input::placeholder,
.search-box input::placeholder,
.search-input::placeholder,
.toolbar-search input::placeholder,
.header-search input::placeholder,
.user-search-box input::placeholder,
.content-search input::placeholder {
    color: var(--md-text-hint, #79747E);
    opacity: 1;
}

/* 搜索框内图标不应有边框 */
.admin-search-box .material-icons,
.admin-toolbar-search .material-icons,
.search-box .material-icons,
.toolbar-search .material-icons,
.header-search .material-icons,
.user-search-box .material-icons,
.content-search .material-icons {
    border: none !important;
    background: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 搜索框内按钮不应有边框和背景 */
.admin-search-box button,
.admin-toolbar-search button,
.search-box button,
.toolbar-search button,
.header-search button,
.user-search-box button,
.content-search button {
    border: none !important;
    background: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-width: auto !important;
    flex-shrink: 0;
}

/* 搜索框内select不应有独立边框 */
.admin-search-box select,
.admin-toolbar-search select,
.search-box select,
.toolbar-search select,
.header-search select,
.user-search-box select,
.content-search select {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    height: 100% !important;
}

/* ============================================
   下拉菜单基础定位保障
   ============================================ */

/* 确保下拉菜单容器有正确的position */
.admin-notification-wrapper,
.admin-lang-wrapper,
.admin-user-menu,
.user-notification-wrapper,
.user-menu,
.admin-search-box,
.admin-toolbar-search,
.sidebar-user-card,
.user-search-box,
.content-search {
    position: relative;
}

/* 确保下拉菜单使用绝对定位而非固定定位 */
.admin-dropdown,
.dropdown-menu,
.admin-lang-menu,
.i18n-selector-dropdown,
.sidebar-user-dropdown,
.user-dropdown,
.lang-dropdown,
.context-menu {
    position: absolute !important;
    margin: 0;
}

/* 防止下拉菜单被意外设置为display:flex/grid导致居中 - 使用visibility/opacity实现平滑动画 */
.admin-dropdown:not(.show),
.dropdown-menu:not(.show),
.admin-lang-menu:not(.show),
.i18n-selector-dropdown:not(.show),
.sidebar-user-dropdown:not(.show),
.user-dropdown:not(.show),
.lang-dropdown:not(.show) {
    /* 使用opacity/visibility/transform实现平滑过渡，不再强制display:none */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 下拉菜单响应式最大宽度，防止溢出视口 */
.admin-dropdown,
.dropdown-menu,
.admin-lang-menu,
.i18n-selector-dropdown,
.sidebar-user-dropdown,
.user-dropdown,
.lang-dropdown,
.admin-search-dropdown {
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

/* ============================================
   Select 下拉框统一 - 使用柔和的样式
   注意：具体尺寸和颜色由页面级CSS控制，
   这里只做基础重置以防止浏览器默认样式
   ============================================ */

select {
    cursor: pointer;
}

/* IE/Edge 隐藏默认箭头 */
select::-ms-expand {
    display: none;
}

/* ============================================
   通用工具类 - 文本截断与换行
   ============================================ */

/* 单行文本截断（显示省略号） */
.text-truncate,
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 多行文本截断（2行） */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 多行文本截断（3行） */
.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 强制换行（长单词/长字符串） */
.word-break,
.text-break {
    word-break: break-all;
    overflow-wrap: break-word;
}

/* 不换行 */
.text-nowrap {
    white-space: nowrap;
}

/* 溢出隐藏 */
.overflow-hidden {
    overflow: hidden;
}

/* 横向溢出滚动 */
.overflow-x-auto {
    overflow-x: auto;
}

/* 纵向溢出滚动 */
.overflow-y-auto {
    overflow-y: auto;
}