/*
* Balaaji's shared dark theme -- deep navy (repointed from Balaaji's neutral
* charcoal, cloned from that same reusable template) with a gold accent
* used sparingly, matching the conch-shell icon's own navy-and-gold palette
* (assets/images/balaaji-icon.png / balaaji_logo_*.svg -- border navy below is
* that icon's exact badge blue, #2A3A63). Variable names kept as
* --maroon-* since they're referenced by var() across 14+ content pages in
* package/closebee-balaaji-enterprise/ -- only the values changed here.
* This file, plus index.html and the logo assets in assets/images/,
* together form the reusable template: to spin up the next product on the
* same lines, clone this project, repoint the :root values below to the
* new brand palette, and swap the three logo files in assets/images/.
*/
:root {
--bg-dark: #0c0f1a;
--maroon-mid: #1a2140;
--maroon-card: #12172a;
--maroon-border: #2A3A63;
--gold-accent: #8A5D1A;
--gold-hover: #A9792A;
--gold-bright: #E8B04B;
--text-light: #F3E8E0;
/* Brightened from #C4A691 -- this drives every secondary/small-text
label across the app (addresses, table headers, timestamps), and a
CA's typical user skews older; legibility matters more than a subtle
muted tone here. */
--text-muted: #E3CBB6;
}
* { padding: 0; margin: 0; box-sizing: border-box; }
/* Flex column so .main-footer's margin-top:auto can push it to the bottom
of the viewport on short pages (e.g. an empty "No records found" state)
instead of leaving a dead gap below it, without every page's own content
wrapper needing to know about this. */
#page-content {
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
flex-direction: column;
min-height: 100vh;
}
#page-content.loaded {
opacity: 1;
}
/* Every Bootstrap modal across Balaaji, centralized here instead of each
page redefining it locally (a few pages used a "-dark" suffixed class
for the same purpose, e.g. .modal-content-dark -- the plain .modal-content
selector still matches those too, so this covers both conventions with
no per-page markup changes needed). Two things this fixes app-wide:
1. The header used to have no background of its own -- it just inherited
.modal-content's, so header and body read as one continuous block.
A light gold band with near-black text makes "this is the header"
unambiguous at a glance, rather than relying on a subtler dark-on-dark
shade difference. The close icon (many modals hardcode the
"btn-close-white" class, meant for a dark header) needs its invert
filter cancelled here specifically, or it would render an
invisible-on-light-gold white-on-white icon.
2. Bootstrap's default backdrop is 50% black -- barely a shade different
from this theme's already-near-black background, so the "page
blocked" effect a modal is supposed to have was effectively
invisible. Darker + more opaque actually reads as an overlay. Only
dims the container the modal is IN (its own document -- e.g. a
client's own nested detail iframe), not the whole browser window;
a known, accepted limitation of the iframe-per-page architecture. */
.modal-content { background: var(--maroon-card); color: var(--text-light); border: 1px solid var(--maroon-border); }
.modal-header { background: var(--gold-bright); border-bottom: 1px solid var(--maroon-border); color: #1a1006; }
.modal-header .modal-title { color: #1a1006; }
.modal-header .btn-close { filter: none; }
.modal-footer { border-top: 1px solid var(--maroon-border); }
.modal-backdrop { background: #000; }
.modal-backdrop.show { opacity: 0.8; }
html, body {
min-height: 100vh;
overflow-x: hidden;
overflow-y: auto;
background: radial-gradient(circle at center, var(--maroon-mid) 0%, var(--bg-dark) 100%);
color: var(--text-light);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Poppins used everywhere now (same as the marketing site, balaajiweb.closebee.com/
assets/css/site.css) -- headings just go bolder/tighter than body text. */
h1, h2, h3, h4, h5, h6, .display {
font-family: 'Poppins', 'Segoe UI', sans-serif;
font-weight: 700;
letter-spacing: -0.02em;
}
/* Scrollbars hidden everywhere (content still scrolls normally) -- same
convention Fusion's own view/user/listing.html already uses. */
html, body {
-ms-overflow-style: none;
scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
}
* {
-ms-overflow-style: none !important;
scrollbar-width: none !important;
}
/* Every content page redefines .form-control-dark locally rather than
sharing one -- fixed once here instead of in each file, since a disabled
dark input/select otherwise falls back to the browser's light-gray
disabled styling (Bootstrap's #e9ecef), breaking the theme. */
.form-control-dark:disabled, select.form-control-dark:disabled {
background: #0c0f1a;
color: var(--text-muted);
opacity: 1;
border-color: var(--maroon-border);
}
/* A otherwise renders its
button half using the browser's own default light-gray "Choose File"
button (a native, unstyled OS control) regardless of every other rule
above, since it lives in its own pseudo-element -- WebKit/Blink and the
newer standard pseudo-element both need targeting for this to hold
across browsers. */
.form-control-dark[type="file"]::file-selector-button,
.form-control-dark[type="file"]::-webkit-file-upload-button {
background: var(--gold-accent);
color: #fff;
border: none;
border-radius: 6px;
padding: 6px 12px;
margin: -6px 12px -6px -12px;
cursor: pointer;
font-weight: 600;
font-size: 13px;
}
.form-control-dark[type="file"]::file-selector-button:hover,
.form-control-dark[type="file"]::-webkit-file-upload-button:hover {
background: var(--gold-hover);
}
.scrollcontainer {
overflow-y: auto;
min-height: 10vh;
max-height: 50vh;
}
.bg-app {
background-color: #0c0d0e !important;
border-bottom: 1px solid var(--maroon-border);
}
/* Card & UI Overrides */
.card {
background-color: var(--maroon-card);
border: 1px solid var(--maroon-border);
color: var(--text-light);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
border-radius: 12px;
}
.card-header, .card-footer {
background-color: rgba(0, 0, 0, 0.3);
border-color: var(--maroon-border);
}
.form-control {
color-scheme: dark;
background-color: #0c0f1a;
border: 1px solid var(--maroon-border);
color: #ffffff;
caret-color: #ffffff;
}
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px #0c0f1a inset !important;
box-shadow: 0 0 0 1000px #0c0f1a inset !important;
-webkit-text-fill-color: #ffffff !important;
caret-color: #ffffff;
transition: background-color 600000s 0s, color 600000s 0s;
}
.form-control:autofill {
box-shadow: 0 0 0 1000px #0c0f1a inset !important;
-webkit-text-fill-color: #ffffff !important;
}
:root {
--swal-bg: #12172a;
--swal-input: #0c0f1a;
--swal-border: #2A3A63;
--swal-accent: #E8B04B;
--swal-confirm: #8A5D1A;
--swal-text: #F3E8E0;
--swal-muted: #E3CBB6;
}
html .cbbp-overlay {
--cbbp-bg: #12172a;
--cbbp-text: #F3E8E0;
--cbbp-muted: #E3CBB6;
--cbbp-border: #2A3A63;
--cbbp-accent: #8A5D1A;
--cbbp-accent-hover: #A9792A;
--cbbp-row: #0c0f1a;
--cbbp-row-hover: rgba(232, 176, 75, 0.12);
}
.form-control:focus {
background-color: #1a2140;
border-color: var(--gold-accent);
color: #ffffff;
box-shadow: 0 0 0 0.2rem rgba(156, 107, 31, 0.35);
}
.form-control::placeholder {
color: var(--text-muted);
opacity: 0.6;
}
/* Gold Buttons */
.btn-gold {
background-color: var(--gold-accent);
border-color: var(--gold-accent);
color: #ffffff;
font-weight: 500;
}
.btn-gold:hover, .btn-gold:focus {
background-color: var(--gold-hover);
border-color: var(--gold-hover);
color: #ffffff;
}
.btn-outline-gold {
border-color: var(--maroon-border);
color: var(--text-light);
background-color: rgba(0, 0, 0, 0.3);
}
.btn-outline-gold:hover {
background-color: var(--gold-accent);
border-color: var(--gold-accent);
color: #ffffff;
}
a {
color: #E0AC4D;
}
a:hover {
color: #F0C878;
text-decoration: underline;
}
.border-dark-maroon {
border-color: var(--maroon-border) !important;
}
/* Password Toggle */
.input-group-text {
background-color: #0c0f1a;
border: 1px solid var(--maroon-border);
color: var(--text-muted);
cursor: pointer;
}
.input-group-text:hover {
color: var(--text-light);
}
/* Single shared content container -- every Balaaji view should use this
instead of defining its own .wrap, so page widths stay consistent
("all views should fall in a single container"). Now that the nav is a
left sidebar (permanent on desktop, off-canvas on mobile) rather than a
full-width topbar, the content area already sits framed beside/under it
-- the old 80%-centered desktop treatment (meant for a full-width
marketing-style topbar) just wasted space here, so this is 100% width on
both desktop and mobile. No baked-in vertical padding: add py-3/py-4
etc. in markup per page as needed. */
.wrap {
width: 100%;
margin: 0;
padding: 0 20px;
}
@media (max-width: 768px) {
.wrap {
padding: 0 16px;
}
}
/* Bootstrap dropdown-menu ships light by default -- theme it to match, same
as every other surface in this file. */
.dropdown-menu {
background-color: var(--maroon-card);
border: 1px solid var(--maroon-border);
}
.dropdown-item {
color: var(--text-light);
}
.dropdown-item:hover, .dropdown-item:focus {
background-color: rgba(156, 107, 31, 0.15);
color: var(--text-light);
}
/* Canonical "no records" empty state -- was triplicated identically in
index.html/services.html/group_clients.html and diverged into a
differently-structured .no-data-card in groups.html and a plain
alert-info box in transactions.html. One template now: an icon, then a
line of text, in a dashed-border card. Usage: