/*!
 * Aintel — Bootstrap 3 → Bootstrap 5 兼容层
 * ------------------------------------------------------------------
 * 作用：gavias_daudo 的 template.css 及部分历史内容/区块是在
 * Bootstrap 3 体系下编写的。升级 Bootstrap 5.3 后，以下 BS3 类
 * 已被移除，此文件在 BS5 之后、template.css 之前加载，提供等价
 * 实现，保证旧标记结构不改也能正常显示。
 *
 * 注意：新写的模板与内容请直接使用 BS5 类名（col-12 / d-none /
 * img-fluid / btn-secondary 等），不要依赖本兼容层。
 */

/* ---- 1. 显示/隐藏类 ---- */
.hidden { display: none !important; }
.visible-xs-block { display: none !important; }
.visible-sm-block { display: none !important; }

/* ---- 2. 超小屏网格（BS3 col-xs-* → BS5 col-*）----
 * 模板中的 col-xs-N 已批量改写为 col-N，此处不再需要网格映射；
 * 保留以兼容可能存在于数据库/编辑器内容里的旧类。 */
[class*="col-xs-"] {
  position: relative;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x, 0.75rem) * .5);
  padding-left: calc(var(--bs-gutter-x, 0.75rem) * .5);
}
.col-xs-12 { flex: 0 0 auto; width: 100%; }
.col-xs-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-xs-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xs-9  { flex: 0 0 auto; width: 75%; }
.col-xs-8  { flex: 0 0 auto; width: 66.66666667%; }
.col-xs-7  { flex: 0 0 auto; width: 58.33333333%; }
.col-xs-6  { flex: 0 0 auto; width: 50%; }
.col-xs-5  { flex: 0 0 auto; width: 41.66666667%; }
.col-xs-4  { flex: 0 0 auto; width: 33.33333333%; }
.col-xs-3  { flex: 0 0 auto; width: 25%; }
.col-xs-2  { flex: 0 0 auto; width: 16.66666667%; }
.col-xs-1  { flex: 0 0 auto; width: 8.33333333%; }

/* ---- 3. 表单 ---- */
/* BS5 移除了 .form-group */
.form-group { margin-bottom: 1rem; }
/* BS5 移除了 .help-block */
.help-block { display: block; margin-top: .25rem; font-size: .875em; color: #6c757d; }
/* BS5 的 .form-control 是 display:block，旧内联搜索框若用 .input-group
 * 包裹按钮，补齐其 flex 行为 */
.input-group .form-control { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group { display: flex; }

/* ---- 4. 按钮 ---- */
/* BS5 移除了 .btn-default，映射到 .btn-secondary 的观感 */
.btn-default {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: #6c757d;
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
.btn-default:hover { color: #fff; background-color: #5c636a; border-color: #565e64; }

/* ---- 5. 工具类 ---- */
.img-responsive { max-width: 100%; height: auto; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.caret { display: inline-block; width: 0; height: 0; margin-left: .255em;
  vertical-align: .255em; content: "";
  border-top: .3em solid; border-right: .3em solid transparent;
  border-bottom: 0; border-left: .3em solid transparent; }
.page-header { padding-bottom: .5rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid #dee2e6; }
.list-unstyled { padding-left: 0; list-style: none; }
/* BS3 的 .dl-horizontal */
.dl-horizontal dt { float: left; width: 10rem; clear: left; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-horizontal dd { margin-left: 11.5rem; }

/* ---- 6. 面板（BS3 .panel → 基础卡片观感）---- */
.panel { margin-bottom: 1rem; background-color: #fff; border: 1px solid #dee2e6;
  border-radius: .375rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.panel-heading { padding: .75rem 1.25rem; border-bottom: 1px solid #dee2e6;
  border-top-radius: calc(.375rem - 1px); background-color: rgba(0,0,0,.03); }
.panel-title { margin-top: 0; margin-bottom: 0; font-size: 1rem; }
.panel-body { padding: 1rem; }
.panel-footer { padding: .75rem 1.25rem; background-color: rgba(0,0,0,.03);
  border-top: 1px solid #dee2e6; }

/* ---- 7. 导航 ---- */
/* BS3 的 .nav-tabs 与 .nav-pills 在 BS5 中仍存在；差异较大的是
 * .navbar-toggle（移动端折叠按钮），本主题未使用 Bootstrap
 * 折叠组件，仅保留占位样式以防旧区块引用 */
.navbar-toggle { display: none; }

/* ---- 8. 分页对齐修正 ---- */
/* BS5 分页为 flex；template.css 若按 inline-block 计算，此处统一 */
.pagination { display: flex; flex-wrap: wrap; list-style: none; padding-left: 0; }

/* ---- 9. 行/列间距兜底 ----
 * BS3 行内元素依赖 .row 的负 margin 抵消列 padding；
 * BS5 改用 CSS 变量 --bs-gutter-x。若 template.css 重定义了 .row
 * 的 margin 而未抵消列 padding，此处确保最小可用布局。
 * （template.css 在本文件之后加载，其同名规则优先生效。）*/

/* ---- 10. 响应式工具兜底（少量旧内容使用 visible-md 系）---- */
@media (min-width: 768px) and (max-width: 991.98px) { .visible-md-block { display: block !important; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .visible-lg-block { display: block !important; } }
@media (min-width: 768px) { .visible-md-block { display: block !important; } }