/* admin.css — styles specific to the admin area, built on theme.css tokens and components. */

.admin-grid { align-items: start; }

/* Long ids, errors and paths wrap instead of stretching dense tables. */
.admin-message { max-width: 420px; overflow-wrap: anywhere; word-break: break-word; }

.admin-user { display: flex; align-items: center; gap: .6rem; min-width: 0; }

.admin-pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; }
.admin-handled { opacity: .7; }
.admin-textarea { min-height: 220px; line-height: 1.55; }

/* Budget meters: .bar + .bar__fill--NN from theme.css. */
.budget { display: flex; flex-direction: column; gap: .4rem; }
.budget + .budget { padding-top: .9rem; border-top: 1px solid var(--border); }
.budget .bar { height: 8px; }
.bar__fill--danger { background: var(--danger); }

/* 90 % stop line on the Web API key meter. */
.bar--stop { position: relative; overflow: visible; }
.bar--stop .bar__fill { border-radius: 999px; }
.bar--stop::after {
    content: "";
    position: absolute;
    left: 90%;
    top: -3px;
    bottom: -3px;
    width: 2px;
    border-radius: 1px;
    background: var(--text-2);
}

@media (max-width: 620px) {
    .admin-message { max-width: 220px; }
    .page--admin .page__header .form--inline { width: 100%; }
    .page--admin .page__header .form--inline .field { flex: 1; }
}

/* Collapsible cards (<details class="card">) on the health page. */
details.card > summary { list-style: none; cursor: pointer; }
details.card > summary::-webkit-details-marker { display: none; }
details.card:not([open]) > summary { border-bottom: 0; }

/* Business */
.page--business { display: flex; flex-direction: column; gap: 1.1rem; }
.page--business > * { margin: 0; }
.funnel { display: flex; flex-direction: column; gap: .9rem; }
.funnel__step { display: flex; flex-direction: column; gap: .35rem; }
.funnel__row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .9rem; }
.funnel .bar { height: 8px; }
.funnel p { margin: 0; }

/* User editor (admin/user.php) and order pages (admin/orders*.php). */
.admin-user--lg { gap: 1rem; align-items: center; }
.admin-user--lg .page__title { margin: .1rem 0 .4rem; overflow-wrap: anywhere; }
.admin-user--lg .crumbs { margin: 0; }
.stat__value--sm { font-size: 1.1rem; }
.field__input--sm { height: 32px; padding: 0 .6rem; font-size: .86rem; width: auto; min-width: 0; }
.admin-days { width: 5.5rem; }
.admin-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; }
.admin-inline .field__select { width: auto; }
.admin-actions { display: flex; flex-direction: column; padding-top: .4rem; padding-bottom: .4rem; }
.admin-action { display: flex; align-items: center; justify-content: space-between; gap: .9rem; flex-wrap: wrap; padding: .8rem 0; }
.admin-action + .admin-action { border-top: 1px solid var(--border); }
.admin-action > div:first-child { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.admin-action form { margin: 0; }
.admin-scroll { max-height: 420px; overflow: auto; }
.admin-ua { max-width: 320px; overflow-wrap: anywhere; color: var(--muted); }
.admin-facts { display: flex; flex-direction: column; gap: .7rem; margin: 0; }
.admin-facts > div { display: flex; flex-direction: column; gap: .1rem; }
.admin-facts dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-family: var(--font-mono); }
.admin-facts dd { margin: 0; overflow-wrap: anywhere; }
.admin-keys, .admin-log { list-style: none; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.admin-keys li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.admin-keys form { margin: 0; }
.admin-log { max-height: 380px; overflow: auto; font-size: .9rem; }
.admin-log li { display: flex; flex-direction: column; gap: .1rem; overflow-wrap: anywhere; }
.card--danger { border-color: var(--danger); }
.card--danger .card__title { color: var(--danger); }
.admin-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.admin-timeline li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: .8rem; padding: .55rem 0; font-size: .9rem; }
.admin-timeline li + li { border-top: 1px dashed var(--border); }
.admin-timeline time { color: var(--muted); font-family: var(--font-mono); font-size: .8rem; }
.admin-payload { max-height: 360px; overflow: auto; margin: .5rem 0 0; padding: .75rem; border-radius: var(--radius); background: var(--surface-2, var(--bg)); border: 1px solid var(--border); font-size: .78rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.admin-filters .field { margin: 0; }
.admin-flag { color: var(--danger); font-weight: 600; }

/* Admin → Leads */
.leads-funnel { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.leads-bar { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; justify-content: space-between; }
.leads-bar__export { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-left: auto; }
.leads td { vertical-align: middle; }
.badge--outline-success { color: var(--success); border-style: dashed; border-color: var(--success); background: transparent; }
.badge--outline-warning { color: var(--warning); border-style: dashed; border-color: var(--warning); background: transparent; }
.th-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.th-sort:hover, .th-sort--active { color: var(--accent); }
.leads__game { display: flex; gap: .75rem; align-items: center; min-width: 220px; }
.leads__capsule { width: 92px; height: 43px; object-fit: cover; border-radius: 6px; flex: none; background: var(--surface-2, var(--bg)); }
.leads__studio, .leads__week { display: block; margin-top: .15rem; }
.leads__week { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leads__contact { overflow-wrap: break-word; min-width: 180px; max-width: 260px; }
.leads__actions { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; white-space: nowrap; }
.leads__actions form { margin: 0; }
.leads tr.is-blocked td:not(.leads__actions) { opacity: .62; }
.lead-mail { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 1.25rem; margin: 0; }
.lead-mail dt { color: var(--muted); font-size: .85rem; }
.lead-mail dd { margin: 0; overflow-wrap: anywhere; }
.lead-preview { display: flex; flex-direction: column; gap: 1rem; }
.lead-preview__frame { width: 100%; height: 980px; border: 1px solid var(--border); border-radius: var(--radius); background: #EFEEEA; }
.lead-preview summary { cursor: pointer; font-weight: 600; }
.lead-preview__text { margin: 0; white-space: pre-wrap; font-size: .82rem; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
    .leads-funnel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Phones: one card per game, the Send button in reach. */
@media (max-width: 760px) {
    .leads thead { display: none; }
    .leads, .leads tbody, .leads tr, .leads td { display: block; width: 100%; }
    .leads tr { padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
    .leads td { border: 0; padding: .2rem 0; text-align: left; max-width: none; white-space: normal; }
    .leads td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
    .leads td[data-label] br { display: none; }
    .leads td[data-label] br + .muted { margin-left: .4rem; }
    .leads td.num { text-align: left; }
    .leads td.leads__actions { display: flex; justify-content: flex-start; padding-top: .5rem; }
    .leads__week { max-width: none; white-space: normal; }
}

@media (max-width: 620px) {
    .admin-user--lg { align-items: flex-start; }
    .admin-timeline li { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
    .admin-ua { max-width: 180px; }
    .field__input--sm { flex: 1 1 140px; }
    .leads-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .leads-bar__export { margin-left: 0; }
    .lead-preview__frame { height: 1150px; }
}
.table .admin-ua { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* -- Admin navigation (partials/admin-nav.php) ------------------------------
 * Desktop: the sidebar. Phones (≤900px): the same nav in a drawer that slides
 * in from the left of the top bar (details.admin-drawer, app.js closes it).
 */
.sidebar--admin { gap: .75rem; }
.admin-jump { position: relative; display: flex; align-items: center; margin: 0 .25rem; }
.admin-jump > svg { position: absolute; left: .7rem; color: var(--muted); pointer-events: none; }
.admin-jump__input { width: 100%; height: 36px; padding: 0 2rem 0 2.1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: .88rem; }
.admin-jump__input::placeholder { color: var(--muted); }
.admin-jump__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--primary-soft); }
.admin-jump__input::-webkit-search-cancel-button { display: none; }
.admin-jump__key { position: absolute; right: .55rem; padding: .05rem .4rem; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--bg-subtle); color: var(--muted); font-family: var(--font-mono); font-size: .7rem; line-height: 1.3; }
.admin-jump__input:focus + .admin-jump__key { display: none; }
.admin-nav { gap: 0; }
.admin-nav__group { display: flex; flex-direction: column; gap: 2px; }
.admin-nav__group[hidden] { display: none; }
.admin-nav__group + .admin-nav__group .sidebar__label { padding-top: 1rem; }
.admin-nav .sidebar__link { padding-top: .42rem; padding-bottom: .42rem; }
.admin-nav .sidebar__link--active { padding-top: calc(.42rem - 1px); padding-bottom: calc(.42rem - 1px); }
.admin-nav .sidebar__link[hidden] { display: none; }
.admin-nav__badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 .4rem; border-radius: 999px; display: inline-grid; place-items: center; font-family: var(--font-mono); font-size: .7rem; font-weight: 600; line-height: 1; }
.admin-nav__badge--alert { background: var(--primary); color: #fff; }
.admin-nav__badge--warn { background: var(--warning-soft); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); }
.admin-nav__empty { margin: .75rem .65rem 0; }
.admin-nav__foot { gap: .35rem; }
.admin-nav__exits { display: flex; flex-direction: column; gap: 2px; padding-top: .5rem; border-top: 1px solid var(--border); }
.admin-nav__exits .sidebar__link { font-size: .88rem; color: var(--muted); }
.admin-nav__exits .sidebar__link:hover { color: var(--text); }

.admin-drawer { display: none; }
.admin-drawer > summary { list-style: none; position: relative; padding: .35rem; }
.admin-drawer > summary::-webkit-details-marker { display: none; }
.admin-drawer__dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--bg); }
.admin-drawer__backdrop { position: fixed; inset: 0; z-index: 60; background: rgb(9 9 11 / .45); backdrop-filter: blur(2px); animation: admin-fade .18s ease-out; }
.admin-drawer__panel { position: fixed; top: 0; bottom: 0; left: 0; z-index: 61; width: min(320px, 86vw); display: flex; flex-direction: column; gap: .75rem; padding: 1rem .75rem calc(1rem + env(safe-area-inset-bottom)); background: var(--bg-subtle); border-right: 1px solid var(--border); box-shadow: var(--shadow-lg); overflow-y: auto; animation: admin-slide .22s cubic-bezier(.2, .8, .2, 1); }
.admin-drawer__panel .admin-jump__input { font-size: 16px; height: 42px; }
.admin-drawer__panel .sidebar__link { padding-top: .6rem; padding-bottom: .6rem; }
@keyframes admin-fade { from { opacity: 0; } }
@keyframes admin-slide { from { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .admin-drawer__backdrop, .admin-drawer__panel { animation: none; } }
@media (max-width: 900px) {
    .admin-drawer { display: block; flex: none; }
    /* A blurred bar would become the drawer's containing block and clip it. */
    .layout--admin .topbar { justify-content: flex-start; backdrop-filter: none; background: var(--bg); }
    .layout--admin .topbar__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
}


/* Health: "Recently updated games" header with its view switch. */
.admin-recent__header { flex-wrap: wrap; gap: .6rem 1rem; }
.admin-recent__header .card__title { margin: 0; }
.admin-recent__header .segmented__item { text-decoration: none; white-space: nowrap; }
@media (max-width: 620px) {
    .admin-recent__header .segmented { width: 100%; overflow-x: auto; }
    .admin-recent__header .segmented__item { flex: 1; text-align: center; }
}

/* Admin → Admin API */
.admin-api td { vertical-align: top; }
.admin-api__note { display: block; margin-top: .2rem; max-width: 260px; }
.admin-api__key { max-width: 340px; }
.admin-api__key code { overflow-wrap: anywhere; font-size: .8rem; }
.admin-api__key details summary { cursor: pointer; color: var(--accent); }
.admin-api__key details[open] summary { margin-bottom: .25rem; }
.admin-api__actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.admin-api__actions form { margin: 0; }
.admin-api tr.is-revoked td:not(.admin-api__act) { opacity: .6; }
.admin-api__name { min-width: 150px; }
@media (max-width: 760px) {
    .admin-api thead { display: none; }
    .admin-api, .admin-api tbody, .admin-api tr, .admin-api td { display: block; width: 100%; max-width: none; }
    .admin-api tr { padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
    .admin-api td { border: 0; padding: .25rem 0; }
    .admin-api td.admin-api__act { padding-top: .5rem; }
    .admin-api__actions { justify-content: flex-start; }
}
body.is-locked { overflow: hidden; }
.profiles-owned { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; flex-basis: 100%; }
.profiles-owned__list { flex: 1 1 18rem; }
.profiles-owners { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.profiles-owners__item { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem .25rem .3rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.profiles-owners__item img { border-radius: 50%; }
.profiles-owners__item.is-error { border-color: var(--warning); }
.seasons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.season-card { overflow: hidden; }
.season-card__art { display: grid; grid-template-columns: 1fr 1fr; }
.season-card__art img { width: 100%; height: 120px; object-fit: cover; display: block; }
.season-card__head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.season-card__bits { display: flex; gap: .6rem; align-items: center; min-height: 40px; }
.season-card__bits img { height: 40px; width: auto; }