/* Functional only. No design decisions live here — this file exists so that
   tables have edges and form fields line up, and it is expected to be replaced
   wholesale when the admin surface gets a real visual pass. */

body { font: 15px/1.45 system-ui, sans-serif; margin: 0; color: #111; background: #fff; }
main { padding: 1rem 1.5rem 4rem; max-width: 1400px; }

nav { background: #222; color: #eee; padding: .5rem 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
nav a { color: #eee; text-decoration: none; padding: .25rem .4rem; }
nav a:hover { background: #444; }
nav .spacer { flex: 1; }
nav .badge { background: #b23; color: #fff; border-radius: 999px; padding: 0 .5rem; font-size: .85em; }

h1 { font-size: 1.4rem; margin: 1rem 0 .5rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; border-bottom: 1px solid #ccc; padding-bottom: .2rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }

table { border-collapse: collapse; width: 100%; margin: .5rem 0 1rem; }
th, td { border: 1px solid #ccc; padding: .3rem .5rem; text-align: left; vertical-align: top; }
th { background: #f0f0f0; }
tr:nth-child(even) td { background: #fafafa; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

form.stack label { display: block; margin: .5rem 0; }
form.stack label span { display: block; font-size: .85em; color: #555; }
input, select, textarea { font: inherit; padding: .25rem; max-width: 100%; }
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=datetime-local], select, textarea { min-width: 18rem; }
textarea { min-height: 4rem; width: 40rem; max-width: 100%; }
.row { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.row label { margin: .5rem 0; }
fieldset { border: 1px solid #ccc; margin: 1rem 0; padding: .5rem 1rem 1rem; }
legend { font-weight: bold; padding: 0 .3rem; }

button, .btn { font: inherit; padding: .3rem .7rem; cursor: pointer; }
.actions { margin: 1rem 0; display: flex; gap: .5rem; align-items: center; }

.note { background: #f5f5dc; border-left: 3px solid #cc0; padding: .5rem .75rem; margin: 1rem 0; }
.error { background: #fdd; border-left: 3px solid #c00; padding: .5rem .75rem; margin: 1rem 0; }
.muted { color: #666; }
.mono { font-family: ui-monospace, monospace; }
.archived td { opacity: .55; font-style: italic; }

.cards { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.card { border: 1px solid #ccc; padding: .5rem .9rem; min-width: 7rem; }
.card .n { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.card .k { font-size: .8em; color: #555; }

.codes { font-family: ui-monospace, monospace; font-size: 1.1rem; line-height: 2; }
.qr svg { width: 220px; height: 220px; background: #fff; }

/* --- media -----------------------------------------------------------------
   The alt-text, reorder and remove controls each live in their own <form>
   inside a table cell, because they are separate POSTs and HTML has no nested
   forms. `.inline` is what stops each of them taking a line of its own, and
   the min-width override is needed because the global input rule sets 18rem —
   which is right for a specimen form and four times too wide for a cell. */
.inline { display: inline; }
.inline input[type=text] { min-width: 12rem; }

.media-table td { vertical-align: top; }
.media-cell { width: 120px; }
.media-thumb {
  display: block;
  width: 110px;
  height: auto;
  border: 1px solid #ccc;
  background: #fafafa;
}