/* workforce.css – Aprikos Workforce, stage 1 (Omer 2026-10-01, wf-port/patch-workforce.js). 1 design tokens (builder B's wf-plan.css and later stages build on them) 2 the focus ring on light surfaces 3 three site.css bugs, fixed here as overrides (site.css itself is not touched) 4 the new left menu: 11 areas with thin dividers, groups, Settings pinned at the bottom, the folded rail with flyouts and tooltips, the drawer under 900 px 5 the Ctrl/⌘K overlay (the assistant and the job palette, same ids as before: #adAiQ, #adPal, #adAiLog) 6 the small pages: Sales, Pipeline & follow-up, SEO, the distributor-desk counters, the integration summary Loaded right after workspace.css (index.html). Rules that must also win over module styles loaded later (qt-desk, integrations, crm-ops, staff-profile, the lazily loaded marketing/desk/orders/insights styles) carry an extra :root, #pg-admin or .ad-body in the selector instead of !important. Same palette and type as site.css – nothing new is introduced visually except where a fix says so. */ /* ---------------- 1 · tokens (no visual change: nothing outside the tender page used these names before, and the values are the ones the tender page already defines locally) ---------------- */ :root{ --ok:#0B7449; --ok-bg:#E3F4EC; --warn:#9A5B00; --warn-bg:#FDF1E0; --bad:#B03A28; --bad-bg:#FBE7E5; --r-s:8px; --r-m:12px; --r-l:16px; --r-pill:999px; --sh-card:0 1px 2px rgba(10,46,47,.03),0 10px 30px rgba(10,46,47,.05); --sh-pop:0 18px 40px rgba(10,46,47,.16); --sh-modal:0 24px 64px rgba(10,46,47,.30); --z-bar:60; --z-drawer:900; --z-dialog:4000; --z-toast:4300; --focus:var(--deeper,#1B6E70); /* 6:1 on white */ --focus-dark:#3AC0C3; /* on the dark teal surfaces */ } /* ---------------- 2 · focus ring: turquoise (#3AC0C3) is 2.1:1 on white – below the 3:1 a focus indicator needs. The module rules below set it on light surfaces; they become --focus. Turquoise stays where the surface is dark. ---------------- */ :root .ws-bar :focus-visible,:root .ws-home :focus-visible,:root .ws-sales :focus-visible,:root .ws-int summary:focus-visible, :root .qt :focus-visible,:root .qt-dlg :focus-visible, :root .ig :focus-visible,:root .ig-drw :focus-visible,:root .ig-sum :focus-visible,:root .ig-row:focus-visible, :root .co-drw :focus-visible,:root .co-dlg :focus-visible,:root .co-chip :focus-visible,:root .co-title:focus-visible, :root .sp-wrap :focus-visible,:root .sp-f input:focus-visible,:root .sp-f select:focus-visible,:root .sp-f textarea:focus-visible{outline-color:var(--focus)} :root .sp-tagbox:has(input:focus-visible){outline-color:var(--focus)} :root .ig-dh :focus-visible,:root .co-pre:focus-visible,:root .qt-toast:focus-visible, :root .wf-pal .ad-ai :focus-visible{outline-color:var(--focus-dark)} /* ---------------- 3 · site.css fixes ---------------- */ /* fix 1 – site.css `.ad-body section{padding:0;margin:0}` (specificity 0,1,1) was meant to undo the public `section{padding:92px 0}`, but it also beats every card class inside a panel (0,1,0), so the cards lost their padding. The intended rule is `:where(.ad-body) section`; without touching site.css, each card class that lives in a panel gets its own values back. */ .ad-body section.ws-sec{padding:18px 20px} .ad-body section.ws-sales{margin:0 0 18px} .ad-body section.ig-sum{padding:12px 18px} .ad-body section.ig-grp{margin:0 0 14px;padding:14px 16px} .ad-body section.ig-card{margin:0 0 12px;padding:14px 16px} .ad-body section.co-cjobs{margin-top:20px;padding-top:14px} .ad-body section.mk-card{margin:0 0 16px;padding:18px 20px} .ad-body section.od-card{margin:0 0 12px;padding:16px 18px} .ad-body .od-grid section.od-card{margin:0} .ad-body section.dk-main{padding:8px 22px 24px} .ad-body section.ai-card{padding:16px 18px} .ad-body section.ai-sect{margin-top:22px} .ad-body section.ai-sect:first-child{margin-top:0} .ad-body section.ad-dash{padding:18px 20px} .ad-body section.ad-ai{margin:0 0 18px;padding:18px 20px} .ad-body section.sp-card{padding:18px 18px 16px} @media (max-width:900px){.ad-body section.ig-grp{padding:12px 10px}} @media (max-width:700px){.ad-body section.sp-card{padding:16px 14px 14px}} @media (max-width:600px){.ad-body section.dk-main{padding:4px 14px 18px}} /* fix 2 – site.css `.ad-main{overflow-x:hidden}` turns the work area into a scroll container, so the sticky bar sticks to it (which never scrolls) instead of the window: the bar scrolled away. clip cuts the same overflow without that side effect. */ #pg-admin .ad-main{overflow-x:clip} /* fix 3 – site.css styles every
as the sticky public site header (position, z-index 80, translucent background, blur, bottom line); the panel header .ad-head inherited it and, with fix 2, would cover the bar while scrolling. */ #pg-admin .ad-head{position:static;z-index:auto;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0} /* ---------------- 4 · the menu ---------------- */ #pg-admin .ad-rail{z-index:70} #pg-admin .ad-brand{position:relative} #pg-admin .ad-rail .ad-nav a[aria-current="page"]{background:rgba(58,192,195,.22);color:#fff;box-shadow:inset 0 0 0 1px rgba(58,192,195,.35)} #pg-admin .ad-nav .wf-sep{flex:none;height:0;border:0;border-top:1px solid rgba(255,255,255,.12);margin:5px 12px} #pg-admin .ad-rail .wf-pin{margin-top:auto;padding-top:10px} #pg-admin .ad-rail .wf-pin+.ad-me{margin-top:10px} .wf-flyh{display:none} #pg-admin .ad-grpb .ad-ext{margin-top:0;border-top:0;border-radius:11px;padding-top:8px} .wf-prev{display:flex;flex-direction:column;gap:2px;margin:0 0 4px 30px} .wf-prev[hidden]{display:none} #pg-admin .ad-nav .wf-prev a{padding:6px 10px;font-size:.84rem;font-weight:400} #wfPrevB .ad-chev{margin-left:auto;font-family:Jost;font-weight:400;font-size:1.15rem;line-height:1;color:#9FDADB;transition:transform .18s} #wfPrevB[aria-expanded="true"] .ad-chev{transform:rotate(90deg)} .wf-drwx,.wf-scrim{display:none} /* the folded rail (wide screens): only the 11 top-level icons; a group opens a flyout with the same look as the profile box; a single page shows its name as a tooltip on hover and keyboard focus */ @media (min-width:901px){ #pg-admin .ad-shell.ws-mini .ad-rail{overflow:visible} #pg-admin .ws-mini .ad-nav .ad-grph{display:flex;justify-content:center;padding:11px 0;position:relative} #pg-admin .ws-mini .ad-grph span,#pg-admin .ws-mini .ad-grph .ad-chev{display:none} #pg-admin .ws-mini .ad-grph .ad-badge{position:absolute;top:3px;right:6px;min-width:16px;height:16px;font-size:10px;padding:0 4px} #pg-admin .ws-mini .ad-grp{position:relative} #pg-admin .ws-mini .ad-grp .ad-grpb{display:none} #pg-admin .ws-mini .ad-grp.has-on .ad-grph{color:#fff;background:rgba(58,192,195,.22);box-shadow:inset 0 0 0 1px rgba(58,192,195,.35)} #pg-admin .ws-mini .wf-sep{margin:5px 8px} #pg-admin .ws-mini .ad-grp.wf-fly .ad-grpb{display:flex;flex-direction:column;gap:2px;position:absolute;left:calc(100% + 12px);top:-6px;min-width:236px;margin:0;padding:8px;border:1px solid var(--line);border-left:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--sh-pop);z-index:2} #pg-admin .ws-mini .wf-pin .ad-grp.wf-fly .ad-grpb{top:auto;bottom:-6px} #pg-admin .ws-mini .ad-grp.wf-fly .wf-flyh{display:block;padding:4px 10px 6px;font-family:Jost;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--deeper)} #pg-admin .ws-mini .ad-grp.wf-fly .ad-grpb a{justify-content:flex-start;padding:8px 10px;color:var(--ink);font-weight:500} #pg-admin .ws-mini .ad-grp.wf-fly .ad-grpb a span{display:inline;flex:1} #pg-admin .ws-mini .ad-grp.wf-fly .ad-grpb a .sr-only{display:block;flex:none} #pg-admin .ws-mini .ad-grp.wf-fly .ad-grpb a em{display:inline;color:var(--deeper)} #pg-admin .ws-mini .ad-grp.wf-fly .ad-grpb a:hover{background:var(--bg-soft);color:var(--darkest)} #pg-admin .ws-mini .ad-grp.wf-fly .ad-grpb a.on,#pg-admin .ws-mini .ad-grp.wf-fly .ad-grpb a[aria-current="page"]{background:var(--tq-soft);color:var(--darkest);box-shadow:none} #pg-admin .ws-mini .ad-grp.wf-fly .ad-grpb a .ad-badge{position:static;min-width:20px;height:20px;font-size:11px} #pg-admin .ws-mini .ad-grp.wf-fly .ad-grpb a:focus-visible{outline-color:var(--focus)} #pg-admin .ws-mini .ad-grp.wf-fly .wf-prev{margin-left:26px} #pg-admin .ws-mini .ad-grp.wf-fly #wfPrevB .ad-chev{display:inline;color:var(--muted)} #pg-admin .ws-mini .ad-nav>a[data-tip]:hover::after,#pg-admin .ws-mini .ad-nav>a[data-tip]:focus-visible::after, #pg-admin .ws-mini .ad-grp:not(.wf-fly)>.ad-grph:hover::after,#pg-admin .ws-mini .ad-grp:not(.wf-fly)>.ad-grph:focus-visible::after{ content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;padding:5px 10px;border-radius:8px;background:var(--darkest);color:#fff;font-family:Jost,system-ui,sans-serif;font-size:.8rem;font-weight:500;letter-spacing:0;box-shadow:var(--sh-pop);pointer-events:none;z-index:3} } /* under 900 px: the rail becomes a drawer from the menu button in the bar (role=dialog while it is a drawer – a11y.js keeps the focus inside and Escape closes it), with a scrim behind it */ @media (max-width:900px){ #pg-admin .ad-shell .ad-rail{position:fixed;top:0;left:0;bottom:0;width:min(300px,86vw);height:100%;padding:18px 14px 16px;overflow-y:auto;z-index:var(--z-drawer);transform:translateX(-105%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s} #pg-admin .ad-shell.wf-drw .ad-rail{transform:none;visibility:visible;transition:transform .2s ease;box-shadow:0 0 60px rgba(3,30,31,.35)} #pg-admin .ad-shell .ad-brand{display:block;padding-right:44px} #pg-admin .ad-shell .ad-nav{flex-direction:column;overflow:visible;gap:3px;padding-bottom:0} #pg-admin .ad-shell .ad-nav a{white-space:normal;padding:10px 12px} #pg-admin .ad-shell .ad-grp{display:flex} #pg-admin .ad-shell .ad-grph{display:flex} #pg-admin .ad-shell .ad-grpb{display:none} #pg-admin .ad-shell .ad-grp.open .ad-grpb{display:flex} #pg-admin .ad-shell .ad-grpb a{padding:8px 10px;font-size:.9rem;font-weight:400} #pg-admin .ad-shell .ad-nav .ad-ext{margin:0;border:0;padding:8px 10px} #pg-admin .ad-shell .ad-me{display:block} #pg-admin .ad-shell .wf-drwx{display:inline-flex;align-items:center;justify-content:center;position:absolute;top:-6px;right:0;width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.06);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer} #pg-admin .ad-shell.wf-drw .wf-scrim{display:block;position:fixed;inset:0;z-index:899;background:rgba(3,30,31,.45)} #pg-admin .ws-bar .ws-ic:first-child{display:inline-flex} } @media (max-width:900px) and (prefers-reduced-motion:reduce){#pg-admin .ad-shell .ad-rail,#pg-admin .ad-shell.wf-drw .ad-rail{transition:none}} @media (prefers-reduced-motion:reduce){#wfPrevB .ad-chev{transition:none}} /* the search field in the bar shows the shortcut */ .wf-kbd{margin-left:auto;flex:none;padding:0 7px;border:1px solid var(--line);border-radius:6px;background:var(--bg-soft);font-family:Jost,system-ui,sans-serif;font-size:.72rem;font-weight:600;line-height:1.7;color:var(--muted)} @media (max-width:600px){.wf-kbd{display:none}} /* ---------------- 5 · the Ctrl/⌘K overlay ---------------- */ .wf-pal{position:fixed;inset:0;z-index:var(--z-dialog);display:flex;align-items:flex-start;justify-content:center;padding:min(12vh,110px) 16px 16px} .wf-pal[hidden]{display:none} .wf-palsc{position:absolute;inset:0;background:rgba(3,30,31,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .wf-pal .wf-palbox{position:relative;width:min(720px,100%);margin:0;padding:18px 20px;box-shadow:var(--sh-modal)} .wf-pal .ad-aih>div{flex:1;min-width:0} .wf-pal .ad-ailog{max-height:min(40vh,320px)} .wf-palx{flex:none;align-self:flex-start;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#CFE8E8;border-radius:8px;padding:3px 9px;font-family:Jost,system-ui,sans-serif;font-size:.74rem;font-weight:600;cursor:pointer} .wf-palx:hover{background:rgba(255,255,255,.18);color:#fff} @media (max-width:600px){.wf-pal{padding:12px}.wf-pal .wf-palbox{padding:14px}} /* ---------------- 6 · pages ---------------- */ /* Overview: when wf-plan.js draws the day plan, #wsHome is a plain block (the old two-column grid was for sections A–D) */ .ws-home.wf-plan{display:block} /* the new pages carry their own cards – no extra white box around them, like Overview */ #pg-admin .ad-panel[data-panel="sales"] .ad-body,#pg-admin .ad-panel[data-panel="pipeline"] .ad-body,#pg-admin .ad-panel[data-panel="seo"] .ad-body{background:none;border:0;padding:0;box-shadow:none} #wfSales{display:grid;gap:16px} #wfSales .ws-h h3 i{display:none} .wf-pipeh{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin:0 0 12px} .wf-pipeh .btn b{font-family:Jost,system-ui,sans-serif} .wf-seo-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:4px 0 12px} .wf-seo-c{border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;background:#fff;min-width:0} .wf-seo-c .ws-st{margin-top:6px} .wf-seo-c b{display:block;font-family:Jost,system-ui,sans-serif;font-size:.95rem;color:var(--darkest)} .wf-seo-c p{margin:6px 0 10px;color:var(--muted);font-size:.86rem;line-height:1.5} .wf-seo-c .btn{margin-top:4px} /* Meta pages and CRM → Leads are views of the marketing panel: the menu replaces the module's own tab row */ #pg-admin .ad-panel[data-panel="marketing"][data-wf-virt] .mk-tabs{display:none} #pg-admin .ad-panel[data-panel="marketing"][data-wf-virt] .mk-top{justify-content:flex-end} /* Tenders & Quotations, Orders and QMS: the distributor desk's open questions, one click to that desk section */ .wf-desk{margin:0 0 14px} .wf-desk[hidden]{display:none} .wf-deskl{display:inline-flex;align-items:baseline;gap:8px;padding:8px 14px;border:1px solid #F1D3A6;border-radius:var(--r-pill);background:var(--warn-bg);color:#7A4A07;font-family:Jost,system-ui,sans-serif;font-weight:600;font-size:.86rem;text-decoration:none} .wf-deskl:hover{border-color:#E8A33D;color:#5E3905} .wf-deskl:focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* Settings → Integrations: the summary that used to sit on Overview (its «See all» button is this page) */ #wfIntSum{margin:0 0 14px} #wfIntSum:empty{display:none} #wfIntSum .ig-sumrow .btn{display:none} /* ---------------- 7 · areas (Omer 2026-10-02): «Sales & CRM» and «SEO, Meta & Insights» are ONE rail entry each; their pages are a horizontal tab row on top of the work area (admin.js areaBar – drawn for any MENU group with tabs:true). The pages stay in the rail's DOM, hidden (highlight, badges, the task strip), and the entry itself lights up like a page. The row sticks under the bar. ---------------- */ :root{--wf-bar-h:53px} /* the top bar is (nearly) opaque: the sticky filter bar and the area tab row sit right under it, and content scrolling behind a see-through bar showed as ghosts (fix round 2026-10-02) */ #pg-admin .ws-bar{background:rgba(246,250,250,.985)} #pg-admin .ad-rail .ad-nav .ad-grp.wf-area>.ad-grpb{display:none} #pg-admin .ad-rail .ad-grp.wf-area.has-on>.ad-grph{background:rgba(58,192,195,.22);color:#fff;box-shadow:inset 0 0 0 1px rgba(58,192,195,.35)} #pg-admin .ad-rail .ad-grp.wf-area>.ad-grph .ad-badge{margin-left:auto} .wf-abar{position:sticky;top:var(--wf-bar-h);z-index:58;display:flex;flex-direction:column;margin:0 0 20px;padding:10px 0 0;background:rgba(246,250,250,.98);-webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)} .wf-abar[hidden]{display:none} .wf-arow{display:flex;align-items:flex-end;gap:4px 22px;min-width:0} .wf-arl{flex:none;display:inline-flex;align-items:center;gap:8px;padding:0 0 12px;font-family:Jost,system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--deeper);white-space:nowrap} .wf-arl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .wf-tabs{display:flex;align-items:flex-end;gap:2px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none} .wf-tabs::-webkit-scrollbar{display:none} .wf-tab{flex:none;display:inline-flex;align-items:center;gap:7px;margin-bottom:-1px;padding:8px 14px 11px;border-bottom:2px solid transparent;border-radius:9px 9px 0 0;color:var(--muted);font-family:Jost,system-ui,sans-serif;font-size:.92rem;font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap;transition:color .15s,background .15s,border-color .15s} .wf-tab:hover{color:var(--darkest);background:rgba(255,255,255,.75)} .wf-tab.on{color:var(--darkest);font-weight:600;border-bottom-color:var(--deeper)} .wf-tab:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} .wf-tab .ad-badge{min-width:18px;height:18px;font-size:10.5px;padding:0 5px} /* the second row (a sub-area: Meta's pages) – compact pills under the first row, ONE line that scrolls sideways when it does not fit (fix round 2026-10-02: a wrapped second row made the sticky header ~145 px on a 1024 tablet) */ .wf-sub{flex-wrap:nowrap;align-items:center;gap:6px;padding:8px 2px 10px;border-top:1px solid var(--line)} .wf-sub .wf-tab{margin:0;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.82rem;font-weight:500} .wf-sub .wf-tab:hover{border-color:var(--deep);background:#fff} .wf-sub .wf-tab.on{background:var(--deeper);border-color:var(--deeper);color:#fff;font-weight:600} .wf-sub .wf-tab:focus-visible{outline-offset:2px} /* the page header under an area row: the tab names the page already – a slimmer heading */ #pg-admin .wf-abar:not([hidden])~.ad-panel .ad-head{margin-bottom:14px} #pg-admin .wf-abar:not([hidden])~.ad-panel .ad-head h2{font-size:1.3rem;margin-bottom:4px} /* a row that does not fit scrolls sideways (the page never does); its edges fade where there is more to see – admin.js areaFade sets wf-fl (more to the left) and wf-fr (more to the right) */ .wf-tabs.wf-fr{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)} .wf-tabs.wf-fl{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px);mask-image:linear-gradient(to right,transparent,#000 36px)} .wf-tabs.wf-fl.wf-fr{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent)} /* a laptop or tablet: the area name above its tabs, so the tabs have the whole width */ @media (max-width:1279px){ .wf-abar{padding-top:8px} .wf-arow{flex-direction:column;align-items:stretch;gap:0} .wf-arl{padding:0 0 2px} .wf-tab{padding:7px 12px 10px} } @media (max-width:900px){ .wf-abar{margin:0 0 14px;padding-top:6px} .wf-tab{padding:7px 11px 9px;font-size:.88rem} } @media (prefers-reduced-motion:reduce){.wf-tab{transition:none}}