/* ============================================================
VOCATECH ADMIN PORTAL — 2026 DESIGN PASS
Loaded AFTER v4_shell.css and v4_dashboard.css so it wins
specificity. Brings the portal up to vocatech.com's brand
language and layers the 2026 patterns:
- real brand orange (#F89939, not #F0A030)
- pure white canvas, no gray
- floating sidebar (inset, rounded, shadow)
- topbar hidden; search moves into content
- quiet uppercase labels between nav groups
- rounded 10-12px on cards
- bento grid for dashboard stats
- hero tile with inline sparkline
- split-color greeting ("Good afternoon, Yitz")
- colored dots + pulse for live stats
============================================================ */
/* ============================================================
1. BRAND TOKEN OVERRIDES
============================================================ */
:root {
/* Orange — the REAL brand peach from vocatech.com */
--v4-brand: #F89939;
--v4-brand-hover: #EC8526;
--v4-brand-light: #FBB26A;
--v4-brand-dark: #D97E1F;
--v4-brand-glow: rgba(248, 153, 57, 0.28);
--v4-brand-soft: rgba(248, 153, 57, 0.08);
/* Canvas — pure white everywhere */
--v4-surface: #FFFFFF;
--v4-surface-alt: #F6F8FA;
--v4-surface-warm: #FEF9F1;
/* Lines — ultra-subtle */
--v4-border: #E9ECEF;
--v4-border-light: #F0F1F4;
--v4-sidebar-border: #F0F1F4;
/* Neutral inset backgrounds (for quick action icons, hover states) */
--v4-inset-soft: rgba(14, 39, 73, 0.05);
/* Radii — rounded to match vocatech.com */
--v4-radius-sm: 6px;
--v4-radius: 10px;
--v4-radius-lg: 12px;
--v4-radius-xl: 16px;
/* Shadows — crisp 1px outlines instead of soft diffuse blur.
Cleaner, brighter, less "cloudy" feel. Borrowed from vocatech.com. */
--v4-shadow-sm: inset 0 0 0 1px #ECEFF3;
--v4-shadow: inset 0 0 0 1px #E7EAEF, 0 1px 2px rgba(14, 39, 73, 0.02);
--v4-shadow-card-hover: inset 0 0 0 1px #CBD1DC, 0 10px 30px -10px rgba(14, 39, 73, 0.12);
--v4-shadow-float: inset 0 0 0 1px #ECEFF3, 0 8px 20px -10px rgba(14, 39, 73, 0.10);
/* New tokens for 2026 pass */
--v4-shell-gap: 16px;
--v4-teal: #0EA5A4;
--v4-teal-soft: rgba(14, 165, 164, 0.07);
--v4-teal-line: rgba(14, 165, 164, 0.18);
}
/* ============================================================
2. CANVAS — pure white body
============================================================ */
/* Body bg: don't force white globally — detail pages (AA, HG, CC, etc.)
want dev2's #f3f5f8 gray so their white card frames stand out. The
body:not(#reports) rule in style_override.css sets that. v4-app
is transparent so the body bg shows through. */
body.v4-body .v4-app {
background: transparent;
}
/* ============================================================
3. SHELL — hide topbar, float sidebar, full-height content
============================================================ */
/* Hide the topbar entirely — search moves into the content */
body.v4-body .v4-topbar {
display: none !important;
}
/* Content column: now full-height, no topbar to offset */
body.v4-body .v4-main {
grid-row: 1;
grid-column: 2;
display: flex;
flex-direction: column;
min-width: 0;
}
/* Floating sidebar — inset from edges, rounded, soft shadow */
body.v4-body .v4-app {
grid-template-columns: calc(var(--v4-sidebar-width) + var(--v4-shell-gap) * 2) 1fr;
}
body.v4-body .v4-sidebar {
position: sticky;
top: var(--v4-shell-gap);
margin: var(--v4-shell-gap) 0 var(--v4-shell-gap) var(--v4-shell-gap);
height: calc(100vh - var(--v4-shell-gap) * 2);
width: var(--v4-sidebar-width);
border-radius: var(--v4-radius-lg);
box-shadow: var(--v4-shadow-float);
border-right: none;
}
/* Sidebar brand — no bottom line now that topbar is gone */
body.v4-body .v4-sidebar-brand {
border-bottom: none !important;
padding: 24px 20px 16px !important;
height: auto !important;
}
body.v4-body .v4-sidebar-brand img {
max-height: 34px !important;
width: auto !important;
}
/* Nav: section labels create scannable groups without heavy dividers. */
body.v4-body .v4-nav-section-header {
font-size: 10.5px !important;
line-height: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.09em !important;
text-transform: uppercase !important;
padding: 14px 13px 6px !important;
margin: 0 !important;
height: auto !important;
color: #97A5BA !important;
background: transparent !important;
white-space: nowrap !important;
}
body.v4-body .v4-nav-section-header::before {
display: none !important;
}
body.v4-body .v4-nav-section-header:first-child {
padding-top: 6px !important;
}
/* Keep the label itself responsible for the group spacing. */
body.v4-body .v4-nav-section-header + .v4-nav-item {
margin-top: 0;
}
/* Nav items — hover neutral, active is text color + left bar only (no tint) */
body.v4-body .v4-nav-item {
border-radius: var(--v4-radius-sm);
font-weight: 500;
}
body.v4-body .v4-nav-item:hover {
background: rgba(14, 39, 73, 0.04);
}
body.v4-body .v4-nav-item.is-active {
background: transparent !important;
color: var(--v4-brand) !important;
font-weight: 600;
}
body.v4-body .v4-nav-item.is-active svg,
body.v4-body .v4-nav-item.is-active .v4-nav-item-icon { color: var(--v4-brand) !important; }
body.v4-body .v4-nav-item.is-active::before {
display: block !important;
content: "" !important;
position: absolute !important;
left: -4px !important;
top: 8px !important;
bottom: 8px !important;
width: 2px !important;
background: var(--v4-brand) !important;
border-radius: 0 2px 2px 0 !important;
transform: none !important;
height: auto !important;
}
/* Sidebar company footer — minimal text label, not a button.
Bottom padding bumped (18 → 26) so the logout icon sits well clear of
the floating sidebar's rounded bottom edge — was reading as chopped. */
body.v4-body .v4-sidebar-head-bottom {
border-top: none !important;
padding: 8px 22px 26px !important;
background: transparent !important;
}
body.v4-body .v4-sidebar-head-bottom .v4-sidebar-company {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 4px 0 !important;
cursor: default !important;
display: flex;
align-items: center;
gap: 8px;
}
body.v4-body .v4-sidebar-head-bottom .v4-sidebar-company:hover {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
body.v4-body .v4-sidebar-head-bottom [class*="chevron"],
body.v4-body .v4-sidebar-head-bottom [class*="arrow"] {
display: none !important;
}
/* ============================================================
4. DASHBOARD — new greeting row + bento grid
============================================================ */
/* Give the dashboard some breathing room from the top edge */
body.v4-body .v4-content > .v4-dashboard,
body.v4-body .v4-content > .v4-dashboard-v2 {
padding-top: 8px;
}
body.v4-body .v4-content {
padding-top: 36px !important;
}
/* Greeting row — add search input as a bare text input (no wrapper) */
body.v4-body .v4-dashboard-v2 .v4-dash-hero {
display: flex;
align-items: center;
gap: 28px;
padding-bottom: 0 !important;
margin-bottom: 26px !important;
border-bottom: none !important;
}
body.v4-body .v4-dashboard-v2 .v4-dash-greeting {
flex-shrink: 0;
}
body.v4-body .v4-dashboard-v2 .v4-dash-greeting h1 {
font-size: 30px !important;
/* Lighter weight + lighter color so the greeting reads as a welcome
banner, not a shouting headline. The orange name remains the focal
point and the Vocatech wordmark (top-left) owns the "logo" slot
without the h1 competing. */
font-weight: 400 !important;
letter-spacing: -0.014em !important;
line-height: 1.15 !important;
color: #6B7A90 !important;
margin: 0 !important;
}
/* First name — slightly bolder + a touch darker so it reads as the subject
without colour-clashing with the Vocatech wordmark. Previous orange was
fighting with the logo for the same eye real-estate. */
body.v4-body .v4-dashboard-v2 .v4-dash-greeting h1 .v4-name {
color: #4A5868;
font-style: normal;
font-weight: 600;
letter-spacing: -0.016em;
}
body.v4-body .v4-dashboard-v2 .v4-dash-sub {
font-size: 12.5px !important;
color: var(--v4-text-muted) !important;
margin-top: 5px !important;
font-weight: 500 !important;
}
/* Search input in greeting row — pill-shaped to match the rest of the
dashboard (stat tiles, status pill, live strip).
Specificity + !important note: the global form-input rule in
v4_forms.css is `!important`, which outranks any non-!important rule
regardless of specificity. To win we need BOTH higher specificity
(via #id) AND !important — specificity only tiebreaks between rules
of the same importance level. */
#v4_dash_search {
flex: 1 !important;
min-width: 220px !important;
max-width: 560px !important;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--v4-text) !important;
background: #ffffff url("data:image/svg+xml;utf8,") no-repeat 14px 50% !important;
padding: 10px 18px 10px 38px !important;
border: 1px solid var(--v4-border-light) !important;
border-radius: 999px !important;
outline: none !important;
box-shadow: none !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
#v4_dash_search::placeholder {
color: var(--v4-text-muted);
font-weight: 400;
}
#v4_dash_search:hover { border-color: var(--v4-border) !important; }
#v4_dash_search:focus {
border-color: var(--v4-brand) !important;
box-shadow: 0 0 0 3px rgba(248, 153, 57, 0.15) !important;
}
/* Status pill — use the existing class but refine */
body.v4-body .v4-dashboard-v2 .v4-dash-status {
border-radius: 999px !important;
flex-shrink: 0;
}
/* ============================================================
5. STAT TILES — 4 equal tiles w/ colored left accent bar (master pattern)
Layered with the new 2026 language: rounded, crisp outline, white.
============================================================ */
body.v4-body .v4-dashboard-v2 .v4-dash-tiles {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 14px !important;
margin-bottom: 18px !important;
}
body.v4-body .v4-dashboard-v2 .v4-tile {
background: #FFFFFF !important;
border: none !important;
border-radius: var(--v4-radius-lg) !important;
box-shadow: var(--v4-shadow) !important;
padding: 20px 22px !important;
position: relative;
overflow: hidden;
transition: box-shadow 0.22s ease, transform 0.22s ease !important;
}
body.v4-body .v4-dashboard-v2 .v4-tile:hover {
box-shadow: var(--v4-shadow-card-hover) !important;
transform: translateY(-1px);
}
/* Colored left accent bar — thinner + shorter for a lighter feel */
body.v4-body .v4-dashboard-v2 .v4-tile::before {
display: block !important;
content: "";
position: absolute;
top: 22px;
left: 0;
width: 2px;
height: 22px;
background: var(--accent, var(--v4-navy));
border-radius: 0 2px 2px 0;
}
body.v4-body .v4-dashboard-v2 .v4-tile-total { --accent: var(--v4-brand); }
body.v4-body .v4-dashboard-v2 .v4-tile-in { --accent: #10B981; }
body.v4-body .v4-dashboard-v2 .v4-tile-out { --accent: var(--v4-teal); }
body.v4-body .v4-dashboard-v2 .v4-tile-missed { --accent: var(--v4-amber); }
body.v4-body .v4-dashboard-v2 .v4-tile-missed.is-urgent { --accent: var(--v4-red); }
/* No top-right category dots */
body.v4-body .v4-dashboard-v2 .v4-tile::after {
display: none !important;
}
/* All stat tiles use the same layout — consistent, master-like.
Label (uppercase, gray) → Value (40px navy) → Sub (small muted) */
body.v4-body .v4-dashboard-v2 .v4-tile {
display: flex;
flex-direction: column;
padding: 18px 20px !important;
}
body.v4-body .v4-dashboard-v2 .v4-tile .v4-tile-label {
color: var(--v4-text-muted) !important;
letter-spacing: 0.12em !important;
font-weight: 700 !important;
font-size: 10.5px !important;
text-transform: uppercase;
margin: 0 0 10px !important;
order: 1;
}
body.v4-body .v4-dashboard-v2 .v4-tile .v4-tile-value {
font-size: 38px !important;
font-weight: 600 !important;
letter-spacing: -0.024em !important;
line-height: 1 !important;
color: var(--v4-navy) !important;
font-variant-numeric: tabular-nums;
order: 2;
}
body.v4-body .v4-dashboard-v2 .v4-tile .v4-tile-sub {
font-size: 12px !important;
color: var(--v4-text-muted) !important;
margin-top: 8px !important;
font-weight: 500 !important;
order: 3;
}
body.v4-body .v4-dashboard-v2 .v4-tile .v4-tile-sub b { color: var(--v4-text-secondary); font-weight: 600; }
/* Hide sparkline SVG — we're back to the clean master tile pattern */
body.v4-body .v4-dashboard-v2 .v4-sparkline { display: none !important; }
/* Pulse the Missed tile's dot when urgent (unreturned > 0) */
body.v4-body .v4-dashboard-v2 .v4-tile-missed.is-urgent::after {
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
animation: v4Pulse 2.2s infinite;
}
@keyframes v4Pulse {
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
70% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); }
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
/* ============================================================
6. AI INSIGHT — clean white, no gradient wash (less cloudy)
============================================================ */
body.v4-body .v4-dashboard-v2 .v4-insight {
background: #FFFFFF !important;
border: none !important;
border-radius: var(--v4-radius-lg) !important;
box-shadow: var(--v4-shadow) !important;
padding: 20px 24px 22px !important;
position: relative;
overflow: hidden;
margin-bottom: 18px !important;
}
/* Tone variants — the base !important ruleset above flattened warn/urgent
back to white, which left a lot of unreturned callbacks looking as
calm as a clean slate. Restore the tinted gradient + coloured left
rail for warn/urgent with matching specificity. */
body.v4-body .v4-dashboard-v2 .v4-insight.tone-warn {
background: linear-gradient(135deg, #ffffff 0%, #ffedd5 100%) !important;
box-shadow: 0 8px 22px -14px rgba(249, 115, 22, 0.55), var(--v4-shadow) !important;
}
body.v4-body .v4-dashboard-v2 .v4-insight.tone-urgent {
background: linear-gradient(135deg, #ffffff 0%, #fee2e2 100%) !important;
box-shadow: 0 8px 22px -14px rgba(239, 68, 68, 0.55), var(--v4-shadow) !important;
}
body.v4-body .v4-dashboard-v2 .v4-insight::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--v4-teal);
border-radius: var(--v4-radius-lg) 0 0 var(--v4-radius-lg);
}
body.v4-body .v4-dashboard-v2 .v4-insight.tone-warn::before { background: #f97316; width: 5px; }
body.v4-body .v4-dashboard-v2 .v4-insight.tone-urgent::before { background: #ef4444; width: 5px; }
body.v4-body .v4-dashboard-v2 .v4-insight.tone-warn .v4-insight-eyebrow { background: #fff1e6; color: #c2410c; }
body.v4-body .v4-dashboard-v2 .v4-insight.tone-urgent .v4-insight-eyebrow { background: #fee2e2; color: #b91c1c; }
body.v4-body .v4-dashboard-v2 .v4-insight-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 8px;
border-radius: 999px;
background: var(--v4-teal-soft);
color: #0B6F6E;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
body.v4-body .v4-dashboard-v2 .v4-insight-eyebrow svg {
width: 11px; height: 11px;
color: var(--v4-teal);
}
body.v4-body .v4-dashboard-v2 .v4-insight h2 {
font-size: 16px !important;
font-weight: 600 !important;
color: var(--v4-navy) !important;
margin: 10px 0 6px !important;
line-height: 1.35 !important;
}
body.v4-body .v4-dashboard-v2 .v4-insight-body {
font-size: 13.5px !important;
color: var(--v4-text-secondary) !important;
line-height: 1.5 !important;
margin: 0 0 12px !important;
font-weight: 500 !important;
}
body.v4-body .v4-dashboard-v2 .v4-insight-cta {
display: inline-flex !important;
align-items: center;
gap: 7px;
padding: 9px 16px 9px 18px !important;
background: var(--v4-brand) !important;
color: #fff !important;
border: 0 !important;
border-radius: var(--v4-radius-sm) !important;
font-size: 12.5px !important;
font-weight: 600 !important;
text-decoration: none !important;
box-shadow: 0 6px 14px -4px var(--v4-brand-glow) !important;
transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}
body.v4-body .v4-dashboard-v2 .v4-insight-cta:hover {
background: var(--v4-brand-hover) !important;
box-shadow: 0 10px 20px -4px var(--v4-brand-glow) !important;
}
/* ============================================================
7. TOOLKIT CARD — rounded, soft shadow
============================================================ */
body.v4-body .v4-dashboard-v2 .v4-dash-card,
body.v4-body .v4-dashboard-v2 .v4-toolkit-card,
body.v4-body .v4-dashboard-v2 .v4-quick-card {
background: #FFFFFF !important;
border: none !important;
border-radius: var(--v4-radius-lg) !important;
box-shadow: var(--v4-shadow) !important;
}
/* Toolkit tiles: slight inner cards with rounded corners */
body.v4-body .v4-dashboard-v2 .v4-toolkit-tile {
border-radius: var(--v4-radius) !important;
transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
}
body.v4-body .v4-dashboard-v2 .v4-toolkit-tile:hover {
box-shadow: var(--v4-shadow) !important;
transform: translateY(-1px);
}
/* Quick action rows + neutralize the orange icon tile on "Reset a password" */
body.v4-body .v4-dashboard-v2 .v4-quick-card a,
body.v4-body .v4-dashboard-v2 .v4-quick-item {
border-radius: var(--v4-radius-sm) !important;
}
body.v4-body .v4-dashboard-v2 .v4-quick-password .v4-quick-icon,
body.v4-body .v4-dashboard-v2 .v4-quick-icon {
background: var(--v4-inset-soft) !important;
color: var(--v4-text-secondary) !important;
}
/* ============================================================
9. LIST PAGES (extensions, AAs, HGs, CCs) — rounded, soft shadow
User wanted this "more roundish to match" the new design.
============================================================ */
body.v4-body .v4-list-row {
border-radius: 8px !important;
}
/* List-page toolbar + table: one continuous card with 16px radii
(currently 4px → feels square). Soft shadow so it pops like the
Reports page rows. */
body.v4-body .v4-list-toolbar {
border-radius: 8px 8px 0 0 !important;
background: #FFFFFF !important;
border: 1px solid #DDE7F1 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
body.v4-body .v4-list-table-wrap {
border-radius: 0 0 8px 8px !important;
background: #FFFFFF !important;
border: 1px solid #DDE7F1 !important;
border-top: 0 !important;
box-shadow: none !important;
}
/* When the page has NO toolbar (edge case), single-card treatment */
body.v4-body .v4-list > .v4-list-table-wrap:first-of-type {
border-radius: 8px !important;
border-top: 1px solid #DDE7F1 !important;
}
/* Individual row hover — small feedback */
body.v4-body .v4-list-table-wrap tbody tr {
transition: background-color 0.12s ease !important;
}
body.v4-body .v4-list-table-wrap tbody tr:hover {
background: rgba(248, 153, 57, 0.03) !important;
}
/* ============================================================
10. REPORTS PAGE — inline toolbar (search + date picker) lives
in the content area as a floating white card, matching the
2026 design. Vue's mounts via #header_app.
============================================================ */
body#reports.v4-body {
background: #FFFFFF !important;
}
body#reports.v4-body .v4-app {
background: #FFFFFF;
}
/* Inline toolbar wrapper — clean white card above the Live Calls bar.
All controls grouped on the right: [icons] [date] [search].
The JS in main_template_v3.php moves .reports-icon-bar INSIDE the
Vue .reports-header-controls-row after Vue mounts. */
body#reports.v4-body .v4-reports-toolbar {
background: #FFFFFF;
border-radius: var(--v4-radius-lg);
box-shadow: var(--v4-shadow);
padding: 10px 14px;
margin-bottom: 14px;
position: relative;
z-index: 20;
display: flex !important;
align-items: center;
justify-content: flex-end;
gap: 14px;
}
/* Vue's filter section houses the controls row — right-align its contents */
body#reports.v4-body .v4-reports-toolbar .filter-sec,
body#reports.v4-body .v4-reports-toolbar .filter_sec_plain {
display: flex !important;
justify-content: flex-end !important;
margin-left: auto;
}
body#reports.v4-body .v4-reports-toolbar .reports-header-controls-row,
body#reports.v4-body .v4-reports-toolbar .row {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 6px !important;
margin: 0 !important;
flex-wrap: nowrap !important;
}
/* Kill the legacy 5px margins on the date/search pills so every toolbar
gap is exactly 6px — tighter rhythm, pills feel like a pair instead
of floating far apart from each other. */
body#reports.v4-body .v4-reports-toolbar .reports-toolbar-trigger-date,
body#reports.v4-body .v4-reports-toolbar .reports-toolbar-trigger-search {
margin: 0 !important;
}
/* Strip the legacy .header-box / navbar styling that reports.css layers
onto the search region when it was in the topbar — we want a clean
inline look, not a duplicate bootstrap navbar. */
body#reports.v4-body .v4-reports-toolbar .header,
body#reports.v4-body .v4-reports-toolbar > .header {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
body#reports.v4-body .v4-reports-toolbar .container-box {
padding: 0 !important;
margin: 0 !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
}
body#reports.v4-body .v4-reports-toolbar .navbar {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
/* The mobile/expanded navbar collapse panel is unused in this inline layout */
body#reports.v4-body .v4-reports-toolbar .navbar-toggler { display: none !important; }
body#reports.v4-body .v4-reports-toolbar .navbar-collapse { display: none !important; }
/* Hide the Calling / Messaging channel-toggle tabs — feature sunsetting soon */
body#reports.v4-body .channel-toggle-btn,
body#reports.v4-body .reports-header-channel-btn,
body#reports.v4-body [class*="channel-toggle"] {
display: none !important;
}
/* === Date + Search triggers — ghost icon buttons. Transparent by default
so they blend with the toolbar; hover gives a soft wash; active
(dropdown open) fills with brand peach soft. === */
body#reports.v4-body .v4-reports-toolbar .reports-toolbar-trigger {
background: transparent !important;
border: 0 !important;
border-radius: var(--v4-radius-sm) !important;
padding: 6px 10px !important;
height: 30px !important;
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
cursor: pointer;
color: var(--v4-text-secondary) !important;
box-shadow: none !important;
transition: background 0.15s ease, color 0.15s ease;
}
body#reports.v4-body .v4-reports-toolbar .reports-toolbar-trigger:hover {
background: var(--v4-inset-soft) !important;
color: var(--v4-navy) !important;
}
body#reports.v4-body .v4-reports-toolbar .reports-toolbar-trigger.active {
background: var(--v4-brand-soft) !important;
color: var(--v4-brand) !important;
}
/* Vertical separator between the view-icon cluster and the date/search
pills — absolutely positioned at the midpoint of the 10px flex gap
between icon-bar and the date pill. Being absolute means it doesn't
consume flex space, so all toolbar gaps stay uniform 10px:
[last view icon] 10px [calendar] 10px [search]
with the divider visually centered in the first 10px. */
body#reports.v4-body .v4-reports-toolbar .reports-icon-bar {
position: relative !important;
padding-right: 0 !important;
}
body#reports.v4-body .v4-reports-toolbar .reports-icon-bar::after {
content: "";
position: absolute;
right: -3px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 18px;
background: #D6DAE0;
}
body#reports.v4-body .v4-reports-toolbar .reports-toolbar-trigger-date {
position: relative;
margin-left: 0 !important;
}
/* Kill every child wrapper's own chrome — but leave the ICON IMAGE alone */
body#reports.v4-body .v4-reports-toolbar .reports-toolbar-trigger svg,
body#reports.v4-body .v4-reports-toolbar .reports-toolbar-trigger button,
body#reports.v4-body .v4-reports-toolbar .reports-toolbar-trigger > div,
body#reports.v4-body .v4-reports-toolbar .reports-toolbar-trigger > span {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
color: inherit !important;
}
/* Explicit sizing on the icon image — direct-child img that renders the
calendar/search glyph. Don't reset this to auto or it collapses to 0. */
body#reports.v4-body .v4-reports-toolbar .reports-toolbar-trigger > img,
body#reports.v4-body .v4-reports-toolbar .reports-toolbar-trigger img.reports-toolbar-icon,
body#reports.v4-body .v4-reports-toolbar .reports-toolbar-trigger .reports-toolbar-icon {
width: 14px !important;
height: 14px !important;
display: inline-block !important;
flex-shrink: 0 !important;
opacity: 0.75;
vertical-align: middle;
}
body#reports.v4-body .v4-reports-toolbar .reports-toolbar-trigger.active .reports-toolbar-icon {
opacity: 1;
}
/* Icon-only pills — no labels. Square hit-target around each 14px icon.
Labels removed so the pills blend in with the view-icon cluster. */
body#reports.v4-body .v4-reports-toolbar .reports-toolbar-trigger-date,
body#reports.v4-body .v4-reports-toolbar .reports-toolbar-trigger-search {
padding: 7px 9px !important;
width: 32px;
height: 32px;
justify-content: center !important;
}
body#reports.v4-body .v4-reports-toolbar .reports-toolbar-trigger-date::after,
body#reports.v4-body .v4-reports-toolbar .reports-toolbar-trigger-search::after {
content: none !important;
display: none !important;
}
/* === Search dropdown: anchor directly below the search trigger icon,
right-aligned so the popup's right edge lines up with the trigger's
right edge. The popup's parent (.reports-toolbar-trigger-search) is
already position:relative, so position:absolute picks it up as the
containing block — no need for fixed-positioning magic.
Earlier this was fixed-positioned to viewport-right 28px, which
worked when the toolbar lived in the topbar but floats far from
the trigger now that the toolbar is inline.
IMPORTANT: .input-group.thin.mb-3 (the middle wrapper) had
position:absolute + overflow:hidden + 0×0 dimensions, making it the
popup's containing block and clipping everything. Reset it to static
+ visible so the popup's containing block falls through to the
trigger div. */
body#reports .reports-toolbar-trigger-search .input-group,
body#reports .reports-toolbar-trigger-search .input-group.thin,
body#reports .reports-toolbar-trigger-search .input-group.thin.mb-3 {
position: static !important;
overflow: visible !important;
width: auto !important;
margin: 0 !important;
}
/* Reports template renders .reports-icon-bar in TWO places:
1. Inside .v4-reports-toolbar at the very top (the proper place for v4)
2. Inside an inline .container-box between the tiles and the chart/stats
flip panel — legacy placement from before the v4 toolbar existed.
Users see (2) as a visual "line/strip" between the stat tiles and the
call log. Hide the duplicate — the v4 toolbar at the top already
exposes every one of these buttons with the same Vue bindings. */
body#reports.v4-body .reports-icon-bar {
display: none !important;
}
body#reports.v4-body .v4-reports-toolbar .reports-icon-bar {
display: inline-flex !important;
}
/* Same story for the container-box wrapper around the duplicate icon bar
— the wrapper itself has top/bottom padding that adds to the visible
strip even if the icons are hidden. Collapse its box completely. */
body#reports.v4-body .v4-content .container-box:has(> .reports-icon-bar) {
display: none !important;
}
body#reports .reports-toolbar-trigger-search .search_dropdown,
body#reports .reports-toolbar-trigger-search .reports-toolbar-dropdown,
body#reports .reports-toolbar-trigger-search .reports-toolbar-search-dropdown {
position: absolute !important;
top: calc(100% + 8px) !important;
right: 0 !important;
left: auto !important;
transform: none !important;
width: 420px !important;
max-width: calc(100vw - 56px) !important;
max-height: calc(100vh - 110px) !important;
overflow-y: auto !important;
z-index: 1100 !important;
}
/* Vue date-range picker: sits inside the toolbar, anchor right. Kept as
fixed because its section wrapper is positioned via inline style from
the Vue component's datepicker_position_style (now using viewport
coords after the elOffset fix). */
body#reports.v4-body .v4-reports-toolbar .daterangepicker {
right: 28px !important;
left: auto !important;
top: 86px !important;
position: fixed !important;
z-index: 1100 !important;
}
/* === Search dropdown: clean white panel, no gray === */
body#reports .search_dropdown,
body#reports .reports-toolbar-dropdown,
body#reports .reports-toolbar-search-dropdown {
background: #FFFFFF !important;
border: 1px solid var(--v4-border) !important;
border-radius: var(--v4-radius) !important;
box-shadow: 0 12px 32px -8px rgba(14, 39, 73, 0.14), 0 1px 2px rgba(14, 39, 73, 0.04) !important;
padding: 14px !important;
min-width: 360px !important;
margin-top: 6px !important;
}
body#reports .search_dropdown .input-group,
body#reports .search_dropdown .input-group.thin,
body#reports .reports-toolbar-dropdown .input-group {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
margin-bottom: 10px !important;
}
body#reports .search_dropdown input[type="text"],
body#reports .search_dropdown .form-control,
body#reports .reports-toolbar-search-input,
body#reports .search_dropdown .reports-toolbar-search-input {
background: #FFFFFF !important;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--v4-text) !important;
border: 1px solid var(--v4-border) !important;
border-radius: var(--v4-radius-sm) !important;
padding: 9px 12px !important;
outline: none !important;
box-shadow: none !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
body#reports .search_dropdown input[type="text"]:focus,
body#reports .search_dropdown .form-control:focus,
body#reports .reports-toolbar-search-input:focus {
border-color: var(--v4-brand) !important;
box-shadow: 0 0 0 3px var(--v4-brand-glow) !important;
}
body#reports .search_dropdown input[type="text"]::placeholder,
body#reports .search_dropdown .form-control::placeholder {
color: var(--v4-text-muted) !important;
font-weight: 400 !important;
}
/* Kill the bootstrap input-group-text / input-group-append gray chrome */
body#reports .search_dropdown .input-group-text,
body#reports .search_dropdown .input-group-append,
body#reports .search_dropdown .input-group-prepend {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
/* Checkboxes in search: clean label + subtle alignment */
body#reports .search_dropdown label,
body#reports .search_dropdown .form-check,
body#reports .search_dropdown .form-check-label {
color: var(--v4-text-secondary) !important;
font-size: 13px !important;
font-weight: 500 !important;
background: transparent !important;
}
/* ============================================================
11. AI CALL SUMMARY — decorate the EXISTING Vue-rendered
.transcription_section cell (which holds real summary text
in .info_content_box when segment.summary is available).
JS injects a purple eyebrow "AI Call Summary · Preview" bar
at the top of the cell; everything else is pure CSS styling.
============================================================ */
/* AI summary section — sits below Call Journey inside the SAME card.
Less indented (40px vs journey's 90px) so the hierarchy reads as:
journey = deep nested sub-detail, summary = main takeaway section. */
body#reports.v4-body .call-logs-section .tbody-white > tr.call_row_details.show > td.transcription_section {
padding: 16px 24px 20px 40px !important;
background: #FFFFFF !important;
position: relative !important;
}
body#reports.v4-body .v4-ai-summary-eyebrow-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
body#reports.v4-body .v4-ai-summary-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10.5px;
font-weight: 700;
color: #6D28D9;
letter-spacing: 0.14em;
text-transform: uppercase;
}
body#reports.v4-body .v4-ai-summary-eyebrow svg {
color: #6D28D9;
}
/* "View Transcription" button on the right side of the AI eyebrow bar.
Clean ghost-style CTA that unlocks the full transcription row. */
body#reports.v4-body .v4-transcription-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 11.5px;
font-weight: 600;
color: #6D28D9;
background: rgba(139, 92, 246, 0.08);
border: 1px solid rgba(139, 92, 246, 0.18);
border-radius: 999px;
padding: 4px 11px 4px 10px;
cursor: pointer;
letter-spacing: 0.01em;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body#reports.v4-body .v4-transcription-btn:hover {
background: rgba(139, 92, 246, 0.14);
border-color: rgba(139, 92, 246, 0.3);
color: #5B21B6;
}
body#reports.v4-body .v4-transcription-btn.active {
background: #6D28D9;
border-color: #6D28D9;
color: #FFFFFF;
}
body#reports.v4-body .v4-transcription-btn svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
body#reports.v4-body .info_content_box {
font-size: 13.5px !important;
color: var(--v4-text) !important;
line-height: 1.6 !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
font-weight: 500 !important;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
/* Transcription header row: "Transcription: " on the left, copy
button on the right. Same visual rhythm as the AI Summary eyebrow. */
body#reports.v4-body .transcription_header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
}
body#reports.v4-body .transcription_header_left {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: var(--v4-text-secondary);
font-size: 12.5px;
}
body#reports.v4-body .v4-transcription-copy-btn {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 11.5px;
font-weight: 600;
color: var(--v4-text-secondary);
background: rgba(14, 39, 73, 0.04);
border: 1px solid rgba(14, 39, 73, 0.10);
border-radius: 999px;
padding: 4px 11px 4px 9px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body#reports.v4-body .v4-transcription-copy-btn:hover {
background: rgba(14, 39, 73, 0.07);
border-color: rgba(14, 39, 73, 0.18);
color: var(--v4-text);
}
body#reports.v4-body .v4-transcription-copy-btn.is-copied {
background: rgba(16, 185, 129, 0.12);
border-color: rgba(16, 185, 129, 0.4);
color: #047857;
}
body#reports.v4-body .v4-transcription-copy-btn svg {
flex-shrink: 0;
}
/* "Loading summary..." states get a subtle italic treatment */
body#reports.v4-body tr.call_row_details.show > td.transcription_section > div:not(.v4-ai-summary-eyebrow-bar):not(.info_content_box) {
font-size: 12.5px;
color: var(--v4-text-muted);
font-style: italic;
}
/* === Icon bar, now moved INTO the top toolbar by JS ===
No separate card wrapper; sits inline on the left of the toolbar.
Icons are muted by default so they don't compete with the date /
search pills; hover + active states gain presence. */
body#reports.v4-body .v4-reports-toolbar .reports-icon-bar {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
gap: 2px !important;
flex-shrink: 0;
}
body#reports.v4-body .v4-reports-toolbar .reports-icon-bar .icon-btn {
border-radius: var(--v4-radius-sm) !important;
color: #9BA4B1 !important; /* subtle muted default */
padding: 6px !important;
transition: background 0.15s ease, color 0.15s ease !important;
}
body#reports.v4-body .v4-reports-toolbar .reports-icon-bar .icon-btn:hover {
background: var(--v4-inset-soft) !important;
color: var(--v4-navy) !important;
}
body#reports.v4-body .v4-reports-toolbar .reports-icon-bar .icon-btn.active,
body#reports.v4-body .v4-reports-toolbar .reports-icon-bar .icon-btn[aria-pressed="true"] {
background: var(--v4-brand-soft) !important;
color: var(--v4-brand) !important;
}
/* Hide any stale/residual .reports-icon-bar that may still exist in
original position before the JS relocation fires */
body#reports.v4-body .v4-content > .reports-icon-bar,
body#reports.v4-body .v4-content .call_stats ~ .reports-icon-bar {
display: none !important;
}
/* ============================================================
11a. DETAIL PAGES — dev2's two-tier nested-frame look
Every detail page (Auto Attendants, Hunt Groups, Call Centers,
Extensions, Settings) uses the same anatomy:
OUTER CARD = .setting_section.form_container
(#profile-section, #business, #after-hours,
#holiday, #submenu) + #advanced
→ 18px radius, 1px border, soft drop shadow
INNER FRAME = .aa-unified-shell--X or #alternative_number
→ 16px radius, 1px border, soft shadow, indented
All middle wrappers (.setting_box, .extension, .form_section,
, .toggle_header) are transparent — pure layout carriers.
Selectors are written to tie v4_forms.css on specificity so our
later cascade position wins.
============================================================ */
/* ---------- OUTER CARD: one per accordion section ----------
Container IDs vary by page:
AA → #auto_attendant_app HG → #hunt_group_app
CC → #call_center_app Ext → #extension_app
Settings → #settings_app
Section IDs vary too — AA uses #profile-section, Ext uses #profile.
We use [id$="_app"] for the parent so every detail container matches,
and enumerate every accordion section ID so bare