@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');
/* ============================================================================
   SmartPalm Command — Phase 3 UI/UX system
   Single override file, loaded via Perfex's assets/css/custom.css hook.
   Additive only. Remove this file to revert 100%.
   Author: SmartPalm Command  ·  2026-09-12
   ============================================================================ */

/* ---- 1. Design tokens --------------------------------------------------- */
:root {
  --sp-brand:        #1B8A5A;   /* palm green — primary action           */
  --sp-brand-600:    #167a4f;
  --sp-brand-700:    #126441;
  --sp-brand-soft:   #E8F3EC;   /* tint for backgrounds / hovers         */
  --sp-ink:          #0E1A2B;   /* headings / primary text               */
  --sp-body:         #33404D;   /* body text                             */
  --sp-muted:        #667085;   /* secondary text                        */
  --sp-canvas:       #F5F7F9;   /* app background                        */
  --sp-surface:      #FFFFFF;   /* cards / panels                        */
  --sp-border:       #E4E8ED;   /* hairlines                             */
  --sp-border-2:     #D7DDE4;

  --sp-radius:       10px;
  --sp-radius-sm:    8px;
  --sp-radius-pill:  999px;

  --sp-shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --sp-shadow:    0 1px 2px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.06);
  --sp-shadow-md: 0 6px 18px rgba(16,24,40,.10);

  --sp-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, Helvetica, Arial, sans-serif;
}

/* ---- 2. Image safety (stops spill-over, never shrinks logos) ------------ */
/* Width-only guard: an image can never exceed its container, and height
   follows width so aspect ratio is preserved. This prevents overflow WITHOUT
   forcing any fixed size, so Perfex logos keep their natural dimensions.    */
img,
svg,
video { max-width: 100%; }

img:not([width]) { height: auto; }

/* Uploaded content images inside tables / notes never overflow their cell. */
.table td img,
.panel_s img,
.ticket-message img,
.feed-post img { max-width: 100%; }

/* ---- 3. Typography & base ---------------------------------------------- */
body,
.customers,
body.login_admin {
  font-family: var(--sp-font);
  color: var(--sp-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5,
.panel-title,
.bold { color: var(--sp-ink); }

h1, h2, h3 { letter-spacing: -.01em; }

a { color: var(--sp-brand); }
a:hover, a:focus { color: var(--sp-brand-700); }

/* App canvas (admin content well + portal). */
#wrapper,
.content,
body.customers { background-color: var(--sp-canvas); }

/* ---- 4. Cards / panels -------------------------------------------------- */
.panel_s,
.panel-default,
.tw-bg-white,
.well {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow-sm);
}

.panel_s .panel-heading,
.panel-default .panel-heading {
  border-top-left-radius: var(--sp-radius);
  border-top-right-radius: var(--sp-radius);
  border-bottom: 1px solid var(--sp-border);
  background: transparent;
}

.panel_s .panel-body { padding: 20px; }

/* Widgets on the dashboard read as one family. */
.widget .panel_s:hover { box-shadow: var(--sp-shadow); transition: box-shadow .15s ease; }

/* ---- 5. Buttons --------------------------------------------------------- */
.btn {
  border-radius: var(--sp-radius-sm);
  font-weight: 600;
  padding: 7px 15px;
  transition: background-color .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.btn-primary,
.bootstrap-switch .bootstrap-switch-handle-on {
  background-color: var(--sp-brand);
  border-color: var(--sp-brand);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--sp-brand-600);
  border-color: var(--sp-brand-600);
}

.btn-default {
  background-color: #fff;
  border-color: var(--sp-border-2);
  color: var(--sp-ink);
}
.btn-default:hover { background-color: var(--sp-canvas); border-color: var(--sp-muted); }

.btn:focus-visible { outline: 2px solid var(--sp-brand); outline-offset: 2px; }

/* ---- 6. Forms ----------------------------------------------------------- */
.form-control,
.select2-container .select2-selection,
.dt-bootstrap input[type="search"] {
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-border-2);
  box-shadow: none;
  color: var(--sp-ink);
}
.form-control:focus {
  border-color: var(--sp-brand);
  box-shadow: 0 0 0 3px var(--sp-brand-soft);
}
.control-label,
label { color: var(--sp-ink); font-weight: 600; }

/* ---- 7. Tables ---------------------------------------------------------- */
.table { color: var(--sp-body); }
.table > thead > tr > th {
  border-bottom: 1px solid var(--sp-border-2);
  color: var(--sp-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 700;
}
.table > tbody > tr > td { border-top: 1px solid var(--sp-border); vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #FBFCFD; }
.table-hover > tbody > tr:hover { background-color: var(--sp-brand-soft); }

/* Wide tables scroll inside their own box, never the page. */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- 8. Badges / labels / pills ---------------------------------------- */
.label, .badge {
  border-radius: var(--sp-radius-pill);
  font-weight: 600;
  padding: .3em .7em;
}

/* ========================================================================
   STAGE 1 — Bitrix-style admin shell & navigation (appearance only)
   Real Perfex selectors: sidebar #menu, list #side-menu, top bar #header.
   No positioning changes (kept safe); only chrome, logo, spacing, accents.
   ======================================================================== */

/* -- Sidebar brand header: full-width band, prominent wide LIGHT logo ------ */
/* The stock square logo is a wide mark floating in transparent padding, so
   it shrinks to a speck when height-capped. We render a trimmed, tight copy
   (smartpalm-logo-wide.png) as a background so it shows large and legible,
   and hide the padded <img>. Only the sidebar is affected; login/PDF logos
   keep using the original company logo untouched. Band height matches the
   63px top bar for a clean shared top edge.                                 */
#menu #logo {
  height: 64px !important;
  padding: 0 20px !important;
  justify-content: flex-start !important;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.09);
  margin-bottom: 6px;
  box-sizing: border-box;
}
#menu #logo a.logo {
  display: block !important;
  width: 158px;
  height: 44px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: url('/uploads/company/smartpalm-logo-wide.png') left center / contain no-repeat;
}
#menu #logo a.logo img { display: none !important; }

/* -- Sidebar menu items: rounded pills, hover, brand-accent active state -- */
#side-menu > li > a {
  border-radius: 8px;
  margin: 1px 10px;
  padding: 9px 12px !important;
  font-weight: 500;
  transition: background-color .12s ease, color .12s ease;
}
#side-menu > li > a:hover { background-color: rgba(255,255,255,.08); }
#side-menu > li.active > a,
#side-menu > li > a.active {
  background-color: rgba(255,255,255,.12);
  color: #fff !important;
  box-shadow: inset 3px 0 0 #4FD1B0;
}
#side-menu .menu-icon { width: 20px; text-align: center; margin-right: 6px; }
#side-menu ul.nav-second-level > li > a {
  border-radius: 8px;
  margin: 1px 10px 1px 22px;
}

/* -- Top bar: clean divider + subtle shadow, rounded search --------------- */
#header {
  border-bottom: 1px solid var(--sp-border);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
#header #search_input { border-radius: 10px !important; }

/* STAGE 2a (sticky fixed shell) was REMOVED: making #menu position:fixed broke
   Perfex's Setup settings-menu slide (it landed off-screen at x=-230) and put
   the Setup item below the fixed fold. Reverted to Perfex's native scrolling
   sidebar so all menus work. The rest of the Bitrix styling is unaffected. */

/* ========================================================================
   STAGE 2b — Soft status pills, modals, form/input consistency
   ======================================================================== */

/* -- Status pills: soft Bitrix-style tint + readable colored text --------- */
.label, .badge {
  border-radius: 999px;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .02em;
  padding: .34em .72em;
  line-height: 1.4;
}
/* Only recolour the standard bootstrap variants; DB-driven inline colours
   (custom lead/deal statuses) keep their own inline background.            */
.label-success, .badge-success { background-color: #E7F6EE !important; color: #12764A !important; }
.label-danger,  .badge-danger  { background-color: #FCECEC !important; color: #B4232A !important; }
.label-warning, .badge-warning { background-color: #FDF3E4 !important; color: #96610F !important; }
.label-info,    .badge-info    { background-color: #E7F3FB !important; color: #14669F !important; }
.label-primary, .badge-primary { background-color: #E9F1FC !important; color: #1E5FC4 !important; }
.label-default, .badge-default { background-color: #EDF0F3 !important; color: #516072 !important; }

/* -- Modals: soft rounded card, clean header/footer ---------------------- */
.modal-content {
  border: none;
  border-radius: 14px;
  box-shadow: var(--sp-shadow-md);
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--sp-border);
  padding: 15px 20px;
}
.modal-header .modal-title { color: var(--sp-ink); font-weight: 600; }
.modal-body   { padding: 20px; }
.modal-footer {
  border-top: 1px solid var(--sp-border);
  padding: 13px 20px;
}

/* -- Input / select consistency: match heights and radius ---------------- */
.form-control,
.select2-container--default .select2-selection--single {
  min-height: 38px;
}
.select2-container--default .select2-selection--single {
  border-radius: var(--sp-radius-sm) !important;
  border-color: var(--sp-border-2) !important;
  display: flex;
  align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.dataTables_filter input,
.dt-custom-filter input { border-radius: var(--sp-radius-sm) !important; }

/* ========================================================================
   STAGE 3 — Modern Bitrix-style calendar (FullCalendar v5) + soft alerts
   ======================================================================== */

.fc {
  --fc-border-color: var(--sp-border);
  --fc-today-bg-color: var(--sp-brand-soft);
  --fc-page-bg-color: #fff;
  font-size: 13px;
}
.fc .fc-scrollgrid,
.fc .fc-scrollgrid-section > * { border-color: var(--sp-border); }
.fc .fc-scrollgrid { border-radius: 12px; overflow: hidden; }
.fc-theme-standard td, .fc-theme-standard th { border-color: var(--sp-border); }

/* Toolbar title + buttons */
.fc .fc-toolbar-title { font-size: 18px; font-weight: 700; color: var(--sp-ink); }
.fc .fc-button-primary {
  background: #fff !important;
  border: 1px solid var(--sp-border-2) !important;
  color: var(--sp-ink) !important;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px;
  box-shadow: none !important;
  text-transform: capitalize;
  border-radius: 8px;
}
.fc .fc-button-primary:hover {
  background: var(--sp-canvas) !important;
  border-color: var(--sp-muted) !important;
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--sp-brand) !important;
  border-color: var(--sp-brand) !important;
  color: #fff !important;
}
.fc .fc-button-primary:focus,
.fc .fc-button-primary:focus-visible { box-shadow: 0 0 0 3px var(--sp-brand-soft) !important; }
.fc .fc-button-group > .fc-button:not(:first-child):not(:last-child) { border-radius: 0; }
.fc .fc-button-group > .fc-button:first-child { border-radius: 8px 0 0 8px; }
.fc .fc-button-group > .fc-button:last-child  { border-radius: 0 8px 8px 0; }

/* Day-of-week header row */
.fc .fc-col-header-cell { background: var(--sp-canvas); }
.fc .fc-col-header-cell-cushion {
  color: var(--sp-muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 9px 6px;
}

/* Day cells + numbers */
.fc .fc-daygrid-day-number {
  color: var(--sp-body);
  font-weight: 600;
  font-size: 12.5px;
  padding: 7px 9px;
}
.fc .fc-day-other .fc-daygrid-day-number { color: #B4BDC6; }
.fc .fc-daygrid-day { transition: background-color .1s ease; }
.fc .fc-daygrid-day:hover { background: #FAFBFC; }

/* Today: subtle tint + a filled brand circle on the number */
.fc .fc-day-today .fc-daygrid-day-number {
  color: #fff;
  background: var(--sp-brand);
  border-radius: 999px;
  min-width: 24px;
  height: 24px;
  margin: 4px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Events as soft pills */
.fc .fc-daygrid-event,
.fc .fc-h-event {
  border: none;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--sp-brand);
  color: #fff;
}
.fc .fc-daygrid-event:hover { filter: brightness(.94); }
.fc .fc-h-event .fc-event-title,
.fc .fc-h-event .fc-event-time { color: #fff; }

/* -- Soft, rounded alerts ------------------------------------------------- */
.alert {
  border-radius: 10px;
  border: 1px solid transparent;
  box-shadow: var(--sp-shadow-sm);
}
.alert-warning { background: #FDF3E4; border-color: #F3E2C0; color: #7A5310; }
.alert-danger  { background: #FCECEC; border-color: #F3CFCF; color: #8F2A2F; }
.alert-success { background: #E7F6EE; border-color: #C6E9D5; color: #14603F; }
.alert-info    { background: #E7F3FB; border-color: #C6E2F3; color: #145681; }

/* ========================================================================
   STAGE 4 — Client login + customer portal (body.customers)
   ======================================================================== */

/* Page canvas */
body.customers { background: var(--sp-canvas); }

/* Header bar: white, dark WIDE logo (the light square is invisible on white) */
body.customers .navbar.header {
  background: #fff;
  border-bottom: 1px solid var(--sp-border);
  box-shadow: var(--sp-shadow-sm);
  min-height: 72px;
}
body.customers a.logo.navbar-brand {
  display: inline-block !important;
  width: 190px;
  height: 46px;
  padding: 0 !important;
  margin: 13px 0 !important;
  background: url('/uploads/company/smartpalm-logo-navy.png') left center / contain no-repeat;
}
body.customers a.logo.navbar-brand img { display: none !important; }

/* Header nav links were white (invisible on the white bar). Make them dark,
   and turn the header Login button brand-green instead of stock blue. */
body.customers .navbar.header .navbar-nav > li > a,
body.customers .navbar.header .navbar-right > li > a {
  color: var(--sp-ink);
  font-weight: 600;
}
body.customers .navbar.header .navbar-nav > li > a:hover,
body.customers .navbar.header .navbar-right > li > a:hover { color: var(--sp-brand); }
body.customers .navbar.header .customers-nav-item-login > a {
  background: var(--sp-brand) !important;
  color: #fff !important;
  border-radius: 8px;
  padding: 8px 18px;
}
body.customers .navbar.header .customers-nav-item-login > a:hover { background: var(--sp-brand-600) !important; color:#fff; }

/* Login form styled as a centered Bitrix card */
body.customers form.login-form {
  background: #fff;
  border: 1px solid var(--sp-border);
  border-radius: 14px;
  box-shadow: var(--sp-shadow-md);
  padding: 28px 26px;
  margin-top: 8px;
}
body.customers form.login-form .form-control { border-radius: var(--sp-radius-sm); }

/* Clear primary/secondary hierarchy: Login solid, Register outline */
body.customers .login-form .btn-success.btn-block {
  background: #fff !important;
  color: var(--sp-brand) !important;
  border: 1px solid var(--sp-brand) !important;
}
body.customers .login-form .btn-success.btn-block:hover {
  background: var(--sp-brand-soft) !important;
}

/* Footer: clean, readable, on-brand (replaces low-contrast dark-blue bar) */
body.customers footer,
body.customers .footer,
body.customers #footer {
  background: #fff !important;
  color: var(--sp-muted) !important;
  border-top: 1px solid var(--sp-border);
}
body.customers footer a,
body.customers .footer a { color: var(--sp-brand); }

/* Portal content cards + buttons already inherit the shared card/button system */
body.customers .panel_s { box-shadow: var(--sp-shadow-sm); }

/* ========================================================================
   10. ADMIN login — full-bleed photo + split layout (matches client login)
   Structure: body.login_admin > .authentication-form-wrapper
              > .company-logo, h1, div.tw-bg-white (card). No nav/footer.
   ======================================================================== */
body.login_admin {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background: #081826 !important;   /* override Tailwind tw-bg-neutral-100 */
}
/* Photo layer with slow Ken-Burns zoom */
body.login_admin::before {
  content: '';
  position: fixed;
  inset: -6%;
  z-index: 0;
  background: url('/assets/smartpalm/img/login-bg.jpg') center center / cover no-repeat;
  animation: sp-kenburns 45s ease-in-out infinite alternate;
  will-change: transform;
}
/* Legibility scrims (top/bottom + left) */
body.login_admin::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,12,20,.52) 0%, rgba(4,12,20,0) 19%, rgba(4,12,20,0) 74%, rgba(4,12,20,.5) 100%),
    linear-gradient(90deg, rgba(4,12,20,.70) 0%, rgba(4,12,20,.12) 42%, rgba(4,12,20,.34) 100%);
}

/* Wrapper: above the scene, vertically centred, pushed right (room for QR) */
body.login_admin .authentication-form-wrapper {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  max-width: 30rem;
  margin: 0 250px 0 auto !important;
  padding-top: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Logo (white mark on the photo) + white heading, aligned to the card fields.
   The card is inset from the wrapper by its margin (1.5rem) + padding (2rem) =
   3.5rem, so the logo and heading get the same left padding to line up with
   the Email/Password inputs. text-align left !important beats Tailwind's
   .text-center on the container. */
body.login_admin .company-logo {
  text-align: left !important;
  padding-left: 3.5rem;
  margin-bottom: 18px;
}
body.login_admin .company-logo a.logo {
  display: inline-block !important;
  width: 260px;
  height: 66px;
  background: url('/uploads/company/smartpalm-logo-wide.png') left center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.95)) drop-shadow(0 0 18px rgba(0,0,0,.8));
}
body.login_admin .company-logo a.logo img { display: none !important; }
body.login_admin h1 {
  color: #fff !important;
  text-align: left !important;
  padding-left: 3.5rem;
  text-shadow: 0 2px 22px rgba(0,0,0,.65);
}

/* Card: bright, frosted, lifted */
body.login_admin .authentication-form-wrapper > .tw-bg-white {
  position: relative;
  background: rgba(255,255,255,.97) !important;
  border: 1px solid var(--sp-border);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.42) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Left headline tagline (fixed to viewport) + subtitle */
body.login_admin .authentication-form-wrapper::before {
  content: "Run your business,\A all in one place.";
  white-space: pre-line;
  position: fixed;
  left: 6vw;
  top: calc(50% - 74px);
  max-width: 40vw;
  font-family: 'Manrope', var(--sp-font);
  color: #fff;
  font-size: 50px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-shadow: 0 4px 36px rgba(0,0,0,.5);
  pointer-events: none;
}
body.login_admin .authentication-form-wrapper::after {
  content: "SmartPalm brings your CRM, projects, HR and finance together in one clean workspace.";
  position: fixed;
  left: calc(6vw + 2px);
  top: calc(50% + 48px);
  max-width: 430px;
  font-family: 'Manrope', var(--sp-font);
  color: rgba(255,255,255,.92);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
  pointer-events: none;
}

/* QR panel to the right of the card (admin QR opens the admin login) */
body.login_admin .authentication-form-wrapper > .tw-bg-white::after {
  content: "Scan to open\A on your phone";
  white-space: pre-line;
  position: absolute;
  top: 0;
  left: calc(100% + 20px);
  width: 186px;
  padding: 150px 16px 20px;
  box-sizing: border-box;
  border-radius: 16px;
  background:
    url('/assets/smartpalm/img/login-qr-admin.png') no-repeat center 18px / 118px 118px,
    rgba(14,26,43,.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  color: #fff;
  font-family: 'Manrope', var(--sp-font);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

/* Narrower screens: centre the card, drop tagline + QR */
@media (max-width: 1200px) {
  body.login_admin .authentication-form-wrapper {
    margin: 0 auto !important;
    align-items: center;
  }
  body.login_admin .company-logo,
  body.login_admin h1 { text-align: center !important; padding-left: 0 !important; }
  body.login_admin .company-logo a.logo { background-position: center; }
  body.login_admin .authentication-form-wrapper::before,
  body.login_admin .authentication-form-wrapper::after,
  body.login_admin .authentication-form-wrapper > .tw-bg-white::after { display: none; }
}

/* ---- 11. Customer portal ----------------------------------------------- */
body.customers .navbar {
  background: var(--sp-surface);
  border-bottom: 1px solid var(--sp-border);
  box-shadow: var(--sp-shadow-sm);
}
body.customers .panel_s { box-shadow: var(--sp-shadow-sm); }
body.customers footer { color: var(--sp-muted); border-top: 1px solid var(--sp-border); }

/* ---- 12. Misc polish ---------------------------------------------------- */
.dropdown-menu {
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  box-shadow: var(--sp-shadow-md);
  padding: 6px;
}
.dropdown-menu > li > a { border-radius: 6px; padding: 7px 12px; }
hr { border-top-color: var(--sp-border); }
.text-success { color: var(--sp-brand) !important; }

/* Respect reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ========================================================================
   STAGE 5 — Animated login background (login page only: body.customers_login)
   Lightweight CSS scene in brand colours: deep base + drifting glow orbs +
   subtle tech dot-grid. No external assets, no copyright, fast to load.
   ======================================================================== */
body.customers_login {
  background: #081826 !important;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}
/* Full-bleed brand landscape with a slow Ken-Burns zoom (gentle motion) */
body.customers_login::before {
  content: '';
  position: fixed;
  inset: -6%;
  z-index: 0;
  background: url('/assets/smartpalm/img/login-bg.jpg') center center / cover no-repeat;
  animation: sp-kenburns 45s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes sp-kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.12) translate(1.5%, -1.5%); }
}
/* Soft overlay so the header, heading and card stay legible on any frame */
body.customers_login::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,12,20,.58) 0%, rgba(4,12,20,0) 17%, rgba(4,12,20,0) 76%, rgba(4,12,20,.55) 100%),
    linear-gradient(90deg, rgba(4,12,20,.70) 0%, rgba(4,12,20,.14) 44%, rgba(4,12,20,.05) 100%);
}
/* Logo + header nav readability on bright frames */
body.customers_login a.logo.navbar-brand {
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.65));
}
body.customers_login .navbar.header .navbar-nav > li > a,
body.customers_login .navbar.header .navbar-right > li > a {
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
@media (prefers-reduced-motion: reduce) {
  body.customers_login::before { animation: none; }
}

/* Keep all real content above the background layers */
body.customers_login .navbar.header,
body.customers_login .container,
body.customers_login .row,
body.customers_login footer { position: relative; z-index: 2; }

/* Header: transparent over the scene, WHITE logo + white nav */
body.customers_login .navbar.header {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
body.customers_login a.logo.navbar-brand {
  background-image: url('/uploads/company/smartpalm-logo-wide.png') !important;
}
body.customers_login .navbar.header .navbar-nav > li > a,
body.customers_login .navbar.header .navbar-right > li > a { color: #FFFFFF !important; }
body.customers_login .navbar.header .navbar-nav > li > a:hover { color: #CFF3E2 !important; }

/* Page heading on the dark scene */
body.customers_login h1,
body.customers_login h2,
body.customers_login h3,
body.customers_login h4 { color: #FFFFFF !important; }

/* Login card: bright, lifted, slightly frosted so the scene glows behind it */
body.customers_login form.login-form {
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Footer: transparent, light text */
body.customers_login footer,
body.customers_login .footer {
  background: transparent !important;
  color: rgba(255,255,255,.72) !important;
  border-top: none !important;
}
body.customers_login footer a,
body.customers_login .footer a { color: #FFFFFF; }

/* ---- STAGE 5b — Split layout: tagline left, card right (login page) ---- */
/* Break the login row to full width and push the card stack to the right,
   with a headline tagline on the left, mirroring the Bitrix layout. */
body.customers_login .container {
  width: 100% !important;
  max-width: none !important;
  padding-left: 5vw;
  padding-right: 5vw;
}
body.customers_login .mtop40 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  min-height: calc(100vh - 210px);
}
body.customers_login .mtop40 > .col-md-4 {
  float: none !important;
  width: 400px !important;
  max-width: 92vw;
  margin: 0 232px 0 0 !important;   /* shift the card left to leave room for the QR panel */
  left: 0 !important;
}
/* Left-side headline tagline (absolute, out of the flex flow) */
body.customers_login .mtop40::before {
  content: "Run your business,\A all in one place.";
  white-space: pre-line;
  position: absolute;
  left: 8px;
  top: calc(50% - 74px);
  max-width: 560px;
  font-family: 'Manrope', var(--sp-font);
  color: #FFFFFF;
  font-size: 50px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-shadow: 0 4px 36px rgba(0,0,0,.5);
  pointer-events: none;
}
/* Subtitle under the headline */
body.customers_login .mtop40::after {
  content: "SmartPalm brings your CRM, projects, HR and finance together in one clean workspace.";
  position: absolute;
  left: 10px;
  top: calc(50% + 48px);
  max-width: 430px;
  font-family: 'Manrope', var(--sp-font);
  color: rgba(255,255,255,.92);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
  pointer-events: none;
}

/* Bitrix-style QR panel attached to the right of the card (opens login on phone) */
body.customers_login .mtop40 > .col-md-4:last-child { position: relative; }
body.customers_login .mtop40 > .col-md-4:last-child::after {
  content: "Scan to open\A on your phone";
  white-space: pre-line;
  position: absolute;
  top: 0;
  left: calc(100% + 20px);
  width: 186px;
  padding: 150px 16px 20px;
  box-sizing: border-box;
  border-radius: 16px;
  background:
    url('/assets/smartpalm/img/login-qr.png') no-repeat center 18px / 118px 118px,
    rgba(14,26,43,.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  color: #FFFFFF;
  font-family: 'Manrope', var(--sp-font);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

/* Stack for narrower screens: hide tagline + QR, centre the card */
@media (max-width: 1200px) {
  body.customers_login .mtop40 { align-items: center; }
  body.customers_login .mtop40::before,
  body.customers_login .mtop40::after,
  body.customers_login .mtop40 > .col-md-4:last-child::after { display: none; }
  body.customers_login .mtop40 > .col-md-4 { margin: 0 auto !important; }
}

/* Card title ("Please login or register") sits over the photo above the card */
body.customers_login .mtop40 > .text-center,
body.customers_login .mtop40 > .text-center * {
  color: #FFFFFF !important;
  text-shadow: 0 2px 24px rgba(0,0,0,.72);
}
body.customers_login .mtop40 > .text-center { margin-bottom: 16px; }

/* ---- Cross-login link between the admin and client login pages --------- */
.sp-cross-login-wrap { margin-top: 16px; text-align: center; }
.sp-cross-login {
  display: inline-block;
  font-family: 'Manrope', var(--sp-font);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--sp-brand) !important;
}
.sp-cross-login:hover { color: var(--sp-brand-700) !important; text-decoration: underline; }

/* ---- Fix: Setup slide-in menu title (uses .bold) must stay light -------- */
/* The global `.bold { color: ink }` rule turned the teal Setup panel's
   "Setup" heading dark navy (unreadable). Keep it and its labels light. */
#setup-menu-wrapper .customizer-heading,
#setup-menu-wrapper .bold,
#setup-menu-wrapper h4,
#setup-menu-wrapper .menu-name { color: #FFFFFF !important; }

/* ---- Portal header: active nav item as a brand pill (was dark-blue) ----- */
body.customers .navbar.header .navbar-nav > li.active > a {
  background-color: var(--sp-brand) !important;
  color: #FFFFFF !important;
  border-radius: 8px;
}
body.customers .navbar.header .navbar-nav > li.active > a:hover {
  background-color: var(--sp-brand-600) !important;
  color: #FFFFFF !important;
}

/* ========================================================================
   STAGE 6 — Setup menu overspill, Register background, Knowledge Base
   ======================================================================== */

/* -- 6a. Setup slide-in menu: fixed viewport panel (no bleed/overspill) ---- */
#setup-menu-wrapper {
  position: fixed !important;
  top: 0 !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1050 !important;
  background: #025e5f !important;
}
#setup-menu-wrapper::-webkit-scrollbar { width: 8px; }
#setup-menu-wrapper::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 8px; }

/* -- 6b. Register page: same photo scene + frosted card as the login ------- */
body.register {
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  background: #081826 !important;
}
body.register::before {
  content: '';
  position: fixed; inset: -6%; z-index: 0;
  background: url('/assets/smartpalm/img/login-bg.jpg') center center / cover no-repeat;
  animation: sp-kenburns 45s ease-in-out infinite alternate;
}
body.register::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,12,20,.55) 0%, rgba(4,12,20,.16) 30%, rgba(4,12,20,.52) 100%);
}
@media (prefers-reduced-motion: reduce) { body.register::before { animation: none; } }
body.register .navbar.header,
body.register .container,
body.register .row,
body.register footer { position: relative; z-index: 2; }
body.register .navbar.header { background: transparent !important; border-bottom: none !important; box-shadow: none !important; }
body.register a.logo.navbar-brand {
  background-image: url('/uploads/company/smartpalm-logo-wide.png') !important;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.6));
}
body.register .navbar.header .navbar-nav > li > a { color: #fff !important; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
body.register h1, body.register h2, body.register h4, body.register .register-heading {
  color: #fff !important;
  text-align: center !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
  font-family: 'Manrope', var(--sp-font);
}
body.register form {
  background: rgba(255,255,255,.97);
  border: 1px solid var(--sp-border);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 26px 30px;
  max-width: 780px;
  margin: 10px auto 44px;
}
body.register footer, body.register .footer { background: transparent !important; color: rgba(255,255,255,.78) !important; border-top: none !important; }
body.register footer a, body.register .footer a { color: #fff; }

/* -- 6c. Knowledge Base: clean, professional help-center look ------------- */
.kb-search-heading {
  font-family: 'Manrope', var(--sp-font);
  font-weight: 800 !important;
  color: var(--sp-ink) !important;
  letter-spacing: -0.02em;
  font-size: 30px;
}
/* Search field prominent + pill-shaped */
.kb-search-heading + * .form-control,
form[action*="knowledge"] .form-control,
input#search_kb, .knowledge-base .input-group .form-control {
  height: 52px !important;
  border-radius: 999px !important;
  padding: 0 22px !important;
  font-size: 15.5px !important;
  box-shadow: var(--sp-shadow-sm);
}
/* Category / article cards lift on hover */
.customers .panel_s { transition: box-shadow .15s ease, transform .15s ease; }
.customers .kbgroups .panel_s:hover,
.customers .kb-group:hover,
.customers .knowledge-base .panel_s:hover { box-shadow: var(--sp-shadow-md); transform: translateY(-2px); }
/* KB article links + group titles on brand */
.customers .kbgroups a, .customers .kb-group a { color: var(--sp-ink); font-weight: 600; }
.customers .kbgroups a:hover, .customers .kb-group a:hover { color: var(--sp-brand); }

/* ========================================================================
   STAGE 7 — Register heading clarity + Knowledge Base (hero, sticky, width)
   ======================================================================== */

/* -- 7a. Register: section headings sit on the white card -> colour them --- */
body.register .register-contact-info-heading,
body.register .register-company-info-heading,
body.register form h4 {
  color: var(--sp-brand) !important;
  text-shadow: none !important;
  text-align: left !important;
  font-weight: 800;
  font-family: 'Manrope', var(--sp-font);
  border-bottom: 2px solid var(--sp-brand-soft);
  padding-bottom: 8px;
  margin-bottom: 18px;
}
body.register form .control-label,
body.register form label { color: var(--sp-ink) !important; }

/* -- 7b. Customer/KB header: sticky on scroll (not on the photo login/register) */
body.customers:not(.customers_login):not(.register) .navbar.header {
  position: sticky !important;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(16,24,40,.07);
}

/* -- 7c. KB hero: search section on a photo-backed rounded band ----------- */
body.customers .container > .row:has(.kb-search-heading) {
  position: relative;
  background:
    linear-gradient(rgba(6,16,28,.58), rgba(6,16,28,.5)),
    url('/assets/smartpalm/img/login-bg.jpg') center 35% / cover no-repeat;
  border-radius: 18px;
  padding: 54px 24px 46px;
  margin: 18px 0 26px;
  box-shadow: var(--sp-shadow-md);
  overflow: hidden;
}
body.customers .container > .row:has(.kb-search-heading) .kb-search-heading {
  color: #ffffff !important;
  text-shadow: 0 2px 22px rgba(0,0,0,.55);
}
body.customers .container > .row:has(.kb-search-heading) .panel_s {
  background: rgba(255,255,255,.97);
  box-shadow: var(--sp-shadow-md);
}

/* -- 7d. KB article: widen the text column, narrow the related column ----- */
body.customers .container .row:has(> .col-md-8 + .col-md-4) > .col-md-8 { width: 72% !important; }
body.customers .container .row:has(> .col-md-8 + .col-md-4) > .col-md-4 { width: 28% !important; }
body.customers .kb-article, body.customers .article-content { font-size: 15.5px; line-height: 1.7; }

/* ========================================================================
   STAGE 8 — Knowledge Base: full photo background + floating white cards
   Scoped to KB pages via body:has(.kb-search-heading). Supersedes 6c/7c hero.
   ======================================================================== */
body.customers:has(.kb-search-heading) { background: #0A1B29 !important; }
body.customers:has(.kb-search-heading)::before {
  content: ''; position: fixed; inset: 0; z-index: 0;
  background: url('/assets/smartpalm/img/login-bg.jpg') center center / cover no-repeat;
}
body.customers:has(.kb-search-heading)::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,16,28,.55) 0%, rgba(6,16,28,.44) 40%, rgba(6,16,28,.62) 100%);
}
body.customers:has(.kb-search-heading) > *,
body.customers:has(.kb-search-heading) .navbar.header,
body.customers:has(.kb-search-heading) .container,
body.customers:has(.kb-search-heading) footer { position: relative; z-index: 2; }

/* CRITICAL: the Perfex wrappers carry a solid light canvas fill that paints
   OVER the fixed photo (they sit at z-index:2). Make them transparent so the
   z-index:0 photo shows through. The white article card stays opaque itself. */
body.customers:has(.kb-search-heading) #wrapper,
body.customers:has(.kb-search-heading) #content,
body.customers:has(.kb-search-heading) .content,
body.customers:has(.kb-search-heading) .jumbotron,
body.customers:has(.kb-search-heading) .kb-search-jumbotron {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* the hero jumbotron: strip its bulky default padding so the search band sits
   neatly over the photo instead of a tall empty box */
body.customers:has(.kb-search-heading) .jumbotron.kb-search-jumbotron {
  padding: 10px 0 6px !important;
  margin-bottom: 6px !important;
  border-radius: 0 !important;
}

/* Frosted sticky header */
body.customers:has(.kb-search-heading) .navbar.header {
  background: rgba(255,255,255,.93) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 2px 18px rgba(0,0,0,.16);
}

/* Search hero: text over the page photo, no contained band */
body.customers:has(.kb-search-heading) .container > .row:has(.kb-search-heading) {
  background: none !important; box-shadow: none !important; border-radius: 0 !important;
  padding: 46px 0 22px !important; margin: 6px 0 16px !important; overflow: visible !important;
}
body.customers:has(.kb-search-heading) .kb-search-heading {
  color: #ffffff !important; text-shadow: 0 2px 24px rgba(0,0,0,.6); font-size: 36px;
}
body.customers:has(.kb-search-heading) .container > .row:has(.kb-search-heading) .panel_s {
  background: transparent !important; border: none !important; box-shadow: none !important;
}

/* Content: ONE white card wraps the whole article+related section (grid intact,
   so the two columns stay side by side and never wrap). */
body.customers:has(.kb-search-heading) .section-knowledge-base {
  background: #ffffff !important;
  border-radius: 18px;
  box-shadow: 0 22px 55px rgba(0,0,0,.30);
  padding: 32px 32px;
  margin: 0 0 32px;
}
/* Reset the columns to fit exactly inside the card (article 70 / related 30) */
body.customers:has(.kb-search-heading) .section-knowledge-base .row > .col-md-8 {
  width: 70% !important;
  padding: 0 26px 0 4px !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body.customers:has(.kb-search-heading) .section-knowledge-base .row > .col-md-4 {
  width: 30% !important;
  padding: 0 4px 0 26px !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-left: 1px solid var(--sp-border);
}
/* Home category tiles as cards */
body.customers:has(.kb-search-heading) .kbgroups .panel_s,
body.customers:has(.kb-search-heading) .knowledge-base-groups .panel_s {
  background: #ffffff !important;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.24);
}
/* inner panels inside the section shouldn't add their own card */
body.customers:has(.kb-search-heading) .section-knowledge-base .panel_s {
  background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important;
}
/* article typography + related links */
body.customers:has(.kb-search-heading) .col-md-8 { color: var(--sp-body); font-size: 15.5px; line-height: 1.7; }
body.customers:has(.kb-search-heading) .col-md-8 h1,
body.customers:has(.kb-search-heading) .col-md-8 h2,
body.customers:has(.kb-search-heading) .col-md-8 h3 { color: var(--sp-ink); }
body.customers:has(.kb-search-heading) .col-md-4 a { color: var(--sp-ink); font-weight: 600; }
body.customers:has(.kb-search-heading) .col-md-4 a:hover { color: var(--sp-brand); }
/* footer readable on the photo */
body.customers:has(.kb-search-heading) footer,
body.customers:has(.kb-search-heading) .footer { color: rgba(255,255,255,.85) !important; background: transparent !important; }

/* ========================================================================
   STAGE 9 — Sidebar Chat item fix + modern Chat & Mailbox interfaces
   Scoped to body.prchat / body.mailbox. Reversible via custom.css.
   MARKER: STAGE9-CHAT-MAILBOX
   ======================================================================== */

/* ---- 9a. Sidebar "chat" menu item: label -> "Chat", add real icon ------- */
/* Label was lowercase "chat"; capitalize the visible text. */
.menu-item-prchat > a .menu-text,
.menu-item-prchat > a .sub-menu-text,
.menu-item-prchat > a { text-transform: capitalize !important; }
/* Icon class fa-comments-o is a Font Awesome 4 name that renders blank under
   the Font Awesome 6 the theme actually loads. Force a valid solid glyph. */
.menu-item-prchat i.menu-icon {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
  font-weight: 900 !important;
}
.menu-item-prchat i.menu-icon::before { content: "\f086" !important; } /* comments */

/* ============================ CHAT (prchat) ============================== */
body.prchat #frame {
  border: 1px solid var(--sp-border);
  border-radius: 16px;
  box-shadow: var(--sp-shadow-md);
  overflow: hidden;
  background: var(--sp-surface);
}

/* Left panel */
body.prchat #frame #sidepanel {
  background: var(--sp-surface);
  border-right: 1px solid var(--sp-border);
}
/* Profile / brand header */
body.prchat #frame #sidepanel #profile {
  background: var(--sp-surface);
  border-bottom: 1px solid var(--sp-border);
  padding: 14px 16px;
}
body.prchat #frame #sidepanel #profile .wrap p {
  color: var(--sp-ink) !important;
  font-weight: 800;
  font-family: 'Manrope', var(--sp-font);
}
body.prchat #frame #sidepanel #profile .wrap img {
  border-radius: 50% !important;
  width: 40px !important; height: 40px !important; object-fit: cover;
  border: 1px solid var(--sp-border);
}
/* Search pill */
body.prchat #frame #sidepanel #search { border-bottom: 1px solid var(--sp-border); }
body.prchat #frame #sidepanel #search input {
  background: var(--sp-canvas) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: var(--sp-radius-pill) !important;
  color: var(--sp-ink) !important;
  height: 40px !important;
}
body.prchat #frame #sidepanel #search input:focus {
  border-color: var(--sp-brand) !important;
  box-shadow: 0 0 0 3px var(--sp-brand-soft) !important;
}
/* Contact rows */
body.prchat #frame #sidepanel #contacts ul li.contact {
  padding: 9px 10px !important;
  margin: 2px 8px !important;
  border-radius: 12px !important;
  transition: background .15s ease;
}
body.prchat #frame #sidepanel #contacts ul li.contact:hover { background: var(--sp-canvas) !important; }
body.prchat #frame #sidepanel #contacts ul li.contact.active {
  background: var(--sp-brand-soft) !important;
  box-shadow: inset 3px 0 0 var(--sp-brand);
}
body.prchat #frame #sidepanel #contacts ul li.contact .wrap img {
  border-radius: 50% !important;
  width: 46px !important; height: 46px !important; object-fit: cover;
}
body.prchat #frame #sidepanel #contacts ul li.contact .wrap .meta .name {
  color: var(--sp-ink) !important; font-weight: 700 !important;
}
body.prchat #frame #sidepanel #contacts ul li.contact .wrap .meta .preview { color: var(--sp-muted) !important; }
body.prchat #frame #sidepanel #contacts ul li.contact .wrap .meta p.pull-right {
  color: var(--sp-muted) !important; font-size: 11px !important; font-weight: 600;
}
/* Online dot */
body.prchat #frame #sidepanel #contacts ul li.contact .wrap span.online,
body.prchat #frame #sidepanel #contacts ul li.contact.active span.online {
  background: #22C55E !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 1px var(--sp-border);
}

/* Right conversation panel */
body.prchat #frame .content { background: #EEF1F4; }
body.prchat #frame .content .contact-profile {
  background: var(--sp-surface) !important;
  border-bottom: 1px solid var(--sp-border);
  box-shadow: var(--sp-shadow-sm);
}
body.prchat #frame .content .contact-profile img {
  border-radius: 50% !important; width: 42px !important; height: 42px !important;
  object-fit: cover; border: 1px solid var(--sp-border);
}
body.prchat #frame .content .contact-profile p { color: var(--sp-ink) !important; font-weight: 700; }
body.prchat #frame .contact_role { color: var(--sp-muted) !important; }
body.prchat #frame .content .contact-profile .social-media i,
body.prchat #frame .contact-profile i { color: var(--sp-muted) !important; }

/* Message area + bubbles */
body.prchat #frame .content .messages { background: #EEF1F4; }
body.prchat #frame .content .messages ul li img:not(.emoji) { border-radius: 50% !important; }
body.prchat #frame .content .messages ul li p {
  border-radius: 16px !important;
  box-shadow: var(--sp-shadow-sm);
  font-size: 14px !important;
  line-height: 1.5 !important;
  padding: 9px 14px !important;
}
/* incoming */
body.prchat #frame .content .messages ul li p.friend,
body.prchat #frame .content .messages ul li.replies p {
  background: var(--sp-surface) !important;
  color: var(--sp-ink) !important;
  border: 1px solid var(--sp-border) !important;
  border-bottom-left-radius: 6px !important;
}
/* outgoing */
body.prchat #frame .content .messages ul li p.you,
body.prchat #frame .content .messages ul li.sent p {
  background: var(--sp-brand) !important;
  color: #ffffff !important;
  border: 1px solid var(--sp-brand) !important;
  border-bottom-right-radius: 6px !important;
}
body.prchat #frame .content .messages ul li.sent p a { color: #eafff4 !important; text-decoration: underline; }

/* Input bar */
body.prchat #frame .content .message-input { background: var(--sp-surface) !important; border-top: 1px solid var(--sp-border); }
body.prchat #frame .content .message-input .wrap textarea {
  background: var(--sp-canvas) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: 22px !important;
  padding: 10px 16px !important;
  color: var(--sp-ink) !important;
}
body.prchat #frame .content .message-input .wrap textarea:focus {
  border-color: var(--sp-brand) !important;
  box-shadow: 0 0 0 3px var(--sp-brand-soft) !important;
}
body.prchat #frame .content .message-input .wrap button {
  background: var(--sp-brand) !important;
  border: none !important;
  border-radius: 50% !important;
  color: #fff !important;
}
body.prchat #frame .content .message-input .wrap button:hover { background: var(--sp-brand-600) !important; }
body.prchat #frame .content .message-input .wrap button i.fa-paper-plane { color: #fff !important; }
/* attach icon (fa-plus-square-o is FA4 -> blank in FA6): show a paperclip */
body.prchat #frame .content .message-input .wrap i.fa-plus-square-o,
body.prchat #frame .content .message-input .wrap .attachment {
  color: var(--sp-muted) !important;
  font-family: "Font Awesome 6 Free", FontAwesome !important; font-weight: 900 !important;
}
body.prchat #frame .content .message-input .wrap i.fa-plus-square-o::before { content: "\f0c6" !important; } /* paperclip */

/* bottom Theme / Settings buttons */
body.prchat #frame .dropbtn { color: var(--sp-muted) !important; }

/* =========================== MAILBOX ==================================== */
/* Compose button -> brand, prominent */
body.mailbox .col-md-3 > .panel_s.mbot5 {
  border: none !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; margin-bottom: 12px !important;
}
body.mailbox a.btn.btn-info.display-block {
  background: var(--sp-brand) !important;
  border-color: var(--sp-brand) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-weight: 700 !important;
  box-shadow: var(--sp-shadow-sm);
}
body.mailbox a.btn.btn-info.display-block:hover { background: var(--sp-brand-600) !important; border-color: var(--sp-brand-600) !important; }

/* Folder navigation */
body.mailbox ul.customer-tabs {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--sp-shadow-sm);
}
body.mailbox ul.customer-tabs > li { margin: 2px 0; float: none; border: none !important; }
body.mailbox ul.customer-tabs > li > a {
  border: none !important;
  border-radius: 10px !important;
  color: var(--sp-body) !important;
  padding: 10px 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
body.mailbox ul.customer-tabs > li > a:hover { background: var(--sp-canvas) !important; }
body.mailbox ul.customer-tabs > li.active > a,
body.mailbox ul.customer-tabs > li.active > a:hover,
body.mailbox ul.customer-tabs > li.active > a:focus {
  background: var(--sp-brand-soft) !important;
  color: var(--sp-brand-700) !important;
  box-shadow: inset 3px 0 0 var(--sp-brand);
  border: none !important;
}
body.mailbox ul.customer-tabs > li > a i.menu-icon { color: inherit !important; width: 18px; text-align: center; }

/* Message list as a clean card */
body.mailbox .col-md-9 .panel_s {
  border: 1px solid var(--sp-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--sp-shadow-sm) !important;
  overflow: hidden;
}
body.mailbox table.table-mailbox { margin: 0 !important; border: none !important; }
body.mailbox table.table-mailbox > tbody > tr { border-bottom: 1px solid var(--sp-border) !important; transition: background .12s ease; cursor: pointer; }
body.mailbox table.table-mailbox > tbody > tr:hover { background: var(--sp-brand-soft) !important; }
body.mailbox table.table-mailbox > tbody > tr > td { border-top: none !important; padding: 12px 14px !important; vertical-align: middle !important; }
body.mailbox table.table-mailbox img,
body.mailbox table.table-mailbox .rounded-circle { border-radius: 50% !important; object-fit: cover; }
body.mailbox .media-title, body.mailbox table.table-mailbox strong { color: var(--sp-ink) !important; }
body.mailbox .media-body .small, body.mailbox .table-mailbox .text-dark { color: var(--sp-muted) !important; }

/* Reading pane */
body.mailbox .eamil-body, body.mailbox .email-body { color: var(--sp-body) !important; font-size: 14.5px; line-height: 1.7; }
body.mailbox .media-title { font-weight: 700; }

/* ========================================================================
   STAGE 10 — Chat composer/layout polish + mailbox folder icons
   MARKER: STAGE10-CHAT-UX
   ======================================================================== */

/* ---- Mailbox: folder icons that use FA4 outline names (blank in FA6) ---- */
body.mailbox ul.customer-tabs i.fa-envelope-o,
body.mailbox ul.customer-tabs i.fa-file-o,
body.mailbox ul.customer-tabs i.fa-trash-o {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
  font-weight: 900 !important;
}
body.mailbox ul.customer-tabs i.fa-envelope-o::before { content: "\f1d8" !important; } /* paper-plane: Sent  */
body.mailbox ul.customer-tabs i.fa-file-o::before    { content: "\f15b" !important; } /* file: Draft         */
body.mailbox ul.customer-tabs i.fa-trash-o::before   { content: "\f1f8" !important; } /* trash: Trash        */

/* ---- Chat: fit the whole widget inside the viewport --------------------- */
/* The module sizes #frame a few px taller than the viewport, pushing the
   composer to (and past) the bottom edge with a large empty gap above it.
   Constrain the three containers; the message list is %-based and follows,
   so the composer docks neatly just above the fold with breathing room.    */
body.prchat #frame,
body.prchat #frame #sidepanel,
body.prchat #frame .content { height: calc(100vh - 84px) !important; }

/* ---- Chat composer: a clean, modern single-row input bar ---------------- */
body.prchat #frame .content .message-input {
  padding: 10px 16px !important;
  background: var(--sp-surface) !important;
  border-top: 1px solid var(--sp-border) !important;
}
body.prchat #frame .content .message-input .wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
body.prchat #frame .content .message-input .wrap textarea {
  flex: 1 1 auto !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 11px 16px !important;
  resize: none !important;
  line-height: 20px !important;
}
/* attach + search icons: inline, muted, no float/absolute positioning */
body.prchat #frame .content .message-input .wrap i.attachment,
body.prchat #frame .content .message-input .wrap i.search_messages,
body.prchat #frame .content .message-input .wrap i.fa-plus-square-o,
body.prchat #frame .content .message-input .wrap i.fa-cogs {
  position: static !important;
  float: none !important;
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  margin: 0 !important;
  font-size: 18px !important;
  color: var(--sp-muted) !important;
  cursor: pointer;
  flex: 0 0 auto !important;
}
body.prchat #frame .content .message-input .wrap i.attachment:hover,
body.prchat #frame .content .message-input .wrap i.search_messages:hover { color: var(--sp-brand) !important; }
/* send button: solid brand circle, centered icon */
body.prchat #frame .content .message-input .wrap button.enterBtn,
body.prchat #frame .content .message-input .wrap button.submit {
  position: static !important;
  float: none !important;
  top: auto !important; right: auto !important; bottom: auto !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--sp-brand) !important;
  border: none !important;
  border-radius: 50% !important;
  color: #fff !important;
}
body.prchat #frame .content .message-input .wrap button.enterBtn:hover { background: var(--sp-brand-600) !important; }
body.prchat #frame .content .message-input .wrap button i.fa-paper-plane { color: #fff !important; margin: 0 !important; font-size: 16px !important; }

/* ========================================================================
   STAGE 11 — Chat bottom footer (Theme/Settings) + composer icon polish
   MARKER: STAGE11-CHAT-FOOTER
   ======================================================================== */

/* The Theme/Settings bar (#bottom-bar) is a transparent absolute strip that
   overlaps the last conversations. Make it a clean opaque footer, and pad the
   list so nothing hides behind it. */
body.prchat #frame #sidepanel #contacts { padding-bottom: 58px !important; }
body.prchat #frame #sidepanel #contacts #bottom-bar {
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 52px !important;
  background: var(--sp-surface) !important;
  border-top: 1px solid var(--sp-border) !important;
  box-shadow: 0 -2px 10px rgba(16,24,40,.05);
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 12px !important;
  z-index: 6 !important;
}

/* Theme + Settings: equal, clean, muted -> brand on hover */
body.prchat #frame #bottom-bar > button#switchTheme,
body.prchat #frame #bottom-bar > button#settings {
  background: transparent !important;
  border: none !important;
  border-radius: 9px !important;
  color: var(--sp-muted) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex: 1 1 0 !important;
  transition: background .12s ease, color .12s ease;
}
body.prchat #frame #bottom-bar > button#switchTheme:hover,
body.prchat #frame #bottom-bar > button#settings:hover {
  background: var(--sp-canvas) !important;
  color: var(--sp-brand) !important;
}
body.prchat #frame #bottom-bar button i { font-size: 15px !important; margin: 0 !important; color: inherit !important; }
/* Theme text (dropbtn) inherits the button look */
body.prchat #frame #bottom-bar #theme_options .dropbtn {
  color: inherit !important; background: transparent !important; border: none !important;
  padding: 0 !important; font-weight: 600 !important;
}
/* Theme icon fa-ioxhost is a stray brand glyph -> light/dark "adjust" icon */
body.prchat #frame #bottom-bar #switchTheme i.fa-ioxhost {
  font-family: "Font Awesome 6 Free", FontAwesome !important; font-weight: 900 !important;
}
body.prchat #frame #bottom-bar #switchTheme i.fa-ioxhost::before { content: "\f042" !important; } /* adjust */
/* Theme dropdown popup (Light / Dark) */
body.prchat #frame #bottom-bar .dropdown-content {
  border-radius: 10px !important;
  border: 1px solid var(--sp-border) !important;
  box-shadow: var(--sp-shadow-md) !important;
  overflow: hidden !important;
  padding: 4px !important;
}
body.prchat #frame #bottom-bar .dropdown-content a {
  color: var(--sp-body) !important; border-radius: 7px !important; padding: 8px 12px !important;
}
body.prchat #frame #bottom-bar .dropdown-content a:hover {
  background: var(--sp-brand-soft) !important; color: var(--sp-brand-700) !important;
}

/* Composer: use a clear magnifier for the search-messages control (was cogs) */
body.prchat #frame .content .message-input .wrap i.search_messages.fa-cogs::before,
body.prchat #frame .content .message-input .wrap i.fa-cogs.search_messages::before { content: "\f002" !important; } /* search */

/* ========================================================================
   STAGE 12 — Fix composer overflow: fit controls INSIDE the 44px input bar
   (Stage 10 sized the textarea/button at 44px + padding, so they spilled
   below the bar and looked detached/"covered". Size them to fit.)
   MARKER: STAGE12-COMPOSER-FIT
   ======================================================================== */
body.prchat #frame .content .message-input {
  height: 44px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
}
body.prchat #frame .content .message-input .wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 44px !important;
  width: 100% !important;
}
body.prchat #frame .content .message-input .wrap textarea {
  height: 32px !important;
  min-height: 32px !important;
  padding: 6px 14px !important;
  line-height: 20px !important;
  border-radius: 18px !important;
  flex: 1 1 auto !important;
  width: auto !important;
  margin: 0 !important;
  resize: none !important;
}
body.prchat #frame .content .message-input .wrap button.enterBtn,
body.prchat #frame .content .message-input .wrap button.submit {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
body.prchat #frame .content .message-input .wrap i.attachment,
body.prchat #frame .content .message-input .wrap i.search_messages {
  font-size: 16px !important;
  flex: 0 0 auto !important;
}

/* ========================================================================
   STAGE 13 — Floating chat widget (prchat toggled popup) rebrand + polish
   #membersContent = the flying widget; .topInfo header, .chat-footer footer,
   both were the stock blue (#546BF1). Rebrand to palm green + modernize.
   MARKER: STAGE13-FLYING-CHAT
   ======================================================================== */

/* Widget shell: rounded top, soft shadow, hairline border (no overflow:hidden
   so the settings/colour dropdowns are not clipped). */
#membersContent {
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 16px 44px rgba(16,24,40,.24) !important;
  border: 1px solid var(--sp-border) !important;
  background: var(--sp-surface) !important;
}

/* Header bar */
#membersContent .topInfo {
  background: var(--sp-brand) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 11px 14px !important;
  font-weight: 700 !important;
  font-family: 'Manrope', var(--sp-font) !important;
}
#membersContent .topInfo,
#membersContent .topInfo * { color: #ffffff !important; }
#membersContent .topInfo i { opacity: .95; }

/* Footer bar */
#membersContent .chat-footer {
  background: var(--sp-brand) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 9px 12px !important;
}
#membersContent .chat-footer,
#membersContent .chat-footer span,
#membersContent .chat-footer i { color: #ffffff !important; }
#membersContent .chat-footer i {
  opacity: .9;
  transition: opacity .12s ease, transform .12s ease;
  cursor: pointer;
}
#membersContent .chat-footer i:hover { opacity: 1; transform: translateY(-1px); }

/* Contact list */
#membersContent .scroll { background: var(--sp-surface) !important; }
#membersContent .scroll > ul > li,
#membersContent .scroll li.member,
#membersContent .scroll .single-member {
  border-radius: 10px !important;
  margin: 2px 6px !important;
  padding: 7px 9px !important;
  transition: background .12s ease;
}
#membersContent .scroll > ul > li:hover,
#membersContent .scroll li.member:hover { background: var(--sp-canvas) !important; }
#membersContent .scroll img { border-radius: 50% !important; object-fit: cover; }
#membersContent .scroll a,
#membersContent .scroll .name,
#membersContent .scroll li span:not(.online):not(.offline) { color: var(--sp-ink) !important; }

/* Online / offline status dots */
#membersContent .online,
#membersContent .scroll .online { background: #22C55E !important; box-shadow: 0 0 0 2px #fff; }
#membersContent .offline,
#membersContent .scroll .offline { background: #C2C8D0 !important; box-shadow: 0 0 0 2px #fff; }

/* Scrollbar tidy */
#membersContent .scroll::-webkit-scrollbar { width: 8px; }
#membersContent .scroll::-webkit-scrollbar-thumb { background: var(--sp-border-2); border-radius: 8px; }

/* ========================================================================
   STAGE 14 — Fix flying-chat member list collapsing to a narrow column
   The Stage 13 header styling caused .scroll / #members-list to shrink to
   content width. Force them full width and lay each row out as a clean flex
   row (status dot + name on the left, avatar on the right).
   MARKER: STAGE14-FLYCHAT-FIX
   ======================================================================== */
#membersContent .scroll,
#membersContent #members-list { width: 100% !important; box-sizing: border-box !important; }

#membersContent #members-list a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  padding: 7px 12px !important;
  margin: 1px 0 !important;
  border-radius: 10px !important;
}
#membersContent #members-list a:hover { background: var(--sp-canvas) !important; }
#membersContent #members-list a .user-name {
  flex: 1 1 auto !important;
  color: var(--sp-ink) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#membersContent #members-list a.off .user-name { color: var(--sp-muted) !important; }
#membersContent #members-list a img.imgFriend {
  margin-left: auto !important;
  float: none !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  object-fit: cover !important;
  flex: 0 0 auto !important;
}

/* ========================================================================
   STAGE 15 — Conversation popup (.pusherChatBox flyout) polish + contain
   Fixes spillover (content bled past the box) and gives it the same clean
   bubble/brand look as the main chat.
   MARKER: STAGE15-CHAT-POPUP
   ======================================================================== */
.pusherChatBox {
  border-radius: 14px !important;
  box-shadow: 0 16px 44px rgba(16,24,40,.24) !important;
  border: 1px solid var(--sp-border) !important;
  overflow: hidden !important;         /* contain the few-px bleed at edges */
  background: var(--sp-surface) !important;
}

/* Header */
.pusherChatBox .chat-head,
.pusherChatBox chathead.chat-head {
  background: var(--sp-brand) !important;
  color: #ffffff !important;
}
.pusherChatBox .chat-head *,
.pusherChatBox .userName { color: #ffffff !important; }

/* Message bubbles: outgoing (.you) green right, incoming (.friend) white left */
.pusherChatBox .message_container { margin: 5px 0 !important; }
.pusherChatBox .message_container p.you {
  background: var(--sp-brand) !important;
  color: #ffffff !important;
  border-radius: 14px 14px 4px 14px !important;
  display: inline-block !important;
  padding: 7px 12px !important;
  max-width: 76% !important;
  word-wrap: break-word !important;
  box-shadow: var(--sp-shadow-sm);
}
.pusherChatBox .message_container p.friend {
  background: #ffffff !important;
  color: var(--sp-ink) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: 14px 14px 14px 4px !important;
  display: inline-block !important;
  padding: 7px 12px !important;
  max-width: 76% !important;
  word-wrap: break-word !important;
  box-shadow: var(--sp-shadow-sm);
}

/* Avatars */
.pusherChatBox .myProfilePic,
.pusherChatBox .friendProfilePic {
  border-radius: 50% !important;
  width: 26px !important;
  height: 26px !important;
  object-fit: cover !important;
}

/* Composer */
.pusherChatBox textarea.chatbox {
  border-radius: 12px !important;
  border: 1px solid var(--sp-border) !important;
  padding: 8px 12px !important;
  color: var(--sp-ink) !important;
}
.pusherChatBox textarea.chatbox:focus {
  border-color: var(--sp-brand) !important;
  box-shadow: 0 0 0 3px var(--sp-brand-soft) !important;
}
.pusherChatBox .enterBtn {
  background: var(--sp-brand) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
}
.pusherChatBox .enterBtn:hover { background: var(--sp-brand-600) !important; }
.pusherChatBox .enterBtn i.fa-paper-plane { color: #ffffff !important; }

/* ========================================================================
   STAGE 16 — Flying chat: header breathing room + fix green block over
   "Online: 1" (the .online status-dot colour wrongly hit the footer's
   .online count container).
   MARKER: STAGE16-FLYCHAT-FIX2
   ======================================================================== */

/* Header: taller, with a clear separator so the title never touches row 1 */
#membersContent .topInfo {
  min-height: 46px !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid rgba(255,255,255,.20) !important;
  line-height: 1.2 !important;
}
#membersContent .scroll { padding-top: 4px !important; }

/* Footer: the "Online: N" wrapper is a div.online — must NOT get the green
   dot fill. Reset it and keep the footer text/icons clean and readable. */
#membersContent .chat-footer .online {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
#membersContent .chat-footer .online,
#membersContent .chat-footer .online * { color: #ffffff !important; }
/* the settings gear button must stay a plain icon, never a coloured block */
#membersContent .chat-footer .btn,
#membersContent .chat-footer .btn-primary,
#membersContent .chat-footer .dropdown-toggle {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  padding: 0 6px !important;
}

/* ========================================================================
   STAGE 17 — Sidebar redesign, phase 1: white theme, unified logo,
   multicolour icons, modern toggle icon. (Behaviour/collapse rail = later.)
   MARKER: STAGE17-SIDEBAR-WHITE
   ======================================================================== */

/* ---- White surface (overrides the dark Stage-1 treatment) -------------- */
#menu,
#menu .navigation,
#menu .slimScrollDiv { background: #ffffff !important; }
#menu { border-right: 1px solid var(--sp-border) !important; }

/* Logo area: same white as the rail, no separate coloured band; navy logo */
#menu #logo {
  background: #ffffff !important;
  border-bottom: 1px solid var(--sp-border) !important;
}
#menu #logo a.logo {
  background-image: url('/uploads/company/smartpalm-logo-navy.png') !important;
}

/* ---- Menu links: dark text on white ------------------------------------ */
#side-menu > li > a { color: var(--sp-body) !important; }
#side-menu > li > a .menu-text,
#side-menu > li > a .sub-menu-text,
#side-menu > li > a span { color: var(--sp-ink) !important; }
#side-menu > li > a:hover { background: var(--sp-canvas) !important; }
#side-menu > li > a:hover .menu-text { color: var(--sp-ink) !important; }

/* Active item: soft-green pill + green accent + green label */
#side-menu > li.active > a,
#side-menu > li > a.active {
  background: var(--sp-brand-soft) !important;
  box-shadow: inset 3px 0 0 var(--sp-brand) !important;
}
#side-menu > li.active > a .menu-text,
#side-menu > li > a.active .menu-text { color: var(--sp-brand-700) !important; }

/* Fly-out / nested submenus also white with dark text */
#side-menu .sub-menu,
#side-menu li ul,
#side-menu ul.collapse {
  background: #ffffff !important;
  border: 1px solid var(--sp-border) !important;
}
#side-menu .sub-menu a,
#side-menu li ul li a { color: var(--sp-body) !important; }
#side-menu .sub-menu a:hover,
#side-menu li ul li a:hover { background: var(--sp-canvas) !important; color: var(--sp-ink) !important; }
#side-menu .sub-menu li.active a { color: var(--sp-brand-700) !important; background: var(--sp-brand-soft) !important; }

/* Sidebar scrollbar tidy on white */
#menu .slimScrollBar { background: var(--sp-border-2) !important; }

/* ---- Multicoloured icons ----------------------------------------------- */
.menu-item-dashboard i.menu-icon{color:#3B82F6!important}
.menu-item-customers i.menu-icon{color:#8B5CF6!important}
.menu-item-tasks i.menu-icon{color:#22C55E!important}
.menu-item-si_timesheet_menu i.menu-icon{color:#F59E0B!important}
.menu-item-HRM i.menu-icon{color:#EC4899!important}
.menu-item-perfshield i.menu-icon{color:#14B8A6!important}
.menu-item-FILE_SHARING i.menu-icon{color:#6366F1!important}
.menu-item-prchat i.menu-icon{color:#0EA5E9!important}
.menu-item-mailbox i.menu-icon{color:#EF4444!important}
.menu-item-sales i.menu-icon{color:#10B981!important}
.menu-item-feedback i.menu-icon{color:#F97316!important}
.menu-item-subscriptions i.menu-icon{color:#06B6D4!important}
.menu-item-expenses i.menu-icon{color:#F43F5E!important}
.menu-item-contracts i.menu-icon{color:#A855F7!important}
.menu-item-projects i.menu-icon{color:#2563EB!important}
.menu-item-recruitment i.menu-icon{color:#D946EF!important}
.menu-item-commission i.menu-icon{color:#84CC16!important}
.menu-item-team_password i.menu-icon{color:#EAB308!important}
.menu-item-account_planning i.menu-icon{color:#0D9488!important}
.menu-item-task_bookmarks i.menu-icon{color:#F59E0B!important}
.menu-item-support i.menu-icon{color:#0891B2!important}
.menu-item-api-options i.menu-icon{color:#64748B!important}
.menu-item-leads i.menu-icon{color:#16A34A!important}
.menu-item-estimate_request i.menu-icon{color:#4F46E5!important}
.menu-item-knowledge-base i.menu-icon{color:#EA580C!important}
.menu-item-utilities i.menu-icon{color:#475569!important}
.menu-item-reports i.menu-icon{color:#7C3AED!important}
.menu-item-purchase i.menu-icon{color:#059669!important}
/* Setup (no menu-item class): neutral slate */
#side-menu > li:not([class*="menu-item"]) > a i.menu-icon{color:#6B7280!important}

/* Fix Font Awesome 4 blanks in the rail (icon has no glyph in FA6) */
.menu-item-account_planning i.fa-address-card-o{font-family:"Font Awesome 6 Free"!important;font-weight:900!important}
.menu-item-account_planning i.fa-address-card-o::before{content:"\f2bb"!important}

/* ---- Modern open/close toggle icon (was fa-align-left) ------------------ */
.hide-menu i.fa-align-left{font-family:"Font Awesome 6 Free"!important;font-weight:900!important}
.hide-menu i.fa-align-left::before{content:"\f550"!important} /* bars-staggered */

/* ========================================================================
   STAGE 18 — Sidebar redesign phase 2: collapse-to-rail + Setup panel white
   Repurposes Perfex's body.hide-sidebar (was a full hide) into a 64px icon
   rail that expands on hover. #menu stays position:absolute (NOT fixed — the
   fixed change previously broke the Setup slide-out). Setup panel whitened.
   MARKER: STAGE18-RAIL-SETUP
   ======================================================================== */

/* ---- Collapse-to-rail (body.hide-sidebar => 64px icon rail) ------------- */
body.hide-sidebar #menu {
  margin-left: 0 !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  overflow: visible !important;
  transition: width .18s ease, min-width .18s ease, max-width .18s ease !important;
}
body.hide-sidebar #wrapper { margin-left: 64px !important; transition: margin-left .18s ease !important; }

/* Logo hidden in the rail (wide logo won't fit 64px) */
body.hide-sidebar #menu #logo { padding: 0 !important; }
body.hide-sidebar #menu #logo a.logo { background-image: none !important; }

/* Hide labels, carets and badges in the rail */
body.hide-sidebar #side-menu > li > a .menu-text,
body.hide-sidebar #side-menu > li > a .sub-menu-text,
body.hide-sidebar #side-menu .menu-badge,
body.hide-sidebar #side-menu > li > a .badge,
body.hide-sidebar #side-menu > li > a > .pull-right,
body.hide-sidebar #side-menu > li > a i.pull-right { display: none !important; }

/* Center icons in the rail */
body.hide-sidebar #side-menu > li > a {
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.hide-sidebar #side-menu > li > a i.menu-icon {
  margin: 0 auto !important;
  float: none !important;
  display: block !important;
  font-size: 18px !important;
}

/* Hover-expand: overlay back to full width, restore labels/logo */
body.hide-sidebar #menu:hover {
  width: 230px !important;
  min-width: 230px !important;
  max-width: 230px !important;
  z-index: 1050 !important;
  box-shadow: 8px 0 30px rgba(16,24,40,.16) !important;
}
body.hide-sidebar #menu:hover #logo a.logo { background-image: url('/uploads/company/smartpalm-logo-navy.png') !important; }
body.hide-sidebar #menu:hover #side-menu > li > a { text-align: left !important; padding-left: 12px !important; }
body.hide-sidebar #menu:hover #side-menu > li > a .menu-text,
body.hide-sidebar #menu:hover #side-menu > li > a .sub-menu-text { display: inline-block !important; }
body.hide-sidebar #menu:hover #side-menu > li > a i.menu-icon { margin: 0 8px 0 0 !important; float: left !important; display: inline-block !important; }

/* ---- Setup slide-out panel: white to match the rail -------------------- */
#setup-menu-wrapper {
  background: #ffffff !important;
  border-right: 1px solid var(--sp-border) !important;
  box-shadow: 8px 0 30px rgba(16,24,40,.14) !important;
}
#setup-menu-wrapper .nav > li > a,
#setup-menu-wrapper a { color: var(--sp-body) !important; }
#setup-menu-wrapper .nav > li > a:hover { background: var(--sp-canvas) !important; color: var(--sp-ink) !important; }
#setup-menu-wrapper .nav > li.active > a,
#setup-menu-wrapper .nav > li > a.active {
  background: var(--sp-brand-soft) !important;
  color: var(--sp-brand-700) !important;
  box-shadow: inset 3px 0 0 var(--sp-brand);
}
#setup-menu-wrapper .nav-header,
#setup-menu-wrapper li.nav-header,
#setup-menu-wrapper .setup-menu-title { color: var(--sp-muted) !important; font-weight: 700 !important; }
#setup-menu-wrapper i { color: var(--sp-muted) !important; }

/* ========================================================================
   STAGE 19 — Sidebar profile block (footer) + rail logo mark
   MARKER: STAGE19-PROFILE-MARK
   ======================================================================== */

/* ---- Profile block pinned to the sidebar footer ------------------------ */
#sp-profile {
  position: fixed !important;
  bottom: 0; left: 0;
  width: 230px;
  box-sizing: border-box;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: #ffffff;
  border-top: 1px solid var(--sp-border);
  border-right: 1px solid var(--sp-border);
  z-index: 99;
  text-decoration: none !important;
  transition: width .18s ease, padding .18s ease;
}
#sp-profile:hover { background: var(--sp-canvas); }
#sp-profile .sp-pf-av {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto; border: 1px solid var(--sp-border);
}
#sp-profile .sp-pf-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
#sp-profile .sp-pf-name {
  font-weight: 700; color: var(--sp-ink); font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#sp-profile .sp-pf-sub { font-size: 11px; color: var(--sp-muted); }
#sp-profile .sp-pf-caret { color: var(--sp-muted); font-size: 12px; flex: 0 0 auto; }

/* keep the last nav items clear of the fixed footer */
#side-menu { padding-bottom: 66px !important; }

/* Rail: profile shows only the avatar, centered */
body.hide-sidebar #sp-profile { width: 64px; justify-content: center; padding: 10px 0; }
body.hide-sidebar #sp-profile .sp-pf-meta,
body.hide-sidebar #sp-profile .sp-pf-caret { display: none; }
/* Rail hover-expand restores it (it lives inside #menu, so #menu:hover applies) */
body.hide-sidebar #menu:hover #sp-profile { width: 230px; justify-content: flex-start; padding: 10px 14px; }
body.hide-sidebar #menu:hover #sp-profile .sp-pf-meta { display: flex; }
body.hide-sidebar #menu:hover #sp-profile .sp-pf-caret { display: block; }

/* ---- Rail logo mark: square favicon in the collapsed header ------------- */
body.hide-sidebar #menu #logo { display: flex !important; align-items: center; justify-content: center; }
body.hide-sidebar #menu #logo a.logo {
  background-image: url('/uploads/company/favicon.png') !important;
  background-size: 30px 30px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 100% !important;
  height: 100% !important;
}
/* on hover-expand, bring back the full navy wordmark */
body.hide-sidebar #menu:hover #logo a.logo {
  background-image: url('/uploads/company/smartpalm-logo-navy.png') !important;
  background-size: contain !important;
}

/* ========================================================================
   STAGE 20 — cooler whites, remove logo divider, hide rail carets,
   modern sidebar toggle icon.
   MARKER: STAGE20-COOL-TWEAKS
   ======================================================================== */

/* ---- Cooler system palette (redeclare tokens; later declaration wins) --- */
:root {
  --sp-surface: #FAFCFE;   /* cards/panels: cool near-white (was #FFFFFF)   */
  --sp-canvas:  #EEF2F8;   /* app background: cool light slate (was warm)   */
  --sp-border:  #E1E7F0;
  --sp-border-2:#CBD5E3;
}
/* Cool the sidebar / profile whites too (they were literal #fff) */
#menu,
#menu .navigation,
#menu .slimScrollDiv,
#menu #logo,
#sp-profile { background: var(--sp-surface) !important; }

/* ---- Remove the dividing line under the logo (seamless rail) ------------ */
#menu #logo { border-bottom: none !important; }

/* ---- Hide submenu carets/arrows in the collapsed rail ------------------- */
body.hide-sidebar #side-menu .arrow,
body.hide-sidebar #side-menu > li > a .arrow,
body.hide-sidebar #side-menu > li > a > span.arrow { display: none !important; }

/* ---- Modern sidebar toggle icon (was staggered bars) ------------------- */
.hide-menu i.fa-align-left {
  font-family: "Font Awesome 6 Free", FontAwesome !important;
  font-weight: 900 !important;
}
.hide-menu i.fa-align-left::before { content: "\f0db" !important; } /* table-columns: sidebar layout */

/* ========================================================================
   STAGE 21 — Unify logo section with sidebar (kill the dark spacer bar) +
   cleaner logo (brand mark + "SmartPalm" wordmark).
   MARKER: STAGE21-LOGO-UNIFY
   ======================================================================== */

/* The "divider" under the logo was the first <li> spacer with a dark
   translucent background. Make it transparent so logo + rail are one surface. */
#side-menu > li:first-child { background: transparent !important; }
#menu #logo { border: none !important; box-shadow: none !important; }

/* ---- New logo: asterisk brand mark + SmartPalm wordmark ---------------- */
#menu #logo { display: flex !important; align-items: center !important; padding: 0 16px !important; }
#menu #logo a.logo {
  background-image: url('/uploads/company/favicon.png') !important;
  background-size: 26px 26px !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  width: auto !important;
  height: 44px !important;
  padding-left: 34px !important;
  display: flex !important;
  align-items: center !important;
}
#menu #logo a.logo::after {
  content: "SmartPalm";
  font-family: 'Manrope', "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.02em;
  color: var(--sp-ink);
  white-space: nowrap;
}

/* Collapsed rail: only the mark, centered, no wordmark */
body.hide-sidebar #menu #logo a.logo {
  padding-left: 0 !important;
  width: 100% !important;
  background-size: 28px 28px !important;
  background-position: center !important;
}
body.hide-sidebar #menu #logo a.logo::after { display: none !important; }

/* Rail hover-expand: bring back the mark + wordmark (override the old navy) */
body.hide-sidebar #menu:hover #logo a.logo {
  background-image: url('/uploads/company/favicon.png') !important;
  background-size: 26px 26px !important;
  background-position: left center !important;
  padding-left: 34px !important;
  width: auto !important;
}
body.hide-sidebar #menu:hover #logo a.logo::after { display: inline !important; }

/* ========================================================================
   STAGE 22 — Use the LATNOK logo (user's choice); drop the SmartPalm
   wordmark from Stage 21. Divider fix (transparent first <li>) stays.
   MARKER: STAGE22-LATNOK-LOGO
   ======================================================================== */
#menu #logo { display: flex !important; align-items: center !important; padding: 0 20px !important; }
#menu #logo a.logo {
  background-image: url('/uploads/company/smartpalm-logo-navy.png') !important;
  background-size: contain !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  width: 158px !important;
  height: 44px !important;
  padding-left: 0 !important;
}
#menu #logo a.logo::after { content: none !important; display: none !important; }

/* Rail hover-expand: show the LATNOK logo (override Stage 21's favicon+text) */
body.hide-sidebar #menu:hover #logo a.logo {
  background-image: url('/uploads/company/smartpalm-logo-navy.png') !important;
  background-size: contain !important;
  background-position: left center !important;
  padding-left: 0 !important;
  width: 158px !important;
}
body.hide-sidebar #menu:hover #logo a.logo::after { display: none !important; }

/* ========================================================================
   STAGE 23 — new toggle icon + nicer chat badges + polished profile block
   MARKER: STAGE23-BADGES-PROFILE
   ======================================================================== */

/* ---- Sidebar toggle icon: clean hamburger --------------------------- */
.hide-menu i.fa-align-left::before { content: "\f0c9" !important; } /* bars */

/* ---- Chat menu badges: clean pills, no dark outline ----------------- */
.menu-item-prchat .menu-text .badge,
.menu-item-prchat .liveUsers,
.menu-item-prchat .liveClients,
.menu-item-prchat .menu-badge {
  border: none !important;
  color: #ffffff !important;
  background-image: none !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 17px !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  margin-left: 5px !important;
  vertical-align: middle !important;
  text-shadow: none !important;
}
/* online members = brand green, online clients = soft slate */
.menu-item-prchat .liveUsers  { background: var(--sp-brand) !important; }
.menu-item-prchat .liveClients { background: #94A3B8 !important; }

/* ---- Profile block: refined layout, avatar ring, brand sub-label ---- */
#sp-profile {
  padding: 12px 14px !important;
  gap: 11px !important;
  align-items: center !important;
  border-top: 1px solid var(--sp-border) !important;
  transition: background .12s ease !important;
}
#sp-profile:hover { background: var(--sp-canvas) !important; }
#sp-profile .sp-pf-av {
  width: 36px !important;
  height: 36px !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 0 1px var(--sp-border), 0 1px 3px rgba(16,24,40,.12) !important;
}
#sp-profile .sp-pf-meta { gap: 1px !important; }
#sp-profile .sp-pf-name {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--sp-ink) !important;
  line-height: 1.2 !important;
}
#sp-profile .sp-pf-sub {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--sp-brand) !important;
  line-height: 1.2 !important;
}
#sp-profile .sp-pf-caret {
  color: var(--sp-muted) !important;
  font-size: 12px !important;
  transition: color .12s ease, transform .12s ease !important;
}
#sp-profile:hover .sp-pf-caret { color: var(--sp-brand) !important; transform: translateX(2px) !important; }

/* ========================================================================
   STAGE 24 — chat badge text = white (beat Stage 17's #side-menu>li>a span
   which had higher (id-level) specificity and forced dark ink text).
   MARKER: STAGE24-BADGE-TEXT
   ======================================================================== */
#side-menu .menu-item-prchat .liveUsers,
#side-menu .menu-item-prchat .liveClients,
#side-menu .menu-item-prchat .menu-badge,
#side-menu .menu-item-prchat .menu-text .badge {
  color: #ffffff !important;
}

/* ========================================================================
   STAGE 25 — directional chevron toggle + profile page tidy-up
   MARKER: STAGE25-CHEVRON-PROFILE
   ======================================================================== */

/* ---- Toggle: chevron points the way it collapses ----------------------- */
.hide-menu i.fa-align-left::before { content: "\f100" !important; }               /* «  expanded -> collapse left  */
body.hide-sidebar .hide-menu i.fa-align-left::before { content: "\f101" !important; } /* »  collapsed -> expand right  */

/* ---- Profile: unify the contact icons (email / phone) ------------------ */
.profile p i.fa-lg,
.profile p.tw-flex > i {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  width: 20px !important;
  text-align: center !important;
  color: var(--sp-muted) !important;
  margin-right: 10px !important;
  flex: 0 0 auto !important;
  vertical-align: middle !important;
}
.profile p i.fa-envelope::before      { content: "\f0e0" !important; } /* solid envelope */
.profile p i.fa-phone-square::before  { content: "\f095" !important; } /* solid phone    */
.profile p.tw-flex { margin-bottom: 8px !important; align-items: center !important; }

/* ---- Departments: give the pills breathing room + a clean label -------- */
.profile .control-label { display: block !important; margin-bottom: 8px !important; color: var(--sp-ink) !important; font-weight: 700 !important; }
.profile .form-group .label.label-primary {
  display: inline-flex !important;
  margin: 0 6px 6px 0 !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
}

/* ---- Projects table: header / cell alignment consistent ---------------- */
.table-staff-projects > thead > tr > th {
  padding: 12px 26px 12px 12px !important;
  vertical-align: middle !important;
  text-align: left !important;
  white-space: nowrap;
}
.table-staff-projects > tbody > tr > td {
  padding: 12px 12px !important;
  vertical-align: middle !important;
  text-align: left !important;
}
.table-staff-projects thead th.sorting::after,
.table-staff-projects thead th.sorting_asc::after,
.table-staff-projects thead th.sorting_desc::after { opacity: .45 !important; right: 8px !important; }

/* ========================================================================
   STAGE 26 — Projects table toolbar organised (length + search aligned,
   search widened into one clean field, magnifier attached).
   MARKER: STAGE26-DT-TOOLBAR
   ======================================================================== */
.dataTables_wrapper:has(.table-staff-projects) .dataTables_length,
.dataTables_wrapper:has(.table-staff-projects) .dataTables_filter { margin-bottom: 14px !important; }

.dataTables_wrapper:has(.table-staff-projects) .dataTables_length label,
.dataTables_wrapper:has(.table-staff-projects) .dataTables_filter label { margin: 0 !important; }

/* one clean rounded search field, magnifier attached, sensible width */
.dataTables_wrapper:has(.table-staff-projects) .dataTables_filter .input-group {
  width: 260px !important;
  display: flex !important;
  max-width: 100% !important;
}
.dataTables_wrapper:has(.table-staff-projects) .dataTables_filter .input-group-addon {
  border-radius: 8px 0 0 8px !important;
  background: #ffffff !important;
  border: 1px solid var(--sp-border-2) !important;
  border-right: none !important;
  color: var(--sp-muted) !important;
}
.dataTables_wrapper:has(.table-staff-projects) .dataTables_filter input.form-control {
  width: 100% !important;
  height: 38px !important;
  border-radius: 0 8px 8px 0 !important;
  border-left: none !important;
}

/* length dropdown matches the search height, rounded */
.dataTables_wrapper:has(.table-staff-projects) .dataTables_length select {
  height: 38px !important;
  border-radius: 8px !important;
  padding: 0 10px !important;
}

/* ========================================================================
   STAGE 27 — Mobile pass: keep the desktop rail/profile from leaking onto
   phone widths; let Perfex's native drawer (show-sidebar) work untouched.
   MARKER: STAGE27-MOBILE
   ======================================================================== */
@media (max-width: 768px) {
  /* fixed sidebar profile block is a desktop-only element */
  #sp-profile { display: none !important; }
  #side-menu { padding-bottom: 0 !important; }

  /* safety net: if body.hide-sidebar is ever present on a phone, do NOT
     render the 64px rail — restore a normal full-width drawer */
  body.hide-sidebar #menu {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    overflow: visible !important;
  }
  body.hide-sidebar #wrapper { margin-left: 0 !important; }
  body.hide-sidebar #side-menu > li > a .menu-text,
  body.hide-sidebar #side-menu > li > a .sub-menu-text { display: inline-block !important; }
  body.hide-sidebar #side-menu > li > a { text-align: left !important; padding-left: 12px !important; }
  body.hide-sidebar #side-menu > li > a i.menu-icon {
    float: left !important;
    margin: 0 8px 0 0 !important;
    display: inline-block !important;
  }
  body.hide-sidebar #side-menu .arrow { display: inline-block !important; }
  body.hide-sidebar #menu #logo a.logo {
    background-image: url('/uploads/company/smartpalm-logo-navy.png') !important;
    background-size: contain !important;
    background-position: left center !important;
    padding-left: 0 !important;
    width: 158px !important;
  }
  body.hide-sidebar #menu #logo a.logo::after { display: none !important; }

  /* never let anything push a horizontal scrollbar on the page body */
  body, #wrapper { overflow-x: hidden !important; }
}

/* ========================================================================
   STAGE 28 — Self-service sidebar colour (bridged to the Perfex setting,
   auto-adapting text) + shell dark mode (body.sp-dark). Toggle via JS.
   MARKER: STAGE28-THEME
   ======================================================================== */
:root {
  --sp-sidebar-bg:  #FAFCFE;   /* set at runtime from the Perfex setting */
  --sp-dark-shell:  #0F1826;   /* dark sidebar */
  --sp-dark-topbar: #0B111A;   /* dark top bar */
  --sp-dark-line:   rgba(255,255,255,.08);
  --sp-dark-text:   #E5EAF0;
}

/* Sidebar background now comes from the bridged variable (default white) */
#menu,
#menu .navigation,
#menu .slimScrollDiv,
#menu #logo,
#sp-profile { background: var(--sp-sidebar-bg) !important; }

/* ---- Sidebar sitting on a DARK colour: light text + white logo -------- */
body.sp-sidebar-ondark #side-menu > li > a,
body.sp-sidebar-ondark #side-menu > li > a .menu-text,
body.sp-sidebar-ondark #side-menu > li > a .sub-menu-text,
body.sp-sidebar-ondark #side-menu > li > a span { color: var(--sp-dark-text) !important; }
body.sp-sidebar-ondark #side-menu > li > a:hover { background: rgba(255,255,255,.08) !important; }
body.sp-sidebar-ondark #side-menu > li.active > a { background: rgba(255,255,255,.14) !important; box-shadow: inset 3px 0 0 var(--sp-brand) !important; }
body.sp-sidebar-ondark #side-menu > li.active > a .menu-text { color: #ffffff !important; }
body.sp-sidebar-ondark #side-menu .sub-menu a { color: #C7D0DB !important; }
body.sp-sidebar-ondark #menu { border-right-color: var(--sp-dark-line) !important; }
body.sp-sidebar-ondark #menu #logo a.logo { background-image: url('/uploads/company/smartpalm-logo-wide.png') !important; } /* white wordmark */
body.sp-sidebar-ondark #sp-profile { border-top-color: var(--sp-dark-line) !important; }
body.sp-sidebar-ondark #sp-profile .sp-pf-name { color: #F1F5F9 !important; }
body.sp-sidebar-ondark #sp-profile .sp-pf-av { border-color: rgba(255,255,255,.25) !important; }
body.sp-sidebar-ondark #sp-profile:hover { background: rgba(255,255,255,.06) !important; }

/* ========================= DARK MODE (shell) =========================== */
/* --- Sidebar dark --- */
body.sp-dark #menu,
body.sp-dark #menu .navigation,
body.sp-dark #menu .slimScrollDiv,
body.sp-dark #menu #logo,
body.sp-dark #sp-profile { background: var(--sp-dark-shell) !important; }
body.sp-dark #menu { border-right: 1px solid var(--sp-dark-line) !important; }
body.sp-dark #side-menu > li > a,
body.sp-dark #side-menu > li > a .menu-text,
body.sp-dark #side-menu > li > a .sub-menu-text,
body.sp-dark #side-menu > li > a span { color: var(--sp-dark-text) !important; }
body.sp-dark #side-menu > li > a:hover { background: rgba(255,255,255,.06) !important; }
body.sp-dark #side-menu > li.active > a { background: rgba(255,255,255,.12) !important; box-shadow: inset 3px 0 0 var(--sp-brand) !important; }
body.sp-dark #side-menu > li.active > a .menu-text { color: #ffffff !important; }
body.sp-dark #side-menu .sub-menu,
body.sp-dark #side-menu li ul { background: #141E2E !important; border-color: var(--sp-dark-line) !important; }
body.sp-dark #side-menu .sub-menu a { color: #C7D0DB !important; }
body.sp-dark #menu #logo a.logo { background-image: url('/uploads/company/smartpalm-logo-wide.png') !important; }
body.sp-dark #sp-profile { border-top: 1px solid var(--sp-dark-line) !important; }
body.sp-dark #sp-profile .sp-pf-name { color: #F1F5F9 !important; }
body.sp-dark #sp-profile .sp-pf-av { border-color: rgba(255,255,255,.25) !important; }
body.sp-dark #sp-profile:hover { background: rgba(255,255,255,.06) !important; }
/* rail favicon logo unaffected */

/* --- Top bar dark --- */
body.sp-dark #header { background: var(--sp-dark-topbar) !important; border-bottom: 1px solid var(--sp-dark-line) !important; }
body.sp-dark #header a,
body.sp-dark #header i,
body.sp-dark #header .nav > li > a,
body.sp-dark #header .hide-menu i,
body.sp-dark #header span { color: var(--sp-dark-text) !important; }
body.sp-dark #header .nav > li > a:hover,
body.sp-dark #header li > a.active { background: rgba(255,255,255,.06) !important; }
body.sp-dark #top-search,
body.sp-dark #header .form-control,
body.sp-dark #header input[type="text"],
body.sp-dark #header .search-field {
  background: rgba(255,255,255,.06) !important;
  color: var(--sp-dark-text) !important;
  border-color: rgba(255,255,255,.12) !important;
}
body.sp-dark #header .form-control::placeholder { color: #8b97a6 !important; }
body.sp-dark #header .dropdown-menu { background: #141E2E !important; border-color: var(--sp-dark-line) !important; }
body.sp-dark #header .dropdown-menu a,
body.sp-dark #header .dropdown-menu li { color: var(--sp-dark-text) !important; }
body.sp-dark #header .dropdown-menu a:hover { background: rgba(255,255,255,.06) !important; }

/* --- Dark-mode toggle control --- */
#sp-darktoggle-top > a { cursor: pointer; }
#sp-darktoggle-top i { font-size: 16px; line-height: 63px; }
.sp-darktoggle-theme {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--sp-border); background: var(--sp-surface);
  font-weight: 600; color: var(--sp-ink);
}
.sp-darktoggle-theme:hover { background: var(--sp-canvas); }
body.sp-dark .sp-darktoggle-theme { background: #141E2E; color: var(--sp-dark-text); border-color: var(--sp-dark-line); }

/* ========================================================================
   STAGE 29 — dark-mode top-bar search box + small shell touch-ups
   MARKER: STAGE29-DARK-SEARCH
   ======================================================================== */
body.sp-dark #header #search_input,
body.sp-dark #search_input {
  background: rgba(255,255,255,.07) !important;
  color: var(--sp-dark-text) !important;
}
body.sp-dark #search_input::placeholder { color: #8b97a6 !important; }
body.sp-dark #header .search-results,
body.sp-dark #header .dropdown-menu.search-results { background: #141E2E !important; }

/* top-bar icon buttons / add-new stay legible on dark */
body.sp-dark #header .navbar-nav > li > a i { color: var(--sp-dark-text) !important; }
body.sp-dark #header .badge { border: none !important; }

/* the light-mode default: make sure the search box is the cool surface, not warm */
#header #search_input { color: var(--sp-ink); }

/* ========================================================================
   STAGE 30 — top bar follows sidebar colour, submenu matches, toggle
   alignment, and FULL-APP dark mode.
   MARKER: STAGE30-FULLDARK
   ======================================================================== */

/* ---- Top bar takes the sidebar colour (unified shell) ------------------ */
#header { background: var(--sp-sidebar-bg) !important; }

/* When the shared shell colour is dark, top bar text/controls go light too */
body.sp-sidebar-ondark #header,
body.sp-sidebar-ondark #header a,
body.sp-sidebar-ondark #header i,
body.sp-sidebar-ondark #header span,
body.sp-sidebar-ondark #header .nav > li > a,
body.sp-sidebar-ondark #header .hide-menu i { color: var(--sp-dark-text) !important; }
body.sp-sidebar-ondark #header { border-bottom: 1px solid rgba(255,255,255,.10) !important; }
body.sp-sidebar-ondark #header #search_input {
  background: rgba(255,255,255,.10) !important;
  color: var(--sp-dark-text) !important;
}
body.sp-sidebar-ondark #header #search_input::placeholder { color: rgba(255,255,255,.55) !important; }
body.sp-sidebar-ondark #header .nav > li > a:hover { background: rgba(255,255,255,.08) !important; }

/* ---- Expanded submenu: match the sidebar, no white slab ---------------- */
body.sp-sidebar-ondark #side-menu .nav-second-level,
body.sp-sidebar-ondark #side-menu .sub-menu,
body.sp-sidebar-ondark #side-menu li ul,
body.sp-dark #side-menu .nav-second-level,
body.sp-dark #side-menu .sub-menu,
body.sp-dark #side-menu li ul {
  background: rgba(0,0,0,.18) !important;
  border: none !important;
}
body.sp-sidebar-ondark #side-menu .nav-second-level a,
body.sp-dark #side-menu .nav-second-level a { color: #C7D0DB !important; }
body.sp-sidebar-ondark #side-menu .nav-second-level a:hover,
body.sp-dark #side-menu .nav-second-level a:hover { background: rgba(255,255,255,.06) !important; color:#fff !important; }

/* ---- Top-bar dark-mode toggle: vertically centred --------------------- */
#sp-darktoggle-top { display: inline-flex !important; align-items: center !important; height: 63px !important; vertical-align: top !important; }
#sp-darktoggle-top > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 63px !important;
  padding: 0 12px !important;
  margin: 0 !important;
}
#sp-darktoggle-top i { font-size: 17px !important; line-height: 1 !important; }

/* ========================= FULL-APP DARK MODE ========================== */
body.sp-dark {
  --sp-surface:  #141E2E;
  --sp-canvas:   #0B131F;
  --sp-ink:      #F1F5F9;
  --sp-body:     #CBD5E1;
  --sp-muted:    #93A1B5;
  --sp-border:   #24334A;
  --sp-border-2: #33465F;
  --sp-brand-soft: rgba(27,138,90,.20);
}
/* base surfaces + text */
body.sp-dark,
body.sp-dark #wrapper,
body.sp-dark .content { background: var(--sp-canvas) !important; color: var(--sp-body) !important; }
body.sp-dark h1, body.sp-dark h2, body.sp-dark h3, body.sp-dark h4, body.sp-dark h5,
body.sp-dark .panel-title, body.sp-dark .bold, body.sp-dark strong, body.sp-dark label,
body.sp-dark .control-label { color: var(--sp-ink) !important; }
body.sp-dark p, body.sp-dark td, body.sp-dark span, body.sp-dark div, body.sp-dark li { color: inherit; }
body.sp-dark .text-muted, body.sp-dark .text-dark, body.sp-dark small { color: var(--sp-muted) !important; }
body.sp-dark a { color: #6bb3ff; }
body.sp-dark a:hover { color: #8ec7ff; }

/* cards / panels / wells */
body.sp-dark .panel_s,
body.sp-dark .panel-default,
body.sp-dark .well,
body.sp-dark .tw-bg-white,
body.sp-dark .panel-body,
body.sp-dark .widget { background: var(--sp-surface) !important; border-color: var(--sp-border) !important; color: var(--sp-body) !important; }
body.sp-dark .panel_s .panel-heading { border-bottom-color: var(--sp-border) !important; }

/* tables */
body.sp-dark .table { color: var(--sp-body) !important; }
body.sp-dark .table > thead > tr > th { color: var(--sp-muted) !important; border-bottom-color: var(--sp-border) !important; }
body.sp-dark .table > tbody > tr > td { border-top-color: var(--sp-border) !important; }
body.sp-dark .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255,255,255,.025) !important; }
body.sp-dark .table-hover > tbody > tr:hover { background-color: rgba(255,255,255,.05) !important; }
body.sp-dark .dataTables_wrapper, body.sp-dark .dataTable { color: var(--sp-body) !important; }

/* forms / inputs / selects */
body.sp-dark .form-control,
body.sp-dark select,
body.sp-dark textarea,
body.sp-dark .select2-container .select2-selection,
body.sp-dark .dt-bootstrap input[type="search"] {
  background: #1A2637 !important;
  color: var(--sp-body) !important;
  border-color: var(--sp-border-2) !important;
}
body.sp-dark .form-control::placeholder { color: #6b7a90 !important; }
body.sp-dark .select2-dropdown, body.sp-dark .select2-results { background: var(--sp-surface) !important; color: var(--sp-body) !important; }
body.sp-dark .input-group-addon { background: #1A2637 !important; border-color: var(--sp-border-2) !important; color: var(--sp-muted) !important; }

/* dropdowns / modals / popovers */
body.sp-dark .dropdown-menu { background: var(--sp-surface) !important; border-color: var(--sp-border) !important; }
body.sp-dark .dropdown-menu > li > a, body.sp-dark .dropdown-menu a, body.sp-dark .dropdown-menu li { color: var(--sp-body) !important; }
body.sp-dark .dropdown-menu > li > a:hover, body.sp-dark .dropdown-menu a:hover { background: rgba(255,255,255,.05) !important; }
body.sp-dark .modal-content { background: var(--sp-surface) !important; color: var(--sp-body) !important; }
body.sp-dark .modal-header, body.sp-dark .modal-footer { border-color: var(--sp-border) !important; }
body.sp-dark .popover, body.sp-dark .tooltip-inner { background: var(--sp-surface) !important; color: var(--sp-body) !important; border-color: var(--sp-border) !important; }

/* buttons / misc */
body.sp-dark .btn-default { background: #1A2637 !important; color: var(--sp-body) !important; border-color: var(--sp-border-2) !important; }
body.sp-dark .btn-default:hover { background: #223047 !important; }
body.sp-dark hr { border-color: var(--sp-border) !important; }
body.sp-dark .nav-tabs, body.sp-dark .nav-tabs > li > a { border-color: var(--sp-border) !important; }
body.sp-dark .nav-tabs > li.active > a { background: var(--sp-surface) !important; color: var(--sp-ink) !important; }
body.sp-dark .breadcrumb { background: transparent !important; }
body.sp-dark .kb-search-jumbotron, body.sp-dark .jumbotron { background: var(--sp-surface) !important; }

/* ========================================================================
   STAGE 31 — dynamic sidebar icons + dark-mode legibility fixes
   (cron banner hidden by JS SP-EXTRAS)
   MARKER: STAGE31-DYNICONS-DARKFIX
   ======================================================================== */

/* ---- Dynamic sidebar icons: colourful ONLY on a white sidebar ---------- */
/* dark / coloured-dark sidebar -> soft white icons */
body.sp-sidebar-ondark #side-menu > li > a i.menu-icon,
body.sp-dark #side-menu > li > a i.menu-icon { color: rgba(255,255,255,.88) !important; }
/* light-but-tinted (not white) sidebar -> muted mono icons (still visible) */
body.sp-sidebar-onlight:not(.sp-sidebar-white) #side-menu > li > a i.menu-icon { color: var(--sp-muted) !important; }
/* white sidebar keeps the Stage-17 multicolour (no override here) */

/* ---- Dark mode: table headers legible (dark bg + light text) ---------- */
body.sp-dark .table > thead > tr > th,
body.sp-dark table.dataTable thead th,
body.sp-dark .table thead th,
body.sp-dark th.toggleable {
  background: var(--sp-surface) !important;
  color: var(--sp-body) !important;
  border-bottom-color: var(--sp-border) !important;
}
body.sp-dark table.dataTable tbody td.sorting_1,
body.sp-dark table.dataTable thead th.sorting_asc,
body.sp-dark table.dataTable thead th.sorting_desc { background: rgba(255,255,255,.04) !important; }

/* ---- Dark mode: white buttons / links / leftover light surfaces ------- */
body.sp-dark .btn-default,
body.sp-dark a.btn-default,
body.sp-dark .btn.display-block,
body.sp-dark a.btn.display-block,
body.sp-dark .btn.pull-left.display-block {
  background: #1A2637 !important;
  color: var(--sp-body) !important;
  border-color: var(--sp-border-2) !important;
}
body.sp-dark .tw-bg-white,
body.sp-dark [class*="tw-bg-white"],
body.sp-dark .bg-white,
body.sp-dark .white-bg,
body.sp-dark .mail-body { background: var(--sp-surface) !important; }
body.sp-dark .dataTables_info,
body.sp-dark .dataTables_length label,
body.sp-dark .dataTables_filter label,
body.sp-dark .dataTables_paginate,
body.sp-dark .dataTables_paginate a { color: var(--sp-body) !important; }
body.sp-dark .paginate_button.current,
body.sp-dark .pagination > .active > a { background: var(--sp-brand) !important; color: #fff !important; border-color: var(--sp-brand) !important; }
body.sp-dark .pagination > li > a { background: var(--sp-surface) !important; color: var(--sp-body) !important; border-color: var(--sp-border) !important; }

/* ========================================================================
   STAGE 32 — dark mode: keep the chat light (black text) + calendar buttons
   MARKER: STAGE32-CHAT-CAL-DARK
   ======================================================================== */

/* ---- Chat stays a LIGHT component in dark mode (panels already light via
   #frame specificity); reset the colour tokens locally so text is dark ---- */
body.sp-dark #frame,
body.sp-dark #membersContent,
body.sp-dark .pusherChatBox {
  --sp-ink:      #0E1A2B;
  --sp-body:     #33404D;
  --sp-muted:    #667085;
  --sp-surface:  #FFFFFF;
  --sp-canvas:   #EEF1F4;
  --sp-border:   #E4E8ED;
  --sp-border-2: #D7DDE4;
}
/* make sure any explicit dark-mode light-text rule inside the chat resolves dark */
body.sp-dark #frame,
body.sp-dark #frame .content,
body.sp-dark #frame #sidepanel { color: var(--sp-body) !important; }
body.sp-dark #frame #sidepanel #contacts ul li.contact .wrap .meta .name { color: var(--sp-ink) !important; }
body.sp-dark #frame .content .messages ul li p.friend { color: var(--sp-ink) !important; }
body.sp-dark #frame .contact_role,
body.sp-dark #frame #sidepanel #contacts ul li.contact .wrap .meta .preview { color: var(--sp-muted) !important; }
/* hover / active blend correctly (light-mode behaviour) */
body.sp-dark #frame #sidepanel #contacts ul li.contact:hover { background: var(--sp-canvas) !important; }
body.sp-dark #frame #sidepanel #contacts ul li.contact.active { background: var(--sp-brand-soft) !important; }

/* ---- Calendar (FullCalendar) buttons + grid in dark mode --------------- */
body.sp-dark .fc-button,
body.sp-dark .fc button,
body.sp-dark .fc-button-primary {
  background: #1A2637 !important;
  color: var(--sp-body) !important;
  border-color: var(--sp-border-2) !important;
  text-shadow: none !important;
}
body.sp-dark .fc-button:hover { background: #223047 !important; color: #fff !important; }
body.sp-dark .fc-button-active,
body.sp-dark .fc-button-primary.fc-button-active,
body.sp-dark .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--sp-brand) !important; color: #ffffff !important; border-color: var(--sp-brand) !important;
}
/* grid */
body.sp-dark .fc-theme-standard td,
body.sp-dark .fc-theme-standard th,
body.sp-dark .fc-scrollgrid,
body.sp-dark .fc-scrollgrid td { border-color: var(--sp-border) !important; }
body.sp-dark .fc-daygrid-day-number,
body.sp-dark .fc-col-header-cell-cushion,
body.sp-dark .fc-toolbar-title,
body.sp-dark .fc-list-day-text { color: var(--sp-body) !important; }
body.sp-dark .fc-col-header-cell,
body.sp-dark .fc-daygrid-day { background: transparent !important; }
body.sp-dark .fc-day-today,
body.sp-dark .fc-daygrid-day.fc-day-today { background: rgba(27,138,90,.14) !important; }
body.sp-dark .fc-list, body.sp-dark .fc-list-table td { background: transparent !important; color: var(--sp-body) !important; }

/* ========================================================================
   STAGE 33 — proper DARK chat theme (body.chat_dark). Overrides the module's
   ugly chat_dark and the Stage 32 light-forcing. body.chat_light keeps the
   Stage 9 light chat. App dark mode syncs chat_dark via JS SP-CHATSYNC.
   MARKER: STAGE33-CHATDARK
   ======================================================================== */
body.chat_dark #frame,
body.chat_dark #membersContent,
body.chat_dark .pusherChatBox {
  --sp-ink:      #F1F5F9;
  --sp-body:     #CBD5E1;
  --sp-muted:    #93A1B5;
  --sp-surface:  #141E2E;
  --sp-canvas:   #0B131F;
  --sp-border:   #24334A;
  --sp-border-2: #33465F;
  --sp-brand-soft: rgba(27,138,90,.24);
}

/* ---- Full chat page (#frame) ------------------------------------------ */
body.chat_dark #frame { background: #0F1826 !important; border: 1px solid var(--sp-border) !important; }

/* left panel */
body.chat_dark #frame #sidepanel { background: #141E2E !important; border-right: 1px solid var(--sp-border) !important; }
body.chat_dark #frame #sidepanel #profile { background: #141E2E !important; border-bottom: 1px solid var(--sp-border) !important; }
body.chat_dark #frame #sidepanel #profile .wrap p { color: #F1F5F9 !important; }
body.chat_dark #frame #sidepanel #search { border-bottom: 1px solid var(--sp-border) !important; }
body.chat_dark #frame #sidepanel #search input { background: #0F1826 !important; color: #E5EAF0 !important; border-color: var(--sp-border) !important; }
body.chat_dark #frame #sidepanel #search input::placeholder { color: #7d8aa0 !important; }
/* tabs */
body.chat_dark #frame .chat_nav,
body.chat_dark #frame #sidepanel .nav-tabs { border-bottom-color: var(--sp-border) !important; }
body.chat_dark #frame .chat_nav > li > a,
body.chat_dark #frame #menu li a { color: #C7D0DB !important; }
body.chat_dark #frame .chat_nav > li.active > a { color: #F1F5F9 !important; border-bottom-color: var(--sp-brand) !important; }
/* contact rows */
body.chat_dark #frame #sidepanel #contacts ul li.contact .wrap .meta .name { color: #F1F5F9 !important; }
body.chat_dark #frame #sidepanel #contacts ul li.contact .wrap .meta .preview { color: #93A1B5 !important; }
body.chat_dark #frame #sidepanel #contacts ul li.contact .wrap .meta p.pull-right { color: #7d8aa0 !important; }
body.chat_dark #frame #sidepanel #contacts ul li.contact:hover { background: rgba(255,255,255,.05) !important; }
body.chat_dark #frame #sidepanel #contacts ul li.contact.active { background: rgba(27,138,90,.22) !important; }
body.chat_dark #frame #sidepanel #contacts ul li.contact.active .wrap .meta .name { color: #fff !important; }
/* bottom bar (Theme / Settings) */
body.chat_dark #frame #bottom-bar { background: #141E2E !important; border-top: 1px solid var(--sp-border) !important; }
body.chat_dark #frame #bottom-bar button,
body.chat_dark #frame #bottom-bar .dropbtn,
body.chat_dark #frame #bottom-bar i { color: #C7D0DB !important; }
body.chat_dark #frame #bottom-bar button:hover { background: rgba(255,255,255,.06) !important; }

/* right panel */
body.chat_dark #frame .content { background: #0F1826 !important; }
body.chat_dark #frame .content .contact-profile { background: #141E2E !important; border-bottom: 1px solid var(--sp-border) !important; }
body.chat_dark #frame .content .contact-profile p { color: #F1F5F9 !important; }
body.chat_dark #frame .contact_role { color: #93A1B5 !important; }
body.chat_dark #frame .content .contact-profile i { color: #93A1B5 !important; }
body.chat_dark #frame .content .messages { background: #0B131F !important; }
body.chat_dark #frame .content .messages .middleDateTime,
body.chat_dark #frame .content .messages ul li .time_ago { color: #7d8aa0 !important; }
/* incoming bubble */
body.chat_dark #frame .content .messages ul li p.friend,
body.chat_dark #frame .content .messages ul li.replies p {
  background: #22303F !important;
  color: #E5EAF0 !important;
  border: 1px solid #2c3a4c !important;
}
/* outgoing bubble stays brand green + white (kept) */
/* composer */
body.chat_dark #frame .content .message-input { background: #141E2E !important; border-top: 1px solid var(--sp-border) !important; }
body.chat_dark #frame .content .message-input .wrap textarea { background: #0F1826 !important; color: #E5EAF0 !important; border-color: var(--sp-border) !important; }
body.chat_dark #frame .content .message-input .wrap textarea::placeholder { color: #7d8aa0 !important; }
body.chat_dark #frame .content .message-input .wrap i.attachment,
body.chat_dark #frame .content .message-input .wrap i.search_messages { color: #93A1B5 !important; }

/* ---- Flying widget + conversation popup, dark ------------------------- */
body.chat_dark #membersContent { background: #141E2E !important; border-color: var(--sp-border) !important; }
body.chat_dark #membersContent .scroll { background: #141E2E !important; }
body.chat_dark #membersContent .scroll a,
body.chat_dark #membersContent .scroll .user-name { color: #E5EAF0 !important; }
body.chat_dark #membersContent .scroll > ul > li:hover { background: rgba(255,255,255,.05) !important; }
body.chat_dark .pusherChatBox { background: #141E2E !important; border-color: var(--sp-border) !important; }
body.chat_dark .pusherChatBox .message_container p.friend { background: #22303F !important; color: #E5EAF0 !important; border-color: #2c3a4c !important; }
body.chat_dark .pusherChatBox textarea.chatbox { background: #0F1826 !important; color: #E5EAF0 !important; border-color: var(--sp-border) !important; }

/* ========================================================================
   STAGE 34 — chat_dark: darken the INNER containers missed in Stage 33
   (contact-list ul, tabs, search wrapper, messages ul, date separators)
   MARKER: STAGE34-CHATDARK2
   ======================================================================== */
body.chat_dark #frame #sidepanel #search,
body.chat_dark #frame #search { background: #141E2E !important; }

body.chat_dark #frame ul.chat_nav,
body.chat_dark #frame .nav.nav-tabs.chat_nav,
body.chat_dark #frame #sidepanel .nav-tabs { background: #141E2E !important; }

body.chat_dark #frame ul.chat_contacts_list,
body.chat_dark #frame #sidepanel #contacts,
body.chat_dark #frame #sidepanel .scroll,
body.chat_dark #frame #sidepanel #contacts ul,
body.chat_dark #frame #sidepanel .tab-content,
body.chat_dark #frame #sidepanel .tab-pane { background: #141E2E !important; }

body.chat_dark #frame .content .messages,
body.chat_dark #frame .content .messages ul,
body.chat_dark #frame .content .group_messages,
body.chat_dark #frame .content .group_messages ul,
body.chat_dark #frame .content .client_messages,
body.chat_dark #frame .content .client_messages ul,
body.chat_dark #frame .content > ul { background: #0B131F !important; }

body.chat_dark #frame .middleDateTime,
body.chat_dark #frame .content .messages .middleDateTime {
  background: rgba(255,255,255,.07) !important;
  color: #9aa7bb !important;
}

/* profile header + any residual white wrappers */
body.chat_dark #frame #sidepanel #profile,
body.chat_dark #frame #sidepanel > div,
body.chat_dark #frame .announcement { background: #141E2E !important; }

/* ========================================================================
   STAGE 35 — dark mode: dashboard stat cards + light label pills
   MARKER: STAGE35-DASHCARDS
   ======================================================================== */
body.sp-dark .top_stats_wrapper,
body.sp-dark .dash-widget,
body.sp-dark .dashboard-widget {
  background: var(--sp-surface) !important;
  border-color: var(--sp-border) !important;
}
body.sp-dark .top_stats_wrapper .tw-text-neutral-800,
body.sp-dark .top_stats_wrapper .tw-text-neutral-700,
body.sp-dark .top_stats_wrapper span,
body.sp-dark .top_stats_wrapper div { color: var(--sp-body) !important; }
body.sp-dark .top_stats_wrapper svg,
body.sp-dark .top_stats_wrapper path { color: var(--sp-muted) !important; }

/* light-toned label pills legible on dark */
body.sp-dark .label-primary { background: rgba(59,130,246,.20) !important; color: #9cc0f0 !important; }
body.sp-dark .label-default { background: rgba(255,255,255,.10) !important; color: var(--sp-body) !important; }
body.sp-dark .badge-primary { background: rgba(59,130,246,.20) !important; color: #9cc0f0 !important; }


/* ========================================================================
   STAGE 37 — chat full view: hide the Theme button in the bottom bar and
   make the contacts list scrollable so the LAST contact clears the bar.
   The #bottom-bar (Theme/Settings) is an absolute child pinned to the
   sidepanel bottom; it sits INSIDE #contacts. The scroll container
   (.tab-content / #contacts) overshot the sidepanel by ~88px so the last
   contact was stuck behind the bar. Reserve 168px top chrome + 52px bar.
   MARKER: STAGE37-CHATSCROLL
   ======================================================================== */
body.prchat #sidepanel .tab-content {
  height: calc(100% - 220px) !important;
  max-height: calc(100% - 220px) !important;
  overflow: hidden !important;
}
body.prchat #sidepanel .tab-content .tab-pane,
body.prchat #sidepanel #contacts {
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  padding-bottom: 12px !important;
}
/* hide the Theme button (app dark mode drives the chat theme now).
   #settings has flex:1 1 0 so it auto-expands to fill the bar. */
body.prchat #frame #bottom-bar > button#switchTheme { display: none !important; }


/* ========================================================================
   STAGE 38 — mobile nav drawer usable on phones.
   The Stage-27 mobile block restored the drawer WIDTH + labels but left
   #menu position:absolute, z-index:auto and min-height:5314px (Perfex JS
   syncs the sidebar height to the page for the desktop absolute layout).
   Result on a phone: the opened drawer sat BEHIND the page content and its
   lower items were unreachable (a fixed box taller than the viewport can't
   scroll). Make it a proper fixed, full-height, internally-scrolling drawer
   ABOVE the content, sliding in from the left, with a tap-to-close backdrop
   (JS marker SP-MOBILE-DRAWER creates #sp-nav-backdrop).
   MARKER: STAGE38-MOBILEDRAWER
   ======================================================================== */
@media (max-width: 768px) {
  body #menu.sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -280px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 0 !important;
    z-index: 1045 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    transition: left .25s ease !important;
  }
  body.hide-sidebar #menu.sidebar { left: 0 !important; }
  #sp-nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 1040;
  }
}
#sp-nav-backdrop { display: none; }