html {
scroll-behavior: smooth;
transition: background-color 0.2s ease, color 0.2s ease;
}
/* Smooth theme switch — animate surface/border colours when toggling theme */
* {
transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* =====================
Bootstrap CSS overrides
===================== */
:root {
--bs-primary: #cd4949;
--bs-primary-rgb: 205, 73, 73;
--bs-link-color: #cd4949;
--bs-link-hover-color: #234923;
--bs-body-color: #222222;
--bs-body-bg: #F4FAFD;
}
/* =====================
Dark mode
=====================
Variables are overridden on (set by hub.js from
localStorage). Surfaces below read them as var(--name, ),
so light mode is unchanged whenever these variables are absent. */
[data-theme="dark"] {
color-scheme: dark;
--bs-body-bg: #1a1a2e;
--bs-body-color: #e0e0e0;
/* Bootstrap 5.3 dark tokens — set to our navy palette so the components
Bootstrap themes via data-bs-theme="dark" (dropdowns, modals, .btn-close,
form controls, list groups, breadcrumbs…) match the rest of the UI rather
than falling back to Bootstrap's default grey. */
--bs-border-color: #2a3a5e;
--bs-emphasis-color: #ffffff;
--bs-secondary-color: #8899aa;
--bs-secondary-bg: #16213e;
--bs-tertiary-color: #6c7a8a;
--bs-tertiary-bg: #1a2540;
--bs-heading-color: #e8e8e8;
/* Navbar stays dark blue - just slightly lighter */
--hub-navbar-bg: #16213e;
/* Sidebar */
--hub-sidebar-bg: #16213e;
--hub-sidebar-text: #c0c0c0;
--hub-sidebar-active-bg: #1a2e4a;
--hub-sidebar-hover-bg: #1e2d40;
/* Cards and containers */
--hub-card-bg: #16213e;
--hub-card-border: #2a3a5e;
--hub-table-bg: #16213e;
--hub-table-stripe: #1a2540;
--hub-table-hover: #1e2d40;
--hub-table-header-bg: #1a2e4a;
/* Inputs */
--hub-input-bg: #1e2d40;
--hub-input-border: #3a4a6a;
--hub-input-color: #e0e0e0;
/* Text variants */
--hub-text-muted: #8899aa;
}
/* =====================
Dark mode — overrides Bootstrap + base variables can't reach
=====================
With data-bs-theme="dark" active, Bootstrap themes its own components and
semantic text automatically, and the base rules above already drive every
custom surface through --hub-* variables. Only two gaps remain:
1) Bootstrap's *fixed* colour utilities (.text-dark / .text-black /
.bg-light / .bg-white) are NOT theme-aware in 5.3, and templates use
them heavily — force readable values here.
2) A handful of custom elements whose text colour was hardcoded. */
/* Fixed (non-theme-aware) colour utilities */
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-black { color: #e0e0e0 !important; }
[data-theme="dark"] .bg-white { background-color: #16213e !important; color: #e0e0e0 !important; }
[data-theme="dark"] .bg-light { background-color: #1a2540 !important; color: #e0e0e0 !important; }
/* .bg-warning/.bg-info keep their bright fixed fills in dark mode, so the
.text-dark lightening above would put near-white text on amber/cyan.
Higher specificity restores dark text on those bright fills. */
[data-theme="dark"] .bg-warning.text-dark,
[data-theme="dark"] .bg-info.text-dark { color: #16213e !important; }
/* .text-bg-light is a fixed white-chip utility (not theme-aware): re-tint. */
[data-theme="dark"] .text-bg-light { background-color: #1a2540 !important; color: #e0e0e0 !important; }
/* .bg-light-subtle resolves to Bootstrap's grey dark token — off-palette. */
[data-theme="dark"] .bg-light-subtle { background-color: #1a2540 !important; }
/* .bg-dark badges (#212529) vanish as chips on navy surfaces. */
[data-theme="dark"] .badge.bg-dark { background-color: #3a4a6a !important; }
/* A .bg-light progress segment would match the dark track colour exactly
(both map to #1a2540) — lift it so the segment stays visible. */
[data-theme="dark"] .progress-bar.bg-light { background-color: #3a4a6a !important; }
/* Custom components with hardcoded text colours */
[data-theme="dark"] .hub-sidebar .nav-section { color: #778899; }
[data-theme="dark"] .widget-title { color: #8899aa; }
[data-theme="dark"] .widget-number { color: #e0e0e0; }
[data-theme="dark"] .kanban-column-header { color: #8899aa; }
/* =====================
Buttons
===================== */
.btn-primary { background-color: #cd4949; border-color: #cd4949; color: #fff; }
.btn-primary:hover, .btn-primary:focus { background-color: #234923; border-color: #234923; color: #fff; }
.btn-secondary { background-color: #6c757d; border-color: #6c757d; color: #fff; }
.btn-secondary:hover { background-color: #5c636a; border-color: #565e64; color: #fff; }
.btn-outline-primary { color: #cd4949; border-color: #cd4949; }
.btn-outline-primary:hover, .btn-outline-primary:focus { background-color: #cd4949; border-color: #cd4949; color: #fff; }
/* Danger buttons: force white text on the red hover/focus fill so the label
stays legible (without this the text could inherit a red colour, making it
invisible on the red background). Kept on Bootstrap's danger red so these
stay visually distinct from the brand-red primary buttons above. */
.btn-danger:hover, .btn-danger:focus { background-color: #bb2d3b; border-color: #b02a37; color: #fff; }
.btn-outline-danger:hover, .btn-outline-danger:focus { background-color: #dc3545; border-color: #dc3545; color: #fff; }
.btn { font-size: 0.875rem; padding: 0.4rem 0.85rem; }
.btn-sm { font-size: 0.8rem; padding: 0.3rem 0.65rem; }
.btn-lg { font-size: 1rem; padding: 0.5rem 1.25rem; }
/* =====================
Navbar
===================== */
.hub-navbar { background-color: var(--hub-navbar-bg, #1a2e4a) !important; padding: 0; height: 56px; }
.hub-navbar-grid {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
width: 100%;
padding: 0 1rem;
gap: 1rem;
}
.hub-navbar-center {
min-width: 0;
overflow: hidden;
}
.hub-navbar-right {
display: flex;
align-items: center;
gap: 1.75rem;
white-space: nowrap;
}
.hub-navbar .navbar-brand { color: #fff !important; font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; }
.hub-navbar .nav-link { color: rgba(255,255,255,0.9) !important; font-size: 0.875rem; }
.hub-navbar .nav-link:hover { color: #fff !important; }
.hub-navbar .btn-outline-light { border-color: rgba(255,255,255,0.6); color: #fff; }
.hub-navbar .btn-outline-light:hover { background-color: rgba(255,255,255,0.15); }
.hub-navbar .btn-success { background-color: #234923; border-color: #234923; }
.hub-navbar .btn-success:hover { background-color: #1a3519; border-color: #1a3519; }
#hub-stopur-flash a { color: #fff; text-decoration: underline; }
#hub-stopur-flash a:hover { color: rgba(255,255,255,0.8); }
/* =====================
Sidebar
===================== */
.hub-sidebar {
background-color: var(--hub-sidebar-bg, #ffffff);
border-right: 1px solid var(--hub-card-border, #e0e0e0);
min-height: calc(100vh - 56px);
padding: 1rem 0;
width: 220px;
flex-shrink: 0;
}
.hub-sidebar .nav-link {
color: var(--hub-sidebar-text, #444);
padding: 0.55rem 1.25rem;
border-radius: 0;
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.hub-sidebar .nav-link:hover { background-color: var(--hub-sidebar-hover-bg, #fdf0f0); color: #cd4949; }
.hub-sidebar .nav-link.active { background-color: var(--hub-sidebar-active-bg, #fdf0f0); color: #cd4949; font-weight: 600; border-left: 3px solid #cd4949; padding-left: calc(1.25rem - 3px); }
.hub-sidebar .nav-section { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: #999; padding: 1rem 1.25rem 0.25rem; font-weight: 600; }
/* =====================
Sidebar collapse (user toggle, cookie-persisted via 'hub-sidebar')
=====================
A button at the top of the sidebar collapses it to a 60px icon rail and back.
The state lives on , applied pre-paint from
the cookie (Default.html head boot, mirroring dark mode) to avoid a flash, and
toggled at runtime by hub.js. Animating the width makes .hub-main (flex:1)
reflow smoothly into the reclaimed space. Collapse only applies ≥769px: below
that the sidebar is a slide-in overlay, not a persistent rail, so collapsing it
is meaningless — and the toggle is hidden there. */
.hub-sidebar { transition: width 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
.hub-sidebar-toggle-wrap { display: flex; justify-content: flex-end; padding: 0 0.75rem 0.5rem; }
.hub-sidebar-toggle { color: var(--hub-sidebar-text, #888); border: none; background: transparent; line-height: 1; padding: 0.25rem 0.4rem; }
.hub-sidebar-toggle:hover { color: #cd4949; background: var(--hub-sidebar-hover-bg, #fdf0f0); }
@media (max-width: 768px) {
.hub-sidebar-toggle-wrap { display: none; }
}
@media (min-width: 769px) {
.hub-sidebar-collapsed .hub-sidebar { width: 60px; }
.hub-sidebar-collapsed .hub-sidebar-toggle-wrap { justify-content: center; padding: 0 0 0.5rem; }
/* hide the text label (not the badge, which is also a ) */
.hub-sidebar-collapsed .hub-sidebar .hub-nav-link .flex-grow-1 { display: none; }
/* !important overrides the px-3 spacing utility on the NavItem anchor */
.hub-sidebar-collapsed .hub-sidebar .hub-nav-link { position: relative; justify-content: center; padding-left: 0 !important; padding-right: 0 !important; }
.hub-sidebar-collapsed .hub-sidebar .hub-nav-link i { margin: 0 !important; font-size: 1.05rem; }
/* keep the active red rail indicator, just without the label-row padding */
.hub-sidebar-collapsed .hub-sidebar .nav-link.active { padding-left: 0 !important; }
/* section headers collapse to a slim gap (text hidden) */
.hub-sidebar-collapsed .hub-sidebar .nav-section { height: 0; padding: 0.3rem 0; overflow: hidden; display: none; }
/* badge → small count indicator pinned to the icon's top-right corner */
.hub-sidebar-collapsed .hub-sidebar .hub-nav-link .badge { position: absolute; top: 2px; right: 6px; margin: 0 !important; padding: 0.1em 0.35em; font-size: 0.6rem; }
}
/* =====================
Main content
===================== */
/* min-width:0 lets .hub-main shrink below its content's intrinsic size so
* inner overflow-x: auto containers (e.g. .personal-board-scroll, .kanban-board)
* scroll inside the main area instead of pushing the whole page wider than
* the viewport. Without this, flex items default to min-width:auto. */
.hub-main { padding: 1.75rem 2rem; background-color: var(--bs-body-bg, #F4FAFD); min-height: calc(100vh - 56px); flex: 1; min-width: 0; }
.hub-layout { display: flex; }
/* =====================
Page headers
===================== */
.hub-page-header { margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.hub-page-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--bs-body-color, #222); margin: 0; }
.hub-page-header .actions { display: flex; gap: 0.5rem; }
/* =====================
Cards
===================== */
.card { background-color: var(--hub-card-bg, #ffffff); border: 1px solid var(--hub-card-border, #e0e0e0); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 1.25rem; }
.card-header { background-color: var(--hub-card-bg, #ffffff); border-bottom: 1px solid var(--hub-card-border, #e0e0e0); padding: 1rem 1.25rem; font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; justify-content: space-between; }
.card-body { padding: 1.25rem; }
.card-footer { background-color: var(--hub-table-stripe, #fafafa); border-top: 1px solid var(--hub-card-border, #e0e0e0); padding: 0.75rem 1.25rem; }
/* =====================
Tables
===================== */
/* overflow-x:auto (not hidden) so a table wider than the container scrolls
horizontally instead of being clipped between ~768px and the table's natural
width. overflow-y computes to auto too, preserving the rounded corners when
no scrollbar is needed. Tables that also carry an inner .table-responsive are
unaffected (the inner wrapper already contains the scroll). */
.table-container { background-color: var(--hub-table-bg, #ffffff) !important; border-radius: 8px; border: 1px solid var(--hub-card-border, #e0e0e0); overflow-x: auto; margin-bottom: 1.25rem; }
.table { background-color: var(--hub-table-bg, #ffffff); margin-bottom: 0; }
.table > :not(caption) > * > * { background-color: var(--hub-table-bg, #ffffff) !important; }
.table th { background-color: var(--hub-table-header-bg, #fff); color: var(--hub-text-muted, #555); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var(--hub-card-border, #e0e0e0) !important; padding: 0.75rem 1rem; white-space: nowrap; }
.table td { padding: 0.75rem 1rem; vertical-align: middle; border-bottom: 1px solid var(--hub-card-border, #f0f0f0) !important; font-size: 0.875rem; }
.table tbody tr:last-child td { border-bottom: none !important; }
.table tbody tr:hover td { background-color: var(--hub-table-hover, #fafeff); }
/* Plain text links in table cells get the brand-red treatment — but NOT
button-styled links (.btn-*). Those carry their own hover colours, and
without :not(.btn) the row-hover rule below (specificity 0,2,4) overrode
a .btn-outline-primary:hover (0,2,0), repainting its text red on the red
hover fill and making the label invisible. */
.table td a:not(.btn) { color: #cd4949; }
.table td a:not(.btn):hover { color: #234923; }
.table tbody tr:hover td a:not(.btn) { color: #cd4949; }
.table tbody tr:hover td { color: var(--bs-body-color, #222); }
/* Bootstrap table-variant classes (e.g. .table-light on the dashboard "Total"
row) hard-code a dark --bs-table-color for contrast on a light background and
are not theme-aware. In dark mode that black text lands on the dark cell bg
forced by line 195 above and disappears, so re-point the token. Higher
specificity than Bootstrap's own .table-light, so it wins without !important. */
[data-theme="dark"] .table-light {
--bs-table-color: #e0e0e0;
--bs-table-border-color: #2a3a5e;
}
/* Row-level table variants (tr.table-light "Total" rows, tr.table-warning
overdue rows, tr.table-success-subtle running stopur rows, tr.table-active
selected rows) were silenced in BOTH modes by the blanket !important
cell-background rule above. Restore them with higher specificity and an
explicit light/dark pair each. */
.table > tbody > tr.table-light > td { background-color: #f4f6f8 !important; }
.table > tbody > tr.table-warning > td { background-color: #fff3cd !important; }
.table > tbody > tr.table-success-subtle > td { background-color: #e6f4ea !important; }
.table > tbody > tr.table-active > td { background-color: #eef1f4 !important; }
[data-theme="dark"] .table > tbody > tr.table-light > td { background-color: #1a2e4a !important; }
[data-theme="dark"] .table > tbody > tr.table-warning > td { background-color: #2a2a1e !important; }
[data-theme="dark"] .table > tbody > tr.table-success-subtle > td { background-color: #1a2e1a !important; }
[data-theme="dark"] .table > tbody > tr.table-active > td { background-color: #1e2d40 !important; }
.table-search { padding: 1rem; border-bottom: 1px solid var(--hub-card-border, #e0e0e0); background: var(--hub-card-bg, #fff); }
/* =====================
Tabs
===================== */
.tab-content { background-color: var(--hub-card-bg, #ffffff); }
.tab-pane { background-color: var(--hub-card-bg, #ffffff); padding: 1.25rem; }
/* =====================
Badges
===================== */
.badge { font-size: 0.75rem; padding: 0.35em 0.7em; font-weight: 500; border-radius: 4px; }
.badge.bg-primary { background-color: #cd4949 !important; }
.badge.bg-success { background-color: #234923 !important; }
/* =====================
Forms
===================== */
.form-label { font-weight: 500; font-size: 0.875rem; color: var(--bs-body-color, #444); margin-bottom: 0.3rem; }
.form-control, .form-select { background-color: var(--hub-input-bg, #fff); border-color: var(--hub-input-border, #d0d0d0); color: var(--hub-input-color, inherit); font-size: 0.875rem; border-radius: 6px; }
.form-control:focus, .form-select:focus { border-color: #cd4949; box-shadow: 0 0 0 0.2rem rgba(205,73,73,0.12); outline: none; }
.form-control::placeholder { color: #aaa; }
.input-group-text { background-color: var(--hub-input-bg, #fff); border-color: var(--hub-input-border, #d0d0d0); color: var(--hub-input-color, inherit); }
/* =====================
Tabs
===================== */
.nav-tabs { border-bottom: 2px solid var(--hub-card-border, #e0e0e0); }
.nav-tabs .nav-link { color: var(--hub-text-muted, #666); font-size: 0.875rem; border: none; padding: 0.6rem 1rem; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.nav-tabs .nav-link:hover { color: #cd4949; border-bottom-color: #f0a0a0; background: none; }
.nav-tabs .nav-link.active { color: #cd4949; border-bottom-color: #cd4949; font-weight: 600; background: none; }
/* =====================
Kanban
===================== */
.kanban-board { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; }
.kanban-column { background-color: var(--hub-table-stripe, #eef4f8); border-radius: 8px; padding: 0.75rem; min-height: 300px; min-width: 250px; flex: 1; }
.kanban-column-header { font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: #777; margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: space-between; }
.task-card { background: var(--hub-card-bg, #fff); border-radius: 6px; padding: 0.75rem; margin-bottom: 0.5rem; border: 1px solid var(--hub-card-border, #e8e8e8); cursor: pointer; transition: box-shadow 0.15s, transform 0.1s; }
.task-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.1); transform: translateY(-1px); }
/* =====================
Dashboard widgets
===================== */
.widget-card { background: var(--hub-card-bg, #fff); border-radius: 8px; border: 1px solid var(--hub-card-border, #e0e0e0); padding: 1.25rem; margin-bottom: 1rem; }
.widget-card .widget-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #999; margin-bottom: 0.75rem; font-weight: 600; }
.widget-number { font-size: 2rem; font-weight: 700; color: #cd4949; line-height: 1; }
.widget-label { font-size: 0.8rem; color: var(--hub-text-muted, #888); margin-top: 0.25rem; }
/* =====================
Links
===================== */
a { color: #cd4949; text-decoration: none; }
a:hover { color: #234923; }
.text-muted { color: var(--hub-text-muted, #888) !important; }
/* =====================
Pagination
===================== */
.pagination { gap: 0.2rem; }
.page-link { color: #cd4949; border-color: var(--hub-card-border, #e0e0e0); border-radius: 4px !important; padding: 0.35rem 0.7rem; font-size: 0.875rem; }
.page-link:hover { background-color: var(--hub-sidebar-hover-bg, #fdf0f0); color: #cd4949; border-color: #cd4949; }
.page-item.active .page-link { background-color: #cd4949; border-color: #cd4949; color: #fff; }
.page-item.disabled .page-link { color: #ccc; }
/* =====================
Progress bars
===================== */
.progress { height: 8px; border-radius: 4px; background-color: var(--hub-table-stripe, #e8f0f5); }
.progress-bar { background-color: #cd4949; border-radius: 4px; }
/* =====================
Alerts
===================== */
.alert-success { background-color: #eaf4ea; border-color: #c3e0c3; color: #234923; }
.alert-danger { background-color: #fdf0f0; border-color: #f0c0c0; color: #9b2a2a; }
.alert-warning { background-color: #fff8e6; border-color: #ffd980; color: #856404; }
.alert-info { background-color: #e8f4fd; border-color: #b8d9f0; color: #0c5a8a; }
/* The fixed light alert colours above carry no theme guard, so they bleed into
dark mode. Re-tint to the navy palette (dark bg, light text). Higher
specificity than the single-class rules above, so no !important needed. */
[data-theme="dark"] .alert-success { background-color: #1a2e1a; border-color: #2a4a2a; color: #7ec87e; }
[data-theme="dark"] .alert-danger { background-color: #2e1a1a; border-color: #4a2a2a; color: #e87e7e; }
[data-theme="dark"] .alert-warning { background-color: #2e2a1a; border-color: #4a3a1a; color: #e8d07e; }
[data-theme="dark"] .alert-info { background-color: #1a2a3e; border-color: #2a4a6e; color: #7eb8e8; }
/* .alert-light (empty-state boxes on most list pages) falls back to
Bootstrap's grey dark token — re-tint to the navy palette. */
[data-theme="dark"] .alert-light { background-color: #1a2540; border-color: #2a3a5e; color: #8899aa; }
/* =====================
Mention dropdown
===================== */
.mention-dropdown { position: fixed; z-index: 1080; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); min-width: 200px; max-height: 200px; overflow-y: auto; }
.mention-dropdown-item { padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.875rem; }
.mention-dropdown-item:hover { background-color: #fdf0f0; color: #cd4949; }
/* hub.js / richtext.js inline-style the dropdown white on purpose (resilience
if this stylesheet is stale). !important is the only way CSS can win over
those inline declarations in dark mode. */
[data-theme="dark"] .mention-dropdown { background: #16213e !important; border-color: #2a3a5e !important; }
[data-theme="dark"] .mention-dropdown-item.active { background: #1e3a5f !important; }
[data-theme="dark"] .mention-dropdown-item:hover { background-color: #1e3a5f; }
/* Rendered @mention badge (MentionService / hub.js output: ) */
span.mention {
display: inline-block;
padding: 1px 8px;
border-radius: 10px;
background-color: #dbeafe;
color: #1d4ed8;
font-weight: 500;
font-size: 0.875em;
line-height: 1.5;
margin: 0 1px;
}
[data-theme="dark"] span.mention {
background-color: #1e3a5f;
color: #93c5fd;
}
/* =====================
Shared customer-autocomplete (HubAutocomplete) keyboard navigation
===================== */
/* Result items get role="option" from the enhancer. Highlight the keyboard-
active option and mouse hover identically so both input methods match. */
[role="listbox"] [role="option"].hub-ac-active,
[role="listbox"] [role="option"]:hover {
background-color: #e7f1ff;
}
[role="listbox"] [role="option"].hub-ac-active {
/* Stronger affordance for the keyboard cursor than plain hover */
box-shadow: inset 2px 0 0 #0d6efd;
}
[data-theme="dark"] [role="listbox"] [role="option"].hub-ac-active,
[data-theme="dark"] [role="listbox"] [role="option"]:hover {
background-color: #1e3a5f;
}
/* =====================
Rich-text editor (richtext.js) + rendered rich-text content
===================== */
.rte-wrap { width: 100%; }
.rte-toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
margin-bottom: 0.35rem;
}
.rte-toolbar .btn {
padding: 0.15rem 0.5rem;
line-height: 1.2;
}
.rte-area {
min-height: 6rem;
height: auto;
overflow-y: auto;
max-height: 24rem;
white-space: pre-wrap;
word-break: break-word;
}
.rte-area:focus {
border-color: #86b7fe;
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
outline: none;
}
/* Placeholder for the empty contenteditable (no native placeholder support) */
.rte-area:empty::before {
content: attr(data-placeholder);
color: #6c757d;
pointer-events: none;
}
[data-theme="dark"] .rte-area {
background-color: #16213e;
color: #e0e0e0;
border-color: #2a3a5e;
}
[data-theme="dark"] .rte-area:empty::before { color: #8899aa; }
/* Bullets/numbers must show inside the editor and in rendered output (Bootstrap
reboot strips list padding). Keep paragraphs tight so descriptions read like
the old plain-text ones. */
.rte-area ul, .rte-area ol,
.rich-text-content ul, .rich-text-content ol,
.task-modal-description-display ul, .task-modal-description-display ol {
padding-left: 1.5rem;
margin-bottom: 0.5rem;
}
.rte-area p, .rich-text-content p, .task-modal-description-display p { margin-bottom: 0.5rem; }
.rte-area p:last-child,
.rich-text-content p:last-child,
.task-modal-description-display p:last-child { margin-bottom: 0; }
/* =====================
Stopur navbar widget
===================== */
/* Width is bounded by max-width; overflow stays visible so the Bootstrap
tasks dropdown menu isn't clipped when it opens below the toggle button. */
#hub-stopur-nav { min-width: 0; max-width: fit-content; overflow: visible; }
#hub-stopur-inactive { max-width: 420px; overflow: hidden; }
#hub-stopur-customer { max-width: 180px; width: 180px; }
#hub-stopur-desc { max-width: 150px; width: 150px; }
.hub-stopur-nav .form-select-sm, .hub-stopur-nav .form-control-sm { font-size: 0.8rem; }
/* Customer autocomplete results still need position:fixed because
#hub-stopur-inactive (the form) has its own overflow:hidden. */
#hub-stopur-customer-results { position: fixed !important; top: auto; left: auto; z-index: 1080; }
/* =====================
Notification bell
===================== */
.hub-bell-item { padding: 0.6rem 1rem; border-bottom: 1px solid var(--hub-card-border, #f0f0f0); font-size: 0.825rem; color: var(--bs-body-color, #333); display: block; }
.hub-bell-item:hover { background-color: var(--hub-sidebar-hover-bg, #fdf0f0); color: #cd4949; }
.hub-bell-item.unread { background-color: var(--hub-table-stripe, #fef8f8); font-weight: 500; }
.hub-bell-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 4px);
z-index: 1050;
background: var(--hub-card-bg, #fff);
border: 1px solid var(--hub-card-border, #e0e0e0);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
width: 340px;
max-height: 420px;
overflow-y: auto;
}
.hub-bell-menu.show {
display: block;
}
/* =====================
Misc utilities
===================== */
.text-red { color: #cd4949; }
.text-green { color: #234923; }
.bg-red-light { background-color: #fdf0f0; }
.border-red { border-color: #cd4949 !important; }
.cursor-pointer { cursor: pointer; }
.gap-2 { gap: 0.5rem; }
/* =====================
Responsive (laptop band: 769px–1199px)
=====================
At ~1100px the fixed 220px sidebar + 2rem main padding leaves little room for
wide tables and multi-column panels. Reclaim ~55px by trimming the sidebar and
main padding (labels kept — only the chrome shrinks). Tables/grids handle the
rest via .table-responsive / collapsing columns. */
@media (min-width: 769px) and (max-width: 1199.98px) {
.hub-sidebar { width: 188px; }
.hub-sidebar .nav-link { padding-left: 1rem; padding-right: 1rem; }
.hub-sidebar .nav-link.active { padding-left: calc(1rem - 3px); }
.hub-sidebar .nav-section { padding-left: 1rem; padding-right: 1rem; }
.hub-main { padding: 1.25rem 1.25rem; }
}
/* =====================
Responsive (mobile ≤ 768px)
===================== */
@media (max-width: 768px) {
.hub-sidebar { display: none; }
.hub-main { padding: 1rem; }
.hub-layout { flex-direction: column; }
#hub-stopur-inactive { display: none !important; }
.hub-navbar-center { display: none; }
.hub-navbar-right { gap: 0.5rem; }
.hub-navbar-right .text-white.small { display: none; }
.table-container { overflow-x: auto; }
.table { min-width: 600px; }
.card { margin-bottom: 0.75rem; }
.btn { min-height: 38px; }
.hub-page-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.timelog-form .form-select,
.timelog-form .form-control { font-size: 16px; }
.hub-sidebar.d-block {
display: block !important;
position: fixed;
top: 56px;
left: 0;
width: 220px;
height: calc(100vh - 56px);
z-index: 1040;
box-shadow: 4px 0 12px rgba(0,0,0,0.15);
}
}