/* NOVOGEX Admin Portal — Phase 3 page migration
   Applies the shared brand language to the main operational pages while
   preserving their existing layouts, data bindings, and business behavior. */

/* --------------------------------------------------------------------------
   Shared page hierarchy
   -------------------------------------------------------------------------- */

.admin-portal-shell :is(
    .admin-dashboard-section,
    .admin-projects-inline-table-panel,
    .admin-projects-inline-editor-card,
    .admin-projects-inline-activity-card,
    .admin-groups-shared-list-card,
    .admin-groups-shared-card,
    .admin-groups-shared-editor-card,
    .reference-material-details,
    .reference-lookup-editor,
    .admin-settings-section,
    .admin-settings-compact-card
) {
    border-color: color-mix(in srgb, var(--ng-primary) 12%, var(--ap-border-default));
}

.admin-portal-shell :is(
    .admin-dashboard-section,
    .admin-projects-inline-table-panel,
    .admin-projects-inline-editor-card,
    .admin-projects-inline-activity-card,
    .admin-groups-shared-list-card,
    .admin-groups-shared-card,
    .admin-groups-shared-editor-card,
    .reference-material-details,
    .reference-lookup-editor,
    .admin-settings-section,
    .admin-settings-compact-card
) {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--ng-primary) 3.5%, transparent), transparent 42%),
        var(--ap-bg-panel);
}

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */

.admin-portal-shell .admin-dashboard-grid {
    gap: 16px;
}

.admin-portal-shell .admin-dashboard-section {
    overflow: hidden;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--ng-navy-950) 9%, transparent);
}

.admin-portal-shell .admin-dashboard-section > .ap-card__header {
    border-bottom: 1px solid color-mix(in srgb, var(--ng-primary) 10%, var(--ap-border-subtle));
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--ng-primary) 7%, transparent), transparent 46%),
        var(--ap-bg-panel-muted);
}

.admin-portal-shell .admin-dashboard-section-title > span {
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--ng-primary-light) 38%, transparent);
    background: linear-gradient(145deg, var(--ng-primary-light), var(--ng-primary));
    box-shadow: 0 5px 14px color-mix(in srgb, var(--ng-primary) 20%, transparent);
}

.admin-portal-shell .admin-dashboard-section-title > .mud-icon-root {
    color: var(--ng-primary);
}

.admin-portal-shell .admin-dashboard-health-item,
.admin-portal-shell .admin-dashboard-metric,
.admin-portal-shell .admin-dashboard-quick-action,
.admin-portal-shell .admin-dashboard-quote-metric {
    border-color: color-mix(in srgb, var(--ng-primary) 9%, var(--ap-border-default));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--ng-primary) 3%, transparent), transparent 48%),
        var(--ap-bg-panel-muted);
}

.admin-portal-shell .admin-dashboard-health-item > span,
.admin-portal-shell .admin-dashboard-metric.blue > span,
.admin-portal-shell .admin-dashboard-metric.brand > span,
.admin-portal-shell .admin-dashboard-metric.purple > span,
.admin-portal-shell .admin-dashboard-list-icon.info,
.admin-portal-shell .admin-dashboard-project-icon {
    color: var(--ng-primary);
    background: var(--ng-primary-soft);
}

.admin-portal-shell .admin-dashboard-quick-action:hover {
    border-color: color-mix(in srgb, var(--ng-primary) 54%, var(--ap-border-default));
    background: color-mix(in srgb, var(--ng-primary) 7%, var(--ap-bg-panel));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ng-primary) 8%, transparent);
}

.admin-portal-shell .admin-dashboard-quick-action > .mud-icon-root,
.admin-portal-shell .admin-dashboard-footer-link,
.admin-portal-shell .admin-dashboard-project-table__row > a,
.admin-portal-shell .admin-dashboard-model-list .mud-icon-root {
    color: var(--ng-primary);
}

.admin-portal-shell .admin-dashboard-project-table__head {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--ng-primary) 7%, transparent), transparent),
        var(--ap-bg-panel-muted);
}

.admin-portal-shell .admin-dashboard-project-table__row:hover {
    background: color-mix(in srgb, var(--ng-primary) 4.5%, transparent);
}

.admin-portal-shell .admin-dashboard-project-table__row > a:hover {
    background: var(--ng-primary-soft);
}

.admin-portal-shell .admin-dashboard-storage-bar span {
    background: linear-gradient(90deg, var(--ng-primary-active), var(--ng-primary), var(--ng-primary-light));
    box-shadow: 0 0 12px color-mix(in srgb, var(--ng-primary) 24%, transparent);
}

.admin-portal-shell .admin-dashboard-donut {
    background: conic-gradient(
        var(--ap-status-success) var(--published),
        var(--ng-primary-light) 0 78%,
        color-mix(in srgb, var(--ap-content-muted) 18%, transparent) 0
    );
}

.admin-portal-shell .admin-dashboard-publication-stats .dot.recent {
    background: var(--ng-primary);
}

.admin-portal-shell .admin-dashboard-publication-stats .dot.month {
    background: var(--ng-primary-light);
}

/* --------------------------------------------------------------------------
   Projects
   -------------------------------------------------------------------------- */

.admin-portal-shell.admin-projects-design-system .admin-projects-inline-workspace {
    gap: 16px;
}

.admin-portal-shell.admin-projects-design-system :is(
    .admin-projects-inline-table-panel,
    .admin-projects-inline-editor-card,
    .admin-projects-inline-activity-card
) {
    border-color: color-mix(in srgb, var(--ng-primary) 13%, var(--ap-border-default));
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--ng-primary) 5%, transparent), transparent 32%),
        var(--ap-bg-panel);
    box-shadow: 0 14px 38px color-mix(in srgb, var(--ng-navy-950) 11%, transparent);
}

.admin-portal-shell.admin-projects-design-system .admin-projects-inline-list-card {
    border-color: color-mix(in srgb, var(--ng-primary) 10%, var(--ap-border-default));
    background: var(--ap-bg-panel-muted);
}

.admin-portal-shell.admin-projects-design-system .admin-projects-inline-list-head {
    color: var(--ap-content-muted);
}

.admin-portal-shell.admin-projects-design-system .admin-projects-inline-row {
    color: var(--ap-content-primary);
    border-color: var(--ap-border-subtle);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--ng-primary) 2.5%, transparent), transparent 40%),
        var(--ap-bg-panel);
    box-shadow: none;
}

.admin-portal-shell.admin-projects-design-system .admin-projects-inline-row:hover {
    border-color: color-mix(in srgb, var(--ng-primary) 34%, var(--ap-border-default));
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--ng-primary) 6%, transparent), transparent 50%),
        var(--ap-bg-panel);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ng-navy-950) 9%, transparent);
}

.admin-portal-shell.admin-projects-design-system .admin-projects-inline-row.selected {
    border-color: color-mix(in srgb, var(--ng-primary) 56%, var(--ap-border-default));
    background:
        linear-gradient(90deg, var(--ng-primary-soft), transparent 52%),
        var(--ap-bg-panel);
    box-shadow:
        inset 3px 0 0 var(--ng-primary),
        0 12px 28px color-mix(in srgb, var(--ng-primary) 8%, transparent);
}

.admin-portal-shell.admin-projects-design-system :is(
    .admin-projects-inline-name-cell strong,
    .admin-projects-inline-updated-cell strong,
    .admin-project-group-section-head h2,
    .admin-projects-inline-updated-cell-rich strong
) {
    color: var(--ap-content-primary);
}

.admin-portal-shell.admin-projects-design-system :is(
    .admin-projects-inline-name-cell small,
    .admin-projects-inline-name-cell em,
    .admin-projects-inline-updated-cell small,
    .admin-project-inline-mini-meta,
    .admin-projects-inline-updated-cell-rich small,
    .admin-project-group-section-head strong
) {
    color: var(--ap-content-muted);
}

.admin-portal-shell.admin-projects-design-system .admin-projects-inline-thumb,
.admin-portal-shell.admin-projects-design-system .admin-project-ref-preview {
    border-color: color-mix(in srgb, var(--ng-primary) 10%, var(--ap-border-default));
    background:
        radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--ng-primary) 8%, transparent), transparent 48%),
        var(--ap-bg-panel-muted);
}

.admin-portal-shell.admin-projects-design-system .admin-projects-inline-action-cell-rich {
    color: var(--ng-primary);
    border-color: var(--ng-primary-border);
    background: var(--ng-primary-soft);
}

.admin-portal-shell.admin-projects-design-system .admin-projects-inline-new-card {
    border-color: color-mix(in srgb, var(--ng-primary) 38%, var(--ap-border-default));
    background:
        linear-gradient(90deg, var(--ng-primary-soft), transparent 52%),
        var(--ap-bg-panel-muted);
}

.admin-portal-shell.admin-projects-design-system .admin-projects-inline-new-icon {
    color: var(--ng-primary);
    border-color: var(--ng-primary-border);
    background: var(--ng-primary-soft);
}

.admin-portal-shell.admin-projects-design-system .admin-projects-inline-new-card strong,
.admin-portal-shell.admin-projects-design-system .admin-project-group-section-head > div > span,
.admin-portal-shell.admin-projects-design-system .admin-projects-inline-activity-item .activity-icon.brand,
.admin-portal-shell.admin-projects-design-system .admin-projects-inline-activity-item .activity-icon.purple {
    color: var(--ng-primary);
}

.admin-portal-shell.admin-projects-design-system .admin-projects-edit-panel__header,
.admin-portal-shell.admin-projects-design-system .admin-projects-edit-panel__footer {
    border-color: color-mix(in srgb, var(--ng-primary) 10%, var(--ap-border-subtle));
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--ng-primary) 5%, transparent), transparent 50%),
        var(--ap-bg-panel-muted);
}

.admin-portal-shell.admin-projects-design-system .admin-projects-edit-panel__section-heading {
    color: var(--ng-primary);
}

/* --------------------------------------------------------------------------
   Project groups
   -------------------------------------------------------------------------- */

.admin-portal-shell.admin-groups-design-system .admin-groups-shared-toolbar {
    border-color: color-mix(in srgb, var(--ng-primary) 12%, var(--ap-border-default));
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--ng-primary) 5%, transparent), transparent 44%),
        var(--ap-bg-panel);
}

.admin-portal-shell.admin-groups-design-system .admin-groups-shared-list-row:hover {
    background: color-mix(in srgb, var(--ng-primary) 5%, var(--ap-bg-panel));
}

.admin-portal-shell.admin-groups-design-system .admin-groups-shared-list-row.is-selected {
    color: var(--ap-content-primary);
    border-color: color-mix(in srgb, var(--ng-primary) 48%, var(--ap-border-default));
    background:
        linear-gradient(90deg, var(--ng-primary-soft), transparent 54%),
        var(--ap-bg-panel);
    box-shadow: inset 3px 0 0 var(--ng-primary);
}

.admin-portal-shell.admin-groups-design-system .admin-groups-shared-card:hover {
    border-color: color-mix(in srgb, var(--ng-primary) 36%, var(--ap-border-default));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--ng-navy-950) 10%, transparent);
}

.admin-portal-shell.admin-groups-design-system .admin-groups-shared-card.is-selected {
    border-color: color-mix(in srgb, var(--ng-primary) 58%, var(--ap-border-default));
    background:
        linear-gradient(145deg, var(--ng-primary-soft), transparent 44%),
        var(--ap-bg-panel);
    box-shadow:
        inset 0 3px 0 var(--ng-primary),
        0 14px 30px color-mix(in srgb, var(--ng-primary) 9%, transparent);
}

.admin-portal-shell.admin-groups-design-system .admin-groups-shared-new-card {
    border-color: color-mix(in srgb, var(--ng-primary) 30%, var(--ap-border-default));
    background:
        radial-gradient(circle at 50% 0, var(--ng-primary-soft), transparent 58%),
        var(--ap-bg-panel-muted);
}

.admin-portal-shell.admin-groups-design-system .admin-groups-shared-new-button > .ap-button__icon,
.admin-portal-shell.admin-groups-design-system .admin-groups-shared-card-footer > span,
.admin-portal-shell.admin-groups-design-system .admin-groups-shared-section-title {
    color: var(--ng-primary);
}

.admin-portal-shell.admin-groups-design-system .admin-groups-shared-editor-card > .ap-card__header,
.admin-portal-shell.admin-groups-design-system .admin-groups-shared-editor-footer {
    border-color: color-mix(in srgb, var(--ng-primary) 10%, var(--ap-border-subtle));
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--ng-primary) 5%, transparent), transparent 50%),
        var(--ap-bg-panel-muted);
}

/* --------------------------------------------------------------------------
   Reference Data
   -------------------------------------------------------------------------- */

.admin-portal-shell.admin-reference-shell .reference-material-toolbar,
.admin-portal-shell.admin-reference-shell .reference-lookup-toolbar {
    border-color: color-mix(in srgb, var(--ng-primary) 12%, var(--ap-border-default));
}

.admin-portal-shell.admin-reference-shell .reference-material-card {
    border-color: color-mix(in srgb, var(--ng-primary) 9%, var(--ap-border-default));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--ng-primary) 3%, transparent), transparent 46%),
        var(--ap-bg-panel);
}

.admin-portal-shell.admin-reference-shell .reference-material-card:hover {
    border-color: color-mix(in srgb, var(--ng-primary) 44%, var(--ap-border-default));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--ng-primary) 6%, transparent), transparent 50%),
        var(--ap-bg-panel);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--ng-navy-950) 10%, transparent);
}

.admin-portal-shell.admin-reference-shell .reference-material-card.selected {
    border-color: color-mix(in srgb, var(--ng-primary) 66%, var(--ap-border-default));
    background:
        linear-gradient(145deg, var(--ng-primary-soft), transparent 52%),
        var(--ap-bg-panel);
    box-shadow:
        inset 0 3px 0 var(--ng-primary),
        0 12px 28px color-mix(in srgb, var(--ng-primary) 9%, transparent);
}

.admin-portal-shell.admin-reference-shell .reference-material-details-header,
.admin-portal-shell.admin-reference-shell .reference-material-edit-actions {
    border-color: color-mix(in srgb, var(--ng-primary) 10%, var(--ap-border-subtle));
}

.admin-portal-shell.admin-reference-shell .reference-material-section-title,
.admin-portal-shell.admin-reference-shell .reference-editor-section h3 {
    color: var(--ap-content-primary);
}

.admin-portal-shell.admin-reference-shell .reference-lookup-row:hover {
    border-color: color-mix(in srgb, var(--ng-primary) 48%, var(--ap-border-default));
    background:
        linear-gradient(90deg, var(--ng-primary-soft), transparent 56%),
        var(--ap-bg-panel);
}

.admin-portal-shell.admin-reference-shell .reference-lookup-icon,
.admin-portal-shell.admin-reference-shell .reference-upload-button:hover {
    color: var(--ng-primary);
}

/* --------------------------------------------------------------------------
   Settings
   -------------------------------------------------------------------------- */

.admin-portal-shell .admin-settings-nav-card {
    overflow: hidden;
    border-color: color-mix(in srgb, var(--ng-primary) 12%, var(--ap-border-default));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--ng-primary) 5%, transparent), transparent 34%),
        var(--ap-bg-panel);
}

.admin-portal-shell .admin-settings-nav-card::before {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(90deg, var(--ng-primary), var(--ng-primary-light), transparent 86%);
}

.admin-portal-shell .admin-settings-nav a.active,
.admin-portal-shell .admin-settings-nav a[aria-current="location"] {
    color: var(--ng-primary);
    border-color: var(--ng-primary-border);
    background: var(--ng-primary-soft);
    box-shadow: inset 3px 0 0 var(--ng-primary);
}

.admin-portal-shell .admin-settings-section {
    overflow: hidden;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--ng-navy-950) 8%, transparent);
}

.admin-portal-shell .admin-settings-section-intro {
    border-color: color-mix(in srgb, var(--ng-primary) 10%, var(--ap-border-subtle));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--ng-primary) 6%, transparent), transparent 58%),
        var(--ap-bg-panel-muted);
}

.admin-portal-shell .admin-settings-section-icon,
.admin-portal-shell .admin-settings-compact-card .ap-card__icon {
    color: var(--ng-primary);
    border-color: var(--ng-primary-border);
    background: var(--ng-primary-soft);
}

.admin-portal-shell .admin-settings-toggle-row {
    border-color: color-mix(in srgb, var(--ng-primary) 8%, var(--ap-border-default));
    background: var(--ap-bg-panel-muted);
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.admin-portal-shell .admin-settings-toggle-row:hover {
    border-color: color-mix(in srgb, var(--ng-primary) 30%, var(--ap-border-default));
    background: color-mix(in srgb, var(--ng-primary) 4%, var(--ap-bg-panel-muted));
}

.admin-portal-shell .admin-settings-switch input:checked + span {
    border-color: var(--ng-primary);
    background: linear-gradient(90deg, var(--ng-primary-active), var(--ng-primary));
    box-shadow: 0 0 0 3px var(--ng-primary-soft);
}

.admin-portal-shell .admin-settings-footer {
    overflow: hidden;
    border-color: color-mix(in srgb, var(--ng-primary) 18%, var(--ap-border-default));
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--ng-primary) 5%, transparent), transparent 44%),
        color-mix(in srgb, var(--ap-bg-content) 94%, transparent);
}

.admin-portal-shell .admin-settings-footer::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--ng-primary);
    box-shadow: 0 0 12px var(--ng-primary-glow);
}

/* Day theme keeps the migrated pages bright and operational. */
html[data-admin-theme="day"] .admin-portal-shell :is(
    .admin-dashboard-section,
    .admin-projects-inline-table-panel,
    .admin-projects-inline-editor-card,
    .admin-projects-inline-activity-card,
    .admin-groups-shared-list-card,
    .admin-groups-shared-card,
    .admin-groups-shared-editor-card,
    .reference-material-details,
    .reference-lookup-editor,
    .admin-settings-section,
    .admin-settings-compact-card
) {
    box-shadow: 0 12px 30px rgba(15, 23, 42, .07);
}

@media (prefers-reduced-motion: reduce) {
    .admin-portal-shell :is(
        .admin-dashboard-quick-action,
        .admin-projects-inline-row,
        .admin-groups-shared-card,
        .reference-material-card,
        .admin-settings-toggle-row
    ) {
        transition: none;
        transform: none !important;
    }
}