/* Quartz Eon admin page. Loaded after style.css, so it can reuse all of its tokens and components
   (buttons, chips, fields, badges, toasts) and only add what the admin page needs on top. */

.admin-header .brand__word { margin-right: 4px; }
.admin-tag {
  padding: 3px 9px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}

.admin-main { padding-block: clamp(32px, 5vw, 56px) 72px; }

/* Log in / access-denied panels: one roomy, welcoming card, not a cramped little box */
.admin-panel {
  display: grid; justify-items: start; gap: 16px; width: min(500px, 100%); margin-inline: auto;
  padding: 48px clamp(24px, 5vw, 44px) 40px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--card);
}
.admin-icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 14px;
  background: hsl(248 var(--art-s) var(--art-l)); color: hsl(248 var(--art-fg-s) var(--art-fg-l));
}
.admin-title { font: 800 clamp(1.7rem, 1.4rem + 1vw, 2.1rem)/1.12 var(--font-display); letter-spacing: -.03em; }
.admin-lead { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.admin-panel .auth__form { width: 100%; margin-top: 8px; }
.admin-panel .auth__form .btn--block { min-height: 52px; font-size: 16px; }
#admin-denied-email { font-weight: 700; color: var(--ink); }

/* Dashboard head and status filter */
.admin-app__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; }
.admin-count { font: 500 13px/1 var(--font-mono); letter-spacing: .04em; color: var(--ink-2); }
/* Status filters are plain text tabs with a line under the chosen one, not boxed chips */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.admin-tabs .chip {
  min-height: 0; margin-bottom: -1px; padding: 8px 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: var(--ink-2); font-weight: 500;
}
.admin-tabs .chip:hover { color: var(--ink); }
.admin-tabs .chip[aria-pressed="true"] { background: none; border-bottom-color: var(--ink); color: var(--ink); font-weight: 600; }
.admin-empty { margin-top: 24px; color: var(--ink-2); }

/* Seller, product, order and fee rows: a plain list split by thin lines, not a stack of boxes */
.admin-list { display: grid; container-type: inline-size; }
.seller-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px 20px;
  padding: 16px 2px; border-bottom: 1px solid var(--line);
}
.seller-row__main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.seller-row__avatar {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px;
  background: hsl(var(--h) var(--art-s) var(--art-l)); color: hsl(var(--h) var(--art-fg-s) var(--art-fg-l));
}
.seller-row__avatar .i { width: 22px; height: 22px; }
.seller-row__avatar .art { width: 26px; height: 26px; }
.seller-row__text { min-width: 0; }
.seller-row__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 17px/1.25 var(--font-display); letter-spacing: -.01em; }
.seller-row__meta { margin-top: 2px; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.seller-row__actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Settings: plain sections, each a title with a thin line under it, no boxes */
.settings-card { max-width: 620px; }
.settings-card__title { margin-bottom: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font: 700 20px/1.2 var(--font-display); letter-spacing: -.015em; }
.settings-card .auth__form { margin-top: 18px; }
/* Save buttons are as wide as their label on wide screens, not a bar across the whole page */
@media (min-width: 641px) { .settings-card .auth__form > .btn { width: auto; justify-self: start; } }
.settings-card--spaced { margin-top: 48px; }
/* Shared brand logos: the picture and its name, no frame; the delete button sits on the picture's corner */
.brand-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 18px; }
.brand-item { position: relative; display: grid; gap: 8px; justify-items: center; padding: 12px 8px; border-radius: 12px; text-align: center; }
.brand-item:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.brand-item img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.brand-item span { font-size: 13px; overflow-wrap: anywhere; }
.brand-item button { position: absolute; top: 6px; right: 6px; }
.order-problem { color: var(--danger); font-weight: 600; }

.status-badge {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  font: 500 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.status-badge--pending { background: hsl(38 90% 92%); color: hsl(30 70% 32%); }
.status-badge--approved { background: hsl(150 55% 90%); color: hsl(150 45% 26%); }
.status-badge--suspended { background: hsl(0 70% 93%); color: hsl(0 55% 38%); }
:root[data-theme="dark"] .status-badge--pending { background: hsl(38 45% 20%); color: hsl(40 85% 76%); }
:root[data-theme="dark"] .status-badge--approved { background: hsl(150 30% 18%); color: hsl(150 55% 72%); }
:root[data-theme="dark"] .status-badge--suspended { background: hsl(0 35% 20%); color: hsl(0 75% 78%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .status-badge--pending { background: hsl(38 45% 20%); color: hsl(40 85% 76%); }
  :root:not([data-theme="light"]) .status-badge--approved { background: hsl(150 30% 18%); color: hsl(150 55% 72%); }
  :root:not([data-theme="light"]) .status-badge--suspended { background: hsl(0 35% 20%); color: hsl(0 75% 78%); }
}

/* When the list is narrow the buttons drop under the text, lined up with it (avatar 46px + gap 14px) */
@container (max-width: 720px) {
  .seller-row { grid-template-columns: minmax(0, 1fr); }
  .seller-row__actions { justify-content: flex-start; padding-left: 60px; }
}
@media (max-width: 640px) {
  .seller-row { grid-template-columns: 1fr; }
  .seller-row__actions { justify-content: flex-start; }
}
@container (max-width: 480px) {
  .seller-row__actions { padding-left: 0; }
}

/* Toast: a brief confirmation after approving/suspending a store */
.toasts {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 1000;
  width: max-content; max-width: calc(100% - 32px); transform: translateX(-50%); pointer-events: none;
}
.toast {
  padding: 12px 18px; border-radius: var(--radius); background: var(--ink); color: var(--paper);
  font-weight: 500; box-shadow: var(--shadow-2);
}
.toast.is-out { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in .2s ease-out; transition: opacity .18s ease, transform .18s ease; }
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Side menu on the left (icon + label, groups split by thin lines, like the Supabase dashboard),
   the chosen section on the right. Same look as the seller dashboard in seller.css. */
.dash-layout { display: grid; grid-template-columns: 224px minmax(0, 1fr); align-items: start; }
.dash-main { min-width: 0; min-height: 60vh; padding-left: clamp(24px, 4vw, 48px); border-left: 1px solid var(--line); }
.dash-nav { position: sticky; top: 96px; display: flex; flex-direction: column; padding-right: 16px; }
.dash-nav__group { display: grid; gap: 2px; padding-block: 10px; }
.dash-nav__group:first-child { padding-top: 0; }
.dash-nav__group + .dash-nav__group { border-top: 1px solid var(--line); }
.dash-nav button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border: 0; border-radius: 10px;
  background: none; color: var(--ink-2); font-size: 15px; font-weight: 500; line-height: 1.3; text-align: left;
}
.dash-nav button .i { width: 19px; height: 19px; stroke-width: 1.7; color: var(--ink-3); }
.dash-nav button:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.dash-nav button[aria-pressed="true"] { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); font-weight: 600; }
.dash-nav button:hover .i, .dash-nav button[aria-pressed="true"] .i { color: var(--ink); }
@media (max-width: 860px) {
  .dash-layout { grid-template-columns: minmax(0, 1fr); }
  .dash-main { padding-left: 0; border-left: 0; min-height: 0; }
  .dash-nav {
    position: static; flex-direction: row; overflow-x: auto; margin-bottom: 24px; padding: 0 0 8px;
    border-bottom: 1px solid var(--line); scrollbar-width: thin;
  }
  .dash-nav__group { display: flex; padding: 0; }
  .dash-nav__group + .dash-nav__group { border-top: 0; margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--line); }
  .dash-nav button { width: auto; padding: 8px 10px; gap: 8px; white-space: nowrap; }
}

/* Ads: the add form, then the list of ads (a poster or product photo as the row picture) */
#spot-form { max-width: 620px; margin-top: 18px; }
.spot-form__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 641px) { .spot-form__actions .btn { width: auto; } }
.admin-list--spaced { margin-top: 32px; border-top: 1px solid var(--line); }
.seller-row__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Ads tabs: Requests (sellers who bought an ad), Ads, Packages (glass boxes, same look sellers see) */
.spot-tab-lead { margin-top: 16px; }
#spot-requests-list { margin-top: 16px; }
.spot-request__text { color: var(--ink); }
.spot-tab-lead + .spot-glass { margin-top: 16px; }
#spot-pack-form { max-width: 620px; margin-top: 24px; }
#spot-telegram-form { max-width: 420px; }
.spot-pack--admin { cursor: default; }
.spot-pack--admin:hover { transform: none; background: var(--glass); }
.spot-pack--admin.is-off { opacity: .55; }
.spot-pack--admin.is-editing { background: var(--glass-hi); box-shadow: 0 0 0 2px var(--brand), var(--glass-shadow); opacity: 1; }
.spot-pack__tools { display: flex; gap: 4px; margin-top: 10px; }
.spot-pack__tools .btn { width: 34px; height: 34px; padding: 0; justify-content: center; background: var(--glass-hi); }
.spot-pack__tools .i { width: 16px; height: 16px; }