/* Project-specific tweaks that complement SB Admin 2 */
.errors { color: #b00020; }
/* Dashboard specific tweaks */
.chart-narrow { max-width: 380px; margin: 0 auto; }
/* Improve Bootstrap modal usability on small screens & iOS */
/* Ensure our app overlay never blocks modal interaction */
.modal-open #sidebarOverlay { display: none !important; }
/* Prevent background content-scroll container from scrolling under modal */
.modal-open .content-scroll { overflow: hidden !important; }
/* Raise modal layers above any custom overlays just in case */
.modal-backdrop { z-index: 1060; }
.modal { z-index: 1070; -webkit-overflow-scrolling: touch; }
/* Make modal content scrollable within the viewport on phones */
.modal .modal-body { max-height: calc(100vh - 7.5rem); overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Prefer dynamic viewport units on modern mobile browsers */
@supports (height: 100dvh) {
.modal-dialog-scrollable { max-height: calc(100dvh - 1rem); }
.modal-dialog-scrollable .modal-content { max-height: calc(100dvh - 1rem); }
.modal .modal-body { max-height: calc(100dvh - 7.5rem); }
}
@supports (height: 100svh) {
.modal-dialog-scrollable { max-height: calc(100svh - 1rem); }
.modal-dialog-scrollable .modal-content { max-height: calc(100svh - 1rem); }
.modal .modal-body { max-height: calc(100svh - 7.5rem); }
}
@media (max-width: 576px) {
.modal-dialog { margin: .25rem; }
}
/* Login page inspired styling */
.login-bg {
min-height: 100vh;
/* Background image with subtle overlay */
background: linear-gradient(rgba(255,255,255,0.15), rgba(255,255,255,0.15)), url('img/login-background.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Center login container without affecting layout flow */
.login-bg #page-content-wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.login-bg .content-scroll {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
}
/* Prevent flex from squashing the bootstrap container width */
.login-bg .container { width: 100%; }
/* Frosted glass card */
.login-card {
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 14px;
}
/* Logo and heading spacing */
.login-brand { display:flex; align-items:center; justify-content:center; gap:.5rem; }
.login-brand img { height: 68px; }
/* Inputs with icons */
.input-with-icon { position: relative; }
.input-with-icon .fa { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: #6c757d; }
.input-with-icon input { padding-left: 2.2rem; }
/* Primary button in green as in inspiration */
.btn-login {
background-color: #28a745; border-color: #28a745;
}
.btn-login:hover { background-color: #218838; border-color: #1e7e34; }
/* --- Dark mode overrides --- */
/* Apply when */
[data-theme='dark'] body { background-color: #121212; color: #e0e0e0; }
[data-theme='dark'] .bg-white { background-color: #1e1e1e !important; }
[data-theme='dark'] .card { background-color: #1e1e1e; color: #e0e0e0; }
[data-theme='dark'] .card .card-header { background-color: #1b1b1b; border-color: #2a2a2a; }
[data-theme='dark'] .modal-content { background-color: #1f1f1f; color: #e0e0e0; }
[data-theme='dark'] .modal-header, [data-theme='dark'] .modal-footer { border-color: #2a2a2a; }
[data-theme='dark'] .table { color: #ddd; }
[data-theme='dark'] .table thead th { background-color: #222; color: #bbb; border-color: #2a2a2a; }
[data-theme='dark'] .table tbody tr { background-color: #181818; }
[data-theme='dark'] .table-striped tbody tr:nth-of-type(odd) { background-color: #1c1c1c; }
[data-theme='dark'] .table td, [data-theme='dark'] .table th { border-color: #2a2a2a; }
[data-theme='dark'] .form-control, [data-theme='dark'] .custom-select { background-color: #232323; color: #ddd; border-color: #3a3a3a; }
[data-theme='dark'] .form-control:focus { background-color: #262626; color: #fff; border-color: #4e73df; }
/* Class-less form elements: veel config-pagina's gebruiken bare /