/* WL-47: pin native form-control color scheme to the explicit page theme. The in tells the browser the page supports either, so on an OS in dark mode the unchecked checkbox renders as a solid dark square even when the user has the app theme set to light. Anchoring color-scheme to the page's data-theme makes native controls (checkbox, radio, scroll bar, date picker, etc.) follow the chosen theme instead of the OS preference. */ html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } .required::after { content: " *"; color: red; } .custom-text-box { border: 2px solid rgb(11, 111, 253); /* Red border */ background-color: rgb(11, 111, 253); /* Blue background */ color: white; /* White text */ padding: 10px; /* Add some padding inside the box */ border-radius: 5px; /* Optional: Slightly round the corners */ } .accordion-button { font-size: 1.5rem; /* Adjust size as needed */ font-weight: bold; /* Optional: make the font bold */ } /* Input Fields */ input[type="text"], input[type="email"], input[type="password"], input[type="number"] { width: 100%; /* Full width input for consistency */ padding: 10px; /* Space inside input fields */ font-size: 1rem; /* Standardize font size */ color: #333; /* Dark gray text for readability */ background-color: #ffffff; /* White background for clarity */ border: 3px solid #ccc; /* Light gray border for structure */ border-radius: 5px; /* Slight rounding for modern look */ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle inset shadow */ transition: border-color 0.3s, box-shadow 0.3s; /* Smooth transitions */ } /* Input Fields: Focus State */ input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus { border-color: #29b6f6; /* Bright blue border to indicate focus */ box-shadow: 0 0 5px rgba(41, 182, 246, 0.5); /* Subtle blue glow */ outline: none; /* Remove default focus outline */ } /* Submit Button - only apply to buttons without .btn-modern class */ button[type="submit"]:not(.btn-modern), input[type="submit"]:not(.btn-modern) { display: block; /* Center the button */ width: 100%; /* Full width for uniformity */ padding: 10px 15px; /* Add padding for clickability */ font-size: 1rem; /* Match font size with inputs */ font-weight: bold; /* Emphasize button text */ color: #fff; /* White text for contrast */ background-color: #133e87; /* Bootstrap primary blue */ border: none; /* Remove border */ border-radius: 5px; /* Rounded corners for modern look */ cursor: pointer; /* Pointer cursor to indicate clickability */ transition: background-color 0.3s, transform 0.2s; /* Smooth transitions */ } button[type="submit"]:not(.btn-modern):hover, input[type="submit"]:not(.btn-modern):hover { background-color: #123572; /* Darker blue on hover */ transform: translateY(-2px); /* Slight upward lift */ } button[type="submit"]:not(.btn-modern):active, input[type="submit"]:not(.btn-modern):active { background-color: #0e2a5b; /* Even darker blue on click */ transform: translateY(0); /* Reset lift */ } /* Delete Button */ button.delete, input.delete { display: block; /* Center the button */ width: 100%; /* Full width for uniformity */ padding: 10px 15px; /* Add padding for clickability */ font-size: 1rem; /* Match font size with inputs */ font-weight: bold; /* Emphasize button text */ color: #fff; /* White text for contrast */ background-color: #dc3545; /* Bootstrap danger red */ border: none; /* Remove border */ border-radius: 5px; /* Rounded corners for modern look */ cursor: pointer; /* Pointer cursor to indicate clickability */ transition: background-color 0.3s, transform 0.2s; /* Smooth transitions */ } button.delete:hover, input.delete:hover { background-color: #a71d2a; /* Darker red on hover */ transform: translateY(-2px); /* Slight upward lift */ } button.delete:active, input.delete:active { background-color: #7a141e; /* Even darker red on click */ transform: translateY(0); /* Reset lift */ } /* General Button Style for Links */ a.button { display: inline-block; /* Makes the link behave like a block for padding */ width: 100%; /* Makes the button take up the full width of its container */ text-align: center; /* Centers text inside the button */ text-decoration: none; /* Removes the underline from links */ padding: 10px 15px; /* Adds padding for clickability */ font-size: 1rem; /* Matches font size with other buttons */ font-weight: bold; /* Emphasizes text */ color: #fff; /* White text for contrast */ background-color: #133e87; /* Default button blue (Bootstrap primary) */ border: none; /* Removes border for a clean look */ border-radius: 5px; /* Rounded corners for consistency */ cursor: pointer; /* Pointer cursor to indicate clickability */ transition: background-color 0.3s, transform 0.2s; /* Smooth transitions */ } /* Hover Effect for Link Buttons */ a.button:hover { background-color: #123572; /* Darker blue on hover */ transform: translateY(-2px); /* Slight upward lift */ } /* Active State for Link Buttons */ a.button:active { background-color: #0e2a5b; /* Even darker blue on click */ transform: translateY(0); /* Reset lift */ } .custom-navbar { background-color: #003366; /* Dark blue background */ color: white; /* White text */ } .custom-navbar .navbar-brand img { filter: brightness(0) invert(1); /* Adjust icon to stand out against dark background */ } .custom-navbar .navbar-text { color: white; } .custom-navbar .nav-link { color: white; } .custom-navbar .nav-link:hover { color: #cccccc; /* Slightly lighter shade on hover */ } .custom-header-bgc { background-color: red; color: white; } .custom-header-tc { color: white; } thead th { color: white !important; } .mylist-custom-button { background-color: #133e87; color: white; width: 150px; /* Set a consistent width */ } .mylist-custom-button:hover { background-color: #0f2c5f; /* Slightly darker shade for hover effect */ } /* ================================ Dark Mode Theme Styles ================================ */ /* Light theme (default) */ [data-theme="light"], .theme-light { --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --text-primary: #212529; --text-secondary: #6c757d; --border-color: #dee2e6; --link-color: #0d6efd; --navbar-bg: #003366; --navbar-text: #ffffff; } /* Dark theme. styles.css loads after design-system.css so these values win the cascade — keep them aligned with the design-system dark tokens. */ [data-theme="dark"], .theme-dark { --bg-primary: #1a1a1a; --bg-secondary: #2d2d2d; --text-primary: #ffffff; --text-secondary: #d1d5db; --border-color: #495057; --link-color: #6ea8fe; --navbar-bg: #001a33; --navbar-text: #ffffff; } /* Apply theme variables */ [data-theme="dark"] body, .theme-dark body { background-color: var(--bg-primary); color: var(--text-primary); } [data-theme="dark"] .card, [data-theme="dark"] .shadow, .theme-dark .card, .theme-dark .shadow { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, .theme-dark .form-control, .theme-dark .form-select { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus, .theme-dark .form-control:focus, .theme-dark .form-select:focus { background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--link-color); } [data-theme="dark"] .table, .theme-dark .table { color: var(--text-primary); } [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd), .theme-dark .table-striped tbody tr:nth-of-type(odd) { background-color: var(--bg-secondary); } [data-theme="dark"] .table-hover tbody tr:hover, .theme-dark .table-hover tbody tr:hover { background-color: #383838; } [data-theme="dark"] .table-bordered, [data-theme="dark"] .table-bordered th, [data-theme="dark"] .table-bordered td, .theme-dark .table-bordered, .theme-dark .table-bordered th, .theme-dark .table-bordered td { border-color: var(--border-color); } [data-theme="dark"] .custom-navbar, .theme-dark .custom-navbar { background-color: var(--navbar-bg); } [data-theme="dark"] .dropdown-menu, .theme-dark .dropdown-menu { background-color: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .dropdown-item, .theme-dark .dropdown-item { color: var(--text-primary); } [data-theme="dark"] .dropdown-item:hover, .theme-dark .dropdown-item:hover { background-color: var(--bg-primary); color: var(--text-primary); } [data-theme="dark"] a, .theme-dark a { color: var(--link-color); } [data-theme="dark"] .text-muted, .theme-dark .text-muted { color: var(--text-secondary) !important; } [data-theme="dark"] .alert, .theme-dark .alert { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); } /* Smooth theme transitions */ body, .card, .form-control, .form-select, .table, .dropdown-menu, .alert { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }