/*
 * Moderator sahifasining uslubi (E8-c).
 *
 * `web/style.css` dan ataylab ALOHIDA: ommaviy xarita to'liq ekranli
 * kartaga qurilgan, bu yerda esa jadval va formalar. Ikkalasini bitta
 * faylga yig'ish har bir o'zgarishni ikkinchi sahifada tekshirishni
 * talab qilardi.
 *
 * Tashqi shrift va CDN yo'q — `Content-Security-Policy: default-src
 * 'self'` bilan mos (token `sessionStorage` da, `admin.js` ga qarang).
 */

:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --line: #d8dce2;
  --text: #1b1f24;
  --muted: #6b7280;
  --accent: #1f6feb;
  --warn: #b45309;
  --error: #b91c1c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.topbar h1 {
  margin: 0;
  font-size: 18px;
}

.subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.whoami {
  color: var(--muted);
  font-size: 13px;
}

.nav {
  display: flex;
  gap: 4px;
  padding: 8px 20px 0;
}

.nav a {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: var(--panel);
  color: var(--accent);
  text-decoration: none;
}

.panel {
  margin: 0 20px 20px;
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0 6px 6px 6px;
}

h2 {
  margin: 0 0 12px;
  font-size: 16px;
}

.hint {
  color: var(--muted);
  font-size: 13px;
}

.error {
  color: var(--error);
}

.status {
  margin: 0 20px 20px;
  color: var(--muted);
  font-size: 13px;
}

label {
  font-size: 13px;
  color: var(--muted);
}

input,
select,
button {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: inherit;
}

input[type="checkbox"] {
  padding: 0;
}

button {
  cursor: pointer;
}

button:disabled {
  color: var(--muted);
  cursor: default;
}

#login-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 640px;
}

#login-form input {
  flex: 1 1 320px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Moderator ko'rigini talab qiladigan qator (`05` §4.2) ajratiladi.
   Rang — yagona signal EMAS: `admin.queue.col.review` ustunida matn
   ham turadi, aks holda rang ko'rmaydigan moderator uchun jadval
   hech narsa aytmasdi. */
tr.review td {
  background: #fff8ec;
  color: var(--warn);
}

.pager {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

/* ------------------------------------------------------------------ */
/* Kartalar: hodisa (E8-c/3), foydalanuvchi va hisobot (E8-c/4)        */
/* ------------------------------------------------------------------ */

/* Uslub `id` ga emas, `.card` ga bog'langan: to'rtta karta bir xil
   ko'rinishda bo'lishi kerak va `id` bo'yicha nusxa ko'chirilgan blok
   ular orasida jimgina ajralib ketardi. */
.card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px 20px;
  margin: 0 0 20px;
}

.card div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}

.card dt {
  color: var(--muted);
  font-size: 13px;
}

.card dd {
  margin: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

/* Bo'sh kesim belgisi (`admin.digest.empty`) — `dt` ning o'zi, ya'ni
   yuqoridagi `dt` uslubini oladi; u qatorning butun enini egallashi
   kerak, aks holda yarim qator bo'lib osilib qolardi. */
.card > dt.hint {
  grid-column: 1 / -1;
}

/* Ogohlantirishlar — ro'yxat, karta emas: ular sonlar emas, matn. */
[data-part-kind="i18n_list"] {
  margin: 0 0 20px;
  padding-left: 20px;
  color: var(--warn);
}

[data-part-kind="i18n_list"] li.hint {
  color: var(--muted);
}

#digest-body h3 {
  margin: 18px 0 8px;
  font-size: 15px;
}

.action {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.action textarea,
.action input {
  flex: 1 1 260px;
}

/* Qaytarib bo'lmaydigan amal tugmasi — rang bilan ham ajratiladi.
   Rang yagona signal EMAS: tasdiqlash dialogi baribir ochiladi. */
button.danger {
  border-color: var(--error);
  color: var(--error);
}

/* ------------------------------------------------------------------ */
/* Tasdiqlash dialogi                                                 */
/* ------------------------------------------------------------------ */

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(27, 31, 36, 0.45);
}

/* `hidden` atributini `display: flex` bosib ketardi. */
.overlay[hidden] {
  display: none;
}

.dialog {
  max-width: 420px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.dialog h2 {
  margin: 0 0 8px;
  font-size: 17px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

/* ------------------------------------------------------------------ */
/* Audit jurnali (E8-c/5)                                             */
/* ------------------------------------------------------------------ */

/* `before`/`after` — o'zgargan maydonlarning ro'yxati, ya'ni bitta
   katakda bir nechta qator bo'ladi. Umumiy `td { white-space: nowrap }`
   ularni bitta uzun satrga cho'zib, jadvalni gorizontal aylantirardi. */
#audit-table td div {
  white-space: normal;
  font-size: 13px;
  color: var(--muted);
}

/* Yozuv raqami va vaqt — sonlar; bir xil kenglikdagi raqamlar bilan
   ular ustun bo'ylab tekislanadi. Identifikatorlar **kesilmaydi**:
   moderator ularni kartaga o'tish uchun to'liq ko'rishi kerak. */
#audit-table td {
  font-variant-numeric: tabular-nums;
}