/* Sareeel Energies brand overrides for the Dashtrap Bootstrap admin template. */ :root { --se-flame-red: #C40000; --se-energy-orange: #FF9800; --se-golden-amber: #FFC107; --se-pure-white: #FFFFFF; --se-navy: #1B1F27; /* Theme foundation tokens (light) */ --se-red: #C40000; --se-orange: #FF9800; --se-amber: #FFC107; --se-white: #FFFFFF; --se-bg: #ededed; --se-card: #FFFFFF; --se-dark: #111827; --se-muted: #6B7280; --se-border: #E5E7EB; --bs-primary: var(--se-flame-red); --bs-primary-rgb: 196, 0, 0; --bs-primary-text-emphasis: #7a0000; --bs-primary-bg-subtle: #fbe3e0; --bs-primary-border-subtle: #f0b3ab; } /* * Dark theme foundation. * The template's built-in toggle (#theme-mode, wired in assets/js/app.js) flips * [data-bs-theme] on and persists the choice — that's the switcher this * project already has, so the tokens below key off it. [data-theme="dark"] is * mirrored for forward compatibility with the attribute name suggested in specs. */ [data-bs-theme="dark"], [data-theme="dark"] { --se-bg: #111827; --se-card: #1F2937; --se-dark: #F9FAFB; --se-muted: #D1D5DB; --se-border: #374151; } /* App-wide background: dashboard body and auth pages both use the same token */ body { background-color: var(--se-bg); } /* * Sidebar: white/light by default (matches the login page branding), dark * navy preserved as-is for the dark theme (see #theme-mode toggle). Note * the vendor template reuses --bs-menu-item-active-bg for BOTH the hover * state and the truly-active item (style.css lines ~14655 and ~14722), so * that one token controls hover here; the active item's stronger red gets * its own override below since it must look different from hover. */ [data-menu-color=brand] { --bs-menu-bg: var(--se-white); --bs-menu-item-color: #4b5563; --bs-menu-item-hover-color: var(--se-flame-red); --bs-menu-item-active-color: var(--se-pure-white); --bs-menu-item-active-bg: #fff3f3; } [data-bs-theme=dark][data-menu-color=brand] { --bs-menu-bg: var(--se-navy); --bs-menu-item-color: #c7cbd4; --bs-menu-item-hover-color: var(--se-energy-orange); --bs-menu-item-active-color: var(--se-pure-white); --bs-menu-item-active-bg: rgba(196, 0, 0, 0.55); } /* Active sidebar item: solid red + white text, distinct from the light hover tint above. */ html[data-menu-color=brand]:not([data-bs-theme=dark]) .app-menu .menu-item.active > .menu-link { background-color: var(--se-flame-red); color: var(--se-pure-white); } html[data-menu-color=brand]:not([data-bs-theme=dark]) .app-menu .menu-item.active > .menu-link:hover, html[data-menu-color=brand]:not([data-bs-theme=dark]) .app-menu .menu-item.active > .menu-link:focus { background-color: #9a0000; color: var(--se-pure-white); } [data-topbar-color=light] { --bs-topbar-item-hover-color: var(--se-flame-red); } /* ---- Auth pages (login / register) ---- * These stay a fixed light theme on purpose: the dashboard's dark-mode toggle * (see #theme-mode in app/layout_header.php) flips [data-bs-theme] on * app-wide, including on first visit for a browser/OS with a dark preference. * The auth page must not follow that, so every rule below uses literal colors * instead of the --se-* tokens (which do react to [data-bs-theme="dark"]). */ body.auth-bg { background-color: #ededed; } /* * auth-wrapper's margin-top is intentionally small/negative: it's what's left * of the space above the logo after enlarging .auth-logo-img. It's tuned so * the card below keeps the exact same on-screen position through each logo * resize — logo width growth and wrapper margin shrink offset each other by * the same number of px, since the logo box is a 1:1 square (height:auto on * a square source image), not just wider. */ .auth-wrapper { margin-top: -18px; } .auth-logo-img { width: 200px; height: auto; max-width: 100%; } @media (max-width: 575.98px) { .auth-wrapper { margin-top: -15px; } .auth-logo-img { width: 155px; } } .auth-card { /* Pulls the card up slightly, independent of the logo/wrapper spacing above. */ margin-top: -20px; background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 10px 30px rgba(17, 24, 39, 0.08); color: #111827; } .auth-below-text { color: #6b7280; } .auth-link { color: #c40000; font-weight: 500; } .auth-link:hover, .auth-link:focus { color: #ff9800; } /* Auth inputs: scoped so the dashboard's dark-reactive .form-control is untouched */ .auth-card .form-control, .auth-card .form-select { background-color: #ffffff; color: #111827; border-color: #e5e7eb; } .auth-card .form-control::placeholder { color: #6b7280; } .auth-card .form-control:focus, .auth-card .form-select:focus { background-color: #ffffff; color: #111827; border-color: #c40000; box-shadow: 0 0 0 0.2rem rgba(196, 0, 0, 0.15); } /* ---- Inputs app-wide (dashboard + auth): brand focus state instead of Bootstrap blue ---- */ .form-control, .form-select { border-color: var(--se-border); } .form-control:focus, .form-select:focus { border-color: var(--se-red); box-shadow: 0 0 0 0.2rem rgba(196, 0, 0, 0.15); } /* ---- Primary buttons ---- */ .btn-primary { --bs-btn-color: var(--se-white); --bs-btn-bg: var(--se-red); --bs-btn-border-color: var(--se-red); --bs-btn-hover-color: var(--se-white); --bs-btn-hover-bg: #9a0000; --bs-btn-hover-border-color: #9a0000; --bs-btn-focus-shadow-rgb: 196, 0, 0; --bs-btn-active-color: var(--se-white); --bs-btn-active-bg: #7a0000; --bs-btn-active-border-color: #7a0000; --bs-btn-disabled-color: var(--se-white); --bs-btn-disabled-bg: var(--se-red); --bs-btn-disabled-border-color: var(--se-red); } .btn-primary:hover, .btn-primary:focus-visible { background: linear-gradient(135deg, var(--se-red) 0%, var(--se-orange) 100%); border-color: var(--se-red); } /* Text-based brand mark (logo) */ .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, var(--se-flame-red), var(--se-energy-orange)); color: var(--se-pure-white); font-weight: 700; font-size: 14px; letter-spacing: 0.5px; flex-shrink: 0; } .brand-mark-lg { width: 56px; height: 56px; font-size: 20px; border-radius: 12px; } .main-menu .logo-box .brand-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } /* * Sidebar brand logo. The real logo already includes the "Sareeel Energies" * wordmark, so no separate text label is shown next to it (avoids duplicate/ * crowded text). .logo-lg / .logo-sm are the vendor template's existing * expanded/collapsed-sidebar slots (see style.css ~14758-14762): the full * logo shows expanded, the favicon shows collapsed. If either image fails to * load, its onerror handler (in app/layout_header.php) hides both real * images and reveals the "SE" mark as a single fallback badge — it carries * no logo-lg/logo-sm class, so once shown it stays visible in both sidebar * states rather than getting caught by the vendor's expand/collapse toggle. */ .brand-logo-img { width: 170px; height: auto; max-width: 100%; } /* Collapsed sidebar rail is 80px wide; kept at the low end of the suggested 48-58px range so the (tall, narrow) favicon's auto-height stays under the 70px logo-box height instead of overflowing it. */ .brand-favicon-img { width: 48px; height: auto; max-width: 100%; } .topbar-brand-text { color: #37414f; font-weight: 500; font-size: 14px; } .user-avatar-circle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--se-flame-red); color: var(--se-pure-white); font-weight: 600; font-size: 13px; } /* * Soft card shadow for the light dashboard only (scoped to .page-content so * it can't touch .auth-card's own shadow on the login/register pages); dark * theme's existing look is untouched. */ html:not([data-bs-theme=dark]) .page-content .card { box-shadow: 0 2px 10px rgba(17, 24, 39, 0.06); } /* Stat cards on the dashboard */ .se-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 10px; font-size: 22px; color: var(--se-pure-white); background: linear-gradient(135deg, var(--se-flame-red), var(--se-energy-orange)); } .badge.bg-amber { background-color: var(--se-golden-amber) !important; color: #4a3800; } /* ---- Pagination: brand red instead of Bootstrap blue ---- */ .pagination { --bs-pagination-hover-color: var(--se-red); --bs-pagination-focus-color: var(--se-red); --bs-pagination-focus-box-shadow: 0 0 0 0.15rem rgba(196, 0, 0, 0.25); --bs-pagination-active-color: var(--se-white); --bs-pagination-active-bg: var(--se-red); --bs-pagination-active-border-color: var(--se-red); } .page-link { color: var(--se-red); }