/* ===================================================
   ZEK UI - Neon Top Background + Clean UI
   Menu/Sidebar: NO STYLING (revert to original)
   Icons: no global styling (inherit only)
   Buttons: normal, neon only on hover
   =================================================== */

:root{
  --neon: #2f7bff;
  --neon2:#3da3ff;

  --text:#0b1220;
  --muted: rgba(11,18,32,.55);
  --muted2: rgba(11,18,32,.42);

  --card: rgba(255,255,255,.96);
  --line: rgba(11,18,32,.12);

  /* Only size we control */
  --btnSize: 46px;
  --btnPadX: 14px;
  --btnPadY: 10px;
  --btnRadius: 14px;

  --hoverLift: translateY(-1px);

  --shadowSoft: 0 10px 24px rgba(11,18,32,.08);
  --shadowNeon: 0 0 0 1px rgba(47,123,255,.55), 0 14px 34px rgba(47,123,255,.22);
  --shadowNeon2: 0 0 0 1px rgba(61,163,255,.75), 0 18px 42px rgba(47,123,255,.28);
}

/* Background fixed neon top -> white */
html, body{ background: transparent !important; }
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 440px at 50% 0%,
      rgba(47,123,255,.24) 0%,
      rgba(47,123,255,.10) 48%,
      rgba(255,255,255,0) 78%
    ),
    linear-gradient(180deg,
      rgba(47,123,255,.18) 0%,
      rgba(47,123,255,.07) 30%,
      #ffffff 64%
    );
}

/* Header: white + black text */
header, .header, #header,
.topbar, #topbar, .app-header, .top-bar,
.dashboard-bar, .dashbar, #dashbar{
  background: var(--card) !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text) !important;
}
header *, .header *, #header *,
.topbar *, #topbar *, .app-header *, .top-bar *,
.dashboard-bar *, .dashbar *, #dashbar *{
  color: var(--text) !important;
}

/* Footer: no black strip, light gray text */
footer, .footer, #footer, .site-footer{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--muted2) !important;
}
footer *, .footer *, #footer *, .site-footer *{
  color: var(--muted2) !important;
}

/* ===================================================
   IMPORTANT: NO MENU/SIDEBAR STYLING
   (we intentionally do not style these)
   =================================================== */

/* אם בכל זאת נתפס בעבר עיצוב, מבטלים אותו כאן */
.sidebar, #sidebar, .side-menu, #side-menu,
.menu, #menu, .nav, .sidenav, .drawer, .left-menu,
.menu-bar, .menubar{
  background: initial !important;
  border: initial !important;
  box-shadow: initial !important;
  color: inherit !important;
}
.sidebar *, #sidebar *, .side-menu *, #side-menu *,
.menu *, #menu *, .nav *, .sidenav *, .drawer *, .left-menu *,
.menu-bar *, .menubar *{
  color: inherit !important;
}

/* כפתור פתיחת תפריט: לבטל עיצוב שהגיע מה-UI ולהשאיר ברירת מחדל */
#toggleSidebarBtn, #menuBtn, .menu-btn, .sidebar-toggle, .toggleSidebarBtn{
  background: initial !important;
  border: initial !important;
  box-shadow: initial !important;
  color: inherit !important;
}

/* Buttons: normal, neon only on hover
   (מוחרגים כפתורי תפריט כדי שלא נלביש עליהם סטייל) */
button:not(#toggleSidebarBtn):not(#menuBtn):not(.menu-btn):not(.sidebar-toggle):not(.toggleSidebarBtn),
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn,
a.button,
.btn,
.button,
a[role="button"]:not(#toggleSidebarBtn):not(#menuBtn),
[role="button"]:not(#toggleSidebarBtn):not(#menuBtn){
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadowSoft) !important;
  color: var(--text) !important;
  border-radius: var(--btnRadius) !important;

  padding: var(--btnPadY) var(--btnPadX) !important;

  text-decoration: none !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}

button:not(#toggleSidebarBtn):not(#menuBtn):not(.menu-btn):not(.sidebar-toggle):not(.toggleSidebarBtn):hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
a.btn:hover,
a.button:hover,
.btn:hover,
.button:hover,
a[role="button"]:not(#toggleSidebarBtn):not(#menuBtn):hover,
[role="button"]:not(#toggleSidebarBtn):not(#menuBtn):hover{
  transform: var(--hoverLift) !important;
  border-color: rgba(47,123,255,.65) !important;
  box-shadow: var(--shadowNeon) !important;
}

button:not(#toggleSidebarBtn):not(#menuBtn):not(.menu-btn):not(.sidebar-toggle):not(.toggleSidebarBtn):active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
a.btn:active,
a.button:active,
.btn:active,
.button:active,
a[role="button"]:not(#toggleSidebarBtn):not(#menuBtn):active,
[role="button"]:not(#toggleSidebarBtn):not(#menuBtn):active{
  transform: translateY(0px) !important;
  box-shadow: var(--shadowNeon2) !important;
}

/* Icon-only buttons: same size for all */
.icon-btn, .btn-icon,
button.icon, a.icon, a.icon-btn,
.toolbar button, .toolbar a,
.tools button, .tools a,
.actions button, .actions a,
button[aria-label], a[aria-label]{
  width: var(--btnSize) !important;
  height: var(--btnSize) !important;
  min-width: var(--btnSize) !important;
  min-height: var(--btnSize) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Kill squares that come from pseudo elements
   (אבל לא נוגעים ב::before של כפתורי search/logout) */
button::after,
a.btn::before, a.btn::after,
a.button::before, a.button::after,
.btn::before, .btn::after,
.button::before, .button::after,
.icon-btn::after,
.btn-icon::after{
  background: transparent !important;
  box-shadow: none !important;
}

/* Prevent inner backgrounds that can look like squares */
button > span, button > i, button > svg, button > img,
a.btn > span, a.btn > i, a.btn > svg, a.btn > img,
a.button > span, a.button > i, a.button > svg, a.button > img,
.btn > span, .btn > i, .btn > svg, .btn > img,
.button > span, .button > i, .button > svg, .button > img{
  background: transparent !important;
  box-shadow: none !important;
}

/* Focus: clean */
:focus{ outline: none !important; }
:focus-visible{ outline: none !important; }

/* Muted text */
small, .muted, .text-muted, .hint, .subtext{
  color: var(--muted) !important;
}

/* ===================================================
   Icons: no global styling
   רק תיקון נקודתי אם search/logout בנויים על mask ב-::before
   =================================================== */

#searchBtn, .search-btn,
#logout, .logout, .logout-btn, .btn-logout, #btnLogout{
  color: var(--text) !important;
}

/* מחזירים ::before רק לאלו (לא מכבים אותו) */
#searchBtn::before, .search-btn::before,
#logout::before, .logout::before, .logout-btn::before, .btn-logout::before, #btnLogout::before{
  content: "" !important;
  display: inline-block !important;
  background-color: currentColor !important;
  opacity: 1 !important;

  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 60% 60% !important;
  mask-size: 60% 60% !important;
}

#searchBtn::after, .search-btn::after,
#logout::after, .logout::after, .logout-btn::after, .btn-logout::after, #btnLogout::after{
  opacity: 1 !important;
}

/* ===================================================
   SVG white fills: force to black (so icons are visible)
   בלי לשבור fill="none"
   =================================================== */

svg[fill="white" i],
svg[fill="#fff" i],
svg[fill="#ffffff" i]{
  fill: #000 !important;
  color: #000 !important;
}
svg[fill="white" i] path,
svg[fill="#fff" i] path,
svg[fill="#ffffff" i] path{
  fill: #000 !important;
}

svg path[fill="white" i],
svg path[fill="#fff" i],
svg path[fill="#ffffff" i]{
  fill: #000 !important;
}

svg [style*="fill: white" i],
svg [style*="fill:#fff" i],
svg [style*="fill:#ffffff" i]{
  fill: #000 !important;
}

svg [fill="none" i]{
  fill: none !important;
}

/* ===================================================
   Power button: slightly smaller only
   =================================================== */

#power, #powerBtn, .power, .power-btn{
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 12px !important;
}

#power svg, #powerBtn svg, .power svg, .power-btn svg,
#power i, #powerBtn i, .power i, .power-btn i{
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
/* לבטל רק את הסטייל שה-CSS שלך מלביש על הסרגל/כפתור
   בלי לשנות את ה-HTML/inline styles שלך בכלל */

/* 1) להחריג את הכפתור מהסטייל הכללי של [role="button"] */
#toggleSidebarBtn{
  background: #000 !important;
  border: none !important;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3) !important;
  color: #fff !important;
  padding: 0 !important;
  text-decoration: none !important;
  transform: none !important;
  transition: none !important;
}

/* 2) לא לתת לו "ניאון" בהובר/אקטיב */
#toggleSidebarBtn:hover,
#toggleSidebarBtn:active{
  transform: none !important;
  border-color: transparent !important;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3) !important;
}

/* 3) אם הסרגל (#sidebar) קיבל מה-CSS שלך border/shadow/רקע אחרים,
      מחזירים למה שהגדרת ב-inline */
#sidebar{
  background-color: #000 !important;
  border: none !important;
  box-shadow: 4px 0 10px rgba(0,0,0,0.3) !important;
  color: #fff !important;
}

/* 4) חשוב: לא להלביש סטייל כפתורים על לינקים בתוך הסרגל (רק שם) */
#sidebar a[role="button"],
#sidebar [role="button"]:not(#toggleSidebarBtn){
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* שים את הבלוק הזה הכי בסוף של הקובץ כדי שינצח */
/* ההדר מתחת לסרגל (שכבות) */
header, .header, #header,
.topbar, #topbar, .app-header, .top-bar,
.dashboard-bar, .dashbar, #dashbar{
  position: relative !important;
  z-index: 10 !important; /* נמוך מהסרגל */
}

/* הסרגל תמיד מעל ההדר */
#sidebar{
  z-index: 9999 !important;
}
#toggleSidebarBtn{
  z-index: 10000 !important;
}
/* ===================================================
   ZEK UI - Turquoise + Yellow Neon Top Background + Clean UI
   Sidebar/Menu: untouched
   Icons: only fix toolbar/header icons that are white
   Buttons: normal, neon only on hover (exclude toggleSidebarBtn)
   =================================================== */

:root{
  --neoT: #14e0d1;   /* turquoise */
  --neoY: #ffd84a;   /* yellow */

  --text:#0b1220;
  --muted: rgba(11,18,32,.55);
  --muted2: rgba(11,18,32,.42);

  --card: rgba(255,255,255,.96);
  --line: rgba(11,18,32,.12);

  /* Only size we control */
  --btnSize: 46px;
  --btnPadX: 14px;
  --btnPadY: 10px;
  --btnRadius: 14px;

  --hoverLift: translateY(-1px);

  --shadowSoft: 0 10px 24px rgba(11,18,32,.08);
  --shadowNeo: 0 0 0 1px rgba(20,224,209,.55), 0 14px 34px rgba(20,224,209,.20);
  --shadowNeo2: 0 0 0 1px rgba(255,216,74,.70), 0 18px 42px rgba(20,224,209,.22);
}

/* Background fixed neon top -> white (turquoise + yellow) */
html, body{ background: transparent !important; }
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1000px 420px at 35% 0%,
      rgba(20,224,209,.26) 0%,
      rgba(20,224,209,.12) 52%,
      rgba(255,255,255,0) 78%
    ),
    radial-gradient(900px 380px at 70% 0%,
      rgba(255,216,74,.22) 0%,
      rgba(255,216,74,.10) 50%,
      rgba(255,255,255,0) 78%
    ),
    linear-gradient(180deg,
      rgba(20,224,209,.14) 0%,
      rgba(255,216,74,.10) 26%,
      rgba(20,224,209,.06) 40%,
      #ffffff 64%
    );
}

/* Header: white + black text, and ensure it's under the sidebar */
header, .header, #header,
.topbar, #topbar, .app-header, .top-bar,
.dashboard-bar, .dashbar, #dashbar{
  background: var(--card) !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text) !important;

  position: relative !important;
  z-index: 20 !important; /* sidebar inline is 1000, so sidebar stays above */
}
header *, .header *, #header *,
.topbar *, #topbar *, .app-header *, .top-bar *,
.dashboard-bar *, .dashbar *, #dashbar *{
  color: var(--text) !important;
}

/* Footer: no black strip, light gray text */
footer, .footer, #footer, .site-footer{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--muted2) !important;
}
footer *, .footer *, #footer *, .site-footer *{
  color: var(--muted2) !important;
}

/* Buttons: normal, neon only on hover (exclude #toggleSidebarBtn) */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn,
a.button,
.btn,
.button,
a[role="button"]:not(#toggleSidebarBtn),
[role="button"]:not(#toggleSidebarBtn){
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadowSoft) !important;
  color: var(--text) !important;
  border-radius: var(--btnRadius) !important;

  padding: var(--btnPadY) var(--btnPadX) !important;

  text-decoration: none !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
a.btn:hover,
a.button:hover,
.btn:hover,
.button:hover,
a[role="button"]:not(#toggleSidebarBtn):hover,
[role="button"]:not(#toggleSidebarBtn):hover{
  transform: var(--hoverLift) !important;
  border-color: rgba(20,224,209,.65) !important;
  box-shadow: var(--shadowNeo) !important;
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
a.btn:active,
a.button:active,
.btn:active,
.button:active,
a[role="button"]:not(#toggleSidebarBtn):active,
[role="button"]:not(#toggleSidebarBtn):active{
  transform: translateY(0px) !important;
  box-shadow: var(--shadowNeo2) !important;
}

/* Icon-only buttons: same size for all (exclude #toggleSidebarBtn) */
.icon-btn, .btn-icon,
button.icon, a.icon, a.icon-btn,
.toolbar button, .toolbar a,
.tools button, .tools a,
.actions button, .actions a,
button[aria-label], a[aria-label],
[role="button"]:not(#toggleSidebarBtn)[aria-label]{
  width: var(--btnSize) !important;
  height: var(--btnSize) !important;
  min-width: var(--btnSize) !important;
  min-height: var(--btnSize) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Do not touch toggle sidebar button at all */
#toggleSidebarBtn{
  transform: none !important;
  box-shadow: none !important;
  border-color: initial !important;
  transition: none !important;
}

/* Prevent "white square" overlays from pseudo elements (do not disable ::before globally) */
button::after,
a.btn::before, a.btn::after,
a.button::before, a.button::after,
.btn::before, .btn::after,
.button::before, .button::after,
.icon-btn::after,
.btn-icon::after{
  background: transparent !important;
  box-shadow: none !important;
}

/* Prevent inner backgrounds that can look like squares */
button > span, button > i, button > svg, button > img,
a.btn > span, a.btn > i, a.btn > svg, a.btn > img,
a.button > span, a.button > i, a.button > svg, a.button > img,
.btn > span, .btn > i, .btn > svg, .btn > img,
.button > span, .button > i, .button > svg, .button > img{
  background: transparent !important;
  box-shadow: none !important;
}

/* Focus: clean */
:focus{ outline: none !important; }
:focus-visible{ outline: none !important; }

/* Muted text */
small, .muted, .text-muted, .hint, .subtext{
  color: var(--muted) !important;
}

/* Search/logout mask icons fix (only those ids/classes) */
#searchBtn, .search-btn,
#logout, .logout, .logout-btn, .btn-logout, #btnLogout{
  color: var(--text) !important;
}
#searchBtn::before, .search-btn::before,
#logout::before, .logout::before, .logout-btn::before, .btn-logout::before, #btnLogout::before{
  content: "" !important;
  display: inline-block !important;
  background-color: currentColor !important;
  opacity: 1 !important;

  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 60% 60% !important;
  mask-size: 60% 60% !important;
}
#searchBtn::after, .search-btn::after,
#logout::after, .logout::after, .logout-btn::after, .btn-logout::after, #btnLogout::after{
  opacity: 1 !important;
}

/* Make white SVG icons black ONLY in header/toolbars (not sidebar) */
header svg[fill="white" i],
header svg[fill="#fff" i],
header svg[fill="#ffffff" i],
.topbar svg[fill="white" i],
.topbar svg[fill="#fff" i],
.topbar svg[fill="#ffffff" i],
.toolbar svg[fill="white" i],
.toolbar svg[fill="#fff" i],
.toolbar svg[fill="#ffffff" i],
.actions svg[fill="white" i],
.actions svg[fill="#fff" i],
.actions svg[fill="#ffffff" i],
.tools svg[fill="white" i],
.tools svg[fill="#fff" i],
.tools svg[fill="#ffffff" i]{
  fill: #000 !important;
  color: #000 !important;
}
header svg *[fill="white" i],
header svg *[fill="#fff" i],
header svg *[fill="#ffffff" i],
.topbar svg *[fill="white" i],
.topbar svg *[fill="#fff" i],
.topbar svg *[fill="#ffffff" i],
.toolbar svg *[fill="white" i],
.toolbar svg *[fill="#fff" i],
.toolbar svg *[fill="#ffffff" i],
.actions svg *[fill="white" i],
.actions svg *[fill="#fff" i],
.actions svg *[fill="#ffffff" i],
.tools svg *[fill="white" i],
.tools svg *[fill="#fff" i],
.tools svg *[fill="#ffffff" i]{
  fill: #000 !important;
}
header svg [fill="none" i],
.topbar svg [fill="none" i],
.toolbar svg [fill="none" i],
.actions svg [fill="none" i],
.tools svg [fill="none" i]{
  fill: none !important;
}

/* Power button: slightly smaller only */
#power, #powerBtn, .power, .power-btn{
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 12px !important;
}
#power svg, #powerBtn svg, .power svg, .power-btn svg,
#power i, #powerBtn i, .power i, .power-btn i{
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
/* =========================================
   Uniform button size (global)
   Put this at the VERY END of your CSS
   ========================================= */

:root{
  --btnH: 46px;      /* גובה אחיד */
  --btnMinW: 46px;   /* מינימום רוחב (כפתורי אייקון יהיו ריבוע) */
  --btnPadX: 14px;   /* ריווח צדדים */
  --btnRadius: 14px; /* עיגול פינות */
}

/* כל הכפתורים אחידים */
button:not(#toggleSidebarBtn),
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn,
a.button,
.btn,
.button,
a[role="button"]:not(#toggleSidebarBtn),
[role="button"]:not(#toggleSidebarBtn){
  height: var(--btnH) !important;
  min-height: var(--btnH) !important;
  line-height: calc(var(--btnH) - 2px) !important;

  padding: 0 var(--btnPadX) !important;
  border-radius: var(--btnRadius) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
}

/* כפתורי אייקון: ריבוע אחיד */
.icon-btn, .btn-icon,
button.icon:not(#toggleSidebarBtn),
a.icon, a.icon-btn,
.toolbar button, .toolbar a,
.tools button, .tools a,
.actions button, .actions a,
button[aria-label]:not(#toggleSidebarBtn),
a[aria-label]:not(#toggleSidebarBtn){
  width: var(--btnMinW) !important;
  min-width: var(--btnMinW) !important;
  padding: 0 !important;
}

/* אייקון בתוך כפתור: גודל אחיד */
button:not(#toggleSidebarBtn) svg,
a.btn svg, a.button svg, .btn svg, .button svg,
button:not(#toggleSidebarBtn) i,
a.btn i, a.button i, .btn i, .button i{
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
  line-height: 1 !important;
}
/* File upload button (בחירת קובץ) */
input[type="file"]{
  font-family: inherit !important;
  color: var(--text) !important;
  max-width: 100% !important;
}

/* Chrome, Edge, Safari */
input[type="file"]::file-selector-button{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadowSoft) !important;
  color: var(--text) !important;
  border-radius: var(--btnRadius) !important;
  padding: var(--btnPadY) var(--btnPadX) !important;
  height: var(--btnSize) !important;
  cursor: pointer !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}

input[type="file"]::file-selector-button:hover{
  transform: var(--hoverLift) !important;
  border-color: rgba(47,123,255,.65) !important;
  box-shadow: var(--shadowNeon) !important;
}

input[type="file"]::file-selector-button:active{
  transform: translateY(0px) !important;
  box-shadow: var(--shadowNeon2) !important;
}

/* Firefox old fallback */
input[type="file"]::-webkit-file-upload-button{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadowSoft) !important;
  color: var(--text) !important;
  border-radius: var(--btnRadius) !important;
  padding: var(--btnPadY) var(--btnPadX) !important;
  height: var(--btnSize) !important;
  cursor: pointer !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}

input[type="file"]::-webkit-file-upload-button:hover{
  transform: var(--hoverLift) !important;
  border-color: rgba(47,123,255,.65) !important;
  box-shadow: var(--shadowNeon) !important;
}

input[type="file"]::-webkit-file-upload-button:active{
  transform: translateY(0px) !important;
  box-shadow: var(--shadowNeon2) !important;
}
button:not(#toggleSidebarBtn),
a.btn, a.button, .btn, .button,
a[role="button"]:not(#toggleSidebarBtn),
[role="button"]:not(#toggleSidebarBtn){
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Sidebar icons: force white only inside #sidebar */
#sidebar svg,
#sidebar svg *{
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* Keep parts that are intentionally transparent */
#sidebar svg [fill="none"],
#sidebar svg path[fill="none"]{
  fill: none !important;
}

/* If some icons use currentColor only */
#sidebar svg[fill="currentColor"],
#sidebar svg[fill="currentcolor"]{
  fill: currentColor !important;
}

/* Optional: make font-icon libraries white too (if you use them) */
#sidebar i,
#sidebar .material-icons,
#sidebar .material-symbols-outlined,
#sidebar .fa, #sidebar .fas, #sidebar .far, #sidebar .fab{
  color: #fff !important;
}

/* ===========================
   WA CHAT: do not reset bubbles and do not break internal fields
   Align bubbles using text-align (no flex, no floats)
   =========================== */
#chat-area{
  display:block !important;
  box-sizing:border-box !important;
  min-width:0 !important;
  max-width:100% !important;
  direction:rtl !important;
  text-align:right !important;
}

/* bubbles keep their own styling from the chat, only layout helpers */
#chat-area .bubble,
#chat-area .bubble-right,
#chat-area .bubble-left{
  display:inline-block !important;
  width:auto !important;
  max-width:92% !important;
  box-sizing:border-box !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  margin:6px 0 !important;
  float:none !important;
  clear:both !important;
  position:relative !important;
}

/* right bubble */
#chat-area .bubble-right{
  margin-left:auto !important;
}

/* left bubble */
#chat-area .bubble-left{
  margin-right:auto !important;
  text-align:left !important;
}

/* if some messages use only .bubble (no left/right), keep them on the right */
#chat-area .bubble:not(.bubble-left):not(.bubble-right){
  margin-left:auto !important;
}
/* =========================
   WA CHAT - desktop fix only
   ========================= */
@media (min-width: 769px){
  .wa-chat-page textarea,
  .wa-chat-page input,
  .wa-chat-page select{
    height: auto !important;
    min-height: 44px !important;
    max-height: 120px !important;
    flex: none !important;
    align-self: flex-start !important;
  }
}
<style id="wa-fields-fix">
  /* תיקון שדות רק בדף הצאט */
  .wa-chat-page input,
  .wa-chat-page select,
  .wa-chat-page textarea{
    height:auto !important;
    min-height:42px !important;
    max-height:120px !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    line-height:1.4 !important;
  }

  /* אם יש textarea של הודעה שמקבל גובה ענק */
  .wa-chat-page textarea{
    min-height:48px !important;
    max-height:140px !important;
    resize:vertical !important;
  }

  /* אם יש wrapper שמושך לגובה בגלל flex בדסקטופ */
  .wa-chat-page form,
  .wa-chat-page .row,
  .wa-chat-page .form-row,
  .wa-chat-page .field,
  .wa-chat-page .form-group{
    align-items:flex-start !important;
  }

/* Hover לכפתורים השחורים */
button,
input[type="button"],
input[type="submit"],
a.btn,
.button {
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

/* אם אלה באמת כפתורי bootstrap וכו', תן להם class ייעודי עדיף */
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
a.btn:hover,
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  filter: brightness(1.08);
}

/* לחיצה */
button:active,
input[type="button"]:active,
input[type="submit"]:active,
a.btn:active,
.button:active {
  transform: translateY(0px);
  box-shadow: 0 6px 14px rgba(0,0,0,.14);
}
/* מעבר עכבר גם לאייקונים בתוך כפתורים */
button svg,
a.btn svg,
.button svg,
button i,
a.btn i,
.button i {
  transition: transform .15s ease, opacity .15s ease, filter .15s ease;
}

/* כשעושים hover על הכפתור עצמו, האייקון מגיב */
button:hover svg,
a.btn:hover svg,
.button:hover svg,
button:hover i,
a.btn:hover i,
.button:hover i {
  transform: translateX(-2px);
  filter: brightness(1.2);
  opacity: 1;
}

/* אופציונלי: אם יש כפתורים לבנים ורוצים שהאייקון ישחיר/ישתנה */
button:hover svg path,
a.btn:hover svg path,
.button:hover svg path {
  /* עובד רק אם ה-SVG משתמש ב-fill מה-path ולא צבע קשיח */
  fill: currentColor;
}