/* Admin panel — plain, dense, built for a phone behind the counter. */

.admin { padding-bottom: 6rem; }

.admin-bar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(20,16,13,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.admin-bar-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; padding: .9rem 0;
}
.admin-bar h1 {
  font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; margin: 0; flex: 1 1 auto;
}
.admin-bar .btn { padding: .6rem 1.05rem; }

.gate { max-width: 380px; margin: 5rem auto; text-align: left; }
.gate h1 { font-family: var(--f-display); font-weight: 400; font-size: 2rem; margin: 0 0 .5rem; }
.gate p { color: var(--injera-faint); font-size: .9rem; }

.field { display: block; margin-bottom: .9rem; }
.field > span {
  display: block; font-family: var(--f-num); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--injera-faint); margin-bottom: .3rem;
}
input[type="text"], input[type="number"], input[type="password"], textarea, select {
  width: 100%; background: var(--ink); color: var(--injera);
  border: 1px solid var(--line); border-radius: 2px; padding: .6rem .7rem;
  font-family: var(--f-body); font-size: .95rem;
}
input[type="number"] { font-family: var(--f-num); }
textarea { resize: vertical; min-height: 60px; }
input:focus, textarea:focus { border-color: var(--gold); outline: none; }

.panel {
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 3px; padding: 1.2rem; margin-bottom: 1.2rem;
}
.panel > h2 {
  font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; margin: 0 0 1rem;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 1rem; }

.cat-block { border: 1px solid var(--line); border-radius: 3px; margin-bottom: 1rem; background: var(--ink-2); }
.cat-bar {
  display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem;
  background: var(--ink-3); cursor: pointer;
}
.cat-bar strong { flex: 1 1 auto; font-size: 1rem; }
.cat-bar .count { font-family: var(--f-num); font-size: .72rem; color: var(--injera-faint); }
.cat-body { padding: 1rem; display: none; }
.cat-block.open .cat-body { display: block; }

.row {
  border-top: 1px solid var(--line); padding: 1rem 0;
  display: grid; grid-template-columns: 1fr 120px auto; gap: .8rem; align-items: start;
}
.row:first-child { border-top: 0; padding-top: .3rem; }
.row-main .field { margin-bottom: .6rem; }
.row-actions { display: flex; flex-direction: column; gap: .35rem; }

.mini {
  background: transparent; border: 1px solid var(--line); color: var(--injera-dim);
  font-family: var(--f-num); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .5rem; border-radius: 2px; cursor: pointer; white-space: nowrap;
}
.mini:hover { color: var(--injera); border-color: var(--injera-faint); }
.mini.danger:hover { color: var(--berbere); border-color: var(--berbere); }

.tagpick { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.tagpick label {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--f-num); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--injera-faint); cursor: pointer;
}

.hint { font-size: .82rem; color: var(--injera-faint); margin: .2rem 0 1rem; }

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  background: var(--gold); color: var(--ink); padding: .7rem 1.2rem; border-radius: 2px;
  font-family: var(--f-num); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 90;
}
.toast.show { opacity: 1; }

.steps { counter-reset: step; padding-left: 0; list-style: none; margin: 0; }
.steps li {
  counter-increment: step; position: relative; padding-left: 2.1rem;
  margin-bottom: .6rem; font-size: .9rem; color: var(--injera-dim);
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: .05rem;
  font-family: var(--f-num); font-size: .7rem; color: var(--gold);
  border: 1px solid var(--gold); border-radius: 50%;
  width: 1.4rem; height: 1.4rem; display: grid; place-items: center;
}

@media (max-width: 780px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
  .row-actions { flex-direction: row; flex-wrap: wrap; }
}