/* bitsee.shop — admin skin.
   Inherits every token from style.css; this only sets what the store front
   does not need. Same three colours, same single typeface. */

.admin { background: var(--mist); }

.adminbar {
  background: var(--ink);
  color: rgba(255,255,255,.72);
  border-bottom: 2px solid var(--violet);
}
.adminbar__in { display: flex; align-items: center; gap: 1.2rem; min-height: 62px; flex-wrap: wrap; }
.adminbar .tagline {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lav);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  padding: .12rem .6rem;
}

.adminnav { display: flex; gap: 1.15rem; margin-left: auto; flex-wrap: wrap; align-items: center; }
.adminnav a {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255,255,255,.72);
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
}
.adminnav a:hover,
.adminnav a[aria-current="page"] { color: #fff; border-bottom-color: var(--violet); }
.adminnav .out { color: var(--lav); }

.adminmain { padding: 2rem 0 4rem; }
.adminmain > h2 { margin-bottom: 1.4rem; }

.muted { color: var(--ink-2); }
.mono  { font-variant-numeric: tabular-nums; font-size: .84rem; }
.warn  { color: var(--violet); font-weight: 700; }

/* admin/index.php uses .statgrid, other screens use .stats — both are the
   same card row, so both names resolve rather than one silently rendering
   as an unstyled stack. */
.stats, .statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 1.2rem 1.3rem;
}
.stat span {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stat b {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-top: .3rem;
  font-variant-numeric: tabular-nums;
}

.table { width: 100%; border-collapse: collapse; background: var(--paper); }
.table th {
  text-align: left;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: .7rem .7rem;
  border-bottom: 1px solid var(--hair-hard);
}
.table td { padding: .7rem; border-bottom: 1px solid var(--hair); font-size: .88rem; vertical-align: middle; }
.table tr:hover td { background: var(--mist); }
.table a:hover { color: var(--violet); }
.table img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

.tag {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--mist-deep);
  color: var(--ink-2);
}
.tag--placed    { background: var(--lav-wash); color: var(--violet-d); }
.tag--shipped   { background: var(--lav); color: var(--ink); }
.tag--delivered { background: var(--ink); color: #fff; }
.tag--cancelled { background: transparent; border: 1px solid var(--violet); color: var(--violet); }

.tablewrap { overflow-x: auto; border: 1px solid var(--hair); border-radius: var(--r); }

.loginwrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: var(--mist);
}

.pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; align-items: start; }

.checkrow { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.check { display: inline-flex; gap: .5rem; align-items: center; font-size: .88rem; cursor: pointer; }

.field--xs { width: auto; min-width: 90px; padding: .45rem .7rem; font-size: .84rem; }

.inline { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

@media (max-width: 700px) {
  .adminbar__in { padding-block: .7rem; }
  .adminnav { margin-left: 0; width: 100%; }
}

/* Count of sellers awaiting review, shown inline in the admin nav. */
.badgecount {
  display: inline-grid;
  place-items: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Per-line fulfilment states in the seller order table. */
.tag--pending { background: var(--mist-deep); color: var(--ink-2); }
.tag--shipped { background: var(--lav); color: var(--ink); }

/* The seller panel gets a lavender rule so it is never mistaken for admin. */
.adminbar--vendor { border-bottom-color: var(--lav); }