/* ============================================================
   管理后台自定义样式（统一收敛到 Bootstrap 5.3）
   - 布局：固定左侧边栏 + 顶部导航 + 内容区（含折叠/移动端抽屉）
   - small-box 统计卡（替代原 AdminLTE 组件）
   - 表头固定、纸感配色
   ============================================================ */

:root {
  --app-brand:        #2f6fed;
  --app-brand-soft:   #eaf1fe;
  --app-bg:           #f6f7f8;
  --app-panel:        #ffffff;
  --app-text:         #1f2733;
  --app-muted:        #66707d;
  --app-border:       #e5e8ec;
  --app-sidebar-w:    232px;
  --app-topbar-h:     56px;
}

body.app-layout {
  background: var(--app-bg);
  color: var(--app-text);
}

/* ---------- 侧边栏 ---------- */
.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--app-sidebar-w);
  background: var(--app-panel);
  border-right: 1px solid var(--app-border);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: transform .2s ease, margin-left .2s ease;
}

.app-brand {
  height: var(--app-topbar-h);
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 1.1rem;
  font-weight: 650;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--app-border);
  white-space: nowrap;
  overflow: hidden;
}
.app-brand .ui { color: var(--app-brand); }

.app-nav {
  flex: 1;
  overflow-y: auto;
  padding: .6rem .6rem 1rem;
}
.app-nav .nav {
  flex-direction: column;
  gap: 2px;
}
.app-nav .nav-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--app-text);
  font-size: .92rem;
  padding: .55rem .8rem;
  border-radius: .45rem;
  text-decoration: none;
}
.app-nav .nav-link .ui { width: 1.15rem; text-align: center; color: var(--app-muted); }
.app-nav .nav-link:hover { background: var(--app-bg); color: var(--app-text); }
.app-nav .nav-link.active {
  background: var(--app-brand-soft);
  color: var(--app-brand);
  font-weight: 600;
}
.app-nav .nav-link.active .ui { color: var(--app-brand); }

/* ---------- 主区域 ---------- */
.app-main {
  margin-left: var(--app-sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left .2s ease;
}

.app-topbar {
  height: var(--app-topbar-h);
  background: var(--app-panel);
  border-bottom: 1px solid var(--app-border);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 1rem;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.app-topbar .btn-icon {
  border: 0;
  background: transparent;
  color: var(--app-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: .4rem .5rem;
  border-radius: .4rem;
  cursor: pointer;
}
.app-topbar .btn-icon:hover { background: var(--app-bg); color: var(--app-text); }
.app-topbar .ms-auto { margin-left: auto; display: flex; align-items: center; gap: .85rem; }
.app-topbar .user-name { font-size: .88rem; color: var(--app-muted); }
.app-topbar .logout {
  text-decoration: none;
  font-size: .9rem;
  color: var(--app-text);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.app-topbar .logout:hover { color: var(--app-brand); }

.app-content {
  flex: 1;
  padding: 1.25rem;
}

/* 页面标题 */
.app-page-title {
  font-size: 1.25rem;
  font-weight: 650;
  margin: 0 0 1rem;
}

/* ---------- 折叠状态（侧边栏收起） ---------- */
.app-layout.sidebar-collapsed {
  --_sidebar-hidden: 1px;
}
.app-layout.sidebar-collapsed .app-sidebar {
  transform: translateX(calc(-100% - 1px));
}
.app-layout.sidebar-collapsed .app-main {
  margin-left: 0;
}

/* 移动端：默认收起，抽屉打开 */
@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(calc(-100% - 1px)); }
  .app-main { margin-left: 0; }
  .app-layout.sidebar-open .app-sidebar { transform: translateX(0); box-shadow: 0 0 30px rgba(0,0,0,.18); }
}

/* ---------- small-box 统计卡 ---------- */
.small-box {
  position: relative;
  overflow: hidden;
  border-radius: .6rem;
  padding: 1.05rem 3rem 1.05rem 1.25rem;
  min-height: 5.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.small-box .inner h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 .15rem;
  line-height: 1.1;
}
.small-box .inner p {
  margin: 0;
  font-size: .85rem;
  opacity: .92;
}
.small-box .icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.2rem;
  opacity: .22;
}
.small-box.bg-info    { background: #17a2b8; color: #fff; }
.small-box.bg-success { background: #198754; color: #fff; }
.small-box.bg-primary { background: #0d6efd; color: #fff; }
.small-box.bg-warning { background: #e0a800; color: #fff; }

/* ---------- 卡片（纸感） ---------- */
.card {
  border: 1px solid var(--app-border);
  border-radius: .6rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.card-header {
  background: var(--app-panel);
  border-bottom: 1px solid var(--app-border);
  padding: .85rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.card-title { font-size: 1rem; font-weight: 650; margin: 0; }
.card-tools { display: flex; align-items: center; gap: .5rem; }
.card-tools .nav-pills { gap: .25rem; }
.card-tools .nav-pills .nav-link { padding: .35rem .8rem; font-size: .85rem; border-radius: .35rem; color: var(--app-muted); }
.card-tools .nav-pills .nav-link:hover { color: var(--app-text); }
.card-tools .nav-pills .nav-link.active { background: var(--app-brand); color: #fff; }

/* ---------- 表头固定滚动 ---------- */
.table-responsive { overflow: auto; }
.table-head-fixed thead th,
.app-content .table-responsive .table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8f9fa;
  box-shadow: inset 0 1px 0 var(--app-border), inset 0 -1px 0 var(--app-border);
}

/* ---------- 表单控件轻微圆角与聚焦 ---------- */
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 .2rem rgba(47, 111, 237, .12);
  border-color: var(--app-brand);
}

/* ---------- 页脚 ---------- */
.app-footer {
  border-top: 1px solid var(--app-border);
  padding: .9rem 1.25rem;
  background: var(--app-panel);
  font-size: .85rem;
  color: var(--app-muted);
}

/* ---------- 非阻塞 Toast ---------- */
.app-toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 380px;
}
.app-toast {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 6px;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  font-size: 14px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s ease, transform .3s ease;
  word-break: break-word;
}
.app-toast i { margin-right: 8px; flex-shrink: 0; }
.app-toast span { flex: 1; }
.app-toast-close {
  margin-left: 10px;
  padding: 0 2px;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
}
.app-toast-close:hover { opacity: 1; }
.app-toast-success { background: #28a745; }
.app-toast-info    { background: #17a2b8; }
.app-toast-warning { background: #ffc107; color: #343a40; }
.app-toast-error   { background: #dc3545; }
.app-toast-hide { opacity: 0; transform: translateY(-8px); }

/* ---------- 表格长文本换行 ---------- */
.table-wrap-text th,
.table-wrap-text td { overflow-wrap: anywhere; word-break: break-word; }
.table-wrap-text code { word-break: break-all; white-space: normal; }
.table-wrap-text .nowrap { white-space: nowrap; }

/* ---------- 登录页（替代原 AdminLTE login-page/login-box） ---------- */
body.app-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--app-bg);
  padding: 1rem;
}
.app-login-box {
  width: 100%;
  max-width: 380px;
  background: var(--app-panel);
  border: 1px solid var(--app-border);
  border-radius: .75rem;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
  padding: 2rem 1.75rem 1.75rem;
}
.app-login-brand {
  text-align: center;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--app-text);
  margin-bottom: .25rem;
}
.app-login-brand i { color: var(--app-brand); }
.app-login-subtitle {
  text-align: center;
  color: var(--app-muted);
  font-size: .9rem;
  margin-bottom: 1.5rem;
}