*{box-sizing:border-box;margin:0;padding:0;} html{font-size:15px;} /* Headline/serif font used for view titles. Falls back to Georgia → Times → generic serif until GT Sectra Fine is loaded via @font-face (not yet bundled — it's a licensed font). #view-welcome redefines the same token locally. */ :root{--bbx-font-headline:'GT Sectra Fine','Georgia','Times New Roman',serif;} /* Font for the main interactive buttons (sidebar, customer cards, primary actions). */ :root{--bbx-font-button:'Open Sans',sans-serif;} /* Billbox brand palette as global custom properties. These same tokens already exist locally on #cl-hero-mount and the login pages; promoted to :root so components outside the hero (e.g. the checklist phase tabs) can reference them instead of repeating hex literals. Values are the canonical brand hex — see the palette in CLAUDE.md. */ :root{ --bbx-purple:#5632BE; --bbx-orange:#E7A022; --bbx-green:#058357; --bbx-black:#1F1F1F; --bbx-white:#FFFFFF; --bbx-gray-light:#F5F5F5; --bbx-gray-mid:#888888; --bbx-green-90:#E6F3EE; --bbx-purple-90:#EEEBF8; --bbx-orange-90:#FDF6E9; --bbx-green-40:#6AB59A; } body{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;background:#F3F3F3;color:#1F1F1F;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} /* Sidebar width is driven by a custom property so the topbar logo offset and the main-content inset stay in sync with whichever collapsed/expanded state the sidebar is in. Updated by .sb[data-collapsed="false"] below. */ body.app{--sb-w:64px;--tb-h:80px;padding-top:var(--tb-h);padding-left:var(--sb-w);transition:padding-left .22s cubic-bezier(.4,0,.2,1);} /* Boot guard: prevents the wrong view from being painted before main.js's async bootstrap() knows the user's role. The markup ships with #view-checklist marked .active so customer-role users see their workspace immediately, but for billbox staff that's the WRONG default — they should land on #view-customers. Profile.role lives in public.profiles (not the JWT), so we can't decide the route synchronously. Instead, every .view is hidden while body.booting is set; bootstrap() clears the class right after it activates the correct view. A small spinner stands in so the page doesn't appear blank. */ body.booting .view{display:none !important;} body.booting::after{content:'';position:fixed;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border:3px solid #E2E2E2;border-top-color:#5632BE;border-radius:50%;animation:bbx-boot-spin .8s linear infinite;z-index:50;} @keyframes bbx-boot-spin{to{transform:rotate(360deg);}} /* ── TOP BAR (thin, logo-only) ─────────────────────────────────────────────── */ .topbar{position:fixed;top:0;left:0;right:0;height:var(--tb-h,48px);background:#5632BE;display:flex;align-items:center;gap:10px;padding:0 14px;z-index:101;box-shadow:0 1px 0 rgba(0,0,0,.05);} .topbar-burger{background:transparent;border:none;color:white;cursor:pointer;padding:6px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;transition:background .15s;} .topbar-burger:hover{background:rgba(255,255,255,.12);} .topbar-burger:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(255,255,255,.45);} .topbar-logo{display:block;height:22px;width:auto;} /* Selected-customer name on the right edge, mirroring the logo on the left. margin-left:auto pushes it to the far right of the flex topbar. Sized to sit level with the 22px logo (white, semi-bold). .is-clickable is added by main.js for staff only — it adds the pointer + subtle hover (matching .topbar-burger) and is omitted for customer-role users so the name reads as plain text. */ .topbar-cust{margin-left:auto;margin-right:25px;color:#fff;font-family:sans-serif;font-size:16px;font-weight:100;line-height:22px;text-transform:uppercase;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .topbar-cust[hidden]{display:none;} .topbar-cust.is-clickable{cursor:pointer;padding:5px 10;border-radius:6px;transition:background .15s;} .topbar-cust.is-clickable:hover{background:rgba(255,255,255,.12);} .topbar-cust.is-clickable:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(255,255,255,.45);} /* ── SIDEBAR ───────────────────────────────────────────────────────────────── */ .sb{position:fixed;top:var(--tb-h,48px);left:0;bottom:0;width:var(--sb-w,64px);background:#ECE9F5;display:flex;flex-direction:column;z-index:100;color:#5632BE;overflow:visible;transition:width .22s cubic-bezier(.4,0,.2,1);border-right:1px solid #CDC2EC;} .sb-nav{display:flex;flex-direction:column;gap:2px;padding:10px 8px;} .sb-spacer{flex:1;} .sb-bottom{display:flex;flex-direction:column;gap:2px;padding:10px 8px 14px;border-top:1px solid #CDC2EC;} /* Generic sidebar item. Icon-only by default; .sb-label only shows when the sidebar is expanded. Hover/active states match the existing tab-btn feel. */ .sb-item{background:transparent;border:none;cursor:pointer;color:rgba(86,50,190,.72);font-family:inherit;font-size:13px;font-weight:500;padding:9px 12px;border-radius:8px;display:flex;align-items:center;gap:12px;width:100%;text-align:left;white-space:nowrap;overflow:hidden;transition:background .15s,color .15s;position:relative;} /* Override the default [hidden] behaviour — class selector `display:flex` would otherwise win against the UA `[hidden]{display:none}` rule, so items that customers.js sets to hidden=true would still render. */ .sb-item[hidden]{display:none;} /* Animated show/hide for the sidebar items that toggle at RUNTIME for a multi-company customer: Home + Checklist appear inside a workspace and disappear on the company-selection view. [hidden] is display:none and can't transition, so setSidebarItemVisible() (main.js) drives these classes instead: .sb-anim installs the transition + a max-height ceiling (~46px, just above the ~40px natural item height); .sb-anim-out is the collapsed/faded end state that lets the items below slide up. The element is only set [hidden] once the collapse transition has finished. Two classes beat the single-class base rules without !important. */ .sb-item.sb-anim{transition:opacity .18s ease, max-height .24s ease, padding-top .24s ease, padding-bottom .24s ease;max-height:46px;} .sb-item.sb-anim.sb-anim-out{opacity:0;max-height:0;padding-top:0;padding-bottom:0;pointer-events:none;} /* Documents is normally overflow:visible so its count badge can poke outside the button; during the collapse animation that would defeat the max-height clip, so force overflow:hidden while .sb-anim is present (the ID+class beats #sb-item- documents). setSidebarItemVisible() drops .sb-anim after the fade-in, restoring overflow:visible so the badge shows again. */ #sb-item-documents.sb-anim{overflow:hidden;} @media (prefers-reduced-motion: reduce){ .sb-item.sb-anim{transition:none;} } .sb-item:hover{background:rgba(86,50,190,.10);color:#4828A0;} .sb-item.active{background:rgba(86,50,190,.16);color:#3F228F;} .sb-item.active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;background:#5632BE;border-radius:0 3px 3px 0;} .sb-item:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(86,50,190,.45);} /* Document-count badge on the Documents sidebar item. Visual tokens (background, color, border, font, radius) mirror .notes-count on the floating notes FAB so users see a single badge style throughout the app. Anchored to the icon's top-right corner. Hidden by default; BillboxDocuments.refreshBadge() toggles .vis when the count is > 0. Parent button needs overflow:visible because the badge intentionally pokes outside the button bounds (same trick as notes-count). Scoped to #sb-item-documents so OTHER items keep their overflow:hidden and long labels still ellipsis cleanly. */ #sb-item-documents{overflow:visible;} .sb-item .sb-badge{position:absolute;top:-2px;left:28px;background:#E7A022;color:#3B2200;border-radius:100px;font-size:10px;font-weight:700;padding:2px 6px;min-width:20px;text-align:center;border:2px solid #ECE9F5;display:none;line-height:1.2;} .sb-item .sb-badge.vis{display:inline-block;} .sb-icon{flex-shrink:0;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:currentColor;} .sb-icon svg{display:block;width:22px;height:22px;} .sb-label{font-size:13px;line-height:1;opacity:0;transition:opacity .15s;pointer-events:none;} .sb[data-collapsed="false"] .sb-label{opacity:1;pointer-events:auto;} /* Language switcher: small popover anchored to the item. When the sidebar is collapsed the popover floats to the right of the icon; when expanded it drops underneath. */ .sb-lang-wrap{position:relative;padding:0 8px;} .sb-lang-btn .sb-label{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.04em;} .sb-lang-pop{position:absolute;left:calc(100% + 6px);bottom:0;background:white;color:#1F1F1F;border-radius:10px;border:.5px solid #E2E2E2;box-shadow:0 10px 28px rgba(31,31,31,.18);padding:6px;display:flex;flex-direction:column;gap:2px;min-width:170px;z-index:120;} .sb-lang-pop[hidden]{display:none;} .sb[data-collapsed="false"] .sb-lang-pop{left:8px;right:8px;bottom:calc(100% + 6px);} .sb-lang-opt{background:transparent;border:none;cursor:pointer;font-family:inherit;font-size:13px;color:#1F1F1F;padding:7px 10px;border-radius:7px;text-align:left;transition:background .12s;} .sb-lang-opt:hover{background:#F2F0F9;} .sb-lang-opt.active{background:#EEEBF8;color:#5632BE;font-weight:600;} /* Profile circle — always shows the initial; the customer-name label next to it follows the same opacity-driven show/hide as .sb-label so it only renders when the sidebar is expanded. Gap matches sidebar items (12px). */ .sb-profile{position:relative;display:flex;align-items:center;gap:12px;padding:4px 10px;overflow:hidden;cursor:pointer;border-radius:8px;transition:background .15s;} .sb-profile:hover{background:rgba(86,50,190,.10);} .sb-profile:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(86,50,190,.45);} .sb-profile.active{background:rgba(86,50,190,.16);} .sb-avatar{width:32px;height:32px;border-radius:50%;background:#5632BE;color:white;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;text-transform:uppercase;transition:transform .15s;} .sb-profile:hover .sb-avatar{transform:scale(1.06);} .sb-profile-name{font-size:13px;font-weight:500;color:#3F228F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .15s;pointer-events:none;} .sb[data-collapsed="false"] .sb-profile-name{opacity:1;pointer-events:auto;} /* ── Collapsed-sidebar tooltips ───────────────────────────────────────────── When the sidebar is collapsed the .sb-label text is hidden (opacity:0), so every item carries a .sb-tip bubble that fades in to the right on hover with a small arrow pointing back at the icon. Reuses the brand purple (#5632BE) and the same shadow language as the language popover (.sb-lang-pop). The bubble lives INSIDE the item — which is overflow:hidden to clip the label during the width transition — so we flip overflow:visible on hover to let the bubble escape. That's safe because the label is invisible while collapsed. Tips never appear when expanded (labels are already visible). */ .sb-tip{ position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%); background:#5632BE;color:#fff;font-size:12px;font-weight:500;line-height:1; white-space:nowrap;padding:7px 10px;border-radius:7px; box-shadow:0 6px 18px rgba(31,31,31,.22); opacity:0;pointer-events:none;z-index:130;transition:opacity .15s ease; } /* Arrow — own pseudo on .sb-tip so it never clashes with .sb-item.active::before. */ .sb-tip::before{ content:'';position:absolute;right:100%;top:50%;transform:translateY(-50%); border:5px solid transparent;border-right-color:#5632BE; } /* Only when collapsed: let the bubble escape the clipped item and fade it in. */ .sb[data-collapsed="true"] .sb-item:hover, .sb[data-collapsed="true"] .sb-profile:hover{overflow:visible;} .sb[data-collapsed="true"] .sb-item:hover .sb-tip, .sb[data-collapsed="true"] .sb-profile:hover .sb-tip{opacity:1;} /* ── VIEWS ── */ .view{display:none;} .view.active{display:block;} /* ── FLOATING NOTES & QUESTIONS TRIGGER ───────────────────────────────────── */ .notes-fab{position:fixed;right:20px;bottom:24px;width:52px;height:52px;border-radius:50%;background:#5632BE;color:white;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(86,50,190,.32);z-index:150;transition:transform .15s,box-shadow .15s,background .15s;} .notes-fab:hover{background:#4828A0;box-shadow:0 10px 26px rgba(86,50,190,.42);transform:translateY(-1px);} .notes-fab:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(86,50,190,.35),0 8px 22px rgba(86,50,190,.32);} .notes-fab[hidden]{display:none;} .notes-fab-icon{display:block;} .notes-fab .notes-count{position:absolute;top:-4px;right:-4px;background:#E7A022;color:#3B2200;border-radius:100px;font-size:10px;font-weight:700;padding:2px 6px;min-width:20px;text-align:center;border:2px solid white;display:none;} .notes-fab .notes-count.vis{display:inline-block;} /* ── CUSTOMERS LANDING VIEW (staff) ── */ .cust-wrap{max-width:1040px;margin:0 auto;padding:1.5rem 1.25rem;} .cust-hdr{margin-bottom:1.25rem;} .cust-title{font-family:var(--bbx-font-headline);font-size:24px;font-weight:700;color:#5632BE;} .cust-subtitle{font-size:13px;color:#666;margin-top:4px;} /* Grid of customer cards: 3 columns on desktop, fewer on narrower screens, with equal horizontal + vertical gaps. */ .cust-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} @media(max-width:860px){.cust-list{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.cust-list{grid-template-columns:1fr;}} /* Card: globe icon + uppercase name on a light-gray fill (no border/shadow). On hover the fill lightens to the established brand-purple tint (#ECE9F5) and a solid brand-purple bar (#5632BE) fades in on the left edge. position:relative + overflow:hidden anchor and clip that bar to the rounded corners. */ .cust-card{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;background:#FFFFFF;border:none;border-radius:12px;padding:18px 20px;cursor:pointer;text-align:left;transition:background .15s;} /* display:flex above overrides the default [hidden]{display:none}; re-assert it (higher specificity) so a card can actually be hidden — e.g. the Add-test-users card when ENABLE_PASSWORD_LOGIN is off. */ .cust-card[hidden]{display:none;} .cust-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:#5632BE;opacity:0;transition:opacity .15s;} .cust-card:hover{background:#ECE9F5;} .cust-card:hover::before{opacity:1;} .cust-card-icon{flex-shrink:0;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;color:#5632BE;} .cust-card-icon svg{display:block;width:26px;height:26px;} .cust-card-text{min-width:0;display:flex;flex-direction:column;gap:2px;} .cust-card-name{min-width:0;font-size:12px;font-weight:700;color:#1a1a1a;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .cust-card-sub{min-width:0;font-size:11px;font-weight:400;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .cust-empty{grid-column:1/-1;text-align:center;padding:3rem 1rem;color:#888;font-size:14px;background:#FAFAFA;border-radius:12px;border:.5px dashed #D0D0D0;} /* Archived workspaces section (below the active grid in the staff picker). */ .cust-archived{margin-top:2.25rem;} .cust-archived-hdr{margin-bottom:1.25rem;} .cust-section-title{font-size:18px;} /* Archived cards: muted (faded + grey accent) so they read as inactive, but still fully clickable — staff retain full access. An "Archived" badge sits top-right. */ .cust-card-archived{background:#FAFAFA;} .cust-card-archived .cust-card-icon,.cust-card-archived .cust-card-name{color:#888;} .cust-card-archived::before{background:#B0B0B0;} .cust-card-archived:hover{background:#F0F0F0;} .cust-card-badge{position:absolute;top:10px;right:12px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#888;background:#EAEAEA;border-radius:100px;padding:2px 8px;} /* ── CHECKLIST LAYOUT ── */ .cl-wrap{max-width:1080px;margin:0 auto;padding:1.5rem 1.25rem;} /* ── HERO WELCOME MOUNT (customer-only) ── */ /* Wrapper for the shared billbox hero (scripts/hero.js) at the top of the customer checklist view. Mirrors the home view's .lp-wrap exactly (same 1080px width, rounding, shadow). The brand tokens below are otherwise scoped to #view-welcome, so without them the nested .bbx-hero would render with no purple background and the wrong font colours here — they're redeclared on this mount ONLY, so they do not leak into the rest of the checklist view. Removed at boot for staff. */ #cl-hero-mount{ --bbx-purple:#5632BE; --bbx-orange:#E7A022; --bbx-green:#058357; --bbx-black:#1F1F1F; --bbx-white:#FFFFFF; --bbx-gray-light:#F5F5F5; --bbx-gray-mid:#888888; --bbx-green-90:#E6F3EE; --bbx-purple-90:#EEEBF8; --bbx-orange-90:#FDF6E9; --bbx-green-40:#6AB59A; --bbx-font-headline:'GT Sectra Fine','Georgia','Times New Roman',serif; --bbx-font-body:'Inter','Helvetica Neue','Arial',sans-serif; max-width:1080px;margin:1.5rem auto;border-radius:14px;overflow:hidden;box-shadow:0 4px 24px rgba(31,31,31,.06);border:.5px solid #E2E2E2; } #cl-hero-mount:empty{display:none;} /* ── PROGRESS CARD ── */ .prog-card{background:white;border-radius:12px;padding:1.25rem 1.5rem;margin-bottom:1rem;border:.5px solid #E2E2E2;} .prog-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.7rem;} .prog-lbl{font-size:13px;color:#666;} .prog-pct{font-size:22px;font-weight:600;color:#058357;} .prog-track{background:#E6F3EE;border-radius:100px;height:7px;overflow:hidden;} .prog-fill{height:7px;background:#058357;border-radius:100px;transition:width .4s ease;} .prog-pills{display:flex;gap:8px;margin-top:.75rem;flex-wrap:wrap;} .pill{font-size:11px;padding:3px 10px;border-radius:100px;display:flex;align-items:center;gap:5px;} .pill-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;} .pill-o{background:#F0F0F0;color:#666;}.pill-o .pill-dot{background:#bbb;} .pill-a{background:#FDF6E9;color:#9A6600;border:1px solid #F1C67A;}.pill-a .pill-dot{background:#E7A022;} .pill-d{background:#E6F3EE;color:#037046;}.pill-d .pill-dot{background:#058357;} /* ── MILESTONE CARD ── */ .milestone-card{background:#FFF8EC;border-radius:12px;padding:1.25rem 1.5rem;margin-bottom:1rem;border:1px solid #F1C67A;} .ms-hdr{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.2rem;cursor:pointer;user-select:none;gap:12px;} .ms-title{font-size:13px;font-weight:600;color:#7A5000;} .ms-hdr-right{display:flex;align-items:center;gap:10px;} .ms-pct{font-size:20px;font-weight:600;color:#E7A022;} .ms-toggle{font-size:12px;color:#E7A022;transition:transform .2s;} .ms-toggle.open{transform:rotate(180deg);} .ms-body{display:none;} .ms-body.open{display:block;} .ms-sub{font-size:12px;color:#A07030;margin-bottom:.75rem;} .ms-track{background:#F1C67A;border-radius:100px;height:5px;overflow:hidden;margin-bottom:.875rem;opacity:.5;} .ms-fill{height:5px;background:#E7A022;border-radius:100px;transition:width .4s ease;} .ms-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px;} .ms-item{display:flex;align-items:center;gap:8px;padding:.5rem .75rem;border-radius:8px;background:rgba(255,255,255,.7);border:.5px solid #F1C67A;min-width:0;} .ms-item.ms-done-item{background:rgba(230,243,238,.6);border-color:#6AB59A;} .ms-star{font-size:13px;flex-shrink:0;} .ms-info{flex:1;min-width:0;} .ms-name{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .ms-phase{font-size:10px;color:#B09050;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .ms-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0;} .ms-status-b{font-size:11px;font-weight:500;padding:2px 9px;border-radius:100px;white-space:nowrap;} .mss-d{background:#E6F3EE;color:#037046;} .mss-a{background:#FDF6E9;color:#9A6600;border:1px solid #F1C67A;} .mss-o{background:rgba(0,0,0,.06);color:#777;} .ms-due-lbl{font-size:10px;color:#B09050;} .ms-due-lbl.ov{color:#E53E3E;font-weight:600;} .ms-empty{font-size:13px;color:#C0A060;text-align:center;padding:.5rem;} /* ── ZERTIFIKAT-SCHRITT ── */ .cert-step{background:linear-gradient(135deg,#EEEBF8 0%,#FDF6E9 100%);border:1.5px solid #CDC2EC;border-radius:12px;padding:1.25rem 1.5rem;margin-top:1.5rem;} .cert-step .step-num{background:#5632BE;color:white;} .cert-step .step-title{color:#5632BE;font-weight:700;} .cert-mail-btn{display:inline-flex;align-items:center;gap:7px;background:#5632BE;color:white;border:none;border-radius:100px;padding:8px 18px;font-size:13px;font-weight:500;cursor:pointer;margin-top:10px;text-decoration:none;transition:background .15s;} .cert-mail-btn:hover{background:#4526A0;} /* ── END-OF-ONBOARDING: congrats + certificate request states ── */ .congrats-card{background:linear-gradient(135deg,#EEEBF8 0%,#EAF7F0 100%);} .congrats-card .step-num{background:#058357;} .congrats-card .step-title{color:#037046;} .cert-pending-tag{display:inline-block;margin-top:10px;padding:5px 12px;border-radius:100px;background:#FDF6E9;border:1px solid #F1C67A;color:#9A5800;font-size:12px;font-weight:600;} .cert-reject-reason{margin-top:10px;padding:10px 14px;border-radius:8px;background:#FDF2F2;border:.5px solid #F4C9C9;color:#9B1C1C;font-size:13px;line-height:1.55;} /* ── FEEDBACK SURVEY (customer) ── */ .survey-card{background:white;border:1.5px solid #E2E2E2;} .sv-hdr{background:#5632BE;border-radius:10px;padding:1.5rem 1.5rem 1.25rem;margin-bottom:1rem;} .sv-eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#E7A022;margin-bottom:8px;} .sv-title{font-family:var(--bbx-font-headline,Georgia,serif);font-size:22px;font-weight:700;color:white;line-height:1.25;margin-bottom:8px;} .sv-sub{font-size:13px;color:rgba(255,255,255,.8);line-height:1.6;} .sv-intro{font-size:13px;color:#555;line-height:1.6;margin-bottom:1rem;} .sv-pillar{border:.5px solid #E2E2E2;border-radius:10px;margin-bottom:.875rem;overflow:hidden;} .sv-p-hdr{padding:.875rem 1.25rem .5rem;display:flex;gap:12px;align-items:flex-start;} .sv-stripe{width:4px;border-radius:2px;align-self:stretch;flex-shrink:0;margin-top:2px;} .sv-stripe.pu{background:#5632BE;} .sv-stripe.gr{background:#058357;} .sv-stripe.or{background:#E7A022;} .sv-p-title{font-size:14px;font-weight:700;color:#1F1F1F;margin-bottom:3px;} .sv-p-promise{font-size:12px;font-style:italic;} .sv-p-promise.pu{color:#5632BE;} .sv-p-promise.gr{color:#058357;} .sv-p-promise.or{color:#B07010;} .sv-p-body{padding:0 1.25rem 1.25rem;} .sv-row{margin-bottom:.875rem;} .sv-q-lbl{font-size:12px;color:#444;margin-bottom:.55rem;line-height:1.5;font-weight:500;} .sv-btns{display:flex;gap:5px;flex-wrap:wrap;} .sv-rb{flex:1;min-width:44px;background:none;border:1.5px solid #E0E0E0;border-radius:8px;cursor:pointer;font-size:11px;font-weight:500;padding:7px 4px;color:#888;transition:all .15s;font-family:inherit;line-height:1.35;text-align:center;} .sv-rb:hover{border-color:#aaa;background:#FAFAFA;color:#333;} .sv-rb-lbl{font-size:10px;opacity:.75;} .sv-rb.on-pu{background:#EEEBF8;border-color:#9A85D8;color:#5632BE;font-weight:700;} .sv-rb.on-gr{background:#E6F3EE;border-color:#6AB59A;color:#037046;font-weight:700;} .sv-rb.on-or{background:#FDF6E9;border-color:#F1C67A;color:#9A5800;font-weight:700;} .sv-divider{height:.5px;background:#EFEFEF;margin:0 0 .875rem;} .sv-ta{margin-top:.25rem;} .sv-ta-lbl{font-size:12px;color:#555;margin-bottom:.4rem;} .sv-opt{font-size:11px;color:#bbb;} .sv-ta textarea{width:100%;border:1.5px solid #E2E2E2;border-radius:8px;font-family:inherit;font-size:13px;color:#1F1F1F;padding:9px 12px;resize:vertical;min-height:64px;outline:none;line-height:1.6;transition:border .15s;} .sv-ta textarea:focus{border-color:#5632BE;} .sv-sub-row{display:flex;align-items:center;gap:12px;margin-top:1rem;flex-wrap:wrap;} .sv-sub-btn{background:#058357;color:white;border:none;border-radius:100px;padding:10px 26px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s;} .sv-sub-btn:hover:not(:disabled){background:#046b47;} .sv-sub-btn:disabled{background:#C8C8C8;cursor:not-allowed;} .sv-note{font-size:12px;color:#888;} .sv-error{margin-top:10px;padding:9px 12px;border-radius:8px;background:#FDF2F2;border:.5px solid #F4C9C9;color:#9B1C1C;font-size:12px;} /* ── STAFF: certificates requested view ── */ .cert-req-list{margin-top:1.25rem;display:flex;flex-direction:column;gap:.875rem;} .cert-req-empty{padding:2rem 1rem;text-align:center;color:#888;font-size:13px;} .cert-req-card{background:white;border:.5px solid #E2E2E2;border-radius:12px;padding:1.1rem 1.25rem;transition:opacity .15s;} .cert-req-card.is-busy{opacity:.55;} .cert-req-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;} .cert-req-name{font-size:15px;font-weight:700;color:#5632BE;} .cert-req-meta{font-size:11px;color:#999;} .cert-req-msg{font-size:13px;color:#444;margin:6px 0 12px;line-height:1.5;} .cert-req-actions{display:flex;gap:8px;flex-wrap:wrap;} .cert-req-btn{border:none;border-radius:100px;padding:8px 18px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s;} .cert-req-btn:disabled{opacity:.6;cursor:not-allowed;} .cert-req-accept{background:#058357;color:white;} .cert-req-accept:hover:not(:disabled){background:#046b47;} .cert-req-reject{background:white;color:#B33A3A;border:1.5px solid #F4C9C9;} .cert-req-reject:hover:not(:disabled){background:#FDF2F2;} .cert-req-reject-box{margin-top:12px;padding-top:12px;border-top:.5px solid #EFEFEF;} .cert-req-reason{width:100%;border:1.5px solid #E2E2E2;border-radius:8px;font-family:inherit;font-size:13px;padding:9px 12px;resize:vertical;min-height:56px;outline:none;line-height:1.55;} .cert-req-reason:focus{border-color:#B33A3A;} .cert-req-reject-actions{display:flex;gap:8px;margin-top:8px;justify-content:flex-end;} .cert-req-reject-cancel{background:#F3F3F3;color:#444;} .cert-req-reject-cancel:hover:not(:disabled){background:#E7E7E7;} .cert-req-reject-confirm{background:#C0392B;color:white;} .cert-req-reject-confirm:hover:not(:disabled){background:#9B1C1C;} /* ── BADGE UNLOCK PANEL ── */ .badge-unlock{display:none;margin-top:1.5rem;background:white;border-radius:14px;border:1.5px solid #058357;padding:1.5rem;} .badge-unlock.vis{display:block;} .badge-unlock-hdr{display:flex;align-items:center;gap:12px;margin-bottom:1rem;} .badge-unlock-icon{width:40px;height:40px;border-radius:50%;background:#058357;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;} .badge-unlock-title{font-size:16px;font-weight:700;color:#1F1F1F;} .badge-unlock-sub{font-size:13px;color:#666;margin-top:2px;} .badge-dl-grid{display:flex;justify-content:center;margin-top:1rem;} .badge-dl-card{border:.5px solid #E2E2E2;border-radius:10px;padding:1.25rem;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;width:100%;max-width:460px;} .badge-dl-canvas{border-radius:8px;width:100%;max-width:420px;height:auto;} .badge-dl-btn{background:#5632BE;color:white;border:none;border-radius:100px;padding:9px 24px;font-size:13px;font-weight:500;cursor:pointer;width:100%;transition:background .15s;} .badge-dl-btn:hover{background:#4526A0;} .cert-unavailable{margin-top:1rem;padding:1rem 1.25rem;border-radius:8px;background:#FDF6E9;border:.5px solid #F1C67A;color:#9A5800;font-size:13px;line-height:1.55;text-align:center;} .badge-guide-note{margin-top:1rem;font-size:12px;color:#555;background:#F7F6FD;border-radius:8px;padding:.75rem 1rem;border-left:3px solid #5632BE;line-height:1.7;} /* ── BADGE PANEL ── */ .badge-panel{background:white;border-radius:12px;border:.5px solid #E2E2E2;padding:1.25rem 1.5rem;margin-bottom:1.5rem;} .badge-panel-hdr{display:flex;align-items:center;justify-content:space-between;cursor:pointer;gap:12px;user-select:none;} .badge-panel-title{font-size:13px;font-weight:600;color:#1F1F1F;display:flex;align-items:center;gap:8px;} .badge-panel-title-icon{width:22px;height:22px;border-radius:50%;background:#5632BE;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;color:white;} .badge-panel-toggle{font-size:12px;color:#aaa;transition:transform .2s;} .badge-panel-toggle.open{transform:rotate(180deg);} .badge-panel-body{margin-top:1rem;display:none;} .badge-panel-body.open{display:block;} .badge-panel-intro{font-size:13px;color:#555;line-height:1.65;margin-bottom:1rem;} .badge-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;} @media(max-width:580px){.badge-tiers{grid-template-columns:1fr;}} .badge-tier{border-radius:10px;padding:1rem;border:.5px solid #E2E2E2;display:flex;flex-direction:column;gap:6px;} .badge-tier-top{display:flex;align-items:center;gap:10px;} .badge-tier-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;font-weight:700;color:white;} .bt-expert .badge-tier-dot{background:#058357;} .bt-specialist .badge-tier-dot{background:#E7A022;} .bt-partner .badge-tier-dot{background:#5632BE;} .badge-tier-name{font-size:13px;font-weight:600;color:#1F1F1F;} .badge-tier-stars{font-size:11px;color:#E7A022;letter-spacing:2px;} .badge-tier-desc{font-size:12px;color:#666;line-height:1.6;} .badge-tier-steps{margin-top:4px;} .badge-tier-steps-lbl{font-size:11px;font-weight:500;color:#888;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;} .badge-step-tag{display:inline-block;font-size:11px;background:#F2F0F9;color:#5632BE;border-radius:100px;padding:2px 9px;margin:2px 2px 2px 0;border:.5px solid #CDC2EC;} .badge-step-tag.aha{background:#FDF6E9;color:#9A6600;border-color:#F1C67A;} .badge-confirm-note{margin-top:1rem;font-size:12px;color:#888;line-height:1.6;background:#F7F6FD;border-radius:8px;padding:.75rem 1rem;border-left:3px solid #5632BE;} /* ── RESOURCE BANNER – 4 Boxen ── */ .res-banner{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:1.75rem;} @media(max-width:880px){.res-banner{grid-template-columns:repeat(2,1fr);}} @media(max-width:540px){.res-banner{grid-template-columns:1fr;}} .res-card{border-radius:10px;padding:1rem 1.125rem;display:flex;align-items:flex-start;gap:12px;text-decoration:none;transition:transform .15s,box-shadow .15s;border:.5px solid transparent;cursor:pointer;} .res-card:hover{transform:translateY(-2px);} .res-card.rc-hc{background:#EEEBF8;border-color:#CDC2EC;} .res-card.rc-pod{background:#E6F3EE;border-color:#6AB59A;} .res-card.rc-sup{background:#FDF6E9;border-color:#F1C67A;} .res-card.rc-hebel{background:#F0EDFC;border-color:#9A85D8;} .res-icon{font-size:22px;flex-shrink:0;margin-top:1px;} .res-body{} .res-title{font-size:13px;font-weight:600;margin-bottom:3px;} .res-sub{font-size:11px;color:#666;line-height:1.4;} .rc-hc .res-title{color:#5632BE;} .rc-pod .res-title{color:#037046;} .rc-sup .res-title{color:#9A6600;} .rc-hebel .res-title{color:#5632BE;} .pod-links{display:flex;gap:6px;margin-top:5px;} .pod-pill{font-size:10px;font-weight:600;padding:2px 8px;border-radius:100px;text-decoration:none;transition:opacity .15s;} .pod-pill:hover{opacity:.8;} .pod-pill-web{background:#058357;color:white;} .pod-pill-spot{background:#1DB954;color:white;} /* ── PHASE STEPPER (checklist view — customer + staff) ── A horizontal progress stepper, one node per phase, that doubles as the phase selector. Each node is an equal-width flex column: a connector line, a circular dot (step number, or a check once the phase is complete), and the DB phase name below. Node states, layered on one another: • upcoming (default) — white dot, lavender ring, muted purple number • is-selected — the phase being viewed: filled purple dot + halo ring, dark bold label • is-done — every step in the phase done: green dot + white check The two connector halves inside a node (line-left / line-right) turn purple (.is-complete) once the phase to their left is done, so the track fills left-to-right as phases finish. Colours are the brand tokens only. */ .cl-phase-steps{display:flex;align-items:flex-start;margin-bottom:1.75rem;} .cl-phase-step{ --dot:30px; /* dot diameter; connector sits at its vertical centre */ flex:1 1 0;min-width:0; display:flex;flex-direction:column;align-items:center; position:relative; padding:0;border:0;background:none;cursor:pointer; font-family:var(--bbx-font-button); } /* Connector: two halves per node, each spanning from the node edge to its centre (where the dot sits), so adjacent halves meet under the midpoint between dots. */ .cl-phase-step-line{position:absolute;top:calc(var(--dot)/2 - 1px);height:2px;background:#D8D8D8;} .cl-phase-step-line.line-left{left:0;right:50%;} .cl-phase-step-line.line-right{left:50%;right:0;} .cl-phase-step-line.is-complete{background:var(--bbx-purple);} .cl-phase-step-dot{ position:relative;z-index:1; width:var(--dot);height:var(--dot);border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:700;line-height:1; background:var(--bbx-white);color:#9A85D8;border:2px solid #CDC2EC; transition:box-shadow .15s ease,border-color .15s ease; } .cl-phase-step-lbl{ margin-top:10px;max-width:100%; font-size:12px;font-weight:400;line-height:1.3;text-align:center;color:var(--bbx-gray-mid); } /* Selected — the phase currently shown. Filled dot + halo ring, emphasised label. */ .cl-phase-step.is-selected .cl-phase-step-dot{background:var(--bbx-purple);color:var(--bbx-white);border-color:var(--bbx-purple);box-shadow:0 0 0 4px var(--bbx-purple-90);} .cl-phase-step.is-selected .cl-phase-step-lbl{color:var(--bbx-black);font-weight:700;} /* Done — every step complete. Green dot + check; layers under selection (a done phase being viewed keeps the green fill and gains the halo from .is-selected). */ .cl-phase-step.is-done .cl-phase-step-dot{background:var(--bbx-green);color:var(--bbx-white);border-color:var(--bbx-green);} .cl-phase-step.is-done .cl-phase-step-lbl{color:#037046;font-weight:400;} .cl-phase-step.is-done.is-selected .cl-phase-step-dot{box-shadow:0 0 0 4px var(--bbx-green-90);} .cl-phase-step.is-done.is-selected .cl-phase-step-lbl{color:#037046;font-weight:700;} /* Hover on a non-selected node — subtle nudge toward the brand purple. */ .cl-phase-step:not(.is-selected):hover .cl-phase-step-dot{border-color:#9A85D8;} .cl-phase-step:not(.is-selected):hover .cl-phase-step-lbl{color:var(--bbx-purple);} /* ── PHASE BLOCKS ── */ .phase-block{margin-bottom:1.5rem;} .phase-hdr{display:flex;align-items:center;gap:10px;margin-bottom:.875rem;} .ph-badge{background:#EEEBF8;color:#5632BE;font-size:10px;font-weight:700;padding:3px 10px;border-radius:100px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;} .ph-lbl{font-family:var(--bbx-font-headline);font-size:18px;font-weight:700;text-transform:lowercase;} .ph-lbl::first-letter{text-transform:uppercase;} .ph-line{flex:1;height:1px;background:#E0E0E0;} /* ── "STEPS DONE" SECTION (customer view, per phase) ── */ .done-section{margin-top:.25rem;} .done-section-hdr{display:flex;align-items:center;gap:10px;padding:.5rem .25rem;} .done-section-title{font-size:12px;font-weight:700;color:#037046;text-transform:uppercase;letter-spacing:.05em;} .done-section-count{background:#E6F3EE;color:#037046;font-size:10px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:100px;display:inline-flex;align-items:center;justify-content:center;} .done-toggle{margin-left:auto;font-size:11px;font-weight:600;color:#058357;cursor:pointer;border:1px solid #A7E0C6;background:#EAF7F0;border-radius:100px;font-family:inherit;padding:3px 12px;transition:background .15s,border-color .15s;} .done-toggle:hover{background:#E6F3EE;border-color:#6AB59A;} .done-section-body{display:none;} .done-section.open .done-section-body{display:block;} /* ── STEP CARDS ── */ .step-card{background:white;border-radius:10px;margin-bottom:.5rem;border:.5px solid #E5E5E5;border-left:3px solid transparent;transition:border-left-color .2s;} .step-card.s-done{border-left-color:#058357;} .step-card.s-arbeit{border-left-color:#E7A022;} .step-card.s-overdue{border-left-color:#E53E3E !important;} .step-main{display:flex;align-items:flex-start;gap:.875rem;padding:.875rem 1.125rem;} .step-num{font-size:12px;color:#bbb;min-width:22px;padding-top:2px;flex-shrink:0;} .step-body{flex:1;min-width:0;} .step-title-row{display:flex;align-items:center;gap:6px;margin-bottom:3px;flex-wrap:wrap;} .step-title{font-size:14px;font-weight:500;} /* Subtitle line under the title row. Reuses the muted secondary-text colour (#777, same as .step-desc) and the small 12px size — softer than the title. */ .step-subtitle{font-size:12px;font-weight:400;color:#777;line-height:1.4;margin-bottom:4px;} .aha-badge{display:inline-flex;align-items:center;gap:2px;font-size:10px;font-weight:600;background:#FDF6E9;color:#9A6600;border:1px solid #F1C67A;border-radius:100px;padding:2px 8px;white-space:nowrap;} .custom-step-badge{display:inline-block;font-size:11px;font-weight:500;background:#5632BE;color:#fff;border-radius:100px;padding:2px 8px;white-space:nowrap;line-height:1.4;} /* Value label — chip after the step title. Background/text follow the value's colour family (trust=green, connect=purple, grow=orange). Reuses the existing .step-title-row flex wrapper, so it wraps below long titles like the other badges. */ .value-chip{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:3px;white-space:nowrap;flex-shrink:0;} .value-chip-prefix{font-size:9px;font-weight:400;opacity:.7;} .value-chip-name{font-size:9px;font-weight:700;letter-spacing:.02em;} .value-compliance,.value-security{background:#E6F3EE;color:#035f3e;} .value-transparency,.value-partnership{background:#EEEBF8;color:#4a3a9e;} .value-efficiency,.value-scalability{background:#FDF6E9;color:#7a4800;} /* Medium chip — delivery-channel label. Same pill footprint as .value-chip. One colour per medium; to recolour a medium, edit the rule below (single source of truth). Class names come from MEDIUM_CLASS in checklist.js. */ .medium-chip{display:inline-flex;align-items:center;font-size:9px;font-weight:700;letter-spacing:.02em;padding:1px 7px;border-radius:3px;white-space:nowrap;flex-shrink:0;background:#F3F3F3;color:#4A4A4A;} .medium-setup{background:#5632BE;color:#FFFFFF;} .medium-onboarding{background:#EEEBF8;color:#4A3A9E;} .medium-call{background:#FDF6E9;color:#7A4800;} .medium-selfservice{background:#E6F3EE;color:#035F3E;} .medium-checkin{background:#E0F0EE;color:#0A6157;} .medium-training{background:#E5EDF8;color:#1F4E79;} .medium-email{background:#F3F3F3;color:#4A4A4A;} .medium-application{background:#FBEAEA;color:#B33A3A;} .delete-step-btn{display:inline-block;font-size:11px;font-weight:500;background:#FBEAEA;color:#B33A3A;border:none;border-radius:100px;padding:2px 8px;white-space:nowrap;line-height:1.4;cursor:pointer;font-family:inherit;transition:background .15s;} .delete-step-btn:hover{background:#F4CFCF;} .delete-step-btn:disabled{opacity:.55;cursor:wait;} .step-desc{font-size:12px;color:#777;line-height:1.5;margin-bottom:6px;} /* Description is hidden by default and only filled when expanded — collapse the empty element so it leaves no gap between the title row and the meta row. Same for the configuration list's .cfg-step-desc. */ .step-desc:empty,.cfg-step-desc:empty{display:none;} .step-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;} .ow-tag{font-size:11px;font-weight:500;padding:2px 8px;border-radius:100px;} .ow-bbx{background:#5632BE;color:white;} .ow-kd{background:#058357;color:white;} .hc-link{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#9A85D8;text-decoration:none;border:.5px solid #CDC2EC;border-radius:100px;padding:2px 8px;transition:all .15s;} .hc-link:hover{background:#EEEBF8;color:#5632BE;border-color:#9A85D8;} .hc-link-icon{font-size:10px;} .note-toggle{font-size:11px;color:#9A85D8;cursor:pointer;border:none;background:none;font-family:inherit;padding:0;transition:color .15s;} .note-toggle:hover{color:#5632BE;} /* "Show more / Show less" toggle for the step description. Now sits on the title row (checklist .step-title-row / config .cfg-step-title) rather than inside the description text, so it uses a fixed small size and reads as a secondary link. Shared by both views. */ .desc-toggle{display:inline;font-size:11px;color:#5632BE;cursor:pointer;border:none;background:none;font-family:inherit;padding:0;margin-left:4px;font-weight:600;white-space:nowrap;} .desc-toggle:hover{text-decoration:underline;} .due-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 8px;border-radius:100px;background:#F5F5F5;color:#666;white-space:nowrap;} .due-tag.overdue{background:#FFF0EE;color:#C0392B;border:.5px solid #E5A09A;font-weight:500;} .upload-btn{font-size:11px;color:#9A85D8;cursor:pointer;border:none;background:none;font-family:inherit;padding:0;transition:color .15s;display:inline-flex;align-items:center;gap:3px;} .upload-btn:hover{color:#5632BE;} .tpl-dl-btn{font-size:11px;color:#5632BE;cursor:pointer;border:none;background:none;font-family:inherit;padding:0;transition:color .15s;display:inline-flex;align-items:center;gap:3px;font-weight:500;} .tpl-dl-btn:hover{color:#4828A0;text-decoration:underline;} .tpl-dl-btn:disabled{color:#CDC2EC;cursor:wait;} .upload-badge{background:#EEEBF8;color:#5632BE;border-radius:100px;font-size:10px;font-weight:600;padding:0 5px;margin-left:1px;} .step-actions{display:flex;align-items:flex-start;gap:8px;flex-shrink:0;padding-top:1px;} .status-btn{border:none;border-radius:100px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:500;padding:5px 13px;transition:all .18s;white-space:nowrap;} .sb-o{background:#F0F0F0;color:#666;} .sb-o:not(:disabled):hover{background:#E4E4E4;} .sb-a{background:#FDF6E9;color:#9A6600;border:1px solid #E7A022;} .sb-a:not(:disabled):hover{background:#FBF0D8;} .sb-d{background:#058357;color:white;} .sb-d:not(:disabled):hover{background:#046B48;} /* Owner-gated lock for customer view (set in checklist.js via the disabled attribute). Forbidden cursor on hover + slight dim so it's visually clear the control is inactive; hover-color rules above are suppressed by :not(:disabled). */ .status-btn:disabled{cursor:not-allowed;opacity:.55;} .note-area{display:none;padding:.125rem 1.125rem .875rem 3.625rem;} .note-area.open{display:block;} .note-input{width:100%;border:.5px solid #D8D8D8;border-radius:8px;font-family:inherit;font-size:13px;color:#1F1F1F;padding:.6rem .75rem;resize:vertical;min-height:64px;outline:none;transition:border-color .15s;background:#FAFAFA;} .note-input:focus{border-color:#9A85D8;background:white;} .note-actions{display:flex;gap:8px;margin-top:6px;} .note-update-btn{display:inline-flex;align-items:center;background:#5632BE;color:#fff;border:none;border-radius:100px;font-family:inherit;font-size:12px;font-weight:500;padding:5px 13px;cursor:pointer;transition:background .15s;} .note-update-btn:hover{background:#4828A0;} .note-update-btn:disabled{background:#CDC2EC;cursor:not-allowed;} .note-erase-btn{display:inline-flex;align-items:center;background:transparent;color:#C0392B;border:.5px solid #E5A09A;border-radius:100px;font-family:inherit;font-size:12px;font-weight:500;padding:5px 13px;cursor:pointer;transition:all .15s;} .note-erase-btn:hover{background:#FFF0EE;} .note-erase-btn:disabled{color:#E5A09A;cursor:not-allowed;} .hidden{display:none!important;} .upload-inp{display:none;} .file-area{display:none;padding:.5rem 1.125rem .75rem 3.625rem;} .file-area.open{display:block;} .file-drop{border:.5px dashed #D0D0D0;border-radius:8px;padding:.625rem 1rem;background:#FAFAFA;cursor:pointer;transition:border-color .15s;} .file-drop:hover{border-color:#9A85D8;} .file-drop-lbl{display:flex;align-items:center;gap:6px;font-size:12px;color:#9A85D8;font-weight:500;cursor:pointer;} .file-chips{margin-top:.5rem;display:flex;flex-direction:column;gap:4px;} .fchip{display:flex;align-items:center;gap:6px;background:#EEEBF8;border-radius:100px;padding:3px 8px;} .fchip-ico{font-size:12px;flex-shrink:0;} .fchip-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5632BE;font-weight:500;font-size:11px;cursor:pointer;} .fchip-name:hover{text-decoration:underline;} .fchip-sz{color:#9A85D8;font-size:10px;flex-shrink:0;} .fchip-del{background:none;border:none;color:#CDC2EC;cursor:pointer;font-size:14px;padding:0;line-height:1;flex-shrink:0;transition:color .15s;} .fchip-del:hover{color:#E7A022;} .fchip-locked{opacity:.85;} .fchip-pending{background:#FDF4E3;} .fchip-pending .fchip-name{color:#A07210;cursor:default;} .fchip-pending .fchip-name:hover{text-decoration:none;} .fchip-pending .fchip-sz{color:#C49342;} .fchip-pending-tag{font-size:10px;font-weight:600;color:#A07210;background:#F4DFA8;border-radius:100px;padding:1px 6px;flex-shrink:0;} .send-doc-btn{margin-top:8px;display:inline-flex;align-items:center;gap:6px;background:#5632BE;color:#fff;border:none;border-radius:100px;font-family:inherit;font-size:12px;font-weight:500;padding:6px 14px;cursor:pointer;transition:background .15s;} .send-doc-btn:hover{background:#4828A0;} .send-doc-btn:disabled{background:#CDC2EC;cursor:not-allowed;} .doc-sent-pill{display:inline-flex;align-items:center;background:#E6F4EE;color:#058357;border-radius:100px;font-size:10px;font-weight:600;padding:1px 8px;margin-left:4px;} .doc-sent-msg{margin-top:8px;font-size:11px;color:#058357;font-weight:500;} .no-steps{text-align:center;padding:2rem;color:#999;font-size:14px;} .quick-add-wrap{text-align:center;padding:1.5rem 0 .5rem;} .quick-add-btn{display:inline-flex;align-items:center;gap:6px;border:1.5px dashed #CDC2EC;border-radius:8px;background:transparent;color:#9A85D8;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;padding:.625rem 1.5rem;transition:all .18s;} .quick-add-btn:hover{border-color:#5632BE;color:#5632BE;background:#FAFAFA;} /* ── CONFIG VIEW ── */ .cfg-wrap{max-width:1020px;margin:0 auto;padding:1.5rem 1.25rem;} .cfg-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:1.5rem;} .cfg-title{font-family:var(--bbx-font-headline);font-size:24px;font-weight:700;color:#5632BE;} .cfg-subtitle{font-size:13px;color:#888;margin-top:2px;} .type-filter{display:flex;gap:6px;} .tf-btn{border:1.5px solid #D0D0D0;border-radius:100px;background:white;cursor:pointer;font-family:inherit;font-size:12px;font-weight:500;padding:5px 14px;transition:all .18s;color:#555;} .tf-btn:hover{border-color:#9A85D8;color:#5632BE;} .tf-btn.active{background:#5632BE;border-color:#5632BE;color:white;} .cfg-list{background:white;border-radius:12px;border:.5px solid #E2E2E2;overflow:hidden;} /* 7 cols: drag|#|title|kundentyp|owner|fälligkeit|aktiv */ .cfg-list-hdr,.cfg-row{display:grid;grid-template-columns:30px 1fr 128px 82px 108px 42px;align-items:center;gap:7px;padding:.7rem 1rem;} .cfg-list-hdr{background:#F7F6FB;border-bottom:.5px solid #E5E5E5;font-size:10px;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.07em;} .cfg-row{border-bottom:.5px solid #F0F0F0;cursor:grab;transition:background .15s;} .cfg-row:last-child{border-bottom:none;} .cfg-row:hover{background:#FAFAFA;} .cfg-row.dragging{opacity:.45;background:#F0EDFC;} .cfg-row.drag-over{border-top:2px solid #5632BE;} .drag-handle{color:#CCC;font-size:18px;cursor:grab;user-select:none;text-align:center;line-height:1;} .cfg-step-title{font-size:13px;font-weight:500;margin-bottom:2px;} .cfg-step-desc{font-size:11px;color:#999;line-height:1.4;} .cfg-type-cell{display:flex;gap:4px;flex-wrap:wrap;} .type-badge{font-size:10px;font-weight:600;padding:2px 7px;border-radius:100px;cursor:pointer;transition:all .15s;border:1.5px solid transparent;} .tb-e{background:#EEEBF8;color:#5632BE;border-color:#CDC2EC;} .tb-s{background:#E6F3EE;color:#037046;border-color:#6AB59A;} .tb-e.off,.tb-s.off{background:#F5F5F5;color:#C0C0C0;border-color:#E0E0E0;} .cfg-owner-cell{display:flex;gap:3px;flex-wrap:wrap;} .cfg-center{display:flex;align-items:center;justify-content:center;} .cfg-right{display:flex;align-items:center;justify-content:flex-end;} /* Aktiv toggle – green */ .toggle-lbl{position:relative;width:36px;height:21px;cursor:pointer;flex-shrink:0;display:inline-block;} .toggle-lbl input{opacity:0;width:0;height:0;position:absolute;} .t-sl{position:absolute;inset:0;background:#D8D8D8;border-radius:100px;transition:.25s;} .t-sl::before{content:'';position:absolute;width:15px;height:15px;left:3px;top:3px;background:white;border-radius:50%;transition:.25s;} .toggle-lbl input:checked+.t-sl{background:#058357;} .toggle-lbl input:checked+.t-sl::before{transform:translateX(15px);} /* Blocked toggle — German-only step on a non-German customer. Forbidden cursor + dim, mirroring the .status-btn:disabled pattern in the checklist. */ .toggle-lbl.is-blocked,.toggle-lbl.is-blocked .t-sl{cursor:not-allowed;} .act-tog:disabled+.t-sl{opacity:.45;} /* 🇩🇪 indicator next to a blocked German-only step's title. */ .cfg-de-flag{margin-left:6px;font-size:13px;cursor:help;vertical-align:middle;} /* AHA toggle – orange */ .aha-lbl{position:relative;width:36px;height:21px;cursor:pointer;flex-shrink:0;display:inline-block;} .aha-lbl input{opacity:0;width:0;height:0;position:absolute;} .a-sl{position:absolute;inset:0;background:#D8D8D8;border-radius:100px;transition:.25s;} .a-sl::before{content:'';position:absolute;width:15px;height:15px;left:3px;top:3px;background:white;border-radius:50%;transition:.25s;} .aha-lbl input:checked+.a-sl{background:#E7A022;} .aha-lbl input:checked+.a-sl::before{transform:translateX(15px);} /* Upload toggle – purple */ .upl-lbl{position:relative;width:36px;height:21px;cursor:pointer;flex-shrink:0;display:inline-block;} .upl-lbl input{opacity:0;width:0;height:0;position:absolute;} .u-sl{position:absolute;inset:0;background:#D8D8D8;border-radius:100px;transition:.25s;} .u-sl::before{content:'';position:absolute;width:15px;height:15px;left:3px;top:3px;background:white;border-radius:50%;transition:.25s;} .upl-lbl input:checked+.u-sl{background:#5632BE;} .upl-lbl input:checked+.u-sl::before{transform:translateX(15px);} /* Due date input in config */ .due-inp{border:.5px solid #D8D8D8;border-radius:6px;font-family:inherit;font-size:11px;color:#1F1F1F;padding:3px 5px;background:white;outline:none;width:100%;transition:border-color .15s;} .due-inp:focus{border-color:#9A85D8;} .due-dash{color:#DDD;text-align:center;font-size:16px;} .cfg-hint{font-size:12px;color:#aaa;text-align:center;padding:.875rem 1rem .25rem;} /* Dirty-row marker: highlights rows with unsaved per-customer changes. */ .cfg-row.cfg-row-dirty{box-shadow:inset 3px 0 0 #5632BE;background:#FBFAFF;} .cfg-row.cfg-row-dirty:hover{background:#F6F3FE;} /* Sticky apply bar at the bottom of the config view. Pinned to the viewport while the user scrolls through the step list. Hidden until at least one pending change exists (toggled via the [hidden] attribute by JS). */ .cfg-apply-bar{position:sticky;bottom:12px;margin-top:1.25rem;display:flex;align-items:center;justify-content:space-between;gap:12px;background:white;border:.5px solid #E2E2E2;border-radius:12px;box-shadow:0 6px 20px rgba(31,31,31,.10);padding:.75rem 1rem;z-index:50;} .cfg-apply-bar[hidden]{display:none;} .cfg-apply-lbl{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#555;} .cfg-apply-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#5632BE;} .cfg-apply-actions{display:flex;gap:8px;} .cfg-discard-btn{border:.5px solid #D8D8D8;border-radius:8px;background:white;color:#555;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;padding:.55rem 1.1rem;transition:all .15s;} .cfg-discard-btn:hover{border-color:#999;color:#1F1F1F;} .cfg-discard-btn:disabled{opacity:.45;cursor:not-allowed;} .cfg-apply-btn{border:none;border-radius:8px;background:#5632BE;color:white;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;padding:.6rem 1.25rem;transition:background .15s;} .cfg-apply-btn:hover{background:#3F228F;} .cfg-apply-btn:disabled{background:#B8A8E3;cursor:not-allowed;} /* ── DOCUMENTS VIEW ── */ .doc-wrap{max-width:1020px;margin:0 auto;padding:1.5rem 1.25rem;} .doc-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:1.5rem;} .doc-title{font-family:var(--bbx-font-headline);font-size:24px;font-weight:700;color:#5632BE;} .doc-subtitle{font-size:13px;color:#888;margin-top:2px;} .doc-list{background:white;border-radius:12px;border:.5px solid #E2E2E2;overflow:hidden;} .doc-empty{padding:2.5rem 1rem;text-align:center;font-size:13px;color:#999;} .doc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:.85rem 1rem;border-bottom:.5px solid #F0F0F0;} .doc-row:last-child{border-bottom:none;} .doc-row:hover{background:#FAFAFA;} .doc-row-l{display:flex;align-items:center;gap:14px;min-width:0;} .doc-row-title{font-size:13px;font-weight:500;margin-bottom:2px;} .doc-row-meta{font-size:11px;color:#999;overflow:hidden;text-overflow:ellipsis;} .doc-row-r{display:flex;gap:8px;flex-shrink:0;} .doc-dl-btn{display:inline-flex;align-items:center;gap:6px;border:.5px solid #D8D8D8;border-radius:8px;background:white;color:#1F1F1F;cursor:pointer;font-family:inherit;font-size:12px;font-weight:500;padding:.5rem .9rem;transition:all .15s;} .doc-dl-btn:hover{border-color:#5632BE;color:#5632BE;background:#FBFAFF;} .doc-dl-btn:disabled{opacity:.45;cursor:not-allowed;} .doc-rej-btn{display:inline-flex;align-items:center;gap:6px;border:.5px solid #F4C9C9;border-radius:8px;background:white;color:#C0392B;cursor:pointer;font-family:inherit;font-size:12px;font-weight:500;padding:.5rem .9rem;transition:all .15s;} .doc-rej-btn:hover{border-color:#C0392B;background:#FDF3F3;} .doc-rej-btn:disabled{opacity:.45;cursor:not-allowed;} /* ── USERS VIEW ── */ .usr-wrap{max-width:1020px;margin:0 auto;padding:1.5rem 1.25rem;} .usr-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:1.5rem;} .usr-title{font-family:var(--bbx-font-headline);font-size:24px;font-weight:700;color:#5632BE;} .usr-subtitle{font-size:13px;color:#888;margin-top:2px;} .usr-list{background:white;border-radius:12px;border:.5px solid #E2E2E2;overflow:hidden;} .usr-empty{padding:2.5rem 1rem;text-align:center;font-size:13px;color:#999;} .usr-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;padding:.85rem 1rem;border-bottom:.5px solid #F0F0F0;align-items:center;font-size:13px;} .usr-row:last-child{border-bottom:none;} .usr-row:not(.usr-row-hdr):hover{background:#FAFAFA;} .usr-row-hdr{background:#FAFAFA;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#888;font-weight:600;} .usr-col-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .usr-col-last{color:#555;} .usr-never{color:#999;font-style:italic;} /* Add-user button (top-right of .usr-top). Opens the invite modal. */ .usr-add-btn{background:#5632BE;color:white;border:none;border-radius:100px;padding:8px 18px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;flex-shrink:0;transition:background .15s;} .usr-add-btn:hover{background:#4a2aa6;} /* Two-button cluster (Add existing user + Add user) in the Users view header. */ .usr-top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0;} /* Secondary (outline) variant used for the "Add existing user" action. */ .usr-add-secondary{background:white;color:#5632BE;border:1px solid #CDC2EC;} .usr-add-secondary:hover{background:#F2EEFB;} /* Success confirmation banner shown in the view after the invite modal closes. */ .usr-msg{font-size:13px;background:#EAF7F0;border:.5px solid #A7E0C6;color:#058357;border-radius:8px;padding:.7rem .9rem;margin-bottom:1rem;} .usr-msg[hidden]{display:none;} /* Helper line inside the invite modal, above the email field. */ .usr-invite-hint{font-size:12px;color:#888;line-height:1.5;} /* ── CLIENT ADMINISTRATION (Global settings) ── */ /* The list reuses the .usr-* layout; only the row grid + columns are new (below). Create-client modal form: stacked .form-* fields filling the modal width. */ .cc-form{display:flex;flex-direction:column;gap:1rem;} /* Staff-users variant: the .usr-row gains a trailing actions column for the delete button. Used by staff-users.js (rows carry .usr-row-act). */ .usr-row-act{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 44px;} /* Client-administration variants. Both carry a trailing 44px actions column (Archive / Reactivate), so the grid templates below INCLUDE it. Declared after .usr-row-act so their grid-template wins (both single-class specificity). Active: name / country / tier / created + actions. Archived: name / country / tier / archivedAt / archivedBy + actions. */ .usr-row-client{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 44px;} .usr-row-client-archived{grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr) 76px;} .ca-col-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;} .ca-col-country,.ca-col-tier,.ca-col-created,.ca-col-archived,.ca-col-archiver{color:#555;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* Section header above the archived clients list (separates it from the active one). */ .ca-section-hdr{margin:2rem 0 1rem;} .ca-section-title{font-size:18px;} /* Per-row Archive / Reactivate icon buttons (same footprint as .usr-del). */ .ca-act{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;border-radius:8px;background:transparent;color:#999;cursor:pointer;transition:background .15s,color .15s;} .ca-archive:hover{background:#FDF2F2;color:#C0392B;} .ca-reactivate:hover{background:#EAF7F0;color:#058357;} /* Permanent delete — deeper red than archive to signal the stronger action. */ .ca-delete:hover{background:#FBEAEA;color:#9B1C1C;} .usr-col-actions{display:flex;align-items:center;justify-content:flex-end;gap:2px;} /* Per-row delete button (icon). Greys out + blocks pointer when disabled (self-delete or last-staff). */ .usr-del{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;border-radius:8px;background:transparent;color:#999;cursor:pointer;transition:background .15s,color .15s;} .usr-del:hover{background:#FDF2F2;color:#C0392B;} .usr-del:disabled{color:#D8D8D8;cursor:not-allowed;background:transparent;} /* Target email line inside the delete-confirmation modal. */ .staff-del-target{font-size:14px;color:#1F1F1F;margin-top:.4rem;word-break:break-word;} /* ── ADD TEST USERS (Global settings) ── */ /* Provisioning form: stacked .form-* fields in a white card, capped narrow so it reads as a form rather than stretching the full view width. */ .cu-form{display:flex;flex-direction:column;gap:1rem;background:white;border:.5px solid #E2E2E2;border-radius:12px;padding:1.5rem;max-width:520px;} .cu-form .form-row[hidden]{display:none;} .cu-actions{display:flex;justify-content:flex-end;margin-top:.25rem;} /* Danger variant of the modal submit button — red, for the delete confirm. Compound selector so it wins over the later .modal-submit base rule regardless of source order. */ .modal-submit.modal-submit-danger{background:#C0392B;} .modal-submit.modal-submit-danger:hover{background:#9B1C1C;} .modal-submit.modal-submit-danger:disabled{background:#E5A09A;cursor:default;} /* ── PROFILE VIEW ── */ .prf-wrap{max-width:1020px;margin:0 auto;padding:1.5rem 1.25rem;} .prf-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:1.5rem;} .prf-title{font-family:var(--bbx-font-headline);font-size:24px;font-weight:700;color:#5632BE;} .prf-subtitle{font-size:13px;color:#888;margin-top:2px;} .prf-card{background:white;border-radius:12px;border:.5px solid #E2E2E2;overflow:hidden;} .prf-row{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:16px;padding:.95rem 1.1rem;border-bottom:.5px solid #F0F0F0;align-items:center;} .prf-row:last-child{border-bottom:none;} .prf-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#888;font-weight:600;} .prf-value{font-size:13px;color:#1F1F1F;overflow:hidden;text-overflow:ellipsis;} /* Editable language dropdown — the only interactive field in the Profile view. */ .prf-select{font-size:13px;color:#1F1F1F;padding:.5rem .65rem;border:.5px solid #D0D0D0;border-radius:8px;background:white;max-width:280px;width:100%;cursor:pointer;} .prf-select:focus{outline:none;border-color:#5632BE;box-shadow:0 0 0 3px #ECE9F5;} .prf-actions{display:flex;align-items:center;gap:14px;margin-top:1.1rem;} .prf-save-btn{font-size:13px;font-weight:600;color:white;background:#5632BE;border:none;border-radius:8px;padding:.6rem 1.4rem;cursor:pointer;} .prf-save-btn:hover{background:#4828A0;} .prf-save-btn:disabled{opacity:.6;cursor:default;} .prf-saved-msg{font-size:12px;font-weight:600;color:#058357;} .prf-saved-msg.is-error{color:#C0392B;} /* ── FOOTER ── */ .ftr{text-align:center;font-size:11px;color:#C0C0C0;padding:1.5rem;margin-top:1rem;} .logo-svg path,.logo-svg polygon{fill:white;} /* ── NOTES DRAWER ── */ .drw-overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:200;opacity:0;pointer-events:none;transition:opacity .22s;} .drw-overlay.open{opacity:1;pointer-events:auto;} .drw{position:fixed;top:0;right:0;width:340px;height:100%;background:white;border-left:.5px solid #D5D5D5;z-index:201;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden;} .drw.open{transform:translateX(0);} .drw-hdr{background:#5632BE;padding:.875rem 1rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;} .drw-hdr-l{display:flex;align-items:center;gap:8px;} .drw-icon{width:24px;height:24px;background:rgba(255,255,255,.2);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:13px;} .drw-icon img{display:block;} .drw-title-wrap{display:flex;flex-direction:column;line-height:1.2;} .drw-title{color:white;font-family:var(--bbx-font-body);font-size:14px;font-weight:500;} .drw-subtitle{color:rgba(255,255,255,.75);font-family:var(--bbx-font-body);font-size:11px;font-weight:400;} .drw-x{background:rgba(255,255,255,.15);border:none;border-radius:6px;color:white;cursor:pointer;font-size:16px;line-height:1;padding:4px 9px;transition:background .15s;} .drw-x:hover{background:rgba(255,255,255,.3);} .drw-author{padding:.75rem 1rem;border-bottom:.5px solid #EEEEEE;background:#FAFAFA;flex-shrink:0;} .drw-author-lbl{font-size:10px;color:#AAAAAA;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;} .drw-author-row{display:flex;align-items:center;gap:8px;} .drw-av{width:28px;height:28px;border-radius:50%;background:#EEEBF8;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#5632BE;flex-shrink:0;} .drw-aname{font-size:13px;font-weight:500;color:#1F1F1F;flex:1;} .drw-achg{background:none;border:none;color:#9A85D8;cursor:pointer;font-family:inherit;font-size:11px;padding:0;} .drw-achg:hover{color:#5632BE;} .drw-list{flex:1;overflow-y:auto;padding:.75rem 1rem;} .n-item{display:flex;align-items:flex-start;gap:8px;padding:.5rem 0;border-bottom:.5px solid #F5F5F5;transition:opacity .35s;} .n-item:last-child{border-bottom:none;} .n-item.fading{opacity:0;} .n-cb{width:17px;height:17px;border-radius:4px;border:1.5px solid #CCCCCC;cursor:pointer;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;transition:all .18s;background:white;} .n-cb:hover{border-color:#9A85D8;} .n-cb.chk{background:#058357;border-color:#058357;} .n-cb.chk::after{content:'';display:block;width:8px;height:5px;border-left:2px solid white;border-bottom:2px solid white;transform:rotate(-45deg) translate(0,-1px);} .n-body{flex:1;min-width:0;} .n-txt{font-size:13px;color:#1F1F1F;line-height:1.5;word-break:break-word;transition:all .3s;} .n-txt.struck{color:#BBBBBB;text-decoration:line-through;} .n-meta{display:flex;gap:5px;margin-top:3px;flex-wrap:wrap;align-items:center;} .n-avsm{width:16px;height:16px;border-radius:50%;background:#EEEBF8;display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#5632BE;} .n-albl{font-size:10px;font-weight:500;color:#9A85D8;} .n-tlbl{font-size:10px;color:#CCCCCC;} .n-del{background:none;border:none;color:#DDDDDD;cursor:pointer;font-size:16px;padding:0;line-height:1;flex-shrink:0;transition:color .15s;} .n-del:hover{color:#E7A022;} /* "(Edited)" tag prefixed to a modified note body. */ .n-edited{font-size:11px;font-style:italic;color:#9A85D8;} /* "Edit message" trigger in the meta row — own messages only. */ .n-editbtn{background:none;border:none;padding:0;font-size:10px;color:#9A85D8;cursor:pointer;transition:color .15s;} .n-editbtn:hover{color:#5632BE;text-decoration:underline;} /* Inline editor (textarea + Save/Cancel) shown while a note is being edited. */ .n-edit{display:flex;flex-direction:column;gap:6px;} .n-edit-ta{width:100%;box-sizing:border-box;font-family:inherit;font-size:13px;color:#1F1F1F;line-height:1.5;padding:6px 8px;border:1px solid #CDC2EC;border-radius:6px;resize:vertical;min-height:48px;background:white;} .n-edit-ta:focus{outline:none;border-color:#5632BE;} .n-edit-actions{display:flex;gap:6px;} .n-edit-save,.n-edit-cancel{font-family:inherit;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;cursor:pointer;border:1px solid transparent;transition:all .15s;} .n-edit-save{background:#5632BE;color:white;} .n-edit-save:hover{background:#4828A0;} .n-edit-cancel{background:white;color:#666;border-color:#D8D8D8;} .n-edit-cancel:hover{border-color:#9A85D8;color:#5632BE;} .n-empty{text-align:center;padding:2.5rem 1rem;color:#CCCCCC;font-size:13px;line-height:1.6;} .drw-add{padding:.875rem 1rem;border-top:.5px solid #EEEEEE;background:white;flex-shrink:0;} .drw-add-row{display:flex;gap:6px;margin-bottom:6px;} .drw-ta{flex:1;border:.5px solid #D8D8D8;border-radius:8px;font-family:inherit;font-size:13px;padding:.5rem .75rem;outline:none;resize:none;color:#1F1F1F;transition:border-color .15s;line-height:1.45;} .drw-ta:focus{border-color:#9A85D8;} .drw-submit{background:#5632BE;border:none;border-radius:8px;color:white;cursor:pointer;font-family:inherit;font-size:12px;font-weight:500;padding:.5rem .875rem;transition:background .15s;white-space:nowrap;} .drw-submit:hover{background:#4425A0;} .drw-footer{display:flex;align-items:center;justify-content:space-between;} .drw-undo{background:none;border:none;color:#CCCCCC;cursor:pointer;font-family:inherit;font-size:11px;padding:0;transition:color .15s;} .drw-undo:hover{color:#9A85D8;} .drw-cnt{font-size:11px;color:#CCCCCC;} /* ── ADD STEP MODAL ── */ .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:400;display:none;align-items:center;justify-content:center;padding:1rem;} .modal-overlay.open{display:flex;} .modal{background:white;border-radius:14px;width:480px;max-width:100%;max-height:calc(100vh - 2rem);overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.18);} .modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:1.125rem 1.375rem;border-bottom:.5px solid #E5E5E5;position:sticky;top:0;background:white;z-index:1;border-radius:14px 14px 0 0;} .modal-title{font-size:15px;font-weight:500;} .modal-x{background:#F0F0F0;border:none;border-radius:6px;color:#666;cursor:pointer;font-size:15px;line-height:1;padding:4px 10px;transition:background .15s;} .modal-x:hover{background:#E0E0E0;} .modal-body{padding:1.25rem 1.375rem;display:flex;flex-direction:column;gap:.875rem;} .form-row{display:flex;flex-direction:column;gap:4px;} .form-lbl{font-size:12px;font-weight:500;color:#555;} .form-inp{border:.5px solid #D8D8D8;border-radius:8px;font-family:inherit;font-size:13px;color:#1F1F1F;padding:.5rem .75rem;outline:none;transition:border-color .15s;background:white;width:100%;} .form-inp:focus{border-color:#9A85D8;} .form-ta{border:.5px solid #D8D8D8;border-radius:8px;font-family:inherit;font-size:13px;color:#1F1F1F;padding:.5rem .75rem;outline:none;resize:vertical;min-height:56px;transition:border-color .15s;background:white;width:100%;} .form-ta:focus{border-color:#9A85D8;} .form-sel{border:.5px solid #D8D8D8;border-radius:8px;font-family:inherit;font-size:13px;color:#1F1F1F;padding:.5rem .75rem;outline:none;background:white;transition:border-color .15s;width:100%;} .form-sel:focus{border-color:#9A85D8;} .form-checks{display:flex;gap:14px;flex-wrap:wrap;} .form-chk-lbl{display:flex;align-items:center;gap:5px;font-size:13px;color:#333;cursor:pointer;font-weight:400;} .form-row-h{flex-direction:row;align-items:center;justify-content:space-between;} .form-err{font-size:12px;color:#E53E3E;display:none;margin-top:2px;} .form-err.show{display:block;} .modal-ftr{padding:.875rem 1.375rem;border-top:.5px solid #E5E5E5;display:flex;justify-content:flex-end;gap:8px;background:white;border-radius:0 0 14px 14px;} .modal-cancel{background:#F0F0F0;border:none;border-radius:8px;color:#555;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;padding:.5rem 1.125rem;transition:background .15s;} .modal-cancel:hover{background:#E0E0E0;} .modal-cancel:disabled{opacity:.5;cursor:default;} .modal-cancel:disabled:hover{background:#F0F0F0;} .modal-x:disabled{opacity:.4;cursor:default;} .modal-submit{background:#5632BE;border:none;border-radius:8px;color:white;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;padding:.5rem 1.25rem;transition:background .15s;} .modal-submit:hover{background:#4425A0;} @media(max-width:640px){ .cfg-list-hdr,.cfg-row{grid-template-columns:26px 1fr 90px 65px 86px 36px;gap:5px;padding:.6rem .625rem;font-size:10px;} } /* Narrow viewports: pin --sb-w to 64px even when the sidebar is expanded so content stays usable. Sidebar still expands visually, just as an overlay. */ @media(max-width:900px){ body.app{--sb-w:64px!important;} .sb[data-collapsed="false"]{box-shadow:4px 0 20px rgba(0,0,0,.18);} } /* ── ONBOARDING STEPS VIEW (staff catalog editor) ─────────────────────────── */ .os-wrap{max-width:1400px;margin:1.5rem auto 5rem;padding:0 1.5rem;} .os-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap;} .os-title{font-family:var(--bbx-font-headline);font-size:24px;font-weight:700;color:#5632BE;} .os-subtitle{font-size:13px;color:#777;margin-top:4px;} .os-actions{display:flex;gap:8px;align-items:center;} .os-add-btn,.os-export-btn{font-family:inherit;font-size:13px;font-weight:500;padding:7px 14px;border-radius:100px;cursor:pointer;border:none;white-space:nowrap;transition:all .18s;} /* ── Main-button font ─────────────────────────────────────────────────────── Open Sans for the principal interactive buttons (sidebar nav/profile/logout, customer-selection cards, and the primary/secondary action buttons across the views). Overrides the inherited Inter; placed after their definitions so it wins on source order. Text children (e.g. .cust-card-name) inherit it. */ .sb-item,.sb-profile,.cust-card, .status-btn,.send-doc-btn,.quick-add-btn,.tf-btn, .cfg-discard-btn,.cfg-apply-btn,.doc-dl-btn,.doc-rej-btn, .usr-add-btn,.drw-submit,.modal-cancel,.modal-submit, .os-add-btn,.os-export-btn{font-family:var(--bbx-font-button);} .os-add-btn{background:#5632BE;color:white;} .os-add-btn:hover{background:#4525A8;} .os-add-btn:disabled{opacity:.45;cursor:not-allowed;background:#5632BE;} .os-export-btn{background:white;border:1px solid #D9D9D9;color:#1F1F1F;} .os-export-btn:hover{background:#F5F5F5;} /* Cap the wrapper to the viewport height and scroll it internally (both axes). Without the cap the wrapper grows to the table's full height, so its horizontal scrollbar sits at the very bottom of the table and is only reachable after scrolling the whole page down. With the cap, the horizontal scrollbar stays pinned to the bottom of the table's visible area (≈ viewport bottom) and is usable at any scroll position; vertical scrolling still reaches every row and the sticky thead now sticks to the top of this scroll region. The offset is the top bar (--tb-h) plus the os-top header + page margins above the table. */ .os-table-wrap{background:white;border:1px solid #E6E6E6;border-radius:8px;overflow:auto;max-height:calc(100vh - var(--tb-h, 48px) - 120px);} /* table-layout:fixed so widths set on / drive column sizing exactly — required for the per-user resizable columns. width:max-content lets the table grow to the sum of its column widths instead of being capped at the wrapper width. */ .os-table{border-collapse:collapse;font-size:12px;table-layout:fixed;width:max-content;} .os-table thead th{position:sticky;top:0;background:#F7F5FB;color:#3F2A8C;font-weight:600;text-align:left;padding:9px 10px;border-bottom:1px solid #E6DDFA;font-size:11px;text-transform:uppercase;letter-spacing:.3px;z-index:1;overflow:hidden;} .os-th-label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* Resize handle sits on the right edge of every th. position:sticky on the parent th provides the positioning context, so right:0 lands at the cell edge. Width is intentionally generous (7px) for an easier grab target. */ .os-th-resize{position:absolute;top:0;right:0;height:100%;width:7px;cursor:col-resize;user-select:none;background:transparent;} .os-th-resize:hover{background:#5632BE;opacity:.35;} /* During an active drag we force col-resize on every element so the cursor doesn't flicker as the pointer crosses cells/inputs. */ body.os-resizing,body.os-resizing *{cursor:col-resize !important;user-select:none !important;} .os-table tbody tr{border-bottom:1px solid #F0F0F0;transition:background .12s;} .os-table tbody tr:hover{background:#FAFAF8;} .os-table tbody tr.os-row-dirty{background:#FFFCEE;} .os-table tbody tr.os-row-dirty:hover{background:#FFF8DC;} .os-table tbody tr.os-row-draft{background:#F2EEFB;} .os-table tbody tr.os-row-draft:hover{background:#E9E2F8;} .os-cell{padding:5px 8px;vertical-align:top;} .os-cell-actions{width:40px;text-align:center;} .os-cell-edited{background:#FFF1A8;} /* ── Onboarding Steps: drag-to-reorder ── */ .os-th-handle{width:30px;padding:0;} .os-cell-handle{text-align:center;padding:4px 0;vertical-align:middle;} .os-drag-handle{color:#B8A8E3;font-size:16px;line-height:1;cursor:grab;user-select:none;display:inline-block;} .os-drag-handle:hover{color:#5632BE;} .os-drag-handle.is-disabled{color:#D8D8D8;cursor:not-allowed;} .os-table tbody tr.os-row.os-dragging{opacity:.45;background:#F0EDFC;} .os-table tbody tr.os-row.os-drag-over td{box-shadow:inset 0 2px 0 0 #5632BE;} /* Phase separator row: reuses .phase-hdr; sits flush inside the scroll body. */ .os-phase-sep td{background:#FAFAF8;padding:14px 10px 6px;border-bottom:1px solid #F0F0F0;} .os-phase-sep .phase-hdr{margin-bottom:0;} /* Inputs inside cells — strip browser chrome so cells look spreadsheet-clean. */ .os-inp{font-family:inherit;font-size:12px;width:100%;border:1px solid transparent;background:transparent;padding:3px 6px;border-radius:4px;outline:none;color:#1F1F1F;transition:border-color .15s,background .15s;} .os-inp:hover{border-color:#E0E0E0;background:white;} .os-inp:focus{border-color:#5632BE;background:white;box-shadow:0 0 0 2px rgba(86,50,190,.12);} .os-inp-bool{width:auto;} .os-inp-ta{resize:vertical;min-height:32px;line-height:1.4;} .os-inp-int{max-width:80px;} .os-inp-sel{appearance:auto;} .os-row-del{background:transparent;border:none;cursor:pointer;color:#B33A3A;font-size:14px;line-height:1;padding:2px 6px;border-radius:4px;} .os-row-del:hover{background:#FBEAEA;} /* Strict delete-confirmation modal */ .os-del-warn{color:#9B1C1C;font-weight:600;margin:0 0 .6rem;} .os-del-step{background:#FAFAF8;border:1px solid #E2E2E2;border-radius:6px;padding:.5rem .7rem;margin:0 0 .8rem;font-size:13px;color:#333;} .os-del-label{display:block;font-size:12px;color:#555;margin:0 0 .35rem;} .os-del-input{width:100%;font-family:inherit;font-size:14px;padding:.5rem .7rem;border:1px solid #D0D0D0;border-radius:8px;outline:none;box-sizing:border-box;} .os-del-input:focus{border-color:#C0392B;box-shadow:0 0 0 2px rgba(192,57,43,.12);} .os-muted{color:#999;} .os-loading,.os-error{padding:30px 20px;text-align:center;color:#777;font-size:13px;} .os-error{color:#B33A3A;} /* ── Document file cell (Onboarding Steps view) ───────────────────────────── Shown only when a step's `download` flag is on. Either a small "upload PDF" control (no document yet) or the attached filename + a delete (✕). */ .os-doc{display:flex;align-items:center;gap:6px;min-width:0;} .os-doc-hint{font-size:11px;font-style:italic;} /* Upload control — styled