/* Shared client design contract. Load last; never put a tenant palette in page CSS.
   Tokens are initialized synchronously by client-branding before page/chart scripts. */
:root{
 --brand:var(--client-accent,#a75d78);--brand-deep:var(--client-ink-light,#84445e);
 --brand-soft:color-mix(in srgb,var(--brand) 22%,transparent);--brand-faint:color-mix(in srgb,var(--brand) 8%,var(--surface));
 --panel:var(--surface);--border:var(--line);--muted:var(--muted-text);--primary:var(--brand);--primary-color:var(--brand);--accent:var(--brand);--accent-color:var(--brand);--ink:var(--brand-deep);
 --chart-revenue:var(--brand);--chart-variable:color-mix(in srgb,var(--brand) 50%,var(--surface));--chart-fixed:var(--brand-deep);
 --control-height:44px;--control-radius:10px;--control-gap:12px;
}
:root[data-theme=dark]{--brand-deep:var(--client-ink-dark,#e7aabd);color-scheme:dark}
:root:not([data-theme=dark]){color-scheme:light}
.wf,.wg-chart{--wf-accent:var(--brand)!important;--wf-bg:var(--surface);--wf-text:var(--text);--wf-muted:var(--muted-text);--wf-border:var(--line)}
:root[data-theme] .primary-button,:root[data-theme] .welcome-panel .primary-button,:root[data-theme] .quick-fab{background:var(--brand);color:var(--brand-on,#fff);border-color:var(--brand)}
:root[data-theme] .secondary-button,:root[data-theme] .small-action{color:var(--brand-deep);background:var(--brand-faint);border-color:var(--brand-soft)}
:root[data-theme] .welcome-panel{background:linear-gradient(115deg,var(--surface),var(--brand-faint));color:var(--text)}
:root[data-theme] .welcome-panel h2,:root[data-theme] .section-heading h2,:root[data-theme] .panel-heading h3,:root[data-theme] .topbar-title h1{color:var(--brand-deep)}
:root[data-theme] .login-brand{background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 22%,#18181b),color-mix(in srgb,var(--brand) 55%,#18181b));color:#fff}
:root[data-theme] .mobile-nav button.active{color:var(--brand-deep);background:var(--brand-faint)}
:root[data-theme] .wh-tool.featured{background:var(--brand);border-color:var(--brand);color:var(--brand-on,#fff)}
:root[data-theme] .wh-tool.featured :is(p,small,.wh-tool-arrow){color:inherit}
:root[data-theme] :is(.wf-btn.primary,.wf-btn.active,.wh-button.primary,.wt-next,.wg-update-progress,.marketplace-catalog-tabs button.active,.wc-segmented>button.active,.wc-step-number,.flow-steps>span.done){color:var(--brand-on,#fff)!important}
:root[data-theme] .sales-report .quick-periods .ghost-button.active{color:var(--brand-on,#fff)!important}
:root[data-theme] .wp-calendar-days>.range-end{color:var(--brand-on,#fff)!important}
:root[data-theme] .wf-financial-toolbar>.wf-actions>.wf-btn:first-child{color:var(--brand-deep)}
:root[data-theme] .wt-popup{background:var(--surface);color:var(--text);border-color:var(--line)}
:root[data-theme] .wt-popup :is(p,.wt-count,.wt-close,.wt-back,.wt-skip){color:var(--muted-text)}
/* Consistent controls in current pages and in new pages using the shared classes. */
:where(.wf-field,.wlb-field,.wh-filters label,.wu-filter-fields label){min-width:0;max-width:100%;gap:7px}
:where(.wf-field,.wlb-field,.wh-filters label,.wu-filter-fields label)>:is(input,select,textarea){box-sizing:border-box;display:block;width:100%;min-width:0;max-width:100%;min-height:var(--control-height);border-radius:var(--control-radius);font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line)}
:where(.wf-field,.wlb-field,.wh-filters label,.wu-filter-fields label)>:is(input,select){padding:10px 11px}
:where(.wf-field,.wlb-field,.wh-filters label,.wu-filter-fields label)>span{font-size:12px;line-height:1.5;font-weight:500;color:var(--muted-text)}
:where(.wf,.wlb,.wh-home,.sales-report-page) :is(button,input,select,textarea,summary):focus-visible{outline:2px solid var(--brand-deep);outline-offset:3px}
:where(.wf,.wlb,.wh-home,.sales-report-page) :is(input[type=checkbox],input[type=radio]){accent-color:var(--brand)}
/* Financial filters: one component for Dashboard, DRE, Health and Projection. */
.wf-financial-page .wf-filters.wp-finance-filters,.wp-toolbar-filters .wf-filters.wp-finance-filters{position:relative;min-width:0;z-index:40}
.wf .wp-finance-filters .wf-filter-summary{display:flex;gap:8px;flex-wrap:nowrap}
.wf .wp-finance-filters .wf-filter-summary>.wf-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 12px;font-size:12px;border:1px solid var(--line);border-radius:var(--control-radius);color:var(--text);background:var(--surface);font-weight:500}
.wf .wp-finance-filters .wf-filter-summary>.wf-btn[aria-expanded=true]{border-color:var(--brand);background:var(--brand-faint);color:var(--brand-deep)}
.wf .wp-finance-filters .wf-filter-summary span{white-space:normal;line-height:1.4;overflow-wrap:anywhere}
.wf .wp-finance-filters .wf-filter-popup{position:absolute;top:calc(100% + 8px);right:0;left:auto;box-sizing:border-box;max-width:calc(100vw - 28px);width:560px;max-height:min(640px,calc(100dvh - 220px));margin:0;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 12px 36px #0002;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.wf .wp-finance-filters .wp-channel-popover{width:350px!important;gap:16px}
.wf .wp-filter-top{gap:10px;flex-wrap:wrap}.wf .wp-filter-top strong{font-size:13px}.wf .wp-filter-top .wf-btn{font-size:11px;min-height:36px;padding:7px 9px;border:1px solid var(--line)}
.wf .wp-account-list{max-height:250px;gap:8px}.wf .wp-account-list .wf-check{padding:10px;border:1px solid var(--line);border-radius:9px;gap:10px;margin:0;background:var(--surface-2)}
.wf .wp-account-list .wf-check>span{min-width:0;overflow-wrap:anywhere}.wf .wp-account-list :is(b,small){font-size:12px;line-height:1.5}.wf .wp-account-list b{font-weight:500}
.wf .wp-finance-filters .wf-check input{width:19px;height:19px;min-height:19px;flex:0 0 19px;margin:1px 0;accent-color:var(--brand)}
.wf .wp-period-layout{grid-template-columns:126px minmax(0,1fr);gap:16px;min-width:0}.wf .wp-period-layout>*{min-width:0}
.wf .wp-period-presets{gap:6px;padding-right:12px}.wf .wp-period-presets>strong{font-size:11px;line-height:1.5}
.wf .wp-period-presets>.wf-btn{min-height:36px;padding:7px 8px;font-size:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:8px}
.wf .wp-period-presets>.wf-btn:hover,.wf .wp-period-presets>.wf-btn.selected{border-color:var(--brand);background:var(--brand-faint);color:var(--brand-deep)}
.wf .wp-period-presets>.wf-check{font-size:12px;gap:8px;line-height:1.5;align-items:center}
.wf .wp-calendar-heading{gap:8px}.wf .wp-calendar-heading strong{font-size:13px}.wf .wp-calendar-heading .wf-btn{width:36px;min-height:36px;flex:0 0 36px;font-size:23px}
.wf .wp-calendar-days{gap:3px}.wf .wp-calendar-days>span{font-size:11px}.wf .wp-calendar-days>.wf-btn{border:1px solid var(--line);min-height:36px;padding:3px 0;font-size:12px;border-radius:7px;color:var(--text);background:var(--surface)}
.wf .wp-calendar-days>.other-month{opacity:1;color:var(--subtle-text);background:var(--surface-2)}
.wf .wp-calendar-days>.in-range{background:var(--brand-faint);border-color:var(--brand-soft);color:var(--brand-deep)}
.wf .wp-calendar-days>.range-end{background:var(--brand);border-color:var(--brand);color:var(--brand-on,#fff)}
.wf .wp-period-inputs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:14px}.wf .wp-period-inputs>.wf-field{min-width:0}
.wf .wp-period-inputs input{width:100%;min-width:0;max-width:100%;font-size:13px!important;min-height:44px;box-sizing:border-box}
.wf .wp-period-footer{position:sticky;bottom:-16px;z-index:1;background:var(--surface);margin-top:16px;padding:13px 0 3px;gap:12px}.wf .wp-period-footer small{font-size:12px;line-height:1.5;min-width:0}.wf .wp-period-footer>.wf-btn,.wf .wp-channel-popover>.primary{min-height:44px;font-size:12px;flex-shrink:0}
/* Other page filters use the same field geometry, spacing and responsive rules. */
.wu-filter-fields,.wlb-filters,.wh-filters{gap:var(--control-gap)}
.wu-filter-fields{grid-template-columns:repeat(auto-fit,minmax(min(100%,185px),1fr))}
.wh-filters{grid-template-columns:repeat(auto-fit,minmax(min(100%,185px),1fr))}
.wlb-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,185px),1fr));border-radius:14px}
.wlb-filters .wlb-field{width:100%;min-width:0;max-width:none}
@media(max-width:700px){
 .welcome-panel{display:flex;flex-direction:column;align-items:flex-start;gap:15px}.welcome-panel .primary-button{position:static!important;align-self:flex-start;flex:0 0 auto}
 .wf-financial-page .wf-financial-toolbar>.wf-filters{width:100%}
 .wf .wp-finance-filters .wf-filter-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .wf .wp-finance-filters .wf-filter-summary>.wf-btn{min-width:0;padding:9px 8px;min-height:44px;font-size:12px;gap:6px}
 .wf .wp-finance-filters .wf-filter-summary svg{width:16px;height:16px}
 .wf .wp-finance-filters .wf-filter-popup,.wf .wp-finance-filters .wp-channel-popover{left:0;right:auto;width:100%!important;max-width:100%;padding:12px;scrollbar-gutter:auto}
 .wf .wp-period-layout{grid-template-columns:minmax(0,1fr);gap:14px}
 .wf .wp-period-presets{grid-template-columns:repeat(3,minmax(0,1fr));border-right:0;padding-right:0}
 .wf .wp-period-presets>.wf-btn{font-size:11px;min-height:36px;padding:6px 4px;text-align:center}
 .wf .wp-period-inputs{grid-template-columns:minmax(0,1fr);gap:12px}
 .wf .wp-period-inputs input{font-size:16px!important}
 .wf .wp-period-footer{bottom:-12px;padding-bottom:3px;display:grid;grid-template-columns:minmax(0,1fr)}
 .wf .wp-period-footer>.wf-btn{width:100%;min-height:44px}
 .wf .wp-account-list{max-height:230px}
 .wp-toolbar-filters{flex-wrap:wrap;gap:8px}.wp-toolbar-filters .wp-finance-filters{flex:1 0 100%}.wp-toolbar-filters>.wf-actions{margin-left:auto}
 .wh-filters,.wu-filter-fields,.wlb-filters{grid-template-columns:minmax(0,1fr)}
 .wh-filters label:last-of-type{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){.wp-finance-filters *{scroll-behavior:auto!important}}

/* Neutral active controls retain readable text rather than a fill foreground. */
:root[data-theme] .wp-premise .wf-premise-mode .wf-btn.active{color:var(--brand-deep)!important}
:root[data-theme] :is(.user-avatar,.avatar-button){background:var(--brand-faint);color:var(--brand-deep);border-color:var(--brand-soft)}
:root[data-theme] .nav-parent.selected,:root[data-theme] .wl-eyebrow{color:var(--brand-deep)}
:root[data-theme] .wp-priority:not(.critica){color:var(--brand-deep);background:var(--brand-faint)}
:root[data-theme] .wl-screen{background:var(--bg)}
:root[data-theme] .wl-card{background:var(--surface);color:var(--text);border-color:var(--line)}
:root[data-theme] .wl-card :is(p,dt,small){color:var(--muted-text)}
:root[data-theme] .wl-card textarea{background:var(--surface-2);color:var(--text);border-color:var(--line)}
/* The guided tour must keep readable text on the active theme's surface. */
:root[data-theme] .wt-popup .wt-title{color:var(--text)!important}
:root[data-theme] .wt-popup .wt-body{color:var(--muted-text)!important}
:root[data-theme] .wt-popup .wt-back{background:var(--surface-2);color:var(--text);border-color:var(--line)}