/* ============================================================================
   EGKits Premium Dark Mode — component chrome polish
   ----------------------------------------------------------------------------
   Complements MudBlazor PaletteDark + --egk-* tokens. Always keyed off
   .mud-theme-dark (never prefers-color-scheme) so System/explicit modes stay
   authoritative.
   ========================================================================== */

.mud-theme-dark {
  color-scheme: dark;
  /* MudTooltip fill token — never #fff (white-on-white with dark-text) */
  --mud-palette-gray-darker: #0B1220;
}

html.mud-dark-theme,
html.mud-theme-dark,
body.mud-theme-dark {
  --mud-palette-gray-darker: #0B1220;
}

/* MudMenu roots inherit `.mud-theme-dark { background: palette-dark }` from MudBlazor.
   That paints opaque chips on the brand app bar — neutralize activators only. */
.mud-appbar .mud-menu.mud-theme-dark,
.enterprise-header .mud-menu.mud-theme-dark {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}

/* Canvas & paper surfaces */
.mud-theme-dark .egk-app,
.mud-theme-dark .base-layout-wrapper {
  background-color: var(--mud-palette-background, #0B1220);
}

.mud-theme-dark .mud-paper:not(.mud-appbar):not(.mud-drawer):not(.enterprise-app-bar),
.mud-theme-dark .mud-card {
  background-color: var(--mud-palette-surface, #141C2C);
  border-color: var(--mud-palette-lines-default, #2A384C);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 8px 24px -12px rgba(0, 0, 0, 0.55);
}

.mud-theme-dark .mud-paper.mud-elevation-0,
.mud-theme-dark .mud-card.mud-elevation-0 {
  box-shadow: none;
  border: 1px solid var(--mud-palette-lines-default, #2A384C);
}

/* Drawers / nav */
.mud-theme-dark .mud-drawer {
  background-color: var(--mud-palette-drawer-background, #0E1524) !important;
  border-color: var(--mud-palette-lines-default, #2A384C);
}

.mud-theme-dark .mud-nav-link:hover,
.mud-theme-dark .mud-nav-link.mud-nav-link-active {
  background-color: color-mix(in srgb, var(--mud-palette-primary, #7EB0E8) 14%, transparent);
}

.mud-theme-dark .mud-nav-link.mud-nav-link-active {
  border-inline-start: 3px solid color-mix(in srgb, var(--mud-palette-primary, #7EB0E8) 55%, #E4EAF4 45%);
  color: var(--mud-palette-text-primary, #E4EAF4);
}

/* Tables / grids */
.mud-theme-dark .mud-table-container,
.mud-theme-dark .mud-table {
  background-color: var(--mud-palette-surface, #141C2C);
}

.mud-theme-dark .mud-table .mud-table-head,
.mud-theme-dark .mud-table thead .mud-table-cell {
  background-color: color-mix(in srgb, var(--mud-palette-surface, #141C2C) 88%, #ffffff 6%);
  color: var(--mud-palette-text-primary, #E4EAF4);
  font-weight: 600;
  border-bottom-color: var(--mud-palette-lines-default, #2A384C);
}

.mud-theme-dark .mud-table .mud-table-row:hover > .mud-table-cell {
  background-color: var(--mud-palette-table-hover, #182436);
}

.mud-theme-dark .mud-table-striped .mud-table-row:nth-of-type(odd) > .mud-table-cell {
  background-color: var(--mud-palette-table-striped, #1C2538);
}

.mud-theme-dark .mud-table-cell {
  border-bottom-color: var(--mud-palette-lines-default, #2A384C);
}

/* Inputs */
.mud-theme-dark .mud-input-control .mud-input-slot,
.mud-theme-dark .mud-input > input,
.mud-theme-dark .mud-input > textarea,
.mud-theme-dark .mud-select .mud-select-input {
  color: var(--mud-palette-text-primary, #E4EAF4);
}

.mud-theme-dark .mud-input.mud-input-outlined .mud-input-outlined-border {
  border-color: var(--mud-palette-lines-default, #2A384C);
}

.mud-theme-dark .mud-input.mud-input-outlined:hover .mud-input-outlined-border,
.mud-theme-dark .mud-input.mud-input-outlined.mud-input-adorned .mud-input-outlined-border {
  border-color: color-mix(in srgb, var(--mud-palette-primary, #7EB0E8) 45%, #2A384C);
}

/* Dialogs / menus / popovers */
.mud-theme-dark .mud-dialog,
.mud-theme-dark .mud-popover .mud-list,
.mud-theme-dark .mud-menu-list,
.mud-theme-dark .mud-picker {
  background-color: var(--egk-surface-3, #1C2538);
  color: var(--mud-palette-text-primary, #E4EAF4);
  border: 1px solid var(--mud-palette-lines-default, #2A384C);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

.mud-theme-dark .mud-dialog .mud-dialog-title,
.mud-theme-dark .mud-dialog .mud-dialog-content,
.mud-theme-dark .mud-dialog .mud-dialog-actions {
  background-color: transparent;
}

/* Chips / badges */
.mud-theme-dark .mud-chip {
  border-color: transparent;
}

.mud-theme-dark .mud-chip.mud-chip-outlined {
  border-color: var(--mud-palette-lines-default, #2A384C);
  color: var(--mud-palette-text-primary, #E4EAF4);
}

.mud-theme-dark .mud-chip.mud-chip-filled.mud-chip-color-primary,
.mud-theme-dark .mud-button-filled.mud-button-filled-primary {
  color: var(--mud-palette-primary-text, #0B1220) !important;
}

.mud-theme-dark .mud-chip.mud-chip-filled.mud-chip-color-primary .mud-chip-content,
.mud-theme-dark .mud-button-filled.mud-button-filled-primary .mud-button-label {
  color: inherit !important;
}

/* Alerts / snackbars — readable on dark chrome. Never paint filled severity
   alerts with text-primary (white): Warning/Success fills are light/tint and
   that combination washed out the elevated-access banner in dark mode. */
.mud-theme-dark .mud-alert:not([class*="mud-alert-filled"]),
.mud-theme-dark .mud-snackbar:not([class*="mud-alert-filled"]) {
  color: var(--mud-palette-text-primary, #E6ECF5);
}

.mud-theme-dark .mud-alert.mud-alert-filled-warning,
.mud-theme-dark .mud-alert.mud-alert-filled-warning .mud-alert-message,
.mud-theme-dark .mud-alert.mud-alert-filled-warning .mud-button-root,
.mud-theme-dark .mud-alert.mud-alert-filled-warning .mud-typography {
  color: var(--mud-palette-warning-text, #1A1207) !important;
}

.mud-theme-dark .mud-alert.mud-alert-filled-success,
.mud-theme-dark .mud-alert.mud-alert-filled-success .mud-alert-message {
  color: var(--mud-palette-success-text, #06210F) !important;
}

.mud-theme-dark .mud-alert.mud-alert-filled-info,
.mud-theme-dark .mud-alert.mud-alert-filled-info .mud-alert-message {
  color: var(--mud-palette-info-text, #062033) !important;
}

.mud-theme-dark .mud-alert.mud-alert-filled-error,
.mud-theme-dark .mud-alert.mud-alert-filled-error .mud-alert-message {
  color: var(--mud-palette-error-text, #FFFFFF) !important;
}

/* Portaled tooltips — elevated surface, readable type, soft edge (not flat black) */
body.mud-theme-dark .mud-tooltip,
body.mud-theme-dark .mud-tooltip.mud-tooltip-default,
.mud-theme-dark .mud-tooltip,
.mud-theme-dark .mud-tooltip.mud-tooltip-default {
  --egk-tooltip-bg: color-mix(in srgb, var(--mud-palette-surface, #141C2C) 88%, #000 12%);
  color: var(--mud-palette-text-primary, #F1F5F9) !important;
  background-color: var(--egk-tooltip-bg) !important;
  border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default, #2A384C) 80%, #fff 12%);
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  line-height: 1.35 !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 10px 28px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

body.mud-theme-dark .mud-tooltip.mud-tooltip-default.mud-tooltip-arrow::after,
.mud-theme-dark .mud-tooltip.mud-tooltip-default.mud-tooltip-arrow::after {
  border-color: var(--egk-tooltip-bg, #121A28) transparent transparent transparent !important;
}

/* Snackbars — match tooltip elevation language */
body.mud-theme-dark .mud-snackbar:not([class*="mud-alert-filled"]) {
  background-color: color-mix(in srgb, var(--mud-palette-surface, #141C2C) 92%, #000 8%) !important;
  color: var(--mud-palette-text-primary, #F1F5F9) !important;
  border: 1px solid var(--mud-palette-lines-default, #2A384C);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* Header menu papers / lists inside portaled popovers */
body.mud-theme-dark .notifications-popover .mud-paper,
body.mud-theme-dark .user-menu-popover .mud-paper,
body.mud-theme-dark .language-selector-popover .mud-paper,
body.mud-theme-dark .notifications-popover .mud-list,
body.mud-theme-dark .user-menu-popover .mud-list,
body.mud-theme-dark .language-selector-popover .mud-list,
body.mud-theme-dark .professional-language-menu {
  background-color: transparent !important;
  color: var(--mud-palette-text-primary, #E4EAF4) !important;
  box-shadow: none !important;
}

body.mud-theme-dark .notifications-popover .mud-divider,
body.mud-theme-dark .user-menu-popover .mud-divider {
  border-color: var(--mud-palette-lines-default, #2A384C) !important;
  opacity: 0.85;
}

/* Drawer edge — hairline instead of heavy split */
.mud-theme-dark .mud-drawer {
  border-inline-end: 1px solid color-mix(in srgb, var(--mud-palette-lines-default, #2A384C) 85%, transparent) !important;
}

/* Badge contrast on brand primary app bar */
.mud-theme-dark .enterprise-header .mud-badge-content {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--mud-palette-primary) 40%, #0B1220);
}

.mud-theme-dark .mud-alert:not([class*="mud-alert-filled"]) .mud-alert-message,
.mud-theme-dark .mud-input-helper-text {
  color: var(--mud-palette-text-secondary, #A8B6C9);
}

.mud-theme-dark .mud-input-label,
.mud-theme-dark .mud-typography-caption,
.mud-theme-dark .mud-typography-overline {
  color: var(--mud-palette-text-secondary, #A8B6C9);
}

.mud-theme-dark .mud-list-item:hover:not(.mud-list-item-disabled),
.mud-theme-dark .mud-menu-item:hover:not(.mud-menu-item-disabled) {
  background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.mud-theme-dark .mud-list-item.mud-list-item-selected,
.mud-theme-dark .mud-nav-link.mud-nav-link-active {
  color: var(--mud-palette-text-primary, #E6ECF5);
}

/* Skeleton / progress */
.mud-theme-dark .mud-skeleton {
  background-color: color-mix(in srgb, var(--mud-palette-surface, #131B2B) 70%, #ffffff 8%);
}

/* Scrollbars (Chromium / Firefox) — theme tokens, not fixed slate hex */
.mud-theme-dark {
  scrollbar-color: var(--mud-palette-lines-default, #2A384C) transparent;
}

.mud-theme-dark ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.mud-theme-dark ::-webkit-scrollbar-track {
  background: transparent;
}

.mud-theme-dark ::-webkit-scrollbar-thumb {
  background: var(--mud-palette-lines-default, #2A384C);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.mud-theme-dark ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--mud-palette-text-secondary, #A4B2C6) 45%, transparent);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* Theme Studio appearance group */
.mud-theme-dark .theme-mode-group .mud-button-filled {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

/* Access-check / status loader — readable on frosted stage in dark mode */
body.mud-theme-dark .egk-status-loader__stage,
.mud-theme-dark .egk-status-loader__stage {
  border-color: rgba(255, 255, 255, 0.10) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--mud-palette-primary) 16%, #12161A),
      color-mix(in srgb, var(--mud-palette-surface, #141C2C) 92%, #000)
    ) !important;
}

body.mud-theme-dark .egk-status-loader__title,
.mud-theme-dark .egk-status-loader__title {
  color: #F1F5F9 !important;
}

body.mud-theme-dark .egk-status-loader__subtitle,
.mud-theme-dark .egk-status-loader__subtitle {
  color: #A4B2C6 !important;
}

/* Portaled pickers / menus stay on dark surfaces */
.mud-theme-dark .mud-picker,
.mud-theme-dark .mud-picker-container,
.mud-theme-dark .mud-popover .mud-list,
.mud-theme-dark .mud-menu-list,
.mud-theme-dark .mud-select-menu,
.mud-theme-dark .mud-autocomplete .mud-popover-provider,
.mud-theme-dark .mud-overlay-dialog .mud-dialog {
  background-color: var(--mud-palette-surface, #141C2C);
  color: var(--mud-palette-text-primary, #E4EAF4);
  border-color: var(--mud-palette-lines-default, #2A384C);
}

/* Guard: never let `.mud-theme-dark { background: palette-dark !important }` paint
   LockScroll / click-away overlays as an opaque full-page slab. Scrims keep alpha. */
.mud-overlay.mud-theme-dark,
.mud-overlay.mud-theme-light,
body.mud-theme-dark .mud-overlay,
.mud-theme-dark .mud-overlay {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}

.mud-overlay .mud-overlay-scrim.mud-overlay-dark {
  background-color: var(--mud-palette-overlay-dark, rgba(0, 0, 0, 0.45)) !important;
}

/* Menu / select click-away layers must NOT dim the page — only dialogs/drawers do.
   Theme-agnostic: applies whether body is light or dark. */
.mud-overlay.mud-overlay-popover,
.mud-overlay.mud-overlay-popover .mud-overlay-scrim,
.mud-overlay.mud-overlay-popover .mud-overlay-scrim.mud-overlay-dark,
.mud-overlay.mud-overlay-popover .mud-overlay-scrim.mud-overlay-light,
.mud-popover-provider > .mud-overlay:not(.mud-overlay-dialog):not(.mud-overlay-drawer),
.mud-popover-provider > .mud-overlay:not(.mud-overlay-dialog):not(.mud-overlay-drawer) .mud-overlay-scrim {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

.mud-theme-dark .mud-picker .mud-button-root,
.mud-theme-dark .mud-picker .mud-typography,
.mud-theme-dark .mud-picker .mud-icon-root {
  color: inherit;
}

.mud-theme-dark .mud-picker .mud-picker-calendar-day.mud-day,
.mud-theme-dark .mud-picker .mud-button-month,
.mud-theme-dark .mud-picker .mud-picker-calendar-header,
.mud-theme-dark .mud-picker .mud-picker-year-container {
  color: var(--mud-palette-text-primary, #E4EAF4);
}

.mud-theme-dark .mud-picker .mud-picker-calendar-day.mud-day:hover,
.mud-theme-dark .mud-picker .mud-picker-calendar-day.mud-day.mud-selected {
  background-color: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.mud-theme-dark .mud-input-outlined .mud-input-outlined-border {
  border-color: var(--mud-palette-lines-default, #2A384C);
}

.mud-theme-dark .mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
  border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
}

.mud-theme-dark .mud-chip:not(.mud-chip-color-primary):not(.mud-chip-color-secondary):not(.mud-chip-color-success):not(.mud-chip-color-error):not(.mud-chip-color-warning):not(.mud-chip-color-info) {
  background-color: color-mix(in srgb, var(--mud-palette-surface) 80%, #ffffff 8%);
  color: var(--mud-palette-text-primary);
}

.mud-theme-dark .mud-table-pagination,
.mud-theme-dark .mud-table-pagination-toolbar {
  color: var(--mud-palette-text-secondary);
  border-top-color: var(--mud-palette-lines-default);
}

/* Subtle page transitions when toggling appearance */
.egk-app,
.base-layout-wrapper,
.showcase-layout-wrapper {
  transition: background-color 180ms ease, color 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .egk-app,
  .base-layout-wrapper,
  .showcase-layout-wrapper {
    transition: none;
  }
}

/* Safety net for custom card shells that still hardcode light surfaces.
   Uses :where() so page-level token/dark rules can still win without !important wars. */
.mud-theme-dark :where(
  .stat-card,
  .insight-card,
  .quick-action-tile,
  .quick-actions-panel,
  .activity-panel,
  .main-content-panel,
  .report-card,
  .analytics-card,
  .analytics-metric-card,
  .email-preview,
  .email-branded-preview-frame,
  .nl-log-kpi,
  .nl-log-toolbar,
  .nl-log-table-card,
  .nl-log-table table thead th,
  .nl-cv-card,
  .nl-cv-kpi,
  .nl-cv-action,
  .nl-cv-tabs,
  .nl-cv-code,
  .nl-cv-code__body--text,
  .nl-cv-health--success,
  .nl-cv-health--warning,
  .nl-cv-health--error,
  .nl-cc-card,
  .nl-cc-send-kpi,
  .nl-cc-val,
  .nl-cc-aud,
  .nl-cc-aud--on,
  .nl-cc-toggle,
  .nl-cc-manual-empty,
  .nl-cc-readiness__step,
  .nl-tpl-card,
  .nl-tpl-tabs,
  .nl-tpl-code,
  .nl-tpl-code__bar,
  .nl-st-info-tile,
  .nl-st-panel,
  .portal-cycle-toggle__btn--active,
  .report-toolbar,
  .options-panel,
  .backup-stat-card,
  .backup-command-panel,
  .backup-table-section,
  .backup-empty-state,
  .glass-effect,
  .builder-snapshot-card,
  .builder-shortcut-dialog-paper,
  .egk-an-kpi,
  .egk-sla-pri
) {
  background-color: var(--mud-palette-surface);
  border-color: var(--mud-palette-lines-default);
  color: var(--mud-palette-text-primary);
}

.mud-theme-dark :where(
  .nl-log-kpi__value,
  .nl-log-kpi__label,
  .nl-cv-kpi__value,
  .nl-cv-kpi__label,
  .nl-cc-aud__label,
  .nl-cc-aud__value,
  .nl-cc-send-kpi__label,
  .nl-cc-send-kpi__value,
  .nl-cc-val__label,
  .nl-cc-val__value,
  .nl-cc-toggle__label,
  .nl-st-toggle,
  .nl-st-toggle .mud-typography
) {
  color: var(--mud-palette-text-primary);
}

.mud-theme-dark :where(
  .nl-cc-send-kpi__sub,
  .nl-cc-aud__label,
  .nl-cc-readiness__step,
  .nl-cc-toggle__icon,
  .nl-st-toggle__icon,
  .nl-log-kpi__label,
  .nl-cv-kpi__label
) {
  color: var(--mud-palette-text-secondary);
}

.mud-theme-dark :where(
  .nl-cc-shell,
  .nl-cc-card,
  .nl-cc-aud,
  .nl-cc-toggle,
  .nl-cc-send-kpi,
  .nl-cc-val,
  .nl-cc-manual-empty,
  .nl-st-toggle,
  .nl-st-readiness,
  .nl-st-check,
  .nl-cv-card,
  .nl-log-kpi,
  .nl-log-toolbar,
  .nl-log-table-card,
  .nl-tpl-card
) {
  border-color: var(--mud-palette-lines-default) !important;
}

.mud-theme-dark :where(
  .nl-cc-cta,
  .nl-st-toggle--on,
  .nl-st-readiness,
  .nl-st-readiness--success,
  .nl-st-readiness--warning,
  .nl-st-readiness--error
) {
  background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface)) !important;
}

.mud-theme-dark .campaign-email-canvas,
.mud-theme-dark .nl-cc-tpl-preview__body {
  background: var(--mud-palette-background) !important;
}

/* Reporting preview chrome (builder) — never force-dark printable .report-document tables */
.mud-theme-dark :where(
  .preview-table-container,
  .preview-table-header th
) {
  background: color-mix(in srgb, var(--mud-palette-surface) 88%, #ffffff 6%) !important;
  color: var(--mud-palette-text-secondary) !important;
  border-color: var(--mud-palette-lines-default) !important;
}

.mud-theme-dark .nl-log-table table thead th {
  color: var(--mud-palette-text-secondary) !important;
}

/* Document / WYSIWYG paper (email mock, receipt paper) — stay document-colored */
.mud-theme-dark :where(
  .nl-tpl-mail,
  .nl-cv-mail,
  .nl-st-preview,
  .er-print-preview,
  .email-html-frame
) {
  background-color: var(--egk-document-surface, #ffffff);
  color: var(--egk-document-text, #0f172a);
}

/* Soft tint panels used heavily in Hospitality / Identity when classes are present */
.mud-theme-dark :where(
  .hos-panel,
  .hos-panel--info,
  .hos-panel--success,
  .hos-panel--warning,
  .hos-panel--error,
  .hos-panel--neutral,
  .hos-panel--disabled
) {
  background: var(--mud-palette-surface) !important;
  border-color: var(--mud-palette-lines-default) !important;
}

.mud-theme-dark .hos-panel--info {
  border-color: color-mix(in srgb, var(--mud-palette-info) 45%, transparent) !important;
  background: color-mix(in srgb, var(--mud-palette-info) 10%, var(--mud-palette-surface)) !important;
}

.mud-theme-dark .hos-panel--success {
  border-color: color-mix(in srgb, var(--mud-palette-success) 45%, transparent) !important;
  background: color-mix(in srgb, var(--mud-palette-success) 10%, var(--mud-palette-surface)) !important;
}

.mud-theme-dark .hos-panel--warning {
  border-color: color-mix(in srgb, var(--mud-palette-warning) 45%, transparent) !important;
  background: color-mix(in srgb, var(--mud-palette-warning) 10%, var(--mud-palette-surface)) !important;
}

.mud-theme-dark .hos-panel--error {
  border-color: color-mix(in srgb, var(--mud-palette-error) 45%, transparent) !important;
  background: color-mix(in srgb, var(--mud-palette-error) 10%, var(--mud-palette-surface)) !important;
}

.mud-theme-dark .hos-panel--disabled {
  background: var(--mud-palette-background) !important;
  opacity: 0.85;
}
