:root {
    /* Dimensional's UI font, routed through the token the app already uses.
       Two rules in this file (lines ~117 and ~392) apply `font-family:
       var(--app-font-family) !important` to h1-h6, p, span, div, label, every form
       control and button — effectively the whole document. Nothing declared later can
       beat that, so Manrope had to arrive through this variable rather than by styling
       elements, or the type scale would silently render as Inter everywhere.
       Inter is kept as the immediate fallback: it is what every one of these rules
       resolved to before, so a blocked font CDN changes nothing. */
    --app-font-family: 'Manrope', 'Inter', sans-serif;
    --app-base-font-size: 0.875rem;
    --app-title-font-size: 1.125rem;
    --app-title-gradient: linear-gradient(90deg, rgba(27, 56, 150, 1) 0%, rgba(79, 140, 255, 1) 50%, rgba(27, 56, 150, 1) 100%);
    --app-title-gradient-dark: linear-gradient(90deg, rgba(79, 140, 255, 1) 0%, rgba(27, 56, 150, 1) 50%, rgba(79, 140, 255, 1) 100%);
    --app-logo-height: 28px;
    --app-logo-shadow: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.25));
    --app-icon-color: #1b3896;
    --app-icon-color-dark: #4f8cff;
    /* Themeable colors (standardized statically) */
    --app-primary-color: #1b3896;
    --app-secondary-color: #4f8cff;
    --app-dark-primary-color: #4f8cff;
    --app-dark-secondary-color: #1b3896;
    --app-text-color: #0f172a;
    --app-border-color: #cbd5e1;
    --app-background-color: var(--app-tint-panel-d);

    /* Text ramp. Rules across this file hard-coded near-black text, which stayed black in dark
       mode wherever no .dark-theme override happened to exist. Each distinct shade keeps its
       exact light value here and flips to a legible light value under .dark-theme, so a single
       pair of declarations fixes every rule that uses it. */
    --app-text-navy: #12224d;
    --app-text-slate: #1e293b;
    --app-text-body: #212529;
    --app-text-neutral: #333;
    /* Secondary text. The ramp above had no muted tier, so every page invented its own grey
       inline — #666, #777, #6b7688, #8b94a6 — and each one stayed dark-on-dark because an
       inline colour cannot be reached by a .dark-theme rule. */
    --app-text-muted: #6b7280;
    --app-text-black: #000000;

    /* Surface + border ramps, same principle as the text ramp above. White card backgrounds and
       pale hairlines were hard-coded throughout; against a dark page the hairlines read as bright
       white outlines and the cards stayed white. Light values are the originals, so light mode is
       unchanged. */
    --app-surface: #ffffff;
    --app-surface-muted: #f8f9fa;
    --app-surface-sunken: #f0f0f0;

    /* Frosted panels are written as rgba(...) with their own alpha, so they need the channels
       rather than a finished colour. Only panel-weight fills (alpha >= .3) use this — the
       low-alpha whites are highlights painted on dark hero art and must stay white. */
    --app-surface-rgb: 255, 255, 255;

    /* Pale neutral fills. Split into two tiers by lightness so the relationship between a panel
       and the hover state sitting on top of it survives the flip — collapsing both onto one dark
       value would make hover states invisible. */
    --app-tint-panel-a: #f8fafc;
    --app-tint-panel-b: #f9fafb;
    --app-tint-panel-c: #fafafa;
    --app-tint-panel-d: #f3f6f9;
    --app-tint-panel-e: #f5f5f5;
    --app-tint-panel-f: #f2f5fa;

    --app-tint-hover-a: #f1f5f9;
    --app-tint-hover-b: #f3f4f6;
    --app-tint-hover-c: #ebebeb;
    --app-tint-hover-d: #e2e8f0;

    /* Status washes. In dark these become translucent role colour rather than another grey, so a
       warning strip still reads as a warning instead of flattening into the surface. */
    --app-wash-info: #eff6ff;
    --app-wash-info-alt: #e7f1ff;
    --app-wash-success: #f0fdf4;
    --app-wash-warning: #fffbeb;
    --app-wash-warning-alt: #fef9c3;
    --app-wash-danger: #fef2f2;
    --app-wash-danger-alt: #fee2e2;

    /* Border ramp, ordered palest to strongest. These eight declarations were each
       `var(--app-border-<name>)` — a custom property that refers to itself, which is invalid,
       so the declaration was dropped and all eight resolved to nothing in light mode. The 283
       `border: 1px solid var(--app-border-*)` shorthands across the app were therefore
       invalid at computed-value time and fell back to `medium none currentcolor`: no border at
       all on cards, tables, inputs and panels. Dark mode was unaffected, because .dark-theme
       defines real values further down, which is why the app looked correct only in dark.
       The original light hexes predate the repository's first commit and are unrecoverable, so
       this is a reconstruction: the ramp is calibrated against the rules that consume each
       token (e.g. .svc-filter-pill's base border must be lighter than its #c3cede hover) and
       against the dark ramp's own grouping, where faint and grey are the pair that sits closer
       to the surface than the other six. */
    --app-border-faint: #f0f0f0;
    --app-border-grey: #eeeeee;
    --app-border-hairline: #e9ecef;
    --app-border-soft: #e5e7eb;
    --app-border-plain: #e0e0e0;
    --app-border-mist: #e2e8f0;
    --app-border-muted: #dee2e6;
    --app-border-cool: #cbd5e1;

    /* Vision accent palette */
    --vision-accent: #2b6fe0;
    --vision-accent-deep: #0d2a6b;
    --vision-accent-bright: #3896ff;
    --vision-accent-soft-bg: #e9f0ff;
    --vision-accent-soft-text: #1c47b8;
    --vision-border: var(--app-border-mist);
    --vision-text-muted: #6b7688;
    --vision-success-bg: #e6f7ee;
    --vision-success-text: #177a44;
    --vision-success-dot: #1fa15d;

    /* Spacing/offset adjustments for the circular dial modal configuration overlay */
    /* The dial is 240px in diameter with a 120px radius. A 130px offset provides 10px of clearance from the viewport edge. */
    --dial-padding-offset-top: 114px;
    --dial-padding-offset-left: 114px;
    --dialog-padding-right: 35px;
    --dialog-padding-bottom: 35px;

    /* Rendered height of the sticky .admin-header (min-height 62px + 1px border-bottom) */
    --dnx-header-height: 63px;
}

/* Cross-platform font rendering consistency */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-size: 90%;
    /* Reserves the vertical scrollbar's width at all times, so fixed-position overlays
       (modal-backdrop-custom, .modal drawer) sized at width:100% measure the same whether
       or not the page scrollbar is currently visible - otherwise closing/opening a modal
       (which changes scrollbar visibility) leaves a thin uncovered sliver at the right edge. */
    scrollbar-gutter: stable;
    /* The reserved gutter sits outside <body>'s own box, so without this it shows the
       browser's default white instead of the page background - most visible as a
       vertical white bar on pages (e.g. the Setup Wizard) with little/no scroll content. */
    background-color: var(--app-background-color, #e2e7f0);
}

body {
    font-family: var(--app-font-family) !important;
    font-size: var(--app-base-font-size) !important;
    background-color: var(--app-background-color) !important;
    background-image: radial-gradient(circle at 20% 0%, #f7f9fc, #e9edf4 55%, #e2e7f0);
    background-attachment: fixed;
    color: var(--app-text-color);
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.dark-theme body {
    background-image: none;
}

/* Global tactile motion — applied broadly so interactive elements feel consistent
   with the Vision mockup instead of the previous static/instant states. */
.btn:not(.btn-close) {
    transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out !important;
}

.btn:not(.btn-close):hover {
    transform: translateY(-1px);
}

.btn:not(.btn-close):active {
    transform: translateY(0) scale(0.97);
}

.card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.badge {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.15s ease-in-out;
}

a,
.nav-link,
.dropdown-item,
.form-control,
.form-select {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.dropdown-item {
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, padding-left 0.15s ease-in-out;
}

.dropdown-item:hover,
.dropdown-item:focus {
    padding-left: 1.25rem;
}

.dropdown-menu.show {
    animation: vision-rise 0.16s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.list-group-item {
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.form-check-input {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.form-check-input:checked {
    transform: scale(1.08);
}

.accordion-button {
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.accordion-button::after {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Vision spinner — every Bootstrap .spinner-border/.spinner-grow across the app picks this up
   automatically (no markup changes needed), so inline loaders match the branded loading overlay. */
@keyframes vision-spinner-glow {
    0%, 100% {
        filter: drop-shadow(0 0 2px currentColor);
    }

    50% {
        filter: drop-shadow(0 0 7px currentColor);
    }
}

.spinner-border {
    border-width: 0.2em;
    animation: spinner-border 0.7s linear infinite, vision-spinner-glow 1.6s ease-in-out infinite;
}

.spinner-border-sm {
    border-width: 0.16em;
}

.spinner-grow {
    animation: spinner-grow 0.6s linear infinite, vision-spinner-glow 1.6s ease-in-out infinite;
}

.page-link {
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.page-link:hover {
    transform: translateY(-1px);
}

/* Responsive layout utilities */
.app-min-vh {
    min-height: 100vh;
    min-height: 100dvh;
}

.app-flex-grow-min0 {
    flex: 1 1 auto;
    min-height: 0;
}

.app-scroll-y {
    overflow-y: auto;
    min-height: 0;
}

.app-alert-container {
    z-index: 9999;
    width: min(calc(100% - 2rem), 28rem);
}

@media (max-width: 576px) {
    .app-alert-container {
        left: 1rem !important;
        right: 1rem !important;
        transform: none !important;
    }
}

/* Service switcher dropdown */
.services-dropdown {
    top: 5rem;
    inset-inline-start: 1rem;
    z-index: 9999;
    width: min(calc(100% - 2rem), 22rem);
    max-height: min(70dvh, 32rem);
    overflow: auto;
}

.services-dropdown-backdrop {
    top: 0;
    left: 0;
    z-index: 9998;
}

@media (min-width: 992px) {
    .services-dropdown {
        inset-inline-start: clamp(1rem, 12vw, 12rem);
    }
}

/* Searchable dropdown (div-based) */
.app-search-dropdown {
    position: relative;
    font-size: 0.875rem;
}

.app-search-dropdown-trigger {
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--bs-body-bg);
}

.app-search-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

.app-search-dropdown-panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 1050;
    border-radius: 0.5rem;
    overflow: hidden;
}

.app-search-dropdown-panel .card-body {
    border-bottom: 1px solid var(--bs-border-color);
}

.app-search-dropdown-list {
    max-height: min(60dvh, 22rem);
    overflow: auto;
}

.app-search-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
}

/* Override Bootstrap list-group selected styling to match the app look */
.app-search-dropdown-item.active {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.app-search-dropdown-item:hover {
    background-color: var(--bs-tertiary-bg);
}

.app-search-dropdown-item.active:hover {
    background-color: var(--bs-secondary-bg);
}

.app-search-dropdown-item-icon {
    flex: 0 0 auto;
    opacity: 0.85;
}

.app-search-dropdown-item .text-truncate {
    min-width: 0;
}

.app-search-dropdown-list .list-group-item {
    border: none;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

.app-search-dropdown-empty {
    padding: 0.5rem 0.75rem;
    color: #6c757d;
    font-size: 0.875rem;
}

/* Apply font family to all text elements */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
label,
input,
select,
textarea,
button,
.form-control,
.form-label,
.form-select,
.common-card,
.common-card-body,
.common-card-header,
.common-btn,
.common-input,
.common-select,
.common-title,
.service-title-gradient {
    font-family: var(--app-font-family) !important;
}

/* Apply title font size to headings */
h1,
h2,
h3,
h4,
.common-title,
.service-title-gradient {
    font-size: var(--app-title-font-size) !important;
}

/* Icon Styling */
.bi {
    background: linear-gradient(90deg, #25A7DB 0%, #0F3D95 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

/* Preserve semantic Bootstrap text colors */
.text-primary .bi,
.text-secondary .bi,
.text-success .bi,
.text-danger .bi,
.text-warning .bi,
.text-info .bi,
.text-light .bi,
.text-dark .bi,
.text-muted .bi,
.bi.text-primary,
.bi.text-secondary,
.bi.text-success,
.bi.text-danger,
.bi.text-warning,
.bi.text-info,
.bi.text-light,
.bi.text-dark,
.bi.text-muted {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: currentColor;
}

/* Targeted overrides to preserve custom components, active states, and hover transitions */
.admin-header-icon:hover,
.dark-theme .admin-header-icon:hover,
.admin-header-icon-logout,
.admin-header-icon-logout:hover,
.navbar-icon,
.navbar-icon:hover,
.navbar-icon.logout-icon,
.navbar-icon.logout-icon:hover,
.dark-theme .navbar-icon,
.dark-theme .navbar-icon:hover,
.dark-theme .navbar-icon.logout-icon,
.dark-theme .navbar-icon.logout-icon:hover,
.toolbox-item i,
.toolbox-item:hover i,
.datatype-selector-item i,
.datatype-selector-item:hover i,
.datatype-selector-item.active i {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: currentColor;
}

.common-brand-logo {
    height: var(--app-logo-height);
    filter: var(--app-logo-shadow);
}

/* Centralized Gradient Title Style */
.app-gradient-title,
.admin-header-title,
.service-title-gradient,
.services-wrapper .common-title,
.services-header {
    background: linear-gradient(90deg, #1B468B 0%, #2A9CD2FF 50%, #094093 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

/* Safeguard child icons inside gradient title elements */
.app-gradient-title i,
.admin-header-title i,
.service-title-gradient i,
.services-wrapper .common-title i,
.services-header i {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: currentColor;
}

.common-brand-logo-spin {
    animation: rotate 2s linear infinite;
}

.common-modal-header-gradient {
    background: var(--app-title-gradient) !important;
}

/* Common UI Components */
.common-card {
    background: var(--app-surface);
    border-radius: 10px;
    box-shadow: 0 3px 18px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--app-border-hairline);
    overflow: hidden;
    margin-bottom: 1rem;
}

.common-card-header {
    color: black;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--app-border-hairline);
}

.common-card-header h3,
.common-card-header h4,
.common-card-header h5 {
    margin-bottom: 0;
    color: white !important;
}

.common-card-body {
    padding: 1rem;
    background: var(--app-surface);
}

.common-title {
    color: var(--app-text-color);
    font-weight: 700;
    border-bottom: none !important;
    animation: vision-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* ============================================
   COMMON BUTTON STYLES
   ============================================
   Usage Examples:

   Primary: <button class="common-btn common-btn-primary">Save</button>
   Secondary: <button class="common-btn common-btn-secondary">Cancel</button>
   Success: <button class="common-btn common-btn-success">Confirm</button>
   Warning: <button class="common-btn common-btn-warning">Alert</button>
   Danger: <button class="common-btn common-btn-danger">Delete</button>

   Outline variants:
   <button class="common-btn common-btn-outline-primary">View</button>
   <button class="common-btn common-btn-outline-danger">Remove</button>

   Sizes:
   Small: <button class="common-btn common-btn-primary common-btn-sm">Small</button>
   Large: <button class="common-btn common-btn-primary common-btn-lg">Large</button>

   Full width: <button class="common-btn common-btn-primary common-btn-block">Submit</button>

   With icon: <button class="common-btn common-btn-primary">
                <i class="bi bi-save"></i>Save
              </button>
   ============================================ */

.common-btn {
    border-radius: 6px;
    padding: 0.375rem 1rem;
    font-weight: 600;
    transition: all 0.2s;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    text-decoration: none;
    font-size: 0.8125rem;
}

.common-btn i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    height: 1em !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.common-btn .bi {
    font-size: inherit !important;
    line-height: 1 !important;
    height: 1em !important;
    margin: 0 !important;
    padding: 0 !important;
}

.common-btn .bi::before {
    display: block !important;
    line-height: 1 !important;
}

.common-btn .spinner-border {
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

.common-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Primary Button */
.common-btn-primary {
    background-color: var(--app-primary-color);
    border-color: var(--app-primary-color);
    color: #fff;
}

.common-btn-primary:hover:not(:disabled) {
    background-color: var(--app-primary-color);
    border-color: var(--app-primary-color);
    color: #fff;
}

/* Centrally enforce white color for icons and spinners inside primary buttons */
.common-btn-primary .bi,
.common-btn-primary .fa,
.common-btn-primary .fas,
.common-btn-primary .far,
.common-btn-primary .fal,
.common-btn-primary .fab,
.common-btn-primary svg {
    color: #fff;
    fill: currentColor;
    -webkit-text-fill-color: currentColor;
    background: none;
}

/* Spinner border colors inside primary buttons */
.common-btn-primary .spinner-border {
    color: currentColor;
}

/* Disabled states configuration */
.common-btn-primary:disabled,
.common-btn-primary.disabled {
    color: #fff;
}

.common-btn-primary:disabled .bi,
.common-btn-primary.disabled .bi,
.common-btn-primary:disabled svg,
.common-btn-primary.disabled svg {
    color: currentColor;
    fill: currentColor;
    -webkit-text-fill-color: currentColor;
    background: none;
}

/* Secondary Button */
.common-btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

.common-btn-secondary:hover:not(:disabled) {
    background-color: #5a6268;
    border-color: #545b62;
    color: white;
}

/* Success Button */
.common-btn-success {
    background-color: #28a745;
    border-color: #28a745;
    color: white !important;
}

.common-btn-success:hover:not(:disabled) {
    background-color: #218838;
    border-color: #1e7e34;
    color: white !important;
}

/* Warning Button */
.common-btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: var(--app-text-body) !important;
}

.common-btn-warning:hover:not(:disabled) {
    background-color: #e0a800;
    border-color: #d39e00;
    color: var(--app-text-body) !important;
}

/* Danger Button */
.common-btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white !important;
}

.common-btn-danger:hover:not(:disabled) {
    background-color: #c82333;
    border-color: #bd2130;
    color: white !important;
}

/* Outline Button Variants */
.common-btn-outline-primary {
    background-color: transparent;
    border-color: var(--app-primary-color);
    color: var(--app-primary-color) !important;
}

.common-btn-outline-primary:hover:not(:disabled) {
    background-color: var(--app-primary-color);
    border-color: var(--app-primary-color);
    color: white !important;
}

.common-btn-outline-secondary {
    background-color: transparent;
    border-color: #6c757d;
    color: #6c757d !important;
}

.common-btn-outline-secondary:hover:not(:disabled) {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white !important;
}

.common-btn-outline-success {
    background-color: transparent;
    border-color: #28a745;
    color: #28a745 !important;
}

.common-btn-outline-success:hover:not(:disabled) {
    background-color: #28a745;
    border-color: #28a745;
    color: white !important;
}

.common-btn-outline-warning {
    background-color: transparent;
    border-color: #ffc107;
    color: #ffc107 !important;
}

.common-btn-outline-warning:hover:not(:disabled) {
    background-color: #ffc107;
    border-color: #ffc107;
    color: var(--app-text-body) !important;
}

.common-btn-outline-danger {
    background-color: transparent;
    border-color: #dc3545;
    color: #dc3545 !important;
}

.common-btn-outline-danger:hover:not(:disabled) {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white !important;
}

/* Button Sizes */
.common-btn-sm {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
}

.common-btn-lg {
    padding: 0.5rem 1.125rem;
    font-size: 0.875rem;
}

/* Button with full width */
.common-btn-block {
    width: 100%;
    display: flex;
}

/* =============================
   Common Table Component Styles
   ============================= */

/* Card wrapper for table */
.common-table-card {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    background: var(--app-surface);
    border: 1px solid var(--app-border-hairline);
    margin-bottom: 1rem;
}

.common-table-card .card-header {
    background-color: var(--app-tint-panel-b) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.dark-theme .common-table-card .card-header {
    background-color: #242a38 !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Base table layout commented out to prevent conflict with shared results-table classes
.common-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.common-table th,
.common-table td {
    padding: 12px 16px;
    vertical-align: middle;
}

.common-table-header {
    color: var(--app-primary-color);
    font-weight: 600;
    border-bottom: 1px solid #EDF2F7;
}

.common-table-row {
    border-bottom: 1px solid #EDF2F7;
    transition: background .2s ease;
}

.common-table tbody tr>td:nth-child(even) {
    background: var(--app-tint-panel-a);
}

.common-table tbody tr:hover {
    background: var(--app-wash-info);
    cursor: pointer;
}
*/

.common-table-empty td {
    font-style: italic;
    color: #6c757d;
    text-align: center;
    padding: 1.5rem 0;
}

/* Dark mode support commented out to prevent conflict with shared results-table classes
@media (prefers-color-scheme: dark) {
    .common-table-header {
        background: #2A2E3B;
        color: #A0B1E5;
        border-bottom: 1px solid #3A3F4B;
    }

    .common-table tbody tr {
        border-bottom: 1px solid #3A3F4B;
    }

    .common-table tbody tr:nth-child(even) {
        background: #252835;
    }

    .common-table tbody tr:hover {
        background: #2E3A4E;
    }

    .common-table-empty td {
        color: #A9A9A9;
    }
}
*/

.common-input,
.common-select {
    border-radius: 6px;
    border: 2px solid var(--app-border-grey);
    padding: 0.45rem 0.75rem;
    transition: border-color 0.2s;
    font-size: 0.875rem;
}

.common-input:focus,
.common-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    outline: none;
}

/* Dark Theme Overrides for Common UI */

.dark-theme .common-card {
    background: #242a38;
    border-color: #3d4657;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6);
}

.dark-theme .common-card-header {
    background-color: #242a38;
    border-bottom-color: #3d4657;
}

.dark-theme .common-card-body {
    background-color: #242a38;
    color: #dfe5ef;
}

.dark-theme .common-title {
    color: #f5f8fd;
}

/* Dark Theme - Common Buttons */
.dark-theme .common-btn-primary {
    background-color: #238636;
    border-color: #238636;
}

.dark-theme .common-btn-primary:hover:not(:disabled) {
    background-color: #2ea043;
    border-color: #2ea043;
}

.dark-theme .common-btn-secondary {
    background-color: #2f3646;
    border-color: #3d4657;
}

.dark-theme .common-btn-secondary:hover:not(:disabled) {
    background-color: #3d4657;
    border-color: #a7b0c0;
}

.dark-theme .common-btn-success {
    background-color: #238636;
    border-color: #238636;
}

.dark-theme .common-btn-success:hover:not(:disabled) {
    background-color: #2ea043;
    border-color: #2ea043;
}

.dark-theme .common-btn-warning {
    background-color: #d29922;
    border-color: #d29922;
    color: #1a1f2b !important;
}

.dark-theme .common-btn-warning:hover:not(:disabled) {
    background-color: #e8b339;
    border-color: #e8b339;
}

.dark-theme .common-btn-danger {
    background-color: #da3633;
    border-color: #da3633;
}

.dark-theme .common-btn-danger:hover:not(:disabled) {
    background-color: #f85149;
    border-color: #f85149;
}

.dark-theme .common-btn-outline-primary {
    background-color: transparent;
    border-color: #58a6ff;
    color: #58a6ff !important;
}

.dark-theme .common-btn-outline-primary:hover:not(:disabled) {
    background-color: #58a6ff;
    border-color: #58a6ff;
    color: #1a1f2b !important;
}

.dark-theme .common-btn-outline-secondary {
    background-color: transparent;
    border-color: #a7b0c0;
    color: #a7b0c0 !important;
}

.dark-theme .common-btn-outline-secondary:hover:not(:disabled) {
    background-color: #3d4657;
    border-color: #a7b0c0;
    color: #dfe5ef !important;
}

.dark-theme .common-btn-outline-success {
    background-color: transparent;
    border-color: #238636;
    color: #7ee787 !important;
}

.dark-theme .common-btn-outline-success:hover:not(:disabled) {
    background-color: #238636;
    border-color: #238636;
    color: white !important;
}

.dark-theme .common-btn-outline-warning {
    background-color: transparent;
    border-color: #d29922;
    color: #f0b72f !important;
}

.dark-theme .common-btn-outline-warning:hover:not(:disabled) {
    background-color: #d29922;
    border-color: #d29922;
    color: #1a1f2b !important;
}

.dark-theme .common-btn-outline-danger {
    background-color: transparent;
    border-color: #da3633;
    color: #ff7b72 !important;
}

.dark-theme .common-btn-outline-danger:hover:not(:disabled) {
    background-color: #da3633;
    border-color: #da3633;
    color: white !important;
}

.dark-theme .common-input,
.dark-theme .common-select {
    background-color: #1a1f2b;
    border-color: #3d4657;
    color: #dfe5ef;
}

.dark-theme .common-input:focus,
.dark-theme .common-select:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.3);
}

/* ============================================
   MODERN MODAL SYSTEM
   ============================================
   Clean, compact, responsive modal design
   Usage: Apply .modern-modal classes to any modal
   ============================================ */

/* Modern Modal Backdrop */
.modern-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease-out;
}

/* Modern Modal Container */
.modern-modal {
    position: fixed;
    inset: 0;
    z-index: 2501;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow: auto;
    animation: fadeIn 0.2s ease-out;
}

/* Modern Modal Dialog */
.modern-modal-dialog {
    position: relative;
    width: min(100%, 28rem);
    max-height: calc(100vh - 2rem);
    background: var(--app-surface);
    border-radius: 12px;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.25);
    overflow: hidden;
    animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.modern-modal-dialog-centered {
    align-self: center;
}

.modern-modal-dialog-sm {
    width: min(100%, 24rem);
}

.modern-modal-dialog-lg {
    width: min(100%, 36rem);
}

.modern-modal-dialog-xl {
    width: min(100%, 48rem);
}

/* Modern Modal Header */
.modern-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: none;
}

.modern-modal-header-primary {
    background: linear-gradient(135deg, #1b3896 0%, #4f8cff 100%);
}

.modern-modal-header-success {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.modern-modal-header-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.modern-modal-header-danger {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}

/* Modern Modal Title */
.modern-modal-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modern-modal-title i {
    font-size: 1.25rem;
    opacity: 0.9;
}

/* Modern Modal Close Button */
.modern-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.125rem;
}

.modern-modal-close:hover {
    background: rgba(var(--app-surface-rgb), 0.3);
    transform: scale(1.05);
}

/* Modern Modal Body */
.modern-modal-body {
    padding: 1.5rem 1.25rem;
    background: var(--app-surface);
    max-height: calc(70vh - 8rem);
    overflow-y: auto;
}

.modern-modal-body-compact {
    padding: 1rem 1.25rem;
}

/* Modern Modal Footer */
.modern-modal-footer {
    display: flex;
    /* Default flex-start, which in row-reverse is the right edge: the button pins there and the
       filename reads leftward from it. */
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--app-tint-panel-a);
    border-top: 1px solid var(--app-border-cool);
}

.modern-modal-footer-center {
    justify-content: center;
}

.modern-modal-footer-between {
    justify-content: space-between;
}

/* Modern Form Elements in Modals */
.modern-modal .form-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
}

.modern-modal .form-control,
.modern-modal .form-select {
    border-radius: 8px;
    border: 2px solid var(--app-border-hairline);
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.modern-modal .form-control:focus,
.modern-modal .form-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

.modern-modal .form-control-plaintext {
    background: var(--app-tint-panel-a);
    border: 2px solid var(--app-border-hairline);
    border-radius: 8px;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    color: #6b7280;
}

/* Modern Avatar/Profile Section */
.modern-modal-avatar {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.modern-avatar-circle {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.modern-avatar-circle i {
    font-size: 2rem;
    color: white;
}

/* Modern Button Styles for Modals */
.modern-modal .btn {
    border-radius: 8px;
    padding: 0.625rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    border: none;
}

.modern-modal .btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
}

.modern-modal .btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.modern-modal .btn-secondary {
    background: #6b7280;
    color: white;
}

.modern-modal .btn-secondary:hover {
    background: #4b5563;
    transform: translateY(-1px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .modern-modal {
        padding: 0.5rem;
        align-items: flex-start;
        padding-top: 2rem;
    }

    .modern-modal-dialog {
        width: 100%;
        max-height: calc(100vh - 1rem);
    }

    .modern-modal-header {
        padding: 0.875rem 1rem;
    }

    .modern-modal-body {
        padding: 1rem;
    }

    .modern-modal-footer {
        padding: 0.875rem 1rem;
        flex-direction: column;
    }

    .modern-modal-footer .btn {
        width: 100%;
    }
}

/* Dark Theme Support */
.dark-theme .modern-modal-backdrop {
    background: rgba(0, 0, 0, 0.8);
}

.dark-theme .modern-modal-dialog {
    background: #2f3646;
    border-color: #374151;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.dark-theme .modern-modal-body {
    background: #2f3646;
    color: #f3f4f6;
}

.dark-theme .modern-modal-footer {
    background: #111827;
    border-color: #374151;
}

.dark-theme .modern-modal .form-label {
    color: #d1d5db;
}

.dark-theme .modern-modal .form-control,
.dark-theme .modern-modal .form-select {
    background: #111827;
    border-color: #374151;
    color: #f3f4f6;
}

.dark-theme .modern-modal .form-control:focus,
.dark-theme .modern-modal .form-select:focus {
    border-color: #3b82f6;
    background: #111827;
}

.dark-theme .modern-modal .form-control-plaintext {
    background: #111827;
    border-color: #374151;
    color: #9ca3af;
}

/* Animation Keyframes */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Legacy Modal Overlay (keeping for backward compatibility) */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.45);
    overflow: auto;
    pointer-events: auto;
}

.modal-overlay.show {
    animation: fadeIn 0.2s ease-out;
}

.modal-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 42rem);
    max-height: calc(100vh - 3rem);
    overflow: auto;
    background: var(--app-surface);
    border: 1px solid var(--app-border-hairline);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
    pointer-events: auto;
    touch-action: auto;
}

.modal-dialog-small {
    width: min(100%, 28rem);
}

.pb-component-modal-dialog {
    width: min(100%, 56rem);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--app-border-hairline);
}

.modal-header-danger {
    background: var(--app-wash-danger);
    border-bottom-color: #fecaca;
}

.modal-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--app-text-color);
}

.modal-close {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.25rem;
}

.modal-close:hover {
    color: var(--app-text-color);
}

.modal-body {
    padding: 1.25rem;
    background: var(--app-surface);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--app-border-hairline);
    background: var(--app-surface);
}

.dark-theme .modal-overlay {
    background: rgba(13, 17, 23, 0.72);
}

.dark-theme .modal-dialog {
    background: #242a38;
    border-color: #3d4657;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    color: #dfe5ef;
}

.dark-theme .modal-header {
    border-bottom-color: #3d4657;
    background: #242a38;
}

.dark-theme .modal-header-danger {
    background: #3d1f1f;
    border-bottom-color: #da3633;
}

.dark-theme .modal-title {
    color: #f5f8fd;
}

.dark-theme .modal-close {
    color: #a7b0c0;
}

.dark-theme .modal-close:hover {
    color: #f5f8fd;
}

.dark-theme .modal-body,
.dark-theme .modal-footer {
    background: #242a38;
    border-color: #3d4657;
}

.page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    border: none;
    outline: none;
}

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row {
    background-color: var(--app-tint-panel-c);
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.navbar-brand {
    font-size: 1.1rem;
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.nav-item:first-of-type {
    padding-top: 1rem;
}

.nav-item ::deep a {
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}

.nav-item ::deep a.active {
    background-color: rgba(var(--app-surface-rgb), 0.37);
    color: white;
}

.nav-item ::deep a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.nav-scrollable {
    display: none;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

main {
    flex: 1;
    border: none;
    outline: none;
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        height: 100dvh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .nav-scrollable {
        display: block;
    }

    .navbar-toggler {
        display: none;
    }

    main {
        padding-left: 0;
    }
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.alert-success-soft {
    background-color: #d1e7dd;
    border-color: #badbcc;
    color: #0f5132;
}

.alert-danger-soft {
    background-color: #f8d7da;
    border-color: #f5c2c7;
    color: #842029;
}

.bi-house-door-fill-nav-menu {
    position: relative;
    top: -1px;
}

.collapse {
    display: none;
}

.navbar-collapse.show {
    display: block;
}

@media (max-width: 640.98px) {
    .top-row:not(.auth) {
        display: none;
    }

    .top-row.auth {
        justify-content: space-between;
    }

    .top-row ::deep a,
    .top-row .btn-link {
        margin-left: 0;
    }

    .top-row a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.custom-tabs {
    border-bottom: 1px solid var(--app-border-hairline);
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    align-items: flex-end;
}

.custom-tabs .nav-link {
    border: none;
    color: #374151;
    padding: 10px 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.custom-tabs .nav-link:hover {
    color: #2563eb;
}

.custom-tabs .nav-link.active {
    color: #2563eb;
    border-bottom: 2px solid #2563eb;
    background: none;
}

.dark-theme {
    --app-primary-color: #4f8cff;
    --app-secondary-color: #1b3896;
    --app-dark-primary-color: #4f8cff;
    --app-dark-secondary-color: #1b3896;
    --app-text-color: #dfe5ef;
    --app-border-color: #3d4657;
    --app-background-color: #1a1f2b;

    /* Light counterparts of the ramp above, kept slightly apart so the original hierarchy
       (strongest → muted) survives the flip instead of flattening to one grey. */
    --app-text-navy: #eef3fb;
    --app-text-slate: #d8dfeb;
    --app-text-body: #d8dfeb;
    --app-text-neutral: #ccd4e2;
    --app-text-muted: #a7b0c0;
    --app-text-black: #f2f5fb;

    /* Cards become the raised surface; every hairline collapses onto the two border tones, since
       the light ramp's distinctions are invisible at these luminances anyway. */
    --app-surface: #242a38;
    --app-surface-muted: #2f3646;
    --app-surface-sunken: #2f3646;
    --app-surface-rgb: 36, 42, 56;

    --app-tint-panel-a: #242a38;
    --app-tint-panel-b: #242a38;
    --app-tint-panel-c: #242a38;
    --app-tint-panel-d: #242a38;
    --app-tint-panel-e: #242a38;
    --app-tint-panel-f: #242a38;

    --app-tint-hover-a: #2f3646;
    --app-tint-hover-b: #2f3646;
    --app-tint-hover-c: #2f3646;
    --app-tint-hover-d: #2f3646;

    --app-wash-info: rgba(79, 140, 255, .16);
    --app-wash-info-alt: rgba(79, 140, 255, .16);
    --app-wash-success: rgba(45, 190, 140, .16);
    --app-wash-warning: rgba(239, 159, 39, .16);
    --app-wash-warning-alt: rgba(239, 159, 39, .16);
    --app-wash-danger: rgba(226, 75, 74, .16);
    --app-wash-danger-alt: rgba(226, 75, 74, .16);

    /* The soft accent tint marks the active navigation item. #e9f0ff is all but white on a dark
       rail — it was reading as a white pill behind the current menu entry. */
    --vision-accent: #4f8cff;
    --vision-accent-deep: #6ea8ff;
    --vision-accent-bright: #8fb6ff;
    --vision-accent-soft-bg: rgba(79, 140, 255, .18);
    --vision-accent-soft-text: #8fb6ff;
    --vision-border: #3d4657;

    --app-border-hairline: #3d4657;
    --app-border-soft: #3d4657;
    --app-border-cool: #3d4657;
    --app-border-faint: #2f3646;
    --app-border-mist: #3d4657;
    --app-border-muted: #3d4657;
    --app-border-plain: #3d4657;
    --app-border-grey: #2f3646;

    background: var(--app-background-color);
    color: var(--app-text-color);
}

.dark-theme .services-card {
    background: #242a38;
    border: 1px solid #3d4657;
    box-shadow: 0 8px 24px rgba(1, 4, 9, 0.5);
}

.dark-theme .services-header {
    background: #242a38;
    color: #f5f8fd;
    border-bottom: 1px solid #2f3646;
}

.dark-theme .service-tile {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.dark-theme .service-tile:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(88, 166, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(88, 166, 255, 0.2);
}

.dark-theme .tile-icon-box {
    background: transparent;
}

.dark-theme input,
.dark-theme select,
.dark-theme textarea,
.dark-theme .form-control,
.dark-theme .form-select {
    background: #1a1f2b;
    border: 1px solid #3d4657;
    color: #dfe5ef;
}

.dark-theme input:focus,
.dark-theme select:focus,
.dark-theme textarea:focus,
.dark-theme .form-control:focus,
.dark-theme .form-select:focus {
    background: #1a1f2b;
    border-color: #58a6ff;
    color: #dfe5ef;
    outline: none;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.3);
}

.dark-theme .btn-primary {
    background: #238636;
    border-color: #238636;
    color: #ffffff;
}

.dark-theme .btn-primary:hover {
    background: #2ea043;
    border-color: #2ea043;
}

.dark-theme .btn-secondary {
    background: #2f3646;
    border-color: #3d4657;
    color: #dfe5ef;
}

.dark-theme .btn-secondary:hover {
    background: #3d4657;
    border-color: #a7b0c0;
}

.dark-theme .btn-danger {
    background: #da3633;
    border-color: #da3633;
    color: #ffffff;
}

.dark-theme .btn-danger:hover {
    background: #f85149;
    border-color: #f85149;
}

.dark-theme .btn {
    background: #2f3646;
    border-color: #3d4657;
    color: #dfe5ef;
}

.dark-theme .btn:hover {
    background: #3d4657;
    border-color: #a7b0c0;
}

.dark-theme .card {
    background: #242a38;
    border: 1px solid #3d4657;
    color: #dfe5ef;
}

.card-header {
    background: var(--app-tint-panel-b);
}
.dark-theme .card-header {
    background: #242a38;
    border-bottom: 1px solid #2f3646;
    color: #f5f8fd;
}

.dark-theme .table {
    color: #dfe5ef;
    border-color: #3d4657;
}

.dark-theme .table-striped tbody tr:nth-of-type(odd) {
    background: #242a38;
}

.dark-theme .table thead th {
    background: #242a38;
    border-color: #3d4657;
    color: #f5f8fd;
}

.dark-theme .table td,
.dark-theme .table th {
    border-color: #3d4657;
}

.dark-theme .table-hover tbody tr:hover {
    background: #2f3646;
}

.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme h4,
.dark-theme h5,
.dark-theme h6 {
    color: #f5f8fd;
}

.dark-theme label {
    color: #dfe5ef;
}

.dark-theme a {
    color: #58a6ff;
}

.dark-theme a:hover {
    color: #79c0ff;
}

.dark-theme .modal-content {
    background: #242a38;
    border: 1px solid #3d4657;
}

.dark-theme .modal-header {
    background: #242a38;
    border-bottom: 1px solid #2f3646;
    color: #f5f8fd;
}

.dark-theme .modal-body {
    background: #242a38;
    color: #dfe5ef;
}

.dark-theme .modal-footer {
    background: #242a38;
    border-top: 1px solid #2f3646;
}

.dark-theme .alert {
    background: #242a38;
    border: 1px solid #3d4657;
    color: #dfe5ef;
}

.dark-theme .alert-success {
    background: #1a3d2e;
    border-color: #238636;
    color: #7ee787;
}

.dark-theme .alert-danger {
    background: #3d1f1f;
    border-color: #da3633;
    color: #ff7b72;
}

.dark-theme .alert-warning {
    border-color: #d29922;
    color: #f0b72f;
}

.dark-theme .alert-info {
    background: #1f2d3d;
    border-color: #58a6ff;
    color: #79c0ff;
}

.dark-theme .services-wrapper {
    background: transparent;
    border: none;
    box-shadow: none;
}

.dark-theme .services-wrapper .common-card {
    background: rgba(22, 27, 34, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(88, 166, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6);
}

.dark-theme .services-wrapper .common-card-header {
    background: rgba(22, 27, 34, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(88, 166, 255, 0.2);
}

.dark-theme .nav-tabs {
    border-bottom: 1px solid #2f3646;
}

.dark-theme .nav-tabs .nav-link {
    color: #a7b0c0;
    border: none;
}

.dark-theme .nav-tabs .nav-link:hover {
    color: #dfe5ef;
    border: none;
}

.dark-theme .nav-tabs .nav-link.active {
    background: #1a1f2b;
    color: #58a6ff;
    border: none;
    border-bottom: 2px solid #58a6ff;
}

.dark-theme .custom-tabs .nav-link {
    color: #a7b0c0;
}

.dark-theme .custom-tabs .nav-link:hover {
    color: #dfe5ef;
}

.dark-theme .custom-tabs .nav-link.active {
    color: #58a6ff;
    border-bottom: 2px solid #58a6ff;
}

.dark-theme .dropdown-menu {
    background: #242a38;
    border: 1px solid #3d4657;
}

.dark-theme .dropdown-item {
    color: #dfe5ef;
}

.dark-theme .dropdown-item:hover {
    background: #2f3646;
    color: #f5f8fd;
}

.dark-theme .pagination .page-link {
    background: #242a38;
    border: 1px solid #3d4657;
    color: #58a6ff;
}

.dark-theme .pagination .page-link:hover {
    background: #2f3646;
    border-color: #58a6ff;
}

.dark-theme .pagination .page-item.active .page-link {
    background: #58a6ff;
    border-color: #58a6ff;
    color: #ffffff;
}

.dark-theme .badge {
    background: #2f3646;
    color: #dfe5ef;
}

.dark-theme .badge-primary {
    background: #58a6ff;
    color: #1a1f2b;
}

.dark-theme .badge-success {
    background: #238636;
    color: #ffffff;
}

.dark-theme .badge-danger {
    background: #da3633;
    color: #ffffff;
}

.dark-theme hr {
    border-color: #2f3646;
}

.dark-theme .border {
    border-color: #3d4657 !important;
}

.dark-theme .text-muted {
    color: #a7b0c0 !important;
}

/* Removed - see color swap rules at end of file */
/* /* Bootstrap's .text-dark is a near-black literal carrying !important, so it survived every
   themed rule in this file and rendered black text on the dark surface. It has to be answered
   at the same specificity and with the same !important. */
.dark-theme .text-dark,
.dark-theme .text-body-emphasis {
    color: var(--app-text-color) !important;
}

.dark-theme .bg-light {
    background: #242a38 !important;
} */

.dark-theme .bg-white {
    background: #1a1f2b !important;
}

.dark-theme .list-group-item {
    background: #242a38;
    color: #dfe5ef;
}

.dark-theme .list-group-item:hover {
    background: #2f3646;
}

.dark-theme .spinner-border {
    color: #58a6ff;
}

.dark-theme .progress {
    background: #2f3646;
}

.dark-theme .progress-bar {
    background: #58a6ff;
}

.dark-theme ::placeholder {
    color: #6e7681;
    opacity: 1;
}

.dark-theme ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.dark-theme ::-webkit-scrollbar-track {
    background: #1a1f2b;
}

.dark-theme ::-webkit-scrollbar-thumb {
    background: #3d4657;
    border-radius: 6px;
}

.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: #484f58;
}

/* Dark Theme - Administrator Page Specific Styles */
.dark-theme .sidebar {
    background: #242a38 !important;
    border-right: 1px solid #3d4657;
}

.dark-theme .sidebar .nav-item a {
    color: #dfe5ef !important;
}

.dark-theme .sidebar .nav-item a:hover {
    background: #2f3646 !important;
    color: #58a6ff !important;
}

.dark-theme .sidebar .nav-item a.active {
    background: #238636 !important;
    color: #ffffff !important;
}

/* Dark Theme - History Page Specific Styles */
.dark-theme .history-search-card,
.dark-theme .history-results-card {
    background: #242a38 !important;
    border: 1px solid #3d4657 !important;
}

.dark-theme .history-timeline {
    background: #242a38 !important;
    border: 1px solid #3d4657 !important;
}

.dark-theme .timeline-item {
    background: #1a1f2b !important;
    border: 1px solid #3d4657 !important;
}

.dark-theme .timeline-item:hover {
    background: #2f3646 !important;
    border-color: #58a6ff !important;
}

/* Dark Theme - Publisher/Product Filter Page Specific Styles */
.dark-theme .filter-panel,
.dark-theme .filter-section {
    background: #242a38 !important;
    border: 1px solid #3d4657 !important;
}

.dark-theme .filter-card {
    background: #1a1f2b !important;
    border: 1px solid #3d4657 !important;
}

.dark-theme .attribute-filter {
    background: #242a38 !important;
    border: 1px solid #3d4657 !important;
}

.dark-theme .results-table-container {
    background: #242a38 !important;
    border: 1px solid #3d4657 !important;
}

/* Dark Theme - Radzen Components Override */
.dark-theme .rz-dropdown,
.dark-theme .rz-multiselect {
    background: #1a1f2b !important;
    border: 1px solid #3d4657 !important;
    color: #dfe5ef !important;
}

.dark-theme .rz-dropdown:focus,
.dark-theme .rz-multiselect:focus {
    border-color: #58a6ff !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.3) !important;
}

.dark-theme .rz-dropdown-panel,
.dark-theme .rz-multiselect-panel {
    background: #242a38 !important;
    border: 1px solid #3d4657 !important;
}

.dark-theme .rz-dropdown-item,
.dark-theme .rz-multiselect-item {
    color: #dfe5ef !important;
}

.dark-theme .rz-dropdown-item:hover,
.dark-theme .rz-multiselect-item:hover {
    background: #2f3646 !important;
    color: #58a6ff !important;
}

.dark-theme .rz-button {
    background: #238636 !important;
    border-color: #238636 !important;
    color: #ffffff !important;
}

.dark-theme .rz-button:hover {
    background: #2ea043 !important;
    border-color: #2ea043 !important;
}

.dark-theme .rz-button-secondary {
    background: #2f3646 !important;
    border-color: #3d4657 !important;
    color: #dfe5ef !important;
}

.dark-theme .rz-button-secondary:hover {
    background: #3d4657 !important;
    border-color: #a7b0c0 !important;
}

.dark-theme .rz-datatable {
    background: #242a38 !important;
    border: 1px solid #3d4657 !important;
}

.dark-theme .rz-datatable-header {
    background: #242a38 !important;
    border-bottom: 1px solid #3d4657 !important;
    color: #f5f8fd !important;
}

.dark-theme .rz-datatable-data tr {
    background: #1a1f2b !important;
    border-bottom: 1px solid #3d4657 !important;
}

.dark-theme .rz-datatable-data tr:hover {
    background: #2f3646 !important;
}

.dark-theme .rz-datatable-data td {
    color: #dfe5ef !important;
    border-color: #3d4657 !important;
}

.dark-theme .rz-paginator {
    background: #242a38 !important;
    border-top: 1px solid #3d4657 !important;
}

.dark-theme .rz-paginator-page {
    color: #58a6ff !important;
}

.dark-theme .rz-paginator-page:hover {
    background: #2f3646 !important;
}

.dark-theme .rz-paginator-page.rz-state-active {
    background: #58a6ff !important;
    color: #ffffff !important;
}

/* Administrator Sidebar - Reusable Component */
.admin-sidebar {
    --admin-sidebar-collapsed-width: 2.7rem;
    /* Must stay >= the 10.5rem floor in .is-expanded's clamp(). At the previous 9rem the min
       exceeded the max, so clamp() collapsed to a flat 10.5rem and the main navigation rail
       never grew with the viewport — the same inversion documented on --palette below, which
       had only ever been fixed for that one variant. */
    --admin-sidebar-expanded-width: 13rem;

    position: relative;
    background-color: rgba(var(--app-surface-rgb), 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: 1px solid var(--vision-border);
    padding: 0.4rem !important;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    width: clamp(8rem, 16vw, var(--admin-sidebar-expanded-width));
    max-width: 100%;
    height: 100%;
}

/* The 12.5rem these carried was a per-variant workaround for the base 9rem cap being below the
   clamp floor. With the base corrected to 13rem it had inverted into making the explorer rails
   narrower than the default, so it is gone and they inherit the base width. */

.admin-sidebar--right {
    border-left: 1px solid var(--app-border-hairline);
    border-right: none;
}

/* The Components palette (DesignerPalette: icon + name + description per row)
   needs materially more room than the plain nav-link menu this width scale was
   sized for. Raising the cap here also fixes a min>max clamp() inversion below:
   .is-expanded's clamp(10.5rem, 18vw, var(--admin-sidebar-expanded-width)) was
   resolving against the base 9rem cap, so min always beat max and every
   expanded palette sidebar was pinned to a flat 10.5rem regardless of viewport. */
.admin-sidebar--palette {
    --admin-sidebar-expanded-width: 17rem;
}

.admin-sidebar.is-collapsed {
    width: var(--admin-sidebar-collapsed-width);
    overflow-x: hidden;
    background-color: rgba(var(--app-surface-rgb), 0.6) !important;
}

.admin-sidebar.is-expanded {
    width: clamp(10.5rem, 18vw, var(--admin-sidebar-expanded-width));
}

@media (max-width: 991.98px) {
    .admin-sidebar.is-expanded {
        width: 100%;
    }

    .admin-sidebar--right {
        border-left: none;
        border-top: 1px solid var(--app-border-hairline);
    }

    .dark-theme .admin-sidebar--right {
        border-top: 1px solid #242a38 !important;
    }
}

.admin-sidebar .nav-label {
    opacity: 1;
    transition: opacity 0.3s ease 0.2s;
    white-space: nowrap;
    /* .nav-link sets overflow:hidden, so a label longer than the rail used to be sliced off
       mid-word with no indication there was more text. Ellipsis needs the shrink chain: a flex
       item will not go below its content width until min-width is cleared, here and on the
       row wrapper below. */
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* The icon + label row inside every nav link. Bootstrap's gap-3 (1rem) was written for page
   content, not a ~13rem rail, where it spent an eighth of the usable width on whitespace. */
.admin-sidebar .nav-link > div {
    gap: 0.55rem !important;
    min-width: 0;
    flex: 1 1 auto;
}

.admin-sidebar.is-collapsed .nav-label {
    display: none;
    opacity: 0;
    transition-delay: 0s;
}

.admin-sidebar.is-collapsed .nav-link {
    justify-content: center;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.admin-sidebar.is-collapsed .nav-link>div {
    width: 100%;
    justify-content: center;
}

.toggle-btn .bi {
    transition: transform 0.3s ease;
}

.admin-sidebar .nav-item {
    /* No padding here: the markup puts .nav-item and .nav-link on the same <a>, so this rule's
       intended 2px of vertical breathing room always lost to .nav-link's !important padding and
       the rows sat flush against each other. Row rhythm is owned by .nav-container's gap. */
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    animation: vision-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.admin-sidebar .nav-item:nth-child(1) { animation-delay: 0.02s; }
.admin-sidebar .nav-item:nth-child(2) { animation-delay: 0.06s; }
.admin-sidebar .nav-item:nth-child(3) { animation-delay: 0.1s; }
.admin-sidebar .nav-item:nth-child(4) { animation-delay: 0.14s; }
.admin-sidebar .nav-item:nth-child(5) { animation-delay: 0.18s; }
.admin-sidebar .nav-item:nth-child(6) { animation-delay: 0.22s; }
.admin-sidebar .nav-item:nth-child(7) { animation-delay: 0.26s; }
.admin-sidebar .nav-item:nth-child(n+8) { animation-delay: 0.3s; }

.admin-sidebar .nav-link {
    position: relative;
    color: #48526b !important;
    background-color: transparent !important;
    padding: 0.5rem 0.7rem !important;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 10px;
    font-weight: 500;
    border: none !important;
    font-size: 0.8125rem;
    overflow: hidden;
}

.admin-sidebar .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 16px;
    border-radius: 3px;
    background: var(--vision-accent);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center;
}

.admin-sidebar .nav-link i,
.admin-sidebar .nav-link .bi {
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease-in-out;
    display: inline-flex;
}

.admin-sidebar .nav-link:hover {
    background-color: var(--app-tint-panel-f) !important;
    color: var(--vision-accent-soft-text) !important;
    transform: translateX(3px);
}

.admin-sidebar .nav-link:hover i,
.admin-sidebar .nav-link:hover .bi {
    transform: scale(1.12);
}

.admin-sidebar .nav-link:hover::before {
    transform: translateY(-50%) scaleY(0.6);
}

.admin-sidebar .nav-link.active {
    background-color: var(--vision-accent-soft-bg) !important;
    color: var(--vision-accent-soft-text) !important;
    font-weight: 650;
    transform: translateX(3px);
}

.admin-sidebar .nav-link.active::before {
    transform: translateY(-50%) scaleY(1);
}

.admin-sidebar .nav-link.active i,
.admin-sidebar .nav-link.active .bi {
    transform: scale(1.08);
}

.admin-sidebar .nav-link:active {
    transform: translateX(3px) scale(0.97);
}

.admin-sidebar-header {
    padding: 0.625rem 0.4rem;
    flex-shrink: 0;
}

.menu-title {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--app-text-color);
    opacity: 1;
    transition: opacity 0.3s ease 0.2s;
}

.toggle-btn {
    background: var(--app-surface);
    border: 1px solid var(--vision-border);
    color: #48526b;
    padding: 0.3rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    font-size: 0.8125rem;
    flex-shrink: 0;
}

.toggle-btn:hover {
    background-color: var(--app-tint-panel-f);
    border-color: var(--vision-accent);
    transform: scale(1.08);
}

.toggle-btn:active {
    transform: scale(0.92);
}

.menu-title {
    animation: vision-rise 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.nav-container {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 auto;
    min-height: 0;
    /* No max-height: as a flex child with min-height:0 inside the full-height sidebar column this
       already sizes to the space left under the header. The old calc(100vh - 200px) was a guess at
       that leftover, and whenever it guessed low it started scrolling the menu while empty space
       remained below it. */
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.nav-container::-webkit-scrollbar {
    width: 6px;
}

.nav-container::-webkit-scrollbar-track {
    background: transparent;
}

.nav-container::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.nav-container::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Administrator Sidebar - Dark Theme */
.dark-theme .admin-sidebar {
    background-color: #242a38 !important;
    border-right: 1px solid #242a38 !important;
    padding: 0.375rem !important;
}

.dark-theme .admin-sidebar--right {
    border-left: 1px solid #242a38 !important;
    border-right: none !important;
}

.dark-theme .admin-sidebar .nav-item {
    padding: 3px 0;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
}

.dark-theme .admin-sidebar .nav-link {
    color: #dfe5ef !important;
    background-color: transparent !important;
    padding: 0.5rem 0.75rem !important;
    transition: all 0.2s ease-in-out !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 16px;
    font-weight: 500;
    border: none !important;
    font-size: 0.8125rem;
}

.dark-theme .admin-sidebar .nav-link:hover {
    background-color: #2f3646 !important;
    color: #dfe5ef !important;
    border-radius: 20px;
}

.dark-theme .admin-sidebar .nav-link.active {
    background-color: #3e4a62 !important;
    color: #dfe5ef !important;
    border-radius: 20px;
}

.dark-theme .admin-sidebar-header {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid #3d4657;
}

.dark-theme .menu-title {
    color: #f5f8fd !important;
}

.dark-theme .toggle-btn {
    border-color: #3d4657 !important;
    color: #dfe5ef !important;
    background-color: transparent !important;
}

.dark-theme .toggle-btn:hover {
    background-color: #2f3646 !important;
    border-color: #58a6ff !important;
    color: #58a6ff !important;
}

.dark-theme .nav-container::-webkit-scrollbar-thumb {
    background: #3d4657;
}

.dark-theme .nav-container::-webkit-scrollbar-thumb:hover {
    background: #484f58;
}

/* Common Main Content Area */
.common-main-content {
    --common-main-content-bg: #ffffff;
    position: relative;
    background: var(--app-surface);
    min-height: 0;
    border: #f3f6f9 solid 1px;
    border-radius: 20px;
    margin-bottom: 9px;
    margin-left: 9px;
    margin-right: 9px;
}

.common-main-content .card-body {
    background-color: var(--common-main-content-bg) !important;
}

.dark-theme .common-main-content {
    --common-main-content-bg: #121518;
    background-color: #121518 !important;
    color: #dfe5ef !important;
    border: 1px solid #121518 !important;
    border-radius: 24px !important;
}

.dark-theme .common-main-content .card-body {
    background-color: var(--common-main-content-bg) !important;
    color: inherit !important;
}

/* Pipeline Designer's and Flow Designer's flat alternative to
   .common-main-content — same base layout classes (flex-grow-1 app-scroll-y
   position-relative) still apply from CommonServiceLayout, this just drops
   the white card box (background, border, rounded corners, margin) so the
   canvas sits flush on the page. */
.pipeline-flat-content {
    background-color: transparent;
}

.dark-theme .pipeline-flat-content {
    color: #dfe5ef;
}

/* Very specific selectors for Administrator page */
/* ProductFilter Page Specific Styles */
.product-filter-bg {
    background: var(--app-surface-muted) !important;
}

.dark-theme .product-filter-bg {
    background-color: #1a1f2b !important;
}

.dark-theme .product-filter-card {
    background-color: #242a38 !important;
    border: 1px solid #3d4657 !important;
}

.dark-theme .product-filter-header {
    background-color: #242a38 !important;
    border-bottom: 1px solid #3d4657 !important;
}

.dark-theme .product-filter-header h5 {
    color: #f5f8fd !important;
}

.dark-theme .product-filter-header-light {
    background-color: #242a38 !important;
    border-bottom: 1px solid #3d4657 !important;
}

.dark-theme .product-filter-header-light h6 {
    color: #f5f8fd !important;
}

.dark-theme .rounded-3 {
    background: #2f3646 !important;
}

/* ProductFilter Form Inputs Dark Theme */
.dark-theme .form-select {
    background-color: #2f3646 !important;
    border: 2px solid #3d4657 !important;
    color: #dfe5ef !important;
}

.dark-theme .form-select:focus {
    background-color: #2f3646 !important;
    border-color: #58a6ff !important;
    color: #dfe5ef !important;
}

.dark-theme .form-select:disabled {
    background-color: #242a38 !important;
    color: #6e7681 !important;
}

.dark-theme .form-control {
    background-color: #2f3646 !important;
    border: 2px solid #3d4657 !important;
    color: #dfe5ef !important;
}

.dark-theme .form-control:focus {
    background-color: #2f3646 !important;
    border-color: #58a6ff !important;
    color: #dfe5ef !important;
}

.dark-theme .form-floating>label {
    color: #dfe5ef !important;
}

.dark-theme .form-floating>.form-select:focus~label,
.dark-theme .form-floating>.form-control:focus~label {
    color: #58a6ff !important;
}

/* Very Specific ProductFilter Form Input Styles */
.product-filter-select {
    background: var(--app-surface) !important;
    border: 2px solid var(--app-border-grey) !important;
    color: var(--app-text-black) !important;
}

.product-filter-input {
    background: var(--app-surface) !important;
    border: 2px solid var(--app-border-grey) !important;
    color: var(--app-text-black) !important;
}

.dark-theme .product-filter-select,
.dark-theme select.product-filter-select {
    background-color: #2f3646 !important;
    border: 2px solid #3d4657 !important;
    color: #dfe5ef !important;
}

.dark-theme .product-filter-input,
.dark-theme input.product-filter-input {
    background-color: #2f3646 !important;
    border: 2px solid #3d4657 !important;
    color: #dfe5ef !important;
}

.dark-theme .product-filter-select:focus,
.dark-theme select.product-filter-select:focus {
    background-color: #2f3646 !important;
    border-color: #58a6ff !important;
    color: #dfe5ef !important;
}

.dark-theme .product-filter-input:focus,
.dark-theme input.product-filter-input:focus {
    background-color: #2f3646 !important;
    border-color: #58a6ff !important;
    color: #dfe5ef !important;
}

/* History Page Dark Theme */
.dark-theme .history-page {
    background-color: #1a1f2b !important;
    color: #dfe5ef !important;
}

.dark-theme .search-page {
    background-color: #1a1f2b !important;
}

.dark-theme .search-card {
    background: #242a38 !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

.dark-theme .search-card-header h4 {
    color: #f5f8fd !important;
}

.dark-theme .search-subtitle {
    color: #a7b0c0 !important;
}

.dark-theme .field-label {
    color: #dfe5ef !important;
}

.dark-theme .field-input {
    background-color: #1a1f2b !important;
    border: 1.5px solid #3d4657 !important;
    color: #dfe5ef !important;
}

.dark-theme .field-input:focus {
    border-color: #58a6ff !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.25) !important;
    background-color: #1a1f2b !important;
}

.dark-theme .search-btn {
    background: #238636 !important;
}

.dark-theme .search-btn:hover:not(:disabled) {
    background: #2ea043 !important;
}

/* Consolidated Scoped CSS */

/* MainLayout.razor.css */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: #238636;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    background: #2ea043;
}

.dark-theme .theme-toggle {
    background: #58a6ff;
    box-shadow: 0 4px 12px rgba(88, 166, 255, 0.3);
}

.dark-theme .theme-toggle:hover {
    background: #79c0ff;
    box-shadow: 0 6px 16px rgba(88, 166, 255, 0.5);
}

/* ProductFilter.razor.css */
.product-filter-header {
    background-color: #0f172a;
    border-radius: 8px 8px 0 0;
    color: white;
}

.product-filter-header h5 {
    color: white !important;
}

.product-filter-header-light {
    background: var(--app-surface-muted);
    border-bottom: 1px solid var(--app-border-grey);
}

.product-filter-btn {
    border-radius: 8px;
    padding: 12px;
}

.product-filter-btn-primary {
    background-color: #1b3896;
    border-color: #1b3896;
    border-radius: 8px;
    padding: 12px;
}

.product-filter-btn-primary:hover {
    background-color: #153073;
    border-color: #153073;
}

/* History.razor.css */
.history-sidebar {
    background-color: var(--app-tint-panel-a);
}

.history-sidebar .list-group-item {
    background-color: transparent;
    border: none;
    color: #334155;
}

.history-sidebar .list-group-item:hover {
    background-color: var(--app-tint-hover-d);
    color: var(--app-text-slate);
}

.history-sidebar .list-group-item.active {
    background-color: #3b82f6;
    color: white;
}

/* HexBackground.razor.css */
#wrapper {
    overflow: hidden;
    width: 100%;
    height: 100vh;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#startText {
    font-family: 'Turret Road', cursive;
    font-weight: 700;
    fill: #fff;
    user-select: none;
    pointer-events: none;
}

#restartText {
    font-family: 'Turret Road', cursive;
    font-weight: 700;
    fill: rgb(255, 255, 255);
    user-select: none;
    pointer-events: none;
    opacity: 0;
}

/* HistoryTimeline.razor.css */
.timeline-header-card {
    background: var(--app-surface);
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--app-border-hairline);
    margin-bottom: 24px;
}

.timeline-header-content {
    padding: 16px 20px;
}

.timeline-title {
    color: var(--app-text-color);
    font-weight: 600;
}

.timeline-container {
    position: relative;
    padding: 0 0 24px 0;
}

.timeline-container::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #3b82f6 0%, #93c5fd 50%, #dbeafe 100%);
    border-radius: 4px;
}

.timeline-year-header {
    position: relative;
    z-index: 2;
    margin-bottom: 8px;
    cursor: pointer;
}

.year-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 20px 8px 14px;
    margin-left: 4px;
    border-radius: 24px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(30, 41, 59, 0.3);
    transition: all 0.25s ease;
    user-select: none;
}

.year-badge:hover {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    box-shadow: 0 4px 16px rgba(30, 41, 59, 0.4);
    transform: translateY(-1px);
}

.year-badge.expanded {
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
}

.year-chevron {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.year-badge.expanded .year-chevron {
    transform: rotate(0);
}

.year-label {
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.entry-count {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.75;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
}

.timeline-year-entries {
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s ease;
}

.timeline-year-entries.expanded {
    max-height: 5000px;
    opacity: 1;
}

.timeline-year-entries.collapsed {
    max-height: 0;
    opacity: 0;
}

.timeline-entry {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 6px 0 6px 0;
    cursor: pointer;
}

.timeline-node {
    position: relative;
    flex-shrink: 0;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding-top: 18px;
}

.node-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--app-surface);
    border: 3px solid #94a3b8;
    transition: all 0.25s ease;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15);
}

.timeline-entry:hover .node-dot {
    border-color: #3b82f6;
    box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.15);
}

.timeline-node.selected .node-dot {
    background: #3b82f6;
    border-color: #1d4ed8;
    box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.25);
    transform: scale(1.15);
}

.timeline-card {
    flex: 1;
    background: var(--app-surface);
    border: 1px solid var(--app-border-cool);
    border-radius: 10px;
    padding: 14px 18px;
    margin-left: 4px;
    transition: all 0.25s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.timeline-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
    transform: translateX(4px);
}

.timeline-card.selected {
    border-color: #3b82f6;
    background: linear-gradient(135deg, var(--app-wash-info) 0%, #f8faff 100%);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15),
        inset 0 0 0 1px rgba(59, 130, 246, 0.08);
}

.card-timestamp {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--app-text-color);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.timeline-card.selected .card-timestamp {
    color: #1d4ed8;
}

.card-updated-by {
    font-size: 0.82rem;
    color: #475569;
    margin-bottom: 4px;
}

.card-updated-by strong {
    color: var(--app-text-slate);
    letter-spacing: 0.4px;
}

.card-changes {
    font-size: 0.78rem;
    color: #d97706;
    font-weight: 500;
    margin-bottom: 4px;
}

.card-system-id {
    font-size: 0.72rem;
    color: #94a3b8;
}

.card-system-id code {
    font-size: 0.72rem;
    color: #64748b;
    background: var(--app-tint-hover-a);
    padding: 1px 6px;
    border-radius: 4px;
}

.timeline-empty-card {
    text-align: center;
    padding: 48px 24px;
    background: var(--app-surface);
    border-radius: 12px;
    border: 1px solid var(--app-border-hairline);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    color: #94a3b8;
}

.empty-icon i {
    font-size: 2.5rem;
    color: #cbd5e1;
}

.comparison-panel {
    background: var(--app-surface);
    border: 1px solid var(--app-border-hairline);
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    height: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.comparison-header {
    padding: 20px;
    border-bottom: 1px solid var(--app-border-faint);
    background-color: var(--app-tint-panel-a);
}

.comparison-table {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.comparison-table-header {
    background-color: #0f172a;
    color: #ffffff;
    padding: 10px 16px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.comparison-table-body {
    flex: 1;
    overflow-y: auto;
    max-height: 65vh;
}

.comparison-table-body .row:hover {
    background-color: var(--app-tint-panel-a);
}

.comparison-table-body code {
    background: var(--app-tint-hover-a);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
}

@media (max-width: 768px) {
    .comparison-panel {
        margin-top: 24px;
    }
}

@media (max-width: 576px) {
    .timeline-container::before {
        left: 18px;
    }

    .timeline-node {
        width: 38px;
    }

    .timeline-card {
        padding: 10px 14px;
    }

    .card-timestamp {
        font-size: 0.82rem;
    }

    .year-badge {
        font-size: 0.85rem;
        padding: 6px 14px 6px 10px;
    }
}

/* HistorySearch.razor.css */
.history-page {
    padding: 24px 32px;
    max-width: 1200px;
    margin: 0 auto;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 60px;
}

.search-card {
    background: var(--app-surface);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    padding: 40px 48px;
    width: 100%;
    max-width: 500px;
}

.search-card-header {
    text-align: center;
    margin-bottom: 28px;
}

.search-card-header i {
    font-size: 2.2rem;
    color: #3b82f6;
    display: block;
    margin-bottom: 8px;
}

.search-card-header h4 {
    margin: 0;
    font-weight: 700;
    color: var(--app-text-slate);
    font-size: 1.4rem;
}

.search-subtitle {
    color: #64748b;
    font-size: 0.85rem;
    margin-top: 4px;
}

.search-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field-input {
    border-radius: 8px;
    border: 1.5px solid var(--app-border-muted);
    padding: 10px 14px;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.field-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.search-btn {
    border-radius: 10px;
    padding: 11px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    background: #3b82f6;
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    transition: background 0.2s, transform 0.1s;
}

.search-btn:hover:not(:disabled) {
    background: #2563eb;
    transform: translateY(-1px);
}

.search-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.alert-sm {
    font-size: 0.85rem;
    padding: 10px 14px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .search-card {
        padding: 24px;
    }
}

/* HistoryResults.razor.css */
.results-page {
    padding-top: 30px;
}

.back-btn {
    border-radius: 8px;
    font-size: 0.85rem;
    padding: 6px 12px;
    transition: all 0.2s;
}

.back-btn:hover {
    background: var(--app-tint-hover-a);
}

.results-title {
    margin: 0;
    font-weight: 600;
    color: var(--app-text-slate);
    display: flex;
    align-items: center;
}

/* Shared enterprise table container */
.table-responsive {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
    color: #475569;
    background: var(--app-surface);
}

/* Header Styling */
.table thead {
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border-hairline);
}

.table thead th {
    padding: 14px 24px;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--app-text-black);
    white-space: nowrap;
}

/* Body Styling */
.table tbody tr {
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border-faint);
    transition: background-color 0.18s ease;
}

.table tbody tr:hover {
    background: var(--app-tint-panel-a);
}

/* Cell Styling */
.table td,
.table th {
    padding: 14px 24px;
    vertical-align: middle;
}

/* First Column Styling */
.table tbody th {
    font-weight: 600;
    color: var(--app-text-color);
    white-space: nowrap;
}

/* Dark Theme Support */
.dark-theme .table {
    background: #242a38;
    color: #dfe5ef;
}

.dark-theme .table thead {
    background: #2f3646;
    border-color: #3d4657;
}

.dark-theme .table tbody tr {
    background: #242a38;
    border-color: #3d4657;
}

.dark-theme .table tbody tr:hover {
    background: #2f3646;
}

/* Users directory: caption, striped-column styling, hover, and dark-theme */
.users-table-caption {
    padding: 18px 24px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-text-color);
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;

    display: flex;
    align-items: center;
    gap: 8px;
}

/* Striped columns: apply to odd columns (1st,3rd,5th...) */
.users-directory-table tbody td:nth-child(odd),
.users-directory-table tbody th:nth-child(odd),
.users-directory-table thead th:nth-child(odd) {
    background: var(--app-tint-panel-a);
}

/* Hover effect across the row */
.users-directory-table tbody tr:hover td,
.users-directory-table tbody tr:hover th {
    background: var(--app-wash-info);
}

/* Tighter enterprise table spacing and softer borders for users table */
.users-directory-table thead th {
    background: var(--app-tint-hover-a);
    border-bottom: 1px solid var(--app-border-hairline);
    font-weight: 500;
    padding: 14px 24px;
    color: #475569;
}

.users-directory-table td,
.users-directory-table th {
    padding: 14px 24px;
    vertical-align: middle;
    border-bottom: 1px solid var(--app-border-faint);
}

/* Dark theme equivalents for striped columns and hover */
.dark-theme .users-directory-table tbody td:nth-child(odd),
.dark-theme .users-directory-table tbody th:nth-child(odd),
.dark-theme .users-directory-table thead th:nth-child(odd) {
    background: rgba(255, 255, 255, 0.02);
}

.dark-theme .users-directory-table tbody tr:hover td,
.dark-theme .users-directory-table tbody tr:hover th {
    background: rgba(255, 255, 255, 0.03);
}

.dark-theme .users-table-caption {
    background: #242a38;
    color: #f5f8fd;
    border-color: #3d4657;
}

.rowid-cell {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--app-text-slate);
    font-size: 0.85rem;
}

.source-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.source-current {
    background: #dbeafe;
    color: #1e40af;
}

.source-history {
    background: var(--app-wash-warning);
    color: #92400e;
}

.changed-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-wash-warning);
    color: #92400e;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    min-width: 24px;
}

.open-btn {
    border-radius: 6px;
    font-size: 0.8rem;
    padding: 4px 12px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .results-table-wrapper {
        overflow-x: auto;
    }
}

/* HistoryComparison.razor.css */
.detail-page {
    padding-top: 24px;
}

.detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.detail-title {
    margin: 0;
    font-weight: 600;
    color: var(--app-text-slate);
    display: flex;
    align-items: center;
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.db-toggle {
    display: flex;
    gap: 8px;
}

.db-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 20px;
    border-radius: 24px;
    border: 2px solid var(--app-border-cool);
    background: var(--app-tint-panel-a);
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.db-toggle-btn:hover {
    border-color: #94a3b8;
    background: var(--app-tint-hover-a);
    color: #334155;
}

.db-toggle-btn.active-current {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #1e40af;
}

.db-toggle-btn.active-history {
    background: var(--app-wash-warning);
    border-color: #f59e0b;
    color: #92400e;
}

.filter-buttons {
    display: flex;
    gap: 8px;
}

.data-card {
    background: var(--app-surface);
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--app-border-hairline);
    padding: 20px 24px;
    overflow: auto;
    max-height: clamp(20rem, 70dvh, 45rem);
}

.data-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.data-cell {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--app-border-faint);
    min-height: 38px;
}

.cell-label {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: #94a3b8;
    min-width: 90px;
    white-space: nowrap;
}

.cell-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--app-text-slate);
    word-break: break-word;
}

.cell-changed {
    background: var(--app-wash-warning);
}

.cell-changed .cell-label {
    color: #b45309;
}

.cell-changed .cell-value {
    color: #78350f;
}

@media (max-width: 1100px) {
    .data-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .toggle-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .data-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .data-grid {
        grid-template-columns: 1fr;
    }
}

/* ServicesPanel.razor.css */
.services-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 16px;
    min-height: calc(100vh - 60px);
    width: 100%;
}

.services-wrapper .common-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border-hairline);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.services-wrapper .common-card-header {
    background: var(--app-surface);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--app-border-hairline);
}

.services-card {
    background: var(--app-surface);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 1500px;
    overflow: hidden;
    border: 1px solid var(--app-border-hairline);
}

.services-header {
    padding: 18px 24px 14px;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 1px solid #e8e8e8;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.service-tile {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    transition: all 0.3s ease;
}

.service-tile:hover {
    background: rgba(var(--app-surface-rgb), 0.9);
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: 0 8px 32px 0 rgba(37, 99, 235, 0.2);
}

.tile-icon-box {
    width: 100%;
    max-width: 300px;
    min-width: 200px;
    height: 200px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #333333;
    flex-shrink: 0;
    padding-left: 5px;
}

.tile-name {
    padding: 0 16px;
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--app-text-neutral);
    line-height: 1.5;
    word-wrap: break-word;
    white-space: normal;
}

@media (max-width: 680px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 420px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* Border Utilities */
.border-end {
    background-color: var(--app-tint-panel-a);
}

/* Reusable Card Components */
.admin-card {
    background: var(--app-surface) !important;
}

.admin-card-body {
    background: var(--app-surface) !important;
}

.admin-title {
    color: var(--app-text-color) !important;
}

.admin-btn {
    background-color: #0f172a !important;
    color: white !important;
    border: none !important;
}

.admin-btn:hover {
    background-color: #1e293b !important;
}

.dark-theme .admin-card,
.dark-theme .card.admin-card {
    background-color: #242a38 !important;
    border: 1px solid #3d4657 !important;
}

.dark-theme .admin-card-body,
.dark-theme .card-body.admin-card-body {
    background-color: #242a38 !important;
}

.dark-theme .admin-title,
.dark-theme h3.admin-title {
    color: #f5f8fd !important;
}

.dark-theme .admin-btn,
.dark-theme .btn.admin-btn {
    background-color: #238636 !important;
    border-color: #238636 !important;
    color: #ffffff !important;
}

.dark-theme .admin-btn:hover,
.dark-theme .btn.admin-btn:hover {
    background-color: #2ea043 !important;
    border-color: #2ea043 !important;
}

/* Admin Header */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Admin Simple Header (Dashboard Header) */
.navbar {
    background-color: transparent !important;
    border-bottom: none !important;
}

.dark-theme .navbar {
    background-color: #242a38 !important;
    border-bottom: 1px solid #3d4657 !important;
}

.navbar .btn-outline-primary {
    color: var(--app-text-color) !important;
    border-color: #0f172a !important;
}

.navbar .btn-outline-primary:hover {
    background: var(--app-surface-sunken) !important;
    color: var(--app-text-color) !important;
    border-color: #0f172a !important;
}

.navbar .btn-outline-danger {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.navbar .btn-outline-danger:hover {
    background-color: var(--app-wash-danger-alt) !important;
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.dark-theme .navbar .btn-outline-primary {
    color: #58a6ff !important;
    border-color: #58a6ff !important;
}

.dark-theme .navbar .btn-outline-primary:hover {
    background-color: #1e3a5f !important;
    color: #58a6ff !important;
    border-color: #58a6ff !important;
}

.dark-theme .navbar .btn-outline-danger {
    color: #f85149 !important;
    border-color: #f85149 !important;
}

.dark-theme .navbar .btn-outline-danger:hover {
    background-color: #4c1f1a !important;
    color: #f85149 !important;
    border-color: #f85149 !important;
}

.navbar .img-fluid {
    filter: brightness(1) !important;
}

.dark-theme .navbar .img-fluid {
    filter: brightness(1.1) !important;
}

.admin-header {
    position: sticky;
    top: 0;
    z-index: 20;
    overflow: hidden;
    min-height: 62px;
    padding: 0.875rem 1.25rem;
    background-color: rgba(var(--app-surface-rgb), 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--vision-border);
}

.dark-theme .admin-header {
    background-color: rgb(31 34 38);
    border-bottom: 1px solid rgb(31 34 38);
}

.admin-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.admin-header-left {
    display: flex;
    align-items: center;
    flex: 1;
}

.admin-header-logo {
    display: flex;
    align-items: center;
    padding: 0.2rem;
    margin-right: 1.25rem;
}

.admin-logo {
    width: auto;
    max-width: 100%;
}

.admin-logo-text {
    margin-left: 0.5rem;
    width: auto;
    max-width: 100%;
}

.admin-header-title {
    margin: 0;
    font-weight: 650;
    letter-spacing: -0.02em;
    font-size: var(--app-title-font-size);
    color: var(--vision-accent);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-header-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-header-btn {
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--app-border-plain);
    background: var(--app-surface);
    color: var(--app-text-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    transition: all 0.2s ease-in-out;
    font-weight: 500;
    min-width: 44px;
}

.admin-header-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    min-width: 18px;
    height: 18px;
    color: var(--app-icon-color);
}

.dark-theme .admin-header-btn {
    background-color: #2f3646;
    color: #dfe5ef;
    border-color: #3d4657;
}

.dark-theme .admin-header-btn i {
    color: var(--app-primary-color);
}

.dark-theme .admin-header-btn:hover {
    background-color: #3d4657;
    border-color: #58a6ff;
}

/* App Customization - Theme Tab */
.app-theme-customization .common-card {
    border: 1px solid #dbe6ff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.app-theme-customization .theme-gradient-editor {
    padding: 1rem;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff 0%, var(--app-wash-info) 100%);
    border: 1px solid #dbe6ff;
}

.app-theme-customization .gradient-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.app-theme-customization .gradient-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1b3896;
    background: var(--app-wash-info-alt);
    border: 1px solid #cfe0ff;
}

.app-theme-customization .gradient-preview-box {
    min-height: 86px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.dark-theme .app-theme-customization .common-card {
    border-color: #344056;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.dark-theme .app-theme-customization .theme-gradient-editor {
    background: linear-gradient(180deg, #252b36 0%, #1f252f 100%);
    border-color: #344056;
}

.dark-theme .app-theme-customization .gradient-chip {
    color: #9bc1ff;
    background: #243247;
    border-color: #3f5f8f;
}

.dark-theme .admin-header-btn:hover {
    background-color: #3d4657;
    border-color: #58a6ff;
}

.admin-header-settings-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
}

.admin-header-settings-toggle i {
    color: var(--app-icon-color) !important;
    -webkit-text-fill-color: var(--app-icon-color) !important;
    font-size: 1.1rem;
    line-height: 1;
}

.admin-header-title .admin-header-btn {
    -webkit-text-fill-color: #0f172a;
    background-clip: border-box;
}

.admin-header-title .admin-header-settings-toggle {
    -webkit-text-fill-color: #0f172a;
    background-clip: border-box;
}

.dark-theme .admin-header-title .admin-header-btn {
    -webkit-text-fill-color: #dfe5ef;
}

.dark-theme .admin-header-title .admin-header-btn i {
    color: #4F8CFF !important;
    -webkit-text-fill-color: #4F8CFF !important;
}

.dark-theme .admin-header-settings-toggle i {
    color: var(--app-icon-color-dark) !important;
    -webkit-text-fill-color: var(--app-icon-color-dark) !important;
}

.dark-theme .admin-header-title .admin-header-settings-toggle {
    -webkit-text-fill-color: #dfe5ef;
}

.btn-text {
    display: none;
}

/* Admin Header Icons */
.admin-header-icons {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.admin-header-icon {
    font-size: 1.4rem;
    color: var(--app-icon-color);
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-header-icon:hover {
    color: var(--app-text-color);
    transform: scale(1.1);
}

/* ─── Dark / light mode toggle ───────────────────────────────────────────────
   A sliding pill in the app bar. The thumb carries both glyphs stacked on top
   of each other and cross-fades them as it travels, so the sun leaves as the
   moon arrives rather than the icon swapping instantly at the midpoint. */
.dnx-theme-toggle {
    background: none;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    line-height: 0;
}

.dnx-theme-toggle-track {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    border-radius: 999px;
    background: linear-gradient(135deg, #dbe4f0, #c3d2e6);
    box-shadow: inset 0 1px 3px rgba(15, 32, 74, .22);
    transition: background .35s ease, box-shadow .35s ease;
}

.dnx-theme-toggle:hover .dnx-theme-toggle-track {
    box-shadow: inset 0 1px 3px rgba(15, 32, 74, .28), 0 0 0 3px rgba(43, 111, 224, .13);
}

.dnx-theme-toggle.is-dark .dnx-theme-toggle-track {
    background: linear-gradient(135deg, #26324a, #131c2f);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
}

.dnx-theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--app-surface);
    box-shadow: 0 2px 5px rgba(15, 32, 74, .35);
    /* Overshoot easing gives the thumb a bit of weight as it lands. */
    transition: transform .38s cubic-bezier(.34, 1.56, .64, 1), background .35s ease;
}

.dnx-theme-toggle.is-dark .dnx-theme-toggle-thumb {
    transform: translateX(22px);
    background: var(--app-tint-panel-d);
}

.dnx-theme-toggle-thumb i {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    transition: opacity .3s ease, transform .38s cubic-bezier(.34, 1.56, .64, 1);
}

.dnx-theme-toggle-sun {
    color: #f5a524;
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.dnx-theme-toggle-moon {
    color: #3b5bdb;
    opacity: 0;
    transform: rotate(-90deg) scale(.4);
}

.dnx-theme-toggle.is-dark .dnx-theme-toggle-sun {
    opacity: 0;
    transform: rotate(90deg) scale(.4);
}

.dnx-theme-toggle.is-dark .dnx-theme-toggle-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Respect users who have asked the OS to reduce motion: keep the state change,
   drop the travel and spin. */
@media (prefers-reduced-motion: reduce) {
    .dnx-theme-toggle-track,
    .dnx-theme-toggle-thumb,
    .dnx-theme-toggle-thumb i {
        transition-duration: .01ms;
    }
}

.admin-header-icon-logout {
    color: #dc3545 !important;
}

.admin-header-icon-logout:hover {
    color: #b02622 !important;
}

.dark-theme .admin-header-icon {
    color: var(--app-icon-color-dark);
}

.dark-theme .admin-header-icon:hover {
    color: #58a6ff;
}

.dark-theme .admin-header-icon-logout {
    color: #f85149 !important;
}

.dark-theme .admin-header-icon-logout:hover {
    color: #fe7a6d !important;
}

@media (min-width: 576px) {
    .btn-text {
        display: inline;
    }
}

/* Dark Theme Color Swap: Ash ↔ Dark Blue */
/* Swap bg-light to use ash gray in dark theme */
.dark-theme .bg-light {
    background-color: #242a38 !important;
    color: #ffffff !important;
}

/* Swap btn-light to use dark blue in dark theme */
.dark-theme .btn-light {
    background-color: #1e3a5f !important;
    color: #ffffff !important;
    border-color: #1e3a5f !important;
}

.dark-theme .btn-light:hover {
    background-color: #2a4a75 !important;
    border-color: #2a4a75 !important;
}

.dark-theme .btn-light:focus {
    background-color: #2a4a75 !important;
    border-color: #2a4a75 !important;
}

/* Swap badge ash colors to dark blue */
.dark-theme .badge.bg-light {
    background-color: #a8a8a8 !important;
    color: #ffffff !important;
}

/* Swap any card backgrounds using light theme ash colors */
.dark-theme .card-body.bg-light {
    background-color: #a8a8a8 !important;
    color: #ffffff !important;
}

.dark-theme .card-footer.bg-light {
    background-color: #a8a8a8 !important;
    color: #ffffff !important;
}

/* Table header swaps */
.dark-theme .table thead.bg-light th {
    background-color: #a8a8a8 !important;
    color: #ffffff !important;
}

.dark-theme thead.bg-light {
    background-color: #a8a8a8 !important;
    color: #ffffff !important;
}

/* ==========================================
   MODERN DASHBOARD STYLES
   ========================================== */

/* ==========================================
   PREMIUM DASHBOARD LAYOUT
   ========================================== */

.premium-dashboard-layout {
    width: min(100%, 1400px);
    margin: 0 auto;
    padding: 0 clamp(0.75rem, 2vw, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border: none;
    outline: none;
}

/* Dashboard Rows */
.dashboard-row {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Row 1: Hero (Large + Visual + Medium) */
.row-hero {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    min-height: 320px;
}

/* Row 2: Equal (3 equal cards) */
.row-equal {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Row 3: Wide (2 wide cards) */
.row-wide {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* ==========================================
   DASHBOARD EMPTY / LOADING STATE
   ========================================== */

.dashboard-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    text-align: center;
    min-height: 320px;
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    color: #6366f1;
    animation: empty-state-pulse 2.5s ease-in-out infinite;
}

@keyframes empty-state-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.06);
        opacity: 0.85;
    }
}

.empty-state-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.6rem;
}

.empty-state-subtitle {
    font-size: 0.95rem;
    color: #6b7280;
    max-width: 400px;
    line-height: 1.6;
    margin: 0;
}

/* Dark-theme overrides */
.dark-theme .empty-state-icon {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.25);
    color: #818cf8;
}

.dark-theme .empty-state-title {
    color: #e5e7eb;
}

.dark-theme .empty-state-subtitle {
    color: #9ca3af;
}

/* ==========================================
   DASHBOARD CARDS
   ========================================== */

.dashboard-card {
    position: relative;
    overflow: hidden;
    background: var(--app-surface);
    border-radius: 16px;
    border: 1px solid var(--app-border-hairline);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.dashboard-card:hover {
    transform: translateY(-6px);
    border-color: rgba(17, 24, 39, 0.12);
    box-shadow: 0 20px 40px rgba(17, 24, 39, 0.08), 0 8px 16px rgba(17, 24, 39, 0.04);
}

/* Large Feature Card */
.card-large {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Visual Card */
.card-visual {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: default;
}

.card-visual:hover {
    transform: none;
}

.visual-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: brightness(1.1);
}

/* Medium Card */
.card-medium {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Service Card (Equal) */
.card-service {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
}

/* Wide Card */
.card-wide {
    padding: 2rem 2.5rem;
}

/* ==========================================
   CARD ELEMENTS
   ========================================== */

/* Icon Box */
.card-icon-box {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: var(--app-tint-hover-b);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transition: all 0.2s ease;
}

.card-wide .card-icon-box {
    margin-bottom: 0;
}

.dashboard-card:hover .card-icon-box {
    background: var(--app-tint-hover-d);
    transform: scale(1.05);
}

.card-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

/* Card Title */
.dashboard-card .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.card-wide .card-title {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

/* Card Description */
.card-desc {
    font-size: 0.9375rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex: 1;
}

.card-wide .card-desc {
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* Card Link */
.card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #111827;
    font-weight: 500;
    font-size: 0.9375rem;
    margin-top: auto;
}

.card-link i {
    transition: transform 0.2s ease;
}

.dashboard-card:hover .card-link i {
    transform: translateX(4px);
}

.dashboard-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(17, 24, 39, 0.06), transparent 40%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
    z-index: 1;
}

.dashboard-card:hover::before {
    opacity: 1;
}

.dashboard-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--app-surface-rgb), .9) 0%, rgba(var(--app-surface-rgb), .35) 20%, transparent 50%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 1;
}

.dashboard-card:hover::after {
    opacity: 1;
}

.dashboard-card>* {
    position: relative;
    z-index: 2;
}

.dashboard-card:hover .card-icon-box {
    background: linear-gradient(135deg, var(--app-tint-panel-a), #eef2f7);
    transform: scale(1.08);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .06);
}

.dashboard-card:hover .card-link i {
    transform: translateX(6px);
}

/* ==========================================
   BUTTONS
   ========================================== */

.card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.9375rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background: #0d6efd;
    color: #ffffff;
}

.btn-primary:hover {
    background: #2f3646;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.15);
}

/* Wide Card Content */
.wide-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.wide-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
    min-width: min(100%, 320px);
}

.wide-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    background: var(--app-surface);
    color: #374151;
    border: 1px solid var(--app-border-hairline);
    font-weight: 500;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background: var(--app-tint-panel-b);
    border-color: var(--app-border-muted);
}

/* Theme Swatches */
.theme-swatches {
    display: flex;
    gap: 0.75rem;
}

.swatch {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.swatch:hover {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ==========================================
   DARK THEME
   ========================================== */

.dark-theme .premium-dashboard-layout {
    background: transparent;
}

.dark-theme .dashboard-card {
    background: #1a1d24;
    border-color: #2d3139;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark-theme .dashboard-card:hover {
    border-color: #3d4149;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

.dark-theme .card-icon-box {
    background: #2f3646;
}

.dark-theme .dashboard-card:hover .card-icon-box {
    background: #2d3139;
}

.dark-theme .dashboard-card .card-title {
    color: #f9fafb;
}

.dark-theme .card-desc {
    color: #9ca3af;
}

.dark-theme .card-link {
    color: #f3f4f6;
}

.dark-theme .btn-primary {
    background: #374151;
    color: #ffffff;
}

.dark-theme .btn-primary:hover {
    background: #4b5563;
}

.dark-theme .action-btn {
    background: #1a1d24;
    color: #d1d5db;
    border-color: #2d3139;
}

.dark-theme .action-btn:hover {
    background: #2f3646;
    border-color: #3d4149;
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

/* Tablet */
@media (max-width: 1024px) {
    .premium-dashboard-layout {
        gap: 1.25rem;
    }

    .row-hero {
        grid-template-columns: 1fr;
    }

    .card-visual {
        order: -1;
        grid-column: auto;
        min-height: 240px;
    }

    .row-equal {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .wide-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .wide-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .premium-dashboard-layout {
        padding: 0 0.75rem;
    }

    .row-hero,
    .row-equal,
    .row-wide {
        grid-template-columns: 1fr;
    }

    .card-visual {
        order: 0;
        min-height: 240px;
    }

    .card-large,
    .card-medium,
    .card-service {
        padding: 1.5rem;
    }

    .card-wide {
        padding: 1.5rem;
    }

    .card-icon-box {
        width: 56px;
        height: 56px;
    }

    .card-icon {
        width: 34px;
        height: 34px;
    }

    .dashboard-card .card-title {
        font-size: 1.125rem;
    }

    .card-desc {
        font-size: 0.875rem;
    }

    .theme-swatches {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .premium-dashboard-layout {
        gap: 0.875rem;
    }

    .dashboard-row {
        gap: 0.875rem;
    }

    .card-btn,
    .action-btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }

    .card-large,
    .card-medium,
    .card-service,
    .card-wide {
        padding: 1.25rem;
    }

    .card-icon-box {
        width: 52px;
        height: 52px;
    }

    .card-icon {
        width: 32px;
        height: 32px;
    }

    .wide-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .action-btn {
        width: 100%;
    }

    .theme-swatches {
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .swatch {
        width: 34px;
        height: 34px;
    }
}

/* ==========================================
   DASHBOARD NAVIGATION & HEADER
   ========================================== */

/* Navigation Bar */
.dashboard-navbar {
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border-hairline);
    padding: 1rem 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.navbar-left {
    display: flex;
    align-items: center;
    gap: 3rem;
    min-width: 0;
    flex: 1 1 auto;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
}

.brand-logo {
    height: clamp(28px, 3vw, 40px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-header-logo:hover .brand-logo-mark {
    transform: rotate(180deg);
}

.brand-logo-wordmark {
    max-width: 140px;
}

.brand-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: 0.5px;
}

.navbar-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.menu-item {
    padding: 0.5rem 1rem;
    color: #6b7280;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
}

.menu-item:hover {
    color: #111827;
    background: var(--app-tint-hover-b);
}

.menu-item.active {
    color: #111827;
    font-weight: 600;
}

.menu-item.active::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 0;
    right: 0;
    height: 2px;
    background: #0d6efd;
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.navbar-icon {
    font-size: 1.3rem;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.navbar-icon:hover {
    color: #111827;
    transform: translateY(-1px);
}

.navbar-icon.logout-icon {
    color: #dc2626;
}

.navbar-icon.logout-icon:hover {
    color: #b91c1c;
}

/* Page Header Section */
.page-header-section {
    text-align: center;
    padding: 3rem 1rem 2rem;
    max-width: 800px;
    margin: 0 auto;
    border: none;
    outline: none;
}

.page-main-title {
    font-size: 3rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
    border: none;
    outline: none;
}

.page-main-subtitle {
    font-size: 1.125rem;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
    border: none;
    outline: none;
}

/* Dashboard Content */
.dashboard-content {
    padding: 0 1rem 3rem;
    border: none;
    outline: none;
}

/* ==========================================
   DASHBOARD FOOTER
   ========================================== */

.dashboard-footer {
    background: var(--app-surface);
    border-top: 1px solid var(--app-border-hairline);
    padding: 1.5rem 0;
    margin-top: auto;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-left,
.footer-right {
    display: flex;
    align-items: center;
}

.footer-text {
    margin: 0;
    color: #6b7280;
    font-size: 0.875rem;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-container {
        padding: 0 1rem;
    }
}

/* ==========================================
   DARK THEME - NAVIGATION & HEADER
   ========================================== */

.dark-theme .dashboard-navbar {
    background: #1a1d24;
    border-bottom-color: #2d3139;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.dark-theme .brand-name {
    color: #f9fafb;
}

.dark-theme .menu-item {
    color: #9ca3af;
}

.dark-theme .menu-item:hover {
    color: #f3f4f6;
    background: #2f3646;
}

.dark-theme .menu-item.active {
    color: #ffffff;
}

.dark-theme .menu-item.active::after {
    background: #ffffff;
}

.dark-theme .navbar-icon {
    color: #9ca3af;
}

.dark-theme .navbar-icon:hover {
    color: #f3f4f6;
}

.dark-theme .navbar-icon.logout-icon {
    color: #f87171;
}

.dark-theme .navbar-icon.logout-icon:hover {
    color: #fca5a5;
}

.dark-theme .page-main-title {
    color: #f9fafb;
}

.dark-theme .page-main-subtitle {
    color: #9ca3af;
}

/* Dark Theme - Footer */
.dark-theme .dashboard-footer {
    background: #1a1d24;
    border-top-color: #2d3139;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

.dark-theme .footer-text {
    color: #9ca3af;
}

/* ==========================================
   KEYFRAME ANIMATIONS
   ========================================== */

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes swipeLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(-100vw);
        opacity: 0;
    }
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ==========================================
   LOGIN & MODAL COMPONENT STYLES
   ========================================== */

.login-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    pointer-events: none;
}

.login-modal-overlay .card {
    animation: modalFadeIn 0.35s cubic-bezier(0.2, 0, 0.4, 1) both;
    position: relative;
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37) !important;
}

.login-modal-overlay .form-control {
    background: rgba(var(--app-surface-rgb), 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: var(--app-text-neutral) !important;
    transition: all 0.3s ease !important;
}

.login-modal-overlay .form-control:focus {
    background: rgba(var(--app-surface-rgb), 0.6) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.3) !important;
}

.login-modal-overlay .form-control::placeholder {
    color: rgba(0, 0, 0, 0.6) !important;
}

.login-modal-overlay .btn-primary {
    background: rgba(102, 126, 234, 0.85) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
    transition: all 0.3s ease !important;
}

.login-modal-overlay .btn-primary:hover {
    background: rgba(102, 126, 234, 1) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
}

.swipe-exit {
    animation: swipeLeft 0.5s ease-in forwards;
    pointer-events: none;
}

.modal-close-btn {
    position: absolute;
    top: 0.6rem;
    right: 0.9rem;
    background: none;
    border: none;
    font-size: 1.3rem;
    color: #888;
    cursor: pointer;
    line-height: 1;
    z-index: 1;
}

.modal-close-btn:hover {
    color: var(--app-text-neutral);
}

.okta-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    background-size: cover;
    animation: fadeIn 0.5s ease-in;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: rotate 1s linear infinite;
}

.okta-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

#hexs polygon {
    cursor: default;
}

/* ==========================================
   RESPONSIVE - NAVIGATION & HEADER
   ========================================== */

@media (max-width: 768px) {
    .navbar-menu {
        display: none;
    }

    .navbar-container {
        padding: 0 1rem;
    }

    .navbar-left {
        gap: 1rem;
        width: 100%;
    }

    .navbar-brand {
        gap: 0.5rem;
    }

    .brand-logo-wordmark {
        display: none;
    }

    .page-header-section {
        padding: 2rem 1rem 1.5rem;
    }

    .page-main-title {
        font-size: 2rem;
    }

    .page-main-subtitle {
        font-size: 1rem;
    }

    .navbar-right {
        gap: 1rem;
        width: 100%;
        justify-content: flex-end;
    }

    .navbar-icon {
        font-size: 1.2rem;
    }

    .dashboard-content {
        padding: 0 0.75rem 2.5rem;
    }
}

@media (max-width: 480px) {
    .dashboard-navbar {
        padding: 0.75rem 0;
    }

    .navbar-container {
        padding: 0 0.75rem;
    }

    .navbar-brand {
        gap: 0.4rem;
    }

    .brand-name {
        font-size: 1.25rem;
    }

    .brand-logo {
        height: 28px;
    }

    .page-main-title {
        font-size: clamp(1.5rem, 7vw, 1.75rem);
    }

    .page-main-subtitle {
        font-size: 0.9375rem;
    }

    .dashboard-content {
        padding: 0 0.5rem 2rem;
    }

    .footer-container {
        padding: 0 0.75rem;
    }
}

/* ==========================================
   DASHBOARD PAGE RESPONSIVE STYLES
   ========================================== */

.dashboard-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #f7f9fc 0%, #eef3f9 100%);
}

.dark-theme .dashboard-page {
    background: linear-gradient(180deg, #242a38 0%, #16191c 100%);
}

.dashboard-page .dashboard-navbar,
.dashboard-page .dashboard-footer {
    flex-shrink: 0;
}

.dashboard-page .dashboard-content {
    flex: 1 1 auto;
    width: 100%;
    padding: clamp(0.75rem, 2vw, 1.5rem) clamp(0.75rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 3rem);
}

.dashboard-page .navbar-container,
.dashboard-page .footer-container,
.dashboard-page .page-header-section {
    width: min(100%, 100%);
    max-width: none;
}

.dashboard-page .page-header-section {
    padding: clamp(1.5rem, 3vw, 3rem) clamp(0.75rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
}

.dashboard-page .page-main-title {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    margin: 0;
}

.dashboard-page .navbar-container {
    max-width: none;
}

.dashboard-page .brand-logo-wordmark {
    max-width: 110px;
}

.dashboard-page .navbar-right {
    margin-left: auto;
}

.dashboard-page .dashboard-content .premium-dashboard-layout {
    width: 100%;
    max-width: none;
    padding-inline: 0;
    gap: clamp(0.875rem, 1.8vw, 1.5rem);
}

.dashboard-page .dashboard-content .dashboard-row {
    gap: clamp(0.875rem, 1.8vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.dashboard-page .dashboard-content .row-hero {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.dashboard-page .dashboard-content .row-equal {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.dashboard-page .dashboard-content .row-wide {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.dashboard-page .dashboard-content .card-large,
.dashboard-page .dashboard-content .card-medium,
.dashboard-page .dashboard-content .card-service,
.dashboard-page .dashboard-content .card-wide {
    min-width: 0;
}

.dashboard-page .dashboard-content .wide-content {
    flex-wrap: wrap;
}

.dashboard-page .dashboard-content .wide-left {
    min-width: 0;
}

@media (max-width: 1024px) {
    .dashboard-page .navbar-brand {
        gap: 0.5rem;
    }

    .dashboard-page .brand-logo-wordmark {
        display: none;
    }

    .dashboard-page .dashboard-content .row-hero {
        grid-template-columns: 1fr;
    }

    .dashboard-page .dashboard-content .row-wide {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-page .dashboard-navbar {
        padding: 0.75rem 0;
    }

    .dashboard-page .navbar-container {
        padding-inline: 0.75rem;
    }

    .dashboard-page .dashboard-content {
        padding: 0.75rem 0.75rem 2rem;
    }

    .dashboard-page .dashboard-content .dashboard-row {
        grid-template-columns: 1fr;
    }

    .dashboard-page .dashboard-content .card-large,
    .dashboard-page .dashboard-content .card-medium,
    .dashboard-page .dashboard-content .card-service,
    .dashboard-page .dashboard-content .card-wide {
        padding: 1.25rem;
    }

    .dashboard-page .dashboard-content .card-icon-box {
        width: 52px;
        height: 52px;
    }

    .dashboard-page .dashboard-content .card-icon {
        width: 32px;
        height: 32px;
    }

    .dashboard-page .dashboard-content .wide-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-page .dashboard-content .wide-actions {
        width: 100%;
    }

    .dashboard-page .dashboard-content .action-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .dashboard-page .page-header-section {
        padding-top: 1.25rem;
    }

    .dashboard-page .dashboard-content {
        padding-inline: 0.5rem;
    }

    .dashboard-page .dashboard-content .theme-swatches {
        width: 100%;
        flex-wrap: wrap;
    }

    .dashboard-page .dashboard-content .swatch {
        width: 32px;
        height: 32px;
    }
}

/* ============================================
   PAGE BUILDER STYLES
   ============================================ */

/* Page Builder Layout */
.pb-redesign-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 1fr 250px;
    height: calc(100vh - 64px);
    background: var(--app-tint-panel-d);
}

.pb-redesign-layout.compact-sidebar {
    grid-template-columns: 140px 1fr;
}

.compact-sidebar .admin-sidebar {
    --admin-sidebar-expanded-width: 8.75rem;
    width: 8.75rem;
}

.compact-sidebar .admin-sidebar.is-expanded {
    --admin-sidebar-expanded-width: 8.75rem;
    width: 8.75rem;
}

.compact-sidebar .admin-sidebar.is-collapsed {
    width: var(--admin-sidebar-collapsed-width);
}

/* Left Panel */
.pb-left-panel {
    grid-row: 1 / 2;
    background: var(--app-surface);
    border-right: 1px solid var(--app-border-hairline);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pb-left-tabs {
    display: flex;
    border-bottom: 1px solid var(--app-border-hairline);
    background: var(--app-surface);
}

.pb-tab-btn {
    flex: 1;
    padding: 0.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

.pb-tab-btn:hover {
    background: var(--app-tint-panel-d);
    color: var(--app-text-color);
}

.pb-tab-btn.active {
    color: #1b3896;
    background: var(--app-surface);
    border-bottom-color: #1b3896;
}

/* Component Palette */
.pb-component-palette-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.compact-sidebar .pb-component-palette-vertical {
    gap: 0.4rem;
    padding: 0.5rem;
}

.pb-comp-item {
    background: var(--app-surface);
    border: 1px solid var(--app-border-hairline);
    border-radius: 12px;
    padding: 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
}

.compact-sidebar .pb-comp-item {
    padding: 0.45rem;
    gap: 0.25rem;
}

.pb-comp-item:hover {
    border-color: #1b3896;
    background: var(--app-tint-panel-d);
    transform: translateX(2px);
}

.pb-comp-item i {
    font-size: 1.3rem;
    color: #1b3896;
}

.compact-sidebar .pb-comp-item i {
    font-size: 1.1rem;
}

.pb-comp-item span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--app-text-color);
}

.compact-sidebar .pb-comp-item span {
    font-size: 0.68rem;
}

/* Pages Explorer */
.pb-pages-explorer,
.pb-components-list-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.pb-components-list,
.pb-pages-list-explorer {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.pb-component-list-item,
.pb-page-explorer-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--app-border-faint);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.pb-component-list-item:hover,
.pb-page-explorer-item:hover {
    background: var(--app-tint-panel-d);
}

.pb-component-list-item.active,
.pb-page-explorer-item.active {
    background: var(--app-wash-info);
    border-left: 3px solid #1b3896;
}

.pb-component-icon,
.pb-page-icon {
    width: 28px;
    height: 28px;
    background: var(--app-tint-panel-d);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #1b3896;
    flex-shrink: 0;
}

.pb-component-list-item.active .pb-component-icon,
.pb-page-explorer-item.active .pb-page-icon {
    background: #1b3896;
    color: white;
}

.pb-component-details,
.pb-page-details {
    flex: 1;
    min-width: 0;
}

.pb-component-type,
.pb-page-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--app-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.15rem;
}

.pb-component-position,
.pb-page-meta {
    font-size: 0.65rem;
    color: #64748b;
}

.pb-page-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-delete-component-list {
    background: transparent;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    opacity: 0;
    transition: all 0.2s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.pb-component-list-item:hover .btn-delete-component-list {
    opacity: 1;
}

.btn-delete-component-list:hover {
    background: var(--app-wash-danger-alt);
}

.pb-pages-toolbar {
    padding: 0.75rem;
    border-bottom: 1px solid var(--app-border-hairline);
    background: var(--app-surface);
}

.pb-pages-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    padding: 2rem 1rem;
}

.pb-pages-empty i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #cbd5e1;
}

.pb-pages-empty p {
    font-size: 0.75rem;
    margin: 0;
}

/* Center Area */
.pb-center-area {
    grid-row: 1 / 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pb-preview-toolbar {
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border-hairline);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pb-toolbar-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.pb-page-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--app-text-color);
}

.pb-current-page {
    font-weight: 600;
}

/* Canvas */
.pb-canvas {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background: var(--app-tint-panel-d);
}

.pb-canvas-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.pb-canvas-empty i {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #cbd5e1;
}

.pb-canvas-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pb-canvas-row-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pb-canvas-row-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.pb-canvas-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.pb-drop-slot {
    min-height: 10px;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    background: rgba(var(--app-surface-rgb), 0.75);
}

.pb-drop-slot.active {
    border-color: #1b3896;
    background: rgba(27, 56, 150, 0.1);
}

.pb-canvas-component {
    background: var(--app-surface);
    border: 2px solid var(--app-border-cool);
    border-radius: 12px;
    padding: 0.75rem;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pb-canvas-component:hover {
    border-color: #1b3896;
    box-shadow: 0 6px 18px rgba(27, 56, 150, 0.12);
}

.pb-canvas-component.selected {
    border-color: #1b3896;
    box-shadow: 0 0 0 1px rgba(27, 56, 150, 0.2);
}

.pb-canvas-component.dragging {
    opacity: 0.6;
}

.pb-comp-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--app-wash-danger-alt);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    opacity: 0;
    transition: all 0.2s ease;
    cursor: pointer;
}

.pb-canvas-component:hover .pb-comp-delete {
    opacity: 1;
}

.pb-comp-delete:hover {
    background: #ef4444;
    color: white;
}

/* Bottom Panel */
.pb-bottom-panel {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    background: var(--app-surface);
    border-top: 1px solid var(--app-border-hairline);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s ease;
}

.pb-bottom-panel.collapsed {
    overflow: visible;
    align-self: end;
}

.pb-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    cursor: ns-resize;
    background: transparent;
    z-index: 10;
}

.pb-resize-handle:hover {
    background: #1b3896;
}

.pb-config-header {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--app-border-hairline);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--app-surface);
    flex-shrink: 0;
    min-height: 32px;
}

.pb-config-header h5 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a202c;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pb-config-header i {
    color: #1b3896;
    font-size: 0.9rem;
}

.pb-config-actions {
    display: flex;
    gap: 0.4rem;
}

.btn-panel-toggle,
.btn-panel-maximize {
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.btn-panel-toggle:hover,
.btn-panel-maximize:hover {
    background: var(--app-tint-panel-d);
    color: var(--app-text-color);
}

.pb-config-body {
    padding: 1rem;
    flex: 1;
    overflow-y: auto;
    transition: all 0.3s ease;
}

.pb-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.pb-config-footer {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--app-border-hairline);
}

.pb-config-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    padding: 2rem;
}

.pb-config-empty i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #cbd5e1;
}

.pb-config-empty p {
    font-size: 0.8rem;
    margin: 0;
}

/* Dark Theme for Page Builder */
.dark-theme .pb-redesign-layout {
    background: #1a1f2b;
}

.dark-theme .pb-left-panel,
.dark-theme .pb-preview-toolbar,
.dark-theme .pb-bottom-panel {
    background: #242a38;
    border-color: #3d4657;
}

.dark-theme .pb-left-tabs {
    background: #242a38;
    border-color: #3d4657;
}

.dark-theme .pb-tab-btn {
    color: #a7b0c0;
}

.dark-theme .pb-tab-btn:hover {
    background: #2f3646;
    color: #dfe5ef;
}

.dark-theme .pb-tab-btn.active {
    color: #58a6ff;
    background: #242a38;
    border-bottom-color: #58a6ff;
}

.dark-theme .pb-comp-item {
    background: #1a1f2b;
    border-color: #3d4657;
}

.dark-theme .pb-comp-item:hover {
    border-color: #58a6ff;
    background: #1a222d;
}

.dark-theme .pb-comp-item i,
.dark-theme .pb-component-icon,
.dark-theme .pb-page-icon {
    color: #58a6ff;
}

.dark-theme .pb-component-list-item.active,
.dark-theme .pb-page-explorer-item.active {
    background: #152338;
    border-left-color: #58a6ff;
}

.dark-theme .pb-component-list-item.active .pb-component-icon,
.dark-theme .pb-page-explorer-item.active .pb-page-icon {
    background: #58a6ff;
    color: #1a1f2b;
}

.dark-theme .pb-canvas {
    background: #1a1f2b;
}

.dark-theme .pb-canvas-component {
    background: #242a38;
    border-color: #3d4657;
}

.dark-theme .pb-canvas-component:hover {
    border-color: #58a6ff;
}

.dark-theme .pb-config-header {
    background: #242a38;
    border-color: #3d4657;
}

.dark-theme .pb-pages-toolbar {
    background: #242a38;
    border-color: #3d4657;
}

.dark-theme .pb-component-type,
.dark-theme .pb-page-name,
.dark-theme .pb-page-info,
.dark-theme .pb-canvas-row-label,
.dark-theme .pb-config-header h5,
.dark-theme .pb-comp-item span {
    color: #dfe5ef;
}

.dark-theme .pb-component-position,
.dark-theme .pb-page-meta,
.dark-theme .pb-pages-empty,
.dark-theme .pb-config-empty,
.dark-theme .pb-canvas-empty,
.dark-theme .pb-tab-btn {
    color: #a7b0c0;
}

.dark-theme .pb-comp-item,
.dark-theme .pb-component-icon,
.dark-theme .pb-page-icon,
.dark-theme .pb-canvas-component,
.dark-theme .pb-bottom-panel,
.dark-theme .pb-preview-toolbar {
    border-color: #3d4657;
}

.dark-theme .pb-drop-slot {
    background: rgba(13, 17, 23, 0.7);
    border-color: #3d4657;
}

.dark-theme .pb-drop-slot.active {
    background: rgba(88, 166, 255, 0.14);
    border-color: #58a6ff;
}

.dark-theme .pb-canvas-component.selected {
    border-color: #58a6ff;
    box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.2);
}

/* Query Tabs */
.query-tabs-container {
    display: flex;
    align-items: center;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border-hairline);
    overflow: hidden;
}

.query-tabs-scroll {
    display: flex;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: thin;
}

.query-tabs-scroll::-webkit-scrollbar {
    height: 4px;
}

.query-tabs-scroll::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}

.query-tab {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.9rem;
    margin-right: 0.35rem;
    border-radius: 999px;
    background: var(--app-tint-hover-a);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
}

.query-tab:hover {
    background: var(--app-tint-hover-d);
}

.query-tab.active {
    background: var(--app-primary-color);
    color: #ffffff;
    font-weight: 700;
}

.query-tab.active i {
    color: #ffffff;
}

.query-tab i {
    font-size: 0.8125rem;
}

.query-tab-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3b82f6;
}

.query-tab-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    border-radius: 3px;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    font-size: 0.75rem;
}

.query-tab-close:hover {
    background: var(--app-tint-hover-d);
    color: #111827;
}

.query-tab-add {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    font-size: 0.875rem;
}

.query-tab-add:hover {
    background: var(--app-tint-hover-b);
    color: #111827;
}

/* SQL Editor */
.sql-editor {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--app-surface);
}

.sql-editor-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.sql-editor-lines {
    display: flex;
    flex-direction: column;
    background: var(--app-tint-panel-b);
    border-right: 1px solid var(--app-border-hairline);
    padding: 0.75rem 0.375rem;
    user-select: none;
    min-width: 42px;
    text-align: right;
}

.sql-line-number {
    font-family: 'Courier New', monospace;
    font-size: 0.8125rem;
    color: #9ca3af;
    line-height: 1.5;
    height: 19px;
}

.sql-editor-input {
    flex: 1;
    padding: 0.75rem;
    border: none;
    outline: none;
    resize: none;
    font-family: 'Courier New', monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #111827;
    background: var(--app-surface);
}

.sql-editor-input::placeholder {
    color: #9ca3af;
}

/* Results Panel */

.results-tab {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border: none;
    background: transparent;
    border-radius: 5px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.results-tab:hover {
    background: var(--app-tint-hover-b);
    color: #111827;
}

.results-tab.active {
    background: var(--app-surface);
    color: #1b3896;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.results-tab i {
    font-size: 0.8125rem;
}

.results-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.results-table-wrapper {
    overflow: auto;
    height: 100%;
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.results-table thead {
    position: sticky;
    top: 0;
    background: var(--app-tint-panel-b);
    z-index: 1;
}

.results-table th {
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid var(--app-border-hairline);
    white-space: nowrap;
}

.results-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    color: #111827;
}

.results-table tbody tr:hover {
    background: var(--app-tint-panel-b);
}

.results-column-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.results-column-header i {
    color: #9ca3af;
    font-size: 0.6875rem;
}

/* Dark Theme - query tabs and the SQL step editor */
.dark-theme .query-tabs-container,
.dark-theme .sql-editor {
    background: #242a38;
    border-color: #3d4657;
}

.dark-theme .query-tab {
    background: #1a1f2b;
    border-color: #3d4657;
    color: #a7b0c0;
}

.dark-theme .query-tab:hover {
    background: #242a38;
}

.dark-theme .query-tab.active {
    background: #242a38;
    color: #dfe5ef;
}

.dark-theme .query-tab-close:hover {
    background: #3d4657;
    color: #dfe5ef;
}

.dark-theme .query-tab-add:hover {
    background: #2f3646;
    color: #dfe5ef;
}

.dark-theme .sql-editor-lines {
    background: #1a1f2b;
    border-color: #3d4657;
}

.dark-theme .sql-line-number {
    color: #6e7681;
}

.dark-theme .sql-editor-input {
    background: #242a38;
    color: #dfe5ef;
}

.dark-theme .sql-editor-input::placeholder {
    color: #6e7681;
}

.dark-theme .results-tab {
    color: #a7b0c0;
}

.dark-theme .results-tab:hover {
    background: #2f3646;
    color: #dfe5ef;
}

.dark-theme .results-tab.active {
    background: #242a38;
    color: #58a6ff;
}

.dark-theme .results-table thead {
    background: #1a1f2b;
}

.dark-theme .results-table th {
    color: #dfe5ef;
    border-color: #3d4657;
}

.dark-theme .results-table td {
    color: #dfe5ef;
    border-color: #2f3646;
}

.dark-theme .results-table tbody tr:hover {
    background: #1a1f2b;
}

.dark-theme .results-column-header i {
    color: #6e7681;
}

/* SQL Rollback Button */

.admin-header-schema {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    transition: background-color 0.2s;
}

.admin-header-schema:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.schema-label {
    font-size: 0.875rem;
    font-weight: 500;
}

@keyframes vision-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.subject-area-card {
    background: var(--app-surface);
    border: 1px solid var(--vision-border) !important;
    border-radius: 14px !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    animation: vision-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.row.g-3 > [class*="col-"]:nth-child(1) .subject-area-card { animation-delay: 0.02s; }
.row.g-3 > [class*="col-"]:nth-child(2) .subject-area-card { animation-delay: 0.08s; }
.row.g-3 > [class*="col-"]:nth-child(3) .subject-area-card { animation-delay: 0.14s; }
.row.g-3 > [class*="col-"]:nth-child(4) .subject-area-card { animation-delay: 0.2s; }
.row.g-3 > [class*="col-"]:nth-child(5) .subject-area-card { animation-delay: 0.26s; }
.row.g-3 > [class*="col-"]:nth-child(6) .subject-area-card { animation-delay: 0.32s; }
.row.g-3 > [class*="col-"]:nth-child(n+7) .subject-area-card { animation-delay: 0.36s; }

.subject-area-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -18px rgba(18, 34, 77, 0.32);
}

.subject-area-card:active {
    transform: translateY(-2px) scale(0.99);
}

.subject-area-card .card-title {
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--app-text-navy);
}

.subject-area-card .badge.bg-success {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--vision-success-bg) !important;
    color: var(--vision-success-text) !important;
    font-weight: 700;
    font-size: 11.5px;
    padding: 5px 12px;
    border-radius: 999px;
}

.subject-area-card .badge.bg-success::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--vision-success-dot);
}

.subject-area-card .badge.bg-warning {
    border-radius: 999px;
    font-weight: 700;
    font-size: 11.5px;
    padding: 5px 12px;
}

.subject-area-detail {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--app-tint-panel-e);
}

.sa-detail-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--app-tint-panel-e);
    min-height: 0;
    height: calc(100vh - 120px);
}

/* Subject Area Content Wrapper - 90% Scale */
.subject-area-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.9);
    transform-origin: top left;
    width: 111.11%;
    height: 111.11%;
}

/* Header Section */
.sa-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border-soft);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--app-text-body);
}

.header-right {
    display: flex;
    gap: 0.5rem;
}

/* Tabs Section */
.sa-tabs-container {
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border-soft);
    border-radius: 6px 6px 0 0;
}

.primary-tabs {
    display: flex;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--app-border-soft);
}

.secondary-tabs {
    display: flex;
    padding: 0 1.5rem;
    background: var(--app-tint-panel-c);
}

.tab-item {
    padding: 0.875rem 1.5rem;
    cursor: pointer;
    color: #666;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    user-select: none;
}

.primary-tabs .tab-item:hover {
    color: #0d6efd;
    background: var(--app-surface-muted);
}

.primary-tabs .tab-item.active {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
}

.secondary-tabs .tab-item {
    font-size: 0.9rem;
    padding: 0.75rem 1.25rem;
}

.secondary-tabs .tab-item:hover {
    color: #0d6efd;
    background: var(--app-surface-sunken);
}

.secondary-tabs .tab-item.active {
    color: #0d6efd;
    background: var(--app-surface);
    border-bottom-color: #0d6efd;
}

/* Content Area */
.sa-content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.sa-detail-main.app-scroll-y {
    overflow: hidden;
}

/* Attributes Layout */
.sa-attributes-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sa-attributes-main {
    flex: 1;
    overflow-y: auto;
    background: var(--app-tint-panel-e);
}

.sa-attributes-properties {
    height: 280px;
    border-top: 2px solid var(--app-border-soft);
    background: var(--app-surface);
}

/* Attribute Grid Container */
.attribute-grid-container {
    display: flex;
    height: 100%;
    padding: 0.75rem;
    /* reduced padding */
    gap: 0.75rem;
}

/* Toolbox Section */
.toolbox-section {
    width: 100px;
    background: var(--app-surface);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.toolbox-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    text-align: center;
}

.toolbox-item:hover {
    background: var(--app-wash-info);
    color: #0d6efd;
}

.toolbox-item i {
    font-size: 1.5rem;
    color: #666;
}

.toolbox-item:hover i {
    color: #0d6efd;
}

.toolbox-item span {
    font-size: 0.7rem;
    color: #666;
    line-height: 1.2;
}

.toolbox-item:hover span {
    color: #0d6efd;
}

/* Attributes Grid Area */
.attributes-grid-area {
    /* fixed height tiles area so properties panel remains visible */
    flex: 0 0 200px;
    /* fixed height in 180-220px range */
    overflow-y: auto;
    min-height: 0;
}

.attributes-grid {
    display: grid;
    /* reduce min tile width so more tiles fit per row */
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
    /* smaller gap */
    padding: 0.4rem;
}

/* Attribute Tile */
.attribute-tile {
    background: var(--app-surface);
    border: 1px solid var(--app-border-soft);
    /* thinner border */
    border-radius: 8px;
    padding: 0.6rem;
    /* reduced padding */
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 90px;
    /* reduced tile height */
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.attribute-tile:hover {
    border-color: #0d6efd;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
    transform: translateY(-2px);
}

.attribute-tile.selected {
    border-color: #0d6efd;
    background: var(--app-wash-info);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
}

.tile-icon {
    font-size: 1.5rem;
    color: #0d6efd;
    margin-bottom: 0.4rem;
}

.tile-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tile-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--app-text-body);
    margin-bottom: 0.25rem;
}

.tile-id {
    font-size: 0.75rem;
    color: #6c757d;
}

.tile-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--app-text-body);
    margin-bottom: 0.1rem;
}

.tile-id {
    font-size: 0.7rem;
    color: #6c757d;
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* Properties Panel */
.properties-panel-container {
    display: flex;
    height: 100%;
    background: var(--app-surface);
    flex: 1 1 auto;
    /* occupy remaining vertical space */
    min-height: 0;
}

.properties-sidebar {
    width: 180px;
    background: var(--app-tint-panel-c);
    border-right: 1px solid var(--app-border-soft);
    display: flex;
    flex-direction: column;
}

.properties-tab {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    color: #666;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.properties-tab:hover {
    background: var(--app-surface-sunken);
    color: #0d6efd;
}

.properties-tab.active {
    background: var(--app-surface);
    color: #0d6efd;
    border-left-color: #0d6efd;
}

.properties-tab i {
    font-size: 1.25rem;
}

.properties-tab span {
    font-size: 0.9rem;
    font-weight: 500;
}

.properties-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    /* reduced padding */
    min-height: 0;
}

/* Properties Form */
.properties-form {
    max-width: 900px;
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: #495057;
    margin-bottom: 0.5rem;
}

.radio-group {
    display: flex;
    gap: 1.5rem;
    padding: 0.5rem 0;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.radio-label input[type="radio"] {
    cursor: pointer;
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .attributes-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .toolbox-section {
        width: 80px;
    }

    .datatype-selector-left {
        width: 100px;
    }

    .datatype-selector-item {
        gap: 6px;
        padding: 5px 6px;
    }

    .datatype-selector-name {
        font-size: 10px;
    }
}

/* Column Grid Styles */
.column-grid-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--app-surface);
    border-radius: 8px;
    padding: 1rem;
}

.column-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--app-border-soft);
}

.column-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    padding: 0.5rem 0;
}

.column-tile {
    background: var(--app-surface);
    border: 2px solid var(--app-border-soft);
    border-radius: 8px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 120px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.column-tile:hover {
    border-color: #0d6efd;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
    transform: translateY(-2px);
}

.column-tile.selected {
    border-color: #0d6efd;
    background: var(--app-wash-info);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
}

.column-tile-icon {
    font-size: 2rem;
    color: #0d6efd;
    margin-bottom: 0.75rem;
}

.column-tile-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--app-text-body);
    margin-bottom: 0.25rem;
}

.column-tile-info {
    font-size: 0.75rem;
    color: #6c757d;
}

.column-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #999;
}

.column-empty-state i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/* Column Details Panel */
.column-details-panel {
    background: var(--app-surface);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    overflow: hidden;
}

/* Strong overrides: the field properties panel is now a popup (see .field-config-modal),
   so the attribute tiles area is free to fill the entire viewport instead of reserving
   space for a docked bottom panel. These are placed at the end to take precedence over
   earlier rules. */
.columns-section .fields-layout .fields-display-area {
    flex: 1 1 auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
}

.columns-section .fields-layout .fields-tiles-grid,
.columns-section .fields-layout .attributes-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 0.85rem !important;
    padding: 1rem !important;
    overflow-y: auto !important;
    align-content: flex-start !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.columns-section .properties-panel-container,
.columns-section .properties-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* Reduce large margins that could push content off-screen.
   Horizontal padding is 0 so this area's edges line up with the full-width
   tab strip above it instead of appearing inset. */
.columns-section,
.sa-attributes-main,
.sa-content-area {
    padding: 0.6rem 0.2rem !important;
}

.column-details-header {
    padding: 1rem 1.5rem;
    background: var(--app-surface-muted);
    border-bottom: 1px solid var(--app-border-soft);
}

.column-details-body {
    padding: 1.5rem;
}

.column-fields-table {
    margin-bottom: 0;
    font-size: 0.875rem;
}

.column-fields-table thead th {
    background: var(--app-surface-muted);
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
}

.column-fields-table tbody td {
    padding: 0.5rem;
    vertical-align: middle;
}

.column-fields-table input[type="text"],
.column-fields-table input[type="number"],
.column-fields-table select {
    font-size: 0.875rem;
}

.column-fields-table input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
}

.columns-tab-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

/* Columns Section */
.columns-section {
    background: transparent;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1rem;
    /* reduced padding */
    gap: 0.75rem;
}

.columns-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.columns-header h5 {
    margin: 0;
    font-weight: 600;
    color: var(--app-text-body);
}

/* Column Selector Bar */
.column-selector-bar {
    background: var(--app-surface);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Column Selection Prompt */
.column-selection-prompt {
    background: var(--app-surface);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.columns-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.column-display-tile {
    background: var(--app-surface-muted);
    border: 2px solid var(--app-border-soft);
    border-radius: 8px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 130px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.column-display-tile:hover {
    border-color: #0d6efd;
    background: var(--app-wash-info-alt);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
    transform: translateY(-2px);
}

.column-display-icon {
    font-size: 2.5rem;
    color: #0d6efd;
    margin-bottom: 0.75rem;
}

.column-display-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--app-text-body);
    margin-bottom: 0.25rem;
}

.column-display-info {
    font-size: 0.8rem;
    color: #6c757d;
}

.field-display-tile {
    background: var(--app-surface);
    border: 1px solid var(--vision-border, var(--app-border-mist));
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-height: 130px;
    justify-content: flex-start;
    gap: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: relative;
}

.field-display-tile-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.field-display-tile:hover {
    border-color: var(--vision-accent, #0d6efd);
    background: var(--app-wash-info);
    box-shadow: 0 10px 22px -14px rgba(18, 34, 77, 0.35);
    transform: translateY(-3px);
}

.field-display-tile:hover .field-delete-btn {
    opacity: 1;
}

.field-display-tile.selected {
    border-color: #0d6efd;
    background: #d0e7ff;
    box-shadow: 0 3px 8px rgba(13, 110, 253, 0.25);
}

.field-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    opacity: 0;
    transition: opacity 0.2s;
    padding: 2px 6px;
    font-size: 0.7rem;
    border-radius: 3px;
}

.field-delete-btn:hover {
    background: #dc3545;
    border-color: #dc3545;
}

.field-display-icon-box {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--app-wash-info, rgba(13, 110, 253, 0.12));
    color: #0d6efd;
    font-size: 1.1rem;
}

.field-display-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--app-text-body);
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.field-display-info {
    font-size: 0.7rem;
    color: #6c757d;
    font-family: monospace;
}

/* Field Configuration Panel (Bottom) */
.field-config-panel-bottom {
    background: var(--app-surface);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--app-border-plain);
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

/* Field Configuration Panel — now a popup, only shown when an attribute is selected */
.field-config-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: fadeIn 0.18s ease-out;
}

.field-config-modal {
    position: relative;
    width: min(760px, 94vw);
    max-height: min(720px, 88vh);
    background: var(--app-surface);
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.field-config-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--vision-border, var(--app-border-mist));
    flex-shrink: 0;
}

.field-config-modal-heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.field-config-modal-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vision-accent, #2b6fe0);
    letter-spacing: -0.01em;
}

.field-config-modal-subtitle {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--app-text-navy);
}

.field-config-modal-saving {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--vision-text-muted, #6b7688);
    font-style: italic;
}

.field-config-modal-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--vision-border, var(--app-border-mist));
    background: var(--app-surface);
    color: #48526b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.15s ease-in-out;
}

.field-config-modal-close:hover {
    background: var(--app-wash-danger);
    color: #c0432a;
    transform: scale(1.08);
}

.field-config-modal-close:active {
    transform: scale(0.92);
}

.field-config-modal-tabs {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--vision-border, var(--app-border-mist));
    flex-shrink: 0;
    overflow-x: auto;
}

.field-config-modal-tab {
    position: relative;
    padding: 0.85rem 0.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--vision-text-muted, #6b7688);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.18s ease-in-out, border-color 0.18s ease-in-out;
}

.field-config-modal-tab:hover {
    color: var(--app-text-navy);
}

.field-config-modal-tab.active {
    color: var(--vision-accent, #2b6fe0);
    border-bottom-color: var(--vision-accent, #2b6fe0);
}

.field-config-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 1.5rem 1.5rem;
    background: var(--app-surface);
}

@media (max-width: 767.98px) {
    .field-config-modal {
        width: 100%;
        max-height: 92vh;
    }

    .field-config-modal-tabs {
        gap: 1rem;
    }
}

/* Column Fields Layout */
.column-fields-layout {
    display: flex;
    gap: 1.5rem;
    background: var(--app-surface);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.fields-display-area {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.fields-display-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--app-border-soft);
}

.fields-display-header h6 {
    margin: 0;
    font-weight: 600;
    color: var(--app-text-body);
}

.fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    padding: 0.5rem 0;
}

.field-tile {
    background: var(--app-surface-muted);
    border: 2px solid var(--app-border-soft);
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 110px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.field-tile:hover {
    border-color: #0d6efd;
    background: var(--app-wash-info-alt);
    box-shadow: 0 3px 8px rgba(13, 110, 253, 0.15);
    transform: translateY(-2px);
}

.field-tile.selected {
    border-color: #0d6efd;
    background: #d0e7ff;
    box-shadow: 0 3px 8px rgba(13, 110, 253, 0.25);
}

.field-tile-icon {
    font-size: 1.5rem;
    color: #0d6efd;
    margin-bottom: 0.5rem;
}

.field-tile-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--app-text-body);
    margin-bottom: 0.25rem;
}

.field-tile-info {
    font-size: 0.7rem;
    color: #6c757d;
    font-family: monospace;
}

/* Field Configuration Panel */
.field-config-panel {
    width: 320px;
    background: var(--app-tint-panel-c);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    max-height: 600px;
}

.config-panel-header {
    padding: 1rem 1.25rem;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border-soft);
    border-radius: 8px 8px 0 0;
}

.config-panel-header h6 {
    margin: 0;
    font-weight: 600;
    color: var(--app-text-body);
    font-size: 0.95rem;
}

.config-panel-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}

.config-panel-body .form-group {
    margin-bottom: 1rem;
}

.config-panel-body .form-label {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.config-panel-body .form-control,
.config-panel-body .form-select {
    font-size: 0.875rem;
    border-radius: 6px;
}

.config-panel-body .form-check {
    padding: 0.75rem;
    background: var(--app-surface);
    border-radius: 6px;
    border: 1px solid var(--app-border-soft);
}

.config-panel-body .form-check-label {
    font-weight: 500;
    font-size: 0.875rem;
    margin-left: 0.5rem;
}

/* Responsive */
@media (max-width: 992px) {
    .column-fields-layout {
        flex-direction: column;
    }

    .field-config-panel {
        width: 100%;
        max-height: none;
    }

    .fields-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

/* ========================================
   ENTERPRISE CONFIGURATION PANEL STYLES
   ======================================== */

/* Enterprise Form (field properties popup content) */
.enterprise-form {
    padding: 0;
}

.enterprise-form-section {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.enterprise-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.enterprise-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Enterprise Labels */
.enterprise-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--vision-text-muted, #6b7688);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

/* Enterprise Inputs */
.enterprise-input,
.enterprise-select,
.enterprise-textarea {
    font-size: 0.875rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--vision-border, var(--app-border-mist));
    border-radius: 8px;
    background: var(--app-surface);
    color: var(--app-text-navy);
    font-family: inherit;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.enterprise-input:focus,
.enterprise-select:focus,
.enterprise-textarea:focus {
    outline: none;
    border-color: var(--vision-accent, #2b6fe0);
    box-shadow: 0 0 0 3px rgba(43, 111, 224, 0.12);
}

.enterprise-input:disabled,
.enterprise-select:disabled,
.enterprise-textarea:disabled {
    background: var(--app-tint-panel-d);
    color: var(--vision-text-muted, #6b7688);
}

.enterprise-textarea {
    resize: vertical;
    min-height: 72px;
}

.enterprise-select {
    cursor: pointer;
}

/* Radio Group */
.enterprise-radio-group {
    display: flex;
    gap: 1.25rem;
    padding: 0.25rem 0;
}

.enterprise-radio-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--app-text-navy);
    cursor: pointer;
}

.enterprise-radio-label input[type="radio"] {
    cursor: pointer;
    margin: 0;
    accent-color: var(--vision-accent, #2b6fe0);
}

.enterprise-radio-label span {
    user-select: none;
}

/* Checkbox */
.enterprise-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--app-text-navy);
    cursor: pointer;
    padding: 0.6rem 0.7rem;
    background: var(--app-tint-panel-a);
    border: 1px solid var(--vision-border, var(--app-border-mist));
    border-radius: 8px;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.enterprise-checkbox-label:hover {
    background: var(--app-tint-panel-f);
    border-color: var(--vision-accent, #2b6fe0);
}

.enterprise-checkbox {
    cursor: pointer;
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--vision-accent, #2b6fe0);
}

.enterprise-checkbox-label span {
    user-select: none;
}

/* Placeholder for inactive tabs */
.enterprise-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #999;
    text-align: center;
}

.enterprise-placeholder i {
    font-size: 2rem;
    margin-bottom: 12px;
    color: #ccc;
}

.enterprise-placeholder p {
    font-size: 12px;
    margin: 0;
    color: #666;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .enterprise-form-row {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   DATA TYPE SELECTOR STYLES (VERTICAL LEFT)
   ======================================== */

.fields-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 0.5rem;
}

/* Fields Display Area - Horizontal Layout */
.fields-display-area {
    background: transparent;
    border-radius: 8px;
    padding: 0;
    box-shadow: none;
    flex: 0 0 220px;
    overflow: visible;
    min-height: 0;
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    width: 100%;
}

/* Data Type Selector - Left Panel */
.datatype-selector-left {
    width: 140px;
    background: var(--app-surface);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

.datatype-selector-header {
    padding: 8px 10px;
    background: transparent;
    border-bottom: 1px solid var(--app-border-soft);
}

.datatype-selector-title {
    font-size: 10px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.datatype-selector-list {
    flex: 1;
    overflow-y: auto;
}

.datatype-selector-list::-webkit-scrollbar {
    width: 4px;
}

.datatype-selector-list::-webkit-scrollbar-track {
    background: var(--app-tint-panel-e);
}

.datatype-selector-list::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 2px;
}

.datatype-selector-list::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0;
}

.datatype-selector-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 2px;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.15s;
    border: 1px solid transparent;
}

.datatype-selector-item:hover {
    background: var(--app-wash-info-alt);
    border-color: #d0e7ff;
}

.datatype-selector-item.active {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

.datatype-selector-item i {
    font-size: 13px;
    color: #666;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.datatype-selector-item:hover i {
    color: #0d6efd;
}

.datatype-selector-item.active i {
    color: white;
}

.datatype-selector-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--app-text-neutral);
    user-select: none;
}

.datatype-selector-item:hover .datatype-selector-name {
    color: #0d6efd;
}

.datatype-selector-item.active .datatype-selector-name {
    color: white;
    font-weight: 600;
}

/* Fields Tiles Grid - Right Side */
.fields-tiles-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.6rem;
    padding: 0.6rem;
    overflow-y: auto;
    background: var(--app-surface);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

/* Add Field Button */
.add-field-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    grid-column: 1;
}

.add-field-btn {
    width: 100%;
    height: 100%;
    border: 2px dashed #0d6efd;
    background: var(--app-wash-info);
    color: #0d6efd;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    padding: 1rem;
}

.add-field-btn:hover {
    background: var(--app-wash-info-alt);
    border-color: #0c5de4;
    color: #0c5de4;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
}

.add-field-btn:active {
    transform: scale(0.98);
}

/* ============================================
   SUBJECT AREA DETAIL PAGE STYLES
   ============================================ */

/* Main Container */
.sa-detail-page {
    min-height: calc(100vh - 64px);
    background: var(--app-tint-panel-d);
    padding: 0;
}

.sa-detail-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
    background: var(--app-surface);
}

/* Loading State */
.sa-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 64px);
    gap: 1rem;
    color: #6b7280;
}

.sa-loading .spinner-border {
    width: 3rem;
    height: 3rem;
    color: #1b3896;
}

/* Error State */
.sa-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 64px);
    gap: 1rem;
    color: #6b7280;
}

.sa-error i {
    font-size: 3rem;
    color: #ef4444;
}

/* Header Section */
.sa-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border-hairline);
    flex-shrink: 0;
}

.sa-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sa-name {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
}

.badge-active {
    background: #10b981;
    color: white;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.badge-inactive {
    background: #6b7280;
    color: white;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.sa-header-right {
    display: flex;
    gap: 0.75rem;
}

/* Tabs Section */
.sa-tabs-container {
    background: var(--app-surface);
    border-bottom: 2px solid var(--app-border-hairline);
    flex-shrink: 0;
}

.sa-tabs {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0 1.5rem;
    gap: 0.5rem;
}

.sa-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    color: #6b7280;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
    position: relative;
    top: 2px;
}

.sa-tab:hover {
    color: #111827;
    background: var(--app-tint-panel-b);
}

.sa-tab.active {
    color: #1b3896;
    border-bottom-color: #1b3896;
    background: transparent;
}

.sa-tab i {
    font-size: 1rem;
}

/* Content Area */
.sa-content-area {
    flex: 1;
    overflow: hidden;
    background: var(--app-tint-panel-b);
}

/* Attributes Layout */
.sa-attributes-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    height: 100%;
    overflow: hidden;
}

.sa-attributes-main {
    overflow-y: auto;
    background: var(--app-tint-panel-b);
}

.sa-attributes-properties {
    border-left: 1px solid var(--app-border-hairline);
    background: var(--app-surface);
    overflow-y: auto;
}

/* Attributes Section */
.attributes-section {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.attributes-toolbar {
    padding: 1rem 1.5rem;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border-hairline);
}

.attributes-grid-container {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.attributes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.attributes-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #9ca3af;
    gap: 0.75rem;
}

.attributes-empty i {
    font-size: 3rem;
    color: #d1d5db;
}

.attributes-empty p {
    margin: 0;
    font-size: 0.9375rem;
}

/* Attribute Tile */
.attribute-tile {
    background: var(--app-surface);
    border: 2px solid var(--app-border-hairline);
    border-radius: 12px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

.attribute-tile:hover {
    border-color: #1b3896;
    box-shadow: 0 4px 12px rgba(27, 56, 150, 0.1);
    transform: translateY(-2px);
}

.attribute-tile.selected {
    border-color: #1b3896;
    background: linear-gradient(135deg, var(--app-wash-info) 0%, #f8faff 100%);
    box-shadow: 0 4px 16px rgba(27, 56, 150, 0.15);
}

.attr-icon {
    width: 48px;
    height: 48px;
    background: var(--app-wash-info);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1b3896;
    font-size: 1.5rem;
}

.attribute-tile.selected .attr-icon {
    background: #1b3896;
    color: white;
}

.attr-content {
    width: 100%;
}

.attr-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
    word-break: break-word;
}

.attr-id {
    font-size: 0.8125rem;
    color: #6b7280;
    font-family: 'Courier New', monospace;
}

/* Properties Panel */
.properties-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.properties-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--app-tint-panel-b);
    border-bottom: 1px solid var(--app-border-hairline);
}

.properties-header h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

.properties-body {
    flex: 1;
    overflow-y: auto;
}

.properties-tabs-container {
    display: grid;
    grid-template-columns: 140px 1fr;
    height: 100%;
}

.properties-tabs-vertical {
    background: var(--app-tint-panel-b);
    border-right: 1px solid var(--app-border-hairline);
    padding: 0.75rem 0;
}

.prop-tab {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.prop-tab:hover {
    background: var(--app-tint-hover-b);
    color: #111827;
}

.prop-tab.active {
    background: var(--app-surface);
    color: #1b3896;
    border-left-color: #1b3896;
}

.prop-tab i {
    font-size: 1rem;
}

.properties-content {
    padding: 1.5rem;
    overflow-y: auto;
}

.prop-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.prop-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.prop-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.prop-radio-group {
    display: flex;
    gap: 1.5rem;
}

.prop-radio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #111827;
}

.prop-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.prop-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #9ca3af;
    gap: 0.75rem;
}

.prop-placeholder i {
    font-size: 2.5rem;
    color: #d1d5db;
}

.prop-placeholder p {
    margin: 0;
    font-size: 0.9375rem;
}

/* Placeholder for other tabs */
.sa-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #9ca3af;
    gap: 1rem;
}

.sa-placeholder i {
    font-size: 4rem;
    color: #d1d5db;
}

.sa-placeholder p {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
}

/* ============================================
   DARK THEME
   ============================================ */

.dark-theme .sa-detail-page {
    background: #1a1f2b;
}

.dark-theme .sa-detail-container {
    background: #242a38;
}

.dark-theme .sa-detail-header {
    background: #242a38;
    border-bottom-color: #3d4657;
}

.dark-theme .sa-name {
    color: #dfe5ef;
}

.dark-theme .sa-tabs-container {
    background: #242a38;
    border-bottom-color: #3d4657;
}

.dark-theme .sa-tab {
    color: #a7b0c0;
}

.dark-theme .sa-tab:hover {
    color: #dfe5ef;
    background: #2f3646;
}

.dark-theme .sa-tab.active {
    color: #58a6ff;
    border-bottom-color: #58a6ff;
}

.dark-theme .sa-content-area {
    background: #1a1f2b;
}

.dark-theme .sa-attributes-main {
    background: #1a1f2b;
}

.dark-theme .sa-attributes-properties {
    background: #242a38;
    border-left-color: #3d4657;
}

.dark-theme .attributes-toolbar {
    background: #242a38;
    border-bottom-color: #3d4657;
}

.dark-theme .attribute-tile {
    background: #242a38;
    border-color: #3d4657;
}

.dark-theme .attribute-tile:hover {
    border-color: #58a6ff;
    box-shadow: 0 4px 12px rgba(88, 166, 255, 0.2);
}

.dark-theme .attribute-tile.selected {
    border-color: #58a6ff;
    background: linear-gradient(135deg, #152338 0%, #1a222d 100%);
    box-shadow: 0 4px 16px rgba(88, 166, 255, 0.25);
}

.dark-theme .attr-icon {
    background: #2f3646;
    color: #58a6ff;
}

.dark-theme .attribute-tile.selected .attr-icon {
    background: #58a6ff;
    color: #1a1f2b;
}

.dark-theme .attr-name {
    color: #dfe5ef;
}

.dark-theme .attr-id {
    color: #a7b0c0;
}

.dark-theme .properties-header {
    background: #1a1f2b;
    border-bottom-color: #3d4657;
}

.dark-theme .properties-header h6 {
    color: #dfe5ef;
}

.dark-theme .properties-tabs-vertical {
    background: #1a1f2b;
    border-right-color: #3d4657;
}

.dark-theme .prop-tab {
    color: #a7b0c0;
}

.dark-theme .prop-tab:hover {
    background: #2f3646;
    color: #dfe5ef;
}

.dark-theme .prop-tab.active {
    background: #242a38;
    color: #58a6ff;
    border-left-color: #58a6ff;
}

.dark-theme .prop-label {
    color: #dfe5ef;
}

.dark-theme .prop-radio {
    color: #dfe5ef;
}

.dark-theme .attributes-empty,
.dark-theme .prop-placeholder,
.dark-theme .sa-placeholder,
.dark-theme .sa-loading,
.dark-theme .sa-error {
    color: #a7b0c0;
}

.dark-theme .attributes-empty i,
.dark-theme .prop-placeholder i,
.dark-theme .sa-placeholder i {
    color: #3d4657;
}

.dark-theme .sa-error i {
    color: #f85149;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1024px) {
    .sa-attributes-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }

    .sa-attributes-properties {
        border-left: none;
        border-top: 1px solid var(--app-border-hairline);
        max-height: 50vh;
    }

    .dark-theme .sa-attributes-properties {
        border-top-color: #3d4657;
    }
}

@media (max-width: 768px) {
    .sa-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .sa-header-left {
        width: 100%;
    }

    .sa-header-right {
        width: 100%;
        justify-content: flex-end;
    }

    .sa-tabs {
        overflow-x: auto;
        padding: 0 1rem;
    }

    .sa-tab {
        white-space: nowrap;
    }

    .attributes-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .properties-tabs-container {
        grid-template-columns: 100px 1fr;
    }

    .prop-tab {
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
    }
}

@media (max-width: 480px) {
    .sa-name {
        font-size: 1.25rem;
    }

    .attributes-grid {
        grid-template-columns: 1fr;
    }

    .properties-tabs-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .properties-tabs-vertical {
        display: flex;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--app-border-hairline);
    }

    .dark-theme .properties-tabs-vertical {
        border-bottom-color: #3d4657;
    }

    .prop-tab {
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
    }

    .prop-tab.active {
        border-left: none;
        border-bottom-color: #1b3896;
    }

    .dark-theme .prop-tab.active {
        border-bottom-color: #58a6ff;
    }
}

/* ResultsGrid - Collapsed Results State */

/* ==========================================
   Model Operations Hub
   ========================================== */

/* Modal Overlay and Container */
.hub-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}

.hub-modal-overlay:focus {
    outline: none;
}

.hub-modal-content {
    background: var(--app-surface);
    border-radius: 16px;
    width: 480px;
    max-width: 90vw;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1);
    animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dark-theme .hub-modal-content {
    background: #1e2226;
    border-color: #3d4657;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.hub-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--app-border-hairline);
}

.dark-theme .hub-modal-header {
    border-bottom-color: #3d4657;
}

.hub-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.dark-theme .hub-modal-title {
    color: #f5f8fd;
}

.hub-modal-close-btn {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    border-radius: 4px;
    transition: all 0.2s;
}

.hub-modal-close-btn:hover {
    color: #4b5563;
    background-color: var(--app-tint-hover-b);
}

.dark-theme .hub-modal-close-btn:hover {
    color: #dfe5ef;
    background-color: #2d3135;
}

.hub-modal-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--app-tint-panel-a);
}

.dark-theme .hub-modal-body {
    background-color: #181a1d;
}

.hub-container {
    position: relative;
    width: 420px;
    height: 420px;
    margin: 0.5rem auto;
}

.hub-center {
    position: absolute;
    left: 160px;
    top: 160px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1b3896, #102060);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 10px 25px rgba(27, 56, 150, 0.4);
    z-index: 5;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.dark-theme .hub-center {
    background: linear-gradient(135deg, #3754b5, #1e3073);
}

.hub-node {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--app-surface);
    border: 2px solid var(--app-border-hairline);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 4;
    padding: 10px;
    text-align: center;
}

.dark-theme .hub-node {
    background: #212529;
    border-color: #3c4248;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.hub-node:hover {
    transform: scale(1.15);
    border-color: #1b3896;
    box-shadow: 0 12px 24px rgba(27, 56, 150, 0.2);
    z-index: 6;
}

.dark-theme .hub-node:hover {
    border-color: #58a6ff;
    box-shadow: 0 12px 24px rgba(88, 166, 255, 0.2);
}

.hub-node.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.hub-node.disabled:hover {
    transform: none;
    border-color: var(--app-border-hairline);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}

.dark-theme .hub-node.disabled:hover {
    border-color: #3c4248;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.hub-node i {
    font-size: 1.5rem;
    color: #1b3896;
    margin-bottom: 4px;
}

.dark-theme .hub-node i {
    color: #58a6ff;
}

.hub-node span {
    font-size: 0.725rem;
    font-weight: 600;
    line-height: 1.1;
    color: #374151;
}

.dark-theme .hub-node span {
    color: #dfe5ef;
}

/* Position nodes around the circle */
.hub-node-trust {
    left: 165px;
    top: 15px;
}

.hub-node-system {
    left: 290px;
    top: 87.5px;
}

.hub-node-subject-detail {
    left: 290px;
    top: 232.5px;
}

.hub-node-mappings {
    left: 165px;
    top: 305px;
}

.hub-node-subject-list {
    left: 40px;
    top: 232.5px;
}

.hub-node-stage {
    left: 40px;
    top: 87.5px;
}

/* Hub background connectors */
.hub-svg-connectors {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.hub-svg-line {
    stroke: #e5e7eb;
    stroke-width: 2px;
    stroke-dasharray: 4 4;
}

.dark-theme .hub-svg-line {
    stroke: #3d4657;
}

/* Sidebar divider style */
.sidebar-divider {
    transition: opacity 0.3s ease;
}

.is-collapsed .sidebar-divider {
    opacity: 0;
}

.sidebar-add-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--app-text-slate);
    transition: opacity 0.3s ease;
}

.is-collapsed .sidebar-add-text {
    opacity: 0;
    pointer-events: none;
}

.dark-theme .sidebar-add-text {
    color: #dfe5ef;
}

@keyframes scaleUp {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ==========================================
   Model Add Operations & Circular Dial
   ========================================== */

/* Dial Modal Overlay and Container */
.dial-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}

.dial-overlay-with-dial {
    padding-top: var(--dial-padding-offset-top, 130px);
    padding-left: var(--dial-padding-offset-left, 130px);
    padding-right: var(--dialog-padding-right, 40px);
    padding-bottom: var(--dialog-padding-bottom, 40px);
    box-sizing: border-box;
    overflow: auto;
}

.dial-modal-overlay:focus {
    outline: none;
}

/* Container wrapper to hold both the dial and the notched modal content as siblings */
.dial-modal-container {
    position: relative;
    width: 720px;
    max-width: 95vw;
    animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-top: 60px;
    /* Space for the overflowing top half of the dial */
    overflow: visible !important;
}

.dial-modal-content {
    background: var(--app-surface);
    border-radius: 28px;
    width: 100%;
    /* Fill the container width */
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: visible !important;
    clip-path: polygon(137px 0, 100% 0, 100% 100%, 0 100%, 0 137px, 14.3px 136.2px, 28.5px 134px, 42.3px 130.3px, 55.7px 125.2px, 68.5px 118.6px, 80.5px 110.8px, 91.7px 101.8px, 101.8px 91.7px, 110.8px 80.5px, 118.6px 68.5px, 125.2px 55.7px, 130.3px 42.3px, 134px 28.5px, 136.2px 14.3px);
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.18));
}

.dark-theme .dial-modal-content {
    background: #1e2226;
    border-color: #3d4657;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5));
}

.dial-modal-content::before {
    content: '';
    position: absolute;
    top: -136px;
    left: -136px;
    width: 272px;
    height: 272px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: transparent;
    pointer-events: none;
    z-index: 10;
}

.dark-theme .dial-modal-content::before {
    border-color: #3d4657;
}

.dial-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem 1rem 160px;
    /* Large left padding to clear the dial */
    border-bottom: 1px solid var(--app-border-hairline);
    background: var(--app-surface);
    border-radius: 20px;
}

.dark-theme .dial-modal-header {
    border-bottom-color: #3d4657;
    background-color: #1e2226;
    border-radius: 20px;
}

.dial-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.dark-theme .dial-modal-title {
    color: #f5f8fd;
}

.dial-modal-close-btn {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    border-radius: 4px;
    transition: all 0.2s;
}

.dial-modal-close-btn:hover {
    color: #4b5563;
    background-color: var(--app-tint-hover-b);
}

.dark-theme .dial-modal-close-btn:hover {
    color: #dfe5ef;
    background-color: #2d3135;
}

.dial-modal-body {
    position: relative;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: var(--app-tint-hover-c);
    min-height: 220px;
    overflow: hidden;
    border-radius: 20px;
}

.dark-theme .dial-modal-body {
    background-color: #23272b;
    border-radius: 20px;
}

.noise-overlay {
    position: absolute;
    inset: 0;
    background-image: url('/images/noise.png');
    background-repeat: repeat;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

.dial-modal-body .noise-overlay {
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
}

.dialog-content {
    position: relative;
    z-index: 10;
    width: 100%;
}

.dnx-noise-content {
    position: relative;
    z-index: 10;
    width: 100%;
}

/* Floating wrapper for the dial to position it at the top-left corner centered at (0,0) */
.dial-floating-wrapper {
    position: absolute;
    left: -120px;
    /* Shifted left to place dial center exactly at popup corner */
    top: -120px;
    /* Shifted top to place dial center exactly at popup corner */
    z-index: 1060;
    /* Higher than content and header */
}

@media (max-width: 768px) {
    .dial-modal-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin-top: 10px;
    }

    .dial-overlay-with-dial {
        padding: 16px !important;
    }

    .dial-modal-content {
        clip-path: none !important;
        filter: none !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
        overflow: auto !important;
        /* Stack normally on mobile to prevent clipping */
        margin-top: 0;
    }

    .dark-theme .dial-modal-content {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
    }

    .dial-modal-content::before {
        display: none !important;
    }

    .dial-floating-wrapper {
        position: relative;
        left: 0;
        top: 0;
        margin: 1rem auto;
        display: flex;
        justify-content: center;
    }

    .dial-modal-header {
        padding-left: 1.5rem;
    }

    .dial-form-area {
        margin-left: 0 !important;
    }
}

/* ==========================================
   Circular Operation Dial
   ========================================== */

.dial-container {
    position: relative;
    width: 240px;
    height: 240px;
    flex-shrink: 0;
    background-color: var(--dnx-surface, #ffffff);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.08);
}

.dark-theme .dial-container {
    background-color: var(--dnx-surface, #1e2226);
    border-color: rgba(255, 255, 255, 0.15);
}

.dial-center {
    position: absolute;
    left: 80px;
    top: 80px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #047857);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
    z-index: 5;
    border: 2px solid rgba(255, 255, 255, 0.25);
}

@keyframes dial-pop {
    from {
        opacity: 0;
        transform: scale(0.4);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes dial-center-pulse {
    0%, 100% {
        box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
    }

    50% {
        box-shadow: 0 8px 26px rgba(16, 185, 129, 0.6);
    }
}

.dial-node {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--app-surface);
    border: 2px solid var(--app-border-hairline);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 4;
    padding: 8px;
    text-align: center;
    animation: dial-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.dial-node:nth-child(2) { animation-delay: 0.03s; }
.dial-node:nth-child(3) { animation-delay: 0.06s; }
.dial-node:nth-child(4) { animation-delay: 0.09s; }
.dial-node:nth-child(5) { animation-delay: 0.12s; }
.dial-node:nth-child(6) { animation-delay: 0.15s; }

.dial-node:active {
    transform: scale(0.96);
}

.dial-center {
    animation: dial-center-pulse 2.4s ease-in-out infinite;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dial-center:hover {
    transform: scale(1.06);
}

.dark-theme .dial-node {
    background: #212529;
    border-color: #3c4248;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.dial-node:hover {
    transform: scale(1.12);
    border-color: #10b981;
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.15);
    z-index: 6;
}

.dark-theme .dial-node:hover {
    border-color: #34d399;
    box-shadow: 0 10px 20px rgba(52, 211, 153, 0.15);
}

/* Active dial node selection state */
.dial-node.active {
    background-color: var(--app-wash-success);
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
    font-weight: 600;
}

.dark-theme .dial-node.active {
    background-color: #0b3d2b;
    border-color: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
}

.dial-node i {
    font-size: 1.25rem;
    color: #10b981;
    margin-bottom: 2px;
}

.dark-theme .dial-node i {
    color: #34d399;
}

.dial-node span {
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.1;
    color: #374151;
}

.dark-theme .dial-node span {
    color: #dfe5ef;
}

/* Position nodes dynamically via inline styles from Blazor component */

/* SVG Line connectors */
.dial-svg-connectors {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.dial-svg-line {
    stroke: #e5e7eb;
    stroke-width: 2px;
    stroke-dasharray: 4 4;
}

.dark-theme .dial-svg-line {
    stroke: #3d4657;
}

.dial-svg-line.active {
    stroke: #10b981;
    stroke-width: 3px;
    stroke-dasharray: none;
}

.dark-theme .dial-svg-line.active {
    stroke: #34d399;
}

/* Configuration Dial Center Styles */
.dial-center.config-center {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
    flex-direction: column;
    padding: 8px;
    text-align: center;
    line-height: 1.25;
}

.dark-theme .dial-center.config-center {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.config-title {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
    font-weight: 600;
}

.config-selected {
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 2px;
}

/* Form Area Placeholder */
.dial-form-area {
    flex-grow: 1;
    margin-left: 140px;
    /* Space to clear the overlapping dial */
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: all 0.3s;
    min-height: 160px;
    box-shadow: none;
}

.dark-theme .dial-form-area {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}

.dial-selection-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spin-slow-animation {
    animation: spin-slow 8s linear infinite;
}

@keyframes spin-slow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Model Add Operations Forms & Custom Toast Styling */

.dial-form-content {
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.dial-form-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1b3896;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--app-border-hairline);
    padding-bottom: 0.5rem;
}

.dark-theme .dial-form-title {
    color: #e2e8f0;
    border-bottom-color: #334155;
}

.dial-form-area.has-selection {
    border: none;
    align-items: stretch;
    justify-content: stretch;
}

/* Custom Floating Toast Notification */
.custom-toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10000;
    pointer-events: none;
}

.custom-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-radius: 8px;
    background: var(--app-surface);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-left: 4px solid #10b981;
    pointer-events: auto;
    animation: toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    min-width: 300px;
    max-width: 450px;
}

.custom-toast.error {
    border-left-color: #ef4444;
}

.dark-theme .custom-toast {
    background-color: #1e293b;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    border-left-color: #34d399;
    border: 1px solid #334155;
}

.dark-theme .custom-toast.error {
    border-left-color: #f87171;
}

.custom-toast-icon {
    font-size: 1.25rem;
    display: flex;
    align-items: center;
}

.custom-toast.success .custom-toast-icon {
    color: #10b981;
}

.custom-toast.error .custom-toast-icon {
    color: #ef4444;
}

.dark-theme .custom-toast.success .custom-toast-icon {
    color: #34d399;
}

.dark-theme .custom-toast.error .custom-toast-icon {
    color: #f87171;
}

.custom-toast-content {
    flex-grow: 1;
}

.custom-toast-message {
    font-size: 0.875rem;
    font-weight: 500;
    color: #2f3646;
    white-space: pre-line;
}

.dark-theme .custom-toast-message {
    color: #f1f5f9;
}

.custom-toast-close {
    background: transparent;
    border: none;
    padding: 4px;
    color: #9ca3af;
    cursor: pointer;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.custom-toast-close:hover {
    color: #4b5563;
    background-color: var(--app-tint-hover-b);
}

.dark-theme .custom-toast-close:hover {
    color: #cbd5e1;
    background-color: #334155;
}

@keyframes toast-slide-in {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==========================================
   Model Operations Hub
   ========================================== */

/* Model Operations Hub sizing and layout configurations */
.hub-modal-content {
    transition: all 0.3s ease;
}

/* ==========================================
   Landing Area Column Designer
   ========================================== */

.dial-modal-container.wide-modal {
    width: 85vw;
    max-width: 1400px;
    height: 80vh;
    display: flex;
    flex-direction: column;
}

/* Short single-field forms (Domain, Hierarchy Type, the initial name step of
   Reference/Sub Area) don't need the default popup's width, and shouldn't inherit
   the wide-modal flex-fill chain below — that chain stretches every nested layer
   toward the shared max-height regardless of how little content is in it, which is
   why a one-field form still ballooned to the same height as a full designer. Forcing
   block layout on those descendants breaks the chain so height tracks content instead. */
.dial-modal-container.compact-modal {
    width: 620px !important;
    max-width: 92vw !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
}

.dial-modal-container.compact-modal .dial-modal-content {
    display: block !important;
    height: auto !important;
    max-height: none !important;
}

.dial-modal-container.compact-modal .dial-modal-body,
.dial-modal-container.compact-modal .dnx-noise-content,
.dial-modal-container.compact-modal .dial-form-area,
.dial-modal-container.compact-modal .dial-form-content {
    display: block !important;
    flex: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.dial-modal-container.compact-modal .dial-form-scroll-body {
    flex: none !important;
    overflow: visible !important;
}

.dial-modal-container.wide-modal .dial-modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dial-modal-container.wide-modal .dial-modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.dial-modal-container.wide-modal .dial-form-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.landing-designer-full {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.landing-designer-container {
    display: flex;
    gap: 24px;
    width: 100%;
    margin-top: 16px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

.landing-designer-left {
    flex: 0 0 280px;
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    background: var(--app-tint-panel-c);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    min-height: 0;
}

.dark-theme .landing-designer-left {
    border-color: #3d4657;
    background: #242a38;
}

.landing-designer-left .columns-section {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.landing-designer-left .datatype-selector-left {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.landing-designer-left .datatype-selector-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 16px;
}

.landing-designer-left .datatype-selector-header {
    padding: 16px;
    border-bottom: 1px solid var(--app-border-soft);
}

.dark-theme .landing-designer-left .datatype-selector-header {
    border-color: #3d4657;
}

.landing-designer-center {
    flex: 1;
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    background: var(--app-surface);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 24px;
    overflow-y: auto;
}

.dark-theme .landing-designer-center {
    border-color: #3d4657;
    background: #1a1f2b;
}

.designer-center-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.landing-designer-right {
    flex: 1.2;
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    background: var(--app-surface);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 16px;
}

.dark-theme .landing-designer-right {
    border-color: #3d4657;
    background: #1a1f2b;
}

.designer-right-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--app-border-soft);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.dark-theme .designer-right-header {
    border-color: #3d4657;
}

.designer-right-title {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
}

.dark-theme .designer-right-title {
    color: #dfe5ef;
}

.designer-columns-list {
    flex: 1;
    overflow-y: auto;
}

.designer-table {
    margin-bottom: 0;
}

.dark-theme .designer-table th {
    color: #dfe5ef;
    border-color: #3d4657;
}

.dark-theme .designer-table td {
    color: #a7b0c0;
    border-color: #3d4657;
}

.designer-table tr:hover {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

.dark-theme .designer-table tr:hover {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Landing Table Wizard Step 2 Layout modifications */
.dial-modal-container.wide-modal {
    width: 90vw !important;
    max-width: 1450px !important;
    height: 88vh !important;
    display: flex;
    flex-direction: column;
}

.landing-table-designer {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.landing-table-designer .landing-designer-container {
    flex: 1;
    display: flex;
    gap: 20px;
    width: 100%;
    margin-top: 16px;
    align-items: stretch;
    min-height: 0;
    overflow: hidden;
}

.landing-table-designer .landing-designer-left {
    flex: 0 0 270px;
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    background: var(--app-tint-panel-c);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    min-height: 0;
}

.dark-theme .landing-table-designer .landing-designer-left {
    border-color: #3d4657;
    background: #242a38;
}

.landing-table-designer .landing-designer-left .datatype-selector-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 12px;
}

.landing-table-designer .landing-designer-right {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0;
    gap: 16px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.landing-table-designer .landing-designer-form-section {
    flex: 0 0 auto;
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    background: var(--app-surface);
    padding: 16px;
}

.dark-theme .landing-table-designer .landing-designer-form-section {
    border-color: #3d4657;
    background: #1a1f2b;
}

.landing-table-designer .landing-designer-columns-section {
    flex: 1;
    display: flex;
    gap: 16px;
    min-height: 0;
    overflow: hidden;
}

.landing-table-designer .landing-designer-column-box {
    flex: 1;
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    background: var(--app-surface);
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.dark-theme .landing-table-designer .landing-designer-column-box {
    border-color: #3d4657;
    background: #1a1f2b;
}

.landing-table-designer .landing-designer-column-list-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    position: relative;
}

.landing-table-designer .designer-table {
    margin-bottom: 0;
    width: 100%;
}

.landing-table-designer .designer-table th {
    position: sticky;
    top: 0;
    background: var(--app-surface);
    z-index: 2;
    box-shadow: inset 0 -1px 0 #dee2e6;
}

.dark-theme .landing-table-designer .designer-table th {
    background-color: #1a1f2b;
    box-shadow: inset 0 -1px 0 #3d4657;
}

.landing-table-designer .dial-form-actions {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--app-border-hairline);
}

.dark-theme .landing-table-designer .dial-form-actions {
    border-top-color: #334155;
}

/* Responsive stacking and scrolling for smaller or shorter viewports */
@media (max-width: 1200px),
(max-height: 800px) {
    .landing-table-designer {
        overflow-y: auto !important;
    }

    .landing-table-designer .landing-designer-container {
        flex-direction: column !important;
        overflow: visible !important;
        height: auto !important;
        flex: 0 0 auto !important;
    }

    .landing-table-designer .landing-designer-left {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-height: none !important;
    }

    .landing-table-designer .landing-designer-right {
        flex: 0 0 auto !important;
        overflow: visible !important;
        height: auto !important;
    }

    .landing-table-designer .landing-designer-columns-section {
        flex-direction: column !important;
        overflow: visible !important;
        height: auto !important;
    }

    .landing-table-designer .landing-designer-column-box {
        flex: 0 0 auto !important;
        height: 350px !important;
        overflow: hidden !important;
    }

    .landing-table-designer .landing-designer-column-list-scroll {
        overflow-y: auto !important;
    }
}

/* -- Application Connection Modal backdrop -- */
.modal-backdrop-custom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
}

/* ============================================
   TRANSFORMATIONS PAGE
   ============================================ */

/* Transformation panels: subtle entry animation */
.transformation-panel-enter {
    animation: txPanelIn 0.22s ease-out both;
}

@keyframes txPanelIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Result grid: horizontal scrolling container */
.tx-result-scroll {
    overflow-x: auto;
    border-radius: 6px;
}

/* Transformation result tab strip */
.tx-router-tabs .nav-link {
    color: var(--app-primary-color);
    font-weight: 600;
    font-size: 0.825rem;
    padding: 0.45rem 1rem;
    border-radius: 6px 6px 0 0;
    transition: background 0.15s;
}

.tx-router-tabs .nav-link.active {
    color: var(--app-primary-color);
    background: var(--app-tint-panel-d);
    border-bottom: 2px solid var(--app-primary-color);
}

/* Dark theme overrides */
.dark-theme .tx-router-tabs .nav-link {
    color: var(--app-dark-primary-color);
}

.dark-theme .tx-router-tabs .nav-link.active {
    background: rgba(255, 255, 255, 0.05);
    border-bottom-color: var(--app-dark-primary-color);
}

/* ================================================================
   PIPELINE DESIGNER — Visual ETL Canvas
   ================================================================ */

/* Root layout */
.pipeline-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px);
    overflow: hidden;
    background: var(--app-tint-panel-d);
}

/* Header */
.pipeline-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 1.25rem;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border-hairline);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    z-index: 10;
}

.pipeline-header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pipeline-header-title h3 {
    margin: 0;
    font-size: 1rem !important;
    font-weight: 700;
}

.pipeline-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Body row */
.pipeline-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ---- Left palette ---- */
.pipeline-palette {
    flex: 0 0 190px;
    width: 190px;
    background: var(--app-surface);
    border-right: 1px solid var(--app-border-hairline);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pipeline-palette-header {
    padding: 0.6rem 1rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    border-bottom: 1px solid var(--app-border-faint);
    flex: 0 0 auto;
}

.pipeline-palette-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pipeline-component-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    background: var(--app-tint-panel-a);
    border: 1px solid var(--app-border-cool);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
    user-select: none;
}

.pipeline-component-card:hover {
    background: var(--app-wash-info);
    border-color: var(--app-primary-color);
    transform: translateX(2px);
}

.pipeline-component-card .pc-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    font-size: 0.95rem;
    color: white;
}

.pc-icon-source {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.pc-icon-landing {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
}

.pc-icon-stage {
    background: linear-gradient(135deg, #a855f7, #7e22ce);
}

.pc-icon-baseobject {
    background: linear-gradient(135deg, #a855f7, #7e22ce);
}

.pc-icon-filter {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.pc-icon-sorter {
    background: linear-gradient(135deg, #10b981, #047857);
}

.pc-icon-target {
    background: linear-gradient(135deg, #f59e0b, #b45309);
}

.pipeline-component-card .pc-info {
    flex: 1;
    min-width: 0;
}

.pipeline-component-card .pc-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--app-text-color);
    display: block;
}

.pipeline-component-card .pc-desc {
    font-size: 0.68rem;
    color: #94a3b8;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Center canvas ---- */
.pipeline-canvas-area {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* Zoom toolbar sits above the scroll wrapper */
.pipeline-zoom-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.35rem;
    gap: 0.35rem;
    padding: 0.4rem 1rem;
    background: transparent;
    user-select: none;
}

.pipeline-zoom-btn {
    border: 1px solid var(--app-border-cool);
    background: var(--app-surface);
    color: #374151;
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.pipeline-zoom-btn:hover:not(:disabled) {
    background: var(--app-wash-info);
    border-color: var(--app-primary-color);
    color: var(--app-primary-color);
}

.pipeline-zoom-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pipeline-zoom-reset {
    padding: 0.2rem 0.7rem;
    font-size: 0.75rem;
}

.pipeline-zoom-label {
    min-width: 42px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: #374151;
    padding: 0 0.25rem;
}

/* Consolidated header row: icon badge + stacked title/status (left), all actions (right).
   Matches .pipeline-mapping-tabs .query-tabs-container's background/border right below it
   (same var(--app-tint-hover-a) token, same border-bottom) instead of the previous
   var(--app-tint-panel-a) — a different token that read as a separately colored band sitting
   above the tab strip. The two rows now share one continuous bar with no border between them. */
.pipeline-header-row {
    background: var(--app-tint-hover-a);
    border-bottom: none;
    padding: 0.6rem 1rem;
    border-radius: 12px 12px 0 0;
}

.dark-theme .pipeline-header-row {
    background: #242a38;
}

.pipeline-header-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 9px;
    background: var(--app-primary-color, #1b3896);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.pipeline-header-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--app-text-color);
    line-height: 1.25;
}

.dark-theme .pipeline-header-title {
    color: #f5f8fd;
}

.pipeline-validity-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
}

.pipeline-validity-badge.valid {
    color: #16a34a;
}

.pipeline-validity-badge.invalid {
    color: #dc2626;
}

/* Segmented zoom control: − / 100% / + merged into one bordered pill */
.pipeline-zoom-group {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--app-border-cool);
    border-radius: 6px;
    background: var(--app-surface);
    overflow: hidden;
}

.pipeline-zoom-group .pipeline-zoom-btn {
    border: none;
    border-radius: 0;
}

.dark-theme .pipeline-zoom-group {
    border-color: #3d4657;
    background: #242a38;
}

/* Clear is a plain text action, not a filled/bordered button — shared by
   Pipeline Designer's and Flow Designer's Clear buttons */
.designer-clear-btn {
    background: transparent !important;
    border-color: transparent !important;
    color: #dc2626 !important;
}

.designer-clear-btn:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.08) !important;
    color: #b91c1c !important;
}

/* Tabs restyled to flat text tabs on the header's light band. Shared by
   Pipeline Designer's MappingTabs and Flow Designer's FlowTabs (both wrap
   their tab component in this class). Any other tab strip that uses the
   same underlying .query-tab* classes without this wrapper is
   intentionally left untouched. */
.pipeline-mapping-tabs .query-tabs-container {
    background: var(--app-tint-hover-a);
    border-bottom: 1px solid var(--app-border-hairline);
    padding: 0.35rem 0.5rem 0;
}

.pipeline-mapping-tabs .query-tab {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    margin-right: 0.15rem;
    color: #64748b;
}

.pipeline-mapping-tabs .query-tab:hover {
    background: rgba(15, 23, 42, 0.05);
}

.pipeline-mapping-tabs .query-tab.active {
    background: var(--app-surface);
    border-color: var(--app-border-hairline);
    border-bottom-color: #ffffff;
    color: var(--app-text-color);
}

.pipeline-mapping-tabs .query-tab.active i {
    color: var(--app-primary-color);
}

.dark-theme .pipeline-mapping-tabs .query-tabs-container {
    background: #242a38;
    border-bottom-color: #3d4657;
}

.dark-theme .pipeline-mapping-tabs .query-tab {
    color: #a7b0c0;
}

.dark-theme .pipeline-mapping-tabs .query-tab.active {
    background: #1a1f2b;
    border-color: #3d4657;
    border-bottom-color: #1a1f2b;
    color: #f5f8fd;
}

/* Scroll wrapper around the scaled canvas */
.pipeline-canvas-scroll-wrapper {
    flex: 1 1 auto;
    overflow: auto;
    position: relative;
}

.pipeline-canvas {
    padding: 2rem 2rem 2rem 2rem;
    display: inline-flex;
    /* shrinks to content for correct scroll */
    align-items: flex-start;
    min-width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    background-image: radial-gradient(circle, #cbd5e1 1px, transparent 1px);
    background-size: 22px 22px;
    /* Transparent so the canvas shares .common-main-content's own background
       (#ffffff / dark-theme #121518) instead of showing its own slightly
       different flat color — that mismatch was reading as two stacked layers. */
    background-color: transparent;
}

.dark-theme .pipeline-canvas {
    background-image: radial-gradient(circle, #334155 1px, transparent 1px);
    background-color: transparent;
}

/* Pipeline flow canvas — freeform, nodes positioned absolutely via
   PipelineNode.PositionX/PositionY (see pipeline-node-wrapper) */
.pipeline-flow {
    position: relative;
}

.pipeline-node-wrapper {
    cursor: grab;
}

.pipeline-node-wrapper:active {
    cursor: grabbing;
}

/* Drag handle that grows the canvas's scrollable area toward bottom/right
   (see extraCanvasWidth/Height in PipelineDesigner.razor) — anchored to the
   bottom-right corner of .pipeline-flow's own (explicit) box. */
.pipeline-canvas-resize-handle {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(148, 163, 184, 0.3);
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    cursor: se-resize;
    user-select: none;
    transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
}

.pipeline-canvas-resize-handle:hover {
    background: var(--app-primary-color);
    color: #ffffff;
}

.dark-theme .pipeline-canvas-resize-handle {
    background: rgba(100, 116, 139, 0.35);
    color: #94a3b8;
}

/* Empty canvas state */
.pipeline-canvas-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 300px;
    color: #94a3b8;
    text-align: center;
}

.pipeline-canvas-empty .bi {
    font-size: 3rem;
    color: #cbd5e1 !important;
}

/* Pipeline node — fixed width for horizontal layout */
.pipeline-node {
    width: 200px;
    min-width: 200px;
    flex: 0 0 200px;
    border-radius: 12px;
    border: 2px solid var(--app-border-cool);
    background: var(--app-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
    position: relative;
}

.pipeline-node:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    z-index: 1;
}

.pipeline-node.selected {
    border-color: var(--app-primary-color);
    box-shadow: 0 0 0 3px rgba(27, 56, 150, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
}

.pipeline-node-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid var(--app-border-faint);
}

.pipeline-node-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    font-size: 0.9rem;
    color: white;
}

.pipeline-node-title {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--app-text-color);
}

.pipeline-node-actions {
    display: flex;
    gap: 0.25rem;
}

.pipeline-node-btn {
    border: none;
    background: transparent;
    padding: 0.2rem 0.35rem;
    border-radius: 5px;
    cursor: pointer;
    color: #94a3b8;
    line-height: 1;
    transition: background 0.1s, color 0.1s;
    font-size: 0.75rem;
}

.pipeline-node-btn:hover {
    background: var(--app-tint-hover-a);
    color: #374151;
}

.pipeline-node-btn.danger:hover {
    background: var(--app-wash-danger-alt);
    color: #dc2626;
}

.pipeline-node-body {
    padding: 0.6rem 0.9rem 0.65rem;
    font-size: 0.78rem;
    color: #64748b;
}

.pipeline-node-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.pipeline-node-chip {
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    background: var(--app-wash-info);
    color: var(--app-primary-color);
    border: 1px solid #bfdbfe;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Drag-grip affordance shown at the left of the node header */
.pipeline-node-grip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 14px;
    color: #cbd5e1;
    font-size: 0.85rem;
    cursor: grab;
}

.dark-theme .pipeline-node-grip {
    color: #475569;
}

/* Sequential run-pulse ring, cycled through nodes while a run is in progress
   (cosmetic — real execution is a single opaque backend call, so this does
   not track actual per-step completion). */
@keyframes pipelineRunPulse {
    0% { box-shadow: 0 0 0 0 rgba(27, 56, 150, 0.45); }
    70% { box-shadow: 0 0 0 10px rgba(27, 56, 150, 0); }
    100% { box-shadow: 0 0 0 0 rgba(27, 56, 150, 0); }
}

.pipeline-node.running {
    border-color: var(--app-primary-color);
    animation: pipelineRunPulse 1s ease-out infinite;
}

/* Horizontal connector arrow between nodes */
.pipeline-connector {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
    padding: 0;
    position: relative;
}

.pipeline-connector-line {
    width: 32px;
    height: 3px;
    background: linear-gradient(to right, #94a3b8, #64748b);
}

.pipeline-connector-arrowhead {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #64748b;
    margin-left: -2px;
    display: inline-block;
}

.pipeline-add-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px dashed #94a3b8;
    background: var(--app-surface);
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    margin: 2px 0;
    transition: all 0.15s;
}

.pipeline-add-btn:hover {
    border-color: var(--app-primary-color);
    color: var(--app-primary-color);
    background: var(--app-wash-info);
}

/* ---- Bottom configuration panel ---- */
.pipeline-config-panel {
    flex: 0 0 auto;
    background: var(--app-surface);
    border-top: 1px solid var(--app-border-hairline);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: height 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.pipeline-config-panel.collapsed {
    height: 40px !important;
}

.pipeline-config-panel.expanded {
    height: 340px;
    min-height: 220px;
    max-height: 55vh;
}

.pipeline-config-toggle {
    flex: 0 0 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background: var(--app-tint-panel-a);
    border-bottom: 1px solid var(--app-border-hairline);
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
}

.pipeline-config-toggle:hover {
    background: var(--app-tint-hover-a);
}

.pipeline-config-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pipeline-config-body {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* Split: left=config form, right=preview */
.pipeline-config-form {
    flex: 0 0 55%;
    width: 55%;
    border-right: 1px solid var(--app-border-hairline);
    padding: 0.875rem 1.125rem;
    overflow-y: auto;
}

/* Full-width override — used when only one view is shown */
.pipeline-config-form--full {
    flex: 1 1 100%;
    width: 100%;
    border-right: none;
    max-width: 960px;
    /* keep fields readable at wide viewport */
}

.pipeline-config-preview {
    flex: 1 1 auto;
    padding: 0.875rem 1.125rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Full-width preview override */
.pipeline-config-preview--full {
    flex: 1 1 100%;
    width: 100%;
}

.pipeline-config-preview-header {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

/* No selection placeholder */
.pipeline-config-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.4rem;
    color: #94a3b8;
}

.pipeline-config-empty .bi {
    font-size: 1.75rem;
    color: #cbd5e1 !important;
}

/* Status badge for node state */
.pipeline-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-size: 0.67rem;
    font-weight: 700;
}

.pipeline-status-badge.ready {
    background: #dcfce7;
    color: #15803d;
}

.pipeline-status-badge.pending {
    background: var(--app-wash-warning-alt);
    color: #a16207;
}

.pipeline-status-badge.error {
    background: var(--app-wash-danger-alt);
    color: #dc2626;
}

/* ---- Dark theme ---- */
.dark-theme .pipeline-shell {
    background: #1a1f2b;
}

.dark-theme .pipeline-header {
    background: #242a38;
    border-bottom-color: #3d4657;
}

.dark-theme .pipeline-palette {
    background: #242a38;
    border-right-color: #3d4657;
}

.dark-theme .pipeline-palette-header {
    color: #6e7681;
    border-bottom-color: #2f3646;
}

.dark-theme .pipeline-component-card {
    background: #2f3646;
    border-color: #3d4657;
    color: #dfe5ef;
}

.dark-theme .pipeline-component-card:hover {
    background: rgba(79, 140, 255, 0.12);
    border-color: var(--app-dark-primary-color);
}

.dark-theme .pipeline-component-card .pc-name {
    color: #e6edf3;
}

.dark-theme .pipeline-component-card .pc-desc {
    color: #6e7681;
}

.dark-theme .pipeline-node {
    background: #242a38;
    border-color: #3d4657;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.dark-theme .pipeline-node.selected {
    border-color: var(--app-dark-primary-color);
    box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.2), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.dark-theme .pipeline-node-header {
    border-bottom-color: #2f3646;
}

.dark-theme .pipeline-node-title {
    color: #e6edf3;
}

.dark-theme .pipeline-node-body {
    color: #a7b0c0;
}

.dark-theme .pipeline-node-btn {
    color: #6e7681;
}

.dark-theme .pipeline-node-btn:hover {
    background: #2f3646;
    color: #dfe5ef;
}

.dark-theme .pipeline-config-panel {
    background: #242a38;
    border-top-color: #3d4657;
}

.dark-theme .pipeline-config-toggle {
    background: #2f3646;
    border-bottom-color: #3d4657;
}

.dark-theme .pipeline-config-toggle:hover {
    background: #2a3140;
}

.dark-theme .pipeline-config-toggle-label {
    color: #dfe5ef;
}

.dark-theme .pipeline-config-form {
    border-right-color: #3d4657;
}

.dark-theme .pipeline-config-preview-header {
    color: #6e7681;
}

.dark-theme .pipeline-node-chip {
    background: rgba(79, 140, 255, 0.15);
    color: var(--app-dark-primary-color);
    border-color: rgba(79, 140, 255, 0.3);
}

.dark-theme .pipeline-canvas-empty {
    color: #6e7681;
}

/* Dark theme — zoom toolbar (background intentionally removed to blend into the page; see .pipeline-zoom-toolbar) */

.dark-theme .pipeline-zoom-btn {
    background: #242a38;
    border-color: #3d4657;
    color: #dfe5ef;
}

.dark-theme .pipeline-zoom-btn:hover:not(:disabled) {
    background: rgba(79, 140, 255, 0.12);
    border-color: var(--app-dark-primary-color);
    color: var(--app-dark-primary-color);
}

.dark-theme .pipeline-zoom-label {
    color: #dfe5ef;
}

.dark-theme .pipeline-connector-line {
    background: linear-gradient(to right, #3d4657, #6e7681);
}

.dark-theme .pipeline-connector-arrowhead {
    border-left-color: #6e7681;
}

/* Reusable scrollable transformation modal styles */
.scrollable-modal-layout {
    height: 85vh !important;
    /* occupies 85% of viewport height */
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.scrollable-modal-layout .dial-modal-content {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

.scrollable-modal-layout .dial-modal-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.scrollable-modal-layout .dnx-noise-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

.scrollable-modal-layout .dial-form-area {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

.scrollable-modal-layout .dial-form-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 1.5rem !important;
}

.scrollable-modal-layout .dial-form-scroll-body {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 8px !important;
    min-height: 0 !important;
}

.scrollable-modal-layout .dial-form-actions {
    flex-shrink: 0 !important;
    margin-top: 1.5rem !important;
}

.connection-modal-container {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.connection-modal-content {
    width: 100%;
    max-width: 500px;
    pointer-events: auto;
    border-radius: 16px;
    background: rgba(var(--app-surface-rgb), 0.95);
    backdrop-filter: blur(10px);
}

/* Designer Palette & Canvas layout */
.designer-palette {
    width: clamp(12rem, 18vw, 15rem);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color, var(--app-border-hairline));
    position: relative;
    background: transparent;
}

.palette-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
}

.palette-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 16px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: var(--app-text-black);
    transition: all 0.2s ease-in-out;
}

.palette-item:hover {
    background-color: var(--app-tint-hover-d);
    border-radius: 20px;
}

.palette-item-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.dark-theme .palette-item {
    color: #cbd5e1;
}

.dark-theme .palette-item:hover {
    background-color: #2f3646;
}

/* ── Main navigation rail, specialising the Designer palette above ──────────────────────────
   CommonSidebar reuses .palette-item / .palette-item-icon so the product's two sidebars read as
   one component instead of two lookalikes that drift apart. Two deliberate differences: rows are
   single-line, because DNX_NAVIGATION_MENU has no description column to fill a second line with;
   and rows stay anchors, so ctrl/middle-click still opens a menu entry in a new tab. */
.admin-sidebar--nav {
    --admin-sidebar-expanded-width: 15rem;
    --admin-sidebar-collapsed-width: 3.5rem;
}

.admin-sidebar--nav .nav-container {
    gap: 0.3rem;
    padding: 0.15rem 0.15rem 0.35rem 0;
}

.admin-sidebar--nav .palette-item {
    position: relative;
    text-decoration: none;
    gap: 0.7rem;
    padding: 0.4rem 0.55rem;
    border-radius: 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #48526b;
    overflow: hidden;
}

.admin-sidebar--nav .palette-item .nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.admin-sidebar--nav .palette-item-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 0.9rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--vision-accent) 14%, transparent);
    color: var(--vision-accent);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Selection vocabulary carried over verbatim from the rail this replaced: a left accent bar that
   grows in, a 3px slide, and a small lift on the icon. Only the row's shape around it changed. */
.admin-sidebar--nav .palette-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    transform-origin: center;
    width: 3px;
    height: 16px;
    border-radius: 3px;
    background: var(--vision-accent);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-sidebar--nav .palette-item:hover {
    background-color: var(--app-tint-panel-f);
    color: var(--vision-accent-soft-text);
    border-radius: 14px;
    transform: translateX(3px);
}

.admin-sidebar--nav .palette-item:hover::before {
    transform: translateY(-50%) scaleY(0.6);
}

.admin-sidebar--nav .palette-item:hover .palette-item-icon {
    transform: scale(1.08);
}

.admin-sidebar--nav .palette-item:active {
    transform: translateX(3px) scale(0.97);
}

.admin-sidebar--nav .palette-item.active {
    background-color: var(--vision-accent-soft-bg);
    color: var(--vision-accent-soft-text);
    font-weight: 650;
    transform: translateX(3px);
}

.admin-sidebar--nav .palette-item.active::before {
    transform: translateY(-50%) scaleY(1);
}

/* Stays a tint rather than inverting to a solid fill: the previous rail never flipped the icon
   out of the accent colour, it only lifted it. */
.admin-sidebar--nav .palette-item.active .palette-item-icon {
    background: color-mix(in srgb, var(--vision-accent) 22%, transparent);
    color: var(--vision-accent);
    transform: scale(1.08);
}

.admin-sidebar--nav .palette-item.disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* The chip has to come down with the rail: at 30px it exceeded the collapsed row's content box
   and pushed the icons off-centre against the right edge. */
.admin-sidebar--nav.is-collapsed .nav-container {
    padding-right: 0;
}

.admin-sidebar--nav.is-collapsed .palette-item {
    justify-content: center;
    gap: 0;
    padding: 0.25rem;
}

.admin-sidebar--nav.is-collapsed .palette-item-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    font-size: 0.82rem;
}

.admin-sidebar--nav.is-collapsed .nav-label {
    display: none;
}

.admin-sidebar--nav .nav-search {
    padding: 0 0.15rem 0.45rem 0;
}

.admin-sidebar--nav .nav-search .input-group-text {
    background: transparent;
    border-right: 0;
    color: #94a3b8;
    font-size: 0.72rem;
}

.admin-sidebar--nav .nav-search .form-control {
    border-left: 0;
    padding-left: 0;
    font-size: 0.75rem;
    background: transparent;
    box-shadow: none;
}

.admin-sidebar--nav .nav-empty {
    padding: 0.6rem 0.55rem;
    font-size: 0.72rem;
    color: #94a3b8;
}

.dark-theme .admin-sidebar--nav .palette-item {
    color: #cbd5e1;
}

.dark-theme .admin-sidebar--nav .palette-item:hover {
    background-color: #2f3646;
}

.dark-theme .admin-sidebar--nav .nav-search .form-control {
    color: #cbd5e1;
    border-color: #2b3036;
}

.dark-theme .admin-sidebar--nav .nav-search .input-group-text {
    border-color: #2b3036;
}

/* -- Transformation config modal: Pipeline-Studio-style field spacing -- */
.dnx-transform-config .form-label {
    font-size: 0.79rem !important;
    font-weight: 600 !important;
    color: #4a5568;
    margin-bottom: 0.4rem !important;
}

.dnx-transform-config .form-select,
.dnx-transform-config .form-control {
    border-radius: 8px !important;
    border-color: var(--app-border-cool);
    font-size: 0.85rem;
    padding: 0.5rem 0.7rem;
}

.dnx-transform-config .form-select:focus,
.dnx-transform-config .form-control:focus {
    border-color: var(--app-primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary-color) 12%, transparent);
}

.dnx-transform-config .row.g-2 {
    row-gap: 1rem;
}

.dnx-transform-config h6 {
    font-size: 0.85rem !important;
    margin-bottom: 1rem !important;
}

.dnx-transform-config .badge.bg-primary {
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--app-primary-color) 14%, white) !important;
    color: var(--app-primary-color) !important;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem;
}

.dnx-transform-config .dnx-badge-clickable {
    padding: 0.3rem 0.7rem !important;
    font-size: 0.72rem !important;
    cursor: pointer;
}

.designer-canvas-container {
    background: var(--common-main-content-bg, #ffffff);
    border-radius: 12px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* -- Create Modal Centering Container -- */
.create-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    pointer-events: none;
}

.create-modal-container .modal-content {
    pointer-events: auto;
    width: 100%;
    max-width: 500px;
}

/* ==========================================================================
   DNX STANDARDIZED UI CSS CLASSES (CSS CONSOLIDATION INITIATIVE)
   ========================================================================== */

/* --- Phase 2: Designer & Canvas Canvas Layouts --- */
.dnx-designer-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--bs-body-bg);
}

.dnx-designer-node {
    display: inline-block;
    border-radius: 8px;
    border: 1px solid var(--app-border-cool);
    background: var(--app-surface);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease-in-out;
}

.dnx-designer-node-selected {
    border-color: var(--app-primary-color, #1b3896) !important;
    box-shadow: 0 0 0 3px rgba(27, 56, 150, 0.15) !important;
}

.dnx-designer-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dnx-designer-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.dnx-designer-sidebar {
    width: clamp(12rem, 18vw, 15rem);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color, var(--app-border-hairline));
    position: relative;
    background: transparent;
}

.dnx-router-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
}

.dnx-branch-row {
    display: flex;
    align-items: center;
    position: relative;
}

.dnx-canvas-scroll {
    flex-grow: 1;
    overflow: auto;
    position: relative;
}

/* --- Phase 3: Wizard & Modal Layout Components --- */
.dnx-wizard-step {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dnx-wizard-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color, var(--app-border-cool));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dnx-wizard-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.dnx-wizard-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color, var(--app-border-cool));
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background-color: var(--app-tint-panel-a);
}

.dnx-card-highlight {
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.dnx-card-highlight:hover {
    background-color: rgba(59, 130, 246, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

.dnx-card-highlight.selected {
    background-color: var(--app-primary-color, #1b3896) !important;
    color: white !important;
    border-color: var(--app-primary-color, #1b3896) !important;
}

.dnx-card-highlight.selected .text-muted,
.dnx-card-highlight.selected .small {
    color: rgba(255, 255, 255, 0.8) !important;
}

.dnx-card-highlight.selected i {
    color: white !important;
}

.dnx-section-divider {
    border-bottom: 1px solid var(--border-color, var(--app-border-cool));
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}

/* --- Phase 4: Workspace Layout Components --- */

.dnx-explorer-panel {
    width: 280px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color, var(--app-border-cool));
    background: var(--app-surface);
}

.dnx-explorer-tree {
    overflow-y: auto;
    height: 100%;
}

.dnx-result-grid {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.dnx-result-grid-scrollable {
    flex-grow: 1;
    overflow: auto;
}

.dnx-log-table {
    width: 100%;
    border-collapse: collapse;
}

.dnx-log-panel {
    border: 1px solid var(--border-color, var(--app-border-cool));
    border-radius: 8px;
    background: var(--app-surface);
    overflow: hidden;
}

/* --- Phase 5: Transformation Config Components --- */
.dnx-config-panel {
    padding: 1rem;
    background: var(--app-surface);
    border-radius: 8px;
}

.dnx-config-section {
    margin-bottom: 1.25rem;
}

.dnx-config-grid {
    display: grid;
    gap: 1rem;
}

.dnx-config-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.dnx-config-header {
    font-size: 0.82rem;
    font-weight: bold;
    margin-bottom: 0.75rem;
}

.dnx-config-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
    border-top: 1px solid var(--border-color, var(--app-border-cool));
    padding-top: 0.75rem;
}

/* --- Phase 6: Small Component Helpers --- */
.dnx-dropdown-scroll {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dnx-noise-container {
    position: absolute;
    inset: 0;
    background-image: url('/images/noise.png');
    background-repeat: repeat;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* --- Specific Styles Extracted from PipelineDesigner.razor --- */
.form-check.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23cbd5e1'/%3e%3c/svg%3e") !important;
    border-color: #cbd5e1 !important;
    cursor: pointer;
    width: 2em !important;
    height: 1em !important;
}

.form-check.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-color: var(--app-primary-color, #1b3896) !important;
    border-color: var(--app-primary-color, #1b3896) !important;
}

.router-group-tree-clickable-name:hover {
    opacity: 0.8;
    filter: brightness(1.2);
}

.dark-theme .router-group-tree-clickable-name {
    color: var(--app-dark-primary-color, #60a5fa) !important;
}

.dark-theme .router-group-tree-row strong {
    color: #cbd5e1 !important;
}

.group-node {
    background-color: var(--app-tint-panel-c) !important;
    border-style: dashed !important;
    border-width: 2px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.dark-theme .group-node {
    background-color: #111827 !important;
    border-color: #4b5563 !important;
}

.group-node.selected {
    border-color: var(--app-primary-color, #1b3896) !important;
    background-color: var(--app-tint-panel-a) !important;
}

.dark-theme .group-node.selected {
    border-color: var(--app-dark-primary-color, #60a5fa) !important;
    background-color: #2f3646 !important;
}

.target-node {
    background-color: var(--app-wash-warning) !important;
}

.dark-theme .target-node {
    background-color: #1e1b10 !important;
    border-color: #b45309 !important;
}

.target-node.selected {
    border-color: var(--app-primary-color, #1b3896) !important;
}

.pipeline-node.visual-only {
    cursor: default !important;
    pointer-events: none;
    border-style: dashed !important;
    border-width: 2px !important;
}

.pipeline-node.visual-only:hover {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07) !important;
}

.pipeline-node.visual-only .pipeline-node-actions {
    display: none !important;
}

/* --- Specific Styles Extracted from FlowDesigner.razor --- */
.flow-pc-icon-mapping {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
}

.flow-pc-icon-notify {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.flow-pc-icon-throw {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}

.flow-pc-icon-command {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.flow-pc-icon-decision {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
}

.flow-pc-icon-parallel {
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
}

.flow-pc-icon-end {
    background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
}

.flow-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}

.flow-status-badge.ready {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.flow-status-badge.pending {
    background: var(--app-wash-warning-alt);
    color: #854d0e;
    border: 1px solid #fde68a;
}

.flow-node-chip {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--app-tint-hover-a);
    border: 1px solid var(--app-border-cool);
    color: #475569;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-config-dialog-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    flex-shrink: 0;
}

.pipeline-node-btn.flow-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--app-border-cool);
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 0.15s;
}

.pipeline-node-btn.flow-btn:hover {
    background: var(--app-tint-hover-a);
    color: var(--app-text-slate);
}

.pipeline-node-btn.flow-btn.danger {
    color: #ef4444;
    border-color: #fecaca;
}

.pipeline-node-btn.flow-btn.danger:hover {
    background: var(--app-wash-danger);
}

/* --- Parallel Node Fan-out Layout (FlowDesigner) --- */
/* Dashed horizontal connector from Parallel card into the branch column */
.flow-parallel-connector-line {
    width: 24px;
    border-top: 2px dashed #94a3b8;
    background: transparent;
    height: 0;
}

/* Vertical branch column — dashed left border as spine */
.flow-parallel-branches-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left: 2px dashed #0ea5e9;
    padding-left: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
    flex: 0 0 auto;
    align-self: center;
}

/* Each row in the branch column */
.flow-parallel-branch-row {
    display: flex;
    align-items: center;
    position: relative;
}

/* Short horizontal line from the spine to the branch card */
.flow-parallel-branch-hline {
    width: 14px;
    height: 2px;
    background-color: #0ea5e9;
    margin-right: 10px;
    flex-shrink: 0;
}

/* Branch node card override — slightly smaller */
.pipeline-node.flow-parallel-branch-node {
    min-width: 150px;
    border-style: dashed !important;
    border-width: 2px !important;
    border-color: #0ea5e9 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.pipeline-node.flow-parallel-branch-node:hover {
    border-color: #0284c7 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.18) !important;
}

.pipeline-node.flow-parallel-branch-node.selected {
    border-color: var(--app-primary-color, #1b3896) !important;
    background-color: var(--app-wash-info) !important;
}

.dark-theme .pipeline-node.flow-parallel-branch-node {
    border-color: #0ea5e9 !important;
}

.dark-theme .pipeline-node.flow-parallel-branch-node.selected {
    background-color: #0c2a3d !important;
    border-color: var(--app-dark-primary-color, #38bdf8) !important;
}

.dnx-designer-workspace {
    height: 100%;
    flex-grow: 1;
    min-height: 0;
    overflow: hidden;
}

/* Ensure parent containers stretch to full height and prevent double scrollbars when designer is active */
.app-scroll-y:has(.dnx-designer-workspace) {
    overflow-y: hidden !important;
    display: flex;
    flex-direction: column;
}

.app-scroll-y:has(.dnx-designer-workspace)>.dnx-noise-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.dnx-scroll-hidden {
    min-height: 0;
    overflow: hidden;
}

.dnx-border-bottom-divider {
    border-bottom: 1px solid var(--border-color, var(--app-border-cool)) !important;
}

.dnx-text-empty-title {
    font-size: 0.9rem;
    font-weight: 600;
}

.dnx-text-empty-subtitle {
    font-size: 0.8rem;
}

/* --- Node Icon Gradients --- */
.dnx-icon-router {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
}

.dnx-icon-target {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.dnx-icon-stage {
    background: linear-gradient(135deg, #a855f7, #7e22ce) !important;
}

.dnx-icon-reject {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
}

.dnx-icon-history {
    background: linear-gradient(135deg, #64748b, #475569) !important;
}

/* --- Designer Node and Connector Sub-elements --- */
.dnx-target-card {
    cursor: pointer;
    border-color: #f59e0b !important;
    border-style: solid !important;
    transition: all 0.2s;
}

.dnx-target-header-border {
    border-bottom: 1px solid #fef3c7 !important;
}

.dnx-target-title-text {
    font-size: 0.75rem;
    color: #b45309;
}

.dnx-target-body-text {
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dnx-reject-card {
    border: 2px dashed #ef4444 !important;
    background-color: var(--app-wash-danger) !important;
    cursor: default !important;
    pointer-events: none;
}

.dnx-reject-header-border {
    border-bottom: 1px solid #fee2e2 !important;
}

.dnx-reject-title-text {
    color: #991b1b;
    font-size: 0.75rem;
}

.dnx-reject-body-text {
    color: #991b1b;
    font-weight: bold;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dnx-reject-badge {
    background-color: var(--app-wash-danger-alt);
    color: #b91c1c;
    border: 1px solid #fca5a5;
    font-size: 0.65rem;
}

.dnx-node-body-padding {
    padding: 0.5rem 0.75rem !important;
}

.dnx-vertical-connector-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 200px;
}

.dnx-connector-arrow-up {
    color: #ef4444;
    font-size: 0.7rem;
    line-height: 1;
    margin-bottom: -4px;
}

.dnx-connector-line-vertical-red {
    width: 0;
    border-left: 2px dashed #ef4444;
    height: 25px;
}

.dnx-node-icon-stage-layout {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: white;
}

.dnx-stage-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex: 0 0 auto;
}

.dnx-router-description {
    font-size: 0.72rem;
    margin-top: 6px;
    color: #64748b;
    font-family: sans-serif;
}

.dnx-router-connector-line {
    width: 24px;
    border-top: 2px dashed #94a3b8;
    background: transparent;
    height: 0;
}

.dnx-router-branches-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-left: 2px dashed #94a3b8;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
    flex: 0 0 auto;
}

.dnx-router-branch-row {
    display: flex;
    align-items: center;
    position: relative;
}

.dnx-router-branch-horizontal-line {
    width: 15px;
    height: 2px;
    background-color: #94a3b8;
    margin-right: 10px;
}

.dnx-connector-line-vertical-grey {
    width: 0;
    border-left: 2px dashed #94a3b8;
    height: 25px;
}

.dnx-connector-arrow-down-grey {
    color: #94a3b8;
    font-size: 0.7rem;
    line-height: 1;
    margin-top: -4px;
}

.dnx-history-card {
    border: 2px dashed #94a3b8 !important;
    background-color: var(--app-tint-panel-a) !important;
    cursor: default !important;
    pointer-events: none;
}

.dnx-history-title-text {
    color: #334155;
    font-size: 0.75rem;
}

.dnx-history-body-text {
    color: #334155;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dnx-history-badge {
    background-color: var(--app-tint-hover-a);
    color: #475569;
    border: 1px solid #cbd5e1;
    font-size: 0.65rem;
}

/* --- New Custom Consolidation Styles --- */
.dnx-flow-name-input {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    height: auto !important;
}

.dnx-cursor-pointer {
    cursor: pointer !important;
}

.dnx-toolbar-icon {
    font-size: 1rem !important;
    color: var(--app-primary-color) !important;
}

.dark-theme .dnx-toolbar-icon {
    color: var(--app-dark-primary-color, #60a5fa) !important;
}

.dnx-max-width-480 {
    max-width: 480px !important;
}

.dnx-w-100 {
    width: 100% !important;
}

.dnx-flow-config-scroll {
    max-height: 450px;
    overflow-y: auto;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Dialogs are presented as full-height right-side drawers (see "RIGHT-SIDE DRAWER PRESENTATION
   FOR DIALOGS"), so the 450px cap above would strand the Save/Cancel row partway up an otherwise
   empty column. Inside a drawer the form takes the height it actually has. */
.modal.d-block .dnx-flow-config-scroll,
.modal.show .dnx-flow-config-scroll {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
}

.modal.d-block .dial-form-content,
.modal.show .dial-form-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.dnx-text-muted-xs {
    font-size: 0.7rem !important;
}

.dnx-text-danger-important {
    color: #ef4444 !important;
}

.dark-theme .dnx-text-danger-important {
    color: #fca5a5 !important;
}

.dnx-color-grey {
    color: #64748b !important;
}

.dark-theme .dnx-color-grey {
    color: #94a3b8 !important;
}

.dnx-node-summary-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 50px;
    overflow-y: auto;
}

.dnx-no-rules-text {
    font-size: 0.65rem;
    color: #dc2626;
    font-style: italic;
}

.dnx-router-condition-chip {
    font-size: 0.6rem;
    padding: 0.1rem 0.35rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--app-wash-warning);
    border-color: #fde68a;
    color: #b45309;
}

.dark-theme .dnx-router-condition-chip {
    background: #2e1d0c;
    border-color: #78350f;
    color: #f59e0b;
}

.dnx-margin-l-shrink-0 {
    margin-left: 4px !important;
    flex-shrink: 0 !important;
}

.dnx-text-success-bold {
    font-weight: bold !important;
    color: #22c55e !important;
}

.dnx-text-warning-bold {
    font-weight: bold !important;
    color: #eab308 !important;
}

.dnx-mdm-flow-container {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.2);
    font-size: 0.65rem;
}

.dark-theme .dnx-mdm-flow-container {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.dnx-mdm-flow-title {
    color: #7e22ce;
}

.dark-theme .dnx-mdm-flow-title {
    color: #c084fc;
}

.dnx-mdm-flow-details {
    color: #581c87;
    font-family: monospace;
    font-size: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dark-theme .dnx-mdm-flow-details {
    color: #e9d5ff;
}

.dnx-color-source {
    color: #3b82f6 !important;
}

.dark-theme .dnx-color-source {
    color: #60a5fa !important;
}

.dnx-color-target {
    color: #f59e0b !important;
}

.dark-theme .dnx-color-target {
    color: #fbbf24 !important;
}

.dnx-help-text {
    font-size: 0.7rem;
    line-height: 1.2;
}

.dnx-info-box-yellow {
    background: var(--app-wash-warning-alt);
    border: 1px solid #fde68a;
    font-size: 0.75rem;
    color: #92400e;
}

.dark-theme .dnx-info-box-yellow {
    background: #2d260f;
    border: 1px solid #78350f;
    color: #f59e0b;
}

.dnx-modal-glass {
    background: rgba(var(--app-surface-rgb), 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.dark-theme .dnx-modal-glass {
    background: rgba(31, 41, 55, 0.95) !important;
}

/* --- SubjectAreaColumns.razor Styles --- */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    gap: 1rem;
    color: #666;
}

.dark-theme .loading-state {
    color: #9ca3af;
}

.fields-tiles-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
}

.field-display-tile {
    min-width: 170px;
    width: max-content;
    max-width: 260px;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px 18px;
    border: 1px solid var(--app-border-hairline);
    border-radius: 8px;
    background: var(--app-surface);
    box-sizing: border-box;
}

.dark-theme .field-display-tile {
    background: #2f3646;
    border-color: #374151;
}

.field-display-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

.dark-theme .field-display-name {
    color: #f3f4f6;
}

.debug-info {
    padding: 0.5rem;
    background: var(--app-surface-muted);
    border-radius: 0.25rem;
    border: 1px solid #dee2e6;
}

.dark-theme .debug-info {
    background-color: #111827;
    border-color: #374151;
    color: #cbd5e1;
}

.datatype-selector-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--app-border-hairline);
    background: var(--app-surface);
    position: relative;
}

.dark-theme .datatype-selector-item {
    background: #2f3646;
    border-color: #374151;
}

.datatype-selector-item:hover {
    background-color: var(--app-tint-hover-b);
    border-color: var(--app-border-muted);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dark-theme .datatype-selector-item:hover {
    background-color: #374151;
    border-color: #4b5563;
}

.datatype-selector-item.adding {
    background-color: #dbeafe;
    border-color: #3b82f6;
}

.dark-theme .datatype-selector-item.adding {
    background-color: #1e3a8a;
    border-color: #3b82f6;
}

.datatype-selector-item i:first-child {
    margin-right: 0.5rem;
    color: #6b7280;
    font-size: 1.1rem;
}

.dark-theme .datatype-selector-item i:first-child {
    color: #9ca3af;
}

.datatype-selector-name {
    flex: 1;
    font-weight: 500;
    color: #374151;
}

.dark-theme .datatype-selector-name {
    color: #f3f4f6;
}

.datatype-add-icon {
    color: #10b981;
    font-size: 0.875rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.datatype-selector-item:hover .datatype-add-icon {
    opacity: 1;
}

.datatype-selector-header small {
    display: block;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    color: #6b7280;
}

.dark-theme .datatype-selector-header small {
    color: #9ca3af;
}

.add-field-button-container {
    display: none;
}

.dnx-pos-relative {
    position: relative !important;
}

.dnx-datatype-selector-left-full {
    width: 100% !important;
    border-right: none !important;
}

.dnx-absolute-centered {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
}

.dnx-spinner-lg {
    width: 3rem !important;
    height: 3rem !important;
}

.dnx-system-field-tile {
    cursor: pointer;
}

.dark-theme .dnx-system-field-tile {}

.field-system-lock-badge {
    font-size: .75rem;
    color: var(--app-text-muted, #94a3b8);
    opacity: .9;
    flex-shrink: 0;
}

.dnx-system-field-name {
    color: #4b5563 !important;
    font-weight: normal !important;
}

.dark-theme .dnx-system-field-name {
    color: #9ca3af !important;
}

.dnx-system-managed-badge {
    font-size: 0.65rem !important;
    color: #9ca3af !important;
    display: block !important;
    font-weight: normal !important;
}

.dnx-alert-warning-soft {
    background-color: var(--app-wash-warning) !important;
    border: 1px solid #fef3c7 !important;
    color: #b45309 !important;
}

.dark-theme .dnx-alert-warning-soft {
    background-color: #2d260f !important;
    border: 1px solid #78350f !important;
    color: #f59e0b !important;
}

/* --- ModelAddOperations.razor Styles --- */
.dnx-text-xxs-title {
    font-size: 0.75rem !important;
}

.dnx-text-xs {
    font-size: 0.7rem !important;
}

.dnx-color-filter {
    color: #8b5cf6 !important;
}

.dark-theme .dnx-color-filter {
    color: #a78bfa !important;
}

.dnx-badge-clickable {
    cursor: pointer !important;
    font-size: 0.68rem !important;
}

.dnx-color-sorter {
    color: #10b981 !important;
}

.dark-theme .dnx-color-sorter {
    color: #34d399 !important;
}

.dnx-search-icon-inside {
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
}

.dnx-search-input-field {
    font-size: 0.75rem !important;
    height: calc(1.5em + 0.5rem + 2px) !important;
}

.dnx-pre-wrap {
    white-space: pre-wrap !important;
}

.dnx-align-middle-icon-1-5 {
    font-size: 1.5rem !important;
    vertical-align: middle !important;
}

.dnx-large-icon-2-5 {
    font-size: 2.5rem !important;
}

.dnx-large-icon-2 {
    font-size: 2rem !important;
}

.dnx-designer-right-scroll {
    overflow-y: auto !important;
    max-height: 500px !important;
}

.dnx-text-sm-bold {
    font-size: 0.8rem !important;
}

.dnx-table-scroll-200 {
    max-height: 200px !important;
    overflow-y: auto !important;
}

.dnx-designer-system-table {
    font-size: 0.75rem !important;
    background: var(--app-surface-muted) !important;
    color: #6c757d !important;
}

.dark-theme .dnx-designer-system-table {
    background-color: #111827 !important;
    color: #9ca3af !important;
}

.dnx-columns-list-scroll-250 {
    max-height: 250px !important;
    overflow-y: auto !important;
}

.dnx-designer-table-sm {
    font-size: 0.75rem !important;
}

.dnx-btn-xs-danger {
    padding: 0.1rem 0.3rem !important;
    font-size: 0.7rem !important;
}

.dnx-color-landing {
    color: #0ea5e9 !important;
}

.dark-theme .dnx-color-landing {
    color: #38bdf8 !important;
}

.dnx-color-validation {
    color: #10b981 !important;
}

.dark-theme .dnx-color-validation {
    color: #34d399 !important;
}

.dnx-font-0-75 {
    font-size: 0.75rem !important;
}

.dnx-w-35-pct {
    width: 35% !important;
}

.dnx-w-25-pct {
    width: 25% !important;
}

.dnx-w-30-pct {
    width: 30% !important;
}

.dnx-w-10-pct {
    width: 10% !important;
}

/* --- Mapping Selection & File Selection Dialog Styles --- */
.dnx-mapping-open-dialog-content {
    height: 430px !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
}

.dnx-flex-row-gap-24 {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;
    flex-grow: 1 !important;
    min-height: 0 !important;
}

.dnx-mapping-selection-sidebar {
    width: 160px !important;
    border-right: 1px solid var(--border-color, var(--app-border-cool)) !important;
    padding-right: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

.dark-theme .dnx-mapping-selection-sidebar {
    border-right-color: #374151 !important;
}

.dnx-font-0-8-h-38 {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    height: 38px !important;
}

.dnx-mapping-selection-content-pane {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.dnx-font-1-1-bold {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}

.dnx-search-icon-inside-10 {
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    font-size: 0.85rem !important;
}

.dnx-available-mappings-list-container {
    overflow-y: auto !important;
    background: var(--bg-card-light, var(--app-tint-panel-a)) !important;
    border-color: var(--border-color, var(--app-border-cool)) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-height: 0 !important;
}

.dark-theme .dnx-available-mappings-list-container {
    background: #111827 !important;
    border-color: #374151 !important;
}

.dnx-mapping-list-item-static {
    cursor: pointer !important;
    font-size: 0.82rem !important;
    margin-bottom: 2px !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
}

.dnx-icon-1-shrink-0 {
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}

.dnx-text-xxs-max-width {
    font-size: 0.72rem !important;
    max-width: 300px !important;
}

.dnx-text-xxs-shrink-0-ml-8 {
    font-size: 0.72rem !important;
    flex-shrink: 0 !important;
    margin-left: 8px !important;
}

.dnx-textarea-resize-none {
    font-size: 0.8rem !important;
    resize: none !important;
}

.dnx-mapping-file-dialog-content {
    height: 480px !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
}

.dnx-breadcrumb-container-static {
    background: rgba(15, 23, 42, 0.04) !important;
    font-size: 0.8rem !important;
    font-family: monospace !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    color: var(--app-text-body) !important;
}

.dark-theme .dnx-breadcrumb-container-static {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
}

.dnx-file-drives-sidebar {
    width: 160px !important;
    border-right: 1px solid var(--border-color, var(--app-border-cool)) !important;
    padding-right: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    overflow-y: auto !important;
}

.dark-theme .dnx-file-drives-sidebar {
    border-right-color: #374151 !important;
}

.dnx-font-0-78-h-36 {
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    height: 36px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
}

.dnx-file-list-container {
    overflow-y: auto !important;
    background: var(--bg-card-light, var(--app-tint-panel-a)) !important;
    border-color: var(--border-color, var(--app-border-cool)) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-height: 0 !important;
}

.dark-theme .dnx-file-list-container {
    background: #111827 !important;
    border-color: #374151 !important;
}

.dnx-min-w-0 {
    min-width: 0 !important;
}

.dnx-text-xxs {
    font-size: 0.72rem !important;
}

/* --- ModelAddOperations.razor Mapping List Item --- */
.mapping-list-item {
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.mapping-list-item:hover {
    background-color: rgba(59, 130, 246, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

.dark-theme .mapping-list-item:hover {
    background-color: rgba(96, 165, 250, 0.12) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

.mapping-list-item.selected {
    background-color: var(--app-primary-color, #1b3896) !important;
    color: white !important;
    border-color: var(--app-primary-color, #1b3896) !important;
}

.dark-theme .mapping-list-item.selected {
    background-color: var(--app-dark-primary-color, #60a5fa) !important;
    border-color: var(--app-dark-primary-color, #60a5fa) !important;
    color: var(--app-text-color) !important;
}

.mapping-list-item.selected .text-muted,
.mapping-list-item.selected .small {
    color: rgba(255, 255, 255, 0.8) !important;
}

.dark-theme .mapping-list-item.selected .text-muted,
.dark-theme .mapping-list-item.selected .small {
    color: rgba(15, 23, 42, 0.8) !important;
}

.mapping-list-item.selected i {
    color: white !important;
}

.dark-theme .mapping-list-item.selected i {
    color: var(--app-text-color) !important;
}

.hover-bg-light {
    transition: background-color 0.15s ease;
}

.hover-bg-light:hover {
    background-color: rgba(15, 23, 42, 0.04);
}

.dark-theme .hover-bg-light:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* --- Additional Standardized DNX CSS Classes --- */
.dnx-input-filename {
    font-size: 0.8rem !important;
    height: 34px !important;
}

.dnx-help-text {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
}

.dnx-modal-glass {
    background: rgba(var(--app-surface-rgb), 0.95) !important;
    backdrop-filter: blur(10px) !important;
}

.dark-theme .dnx-modal-glass {
    background: rgba(31, 41, 55, 0.95) !important;
    backdrop-filter: blur(10px) !important;
}

.dnx-cursor-pointer {
    cursor: pointer !important;
}

.dnx-icon-folder-size {
    font-size: 1.05rem !important;
}

.dnx-icon-up-size {
    font-size: 1.1rem !important;
}

.dnx-info-box-yellow {
    background: var(--app-wash-warning-alt) !important;
    border: 1px solid #fde68a !important;
    font-size: 0.75rem !important;
    color: #92400e !important;
}

.dark-theme .dnx-info-box-yellow {
    background: #2d260f !important;
    border: 1px solid #78350f !important;
    color: #f59e0b !important;
}

.dnx-color-source {
    color: #3b82f6 !important;
}

.dark-theme .dnx-color-source {
    color: #60a5fa !important;
}

.dnx-color-target {
    color: #f59e0b !important;
}

.dark-theme .dnx-color-target {
    color: #fbbf24 !important;
}

.dnx-icon-stage {
    color: #a855f7 !important;
}

.dark-theme .dnx-icon-stage {
    color: #c084fc !important;
}

.dnx-node-body-padding {
    padding: 8px 12px !important;
}

.dnx-node-icon-stage-layout {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
    color: white !important;
}

.dnx-mdm-flow-container {
    background: rgba(168, 85, 247, 0.1) !important;
    border: 1px solid rgba(168, 85, 247, 0.2) !important;
    font-size: 0.65rem !important;
}

.dark-theme .dnx-mdm-flow-container {
    background: rgba(168, 85, 247, 0.05) !important;
    border-color: rgba(168, 85, 247, 0.15) !important;
}

.dnx-mdm-flow-title {
    color: #7e22ce !important;
}

.dark-theme .dnx-mdm-flow-title {
    color: #c084fc !important;
}

.dnx-mdm-flow-details {
    color: #581c87 !important;
    font-family: monospace !important;
    font-size: 0.6rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.dark-theme .dnx-mdm-flow-details {
    color: #cbd5e1 !important;
}

/* --- PipelineDesigner.razor Styles --- */
.form-check.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23cbd5e1'/%3e%3c/svg%3e") !important;
    border-color: #cbd5e1 !important;
    cursor: pointer !important;
    width: 2em !important;
    height: 1em !important;
}

.form-check.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-color: var(--app-primary-color, #1b3896) !important;
    border-color: var(--app-primary-color, #1b3896) !important;
}

.router-group-tree-clickable-name:hover {
    opacity: 0.8 !important;
    filter: brightness(1.2) !important;
}

.dark-theme .router-group-tree-clickable-name {
    color: var(--app-dark-primary-color, #60a5fa) !important;
}

.dark-theme .router-group-tree-row strong {
    color: #cbd5e1 !important;
}

.group-node {
    background-color: var(--app-tint-panel-c) !important;
}

.dark-theme .group-node {
    background-color: #111827 !important;
    border-color: #4b5563 !important;
}

.group-node.selected {
    border-color: var(--app-primary-color, #1b3896) !important;
    background-color: var(--app-tint-panel-a) !important;
}

.dark-theme .group-node.selected {
    border-color: var(--app-dark-primary-color, #60a5fa) !important;
    background-color: #2f3646 !important;
}

.target-node {
    background-color: var(--app-wash-warning) !important;
}

.dark-theme .target-node {
    background-color: #1e1b10 !important;
    border-color: #b45309 !important;
}

.target-node.selected {
    border-color: var(--app-primary-color, #1b3896) !important;
}

.pipeline-node.visual-only {
    cursor: default !important;
    pointer-events: none !important;
}

.pipeline-node.visual-only:hover {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07) !important;
}

.pipeline-node.visual-only .pipeline-node-actions {
    display: none !important;
}

/* --- PipelineDesigner Helpers --- */
.dnx-router-details {
    font-size: 0.72rem !important;
    margin-top: 6px !important;
    color: #64748b !important;
    font-weight: normal !important;
}

.dark-theme .dnx-router-details {
    color: #cbd5e1 !important;
}

.dnx-designer-dashed-border {
    border-style: dashed !important;
    border-width: 2px !important;
}

.dnx-margin-left-4 {
    margin-left: 4px !important;
}

.dnx-designer-connector {
    width: 24px !important;
    border-bottom: 2px solid #cbd5e1 !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}

.dark-theme .dnx-designer-connector {
    border-bottom-color: #4b5563 !important;
}

.dnx-designer-connector-16 {
    width: 16px !important;
    border-bottom: 2px solid #cbd5e1 !important;
    flex-shrink: 0 !important;
}

.dark-theme .dnx-designer-connector-16 {
    border-bottom-color: #4b5563 !important;
}

/* --- PipelineDesigner Additional Helpers --- */
.dnx-flex-col-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.dnx-connector-dashed-red {
    width: 0 !important;
    border-left: 2px dashed #ef4444 !important;
    height: 16px !important;
    margin: 4px 0 !important;
}

.dnx-connector-dashed-gray {
    width: 0 !important;
    border-left: 2px dashed #94a3b8 !important;
    height: 16px !important;
    margin: 4px 0 !important;
}

.dark-theme .dnx-connector-dashed-gray {
    border-left-color: #4b5563 !important;
}

.dnx-alert-danger-soft {
    background: rgba(220, 38, 38, 0.1) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(220, 38, 38, 0.2) !important;
}

.dark-theme .dnx-alert-danger-soft {
    background: rgba(220, 38, 38, 0.05) !important;
    color: #fca5a5 !important;
    border-color: rgba(220, 38, 38, 0.15) !important;
}

.dnx-color-text-dark {
    color: #334155 !important;
}

.dark-theme .dnx-color-text-dark {
    color: #cbd5e1 !important;
}

.dnx-font-0-85 {
    font-size: 0.85rem !important;
}

.dnx-border-target {
    border-color: #f59e0b !important;
}

.dark-theme .dnx-border-target {
    border-color: #fbbf24 !important;
}

/* --- Workspace Helpers --- */

.dnx-empty-icon {
    font-size: 3rem !important;
    color: #ccc !important;
}

.dark-theme .dnx-empty-icon {
    color: #4b5563 !important;
}

.dnx-glass-panel {
    background: rgba(var(--app-surface-rgb), 0.7) !important;
    backdrop-filter: blur(10px) !important;
}

.dark-theme .dnx-glass-panel {
    background: rgba(31, 41, 55, 0.7) !important;
    backdrop-filter: blur(10px) !important;
}

.dnx-w-40-pct {
    width: 40% !important;
}

.dnx-w-15-pct {
    width: 15% !important;
}

.dnx-text-right {
    text-align: right !important;
}

.dnx-w-170 {
    width: 170px !important;
}

.dnx-w-110 {
    width: 110px !important;
}

.dnx-w-120 {
    width: 120px !important;
}

.dnx-w-180 {
    width: 180px !important;
}

/* --- Joiner Color --- */
.dnx-color-joiner {
    color: #059669 !important;
}

.dark-theme .dnx-color-joiner {
    color: #34d399 !important;
}

/* --- Union Color --- */
.dnx-color-union {
    color: #0d9488 !important;
}

.dark-theme .dnx-color-union {
    color: #2dd4bf !important;
}

/* --- Mapper Consolidations --- */
.dnx-color-mapper {
    color: #10b981 !important;
}

.dark-theme .dnx-color-mapper {
    color: #34d399 !important;
}

.dnx-alert-warning-compact {
    font-size: 0.72rem !important;
    border-left: 4px solid #ef4444 !important;
}

.dnx-icon-size-md {
    font-size: 1rem !important;
}

.dnx-scroll-panel-250 {
    max-height: 250px !important;
    overflow-y: auto !important;
}

.dnx-color-muted-light {
    color: #cbd5e1 !important;
}

.dark-theme .dnx-color-muted-light {
    color: #4b5563 !important;
}

.dnx-th-muted-border {
    font-size: 0.7rem !important;
    color: #64748b !important;
    border-bottom: 1px solid var(--app-border-cool) !important;
}

.dark-theme .dnx-th-muted-border {
    color: #a7b0c0 !important;
    border-bottom: 1px solid #3d4657 !important;
}

.dnx-w-45-pct {
    width: 45% !important;
}

.dnx-w-10-pct {
    width: 10% !important;
}

.dnx-w-5-pct {
    width: 5% !important;
}

.dnx-pb-4 {
    padding-bottom: 4px !important;
}

.dnx-border-bottom-row {
    border-bottom: 1px solid var(--app-border-faint) !important;
}

.dark-theme .dnx-border-bottom-row {
    border-bottom: 1px solid #2f3646 !important;
}

.dnx-py-4 {
    padding: 4px 0 !important;
}

.dnx-py-4-fs-85 {
    padding: 4px 0 !important;
    font-size: 0.85rem !important;
}

.dnx-fs-8 {
    font-size: 0.8rem !important;
}

/* --- Router Consolidations --- */
.dnx-color-router-header {
    color: #d97706 !important;
}

.dark-theme .dnx-color-router-header {
    color: #fbbf24 !important;
}

.dnx-card-transition {
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: all 0.2s ease-in-out !important;
}

.dnx-fs-7-br-4 {
    font-size: 0.7rem !important;
    border-radius: 4px !important;
}

.dnx-fs-75 {
    font-size: 0.75rem !important;
}

.dnx-validation-message {
    font-size: 0.68rem !important;
    display: block !important;
    color: #ef4444 !important;
}

.dark-theme .dnx-validation-message {
    color: #f87171 !important;
}

.dnx-br-6 {
    border-radius: 6px !important;
}

.dnx-alert-warning-compact-yellow {
    font-size: 0.7rem !important;
    border-radius: 4px !important;
}

/* --- Searchable Dropdown Consolidations --- */
.dnx-search-trigger {
    font-size: 0.8rem !important;
    height: 38px !important;
}

.dnx-dropdown-panel-large {
    max-height: 300px !important;
    overflow-y: auto !important;
    z-index: 1060 !important;
}

.dnx-search-icon-offset {
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    font-size: 0.8rem !important;
}

.dark-theme .dnx-search-icon-offset {
    color: #4b5563 !important;
}

.dnx-search-input-compact {
    font-size: 0.8rem !important;
    height: 32px !important;
}

.dnx-dropdown-item-btn {
    font-size: 0.8rem !important;
    cursor: pointer !important;
    text-align: left !important;
    border-radius: 4px !important;
}

.dnx-max-w-80-pct {
    max-width: 80% !important;
}

.dnx-badge-compact {
    font-size: 0.65rem !important;
    flex-shrink: 0 !important;
}

/* ── Redesigned Mapping Selection Dialog (matches Flow dialog) ── */
.dnx-mapping-open-dialog-redesigned {
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 0;
}

.dnx-mapping-list-scroll {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color, var(--app-border-cool));
    border-radius: 6px;
}

.dark-theme .dnx-mapping-list-scroll {
    border-color: #374151;
}

.dnx-mapping-search-box {
    font-size: 0.875rem !important;
    height: 38px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Stage Area Tab — StageAreaTab.razor
   ═══════════════════════════════════════════════════════════════════════ */

/* Outer wrapper — fills the sa-content-area */
.stage-area-tab {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Header bar: title on left, Add button on right */
.stage-area-tab-header {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--app-border-hairline);
    background: var(--app-tint-panel-c);
}

.dark-theme .stage-area-tab-header {
    border-bottom-color: #2d333b;
    background: #242a38;
}

.stage-area-tab-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-text-slate);
}

.dark-theme .stage-area-tab-title {
    color: #e6edf3;
}

/* Two-column layout: sidebar + right */
.stage-area-layout {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

/* ── Left Sidebar ──────────────────────────────────────────────────── */

.stage-area-sidebar {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--app-border-hairline);
    overflow: hidden;
    background: var(--app-tint-panel-a);
}

.dark-theme .stage-area-sidebar {
    border-right-color: #2d333b;
    background: #1a1f2b;
}

/* Search bar */
.stage-area-search-wrap {
    flex: 0 0 auto;
    position: relative;
    padding: 10px 12px 8px;
}

.stage-area-search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.8rem;
    pointer-events: none;
}

.stage-area-search-input {
    padding-left: 28px !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
}

/* Scrollable list area */
.stage-area-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

/* Individual list item */
.stage-area-list-item {
    padding: 10px 14px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.stage-area-list-item:hover {
    background: var(--app-wash-info);
    border-left-color: #93c5fd;
}

.dark-theme .stage-area-list-item:hover {
    background: #1a2332;
    border-left-color: #388bfd;
}

.stage-area-list-item.active {
    background: var(--app-wash-info);
    border-left-color: #3b82f6;
}

.dark-theme .stage-area-list-item.active {
    background: #1c2d3f;
    border-left-color: #388bfd;
}

.stage-area-item-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--app-text-slate);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark-theme .stage-area-item-name {
    color: #e6edf3;
}

.stage-area-item-meta {
    font-size: 0.72rem;
    color: #3b82f6;
    margin-top: 2px;
}

.stage-area-item-desc {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sidebar loading / empty states */
.stage-area-sidebar-loading,
.stage-area-sidebar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.8rem;
}

.stage-area-sidebar-empty i {
    font-size: 2rem;
    color: #cbd5e1;
}

.dark-theme .stage-area-sidebar-empty i {
    color: #334155;
}

/* ── Right Panel ───────────────────────────────────────────────────── */

.stage-area-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 20px 24px;
    min-width: 0;
}

/* Empty state (nothing selected) */
.stage-area-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #94a3b8;
    text-align: center;
    gap: 4px;
}

.stage-area-empty-state i {
    font-size: 3.5rem;
    color: #cbd5e1;
}

.dark-theme .stage-area-empty-state i {
    color: #334155;
}

.stage-area-empty-state p {
    font-size: 0.95rem;
    font-weight: 500;
    color: #64748b;
    margin: 0;
}

/* Detail header section */
.stage-area-detail-header {
    flex: 0 0 auto;
}

.stage-area-source-badge {
    background: #3b82f6;
    color: #fff;
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: 20px;
}

.stage-area-object-id {
    font-size: 0.75rem;
    color: #64748b;
    background: var(--app-tint-hover-a);
    padding: 2px 8px;
    border-radius: 4px;
}

.dark-theme .stage-area-object-id {
    color: #94a3b8;
    background: #1c2128;
}

/* Columns section */
.stage-area-columns-section {
    flex: 1;
    min-height: 0;
}

/* ── Create Stage Area Modal ───────────────────────────────────────── */

.stage-area-modal {
    max-width: 520px !important;
    width: 90vw !important;
    max-height: 85vh !important;
    margin-top: 20px !important;
    display: flex !important;
    flex-direction: column !important;
}

.stage-area-modal .dial-modal-content {
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    clip-path: none !important;
}

.stage-area-modal .dial-modal-content::before {
    display: none !important;
}

.stage-area-modal .dial-modal-header {
    padding-left: 1.5rem !important;
}

.stage-area-modal .dial-modal-body {
    overflow-y: auto !important;
    flex: 1 !important;
}

/* ── Responsive: stack sidebar below on narrow/short viewports ─────── */
@media (max-width: 900px) {
    .stage-area-layout {
        flex-direction: column;
    }

    .stage-area-sidebar {
        flex: 0 0 auto;
        height: 220px;
        border-right: none;
        border-bottom: 1px solid var(--app-border-hairline);
    }

    .dark-theme .stage-area-sidebar {
        border-bottom-color: #2d333b;
    }

    .stage-area-right {
        flex: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Hierarchy Tab — HierarchyTab.razor / RelationshipGrid / AddRelationshipDialog
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ───────────────────────────────────────────────────── */
.hier-tab {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ── Header description sub-text ─────────────────────────────────────── */
.hier-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hier-description {
    margin: 0;
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 400;
}

.dark-theme .hier-description {
    color: #a7b0c0;
}

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.hier-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--app-border-hairline);
    background: var(--app-surface);
    flex-wrap: wrap;
}

.dark-theme .hier-toolbar {
    border-bottom-color: #2d333b;
    background: #1a1f2b;
}

/* Search box */
.hier-search-wrap {
    position: relative;
    flex: 0 1 260px;
    min-width: 160px;
}

.hier-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.8rem;
    pointer-events: none;
}

.hier-search-input {
    padding-left: 28px !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
}

/* ── Result info bar ─────────────────────────────────────────────────── */
.hier-result-info {
    flex: 0 0 auto;
    padding: 6px 20px;
    font-size: 0.75rem;
    color: #64748b;
    background: var(--app-tint-panel-a);
    border-bottom: 1px solid var(--app-border-hairline);
}

.dark-theme .hier-result-info {
    color: #a7b0c0;
    background: #1a1f2b;
    border-bottom-color: #2d333b;
}

/* ── Grid area ───────────────────────────────────────────────────────── */
.hier-grid-area {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    min-height: 0;
}

/* ── Table ───────────────────────────────────────────────────────────── */
.hier-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.hier-table {
    font-size: 0.82rem;
    border-collapse: collapse;
    width: 100%;
    min-width: 780px;
}

.hier-table-head th {
    padding: 10px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    background: var(--app-tint-panel-a);
    border-bottom: 2px solid var(--app-border-hairline);
    white-space: nowrap;
}

.dark-theme .hier-table-head th {
    color: #a7b0c0;
    background: #242a38;
    border-bottom-color: #2d333b;
}

.hier-table-row td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--app-border-faint);
}

.dark-theme .hier-table-row td {
    border-bottom-color: #2f3646;
}

.hier-table-row:hover td {
    background: var(--app-wash-info);
}

.dark-theme .hier-table-row:hover td {
    background: #1a2332;
}

/* ID badge */
.hier-id-badge {
    font-size: 0.72rem;
    color: #64748b;
    background: var(--app-tint-hover-a);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    white-space: nowrap;
}

.dark-theme .hier-id-badge {
    color: #94a3b8;
    background: #1c2128;
}

/* Object cell with icon */
.hier-object-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--app-text-slate);
}

.dark-theme .hier-object-cell {
    color: #e6edf3;
}

.hier-object-icon {
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Relationship type badge */
.hier-type-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%);
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.dark-theme .hier-type-badge {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d1b69 100%);
    color: #93c5fd;
    border-color: #1e3a5f;
}

/* Status badges */
.hier-status-active {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
    font-size: 0.72rem;
    padding: 3px 8px;
}

.dark-theme .hier-status-active {
    background: #14532d;
    color: #86efac;
    border-color: #166534;
}

.hier-status-draft {
    background: var(--app-wash-warning-alt);
    color: #854d0e;
    border: 1px solid #fde047;
    font-size: 0.72rem;
    padding: 3px 8px;
}

.dark-theme .hier-status-draft {
    background: #422006;
    color: #fde68a;
    border-color: #854d0e;
}

/* Action column */
.hier-col-actions {
    width: 80px;
    text-align: center;
}

.hier-action-group {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.hier-action-btn {
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.82rem;
}

.hier-action-btn-edit {
    border-color: #bfdbfe;
    color: #3b82f6;
}

.hier-action-btn-edit:hover {
    background: #dbeafe;
    border-color: #3b82f6;
}

.dark-theme .hier-action-btn-edit {
    border-color: #1e3a5f;
    color: #60a5fa;
}

.dark-theme .hier-action-btn-edit:hover {
    background: #1e3a5f;
    border-color: #3b82f6;
}

.hier-action-btn-delete {
    border-color: #fecaca;
    color: #ef4444;
}

.hier-action-btn-delete:hover {
    background: var(--app-wash-danger-alt);
    border-color: #ef4444;
}

.dark-theme .hier-action-btn-delete {
    border-color: #7f1d1d;
    color: #f87171;
}

.dark-theme .hier-action-btn-delete:hover {
    background: #450a0a;
    border-color: #ef4444;
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.hier-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 220px;
    color: #94a3b8;
    text-align: center;
    gap: 8px;
    padding: 40px;
}

.hier-empty-state i {
    font-size: 3.5rem;
    color: #cbd5e1;
}

.dark-theme .hier-empty-state i {
    color: #334155;
}

.hier-empty-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
    margin: 0;
}

.dark-theme .hier-empty-title {
    color: #a7b0c0;
}

.hier-empty-sub {
    font-size: 0.78rem;
    color: #94a3b8;
}

.dark-theme .hier-empty-sub {
    color: #6e7681;
}

/* ── Modal Overlay ───────────────────────────────────────────────────── */
.hier-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
    animation: hierFadeIn 0.2s ease;
}

@keyframes hierFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.hier-modal-container {
    width: 520px;
    max-width: 92vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: hierScaleUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Stretch parent containers for Subject Area Detail views to fill the viewport */
.app-scroll-y:has(.subject-area-content) {
    overflow-y: hidden !important;
    display: flex;
    flex-direction: column;
}

.app-scroll-y:has(.subject-area-content)>.dnx-noise-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

@keyframes hierScaleUp {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.hier-modal-content {
    background: var(--app-surface);
    border-radius: 16px;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.dark-theme .hier-modal-content {
    background: #1e2226;
    border-color: #3d4657;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* Modal header */
.hier-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--app-border-hairline);
    background: linear-gradient(135deg, #f8faff 0%, var(--app-tint-hover-a) 100%);
}

.dark-theme .hier-modal-header {
    border-bottom-color: #3d4657;
    background: #242a38;
}

.hier-modal-header-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hier-modal-icon {
    font-size: 1.2rem;
}

.hier-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.dark-theme .hier-modal-title {
    color: #f5f8fd;
}

.hier-modal-close-btn {
    background: transparent;
    border: none;
    font-size: 1.1rem;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    border-radius: 6px;
    transition: all 0.15s;
}

.hier-modal-close-btn:hover {
    color: #4b5563;
    background-color: var(--app-tint-hover-b);
}

.dark-theme .hier-modal-close-btn:hover {
    color: #dfe5ef;
    background-color: #2d3135;
}

/* Modal body */
.hier-modal-body {
    padding: 1.4rem;
    overflow-y: auto;
    flex: 1;
    background: var(--app-surface);
}

.dark-theme .hier-modal-body {
    background: #242a38;
}

/* ── Toast notification ───────────────────────────────────────────────── */
.hier-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 20000;
    background: #1e293b;
    color: #f5f8fd;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-width: 360px;
}

.hier-toast.hier-toast-show {
    opacity: 1;
    transform: translateY(0);
}

.dark-theme .hier-toast {
    background: #2d333b;
    border: 1px solid #3d4657;
}

/* =========================================================================
   View 360 Module — View360 / SearchPanel / ObjectSummaryCard / HierarchyTree
   ========================================================================= */

.view360-tree-container {
    padding: 1rem 0;
    max-height: 600px;
    overflow-y: auto;
}

/* Individual node row */
.view360-tree-node {
    background: var(--app-surface);
    border-color: var(--app-border-cool) !important;
    transition: all 0.2s ease-in-out;
    min-height: 48px;
    color: var(--app-text-slate);
}

.view360-tree-node:hover {
    background: var(--app-tint-panel-a);
    border-color: #cbd5e1 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

.dark-theme .view360-tree-node {
    background: #242a38;
    border-color: #3d4657 !important;
    color: #dfe5ef;
}

.dark-theme .view360-tree-node:hover {
    background: #1c2128;
    border-color: #484f58 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Toggle expand/collapse button */
.view360-tree-toggle-btn {
    background: transparent;
    color: #64748b;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.15s, color 0.15s;
    cursor: pointer;
}

.view360-tree-toggle-btn:hover {
    background-color: var(--app-tint-hover-a);
    color: var(--app-text-slate);
}

.dark-theme .view360-tree-toggle-btn:hover {
    background-color: #2f3646;
    color: #f5f8fd;
}

/* Icon next to node text */
.view360-node-icon {
    font-size: 1.1rem;
    color: #3b82f6;
}

.dark-theme .view360-node-icon {
    color: #60a5fa;
}

/* Badge for child types */
.view360-node-badge {
    background-color: var(--app-wash-info) !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
    font-size: 0.72rem !important;
    padding: 3px 8px !important;
    font-family: var(--app-font-family), sans-serif;
    border-radius: 20px !important;
    font-weight: 500 !important;
}

.dark-theme .view360-node-badge {
    background-color: #1e3a5f !important;
    color: #93c5fd !important;
    border-color: #1e3a5f !important;
}

/* Layout spacer instead of chevron button */
.view360-tree-spacer {
    display: inline-block;
    width: 24px;
    height: 24px;
}

/* Node layout animations */
.view360-tree-node-wrapper {
    animation: fadeInSlide 0.25s ease-out;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hierarchy Ordering Visual Chain Styles */
.hierarchy-node-card {
    transition: all 0.2s ease-in-out;
}

.hierarchy-node-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.hierarchy-connector-dot {
    width: 8px;
    height: 8px;
    background-color: var(--app-primary-color);
    border-radius: 50%;
}

/* Match Configuration Module Styles */
.dnx-cursor-pointer {
    cursor: pointer;
}

.dnx-cursor-pointer:hover {
    background-color: var(--app-tint-hover-a);
}

.dark-theme .dnx-cursor-pointer:hover {
    background-color: #334155;
}

/* ==========================================
   Model Add Operations Scrollable Layout
   ========================================== */
.dial-modal-container.model-ops-modal {
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.dial-modal-container.model-ops-modal:not(.wide-modal) {
    height: auto !important;
}

.dial-modal-container.model-ops-modal .dial-modal-content {
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

.dial-modal-container.model-ops-modal .dial-modal-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.dial-modal-container.model-ops-modal .dnx-noise-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.dial-modal-container.model-ops-modal .dial-form-area {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.dial-modal-container.model-ops-modal .dial-form-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Scroll wrapper for forms */
.dial-modal-container.model-ops-modal .dial-form-scroll-body {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 8px !important;
    min-height: 0 !important;
}

.dial-modal-container.model-ops-modal .dial-form-actions {
    flex-shrink: 0 !important;
}

/* IsCompactOperation() (Domain, Hierarchy Type, the initial name step of a Landing/Reference/
   Subject Area) puts both "model-ops-modal" and "compact-modal" on the same container. Every
   wrapper level below has one rule from each class at equal (3-class) specificity, and the
   model-ops-modal flex:1 rules above happen to appear later in this file, so on a tie they always
   won and re-stretched the whole chain back to the modal's full height — leaving blank space below
   a one-field form despite .compact-modal's own flex:none. Re-qualifying with both classes together
   raises specificity enough to win regardless of file order. */
.dial-modal-container.model-ops-modal.compact-modal .dial-modal-body,
.dial-modal-container.model-ops-modal.compact-modal .dnx-noise-content,
.dial-modal-container.model-ops-modal.compact-modal .dial-form-area,
.dial-modal-container.model-ops-modal.compact-modal .dial-form-content {
    display: block !important;
    flex: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.dial-modal-container.model-ops-modal.compact-modal .dial-form-scroll-body {
    flex: none !important;
    overflow: visible !important;
}

/* .dial-modal-content .dial-form-actions (see "Action buttons pinned to the bottom of the
   drawer" below) sets margin-top: auto so the row sticks to the bottom of a full-height
   pipeline drawer — but that rule is unscoped and reaches every dial-style modal, so on a
   compact single-field step the auto margin absorbs the modal's now-collapsed leftover
   height as a blank gap above the buttons instead of actually collapsing it. */
.dial-modal-container.compact-modal .dial-form-actions {
    position: static !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    bottom: auto !important;
    padding: 0.75rem 0 0 !important;
    /* The drawer's opaque background (further below) exists to hide scrolling content
       under the sticky row — with position reset to static above there is nothing to
       hide, so it just reads as a mismatched white block against the modal's textured
       background. */
    background: transparent !important;
    background-image: none !important;
}

/* ── Pipeline node config used to be forced into a right-side sliding drawer here
   (the "Pipeline Studio redesign" — .pipeline-side-drawer overrode .dial-modal-overlay/
   -container/-content back to a full-height right-anchored panel, hiding the floating
   dial and the notch clip-path along the way). Reverted on request: it read as a
   right-side panel rather than a popup, unlike every other dialog in the app (including
   the other member of this same family, .model-ops-modal, which was never touched by
   this override and has stayed centered all along). With the block removed,
   .pipeline-side-drawer is inert and .dial-modal-overlay/.dial-modal-container/
   .dial-modal-content fall back to their base centered presentation — width 720px
   (max 95vw), backdrop blur, the notch and floating dial restored — the same
   presentation .model-ops-modal already uses. .scrollable-modal-layout (still applied
   alongside .pipeline-side-drawer in markup) keeps its own 85vh height + internal
   scroll, so this remains a large, but centered and popup-shaped, dialog. ── */

/* Page Navigation Loading Overlay */
.dnx-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(var(--app-surface-rgb), 0.7);
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.dark-theme .dnx-loading-overlay {
    background: rgba(30, 41, 59, 0.7);
}

/* Vision loading animation — spinning glowing logo, "Loading..." dots, sliding progress bar */
@keyframes vision-load-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes vision-load-pulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(0.92);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes vision-load-dot {
    0%, 100% {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }
}

@keyframes vision-load-bar {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(150%);
    }

    100% {
        transform: translateX(150%);
    }
}

.vision-loading-overlay {
    gap: 32px;
    background: transparent !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.vision-loader {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vision-loader-glow {
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 150, 255, 0.55) 0%, rgba(56, 150, 255, 0) 70%);
    animation: vision-load-pulse 2.4s ease-in-out infinite;
    filter: blur(6px);
}

.vision-loader-logo {
    position: relative;
    width: 84px;
    height: 84px;
    object-fit: contain;
    animation: vision-load-spin 3.2s linear infinite;
    filter: drop-shadow(0 0 18px rgba(56, 150, 255, 0.55));
}

.vision-loader-label-row {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.vision-loader-label {
    color: var(--app-text-navy);
    font-size: 15px;
    letter-spacing: 0.28em;
    font-weight: 500;
    text-transform: uppercase;
}

.dark-theme .vision-loader-label {
    color: #f1f5f9;
}

.vision-loader-dots {
    display: inline-flex;
    gap: 4px;
    margin-left: 8px;
    align-items: center;
}

.vision-loader-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3896ff;
    animation: vision-load-dot 1.4s ease-in-out infinite;
}

.vision-loader-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.vision-loader-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

.vision-loader-bar {
    width: 180px;
    height: 2px;
    background: rgba(43, 111, 224, 0.18);
    border-radius: 2px;
    overflow: hidden;
}

.dark-theme .vision-loader-bar {
    background: rgba(148, 163, 184, 0.3);
}

.vision-loader-bar-fill {
    width: 40%;
    height: 100%;
    background: #3896ff;
    border-radius: 2px;
    animation: vision-load-bar 1.8s ease-in-out infinite;
}

/* ============================================
   SETUP WIZARD STYLES
   ============================================ */
.setup-wizard-shell {
    background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #f8fafc;
    font-family: 'Inter', sans-serif;
    padding: 2rem 1rem;
}

.setup-step-card {
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 680px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.setup-step-card:hover {
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.6);
}

.setup-progress-container {
    width: 100%;
    max-width: 680px;
    margin-bottom: 2rem;
}

.setup-progress-bar-custom {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 1rem;
}

.setup-progress-bar-custom::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-50%);
    z-index: 1;
}

.setup-progress-step {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: #1e293b;
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #94a3b8;
    z-index: 2;
    transition: all 0.3s ease;
    cursor: default;
    position: relative;
}

.setup-progress-step.active {
    background: #3b82f6;
    border-color: #60a5fa;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}

.setup-progress-step.completed {
    background: #10b981;
    border-color: #34d399;
    color: #ffffff;
}

.setup-progress-label {
    position: absolute;
    top: 100%;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: #64748b;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
}

.setup-progress-step.active .setup-progress-label {
    color: #60a5fa;
    font-weight: 500;
}

.setup-progress-step.completed .setup-progress-label {
    color: #34d399;
}

.setup-provider-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.setup-provider-card:hover {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
}

.setup-provider-card.selected {
    background: rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.25);
}

.setup-provider-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.setup-provider-card.disabled:hover {
    transform: none;
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(255, 255, 255, 0.08);
}

.setup-badge-coming-soon {
    position: absolute;
    top: 8px;
    right: -24px;
    background: var(--app-tint-hover-d);
    color: var(--app-text-slate);
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 24px;
    transform: rotate(45deg);
    text-transform: uppercase;
}

.setup-check-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.setup-check-item {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.setup-check-item.passed {
    border-left: 4px solid #10b981;
}

.setup-check-item.failed {
    border-left: 4px solid #ef4444;
}

.setup-complete-badge {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.1);
    border: 2px solid #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #10b981;
    margin: 0 auto 1.5rem auto;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.setup-control-label {
    color: #94a3b8;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.setup-input {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
    padding: 0.75rem 1rem !important;
    border-radius: 8px !important;
}

.setup-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

.setup-form-error {
    color: #f87171;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* ==========================================================================
   EternityArc Initial Setup Module Styles (Consolidated)
   Namespaced strictly under .dnx-setup-* to ensure workspace isolation.
   ========================================================================== */

/* Outer Application Shell */
.dnx-setup-shell {
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    color: #F8FAFC;
    font-family: var(--app-font-family, 'Inter', sans-serif);
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1rem 3rem 1rem;
    box-sizing: border-box;
}

/* Top Header Navigation Bar */
.dnx-setup-topbar {
    width: 100%;
    margin: 0 0 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 2rem;
    box-sizing: border-box;
}

.dnx-setup-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dnx-setup-brand-logo {
    height: 42px;
    width: auto;
    object-fit: contain;
}

.dnx-setup-brand-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.2;
}

.dnx-setup-brand-subtitle {
    font-size: 0.8rem;
    color: #94A3B8;
    margin: 0;
    font-weight: 500;
}

.dnx-setup-topbar-badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94A3B8;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    backdrop-filter: blur(8px);
}

/* Main Onboarding Container & Card */
.dnx-setup-container {
    max-width: 880px;
    width: 100%;
    margin: 0 auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dnx-setup-card {
    background: var(--app-surface);
    border-radius: 28px;
    box-shadow: 
        0 25px 50px -12px rgba(15, 23, 42, 0.35),
        0 0 0 1px rgba(226, 232, 240, 0.8);
    padding: 2.75rem 3.25rem;
    color: var(--app-text-color);
    animation: dnxSetupFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

@keyframes dnxSetupFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header Component */
.dnx-setup-header {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.dnx-setup-icon-badge {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 16px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--app-primary-color, #1B3896);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.dnx-setup-icon-badge i {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: currentColor !important;
}

.dnx-setup-header-content {
    flex: 1;
}

.dnx-setup-title {
    /* !important is required, not stylistic: the global "h1,h2,h3,h4 { font-size: ... !important }"
       rule near the top of this file was winning over this declaration and collapsing the step
       heading to the 1.125rem app title size, so it rendered no larger than the body copy beside
       it. A class selector plus !important beats the element selector plus !important. */
    font-size: 1.85rem !important;
    font-weight: 700;
    color: var(--app-text-color);
    line-height: 1.2;
    margin: 0 0 0.4rem 0;
    letter-spacing: -0.02em;
}

.dnx-setup-subtitle {
    font-size: 0.975rem;
    color: #64748B;
    line-height: 1.5;
    margin: 0;
}

/* Progress Indicator Component */
.dnx-setup-progress-wrapper {
    margin-bottom: 2.25rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--app-border-faint);
}

.dnx-setup-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.dnx-setup-progress-section {
    font-size: 0.825rem;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dnx-setup-progress-counter {
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    background: var(--app-tint-hover-a);
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
}

.dnx-setup-progress-title-row {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--app-text-slate);
    margin-bottom: 0.5rem;
}

.dnx-setup-progress-track {
    width: 100%;
    height: 8px;
    background: var(--app-tint-hover-d);
    border-radius: 999px;
    overflow: hidden;
}

.dnx-setup-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2563EB 0%, #1D4ED8 100%);
    border-radius: 999px;
    transition: width 0.4s ease-in-out;
}

/* Step Progress Bar (numbered-circle stepper, its own box above the wizard card) */
.dnx-stepper-box {
    background: var(--app-surface);
    border-radius: 20px;
    box-shadow:
        0 10px 30px -8px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(226, 232, 240, 0.7);
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
    box-sizing: border-box;
    overflow-x: auto;
}

.dnx-stepper-track {
    display: flex;
    align-items: flex-start;
    min-width: 560px;
}

.dnx-stepper-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dnx-stepper-connector {
    display: flex;
    align-items: center;
    width: 100%;
}

.dnx-stepper-circle {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-sizing: border-box;
}

.dnx-stepper-circle-completed {
    background: #0F172A;
    color: #fff;
}

.dnx-stepper-circle-current {
    background: var(--app-surface);
    border: 2px solid var(--app-primary-color, #1B3896);
}

.dnx-stepper-circle-current .dnx-stepper-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--app-primary-color, #1B3896);
}

.dnx-stepper-circle-pending {
    background: rgba(37, 99, 235, 0.14);
}

.dnx-stepper-line {
    flex: 1 1 auto;
    height: 2px;
    margin: 0 0.4rem;
}

.dnx-stepper-line-completed {
    background: #0F172A;
}

.dnx-stepper-line-pending {
    background: rgba(37, 99, 235, 0.14);
}

.dnx-stepper-label {
    margin-top: 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #64748b; /* was #94A3B8: 2.6:1 on white, below AA */
    text-transform: uppercase;
}

.dnx-stepper-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--app-text-color);
    margin-top: 0.2rem;
    padding-right: 0.75rem;
}

.dnx-stepper-status {
    font-size: 0.775rem;
    font-weight: 600;
    margin-top: 0.2rem;
}

.dnx-stepper-status-completed {
    color: #16A34A;
}

.dnx-stepper-status-current {
    color: var(--app-primary-color, #1B3896);
}

.dnx-stepper-status-pending {
    color: #94A3B8;
}

.dark-theme .dnx-stepper-box {
    box-shadow:
        0 10px 30px -8px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.08);
}

.dark-theme .dnx-stepper-circle-completed {
    background: #E2E8F0;
    color: #0F172A;
}

.dark-theme .dnx-stepper-line-completed {
    background: #E2E8F0;
}

.dark-theme .dnx-stepper-circle-pending {
    background: rgba(79, 140, 255, 0.16);
}

.dark-theme .dnx-stepper-line-pending {
    background: rgba(79, 140, 255, 0.16);
}

.dark-theme .dnx-stepper-status-completed {
    color: #5fd3a8;
}

.dark-theme .dnx-stepper-status-pending {
    color: #7C8AA5;
}

@media (max-width: 640px) {
    .dnx-stepper-box {
        padding: 1.25rem 1rem;
    }
}

/* Form Controls & Floating Labels Styling */
.dnx-setup-form-group {
    margin-bottom: 1.5rem;
}

.dnx-setup-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.5rem;
}

/* Marks a field the wizard will refuse to proceed without. Kept as a separate span
   rather than a ::after on the label so the marker only appears where the step
   actually enforces the field — the required set differs per provider. */
.dnx-setup-required {
    color: #DC2626;
    font-weight: 700;
    margin-left: 0.15rem;
}

.dark-theme .dnx-setup-required {
    color: #ff8b8b;
}

.dnx-setup-input {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1.5px solid #CBD5E1;
    border-radius: 12px;
    font-size: 0.95rem;
    color: var(--app-text-color);
    background: var(--app-surface);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

.dnx-setup-input:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    outline: none;
}

.dnx-setup-input::placeholder {
    color: #94A3B8;
}

/* A reserved value the operator may override but should not have to supply. The input reads as
   settled rather than empty-and-waiting, and the pencil beside it is what invites the edit. */
.dnx-setup-input:disabled {
    background: var(--app-wash-muted, #F1F5F9);
    color: #64748B;
    border-color: #E2E8F0;
    cursor: default;
}

.dark-theme .dnx-setup-input:disabled {
    color: #94A3B8;
    border-color: rgba(148, 163, 184, .25);
}

.dnx-setup-input-with-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The input must still consume the row; only the button is intrinsically sized. */
.dnx-setup-input-with-action .dnx-setup-input {
    flex: 1 1 auto;
    min-width: 0;
}

.dnx-setup-input-action {
    flex: 0 0 auto;
    width: 44px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #CBD5E1;
    border-radius: 12px;
    background: var(--app-surface);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.dnx-setup-input-action:hover {
    border-color: #2563EB;
    background: var(--app-wash-info, #EFF6FF);
}

.dnx-setup-input-action:focus-visible {
    border-color: #2563EB;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    outline: none;
}

.dark-theme .dnx-setup-input-action {
    border-color: rgba(148, 163, 184, .25);
}

.dnx-setup-textarea {
    width: 100%;
    min-height: 96px;
    padding: 0.75rem 1rem;
    border: 1.5px solid #CBD5E1;
    border-radius: 12px;
    font-size: 0.95rem;
    color: var(--app-text-color);
    background: var(--app-surface);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
    resize: vertical;
}

.dnx-setup-textarea:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    outline: none;
}

.dnx-setup-hint {
    font-size: 0.775rem;
    color: #64748B;
    margin-top: 0.4rem;
    display: block;
}

.dnx-setup-error {
    font-size: 0.825rem;
    color: #DC2626;
    font-weight: 500;
    margin-top: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Database Provider Select Cards */
.dnx-setup-provider-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.dnx-setup-provider-card {
    border: 2px solid var(--app-border-cool);
    border-radius: 18px;
    padding: 1.75rem 1.25rem;
    text-align: center;
    cursor: pointer;
    background: var(--app-surface);
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.dnx-setup-provider-card:hover {
    border-color: #93C5FD;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(37, 99, 235, 0.1);
}

.dnx-setup-provider-card.selected {
    border-color: #2563EB;
    background: rgba(37, 99, 235, 0.03);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.dnx-setup-provider-icon {
    font-size: 2.75rem;
    margin-bottom: 0.75rem;
}

.dnx-setup-provider-icon i {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: currentColor !important;
}

.dnx-setup-provider-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--app-text-color);
    margin: 0 0 0.5rem 0;
}

.dnx-setup-provider-badge {
    font-size: 0.675rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: #DCFCE7;
    color: #15803D;
    text-transform: uppercase;
}

/* Checklist Items for Validation & Complete */
.dnx-setup-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 2rem;
}

.dnx-setup-check-item {
    padding: 1rem 1.25rem;
    border-radius: 14px;
    background: var(--app-tint-panel-a);
    border: 1px solid var(--app-border-cool);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.dnx-setup-check-item.passed {
    border-left: 4px solid #22C55E;
    background: var(--app-wash-success);
    border-color: #DCFCE7;
}

.dnx-setup-check-item.failed {
    border-left: 4px solid #EF4444;
    background: var(--app-wash-danger);
    border-color: #FEE2E2;
}

/* Alert Banners */
.dnx-setup-alert {
    border-radius: 14px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.dnx-setup-alert-danger {
    background: var(--app-wash-danger);
    border: 1px solid #FCA5A5;
    color: #991B1B;
}

.dnx-setup-alert-success {
    background: var(--app-wash-success);
    border: 1px solid #86EFAC;
    color: #166534;
}

.dnx-setup-alert-warning {
    background: var(--app-wash-warning);
    border: 1px solid #FDE68A;
    color: #92400E;
}

.dnx-setup-alert-info {
    background: var(--app-wash-info);
    border: 1px solid #BFDBFE;
    color: #1E40AF;
}

/* The global `.bi` rule paints every Bootstrap Icon with the brand gradient via
   `background: linear-gradient(...) text` + `-webkit-text-fill-color: transparent`. That wins over
   any `color` set on the icon, so a success tick and a failure triangle both rendered brand-blue
   regardless of which alert they sat in. Same override .dnx-setup-icon-badge already needed —
   opt these icons out of the gradient so they take the alert's own colour. */
.dnx-setup-alert i {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: currentColor !important;
}

/* The mascot is 32px against a ~21px line of text, and .dnx-setup-alert aligns to flex-start so
   multi-line messages read correctly. Only nudge the direct child — the mascots inside the
   flex-column alerts sit in their own centred header row and must not be pulled up. */
.dnx-setup-alert > .dnx-mascot {
    margin-top: -0.2rem;
}

/* Dark mode. The backgrounds above already flip, because --app-wash-* is redefined under
   .dark-theme — but the foreground and border colours are literals picked for a white card, so
   without these the alerts render near-black text on a dark tinted wash and are barely readable.
   Icons inherit `color` via the rule above, so fixing the text colour fixes them too. */
.dark-theme .dnx-setup-alert-danger {
    border-color: rgba(239, 68, 68, .35);
    color: #ff8b8b;
}

.dark-theme .dnx-setup-alert-success {
    border-color: rgba(45, 190, 140, .35);
    color: #5fd3a8;
}

.dark-theme .dnx-setup-alert-warning {
    border-color: rgba(239, 159, 39, .35);
    color: #e0a86f;
}

.dark-theme .dnx-setup-alert-info {
    border-color: rgba(79, 140, 255, .35);
    color: #8fb6ff;
}

/* Setup Summary Box */
.dnx-setup-summary-box {
    background: var(--app-tint-panel-a);
    border: 1px solid var(--app-border-cool);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.75rem;
}

/* Actions Bar & Pill Buttons */
.dnx-setup-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--app-border-faint);
}

.dnx-setup-btn-primary {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #FFFFFF !important;
    border: none;
    border-radius: 999px;
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.4);
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    text-decoration: none;
}

.dnx-setup-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%);
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -5px rgba(37, 99, 235, 0.5);
    color: #FFFFFF !important;
}

.dnx-setup-btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.dnx-setup-btn-secondary {
    background: transparent;
    color: #475569 !important;
    border: 1.5px solid #CBD5E1;
    border-radius: 999px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    text-decoration: none;
}

.dnx-setup-btn-secondary:hover:not(:disabled) {
    background: var(--app-tint-panel-a);
    border-color: #94A3B8;
    color: var(--app-text-slate) !important;
}

.dnx-setup-btn-secondary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.dnx-setup-btn-outline-primary {
    background: transparent;
    color: #2563EB !important;
    border: 1.5px solid #2563EB;
    border-radius: 999px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    text-decoration: none;
}

.dnx-setup-btn-outline-primary:hover:not(:disabled) {
    background: rgba(37, 99, 235, 0.08);
    border-color: #1D4ED8;
    color: #1D4ED8 !important;
}

.dnx-setup-btn-outline-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.dnx-setup-btn-warning {
    background: #F59E0B;
    color: #FFFFFF !important;
    border: none;
    border-radius: 999px;
    padding: 0.65rem 1.35rem;
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.dnx-setup-btn-warning:hover:not(:disabled) {
    background: #D97706;
}

/* Responsiveness Adjustments */
@media (max-width: 768px) {
    .dnx-setup-card {
        padding: 1.75rem 1.5rem;
        border-radius: 20px;
    }

    .dnx-setup-title {
        font-size: 1.45rem;
    }

    .dnx-setup-provider-grid {
        grid-template-columns: 1fr;
    }

    .dnx-setup-actions {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }

    .dnx-setup-actions > button,
    .dnx-setup-actions > div {
        width: 100%;
        justify-content: center;
    }

    .dnx-setup-actions > div {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ============================================
   RIGHT-SIDE DRAWER PRESENTATION FOR DIALOGS
   ============================================

   Every dialog in the application is presented as a panel that slides in from the
   right edge and spans the full viewport height, instead of a box floating in the
   centre of the screen.

   This is done here, in one place, rather than by editing each dialog component.
   There are 20+ dialogs across two different markup families and they all reduce to
   the same few positioning rules; overriding those rules centrally means a dialog
   added later is a drawer automatically, and the whole change can be reverted by
   deleting this block.

   The two families:
     1. Bootstrap-style  — .modal > .modal-dialog > .modal-content
     2. "Dial" dialogs   — .dial-modal-overlay > .dial-modal-container > .dial-modal-content
                           (the Configure Transformation / Model Add Operations screens)
   ============================================ */

:root {
    --dnx-drawer-width: 560px;
    --dnx-drawer-width-lg: 760px;
    --dnx-drawer-width-xl: 960px;
    --dnx-drawer-width-sm: 420px;
}

/* ── 1. Bootstrap-style dialogs ───────────────────────────────────────────── */

.modal.d-block,
.modal.show {
    /* Anchor the dialog to the right edge; the backdrop still covers the viewport. */
    display: flex !important;
    justify-content: flex-end;
    align-items: stretch;
    padding: 0 !important;
}

/* .colprop-dialog (the column Properties modal) and any dialog carrying the shared
   .dim-floating-dialog class (see dimensional.css — the user profile card and the
   connection-context switcher both opt in) are exempted from the drawer conversion,
   the same way .model-ops-modal is exempted for the "Dial" family below. */
.modal.d-block > .modal-dialog:not(.colprop-dialog):not(.dim-floating-dialog),
.modal.show > .modal-dialog:not(.colprop-dialog):not(.dim-floating-dialog) {
    width: var(--dnx-drawer-width);
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    /* .modal-dialog-centered sets align-items:center on some dialogs — the drawer is
       always full height, so that vertical centring must not survive. */
    align-items: stretch !important;
    transform: none;
    animation: dnxDrawerIn 0.25s cubic-bezier(0.32, 0.72, 0, 1) both;
}

/* Bootstrap's width modifiers become drawer widths rather than max-widths. */
.modal.d-block > .modal-dialog.modal-sm,
.modal.show > .modal-dialog.modal-sm { width: var(--dnx-drawer-width-sm); }

.modal.d-block > .modal-dialog.modal-lg,
.modal.show > .modal-dialog.modal-lg { width: var(--dnx-drawer-width-lg); }

.modal.d-block > .modal-dialog.modal-xl,
.modal.show > .modal-dialog.modal-xl { width: var(--dnx-drawer-width-xl); }

.modal.d-block > .modal-dialog:not(.colprop-dialog):not(.dim-floating-dialog) > .modal-content,
.modal.show > .modal-dialog:not(.colprop-dialog):not(.dim-floating-dialog) > .modal-content {
    height: 100vh;
    max-height: 100vh !important;
    /* Square off the edge that meets the viewport, round the leading edge only. */
    border-radius: 16px 0 0 16px;
    border-right: 0;
    /* The body scrolls; header and footer stay pinned. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
}

.modal.d-block .modal-body,
.modal.show .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: none !important;
}

.modal.d-block .modal-header,
.modal.show .modal-header,
.modal.d-block .modal-footer,
.modal.show .modal-footer {
    flex: 0 0 auto;
}

/* ── 2. "Dial" dialogs ────────────────────────────────────────────────────── */

/* .model-ops-modal (the Model Add Operations dial popup, opened from the Model
   sidebar's "+" button) keeps its original centred floating presentation and is
   exempted from the drawer conversion below — see the matching exemption comment
   for .dial-modal-container.model-ops-modal earlier in this file. */
.dial-modal-overlay:not(.model-ops-modal) {
    justify-content: flex-end;
    align-items: stretch;
}

/* This padding exists to make room for the dial overlapping the top-left corner of a
   centred dialog. A drawer is flush to the viewport edges, so it must not apply. */
.dial-overlay-with-dial {
    padding: 0 !important;
    overflow: hidden;
}

.dial-modal-container:not(.model-ops-modal) {
    width: var(--dnx-drawer-width-lg);
    max-width: 100vw;
    height: 100vh;
    margin-top: 0;
    animation: dnxDrawerIn 0.25s cubic-bezier(0.32, 0.72, 0, 1) both;
}

.dial-modal-container:not(.model-ops-modal) .dial-modal-content {
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-radius: 16px 0 0 16px;
    /* The notch is a cut-out sized for the dial sitting over the top-left corner.
       With the dial hidden (below) the notch would read as a chunk missing from the
       panel, so the clip-path is removed and a normal shadow restored. */
    clip-path: none !important;
    filter: none;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
    overflow: hidden !important;
}

.dial-modal-container:not(.model-ops-modal) .dial-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    /* A flex item will not shrink below its content unless min-height is cleared, and
       without shrinking there is nothing to scroll. */
    min-height: 0;
}

/* .dial-modal-body is a column flex container. Its height was previously driven by its
   content, so its children never had to shrink; in a drawer the height is fixed to the
   viewport, and flex children shrink by default — a tall child gets compressed to fit
   instead of overflowing, so the body never scrolls and the content is squashed
   unreadably. Pinning the children to their natural size restores overflow, which the
   rule above then turns into a scrollbar. */
.dial-modal-container:not(.model-ops-modal) .dial-modal-body > * {
    flex-shrink: 0;
}

.dial-modal-container:not(.model-ops-modal) .dial-modal-header {
    flex: 0 0 auto;
}

/* The dial is absolutely positioned off the dialog's top-left corner. Against the
   right edge of the viewport it would sit outside the panel and be clipped, so it is
   hidden in drawer presentation. .model-ops-modal keeps it visible. */
.dial-modal-container:not(.model-ops-modal) .dial-floating-wrapper {
    display: none;
}

/* ── Motion ───────────────────────────────────────────────────────────────── */

@keyframes dnxDrawerIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .modal.d-block > .modal-dialog,
    .modal.show > .modal-dialog,
    .dial-modal-container {
        animation: none;
    }
}

/* ── Narrow viewports ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .modal.d-block > .modal-dialog,
    .modal.show > .modal-dialog,
    .modal.d-block > .modal-dialog.modal-sm,
    .modal.show > .modal-dialog.modal-sm,
    .modal.d-block > .modal-dialog.modal-lg,
    .modal.show > .modal-dialog.modal-lg,
    .modal.d-block > .modal-dialog.modal-xl,
    .modal.show > .modal-dialog.modal-xl,
    .dial-modal-container {
        width: 100vw;
    }

    .modal.d-block > .modal-dialog > .modal-content,
    .modal.show > .modal-dialog > .modal-content,
    .dial-modal-content {
        border-radius: 0;
    }
}

/* ── 3. Feature-specific dialog families ──────────────────────────────────────
   These predate the shared markup and each rolled its own overlay/panel pair, but
   they are structurally identical to the two families above: a fixed full-screen
   overlay wrapping a panel. Grouped here so they stay in step.

   Deliberately NOT included:
     .dnx-loading-overlay — a busy indicator, not a dialog. Sliding a spinner in from
                            the edge would misrepresent it as something dismissible.
     .okta-overlay        — the pre-authentication login surface, which is full-screen
                            by design and has no page behind it to slide over.
   ------------------------------------------------------------------------------ */

.stage-modal-overlay,
.quality-modal-overlay,
.hier-modal-overlay,
.flow-log-overlay {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    padding: 0 !important;
}

.stage-modal-container,
.quality-modal-content,
.hier-modal-container,
.flow-log-dialog {
    /* !important: some of these carry an inline max-width sized for a centred box
       (e.g. ColumnTrustDialog's style="max-width: 550px"), which would otherwise
       pin the drawer far narrower than the rest. */
    width: var(--dnx-drawer-width-lg) !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 16px 0 0 16px !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: dnxDrawerIn 0.25s cubic-bezier(0.32, 0.72, 0, 1) both;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
}

.stage-modal-content,
.hier-modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: inherit;
}

/* Same column-flex shrink trap as .dial-modal-body: with the height now fixed to the
   viewport, an unpinned child is compressed rather than allowed to overflow. */
.stage-modal-body,
.quality-modal-body,
.hier-modal-body,
.flow-log-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.stage-modal-body > *,
.quality-modal-body > *,
.hier-modal-body > *,
.flow-log-dialog-body > * {
    flex-shrink: 0;
}

.stage-modal-header, .stage-modal-footer,
.quality-modal-header, .quality-modal-footer,
.hier-modal-header, .hier-modal-footer,
.flow-log-dialog-header, .flow-log-dialog-footer {
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .stage-modal-container,
    .quality-modal-content,
    .hier-modal-container,
    .flow-log-dialog {
        animation: none;
    }
}

@media (max-width: 768px) {
    .stage-modal-container,
    .quality-modal-content,
    .hier-modal-container,
    .flow-log-dialog {
        width: 100vw !important;
        border-radius: 0 !important;
    }
}

/* ── 4. Seating the drawer below the application header ───────────────────────
   The drawer must not cover the app bar — the bar stays visible and usable while a
   drawer is open.

   Worth knowing why this is done with an inset rather than z-index: the header
   (.admin-header) is z-index 20, and page content lives inside .dnx-noise-content at
   z-index 10, both in the ROOT stacking context (.app-scroll-y between them is
   positioned but z-index:auto, so it creates no context). A stacking context caps its
   descendants, so a drawer rendered inside the page would resolve its z-index 1050
   *within* the z-10 layer and could never out-rank the header anyway.
   ---------------------------------------------------------------------------- */

:root {
    /* .admin-header is min-height 62px. Kept as a variable so the drawer offset and
       the header stay in step if that height is ever changed. */
    --dnx-appbar-height: 62px;
}

/* The overlay and its backdrop are both inset from the top by the header height, so
   the header is neither covered nor dimmed while a drawer is open. */
.modal.d-block,
.modal.show,
.modal-backdrop-custom,
.dial-modal-overlay,
.stage-modal-overlay,
.quality-modal-overlay,
.hier-modal-overlay,
.flow-log-overlay {
    top: var(--dnx-appbar-height) !important;
    height: calc(100vh - var(--dnx-appbar-height)) !important;
}

.modal.d-block > .modal-dialog:not(.colprop-dialog):not(.dim-floating-dialog),
.modal.show > .modal-dialog:not(.colprop-dialog):not(.dim-floating-dialog),
.modal.d-block > .modal-dialog:not(.colprop-dialog):not(.dim-floating-dialog) > .modal-content,
.modal.show > .modal-dialog:not(.colprop-dialog):not(.dim-floating-dialog) > .modal-content,
.dial-modal-container,
.dial-modal-content,
.stage-modal-container,
.quality-modal-content,
.hier-modal-container,
.flow-log-dialog {
    height: calc(100vh - var(--dnx-appbar-height)) !important;
    max-height: calc(100vh - var(--dnx-appbar-height)) !important;
}

/* ── 5. Action buttons pinned to the bottom of the drawer ─────────────────────
   Bootstrap-family dialogs already have .modal-footer outside the scrolling body,
   and the feature families have their own *-footer — those are handled by the
   flex rules above.

   The "dial" dialogs instead place Cancel/Save in a .dial-form-actions row at the
   end of the scrolling content, where in a full-height drawer they would sit
   wherever the content happens to end — often below the fold. Making the row sticky
   keeps it against the bottom edge while the content scrolls beneath it, without
   moving it out of its container in the markup.
   ---------------------------------------------------------------------------- */

.dial-modal-body .dial-form-actions,
.dial-modal-content .dial-form-actions {
    position: sticky;
    /* Sticky resolves its offset against the scrollport's PADDING edge, so bottom:0 would
       leave the body's 1.5rem bottom padding as a live gap under the row (a negative
       margin does not move the sticky position — only the offset does). Pulling the
       offset down by exactly that padding lands the row on the drawer's true bottom. */
    bottom: -1.5rem;
    z-index: 5;
    margin-top: auto;
    /* Opaque so scrolling content cannot show through the buttons. */
    background: var(--app-tint-hover-c);
    /* sticky bottom:0 pins to the padding box, which would leave the body's 1.5rem
       bottom padding as a live gap beneath the row for content to scroll through.
       Pulling the row down by that padding and adding it back as its own padding
       makes the background reach the drawer's bottom edge. */
    margin-bottom: -1.5rem;
    padding: 0.75rem 0 1.5rem;
}

.dark-theme .dial-modal-body .dial-form-actions,
.dark-theme .dial-modal-content .dial-form-actions {
    background: #23272b;
}

/* The action row is the last child of a column-flex body, so margin-top:auto above
   pushes it to the bottom when the content is shorter than the drawer. */
.dial-modal-body {
    justify-content: flex-start;
}

/* ── 6. Drawer surface: noise body, white title plate ─────────────────────────
   The drawer body carries the same noise texture the rest of the application uses,
   rather than reading as a flat white sheet. Only the title plate stays solid white
   so the heading has a clean band to sit on.

   The texture is applied as a background layer rather than an extra .dnx-noise-container
   element so it works for every dialog family without markup changes. A translucent
   white gradient is stacked on top of the tile to hold it back — noise.png at full
   strength is far too coarse; this is the CSS equivalent of the ~0.15 opacity the
   .dnx-noise-container overlay is normally given.
   ---------------------------------------------------------------------------- */

/* Every dialog body in the app, across every family — Bootstrap-style ModalShell dialogs,
   the "dial" configuration popups (Configure Transformation, Add Operation), and the older
   stage/quality/hier/flow-log right-side panels — used to carry a tinted noise.png texture
   here, on the theory that a flat white sheet read as boring. In practice every one of these
   families has come back as "still gray/noisy" once actually looked at, so the texture is
   gone outright rather than re-litigated family by family. Flat, opaque, on-token instead. */
.modal.d-block .modal-body,
.modal.show .modal-body,
.dial-modal-body,
.stage-modal-body,
.quality-modal-body,
.hier-modal-body,
.flow-log-dialog-body {
    background-color: var(--surface-solid, #ffffff);
    background-image: none;
}

.dark-theme .modal.d-block .modal-body,
.dark-theme .modal.show .modal-body,
.dark-theme .dial-modal-body,
.dark-theme .stage-modal-body,
.dark-theme .quality-modal-body,
.dark-theme .hier-modal-body,
.dark-theme .flow-log-dialog-body {
    background-color: var(--surface-solid, #1e2226);
    background-image: none;
}

/* The title plate — solid white, no texture. */
.modal.d-block .modal-header,
.modal.show .modal-header,
.dial-modal-header,
.stage-modal-header,
.quality-modal-header,
.hier-modal-header,
.flow-log-dialog-header {
    background: var(--app-surface) !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.dark-theme .modal.d-block .modal-header,
.dark-theme .modal.show .modal-header,
.dark-theme .dial-modal-header,
.dark-theme .stage-modal-header,
.dark-theme .quality-modal-header,
.dark-theme .hier-modal-header,
.dark-theme .flow-log-dialog-header {
    background: #23272b !important;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* The sticky action row sits on the textured body, so it has to match it or the
   buttons appear on a lighter shelf. */
.dial-modal-body .dial-form-actions,
.dial-modal-content .dial-form-actions {
    background: var(--app-tint-hover-d);
}

.dark-theme .dial-modal-body .dial-form-actions,
.dark-theme .dial-modal-content .dial-form-actions {
    background: #1e2226;
}

/* ── 7. Royal blue page and dialog titles ─────────────────────────────────────
   Titles were a three-stop blue gradient painted through the text via
   background-clip. Replacing that needs the clip and the transparent fill unwound as
   well as the colour set, otherwise the text keeps rendering as transparent and the
   new colour never shows.
   ---------------------------------------------------------------------------- */

:root {
    /* Matches --app-primary-color (#1b3896), the blue already used by primary buttons,
       so headings, their icons and the active navigation state all read as one brand
       colour. Defined separately rather than aliasing --app-primary-color so the two
       can diverge later without a button restyle dragging the headings with it. */
    --dnx-title-color: #1b3896;
}

/* #1b3896 is near-black against a dark background. The dark theme already lightens
   --app-primary-color to #4f8cff for exactly this reason; the title colour follows. */
.dark-theme {
    --dnx-title-color: #4f8cff;
}

.app-gradient-title,
.admin-header-title,
.service-title-gradient,
.services-wrapper .common-title,
.services-header,
.common-title,
.modal-title,
.dial-modal-title,
.stage-modal-title,
.quality-modal-title,
.hier-modal-title,
.flow-log-dialog-title {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--dnx-title-color) !important;
    color: var(--dnx-title-color) !important;
}

/* Icons inside a title take the title colour. The explicit -webkit-text-fill-color is
   still required: without it these inherit the transparent fill the gradient rule sets
   for the text clip, and the icon renders invisible. */
.app-gradient-title i,
.admin-header-title i,
.service-title-gradient i,
.services-wrapper .common-title i,
.services-header i,
.common-title i,
.modal-title i,
.dial-modal-title i,
.stage-modal-title i,
.quality-modal-title i,
.hier-modal-title i,
.flow-log-dialog-title i {
    -webkit-text-fill-color: var(--dnx-title-color) !important;
    color: var(--dnx-title-color) !important;
}

/* ── 8. Active navigation state ───────────────────────────────────────────────
   The active sidebar entry and the active tab carried three different blues
   (#1c47b8, #2563eb, #0d6efd). They all become the brand colour so the current
   location is signalled consistently.

   Scoped to navigation only — icons inside primary buttons stay white, which is
   enforced separately by .common-btn-primary .bi.
   ---------------------------------------------------------------------------- */

.admin-sidebar .nav-link.active,
.menu-item.active,
.custom-tabs .nav-link.active,
.nav-tabs .nav-link.active {
    color: var(--dnx-title-color) !important;
}

.admin-sidebar .nav-link.active i,
.admin-sidebar .nav-link.active .bi,
.menu-item.active i,
.custom-tabs .nav-link.active i,
.nav-tabs .nav-link.active i {
    color: var(--dnx-title-color) !important;
    -webkit-text-fill-color: var(--dnx-title-color) !important;
}

/* The indicators that mark the active item — the tab underline and the sidebar's
   leading bar — are backgrounds, so they need setting independently of the text. */
.menu-item.active::after,
.admin-sidebar .nav-link.active::before {
    background: var(--dnx-title-color) !important;
}

.custom-tabs .nav-link.active,
.nav-tabs .nav-link.active {
    border-bottom-color: var(--dnx-title-color) !important;
}

/* The dark theme sets these actives with its own higher-specificity !important rules
   (e.g. .dark-theme .admin-sidebar .nav-link.active), so matching that specificity is
   required — the variable alone would not win. */
.dark-theme .admin-sidebar .nav-link.active,
.dark-theme .menu-item.active,
.dark-theme .custom-tabs .nav-link.active,
.dark-theme .nav-tabs .nav-link.active {
    color: var(--dnx-title-color) !important;
}

.dark-theme .admin-sidebar .nav-link.active i,
.dark-theme .admin-sidebar .nav-link.active .bi,
.dark-theme .menu-item.active i,
.dark-theme .custom-tabs .nav-link.active i,
.dark-theme .nav-tabs .nav-link.active i {
    color: var(--dnx-title-color) !important;
    -webkit-text-fill-color: var(--dnx-title-color) !important;
}

/* ── 9. Bootstrap 5.3 dark palette ────────────────────────────────────────────
   Bootstrap themes itself from [data-bs-theme], which theme.js sets alongside the
   .dark-theme class. That alone fixes every Bootstrap utility and component used in
   the markup — bg-white, bg-light, text-dark, text-muted, .border, .card, .table,
   .list-group, dropdowns, modals, form controls — without an override rule each.

   Bootstrap's own dark defaults are a warm near-black (#212529); these declarations
   retarget them onto the application's slate palette so its components sit on the same
   surfaces as the hand-written ones instead of a slightly different shade.
   ---------------------------------------------------------------------------- */

[data-bs-theme="dark"] {
    --bs-body-bg: #1a1f2b;
    --bs-body-bg-rgb: 26, 31, 43;
    --bs-body-color: #dfe5ef;
    --bs-body-color-rgb: 223, 229, 239;

    --bs-emphasis-color: #f2f5fb;
    --bs-secondary-color: rgba(223, 229, 239, .72);
    --bs-tertiary-color: rgba(223, 229, 239, .5);

    --bs-secondary-bg: #242a38;
    --bs-tertiary-bg: #2f3646;

    --bs-border-color: #3d4657;
    --bs-border-color-translucent: rgba(255, 255, 255, .12);

    /* bg-white / bg-light / text-dark resolve through these rgb triples. */
    --bs-white-rgb: 36, 42, 56;
    --bs-light-rgb: 47, 54, 70;
    --bs-dark-rgb: 223, 229, 239;

    --bs-link-color: #6ea8ff;
    --bs-link-color-rgb: 110, 168, 255;
    --bs-link-hover-color: #8fbcff;
    --bs-link-hover-color-rgb: 143, 188, 255;

    --bs-card-bg: #242a38;
    --bs-card-cap-bg: #2f3646;
    --bs-card-border-color: #3d4657;

    --bs-table-bg: transparent;
    --bs-table-color: #dfe5ef;
    --bs-table-border-color: #3d4657;
    --bs-table-striped-bg: rgba(255, 255, 255, .035);
    --bs-table-striped-color: #dfe5ef;
    --bs-table-hover-bg: rgba(110, 168, 255, .1);
    --bs-table-hover-color: #f2f5fb;

    --bs-list-group-bg: #242a38;
    --bs-list-group-color: #dfe5ef;
    --bs-list-group-border-color: #3d4657;
    --bs-list-group-action-hover-bg: #2f3646;

    --bs-form-control-bg: #242a38;
    --bs-form-control-color: #dfe5ef;
}

/* The subtle badge variants Bootstrap ships are tuned for white; on a dark card the pale
   fill and the pale text collapse into each other. Deepen the fill, lift the text. */
[data-bs-theme="dark"] .bg-success-subtle { background-color: rgba(45, 190, 140, .16) !important; }
[data-bs-theme="dark"] .bg-secondary-subtle { background-color: rgba(160, 172, 196, .16) !important; }
[data-bs-theme="dark"] .bg-primary-subtle { background-color: rgba(79, 140, 255, .16) !important; }
[data-bs-theme="dark"] .bg-danger-subtle { background-color: rgba(226, 75, 74, .16) !important; }
[data-bs-theme="dark"] .bg-warning-subtle { background-color: rgba(239, 159, 39, .16) !important; }
[data-bs-theme="dark"] .bg-info-subtle { background-color: rgba(110, 168, 255, .16) !important; }

[data-bs-theme="dark"] .text-success { color: #5fd3a8 !important; }
[data-bs-theme="dark"] .text-primary { color: #8fb6ff !important; }
[data-bs-theme="dark"] .text-danger { color: #ff8b88 !important; }
[data-bs-theme="dark"] .text-warning { color: #e0a86f !important; }
[data-bs-theme="dark"] .text-info { color: #8fb6ff !important; }

/* ── 10. Table styling ────────────────────────────────────────────────────────
   One look for every table in the application, matching the agreed design: a rounded
   hairline card, a tinted header of quiet grey labels, roomy rows separated by faint
   dividers, and a hover tint.

   Appended last so it supersedes the earlier .table and .dark-theme .table rules; the
   dark variants therefore have to be restated here rather than left to those blocks.

   border-collapse is separate (not collapse) because collapsed borders cannot be
   rounded — the corner radii are applied to the individual corner cells instead.
   ---------------------------------------------------------------------------- */

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
    text-align: left;
    color: var(--app-text-slate);
    background: var(--app-surface);
    border: 1px solid var(--app-border-hairline);
    border-radius: 12px;
}

.table > thead > tr > th {
    padding: 13px 20px;
    font-weight: 500;
    font-size: 0.8125rem;
    color: #64748b;
    white-space: nowrap;
    background: var(--app-surface-muted);
    border-bottom: 1px solid var(--app-border-hairline);
}

.table > thead > tr > th:first-child { border-top-left-radius: 12px; }
.table > thead > tr > th:last-child  { border-top-right-radius: 12px; }

.table > tbody > tr > td,
.table > tbody > tr > th {
    padding: 14px 20px;
    vertical-align: middle;
    background: transparent;
    border-bottom: 1px solid var(--app-border-faint);
}

/* The last row meets the card edge, so it carries the rounding and drops its divider. */
.table > tbody > tr:last-child > td,
.table > tbody > tr:last-child > th { border-bottom: 0; }
.table > tbody > tr:last-child > td:first-child { border-bottom-left-radius: 12px; }
.table > tbody > tr:last-child > td:last-child  { border-bottom-right-radius: 12px; }

.table > tbody > tr {
    background: var(--app-surface);
    transition: background-color .18s ease;
}

.table > tbody > tr:hover { background: var(--app-surface-muted); }

.table > tbody > tr > th {
    font-weight: 600;
    color: var(--app-text-color);
    white-space: nowrap;
}

/* Leading select column: narrow, centred, no wrap. */
.table > thead > tr > th.dnx-table-select,
.table > tbody > tr > td.dnx-table-select {
    width: 44px;
    padding-right: 0;
    text-align: center;
}

/* Primary cell — a name over a quieter secondary line, as in the design. */
.dnx-table-primary { font-weight: 600; color: var(--app-text-color); line-height: 1.35; }
.dnx-table-secondary { font-size: 0.8125rem; color: #64748b; line-height: 1.35; }

/* Status pill. Bootstrap's *-subtle badges already sit close to this; the radius and
   padding are normalised so every table reads the same regardless of which the page used. */
.table .badge {
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 8px;
}

/* Ghost action buttons in the actions column. */
.table .dnx-table-action,
.table td .btn-sm.btn-outline-secondary {
    padding: 4px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
    background: var(--app-surface-muted);
    border: 1px solid transparent;
    border-radius: 7px;
    transition: background-color .15s ease, color .15s ease;
}

.table .dnx-table-action:hover,
.table td .btn-sm.btn-outline-secondary:hover {
    background: var(--app-border-faint);
    color: var(--app-text-color);
}

/* Trailing overflow trigger. */
.table .dnx-table-more {
    border: 0;
    background: none;
    padding: 2px 8px;
    color: #94a3b8;
    border-radius: 6px;
    line-height: 1;
}

.table .dnx-table-more:hover { background: var(--app-surface-muted); color: var(--app-text-color); }

/* Footer strip ("View all"). */
.dnx-table-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--vision-accent, #2b6fe0);
}

/* A .table inside .table-responsive would clip its own corners against the scroller, so the
   radius moves to the wrapper and the table goes flat-edged. */
.table-responsive { border-radius: 12px; }
.table-responsive > .table { border-radius: 0; border: 0; }
.table-responsive > .table > thead > tr > th:first-child,
.table-responsive > .table > thead > tr > th:last-child,
.table-responsive > .table > tbody > tr:last-child > td:first-child,
.table-responsive > .table > tbody > tr:last-child > td:last-child { border-radius: 0; }

/* Striped and bordered variants keep working on top of the base look. */
.table-striped > tbody > tr:nth-of-type(odd) > td { background: rgba(15, 32, 74, .022); }
.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > th { border-right: 1px solid var(--app-border-faint); }
.table-bordered > tbody > tr > td:last-child,
.table-bordered > thead > tr > th:last-child { border-right: 0; }

/* ── Dark ── */
.dark-theme .table {
    color: var(--app-text-color);
    background: var(--app-surface);
    border-color: var(--app-border-hairline);
}

.dark-theme .table > thead > tr > th {
    background: var(--app-surface-muted);
    color: #a7b0c0;
    border-bottom-color: var(--app-border-hairline);
}

.dark-theme .table > tbody > tr {
    background: var(--app-surface);
}

.dark-theme .table > tbody > tr > td,
.dark-theme .table > tbody > tr > th {
    border-bottom-color: var(--app-border-faint);
    color: var(--app-text-color);
}

.dark-theme .table > tbody > tr:hover { background: #2b3345; }

.dark-theme .dnx-table-secondary,
.dark-theme .table .dnx-table-more { color: #a7b0c0; }

.dark-theme .table .dnx-table-action,
.dark-theme .table td .btn-sm.btn-outline-secondary {
    color: #ccd4e2;
    background: #2f3646;
}

.dark-theme .table .dnx-table-action:hover,
.dark-theme .table td .btn-sm.btn-outline-secondary:hover {
    background: #3d4657;
    color: #f2f5fb;
}

.dark-theme .table-striped > tbody > tr:nth-of-type(odd) > td { background: rgba(255, 255, 255, .035); }
.dark-theme .dnx-table-footer { color: #6ea8ff; }

/* ── 11. Subject-area detail tabs in dark ─────────────────────────────────────
   The strip and the selected tab both resolve to the raised surface once the pale
   greys are themed, which would leave the current tab indistinguishable from its
   background. Sinking the strip to the page tone restores the raised look the light
   design has, and the underline moves onto the theme accent.
   ---------------------------------------------------------------------------- */

.dark-theme .sa-tabs-container,
.dark-theme .secondary-tabs,
.dark-theme .primary-tabs {
    background: #1a1f2b;
    border-bottom-color: var(--app-border-hairline);
}

.dark-theme .secondary-tabs .tab-item,
.dark-theme .primary-tabs .tab-item {
    color: #a7b0c0;
}

.dark-theme .secondary-tabs .tab-item:hover,
.dark-theme .primary-tabs .tab-item:hover {
    background: #232936;
    color: var(--app-text-color);
}

.dark-theme .secondary-tabs .tab-item.active {
    background: var(--app-surface);
    color: #6ea8ff;
    border-bottom-color: #6ea8ff;
}

.dark-theme .primary-tabs .tab-item.active {
    color: #6ea8ff;
    border-bottom-color: #6ea8ff;
}

.dark-theme .sa-detail-container,
.dark-theme .sa-content-area {
    background: #1a1f2b;
}

/* ── MDM Managed Flow summary inside the Subject Area node ──────────────────────────────────
   The violet text used to be inline (#7e22ce / #581c87). Those read fine on a white card but
   the node card goes #242a38 in dark mode, where dark violet on a 10%-violet wash is
   effectively invisible. Same tint, lightened ink. */
.mdm-managed-flow {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.2);
    font-size: 0.65rem;
}

.mdm-managed-flow-title {
    color: #7e22ce;
}

.mdm-managed-flow-tables {
    color: #581c87;
    font-family: monospace;
    font-size: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dark-theme .mdm-managed-flow {
    background: rgba(168, 85, 247, 0.16);
    border-color: rgba(168, 85, 247, 0.35);
}

.dark-theme .mdm-managed-flow-title {
    color: #d8b4fe;
}

.dark-theme .mdm-managed-flow-tables {
    color: #c4b5fd;
}

/* ── MDM ghost cards (Reject / Stage History) in the pipeline designer ──────────────────────
   These are read-only companions to a Stage node. Their palette used to be inline and
   light-only, so in dark mode they sat on the canvas as bright white and pink slabs beside
   the dark .pipeline-node cards. Same semantic hues, re-tuned for each surface. */
.mdm-ghost-node {
    cursor: default !important;
    pointer-events: none;
    border-width: 2px;
    border-style: dashed;
}

.mdm-ghost-title,
.mdm-ghost-table {
    font-size: 0.75rem;
}

.mdm-ghost-table {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mdm-ghost-badge {
    font-size: 0.65rem;
}

/* Reject — light */
.mdm-ghost-reject {
    border-color: #ef4444;
    background-color: #fef2f2;
}

.mdm-ghost-reject .mdm-ghost-header {
    border-bottom: 1px solid #fee2e2;
}

.mdm-ghost-reject .mdm-ghost-title,
.mdm-ghost-reject .mdm-ghost-table {
    color: #991b1b;
}

.mdm-ghost-reject .mdm-ghost-badge {
    background-color: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

/* Reject — dark */
.dark-theme .mdm-ghost-reject {
    border-color: #f87171;
    background-color: #2c1d1f;
}

.dark-theme .mdm-ghost-reject .mdm-ghost-header {
    border-bottom-color: #4c2528;
}

.dark-theme .mdm-ghost-reject .mdm-ghost-title,
.dark-theme .mdm-ghost-reject .mdm-ghost-table {
    color: #fca5a5;
}

.dark-theme .mdm-ghost-reject .mdm-ghost-badge {
    background-color: #4c2528;
    color: #fca5a5;
    border-color: #7f3336;
}

/* History — light */
.mdm-ghost-history {
    border-color: #94a3b8;
    background-color: #f8fafc;
}

.mdm-ghost-history .mdm-ghost-title,
.mdm-ghost-history .mdm-ghost-table {
    color: #334155;
}

.mdm-ghost-history .mdm-ghost-badge {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

/* History — dark */
.dark-theme .mdm-ghost-history {
    border-color: #64748b;
    background-color: #232935;
}

.dark-theme .mdm-ghost-history .mdm-ghost-title,
.dark-theme .mdm-ghost-history .mdm-ghost-table {
    color: #cbd5e1;
}

.dark-theme .mdm-ghost-history .mdm-ghost-badge {
    background-color: #2f3646;
    color: #a7b0c0;
    border-color: #3d4657;
}

/* ── Router branch: Target card + route-condition chips ─────────────────────────────────────
   Amber accents were inline and light-only, so on a dark .pipeline-node the header hairline
   read as a bright cream line and the condition chips as cream slabs. */
.target-node-header {
    border-bottom: 1px solid #fef3c7;
}

.target-node-title {
    font-size: 0.75rem;
    color: #b45309;
}

.route-condition-chip {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}

.dark-theme .target-node-header {
    border-bottom-color: #4a3a17;
}

.dark-theme .target-node-title {
    color: #fcd34d;
}

/* ── EternityArc (nx-*) animation library, ported from EternityArc Platform mockup ─────────────────────── */
@keyframes nxDrift1 {
    0% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(8%,-6%,0) scale(1.15); }
    100% { transform: translate3d(0,0,0) scale(1); }
}

@keyframes nxDrift2 {
    0% { transform: translate3d(0,0,0) scale(1.1); }
    50% { transform: translate3d(-10%,8%,0) scale(.95); }
    100% { transform: translate3d(0,0,0) scale(1.1); }
}

@keyframes nxSpin {
    to { transform: rotate(360deg); }
}

@keyframes nxSpinRev {
    to { transform: rotate(-360deg); }
}

@keyframes nxPulseRing {
    0% { transform: scale(.85); opacity: .55; }
    70% { transform: scale(1.4); opacity: 0; }
    100% { opacity: 0; }
}

@keyframes nxRise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes nxRiseSm {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes nxSlideDown {
    from { opacity: 0; transform: translateY(-14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes nxFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes nxFloatUp {
    0% { transform: translateY(0); opacity: 0; }
    12% { opacity: .55; }
    100% { transform: translateY(-340px); opacity: 0; }
}

@keyframes nxSweep {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(220%); }
}

@keyframes nxGridPan {
    to { background-position: 60px 60px; }
}

@keyframes nxShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(280%); }
}

@keyframes nxNudge {
    0%, 72%, 100% { transform: translateX(0); }
    84% { transform: translateX(4px); }
}

@keyframes nxBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.82); }
}

@keyframes nxBar {
    0% { transform: scaleY(.28); }
    100% { transform: scaleY(1); }
}

@keyframes nxDash {
    to { stroke-dashoffset: -240; }
}

@keyframes nxTrace {
    to { stroke-dashoffset: 0; }
}

@keyframes nxTicker {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@keyframes nxPop {
    0% { transform: scale(.6); opacity: 0; }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes nxToastIn {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes nxSheen {
    0% { background-position: -220% 0; }
    100% { background-position: 320% 0; }
}

@keyframes nxOrbit {
    from { transform: rotate(0deg) translateX(74px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(74px) rotate(-360deg); }
}

@keyframes nxScan {
    0% { transform: translateY(-100%); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateY(1200%); opacity: 0; }
}

@keyframes nxWidth {
    from { width: 0; }
}

@keyframes nxRing {
    from { stroke-dashoffset: 314; }
}

@keyframes nxSlideLeft {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Utility classes applying the nx-* keyframes with the mockup's default timings */
.nx-drift-1 { animation: nxDrift1 16s ease-in-out infinite; }
.nx-drift-2 { animation: nxDrift2 20s ease-in-out infinite; }
.nx-spin { animation: nxSpin .7s linear infinite; }
.nx-spin-slow { animation: nxSpin 26s linear infinite; }
.nx-spin-rev { animation: nxSpinRev 30s linear infinite; }
.nx-pulse-ring { animation: nxPulseRing 3.6s ease-out infinite; }
.nx-rise { animation: nxRise .7s cubic-bezier(.22,1,.36,1) both; }
.nx-rise-sm { animation: nxRiseSm .6s cubic-bezier(.22,1,.36,1) both; }
.nx-slide-down { animation: nxSlideDown .55s cubic-bezier(.22,1,.36,1) both; }
.nx-fade { animation: nxFade .35s ease both; }
.nx-float-up { animation: nxFloatUp 11s linear infinite; }
.nx-sweep { animation: nxSweep 3.6s ease-in-out infinite; }
.nx-grid-pan { animation: nxGridPan 12s linear infinite; }
.nx-shimmer { animation: nxShimmer 3.8s ease-in-out infinite; }
.nx-nudge { animation: nxNudge 3.2s ease-in-out infinite; }
.nx-blink { animation: nxBlink 1.6s ease-in-out infinite; }
.nx-bar { animation: nxBar 1.1s ease-in-out infinite alternate; }
.nx-dash { animation: nxDash 9s linear infinite; }
.nx-trace { animation: nxTrace 1.8s cubic-bezier(.22,1,.36,1) forwards; }
.nx-ticker { animation: nxTicker 14s linear infinite; }
.nx-pop { animation: nxPop .5s cubic-bezier(.22,1,.36,1) both; }
.nx-toast-in { animation: nxToastIn .35s cubic-bezier(.22,1,.36,1) both; }
.nx-sheen { animation: nxSheen 4.5s linear infinite; }
.nx-orbit { animation: nxOrbit 9s linear infinite; }
.nx-scan { animation: nxScan 6s ease-in-out infinite; }
.nx-width { animation: nxWidth 1.1s cubic-bezier(.22,1,.36,1) both; }
.nx-ring { animation: nxRing 1.4s cubic-bezier(.22,1,.36,1) both; }
.nx-slide-left { animation: nxSlideLeft .45s cubic-bezier(.22,1,.36,1) both; }

.dark-theme .route-condition-chip {
    background: #33280f;
    border-color: #4a3a17;
    color: #fcd34d;
}

/* ==========================================================================
   Material 3 dropdowns (application-wide)

   Every native <select>, every Bootstrap .form-select (including the button
   that triggers SearchableDropdown) and every .dropdown-menu panel picks this
   up automatically — no markup changes needed. Placed at the end of the file
   deliberately: several legacy blocks above style selects with !important, so
   these rules need both the later source position and matching !important on
   the core paint properties to win. Colours come from the theme ramp, so the
   dark flip is handled by the token block rather than by parallel rules.
   ========================================================================== */

:root {
    /* Re-pointed at the Dimensional ramp. These rules paint every native input, select
       and textarea in the app with !important, so a field could not be brought onto the
       design language by styling it — the values had to change at the source. Doing it
       here means all ~180 screens inherit the correct surface, border, radius and accent
       without any of them being touched.

       Height stays 44px rather than dropping to Dimensional's 36px: it is load-bearing
       for the vertical rhythm of existing forms, and 44px is the touch target size those
       forms would need on tablet anyway. */
    --m3-field-bg: var(--surface-solid);
    --m3-field-bg-hover: var(--surface-solid);
    --m3-field-border: var(--border-strong);
    --m3-field-border-hover: var(--accent);
    --m3-field-text: var(--ink);
    --m3-field-accent: var(--accent);
    /* The focus ring is the brand blue at low alpha rather than the old #2b6fe0. */
    --m3-field-accent-ring: oklch(0.385 0.158 266 / .16);
    --m3-field-radius: var(--r-control);
    --m3-field-height: 44px;
    /* The chevron is baked per theme because a background-image cannot read currentColor. */
    --m3-field-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6a86' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --m3-menu-bg: var(--app-surface);
    --m3-menu-border: var(--app-border-soft);
    --m3-menu-shadow: 0 8px 10px -6px rgba(15, 32, 74, .18), 0 20px 40px -12px rgba(15, 32, 74, .28);
    --m3-state-layer: rgba(43, 111, 224, .08);
    --m3-easing: cubic-bezier(.2, 0, 0, 1);
}

.dark-theme {
    /* Same re-pointing as the light block above. The literals here were a third dark
       palette — neither Dimensional's nor the GitHub-ish one the custom dropdown used —
       which is why a form could contain two greys that were meant to be the same grey. */
    --m3-field-bg: var(--surface-solid);
    --m3-field-bg-hover: var(--surface-solid);
    --m3-field-border: var(--border-strong);
    --m3-field-border-hover: var(--accent);
    --m3-field-text: var(--ink);
    --m3-field-accent: var(--accent);
    --m3-field-accent-ring: oklch(0.657 0.182 262 / .24);
    --m3-field-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6c2d9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --m3-menu-bg: #242a38;
    --m3-menu-border: #3d4657;
    --m3-menu-shadow: 0 8px 10px -6px rgba(0, 0, 0, .6), 0 20px 40px -12px rgba(0, 0, 0, .7);
    --m3-state-layer: rgba(88, 166, 255, .14);
}

/* --- Closed field -------------------------------------------------------- */
/* :not([multiple]):not([size]) both excludes list-boxes (which must keep their
   native rendering) and lifts specificity above the legacy .dark-theme rules. */
select:not([multiple]):not([size]),
.form-select:not([multiple]):not([size]),
select.form-control:not([multiple]):not([size]) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-height: var(--m3-field-height);
    padding: 0 40px 0 14px;
    background-color: var(--m3-field-bg) !important;
    background-image: var(--m3-field-chevron) !important;
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 18px 18px;
    border: 1px solid var(--m3-field-border) !important;
    border-radius: var(--m3-field-radius) !important;
    color: var(--m3-field-text) !important;
    font-size: var(--app-base-font-size);
    line-height: 1.4;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .18s var(--m3-easing), border-color .18s var(--m3-easing), box-shadow .22s var(--m3-easing), background-position .22s var(--m3-easing), transform .18s var(--m3-easing);
}

select:not([multiple]):not([size]):hover:not(:disabled),
.form-select:not([multiple]):not([size]):hover:not(:disabled),
select.form-control:not([multiple]):not([size]):hover:not(:disabled) {
    background-color: var(--m3-field-bg-hover) !important;
    border-color: var(--m3-field-border-hover) !important;
}

/* Focus = M3's 2px accent outline plus a soft ring that grows in, and the
   chevron drops a couple of pixels to acknowledge the press. */
select:not([multiple]):not([size]):focus,
select:not([multiple]):not([size]):focus-visible,
.form-select:not([multiple]):not([size]):focus,
select.form-control:not([multiple]):not([size]):focus {
    outline: none;
    background-color: var(--m3-field-bg) !important;
    background-position: right 13px top 58%;
    border-color: var(--m3-field-accent) !important;
    box-shadow: 0 0 0 3px var(--m3-field-accent-ring) !important;
    animation: m3FieldFocus .28s var(--m3-easing);
}

select:not([multiple]):not([size]):disabled,
.form-select:not([multiple]):not([size]):disabled,
select.form-control:not([multiple]):not([size]):disabled {
    opacity: .55;
    cursor: not-allowed;
    background-color: var(--app-surface-muted) !important;
    border-color: var(--m3-field-border) !important;
}

/* Small variant keeps the shape but not the 44px comfortable height. */
.form-select-sm:not([multiple]):not([size]),
select.form-select-sm:not([multiple]):not([size]) {
    min-height: 34px;
    padding: 0 34px 0 11px;
    background-position: right 10px center;
    background-size: 15px 15px;
    border-radius: 8px !important;
}

.form-select-sm:not([multiple]):not([size]):focus {
    background-position: right 10px top 58%;
}

.form-select-lg:not([multiple]):not([size]) {
    min-height: 52px;
    padding: 0 44px 0 16px;
    border-radius: 12px !important;
}

/* The native popup is drawn by the OS; only its rows can be coloured, and only
   this much of it survives across browsers. Without it the list renders white
   on white in dark mode on Windows. */
select option {
    background-color: var(--m3-menu-bg);
    color: var(--m3-field-text);
    padding: 8px 12px;
}

/* --- Optional wrapper: animated focus indicator -------------------------- */
/* Used where a select should get M3's expanding underline (see Login.razor).
   Purely additive — a bare select is fully styled without it. */
.m3-select-field {
    position: relative;
    display: block;
}

.m3-select-field > select {
    width: 100%;
}

.m3-select-field::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--m3-field-accent);
    opacity: 0;
    transition: left .24s var(--m3-easing), right .24s var(--m3-easing), opacity .24s var(--m3-easing);
    pointer-events: none;
}

.m3-select-field:focus-within::after {
    left: 12px;
    right: 12px;
    opacity: 1;
}

/* --- Menu panels (Bootstrap .dropdown-menu, SearchableDropdown) ----------- */
.dropdown-menu {
    background-color: var(--m3-menu-bg);
    border: 1px solid var(--m3-menu-border);
    border-radius: 12px;
    padding: 6px;
    color: var(--m3-field-text);
    box-shadow: var(--m3-menu-shadow);
    transform-origin: top center;
}

.dropdown-menu.show {
    animation: m3MenuIn .18s var(--m3-easing) both;
}

.dropdown-menu[data-bs-popper][x-placement^="top"],
.dropdown-menu.dropdown-menu-up {
    transform-origin: bottom center;
}

.dropdown-item {
    border-radius: 8px;
    color: var(--m3-field-text);
    /* Overrides the padding-left nudge defined earlier in this file: M3 rows
       shift with a state layer, not by moving their own text. */
    transition: background-color .16s var(--m3-easing), color .16s var(--m3-easing);
}

.dropdown-item:hover,
.dropdown-item:focus {
    padding-left: 1rem;
    background-color: var(--m3-state-layer);
    color: var(--m3-field-text);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--m3-field-accent);
    color: #fff;
}

.dropdown-divider {
    border-top-color: var(--m3-menu-border);
}

@keyframes m3FieldFocus {
    from {
        box-shadow: 0 0 0 0 var(--m3-field-accent-ring);
    }
}

@keyframes m3MenuIn {
    from {
        opacity: 0;
        transform: translateY(-4px) scaleY(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

@media (prefers-reduced-motion: reduce) {

    select:not([multiple]):not([size]),
    .form-select:not([multiple]):not([size]),
    .dropdown-menu.show,
    .m3-select-field::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Mapping / Flow Explorer — classification tabs, project tree, context menu
   ══════════════════════════════════════════════════════════════════════════ */

.dnx-explorer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Top-level MDM / non-MDM tabs ─────────────────────────────────────── */

.dnx-explorer-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--app-border-hairline);
    overflow-x: auto;
}

.dnx-explorer-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.6rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.dnx-explorer-tab:hover {
    color: var(--app-primary-color);
}

.dnx-explorer-tab.active {
    color: var(--app-primary-color);
    border-bottom-color: var(--app-primary-color);
    font-weight: 600;
}

.dnx-explorer-tab-count {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(var(--app-surface-rgb), 0.9);
    border: 1px solid var(--app-border-hairline);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

.dnx-explorer-tab.active .dnx-explorer-tab-count {
    background: var(--app-primary-color);
    border-color: var(--app-primary-color);
    color: #fff;
}

/* ── Two-pane body ────────────────────────────────────────────────────── */

.dnx-explorer-body {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .dnx-explorer-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dnx-explorer-tree {
    border: 1px solid var(--app-border-hairline);
    border-radius: 0.5rem;
    overflow: hidden;
    position: sticky;
    top: 0.5rem;
}

.dnx-explorer-tree-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--app-border-hairline);
}

.dnx-explorer-tree-scroll {
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.35rem 0;
}

.dnx-icon-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.35rem;
    width: 1.85rem;
    height: 1.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.dnx-icon-btn:hover:not(:disabled) {
    background: rgba(27, 56, 150, 0.08);
    border-color: var(--app-border-hairline);
    color: var(--app-primary-color);
}

.dnx-icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Tree rows ────────────────────────────────────────────────────────── */

.dnx-tree-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem 0.3rem 0.35rem;
    font-size: 0.86rem;
    cursor: pointer;
    user-select: none;
    border-left: 2px solid transparent;
    transition: background 0.12s ease;
}

.dnx-tree-row:hover {
    background: rgba(27, 56, 150, 0.06);
}

.dnx-tree-row.selected {
    background: rgba(27, 56, 150, 0.12);
    border-left-color: var(--app-primary-color);
    font-weight: 600;
}

.dnx-tree-row.root {
    padding-left: 0.5rem;
    font-weight: 600;
}

.dnx-tree-caret {
    background: transparent;
    border: none;
    padding: 0;
    width: 1rem;
    flex: 0 0 1rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.7rem;
    cursor: pointer;
}

.dnx-tree-icon {
    flex: 0 0 auto;
    color: #d9a441;
}

.dnx-tree-icon.project {
    color: var(--app-primary-color);
}

.dnx-tree-icon.item {
    color: var(--app-primary-color);
    opacity: 0.75;
}

.dnx-tree-label {
    flex: 1 1 auto;
    min-width: 0;
}

.dnx-tree-count {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    background: rgba(var(--app-surface-rgb), 0.9);
    border: 1px solid var(--app-border-hairline);
    border-radius: 999px;
    padding: 0 0.4rem;
}

.dnx-tree-tag {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    white-space: nowrap;
}

.dnx-tree-tag.mdm {
    background: rgba(25, 135, 84, 0.15);
    color: #14603a;
}

.dnx-tree-tag.nonmdm {
    background: rgba(108, 117, 125, 0.18);
    color: #495057;
}

.dnx-tree-section {
    padding: 0.6rem 0.75rem 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
}

.dnx-tree-kebab {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    padding: 0 0.15rem;
    color: var(--bs-secondary-color, #6c757d);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.12s ease;
}

.dnx-tree-row:hover .dnx-tree-kebab,
.dnx-tree-row.selected .dnx-tree-kebab {
    opacity: 1;
}

/* ── Context menu ─────────────────────────────────────────────────────── */

.dnx-ctx-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: transparent;
}

.dnx-ctx-menu {
    position: fixed;
    z-index: 2001;
    min-width: 210px;
    max-width: 280px;
    padding: 0.3rem;
    border-radius: 0.5rem;
    border: 1px solid var(--app-border-hairline);
    background: rgba(var(--app-surface-rgb), 0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.dnx-ctx-heading {
    padding: 0.35rem 0.6rem 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    border-bottom: 1px solid var(--app-border-hairline);
    margin-bottom: 0.25rem;
}

.dnx-ctx-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0.35rem;
    padding: 0.42rem 0.6rem;
    font-size: 0.85rem;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.dnx-ctx-item:hover {
    background: rgba(27, 56, 150, 0.1);
}

.dnx-ctx-item.danger {
    color: var(--bs-danger, #dc3545);
}

.dnx-ctx-item.danger:hover {
    background: rgba(220, 53, 69, 0.12);
}

.dnx-ctx-sep {
    height: 1px;
    margin: 0.25rem 0.35rem;
    background: var(--app-border-hairline);
}

/* ── Destination picker ───────────────────────────────────────────────── */

.dnx-folder-picker {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--app-border-hairline);
    border-radius: 0.4rem;
    padding: 0.25rem 0;
}

.dnx-folder-picker-row {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
    font-size: 0.86rem;
    cursor: pointer;
    border-left: 2px solid transparent;
}

.dnx-folder-picker-row:hover:not(.disabled) {
    background: rgba(27, 56, 150, 0.07);
}

.dnx-folder-picker-row.selected {
    background: rgba(27, 56, 150, 0.14);
    border-left-color: var(--app-primary-color);
    font-weight: 600;
}

.dnx-folder-picker-row.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Dark theme ───────────────────────────────────────────────────────── */

.dark-theme .dnx-tree-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.dark-theme .dnx-tree-row.selected {
    background: rgba(255, 255, 255, 0.12);
}

.dark-theme .dnx-tree-count,
.dark-theme .dnx-explorer-tab-count {
    background: rgba(255, 255, 255, 0.08);
}

.dark-theme .dnx-ctx-menu {
    background: rgba(31, 41, 55, 0.98);
}

.dark-theme .dnx-ctx-item:hover,
.dark-theme .dnx-folder-picker-row:hover:not(.disabled) {
    background: rgba(255, 255, 255, 0.08);
}

.dark-theme .dnx-folder-picker-row.selected {
    background: rgba(255, 255, 255, 0.14);
}

.dark-theme .dnx-tree-tag.mdm {
    background: rgba(25, 135, 84, 0.28);
    color: #7ee2b0;
}

.dark-theme .dnx-tree-tag.nonmdm {
    background: rgba(255, 255, 255, 0.14);
    color: #cbd5e1;
}

/* ── Model Add Operations wizard: form field focus ring and action row surface ──
   Bootstrap's default focus paints a 0.25rem light-blue halo plus a #86b7fe border,
   which reads as a thick misaligned outline against the drawer's own hairlines. Match
   the ring the pipeline config drawer already uses so both dialogs focus alike.
   ---------------------------------------------------------------------------- */

.dial-form-content .form-control,
.dial-form-content .form-select {
    border-color: var(--app-border-cool);
}

.dial-form-content .form-control:focus,
.dial-form-content .form-select:focus {
    border-color: var(--app-primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary-color) 12%, transparent);
    outline: none;
}

/* The sticky action row takes the body's tint (--app-tint-hover-d) but not the 86%
   white wash the body layers over it, so it renders as a blue-grey shelf above the
   button. Repeating the wash makes the row read as the same surface it sits on while
   staying opaque enough to hide content scrolling beneath it. */
.dial-modal-body .dial-form-actions,
.dial-modal-content .dial-form-actions {
    background-color: var(--app-tint-hover-d);
    background-image: linear-gradient(rgba(var(--app-surface-rgb), 0.86), rgba(var(--app-surface-rgb), 0.86));
}

.dark-theme .dial-modal-body .dial-form-actions,
.dark-theme .dial-modal-content .dial-form-actions {
    background-color: #1e2226;
    background-image: none;
}

/* ==========================================================================
   DnxSelect — custom combobox (Components/Common/Inputs/DnxSelect.razor)
   Pure Blazor open/close (no Bootstrap JS) so it works reliably inside
   scrollable/overflow containers (e.g. table cells, card bodies).
   ========================================================================== */
.dnx-select {
    position: relative;
    width: 100%;
}

.dnx-select-trigger {
    width: 100%;
    background-color: var(--app-surface);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.dnx-select-sm .dnx-select-trigger {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
}

.dnx-select-trigger:hover:not(:disabled) {
    border-color: rgba(59, 130, 246, 0.5);
}

.dnx-select-trigger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dnx-select-chevron {
    flex: none;
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: #64748b;
    transition: transform 0.15s ease, color 0.15s ease;
}

.dnx-select-chevron.open {
    transform: rotate(180deg);
    color: #3b82f6;
}

.dark-theme .dnx-select-trigger {
    background-color: #0d1117;
    border-color: rgba(255, 255, 255, 0.15);
    color: #c9d1d9;
}

.dark-theme .dnx-select-chevron {
    color: #8b949e;
}

/* Full-viewport transparent layer: click anywhere outside the menu to close it. */
.dnx-select-overlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

/* Menu surface */
.dnx-select-menu {
    list-style: none;
    margin: 0;
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    /* Above ModalShell's dialog (z-index 1060) and its own trigger's stacking context, so a
       DnxSelect opened inside a modal/drawer renders its menu on top instead of behind the
       dialog. The component also repositions this element to `position: fixed` via
       dnxPositionSelectMenu once open, which escapes ancestor `overflow: hidden` clipping —
       this z-index is what then keeps it above everything once it's out of normal flow. */
    z-index: 1200;
    min-width: 100%;
    padding: 0.4rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background-color: var(--app-surface, #fff);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
    max-height: 280px;
    overflow-y: auto;
}

.dark-theme .dnx-select-menu {
    border-color: rgba(255, 255, 255, 0.08);
    background-color: #161b22;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

.dnx-select-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    border: none;
    background: transparent;
    color: #1e293b;
    font-size: 0.82rem;
    text-align: left;
    padding: 0.45rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.dnx-select-item:hover {
    background-color: rgba(59, 130, 246, 0.08);
}

.dnx-select-item.selected {
    background-color: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
    font-weight: 600;
}

.dnx-select-check {
    color: #1d4ed8;
    font-size: 0.95rem;
}

.dark-theme .dnx-select-item {
    color: #c9d1d9;
}

.dark-theme .dnx-select-item:hover {
    background-color: rgba(59, 130, 246, 0.14);
}

.dark-theme .dnx-select-item.selected {
    background-color: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.dark-theme .dnx-select-check {
    color: #93c5fd;
}

.dnx-select-group-label {
    padding: 0.4rem 0.65rem 0.15rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #94a3b8;
    pointer-events: none;
}

.dark-theme .dnx-select-group-label {
    color: #6e7681;
}

.dnx-select-item:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.dnx-select-item:disabled:hover {
    background-color: transparent;
}

.dnx-select-trigger.is-invalid {
    border-color: #dc3545;
}

/* ============================================
   CARD LIST (DnxCardList)
   ============================================
   Card presentation for the admin lists that read badly as table rows — Users, Roles,
   Connections, Environments. Built entirely on the --app-* ramps so dark mode needs no
   separate block here: the tokens already carry their dark counterparts.
   ============================================ */

.dnx-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.dnx-card-list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

.dnx-card-list-head-text {
    min-width: 0;
}

.dnx-card-list-subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--app-text-neutral);
    opacity: 0.85;
}

/* The count is a secondary fact about the title, so it must not compete with it. */
.dnx-card-list-count {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--app-tint-panel-d);
    border: 1px solid var(--app-border-color);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--app-text-neutral);
    vertical-align: middle;
    /* The heading uses a gradient text fill; the pill must not inherit it. */
    -webkit-text-fill-color: var(--app-text-neutral);
}

.dnx-card-list-head-tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dnx-card-list-search {
    position: relative;
}

.dnx-card-list-search i {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--app-text-neutral);
    opacity: 0.7;
    pointer-events: none;
}

.dnx-card-list-search .form-control {
    padding-left: 1.9rem;
    min-width: 15rem;
}

/* ── Bulk action bar ─────────────────────────────────────────────────────── */

.dnx-card-list-bulkbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.9rem;
    border-radius: 10px;
    background: var(--app-wash-info);
    border: 1px solid var(--app-primary-color);
    /* Stays reachable while the user scrolls a long list deciding what else to include. */
    position: sticky;
    top: 0;
    z-index: 5;
}

.dnx-card-list-bulkcount {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--app-text-slate);
}

.dnx-card-list-bulkactions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.dnx-card-list-selectall {
    padding-left: 0.15rem;
}

/* ── Group headings ──────────────────────────────────────────────────────── */

.dnx-card-list-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--app-border-color);
}

.dnx-card-list-group-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--app-text-neutral);
}

.dnx-card-list-group-count {
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--app-tint-panel-d);
    font-size: 0.7rem;
    color: var(--app-text-neutral);
}

/* ── The cards ───────────────────────────────────────────────────────────── */

.dnx-card-grid {
    display: grid;
    /* auto-fill rather than auto-fit: with auto-fit a single card stretches the full width of a
       wide screen, which looks like a broken layout rather than one result.
       min() caps the track floor at the container width, so a viewport narrower than 20rem gets a
       narrower card instead of a horizontal scrollbar. */
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    gap: 0.75rem;
}

.dnx-card {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.8rem 0.9rem;
    border-radius: 10px;
    background: var(--app-surface);
    border: 1px solid var(--app-border-color);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.dnx-card:hover {
    border-color: var(--app-primary-color);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.dnx-card.is-selected {
    border-color: var(--app-primary-color);
    background: var(--app-wash-info);
}

.dnx-card-select {
    padding-top: 0.15rem;
    flex: 0 0 auto;
}

.dnx-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Card actions sit top-right on every card, so the same control is always in the same place. */
.dnx-card-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ── Conventional card content, so adopters don't each invent one ────────── */

.dnx-card-title {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--app-text-slate);
    /* Long names truncate rather than reflowing the grid. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dnx-card-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--app-text-neutral);
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dnx-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.45rem;
}

@media (max-width: 576px) {
    .dnx-card-grid {
        grid-template-columns: 1fr;
    }

    .dnx-card-list-search .form-control {
        min-width: 0;
        width: 100%;
    }

    .dnx-card-list-head-tools {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dnx-card {
        transition: none;
    }
}

/* ── Provider picker ──────────────────────────────────────────────────────────
   Replaces the connection-type dropdown in the new/edit connection dialog. The choice decides
   which credential fields appear below it, so it is worth the space: a dropdown hid every option
   behind a click and gave no clue what any of them were. */

.dnx-provider-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr));
    gap: 0.5rem;
}

.dnx-provider-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.7rem 0.5rem;
    border-radius: 10px;
    border: 1px solid var(--app-border-color);
    background: var(--app-surface);
    color: var(--app-text-slate);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.dnx-provider-option i {
    font-size: 1.35rem;
    line-height: 1;
    color: var(--app-primary-color);
}

.dnx-provider-option-name {
    font-size: 0.78rem;
    font-weight: 600;
    /* Provider names vary a lot in length; wrapping keeps every tile the same height. */
    overflow-wrap: anywhere;
}

.dnx-provider-option:hover {
    border-color: var(--app-primary-color);
    background: var(--app-tint-hover-a);
}

.dnx-provider-option.is-selected {
    border-color: var(--app-primary-color);
    background: var(--app-wash-info);
    box-shadow: inset 0 0 0 1px var(--app-primary-color);
}

.dnx-provider-option:focus-visible {
    outline: 2px solid var(--app-primary-color);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .dnx-provider-option {
        transition: none;
    }
}

/* ── Boot splash ──────────────────────────────────────────────────────────────
   Covers the gap between first paint and the Blazor circuit coming up. Before this the body was
   empty until the circuit connected, which rendered as a black screen. Styles live here (a
   render-blocking stylesheet in <head>) so the splash is correct on its very first frame. */

#dnx-boot-splash {
    position: fixed;
    inset: 0;
    z-index: 3000;
    overflow: hidden;
    /* Same token <body> itself paints with (dimensional.css's --canvas radial tint, not the
       older flat --app-background-color), so the handover to the real page is a content swap,
       not a background swap. */
    background-color: var(--app-background-color, #e2e7f0);
    background-image: var(--canvas, none);
    font-family: 'Inter', system-ui, sans-serif;
    opacity: 1;
    transition: opacity 0.35s ease;
}

#dnx-boot-splash.is-hidden {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    #dnx-boot-splash { transition: none; }
}

/* Login/register/setup pages sit on a plain white card, not the app's tinted canvas — the
   splash behind the auth skeleton matches that instead of the default canvas gradient. */
#dnx-boot-splash.dnx-boot-splash-auth {
    background-color: #fff;
    background-image: none;
}

/* The auth skeleton's left "brand" panel mirrors Login.razor's dark navy brand gradient — on
   the boot splash that reads as an unrecognizable dark/blurry patch rather than a page, so it
   is flattened to plain white along with everything else, with skeleton blocks switched to the
   dark-on-light variant so they're still visible. */
#dnx-boot-splash.dnx-boot-splash-auth .dnx-boot-auth-card {
    background: #fff;
}

#dnx-boot-splash.dnx-boot-splash-auth .dnx-boot-auth-card .dnx-boot-shimmer,
#dnx-boot-splash.dnx-boot-splash-auth .dnx-boot-auth-card .dnx-boot-shimmer-light {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.06) 0%, rgba(15, 23, 42, 0.12) 50%, rgba(15, 23, 42, 0.06) 100%) !important;
    background-size: 200% 100% !important;
}

/* dim-skeleton's shimmer is tuned for light rows on a plain surface. On the two dark surfaces
   here (the login brand panel, the admin header/sidebar chrome) that shimmer is invisible, so
   these variants swap in a lighter gradient that reads against a dark background. */
.dnx-boot-shimmer {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0.1) 100%) !important;
    background-size: 200% 100% !important;
}

.dnx-boot-shimmer-light {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.14) 100%) !important;
    background-size: 200% 100% !important;
}

/* Grid/module shape — mirrors CommonServiceLayout.razor's ServiceHeader + CommonSidebar shell. */
.dnx-boot-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dnx-boot-admin-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Same tokens .admin-header itself uses (dimensional.css), not a hardcoded guess, so this
       can't drift out of sync with the real header again. */
    height: var(--topbar-h, 58px);
    min-height: var(--topbar-h, 58px);
    padding: 0 1.25rem;
    background: var(--surface-chrome, rgba(255, 255, 255, 0.62));
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}

.dnx-boot-admin-header-left,
.dnx-boot-admin-header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dnx-boot-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

/* Same clamp as .admin-sidebar's expanded width, so the real sidebar drops in at an identical
   width instead of the content reflowing when it mounts. */
.dnx-boot-sidebar {
    flex: 0 0 clamp(8rem, 16vw, 13rem);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.4rem;
    border-right: 1px solid var(--vision-border, rgba(0, 0, 0, 0.08));
}

.dnx-boot-sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--r-control, 8px);
}

/* .common-main-content is transparent with no margin/card (the canvas painted on <body> shows
   through it) — matching that exactly, rather than the white rounded card it used to be, is what
   stops the real content from visibly popping in over/under the skeleton. */
.dnx-boot-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--content-pad, 24px);
    background: transparent;
}

/* Dashboard shape — mirrors ServicesPanel.razor's navbar / svc-hero / svc-toolbar / svc-grid. */
.dnx-boot-dash-navbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--app-surface, #fff);
    border-bottom: 1px solid var(--app-border-hairline, rgba(0, 0, 0, 0.08));
}

.dnx-boot-dash-navbar-icons {
    margin-left: auto;
    display: flex;
    gap: 1rem;
}

.dnx-boot-dash-content {
    flex: 1 1 auto;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 1.5rem;
    box-sizing: border-box;
}

/* Same gradient and padding as .svc-hero, so the skeleton hero and the real one occupy the exact
   same rectangle when the swap happens. */
.dnx-boot-dash-hero {
    padding: 26px 30px;
    border-radius: 16px;
    background: linear-gradient(140deg, #0d2a6b, #16308a 55%, #0a1c48);
}

.dnx-boot-dash-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 26px 0 14px;
}

.dnx-boot-dash-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

.dnx-boot-dash-card {
    border-radius: 14px;
}

/* Auth shape — mirrors Login.razor's .eternityarc-login-card: same split, cap and radius, so the real
   card lands in exactly this rectangle when it mounts. */
.dnx-boot-auth {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: auto;
}

.dnx-boot-auth-shell {
    width: 100%;
    max-width: 1080px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 70px -30px rgba(15, 32, 74, .35), 0 2px 6px rgba(15, 32, 74, .06);
}

.dnx-boot-auth-card {
    padding: 56px 52px;
    background: linear-gradient(155deg, #0d2a6b, #16308a 45%, #0a1c48);
    min-height: 600px;
}

.dnx-boot-auth-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dnx-boot-auth-points {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dnx-boot-auth-point {
    display: flex;
    align-items: center;
    gap: 11px;
}

.dnx-boot-auth-form {
    padding: 56px 52px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dnx-boot-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 18px;
}

.dnx-boot-auth-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 22px;
}

@media (max-width: 900px) {
    .dnx-boot-auth-shell { grid-template-columns: 1fr; }
    .dnx-boot-auth-card { display: none; }
}

@media (max-width: 768px) {
    .dnx-boot-sidebar { display: none; }
}

/* ── Reconnect modal ──────────────────────────────────────────────────────────
   Blazor injects this when the circuit drops. Unstyled it is a bare white strip with default
   type, which reads as a broken page at exactly the moment the user needs reassurance. */

#components-reconnect-modal {
    position: fixed;
    inset: 0;
    z-index: 3100;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 23, 0.72);
    color: #e2e8f0;
    font-family: 'Inter', system-ui, sans-serif;
    text-align: center;
    padding: 2rem;
}

/* Blazor toggles these classes on the element itself as the connection state changes. */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

#components-reconnect-modal.components-reconnect-hide {
    display: none;
}

/* ── Page purpose note ────────────────────────────────────────────────────────
   The "what is this for" aside used by screens and transformations whose name does not convey
   what they do. A <details> rather than a permanent banner: the explanation matters the first few
   times someone meets a screen, not on every visit. */

.dnx-page-purpose {
    margin-bottom: 0.85rem;
    border: 1px solid var(--app-border-color);
    border-radius: 8px;
    background: var(--app-wash-info);
}

.dnx-page-purpose > summary {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--app-text-slate);
    cursor: pointer;
    list-style: none;
}

/* The default disclosure triangle sits awkwardly next to the icon. */
.dnx-page-purpose > summary::-webkit-details-marker {
    display: none;
}

.dnx-page-purpose > summary::after {
    content: '\F282'; /* bi-chevron-down */
    font-family: 'bootstrap-icons';
    float: right;
    font-size: 0.7rem;
    opacity: 0.6;
    transition: transform 0.15s ease;
}

.dnx-page-purpose[open] > summary::after {
    transform: rotate(180deg);
}

.dnx-page-purpose > summary:focus-visible {
    outline: 2px solid var(--app-primary-color);
    outline-offset: 2px;
}

.dnx-page-purpose-body {
    padding: 0 0.75rem 0.7rem;
    font-size: 0.83rem;
    color: var(--app-text-body);
}

.dnx-page-purpose-body code {
    font-size: 0.78rem;
}

@media (prefers-reduced-motion: reduce) {
    .dnx-page-purpose > summary::after { transition: none; }
}

/* ── Aggregator config rows ───────────────────────────────────────────────────
   Each aggregate is function + source column + output name + remove. That is four controls in a
   drawer about 510px wide inside its padding, and the row was a plain non-wrapping flex: the
   content needed ~680px, so it overflowed and the output-name input was squeezed to ~16px — present
   but unusable. Wrapping with real minimum widths keeps every control legible at drawer width and
   still puts the whole aggregate on one line when there is room. */

.aggregator-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.aggregator-row > * {
    min-width: 0;
}

/* The function list is short and fixed, so it never needs to grow. */
.aggregator-row .aggregator-fn {
    flex: 0 0 auto;
    width: 8.5rem;
}

/* Column and output name carry the variable-length values, so they share the remaining space and
   drop to their own line together rather than shrinking below readability. */
.aggregator-row .aggregator-col,
.aggregator-row .aggregator-out {
    flex: 1 1 10rem;
    min-width: 10rem;
}

.aggregator-row .aggregator-remove {
    flex: 0 0 auto;
    margin-left: auto;
}

/* File pickers
   ==================================================================
   A bare <input type="file"> is drawn by the browser: a grey system button labelled "Choose File"
   and the words "No file chosen" beside it, in the browser's font, at the browser's size. Next to
   the wizard's own fields it is the one control that still looks like 1998.

   It also cannot be laid out. The button and the label live in the input's shadow tree, so
   flex-direction, order and align-self on the input never reach them — the button stays on the left
   at its intrinsic height no matter what the parent says. Only ::file-selector-button's own box is
   stylable, and that is not enough.

   So .dnx-file draws the control instead: the real input is stretched invisibly across the whole
   box (still the thing that is clicked, so no JS and no keyboard regression), and the filename and
   the button beside it are ordinary elements that can be positioned. */
.dnx-file {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    border: 1.5px dashed #CBD5E1;
    border-radius: 12px;
    background: var(--app-wash-muted, #F8FAFC);
    overflow: hidden;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dnx-file:hover {
    border-color: var(--app-primary-color, #2563EB);
    background: color-mix(in srgb, var(--app-primary-color, #2563EB) 5%, transparent);
}

/* The input covers the entire control, button included, so a click anywhere opens the picker.
   Transparent rather than display:none — a hidden input is not focusable, and the keyboard has to
   be able to reach it. */
.dnx-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* :focus-visible cannot cross to the wrapper, so the ring is drawn on the wrapper via :has(). */
.dnx-file:has(.dnx-file-input:focus-visible) {
    border-color: var(--app-primary-color, #2563EB);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary-color, #2563EB) 22%, transparent);
}

.dnx-file-name {
    align-self: center;
    min-width: 0;
    padding: 0 0.5rem 0 1rem;
    color: var(--app-text-color, #1c2430);
    font-size: 0.9rem;
    /* A long filename truncates rather than pushing the button off the right edge. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dnx-file-name.is-empty {
    color: #94A3B8;
}

/* Full height, flush against the right border — the field's own action, not a button floating
   inside it. Pointer events pass through to the input underneath. */
.dnx-file-btn {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 1.25rem;
    background: var(--app-primary-color, #2563EB);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    pointer-events: none;
}

.dnx-file:hover .dnx-file-btn {
    filter: brightness(1.08);
}

.dark-theme .dnx-file {
    border-color: rgba(148, 163, 184, .35);
    background: rgba(148, 163, 184, .08);
}

.dark-theme .dnx-file-name {
    color: #E2E8F0;
}

/* Anything still using a raw file input — the migration import, for one — at least gets the field's
   colours and a proper button, even though its button cannot be moved. */
input[type="file"].form-control {
    height: auto;
    min-height: 52px;
    padding: 0.6rem 0.75rem;
    border: 1.5px dashed #CBD5E1;
    border-radius: 12px;
    background: var(--app-wash-muted, #F8FAFC);
    color: #64748B;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

input[type="file"].form-control::file-selector-button {
    margin-right: 0.85rem;
    padding: 0.45rem 1rem;
    border: 0;
    border-radius: 8px;
    background: var(--app-primary-color, #2563EB);
    color: #fff;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

input[type="file"]:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.dark-theme input[type="file"].form-control {
    border-color: rgba(148, 163, 184, .35);
    background: rgba(148, 163, 184, .08);
    color: #94A3B8;
}

/* Filter box of a Searchable DnxSelect. Sticky so it stays reachable while the list scrolls. */
.dnx-select-search {
    position: sticky;
    top: -0.4rem;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: -0.4rem -0.4rem 0.3rem;
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background-color: var(--app-surface, #fff);
    color: #94a3b8;
    font-size: 0.8rem;
}

.dnx-select-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #1e293b;
    font-size: 0.82rem;
}

.dnx-select-empty {
    padding: 0.45rem 0.65rem;
    font-size: 0.8rem;
    color: #94a3b8;
}

.dark-theme .dnx-select-search {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background-color: #161b22;
}

.dark-theme .dnx-select-search input {
    color: #c9d1d9;
}