/* 剧单模块样式（sh- 前缀），配色沿 app.css 的 :root 变量。表格做成电子表格的样子：
   紧凑行高、细网格线、多选值逗号显示；表头点标签排序、点 ▾ 筛选；编辑器就在格子里；
   右键菜单管剧名字色 / 整行填色 / 多行改值 / 删除，行尾 ＋ －。行的底色（颜色标记、悬停）设在 tr 上，
   类型、剧名两列 sticky 冻结时用 background: inherit 跟着行走；选区的蓝底设在格子上。字幕 / 配音的值画成语种标签（sh-tag），
   色块按语种（sh-tag-<色名>），没归到语种的旧值灰色虚框。 */
#page-sheets { --sh-grid: #edf0f4; --sh-row: 30px; }
.sh-head { display: flex; align-items: center; gap: 22px; min-height: 40px; }
.sh-title { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.sh-crumb { margin: 0; color: var(--muted); font-size: 13px; }
.sh-crumb b { color: var(--ink); font-weight: 700; }
.sh-tabs { display: flex; gap: 2px; }
.sh-tabs button { padding: 7px 14px; border: 0; border-radius: 8px; background: transparent;
  color: var(--muted); font-size: 13px; }
.sh-tabs button:hover { background: #fff; }
.sh-tabs button.on { background: var(--blue-soft); color: var(--blue-dark); font-weight: 700; }
.sh-sp { flex: 1; }

.sh-bar { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.sh-search { width: 260px; height: 34px; padding: 0 10px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: #fff; font-size: 13px; }
.sh-select, .sh-input { height: 32px; padding: 0 8px; border: 1px solid var(--line-strong);
  border-radius: 7px; background: #fff; font-size: 13px; }
.sh-btn { height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: #fff; color: var(--ink); font-size: 13px; }
.sh-btn:hover { border-color: #b8c8e7; background: #f9fbff; }
.sh-btn.primary { border-color: var(--blue); background: var(--blue); color: #fff; font-weight: 600; }
.sh-btn.primary:hover { background: var(--blue-dark); }
.sh-btn.mini { height: 26px; padding: 0 9px; font-size: 12px; }
.sh-btn.danger { color: var(--down); }
.sh-btn:disabled { opacity: .5; }

/* 表格 */
.sh-gridbox { margin-top: 12px; height: calc(100vh - 230px); min-height: 320px; overflow: auto;
  border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
/* 表格宽度由 sheets.js 的 shApplyWidths 按列宽之和设；框比它宽时 min-width 撑满整框，
   多出来的宽度全给行尾不设宽度的空白列 .sh-fill，其余列宽不变 */
.sh-grid { min-width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; font-size: 13px; table-layout: fixed; }
.sh-grid .sh-fill { padding: 0; border-right: 0; }
.sh-grid th { position: sticky; top: 0; z-index: 3; height: 32px; padding: 0 8px; background: #f7f9fb;
  color: #46536a; font-weight: 600; text-align: left; white-space: nowrap; user-select: none;
  border-bottom: 1px solid var(--line-strong); border-right: 1px solid var(--sh-grid); }
.sh-grid th .sh-hl { cursor: pointer; }
.sh-grid th .sh-hl:hover { color: var(--blue-dark); }
.sh-grid th .sh-sort { margin-left: 4px; font-style: normal; font-size: 10px; color: var(--blue-dark); }
/* 列拖窄时表头文字省略，▾ 固定在右边不折行 */
.sh-grid th { overflow: hidden; text-overflow: ellipsis; }
.sh-grid th.sh-filter { padding-right: 16px; }
.sh-grid th.sh-filter > i { position: absolute; top: 50%; right: 3px; transform: translateY(-50%);
  font-style: normal; color: var(--subtle); font-size: 13px; cursor: pointer; padding: 0 2px; }
.sh-grid th.sh-filter > i:hover { color: var(--blue-dark); }
.sh-grid th.on { color: var(--blue-dark); }
.sh-grid th.on > i { color: var(--blue-dark); }
/* 类型、剧名两列冻结：th / td 都 sticky 到左边，剧名的 left 等于类型列当前宽度（sheets.js 的 shApplyWidths 设 --sh-genre-w） */
.sh-grid [data-col="genre"], .sh-grid [data-col="title"] { position: sticky; left: 0; }
.sh-grid [data-col="title"] { left: var(--sh-genre-w, 70px); }
/* 表头右边缘的拖动条：拖动调列宽，双击恢复默认 */
.sh-grid th .sh-resize { position: absolute; top: 0; right: 0; z-index: 1; width: 6px; height: 100%; cursor: col-resize; }
.sh-grid th .sh-resize:hover { background: var(--blue); opacity: .35; }
body.sh-resizing, body.sh-resizing * { cursor: col-resize !important; user-select: none; }
.sh-grid th[data-col="genre"], .sh-grid th[data-col="title"] { z-index: 4; }
.sh-grid td[data-col="genre"], .sh-grid td[data-col="title"] { z-index: 2; background: inherit; }
.sh-grid tbody tr { background: #fff; }
.sh-grid td { height: var(--sh-row); padding: 0 8px; border-bottom: 1px solid var(--sh-grid);
  border-right: 1px solid var(--sh-grid); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; vertical-align: middle; }
.sh-grid td:last-child { border-right: 0; }
.sh-grid tr.sh-space { background: transparent; }
.sh-grid tr.sh-space td { border: 0; padding: 0; }
.sh-grid tbody tr:hover { background: #fafbfd; }
.sh-grid td.sh-cell { cursor: default; }
#sh-view-list.can-edit .sh-grid td.sh-cell { cursor: cell; }
.sh-grid td.sel { outline: 2px solid var(--blue); outline-offset: -2px; overflow: visible; z-index: 2; }
.sh-grid td.sel:not([data-col="title"]):not([data-col="genre"]) { position: relative; }
.sh-grid td.cur { outline: 2px solid #9db8f5; outline-offset: -2px; }
.sh-grid td.sel input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0 8px;
  border: 2px solid var(--blue); outline: 0; background: #fff; font-size: 13px; font-family: inherit; }
.sh-grid tr.sh-new { background: #fbfdff; }
/* 行的颜色标记（core.COLORS）：整行浅底 */
.sh-grid tbody tr.sh-c-red { background: #fde8e8; }
.sh-grid tbody tr.sh-c-orange { background: #ffeedd; }
.sh-grid tbody tr.sh-c-yellow { background: #fff7cc; }
.sh-grid tbody tr.sh-c-green { background: #e3f6e9; }
.sh-grid tbody tr.sh-c-blue { background: #e3eeff; }
.sh-grid tbody tr.sh-c-purple { background: #efe6fb; }
.sh-grid tbody tr.sh-c-gray { background: #eceff3; }
/* 序号重复：剧名整格橙底加左边一条橙线（盖过行的填色）；剧名重复：红底红线，两样都有时红的盖过橙的；状态含「禁播」红字 */
.sh-grid td.sh-dup { background: #fff1dc; box-shadow: inset 3px 0 0 #f0a020; }
.sh-grid td.sh-namedup { background: #ffe1e1; box-shadow: inset 3px 0 0 #e03131; }
.sh-grid td.sh-ban { color: var(--down); font-weight: 600; }
/* 选区（Shift+点 / Shift+方向键 / 拖选）：选中的格子蓝底，盖过行的填色和重复的红底 / 橙底 */
.sh-grid td.sh-selc { background: #dce8ff; }
/* 行尾 ＋ －：鼠标移到这一行才显示 */
.sh-grid th.sh-rowops { width: 52px; }
.sh-grid td.sh-rowops { padding: 0 4px; text-align: center; }
/* 两个按钮正好占满 52px，这一格加右边线第二个按钮就挤不下、点不中；与空白列之间的线由空白列画在左边 */
.sh-grid .sh-rowops { border-right: 0; }
.sh-grid .sh-rowops + .sh-fill { border-left: 1px solid var(--sh-grid); }
.sh-grid td.sh-rowops button { visibility: hidden; width: 20px; height: 20px; padding: 0; margin: 0 1px;
  border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; color: var(--muted);
  font-size: 13px; line-height: 18px; cursor: pointer; }
.sh-grid tbody tr:hover td.sh-rowops button { visibility: visible; }
.sh-grid td.sh-rowops button:hover { border-color: var(--blue); color: var(--blue-dark); }
.sh-grid td.sh-rowops .sh-op-del:hover { border-color: var(--down); color: var(--down); }
/* 剧名字色（core.TITLE_COLORS） */
.sh-grid td.sh-f-red { color: #c62828; font-weight: 600; }
.sh-grid td.sh-f-blue { color: #1d4ed8; font-weight: 600; }
.sh-grid td.sh-f-green { color: #15803d; font-weight: 600; }
.sh-grid td.sh-f-purple { color: #7e22ce; font-weight: 600; }
/* 语种标签（core.LANG_COLORS） */
.sh-tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; margin-right: 4px;
  border-radius: 4px; font-size: 12px; line-height: 20px; color: #263238; vertical-align: middle; white-space: nowrap; }
.sh-tag.sh-tag-ch { font-weight: 700; }   /* 有首发频道 */
.sh-tag-blue { background: #dbe7ff; } .sh-tag-red { background: #ffe0e0; } .sh-tag-green { background: #dcf5e3; }
.sh-tag-yellow { background: #fff0c2; } .sh-tag-purple { background: #eadcff; } .sh-tag-gray { background: #e9ecef; }
.sh-tag-orange { background: #ffe3c4; } .sh-tag-teal { background: #d9f3f7; }
.sh-tag-na { background: #f1f3f5; color: var(--subtle); border: 1px dashed #cfd6de; }
.sh-tag-x { background: #eee; }   /* 自定义色：底色由 JS 内联 */
.sh-w-time { width: 130px; } .sh-w-who { width: 90px; } .sh-w-title { width: 300px; }
.sh-w-col { width: 70px; } .sh-w-act { width: 70px; }
.sh-changes { min-width: 0; margin-top: 12px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.sh-changes th { position: static; }
.sh-changes td.sh-act { text-align: center; }
.sh-changes td.sh-act button { height: 24px; padding: 0 8px; border: 1px solid var(--line-strong);
  border-radius: 6px; background: #fff; font-size: 12px; }
.sh-changes td.sh-batch { color: var(--muted); }
.sh-changes td.sh-jump { cursor: pointer; }
.sh-changes td.sh-jump:hover { color: var(--blue-dark); text-decoration: underline; }
.sh-changes td.sh-empty { color: var(--subtle); }
.sh-footrow { display: flex; align-items: center; gap: 14px; margin-top: 10px; min-height: 20px;
  color: var(--subtle); font-size: 12px; }
.sh-footrow .error, .sh-footrow .hint { margin: 0; }

/* 下拉部件（表头筛选 / 格子编辑 / 挑剧）与右键菜单：挂在 body 上定位，不被表格裁掉 */
.sh-dd { position: fixed; z-index: 20; min-width: 180px; max-height: 320px; overflow: auto;
  padding: 6px 0; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff;
  box-shadow: 0 12px 32px rgba(16,24,40,.14); font-size: 13px; font-weight: 400; color: var(--ink);
  white-space: normal; text-align: left; cursor: default; }
.sh-dd label, .sh-dd .sh-item { display: flex; align-items: center; gap: 8px; padding: 5px 12px;
  white-space: nowrap; }
.sh-dd label:hover, .sh-dd .sh-item:hover { background: var(--blue-soft); }
.sh-dd .sh-item.on { background: var(--blue-soft); color: var(--blue-dark); font-weight: 600; }
.sh-dd .sh-item.dim { color: var(--subtle); }
.sh-dd .sh-item.dim:hover { background: transparent; }
.sh-dd .sh-item b { color: var(--blue-dark); font-weight: 600; font-variant-numeric: tabular-nums; }
.sh-dd label input { margin: 0; }
.sh-dd .sh-find { display: block; width: calc(100% - 16px); margin: 2px 8px 6px; height: 28px;
  padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 12.5px; }
.sh-dd .sh-all { border-bottom: 1px solid var(--line); margin-bottom: 4px; color: var(--muted); }
/* 表头筛选：按选项 / 按条件两页，选项右边是行数 */
.sh-dd .sh-ftabs { display: flex; margin: 2px 8px 8px; padding: 2px; border-radius: 6px; background: var(--surface2); }
.sh-dd .sh-ftabs button { flex: 1; height: 26px; border: 0; border-radius: 5px; background: transparent;
  color: var(--muted); font: inherit; cursor: pointer; }
.sh-dd .sh-ftabs button.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.sh-dd .sh-n { margin-left: auto; padding-left: 12px; color: var(--subtle); font-variant-numeric: tabular-nums; }
.sh-dd .sh-fop { display: block; width: calc(100% - 16px); margin: 0 8px 6px; height: 28px;
  padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; font-size: 12.5px; }
.sh-dd .sh-fhit { padding: 0 12px 6px; color: var(--muted); font-size: 12px; }
.sh-dd .sh-fhit:empty { display: none; }
.sh-dd .sh-fclear { display: block; width: calc(100% - 16px); margin: 2px 8px; height: 28px;
  border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; font: inherit; cursor: pointer; }
.sh-dd .sh-fclear:hover { background: var(--blue-soft); }
.sh-dd .sh-colors { display: flex; gap: 6px; padding: 6px 12px 8px; border-bottom: 1px solid var(--line);
  margin-bottom: 4px; }
.sh-dd .sh-colors button { width: 22px; height: 22px; border: 1px solid rgba(0,0,0,.12); border-radius: 50%;
  padding: 0; background: #fff; font-size: 11px; color: var(--muted); }
.sh-dd .sh-colors button.on { outline: 2px solid var(--blue); outline-offset: 1px; }
.sh-dd .sh-colors button[data-c=red] { background: #f2a4a4; }
.sh-dd .sh-colors button[data-c=orange] { background: #f7c48a; }
.sh-dd .sh-colors button[data-c=yellow] { background: #f4e28a; }
.sh-dd .sh-colors button[data-c=green] { background: #a9dfb9; }
.sh-dd .sh-colors button[data-c=blue] { background: #a9c5f4; }
.sh-dd .sh-colors button[data-c=purple] { background: #cdb5ee; }
.sh-dd .sh-colors button[data-c=gray] { background: #c8ced8; }
.sh-dd .sh-item.danger { color: var(--down); }
.sh-dd .sh-item.sh-addnew { color: var(--blue-dark); font-weight: 600; }   /* 套：新增词条 */
.sh-dd .sh-item.sh-ins { gap: 6px; }   /* 右键：在下面插入 N 行 */
.sh-dd .sh-item.sh-ins input.sh-num { width: 52px; height: 24px; padding: 0 6px; border: 1px solid var(--line-strong);
  border-radius: 4px; font-size: 13px; font-family: inherit; }
.sh-dd .sh-hd { padding: 6px 12px 2px; color: var(--subtle); font-size: 12px; }
.sh-dd .sh-colors.sh-fcolors { border-bottom: 0; margin-bottom: 0; }
.sh-dd .sh-colors.sh-fcolors button { border-radius: 4px; }
.sh-dd .sh-fcolors button[data-c=red] { background: #c62828; }
.sh-dd .sh-fcolors button[data-c=blue] { background: #1d4ed8; }
.sh-dd .sh-fcolors button[data-c=green] { background: #15803d; }
.sh-dd .sh-fcolors button[data-c=purple] { background: #7e22ce; }
/* 字幕 / 配音：格子末尾的「…」（添加语种）；编辑器的两行（语种、频道名输入框） */
#sh-view-list.can-edit .sh-grid td .sh-tag { cursor: pointer; }
.sh-grid td .sh-tags { display: flex; align-items: center; height: calc(var(--sh-row) - 1px); }   /* 减去 td 的下边线，行高保持 30px */
.sh-grid td .sh-taglist { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.sh-grid td .sh-more { flex: none; padding: 0 5px; color: var(--subtle); letter-spacing: 1px;
  border-radius: 4px; cursor: pointer; }
.sh-grid td .sh-more:hover { background: #eef1f5; color: var(--ink); }
.sh-dd .sh-item.sh-one:hover { background: transparent; }
.sh-dd .sh-item.sh-one input.sh-ch { width: 150px; height: 28px; padding: 0 8px; border: 1px solid var(--line-strong);
  border-radius: 6px; font-size: 13px; font-family: inherit; outline: 0; }
.sh-dd .sh-item.sh-one input.sh-ch:focus { border-color: var(--blue); }

/* 管理页 */
.sh-panel { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  box-shadow: var(--shadow); }
.sh-panel h3 { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 16px;
  border-bottom: 1px solid var(--line); font-size: 14px; }
.sh-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.sh-seg button { padding: 5px 13px; border: 0; border-right: 1px solid var(--line); background: #fff;
  color: var(--muted); font-size: 13px; font-weight: 400; }
.sh-seg button:last-child { border-right: 0; }
.sh-seg button.on { background: var(--blue-soft); color: var(--blue-dark); font-weight: 700; }
.sh-list { width: 100%; border-collapse: collapse; font-size: 13px; }
.sh-list td { padding: 6px 16px; border-bottom: 1px solid var(--sh-grid); }
.sh-list tr:last-child td { border-bottom: 0; }
.sh-list td.num { width: 90px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.sh-list td.sh-ops { width: 300px; white-space: nowrap; }
.sh-list td.sh-ops .sh-btn, .sh-list td.sh-ops .sh-select { margin-right: 4px; }
.sh-list td.sh-dim { color: var(--muted); }
.sh-list .sh-archived { margin-left: 8px; padding: 1px 6px; border-radius: 4px; background: #eef1f5;
  color: var(--subtle); font-size: 12px; }
.sh-list td.sh-colorsel { width: 170px; white-space: nowrap; }
.sh-list td.sh-colorsel .sh-select { height: 26px; font-size: 12px; }
.sh-list td.sh-colorsel .sh-colorpick { width: 30px; height: 26px; margin-left: 6px; padding: 0 2px;
  border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; vertical-align: top; }
.sh-panel h4.sh-sub { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 12px 16px 4px;
  border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.sh-list td.sh-empty { color: var(--subtle); text-align: center; padding: 14px; }
#sh-m-msg { margin: 10px 2px 0; min-height: 1.4em; }