/* ============================================================
   Talkpod Hub · 表单控件唯一来源（前后台共用同一份）
   ------------------------------------------------------------
   2026-10-25 第 90 轮 · 发哥第 8 条：
     「资源内容，多选的框内，勾子是蓝色的，应该和『业务申请 - 提交盖章』的
       『骑缝章、陈奋发签名』一样，要同一的样式，不要再单独手搓出一个新的样式，
       而且要记住，全站的多选框，要统一风格，未来要统一更换，才能一致性。」

   🔴 为什么单独一个文件：
     以前 `.tp-check` / `.tp-tick` 只写在 admin.css（**后台专用**），
     前台用原生 `<input type="checkbox">` → 浏览器给的是**系统蓝**，
     于是同一个"资源内容"在后台是拓朋红方块、在前台是蓝色系统勾 —— 两套观感。

   🔴 本文件是**唯一来源**，改这里前后台一起变：
     ① `.tp-check` + `.tp-tick`：可点方块（大号，用于"骑缝章 / 资源内容"这类语义多选）
     ② 原生 `input[type=checkbox|radio]`：统一改成本品牌配色（列表页/表格里的细粒多选）
     ③ 两套视觉一致：都是 15px、1px 描边、选中 = 拓朋红实底 + 白色 ✓

   ⚠️ 加载顺序：必须在 admin.css / theme.css **之后**（两个布局都已按此顺序引用）。
   ⚠️ 排除 `.tp-switch`（拨动开关也是 checkbox，外观完全另一套，不能被覆盖）。
   ============================================================ */

:root {
    /* 本文件的取色：后台有 --admin-accent，前台没有 → 回落到品牌红。
       两处取值本来就是同一个色，所以不需要每个布局再各写一份。 */
    --ctl-accent: var(--admin-accent, #E2231A);
    --ctl-accent-soft: var(--admin-accent-soft, rgba(226, 35, 26, .07));
    --ctl-border: var(--admin-border, var(--border, #E5E7EB));
    --ctl-subtle: var(--admin-subtle, var(--muted, #8A9099));   /* 第 157 轮：fallback 同步到新值 */
    --ctl-text: var(--admin-body-text, var(--text, #121212));
    --ctl-hover: var(--admin-hover, rgba(0, 0, 0, .03));
    --ctl-surface: #FFFFFF;
    --ctl-size: 15px;   /* 原生 checkbox 尺寸（表格/列表里的细粒多选） */
}

/* ------------------------------------------------------------
   ① 可点方块（服务端状态驱动，不用原生 checkbox）
   ------------------------------------------------------------
   用法（Blade）：`<x-tp.check :on="$on" wire="toggle('code')">标签</x-tp.check>`
   🔴 为什么不用原生 checkbox：浏览器把原生勾画成系统蓝，且各浏览器不一致；
      服务端渲染 ✓ 才能做到"后台 / 前台 / 盖章申请"三处一模一样。
   ------------------------------------------------------------ */
.tp-checks {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* 🔴 2026-10-26 第 91 轮（发哥第 1 条）：
   「资源内容，选择的按钮怎么又和 hub 前台提交资源的按钮不一样了，要统一风格，
     和业务申请-盖章的按钮一样，后台和前台，资源内容的按钮的样式，都要完全一样」

   根因：admin.css 里有一条**全局**的「小一号」覆盖（1px 描边 / 3px 9px / 12px 字），
   只存在于后台样式里 → 后台的 `.tp-check` 是小号，前台没有 admin.css 就是大号。
   现在把**盖章那套尺寸作为唯一标准**写进本文件，admin.css 里的覆盖已删除。
   （盖章页的「骑缝章 / 陈奋发签名」= 这一套，所以三处现在完全相同。） */
.tp-check {
    position: relative;              /* 第 155 轮：原生 checkbox 绝对定位铺满胶囊 */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--ctl-border);
    background: var(--ctl-surface);
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 400;
    color: var(--ctl-text);
    line-height: 1.6;
    cursor: pointer;
    user-select: none;
    transition: border-color .12s ease, background .12s ease;
}
/* ============================================================
   原生 checkbox（第 155 轮 · 可访问性）
   ------------------------------------------------------------
   外部审查实测：本组件原来渲染的是 `<label wire:click>` + `<span>✓</span>`，
   **没有 `<input type="checkbox">`** ⇒ 无法 Tab 聚焦、空格切换，读屏也不知道
   "这是勾选框、现在勾没勾"。

   现在：真实 input 铺满整个胶囊（透明），视觉仍然只有那个方块 + ✓。
   🔴 为什么不直接给 input 做 `appearance:none` 自绘：会丢掉 `.tp-tick` 现有的
      "选中红块 + ✓" 动画与暗色适配，等于重写一遍外观；铺满是零视觉变更的做法。
   🔴 点击与键盘事件都落在 input 上（label 只负责"点文字也算"），
      所以 `wire:click` 从 label 移到 input —— 不能两处都绑，否则点一次触发两次。
   ============================================================ */
.tp-check-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.tp-check.is-locked .tp-check-native { cursor: not-allowed; }
/* 焦点环画在胶囊上：input 是透明的，直接给它描边看不见。
   用 :has(:focus-visible) 而不是 :focus-within —— 后者鼠标点击也会亮环。 */
.tp-check:has(.tp-check-native:focus-visible) {
    outline: 2px solid var(--ctl-accent);
    outline-offset: 2px;
}

.tp-check:hover { background: var(--ctl-hover); }
.tp-check.is-active {
    border-color: var(--ctl-accent);
    background: var(--ctl-accent-soft);
    font-weight: 600;
}
/* 置灰（例如勾了「资源包」→ 字库/语音/图标/开机图 已在包内，不能再改） */
.tp-check.is-locked {
    opacity: .55;
    cursor: not-allowed;
}
.tp-check.is-locked:hover { background: var(--ctl-surface); }

/* 方块本身：15×15、1px 描边、选中显示品牌红 ✓（与盖章申请的 `.tp-tick` 同源） */
.tp-tick {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border: 1px solid var(--ctl-subtle);
    background: var(--ctl-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 🔴 9px 是**例外**，不参与五档统一：这是 12×12 方块里的 ✓（图形符号），
       不是文字。跟着文字档上抬到 11px 会顶出格子（盖章页还按 A4 底图对齐）。 */
    font-size: 9px;
    line-height: 1;
    color: var(--ctl-accent);
    font-weight: 700;
}
.tp-check.is-active .tp-tick { border-color: var(--ctl-accent); }

/* ------------------------------------------------------------
   ② 原生原生 checkbox / radio：统一成同一套外观
   ------------------------------------------------------------
   🔴 只改外观（appearance:none），不改行为 —— 表单提交、Livewire 绑定、
      `indeterminate`（用 :indeterminate 单独画一条横线）都不受影响。
   ------------------------------------------------------------ */
input[type="checkbox"]:not(.tp-switch),
input[type="radio"]:not(.tp-switch) {
    appearance: none;
    -webkit-appearance: none;
    width: var(--ctl-size);
    height: var(--ctl-size);
    margin: 0;
    padding: 0;
    border: 1px solid var(--ctl-subtle);
    background: var(--ctl-surface) no-repeat center center;
    background-size: 11px 11px;
    display: inline-block;
    vertical-align: -2px;
    position: relative;
    cursor: pointer;
    flex: 0 0 auto;
    transition: border-color .12s ease, background-color .12s ease;
}

/* 圆角：单选框是圆的，勾选框保持方角（与 `.tp-tick` 一致） */
input[type="radio"]:not(.tp-switch) {
    border-radius: 50%;
}

input[type="checkbox"]:not(.tp-switch):hover,
input[type="radio"]:not(.tp-switch):hover {
    border-color: var(--ctl-accent);
}

input[type="checkbox"]:not(.tp-switch):checked,
input[type="radio"]:not(.tp-switch):checked {
    border-color: var(--ctl-accent);
    background-color: var(--ctl-accent);
}

/* 选中：白色 ✓（SVG 内联，不额外发请求） */
input[type="checkbox"]:not(.tp-switch):checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.2 3.2 7.8-7.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 选中：实心圆点（radio） */
input[type="radio"]:not(.tp-switch):checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23fff'/%3E%3C/svg%3E");
}

/* 半选（表格"全选"用）：一条白杠 */
input[type="checkbox"]:not(.tp-switch):indeterminate {
    border-color: var(--ctl-accent);
    background-color: var(--ctl-accent);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 禁用态：仍能看出是"勾着的"，只是不再强调 */
input[type="checkbox"]:not(.tp-switch):disabled,
input[type="radio"]:not(.tp-switch):disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* 深色主题下描边别用浅灰（看不清） */
.dark input[type="checkbox"]:not(.tp-switch),
.dark input[type="radio"]:not(.tp-switch) {
    border-color: #5A6472;
    background-color: #1A1D22;
}
.dark input[type="checkbox"]:not(.tp-switch):checked,
.dark input[type="radio"]:not(.tp-switch):checked {
    border-color: var(--ctl-accent);
    background-color: var(--ctl-accent);
}

/* ------------------------------------------------------------
   字数实时计数（第 91 轮 · 发哥第 6 条；第 98 轮调间距）
   ------------------------------------------------------------
   「不需要提示（最多 300 字），而是在右下角出现"当前字数/300"实时动态」
   结构：.tp-count-wrap > textarea + .tp-count（绝对定位右下）

   🔴 第 98 轮（发哥第 5 条）：「右下角的 0/1000，太挨着边框了，不止个人介绍填写框，
      而是所有有计算字符的框，都一样」→ 统一把计数往里收：
      右 8 → 14px、下 5 → 9px，并把输入框的底部内边距加够（26px），
      避免文字/拖拽角与计数贴在一起。**全站一处改，所有计数框同步生效。**
   ------------------------------------------------------------ */
.tp-count-wrap {
    position: relative;
    display: block;
}
.tp-count-wrap > textarea {
    /* 给计数器让出右下角，避免文字被压住 */
    padding-bottom: 26px;
    resize: vertical;
}
.tp-count {
    position: absolute;
    right: 14px;
    bottom: 9px;
    font-family: var(--ctl-mono, var(--font-mono, monospace));
    font-size: 12px;
    line-height: 1;
    color: var(--ctl-subtle);
    pointer-events: none;
    user-select: none;
}
.tp-count.is-near { color: var(--ctl-accent); }
.tp-count.is-over { color: #DC2626; font-weight: 700; }

/* ------------------------------------------------------------
   ④ Markdown 编辑工具栏（第 144 轮）
   ------------------------------------------------------------
   与 textarea 上下贴合：工具栏底边去掉，textarea 顶边保留 —— 看起来是一个整体。
   ------------------------------------------------------------ */
.md-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    border: 1px solid var(--ctl-border);
    border-bottom: 0;
    background: var(--ctl-hover);
}
.md-btn {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: 1px solid transparent;
    background: none;
    color: var(--ctl-subtle);
    font-size: 14px;
    line-height: 22px;
    cursor: pointer;
}
.md-btn:hover {
    border-color: var(--ctl-border);
    background: var(--ctl-surface);
    color: var(--ctl-accent);
}
.md-b { font-weight: 700; }
.md-i { font-style: italic; }
.md-mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.md-sep {
    width: 1px;
    height: 14px;
    margin: 0 4px;
    background: var(--ctl-border);
}
/* 工具栏下面的输入框：顶边贴住工具栏，不要出现双线 */
.md-toolbar + textarea,
.md-toolbar + .tp-count-wrap textarea { border-top: 0; }