/* Smarthms HMS - Reset WP styles for our app */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); #bramedix-root { font-family: 'Inter', system-ui, -apple-system, sans-serif; position: fixed; inset: 0; z-index: 999999; overflow: hidden; background: #f8fafc; } #bramedix-root *, #bramedix-root *::before, #bramedix-root *::after { font-family: inherit; } /* Hide WP chrome entirely */ #wpadminbar, #adminmenuwrap, #adminmenuback, #adminmenushadow { display: none !important; } html.wp-toolbar { padding-top: 0 !important; } body.admin-bar { margin-top: 0 !important; padding-top: 0 !important; } *, *::before, *::after { box-sizing: border-box; } /* ── GLOBAL MOBILE FIXES ── */ @media (max-width: 768px) { /* Prevent iOS zoom on input focus */ input, select, textarea { font-size: 16px !important; } /* Kill ALL horizontal scroll everywhere */ #bramedix-root, #bramedix-root * { max-width: 100%; } /* Tables scroll horizontally within their container only */ table { max-width: 100%; table-layout: fixed; word-break: break-word; } /* Flex rows that could overflow */ .bramedix-flex-row { flex-wrap: wrap; } /* iOS safe area bottom padding for bottom nav */ .bramedix-bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); height: calc(64px + env(safe-area-inset-bottom, 0px)); } /* Bottom padding only needs to clear the fixed mobile nav. */ .bramedix-page-scroll { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; } } /* Keep all Smarthms scroll areas scrollable while hiding the visual scrollbar. */ html, body, #bramedix-root, #bramedix-root *, .bramedix-hide-scrollbar, .bramedix-page-scroll { scrollbar-width: none !important; -ms-overflow-style: none !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, #bramedix-root::-webkit-scrollbar, #bramedix-root *::-webkit-scrollbar, .bramedix-hide-scrollbar::-webkit-scrollbar, .bramedix-page-scroll::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } #bramedix-root *::-webkit-scrollbar-track, #bramedix-root *::-webkit-scrollbar-thumb, #bramedix-root *::-webkit-scrollbar-corner { display: none !important; background: transparent !important; } /* Lock page scrolling behind full-screen app overlays to prevent mobile/tablet flicker */ html, body { overflow: hidden !important; overscroll-behavior: none !important; height: 100%; } #bramedix-root { overscroll-behavior: none; } /* Smarthms dark mode toggle from the user menu. Dark mode is intentionally closer to the supplied premium dashboard sample: deep navy shell, softer elevated cards, readable text, and clear borders. */ .bramedix-dark-mode{ --brx-dm-bg:#0b1220; --brx-dm-surface:#0f1728; --brx-dm-surface-2:#121c31; --brx-dm-surface-3:#162238; --brx-dm-card:#101a2d; --brx-dm-card-2:#111b30; --brx-dm-border:#2d3a4f; --brx-dm-border-strong:#46546b; --brx-dm-text:#f8fafc; --brx-dm-muted:#c7d2e2; --brx-dm-subtle:#93a2ba; --brx-dm-accent:#60a5fa; --brx-dm-accent-2:#2f6fed; --brx-dm-danger:#f87171; --brx-dm-warning:#fbbf24; --brx-dm-shadow:none; } .bramedix-dark-mode, .bramedix-dark-mode .bramedix-page-scroll{ background:var(--brx-dm-bg)!important; background-color:var(--brx-dm-bg)!important; color:var(--brx-dm-text)!important; color-scheme:dark; } .bramedix-dark-mode *{scrollbar-color:#42506a var(--brx-dm-bg);} .bramedix-dark-mode ::selection{background:#2f6fed;color:#ffffff;} .bramedix-dark-mode a{color:#d8e2ef;} .bramedix-dark-mode p, .bramedix-dark-mode span, .bramedix-dark-mode small, .bramedix-dark-mode li, .bramedix-dark-mode td, .bramedix-dark-mode th{color:inherit;} .bramedix-dark-mode h1, .bramedix-dark-mode h2, .bramedix-dark-mode h3, .bramedix-dark-mode h4, .bramedix-dark-mode h5, .bramedix-dark-mode strong, .bramedix-dark-mode label{color:var(--brx-dm-text)!important;} /* App shell / page backgrounds. */ .bramedix-dark-mode [style*="background: rgb(248, 250, 252)"], .bramedix-dark-mode [style*="background:#f8fafc"], .bramedix-dark-mode [style*="background: #f8fafc"], .bramedix-dark-mode [style*="background: rgb(250, 251, 252)"], .bramedix-dark-mode [style*="background:#fafbfc"], .bramedix-dark-mode [style*="background: #fafbfc"], .bramedix-dark-mode [style*="background:#020617"], .bramedix-dark-mode [style*="background: #020617"], .bramedix-dark-mode [style*="background:#11151d"], .bramedix-dark-mode [style*="background: #11151d"]{ background:var(--brx-dm-bg)!important; background-color:var(--brx-dm-bg)!important; } /* White / light panels become raised deep-navy surfaces instead of flat black. */ .bramedix-dark-mode [style*="background: rgb(255, 255, 255)"], .bramedix-dark-mode [style*="background:#fff"], .bramedix-dark-mode [style*="background: #fff"], .bramedix-dark-mode [style*="background: white"], .bramedix-dark-mode [style*="background: rgb(255,255,255)"]{ background:var(--brx-dm-surface)!important; background-color:var(--brx-dm-surface)!important; box-shadow:var(--brx-dm-shadow)!important; } /* Light tints/selected rows/empty states/soft panels. */ .bramedix-dark-mode [style*="background: rgb(241, 245, 249)"], .bramedix-dark-mode [style*="background:#f1f5f9"], .bramedix-dark-mode [style*="background: #f1f5f9"], .bramedix-dark-mode [style*="background: rgb(240, 253, 250)"], .bramedix-dark-mode [style*="background:#f0fdfa"], .bramedix-dark-mode [style*="background: #f0fdfa"], .bramedix-dark-mode [style*="background: rgb(230, 244, 246)"], .bramedix-dark-mode [style*="background:#e6f4f6"], .bramedix-dark-mode [style*="background: #e6f4f6"], .bramedix-dark-mode [style*="background: rgb(239, 246, 255)"], .bramedix-dark-mode [style*="background:#eff6ff"], .bramedix-dark-mode [style*="background: #eff6ff"], .bramedix-dark-mode [style*="background: rgb(248, 250, 252)"]{ background:var(--brx-dm-surface-2)!important; background-color:var(--brx-dm-surface-2)!important; } /* Sidebar/footer rows / stronger content blocks. */ .bramedix-dark-mode [style*="background: rgb(226, 232, 240)"], .bramedix-dark-mode [style*="background:#e2e8f0"], .bramedix-dark-mode [style*="background: #e2e8f0"], .bramedix-dark-mode [style*="background: rgb(203, 213, 225)"], .bramedix-dark-mode [style*="background:#cbd5e1"], .bramedix-dark-mode [style*="background: #cbd5e1"]{ background:var(--brx-dm-surface-3)!important; background-color:var(--brx-dm-surface-3)!important; } /* Keep Smarthms accent readable on dark surfaces. */ .bramedix-dark-mode [style*="color:#007e8e"], .bramedix-dark-mode [style*="color: #007e8e"], .bramedix-dark-mode [style*="color: rgb(0, 126, 142)"]{color:var(--brx-dm-accent)!important;} .bramedix-dark-mode [style*="background:#007e8e"], .bramedix-dark-mode [style*="background: #007e8e"], .bramedix-dark-mode [style*="background: rgb(0, 126, 142)"]{ background:linear-gradient(180deg,#34d399,#2ac58d)!important; background-color:#34d399!important; color:#07110b!important; border-color:#34d399!important; } /* Text tones hard-coded inline in React. */ .bramedix-dark-mode [style*="color: rgb(15, 23, 42)"], .bramedix-dark-mode [style*="color:#0f172a"], .bramedix-dark-mode [style*="color: #0f172a"], .bramedix-dark-mode [style*="color: rgb(17, 24, 39)"], .bramedix-dark-mode [style*="color:#111827"], .bramedix-dark-mode [style*="color: #111827"], .bramedix-dark-mode [style*="color: rgb(30, 41, 59)"], .bramedix-dark-mode [style*="color:#1e293b"], .bramedix-dark-mode [style*="color: #1e293b"], .bramedix-dark-mode [style*="color: rgb(31, 41, 55)"], .bramedix-dark-mode [style*="color:#1f2937"], .bramedix-dark-mode [style*="color: #1f2937"]{color:var(--brx-dm-text)!important;} .bramedix-dark-mode [style*="color: rgb(51, 65, 85)"], .bramedix-dark-mode [style*="color:#334155"], .bramedix-dark-mode [style*="color: #334155"], .bramedix-dark-mode [style*="color: rgb(71, 85, 105)"], .bramedix-dark-mode [style*="color:#475569"], .bramedix-dark-mode [style*="color: #475569"], .bramedix-dark-mode [style*="color: rgb(55, 65, 81)"], .bramedix-dark-mode [style*="color:#374151"], .bramedix-dark-mode [style*="color: #374151"]{color:var(--brx-dm-muted)!important;} .bramedix-dark-mode [style*="color: rgb(100, 116, 139)"], .bramedix-dark-mode [style*="color:#64748b"], .bramedix-dark-mode [style*="color: #64748b"], .bramedix-dark-mode [style*="color: rgb(148, 163, 184)"], .bramedix-dark-mode [style*="color:#94a3b8"], .bramedix-dark-mode [style*="color: #94a3b8"], .bramedix-dark-mode [style*="color: rgb(107, 114, 128)"], .bramedix-dark-mode [style*="color:#6b7280"], .bramedix-dark-mode [style*="color: #6b7280"]{color:var(--brx-dm-subtle)!important;} /* Status / semantic soft fills stay visible. */ .bramedix-dark-mode [style*="background:#ecfdf5"], .bramedix-dark-mode [style*="background: #ecfdf5"], .bramedix-dark-mode [style*="background: rgb(236, 253, 245)"]{background:rgba(34,197,94,.14)!important;background-color:rgba(34,197,94,.14)!important;} .bramedix-dark-mode [style*="background:#fef3c7"], .bramedix-dark-mode [style*="background: #fef3c7"], .bramedix-dark-mode [style*="background: rgb(254, 243, 199)"]{background:rgba(251,191,36,.14)!important;background-color:rgba(251,191,36,.14)!important;} .bramedix-dark-mode [style*="background:#fee2e2"], .bramedix-dark-mode [style*="background: #fee2e2"], .bramedix-dark-mode [style*="background: rgb(254, 226, 226)"]{background:rgba(248,113,113,.14)!important;background-color:rgba(248,113,113,.14)!important;} /* Inputs and controls. */ .bramedix-dark-mode input, .bramedix-dark-mode select, .bramedix-dark-mode textarea{ background:var(--brx-dm-card)!important; color:var(--brx-dm-text)!important; border:1px solid var(--brx-dm-border)!important; caret-color:var(--brx-dm-accent); } .bramedix-dark-mode input::placeholder, .bramedix-dark-mode textarea::placeholder{color:var(--brx-dm-subtle)!important;} .bramedix-dark-mode input:focus, .bramedix-dark-mode select:focus, .bramedix-dark-mode textarea:focus{ outline:none!important; border-color:#4b5b74!important; box-shadow:0 0 0 3px rgba(52,211,153,.12)!important; } .bramedix-dark-mode button{ border-color:var(--brx-dm-border)!important; } .bramedix-dark-mode button[style*="background: rgb(248, 250, 252)"], .bramedix-dark-mode button[style*="background:#f8fafc"], .bramedix-dark-mode button[style*="background: #f8fafc"], .bramedix-dark-mode button[style*="background: rgb(255, 255, 255)"], .bramedix-dark-mode button[style*="background:#fff"], .bramedix-dark-mode button[style*="background: #fff"]{ background:var(--brx-dm-surface-2)!important; background-color:var(--brx-dm-surface-2)!important; color:var(--brx-dm-text)!important; } /* Borders/dividers. */ .bramedix-dark-mode [style*="border: 1px solid rgb(226, 232, 240)"], .bramedix-dark-mode [style*="border:1px solid #e2e8f0"], .bramedix-dark-mode [style*="border: 1px solid #e2e8f0"], .bramedix-dark-mode [style*="border:1px solid rgb(203, 213, 225)"], .bramedix-dark-mode [style*="border: 1px solid rgb(203, 213, 225)"], .bramedix-dark-mode [style*="border:1px solid #cbd5e1"], .bramedix-dark-mode [style*="border: 1px solid #cbd5e1"], .bramedix-dark-mode [style*="border-bottom: 1px solid rgb(226, 232, 240)"], .bramedix-dark-mode [style*="border-bottom:1px solid #e2e8f0"], .bramedix-dark-mode [style*="border-bottom: 1px solid #e2e8f0"], .bramedix-dark-mode [style*="border-top: 1px solid rgb(226, 232, 240)"], .bramedix-dark-mode [style*="border-top:1px solid #e2e8f0"], .bramedix-dark-mode [style*="border-top: 1px solid #e2e8f0"], .bramedix-dark-mode [style*="border-left: 1px solid rgb(226, 232, 240)"], .bramedix-dark-mode [style*="border-right: 1px solid rgb(226, 232, 240)"]{ border-color:var(--brx-dm-border)!important; } .bramedix-dark-mode [style*="box-shadow"]{box-shadow:var(--brx-dm-shadow)!important;} /* Premium KPI-card style: visible outline like the reference screenshot. */ .bramedix-dark-mode [style*="border-radius:18"], .bramedix-dark-mode [style*="border-radius: 18"], .bramedix-dark-mode [style*="borderRadius:18"], .bramedix-dark-mode [style*="border-radius:16"], .bramedix-dark-mode [style*="border-radius: 16"], .bramedix-dark-mode [style*="border-radius:14"], .bramedix-dark-mode [style*="border-radius: 14"]{ border-color:var(--brx-dm-border-strong)!important; } /* Common inline SVG/icon colors. */ .bramedix-dark-mode svg[stroke="#334155"], .bramedix-dark-mode svg[stroke="#475569"]{stroke:#d8e2ef!important;} .bramedix-dark-mode svg[fill="#334155"], .bramedix-dark-mode svg[fill="#475569"]{fill:#d8e2ef!important;} .bramedix-dark-mode .bramedix-bottom-nav{background:var(--brx-dm-surface)!important;border-top:1px solid var(--brx-dm-border)!important;} /* Dark-mode patch for mobile KPI/stat cards and dashboard warning panels. These components use inline pastel backgrounds (#fef3e2, #f5f3ff, #fef9f0, etc.). Earlier dark-mode rules changed the text to white but left those pastel card backgrounds intact, making the values look blank on mobile. Force those pastel cards into dark elevated surfaces while keeping their semantic accent colors readable. */ .bramedix-dark-mode [style*="background:#fef3e2"], .bramedix-dark-mode [style*="background: #fef3e2"], .bramedix-dark-mode [style*="background:#f5f3ff"], .bramedix-dark-mode [style*="background: #f5f3ff"], .bramedix-dark-mode [style*="background:#fef9f0"], .bramedix-dark-mode [style*="background: #fef9f0"], .bramedix-dark-mode [style*="background:#fff7ed"], .bramedix-dark-mode [style*="background: #fff7ed"], .bramedix-dark-mode [style*="background:#fef2f2"], .bramedix-dark-mode [style*="background: #fef2f2"], .bramedix-dark-mode [style*="background:#fffbeb"], .bramedix-dark-mode [style*="background: #fffbeb"]{ background:var(--brx-dm-surface-2)!important; background-color:var(--brx-dm-surface-2)!important; border-color:var(--brx-dm-border-strong)!important; } .bramedix-dark-mode [style*="background:#fef3e2"] [style*="color:#0f172a"], .bramedix-dark-mode [style*="background: #fef3e2"] [style*="color:#0f172a"], .bramedix-dark-mode [style*="background:#f5f3ff"] [style*="color:#0f172a"], .bramedix-dark-mode [style*="background: #f5f3ff"] [style*="color:#0f172a"], .bramedix-dark-mode [style*="background:#fef9f0"] [style*="color:#0f172a"], .bramedix-dark-mode [style*="background: #fef9f0"] [style*="color:#0f172a"]{ color:var(--brx-dm-text)!important; } .bramedix-dark-mode [style*="background:rgba(255,255,255,.9)"], .bramedix-dark-mode [style*="background: rgba(255,255,255,.9)"]{ background:rgba(255,255,255,.10)!important; background-color:rgba(255,255,255,.10)!important; border:1px solid rgba(255,255,255,.12)!important; } .bramedix-dark-mode [style*="borderBottom:`1px solid #f1f5f9`"], .bramedix-dark-mode [style*="border-bottom: 1px solid #f1f5f9"], .bramedix-dark-mode [style*="borderBottom:1px solid #f1f5f9"]{ border-color:var(--brx-dm-border)!important; } .bramedix-dark-mode [style*="color:#b91c1c"], .bramedix-dark-mode [style*="color: #b91c1c"]{color:#fca5a5!important;} .bramedix-dark-mode [style*="color:#d97706"], .bramedix-dark-mode [style*="color: #d97706"]{color:#fbbf24!important;} .bramedix-dark-mode [style*="color:#9333ea"], .bramedix-dark-mode [style*="color: #9333ea"]{color:#c084fc!important;} .bramedix-dark-mode [style*="color:#ea580c"], .bramedix-dark-mode [style*="color: #ea580c"]{color:#fb923c!important;} /* v1.0.221: explicit rgb fallbacks for mobile stat cards and low-stock panels. Some browsers serialize React inline hex backgrounds as rgb() in the style attribute, so these catch the exact problem cards even if the source hex selectors miss. */ .bramedix-dark-mode [style*="background: rgb(254, 243, 226)"], .bramedix-dark-mode [style*="background: rgb(245, 243, 255)"], .bramedix-dark-mode [style*="background: rgb(254, 249, 240)"], .bramedix-dark-mode [style*="background: rgb(255, 251, 235)"], .bramedix-dark-mode [style*="background: rgb(255, 247, 237)"], .bramedix-dark-mode [style*="background: rgb(250, 245, 255)"], .bramedix-dark-mode [style*="background: rgb(254, 242, 242)"]{ background:#111b30!important; background-color:#111b30!important; border-color:#46546b!important; } .bramedix-dark-mode [style*="background: rgb(255, 255, 255, 0.9)"], .bramedix-dark-mode [style*="background: rgba(255, 255, 255, 0.9)"]{ background:rgba(255,255,255,.10)!important; background-color:rgba(255,255,255,.10)!important; border:1px solid rgba(255,255,255,.12)!important; } /* Smarthms v1.3.26: premium login screen refresh. */ .bramedix-dark-mode{ --brx-dm-bg:#090f1d; --brx-dm-surface:#0f1728; --brx-dm-surface-2:#121c31; --brx-dm-surface-3:#162238; --brx-dm-card:#101a2d; --brx-dm-border:#263247; --brx-dm-border-strong:#384760; --brx-dm-text:#f8fafc; --brx-dm-muted:#cbd5e1; --brx-dm-subtle:#94a3b8; --brx-dm-accent:#75a7ff; --brx-dm-accent-2:#2f6fed; --brx-dm-shadow:none; } .bramedix-dark-mode .brx-page, .bramedix-dark-mode .bramedix-page-motion-shell{ background:var(--brx-dm-bg)!important; background-color:var(--brx-dm-bg)!important; } .bramedix-dark-mode .bramedix-sidebar-theme-toggle{ box-shadow:none!important; } .bramedix-dark-mode [style*="background:#2f6fed"], .bramedix-dark-mode [style*="background: #2f6fed"], .bramedix-dark-mode [style*="background: rgb(47, 111, 237)"]{ background:linear-gradient(180deg,#4f8bff 0%,#2f6fed 100%)!important; background-color:#2f6fed!important; border-color:#2f6fed!important; color:#ffffff!important; } .bramedix-dark-mode [style*="color:#2f6fed"], .bramedix-dark-mode [style*="color: #2f6fed"], .bramedix-dark-mode [style*="color: rgb(47, 111, 237)"]{ color:#75a7ff!important; } .bramedix-dark-mode [style*="background:#eef4ff"], .bramedix-dark-mode [style*="background: #eef4ff"], .bramedix-dark-mode [style*="background: rgb(238, 244, 255)"]{ background:rgba(47,111,237,.16)!important; background-color:rgba(47,111,237,.16)!important; border-color:rgba(117,167,255,.24)!important; } /* Smarthms v1.3.47: dashboard calendar dark-mode fix. The calendar card used its own pale blue inline background, so it stayed bright while the rest of the dashboard was dark. These variables are used by the React calendar card and keep its borders/events consistent with the premium dark shell. */ .bramedix-dark-mode{ --brx-calendar-card-bg:var(--brx-dm-surface); --brx-calendar-card-border:var(--brx-dm-border); } .bramedix-dark-mode [style*="background:#f2f6ff"], .bramedix-dark-mode [style*="background: #f2f6ff"], .bramedix-dark-mode [style*="background: rgb(242, 246, 255)"]{ background:var(--brx-dm-surface)!important; background-color:var(--brx-dm-surface)!important; border-color:var(--brx-dm-border)!important; } .bramedix-dark-mode [style*="border-color:#dbeafe"], .bramedix-dark-mode [style*="borderColor:#dbeafe"], .bramedix-dark-mode [style*="border-color: #dbeafe"], .bramedix-dark-mode [style*="border-top: 1px solid #dbeafe"], .bramedix-dark-mode [style*="border-top:1px solid #dbeafe"]{ border-color:var(--brx-dm-border)!important; } /* Smarthms motion system - smooth Apple-like UI polish. This is deliberately mounted on the page content shell with a React key so navigation actually replays the transition. Fixed modals/forms are not animated, so create/edit forms keep opening and behaving exactly as before. */ @keyframes bramedix-page-enter { 0% { opacity: 0; transform: translate3d(0, 10px, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes bramedix-page-child-enter { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes bramedix-soft-pop { 0% { opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } #bramedix-root { --bramedix-ease-apple: cubic-bezier(.22, 1, .36, 1); --bramedix-ease-soft: cubic-bezier(.2, .8, .2, 1); } /* Real page transition. The keyed wrapper is remounted on page/subpage/business navigation, so the motion is visible instead of only running on first load. */ #bramedix-root .bramedix-page-motion-shell { min-height: 100%; will-change: opacity, transform; backface-visibility: hidden; animation: bramedix-page-enter .34s var(--bramedix-ease-apple) backwards; } /* Stagger only the first-level page sections. This gives the Apple-like flow without changing modal/form internals or causing fields to jump around. */ #bramedix-root .bramedix-page-motion-shell > *:not([style*="position: fixed"]):not([style*="position:fixed"]) { animation: bramedix-page-child-enter .3s var(--bramedix-ease-apple) backwards; } #bramedix-root .bramedix-page-motion-shell > *:nth-child(1) { animation-delay: .03s; } #bramedix-root .bramedix-page-motion-shell > *:nth-child(2) { animation-delay: .075s; } #bramedix-root .bramedix-page-motion-shell > *:nth-child(3) { animation-delay: .115s; } #bramedix-root .bramedix-page-motion-shell > *:nth-child(4) { animation-delay: .15s; } #bramedix-root .bramedix-page-motion-shell > *:nth-child(5) { animation-delay: .18s; } /* Card/list surfaces get interaction polish and optional first-render pop. Kept broad because most HMS screens are inline-style React surfaces. */ #bramedix-root .bramedix-page-motion-shell [style*="border-radius: 18"], #bramedix-root .bramedix-page-motion-shell [style*="border-radius:18"], #bramedix-root .bramedix-page-motion-shell [style*="border-radius: 16"], #bramedix-root .bramedix-page-motion-shell [style*="border-radius:16"], #bramedix-root .bramedix-page-motion-shell [style*="border-radius: 14"], #bramedix-root .bramedix-page-motion-shell [style*="border-radius:14"], #bramedix-root .bramedix-page-motion-shell [style*="box-shadow"] { transition: transform .28s var(--bramedix-ease-apple), box-shadow .28s var(--bramedix-ease-apple), border-color .22s var(--bramedix-ease-soft), background-color .22s var(--bramedix-ease-soft), color .22s var(--bramedix-ease-soft), opacity .22s var(--bramedix-ease-soft); } @media (hover: hover) and (pointer: fine) { #bramedix-root .bramedix-page-motion-shell [style*="border-radius: 18"]:hover, #bramedix-root .bramedix-page-motion-shell [style*="border-radius:18"]:hover, #bramedix-root .bramedix-page-motion-shell [style*="border-radius: 16"]:hover, #bramedix-root .bramedix-page-motion-shell [style*="border-radius:16"]:hover { box-shadow: none; } } /* Buttons/menu controls feel responsive without changing layout. */ #bramedix-root button, #bramedix-root a, #bramedix-root [role="button"] { transition: transform .18s var(--bramedix-ease-apple), background-color .22s var(--bramedix-ease-soft), border-color .22s var(--bramedix-ease-soft), color .22s var(--bramedix-ease-soft), opacity .22s var(--bramedix-ease-soft), box-shadow .22s var(--bramedix-ease-soft); } #bramedix-root button:active, #bramedix-root [role="button"]:active { opacity:.92; } /* Inputs should not animate into view, but focus should feel smooth. */ #bramedix-root input, #bramedix-root select, #bramedix-root textarea { transition: border-color .2s var(--bramedix-ease-soft), box-shadow .2s var(--bramedix-ease-soft), background-color .2s var(--bramedix-ease-soft), color .2s var(--bramedix-ease-soft); } /* Preserve form/modal behavior exactly. Fixed overlays, form tags, and form descendants do not receive page/card entrance animations. */ #bramedix-root form, #bramedix-root form *, #bramedix-root [style*="position: fixed"], #bramedix-root [style*="position: fixed"] *, #bramedix-root [style*="position:fixed"], #bramedix-root [style*="position:fixed"] * { animation-name: none !important; } #bramedix-root [style*="position: fixed"] button:active, #bramedix-root [style*="position:fixed"] button:active { transform: none !important; } /* Keep the startup Smarthms bag/logo pulse alive. The modal-safety rules below intentionally suppress animations inside fixed overlays, but the splash loader is a fixed full-screen shell too. Re-enable only this logo so the initial loading state keeps its previous breathing/pulse feedback without reintroducing modal animation regressions. */ #bramedix-root #bramedix-loader img, #bramedix-root .bramedix-splash-logo { animation-name: bramedix-logo-pulse !important; animation-duration: 1.2s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; transform-origin: center center !important; will-change: transform, opacity; } /* Important: do not keep a transform on page containers after the page-enter animation finishes. CSS transforms create containing blocks for fixed modals. The animations above use backwards fill only, so the slight slide-up runs on entry and then this resting transform:none keeps add/edit popups centered. */ #bramedix-root .bramedix-page-motion-shell, #bramedix-root .bramedix-page-motion-shell > * { transform: none; } @media (prefers-reduced-motion: reduce) { #bramedix-root, #bramedix-root * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Modal portal safety: every add/edit popup is mounted at #bramedix-root level, outside the animated page shell. This keeps overlays above the header/sidebar and prevents page transition stacking contexts from clipping or offsetting forms. */ #bramedix-root > .bramedix-modal-overlay{ position:fixed!important; inset:0!important; z-index:2147483000!important; isolation:isolate; } #bramedix-root > .bramedix-modal-overlay, #bramedix-root > .bramedix-modal-overlay *{ animation:none!important; } #bramedix-root > .bramedix-modal-overlay .bramedix-modal-box{ transform:none!important; } @media (max-width: 768px){ #bramedix-root > .bramedix-modal-overlay{ top:0!important; padding-top:env(safe-area-inset-top,0px)!important; } } /* SalesGee 3.1.97: flatten page containers and keep the sidebar collapse control icon-only. */ #bramedix-root .bramedix-page-motion-shell div[style*="box-shadow"]:not([style*="position: fixed"]):not([style*="position:fixed"]), #bramedix-root .bramedix-page-motion-shell section[style*="box-shadow"]:not([style*="position: fixed"]):not([style*="position:fixed"]), #bramedix-root .bramedix-page-motion-shell article[style*="box-shadow"]:not([style*="position: fixed"]):not([style*="position:fixed"]) { box-shadow: none !important; } #bramedix-root .bramedix-page-motion-shell div[style*="box-shadow"]:not([style*="position: fixed"]):not([style*="position:fixed"]):hover, #bramedix-root .bramedix-page-motion-shell section[style*="box-shadow"]:not([style*="position: fixed"]):not([style*="position:fixed"]):hover, #bramedix-root .bramedix-page-motion-shell article[style*="box-shadow"]:not([style*="position: fixed"]):not([style*="position:fixed"]):hover { box-shadow: none !important; } #bramedix-root [aria-label="Collapse sidebar"], #bramedix-root [aria-label="Expand sidebar"] { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* SalesGee 3.1.201: sidebar/menu hover micro-interactions matching the Admin Console. Uses soft transitions, a 1px horizontal glide, and tiny icon scale for a smoother premium feel. */ #bramedix-root .bramedix-sidebar-nav-item, #bramedix-root .bramedix-sidebar-subnav-item, #bramedix-root .bramedix-sidebar-facility-menu, #bramedix-root .bramedix-sidebar-signout, #bramedix-root .bramedix-bottom-nav-item { will-change: transform, background-color, box-shadow, color; } #bramedix-root .bramedix-sidebar-nav-icon svg, #bramedix-root .bramedix-bottom-nav-item svg { transition: opacity .18s ease, transform .18s ease, stroke .18s ease, color .18s ease; transform-origin: center; } @media (hover: hover) and (pointer: fine) { #bramedix-root .bramedix-sidebar-nav-item:hover .bramedix-sidebar-nav-icon svg, #bramedix-root .bramedix-bottom-nav-item:hover svg { opacity: 1; transform: scale(1.02); } #bramedix-root .bramedix-bottom-nav-item:hover { transform: translateY(-1px); } } @media (prefers-reduced-motion: reduce) { #bramedix-root .bramedix-sidebar-nav-item, #bramedix-root .bramedix-sidebar-subnav-item, #bramedix-root .bramedix-sidebar-facility-menu, #bramedix-root .bramedix-sidebar-signout, #bramedix-root .bramedix-sidebar-nav-icon, #bramedix-root .bramedix-sidebar-nav-icon svg, #bramedix-root .bramedix-bottom-nav-item, #bramedix-root .bramedix-bottom-nav-item svg { transition: none !important; transform: none !important; animation: none !important; } } /* Smarthms v1.3.13 brand refresh: blue/white theme, light Inter type, no card/button shadows. */ #bramedix-root { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-weight: 400 !important; color: #0f172a; background: #f5f7fb !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; } #bramedix-root *, #bramedix-root *::before, #bramedix-root *::after { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } #bramedix-root h1, #bramedix-root h2, #bramedix-root h3, #bramedix-root h4 { font-weight: 600 !important; letter-spacing: -0.025em !important; } #bramedix-root [style*="font-weight: 950"], #bramedix-root [style*="fontWeight:950"], #bramedix-root [style*="font-weight:950"], #bramedix-root [style*="font-weight: 900"], #bramedix-root [style*="fontWeight:900"], #bramedix-root [style*="font-weight:900"], #bramedix-root [style*="font-weight: 850"], #bramedix-root [style*="fontWeight:850"], #bramedix-root [style*="font-weight:850"], #bramedix-root [style*="font-weight: 800"], #bramedix-root [style*="fontWeight:800"], #bramedix-root [style*="font-weight:800"] { font-weight: 600 !important; } #bramedix-root [style*="font-weight: 700"], #bramedix-root [style*="fontWeight:700"], #bramedix-root [style*="font-weight:700"] { font-weight: 500 !important; } #bramedix-root button, #bramedix-root [role="button"], #bramedix-root input, #bramedix-root select, #bramedix-root textarea { font-weight: 400 !important; box-shadow: none !important; } #bramedix-root button { font-weight: 500 !important; } #bramedix-root [style*="box-shadow"], #bramedix-root [style*="boxShadow"], #bramedix-root [class*="card"], #bramedix-root [class*="Card"] { box-shadow: none !important; } #bramedix-root [style*="#22b07d"], #bramedix-root [style*="#2fb582"], #bramedix-root [style*="#20c997"], #bramedix-root [style*="#27b386"], #bramedix-root [style*="#16865e"], #bramedix-root [style*="#10b981"], #bramedix-root [style*="#16a34a"], #bramedix-root [style*="#22c55e"], #bramedix-root [style*="#059669"], #bramedix-root [style*="#047857"], #bramedix-root [style*="rgb(34, 176, 125)"], #bramedix-root [style*="rgb(39, 179, 134)"], #bramedix-root [style*="rgb(16, 185, 129)"], #bramedix-root [style*="rgb(22, 163, 74)"], #bramedix-root [style*="rgb(34, 197, 94)"], #bramedix-root [style*="rgb(5, 150, 105)"], #bramedix-root [style*="rgb(4, 120, 87)"] { color: #2f6fed !important; border-color: #bfdbfe !important; } #bramedix-root button[style*="#22b07d"], #bramedix-root button[style*="#2fb582"], #bramedix-root button[style*="#20c997"], #bramedix-root button[style*="#27b386"], #bramedix-root button[style*="#10b981"], #bramedix-root button[style*="#16a34a"], #bramedix-root button[style*="#22c55e"], #bramedix-root button[style*="rgb(34, 176, 125)"], #bramedix-root button[style*="rgb(39, 179, 134)"], #bramedix-root button[style*="rgb(16, 185, 129)"], #bramedix-root button[style*="rgb(22, 163, 74)"], #bramedix-root button[style*="rgb(34, 197, 94)"] { background: #2f6fed !important; color: #ffffff !important; border-color: #2f6fed !important; } #bramedix-root [style*="#ecfdf5"], #bramedix-root [style*="#dcfce7"], #bramedix-root [style*="#d1fae5"], #bramedix-root [style*="#e8f8f1"], #bramedix-root [style*="rgb(236, 253, 245)"], #bramedix-root [style*="rgb(220, 252, 231)"], #bramedix-root [style*="rgb(209, 250, 229)"] { background-color: #eef4ff !important; background: #eef4ff !important; border-color: #bfdbfe !important; } #bramedix-root svg[stroke="#10b981"], #bramedix-root svg[stroke="#16a34a"], #bramedix-root svg[stroke="#22c55e"], #bramedix-root svg[stroke="#059669"], #bramedix-root svg[stroke="#047857"], #bramedix-root svg[stroke="#27b386"], #bramedix-root svg[stroke="#16865e"] { stroke: #2f6fed !important; } #bramedix-root svg[fill="#10b981"], #bramedix-root svg[fill="#16a34a"], #bramedix-root svg[fill="#22c55e"], #bramedix-root svg[fill="#059669"], #bramedix-root svg[fill="#047857"], #bramedix-root svg[fill="#27b386"], #bramedix-root svg[fill="#16865e"] { fill: #2f6fed !important; } #bramedix-root .brx-page { background: #f5f7fb !important; } #bramedix-root table th { font-weight: 500 !important; letter-spacing: .05em !important; } #bramedix-root table td { font-weight: 400 !important; } /* Smarthms mobile responsive table cards. Every app table is progressively enhanced by app.js with data-brx-label attributes. On narrow screens the table becomes a stacked card list so patient, visit, billing, inventory, appointment, report, and staff rows do not collapse into unreadable narrow columns. */ @media (max-width: 760px) { #bramedix-root table[data-brx-mobile-table="1"] { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; table-layout: auto !important; background: transparent !important; } #bramedix-root table[data-brx-mobile-table="1"] thead, #bramedix-root table[data-brx-mobile-table="1"] colgroup { display: none !important; } #bramedix-root table[data-brx-mobile-table="1"] tbody { display: grid !important; gap: 12px !important; width: 100% !important; } #bramedix-root table[data-brx-mobile-table="1"] tr { display: block !important; width: 100% !important; min-width: 0 !important; border: 1px solid #dbe3ef !important; border-radius: 18px !important; background: #ffffff !important; padding: 12px 14px !important; margin: 0 !important; overflow: hidden !important; box-shadow: none !important; } #bramedix-root table[data-brx-mobile-table="1"] tr:has(td[colspan]) { padding: 0 !important; } #bramedix-root table[data-brx-mobile-table="1"] td, #bramedix-root table[data-brx-mobile-table="1"] th { min-width: 0 !important; max-width: 100% !important; white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere !important; text-align: left !important; vertical-align: top !important; } #bramedix-root table[data-brx-mobile-table="1"] td { display: grid !important; grid-template-columns: minmax(86px, 34%) minmax(0, 1fr) !important; align-items: start !important; gap: 10px !important; padding: 8px 0 !important; border: 0 !important; border-bottom: 1px solid #edf2f7 !important; font-size: 13px !important; line-height: 1.35 !important; color: #334155 !important; } #bramedix-root table[data-brx-mobile-table="1"] td:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; } #bramedix-root table[data-brx-mobile-table="1"] td::before { content: attr(data-brx-label); display: block !important; color: #64748b !important; font-size: 10px !important; line-height: 1.25 !important; text-transform: uppercase !important; letter-spacing: .06em !important; font-weight: 850 !important; padding-top: 2px !important; } #bramedix-root table[data-brx-mobile-table="1"] td[data-brx-label=""], #bramedix-root table[data-brx-mobile-table="1"] td[data-brx-label="Action"], #bramedix-root table[data-brx-mobile-table="1"] td[data-brx-label="Actions"] { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; grid-template-columns: none !important; } #bramedix-root table[data-brx-mobile-table="1"] td[data-brx-label="Action"]::before, #bramedix-root table[data-brx-mobile-table="1"] td[data-brx-label="Actions"]::before { content: "" !important; display: none !important; } #bramedix-root table[data-brx-mobile-table="1"] td[data-brx-label=""]::before, #bramedix-root table[data-brx-mobile-table="1"] td[data-brx-empty="1"] { display: none !important; } #bramedix-root table[data-brx-mobile-table="1"] td[colspan] { display: block !important; padding: 28px 14px !important; text-align: center !important; border-bottom: 0 !important; } #bramedix-root table[data-brx-mobile-table="1"] td[colspan]::before { display: none !important; content: "" !important; } #bramedix-root table[data-brx-mobile-table="1"] td > *, #bramedix-root table[data-brx-mobile-table="1"] td div, #bramedix-root table[data-brx-mobile-table="1"] td span, #bramedix-root table[data-brx-mobile-table="1"] td button { max-width: 100% !important; min-width: 0 !important; white-space: normal !important; } #bramedix-root table[data-brx-mobile-table="1"] td button, #bramedix-root table[data-brx-mobile-table="1"] td a[role="button"] { white-space: nowrap !important; } #bramedix-root table[data-brx-mobile-table="1"] input[type="checkbox"] { width: 18px !important; height: 18px !important; } #bramedix-root table[data-brx-mobile-table="1"] + nav, #bramedix-root table[data-brx-mobile-table="1"] ~ nav, #bramedix-root table[data-brx-mobile-table="1"] + .pagination, #bramedix-root table[data-brx-mobile-table="1"] ~ .pagination { margin-top: 12px !important; } } @media (max-width: 760px) { .bramedix-dark-mode table[data-brx-mobile-table="1"] tr { background: var(--brx-dm-surface) !important; border-color: var(--brx-dm-border) !important; } .bramedix-dark-mode table[data-brx-mobile-table="1"] td { border-bottom-color: var(--brx-dm-border) !important; color: var(--brx-dm-text) !important; } .bramedix-dark-mode table[data-brx-mobile-table="1"] td::before { color: var(--brx-dm-subtle) !important; } } /* Smarthms v1.3.45 premium dark mode refresh. Matches the requested app-style dark interface: near-black shell, deep elevated cards, light-blue accents, readable muted text, and no green primary controls. Kept as a final override so it wins over inline-light React styles and older dark-mode patches. */ .bramedix-dark-mode{ --brx-dm-bg:#05070b; --brx-dm-shell:#070b12; --brx-dm-surface:#0b101a; --brx-dm-surface-2:#101722; --brx-dm-surface-3:#151f2d; --brx-dm-card:#0f1724; --brx-dm-card-2:#121b2a; --brx-dm-border:#202a3a; --brx-dm-border-strong:#2c3a50; --brx-dm-text:#f8fafc; --brx-dm-muted:#c6d0dd; --brx-dm-subtle:#8b9aae; --brx-dm-accent:#60a5fa; --brx-dm-accent-strong:#3b82f6; --brx-dm-accent-soft:rgba(96,165,250,.14); --brx-dm-accent-line:rgba(96,165,250,.34); --brx-dm-danger:#fb7185; --brx-dm-warning:#fbbf24; --brx-dm-success:#34d399; --brx-dm-shadow:none; } .bramedix-dark-mode, .bramedix-dark-mode .bramedix-page-scroll, .bramedix-dark-mode .bramedix-page-motion-shell, .bramedix-dark-mode .brx-page, .bramedix-dark-mode [data-bramedix-dark="1"]{ background:var(--brx-dm-bg)!important; background-color:var(--brx-dm-bg)!important; color:var(--brx-dm-text)!important; color-scheme:dark!important; } .bramedix-dark-mode *{ scrollbar-color:#263349 var(--brx-dm-bg)!important; } .bramedix-dark-mode ::selection{ background:rgba(96,165,250,.34)!important; color:#ffffff!important; } /* App shell, top bar, sidebar, mobile bottom bar. */ .bramedix-dark-mode aside, .bramedix-dark-mode header, .bramedix-dark-mode nav, .bramedix-dark-mode .bramedix-bottom-nav, .bramedix-dark-mode [style*="background:#fafbfc"], .bramedix-dark-mode [style*="background: #fafbfc"], .bramedix-dark-mode [style*="background: rgb(250, 251, 252)"], .bramedix-dark-mode [style*="background:#f8fafc"], .bramedix-dark-mode [style*="background: #f8fafc"], .bramedix-dark-mode [style*="background: rgb(248, 250, 252)"], .bramedix-dark-mode [style*="background:#f5f7fb"], .bramedix-dark-mode [style*="background: #f5f7fb"], .bramedix-dark-mode [style*="background: rgb(245, 247, 251)"], .bramedix-dark-mode [style*="background:#11151d"], .bramedix-dark-mode [style*="background: #11151d"], .bramedix-dark-mode [style*="background:#020617"], .bramedix-dark-mode [style*="background: #020617"]{ background:var(--brx-dm-bg)!important; background-color:var(--brx-dm-bg)!important; } /* Cards, panels, modals, dropdowns, table containers and search controls. */ .bramedix-dark-mode [style*="background:#fff"], .bramedix-dark-mode [style*="background: #fff"], .bramedix-dark-mode [style*="background:white"], .bramedix-dark-mode [style*="background: white"], .bramedix-dark-mode [style*="background: rgb(255, 255, 255)"], .bramedix-dark-mode [style*="background:rgba(255,255,255"], .bramedix-dark-mode [style*="background: rgba(255,255,255"], .bramedix-dark-mode [style*="background: rgba(255, 255, 255"], .bramedix-dark-mode [style*="background:#ffffff"], .bramedix-dark-mode [style*="background: #ffffff"]{ background:var(--brx-dm-surface)!important; background-color:var(--brx-dm-surface)!important; box-shadow:none!important; } .bramedix-dark-mode [style*="background:#f1f5f9"], .bramedix-dark-mode [style*="background: #f1f5f9"], .bramedix-dark-mode [style*="background: rgb(241, 245, 249)"], .bramedix-dark-mode [style*="background:#e2e8f0"], .bramedix-dark-mode [style*="background: #e2e8f0"], .bramedix-dark-mode [style*="background: rgb(226, 232, 240)"], .bramedix-dark-mode [style*="background:#eff6ff"], .bramedix-dark-mode [style*="background: #eff6ff"], .bramedix-dark-mode [style*="background: rgb(239, 246, 255)"], .bramedix-dark-mode [style*="background:#eef4ff"], .bramedix-dark-mode [style*="background: #eef4ff"], .bramedix-dark-mode [style*="background: rgb(238, 244, 255)"], .bramedix-dark-mode [style*="background:#f6f8fb"], .bramedix-dark-mode [style*="background: #f6f8fb"]{ background:var(--brx-dm-surface-2)!important; background-color:var(--brx-dm-surface-2)!important; } .bramedix-dark-mode [style*="background:#fef3e2"], .bramedix-dark-mode [style*="background: #fef3e2"], .bramedix-dark-mode [style*="background: rgb(254, 243, 226)"], .bramedix-dark-mode [style*="background:#f5f3ff"], .bramedix-dark-mode [style*="background: #f5f3ff"], .bramedix-dark-mode [style*="background: rgb(245, 243, 255)"], .bramedix-dark-mode [style*="background:#fef9f0"], .bramedix-dark-mode [style*="background: #fef9f0"], .bramedix-dark-mode [style*="background: rgb(254, 249, 240)"], .bramedix-dark-mode [style*="background:#fff7ed"], .bramedix-dark-mode [style*="background: #fff7ed"], .bramedix-dark-mode [style*="background:#fffbeb"], .bramedix-dark-mode [style*="background: #fffbeb"], .bramedix-dark-mode [style*="background:#fef2f2"], .bramedix-dark-mode [style*="background: #fef2f2"], .bramedix-dark-mode [style*="background:#ecfdf5"], .bramedix-dark-mode [style*="background: #ecfdf5"], .bramedix-dark-mode [style*="background:#f0fdfa"], .bramedix-dark-mode [style*="background: #f0fdfa"]{ background:var(--brx-dm-card-2)!important; background-color:var(--brx-dm-card-2)!important; border-color:var(--brx-dm-border-strong)!important; } /* Text hierarchy. */ .bramedix-dark-mode h1, .bramedix-dark-mode h2, .bramedix-dark-mode h3, .bramedix-dark-mode h4, .bramedix-dark-mode h5, .bramedix-dark-mode strong, .bramedix-dark-mode label, .bramedix-dark-mode [style*="color:#0f172a"], .bramedix-dark-mode [style*="color: #0f172a"], .bramedix-dark-mode [style*="color: rgb(15, 23, 42)"], .bramedix-dark-mode [style*="color:#111827"], .bramedix-dark-mode [style*="color: #111827"], .bramedix-dark-mode [style*="color:#1e293b"], .bramedix-dark-mode [style*="color: #1e293b"], .bramedix-dark-mode [style*="color:#020617"], .bramedix-dark-mode [style*="color: #020617"]{ color:var(--brx-dm-text)!important; } .bramedix-dark-mode p, .bramedix-dark-mode td, .bramedix-dark-mode th, .bramedix-dark-mode span, .bramedix-dark-mode small, .bramedix-dark-mode li, .bramedix-dark-mode [style*="color:#334155"], .bramedix-dark-mode [style*="color: #334155"], .bramedix-dark-mode [style*="color:#475569"], .bramedix-dark-mode [style*="color: #475569"], .bramedix-dark-mode [style*="color:#374151"], .bramedix-dark-mode [style*="color: #374151"]{ color:var(--brx-dm-muted)!important; } .bramedix-dark-mode [style*="color:#64748b"], .bramedix-dark-mode [style*="color: #64748b"], .bramedix-dark-mode [style*="color:#6b7280"], .bramedix-dark-mode [style*="color: #6b7280"], .bramedix-dark-mode [style*="color:#94a3b8"], .bramedix-dark-mode [style*="color: #94a3b8"], .bramedix-dark-mode [style*="color: rgb(100, 116, 139)"], .bramedix-dark-mode [style*="color: rgb(107, 114, 128)"]{ color:var(--brx-dm-subtle)!important; } /* Light-blue accent replaces old teal/green primary accents in dark mode. */ .bramedix-dark-mode a, .bramedix-dark-mode [style*="color:#2f6fed"], .bramedix-dark-mode [style*="color: #2f6fed"], .bramedix-dark-mode [style*="color: rgb(47, 111, 237)"], .bramedix-dark-mode [style*="color:#007e8e"], .bramedix-dark-mode [style*="color: #007e8e"], .bramedix-dark-mode [style*="color: rgb(0, 126, 142)"]{ color:var(--brx-dm-accent)!important; } .bramedix-dark-mode [style*="background:#2f6fed"], .bramedix-dark-mode [style*="background: #2f6fed"], .bramedix-dark-mode [style*="background: rgb(47, 111, 237)"], .bramedix-dark-mode [style*="background:#007e8e"], .bramedix-dark-mode [style*="background: #007e8e"], .bramedix-dark-mode [style*="background: rgb(0, 126, 142)"]{ background:linear-gradient(180deg,#60a5fa 0%,#3b82f6 100%)!important; background-color:var(--brx-dm-accent-strong)!important; border-color:rgba(147,197,253,.70)!important; color:#ffffff!important; } .bramedix-dark-mode button[style*="background:#10b981"], .bramedix-dark-mode button[style*="background: #10b981"], .bramedix-dark-mode button[style*="background: rgb(16, 185, 129)"], .bramedix-dark-mode [role="button"][style*="background:#10b981"], .bramedix-dark-mode [role="button"][style*="background: #10b981"]{ background:linear-gradient(180deg,#60a5fa 0%,#3b82f6 100%)!important; background-color:var(--brx-dm-accent-strong)!important; border-color:rgba(147,197,253,.70)!important; color:#ffffff!important; } .bramedix-dark-mode [style*="background:linear-gradient(135deg, #10b981"], .bramedix-dark-mode [style*="background: linear-gradient(135deg, #10b981"]{ background:linear-gradient(135deg,#60a5fa 0%,#2563eb 100%)!important; color:#ffffff!important; } /* Inputs/search: dark pill look like the reference. */ .bramedix-dark-mode input, .bramedix-dark-mode select, .bramedix-dark-mode textarea{ background:var(--brx-dm-surface-2)!important; color:var(--brx-dm-text)!important; border:1px solid var(--brx-dm-border-strong)!important; box-shadow:none!important; caret-color:var(--brx-dm-accent)!important; } .bramedix-dark-mode input::placeholder, .bramedix-dark-mode textarea::placeholder{ color:#7f8da3!important; } .bramedix-dark-mode input:focus, .bramedix-dark-mode select:focus, .bramedix-dark-mode textarea:focus{ border-color:var(--brx-dm-accent)!important; box-shadow:0 0 0 3px rgba(96,165,250,.18)!important; outline:none!important; } /* Borders, dividers and card outlines. */ .bramedix-dark-mode [style*="border: 1px solid rgb(226, 232, 240)"], .bramedix-dark-mode [style*="border:1px solid rgb(226, 232, 240)"], .bramedix-dark-mode [style*="border: 1px solid #e2e8f0"], .bramedix-dark-mode [style*="border:1px solid #e2e8f0"], .bramedix-dark-mode [style*="border: 1px solid #e5e7eb"], .bramedix-dark-mode [style*="border:1px solid #e5e7eb"], .bramedix-dark-mode [style*="border: 1px solid #dbe3ef"], .bramedix-dark-mode [style*="border:1px solid #dbe3ef"], .bramedix-dark-mode [style*="border-bottom: 1px solid rgb(226, 232, 240)"], .bramedix-dark-mode [style*="border-bottom:1px solid #e2e8f0"], .bramedix-dark-mode [style*="border-bottom: 1px solid #e2e8f0"], .bramedix-dark-mode [style*="border-top: 1px solid rgb(226, 232, 240)"], .bramedix-dark-mode [style*="border-top:1px solid #e2e8f0"], .bramedix-dark-mode [style*="border-left: 1px solid rgb(226, 232, 240)"], .bramedix-dark-mode [style*="border-right: 1px solid rgb(226, 232, 240)"]{ border-color:var(--brx-dm-border)!important; } .bramedix-dark-mode [style*="box-shadow"]{ box-shadow:none!important; } .bramedix-dark-mode [style*="border-radius"]{ border-color:var(--brx-dm-border)!important; } /* Tables in dark mode: desktop tables and mobile table-cards. */ .bramedix-dark-mode table, .bramedix-dark-mode thead, .bramedix-dark-mode tbody{ background:transparent!important; color:var(--brx-dm-muted)!important; } .bramedix-dark-mode th{ background:var(--brx-dm-surface-2)!important; color:var(--brx-dm-subtle)!important; border-color:var(--brx-dm-border)!important; } .bramedix-dark-mode tr, .bramedix-dark-mode td{ border-color:var(--brx-dm-border)!important; } .bramedix-dark-mode tbody tr:hover td{ background:rgba(96,165,250,.06)!important; } @media (max-width:760px){ #bramedix-root .bramedix-dark-mode table[data-brx-mobile-table="1"] tr{ background:var(--brx-dm-card)!important; border-color:var(--brx-dm-border-strong)!important; } #bramedix-root .bramedix-dark-mode table[data-brx-mobile-table="1"] td{ color:var(--brx-dm-muted)!important; border-bottom-color:var(--brx-dm-border)!important; } #bramedix-root .bramedix-dark-mode table[data-brx-mobile-table="1"] td::before{ color:var(--brx-dm-accent)!important; } } /* Sidebar and bottom navigation polish. */ .bramedix-dark-mode .bramedix-sidebar-nav-item, .bramedix-dark-mode .bramedix-sidebar-subnav-item, .bramedix-dark-mode .bramedix-sidebar-facility-menu, .bramedix-dark-mode .bramedix-sidebar-signout, .bramedix-dark-mode .bramedix-bottom-nav-item{ color:var(--brx-dm-muted)!important; } .bramedix-dark-mode .bramedix-bottom-nav{ background:rgba(5,7,11,.96)!important; border-top:1px solid var(--brx-dm-border)!important; backdrop-filter:blur(18px)!important; } .bramedix-dark-mode .bramedix-bottom-nav-item[aria-current="page"], .bramedix-dark-mode .bramedix-bottom-nav-item[style*="color:#2f6fed"], .bramedix-dark-mode .bramedix-sidebar-nav-item[style*="background:#2f6fed"], .bramedix-dark-mode .bramedix-sidebar-nav-item[style*="background: #2f6fed"]{ color:#ffffff!important; } .bramedix-dark-mode svg[stroke="#2f6fed"], .bramedix-dark-mode svg[stroke="#007e8e"]{ stroke:var(--brx-dm-accent)!important; } .bramedix-dark-mode svg[fill="#2f6fed"], .bramedix-dark-mode svg[fill="#007e8e"]{ fill:var(--brx-dm-accent)!important; } .bramedix-dark-mode .bramedix-sidebar-nav-item[style*="background:#2f6fed"] svg, .bramedix-dark-mode .bramedix-sidebar-nav-item[style*="background: #2f6fed"] svg{ stroke:#ffffff!important; fill:none!important; } /* Badges and soft blue chips. */ .bramedix-dark-mode [style*="background:#dbeafe"], .bramedix-dark-mode [style*="background: #dbeafe"], .bramedix-dark-mode [style*="background: rgb(219, 234, 254)"], .bramedix-dark-mode [style*="background:#bfdbfe"], .bramedix-dark-mode [style*="background: #bfdbfe"]{ background:var(--brx-dm-accent-soft)!important; background-color:var(--brx-dm-accent-soft)!important; border-color:var(--brx-dm-accent-line)!important; color:#bfdbfe!important; } /* Modal overlays should stay dark and premium, not washed out. */ .bramedix-dark-mode .bramedix-modal-overlay{ background:rgba(0,0,0,.72)!important; backdrop-filter:blur(8px)!important; } .bramedix-dark-mode .bramedix-modal-box, .bramedix-dark-mode [role="dialog"]{ background:var(--brx-dm-surface)!important; color:var(--brx-dm-text)!important; border-color:var(--brx-dm-border-strong)!important; } /* PWA/install and dropdown surfaces. */ .bramedix-dark-mode [style*="position: absolute"], .bramedix-dark-mode [style*="position:absolute"], .bramedix-dark-mode [style*="position: fixed"], .bramedix-dark-mode [style*="position:fixed"]{ border-color:var(--brx-dm-border)!important; } /* Keep semantic statuses readable without letting green become the primary UI. */ .bramedix-dark-mode [style*="color:#10b981"], .bramedix-dark-mode [style*="color: #10b981"], .bramedix-dark-mode [style*="color: rgb(16, 185, 129)"]{ color:var(--brx-dm-success)!important; } .bramedix-dark-mode [style*="color:#ef4444"], .bramedix-dark-mode [style*="color: #ef4444"], .bramedix-dark-mode [style*="color:#b91c1c"], .bramedix-dark-mode [style*="color: #b91c1c"]{ color:var(--brx-dm-danger)!important; } .bramedix-dark-mode [style*="color:#f59e0b"], .bramedix-dark-mode [style*="color: #f59e0b"], .bramedix-dark-mode [style*="color:#d97706"], .bramedix-dark-mode [style*="color: #d97706"]{ color:var(--brx-dm-warning)!important; } /* Smarthms v1.3.46: final premium dark-mode shell cleanup. Keep the entire app dark in dark mode: no light gutters between cards, no bright divider lines around sidebar/header, and light-blue accents only. */ #bramedix-root.bramedix-dark-shell, #bramedix-root:has(> .bramedix-dark-mode){ background:#070b14!important; background-color:#070b14!important; } #bramedix-root .bramedix-dark-mode{ --brx-dm-bg:#070b14; --brx-dm-shell:#070b14; --brx-dm-surface:#090f1d; --brx-dm-surface-2:#0d1526; --brx-dm-surface-3:#111b2f; --brx-dm-card:#0b1220; --brx-dm-card-2:#0f172a; --brx-dm-border:rgba(148,163,184,.13); --brx-dm-border-strong:rgba(148,163,184,.20); --brx-dm-text:#f8fafc; --brx-dm-muted:#cbd5e1; --brx-dm-subtle:#8fa0b8; --brx-dm-accent:#7bb7ff; --brx-dm-accent-2:#4f8bff; --brx-dm-accent-soft:rgba(96,165,250,.16); background:#070b14!important; background-color:#070b14!important; } #bramedix-root .bramedix-dark-mode, #bramedix-root .bramedix-dark-mode .bramedix-page-scroll, #bramedix-root .bramedix-dark-mode .bramedix-page-motion-shell, #bramedix-root .bramedix-dark-mode .brx-page, #bramedix-root .bramedix-dark-mode .brx-page-actions{ background:#070b14!important; background-color:#070b14!important; color:#f8fafc!important; } #bramedix-root .bramedix-dark-mode .brx-topbar, #bramedix-root .bramedix-dark-mode .bramedix-bottom-nav, #bramedix-root .bramedix-dark-mode > div[style*="display: flex"][style*="flex-direction: column"] > div[style*="position: sticky"]{ background:#070b14!important; background-color:#070b14!important; border-color:rgba(148,163,184,.10)!important; box-shadow:none!important; } #bramedix-root .bramedix-dark-mode .bramedix-hide-scrollbar[style*="border-right"], #bramedix-root .bramedix-dark-mode [style*="border-right"], #bramedix-root .bramedix-dark-mode [style*="borderRight"]{ border-right-color:rgba(148,163,184,.10)!important; } #bramedix-root .bramedix-dark-mode [style*="border-bottom"], #bramedix-root .bramedix-dark-mode [style*="borderBottom"], #bramedix-root .bramedix-dark-mode [style*="border-top"], #bramedix-root .bramedix-dark-mode [style*="borderTop"]{ border-color:rgba(148,163,184,.10)!important; } #bramedix-root .bramedix-dark-mode [style*="background: rgb(245, 247, 251)"], #bramedix-root .bramedix-dark-mode [style*="background:#f5f7fb"], #bramedix-root .bramedix-dark-mode [style*="background: #f5f7fb"], #bramedix-root .bramedix-dark-mode [style*="background: rgb(248, 250, 252)"], #bramedix-root .bramedix-dark-mode [style*="background:#f8fafc"], #bramedix-root .bramedix-dark-mode [style*="background: #f8fafc"], #bramedix-root .bramedix-dark-mode [style*="background: rgb(250, 251, 252)"], #bramedix-root .bramedix-dark-mode [style*="background:#fafbfc"], #bramedix-root .bramedix-dark-mode [style*="background: #fafbfc"]{ background:#070b14!important; background-color:#070b14!important; } #bramedix-root .bramedix-dark-mode [style*="background: rgb(255, 255, 255)"], #bramedix-root .bramedix-dark-mode [style*="background:#fff"], #bramedix-root .bramedix-dark-mode [style*="background: #fff"], #bramedix-root .bramedix-dark-mode [style*="background: white"]{ background:#0b1220!important; background-color:#0b1220!important; border-color:rgba(148,163,184,.14)!important; box-shadow:none!important; } #bramedix-root .bramedix-dark-mode [style*="background: rgb(241, 245, 249)"], #bramedix-root .bramedix-dark-mode [style*="background:#f1f5f9"], #bramedix-root .bramedix-dark-mode [style*="background: #f1f5f9"], #bramedix-root .bramedix-dark-mode [style*="background:#eef4ff"], #bramedix-root .bramedix-dark-mode [style*="background: #eef4ff"], #bramedix-root .bramedix-dark-mode [style*="background: rgb(238, 244, 255)"]{ background:rgba(96,165,250,.14)!important; background-color:rgba(96,165,250,.14)!important; border-color:rgba(125,183,255,.22)!important; } #bramedix-root .bramedix-dark-mode [style*="background:#2f6fed"], #bramedix-root .bramedix-dark-mode [style*="background: #2f6fed"], #bramedix-root .bramedix-dark-mode [style*="background: rgb(47, 111, 237)"]{ background:linear-gradient(180deg,#5aa2ff 0%,#2f6fed 100%)!important; background-color:#4f8bff!important; border-color:#5aa2ff!important; color:#ffffff!important; } #bramedix-root .bramedix-dark-mode [style*="background:#007e8e"], #bramedix-root .bramedix-dark-mode [style*="background: #007e8e"], #bramedix-root .bramedix-dark-mode [style*="background: rgb(0, 126, 142)"]{ background:linear-gradient(180deg,#5aa2ff 0%,#2f6fed 100%)!important; background-color:#4f8bff!important; border-color:#5aa2ff!important; color:#ffffff!important; } #bramedix-root .bramedix-dark-mode input, #bramedix-root .bramedix-dark-mode select, #bramedix-root .bramedix-dark-mode textarea{ background:#0a1020!important; background-color:#0a1020!important; border-color:rgba(148,163,184,.18)!important; color:#f8fafc!important; } #bramedix-root .bramedix-dark-mode input:focus, #bramedix-root .bramedix-dark-mode select:focus, #bramedix-root .bramedix-dark-mode textarea:focus{ border-color:#7bb7ff!important; box-shadow:0 0 0 3px rgba(123,183,255,.16)!important; } #bramedix-root .bramedix-dark-mode .bramedix-sidebar-nav-item:hover, #bramedix-root .bramedix-dark-mode .bramedix-sidebar-subnav-item:hover, #bramedix-root .bramedix-dark-mode .bramedix-sidebar-facility-menu:hover{ background:rgba(96,165,250,.10)!important; } #bramedix-root .bramedix-dark-mode .bramedix-sidebar-nav-item[style*="background: rgb(47, 111, 237)"], #bramedix-root .bramedix-dark-mode .bramedix-sidebar-nav-item[style*="background:#2f6fed"], #bramedix-root .bramedix-dark-mode .bramedix-sidebar-nav-item[style*="background: #2f6fed"]{ background:linear-gradient(180deg,#5aa2ff 0%,#2f6fed 100%)!important; } /* Smarthms v1.3.48: dark-mode header action icon visibility. Message and notification icons are inline SVGs. Keep them light grey on dark surfaces even when a browser keeps the previous inline stroke color. */ .bramedix-dark-mode .bramedix-header-icon-button{ background:#0f1728!important; border-color:rgba(148,163,184,.20)!important; color:#cbd5e1!important; } .bramedix-dark-mode .bramedix-header-icon-button:hover{ background:#152038!important; border-color:rgba(203,213,225,.32)!important; } .bramedix-dark-mode .bramedix-header-icon-button svg, .bramedix-dark-mode .bramedix-header-icon-button svg *{ stroke:#cbd5e1!important; } .bramedix-dark-mode .bramedix-header-icon-button [style*="background: rgb(47, 111, 237)"], .bramedix-dark-mode .bramedix-header-icon-button [style*="background:#2f6fed"], .bramedix-dark-mode .bramedix-header-icon-button [style*="background: #2f6fed"]{ border-color:#0f1728!important; } /* Smarthms reports major cards must keep white text even when legacy green-to-blue compatibility rules match gradient colors like #047857. */ #bramedix-root .hms-report-major-card, #bramedix-root .hms-report-major-card div, #bramedix-root .hms-report-major-card span { color: #ffffff !important; } #bramedix-root .hms-report-major-card svg { stroke: #ffffff !important; }