/* ==========================================================================
   全站页面视觉规范（后台 + 客户端内容区）—— 只改样式，不动结构与脚本
   加载顺序：form-system.css / feedback-system.css 之后（见 panels/styles.blade.php）

   作用域 .content-body；用 :where() 包住作用域，不额外抬高优先级，
   各页面自己写的样式（page-style）仍然生效。
   已单独调整过的页面跳过：短信测试（.cr）、短信服务表单页（.sp-page）、双向短信（.fx2-chat-shell）、登录注册（.au-page）
   圆角沿用 global-border-radius-20px.css；按钮 hover 不加阴影 / 位移（no-hover-shadow.css 项目约定），只降透明度
   ========================================================================== */

:root {
    --pp-ink: #111827;
    --pp-body: #4B5563;
    --pp-muted: #6B7280;
    --pp-faint: #9CA3AF;
    --pp-line: #EDEDEA;
    --pp-line-soft: #F3F4F6;
    --pp-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px -12px rgba(17, 24, 39, .08);
    --pp-shadow-hover: 0 1px 2px rgba(17, 24, 39, .04), 0 16px 32px -16px rgba(17, 24, 39, .16);
    --pp-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ========== 1. 字体 ========== */
body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ========== 2. 字号阶梯 / 字重 / 行高 / 颜色 ========== */
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) :is(h1, .h1) { font-size: 32px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: var(--pp-ink); }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) :is(h2, .h2) { font-size: 26px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: var(--pp-ink); }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) :is(h3, .h3) { font-size: 22px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--pp-ink); }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) :is(h4, .h4, .card-title) { font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: var(--pp-ink); }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) :is(h5, .h5) { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--pp-ink); }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) :is(h6, .h6) { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--pp-ink); }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) p { line-height: 1.7; }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .card-text,
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .card-body > p { font-size: 14px; line-height: 1.7; color: var(--pp-body); }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .text-muted { color: var(--pp-muted) !important; }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) small,
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .small { font-size: 12px; line-height: 1.6; }
.content-header-title { font-weight: 700; letter-spacing: -.02em; color: var(--pp-ink); }
.breadcrumb { font-size: 13px; }

/* ========== 3. 卡片：极浅边框 + 柔和弥散阴影，内边距 24，卡片间距 24 ========== */
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .card {
    border: 1px solid var(--pp-line);
    box-shadow: var(--pp-shadow);
    margin-bottom: 24px;
    transition: box-shadow .3s var(--pp-ease), transform .3s var(--pp-ease);
}
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .card-body { padding: 24px; }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .card-header { padding: 24px 24px 0; background: transparent; border-bottom: 0; }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .card-header + .card-body { padding-top: 16px; }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .card-footer { padding: 16px 24px; background: transparent; }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .card-subtitle { margin-top: 4px; font-size: 13px; color: var(--pp-muted); }
/* 可点击卡片（整卡是链接）：hover 轻微上浮 */
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) a.card:hover,
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .card.cursor-pointer:hover { transform: translateY(-2px); box-shadow: var(--pp-shadow-hover); }
/* 等高行：抵消卡片下边距造成的错位 */
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .row.match-height > [class*="col"] > .card { height: calc(100% - 24px); }

/* ========== 4. 表单：标签 14/500，标签与控件 8，字段组之间 24 ========== */
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .form-label,
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .col-form-label { color: #374151; }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) form .row > [class*="col"] > .mb-1 { margin-bottom: 24px !important; }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) textarea.form-control { line-height: 1.7; }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .form-check-label { color: var(--pp-body); }

/* ========== 5. 表格：表头小号灰，行内边距 16，分隔线极浅，hover 浅灰底 ========== */
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .table > thead th {
    padding-top: 12px; padding-bottom: 12px;
    font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: none;
    color: var(--pp-muted); background: #F9FAFB;
    border-bottom: 1px solid var(--pp-line) !important; border-top: 0;
    white-space: nowrap;
}
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .table > tbody td {
    padding-top: 16px; padding-bottom: 16px;
    font-size: 14px; line-height: 1.6; color: var(--pp-body);
    border-color: var(--pp-line-soft); vertical-align: middle;
}
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .table > tbody tr { transition: background-color .3s var(--pp-ease); }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .table-hover > tbody > tr:hover > *,
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) table.dataTable > tbody > tr:hover > * { --bs-table-accent-bg: #FAFAF9; background-color: #FAFAF9; }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .dataTables_wrapper .dataTables_info { font-size: 13px; color: var(--pp-muted); }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .dataTables_wrapper .dataTables_length label,
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .dataTables_wrapper .dataTables_filter label { font-size: 13px; color: var(--pp-muted); }
/* 列表页顶部操作栏（批量操作 / 新建 / 导出）：按钮间距 8，与表格 24 */
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) #datatables-basic > .mb-3 { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 24px !important; }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) #datatables-basic > .mb-3 .btn,
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) #datatables-basic > .mb-3 .btn-group { margin: 0 !important; }

/* ========== 6. 下拉菜单 / 标签页 / 提示条 ========== */
:where(.content-body) .dropdown-menu { border: 1px solid var(--pp-line); box-shadow: 0 12px 32px -12px rgba(17, 24, 39, .18); padding: 6px; }
:where(.content-body) .dropdown-item { border-radius: 8px; font-size: 14px; padding: 8px 12px; color: var(--pp-body); transition: background-color .3s var(--pp-ease), color .3s var(--pp-ease); }
:where(.content-body) .dropdown-item:hover { background: var(--pp-line-soft); color: var(--pp-ink); }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .nav-tabs { margin-bottom: 24px; border-bottom-color: var(--pp-line); }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .nav-tabs .nav-link { font-size: 14px; font-weight: 500; color: var(--pp-muted); transition: color .3s var(--pp-ease); }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .nav-tabs .nav-link:hover { color: var(--pp-ink); }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .nav-tabs .nav-link.active { font-weight: 600; color: var(--pp-ink); }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .alert { border: 0; padding: 16px; font-size: 14px; line-height: 1.7; }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .alert .alert-body { padding: 0; }
:where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .alert-heading { font-size: 15px; font-weight: 600; box-shadow: none; padding: 0 0 4px; }

/* ========== 7. 微交互：按钮 / 链接平滑过渡；按钮 hover 只降透明度（不加阴影位移，见 no-hover-shadow.css） ========== */
.btn, a, .nav-link, .page-link, .list-group-item-action { transition: all .3s var(--pp-ease); }
.btn:hover:not(:disabled):not(.disabled) { opacity: .92; }
.btn:disabled, .btn.disabled { opacity: .55; }

/* ========== 8. 小屏 ========== */
@media (max-width: 767.98px) {
    :where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .card-body { padding: 16px; }
    :where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) .card-header { padding: 16px 16px 0; }
    :where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) :is(h1, .h1) { font-size: 26px; }
    :where(.content-body:not(:has(.cr, .sp-page, .fx2-chat-shell, .au-page))) :is(h2, .h2) { font-size: 22px; }
}

/* ========== 9. 居中版心（落地页 / 表单页共用）：最宽 1160px 居中，手机贴边 ========== */
.gs-page { max-width: 1160px; margin-left: auto; margin-right: auto; }
.gs-page.gs-page-wide { max-width: 1320px; }
@media (max-width: 575.98px) {
    .gs-page { margin-bottom: 32px; }
    .gs-page [id] { scroll-margin-top: 96px; }   /* 锚点跳转不被顶部导航挡住 */
}
/* 版心内只有一列的窄表单（col-md-6 / col-lg-8 等）也居中，不靠左 */
.gs-page .row:has(> [class*="col-"]:only-child) { justify-content: center; }
/* 按钮组（如分隔符选择）在窄卡片内平分宽度，不溢出 */
.gs-page .btn-group { display: flex; max-width: 100%; }
.gs-page .btn-group > .btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
