/* ═══════════════════════════════════════════════════════════════════
   Watch Museum — admin.
   Its own stylesheet: the shop's is written for an editorial page with
   a shader behind it, and inheriting from it is what left the panel
   with dark-panel colours on light grounds and rows overlapping.
   One grid, one table style, one set of spacings.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --ink:#0E1216; --ink-2:#151B21; --ink-3:#1C242C;
  --line:rgba(230,228,220,.13);
  --fg:#E6E4DC; --fg-2:#98A3AC;
    /* every field label on a card is this colour; at #6E7A84 it sat
       at 3.95:1 on the panel, under the 4.5 a small uppercase label
       needs most */
    --fg-3:#7C8894;
  --gold:#B08D46; --good:#63C08D; --bad:#E0808A; --warn:#E4C583;
  --r:10px;
  --side:224px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  background:var(--ink); color:var(--fg);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
a{ color:var(--gold); text-decoration:none; }
h1,h2,p{ margin:0; }
button{ font:inherit; color:inherit; cursor:pointer; }
[hidden]{ display:none !important; }
.muted{ color:var(--fg-2); font-size:.875rem; }
.opt{ color:var(--fg-3); font-weight:400; text-transform:none; letter-spacing:0; font-size:.78rem; }

/* ── sign in ────────────────────────────────────────────────────── */
.gate{ min-height:100%; display:grid; place-items:center; padding:1.5rem; }
.gate__card{
  width:min(380px,100%); padding:1.75rem;
  background:var(--ink-2); border:1px solid var(--line); border-radius:14px;
}
.gate__card h1{ font-size:1.3rem; margin-bottom:.3rem; }
.gate__card .muted{ margin-bottom:1.25rem; }

/* ── shell ──────────────────────────────────────────────────────── */
.shell{ min-height:100%; display:flex; }
.side{
  width:var(--side); flex:none; position:fixed; inset:0 auto 0 0; z-index:40;
  display:flex; flex-direction:column;
  background:var(--ink-2); border-right:1px solid var(--line);
}
.side__top{ display:flex; align-items:center; padding:1.1rem 1.1rem .9rem; }
.side__mark{ flex:1; font-weight:700; letter-spacing:.01em; }
.side__x{ display:none; border:0; background:none; font-size:1.5rem; line-height:1; color:var(--fg-2); }
.nav{ flex:1; padding:.35rem .6rem; overflow-y:auto; }
.nav__i{
  display:flex; align-items:center; gap:.6rem; width:100%;
  padding:.62rem .7rem; margin-bottom:.15rem;
  border:0; background:none; border-radius:8px;
  color:var(--fg-2); text-align:left; font-size:.9375rem;
}
.nav__i:hover{ background:rgba(230,228,220,.06); color:var(--fg); }
.nav__i.is-on{ background:rgba(176,141,70,.16); color:var(--fg); }
.nav__i span{ flex:1; }
.nav__i b{
  min-width:20px; padding:.05rem .4rem; border-radius:99px;
  background:var(--gold); color:var(--ink); font-size:.72rem; text-align:center;
}
.nav__i b:empty{ display:none; }
.side__foot{
  padding:.9rem 1.1rem calc(.9rem + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line); display:flex; flex-direction:column; gap:.2rem;
}
.lnk{ padding:.35rem 0; border:0; background:none; color:var(--gold); text-align:left; font-size:.875rem; }
.lnk:hover{ text-decoration:underline; }
.scrim{ position:fixed; inset:0; z-index:35; background:rgba(0,0,0,.5); }

.main{ flex:1; min-width:0; margin-left:var(--side); }
.bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:1rem;
  padding:.85rem clamp(1rem,3vw,1.9rem);
  background:rgba(14,18,22,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar__t{ font-size:1.15rem; font-weight:600; }
.bar__end{ margin-left:auto; display:flex; align-items:center; gap:.6rem; }
.burger{ display:none; width:38px; height:38px; border:0; background:none; padding:8px 7px; }
.burger i{ display:block; height:1.6px; background:var(--fg); border-radius:2px; }
.burger i+i{ margin-top:4.5px; }
.find{
  width:min(260px,42vw); padding:.5rem .75rem;
  border:1px solid var(--line); border-radius:99px;
  background:var(--ink-2); color:var(--fg); font:inherit; font-size:.875rem;
}
.find:focus{ outline:2px solid var(--gold); outline-offset:1px; }

.view{ padding:clamp(1rem,3vw,1.9rem); }
.flash{ padding:0 clamp(1rem,3vw,1.9rem); }
.flash p{ margin-top:1rem; padding:.7rem .9rem; border-radius:var(--r); font-size:.9rem; }
.good{ background:rgba(99,192,141,.14); border:1px solid rgba(99,192,141,.4); color:#BFE8CE; }
.bad{ background:rgba(224,128,138,.14); border:1px solid rgba(224,128,138,.42); color:#F0C2C6; }
.h2{ font-size:1rem; font-weight:600; margin:1.6rem 0 .8rem; }
.h2:first-child{ margin-top:0; }

/* ── tiles ──────────────────────────────────────────────────────── */
.tiles{
  display:grid; gap:.8rem;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.tile{
  padding:1rem 1.1rem; border:1px solid var(--line);
  border-radius:var(--r); background:var(--ink-2);
}
.tile b{ display:block; font-size:1.65rem; font-weight:650; line-height:1.15; }
.tile span{ display:block; margin-top:.15rem; color:var(--fg-2); font-size:.8125rem; }
.tile.is-warn b{ color:var(--warn); }

/* ── tables ─────────────────────────────────────────────────────── */
.tablewrap{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--ink-2); overflow-x:auto;
}
.tbl{ width:100%; border-collapse:collapse; font-size:.9rem; }
.tbl th,.tbl td{
  padding:.7rem .8rem; text-align:left; vertical-align:middle;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl th{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-3); font-weight:600; background:var(--ink-3);
  position:sticky; top:0; z-index:1;
}
.tbl tr:last-child td{ border-bottom:0; }
.tbl tbody tr:hover{ background:rgba(230,228,220,.035); }
.tbl .wrap{ white-space:normal; min-width:180px; }
.tbl .num{ text-align:right; font-variant-numeric:tabular-nums; }
.tbl .thumbs{ width:40px; height:52px; object-fit:cover; border-radius:6px; background:#000; display:block; }
.tbl .acts{ display:flex; gap:.25rem; justify-content:flex-end; }

.code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85rem; color:var(--fg-2); }
.pill{
  display:inline-block; padding:.12rem .5rem; border-radius:99px;
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
}
.s-pending   { background:rgba(228,197,131,.18); color:#E4C583; }
.s-confirmed { background:rgba(143,187,214,.18); color:#9BC4DE; }
.s-processing{ background:rgba(176,141,70,.20);  color:#D9B876; }
.s-shipped   { background:rgba(120,170,230,.18); color:#9DC3EE; }
.s-delivered { background:rgba(99,192,141,.18);  color:#8FD6AE; }
.s-cancelled { background:rgba(224,128,138,.16); color:#E0949C; }

.sel,input,textarea,select{
  width:100%; padding:.55rem .7rem;
  border:1px solid var(--line); border-radius:8px;
  background:var(--ink); color:var(--fg); font:inherit; font-size:.9rem;
}
.sel{ width:auto; min-width:160px; }
input:focus,textarea:focus,select:focus{ outline:2px solid var(--gold); outline-offset:1px; }
input[type=file]{ padding:.4rem; background:none; border-style:dashed; }
.tbl select{ width:auto; min-width:132px; padding:.35rem .5rem; font-size:.82rem; }
.tbl input[type=text],.tbl input[type=number]{ width:110px; padding:.35rem .5rem; font-size:.82rem; }

.ico{
  width:30px; height:30px; flex:none; border:0; background:none;
  color:var(--fg-3); border-radius:6px; line-height:1;
}
.ico:hover{ background:rgba(230,228,220,.1); color:var(--fg); }
.ico.lit{ color:var(--gold); }
.ico.danger:hover{ color:var(--bad); }

/* ── forms and cards ────────────────────────────────────────────── */
.cards{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.card{
  padding:1.25rem; border:1px solid var(--line);
  border-radius:var(--r); background:var(--ink-2);
  /* A grid item will not shrink below its widest child unless told it
     may. Without this an <input> reports its intrinsic width, the
     track grows past the viewport, and the whole panel — header and
     all — scrolls sideways. It changes nothing on a desktop, where the
     track is never narrower than 320px anyway. */
  min-width:0;
}
/* the same for every field: never wider than what holds it */
.card input,.card select,.card textarea{ max-width:100%; }
.view > .card{ max-width:620px; }
label{
  display:block; margin-bottom:.9rem;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-2);
}
label input,label textarea,label select{ margin-top:.3rem; }
.grid2{ display:grid; gap:0 .9rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.grid2 > *{ min-width:0; }
.rowbar{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:1rem; }
/* every container that holds a field directly must be able to shrink,
   or the field's intrinsic width sets the width of the page */
.rowbar > *,.bar__end,.bar__end > *,.tog,.tog > span{ min-width:0; }
.rowbar .muted{ flex:1; min-width:200px; }
.btn{
  padding:.55rem 1.05rem; border:1px solid var(--line);
  border-radius:99px; background:none; font-size:.875rem;
}
.btn:hover{ border-color:var(--fg-2); }
.btn--go{ background:var(--fg); border-color:var(--fg); color:var(--ink); font-weight:600; }
.btn--go:hover{ background:#fff; }
.btn[disabled]{ opacity:.5; cursor:default; }
.thumb{ width:92px; height:122px; object-fit:cover; border-radius:8px; margin:-.4rem 0 .9rem; background:#000; }
.toggles{ display:flex; gap:1.2rem; flex-wrap:wrap; margin:.2rem 0 1rem; }
.tog{
  display:flex; align-items:center; gap:.5rem; margin:0;
  text-transform:none; letter-spacing:0; font-size:.9rem; color:var(--fg);
}
.tog input{ width:auto; margin:0; accent-color:var(--gold); }

.chips{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.chip{
  padding:.4rem .85rem; border:1px solid var(--line); border-radius:99px;
  background:none; color:var(--fg-2); font-size:.8125rem;
}
.chip:hover{ color:var(--fg); }
.chip.is-on{ background:var(--fg); border-color:var(--fg); color:var(--ink); font-weight:600; }

/* categories editor */
.tgrp{ border-top:1px solid var(--line); padding:.85rem 0; }
.trow{ display:flex; align-items:center; gap:.5rem; padding:.3rem 0; }
.trow .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tgrp > .trow .nm{ font-weight:600; }
.tcat .nm{ padding-left:1rem; color:var(--fg-2); font-size:.9rem; }
.cnt{ color:var(--fg-3); font-size:.78rem; white-space:nowrap; }
.addcat{ margin-left:1rem; font-size:.82rem; }

/* ── phone ──────────────────────────────────────────────────────── */
@media (max-width:900px){
  .side{ transform:translateX(-101%); transition:transform .28s ease; }
  .side.is-on{ transform:none; }
  .side__x{ display:block; }
  .main{ margin-left:0; padding:1rem .9rem 3rem; }
  .burger{ display:block; }

  /* Rows become cards. Six columns do not fit 390px — that is not a
     spacing problem, so nothing is gained by squeezing.

     The label sits ABOVE its value, not beside it. Beside it, a 78px
     label left about 250px for a name, a phone number and a zone, and
     they wrapped into each other. Above it, every field gets the full
     width of the card. */
  /* The wrapper is a scrolling frame for a table — border, background,
     rounded corners. Once the rows became cards it was a box drawn
     around a stack of boxes, which is the outline showing behind them.
     On a phone it carries nothing of its own. */
  .tablewrap{
    overflow:visible; border:0; border-radius:0; background:none;
  }
  .tbl--orders,.tbl--products,.tbl--people,
  .tbl--orders tbody,.tbl--products tbody,.tbl--people tbody{ display:block; }
  .tbl--orders thead,.tbl--products thead,.tbl--people thead{ display:none; }

  /* The dashboard list is a glance, not a worklist — nobody edits from
     it. So it stays compact: the order and its state on one line, who
     and how much on the next. As a table it simply ran off the side of
     the screen, which is how it was found. */
  .tbl--dash,.tbl--dash tbody{ display:block; }
  .tbl--dash thead{ display:none; }
  .tbl--dash tr{
    display:grid; grid-template-columns:1fr auto; gap:.15rem .6rem;
    padding:.7rem 0; border-bottom:1px solid var(--line);
  }
  .tbl--dash tr:last-child{ border-bottom:0; }
  .tbl--dash td{ padding:0; border:0; white-space:normal; }
  .tbl--dash td:nth-child(1){ grid-column:1; grid-row:1; }
  .tbl--dash td:nth-child(3){ grid-column:2; grid-row:1; text-align:right; }
  .tbl--dash td:nth-child(2){
    grid-column:1; grid-row:2; color:var(--fg-2); font-size:.85rem;
  }
  .tbl--dash td:nth-child(4){
    grid-column:2; grid-row:2; text-align:right; font-size:.85rem;
  }
  /* the timestamp is the least of it, and there is no room for it */
  .tbl--dash td:nth-child(5){ display:none; }

  .tbl--orders tr,.tbl--products tr,.tbl--people tr{
    display:block; margin-bottom:.7rem; padding:.9rem 1rem;
    border:1px solid var(--line); border-radius:12px;
    background:var(--ink-2);
  }
  .tbl--orders td,.tbl--products td,.tbl--people td{
    display:block; padding:.42rem 0; border:0;
    white-space:normal; text-align:left;
  }
  .tbl--orders td:first-child,.tbl--people td:first-child{ padding-top:0; }
  .tbl td[data-l]::before{
    content:attr(data-l); display:block; margin-bottom:.18rem;
    color:var(--fg-3); font-size:.625rem;
    letter-spacing:.12em; text-transform:uppercase;
  }
  /* a value's own sub-line gets its own row rather than trailing along */
  .tbl td .muted{ display:block; margin-top:.15rem; }
  .tbl td.num{ text-align:left; }

  /* the order number and its date belong together, on one line */
  .tbl td.span2{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
  .tbl td.span2 .muted{ display:inline; margin:0; }

  /* A product reads as a picture with facts beside it. The name needs
     no label — it is the largest thing on the card — and category and
     price share a line rather than taking one each. The buttons run the
     full width underneath, because five 44px targets do not fit in the
     column left over beside a photograph. */
  .tbl--products tr{
    display:grid; grid-template-columns:72px 1fr; gap:.1rem .9rem;
    align-items:start;
  }
  .tbl--products td{ grid-column:2; }
  .tbl--products td.pic{ grid-column:1; grid-row:1 / span 4; padding:0; }
  .tbl--products .thumbs{ width:72px; height:96px; border-radius:8px; }

  .tbl--products td[data-l="Name"]{ padding-top:0; font-size:1.0625rem; }
  .tbl--products td[data-l="Name"]::before{ display:none; }
  /* category and price on one line, the labels doing the separating */
  .tbl--products td[data-l="Category"],
  .tbl--products td[data-l="Price"]{
    display:inline-block; width:auto; padding:.25rem 0;
  }
  .tbl--products td[data-l="Price"]{ margin-left:1.1rem; }
  .tbl--products td[data-l="Category"]::before,
  .tbl--products td[data-l="Price"]::before{
    display:inline; margin:0 .35rem 0 0;
  }
  .tbl--products td[data-l="Stock"]{
    display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  }
  .tbl--products td[data-l="Stock"]::before{ flex:0 0 100%; }
  .tbl--products td[data-l="Stock"] input{ width:5.5rem; }
  /* the row of actions gets the whole card, thumbnail column included */
  .tbl--products .acts{ grid-column:1 / -1; }

  /* controls are for thumbs: full width, and tall enough to hit */
  .tbl input[type=text],.tbl input[type=number],.tbl select{
    width:100%; min-height:44px;
  }
  .tbl--products input[type=number]{ max-width:7rem; }
  .tbl .acts{
    display:flex; flex-wrap:wrap; gap:.4rem;
    margin-top:.6rem; padding-top:.7rem; border-top:1px solid var(--line);
  }
  .tbl .ico{ min-width:44px; min-height:44px; }
  /* the paid tick sits with the field it confirms */
  .tbl td[data-l="Paid"]{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
  .tbl td[data-l="Paid"]::before{ flex:0 0 100%; }
  .tbl td[data-l="Paid"] input[type=text]{ flex:1; width:auto; min-width:8rem; }

  /* the rest of the panel */
  .tiles{ grid-template-columns:repeat(2,1fr); gap:.6rem; }
  .chips{ gap:.35rem; }
  .rowbar{ flex-wrap:wrap; gap:.6rem; }
  .rowbar .btn{ width:100%; justify-content:center; }
  .grid2{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .view > .card{ max-width:none; }
  /* a long From address must wrap the label, not widen the page */
  .card label{ min-width:0; overflow-wrap:anywhere; }
  .bar{ gap:.6rem; }
  .find{ width:100%; }
  .card{ padding:1rem; }
}

/* ── the invoice ────────────────────────────────────────────────── */
.inv{ display:none; }
@media print{
  body{ background:#fff; color:#000; }
  .shell,.gate{ display:none !important; }
  .inv{ display:block !important; padding:24px; font-size:12pt; }
  .inv h1{ font-size:18pt; margin-bottom:2pt; }
  .inv .meta{ color:#444; margin-bottom:16pt; }
  .inv table{ width:100%; border-collapse:collapse; margin-top:10pt; }
  .inv th,.inv td{ border-bottom:1px solid #ccc; padding:6pt 4pt; text-align:left; }
  .inv .num{ text-align:right; }
  .inv tfoot td{ border:0; padding-top:8pt; font-weight:700; }
}