/* Adthletics - admin review queue and the clean-up of events athletes
   added (admin.html). Loads after site.css. */

.admin-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 16px;
}

.admin-top .logo img { height: 34px; }

.admin-who {
  margin-left: auto;
  font-size: 14px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.admin { padding-block: 24px 96px; }

.admin-title { font-size: clamp(34px, 5vw, 56px); }

.admin-lead {
  max-width: 70ch;
  margin-top: 12px;
  color: var(--ink-soft);
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 28px;
}

.admin-tabs button {
  padding: 8px 16px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.admin-tabs button[aria-selected="true"] {
  color: var(--cream);
  background: var(--ink);
}

.admin-msg { min-height: 1.6em; margin-top: 16px; font-weight: 600; }
.admin-msg.error { color: #c62d2d; }
.admin-msg.success { color: var(--accent); }

.admin-empty { margin-top: 24px; color: var(--ink-soft); }

.company-list {
  display: grid;
  gap: 16px;
  margin-top: 8px;
}

.company {
  padding: 22px 24px;
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  background: #fffdf8;
}

.company-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.company-name {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 115%;
  font-size: 24px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.company-status {
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #ece7da;
}

.company-status[data-status="verified"] { color: #ffffff; background: var(--accent); }
.company-status[data-status="rejected"] { color: #ffffff; background: #c62d2d; }

.company-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 18px;
  margin: 16px 0 0;
  font-size: 15px;
}

.company-facts dt { font-weight: 700; color: var(--ink-soft); }
.company-facts dd { margin: 0; overflow-wrap: anywhere; }

.company-note {
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid var(--ink-line);
  border-radius: 10px;
  background: rgba(17, 17, 17, 0.04);
}

.company-review {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-line);
}

.company-review label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
}

.company-review .optional { font-weight: 500; color: var(--ink-soft); }

.company-review textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid rgba(17, 17, 17, 0.3);
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  background: #ffffff;
  resize: vertical;
}

.company-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Events added by athletes ---------- */

.admin-section {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1.5px solid var(--ink);
}

.admin-section .company-list { margin-top: 16px; }

.event-sport { text-transform: uppercase; }

.company-review input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1.5px solid rgba(17, 17, 17, 0.3);
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  background: #ffffff;
}

.company-review input[type="number"] { max-width: 200px; }

.merge-results {
  display: grid;
  gap: 4px;
  font-size: 14px;
}

.merge-results:empty { display: none; }

.merge-results li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(17, 17, 17, 0.04);
  overflow-wrap: anywhere;
}

.merge-results .merge-none { color: var(--ink-soft); }

.event-delete-note {
  font-size: 14px;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .company { padding: 18px 16px; }
  .company-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .company-facts dd { margin-bottom: 8px; }
}

/* ---------- Documents a brand sent ---------- */

.company-docs {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  font-size: 14px;
}

.company-docs li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 8px 12px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 10px;
  background: #ffffff;
  overflow-wrap: anywhere;
}

/* ---------- Designs to check ---------- */

.design-card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* A checkerboard shows the logo's transparent parts. */
.design-card-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 14px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 12px;
  background: repeating-conic-gradient(#efebe1 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;
}

.design-card-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 560px) {
  .design-card { grid-template-columns: minmax(0, 1fr); }
  .design-card-thumb { max-width: 240px; }
}

/* ---------- Tattoo orders (js/admin-orders.js) ---------- */

.orders-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 20px;
}

.orders-sending {
  max-width: 70ch;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid var(--ink-line);
  border-radius: 10px;
  font-size: 15px;
  background: rgba(17, 17, 17, 0.04);
}

.order-subtitle {
  margin-top: 22px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.order-table-wrap { margin-top: 8px; overflow-x: auto; }

.order-spots {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.order-spots th,
.order-spots td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
  text-align: left;
  white-space: nowrap;
}

.order-spots th { font-size: 13px; color: var(--ink-soft); }
.order-spots .num { text-align: right; font-variant-numeric: tabular-nums; }

.order-sheets {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  margin-top: 10px;
}

.sheet { margin: 0; flex: 0 1 auto; min-width: 0; width: 100%; max-width: 460px; }

/* The sheet to scale; the checkerboard is what prints as transparent. */
.sheet-paper {
  position: relative;
  width: 100%;
  border: 1px solid rgba(17, 17, 17, 0.35);
  border-radius: 4px;
  background: repeating-conic-gradient(#efebe1 0% 25%, #ffffff 0% 50%) 50% / 12px 12px;
  overflow: hidden;
}

.sheet-margin {
  position: absolute;
  border: 1px dashed rgba(17, 17, 17, 0.25);
  pointer-events: none;
}

.sheet-print {
  position: absolute;
  outline: 1px solid rgba(0, 119, 255, 0.45);
}

.sheet-print img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill; /* designs are cropped to their print's shape */
}

.sheet-print img.is-turned {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.sheet-print.is-spare { outline: 1.5px dashed rgba(17, 17, 17, 0.55); }

.sheet-spare {
  position: absolute;
  right: 2px;
  bottom: 2px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--ink);
}

.sheet-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-soft);
}

.order-actions { align-items: center; margin-top: 20px; }
.order-blocker { font-size: 14px; color: var(--ink-soft); }