/* Admin page content — MudBlazor color overrides using --admin-* tokens.
   Layout/structure stays Mud; colors match the pre-refactor admin pages. */

.admin-page {
    font-family: var(--admin-font-family);
    padding-top: var(--admin-space-4);
}

/* Clear fixed app bar — content was sitting underneath it */
.admin-layout .admin-main.mud-main-content {
    padding-top: calc(64px + var(--admin-space-6)) !important;
}

.admin-page-title {
    color: var(--admin-on-surface) !important;
    font-size: var(--admin-text-2xl) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.25 !important;
}

.admin-page-subtitle {
    color: var(--admin-on-surface-variant) !important;
    font-size: var(--admin-text-base) !important;
    line-height: 1.5 !important;
}

/* Page breadcrumb — above page title, in main content (readable on light background) */
.admin-page-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-size: var(--admin-text-sm);
    font-weight: 500;
    line-height: 1.4;
}

.admin-page-breadcrumb__text,
.admin-page-breadcrumb__link {
    color: var(--admin-on-surface) !important;
    font-weight: 600;
    opacity: 1 !important;
}

.admin-page-breadcrumb__text--current {
    color: var(--admin-text-secondary) !important;
    font-weight: 500;
}

.admin-page-breadcrumb__separator {
    color: var(--admin-on-surface-variant) !important;
    font-weight: 500;
}

.admin-page-breadcrumb__link:hover {
    color: var(--admin-primary) !important;
}

/* Primary CTA (Users add, save actions) */
.admin-layout .mud-button-filled.mud-button-filled-primary {
    background-color: var(--admin-primary) !important;
    color: var(--admin-on-primary) !important;
}

.admin-layout .mud-button-filled.mud-button-filled-primary:hover {
    background-color: color-mix(in srgb, var(--admin-primary) 90%, transparent) !important;
}

/* Amber accent CTA (Topics/Bootcamps add) */
.admin-layout .admin-btn-accent.mud-button-filled {
    background-color: var(--admin-secondary-container) !important;
    color: var(--admin-on-secondary-container) !important;
}

.admin-layout .admin-btn-accent.mud-button-filled:hover {
    background-color: color-mix(in srgb, var(--admin-secondary-container) 92%, #000) !important;
}

/* Cards / papers */
.admin-layout .admin-page .mud-paper {
    background-color: var(--admin-surface-lowest) !important;
    border: 1px solid var(--admin-outline);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(27, 27, 36, 0.04);
}

/* KPI cards */
.admin-kpi-card {
    border-top: 3px solid var(--admin-primary);
    min-height: 88px;
}

.admin-kpi-card--primary {
    border-top-color: var(--admin-primary);
}

.admin-kpi-card--success {
    border-top-color: #22c55e;
}

.admin-kpi-card--warning {
    border-top-color: var(--admin-secondary-container);
}

.admin-kpi-card--warning .admin-kpi-value {
    color: var(--admin-secondary-container) !important;
}

.admin-kpi-label {
    color: var(--admin-text-secondary) !important;
    font-size: var(--admin-text-sm) !important;
    font-weight: 600 !important;
}

.admin-kpi-value {
    color: var(--admin-on-surface) !important;
    font-size: var(--admin-text-2xl) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Tables */
.admin-layout .admin-page .mud-table-root .mud-table {
    background-color: var(--admin-surface-lowest);
}

.admin-layout .admin-page .mud-table-root .mud-table-head .mud-table-cell {
    background-color: var(--admin-surface-alt) !important;
    color: var(--admin-on-surface-variant) !important;
    font-size: var(--admin-text-sm) !important;
    font-weight: 600 !important;
}

.admin-layout .admin-page .mud-table-root .mud-table-body .mud-table-row:hover {
    background-color: var(--admin-surface-container) !important;
}

/* Status chips */
.admin-chip-publish {
    background-color: #dcfce7 !important;
    color: #15803d !important;
}

.admin-chip-draft {
    background-color: var(--admin-surface-variant) !important;
    color: var(--admin-on-surface-variant) !important;
}

.admin-chip-closed {
    background-color: #ffedd5 !important;
    color: #9a3412 !important;
}

.admin-chip-active {
    background-color: var(--admin-primary-fixed) !important;
    color: var(--admin-on-primary-fixed) !important;
}

.admin-chip-inactive {
    background-color: var(--admin-secondary-container) !important;
    color: var(--admin-on-secondary-container) !important;
}

/* Role chips */
.admin-chip-role-student {
    background-color: var(--admin-surface-variant) !important;
    color: var(--admin-on-surface-variant) !important;
    border: 1px solid rgba(199, 196, 216, 0.5) !important;
}

.admin-chip-role-mentor {
    background-color: rgba(254, 166, 25, 0.2) !important;
    color: var(--admin-on-secondary-container) !important;
    border: 1px solid rgba(254, 166, 25, 0.3) !important;
}

.admin-chip-role-admin {
    background-color: var(--admin-primary) !important;
    color: var(--admin-on-primary) !important;
}

/* Category chips */
.admin-chip-category-design {
    background-color: rgba(53, 37, 205, 0.1) !important;
    color: var(--admin-primary) !important;
}

.admin-chip-category-data {
    background-color: #ffddb8 !important;
    color: #653e00 !important;
}

/* Filter chips (Topics/Bootcamps) */
.admin-layout .admin-filter-chip.mud-chip {
    border-radius: 6px;
}

.admin-layout .admin-filter-chip.mud-chip-filled {
    background-color: var(--admin-surface-lowest) !important;
    color: var(--admin-primary) !important;
    box-shadow: 0 1px 2px rgba(27, 27, 36, 0.08);
}

.admin-layout .admin-filter-chip.mud-chip-outlined {
    background-color: transparent !important;
    color: var(--admin-on-surface-variant) !important;
    border-color: transparent !important;
}

/* Topic row avatar tints */
.admin-avatar-design {
    background-color: rgba(79, 70, 229, 0.1) !important;
    color: var(--admin-primary) !important;
}

.admin-avatar-data {
    background-color: rgba(254, 166, 25, 0.15) !important;
    color: var(--admin-on-secondary-container) !important;
}

/* Chart */
.admin-layout .admin-page .mud-chart svg {
    color: var(--admin-primary);
}