/* LinkedIn-inspired Theme for Competition Registration System */ /* Apply by adding class 'theme-linkedin' to */ html.theme-linkedin { /* LinkedIn Brand Colors */ --primary: #0A66C2; --primary-dark: #004182; --primary-light: #378FE9; --primary-50: #E8F4FD; --primary-100: #D0E8FA; /* Accent - LinkedIn uses green for success, keeping orange subtle */ --accent: #057642; --accent-dark: #045E35; --accent-light: #44A15E; /* Semantic colors - LinkedIn style */ --success: #057642; --warning: #C37D16; --danger: #CC1016; --info: #0A66C2; /* LinkedIn Neutrals - warmer grays */ --white: #FFFFFF; --gray-50: #F9FAFB; --gray-100: #F3F2EF; --gray-200: #E9E5DF; --gray-300: #D1CCC4; --gray-400: #9B9691; --gray-500: #6B6560; --gray-600: #5A5550; --gray-700: #434240; --gray-800: #2C2C2C; --gray-900: #191919; /* LinkedIn shadows - more subtle */ --shadow-sm: 0 0 0 1px rgba(0, 0, 0, 0.08); --shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08); --shadow-md: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.1); --shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.12); /* LinkedIn border radius - more rounded */ --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; /* Background */ background: #F3F2EF; } /* ============================================ LINKEDIN NAVBAR ============================================ */ html.theme-linkedin .navbar { background: var(--white) !important; border-bottom: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 3px rgba(0, 0, 0, 0.05); padding: 3px 0; min-height: 30px; } html.theme-linkedin .navbar .container { align-items: center; } html.theme-linkedin .navbar-brand { display: flex; align-items: center; padding-bottom: 0; margin-bottom: 0; color: rgba(0, 0, 0, 0.6) !important; font-weight: 600; font-size: 1.1rem; } html.theme-linkedin .navbar-brand:hover { color: rgba(0, 0, 0, 0.9) !important; } html.theme-linkedin .navbar-nav .nav-link { color: rgba(0, 0, 0, 0.6) !important; font-weight: 400; font-size: 12px; padding: 0.25rem 0.5rem !important; display: flex; flex-direction: row; align-items: center; border-radius: 0; border-bottom: none; margin: 0 2px; } html.theme-linkedin .navbar-nav .nav-link:hover { color: rgba(0, 0, 0, 0.9) !important; background: transparent; } html.theme-linkedin .navbar-nav .nav-link.active { color: var(--gray-900) !important; background: transparent; border-bottom: 2px solid var(--gray-900); } html.theme-linkedin .navbar-nav .nav-link i { font-size: 1rem; margin-right: 4px; } /* ============================================ LINKEDIN CARDS ============================================ */ html.theme-linkedin .card { background: var(--white); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; } html.theme-linkedin .card:hover { box-shadow: var(--shadow-md); } html.theme-linkedin .card-header { background: var(--white) !important; border-bottom: 1px solid var(--gray-200); padding: 16px 20px; color: var(--gray-900) !important; font-weight: 600; font-size: 16px; } /* White text ONLY for headers with truly dark backgrounds */ html.theme-linkedin .card-header.bg-primary, html.theme-linkedin .card-header.bg-primary strong, html.theme-linkedin .card-header.bg-primary h1, html.theme-linkedin .card-header.bg-primary h2, html.theme-linkedin .card-header.bg-primary h3, html.theme-linkedin .card-header.bg-primary h4, html.theme-linkedin .card-header.bg-primary h5, html.theme-linkedin .card-header.bg-primary h6, html.theme-linkedin .card-header.bg-primary > div > i, html.theme-linkedin .card-header.bg-dark, html.theme-linkedin .card-header.bg-dark strong, html.theme-linkedin .card-header.bg-secondary, html.theme-linkedin .card-header.bg-secondary strong { color: #ffffff !important; } /* Preserve dark background for bg-primary headers */ html.theme-linkedin .card-header.bg-primary { background-color: var(--primary) !important; } /* Black text for headers with light backgrounds (success, warning, info become white in theme) */ html.theme-linkedin .card-header.bg-success, html.theme-linkedin .card-header.bg-success strong, html.theme-linkedin .card-header.bg-warning, html.theme-linkedin .card-header.bg-warning strong, html.theme-linkedin .card-header.bg-info, html.theme-linkedin .card-header.bg-info strong { color: var(--gray-900) !important; } /* Ensure edit/delete button icons are dark */ html.theme-linkedin .card-header .btn-light, html.theme-linkedin .card-header .btn-light i { color: #212529 !important; } html.theme-linkedin .card-header .btn-light.text-danger, html.theme-linkedin .card-header .btn-light.text-danger i { color: #dc3545 !important; } html.theme-linkedin .card-header h1, html.theme-linkedin .card-header h2, html.theme-linkedin .card-header h3, html.theme-linkedin .card-header h4, html.theme-linkedin .card-header h5, html.theme-linkedin .card-header h6 { color: var(--gray-900) !important; font-weight: 600; } html.theme-linkedin .card-header i { color: var(--primary); } /* Secondary headers - LinkedIn style */ html.theme-linkedin .card-header-secondary, html.theme-linkedin .card-header.card-header-secondary { background: var(--gray-50) !important; color: var(--gray-800) !important; border-bottom: 1px solid var(--gray-200); } html.theme-linkedin .card-header-tertiary, html.theme-linkedin .card-header.card-header-tertiary { background: var(--primary-50) !important; color: var(--primary-dark) !important; border-bottom: 1px solid var(--primary-100); } html.theme-linkedin .card-header-light, html.theme-linkedin .card-header.card-header-light { background: var(--white) !important; color: var(--gray-800) !important; border-bottom: 1px solid var(--gray-100); } html.theme-linkedin .card-body { padding: 16px 20px; } html.theme-linkedin .card-footer { background: var(--gray-50); border-top: 1px solid var(--gray-200); padding: 12px 20px; } /* ============================================ LINKEDIN GLASS CONTAINER (Page Headers) ============================================ */ html.theme-linkedin .glass-container { background: linear-gradient(135deg, #0A66C2 0%, #004182 100%); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } html.theme-linkedin .glass-container h1, html.theme-linkedin .glass-container h2, html.theme-linkedin .glass-container h3 { color: var(--white) !important; } html.theme-linkedin .glass-container p { color: rgba(255, 255, 255, 0.85) !important; } /* ============================================ LINKEDIN BUTTONS ============================================ */ html.theme-linkedin .btn-primary { background: var(--primary); border-color: var(--primary); border-radius: 24px; padding: 8px 16px; font-weight: 600; font-size: 14px; transition: all 0.15s ease; } html.theme-linkedin .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: var(--shadow-sm); } html.theme-linkedin .btn-secondary { background: transparent; border: 1px solid var(--primary); color: var(--primary); border-radius: 24px; padding: 8px 16px; font-weight: 600; font-size: 14px; } html.theme-linkedin .btn-secondary:hover { background: var(--primary-50); border-color: var(--primary-dark); color: var(--primary-dark); } html.theme-linkedin .btn-success { background: var(--success); border-color: var(--success); border-radius: 24px; } html.theme-linkedin .btn-success:hover { background: var(--accent-dark); border-color: var(--accent-dark); } html.theme-linkedin .btn-danger { background: var(--danger); border-color: var(--danger); border-radius: 24px; } html.theme-linkedin .btn-outline-primary { border-radius: 24px; border-color: var(--primary); color: var(--primary); } html.theme-linkedin .btn-outline-primary:hover { background: var(--primary); color: var(--white); } html.theme-linkedin .btn-outline-secondary { border-radius: 24px; border-color: var(--gray-400); color: var(--gray-600); } html.theme-linkedin .btn-outline-secondary:hover { background: var(--gray-100); color: var(--gray-800); border-color: var(--gray-500); } /* ============================================ LINKEDIN FORMS ============================================ */ html.theme-linkedin .form-control, html.theme-linkedin .form-select { border: 1px solid var(--gray-300); border-radius: var(--radius); padding: 10px 12px; font-size: 14px; transition: all 0.15s ease; } html.theme-linkedin .form-control:focus, html.theme-linkedin .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-100); } html.theme-linkedin .form-label { font-weight: 600; font-size: 14px; color: var(--gray-700); margin-bottom: 4px; } html.theme-linkedin .input-group-text { background: var(--gray-100); border: 1px solid var(--gray-300); color: var(--gray-600); } /* ============================================ LINKEDIN TABLES ============================================ */ html.theme-linkedin .table { font-size: 14px; } html.theme-linkedin .table thead th { background: var(--gray-50); color: var(--gray-600); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--gray-200); padding: 12px 16px; } html.theme-linkedin .table tbody td { padding: 12px 16px; vertical-align: middle; border-bottom: 1px solid var(--gray-100); color: var(--gray-700); } html.theme-linkedin .table tbody tr:hover { background: var(--gray-50); } html.theme-linkedin .table-striped tbody tr:nth-of-type(odd) { background: var(--gray-50); } /* ============================================ LINKEDIN BADGES ============================================ */ html.theme-linkedin .badge { font-weight: 600; font-size: 12px; padding: 4px 10px; border-radius: 12px; } html.theme-linkedin .badge.bg-primary { background: var(--primary-100) !important; color: var(--primary-dark) !important; } html.theme-linkedin .badge.bg-success { background: #E6F4EA !important; color: var(--success) !important; } html.theme-linkedin .badge.bg-warning { background: #FEF3E1 !important; color: var(--warning) !important; } html.theme-linkedin .badge.bg-danger { background: #FDECEA !important; color: var(--danger) !important; } html.theme-linkedin .badge.bg-info { background: var(--primary-100) !important; color: var(--primary) !important; } html.theme-linkedin .badge.bg-secondary { background: var(--gray-200) !important; color: var(--gray-700) !important; } /* ============================================ LINKEDIN ALERTS ============================================ */ html.theme-linkedin .alert { border: none; border-radius: var(--radius); padding: 12px 16px; font-size: 14px; } html.theme-linkedin .alert-primary { background: var(--primary-50); color: var(--primary-dark); } html.theme-linkedin .alert-success { background: #E6F4EA; color: var(--success); } html.theme-linkedin .alert-warning { background: #FEF3E1; color: #8A6900; } html.theme-linkedin .alert-danger { background: #FDECEA; color: var(--danger); } html.theme-linkedin .alert-info { background: var(--primary-50); color: var(--primary); } /* ============================================ LINKEDIN MODALS ============================================ */ html.theme-linkedin .modal-content { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } html.theme-linkedin .modal-header { border-bottom: 1px solid var(--gray-200); padding: 16px 24px; } html.theme-linkedin .modal-title { font-weight: 600; font-size: 18px; color: var(--gray-900); } html.theme-linkedin .modal-body { padding: 20px 24px; } html.theme-linkedin .modal-footer { border-top: 1px solid var(--gray-200); padding: 12px 24px; } /* ============================================ LINKEDIN DROPDOWN ============================================ */ html.theme-linkedin .dropdown-menu { border: none; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px 0; } html.theme-linkedin .dropdown-item { padding: 10px 16px; font-size: 14px; color: var(--gray-700); transition: all 0.15s ease; } html.theme-linkedin .dropdown-item:hover { background: var(--gray-100); color: var(--gray-900); } html.theme-linkedin .dropdown-item.active, html.theme-linkedin .dropdown-item:active { background: var(--primary-50); color: var(--primary); } /* ============================================ LINKEDIN PAGINATION ============================================ */ html.theme-linkedin .pagination .page-link { border: none; color: var(--gray-600); font-weight: 600; padding: 8px 14px; margin: 0 2px; border-radius: 20px; } html.theme-linkedin .pagination .page-link:hover { background: var(--gray-100); color: var(--gray-900); } html.theme-linkedin .pagination .page-item.active .page-link { background: var(--primary); color: var(--white); } /* ============================================ LINKEDIN NAV TABS & PILLS ============================================ */ html.theme-linkedin .nav-tabs { border-bottom: 1px solid var(--gray-200); } html.theme-linkedin .nav-tabs .nav-link { border: none; color: var(--gray-600); font-weight: 600; padding: 12px 16px; border-bottom: 2px solid transparent; border-radius: 0; } html.theme-linkedin .nav-tabs .nav-link:hover { color: var(--gray-900); background: transparent; border-color: transparent; } html.theme-linkedin .nav-tabs .nav-link.active { color: var(--success); background: transparent; border-bottom: 2px solid var(--success); } html.theme-linkedin .nav-pills .nav-link { border-radius: 20px; color: var(--gray-600); font-weight: 600; padding: 8px 16px; } html.theme-linkedin .nav-pills .nav-link.active { background: var(--success); color: var(--white); } /* ============================================ LINKEDIN STAT CARDS ============================================ */ html.theme-linkedin .stat-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 20px; text-align: center; } html.theme-linkedin .stat-card h2, html.theme-linkedin .stat-card h3 { color: var(--gray-900); font-weight: 600; } html.theme-linkedin .stat-card .stat-label { color: var(--gray-500); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } /* ============================================ LINKEDIN SPECIFIC UTILITIES ============================================ */ html.theme-linkedin .text-primary { color: var(--primary) !important; } html.theme-linkedin .text-success { color: var(--success) !important; } html.theme-linkedin .bg-primary { background-color: var(--primary) !important; } html.theme-linkedin .border-primary { border-color: var(--primary) !important; } /* LinkedIn-style dividers */ html.theme-linkedin hr { border-color: var(--gray-200); opacity: 1; } /* LinkedIn-style links */ html.theme-linkedin a:not(.btn):not(.nav-link):not(.dropdown-item) { color: var(--primary); text-decoration: none; font-weight: 600; } html.theme-linkedin a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: var(--primary-dark); text-decoration: underline; } /* ============================================ THEME SWITCHER COMPONENT ============================================ */ .theme-switcher { display: flex; align-items: center; gap: 8px; padding: 4px 12px; background: var(--gray-100); border-radius: 20px; font-size: 12px; cursor: pointer; transition: all 0.2s ease; } .theme-switcher:hover { background: var(--gray-200); } .theme-switcher-toggle { position: relative; width: 40px; height: 20px; background: var(--gray-300); border-radius: 10px; transition: all 0.3s ease; } .theme-switcher-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--white); border-radius: 50%; transition: all 0.3s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .theme-switcher.active .theme-switcher-toggle { background: #0A66C2; } .theme-switcher.active .theme-switcher-toggle::after { left: 22px; } .theme-switcher-label { font-weight: 500; color: var(--gray-600); } html.theme-linkedin .theme-switcher { background: var(--gray-200); } html.theme-linkedin .theme-switcher:hover { background: var(--gray-300); } /* ============================================ LINKEDIN ADMIN ACTION BUTTONS Consistent styling for admin navigation/action buttons ============================================ */ /* Admin action bar - keep buttons on one line */ html.theme-linkedin .col-md-6.text-md-end { white-space: nowrap; } html.theme-linkedin .col-md-6.text-md-end .btn { white-space: nowrap; } /* Unified admin button style - all buttons get the same base treatment */ html.theme-linkedin .btn-success, html.theme-linkedin .btn-info, html.theme-linkedin .btn-primary, html.theme-linkedin .btn-warning, html.theme-linkedin .btn-secondary, html.theme-linkedin .btn-outline-success, html.theme-linkedin .btn-outline-info, html.theme-linkedin .btn-outline-primary, html.theme-linkedin .btn-outline-warning, html.theme-linkedin .btn-outline-secondary { border-radius: 4px; font-weight: 600; font-size: 13px; padding: 6px 12px; transition: all 0.2s ease; border-width: 1px; } /* Admin Navigation Buttons - Consistent LinkedIn-style */ /* Primary actions (main buttons) - Solid style */ html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn, html.theme-linkedin .col-md-6.text-md-end > .btn { background: var(--white); border: 1px solid var(--gray-300); color: var(--gray-700); border-radius: 4px; padding: 8px 16px; font-weight: 600; font-size: 14px; margin-right: 4px; margin-bottom: 4px; } html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn:hover, html.theme-linkedin .col-md-6.text-md-end > .btn:hover { background: var(--primary); border-color: var(--primary); color: var(--white); box-shadow: var(--shadow-sm); } html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn:active, html.theme-linkedin .col-md-6.text-md-end > .btn:active { background: var(--primary-dark); border-color: var(--primary-dark); } /* Icon colors in admin buttons */ html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn i, html.theme-linkedin .col-md-6.text-md-end > .btn i { color: var(--primary); transition: color 0.2s ease; } html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn:hover i, html.theme-linkedin .col-md-6.text-md-end > .btn:hover i { color: var(--white); } /* Special color variants for semantic meaning - subtle left border accent */ html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn-success, html.theme-linkedin .col-md-6.text-md-end > .btn-success { border-left: 3px solid var(--success); } html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn-success:hover, html.theme-linkedin .col-md-6.text-md-end > .btn-success:hover { background: var(--success); border-color: var(--success); } html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn-warning, html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn-outline-warning, html.theme-linkedin .col-md-6.text-md-end > .btn-warning, html.theme-linkedin .col-md-6.text-md-end > .btn-outline-warning { border-left: 3px solid var(--warning); } html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn-warning:hover, html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn-outline-warning:hover, html.theme-linkedin .col-md-6.text-md-end > .btn-warning:hover, html.theme-linkedin .col-md-6.text-md-end > .btn-outline-warning:hover { background: var(--warning); border-color: var(--warning); } html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn-info, html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn-outline-info, html.theme-linkedin .col-md-6.text-md-end > .btn-info, html.theme-linkedin .col-md-6.text-md-end > .btn-outline-info { border-left: 3px solid var(--info); } html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn-info:hover, html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn-outline-info:hover, html.theme-linkedin .col-md-6.text-md-end > .btn-info:hover, html.theme-linkedin .col-md-6.text-md-end > .btn-outline-info:hover { background: var(--info); border-color: var(--info); } html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn-primary, html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn-outline-primary, html.theme-linkedin .col-md-6.text-md-end > .btn-primary, html.theme-linkedin .col-md-6.text-md-end > .btn-outline-primary { border-left: 3px solid var(--primary); } html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn-primary:hover, html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn-outline-primary:hover, html.theme-linkedin .col-md-6.text-md-end > .btn-primary:hover, html.theme-linkedin .col-md-6.text-md-end > .btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); } html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn-secondary, html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn-outline-secondary, html.theme-linkedin .col-md-6.text-md-end > .btn-secondary, html.theme-linkedin .col-md-6.text-md-end > .btn-outline-secondary { border-left: 3px solid var(--gray-500); } html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn-secondary:hover, html.theme-linkedin .d-flex.flex-wrap.gap-2 .btn-outline-secondary:hover, html.theme-linkedin .col-md-6.text-md-end > .btn-secondary:hover, html.theme-linkedin .col-md-6.text-md-end > .btn-outline-secondary:hover { background: var(--gray-600); border-color: var(--gray-600); } /* ============================================ ADMIN NAV PILLS / HORIZONTAL MENU For navigation between sections ============================================ */ html.theme-linkedin .admin-nav, html.theme-linkedin .btn-toolbar { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; padding-bottom: 4px; } html.theme-linkedin .admin-nav .btn, html.theme-linkedin .btn-toolbar .btn { flex-shrink: 0; } /* Admin Action Bar - horizontal menu style */ html.theme-linkedin .admin-action-bar { display: flex; flex-wrap: nowrap; gap: 2px; overflow-x: auto; } html.theme-linkedin .admin-action-bar .btn { background: var(--white); border: 1px solid var(--gray-300); color: var(--gray-700); border-radius: 4px; padding: 6px 12px; font-weight: 600; font-size: 13px; white-space: nowrap; flex-shrink: 0; } html.theme-linkedin .admin-action-bar .btn i { color: var(--gray-500); margin-right: 4px; } html.theme-linkedin .admin-action-bar .btn:hover { background: var(--primary); border-color: var(--primary); color: var(--white); } html.theme-linkedin .admin-action-bar .btn:hover i { color: var(--white); } /* Color accents via left border */ html.theme-linkedin .admin-action-bar .btn-outline-warning, html.theme-linkedin .admin-action-bar .btn-warning { border-left: 3px solid #C37D16; } html.theme-linkedin .admin-action-bar .btn-outline-warning:hover, html.theme-linkedin .admin-action-bar .btn-warning:hover { background: #C37D16; border-color: #C37D16; } html.theme-linkedin .admin-action-bar .btn-outline-primary, html.theme-linkedin .admin-action-bar .btn-primary { border-left: 3px solid var(--primary); } html.theme-linkedin .admin-action-bar .btn-outline-primary:hover, html.theme-linkedin .admin-action-bar .btn-primary:hover { background: var(--primary); border-color: var(--primary); } html.theme-linkedin .admin-action-bar .btn-outline-info, html.theme-linkedin .admin-action-bar .btn-info { border-left: 3px solid #0A66C2; } html.theme-linkedin .admin-action-bar .btn-outline-info:hover, html.theme-linkedin .admin-action-bar .btn-info:hover { background: #0A66C2; border-color: #0A66C2; } html.theme-linkedin .admin-action-bar .btn-success { border-left: 3px solid var(--success); } html.theme-linkedin .admin-action-bar .btn-success:hover { background: var(--success); border-color: var(--success); } html.theme-linkedin .admin-action-bar .btn-outline-secondary, html.theme-linkedin .admin-action-bar .btn-secondary { border-left: 3px solid var(--gray-500); } html.theme-linkedin .admin-action-bar .btn-outline-secondary:hover, html.theme-linkedin .admin-action-bar .btn-secondary:hover { background: var(--gray-600); border-color: var(--gray-600); } /* ============================================ PAYMENT SUMMARY BOXES - High contrast fix ============================================ */ html.theme-linkedin .bg-success.bg-opacity-10, html.theme-linkedin .bg-warning.bg-opacity-10, html.theme-linkedin .bg-danger.bg-opacity-10, html.theme-linkedin .bg-primary.bg-opacity-10, html.theme-linkedin .bg-info.bg-opacity-10 { background-color: var(--white) !important; border: 2px solid currentColor; border-radius: 8px; } html.theme-linkedin .bg-success.bg-opacity-10 { border-color: var(--success) !important; } html.theme-linkedin .bg-warning.bg-opacity-10 { border-color: var(--warning) !important; } html.theme-linkedin .bg-danger.bg-opacity-10 { border-color: var(--danger) !important; } html.theme-linkedin .bg-primary.bg-opacity-10 { border-color: var(--primary) !important; } html.theme-linkedin .bg-info.bg-opacity-10 { border-color: var(--info) !important; } /* Ensure text colors have good contrast */ html.theme-linkedin .text-success { color: #057642 !important; } html.theme-linkedin .text-warning { color: #915907 !important; } html.theme-linkedin .text-danger { color: #CC1016 !important; } html.theme-linkedin .text-primary { color: #0A66C2 !important; } html.theme-linkedin .text-info { color: #0A66C2 !important; }