/* ============================================================
 * admin/admin.css — 管理页面私有样式（四页共用：登录 / 买入理由卡片 / 股票管理 / 同步管理）
 * 页面已引 /css/card.css：卡片外壳(.card)、页面标题(.page-title)由 card.css 提供；
 * 状态/结论徽章由共享 <state-view> 自带样式提供，本文件不再自造 .st/.cc。
 * 本文件只留 admin 专属：工具条/身份条、模式分段开关、同步日志、登录卡、
 * 理由块、内联表单、统一操作按钮。
 * 同一语义同一样式：颜色/圆角/描边一律取 tokens.css 变量。
 * ============================================================ */

/* —— 工具条 —— */
.admin-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-title { font-weight: 800; font-size: 16px; color: var(--tx-strong); }
.flex-1 { flex: 1; }

.mode-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 999px; font-size: 12px; white-space: nowrap;
    background: var(--c-info-bg); color: var(--c-info); border: 1px solid var(--border);
}

/* 数据源分段开关 */
.seg { display: inline-flex; border: 1px solid var(--border-input); border-radius: var(--radius); overflow: hidden; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { cursor: pointer; }
.seg span { display: inline-block; padding: 4px 12px; font-size: 13px; color: var(--text-mid); background: var(--bg-white); transition: background .15s, color .15s; }
.seg label + label span { border-left: 1px solid var(--border-input); }
.seg input:checked + span { background: var(--green); color: #fff; }
.seg label:hover span { background: var(--bg-hover); }
.seg input:checked + span:hover { background: var(--green); }

.hidden { display: none !important; }
.err { color: var(--c-bad); font-size: 13px; }
.cards-hint { text-align: center; color: var(--text-muted); padding: 18px; font-size: 14px; }

/* —— 同步日志 / 筛选行 —— */
.sync-log { white-space: pre-wrap; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; line-height: 1.6; color: var(--text-dark); }
.sync-tip { font-size: 12.5px; color: var(--text-muted); line-height: 1.7; margin: 6px 0 0; }
.filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* —— 登录页（单卡居中，账号/密码上下排）—— */
.login-box { max-width: 380px; margin: 0 auto; }
.login-title { font-weight: 800; font-size: 15px; color: var(--tx-strong); margin-bottom: 12px; }
.login-tip { font-size: 12.5px; color: var(--tx-sub); line-height: 1.7; margin: 10px 0 0; }
.login-foot { text-align: center; font-size: 12px; color: var(--text-muted); margin: 14px 0 0; }
.login-foot code { font-family: ui-monospace, Consolas, monospace; color: var(--tx-sub); }

/* —— 顶栏身份条 / 受限提示 —— */
.identity { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.perm-warn { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--c-bad); }

/* —— 表单控件 / 通用按钮 —— */
.inp { padding: 6px 9px; border: 1px solid var(--border-input); border-radius: var(--radius); background: var(--bg-white); font: inherit; font-size: 14px; color: var(--text-strong); }
.inp:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(84, 112, 198, .15); }
textarea.inp { width: 100%; resize: vertical; line-height: 1.5; }

.btn { padding: 6px 14px; border: 1px solid var(--border-input); border-radius: var(--radius); background: var(--bg-white); color: var(--text-dark); cursor: pointer; font: inherit; font-size: 14px; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--bg-hover); border-color: var(--blue); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn-primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn-primary:hover { background: var(--green); filter: brightness(1.08); }
.btn-sm { padding: 3px 12px; font-size: 13px; }
/* 破坏性动作的 .btn 形态（与下面 .ia.danger 同一语义同一配色：一律取 --c-bad 系列 token） */
.btn-danger { color: var(--c-bad); border-color: var(--c-bad-edge); }
.btn-danger:hover { background: var(--c-bad-soft); border-color: var(--c-bad-edge); }
/* 链接形态的按钮（入口跳转）：继承 .btn 外观，去掉下划线并居中内容 */
a.btn { text-decoration: none; display: inline-flex; align-items: center; }

/* —— 统一操作按钮（new/edit/delete，贴各区块头部右侧）—— */
.iactions { display: inline-flex; gap: 6px; align-items: center; }
.ia { border: 1px solid var(--border-input); background: #fff; color: var(--text-mid); border-radius: 5px; padding: 2px 10px; font-size: 12px; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.ia:hover { background: var(--bg-hover); border-color: var(--blue); }
.ia.add { color: var(--green); border-color: var(--c-good-edge); }
.ia.add:hover { background: var(--c-good-soft); }
.ia.danger { color: var(--c-bad); }
.ia.danger:hover { background: var(--c-bad-soft); border-color: var(--c-bad-edge); }

/* —— 理由块：购买理由正文 = 视觉主角（正文在上，摘要在下）—— */
.reason { padding: 6px 0 14px; }
.reason + .reason { border-top: 1px dashed var(--ln-card); margin-top: 6px; }
.reason-top { display: flex; align-items: flex-start; gap: 12px; }
.reason-text { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 600; color: var(--tx-strong); line-height: 1.75; margin: 0 0 4px; }
.reason-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.reason-meta .iactions { margin-left: auto; }
/* 股票 section-view 头部：操作按钮靠右。
   真正作为 shadow .meta(flex) 的 flex item 的是外层 <span slot="meta">（light DOM 节点，文档样式表可命中），
   它默认收缩到内容宽，导致内部 .iactions 的 margin-left:auto 无空间可推；故先让它撑满 .meta 并自身成 flex 行。 */
section-view > span[slot="meta"] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.iactions.meta-end { margin-left: auto; }
.reason-no { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #fff; background: var(--blue); border-radius: 4px; padding: 1px 7px; }
.reason-cap { font-size: 12px; color: var(--tx-sub); }
.kv { font-size: 12.5px; color: var(--tx-sub); }
.kv b { color: var(--text-dark); font-weight: 700; }

/* —— 持有表底部合计条（表内单元格在 shadow 里，合计放在 light DOM 才能复用本页 .kv）—— */
.hold-sum { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end;
    margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--ln-card); }

/* —— 审视记录（sub-section 正文内；markdown 渲染样式随共享 view 走 view/md_view.css）—— */
.rev-line { font-size: 13.5px; color: var(--text-dark); line-height: 1.7; }
.rev-meta { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.empty-rev { font-size: 13px; color: var(--text-muted); padding: 2px 0 6px; }

/* —— 内联编辑/新增表单（蓝左边框，区别于只读态）—— */
.edit-box { background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: var(--radius); padding: 12px 14px; margin: 8px 0; box-shadow: 0 1px 3px rgba(20, 40, 80, .10); }
.edit-box .eb-t { font-size: 12px; font-weight: 700; color: var(--c-info); margin-bottom: 8px; }
.fld-inline { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fld-inline label, .fld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tx-sub); }
.fld-inline label { flex: 1 1 130px; }
.fld { margin-bottom: 10px; }
.save-row { display: flex; gap: 8px; }

/* —— 移动端 —— */
@media (max-width: 640px) {
    .admin-bar { gap: 8px; }
    .fld-inline label { flex: 1 1 100%; }
    .hold-sum { justify-content: flex-start; }   /* 窄屏合计左起排，不把短数字顶到右边去 */
}