/* =============================================================================
   SMARTPALM PORTAL B24 - customer area in the Bitrix24 AIR grammar
   Written 2026-09-25. Loaded by themes/latnok/head.php AFTER custom.css, so every
   rule here outranks custom.css sections 13 / 16.2 / 32 by order (and by
   !important where custom.css used it). Nothing in custom.css is edited.

   Anatomy (spec BITRIX24-VS-SMARTPALM-DIFF.md C4):
     wallpaper on the body (same html[data-wallpaper] presets as the admin)
     240px transparent sidebar (#pb-side), rows 212x38 r10, active 30% white
     58px transparent header (#pb-head): section nav . search . wordmark . bell . avatar pill
     toolbar row (.pb-band): 25/600 title, green 34/10 primary, 401x34 glass search
     nav row: joined counter chips built from the stats strips
     ONE white r12 card, grid 48/72, footer 11/600
     slide-over for documents, Feed-style dashboard, drawer under 768px
   Everything hangs off html.pb (set by the head boot line) and the DOM that
   assets/js/portal.js builds. Public pages (login/register/forgot/KB) use html.pb-pub.
   ========================================================================== */

/* ---------- 0. tokens ------------------------------------------------------ */
html.pb {
  --pb-side: 240px; --pb-rail: 66px; --pb-head: 58px; --pb-gut: 22px;
  --pb-white: #fff; --pb-ink: #333; --pb-label: #a3a9b1; --pb-90: #525c69; --pb-70: #828b95; --pb-80: #6a737f;
  --pb-line: #edeef0; --pb-line-soft: #eef2f4; --pb-hover: #f6f8f9; --pb-05: #eef2f4; --pb-02: #f8fafb;
  --pb-primary: #0075ff; --pb-link: #2066b0; --pb-green: #1cae6a; --pb-green-dark: #179a5d; --pb-alert: #ff5752; --pb-red: #f2473d;
  --pb-teal: #47e4c2;
  --pb-edge: #fff; --pb-edge-2: rgba(255,255,255,.7); --pb-edge-border: rgba(255,255,255,.14);
  --pb-edge-idle: rgba(255,255,255,.16); --pb-edge-active: rgba(255,255,255,.30);
  --pb-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --pb-shadow-card: 0 5px 16px rgba(0,0,0,.03);
  --pb-shadow-pop: 0 8px 17px rgba(0,0,0,.21);
}

/* ---------- 1. page ground -------------------------------------------------- */
html.pb, html.pb body.customers { height: auto; min-height: 100%; }
html.pb body.customers { font-family: var(--pb-font); color: var(--pb-ink); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
/* signed in: the company wallpaper (custom.css section 2 paints --app-backdrop); the base colour
   stays navy so a slow image never flashes white. Public pages keep the sign-in photograph that
   custom.css 16.2 gives them (the reference's own sign-in is a photograph + gradient). */
html.pb.pb-in body.customers {
  background-color: #13315c !important;
  background-image: var(--app-backdrop) !important;
  background-attachment: fixed !important; background-size: cover !important; background-repeat: no-repeat !important;
}
@media (hover: none) and (pointer: coarse) { html.pb body.customers { background-attachment: scroll !important; } }
/* the theme's Bootstrap navbar and its Files/Calendar sub-menu are re-rendered as the
   sidebar + header; the originals stay in the DOM (Perfex hooks and the language
   switch live there) but out of sight */
html.pb body.customers > nav.navbar.header,
html.pb body.customers nav.navbar.header,
html.pb body.customers ul.submenu.customer-top-submenu,
html.pb body.customers ul.customer-top-submenu + .clearfix { display: none !important; }

/* logged-in shell geometry */
html.pb.pb-in body.customers #wrapper {
  margin: 0 0 0 var(--pb-side) !important; padding-top: var(--pb-head); min-height: 100vh; width: auto !important;
  background: transparent !important; overflow: visible;
}
html.pb.pb-in body.customers #content { padding: 0; }
html.pb.pb-in body.customers #content > .container,
html.pb.pb-in body.customers .kb-search .container {
  width: auto !important; max-width: none !important; padding: 0 var(--pb-gut) !important; margin: 0 !important;
}
html.pb.pb-in body.customers #content > .container > .row { margin: 0; }
html.pb.pb-in body.customers #content > .container > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
/* text loose on the wallpaper is white; a card resets the ink */
html.pb.pb-in body.customers #content { color: #fff; }
html.pb.pb-in body.customers #content .panel_s,
html.pb.pb-in body.customers #content .pb-card,
html.pb.pb-in body.customers #content .alert,
html.pb.pb-in body.customers #content .dropdown-menu,
html.pb.pb-in body.customers #content table,
html.pb.pb-in body.customers #content .modal-content { color: var(--pb-ink); }
html.pb.pb-in body.customers #content h1, html.pb.pb-in body.customers #content h2,
html.pb.pb-in body.customers #content h3, html.pb.pb-in body.customers #content h4,
html.pb.pb-in body.customers #content h5 { color: inherit; }

/* footer bar on the wallpaper, the way the reference ends every page */
html.pb body.customers footer.footer {
  background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 0 !important; box-shadow: none !important; color: rgba(255,255,255,.7); font-size: 13px;
  padding: 18px 0 22px; margin: 0;
}
html.pb.pb-in body.customers footer.footer { margin-left: var(--pb-side); width: auto !important; }
html.pb body.customers footer.footer a { color: #fff; }
html.pb body.customers footer.footer .container { width: auto !important; max-width: none; padding: 0 var(--pb-gut); }

/* ---------- 2. sidebar ----------------------------------------------------- */
#pb-side {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--pb-side); z-index: 1040;
  display: flex; flex-direction: column; box-sizing: border-box;
  background: transparent; color: #fff; font-family: var(--pb-font);
  padding: 0 14px 12px;
}
#pb-side *, #pb-head *, .pb-band *, .pb-panel * { box-sizing: border-box; }
.pb-side-head { height: var(--pb-head); display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pb-side-head .pb-logo {
  display: block; width: 156px; height: 34px; margin-left: 2px;
  background: url("/uploads/company/login-brand.png?v=2") left center / contain no-repeat;
  text-decoration: none;
}
.pb-side-head .pb-logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pb-side-head .pb-x { display: none; margin-left: auto; }
.pb-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.pb-nav::-webkit-scrollbar { width: 6px; } .pb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }
.pb-nav ul, .pb-side-foot ul { list-style: none; margin: 0; padding: 0; }
.pb-item { margin: 0 0 4px; border-radius: 10px; }
.pb-item > a {
  display: flex; align-items: center; gap: 0;
  height: 38px; padding: 6px; border-radius: 10px;
  color: #fff !important; text-decoration: none !important; font-size: 15px; line-height: 20px; font-weight: 400;
  transition: background .12s ease;
}
.pb-item > a:hover { background: var(--pb-edge-idle); }
.pb-item.pb-on { background: var(--pb-edge-active); }
.pb-item.pb-on > a { font-weight: 400; }
.pb-ico {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7);
}
.pb-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pb-txt { margin-left: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.pb-cnt {
  margin-left: 8px; min-width: 14px; height: 14px; padding: 0 4px; border-radius: 14px;
  background: var(--pb-red); color: #fff; font-size: 10px; font-weight: 600; line-height: 14px; text-align: center;
}
.pb-cnt:empty, .pb-cnt[data-n="0"] { display: none; }
.pb-side-foot { flex: 0 0 auto; padding-top: 6px; }
.pb-side-foot .pb-item > a { color: rgba(255,255,255,.7) !important; }
.pb-side-foot .pb-item > a .pb-ico { color: rgba(255,255,255,.5); }
.pb-me {
  display: flex; align-items: center; gap: 9px; height: 52px; margin-top: 8px; padding: 0 10px;
  border-radius: 10px; background: rgba(255,255,255,.10); color: #fff !important; text-decoration: none !important;
}
.pb-me:hover { background: rgba(255,255,255,.18); }
.pb-me img { width: 29px; height: 29px; border-radius: 50%; object-fit: cover; flex: 0 0 29px; background: rgba(255,255,255,.2); }
.pb-me b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-me small { display: block; font-size: 11px; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-me > span { min-width: 0; }

/* ---------- 3. header ------------------------------------------------------ */
#pb-head {
  position: fixed; top: 0; left: var(--pb-side); right: 0; height: var(--pb-head); z-index: 1039;
  display: flex; align-items: center; gap: 12px; padding: 0 22px; color: #fff; font-family: var(--pb-font);
  background: transparent; transition: background .18s ease;
}
/* once the page scrolls the header keeps the wallpaper under it (a wash, no blur) */
html.pb.pb-scrolled #pb-head {
  background-color: #13315c; background-image: linear-gradient(rgba(10,20,40,.18), rgba(10,20,40,.18)), var(--app-backdrop);
  background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat;
}
.pb-burger {
  display: none; width: 38px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: rgba(255,255,255,.75);
  align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: 0 0 auto;
}
.pb-burger:hover { background: var(--pb-edge-idle); color: #fff; }
.pb-burger svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; }
.pb-sections { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; height: var(--pb-head); }
.pb-sec {
  display: inline-flex; align-items: center; height: var(--pb-head); padding: 0 12px;
  color: rgba(255,255,255,.7) !important; font-size: 15px; text-decoration: none !important; white-space: nowrap;
  border-bottom: 2px solid transparent; border-top: 2px solid transparent;
}
.pb-sec:hover { color: #fff !important; }
.pb-sec.pb-on { color: #fff !important; }
.pb-head-r { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* search: 38px icon that grows in place to 400px on focus (A2) */
.pb-search { position: relative; display: flex; align-items: center; margin: 0; }
.pb-search input {
  width: 38px; height: 34px; padding: 0 12px 0 34px; border-radius: 8px; box-sizing: border-box !important; min-width: 0;
  background: var(--pb-edge-idle); border: 1px solid var(--pb-edge-border); color: #fff; font-size: 14px;
  outline: none; transition: width .18s ease; cursor: pointer; font-family: var(--pb-font);
}
.pb-search input::placeholder { color: transparent; }
.pb-search input:focus, .pb-search.pb-open input { width: 400px; cursor: text; }
.pb-search input:focus::placeholder, .pb-search.pb-open input::placeholder { color: rgba(255,255,255,.65); }
.pb-search svg { position: absolute; left: 10px; top: 50%; width: 17px; height: 17px; margin-top: -8px; stroke: rgba(255,255,255,.85); fill: none; stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.pb-wordmark { font-size: 18px; font-weight: 600; color: #fff; white-space: nowrap; margin: 0 4px; }
.pb-hbtn {
  height: 24px; padding: 3px 8px; border-radius: 12px; border: 1px solid var(--pb-edge-border); background: transparent;
  color: #fff !important; font-size: 13px; line-height: 1; text-decoration: none !important; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.pb-hbtn:hover { background: var(--pb-edge-idle); }
.pb-hbtn.pb-accent { background: #00904d; border-color: #00904d; }
.pb-bell {
  position: relative; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff !important; text-decoration: none !important;
}
.pb-bell:hover { background: var(--pb-edge-idle); }
.pb-bell svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pb-bell .pb-cnt { position: absolute; top: 3px; right: 3px; margin: 0; box-shadow: 0 0 0 2px rgba(11,37,69,.55); }
/* the avatar pill: 112x29, radius 48, #1587FA, the 29px avatar overlapping its right end */
.pb-user { position: relative; height: var(--pb-head); display: flex; align-items: center; margin-right: 8px; }
.pb-pill {
  display: inline-flex; align-items: center; height: 29px; padding: 0 28px 0 12px; border-radius: 48px;
  background: #1587fa; border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 14px; font-weight: 600; line-height: 1;
  cursor: pointer; font-family: var(--pb-font); white-space: nowrap; max-width: 220px;
}
.pb-pill span { overflow: hidden; text-overflow: ellipsis; }
.pb-pill img, .pb-pill .pb-avatar-fallback {
  position: absolute; right: -8px; top: 50%; width: 29px; height: 29px; margin-top: -14.5px; border-radius: 50%;
  object-fit: cover; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.25); display: inline-flex; align-items: center; justify-content: center;
  color: #1587fa; font-size: 12px; font-weight: 700;
}
.pb-menu {
  display: none; position: absolute; top: calc(var(--pb-head) - 6px); right: 0; z-index: 1200; min-width: 245px;
  margin: 0; padding: 10px 0; list-style: none; background: #fff; border-radius: 18px; box-shadow: var(--pb-shadow-pop);
}
.pb-user.pb-open .pb-menu { display: block; }
.pb-menu > li { display: block; }
.pb-menu > li > a {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px; color: var(--pb-ink) !important;
  font-size: 14px; text-decoration: none !important; white-space: nowrap;
}
.pb-menu > li > a:hover { background: var(--pb-hover); }
.pb-menu > li > a .badge { margin-left: auto; background: var(--pb-red); color: #fff; font-size: 10px; font-weight: 600; border-radius: 14px; min-width: 14px; height: 14px; line-height: 14px; padding: 0 4px; }
.pb-menu .pb-menu-head { display: flex; align-items: center; gap: 12px; padding: 6px 16px 12px; border-bottom: 1px solid var(--pb-line); margin-bottom: 8px; }
.pb-menu .pb-menu-head img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--pb-05); }
.pb-menu .pb-menu-head b { display: block; font-size: 17px; font-weight: 600; color: var(--pb-ink); }
.pb-menu .pb-menu-head small { display: inline-block; margin-top: 4px; height: 20px; line-height: 20px; padding: 0 8px; border-radius: 512px; background: #e6f4ff; color: #0091e3; font-size: 12px; }
.pb-menu .pb-menu-sep { height: 1px; background: var(--pb-line); margin: 8px 0; }
.pb-menu .pb-menu-lang { padding: 6px 16px 2px; }
.pb-menu .pb-menu-lang label { display: block; font-size: 12px; color: var(--pb-label); margin: 0 0 4px; }
.pb-menu .pb-menu-lang select { width: 100%; height: 34px; border-radius: 8px; border: 1px solid #edeef0; padding: 0 8px; font-size: 14px; color: var(--pb-ink); background: #fff; }
.pb-menu > li.pb-menu-out > a { color: var(--pb-70) !important; }
.pb-menu .pb-menu-lang .bootstrap-select { width: 100% !important; }
.pb-menu .pb-menu-lang .bootstrap-select > .dropdown-toggle { height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid #edeef0; background: #fff; box-shadow: none; font-size: 14px; color: var(--pb-ink); display: flex; align-items: center; }
.pb-menu .pb-menu-lang .bootstrap-select .dropdown-menu { border-radius: 12px; }

/* ---------- 4. the band: toolbar row + nav row ----------------------------- */
.pb-band { margin: 0; padding: 22px var(--pb-gut) 0; color: #fff; font-family: var(--pb-font); }
.pb-toolbar { display: flex; align-items: center; gap: 12px; min-height: 34px; flex-wrap: wrap; }
.pb-title {
  margin: 0; font-size: 25px; font-weight: 600; line-height: 34px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.pb-title-extra { display: inline-flex; align-items: center; gap: 8px; }
.pb-title-extra .label, .pb-band .label {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 8px;
  background: var(--pb-edge-idle) !important; color: #fff !important; border: 1px solid var(--pb-edge-border) !important; font-size: 12px; font-weight: 600;
}
.pb-band .team-members img { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.pb-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pb-actions-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* the one primary: green split-style button, 34/10, 16/600, plus icon */
.pb-band .btn, .pb-band a.btn, .pb-band button.btn {
  height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 13px 0 9px; margin: 0;
  border-radius: 10px; border: 1px solid var(--pb-edge-border); background: var(--pb-edge-idle); color: #fff !important;
  font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none !important; box-shadow: none; font-family: var(--pb-font);
}
.pb-band .btn:hover { background: var(--pb-edge-active); color: #fff !important; }
.pb-band .btn.btn-primary, .pb-band .btn.btn-success, .pb-band .pb-primary {
  background: var(--pb-green) !important; border-color: var(--pb-green) !important; font-size: 16px; padding: 0 13px 0 9px;
}
.pb-band .btn.btn-primary:hover, .pb-band .btn.btn-success:hover, .pb-band .pb-primary:hover { background: var(--pb-green-dark) !important; border-color: var(--pb-green-dark) !important; }
.pb-band .btn i { font-size: 14px; margin: 0 !important; }
.pb-band .btn.btn-primary i.fa-plus::before, .pb-band .btn.btn-primary i.fa-regular::before { content: ""; }
.pb-band .btn.btn-primary i.fa-plus, .pb-band .btn.btn-primary i.fa-regular.fa-plus {
  width: 16px; height: 16px; display: inline-block; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>") center / 16px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>") center / 16px no-repeat;
}
/* the list search, moved here from DataTables: 401x34 r8 glass field with magnifier */
.pb-band .pb-filter { position: relative; display: flex; align-items: center; margin: 0; }
.pb-band .pb-filter .dataTables_filter { margin: 0; text-align: left; }
.pb-band .pb-filter label { margin: 0; font-size: 0; display: block; }
.pb-band .pb-filter .input-group, html.pb.pb-in body.customers #content .pb-band .pb-filter .input-group { display: block; width: 401px; max-width: 100%; }
.pb-band .pb-filter input, .pb-band .pb-filter input.form-control, html.pb.pb-in body.customers #content .pb-band .pb-filter input.form-control {
  width: 401px !important; max-width: 100%; height: 34px !important; min-height: 0; margin: 0; padding: 0 40px 0 16px !important; border-radius: 8px !important;
  background: linear-gradient(to right, rgba(255,255,255,.12), rgba(255,255,255,.16)) !important; border: 1px solid var(--pb-edge-border) !important;
  color: #fff !important; font-size: 15px; box-shadow: none !important; outline: none; font-family: var(--pb-font);
}
.pb-band .pb-filter input::placeholder, html.pb.pb-in body.customers #content .pb-band .pb-filter input::placeholder { color: rgba(255,255,255,.7); }
.pb-band .pb-filter input:focus, html.pb.pb-in body.customers #content .pb-band .pb-filter input.form-control:focus { width: 401px !important; background: rgba(255,255,255,.2) !important; border-color: rgba(255,255,255,.3) !important; box-shadow: none !important; }
html.pb.pb-in body.customers #content .pb-band .pb-filter label { display: block; margin: 0; font-size: 0; }
.pb-band .pb-filter::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none;
  background: rgba(255,255,255,.85);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") center / 16px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") center / 16px no-repeat;
}
.pb-band .input-group-addon, .pb-band .pb-filter .input-group-addon { display: none !important; }
/* the same band buttons restated at the specificity of the in-card button rules below (section 7) */
html.pb.pb-in body.customers #content .pb-band .btn, html.pb.pb-in body.customers #content .pb-band a.btn {
  height: 34px; padding: 0 13px 0 9px; border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 1;
  border: 1px solid var(--pb-edge-border) !important; background: var(--pb-edge-idle) !important; color: #fff !important;
}
html.pb.pb-in body.customers #content .pb-band .btn:hover { background: var(--pb-edge-active) !important; }
html.pb.pb-in body.customers #content .pb-band .btn.btn-primary, html.pb.pb-in body.customers #content .pb-band .btn.btn-success, html.pb.pb-in body.customers #content .pb-band .pb-primary {
  background: var(--pb-green) !important; border-color: var(--pb-green) !important; font-size: 16px;
}
html.pb.pb-in body.customers #content .pb-band .btn.btn-primary:hover, html.pb.pb-in body.customers #content .pb-band .btn.btn-success:hover { background: var(--pb-green-dark) !important; border-color: var(--pb-green-dark) !important; }
html.pb.pb-in body.customers #content .pb-band .pb-util, html.pb.pb-in body.customers #content .pb-band .pb-utils .btn, html.pb.pb-in body.customers #content .pb-band .pb-utils a {
  height: 28px !important; padding: 0 9px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 400 !important;
  background: linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)) !important; border: 1px solid var(--pb-edge-border) !important; color: #fff !important;
}
/* nav row: joined counter panel + utilities (28/8, 13/400) */
.pb-navrow { display: flex; align-items: center; gap: 12px; margin-top: 22px; min-height: 28px; flex-wrap: wrap; }
.pb-navrow:empty { display: none; }
.pb-counters { display: inline-flex; align-items: center; height: 28px; border-radius: 8px; overflow: hidden; }
.pb-counters .pb-lbl { font-size: 13px; color: rgba(255,255,255,.7); margin-right: 8px; }
.pb-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  background: var(--pb-edge-idle); color: rgba(255,255,255,.7) !important; font-size: 13px; text-decoration: none !important; white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.12);
}
.pb-chip:last-child { border-right: 0; }
.pb-chip b { color: #fff; font-weight: 600; }
.pb-chip:hover { background: var(--pb-edge-active); color: #fff !important; }
.pb-chip.pb-on { background: var(--pb-edge-active); color: #fff !important; }
.pb-chip.pb-zero { opacity: .55; }
.pb-chip.pb-zero b { color: rgba(255,255,255,.8); }
.pb-utils { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.pb-band .pb-util, .pb-utils a, .pb-utils .btn {
  height: 28px !important; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px !important; border-radius: 8px !important;
  background: linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)) !important; border: 1px solid var(--pb-edge-border) !important; color: #fff !important;
  font-size: 13px !important; font-weight: 400 !important; text-decoration: none !important; white-space: nowrap;
}
.pb-utils a:hover, .pb-band .pb-util:hover { background: var(--pb-edge-active) !important; }
/* the page's own sub-headings that the band replaces */
html.pb.pb-in body.customers .pb-hidden { display: none !important; }

/* ---------- 5. cards ------------------------------------------------------- */
html.pb.pb-in body.customers #content .panel_s,
html.pb.pb-in body.customers #content .pb-card {
  background: #fff !important; color: var(--pb-ink); border: 0 !important; border-radius: 12px !important;
  box-shadow: var(--pb-shadow-card) !important; margin: 0 0 22px; overflow: hidden;
}
html.pb.pb-in body.customers #content > .container > .row > .panel_s { margin-top: 22px; }
html.pb.pb-in body.customers #content .panel_s > .panel-body { padding: 20px; }
/* a card that holds a grid: the grid touches the edges, the way the reference draws it */
html.pb.pb-in body.customers #content .panel_s > .panel-body:has(> table.dt-table),
html.pb.pb-in body.customers #content .panel_s > .panel-body:has(> .dataTables_wrapper),
html.pb.pb-in body.customers #content .panel_s > .panel-body:has(> .table-responsive > table) { padding: 0; }
html.pb.pb-in body.customers #content .panel_s > .panel-body > hr,
html.pb.pb-in body.customers #content .panel_s > .panel-body > .hr-panel-heading { display: none; }
html.pb.pb-in body.customers #content .panel_s > .panel-heading {
  background: #fff; border: 0; border-bottom: 1px solid var(--pb-line); padding: 16px 20px; border-radius: 12px 12px 0 0;
}
html.pb.pb-in body.customers #content .panel_s > .panel-heading .panel-title { font-size: 16px; font-weight: 600; color: var(--pb-ink); margin: 0; }
html.pb.pb-in body.customers #content .panel_s > .panel-footer,
html.pb.pb-in body.customers #content form > .panel_s > .panel-footer {
  background: #fff; border: 0; border-top: 1px solid var(--pb-line); padding: 20px 22px; border-radius: 0 0 12px 12px;
  box-shadow: 0 -2px 6px rgba(0,0,0,.06); position: sticky; bottom: 0; z-index: 2;
}
/* the stats strips became the counter chips; the source blocks stay for their data */
html.pb.pb-in body.customers .invoices-stats, html.pb.pb-in body.customers .estimates-stats,
html.pb.pb-in body.customers dl.tw-grid { display: none !important; }
/* page copy loose on the wallpaper (the KB "not found" line, "No files found") */
html.pb.pb-in body.customers #content .panel_s p.no-margin,
html.pb.pb-in body.customers #content .panel_s .tw-text-neutral-500 { color: var(--pb-90); }
html.pb.pb-in body.customers #content .panel_s h1, html.pb.pb-in body.customers #content .panel_s h2,
html.pb.pb-in body.customers #content .panel_s h3, html.pb.pb-in body.customers #content .panel_s h4,
html.pb.pb-in body.customers #content .panel_s h5 { color: var(--pb-ink); }
/* announcements (template_parts/alerts.php) as a card */
html.pb.pb-in body.customers #content .panel_s .announcement { padding: 20px; margin: 0; border-bottom: 1px solid var(--pb-line); }
html.pb.pb-in body.customers #content .panel_s .announcement:last-child { border-bottom: 0; }
html.pb.pb-in body.customers #content .panel_s .announcement .close { opacity: .6; }
html.pb.pb-in body.customers #content .panel_s .announcement h4.text-info { color: var(--pb-primary); font-size: 13px; }

/* ---------- 6. the grid ---------------------------------------------------- */
html.pb.pb-in body.customers .dataTables_wrapper { overflow-x: auto; }
html.pb.pb-in body.customers .dataTables_wrapper > .row { margin: 0; }
html.pb.pb-in body.customers .dataTables_wrapper.pb-list > .row:not(.pb-foot) { display: none; }
html.pb.pb-in body.customers .dataTables_wrapper > .row.pb-foot { display: flex; }
/* a second list on the page (a project tab) keeps its search inside the card */
html.pb.pb-in body.customers .pb-listbar { display: flex; justify-content: flex-end; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--pb-line); }
html.pb.pb-in body.customers .pb-listbar label { margin: 0; font-size: 0; }
html.pb.pb-in body.customers .pb-listbar .dataTables_filter { margin: 0; }
html.pb.pb-in body.customers .pb-listbar .input-group { display: block; width: 260px; }
html.pb.pb-in body.customers #content .pb-listbar label { display: block; margin: 0; font-size: 0; }
html.pb.pb-in body.customers .pb-listbar input, html.pb.pb-in body.customers #content .pb-listbar input.form-control { width: 260px; height: 34px; border-radius: 8px; border: 1px solid #edeef0; background: #fff; padding: 0 12px; font-size: 14px; color: var(--pb-ink); box-shadow: none; }
html.pb.pb-in body.customers .dataTables_wrapper .table-responsive { border: 0; margin: 0; }
html.pb.pb-in body.customers table.table.dt-table, html.pb.pb-in body.customers table.table { margin: 0; border-collapse: separate; border-spacing: 0; width: 100%; background: #fff; }
html.pb.pb-in body.customers table.table > thead > tr > th {
  height: 48px; padding: 0 16px; vertical-align: middle; background: #fff; color: var(--pb-ink);
  font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; border: 0; border-bottom: 1px solid var(--pb-line); white-space: nowrap;
}
html.pb.pb-in body.customers table.table > thead > tr > th.sorting::after,
html.pb.pb-in body.customers table.table > thead > tr > th.sorting_asc::after,
html.pb.pb-in body.customers table.table > thead > tr > th.sorting_desc::after { opacity: .35; }
html.pb.pb-in body.customers table.table > tbody > tr > td {
  height: 72px; box-sizing: border-box; padding: 12px 16px; vertical-align: middle; background: #fff; color: var(--pb-ink);
  font-size: 14px; border: 0; border-bottom: 1px solid var(--pb-line-soft);
}
html.pb.pb-in body.customers table.table > tbody > tr:last-child > td { border-bottom: 0; }
html.pb.pb-in body.customers table.table > tbody > tr:hover > td { background: var(--pb-hover); }
html.pb.pb-in body.customers table.table > tbody > tr > td a:not(.btn) { color: var(--pb-link); text-decoration: none; }
html.pb.pb-in body.customers table.table > tbody > tr > td a:not(.btn):hover { text-decoration: underline; }
html.pb.pb-in body.customers table.table > tbody > tr > td:first-child a:not(.btn) { font-weight: 400; }
html.pb.pb-in body.customers .tickets table tr.text-danger a { font-weight: 600; }
html.pb.pb-in body.customers table.table > tbody > tr.text-danger > td { color: var(--pb-ink); }
/* per-row actions (contacts) */
html.pb.pb-in body.customers table.table .row-options { margin: 4px 0 0; padding: 0; font-size: 12px; color: var(--pb-70); }
html.pb.pb-in body.customers table.table .row-options a { color: var(--pb-70) !important; }
/* footer: 52px cells, 11/600 uppercase #5C6470, "Records" select at the right */
html.pb.pb-in body.customers .pb-foot {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap; min-height: 52px; padding: 6px 19px; border-top: 1px solid var(--pb-line);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: #5c6470;
}
html.pb.pb-in body.customers .pb-foot > * { margin: 0 !important; padding: 0 !important; float: none !important; width: auto !important; }
html.pb.pb-in body.customers .pb-foot .dataTables_info { font-size: 11px; font-weight: 600; color: #5c6470; padding: 0 !important; }
html.pb.pb-in body.customers .pb-foot .pb-foot-r { margin-left: auto !important; display: flex; align-items: center; gap: 18px; }
html.pb.pb-in body.customers .pb-foot .dataTables_length { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
html.pb.pb-in body.customers #content .pb-foot .dataTables_length label { margin: 0; font-size: 11px; font-weight: 600; color: #5c6470; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
html.pb.pb-in body.customers #content .pb-foot .dataTables_length select.form-control { height: 28px; line-height: 26px; border-radius: 6px; border: 1px solid var(--pb-line); font-size: 12px; padding: 0 6px; color: var(--pb-ink); background: #fff; width: auto !important; }
html.pb.pb-in body.customers .pb-foot .dataTables_paginate { padding: 0 !important; margin: 0 !important; }
html.pb.pb-in body.customers .pb-foot .dataTables_paginate .pagination { margin: 0; display: inline-flex; gap: 2px; }
html.pb.pb-in body.customers .pb-foot .dataTables_paginate .pagination > li > a,
html.pb.pb-in body.customers .pb-foot .dataTables_paginate .pagination > li > span {
  height: 28px; min-width: 28px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: transparent; color: #5c6470; font-size: 11px; font-weight: 600; text-transform: uppercase;
}
html.pb.pb-in body.customers .pb-foot .dataTables_paginate .pagination > li.active > a,
html.pb.pb-in body.customers .pb-foot .dataTables_paginate .pagination > li.active > span { background: var(--pb-05); color: var(--pb-ink); }
html.pb.pb-in body.customers .pb-foot .dataTables_paginate .pagination > li.disabled > a { opacity: .4; }
html.pb.pb-in body.customers .pb-foot .dataTables_paginate .pagination > li > a:hover { background: var(--pb-hover); }
/* the DataTables processing veil */
html.pb.pb-in body.customers .dataTables_processing { border: 0; box-shadow: none; background: rgba(255,255,255,.7); font-size: 13px; color: var(--pb-70); }
/* empty state: 31/300 title + 16/300 line, centred inside the card */
html.pb.pb-in body.customers table.table > tbody > tr > td.dataTables_empty,
html.pb.pb-in body.customers .pb-empty { text-align: center; padding: 48px 24px 56px !important; height: auto; }
html.pb.pb-in body.customers .pb-empty h3 { margin: 0 0 8px; font-size: 31px; font-weight: 300; color: var(--pb-ink); line-height: 1.2; }
html.pb.pb-in body.customers .pb-empty p { margin: 0; font-size: 16px; font-weight: 300; color: var(--pb-90); }
html.pb.pb-in body.customers table.table > tbody > tr:hover > td.dataTables_empty { background: #fff; }
html.pb.pb-in body.customers .pb-empty-ill { width: 132px; height: 103px; margin: 0 auto 18px; display: block; opacity: .9; }
/* neutral status chips (tickets, projects) and the stage bar (invoices, estimates) */
html.pb.pb-in body.customers table.table .label, html.pb.pb-in body.customers table.table .s-status {
  display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 6px;
  background: var(--pb-05) !important; color: var(--pb-90) !important; border: 0 !important; font-size: 12px; font-weight: 400; line-height: 20px;
}
html.pb.pb-in body.customers table.table .label[style*="background"]::before,
html.pb.pb-in body.customers table.table .label.pb-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, #a8adb4); flex: 0 0 8px; }
html.pb.pb-in body.customers .pb-stage { display: inline-flex; flex-direction: column; gap: 4px; line-height: 1; }
html.pb.pb-in body.customers .pb-stage-bar { display: inline-flex; }
html.pb.pb-in body.customers .pb-stage-bar i { display: block; width: 28px; height: 8px; margin-right: -1px; border: 1px solid #c9ccd0; background: #fff; }
html.pb.pb-in body.customers .pb-stage-bar i:first-child { border-radius: 1px 0 0 1px; }
html.pb.pb-in body.customers .pb-stage-bar i:last-child { border-radius: 0 1px 1px 0; margin-right: 0; }
html.pb.pb-in body.customers .pb-stage-bar i.pb-fill { background: var(--pb-teal); border-color: var(--pb-teal); }
html.pb.pb-in body.customers .pb-stage.pb-late .pb-stage-bar i.pb-fill { background: var(--pb-alert); border-color: var(--pb-alert); }
html.pb.pb-in body.customers .pb-stage.pb-off .pb-stage-bar i.pb-fill { background: #c9ccd0; border-color: #c9ccd0; }
html.pb.pb-in body.customers .pb-stage-txt { font-size: 14px; color: var(--pb-ink); }
html.pb.pb-in body.customers table.table .pb-stage .label, html.pb.pb-in body.customers table.table .pb-stage .s-status, html.pb.pb-in body.customers .pb-stage .label { display: none !important; }
/* images in the files table */
html.pb.pb-in body.customers table.table .table-image, html.pb.pb-in body.customers table.table .table-image img { max-width: 120px; border-radius: 6px; }

/* ---------- 7. buttons, forms, popups ------------------------------------- */
html.pb body.customers .btn { font-family: var(--pb-font); box-shadow: none; transition: background .12s ease, border-color .12s ease; }
html.pb.pb-in body.customers #content .panel_s .btn,
html.pb.pb-in body.customers #content .pb-card .btn,
html.pb.pb-in body.customers #content .btn:not(.pb-band .btn) {
  height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 17px; border-radius: 10px;
  font-size: 15px; font-weight: 600; line-height: 1; border: 1px solid transparent;
}
html.pb.pb-in body.customers #content .btn.btn-xs, html.pb.pb-in body.customers #content .btn.btn-sm { height: 28px; padding: 0 10px; font-size: 13px; border-radius: 8px; font-weight: 400; }
html.pb.pb-in body.customers #content .btn.btn-icon { width: 38px; padding: 0; justify-content: center; }
html.pb.pb-in body.customers #content .btn-primary, html.pb.pb-in body.customers #content .btn-info { background: var(--pb-primary) !important; border-color: var(--pb-primary) !important; color: #fff !important; }
html.pb.pb-in body.customers #content .btn-primary:hover, html.pb.pb-in body.customers #content .btn-info:hover { background: #1f86ff !important; border-color: #1f86ff !important; }
html.pb.pb-in body.customers #content .btn-success { background: var(--pb-green) !important; border-color: var(--pb-green) !important; color: #fff !important; }
html.pb.pb-in body.customers #content .btn-success:hover { background: var(--pb-green-dark) !important; border-color: var(--pb-green-dark) !important; }
html.pb.pb-in body.customers #content .btn-default, html.pb.pb-in body.customers #content .btn-default:focus { background: #fff !important; border-color: #edeef0 !important; color: var(--pb-90) !important; }
html.pb.pb-in body.customers #content .btn-default:hover { background: var(--pb-05) !important; color: var(--pb-ink) !important; }
html.pb.pb-in body.customers #content .btn-danger { background: #fff !important; border-color: #ffd3d0 !important; color: var(--pb-alert) !important; }
html.pb.pb-in body.customers #content .btn-danger:hover { background: #fff1f0 !important; }
html.pb.pb-in body.customers #content .btn-block { width: 100%; justify-content: center; }
html.pb.pb-in body.customers #content .btn-group > .btn { border-radius: 10px; }
html.pb.pb-in body.customers #content .gpicker { height: 38px; border-radius: 10px; border: 1px solid #edeef0; background: #fff; padding: 0 14px; color: var(--pb-90); font-size: 14px; }
/* forms: 12px #A3A9B1 label above a 40px r4 #C6CDD3 control */
html.pb.pb-in body.customers #content label, html.pb.pb-in body.customers #content .control-label {
  display: block; margin: 0 0 6px; font-size: 12px; font-weight: 400; color: var(--pb-label); line-height: 14px;
}
html.pb.pb-in body.customers #content .form-group { margin-bottom: 18px; }
html.pb.pb-in body.customers #content .form-control,
html.pb.pb-in body.customers #content .bootstrap-select > .dropdown-toggle,
html.pb.pb-in body.customers #content select.form-control {
  height: 40px; padding: 0 11px; border-radius: 4px; border: 1px solid #c6cdd3; background: #fff; color: var(--pb-ink);
  font-size: 14px; box-shadow: none; font-family: var(--pb-font); line-height: 38px;
}
html.pb.pb-in body.customers #content textarea.form-control { height: auto; min-height: 96px; padding: 10px 11px; line-height: 1.5; }
html.pb.pb-in body.customers #content .form-control:focus, html.pb.pb-in body.customers #content .bootstrap-select.open > .dropdown-toggle { border-color: var(--pb-primary); box-shadow: 0 0 0 3px rgba(0,117,255,.12); outline: none; }
html.pb.pb-in body.customers #content .form-control[type="file"] { line-height: 1.5; padding: 8px 11px; }
html.pb.pb-in body.customers #content .input-group .form-control { border-radius: 4px 0 0 4px; }
html.pb.pb-in body.customers #content .input-group-addon { border-radius: 0 4px 4px 0; border-color: #c6cdd3; background: var(--pb-02); color: var(--pb-90); }
html.pb.pb-in body.customers #content .input-group-btn .btn { height: 40px; border-radius: 0 4px 4px 0; }
html.pb.pb-in body.customers #content .bootstrap-select > .dropdown-toggle { display: flex; align-items: center; }
html.pb.pb-in body.customers #content .bootstrap-select > .dropdown-toggle .filter-option { line-height: 38px; }
html.pb.pb-in body.customers #content .checkbox, html.pb.pb-in body.customers #content .radio { margin: 6px 0 12px; }
html.pb.pb-in body.customers #content .checkbox label, html.pb.pb-in body.customers #content .radio label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--pb-ink); margin: 0; }
html.pb.pb-in body.customers #content p.email-notifications-label, html.pb.pb-in body.customers #content .panel_s h3, html.pb.pb-in body.customers #content .panel_s h4.mbot15 {
  font-size: 18px; font-weight: 400; color: var(--pb-ink); margin: 8px 0 14px;
}
html.pb.pb-in body.customers #content .text-danger, html.pb.pb-in body.customers #content .alert-validation, html.pb.pb-in body.customers #content .help-block { color: var(--pb-alert); font-size: 12px; }
/* two-column form grid */
html.pb.pb-in body.customers .pb-formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
html.pb.pb-in body.customers .pb-formgrid > :not(.form-group), html.pb.pb-in body.customers .pb-formgrid > .form-group:has(textarea), html.pb.pb-in body.customers .pb-formgrid > hr, html.pb.pb-in body.customers .pb-formgrid > .row { grid-column: 1 / -1; }
@media (max-width: 1100px) { html.pb.pb-in body.customers .pb-formgrid { grid-template-columns: minmax(0, 1fr); } }
/* popups r18 */
html.pb body.customers .dropdown-menu { border: 0; border-radius: 18px; box-shadow: var(--pb-shadow-pop); padding: 10px 0; }
html.pb body.customers .dropdown-menu > li > a { height: 36px; display: flex; align-items: center; padding: 0 16px; font-size: 14px; color: var(--pb-ink); }
html.pb body.customers .dropdown-menu > li > a:hover { background: var(--pb-hover); }
html.pb body.customers .bootstrap-select .dropdown-menu { border-radius: 12px; }
html.pb body.customers .bootstrap-select .dropdown-menu > li > a { height: auto; padding: 8px 16px; }
/* alerts in cards */
html.pb.pb-in body.customers #content .alert { border: 0; border-radius: 10px; padding: 14px 18px; font-size: 14px; }
html.pb.pb-in body.customers #content .alert-info { background: #e5f9ff; color: #0b66c3; }
html.pb.pb-in body.customers #content .alert-danger { background: #fff1f0; color: #c0392b; }
html.pb.pb-in body.customers #content .alert-success { background: #e9fbf2; color: #137a48; }
html.pb.pb-in body.customers #content .alert-warning { background: #fff7e6; color: #9a5b00; }
/* modals */
html.pb body.customers .modal-content { border: 0; border-radius: 16px; box-shadow: var(--pb-shadow-pop); }
html.pb body.customers .modal-header { border-bottom: 1px solid var(--pb-line); padding: 18px 24px; }
html.pb body.customers .modal-title { font-size: 19px; font-weight: 600; color: var(--pb-ink); }
html.pb body.customers .modal-body { padding: 24px; }
html.pb body.customers .modal-footer { border-top: 1px solid var(--pb-line); padding: 16px 24px; }
html.pb body.customers .modal-backdrop.in { opacity: .4; }
/* toasts from app_js_alerts */
html.pb body.customers #toast-container > div { border-radius: 12px; box-shadow: var(--pb-shadow-pop); opacity: 1; }

/* ---------- 8. slide-over (documents) -------------------------------------- */
.pb-scrim { position: fixed; inset: 0; z-index: 1100; background: rgba(12,20,34,.38); opacity: 0; transition: opacity .18s ease; }
.pb-scrim.pb-in { opacity: 1; }
.pb-panel {
  position: fixed; top: 16px; right: 0; bottom: 0; left: var(--pb-side); z-index: 1101;
  display: flex; flex-direction: column; background: #eef2f4; border-radius: 18px 0 0 0;
  box-shadow: -18px 0 50px rgba(4,16,38,.30); transform: translateX(100%); transition: transform .22s ease, left .18s ease;
}
.pb-panel.pb-in { transform: translateX(0); }
.pb-panel.pb-wide { left: 65px; }
.pb-panel-edge { position: absolute; left: -43px; top: 18px; display: flex; flex-direction: column; gap: 6px; }
.pb-edge-btn {
  width: 43px; height: 36px; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  background: #3389cf; color: #fff !important; font-size: 14px; text-decoration: none !important; border-radius: 18px 0 0 18px; font-family: var(--pb-font);
}
.pb-edge-btn:hover { background: #2b78bb; }
.pb-edge-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pb-edge-btn.pb-edge-sm { height: 28px; background: #3181c3; }
.pb-panel iframe { flex: 1 1 auto; width: 100%; border: 0; background: transparent; border-radius: 18px 0 0 0; }
.pb-panel-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #eef2f4; border-radius: 18px 0 0 0; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
.pb-panel.pb-loading .pb-panel-load { opacity: 1; visibility: visible; transition: none; }
.pb-spin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d1d5db; border-top-color: var(--pb-primary); animation: pbSpin .8s linear infinite; }
@keyframes pbSpin { to { transform: rotate(360deg); } }
body.pb-panel-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .pb-panel, .pb-scrim, .pb-spin { transition: none !important; animation: none !important; } }
/* the framed document page: no shell, light, the record only */
html.ws-in-panel body.customers nav.navbar.header, html.ws-in-panel body.customers footer.footer,
html.ws-in-panel body.customers #pb-side, html.ws-in-panel body.customers #pb-head, html.ws-in-panel body.customers .pb-band { display: none !important; }
html.ws-in-panel body.customers, html.ws-in-panel body.customers #wrapper { background: transparent !important; background-image: none !important; margin: 0 !important; padding: 0 !important; }
html.ws-in-panel body.customers #content > .container { width: auto !important; max-width: 1080px; padding: 0 24px !important; margin: 0 auto !important; }
html.ws-in-panel body.customers .panel_s { background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.08); border: 0; }
html.ws-in-panel body.customers .preview-top-wrapper { background: #fff; border-radius: 12px; padding: 16px 20px; margin: 16px 0; box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 6px 18px rgba(15,23,42,.08); }
html.ws-in-panel body.customers .preview-top-wrapper .preview-sticky-container { width: auto; }
html.ws-in-panel body.customers h1, html.ws-in-panel body.customers h2, html.ws-in-panel body.customers h3, html.ws-in-panel body.customers h4 { color: var(--pb-ink); }

/* ---------- 9. dashboard: the Feed shape ----------------------------------- */
html.pb.pb-in body.customers .pb-feed { display: grid; grid-template-columns: minmax(0, 1fr) 264px; column-gap: 18px; align-items: start; }
html.pb.pb-in body.customers .pb-feed-main { min-width: 0; }
html.pb.pb-in body.customers .pb-feed-rail { min-width: 0; }
html.pb.pb-in body.customers .pb-feed-main .panel_s, html.pb.pb-in body.customers .pb-feed-main .pb-card { border-radius: 10px !important; }
html.pb.pb-in body.customers .pb-widget {
  background: rgba(255,255,255,.96); color: var(--pb-ink); border-radius: 12px; padding: 0 8px 12px; margin: 0 0 18px; box-shadow: var(--pb-shadow-card);
}
html.pb.pb-in body.customers .pb-widget h4 { margin: 0; padding: 14px 8px 8px; font-size: 14px; font-weight: 600; color: var(--pb-ink); }
html.pb.pb-in body.customers .pb-widget-rows { list-style: none; margin: 0; padding: 0; }
html.pb.pb-in body.customers .pb-widget-rows > li > a, html.pb.pb-in body.customers .pb-widget-rows > li > span {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px; border-radius: 8px; color: var(--pb-ink); font-size: 14px; text-decoration: none;
}
html.pb.pb-in body.customers .pb-widget-rows > li > a:hover { background: var(--pb-hover); }
html.pb.pb-in body.customers .pb-widget-rows b { margin-left: auto; font-weight: 600; color: var(--pb-90); min-width: 22px; text-align: right; }
html.pb.pb-in body.customers .pb-widget-rows b.pb-hot { color: var(--pb-red); }
html.pb.pb-in body.customers .pb-widget-rows .pb-ico { color: var(--pb-70); }
html.pb.pb-in body.customers .pb-widget .announcement { padding: 8px 8px 12px; border-bottom: 1px solid var(--pb-line); }
html.pb.pb-in body.customers .pb-widget .announcement h4 { padding: 0; font-size: 13px; }
html.pb.pb-in body.customers .pb-widget .announcement .announcement-name { font-size: 14px; margin-top: 8px; }
html.pb.pb-in body.customers .pb-widget .announcement .announcement-message { font-size: 13px; color: var(--pb-90); }
html.pb.pb-in body.customers .pb-widget .announcement small { color: var(--pb-70); font-size: 12px; }
html.pb.pb-in body.customers .pb-widget .announcement .close { float: right; opacity: .6; }
html.pb.pb-in body.customers .pb-app { display: flex; gap: 12px; align-items: center; padding: 6px 8px 2px; }
html.pb.pb-in body.customers .pb-app-tile { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; background: #0b2545; display: inline-flex; align-items: center; justify-content: center; }
html.pb.pb-in body.customers .pb-app-tile img { width: 40px; height: 40px; border-radius: 10px; }
html.pb.pb-in body.customers .pb-app p { margin: 0 0 8px; font-size: 13px; color: var(--pb-90); line-height: 1.35; }
html.pb.pb-in body.customers .pb-app button { height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid #c4e6ff; background: #e6f4ff; color: #0154c8; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--pb-font); }
html.pb.pb-in body.customers .pb-app-hint { font-size: 12px; color: var(--pb-70); padding: 0 8px 4px; margin: 0; }
/* project summary as kanban-style tiles */
html.pb.pb-in body.customers .pb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 16px 20px 20px; }
html.pb.pb-in body.customers .pb-tile {
  display: block; padding: 12px 14px; border-radius: 10px; background: var(--pb-02); border: 1px solid var(--pb-line); text-decoration: none !important; color: var(--pb-ink) !important;
  border-left: 3px solid var(--tint, #39a8ef);
}
html.pb.pb-in body.customers .pb-tile:hover { background: var(--pb-hover); }
html.pb.pb-in body.customers .pb-tile.pb-on { background: #fff; box-shadow: 0 0 0 2px rgba(0,117,255,.18); }
html.pb.pb-in body.customers .pb-tile small { display: block; font-size: 13px; color: var(--pb-90); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.pb.pb-in body.customers .pb-tile b { font-size: 22px; font-weight: 600; color: var(--pb-ink); }
html.pb.pb-in body.customers .pb-card-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 0; }
html.pb.pb-in body.customers .pb-card-head h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--pb-ink); }
html.pb.pb-in body.customers .pb-card-head a.pb-more { margin-left: auto; font-size: 13px; color: var(--pb-link); text-decoration: none; }
html.pb.pb-in body.customers .pb-card-head .form-group { margin: 0 0 0 auto; }
html.pb.pb-in body.customers .pb-card-head .form-group .bootstrap-select > .dropdown-toggle, html.pb.pb-in body.customers .pb-card-head .form-group .form-control { height: 34px; line-height: 32px; border-radius: 8px; }
html.pb.pb-in body.customers .pb-chart { padding: 8px 20px 20px; }
html.pb.pb-in body.customers .section-client-dashboard > .tw-mb-3, html.pb.pb-in body.customers .section-client-dashboard > h3 { display: none; }

/* ---------- 10. pages ------------------------------------------------------ */
/* tickets: unread rows bold, the single ticket as a conversation */
html.pb.pb-in body.customers .single-ticket-project-area .alert { margin: 0 0 16px; }
html.pb.pb-in body.customers .ticket-info .panel_s h4 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
html.pb.pb-in body.customers .ticket-info .panel_s p { color: var(--pb-90); font-size: 14px; }
html.pb.pb-in body.customers .ticket-info .panel_s p span { color: var(--pb-ink); }
html.pb.pb-in body.customers .ticket-info .ticket-status-inline .label { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 6px; background: var(--pb-05) !important; color: var(--pb-90) !important; font-size: 12px; }
html.pb.pb-in body.customers .ticket-info .ticket-status-inline .label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, #a8adb4); }
html.pb.pb-in body.customers .col-md-8 > .panel_s.client-reply, html.pb.pb-in body.customers .col-md-8 > .panel_s { border-radius: 10px !important; }
html.pb.pb-in body.customers .col-md-8 > .panel_s .border-right { border: 0 !important; }
html.pb.pb-in body.customers .col-md-8 > .panel_s .border-right p { margin: 0 0 2px; font-weight: 600; color: var(--pb-ink); }
html.pb.pb-in body.customers .col-md-8 > .panel_s .border-right p.text-muted { font-weight: 400; color: var(--pb-70); font-size: 12px; }
html.pb.pb-in body.customers .col-md-8 > .panel_s .panel-footer { position: static; box-shadow: none; padding: 10px 20px; font-size: 12px; color: var(--pb-70); }
html.pb.pb-in body.customers .col-md-8 > .panel_s p:has(> br), html.pb.pb-in body.customers .pb-rule { display: none; }
html.pb.pb-in body.customers .single-ticket-reply-area textarea { min-height: 120px; }
html.pb.pb-in body.customers #toplink, html.pb.pb-in body.customers #botlink { display: none; }
/* project: the record's tab strip, 58px, active blue, and the summary tiles */
html.pb.pb-in body.customers .horizontal-scrollable-tabs { margin: 0 -20px; padding: 0; }
html.pb.pb-in body.customers .horizontal-scrollable-tabs .scroller { display: none; }
html.pb.pb-in body.customers .horizontal-scrollable-tabs .horizontal-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
html.pb.pb-in body.customers .horizontal-scrollable-tabs .horizontal-tabs::-webkit-scrollbar { display: none; }
html.pb.pb-in body.customers ul.nav-tabs { border: 0; border-bottom: 1px solid var(--pb-line); margin: 0; padding: 0 12px; display: flex; flex-wrap: nowrap; }
html.pb.pb-in body.customers ul.nav-tabs > li { float: none; flex: 0 0 auto; margin: 0; }
html.pb.pb-in body.customers ul.nav-tabs > li > a { height: 58px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 0 !important; border-radius: 0; background: transparent !important; color: var(--pb-90); font-size: 15px; white-space: nowrap; margin: 0; border-bottom: 2px solid transparent !important; }
html.pb.pb-in body.customers ul.nav-tabs > li > a i { opacity: .7; font-size: 14px; }
html.pb.pb-in body.customers ul.nav-tabs > li > a:hover { color: var(--pb-ink); }
html.pb.pb-in body.customers ul.nav-tabs > li.active > a { color: var(--pb-primary); border-bottom-color: var(--pb-primary) !important; }
html.pb.pb-in body.customers .panel_s > .panel-body > .horizontal-scrollable-tabs + .clearfix { display: none; }
html.pb.pb-in body.customers .project-overview-progress-bar .progress, html.pb.pb-in body.customers .progress { height: 6px; border-radius: 6px; background: var(--pb-05); box-shadow: none; }
html.pb.pb-in body.customers .progress .progress-bar { border-radius: 6px; background: var(--pb-green); box-shadow: none; }
html.pb.pb-in body.customers .project-info-bg { background: var(--pb-02); border-radius: 10px; }
html.pb.pb-in body.customers .kan-ban-col .panel-heading, html.pb.pb-in body.customers .tasks-phases .panel-heading { border-radius: 6px 0 0 6px; }
/* knowledge base (logged in): custom.css 16.2 gives every KB page the sign-in photograph and a
   flex-column body; signed in it is an ordinary portal page on the company wallpaper */
html.pb.pb-in body.customers:has(.kb-search-jumbotron),
html.pb.pb-in body.customers:has(.knowledge-base) {
  display: block; background-color: #13315c !important; background-image: var(--app-backdrop) !important;
  background-position: center !important; background-attachment: fixed !important;
}
/* the search band is glass under the toolbar, categories are rows */
html.pb.pb-in body.customers .jumbotron.kb-search-jumbotron {
  margin: 0 var(--pb-gut) 22px !important; padding: 26px 24px !important; border-radius: 12px; background: rgba(255,255,255,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html.pb.pb-in body.customers .kb-search-jumbotron h2 { color: #fff; font-size: 20px; font-weight: 600; margin: 0 0 14px; }
html.pb.pb-in body.customers .kb-search-jumbotron .form-group { margin: 0; }
html.pb.pb-in body.customers .kb-search-jumbotron .input-group { display: flex; }
html.pb.pb-in body.customers .kb-search-jumbotron .form-control { height: 42px; border-radius: 8px 0 0 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.92); color: var(--pb-ink); font-size: 15px; padding-left: 40px; }
html.pb.pb-in body.customers .kb-search-jumbotron .kb-search-icon { top: 11px; left: 12px; color: var(--pb-70); line-height: 20px; }
html.pb.pb-in body.customers .kb-search-jumbotron .btn { height: 42px; border-radius: 0 8px 8px 0; background: var(--pb-green) !important; border-color: var(--pb-green) !important; color: #fff !important; font-weight: 600; padding: 0 18px; }
html.pb.pb-in body.customers .panel_s ul[role="list"] { margin: 0; }
html.pb.pb-in body.customers .panel_s ul[role="list"] > li { padding: 14px 0 !important; border-color: var(--pb-line-soft) !important; }
html.pb.pb-in body.customers .panel_s ul[role="list"] h3 { font-size: 15px; font-weight: 600; }
html.pb.pb-in body.customers .panel_s ul[role="list"] h3 a { color: var(--pb-link) !important; text-decoration: none; }
html.pb.pb-in body.customers .panel_s ul[role="list"] .badge { background: var(--pb-05); color: var(--pb-90); border-radius: 14px; font-size: 11px; font-weight: 600; padding: 3px 7px; }
html.pb.pb-in body.customers .panel_s ul[role="list"] p { color: var(--pb-90); font-size: 14px; }
html.pb.pb-in body.customers .kb-related-heading { color: #fff !important; font-size: 16px; font-weight: 600; margin: 0 0 10px !important; text-shadow: none; }
html.pb.pb-in body.customers ul.articles_list { background: #fff; border-radius: 12px; box-shadow: var(--pb-shadow-card); padding: 6px 18px; list-style: none; margin: 0; }
html.pb.pb-in body.customers ul.articles_list a { color: var(--pb-link); }
html.pb.pb-in body.customers .kb-article-single-heading { font-size: 25px !important; font-weight: 600 !important; color: var(--pb-ink) !important; }
/* files: the dropzone as a light dashed tile */
html.pb.pb-in body.customers form.dropzone { border: 1px dashed #c6cdd3; border-radius: 10px; background: var(--pb-02); min-height: 120px; margin: 20px 20px 0; }
html.pb.pb-in body.customers form.dropzone .dz-message { color: var(--pb-90); font-size: 15px; }
html.pb.pb-in body.customers .panel_s > .panel-body:has(> form.dropzone) { padding: 0 !important; }
html.pb.pb-in body.customers .panel_s > .panel-body:has(> form.dropzone) > .tw-mt-4 { padding: 12px 20px 0; margin: 0 !important; }
html.pb.pb-in body.customers .panel_s > .panel-body:has(> form.dropzone) > p { padding: 20px; margin: 0; }
html.pb.pb-in body.customers .panel_s > .panel-body:has(> form.dropzone) > .dataTables_wrapper, html.pb.pb-in body.customers .panel_s > .panel-body:has(> form.dropzone) > table { margin-top: 12px; }
/* calendar (FullCalendar 5) inside the card, Bitrix numbers */
html.pb.pb-in body.customers #calendar { padding: 16px 20px 20px; --fc-border-color: #e8e9eb; --fc-today-bg-color: rgba(0,117,255,.05); --fc-page-bg-color: #fff; --fc-neutral-bg-color: #f8fafb; }
html.pb.pb-in body.customers #calendar .fc-toolbar-title { font-size: 18px; font-weight: 600; color: var(--pb-ink); }
html.pb.pb-in body.customers #calendar .fc-button { height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--pb-line); background: #fff; color: var(--pb-90); font-size: 13px; text-transform: none; box-shadow: none; }
html.pb.pb-in body.customers #calendar .fc-button-primary:not(:disabled).fc-button-active, html.pb.pb-in body.customers #calendar .fc-button-primary:not(:disabled):active { background: var(--pb-primary); border-color: var(--pb-primary); color: #fff; }
html.pb.pb-in body.customers #calendar .fc-col-header-cell { height: 25px; background: transparent; }
html.pb.pb-in body.customers #calendar .fc-col-header-cell-cushion { font-size: 15px; font-weight: 300; color: var(--pb-90); text-transform: none; text-decoration: none; padding: 2px 4px; }
html.pb.pb-in body.customers #calendar .fc-daygrid-day-frame { min-height: 110px; }
html.pb.pb-in body.customers #calendar .fc-daygrid-day-number { font-size: 15px; font-weight: 400; color: #474747; text-decoration: none; padding: 6px 8px; }
html.pb.pb-in body.customers #calendar .fc-day-today .fc-daygrid-day-number { background: var(--pb-primary); color: #fff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 4px; }
html.pb.pb-in body.customers #calendar .fc-event { border-radius: 4px; font-size: 12px; font-weight: 600; }
/* statement */
html.pb.pb-in body.customers .section-statement .customer-statement-heading { display: none; }
html.pb.pb-in body.customers .section-statement > div { background: #fff; border-radius: 12px; padding: 20px; color: var(--pb-ink); box-shadow: var(--pb-shadow-card); }
html.pb.pb-in body.customers .section-statement .row { margin: 0; }
/* contracts chart above the list, on a card */
html.pb.pb-in body.customers .section-heading-contracts, html.pb.pb-in body.customers .contracts-summary-heading { display: none; }
html.pb.pb-in body.customers .relative:has(> #contracts-by-type-chart) { background: #fff; border-radius: 12px; padding: 16px; margin: 0 0 22px !important; box-shadow: var(--pb-shadow-card); }
/* profile: image thumb, last password change */
html.pb.pb-in body.customers .client-profile-image-thumb { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
html.pb.pb-in body.customers .last-password-change { font-size: 12px; color: var(--pb-70); position: static; box-shadow: none; }
html.pb.pb-in body.customers .section-profile .col-md-8, html.pb.pb-in body.customers .section-profile .col-md-4 { padding: 0 !important; }
@media (min-width: 992px) { html.pb.pb-in body.customers .section-profile .col-md-8 { width: 58%; padding-right: 18px !important; } html.pb.pb-in body.customers .section-profile .col-md-4 { width: 42%; } }
/* subscriptions row: name bold, the note under it */
html.pb.pb-in body.customers .table-subscriptions td b { font-weight: 600; }
html.pb.pb-in body.customers .table-subscriptions small.text-info { color: var(--pb-70); }

/* ---------- 11. public pages: login, register, forgot, KB ----------------- */
/* one header for every public page: brand left, links + a green Sign in right */
html.pb.pb-pub body.customers #pb-head { left: 0; padding: 0 4vw; }
html.pb.pb-pub body.customers #pb-head .pb-brand {
  display: block; width: 176px; height: 46px; background: url("/uploads/company/login-brand.png?v=2") left center / contain no-repeat; text-decoration: none;
}
html.pb.pb-pub body.customers #pb-head .pb-pub-links { margin-left: auto; display: flex; align-items: center; gap: 24px; font-size: 15px; font-weight: 600; }
html.pb.pb-pub body.customers #pb-head .pb-pub-links a { color: #fff !important; text-decoration: none !important; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
html.pb.pb-pub body.customers #pb-head .pb-pub-links a.pb-primary { height: 40px; padding: 0 18px; border-radius: 8px; background: #1a8a5a; color: #fff !important; display: inline-flex; align-items: center; text-shadow: none; }
html.pb.pb-pub body.customers #pb-head .pb-pub-links a.pb-primary:hover { background: #15724a; }
html.pb.pb-pub body.customers #wrapper { padding-top: var(--pb-head); margin-left: 0 !important; }
/* the sign-in page: its own hero markup is kept for the photograph; the card takes the reference geometry:
   424 wide, radius 20, padding 44, rgba(255,255,255,.96), title 24/400, inputs 42/8, CTA 48 green */
html.pb.pb-pub body.customers_login .sp-hero-nav { display: none; }
html.pb.pb-pub body.customers_login .sp-hero-grid {
  grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; min-height: calc(100vh - var(--pb-head)); align-items: center; justify-items: center; position: relative;
}
html.pb.pb-pub body.customers_login .sp-hero-copy { position: absolute; left: 17.9%; right: calc(50% + 244px); top: 50%; transform: translateY(-70%); max-width: none; }
html.pb.pb-pub body.customers_login .sp-hero-copy h1 { font-size: 26px; font-weight: 500; line-height: 1.25; max-width: none; margin: 0 0 12px; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
html.pb.pb-pub body.customers_login .sp-hero-copy .sp-lede { font-size: 15px; font-weight: 400; max-width: 34ch; opacity: .85; margin: 0 0 16px; }
html.pb.pb-pub body.customers_login .sp-signin-row { flex-direction: column; align-items: center; gap: 18px; justify-content: center; }
html.pb.pb-pub body.customers_login .sp-signin-main { width: 424px; max-width: calc(100vw - 32px); }
html.pb.pb-pub body.customers_login .sp-signin-title { font-size: 24px; font-weight: 400; color: #151515; margin: 0 0 22px; text-shadow: none; }
html.pb.pb-pub body.customers_login .sp-signin-card {
  background: rgba(255,255,255,.96); border-radius: 20px; padding: 44px; box-shadow: 0 12px 24px rgba(0,0,0,.07);
}
html.pb.pb-pub body.customers_login .sp-signin-inner { border: 0; padding: 0; }
/* the white title moves inside the card by order: card first, title inside (JS moves it); fallback keeps it white */
html.pb.pb-pub body.customers_login .sp-signin-card .sp-signin-title { color: #151515; }
html.pb.pb-pub body.customers_login .sp-signin-main > .sp-signin-title { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
html.pb.pb-pub body.customers_login .login-form label { font-size: 12px; font-weight: 400; color: #828b95; margin: 0 0 6px; }
html.pb.pb-pub body.customers_login .login-form .form-control {
  height: 42px; min-height: 42px; border-radius: 8px; border: 1px solid #d5d7db; font-size: 16px; padding: 0 12px; margin-bottom: 14px; box-shadow: none; background: #fff; color: #151515;
}
html.pb.pb-pub body.customers_login .login-form .form-control:focus { border-color: #0075ff; box-shadow: 0 0 0 3px rgba(0,117,255,.12); }
html.pb.pb-pub body.customers_login .login-form .bootstrap-select > .dropdown-toggle { height: 42px; border-radius: 8px; border: 1px solid #d5d7db; background: #fff; box-shadow: none; }
html.pb.pb-pub body.customers_login .login-form .btn-primary, html.pb.pb-pub body.customers_login .login-form .btn {
  height: 48px; min-height: 48px; border-radius: 8px; font-size: 16px; font-weight: 600; margin-bottom: 10px; border: 1.5px solid transparent;
}
html.pb.pb-pub body.customers_login .login-form .btn-primary { background: #1bce7b !important; border-color: #1bce7b !important; color: #fff !important; }
html.pb.pb-pub body.customers_login .login-form .btn-primary:hover { background: #17b86d !important; border-color: #17b86d !important; }
html.pb.pb-pub body.customers_login .login-form .btn-success { background: #fff !important; color: #333 !important; border-color: #d5d7db !important; }
html.pb.pb-pub body.customers_login .login-form .checkbox { margin: 0 0 16px; }
html.pb.pb-pub body.customers_login .login-form .checkbox label { font-size: 14px; font-weight: 400; color: #333; }
html.pb.pb-pub body.customers_login .sp-signin-inner a.sp-quiet { color: #0154c8; font-weight: 400; font-size: 14px; }
html.pb.pb-pub body.customers_login .sp-cross-login-wrap { margin-top: 18px; }
html.pb.pb-pub body.customers_login .sp-cross-login { color: #525c69; font-weight: 600; font-size: 13px; }
html.pb.pb-pub body.customers_login .sp-qr {
  flex: 0 0 auto; width: auto; margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(0,0,0,.35);
  display: flex; align-items: center; gap: 12px; box-shadow: none;
}
html.pb.pb-pub body.customers_login .sp-qr img { width: 56px; height: 56px; margin: 0; }
html.pb.pb-pub body.customers_login .sp-qr span { font-weight: 500; text-align: left; }
html.pb.pb-pub body.customers_login footer.footer { text-align: center; }
/* register: the same card, wider, both columns inside */
html.pb.pb-pub body.register #content > .container { width: auto !important; max-width: none; padding: 0 16px !important; }
html.pb.pb-pub body.register #content > .container > .row { margin: 0; display: flex; flex-direction: column; align-items: center; }
html.pb.pb-pub body.register .col-md-10.row, html.pb.pb-pub body.register .col-md-10.col-md-offset-1 { width: 100%; max-width: 860px; margin: 0; padding: 0; float: none; }
html.pb.pb-pub body.register .col-md-10.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 0 18px; }
html.pb.pb-pub body.register .col-md-10.row > .col-md-6, html.pb.pb-pub body.register .col-md-10.row > .col-md-3 { width: auto; padding: 0; margin: 0; float: none; }
html.pb.pb-pub body.register h1.register-heading { text-align: left !important; font-size: 24px; font-weight: 400; color: #fff; margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
html.pb.pb-pub body.register .col-md-3 .form-group { margin: 0; }
html.pb.pb-pub body.register .col-md-3 .bootstrap-select > .dropdown-toggle { height: 36px; border-radius: 8px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.2); color: #fff; box-shadow: none; }
html.pb.pb-pub body.register #content .panel_s { background: rgba(255,255,255,.96) !important; border-radius: 20px !important; box-shadow: 0 12px 24px rgba(0,0,0,.07) !important; border: 0; overflow: hidden; }
html.pb.pb-pub body.register #content .panel_s > .panel-body { padding: 44px 44px 24px; }
html.pb.pb-pub body.register .panel_s h4 { font-size: 18px; font-weight: 400; color: #333; margin: 0 0 12px; }
html.pb.pb-pub body.register .panel_s label { font-size: 12px; font-weight: 400; color: #828b95; margin: 0 0 6px; display: block; }
html.pb.pb-pub body.register .panel_s .form-control, html.pb.pb-pub body.register .panel_s .bootstrap-select > .dropdown-toggle {
  height: 42px; border-radius: 8px; border: 1px solid #d5d7db; font-size: 15px; padding: 0 12px; box-shadow: none; background: #fff; color: #151515; line-height: 40px;
}
html.pb.pb-pub body.register .panel_s .form-control:focus { border-color: #0075ff; box-shadow: 0 0 0 3px rgba(0,117,255,.12); }
html.pb.pb-pub body.register .panel_s .form-group { margin-bottom: 16px; }
html.pb.pb-pub body.register #content .panel_s > .panel-footer { background: transparent; border: 0; border-top: 1px solid #edeef0; padding: 20px 44px 28px; }
html.pb.pb-pub body.register #content .panel_s .btn-primary { height: 48px; padding: 0 28px; border-radius: 8px; font-size: 16px; font-weight: 600; background: #1bce7b !important; border-color: #1bce7b !important; color: #fff !important; display: inline-flex; align-items: center; }
html.pb.pb-pub body.register #content .panel_s .btn-primary:hover { background: #17b86d !important; border-color: #17b86d !important; }
html.pb.pb-pub body.register .register-terms-and-conditions-wrapper label { display: inline; font-size: 14px; color: #333; }
/* forgot / reset / any other single-card public page */
html.pb.pb-pub body.customers .mtop40 { margin-top: 0; display: flex; flex-direction: column; align-items: center; min-height: calc(100vh - var(--pb-head) - 80px); justify-content: center; }
html.pb.pb-pub body.customers .mtop40 > .col-md-4 { width: 424px; max-width: calc(100vw - 32px); float: none; margin: 0; padding: 0; }
html.pb.pb-pub body.customers .forgot-password-heading h1 { font-size: 24px; font-weight: 400; color: #fff; margin: 0 0 22px; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
html.pb.pb-pub body.customers #content .mtop40 .panel_s { background: rgba(255,255,255,.96) !important; border-radius: 20px !important; box-shadow: 0 12px 24px rgba(0,0,0,.07) !important; border: 0; }
html.pb.pb-pub body.customers #content .mtop40 .panel_s > .panel-body { padding: 44px !important; }
html.pb.pb-pub body.customers #content .mtop40 label { font-size: 12px; font-weight: 400; color: #828b95; margin: 0 0 6px; }
html.pb.pb-pub body.customers #content .mtop40 .form-control { height: 42px; min-height: 42px; border-radius: 8px; border: 1px solid #d5d7db; font-size: 16px; padding: 0 12px; box-shadow: none; }
html.pb.pb-pub body.customers #content .mtop40 .btn-primary { height: 48px; border-radius: 8px; font-size: 16px; font-weight: 600; background: #1bce7b !important; border-color: #1bce7b !important; color: #fff !important; display: flex; align-items: center; justify-content: center; }
html.pb.pb-pub body.customers #content .mtop40 .btn-primary:hover { background: #17b86d !important; border-color: #17b86d !important; }
html.pb.pb-pub body.customers #content .mtop40 .form-group { margin-bottom: 14px; }
/* public knowledge base: glass search band, white cards, no top gap */
html.pb.pb-pub body.customers #wrapper { flex: 1; }
html.pb.pb-pub body.customers #content > .container { width: min(1180px, 100%); padding: 0 16px; }
html.pb.pb-pub body.customers .jumbotron.kb-search-jumbotron { width: min(1148px, calc(100% - 32px)); margin: 22px auto !important; padding: 28px 24px !important; border-radius: 12px; background: rgba(255,255,255,.14) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
html.pb.pb-pub body.customers .kb-search-jumbotron .container { width: auto !important; padding: 0; }
html.pb.pb-pub body.customers .kb-search-jumbotron h2 { color: #fff; font-size: 22px; font-weight: 600; margin: 0 0 16px; }
html.pb.pb-pub body.customers .kb-search-jumbotron .input-group { display: flex; }
html.pb.pb-pub body.customers .kb-search-jumbotron .form-control { height: 44px; border-radius: 8px 0 0 8px; border: 0; background: rgba(255,255,255,.95); color: var(--pb-ink); font-size: 15px; padding-left: 40px; box-shadow: none; }
html.pb.pb-pub body.customers .kb-search-jumbotron .kb-search-icon { top: 12px; left: 12px; color: var(--pb-70); }
html.pb.pb-pub body.customers .kb-search-jumbotron .btn { height: 44px; border-radius: 0 8px 8px 0; background: #1a8a5a !important; border-color: #1a8a5a !important; color: #fff !important; font-weight: 600; padding: 0 20px; }
html.pb.pb-pub body.customers .panel_s { background: #fff !important; border-radius: 12px; box-shadow: var(--pb-shadow-card); border: 0; color: var(--pb-ink); margin-bottom: 22px; }
html.pb.pb-pub body.customers .panel_s > .panel-body { padding: 20px 24px; }
html.pb.pb-pub body.customers .panel_s ul[role="list"] > li { padding: 14px 0 !important; }
html.pb.pb-pub body.customers .panel_s ul[role="list"] h3 a { color: var(--pb-link) !important; text-decoration: none; font-weight: 600; }
html.pb.pb-pub body.customers .panel_s ul[role="list"] .badge { background: var(--pb-05); color: var(--pb-90); border-radius: 14px; font-size: 11px; font-weight: 600; }
html.pb.pb-pub body.customers .kb-related-heading { color: #fff !important; font-size: 16px; }
html.pb.pb-pub body.customers ul.articles_list { border-radius: 12px; box-shadow: var(--pb-shadow-card); }
html.pb.pb-pub body.customers .kb-article-single-heading { font-size: 25px !important; font-weight: 600 !important; }
html.pb.pb-pub body.customers #content > .container > .row > .pb-band { display: none; }

/* ---------- 12. document pages opened directly (no navigation) ------------ */
html.pb:not(.ws-in-panel) body.customers:not(:has(nav.navbar.header)) #content > .container { width: min(1080px, 100%); margin: 0 auto !important; padding: 16px 16px 0 !important; }
html.pb body.customers:not(:has(nav.navbar.header)) .preview-top-wrapper { background: #fff; border-radius: 12px; padding: 16px 20px; margin: 0 0 16px; box-shadow: var(--pb-shadow-card); color: var(--pb-ink); }
html.pb body.customers:not(:has(nav.navbar.header)) .preview-top-wrapper .preview-sticky-container { width: auto; }
html.pb body.customers:not(:has(nav.navbar.header)) .preview-top-wrapper h3, html.pb body.customers:not(:has(nav.navbar.header)) .preview-top-wrapper h4 { color: var(--pb-ink); }
html.pb body.customers:not(:has(nav.navbar.header)) .panel_s { background: #fff; border-radius: 12px; box-shadow: var(--pb-shadow-card); border: 0; color: var(--pb-ink); }
html.pb body.customers:not(:has(nav.navbar.header)) .preview-top-wrapper .btn { height: 34px; border-radius: 10px; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
html.pb body.customers:not(:has(nav.navbar.header)) .preview-top-wrapper .btn-default { background: #fff; border: 1px solid #edeef0; color: var(--pb-90); }
html.pb body.customers:not(:has(nav.navbar.header)) .preview-top-wrapper .btn-success { background: var(--pb-green); border-color: var(--pb-green); color: #fff; }
html.pb body.customers:not(:has(nav.navbar.header)) .preview-sticky-header { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
html.pb body.customers:not(:has(nav.navbar.header)) footer.footer { margin-left: 0; }

/* ---------- 13. responsive ------------------------------------------------- */
@media (max-width: 1024px) and (min-width: 768px) {
  /* tablets: the sidebar is the 66px rail */
  html.pb.pb-in { --pb-side: 66px; }
  #pb-side { padding: 0 8px 12px; }
  .pb-side-head .pb-logo { width: 46px; background-image: url("/uploads/company/favicon.png"); background-position: center; }
  .pb-item > a { justify-content: center; padding: 6px 0; }
  .pb-txt, .pb-cnt, .pb-me > span { display: none; }
  .pb-me { justify-content: center; padding: 0; }
}
@media (max-width: 767px) {
  html.pb { --pb-side: 0px; --pb-gut: 12px; }
  html.pb.pb-in body.customers #wrapper { margin-left: 0 !important; }
  html.pb.pb-in body.customers footer.footer { margin-left: 0; }
  #pb-side {
    width: 240px; max-width: 84vw; padding: 0 14px 12px; z-index: 1100;
    background: linear-gradient(160deg, #0b2545 0%, #13315c 55%, #0e4f5c 100%);
    transform: translateX(-100%); transition: transform .26s cubic-bezier(.2,.7,.3,1); box-shadow: none;
  }
  html.pb.pb-drawer #pb-side { transform: none; box-shadow: 0 0 60px rgba(4,12,28,.45); }
  .pb-side-head .pb-x { display: inline-flex; }
  .pb-drawer-scrim { position: fixed; inset: 0; z-index: 1099; background: rgba(8,16,30,.45); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  html.pb.pb-drawer .pb-drawer-scrim { opacity: 1; pointer-events: auto; }
  html.pb.pb-drawer body.customers { overflow: hidden; }
  #pb-head { left: 0; padding: 0 12px 0 8px; gap: 6px; }
  .pb-burger { display: inline-flex; }
  .pb-sections { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: 1 1 auto; }
  .pb-sections::-webkit-scrollbar { display: none; }
  .pb-sec { padding: 0 8px; font-size: 14px; }
  .pb-wordmark, .pb-hbtn { display: none; }
  .pb-search input { width: 34px; height: 34px; padding-left: 34px; }
  .pb-search input:focus, .pb-search.pb-open input { width: min(260px, 60vw); }
  .pb-pill { padding: 0; width: 29px; height: 29px; border: 0; background: transparent; }
  .pb-pill > span { display: none; }
  .pb-pill img, .pb-pill .pb-avatar-fallback { position: static; margin: 0; }
  .pb-user { margin-right: 0; }
  .pb-menu { right: -6px; min-width: 230px; }
  .pb-band { padding-top: 14px; }
  .pb-title { font-size: 20px; line-height: 28px; white-space: normal; }
  .pb-toolbar { gap: 8px; }
  .pb-actions { width: 100%; }
  .pb-band .pb-filter, .pb-band .pb-filter .input-group, html.pb.pb-in body.customers #content .pb-band .pb-filter .input-group { width: 100%; }
  html.pb.pb-in body.customers #content .pb-band .pb-filter input.form-control, html.pb.pb-in body.customers #content .pb-band .pb-filter input.form-control:focus { width: 100% !important; }
  .pb-navrow { margin-top: 12px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-bottom: 2px; }
  .pb-navrow::-webkit-scrollbar { display: none; }
  .pb-counters, .pb-utils { flex: 0 0 auto; }
  html.pb.pb-in body.customers table.table > tbody > tr > td { height: 56px; padding: 10px 12px; }
  html.pb.pb-in body.customers table.table > thead > tr > th { padding: 0 12px; }
  html.pb.pb-in body.customers .pb-foot { padding: 8px 12px; gap: 12px; }
  html.pb.pb-in body.customers .pb-foot .pb-foot-r { width: 100%; margin-left: 0 !important; justify-content: space-between; }
  html.pb.pb-in body.customers #content .panel_s > .panel-body { padding: 14px; }
  html.pb.pb-in body.customers .pb-feed { grid-template-columns: minmax(0, 1fr); }
  html.pb.pb-in body.customers .jumbotron.kb-search-jumbotron { margin: 0 12px 16px !important; padding: 18px 14px !important; }
  html.pb.pb-in body.customers .horizontal-scrollable-tabs { margin: 0 -14px; }
  html.pb.pb-in body.customers .pb-tiles { padding: 12px 14px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-panel { top: 0; left: 0 !important; border-radius: 0; }
  .pb-panel iframe, .pb-panel-load { border-radius: 0; }
  .pb-panel-edge { left: auto; right: 8px; top: 8px; flex-direction: row; gap: 8px; }
  .pb-edge-btn, .pb-edge-btn.pb-edge-sm { width: 36px; height: 36px; border-radius: 50%; }
  html.ws-in-panel body.customers #content > .container { padding: 52px 12px 0 !important; }
  /* public pages */
  html.pb.pb-pub body.customers #pb-head { padding: 0 12px; }
  html.pb.pb-pub body.customers #pb-head .pb-pub-links { gap: 14px; font-size: 14px; }
  html.pb.pb-pub body.customers #pb-head .pb-pub-links a:not(.pb-primary) { display: none; }
  html.pb.pb-pub body.customers_login .sp-hero-copy { position: static; transform: none; max-width: none; text-align: center; padding: 16px 12px 0; }
  html.pb.pb-pub body.customers_login .sp-hero-copy h1 { font-size: 22px; }
  html.pb.pb-pub body.customers_login .sp-hero-copy .sp-lede { display: none; }
  html.pb.pb-pub body.customers_login .sp-hero-grid { padding: 0 0 24px; }
  html.pb.pb-pub body.customers_login .sp-signin-card { padding: 28px 22px; }
  html.pb.pb-pub body.customers_login .sp-qr { display: none; }
  html.pb.pb-pub body.register .panel_s > .panel-body { padding: 24px 18px 8px; }
  html.pb.pb-pub body.register .panel_s > .panel-footer { padding: 16px 18px 22px; }
  html.pb.pb-pub body.register .col-md-10.row { flex-direction: column; align-items: flex-start; padding: 18px 0 12px; }
  html.pb.pb-pub body.customers .mtop40 .panel_s > .panel-body { padding: 28px 22px; }
}
@media (min-width: 1200px) and (max-width: 1400px) { html.pb.pb-pub body.customers_login .sp-hero-copy { left: 6%; max-width: 30vw; } }
@media (max-width: 1199px) and (min-width: 768px) {
  html.pb.pb-pub body.customers_login .sp-hero-copy { position: static; transform: none; max-width: 520px; text-align: center; margin-bottom: 8px; padding-top: 18px; }
  html.pb.pb-pub body.customers_login .sp-hero-grid { align-content: center; }
}
@media (prefers-reduced-motion: reduce) { #pb-side, .pb-drawer-scrim, .pb-search input, #pb-head { transition: none !important; } }
@media print { #pb-side, #pb-head, .pb-band, .pb-panel, .pb-scrim, footer.footer { display: none !important; } html.pb.pb-in body.customers #wrapper { margin: 0 !important; padding: 0 !important; } }

/* ---------- PORTAL MOBILE QA (2026-09-26) -----------------------------------
   Measured live at 390 / 820 in same-origin probe iframes on the public pages
   (login, register, forgot, knowledge base); the signed-in pages share the
   same rules and were reviewed structurally. */
/* the KB search button spilled 80px past its field (25px of page scroll at
   390, 35px at 820): sections 10/11 make the input-group a flex row and
   Bootstrap's table-cell .input-group-btn collapsed to 3px */
html.pb body.customers .kb-search-jumbotron .input-group { display: flex; }
html.pb body.customers .kb-search-jumbotron .input-group > .form-control { flex: 1 1 auto; min-width: 0; width: auto; }
html.pb body.customers .kb-search-jumbotron .input-group-btn { flex: 0 0 auto; width: auto; display: flex; }
/* footer row: Bootstrap's -15px gutters inside the 12px container = 3px of
   horizontal scroll on every public page at 390 */
html.pb body.customers footer.footer .row { margin-left: 0; margin-right: 0; }
@media (max-width: 767px) {
  /* 16px gutters on register and the knowledge base (were 31px: #content 15 + container 16) */
  html.pb.pb-pub body.register #content,
  html.pb.pb-pub body.customers:has(.kb-search-jumbotron) #content { padding-left: 0; padding-right: 0; }
  html.pb.pb-pub body.customers .jumbotron.kb-search-jumbotron { width: auto; margin: 16px !important; }
  /* thumb targets: 40px for the header controls, the slider's edge buttons and pagination */
  .pb-burger { width: 40px; height: 40px; }
  .pb-side-head .pb-x { width: 40px; height: 40px; }
  .pb-search input { width: 40px; height: 40px; padding-left: 40px; }
  .pb-search svg { left: 12px; }
  .pb-bell { width: 40px; height: 40px; }
  .pb-pill { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .pb-edge-btn, .pb-edge-btn.pb-edge-sm { width: 40px; height: 40px; }
  html.pb.pb-in body.customers .pb-foot .pagination > li > a,
  html.pb.pb-in body.customers .pb-foot .pagination > li > span { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }
  html.pb.pb-in body.customers .pb-foot select { height: 36px; }
}


/* ---------- 15. Frosted glass, Bitrix24-style (2026-10-03) --------------------
   The sidebar and header were fully transparent, so on a busy wallpaper the menu, the counter
   chips and the utility buttons were hard to see. They now sit on dark frosted glass (tint + blur),
   the way the Bitrix24 shell does. The phone drawer (max-width 767px) keeps its solid gradient. */
@media (min-width: 768px) {
  #pb-side {
    background: linear-gradient(180deg, rgba(8,16,36,.50), rgba(8,16,36,.38)) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.35); backdrop-filter: blur(22px) saturate(1.35);
    box-shadow: inset -1px 0 0 rgba(255,255,255,.10);
  }
}
#pb-head {
  background: rgba(8,16,36,.24);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.07);
}
html.pb.pb-scrolled #pb-head { background-image: none; background-color: rgba(8,16,36,.50); }
/* public pages (login, knowledge base when signed out) keep their clear header over the hero */
html.pb.pb-pub body.customers #pb-head { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }

/* menu rows: softer hover, a defined active pill */
.pb-item > a:hover { background: rgba(255,255,255,.12); }
.pb-item.pb-on { background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }

/* counter chips (All / Unpaid / Paid ...): one frosted panel, readable even at zero */
.pb-counters {
  height: 30px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
.pb-chip { height: 30px; color: #fff !important; border-right-color: rgba(255,255,255,.18) !important; }
.pb-chip.pb-zero { opacity: 1; color: rgba(255,255,255,.88) !important; }
.pb-chip.pb-zero b { color: rgba(255,255,255,.7); }
.pb-chip.pb-on { background: rgba(255,255,255,.34); }

/* utility buttons on the band (View account statement, print, export ...) */
html.pb.pb-in body.customers #content .pb-band .pb-util,
html.pb.pb-in body.customers #content .pb-band .pb-utils .btn,
html.pb.pb-in body.customers #content .pb-band .pb-utils a {
  background: rgba(255,255,255,.18) !important; border: 1px solid rgba(255,255,255,.34) !important; color: #fff !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html.pb.pb-in body.customers #content .pb-band .pb-util:hover,
html.pb.pb-in body.customers #content .pb-band .pb-utils a:hover,
html.pb.pb-in body.customers #content .pb-band .pb-utils .btn:hover { background: rgba(255,255,255,.30) !important; }

/* the list search on the band: same glass, with an edge */
.pb-band .pb-filter input, html.pb.pb-in body.customers #content .pb-band .pb-filter input.form-control {
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: rgba(255,255,255,.26) !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 768px) { #pb-side { background: rgba(8,16,36,.78) !important; } }
  #pb-head { background: rgba(8,16,36,.6); }
}


/* ---------- 16. Portal background of its own (2026-10-03) ---------------------
   Setup > Theme Style > Workspace theme > Customer portal background. A preset or a picture arrives
   through data-wallpaper / --app-backdrop exactly as before; a VIDEO is a fixed <video.pb-bg-video>
   behind everything (html.pb-video), with a dark tint over it so the frosted menu and the page
   titles stay readable. */
.pb-bg-video {
  position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: cover;
  z-index: -2; pointer-events: none; background: #0b2545;
}
html.pb.pb-video, html.pb.pb-video body.customers { background: transparent !important; background-image: none !important; }
html.pb.pb-video { background-color: #0b2545 !important; }
html.pb.pb-video body.customers::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(8,14,32,.42), rgba(8,14,32,.58));
}
/* the scrolled header and the knowledge-base band paint the wallpaper image; over a video they go glass */
html.pb.pb-video.pb-scrolled #pb-head { background-image: none !important; background-color: rgba(8,16,36,.55) !important; }
html.ws-in-panel .pb-bg-video { display: none !important; }
@media (prefers-reduced-motion: reduce) { .pb-bg-video { display: none !important; } }
/* an uploaded PICTURE gets the same tint (the presets are already dark) */
html.pb.pb-in.ws-photo:not(.pb-video) body.customers {
  background-image: linear-gradient(rgba(8,14,32,.42), rgba(8,14,32,.58)), var(--app-backdrop) !important;
}


/* ---------- 17. Portal fixes (2026-10-03) --------------------------------------
   The dashboard invoices chart with nothing to draw: a short note instead of an empty -1..1 grid. */
.pb-chart-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 220px; padding: 28px 16px; text-align: center; border: 1px dashed #d7dde6; border-radius: 12px;
  background: #fafbfc; color: #64748b; font-size: 14px;
}
.pb-chart-empty strong { color: #1f2937; font-size: 16px; font-weight: 600; }