/* pages/admin.css
   Dev / Admin tooling pages migrated onto the Saga design system.
   Layout helpers only — surfaces, tables, badges, buttons, forms all come
   from components.css. Consumes --sg-* tokens exclusively (no hardcoded color). */

/* Extra-wide tool container (e.g. character simulator) that needs more room
   than .saga-page--full's 72rem. */
.admin-page-xl {
    max-width: 100rem;
    margin-inline: auto;
    padding: 1.5rem 1rem;
}

/* ---- Page header -------------------------------------------------------- */
.admin-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}
.admin-head__titles {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}
.admin-head__title {
    margin: 0;
    font-family: var(--sg-font-display);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--sg-ink-strong);
}
.admin-head__subtitle {
    margin: 0;
    font-size: 0.875rem;
    color: var(--sg-ink-muted);
}
.admin-back {
    font-size: 0.875rem;
    color: var(--sg-link);
    text-decoration: none;
    white-space: nowrap;
}
.admin-back:hover { text-decoration: underline; }

/* ---- Search / filter form ---------------------------------------------- */
.admin-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .admin-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .admin-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.admin-form-actions {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}
.admin-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--sg-ink);
}
.admin-checkbox input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--sg-accent);
}

/* ---- Search box with autocomplete dropdown ------------------------------ */
/* The encounter-list search island appends an absolutely-positioned dropdown
   to the input's parent, so that wrapper must establish a positioning context. */
.admin-search {
    position: relative;
    width: 100%;
    max-width: 28rem;
}

/* ---- Small thumbnail cell (mob/sprite images in tables) ----------------- */
.admin-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--sg-edge);
    border-radius: var(--sg-radius-md);
    background: var(--sg-surface-raised);
}
.admin-thumb img {
    max-width: 2.25rem;
    max-height: 2.25rem;
    object-fit: contain;
}

/* ---- Sortable table headers -------------------------------------------- */
.admin-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
    text-decoration: none;
}
.admin-sort:hover {
    color: var(--sg-ink-strong);
    text-decoration: underline;
}

/* ---- Clickable table rows ---------------------------------------------- */
/* The overlay anchor is absolutely positioned against the relative row and
   stretched to fill it (inset:0). It stays transparent so the cell content
   shows through, while capturing clicks for the whole row. */
.saga-table tbody tr.admin-row { position: relative; cursor: pointer; }
.admin-row__link {
    position: absolute;
    inset: 0;
    z-index: 0;
}
/* Real links inside a clickable row sit above the row overlay. */
.admin-row a.admin-cell-link {
    position: relative;
    z-index: 1;
    color: var(--sg-link);
    text-decoration: none;
}
.admin-row a.admin-cell-link:hover { text-decoration: underline; }
/* Buttons inside a clickable row sit above the overlay and keep button styling. */
.admin-row .saga-btn { position: relative; z-index: 1; }
.admin-muted { color: var(--sg-ink-faint); }

/* ---- Pagination --------------------------------------------------------- */
.admin-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.5rem;
    border-top: 1px solid var(--sg-edge-faint);
}
.admin-pagination__info {
    font-size: 0.875rem;
    color: var(--sg-ink-muted);
}
.admin-pagination__info strong {
    color: var(--sg-ink-strong);
    font-weight: 600;
}
.admin-pagination__nav { display: flex; gap: 0.5rem; }

/* ---- Card grid (logs, dashboards) -------------------------------------- */
.admin-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .admin-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .admin-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Encounter "Recently Opened" strip — JS mounts card markup into this grid. */
.admin-recents-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
@media (min-width: 640px) {
    .admin-recents-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .admin-recents-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.admin-link-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--sg-transition), box-shadow var(--sg-transition);
}
.admin-link-card:hover {
    border-color: var(--sg-edge-strong);
    box-shadow: var(--sg-shadow-2);
}
.admin-link-card--disabled { opacity: 0.55; }
.admin-card-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}
.admin-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: var(--sg-radius-md);
    background: var(--sg-accent-soft);
    color: var(--sg-accent-strong);
}
.admin-card-icon--muted {
    background: var(--sg-neutral-soft);
    color: var(--sg-ink-muted);
}
.admin-card-icon svg { width: 1.5rem; height: 1.5rem; }
.admin-card-title { font-size: 1rem; font-weight: 600; color: var(--sg-ink-strong); }
.admin-card-cta { margin-top: 0.85rem; font-size: 0.875rem; font-weight: 600; color: var(--sg-accent-strong); }

/* ---- Service control --------------------------------------------------- */
.service-control-groups,
.service-control-services {
    display: grid;
    gap: 1rem;
}
.service-control-group + .service-control-group {
    border-top: 1px solid var(--sg-edge);
    padding-top: 1.25rem;
}
.service-control-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.service-control-group__title,
.service-control-service__name {
    margin: 0;
    color: var(--sg-ink-strong);
    font-weight: 700;
}
.service-control-group__title { font-size: 1.125rem; }
.service-control-service__name { font-size: 0.9375rem; }
.service-control-services { margin-top: 0.75rem; }
.service-control-service {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 1rem;
    border: 1px solid var(--sg-edge);
    border-radius: var(--sg-radius-md);
    background: var(--sg-surface-raised);
}
.service-control-service__details { min-width: 0; }
.service-control-service__meta {
    margin: 0.25rem 0 0;
    color: var(--sg-ink-muted);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}
.service-control-result {
    grid-column: 1 / -1;
    min-height: 1.25rem;
    margin: 0;
    color: var(--sg-ink-muted);
    font-size: 0.8125rem;
}
.service-control-result:empty { display: none; }
.service-control-result--success { color: var(--sg-success); }
.service-control-result--failure { color: var(--sg-danger); }

@media (max-width: 480px) {
    .service-control-service { grid-template-columns: 1fr; }
    .service-control-service .saga-btn { justify-self: start; }
}

/* ---- Dashboard card reordering (JS-driven drag & drop) ------------------ */
.admin-tools-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: -0.25rem 0 0.85rem;
}
.admin-tools-hint { font-size: 0.8125rem; color: var(--sg-ink-muted); }
.admin-tools-reset { margin-left: auto; }
.admin-link-card--reorderable { position: relative; }
.admin-reorder-handle {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: var(--sg-radius-sm);
    background: transparent;
    color: var(--sg-ink-faint);
    cursor: grab;
    opacity: 0;
    transition: opacity var(--sg-transition), color var(--sg-transition), background var(--sg-transition);
    z-index: 2;
}
.admin-link-card--reorderable:hover .admin-reorder-handle,
.admin-reorder-handle:focus-visible { opacity: 1; }
.admin-reorder-handle:hover { color: var(--sg-ink-strong); background: var(--sg-neutral-soft); }
.admin-reorder-handle:active { cursor: grabbing; }
.admin-reorder-handle svg { width: 1rem; height: 1rem; pointer-events: none; }
.admin-link-card.is-dragging { opacity: 0.45; }
@media (hover: none) {
    /* Touch has no HTML5 drag-and-drop; keep the handle out of the way. */
    .admin-reorder-handle { display: none; }
}

/* ---- Setup page --------------------------------------------------------- */
.admin-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.admin-setup-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .admin-setup-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.admin-setup-actions .saga-btn { width: 100%; }
.admin-form-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem;
}
.admin-kv-table th { width: 12rem; white-space: nowrap; }
.admin-mono { font-family: var(--sg-font-mono); font-size: 0.8125rem; word-break: break-all; }