/* Admin monitor page — scoped under #admin-monitor-page to avoid global leakage.
   Uses theme tokens from _theme.css so the page adapts to cream/dark. */

#admin-monitor-page {
    max-width: 1140px;
    margin: 0 auto;
    padding: 32px 24px 64px !important;
}

#admin-monitor-page .admin-header {
    margin-bottom: 24px;
    border-bottom: 1px solid var(--m-border);
    padding-bottom: 12px;
}

#admin-monitor-page .admin-h2 {
    color: var(--m-text);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.6px;
    margin-bottom: 4px;
}

#admin-monitor-page .admin-subtitle {
    color: var(--m-text-muted);
    font-style: normal;
    font-size: 13px;
}

#admin-monitor-page .admin-tab {
    padding-top: 20px;
    min-height: 400px;
}

#admin-monitor-page .admin-kpi-card {
    background-color: var(--m-surface-raise);
    border: 1px solid var(--m-border);
}

#admin-monitor-page .admin-kpi-title {
    color: var(--m-text-muted);
    font-family: var(--m-font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

#admin-monitor-page .admin-kpi-value {
    color: var(--m-accent);
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 6px;
    letter-spacing: -0.6px;
}

#admin-monitor-page .admin-kpi-sub {
    color: var(--m-text-muted);
    font-size: 0.75rem;
}

/* dbc.Tabs in admin: align with theme — transparent, accent underline on active */
#admin-monitor-page .nav-tabs {
    border-bottom: 1px solid var(--m-border);
}

#admin-monitor-page .nav-tabs .nav-link {
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    color: var(--m-text-muted) !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    border-radius: 0 !important;
    margin-bottom: -1px;
}

#admin-monitor-page .nav-tabs .nav-link:hover {
    color: var(--m-text) !important;
}

#admin-monitor-page .nav-tabs .nav-link.active {
    color: var(--m-text) !important;
    border-bottom-color: var(--m-accent) !important;
    background: transparent !important;
}

/* Global by design: the admin navbar link is rendered outside the
   #admin-monitor-page wrapper, so this selector must be unscoped.
   The class name itself is unique to admin navigation. */
.admin-nav-link {
    color: var(--m-accent) !important;
    font-weight: 600;
}
.admin-nav-link:hover {
    color: var(--m-accent-hi) !important;
}