/* Reup Studio — token + thành phần dùng chung cho "/" (dựng & đăng) và "/dashboard" (bảng số).
   Một theme sáng cố ý: nền xám-xanh nhạt, thẻ trắng, màu chủ đạo xanh lá nhạt cho nút/điểm nhấn,
   chữ xanh đậm cho link/tab. Màu dữ liệu (biểu đồ) khai báo riêng ở dashboard.html. */
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  color-scheme: light;
  --bg: #F3F6EF;
  --panel: #FFFFFF;
  --panel2: #F6F8F2;
  --panel3: #EDF2E6;
  --line: #E0E6D8;
  --line2: #C9D3BE;
  --ink: #1A2418;
  --ink2: #5B6857;
  --ink3: #8B9785;
  --acc: #9BD65A;          /* xanh lá nhạt — nút chính, điểm nhấn */
  --acc2: #86C444;         /* hover của nút chính */
  --acc-ink: #16300B;      /* chữ đặt trên nền --acc */
  --acc-strong: #3E7F1F;   /* link, tab đang chọn, focus, nhãn trạng thái "của tool" */
  --acc-soft: #EAF5DC;     /* nền mục đang chọn, hàng đang sửa */
  --good: #2E8B3D;  --good-soft: #E3F3E4;
  --warn: #B97C00;  --warn-soft: #FBF1D6;
  --bad: #C43D3D;   --bad-soft: #F9E1E1;
  --run: #2C7FB8;   --run-soft: #E1EFF8;
  --shadow: 0 1px 2px rgb(26 36 24 / .05), 0 6px 20px -14px rgb(26 36 24 / .25);
  --font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --r: 8px;
  --r-lg: 10px;
}
/* Chế độ tối — cùng nhận diện xanh lá, bước màu chọn riêng cho nền tối (không phải đảo màu). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121712; --panel: #1A211A; --panel2: #202920; --panel3: #273127;
  --line: #2C372C; --line2: #3C483C;
  --ink: #E6EDE3; --ink2: #A3B09F; --ink3: #7C8A79;
  --acc: #8FCB4E; --acc2: #A2DA63; --acc-ink: #142708; --acc-strong: #A6DB70; --acc-soft: #22381A;
  --good: #5CC48F; --good-soft: #16311F;
  --warn: #E5A54A; --warn-soft: #3A2A0E;
  --bad: #E8767A;  --bad-soft: #3B1C1E;
  --run: #5FB0E8;  --run-soft: #142A3A;
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 6px 20px -14px rgb(0 0 0 / .7);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 13.5px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--acc-strong); }
code, kbd, .mono { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--acc-strong); outline-offset: 2px; }

/* ---- thanh app bar dùng chung ---- */
.appbar { display: flex; align-items: center; gap: 14px; padding: 0 18px; height: 52px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; }
.appbar .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14.5px; color: var(--ink); text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.appbar .brand i { width: 24px; height: 24px; border-radius: 7px; background: var(--acc); color: var(--acc-ink); display: inline-grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; }
.topnav { display: flex; gap: 2px; margin-left: 4px; }
.topnav a { padding: 6px 11px; border-radius: var(--r); color: var(--ink2); text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; }
.topnav a:hover { background: var(--panel2); color: var(--ink); }
.topnav a.on { background: var(--acc-soft); color: var(--acc-strong); font-weight: 600; }
.appbar .sum { color: var(--ink2); font-size: 12.5px; }
.appbar .sum b { color: var(--ink); }
.appbar .spacer { flex: 1; }

/* ---- nút, bộ chọn, ô nhập ---- */
.btn { cursor: pointer; border: 1px solid var(--line2); background: var(--panel); color: var(--ink); border-radius: var(--r); padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 500; }
.btn:hover { border-color: var(--acc-strong); background: var(--panel2); }
.btn.p { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); font-weight: 700; }
.btn.p:hover { background: var(--acc2); border-color: var(--acc2); }
.btn.s { padding: 4px 9px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.danger { color: var(--bad); }
.btn.danger:hover { border-color: var(--bad); background: var(--bad-soft); }
.seg { display: inline-flex; gap: 2px; background: var(--panel2); padding: 3px; border-radius: var(--r); border: 1px solid var(--line); }
.seg button { flex: 1; border: 0; background: transparent; color: var(--ink2); padding: 6px 10px; border-radius: 6px; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button.on, .seg button[aria-pressed="true"] { background: var(--panel); color: var(--acc-strong); font-weight: 600; box-shadow: 0 1px 2px rgb(26 36 24 / .12); }
input[type=text], input[type=search], select, textarea { width: 100%; padding: 7px 9px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; }
input[type=text]:focus, input[type=search]:focus, select:focus, textarea:focus { outline: 0; border-color: var(--acc-strong); box-shadow: 0 0 0 3px var(--acc-soft); }
textarea { resize: vertical; min-height: 62px; font-family: var(--mono); font-size: 12px; }
input[type=range] { width: 100%; accent-color: var(--acc-strong); }
input[type=checkbox] { accent-color: var(--acc-strong); }

/* ---- thẻ, nhãn trạng thái ---- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.st { font-size: 11px; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--line2); color: var(--ink2); white-space: nowrap; background: var(--panel); }
.st.running, .st.uploading { color: var(--run); border-color: var(--run); background: var(--run-soft); }
.st.done, .st.published, .st.scheduled_remote { color: var(--good); border-color: var(--good); background: var(--good-soft); }
.st.error, .st.failed { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.st.cancelled, .st.missed, .st.dry_run { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.st.queued, .st.pending, .st.claimed { color: var(--ink2); }
.st.handoff, .st.inbox, .st.draft, .st.scheduled { color: var(--acc-strong); border-color: var(--acc-strong); background: var(--acc-soft); }

/* ---- nút sáng/tối (góc phải app bar) ---- */
.theme-toggle { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; border-radius: 50%; }
.theme-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .moon { display: block; } .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; } :root[data-theme="dark"] .theme-toggle .sun { display: block; }