/* NOVOGEX Admin Portal — Phase 2 shared component polish
   Keeps the working UI calm while carrying the same visual language from
   the Cinematic Splash and Login into cards, tables, dialogs and controls. */

.admin-portal-shell {
    --ng-surface-highlight: color-mix(in srgb, var(--ng-primary) 5%, transparent);
    --ng-surface-highlight-strong: color-mix(in srgb, var(--ng-primary) 9%, transparent);
    --ng-line-soft: color-mix(in srgb, var(--ng-primary) 14%, var(--ap-border));
    --ng-line-strong: color-mix(in srgb, var(--ng-primary) 34%, var(--ap-border));
    --ng-shadow-soft: 0 12px 32px color-mix(in srgb, var(--ng-navy-950) 11%, transparent);
}

/* Cards */
.admin-portal-shell .ap-card {
    position: relative;
    border-color: var(--ng-line-soft);
    background:
        linear-gradient(145deg, var(--ng-surface-highlight), transparent 38%),
        var(--admin-card-bg);
}

.admin-portal-shell .ap-card--elevated {
    box-shadow: var(--ng-shadow-soft);
}

.admin-portal-shell .ap-card--interactive {
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.admin-portal-shell .ap-card--interactive:hover {
    border-color: var(--ng-line-strong);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--ng-navy-950) 13%, transparent);
    transform: translateY(-1px);
}

.admin-portal-shell .ap-card.is-selected {
    border-color: color-mix(in srgb, var(--ng-primary) 58%, var(--ap-border));
    background:
        linear-gradient(90deg, var(--ng-primary-soft), transparent 48%),
        var(--admin-card-bg);
    box-shadow:
        inset 3px 0 0 var(--ng-primary),
        0 12px 30px color-mix(in srgb, var(--ng-primary) 10%, transparent);
}

.admin-portal-shell .ap-card__header {
    border-bottom-color: color-mix(in srgb, var(--ng-primary) 9%, var(--admin-card-border));
}

.admin-portal-shell .ap-card__icon {
    color: var(--ng-primary);
    border: 1px solid var(--ng-primary-border);
    background: var(--ng-primary-soft);
}

.admin-portal-shell .ap-card__footer {
    border-top-color: color-mix(in srgb, var(--ng-primary) 8%, var(--admin-card-border));
}

/* Shared toolbar surfaces */
.admin-portal-shell .ap-toolbar--surface,
.admin-portal-shell .ap-table-toolbar {
    border-color: var(--ng-line-soft);
    background:
        linear-gradient(90deg, var(--ng-surface-highlight), transparent 42%),
        var(--ap-bg-panel);
}

/* Tables */
.admin-portal-shell .ap-table-shell {
    border-color: var(--ng-line-soft);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--ng-navy-950) 8%, transparent);
}

.admin-portal-shell .ap-table thead th {
    background:
        linear-gradient(180deg, var(--ng-surface-highlight-strong), transparent),
        var(--admin-table-header-bg);
    border-bottom-color: color-mix(in srgb, var(--ng-primary) 14%, var(--admin-table-border));
}

.admin-portal-shell .ap-table tbody tr:hover td,
.admin-portal-shell .ap-table-row.is-interactive:hover td {
    background: color-mix(in srgb, var(--ng-primary) 5%, var(--admin-table-row-hover));
}

.admin-portal-shell .ap-table tbody tr.is-selected td,
.admin-portal-shell .ap-table-row.is-selected td {
    background: color-mix(in srgb, var(--ng-primary) 10%, var(--admin-table-row-selected));
}

.admin-portal-shell .ap-table tbody tr.is-selected td:first-child,
.admin-portal-shell .ap-table-row.is-selected td:first-child {
    box-shadow: inset 3px 0 0 var(--ng-primary);
}

.admin-portal-shell .ap-table-header.is-sorted,
.admin-portal-shell .ap-table-header.is-sorted .mud-icon-root {
    color: var(--ng-primary);
}

.admin-portal-shell .ap-table__pagination-slot,
.admin-portal-shell .ap-pagination {
    background:
        linear-gradient(90deg, var(--ng-surface-highlight), transparent 36%),
        var(--admin-table-bg);
}

.admin-portal-shell .ap-pagination__controls select:focus-visible {
    border-color: var(--ng-primary);
    outline: 0;
    box-shadow: 0 0 0 3px var(--ng-primary-soft);
}

/* Inputs and selects */
.admin-portal-shell .ap-input__element:focus-visible,
.admin-portal-shell .ap-select__element:focus-visible,
.admin-portal-shell .ap-textarea__element:focus-visible {
    border-color: var(--ng-primary);
    box-shadow: 0 0 0 3px var(--ng-primary-soft);
}

.admin-portal-shell .ap-input__icon,
.admin-portal-shell .ap-select__icon,
.admin-portal-shell .ap-select__chevron {
    transition: color .16s ease;
}

.admin-portal-shell .ap-input:focus-within .ap-input__icon,
.admin-portal-shell .ap-select:focus-within .ap-select__icon,
.admin-portal-shell .ap-select:focus-within .ap-select__chevron {
    color: var(--ng-primary);
}

/* Tabs and pagination controls */
.admin-portal-shell .ap-tabs {
    border-bottom-color: var(--ng-line-soft);
}

.admin-portal-shell .ap-tab.is-active,
.admin-portal-shell .ap-tab[aria-selected="true"] {
    text-shadow: 0 0 18px color-mix(in srgb, var(--ng-primary) 18%, transparent);
}

.admin-portal-shell .ap-pagination .ap-icon-button:hover:not(:disabled) {
    color: var(--ng-primary);
    border-color: var(--ng-primary-border);
    background: var(--ng-primary-soft);
}

/* Empty/loading states */
.admin-portal-shell .ap-empty-state {
    border-color: var(--ng-line-soft);
    background:
        radial-gradient(circle at 50% 0, var(--ng-surface-highlight-strong), transparent 48%),
        var(--ap-bg-panel-muted);
}

.admin-portal-shell .ap-empty-state__icon {
    color: var(--ng-primary);
    border-color: var(--ng-primary-border);
    background: var(--ng-primary-soft);
}

/* MudBlazor dialogs/popovers used by legacy pages */
.admin-portal-shell .mud-dialog {
    border: 1px solid var(--ng-line-strong);
    background:
        linear-gradient(180deg, var(--ng-surface-highlight-strong), transparent 110px),
        var(--ap-bg-panel);
    box-shadow:
        inset 0 2px 0 color-mix(in srgb, var(--ng-primary) 60%, transparent),
        0 28px 80px color-mix(in srgb, var(--ng-navy-950) 34%, transparent);
}

.admin-portal-shell .mud-dialog-title {
    border-bottom: 1px solid var(--ng-line-soft);
}

.admin-portal-shell .mud-dialog-actions {
    border-top: 1px solid var(--ng-line-soft);
    background: color-mix(in srgb, var(--ng-primary) 3%, var(--ap-bg-panel));
}

.admin-portal-shell .mud-popover:not(.mud-popover-open) {
    border-color: transparent;
}

.admin-portal-shell .mud-popover.mud-popover-open {
    border: 1px solid var(--ng-line-soft);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--ng-navy-950) 20%, transparent);
}

/* Day theme: preserve clarity and avoid an overly dark cinematic look. */
html[data-admin-theme="day"] .admin-portal-shell {
    --ng-shadow-soft: 0 12px 30px rgba(30, 64, 175, .07);
}

html[data-admin-theme="day"] .admin-portal-shell .ap-card,
html[data-admin-theme="day"] .admin-portal-shell .ap-table-shell,
html[data-admin-theme="day"] .admin-portal-shell .mud-dialog {
    box-shadow: 0 12px 32px rgba(15, 23, 42, .08);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .admin-portal-shell .ap-card--interactive,
    .admin-portal-shell .ap-input__icon,
    .admin-portal-shell .ap-select__icon,
    .admin-portal-shell .ap-select__chevron {
        transition: none;
    }

    .admin-portal-shell .ap-card--interactive:hover {
        transform: none;
    }
}