/* ======================================
   1. 全局样式重置（消除浏览器默认差异）
   ====================================== */



/* ======================================
   2. 通用组件样式（按钮、容器、标题等）
   ====================================== */
/* 页面容器（居中显示，限制最大宽度） */
.container {
    width: 100%;
    max-width: 1200px; /* 大屏下限制宽度，避免内容过宽 */
    margin: 0 auto; /* 水平居中 */
    padding: 20px; /* 内边距，避免内容贴边 */
}

/* 按钮样式（适配管理系统常用按钮） */
.btn {
    display: inline-block;
    padding: 8px 16px;
    border: none;
    border-radius: 4px; /* 圆角，更现代 */
    font-size: 14px;
    cursor: pointer; /* 鼠标悬浮显示“手”形，提示可点击 */
    transition: all 0.3s ease; /* 过渡动画，点击/悬浮更流畅 */
}

/* 主要按钮（如“提交”“确认”） */
.btn-primary {
    background-color: #1890ff; /* 蓝色，代表主要操作 */
    color: #fff; /* 白色文字 */
}
.btn-primary:hover {
    background-color: #096dd9; /* 悬浮时加深颜色，反馈交互 */
}

/* 次要按钮（如“取消”“返回”） */
.btn-secondary {
    background-color: #fff;
    color: #333;
    border: 1px solid #ddd; /* 灰色边框，区分主要按钮 */
}
.btn-secondary:hover {
    background-color: #f5f5f5;
}

/* 标题样式（统一各级标题大小和间距） */
h1 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #222;
}

h2 {
    font-size: 20px;
    margin-bottom: 16px;
    color: #222;
}

h3 {
    font-size: 18px;
    margin-bottom: 12px;
    color: #222;
}

/* ======================================
   3. 导航栏样式（适配管理系统顶部导航）
   ====================================== */


.header .logo {
    display: inline-block;
    height: 60px; /* 导航栏高度 */
    line-height: 60px; /* 垂直居中 */
}

.header .logo img {
    height: 40px; /* -logo图片高度，适配导航栏 */
    vertical-align: middle; /* 图片垂直居中 */
}

/* ======================================
   4. 表格样式（管理系统常用组件）
   ====================================== */
.table {
    width: 100%;
    border-collapse: collapse; /* 合并边框，避免双边框 */
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden; /* 让边框圆角生效 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.table th,
.table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #eee; /* 行底边框，区分行 */
}

.table th {
    background-color: #fafafa; /* 表头浅灰色背景，区分表头和内容 */
    font-weight: 600; /* 表头文字加粗 */
    color: #666;
}

.table tr:hover {
    background-color: #f9f9f9; /* 行悬浮时变色，提升交互体验 */
}

/* ======================================
   5. 响应式适配（适配手机等小屏幕）
   ====================================== */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    .header .logo {
        height: 50px;
        line-height: 50px;
    }

    .table th,
    .table td {
        padding: 8px 12px;
    }
}