/* ============================================================
   政务风格后台样式
   配色：政务深蓝 #0b2a6b / #123a8c + 庄重金 #c8a45c
   特征：小圆角、细边框、规整对齐、去 emoji、克制投影
   自适应：电脑（侧边栏常驻）/ 手机（抽屉菜单 + 卡片式表格）
   ============================================================ */
:root{
  --gov-900:#08204f;   /* 最深：顶栏、侧边栏 */
  --gov-800:#0b2a6b;   /* 主深蓝 */
  --gov-700:#123a8c;   /* 主色 */
  --gov-600:#1a4bab;   /* 渐变起点 */
  --gold:#c8a45c;      /* 庄重金 */
  --gold-soft:rgba(200,164,92,.14);
  --ink:#1b2438;       /* 正文 */
  --ink-2:#5a6a8a;     /* 次要文字 */
  --line:#e3e8f0;      /* 分隔线 */
  --bg:#eef1f6;        /* 页面底 */
  --radius:6px;        /* 统一小圆角，规整硬朗 */
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  font-size:14px;
}

/* ---------- 顶部栏 ---------- */
.topbar{
  background:linear-gradient(180deg,var(--gov-800) 0%,var(--gov-700) 100%);
  border-bottom:3px solid var(--gold);
  box-shadow:0 2px 12px rgba(8,32,79,.22);
  padding-top:.4rem;padding-bottom:.4rem;
  min-height:56px;
}
.topbar .navbar-brand{
  font-size:1.02rem;letter-spacing:2px;color:#fff;
  display:flex;align-items:center;gap:10px;
}
/* 品牌徽标：金边方块 + 首字，替代原来的 emoji */
.brand-mark{
  width:30px;height:30px;flex-shrink:0;
  border:1px solid var(--gold);border-radius:4px;
  background:rgba(200,164,92,.16);
  color:#e8d5a8;font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  letter-spacing:0;
}
.topbar .date-txt{color:rgba(255,255,255,.72);font-size:.82rem;}
.topbar .navbar-toggler:focus{box-shadow:none;}

/* 用户下拉 */
.user-btn{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;font-size:.85rem;
  padding:.32rem .7rem;border-radius:4px;
}
.user-btn:hover{background:rgba(255,255,255,.2);color:#fff;}
.user-btn .role-tag{
  font-size:.72rem;padding:.1rem .35rem;border-radius:3px;margin-left:5px;
}
.role-super{background:var(--gold);color:#3a2c0d;font-weight:600;}
.role-sub{background:rgba(255,255,255,.28);color:#fff;}
.dropdown-menu{border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 8px 24px rgba(8,32,79,.14);font-size:.88rem;}
.dropdown-item{padding:.5rem .9rem;}
.dropdown-item:hover{background:#f2f5fb;color:var(--gov-700);}

/* ---------- 侧边栏（桌面） ---------- */
.sidebar{
  background:var(--gov-900);
  min-height:calc(100vh - 59px);
  padding:10px 0 30px;
}
.side-menu{border-radius:0;}
/* 分组标题：金色小字 */
.side-title{
  padding:14px 16px 6px;font-size:.7rem;
  color:rgba(200,164,92,.85);
  letter-spacing:2px;font-weight:600;
}
.side-menu .list-group-item{
  background:transparent;border:0;
  border-left:3px solid transparent;
  padding:.62rem 1rem;font-size:.88rem;
  color:rgba(255,255,255,.78);
  display:flex;align-items:center;gap:9px;
  transition:background .15s;
}
.side-menu .list-group-item:hover{
  background:rgba(255,255,255,.08);color:#fff;border-left-color:rgba(200,164,92,.5);
}
.side-menu .list-group-item.active{
  background:rgba(200,164,92,.16);
  color:#fff;border-left-color:var(--gold);font-weight:600;
}
/* 菜单图标：统一 16px SVG */
.side-ico{width:16px;height:16px;flex-shrink:0;opacity:.9;}
.side-menu .list-group-item.active .side-ico{opacity:1;}

/* 手机版抽屉菜单同样深色 */
.offcanvas-header{background:var(--gov-800);border-bottom:2px solid var(--gold);}
.offcanvas-header .btn-close{filter:invert(1) brightness(2);}
#sideMenu .offcanvas-body{background:var(--gov-900);padding:0;}
#sideMenu .side-menu .list-group-item{color:rgba(255,255,255,.82);}

/* ---------- 主内容区 ---------- */
.main-content{padding:20px 22px 34px;min-height:calc(100vh - 59px);}
.page-title{font-size:1.2rem;font-weight:700;margin:0;color:var(--gov-800);letter-spacing:1px;}
.page-sub{color:var(--ink-2);font-size:.83rem;}
/* 页面标题下方的金色短线 */
.page-head{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px;}
.page-head::after{
  content:"";display:block;width:56px;height:3px;
  background:var(--gold);margin-top:9px;border-radius:2px;
}

/* ---------- 卡片 ---------- */
.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 1px 3px rgba(8,32,79,.05);
  background:#fff;
}
.card-header{
  background:#fafbfd;
  border-bottom:1px solid var(--line);
  font-weight:600;font-size:.92rem;
  color:var(--gov-800);
  padding:.7rem 1rem;
  border-radius:var(--radius) var(--radius) 0 0 !important;
}
.card-body{padding:1rem;}

/* ---------- 统计卡片：白底 + 左侧深蓝色条，正式不花哨 ---------- */
.stat-card{
  border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;overflow:hidden;position:relative;
  box-shadow:0 1px 3px rgba(8,32,79,.05);
}
.stat-card .stat-body{position:relative;z-index:2;padding:14px 16px;}
.stat-card .num{font-size:1.6rem;font-weight:700;line-height:1.2;color:var(--gov-800);}
.stat-card .label{font-size:.82rem;color:var(--ink-2);}
.stat-card .ico{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;opacity:.16;
}
/* 左侧色条：按序号区分，但都用政务色系 */
.stat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gov-700);}
.stat-card.c2::before{background:#1a6b7a;}
.stat-card.c3::before{background:#8a6d1f;}
.stat-card.c4::before{background:#4a5a8a;}
.stat-card.c5::before{background:#6b5a8a;}
.stat-card.c6::before{background:#2a6b5a;}

/* ---------- 表格：清晰规整 ---------- */
.table{margin-bottom:0;}
.table thead th{
  background:#f5f7fb;color:var(--gov-800);
  font-weight:600;white-space:nowrap;
  border-bottom:2px solid var(--line);
  font-size:.85rem;padding:.6rem .75rem;
}
.table td{vertical-align:middle;font-size:.86rem;padding:.6rem .75rem;border-color:var(--line);}
.table-hover tbody tr:hover{background:#f7f9fd;}
.table-striped tbody tr:nth-of-type(odd){background:#fcfdfe;}
.table-responsive{border-radius:var(--radius);border:1px solid var(--line);background:#fff;}

/* ---------- 状态标签：细边框 + 浅底，正式 ---------- */
.badge-soft{
  padding:.28em .6em;border-radius:3px;
  font-weight:500;font-size:.76rem;
  border:1px solid transparent;white-space:nowrap;
}
.status-in{background:#eaf6f1;color:#0d7a5f;border-color:#bfe6d8;}
.status-out{background:#fdf3e3;color:#a06810;border-color:#f0dcb8;}
.status-done{background:#f0f2f6;color:#5a6a8a;border-color:#dde3ec;}
.status-warn{background:#fdeceb;color:#b32d25;border-color:#f5c9c5;}

/* ---------- 筛选区：白底 + 顶部深蓝细条 ---------- */
.filter-bar{
  background:#fff;border:1px solid var(--line);
  border-top:3px solid var(--gov-700);
  border-radius:var(--radius);padding:14px;
  box-shadow:0 1px 3px rgba(8,32,79,.05);
}
.filter-bar .form-label{font-size:.78rem;color:var(--ink-2);margin-bottom:.25rem;font-weight:500;}
.filter-bar .form-control,.filter-bar .form-select{font-size:.86rem;border-radius:4px;border-color:#d5dce8;}
.filter-bar .form-control:focus,.filter-bar .form-select:focus{
  border-color:var(--gov-700);box-shadow:0 0 0 .15rem rgba(18,58,140,.12);
}

/* ---------- 按钮：方正规整 ---------- */
.btn{border-radius:4px;font-size:.86rem;}
.btn-brand{
  background:var(--gov-700);border-color:var(--gov-700);color:#fff;
  font-weight:500;letter-spacing:.5px;
}
.btn-brand:hover,.btn-brand:focus{background:var(--gov-800);border-color:var(--gov-800);color:#fff;}
.btn-outline-brand{color:var(--gov-700);border-color:var(--gov-700);}
.btn-outline-brand:hover{background:var(--gov-700);border-color:var(--gov-700);color:#fff;}
.btn-sm{font-size:.8rem;padding:.3rem .6rem;}
.btn-lg{font-size:.95rem;letter-spacing:2px;}

/* ---------- 表单 ---------- */
.form-control,.form-select{
  font-size:.88rem;border-radius:4px;border-color:#d5dce8;
}
.form-control:focus,.form-select:focus{
  border-color:var(--gov-700);box-shadow:0 0 0 .15rem rgba(18,58,140,.12);
}
.form-label{font-size:.84rem;font-weight:500;color:var(--ink);}

/* ---------- 提示框 ---------- */
.alert{border-radius:var(--radius);font-size:.86rem;border:1px solid transparent;}
.alert-info{background:#eef3fb;border-color:#cfe0f5;color:#14488f;}
.alert-success{background:#eaf6f1;border-color:#bfe6d8;color:#0d7a5f;}
.alert-danger{background:#fdeceb;border-color:#f5c9c5;color:#b32d25;}
.alert-warning{background:#fdf6e6;border-color:#f2e2b8;color:#8a6d1f;}

/* ---------- 空状态 ---------- */
.empty-tip{padding:46px 0;text-align:center;color:#9aa5bd;}
.empty-tip .icon{font-size:2rem;display:block;margin-bottom:8px;opacity:.4;}

/* ---------- 二维码卡片 ---------- */
.qr-card img{width:100%;max-width:240px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;}
.thumb{width:44px;height:44px;object-fit:cover;border-radius:4px;border:1px solid var(--line);}
.log-nowrap{max-width:280px;white-space:normal;word-break:break-all;}

/* ---------- 分页 ---------- */
.pagination{font-size:.85rem;margin-bottom:0;}
.page-link{color:var(--gov-700);border-color:var(--line);}
.page-link:hover{background:#f2f5fb;color:var(--gov-800);}
.page-item.active .page-link{background:var(--gov-700);border-color:var(--gov-700);}

/* ---------- 页脚 ---------- */
footer{
  color:#8a97b1;font-size:.79rem;
  border-top:1px solid var(--line) !important;
  padding-top:12px !important;
}

/* ============================================================
   手机端适配
   ============================================================ */
@media (max-width:767.98px){
  .main-content{padding:14px 12px 26px;}
  .page-title{font-size:1.05rem;}
  .stat-card .num{font-size:1.35rem;}
  .stat-card .ico{width:28px;height:28px;}
  /* 表格在手机上改为卡片式，避免横向滚动难操作 */
  .table{font-size:.82rem;}
  .table thead th{font-size:.78rem;padding:.5rem .55rem;}
  .table td{padding:.55rem .55rem;}
  .filter-bar .col-6{padding-bottom:.5rem;}
  .card-header{flex-wrap:wrap;gap:.5rem;font-size:.88rem;}
  .btn-sm{padding:.28rem .5rem;font-size:.78rem;}
  .mobile-hide{display:none !important;}
  /* 手机端按钮加大，方便手指点击 */
  .btn{padding:.45rem .8rem;}
  .topbar .date-txt{display:none;}
}

/* ============================================================
   补充：政务风格细节装饰
   ============================================================ */

/* 页面标题下方的金色短线（所有页面自动生效，无需改结构） */
.page-title{position:relative;padding-bottom:8px;}
.page-title::after{
  content:"";display:block;width:48px;height:3px;
  background:var(--gold);margin-top:7px;border-radius:2px;
}

/* 待办提醒中的小图标 */
.todo-ico{width:15px;height:15px;vertical-align:-2px;opacity:.75;}

/* 设置页 tab 图标 */
.tab-ico{width:15px;height:15px;vertical-align:-2px;margin-right:5px;opacity:.8;}
.nav-tabs .nav-link{font-size:.88rem;color:var(--ink-2);border-radius:4px 4px 0 0;}
.nav-tabs .nav-link.active{color:var(--gov-800);font-weight:600;border-bottom-color:#fff;}
.nav-tabs .nav-link.active .tab-ico{opacity:1;color:var(--gov-700);}

/* 控制台板块卡：左侧深蓝色条 + 图标方块 */
.mod-card{position:relative;overflow:hidden;}
.mod-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gov-700);}
.mod-ico{
  flex-shrink:0;width:34px;height:34px;border-radius:5px;
  background:#eef2fa;border:1px solid #dde5f2;
  display:flex;align-items:center;justify-content:center;
  color:var(--gov-700);
}
.mod-ico-svg{width:18px;height:18px;}
.mod-name{color:var(--gov-800);letter-spacing:1px;}
/* 统计数字统一用政务深蓝，避免彩色 */
.stat-num-gov{color:var(--gov-800);}

/* 表格操作列按钮组：紧凑整齐 */
.btn-group .btn{border-radius:4px;}
.table .btn-group{gap:3px;}

/* ============================================================
   控制台 · 板块卡片操作区
   「进入管理」按钮独占一行、文字居中；
   日期 + 日报另起一行，避免与按钮挤在一起导致按钮被压缩变形。
   ============================================================ */
.mod-acts {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 进入管理：整行、居中、政务深蓝 */
.btn-enter {
  display: block;
  width: 100%;
  text-align: center;
  padding: 9px 16px;
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: 3px;
  text-indent: 3px;        /* 抵消 letter-spacing 造成的视觉偏移 */
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(11, 42, 107, .18);
  transition: background .18s, box-shadow .18s;
}
.btn-enter:hover,
.btn-enter:focus {
  box-shadow: 0 3px 8px rgba(11, 42, 107, .26);
}

/* 日报行：日期占满剩余空间，按钮固定宽度 */
.daily-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.daily-form .form-control {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.daily-form .btn {
  flex: 0 0 76px;
  text-align: center;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* 手机端：适当加大点击区域 */
@media (max-width: 576px) {
  .btn-enter { padding: 11px 16px; font-size: .9rem; }
  .daily-form .btn { flex: 0 0 88px; }
}

/* 合并后的分区小标题（系统参数页内的密码 / 天气区块） */
.gov-sec-title {
  margin: 18px 0 10px;
  padding-left: 10px;
  border-left: 4px solid var(--gov-700, #123a8c);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: #0b2a6b;
}