/* admin_shared.css — shared styling for the split admin pages (P7.E)
   ------------------------------------------------------------------
   Extracted verbatim from admin.php's own inline <style> block as the
   first step of the P7.E admin split, so every new split-off page (this
   one starting with Submissions) looks and behaves identically without
   duplicating ~500 lines of CSS into each file. admin.php itself still
   carries its own inline copy for now — nothing there was touched yet,
   this is additive only until the actual cutover happens once all
   sections have been split and tested individually.

   Include this AFTER shared.css (which still supplies the base color/
   radius tokens, the lang-toggle + dropdown, and the data-tooltip
   system) — same convention as every public page.
*/

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

/* Color/font/radius tokens (--gold, --dark, --cream, --green, --red,
   --radius-*) now come from shared.css, linked in <head> above. As of
   2026-07-23 this page uses the same --dark/--cream as the public
   pages instead of its own darker-green palette; --radius below is
   kept as a local alias to --radius-lg so the many var(--radius)
   references elsewhere in this file don't all need renaming. */
:root { --radius: var(--radius-lg); }

body { min-height: 100vh; }

/* Admin header: title on the left; Home + language switcher pinned top-right
   (same absolute placement as the public index page), so title length
   changes across languages never shove the controls around. */
header {
  background: var(--dark);
  color: var(--cream);
  padding: 22px 28px;
  position: relative;
  /* Room on the right for Home + EN + Local▾ so long titles don't collide */
  padding-right: 240px;
  min-height: 64px;
  display: flex;
  align-items: center;
}
header h1 {
  font-size: 1.4em;
  letter-spacing: 1px;
  margin: 0;
  min-width: 0;
}

.admin-header-actions {
  position: absolute;
  top: 16px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  /* Above sticky .admin-nav (z-index:100) so the language dropdown is not clipped behind it */
  z-index: 220;
}

/* Home — same pill/badge style as the language switcher buttons */
.admin-home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #f5efe6aa;
  color: #f5efe6;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.82rem;
  font-family: inherit;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.admin-home-btn:hover {
  background: #f5efe622;
  color: #f5efe6;
  text-decoration: none;
}

.hint { font-size: 0.82em; color: #8a7f6a; line-height: 1.4; }

/* Language switcher styling lives in shared.css (.lang-toggle + dropdown). */
#lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Mobile: stack title and Home/language (no absolute overlap) */
@media (max-width: 640px) {
  header {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
    padding-right: 16px;
    min-height: 0;
    gap: 10px;
  }
  header h1 {
    text-align: center;
    font-size: 1.25em;
    width: 100%;
  }
  .admin-header-actions {
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .admin-home-btn {
    min-height: 40px;
    padding: 8px 14px;
  }
}

/* ── Login overlay ── */
#login-screen {
position: fixed; inset: 0;
background: #2c2416f5;
display: flex; align-items: center; justify-content: center;
z-index: 999;
}
#login-box {
background: var(--cream);
padding: 40px;
border-radius: var(--radius);
width: 300px;
text-align: center;
box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
#login-box h2  { color: var(--green); margin-bottom: 20px; }
#login-box input {
width: 100%; padding: 10px 14px; border: 1px solid var(--gold);
border-radius: var(--radius-sm); font-size: 1em; margin-bottom: 12px;
font-family: inherit;
}
#login-box input:focus { outline: none; border-color: var(--gold-hover); }
/* ── Password show/hide ── */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 40px !important; }
.pw-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.1em;
  padding: 4px;
  opacity: 0.55;
  line-height: 1;
}
.pw-eye:hover { opacity: 1; }
.pw-eye.shown { opacity: 1; }

#login-error { color: var(--red); font-size: 0.85em; margin-top: 6px; min-height: 18px; }
#login-box .btn-primary,
#login-btn { width: 100%; }
#login-cancel {
  display: block;
  text-align: center;
  margin-top: 12px;
  color: #888;
  font-size: 0.85em;
  text-decoration: none;
}

/* ── Main layout ── */
main { max-width: 960px; margin: 0 auto; padding: 30px 20px 60px; }

section { background: white; border-radius: var(--radius); padding: 28px; margin-bottom: 28px; box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
section h2 { color: var(--green); font-size: 1.1em; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--gold); }

/* ── Admin Navigation ──
   Pill menu (same look as the public site-nav): rounded, dark frosted bar,
   light link text. Full-width light bar + #333 links broke when the immersive
   admin shell painted a dark nav background. */
.admin-nav {
  position: sticky;
  top: 8px;
  z-index: 100;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: transparent;
  border: none;
  border-bottom: none;
  padding: 8px 12px 4px;
  margin: 0;
  box-shadow: none;
}

.admin-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 7px 18px;
  gap: 4px;
  width: max-content;
  max-width: calc(100% - 24px);
  background: rgba(36, 29, 18, 0.55);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-sizing: border-box;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.admin-nav a {
  display: inline-block;
  padding: 6px 14px;
  color: #f5efe6cc;
  text-decoration: none;
  font-size: 0.88rem;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.admin-nav a:hover {
  background: #f5efe61a;
  color: #f5efe6;
}

.admin-nav a:active {
  background: #c9a84c;
  color: #2c2416;
}

/* Persistent "current page" highlight (P7.E) — the old single-page nav
   only had :active (click-in-progress); a real multi-page nav needs a
   lasting indicator for which page is actually showing. */
.admin-nav a.active {
  background: var(--gold, #c9a84c);
  color: var(--dark, #2c2416);
  font-weight: bold;
}

@media (max-width: 720px) {
  .admin-nav ul {
    border-radius: 12px; /* multi-row wrap: pill ends look odd */
    max-width: calc(100% - 16px);
  }
}


/* ── Form grid ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.82em; color: #666; margin-bottom: 4px; }
.field input, .field select, .field textarea {
  padding: 9px 12px; border: 1px solid var(--gold); border-radius: var(--radius-sm);
  font-size: 0.92em; font-family: inherit; background: white;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-hover); }
.field .hint { font-size: 0.75em; color: #999; margin-top: 4px; font-style: italic; }

@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

/* ── Site Text editor (P7.C — two columns: EN + one other) ── */
.tr-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 16px;
}
.tr-second-lang-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9em;
  color: #555;
  white-space: nowrap;
}
.tr-second-lang-label select {
  padding: 7px 10px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.92em;
  background: white;
  min-width: 140px;
}

/* P7.D — add interface language box (was inline styles on admin_translations.php) */
.tr-add-lang-box {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  background: #faf6ee;
}
.tr-add-lang-title {
  font-weight: 600;
  margin-bottom: 8px;
}
.tr-add-lang-hint { margin: 0 0 10px; }
.tr-add-lang-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.tr-add-lang-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85em;
}
.tr-add-lang-field--name {
  flex: 1;
  min-width: 140px;
}
.tr-add-lang-box input[type="text"] {
  padding: 7px 8px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  font-family: inherit;
}
#tr-add-lang-code { width: 5.5em; }
.tr-add-lang-status {
  margin-top: 8px;
  font-size: 0.88em;
  color: #666;
  min-height: 1.2em;
}

.tr-group { border: 1px solid #e0d8c8; border-radius: 8px; margin-bottom: 10px; background: #fffdf8; }
.tr-group > summary {
  cursor: pointer; padding: 12px 16px; font-weight: bold; color: var(--dark);
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.tr-group > summary::-webkit-details-marker { display: none; }
.tr-group > summary::after { content: '▸'; transition: transform 0.15s; }
.tr-group[open] > summary::after { transform: rotate(90deg); }
.tr-group-body { padding: 4px 16px 14px; }

/* label | EN | second language */
.tr-row {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr 1fr;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #eee0cc;
  align-items: start;
}
.tr-row:first-child { border-top: none; }
.tr-row-head {
  border-top: none;
  padding-bottom: 4px;
  padding-top: 6px;
}
.tr-col-head {
  font-size: 0.8em;
  font-weight: bold;
  color: #5a4a3a;
  letter-spacing: 0.02em;
}
.tr-row-label { font-size: 0.82em; color: #666; padding-top: 8px; word-break: break-word; }
.tr-row-label-main { font-size: 0.88em; color: #444; line-height: 1.3; }
.tr-row-label-key {
  font-size: 0.72em;
  color: #999;
  margin-top: 2px;
  font-family: ui-monospace, monospace;
}
.tr-cell { display: flex; flex-direction: column; min-width: 0; }
.tr-cell input, .tr-cell textarea {
  padding: 7px 10px; border: 1px solid var(--gold); border-radius: var(--radius-sm);
  font-size: 0.88em; font-family: inherit; background: white; resize: vertical;
  width: 100%; box-sizing: border-box;
}
.tr-cell input:focus, .tr-cell textarea:focus { outline: none; border-color: var(--gold-hover); }
.tr-input-wrap { display: flex; align-items: flex-start; gap: 6px; }
.tr-input-wrap input, .tr-input-wrap textarea { flex: 1; min-width: 0; }

/* Confirm tick — grey outline = action needed; solid green = just saved */
.tr-confirm-btn {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid #999; background: transparent; color: #999;
  cursor: pointer; font-size: 0.95em; line-height: 1; margin-top: 1px;
  transition: all 0.15s;
}
.tr-confirm-btn:hover { border-color: #666; color: #666; }
.tr-confirm-btn:disabled { cursor: default; opacity: 0.6; }
.tr-confirm-btn.tr-confirm-saved {
  border-color: var(--green); background: var(--green); color: white;
}
.tr-cell.tr-auto input, .tr-cell.tr-auto textarea { border-color: #6b8fc9; background: #eef3fc; }
.tr-auto-badge { font-size: 0.72em; color: #3a5a8f; margin-top: 4px; }
.tr-cell.changed input, .tr-cell.changed textarea { border-color: var(--green); background: #f5faf3; }
.tr-cell.tr-stale input, .tr-cell.tr-stale textarea { border-color: #e0b84c; background: #fff8e1; }
.tr-stale-badge { font-size: 0.72em; color: #8a6d1f; margin-top: 4px; }
.tr-warn { font-size: 0.72em; color: #a66; margin-top: 3px; }

/* Save-scope bar (P7.C) — spans full row under the two columns */
.tr-propagate {
  display: none;
  margin-top: 6px;
  font-size: 0.78em;
  background: #fbf3d9;
  border: 1px solid #e5d49a;
  border-radius: 6px;
  padding: 8px 10px;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.tr-propagate.show { display: flex; }
.tr-propagate .tr-scope-msg { margin-right: 4px; color: #5a4a2a; }
.tr-propagate button {
  margin: 0;
  padding: 4px 10px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 0.95em;
  font-family: inherit;
}
.tr-propagate .tr-prop-yes { background: var(--gold); color: var(--dark); }
.tr-propagate .tr-prop-all { background: var(--green); color: white; }
.tr-propagate .tr-prop-no  { background: #eee; color: #666; }
.tr-propagate .tr-prop-dismiss {
  background: #fff;
  color: var(--dark);
  border: 1px solid var(--gold) !important;
  font-weight: bold;
  margin-left: auto;
}
.tr-propagate .tr-prop-dismiss:hover { background: #f5edd8; }
.tr-propagate button:disabled { opacity: 0.65; cursor: default; }
.tr-scope-summary {
  flex: 1 1 100%;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid #e5d49a;
  color: #3a5a2a;
  font-size: 0.95em;
  line-height: 1.4;
}

/* Site-styled modal — used by adminConfirm() / adminAlert() in admin_shared.js
   (replaces browser window.confirm / alert site-wide in admin). */
.admin-modal,
.tr-modal {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(44, 36, 22, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.admin-modal[hidden],
.tr-modal[hidden] { display: none !important; }
.admin-modal-box,
.tr-modal-box {
  background: var(--cream, #f5efe6);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg, 10px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  max-width: 440px;
  width: 100%;
  padding: 24px 26px 20px;
}
.admin-modal-msg,
.tr-modal-msg {
  margin: 0 0 18px;
  color: var(--dark, #2c2416);
  font-size: 0.98em;
  line-height: 1.5;
  white-space: pre-wrap;
}
.admin-modal-actions,
.tr-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-modal-btn,
.tr-modal-btn {
  border: none;
  border-radius: 6px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 0.9em;
  font-weight: bold;
  cursor: pointer;
}
.admin-modal-btn-cancel,
.tr-modal-btn-cancel {
  background: #eee;
  color: #555;
}
.admin-modal-btn-cancel:hover,
.tr-modal-btn-cancel:hover { background: #e0e0e0; }
.admin-modal-btn-ok,
.tr-modal-btn-ok {
  background: var(--green, #2d5a27);
  color: white;
}
.admin-modal-btn-ok:hover,
.tr-modal-btn-ok:hover { background: var(--green-hover, #1e3d1a); }

/* Prompt field inside admin modal (folder name, etc.) */
.admin-modal-field-wrap {
  margin: 0 0 16px;
}
.admin-modal-field-lbl {
  display: block;
  font-size: 0.82em;
  color: #666;
  margin-bottom: 4px;
}
.admin-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm, 4px);
  font-family: inherit;
  font-size: 0.95em;
  background: white;
}
.admin-modal-input:focus {
  outline: none;
  border-color: var(--gold-hover, #b89540);
}
.admin-modal-error {
  margin-top: 6px;
  font-size: 0.85em;
  color: var(--red, #8b2020);
}

.tr-row.hidden-by-search { display: none; }
@media (max-width: 800px) {
  .tr-row { grid-template-columns: 1fr; }
  .tr-row-label { padding-top: 0; }
  .tr-row-head { display: none; }
}

/* ── Buttons ── */
.btn {
  border: none; padding: 10px 18px; border-radius: 6px; cursor: pointer;
  font-size: 0.9em; font-family: inherit; font-weight: bold;
  transition: all 0.2s;
}
.btn-primary   { background: var(--green); color: white; }
.btn-primary:hover { background: #1e3d1a; }
.btn-secondary { background: var(--gold);  color: var(--dark); }
.btn-secondary:hover { background: var(--gold-hover); }
.btn-danger    { background: var(--red);   color: white; }
.btn-danger:hover  { background: #6e1818; }
.btn-edit     { background: #e8e0d0; color: var(--dark); }
.btn-edit:hover    { background: #d8cfb8; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Drop zone ── */
#drop-zone {
border: 2px dashed #c0b598; border-radius: 8px;
padding: 28px; text-align: center; cursor: pointer;
background: #fdfaf5; transition: all 0.2s;
}
#drop-zone.dragover { background: #f5edd8; border-color: var(--gold); }
#drop-zone.has-file { background: #e8f5e8; border-color: var(--green); border-style: solid; }
#pdf-input { display: none; }

/* ── Progress ── */
#progress-wrap { display: none; margin-top: 18px; }
#progress-bar-wrap { background: #eee; height: 8px; border-radius: 4px; overflow: hidden; }
#progress-bar { background: var(--green); height: 100%; width: 0%; transition: width 0.3s; }
#progress-log {
margin-top: 10px; font-family: monospace; font-size: 0.78em;
color: #555; max-height: 200px; overflow-y: auto; white-space: pre-wrap;
}

/* ── Toast ── */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--dark); color: white; padding: 12px 20px;
  border-radius: 6px; opacity: 0; transition: opacity 0.3s;
  z-index: 1000; max-width: 90%; text-align: center;
}
.toast.show { opacity: 1; }

/* ── Book list ── */
#book-list { display: flex; flex-direction: column; gap: 12px; }

.book-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border: 1px solid #e8e0d0;
  border-radius: 8px; background: #fdfaf5;
  flex-wrap: wrap;
}
.book-row img {
  width: 38px; height: 50px; object-fit: cover;
  border-radius: 3px; flex-shrink: 0;
}
.book-row .book-meta { flex: 1; min-width: 160px; }
.book-row .book-meta .btitle  { font-weight: bold; font-size: 0.92em; }
.book-row .book-meta .bsub    { font-size: 0.78em; color: #888; margin-top: 2px; font-style: italic; }
.book-row .book-meta .bfolder { font-size: 0.72em; color: #aaa; font-family: monospace; }
.book-row .book-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Categories list (EN + second language columns) ── */
#cat-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cat-row {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(4.5rem, auto) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #e8e0d0;
  border-radius: 6px;
  background: #fdfaf5;
}
.cat-row-head {
  background: transparent;
  border: none;
  padding: 4px 12px 2px;
}
.cat-col-head {
  font-size: 0.8em;
  font-weight: bold;
  color: #5a4a3a;
}
.cat-col-usage, .cat-col-actions { /* spacer cells in header */ }
.cat-row input {
  padding: 6px 10px; border: 1px solid var(--gold); border-radius: var(--radius-sm);
  font-size: 0.88em; font-family: inherit; background: white;
  width: 100%; box-sizing: border-box;
}
.cat-row input:focus { outline: none; border-color: var(--gold-hover); }
.cat-row .cat-usage {
  font-size: 0.75em; color: #888; white-space: nowrap;
}
.cat-row .cat-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.cat-row .btn { padding: 6px 12px; font-size: 0.8em; }

/* Category checkboxes on the Add/Edit Book screens (P7.F) */
.cat-checks {
  column-width: 170px;
  column-gap: 20px;
}
.cat-checks label {
  break-inside: avoid;
  margin-bottom: 6px;
}

.cat-add-row,
#cat-add-row {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(4.5rem, auto) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px dashed #c0b598;
  border-radius: 6px;
  background: #fffdf6;
}
.cat-add-row input,
#cat-add-row input {
  padding: 7px 10px; border: 1px solid var(--gold); border-radius: var(--radius-sm);
  font-size: 0.9em; font-family: inherit; background: white;
  width: 100%; box-sizing: border-box;
}
.cat-add-row input:focus,
#cat-add-row input:focus { outline: none; border-color: var(--gold-hover); }

@media (max-width: 600px) {
  .cat-row, .cat-add-row, #cat-add-row { grid-template-columns: 1fr; }
  .cat-row-head { display: none; }
}

/* ── Edit modal ── */
#edit-modal {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
align-items: center; justify-content: center;
z-index: 500;
}
#edit-modal.open { display: flex; }
#edit-box {
background: white; padding: 32px; border-radius: var(--radius);
width: 100%; max-width: 520px; box-shadow: 0 8px 40px rgba(0,0,0,0.3);
max-height: 90vh; overflow-y: auto;
}
#edit-box h3 { color: var(--green); margin-bottom: 20px; }
#edit-msg { margin-top: 12px; font-size: 0.85em; min-height: 20px; }
#sub-edit-modal {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
align-items: center; justify-content: center;
z-index: 500;
}
#sub-edit-modal.open { display: flex; }
#sub-edit-box {
background: white; padding: 32px; border-radius: var(--radius);
width: 100%; max-width: 560px; box-shadow: 0 8px 40px rgba(0,0,0,0.3);
max-height: 90vh; overflow-y: auto;
}
#sub-edit-box h3 { color: var(--green); margin-bottom: 20px; }
#sub-edit-box label { display: block; margin-bottom: 10px; font-size: 0.9em; }
#sub-edit-box input, #sub-edit-box select, #sub-edit-box textarea {
width: 100%; padding: 8px; margin-top: 4px;
border: 1px solid var(--gold); border-radius: var(--radius-sm); font: inherit;
}
#sub-edit-box input:focus, #sub-edit-box select:focus, #sub-edit-box textarea:focus {
outline: none; border-color: var(--gold-hover);
}

/* ── Submissions section ───────────────────────── */
.subs-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #ddd;
}
.subs-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.subs-filters { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.subs-filters label { font-size: 0.9rem; white-space: nowrap; }
.subs-filters select { padding: 0.35rem 0.5rem; font-size: 0.9rem; }
.subs-sort { display: flex; align-items: center; gap: 0.5rem; }
.subs-sort select { padding: 0.35rem 0.5rem; }
.subs-count { margin-left: auto; color: #666; font-size: 0.9rem; }

.subs-notify {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
}
.subs-notify input[type="email"] {
  padding: 0.35rem 0.6rem;
  border: 1px solid #bbb;
  border-radius: 4px;
  font-size: 0.88rem;
  font-family: inherit;
  width: 440px;
}
.subs-notify button {
  padding: 0.35rem 0.7rem;
  border: 1px solid #2c5aa0;
  background: #2c5aa0;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}
.subs-notify button:hover { opacity: 0.85; }


.subs-list { display: flex; flex-direction: column; gap: 0.75rem; }
.subs-loading, .subs-empty { color: #888; font-style: italic; padding: 1rem; }

.sub-card {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 1rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.sub-card.reviewed { background: #f4f8f4; border-color: #cfe0cf; }

.sub-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.sub-title { font-weight: bold; font-size: 1.05rem; flex: 1; }
.sub-badge {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-weight: bold;
}
.sub-badge.pending  { background: #fff3cd; color: #856404; }
.sub-badge.reviewed { background: #d4edda; color: #155724; }
.sub-badge.uploaded { background: #1976d2; color: white; }
.sub-badge.rejected { background: #f8d7da; color: #842029; }
.sub-badge.oversized { background: #fde8c8; color: #8a4b00; border: 1px solid #e0a85c; }
.sub-card.oversized {
  border-left: 4px solid #e0a85c;
}
#subs-filter-select option[value="rejected"] { color: #842029; font-weight: bold; }

.sub-card.uploaded  {
  background: #f0f7ff;
  border-color: #b8d4f0;
  border-left: 4px solid #1976d2;
  opacity: 0.85;
}
.sub-card.uploaded .sub-title {
  text-decoration: line-through;
  color: #666;
}
.sub-date { color: #888; font-size: 0.85rem; }

.sub-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 0.4rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
  min-width: 0;
}
.sub-meta div { line-height: 1.4; overflow-wrap: anywhere; word-break: break-word; }
.sub-meta .lbl { color: #666; margin-right: 0.3rem; }
.sub-card { max-width: 100%; min-width: 0; box-sizing: border-box; }
.subs-list { max-width: 100%; min-width: 0; }
.sub-actions { max-width: 100%; }
.sub-actions select,
.sub-actions button {
  max-width: 100%;
}
@media (max-width: 640px) {
  .sub-meta {
    grid-template-columns: 1fr;
  }
  main, .admin-section {
    max-width: 100%;
    overflow-x: hidden;
  }
  .sub-actions {
    gap: 0.4rem;
  }
}

.sub-notes {
  background: #fafafa;
  border-left: 3px solid #ccc;
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0;
  font-size: 0.9rem;
  white-space: pre-wrap;
}

.sub-admin-note { margin: 0.6rem 0; }
.sub-admin-note textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.4rem;
  font-family: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.sub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid #eee;
}
.sub-actions select { padding: 0.3rem 0.5rem; }
.sub-actions .spacer { flex: 1; }
.sub-actions button {
  padding: 0.4rem 0.8rem;
  border: 1px solid #bbb;
  background: #f0f0f0;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.9rem;
}
.sub-actions button.primary  { background: #2c5aa0; color: #fff; border-color: #2c5aa0; }
.sub-actions button.danger   { background: #c0392b; color: #fff; border-color: #c0392b; }
.sub-actions button:hover    { opacity: 0.9; }

.sub-flash {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.85rem;
  color: #155724;
  opacity: 0;
  transition: opacity 0.3s;
}
.sub-flash.show { opacity: 1; }

section[id^="section-"] { scroll-margin-top: 70px; }
  /* Category chips in book list */
  .cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
  }
  .cat-chip {
    display: inline-block;
    background: #e8dcc8;
    color: #5a4a3a;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 500;
  }