/* Admin theme: dark, sidebar navigation, accent colour per workspace (body[data-org]). Loaded after style.css. */
body.admin {
  --bg: #121212;
  --bg2: #000000;
  --card: #181818;
  --card2: #202020;
  --hover: #262626;
  --text: #ffffff;
  --muted: #a7a7a7;
  --line: #2a2a2a;
  --accent: #e8252b;
  --accent-dark: #c41c22;
  --accent-soft: rgba(232, 37, 43, .16);
  --ok: #1ed760;
  --warn: #f5a623;
  --danger: #ff5c5c;
  --shadow: none;
  --radius: 10px;
  background: var(--bg);
  color: var(--text);
}
body.admin[data-org="gr"] { --accent: #c8c8c8; --accent-dark: #e0e0e0; --accent-soft: rgba(200, 200, 200, .18); }
/* GR: light gray accent reads better with dark text on filled buttons */
body.admin[data-org="gr"] .btn.primary, body.admin[data-org="gr"] .btn.kindpick.primary, body.admin[data-org="gr"] .orgswitch button.active { color: #000; }
body.admin[data-org="gr"] .side .brand .dot { background: #e0e0e0; }
html:has(body.admin) { background: #121212; }

/* ---------- shell: sidebar + main ---------- */
body.admin #app.container { max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: start; min-height: 100vh; }
body.admin #app > * { grid-column: 2; }
body.admin #app > .side { grid-column: 1; grid-row: 1 / span 400; position: sticky; top: 0; height: 100vh; margin: 0; }
body.admin #app > *:not(.side) { margin-left: 28px; margin-right: 28px; }
body.admin #app > *:nth-child(2) { margin-top: 24px; }
body.admin #app > *:last-child { margin-bottom: 80px; }
body.admin #app > .card + .card, body.admin #app > .card + h2 { margin-top: 14px; }
body.admin #app > h1 { font-size: 1.9rem; letter-spacing: -.01em; margin: 6px 0 4px; }
body.admin #app > h2 { margin-top: 26px; }

.side { background: var(--bg2); display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; border-right: 1px solid #1c1c1c; overflow-y: auto; }
.side .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; color: #fff; padding: 6px 10px 14px; letter-spacing: -.01em; }
.side .brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.side .orgswitch { display: flex; background: #161616; border-color: #262626; margin: 0 6px 14px; }
.side .orgswitch button { flex: 1; padding: 7px 8px; color: var(--muted); }
.side .orgswitch button.active { background: var(--accent); color: #fff; }
.side .navlabel { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: #6f6f6f; padding: 12px 12px 4px; font-weight: 700; }
.side a.nav { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--muted); font-weight: 700; font-size: .95rem; transition: background .12s, color .12s; }
.side a.nav .ico { width: 22px; text-align: center; font-size: 1.05rem; }
.side a.nav:hover { color: #fff; background: #1a1a1a; }
.side a.nav.active { color: #fff; background: #242424; box-shadow: inset 3px 0 0 var(--accent); }
.side a.nav .pill { margin-left: auto; font-size: .68rem; }
.side .side-foot { margin-top: auto; padding: 14px 6px 4px; border-top: 1px solid #1c1c1c; display: flex; flex-direction: column; gap: 8px; }
.side .side-foot .who { color: var(--muted); font-size: .85rem; padding: 0 6px; }
.side .side-foot .row { gap: 6px; }

/* page head inside a contest / event */
body.admin .pagehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
body.admin .pagehead .crumb { color: var(--muted); font-weight: 700; }
body.admin .pagehead .crumb:hover { color: #fff; }

/* ---------- components in the dark ---------- */
body.admin a { color: #fff; }
body.admin .card { background: var(--card); border-color: #222; }
body.admin a.card:hover { background: var(--card2); border-color: #333; }
body.admin .card h2, body.admin .card h3 { color: #fff; }
body.admin .btn { background: #232323; border-color: #333; color: #fff; }
body.admin .btn:hover { background: #2e2e2e; border-color: #444; }
body.admin .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
body.admin .btn.primary:hover { background: var(--accent-dark); }
body.admin .btn.ok { background: var(--ok); border-color: var(--ok); color: #000; }
body.admin .btn.danger { color: var(--danger); border-color: #4a2626; background: #231818; }
body.admin .btn.danger:hover { background: #2e1d1d; }
body.admin .btn.kindpick { background: #232323; }
body.admin .btn.kindpick.primary { background: var(--accent); border-color: var(--accent); }
body.admin input[type=text], body.admin input[type=password], body.admin input[type=tel], body.admin input[type=number], body.admin input[type=email], body.admin input[type=datetime-local], body.admin input[type=date], body.admin select, body.admin textarea {
  background: #121212; border-color: #333; color: #fff; color-scheme: dark;
}
body.admin input:focus, body.admin select:focus, body.admin textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
body.admin input::placeholder, body.admin textarea::placeholder { color: #666; }
body.admin label.field span.hint { color: #8a8a8a; }
body.admin .muted { color: var(--muted); }
body.admin table.list th { color: #8a8a8a; }
body.admin table.list th, body.admin table.list td { border-bottom-color: #262626; }
body.admin table.list tr:hover td { background: #1d1d1d; }
body.admin tr.pending-row { background: #2a2208; }
body.admin .orgswitch, body.admin .modeswitch, body.admin .yn { background: #161616; border-color: #333; }
body.admin .orgswitch button, body.admin .modeswitch button, body.admin .yn button { color: var(--muted); }
body.admin .orgswitch button.active { background: var(--accent); color: #fff; }
body.admin .modeswitch button.active { background: #fff; color: #000; }
body.admin .yn button.yes.active { background: var(--ok); color: #000; }
body.admin .yn button.no.active { background: #3a3a3a; color: #fff; }
body.admin .tabs { border-bottom-color: #2a2a2a; margin-top: 22px; }
body.admin .tabs button { color: var(--muted); padding: 12px 16px; }
body.admin .tabs button.active { color: #fff; border-bottom-color: var(--accent); }
body.admin .pill.draft { background: #2a2a2a; color: #cfcfcf; }
body.admin .pill.open, body.admin .pill.submitted, body.admin .pill.joined, body.admin .pill.confirmed { background: #0f3d22; color: #5ef09a; }
body.admin .pill.closed, body.admin .pill.rejected { background: #46191d; color: #ff8a8a; }
body.admin .pill.inprogress, body.admin .pill.pending, body.admin .pill.proof_sent { background: #3d2d08; color: #ffcf6b; }
body.admin .pill.notstarted, body.admin .pill.unpaid { background: #2a2a2a; color: #cfcfcf; }
body.admin .sharebox { background: #1c1c1c; border-color: #2e2e2e; }
body.admin .sharebox code { color: #e6e6e6; }
body.admin .sendbar { background: #1c1c1c; border-color: #2e2e2e; }
body.admin .dropzone { background: #161616; border-color: #3a3a3a; }
body.admin .dropzone.over { background: var(--accent-soft); border-color: var(--accent); }
body.admin .progress { background: #2a2a2a; }
body.admin .photo-card, body.admin .judge-card, body.admin .judge-pick .pick { background: var(--card); border-color: #2a2a2a; }
body.admin .judge-pick .pick:hover { background: var(--accent-soft); border-color: var(--accent); }
body.admin .photo-card .cap { color: #cfcfcf; border-top-color: #262626; }
body.admin .cbtn { background: #232323; border-color: #333; color: #e6e6e6; }
body.admin .cbtn:hover { border-color: var(--accent); color: #fff; }
body.admin .cbtn.copy { color: var(--muted); }
body.admin .cbtn.ig { color: #ff7ab8; border-color: #4a2a3a; }
body.admin .cbtn.fb { color: #6aa8ff; border-color: #243a5a; }
body.admin .avatar { background: #2e2e2e; color: #ddd; }
body.admin .modal { background: rgba(0,0,0,.7); }
body.admin .modal-box { background: #1c1c1c; color: #fff; border: 1px solid #333; }
body.admin .modal-box .choice:hover { background: var(--accent-soft); border-color: var(--accent); }
body.admin .toast { background: #fff; color: #000; }
body.admin .toast.err { background: var(--danger); color: #fff; }
body.admin .winner { border-color: #2a2a2a; }
body.admin .paylines.light .payline { background: #1c1c1c; border-color: #2e2e2e; }
body.admin .qr.light { border-color: #333; }
body.admin .banner.info { background: #16233a; border-color: #27406b; color: #cfe0ff; }
body.admin .banner.warn { background: #3a2d0b; border-color: #7a5d10; color: #ffe6a8; }
body.admin .banner.ok { background: #14361f; border-color: #1f6b37; color: #b6f0c8; }
body.admin .empty { color: var(--muted); }
body.admin .auth { margin-top: 14vh; }

/* inline light colours used by older markup, mapped to the dark palette */
body.admin [style*="border-color:#cfdcfb"] { border-color: #2f3f5f !important; background-color: #171b24 !important; }
body.admin [style*="background:#fffaf0"] { background: #2a2208 !important; border-color: #6b5513 !important; color: #ffe6a8 !important; }
body.admin [style*="background:#eefbf3"] { background: #10281a !important; border-color: #1f6b37 !important; }
body.admin [style*="color:#157a45"] { color: #5ef09a !important; }
body.admin [style*="background:#eef3ff"] { background: #16233a !important; border-color: #27406b !important; color: #cfe0ff !important; }
body.admin [style*="background:#f7f8fa"] { background: #1c1c1c !important; }
body.admin [style*="border-color:#f1c4ca"] { border-color: #5a2a2e !important; }
body.admin [style*="color:#8a5a00"] { color: #ffcf6b !important; }
body.admin [style*="background:#fff;"], body.admin [style*="background:#fff"]:not([style*="#fffaf0"]) { background: #1c1c1c !important; }
body.admin .qrtile[style], body.admin .modal .qrtile[style], body.admin img[style*="background:#fff"] { background: #fff !important; }
body.admin .qrtile b, body.admin .qrtile .btn { color: #111; }
body.admin .qrtile .small { color: #333 !important; }
.linkmini { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; background: #111; color: #fff; text-decoration: none; font-size: 1.1rem; }
.winner .linkthumb { display: grid; place-items: center; aspect-ratio: 1; background: #111; color: #fff; font-size: 2.2rem; text-decoration: none; }
body.admin .qrtile .btn { background: #eee; border-color: #ccc; }

.searchbox { width: 100%; max-width: 420px; font-size: 1rem; padding: 11px 14px !important; border-radius: 999px !important; }
body.admin input[type=email], body.admin input[type=datetime-local], body.admin input[type=date] { padding: 9px 11px; border: 1px solid #333; border-radius: 9px; width: 100%; }
body.admin .card a:not(.btn):not(.cbtn):not(.card):not(.nav), body.admin .banner a { color: var(--accent); text-decoration: underline; }
body.admin[data-org="gr"] .card a:not(.btn):not(.cbtn):not(.card):not(.nav), body.admin[data-org="gr"] .banner a { color: #fff; }
body.admin .qr.light:not(img) { background: #1c1c1c; }
body.admin input[type=search] { background: #121212; border: 1px solid #333; color: #fff; outline: none; }
body.admin input[type=search]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* phones: the sidebar becomes a top strip */
@media (max-width: 900px) {
  body.admin #app.container { grid-template-columns: minmax(0, 1fr); } /* the column never grows past the phone: wide tables scroll inside their own wrapper */
  body.admin #app > * { grid-column: 1; min-width: 0; }
  body.admin .table-wrap { overflow-x: auto; max-width: 100%; }
  body.admin .tabs, body.admin .orgswitch { flex-wrap: wrap; }
  body.admin .card .grid, body.admin form.grid { grid-template-columns: 1fr !important; } /* two-column forms stack on a phone */
  body.admin .card .grid > *, body.admin form.grid > * { grid-column: 1 / -1 !important; }
  body.admin #app > div, body.admin #app > form { max-width: 100%; overflow-x: auto; }
  body.admin #app > .side { grid-row: auto; position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 6px; border-right: 0; border-bottom: 1px solid #1c1c1c; }
  body.admin #app > *:not(.side) { margin-left: 12px; margin-right: 12px; }
  .side .brand { padding: 4px 8px; font-size: 1.05rem; }
  .side .orgswitch { margin: 0; }
  .side .navlabel { display: none; }
  .side .navlist { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
  .side a.nav { padding: 7px 10px; font-size: .85rem; }
  .side a.nav.active { box-shadow: inset 0 -3px 0 var(--accent); }
  .side .side-foot { margin: 0 0 0 auto; padding: 0; border: 0; flex-direction: row; align-items: center; }
  .side .side-foot .who { display: none; }
}