/* ============================================
   Seph Admin — extracted from seph.css
   ============================================
   Loaded only by /admin.html. Shared classes that the dashboard also
   uses (confirm-modal*, form-input, form-textarea, form-status*) stay
   in seph.css so they're available to both pages without duplication.
   ============================================ */

/* ============================================
   Admin Panel (tabs, toolbar, search, reports, live, table, badges,
   urgency, filter pills, ticket rows, status-done, action group)
   ============================================ */

.admin-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(232, 230, 227, 0.1);
    margin-bottom: var(--space-md);
}

.admin-tab {
    padding: 10px 20px;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition-fast);
}

.admin-tab:hover {
    color: var(--text-primary);
}

.admin-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.admin-tab-content {
    display: none;
}

.admin-tab-content.active {
    display: block;
}

.admin-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.admin-search {
    width: 100%;
    max-width: 360px;
    padding: 10px 14px;
    font-family: var(--font-primary);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid rgba(232, 230, 227, 0.12);
    border-radius: 6px;
    transition: var(--transition-fast);
}

.admin-search:focus {
    outline: none;
    border-color: var(--accent);
}

.admin-search::placeholder {
    color: var(--text-secondary);
}

/* Admin reports (metrics) */
.admin-reports-updated {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: var(--space-sm);
}

.admin-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
}

@media (max-width: 720px) {
    .admin-metrics-grid {
        grid-template-columns: 1fr;
    }
}

.metric-card {
    background: var(--bg-secondary);
    border: 1px solid rgba(232, 230, 227, 0.08);
    border-radius: 12px;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.metric-sub-heading {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    margin-top: var(--space-sm);
}

.metric-subvalues {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
    border-top: 1px solid rgba(232, 230, 227, 0.08);
    padding-top: var(--space-xs);
}

.metric-subvalue {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.metric-sub-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
}

.metric-sub-value {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-primary);
}

/* Admin live (who's on the server right now) */
.admin-live {
    margin-bottom: var(--space-lg);
}

.admin-live-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}

.admin-live-title {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    margin: 0;
}

.admin-live-controls {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.admin-live-window {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 12px;
    color: var(--text-secondary);
}

.admin-live-select {
    font-family: var(--font-primary);
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid rgba(232, 230, 227, 0.12);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
}

.admin-live-select:focus {
    outline: none;
    border-color: var(--accent);
}

.admin-live-updated {
    font-size: 12px;
    color: var(--text-secondary);
}

.admin-live-tile {
    background: var(--bg-secondary);
    border: 1px solid rgba(168, 216, 216, 0.18);
    border-radius: 12px;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-live-tile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: 2px;
}

.admin-live-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(232, 230, 227, 0.12);
    background: rgba(232, 230, 227, 0.05);
    color: var(--text-secondary);
}

.admin-live-status-pill::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.admin-live-status-busy {
    color: var(--accent);
    border-color: rgba(168, 216, 216, 0.35);
    background: rgba(168, 216, 216, 0.08);
}

.admin-live-status-busy::before {
    animation: admin-live-pulse 2s ease-in-out infinite;
}

.admin-live-status-recent {
    color: #E8C7A8;
    border-color: rgba(220, 180, 130, 0.35);
    background: rgba(220, 180, 130, 0.08);
}

.admin-live-status-quiet {
    color: var(--text-secondary);
}

@keyframes admin-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(168, 216, 216, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(168, 216, 216, 0); }
}

.admin-live-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.admin-live-line-primary {
    font-size: 18px;
    color: var(--text-primary);
}

.admin-live-line-primary strong {
    font-size: 24px;
    font-weight: 300;
}

.admin-live-line-primary .admin-live-sessions {
    font-size: 13px;
    color: var(--text-secondary);
}

.admin-live-line-secondary {
    font-size: 13px;
    color: var(--text-secondary);
}

.admin-live-line-muted {
    opacity: 0.55;
}

.admin-live-actions {
    margin-top: var(--space-sm);
}

.admin-live-sessions-wrap {
    margin-top: var(--space-sm);
}

.admin-live-row-ended td {
    color: var(--text-secondary);
    opacity: 0.7;
}

.admin-live-pill.ended {
    color: var(--text-secondary);
    border-color: rgba(232, 230, 227, 0.12);
    background: rgba(232, 230, 227, 0.04);
}

.admin-live-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    background: rgba(232, 230, 227, 0.06);
    border: 1px solid rgba(232, 230, 227, 0.1);
}

.admin-live-pill.foreground {
    color: var(--accent);
    border-color: rgba(168, 216, 216, 0.3);
}

.admin-live-user-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Admin table */

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.admin-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(232, 230, 227, 0.1);
    white-space: nowrap;
}

.admin-table tbody td {
    padding: 10px 12px;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(232, 230, 227, 0.04);
    vertical-align: middle;
}

.admin-table tbody tr:hover {
    background: rgba(232, 230, 227, 0.02);
}

.admin-th-check {
    width: 36px;
}

.admin-td-interest {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-td-actions {
    white-space: nowrap;
    text-align: right;
}

/* Admin badges */

.admin-badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 12px;
}

.admin-badge-pending {
    background: rgba(154, 149, 144, 0.15);
    color: var(--text-secondary);
}

.admin-badge-approved {
    background: rgba(168, 216, 216, 0.15);
    color: var(--accent);
}

.admin-badge-open {
    background: rgba(154, 149, 144, 0.15);
    color: var(--text-secondary);
}

.admin-badge-in-progress {
    background: rgba(227, 180, 110, 0.15);
    color: #e3b46e;
}

.admin-badge-resolved {
    background: rgba(168, 216, 216, 0.15);
    color: var(--accent);
}

.admin-badge-deletion {
    background: rgba(207, 102, 121, 0.15);
    color: #f0b8be;
}

.admin-urgency {
    display: inline-block;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 12px;
    text-transform: capitalize;
}

.admin-urgency-low {
    background: rgba(154, 149, 144, 0.12);
    color: var(--text-secondary);
}

.admin-urgency-normal {
    background: rgba(232, 230, 227, 0.08);
    color: var(--text-primary);
}

.admin-urgency-high {
    background: rgba(227, 180, 110, 0.18);
    color: #e3b46e;
}

.admin-urgency-blocked {
    background: rgba(212, 123, 106, 0.18);
    color: #d47b6a;
}

.admin-filter-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-filter-pill {
    padding: 6px 12px;
    font-size: 13px;
    background: rgba(232, 230, 227, 0.04);
    border: 1px solid rgba(232, 230, 227, 0.12);
    border-radius: 999px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: var(--font-primary);
}

.admin-filter-pill:hover {
    border-color: rgba(168, 216, 216, 0.4);
    color: var(--text-primary);
}

.admin-filter-pill.active {
    background: rgba(168, 216, 216, 0.14);
    border-color: var(--accent);
    color: var(--accent);
}

.admin-ticket-row {
    cursor: pointer;
}

.admin-ticket-detail td {
    padding: 16px 20px !important;
    background: rgba(232, 230, 227, 0.02);
    border-top: 1px solid rgba(232, 230, 227, 0.04) !important;
}

.admin-ticket-detail-body {
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--text-primary);
    background: rgba(26, 26, 26, 0.4);
    border: 1px solid rgba(232, 230, 227, 0.08);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 12px;
    word-break: break-word;
}

.admin-ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.admin-ticket-meta code {
    font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
    color: var(--text-primary);
}

.admin-ticket-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-status-done {
    font-size: 13px;
    color: var(--accent);
    font-weight: 500;
}

/* Admin action groups */

.admin-action-group {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}


/* ============================================
   Admin: confirmation modal extras (admin-only — checkbox, field, hint)
   ============================================ */

.confirm-modal-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    margin-bottom: var(--space-md);
}

.confirm-modal-field {
    margin-bottom: var(--space-md);
}

.confirm-modal-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.admin-delete-hint {
    font-size: 12px;
    margin: 6px 0 0;
    min-height: 1em;
    color: var(--text-secondary);
}

.admin-delete-hint-ok {
    color: var(--accent);
}

.admin-delete-hint-err {
    color: #d47b6a;
}

/* Admin pagination */

/* ============================================
   Admin: pagination, templates, fields, actions, preview
   ============================================ */

.admin-pagination {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.admin-pagination-info {
    font-size: 13px;
    color: var(--text-secondary);
    margin-right: auto;
}

/* Email template cards */

.admin-templates-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.admin-template-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid rgba(232, 230, 227, 0.06);
    border-radius: 8px;
}

.admin-template-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.admin-template-card-subject {
    font-size: 13px;
    color: var(--text-secondary);
}

.admin-template-card-meta {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.7;
    margin-top: 2px;
}

/* Email template editor */

.admin-template-editor {
    max-width: 720px;
}

.admin-field {
    margin-bottom: var(--space-md);
}

.admin-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.admin-field-hint {
    font-size: 13px;
    color: var(--accent);
    font-family: monospace;
}

.admin-template-preview {
    min-height: 80px;
}

.admin-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* ============================================
   Admin Campaigns
   ============================================ */

.admin-campaigns-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.admin-campaign-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 6px;
    background: rgba(232, 230, 227, 0.1);
    color: var(--text-primary);
}

.admin-campaign-status-draft   { background: rgba(154, 149, 144, 0.18); color: #c9c4be; }
.admin-campaign-status-sending { background: rgba(168, 216, 216, 0.18); color: var(--accent); }
.admin-campaign-status-sent    { background: rgba(106, 168, 138, 0.22); color: #a8d8b8; }
.admin-campaign-status-failed  { background: rgba(212, 123, 106, 0.22); color: #d47b6a; }
.admin-campaign-status-skipped { background: rgba(154, 149, 144, 0.18); color: #c9c4be; }

.admin-campaign-cat-system    { background: rgba(154, 149, 144, 0.18); color: #c9c4be; }
.admin-campaign-cat-product   { background: rgba(168, 216, 216, 0.20); color: var(--accent); }
.admin-campaign-cat-marketing { background: rgba(216, 184, 168, 0.20); color: #d8b8a8; }

.admin-campaign-totals {
    margin-left: 6px;
    color: var(--text-secondary);
}

/* ============================================
   Fleet (admin → Fleet tab)
   ============================================ */

.admin-fleet-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.admin-fleet-model {
    font-size: 12px;
    color: var(--text-primary);
    background: rgba(232, 230, 227, 0.04);
    padding: 2px 6px;
    border-radius: 4px;
    word-break: break-all;
}

.admin-fleet-managed {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    font-size: 11px;
    color: var(--text-secondary);
    background: rgba(154, 149, 144, 0.12);
    border-radius: 10px;
}

.admin-badge-healthy {
    background: rgba(168, 216, 216, 0.15);
    color: var(--accent);
}

.admin-badge-unhealthy,
.admin-badge-degraded {
    background: rgba(227, 180, 110, 0.15);
    color: #e3b46e;
}

.admin-badge-unknown {
    background: rgba(154, 149, 144, 0.15);
    color: var(--text-secondary);
}

.admin-fleet-row-highlight {
    animation: admin-fleet-flash 1.6s ease-out 1;
}

@keyframes admin-fleet-flash {
    0%   { background: rgba(168, 216, 216, 0.18); }
    100% { background: transparent; }
}

/* ============================================
   Fleet sections (Serving instances + Training jobs)
   Shared layout primitives so both subviews stay visually aligned.
   ============================================ */

.admin-fleet-section + .admin-fleet-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(232, 230, 227, 0.08);
}

.admin-fleet-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.admin-fleet-section-header .panel-subtitle {
    margin: 0;
}

.admin-fleet-section-header .form-status {
    margin-left: auto;
}

.admin-fleet-section-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Single notice primitive used for loading, empty, warning, and error
   states across both fleet sections. Same shape, alignment, padding —
   color is the only thing that changes, so the visual stays stable as
   the state transitions:
     default            — neutral grey   ("loading", quiet status)
     --warning (yellow) — attention-needed (e.g. "no resources registered")
     --error   (red)    — fetch failed
   Always sits above the table, never inside it, so it stays visible
   even when the table is collapsed (Training jobs). */
.admin-fleet-notice {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid rgba(232, 230, 227, 0.12);
    border-radius: 6px;
    text-align: left;
}

.admin-fleet-notice-warning {
    color: #e3b46e;
    background: rgba(227, 180, 110, 0.1);
    border-color: rgba(227, 180, 110, 0.25);
}

.admin-fleet-notice-error {
    color: #d47b6a;
    background: rgba(212, 123, 106, 0.08);
    border-color: rgba(212, 123, 106, 0.25);
}

.admin-fleet-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

/* Small diagnostic line under each section header showing what
   providers are configured (from /api/admin/{serving,training}-providers).
   Quiet, secondary text — informational, not an action. */
.admin-fleet-info {
    margin: -4px 0 var(--space-md);
    font-size: 12px;
    color: var(--text-secondary);
}

/* Filter controls (selects + text inputs in the fleet/training toolbars).
   Single class for both element types so they line up and share colors;
   selects get an explicit dark-theme dropdown arrow because native
   styling falls back to OS chrome on dark backgrounds. */
.admin-fleet-filter {
    width: 100%;
    max-width: 240px;
    padding: 10px 14px;
    font-family: var(--font-primary);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid rgba(232, 230, 227, 0.12);
    border-radius: 6px;
    transition: var(--transition-fast);
}

.admin-fleet-filter:focus {
    outline: none;
    border-color: var(--accent);
}

.admin-fleet-filter::placeholder {
    color: var(--text-secondary);
}

select.admin-fleet-filter {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%239A9590' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}

/* Best-effort dark dropdown — Chromium honors this, Safari ignores. */
.admin-fleet-filter option,
.admin-fleet-filter optgroup {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Training-specific: counter tiles stacked above the filter toolbar. */
.admin-training-counters {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.admin-training-counter {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-sm) var(--space-md);
    min-width: 140px;
    background: var(--bg-secondary);
    border: 1px solid rgba(232, 230, 227, 0.08);
    border-radius: 8px;
}

.admin-training-counter-value {
    font-size: 28px;
    font-weight: 400;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.admin-training-counter-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
}

.admin-badge-queued,
.admin-badge-cancelled {
    background: rgba(154, 149, 144, 0.15);
    color: var(--text-secondary);
}

.admin-badge-running {
    background: rgba(227, 180, 110, 0.15);
    color: #e3b46e;
}

.admin-badge-completed {
    background: rgba(106, 168, 138, 0.22);
    color: #a8d8b8;
}

.admin-badge-failed {
    background: rgba(212, 123, 106, 0.22);
    color: #d47b6a;
}

/* ============================================
   Admin standalone page (admin.html)
   ============================================ */

/* The admin page reuses the dashboard body shell (.dashboard-body), which
   pins the body to height:100vh; overflow:hidden so the dashboard can scroll
   inside its .dashboard-main grid child. Admin content instead lives in the
   in-flow .admin-main block, so that clamp would clip anything taller than the
   viewport with no way to scroll. Release the clamp here (this rule loads after
   seph.css) so the admin document scrolls normally beneath the fixed nav. */
.admin-body {
    overflow-y: auto;
    height: auto;
}

.admin-main {
    margin-top: var(--nav-height);
    padding: var(--space-lg) var(--space-xl);
    max-width: 1400px;
}

.admin-nav-back,
.admin-nav-signout {
    font-size: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition-fast);
}

.admin-nav-back:hover,
.admin-nav-signout:hover {
    color: var(--text-primary);
}

.admin-body #panel-admin {
    display: block;
}


/* ============================================
   Responsive (narrow viewport admin overrides)
   ============================================ */

@media (max-width: 768px) {
    .admin-tabs {
        overflow-x: auto;
    }

    .admin-action-group {
        flex-direction: column;
        gap: 4px;
    }

    .admin-confirm-text {
        font-size: 12px;
    }

    .admin-template-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .admin-toolbar {
        flex-direction: column;
    }

    .admin-search {
        max-width: none;
    }
}