/* ============================================================
   Windows 11 · Fluent Design 主题（全局覆盖 Bootstrap 5）
   圆角 / 亚克力质感 / 柔和阴影 / Segoe UI / 强调色 #0067C0
   ============================================================ */
:root {
  --brand: #0067c0;              /* Win11 强调色 */
  --brand-hover: #1975c5;
  --brand-press: #005ba1;
  --brand-light: #e8f1fb;
  --w11-bg: #f3f3f3;             /* Mica 底色 */
  --w11-surface: #ffffff;
  --w11-stroke: rgba(0, 0, 0, .0625);
  --w11-stroke-strong: rgba(0, 0, 0, .12);
  --w11-text: #1b1b1b;
  --w11-text-2: #5d5d5d;
  --w11-radius: 8px;
  --w11-radius-sm: 5px;
  --w11-radius-lg: 12px;
}

/* ---------- 基础 ---------- */
body {
  font-family: "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI",
               "Microsoft YaHei", -apple-system, "PingFang SC", sans-serif;
  font-size: .9rem;
  color: var(--w11-text);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(0, 103, 192, .07), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(0, 103, 192, .05), transparent 60%),
    var(--w11-bg);
}

h5, h6 { font-weight: 600; }
a { color: var(--brand); }
a:hover { color: var(--brand-hover); }
::selection { background: rgba(0, 103, 192, .25); }

/* Win11 细滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .18);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, .32); background-clip: content-box; }

/* ---------- 左侧边栏（Codex 风格 · 亚克力深色） ---------- */
.app-sidebar {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: 224px;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(32, 32, 36, .97), rgba(24, 24, 27, .98));
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-right: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 2px 0 16px rgba(0, 0, 0, .12);
  z-index: 1040;
  overflow-y: auto;
  scrollbar-width: none;
}
.app-sidebar::-webkit-scrollbar { display: none; }
body.has-sb .app-main { margin-left: 224px; }

.sb-brand {
  display: flex; align-items: center; gap: .6rem;
  padding: 1rem .9rem .8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.sb-logo {
  width: 30px; height: 30px; flex: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #4cc2ff, var(--brand) 60%);
  box-shadow: 0 0 10px rgba(76, 194, 255, .45);
}
.sb-title { color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.2; }
.sb-sub { color: rgba(255, 255, 255, .45); font-size: .68rem; }

/* 伸缩按钮 */
.sb-collapse {
  margin-left: auto; flex: none;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.sb-collapse:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.sb-collapse svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s ease;
}
.app-sidebar.collapsed .sb-collapse svg { transform: rotate(180deg); }

/* 侧边栏宽度过渡 */
.app-sidebar, body.has-sb .app-main { transition: width .2s ease, margin-left .2s ease; }

/* 桌面端收缩模式：仅图标（宽 64px），移动端不受影响 */
@media (min-width: 992px) {
  .app-sidebar.collapsed { width: 64px; }
  body.has-sb.sb-collapsed .app-main { margin-left: 64px; }

  .app-sidebar.collapsed .sb-brand {
    flex-direction: column; justify-content: center;
    gap: .5rem; padding: .9rem .5rem .8rem;
  }
  .app-sidebar.collapsed .sb-brand-text { display: none; }

  .app-sidebar.collapsed .sb-nav { padding: .6rem .45rem 1rem; }
  .app-sidebar.collapsed .sb-item { justify-content: center; padding: .48rem .35rem; }
  .app-sidebar.collapsed .sb-label { display: none; }
  /* 分组标题收缩为一小段分隔线 */
  .app-sidebar.collapsed .sb-group {
    font-size: 0; letter-spacing: 0;
    padding: .7rem .55rem .35rem;
  }
  .app-sidebar.collapsed .sb-group::before {
    content: '';
    display: block;
    width: 18px; height: 2px; margin: 0 auto;
    border-radius: 2px;
    background: rgba(255, 255, 255, .16);
  }

  .app-sidebar.collapsed .sb-footer { padding: .8rem .5rem .9rem; }
  .app-sidebar.collapsed .sb-user { justify-content: center; margin-bottom: 0; }
  .app-sidebar.collapsed .sb-user-meta { display: none; }
  .app-sidebar.collapsed .sb-footer .d-flex { display: none; }
}

.sb-nav { flex: 1; padding: .6rem .6rem 1rem; }
.sb-group {
  color: rgba(255, 255, 255, .38);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .08em;
  padding: .8rem .55rem .3rem;
}
.sb-item {
  display: flex; align-items: center; gap: .6rem;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-size: .85rem; font-weight: 500;
  padding: .48rem .6rem;
  border-radius: 7px;
  margin-bottom: 2px;
  transition: background .15s ease, color .15s ease;
}
.sb-item svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  opacity: .85;
}
.sb-item:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.sb-item.active {
  color: #fff;
  background: rgba(0, 103, 192, .32);
  box-shadow: inset 2.5px 0 0 var(--brand);
}
.sb-item.active svg { opacity: 1; }

.sb-footer {
  padding: .8rem .8rem .9rem;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.sb-user { display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; }
.sb-avatar {
  width: 32px; height: 32px; flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #6b9fd4, var(--brand));
  color: #fff; font-weight: 700; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
}
.sb-user-meta { min-width: 0; display: flex; flex-direction: column; }
.sb-user-name { color: #fff; font-size: .8rem; font-weight: 600; }
.sb-user-role { color: rgba(255, 255, 255, .45); font-size: .68rem; }
.sb-btn {
  flex: 1;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  font-size: .74rem; font-weight: 600;
  padding: .3rem .4rem;
}
.sb-btn:hover { color: #fff; background: rgba(255, 255, 255, .12); }

.sb-toggle {
  display: none;
  position: fixed; top: .7rem; left: .7rem; z-index: 1035;
  width: 38px; height: 38px;
  border-radius: 8px;
  border: 1px solid var(--w11-stroke-strong);
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(12px);
  align-items: center; justify-content: center;
}
.sb-toggle svg { width: 18px; height: 18px; fill: none; stroke: #1b1b1b; stroke-width: 2; stroke-linecap: round; }
.sb-backdrop { display: none; }
@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); transition: transform .25s ease; }
  .app-sidebar.open { transform: none; box-shadow: 0 0 48px rgba(0, 0, 0, .45); }
  body.has-sb .app-main { margin-left: 0; padding-top: 3.2rem; }
  .sb-toggle { display: inline-flex; }
  .sb-backdrop.show {
    display: block; position: fixed; inset: 0;
    background: rgba(0, 0, 0, .35); z-index: 1030;
  }
  /* 大队详情工具栏在窄屏/浏览器高缩放时独占一行，避免操作按钮被挤出可视区 */
  .card-header .quota-actions {
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

/* ---------- Armored transport operations theme ---------- */
:root {
  --brand: #1769aa;
  --brand-hover: #0f568e;
  --brand-press: #0b416d;
  --brand-light: #e8f2f8;
  --w11-bg: #edf1f3;
  --w11-surface: #ffffff;
  --w11-text: #17232d;
  --w11-text-2: #61707c;
}
body {
  background: linear-gradient(145deg, #edf1f3 0%, #f7f9fa 52%, #e8eef1 100%);
}
.app-sidebar {
  background: linear-gradient(180deg, #142630 0%, #102029 58%, #0b171e 100%);
  border-right: 3px solid #d28b2c;
  box-shadow: 5px 0 24px rgba(8, 24, 32, .18);
}
.sb-logo {
  border-radius: 6px;
  background: linear-gradient(135deg, #d89a3c, #b66b18);
  box-shadow: 0 0 0 3px rgba(216, 154, 60, .15), 0 0 14px rgba(216,154,60,.28);
}
.sb-title { letter-spacing: .04em; }
.sb-group { color: #9eb0ba; }
.sb-item { border-radius: 5px; }
.sb-item.active {
  background: linear-gradient(90deg, rgba(23,105,170,.55), rgba(23,105,170,.18));
  box-shadow: inset 3px 0 0 #e0a04a;
}
.sb-item:hover { background: rgba(255,255,255,.1); }
.card {
  border-color: #d8e0e4;
  background: rgba(255,255,255,.94);
  box-shadow: 0 3px 12px rgba(25, 48, 60, .07);
}
.card-header { background: #f6f8f9; border-bottom-color: #dbe3e7; }
.btn-primary { background-color: var(--brand); border-color: var(--brand); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--brand-hover); border-color: var(--brand-hover); }
.btn-warning { color: #2d210d; background-color: #dfa14c; border-color: #dfa14c; }
.badge.bg-success { background-color: #277d58 !important; }
.badge.bg-secondary { background-color: #74838c !important; }
.table { --bs-table-hover-bg: #f0f6f9; }
.table thead th { color: #405360; background: #f3f6f7; font-size: .78rem; text-transform: none; }
.table td, .table th { border-color: #e0e6e9; }
.form-control, .form-select { border-color: #cbd7dd; border-radius: 5px; }
.form-control:focus, .form-select:focus { border-color: #5792b7; box-shadow: 0 0 0 .2rem rgba(23,105,170,.14); }
.alert { border-radius: 5px; }
@media (max-width: 575.98px) {
  .app-main { padding-left: .75rem !important; padding-right: .75rem !important; }
  .btn { min-height: 38px; }
  .table td, .table th { white-space: nowrap; }
  h1, h2, h3, h4, h5 { line-height: 1.3; }
}

/* ---------- Desktop top navigation variant ---------- */
@media (min-width: 992px) {
  .app-sidebar {
    width: 100%;
    height: 72px;
    right: 0;
    bottom: auto;
    flex-direction: row;
    align-items: stretch;
    border-right: 0;
    border-bottom: 3px solid #d28b2c;
    overflow: visible;
  }
  body.has-sb .app-main { margin-left: 0; padding-top: 88px; }
  .sb-brand { width: 235px; flex: none; padding: .7rem 1rem; border-bottom: 0; border-right: 1px solid rgba(255,255,255,.08); }
  .sb-nav { display: flex; align-items: stretch; gap: .25rem; padding: .65rem .8rem; overflow-x: auto; }
  .sb-group { display: none; }
  .sb-item { margin: 0; padding: .45rem .8rem; gap: .45rem; white-space: nowrap; align-self: center; }
  .sb-item.active { box-shadow: inset 0 -3px 0 #e0a04a; }
  .sb-footer { margin-left: auto; display: flex; align-items: center; gap: .7rem; padding: .5rem .9rem; border-top: 0; }
  .sb-user { margin: 0; }
  .sb-footer .d-flex { min-width: 110px; }
  .sb-collapse { display: none; }
  .app-sidebar.collapsed { width: 100%; }
  body.has-sb.sb-collapsed .app-main { margin-left: 0; }
  .app-sidebar.collapsed .sb-brand { flex-direction: row; justify-content: flex-start; gap: .6rem; padding: .7rem 1rem; }
  .app-sidebar.collapsed .sb-brand-text, .app-sidebar.collapsed .sb-label,
  .app-sidebar.collapsed .sb-user-meta, .app-sidebar.collapsed .sb-footer .d-flex { display: initial; }
  .app-sidebar.collapsed .sb-item { justify-content: initial; padding: .45rem .8rem; }
}

/* ---------- 首页数据看板 ---------- */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .75rem;
}
.dash-card {
  display: flex; align-items: center; gap: .8rem;
  padding: .85rem 1rem;
  text-decoration: none;
  color: var(--w11-text);
  transition: transform .12s ease, box-shadow .15s ease;
}
.dash-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.06), 0 16px 32px rgba(0,0,0,.06); color: var(--w11-text); }
.dash-ico {
  width: 40px; height: 40px; flex: none;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.dash-ico svg { width: 20px; height: 20px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dash-num { font-size: 1.35rem; font-weight: 700; line-height: 1.15; }
.dash-label { font-size: .78rem; font-weight: 600; color: var(--w11-text-2); }
.dash-sub { font-size: .7rem; color: var(--w11-text-2); line-height: 1.35; }

/* ---------- 卡片（亚克力表面） ---------- */
.card {
  border: 1px solid var(--w11-stroke);
  border-radius: var(--w11-radius);
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 12px 28px rgba(0, 0, 0, .04);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--w11-stroke);
  font-weight: 600;
  border-radius: var(--w11-radius) var(--w11-radius) 0 0 !important;
}
.card-body { padding: .8rem 1rem; }
.card-header { padding: .55rem 1rem; }

/* ---------- 按钮（Fluent 控件） ---------- */
.btn {
  --bs-btn-border-radius: var(--w11-radius-sm);
  font-weight: 600;
  border-radius: var(--w11-radius-sm);
  transition: background-color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .06s ease, color .15s ease;
}
.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-dark) {
  border: 1px solid var(--w11-stroke-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  background: rgba(255, 255, 255, .75);
}
.btn:not(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark):hover {
  background: #f3f3f3;
  border-color: rgba(0, 0, 0, .2);
}
.btn:not(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark):active {
  background: #ececec;
  transform: scale(.985);
}
.btn:focus-visible {
  outline: 2px solid var(--w11-text);
  outline-offset: 1px;
  box-shadow: none;
}
.btn-primary {
  background: var(--brand);
  border: 1px solid rgba(0, 0, 0, .1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.btn-primary:hover { background: var(--brand-hover); }
.btn-primary:active { background: var(--brand-press); transform: scale(.985); }
.btn-outline-primary {
  color: var(--brand);
  border-color: rgba(0, 0, 0, .12);
  background: rgba(255, 255, 255, .75);
}
.btn-outline-primary:hover {
  background: var(--brand-light);
  color: var(--brand-press);
  border-color: var(--brand);
}
.btn-outline-secondary { color: var(--w11-text-2); }
.btn-outline-danger:hover { background: #fde7e9; }

/* ---------- 表单 ---------- */
.form-control, .form-select {
  border-radius: var(--w11-radius-sm);
  border-color: var(--w11-stroke-strong);
  background: rgba(255, 255, 255, .85);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control:hover, .form-select:hover { border-color: rgba(0, 0, 0, .28); }
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: inset 0 -1.5px 0 0 var(--brand), 0 0 0 1px rgba(0, 103, 192, .12);
  background: #fff;
}
.form-label { font-weight: 600; color: var(--w11-text); }
.input-group-text { border-radius: var(--w11-radius-sm); background: #f5f5f5; border-color: var(--w11-stroke-strong); }
.form-check-input { border-radius: 4px; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(0, 103, 192, .2); border-color: var(--brand); }

/* ---------- 表格 ---------- */
.table {
  --bs-table-border-color: var(--w11-stroke);
  margin-bottom: 0;
}
.table > :not(caption) > * > * { padding: .4rem .55rem; }
.table thead th {
  background: #fafafa;
  font-weight: 600;
  color: var(--w11-text-2);
  font-size: .82em;
  border-bottom: 1px solid var(--w11-stroke-strong);
}
.table-sm th, .table-sm td { vertical-align: middle; padding: .3rem .5rem; }
.table-hover > tbody > tr:hover > * { background: rgba(0, 103, 192, .045); }
.table-light { background: #fafafa; }
.card .table { border-radius: 0 0 var(--w11-radius) var(--w11-radius); overflow: hidden; }

/* ---------- 弹窗 ---------- */
.modal-content {
  border: 1px solid var(--w11-stroke-strong);
  border-radius: var(--w11-radius-lg);
  box-shadow: 0 32px 64px rgba(0, 0, 0, .24), 0 2px 12px rgba(0, 0, 0, .12);
}
.modal-header { border-bottom: 1px solid var(--w11-stroke); padding: .65rem 1rem; }
.modal-title { font-weight: 600; }
.modal-backdrop.show { opacity: .35; backdrop-filter: blur(2px); }
.btn-close { border-radius: var(--w11-radius-sm); padding: .45rem; background-size: .65em; }
.btn-close:hover { background-color: rgba(0, 0, 0, .06); }

/* ---------- 徽标 / 提示条 ---------- */
.badge { border-radius: 5px; font-weight: 600; }
.alert {
  border-radius: var(--w11-radius);
  border-width: 1px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}
.alert-light { background: rgba(255, 255, 255, .8); border-color: var(--w11-stroke-strong); }
.alert-dismissible .btn-close { padding: .6rem .8rem; }

/* ---------- 下拉 / 分页 ---------- */
.dropdown-menu {
  border-radius: var(--w11-radius);
  border-color: var(--w11-stroke-strong);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
  overflow: hidden;
  padding: .25rem;
}
.dropdown-item { border-radius: var(--w11-radius-sm); padding: .4rem .65rem; }
.dropdown-item:hover { background: rgba(0, 0, 0, .05); }
.page-link {
  border-radius: var(--w11-radius-sm) !important;
  margin: 0 2px;
  border: 1px solid var(--w11-stroke-strong);
  color: var(--w11-text);
}
.page-item.active .page-link { background: var(--brand); border-color: var(--brand); }

/* ---------- 原有业务样式 ---------- */
.stat-num { font-size: 1.5rem; font-weight: 700; }
.text-lack { color: #c42b1c; font-weight: 700; }
.login-wrap { max-width: 380px; margin: 10vh auto; }
.sticky-head th { position: sticky; top: 0; background: #fafafa; z-index: 1; }

/* ---------- 响应式布局兜底 ----------
   业务表格（排班、考勤）需要保留列宽，因此只让表格自身横向滚动；
   页面外层始终禁止横向溢出，避免手机出现整页被撑宽、按钮消失。 */
html, body { max-width: 100%; overflow-x: hidden; }
.app-main { min-width: 0; width: 100%; }
.app-main > * { min-width: 0; }
.table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive > table { min-width: max-content; }
.card, .card-body, .card-header { min-width: 0; }
.text-nowrap { white-space: nowrap; }

@media (max-width: 991.98px) {
  .app-main { padding-left: .75rem !important; padding-right: .75rem !important; }
  .app-main > .d-flex { flex-wrap: wrap; gap: .5rem; }
  .app-main > .d-flex > :last-child { max-width: 100%; display: flex; flex-wrap: wrap; gap: .35rem; }
  .app-main > .d-flex h5,
  .app-main > .d-flex h6 { max-width: 100%; line-height: 1.35; }
  .row.g-2.align-items-end > [class*="col-"],
  .row.g-1.align-items-center > [class*="col-"] { width: 100%; max-width: 100%; }
  .row.g-2.align-items-end .form-select,
  .row.g-2.align-items-end .form-control { width: 100%; }
  .card-body { padding: .7rem; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-card { min-height: 70px; }
  .pagination { flex-wrap: wrap; }
  .pagination .page-link { white-space: normal; }
  .btn { max-width: 100%; }
  .form-control, .form-select { max-width: 100%; }
}

@media (max-width: 575.98px) {
  body { font-size: .86rem; }
  .app-main { padding-top: 3.7rem !important; }
  .app-main > .d-flex > :last-child .btn,
  .app-main > .d-flex > :last-child a { flex: 1 1 auto; }
  .card-header { padding: .55rem .7rem; }
  .table > :not(caption) > * > * { padding: .32rem .4rem; }
  .table-responsive { margin-left: -.7rem; margin-right: -.7rem; padding: 0 .7rem; }
  .modal-dialog { margin: .5rem; }
  .modal-dialog, .modal-content { max-width: calc(100vw - 1rem); }
  .alert { overflow-wrap: anywhere; }
}