/* Admin and sticker pages. Builds on app.css (colours, font, .list, .field, .link-btn). */

/* ---- admin ---- */
.admin{padding:0 18px 48px}
.admin-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.admin-links .link-btn{text-decoration:none;color:var(--ink)}
.admin h1{font-size:44px;margin:0 0 16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px}
.hint{margin:0 0 12px;color:var(--muted);font-size:14px}
.hint b{color:var(--ink);overflow-wrap:anywhere}
.error{color:var(--live);font-size:13px;margin:0 0 12px;min-height:1em}
.error:empty{display:none}
.btn{display:inline-block;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:11px 16px;border-radius:12px;font-weight:700;text-decoration:none;font-size:15px}
.btn.primary{background:var(--court);color:#fff;border-color:var(--court)}
.btn.danger{background:var(--live);color:#fff;border-color:var(--live)}
.btn:disabled{opacity:.6;cursor:default}
.field input[type=password],.field select,.field input[type=file]{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font:inherit;color:inherit}
.health{width:100%;border-collapse:collapse;font-size:14px}
.health th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);padding:12px 15px 8px}
.health td{padding:12px 15px;border-top:1px solid var(--line)}
.health td:first-child{font-weight:700}
.health .none{color:var(--muted)}
.health .on,.health .off{font-size:13px}
.health .off{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--muted)}
.health .off::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}
.health .bad{color:var(--live)}
.health .toggle-cell{text-align:center}
.health input.has-camera{width:20px;height:20px;accent-color:var(--court)}
.hint.small{font-size:12px;margin:8px 0 0}
.tablet-link{display:flex;gap:16px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.tablet-link .qr-box{width:136px;height:136px;padding:8px;border:1px solid var(--line)}
.tablet-link .qr-box img,.tablet-link .qr-box canvas{width:120px!important;height:120px!important}
.tablet-link .hint{margin:4px 0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;overflow-wrap:anywhere;margin:0}
.admin h3{margin:0 0 10px;font-size:17px}
.field input[type=email],.field input[type=number],.field input[type=time]{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font:inherit;color:inherit}
/* setup: clubs > locations > courts > cameras, each with a small inline edit form */
.club-card{margin-bottom:14px}
.loc-card{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.court-card{margin:10px 0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.court-title{margin-bottom:6px}
.court-title .mono,.cam-row .mono{color:var(--muted)}
.cam-row{margin:8px 0 0 8px;padding-top:8px;border-top:1px dashed var(--line)}
form.edit{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;margin:4px 0}
form.edit .field{margin:0;flex:1 1 140px}
form.edit .field span{font-size:12px}
form.edit .field input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font:inherit;color:inherit}
form.edit .error{flex-basis:100%;margin:0}
.check{display:inline-flex;align-items:center;gap:6px;font-size:14px;padding:6px 0}
.check input{width:18px;height:18px;accent-color:var(--court)}
/* add forms */
.add-forms{display:grid;gap:16px;margin-top:14px}
form.add{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
form.add:first-of-type{border-top:0;padding-top:0}
.slug-note{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.slug-note.bad,.bad{color:var(--live)}
/* boxes and tablets */
.box-courts{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px}
.box-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.box-row{align-items:flex-start}
.box-token{margin:12px 0;padding:12px;border:2px solid var(--ball);border-radius:12px;background:var(--bg)}
.box-token .mono{font-size:14px;margin-top:6px;user-select:all}
#boxes+.box-token+form.add{margin-top:12px}
@media (max-width:420px){.health th,.health td{padding-left:10px;padding-right:8px}}

/* ---- printable A5 stickers ---- */
.stickers-page{padding:0 18px 48px;max-width:none}
.sticker-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;max-width:560px;margin:0 auto 18px}
.sticker-bar p{margin:0;color:var(--muted);font-size:14px;flex:1 1 240px}
.sheets{display:flex;flex-direction:column;align-items:center;gap:24px}
.sticker{width:148mm;height:210mm;max-width:100%;background:var(--court-deep);color:#fff;border-radius:6mm;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;
  padding:12mm 10mm 9mm;box-shadow:0 10px 30px -12px rgba(14,35,66,.5);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.sticker .st-top{display:flex;align-items:center;justify-content:space-between;width:100%}
.sticker .st-brand{display:flex;align-items:center;gap:2.5mm;font-stretch:80%;font-weight:900;font-size:7mm}
.sticker .st-brand svg{width:8mm;height:8mm}
.sticker .st-court{font-stretch:72%;font-weight:900;font-size:8mm}
.sticker .st-tablet{width:100mm}
.sticker .st-tablet svg{display:block;width:100%;height:auto}
.sticker h2{margin:0;font-stretch:72%;font-weight:900;font-size:13mm;line-height:.95}
.sticker .st-sub{margin:0;font-size:4.2mm;opacity:.85}
.sticker .st-club{margin:0;font-size:3.6mm;font-weight:700;opacity:.9}
.sticker .st-notice{margin:0;font-size:3mm;opacity:.8;overflow-wrap:anywhere}
@media screen and (max-width:600px){
  /* phones: a scaled preview; printing still uses the real A5 size */
  .sticker{width:100%;height:auto;aspect-ratio:148/210;padding:8% 6% 6%;gap:3%}
  .sticker .st-tablet{width:70%}
  .sticker h2{font-size:9vw}
  .sticker .st-brand,.sticker .st-court{font-size:5.5vw}
  .sticker .st-sub{font-size:3.4vw}.sticker .st-club{font-size:3vw}.sticker .st-notice{font-size:2.6vw}
}
@page{size:A5 portrait;margin:0}
@media print{
  html,body{background:#fff}
  .no-print{display:none!important}
  .stickers-page{padding:0}
  .sheets{display:block}
  .sticker{border-radius:0;box-shadow:none;break-after:page;page-break-after:always}
}