/* ============================================================================
   AVENLEO ADMIN — CONSOLE LAYOUT
   ----------------------------------------------------------------------------
   The console is built from the product's own design system. tokens.css,
   base.css, components.css and utilities.css are loaded from the main front end
   at /assets/css/ — one copy, one set of tokens, one definition of a button —
   so the console cannot drift away from the product it administers.

   What is here is only what the console has and the product does not: a review
   queue, a filter bar, a detail drawer. Everything else — cards, badges,
   statuses, tables, the sidebar, the topbar, the modal — is the shared library
   used exactly as the app uses it.
   ========================================================================== */

/* ------------------------------------------------------------------ SHELL --
   The app shell markup is identical to the product's, so it needs the same
   layout rules. They live in the product's dashboard.css, which the console
   does not load, so the handful it actually needs are restated here rather
   than pulling in a stylesheet written for a different screen. */

.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100dvh; }

.sidebar {
  grid-row: 1 / -1; display: flex; flex-direction: column;
  background: var(--color-surface); border-right: 1px solid var(--color-border);
  position: sticky; top: 0; height: 100dvh;
}
.sidebar__brand { display: flex; align-items: center; gap: var(--space-2); height: var(--topbar-h); padding: 0 var(--space-3); border-bottom: 1px solid var(--color-border); }
.sidebar__nav { flex: 1; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: 1px; }
.sidebar__section { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-faint); padding: var(--space-4) var(--space-2) var(--space-1); }
.sidebar__section:first-child { padding-top: 0; }
.sidebar__foot { padding: var(--space-2); border-top: 1px solid var(--color-border); }

.nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  height: 34px; padding: 0 var(--space-2); border-radius: var(--radius-sm);
  color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-item:hover { background: var(--color-surface-2); color: var(--color-text); }
.nav-item[aria-current="page"] { background: var(--color-surface-3); color: var(--color-text); font-weight: var(--weight-semibold); }
.nav-item .icon { width: 17px; height: 17px; color: var(--color-text-faint); }
.nav-item[aria-current="page"] .icon { color: var(--color-text); }
.nav-item__badge { margin-left: auto; }
.nav-item--danger { color: var(--color-danger); }
.nav-item--danger:hover { background: var(--color-danger-soft); }

.user-btn { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2); border-radius: var(--radius-sm); text-align: left; }
.user-btn:hover { background: var(--color-surface-2); }
.user-btn__id { min-width: 0; flex: 1; }
.user-btn__name { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-btn__handle { display: block; font-size: var(--text-2xs); color: var(--color-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--topbar-h); padding: 0 var(--space-5);
  border-bottom: 1px solid var(--color-border); background: var(--color-bg);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.topbar__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.topbar__spacer { flex: 1; }
.topbar__menu { display: none; }

.page { padding: var(--space-6) var(--space-5) var(--space-9); flex: 1; min-width: 0; }
.page__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.page__heading { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tighter); }
.page__sub { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: 2px; max-width: 62ch; }

.sidebar-scrim { display: none; }

/* ------------------------------------------------------------- CONSOLE ---- */

/* The environment marker. A console that can approve real money should say so
   at a glance, and the one thing worse than a scary banner is approving a
   payout on production while believing you are on staging. */
.admin-mark {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto;
  padding: 2px 6px; border-radius: var(--radius-xs);
  background: var(--color-danger-soft); border: 1px solid var(--color-danger-border);
  color: var(--color-danger); font-size: var(--text-2xs);
  font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase;
}

/* The dashboard's stat row. `grid-auto` from utilities gets close, but these
   want a tighter floor than 240px so eight of them still read as one row. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(188px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }

/* Filters above a table or a queue. */
.filter-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.filter-bar__search { flex: 1; min-width: 220px; max-width: 380px; }
.filter-bar__count { font-size: var(--text-sm); color: var(--color-text-subtle); margin-left: auto; white-space: nowrap; }

/* ------------------------------------------------------------- QUEUE ROW ---
   One pending deposit or withdrawal. Built to be scannable in a column: who,
   how much, by what route, and the two decisions. */
.queue-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border);
}
.queue-row:last-child { border-bottom: none; }
.queue-row__who { min-width: 0; }
.queue-row__name { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-row__meta { font-size: var(--text-2xs); color: var(--color-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-row__amount { text-align: right; white-space: nowrap; }
.queue-row__value { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); }
.queue-row__route { font-size: var(--text-2xs); color: var(--color-text-faint); }
.queue-row__actions { display: flex; gap: var(--space-2); flex: none; }

/* The on-chain reference. Long, monospaced, and never allowed to stretch a
   row wider than the screen. */
.hash {
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-text-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 100%;
}

/* --------------------------------------------------------------- DETAIL ---- */

.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.detail-list { display: flex; flex-direction: column; gap: var(--space-2); }
.detail-list__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); }
.detail-list__row span { color: var(--color-text-muted); }
.detail-list__row b { font-weight: var(--weight-semibold); text-align: right; overflow-wrap: anywhere; }

/* A table row that opens something. */
.table--hover tbody tr[data-open] { cursor: pointer; }

/* Wide tables scroll inside their own container rather than the page. */
.table-scroll { overflow-x: auto; }

/* ------------------------------------------------------------ RESPONSIVE --- */

@media (max-width: 1024px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: var(--z-drawer);
    transform: translateX(-100%); transition: transform var(--dur-base) var(--ease-out);
  }
  .sidebar[data-open="true"] { transform: none; box-shadow: var(--shadow-xl); }
  .sidebar-scrim { display: block; position: fixed; inset: 0; background: var(--color-scrim); z-index: calc(var(--z-drawer) - 1); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base); }
  .sidebar-scrim[data-open="true"] { opacity: 1; visibility: visible; }
  .topbar__menu { display: inline-flex; }
}

@media (max-width: 720px) {
  .page { padding: var(--space-4); }
  .queue-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "avatar who" "amount amount" "actions actions"; }
  .queue-row__amount { grid-area: amount; text-align: left; }
  .queue-row__actions { grid-area: actions; }
  .filter-bar__count { margin-left: 0; }
}