/* ============================================================
   Russell Farm — Admin Console
   Modern, professional design system
   ============================================================ */
:root{
  --bg:#f6f8fb;
  --panel:#ffffff;
  --ink:#0f172a;
  --ink-soft:#334155;
  --muted:#64748b;
  --faint:#94a3b8;
  --border:#e7ecf3;
  --border-strong:#d8e0ea;
  --accent:#4f46e5;
  --accent-rgb:79,70,229;
  --accent2:#4338ca;
  --accent-soft:#eef2ff;
  --ok:#16a34a;--ok-bg:#dcfce7;--ok-ink:#15803d;
  --warn:#d97706;--warn-bg:#fef3c7;--warn-ink:#92400e;
  --err:#dc2626;--err-bg:#fee2e2;--err-ink:#991b1b;
  --info:#4338ca;--info-bg:#e0e7ff;
  --radius:14px;--radius-sm:10px;--radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.04);
  --shadow:0 4px 12px rgba(15,23,42,.06),0 2px 4px rgba(15,23,42,.04);
  --shadow-lg:0 18px 40px rgba(15,23,42,.12);
  --sidebar:#0b1220;
  --sidebar2:#131c30;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  font-size:14px;line-height:1.5;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:none;color:var(--accent2)}
h1{margin:0 0 .3rem;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
h2{margin:1.8rem 0 .8rem;font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
h3{margin:0 0 .2rem;font-size:.95rem;font-weight:700}
small{color:var(--muted);font-weight:500}
.muted{color:var(--muted)}
.field-hint{margin:-.5rem 0 .2rem;font-size:.78rem;color:var(--faint);font-style:italic}

/* ============================================================ layout */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.main-wrap{display:flex;flex-direction:column;min-width:0}

/* ---------------- sidebar ---------------- */
.nav{
  background:linear-gradient(180deg,var(--sidebar) 0%,var(--sidebar2) 100%);
  color:#aeb9cc;display:flex;flex-direction:column;
  padding:1.1rem .85rem;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.nav-brand{display:flex;align-items:center;gap:.65rem;padding:.3rem .5rem 1.1rem;margin-bottom:.4rem;border-bottom:1px solid rgba(255,255,255,.07)}
.brand-mark{
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;
  background:linear-gradient(135deg,var(--accent),#7c6cf2);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:1.1rem;box-shadow:0 4px 12px rgba(79,70,229,.45)
}
.brand-text{display:flex;flex-direction:column;line-height:1.2;font-weight:700;color:#fff;font-size:1rem}
.brand-text small{color:#7e8aa3;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-top:.1rem}
.nav nav{display:flex;flex-direction:column;gap:.12rem;flex:1;margin-top:.4rem}
.nav-group{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#5d6987;font-weight:700;padding:.9rem .7rem .35rem}
.nav nav a{
  color:#aeb9cc;padding:.6rem .7rem;border-radius:10px;display:flex;align-items:center;gap:.7rem;
  font-weight:500;font-size:.9rem;position:relative;transition:background .15s,color .15s
}
.nav nav a .ic{font-size:1.02rem;width:1.3rem;text-align:center;filter:grayscale(.2)}
.nav nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav nav a.active{background:linear-gradient(90deg,rgba(79,70,229,.95),rgba(79,70,229,.7));color:#fff;box-shadow:0 4px 12px rgba(79,70,229,.35)}
.nav nav a.active .ic{filter:none}
.nav-badge{background:#f59e0b;color:#fff;border-radius:999px;padding:.05rem .42rem;font-size:.68rem;font-weight:800;margin-left:auto}
.nav nav a.ext{color:#8b97b0}
.nav nav a.ext .ext-arr{margin-left:auto;font-size:.8rem}

.nav-foot{border-top:1px solid rgba(255,255,255,.08);padding-top:.85rem;margin-top:.6rem;display:flex;flex-direction:column;gap:.7rem}
.nav-user{display:flex;align-items:center;gap:.6rem}
.nav-avatar{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  background:linear-gradient(135deg,#475569,#1e293b);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;border:1.5px solid rgba(255,255,255,.15)
}
.nav-avatar.sm{width:26px;height:26px;flex:0 0 26px;font-size:.72rem}
.nav-user-meta{display:flex;flex-direction:column;line-height:1.25}
.nav-user-meta strong{color:#fff;font-size:.86rem;font-weight:600}
.role-badge{display:inline-block;margin-top:.15rem;background:rgba(79,70,229,.25);color:#c7cffb;
  font-size:.62rem;font-weight:700;padding:.1rem .45rem;border-radius:999px;letter-spacing:.03em;
  border:1px solid rgba(79,70,229,.4);width:fit-content}
.nav-foot-links{display:flex;gap:.4rem;flex-wrap:wrap}
.nav-foot-links a{flex:1;text-align:center;color:#aeb9cc;background:rgba(255,255,255,.05);
  padding:.45rem .5rem;border-radius:8px;font-size:.78rem;font-weight:500;white-space:nowrap}
.nav-foot-links a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-foot-links a.logout{color:#fca5a5}
.nav-foot-links a.logout:hover{background:rgba(220,38,38,.18);color:#fecaca}

/* ---------------- topbar ---------------- */
.topbar{
  position:sticky;top:0;z-index:20;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);display:flex;align-items:center;gap:1rem;
  padding:.85rem 1.8rem;min-height:64px
}
.topbar-title{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.topbar-title h2{margin:0;font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.topbar-sub{font-size:.78rem;color:var(--muted);font-weight:500}
.topbar-actions{display:flex;align-items:center;gap:.7rem}
.tb-store{background:var(--accent-soft);color:var(--accent);padding:.45rem .85rem;border-radius:9px;font-weight:600;font-size:.82rem}
.tb-store:hover{background:#e0e5ff}
.tb-user{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.85rem;color:var(--ink-soft);
  background:#fff;border:1px solid var(--border);padding:.3rem .7rem .3rem .35rem;border-radius:999px;box-shadow:var(--shadow-sm)}
.nav-burger{display:none;font-size:1.4rem;cursor:pointer;color:var(--ink-soft);user-select:none;line-height:1}
.nav-toggle-cb{display:none}

.content{padding:1.8rem;overflow:auto;flex:1}

/* ============================================================ banners */
.banner{padding:.8rem 1.1rem;border-radius:var(--radius-sm);margin-bottom:1.2rem;font-weight:500;font-size:.9rem;border:1px solid transparent;display:flex;align-items:center;gap:.5rem}
.banner.ok{background:var(--ok-bg);color:var(--ok-ink);border-color:#bbf7d0}
.banner.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:#fde68a}
.banner.err{background:var(--err-bg);color:var(--err-ink);border-color:#fecaca}
code{background:#eef2f7;padding:.12rem .4rem;border-radius:5px;font-size:.84em;font-family:ui-monospace,Menlo,monospace;color:var(--ink-soft)}

/* ============================================================ stat cards */
/* ---- Dashboard header with period selector ---- */
.dash-head{display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:.8rem;margin-bottom:1.2rem}
.dash-head h1{margin:0}
.dash-head .period-tabs{margin-bottom:0}
.stat-period-note{color:var(--accent);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.4px}
.stat .lbl small{display:block;margin-top:.1rem}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.1rem}
.stat{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.25rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:transform .18s,box-shadow .18s,border-color .18s
}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);opacity:.85}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--border-strong)}
.stat .num{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.stat .num.sm{font-size:1.15rem;font-weight:700}
.stat .lbl{color:var(--muted);font-size:.82rem;margin-top:.3rem;font-weight:500}
.stat.hl{background:linear-gradient(135deg,#ecfdf5,#f0fdfa)}
.stat.hl::before{background:var(--ok)}
.stat.hl .num{color:var(--ok-ink)}

.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{background:var(--panel);border:1px solid var(--border);padding:.5rem .85rem;border-radius:999px;
  font-size:.83rem;font-weight:500;color:var(--ink-soft);box-shadow:var(--shadow-sm);transition:.15s}
.chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.chip strong{color:var(--ink);font-weight:700}

/* ============================================================ tables */
table.grid{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.grid th,.grid td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--border);font-size:.875rem;vertical-align:middle}
.grid thead th{background:#fafbfd;color:var(--muted);font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0}
.grid tbody tr{transition:background .12s}
.grid tbody tr:last-child td{border-bottom:none}
.grid tbody tr[onclick]{cursor:pointer}
.grid tbody tr[onclick]:hover{background:var(--accent-soft)}
.grid tbody tr:hover{background:#fafbfd}
/* sale days that already happened — de-emphasised so they don't read as upcoming */
.grid tbody tr.is-past{opacity:.6}
.grid tbody tr.is-past:hover{opacity:1}
.grid .right{text-align:right}
.grid .nowrap{white-space:nowrap}
/* /admin/logins puts three block buttons + a history link in one cell. They are
   separate <form>s (each posts a different duration), so they need to sit on one
   line instead of stacking as block-level children. */
.grid .nowrap form{display:inline-block;margin:0}
.grid .nowrap .btn-sm{margin:0 .1rem}
.block-form{margin:.7rem 0 0;align-items:flex-end}

/* ============================================================ Coupons page
   Mobile-first. Each coupon is a CSS-grid card, NOT a table row: on a phone the
   fields stack, on desktop the grid lines them up like columns. A <table> here
   could only scroll sideways. Same approach as .pp-row on the GBP page. */
.cp-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.cp-head h1{margin:0}
.cp-tools{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:1.1rem 0 1rem}
.cp-chips{display:flex;gap:.4rem;flex-wrap:wrap}
.cp-chip{padding:.42rem .85rem;border-radius:999px;border:1.5px solid var(--border);
  background:var(--panel);color:var(--muted);font-weight:600;font-size:.82rem;white-space:nowrap}
.cp-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.cp-chip .cp-n{opacity:.7;font-weight:700}
.cp-chip.active .cp-n{opacity:.9}
.cp-tools input[type=search]{flex:1 1 220px;min-width:0;padding:.5rem .8rem;
  border:1px solid var(--border);border-radius:10px;font-size:.88rem}

.cp-list{display:flex;flex-direction:column;gap:.65rem}
.cp-row{display:grid;gap:.35rem .9rem;padding:.95rem 1.05rem;background:var(--panel);
  border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);
  grid-template-areas:"main" "amt" "meta" "state" "act";align-items:center}
/* A code that cannot be used is dimmed — the whole point of the redesign is that
   this is visible at a glance rather than hidden in a status word. */
.cp-row.is-used,.cp-row.is-dead,.cp-row.is-off{background:#fbfcfe}
.cp-row.is-used .cp-code,.cp-row.is-dead .cp-code{color:var(--muted)}
.cp-main{grid-area:main;min-width:0}
/* Monospace and large: this is read down a phone and typed by hand. */
.cp-code{font-family:ui-monospace,Menlo,monospace;font-size:1.02rem;font-weight:800;
  letter-spacing:.04em;color:var(--ink);word-break:break-all}
.cp-name{font-size:.8rem;color:var(--muted);margin-top:.15rem}
.cp-amt{grid-area:amt;font-size:1.15rem;font-weight:800;color:var(--accent)}
.cp-row.is-used .cp-amt,.cp-row.is-dead .cp-amt{color:var(--muted)}
.cp-meta{grid-area:meta;display:flex;flex-direction:column;gap:.15rem}
.cp-when{font-size:.8rem;color:var(--muted);display:flex;gap:.45rem}
.cp-when.is-hot{color:var(--err-ink);font-weight:600}
.cp-lbl{min-width:2.4rem;font-weight:700;opacity:.75}
.cp-state{grid-area:state}
.cp-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .7rem;
  border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap}
.cp-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.cp-badge.is-ok{background:var(--ok-bg);color:var(--ok-ink)}
.cp-badge.is-used{background:#eef2f7;color:#475569}
.cp-badge.is-dead{background:var(--err-bg);color:var(--err-ink)}
.cp-badge.is-off{background:var(--warn-bg);color:var(--warn-ink)}
.cp-act{grid-area:act;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.cp-act form{display:inline}
.cp-empty{padding:2rem 1rem;text-align:center;color:var(--muted);
  background:var(--panel);border:1px dashed var(--border);border-radius:14px}

/* Desktop: one line, columns aligned across every card. */
@media(min-width:820px){
  .cp-row{grid-template-columns:minmax(0,1.5fr) 6rem minmax(0,1.4fr) 9.5rem auto;
    grid-template-areas:"main amt meta state act"}
  .cp-act{justify-content:flex-end}
}

/* ---- campaign cards (a batch of codes) ---- */
.cp-head-act{display:flex;gap:.5rem;flex-wrap:wrap}
.cp-sep{margin:1.6rem 0 .7rem;font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted)}
/* Collapsed by default: a 200-code batch must not flood the page, but the summary
   answers "how is it going?" without opening it. */
.cmp-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow-sm);margin-bottom:.7rem;overflow:hidden}
.cmp-card>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:.4rem 1rem;flex-wrap:wrap;padding:1rem 1.1rem}
.cmp-card>summary::-webkit-details-marker{display:none}
.cmp-card>summary:hover{background:#fafbfd}
.cmp-name{font-weight:800;font-size:1rem;color:var(--ink)}
.cmp-meta{font-size:.8rem;color:var(--muted)}
.cmp-use{margin-left:auto;font-weight:800;font-size:.9rem;color:var(--accent);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.cmp-caret{color:var(--muted);transition:transform .18s}
.cmp-card[open] .cmp-caret{transform:rotate(180deg)}
.cmp-body{padding:0 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.6rem}
.cmp-del{margin-top:.4rem}
@media(max-width:700px){
  .cmp-card>summary{gap:.3rem}
  .cmp-name,.cmp-meta{flex:1 1 100%}
  .cmp-use{margin-left:0}
}
/* Uses is the number that decides whether a code still works — it sits under the
   amount rather than in the metadata column so it cannot be missed. */
.cp-uses{font-size:.76rem;font-weight:700;color:var(--muted);margin-top:.15rem;
  font-variant-numeric:tabular-nums}
.cp-badge.is-soon{background:var(--info-bg);color:var(--info)}
.cp-row.is-soon{background:#fbfcfe}

/* ---- create / edit dialog ---- */
.cp-dlg{border:none;border-radius:18px;padding:0;box-shadow:var(--shadow-lg);
  width:min(440px,calc(100vw - 2rem))}
.cp-dlg::backdrop{background:rgba(15,23,42,.55)}
.cp-form{padding:1.5rem 1.6rem;background:var(--panel);border-radius:18px}
.cp-form h3{margin:0 0 1rem}
.cp-form label{display:block;margin-bottom:.85rem;font-weight:600;font-size:.86rem}
.cp-form input,.cp-form select{width:100%;padding:.6rem .75rem;margin-top:.3rem;
  border:1px solid var(--border);border-radius:10px;font-size:.95rem;font-family:inherit}
.cp-form input[readonly]{background:#f4f6fa;color:var(--muted)}
.cp-two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.cp-form-act{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.2rem}

/* ---- coupon history dialog ---- */
.hs-body{max-height:min(56vh,420px);overflow-y:auto;margin-bottom:.4rem}
.hs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.hs-item{display:grid;grid-template-columns:auto 1fr auto;gap:.2rem .7rem;align-items:baseline;
  padding:.6rem .75rem;border-radius:10px;background:#fafbfd;border:1px solid var(--border)}
/* A colour per action, so a log of twenty rows can be skimmed for the one that matters. */
.hs-item.is-redeem{background:var(--err-bg);border-color:#fca5a5}
.hs-item.is-release{background:var(--warn-bg);border-color:#fcd34d}
.hs-at{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.hs-act{font-weight:700;font-size:.86rem}
.hs-who{font-size:.82rem;font-weight:600;color:var(--accent);white-space:nowrap}
.hs-sub{grid-column:1/-1;font-size:.76rem;color:var(--muted)}

/* ---- coupon QR dialog (the same voucher the customer was emailed) ---- */
.qr-dlg{border:none;border-radius:18px;padding:0;box-shadow:var(--shadow-lg);background:transparent}
.qr-dlg::backdrop{background:rgba(15,23,42,.55)}
.qr-card{background:#fff;border:2px dashed var(--accent);border-radius:18px;padding:1.6rem 1.8rem;text-align:center;min-width:260px}
.qr-card.is-dead{border-color:var(--border-strong);opacity:.85}
.qr-amt{font-size:2.1rem;font-weight:800;color:var(--accent);line-height:1}
.qr-card.is-dead .qr-amt{color:var(--muted)}
.qr-sub{font-size:.8rem;color:var(--muted);margin-top:.15rem}
.qr-img{display:block;margin:1rem auto .8rem;border-radius:10px;background:#fff}
/* Monospace + tracking: this code gets read down a phone and typed by hand. */
.qr-code{font-family:ui-monospace,Menlo,monospace;font-size:1.15rem;font-weight:800;letter-spacing:.12em;color:var(--ink);word-break:break-all}
.qr-exp{margin-top:.5rem;font-size:.85rem;font-weight:600;color:var(--muted)}
.qr-exp.is-dead{color:var(--err-ink)}
.qr-actions{display:flex;gap:.5rem;justify-content:center;margin-top:1.1rem}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:.8rem;color:var(--muted)}
.thumb img{width:44px;height:44px;object-fit:cover;border-radius:9px;background:#eef2f7;border:1px solid var(--border)}

/* ============================================================ toggle pill — Bật/Tắt sản phẩm */
.toggle-pill{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.15rem .6rem .15rem .2rem;
  border-radius:999px;border:none;cursor:pointer;
  font-size:.74rem;font-weight:700;white-space:nowrap;
  background:none;font-family:inherit;
  -webkit-appearance:none;appearance:none;
  transition:opacity .12s;
}
.toggle-pill:active{opacity:.75}
/* switch track */
.tgl-track{
  position:relative;width:30px;height:17px;border-radius:99px;flex-shrink:0;
  transition:background .2s;
}
.tgl-thumb{
  position:absolute;top:2.5px;left:2.5px;
  width:12px;height:12px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);
  transition:transform .2s;
}
/* ON — green */
.tgl-on{background:#dcfce7}
.tgl-on .tgl-track{background:#16a34a}
.tgl-on .tgl-thumb{transform:translateX(13px)}
.tgl-on .tgl-label{color:#15803d;font-weight:700}
.tgl-on:hover{background:#fee2e2}
.tgl-on:hover .tgl-track{background:#dc2626}
.tgl-on:hover .tgl-label{color:#991b1b}
/* OFF — gray */
.tgl-off{background:#e2e8f0}
.tgl-off .tgl-track{background:#94a3b8}
.tgl-off .tgl-thumb{transform:translateX(0)}
.tgl-off .tgl-label{color:#64748b;font-weight:600}
.tgl-off:hover{background:#dcfce7}
.tgl-off:hover .tgl-track{background:#16a34a}
.tgl-off:hover .tgl-label{color:#15803d}
.col-status-toggle{white-space:nowrap;vertical-align:middle}

/* ============================================================ type toggle — Theo lịch / Tồn kho */
.type-toggle{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.22rem .6rem;border-radius:999px;
  font-size:.72rem;font-weight:700;white-space:nowrap;
  cursor:pointer;font-family:inherit;
  border:1.5px solid transparent;transition:background .15s,color .15s,border-color .15s;
  -webkit-appearance:none;appearance:none;
}
.type-sched{background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe}
.type-sched:hover{background:#dcfce7;color:#15803d;border-color:#86efac}
.type-stock{background:#dcfce7;color:#15803d;border-color:#86efac}
.type-stock:hover{background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe}
/* cursor:default when it's a span (trash view) */
span.type-toggle{cursor:default}
span.type-toggle:hover{background:initial;color:initial;border-color:initial}
span.type-sched:hover{background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe}
span.type-stock:hover{background:#dcfce7;color:#15803d;border-color:#86efac}

/* ============================================================ inline qty edit */
.col-qty{vertical-align:middle;min-width:110px}
.qty-wrap{display:inline-flex;align-items:center;gap:.3rem}
.qty-input{
  width:58px;padding:.22rem .35rem;
  font-size:.82rem;font-family:inherit;color:var(--ink);
  border:1px solid var(--border);border-radius:7px;
  text-align:center;background:#fff;
  transition:border-color .15s;
}
.qty-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(79,70,229,.12)}
.qty-save{
  padding:.22rem .45rem;font-size:.78rem;font-weight:700;
  background:var(--ok);color:#fff;border:none;border-radius:7px;
  cursor:pointer;transition:background .15s;font-family:inherit;
}
.qty-save:hover{background:#15803d}
.qty-badge{margin-top:.25rem;font-size:.68rem}

/* ============================================================ badges */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;
  font-size:.72rem;font-weight:600;background:#eef2f7;color:#475569;border:1px solid transparent;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
/* payment status badges */
.badge.PAID{background:var(--ok-bg);color:var(--ok-ink)}
.badge.AWAITING_PAYMENT{background:var(--warn-bg);color:var(--warn-ink)}
.badge.CANCELLED{background:var(--err-bg);color:var(--err-ink)}
.badge.REFUNDED,.badge.PARTIALLY_REFUNDED{background:var(--info-bg);color:var(--info)}
/* fulfillment status badges */
.badge.fs-AWAITING_PROCESSING{background:#f1f5f9;color:#475569}
.badge.fs-PROCESSING{background:#dbeafe;color:#1d4ed8}
.badge.fs-READY_FOR_PICKUP{background:#d1fae5;color:#065f46;border-color:#6ee7b7}
.badge.fs-SHIPPED{background:#ccfbf1;color:#115e59}
.badge.fs-DELIVERED{background:var(--ok-bg);color:var(--ok-ink);border-color:#86efac}
.badge.fs-WILL_NOT_DELIVER{background:var(--err-bg);color:var(--err-ink)}
.badge.fs-RETURNED{background:#fff7ed;color:#c2410c;border-color:#fdba74}
/* column sizing hints for orders table */
.col-customer{font-weight:500;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-email{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft);font-size:.85rem}

/* ============================================================ buttons */
button,.btn-new{font-family:inherit}
button{cursor:pointer;padding:.55rem 1rem;border:1px solid var(--accent);background:var(--accent);color:#fff;
  border-radius:9px;font-size:.86rem;font-weight:600;transition:.15s;box-shadow:var(--shadow-sm)}
button:hover{background:var(--accent2);border-color:var(--accent2);transform:translateY(-1px)}
button:active{transform:translateY(0)}
button.link{background:none;border:none;color:var(--accent);padding:.3rem .4rem;box-shadow:none;font-weight:600}
button.link:hover{background:var(--accent-soft);transform:none;text-decoration:none}
.primary{padding:.7rem 1.5rem;margin-top:.5rem;font-size:.92rem}
.btn-new{display:inline-flex;align-items:center;gap:.35rem;background:var(--accent);color:#fff;
  padding:.55rem 1rem;border-radius:9px;font-size:.86rem;font-weight:600;box-shadow:var(--shadow-sm);transition:.15s}
.btn-new:hover{background:var(--accent2);transform:translateY(-1px);color:#fff}
button.danger{background:var(--err);border-color:var(--err);margin-top:.8rem}
button.danger:hover{background:#b91c1c;border-color:#b91c1c}

/* page head */
.page-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.page-head h1{margin:0}

/* ============================================================ filters / forms */
.filters{display:flex;gap:.6rem;margin-bottom:1.2rem;flex-wrap:wrap;align-items:center;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:.85rem 1rem;box-shadow:var(--shadow-sm)}
.filters input,.filters select,.form input,.form select,.form textarea{
  padding:.55rem .7rem;border:1px solid var(--border-strong);border-radius:9px;font-size:.88rem;background:#fff;
  font-family:inherit;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.filters input:focus,.filters select:focus,.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14)}
.filters input[type=search]{min-width:260px}

.edit-layout{display:grid;grid-template-columns:1fr 340px;gap:1.5rem;align-items:start}
.form{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem;
  display:flex;flex-direction:column;gap:.85rem;box-shadow:var(--shadow-sm)}
.form h3{margin:.4rem 0 .1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);color:var(--ink)}
.form h3:first-child{margin-top:0}
.form label{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;color:var(--muted);font-weight:600}
.form input,.form select,.form textarea{color:var(--ink);font-weight:500}
.form label.check{flex-direction:row;align-items:center;gap:.5rem;color:var(--ink);font-weight:500}
.form textarea{font-family:inherit;font-size:.88rem;resize:vertical}
.settings-form h3{margin-top:1rem}
.media img{width:100%;max-width:300px;border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.noimg{width:100%;max-width:300px;height:200px;background:#eef2f7;display:flex;align-items:center;justify-content:center;color:var(--faint);border-radius:var(--radius);border:1px dashed var(--border-strong)}
.media .meta{margin-top:.6rem;font-size:.84rem;color:var(--muted)}
.info-box{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;
  display:flex;flex-direction:column;gap:.4rem;font-size:.88rem;box-shadow:var(--shadow-sm)}
.info-box .addr code{white-space:pre-wrap;word-break:break-word}
/* Pickup QR card: image beside its code, wrapping on a narrow screen. */
.qr-box{flex-direction:row;align-items:flex-start;gap:1.1rem;flex-wrap:wrap}
.qr-img{border:1px solid var(--border);border-radius:10px;background:#fff;flex:0 0 auto}
.qr-side{flex:1;min-width:220px}
.qr-side code{word-break:break-all}

/* ============================================================ categories page */
.cat-new-panel{max-width:480px;margin-bottom:1.4rem}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.2rem;margin-top:1rem}
.cat-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden}
/* card header */
.cat-card-head{display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1rem;gap:.6rem}
.cat-card-meta{display:flex;align-items:center;gap:.55rem;flex:1;min-width:0}
.cat-card-name{font-weight:700;font-size:1rem;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.cat-card-acts{display:flex;align-items:center;gap:.1rem;flex-shrink:0}
.cat-card-desc{padding:.3rem 1rem .55rem;font-size:.82rem;color:var(--muted);
  border-bottom:1px solid var(--border)}
/* inline edit form inside card */
.cat-edit-form{padding:.85rem 1rem;border-bottom:1px solid var(--border);background:#f9fafb}
.cat-edit-form form{display:flex;flex-direction:column;gap:.55rem}
.cat-edit-form label{display:flex;flex-direction:column;gap:.25rem;font-size:.78rem;
  font-weight:600;color:var(--muted)}
.cat-edit-form input,.cat-edit-form textarea{font-family:inherit;font-size:.86rem;color:var(--ink);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:.35rem .55rem;
  background:#fff;width:100%}
.cat-edit-form textarea{resize:vertical}
.cat-edit-footer{display:flex;align-items:center;gap:.8rem;margin-top:.2rem}
/* product list inside card */
.cat-products-section{flex:1;display:flex;flex-direction:column;border-top:1px solid var(--border)}
.cat-section-label{display:flex;align-items:center;gap:.45rem;padding:.5rem 1rem;
  font-size:.7rem;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.cat-count-badge{background:var(--border);color:var(--muted);border-radius:999px;
  padding:.05rem .45rem;font-size:.68rem;font-weight:700}
.cat-product-row{display:flex;align-items:center;gap:.55rem;
  padding:.38rem 1rem;transition:background .12s}
.cat-product-row:hover{background:var(--bg)}
.cat-product-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.cat-product-dot.dot-on{background:var(--ok)}
.cat-product-dot.dot-off{background:var(--faint)}
.cat-product-name{flex:1;font-size:.87rem;color:var(--ink-soft);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-empty{padding:.5rem 1rem .9rem;font-size:.83rem;color:var(--faint);font-style:italic}
/* add-product row */
.cat-add-row{padding:.6rem 1rem;border-top:1px solid var(--border);background:var(--bg)}
.cat-add-form{display:flex;gap:.5rem;align-items:center}
.cat-add-form select{flex:1;min-width:0;font-size:.83rem;padding:.36rem .5rem;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;color:var(--ink)}
.cat-all-added{font-size:.78rem;color:var(--ok-ink);font-style:italic}
/* utility buttons */
.btn-xs{padding:.34rem .8rem;font-size:.78rem;font-weight:600;border-radius:var(--radius-sm);
  cursor:pointer;border:none;background:var(--accent);color:#fff;white-space:nowrap;transition:background .15s}
.btn-xs:hover{background:var(--accent2)}
.btn-icon{background:none;border:none;cursor:pointer;padding:.25rem .4rem;border-radius:7px;
  font-size:.88rem;color:var(--muted);transition:background .15s,color .15s;line-height:1}
.btn-icon:hover{background:var(--accent-soft);color:var(--accent)}
.btn-icon.btn-icon-del:hover{background:var(--err-bg);color:var(--err)}
/* empty state */
.empty-state{text-align:center;padding:4rem 2rem;color:var(--muted)}
.empty-icon{font-size:3rem;margin-bottom:.8rem}
.empty-msg{font-size:1.1rem;font-weight:600;color:var(--ink-soft)}
.empty-sub{margin-top:.4rem;font-size:.88rem}

/* inline edit (coupons) */
.inline-edit{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.inline-edit input[type=text],.inline-edit input:not([type]){padding:.4rem .55rem;border:1px solid var(--border-strong);border-radius:7px}
.inline-edit input[name=name]{min-width:120px}
.inline-edit select{padding:.4rem;border:1px solid var(--border-strong);border-radius:7px}
.inline-edit .check{font-size:.8rem;color:var(--muted)}
.inline-edit button{padding:.4rem .7rem;font-size:.8rem}
fieldset.cats{border:1px solid var(--border);border-radius:10px;padding:.7rem .9rem}
fieldset.cats legend{font-size:.78rem;color:var(--muted);padding:0 .35rem;font-weight:700}
fieldset.cats .check{color:var(--ink);font-size:.86rem}

/* ============================================================ bulk bar (products) */
.bulk-bar{display:flex;align-items:center;gap:1rem;margin:0 0 1rem;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:.7rem 1rem;box-shadow:var(--shadow-sm)}
.bulk-bar .check{display:flex;align-items:center;gap:.45rem;font-size:.88rem;color:var(--ink-soft);font-weight:500}
#selCount{font-size:.83rem;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:.2rem .6rem;border-radius:999px}
.btn-bulk-del{background:var(--err);border-color:var(--err);margin-left:auto}
.btn-bulk-del:hover{background:#b91c1c;border-color:#b91c1c}
.btn-restore{background:var(--ok);border-color:var(--ok);margin-left:auto}
.btn-restore:hover{background:#15803d;border-color:#15803d}
.rowchk,#selAll{width:17px;height:17px;cursor:pointer;accent-color:var(--accent)}

/* ============================================================ pager */
.pager{display:flex;gap:.5rem;align-items:center;justify-content:center;margin-top:1.4rem;color:var(--muted);font-weight:500;flex-wrap:wrap}
.pager a{padding:.4rem .8rem;border:1px solid var(--border-strong);border-radius:9px;background:#fff;font-weight:600;box-shadow:var(--shadow-sm)}
.pager a:hover{border-color:var(--accent);color:var(--accent)}
.pager span{padding:0 .4rem;font-size:.88rem}
.pager-cur{padding:.4rem .8rem;border-radius:9px;background:var(--accent);color:#fff !important;font-weight:700;font-size:.9rem}
.pager-ellipsis{color:var(--muted);padding:0 .1rem}
.pager-info{font-size:.82rem;color:var(--muted);padding:0 .3rem}
.pager-jump{display:inline-flex;align-items:center;gap:.3rem;margin-left:.4rem}
.pager-jump-input{width:4.2rem;padding:.35rem .4rem;border:1px solid var(--border-strong);border-radius:8px;font-size:.88rem;text-align:center;background:#fff}
.pager-jump-input:focus{outline:none;border-color:var(--accent)}
.back{display:inline-flex;align-items:center;gap:.3rem;margin-bottom:1rem;color:var(--muted);font-weight:600;font-size:.86rem}
.back:hover{color:var(--accent)}

/* ============================================================ gallery admin */
.gallery-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.1rem}
.ga-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s}
.ga-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ga-card img{width:100%;height:160px;object-fit:cover}
.ga-form{padding:.7rem;display:flex;flex-direction:column;gap:.5rem}
.ga-form textarea{border:1px solid var(--border-strong);border-radius:8px;padding:.45rem;font-family:inherit;font-size:.85rem;resize:vertical}
.ga-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.ga-row input[type=number]{padding:.3rem;border:1px solid var(--border-strong);border-radius:6px;width:70px}
.ga-card>form:last-child{padding:0 .7rem .7rem;text-align:right}
.loc-list{display:flex;flex-direction:column;gap:.8rem}

/* ============================================================ period tabs */
.period-tabs{display:inline-flex;gap:.25rem;background:#eef2f7;padding:.3rem;border-radius:11px;margin-bottom:1rem;border:1px solid var(--border)}
.period-tabs a{padding:.45rem 1rem;border-radius:8px;color:var(--muted);font-weight:600;font-size:.85rem;transition:.15s}
.period-tabs a:hover{color:var(--ink)}
.period-tabs a.active{background:#fff;color:var(--accent);box-shadow:var(--shadow-sm)}
.period-table{max-width:560px}
.period-table td:nth-child(3),.period-table th:nth-child(3){text-align:right}

/* ============================================================ login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 50% -10%,#1e2a4a 0%,#0b1220 55%);padding:1.5rem}
.login-card{background:#fff;padding:2.4rem 2.2rem;border-radius:var(--radius-lg);width:380px;max-width:100%;
  display:flex;flex-direction:column;gap:.85rem;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.login-card h1{margin:0;text-align:center;font-size:1.55rem}
.login-card .sub{text-align:center;color:var(--muted);margin:0 0 .6rem;font-weight:500}
.login-card label{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;color:var(--muted);font-weight:600}
.login-card input{padding:.7rem .85rem;border:1px solid var(--border-strong);border-radius:10px;font-size:.95rem;font-family:inherit;transition:.15s}
.login-card input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15)}
.login-card .remember{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--muted);font-weight:500}
.login-card .remember input{width:auto}
.back-store{display:block;text-align:center;margin-top:.8rem;color:var(--accent);font-size:.9rem;font-weight:600}
.back-store:hover{color:var(--accent2);text-decoration:underline}

/* ============================================================ responsive */
/* Backdrop — <label for="navToggle"> so Safari fires natively; CSS selector shows/hides */
.nav-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:rgba(0,0,0,.35);-webkit-tap-highlight-color:transparent}
.nav-toggle-cb:checked ~ .nav-backdrop{display:block}
@media(max-width:960px){
  .shell{grid-template-columns:1fr}
  .nav{position:fixed;left:0;top:0;width:248px;z-index:60;transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--shadow-lg)}
  .nav-toggle-cb:checked ~ .shell .nav{transform:translateX(0)}
  .nav-burger{display:block}
  .edit-layout{grid-template-columns:1fr}
  .topbar{padding:.75rem 1.1rem}
  .content{padding:1.2rem}
  .tb-store,.tb-user{display:none}
}
@media(max-width:560px){
  .topbar-sub{display:none}
  .filters input[type=search]{min-width:0;width:100%}
}

/* ============================================================ Disabled product rows */
tr.row-disabled{background:#f5f5f7 !important;color:var(--muted)}
tr.row-disabled a{color:var(--muted)}
tr.row-disabled img{opacity:.45;filter:grayscale(.6)}

/* ============================================================ PYO helpers */
.btn-ghost{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem 1rem;
  border:1.5px solid var(--border-strong);border-radius:var(--radius);background:#fff;
  color:var(--ink);font-weight:600;font-size:.82rem;cursor:pointer;text-decoration:none;
  transition:.15s;line-height:1}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-ghost.sm{font-size:.78rem;padding:.35rem .7rem}
.section-divider{border:none;border-top:1.5px solid var(--border);margin:1.8rem 0}
.page-sub-head{display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;flex-wrap:wrap;margin-bottom:.8rem}
.page-sub-head h2{margin:0;font-size:1.05rem;color:var(--ink)}
.inline-edit{display:inline-block}
.inline-edit summary{cursor:pointer;list-style:none;user-select:none}
.inline-edit summary::-webkit-details-marker{display:none}
.filter-bar{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}
.filter-chip{padding:.4rem .9rem;border:1.5px solid var(--border);border-radius:99px;
  font-size:.82rem;font-weight:600;color:var(--muted);text-decoration:none;transition:.15s}
.filter-chip:hover,.filter-chip.active{border-color:var(--accent);color:var(--accent);background:#fff5f8}
.btn-sm{display:inline-flex;align-items:center;gap:.25rem;padding:.3rem .75rem;border:1.5px solid var(--border-strong);
  border-radius:8px;font-size:.8rem;font-weight:600;color:var(--text);background:#fff;text-decoration:none;
  cursor:pointer;transition:.15s;white-space:nowrap}
.btn-sm:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm.danger{background:#fee2e2;color:#dc2626;border:1px solid #fca5a5}
.btn-sm.danger:hover{background:#fecaca}

/* ============================================================ GBP location cards */
/* Collapsed by default: two profiles on one page is a lot of form, and most
   visits only need one of them. <details> keeps it CSS-only, no JS state. */
.loc-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);
  box-shadow:var(--shadow-sm);margin-bottom:.9rem;overflow:hidden;
  transition:box-shadow .18s,border-color .18s}
.loc-card:hover{border-color:var(--border-strong)}
.loc-card[open]{box-shadow:var(--shadow);border-color:var(--border-strong)}

/* Row must be a comfortable click target, and the native disclosure triangle has
   to die in every engine (list-style covers Blink/Gecko, ::-webkit- the rest) —
   otherwise it renders next to our own chevron and you see two arrows. */
.loc-card>summary{list-style:none;cursor:pointer;padding:1.05rem 1.25rem;min-height:78px;
  display:flex;align-items:center;gap:1rem;transition:background .15s;user-select:none}
.loc-card>summary::-webkit-details-marker{display:none}
.loc-card>summary::marker{content:""}
.loc-card>summary:hover{background:var(--accent-soft)}
.loc-card[open]>summary{background:var(--accent-soft);border-bottom:1px solid var(--border)}

.loc-card>summary .chev{flex:0 0 auto;width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;
  background:var(--panel);border:1px solid var(--border-strong);color:var(--muted);
  transition:transform .2s,color .15s,border-color .15s}
.loc-card[open]>summary .chev{transform:rotate(90deg);color:var(--accent);border-color:var(--accent)}

.loc-card>summary .loc-mark{flex:0 0 44px;width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,var(--accent),#7c6cf2);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  box-shadow:0 4px 12px rgba(79,70,229,.32)}
.loc-card>summary.off .loc-mark{background:linear-gradient(135deg,#94a3b8,#64748b);box-shadow:none}

.loc-card>summary .loc-txt{min-width:0;display:flex;flex-direction:column;gap:.15rem}
.loc-card>summary .loc-name{font-weight:700;font-size:1rem;color:var(--ink);letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loc-card>summary .loc-sub{color:var(--muted);font-size:.79rem;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loc-card>summary .spacer{margin-left:auto}
.loc-card>summary .loc-badges{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  justify-content:flex-end;flex:0 0 auto}

@media(max-width:760px){
  .loc-card>summary{flex-wrap:wrap;gap:.7rem;padding:.9rem 1rem}
  .loc-card>summary .loc-txt{flex:1 1 100%;order:2}
  .loc-card>summary .loc-badges{flex:1 1 100%;order:3;justify-content:flex-start}
}

.loc-body{padding:0 1.25rem 1.4rem}
.loc-step{margin:1.4rem 0 .7rem;font-size:1rem;font-weight:700;display:flex;align-items:center;gap:.55rem;
  padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.loc-step .n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:var(--accent);color:#fff;font-size:.76rem;font-weight:800;flex:0 0 auto}

/* ---- post composer ---- */
.composer textarea{width:100%;font-family:inherit;font-size:.92rem;line-height:1.55;resize:vertical}
.ph-bar{display:flex;flex-wrap:wrap;gap:.35rem;margin:.45rem 0}
.ph-chip{padding:.2rem .55rem;border-radius:999px;border:1px solid var(--border-strong);
  background:var(--panel);color:var(--muted);font-size:.74rem;font-weight:700;cursor:pointer;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ph-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.char-count{font-size:.76rem;color:var(--muted);text-align:right}
.char-count.over{color:#dc2626;font-weight:700}

/* thumbnail picker — a dropdown of filenames tells you nothing about a photo */
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.5rem;
  max-height:260px;overflow-y:auto;padding:.5rem;border:1px solid var(--border);border-radius:10px}
.img-pick{position:relative;cursor:pointer;border-radius:8px;overflow:hidden;aspect-ratio:1;
  border:2px solid transparent;transition:.15s;background:var(--accent-soft)}
.img-pick img{width:100%;height:100%;object-fit:cover;display:block}
.img-pick:hover{border-color:var(--border-strong)}
.img-pick.sel{border-color:var(--accent)}
.img-pick .tick{position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:.7rem;display:none;align-items:center;justify-content:center}
.img-pick.sel .tick{display:flex}

/* live preview shaped like the real Google post card */
.gpost{max-width:340px;border:1px solid var(--border);border-radius:14px;overflow:hidden;
  background:var(--panel);box-shadow:var(--shadow-sm)}
.gpost .ph{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--accent-soft)}
.gpost .body{padding:.8rem .9rem}
.gpost .txt{font-size:.87rem;line-height:1.5;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.gpost .btn-fake{margin-top:.7rem;display:inline-block;color:#1a73e8;font-weight:600;font-size:.85rem}
.gpost .more{font-size:.72rem;color:var(--muted);margin-top:.35rem}

/* "Đã bán xong" — the counter-side action that ends an open-ended day.
   Deliberately louder than Sửa/Xóa: it is the button the operator hunts for with
   one hand while serving, and it publishes to Google. Undo is quiet by contrast. */
.btn-soldout{padding:.35rem .6rem;font-size:.78rem;font-weight:600;cursor:pointer;
  border:none;border-radius:8px;color:#fff;background:linear-gradient(135deg,#db2777,#e11d48);
  box-shadow:0 1px 2px rgba(0,0,0,.12);transition:.15s}
.btn-soldout:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-soldout.undo{background:none;color:var(--muted);border:1px solid var(--border);
  box-shadow:none;font-weight:500}
.btn-soldout.undo:hover{color:var(--ink);border-color:var(--border-strong);transform:none;filter:none}
/* a sold-out row reads as finished, like a past day */
tr.is-soldout td{opacity:.72}

/* per-day publish + refresh actions in the Google posts blocks */
.btn-post-one{padding:.4rem .75rem;font-size:.78rem;font-weight:600;cursor:pointer;
  border:none;border-radius:8px;color:#fff;background:var(--accent);transition:.15s}
.btn-post-one:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.btn-post-one:disabled{opacity:.5;cursor:not-allowed}
.btn-refresh{padding:.3rem .55rem;font-size:.75rem;background:#0891b2;border-color:#0891b2}
/* a post whose wording no longer matches the schedule — show the replacement text
   inline so "Cập nhật" is a decision, not a leap of faith */
.post-stale{margin-top:.5rem;padding:.5rem .6rem;border-radius:8px;
  background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-size:.78rem}
.post-stale .new-text{margin-top:.3rem;color:var(--ink);white-space:pre-wrap;
  font-size:.8rem;line-height:1.45}

/* "changes push to Google automatically" note on the sale-day form */
.sync-hint{font-size:.82rem;margin:.2rem 0 0;padding:.55rem .75rem;border-radius:8px;
  background:var(--accent-soft);border:1px solid var(--border);line-height:1.55}
.sync-hint a{font-weight:600}

/* ---- Google sync status: "is Maps showing the right thing?" ---------------- */
.gs-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.8rem;
  margin-bottom:1rem}
.gs-card{border:1px solid var(--border);border-left-width:4px;border-radius:12px;padding:.85rem 1rem;
  background:var(--panel)}
.gs-card.good{border-left-color:#16a34a;background:#f0fdf4}
.gs-card.warn{border-left-color:#d97706;background:#fffbeb}
.gs-card.bad{border-left-color:#dc2626;background:#fef2f2}
.gs-h{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.gs-v{font-size:1.15rem;font-weight:800;margin:.2rem 0 .25rem;color:var(--ink)}
.gs-s{font-size:.82rem;line-height:1.5;color:var(--muted)}

.gs-table{width:100%;border-collapse:collapse;font-size:.86rem;margin-top:.2rem}
.gs-table th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);padding:.4rem .6rem;border-bottom:1px solid var(--border)}
.gs-table td{padding:.5rem .6rem;border-bottom:1px solid var(--border)}
.gs-table tr.row-diff td{background:#fef2f2}
.gs-table tr.row-today td{font-weight:600}
.gs-now{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:var(--accent);color:#fff;border-radius:999px;padding:.08rem .4rem;margin-left:.35rem}
.gs-ok{color:#16a34a;font-weight:700}
.gs-no{color:#dc2626;font-weight:700;font-size:.8rem}
/* the push button only shouts when there is actually something to push */
.gs-push-need{background:linear-gradient(135deg,#dc2626,#e11d48);border:none}
.gs-adv{margin-top:1.2rem;border-top:1px solid var(--border);padding-top:.8rem}
.gs-adv>summary{cursor:pointer;font-weight:600;font-size:.86rem;color:var(--muted);
  list-style:none;user-select:none}
.gs-adv>summary::-webkit-details-marker{display:none}
.gs-adv>summary:hover{color:var(--ink)}
.gs-card.off{border-left-color:#94a3b8;background:#f8fafc}

/* ---- post plan: one row per upcoming sale day ----------------------------- */
.pp-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.pp-row{display:grid;grid-template-columns:130px 1fr auto;gap:.6rem 1rem;align-items:start;
  padding:.7rem .9rem;border:1px solid var(--border);border-left-width:3px;border-radius:10px;
  background:var(--panel);font-size:.87rem}
.pp-row.st-pending{border-left-color:#6366f1}
.pp-row.st-stale,.pp-row.st-gone{border-left-color:#dc2626;background:#fef2f2}
.pp-row.st-posted{border-left-color:#16a34a}
.pp-row.st-skipped,.pp-row.st-not_needed,.pp-row.st-unknown{border-left-color:#cbd5e1;opacity:.72}
.pp-day{padding-top:.1rem}
.pp-b{font-weight:700;font-size:.83rem}
.pp-b.ok{color:#15803d} .pp-b.warn{color:#b91c1c}
.pp-b.todo{color:#4f46e5} .pp-b.off{color:var(--muted)}
.pp-why{font-size:.8rem;color:var(--muted);margin-top:.22rem;line-height:1.5}
.pp-why em{color:var(--muted)} .pp-why strong{color:var(--ink)}
.pp-act{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
.btn-skip{padding:.3rem .55rem;font-size:.75rem;background:none;color:var(--muted);
  border:1px solid var(--border);border-radius:8px;cursor:pointer;font-weight:500}
.btn-skip:hover{color:var(--ink);border-color:var(--border-strong)}
@media(max-width:820px){
  .pp-row{grid-template-columns:1fr}
  .pp-act{justify-content:flex-start}
}

/* the row that just changed — a short pulse, then it settles into its new state */
.pp-row.just-changed{animation:ppFlash 2.4s ease-out 1}
@keyframes ppFlash{
  0%,28%{box-shadow:0 0 0 3px rgba(99,102,241,.45);transform:translateX(2px)}
  14%{transform:translateX(-2px)}
  100%{box-shadow:0 0 0 0 rgba(99,102,241,0);transform:none}
}
@media(prefers-reduced-motion:reduce){
  .pp-row.just-changed{animation:none;box-shadow:0 0 0 3px rgba(99,102,241,.45)}
}

/* ---- Orders list: inline status change + delete ---------------------------
   The <select> wears the .badge classes so a status keeps its colour while
   being editable. .badge::before draws a dot via content, which a <select>
   cannot render, and the native arrow has to go or it fights the pill shape. */
.qs-form{margin:0}
.qs-select{-webkit-appearance:none;appearance:none;border:1px solid transparent;
  cursor:pointer;font:inherit;font-size:.72rem;font-weight:700;letter-spacing:.02em;
  padding:.2rem 1.4rem .2rem .6rem;max-width:11rem;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 12px) 52%, calc(100% - 8px) 52%;
  background-size:4px 4px, 4px 4px;background-repeat:no-repeat}
.qs-select::before{display:none}
.qs-select:hover{border-color:currentColor}
.qs-select:focus{outline:2px solid var(--accent);outline-offset:1px}
.qs-select.fs-none{background-color:var(--surface-2,#f1f5f9);color:var(--muted,#64748b)}
/* the option list is drawn by the OS — force readable colours, or a dark pill's
   inherited light text lands on the browser's white popup */
.qs-select option{background:#fff;color:#1e293b;font-weight:600}

.col-del{width:1%;white-space:nowrap;text-align:right}
.btn-del{background:transparent;border:1px solid transparent;border-radius:8px;
  cursor:pointer;font-size:1rem;line-height:1;padding:.3rem .45rem;opacity:.45;
  transition:opacity .15s,background .15s,border-color .15s}
tr:hover .btn-del{opacity:1}
.btn-del:hover{background:var(--err-bg,#fee2e2);border-color:var(--err-ink,#b91c1c)}