/* ============================================================
   商达电脑售后管理系统 · 全局样式 v10.17
   整体配色/字体/深色模式重设计，PC 端优先，手机端适配
   ============================================================ */
:root[data-theme="light"] {
  --bg: #f2f5fa;
  --card-bg: #ffffff;
  --border: #dfe6f0;
  --text: #1c2637;
  --text-muted: #68748a;
  --primary: #2f6bff;
  --primary-strong: #1e4fd8;
  --primary-soft: #eaf0ff;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;
  --navbar-bg: linear-gradient(120deg, #16294f 0%, #2556c9 60%, #2f6bff 100%);
  --navbar-text: #ffffff;
  --shadow: 0 3px 14px rgba(28, 55, 110, .07);
  --table-head-bg: #eef2f9;
  --hover-bg: #f5f8ff;
  --input-bg: #ffffff;
  --panel-bg: #f7f9fd;
}

:root[data-theme="dark"] {
  --bg: #0d131f;
  --card-bg: #182136;
  --border: #31405f;
  --text: #f2f6fd;
  --text-muted: #aab8d0;
  --primary: #6b9aff;
  --primary-strong: #8fb4ff;
  --primary-soft: #1d2b4e;
  --success: #4ade80;
  --danger: #fb7d7d;
  --warning: #fcd34d;
  --navbar-bg: linear-gradient(120deg, #0a1120 0%, #14264d 60%, #1e3a8a 100%);
  --navbar-text: #ffffff;
  --shadow: 0 3px 14px rgba(0, 0, 0, .45);
  --table-head-bg: #1e2a40;
  --hover-bg: #1c2740;
  --input-bg: #111a2b;
  --panel-bg: #131c2e;
}

/* ---------- 基础字体（重设计：系统无衬线 + 数字等宽对齐） ---------- */
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .01em;
}

/* ---------- 导航栏 ---------- */
.app-navbar {
  background: var(--navbar-bg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .14);
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.app-navbar .navbar-brand {
  color: var(--navbar-text);
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  position: relative;
}
/* 公共首页（未登录）：系统名居中（桌面端） */
@media (min-width: 768px) {
  .nav-anon .nav-shell { position: relative; min-height: 3rem; }
  .nav-anon .navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }
}
.app-navbar .nav-link {
  color: rgba(255, 255, 255, .9);
  border-radius: 7px;
  margin: 0 .12rem;
  font-size: .93rem;
  padding: .42rem .72rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
/* button 化导航：清除按钮默认样式（需求11-10：hover 不再显示地址） */
button.navbar-brand,
button.nav-link,
button.dropdown-item {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
button.dropdown-item { width: 100%; }
.app-navbar .nav-link:hover,
.app-navbar .nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, .18);
}
/* 桌面导航：左对齐、紧邻品牌（需求16） */
.nav-main-links {
  gap: .2rem;
  margin-left: 1.8rem;
}
/* 右上角快捷按钮（需求20） */
.nav-quick-actions { margin-right: .5rem; }
.nav-quick-btn {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .55) !important;
  font-size: .8rem;
  padding: .22rem .72rem;
  border-radius: 999px;
}
.nav-quick-btn:hover {
  background: rgba(255, 255, 255, .2) !important;
  border-color: #fff !important;
}
.user-chip {
  font-weight: 600;
  color: #fff !important;
}
.clock-inline {
  font-size: .74rem;
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  padding: .16rem .62rem;
  margin-left: .55rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .clock-inline { display: none; }
}
.login-btn {
  font-weight: 600;
}

/* 品牌 hover 浮层（需求2：点击返回首页，停留2秒消失） */
.brand-tip {
  position: fixed;
  z-index: 2000;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--card-bg);
  font-size: .78rem;
  line-height: 1;
  padding: .42rem .72rem;
  border-radius: 7px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.brand-tip.show { opacity: 1; }
.brand-tip::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--text);
}

/* ---------- 表单分区标题（重设计页面用） ---------- */
.section-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  border-left: 3px solid var(--primary);
  padding-left: .55rem;
  margin-bottom: .65rem;
  letter-spacing: .02em;
}

/* ---------- 卡片 ---------- */
.card {
  background-color: var(--card-bg);
  border-color: var(--border);
  box-shadow: var(--shadow);
  border-radius: 12px;
}
.card-header {
  background-color: var(--card-bg);
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--border);
  border-radius: 12px 12px 0 0 !important;
}
.card-title { color: var(--text); }
.text-muted { color: var(--text-muted) !important; }
.bg-light { background-color: var(--panel-bg) !important; }
.bg-white { background-color: var(--card-bg) !important; }

/* ---------- 表格 ---------- */
.table {
  --bs-table-bg: transparent;
  color: var(--text);
}
.table thead th {
  background-color: var(--table-head-bg) !important;
  color: var(--text);
  white-space: nowrap;
  font-size: .86rem;
  font-weight: 600;
}
.table-hover tbody tr:hover { background-color: var(--hover-bg); }
.table-bordered, .table-bordered td, .table-bordered th {
  border-color: var(--border);
}
.table > :not(caption) > * > * {
  padding: .42rem .6rem;
}
.table td, .table th {
  text-align: center;
  vertical-align: middle;
  word-break: break-word;
  white-space: normal;
}
.text-truncate-cell {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 卡片式记录列表（需求10-4：去表格化 UI 重建） ---------- */
/* 需求11-5：宽屏一排多卡，窄屏自动换行/单列 */
.rec-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .5rem;
}
@media (min-width: 1200px) {
  .rec-list { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767.98px) {
  .rec-list { grid-template-columns: 1fr; }
}
.rec-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .8rem .8rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.rec-card:hover {
  border-color: var(--primary);
  box-shadow: 0 3px 12px rgba(47, 107, 255, .14);
  background: var(--hover-bg);
}
.rec-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .25rem;
  flex-wrap: nowrap;
  margin-bottom: .1rem;
}
.rec-top .dt {
  font-size: .72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rec-top .dt:first-child { margin-right: auto; }
.rec-top .rec-staff {
  font-size: .78rem;
  color: var(--text-muted);
  margin-left: .35rem;
  flex-shrink: 0;
}
.rec-badge {
  font-size: .68rem;
  font-weight: 600;
  margin-left: auto;
}
.rec-title {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.rec-location {
  font-weight: 700;
  font-size: .9rem;
  color: var(--text);
}
.rec-tag {
  font-size: .73rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 6px;
  padding: .04rem .42rem;
}
.rec-tel {
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.rec-body {
  color: var(--text);
  font-size: .82rem;
  line-height: 1.3;
}
.rec-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: auto;
  padding-top: .1rem;
  font-size: .72rem;
  color: var(--text-muted);
}
.rec-hint {
  position: fixed;
  z-index: 2000;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--card-bg);
  font-size: .78rem;
  line-height: 1;
  padding: .38rem .7rem;
  border-radius: 7px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
.rec-hint.show { opacity: 1; }
/* 深色下徽章底色提亮，保证可读 */
:root[data-theme="dark"] .rec-badge.bg-danger-subtle { background: #3b1f28 !important; color: #ffa4a4 !important; }
:root[data-theme="dark"] .rec-badge.bg-success-subtle { background: #123326 !important; color: #7ee2a4 !important; }
:root[data-theme="dark"] .rec-badge.bg-primary-subtle { background: #1d2b4e !important; color: #8fb4ff !important; }
@media (max-width: 767.98px) {
  .rec-card { padding: .62rem .8rem; }
  .rec-location { font-size: .94rem; }
  .rec-meta { gap: .6rem; }
}

/* ---------- 时间样式统一（需求18：紧凑美观，等宽数字 + 灰底胶囊） ---------- */
.dt {
  display: inline-block;
  font-size: .8rem;
  font-weight: 500;
  color: var(--text);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .06rem .45rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.45;
}
.dt.dt-muted { color: var(--text-muted); }
.dt.dt-success { color: var(--success); border-color: rgba(22, 163, 74, .35); background: rgba(22, 163, 74, .08); }

/* ---------- 表单 ---------- */
.form-control, .form-select {
  background-color: var(--input-bg);
  color: var(--text);
  border-color: var(--border);
}
.form-control:focus {
  background-color: var(--input-bg);
  color: var(--text);
  box-shadow: 0 0 0 .18rem rgba(47, 107, 255, .18);
  border-color: var(--primary);
}
.form-control::placeholder { color: var(--text-muted); opacity: .75; }
/* 需求11-3：输入框上方功能名称与输入框居中对齐；输入框内提示词居中（textarea 保持左对齐） */
.form-label { color: var(--text); font-size: .88rem; margin-bottom: .28rem; display: block; text-align: center; width: 100%; }
.form-control:not(textarea),
.form-select {
  text-align: center;
}
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

/* ---------- 筛选栏（需求11-2：查询模块胶囊化；需求13-3：label 与输入框协调） ---------- */
.filter-bar {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .8rem 1rem;
}
.filter-bar .form-label { margin-bottom: .18rem; }
.filter-bar > [class*="col-"] {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.filter-bar > [class*="col-"] .form-label {
  margin-bottom: 0;
  min-width: 4.4rem;
  max-width: 4.4rem;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.2;
}
.filter-bar > [class*="col-"] .form-control {
  flex: 1 1 auto;
  min-width: 0;
}
/* 按钮列保持原 flex 排布 */
.filter-bar > [class*="col-"] .d-flex {
  flex: 1 1 auto;
}
@media (max-width: 575.98px) {
  .filter-bar > [class*="col-"] {
    flex-wrap: nowrap;
    gap: .3rem;
  }
  .filter-bar > [class*="col-"] .form-label {
    min-width: 3.2rem;
    max-width: 3.2rem;
    font-size: .76rem;
  }
  .filter-bar > [class*="col-"] .form-control {
    min-width: 0;
    font-size: .8rem;
  }
}

/* 校验错误闪烁 2 下（需求1） */
@keyframes err-flash-kf {
  0%, 100% { opacity: 1; }
  50% { opacity: .15; }
}
.err-flash {
  animation: err-flash-kf .34s ease 2;
  color: var(--danger) !important;
  font-weight: 600;
}

/* ---------- 公开首页 ---------- */
.public-hero {
  background: linear-gradient(160deg, #16294f 0%, #2556c9 55%, #2f6bff 100%);
  color: #fff;
  border-radius: 16px;
  padding: 2.2rem 1.5rem;
  margin-bottom: 1rem;
  text-align: center;
}
.public-hero-inner { max-width: 680px; margin: 0 auto; }
.hero-title { font-weight: 800; font-size: 1.9rem; letter-spacing: .02em; }
.hero-phone {
  font-size: 1.3rem;
  margin: .9rem 0 .4rem;
  background: rgba(0, 0, 0, .32);
  display: inline-block;
  padding: .55rem 1.5rem;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.hero-phone strong {
  font-size: 1.8rem;
  color: #fff;
  font-weight: 800;
  letter-spacing: .03em;
}
.hero-sub { color: #fff; margin-bottom: 1.4rem; font-size: 1.05rem; line-height: 1.7; }
.hero-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.hero-kicker {
  display: inline-block;
  font-size: .85rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: .6rem;
}
.btn-repair {
  background: #fff;
  color: #16294f;
  font-weight: 700;
  padding: .8rem 2.6rem;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-repair:hover {
  color: #16294f;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}

/* ---------- 工作台（需求4：间距优化） ---------- */
.dashboard-head {
  padding: .15rem 0 .25rem;
  margin-bottom: 1.05rem;
}
.dashboard-head h4 {
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.dashboard-head p {
  margin-top: .3rem;
  font-size: .86rem;
  line-height: 1.5;
}
.dash-card { transition: transform .15s ease, box-shadow .15s ease; }
.dash-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(28, 55, 110, .18) !important;
}
.dash-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
}
.dash-icon-wrap {
  position: relative;
  display: inline-block;
}
.dash-corner-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 1.25rem;
  padding: .05rem .42rem;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.3;
}
.dash-badge {
  display: inline-block;
  min-width: 2rem;
  padding: .15rem .6rem;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  margin-top: .2rem;
}
/* 工作台快捷操作卡片（需求4） */
.dash-quick-card .card-body { padding: .9rem 1.1rem; }

/* ===== PC 端页面宽度（两边留白，居中） ===== */
@media (min-width: 992px) {
  main.container-fluid {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- 报修成功 ---------- */
.repair-success-card { border-color: var(--success); }
.success-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .8rem;
}
.success-title { color: var(--success); font-weight: 700; }

/* ---------- 按钮统一 ---------- */
/* 需求11-6：胶囊按钮统一高度与比例，避免挤压/不精致 */
.btn {
  border-radius: 8px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .95rem;
  line-height: 1;
}
.btn-sm {
  height: 30px;
  padding: 0 .75rem;
  font-size: .82rem;
}
.btn-lg {
  height: 46px;
  padding: 0 1.3rem;
}
.btn-primary { background-color: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background-color: var(--primary-strong); border-color: var(--primary-strong); }
.btn-success { background-color: var(--success); border-color: var(--success); }
.btn-danger { background-color: var(--danger); border-color: var(--danger); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); }
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.bg-primary { background-color: var(--primary) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-warning { background-color: var(--warning) !important; }
.badge { font-weight: 600; }

/* ---------- 页脚（全站格言，低调展示） ---------- */
footer {
  color: var(--text-muted) !important;
  padding: 1.2rem 1rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
  line-height: 1.7;
}
footer .auth-quote {
  color: var(--text-muted);
  font-size: .92rem;
  letter-spacing: .02em;
  font-weight: 400;
}
/* ---------- 登录/注册页：flex 一屏布局（任意视口格言无需下拉即可见） ---------- */
body:has(.auth-center) {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
body:has(.auth-center) main {
  flex: 1 1 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 9dvh;
  padding-bottom: .4rem;
}
body:has(.auth-center) main .auth-center {
  width: 100%;
  align-self: center;
}
body:has(.auth-center) > footer.footer-quote-wrap {
  flex-shrink: 0;
  padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
}
/* 手机端：格言上移防遮挡（底部导航/浏览器栏） */
@media (max-width: 767.98px) {
  footer .auth-quote { font-size: .95rem; }
  .footer-quote-wrap { padding-bottom: 4.2rem; }
  /* 登录/注册页无底部导航：页脚紧凑，格言上移不被地址栏遮挡 */
  .auth-center {
    padding: 1rem 0 .5rem;
  }
  main:has(.auth-center) + footer.footer-quote-wrap { padding-bottom: 1.1rem; }
}
/* 详情页（售后/装机等 dl 表单）可读性 */
dl.row {
  font-size: 1rem;
  line-height: 1.7;
}
dl.row dt {
  color: #4b5a70;
  font-weight: 600;
  padding: .28rem 0;
}
dl.row dd {
  color: var(--text);
  margin-bottom: 0;
  padding: .28rem 0;
}
:root[data-theme="dark"] dl.row dt { color: #b8c4da; }
:root[data-theme="dark"] dl.row dd { color: #ffffff; }
@media (max-width: 575.98px) {
  dl.row { font-size: .95rem; }
  dl.row dt, dl.row dd { padding: .22rem 0; }
}
/* ---------- 详情页信息网格（需求13-6/7：基础信息整齐排列、合理缩窄） ---------- */
.info-grid {
  row-gap: .85rem;
}
.info-grid [class*="col-"] {
  display: flex;
  flex-direction: column;
}
.info-grid .f-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: .18rem;
  display: block;
  text-align: left;
}
.info-grid .f-val {
  flex: 1;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.5;
  padding: .42rem .7rem;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-height: 38px;
  word-break: break-word;
}
.info-grid .f-val dt,
.info-grid .f-val dd {
  padding: 0;
  line-height: 1.5;
}
:root[data-theme="dark"] .info-grid .f-label { color: #aab8d0; }
:root[data-theme="dark"] .info-grid .f-val { color: #f2f6fd; }
@media (max-width: 575.98px) {
  .info-grid .f-val { font-size: .95rem; min-height: 34px; padding: .36rem .6rem; }
}
/* 公共首页报修方式卡片文字提亮 */
.home-info-card .card-title { font-size: 1.15rem; font-weight: 700; }
.home-info-list {
  color: #1f2937;
  font-size: 1rem;
  line-height: 1.85;
  padding-left: 1.2rem;
}
.home-info-list li { margin-bottom: .6rem; }
.home-info-list li:last-child { margin-bottom: 0; }
.home-info-list strong { color: var(--primary); font-weight: 700; }
:root[data-theme="dark"] .home-info-list { color: #e2e8f2; }

/* ---------- 设置中心（需求13：紧凑三列卡片） ---------- */
.settings-card .card-body { padding: .7rem .85rem; }
.settings-card .card-header { padding: .48rem .85rem; font-size: .95rem; }
.settings-row { margin-bottom: .5rem; }
.settings-row .form-label { font-size: .8rem; margin-bottom: .2rem; color: var(--text-muted); }
.settings-card .btn-sm { border-radius: 7px; }
.user-table td { padding: .32rem .4rem; font-size: .87rem; }

/* ---------- 分页（加大间距与按钮，避免拥挤） ---------- */
.pagination {
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .2rem;
}
.pagination .page-link {
  background-color: var(--card-bg);
  color: var(--text);
  border-color: var(--border);
  border-radius: 8px;
  min-width: 2.1rem;
  text-align: center;
  margin: 0;
  padding: .32rem .55rem;
}
.pagination .page-item.active .page-link {
  background-color: var(--primary);
  border-color: var(--primary);
}
.pagination .page-item.disabled .page-link {
  background-color: var(--card-bg);
  color: var(--text-muted);
  border-color: var(--border);
}

/* ---------- 下拉菜单 / 模态框 / 提示 ---------- */
.dropdown-menu {
  background-color: var(--card-bg);
  border-color: var(--border);
  box-shadow: var(--shadow);
}
.dropdown-item { color: var(--text); }
.dropdown-item:hover { background-color: var(--hover-bg); color: var(--text); }
.modal-content {
  background-color: var(--card-bg);
  color: var(--text);
  border-color: var(--border);
}
.alert { border-radius: 10px; }
.alert-secondary { background-color: var(--panel-bg); color: var(--text); border-color: var(--border); }
.alert-info { background-color: var(--primary-soft); color: var(--text); border-color: rgba(47, 107, 255, .3); }
.bg-primary-subtle { background-color: var(--primary-soft) !important; }
.text-primary { color: var(--primary) !important; }

/* 深色模式：Bootstrap subtle 徽章/图标底色与文字提亮，保证可读（需求10-14） */
:root[data-theme="dark"] .bg-danger-subtle { background-color: #3b1f28 !important; }
:root[data-theme="dark"] .text-danger { color: #ffa4a4 !important; }
:root[data-theme="dark"] .bg-success-subtle { background-color: #123326 !important; }
:root[data-theme="dark"] .text-success { color: #7ee2a4 !important; }
:root[data-theme="dark"] .bg-primary-subtle { background-color: #1d2b4e !important; }
:root[data-theme="dark"] .text-primary { color: #8fb4ff !important; }
:root[data-theme="dark"] .bg-info-subtle { background-color: #143044 !important; }
:root[data-theme="dark"] .text-info { color: #7ec8ff !important; }
:root[data-theme="dark"] .bg-warning-subtle { background-color: #3a2e12 !important; }
:root[data-theme="dark"] .text-warning { color: #fcd34d !important; }
:root[data-theme="dark"] .alert-primary { background-color: var(--primary-soft); color: var(--text); border-color: rgba(107, 154, 255, .35); }
:root[data-theme="dark"] .alert-success { background-color: #123326; color: var(--text); border-color: rgba(74, 222, 128, .35); }
:root[data-theme="dark"] .alert-danger { background-color: #3b1f28; color: var(--text); border-color: rgba(251, 125, 125, .35); }
:root[data-theme="dark"] .alert-warning { background-color: #3a2e12; color: var(--text); border-color: rgba(252, 211, 77, .35); }
:root[data-theme="dark"] .alert-info { background-color: #143044; color: var(--text); border-color: rgba(126, 200, 255, .35); }

/* ---------- 响应式 ---------- */
@media (max-width: 575.98px) {
  .text-truncate-cell { max-width: 140px; }
  .hero-title { font-size: 1.4rem; }
  .hero-phone { font-size: 1.1rem; }
  .hero-phone strong { font-size: 1.6rem; }
  .hero-sub { font-size: 1rem; line-height: 1.7; }
  .login-btn { padding: .32rem .9rem; }
  .app-navbar .navbar-brand { font-size: 1.08rem; }
}

/* 双击工单行打开详情 */
.table tbody tr { cursor: pointer; }

/* 手机端：列表行高压紧，按钮适配 */
@media (max-width: 767.98px) {
  .table td,
  .table th {
    padding: .32rem .28rem;
    font-size: .82rem;
    line-height: 1.3;
  }
  .table .btn-sm {
    padding: .15rem .4rem;
    font-size: .75rem;
  }
  .table .text-truncate-cell { max-width: 130px; }
  .dt { font-size: .74rem; padding: .04rem .34rem; }
}

/* ===== 手机端底部导航（待处理/已处理/装机/统计）：整体胶囊 ===== */
.mobile-bottom-nav {
  position: fixed;
  bottom: 6px;
  left: 14px;
  right: 14px;
  z-index: 1030;
  display: flex;
  gap: 4px;
  padding: 5px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
}
.mnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  padding: .34rem 0 .38rem;
  min-height: 48px;
  color: var(--text-muted);
  font-size: .74rem;
  text-decoration: none;
  border-radius: 17px;
  transition: background .2s, color .2s;
}
.mnav-item svg {
  width: 20px;
  height: 20px;
}
.mnav-item:hover,
.mnav-item:focus {
  color: var(--text);
  text-decoration: none;
}
.mnav-item.active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}

/* ===== 手机端用户名下拉：不拉伸导航栏 ===== */
@media (max-width: 767.98px) {
  .app-navbar .nav-item.dropdown {
    position: relative;
  }
  .app-navbar .dropdown-menu {
    position: absolute !important;
    inset: auto 0 auto auto !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    min-width: 9rem !important;
    max-width: 13rem !important;
    margin-top: .4rem !important;
    border-radius: 10px;
  }
  .app-navbar .dropdown-menu.show {
    display: block;
  }
}

/* ===== 手机端工作台田字格：缩小比例 ===== */
@media (max-width: 767.98px) {
  .dash-card .card-body {
    padding: .65rem .4rem;
  }
  .dash-icon {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
    border-radius: 10px;
  }
  .dash-card .card-title {
    font-size: .86rem;
    margin-top: .45rem !important;
  }
  .dash-corner-badge {
    top: -8px;
    right: -12px;
    font-size: .72rem;
    min-width: 1.1rem;
  }
  .dash-card .dash-icon-wrap {
    line-height: 0;
  }
}

/* ===== 人员选择器：点击输入框弹出的选择面板 ===== */
.person-picker {
  position: relative;
  display: block;
  width: 100%;
}
.person-picker .form-control {
  width: 100%;
}
.input-group .person-picker {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.person-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1080;
  margin-top: .3rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  padding: .6rem;
  display: none;
  max-height: 260px;
  overflow-y: auto;
}
.person-panel.open {
  display: block;
}
.person-panel .pp-title {
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: .35rem;
}
.person-panel .pp-users {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .5rem;
}
.person-panel .pp-user {
  font-size: .82rem;
  padding: .2rem .6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.person-panel .pp-user:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.person-panel .pp-manual {
  display: flex;
  gap: .35rem;
}
.person-panel .pp-manual input {
  flex: 1;
  min-width: 0;
}

/* ---------- 深色模式细节补齐（需求19） ---------- */
:root[data-theme="dark"] .form-check-input { background-color: var(--input-bg); border-color: #3a4a6b; }
:root[data-theme="dark"] .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
:root[data-theme="dark"] .btn-outline-secondary {
  color: #c3cde2;
  border-color: #3a4a6b;
}
:root[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: #2a3550;
  color: #e8eef8;
  border-color: #3a4a6b;
}
:root[data-theme="dark"] .btn-outline-info,
:root[data-theme="dark"] .btn-outline-success,
:root[data-theme="dark"] .btn-outline-danger,
:root[data-theme="dark"] .btn-outline-warning {
  color: #c3cde2;
  border-color: #3a4a6b;
}
:root[data-theme="dark"] .badge.bg-light,
:root[data-theme="dark"] .bg-light.text-dark {
  background-color: #2a3550 !important;
  color: #e8eef8 !important;
  border-color: #3a4a6b;
}
:root[data-theme="dark"] .text-dark { color: #e8eef8 !important; }
/* 深色模式实底按钮/徽章：亮底深字，保证文字不再低对比（需求16-6） */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .btn-primary:focus,
:root[data-theme="dark"] .btn-primary:active {
  background-color: #7ea3f7 !important;
  border-color: #7ea3f7 !important;
  color: #0a1428 !important;
}
:root[data-theme="dark"] .btn-danger,
:root[data-theme="dark"] .btn-danger:hover,
:root[data-theme="dark"] .btn-danger:focus,
:root[data-theme="dark"] .btn-danger:active {
  background-color: #f88e8e !important;
  border-color: #f88e8e !important;
  color: #3d0a0a !important;
}
:root[data-theme="dark"] .btn-success,
:root[data-theme="dark"] .btn-success:hover,
:root[data-theme="dark"] .btn-success:focus,
:root[data-theme="dark"] .btn-success:active {
  background-color: #6fd69a !important;
  border-color: #6fd69a !important;
  color: #06240f !important;
}
:root[data-theme="dark"] .badge.bg-primary { background-color: #7ea3f7 !important; color: #0a1428 !important; }
:root[data-theme="dark"] .badge.bg-secondary { background-color: #8b99ab !important; color: #0e1826 !important; }
:root[data-theme="dark"] .badge.bg-danger { background-color: #f88e8e !important; color: #3d0a0a !important; }
:root[data-theme="dark"] .badge.bg-success { background-color: #6fd69a !important; color: #06240f !important; }
:root[data-theme="dark"] .btn-outline-primary { color: #9dbdff !important; border-color: #4a6fd0 !important; }
:root[data-theme="dark"] .btn-outline-primary:hover { background-color: #1d2b4e !important; color: #cfe0ff !important; }
:root[data-theme="dark"] .btn-outline-danger { color: #ff9a9a !important; border-color: #7a2f3f !important; }
:root[data-theme="dark"] .btn-outline-danger:hover { background-color: #3b1f28 !important; color: #ffb3b3 !important; }
:root[data-theme="dark"] .btn-outline-success { color: #7ee2a4 !important; border-color: #2f6b4a !important; }
:root[data-theme="dark"] .btn-outline-success:hover { background-color: #123326 !important; color: #a9f2c4 !important; }
:root[data-theme="dark"] .table-light { --bs-table-bg: transparent; color: var(--text); }
:root[data-theme="dark"] .table-light th { background-color: var(--table-head-bg) !important; }
:root[data-theme="dark"] .nav-quick-btn { color: #fff !important; }
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="month"],
:root[data-theme="dark"] input[type="datetime-local"] {
  color-scheme: dark;
}
:root[data-theme="dark"] .page-link { color: #c3cde2; }
:root[data-theme="dark"] .person-panel .pp-user { background: var(--input-bg); }

/* ============================================================
   v10.15 全局胶囊化：除系统名 logo 外，所有 UI 元素统一胶囊圆角
   说明：容器类（卡片/弹窗等）使用 999px，浏览器自动按宽高收敛为超椭圆
   ============================================================ */
/* 按钮：全部胶囊 */
.btn,
.btn-sm,
.btn-lg,
.btn-group .btn {
  border-radius: 999px !important;
}
/* 输入控件：胶囊输入框、下拉、复选、文件选择 */
.form-control,
.form-select,
.form-check-input,
input[type="file"],
.input-group-text {
  border-radius: 999px !important;
}
.form-check-input {
  border-radius: 999px !important;
}
/* 导航项胶囊（系统名 logo 除外） */
.app-navbar .nav-link {
  border-radius: 999px !important;
}
/* 卡片与记录卡容器：大圆角胶囊感（避免超椭圆挤压内容） */
.card,
.card-header,
.card-footer,
.rec-card {
  border-radius: 20px !important;
}
/* 大文本域：柔和圆角，避免内容被圆弧挤压 */
textarea.form-control {
  border-radius: 14px !important;
}
/* 标签 / 时间胶囊 / 徽章 */
.rec-tag,
.dt,
.badge {
  border-radius: 999px !important;
}
/* 提示浮层（品牌提示 / 双击提示） */
.brand-tip,
.rec-hint {
  border-radius: 999px !important;
}
/* 弹窗 / 下拉 / 人员选择面板：大圆角浮层 */
.modal-content,
.dropdown-menu,
.person-panel {
  border-radius: 16px !important;
}
/* 详情页安排人员输入框固定宽度 */
.assign-input {
  width: 200px !important;
}
/* 警示条 */
.alert {
  border-radius: 16px !important;
}
/* 分页 */
.pagination .page-link {
  border-radius: 999px !important;
}
/* 工作台图标底 / 角标 / 数字徽章 */
.dash-icon,
.dash-corner-badge,
.dash-badge {
  border-radius: 999px !important;
}
/* 公共首页大横幅：大圆角 */
.public-hero {
  border-radius: 24px !important;
}

/* ============================================================
   flatpickr 日期选择器：胶囊化样式（替代浏览器原生直角弹层）
   ============================================================ */
.flatpickr-calendar {
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  border-radius: 16px !important;
  overflow: hidden;
  background: var(--card-bg) !important;
  color: var(--text);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
  border-bottom-color: var(--border) !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--text) !important;
}
.flatpickr-weekday {
  color: var(--text-muted) !important;
}
.flatpickr-day {
  color: var(--text) !important;
  border-radius: 999px !important;
  border: 0 !important;
}
.flatpickr-day:hover {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.today.selected {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.flatpickr-day.today {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.flatpickr-day.today:hover {
  background: var(--primary-soft) !important;
}
.flatpickr-day.nextMonthDay,
.flatpickr-day.prevMonthDay {
  color: var(--text-muted) !important;
  opacity: .5;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: var(--text-muted) !important;
  opacity: .45;
}
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  color: var(--text) !important;
}
.flatpickr-time .numInputWrapper span.arrowUp::after,
.flatpickr-time .numInputWrapper span.arrowDown::after {
  border-bottom-color: var(--text-muted) !important;
  border-top-color: var(--text-muted) !important;
}
.flatpickr-calendar .flatpickr-innerContainer,
.flatpickr-calendar .flatpickr-rContainer,
.flatpickr-calendar .flatpickr-time {
  background: var(--card-bg) !important;
}
.flatpickr-calendar.open {
  z-index: 1200;
}
.flatpickr-current-month input.cur-year {
  box-shadow: none !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--primary) !important;
}

/* ===== 登录/注册页：垂直水平居中 + 间距优化 ===== */
.auth-card {
  border-radius: 20px;
}
.auth-card .form-label {
  text-align: left;
}
.auth-card .form-control {
  height: 44px;
}
.auth-card .btn {
  height: 44px;
  margin-top: .25rem;
}
.auth-quote {
  color: var(--text-muted);
  letter-spacing: .02em;
}
@media (min-width: 768px) {
  .auth-center {
    padding: 1rem 0 1.5rem;
  }
}


/* ===== v10.29 手机端体验优化 =====
   1) 页面切换过渡动画：淡入+轻微上移，掩饰加载微卡顿
   2) 手机端输入框字号 ≥16px：阻止 iOS Safari 聚焦自动放大页面
   3) 手机端日期/时间输入使用系统原生选择器（flatpickr 已跳过） */
.page-enter {
  animation: pageEnter .38s ease-out;
}
@keyframes pageEnter {
  from { opacity: .15; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
html {
  /* 防止 iOS 对横向布局自动放大文本（配合 viewport 禁缩放） */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .page-enter { animation: none; }
}

@media (max-width: 767.98px) {
  /* iOS Safari：input/select/textarea 字号 <16px 时聚焦会自动放大页面 */
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  select, textarea {
    font-size: 16px !important;
  }
  /* 手机端原生日期/时间选择器聚焦态：去掉 focus 放大，保持布局稳定 */
  input[type='date'], input[type='datetime-local'], input[type='month'] {
    min-height: 38px;
    -webkit-appearance: none;
    appearance: none;
  }
  /* 选择器聚焦时的 iOS 自动缩放彻底禁用 */
  input, select, textarea {
    touch-action: manipulation;
  }
}

/* ===== v10.31 手机端体验优化 =====
   1) 禁左右拖动（仅上下滑动）
   2) 详情页紧凑化（手机端）
   3) 页面切换/查询菊花加载提示 */
html, body {
  overflow-x: hidden;
}
@media (max-width: 767.98px) {
  /* 只允许垂直滚动手势：左右拖动不移动页面 */
  html {
    touch-action: pan-y;
  }
  body {
    overscroll-behavior-x: none;
  }
  /* 详情页紧凑化：缩小行距/字号，内容更短 */
  .info-grid {
    row-gap: .35rem !important;
    margin-bottom: .4rem !important;
  }
  .info-grid .f-label {
    font-size: .72rem;
    margin-bottom: .05rem;
  }
  .info-grid .f-val {
    font-size: .88rem;
    line-height: 1.3;
  }
  .card-body {
    padding-top: .75rem;
    padding-bottom: .75rem;
  }
}

/* 页面切换/查询加载提示：彩色小圈跳动，透明背景（不遮挡页面，新页面加载后自然消失） */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  pointer-events: none;
}
.loader-dot {
  width: 15px;
  height: 15px;
  margin: 0 5px;
  border-radius: 50%;
  animation: loaderDotJump 1s ease-in-out infinite;
}
.loader-dot-d1 { background: #ff6b6b; animation-delay: 0s; }
.loader-dot-d2 { background: #2f6bff; animation-delay: .16s; }
.loader-dot-d3 { background: #20c997; animation-delay: .32s; }
@keyframes loaderDotJump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}