/* ============================================================
   P17 模块样式:短信通道(#/setting/sms) + 云打印(#/print-log)
   依赖 app.css 的设计变量(--primary / --border / --radius / --text-2 ...)
   不引入任何外部资源、不写行内大段样式。
   ============================================================ */

/* ---------- 顶部 ---------- */
.p17-topbar { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
.p17-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.p17-head-actions a.btn { text-decoration: none; }
.p17-footbar { display: flex; align-items: center; gap: 12px; padding: 14px 0 4px; flex-wrap: wrap; }

/* ---------- 统计块(比默认更紧凑,一行可放 5-6 个) ---------- */
.p17-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 16px; }
.p17-stats .stat { padding: 12px 14px; }
.p17-stats .stat .label { font-size: 12.5px; }
.p17-stats .stat .value { font-size: 20px; }

/* ---------- tab ---------- */
.p17-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.p17-tab {
    border: none; background: none; cursor: pointer;
    padding: 6px 14px; font-size: 14px; color: var(--text-2);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.p17-tab:hover { color: var(--primary); }
.p17-tab.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* ---------- 表单 ---------- */
.p17-group { display: block; margin-bottom: 6px; }
.p17-group-title {
    font-size: 13px; font-weight: 600; color: var(--text-2);
    margin: 4px 0 12px; padding-left: 8px; border-left: 3px solid var(--primary);
}
.p17-row { margin-bottom: 16px; }
.p17-span2 { grid-column: 1 / -1; }
.p17-row input[type=text], .p17-row input[type=number], .p17-row input[type=password], .p17-row select { width: 100%; }
.p17-row textarea { width: 100%; resize: vertical; font-family: inherit; }

.p17-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-2); font-size: 13.5px; }
.p17-switch input { width: auto; margin: 0; }

/* 密钥输入 + 查看明文按钮 */
.p17-secret { display: flex; gap: 8px; align-items: center; }
.p17-secret input { flex: 1; }
.p17-secret .btn { white-space: nowrap; }

/* ---------- 工具栏 ---------- */
.p17-toolbar { flex-wrap: wrap; gap: 8px; align-items: center; }
.p17-toolbar input, .p17-toolbar select { max-width: 200px; }

/* ---------- 键值表 ---------- */
.p17-kv { width: 100%; border-collapse: collapse; }
.p17-kv th, .p17-kv td {
    border-bottom: 1px solid var(--border); padding: 8px 12px;
    font-size: 13.5px; text-align: left; vertical-align: top; word-break: break-all;
}
.p17-kv th { width: 120px; background: #fafbfc; color: var(--text-2); font-weight: 600; white-space: nowrap; }
.p17-kv code { background: #f2f4f7; padding: 2px 6px; border-radius: 4px; font-size: 12.5px; }
.p17-pre {
    white-space: pre-wrap; margin: 0; background: #fafbfc;
    border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
    font-size: 12.5px; line-height: 1.6; max-width: 520px;
}

/* ---------- 长文本省略 ---------- */
.p17-ellipsis { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* ---------- 说明 ---------- */
.p17-tips { display: block; padding-top: 10px; border-top: 1px dashed var(--border); margin-top: 6px; }
.p17-hint-list { margin: 0 0 0 18px; color: var(--text-2); font-size: 13px; line-height: 1.9; }

/* ---------- 窄屏 ---------- */
@media (max-width: 720px) {
    .p17-topbar { flex-direction: column; }
    .p17-ellipsis { max-width: 140px; }
    .p17-kv th { width: 88px; }
}