/* ============================================================
 *  公共布局与组件样式
 *  统一管理所有页面的公共样式：布局框架、侧边栏、顶部栏、
 *  内容区、表格、分页、弹窗、表单等
 *  注：按钮颜色与标签样式统一使用 common.css 中已有的 class
 * ============================================================ */

/* ===== 1. 全局 Reset & CSS变量 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   color: #555; font-size: 14px; background: #f0f2f5; }

:root {
  --primary-color: #1e95d4; --primary-light: #38b2f2; --primary-dark: #2ea1dd;
  --secondary-color: #ff5722; --secondary-light: #ff7043; --secondary-dark: #ff4036;
  --text-primary: #333; --text-secondary: #666; --text-light: #999;
  --bg-primary: #fff; --bg-secondary: #f5f5f5; --border-color: #e1e1e1;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1); --shadow-md: 0 4px 8px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.14); --shadow-xl: 0 12px 24px rgba(0,0,0,0.16);
  --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease;
  --gradient-primary: linear-gradient(135deg, #2ea1dd 0%, #38b2f2 100%);
}

/* ===== 2. 布局框架 ===== */
.layout { display: flex; min-height: 100vh; }
.layout.column { flex-direction: column; }
.layout.sidebar-collapsed .sidebar { width: 0; min-width: 0; overflow: hidden; }
.layout.sidebar-collapsed .main-content { margin-left: 0; }

/* ===== 3. 左侧菜单（Sidebar） ===== */
.sidebar {
  width: 240px; min-width: 240px; background: #001529; color: #fff;
  display: flex; flex-direction: column; position: fixed; top: 0; left: 0;
  height: 100vh; z-index: 100; overflow-y: auto; transition: .3s;
}
.sidebar-logo { padding: 22px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar-logo i { font-size: 28px; color: #1890ff; }
.sidebar-logo span { font-size: 17px; font-weight: 600; white-space: nowrap; }
.sidebar-nav { flex: 1; padding: 10px 0; }

/* 导航分组 */
.nav-group { margin-bottom: 6px; position: relative; }
.nav-group::before {
  content: ''; position: absolute; left: 32px; top: 40px; bottom: 0;
  width: 1px; border-left: 1px dashed rgba(255,255,255,.15);
  pointer-events: none;
}
.nav-group-title { padding: 12px 6px 8px 24px; font-size: 13px; color: rgba(255,255,255,.65); display: flex; align-items: center; user-select: none; cursor: pointer; transition: color .2s; position: relative; z-index: 1; }
.nav-group-title:hover { color: rgba(255,255,255,.85); }
.nav-group-title i { width: 20px; margin-right: 10px; text-align: center; flex-shrink: 0; font-size: 14px; }
.nav-group-title .nav-group-arrow { margin-left: auto; font-size: 12px; transition: transform .3s; }
.nav-group-collapsed .nav-group-title .nav-group-arrow { transform: rotate(-90deg); }

.nav-group-open{background: #001a33;}
.nav-group-open .nav-group-title{box-shadow: var(--shadow-lg);border-bottom: 1px solid #025eb31a;}
.nav-group-open .nav-group-title .nav-group-arrow { transform: rotate(0deg); }
.nav-group-collapsed::before { opacity: 0; }
.nav-group .nav-item { overflow: hidden; max-height: 44px; opacity: 1; transition: max-height .3s ease, opacity .25s ease, padding .3s ease; position: relative; z-index: 1; }

/* 导航项 - 顶级菜单 */
.nav-item { display: flex; align-items: center; padding: 12px 24px; color: rgb(219 219 219 / 65%); text-decoration: none; font-size: 14px; transition: .2s; cursor: pointer; position: relative; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.08); font-weight: 600;}
.nav-item.active { color: #fff; background: #1890ff;font-weight: 600; }
.nav-item.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: #fff; border-radius: 0 2px 2px 0; }
.nav-item i { width: 20px; margin-right: 10px; text-align: center; flex-shrink: 0; }
.nav-item .badge { margin-left: auto; background: #ff4d4f; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px; flex-shrink: 0; }

/* 分组内的子菜单 */
.nav-group-open .nav-item { padding: 12px 24px 12px 44px; }
.nav-group-open .nav-item i { width: 18px; font-size: 13px; }

/* 折叠状态 */
.nav-group-collapsed .nav-item { max-height: 0 !important; opacity: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }

/* ===== 4. 右侧主内容区 ===== */
.page-banner { height: 200px; width: 100%; background: url(images/header-bg.png) var(--primary-color); background-size: cover; color: #fff; position: absolute; top: 0; left: 0; }
.main-content { flex: 1; margin-left: 240px; display: flex; flex-direction: column; position: relative; }
.main-content.full { margin-left: 0; }

/* 侧边栏折叠按钮 */
.sidebar-toggle { font-size: 18px; color: #d4d4d4; cursor: pointer; padding: 6px; border-radius: 6px; transition: color .25s, background .25s, transform .3s; line-height: 1; display: inline-block; }
.sidebar-toggle:hover { color: #fff; background: rgba(24,144,255,.12); transform: rotate(90deg) scale(1.2); }
.sidebar-toggle:active { transform: rotate(90deg) scale(.85); }

/* ===== 5. 顶部栏（Topbar） ===== */
.topbar { height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: rgba(255,255,255,.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 8px rgba(0,0,0,.06); }

/* 顶部栏左侧 */
.topbar-left { display: flex; align-items: center; gap: 16px; }
.topbar-left .breadcrumb { font-size: 13px; color: rgba(255,255,255,.75); line-height: 44px; }
.topbar-left .breadcrumb:before { content: none; }
.topbar-left .breadcrumb span { color: rgba(255,255,255,.55); }
.topbar-left .breadcrumb .sep { margin: 0 6px; color: rgba(255,255,255,.35); }
.topbar-left .breadcrumb .current { color: #fff; font-weight: 600; }

/* 顶部栏右侧 */
.topbar-right { display: flex; align-items: center; gap: 20px; }
.topbar-right .topbar-icon { font-size: 16px; color: rgba(255,255,255,.7); cursor: pointer; position: relative; transition: color .2s; line-height: 1; }
.topbar-right .topbar-icon:hover { color: #fff; }
.topbar-right .topbar-icon .dot { position: absolute; top: -4px; right: -6px; width: 8px; height: 8px; background: #ff4d4f; border-radius: 50%; }

/* 用户信息 */
.topbar-user { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: rgba(255,255,255,.85); position: relative; }
.topbar-user img { width: 28px; height: 28px; border-radius: 50%; }
.topbar-user i { font-size: 12px; color: rgba(255,255,255,.5); }

/* ===== 6. 用户下拉菜单 ===== */
.user-dropdown {
  display: none; position: fixed; list-style: none; margin: 0 !important; padding: 4px 0 !important;
  background: #fff; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.18); border: 1px solid rgba(0,0,0,.08);
  min-width: 150px; z-index: 99999; opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s; pointer-events: none;
}
.user-dropdown.measuring { display: block; visibility: hidden; opacity: 0; transform: none; transition: none; pointer-events: none; }
.user-dropdown.open { display: block; opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

/* 下拉菜单项 */
.user-dropdown li { min-height: auto !important; line-height: 1 !important; clear: none !important; float: none !important; opacity: 0; transform: translateY(-10px); transition: opacity .25s ease, transform .25s ease; }
.user-dropdown.open li { opacity: 1; transform: translateY(0); }
.user-dropdown.open li:nth-child(1) { transition-delay: 0s; }
.user-dropdown.open li:nth-child(2) { transition-delay: .05s; }
.user-dropdown.open li:nth-child(3) { transition-delay: .10s; }
.user-dropdown.open li:nth-child(4) { transition-delay: .15s; }
.user-dropdown.open li:nth-child(5) { transition-delay: .20s; }

/* 下拉菜单链接 */
.user-dropdown li > a { display: flex !important; align-items: center; gap: 10px; padding: 11px 18px !important; font-size: 13px !important; color: #333 !important; transition: background .15s, color .15s, padding-left .2s ease; text-decoration: none; line-height: 1 !important; height: auto !important; }
.user-dropdown li > a:hover { background: #f5f7fa !important; color: #1890ff !important; padding-left: 22px !important; }
.user-dropdown li > a i { width: auto !important; margin: 0 !important; text-align: center; font-size: 14px !important; color: #999; transition: color .15s, transform .2s ease; float: none !important; }
.user-dropdown li > a:hover i { color: #1890ff; transform: scale(1.15); }

/* 分隔线 */
.user-dropdown li.divider { min-height: 1px !important; height: 1px; background: #f0f0f0; margin: 4px 0 !important; opacity: 1 !important; transform: none !important; }

/* ===== 7. 页面主体（Page） ===== */
/* 顶部工具栏 */
.page-top { padding: 30px; display: flex; align-items: center; justify-content: space-between; position: relative; }
.page-top h6.title { color: #fff; font-size: 1.5rem; font-weight: bold; margin-top: 6px; }
.page-top .form-inline { display: flex; gap: 5px; align-items: center; }
.page-top .input-field { margin-bottom: auto; margin-top: auto; }
.page-top .input-field input { margin-bottom: 0 !important; color: #fff; border-bottom: 1px solid #ddd; }
.page-top .input-field label { color: #fff; opacity: .7; }

/* 主体内容 */
.page-body { flex: 1; position: relative; border-top-left-radius: 5px; border-top-right-radius: 5px; overflow: hidden; }
.page-body.shadow { box-shadow: 0 4px 5px -2px rgba(0,0,0,.2), 0 7px 10px 1px rgba(0,0,0,.14), 0 2px 16px 1px rgba(0,0,0,.12); }
.page-body.margin { margin-left: 30px; margin-right: 30px; }
/* 主体内容-下部有工具栏 */
.page-body.bottom{margin-bottom: 64px;}

.page-body .text-hint{ padding:0 10px 15px 10px; color:var(--primary-color);border-bottom: 1px dashed #cecece;}
.page-body .text-hint.gray{ padding:12px 16px 16px 16px; color:#666;border-bottom: 1px dashed #e0e0e0;background-color: #f8f9fa; font-style: italic;}
.page-body .text-hint span{ display:inline-block; margin:0 5px;font-weight: bold;}

/* 底部栏 */
.page-bottom { height: 50px; padding: 10px; border-top: 1px solid #ddd; background: #fff; display: flex; align-items: center; z-index: 10; position: absolute; bottom: 0; left: 0; right: 0; }
/* 底部-分页栏 */
.page-bottom .info { flex: 1; }
.page-bottom .pagination li a { font-size: 12px; }
.page-bottom .pagination li a:hover { background-color: #3eaeeb; color: #fff; font-weight: bold; }
.page-bottom .pagination li.active { background: var(--primary-color); font-weight: bold; }
.page-bottom .pagination li.disabled a:hover { background-color: #fff; color: #bbbbbb; }
/* 底部-工具栏 */
.page-bottom.toolbar{ height:auto; padding:15px; display: flex;gap: 10px;  align-items: center; justify-content: center;}

/* ===== 8. 按钮（Button） ===== */
.btn { background: var(--gradient-primary); position: relative; overflow: hidden; z-index: 0; text-decoration: none !important; padding: 0 16px; font-weight: 500; transition: all var(--transition-normal); display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.btn:before { content: ""; position: absolute; left: -100%; width: 100%; height: 100%; background: linear-gradient(to left, rgba(255,255,255,.1), #fff, rgba(255,255,255,.1)); opacity: .4; transition: .6s; }
.btn:hover { background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.btn:hover:before { left: 100%; }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn i { font-size: 0.9rem; }
.btn.mini { height: 30px; line-height: 30px; padding: 0 8px; }

/* ===== 9. 表格（Table） ===== */
table a { color: #039be5; }
table a:hover { font-weight: 600; text-decoration: underline; }
table.paginations { margin-bottom: 64px; }

table.default th, table td { vertical-align: middle; text-align: center; border-radius: 0; height: 3rem; }
table.default td { padding: 5px 5px; }
table.default thead { vertical-align: bottom; text-align: center; border-bottom: 2px solid #bbb; background: #f5f5f5; }
table.default tbody tr:hover { background-color: #e4f1fd !important; }
table.default tbody tr:nth-of-type(odd) { background-color: #f9f9f9; }
table.default tbody tr:last-child { border-bottom: 0px; }

/* ===== 10. 搜索工具栏 ===== */
.search-toolbar { display: inline-block; position: relative; }
.search-toolbar .btn-circle { display: inline-block; vertical-align: middle; width: 40px; height: 40px; line-height: 40px; padding: 0; transition: background-color .3s; border-radius: 35px; border: none; overflow: hidden; }
.search-toolbar .btn-circle i { font-size: 16px; margin-right: 3px; width: inherit; display: inline-block; text-align: center; }
.search-toolbar .search-box { display: none; width: 260px; position: absolute; right: 0; top: 45px; padding: 30px 20px 20px 20px; border-radius: 10px; background: rgb(0 0 0 / 85%); text-align: center; z-index: 5; }
.search-toolbar .search-box .row { margin-bottom: 20px; }
.search-toolbar .search-box .input-field > label { top: 1px; }

/* ===== 11. 详情页/编辑页 ===== */
/* 详情头部 */
.details-header { padding: 16px 30px; color: #fff; position: relative; z-index: 2; }
.details-header h6 { font-weight: bold; font-size: 1.25rem; }
.details-header .title { font-size: 18px; text-align: center; }
.details-header .title h4 { font-weight: bold; }
.details-header .btn-floating { position: absolute; top: 30px; right: 20px; }

/* 详情头部菜单 */
.details-header-menu { padding: 23px 30px 0px 30px; color: #fff; position: relative; }
.details-header-menu h5 { font-weight: 600; }
.details-header-menu .description { margin-bottom: 20px; }
.details-header-menu .btn-floating { position: absolute; top: 30px; right: 20px; }
.details-header-menu .tab { background: #0d7cb3; }
.details-header-menu .tab a { color: #fff; }
.details-header-menu .tab a.active { color: #0095db; font-weight: bold; background: #f5f5f5 !important; }
.details-header-menu .indicator { bottom: initial; top: 0px; height: 3px; background: #ff8400; }

/* 详情信息 */
.details-info { background: #fff; padding: 14px 30px; border-bottom: 1px solid #eee; box-shadow: 0 1px 20px 0 rgb(0 0 0 / 20%); position: relative; }
.details-info-tabs { text-align: center; line-height: 14px; }
.details-info-tabs li { display: inline-block; padding: 0 12px; border-right: 1px solid #ddd; }
.details-info-tabs li:last-child { border: none; }

/* 必填项标识 */
.input-field:has(input[required], textarea[required], select[required]) label::after { content: "*"; color: #e53e3e; font-size: 1.2rem; font-weight: bold; margin-left: 4px; display: inline-block; vertical-align: middle; }

[type="radio"]:not(:checked) + span, [type="radio"]:checked + span{padding-left:25px;}
[type="checkbox"] + span:not(.lever){padding-left:25px;}


/* ===== 12. 登录页面 ===== */
.login-bg { background: linear-gradient(to bottom, var(--primary-color), var(--secondary-light)) !important; display: table; width: 100%; height: 100vh; }
.login-bg2 { display: table; width: 100%; height: 100vh; position: relative; }
.login-container { display: table-cell; vertical-align: middle; }
.login { max-width: 360px; background: #fff; padding: 40px; margin: 0 auto; box-shadow: 0 0 50px rgba(0,0,0,.15); border-radius: 20px; }

.login .logo { text-align: center; margin: 0 auto; position: relative; }
.login .version { position: absolute; top: 0; left: 70%; background: #40cf6c; color: #fff; font-size: 12px; padding: 0 4px; border-radius: 4px; }
.login .title { text-align: center; font-size: 24px; font-weight: bold; color: var(--primary-color); text-shadow: 0px 0px 2px var(--primary-light); margin: 10px 0 20px; display: flex; flex-direction: column; align-items: center; }
.login .title .sub-title { font-size: 22px; color: var(--secondary-color); text-shadow: 0px 0px 2px var(--secondary-light); }

.form-login input { box-shadow: 0 0 0 50px #fff inset !important; }
.form-login .btn { margin-top: 20px; width: 100%; }
.copyright { text-align: center; color: #fff; font-size: 12px; padding: 50px 0 25px; }

/* ===== 13. 用户信息行 ===== */
.user-info { display: flex; align-items: center; gap: 10px; }
.user-info img { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #c7c7c7; }

/* ===== 14. 响应式 ===== */
@media (max-width: 768px) {
  .sidebar { width: 0; min-width: 0; overflow: hidden; }
  .main-content { margin-left: 0; }
}