/*
* App-specific overrides layered on top of the W3CRM theme.
* Keep this file for project styling only - never edit style.css / plugins.css.
*/
/* ── Brand ───────────────────────────────────────────────── */
/* Nav header runs white. sabright-logo.png is transparent artwork whose "SA"
and tagline are DARK grey (red mark + red "BRIGHT"), so it is built for a
light background - on black those parts disappear. Keep them in sync if
either is ever swapped. */
.nav-header {
background-color: #fff;
border-bottom: 1px solid var(--bs-border-color, #e9ecef);
}
@media only screen and (max-width: 47.9375rem) {
/* style.css:14295 makes it transparent on small screens; keep it white. */
.nav-header {
background-color: #fff;
}
}
/* The theme expects two separate assets here (a compact mark + a wordmark).
We have one wide lockup that already contains the mark, so show only the
lockup, and swap to the cropped "B" mark when the sidebar is collapsed. */
.nav-header .brand-logo .brand-title {
height: auto;
max-width: 13rem;
max-height: 2.5rem; /* the lockup is ~4:1; keep it inside the 50px nav header */
margin-top: 0;
margin-left: 0;
object-fit: contain;
}
.nav-header .brand-logo .logo-abbr {
display: none;
width: 2.5rem;
height: 2.25rem;
min-width: 2.5rem;
object-fit: cover;
object-position: left center;
}
/* A dedicated square icon uploaded under Settings > Branding: show it whole. */
.nav-header .brand-logo .logo-abbr.is-icon {
object-fit: contain;
object-position: center;
}
/* Collapsed / mini sidebar: the theme hides .brand-title, so show the mark. */
[data-sidebar-style=full][data-layout=vertical] .menu-toggle .nav-header .brand-logo .logo-abbr,
[data-sidebar-style=mini] .nav-header .brand-logo .logo-abbr {
display: block;
}
/* ── Hamburger ───────────────────────────────────────────── */
/* With headerbg=color_1 the theme paints .nav-control with --bs-light
(style.css:4326), which reads as a grey box on the light header. Let the
header background show through instead. */
body[data-headerbg=color_1] .nav-control {
background-color: transparent;
}
/* ── Breadcrumb ──────────────────────────────────────────── */
/* style.css:4846 ships a broken divider - the mirror that produced the theme
rewrote the "/" in the content string into an absolute theme URL. */
.breadcrumb {
--bs-breadcrumb-divider: "/";
}
/* ── Sidebar icons ───────────────────────────────────────── */
/* The theme ships inline SVGs here; we use Bootstrap Icons glyphs, so mirror
the SVG sizing/spacing rules (style.css: .deznav .metismenu > li > a svg). */
.deznav .metismenu > li > a .menu-icon i {
font-size: 1.375rem;
line-height: 1;
margin-right: 0.4125rem;
vertical-align: middle;
}
/* ── Tables ──────────────────────────────────────────────── */
.table > :not(caption) > * > * {
vertical-align: middle;
}
/* Sortable column headers */
th.sortable {
cursor: pointer;
user-select: none;
white-space: nowrap;
}
th.sortable:hover {
background-color: var(--bs-primary-bg-subtle);
}
th.sortable .sort-icon {
font-size: 0.7rem;
vertical-align: middle;
}
th.sort-asc .sort-icon::before { content: "\f235"; } /* bi-chevron-up */
th.sort-desc .sort-icon::before { content: "\f229"; } /* bi-chevron-down */
th.sort-asc .sort-icon,
th.sort-desc .sort-icon { color: var(--bs-primary) !important; }
#leadsTable tbody tr.d-none { display: none !important; }
/* ── Rows-per-page select ────────────────────────────────── */
/* style.css reserves padding-right: 3.375rem on .form-select for the caret and
.form-select-sm does not shrink it, so a narrow fixed width left almost no
room for the digits. Tighten the caret gutter and size to content instead. */
.per-page-select {
width: auto;
min-width: 4.75rem;
padding-right: 2rem;
background-position: right 0.625rem center;
}
/* ── AJAX table region ───────────────────────────────────── */
/* .ajax-region is the persistent anchor for the loader; .ajax-content inside
it is the node swapped on every filter / page change. */
.leads-region,
.ajax-region {
position: relative;
min-height: 8rem;
}
#leadsContent,
.ajax-content {
transition: opacity .15s ease-in-out;
}
.leads-region.is-loading #leadsContent,
.ajax-region.is-loading .ajax-content {
opacity: .25;
pointer-events: none;
}
/* Spinner sits over the table only, so the filters above stay usable. */
.leads-loader,
.ajax-loader {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .75rem;
color: var(--bs-secondary-color);
}
.leads-loader[hidden],
.ajax-loader[hidden] {
display: none;
}
/* ── Select2 ─────────────────────────────────────────────── */
/* NOTE: do NOT set an explicit height on .select2-selection here. plugins.css
already gives Select2 the exact .form-control box (padding .563rem 1.125rem,
font-size .9375rem, line-height 1.572, height:auto), so a hardcoded height
only breaks that match and mispositions the arrow. */
.is-invalid + .select2-container--default .select2-selection--single {
border-color: var(--bs-danger);
}
/* ── Filter bar ──────────────────────────────────────────── */
/*
* Every label and every control in the bar sits on one line, at one height, in
* every state (normal / hover / focus / open / selected) and at every text
* length. Three different control types are involved:
*
* .form-control style.css:2239 padding .563/1.125 fs .9375 lh 1.572
* Select2 selection plugins.css:9 same box, but the container it lives in
* is display:inline-block, so a baseline
* descender gap made it sit lower and
* read as taller than the input.
* .btn style.css same padding/lh, but fs .875 -> ~1.5px short.
*
* Fixes below: one shared height token (derived from the theme's own numbers,
* not a magic value), the Select2 container promoted to a block, and the button
* tokens realigned. Rows are top-aligned so labels line up even if a control
* ever changes, and every column carries a label row (the Clear column uses a
* blank one) so nothing can drift vertically.
*/
.filter-bar {
/* = .form-control height: padding-y * 2 + (font-size * line-height) + borders */
--filter-control-h: calc((0.563rem * 2) + (0.9375rem * 1.572) + (var(--bs-border-width) * 2));
}
.filter-bar .form-label {
margin-bottom: 0.5rem;
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.filter-bar .form-control,
.filter-bar .btn,
.filter-bar .select2-container--default .select2-selection--single {
height: var(--filter-control-h);
min-height: var(--filter-control-h);
box-sizing: border-box;
border-radius: var(--bs-border-radius);
}
/* Button: match the inputs' type metrics, and never let text length alter the box. */
.filter-bar .btn {
--bs-btn-font-size: 0.9375rem;
--bs-btn-padding-y: 0;
--bs-btn-padding-x: 1.125rem;
--bs-btn-line-height: 1.572;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Select2: block-level container (kills the inline-block baseline gap) and
vertically centred text now that the box has a fixed height. */
.filter-bar .select2-container {
display: block;
width: 100% !important;
}
.filter-bar .select2-container--default .select2-selection--single {
display: flex;
align-items: center;
padding-top: 0;
padding-bottom: 0;
}
.filter-bar .select2-container--default .select2-selection--single .select2-selection__rendered {
padding-left: 0;
padding-right: 1.25rem; /* clear of the arrow */
line-height: 1.572;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
}
/* plugins.css puts the arrow at top:50%; with a flex box, span the full height
instead so its triangle stays centred. */
.filter-bar .select2-container--default .select2-selection--single .select2-selection__arrow {
top: 0;
height: 100%;
}
/* ── Compose modal (Gmail-style) ─────────────────────────── */
.compose-row {
background: var(--bs-body-bg);
}
.compose-label {
width: 60px;
flex-shrink: 0;
}
/* ── Attachment chips ────────────────────────────────────── */
.attach-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--bs-secondary-bg-subtle);
border: 1px solid var(--bs-border-color);
border-radius: 0.5rem;
padding: 4px 8px 4px 6px;
font-size: .8rem;
color: var(--bs-body-color);
max-width: 200px;
cursor: default;
}
.attach-chip .attach-icon { font-size: 1rem; flex-shrink: 0; }
.attach-chip .attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.attach-chip .attach-size { color: var(--bs-secondary-color); white-space: nowrap; flex-shrink: 0; }
.attach-chip .attach-remove {
cursor: pointer;
color: var(--bs-secondary-color);
font-size: .85rem;
flex-shrink: 0;
line-height: 1;
padding: 0 2px;
border-radius: 50%;
}
.attach-chip .attach-remove:hover {
background: var(--bs-border-color);
color: var(--bs-heading-color);
}
.attach-chip.attach-error {
border-color: var(--bs-danger);
background: var(--bs-danger-bg-subtle);
color: var(--bs-danger);
}
/* ── Email editor (CKEditor 5, assets/js/email-editor.js) ───── */
/* The editor's link / table balloons are attached to ; above a Bootstrap
modal (z-index 1055) they need a higher layer. Set on body, not :root, so
it wins over ckeditor5.css, which loads after this file. */
body {
--ck-z-default: 100;
--ck-z-panel: calc(var(--ck-z-default) + 999);
}
.email-editor .ck.ck-editor__editable_inline {
min-height: 260px;
max-height: 480px;
overflow-y: auto;
font-size: .92rem;
line-height: 1.6;
}
.email-editor .ck.ck-toolbar,
.email-editor .ck.ck-editor__main > .ck-editor__editable {
border-color: var(--bs-border-color);
}
.email-editor .ck.ck-toolbar {
border-top-left-radius: 0.625rem;
border-top-right-radius: 0.625rem;
background: var(--bs-tertiary-bg, #f8f9fa);
}
.email-editor .ck.ck-editor__main > .ck-editor__editable {
border-bottom-left-radius: 0.625rem;
border-bottom-right-radius: 0.625rem;
}
/* Smaller editors inside modals (Leads compose, Bulk Send). */
.email-editor-sm .ck.ck-editor__editable_inline {
min-height: 180px;
max-height: 320px;
}
/* The theme strips list markers from every ; the editor's lists need them. */
.email-editor .ck-content ul > li { list-style: disc; }
.email-editor .ck-content ol > li { list-style: decimal; }
/* A sent email's body in the Leads "Sent Email" modal (safe HTML from the server). */
.sent-email-body {
min-height: 120px;
font-size: .92rem;
line-height: 1.7;
}
.sent-email-body p { margin-bottom: .75rem; }
.sent-email-body ul > li { list-style: disc; }
.sent-email-body ol > li { list-style: decimal; }
.sent-email-body ul,
.sent-email-body ol { padding-left: 1.25rem; margin-bottom: .75rem; }
.sent-email-body blockquote {
padding-left: .75rem;
border-left: 3px solid var(--bs-border-color);
color: var(--bs-secondary-color);
}
.sent-email-body table { width: 100%; margin-bottom: .75rem; }
.sent-email-body th,
.sent-email-body td { padding: .25rem .5rem; border: 1px solid var(--bs-border-color); }
/* Placeholder chips: a click inserts {{key}} where the cursor was. */
.placeholder-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem;
}
.placeholder-chip {
padding: 0.125rem 0.5rem;
border: 1px dashed var(--bs-border-color);
border-radius: 1rem;
background: var(--bs-secondary-bg-subtle);
color: var(--bs-body-color);
font-family: var(--bs-font-monospace);
font-size: 0.75rem;
line-height: 1.5;
}
.placeholder-chip:hover,
.placeholder-chip:focus-visible {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
/* Saved template attachments: preview, name, open / download / remove. */
.template-attachments {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
gap: 0.5rem;
}
.template-attachment {
display: flex;
align-items: center;
gap: 0.625rem;
min-width: 0;
padding: 0.5rem;
border: 1px solid var(--bs-border-color);
border-radius: 0.5rem;
background: var(--bs-body-bg);
}
.template-attachment.is-missing {
border-color: var(--bs-danger-border-subtle, var(--bs-danger));
background: var(--bs-danger-bg-subtle);
}
.template-attachment-thumb {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 3rem;
height: 3rem;
overflow: hidden;
border-radius: 0.375rem;
background: var(--bs-secondary-bg-subtle);
font-size: 1.5rem;
}
.template-attachment-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.template-attachment-info {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.template-attachment-name {
overflow: hidden;
font-size: 0.8125rem;
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
}
.template-attachment-actions {
display: flex;
flex-shrink: 0;
gap: 0.25rem;
}
/* ── Misc ────────────────────────────────────────────────── */
.empty-state {
padding: 3rem 1rem;
text-align: center;
color: var(--bs-secondary-color);
}
.empty-state .empty-state-icon {
font-size: 3rem;
display: block;
margin-bottom: .75rem;
opacity: .35;
}
.table-card-body .table > thead > tr > th {
white-space: nowrap;
}
/* ═══════════════════════════════════════════════════════════════════════════
Dashboard / Finder / Verifier / Bulks
Components shared by the four modules so they read as one application.
Everything is built from theme tokens (--bs-*) - no fixed colours - so a
switcher change carries through here too.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Stat cards ──────────────────────────────────────────── */
.stat-card {
height: 100%;
}
.stat-card .card-body {
display: flex;
align-items: center;
gap: 1rem;
}
.stat-icon {
flex: 0 0 auto;
width: 3.25rem;
height: 3.25rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.75rem;
font-size: 1.5rem;
line-height: 1;
}
.stat-body { min-width: 0; }
.stat-value {
font-size: 1.6rem;
font-weight: 600;
line-height: 1.2;
color: var(--bs-heading-color);
}
.stat-label {
font-size: 0.8125rem;
color: var(--bs-secondary-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stat-meta {
font-size: 0.75rem;
color: var(--bs-secondary-color);
}
/* Tinted icon tiles. .light variants of the theme's contextual colours. */
.stat-icon.tint-primary { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.stat-icon.tint-success { background: var(--bs-success-bg-subtle); color: var(--bs-success); }
.stat-icon.tint-warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning); }
.stat-icon.tint-danger { background: var(--bs-danger-bg-subtle); color: var(--bs-danger); }
.stat-icon.tint-info { background: var(--bs-info-bg-subtle); color: var(--bs-info); }
.stat-icon.tint-dark { background: var(--bs-secondary-bg-subtle); color: var(--bs-body-color); }
/* ── Activity chart ──────────────────────────────────────── */
/* A plain CSS column chart. The app ships no charting library and the theme's
is not bundled, so this keeps the dashboard dependency-free and offline. */
.activity-chart {
display: flex;
align-items: flex-end;
gap: 0.5rem;
height: 11rem;
padding-top: 0.5rem;
overflow-x: auto;
}
.activity-day {
flex: 1 1 0;
min-width: 1.75rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
height: 100%;
}
.activity-bars {
flex: 1 1 auto;
width: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 3px;
}
.activity-bar {
width: 45%;
max-width: 0.75rem;
min-height: 2px;
border-radius: 0.25rem 0.25rem 0 0;
transition: opacity .15s ease-in-out;
}
.activity-bar:hover { opacity: .75; }
.activity-bar.bar-leads { background: var(--bs-primary); }
.activity-bar.bar-emails { background: var(--bs-success); }
.activity-label {
font-size: 0.6875rem;
color: var(--bs-secondary-color);
white-space: nowrap;
}
.chart-legend {
display: flex;
gap: 1rem;
font-size: 0.8125rem;
color: var(--bs-secondary-color);
}
.chart-legend .swatch {
display: inline-block;
width: 0.625rem;
height: 0.625rem;
border-radius: 0.1875rem;
margin-right: 0.375rem;
vertical-align: middle;
}
/* ── Score meter ─────────────────────────────────────────── */
.score-meter {
height: 0.375rem;
border-radius: 1rem;
background: var(--bs-secondary-bg-subtle);
overflow: hidden;
min-width: 3.5rem;
}
.score-meter > span {
display: block;
height: 100%;
border-radius: inherit;
}
/* ── Verification check list ─────────────────────────────── */
.check-list {
list-style: none;
margin: 0;
padding: 0;
}
.check-list li {
display: flex;
align-items: flex-start;
gap: 0.625rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--bs-border-color);
}
.check-list li:last-child { border-bottom: 0; }
.check-list .check-mark { font-size: 1rem; line-height: 1.4; flex-shrink: 0; }
.check-list .check-name { font-weight: 500; color: var(--bs-heading-color); }
.check-list .check-detail {
font-size: 0.8125rem;
color: var(--bs-secondary-color);
word-break: break-word;
}
/* ── Result panel (Finder / Verifier) ────────────────────── */
.result-panel {
border: 1px solid var(--bs-border-color);
border-radius: 0.75rem;
padding: 1.25rem;
background: var(--bs-body-bg);
}
.result-email {
font-size: 1.125rem;
font-weight: 600;
color: var(--bs-heading-color);
word-break: break-all;
}
.result-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.625rem 0.75rem;
border: 1px solid var(--bs-border-color);
border-radius: 0.5rem;
margin-bottom: 0.5rem;
background: var(--bs-body-bg);
}
.result-row:last-child { margin-bottom: 0; }
.result-row .result-main { min-width: 0; }
.result-row .result-addr {
font-weight: 500;
color: var(--bs-heading-color);
word-break: break-all;
}
/* ── Bulk progress ───────────────────────────────────────── */
.bulk-progress {
height: 0.625rem;
border-radius: 1rem;
background: var(--bs-secondary-bg-subtle);
}
.bulk-progress .progress-bar { border-radius: 1rem; }
/* Small stat chips used under a run's progress bar. */
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.stat-chip {
display: inline-flex;
align-items: baseline;
gap: 0.375rem;
padding: 0.25rem 0.625rem;
border-radius: 1rem;
font-size: 0.8125rem;
background: var(--bs-secondary-bg-subtle);
color: var(--bs-body-color);
}
.stat-chip strong { color: var(--bs-heading-color); }
/* ── Misc ────────────────────────────────────────────────── */
/* Long URLs and addresses must wrap rather than widen the table. */
.cell-wrap { word-break: break-word; }
.mw-220 { max-width: 220px; }
/* Inline spinner shown while a lookup is in flight. */
.inline-loading {
display: flex;
align-items: center;
justify-content: center;
gap: .75rem;
padding: 2.5rem 1rem;
color: var(--bs-secondary-color);
}
/* ═══════════════════════════════════════════════════════════════════════════
RESPONSIVE
───────────────────────────────────────────────────────────────────────────
Desktop layout deliberately untouched. Everything below is either a media
query, or a non-visual guard (min-width:0 / overflow-wrap) that changes
nothing at desktop width but stops content pushing the page sideways.
Breakpoints (matching Bootstrap 5's own, so utility classes stay in step):
1200px xl small laptop
992px lg tablet landscape
768px md tablet portrait <- theme switches the sidebar to overlay here
576px sm mobile
480px small mobile
═══════════════════════════════════════════════════════════════════════════ */
/* ── 0. Overflow guards — apply at every width ───────────────────────────── */
/*
* A flex/grid child defaults to min-width:auto, which means it refuses to
* shrink below its content. One long URL or a wide table inside a flex column
* is then enough to push the whole page sideways. Setting min-width:0 on the
* containers that actually wrap variable-width content lets them shrink and
* hand the overflow to the inner scroller instead. Purely structural - nothing
* moves at desktop width.
*/
.content-body,
.container-fluid,
.card,
.card-body,
.card-header,
.ajax-region,
.ajax-content,
.table-responsive,
.result-panel,
.stat-body,
.result-main {
min-width: 0;
}
/* Never let the page itself scroll sideways - the table scrolls instead. */
.content-body,
.container-fluid {
max-width: 100%;
}
/* Long unbroken strings (URLs, emails, domains) wrap instead of widening. */
.cell-wrap,
.result-addr,
.result-email,
.check-detail,
.stat-label,
.breadcrumb li {
overflow-wrap: anywhere;
}
/* Media scales down with its box. */
img,
video {
max-width: 100%;
height: auto;
}
/* Momentum scrolling for the horizontal scrollers on iOS. */
.table-responsive,
.activity-chart {
-webkit-overflow-scrolling: touch;
}
/* Many pages of pagination must wrap, never overflow the card footer. */
.pagination {
flex-wrap: wrap;
}
/* A dropdown opened near the right edge must not widen the viewport. */
.dropdown-menu {
max-width: calc(100vw - 1.5rem);
}
/* ── 1. 1200px and below — small laptop ──────────────────────────────────── */
@media (max-width: 1199.98px) {
/* The theme's page padding is generous for a 1440px canvas; reclaim some. */
.content-body .container-fluid {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
/* ── 2. 992px and below — tablet landscape ───────────────────────────────── */
@media (max-width: 991.98px) {
/* Card header = title block + action buttons. Let the actions drop onto
their own line rather than squeezing the title. */
.card-header.d-sm-flex {
flex-wrap: wrap;
gap: 0.5rem;
}
.activity-chart {
gap: 0.375rem;
}
}
/* ── 3. 768px and below — tablet portrait / large mobile ─────────────────── */
/* The theme flips the sidebar to overlay below 768px (deznav-init.js), so from
here down the content owns the full width. */
@media (max-width: 767.98px) {
.content-body .container-fluid {
padding-left: 1rem;
padding-right: 1rem;
}
.filter-bar > [class*="col-"] {
margin-bottom: 0.75rem;
}
/* Card header actions align left once they have wrapped - right-aligned
buttons read as detached from the title they belong to. */
.card-header.d-sm-flex > .clearfix:last-child {
width: 100%;
}
.card-header .btn {
margin-left: 0 !important;
}
/* Modals: reclaim the desktop gutter, and keep a tall body scrollable
inside the dialog rather than pushing the footer off-screen. */
.modal-dialog {
margin: 0.75rem;
}
.modal-body {
max-height: calc(100vh - 12rem);
overflow-y: auto;
}
.stat-icon {
width: 2.75rem;
height: 2.75rem;
font-size: 1.25rem;
}
.stat-value {
font-size: 1.35rem;
}
}
/* ── 4. 576px and below — mobile ─────────────────────────────────────────── */
@media (max-width: 575.98px) {
.content-body .container-fluid {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
/* Every filter control full width - a half-width Select2 at 360px shows
about four characters, which is not a usable filter. */
.filter-bar > [class*="col-"] {
width: 100%;
flex: 0 0 100%;
max-width: 100%;
}
/* The blank spacer label above the Clear button wastes a whole row here. */
.filter-bar .form-label[aria-hidden="true"] {
display: none;
}
/* Card header: title, then full-width actions underneath. */
.card-header.d-sm-flex {
display: block !important;
}
.card-header .btn,
.card-header form.d-inline {
width: 100%;
margin: 0.25rem 0 !important;
}
.card-header form.d-inline .btn {
margin: 0 !important;
}
/* Mode switch pills (Finder domain/person, Verifier single/many). */
.nav-pills {
flex-wrap: wrap;
gap: 0.375rem;
}
.nav-pills .nav-item {
flex: 1 1 auto;
}
.nav-pills .nav-link {
width: 100%;
text-align: center;
}
/* Result rows: score + action stack under the address instead of fighting
it for width. */
.result-row {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
.result-row > div:last-child {
justify-content: space-between;
}
.result-row .btn {
flex: 1 1 auto;
}
/* Table footer: rows-per-page block and pagination on separate lines. */
.card-footer .d-flex.justify-content-between {
flex-direction: column;
align-items: stretch !important;
gap: 0.75rem;
}
.card-footer .pagination {
justify-content: center;
margin-bottom: 0;
}
/* Chart: narrower columns so more days fit before it needs scrolling, and
the date labels turn vertical so they stop colliding. */
.activity-chart {
height: 9rem;
gap: 0.25rem;
}
.activity-day {
min-width: 1.375rem;
}
.activity-label {
font-size: 0.625rem;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
.chart-legend {
flex-wrap: wrap;
gap: 0.5rem;
font-size: 0.75rem;
}
/* Compose modal (Leads): the fixed 60px label column costs too much here. */
.compose-label {
width: auto;
min-width: 3.25rem;
}
.stat-chip {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
}
}
/* ── 5. 480px and below — small mobile ───────────────────────────────────── */
@media (max-width: 480px) {
.content-body .container-fluid {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.card-body {
padding: 1rem;
}
.card-header {
padding-left: 1rem;
padding-right: 1rem;
}
.stat-card .card-body {
gap: 0.75rem;
}
.stat-icon {
width: 2.5rem;
height: 2.5rem;
font-size: 1.125rem;
border-radius: 0.625rem;
}
.stat-value {
font-size: 1.25rem;
}
.stat-meta {
font-size: 0.6875rem;
}
.card-title {
font-size: 0.9375rem;
}
.activity-chart {
height: 8rem;
}
.activity-day {
min-width: 1.25rem;
}
.check-list li {
padding: 0.4375rem 0;
gap: 0.5rem;
}
.modal-dialog {
margin: 0.5rem;
}
.modal-body {
padding: 1rem;
}
}
/* ── 6. Touch targets ────────────────────────────────────────────────────── */
/*
* Keyed to pointer:coarse rather than a width breakpoint: a touchscreen laptop
* needs these too, and a narrow desktop window does not. 2.75rem (44px) is the
* smallest target a finger hits reliably.
*/
@media (pointer: coarse) {
.btn,
.form-control,
.form-select {
min-height: 2.75rem;
}
.btn-sm,
.form-control-sm,
.form-select-sm {
min-height: 2.25rem;
}
.dropdown-item {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
/* The row-action button is the smallest tap target in every table. */
.table .btn-square {
min-width: 2.5rem;
min-height: 2.5rem;
}
/* The filter bar pins its controls to one shared height; honour the touch
minimum instead when that is larger. */
.filter-bar .form-control,
.filter-bar .btn,
.filter-bar .select2-container--default .select2-selection--single {
min-height: 2.75rem;
}
}
/* ── 7. Mobile sidebar drawer ────────────────────────────────────────────── */
/*
* Below 768px deznav-init.js switches the sidebar to data-sidebar-style="overlay",
* where the theme slides .deznav in from left:-100% to left:0 and leaves
* .content-body at margin-left:0. That part already works and is untouched.
*
* What the theme does not ship is a backdrop. The panel opens over the content
* at z-index 3 with nothing behind it, so there is no visual separation and
* nothing to tap to dismiss. The rules below add one, and assets/js/mobile-nav.js
* handles the dismissals.
*
* Scoped to the overlay breakpoint on purpose: above it .menu-toggle means
* "collapse the sidebar to icons", which must keep working exactly as before.
*/
@media (max-width: 767.98px) {
[data-sidebar-style="overlay"] #main-wrapper.menu-toggle::before {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
/* Under .deznav (z-index 3), over everything else. */
z-index: 2;
opacity: 1;
animation: mobile-nav-fade 0.3s ease-out;
}
/* The drawer is 18rem wide in the theme; never let it exceed the screen. */
[data-sidebar-style="overlay"] .deznav {
max-width: 85vw;
}
/* The panel scrolls internally rather than growing the page. */
[data-sidebar-style="overlay"] .deznav .deznav-scroll {
max-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
@keyframes mobile-nav-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* Body scroll lock while the drawer is open, so a swipe moves the menu and not
the page behind it. position:fixed would jump the scroll position back to the
top on close, so overflow:hidden is used instead. */
body.mobile-nav-open {
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
[data-sidebar-style="overlay"] #main-wrapper.menu-toggle::before {
animation: none;
}
[data-sidebar-style="overlay"] .deznav {
transition: none !important;
}
}
/* Theme sets .nav-pills .nav-link i { display:flex }, which stacks the icon above the label. Keep them inline. */
.nav-pills .nav-link i,
.nav-tabs .nav-link i {
display: inline-block;
}
/* ── 8. Newer modules on tablet / mobile ─────────────────────────────────── */
/*
* Header account controls, notification toasts, tab strips and the Mail
* Settings test row. Every rule below sits inside a max-width query, so
* screens of 1200px and up (desktop) are not touched.
*/
@media (max-width: 991.98px) {
/* Title + bell + account stay on one row; the page title gives way first. */
.header .navbar-collapse {
flex-wrap: nowrap;
gap: 0.5rem;
}
.header .header-left {
flex: 1 1 auto;
min-width: 0;
}
.header .dashboard_bar {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.header .navbar-collapse > .d-flex {
flex-shrink: 0;
}
}
@media (max-width: 575.98px) {
/* Compact bell / account buttons so they do not crowd the title. */
.header .navbar-collapse .btn {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
/* Notification dropdown: the bell sits left of the account button, so an
end-aligned menu runs off the left edge. Pin it to the screen instead,
under the header, with an even gutter on both sides. */
#notifDropdown .dropdown-menu.show {
position: fixed !important;
top: 3.5rem !important;
right: 0.75rem !important;
bottom: auto !important;
left: 0.75rem !important;
width: auto !important;
max-width: none;
transform: none !important;
}
/* Toasts span the screen instead of a fixed 350px box that overflows. */
#notifToasts {
left: 0;
right: 0;
padding: 0.5rem !important;
}
#notifToasts .toast {
width: 100%;
max-width: none;
}
/* Tab strips (Finder, Verifier, Mail Settings): scroll sideways, never wrap
a label onto two lines or push the page wider. */
.nav-tabs {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-tabs .nav-link {
flex-shrink: 0;
}
/* Mail Settings: the connection-test result drops under the buttons. */
.test-result {
flex-basis: 100%;
}
}
/* Header bell and account buttons: no background or border, just the icon/label. */
.header .navbar-collapse .btn-light,
.header .navbar-collapse .btn-light:hover,
.header .navbar-collapse .btn-light:focus,
.header .navbar-collapse .btn-light:active,
.header .navbar-collapse .btn-light.show {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
/* Tablet / mobile: the theme shrinks .nav-header to 5rem and hides the wordmark
(style.css: max-width 63.9375rem), and the collapsed-sidebar rule above only
shows the "SB" mark in desktop collapse mode - so below 1024px there was no
logo at all. Show the mark there. Desktop (1024px and up) is unchanged. */
@media (max-width: 1023.98px) {
.nav-header .brand-logo .brand-title {
display: none;
}
.nav-header .brand-logo .logo-abbr {
display: block;
}
}
/* ── Auth pages (layouts/auth.blade.php) ─────────────────────────────────── */
/* Split screen: a dark brand panel (992px and up) beside a white form panel.
The logo is light-background artwork (see "Brand" above), so it only ever
sits on white: a white chip on the dark panel, the form card on small screens. */
.auth-body {
min-height: 100vh;
margin: 0;
background-color: #f4f7fb;
}
.auth-shell {
display: flex;
min-height: 100vh;
}
/* Brand panel */
.auth-aside {
position: relative;
display: none;
flex: 0 0 46%;
max-width: 46rem;
overflow: hidden;
color: #fff;
background:
radial-gradient(42rem 28rem at 105% -5%, rgba(var(--bs-primary-rgb, 13, 153, 255), 0.55), transparent 62%),
radial-gradient(34rem 24rem at -15% 105%, rgba(99, 102, 241, 0.35), transparent 60%),
linear-gradient(155deg, #0a1730 0%, #0c2550 52%, #0b3570 100%);
}
/* Faint grid, fading out towards the edges. */
.auth-aside::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 2.75rem 2.75rem;
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 35% 40%, #000 25%, transparent 80%);
mask-image: radial-gradient(ellipse 80% 70% at 35% 40%, #000 25%, transparent 80%);
pointer-events: none;
}
/* Soft rings, bottom right. */
.auth-aside::after {
content: "";
position: absolute;
right: -9rem;
bottom: -9rem;
width: 24rem;
height: 24rem;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50%;
box-shadow: 0 0 0 3rem rgba(255, 255, 255, 0.02), 0 0 0 6rem rgba(255, 255, 255, 0.015);
pointer-events: none;
}
.auth-aside-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2.5rem;
width: 100%;
padding: 3rem 3.5rem;
}
/* The whole logo on a white chip - works for any uploaded artwork. */
.auth-brand {
display: inline-flex;
align-items: center;
align-self: flex-start;
padding: 0.6rem 0.95rem;
border-radius: 0.9rem;
background-color: #fff;
box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.55);
}
.auth-brand img {
display: block;
width: auto;
height: 2.5rem;
max-width: 13rem;
object-fit: contain;
}
.auth-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.4rem 0.85rem;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
background-color: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.9);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.auth-eyebrow .bi {
color: #8fd0ff;
}
.auth-headline {
margin: 1.25rem 0 1rem;
color: #fff;
font-size: clamp(2rem, 2.7vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
}
.auth-accent {
color: #8fd0ff;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.auth-accent {
background-image: linear-gradient(90deg, #7cc8ff 0%, #a5b4fc 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.auth-lead {
max-width: 31rem;
margin: 0 0 2.25rem;
color: rgba(255, 255, 255, 0.75);
font-size: 1rem;
line-height: 1.65;
}
.auth-features {
display: grid;
gap: 1.25rem;
max-width: 31rem;
margin: 0;
padding: 0;
list-style: none;
}
.auth-features li {
display: flex;
align-items: flex-start;
gap: 0.95rem;
}
.auth-feature-icon {
display: inline-flex;
flex: 0 0 2.6rem;
align-items: center;
justify-content: center;
width: 2.6rem;
height: 2.6rem;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 0.75rem;
background-color: rgba(255, 255, 255, 0.08);
color: #8fd0ff;
font-size: 1.1rem;
}
.auth-feature-text strong {
display: block;
margin-bottom: 0.15rem;
color: #fff;
font-size: 0.95rem;
font-weight: 600;
}
.auth-feature-text span {
display: block;
color: rgba(255, 255, 255, 0.68);
font-size: 0.85rem;
line-height: 1.55;
}
.auth-trust {
display: flex;
align-items: flex-start;
gap: 0.7rem;
max-width: 31rem;
padding: 0.9rem 1.1rem;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 0.9rem;
background-color: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.82);
font-size: 0.85rem;
line-height: 1.5;
}
.auth-trust .bi {
color: #8fd0ff;
font-size: 1.1rem;
line-height: 1.3;
}
.auth-aside-foot {
margin: 1.25rem 0 0;
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
}
/* Form panel */
.auth-main {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
min-width: 0;
padding: 2.5rem 1.5rem;
background-color: #fff;
}
.auth-panel {
width: 100%;
max-width: 27rem;
}
.auth-logo {
display: block;
width: auto;
height: auto;
max-width: 12.5rem;
max-height: 3.25rem;
margin-bottom: 2.25rem;
object-fit: contain;
}
.auth-title {
margin: 0 0 0.4rem;
color: #0f172a;
font-size: 1.75rem;
font-weight: 700;
letter-spacing: -0.015em;
}
.auth-subtitle {
margin: 0 0 1.85rem;
color: #64748b;
font-size: 0.95rem;
}
.auth-alert {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 0.9rem;
border-radius: 0.75rem;
font-size: 0.875rem;
}
.auth-label {
display: block;
margin-bottom: 0.45rem;
color: #334155;
font-size: 0.85rem;
font-weight: 500;
}
.auth-required {
color: var(--bs-danger, #dc3545);
}
.auth-field {
position: relative;
}
.auth-field-icon {
position: absolute;
top: 50%;
left: 1rem;
z-index: 4;
color: #94a3b8;
font-size: 1rem;
line-height: 1;
transform: translateY(-50%);
transition: color 0.15s ease-in-out;
pointer-events: none;
}
.auth-field:focus-within .auth-field-icon {
color: var(--bs-primary);
}
.auth-input.form-control {
height: 3.05rem;
padding-left: 2.8rem;
border-color: #dbe3ee;
border-radius: 0.8rem;
background-color: #f8fafc;
color: #0f172a;
font-size: 0.925rem;
}
.auth-input.form-control::placeholder {
color: #a3b0c2;
font-weight: 400;
}
.auth-input.form-control:hover {
border-color: #c5d1e0;
}
.auth-input.form-control:focus {
border-color: var(--bs-primary);
background-color: #fff;
box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb, 13, 153, 255), 0.14);
}
.auth-input.form-control.is-invalid {
border-color: var(--bs-danger, #dc3545);
background-color: #fff;
}
.auth-input.form-control.is-invalid:focus {
box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.14);
}
/* Room for the show/hide button, which takes the place of the Bootstrap
invalid-field icon on password inputs. */
.auth-input.has-toggle,
.auth-input.has-toggle.is-invalid {
padding-right: 3rem;
background-image: none;
}
.auth-toggle {
position: absolute;
top: 50%;
right: 0.45rem;
z-index: 5;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.3rem;
height: 2.3rem;
padding: 0;
border: 0;
border-radius: 0.6rem;
background: transparent;
color: #94a3b8;
transform: translateY(-50%);
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.auth-toggle:hover {
background-color: #eef2f7;
color: #334155;
}
.auth-toggle:focus-visible {
outline: 2px solid var(--bs-primary);
outline-offset: 1px;
}
.auth-hint {
margin-top: 0.4rem;
color: #94a3b8;
font-size: 0.78rem;
}
.auth-hint .bi {
margin-right: 0.3rem;
}
.auth-capslock {
color: #b45309;
}
.auth-match.is-ok {
color: #16a34a;
}
.auth-match.is-bad {
color: var(--bs-danger, #dc3545);
}
.auth-body .invalid-feedback {
margin-top: 0.4rem;
font-size: 0.8rem;
}
/* Password strength: four bars, filled up to the score. */
.auth-strength {
display: flex;
gap: 0.3rem;
margin-top: 0.55rem;
}
.auth-strength span {
flex: 1 1 0;
height: 0.25rem;
border-radius: 999px;
background-color: #e2e8f0;
transition: background-color 0.2s ease-in-out;
}
.auth-strength[data-score="0"] span:nth-child(-n+1),
.auth-strength[data-score="1"] span:nth-child(-n+1) {
background-color: var(--bs-danger, #dc3545);
}
.auth-strength[data-score="2"] span:nth-child(-n+2) {
background-color: #f59e0b;
}
.auth-strength[data-score="3"] span:nth-child(-n+3) {
background-color: #0ea5e9;
}
.auth-strength[data-score="4"] span {
background-color: #16a34a;
}
.auth-remember .form-check-label {
color: #475569;
font-size: 0.875rem;
}
.auth-submit.btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 3.05rem;
border-radius: 0.8rem;
font-size: 0.95rem;
font-weight: 600;
box-shadow: 0 12px 24px -12px rgba(var(--bs-primary-rgb, 13, 153, 255), 0.75);
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.auth-submit.btn:hover:not(:disabled) {
box-shadow: 0 16px 28px -12px rgba(var(--bs-primary-rgb, 13, 153, 255), 0.85);
transform: translateY(-1px);
}
.auth-submit.btn:active:not(:disabled) {
transform: translateY(0);
}
.auth-submit.btn:disabled {
opacity: 0.85;
}
.auth-switch {
margin: 1.5rem 0 0;
color: #64748b;
font-size: 0.875rem;
text-align: center;
}
.auth-switch a {
font-weight: 600;
}
.auth-panel-foot {
margin: 2.5rem 0 0;
color: #a3b0c2;
font-size: 0.8rem;
text-align: center;
}
/* 992px and up: brand panel on. It carries the logo and the copyright, so the
form panel drops its own copies. */
@media (min-width: 992px) {
.auth-aside {
display: flex;
}
.auth-logo,
.auth-panel-foot {
display: none;
}
}
/* Short laptop screens: tighten the brand panel so it fits without scrolling. */
@media (min-width: 992px) and (max-height: 820px) {
.auth-aside-inner {
gap: 1.5rem;
padding: 2.25rem 3rem;
}
.auth-headline {
margin: 1rem 0 0.75rem;
font-size: clamp(1.75rem, 2.3vw, 2.25rem);
}
.auth-lead {
margin-bottom: 1.5rem;
font-size: 0.925rem;
}
.auth-features {
gap: 0.9rem;
}
}
/* Below 992px there is no brand panel: the form becomes a card on a soft background. */
@media (max-width: 991.98px) {
.auth-main {
padding: 2.5rem 1.25rem;
background:
radial-gradient(40rem 22rem at 50% -8rem, rgba(var(--bs-primary-rgb, 13, 153, 255), 0.12), transparent 70%),
#f4f7fb;
}
.auth-panel {
max-width: 30rem;
padding: 2.25rem 2rem;
border: 1px solid #e6edf5;
border-radius: 1.25rem;
background-color: #fff;
box-shadow: 0 24px 48px -28px rgba(15, 23, 42, 0.35);
}
.auth-logo {
margin: 0 auto 1.75rem;
}
.auth-header {
text-align: center;
}
}
@media (max-width: 575.98px) {
.auth-main {
padding: 1.25rem 0.75rem;
}
.auth-panel {
padding: 1.75rem 1.25rem;
border-radius: 1rem;
}
.auth-title {
font-size: 1.45rem;
}
.auth-subtitle {
margin-bottom: 1.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
.auth-submit.btn,
.auth-toggle,
.auth-field-icon,
.auth-strength span {
transition: none;
}
.auth-submit.btn:hover:not(:disabled) {
transform: none;
}
}
/* ── My Profile (profile/index.blade.php) ────────────────────────────────── */
/* Initial of the user's name in a tinted circle. */
.profile-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 4.5rem;
height: 4.5rem;
border-radius: 50%;
background-color: rgba(var(--bs-primary-rgb, 13, 153, 255), 0.12);
color: var(--bs-primary);
font-size: 1.75rem;
font-weight: 600;
}
.profile-username {
max-width: 28rem;
}
/* ── WhatsApp compose modal (whatsapp/_compose.blade.php) ────────────────── */
/* The template with its variables filled in, shown as the contact will read it. */
.wa-preview {
max-height: 260px;
overflow-y: auto;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
background-color: var(--bs-success-bg-subtle);
color: var(--bs-body-color);
font-size: 0.875rem;
line-height: 1.55;
white-space: pre-wrap;
word-break: break-word;
}
/* Bulk Send with WhatsApp and email: each channel's part gets a heading. */
.bulk-section-title {
margin: 0 0 0.75rem;
padding-top: 1rem;
border-top: 1px solid var(--bs-border-color);
font-size: 0.875rem;
font-weight: 600;
}
/* A template attachment kept on a bulk email; its × leaves it out. */
.bulk-attachment {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.375rem 0.25rem 0.625rem;
border-radius: 1rem;
font-size: 0.8125rem;
background: var(--bs-secondary-bg-subtle);
color: var(--bs-body-color);
}
.bulk-attachment .btn-close {
width: 0.5rem;
height: 0.5rem;
padding: 0.25rem;
background-size: 0.5rem;
}
/* Numbered how-to steps. The theme strips list markers from every
(li { list-style: none }), so an needs them put back explicitly. */
.numbered-steps {
margin: 0;
padding-left: 1.25rem;
}
.numbered-steps > li {
list-style: decimal;
padding-left: 0.25rem;
margin-bottom: 0.5rem;
}
.numbered-steps > li:last-child {
margin-bottom: 0;
}