/* assets/css/admin.css — the desk.
   Same palette as the site so it feels like the same place, but flatter and
   denser: this is a working surface, not a shopfront. Deliberately its own
   stylesheet, so tightening the admin can never move the storefront. */

:root {
    --board:    #16261F;
    --paper:    #EFF1EC;
    --card:     #FFFFFF;
    --ink:      #14201B;
    --ink-soft: #4C5B54;
    --line:     #D2D9D2;
    --piece:    #E8C547;
    --link:     #1F5E45;
    --bad:      #A3341F;
}

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1 { font-size: 1.5rem; margin: 0; letter-spacing: -0.02em; }
h2 { font-size: 1.08rem; margin: 0; letter-spacing: -0.01em; }
a  { color: var(--link); }

.awrap { max-width: 1000px; margin-inline: auto; padding-inline: 1.2rem; }

/* ------------------------------------------------------------------- bar */

/* The bar is only for leaving now — View site and Log out. Where you are lives
   in the tabs directly under it, so the two are not competing to say it. */
.abar {
    background: var(--board);
    color: var(--paper);
}

/* -------------------------------------------------------------------- tabs */

.atabs {
    background: var(--card);
    border-bottom: 1px solid var(--line);
    margin-bottom: 2rem;
}

.atabs .awrap {
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
}

/* Sitting on the border rather than boxed: the active tab closes the line
   under it, which is what makes a tab read as the page you are on. */
.atab {
    display: inline-block;
    padding: .85rem 1.05rem;
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

.atab:hover { color: var(--ink); border-bottom-color: var(--line); }

.atab-on {
    color: var(--ink);
    border-bottom-color: var(--piece);
}

.abar .awrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 56px;
    flex-wrap: wrap;
}

.abrand {
    color: var(--paper);
    text-decoration: none;
    font-weight: 600;
    margin-right: auto;
}
.abar nav { display: flex; gap: 1.2rem; font-size: .93rem; }
.abar nav a { color: #C6D1C9; text-decoration: none; }
.abar nav a:hover { color: var(--piece); }
.abar .aout { color: var(--piece); }

/* ---------------------------------------------------------------- pieces */

.ahead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.ashelf { margin-bottom: 2.75rem; }
.ashelf h2 { display: flex; align-items: baseline; gap: .5rem; }

/* The page heading's note, now that the button has moved down to the shelves.
   flex-basis forces its own line: .ahead is a space-between row, and without
   this the note would sit out to the right where the button used to be. */
.ahead .anote {
    flex-basis: 100%;
    margin: .35rem 0 0;
    max-width: 62ch;
}

.acount {
    font: 600 .75rem/1 Inter, sans-serif;
    background: var(--line);
    color: var(--ink-soft);
    padding: .25rem .45rem;
    border-radius: 2px;
}

.anote  { color: var(--ink-soft); font-size: .9rem; margin: .3rem 0 1rem; }
.aempty { color: var(--ink-soft); background: var(--card); border: 1px dashed var(--line); padding: 1.2rem; }
.amuted { color: #9AA79F; }

.ahint {
    font-weight: 400;
    color: var(--ink-soft);
    font-size: .85rem;
}

/* ----------------------------------------------------------------- table */

.atable {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--line);
    font-size: .93rem;
}

.atable th {
    text-align: left;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--line);
}

.atable td { padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.atable tr:last-child td { border-bottom: 0; }

/* A hidden row still has to be readable - it is not disabled, just not live. */
.atable tr.is-hidden td { background: #F6F7F4; color: var(--ink-soft); }
.atable tr.is-hidden strong { font-weight: 400; }

.ashot img { display: block; width: 52px; height: 39px; object-fit: cover; border: 1px solid var(--line); }
.anoshot { color: #9AA79F; }
.anowrap { white-space: nowrap; }

.aslug {
    display: block;
    font-size: .78rem;
    color: var(--ink-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.awarn {
    display: inline-block;
    margin-top: .2rem;
    font-size: .75rem;
    background: #FDF6DC;
    border: 1px solid var(--piece);
    color: #6B5407;
    padding: .1rem .35rem;
    border-radius: 2px;
}

/* --------------------------------------------------------------- controls */

.abtn {
    display: inline-block;
    font: 600 .93rem/1 Inter, system-ui, sans-serif;
    background: var(--board);
    color: var(--paper);
    border: 2px solid var(--board);
    padding: .7rem 1.1rem;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
}
.abtn:hover { background: var(--link); border-color: var(--link); }

.ainline { display: inline; }

/* A quiet link sitting beside a primary button in a page heading. */
.aactions-inline {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.ahint code {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: .05rem .3rem;
    font-size: .92em;
}

/* The row controls are buttons because they POST, but they should read as
   links - a table full of chrome is hard to scan. */
.alink {
    background: none;
    border: 0;
    padding: .15rem .25rem;
    font: 400 .9rem/1.4 Inter, system-ui, sans-serif;
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.alink:hover { color: var(--ink); }
.alink:disabled { color: #B6C0B8; text-decoration: none; cursor: default; }
.alink-bad { color: var(--bad); }

/* ------------------------------------------------------------------ form */

.aform {
    background: var(--card);
    border: 1px solid var(--line);
    padding: 1.5rem;
    max-width: 620px;
}

.aform label {
    display: block;
    font-weight: 600;
    margin: 1.15rem 0 .3rem;
}
.aform label:first-of-type { margin-top: 0; }

.aform input[type="text"],
.aform input:not([type]),
.aform input[type="url"],
.aform input[type="date"],
.aform input[type="time"],
.aform select,
.aform textarea {
    width: 100%;
    font: inherit;
    padding: .55rem .65rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: #FCFDFB;
}

.aform select,
.aform input[type="date"],
.aform input[type="time"] { max-width: 260px; }

.aform input:focus, .aform select:focus, .aform textarea:focus {
    outline: 2px solid var(--piece);
    outline-offset: 1px;
    border-color: var(--piece);
}

/* A grouped set of choices. Went away with the old "what is it" radio and came
   back for the settings page, which is the same shape of thing: a legend and a
   short list of mutually exclusive options. */
.arow {
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: .9rem 1rem 1rem;
    margin: 0 0 .5rem;
}
.arow legend { font-weight: 600; padding-inline: .35rem; }

.acheck {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 400;
    margin: .35rem 0;
}
.acheck input { width: auto; margin: 0; flex: none; }
.acheck .ahint { font-weight: 400; }

.acurrent {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    padding: .7rem;
    margin-bottom: .6rem;
}
.acurrent img { display: block; object-fit: cover; border: 1px solid var(--line); }

.aactions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.8rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--line);
}

.aerr { color: var(--bad); font-size: .88rem; margin: .35rem 0 0; }

/* ----------------------------------------------------------------- flash */

.flash {
    padding: .75rem 1rem;
    border-left: 4px solid var(--piece);
    background: #FDF6DC;
    color: #4A3D0C;
    margin: 0 0 1.5rem;
}
.flash-bad { border-left-color: var(--bad); background: #FBEDEA; color: #6B1F0F; }

/* ----------------------------------------------------------------- login */

.login {
    max-width: 340px;
    margin: 12vh auto 0;
    background: var(--card);
    border: 1px solid var(--line);
    padding: 1.8rem;
}
.login h1 { margin-bottom: 1.4rem; }
.login label { display: block; font-weight: 600; margin-bottom: .35rem; }
.login input {
    width: 100%;
    font: inherit;
    padding: .6rem .65rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    margin-bottom: 1.2rem;
}
.login input:focus { outline: 2px solid var(--piece); outline-offset: 1px; }
.login .abtn { width: 100%; text-align: center; }

/* ------------------------------------------------------- assembly photos

   Its own panel below the product form, because it is its own set of forms —
   see the note in admin/puzzle-edit.php. Visually separated so it does not read as
   more fields belonging to the Save button above it. */

.agal {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 2px solid var(--line);
}

.agal-add {
    background: var(--card);
    border: 1px solid var(--line);
    padding: 1rem 1.1rem 1.15rem;
    margin-bottom: 1.25rem;
    display: grid;
    gap: .55rem;
    justify-items: start;
}

.agal-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--line);
    display: grid;
    gap: 1px;
}

/* Thumbnail, caption, controls. The caption takes the slack so the row keeps
   its shape whatever the window does. */
.agal-list li {
    background: var(--card);
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .6rem .75rem;
}

.agal-list img {
    display: block;
    width: 104px;
    height: 78px;
    object-fit: cover;
    border: 1px solid var(--line);
    flex: none;
}

.agal-list input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
}

.agal-ops {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: none;
}

/* Visible to a screen reader, not on the page: each caption box needs a label
   of its own, but eleven visible "Caption" labels would be noise. */
.asr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 560px) {
    .agal-list li { flex-wrap: wrap; }
    .agal-list input[type="text"] { flex-basis: 100%; order: 3; }
}

/* ------------------------------------------------------------ start panel */

/* The head of both product forms: the barcode and the Amazon link, the two
   things an item can start from. A panel rather than three loose fields, so it
   reads as one optional short cut and not as the first three questions you are
   obliged to answer. It sits inside .aform, so the field styling it inherits is
   the same as everything below it - only the ground changes. */

.astart {
    margin: 0 0 1.7rem;
    padding: 1rem 1.1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--paper);
}

.astart-head {
    margin: 0;
    font: 600 .78rem/1 Inter, system-ui, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* .aform zeroes the top margin of the first label in any parent, which here
   would weld the Barcode label to the panel's own heading. */
.astart label:first-of-type { margin-top: .75rem; }

.astart-note {
    margin: 1rem 0 0;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* The scanner is the point of this panel on a phone, so it is the solid button
   and typing the digits is the quiet route beside it. scan.js unhides it only
   once it has found a camera API to use. */
.abtn-scan { padding-block: .6rem; }

@media (max-width: 560px) {
    /* Thumb-sized and unmissable on the device that has the box in front of
       it. The quiet link drops onto its own line under it rather than being
       squeezed alongside. */
    .astart .amz-go { gap: .35rem; }
    .abtn-scan { width: 100%; text-align: center; padding-block: .8rem; }
    .astart .amz-go .alink { padding-top: .25rem; }
}

/* --------------------------------------------------------- amazon lookup */

/* The button under the Amazon link. It is a submit, not a link, because it
   posts the form it sits in — but it should read as the quiet aside it is. */
.amz-go {
    margin: .4rem 0 0;
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
}

/* What Amazon says beside what you typed. Yours is the wider column: it is the
   one being decided about, and it is the one that wins by default. */
.amz-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
    margin-bottom: .5rem;
}

.amz-table th,
.amz-table td {
    text-align: left;
    padding: .55rem .6rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.amz-table thead th {
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.amz-table tbody th { font-weight: 600; white-space: nowrap; }
.amz-table tbody tr:last-child th,
.amz-table tbody tr:last-child td { border-bottom: 0; }
.amz-table input[type="checkbox"] { margin: .2rem 0 0; }

/* ------------------------------------------------------------- map position */

.acoords {
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: .9rem 1rem 1rem;
    margin: 1.15rem 0 0;
}
.acoords legend { font-weight: 600; padding-inline: .35rem; }

/* Two numbers that belong together, side by side and equally weighted. */
.acoords-pair {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.acoords-pair > span { flex: 1 1 12rem; min-width: 0; }
.acoords-pair label { margin-top: 0; }
.acoords .ahint { display: block; margin-top: .6rem; }

/* ---------------------------------------------------------------- scanner */

/* Hidden until the button is pressed; the button itself is hidden until the
   script confirms there is a camera API to use, so nothing here appears on a
   browser that cannot scan. */
.scan {
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--card);
    padding: .8rem;
    margin: .6rem 0 0;
    max-width: 420px;
}

/* html5-qrcode injects a <video> sized to its container. */
.scan-box {
    width: 100%;
    min-height: 200px;
    background: #0F1713;
    border-radius: 2px;
    overflow: hidden;
}
.scan-box video { width: 100%; display: block; }

.scan .ahint { display: block; margin: .55rem 0; }

/* A moment's confirmation that the scan landed in the field. */
.is-filled {
    outline: 2px solid var(--piece);
    outline-offset: 1px;
}