@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* Theme variables on */ html[data-theme="light"] { --bg: #f4f7fb; --card: #ffffff; --text: #0f172a; --muted: #475569; --border: rgba(15,23,42,.12); --brand1: #2563eb; --brand2: #4e8cff; --accent: #2563eb; --success: #16a34a; --warning: #f59e0b; --danger: #ef4444; } html:not([data-theme="light"]) { --bg: #0b1220; --card: #101b33; --text: #eaf1ff; --muted: #9fb3c8; --border: rgba(255,255,255,.12); --brand1: #1b2a4a; --brand2: #233a62; --accent: #4facfe; /* brighter in dark for contrast */ --success: #26c281; --warning: #f59e0b; --danger: #ef4444; } /* ---------- Forms ---------- */ .form-select, .form-control{ background-color: var(--bg) !important; color: var(--text) !important; border-color: var(--border) !important; } .form-select option{ color: var(--text); background: var(--bg); } /* ---------- Base ---------- */ html,body{height:100%} body{ background:var(--bg); color:var(--text); font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif } /* ---------- Navbar ---------- */ .navbar{ border-radius:14px; background:linear-gradient(90deg,var(--brand1),var(--brand2))!important; box-shadow:0 10px 30px rgba(0,0,0,.25) } .navbar .navbar-brand,.navbar .nav-link,.navbar .navbar-text a{ color:var(--text)!important } /* ---------- Layout Containers ---------- */ .container.main{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:2rem; margin-top:1.25rem; box-shadow:0 30px 80px rgba(0,0,0,.15) } .card{ background:var(--card); border:1px solid var(--border); border-radius:16px; color:var(--text) } .card .number{font-size:2rem;font-weight:800;letter-spacing:.5px} .card .label{color:var(--muted);font-weight:600;text-transform:uppercase;font-size:.8rem} /* ---------- Tables ---------- */ .table{color:var(--text)} .table thead{background:rgba(0,0,0,.06)} html:not([data-theme="light"]) .table thead{background:rgba(255,255,255,.04)} /* better in dark */ .table-hover tbody tr:hover{background:rgba(0,0,0,.04)} html:not([data-theme="light"]) .table-hover tbody tr:hover{background:rgba(255,255,255,.03)} /* ---------- Badges (chips) ---------- */ .badge{font-weight:700;padding:.45em .6em;border-radius:9px} .badge-success{background:rgba(38,194,129,.2)!important;color:var(--success)!important} .badge-warning{background:rgba(245,158,11,.22)!important;color:#111!important} .badge-danger {background:rgba(239,68,68,.22)!important;color:var(--danger)!important} /* If you use text-only status anywhere */ .text-paid{color: var(--success)!important;} .text-partial{color: var(--warning)!important;} .text-unpaid{color: var(--danger)!important;} /* ---------- Buttons ---------- */ .btn{border-radius:10px!important;font-weight:600!important} /* gradient primary buttons */ .btn-gradient{ background:linear-gradient(90deg,var(--accent),#00f2fe); border:none; color:#08131f } /* FIX: outline buttons readable in dark mode (Reallocate/Export/etc.) */ .btn-outline-light{ /* Make the label & border use accent so it pops on dark background */ color: var(--accent) !important; border-color: var(--accent) !important; background: transparent !important; box-shadow: 0 0 0 1px var(--accent) inset; /* adds a crisp outline */ } .btn-outline-light:hover, .btn-outline-light:focus{ background: var(--accent) !important; color: #08131f !important; border-color: var(--accent) !important; } .btn-outline-light:disabled, .btn-outline-light.disabled{ color: #8aa5c9 !important; border-color: #8aa5c9 !important; opacity: .7 !important; } /* Inputs override (keep borders consistent) */ .form-control,.form-select,textarea{ background:transparent!important; color:var(--text)!important; border:1px solid var(--border)!important; border-radius:10px!important } /* ---------- FullCalendar ---------- */ .fc,.fc *{color:var(--text)} .fc .fc-toolbar-title{color:var(--text)} .fc .fc-button{background:var(--accent);border:none} .fc-theme-standard .fc-scrollgrid{border-color:var(--border)} .fc-theme-standard td,.fc-theme-standard th{border-color:var(--border)} /* ---------- Modal visibility fixes ---------- */ .modal-backdrop, .modal-backdrop.fade, .modal-backdrop.show { background-color: rgba(0, 0, 0, 0.85) !important; /* darker backdrop */ opacity: 1 !important; /* no transparency fade */ } .modal-content { background-color: var(--card) !important; /* solid panel */ color: var(--text) !important; border: 1px solid var(--border) !important; box-shadow: 0 8px 40px rgba(0,0,0,.6) !important; } .modal-header, .modal-footer { background: rgba(0,0,0,0.08) !important; border-color: var(--border) !important; } .modal-content .form-control, .modal-content .form-select, .modal-content textarea { background-color: var(--bg) !important; color: var(--text) !important; border-color: var(--border) !important; } .modal-content .form-check-input { background-color: var(--bg) !important; border-color: var(--border) !important; } /* Ensure z-order is correct in case of custom stacking contexts */ .modal { z-index: 1060 !important; } .modal-backdrop { z-index: 1050 !important; } /* ===== Hard-enforce dark surfaces for data areas (put at END of style.css) ===== */ /* Treat any of these as "dark mode" */ html:not([data-theme="light"]), html[data-theme="dark"], html.dark, body.dark { /* Cards / containers */ --_card: var(--card); --_bg: var(--bg); --_text: var(--text); --_border: var(--border); } /* Cards, main container, headers */ html:not([data-theme="light"]) .container.main, html:not([data-theme="light"]) .card, html:not([data-theme="light"]) .card-header { background-color: var(--_card) !important; color: var(--_text) !important; border-color: var(--_border) !important; } /* Tables: base, header, body, cells */ html:not([data-theme="light"]) .table { background-color: var(--_card) !important; color: var(--_text) !important; border-color: var(--_border) !important; } /* Table header */ html:not([data-theme="light"]) .table thead, html:not([data-theme="light"]) .table thead th { background-color: rgba(255,255,255,.04) !important; color: var(--_text) !important; border-color: var(--_border) !important; } /* Table body rows & cells */ html:not([data-theme="light"]) .table tbody, html:not([data-theme="light"]) .table tbody tr, html:not([data-theme="light"]) .table tbody td, html:not([data-theme="light"]) .table tbody th { background-color: var(--_card) !important; color: var(--_text) !important; border-color: var(--_border) !important; } /* Table hover & striped overrides */ html:not([data-theme="light"]) .table-hover tbody tr:hover { background-color: rgba(255,255,255,.03) !important; } html:not([data-theme="light"]) .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(255,255,255,.02) !important; background-color: rgba(255,255,255,.02) !important; } /* Bootstrap helpers that force light backgrounds */ html:not([data-theme="light"]) .bg-white, html:not([data-theme="light"]) .bg-body, html:not([data-theme="light"]) .bg-light { background-color: var(--_card) !important; color: var(--_text) !important; } /* Inputs inside dark areas */ html:not([data-theme="light"]) .form-control, html:not([data-theme="light"]) .form-select, html:not([data-theme="light"]) textarea, html:not([data-theme="light"]) input[type="text"], html:not([data-theme="light"]) input[type="number"], html:not([data-theme="light"]) input[type="search"], html:not([data-theme="light"]) input[type="date"] { background-color: var(--_bg) !important; color: var(--_text) !important; border-color: var(--_border) !important; } /* Small summaries under filters */ html:not([data-theme="light"]) .text-muted { color: var(--muted) !important; } /* ---------- Dark-mode fixes for modal lists and menus ---------- */ /* Agreements list inside modal */ /* --- Modal List Group: Hard dark mode enforcement --- */ html:not([data-theme="light"]) .modal .list-group, html:not([data-theme="light"]) .modal .list-group-item { background-color: var(--_card) !important; color: var(--_text) !important; border-color: var(--_border) !important; } html:not([data-theme="light"]) .modal .list-group, html:not([data-theme="light"]) .modal-content .list-group { --bs-list-group-bg: var(--_card) !important; --bs-list-group-color: var(--_text) !important; --bs-list-group-border-color: var(--_border) !important; } html:not([data-theme="light"]) .modal .list-group-item { background-color: var(--_card) !important; color: var(--_text) !important; border-color: var(--_border) !important; } html:not([data-theme="light"]) .modal .list-group-item .small { color: var(--muted) !important; } /* Scrollbar for modal list in dark */ html:not([data-theme="light"]) .modal .list-group { scrollbar-color: var(--_border) var(--_card); scrollbar-width: thin; } html:not([data-theme="light"]) .modal .list-group::-webkit-scrollbar { width: 8px; background: var(--_card); } html:not([data-theme="light"]) .modal .list-group::-webkit-scrollbar-thumb { background: var(--_border); border-radius: 6px; } /* Checkbox accent in dark */ html:not([data-theme="light"]) input[type="checkbox"].form-check-input { background-color: var(--_bg) !important; border-color: var(--_border) !important; accent-color: var(--accent); } /* Dropdowns in dark */ html:not([data-theme="light"]) .dropdown-menu { background-color: var(--_card) !important; color: var(--_text) !important; border-color: var(--_border) !important; } html:not([data-theme="light"]) .dropdown-item { color: var(--_text) !important; } html:not([data-theme="light"]) .dropdown-item:hover, html:not([data-theme="light"]) .dropdown-item:focus { background-color: rgba(255,255,255,.06) !important; color: var(--_text) !important; } /* Improve contrast for Agreements modal in dark mode */ [data-bs-theme="dark"] #signedModal .text-muted, [data-bs-theme="dark"] #signedModal .form-text { color: rgba(255,255,255,0.75) !important; } /* Make placeholders visible in dark mode */ [data-bs-theme="dark"] #signedModal input::placeholder { color: rgba(255,255,255,0.6); opacity: 1; /* some browsers lower opacity by default */ } html[data-theme="dark"] #signedModal .form-text { color: rgba(255, 255, 255, 0.75) !important; } html[data-theme="dark"] #signedModal input::placeholder { color: rgba(255, 255, 255, 0.7); opacity: 1; } /* Global placeholder visibility */ input::placeholder, textarea::placeholder, .form-control::placeholder, .form-select::placeholder { color: var(--muted) !important; opacity: 0.9 !important; } html:not([data-theme="light"]) input::placeholder, html:not([data-theme="light"]) textarea::placeholder, html:not([data-theme="light"]) .form-control::placeholder, html:not([data-theme="light"]) .form-select::placeholder { color: rgba(255,255,255,0.78) !important; opacity: 1 !important; } /* Make date pickers visible in dark mode */ input[type="date"] { color: var(--text) !important; } input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8) brightness(1.2); } html:not([data-theme="light"]) input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.6); } /* =================================================================== MOBILE RESPONSIVE — Rental Dashboard Pages =================================================================== */ /* --- Medium screens (tablets, < 768px) --- */ @media (max-width: 767.98px) { /* Container: tighter padding */ .container.main { padding: 1rem !important; margin-top: 0.5rem; border-radius: 12px; } /* Navbar: slightly smaller border-radius */ .navbar { border-radius: 10px; } /* Page headers: stack title + buttons vertically */ .page-header { flex-direction: column !important; align-items: stretch !important; gap: 0.5rem; } .page-header h4 { font-size: 1.15rem; } .page-header .header-actions { display: flex; gap: 0.5rem; } .page-header .header-actions .btn { flex: 1; text-align: center; font-size: 0.85rem; padding: 0.4rem 0.5rem; } /* Chart card headers: wrap title + download button */ .chart-header { flex-direction: column !important; align-items: flex-start !important; gap: 0.4rem; } .chart-header h5 { font-size: 0.95rem; } .chart-header .btn { font-size: 0.72rem; padding: 0.2rem 0.45rem; align-self: flex-end; } /* KPI cards */ .kpi.card { min-width: unset !important; } .kpi .number { font-size: 1.35rem !important; } .kpi .label { font-size: .68rem !important; } /* Filter summary stats: wrap */ .filter-summary { display: flex !important; flex-wrap: wrap; gap: 0.15rem 0.75rem; } /* Tables: compact on mobile */ .table { font-size: 0.82rem; } .table th, .table td { padding: 0.4rem 0.35rem; } /* Action buttons in table rows */ .table .btn-sm { font-size: 0.72rem; padding: 0.2rem 0.4rem; margin-bottom: 2px; } .table .btn-group { flex-wrap: wrap; } /* Bottom action bar (bulk delete + pagination) */ .bottom-bar { flex-direction: column !important; gap: 0.75rem; align-items: stretch !important; } /* Pagination: smaller links */ .pagination .page-link { padding: 0.28rem 0.55rem; font-size: 0.82rem; } /* Settings page: full-width number inputs */ .w-140 { max-width: 100% !important; } /* Badges: slightly smaller */ .badge { font-size: 0.7rem; padding: 0.3em 0.45em; } /* Forms: full-width columns */ .form-check-label { font-size: 0.88rem; } /* Calendar: FullCalendar toolbar stacking */ .fc .fc-toolbar { flex-direction: column; gap: 0.5rem; } .fc .fc-toolbar-title { font-size: 1.1rem !important; } /* Modal improvements */ .modal-dialog { margin: 0.5rem; } } /* --- Extra-small screens (phones, < 576px) --- */ @media (max-width: 575.98px) { .container.main { padding: 0.65rem !important; border-radius: 10px; } .kpi .number { font-size: 1.15rem !important; } .kpi .label { font-size: .62rem !important; } .table { font-size: 0.78rem; } .table th, .table td { padding: 0.3rem 0.25rem; } .page-header h4 { font-size: 1.05rem; } /* Navbar user/role info */ .navbar-text { font-size: 0.8rem; } .navbar .badge { font-size: 0.65rem; } /* Charts: reduce canvas height */ .chart-header h5 { font-size: 0.88rem; } /* Filter card: reduce padding */ .filter-card { padding: 0.65rem !important; } .filter-card .form-label { font-size: 0.72rem; } /* Alerts */ .alert { font-size: 0.85rem; padding: 0.5rem 0.75rem; } /* Section titles in settings */ .section-title { font-size: 0.95rem; } }