/* ======================================================================== TerangaManager — Light + Dark theme Le thème est piloté par 2 attributs sur : data-theme="light|dark" (utilisé par nos classes custom) data-bs-theme="light|dark" (utilisé par Bootstrap 5.3+) "auto" résout vers light/dark via prefers-color-scheme côté JS. ======================================================================== */ :root { /* Couleurs marque (constantes dans les 2 thèmes) */ --tmgr-navy: #1E3464; --tmgr-navy-dark: #14244a; --tmgr-gold: #D4A843; --tmgr-gold-dark: #b88c2c; /* Surfaces (light) */ --tmgr-bg: #f5f6fa; --tmgr-surface: #ffffff; --tmgr-surface-2: #f9fafb; --tmgr-text: #1c2434; --tmgr-text-muted: #6b7280; --tmgr-border: #e5e7eb; --tmgr-shadow: 0 1px 3px rgba(0,0,0,.05); --tmgr-shadow-lg: 0 4px 12px rgba(0,0,0,.08); --tmgr-input-bg: #ffffff; --tmgr-table-hover: #f9fafb; --tmgr-sidebar-grad: linear-gradient(180deg, var(--tmgr-navy) 0%, var(--tmgr-navy-dark) 100%); } [data-theme="dark"] { --tmgr-bg: #0f172a; --tmgr-surface: #1e293b; --tmgr-surface-2: #243049; --tmgr-text: #e2e8f0; --tmgr-text-muted: #94a3b8; --tmgr-border: #334155; --tmgr-shadow: 0 1px 3px rgba(0,0,0,.4); --tmgr-shadow-lg: 0 4px 16px rgba(0,0,0,.5); --tmgr-input-bg: #243049; --tmgr-table-hover: #243049; --tmgr-sidebar-grad: linear-gradient(180deg, #0a1424 0%, #050a16 100%); } html, body { height: 100%; } body { background: var(--tmgr-bg); color: var(--tmgr-text); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; transition: background-color .2s, color .2s; } a { color: var(--tmgr-navy); } [data-theme="dark"] a { color: #93c5fd; } a:hover { color: var(--tmgr-gold-dark); } [data-theme="dark"] a:hover { color: var(--tmgr-gold); } /* ===== Sidebar ===== */ .tmgr-sidebar { background: var(--tmgr-sidebar-grad); color: #fff; min-height: 100vh; width: 250px; position: fixed; top: 0; left: 0; padding: 0; z-index: 1040; overflow-y: auto; -webkit-overflow-scrolling: touch; } .tmgr-sidebar .nav { padding-bottom: 2rem; } .tmgr-sidebar .brand { padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.1); font-weight: 700; font-size: 1.15rem; color: var(--tmgr-gold); letter-spacing: .5px; } .tmgr-sidebar .brand small { display:block; color:#cbd5e1; font-weight:400; font-size:.7rem; letter-spacing:1px; } .tmgr-sidebar .nav-link { color: rgba(255,255,255,.85); padding: .7rem 1.5rem; border-left: 3px solid transparent; display: flex; align-items: center; gap: .6rem; transition: all .15s; } .tmgr-sidebar .nav-link:hover { background: rgba(255,255,255,.05); color: #fff; } .tmgr-sidebar .nav-link.active { background: rgba(212,168,67,.12); border-left-color: var(--tmgr-gold); color: var(--tmgr-gold); font-weight: 600; } .tmgr-sidebar .nav-link i { width: 18px; text-align: center; } /* ===== Main content ===== */ .tmgr-main { margin-left: 250px; min-height: 100vh; } .tmgr-topbar { background: var(--tmgr-surface); border-bottom: 1px solid var(--tmgr-border); padding: .75rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; position: sticky; top: 0; z-index: 1020; } .tmgr-content { padding: 1.5rem; } /* Backdrop affiché derrière la sidebar quand elle est ouverte sur mobile */ .tmgr-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1035; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .tmgr-backdrop.show { display: block; } body.no-scroll { overflow: hidden; } /* ===== Theme switcher ===== */ .theme-switcher { display: inline-flex; background: var(--tmgr-bg); border: 1px solid var(--tmgr-border); border-radius: 999px; padding: 3px; gap: 2px; } .theme-switcher button { background: transparent; border: 0; width: 32px; height: 28px; border-radius: 999px; color: var(--tmgr-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all .15s; } .theme-switcher button:hover { color: var(--tmgr-text); background: var(--tmgr-surface-2); } .theme-switcher button.active { background: var(--tmgr-gold); color: #1c2434; } /* ===== Cards / tables / forms ===== */ .card { border: 0; background: var(--tmgr-surface); color: var(--tmgr-text); box-shadow: var(--tmgr-shadow); border-radius: .5rem; } .card-header { background: var(--tmgr-surface); border-bottom: 1px solid var(--tmgr-border); font-weight: 600; color: var(--tmgr-text); } .card-body { color: var(--tmgr-text); } [data-theme="dark"] .text-muted, [data-theme="dark"] .text-secondary { color: var(--tmgr-text-muted) !important; } .list-group-item { background: var(--tmgr-surface); color: var(--tmgr-text); border-color: var(--tmgr-border); } /* KPI tiles */ .kpi { background: var(--tmgr-surface); border-radius: .5rem; padding: 1.25rem; box-shadow: var(--tmgr-shadow); border-left: 4px solid var(--tmgr-navy); } .kpi.gold { border-left-color: var(--tmgr-gold); } .kpi.success { border-left-color: #16a34a; } .kpi.warning { border-left-color: #f59e0b; } .kpi .label { color: var(--tmgr-text-muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; } .kpi .value { font-size:1.75rem; font-weight:700; color: var(--tmgr-text); margin-top:.25rem; } [data-theme="dark"] .kpi .value { color: #fff; } /* Boutons (couleurs marque) */ .btn-primary { background: var(--tmgr-navy); border-color: var(--tmgr-navy); } .btn-primary:hover, .btn-primary:focus { background: var(--tmgr-navy-dark); border-color: var(--tmgr-navy-dark); } .btn-gold { background: var(--tmgr-gold); border-color: var(--tmgr-gold); color: #1c2434; } .btn-gold:hover { background: var(--tmgr-gold-dark); border-color: var(--tmgr-gold-dark); color:#fff; } /* Tables */ .table { --bs-table-bg: transparent; color: var(--tmgr-text); } .table thead th { background: var(--tmgr-navy); color: #fff; border: 0; font-weight: 600; } .table-hover tbody tr:hover { background: var(--tmgr-table-hover); } .table > :not(caption) > * > * { background-color: transparent; color: inherit; } [data-theme="dark"] .table { border-color: var(--tmgr-border); } /* Form controls */ .form-control, .form-select, .input-group-text { background: var(--tmgr-input-bg); color: var(--tmgr-text); border-color: var(--tmgr-border); } .form-control:focus, .form-select:focus { background: var(--tmgr-input-bg); color: var(--tmgr-text); } .form-control::placeholder { color: var(--tmgr-text-muted); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { color-scheme: dark; } /* Modals */ .modal-content { background: var(--tmgr-surface); color: var(--tmgr-text); border: 1px solid var(--tmgr-border); } .modal-header, .modal-footer { border-color: var(--tmgr-border); } /* Dropdown menus */ .dropdown-menu { background: var(--tmgr-surface); border-color: var(--tmgr-border); } .dropdown-item { color: var(--tmgr-text); } .dropdown-item:hover, .dropdown-item:focus { background: var(--tmgr-surface-2); color: var(--tmgr-text); } .dropdown-header { color: var(--tmgr-text-muted); font-weight: 700; text-transform: uppercase; font-size: .7rem; letter-spacing: .5px; } .dropdown-divider { border-color: var(--tmgr-border); } /* Recherche globale */ #globalSearchWrap .input-group-text { background: var(--tmgr-input-bg); } #globalSearchWrap .form-control { background: var(--tmgr-input-bg); border-left: 0; } /* Photos grid (biens) */ .bien-photos { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:.5rem; } .bien-photos .ph { position: relative; padding-top: 75%; background:var(--tmgr-surface-2); border-radius:.4rem; overflow:hidden; } .bien-photos .ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .bien-photos .ph .cover-badge { position:absolute; top:.3rem; left:.3rem; background:var(--tmgr-gold); color:#1c2434; padding:.1rem .4rem; font-size:.7rem; border-radius:.2rem; font-weight:600; } /* Login (centré, fond fixe Navy) */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--tmgr-navy) 0%, var(--tmgr-navy-dark) 100%); padding: 1rem; position: relative; } .login-card { background: var(--tmgr-surface); color: var(--tmgr-text); border-radius: .75rem; width: 100%; max-width: 420px; padding: 2.25rem; box-shadow: 0 20px 50px rgba(0,0,0,.3); } .login-card .brand { text-align: center; margin-bottom: 1.5rem; } .login-card .brand .name { font-size: 1.4rem; font-weight: 700; color: var(--tmgr-navy); } [data-theme="dark"] .login-card .brand .name { color: var(--tmgr-gold); } .login-card .brand .sub { color: var(--tmgr-gold); font-size:.85rem; letter-spacing:1px; } .login-theme-switch { position: absolute; top: 1rem; right: 1rem; } /* ===== Responsive : tablette portrait & mobile ===== */ .tmgr-toggle { display: none; } /* < 992 px : sidebar masquée par défaut, ouverte au clic, avec backdrop */ @media (max-width: 991.98px) { .tmgr-sidebar { transform: translateX(-100%); transition: transform .28s ease; box-shadow: 4px 0 24px rgba(0,0,0,.25); } .tmgr-sidebar.open { transform: translateX(0); } .tmgr-main { margin-left: 0; } .tmgr-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; } .tmgr-content { padding: 1rem; } .tmgr-topbar { padding: .6rem .8rem; gap: .35rem; } .tmgr-topbar .h6 { display: none !important; } /* La barre de recherche prend tout l'espace restant */ #globalSearchWrap { max-width: none !important; margin: 0 .25rem !important; } #globalSearchWrap .input-group-text { padding: .35rem .55rem; } #globalSearchWrap .form-control { font-size: .92rem; padding: .35rem .55rem; } /* Cartes / KPI plus compactes */ .kpi { padding: .9rem 1rem; } .kpi .value { font-size: 1.35rem; } .card-body { padding: 1rem; } .card-header { padding: .65rem .9rem; font-size: .92rem; } /* Tables : police légèrement réduite */ .table { font-size: .88rem; } .table thead th { padding: .55rem .5rem; } .table td, .table th { padding: .55rem .5rem; } /* Boutons icônes plus pratiques au pouce */ .btn-sm { padding: .35rem .55rem; } /* Modals : full-width avec petite marge */ .modal-dialog { margin: .5rem; } /* Sidebar item : tap target + grand, transition smooth */ .tmgr-sidebar .nav-link { padding: .85rem 1.5rem; font-size: .98rem; } } /* < 576 px : ajustements écrans étroits */ @media (max-width: 575.98px) { .tmgr-content { padding: .75rem; } .tmgr-topbar { padding: .5rem .6rem; } .tmgr-topbar .dropdown .btn-link { padding: .25rem .35rem; font-size: .9rem; } .tmgr-topbar .dropdown-toggle::after { display: none; } /* On masque le label "(rôle)" et la chevron */ .tmgr-topbar .dropdown small { display: none !important; } /* Cacher le label du nom utilisateur, on garde l'icône */ .tmgr-topbar .dropdown .btn-link { font-size: 0; } .tmgr-topbar .dropdown .btn-link i { font-size: 1.25rem; } .tmgr-topbar .dropdown .btn-link::before { content: ''; } /* KPI plus serrés */ .kpi { padding: .75rem .85rem; } .kpi .label { font-size: .68rem; } .kpi .value { font-size: 1.15rem; } /* Login : padding réduit */ .login-card { padding: 1.5rem 1.25rem; } .login-theme-switch { top: .5rem; right: .5rem; } /* Form labels : moins grandes */ .form-label { font-size: .88rem; margin-bottom: .25rem; } } /* ===== Adaptation Bootstrap utility classes en mode sombre ===== */ /* Badges bg-light text-dark : utilisés partout pour les "puces neutres". En mode sombre, on inverse pour rester lisibles. */ [data-theme="dark"] .badge.bg-light, [data-theme="dark"] .bg-light { background: var(--tmgr-surface-2) !important; color: var(--tmgr-text) !important; } [data-theme="dark"] .badge.bg-light.text-dark, [data-theme="dark"] .bg-light.text-dark { color: var(--tmgr-text) !important; } /* bg-white forcé : utiliser la surface du thème */ [data-theme="dark"] .bg-white { background: var(--tmgr-surface) !important; color: var(--tmgr-text) !important; } /* Lignes de tableau en surbrillance — Bootstrap les fait en jaune clair par défaut. On atténue en sombre. */ [data-theme="dark"] .table-warning, [data-theme="dark"] .table > tbody > tr.table-warning > * { --bs-table-bg: rgba(245, 158, 11, .15); --bs-table-color: #fde68a; background-color: rgba(245, 158, 11, .15) !important; color: #fde68a !important; } [data-theme="dark"] .table-light, [data-theme="dark"] .table > tbody > tr.table-light > * { --bs-table-bg: var(--tmgr-surface-2); --bs-table-color: var(--tmgr-text); background-color: var(--tmgr-surface-2) !important; color: var(--tmgr-text) !important; } [data-theme="dark"] .table-secondary, [data-theme="dark"] .table > tfoot > tr.table-secondary > *, [data-theme="dark"] .table > tbody > tr.table-secondary > * { --bs-table-bg: var(--tmgr-surface-2); --bs-table-color: var(--tmgr-text); background-color: var(--tmgr-surface-2) !important; color: var(--tmgr-text) !important; } /* Alerts — Bootstrap 5.3 a déjà des variantes dark mais on s'assure de la lisibilité */ [data-theme="dark"] .alert-success { background: rgba(22, 163, 74, .15); color: #86efac; border-color: rgba(22, 163, 74, .3); } [data-theme="dark"] .alert-danger { background: rgba(220, 38, 38, .15); color: #fca5a5; border-color: rgba(220, 38, 38, .3); } [data-theme="dark"] .alert-warning { background: rgba(245, 158, 11, .15); color: #fde68a; border-color: rgba(245, 158, 11, .3); } [data-theme="dark"] .alert-info { background: rgba(59, 130, 246, .15); color: #93c5fd; border-color: rgba(59, 130, 246, .3); } /* Inputs disabled, file inputs : rendre lisibles en sombre */ [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-select:disabled { background: var(--tmgr-bg); color: var(--tmgr-text-muted); } [data-theme="dark"] .form-control[type="file"]::file-selector-button { background: var(--tmgr-surface-2); color: var(--tmgr-text); border-color: var(--tmgr-border); } [data-theme="dark"] .form-control[type="date"]::-webkit-calendar-picker-indicator, [data-theme="dark"] .form-control[type="datetime-local"]::-webkit-calendar-picker-indicator, [data-theme="dark"] .form-control[type="month"]::-webkit-calendar-picker-indicator { filter: invert(.85); } /* btn-link / btn-outline-* en sombre */ [data-theme="dark"] .btn-link { color: #93c5fd; } [data-theme="dark"] .btn-link:hover { color: #bfdbfe; } [data-theme="dark"] .btn-outline-secondary { color: var(--tmgr-text-muted); border-color: var(--tmgr-border); } [data-theme="dark"] .btn-outline-secondary:hover { background: var(--tmgr-surface-2); color: var(--tmgr-text); } [data-theme="dark"] .btn-outline-primary { color: #93c5fd; border-color: #1e40af; } [data-theme="dark"] .btn-outline-primary:hover { background: #1e40af; color: #fff; } [data-theme="dark"] .btn-outline-danger { color: #fca5a5; border-color: rgba(220,38,38,.5); } [data-theme="dark"] .btn-outline-danger:hover { background: #dc2626; color: #fff; } /* List groups dans cards (dashboard, detail bien…) */ [data-theme="dark"] .list-group-flush > .list-group-item { background: var(--tmgr-surface); border-color: var(--tmgr-border); } /* Pagination */ [data-theme="dark"] .pagination .page-link { background: var(--tmgr-surface); color: var(--tmgr-text); border-color: var(--tmgr-border); } [data-theme="dark"] .pagination .page-item.active .page-link { background: var(--tmgr-navy); border-color: var(--tmgr-navy); color: #fff; } /* Inputs date Bootstrap dark */ [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="datetime-local"], [data-theme="dark"] input[type="month"], [data-theme="dark"] input[type="time"] { color-scheme: dark; } /* Section headers de la sidebar (Locatif / Comptabilité / Administration) */ .tmgr-sidebar .nav .px-3.text-uppercase { color: rgba(255,255,255,.55) !important; } /* Print */ @media print { .tmgr-sidebar, .tmgr-topbar, .btn, button, form { display: none !important; } .tmgr-main { margin-left: 0 !important; } body { background: #fff !important; color: #000 !important; } .card { box-shadow: none !important; border: 1px solid #ddd !important; } }