/* ============================================================
BizSense Theme Engine — _base.css
Override layer. Loaded AFTER material-dashboard.css.
IMPORTANT: every visual rule is scoped under `body.bz-themed`,
so when NO theme is chosen ("מקורי") the system looks 100% original.
The switcher adds/removes `bz-themed` on .
Pure CSS. Animate only transform/opacity. Respects reduced-motion.
============================================================ */
:root {
--bz-primary: #eb5b49;
--bz-primary-2: #d8412f;
--bz-accent: #00acc1;
--bz-bg: #f3f4f8;
--bz-bg-2: #e9ebf3;
--bz-text: #3C4858;
--bz-card-bg: #ffffff;
--bz-bg-image: radial-gradient(circle at 18% 12%, rgba(235,91,73,.05), transparent 42%);
--bz-bg-texture: none;
--bz-card-bg-final: var(--bz-card-bg);
--bz-card-radius: 10px;
--bz-card-border: 1px solid rgba(0,0,0,.04);
--bz-card-shadow: 0 6px 22px -8px rgba(20,30,60,.22);
--bz-card-hover-shadow: 0 14px 34px -10px rgba(20,30,60,.32);
--bz-card-pad: 18px;
--bz-card-gap: 22px;
--bz-font: 'Heebo','Rubik',sans-serif;
--bz-font-head: var(--bz-font);
--bz-head-weight: 700;
--bz-head-spacing: normal;
--bz-sidebar: var(--bz-primary);
--bz-sidebar-2: var(--bz-primary-2);
--bz-sidebar-opacity:.95;
--bz-anim-dur: .3s;
--bz-anim-ease: cubic-bezier(.4,0,.2,1);
--bz-card-in-dur: .5s;
}
/* ===== Smooth re-skin transition ===== */
body.bz-themed, body.bz-themed .card, body.bz-themed .card [data-background-color],
body.bz-themed .sidebar .sidebar-wrapper, body.bz-themed .btn {
transition: background-color var(--bz-anim-dur) var(--bz-anim-ease),
background var(--bz-anim-dur) var(--bz-anim-ease),
color var(--bz-anim-dur) var(--bz-anim-ease),
border-color var(--bz-anim-dur) var(--bz-anim-ease),
border-radius var(--bz-anim-dur) var(--bz-anim-ease),
/* transform must be in the list — otherwise the :hover translateY(-3px) lift
SNAPS instantly while box-shadow animates, reading as a 1px "jump" in
.card-content (only in themed mode, where the hover-lift rule exists). */
transform var(--bz-anim-dur) var(--bz-anim-ease),
box-shadow var(--bz-anim-dur) var(--bz-anim-ease);
}
/* ===== Global background: texture + atmosphere glow + base gradient ===== */
body.bz-themed {
background-color: var(--bz-bg);
background-image: var(--bz-bg-texture), var(--bz-bg-image),
linear-gradient(160deg, var(--bz-bg) 0%, var(--bz-bg-2) 100%);
background-size: var(--bz-bg-texture-size, auto), auto, auto;
background-attachment: fixed;
color: var(--bz-text);
font-family: var(--bz-font);
}
/* ===== Display font only on real titles; numbers/labels stay sans ===== */
body.bz-themed .card-header .card-title,
body.bz-themed .main-panel > .navbar .navbar-brand,
body.bz-themed .bz-section-title,
body.bz-themed h2.title, body.bz-themed h3.title {
font-family: var(--bz-font-head);
font-weight: var(--bz-head-weight);
letter-spacing: var(--bz-head-spacing);
}
body.bz-themed .card-stats .card-title,
body.bz-themed .card-content .card-title,
body.bz-themed .card .category,
body.bz-themed .form-group label, body.bz-themed .control-label,
body.bz-themed .stats, body.bz-themed table, body.bz-themed .table {
font-family: 'Rubik','Heebo',sans-serif !important;
}
/* ===== Card cube ===== */
body.bz-themed .card {
background: var(--bz-card-bg-final);
border: var(--bz-card-border);
border-radius: var(--bz-card-radius);
box-shadow: var(--bz-card-shadow);
margin-bottom: var(--bz-card-gap);
filter: none !important; /* kill leftover blur from matrix-enter animation */
}
body.bz-themed .card .card-content,
body.bz-themed .card .card-body { padding: var(--bz-card-pad); }
/* hover gives feedback via shadow only — no translateY, which caused the
~1px text jump inside .card-content on mouse-over (themed mode only). */
body.bz-themed .card:hover { box-shadow: var(--bz-card-hover-shadow); }
/* ===== Brand-colored headers follow the theme ===== */
body.bz-themed .card [data-background-color="bizsense"],
body.bz-themed .card [data-background-color="red"],
body.bz-themed .card [data-background-color="purple"] {
background: linear-gradient(60deg, var(--bz-primary), var(--bz-primary-2)) !important;
}
/* ===== Primary buttons ===== */
body.bz-themed .btn.btn-primary, body.bz-themed .btn.btn-rose, body.bz-themed .btn.btn-fill.btn-primary {
background-color: var(--bz-primary) !important;
border-radius: calc(var(--bz-card-radius) * .6);
}
/* ===== Sidebar fully follows the theme ===== */
body.bz-themed .sidebar {
background: linear-gradient(180deg, var(--bz-sidebar), var(--bz-sidebar-2)) !important;
}
body.bz-themed .sidebar .sidebar-background { background-image: none !important; }
body.bz-themed .sidebar .sidebar-background:after,
body.bz-themed .sidebar[data-background-color] .sidebar-background:after {
background: linear-gradient(180deg, var(--bz-sidebar), var(--bz-sidebar-2)) !important;
opacity: var(--bz-sidebar-opacity) !important;
}
body.bz-themed .sidebar .nav li > a { color: rgba(255,255,255,.92) !important; }
body.bz-themed .sidebar .nav li > a i { color: rgba(255,255,255,.9) !important; }
/* active/hover use variables so HOLLOW themes (white sidebar) can override the
text to dark — otherwise white-on-white was unreadable on mouse-over. Colored
themes keep the white default. */
body.bz-themed .sidebar .nav li.active > a,
body.bz-themed .sidebar .nav li:hover > a {
background: var(--bz-sidebar-hover-bg, rgba(255,255,255,.16)) !important;
color: var(--bz-sidebar-hover-text, #fff) !important;
}
body.bz-themed .sidebar .nav li:hover > a i {
color: var(--bz-sidebar-hover-text, #fff) !important;
}
body.bz-themed .sidebar .user .info a, body.bz-themed .sidebar .simple-text { color:#fff !important; }
/* ===== Client-card tab strip — themed "moving-tab" that chases the active tab =====
The legacy Material wizard renders an absolutely-positioned .moving-tab that
slides under the active tab (its left/width is set by the wizard JS, and it
already matches the active tab's box). We KEEP it as the single visible
highlight: paint it with the theme gradient, give it a smooth slide, and align
it to the tab box. The active tab's own stays TRANSPARENT so we don't get a
double highlight — only the moving-tab shows, and it follows the clicked tab. */
body.bz-themed .moving-tab {
display: block !important;
background: linear-gradient(60deg, var(--bz-primary), var(--bz-primary-2)) !important;
/* the wizard JS COPIES the active tab's label+icon into the moving-tab; that
duplicate text sits under the real tab label and shows as ghosted/doubled
text. Hide it: make the moving-tab's own text invisible (zero-size, clipped)
so the box is a PURE highlight and only the real label is visible. */
color: transparent !important;
font-size: 0 !important;
text-indent: -9999px !important;
overflow: hidden !important;
box-shadow: 0 4px 12px -4px var(--bz-primary) !important;
border-radius: calc(var(--bz-card-radius) * .5) !important;
border: 0 !important;
/* align the box precisely to the active tab. The JS sets left/width;
use top:0/bottom:0 so the highlight fills the full nav-pills height
instead of a fixed px value that was shorter than the actual tab row. */
top: 0 !important;
bottom: 0 !important;
height: auto !important;
line-height: normal !important;
margin-top: 0 !important;
padding: 0 !important;
/* smooth chase; the JS sets transform (translateX) + width to the active tab */
transition: transform .28s var(--bz-anim-ease), width .28s var(--bz-anim-ease) !important;
z-index: 1 !important; /* under the tab labels, over the strip */
}
/* hide the copied icon/label inside the moving-tab entirely (no ghost text) */
body.bz-themed .moving-tab * { display: none !important; }
/* the active tab text rides ON TOP of the moving-tab and stays white & readable.
No background on the itself -> the moving-tab is the only highlight box. */
body.bz-themed .nav-pills > li > a { position: relative; z-index: 2; }
body.bz-themed .nav-pills > li.active > a,
body.bz-themed .nav-pills > li.active > a:hover,
body.bz-themed .nav-pills > li.active > a:focus,
body.bz-themed .wizard-card .nav-pills > li.active > a {
background: transparent !important;
color: #fff !important;
box-shadow: none !important;
}
body.bz-themed .nav-pills > li.active > a *,
body.bz-themed .wizard-card .nav-pills > li.active > a * { color: #fff !important; }
body.bz-themed .wizard-card[data-color="orange"] .choice:hover .icon,
body.bz-themed .wizard-card[data-color="orange"] .choice.active .icon {
border-color: var(--bz-primary) !important; color: var(--bz-primary) !important;
}
/* ===== Top navbar accent ===== */
body.bz-themed .main-panel > .navbar { border-top: 3px solid var(--bz-primary); }
/* ---- Top navbar stays on a single row; WhatsApp & icons never wrap/shift it ---- */
body.bz-themed .main-panel > .navbar .navbar-nav,
body.bz-themed .main-panel > .navbar .container-fluid { flex-wrap: nowrap !important; }
body.bz-themed .main-panel > .navbar .fab.fa-whatsapp,
body.bz-themed .main-panel > .navbar [class*="whatsapp"] { vertical-align: middle; }
body.bz-themed .main-panel > .navbar { overflow: visible !important; }
/* ===== Inputs / focus ===== */
body.bz-themed .form-group.is-focused .form-control,
body.bz-themed .form-control:focus { border-color: var(--bz-accent) !important; }
body.bz-themed .form-group.is-focused label,
body.bz-themed .form-group.is-focused .control-label { color: var(--bz-accent) !important; }
body.bz-themed a:hover, body.bz-themed a:focus { color: var(--bz-primary); }
/* NOTE: we intentionally do NOT add our own card entrance animation —
the system already has a "matrix-enter" intro that briefly blurs cards.
Adding another animation made the blur stick. Keep cards crisp. */
body.bz-themed .card,
body.bz-themed .main-panel .card { filter: none !important; }
/* ============================================================
GLOBAL UX REFINE (only when a theme is active)
============================================================ */
body.bz-themed .main-panel .card {
box-shadow: 0 1px 3px rgba(20,30,60,.06), 0 6px 16px -10px rgba(20,30,60,.18) !important;
border: 1px solid rgba(20,30,60,.06);
}
/* ---- KPI icon-chip ---- */
body.bz-themed .deshboard .card-stats .card-header {
background: transparent !important; box-shadow: none !important; border-radius: 10px !important;
width: 40px !important; height: 40px !important; min-width: 40px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
float: none !important; margin: 0 !important; flex: 0 0 auto;
}
body.bz-themed .deshboard .card-stats .card-header i,
body.bz-themed .deshboard .card-stats .card-header i i {
font-size: 17px !important; width: auto !important; height: auto !important; line-height: 1 !important;
}
body.bz-themed .deshboard .card-stats .card-header[data-background-color="green"] { background: rgba(67,160,71,.13) !important; }
body.bz-themed .deshboard .card-stats .card-header[data-background-color="green"] i { color:#2e9e4f !important; }
body.bz-themed .deshboard .card-stats .card-header[data-background-color="red"] { background: rgba(233,105,80,.13) !important; }
body.bz-themed .deshboard .card-stats .card-header[data-background-color="red"] i { color:#e0533a !important; }
body.bz-themed .deshboard .card-stats .card-header[data-background-color="orange"] { background: rgba(251,140,0,.14) !important; }
body.bz-themed .deshboard .card-stats .card-header[data-background-color="orange"] i { color:#f08c00 !important; }
body.bz-themed .deshboard .card-stats .card-header[data-background-color="purple"] { background: rgba(124,77,160,.13) !important; }
body.bz-themed .deshboard .card-stats .card-header[data-background-color="purple"] i { color:#7c4da0 !important; }
body.bz-themed .deshboard .card-stats .card-header .fa-amazon-pay::before { content: "\f0d6" !important; }
/* ---- KPI layout: icon + text aligned (RTL); number is the hero ----
Zoom-resilient: uses clamp() so the card and fonts scale with the viewport
instead of fixed px that balloon at high browser zoom / Windows scaling. */
body.bz-themed .deshboard .card-stats {
display: flex !important; flex-direction: row-reverse !important;
align-items: center !important; gap: 10px !important;
padding: clamp(10px, 1.1vw, 16px) clamp(12px, 1.2vw, 18px) !important;
min-height: 88px !important; height: auto !important; /* flexible: never clips, never balloons */
overflow: hidden !important; box-sizing: border-box !important;
}
/* every KPI column the same min-height so cards line up perfectly */
body.bz-themed .deshboard [name="div_income"] .col-lg-2,
body.bz-themed .deshboard .row > [class*="col-"] > .card-stats { min-height: 88px !important; height: auto !important; }
body.bz-themed .deshboard .card-stats .card-content {
padding: 0 !important; flex: 1 1 auto; min-width: 0 !important; /* min-width:0 lets text shrink, not overflow */
text-align: right !important; overflow: hidden !important;
}
body.bz-themed .deshboard .card-stats .category {
font-size: clamp(11px, .8vw, 13px) !important; color: #98a0b3 !important; font-weight: 600 !important;
text-transform: none !important; margin: 0 0 3px !important; line-height: 1.1 !important;
white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important;
}
body.bz-themed .deshboard .card-stats .card-title {
font-weight: 800 !important; color: var(--bz-text) !important;
margin: 0 !important; line-height: 1.1 !important; white-space: nowrap !important;
/* RTL base so the ₪ symbol sits to the LEFT of the amount (e.g. "₪ 68,780"),
isolate keeps the digit run "68,780" itself correctly ordered. */
direction: rtl !important; text-align: right !important; unicode-bidi: isolate;
/* number fits inside the card; JS (fitKpiNumbers) shrinks font further if a value is very long. NO ellipsis. */
font-size: clamp(15px, 1.25vw, 20px) !important;
overflow: hidden !important; text-overflow: clip !important;
}
body.bz-themed .deshboard .card-stats .card-title:empty::before { content: "—"; color:#c4cad6; }
/* ---- Gray insight mini-cards ---- */
body.bz-themed .deshboard .col-md-2 .col-12 .card {
background: var(--bz-card-bg) !important; border: 1px solid rgba(20,30,60,.07) !important;
box-shadow: 0 1px 3px rgba(20,30,60,.06) !important; margin-bottom: 12px !important; border-radius: 10px !important;
}
body.bz-themed .deshboard .col-md-2 .col-12 .card .card-title,
body.bz-themed .deshboard .col-md-2 .col-12 .card .category { color: var(--bz-text) !important; }
body.bz-themed .deshboard .col-md-2 .col-12 .card .card-title { font-weight:700 !important; }
body.bz-themed .deshboard .col-md-2 .col-12 .card .category { color:#8a93a6 !important; }
body.bz-themed .deshboard .col-md-2 .col-12 .card .card-title i { color: var(--bz-primary) !important; }
/* ---- The "+" quick-add dropdown: open to the RIGHT (toward content), not left ---- */
body.bz-themed .deshboard [name="div_fast_add"] .dropdown-menu {
right: 0 !important; left: auto !important;
text-align: right !important; direction: rtl !important;
}
/* ---- Dropdown menus must be OPAQUE & readable ----
Material Dashboard renders open .dropdown-menu panels semi-transparent, so the
content behind them (e.g. the WhatsApp number selector over the chat list)
bleeds through and the text is hard to read. Force a solid surface + readable
text + clear separation. Scoped to themed pages only. */
body.bz-themed .dropdown-menu {
background-color: var(--bz-card-bg-final, #ffffff) !important;
opacity: 1 !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border: 1px solid rgba(20,30,60,.12) !important;
box-shadow: 0 8px 28px -8px rgba(20,30,60,.35) !important;
color: var(--bz-text, #2a2f45) !important;
/* float ABOVE positioned content below it (e.g. the deals-pipeline board
columns), which otherwise cover the open menu items. */
z-index: 2000 !important;
}
/* the open dropdown's wrapper must also win the stacking contest so the menu
isn't clipped behind the pipeline kanban that follows it in the DOM. */
body.bz-themed .dropdown.open,
body.bz-themed .dropdown.show,
body.bz-themed .dropdown:focus-within {
position: relative !important;
z-index: 2000 !important;
}
body.bz-themed .dropdown-menu > li > a,
body.bz-themed .dropdown-menu .dropdown-item,
body.bz-themed .dropdown-menu li,
body.bz-themed .dropdown-menu a {
color: var(--bz-text, #2a2f45) !important;
opacity: 1 !important;
}
body.bz-themed .dropdown-menu > li > a:hover,
body.bz-themed .dropdown-menu .dropdown-item:hover {
background-color: color-mix(in srgb, var(--bz-primary, #14b8c4) 12%, var(--bz-card-bg-final, #fff)) !important;
}
/* ---- Events/Tasks/Updates headers: theme color, integrated, readable title ---- */
body.bz-themed .deshboard .card-header.card-header-tabs,
body.bz-themed .deshboard .card-header.card-header-text {
background: linear-gradient(135deg, var(--bz-primary), var(--bz-primary-2)) !important;
border-radius: 10px 10px 0 0 !important; box-shadow: none !important;
margin: 0 !important; padding: 10px 14px !important; color: #fff !important;
}
body.bz-themed .deshboard .card-header.card-header-tabs *,
body.bz-themed .deshboard .card-header.card-header-text * { color:#fff !important; }
/* the "עדכונים" title: clear, bold, properly sized & spaced */
body.bz-themed .deshboard .card-header.card-header-text .card-title,
body.bz-themed .deshboard .card-header.card-header-text h4 {
font-size: 15px !important; font-weight: 700 !important; margin: 0 !important; line-height: 1.3 !important;
}
body.bz-themed .deshboard .card-header-tabs .nav-tabs-title { padding: 5px 10px !important; }
body.bz-themed .deshboard .card-header-tabs .nav > li > a { color: rgba(255,255,255,.8) !important; opacity:1 !important; padding: 5px 8px !important; }
body.bz-themed .deshboard .card-header-tabs .nav > li.active > a {
color:#fff !important; font-weight:700 !important; border-bottom: 2px solid rgba(255,255,255,.9) !important;
}
body.bz-themed .deshboard .card-header.card-header-tabs i,
body.bz-themed .deshboard .card-header.card-header-text i { color:#fff !important; }
body.bz-themed .deshboard [name="div_widget"] .card,
body.bz-themed .deshboard [name="div_deshboard_widget_notification"] .card,
body.bz-themed .deshboard .card:has(> .card-header-tabs),
body.bz-themed .deshboard .card:has(> .card-header-text) {
border-radius: 10px !important;
box-shadow: 0 1px 3px rgba(20,30,60,.06), 0 8px 20px -12px rgba(20,30,60,.2) !important;
overflow: hidden;
}
/* ---- Fix: charts must stay INSIDE their card (no overflow) ---- */
body.bz-themed .deshboard .ct-chart,
body.bz-themed .deshboard .card canvas {
max-width: 100% !important; box-sizing: border-box !important;
}
body.bz-themed .deshboard .card { overflow: hidden !important; }
body.bz-themed .deshboard .ct-chart { max-height: 150px !important; }
body.bz-themed .deshboard canvas { max-height: 150px !important; height: auto !important; }
body.bz-themed .deshboard .ct-chart svg { width: 100% !important; }
/* ---- Graph cards align to the height of their row neighbour (the "cube" beside them) ----
Make each graph's ROW a flex row with stretch, so the graph card matches the
tallest sibling. Then the chart fills the card. Consistent across all themes. */
body.bz-themed .deshboard .row { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; }
body.bz-themed .deshboard .row > [class*="col-"] { display: flex !important; flex-direction: column !important; }
body.bz-themed .deshboard .row > [class*="col-"] > .card { flex: 1 1 auto !important; }
/* ---- FIX: a nested .row (a .row that is a child of another flex .row) must span
the FULL width. Without this it becomes a flex ITEM and shrinks to its content,
so the עדכונים/charts row rendered narrow and misaligned. Force it full-width. */
body.bz-themed .deshboard .row > .row,
body.bz-themed .deshboard .row > [class*="col-"] > .row {
flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important;
margin-left: 0 !important; margin-right: 0 !important;
}
/* ---- Keep Bootstrap percentage widths working under flex so columns that don't
sum to 12 still grow to fill the row evenly instead of leaving a gap. Columns
may grow to share leftover space; their min stays their Bootstrap basis. ---- */
body.bz-themed .deshboard .row > [class*="col-"] { flex-grow: 1 !important; }
/* ---- Stacked insight column lines up with the tall chart beside it ----
The narrow col-md-2 holds 3 stacked mini-cards ("לוח תובנות", "מספר לקוחות",
"לייקים חדשים") next to the taller "גידול בלקוחות" chart. The col stretches to
the chart's height (align-items:stretch) but the 3 mini-cards floated to the
top, leaving a gap. We make the inner col-12 wrappers share the column height
equally and their cards fill 100%, so the stack spans the full height and the
bottom card ends on the same line as the chart's bottom. */
body.bz-themed .deshboard .row > [class*="col-"] > .col-12 {
display: flex !important; flex-direction: column !important; flex: 1 1 0 !important;
min-height: 0 !important;
}
/* every mini-card fills its equal slice; the LAST one drops its bottom margin
so the stack's bottom edge lands exactly on the neighbour chart's bottom. */
body.bz-themed .deshboard .row > [class*="col-"] > .col-12 > .card {
flex: 1 1 auto !important; height: 100% !important; margin-bottom: 0 !important;
}
body.bz-themed .deshboard .row > [class*="col-"] > .col-12:last-child {
margin-bottom: 0 !important;
}
body.bz-themed .deshboard .row > [class*="col-"] > .col-12:last-child > .card {
margin-bottom: 0 !important;
}
/* graph cards: column layout so the chart area fills remaining height */
body.bz-themed .deshboard [name="card_div_income_outcome_graph"],
body.bz-themed .deshboard [name="card_new_clients_chart"],
body.bz-themed .deshboard .card.card-chart {
display: flex !important; flex-direction: column !important;
min-height: 240px !important; /* floor so it never collapses too short */
height: auto !important; max-height: none !important;
}
body.bz-themed .deshboard [name="card_div_income_outcome_graph"] .card-content,
body.bz-themed .deshboard [name="card_new_clients_chart"] .card-content {
flex: 0 0 auto !important;
}
/* chart area fills the remaining space, matching the neighbour's height */
body.bz-themed .deshboard [name="div_income_outcome_graph"],
body.bz-themed .deshboard [name="card_new_clients_chart"] .ct-chart {
flex: 1 1 auto !important; max-height: none !important; min-height: 0 !important;
}
/* hide the "- מבט שנתי" subtitle on the income/outcome graph title */
body.bz-themed .deshboard [name="card_div_income_outcome_graph"] .card-title small { display: none !important; }
/* hide the standalone "מבט שנתי" title on the secondary chart card */
body.bz-themed .deshboard .card.card-chart > .card-content .card-title { display: none !important; }
/* ============================================================
CHART CONTAINMENT — "גידול בלקוחות חדשים" must not escape its frame.
Material Dashboard lifts the colored chart-header OUT of the card
(data-header-animation => margin-top:-20px), so on some zoom/size the
blue chart pokes above the white card frame. We pin the header back
INSIDE the card, clip the card, round the header's top corners, and
cap the canvas/chart to the header box. Result: a clean contained
panel that can never overflow. Applied to both dashboard chart cards
for consistency. Theme-aware via --bz-* (gradient already themed).
============================================================ */
body.bz-themed .deshboard [name="card_new_clients_chart"],
body.bz-themed .deshboard [name="card_div_income_outcome_graph"] {
overflow: hidden !important; /* nothing escapes the frame */
border-radius: var(--bz-card-radius) !important;
padding-top: 0 !important;
}
/* stop the floating-header lift; seat it flush at the card top, clipped corners */
body.bz-themed .deshboard [name="card_new_clients_chart"] > .card-header,
body.bz-themed .deshboard [name="card_div_income_outcome_graph"] > .card-header {
margin: 0 0 8px 0 !important; /* was -20px lift -> 0, no overflow */
border-radius: var(--bz-card-radius) var(--bz-card-radius) 0 0 !important;
box-shadow: none !important; /* flat, no floating shadow */
overflow: hidden !important;
max-height: 200px !important; /* header never grows past the frame */
}
/* the inner chart wrapper + canvas stay inside the header box */
body.bz-themed .deshboard [name="card_new_clients_chart"] > .card-header > div,
body.bz-themed .deshboard [name="card_div_income_outcome_graph"] > .card-header > div {
width: 100% !important; height: 100% !important;
max-height: 200px !important; box-sizing: border-box !important;
}
body.bz-themed .deshboard [name="card_new_clients_chart"] canvas,
body.bz-themed .deshboard [name="card_div_income_outcome_graph"] canvas {
max-width: 100% !important; max-height: 190px !important;
box-sizing: border-box !important;
}
/* ---- COMPACT: fit dashboard on one screen ---- */
body.bz-themed .deshboard { font-size: 12.5px; }
body.bz-themed .deshboard .card { margin-bottom: 10px !important; }
body.bz-themed .deshboard .card .card-content,
body.bz-themed .deshboard .card .card-body { padding: 8px 12px !important; }
body.bz-themed .deshboard .card[style*="min-height"] { min-height: 0 !important; }
body.bz-themed .deshboard table td, body.bz-themed .deshboard table th { padding: 4px 8px !important; }
body.bz-themed .main-panel > .content { padding-top: 8px !important; }
body.bz-themed .deshboard .row { margin-bottom: 0 !important; }
/* ============================================================
CLIENT CARD — flat / clean refine (editorial "labeled section")
Scope: the client card / wizard sections OUTSIDE the dashboard.
The legacy markup ships each section with a loud #999 gray pill
header (.card-header-text). We turn it into a quiet, theme-tinted
header BAND with a leading accent bar, a flat surface, a uniform
soft shadow, and a clean border — adapting to every theme via the
--bz-* variables. RTL-aware (accent sits on the right edge).
============================================================ */
/* Scope = .tab-content (where ALL client-card sections live; the dashboard
has zero headers there, so its own gradient-header rule stays untouched). */
/* the section card itself: flat surface, soft uniform shadow, clean border */
body.bz-themed .tab-content .card:not([data-background-color]) {
background: var(--bz-card-bg-final) !important;
border: var(--bz-card-border) !important;
border-radius: var(--bz-card-radius) !important;
box-shadow: 0 1px 2px rgba(20,30,60,.05), 0 10px 24px -16px rgba(20,30,60,.28) !important;
/* overflow: hidden removed — it was clipping position:absolute buttons (top:-10%)
that float above the card. Header corners are clipped by the header itself below. */
overflow: visible;
}
/* clip the header band to the card's rounded top corners without touching the card overflow */
body.bz-themed .tab-content .card:not([data-background-color]) > .card-header.card-header-text {
overflow: hidden;
}
/* ---- but an OPEN dropdown / typeahead must ESCAPE the card, not get clipped ----
The overflow:hidden above (for clean rounded corners) was cutting off a single-
select / autocomplete menu ("מכון ממנו הגיע הלקוח") at the card's bottom edge.
When the card contains an open dropdown OR a currently-shown typeahead menu, let
it overflow and float above sibling cards. The inner wrappers (.card-content /
.content / form rows) must also un-clip, since each can be its own clip box.
:has() is supported in all current evergreen browsers; un-themed pages are
untouched. */
body.bz-themed .tab-content .card:not([data-background-color]):has(.dropdown.open),
body.bz-themed .tab-content .card:not([data-background-color]):has(.dropdown.show),
body.bz-themed .tab-content .card:not([data-background-color]):has(.dropdown-menu[style*="display: block"]),
body.bz-themed .tab-content .card:not([data-background-color]):has(.dropdown-menu[style*="display:block"]),
body.bz-themed .tab-content .card:not([data-background-color]):has(ul.typeahead[style*="display: block"]),
body.bz-themed .tab-content .card:not([data-background-color]):has(ul.typeahead[style*="display:block"]) {
overflow: visible !important;
z-index: 30 !important; /* float above neighbouring section cards */
position: relative !important;
}
body.bz-themed .tab-content .card:has(.dropdown.open) .card-content,
body.bz-themed .tab-content .card:has(.dropdown.show) .card-content,
body.bz-themed .tab-content .card:has(.dropdown-menu[style*="display: block"]) .card-content,
body.bz-themed .tab-content .card:has(.dropdown-menu[style*="display:block"]) .card-content,
body.bz-themed .tab-content .card:has(ul.typeahead[style*="display: block"]) .card-content,
body.bz-themed .tab-content .card:has(ul.typeahead[style*="display:block"]) .card-content,
body.bz-themed .tab-content .card:has(.dropdown.open) .content,
body.bz-themed .tab-content .card:has(.dropdown-menu[style*="display: block"]) .content,
body.bz-themed .tab-content .card:has(.dropdown-menu[style*="display:block"]) .content {
overflow: visible !important;
}
/* ---- Floating icon-headers (.card-header-icon) must NOT be clipped ----
Material lifts a round colored icon OUT of the card (margin-top:-20px). The
overflow:hidden above was clipping it (icons looked cut off). For cards that
contain a floating icon header we (a) allow it to show, and (b) seat the icon
as a clean, theme-colored rounded tile that sits neatly at the card's top —
flat, not clipped, with breathing room so the title beside it lines up. */
body.bz-themed .tab-content .card:has(> .card-header-icon) {
overflow: visible !important; /* let the round icon show fully */
margin-top: 22px !important; /* room for the lifted icon above */
}
body.bz-themed .tab-content .card-header.card-header-icon {
margin: -20px 14px 0 14px !important; /* keep the lift, but contained & tidy */
box-shadow: 0 6px 16px -6px var(--bz-primary) !important;
border-radius: calc(var(--bz-card-radius) * .9) !important;
background: linear-gradient(135deg, var(--bz-primary), var(--bz-primary-2)) !important;
width: 56px !important; height: 56px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
padding: 0 !important;
}
body.bz-themed .tab-content .card-header.card-header-icon i,
body.bz-themed .tab-content .card-header.card-header-icon .material-icons {
color: #fff !important; font-size: 26px !important; line-height: 1 !important; margin: 0 !important;
}
/* the title that follows an icon header: clear, aligned, not pushed off */
body.bz-themed .tab-content .card:has(> .card-header-icon) > .card-content > .card-title,
body.bz-themed .tab-content .card:has(> .card-header-icon) .card-header-icon + * .card-title {
color: var(--bz-text) !important; font-weight: 700 !important;
}
/* the gray pill -> a quiet tinted header band with a leading accent bar. */
body.bz-themed .tab-content .card-header.card-header-text {
background: linear-gradient(90deg,
color-mix(in srgb, var(--bz-primary) 9%, var(--bz-card-bg-final)),
var(--bz-card-bg-final) 70%) !important;
color: var(--bz-text) !important;
border: 0 !important;
border-bottom: 1px solid rgba(0,0,0,.05) !important;
/* leading accent sits on the RIGHT in RTL */
border-right: 3px solid var(--bz-primary) !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 0 2px 0 !important;
padding: 9px 14px !important;
min-height: 0 !important;
display: flex !important; align-items: center !important;
}
/* the section title text — bold, theme-colored, tidy.
IMPORTANT: also force the dark color here. The header div may carry an (empty)
data-background-color attribute, which makes Material's
".card [data-background-color] .card-title { color:#fff }" turn the title WHITE
on our near-white tint band (invisible). Re-assert the dark text color on the
title itself so "תמיכות ללקוח" etc. are readable. */
body.bz-themed .tab-content .card-header.card-header-text,
body.bz-themed .tab-content .card-header.card-header-text .card-title,
body.bz-themed .tab-content .card-header.card-header-text h4,
body.bz-themed .tab-content .card-header.card-header-text span {
color: var(--bz-text) !important;
font-size: 13.5px !important;
font-weight: 700 !important;
letter-spacing: .01em !important;
line-height: 1.3 !important;
margin: 0 !important;
text-transform: none !important;
}
/* tint just the leading icon with the theme colour for a clean accent */
body.bz-themed .tab-content .card-header.card-header-text i {
color: var(--bz-primary) !important;
margin-left: 6px !important; /* RTL: icon gap on its left */
}
/* Floated buttons (e.g. "הוספת משתמש") sit as direct .card children AFTER
the header in the DOM. material-dashboard gives .card-header z-index:3,
which in themed mode (header is display:flex full-width) paints over the
floated buttons and blocks click events. Raise the buttons above it. */
body.bz-themed .tab-content .card > button,
body.bz-themed .tab-content .card > a.btn {
position: relative !important;
z-index: 4 !important;
}
/* legacy gray default buttons -> flat, neutral, theme-tinted on hover */
body.bz-themed .tab-content .btn-default,
body.bz-themed .card .btn-default {
background: #f4f5f8 !important;
color: var(--bz-text) !important;
border: 1px solid rgba(0,0,0,.08) !important;
box-shadow: none !important;
border-radius: calc(var(--bz-card-radius) * .8) !important;
font-weight: 600 !important;
transition: background var(--bz-anim-dur) var(--bz-anim-ease),
color var(--bz-anim-dur) var(--bz-anim-ease),
border-color var(--bz-anim-dur) var(--bz-anim-ease);
}
body.bz-themed .tab-content .btn-default:hover,
body.bz-themed .card .btn-default:hover {
background: color-mix(in srgb, var(--bz-primary) 10%, #fff) !important;
color: var(--bz-primary) !important;
border-color: color-mix(in srgb, var(--bz-primary) 35%, transparent) !important;
}
/* warning buttons stay semantically amber but go FLAT (kill Material shadow)
and harmonise with the clean look */
body.bz-themed .tab-content .btn-warning,
body.bz-themed .card .btn-warning {
background: #f59e0b !important;
border: 0 !important;
box-shadow: none !important;
border-radius: calc(var(--bz-card-radius) * .8) !important;
font-weight: 600 !important;
}
body.bz-themed .tab-content .btn-warning:hover,
body.bz-themed .card .btn-warning:hover { background: #d97706 !important; }
/* clean theme focus ring on the card's inputs */
body.bz-themed .tab-content .form-control:focus,
body.bz-themed .card .form-control:focus {
border-color: var(--bz-primary) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bz-primary) 16%, transparent) !important;
}
/* server-rendered amber "highlight" field (inline background rgb(245,211,167),
marks the primary "שם לקוח" row) -> keep the emphasis but make it a clean,
theme-aware tint with a leading accent, instead of the muddy amber. */
body.bz-themed .tab-content [style*="245, 211, 167"],
body.bz-themed .tab-content [style*="245,211,167"] {
background: color-mix(in srgb, var(--bz-primary) 8%, var(--bz-card-bg-final)) !important;
border-right: 3px solid var(--bz-primary) !important;
border-radius: 8px !important;
padding: 4px 8px !important;
}
/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
body.bz-themed * { animation: none !important; transition: none !important; }
body.bz-themed { background-attachment: scroll; }
}
.crm-phone-dial-addon {
padding-left: 10px;
padding-right: 10px;
}
.crm-phone-dial-icon,
.input-group-addon > .fa.fa-phone {
font-size: 22px !important;
line-height: 1 !important;
vertical-align: middle;
}