/* Screen-only clear crystal finish. No blur, transforms or clipping on panels. */ @media screen { body.app-shell { --crystal-shadow: inset 0 1px 0 rgba(245,252,255,.9), inset 3px 3px 0 rgba(209,236,255,.25), inset -3px -3px 0 rgba(160,209,250,.28), inset 0 -8px 0 rgba(4,14,28,.42), 0 4px 0 #203c57, 0 5px 0 rgba(172,216,250,.48), 0 9px 0 #122940, 0 10px 0 rgba(99,148,193,.30), 0 13px 0 #081421, 0 18px 18px rgba(0,0,0,.42), 0 34px 48px rgba(0,0,0,.44); --crystal-inner-shadow: inset 0 1px 0 #eff9ffb3,inset 2px 2px 0 #c7e7ff26, inset 0 -4px 0 #0005,0 3px 0 #213950,0 4px 0 #9cccf044,0 7px 0 #0b1929,0 12px 18px #0005; background: linear-gradient(155deg,#111c2c,#090e18 65%); } body.app-shell .navbar { background: linear-gradient(180deg,rgba(204,230,255,.22),rgba(112,156,203,.08) 48%,rgba(13,26,44,.8) 49%),#101d2f !important; border-bottom-color: #6683a0; box-shadow: inset 0 2px 0 #a6c2df88,0 3px 0 #203850,0 4px 0 #a5c8ed33,0 10px 24px #0006; } body.app-shell .sidebar { background: linear-gradient(100deg,rgba(190,224,255,.14),transparent 45%),#111f32; border-right-color: #415773; box-shadow: inset -2px 0 0 #a5c8ed33,3px 0 0 #14263d,9px 0 20px #0006; } body.app-shell #mainContent :is(.card,.accordion-item,.dashboard-card,.ui-legacy-surface,.edit-card, .accounting-panel,.accounting-summary-card,.boss-card,.md-panel,.md-kpi,.bom-editor-pagehead, .field-card,.form-builder-page .builder-section,.form-builder-page .step-nav, .monitor-wrapper .eq-card,.monitor-wrapper .kpi-panel), body.app-shell .modal-content { background-color: rgba(23,40,61,.42) !important; background-image: linear-gradient(180deg,rgba(216,242,255,.13),transparent 12px,transparent calc(100% - 12px),rgba(142,199,243,.12)), linear-gradient(118deg,rgba(226,245,255,.18),rgba(211,237,255,.04) 27%,transparent 27.2%,transparent 76%,rgba(186,224,255,.06) 76.2%) !important; box-shadow: var(--crystal-shadow) !important; } body.app-shell #mainContent :is(.card-header,.ui-legacy-header),body.app-shell .modal-header { background: linear-gradient(180deg,#e6f6ff24,transparent 45%),linear-gradient(110deg,#95c8ff38,#69d7d90f) !important; box-shadow: inset 0 1px 0 #edf8ff33,0 2px 0 #0004; } body.app-shell #mainContent :is(.dashboard-card,.md-kpi,.accounting-summary-card), body.app-shell #mainContent .boss-kpis .boss-card { background-color: rgba(41,65,91,.52) !important; } body.app-shell #mainContent .ui-legacy-toolbar, body.app-shell #mainContent .monitor-wrapper :is(.metric-item,.kpi-row) { background-color: rgba(12,26,43,.72); box-shadow: inset 0 2px 5px #0006,inset 0 -1px 0 #cfe7ff29; } body.app-shell #mainContent .monitor-wrapper { background: transparent !important; } body.app-shell #mainContent .monitor-wrapper .kpi-row.top-1 { background-color: rgba(115,86,27,.2); } body.app-shell #mainContent .monitor-wrapper :is(.m-label,.eq-info-footer,.rank-badge) { color:#b7c9df; font-size:.9rem; } body.app-shell #mainContent .monitor-wrapper :is(.panel-header,.m-value) { color:#93c5fd; } body.app-shell #mainContent .monitor-wrapper :is(.eq-card,.kpi-panel), body.app-shell .navbar,body.app-shell .sidebar { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } body.app-shell .modal-content { background-color:#17283d !important; } /* Builder-specific shells were not Bootstrap cards. Keep the paper preview white. */ body.app-shell #mainContent .form-builder-page { --bg-surface: #192c42; --bg-surface-alt: #223951; --bg-input: #192c42; --text-secondary: #b7c9df; --text-muted: #b7c9df; --border-subtle: #aecfee33; } body.app-shell #mainContent .form-builder-page :is(.field-card,.process-toggle-card,.sub-row) { background-color: #14273ddb !important; box-shadow: var(--crystal-inner-shadow) !important; } body.app-shell #mainContent .form-builder-page :is(.section-head,.field-card-head) { border-bottom-color: #aecfee55; } body.app-shell #mainContent .form-builder-page .action-bar { background: linear-gradient(110deg,#d2eaff20,transparent),#14273d !important; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 1px 0 #eef9ff70,0 -8px 24px #0005; } body.app-shell #mainContent .form-builder-page :is(.section-desc,.step-sub,.page-eyebrow,.field-label) { font-size: 1rem; } body.app-shell #mainContent .form-builder-page .page-header { flex-wrap: wrap; } @media (max-width: 575px) { body.app-shell #mainContent .form-builder-page .step-nav { flex-wrap: wrap; } body.app-shell #mainContent .form-builder-page .step-nav > a { flex-basis: 100%; } body.app-shell #mainContent .form-builder-page .action-bar { flex-wrap: wrap; } } body.app-shell #mainContent :is(.form-control,.form-select),body.app-shell .modal-content :is(.form-control,.form-select), body.app-shell .select2-selection { background-color:#192c42 !important; box-shadow:inset 0 2px 5px #0007,0 1px 0 #deebff18 !important; } body.app-shell #mainContent :is(.form-control,.form-select):focus, body.app-shell .modal-content :is(.form-control,.form-select):focus, body.app-shell .select2-container--focus .select2-selection { border-color:#82b0ff !important; box-shadow:inset 0 2px 5px #0006,0 0 0 3px #689fff40 !important; } body.app-shell .btn:not(.btn-link),body.app-shell #mainContent .ui-legacy-button { box-shadow:inset 0 1px 0 #ffffff45,inset 0 -2px 0 #0004,0 3px 5px #0005 !important; } body.app-shell .btn,body.app-shell #mainContent .ui-legacy-button, body.app-shell #mainContent :is(.dashboard-card,.field-card,.monitor-wrapper .eq-card):hover { transform:none !important; translate:none !important; } body.app-shell .btn:not(.btn-link):active { box-shadow:inset 0 2px 5px #0007 !important; } body.app-shell .btn:disabled,body.app-shell .btn.disabled { box-shadow:none !important; } body.app-shell .dropdown-menu,body.app-shell .select2-dropdown { box-shadow:0 6px 10px #0005,0 20px 40px #0007; } }