/* NOVOGEX Brand Migration — Phase 4
   Final migration of operational pages. This layer intentionally uses the
   shared semantic tokens and keeps the Admin Portal calmer than Splash/Login. */

/* --------------------------------------------------------------------------
   Shared operational-page signature
   -------------------------------------------------------------------------- */

.admin-portal-shell:is(
    .admin-quotes-design-system,
    .admin-email-routing-design-system,
    .admin-models-design-system,
    .product-pricing-design-system,
    .abt-design-system,
    .act-design-system,
    .admin-users-design-system,
    .admin-subscription-design-system
) {
    --ng-page-panel-border: color-mix(in srgb, var(--ng-primary) 12%, var(--ap-border-default));
    --ng-page-panel-shadow: 0 14px 34px color-mix(in srgb, var(--ng-navy-950) 9%, transparent);
}

.admin-portal-shell:is(
    .admin-quotes-design-system,
    .admin-email-routing-design-system,
    .admin-models-design-system,
    .product-pricing-design-system,
    .abt-design-system,
    .act-design-system,
    .admin-users-design-system,
    .admin-subscription-design-system
) :is(input, select, textarea):focus-visible {
    outline: 0;
    border-color: var(--ng-primary) !important;
    box-shadow: 0 0 0 3px var(--ng-primary-soft) !important;
}

/* --------------------------------------------------------------------------
   Quote Requests
   -------------------------------------------------------------------------- */

.admin-portal-shell.admin-quotes-design-system .admin-quotes-kpi,
.admin-portal-shell.admin-quotes-design-system :is(.admin-quotes-list-panel, .admin-quotes-details-panel) {
    border-color: var(--ng-page-panel-border);
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--ng-primary) 4%, transparent), transparent 34%),
        var(--ap-bg-panel);
    box-shadow: var(--ng-page-panel-shadow);
}

.admin-portal-shell.admin-quotes-design-system .admin-quotes-kpi:first-child {
    box-shadow: inset 0 2px 0 var(--ng-primary), var(--ng-page-panel-shadow);
}

.admin-portal-shell.admin-quotes-design-system .admin-quotes-kpi strong,
.admin-portal-shell.admin-quotes-design-system .admin-quotes-shared-list-title .mud-icon-root,
.admin-portal-shell.admin-quotes-design-system .admin-quotes-details-head-copy .mud-icon-root {
    color: var(--ng-primary);
}

.admin-portal-shell.admin-quotes-design-system .admin-quotes-list-head {
    border-bottom-color: color-mix(in srgb, var(--ng-primary) 11%, var(--ap-border-subtle));
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--ng-primary) 7%, transparent), transparent 55%),
        var(--ap-bg-panel-muted);
}

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

.admin-portal-shell.admin-quotes-design-system .admin-quotes-row.selected {
    border-color: color-mix(in srgb, var(--ng-primary) 52%, 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);
}

.admin-portal-shell.admin-quotes-design-system :is(
    .admin-quotes-workflow-card,
    .admin-quotes-detail-card,
    .admin-quotes-notification-card
) {
    border-color: color-mix(in srgb, var(--ng-primary) 13%, var(--ap-border-default));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--ng-primary) 4%, transparent), transparent 56%),
        var(--ap-bg-panel-muted);
}

.admin-portal-shell.admin-quotes-design-system .admin-quotes-workflow-heading span,
.admin-portal-shell.admin-quotes-design-system .admin-quotes-detail-card a,
.admin-portal-shell.admin-quotes-design-system .admin-quotes-settings-link {
    color: var(--ng-primary);
}

.admin-portal-shell.admin-quotes-design-system .admin-quotes-link-actions a:hover {
    color: var(--ng-primary);
    border-color: var(--ng-primary-border);
    background: var(--ng-primary-soft);
}

.admin-portal-shell.admin-quotes-design-system .admin-quotes-status-action.active,
.admin-portal-shell.admin-quotes-design-system .admin-quotes-status-editor button.active {
    border-color: var(--ng-primary);
    background: linear-gradient(135deg, var(--ng-primary), var(--ng-primary-active));
    box-shadow: 0 7px 18px color-mix(in srgb, var(--ng-primary) 18%, transparent);
}

/* --------------------------------------------------------------------------
   Email Routing
   -------------------------------------------------------------------------- */

.admin-portal-shell.admin-email-routing-design-system .admin-email-routing-toolbar,
.admin-portal-shell.admin-email-routing-design-system .admin-email-route-card {
    border-color: var(--ng-page-panel-border);
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--ng-primary) 4%, transparent), transparent 34%),
        var(--ap-bg-panel);
    box-shadow: var(--ng-page-panel-shadow);
}

.admin-portal-shell.admin-email-routing-design-system .admin-email-routing-security-icon,
.admin-portal-shell.admin-email-routing-design-system .admin-email-route-icon {
    color: var(--ng-primary);
    border-color: var(--ng-primary-border);
    background: var(--ng-primary-soft);
}

.admin-portal-shell.admin-email-routing-design-system .admin-email-route-card.is-enabled {
    border-color: color-mix(in srgb, var(--ng-primary) 35%, var(--ap-border-default));
    box-shadow: inset 0 2px 0 var(--ng-primary), var(--ng-page-panel-shadow);
}

.admin-portal-shell.admin-email-routing-design-system .admin-email-route-card.is-disabled {
    filter: saturate(.78);
}

.admin-portal-shell.admin-email-routing-design-system .admin-email-route-card > :is(.ap-card__header, .ap-card__footer),
.admin-portal-shell.admin-email-routing-design-system .admin-email-route-section {
    border-color: color-mix(in srgb, var(--ng-primary) 9%, var(--ap-border-subtle));
}

.admin-portal-shell.admin-email-routing-design-system .admin-email-route-card > .ap-card__header {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--ng-primary) 5%, transparent), transparent 52%),
        var(--ap-bg-panel-muted);
}

.admin-portal-shell.admin-email-routing-design-system .admin-email-route-token-list span,
.admin-portal-shell.admin-email-routing-design-system .admin-email-route-key {
    color: var(--ng-primary);
    border-color: var(--ng-primary-border);
    background: var(--ng-primary-soft);
}

/* --------------------------------------------------------------------------
   Models & Parts
   -------------------------------------------------------------------------- */

.admin-portal-shell.admin-models-design-system .admin-models-kpis article,
.admin-portal-shell.admin-models-design-system :is(.admin-model-list-panel, .admin-parts-panel) {
    color: var(--ap-content-primary);
    border-color: var(--ng-page-panel-border);
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--ng-primary) 4%, transparent), transparent 36%),
        var(--ap-bg-panel);
    box-shadow: var(--ng-page-panel-shadow);
}

.admin-portal-shell.admin-models-design-system .admin-models-kpis article:first-child {
    box-shadow: inset 0 2px 0 var(--ng-primary), var(--ng-page-panel-shadow);
}

.admin-portal-shell.admin-models-design-system .admin-models-kpis article strong,
.admin-portal-shell.admin-models-design-system .admin-parts-header h2,
.admin-portal-shell.admin-models-design-system .admin-model-list-copy strong {
    color: var(--ap-content-primary);
}

.admin-portal-shell.admin-models-design-system :is(.admin-model-list-panel > header, .admin-parts-header, .admin-parts-bulk-toolbar) {
    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 54%),
        var(--ap-bg-panel-muted);
}

.admin-portal-shell.admin-models-design-system .admin-model-list-item:hover {
    border-color: color-mix(in srgb, var(--ng-primary) 27%, var(--ap-border-default));
    background: color-mix(in srgb, var(--ng-primary) 5%, var(--ap-bg-panel-muted));
}

.admin-portal-shell.admin-models-design-system .admin-model-list-item.active {
    border-color: color-mix(in srgb, var(--ng-primary) 58%, var(--ap-border-default));
    background:
        linear-gradient(90deg, var(--ng-primary-soft), transparent 72%),
        var(--ap-bg-panel-muted);
    box-shadow: inset 3px 0 0 var(--ng-primary);
}

.admin-portal-shell.admin-models-design-system .admin-model-icon,
.admin-portal-shell.admin-models-design-system .admin-bulk-count {
    color: var(--ng-primary);
    border-color: var(--ng-primary-border);
    background: var(--ng-primary-soft);
}

.admin-portal-shell.admin-models-design-system :is(.admin-model-search, .admin-parts-search, .admin-part-input, .admin-parts-toolbar select, .admin-bulk-control input) {
    color: var(--ap-content-primary);
    border-color: var(--ap-border-default);
    background: var(--ap-bg-control);
}

.admin-portal-shell.admin-models-design-system .admin-part-visible-toggle input:checked + span {
    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-models-design-system :is(.admin-part-save, .admin-part-preview-button, .admin-bulk-control > button, .admin-bulk-visibility-actions button):hover:not(:disabled) {
    color: var(--ng-primary);
    border-color: var(--ng-primary-border);
    background: var(--ng-primary-soft);
}

.admin-save-confirm-dialog .admin-save-confirm-icon {
    background: linear-gradient(135deg, var(--ng-primary), var(--ng-primary-active));
    box-shadow: 0 10px 26px var(--ng-primary-glow);
}

/* --------------------------------------------------------------------------
   Product Pricing
   -------------------------------------------------------------------------- */

.admin-portal-shell.product-pricing-design-system :is(
    .product-pricing-project-bar,
    .product-pricing-shared-card,
    .summary-card,
    .checks-card,
    .product-pricing-setup
) {
    border-color: var(--ng-page-panel-border);
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--ng-primary) 4%, transparent), transparent 34%),
        var(--ap-bg-panel);
    box-shadow: var(--ng-page-panel-shadow);
}

.admin-portal-shell.product-pricing-design-system .summary-card:first-child,
.admin-portal-shell.product-pricing-design-system .product-pricing-project-bar {
    box-shadow: inset 0 2px 0 var(--ng-primary), var(--ng-page-panel-shadow);
}

.admin-portal-shell.product-pricing-design-system :is(.panel-title .mud-icon-root, .ready-icon, .pricing-formula strong) {
    color: var(--ng-primary);
}

.admin-portal-shell.product-pricing-design-system .product-pricing-options tbody tr:hover {
    background: color-mix(in srgb, var(--ng-primary) 4.5%, transparent);
}

.admin-portal-shell.product-pricing-design-system :is(.preview-choice.active, .impact-select:focus, .amount-input:focus, .bulk-amount-input:focus) {
    border-color: var(--ng-primary);
    box-shadow: 0 0 0 3px var(--ng-primary-soft);
}

.admin-portal-shell.product-pricing-design-system .product-pricing-switch input:checked + span {
    background: linear-gradient(90deg, var(--ng-primary-active), var(--ng-primary));
}

.admin-portal-shell.product-pricing-design-system .bulk-price-toggle:hover {
    color: var(--ng-primary);
    border-color: var(--ng-primary-border);
    background: var(--ng-primary-soft);
}

/* --------------------------------------------------------------------------
   Buyer Template & Communication Templates
   -------------------------------------------------------------------------- */

.admin-portal-shell.abt-design-system :is(.abt-target-bar, .abt-card, .abt-preview-column),
.admin-portal-shell.act-design-system :is(.act-shared-toolbar, .act-shared-card, .act-preview-card, .act-scope-card) {
    border-color: var(--ng-page-panel-border);
    box-shadow: var(--ng-page-panel-shadow);
}

.admin-portal-shell.abt-design-system :is(.abt-target-bar, .abt-card),
.admin-portal-shell.act-design-system :is(.act-shared-toolbar, .act-shared-card, .act-preview-card, .act-scope-card) {
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--ng-primary) 4%, transparent), transparent 34%),
        var(--ap-bg-panel);
}

.admin-portal-shell.abt-design-system .abt-presets button:hover,
.admin-portal-shell.act-design-system .act-block-switch:hover {
    border-color: color-mix(in srgb, var(--ng-primary) 32%, var(--ap-border-default));
    background: color-mix(in srgb, var(--ng-primary) 5%, var(--ap-bg-panel-muted));
}

.admin-portal-shell.abt-design-system .abt-presets button.active,
.admin-portal-shell.act-design-system :is(.act-template-tabs .ap-tab.is-active, .act-device-switch .ap-button.is-selected) {
    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.abt-design-system :is(.abt-card-title > span, .abt-preview-valid),
.admin-portal-shell.act-design-system :is(.act-card-heading > span, .act-preview-note .mud-icon-root, .act-variable-badge) {
    color: var(--ng-primary);
    border-color: var(--ng-primary-border);
    background: var(--ng-primary-soft);
}

.admin-portal-shell.abt-design-system .abt-switch input:checked + span,
.admin-portal-shell.act-design-system .act-master-switch input:checked,
.admin-portal-shell.act-design-system .act-block-switch input:checked {
    background: linear-gradient(90deg, var(--ng-primary-active), var(--ng-primary));
    box-shadow: 0 0 0 3px var(--ng-primary-soft);
}

/* --------------------------------------------------------------------------
   Users
   -------------------------------------------------------------------------- */

.admin-portal-shell.admin-users-design-system :is(
    .admin-users-shared-kpi,
    .admin-users-shared-list-panel,
    .admin-users-shared-editor,
    .admin-users-shared-role-guide
) {
    border-color: var(--ng-page-panel-border);
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--ng-primary) 4%, transparent), transparent 34%),
        var(--ap-bg-panel);
    box-shadow: var(--ng-page-panel-shadow);
}

.admin-portal-shell.admin-users-design-system .admin-users-shared-kpi.is-primary {
    box-shadow: inset 0 2px 0 var(--ng-primary), var(--ng-page-panel-shadow);
}

.admin-portal-shell.admin-users-design-system .admin-users-shared-kpi-icon.is-primary,
.admin-portal-shell.admin-users-design-system .admin-users-shared-editor-title > span,
.admin-portal-shell.admin-users-design-system .admin-users-shared-section-heading > span {
    color: var(--ng-primary);
    border-color: var(--ng-primary-border);
    background: var(--ng-primary-soft);
}

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

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

.admin-portal-shell.admin-users-design-system .admin-users-shared-avatar {
    color: var(--ng-primary);
    border-color: var(--ng-primary-border);
    background: var(--ng-primary-soft);
}

.admin-portal-shell.admin-users-design-system .admin-users-shared-setting-row input:checked + .admin-users-shared-switch {
    background: linear-gradient(90deg, var(--ng-primary-active), var(--ng-primary));
    box-shadow: 0 0 0 3px var(--ng-primary-soft);
}

/* --------------------------------------------------------------------------
   Subscription
   -------------------------------------------------------------------------- */

.admin-portal-shell.admin-subscription-design-system :is(
    .admin-subscription-stat-card,
    .admin-subscription-card,
    .admin-subscription-model-limits,
    .admin-trial-banner
) {
    border-color: var(--ng-page-panel-border);
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--ng-primary) 4%, transparent), transparent 34%),
        var(--ap-bg-panel);
    box-shadow: var(--ng-page-panel-shadow);
}

.admin-portal-shell.admin-subscription-design-system .admin-subscription-stat-card:first-child,
.admin-portal-shell.admin-subscription-design-system .admin-trial-banner {
    box-shadow: inset 0 2px 0 var(--ng-primary), var(--ng-page-panel-shadow);
}

.admin-portal-shell.admin-subscription-design-system :is(
    .admin-subscription-stat-head > .mud-icon-root,
    .admin-trial-icon,
    .admin-subscription-card-icon,
    .admin-subscription-model-limits-head > span
) {
    color: var(--ng-primary);
    border-color: var(--ng-primary-border);
    background: var(--ng-primary-soft);
}

.admin-portal-shell.admin-subscription-design-system .admin-subscription-limit-kpis article {
    border-color: color-mix(in srgb, var(--ng-primary) 10%, var(--ap-border-default));
    background: var(--ap-bg-panel-muted);
}

.admin-portal-shell.admin-subscription-design-system .admin-subscription-limit-kpis article:hover,
.admin-portal-shell.admin-subscription-design-system .admin-subscription-limit-details: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-subscription-design-system .admin-subscription-limit-details summary:hover {
    color: var(--ng-primary);
}

/* --------------------------------------------------------------------------
   System pages outside the AdminPortalShell
   -------------------------------------------------------------------------- */

.production-error-page {
    background:
        radial-gradient(circle at 12% 0, rgba(22, 119, 255, .16), transparent 34%),
        linear-gradient(180deg, var(--ng-navy-900), var(--ng-navy-950));
}

.production-error-card {
    border-color: rgba(98, 173, 255, .22);
    background:
        radial-gradient(circle at 100% 0, rgba(22, 119, 255, .10), transparent 34%),
        var(--ng-navy-800);
}

.production-error-actions .production-error-primary {
    background: linear-gradient(135deg, var(--ng-primary), var(--ng-primary-active));
    box-shadow: 0 10px 26px var(--ng-primary-glow);
}

/* Day mode remains clean and work-oriented. */
html[data-admin-theme="day"] .admin-portal-shell:is(
    .admin-quotes-design-system,
    .admin-email-routing-design-system,
    .admin-models-design-system,
    .product-pricing-design-system,
    .abt-design-system,
    .act-design-system,
    .admin-users-design-system,
    .admin-subscription-design-system
) :is(
    .admin-quotes-kpi,
    .admin-quotes-list-panel,
    .admin-quotes-details-panel,
    .admin-email-route-card,
    .admin-models-kpis article,
    .admin-model-list-panel,
    .admin-parts-panel,
    .product-pricing-shared-card,
    .summary-card,
    .abt-card,
    .act-shared-card,
    .admin-users-shared-kpi,
    .admin-users-shared-list-panel,
    .admin-users-shared-editor,
    .admin-subscription-stat-card,
    .admin-subscription-card,
    .admin-subscription-model-limits
) {
    box-shadow: 0 12px 30px rgba(15, 23, 42, .07);
}

@media (prefers-reduced-motion: reduce) {
    .admin-portal-shell:is(
        .admin-quotes-design-system,
        .admin-email-routing-design-system,
        .admin-models-design-system,
        .product-pricing-design-system,
        .abt-design-system,
        .act-design-system,
        .admin-users-design-system,
        .admin-subscription-design-system
    ) * {
        scroll-behavior: auto !important;
    }
}