/* ── VOOM Admin ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: auto !important; overflow: auto !important; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background: #fff;
  color: #1a2a1a;
  font-size: .92rem;
}
a { color: #2a6a1a; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Navigation (sticky for admin scrollable pages) ──── */
.voom-nav { position: sticky; top: 0; }

.admin-main {
  max-width: 1400px;
  margin: 1.5rem auto;
  padding: 0 1rem 3rem;
}
.admin-page-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 1.25rem; color: #1c3010; }

/* ── Cards / panels ───────────────────────────────────── */
.admin-card {
  background: #fff;
  border: 1.5px solid #d0dcc8;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.admin-card-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #4a7a3a;
  margin: 0 0 1rem;
}

/* ── Tables ───────────────────────────────────────────── */
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  background: #f0f4ee;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #4a6a3a;
  padding: .55rem .75rem;
  text-align: left;
  border-bottom: 2px solid #d0dcc8;
}
.admin-table td {
  padding: .5rem .75rem;
  border-bottom: 1px solid #e8eee4;
  vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: #f8fbf6; }
.admin-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Forms ────────────────────────────────────────────── */
.form-group { margin-bottom: .9rem; }
.form-group label { display: block; font-size: .8rem; font-weight: 600; color: #3a5a2a; margin-bottom: .3rem; }
.form-control {
  width: 100%;
  padding: .5rem .7rem;
  border: 1.5px solid #c8d4c0;
  border-radius: 7px;
  font-size: .9rem;
  background: #f9fbf8;
  color: #1a2a1a;
  transition: border-color .15s;
}
.form-control:focus { outline: none; border-color: #3a6a2a; background: #fff; }
.form-control-sm { padding: .3rem .5rem; font-size: .85rem; }
input[type="number"].form-control { -moz-appearance: textfield; }
input[type="number"].form-control::-webkit-outer-spin-button,
input[type="number"].form-control::-webkit-inner-spin-button { -webkit-appearance: none; }

.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-col { flex: 1; min-width: 160px; }

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem 1rem;
  border: none; border-radius: 7px; cursor: pointer;
  font-size: .87rem; font-weight: 600; text-decoration: none;
  transition: background .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn-primary   { background: #2a6a1a; color: #fff; }
.btn-primary:hover { background: #1c5010; }
.btn-secondary { background: #e8eee4; color: #1c3010; }
.btn-secondary:hover { background: #d8e8d0; }
.btn-danger    { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-sm { padding: .3rem .65rem; font-size: .8rem; }

/* ── Badges ───────────────────────────────────────────── */
.badge {
  display: inline-block; padding: .15rem .5rem; border-radius: 99px;
  font-size: .72rem; font-weight: 700;
}
.badge-green { background: #dcfce7; color: #15803d; }
.badge-red   { background: #fee2e2; color: #dc2626; }

/* ── Alerts ───────────────────────────────────────────── */
.alert { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .88rem; }
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* ── Inline editable input in table ──────────────────── */
.tbl-input {
  width: 100%;
  padding: .28rem .4rem;
  border: 1.5px solid transparent;
  border-radius: 5px;
  background: transparent;
  font-size: .88rem;
  text-align: right;
  color: inherit;
  transition: border-color .12s, background .12s;
}
.tbl-input:focus { outline:none; border-color: #3a6a2a; background: #f8fff6; }

/* Book link input — always visible border */
.book-link-input {
  width: 52px;
  padding: .25rem .35rem;
  border: 1.5px solid #d0c8e4;
  border-radius: 5px;
  background: #faf8fd;
  font-size: .84rem;
  text-align: center;
  color: #4a2a8a;
  font-weight: 600;
  transition: border-color .12s, background .12s;
  -moz-appearance: textfield;
}
.book-link-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.book-link-input:focus { outline: none; border-color: #6a4aba; background: #f0ecf8; }
.book-link-input::placeholder { color: #c8c0d8; font-weight: 400; }

.book-link-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: none; background: none;
  color: #c8c0d8; font-size: .7rem; cursor: pointer;
  border-radius: 50%; transition: background .12s, color .12s;
  flex-shrink: 0;
}
.book-link-clear:hover { background: #fee2e2; color: #dc2626; }

.book-link-code {
  font-size: .68rem; color: #4a2a8a; font-weight: 600;
  white-space: nowrap;
}
.book-link-synced {
  font-size: .62rem; color: #888;
  white-space: nowrap;
}

/* ── Settings groups ──────────────────────────────────── */
.settings-group { margin-bottom: 2rem; }
.settings-group-title {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: #4a7a3a;
  border-bottom: 2px solid #e0ecd8; padding-bottom: .4rem; margin-bottom: .8rem;
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: .75rem;
}

/* ── Copy string box ──────────────────────────────────── */
.copy-box {
  display: flex; gap: .5rem; align-items: center;
}
.copy-box input {
  flex: 1;
  font-family: monospace; font-size: .78rem;
  padding: .4rem .6rem;
  border: 1.5px solid #c8d4c0; border-radius: 6px;
  background: #f4f8f2; color: #1a3a1a;
}
.copy-btn {
  flex-shrink: 0;
  padding: .4rem .7rem;
  background: #e0ecd8; border: 1.5px solid #b8d4a8;
  border-radius: 6px; cursor: pointer; font-size: .78rem;
  transition: background .12s;
}
.copy-btn:hover { background: #c8e0b8; }
.copy-btn.copied { background: #dcfce7; }