@charset "UTF-8";
/* =====================================================================
PrivateHome admin — dark mode override layer
---------------------------------------------------------------------
Almost everything here is scoped under `body.theme-dark`, so light mode is
unaffected and the file can be linked on every page unconditionally. The one
exception is the short "base" section directly below, which fixes contrast
bugs that exist in the shipped light theme and are therefore not dark-mode
work; each of those rules is commented with what it measured.
The file is direction-neutral: it is the only dark stylesheet an RTL page
gets (see layouts/include.blade.php for why), so anything directional in
here is written for both, and the LTR-only geometry block is gated on
`html:not([dir="rtl"])`.
It is a COMPANION to assets/css/main/app-dark.css, not a replacement.
app-dark.css ships with the Mazer theme and already covers Bootstrap
and Mazer's own components (cards, navbar, sidebar, tables, forms,
dropdowns, modals, list groups, pagination). It was never loaded.
What it does NOT cover, and what this file exists for:
1. assets/css/pages/otherpages.css — the ~254 hardcoded colours in
this project's own CSS, which Mazer knows nothing about.
2. Third-party widgets bolted on afterwards: Select2, bootstrap-table,
SweetAlert2, Toastify, FilePond, Chosen, Magnific Popup, Tagify,
jQuery UI, jVectorMap, Parsley.
3. Inline style="" attributes in the Blade views, which no external
stylesheet can beat without !important.
4. The dashboard's own scoped token block.
Deliberately NOT inverted, because inverting them would be a bug: the
watermark preview (it shows a mark against a real image backdrop) and the
transactional mail layout (it renders in the recipient's client, on white).
Both already force their own colours inline, so they need nothing here —
a `.keep-light` escape hatch is provided at the end for anything added
later that must render on white regardless of mode.
===================================================================== */
/* ====================================== base (both themes) =========== */
/* The one rule here that is not dark-scoped. topbar.blade.php used to carry
style="background-color: white" inline; Bootstrap's own .navbar sets no
background at all, so removing the inline attribute left the topbar
transparent in BOTH modes. This restores the light default as a class,
which the dark block below can then override normally. */
header .main-navbar { background-color: #fff; }
/* Pre-existing LIGHT-mode contrast bug, found while checking both modes.
app.css sets `--bs-dark: #f2f7ff` — a near-white — and Bootstrap's
.text-dark is `color: var(--bs-dark-rgb)`. So every `badge bg-light
text-dark` and `badge bg-info text-dark` in the views (16 of them) was
rendering near-white text on a near-white chip: invisible in the theme
that shipped. Pinned to a real ink colour; the dark block below overrides
it with a higher-specificity rule. */
.text-dark { color: #1b2a32 !important; }
/* Also both modes: white text on Bootstrap's amber (#ffc107) measures 1.63:1,
which is unreadable at any size — every "Pending" / "Reserved" chip and
every warning button in the admin. Amber is a light colour; it takes dark
text. Bootstrap's own docs use dark ink on warning for this reason. */
.badge.bg-warning,
.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active { color: #3d2f00 !important; }
/* Solid alerts in light mode put white on a mid-tone fill: success measured
2.98:1, danger 3.11:1, info 2.23:1. The fills are darkened just enough for
white to clear 4.5:1 — the solid-alert design is unchanged, it is the same
hue a few steps down. */
.alert-success { background-color: #1c7a3e !important; border-color: #1c7a3e !important; }
.alert-danger { background-color: #b32d38 !important; border-color: #b32d38 !important; }
.alert-info { background-color: #10627f !important; border-color: #10627f !important; }
.alert-primary { background-color: #0a5f5f !important; border-color: #0a5f5f !important; }
.alert-success, .alert-danger, .alert-info, .alert-primary { color: #fff !important; }
/* Warning keeps its amber fill and takes dark ink instead — same treatment as
the warning badge above, so the two read as the same semantic colour. */
.alert-warning { color: #3d2f00 !important; }
.alert-success .alert-link, .alert-danger .alert-link,
.alert-info .alert-link, .alert-primary .alert-link { color: #fff !important; text-decoration: underline; }
.alert-warning .alert-link { color: #3d2f00 !important; text-decoration: underline; }
/* .btn-outline-secondary's #6c757d measured 4.38:1 on the page ground — just
under AA. One step darker clears it without changing the button's look. */
.btn-outline-secondary { color: #5a6268; }
/* ============================== geometry parity (IMPORTANT) =========== */
/*
app.css and app-dark.css began as the same Mazer stylesheet. app.css has
been customised by this project since; app-dark.css is still the untouched
vendor file. So switching themes does not only change colour — it silently
changes LAYOUT, because the dark file still carries Mazer's original
geometry for anything the project later tuned.
Diffing the two files on layout properties only (ignoring colour, which is
the whole point of the pair) turned up the divergences below. Left alone,
dark mode would render the admin at a different size: sidebar 10px wider,
content shifted with it, and the sidebar logo at roughly a third of its
height. Every rule here pins dark back to the value light already uses, so
the toggle changes colour and nothing else.
These load after app-dark.css and match its specificity, so source order
decides and these win. If app-dark.css is ever replaced with a newer Mazer
build, re-run the diff — the list may grow.
*/
/* -- sidebar: 290px everywhere, and the logo at its real size ----------- */
:where(html:not([dir="rtl"])) body.theme-dark .sidebar-wrapper { width: 290px; }
:where(html:not([dir="rtl"])) body.theme-dark #sidebar:not(.active) .sidebar-wrapper { left: -290px; }
:where(html:not([dir="rtl"])) body.theme-dark #main { margin-left: 290px; }
/* Both stylesheets already collapse the sidebar below 1200px. The parity rule
above is unconditional and loads after them, so without this it re-applied
the 290px offset at every width and the sidebar stayed open on tablet and
phone in dark mode only. */
@media screen and (max-width: 1199px) {
:where(html:not([dir="rtl"])) body.theme-dark #main { margin-left: 0; }
}
:where(html:not([dir="rtl"])) body.theme-dark .sidebar-wrapper .sidebar-header img { height: 3.2rem; }
:where(html:not([dir="rtl"])) body.theme-dark .sidebar-wrapper .menu { margin-top: 1rem; padding: 0 1.5rem; }
:where(html:not([dir="rtl"])) body.theme-dark .sidebar-wrapper .menu .sidebar-link {
display: flex; align-items: center; position: relative;
padding: .7rem .875rem; font-size: .95rem; border-radius: .5rem;
}
:where(html:not([dir="rtl"])) body.theme-dark .sidebar-wrapper .menu .sidebar-link span { flex: 1; white-space: normal; }
:where(html:not([dir="rtl"])) body.theme-dark .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link { border-radius: .5rem; }
:where(html:not([dir="rtl"])) body.theme-dark .sidebar-wrapper .menu .submenu .submenu-item a {
display: flex; align-items: center; justify-content: space-between;
}
/* The submenu chevron is drawn two entirely different ways: light masks an
SVG (content:""), dark sets content:url(svg) at a different offset. Only
overriding the position would leave the dark glyph in place, so the light
implementation is restated in full. */
:where(html:not([dir="rtl"])) body.theme-dark .sidebar-wrapper .menu .sidebar-item.has-sub .sidebar-link:after {
content: "";
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
mask: url('data:image/svg+xml;utf8,') no-repeat center;
background-color: #8ba0ac;
display: inline-block;
position: absolute;
right: .75rem;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
transition: background-color .3s ease, transform .3s ease;
}
/* -- page chrome ------------------------------------------------------- */
:where(html:not([dir="rtl"])) body.theme-dark .navbar { height: 80px; padding: 1.22rem 1.5rem; }
:where(html:not([dir="rtl"])) body.theme-dark #main #main-content { padding: 1rem 2rem; }
/* Light narrows this to 1rem below 768px; the unconditional parity rule above
would otherwise hold 2rem side padding on phones in dark mode only. */
@media (max-width: 767px) {
:where(html:not([dir="rtl"])) body.theme-dark #main #main-content { padding: 1rem 1rem; }
}
:where(html:not([dir="rtl"])) body.theme-dark .page-heading { margin: 2rem 0 2rem 0; }
/* Light collapses the card header's bottom padding to 0; the vendor dark file
leaves Mazer's 24px, which makes every card 24px taller in dark and pushes
the whole page down with it. */
:where(html:not([dir="rtl"])) body.theme-dark .card .card-header { border: none; padding-bottom: 0; }
:where(html:not([dir="rtl"])) body.theme-dark .divider { margin: 0rem 0; }
:where(html:not([dir="rtl"])) body.theme-dark .form-control ~ .form-control-icon { top: 25%; }
/* -- typography -------------------------------------------------------- */
:where(html:not([dir="rtl"])) body.theme-dark h1, :where(html:not([dir="rtl"])) body.theme-dark h2, :where(html:not([dir="rtl"])) body.theme-dark h3,
:where(html:not([dir="rtl"])) body.theme-dark h4, :where(html:not([dir="rtl"])) body.theme-dark h5, :where(html:not([dir="rtl"])) body.theme-dark h6,
:where(html:not([dir="rtl"])) body.theme-dark .h1, :where(html:not([dir="rtl"])) body.theme-dark .h2, :where(html:not([dir="rtl"])) body.theme-dark .h3,
:where(html:not([dir="rtl"])) body.theme-dark .h4, :where(html:not([dir="rtl"])) body.theme-dark .h5, :where(html:not([dir="rtl"])) body.theme-dark .h6 { margin-top: .5rem; }
:where(html:not([dir="rtl"])) body.theme-dark dl, :where(html:not([dir="rtl"])) body.theme-dark ol, :where(html:not([dir="rtl"])) body.theme-dark ul { margin-bottom: 5rem; }
/* -- accordion: the project restyled it, the vendor dark file did not --- */
:where(html:not([dir="rtl"])) body.theme-dark .accordion { width: 90%; max-width: 1000px; margin: .1rem auto; }
:where(html:not([dir="rtl"])) body.theme-dark .accordion-item { margin: 1rem 0; border-radius: .5rem; }
/* ============================================================ tokens === */
body.theme-dark {
/* Surfaces, lightest-to-darkest reading order: the page sits behind
cards, cards sit behind their own raised controls. */
--ph-bg: #10181d;
--ph-surface: #18222a;
--ph-surface-2: #1f2b34;
--ph-surface-3: #26343e;
/* Text. --ph-ink on --ph-surface is ~13:1; --ph-muted is ~4.8:1, which
clears AA for body text rather than merely for large text. */
--ph-ink: #e7eef2;
--ph-ink-2: #b9c8d1;
--ph-muted: #8ba0ac;
--ph-line: #2c3a44;
--ph-line-soft: #232f38;
/* The brand teal (#087C7C) is too dark to sit ON a dark surface as text
or as a border. Filled buttons keep it; anything where the teal is the
foreground uses the lightened pair. */
--ph-accent: #2fb3a8;
--ph-accent-ink: #5ed3c7;
--ph-accent-soft: #16323a;
--ph-danger: #f2707a;
--ph-warning: #e3a44b;
--ph-success: #4cc38a;
--ph-info: #57bde0;
--ph-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
/* Applied to by the pre-paint script so the very first frame is
already dark — otherwise every navigation flashes white before the
stylesheet's body rule takes effect. */
html.theme-dark { background-color: #10181d; color-scheme: dark; }
/* Native UI — scrollbars, form control internals, the spot behind a
rubber-band overscroll — follows color-scheme, not our CSS. */
body.theme-dark { color-scheme: dark; }
/* ====================================================== page chrome === */
body.theme-dark,
body.theme-dark #main,
body.theme-dark #main-content,
body.theme-dark #app {
background-color: var(--ph-bg);
color: var(--ph-ink);
}
body.theme-dark .page-heading,
body.theme-dark .page-content { background-color: transparent; }
body.theme-dark .footer,
body.theme-dark .footer p,
body.theme-dark .footer a {
background-color: var(--ph-bg);
color: var(--ph-muted);
}
body.theme-dark .footer a:hover { color: var(--ph-accent-ink); }
/* Scrollbars. WebKit needs the explicit rule; Firefox reads the standard
property; both are driven off the same two tokens. */
body.theme-dark * { scrollbar-color: #3a4a55 var(--ph-bg); }
body.theme-dark ::-webkit-scrollbar { width: 10px; height: 10px; }
body.theme-dark ::-webkit-scrollbar-track { background: var(--ph-bg); }
body.theme-dark ::-webkit-scrollbar-thumb {
background: #3a4a55; border-radius: 8px; border: 2px solid var(--ph-bg);
}
body.theme-dark ::-webkit-scrollbar-thumb:hover { background: #4a5c69; }
body.theme-dark ::selection { background: var(--ph-accent); color: #04120f; }
/* Mazer's dark focus ring is nearly invisible against these surfaces. */
body.theme-dark :focus-visible {
outline: 2px solid var(--ph-accent-ink);
outline-offset: 2px;
}
/* =========================================================== topbar === */
/* topbar.blade.php carried style="background-color: white" inline. The
markup now uses this class instead, so neither mode needs !important. */
body.theme-dark .navbar,
body.theme-dark header .navbar,
body.theme-dark .main-navbar {
background-color: var(--ph-surface) !important;
/* inset shadow, not border-bottom: a border would make the topbar 1px
taller in dark than in light and the whole page would nudge on toggle. */
box-shadow: inset 0 -1px 0 var(--ph-line);
}
/* app.css has `flex-grow: 1` commented out on .navbar-collapse; the vendor
app-dark.css still has it live. Left as-is the topbar contents pack to the
left in dark and to the right in light — the same markup laid out two
different ways depending on theme. Dark follows light. */
body.theme-dark .navbar-collapse { flex-grow: 0; }
body.theme-dark .navbar .burger-btn i,
body.theme-dark .navbar .nav-link,
body.theme-dark .navbar .user-dropdown,
body.theme-dark .navbar .user-dropdown-name { color: var(--ph-ink); }
body.theme-dark .navbar .user-dropdown-status,
body.theme-dark .navbar .text-muted { color: var(--ph-muted) !important; }
body.theme-dark .navbar-toggler-icon { filter: invert(1) brightness(1.6); }
body.theme-dark .global-search .form-control,
body.theme-dark #globalSearchInput,
body.theme-dark #globalSearchInputMobile {
background-color: var(--ph-surface-2);
border-color: var(--ph-line);
color: var(--ph-ink);
}
body.theme-dark #globalSearchResults,
body.theme-dark #globalSearchResultsMobile {
background-color: var(--ph-surface);
border: 1px solid var(--ph-line);
}
body.theme-dark #globalSearchResults .list-group-item,
body.theme-dark #globalSearchResultsMobile .list-group-item {
background-color: var(--ph-surface);
border-color: var(--ph-line-soft);
color: var(--ph-ink-2);
}
body.theme-dark #globalSearchResults .list-group-item:hover,
body.theme-dark #globalSearchResultsMobile .list-group-item:hover {
background-color: var(--ph-surface-3); color: var(--ph-ink);
}
/* ========================================================== sidebar === */
/* Mazer dark covers the sidebar shell; these are the project's additions
(sidebar-responsive.css and the submenu states). */
body.theme-dark #sidebar,
body.theme-dark .sidebar-wrapper {
background-color: var(--ph-surface);
/* inset, not border-right: a border eats a pixel of the 290px and the menu
inside reflows 1px narrower than it does in light. */
box-shadow: inset -1px 0 0 var(--ph-line);
}
/* The sidebar is on the other edge in RTL, so the hairline is too. */
html[dir="rtl"] body.theme-dark #sidebar,
html[dir="rtl"] body.theme-dark .sidebar-wrapper { box-shadow: inset 1px 0 0 var(--ph-line); }
body.theme-dark .sidebar-item .sidebar-link { color: var(--ph-ink-2); }
body.theme-dark .sidebar-item .sidebar-link:hover {
background-color: var(--ph-surface-3); color: var(--ph-ink);
}
body.theme-dark .sidebar-item.active > .sidebar-link {
background-color: var(--ph-accent-soft); color: var(--ph-accent-ink);
}
body.theme-dark .sidebar-title { color: var(--ph-muted); }
body.theme-dark .submenu { background-color: var(--ph-surface-2); }
body.theme-dark .submenu-item a { color: var(--ph-ink-2); }
body.theme-dark .submenu-item a:hover,
body.theme-dark .submenu-item.active a { color: var(--ph-accent-ink); }
body.theme-dark .sidebar-overlay { background-color: rgba(0, 0, 0, .65); }
/* sidebar-responsive.css hardcodes these two greys. */
body.theme-dark .sidebar-toggler i,
body.theme-dark .sidebar-close i { color: var(--ph-ink-2); }
/* ============================================== cards, panels, heads === */
body.theme-dark .card,
body.theme-dark .das-card,
body.theme-dark .article_card,
body.theme-dark .viewed,
body.theme-dark .bbb_viewed_item,
body.theme-dark .profile-main,
body.theme-dark .profile-main .profile-info,
body.theme-dark .reorder-field-card {
background-color: var(--ph-surface) !important;
border-color: var(--ph-line) !important;
color: var(--ph-ink);
box-shadow: var(--ph-shadow);
}
body.theme-dark .card-header,
body.theme-dark .card-footer {
background-color: transparent;
border-color: var(--ph-line-soft);
color: var(--ph-ink);
}
/* The heading inside carries its own colour (#4D5454 from otherpages.css), so
colouring the header alone leaves it dark-on-dark. */
body.theme-dark .card-title,
body.theme-dark .card-header h1, body.theme-dark .card-header h2,
body.theme-dark .card-header h3, body.theme-dark .card-header h4,
body.theme-dark .card-header h5, body.theme-dark .card-header h6 { color: var(--ph-ink); }
body.theme-dark .card-subtitle { color: var(--ph-ink-2); }
body.theme-dark .profile-main .profile-picture { border-color: var(--ph-surface-2); }
/* otherpages.css headings and labels — all of the #4D5454 / #212121 text. */
body.theme-dark .dashboard_title,
body.theme-dark .total_number,
body.theme-dark .card_title,
body.theme-dark .chart_heading,
body.theme-dark .recent_list_heading,
body.theme-dark .property_title,
body.theme-dark .article_title,
body.theme-dark .article_card .article_title,
body.theme-dark .add_article_header,
body.theme-dark .featured-property-type,
body.theme-dark .most_view .card-header h4,
body.theme-dark .map_title .most_view .card-header h4,
body.theme-dark .lable_rent .no_of_total_sell,
body.theme-dark .tab-li a { color: var(--ph-ink); }
body.theme-dark .lable_rent .total_sell,
body.theme-dark .article_card.article_date_posted,
body.theme-dark .featured_property .category,
body.theme-dark .featured_property .city { color: var(--ph-ink-2); }
body.theme-dark .featured_property .title { color: var(--ph-ink); }
/* =========================================================== tables === */
body.theme-dark .table,
body.theme-dark .table > :not(caption) > * > * {
color: var(--ph-ink);
background-color: transparent;
border-color: var(--ph-line-soft);
}
body.theme-dark .table thead th {
color: var(--ph-muted);
background-color: var(--ph-surface-2);
border-color: var(--ph-line);
}
body.theme-dark .table-hover > tbody > tr:hover > * {
background-color: var(--ph-surface-2);
color: var(--ph-ink);
}
body.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > * {
background-color: rgba(255, 255, 255, .025);
color: var(--ph-ink);
}
/* bootstrap-table's own chrome: toolbar, pagination, fixed columns, the
card view it switches to on narrow screens. */
body.theme-dark .bootstrap-table .fixed-table-container,
body.theme-dark .bootstrap-table .fixed-table-header,
body.theme-dark .bootstrap-table .fixed-table-body {
background-color: var(--ph-surface);
border-color: var(--ph-line);
}
body.theme-dark .fixed-table-container { border-color: var(--ph-line); }
body.theme-dark .bootstrap-table .fixed-table-pagination,
body.theme-dark .bootstrap-table .fixed-table-toolbar {
color: var(--ph-ink-2);
background-color: transparent;
}
body.theme-dark .fixed-table-pagination .pagination-detail,
body.theme-dark .fixed-table-pagination .page-list { color: var(--ph-muted); }
body.theme-dark .fixed-table-body .card-view .title { color: var(--ph-muted); }
body.theme-dark .bootstrap-table .fixed-table-container .table-hover > tbody > tr:hover > td {
background-color: var(--ph-surface-2);
}
body.theme-dark .fixed-table-loading {
background-color: var(--ph-surface); color: var(--ph-ink-2);
}
/* The frozen column sits above the scrolling body; if it stays transparent
the rows underneath show through as it scrolls. */
body.theme-dark .fixed-table-container .fixed-columns,
body.theme-dark .fixed-table-container .fixed-columns-right {
background-color: var(--ph-surface);
}
body.theme-dark .fixed-table-container .fixed-columns th,
body.theme-dark .fixed-table-container .fixed-columns-right th { background-color: var(--ph-surface-2); }
body.theme-dark .fixed-table-container .fixed-columns td,
body.theme-dark .fixed-table-container .fixed-columns-right td { background-color: var(--ph-surface); }
body.theme-dark .page-link {
background-color: var(--ph-surface-2);
border-color: var(--ph-line);
color: var(--ph-ink-2);
}
body.theme-dark .page-link:hover { background-color: var(--ph-surface-3); color: var(--ph-ink); }
body.theme-dark .page-item.active .page-link {
background-color: var(--ph-accent); border-color: var(--ph-accent); color: #04120f;
}
body.theme-dark .page-item.disabled .page-link { color: var(--ph-muted); opacity: .55; }
/* ============================================== forms and inputs ====== */
body.theme-dark .form-control,
body.theme-dark .form-select,
body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus,
body.theme-dark textarea.form-control,
body.theme-dark .input-group-text {
background-color: var(--ph-surface-2);
border-color: var(--ph-line);
color: var(--ph-ink);
}
body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus {
border-color: var(--ph-accent);
box-shadow: 0 0 0 .2rem rgba(47, 179, 168, .22);
}
body.theme-dark .form-control::placeholder { color: var(--ph-muted); opacity: 1; }
body.theme-dark .form-control:disabled,
body.theme-dark .form-control[readonly],
body.theme-dark .form-select:disabled {
background-color: var(--ph-surface); color: var(--ph-muted);
}
body.theme-dark .form-label,
body.theme-dark .col-form-label,
body.theme-dark label { color: var(--ph-ink-2); }
body.theme-dark .form-text, body.theme-dark .form-check-label { color: var(--ph-muted); }
/* The select caret is a baked-in dark SVG data-URI; recolour it or it
disappears against the field. */
body.theme-dark .form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238ba0ac' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
body.theme-dark .form-check-input {
background-color: var(--ph-surface-3);
border-color: var(--ph-line);
}
body.theme-dark .form-check-input:checked {
background-color: var(--ph-accent); border-color: var(--ph-accent);
}
body.theme-dark .form-switch .form-check-input {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238ba0ac'/%3e%3c/svg%3e");
}
body.theme-dark .form-switch .form-check-input:checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23041210'/%3e%3c/svg%3e");
}
/* Date/time/colour pickers draw their own indicator from the UA. */
body.theme-dark input[type="date"]::-webkit-calendar-picker-indicator,
body.theme-dark input[type="time"]::-webkit-calendar-picker-indicator,
body.theme-dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
body.theme-dark input[type="month"]::-webkit-calendar-picker-indicator,
body.theme-dark input[type="week"]::-webkit-calendar-picker-indicator { filter: invert(.85); }
/* Chrome paints autofilled fields a fixed pale yellow, ignoring
background-color. An inset shadow is the only way to repaint it. */
body.theme-dark input:-webkit-autofill,
body.theme-dark input:-webkit-autofill:hover,
body.theme-dark input:-webkit-autofill:focus,
body.theme-dark textarea:-webkit-autofill,
body.theme-dark select:-webkit-autofill {
-webkit-text-fill-color: var(--ph-ink);
-webkit-box-shadow: 0 0 0 1000px var(--ph-surface-2) inset;
caret-color: var(--ph-ink);
transition: background-color 9999s ease-out 0s;
}
/* Parsley / jQuery Validate messages. */
body.theme-dark .parsley-errors-list li,
body.theme-dark label.error,
body.theme-dark .invalid-feedback,
body.theme-dark .text-danger { color: var(--ph-danger) !important; }
body.theme-dark .is-invalid, body.theme-dark .parsley-error { border-color: var(--ph-danger) !important; }
/* ========================================================== buttons === */
/* Filled buttons keep their brand colour — they are readable as-is on
dark. Outline and light variants are the ones that break: an outline
button styles its text the fill colour, which on dark disappears. */
body.theme-dark .btn-outline-secondary {
color: var(--ph-ink-2); border-color: var(--ph-line);
}
body.theme-dark .btn-outline-secondary:hover {
background-color: var(--ph-surface-3); color: var(--ph-ink); border-color: var(--ph-line);
}
body.theme-dark .btn-outline-primary { color: var(--ph-accent-ink); border-color: var(--ph-accent); }
body.theme-dark .btn-outline-primary:hover { background-color: var(--ph-accent); color: #04120f; }
body.theme-dark .btn-outline-dark { color: var(--ph-ink-2); border-color: var(--ph-line); }
body.theme-dark .btn-outline-dark:hover { background-color: var(--ph-surface-3); color: var(--ph-ink); }
body.theme-dark .btn-light,
body.theme-dark .btn-white {
background-color: var(--ph-surface-3);
border-color: var(--ph-line);
color: var(--ph-ink);
}
body.theme-dark .btn-light:hover, body.theme-dark .btn-white:hover { background-color: #2f3f4a; color: var(--ph-ink); }
body.theme-dark .btn-close { filter: invert(1) grayscale(100%) brightness(1.7); }
body.theme-dark .btn:disabled, body.theme-dark .btn.disabled { opacity: .45; }
/* ================================== dropdowns, modals, popovers ======= */
body.theme-dark .dropdown-menu {
background-color: var(--ph-surface);
border-color: var(--ph-line);
box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
body.theme-dark .dropdown-item { color: var(--ph-ink-2); }
body.theme-dark .dropdown-item:hover,
body.theme-dark .dropdown-item:focus { background-color: var(--ph-surface-3); color: var(--ph-ink); }
body.theme-dark .dropdown-item.active {
background-color: var(--ph-accent-soft); color: var(--ph-accent-ink);
}
body.theme-dark .dropdown-divider { border-color: var(--ph-line); }
body.theme-dark .dropdown-header { color: var(--ph-muted); }
body.theme-dark .modal-content,
body.theme-dark .offcanvas {
background-color: var(--ph-surface);
border-color: var(--ph-line);
color: var(--ph-ink);
}
body.theme-dark .modal-header,
body.theme-dark .modal-footer,
body.theme-dark .offcanvas-header { border-color: var(--ph-line); }
body.theme-dark .modal-title, body.theme-dark .offcanvas-title { color: var(--ph-ink); }
body.theme-dark .modal-backdrop.show { opacity: .7; }
body.theme-dark .popover,
body.theme-dark .popover-body,
body.theme-dark .popover-header {
background-color: var(--ph-surface-3);
border-color: var(--ph-line);
color: var(--ph-ink);
}
body.theme-dark .tooltip-inner { background-color: var(--ph-surface-3); color: var(--ph-ink); }
body.theme-dark .accordion-item,
body.theme-dark .accordion-button {
background-color: var(--ph-surface); border-color: var(--ph-line); color: var(--ph-ink);
}
body.theme-dark .accordion-button::after { filter: invert(.8); }
body.theme-dark .accordion-button:not(.collapsed) {
background-color: var(--ph-surface-2); color: var(--ph-accent-ink);
}
/* ==================================== alerts, badges, list groups ===== */
/* Soft-tinted alerts on a light ground become near-white blocks on dark.
Re-tint them from the semantic colour at low alpha. */
/* !important throughout, because the light-mode contrast fixes above are
themselves !important and would otherwise win on cascade order. */
body.theme-dark .alert-primary { background-color: rgba(47,179,168,.14) !important; color: var(--ph-accent-ink) !important; border-color: rgba(47,179,168,.35) !important; }
body.theme-dark .alert-secondary { background-color: rgba(139,160,172,.14) !important; color: var(--ph-ink-2) !important; border-color: rgba(139,160,172,.3) !important; }
body.theme-dark .alert-success { background-color: rgba(76,195,138,.14) !important; color: var(--ph-success) !important; border-color: rgba(76,195,138,.35) !important; }
body.theme-dark .alert-danger { background-color: rgba(242,112,122,.14) !important; color: var(--ph-danger) !important; border-color: rgba(242,112,122,.35) !important; }
body.theme-dark .alert-warning { background-color: rgba(227,164,75,.14) !important; color: var(--ph-warning) !important; border-color: rgba(227,164,75,.35) !important; }
body.theme-dark .alert-info { background-color: rgba(87,189,224,.14) !important; color: var(--ph-info) !important; border-color: rgba(87,189,224,.35) !important; }
body.theme-dark .alert-light { background-color: var(--ph-surface-2) !important; color: var(--ph-ink) !important; border-color: var(--ph-line) !important; }
body.theme-dark .alert .alert-link { color: inherit !important; text-decoration: underline; }
/* The amber chip/button ink is a light-mode fix; dark needs its own pair. */
body.theme-dark .badge.bg-warning,
body.theme-dark .btn-warning { color: #3d2f00 !important; }
body.theme-dark .badge.bg-light {
background-color: var(--ph-surface-3) !important; color: var(--ph-ink-2) !important;
}
body.theme-dark .badge.bg-white { background-color: var(--ph-surface-3) !important; color: var(--ph-ink) !important; }
body.theme-dark .list-group-item {
background-color: var(--ph-surface);
border-color: var(--ph-line);
color: var(--ph-ink-2);
}
body.theme-dark .list-group-item-action:hover { background-color: var(--ph-surface-2); color: var(--ph-ink); }
body.theme-dark .list-group-item.active {
background-color: var(--ph-accent-soft); border-color: var(--ph-accent); color: var(--ph-accent-ink);
}
body.theme-dark .nav-tabs { border-color: var(--ph-line); }
body.theme-dark .nav-tabs .nav-link { color: var(--ph-ink-2); border-color: transparent; }
body.theme-dark .nav-tabs .nav-link:hover { border-color: var(--ph-line); color: var(--ph-ink); }
body.theme-dark .nav-tabs .nav-link.active {
background-color: var(--ph-surface);
border-color: var(--ph-line) var(--ph-line) var(--ph-surface);
color: var(--ph-accent-ink);
}
body.theme-dark hr { border-color: var(--ph-line); opacity: 1; }
body.theme-dark .breadcrumb-item, body.theme-dark .breadcrumb-item a { color: var(--ph-muted); }
body.theme-dark .breadcrumb-item.active { color: var(--ph-ink-2); }
body.theme-dark .progress { background-color: var(--ph-surface-3); }
body.theme-dark code:not([class*="language-"]) { background-color: var(--ph-surface-3); color: #f19bb4; }
body.theme-dark pre { background-color: var(--ph-surface-2); color: var(--ph-ink-2); }
body.theme-dark blockquote { border-color: var(--ph-line); color: var(--ph-ink-2); }
body.theme-dark .placeholder { background-color: var(--ph-surface-3); }
body.theme-dark .spinner-border, body.theme-dark .spinner-grow { color: var(--ph-accent-ink); }
/* ====================================== Bootstrap colour utilities ==== */
/* Views use these directly in markup. bg-white on a dark page is the
single most common way a section ends up stranded in the wrong mode. */
body.theme-dark .bg-white { background-color: var(--ph-surface) !important; }
body.theme-dark .bg-light { background-color: var(--ph-surface-2) !important; }
body.theme-dark .bg-body { background-color: var(--ph-bg) !important; }
body.theme-dark .bg-dark { background-color: #0b1216 !important; }
body.theme-dark .text-dark { color: var(--ph-ink) !important; }
body.theme-dark .text-black { color: var(--ph-ink) !important; }
body.theme-dark .text-body { color: var(--ph-ink) !important; }
body.theme-dark .text-muted, body.theme-dark .text-secondary { color: var(--ph-muted) !important; }
body.theme-dark .text-white { color: #fff !important; }
body.theme-dark .border,
body.theme-dark .border-top, body.theme-dark .border-end,
body.theme-dark .border-bottom, body.theme-dark .border-start { border-color: var(--ph-line) !important; }
body.theme-dark .border-light { border-color: var(--ph-line) !important; }
body.theme-dark .shadow, body.theme-dark .shadow-sm, body.theme-dark .shadow-lg {
box-shadow: 0 6px 20px rgba(0, 0, 0, .45) !important;
}
/* Links are recoloured through Bootstrap's own token rather than with a rule
on `a`. Both stylesheets define `a { color: var(--bs-link-color) }`, so
moving the token is enough — and crucially it leaves every component that
styles its own anchors (.btn, .dropdown-item, .nav-link, .page-link,
.list-group-item, the sidebar) working exactly as it does in light mode.
An `a { color: … }` rule here instead would outrank all of them, and the
usual patch for that — an escape list setting `color: inherit` — is worse
still: it is MORE specific than the component rules, so those elements end
up inheriting their parent's colour. That is what put near-white ink on a
filled primary button (4.28:1) and light-mode grey on dropdown items. */
body.theme-dark {
--bs-link-color: #5ed3c7;
--bs-link-hover-color: #86e3d8;
}
/* ===================================== third-party: Select2 =========== */
body.theme-dark .select2-container--default .select2-selection--single,
body.theme-dark .select2-container--default .select2-selection--multiple,
body.theme-dark .select2-container--bootstrap-5 .select2-selection {
background-color: var(--ph-surface-2) !important;
border-color: var(--ph-line) !important;
color: var(--ph-ink) !important;
}
body.theme-dark .select2-container--default .select2-selection--single .select2-selection__rendered,
body.theme-dark .select2-container--bootstrap-5 .select2-selection__rendered { color: var(--ph-ink) !important; }
body.theme-dark .select2-container--default .select2-selection--single .select2-selection__placeholder,
body.theme-dark .select2-container--bootstrap-5 .select2-selection__placeholder { color: var(--ph-muted) !important; }
body.theme-dark .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--ph-muted); }
/* The dropdown is appended to , so it is in scope. */
body.theme-dark .select2-dropdown,
body.theme-dark .select2-container--bootstrap-5 .select2-dropdown {
background-color: var(--ph-surface) !important;
border-color: var(--ph-line) !important;
color: var(--ph-ink) !important;
}
body.theme-dark .select2-container--default .select2-results__option,
body.theme-dark .select2-container--bootstrap-5 .select2-results__option { color: var(--ph-ink-2); }
body.theme-dark .select2-container--default .select2-results__option--highlighted[aria-selected],
body.theme-dark .select2-container--bootstrap-5 .select2-results__option--highlighted {
background-color: var(--ph-surface-3) !important; color: var(--ph-ink) !important;
}
body.theme-dark .select2-container--default .select2-results__option[aria-selected="true"],
body.theme-dark .select2-container--bootstrap-5 .select2-results__option--selected {
background-color: var(--ph-accent-soft) !important; color: var(--ph-accent-ink) !important;
}
body.theme-dark .select2-search__field,
body.theme-dark .select2-container--default .select2-search--dropdown .select2-search__field {
background-color: var(--ph-surface-2) !important;
border-color: var(--ph-line) !important;
color: var(--ph-ink) !important;
}
body.theme-dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: var(--ph-accent-soft) !important;
border-color: var(--ph-accent) !important;
color: var(--ph-accent-ink) !important;
}
body.theme-dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--ph-accent-ink) !important; }
/* ===================================== third-party: Chosen =========== */
/* Chosen draws its arrow and tick from a sprite PNG built for light
backgrounds; brightening it is cheaper and safer than shipping a
second sprite. */
body.theme-dark .chosen-container-single .chosen-single,
body.theme-dark .chosen-container-multi .chosen-choices,
body.theme-dark .chosen-container .chosen-drop,
body.theme-dark .chosen-container .chosen-results {
background: var(--ph-surface-2) !important;
border-color: var(--ph-line) !important;
color: var(--ph-ink) !important;
box-shadow: none !important;
}
body.theme-dark .chosen-container .chosen-drop { background: var(--ph-surface) !important; }
body.theme-dark .chosen-container .chosen-results li.highlighted {
background: var(--ph-surface-3) !important; color: var(--ph-ink) !important;
}
body.theme-dark .chosen-container .chosen-results li.result-selected {
background: var(--ph-accent-soft) !important; color: var(--ph-accent-ink) !important;
}
body.theme-dark .chosen-container-single .chosen-search input[type="text"],
body.theme-dark .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
background-color: var(--ph-surface-2) !important; color: var(--ph-ink) !important;
}
body.theme-dark .chosen-container-single .chosen-single div b,
body.theme-dark .chosen-container-single .chosen-search input[type="text"] { filter: invert(.85); }
body.theme-dark .chosen-container-multi .chosen-choices li.search-choice {
background: var(--ph-accent-soft) !important;
border-color: var(--ph-accent) !important;
color: var(--ph-accent-ink) !important;
}
/* ===================================== third-party: SweetAlert2 ======= */
body.theme-dark .swal2-popup {
background: var(--ph-surface) !important;
color: var(--ph-ink) !important;
border: 1px solid var(--ph-line);
}
body.theme-dark .swal2-title, body.theme-dark .swal2-html-container { color: var(--ph-ink) !important; }
body.theme-dark .swal2-input,
body.theme-dark .swal2-textarea,
body.theme-dark .swal2-select {
background: var(--ph-surface-2) !important;
border-color: var(--ph-line) !important;
color: var(--ph-ink) !important;
}
body.theme-dark .swal2-close { color: var(--ph-muted) !important; }
body.theme-dark .swal2-container { background-color: rgba(0, 0, 0, .55); }
body.theme-dark .swal2-footer { border-color: var(--ph-line) !important; color: var(--ph-muted) !important; }
/* ===================================== third-party: Toastify ========== */
body.theme-dark .toastify {
box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
border: 1px solid var(--ph-line);
}
/* ===================================== third-party: FilePond ========== */
body.theme-dark .filepond--panel-root {
background-color: var(--ph-surface-2);
border: 1px dashed var(--ph-line);
}
body.theme-dark .filepond--drop-label,
body.theme-dark .filepond--drop-label label { color: var(--ph-ink-2); }
body.theme-dark .filepond--label-action { text-decoration-color: var(--ph-muted); color: var(--ph-accent-ink); }
body.theme-dark .filepond--item-panel { background-color: var(--ph-surface-3); }
body.theme-dark .filepond--file { color: var(--ph-ink); }
body.theme-dark .filepond--credits { display: none; }
/* ===================================== third-party: Magnific Popup ==== */
body.theme-dark .mfp-bg { background: #000; opacity: .88; }
body.theme-dark .mfp-content .white-popup,
body.theme-dark .mfp-content .mfp-iframe-scaler,
body.theme-dark .mfp-content > .card {
background: var(--ph-surface); color: var(--ph-ink);
}
body.theme-dark .mfp-title, body.theme-dark .mfp-counter { color: var(--ph-ink-2); }
/* ===================================== third-party: Tagify / jQuery UI */
body.theme-dark .tagify {
--tag-bg: var(--ph-accent-soft);
--tag-text-color: var(--ph-accent-ink);
--tags-border-color: var(--ph-line);
--tags-focus-border-color: var(--ph-accent);
--input-color: var(--ph-ink);
background-color: var(--ph-surface-2);
}
body.theme-dark .tagify__input::before { color: var(--ph-muted); }
body.theme-dark .tagify__dropdown__wrapper {
background: var(--ph-surface); border-color: var(--ph-line); color: var(--ph-ink);
}
body.theme-dark .ui-widget-content,
body.theme-dark .ui-datepicker,
body.theme-dark .ui-autocomplete {
background: var(--ph-surface) !important;
border-color: var(--ph-line) !important;
color: var(--ph-ink) !important;
}
body.theme-dark .ui-datepicker .ui-datepicker-header,
body.theme-dark .ui-widget-header {
background: var(--ph-surface-2) !important;
border-color: var(--ph-line) !important;
color: var(--ph-ink) !important;
}
body.theme-dark .ui-state-default,
body.theme-dark .ui-widget-content .ui-state-default {
background: var(--ph-surface-2) !important;
border-color: var(--ph-line) !important;
color: var(--ph-ink-2) !important;
}
body.theme-dark .ui-state-active,
body.theme-dark .ui-state-hover,
body.theme-dark .ui-widget-content .ui-state-hover {
background: var(--ph-accent) !important; color: #04120f !important;
}
body.theme-dark .ui-datepicker .ui-datepicker-prev span,
body.theme-dark .ui-datepicker .ui-datepicker-next span { filter: invert(.85); }
/* ===================================== charts and maps ================ */
/* ApexCharts and Chart.js paint their own text; these are the parts that
are real DOM and therefore reachable. */
body.theme-dark .apexcharts-text,
body.theme-dark .apexcharts-legend-text,
body.theme-dark .apexcharts-xaxis-label,
body.theme-dark .apexcharts-yaxis-label { fill: var(--ph-ink-2) !important; color: var(--ph-ink-2) !important; }
body.theme-dark .apexcharts-gridline { stroke: var(--ph-line-soft); }
body.theme-dark .apexcharts-tooltip {
background: var(--ph-surface-3) !important;
border-color: var(--ph-line) !important;
color: var(--ph-ink) !important;
}
body.theme-dark .apexcharts-tooltip-title { background: var(--ph-surface-2) !important; border-color: var(--ph-line) !important; }
body.theme-dark .jvectormap-container { background-color: var(--ph-surface) !important; }
body.theme-dark .jvectormap-zoomin,
body.theme-dark .jvectormap-zoomout {
background: var(--ph-surface-3); color: var(--ph-ink);
}
body.theme-dark .jvectormap-tip {
background: var(--ph-surface-3); border-color: var(--ph-line); color: var(--ph-ink);
}
/* Leaflet / Google map tiles keep their own colours; only the chrome
drawn on top of them is ours. */
body.theme-dark .custom-marker-label { color: #fff; }
/* ===================================== app-specific surfaces ========== */
/* Straight from the otherpages.css colour inventory. */
body.theme-dark .messages-panel,
body.theme-dark .message-body,
body.theme-dark .message-body .chat-body,
body.theme-dark .message-body .message-top,
body.theme-dark .new-message-wrapper,
body.theme-dark .chat-body,
body.theme-dark .contacts-list {
background-color: var(--ph-surface) !important;
color: var(--ph-ink);
}
body.theme-dark .chat-footer,
body.theme-dark .chat-footer .send-message-text,
body.theme-dark .blocked-user-message-div {
background-color: var(--ph-surface-2) !important;
color: var(--ph-ink-2);
}
body.theme-dark .message.my-message:after { border-left-color: var(--ph-surface-2); }
body.theme-dark .contacts li { border-color: var(--ph-line-soft); }
body.theme-dark .contacts li:hover, body.theme-dark .contacts li.active { background-color: var(--ph-surface-2); }
body.theme-dark .sortable-field-item,
body.theme-dark .reorder-field-card { border-color: var(--ph-line) !important; }
body.theme-dark .reorder-rows-on-drag-class,
body.theme-dark .gu-mirror.sortable-field-item,
body.theme-dark .gu-mirror.reorder-field-card {
background-color: var(--ph-accent-soft) !important;
color: var(--ph-ink) !important;
}
body.theme-dark .card_map .textBox,
body.theme-dark .card_map .title,
body.theme-dark .card_map .text-overlay-bottom { color: var(--ph-ink); }
body.theme-dark .card_map .category, body.theme-dark .card_map .city { color: var(--ph-ink-2); }
body.theme-dark .loader:before { background-color: var(--ph-surface); }
/* ===================================== the dashboard ================== */
/* home.blade.php defines its palette as tokens on .dash, so dark mode is
a token swap rather than a second set of rules. */
body.theme-dark .dash {
--dash-ink: var(--ph-ink);
--dash-ink-2: var(--ph-ink-2);
--dash-muted: var(--ph-muted);
--dash-line: var(--ph-line);
--dash-line-soft: var(--ph-line-soft);
--dash-surface: var(--ph-surface);
--dash-ground: var(--ph-surface-2);
--dash-accent: var(--ph-accent-ink);
--dash-tint: var(--ph-surface-3);
--dash-tint-2: #2c3f47;
}
body.theme-dark .dash .card { box-shadow: var(--ph-shadow); }
/* The four SVG stat tiles are drawn with their own light gradients. */
body.theme-dark .dash .total_customer,
body.theme-dark .dash .total_property,
body.theme-dark .dash .total_categories,
body.theme-dark .dash .total_featured { filter: brightness(.82) saturate(1.05); }
/* ===================================== login / auth page ============== */
body.theme-dark #auth,
body.theme-dark .login_bg { background-color: var(--ph-bg); }
body.theme-dark .login-card,
body.theme-dark #auth-center {
background-color: var(--ph-surface);
border-color: var(--ph-line);
color: var(--ph-ink);
}
body.theme-dark #auth .auth-title, body.theme-dark #auth h1, body.theme-dark #auth p { color: var(--ph-ink); }
body.theme-dark #auth .text-gray-600 { color: var(--ph-muted) !important; }
/* ===================================== deliberately left light ======== */
/* An email preview must show what the recipient will actually see, and a
watermark preview must show the watermark against the real backdrop.
Inverting either would be a bug, not a gap — so they are pinned. */
body.theme-dark .keep-light,
body.theme-dark .keep-light * {
color-scheme: light;
}
body.theme-dark .keep-light {
background-color: #fff !important;
color: #1b2a32 !important;
border-color: #e2e8ee !important;
}
/* ===================================== the switcher itself ============ */
/* A two-state pill in the topbar: both destinations visible at once, the
active one carried by the knob. A single icon that swaps is ambiguous —
it never says whether it shows the current mode or the one you'd get. */
/* Both selectors, because app-dark.css carries `body.theme-dark label
{ display: inline-block }` — specificity (0,1,1), which outranks a bare
`.theme-switch` (0,1,0) and would flatten the pill in dark mode only. */
.theme-switch,
body.theme-dark .theme-switch {
position: relative;
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
border-radius: 999px;
border: 1px solid #dfe6e9;
background: #eef2f4;
cursor: pointer;
flex: none;
line-height: 0;
}
.theme-switch input {
position: absolute;
opacity: 0;
width: 100%; height: 100%;
margin: 0;
cursor: pointer;
}
.theme-switch .theme-switch-opt {
position: relative;
z-index: 1;
width: 30px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 999px;
font-size: 14px;
color: #7b8b94;
transition: color .2s ease;
}
/* The knob is one element that slides, so the two states are visibly the
same control in two positions rather than two different controls. */
.theme-switch .theme-switch-knob {
position: absolute;
top: 3px; left: 3px;
width: 30px; height: 26px;
border-radius: 999px;
background: #fff;
box-shadow: 0 1px 3px rgba(20, 35, 45, .22);
transition: transform .22s cubic-bezier(.4, 0, .2, 1), background-color .22s ease;
}
.theme-switch .theme-switch-opt.is-sun { color: #c8811f; }
body.theme-dark .theme-switch { background: #0d151a; border-color: #2c3a44; }
body.theme-dark .theme-switch .theme-switch-knob { transform: translateX(32px); background: #2b3a44; }
body.theme-dark .theme-switch .theme-switch-opt.is-sun { color: #5c6b74; }
body.theme-dark .theme-switch .theme-switch-opt.is-moon { color: #ffd479; }
.theme-switch:hover { border-color: #b9c6cc; }
body.theme-dark .theme-switch:hover { border-color: #43555f; }
.theme-switch input:focus-visible ~ .theme-switch-knob {
outline: 2px solid var(--bs-primary, #087C7C);
outline-offset: 2px;
}
body.theme-dark .theme-switch input:focus-visible ~ .theme-switch-knob { outline-color: #5ed3c7; }
/* RTL: the pill's two halves swap, so the knob starts on the right and
travels the other way. */
html[dir="rtl"] .theme-switch .theme-switch-knob { left: auto; right: 3px; }
html[dir="rtl"] body.theme-dark .theme-switch .theme-switch-knob { transform: translateX(-32px); }
@media (max-width: 575.98px) {
.theme-switch .theme-switch-opt,
.theme-switch .theme-switch-knob { width: 26px; height: 24px; }
body.theme-dark .theme-switch .theme-switch-knob { transform: translateX(28px); }
html[dir="rtl"] body.theme-dark .theme-switch .theme-switch-knob { transform: translateX(-28px); }
}
/* The cross-fade between modes. Limited to colour properties and to the
elements that actually carry a surface — a blanket `transition: all` on
`*` would animate layout during the swap and fight every existing
hover transition on the page. */
html.theme-transition,
html.theme-transition body,
html.theme-transition .card,
html.theme-transition .navbar,
html.theme-transition #sidebar,
html.theme-transition .sidebar-wrapper,
html.theme-transition .form-control,
html.theme-transition .form-select,
html.theme-transition .table,
html.theme-transition .modal-content,
html.theme-transition .dropdown-menu,
html.theme-transition #main,
html.theme-transition #main-content {
transition: background-color .22s ease, color .22s ease, border-color .22s ease !important;
}
@media (prefers-reduced-motion: reduce) {
.theme-switch .theme-switch-knob { transition: none; }
html.theme-transition, html.theme-transition * { transition: none !important; }
}
/* =====================================================================
Avatar images — aspect ratio
---------------------------------------------------------------------
Not a dark-mode rule, but this stylesheet is the one that loads in both
themes (include.blade.php links it outside the theme conditionals), so a
theme-agnostic correction belongs here rather than in the vendor files,
which are left untouched.
.avatar img and its size variants set width and height together with no
object-fit, so anything that is not square is squashed to fit. A company
logo used as a profile picture — 452x229 here — came out compressed to
roughly two thirds of its proper width.
`contain` rather than `cover`: cover would fill the circle but crop a wide
logo down to its middle third, which is the opposite of what someone
setting a logo as their picture wants. contain keeps the whole mark and
never distorts it; a portrait photo letterboxes slightly instead.
===================================================================== */
.avatar img,
.avatar.avatar-sm img,
.avatar.avatar-md img,
.avatar.avatar-md2 img,
.avatar.avatar-lg img,
.avatar.avatar-xl img {
object-fit: contain;
}