/*
 * ASEM Admin UI — "newsroom" style: masthead + left rail, serif headlines,
 * sans body, ink-on-newsprint palette. Tokens first; light + dark.
 * No inline styles anywhere (CSP style-src 'self').
 */
:root {
  --paper: #f6f3ec;
  --paper-raised: #fffdf8;
  --ink: #1d1b18;
  --ink-soft: #5b564d;
  --rule: #d8d1c2;
  --accent: #9b2c1f;        /* editorial red: brand + focus */
  --accent-ink: #ffffff;
  --warn: #8a5a00;
  --danger: #a1261b;
  --danger-bg: #fbe9e6;
  --notice-bg: #f3ecd9;
  --ok: #2f6b3a;
  --ok-bg: #e5efe2;
  --add-bg: #e3f1e0;
  --del-bg: #f8e3df;

  --font-head: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --radius: 3px;
  --shadow: 0 1px 0 var(--rule), 0 8px 24px -16px rgb(0 0 0 / 0.35);
  --duration: 150ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16140f;
    --paper-raised: #1f1c16;
    --ink: #ece6d8;
    --ink-soft: #a9a191;
    --rule: #3a352b;
    --accent: #e0765f;
    --accent-ink: #16140f;
    --danger: #f08a7c;
    --danger-bg: #3a1c17;
    --notice-bg: #2c2618;
    --ok: #8fc79a;
    --ok-bg: #1c2a1e;
    --add-bg: #1d2e20;
    --del-bg: #36201c;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.55 var(--font-body);
}

code { font-family: var(--font-mono); font-size: 0.9em; }

a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── masthead ─────────────────────────────────────────────── */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 3px double var(--ink);
}
.masthead__brand { display: flex; align-items: baseline; gap: var(--space-3); color: inherit; text-decoration: none; }
.masthead__title { font: 700 2.25rem/1 var(--font-head); letter-spacing: 0.04em; }
.masthead__kicker { color: var(--ink-soft); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.masthead__who { display: flex; align-items: center; gap: var(--space-3); font-size: 0.9rem; }
.masthead__user { font-weight: 600; }
.masthead__ws { font-family: var(--font-mono); color: var(--ink-soft); }
.masthead__logout { margin: 0; }
.masthead__logout button {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--duration), color var(--duration);
}
.masthead__logout button:hover { border-color: var(--accent); color: var(--accent); }

/* ── layout ───────────────────────────────────────────────── */
.layout { display: grid; grid-template-columns: 13rem 1fr; min-height: calc(100vh - 6rem); }
.layout--single { grid-template-columns: 1fr; }
.page { padding: var(--space-5); max-width: 64rem; min-width: 0; }

.rail { border-right: 1px solid var(--rule); padding: var(--space-4) 0; }
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail li a, .rail__soon {
  display: block;
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-4);
  border-left: 3px solid transparent;
}
.rail li a { color: var(--ink); text-decoration: none; transition: border-color var(--duration), background var(--duration); }
.rail li a:hover { border-left-color: var(--accent); background: var(--paper-raised); }
.rail__soon { color: var(--ink-soft); cursor: default; }
.rail__soon small { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }

/* ── panels & type ────────────────────────────────────────── */
.panel {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
}
.panel__kicker { margin: 0 0 var(--space-1); color: var(--accent); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.panel__headline { margin: 0 0 var(--space-4); font: 600 2rem/1.15 var(--font-head); }
.panel__lede { color: var(--ink-soft); max-width: 40rem; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.facts div { border-top: 1px solid var(--rule); padding-top: var(--space-2); }
.facts dt { color: var(--ink-soft); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.facts dd { margin: 0; font-weight: 600; }

.notice { background: var(--notice-bg); border-left: 3px solid var(--warn); padding: var(--space-3); margin: 0 0 var(--space-4); }
.notice--error { background: var(--danger-bg); border-left-color: var(--danger); }

/* ── login form ───────────────────────────────────────────── */
.login { max-width: 26rem; margin: var(--space-5) auto; }
.form { display: grid; gap: var(--space-3); }
.form__field { display: grid; gap: var(--space-1); font-size: 0.9rem; font-weight: 600; }
.form__field input {
  font: inherit;
  font-weight: 400;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.button {
  justify-self: start;
  font: 600 1rem var(--font-body);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  transition: transform var(--duration), opacity var(--duration);
}
.button:hover { opacity: 0.92; }
.button:active { transform: translateY(1px); }

/* ── context screen (T4a) ─────────────────────────────────── */
.notice--ok { background: var(--ok-bg); border-left-color: var(--ok); }
.notice__detail { display: block; margin-top: var(--space-1); font-family: var(--font-mono); font-size: 0.8rem; }
.crumbs { margin: 0 0 var(--space-2); font-size: 0.8rem; color: var(--ink-soft); }
.meta { color: var(--ink-soft); font-size: 0.85rem; margin: 0 0 var(--space-3); }
.hint { font-size: 0.9rem; margin: 0 0 var(--space-3); max-width: 44rem; }
.badge {
  display: inline-block; padding: 0 var(--space-2); border: 1px solid var(--rule); border-radius: 999px;
  font: 600 0.75rem/1.6 var(--font-mono); color: var(--ink-soft);
}
.badge--muted { opacity: 0.7; }
.badge--ui { border-color: var(--accent); color: var(--accent); }
.badge--external, .badge--initial { border-color: var(--warn); color: var(--warn); }
.status--claimed { opacity: 0.6; text-decoration: line-through; }
.notice__line { display: block; margin-top: var(--space-1); }
.badge--restore { border-color: var(--ok); color: var(--ok); }
.badge--delete { border-color: var(--danger); color: var(--danger); }
.badge--job { border-color: var(--ink); color: var(--ink); border-style: dashed; }

.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.doc-card { border-top: 2px solid var(--ink); padding: var(--space-3) 0 0; }
.doc-card__head { display: flex; align-items: baseline; gap: var(--space-3); }
.doc-card__title { font: 600 1.35rem/1.2 var(--font-head); color: var(--ink); text-decoration: none; }
.doc-card__title:hover { color: var(--accent); }
.doc-card__help { margin: var(--space-1) 0; }

.editor { display: grid; gap: var(--space-2); }
.editor__label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.editor__text, .editor__message, .conflict__text {
  width: 100%; font: 0.9rem/1.5 var(--font-mono); padding: var(--space-3);
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised); color: var(--ink);
}
.editor__text { min-height: 24rem; resize: vertical; tab-size: 2; }
.editor__message { font-family: var(--font-body); padding: var(--space-2) var(--space-3); }
.editor__text:focus-visible, .editor__message:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.button--ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.button[disabled] { opacity: 0.45; cursor: not-allowed; }

.check { border-left: 3px solid var(--ok); padding: var(--space-2) var(--space-3); background: var(--paper-raised); }
.check--error { border-left-color: var(--danger); }
.check__summary { margin: 0; font-size: 0.85rem; font-weight: 600; }
.check__list { margin: var(--space-1) 0 0; padding-left: var(--space-4); font-size: 0.85rem; }
.check__item--error { color: var(--danger); }
.check__item--warn { color: var(--warn); }

.diff-panel { margin: var(--space-3) 0; }
.diff-panel__title { margin: 0 0 var(--space-1); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.diff, .doc-text, .conflict__text {
  margin: 0; max-height: 32rem; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font: 0.85rem/1.5 var(--font-mono); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised);
}
.diff, .doc-text { padding: var(--space-2) 0; }
.doc-text { padding: var(--space-3); }
.diff__line { display: block; padding: 0 var(--space-3); }
.diff__line--add { background: var(--add-bg); }
.diff__line--del { background: var(--del-bg); text-decoration: line-through; text-decoration-color: var(--danger); }
.diff__line--hunk { color: var(--ink-soft); border-top: 1px dashed var(--rule); margin-top: var(--space-1); }

.conflict { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.conflict__title { margin: 0 0 var(--space-1); font-size: 0.8rem; font-weight: 600; }
.conflict__col--mine .conflict__title { color: var(--accent); }
.conflict__text { padding: var(--space-3); min-height: 12rem; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th { text-align: left; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid var(--ink); padding: var(--space-2); }
.table td { border-bottom: 1px solid var(--rule); padding: var(--space-2); vertical-align: top; }
.table tbody tr:hover { background: var(--paper-raised); }

/* ── agenda screen (T4b-2b) ───────────────────────────────── */
.panel__titlebar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); }
.panel__titlebar .panel__headline { margin: 0; }
.section-title { margin: var(--space-4) 0 var(--space-2); font: 600 1.15rem/1.3 var(--font-head); border-top: 1px solid var(--rule); padding-top: var(--space-3); }
select, textarea { font: inherit; color: var(--ink); }
select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.1rem var(--space-3);
  border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-soft); text-decoration: none; font-size: 0.85rem;
  transition: border-color var(--duration), color var(--duration);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip--on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.chip--on:hover { color: var(--paper); }
.chip__n { font: 600 0.75rem var(--font-mono); opacity: 0.8; }

.status {
  display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius); border-left: 3px solid var(--rule);
  background: var(--paper); font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
.status--draft { border-left-color: var(--ink-soft); }
.status--generated, .status--pending_approval { border-left-color: var(--warn); color: var(--warn); }
.status--approved, .status--completed { border-left-color: var(--ok); color: var(--ok); }
.status--dispatched { border-left-color: var(--accent); color: var(--accent); }
.status--rejected, .status--failed, .status--unreadable { border-left-color: var(--danger); color: var(--danger); }
.badge--lock { border-color: var(--danger); color: var(--danger); }
.assistant-state--ok { border-left-color: var(--ok); color: var(--ok); } /* #768 T8-2c */
.assistant-state--bad { border-left-color: var(--danger); color: var(--danger); }

.agenda-table__day { border-top: 2px solid var(--ink); }
.agenda-table__date { font: 600 0.9rem var(--font-mono); white-space: nowrap; }
.agenda-table__link { color: var(--ink); text-decoration: none; font-weight: 600; }
.agenda-table__link:hover { color: var(--accent); text-decoration: underline; }
.agenda-table__error { margin: var(--space-1) 0 0; color: var(--danger); font-size: 0.8rem; }
.auto-list { margin: 0; padding-left: var(--space-4); font-size: 0.9rem; }

.form--wide { max-width: 36rem; }
.form__field select, .form__field textarea {
  font-weight: 400; padding: var(--space-2) var(--space-3); border: 1px solid var(--rule);
  border-radius: var(--radius); background: var(--paper);
}
.form__help { font-weight: 400; color: var(--ink-soft); font-size: 0.8rem; }

.actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); margin: 0 0 var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.action-form { margin: 0; }
.action-reason { flex: 1 1 18rem; max-width: 32rem; }
.action-reason__toggle {
  display: inline-block; cursor: pointer; font-weight: 600; color: var(--danger); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--danger); border-radius: var(--radius);
}
.action-reason[open] .action-reason__toggle { background: var(--danger-bg); }
.action-reason__form { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.action-reason__text { min-height: 5rem; resize: vertical; }
.button--danger { background: var(--danger); color: var(--accent-ink); }

.agenda-context { white-space: pre-wrap; max-width: 48rem; margin: 0 0 var(--space-3); }
.agenda-tasks__n { color: var(--ink-soft); font-family: var(--font-mono); }
.agenda-tasks__title { font-family: var(--font-head); font-size: 1rem; }
.agenda-tasks__context { margin: var(--space-1) 0 0; color: var(--ink-soft); white-space: pre-wrap; font-size: 0.85rem; }

.tabs-wrap { margin-top: var(--space-4); }
.tabs { display: flex; gap: var(--space-1); border-bottom: 2px solid var(--ink); margin-bottom: var(--space-3); }
.tabs__tab {
  padding: var(--space-2) var(--space-3); color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: 0.9rem;
  border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
}
.tabs__tab:hover { color: var(--accent); }
.tabs__tab--on { color: var(--ink); background: var(--paper); border-color: var(--rule); }

@media (max-width: 48rem) {
  .layout { grid-template-columns: 1fr; }
  .rail { border-right: 0; border-bottom: 1px solid var(--rule); padding: 0; }
  .rail ul { display: flex; flex-wrap: wrap; }
  .page, .masthead { padding-left: var(--space-3); padding-right: var(--space-3); }
  .conflict { grid-template-columns: 1fr; }
  .panel { padding: var(--space-4) var(--space-3); }
  .action-reason { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── agenda form (T4b-2c) ─────────────────────────────────── */
.agenda-form { display: grid; gap: var(--space-4); }
.agenda-form__fields { display: grid; gap: var(--space-3); min-width: 0; }
.agenda-form__fields input[type="text"], .agenda-form__fields textarea, .agenda-form__fields select {
  width: 100%; min-width: 0; font-weight: 400; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised); color: var(--ink);
}
.agenda-form__fields textarea { resize: vertical; }
.agenda-form__save { display: grid; gap: var(--space-2); max-width: 36rem; }
.counter { font: 600 0.8rem var(--font-mono); color: var(--ink-soft); }
.counter--over { color: var(--danger); }
.task-list { display: grid; gap: var(--space-3); min-width: 0; }
.task-list__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.task-list__rows { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.task-list__empty { color: var(--ink-soft); font-style: italic; }
.task-card { min-width: 0; padding: var(--space-3); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--paper); }
.task-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.task-card__n { margin: 0; font-family: var(--font-head); font-size: 1rem; }
.task-card__ops { display: flex; gap: var(--space-1); }
.task-card__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-3); }
.task-card__wide { grid-column: 1 / -1; }
.button--small { padding: var(--space-1) var(--space-2); font-size: 0.8rem; }

/* T5b — Chạy job (#755) */
.job-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.job-card { display: grid; gap: var(--space-2); align-content: start; border-top: 2px solid var(--ink); padding: var(--space-3) 0 0; min-width: 0; }
.job-card__head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.job-card__title { font: 600 1.1rem/1.2 var(--font-head); }
.job-card__check { font-size: 0.9rem; display: flex; gap: var(--space-2); align-items: flex-start; }
.job-card__confirm { color: var(--danger); font-weight: 600; }
.job-card .form__field input { width: 100%; box-sizing: border-box; }
.job-card .button { justify-self: start; }
.job-status--running, .job-status--starting, .job-status--stopping { border-left-color: var(--accent); color: var(--accent); }
.job-status--succeeded { border-left-color: var(--ok); color: var(--ok); }
.job-status--failed, .job-status--lost, .job-status--stopped { border-left-color: var(--danger); color: var(--danger); }
.job-log { max-height: 60vh; overflow: auto; margin: 0 0 var(--space-3); padding: var(--space-3); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); font-size: 0.8rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.job-log:empty::before { content: "Đang tải log…"; color: var(--ink-soft); }

/* ── Editions (#762 T6) ─────────────────────────────────────────────────── */
.edition-status--running, .agent-status--running { border-left-color: var(--accent); color: var(--accent); }
.edition-status--completed, .agent-status--done { border-left-color: var(--ok); color: var(--ok); }
.edition-status--partial, .agent-status--idle { border-left-color: var(--warn); color: var(--warn); }
.edition-status--aborted, .agent-status--failed, .agent-status--timeout { border-left-color: var(--danger); color: var(--danger); }
.edition-status--unknown { border-left-color: var(--ink-soft); color: var(--ink-soft); }
.phase-steps { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0 0 var(--space-4); }
.phase-step { border: 1px solid var(--rule); padding: var(--space-1) var(--space-2); font-size: 0.85rem; color: var(--ink-soft); }
.phase-step__key { font-family: var(--font-mono); font-weight: 700; }
.phase-step--done { border-color: var(--ok); color: var(--ok); }
.phase-step--current { border-color: var(--accent); color: var(--accent); border-width: 2px; }
.edition-counts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-4); padding: 0; margin: 0 0 var(--space-4); }
.edition-messages { list-style: none; padding: 0; margin: 0 0 var(--space-3); overflow-wrap: anywhere; }
.edition-messages .notice { margin-bottom: var(--space-2); font-size: 0.85rem; }
.agent-task { overflow-wrap: anywhere; font-size: 0.8rem; }
.agent-row--idle { background: var(--notice-bg); }
/* T6-2b — Export button + zip download (flags from EditionService) */
.edition-export { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; }
/* T6-2a — debug files (Admin): links per agent, RECENT tail, file page */
.debug-links a { margin-right: var(--space-2); white-space: nowrap; }
.agent-recent-row td { padding-top: 0; }
.agent-recent, .debug-file { margin: 0; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; }
.agent-recent { max-height: 16em; padding: var(--space-2); font-size: 0.75rem; line-height: 1.4; }
.debug-file { max-height: 75vh; padding: var(--space-3); font-size: 0.8rem; line-height: 1.45; }
.debug-file:empty::before { content: "(tệp rỗng)"; color: var(--ink-soft); }
.debug-others { margin-top: var(--space-4); }
.debug-others__list { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: var(--space-1); font-size: 0.85rem; }