/* * Document : main-dark.css * Note: also contains the dark/light toggle switch component styles (always loaded) * Description: Dark mode overrides for main.css * Add class "dark" to to activate dark mode. * Toggle via JS: document.body.classList.toggle('dark') * Persist preference in localStorage. */ /* =========================== DARK MODE TOGGLE SWITCH (always active, not scoped to body.dark) =========================== */ .theme-switch { display: inline-flex; align-items: center; width: 36px; height: 20px; background: #ccc; border-radius: 10px; position: relative; transition: background 0.25s; flex-shrink: 0; vertical-align: middle; } .theme-switch-knob { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: left 0.25s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } body.dark .theme-switch { background: #72a333; } body.dark .theme-switch-knob { left: 19px; } /* =========================== CSS VARIABLE OVERRIDES =========================== */ body.dark { color-scheme: dark; /* Emerald scale — darkened for dark UI surfaces */ --colors--emerald--5: #0e1310; --colors--emerald--10: #101512; --colors--emerald--20: #121814; --colors--emerald--30: #141b16; --colors--emerald--50: #17201a; --colors--emerald--100: #1b261e; --colors--emerald--200: #202d24; --colors--emerald--300: #28382c; --colors--emerald--400: #8ca877; --colors--emerald--500: #6f8c5b; --colors--emerald--600: #566e46; --colors--emerald--800: #b8cdb0; --colors--emerald--900: #d0e0c8; /* Gray scale — inverted for dark mode */ --colors--gray--900: #f0f0f2; --colors--gray--800: #d4d4d8; --colors--gray--700: #a1a1aa; --colors--gray--600: #71717a; --colors--gray--500: #52525b; --colors--gray--400: #3a3a42; --colors--gray--300: #28282e; --colors--gray--200: #1e1e24; --colors--gray--50: #141418; --colors--main--text-secondary: #e4e4e7; --colors--main--white: #1b1e2d; --colors--main--transparent: transparent; /* Brand light — subtle tints for dark surfaces */ --colors--main--brand-light: rgba(114, 163, 51, 0.15); --colors--main--brand-secondary-light: rgba(186, 135, 245, 0.12); /* Green scale — dark versions */ --colors--green--50: #0e1a05; --colors--green--100: #142206; --colors--green--200: #1b2e09; --colors--green--300: #2a4a12; /* Purple scale — dark versions */ --colors--purple--50: #1a0d2e; --colors--purple--100: #200f38; /* Beige scale — dark versions */ --colors--beige--50: #1e1b18; --colors--beige--100: #251f1c; --colors--beige--200: #2d2621; --colors--beige--300: #42382f; /* Legacy utility variables */ --color-border: #2f3348; --color-border-light: #3a3e56; --color-text-dark: #e0e1ec; --color-text-muted: #9a9db5; --color-bg-light: #131520; --color-bg-white: #1b1e2d; --color-bg-lighter: #222537; --color-highlight: #2a2618; --color-grey-light: #3a3e56; --color-grey-dark: #c0c2d0; --color-info-darker: #5ab0e0; } /* =========================== BASE =========================== */ body.dark { background-color: #131520; color: #e0e1ec; } body.dark a { color: #8ab844; } body.dark a:hover { color: #a0c85a; } body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6 { color: #e0e1ec; } body.dark footer h5 { border-bottom-color: #3a3e56; } body.dark hr { border-top-color: #3a3e56 !important; border-bottom-color: transparent !important; } body.dark .b-grey { border-color: #3a3e56 !important; } body.dark pre, body.dark code { background-color: #1f2232; border-color: #2f3348; color: #b0b3c8; } /* =========================== LOGIN (#m01lls) =========================== */ body.dark.login { background-color: #131520; } body.dark #login-container { background-color: #1b1e2d; border-color: #2f3348; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } body.dark #login-container:hover { box-shadow: 0 0 12px rgba(0, 0, 0, 0.7); } body.dark .login_copy, body.dark .login_head { color: #9a9db5; } body.dark #login-form input[type="text"], body.dark #login-form input[type="email"], body.dark #login-form input[type="password"] { background-color: #222537; border-color: #3a3e56; color: #e0e1ec; } body.dark .abcRioButton, body.dark .abcRioButtonLightBlue { background-color: #222537; border-color: #3a3e56; } body.dark .abcRioButtonContents { color: #e0e1ec !important; } /* =========================== MAIN LAYOUT (#m02mls) =========================== */ body.dark #page-wrapper, body.dark #page-content, body.dark #page-container { background-color: #131520; } body.dark #page-sidebar { background-color: #1b1e2d; border-right-color: #2f3348; } body.dark #page-header, body.dark .page-header { border-bottom-color: #2f3348; color: #e0e1ec; } body.dark .sub-header { background-color: #1b1e2d; border-bottom-color: #2f3348; } body.dark .sub-header a, body.dark .sub-header li a { color: #9a9db5; } body.dark footer, body.dark .footer { background-color: #1b1e2d; border-top-color: #2f3348; color: #9a9db5; } body.dark .divider { border-bottom-color: #2f3348; } /* =========================== HEADER WIDGETS (#m03hws) =========================== */ body.dark .dropdown-menu { background-color: #1b1e2d; border-color: #2f3348; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); } body.dark .dropdown-menu > li > a { color: #b0b3c8; } body.dark .dropdown-menu > li > a:hover, body.dark .dropdown-menu > li > a:focus, body.dark .dropdown-submenu:hover > a, body.dark .dropdown-submenu:focus > a, body.dark .dropdown-menu > .active > a, body.dark .dropdown-menu > .active > a:hover, body.dark .dropdown-menu > .active > a:focus { background: rgba(255, 255, 255, 0.05) !important; color: #ffffff !important; text-shadow: none !important; } body.dark .dropdown-menu .divider { background-color: #2f3348; } /* Section headers ("RÉGLAGES", "MON COMPTE") — hardcoded rgb(245,245,245) in base rule */ body.dark .dropdown-menu .dropdown-header, body.dark li.dropdown-header { background: rgba(255, 255, 255, 0.04) !important; color: rgba(255, 255, 255, 0.55) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } body.dark .dropdown-menu li + li.dropdown-header { margin-top: 4px; } /* Dropdown arrow triangles — ::after (inner fill) was hardcoded #fff from light theme */ body.dark .navbar .nav > li > .dropdown-menu::after { border-bottom-color: #1b1e2d; } body.dark .navbar .nav > li > .dropdown-menu::before { border-bottom-color: rgba(255, 255, 255, 0.12); } /* "Ajouter" (#add) quick-add button — white text on translucent pill */ body.dark .navbar .add-btn, body.dark .navbar #add .add-btn, body.dark .navbar #add.open .add-btn { background: rgba(255, 255, 255, 0.18); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.55); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } body.dark .navbar .add-btn:hover, body.dark .navbar #add.open .add-btn:hover { background: rgba(255, 255, 255, 0.28); color: #ffffff; } body.dark .navbar .add-btn .icon-circle-button { background: #ffffff; color: #72a333; } /* "Ajouter" dropdown — lifted surface, no item pill outlines */ body.dark .navbar #add .dropdown-menu { background-color: #262a3e; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); } /* Arrow matches the lifted menu surface (was hardcoded white from light theme) */ body.dark .navbar #add .dropdown-menu::after { border-bottom-color: #262a3e; } body.dark .navbar #add .dropdown-menu::before { border-bottom-color: rgba(255, 255, 255, 0.12); } body.dark .navbar #add .dropdown-menu > li > a { border: 1px solid transparent; margin: 2px 6px; } body.dark .navbar #add .dropdown-menu > li > a:hover, body.dark .navbar #add .dropdown-menu > li > a:focus { background-color: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: #fff; } body.dark .navbar #add .dropdown-menu li.divider, body.dark .navbar #add .dropdown-menu .divider { background-color: rgba(255, 255, 255, 0.08); height: 1px; margin: 6px 8px; } body.dark .navbar-default { background-color: #1b1e2d; border-color: #2f3348; } body.dark .navbar-default .navbar-nav > li > a { color: #b0b3c8; } body.dark .navbar-default .navbar-nav > li > a:hover { color: #e0e1ec; background-color: #222537; } /* Fix white strip on right side of sticky header (outer wrapper has hard-coded white bg) */ body.dark .navbar.sticky-header { background-color: #1b1e2d; } /* Desaturate the green inner bar slightly against the dark canvas */ body.dark .navbar.sticky-header .navbar-inner { background-color: #5e8a2b; } /* =========================== NAVIGATION (#m04nvs) =========================== */ body.dark #nav-primary { background-color: #1b1e2d; border-bottom-color: #2f3348; } body.dark #nav-primary li a { color: #9a9db5; } body.dark #nav-primary li a:hover, body.dark #nav-primary li.active a { color: #e0e1ec; background-color: #222537; } body.dark #nav-info { background-color: #131520; border-bottom-color: #2f3348; } body.dark #nav-info a { color: #9a9db5; } body.dark .sidebar-nav a, body.dark .sidebar-nav li a { color: #b0b3c8; } body.dark .sidebar-nav a:hover, body.dark .sidebar-nav li a:hover, body.dark .sidebar-nav li.active a { background-color: #222537; color: #e0e1ec; } body.dark #primary-nav li a.active { background: #1e2235 !important; background-color: #1e2235 !important; color: #8ab844 !important; border-left-color: #72a333 !important; } body.dark #primary-nav li a.active i { color: #8ab844 !important; } body.dark #primary-nav li a:hover, body.dark #primary-nav li ul li a:hover { background-color: #222537 !important; color: #e0e1ec !important; } body.dark #primary-nav li a:hover i, body.dark #primary-nav li a.active:hover i, body.dark #primary-nav li ul li a:hover i, body.dark #primary-nav li ul li a.active:hover i { background-color: transparent !important; color: #e0e1ec !important; } body.dark #primary-nav li > ul a:hover { background: #222537 !important; border-left-color: #3a3e56 !important; } body.dark #primary-nav ul li.separator { color: rgba(255, 255, 255, 0.45); } body.dark .search-field input, body.dark #search-input { background-color: #222537; border-color: #3a3e56; color: #e0e1ec; } body.dark .search-field input::placeholder, body.dark #search-input::placeholder { color: #6b6e85; } /* =========================== MAIN CONTENT (#m05mcs) =========================== */ body.dark .tile, body.dark .dash-tile { background-color: #1b1e2d; border-color: #2f3348; color: #e0e1ec; } body.dark .tile:hover, body.dark .dash-tile:hover { background-color: #222537; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } body.dark .tile h3, body.dark .tile .tile-title, body.dark .dash-tile h3 { color: #e0e1ec; } body.dark .tile .tile-value, body.dark .tile-stats { color: #e0e1ec; } body.dark .form-box, body.dark .box { background-color: #1b1e2d; border-color: #2f3348; } body.dark .form-box-header, body.dark .box-header { background-color: #1f2232; border-bottom-color: #2f3348; color: #e0e1ec; } body.dark .form-box-footer, body.dark .box-footer { background-color: #1f2232; border-top-color: #2f3348; } /* =========================== FORMS & INPUTS =========================== */ body.dark .form-control { background-color: #222537; border-color: #3a3e56; color: #e0e1ec; } body.dark .form-control:focus { background-color: #252840; border-color: #72a333; color: #e0e1ec; box-shadow: 0 0 0 3px rgba(114, 163, 51, 0.2); } body.dark .form-control::placeholder { color: #6b6e85; } body.dark .form-control[disabled], body.dark .form-control[readonly] { background-color: #1a1d2c; color: #6b6e85; } body.dark select.form-control { color-scheme: dark; } body.dark select.form-control option { background-color: #222537; color: #e0e1ec; } /* Bootstrap 2 plain inputs (no .form-control class) */ body.dark input[type="text"]:not(.form-control), body.dark input[type="password"]:not(.form-control), body.dark input[type="email"]:not(.form-control), body.dark input[type="number"]:not(.form-control), body.dark input[type="tel"]:not(.form-control), body.dark input[type="url"]:not(.form-control), body.dark input[type="search"]:not(.form-control), body.dark textarea:not(.form-control), body.dark select:not(.form-control), body.dark #roomsHolder select.input-xlarge, body.dark #roomsHolder select.input-small { background-color: #222537 !important; border-color: #3a3e56 !important; color: #e0e1ec !important; color-scheme: dark; background-image: url("../img/jquery.chosen/chosen-sprite-dark@2x.png") !important; } body.dark input[type="text"]:not(.form-control):focus, body.dark input[type="password"]:not(.form-control):focus, body.dark input[type="email"]:not(.form-control):focus, body.dark input[type="number"]:not(.form-control):focus, body.dark input[type="tel"]:not(.form-control):focus, body.dark input[type="url"]:not(.form-control):focus, body.dark input[type="search"]:not(.form-control):focus, body.dark textarea:not(.form-control):focus, body.dark select:not(.form-control):focus { background-color: #252840 !important; border-color: #72a333 !important; color: #e0e1ec !important; box-shadow: 0 0 0 3px rgba(114, 163, 51, 0.2); } body.dark input[type="text"]:not(.form-control)::placeholder, body.dark input[type="password"]:not(.form-control)::placeholder, body.dark input[type="email"]:not(.form-control)::placeholder, body.dark input[type="search"]:not(.form-control)::placeholder, body.dark textarea:not(.form-control)::placeholder { color: #6b6e85; } body.dark select:not(.form-control) option { background-color: #222537; color: #e0e1ec; } body.dark .input-append input[type="text"], body.dark .input-append input[type="search"], body.dark .input-append input[type="email"], body.dark .input-prepend input[type="text"], body.dark .input-prepend input[type="search"], body.dark .input-prepend input[type="email"] { background-color: #222537; border-color: #3a3e56; color: #e0e1ec; } body.dark .input-append input[type="text"]:focus, body.dark .input-append input[type="search"]:focus, body.dark .input-append input[type="email"]:focus, body.dark .input-prepend input[type="text"]:focus, body.dark .input-prepend input[type="search"]:focus, body.dark .input-prepend input[type="email"]:focus { background-color: #252840; border-color: #72a333; color: #e0e1ec; box-shadow: 0 0 0 3px rgba(114, 163, 51, 0.2); } body.dark .input-append .btn, body.dark .input-prepend .btn { background-color: #1f2232; border-color: #3a3e56; color: #9a9db5; } body.dark .input-group-addon { background-color: #1f2232; border-color: #3a3e56; color: #9a9db5; } body.dark label, body.dark .control-label { color: #b0b3c8; } body.dark .help-block { color: #9a9db5; } /* =========================== BOOTSTRAP OVERRIDES (#m06bos) =========================== */ /* Round Buttons / Nav Dash */ body.dark .nav-dash { background-color: #1b1e2d; border-bottom-color: #2f3348; } body.dark .round-depth { background: #222537; border-color: #3a3e56; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } body.dark .round-depth:hover { box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); } body.dark .depth { background-color: #2a3a50; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); } body.dark .depth > a { background: #1b1e2d; background-image: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); } body.dark .depth > a:hover { background: #222537; } body.dark .depth > a > i { color: #8ab844; text-shadow: none; } body.dark .depth > a:hover > i { color: #a0c85a; } body.dark .round-buttons h5 { color: #9a9db5; } /* Panels */ body.dark .panel { border-color: #2f3348; } body.dark .panel-default { border-color: #2f3348; } body.dark .panel-default > .panel-heading { background-color: #1f2232; border-color: #2f3348; color: #e0e1ec; } body.dark .panel-body { background-color: #1b1e2d; } body.dark .panel-footer { background-color: #1f2232; border-top-color: #2f3348; } /* Tables */ body.dark .table { color: #e0e1ec; } body.dark .table > thead > tr > th { background-color: #1f2232; border-bottom-color: #3a3e56; color: #b0b3c8; } body.dark .table thead th a, body.dark .table thead th a:hover, body.dark .table thead th a:focus { color: #b0b3c8 !important; } body.dark .table > tbody > tr > td, body.dark .table > tbody > tr > th, body.dark .table > tfoot > tr > td, body.dark .table > tfoot > tr > th { background-color: #1b1e2d; border-top-color: #2f3348; } body.dark .table > tbody > tr:hover > td, body.dark .table > tbody > tr:hover > th { background-color: #222537 !important; } body.dark .table-striped > tbody > tr:nth-of-type(odd) > td, body.dark .table-striped > tbody > tr:nth-of-type(odd) > th { background-color: #1f2232; } body.dark .table-bordered, body.dark .table-bordered > thead > tr > th, body.dark .table-bordered > tbody > tr > td { border-color: #2f3348; } body.dark .table-hover > tbody > tr:hover > td, body.dark .table-hover > tbody > tr:hover > th { background-color: #222537 !important; } /* Unpaid row */ body.dark tr.unpaid { opacity: 0.45; } body.dark tr.unpaid td, body.dark tr.unpaid td:last-child { background: transparent !important; } /* Month separator row */ body.dark .table-bordered tr.month td { background: rgb(34, 37, 55) !important; color: rgb(154, 157, 181) !important; } /* Alerts */ body.dark .alert-success { background-color: #1a2e10; border-color: #2a4a1a; color: #8ab844; } body.dark .alert-danger, body.dark .alert-error { background-color: #2e1010; border-color: #4a1a1a; color: #e07070; } body.dark .alert-warning { background-color: #2e2010; border-color: #4a3010; color: #f0a040; } body.dark .alert-info { background-color: #102030; border-color: #1a3a50; color: #5ab0e0; } /* Buttons */ body.dark .btn-default, body.dark .btn-mini, body.dark a.btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew) { background-color: #222537; background-image: none; border-color: #3a3e56; color: #e0e1ec; text-shadow: none; } body.dark .btn-default:hover, body.dark .btn-default:focus, body.dark .btn-default:active, body.dark .btn-mini:hover, body.dark .btn-mini:focus, body.dark .btn-mini:active, body.dark a.btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew):hover, body.dark a.btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew):focus, body.dark a.btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew):active { background-color: #2f3348; background-image: none; border-color: #4a4e66; color: #e0e1ec; } body.dark .btn-group.open .btn.dropdown-toggle { background-color: #1f2232; background-image: none; border-color: #3a3e56; color: #e0e1ec; } body.dark .btn-success { color: #e0e1ec; } body.dark .btn-link { color: #8ab844; } body.dark .btn-link:hover { color: #a0c85a; } /* .btn-white has no dark override — #333 text on near-black background → ~1.4:1 contrast */ body.dark .btn.btn-white { background: transparent; color: #c8cad8; border: 1px solid transparent; box-shadow: none; } body.dark .btn.btn-white i { color: inherit; } body.dark .btn.btn-white:hover, body.dark .btn.btn-white:focus-visible { background: rgba(255, 255, 255, 0.06); color: #ffffff; border-color: rgba(255, 255, 255, 0.12); outline: none; } body.dark .btn.btn-white:active, body.dark .btn.btn-white.active { background: rgba(114, 163, 51, 0.22); color: #b8df7a; border-color: rgba(168, 210, 106, 0.35); } body.dark .btn.btn-white .badge { background: rgba(255, 255, 255, 0.10); color: #e0e1ec; } body.dark .btn.btn-white:hover .badge { background: rgba(255, 255, 255, 0.18); color: #fff; } /* Wells */ body.dark .well { background-color: #1f2232; border-color: #2f3348; color: #b0b3c8; } /* List groups */ body.dark .list-group-item { background-color: #1b1e2d; border-color: #2f3348; color: #e0e1ec; } body.dark .list-group-item:hover, body.dark .list-group-item:focus { background-color: #222537; } body.dark .list-group-item.active, body.dark .list-group-item.active:hover { background-color: #72a333; border-color: #72a333; } /* Nav tabs */ body.dark .nav-tabs { border-bottom-color: #2f3348; } body.dark .nav-tabs > li > a { color: #9a9db5; border-color: transparent; } body.dark .nav-tabs > li > a:hover { color: #e0e1ec; background-color: #222537; border-color: #2f3348 #2f3348 transparent; } body.dark .nav-tabs > li.active > a, body.dark .nav-tabs > li.active > a:hover, body.dark .nav-tabs > li.active > a:focus { background-color: #1b1e2d; border-color: #2f3348 #2f3348 #1b1e2d; color: #e0e1ec; } /* Nav pills */ body.dark .nav-pills > li > a { color: #9a9db5; } body.dark .nav-pills > li > a:hover { background-color: #222537; color: #e0e1ec; } body.dark .nav-pills > li.active > a, body.dark .nav-pills > li.active > a:hover { background-color: #72a333; color: #fff; } /* Breadcrumbs */ body.dark .breadcrumb { background-color: #1f2232; color: #9a9db5; } body.dark .breadcrumb > li + li::before { color: #6b6e85; } body.dark .breadcrumb > .active { color: #e0e1ec; } /* Pagination */ body.dark .pagination > li > a, body.dark .pagination > li > span, body.dark .pagination ul > li > a, body.dark .pagination ul > li > span { background-color: #1b1e2d; border-color: #2f3348; color: #9a9db5; } body.dark .pagination > li > a:hover, body.dark .pagination > li > span:hover, body.dark .pagination ul > li > a:hover, body.dark .pagination ul > li > span:hover { background-color: #222537; border-color: #3a3e56; color: #e0e1ec; } body.dark .pagination > .active > a, body.dark .pagination > .active > span, body.dark .pagination > .active > a:hover, body.dark .pagination > .active > span:hover, body.dark .pagination ul > .active > a, body.dark .pagination ul > .active > span, body.dark .pagination ul > .active > a:hover, body.dark .pagination ul > .active > span:hover { background-color: #72a333; border-color: #72a333; color: #fff; } body.dark .pagination > .disabled > a, body.dark .pagination > .disabled > span, body.dark .pagination ul > .disabled > a, body.dark .pagination ul > .disabled > span, body.dark .pagination ul > .disabled > a:hover { background-color: #131520; border-color: #2f3348; color: #4a4e66; } /* Modals — covers both Bootstrap 2 (no .modal-content wrapper) and Bootstrap 3 */ body.dark .modal { background-color: rgb(27, 30, 45); } body.dark .modal-content, body.dark .modal-body { background-color: #1b1e2d; border-color: #2f3348; color: #b0b3c8; } body.dark .modal-header { background-color: #1b1e2d; border-bottom: 1px solid rgb(47, 51, 72) !important; } body.dark .modal-header h4, body.dark .modal-header .modal-title { color: #e0e1ec; } body.dark .modal-header .close { color: #9a9db5; text-shadow: none; } body.dark .modal-header .close:hover { color: #e0e1ec; } body.dark .modal-footer { border-top: 1px solid rgb(47, 51, 72) !important; box-shadow: none !important; background: var(--colors--emerald--30); } /* Plain button.btn / input.btn (e.g. cancel buttons in modals/forms) not covered by the a.btn selector */ body.dark button.btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew), body.dark input[type="button"].btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew), body.dark input[type="submit"].btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew), body.dark input[type="reset"].btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew) { background-color: #222537; background-image: none; border-color: #3a3e56; color: #e0e1ec; text-shadow: none; } body.dark button.btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew):hover, body.dark button.btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew):focus, body.dark button.btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew):active, body.dark input[type="button"].btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew):hover, body.dark input[type="button"].btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew):focus, body.dark input[type="button"].btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew):active, body.dark input[type="submit"].btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew):hover, body.dark input[type="submit"].btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew):focus, body.dark input[type="submit"].btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew):active, body.dark input[type="reset"].btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew):hover, body.dark input[type="reset"].btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew):focus, body.dark input[type="reset"].btn:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-link):not(.btn-white):not(.btn-purple):not(.addnew):active { background-color: #2f3348; background-image: none; } /* Tooltips */ body.dark .tooltip-inner { background-color: #0e1015; color: #e0e1ec; } body.dark .tooltip.top .tooltip-arrow { border-top-color: #0e1015; } body.dark .tooltip.bottom .tooltip-arrow { border-bottom-color: #0e1015; } body.dark .tooltip.left .tooltip-arrow { border-left-color: #0e1015; } body.dark .tooltip.right .tooltip-arrow { border-right-color: #0e1015; } /* Popovers */ body.dark .popover { background-color: #1b1e2d; border-color: #2f3348; } body.dark .popover-title { background-color: #1f2232; border-bottom-color: #2f3348; color: #e0e1ec; } body.dark .popover-content { color: #b0b3c8; } /* Progress bars */ body.dark .progress { background-color: #252840; } /* Labels / Badges */ body.dark .label-default { background-color: #3a3e56; color: #e0e1ec; } body.dark .badge { background-color: #3a3e56; color: #e0e1ec; } /* Checkbox / radio labels */ body.dark .checkbox label, body.dark .radio label { color: #b0b3c8; } /* =========================== HELPERS (#m07hes) =========================== */ body.dark .text-muted { color: #9a9db5 !important; } body.dark .text-black { color: rgb(224, 225, 236) !important; } body.dark .dark-grey, body.dark .text-dark-grey { color: rgb(154, 157, 181) !important; } body.dark .bg-light, body.dark .bg-white { background-color: #1b1e2d !important; } body.dark .highlight, body.dark mark { background-color: rgba(114, 163, 51, 0.2); color: #e0e1ec; } /* =========================== DATATABLES PLUGIN =========================== */ body.dark .dataTables_wrapper { color: #e0e1ec; } body.dark .dataTables_wrapper > div.top, body.dark .dataTables_wrapper > div.bottom { background-color: #1f2232; } body.dark .dataTables_filter input, body.dark .dataTables_length select { background-color: #222537; border-color: #3a3e56; color: #e0e1ec; } body.dark table.dataTable thead th, body.dark table.dataTable thead td { border-bottom-color: #3a3e56; color: #b0b3c8; } body.dark table.dataTable.row-border tbody td, body.dark table.dataTable.display tbody td { border-top-color: #2f3348; } body.dark table.dataTable.stripe tbody tr.odd, body.dark table.dataTable.display tbody tr.odd { background-color: #1f2232; } body.dark table.dataTable tbody tr:hover > td, body.dark table.dataTable tbody tr:hover > th { background-color: #222537 !important; } body.dark .dataTables_paginate .paginate_button { color: #9a9db5 !important; } body.dark .dataTables_paginate .paginate_button:hover { background-color: #222537 !important; border-color: #3a3e56 !important; color: #e0e1ec !important; } body.dark .dataTables_paginate .paginate_button.current, body.dark .dataTables_paginate .paginate_button.current:hover { background-color: #72a333 !important; border-color: #72a333 !important; color: #fff !important; } /* =========================== SELECT2 PLUGIN =========================== */ body.dark .select2-container--default .select2-selection--single, body.dark .select2-container--default .select2-selection--multiple { background-color: #222537; border-color: #3a3e56; color: #e0e1ec; } body.dark .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e0e1ec; } body.dark .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #9a9db5 transparent transparent transparent; } body.dark .select2-dropdown { background-color: #1b1e2d; border-color: #2f3348; } body.dark .select2-container--default .select2-results__option { color: #b0b3c8; } body.dark .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #72a333; color: #fff; } body.dark .select2-container--default .select2-results__option[aria-selected=true] { background-color: #222537; color: #e0e1ec; } body.dark .select2-search--dropdown .select2-search__field { background-color: #222537; border-color: #3a3e56; color: #e0e1ec; } body.dark .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #72a333; border-color: #548126; color: #fff; } /* =========================== CHOSEN (CHZN) PLUGIN =========================== */ body.dark .chzn-container-single .chzn-single { background-color: #222537; border-color: #3a3e56; color: #e0e1ec; box-shadow: none; } body.dark .chzn-container-single .chzn-default { color: #6b6e85; } body.dark .chzn-container .chzn-drop { background-color: #1b1e2d; border-color: #3a3e56; } body.dark .chzn-container-single .chzn-search input { background-color: #222537; border-color: #3a3e56; color: #e0e1ec; } body.dark .chzn-container .chzn-results li { color: #b0b3c8; } body.dark .chzn-container .chzn-results .highlighted { background-color: #72a333; color: #fff; } body.dark .chzn-container .chzn-results .result-selected { color: #6b6e85; } body.dark .chzn-container .chzn-results .no-results { background-color: #1f2232; color: #6b6e85; } body.dark .chzn-container .chzn-results .group-result { background-color: #1f2232; color: #b0b3c8; } body.dark .chzn-container-multi .chzn-choices { background-color: #222537; border-color: #3a3e56; } body.dark .chzn-container-multi .chzn-choices .search-field input { background-color: transparent; color: #e0e1ec; } body.dark .chzn-container-multi .chzn-choices .search-choice { background-color: #2f3348; border-color: #3a3e56; color: #e0e1ec; } /* =========================== DATEPICKER PLUGIN =========================== */ body.dark .datepicker, body.dark .datepicker-dropdown { background-color: #1b1e2d; border-color: #2f3348; color: #e0e1ec; } body.dark .datepicker table tr td, body.dark .datepicker table tr th { color: #b0b3c8; } body.dark .datepicker table tr td:hover, body.dark .datepicker table tr th:hover { background-color: #222537; color: #e0e1ec; } body.dark .datepicker table tr td.active, body.dark .datepicker table tr td.active:hover { background-color: #72a333; border-color: #548126; color: #fff; } body.dark .datepicker table tr td.today { background-color: rgba(114, 163, 51, 0.2); color: #8ab844; } body.dark .datepicker table tr td.disabled, body.dark .datepicker table tr td.disabled:hover { color: #4a4e66; } body.dark .datepicker .datepicker-switch, body.dark .datepicker .prev, body.dark .datepicker .next { color: #9a9db5; } body.dark .datepicker .datepicker-switch:hover, body.dark .datepicker .prev:hover, body.dark .datepicker .next:hover { background-color: #222537; color: #e0e1ec; } /* =========================== ACTIVE/ARCHIVE TOGGLE & SWITCHER =========================== */ body.dark .active-archive { background-color: rgba(114, 163, 51, 0.1); border-color: rgba(114, 163, 51, 0.4); } body.dark .active-archive .btn:hover { background: rgba(255, 255, 255, 0.08); } body.dark .active-archive .btn.active, body.dark #active_records.active, body.dark #archived_records.active, body.dark #new_records.active, body.dark #accepted_records.active, body.dark #confirmed_records.active, body.dark #rejected_records.active { background-color: #1b1e2d !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; color: #e0e1ec; } body.dark .nav-pills.switcher > .active > a, body.dark .nav-pills.switcher > .active > a:hover, body.dark .nav-pills.switcher > .active > a:focus { background-color: #1b1e2d !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; color: #e0e1ec; } body.dark .nav-tabs.switch-tabs > .active > a, body.dark .nav-tabs.switch-tabs > .active > a:hover, body.dark .nav-tabs.switch-tabs > .active > a:focus { background-color: #1b1e2d !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; color: #e0e1ec !important; } body.dark .switch-tabs-scroll::after { background: linear-gradient(to right, transparent, #131621); } /* #form-box-tabs overrides are in the TOP TAB NAVIGATION section below */ /* =========================== CUSTOM SCROLLBAR (webkit) =========================== */ body.dark ::-webkit-scrollbar { width: 8px; height: 8px; } body.dark ::-webkit-scrollbar-track { background: #131520; } body.dark ::-webkit-scrollbar-thumb { background: #3a3e56; border-radius: 4px; } body.dark ::-webkit-scrollbar-thumb:hover { background: #4a4e66; } /* =========================== NOTES / ALERTS =========================== */ body.dark .note.red-20, body.dark .note-bg-red-20 { background-color: rgba(220, 53, 69, 0.15) !important; border-color: rgba(220, 53, 69, 0.3); } body.dark .note-bg-green-20 { background-color: rgba(40, 167, 69, 0.15) !important; border-color: rgba(40, 167, 69, 0.3); } body.dark .note-bg-yellow-20 { background-color: rgba(255, 193, 7, 0.12) !important; border-color: rgba(255, 193, 7, 0.3); } body.dark .note-bg-blue-20 { background-color: rgba(23, 162, 184, 0.15) !important; border-color: rgba(23, 162, 184, 0.3); } body.dark .note-bg-purple-20 { background-color: rgba(111, 66, 193, 0.15) !important; border-color: rgba(111, 66, 193, 0.3); } /* Fix hard-coded #333 text inside note-bg task cards */ body.dark [class*="note-bg-"], body.dark [class*="note-bg-"] .lh-18, body.dark [class*="note-bg-"] .preload, body.dark [class*="note-bg-"] .m-t-5, body.dark [class*="note-bg-"] .m-b-5, body.dark [class*="note-bg-"] p, body.dark [class*="note-bg-"] span, body.dark [class*="note-bg-"] small { color: #e0e1ec; } /* =========================== DASHBOARD TILES (#m08dbt) =========================== */ body.dark .widget, body.dark .dashboard-card { background: #1b1e2d; border: 1px solid #2a2e42; } /* =========================== SIDEBAR ACTIVE ITEM (#m10sai) =========================== */ body.dark aside .active, body.dark aside li.current > a { background: rgba(114, 163, 51, 0.12); border-left: 3px solid #a8d26a; } /* =========================== COLORED BADGES / LABELS (#m11cbl) =========================== */ /* Green-on-green contrast bug: label-success uses same green for bg and text */ .label.label-success, a.label.label-success { background-color: #5e8a2b; color: #ffffff; font-weight: 600; } a.label.label-success { padding: 4px 10px; border-radius: 4px; } /* Desaturate saturated state badges (LOUÉ, DISPONIBLE, etc.) in dark mode */ body.dark .label-danger, body.dark .label-warning, body.dark .label-success, body.dark .label-info, body.dark .label-primary { filter: saturate(0.75) brightness(0.9); } body.dark .info-box-result [class*="fa-"].circle-small.red, body.dark .info-box-result [class*="icon-"].circle-small.red { color: color-mix(in srgb, var(--colors--red--400) 80%, transparent); background: color-mix(in srgb, var(--colors--red--900) 60%, transparent); } /* =========================== ALERT BANNERS (#m12alb) (replaces Bootstrap-2 cream bg on dark canvas) =========================== */ body.dark .alert { background: rgba(248, 148, 6, 0.10); color: #f1d9a8; border-left: 4px solid #f89406; border-radius: 6px; border-top: none; border-right: none; border-bottom: none; } body.dark .alert strong { color: #ffd98a; } body.dark .alert a, body.dark .alert .modifier { color: #a8d26a; text-decoration: underline; } body.dark .alert-success { background: rgba(40, 167, 69, 0.12); border-left-color: #28a745; color: #a3d9b1; } body.dark .alert-success strong { color: #c3e6cb; } body.dark .alert-danger, body.dark .alert-error { background: rgba(220, 53, 69, 0.12); border-left-color: #dc3545; color: #f5a8b0; } body.dark .alert-danger strong, body.dark .alert-error strong { color: #f8c3c8; } body.dark .alert-info { background: rgba(23, 162, 184, 0.12); border-left-color: #17a2b8; color: #a8d9e4; } body.dark .alert-info strong { color: #c3e8f0; } /* =========================== TABLE SORT ARROWS (#m13tsa) =========================== */ body.dark th .sort, body.dark th [class*="sort"], body.dark th i.icon-sort, body.dark th svg { color: #8a8fa3; fill: #8a8fa3; opacity: 0.9; } body.dark th.sorted-asc .sort, body.dark th.sorted-desc .sort, body.dark th.sorted-asc [class*="sort"], body.dark th.sorted-desc [class*="sort"] { color: #a8d26a; fill: #a8d26a; opacity: 1; } /* Background-image arrows (legacy icon sprites) */ body.dark th [style*="background-image"] { filter: invert(0.85) hue-rotate(180deg); } /* =========================== CHECKBOXES & RADIOS (#m14cbx) =========================== */ /* Native inputs (fallback) */ body.dark input[type="checkbox"], body.dark input[type="radio"] { accent-color: #a8d26a; } /* Custom .cb-rb — covers both checkbox_input and input[type="checkbox/radio"] variants */ body.dark .cb-rb input.checkbox_input + span::before, body.dark .checkbox.cb-rb input[type="checkbox"] + span::before, body.dark .checkbox .cb-rb input[type="checkbox"] + span::before { background: #2a2e42; border: 1.5px solid #5a5e76; border-radius: 3px; transition: background .12s, border-color .12s, box-shadow .12s; } body.dark .cb-rb:hover input.checkbox_input + span::before, body.dark .checkbox.cb-rb:hover input[type="checkbox"] + span::before, body.dark .checkbox .cb-rb:hover input[type="checkbox"] + span::before { border-color: #a8d26a; background: #323651; } body.dark .cb-rb input.checkbox_input:checked + span::before, body.dark .checkbox.cb-rb input[type="checkbox"]:checked + span::before, body.dark .checkbox .cb-rb input[type="checkbox"]:checked + span::before { background: #72a333; border-color: #8ab844; } /* Check mark */ body.dark .cb-rb input.checkbox_input:checked + span::after, body.dark .checkbox.cb-rb input[type="checkbox"]:checked + span::after { border-color: #ffffff; } /* Keyboard focus ring */ body.dark .cb-rb:focus-within input.checkbox_input + span::before, body.dark .checkbox.cb-rb:focus-within input[type="checkbox"] + span::before { box-shadow: 0 0 0 2px rgba(168, 210, 106, 0.45); outline: none; } body.dark .checkbox.cb-rb { border: none; } /* Radio buttons — same structure as checkboxes, ::before is the circle */ body.dark .radio.cb-rb input[type="radio"] + span::before { background: #2a2e42; border: 1.5px solid #5a5e76; border-radius: 50%; transition: background .12s, border-color .12s, box-shadow .12s; } body.dark .radio.cb-rb:hover input[type="radio"] + span::before { border-color: #a8d26a; } body.dark .radio.cb-rb input[type="radio"]:checked + span::before { background: #2a2e42; border-color: #a8d26a; } /* Inner dot drawn via ::after */ body.dark .radio.cb-rb input[type="radio"]:checked + span::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #a8d26a; top: 4px; left: 4px; } body.dark .radio.cb-rb:focus-within input[type="radio"] + span::before { box-shadow: 0 0 0 2px rgba(168, 210, 106, 0.45); outline: none; } /* =========================== BOOTSTRAP SWITCH (#m15bsw) =========================== */ /* Desaturate green ON half; replace red OFF with neutral grey (red reads as "error") */ body.dark .has-switch .switch-left.switch-success { background: #5e8a2b; color: #fff; } body.dark .has-switch .switch-right.switch-danger { background: #3a3e56; color: #8a8fa3; } body.dark .has-switch label.switch-small { background: #2a2e42; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } body.dark .has-switch { border: 1px solid rgba(255, 255, 255, 0.08); } /* =========================== TOP TAB NAVIGATION (#m16ttn) =========================== */ /* Container — flex + horizontal scroll prevents the wrap-to-second-row problem */ body.dark #form-box-tabs { border-bottom: none; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; scrollbar-width: thin; -ms-overflow-style: none; } body.dark #form-box-tabs::-webkit-scrollbar { height: 4px; } body.dark #form-box-tabs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; } body.dark #form-box-tabs li { margin: 0; flex-shrink: 0; } /* Inactive tab — transparent, quiet */ body.dark #form-box-tabs .tablink, body.dark .tablink { background: transparent !important; color: #c8cad8 !important; border: 1px solid transparent !important; border-radius: 7px; padding: 8px 14px; font-weight: 500; box-shadow: none !important; transition: background .12s, color .12s, border-color .12s; } body.dark #form-box-tabs .tablink:hover, body.dark .tablink:hover { background: rgba(255, 255, 255, 0.05) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.10) !important; } body.dark #form-box-tabs .tablink:focus-visible, body.dark .tablink:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(168, 210, 106, 0.45) !important; } /* Active tab — green pill, white text (~14:1 contrast) */ body.dark #form-box-tabs li.active .tablink, body.dark #form-box-tabs li.active a.tablink, body.dark .tablink.active { background: rgba(114, 163, 51, 0.18) !important; color: #ffffff !important; border: 1px solid rgba(168, 210, 106, 0.55) !important; box-shadow: none !important; } /* Bootstrap nav-tabs variant (no .tablink class) */ body.dark #form-box-tabs.nav-tabs > li a { background-color: rgb(34, 37, 55) !important; border-color: rgb(47, 51, 72) !important; color: rgb(154, 157, 181) !important; } body.dark #form-box-tabs.nav-tabs > li a:hover { background-color: rgb(42, 46, 66) !important; color: rgb(224, 225, 236) !important; } body.dark #form-box-tabs.nav-tabs > li.active a { background-color: rgb(27, 30, 45) !important; border-color: rgb(47, 51, 72) rgb(47, 51, 72) rgb(27, 30, 45) !important; color: rgb(224, 225, 236) !important; } /* =========================== PRINT — FORCE LIGHT =========================== */ @media print { body.dark { background-color: #fff !important; color: #000 !important; color-scheme: light; } body.dark * { background-color: transparent !important; color: #000 !important; border-color: #ddd !important; box-shadow: none !important; } } /* =========================== IMAGES & ICONS (invert for dark mode) =========================== */ /* Apply only when system is NOT dark */ @media not all and (prefers-color-scheme: dark) { img[src$="picto_landlord_search.svg"] { filter: none; /* replace with e.g. brightness(0.7) if recoloring needed */ } } /* And make sure the manual .dark toggle still wins where present */ .dark img[src$="picto_landlord_search.svg"] { filter: invert(1) brightness(1.6); } /* ===== FullCalendar dark mode — matched to app table palette ===== */ .dark #fullcalendar { color: rgb(224, 225, 236); background-color: rgb(19, 21, 32); /* same as body */ } /* Title (Mai 2026) */ .dark #fullcalendar .fc-header-title h2 { color: rgb(224, 225, 236); } /* Column header row (lun., mar., ...) — uses the app's TH colors */ .dark #fullcalendar .fc-widget-header { background-color: rgb(31, 34, 50); color: rgb(176, 179, 200); border-color: rgb(47, 51, 72); } /* Day cells — uses the app's TD colors */ .dark #fullcalendar .fc-widget-content { background-color: rgb(27, 30, 45); border-color: rgb(47, 51, 72); } /* All grid borders */ .dark #fullcalendar .fc-border-separate th, .dark #fullcalendar .fc-border-separate td { border-color: rgb(47, 51, 72); } /* Day numbers */ .dark #fullcalendar .fc-day-number { color: rgb(224, 225, 236); } /* Adjacent-month days: slightly darker fill + dimmed number */ .dark #fullcalendar .fc-other-month { background-color: rgb(22, 24, 37); } .dark #fullcalendar .fc-other-month .fc-day-number { color: rgb(120, 123, 145); } /* Today highlight (overrides the inline rgba green) */ .dark #fullcalendar .fc-state-highlight, .dark #fullcalendar td.fc-today { background-color: rgba(114, 163, 51, 0.28) !important; } .dark #fullcalendar .fc-today .fc-day-number { color: #ffffff; font-weight: 700; } .dark #fullcalendar td.fc-today { background-color: #2a2f44 !important; /* one step lighter than #1b1e2d cells */ box-shadow: inset 0 0 0 2px #72a333; /* green ring keeps the brand cue */ } /* Top header bar (today/title/nav row) */ .dark #fullcalendar .fc-header-left, .dark #fullcalendar .fc-header-center, .dark #fullcalendar .fc-header-right { background-color: #1f2232; } /* Prev / next / today buttons — match header surface */ .dark #fullcalendar .fc-button { background: rgb(31, 34, 50); background-image: none; border: 1px solid rgb(47, 51, 72); color: rgb(224, 225, 236); box-shadow: none; } .dark #fullcalendar .fc-button:hover { background: rgb(38, 42, 62); } .dark #fullcalendar .fc-state-disabled { opacity: 0.45; } .dark #fullcalendar .fc-text-arrow { color: rgb(224, 225, 236); } /* Event dot keeps its orange; dark text reads well on it */ .dark #fullcalendar .dot-event span { color: rgb(19, 21, 32); } /* ===== Alerts dropdown — dark mode ===== */ .dark .dropdown-menu.widget { background-color: #1b1e2d; border: 1px solid #2f3348; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); } /* Alert rows — the real white culprit (#f9f9f9 on .media) */ .dark .dropdown-menu.widget .media { background-color: #1b1e2d; } /* "ALERTES" heading row */ .dark ul.dropdown-menu.widget.pull-right > li.widget-heading, .dark .dropdown-menu.widget .widget-heading { background-color: #1f2232 !important; color: #b0b3c8; border-bottom: 1px solid #2f3348; } /* Each alert row */ .dark .dropdown-menu.widget > li { background-color: #1b1e2d; } .dark .dropdown-menu.widget > li:hover { background-color: #232740; } /* Alert title (Loyers en retard, etc.) */ .dark .dropdown-menu.widget .media-body .fs-14 { color: #e0e1ec; } /* Body text + the bold counts */ .dark .dropdown-menu.widget .media-body, .dark .dropdown-menu.widget .media-body div { color: #b0b3c8; } .dark .dropdown-menu.widget .media-body b { color: #e0e1ec; } /* Dividers between alerts */ .dark .dropdown-menu.widget .divider { background-color: #2f3348; border: 0; height: 1px; } /* Footer "Voir toutes les alertes" */ .dark ul.dropdown-menu.widget.pull-right > li.widget-footer, .dark .dropdown-menu.widget .widget-footer { background-color: #1f2232 !important; border-top: 1px solid #2f3348; } /* Links (Afficher / Cacher / footer) keep your brand green */ .dark .dropdown-menu.widget a { color: #72a333; } .dark .dropdown-menu.widget a:hover { color: #8cc04a; } /* Status icons — keep their semantic colors but brighten for dark bg */ .dark .dropdown-menu.widget .fa-exclamation-triangle.red { color: #f06363; } .dark .dropdown-menu.widget .fa-exclamation-triangle.yellow { color: #f0c14b; } .dark .dropdown-menu.widget .fa-exclamation-triangle.blue { color: #5b9bd5; } /* Inbox / messaging */ .dark .message-content { background-color: #1e2530 !important; color: #e2e6ec !important; border: 1px solid #2c3543 !important; } .dark .message-content * { color: #e2e6ec !important; } .dark .inbox-messages-content-body { background-color: #161c25 !important; color: #e2e6ec !important; } .dark .inbox-messages-content-body * { color: #e2e6ec !important; } .dark .inbox-messages-content-header, .dark .inbox-messages-content-body, .dark .inbox-messages-content-reply { border-bottom: 1px solid #2c3543 !important; } /* Rich-text answer editor shell */ .dark iframe.wysihtml5-sandbox { background-color: #1e2530 !important; border: 1px solid #2c3543 !important; } /* sim-style switch — dark mode */ .dark .has-switch.sim-style:has(> div.switch-off), .dark .sim-style.has-switch:has(.switch-animate.switch-off) { background-color: #3a3f56 !important; border-color: #4a4f68 !important; } .dark .sim-style.has-switch:has(.switch-animate.switch-off) .switch-right.switch-danger { background-color: #3a3f56 !important; } .dark .sim-style.has-switch label.switch-small { border-color: #4a4f68 !important; }