/* ===================================================== AppDeployHub — Design System Dark/Light theme via [data-theme] on Primary palette: Material Design 3 "Kinetic Ether" ===================================================== */ /* ===== DARK THEME (default) ===== */ [data-theme="dark"] { --adh-bg: #131318; --adh-surface-lowest: #0e0e13; --adh-surface-low: #1b1b20; --adh-surface: #1f1f25; --adh-surface-high: #2a292f; --adh-surface-highest: #35343a; --adh-surface-bright: #39383e; --adh-on-surface: #f7f5fc; --adh-on-surface-var: #d8d0e5; --adh-outline: #958da1; --adh-outline-var: #4a4455; --adh-primary: #a78bfa; --adh-primary-container:#7c3aed; --adh-on-primary: #3f008e; --adh-on-primary-cont: #ede0ff; --adh-inv-primary: #732ee4; --adh-secondary: #4edea3; --adh-secondary-cont: #00a572; --adh-on-secondary: #003824; /* Better contrast variants */ --adh-secondary-high: #5ff0b3; --adh-secondary-low: #00d48a; --adh-tertiary: #ffb690; --adh-tertiary-cont: #aa4900; --adh-on-tertiary: #552100; --adh-error: #ffb4ab; --adh-error-cont: #93000a; /* Hero Accent (High Contrast) */ --adh-hero-accent: #7c3aed; /* Glassmorphism */ --adh-glass-bg: rgba(31, 31, 37, 0.5); --adh-glass-border: rgba(149, 141, 161, 0.15); --adh-glass-blur: blur(20px); /* Sidebar */ --adh-sidebar-bg: #131318; --adh-sidebar-text: rgba(204, 195, 216, 0.7); --adh-sidebar-label: rgba(204, 195, 216, 0.4); --adh-sidebar-border: rgba(74, 68, 85, 0.4); --adh-sidebar-item-hover: rgba(255, 255, 255, 0.06); --adh-sidebar-item-active: var(--adh-primary-container); /* Bootstrap overrides */ --bs-body-bg: #131318; --bs-body-color: #f7f5fc; --bs-border-color: #4a4455; --bs-card-bg: #1f1f25; --bs-dropdown-bg: #2a292f; --bs-dropdown-border-color: #4a4455; --bs-dropdown-link-color: #ccc3d8; --bs-dropdown-link-hover-bg: #35343a; --bs-dropdown-link-hover-color: #e4e1e9; --bs-dropdown-link-active-bg: #7c3aed; --bs-input-bg: #0e0e13; --bs-input-border-color: #4a4455; --bs-input-color: #e4e1e9; --bs-input-placeholder-color: #958da1; } /* ===== LIGHT THEME ===== */ [data-theme="light"] { --adh-bg: #fbfbfe; --adh-surface-lowest: #ffffff; --adh-surface-low: #f5f5f9; --adh-surface: #ffffff; --adh-surface-high: #efeff3; --adh-surface-highest: #e7e7eb; --adh-surface-bright: #ffffff; --adh-on-surface: #18181b; --adh-on-surface-var: #3f3f46; --adh-outline: #71717a; --adh-outline-var: #d4d4d8; --adh-primary: #6750a4; --adh-primary-container:#eaddff; --adh-on-primary: #ffffff; --adh-on-primary-cont: #21005d; --adh-inv-primary: #d0bcff; --adh-secondary: #198754; --adh-secondary-cont: #d1fae5; --adh-on-secondary: #ffffff; --adh-tertiary: #c75b21; --adh-tertiary-cont: #ffdbca; --adh-on-tertiary: #ffffff; --adh-error: #b3261e; --adh-error-cont: #ffdad6; /* Hero Accent (High Contrast) */ --adh-hero-accent: #6750a4; /* Glassmorphism (lighter on light bg) */ --adh-glass-bg: rgba(255, 255, 255, 0.7); --adh-glass-border: rgba(103, 80, 164, 0.12); --adh-glass-blur: blur(20px); /* Sidebar */ --adh-sidebar-bg: #fcfcff; --adh-sidebar-text: #49454f; --adh-sidebar-label: #79747e; --adh-sidebar-border: #e1e0e8; --adh-sidebar-item-hover: rgba(0, 0, 0, 0.05); --adh-sidebar-item-active: var(--adh-primary-container); /* Bootstrap overrides */ --bs-body-bg: #fafafa; --bs-body-color: #1c1b1f; --bs-border-color: #cac4d0; --bs-card-bg: #ffffff; --bs-dropdown-bg: #ffffff; --bs-dropdown-border-color: #cac4d0; --bs-dropdown-link-color: #49454f; --bs-dropdown-link-hover-bg: #f0eef8; --bs-dropdown-link-hover-color: #1c1b1f; --bs-dropdown-link-active-bg: #6750a4; --bs-input-bg: #ffffff; --bs-input-border-color: #cac4d0; --bs-input-color: #1c1b1f; --bs-input-placeholder-color: #79747e; } /* ===== BASE ===== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 1rem; line-height: 1.6; color: var(--adh-on-surface); background-color: var(--adh-bg); transition: background-color 0.2s ease, color 0.2s ease; } /* ===== TYPOGRAPHY ===== */ h1, h2, h3, h4, h5, h6, .headline, .display-font { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--adh-on-surface); font-weight: 700; letter-spacing: -0.02em; } /* ===== BOOTSTRAP VARIABLE SYNC ===== */ :root { --bs-primary: var(--adh-primary-container); --bs-primary-rgb: 124, 58, 237; --bs-success-rgb: 78, 222, 163; --bs-danger-rgb: 255, 180, 171; } /* ===== GLASSMORPHISM ===== */ .glass-card { background: var(--adh-glass-bg); -webkit-backdrop-filter: var(--adh-glass-blur); backdrop-filter: var(--adh-glass-blur); border: 1px solid var(--adh-glass-border); border-radius: 1.5rem; } .glass-nav { background: var(--adh-glass-bg); -webkit-backdrop-filter: var(--adh-glass-blur); backdrop-filter: var(--adh-glass-blur); border-bottom: 1px solid var(--adh-glass-border); } /* ===== SURFACE UTILITIES ===== */ .adh-surface { background: var(--adh-surface); } .adh-surface-low { background: var(--adh-surface-low); } .adh-surface-lowest { background: var(--adh-surface-lowest); } .adh-surface-high { background: var(--adh-surface-high); } .adh-surface-highest { background: var(--adh-surface-highest); } /* ===== CARDS ===== */ /* Premium card: depth via surface nesting, no hard 1px borders */ .premium-card { background: var(--adh-surface); border-radius: 1.5rem; padding: 1.5rem; transition: transform 0.25s ease, background 0.2s ease; } .premium-card:hover { transform: translateY(-4px); background: var(--adh-surface-high); } /* ===== BUTTONS ===== */ .btn-primary { background: var(--adh-primary-container); border: none; color: var(--adh-on-primary-cont); border-radius: 9999px; font-weight: 700; transition: box-shadow 0.25s ease, filter 0.2s ease, transform 0.1s ease; } .btn-primary:hover { background: var(--adh-primary-container); box-shadow: 0 0 30px rgba(124, 58, 237, 0.4); filter: brightness(1.1); color: var(--adh-on-primary-cont); } .btn-primary:active { transform: scale(0.96); } .btn-outline-primary { border-color: var(--adh-primary-container); color: var(--adh-primary); border-radius: 9999px; font-weight: 700; } .btn-outline-primary:hover { background: rgba(124, 58, 237, 0.1); border-color: var(--adh-primary-container); color: var(--adh-primary); } /* ===== SIDEBAR ===== */ .sidebar-shell { width: 280px; min-height: 100vh; background: var(--adh-sidebar-bg); border-right: 1px solid var(--adh-sidebar-border); overflow-y: auto; flex-shrink: 0; position: relative; z-index: 1030; } .sidebar-section { border-top: 1px solid var(--adh-sidebar-border); padding-top: 1rem; } .sidebar-section:first-of-type { border-top: 0; padding-top: 0; } .sidebar-label { color: var(--adh-sidebar-label); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; font-family: 'Inter', sans-serif; } .studio-context-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 0.875rem; background: var(--adh-sidebar-item-hover); border: 1px solid var(--adh-sidebar-border); transition: background 0.2s ease; } .studio-context-card:hover { background: var(--adh-sidebar-item-hover); filter: brightness(1.1); } .app-context-card { background: var(--adh-sidebar-item-hover); opacity: 0.8; } .min-width-0 { min-width: 0; } /* Sidebar nav links */ .sidebar-shell .nav-link { font-weight: 500; font-size: 0.875rem; padding: 0.5rem 0.75rem; border-radius: 0.625rem; color: var(--adh-sidebar-text) !important; transition: background 0.15s ease, color 0.15s ease; display: flex; align-items: center; gap: 0.5rem; } .sidebar-shell .nav-link:hover { background: var(--adh-sidebar-item-hover); color: var(--adh-primary) !important; } .sidebar-shell .nav-link.active { background: var(--adh-sidebar-item-active) !important; color: var(--adh-on-primary-cont) !important; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35); } /* Fix active nav text color in dark theme for proper contrast */ [data-theme="dark"] .sidebar-shell .nav-link.active { color: #ffffff !important; } /* ===== TOP BAR ===== */ .adh-topbar { background: var(--adh-glass-bg); -webkit-backdrop-filter: var(--adh-glass-blur); backdrop-filter: var(--adh-glass-blur); border-bottom: 1px solid var(--adh-glass-border); height: 56px; position: sticky; top: 0; z-index: 100; flex-shrink: 0; } .topbar-studio-btn { max-width: min(340px, 50vw); background: var(--adh-surface-high); border: 1px solid var(--adh-outline-var); color: var(--adh-on-surface); border-radius: 0.75rem; transition: background 0.2s ease; } .topbar-studio-btn:hover { background: var(--adh-surface-highest); color: var(--adh-on-surface); } /* ===== DROPDOWNS ===== */ .adh-dropdown { background: var(--adh-surface-high); border: 1px solid var(--adh-outline-var); border-radius: 0.875rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); overflow: hidden; } .adh-dropdown .dropdown-item { color: var(--adh-on-surface-var); font-size: 0.875rem; padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.5rem; transition: background 0.15s ease, color 0.15s ease; } .adh-dropdown .dropdown-item:hover { background: var(--adh-surface-highest); color: var(--adh-on-surface); } .adh-dropdown .dropdown-item.active { background: rgba(124, 58, 237, 0.2); color: var(--adh-primary); } .adh-dropdown .dropdown-header { color: var(--adh-outline); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.5rem 1rem 0.25rem; } .adh-dropdown .dropdown-divider { border-color: var(--adh-outline-var); margin: 0.25rem 0; } /* ===== AUTH CARDS ===== */ .auth-card { background: var(--adh-surface); border-radius: 1.5rem; border: 1px solid var(--adh-glass-border); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .auth-card { background: var(--adh-glass-bg); backdrop-filter: var(--adh-glass-blur); -webkit-backdrop-filter: var(--adh-glass-blur); } /* ===== FORM CONTROLS ===== */ .form-control, .form-select { background-color: var(--adh-surface-lowest); border-color: var(--adh-outline-var); color: var(--adh-on-surface); border-radius: 0.75rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-control:focus, .form-select:focus { background-color: var(--adh-surface-lowest); color: var(--adh-on-surface); border-color: var(--adh-primary-container); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2); outline: none; } .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--adh-surface-low) !important; border-style: dashed; opacity: 0.6; cursor: not-allowed; color: var(--adh-on-surface-var) !important; } .form-control::placeholder { color: var(--adh-outline); } .form-label { color: var(--adh-on-surface); font-size: 0.875rem; font-weight: 500; margin-bottom: 0.375rem; } .form-check-input:checked { background-color: var(--adh-primary-container); border-color: var(--adh-primary-container); } /* ===== VALIDATION ===== */ .valid.modified:not([type=checkbox]) { border-color: var(--adh-secondary); box-shadow: 0 0 0 3px rgba(78, 222, 163, 0.2); } .invalid { border-color: var(--adh-error); box-shadow: 0 0 0 3px rgba(255, 180, 171, 0.2); } .validation-message { color: var(--adh-error); font-size: 0.8rem; margin-top: 0.25rem; } /* ===== BADGES & CHIPS ===== */ .adh-badge-primary { background: rgba(124, 58, 237, 0.15); border: 1px solid rgba(124, 58, 237, 0.3); color: var(--adh-primary); border-radius: 9999px; padding: 0.2rem 0.75rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; } .adh-badge-secondary { background: rgba(78, 222, 163, 0.1); border: 1px solid rgba(78, 222, 163, 0.2); color: var(--adh-secondary); border-radius: 9999px; padding: 0.2rem 0.75rem; font-size: 0.75rem; font-weight: 700; } /* Automatic badge with guaranteed contrast */ .adh-badge-automatic { background: rgba(78, 222, 163, 0.12); border: 1px solid rgba(78, 222, 163, 0.2); color: var(--adh-secondary); border-radius: 9999px; padding: 0.2rem 0.75rem; font-size: 0.7rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.25rem; } [data-theme="light"] .adh-badge-automatic { background: rgba(25, 135, 84, 0.08); border-color: rgba(25, 135, 84, 0.15); color: #146c43; } /* Versions badge with guaranteed contrast */ .adh-badge-versions { background: rgba(13, 110, 253, 0.12); border: 1px solid rgba(13, 110, 253, 0.2); color: #0d6efd; border-radius: 9999px; padding: 0.2rem 0.75rem; font-size: 0.7rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.25rem; } [data-theme="dark"] .adh-badge-versions { background: rgba(110, 142, 251, 0.15); border-color: rgba(110, 142, 251, 0.25); color: #6e8efb; } /* Global fix for all Bootstrap subtle badges - guaranteed contrast */ [data-theme="dark"] .badge.bg-primary-subtle { background-color: rgba(124, 58, 237, 0.15) !important; color: var(--adh-primary) !important; border-color: rgba(124, 58, 237, 0.25) !important; } [data-theme="light"] .badge.bg-primary-subtle { background-color: rgba(103, 80, 164, 0.08) !important; color: #6750a4 !important; border-color: rgba(103, 80, 164, 0.15) !important; } [data-theme="dark"] .badge.bg-secondary-subtle { background-color: rgba(78, 222, 163, 0.15) !important; color: var(--adh-secondary) !important; border-color: rgba(78, 222, 163, 0.25) !important; } [data-theme="light"] .badge.bg-secondary-subtle { background-color: rgba(25, 135, 84, 0.1) !important; color: #198754 !important; border-color: rgba(25, 135, 84, 0.2) !important; } [data-theme="dark"] .badge.bg-success-subtle { background-color: rgba(78, 222, 163, 0.15) !important; color: var(--adh-secondary) !important; border-color: rgba(78, 222, 163, 0.25) !important; } [data-theme="light"] .badge.bg-success-subtle { background-color: rgba(25, 135, 84, 0.1) !important; color: #198754 !important; border-color: rgba(25, 135, 84, 0.2) !important; } [data-theme="dark"] .badge.bg-info-subtle { background-color: rgba(110, 142, 251, 0.15) !important; color: #6e8efb !important; border-color: rgba(110, 142, 251, 0.25) !important; } [data-theme="light"] .badge.bg-info-subtle { background-color: rgba(13, 110, 253, 0.08) !important; color: #0d6efd !important; border-color: rgba(13, 110, 253, 0.15) !important; } [data-theme="dark"] .badge.bg-warning-subtle { background-color: rgba(255, 182, 144, 0.15) !important; color: var(--adh-tertiary) !important; border-color: rgba(255, 182, 144, 0.25) !important; } [data-theme="light"] .badge.bg-warning-subtle { background-color: rgba(255, 193, 7, 0.08) !important; color: #664d03 !important; border-color: rgba(255, 193, 7, 0.15) !important; } [data-theme="dark"] .badge.bg-danger-subtle { background-color: rgba(255, 180, 171, 0.15) !important; color: var(--adh-error) !important; border-color: rgba(255, 180, 171, 0.25) !important; } [data-theme="light"] .badge.bg-danger-subtle { background-color: rgba(220, 53, 69, 0.08) !important; color: #b02a37 !important; border-color: rgba(220, 53, 69, 0.15) !important; } [data-theme="dark"] .badge.bg-light-subtle { background-color: rgba(255, 255, 255, 0.1) !important; color: var(--adh-on-surface) !important; border-color: rgba(255, 255, 255, 0.15) !important; } [data-theme="light"] .badge.bg-light-subtle { background-color: rgba(248, 249, 250, 0.75) !important; color: #495057 !important; border-color: rgba(0, 0, 0, 0.1) !important; } [data-theme="dark"] .badge.bg-dark-subtle { background-color: rgba(0, 0, 0, 0.2) !important; color: var(--adh-on-surface) !important; border-color: rgba(255, 255, 255, 0.1) !important; } [data-theme="light"] .badge.bg-dark-subtle { background-color: rgba(33, 37, 41, 0.08) !important; color: #212529 !important; border-color: rgba(33, 37, 41, 0.15) !important; } /* ===== THEME TOGGLE ===== */ .adh-theme-toggle { color: var(--adh-on-surface-var); text-decoration: none; font-size: 1rem; border-radius: 0.5rem; transition: color 0.2s ease, background 0.2s ease; } .adh-theme-toggle:hover { color: var(--adh-on-surface); background: var(--adh-surface-high); } [data-theme="dark"] .theme-icon-light { display: none; } [data-theme="light"] .theme-icon-dark { display: none; } /* ===== LANGUAGE SWITCHER ===== */ .adh-lang-btn { color: var(--adh-on-surface-var); font-size: 0.8rem; font-weight: 700; text-decoration: none; letter-spacing: 0.05em; transition: color 0.2s ease; } .adh-lang-btn:hover { color: var(--adh-on-surface); } /* ===== MAIN CONTENT AREA ===== */ .adh-main { background: var(--adh-bg); overflow-y: auto; flex: 1 1 auto; } /* ===== CARDS (Bootstrap override) ===== */ .card { background: var(--adh-surface); border: 1px solid var(--adh-outline-var); border-radius: 1rem; color: var(--adh-on-surface); } .card-header, .card-footer { background: var(--adh-surface-high); border-color: var(--adh-outline-var); color: var(--adh-on-surface); } /* ===== TABLES ===== */ .table { --bs-table-bg: transparent; --bs-table-color: var(--adh-on-surface); --bs-table-border-color: var(--adh-outline-var); --bs-table-hover-bg: var(--adh-surface-low); --bs-table-striped-bg: var(--adh-surface-lowest); } /* Dark theme table-light override */ [data-theme="dark"] .table-light { --bs-table-bg: var(--adh-surface-high); --bs-table-color: var(--adh-on-surface); --bs-table-border-color: var(--adh-outline-var); } [data-theme="dark"] .table-light th { color: var(--adh-on-surface) !important; background-color: var(--adh-surface-high) !important; border-color: var(--adh-outline-var) !important; } /* ===== NAV TABS ===== */ .nav-tabs { border-bottom-color: var(--adh-outline-var); } .nav-tabs .nav-link { color: var(--adh-on-surface-var); border-color: transparent; background: transparent; } .nav-tabs .nav-link:hover { color: var(--adh-on-surface); border-color: var(--adh-outline-var); background: var(--adh-surface-low); } .nav-tabs .nav-link.active { color: var(--adh-on-surface) !important; background: var(--adh-surface) !important; border-color: var(--adh-outline-var) !important; border-bottom-color: var(--adh-surface) !important; } /* ===== ALERTS (Bootstrap) ===== */ .alert { border-radius: 0.875rem; } /* Dark theme alert overrides for proper contrast */ [data-theme="dark"] .alert-info { background-color: rgba(124, 58, 237, 0.12); border-color: rgba(124, 58, 237, 0.25); color: var(--adh-primary); } [data-theme="dark"] .alert-info h6, [data-theme="dark"] .alert-info .fw-bold { color: var(--adh-primary); } [data-theme="dark"] .alert-info a { color: var(--adh-primary); } [data-theme="dark"] .alert-success { background-color: rgba(78, 222, 163, 0.12); border-color: rgba(78, 222, 163, 0.25); color: var(--adh-secondary); } [data-theme="dark"] .alert-warning { background-color: rgba(255, 182, 144, 0.12); border-color: rgba(255, 182, 144, 0.25); color: var(--adh-tertiary); } [data-theme="dark"] .alert-danger { background-color: rgba(255, 180, 171, 0.12); border-color: rgba(255, 180, 171, 0.25); color: var(--adh-error); } /* ===== PAGE TRANSITIONS ===== */ .page-fade-in { animation: fadeIn 0.35s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ===== LANDING PAGE ANIMATIONS ===== */ @keyframes pulse-soft { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.75; transform: scale(1.015); } } .animate-pulse-soft { animation: pulse-soft 3s infinite ease-in-out; } .badge-pulse { animation: pulse-soft 2s infinite ease-in-out; } /* ===== LANDING PAGE HERO GLOW ===== */ .adh-hero-glow { background: radial-gradient(circle at 50% -20%, rgba(124, 58, 237, 0.18), transparent 70%), radial-gradient(circle at 0% 100%, rgba(78, 222, 163, 0.05), transparent 50%); } /* ===== LANDING: hover lift ===== */ .hover-lift { transition: transform 0.25s ease, background 0.2s ease; } .hover-lift:hover { transform: translateY(-4px); } /* ===== SCROLLBAR ===== */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--adh-outline-var); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--adh-outline); } /* ===== BLAZOR ERROR / RECONNECT ===== */ .blazor-error-boundary { background: var(--adh-error-cont); color: var(--adh-error); padding: 1rem; border-radius: 0.75rem; margin: 1rem 0; } #blazor-error-ui { display: none; position: fixed; bottom: 0; width: 100%; z-index: 9999; padding: 0.75rem; text-align: center; color: white; background-color: var(--adh-primary-container); box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.3); } /* ===== MODAL OVERRIDES ===== */ .modal-content { background: var(--adh-surface-high); border: 1px solid var(--adh-outline-var); border-radius: 1.25rem; color: var(--adh-on-surface); } .modal-header, .modal-footer { border-color: var(--adh-outline-var); } .btn-close { filter: var(--adh-on-surface) invert(1); } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ===== MISC UTILITIES ===== */ .text-primary { color: var(--adh-primary) !important; } .text-secondary { color: var(--adh-secondary) !important; } .text-tertiary { color: var(--adh-tertiary) !important; } .text-muted { color: var(--adh-on-surface-var) !important; } .text-on-surface { color: var(--adh-on-surface) !important; } .bg-primary-container { background: var(--adh-primary-container) !important; } .bg-surface-low { background: var(--adh-surface-low) !important; } .bg-adh { background: var(--adh-bg) !important; } /* ===== LANDING SPECIFIC: Section backgrounds ===== */ .landing-section-dark { background: var(--adh-surface-low); } .landing-section-darker { background: var(--adh-surface-lowest); } /* ===== ACTIVE BADGE on nav ===== */ .active-badge { width: 6px; height: 6px; border-radius: 50%; background: var(--adh-secondary); display: inline-block; animation: pulse-soft 1.5s infinite; flex-shrink: 0; } /* Bootstrap class overrides for better theme compatibility */ [data-theme="dark"] .text-white { color: var(--adh-on-surface) !important; } [data-theme="dark"] .bg-white { background-color: var(--adh-surface-high) !important; color: var(--adh-on-surface) !important; } [data-theme="dark"] .bg-light { background-color: var(--adh-surface-high) !important; color: var(--adh-on-surface) !important; } [data-theme="light"] .bg-light { background-color: var(--adh-surface-low) !important; color: var(--adh-on-surface) !important; } [data-theme="dark"] .text-dark { color: var(--adh-on-surface) !important; } /* GLOBAL FIX: text-primary contrast issues in dark theme - FORCE OVERRIDE */ [data-theme="dark"] .text-primary, [data-theme="dark"] .text-primary:hover, [data-theme="dark"] .text-primary:focus, html[data-theme="dark"] .text-primary, html[data-theme="dark"] .text-primary:hover, html[data-theme="dark"] .text-primary:focus { color: #a78bfa !important; /* Better contrast purple for dark theme */ } /* Dark theme hover states */ [data-theme="dark"] .text-primary:hover, [data-theme="dark"] .text-primary:focus, html[data-theme="dark"] .text-primary:hover, html[data-theme="dark"] .text-primary:focus { color: #c4b5fd !important; /* Lighter purple on hover */ } /* Special cases for specific elements - FORCE OVERRIDE */ [data-theme="dark"] .spinner-border.text-primary, html[data-theme="dark"] .spinner-border.text-primary { border-color: #a78bfa !important; border-right-color: transparent !important; } [data-theme="dark"] .btn-link.text-primary, html[data-theme="dark"] .btn-link.text-primary { color: #a78bfa !important; } [data-theme="dark"] .btn-link.text-primary:hover, html[data-theme="dark"] .btn-link.text-primary:hover { color: #c4b5fd !important; } /* Force override for any Bootstrap text-primary usage */ [data-theme="dark"] *[class*="text-primary"], html[data-theme="dark"] *[class*="text-primary"] { color: #a78bfa !important; } [data-theme="dark"] .btn-light { background-color: var(--adh-surface-high); border-color: var(--adh-outline-var); color: var(--adh-on-surface); } [data-theme="dark"] .btn-light:hover, [data-theme="dark"] .btn-light:focus { background-color: var(--adh-surface-highest); border-color: var(--adh-outline); color: var(--adh-on-surface); } [data-theme="light"] .btn-light { background-color: var(--adh-surface-low); border-color: var(--adh-outline-var); color: var(--adh-on-surface); } [data-theme="light"] .btn-light:hover, [data-theme="light"] .btn-light:focus { background-color: var(--adh-surface-high); color: var(--adh-on-surface); } [data-theme="dark"] .btn-outline-dark { color: var(--adh-on-surface); border-color: var(--adh-outline); } [data-theme="dark"] .btn-outline-dark:hover { color: var(--adh-on-surface); background-color: var(--adh-surface-highest); border-color: var(--adh-outline); } /* Fix table headers in dark theme */ [data-theme="dark"] .table-light { --bs-table-bg: var(--adh-surface-high) !important; --bs-table-color: var(--adh-on-surface) !important; --bs-table-border-color: var(--adh-outline-var) !important; } [data-theme="dark"] .table-light th { color: var(--adh-on-surface) !important; background-color: var(--adh-surface-high) !important; border-color: var(--adh-outline-var) !important; } /* Fix Bootstrap table color variants for dark theme */ [data-theme="dark"] .table-success { --bs-table-bg: rgba(78, 222, 163, 0.12) !important; --bs-table-color: var(--adh-on-surface) !important; --bs-table-border-color: var(--adh-outline-var) !important; } [data-theme="dark"] .table-success th, [data-theme="dark"] .table-success td { color: var(--adh-on-surface) !important; } [data-theme="dark"] .table-warning { --bs-table-bg: rgba(255, 182, 144, 0.12) !important; --bs-table-color: var(--adh-on-surface) !important; --bs-table-border-color: var(--adh-outline-var) !important; } [data-theme="dark"] .table-warning th, [data-theme="dark"] .table-warning td { color: var(--adh-on-surface) !important; } [data-theme="dark"] .table-info { --bs-table-bg: rgba(124, 58, 237, 0.12) !important; --bs-table-color: var(--adh-on-surface) !important; --bs-table-border-color: var(--adh-outline-var) !important; } [data-theme="dark"] .table-info th, [data-theme="dark"] .table-info td { color: var(--adh-on-surface) !important; } [data-theme="dark"] .table-primary { --bs-table-bg: rgba(124, 58, 237, 0.12) !important; --bs-table-color: var(--adh-on-surface) !important; --bs-table-border-color: var(--adh-outline-var) !important; } [data-theme="dark"] .table-primary th, [data-theme="dark"] .table-primary td { color: var(--adh-on-surface) !important; } [data-theme="dark"] .table-danger { --bs-table-bg: rgba(255, 180, 171, 0.12) !important; --bs-table-color: var(--adh-on-surface) !important; --bs-table-border-color: var(--adh-outline-var) !important; } [data-theme="dark"] .table-danger th, [data-theme="dark"] .table-danger td { color: var(--adh-on-surface) !important; } [data-theme="dark"] .table-secondary { --bs-table-bg: var(--adh-surface-low) !important; --bs-table-color: var(--adh-on-surface) !important; --bs-table-border-color: var(--adh-outline-var) !important; } [data-theme="dark"] .table-secondary th, [data-theme="dark"] .table-secondary td { color: var(--adh-on-surface) !important; } /* Fix form controls in dark theme */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--adh-surface-lowest); border-color: var(--adh-outline-var); color: var(--adh-on-surface); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--adh-surface-lowest); color: var(--adh-on-surface); border-color: var(--adh-primary-container); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2); } [data-theme="dark"] .form-control::placeholder { color: var(--adh-outline); } /* Fix input groups */ [data-theme="dark"] .input-group-text { background-color: var(--adh-surface-lowest); border-color: var(--adh-outline-var); color: var(--adh-on-surface-var); } /* Fix dropdowns */ [data-theme="dark"] .dropdown-menu { background-color: var(--adh-surface-high); border-color: var(--adh-outline-var); } [data-theme="dark"] .dropdown-item { color: var(--adh-on-surface-var); } [data-theme="dark"] .dropdown-item:hover { background-color: var(--adh-surface-highest); color: var(--adh-on-surface); } [data-theme="dark"] .dropdown-divider { border-color: var(--adh-outline-var); } /* Fix modals */ [data-theme="dark"] .modal-content { background-color: var(--adh-surface-high); border-color: var(--adh-outline-var); color: var(--adh-on-surface); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--adh-outline-var); } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Fix pagination */ [data-theme="dark"] .page-link { background-color: var(--adh-surface-high); border-color: var(--adh-outline-var); color: var(--adh-on-surface); } [data-theme="dark"] .page-link:hover { background-color: var(--adh-surface-highest); color: var(--adh-on-surface); } [data-theme="dark"] .page-item.active .page-link { background-color: var(--adh-primary-container); border-color: var(--adh-primary-container); color: var(--adh-on-primary-cont); } /* Bootstrap subtle alert/badge variants: ensure readable text in dark mode */ [data-theme="dark"] .bg-info-subtle { background-color: rgba(124, 58, 237, 0.12) !important; } [data-theme="dark"] .bg-info-subtle .text-info { color: var(--adh-primary) !important; } [data-theme="dark"] .text-info-emphasis { color: var(--adh-primary) !important; } [data-theme="dark"] .bg-warning-subtle { background-color: rgba(255, 182, 144, 0.12) !important; } [data-theme="dark"] .text-warning-emphasis { color: var(--adh-tertiary) !important; } [data-theme="dark"] .bg-danger-subtle { background-color: rgba(255, 180, 171, 0.12) !important; } [data-theme="dark"] .bg-success-subtle { background-color: rgba(124, 58, 237, 0.1) !important; } [data-theme="dark"] .text-success-emphasis { color: var(--adh-primary) !important; } [data-theme="dark"] .bg-primary-subtle { background-color: rgba(210, 187, 255, 0.1) !important; } [data-theme="dark"] .text-primary-emphasis { color: var(--adh-primary) !important; } /* Fix card borders for dark theme */ [data-theme="dark"] .border-success { border-color: var(--adh-primary-container) !important; } [data-theme="dark"] .border-info { border-color: var(--adh-secondary) !important; } [data-theme="dark"] .border-primary { border-color: var(--adh-primary-container) !important; } /* Fix text colors for dark theme */ [data-theme="dark"] .text-success { color: var(--adh-secondary) !important; } [data-theme="dark"] .text-info { color: var(--adh-secondary) !important; } [data-theme="dark"] .text-primary { color: var(--adh-primary) !important; } /* Fix badges for dark theme */ [data-theme="dark"] .badge.bg-success { background-color: var(--adh-secondary) !important; color: var(--adh-on-secondary) !important; } [data-theme="dark"] .badge.bg-info { background-color: var(--adh-surface-highest) !important; color: var(--adh-on-surface) !important; border: 1px solid var(--adh-outline-var) !important; } [data-theme="dark"] .badge.bg-primary { background-color: var(--adh-primary-container) !important; color: var(--adh-on-primary-cont) !important; } [data-theme="dark"] .badge.bg-warning { background-color: var(--adh-tertiary-cont) !important; color: var(--adh-on-tertiary) !important; } [data-theme="dark"] .badge.bg-danger { background-color: var(--adh-error-cont) !important; color: var(--adh-error) !important; } [data-theme="dark"] .badge.bg-secondary { background-color: var(--adh-surface-highest) !important; color: var(--adh-on-surface) !important; border: 1px solid var(--adh-outline-var) !important; } [data-theme="dark"] .badge.bg-light { background-color: var(--adh-surface-highest) !important; color: var(--adh-on-surface) !important; border-color: var(--adh-outline-var) !important; } /* Fix card headers in dark theme */ [data-theme="dark"] .card-header { background-color: var(--adh-surface-high) !important; border-color: var(--adh-outline-var) !important; color: var(--adh-on-surface) !important; } /* Fix special cases */ [data-theme="dark"] .bg-primary-container { background-color: var(--adh-primary-container) !important; color: var(--adh-on-primary-cont) !important; } /* Fix text selection */ [data-theme="dark"] ::selection { background-color: rgba(124, 58, 237, 0.3); color: var(--adh-on-surface); } /* Fix focus outlines */ [data-theme="dark"] :focus { outline-color: var(--adh-primary-container); } /* ===== ACCESSIBILITY & CONTRAST ENHANCEMENTS ===== */ /* Ensure minimum 4.5:1 contrast ratio for normal text */ [data-theme="dark"] .text-muted { color: var(--adh-on-surface-var) !important; opacity: 0.8; } [data-theme="dark"] .small.text-muted { color: var(--adh-on-surface-var) !important; opacity: 0.7; } /* Enhanced focus indicators for keyboard navigation */ [data-theme="dark"] *:focus-visible { outline: 2px solid var(--adh-primary-container); outline-offset: 2px; } /* Better button contrast */ [data-theme="dark"] .btn { font-weight: 500; } [data-theme="dark"] .btn-outline-primary { border-color: var(--adh-primary); color: var(--adh-primary); } [data-theme="dark"] .btn-outline-primary:hover { background-color: var(--adh-primary-container); border-color: var(--adh-primary-container); color: var(--adh-on-primary-cont); } /* Form validation enhancements */ [data-theme="dark"] .is-valid { border-color: var(--adh-secondary) !important; } [data-theme="dark"] .is-invalid { border-color: var(--adh-error) !important; } /* Code blocks and syntax highlighting */ [data-theme="dark"] code { background-color: var(--adh-surface-low); color: var(--adh-on-surface); padding: 0.125rem 0.25rem; border-radius: 0.25rem; font-size: 0.875em; } [data-theme="dark"] pre { background-color: var(--adh-surface-low); border: 1px solid var(--adh-outline-var); border-radius: 0.5rem; padding: 1rem; overflow-x: auto; } [data-theme="dark"] pre code { background: none; padding: 0; } /* Loading states */ [data-theme="dark"] .spinner-border { border-color: var(--adh-primary-container); border-right-color: transparent; } [data-theme="dark"] .spinner-border-sm { border-color: var(--adh-primary-container); border-right-color: transparent; } /* Progress bars */ [data-theme="dark"] .progress { background-color: var(--adh-surface-low); } [data-theme="dark"] .progress-bar { background-color: var(--adh-primary-container); } /* Tooltips */ [data-theme="dark"] .tooltip { --bs-tooltip-bg: var(--adh-surface-highest); --bs-tooltip-color: var(--adh-on-surface); --bs-tooltip-border-color: var(--adh-outline-var); } [data-theme="dark"] .tooltip .tooltip-arrow::before { border-top-color: var(--adh-surface-highest); border-bottom-color: var(--adh-surface-highest); border-left-color: var(--adh-surface-highest); border-right-color: var(--adh-surface-highest); } /* ===== LIGHT THEME ACCESSIBILITY ENHANCEMENTS ===== */ [data-theme="light"] .text-muted { color: var(--adh-on-surface-var) !important; opacity: 0.7; } [data-theme="light"] *:focus-visible { outline: 2px solid var(--adh-primary-container); outline-offset: 2px; } [data-theme="light"] code { background-color: var(--adh-surface-low); color: var(--adh-on-surface); padding: 0.125rem 0.25rem; border-radius: 0.25rem; font-size: 0.875em; } [data-theme="light"] pre { background-color: var(--adh-surface-low); border: 1px solid var(--adh-outline-var); border-radius: 0.5rem; padding: 1rem; overflow-x: auto; } [data-theme="light"] pre code { background: none; padding: 0; } /* ===== VERSION STATUS COMPONENTS ===== */ /* Version Status Card Styles */ .version-status-card { border-radius: 0.5rem; padding: 0.75rem; border: 1px solid var(--adh-outline-var); background: var(--adh-surface); margin-bottom: 0.5rem; transition: all 0.2s ease; position: relative; } .version-status-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .version-status-card-compact { padding: 0.5rem; font-size: 0.875rem; } /* ===== VERSION PILLS - NEW HORIZONTAL LAYOUT ===== */ .version-pills-container { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; line-height: 1.2; } .version-pill { display: inline-flex; align-items: center; padding: 0.375rem 0.625rem; border-radius: 1rem; font-size: 0.775rem; font-weight: 500; transition: all 0.2s ease; cursor: default; position: relative; white-space: nowrap; border: 1px solid transparent; } .version-pill:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .version-pill-production { background: linear-gradient(135deg, #10b981, #059669); color: white; border-color: #059669; } .version-pill-testing { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; border-color: #2563eb; } .version-pill-newer { background: linear-gradient(135deg, #f59e0b, #d97706) !important; border-color: #d97706 !important; animation: pulse-warning 2s infinite; } .version-pill-draft { background: linear-gradient(135deg, #6b7280, #4b5563); color: white; border-color: #4b5563; opacity: 0.8; } .version-pill-empty { background: transparent; border: 1px dashed #d1d5db; color: #6b7280; padding: 0.25rem 0.5rem; font-size: 0.75rem; } .version-pill-label { font-weight: 600; margin-right: 0.25rem; letter-spacing: 0.025em; } .version-pill-number { font-weight: 400; opacity: 0.9; } .version-pill-arrow { margin-left: 0.375rem; font-size: 0.875rem; animation: bounce-arrow 1.5s infinite; } /* Dark theme adjustments for version pills */ [data-theme="dark"] .version-pill-production { background: linear-gradient(135deg, #059669, #047857); border-color: #047857; } [data-theme="dark"] .version-pill-testing { background: linear-gradient(135deg, #2563eb, #1d4ed8); border-color: #1d4ed8; } [data-theme="dark"] .version-pill-newer { background: linear-gradient(135deg, #d97706, #b45309) !important; border-color: #b45309 !important; } [data-theme="dark"] .version-pill-draft { background: linear-gradient(135deg, #4b5563, #374151); border-color: #374151; } [data-theme="dark"] .version-pill-empty { border-color: #4b5563; color: #9ca3af; } /* Animations */ @keyframes pulse-warning { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } } @keyframes bounce-arrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } /* Responsive adjustments for version pills */ @media (max-width: 768px) { .version-pill { padding: 0.25rem 0.5rem; font-size: 0.725rem; } .version-pills-container { gap: 0.375rem; } } .version-status-header { display: flex; align-items: center; gap: 0.5rem; } .version-status-icon { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .version-status-info { flex-grow: 1; min-width: 0; } .version-status-label { font-size: 0.75rem; text-transform: uppercase; font-weight: 600; color: var(--adh-on-surface-var); margin-bottom: 0.125rem; } .version-status-version { font-weight: 600; color: var(--adh-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .version-status-newer { flex-shrink: 0; color: var(--adh-tertiary); animation: pulse 2s infinite; } .version-status-subtitle { font-size: 0.75rem; color: var(--adh-on-surface-var); margin-top: 0.25rem; } .version-status-comparison { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--adh-outline-var); } .comparison-text { font-size: 0.75rem; color: var(--adh-tertiary); font-weight: 500; } /* Version Status Card Variants */ .version-status-production { border-color: var(--adh-secondary); background-color: rgba(78, 222, 163, 0.1); } .version-status-production .version-status-icon { background-color: var(--adh-secondary); color: var(--adh-on-secondary); } .version-status-testing { border-color: var(--adh-primary); background-color: rgba(124, 58, 237, 0.1); } .version-status-testing .version-status-icon { background-color: var(--adh-primary); color: var(--adh-on-primary); } .version-status-draft { border-color: var(--adh-outline-var); background-color: var(--adh-surface-low); } .version-status-draft .version-status-icon { background-color: var(--adh-surface-highest); color: var(--adh-on-surface-var); } .version-status-newer-production { border-color: var(--adh-tertiary); background-color: rgba(255, 182, 144, 0.15); animation: highlight-pulse 3s ease-in-out infinite; } .version-status-newer-production .version-status-icon { background-color: var(--adh-tertiary); color: var(--adh-on-tertiary); } /* Version Timeline Styles */ .version-timeline { width: 100%; } .timeline-container { position: relative; padding-left: 1.5rem; } .timeline-container::before { content: ''; position: absolute; left: 0.75rem; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--adh-primary), var(--adh-secondary)); } .timeline-item { position: relative; margin-bottom: 1.5rem; padding: 1rem; border-radius: 0.5rem; background-color: var(--adh-surface-low); border: 1px solid var(--adh-outline-var); transition: all 0.2s ease; } .timeline-item:hover { transform: translateX(4px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .timeline-marker { position: absolute; left: -1.5rem; top: 1rem; width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--adh-surface-high); border: 2px solid var(--adh-outline-var); color: var(--adh-on-surface); } /* Timeline expand button */ .timeline-expand-container { text-align: center; margin: 1rem 0; padding: 0.5rem 0; border-top: 1px dashed var(--adh-outline-variant); } .timeline-expand-container .btn { font-size: 0.8rem; padding: 0.25rem 0.75rem; border-radius: 1rem; transition: all 0.2s ease; } .timeline-expand-container .btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .timeline-content { width: 100%; } .timeline-header { display: flex; justify-content: between; align-items: center; margin-bottom: 0.5rem; gap: 0.5rem; } .timeline-version { font-weight: 600; color: var(--adh-on-surface); } .timeline-status { font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 1rem; background-color: var(--adh-surface-highest); color: var(--adh-on-surface-var); } .timeline-platform { font-size: 0.75rem; color: var(--adh-on-surface-var); margin-bottom: 0.25rem; } .timeline-date { font-size: 0.75rem; color: var(--adh-on-surface-var); margin-bottom: 0.5rem; } .timeline-highlight { font-size: 0.75rem; color: var(--adh-tertiary); font-weight: 500; display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; background-color: rgba(255, 182, 144, 0.15); border-radius: 0.25rem; } .timeline-item-newer { border-color: var(--adh-tertiary); background-color: rgba(255, 182, 144, 0.1); } .timeline-item-newer .timeline-marker { background-color: var(--adh-tertiary); color: var(--adh-on-tertiary); border-color: var(--adh-tertiary); } .timeline-item-production { border-color: var(--adh-secondary); background-color: rgba(78, 222, 163, 0.1); } .timeline-item-production .timeline-marker { background-color: var(--adh-secondary); color: var(--adh-on-secondary); border-color: var(--adh-secondary); } .timeline-item-testing { border-color: var(--adh-primary); background-color: rgba(124, 58, 237, 0.1); } .timeline-item-testing .timeline-marker { background-color: var(--adh-primary); color: var(--adh-on-primary); border-color: var(--adh-primary); } .timeline-empty { text-align: center; padding: 3rem 1rem; color: var(--adh-on-surface-var); } /* Animations */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @keyframes highlight-pulse { 0%, 100% { background-color: rgba(255, 182, 144, 0.15); border-color: var(--adh-tertiary); } 50% { background-color: rgba(255, 182, 144, 0.25); border-color: var(--adh-tertiary-cont); } } /* Dark theme adjustments */ [data-theme="dark"] .version-status-card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .version-status-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .timeline-item { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .timeline-item:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } /* Responsive adjustments */ @media (max-width: 768px) { .version-status-card { padding: 0.5rem; } .timeline-container { padding-left: 1rem; } .timeline-container::before { left: 0.5rem; } .timeline-marker { left: -1rem; width: 1.5rem; height: 1.5rem; top: 0.75rem; } .timeline-item { padding: 0.75rem; margin-bottom: 1rem; } } /* ===================================================== FINAL OVERRIDE - MAXIMUM PRIORITY CSS RULES ===================================================== */ /* Force text-primary contrast in dark theme - LAST RULE WINS */ [data-theme="dark"] .text-primary, html[data-theme="dark"] .text-primary, body[data-theme="dark"] .text-primary, [data-theme="dark"] *[class*="text-primary"], html[data-theme="dark"] *[class*="text-primary"], body[data-theme="dark"] *[class*="text-primary"] { color: #a78bfa !important; } /* Force hover states */ [data-theme="dark"] .text-primary:hover, html[data-theme="dark"] .text-primary:hover, body[data-theme="dark"] .text-primary:hover, [data-theme="dark"] *[class*="text-primary"]:hover, html[data-theme="dark"] *[class*="text-primary"]:hover, body[data-theme="dark"] *[class*="text-primary"]:hover { color: #c4b5fd !important; } /* Force spinner borders */ [data-theme="dark"] .spinner-border.text-primary, html[data-theme="dark"] .spinner-border.text-primary, body[data-theme="dark"] .spinner-border.text-primary { border-color: #a78bfa !important; border-right-color: transparent !important; }