/* ═══════════════════════════════════════════════════════════════ Customer Velocity 360 — Custom Stylesheet ═══════════════════════════════════════════════════════════════ TABLE OF CONTENTS ───────────────── §1 Legacy / Global .............. line ~10 (dropdowns, content_form) §2 Modal / Dialog System ........ line ~40 (ccModalIn animation) §3 Dark Mode — Global ........... line ~230 (nuclear strategy + re-apply) §4 Profile Page — Animations .... line ~580 (keyframes) §5 Profile Page — Layout ........ line ~620 (body bg, row, sidebar, hero) §6 Profile Page — Form Card ..... line ~1000 (fieldset, controls, buttons) §7 Profile Page — Dark Mode ..... line ~1545 (overrides for nuclear DM) §8 Profile Page — Tokens ........ line ~1775 (Obsidian Refresh palette) §9 Profile Page — Refinements ... line ~1840 (sidebar, hero, form tweaks) §10 Manage Pages ................. line ~2005 (SetPassword/ChangeEmail/ChangeLogin) ═══════════════════════════════════════════════════════════════ */ #content_form { margin-bottom: 5px; } .open>.dropdown-menu{ background-color: var(--portalThemeColor4, #ffffff); } .open>.dropdown-menu>li>a{ color: var(--portalThemeOnColor9, #1276CE); } .show .dropdown-menu > li > a:hover,.show .dropdown-menu > .active > a:hover,.dropdown-menu > .active > a:hover{ color: var(--portalThemeColor4, #ffffff); background-color: var(--portalThemeOnColor9, #1276CE); text-decoration: none; } .dropdown-menu>.active>a{ color: var(--portalThemeColor4, #ffffff); background-color: var(--portalThemeOnColor9, #1276CE); text-decoration: none; } .show .dropdown-menu>.active>a:focus,.show .dropdown-menu>.active>a:focus,.open .dropdown-menu>.active>a:focus{ color: var(--portalThemeColor4, #ffffff); background-color: var(--portalThemeOnColor9, #1276CE); text-decoration: none; /* ── BS5 Migration: suppress default anchor underline on nav elements ── */ .navbar-nav a, .navbar-nav .nav-link, .navbar-nav .dropdown-item, .navbar .nav-link:hover, .navbar .nav-link:focus, .dropdown-menu a, .dropdown-menu .dropdown-item { text-decoration: none !important; } /* ── BS5 Migration: suppress default anchor underline on nav elements ── */ .navbar-nav a, .navbar-nav .nav-link, .navbar-nav .dropdown-item, .navbar .nav-link:hover, .navbar .nav-link:focus, .dropdown-menu a, .dropdown-menu .dropdown-item { text-decoration: none !important; } } /* ══════════════════════════════════════════════════════════════════════════════ MODERN MODAL / DIALOG — GLOBAL (both themes) ══════════════════════════════════════════════════════════════════════════════ */ /* ── Backdrop — frosted glass ── */ .modal-backdrop.in, .modal-backdrop.show { opacity: 0.55 !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; } /* ── Dialog positioning ── */ .modal-dialog { margin-top: 12vh !important; } /* ── Content card ── */ .modal-content { border: 1px solid rgba(0,0,0,0.08) !important; border-radius: 16px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08) !important; overflow: hidden !important; animation: ccModalIn 0.25s cubic-bezier(0.16,1,0.3,1) !important; } @keyframes ccModalIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── Header ── */ .modal-header { border-bottom: 1px solid rgba(0,0,0,0.06) !important; padding: 20px 24px 16px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } .modal-header .modal-title, .modal-header h4 { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important; font-size: 18px !important; font-weight: 650 !important; letter-spacing: -0.3px !important; margin: 0 !important; } .modal-header .btn-close { font-size: 22px !important; opacity: 0.5 !important; padding: 0 !important; margin: 0 !important; width: 32px !important; height: 32px !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: opacity 0.15s, background 0.15s !important; line-height: 1 !important; order: 2 !important; } .modal-header .close:hover { opacity: 1 !important; background: rgba(0,0,0,0.06) !important; } /* ── Body ── */ .modal-body { padding: 20px 24px !important; font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important; font-size: 14.5px !important; line-height: 1.6 !important; } /* ── Footer ── */ .modal-footer { border-top: 1px solid rgba(0,0,0,0.06) !important; padding: 14px 24px 20px !important; display: flex !important; justify-content: flex-end !important; gap: 10px !important; } .modal-footer .btn { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; padding: 9px 22px !important; border-radius: 10px !important; min-width: 80px !important; transition: all 0.15s cubic-bezier(0.16,1,0.3,1) !important; letter-spacing: 0 !important; } .modal-footer .btn-secondary { background: #f4f4f5 !important; border: 1px solid #e4e4e7 !important; color: #3f3f46 !important; } .modal-footer .btn-secondary:hover { background: #e4e4e7 !important; border-color: #d4d4d8 !important; color: #18181b !important; } .modal-footer .btn-primary { background: #7c3aed !important; border: 1px solid #7c3aed !important; color: #fff !important; box-shadow: 0 1px 3px rgba(124,58,237,0.3) !important; } .modal-footer .btn-primary:hover { background: #6d28d9 !important; border-color: #6d28d9 !important; box-shadow: 0 2px 8px rgba(124,58,237,0.4) !important; } /* Danger variant (e.g. delete/cancel confirmation) */ .modal-footer .btn-danger { background: #ef4444 !important; border: 1px solid #ef4444 !important; color: #fff !important; border-radius: 10px !important; box-shadow: 0 1px 3px rgba(239,68,68,0.3) !important; } .modal-footer .btn-danger:hover { background: #dc2626 !important; border-color: #dc2626 !important; box-shadow: 0 2px 8px rgba(239,68,68,0.4) !important; } /* Success variant */ .modal-footer .btn-success { background: #10b981 !important; border: 1px solid #10b981 !important; color: #fff !important; border-radius: 10px !important; box-shadow: 0 1px 3px rgba(16,185,129,0.3) !important; } .modal-footer .btn-success:hover { background: #059669 !important; border-color: #059669 !important; } /* ══════════════════════════════════════════════════════════════════════════════ MODERN MODAL — DARK MODE ══════════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .modal-backdrop.in, .modal-backdrop.show { opacity: 0.7 !important; background-color: #000 !important; } html[data-theme="dark"] .modal-content { background: #1a1a1a !important; background-color: #1a1a1a !important; border: 1px solid #2a2a2a !important; box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(167,139,250,0.08) !important; } html[data-theme="dark"] .modal-header { border-bottom-color: #2a2a2a !important; } html[data-theme="dark"] .modal-header .modal-title, html[data-theme="dark"] .modal-header h4 { color: #f5f5f5 !important; } html[data-theme="dark"] .modal-header .btn-close { color: #a3a3a3 !important; text-shadow: none !important; } html[data-theme="dark"] .modal-header .close:hover { color: #ffffff !important; background: rgba(255,255,255,0.08) !important; } html[data-theme="dark"] .modal-body { color: #d4d4d4 !important; } html[data-theme="dark"] .modal-footer { border-top-color: #2a2a2a !important; } html[data-theme="dark"] .modal-footer .btn-secondary { background: #262626 !important; border-color: #404040 !important; color: #d4d4d4 !important; } html[data-theme="dark"] .modal-footer .btn-secondary:hover { background: #333333 !important; border-color: #525252 !important; color: #ffffff !important; } html[data-theme="dark"] .modal-footer .btn-primary { background: #7c3aed !important; border-color: #7c3aed !important; color: #fff !important; } html[data-theme="dark"] .modal-footer .btn-primary:hover { background: #6d28d9 !important; border-color: #6d28d9 !important; } /* ══════════════════════════════════════════════════════════════════════════════ DARK MODE — GLOBAL OVERRIDES (Custom.css) ══════════════════════════════════════════════════════════════════════════════ This section counteracts every white-background rule in portalbasictheme.css and D365 React components (Fluent UI / Griffel CSS-in-JS).card Uses html[data-theme="dark"] prefix for maximum specificity.card ══════════════════════════════════════════════════════════════════════════════ */ /* ── 1. portalbasictheme.css exact counterparts ──────────────────────────── */ html[data-theme="dark"] body { background-color: #0a0a0a !important; color: #d4d4d4 !important; } html[data-theme="dark"] legend { color: #d4d4d4 !important; } html[data-theme="dark"] .breadcrumb { background-color: transparent !important; } html[data-theme="dark"] .breadcrumb > li a { color: #60a5fa !important; } html[data-theme="dark"] .breadcrumb > .active { color: #d4d4d4 !important; } html[data-theme="dark"] .btn-secondary { color: #d4d4d4 !important; background-color: #262626 !important; border-color: #404040 !important; } html[data-theme="dark"] .btn-secondary:hover, html[data-theme="dark"] .btn-secondary:active, html[data-theme="dark"] .btn-secondary.active, html[data-theme="dark"] .btn-secondary:focus { color: #ffffff !important; background-color: #333333 !important; border-color: #525252 !important; } html[data-theme="dark"] .btn-primary { color: #0a0a0a !important; background-color: #a78bfa !important; border-color: #a78bfa !important; } html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .btn-primary:active, html[data-theme="dark"] .btn-primary:focus { color: #0a0a0a !important; background-color: #8b5cf6 !important; border-color: #8b5cf6 !important; } html[data-theme="dark"] .btn-success { color: #0a0a0a !important; background-color: #10b981 !important; border-color: #10b981 !important; } html[data-theme="dark"] .btn-danger { color: #0a0a0a !important; background-color: #ef4444 !important; border-color: #ef4444 !important; } html[data-theme="dark"] .btn { background-color: #262626 !important; border-color: #404040 !important; color: #d4d4d4 !important; } html[data-theme="dark"] .btn:hover { background-color: #333333 !important; border-color: #525252 !important; color: #ffffff !important; } html[data-theme="dark"] .crmEntityFormView, html[data-theme="dark"] .entitylist, html[data-theme="dark"] .popover-content { background-color: #0a0a0a !important; color: #d4d4d4 !important; border-color: #333333 !important; } html[data-theme="dark"] .modal-content { background-color: #1a1a1a !important; color: #d4d4d4 !important; border-color: #333333 !important; } html[data-theme="dark"] .card> .card-body { background-color: #1a1a1a !important; color: #d4d4d4 !important; } html[data-theme="dark"] .card> .card-header { background-color: #141414 !important; color: #d4d4d4 !important; border-color: #333333 !important; } html[data-theme="dark"] .form-control:not(.case-deflection) { background-color: #262626 !important; color: #ffffff !important; border-color: #404040 !important; } html[data-theme="dark"] input:not(.ms-SearchBox-field):not([role="searchbox"]):not([id^="SearchBox"]):not(.kb-search-input):not(.case-deflection) { background-color: #262626 !important; color: #ffffff !important; } html[data-theme="dark"] .bootstrap-datetimepicker-widget { background-color: #1a1a1a !important; color: #d4d4d4 !important; } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: #1f1f1f !important; } html[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: #262626 !important; } html[data-theme="dark"] .table-hover > tbody > tr:hover > td { background-color: #262626 !important; color: #ffffff !important; } html[data-theme="dark"] .table-hover > tbody > tr:hover > td * { color: #ffffff !important; } html[data-theme="dark"] .table > tbody > tr:hover { background-color: #262626 !important; } html[data-theme="dark"] .table > tbody > tr:hover > td { background-color: #262626 !important; color: #ffffff !important; } html[data-theme="dark"] .table > tbody > tr:hover > td * { color: #ffffff !important; } html[data-theme="dark"] .table > thead > tr.info > td, html[data-theme="dark"] .table > thead > tr.info > th, html[data-theme="dark"] .table > tbody > tr.info > td, html[data-theme="dark"] .table > tbody > tr.info > th { background-color: #1a1a1a !important; } html[data-theme="dark"] ::placeholder { color: #666666 !important; } html[data-theme="dark"] .help-block { color: #a3a3a3 !important; } html[data-theme="dark"] .msos-selection-container, html[data-theme="dark"] .msos-container, html[data-theme="dark"] .msos-caret-container, html[data-theme="dark"] .msos-action-buttons:hover { color: #d4d4d4 !important; background: #262626 !important; } html[data-theme="dark"] .msos-option-selected, html[data-theme="dark"] .msos-selected-display-item, html[data-theme="dark"] .msos-quick-delete, html[data-theme="dark"] .msos-quick-delete:hover { background: #333333 !important; } html[data-theme="dark"] .msos-label, html[data-theme="dark"] .msos-quick-delete { color: #d4d4d4 !important; } html[data-theme="dark"] .nav-tabs > li > a:hover, html[data-theme="dark"] .nav-tabs > li > a:focus { background-color: #1a1a1a !important; color: #818cf8 !important; } html[data-theme="dark"] .nav .open .dropdown-menu { background-color: #262626 !important; } html[data-theme="dark"] .nav .open .dropdown-menu > li > a { color: #818cf8 !important; } html[data-theme="dark"] .nav .open .dropdown-menu > li > a:hover { background-color: #333333 !important; color: #ffffff !important; } html[data-theme="dark"] .nav > li > a:hover, html[data-theme="dark"] .nav > li > a:focus { background-color: #1a1a1a !important; } html[data-theme="dark"] .search-results .highlight { color: #ffffff !important; } html[data-theme="dark"] a { color: #818cf8 !important; } html[data-theme="dark"] a:hover, html[data-theme="dark"] a:focus { color: #a78bfa !important; } /* ── 2. Nuclear panel / card / container overrides ───────────────────────── */ html[data-theme="dark"] .card, html[data-theme="dark"] .card, html[data-theme="dark"] .panel-primary, html[data-theme="dark"] .panel-info, html[data-theme="dark"] .panel-success, html[data-theme="dark"] .panel-warning, html[data-theme="dark"] .panel-danger { background: #1a1a1a !important; background-color: #1a1a1a !important; border-color: #333333 !important; color: #d4d4d4 !important; } html[data-theme="dark"] .card-body, html[data-theme="dark"] .card-footer { background: #1a1a1a !important; background-color: #1a1a1a !important; color: #d4d4d4 !important; } html[data-theme="dark"] .card-header { background: #141414 !important; background-color: #141414 !important; color: #d4d4d4 !important; border-color: #333333 !important; } html[data-theme="dark"] .card { background: #1a1a1a !important; background-color: #1a1a1a !important; border-color: #333333 !important; color: #d4d4d4 !important; } html[data-theme="dark"] .card-body { background: #1a1a1a !important; color: #d4d4d4 !important; } html[data-theme="dark"] .card-header { background: #141414 !important; color: #d4d4d4 !important; border-color: #333333 !important; } html[data-theme="dark"] .card-footer { background: #1a1a1a !important; color: #737373 !important; border-color: #333333 !important; } /* ── 3. Entity list / Entity grid ────────────────────────────────────────── */ html[data-theme="dark"] #content_form { background-color: #0a0a0a !important; color: #d4d4d4 !important; } html[data-theme="dark"] [id^="EntityList"] { background-color: #0a0a0a !important; color: #d4d4d4 !important; } html[data-theme="dark"] .entity-grid { background-color: #0a0a0a !important; color: #d4d4d4 !important; } html[data-theme="dark"] .entity-grid .view-grid, html[data-theme="dark"] .view-grid { background-color: #1a1a1a !important; border-color: #333333 !important; border-radius: 12px !important; overflow: hidden !important; } html[data-theme="dark"] .entity-grid .view-grid > table, html[data-theme="dark"] .view-grid > table, html[data-theme="dark"] .entity-grid table.table { color: #d4d4d4 !important; background-color: #1a1a1a !important; } html[data-theme="dark"] .entity-grid table thead, html[data-theme="dark"] .view-grid table thead { background-color: #141414 !important; } html[data-theme="dark"] .entity-grid table thead tr th, html[data-theme="dark"] .view-grid table thead tr th, html[data-theme="dark"] .entity-grid table > thead > tr > th { background-color: #141414 !important; border-color: #333333 !important; border-bottom-color: #333333 !important; color: #a3a3a3 !important; } html[data-theme="dark"] .entity-grid table thead th a, html[data-theme="dark"] .view-grid table thead th a { color: #a3a3a3 !important; text-decoration: none !important; } html[data-theme="dark"] .entity-grid table thead th a:hover, html[data-theme="dark"] .view-grid table thead th a:hover { color: #ffffff !important; } html[data-theme="dark"] .entity-grid table thead th .sort-icon, html[data-theme="dark"] .entity-grid table thead th .bi { color: #737373 !important; } html[data-theme="dark"] .entity-grid table tbody tr, html[data-theme="dark"] .view-grid table tbody tr { background-color: #1a1a1a !important; } html[data-theme="dark"] .entity-grid table tbody tr:nth-child(even), html[data-theme="dark"] .view-grid table tbody tr:nth-child(even) { background-color: #1a1a1a !important; } html[data-theme="dark"] .entity-grid table tbody tr:nth-child(odd), html[data-theme="dark"] .view-grid table tbody tr:nth-child(odd) { background-color: #1f1f1f !important; } html[data-theme="dark"] .entity-grid table tbody tr:hover, html[data-theme="dark"] .view-grid table tbody tr:hover { background-color: #262626 !important; } html[data-theme="dark"] .entity-grid table tbody tr:hover td, html[data-theme="dark"] .view-grid table tbody tr:hover td { background-color: #262626 !important; color: #ffffff !important; } html[data-theme="dark"] .entity-grid table tbody tr:hover td *, html[data-theme="dark"] .view-grid table tbody tr:hover td * { color: #ffffff !important; } html[data-theme="dark"] .entity-grid table tbody tr td, html[data-theme="dark"] .view-grid table tbody tr td, html[data-theme="dark"] .entity-grid table > tbody > tr > td { border-color: #2a2a2a !important; border-top-color: #2a2a2a !important; color: #e5e5e5 !important; background-color: transparent !important; } html[data-theme="dark"] .entity-grid table tbody tr:hover td, html[data-theme="dark"] .view-grid table tbody tr:hover td { color: #ffffff !important; background-color: #262626 !important; } html[data-theme="dark"] .entity-grid table tbody td span, html[data-theme="dark"] .view-grid table tbody td span { color: #e5e5e5 !important; } html[data-theme="dark"] .entity-grid table tbody tr:hover td span, html[data-theme="dark"] .view-grid table tbody tr:hover td span { color: #ffffff !important; } html[data-theme="dark"] .entity-grid table tbody td a, html[data-theme="dark"] .view-grid table tbody td a { color: #60a5fa !important; } html[data-theme="dark"] .entity-grid table tbody td a:hover, html[data-theme="dark"] .view-grid table tbody td a:hover { color: #93bbfd !important; } html[data-theme="dark"] .entity-grid .view-toolbar, html[data-theme="dark"] .view-toolbar, html[data-theme="dark"] .entity-grid-toolbar { background: transparent !important; color: #d4d4d4 !important; } html[data-theme="dark"] .entity-grid .view-toolbar .btn-secondary, html[data-theme="dark"] .view-toolbar .btn-secondary, html[data-theme="dark"] .entity-grid .view-toolbar .btn, html[data-theme="dark"] .view-toolbar .btn { background: #262626 !important; border-color: #404040 !important; color: #d4d4d4 !important; } html[data-theme="dark"] .entity-grid .view-toolbar .btn:hover, html[data-theme="dark"] .view-toolbar .btn:hover { background: #333333 !important; border-color: #525252 !important; color: #ffffff !important; } html[data-theme="dark"] .entity-grid .view-toolbar .btn-group .btn, html[data-theme="dark"] .view-toolbar .btn-group .btn { background: #262626 !important; border-color: #404040 !important; color: #d4d4d4 !important; } html[data-theme="dark"] .entity-grid .view-toolbar .btn-group .btn:hover { background: #333333 !important; color: #ffffff !important; } html[data-theme="dark"] .entity-grid .entity-grid-search input, html[data-theme="dark"] .entity-grid-search input, html[data-theme="dark"] .entity-grid .entity-grid-search .form-control { background: #262626 !important; border-color: #333333 !important; color: #ffffff !important; } html[data-theme="dark"] .entity-grid-search input::placeholder { color: #525252 !important; } html[data-theme="dark"] .entity-grid-search .input-group-btn .btn { background: #262626 !important; border-color: #333333 !important; color: #a3a3a3 !important; } html[data-theme="dark"] .entity-grid-search .input-group-btn .btn:hover { color: #a78bfa !important; } html[data-theme="dark"] .entity-grid .view-pagination, html[data-theme="dark"] .view-pagination { background: transparent !important; } html[data-theme="dark"] .entity-grid .view-empty, html[data-theme="dark"] .view-empty { color: #737373 !important; background: transparent !important; } html[data-theme="dark"] .entity-grid td .dropdown .btn, html[data-theme="dark"] .entity-grid .grid-actions .btn { background: transparent !important; border: none !important; color: #737373 !important; } html[data-theme="dark"] .entity-grid td .dropdown .btn:hover, html[data-theme="dark"] .entity-grid .grid-actions .btn:hover { color: #a78bfa !important; } html[data-theme="dark"] .entity-grid .view-select, html[data-theme="dark"] .view-toolbar .view-select { color: #d4d4d4 !important; } html[data-theme="dark"] .entity-grid .view-select .btn, html[data-theme="dark"] .view-toolbar .view-select .btn { background: #262626 !important; border-color: #404040 !important; color: #d4d4d4 !important; } /* ── 4. NUCLEAR: Force EVERY element in the content area transparent ──── */ /* .wrapper-body is the outer content wrapper from Layout 1 Column.card This catches ALL React/Griffel/Fluent UI components regardless of class name, DOM nesting, or whether they're inside .entitylist or a sibling of it (like the AI Insights panel). */ html[data-theme="dark"] .wrapper-body div:not([class*="kb-cd-hero"]):not([class*="kb-cd-hero__"]):not([class*="kb-ad-hero"]):not([class*="kb-ad-hero__"]), html[data-theme="dark"] .wrapper-body section:not([class*="kb-cd-hero"]):not([class*="kb-cd-body"]):not([class*="kb-ad-hero"]):not([class*="kb-ad-layout"]), html[data-theme="dark"] .wrapper-body article, html[data-theme="dark"] .wrapper-body aside, html[data-theme="dark"] .wrapper-body figure, html[data-theme="dark"] #mainContent div:not([class*="kb-cd-hero"]):not([class*="kb-cd-hero__"]):not([class*="kb-ad-hero"]):not([class*="kb-ad-hero__"]), html[data-theme="dark"] #mainContent section:not([class*="kb-cd-hero"]):not([class*="kb-cd-body"]):not([class*="kb-ad-hero"]):not([class*="kb-ad-layout"]), html[data-theme="dark"] #mainContent span:not(.atq-status-badge):not(.label) { background: transparent !important; background-color: transparent !important; } /* Also catch React Portals — body-level children that aren't header/footer/nav */ html[data-theme="dark"] body > div:not([class*="navbar"]):not([class*="footer"]):not([id*="cookie"]):not([class*="modal-backdrop"]) { background: transparent !important; background-color: transparent !important; } html[data-theme="dark"] body > div:not([class*="navbar"]):not([class*="footer"]) > div { background: transparent !important; background-color: transparent !important; } /* ── 5. Re-apply dark surfaces that NEED a background ────────────────── */ /* These rules have higher specificity than §4 because they add classes */ /* Profile page — Marketing Options & Actions divs (use 2x ID to beat §4 nuclear) */ html[data-theme="dark"] #mainContent #ContentContainer_MainContent_MainContent_ContentBottom_MarketingOptionsPanel { background: var(--pp-surface) !important; background-color: var(--pp-surface) !important; } /* Actions wrapper has no ID, so use double-ID + descendant path */ html[data-theme="dark"] #mainContent .col-lg-8 > div:last-of-type:has(.actions) { background: var(--pp-surface) !important; background-color: var(--pp-surface) !important; } html[data-theme="dark"] .wrapper-body .view-grid, html[data-theme="dark"] #mainContent .view-grid { background: #1a1a1a !important; background-color: #1a1a1a !important; } html[data-theme="dark"] .wrapper-body .entity-grid-search input, html[data-theme="dark"] .wrapper-body .entity-grid-search .btn { background: #262626 !important; } html[data-theme="dark"] .wrapper-body .atq-grid-card { background: #1a1a1a !important; background-color: #1a1a1a !important; } html[data-theme="dark"] .wrapper-body .atq-col-picker-panel { background: #262626 !important; background-color: #262626 !important; } html[data-theme="dark"] .wrapper-body .dropdown-menu { background: #262626 !important; background-color: #262626 !important; } html[data-theme="dark"] .wrapper-body .modal-content { background: #1a1a1a !important; background-color: #1a1a1a !important; } html[data-theme="dark"] .wrapper-body .tooltip-inner { background: #333333 !important; } html[data-theme="dark"] .wrapper-body .popover { background: #1a1a1a !important; } /* Fluent UI components inside wrapper-body — need real backgrounds after §4 nuke */ html[data-theme="dark"] .wrapper-body [role="grid"], html[data-theme="dark"] #mainContent [role="grid"] { background: #1a1a1a !important; background-color: #1a1a1a !important; } html[data-theme="dark"] .wrapper-body .ms-DetailsRow, html[data-theme="dark"] .wrapper-body [role="row"]:not(:hover) { background: #1a1a1a !important; background-color: #1a1a1a !important; } html[data-theme="dark"] .wrapper-body .ms-DetailsHeader, html[data-theme="dark"] .wrapper-body [role="columnheader"] { background: #111111 !important; background-color: #111111 !important; } html[data-theme="dark"] .wrapper-body .ms-SearchBox, html[data-theme="dark"] .wrapper-body [role="search"]:not(.kb-search-bar), html[data-theme="dark"] .wrapper-body div[class*="ms-SearchBox"] { background: #1a1a1a !important; background-color: #1a1a1a !important; border: 1px solid #333 !important; border-radius: 4px !important; } /* SearchBox input should be transparent (wrapper provides bg) */ html[data-theme="dark"] .wrapper-body .ms-SearchBox input, html[data-theme="dark"] .wrapper-body .ms-SearchBox-field, html[data-theme="dark"] .wrapper-body input[id^="SearchBox"], html[data-theme="dark"] .wrapper-body input[role="searchbox"] { background: transparent !important; background-color: transparent !important; border: none !important; } /* Fluent UI Callout / Dropdown panel (React Portal — body-level, outside wrapper-body) */ /* Fluent Dropdown trigger */ html[data-theme="dark"] .wrapper-body .ms-Dropdown, html[data-theme="dark"] .wrapper-body div[class*="ms-Dropdown"]:not(.ms-Dropdown-callout) { background: #262626 !important; background-color: #262626 !important; border-color: #404040 !important; } html[data-theme="dark"] .ms-Callout, html[data-theme="dark"] .ms-Callout-main, html[data-theme="dark"] .ms-Dropdown-callout, html[data-theme="dark"] .ms-Panel-main, html[data-theme="dark"] .ms-Layer > div { background: #1e1e1e !important; background-color: #1e1e1e !important; border-color: #333 !important; } html[data-theme="dark"] .ms-Callout *, html[data-theme="dark"] .ms-Dropdown-callout * { color: #d4d4d4 !important; } html[data-theme="dark"] [role="option"], html[data-theme="dark"] .ms-Dropdown-item { background: transparent !important; color: #d4d4d4 !important; } html[data-theme="dark"] [role="option"]:hover, html[data-theme="dark"] .ms-Dropdown-item:hover { background: #262626 !important; background-color: #262626 !important; color: #fff !important; } html[data-theme="dark"] [role="option"][aria-selected="true"] { background: rgba(167,139,250,0.15) !important; color: #a78bfa !important; } /* Buttons inside wrapper-body need visible background */ html[data-theme="dark"] .wrapper-body .btn { background: #262626 !important; background-color: #262626 !important; border-color: #404040 !important; color: #d4d4d4 !important; } html[data-theme="dark"] .wrapper-body .btn:hover { background: #333333 !important; background-color: #333333 !important; color: #ffffff !important; } html[data-theme="dark"] .wrapper-body .btn-primary { background: #7c3aed !important; background-color: #7c3aed !important; border-color: #7c3aed !important; color: #ffffff !important; } html[data-theme="dark"] .wrapper-body .btn-primary:hover { background: #6d28d9 !important; background-color: #6d28d9 !important; } /* Form fields — need visible dark background, not transparent */ html[data-theme="dark"] .wrapper-body .form-control:not(.case-deflection) { background: #262626 !important; background-color: #262626 !important; border-color: #404040 !important; color: #ffffff !important; } html[data-theme="dark"] .wrapper-body textarea { background: #262626 !important; background-color: #262626 !important; border-color: #404040 !important; color: #ffffff !important; } html[data-theme="dark"] .wrapper-body select { background: #262626 !important; background-color: #262626 !important; border-color: #404040 !important; color: #ffffff !important; } html[data-theme="dark"] .wrapper-body input:not(.ms-SearchBox-field):not([role="searchbox"]):not([id^="SearchBox"]):not(.kb-search-input):not(.case-deflection) { background: #262626 !important; background-color: #262626 !important; color: #ffffff !important; } /* Tables — rows and cells need visible backgrounds */ html[data-theme="dark"] .wrapper-body table { background: #1a1a1a !important; background-color: #1a1a1a !important; } html[data-theme="dark"] .wrapper-body table thead th { background: #141414 !important; background-color: #141414 !important; color: #a3a3a3 !important; } html[data-theme="dark"] .wrapper-body table tbody tr { background: #1a1a1a !important; background-color: #1a1a1a !important; } html[data-theme="dark"] .wrapper-body table tbody tr:nth-child(odd) { background: #1f1f1f !important; background-color: #1f1f1f !important; } html[data-theme="dark"] .wrapper-body table tbody tr:hover { background: #262626 !important; background-color: #262626 !important; } html[data-theme="dark"] .wrapper-body table tbody tr:hover td { background: inherit !important; background-color: inherit !important; color: #ffffff !important; } html[data-theme="dark"] .wrapper-body table tbody td { color: #e5e5e5 !important; border-color: #2a2a2a !important; } html[data-theme="dark"] .wrapper-body table tbody td a { color: #818cf8 !important; } html[data-theme="dark"] .wrapper-body table tbody td a:hover { color: #a78bfa !important; } /* Case detail / Edit case — entity form containers */ html[data-theme="dark"] .wrapper-body .crmEntityFormView { background: #0a0a0a !important; background-color: #0a0a0a !important; color: #d4d4d4 !important; } html[data-theme="dark"] .wrapper-body .tab-content { background: transparent !important; } html[data-theme="dark"] .wrapper-body .tab-pane { background: transparent !important; } html[data-theme="dark"] .wrapper-body .section { background: transparent !important; color: #d4d4d4 !important; } html[data-theme="dark"] .wrapper-body .cell { background: transparent !important; color: #d4d4d4 !important; } html[data-theme="dark"] .wrapper-body .info { color: #d4d4d4 !important; } html[data-theme="dark"] .wrapper-body .control { color: #d4d4d4 !important; } html[data-theme="dark"] .wrapper-body .row { color: #d4d4d4 !important; } html[data-theme="dark"] .wrapper-body .text-muted { color: #737373 !important; } html[data-theme="dark"] .wrapper-body .alert { background: #1a1a1a !important; border-color: #333333 !important; color: #d4d4d4 !important; } html[data-theme="dark"] .wrapper-body .alert-info { background: rgba(96,165,250,0.1) !important; border-color: rgba(96,165,250,0.3) !important; color: #60a5fa !important; } html[data-theme="dark"] .wrapper-body .alert-warning { background: rgba(245,158,11,0.1) !important; border-color: rgba(245,158,11,0.3) !important; color: #f59e0b !important; } html[data-theme="dark"] .wrapper-body .alert-danger { background: rgba(239,68,68,0.1) !important; border-color: rgba(239,68,68,0.3) !important; color: #ef4444 !important; } html[data-theme="dark"] .wrapper-body .alert-success { background: rgba(16,185,129,0.1) !important; border-color: rgba(16,185,129,0.3) !important; color: #10b981 !important; } /* Timeline / notes / activity cards on case detail pages */ html[data-theme="dark"] .wrapper-body .notes { background: transparent !important; color: #d4d4d4 !important; } html[data-theme="dark"] .wrapper-body .note { background: #1a1a1a !important; border-color: #333333 !important; color: #d4d4d4 !important; } html[data-theme="dark"] .wrapper-body .activity-card, html[data-theme="dark"] .wrapper-body .timeline-item { background: #1a1a1a !important; border-color: #333333 !important; color: #d4d4d4 !important; } html[data-theme="dark"] .wrapper-body .ec-email-card { background: #1a1a1a !important; border-color: #333333 !important; color: #d4d4d4 !important; } /* ── 5b. Contact Us page — re-apply dark surfaces after §4 nuclear ──── */ /* CSS fallback only. Primary dark-mode enforcement is via JS inline styles (page-scoped JS) which use element.style.setProperty with !important — inline !important beats ALL selector-based rules. */ html[data-theme="dark"] #mainContent .atqc-hero { background: linear-gradient(180deg, #0a0f1e 0%, #111827 50%, #0f172a 100%) !important; } html[data-theme="dark"] #mainContent .atqc-stats { background: #0a0a0a !important; background-color: #0a0a0a !important; } html[data-theme="dark"] #mainContent .atqc-channels { background: #111111 !important; background-color: #111111 !important; } html[data-theme="dark"] #mainContent .atqc-channel { background: #1a1a1a !important; background-color: #1a1a1a !important; border-color: #333333 !important; } html[data-theme="dark"] #mainContent .atqc-form-section { background: #0a0a0a !important; background-color: #0a0a0a !important; } html[data-theme="dark"] #mainContent .atqc-form-wrapper { background: #1e1e1e !important; background-color: #1e1e1e !important; border-color: #444444 !important; } /* ── 6. Label badges ─────────────────────────────────────────────────── */ html[data-theme="dark"] .bg-info { background: rgba(96,165,250,0.15) !important; color: #60a5fa !important; } html[data-theme="dark"] .bg-success { background: rgba(16,185,129,0.15) !important; color: #10b981 !important; } html[data-theme="dark"] .bg-warning { background: rgba(245,158,11,0.15) !important; color: #f59e0b !important; } html[data-theme="dark"] .label-danger { background: rgba(239,68,68,0.15) !important; color: #ef4444 !important; } html[data-theme="dark"] .bg-primary { background: rgba(167,139,250,0.15) !important; color: #a78bfa !important; } /* ── 7. List group (generic) ─────────────────────────────────────────── */ html[data-theme="dark"] .list-group-item { background: #1a1a1a !important; border-color: #333333 !important; color: #d4d4d4 !important; } html[data-theme="dark"] .list-group-item:hover, html[data-theme="dark"] a.list-group-item:hover { background: #262626 !important; color: #ffffff !important; } /* ── 8. Dropdown menus (global) ──────────────────────────────────────── */ html[data-theme="dark"] .dropdown-menu { background-color: #262626 !important; border-color: #404040 !important; } html[data-theme="dark"] .dropdown-menu > li > a { color: #d4d4d4 !important; } html[data-theme="dark"] .dropdown-menu > li > a:hover, html[data-theme="dark"] .dropdown-menu > li > a:focus { background-color: #333333 !important; color: #ffffff !important; } html[data-theme="dark"] .dropdown-menu > .active > a { background-color: #7c3aed !important; color: #ffffff !important; } html[data-theme="dark"] .dropdown-menu .dropdown-divider { background-color: #404040 !important; } /* ── 9. Generic text / SVG / border colours ──────────────────────────── */ html[data-theme="dark"] p, html[data-theme="dark"] span:not(.atq-status-badge):not(.label), html[data-theme="dark"] label, html[data-theme="dark"] small, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: #e5e5e5 !important; } html[data-theme="dark"] hr { border-color: #333333 !important; } html[data-theme="dark"] .table, html[data-theme="dark"] .table > thead > tr > th, html[data-theme="dark"] .table > tbody > tr > td { border-color: #2a2a2a !important; } html[data-theme="dark"] svg:not(.atq-status-badge svg) { color: #a3a3a3 !important; } /* ── Appended: Focus, BS5 Fixes, Layout (from §14, BS5 Fix, §12) ── */ /* ═══════════════════════════════════════════════════════════════ §14 FOCUS-VISIBLE — global keyboard focus rings Apple-inspired focus ring: 2px offset ring using the page's accent colour. Only appears on keyboard navigation (:focus-visible), never on mouse/touch clicks.card ═══════════════════════════════════════════════════════════════ */ /* ── Light mode focus ring ── */ :focus-visible { outline: 2px solid rgba(37, 99, 235, 0.65) !important; outline-offset: 2px !important; border-radius: inherit; } /* Buttons + cards — slightly thicker ring for larger targets */ .btn:focus-visible, .list-group-item:focus-visible, .atq-profile-action:focus-visible, .nav-tabs > li > a:focus-visible, .nav > li > a:focus-visible, .breadcrumb > li > a:focus-visible { outline-width: 2.5px !important; outline-offset: 3px !important; } /* Form inputs — inset ring matches existing :focus box-shadow convention */ input:focus-visible, textarea:focus-visible, select:focus-visible, .form-control:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important; border-color: rgba(37, 99, 235, 0.5) !important; } /* ── Dark mode focus ring — periwinkle accent ── */ html[data-theme="dark"] :focus-visible { outline-color: rgba(79, 124, 255, 0.7) !important; } html[data-theme="dark"] input:focus-visible, html[data-theme="dark"] textarea:focus-visible, html[data-theme="dark"] select:focus-visible, html[data-theme="dark"] .form-control:focus-visible { box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.25) !important; border-color: rgba(79, 124, 255, 0.5) !important; } /* ════════════════════════════════════════ BS5 Migration Fix — appended by fix2.py ════════════════════════════════════════ */ /* Kill underline on all portal nav anchors */ .navbar a, .navbar a:hover, .navbar a:focus, .navbar a:visited, .navbar-nav a, .navbar-nav a:hover, .navbar-nav a:focus, .nav-link, .nav-link:hover, .nav-link:focus, .dropdown-menu a, .dropdown-menu a:hover, .dropdown-menu a:focus, .dropdown-item, .dropdown-item:hover, .dropdown-item:focus, .nav a, .nav a:hover { text-decoration: none !important; } /* BS5 dropdown .show (replaces .open) */ .show > .dropdown-menu { display: block !important; } /* BS5 modal backdrop */ .modal-backdrop.show { opacity: 0.5; } /* Dark mode nav */ [data-theme="dark"] .navbar a, [data-theme="dark"] .navbar a:hover, [data-theme="dark"] .dropdown-menu a, [data-theme="dark"] .dropdown-item { text-decoration: none !important; background: transparent; } /* Dark mode: prevent black box on nav hover */ [data-theme="dark"] .navbar-nav > li > a:hover, [data-theme="dark"] .navbar-nav > li > a:focus { background: rgba(255,255,255,0.06) !important; } /* ═══════════════════════════════════════════════════════════════ §12 Portal-Wide Layout Fixes ── Actual Power Pages DOM (Layout 1 Column template): .wrapper-body > .container[role="main"] > .row > .col-lg-12 > #mainContent > [page content] ── My Support: strip max-width from outer container chain so .atq-sp-page fills the viewport edge-to-edge. Uses direct-child (>) so inner entity form containers are NOT touched — only the 3 ancestors above #mainContent. ── Profile + Manage: orbs are on .container::before/::after with left:-280px / right:-260px. Clip at body level. ═══════════════════════════════════════════════════════════════ */ /* Strip Bootstrap container's max-width cap — ONLY the direct outer chain above #mainContent, scoped to My Support page only. .container[role="main"] is the Bootstrap container in Layout 1 Column. */ body:has(.atq-sp-page) .wrapper-body { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } body:has(.atq-sp-page) .wrapper-body > .container { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } body:has(.atq-sp-page) .wrapper-body > .container > .row { margin-left: 0 !important; margin-right: 0 !important; } body:has(.atq-sp-page) .wrapper-body > .container > .row > .col-lg-12, body:has(.atq-sp-page) .wrapper-body > .container > .row > .col-md-12 { padding-left: 0 !important; padding-right: 0 !important; } /* Hide default Power Pages page title — My Support has its own heading */ body:has(.atq-sp-page) .page-heading { display: none !important; } /* Profile + Manage — strip the outer container max-width too so the body gradient/background fills edge-to-edge. The inner .row:has(.profile-info) still self-centers at 1040px, so content layout is unaffected. */ body:has(.profile-info) .wrapper-body > .container, body:has(.atq-manage-sentinel) .wrapper-body > .container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Outer container strip for Create Case and Edit Case */ body:has(.cc-wizard-wrap) .wrapper-body > .container, body:has(.ec-header) .wrapper-body > .container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Dark mode — clip overflowing animated orbs / gradients on ALL pages. overflow-x:clip (NOT hidden) clips without creating a scroll container, so position:sticky on sidebar and fixed nav still works. */ html[data-theme="dark"] body:has(.atq-sp-page), html[data-theme="dark"] body:has(.profile-info), html[data-theme="dark"] body:has(.atq-manage-sentinel), html[data-theme="dark"] body:has(.cc-wizard-wrap), html[data-theme="dark"] body:has(.ec-header) { overflow-x: clip !important; } /* Create Case (Step 3) — upload helper text contrast fix. Bootstrap's .table-info applies dark text; force readable text for this exact portal upload block in dark theme. */ html[data-theme="dark"] #mainContent .cc-wizard-wrap .file-cell.cell .table-info, html[data-theme="dark"] #mainContent .cc-wizard-wrap .file-cell.cell .table-info *, html[data-theme="dark"] #mainContent .cc-wizard-wrap .file-cell.cell #NewAttachFileLabel { color: #e7edf7 !important; -webkit-text-fill-color: #e7edf7 !important; background: transparent !important; background-color: transparent !important; } /* Home (dark mode) — force CTA text contrast. This sits in Custom.css so it reliably wins over global dark anchor rules. */ html[data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn, html[data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn:visited, html[data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn:hover, html[data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn:focus, html[data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn:active, [data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn, [data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn:visited, [data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn:hover, [data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn:focus, [data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn:active { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; } html[data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn *, [data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; } html[data-theme="dark"] body:has(.atq2-help-section) a.atq2-btn--outline, html[data-theme="dark"] body:has(.atq2-help-section) a.atq2-btn--outline:visited, html[data-theme="dark"] body:has(.atq2-help-section) a.atq2-btn--outline:hover, html[data-theme="dark"] body:has(.atq2-help-section) a.atq2-btn--outline:focus, [data-theme="dark"] body:has(.atq2-help-section) a.atq2-btn--outline, [data-theme="dark"] body:has(.atq2-help-section) a.atq2-btn--outline:visited, [data-theme="dark"] body:has(.atq2-help-section) a.atq2-btn--outline:hover, [data-theme="dark"] body:has(.atq2-help-section) a.atq2-btn--outline:focus { color: #eff6ff !important; -webkit-text-fill-color: #eff6ff !important; border-color: rgba(191, 219, 254, 0.62) !important; opacity: 1 !important; }