/* Al Mutlaq Power — the CRM boards, in the Accounting application's language ================================================================== Replaces mac.css. The console now reads as one product: the CRM boards are cut from the same palette, chrome and grid as the Mutlaq Accounting System, so moving between /leads and /accounting is not a change of application. IT REFERENCES THE LEDGER'S TOKENS RATHER THAN COPYING ITS HEX VALUES. acc-app.css defines the whole --acc-* palette on :root, so those values are already global and readable here. Referencing them means the two can never drift: re-theming the ledger re-themes the CRM in the same commit, and there is exactly one place where "what colour is a hairline" is answered. Copying the hex values would have created a second source of truth that looks identical on the day it is written and diverges quietly afterwards. READING those tokens is safe. WRITING them is not — the two rules that governed the previous sheet still hold: 1. EVERY selector is scoped `body:not(.acc-fullscreen)`. Accounting takes over the screen by putting .acc-fullscreen on ; acc-app.css then hides #app outright and re-cuts the shared .mdl chrome for itself. So while the ledger is up, not one rule here matches. A rule without that prefix is a bug even if it looks right. 2. NO --acc-* TOKEN IS REDEFINED HERE, and none of the eleven CRM base tokens the ledger reads (--ink --ink-soft --ink-mute --line --line-soft --canvas --bg --blue --radius --r-sm --win-accent) change value. This sheet only adds --crm-*. ================================================================== */ /* ── Arabic face ─────────────────────────────────────────────────── Carried over unchanged. Arabic and Kurdish render in Noto Kufi Arabic; Latin uses IBM Plex Sans, the ledger's face. The alias exists because Google serves 'Noto Kufi Arabic' WITH a latin subset, so naming that family first would take the whole console with it. This re-declares the same Arabic-subset webfont under a private name restricted to the Arabic ranges: a Latin codepoint matches no face here and falls straight through to the next family in the stack. NOTE the one deliberate difference from the ledger: accounting sets Arabic in IBM Plex Sans Arabic. The CRM keeps Kufi because that was asked for specifically. Swapping to exact parity is deleting the alias from --crm-font. */ @font-face{ font-family:'Noto Kufi Arabic Subset'; src:url('https://fonts.gstatic.com/s/notokufiarabic/v27/CSRk4ydQnPyaDxEXLFF6LZVLKrodrOYFFlKp.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } :root{ /* The ledger scales its whole type ramp by --acc-fs (its zoom control). The CRM keeps its OWN multiplier, seeded to the same 1.12, so the two match today without the CRM resizing whenever someone adjusts the ledger's zoom — that control belongs to accounting. */ --crm-fs:1.12; --crm-font:'Noto Kufi Arabic Subset','IBM Plex Sans','IBM Plex Sans Arabic', -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; /* Radii, matching the ledger: 10 controls, 14 tiles, 16 cards. */ --crm-r:10px; --crm-r-lg:14px; --crm-r-card:16px; --crm-sp-1:4px; --crm-sp-2:8px; --crm-sp-3:12px; --crm-sp-4:16px; --crm-sp-5:20px; --crm-sp-6:24px; } /* ══════════════════════════════════════════════════════════════════ BASE ══════════════════════════════════════════════════════════════════ */ body:not(.acc-fullscreen){ font-family:var(--crm-font); font-size:calc(13px * var(--crm-fs)); color:#1e293b; background:#f8fafc; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; } body:not(.acc-fullscreen) .app{ background:#f8fafc } body:not(.acc-fullscreen) .mut{ color:#64748b } body:not(.acc-fullscreen) :focus-visible{ outline:2px solid #0073ea; outline-offset:1px; border-radius:var(--crm-r); } /* ══════════════════════════════════════════════════════════════════ THE HEADER — Modern, Clean, Dashboard-Matched UI/UX ══════════════════════════════════════════════════════════════════ */ body:not(.acc-fullscreen) .app__top{ background:transparent } body:not(.acc-fullscreen) .top{ min-height:56px; background:#ffffff; color:#0f172a; border-bottom:1px solid #e2e8f0; box-shadow:0 1px 3px rgba(0,0,0,.03); backdrop-filter:none; -webkit-backdrop-filter:none; padding-inline:var(--crm-sp-4); gap:var(--crm-sp-3); } body:not(.acc-fullscreen) .top__brand{ font-size:calc(14.5px * var(--crm-fs)); font-weight:700; color:#0f172a; letter-spacing:-0.2px; display:inline-flex; align-items:center; gap:8px; } body:not(.acc-fullscreen) .top__brand-logo{ height:26px; width:auto; object-fit:contain; } body:not(.acc-fullscreen) .top__brand small{ color:#0073ea; background:#eff6ff; border:1px solid #dbeafe; font-size:11px; font-weight:700; padding:2px 7px; border-radius:6px; letter-spacing:0.5px; } body:not(.acc-fullscreen) .top__iconbtn, body:not(.acc-fullscreen) .top__pill-btn{ height:34px; padding:0 12px; border-radius:9px; border:1px solid #e2e8f0; background:#ffffff; color:#334155; font:inherit; font-size:calc(12.5px * var(--crm-fs)); font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:6px; box-shadow:0 1px 2px rgba(0,0,0,.03); transition:all .18s cubic-bezier(.34,1.56,.64,1); user-select:none; } body:not(.acc-fullscreen) .top__iconbtn{ width:34px; padding:0; justify-content:center } body:not(.acc-fullscreen) .top__pill-btn:hover, body:not(.acc-fullscreen) .top__iconbtn:hover{ background:#f8fafc; border-color:#cbd5e1; color:#0f172a; transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,.05); } body:not(.acc-fullscreen) #logout-btn:hover{ background:#fff1f2; border-color:#fecdd3; color:#e11d48; } body:not(.acc-fullscreen) .top__user{ display:flex; align-items:center; gap:8px; padding:3px 6px; border-radius:9px; } body:not(.acc-fullscreen) .top__user .nm{ font-size:calc(13px * var(--crm-fs)); font-weight:600; color:#0f172a; line-height:1.2; } body:not(.acc-fullscreen) .top__user .rl{ font-size:calc(11.5px * var(--crm-fs)); color:#64748b; line-height:1.2; } body:not(.acc-fullscreen) .top__user .av-circ{ background:linear-gradient(135deg, #0073ea, #0050a8); color:#fff; font-weight:700; font-size:12px; width:28px; height:28px; line-height:28px; border-radius:50%; text-align:center; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,115,234,.2); } body:not(.acc-fullscreen) .top__search{ display:flex; align-items:center; gap:8px; height:34px; padding:0 12px; border-radius:9px; background:#ffffff; border:1px solid #e2e8f0; box-shadow:0 1px 2px rgba(0,0,0,.02); min-width:320px; max-width:480px; flex:1 1 320px; transition:all .18s ease; box-sizing:border-box; } body:not(.acc-fullscreen) .top__search:focus-within{ background:#ffffff; border-color:#0073ea; box-shadow:0 0 0 3px rgba(0, 115, 234, 0.12); } body:not(.acc-fullscreen) .top__search svg{ color:#94a3b8; width:14px; height:14px; flex-shrink:0 } body:not(.acc-fullscreen) .top__search:focus-within svg{ color:#0073ea } body:not(.acc-fullscreen) .top__search input{ border:0; background:transparent; outline:none; color:#0f172a; font:inherit; font-size:calc(13px * var(--crm-fs)); min-width:0; width:100%; padding:0; } body:not(.acc-fullscreen) .top__search input::placeholder{ color:#94a3b8 } /* Single Minimal Filter Pill for City and Rep */ body:not(.acc-fullscreen) .top__city{ position:relative; display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 8px 0 10px; border-radius:9px; background:#ffffff; border:1px solid #e2e8f0; box-shadow:0 1px 2px rgba(0,0,0,.02); transition:all .18s ease; box-sizing:border-box; } body:not(.acc-fullscreen) .top__city:hover{ background:#f8fafc; border-color:#cbd5e1; } body:not(.acc-fullscreen) .top__city:focus-within{ background:#ffffff; border-color:#0073ea; box-shadow:0 0 0 3px rgba(0, 115, 234, 0.12); } body:not(.acc-fullscreen) .top__city svg{ color:#64748b; width:14px; height:14px; flex-shrink:0; } body:not(.acc-fullscreen) .top__city select{ appearance:none !important; -webkit-appearance:none !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; outline:none !important; height:100% !important; margin:0 !important; padding:0 16px 0 0 !important; font:inherit !important; font-size:calc(13px * var(--crm-fs)) !important; font-weight:500 !important; color:#334155 !important; cursor:pointer !important; line-height:32px !important; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 0 center !important; } body:not(.acc-fullscreen) .top__city select option{ color:#0f172a; background:#ffffff } /* ══════════════════════════════════════════════════════════════════ SIDEBAR ══════════════════════════════════════════════════════════════════ */ body:not(.acc-fullscreen) .app__side{ background:transparent } body:not(.acc-fullscreen) .side{ background:#ffffff; border-right:1px solid #e2e8f0; backdrop-filter:none; -webkit-backdrop-filter:none; padding:var(--crm-sp-2) var(--crm-sp-2) var(--crm-sp-4); } body:not(.acc-fullscreen) .side__workspace{ padding:var(--crm-sp-2) var(--crm-sp-2) var(--crm-sp-3); border-bottom:1px solid #f1f5f9; margin-bottom:var(--crm-sp-2); } body:not(.acc-fullscreen) .side__workspace-name{ font-size:calc(13.5px * var(--crm-fs)); font-weight:700; color:#0f172a; } body:not(.acc-fullscreen) .side__label{ font-size:calc(11px * var(--crm-fs)); font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.6px; padding:var(--crm-sp-4) var(--crm-sp-2) var(--crm-sp-1); } body:not(.acc-fullscreen) .side__item{ display:flex; align-items:center; gap:10px; min-height:38px; padding:0 var(--crm-sp-2); margin:2px 0; border-radius:9px; font-size:calc(13px * var(--crm-fs)); font-weight:500; color:#475569; cursor:pointer; border:0; background:transparent; border-inline-start:3px solid transparent; transition:all .18s ease; } body:not(.acc-fullscreen) .side__item svg, body:not(.acc-fullscreen) .side__item .hai-icon{ width:18px; height:18px; flex:0 0 auto; color:#64748b; stroke:currentColor; stroke-width:1.8; fill:none; transition:transform .2s cubic-bezier(.34,1.56,.64,1), color .15s ease; overflow:visible; } body:not(.acc-fullscreen) .side__item:hover{ background:#f1f5f9; color:#0f172a } body:not(.acc-fullscreen) .side__item:hover svg, body:not(.acc-fullscreen) .side__item:hover .hai-icon{ color:#0f172a; transform:scale(1.12); } body:not(.acc-fullscreen) .side__item.is-active{ background:#eff6ff; border-inline-start-color:#0073ea; color:#0073ea; font-weight:700; } body:not(.acc-fullscreen) .side__item.is-active::before{ display:none } body:not(.acc-fullscreen) .side__item.is-active svg, body:not(.acc-fullscreen) .side__item.is-active .hai-icon{ color:#0073ea; stroke:#0073ea } /* ── Heroicons Animated Interactions (heroicons-animated.com) ────── */ /* 1. Dashboard (Squares 2x2 bounce & pulse) */ body:not(.acc-fullscreen) .side__item:hover .hai-dashboard .hai-sq{ transition:transform .22s cubic-bezier(.34,1.56,.64,1); } body:not(.acc-fullscreen) .side__item:hover .hai-dashboard .hai-sq-1{ transform:translate(-1px,-1px); } body:not(.acc-fullscreen) .side__item:hover .hai-dashboard .hai-sq-2{ transform:translate(1px,-1px); } body:not(.acc-fullscreen) .side__item:hover .hai-dashboard .hai-sq-3{ transform:translate(-1px,1px); } body:not(.acc-fullscreen) .side__item:hover .hai-dashboard .hai-sq-4{ transform:translate(1px,1px); } /* 2. Leads (User + spin & pop) */ body:not(.acc-fullscreen) .side__item:hover .hai-leads .hai-plus{ transform-origin:19px 10.25px; animation:hai-spin-plus .45s cubic-bezier(.34,1.56,.64,1) both; } @keyframes hai-spin-plus{ 0%{ transform:rotate(0deg) scale(0.8); } 60%{ transform:rotate(90deg) scale(1.3); } 100%{ transform:rotate(90deg) scale(1); } } body:not(.acc-fullscreen) .side__item:hover .hai-leads .hai-head{ animation:hai-bob .35s ease both; } /* 3. Customers (Users slide & wave) */ body:not(.acc-fullscreen) .side__item:hover .hai-customers .hai-user-1, body:not(.acc-fullscreen) .side__item:hover .hai-customers .hai-head-1{ transform-origin:17px 12px; animation:hai-slide-peek .4s ease both; } @keyframes hai-slide-peek{ 0%{ transform:translate(0,0); } 50%{ transform:translate(2px,-1px); } 100%{ transform:translate(1.5px,0); } } /* 4. Deals (Trophy golden tilt & lift) */ body:not(.acc-fullscreen) .side__item:hover .hai-deals{ animation:hai-trophy-tilt .45s cubic-bezier(.34,1.56,.64,1) both; } @keyframes hai-trophy-tilt{ 0%{ transform:scale(1.12) rotate(0deg); } 30%{ transform:scale(1.18) rotate(-8deg); } 70%{ transform:scale(1.18) rotate(8deg); } 100%{ transform:scale(1.12) rotate(0deg); } } /* 5. Contracts (Document line draw) */ body:not(.acc-fullscreen) .side__item:hover .hai-contracts .hai-pen{ stroke-dasharray:12; stroke-dashoffset:12; animation:hai-draw-line .45s ease forwards; } @keyframes hai-draw-line{ to{ stroke-dashoffset:0; } } /* 6. Commissions (Dollar coin 3D spin) */ body:not(.acc-fullscreen) .side__item:hover .hai-commissions{ animation:hai-coin-spin .6s ease both; } @keyframes hai-coin-spin{ 0%{ transform:scale(1.12) rotateY(0deg); } 50%{ transform:scale(1.22) rotateY(180deg); } 100%{ transform:scale(1.12) rotateY(360deg); } } /* 7. Catalogs (Book pages flip) */ body:not(.acc-fullscreen) .side__item:hover .hai-catalogs .hai-book-l{ transform-origin:12px 12px; animation:hai-book-flip-l .45s ease both; } body:not(.acc-fullscreen) .side__item:hover .hai-catalogs .hai-book-r{ transform-origin:12px 12px; animation:hai-book-flip-r .45s ease both; } @keyframes hai-book-flip-l{ 0%{ transform:rotateY(0deg); } 50%{ transform:rotateY(-25deg); } 100%{ transform:rotateY(0deg); } } @keyframes hai-book-flip-r{ 0%{ transform:rotateY(0deg); } 50%{ transform:rotateY(25deg); } 100%{ transform:rotateY(0deg); } } /* 8. Accounting (Calculator keypress sequence) */ body:not(.acc-fullscreen) .side__item:hover .hai-accounting .hai-k1{ animation:hai-key-press .3s ease .05s both; } body:not(.acc-fullscreen) .side__item:hover .hai-accounting .hai-k2{ animation:hai-key-press .3s ease .12s both; } body:not(.acc-fullscreen) .side__item:hover .hai-accounting .hai-k6{ animation:hai-key-press .3s ease .18s both; } @keyframes hai-key-press{ 0%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.8); fill:currentColor; } 100%{ transform:scale(1); opacity:1; } } /* 9. Activities (Lightning bolt strike) */ body:not(.acc-fullscreen) .side__item:hover .hai-activities .hai-bolt{ animation:hai-bolt-strike .38s cubic-bezier(.34,1.56,.64,1) both; } @keyframes hai-bolt-strike{ 0%{ transform:scale(1) translateY(0); } 35%{ transform:scale(1.25) translateY(-2px); stroke:#0073ea; } 70%{ transform:scale(1.15) translateY(1px); } 100%{ transform:scale(1.12) translateY(0); } } /* 10. Tasks (Checkmark spring pop) */ body:not(.acc-fullscreen) .side__item:hover .hai-tasks .hai-check-tick{ transform-origin:12px 12px; animation:hai-check-spring .4s cubic-bezier(.34,1.56,.64,1) both; } @keyframes hai-check-spring{ 0%{ transform:scale(0.7); opacity:0.5; } 60%{ transform:scale(1.3); } 100%{ transform:scale(1); opacity:1; } } /* 11. Team (Group bobbing animation) */ body:not(.acc-fullscreen) .side__item:hover .hai-team .hai-team-h1{ animation:hai-bob .35s ease .05s both; } body:not(.acc-fullscreen) .side__item:hover .hai-team .hai-team-h2{ animation:hai-bob .35s ease 0s both; } body:not(.acc-fullscreen) .side__item:hover .hai-team .hai-team-h3{ animation:hai-bob .35s ease .1s both; } @keyframes hai-bob{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } 100%{ transform:translateY(0); } } /* 12. Map (Pin bounce & drop) */ body:not(.acc-fullscreen) .side__item:hover .hai-map .hai-pin-body{ animation:hai-pin-bounce .45s cubic-bezier(.34,1.56,.64,1) both; } @keyframes hai-pin-bounce{ 0%{ transform:translateY(0); } 40%{ transform:translateY(-3.5px); } 75%{ transform:translateY(1px); } 100%{ transform:translateY(0); } } /* 13. Live Map (Radar wave ripple) */ body:not(.acc-fullscreen) .side__item:hover .hai-livemap .hai-w1{ animation:hai-wave-pulse .6s ease 0s infinite alternate; } body:not(.acc-fullscreen) .side__item:hover .hai-livemap .hai-w2{ animation:hai-wave-pulse .6s ease .2s infinite alternate; } @keyframes hai-wave-pulse{ 0%{ opacity:0.3; transform:scale(0.9); } 100%{ opacity:1; transform:scale(1.05); } } /* 14. WhatsApp Messages (Chat bubble pop) */ body:not(.acc-fullscreen) .side__item:hover .hai-messages .hai-bubble-1{ animation:hai-bubble-pop .4s ease both; } body:not(.acc-fullscreen) .side__item:hover .hai-messages .hai-bubble-2{ animation:hai-bubble-pop .4s ease .1s both; } @keyframes hai-bubble-pop{ 0%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-1px,-1.5px) scale(1.08); } 100%{ transform:translate(0,0) scale(1); } } /* 15. New Promotion (Megaphone tilt & blast) */ body:not(.acc-fullscreen) .side__item:hover .hai-promo .hai-megaphone{ transform-origin:7.5px 12px; animation:hai-megaphone-tilt .4s ease both; } @keyframes hai-megaphone-tilt{ 0%{ transform:rotate(0); } 50%{ transform:rotate(-12deg); } 100%{ transform:rotate(0); } } /* 16. Send Invoice (Document dollar bounce) */ body:not(.acc-fullscreen) .side__item:hover .hai-invoice .hai-inv-sign{ transform-origin:12px 14.5px; animation:hai-bob .35s ease both; } /* 17. Link a phone QR code (Scan pulse) */ body:not(.acc-fullscreen) .side__item:hover .hai-qrcode .hai-qr-box{ animation:hai-qr-pulse .45s ease both; } @keyframes hai-qr-pulse{ 0%{ stroke:currentColor; } 50%{ stroke:#0073ea; } 100%{ stroke:currentColor; } } body:not(.acc-fullscreen) .side__sep{ height:1px; background:var(--acc-line-soft); margin:var(--crm-sp-2); border:0 } body:not(.acc-fullscreen) .side-toggle{ width:26px; height:26px; border-radius:999px; border:1px solid var(--acc-line); background:var(--acc-surface, #fff); color:var(--acc-ink-soft, #64748b); display:inline-flex; align-items:center; justify-content:center; padding:0; margin:0; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:0 2px 8px rgba(0,0,0,.08); transition:left .25s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; } body:not(.acc-fullscreen) .side-toggle:hover{ color:var(--blue, #0073ea); background:#fff; border-color:var(--blue, #0073ea); box-shadow:0 4px 12px rgba(0,115,234,.18); transform:scale(1.06); } /* ══════════════════════════════════════════════════════════════════ BOARD HEAD (mirrors .accpage__head) ══════════════════════════════════════════════════════════════════ */ @keyframes board-enter { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } body:not(.acc-fullscreen) .board, body:not(.acc-fullscreen) .dash{ width:100%; padding:var(--crm-sp-5) var(--crm-sp-6) var(--crm-sp-6); animation:board-enter .32s cubic-bezier(.16, 1, .3, 1) backwards; } body:not(.acc-fullscreen) .bh{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--crm-sp-3); padding:0 0 var(--crm-sp-4); border:0; } body:not(.acc-fullscreen) .bh__title{ margin:0; font-weight:700; color:#0f172a; font-size:clamp(calc(19px * var(--crm-fs)),2.3vw,calc(25px * var(--crm-fs))); letter-spacing:-0.3px; } body:not(.acc-fullscreen) .bh__actions{ display:flex; gap:var(--crm-sp-2); flex-wrap:wrap } /* ══════════════════════════════════════════════════════════════════ BUTTONS (Modern UI/UX with smooth hover & elevation physics) ══════════════════════════════════════════════════════════════════ */ body:not(.acc-fullscreen) .tbtn, body:not(.acc-fullscreen) .btn-cancel, body:not(.acc-fullscreen) .mdl__f button.cancel, body:not(.acc-fullscreen) .wa-btn--ghost, body:not(.acc-fullscreen) .impm__next{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; height:auto; min-height:0; border-radius:9px; border:1px solid #e2e8f0; background:#ffffff; color:#334155; font:inherit; font-size:calc(13px * var(--crm-fs)); font-weight:600; cursor:pointer; white-space:nowrap; box-shadow:0 1px 2px rgba(0,0,0,.04); transition:all .18s cubic-bezier(.34,1.56,.64,1); } body:not(.acc-fullscreen) .tbtn:hover, body:not(.acc-fullscreen) .btn-cancel:hover, body:not(.acc-fullscreen) .mdl__f button.cancel:hover, body:not(.acc-fullscreen) .wa-btn--ghost:hover, body:not(.acc-fullscreen) .impm__next:hover{ background:#f8fafc; border-color:#cbd5e1; color:#0f172a; transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.06); } body:not(.acc-fullscreen) .bh__invite{ display:inline-flex; align-items:center; gap:7px; padding:6px 14px; height:34px; min-height:0; border-radius:10px; border:1px solid #ddd6fe; background:linear-gradient(135deg, #faf5ff 0%, #f5f3ff 60%, #eef2ff 100%); color:#7c3aed; font:inherit; font-size:calc(13px * var(--crm-fs)); font-weight:600; cursor:pointer; white-space:nowrap; box-shadow:0 1px 3px rgba(124, 58, 237, 0.08), 0 1px 2px rgba(124, 58, 237, 0.04); transition:all .2s cubic-bezier(.34,1.56,.64,1); outline:none; } body:not(.acc-fullscreen) .bh__invite:hover{ background:linear-gradient(135deg, #f3e8ff 0%, #ede9fe 60%, #e0e7ff 100%); border-color:#c4b5fd; color:#6d28d9; transform:translateY(-1.5px); box-shadow:0 6px 18px -2px rgba(124, 58, 237, 0.22), 0 2px 6px rgba(124, 58, 237, 0.12); } body:not(.acc-fullscreen) .bh__invite:active{ transform:translateY(0) scale(0.97); box-shadow:0 2px 6px rgba(124, 58, 237, 0.15); } body:not(.acc-fullscreen) .bh__invite svg, body:not(.acc-fullscreen) .bh__invite .bh__invite-ic{ width:16px; height:16px; color:#7c3aed; flex-shrink:0; transition:transform .28s cubic-bezier(.34,1.56,.64,1); } body:not(.acc-fullscreen) .bh__invite:hover svg, body:not(.acc-fullscreen) .bh__invite:hover .bh__invite-ic{ color:#6d28d9; transform:rotate(15deg) scale(1.15); } body:not(.acc-fullscreen) .new-btn, body:not(.acc-fullscreen) .btn-confirm, body:not(.acc-fullscreen) .mdl__f button.ok, body:not(.acc-fullscreen) .lbtn, body:not(.acc-fullscreen) .impm__browse{ border-radius:9px; border:1px solid #005bb7; background:linear-gradient(180deg, #007be5 0%, #006cd8 100%); color:#fff; font:inherit; font-size:calc(13px * var(--crm-fs)); font-weight:600; cursor:pointer; box-shadow:0 1px 3px rgba(0, 115, 234, 0.25), 0 1px 2px rgba(0,0,0,.05); height:auto; transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, filter .15s ease; } body:not(.acc-fullscreen) .btn-confirm, body:not(.acc-fullscreen) .mdl__f button.ok, body:not(.acc-fullscreen) .impm__browse{ padding:9px 16px } body:not(.acc-fullscreen) .lbtn{ width:100%; padding:11px 16px } body:not(.acc-fullscreen) .new-btn{ display:inline-flex; align-items:center; overflow:hidden } body:not(.acc-fullscreen) .new-btn__main{ padding:9px 13px; font-weight:600 } body:not(.acc-fullscreen) .new-btn__caret{ display:grid; place-items:center; width:26px; align-self:stretch; border-inline-start:1px solid rgba(255,255,255,.3); } body:not(.acc-fullscreen) .new-btn:hover, body:not(.acc-fullscreen) .btn-confirm:hover, body:not(.acc-fullscreen) .mdl__f button.ok:hover, body:not(.acc-fullscreen) .lbtn:hover, body:not(.acc-fullscreen) .impm__browse:hover{ filter:brightness(1.05); transform:translateY(-1.5px); box-shadow:0 6px 16px rgba(0, 115, 234, 0.35); } body:not(.acc-fullscreen) .new-btn:active, body:not(.acc-fullscreen) .btn-confirm:active, body:not(.acc-fullscreen) .mdl__f button.ok:active, body:not(.acc-fullscreen) .lbtn:active{ transform:translateY(0); filter:brightness(0.96); } body:not(.acc-fullscreen) .ibtn{ width:30px; height:30px; border-radius:8px; border:1px solid transparent; background:transparent; color:#64748b; display:inline-grid; place-items:center; cursor:pointer; transition:all .15s ease; } body:not(.acc-fullscreen) .ibtn:hover{ background:#f1f5f9; color:#0f172a; transform:scale(1.08); } body:not(.acc-fullscreen) .ibtn--del:hover{ background:#fff1f2; color:#e11d48; border-color:#fecdd3; } /* ══════════════════════════════════════════════════════════════════ FLUTTER / LINEAR UI/UX PRO MAX - UNIVERSAL TOOLBAR ══════════════════════════════════════════════════════════════════ */ body:not(.acc-fullscreen) .toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 0 16px 0; border:0; background:transparent; width:100%; flex-wrap:nowrap; } body:not(.acc-fullscreen) .toolbar__left, body:not(.acc-fullscreen) .toolbar__primary{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; } body:not(.acc-fullscreen) .toolbar__right, body:not(.acc-fullscreen) .toolbar__controls{ display:flex; align-items:center; gap:8px; margin-inline-start:auto; flex-shrink:0; flex-wrap:nowrap; } /* ── Primary Action Button (+ New) ── */ body:not(.acc-fullscreen) .btn-primary, body:not(.acc-fullscreen) .new-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:36px; padding:0 16px; border-radius:10px; background:#0073ea; background:linear-gradient(180deg, #007ae8 0%, #0066d6 100%); border:1px solid rgba(0, 85, 185, 0.4); color:#ffffff !important; font-family:inherit; font-size:calc(13px * var(--crm-fs)); font-weight:600; letter-spacing:-0.01em; box-shadow:0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 115, 234, 0.25); cursor:pointer; outline:none; transition:transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease, filter .18s ease; user-select:none; text-decoration:none; } body:not(.acc-fullscreen) .btn-primary svg, body:not(.acc-fullscreen) .new-btn svg{ flex-shrink:0; transition:transform .2s ease; } body:not(.acc-fullscreen) .btn-primary:hover, body:not(.acc-fullscreen) .new-btn:hover{ transform:translateY(-1.5px); filter:brightness(1.04); box-shadow:0 3px 6px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 115, 234, 0.32); } body:not(.acc-fullscreen) .btn-primary:hover svg, body:not(.acc-fullscreen) .new-btn:hover svg{ transform:rotate(90deg); } body:not(.acc-fullscreen) .btn-primary:active, body:not(.acc-fullscreen) .new-btn:active{ transform:translateY(0.5px) scale(0.98); box-shadow:0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 115, 234, 0.2); } body:not(.acc-fullscreen) .new-btn__main{ padding:0; } body:not(.acc-fullscreen) .new-btn__caret{ display:none; } /* ── Integrated Search Box ── */ body:not(.acc-fullscreen) .search-box, body:not(.acc-fullscreen) .tb-search{ display:flex; align-items:center; gap:8px; height:36px; padding:0 10px 0 12px; background:#ffffff; border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 1px 2px rgba(0, 0, 0, 0.03); min-width:240px; max-width:480px; flex:1 1 360px; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; box-sizing:border-box; } body:not(.acc-fullscreen) .search-box:hover, body:not(.acc-fullscreen) .tb-search:hover{ border-color:#cbd5e1; } body:not(.acc-fullscreen) .search-box:focus-within, body:not(.acc-fullscreen) .tb-search:focus-within{ border-color:#0073ea; box-shadow:0 0 0 3px rgba(0, 115, 234, 0.14); background:#ffffff; } body:not(.acc-fullscreen) .search-box svg, body:not(.acc-fullscreen) .tb-search svg{ color:#94a3b8; flex-shrink:0; transition:color .18s ease; } body:not(.acc-fullscreen) .search-box:focus-within svg, body:not(.acc-fullscreen) .tb-search:focus-within svg{ color:#0073ea; } body:not(.acc-fullscreen) .search-box input, body:not(.acc-fullscreen) .tb-search input{ flex:1; min-width:0; border:0; outline:none; background:transparent; font:inherit; font-size:calc(13px * var(--crm-fs)); color:#0f172a; padding:0; } body:not(.acc-fullscreen) .search-box input::placeholder, body:not(.acc-fullscreen) .tb-search input::placeholder{ color:#94a3b8; font-weight:400; } body:not(.acc-fullscreen) .search-clear, body:not(.acc-fullscreen) .tb-search__clear{ border:0; background:#f1f5f9; color:#64748b; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; font-size:10px; line-height:1; transition:background .15s ease, color .15s ease; flex-shrink:0; } body:not(.acc-fullscreen) .search-clear:hover, body:not(.acc-fullscreen) .tb-search__clear:hover{ background:#e2e8f0; color:#0f172a; } body:not(.acc-fullscreen) .search-kbd{ font-family:inherit; font-size:11px; font-weight:600; color:#94a3b8; background:#f8fafc; border:1px solid #e2e8f0; border-radius:5px; padding:1px 5px; line-height:1.2; } /* ── Filter Divider ── */ body:not(.acc-fullscreen) .toolbar__divider{ width:1px; height:20px; background:#e2e8f0; margin:0 2px; flex-shrink:0; } /* ── Sleek Minimal Filter Pills ── */ body:not(.acc-fullscreen) .filter-pill, body:not(.acc-fullscreen) .tb-filter{ position:relative; display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 8px 0 10px; background:#ffffff; border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 1px 2px rgba(0, 0, 0, 0.03); transition:all .18s ease; box-sizing:border-box; } body:not(.acc-fullscreen) .filter-pill:hover, body:not(.acc-fullscreen) .tb-filter:hover{ border-color:#cbd5e1; background:#f8fafc; } body:not(.acc-fullscreen) .filter-pill:focus-within, body:not(.acc-fullscreen) .tb-filter:focus-within{ border-color:#0073ea; box-shadow:0 0 0 3px rgba(0, 115, 234, 0.14); background:#ffffff; } body:not(.acc-fullscreen) .filter-pill.is-filtered, body:not(.acc-fullscreen) .tb-filter.is-filtered{ border-color:#bfdbfe; background:#eff6ff; } body:not(.acc-fullscreen) .filter-pill svg:not(.pill-chevron), body:not(.acc-fullscreen) .tb-filter svg:not(.pill-chevron){ color:#64748b; flex-shrink:0; } body:not(.acc-fullscreen) .filter-pill.is-filtered svg:not(.pill-chevron), body:not(.acc-fullscreen) .tb-filter.is-filtered svg:not(.pill-chevron){ color:#0073ea; } body:not(.acc-fullscreen) .filter-pill select, body:not(.acc-fullscreen) .tb-filter select, body:not(.acc-fullscreen) .toolbar select{ appearance:none !important; -webkit-appearance:none !important; border:0 !important; border-radius:0 !important; background:transparent !important; background-image:none !important; box-shadow:none !important; outline:none !important; height:100% !important; margin:0 !important; padding:0 16px 0 0 !important; font:inherit !important; font-size:calc(13px * var(--crm-fs)) !important; font-weight:500 !important; color:#334155 !important; cursor:pointer !important; line-height:34px !important; } body:not(.acc-fullscreen) .filter-pill.is-filtered select, body:not(.acc-fullscreen) .tb-filter.is-filtered select{ color:#0073ea !important; font-weight:600 !important; } body:not(.acc-fullscreen) .pill-chevron{ position:absolute; inset-inline-end:8px; pointer-events:none; color:#94a3b8 !important; } /* ── Actions Group (Export, Refresh, Reset) ── */ body:not(.acc-fullscreen) .actions-group, body:not(.acc-fullscreen) .tb-actions{ display:flex; align-items:center; gap:6px; } body:not(.acc-fullscreen) .action-btn, body:not(.acc-fullscreen) .tb-action-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 12px; background:#ffffff; border:1px solid #e2e8f0; border-radius:10px; color:#334155; font-family:inherit; font-size:calc(13px * var(--crm-fs)); font-weight:500; cursor:pointer; box-shadow:0 1px 2px rgba(0, 0, 0, 0.03); transition:all .18s ease; user-select:none; outline:none; box-sizing:border-box; } body:not(.acc-fullscreen) .action-btn svg, body:not(.acc-fullscreen) .tb-action-btn svg{ color:#64748b; transition:color .18s ease, transform .22s ease; flex-shrink:0; } body:not(.acc-fullscreen) .action-btn:hover, body:not(.acc-fullscreen) .tb-action-btn:hover{ background:#f8fafc; border-color:#cbd5e1; color:#0f172a; transform:translateY(-1px); box-shadow:0 3px 8px rgba(0, 0, 0, 0.05); } body:not(.acc-fullscreen) .action-btn:hover svg, body:not(.acc-fullscreen) .tb-action-btn:hover svg{ color:#0f172a; } body:not(.acc-fullscreen) .action-btn:active, body:not(.acc-fullscreen) .tb-action-btn:active{ transform:translateY(0); } body:not(.acc-fullscreen) .action-btn--icon, body:not(.acc-fullscreen) .tb-action-btn--icon{ width:36px; padding:0; } body:not(.acc-fullscreen) .action-btn--icon:hover svg, body:not(.acc-fullscreen) .tb-action-btn--icon:hover svg{ transform:rotate(180deg); } body:not(.acc-fullscreen) .action-btn--reset, body:not(.acc-fullscreen) .tb-action-btn--reset{ background:#eff6ff; border-color:#bfdbfe; color:#0073ea; font-weight:600; } body:not(.acc-fullscreen) .action-btn--reset svg, body:not(.acc-fullscreen) .tb-action-btn--reset svg{ color:#0073ea; } body:not(.acc-fullscreen) .action-btn--reset:hover, body:not(.acc-fullscreen) .tb-action-btn--reset:hover{ background:#dbeafe; border-color:#93c5fd; color:#005bb7; } body:not(.acc-fullscreen) .mdl input, body:not(.acc-fullscreen) .mdl select, body:not(.acc-fullscreen) .mdl textarea, body:not(.acc-fullscreen) .lfield input, body:not(.acc-fullscreen) .impm__mapcol select, body:not(.acc-fullscreen) .wa-f input, body:not(.acc-fullscreen) .wa-f select, body:not(.acc-fullscreen) .wa-pad input, body:not(.acc-fullscreen) .wa-pad select, body:not(.acc-fullscreen) .wa-pad textarea{ width:100%; padding:9px 12px; height:auto; line-height:normal; border:1px solid #e2e8f0; border-radius:var(--crm-r); background:#ffffff; color:#0f172a; font:inherit; font-size:calc(13px * var(--crm-fs)); box-shadow:0 1px 2px rgba(0,0,0,.02); transition:border-color .15s ease, box-shadow .15s ease; } body:not(.acc-fullscreen) .mdl textarea, body:not(.acc-fullscreen) .wa-pad textarea{ line-height:1.55; min-height:90px } body:not(.acc-fullscreen) .mdl input:focus, body:not(.acc-fullscreen) .mdl select:focus, body:not(.acc-fullscreen) .mdl textarea:focus, body:not(.acc-fullscreen) .lfield input:focus, body:not(.acc-fullscreen) .wa-f input:focus, body:not(.acc-fullscreen) .wa-pad input:focus, body:not(.acc-fullscreen) .wa-pad textarea:focus{ outline:none; border-color:#0073ea; box-shadow:0 0 0 3px rgba(0, 115, 234, 0.12); } body:not(.acc-fullscreen) .mdl label, body:not(.acc-fullscreen) .lfield label, body:not(.acc-fullscreen) .wa-f label{ display:block; margin:var(--crm-sp-3) 0 var(--crm-sp-1); font-size:calc(11.5px * var(--crm-fs)); font-weight:600; color:var(--acc-ink-soft); text-transform:none; letter-spacing:0; } /* Native pop-up buttons everywhere else in the console. */ body:not(.acc-fullscreen) select:not([data-nosearch]){ padding:9px 12px; height:auto; border:1px solid var(--acc-line); border-radius:var(--crm-r); background:var(--acc-surface); color:var(--acc-ink-2); font:inherit; font-size:calc(13px * var(--crm-fs)); appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%234c5a70' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-inline-end:28px; } body:not(.acc-fullscreen) [dir="rtl"] select:not([data-nosearch]){ background-position:left 10px center } /* ══════════════════════════════════════════════════════════════════ CARDS · KPIs (mirrors .acccard / .acckpi) ══════════════════════════════════════════════════════════════════ */ body:not(.acc-fullscreen) .card, body:not(.acc-fullscreen) .dt-card{ background:var(--acc-surface); border:1px solid var(--acc-line); border-radius:var(--crm-r-card); box-shadow:var(--acc-shadow); overflow:hidden; } body:not(.acc-fullscreen) .card__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--crm-sp-3); padding:14px 18px; border-bottom:1px solid var(--acc-line); font-size:calc(15.5px * var(--crm-fs)); font-weight:700; color:var(--acc-ink); background:transparent; letter-spacing:0; } /* ══════════════════════════════════════════════════════════════════ CARD ANIMATIONS & HEROICONS INTERACTIONS ══════════════════════════════════════════════════════════════════ */ @keyframes bento-card-enter { 0% { opacity: 0; transform: translateY(14px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } } body:not(.acc-fullscreen) .kpi-card{ background:var(--acc-surface); border:1px solid var(--acc-line); border-radius:var(--crm-r-lg); box-shadow:var(--acc-shadow); padding:14px 16px; position:relative; overflow:hidden; transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .22s ease; animation:bento-card-enter .45s cubic-bezier(.16, 1, .3, 1) backwards; } body:not(.acc-fullscreen) .kpi-card:hover{ transform:translateY(-4px); border-color:var(--acc-line-firm); box-shadow:0 12px 28px -6px rgba(0,0,0,.08), 0 3px 10px -2px rgba(0,0,0,.04); } body:not(.acc-fullscreen) .bento__kpis .kpi-card:nth-child(1){ animation-delay:.03s; } body:not(.acc-fullscreen) .bento__kpis .kpi-card:nth-child(2){ animation-delay:.06s; } body:not(.acc-fullscreen) .bento__kpis .kpi-card:nth-child(3){ animation-delay:.09s; } body:not(.acc-fullscreen) .bento__kpis .kpi-card:nth-child(4){ animation-delay:.12s; } body:not(.acc-fullscreen) .bento__kpis .kpi-card:nth-child(5){ animation-delay:.15s; } body:not(.acc-fullscreen) .bento__kpis .kpi-card:nth-child(6){ animation-delay:.18s; } body:not(.acc-fullscreen) .bento__kpis .kpi-card:nth-child(7){ animation-delay:.21s; } /* ══════════════════════════════════════════════════════════════════ MODERN DASHBOARD KPI CARDS (Apple / Linear Bento Style) ══════════════════════════════════════════════════════════════════ */ body:not(.acc-fullscreen) .kpi-card { background: #ffffff; border: 1px solid #eef2f6; border-radius: 16px; box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.04), 0 1px 3px -1px rgba(15, 23, 42, 0.02); padding: 14px 16px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 124px; box-sizing: border-box; transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .22s ease; animation: bento-card-enter .45s cubic-bezier(.16, 1, .3, 1) backwards; } body:not(.acc-fullscreen) .kpi-card:hover { transform: translateY(-3px); border-color: #cbd5e1; box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.03); } /* Card Header */ body:not(.acc-fullscreen) .kpi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } body:not(.acc-fullscreen) .kpi-title { font-size: calc(13px * var(--crm-fs)); font-weight: 700; color: #0f172a; line-height: 1.2; } body:not(.acc-fullscreen) .kpi-sublabel { font-size: calc(11px * var(--crm-fs)); font-weight: 500; color: #94a3b8; margin-top: 2px; } /* Card Pills */ body:not(.acc-fullscreen) .kpi-pill { padding: 3px 8px; border-radius: 999px; font-size: calc(10.5px * var(--crm-fs)); font-weight: 600; line-height: 1.2; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } body:not(.acc-fullscreen) .kpi-pill--blue { background: #eff6ff; color: #0073ea; border: 1px solid #dbeafe; } body:not(.acc-fullscreen) .kpi-pill--green { background: #ecfdf5; color: #059669; border: 1px solid #bbf7d0; } body:not(.acc-fullscreen) .kpi-pill--teal { background: #f0fdfa; color: #0891b2; border: 1px solid #a5f3fc; } body:not(.acc-fullscreen) .kpi-pill--amber { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; } body:not(.acc-fullscreen) .kpi-pill--purple { background: #faf5ff; color: #9333ea; border: 1px solid #f3e8ff; } body:not(.acc-fullscreen) .kpi-pill--indigo { background: #eef2ff; color: #4f46e5; border: 1px solid #e0e7ff; } body:not(.acc-fullscreen) .kpi-pill--rose { background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3; } /* Card Main Value */ body:not(.acc-fullscreen) .kpi-main { display: flex; align-items: baseline; justify-content: space-between; margin: 6px 0 4px; } body:not(.acc-fullscreen) .kpi-card .big { font-size: clamp(calc(22px * var(--crm-fs)), 2.2vw, calc(26px * var(--crm-fs))); font-weight: 800; color: #0f172a; letter-spacing: -0.03em; line-height: 1.1; } body:not(.acc-fullscreen) .kpi-card .big__sub { font-size: calc(13px * var(--crm-fs)); font-weight: 500; color: #94a3b8; letter-spacing: 0; margin-left: 2px; } /* Card Footer / Trend */ body:not(.acc-fullscreen) .kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: calc(11px * var(--crm-fs)); color: #64748b; margin-top: 2px; } body:not(.acc-fullscreen) .kpi-trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; } body:not(.acc-fullscreen) .kpi-trend.is-ok { color: #10b981; } body:not(.acc-fullscreen) .kpi-trend.is-blue { color: #0073ea; } body:not(.acc-fullscreen) .kpi-trend.is-amber { color: #d97706; } body:not(.acc-fullscreen) .kpi-trend.is-purple { color: #9333ea; } body:not(.acc-fullscreen) .kpi-trend.is-indigo { color: #4f46e5; } body:not(.acc-fullscreen) .kpi-trend.is-rose { color: #e11d48; } /* Micro-Visual: Live dot */ body:not(.acc-fullscreen) .kpi-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; display: inline-block; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25); animation: status-dot-pulse 2s infinite ease-in-out; } /* Micro-Visual: Avatars Stack */ body:not(.acc-fullscreen) .kpi-avatars { display: flex; align-items: center; } body:not(.acc-fullscreen) .kpi-av { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #ffffff; display: inline-grid; place-items: center; font-size: 9px; font-weight: 700; color: #ffffff; margin-left: -6px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } body:not(.acc-fullscreen) .kpi-av:first-child { margin-left: 0; } body:not(.acc-fullscreen) .kpi-av--more { background: #f1f5f9; color: #64748b; font-size: 8.5px; } /* Micro-Visual: 5 Mini Vertical Bars (Visits) */ body:not(.acc-fullscreen) .kpi-bars { display: flex; align-items: flex-end; gap: 3px; height: 24px; } body:not(.acc-fullscreen) .kpi-bar { width: 5px; border-radius: 999px; background: #e2e8f0; transition: height .3s ease; } body:not(.acc-fullscreen) .kpi-bar.is-active { background: #00c875; } /* Micro-Visual: Dual Ring Arc Gauge */ body:not(.acc-fullscreen) .kpi-dual-gauge { width: 32px; height: 32px; position: relative; flex-shrink: 0; } body:not(.acc-fullscreen) .kpi-dual-gauge svg { transform: rotate(-90deg); } /* Micro-Visual: Horizontal Multi-Progress (Leads) */ body:not(.acc-fullscreen) .kpi-prog-wrap { display: flex; flex-direction: column; gap: 4px; width: 100%; } body:not(.acc-fullscreen) .kpi-prog-row { display: flex; align-items: center; gap: 6px; font-size: 10.5px; } body:not(.acc-fullscreen) .kpi-prog-lbl { width: 52px; color: #64748b; font-weight: 500; white-space: nowrap; } body:not(.acc-fullscreen) .kpi-prog-track { flex: 1; height: 5px; background: #f1f5f9; border-radius: 999px; overflow: hidden; } body:not(.acc-fullscreen) .kpi-prog-fill { height: 100%; border-radius: 999px; } body:not(.acc-fullscreen) .kpi-prog-fill.is-purple { background: #8b5cf6; } body:not(.acc-fullscreen) .kpi-prog-fill.is-blue { background: #0073ea; } body:not(.acc-fullscreen) .kpi-prog-fill.is-green { background: #00c875; } body:not(.acc-fullscreen) .kpi-prog-fill.is-amber { background: #f59e0b; } body:not(.acc-fullscreen) .kpi-prog-val { font-size: 10px; font-weight: 700; color: #0f172a; min-width: 14px; text-align: right; } /* Micro-Visual: Sparkline Wave (Forecast) */ body:not(.acc-fullscreen) .kpi-wave-svg { width: 56px; height: 22px; } body:not(.acc-fullscreen) .chartwrap{ padding:var(--crm-sp-3) var(--crm-sp-4) var(--crm-sp-4); position:relative; flex:1; min-height:0; } /* ══════════════════════════════════════════════════════════════════ THE DASHBOARD BENTO — Modern Modular Command Center ══════════════════════════════════════════════════════════════════ */ body:not(.acc-fullscreen) .bento{ display:flex; flex-direction:column; gap:var(--crm-sp-3); } /* The ledger's own KPI strip: flex-wrap with a 200px basis */ body:not(.acc-fullscreen) .bento__kpis{ display:flex; flex-wrap:wrap; gap:var(--crm-sp-3); } body:not(.acc-fullscreen) .bento__kpis .kpi-card{ flex:1 1 200px; } body:not(.acc-fullscreen) .bento__acts .wa-tiles{ margin-top:0 } /* WhatsApp Action Buttons animations */ body:not(.acc-fullscreen) .wa-tile{ transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, filter .18s ease; animation:bento-card-enter .45s cubic-bezier(.16, 1, .3, 1) backwards; } body:not(.acc-fullscreen) .wa-tile:nth-child(1){ animation-delay:.22s; } body:not(.acc-fullscreen) .wa-tile:nth-child(2){ animation-delay:.26s; } body:not(.acc-fullscreen) .wa-tile:nth-child(3){ animation-delay:.30s; } body:not(.acc-fullscreen) .wa-tile:hover{ transform:translateY(-3px) scale(1.015); box-shadow:0 10px 24px -4px rgba(0,0,0,.22); } body:not(.acc-fullscreen) .wa-tile:hover .wa-tile__ic svg{ transform:scale(1.15); } /* ── modern dashboard split: Left Feed | Right Charts Bento ──────── */ body:not(.acc-fullscreen) .bento__split{ display:grid; grid-template-columns:minmax(340px, 1fr) minmax(460px, 1.45fr); gap:var(--crm-sp-3); align-items:stretch; } body:not(.acc-fullscreen) .bento__split .bento__feed{ display:flex; flex-direction:column; min-height:0; height:100%; transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .22s ease; animation:bento-card-enter .48s cubic-bezier(.16, 1, .3, 1) .3s backwards; } body:not(.acc-fullscreen) .bento__split .bento__feed:hover{ border-color:var(--acc-line-firm); box-shadow:0 10px 24px -4px rgba(0,0,0,.08); } body:not(.acc-fullscreen) .bento__split .bento__feed #feed{ flex:1; min-height:0; overflow-y:auto; max-height:560px; padding:var(--crm-sp-2); } body:not(.acc-fullscreen) .bento__charts{ display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--crm-sp-3); } body:not(.acc-fullscreen) .bento__chart-card{ display:flex; flex-direction:column; min-height:0; grid-column:span 1; transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .22s ease; animation:bento-card-enter .48s cubic-bezier(.16, 1, .3, 1) backwards; } body:not(.acc-fullscreen) .bento__chart-card:nth-child(1){ animation-delay:.33s; } body:not(.acc-fullscreen) .bento__chart-card:nth-child(2){ animation-delay:.37s; } body:not(.acc-fullscreen) .bento__chart-card:nth-child(3){ animation-delay:.41s; } body:not(.acc-fullscreen) .bento__chart-card:nth-child(4){ animation-delay:.45s; } body:not(.acc-fullscreen) .bento__chart-card:hover{ transform:translateY(-3px); border-color:var(--acc-line-firm); box-shadow:0 10px 26px -6px rgba(0,0,0,.08); } body:not(.acc-fullscreen) .bento__chart-card:hover .chart-head__icon, body:not(.acc-fullscreen) .bento__feed:hover .chart-head__icon{ transform:scale(1.15) rotate(4deg); } body:not(.acc-fullscreen) .chart-head__title{ display:flex; align-items:center; gap:8px; font-size:calc(13.5px * var(--crm-fs)); font-weight:700; color:var(--acc-ink); } body:not(.acc-fullscreen) .chart-head__icon{ width:26px; height:26px; border-radius:7px; display:inline-grid; place-items:center; font-size:12.5px; flex-shrink:0; transition:transform .22s cubic-bezier(.34,1.56,.64,1); } body:not(.acc-fullscreen) .chart-head__meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } body:not(.acc-fullscreen) .chart-badge{ font-size:calc(11px * var(--crm-fs)); font-weight:600; color:var(--acc-ink-soft); background:var(--acc-band); padding:2px 8px; border-radius:6px; border:1px solid var(--acc-line-soft); white-space:nowrap; } body:not(.acc-fullscreen) .chart-pill-group{ display:flex; align-items:center; gap:6px; font-size:calc(11px * var(--crm-fs)); color:var(--acc-ink-soft); } body:not(.acc-fullscreen) .chart-legend-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; vertical-align:middle; } body:not(.acc-fullscreen) .chart-legend-lbl{ margin-inline-end:2px; font-size:calc(11px * var(--crm-fs)); } body:not(.acc-fullscreen) .chartwrap--donut{ display:flex; flex-direction:column; align-items:center; justify-content:center; } body:not(.acc-fullscreen) .bento__feed{ display:flex; flex-direction:column; min-height:0 } /* ── the activity feed ──────────────────────────────────────────── */ /* Capped so the dashboard stays about one screen: without the charts the page is short, and 24 events at full width would otherwise run well past the fold. Scrolls inside the card instead. */ body:not(.acc-fullscreen) .bento__feed #feed{ flex:1; min-height:0; overflow-y:auto; padding:var(--crm-sp-2); max-height:min(62vh,640px); } /* At full width an event fits on one line, so the meta sits beside the sentence rather than under it — a log line, not a stacked card. It still wraps to a second line when the window is narrow. */ @media (min-width:1000px){ body:not(.acc-fullscreen) .feed__body{ display:flex; align-items:baseline; gap:var(--crm-sp-3); flex-wrap:wrap; } body:not(.acc-fullscreen) .feed__meta{ margin-top:0 } } body:not(.acc-fullscreen) .feed__count{ font-weight:500; font-size:calc(11.5px * var(--crm-fs)); color:var(--acc-ink-soft); } body:not(.acc-fullscreen) .feed__row{ display:flex; align-items:flex-start; gap:var(--crm-sp-2); padding:var(--crm-sp-2); border-radius:9px; border-bottom:1px solid var(--acc-line-soft); } body:not(.acc-fullscreen) .feed__row:last-child{ border-bottom:0 } body:not(.acc-fullscreen) .feed__row:hover{ background:var(--acc-band) } body:not(.acc-fullscreen) .feed__body{ flex:1; min-width:0 } body:not(.acc-fullscreen) .feed__txt{ font-size:calc(13px * var(--crm-fs)); color:var(--acc-ink-2); line-height:1.45; } body:not(.acc-fullscreen) .feed__txt b{ font-weight:600; color:var(--acc-ink) } body:not(.acc-fullscreen) .feed__meta{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:3px; font-size:calc(11.5px * var(--crm-fs)); color:var(--acc-ink-mute); unicode-bidi:plaintext; } body:not(.acc-fullscreen) .feed__badge{ border-radius:999px; padding:2px 8px; font-size:calc(10.5px * var(--crm-fs)); font-weight:600; white-space:nowrap; } body:not(.acc-fullscreen) .feed__badge.is-ok{ background:var(--acc-total); color:var(--acc-green) } body:not(.acc-fullscreen) .feed__badge.is-warn{ background:var(--acc-red-soft); color:var(--acc-red) } body:not(.acc-fullscreen) .feed__time{ font-size:calc(11px * var(--crm-fs)); color:var(--acc-ink-mute); white-space:nowrap; margin-top:2px; } /* ══════════════════════════════════════════════════════════════════ TABLES — Phenix grids: header band, column rules, banded rows This is the most recognisable thing the ledger does, and the CRM's grids are the same object, so they are cut identically. ══════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ BOARD KPI SUMMARY RIBBON (UI Card Kit Pro Edition) ══════════════════════════════════════════════════════════════════ */ body:not(.acc-fullscreen) .board__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } body:not(.acc-fullscreen) .board__kpi-card { background: #ffffff; border: 1px solid #e9e9ee; border-radius: 18px; box-shadow: 0 1px 2px rgba(20, 20, 30, .04), 0 6px 20px rgba(20, 20, 30, .04); padding: 18px 20px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 142px; box-sizing: border-box; cursor: pointer; transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .22s ease; animation: bento-card-enter .45s cubic-bezier(.16, 1, .3, 1) backwards; user-select: none; } body:not(.acc-fullscreen) .board__kpis .board__kpi-card:nth-child(1){ animation-delay:.02s; } body:not(.acc-fullscreen) .board__kpis .board__kpi-card:nth-child(2){ animation-delay:.06s; } body:not(.acc-fullscreen) .board__kpis .board__kpi-card:nth-child(3){ animation-delay:.10s; } body:not(.acc-fullscreen) .board__kpis .board__kpi-card:nth-child(4){ animation-delay:.14s; } body:not(.acc-fullscreen) .board__kpis .board__kpi-card:nth-child(5){ animation-delay:.18s; } body:not(.acc-fullscreen) .board__kpi-card:hover { transform: translateY(-3px); border-color: #cbd5e1; box-shadow: 0 12px 28px rgba(20, 20, 30, .08); } body:not(.acc-fullscreen) .board__kpi-card.is-active { border-color: #0073ea; background: #ffffff; box-shadow: 0 0 0 2px #0073ea, 0 12px 28px -4px rgba(0, 115, 234, .18); } /* Card Head */ body:not(.acc-fullscreen) .kpi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } body:not(.acc-fullscreen) .kpi-head__meta { display: flex; flex-direction: column; gap: 2px; } body:not(.acc-fullscreen) .kpi-eyebrow { font-size: 11px; font-weight: 700; color: #6f6f77; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2; } body:not(.acc-fullscreen) .kpi-title { margin: 0; font-size: 15px; font-weight: 700; color: #1b1b1f; letter-spacing: -0.01em; line-height: 1.2; } /* Icon Badges */ body:not(.acc-fullscreen) .kpi-icon-badge { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; transition: transform .2s ease; } body:not(.acc-fullscreen) .board__kpi-card:hover .kpi-icon-badge { transform: scale(1.08); } body:not(.acc-fullscreen) .kpi-icon-badge--amber { background: #fffbeb; color: #d97706; } body:not(.acc-fullscreen) .kpi-icon-badge--blue { background: #eff6ff; color: #0073ea; } body:not(.acc-fullscreen) .kpi-icon-badge--purple { background: #f5f3ff; color: #6c4ee0; } body:not(.acc-fullscreen) .kpi-icon-badge--green { background: #f0fdf4; color: #14c25a; } body:not(.acc-fullscreen) .kpi-icon-badge--teal { background: #f0fdfa; color: #0d9488; } /* Main Metric */ body:not(.acc-fullscreen) .kpi-main { display: flex; flex-direction: column; gap: 10px; } body:not(.acc-fullscreen) .kpi-metric { font-size: 32px; font-weight: 700; color: #1b1b1f; letter-spacing: -0.035em; line-height: 1; } body:not(.acc-fullscreen) .kpi-metric--currency { font-size: 26px; letter-spacing: -0.025em; } /* Progress Track Bar */ body:not(.acc-fullscreen) .kpi-track-wrap { width: 100%; } body:not(.acc-fullscreen) .kpi-track { width: 100%; height: 6px; border-radius: 999px; background: #eeeef1; overflow: hidden; } body:not(.acc-fullscreen) .kpi-fill { height: 100%; border-radius: 999px; transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); } body:not(.acc-fullscreen) .kpi-fill--amber { background: #f59e0b; } body:not(.acc-fullscreen) .kpi-fill--blue { background: #0073ea; } body:not(.acc-fullscreen) .kpi-fill--purple { background: #6c4ee0; } body:not(.acc-fullscreen) .kpi-fill--green { background: #14c25a; } body:not(.acc-fullscreen) .kpi-fill--teal { background: #0d9488; } /* Foot Delta Chip */ body:not(.acc-fullscreen) .kpi-foot { display: flex; align-items: center; } body:not(.acc-fullscreen) .uic-delta { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; line-height: 1; } body:not(.acc-fullscreen) .uic-delta__icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; flex-shrink: 0; } body:not(.acc-fullscreen) .uic-delta--amber { color: #b45309; } body:not(.acc-fullscreen) .uic-delta--amber .uic-delta__icon { background: #fef3c7; color: #d97706; } body:not(.acc-fullscreen) .uic-delta--blue { color: #0073ea; } body:not(.acc-fullscreen) .uic-delta--blue .uic-delta__icon { background: #dbeafe; color: #0073ea; } body:not(.acc-fullscreen) .uic-delta--purple { color: #6c4ee0; } body:not(.acc-fullscreen) .uic-delta--purple .uic-delta__icon { background: #ede9fe; color: #6c4ee0; } body:not(.acc-fullscreen) .uic-delta--green { color: #15803d; } body:not(.acc-fullscreen) .uic-delta--green .uic-delta__icon { background: #dcfce7; color: #16a34a; } body:not(.acc-fullscreen) .uic-delta--teal { color: #0f766e; } body:not(.acc-fullscreen) .uic-delta--teal .uic-delta__icon { background: #ccfbf1; color: #0d9488; } /* ══════════════════════════════════════════════════════════════════ TABLES — Phenix grids: header band, column rules, banded rows This is the most recognisable thing the ledger does, and the CRM's grids are the same object, so they are cut identically. ══════════════════════════════════════════════════════════════════ */ @keyframes dt-group-in { 0% { opacity: 0; transform: translateY(12px) scale(0.99); } 100% { opacity: 1; transform: translateY(0) scale(1); } } body:not(.acc-fullscreen) .dt-group{ margin-bottom:var(--crm-sp-5); animation:dt-group-in .42s cubic-bezier(.16, 1, .3, 1) backwards; } body:not(.acc-fullscreen) .dt-group:nth-of-type(1){ animation-delay:.08s; } body:not(.acc-fullscreen) .dt-group:nth-of-type(2){ animation-delay:.13s; } body:not(.acc-fullscreen) .dt-group:nth-of-type(3){ animation-delay:.18s; } body:not(.acc-fullscreen) .dt-group:nth-of-type(4){ animation-delay:.23s; } body:not(.acc-fullscreen) .dt-group:nth-of-type(5){ animation-delay:.28s; } body:not(.acc-fullscreen) .dt-group__head{ display:flex; align-items:center; gap:9px; font-size:calc(15.5px * var(--crm-fs)); font-weight:700; color:var(--acc-ink); padding:0 2px var(--crm-sp-2); border:0; background:transparent; letter-spacing:0; transition:color .18s ease; } body:not(.acc-fullscreen) .dt-group:hover .dt-group__dot{ transform:scale(1.35) rotate(45deg); } body:not(.acc-fullscreen) .dt-group__dot{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; /* the ledger's square dot */ transition:transform .25s cubic-bezier(.34,1.56,.64,1); } body:not(.acc-fullscreen) .dt-group__count{ font-weight:500; color:var(--acc-ink-soft) } body:not(.acc-fullscreen) table.dt{ width:100%; border-collapse:collapse; font-size:calc(13px * var(--crm-fs)); white-space:nowrap; min-width:100%; table-layout:auto; transition:all .18s ease; } body:not(.acc-fullscreen) table.dt td{ overflow:visible; text-overflow:clip; } /* Smooth responsive card wrapper with subtle modern slim scrollbar */ body:not(.acc-fullscreen) .dt-card{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; border-radius:14px; background:#ffffff; border:1px solid #eef2f6; box-shadow:0 2px 8px -2px rgba(15, 23, 42, 0.04); transition:box-shadow .2s ease, border-color .2s ease; } body:not(.acc-fullscreen) .dt-card::-webkit-scrollbar{ height:6px; } body:not(.acc-fullscreen) .dt-card::-webkit-scrollbar-track{ background:transparent; } body:not(.acc-fullscreen) .dt-card::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px; } body:not(.acc-fullscreen) .dt-card::-webkit-scrollbar-thumb:hover{ background:#94a3b8; } body:not(.acc-fullscreen) .dt-card:hover{ box-shadow:0 6px 20px -4px rgba(0,0,0,.06); } body:not(.acc-fullscreen) table.dt thead th{ position:sticky; top:0; z-index:1; padding:12px 14px; text-align:start; font-weight:600; color:var(--acc-ink-soft); background:var(--acc-head); border-bottom:1px solid var(--acc-line-firm); text-transform:none; letter-spacing:0; white-space:nowrap; backdrop-filter:none; -webkit-backdrop-filter:none; font-size:calc(13px * var(--crm-fs)); transition:width .18s ease, min-width .18s ease; } body:not(.acc-fullscreen) table.dt tbody td{ padding:12px 14px; height:auto; color:var(--acc-ink-2); border-bottom:1px solid var(--acc-line-soft); vertical-align:middle; transition:background .15s ease; } /* Column rules, logical so they land correctly in both directions. */ body:not(.acc-fullscreen) table.dt th, body:not(.acc-fullscreen) table.dt td{ border-inline-end:1px solid var(--acc-line-soft) } body:not(.acc-fullscreen) table.dt th:last-child, body:not(.acc-fullscreen) table.dt td:last-child{ border-inline-end:0 } body:not(.acc-fullscreen) table.dt tbody tr:last-child td{ border-bottom:0 } body:not(.acc-fullscreen) table.dt tbody tr{ transition:background .15s ease; } body:not(.acc-fullscreen) table.dt tbody tr:nth-child(even) td{ background:var(--acc-band) } body:not(.acc-fullscreen) table.dt tbody tr:hover td{ background:var(--acc-band-hi) } body:not(.acc-fullscreen) table.dt td.num, body:not(.acc-fullscreen) table.dt th.num{ text-align:end; font-variant-numeric:tabular-nums } body:not(.acc-fullscreen) table.dt th:first-child, body:not(.acc-fullscreen) table.dt td.nm, body:not(.acc-fullscreen) table.dt td:first-child{ min-width:280px; width:clamp(280px, 35vw, 600px); transition:width .2s ease; } body:not(.acc-fullscreen) table.dt td.nm .who{ display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:calc(13.5px * var(--crm-fs)); color:#0f172a; white-space:nowrap; min-width:240px; } body:not(.acc-fullscreen) table.dt td.nm .who .av{ width:28px; height:28px; font-size:12px; font-weight:700; border-radius:50%; flex-shrink:0; } body:not(.acc-fullscreen) table.dt td.wrap{ white-space:normal; word-break:break-word; min-width:260px; max-width:320px; line-height:1.45; } body:not(.acc-fullscreen) table.dt td.acts{ text-align:end; white-space:nowrap; min-width:80px; width:80px; } body:not(.acc-fullscreen) table.dt tbody tr:hover .who .av{ transform:scale(1.15) rotate(3deg); box-shadow:0 2px 8px rgba(0,0,0,.15); } body:not(.acc-fullscreen) table.dt tbody tr:hover .who{ color:#0073ea; } /* A summary row closes the grid in the ledger's total green. */ body:not(.acc-fullscreen) table.dt tfoot td, body:not(.acc-fullscreen) table.dt tbody tr:last-child td[style*="font-weight"]{ background:var(--acc-total); border-top:1px solid var(--acc-line-firm); font-weight:700; color:var(--acc-ink); } /* No min-width:0 here — that is what lets a name cell be squeezed narrower than its own content and clipped by the column beside it. */ body:not(.acc-fullscreen) .who, body:not(.acc-fullscreen) .owncell{ display:inline-flex; align-items:center; gap:9px; font-size:calc(13px * var(--crm-fs)); max-width:none; transition:color .15s ease; } body:not(.acc-fullscreen) .owncell{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; width:max-content; border-radius:8px; padding:3px 6px; cursor:pointer; transition:background .15s ease, transform .15s ease; } body:not(.acc-fullscreen) .owncell:hover{ background:var(--acc-hover); transform:translateY(-1px); } body:not(.acc-fullscreen) .av-xs{ width:22px; height:22px; font-size:10px; flex:0 0 auto } body:not(.acc-fullscreen) .who .av{ transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease; } body:not(.acc-fullscreen) .av{ width:26px; height:26px; flex:0 0 auto; border-radius:50%; display:inline-grid; place-items:center; color:#fff; font-size:10.5px; font-weight:600; line-height:1; } body:not(.acc-fullscreen) .av-circ, body:not(.acc-fullscreen) .av-xs{ border-radius:50% } /* Action buttons in row */ body:not(.acc-fullscreen) .ibtn{ transition:transform .2s cubic-bezier(.34,1.56,.64,1), color .15s ease, background .15s ease; } body:not(.acc-fullscreen) .ibtn:hover{ transform:scale(1.22); background:var(--acc-hover); color:var(--acc-ink); } body:not(.acc-fullscreen) .ibtn--del:hover{ color:var(--acc-red); background:var(--acc-red-soft); } /* ══════════════════════════════════════════════════════════════════ TAGS · PILLS (mirrors .accpill — colour still comes from the caller) ══════════════════════════════════════════════════════════════════ */ @keyframes status-dot-pulse { 0% { transform:scale(1); opacity:0.85; } 50% { transform:scale(1.4); opacity:1; } 100% { transform:scale(1); opacity:0.85; } } body:not(.acc-fullscreen) .tag, body:not(.acc-fullscreen) .pillv, body:not(.acc-fullscreen) .val-tag{ display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px; height:auto; font-size:calc(11.5px * var(--crm-fs)); font-weight:600; color:var(--acc-ink-2); border:0; transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, filter .15s ease; } body:not(.acc-fullscreen) .tag:hover{ transform:translateY(-1px) scale(1.06); box-shadow:0 3px 8px rgba(0,0,0,.08); filter:brightness(1.04); } body:not(.acc-fullscreen) .tag .d{ width:7px; height:7px; border-radius:2px; flex:0 0 auto; animation:status-dot-pulse 2.2s infinite ease-in-out; } body:not(.acc-fullscreen) .tag--mut{ background:var(--acc-band); color:var(--acc-ink-mute) } body:not(.acc-fullscreen) .dot-st{ width:8px; height:8px; border-radius:2px; flex:0 0 auto } body:not(.acc-fullscreen) .empty-state, body:not(.acc-fullscreen) .accempty{ padding:34px 16px; text-align:center; font-size:calc(13px * var(--crm-fs)); color:var(--acc-ink-mute); } /* ══════════════════════════════════════════════════════════════════ TABS — Modern Segmented Pill Controls ══════════════════════════════════════════════════════════════════ */ body:not(.acc-fullscreen) .tabs{ display:inline-flex; align-items:center; gap:4px; padding:4px; border-radius:12px; background:#f1f5f9; border:1px solid #e2e8f0; margin:0 0 var(--crm-sp-3); box-shadow:inset 0 1px 2px rgba(0,0,0,.03); } body:not(.acc-fullscreen) .tabs .tab{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 15px; border-radius:8px; font-size:calc(12.5px * var(--crm-fs)); font-weight:500; background:transparent; color:#64748b; border:1px solid transparent; cursor:pointer; height:auto; min-height:0; transition:all .18s cubic-bezier(.16, 1, .3, 1); user-select:none; } body:not(.acc-fullscreen) .tabs .tab svg{ width:14px; height:14px; flex:0 0 auto; color:#64748b; stroke-width:2; transition:color .18s ease, transform .18s ease; } body:not(.acc-fullscreen) .tabs .tab:hover{ color:#0f172a; background:rgba(255,255,255,.65); transform:translateY(-0.5px); } body:not(.acc-fullscreen) .tabs .tab:hover svg{ color:#0f172a; } body:not(.acc-fullscreen) .tabs .tab.is-active{ background:#ffffff; color:#0073ea; border-color:rgba(0,0,0,.06); font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); transform:translateY(0); } body:not(.acc-fullscreen) .tabs .tab.is-active svg{ color:#0073ea; } body:not(.acc-fullscreen) .tabs .tab--plus{ width:30px; height:30px; padding:0; display:inline-grid; place-items:center; color:#94a3b8; font-size:16px; font-weight:500; border-radius:7px; } body:not(.acc-fullscreen) .tabs .tab--plus:hover{ background:#ffffff; color:#0073ea; box-shadow:0 1px 3px rgba(0,0,0,.06); transform:scale(1.06); } /* Toolbar controls */ body:not(.acc-fullscreen) .new-btn{ transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, filter .15s ease; } body:not(.acc-fullscreen) .new-btn:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 6px 16px rgba(0,0,0,.15); filter:brightness(1.05); } body:not(.acc-fullscreen) .new-btn:hover .new-btn__caret svg{ transform:translateY(1.5px); } body:not(.acc-fullscreen) .new-btn__caret svg{ transition:transform .18s ease; } body:not(.acc-fullscreen) .tb-search, body:not(.acc-fullscreen) .tb-filter{ transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; } body:not(.acc-fullscreen) .tb-search:focus-within, body:not(.acc-fullscreen) .tb-filter:focus-within{ border-color:#0073ea; box-shadow:0 0 0 3px rgba(0, 115, 234, 0.12); transform:translateY(-1px); } /* ══════════════════════════════════════════════════════════════════ KANBAN ══════════════════════════════════════════════════════════════════ */ @keyframes kcard-in { 0% { opacity: 0; transform: translateY(10px) scale(0.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } } body:not(.acc-fullscreen) .kanban{ gap:var(--crm-sp-3) } body:not(.acc-fullscreen) .kanban__col{ background:var(--acc-band); border:1px solid var(--acc-line); border-radius:var(--crm-r-lg); padding:var(--crm-sp-3); animation:dt-group-in .4s cubic-bezier(.16, 1, .3, 1) backwards; } body:not(.acc-fullscreen) .kanban__col:nth-child(1){ animation-delay:.05s; } body:not(.acc-fullscreen) .kanban__col:nth-child(2){ animation-delay:.10s; } body:not(.acc-fullscreen) .kanban__col:nth-child(3){ animation-delay:.15s; } body:not(.acc-fullscreen) .kanban__col:nth-child(4){ animation-delay:.20s; } body:not(.acc-fullscreen) .kanban__col:nth-child(5){ animation-delay:.25s; } body:not(.acc-fullscreen) .kanban__col h4{ display:flex; align-items:center; gap:9px; margin:2px 2px var(--crm-sp-3); font-size:calc(13px * var(--crm-fs)); font-weight:700; color:var(--acc-ink); text-transform:none; letter-spacing:0; } body:not(.acc-fullscreen) .kanban__col h4 .c{ margin-inline-start:auto; font-weight:500; color:var(--acc-ink-soft); } body:not(.acc-fullscreen) .kanban__col--over{ background:#eff6ff; border-color:#0073ea } body:not(.acc-fullscreen) .kcard{ background:var(--acc-surface); border:1px solid var(--acc-line); border-left-width:3px; border-left-style:solid; border-radius:var(--crm-r); box-shadow:var(--acc-shadow); padding:11px 13px; margin-bottom:var(--crm-sp-2); transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .18s ease; animation:kcard-in .38s cubic-bezier(.16, 1, .3, 1) backwards; cursor:grab; } body:not(.acc-fullscreen) .kcard:hover{ transform:translateY(-4px) scale(1.015); box-shadow:0 10px 24px -4px rgba(0,0,0,.09); } body:not(.acc-fullscreen) .kcard:active{ cursor:grabbing; } body:not(.acc-fullscreen) .kcard .nm{ font-size:calc(13px * var(--crm-fs)); font-weight:600; color:var(--acc-ink) } body:not(.acc-fullscreen) .kcard .mt{ font-size:calc(11.5px * var(--crm-fs)); color:var(--acc-ink-mute); margin-top:2px } /* ══════════════════════════════════════════════════════════════════ POPOVERS · MENUS · MODALS Opaque, 1px line, the ledger's pop shadow. ══════════════════════════════════════════════════════════════════ */ body:not(.acc-fullscreen) .picker, body:not(.acc-fullscreen) .spick, body:not(.acc-fullscreen) .lpicker, body:not(.acc-fullscreen) .colpick, body:not(.acc-fullscreen) .new-menu, body:not(.acc-fullscreen) .ai__menu{ background:var(--acc-surface); border:1px solid var(--acc-line); border-radius:var(--crm-r-lg); box-shadow:var(--acc-shadow-pop); backdrop-filter:none; -webkit-backdrop-filter:none; padding:6px; } body:not(.acc-fullscreen) .picker__opt, body:not(.acc-fullscreen) .lpicker__opt, body:not(.acc-fullscreen) .new-menu__item, body:not(.acc-fullscreen) .ai__menu button, body:not(.acc-fullscreen) .spick .ownopt{ display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:8px; border:0; background:transparent; font:inherit; font-size:calc(13px * var(--crm-fs)); color:var(--acc-ink-2); cursor:pointer; text-align:start; width:100%; min-height:0; } body:not(.acc-fullscreen) .picker__opt:hover, body:not(.acc-fullscreen) .lpicker__opt:hover, body:not(.acc-fullscreen) .new-menu__item:hover, body:not(.acc-fullscreen) .ai__menu button:hover, body:not(.acc-fullscreen) .spick .ownopt:hover{ background:var(--acc-hover); color:var(--acc-ink) } body:not(.acc-fullscreen) .lpicker__opt:hover{ transform:none; box-shadow:none } body:not(.acc-fullscreen) .ai__menu button.is-active{ background:#eff6ff; color:#0073ea } body:not(.acc-fullscreen) .ovl{ background:rgba(16,24,40,.5); backdrop-filter:none } body:not(.acc-fullscreen) .mdl{ background:var(--acc-surface); border:1px solid var(--acc-line); border-radius:var(--crm-r-card); box-shadow:var(--acc-shadow-pop); overflow:hidden; } body:not(.acc-fullscreen) .mdl__h{ padding:14px 18px; border-bottom:1px solid var(--acc-line); } body:not(.acc-fullscreen) .mdl__h h3{ margin:0; font-size:calc(15.5px * var(--crm-fs)); font-weight:700; color:var(--acc-ink); letter-spacing:0; } body:not(.acc-fullscreen) .mdl__h p{ margin:5px 0 0; font-size:calc(12.5px * var(--crm-fs)); color:var(--acc-ink-soft); } body:not(.acc-fullscreen) .mdl__b{ padding:16px 18px } body:not(.acc-fullscreen) .mdl__f{ display:flex; justify-content:flex-end; gap:var(--crm-sp-2); padding:12px 18px; border-top:1px solid var(--acc-line); background:var(--acc-band); } /* ══════════════════════════════════════════════════════════════════ CONTACT DETAIL — the wide dialog extra.css caps every .mdl at 440px, which is right for a form and far too narrow for a record plus its conversation. This variant is wide and splits in two: the record on the left, the timeline on the right, each scrolling independently so a long chat never pushes the facts away. ══════════════════════════════════════════════════════════════════ */ body:not(.acc-fullscreen) .mdl--detail{ max-width:1080px; width:min(1080px,96vw); max-height:92vh; display:flex; flex-direction:column; overflow:hidden; } body:not(.acc-fullscreen) .mdl--detail .cd-body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--crm-sp-4); padding:var(--crm-sp-4) var(--crm-sp-4) var(--crm-sp-3); min-height:0; overflow:hidden; flex:1; } /* extra.css gives every footer button flex:1, which makes a lone Close stretch the full width of a 1080px dialog. Same fix .mdl--visit already uses for the same reason. */ body:not(.acc-fullscreen) .mdl--detail .mdl__f{ justify-content:flex-end; flex-shrink:0 } body:not(.acc-fullscreen) .mdl--detail .mdl__f button{ flex:0 0 auto; min-width:120px } body:not(.acc-fullscreen) .cd-left{ overflow-y:auto; min-height:0; padding-inline-end:4px } body:not(.acc-fullscreen) .cd-right{ display:flex; flex-direction:column; min-height:0 } body:not(.acc-fullscreen) .cd-right__k, body:not(.acc-fullscreen) .cd-block__k{ font-size:calc(11px * var(--crm-fs)); font-weight:700; color:var(--acc-ink-mute); text-transform:uppercase; letter-spacing:.5px; margin-bottom:var(--crm-sp-2); } /* The chat keeps WhatsApp's own paper — it is a WhatsApp conversation, and the familiarity is the point. */ body:not(.acc-fullscreen) .cd-chat{ flex:1; min-height:0; overflow-y:auto; background:#efeae2; border:1px solid var(--acc-line); border-radius:var(--crm-r); padding:var(--crm-sp-3); } body:not(.acc-fullscreen) .cd-empty{ text-align:center; color:var(--acc-ink-mute); font-size:calc(13px * var(--crm-fs)); padding:28px 12px; } body:not(.acc-fullscreen) .cd-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--crm-sp-3); flex-wrap:wrap; margin-bottom:var(--crm-sp-3); } body:not(.acc-fullscreen) .cd-head__pills, body:not(.acc-fullscreen) .cd-head__acts{ display:flex; gap:var(--crm-sp-2); flex-wrap:wrap; align-items:center; } body:not(.acc-fullscreen) .cd-head__acts .tbtn{ text-decoration:none } /* Facts as icon cards — two columns, so a record with nine fields is one glance rather than a paragraph. This was one grey panel of label/value pairs, which gave every fact the same weight and left the eye to read all nine before finding the phone number. Each is now its own card led by an icon: you recognise the shape before you read the label. The panel's single background is gone with it — nine cards inside a filled box is two nested surfaces saying one thing. */ body:not(.acc-fullscreen) .cd-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(176px,1fr)); gap:var(--crm-sp-2); margin-bottom:var(--crm-sp-3); } body:not(.acc-fullscreen) .cd-fact{ --cdf-c:#8a94a6; --cdf-w:#8a94a61f; display:flex; align-items:center; gap:var(--crm-sp-2); min-width:0; padding:var(--crm-sp-2) var(--crm-sp-3); background:var(--acc-band); border:1px solid var(--acc-line-soft); border-radius:var(--crm-r); transition:border-color .15s ease, box-shadow .15s ease; } body:not(.acc-fullscreen) .cd-fact:hover{ border-color:var(--cdf-c); box-shadow:0 1px 6px var(--cdf-w); } /* A record id and a pair of coordinates are single unbroken tokens: in a half-width card they wrap mid-string into two ragged lines. Given the row they fit, and they land together at the foot of the grid where the identifiers belong. */ body:not(.acc-fullscreen) .cd-fact--wide{ grid-column:1/-1 } /* The tile carries the fact's colour at 12% behind the icon at full strength — the same wash the ledger's KPI tiles use, so the two products' cards read as one family. */ body:not(.acc-fullscreen) .cd-fact__ic{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--cdf-w); color:var(--cdf-c); } body:not(.acc-fullscreen) .cd-fact__ic svg{ width:16px; height:16px; display:block } body:not(.acc-fullscreen) .cd-fact__b{ flex:1; min-width:0 } body:not(.acc-fullscreen) .cd-fact__k{ display:block; font-size:calc(9.5px * var(--crm-fs)); font-weight:700; color:var(--acc-ink-mute); text-transform:uppercase; letter-spacing:.5px; line-height:1.3; } body:not(.acc-fullscreen) .cd-fact__v{ display:block; font-size:calc(12.5px * var(--crm-fs)); color:var(--acc-ink-2); font-weight:600; margin-top:1px; line-height:1.35; word-break:break-word; unicode-bidi:plaintext; } /* A phone number, a pair of coordinates and a record id exist to be pasted somewhere else. The button stays out of the way until the card is under the cursor — except where there is no cursor, below. */ body:not(.acc-fullscreen) .cd-fact__cp{ flex:0 0 auto; width:26px; height:26px; padding:0; border:0; border-radius:7px; display:grid; place-items:center; cursor:pointer; background:transparent; color:var(--acc-ink-mute); opacity:0; transition:opacity .15s ease, background .15s ease, color .15s ease; } body:not(.acc-fullscreen) .cd-fact:hover .cd-fact__cp, body:not(.acc-fullscreen) .cd-fact__cp:focus-visible{ opacity:1 } body:not(.acc-fullscreen) .cd-fact__cp:hover{ background:var(--acc-line-soft); color:var(--acc-ink); } body:not(.acc-fullscreen) .cd-fact__cp svg{ width:14px; height:14px; display:block } body:not(.acc-fullscreen) .cd-fact__cp .ic-done{ display:none } body:not(.acc-fullscreen) .cd-fact__cp.is-done{ opacity:1; color:#0a7a45; background:#e7f7ee } body:not(.acc-fullscreen) .cd-fact__cp.is-done .ic-copy{ display:none } body:not(.acc-fullscreen) .cd-fact__cp.is-done .ic-done{ display:block } /* A touch screen never hovers, so a hover-revealed control is an invisible one. There, it is simply always shown. */ @media (hover:none){ body:not(.acc-fullscreen) .cd-fact__cp{ opacity:1 } } @media (prefers-reduced-motion:reduce){ body:not(.acc-fullscreen) .cd-fact, body:not(.acc-fullscreen) .cd-fact__cp{ transition:none } } body:not(.acc-fullscreen) .cd-block{ margin-bottom:var(--crm-sp-3) } body:not(.acc-fullscreen) .cd-note{ font-size:calc(13px * var(--crm-fs)); color:var(--acc-ink-2); line-height:1.6; white-space:pre-wrap; word-break:break-word; background:var(--acc-surface-2); border:1px solid var(--acc-line-soft); border-radius:var(--crm-r); padding:var(--crm-sp-3); } body:not(.acc-fullscreen) .cd-rel{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--crm-sp-2); } body:not(.acc-fullscreen) .cd-rel__i{ background:var(--acc-surface); border:1px solid var(--acc-line); border-radius:var(--crm-r); padding:var(--crm-sp-3); text-align:center; } body:not(.acc-fullscreen) .cd-rel__i b{ display:block; font-size:calc(19px * var(--crm-fs)); font-weight:700; color:var(--acc-ink); } body:not(.acc-fullscreen) .cd-rel__i span{ font-size:calc(11px * var(--crm-fs)); color:var(--acc-ink-mute); } body:not(.acc-fullscreen) .cd-sub{ font-size:calc(11.5px * var(--crm-fs)); color:var(--acc-ink-mute); margin-top:var(--crm-sp-2); } /* Queued/sent WhatsApp bubbles, matching the bridge's own in the same list. */ body:not(.acc-fullscreen) .cd-msg{ display:flex; margin:3px 0 } body:not(.acc-fullscreen) .cd-msg--out{ justify-content:flex-end } body:not(.acc-fullscreen) .cd-bub{ max-width:82%; border-radius:10px; padding:6px 9px; box-shadow:0 1px 1px rgba(0,0,0,.07); background:#fff; } body:not(.acc-fullscreen) .cd-bub--out{ background:#d9fdd3 } body:not(.acc-fullscreen) .cd-bub__tag{ font-size:9px; font-weight:800; color:#3a7a2f; letter-spacing:.3px; text-transform:uppercase; } body:not(.acc-fullscreen) .cd-bub__txt{ font-size:calc(12.5px * var(--crm-fs)); color:#111; margin-top:2px; white-space:pre-wrap; word-break:break-word; } body:not(.acc-fullscreen) .cd-bub__media{ font-size:12px; color:#3a7a2f; margin-top:2px } body:not(.acc-fullscreen) .cd-bub__foot{ text-align:end; font-size:10px; color:#7a8b7a; margin-top:3px; } /* A visit from the Activities board, in the same thread as the messages. A visit is not something anyone said, so it takes neither side of the conversation: it spans the column as a card, the way a day divider does, and reads as an event that happened rather than a line that was sent. Colour is the Activities board's own — blue check-in, green logged. */ body:not(.acc-fullscreen) .cd-vis{ --cdv-c:#0073ea; background:#fff; border:1px solid rgba(0,0,0,.06); border-inline-start:3px solid var(--cdv-c); border-radius:10px; padding:7px 10px; margin:7px 0; cursor:pointer; box-shadow:0 1px 1px rgba(0,0,0,.07); transition:box-shadow .15s ease, transform .15s ease; } body:not(.acc-fullscreen) .cd-vis--logged{ --cdv-c:#008755 } body:not(.acc-fullscreen) .cd-vis:hover{ box-shadow:0 3px 10px rgba(0,0,0,.13); transform:translateY(-1px); } body:not(.acc-fullscreen) .cd-vis:focus-visible{ outline:2px solid var(--cdv-c); outline-offset:2px } body:not(.acc-fullscreen) .cd-vis__h{ display:flex; align-items:center; gap:var(--crm-sp-2); flex-wrap:wrap; } body:not(.acc-fullscreen) .cd-vis__type{ font-size:calc(10.5px * var(--crm-fs)); font-weight:800; color:var(--cdv-c); text-transform:uppercase; letter-spacing:.3px; } body:not(.acc-fullscreen) .cd-vis__ver{ font-size:calc(10px * var(--crm-fs)); font-weight:700; border-radius:20px; padding:1px 7px; white-space:nowrap; } body:not(.acc-fullscreen) .cd-vis__ver.is-ok{ background:#e7f7ee; color:#0a7a45 } body:not(.acc-fullscreen) .cd-vis__ver.is-warn{ background:#fdf1e3; color:#b54708 } body:not(.acc-fullscreen) .cd-vis__t{ margin-inline-start:auto; font-size:calc(10px * var(--crm-fs)); color:#8a9186; } body:not(.acc-fullscreen) .cd-vis__d{ font-size:calc(12.5px * var(--crm-fs)); color:#111; margin-top:3px; white-space:pre-wrap; word-break:break-word; } body:not(.acc-fullscreen) .cd-vis__f{ display:flex; align-items:center; gap:var(--crm-sp-2); font-size:calc(10.5px * var(--crm-fs)); color:#7a8b7a; margin-top:4px; } body:not(.acc-fullscreen) .cd-vis__go{ margin-inline-start:auto; color:var(--cdv-c); font-weight:700; white-space:nowrap; } @media (prefers-reduced-motion:reduce){ body:not(.acc-fullscreen) .cd-vis{ transition:none } body:not(.acc-fullscreen) .cd-vis:hover{ transform:none } } /* Going back is a different move from closing, so it sits at the other end of the footer. A long contact name is truncated rather than allowed to push Close off the edge. */ body:not(.acc-fullscreen) .mdl--visit .mdl__f button[data-act="cd-back"]{ margin-inline-end:auto; max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width:900px){ body:not(.acc-fullscreen) .mdl--detail .cd-body{ grid-template-columns:1fr; overflow-y:auto; } body:not(.acc-fullscreen) .cd-left{ overflow:visible } body:not(.acc-fullscreen) .cd-chat{ max-height:50vh } } body:not(.acc-fullscreen) .cdlg h3{ font-size:calc(16px * var(--crm-fs)); color:var(--acc-ink) } body:not(.acc-fullscreen) .cdlg p{ font-size:calc(13px * var(--crm-fs)); color:var(--acc-ink-soft) } body:not(.acc-fullscreen) .cdlg__card{ background:var(--acc-band); border:1px solid var(--acc-line); border-radius:var(--crm-r); } body:not(.acc-fullscreen) .cdlg__ic{ border-radius:12px } body:not(.acc-fullscreen) .cdlg__btns button{ border-radius:9px; padding:10px 15px; font-weight:600 } /* ══════════════════════════════════════════════════════════════════ SEARCHABLE DROPDOWNS combo.css exposes --cbo-*, so remap those rather than restate its rules — the same way acc-app.css does for the ledger. ══════════════════════════════════════════════════════════════════ */ body:not(.acc-fullscreen) .cbo-pop{ --cbo-bg:#ffffff; --cbo-line:#cbd5e1; --cbo-line-soft:#f1f5f9; --cbo-ink:#1e293b; --cbo-mute:#64748b; --cbo-hover:#f8fafc; --cbo-accent:#0073ea; --cbo-fs:calc(13px * var(--crm-fs)); border-radius:var(--crm-r-lg); box-shadow:0 12px 32px -4px rgba(15,23,42,.12); } body:not(.acc-fullscreen) .cbo-opt{ padding:8px 10px; border-radius:8px } body:not(.acc-fullscreen) .cbo-opt__code{ border-radius:5px; font-weight:700 } body:not(.acc-fullscreen) .cbo-grp{ text-transform:uppercase; letter-spacing:.04em; font-size:calc(11px * var(--crm-fs)); font-weight:700; color:#64748b; } /* ══════════════════════════════════════════════════════════════════ WHATSAPP BOARD · MAPS · PANELS ══════════════════════════════════════════════════════════════════ */ body:not(.acc-fullscreen) .wa-btn{ padding:9px 15px; height:auto; border-radius:9px; font-size:calc(13px * var(--crm-fs)); font-weight:600; } body:not(.acc-fullscreen) .wa-tile{ border-radius:var(--crm-r-lg); padding:var(--crm-sp-4) } body:not(.acc-fullscreen) .wa-tiles{ gap:var(--crm-sp-3) } body:not(.acc-fullscreen) .wa-pad{ padding:var(--crm-sp-4) } body:not(.acc-fullscreen) .wa-hint{ font-size:calc(11.5px * var(--crm-fs)); color:#64748b } body:not(.acc-fullscreen) .ccmap{ border-radius:var(--crm-r-card); border:1px solid #e2e8f0; overflow:hidden; } body:not(.acc-fullscreen) .maplegend{ border-radius:var(--crm-r); border:1px solid #e2e8f0; background:#ffffff; box-shadow:0 1px 3px rgba(0,0,0,.05); font-size:calc(11.5px * var(--crm-fs)); padding:var(--crm-sp-2) var(--crm-sp-3); } /* ══════════════════════════════════════════════════════════════════ AI SIDEKICK PRO MAX & RESIZABLE WINDOW ══════════════════════════════════════════════════════════════════ */ body:not(.acc-fullscreen) .ai{ background:#ffffff; display:flex; flex-direction:column; position:relative; overflow:hidden; } body:not(.acc-fullscreen) .ai--floating{ position:fixed; right:24px; bottom:24px; border-radius:20px; border:1px solid rgba(226, 232, 240, 0.9); background:#ffffff; box-shadow:0 24px 60px -12px rgba(15, 23, 42, 0.22), 0 8px 24px -4px rgba(15, 23, 42, 0.12); overflow:hidden; z-index:200; min-width:320px; min-height:380px; max-width:calc(100vw - 32px); max-height:calc(100vh - 40px); transition:box-shadow .2s ease; } /* Edge & corner resize handles */ body:not(.acc-fullscreen) .ai__resize{ position:absolute; z-index:30; } body:not(.acc-fullscreen) .ai__resize--n{ top:0; left:12px; right:12px; height:8px; cursor:ns-resize; } body:not(.acc-fullscreen) .ai__resize--w{ left:0; top:12px; bottom:12px; width:8px; cursor:ew-resize; } body:not(.acc-fullscreen) .ai__resize--nw{ top:0; left:0; width:16px; height:16px; cursor:nwse-resize; z-index:35; } body:not(.acc-fullscreen) .ai__resize--ne{ top:0; right:0; width:16px; height:16px; cursor:nesw-resize; z-index:35; } body:not(.acc-fullscreen) .ai__resize--sw{ bottom:0; left:0; width:16px; height:16px; cursor:nesw-resize; z-index:35; } /* Modern header with gradient and status indicator */ body:not(.acc-fullscreen) .ai__head{ display:flex; align-items:center; gap:10px; padding:14px 16px; background:linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color:#ffffff; border-bottom:1px solid rgba(255,255,255,0.08); position:relative; z-index:10; user-select:none; } body:not(.acc-fullscreen) .ai__sparkle{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg, #8b5cf6, #6366f1); color:#ffffff; box-shadow:0 2px 8px rgba(124, 58, 237, 0.35); flex-shrink:0; } body:not(.acc-fullscreen) .ai__title-box{ display:flex; align-items:center; gap:8px; flex:1; } body:not(.acc-fullscreen) .ai__title{ font-size:calc(14px * var(--crm-fs)); font-weight:700; color:#ffffff; letter-spacing:-0.1px; } body:not(.acc-fullscreen) .ai__status-dot{ width:7px; height:7px; border-radius:50%; background:#10b981; box-shadow:0 0 8px #10b981; } body:not(.acc-fullscreen) .ai__head-actions{ display:flex; align-items:center; gap:4px; } body:not(.acc-fullscreen) .ai__ichbtn{ width:28px; height:28px; border-radius:8px; border:0; background:transparent; color:rgba(255,255,255,0.75); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s ease; } body:not(.acc-fullscreen) .ai__ichbtn:hover{ background:rgba(255,255,255,0.15); color:#ffffff; } /* Chat body area */ body:not(.acc-fullscreen) .ai__body{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; background:#ffffff; position:relative; z-index:5; } body:not(.acc-fullscreen) .ai__empty{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:28px 12px 16px; } body:not(.acc-fullscreen) .ai__empty-orb{ width:52px; height:52px; border-radius:16px; background:linear-gradient(135deg, #f5f3ff, #ede9fe); border:1px solid #ddd6fe; display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; box-shadow:0 4px 14px rgba(124, 58, 237, 0.12); } body:not(.acc-fullscreen) .ai__empty h3{ font-size:calc(16.5px * var(--crm-fs)); font-weight:700; color:#0f172a; margin:0 0 6px 0; } body:not(.acc-fullscreen) .ai__empty p{ font-size:calc(13px * var(--crm-fs)); color:#64748b; margin:0 0 20px 0; max-width:280px; line-height:1.45; } body:not(.acc-fullscreen) .ai__suggest{ display:flex; flex-direction:column; gap:8px; width:100%; } body:not(.acc-fullscreen) .ai__suggest button{ display:flex; align-items:center; gap:8px; width:100%; text-align:start; padding:9px 12px; border-radius:10px; border:1px solid #e2e8f0; background:#f8fafc; color:#334155; font:inherit; font-size:calc(12.5px * var(--crm-fs)); font-weight:500; cursor:pointer; transition:all .15s ease; } body:not(.acc-fullscreen) .ai__suggest button svg{ color:#94a3b8; flex-shrink:0; } body:not(.acc-fullscreen) .ai__suggest button:hover{ background:#f1f5f9; border-color:#cbd5e1; color:#0f172a; transform:translateY(-1px); } /* User & Assistant message bubbles */ body:not(.acc-fullscreen) .ai__userwrap{ display:flex; justify-content:flex-end; width:100%; } body:not(.acc-fullscreen) .ai__user .ai__bubble{ background:linear-gradient(135deg, #0073ea 0%, #005bb7 100%); color:#ffffff; border-radius:14px 14px 2px 14px; padding:9px 14px; font-size:calc(13px * var(--crm-fs)); line-height:1.45; box-shadow:0 2px 6px rgba(0, 115, 234, 0.2); max-width:85%; word-break:break-word; } body:not(.acc-fullscreen) .ai__assist{ display:flex; flex-direction:column; width:100%; } body:not(.acc-fullscreen) .ai__reply{ background:#f8fafc; border:1px solid #e2e8f0; border-radius:14px 14px 14px 2px; padding:11px 14px; font-size:calc(13px * var(--crm-fs)); color:#0f172a; line-height:1.5; box-shadow:0 1px 3px rgba(15, 23, 42, 0.04); max-width:92%; word-break:break-word; } body:not(.acc-fullscreen) .ai__reply b{ color:#0073ea; } /* Adaptive compose bar */ body:not(.acc-fullscreen) .ai__compose{ border-top:1px solid #e2e8f0; background:#ffffff; padding:10px 14px; position:relative; z-index:10; display:flex; flex-direction:column; gap:8px; } body:not(.acc-fullscreen) .ai__input-wrap{ position:relative; display:flex; } body:not(.acc-fullscreen) .ai__compose textarea#ai-in{ width:100%; min-height:38px; max-height:140px; padding:8px 12px; border-radius:12px; border:1px solid #cbd5e1; background:#f8fafc; font:inherit; font-size:calc(13px * var(--crm-fs)); color:#0f172a; line-height:1.45; resize:none; outline:none; box-sizing:border-box; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease; } body:not(.acc-fullscreen) .ai__compose textarea#ai-in:focus{ background:#ffffff; border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124, 58, 237, 0.12); } body:not(.acc-fullscreen) .ai__compose-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; } body:not(.acc-fullscreen) .ai__compose-hint{ font-size:calc(11px * var(--crm-fs)); color:#94a3b8; } body:not(.acc-fullscreen) .ai__send{ width:32px; height:32px; border-radius:10px; border:0; background:linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color:#ffffff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(124, 58, 237, 0.35); transition:all .15s cubic-bezier(.34,1.56,.64,1); } body:not(.acc-fullscreen) .ai__send:hover{ transform:scale(1.08); box-shadow:0 4px 12px rgba(124, 58, 237, 0.45); } body:not(.acc-fullscreen) .ai__send:active{ transform:scale(0.95); } /* Modern footer badge */ body:not(.acc-fullscreen) .ai__foot{ display:flex; align-items:center; justify-content:center; gap:6px; padding:6px 12px; background:#f8fafc; border-top:1px solid #f1f5f9; font-size:calc(11px * var(--crm-fs)); color:#94a3b8; font-weight:500; user-select:none; } body:not(.acc-fullscreen) .ai__foot-bullet{ color:#cbd5e1; } body:not(.acc-fullscreen) .fab{ position:fixed; right:24px; bottom:24px; width:52px; height:52px; border-radius:16px; border:1px solid rgba(255,255,255,0.25); background:linear-gradient(135deg, #8b5cf6 0%, #7c3aed 45%, #6366f1 100%); color:#ffffff; box-shadow:0 8px 24px -4px rgba(124, 58, 237, 0.45), 0 2px 6px rgba(124, 58, 237, 0.25), inset 0 1px 1px rgba(255,255,255,0.4); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; z-index:90; transition:all .22s cubic-bezier(.34,1.56,.64,1); outline:none; backdrop-filter:none; -webkit-backdrop-filter:none; } body:not(.acc-fullscreen) .fab:hover{ transform:translateY(-3px) scale(1.08); box-shadow:0 12px 32px -4px rgba(124, 58, 237, 0.55), 0 4px 12px rgba(124, 58, 237, 0.35), inset 0 1px 1px rgba(255,255,255,0.6); filter:brightness(1.06); } body:not(.acc-fullscreen) .fab:active{ transform:translateY(0) scale(0.96); box-shadow:0 4px 12px rgba(124, 58, 237, 0.35); } body:not(.acc-fullscreen) .fab svg{ color:#ffffff; fill:none; stroke:currentColor; stroke-width:1.9; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.18)); transition:transform .3s cubic-bezier(.34,1.56,.64,1); } body:not(.acc-fullscreen) .fab:hover svg{ transform:rotate(15deg) scale(1.12); } /* Visit detail + import wizard */ body:not(.acc-fullscreen) .vd-hero{ background:#f8fafc; border-bottom:1px solid #e2e8f0; padding:18px 22px; } body:not(.acc-fullscreen) .vd-hero__name{ font-size:calc(19px * var(--crm-fs)); font-weight:700; color:#0f172a; letter-spacing:0; } body:not(.acc-fullscreen) .vd-lbl{ font-size:calc(11px * var(--crm-fs)); font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.5px; } body:not(.acc-fullscreen) .vd-note{ font-size:calc(13.5px * var(--crm-fs)); color:#334155 } body:not(.acc-fullscreen) .vd-doc{ border:1px solid #e2e8f0; border-radius:var(--crm-r) } body:not(.acc-fullscreen) .vd-doc:hover{ background:#f8fafc; border-color:#0073ea } body:not(.acc-fullscreen) .vd-badge{ border-radius:999px; font-size:calc(11.5px * var(--crm-fs)); font-weight:600 } body:not(.acc-fullscreen) .impm{ background:#f8fafc } body:not(.acc-fullscreen) .impm__head{ background:linear-gradient(135deg, #0073ea, #0050a8); color:#fff; border-bottom:0; padding:12px 18px; backdrop-filter:none; -webkit-backdrop-filter:none; } body:not(.acc-fullscreen) .impm__head h2{ color:#fff; font-size:calc(15.5px * var(--crm-fs)); font-weight:700 } body:not(.acc-fullscreen) .impm__step{ color:rgba(255,255,255,.82) } body:not(.acc-fullscreen) .impm__step--active{ color:#fff; font-weight:600 } body:not(.acc-fullscreen) .impm__bullet{ border-color:rgba(255,255,255,.6); color:#fff; background:transparent; } body:not(.acc-fullscreen) .impm__step--active .impm__bullet{ background:#fff; color:#0073ea; border-color:#fff } body:not(.acc-fullscreen) .impm__step--done .impm__bullet{ background:transparent; color:#fff; border-color:#fff } body:not(.acc-fullscreen) .impm__seg{ background:rgba(255,255,255,.4) } body:not(.acc-fullscreen) .impm__seg--done{ background:#fff } body:not(.acc-fullscreen) .impm__feedback, body:not(.acc-fullscreen) .impm__close{ color:rgba(255,255,255,.9); border-radius:8px } body:not(.acc-fullscreen) .impm__feedback:hover, body:not(.acc-fullscreen) .impm__close:hover{ background:rgba(255,255,255,.2) } body:not(.acc-fullscreen) .impm__drop{ background:#ffffff; border:2px dashed #cbd5e1; border-radius:var(--crm-r-card); } body:not(.acc-fullscreen) .impm__drop.is-over{ border-color:#0073ea; background:#eff6ff } body:not(.acc-fullscreen) .impm__maprow{ background:#ffffff; border:1px solid #e2e8f0; border-radius:var(--crm-r); } body:not(.acc-fullscreen) .impm__maplabel{ font-size:calc(11px * var(--crm-fs)); color:#64748b; text-transform:uppercase; letter-spacing:.5px; } body:not(.acc-fullscreen) .impm__foot{ background:var(--acc-surface); border-top:1px solid var(--acc-line); padding:12px 18px; } /* ── scrollbars, matching the ledger's ─────────────────────────── */ body:not(.acc-fullscreen) ::-webkit-scrollbar{ width:12px; height:12px } body:not(.acc-fullscreen) ::-webkit-scrollbar-thumb{ background:var(--acc-scroll); border-radius:999px; border:3px solid transparent; background-clip:content-box; } body:not(.acc-fullscreen) ::-webkit-scrollbar-track{ background:transparent } /* ══════════════════════════════════════════════════════════════════ NARROW SCREENS ══════════════════════════════════════════════════════════════════ */ @media (max-width:1160px){ body:not(.acc-fullscreen) .bento__split{ grid-template-columns:1fr; } body:not(.acc-fullscreen) .bento__split .bento__feed #feed{ max-height:440px; } } @media (max-width:860px){ body:not(.acc-fullscreen) .top{ min-height:48px; padding-inline:10px } body:not(.acc-fullscreen) .board, body:not(.acc-fullscreen) .dash{ padding:var(--crm-sp-3) } /* A 200px basis would put two tiles per row on a phone and cut the labels; let each take the full width instead. The cap on the feed also comes off — on a short screen an inner scroll region inside a page scroll is worse than simply letting the list run. */ body:not(.acc-fullscreen) .bento__kpis .kpi-card{ flex:1 1 100% } body:not(.acc-fullscreen) .bento__charts{ grid-template-columns:1fr; } body:not(.acc-fullscreen) .bento__chart-card{ grid-column:span 1; } body:not(.acc-fullscreen) .bento__feed #feed{ max-height:none; overflow:visible } body:not(.acc-fullscreen) table.dt th:first-child, body:not(.acc-fullscreen) table.dt td.nm, body:not(.acc-fullscreen) table.dt td:first-child{ min-width:0 !important; width:100% !important; } body:not(.acc-fullscreen) table.dt td{ border-inline-end:0 } } /* ══════════════════════════════════════════════════════════════════ ACCESSIBILITY PREFERENCES Carried over. Reduced-transparency has far less to do now that the surfaces are solid, but the accent header still uses translucent white insets, so it is not empty either. ══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-transparency: reduce){ body:not(.acc-fullscreen) .top__search, body:not(.acc-fullscreen) .top__city, body:not(.acc-fullscreen) .top__pill-btn, body:not(.acc-fullscreen) .top__iconbtn{ background:var(--acc-accent-deep); border-color:rgba(255,255,255,.7); } body:not(.acc-fullscreen) .ovl{ background:rgba(16,24,40,.66) } } @media (prefers-reduced-motion: reduce){ body:not(.acc-fullscreen) .ai, body:not(.acc-fullscreen) .ai--floating, body:not(.acc-fullscreen) .ai--sidebar, body:not(.acc-fullscreen) .ai.is-closing, body:not(.acc-fullscreen) .ai__glow, body:not(.acc-fullscreen) .ai__glow::before, body:not(.acc-fullscreen) .ai__glow::after, body:not(.acc-fullscreen) .ai__dot, body:not(.acc-fullscreen) .new-menu, body:not(.acc-fullscreen) .lpicker, body:not(.acc-fullscreen) .spick, body:not(.acc-fullscreen) .impm, body:not(.acc-fullscreen) .impm__back{ animation:none !important } body:not(.acc-fullscreen) .fab:hover, body:not(.acc-fullscreen) .lpicker__opt:hover, body:not(.acc-fullscreen) .kcard:hover, body:not(.acc-fullscreen) .vd-photos a:hover{ transform:none } body:not(.acc-fullscreen) .app__side > .side, body:not(.acc-fullscreen) .side-toggle{ transition:none } body:not(.acc-fullscreen) .kcard--dragging{ transform:none } } @media (prefers-contrast: more){ body:not(.acc-fullscreen) .card, body:not(.acc-fullscreen) .dt-card, body:not(.acc-fullscreen) .kpi-card, body:not(.acc-fullscreen) .kcard{ border-color:var(--acc-line-firm) } body:not(.acc-fullscreen) table.dt th, body:not(.acc-fullscreen) table.dt td{ border-inline-end-color:var(--acc-line) } body:not(.acc-fullscreen) .tbtn, body:not(.acc-fullscreen) .tb-search, body:not(.acc-fullscreen) .tb-filter, body:not(.acc-fullscreen) select:not([data-nosearch]){ border-color:var(--acc-line-firm) } body:not(.acc-fullscreen) .side__item.is-active{ outline:1px solid var(--acc-accent-deep); outline-offset:-1px; } } /* ══════════════════════════════════════════════════════════════════ GLOBAL & UNIVERSAL SMOOTH ANIMATIONS & MICRO-INTERACTIONS Applies across Leads, Customers, Deals, Contracts, Commissions, Web Catalogs, Accounting, Activities, Tasks, Team, Map, Live Map, and the complete WhatsApp suite. ══════════════════════════════════════════════════════════════════ */ /* ── 1. Universal Page & Board Transitions ── */ @keyframes universal-fade-in { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } body:not(.acc-fullscreen) .board, body:not(.acc-fullscreen) .dash, body:not(.acc-fullscreen) .cat-page, body:not(.acc-fullscreen) .cat-studio, body:not(.acc-fullscreen) .wa-board, .accpage { animation: universal-fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards; } /* ── 2. Modals, Drawers & Overlay Popups ── */ @keyframes modal-scale-pop { 0% { opacity: 0; transform: scale(0.95) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes overlay-fade { 0% { opacity: 0; } 100% { opacity: 1; } } body:not(.acc-fullscreen) .ovl { animation: overlay-fade 0.2s ease-out backwards; } body:not(.acc-fullscreen) .mdl, body:not(.acc-fullscreen) .mdl--detail, body:not(.acc-fullscreen) .mdl--visit, body:not(.acc-fullscreen) .picker, body:not(.acc-fullscreen) .spick, body:not(.acc-fullscreen) .lpicker, body:not(.acc-fullscreen) .new-menu { animation: modal-scale-pop 0.28s cubic-bezier(0.16, 1, 0.3, 1) backwards; } /* Contact detail drawer slide-in */ body:not(.acc-fullscreen) .cd-body { animation: universal-fade-in 0.3s ease-out backwards; } body:not(.acc-fullscreen) .cd-fact { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s ease, box-shadow 0.2s ease; } body:not(.acc-fullscreen) .cd-fact:hover { transform: translateY(-2px); border-color: var(--cdf-c); box-shadow: 0 4px 14px var(--cdf-w); } /* ── 3. Activities: Daily Timeline & Stops ────────────────────────── Ported from Bana's /activity board and re-cut in this console's palette. The shape is the argument: ONE card, a column header, and a hairline between days — a card per day would turn three aligned columns into a caption repeated thirty times, and the eye could no longer run down "stops" or "time on site" to find the odd day out. A day opens onto its stops BESIDE the route, not under it: the list answers "where, when, how long" and the map answers "in what order and how far apart", and the two are read together. The list is given a fixed 320px so the map keeps the width that makes a route legible; under 1024px there is no such width, so they stack and the map shortens. */ body:not(.acc-fullscreen) .actv{ /* One grid, declared once, shared by the column header and every day row. Two copies of these four widths is how a header stops lining up with its rows the first time one of them is edited. */ --actv-grid:20px 1fr 56px 104px; display:flex; flex-direction:column; gap:var(--crm-sp-3); animation:universal-fade-in .35s ease backwards; } /* ---- the bar above the card: whose days these are, and their totals ---- */ body:not(.acc-fullscreen) .actv__bar{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--crm-sp-4); flex-wrap:wrap; } body:not(.acc-fullscreen) .actv__pick{ display:flex; flex-direction:column; gap:6px; min-width:260px; } body:not(.acc-fullscreen) .actv__picklb{ font-size:calc(11px * var(--crm-fs)); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--acc-ink-mute); } body:not(.acc-fullscreen) .actv__rep{ position:relative; display:flex; align-items:center; gap:var(--crm-sp-2); background:var(--acc-surface); border:1px solid var(--acc-line); border-radius:var(--crm-r); padding:0 10px; height:38px; box-shadow:var(--acc-shadow); color:var(--acc-ink-mute); transition:border-color .15s ease, box-shadow .2s ease; } body:not(.acc-fullscreen) .actv__rep:hover{ border-color:var(--acc-line-firm) } body:not(.acc-fullscreen) .actv__rep:focus-within{ border-color:#0073ea; box-shadow:0 0 0 3px rgba(0,115,234,.14); } body:not(.acc-fullscreen) .actv__rep select{ appearance:none; -webkit-appearance:none; border:0; background:transparent; outline:none; cursor:pointer; font:inherit; font-weight:600; color:var(--acc-ink); font-size:calc(13px * var(--crm-fs)); padding:0 var(--crm-sp-3) 0 0; flex:1; min-width:0; } body:not(.acc-fullscreen) .actv__repchev{ flex:0 0 auto; pointer-events:none } body:not(.acc-fullscreen) .actv__sum{ display:flex; align-items:center; gap:var(--crm-sp-2); background:var(--acc-band); border:1px solid var(--acc-line-soft); border-radius:999px; padding:7px 16px; height:38px; font-size:calc(12.5px * var(--crm-fs)); color:var(--acc-ink-soft); white-space:nowrap; } body:not(.acc-fullscreen) .actv__sum b{ font-weight:700; color:var(--acc-ink); font-size:calc(13px * var(--crm-fs)); } body:not(.acc-fullscreen) .actv__dot{ color:var(--acc-line-firm) } /* ---- the card: a column header over a stack of days ---- */ body:not(.acc-fullscreen) .actv__card{ background:var(--acc-surface); border:1px solid var(--acc-line); border-radius:var(--crm-r-card); box-shadow:var(--acc-shadow); overflow:hidden; } body:not(.acc-fullscreen) .actv__head{ display:grid; grid-template-columns:var(--actv-grid); align-items:center; gap:var(--crm-sp-3); padding:10px 18px; border-bottom:1px solid var(--acc-line); background:var(--acc-band); font-size:calc(10.5px * var(--crm-fs)); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--acc-ink-mute); } body:not(.acc-fullscreen) .actv__head span:nth-child(3), body:not(.acc-fullscreen) .actv__head span:nth-child(4){ text-align:end } body:not(.acc-fullscreen) .actv__row + .actv__row{ border-top:1px solid var(--acc-line-soft); } body:not(.acc-fullscreen) .actv__row:has(.actv__panel.is-open){ background:var(--acc-band); } body:not(.acc-fullscreen) .actv__day{ width:100%; display:grid; grid-template-columns:var(--actv-grid); align-items:center; gap:var(--crm-sp-3); padding:13px 18px; background:transparent; border:0; cursor:pointer; text-align:start; font:inherit; color:var(--acc-ink); transition:background .15s ease; } body:not(.acc-fullscreen) .actv__day:hover{ background:var(--acc-band-hi) } body:not(.acc-fullscreen) .actv__chev{ transition:transform .25s cubic-bezier(.34,1.56,.64,1), color .15s ease; color:var(--acc-ink-mute); flex-shrink:0; } body:not(.acc-fullscreen) .actv__day[aria-expanded="true"] .actv__chev{ transform:rotate(90deg); color:#0073ea; } body:not(.acc-fullscreen) .actv__date{ font-weight:600; font-size:calc(13.5px * var(--crm-fs)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body:not(.acc-fullscreen) .actv__day[aria-expanded="true"] .actv__date{ font-weight:700; color:#0073ea; } /* Stops and time are columns, not badges: the whole point of the grid is that a reader can run down them. A pill per row would give each figure its own left edge and break that line. */ body:not(.acc-fullscreen) .actv__n, body:not(.acc-fullscreen) .actv__dur{ text-align:end; font-variant-numeric:tabular-nums; font-size:calc(12.5px * var(--crm-fs)); color:var(--acc-ink-soft); } body:not(.acc-fullscreen) .actv__n{ font-weight:600; color:var(--acc-ink) } /* On a phone the two figure columns are what squeezes the date, and the date is the row's name — "Saturd…" identifies nothing. Narrow the figures (they are three characters and a unit) and tighten the gutters instead. */ @media (max-width:640px){ body:not(.acc-fullscreen) .actv{ --actv-grid:16px 1fr 34px 68px } body:not(.acc-fullscreen) .actv__head, body:not(.acc-fullscreen) .actv__day{ padding-inline:12px; gap:var(--crm-sp-2) } body:not(.acc-fullscreen) .actv__panel.is-open{ padding:0 12px 14px } body:not(.acc-fullscreen) .actv__head{ font-size:calc(9.5px * var(--crm-fs)) } /* A site name is the only thing that identifies a stop, and there is no hover on a phone to recover what an ellipsis ate — so here it wraps and the GPS badge drops below it rather than competing for the line. */ body:not(.acc-fullscreen) .actv__stopn{ flex-wrap:wrap } body:not(.acc-fullscreen) .actv__stopn b{ white-space:normal; overflow:visible } body:not(.acc-fullscreen) .actv__sub{ white-space:normal } } /* ---- the open day ---- */ @keyframes panel-slide-down{ 0%{ opacity:0; transform:translateY(-6px) } 100%{ opacity:1; transform:translateY(0) } } /* Collapsed is display:none, not just an unset class — the panel keeps the markup it was built with, so anything less would leave a closed day's stops and a live map on the page. */ body:not(.acc-fullscreen) .actv__panel{ display:none } body:not(.acc-fullscreen) .actv__panel.is-open{ display:block; padding:0 18px 18px; animation:panel-slide-down .28s cubic-bezier(.16,1,.3,1) backwards; } body:not(.acc-fullscreen) .actv__body{ display:grid; grid-template-columns:1fr; gap:var(--crm-sp-4); align-items:start; } /* A grid item is min-width:auto, so it refuses to shrink below its longest unbreakable line — one long visit note would otherwise widen the column, then the card, then the page, and the board would scroll sideways on a phone while every ellipsis in it stopped working. */ body:not(.acc-fullscreen) .actv__body > *{ min-width:0 } /* 360px, not less: a stop is a site name, a GPS badge and a time range on two lines, and under this the names start losing their last word — which is where a company name carries "Co." or "Group" and stops being unique. */ @media (min-width:1024px){ body:not(.acc-fullscreen) .actv__body--map{ grid-template-columns:360px 1fr } } @media (min-width:1600px){ body:not(.acc-fullscreen) .actv__body--map{ grid-template-columns:420px 1fr } } body:not(.acc-fullscreen) .actv__none{ padding:var(--crm-sp-4); text-align:center; font-size:calc(12px * var(--crm-fs)); color:var(--acc-ink-mute); background:var(--acc-surface); border:1px dashed var(--acc-line); border-radius:var(--crm-r); } body:not(.acc-fullscreen) .actv__stops{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--crm-sp-2); } /* ---- one stop ---- */ body:not(.acc-fullscreen) .actv__stop{ position:relative; overflow:hidden; background:var(--acc-surface); border:1px solid var(--acc-line); border-radius:var(--crm-r); transition:border-color .15s ease, box-shadow .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1); } body:not(.acc-fullscreen) .actv__stop:hover{ transform:translateY(-1px); border-color:#0073ea66; box-shadow:0 6px 16px -3px rgba(23,38,66,.08); } /* A logged visit and a check-in are different evidence — one is typed, one is a device saying where it was. The edge says which without spending a pill on it. */ body:not(.acc-fullscreen) .actv__stop::before{ content:''; position:absolute; inset-block:0; inset-inline-start:0; width:3px; background:#0073ea; } body:not(.acc-fullscreen) .actv__stop.is-logged::before{ background:#008755 } body:not(.acc-fullscreen) .actv__stopb{ display:flex; align-items:flex-start; gap:var(--crm-sp-3); padding:11px 14px; padding-inline-start:16px; width:100%; background:transparent; border:0; cursor:pointer; text-align:start; font:inherit; color:inherit; } body:not(.acc-fullscreen) .actv__num{ width:24px; height:24px; border-radius:50%; background:#0073ea; color:#fff; font-weight:700; font-size:11px; display:grid; place-items:center; flex-shrink:0; margin-top:1px; font-variant-numeric:tabular-nums; transition:transform .2s cubic-bezier(.34,1.56,.64,1); } body:not(.acc-fullscreen) .actv__stop.is-logged .actv__num{ background:#008755 } body:not(.acc-fullscreen) .actv__stop:hover .actv__num{ transform:scale(1.12) } body:not(.acc-fullscreen) .actv__stopb-b{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; } body:not(.acc-fullscreen) .actv__stopn{ display:flex; align-items:center; gap:6px; min-width:0; color:var(--acc-ink-mute); } body:not(.acc-fullscreen) .actv__stopn b{ font-weight:600; font-size:calc(13px * var(--crm-fs)); color:var(--acc-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body:not(.acc-fullscreen) .actv__stop:hover .actv__stopn b{ text-decoration:underline } body:not(.acc-fullscreen) .actv__meta{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; font-size:calc(11.5px * var(--crm-fs)); color:var(--acc-ink-mute); } body:not(.acc-fullscreen) .actv__sub{ font-size:calc(11.5px * var(--crm-fs)); color:var(--acc-ink-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body:not(.acc-fullscreen) .actv__ver{ padding:1px 7px; border-radius:999px; flex:0 0 auto; font-size:10px; font-weight:600; letter-spacing:.01em; } body:not(.acc-fullscreen) .actv__ver.is-ok{ background:var(--acc-total); color:var(--acc-green) } body:not(.acc-fullscreen) .actv__ver.is-warn{ background:var(--acc-red-soft); color:var(--acc-red) } body:not(.acc-fullscreen) .actv__go{ flex:0 0 auto; align-self:center; color:var(--acc-ink-mute); transition:transform .18s ease, color .15s ease, opacity .15s ease; } body:not(.acc-fullscreen) .actv__stop:hover .actv__go{ transform:translateX(2px); color:#0073ea; } /* Delete stays out of the way until the row is under the pointer: it sits on top of a button that opens the visit, and a permanent red target beside a row people click all day is how a visit gets deleted by aim. The chevron yields the same corner so the two never overlap. */ body:not(.acc-fullscreen) .actv__del{ position:absolute; inset-inline-end:8px; top:50%; transform:translateY(-50%); opacity:0; transition:opacity .15s ease; } body:not(.acc-fullscreen) .actv__stop:hover .actv__del, body:not(.acc-fullscreen) .actv__del:focus-visible{ opacity:1 } body:not(.acc-fullscreen) .actv__stop:hover .actv__go{ opacity:0 } /* ---- the day's route ---- */ body:not(.acc-fullscreen) .actv__map{ position:relative } /* Specificity raised on purpose: the shared .ccmap rule further down this sheet re-states radius and shadow, and a map sunk into an open panel wants neither the card radius nor a drop shadow lifting it off the surface. */ body:not(.acc-fullscreen) .actv__map .actv__mapc{ height:460px; border-radius:var(--crm-r); border:1px solid var(--acc-line); box-shadow:none; } @media (max-width:1023px){ body:not(.acc-fullscreen) .actv__map .actv__mapc{ height:320px } } /* Opaque, not translucent: it floats over map tiles, and a frosted control over aerial imagery is a control you cannot read. z-index clears Leaflet's own 800-stacked controls, which .ccmap's isolation keeps trapped inside the map. */ body:not(.acc-fullscreen) .actv__max{ position:absolute; inset-inline-end:12px; top:12px; z-index:900; display:inline-flex; align-items:center; gap:6px; background:var(--acc-surface); border:1px solid var(--acc-line); border-radius:var(--crm-r); padding:6px 10px; cursor:pointer; font:inherit; font-size:calc(11.5px * var(--crm-fs)); font-weight:600; color:var(--acc-ink-2); box-shadow:var(--acc-shadow); transition:background .15s ease, border-color .15s ease, transform .15s ease; } body:not(.acc-fullscreen) .actv__max:hover{ background:var(--acc-band-hi); border-color:var(--acc-line-firm); transform:translateY(-1px); } body:not(.acc-fullscreen) .actv__maph{ margin-top:7px; font-size:calc(11px * var(--crm-fs)); color:var(--acc-ink-mute); } /* A numbered stop pin — the map's own copy of the number on the list, so a stop can be matched between the two without counting. */ .numpin__b{ display:grid; place-items:center; width:100%; height:100%; border-radius:50%; background:var(--pc,#0073ea); color:#fff; border:2px solid #fff; box-shadow:0 1px 4px rgba(23,38,66,.35); font:700 11px/1 var(--crm-font,system-ui); font-variant-numeric:tabular-nums; } /* The maximized route: a dialog that is nearly all map. */ body:not(.acc-fullscreen) .mdl--daymap{ width:min(94vw,1400px); max-width:94vw } body:not(.acc-fullscreen) .actv__mdlb{ padding:var(--crm-sp-3) } body:not(.acc-fullscreen) .actv__mapbig{ height:76vh; border-radius:var(--crm-r) } @media (prefers-reduced-motion:reduce){ body:not(.acc-fullscreen) .actv, body:not(.acc-fullscreen) .actv__panel.is-open{ animation:none } body:not(.acc-fullscreen) .actv__stop:hover, body:not(.acc-fullscreen) .actv__max:hover{ transform:none } body:not(.acc-fullscreen) .actv__stop:hover .actv__num, body:not(.acc-fullscreen) .actv__stop:hover .actv__go{ transform:none } } /* ── 4. Web Catalogs & Promotion Studio ── */ body:not(.acc-fullscreen) .cat-hero { background: linear-gradient(135deg, #0073ea, #0c4a6e); color: #fff; border-radius: var(--crm-r-card); padding: var(--crm-sp-6); margin-bottom: var(--crm-sp-5); box-shadow: 0 12px 32px -6px rgba(0, 115, 234, 0.25); animation: universal-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards; position: relative; overflow: hidden; } body:not(.acc-fullscreen) .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--crm-sp-4); } body:not(.acc-fullscreen) .cat-card { background: var(--acc-surface); border: 1px solid var(--acc-line); border-radius: var(--crm-r-card); overflow: hidden; box-shadow: var(--acc-shadow); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.2s ease; animation: bento-card-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards; } body:not(.acc-fullscreen) .cat-card:hover { transform: translateY(-6px) scale(1.01); border-color: var(--acc-line-firm); box-shadow: 0 16px 36px -6px rgba(0,0,0,0.12); } body:not(.acc-fullscreen) .cat-card__cover { width: 100%; height: 160px; object-fit: cover; transition: transform 0.35s ease; } body:not(.acc-fullscreen) .cat-card:hover .cat-card__cover { transform: scale(1.05); } body:not(.acc-fullscreen) .cat-prod-item { background: var(--acc-surface); border: 1px solid var(--acc-line); border-radius: var(--crm-r); padding: 10px 14px; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; transition: transform 0.2s ease, box-shadow 0.2s ease; } body:not(.acc-fullscreen) .cat-prod-item:hover { transform: translateY(-2px); box-shadow: 0 6px 16px -3px rgba(0,0,0,0.06); } body:not(.acc-fullscreen) .cat-device-btn { transition: all 0.2s ease; cursor: pointer; } body:not(.acc-fullscreen) .cat-device-btn:hover { transform: translateY(-1px); } body:not(.acc-fullscreen) .cat-simulator__mobile { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } body:not(.acc-fullscreen) .cat-simulator__mobile:hover { transform: scale(1.015); } /* ── 5. Maps & Live Realtime Tracking ── */ body:not(.acc-fullscreen) .ccmap { border-radius: var(--crm-r-card); overflow: hidden; box-shadow: var(--acc-shadow); border: 1px solid var(--acc-line); animation: universal-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards; position: relative; } body:not(.acc-fullscreen) .maplegend span { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--acc-surface); border: 1px solid var(--acc-line-soft); box-shadow: var(--acc-shadow); } body:not(.acc-fullscreen) .maplegend span:hover { transform: translateY(-2px) scale(1.05); border-color: var(--acc-line-firm); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } /* Live radar ping beacon */ @keyframes live-radar-ping { 0% { transform: scale(0.6); opacity: 0.9; } 75%, 100% { transform: scale(2.6); opacity: 0; } } .livepin__ring { position: absolute; inset: -6px; border-radius: 50%; background: var(--pc, #00c875); animation: live-radar-ping 2s cubic-bezier(0, 0.2, 0.8, 1) infinite; pointer-events: none; } .livepin__dot, .livedot { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--pc, #00c875); box-shadow: 0 0 0 2px #fff, 0 0 8px var(--pc, #00c875); } /* ── 6. WhatsApp Suite ── */ body:not(.acc-fullscreen) .wa-row { transition: background 0.15s ease, transform 0.15s ease; } body:not(.acc-fullscreen) .wa-row:hover { background: var(--acc-band-hi); transform: scale(1.002); } body:not(.acc-fullscreen) .wa-comp { background: var(--acc-surface); border: 1px solid var(--acc-line); border-radius: var(--crm-r-card); box-shadow: var(--acc-shadow); padding: var(--crm-sp-5); animation: universal-fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards; } body:not(.acc-fullscreen) .wa-sender-card { background: var(--acc-surface); border: 1px solid var(--acc-line); border-radius: var(--crm-r-card); box-shadow: var(--acc-shadow); padding: var(--crm-sp-4); transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease; animation: bento-card-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards; } body:not(.acc-fullscreen) .wa-sender-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px -6px rgba(0,0,0,0.08); } /* QR Code Laser scanning animation */ @keyframes qr-scan-laser { 0% { top: 0%; opacity: 0.8; } 50% { top: 96%; opacity: 1; } 100% { top: 0%; opacity: 0.8; } } body:not(.acc-fullscreen) .wa-qr-box { position: relative; overflow: hidden; border-radius: var(--crm-r-lg); box-shadow: var(--acc-shadow-pop); animation: modal-scale-pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards; } body:not(.acc-fullscreen) .wa-qr-box::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #25d366, transparent); box-shadow: 0 0 12px #25d366; animation: qr-scan-laser 2.6s infinite ease-in-out; pointer-events: none; } /* ── 7. Accounting System ── */ .accpage { animation: universal-fade-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) backwards; } .acccard { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.15s ease; } .acccard:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -4px rgba(0,0,0,0.08); } .accbtn { transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease, box-shadow 0.18s ease; } .accbtn:hover { transform: translateY(-1.5px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .accbtn:active { transform: translateY(0) scale(0.98); } .acctbl tbody tr { transition: background 0.15s ease; } .acctbl tbody tr:hover { background: var(--acc-band-hi) !important; } /* Floating MDI Windows Animation */ .mdi-win { transition: box-shadow 0.2s ease, border-color 0.2s ease; animation: modal-scale-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1) backwards; } .mdi-win.is-focused { box-shadow: 0 20px 48px -8px rgba(0,0,0,0.22); }