/* ========================================
   浪梦CMS - 主样式表（前端+安装向导共用）
   干净浅色风格
   ======================================== */

/* ===== 全局重置与CSS变量 ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --primary-color: #1677ff;
    --primary-light: #69b1ff;
    --primary-bg: rgba(22,119,255,0.06);
    --success-color: #52c41a;
    --success-bg: rgba(82,196,26,0.06);
    --warning-color: #faad14;
    --warning-bg: rgba(250,173,20,0.06);
    --danger-color: #ff4d4f;
    --danger-bg: rgba(255,77,79,0.06);
    --info-color: #13c2c2;

    /* 文字色 */
    --text-primary: #1a1a2e;
    --text-secondary: #5a5a6e;
    --text-hint: #9999aa;
    
    /* 背景色 */
    --bg-body: #f5f6fa;
    --bg-white: #ffffff;
    --bg-hover: #f8f9fc;
    
    /* 边框 */
    --border-color: #e8eaef;
    --border-light: #f0f1f5;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
}

body {
    background: var(--bg-body);
    min-height: 100vh;
}

/* ===== 玻璃容器（兼容旧类名）===== */
.glass-container {
    background: var(--bg-white);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
}
.glass-container:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.glass-dark { background: var(--bg-white); }

/* ===== 布局 ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.main-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; padding: 24px; }

/* ===== 导航栏 ===== */
.navbar {
    position: sticky; top: 0; z-index: 1000;
    background: var(--bg-white); border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    padding: 0 30px; height: 60px;
    display: flex; align-items: center;
}
.navbar-brand {
    font-size: 20px; font-weight: 700; color: var(--text-primary);
    text-decoration: none; letter-spacing: 0.5px;
}
.navbar-nav { margin-left: auto; display: flex; gap: 4px; list-style: none; }
.navbar-nav a,
.nav-link {
    padding: 8px 18px; color: var(--text-secondary); text-decoration: none;
    border-radius: 8px; transition: all 0.2s; font-weight: 500;
}
.navbar-nav a:hover,
.nav-link:hover {
    background: var(--primary-bg); color: var(--primary-color);
}
.navbar-nav a.active { color: var(--primary-color); font-weight: 600; }

/* ===== 侧边栏 ===== */
.sidebar {
    position: fixed; left: 0; top: 60px; width: 260px; height: calc(100vh-60px);
    background: var(--bg-white); border-right: 1px solid var(--border-light);
    overflow-y: auto; padding: 20px 0; transition: transform 0.3s;
}
.sidebar-menu { list-style: none; padding: 0 12px; }
.sidebar-menu li { margin-bottom: 4px; }
.sidebar-menu a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px; color: var(--text-secondary); text-decoration: none;
    border-radius: 10px; transition: all 0.2s; font-weight: 500;
}
.sidebar-menu a:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-menu a.active { background: var(--primary-bg); color: var(--primary-color); font-weight: 600; }
.sidebar-menu .menu-icon { width: 20px; height: 20px; opacity: 0.7; }

/* ===== 内容区 ===== */
.content-wrapper { margin-left: 260px; margin-top: 60px; padding: 28px; min-height: calc(100vh-60px); }
.page-header { margin-bottom: 24px; padding-bottom: 14px; border-bottom: 2px solid var(--border-light); }
.page-header h1 { font-size: 24px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.page-header p { color: var(--text-hint); font-size: 14px; }

/* ===== 卡片 ===== */
.card {
    background: var(--bg-white); border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm); margin-bottom: 20px;
    overflow: hidden; transition: all 0.25s;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-header { padding: 16px 20px; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; }
.card-header h3 { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.card-body { padding: 20px; }
.card-footer { padding: 12px 20px; border-top: 1px solid var(--border-light); background: var(--bg-hover); }

/* ===== 表单 ===== */
.form-group { margin-bottom: 18px; }
.form-label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--text-secondary); font-size: 13px; }
.form-control {
    width: 100%; padding: 10px 14px;
    background: var(--bg-white); border: 1.5px solid var(--border-color);
    border-radius: 8px; font-size: 14px; color: var(--text-primary);
    outline: none; transition: all 0.2s;
}
.form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-bg); }
.form-control::placeholder { color: var(--text-hint); }
textarea.form-control { resize: vertical; min-height: 100px; }

/* ===== 按钮 ===== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 20px; font-size: 14px; font-weight: 600;
    text-decoration: none; border: none; border-radius: 8px;
    cursor: pointer; transition: all 0.2s; outline: none;
}
.btn-primary { background: var(--primary-color); color: #fff; }
.btn-primary:hover { background: var(--primary-light); }
.btn-success { background: var(--success-color); color: #fff; }
.btn-success:hover { background: #73d13d; }
.btn-danger { background: var(--danger-color); color: #fff; }
.btn-danger:hover { background: #ff7875; }
.btn-warning { background: var(--warning-color); color: #fff; }
.btn-outline { background: transparent; border: 1.5px solid var(--border-color); color: var(--text-secondary); }
.btn-outline:hover { border-color: var(--primary-color); color: var(--primary-color); }
.btn-sm { padding: 6px 14px; font-size: 12px; }
.btn-lg { padding: 12px 28px; font-size: 15px; }

/* ===== 表格 ===== */
.table-container { overflow-x: auto; border-radius: 10px; }
.data-table-wrapper { overflow-x: auto; border-radius: 10px; }
.data-table { width: 100%; border-collapse: collapse; background: var(--bg-white); border-radius: 10px; overflow: hidden; border: 1px solid var(--border-color); }
.data-table th,
.table th {
    padding: 12px 16px; text-align: left;
    background: var(--bg-hover); color: var(--text-secondary);
    font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
}
.data-table td,
.table td {
    padding: 12px 16px; border-bottom: 1px solid var(--border-light);
    color: var(--text-primary); font-size: 14px;
}
.data-table tbody tr:hover, .table tbody tr:hover { background: var(--bg-hover); }

/* ===== 提示框 ===== */
.alert {
    padding: 14px 18px; border-radius: 10px; margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px; font-size: 14px;
}
.alert-success { background: var(--success-bg); border: 1px solid rgba(82,196,26,0.3); color: #389e0d; }
.alert-danger { background: var(--danger-bg); border: 1px solid rgba(255,77,79,0.3); color: #cf1322; }
.alert-warning { background: var(--warning-bg); border: 1px solid rgba(250,173,20,0.3); color: #d48806; }
.alert-info { background: rgba(19,194,194,0.06); border: 1px solid rgba(19,194,194,0.3); color: #08979c; }

/* ===== 模态框 ===== */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45); z-index: 2000;
    display: none; justify-content: center; align-items: center;
}
.modal-overlay.active { display: flex; }
.modal-dialog {
    background: var(--bg-white); border-radius: 16px;
    box-shadow: var(--shadow-lg); max-width: 560px; width: 90%;
    max-height: 90vh; overflow-y: auto; animation: modalIn 0.3s ease;
}
@keyframes modalIn { from{opacity:0;transform:translateY(20px)scale(0.97)} to{opacity:1;transform:none} }
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border-light); display:flex;justify-content:space-between;align-items:center;}
.modal-header h3 { font-size: 18px; font-weight: 600; }
.modal-close { width:32px;height:32px;border-radius:50%;border:none;background:var(--bg-hover);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--text-hint);transition:all 0.2s;}
.modal-close:hover { background: var(--danger-bg); color: var(--danger-color); }
.modal-body { padding: 24px; color: var(--text-secondary); line-height: 1.7; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border-light); display:flex;justify-content:flex-end;gap:10px;}

/* ===== 分页 ===== */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 24px; }
.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width:36px; height:36px; padding:0 10px;
    border-radius: 8px; text-decoration: none; color: var(--text-secondary);
    background: var(--bg-white); border: 1px solid var(--border-color);
    font-size: 13px; font-weight: 500; transition: all 0.2s;
}
.pagination a:hover { border-color: var(--primary-color); color: var(--primary-color); }
.pagination .active { background: var(--primary-color); color:#fff; border-color:transparent; }
.pagination .disabled { opacity: 0.35; pointer-events: none; }

/* ===== 徽章 ===== */
.badge { display:inline-flex; align-items:center; padding:3px 10px; font-size:11px; font-weight:600; border-radius:12px; letter-spacing:0.3px; }
.badge-primary { background:var(--primary-bg); color:var(--primary-color); }
.badge-success { background:var(--success-bg); color:var(--success-color); }
.badge-danger { background:var(--danger-bg); color:var(--danger-color); }
.badge-warning { background:var(--warning-bg); color:#d48806; }
.badge-info { background:rgba(19,194,194,0.08); color:var(--info-color); }

/* ===== 工具类 ===== */
.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}
.mt-10{margin-top:10px}.mt-20{margin-top:20px}.mt-30{margin-top:30px}
.mb-10{margin-bottom:10px}.mb-20{margin-bottom:20px}.mb-30{margin-bottom:30px}
.ml-10{margin-left:10px}.mr-10{margin-right:10px}
.p-20{padding:20px}.p-30{padding:30px}
.d-flex{display:flex}.flex-1{flex:1}.justify-between{justify-content:space-between}.align-center{align-items:center}.gap-10{gap:10px}.gap-20{gap:20px}

/* ===== 响应式 ===== */
@media(max-width:1024px){
    .sidebar{transform:translateX(-100%);z-index:1500}
    .sidebar.show{transform:none}
    .content-wrapper{margin-left:0}
    .main-layout{grid-template-columns:1fr}
}
@media(max-width:768px){
    .navbar{padding:0 16px} .navbar-brand{font-size:17px}
    .content-wrapper{padding:16px}
    .card{border-radius:10px}
    .btn-lg{padding:10px 22px;font-size:14px}
    .navbar-nav{display:none}
}

/* ===== 滚动条 ===== */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#aaa}

::selection { background:var(--primary-color);color:#fff }

/* ===== 加载动画 ===== */
.loading-spinner{
    width:36px;height:36px;
    border:3px solid var(--border-color);
    border-top-color:var(--primary-color);border-radius:50%;
    animation:spin 0.7s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}