/* src/api/admin/assets/admin.css — the shared look for every admin tool.
 *
 * Lifted from the coffee release page so the tools read as one thing. Served as its own file
 * rather than copied into each page: three copies of a stylesheet is three places to change a
 * colour and two places to forget.
 */

/* The bar across the top of every tool, with its drop-down menu: its own file, because Manage
 * Coffees takes it without the rest of this sheet. */
@import url('/admin/nav.css');

:root {
  --line: #d8d4cc; --ink: #221f1a; --muted: #6b655c; --bg: #faf8f4;
  --accent: #7a5c3e; --warn: #8a3b25; --ok: #3f6b3f; --soft: #f4f1ea;
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 0 4rem;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink); background: var(--bg);
}
main { max-width: 78rem; margin: 0 auto; padding: 0 1.5rem; }
main.wide { max-width: none; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.05rem; margin: 1.75rem 0 .5rem; }
h3 { font-size: .9rem; margin: 1rem 0 .35rem; color: var(--muted);
     text-transform: uppercase; letter-spacing: .04em; }
p.sub { color: var(--muted); margin: 0 0 1.5rem; }
a { color: var(--accent); }

fieldset { border: 1px solid var(--line); border-radius: 6px; padding: 1rem 1.25rem 1.25rem;
           margin: 0 0 1.25rem; background: #fff; }
legend { font-weight: 600; padding: 0 .4rem; }
label { display: block; font-size: .8rem; color: var(--muted); margin: .75rem 0 .2rem;
        text-transform: uppercase; letter-spacing: .03em; }
input, select, textarea {
  width: 100%; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 4px;
  font: inherit; background: #fff; color: inherit;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
button { font: inherit; padding: .5rem 1rem; border-radius: 4px; border: 1px solid var(--accent);
         background: var(--accent); color: #fff; cursor: pointer; }
button.ghost { background: #fff; color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
.hint { font-size: .8rem; color: var(--muted); margin: .3rem 0 0; }
.warn { color: var(--warn); font-weight: 600; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0 1rem;
           align-items: end; }
.filters .go { margin-top: .75rem; }

/* ---- tables ---- */
.scroller { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--line);
         font-size: .85rem; white-space: nowrap; vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .7rem; text-transform: uppercase;
     letter-spacing: .03em; background: var(--soft); position: sticky; top: 0; }
td.wide { white-space: normal; min-width: 14rem; }
tr.clickable:hover td { background: #fbf9f5; cursor: pointer; }
td.empty, .empty { color: var(--muted); font-style: italic; }
.flag-yes { color: var(--ok); font-weight: 600; }
.flag-no { color: var(--muted); }

/* ---- the whole-document view ---- */
.tree { font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.tree ul { list-style: none; margin: 0; padding-left: 1.1rem; border-left: 1px dotted var(--line); }
.tree > ul { padding-left: 0; border-left: 0; }
.tree li { padding: .05rem 0; }
.tree .k { color: var(--muted); }
.tree .v { color: var(--ink); }
.tree .v.null { color: #b3ada2; font-style: italic; }
.tree .v.time { color: var(--accent); }
.tree .v.bool { color: var(--ok); }

.card { border: 1px solid var(--line); border-radius: 6px; background: #fff;
        padding: 1rem 1.25rem; margin: 0 0 1rem; }
.badge { display: inline-block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
         padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--line);
         background: var(--soft); color: var(--muted); }
.badge.received { border-color: var(--ok); color: var(--ok); }
.badge.planned { border-color: var(--accent); color: var(--accent); }
.badge.superseded { border-color: var(--warn); color: var(--warn); }
.badge.seeded { border-color: var(--muted); }
.bags { list-style: none; margin: .35rem 0 0; padding: 0; }
.bags li { padding: .1rem 0; font-size: .9rem; }
.bags .sku { color: var(--muted); font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; align-items: start; }
@media (max-width: 60rem) { .row2 { grid-template-columns: 1fr; } }

/* THE STATUS BOX (Phil, 2026-09-20). One place to look on every page, drawn in the browser's top
   layer so it is on screen wherever the page is scrolled to, on a phone as much as on a desktop.
   It carries the whole action: asking, working, then done or failed. */
.statusBox { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px;
             padding: 1rem 1.25rem; width: min(32rem, 92vw); max-height: 80vh; overflow-y: auto;
             color: var(--ink); background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.statusBox::backdrop { background: rgba(28, 24, 20, .45); }
.statusBox h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.statusBox p { margin: 0; white-space: pre-wrap; }
.statusBox.working { border-left-color: var(--accent); }
.statusBox.done { border-left-color: var(--ok); }
.statusBox.bad { border-left-color: #b91c1c; }
.statusBox.bad h3 { color: #b91c1c; }
.statusButtons { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1rem; }
.statusButtons:empty { display: none; }
.statusButtons button { font: inherit; padding: .45rem 1rem; border-radius: 6px; cursor: pointer;
                        border: 1px solid var(--line); background: #fff; color: var(--ink); }
.statusButtons button:last-child { background: var(--accent); border-color: var(--accent); color: #fff; }
.statusButtons details { flex: 1 1 100%; order: -1; }
.statusButtons summary { cursor: pointer; font-size: .85rem; color: #7f1d1d; }
.statusButtons pre { white-space: pre-wrap; word-break: break-word; font-size: .75rem; color: #7f1d1d;
                     background: var(--soft); border: 1px solid var(--line); border-radius: 4px;
                     padding: .5rem; max-height: 12rem; overflow: auto; margin: .4rem 0 0; }
/* WORKING SAYS SO WITHOUT A PICTURE: the title is the sentence, and this line pulses under it. */
.statusBox.working p { color: var(--muted); animation: statusPulse 1.2s ease-in-out infinite; }
@keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }