/* PALBON: the portal skin - every page drawn by the framework's website layout (templates/web.html +
website.bundle.css): /me, the portal lists and documents, web forms, message / error pages, the
PALBONShop storefront. Same look as the public website, the login page and Desk: midnight navy, royal
blue, burnished gold; no green or teal anywhere ("done" is gold). Presentation only - no field, id,
route or feature is changed or hidden.
Loaded through `web_include_css` in frappe/hooks.py, after website.bundle.css and palbon_site.css and
BEFORE the palbon-core-web / webshop-web bundles; served as-is, no build step (bump the ?v= in hooks.py
after an edit, then clear-cache). Behaviour: public/js/palbon_portal.js.
The header and the footer are NOT drawn here: they are the public website's own includes
(templates/palbon_site/header.html, footer.html) and stylesheet, put on every framework page by
templates/base.html; layer 2 only holds what differs on a framework page.
The colour theme is data-pb-theme on , rendered by the server (frappe/palbon_site/theme.py: the user's
palbon_theme field, else the palbon_theme_preference cookie, else Classic). The mode (light / dark) is set before
the first paint by the inline script in templates/includes/head.html: data-theme (this file, the bundle) and
data-ps-theme (the header), always the same value; the shared picker (palbon_theme.js) changes both.
Scope: every rule sits under body:not([data-path="login"],[data-path="apps"]) - the login page and
the product launcher have their own stylesheets and must not change - except layer 2 (the header and footer
chrome), which also serves /login and is scoped body:not([data-path="apps"]). Because the scope is and
not :root, layer 1 re-declares the derived variables too (a variable declared on :root is resolved
there, with :root's colour scales). Two rules cannot carry that scope and are safe without it:
html[data-theme] (the attribute is never set on those two pages) and the "done" tick symbol (its
colour is a variable that only exists inside the scope). :has() is used as an enhancement only.
Layer 1 tokens · Layer 2 chrome (shared header / footer adjustments, side menu) · Layer 3 components. */
/* ================= Layer 1 - tokens ================= */
/* the raw colour scales of the website bundle, as Classic draws them (green and teal remapped: "done" is gold).
They are palette definitions: the other themes re-hue them (palbon_themes_web.css, generated). */
body:not([data-path="login"],[data-path="apps"]){
--blue-50:#EFF6FF;--blue-100:#DBEAFE;--blue-200:#BFDBFE;--blue-300:#93C5FD;--blue-400:#60A5FA;--blue-500:#3B82F6;--blue-600:#2563EB;--blue-700:#1D4ED8;--blue-800:#1E40AF;--blue-900:#1E3A8A;--green-50:#FDFAEB;--green-100:#FBF5DD;--green-200:#F7E9B5;--green-300:#F3DC8C;--green-400:#E8C252;--green-500:#D4AF37;--green-600:#B59410;--green-700:#8A6F0A;--green-800:#6B5608;--green-900:#332A04;--dark-green-50:#FBF5DD;--teal-50:#F0F9FF;--teal-100:#E0F2FE;--teal-200:#BAE6FD;--teal-300:#7DD3FC;--teal-400:#38BDF8;--teal-500:#0EA5E9;--teal-600:#0284C7;--teal-700:#0369A1;--teal-800:#075985;--teal-900:#0C4A6E;--cyan-50:#F0F9FF;--cyan-100:#E0F2FE;--cyan-200:#BAE6FD;--cyan-300:#7DD3FC;--cyan-400:#38BDF8;--cyan-500:#0EA5E9;--cyan-600:#0284C7;--cyan-700:#0369A1;--cyan-800:#075985;--cyan-900:#0C4A6E;--red-50:#FEF2F2;--red-100:#FEE2E2;--red-200:#FECACA;--red-300:#FCA5A5;--red-400:#F87171;--red-500:#EF4444;--red-600:#DC2626;--red-700:#B91C1C;--red-800:#991B1B;--red-900:#7F1D1D;--violet-400:#bdb1f0;--violet-500:#6846e3;--violet-600:#5f46c7;
/* shape, type and density: comfortable, never compact */
--border-radius-tiny:var(--pb-radius-sm);--border-radius-sm:var(--pb-radius-md);--border-radius:var(--pb-radius-md);--border-radius-md:12px;--border-radius-lg:var(--pb-radius-lg);--border-radius-xl:18px;--card-border-radius:var(--pb-radius-lg);--font-stack:var(--pb-font-sans);--text-base:var(--pb-text-base);--weight-regular:var(--pb-weight-body);--weight-medium:var(--pb-weight-medium);--weight-semibold:var(--pb-weight-strong);--navbar-height:72px;--input-height:44px;--input-padding:10px 14px;--disabled-input-padding:10px 14px;--btn-height:36px;--checkbox-size:16px;
}
body:not([data-path="login"],[data-path="apps"]){
--gray-50:#F8FAFC;--gray-100:#F1F5F9;--gray-200:#E2E8F0;--gray-300:#CBD5E1;--gray-400:#94A3B8;--gray-500:#64748B;--gray-600:#475569;--gray-700:#334155;--gray-800:#1E293B;--gray-900:#0F172A;
}
/* dark: the gray scale runs the other way (the website bundle reads --gray-900 as "strongest text") */
[data-theme="dark"] body:not([data-path="login"],[data-path="apps"]){
--gray-50:#0A1029;--gray-100:#111A3C;--gray-200:#1A2654;--gray-300:#26346A;--gray-400:#44527F;--gray-500:#7F8CAB;--gray-600:#A3B0CC;--gray-700:#C3CDE6;--gray-800:#DCE3F5;--gray-900:#EEF2FF;--dark-green-50:rgba(232,194,82,.16);
}
/* every other colour of the portal, onto the theme palette (palbon_palette.css): one mapping for all four themes in
both modes. Re-declared on so the names resolve inside the portal's scope. */
body:not([data-path="login"],[data-path="apps"]){
--pp-royal:var(--pb-accent-vivid);--pp-indigo:var(--pb-accent-vivid);--pp-violet:var(--pb-glow-2);--pp-sky:var(--pb-accent-secondary);--pp-gold:var(--pb-gold);--pp-gold-deep:var(--pb-gold-deep);--pp-gold-soft:var(--pb-gold-soft);--pp-grad:var(--pb-grad-primary);--pp-grad-hover:var(--pb-grad-primary-hover);--pp-grad-gold:var(--pb-grad-gold);--pp-line-gold:linear-gradient(90deg,var(--pb-gold-deep),var(--pb-gold-soft));--pp-done-fill:var(--pb-gold);--primary:var(--pb-text-link);--secondary:var(--pb-text-soft);--success:var(--pb-status-ok-text);--info:var(--pb-status-info-text);--warning:var(--pb-status-warn-text);--danger:var(--pb-text-danger);--brand-color:var(--pb-accent-vivid);--primary-color:var(--pb-accent-vivid);--border-primary:var(--pb-accent-vivid);--btn-primary:var(--pb-accent-solid);--primary-light:var(--pb-bg-tint);--light:var(--pb-bg-raised);--dark:var(--pb-text-primary);--bg-blue:var(--pb-status-info-bg);--bg-light-blue:var(--pb-status-info-bg);--bg-dark-blue:var(--pb-status-info-bg);--bg-green:var(--pb-status-ok-bg);--bg-yellow:var(--pb-status-warn-bg);--bg-orange:var(--pb-status-warn-bg);--bg-red:var(--pb-status-bad-bg);--bg-gray:var(--pb-bg-raised);--bg-grey:var(--pb-bg-raised);--bg-light-gray:var(--pb-bg-raised);--bg-dark-gray:var(--pb-border-strong);--bg-darkgrey:var(--pb-border-strong);--bg-purple:color-mix(in srgb,var(--pb-chart-3) 16%,var(--pb-bg-surface));--bg-pink:color-mix(in srgb,var(--pb-chart-5) 16%,var(--pb-bg-surface));--bg-cyan:color-mix(in srgb,var(--pb-chart-4) 16%,var(--pb-bg-surface));--text-on-blue:var(--pb-status-info-text);--text-on-light-blue:var(--pb-status-info-text);--text-on-dark-blue:var(--pb-status-info-text);--text-on-green:var(--pb-status-ok-text);--text-on-yellow:var(--pb-status-warn-text);--text-on-orange:var(--pb-status-warn-text);--text-on-red:var(--pb-status-bad-text);--text-on-gray:var(--pb-text-muted);--text-on-grey:var(--pb-text-muted);--text-on-darkgrey:var(--pb-text-primary);--text-on-dark-gray:var(--pb-text-primary);--text-on-light-gray:var(--pb-text-muted);--text-on-purple:var(--pb-text-primary);--text-on-pink:var(--pb-text-primary);--text-on-cyan:var(--pb-text-primary);--alert-text-danger:var(--pb-status-bad-text);--alert-text-warning:var(--pb-status-warn-text);--alert-text-info:var(--pb-status-info-text);--alert-text-success:var(--pb-status-ok-text);--alert-bg-danger:var(--pb-status-bad-bg);--alert-bg-warning:var(--pb-status-warn-bg);--alert-bg-info:var(--pb-status-info-bg);--alert-bg-success:var(--pb-status-ok-bg);--error-bg:var(--pb-status-bad-bg);--error-border:color-mix(in srgb,var(--pb-text-danger) 60%,transparent);--diff-added:var(--pb-status-ok-bg);--diff-removed:var(--pb-status-bad-bg);--diff-changed:var(--pb-status-info-bg);--date-active-bg:var(--pb-accent-solid);--date-active-text:var(--pb-text-on-accent);--date-range-bg:var(--pb-bg-tint);--checkbox-color:var(--pb-control-mark);--checkbox-gradient:linear-gradient(var(--pb-control-checked),var(--pb-control-checked));--checkbox-disabled-gradient:linear-gradient(180deg,var(--disabled-control-bg),var(--disabled-control-bg));--code-block-bg:var(--pb-band-bg);--code-block-text:var(--pb-band-text);--shadow-xs:var(--pb-shadow-elevation-1);--shadow-sm:var(--pb-shadow-elevation-1);--shadow-base:var(--pb-shadow-elevation-1);--shadow-md:var(--pb-shadow-elevation-2);--shadow-lg:var(--pb-shadow-elevation-2);--shadow-xl:var(--pb-shadow-elevation-2);--shadow-2xl:var(--pb-shadow-elevation-3);--card-shadow:var(--pb-shadow-elevation-1);--modal-shadow:var(--pb-shadow-elevation-3);--btn-shadow:none;--focus-default:0 0 0 3px var(--pb-focus-ring);--focus-blue:0 0 0 3px var(--pb-focus-ring);--focus-green:0 0 0 3px var(--pb-focus-ring);--avatar-frame-color:var(--pb-text-muted);--avatar-frame-bg:var(--pb-bg-raised);--avatar-frame-border:var(--pb-border-subtle);--orange-avatar-bg:var(--pb-status-warn-bg);--orange-avatar-color:var(--pb-status-warn-text);--pink-avatar-bg:color-mix(in srgb,var(--pb-chart-5) 16%,var(--pb-bg-surface));--pink-avatar-color:var(--pb-text-primary);--blue-avatar-bg:var(--pb-status-info-bg);--blue-avatar-color:var(--pb-status-info-text);--green-avatar-bg:var(--pb-status-ok-bg);--green-avatar-color:var(--pb-status-ok-text);--dark-green-avatar-bg:var(--pb-status-ok-bg);--dark-green-avatar-color:var(--pb-status-ok-text);--red-avatar-bg:var(--pb-status-bad-bg);--red-avatar-color:var(--pb-status-bad-text);--yellow-avatar-bg:var(--pb-status-warn-bg);--yellow-avatar-color:var(--pb-status-warn-text);--purple-avatar-bg:color-mix(in srgb,var(--pb-chart-3) 16%,var(--pb-bg-surface));--purple-avatar-color:var(--pb-text-primary);--gray-avatar-bg:var(--pb-bg-raised);--gray-avatar-color:var(--pb-text-muted);--green-info:var(--pp-accent);--product-bg-color:var(--card-bg);--body-bg-color:var(--bg-color);--bg-color:var(--pb-bg-main);--fg-color:var(--pb-bg-surface);--card-bg:var(--pb-bg-card);--navbar-bg:var(--pb-bg-head-glass);--modal-bg:var(--pb-bg-overlay);--popover-bg:var(--pb-bg-overlay);--toast-bg:var(--pb-bg-overlay);--subtle-accent:color-mix(in srgb,var(--pb-bg-raised) 50%,var(--pb-bg-surface));--subtle-fg:var(--pb-bg-raised);--fg-hover-color:var(--pb-bg-hover);--highlight-color:color-mix(in srgb,var(--pb-bg-raised) 50%,var(--pb-bg-surface));--yellow-highlight-color:var(--pb-bg-tint);--awesomplete-hover-bg:var(--pb-bg-tint);--sidebar-select-color:var(--pb-bg-tint);--control-bg:var(--pb-bg-control);--control-bg-on-gray:color-mix(in srgb,var(--pb-bg-control) 60%,var(--pb-border-subtle));--disabled-control-bg:var(--pb-bg-raised);--input-disabled-bg:var(--pb-bg-raised);--disabled-text-color:var(--pb-text-soft);--awesomebar-focus-bg:var(--pb-bg-surface);--placeholder-color:var(--pb-bg-raised);--btn-default-bg:var(--pb-bg-surface);--btn-default-hover-bg:var(--pb-bg-hover);--switch-bg:var(--pb-border-strong);--checkbox-focus-shadow:0 0 0 3px var(--pb-focus-ring);--border-color:var(--pb-border-subtle);--dark-border-color:var(--pb-border-strong);--table-border-color:var(--pb-border-subtle);--btn-group-border-color:var(--pb-border-strong);--shadow-inset:inset 0 -1px 0 var(--pb-border-subtle);--heading-color:var(--pb-text-primary);--text-neutral:var(--pb-text-primary);--text-color:var(--pb-text-primary);--text-muted:var(--pb-text-muted);--text-light:var(--pb-text-soft);--text-dark:var(--pb-bg-surface);--icon-stroke:var(--pb-text-muted);--icon-fill-bg:var(--pb-bg-surface);--scrollbar-thumb-color:var(--pb-border-strong);--scrollbar-track-color:transparent;--highlight-shadow:1px 1px 10px var(--pb-focus-ring),0 0 4px var(--pb-accent-vivid);--pp-accent:var(--pb-text-highlight);--pp-link:var(--pb-text-link);--pp-tint:var(--pb-bg-tint);--pp-tint-gold:color-mix(in srgb,var(--pb-accent-secondary) 14%,var(--pb-bg-surface));--pp-focus:var(--pb-focus);--pp-page-glow:var(--pb-ambient);--pp-sh-1:var(--pb-shadow-elevation-1);--pp-sh-2:var(--pb-shadow-elevation-2);--pp-sh-3:var(--pb-shadow-elevation-3);--right-arrow-svg:url("data:image/svg+xml;utf8,");--left-arrow-svg:url("data:image/svg+xml;utf8,");
}
/* the canvas: data-theme is only set on pages that wear this skin (head.html skips /login and /apps) */
html[data-theme="light"]{background-color:var(--pb-bg-main)}
html[data-theme="dark"]{background-color:var(--pb-bg-main)}
/* base: :where() keeps these at the specificity of the bundle's own element rules */
body:not([data-path="login"],[data-path="apps"]){background-color:var(--bg-color);background-image:var(--pp-page-glow);background-repeat:no-repeat;color:var(--text-color);
font-family:var(--pb-font-sans);font-size:var(--pb-text-base);font-weight:var(--pb-weight-body);letter-spacing:var(--pb-tracking);line-height:var(--pb-leading)}
:where(body:not([data-path="login"],[data-path="apps"])) :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6){color:var(--heading-color)}
:where(body:not([data-path="login"],[data-path="apps"])) a{color:var(--pp-link)}
:where(body:not([data-path="login"],[data-path="apps"])) a:hover{color:var(--primary)}
:where(body:not([data-path="login"],[data-path="apps"])) h4 a{color:inherit}
:where(body:not([data-path="login"],[data-path="apps"])) hr{border-top-color:var(--border-color)}
:where(body:not([data-path="login"],[data-path="apps"])) code{color:var(--pp-violet)}
:where([data-theme="dark"] body:not([data-path="login"],[data-path="apps"])) code{color:var(--pb-text-highlight)}
:where(body:not([data-path="login"],[data-path="apps"])) pre{color:var(--text-color);border-color:var(--border-color)}
:where(body:not([data-path="login"],[data-path="apps"])) mark{background:var(--pp-tint-gold);color:inherit}
:where(body:not([data-path="login"],[data-path="apps"])) ::selection{background:var(--pb-focus-ring)}
:where(body:not([data-path="login"],[data-path="apps"])) :target{scroll-margin-top:calc(var(--navbar-height) + 16px)}
:where(body:not([data-path="login"],[data-path="apps"])) *{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb-color) transparent}
/* ================= Layer 2 - chrome ================= */
/* Top and bottom of the page are the public website's header and footer, the same includes
(templates/palbon_site/header.html + footer.html inside the two .ps-chrome wrappers) drawn by the public
stylesheet palbon_site.css. Only what a framework page needs differently lives here:
- no dark hero under the header, so it is always in its solid state, and the wrapper keeps its room;
- the bundle's element rules (bootstrap reboot, h1-h4, p, a) outrank the public stylesheet's
zero-specificity reset: put it back, again at element specificity, so every ps- class still wins;
- message pages ask for "fullpage" with header,footer{display:none}: the owner wants the chrome everywhere. */
body:not([data-path="apps"]) .ps-chrome{flex:none;font-family:var(--font);font-size:16px;font-weight:400;line-height:1.6;letter-spacing:normal;text-align:start;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body:not([data-path="apps"]) .ps-chrome--top{height:var(--header-h,72px)}
body:not([data-path="apps"]) .ps-chrome--bottom{margin-top:auto}
body:not([data-path="apps"]) .ps-chrome :is(.ps-header,.ps-footer){display:block}
body:not([data-path="apps"]) .ps-chrome .ps-header{background:var(--header-bg);color:var(--ink);border-bottom-color:var(--line);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px)}
body:not([data-path="apps"]) .ps-chrome .ps-header .ps-brand__name b{color:var(--primary)}
/* keep palbon_site.css's phone fix: an open header must not be a containing block for the fixed slide-down panel */
@media (max-width:960px){body:not([data-path="apps"]) .ps-chrome .ps-header.is-open{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}}
:where(body:not([data-path="apps"]) .ps-chrome) :is(h1,h2,h3,h4,p,ul,ol,figure){margin:0}
:where(body:not([data-path="apps"]) .ps-chrome) :is(h1,h2,h3,h4,p){line-height:inherit;letter-spacing:inherit}
:where(body:not([data-path="apps"]) .ps-chrome) a,:where(body:not([data-path="apps"]) .ps-chrome) a:hover{color:inherit;text-decoration:none}
:where(body:not([data-path="apps"]) .ps-chrome) :is(img,svg){position:static;vertical-align:baseline}
/* what the framework's top bar carried beside its links (framework_tools.html): search, the storefront's
counters, the read-only notice, the guest language picker - inside the header's tools, upstream ids kept */
body:not([data-path="apps"]) .ps-chrome .ps-tools{display:contents}
body:not([data-path="apps"]) .ps-chrome .ps-tools>li{display:flex;align-items:center;list-style:none}
body:not([data-path="apps"]) .ps-chrome .ps-tools>li.hidden{display:none}
body:not([data-path="apps"]) .ps-chrome .ps-tools .nav-link{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border-radius:12px;color:inherit;transition:background-color .2s}
body:not([data-path="apps"]) .ps-chrome .ps-tools .nav-link:hover{background:color-mix(in srgb,var(--pb-text-soft) 16%,transparent)}
body:not([data-path="apps"]) .ps-chrome .ps-tools .nav-link .icon{width:20px;height:20px;margin:0;stroke:currentColor}
body:not([data-path="apps"]) .ps-chrome .ps-tools .nav-link .icon use{stroke:currentColor}
body:not([data-path="apps"]) .ps-chrome .ps-tools .shopping-badge{position:absolute;top:1px;right:0;left:auto;min-width:18px;text-align:center;height:18px;padding:0 5px;border-radius:9px;background:var(--pp-grad-gold);color:var(--pb-ink-on-gold);font-size:11px;font-weight:700;line-height:18px}
body:not([data-path="apps"]) .ps-chrome .ps-tools .shopping-badge:empty{display:none}
body:not([data-path="apps"]) .ps-chrome .ps-tools .navbar-search{width:200px;height:40px;min-height:40px;padding:0 14px;border-radius:12px;font-size:14px}
body:not([data-path="apps"]) .ps-chrome #language-switcher .form-control{width:auto;height:40px;min-height:40px;padding:0 12px;border-radius:12px;font-size:14px}
@media (max-width:960px){body:not([data-path="apps"]) .ps-chrome .ps-tools .navbar-search{width:120px}}
/* the page lines up with the header: one container width, one gutter (the bundle's change at every breakpoint) */
body:not([data-path="login"],[data-path="apps"]) .container{max-width:calc(var(--container,1200px) + 48px);padding-left:24px;padding-right:24px}
body:not([data-path="login"],[data-path="apps"]) .main-column .page-content-wrapper .container{max-width:none;padding-left:0;padding-right:0}
body:not([data-path="login"],[data-path="apps"]) .main-column .page_content{padding-left:0!important;padding-right:0!important}
/* portal side menu: a floating panel from 992px; below that a strip that scrolls sideways above the page
(its copy inside the framework's burger menu went away with the framework's top bar) */
body:not([data-path="login"],[data-path="apps"]) .web-sidebar{margin:32px 0;padding:0}
body:not([data-path="login"],[data-path="apps"]) .web-sidebar:has(a,input){padding:12px 10px;border:1px solid var(--border-color);border-radius:16px;background:var(--card-bg);box-shadow:var(--pp-sh-1)}
body:not([data-path="login"],[data-path="apps"]) .sidebar-column:not(:has(a,input)){display:none}
body:not([data-path="login"],[data-path="apps"]) .sidebar-column:not(:has(a,input))+.main-column{flex:0 0 100%;max-width:100%}
body:not([data-path="login"],[data-path="apps"]) .web-sidebar ul{margin-bottom:0}
body:not([data-path="login"],[data-path="apps"]) .web-sidebar>.title{display:block;margin:6px 10px 10px;font-size:11px;font-weight:var(--pb-weight-strong);letter-spacing:.12em;text-transform:uppercase;color:var(--text-light)}
body:not([data-path="login"],[data-path="apps"]) .sidebar-item a{position:relative;display:flex;align-items:center;min-height:40px;margin-top:2px;padding:8px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--text-muted);transition:background-color .15s,color .15s}
body:not([data-path="login"],[data-path="apps"]) .sidebar-item a:hover{background:var(--fg-hover-color);color:var(--heading-color);text-decoration:none}
body:not([data-path="login"],[data-path="apps"]) .sidebar-item a.active{background:var(--pp-tint);color:var(--pp-link);font-weight:600}
body:not([data-path="login"],[data-path="apps"]) .sidebar-group h6{margin:14px 12px 6px;font-size:11px;font-weight:var(--pb-weight-strong);letter-spacing:.12em;text-transform:uppercase;color:var(--text-light)}
@media (min-width:992px){
body:not([data-path="login"],[data-path="apps"]) .web-sidebar{top:calc(var(--navbar-height) + 20px);max-height:calc(100vh - var(--navbar-height) - 40px);overflow-y:auto}
body:not([data-path="login"],[data-path="apps"]) .sidebar-item a.active::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--pb-gold-soft),var(--pb-gold-deep))}
body:not([data-path="login"],[data-path="apps"]) .web-sidebar .sidebar-items>ul+ul{margin-top:8px;padding-top:8px;border-top:1px solid var(--border-color)}
body:not([data-path="login"],[data-path="apps"]) .sidebar-column{flex:0 0 256px;max-width:256px}
body:not([data-path="login"],[data-path="apps"]) .sidebar-column+.main-column,body:not([data-path="login"],[data-path="apps"]) .main-column:has(+.sidebar-column){flex:1 1 0;max-width:calc(100% - 256px)}
}
@media (max-width:991.98px){
/* the bundle hides the column below 992px (its links sat in the framework's burger menu): show it, as a strip */
body:not([data-path="login"],[data-path="apps"]) .sidebar-column{display:block}
body:not([data-path="login"],[data-path="apps"]) .sidebar-column,body:not([data-path="login"],[data-path="apps"]) .main-column{flex:0 0 100%;max-width:100%}
body:not([data-path="login"],[data-path="apps"]) .web-sidebar{position:static;margin:20px 0 0}
body:not([data-path="login"],[data-path="apps"]) .web-sidebar:has(a,input){padding:6px}
body:not([data-path="login"],[data-path="apps"]) .web-sidebar .sidebar-items{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
body:not([data-path="login"],[data-path="apps"]) .web-sidebar .sidebar-items::-webkit-scrollbar{display:none}
body:not([data-path="login"],[data-path="apps"]) .web-sidebar .sidebar-items ul{display:flex;flex:none;gap:4px}
body:not([data-path="login"],[data-path="apps"]) .web-sidebar .sidebar-item{flex:none}
body:not([data-path="login"],[data-path="apps"]) .web-sidebar .sidebar-item a{margin-top:0;white-space:nowrap}
body:not([data-path="login"],[data-path="apps"]) .web-sidebar .sidebar-item a.active{box-shadow:inset 0 -2px 0 var(--pp-gold)}
body:not([data-path="login"],[data-path="apps"]) .main-column .page-content-wrapper{margin-top:20px}
}
/* ================= Layer 3 - components ================= */
/* page head, breadcrumbs */
body:not([data-path="login"],[data-path="apps"]) .main-column .page-content-wrapper>main.my-4{margin-top:0!important}
body:not([data-path="login"],[data-path="apps"]) .my-account-header{margin:0 0 20px;font-size:var(--pb-text-title);font-weight:var(--pb-weight-strong);letter-spacing:var(--pb-tracking-title);color:var(--heading-color)}
body:not([data-path="login"],[data-path="apps"]) .page-header-wrapper{gap:16px;flex-wrap:wrap}
body:not([data-path="login"],[data-path="apps"]) .breadcrumb{margin-bottom:0}
body:not([data-path="login"],[data-path="apps"]) .breadcrumb .breadcrumb-item{font-size:13px}
body:not([data-path="login"],[data-path="apps"]) .breadcrumb-item a{color:var(--text-muted);font-weight:500}
body:not([data-path="login"],[data-path="apps"]) .breadcrumb-item a:hover{color:var(--primary);text-decoration:none}
body:not([data-path="login"],[data-path="apps"]) .breadcrumb-item.active{color:var(--text-light)}
body:not([data-path="login"],[data-path="apps"]) .item-breadcrumbs .breadcrumb-container a{color:var(--text-muted)}
/* buttons: primary = royal to indigo, the rest a quiet outline */
body:not([data-path="login"],[data-path="apps"]) .btn{border-radius:var(--pb-radius-md);font-weight:var(--pb-weight-medium);transition:transform .2s,box-shadow .2s,background-color .2s,border-color .2s,color .2s}
body:not([data-path="login"],[data-path="apps"]) .btn:not(.btn-md):not(.btn-lg){padding:7px 14px}
body:not([data-path="login"],[data-path="apps"]) .btn.btn-xs:not(.btn-md):not(.btn-lg){padding:4px 10px;font-size:12.5px;border-radius:8px}
body:not([data-path="login"],[data-path="apps"]) .btn:is(.btn-md,.btn-lg){padding:11px 22px;border-radius:12px}
body:not([data-path="login"],[data-path="apps"]) .btn:focus-visible,body:not([data-path="login"],[data-path="apps"]) .btn.focus{outline:0;box-shadow:var(--pp-focus)!important}
body:not([data-path="login"],[data-path="apps"]) .btn.btn-primary,body:not([data-path="login"],[data-path="apps"]) .btn.btn-primary:focus{border:0;background:var(--pp-grad);background-color:var(--pb-accent-solid);color:var(--pb-text-on-accent)!important;box-shadow:var(--pb-shadow-glow),inset 0 1px 0 var(--pb-sheen)}
body:not([data-path="login"],[data-path="apps"]) .btn.btn-primary:is(:hover,:active){background:var(--pp-grad-hover)!important;color:var(--pb-text-on-accent)!important;box-shadow:var(--pb-shadow-glow),inset 0 1px 0 var(--pb-sheen)!important}
body:not([data-path="login"],[data-path="apps"]) .btn.btn-primary:not(:disabled):hover{transform:translateY(-1px)}
body:not([data-path="login"],[data-path="apps"]) .btn.btn-primary:is(:disabled,.disabled){opacity:.5;box-shadow:none}
body:not([data-path="login"],[data-path="apps"]) .btn.btn-primary :is(svg,.icon){stroke:var(--pb-text-on-accent)}
body:not([data-path="login"],[data-path="apps"]) .btn:is(.btn-default,.btn-secondary,.btn-light){border:1px solid var(--dark-border-color);background:var(--btn-default-bg);color:var(--text-color)}
body:not([data-path="login"],[data-path="apps"]) .btn:is(.btn-default,.btn-secondary,.btn-light):is(:hover,:focus){border-color:var(--primary);background:var(--btn-default-bg);color:var(--primary)}
body:not([data-path="login"],[data-path="apps"]) .btn:is(.btn-default,.btn-secondary,.btn-light):active{border-color:var(--primary);background-color:var(--pp-tint)!important;color:var(--primary)!important;box-shadow:none!important}
body:not([data-path="login"],[data-path="apps"]) .btn.btn-primary-light{border-color:transparent;background:var(--pp-tint);color:var(--pp-link);box-shadow:none}
body:not([data-path="login"],[data-path="apps"]) .btn.btn-danger{border:0;background:var(--pb-status-bad-bg);color:var(--pb-status-bad-text)}
body:not([data-path="login"],[data-path="apps"]) .btn.btn-danger:hover{background:var(--pb-status-bad-bg);color:var(--pb-status-bad-text);box-shadow:inset 0 0 0 1px var(--pb-status-bad-text)}
body:not([data-path="login"],[data-path="apps"]) .btn:is(.btn-success,.btn-warning){border:0;background:var(--pp-grad-gold);color:var(--pb-ink-on-gold);box-shadow:inset 0 1px 0 var(--pb-gold-sheen)}
body:not([data-path="login"],[data-path="apps"]) .btn:is(.btn-dark,.btn-secondary-dark){border:0;background:var(--pb-band-raised);color:var(--pb-band-text)}
body:not([data-path="login"],[data-path="apps"]) .btn.btn-link{color:var(--pp-link)}
body:not([data-path="login"],[data-path="apps"]) .btn.btn-outline-primary{border:1px solid var(--primary);background:transparent;color:var(--primary)}
body:not([data-path="login"],[data-path="apps"]) .btn.btn-outline-primary:is(:hover,:active){background:var(--pp-grad)!important;border-color:transparent;color:var(--pb-text-on-accent)!important}
body:not([data-path="login"],[data-path="apps"]) .btn.btn-outline-secondary{border:1px solid var(--dark-border-color);color:var(--text-muted)}
body:not([data-path="login"],[data-path="apps"]) .btn.btn-outline-secondary:hover{border-color:var(--primary);background:transparent;color:var(--primary)}
/* page-level actions get a comfortable height */
body:not([data-path="login"],[data-path="apps"]) :is(.page-header-actions-block,.web-form-actions,.web-list-actions,.success-footer,.modal-footer,.more-block,.page-card,.place-order-container) .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding-left:18px;padding-right:18px}
body:not([data-path="login"],[data-path="apps"]) :is(.web-form-footer,.page-card) .btn{min-height:44px;padding-left:22px;padding-right:22px;border-radius:12px}
body:not([data-path="login"],[data-path="apps"]) .page-card .btn.btn-block{display:flex;width:100%}
/* form controls: 44px, a real border, a royal focus ring */
body:not([data-path="login"],[data-path="apps"]) :is(.form-control,.custom-select,.input-with-feedback){border:1px solid var(--dark-border-color);border-radius:10px;background-color:var(--control-bg);color:var(--text-color);box-shadow:none;transition:border-color .15s,box-shadow .15s,background-color .15s}
body:not([data-path="login"],[data-path="apps"]) :is(.form-control,.custom-select):hover{border-color:var(--text-light)}
body:not([data-path="login"],[data-path="apps"]) :is(.form-control,.custom-select,.input-with-feedback):focus{border-color:var(--pp-royal);background-color:var(--control-bg);color:var(--text-color);box-shadow:var(--pp-focus);outline:0}
body:not([data-path="login"],[data-path="apps"]) .form-control::placeholder{color:var(--text-light);opacity:1}
body:not([data-path="login"],[data-path="apps"]) .form-control:is(:disabled,[readonly]){border-color:var(--border-color);background-color:var(--disabled-control-bg);color:var(--disabled-text-color)}
body:not([data-path="login"],[data-path="apps"]) :is(input,select).form-control:not(.input-xs):not(.input-sm){min-height:44px}
body:not([data-path="login"],[data-path="apps"]) textarea.form-control{min-height:96px;padding:12px 14px;line-height:1.55}
body:not([data-path="login"],[data-path="apps"]) .custom-select{height:44px}
body:not([data-path="login"],[data-path="apps"]) .like-disabled-input{border:1px solid var(--border-color);border-radius:10px;line-height:1.5}
body:not([data-path="login"],[data-path="apps"]) .control-label{margin-bottom:6px;font-size:13px;font-weight:600;color:var(--text-muted)}
body:not([data-path="login"],[data-path="apps"]) :is(.help-box,.form-text){color:var(--text-light)}
body:not([data-path="login"],[data-path="apps"]) .iord-control[data-fieldtype="Select"] .control-input .select-icon,body:not([data-path="login"],[data-path="apps"]) .iord-control[data-fieldtype="Select"].form-group .select-icon{top:50%;right:14px;transform:translateY(-50%)}
body:not([data-path="login"],[data-path="apps"]) .iord-control .control-input :is(.link-btn,.action-btn,.phone-btn){top:50%;transform:translateY(-50%)}
body:not([data-path="login"],[data-path="apps"]) .has-error .form-control{border-color:var(--red-600)}
body:not([data-path="login"],[data-path="apps"]) .input-group-text{border:1px solid var(--dark-border-color);background:var(--subtle-fg);color:var(--text-muted)}
body:not([data-path="login"],[data-path="apps"]) input[type="checkbox"]{border-radius:5px}
body:not([data-path="login"],[data-path="apps"]) input[type="checkbox"]:focus-visible{box-shadow:var(--pp-focus);outline:0}
body:not([data-path="login"],[data-path="apps"]) .custom-control-input:checked~.custom-control-label::before{border-color:var(--pb-control-checked);background-color:var(--pb-control-checked)}
body:not([data-path="login"],[data-path="apps"]) .awesomplete>ul{border:1px solid var(--border-color);border-radius:12px;background:var(--popover-bg);box-shadow:var(--pp-sh-3)}
body:not([data-path="login"],[data-path="apps"]) .datepicker{border-radius:14px}
body:not([data-path="login"],[data-path="apps"]) .datepicker--cell.-current-{color:var(--pp-accent);font-weight:700}
body:not([data-path="login"],[data-path="apps"]) .datepicker--cell.-selected-,body:not([data-path="login"],[data-path="apps"]) .datepicker--cell.-selected-.-current-{color:var(--pb-text-on-accent);border-radius:8px}
body:not([data-path="login"],[data-path="apps"]) .datepicker--button{color:var(--pp-link)}
body:not([data-path="login"],[data-path="apps"]) .datepicker--nav-title i,body:not([data-path="login"],[data-path="apps"]) .datepicker--time-current-ampm{color:var(--text-light)}
body:not([data-path="login"],[data-path="apps"]) .datepicker--cell-day.-other-month-,body:not([data-path="login"],[data-path="apps"]) .datepicker--cell-year.-other-decade-{color:var(--text-light)}
body:not([data-path="login"],[data-path="apps"]) .datepicker--cell.-disabled-{color:var(--gray-400)}
body:not([data-path="login"],[data-path="apps"]) .rating .icon{width:24px;height:24px;margin-right:2px}
body:not([data-path="login"],[data-path="apps"]) .rating .star-hover{--star-fill:var(--pb-gold-soft)}
body:not([data-path="login"],[data-path="apps"]) .rating .star-click{--star-fill:var(--pb-gold)}
body:not([data-path="login"],[data-path="apps"]) .rating .rating-hover{background-color:var(--pb-gold-soft);color:var(--pb-ink-on-gold)}
body:not([data-path="login"],[data-path="apps"]) .rating .rating-click{background-color:var(--pb-gold);color:var(--pb-ink-on-gold)}
/* surfaces */
body:not([data-path="login"],[data-path="apps"]) :is(.card,.list-group-item,.img-thumbnail){border-color:var(--border-color);background-color:var(--card-bg);color:var(--text-color)}
body:not([data-path="login"],[data-path="apps"]) .card{border-radius:14px;box-shadow:var(--pp-sh-1)}
body:not([data-path="login"],[data-path="apps"]) a.card{transition:transform .2s,box-shadow .2s,border-color .2s}
body:not([data-path="login"],[data-path="apps"]) a.card:hover{transform:translateY(-2px);border-color:var(--dark-border-color);box-shadow:var(--pp-sh-2)}
body:not([data-path="login"],[data-path="apps"]) .card-body{padding:24px}
body:not([data-path="login"],[data-path="apps"]) :is(.card-header,.card-footer){border-color:var(--border-color);background:var(--subtle-accent)}
body:not([data-path="login"],[data-path="apps"]) .jumbotron{background:var(--subtle-fg)}
/* My Account */
body:not([data-path="login"],[data-path="apps"]) .account-info{margin-left:0;margin-right:0;padding:4px 28px;border-radius:14px;box-shadow:var(--pp-sh-2)}
body:not([data-path="login"],[data-path="apps"]) .account-info .col{min-height:76px;padding:18px 0}
body:not([data-path="login"],[data-path="apps"]) .account-info :is(.my-account-name,.my-account-item){color:var(--heading-color);font-weight:600}
body:not([data-path="login"],[data-path="apps"]) .account-info .my-account-name{font-size:17px}
body:not([data-path="login"],[data-path="apps"]) .account-info .my-account-item-desc{margin-top:2px;color:var(--text-muted)}
body:not([data-path="login"],[data-path="apps"]) .account-info .my-account-avatar .avatar-frame{border:0;background:var(--pp-grad)!important;color:var(--pb-text-on-accent)!important;font-size:22px;font-weight:700;box-shadow:0 0 0 3px var(--fg-color),0 0 0 4.5px color-mix(in srgb,var(--pb-accent-secondary) 65%,transparent)}
body:not([data-path="login"],[data-path="apps"]) .account-info .my-account-item-link a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid var(--dark-border-color);border-radius:10px;font-weight:600;color:var(--text-color);transition:border-color .2s,color .2s}
body:not([data-path="login"],[data-path="apps"]) .account-info .my-account-item-link a:hover{border-color:var(--primary);color:var(--primary)}
body:not([data-path="login"],[data-path="apps"]) .account-info .my-account-item-link .item-link-text{padding-left:0!important}
body:not([data-path="login"],[data-path="apps"]) .account-info .my-account-item-link a :is(.edit-profile-icon,.right-icon){stroke:var(--pp-accent)}
body:not([data-path="login"],[data-path="apps"]) .account-info .my-account-item-link a .icon use{stroke:var(--pp-accent)}
@media (max-width:767.98px){
body:not([data-path="login"],[data-path="apps"]) .account-info{padding:4px 18px}
body:not([data-path="login"],[data-path="apps"]) .account-info .my-account-item-link a{min-width:40px;justify-content:center;padding:0 10px}
body:not([data-path="login"],[data-path="apps"]) .my-account-header{margin-left:0}
}
/* message, reset-password and error cards */
body:not([data-path="login"],[data-path="apps"]) .page-card{max-width:440px;margin:72px auto 40px;padding:28px;border:1px solid var(--border-color);border-radius:18px;background:var(--card-bg);box-shadow:var(--pp-sh-2)}
body:not([data-path="login"],[data-path="apps"]) .page-card .page-card-head{margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid var(--border-color)}
body:not([data-path="login"],[data-path="apps"]) .page-card .page-card-head .indicator{font-size:var(--pb-text-title);font-weight:var(--pb-weight-strong);letter-spacing:var(--pb-tracking-title);color:var(--heading-color)}
body:not([data-path="login"],[data-path="apps"]) .page-card .page-card-head .indicator::before{width:10px;height:10px;margin:0 10px 0 0;border-radius:50%}
body:not([data-path="login"],[data-path="apps"]) .page-card p{font-size:14.5px;line-height:1.6;color:var(--text-muted)}
body:not([data-path="login"],[data-path="apps"]) .page-card .btn{margin-top:20px}
body:not([data-path="login"],[data-path="apps"]) .page-card~p.text-muted.small{margin-top:0!important}
body:not([data-path="login"],[data-path="apps"]) .for-reset-password{margin:56px 0}
body:not([data-path="login"],[data-path="apps"]) .for-reset-password .page-card-head h4{font-size:var(--pb-text-title);font-weight:var(--pb-weight-strong);letter-spacing:var(--pb-tracking-title);color:var(--heading-color)}
body:not([data-path="login"],[data-path="apps"]) .for-reset-password .page-card{max-width:460px;margin:0 auto;padding:36px 40px;border:1px solid var(--border-color)}
body:not([data-path="login"],[data-path="apps"]) .for-reset-password .password-strength-indicator{margin-top:-46px;margin-right:0}
@media (max-width:425px){body:not([data-path="login"],[data-path="apps"]) .for-reset-password .page-card{padding:24px 20px;background:var(--card-bg);box-shadow:var(--pp-sh-2)}}
/* the traceback stays dark and monospaced in both themes */
body:not([data-path="login"],[data-path="apps"]) .error-content{max-width:100%;margin:28px auto;padding:20px 24px;overflow:auto;border:1px solid color-mix(in srgb,var(--pb-band-text) 18%,transparent);border-radius:14px;background:var(--pb-band-bg);box-shadow:var(--pp-sh-2)}
body:not([data-path="login"],[data-path="apps"]) .error-content :is(.hljs-built_in,.hljs-variable,.hljs-strong,.hljs-selector-class,.hljs-template-variable,.hljs-addition,.hljs-bullet){color:#E8C252}
body:not([data-path="login"],[data-path="apps"]) .error-content :is(.hljs-params,.hljs-doctag,.hljs-tag,.hljs-name,.hljs-builtin-name,.hljs-attr,.hljs-attribute,.hljs-code){color:#7DD3FC}
body:not([data-path="login"],[data-path="apps"]) .error-content :is(.hljs-comment,.hljs-quote){color:var(--pb-band-soft)}
body:not([data-path="login"],[data-path="apps"]) .error-content :is(pre,code){margin:0;border:0;background:none;color:var(--pb-band-text);font-family:var(--pb-font-mono);font-size:12.5px;line-height:1.6}
/* lists: rows of 40px and more, hover, quiet dividers */
body:not([data-path="login"],[data-path="apps"]) .website-list{margin-left:0;padding:4px 24px;border:1px solid var(--border-color);border-radius:14px;background:var(--card-bg);box-shadow:var(--pp-sh-1)}
body:not([data-path="login"],[data-path="apps"]) :is(.web-list-item,.transaction-list-item,.portal-row){min-height:56px;padding:16px 0;border-bottom:1px solid var(--border-color);color:var(--text-color)}
body:not([data-path="login"],[data-path="apps"]) :is(.web-list-item,.transaction-list-item,.portal-row):last-child{border-bottom:0}
body:not([data-path="login"],[data-path="apps"]) :is(.web-list-item,.portal-row) a{color:var(--text-color)}
body:not([data-path="login"],[data-path="apps"]) :is(.web-list-item,.transaction-list-item):hover{background:linear-gradient(90deg,transparent,var(--pp-tint) 12%,var(--pp-tint) 88%,transparent)}
body:not([data-path="login"],[data-path="apps"]) .web-list-item p{margin-bottom:0}
body:not([data-path="login"],[data-path="apps"]) .website-list .result{border-bottom:0}
body:not([data-path="login"],[data-path="apps"]) .empty-apps-state{display:grid;justify-items:center;padding:64px 24px;border:1px dashed var(--dark-border-color);border-radius:16px;background:var(--card-bg);color:var(--text-muted);text-align:center}
body:not([data-path="login"],[data-path="apps"]) .empty-apps-state .mt-4{font-weight:500}
[data-theme="dark"] body:not([data-path="login"],[data-path="apps"]) :is(.empty-list-icon,.null-state,.no-result img){filter:invert(.92) hue-rotate(180deg)}
body:not([data-path="login"],[data-path="apps"]) .table{color:var(--text-color)}
body:not([data-path="login"],[data-path="apps"]) .table :is(th,td){border-color:var(--border-color)}
body:not([data-path="login"],[data-path="apps"]) .table thead th{border-bottom-width:1px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-light)}
body:not([data-path="login"],[data-path="apps"]) .table-hover tbody tr:hover{background-color:var(--fg-hover-color);color:var(--text-color)}
body:not([data-path="login"],[data-path="apps"]) .table-bordered{border-color:var(--border-color)}
body:not([data-path="login"],[data-path="apps"]) .page-link{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-color:var(--border-color);background:var(--card-bg);color:var(--text-color)}
body:not([data-path="login"],[data-path="apps"]) .page-link:hover{border-color:var(--primary);background:var(--card-bg);color:var(--primary)}
body:not([data-path="login"],[data-path="apps"]) .page-item.active .page-link{border-color:transparent;background:var(--pp-grad);color:var(--pb-text-on-accent)}
body:not([data-path="login"],[data-path="apps"]) .page-item.disabled .page-link{border-color:var(--border-color);background:var(--subtle-accent);color:var(--text-light)}
body:not([data-path="login"],[data-path="apps"]) .page-item:first-child .page-link{border-radius:10px 0 0 10px}
body:not([data-path="login"],[data-path="apps"]) .page-item:last-child .page-link{border-radius:0 10px 10px 0}
/* a portal document (order, invoice, quotation) */
body:not([data-path="login"],[data-path="apps"]) #page-order .main-column .page-content-wrapper .container.my-4{border:1px solid var(--border-color);border-radius:14px;box-shadow:var(--pp-sh-2)}
@media (min-width:567px){body:not([data-path="login"],[data-path="apps"]) #page-order .main-column .page-content-wrapper .container.my-4{padding:24px 28px}}
body:not([data-path="login"],[data-path="apps"]) .order-items{color:var(--text-color)}
body:not([data-path="login"],[data-path="apps"]) .order-taxes .item-grand-total{flex:0 1 auto;width:auto;max-width:none;white-space:nowrap}
body:not([data-path="login"],[data-path="apps"]) .order-taxes .item-grand-total.text-right{flex-shrink:0;margin-left:auto}
/* status: green is gold here; "done" is a filled gold pill, as in Desk */
body:not([data-path="login"],[data-path="apps"]) .indicator-pill{height:22px;padding:0 10px;font-weight:600}
body:not([data-path="login"],[data-path="apps"]) :is(.indicator-pill,.indicator-pill-right,.indicator-pill-round).green{background:var(--pp-grad-gold);color:var(--pb-ink-on-gold);box-shadow:inset 0 1px 0 var(--pb-gold-sheen)}
body:not([data-path="login"],[data-path="apps"]) .indicator-pill.green::before,body:not([data-path="login"],[data-path="apps"]) .indicator-pill-right.green::after{background:var(--pb-gold-dot)}
body:not([data-path="login"],[data-path="apps"]) .indicator.green::before{background:var(--pp-gold)}
body:not([data-path="login"],[data-path="apps"]) .indicator.blue::before{background:var(--pp-royal)}
body:not([data-path="login"],[data-path="apps"]) :is(.badge-primary,.badge-info){background:var(--pp-grad);color:var(--pb-text-on-accent)}
body:not([data-path="login"],[data-path="apps"]) .badge-success{background:var(--pp-grad-gold);color:var(--pb-ink-on-gold)}
body:not([data-path="login"],[data-path="apps"]) :is(.badge-secondary,.badge-light){background:var(--bg-gray);color:var(--text-on-gray)}
/* the "done" tick lives in