/* Styles of p-stories.js only (Quản lý truyện). Shared pieces live in style.css. */

/* StatusPill of the reference: rounded-full, thin border, 11px */
.st-pill { display: inline-flex; align-items: center; flex: none; border-radius: 99px; border: 1px solid; padding: 1px 10px; font-size: 11px; font-weight: 500; white-space: nowrap; letter-spacing: -0.01em; }
.st-pill.ok { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 20%, transparent); }
.st-pill.info { background: color-mix(in srgb, var(--info) 10%, transparent); color: var(--info); border-color: color-mix(in srgb, var(--info) 20%, transparent); }
.st-pill.warn { background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 20%, transparent); }
.st-pill.bad { background: color-mix(in srgb, var(--destructive) 10%, transparent); color: var(--destructive); border-color: color-mix(in srgb, var(--destructive) 20%, transparent); }
.st-pill.muted { background: var(--muted); color: var(--muted-fg); border-color: var(--border); }

/* Progress h-1.5 */
.st-prog { height: 6px; flex: 1 1 auto; min-width: 40px; background: color-mix(in srgb, var(--primary) 15%, transparent); border-radius: 99px; overflow: hidden; }
.st-prog > span { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.st-prog-row { display: flex; align-items: center; gap: 8px; min-width: 120px; }

.st-filters { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) repeat(4, auto); }
.st-filters select { width: 170px; }
.st-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted-fg); scroll-margin-top: 80px; }
.st-pager input.st-pg { width: 56px; height: 32px; padding: 0 4px; text-align: center; display: inline-block; }
.st-pbar { padding: 8px 16px; border-bottom: 1px solid var(--border); }
.st-pbar.bottom { border-bottom: 0; border-top: 1px solid var(--border); }
.st-empty { height: 112px; text-align: center; }
p.st-empty { display: grid; place-items: center; margin: 0; padding: 24px; }
/* a table inside a flush card: the card already draws the frame */
.st-flat { border: 0; border-radius: 0; background: transparent; }
.st-title-cell { max-width: 260px; min-width: 200px; }
.st-title-cell p { margin: 0; }
.st-name { display: block; font-weight: 500; color: var(--foreground); }
.st-name:hover { color: var(--primary); }
.st-pcol { min-width: 150px; }
.st-pcol p { margin: 2px 0 0; max-width: 180px; }
.st-subrow td { background: color-mix(in srgb, var(--muted) 30%, transparent); }
.st-wbtn { width: 100%; justify-content: flex-start; }

/* KPI / Metric cards */
.st-kpi { padding: 16px 20px; }
.st-big { margin: 4px 0 0; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; }
.st-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: -6px; }
.st-key.k1, .st-hbar.k1 { background: color-mix(in srgb, var(--primary) 30%, transparent); }
.st-key.k2, .st-hbar.k2 { background: var(--primary); }
.st-key.k3, .st-hbar.k3 { background: var(--success); }
.st-pipe { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.st-hbar { height: 8px; border-radius: 0 4px 4px 0; min-width: 2px; }
.st-genre { display: grid; grid-template-columns: 110px minmax(0, 1fr) 32px; gap: 8px; align-items: center; }
.st-genre .st-prog { height: 8px; background: var(--muted); }

/* detail */
.st-back { align-self: flex-start; margin-left: -8px; }
.st-where { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: flex-start; padding: 16px 20px; font-size: 14px; }
.st-where > p { margin: 3px 0 0; }
.st-where-c { flex: 1 1 400px; min-width: 0; }
.st-where-c p { margin: 0 0 4px; overflow-wrap: anywhere; }
.st-vn { border-color: color-mix(in srgb, var(--destructive) 50%, transparent); }
.st-chead { gap: 12px; }
.st-ctools { flex: 1 1 auto; justify-content: flex-end; }
.st-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 8px; padding: 2px; gap: 2px; }
.st-seg button { border: 0; background: none; font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 6px; color: var(--muted-fg); cursor: pointer; white-space: nowrap; }
.st-seg button:hover { color: var(--foreground); }
.st-seg button.on { background: var(--secondary); color: var(--foreground); font-weight: 500; }
.st-csearch { width: 200px; }
.st-ctitle { max-width: 280px; min-width: 160px; }
.st-ctitle > span, .st-zh > span { display: block; }
.st-err { display: block; max-width: 220px; }

/* chapter dialog: as wide as the screen allows — two long texts side by side */
dialog.st-wide { width: min(1400px, 96vw); }
.st-pane { height: 58vh; overflow-y: auto; white-space: pre-wrap; font-size: 15px; line-height: 1.75; border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin: 0; }
.st-pane.raw { background: color-mix(in srgb, var(--muted) 40%, transparent); color: var(--muted-fg); }
textarea.st-pane { resize: none; min-height: 0; }
.st-redo input { flex: 1 1 260px; width: auto; min-width: 0; }
.st-foot { justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 12px; }

/* glossary */
.st-redo-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.st-redo-row .grow { flex: 1 1 260px; }
.st-gadd { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1fr) 160px minmax(0, 1.5fr) auto; }
.st-gsearch { width: 288px; max-width: 100%; }
.st-gtable td { padding: 6px 8px; }
.st-gtable input, .st-gtable select { height: 32px; font-size: 13px; padding: 4px 8px; }
.st-zh { max-width: 10rem; }
tr.st-dirty td { background: color-mix(in srgb, var(--amber) 6%, transparent); }
.st-sw { align-items: flex-start; }
.st-op { gap: 12px; flex-wrap: nowrap; }
.st-op > div { min-width: 0; }

@media (max-width: 1100px) {
  .st-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-filters .search { grid-column: 1 / -1; }
  .st-filters select { width: 100%; }
  .st-gadd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .st-csearch, .st-gsearch { width: 100%; }
  .st-ctools { justify-content: flex-start; }
  .st-pipe { grid-template-columns: 90px minmax(0, 1fr); }
  .st-pipe > :last-child { grid-column: 2; }
  .st-pane { height: 40vh; }
  .st-panes { grid-template-columns: minmax(0, 1fr) !important; }
  .st-op { flex-wrap: wrap; }
}
@media (max-width: 400px) {
  .st-filters { grid-template-columns: minmax(0, 1fr); }
  .st-gadd { grid-template-columns: minmax(0, 1fr); }
  .st-pager { font-size: 12px; }
  .st-big { font-size: 18px; overflow-wrap: anywhere; }
  .st-kpi { padding: 12px 14px; }
}