.print-product-mockup{position:relative;width:100%;aspect-ratio:4/3;isolation:isolate;background:#f4eee5;overflow:hidden;border-radius:12px}.print-product-mockup>img{display:block;width:100%;height:100%;object-fit:contain}.print-mockup-ink{position:absolute;overflow:hidden;mix-blend-mode:multiply;pointer-events:none;filter:contrast(.96);opacity:.96}.print-mockup-ink>svg{width:100%;height:100%;display:block}.surface-round .print-mockup-ink{clip-path:ellipse(50% 50% at 50% 50%)}.surface-cylinder .print-mockup-ink{border-radius:4% / 1%;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.surface-fabric .print-mockup-ink{opacity:.91;filter:contrast(.92)}.print-mockup-label{position:absolute;bottom:8px;right:10px;font:8px Arial,sans-serif;letter-spacing:.2px;color:#5f655b;background:#ffffffe0;padding:4px 6px;border-radius:4px}.nana-artboard:has(.print-product-mockup){max-width:900px!important;aspect-ratio:4/3!important;width:100%!important}.nana-artboard>.print-product-mockup{border-radius:8px}.nana-mockup-note{font-size:11px;color:#647269;padding:8px 12px;margin:0;text-align:center}.nana-template-live{aspect-ratio:1.6;background:#f8f6f0;overflow:hidden;width:100%;border-radius:5px}.nana-template-live .nana-artwork{width:100%;height:100%;max-height:130px}.nana-templates .nana-template{padding:8px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;text-align:left!important;gap:5px!important}.nana-templates .nana-template strong{font-size:12px}.nana-templates .nana-template small{font-size:10px}.printly-category .print-product-mockup{border-radius:16px!important}.printly-hero-art .print-product-mockup{box-shadow:4px 12px 25px #183b2720}.ew-gallery-main>.print-product-mockup{height:auto!important;min-height:0!important}.ew-gallery-main:has(>.print-product-mockup){padding:0!important;background:transparent!important}.printly-card-picture .print-mockup-label{display:none}.printly-card-picture .print-product-mockup{border-radius:12px}.printly-category .print-mockup-label{display:none}@media(max-width:600px){.print-mockup-label{font-size:7px;right:5px;bottom:5px}.nana-mockup-note{font-size:10px}}
.nana-artboard-scroll:has(.print-product-mockup){container-type:size;align-items:center;justify-content:center;padding:12px;background:#eeedf4}.nana-artboard-scroll .nana-artboard:has(.print-product-mockup){width:min(100cqw,133cqh)!important;max-width:900px!important;margin:auto}
@layer base{.nana-library-tabs>button{min-width:0!important;flex:1 1 0!important;padding:8px!important;width:auto!important}}
html:has(dialog.nana-designer[open]),body:has(dialog.nana-designer[open]){overflow:hidden}
.nana-designer-launch{padding:22px;margin:24px 0;border:1px solid #ddd5f3;border-radius:18px;background:linear-gradient(120deg,#f4efff,#fbfaf7)}.nana-designer-launch>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.nana-designer-launch p{font-size:14px;line-height:1.6}.nana-icon-chip{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:13px;color:#6741c7;background:#ebe3ff}.nana-attached{display:flex;gap:8px;align-items:center;color:#17694e;font-weight:600}
.nana-designer{width:calc(100vw - 24px);height:calc(100dvh - 24px);max-width:1600px;max-height:none;margin:auto;padding:0;border:1px solid #dfe0e8;border-radius:20px;background:#f8f8fb;color:#243344;box-shadow:0 30px 100px #18243b55;font:14px/1.5 ui-sans-serif,system-ui,sans-serif;overflow:hidden}.nana-designer::backdrop{background:#14203988;backdrop-filter:blur(4px)}.nana-designer[open]{display:flex;flex-direction:column}.nana-designer :is(button,a,input,select,textarea){font:inherit}.nana-designer :is(button,a):focus-visible{outline:3px solid #8870e1;outline-offset:3px}.nana-designer :is(h2,p){margin:0 0 14px}.nana-designer h2{font:700 16px/1.5 ui-sans-serif,system-ui,sans-serif!important;display:flex;gap:8px;align-items:center;letter-spacing:0!important;color:#26354a!important}.nana-designer p,.nana-designer small{color:#637082}.nana-designer small{display:block;line-height:1.6;font-size:11px}.nana-designer button{min-height:40px;white-space:normal}.nana-designer button[aria-pressed=true]{background:#eee8ff!important;border-color:#8f77d1!important;color:#5635a4!important}
.nana-top{padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;border-bottom:1px solid #e2e4ec;flex:none}.nana-brand{display:flex;gap:12px;align-items:center;min-width:0}.nana-brand strong{font-size:18px;letter-spacing:-.03em}.nana-brand small{max-width:420px;overflow-wrap:anywhere}.nana-top-actions{display:flex;gap:8px;flex-wrap:wrap}.nana-top-actions button{display:flex;gap:8px;align-items:center}.nana-workspace{display:grid;grid-template-columns:220px minmax(0,1fr) 290px;min-height:0;flex:1;overflow:hidden}.nana-left,.nana-right{padding:18px;overflow:auto;min-width:0;background:#fff}.nana-left{border-right:1px solid #e2e4ec}.nana-right{border-left:1px solid #e2e4ec}.nana-library-tabs{display:flex;gap:8px;margin-bottom:22px}.nana-left>p{font-size:12px;line-height:1.7}.nana-templates{display:grid;gap:12px}.nana-designer .nana-template{display:flex!important;align-items:stretch!important;flex-direction:column!important;justify-content:flex-start!important;height:auto!important;text-align:left!important;padding:10px!important;gap:4px!important;background:#fff!important;border:1px solid #e5e4ed!important;border-radius:12px!important}.nana-template-art{height:84px;position:relative;display:flex;width:100%;border-radius:6px;align-items:center;justify-content:center;gap:14px;overflow:hidden}.nana-template-art>span{font-family:Georgia,serif;font-size:35px;font-weight:700}.nana-template-art>i{position:absolute;right:-20px;bottom:-25px;width:75px;height:75px;border-radius:50%;background:#ffffff33}.nana-template strong{font-size:13px;margin-top:6px}.nana-image-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.nana-designer .nana-image-grid button{padding:0!important;aspect-ratio:1;overflow:hidden;background:#f2f3f7!important}.nana-image-grid img{width:100%;height:100%;object-fit:cover}.nana-left>a{display:flex;gap:7px;margin:20px 0 9px;align-items:center;color:#6041a8}.nana-layers{display:grid;gap:8px}.nana-layers button{display:flex;align-items:center;gap:8px;text-align:left;min-width:0}.nana-layers span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nana-center{display:flex;flex-direction:column;min-width:0;min-height:0;background:#eeedf4}.nana-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;padding:10px;background:#fafafe;border-bottom:1px solid #e0deeb;flex:none}.nana-tools button{display:flex;gap:6px;align-items:center;padding:8px 10px!important}.nana-tools>span{font-size:11px;min-width:30px;text-align:center}.nana-divider{height:25px;border-left:1px solid #d9d7e4;min-width:0!important;margin:0 4px}.nana-artboard-scroll{flex:1;overflow:auto;padding:42px 32px;min-height:160px;display:flex;align-items:flex-start;justify-content:flex-start;touch-action:none;background-image:radial-gradient(#d9d5e5 .7px,transparent .7px);background-size:12px 12px}.nana-artboard{flex:none;margin:auto;box-shadow:0 8px 30px #241a431f;line-height:0;min-width:100px;user-select:none}.nana-artwork{width:100%;height:100%;display:block;overflow:hidden;touch-action:none}.nana-guide-legend{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;font-size:10px;padding:10px;color:#656d7e;background:#f5f4fa}.nana-guide-legend span{display:flex;gap:5px;align-items:center}.nana-trim:before{content:'';width:16px;border-top:2px solid #bd5163}.nana-safe:before{content:'';width:16px;border-top:2px dashed #369a86}.nana-pages{display:flex;gap:8px;flex-wrap:wrap;padding:14px;justify-content:center;background:#fff;border-top:1px solid #e5e4ed;flex:none}.nana-pages button{font-size:12px;display:flex;gap:5px;align-items:center}
.nana-designer label{display:flex;flex-direction:column;gap:5px;margin:11px 0;font-size:12px;font-weight:600;color:#485269}.nana-designer :is(input:not([type=checkbox]):not([type=range]):not([type=color]),select,textarea){width:100%;box-sizing:border-box;padding:10px;border:1px solid #d8dbe6;border-radius:8px;min-height:40px;background:#fff;color:#243344;outline-offset:2px}.nana-designer textarea{min-height:100px;resize:vertical}.nana-designer input[type=color]{width:100%;height:36px;padding:3px;border:1px solid #d8dbe6;border-radius:8px;background:#fff}.nana-designer input[type=range]{width:100%;accent-color:#7250c7}.nana-number-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}.nana-property-actions{display:flex;gap:6px;flex-wrap:wrap}.nana-property-actions button{font-size:12px;display:flex;gap:5px;align-items:center}.nana-layer-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #e5e4ed;padding-top:18px;margin-top:20px}.nana-layer-heading>div{display:flex;gap:5px}.nana-layer-heading button{padding:6px!important;min-width:35px!important}.nana-select-hint{padding:26px 5px;text-align:center;color:#8b7bb2}.nana-select-hint p{margin:10px 0 0;font-size:12px}.nana-pricing{margin-top:24px;padding-top:22px;border-top:1px solid #e1e3eb}.nana-pricing .nana-live-price{display:block;font-size:21px;margin:18px 0 12px;color:#4b338d}.nana-pricing p{font-size:12px;margin-top:12px}.nana-pricing label{font-size:12px}.nana-bottom{padding:13px 20px;background:#fff;border-top:1px solid #e2e4ec;display:flex;justify-content:space-between;gap:12px;align-items:center;flex:none}.nana-bottom>div:first-child>span{font-size:11px;color:#73728a;display:flex;gap:7px;align-items:center}.nana-confirm{display:flex;gap:16px;align-items:center}.nana-confirm label{display:flex;flex-direction:row;gap:8px;align-items:center;font-size:11px;max-width:240px}.nana-confirm input{accent-color:#6741c7}.nana-confirm button{display:flex;align-items:center;gap:7px;background:#6441bf!important;color:white!important;border-color:#6441bf!important}.nana-confirm button:disabled{opacity:.5}.nana-messages{padding:7px 20px;background:#fff6df;color:#795d21;font-size:11px;flex:none}.nana-mobile-tabs{display:none}
.nana-order-designs{margin:18px 0;padding:20px;border:1px solid #ded6ef;border-radius:14px;background:#faf8fe}.nana-order-designs summary{font-weight:600;cursor:pointer}.nana-order-designs img{display:block;max-width:100%;max-height:400px;margin:16px 0;background:#fff;border:1px solid #ddd}.nana-order-designs button,.nana-order-designs a{margin:8px 8px 0 0}.nana-cart-artwork{max-width:220px;max-height:180px;overflow:hidden;margin:10px 0;border:1px solid #ddd;border-radius:8px}.nana-cart-artwork .nana-artwork{height:auto}
@media(max-width:1100px){.nana-workspace{grid-template-columns:180px minmax(0,1fr) 250px}.nana-top{padding:12px}.nana-brand small{max-width:230px}.nana-left,.nana-right{padding:14px}.nana-artboard-scroll{padding:30px 20px}.nana-bottom>div:first-child{display:none}.nana-bottom{justify-content:flex-end}.nana-confirm label{max-width:none}}
@media(max-width:800px){.nana-designer{width:100%;box-sizing:border-box;height:100dvh;border-radius:0;margin:0;max-width:none;border:0}.nana-top{align-items:flex-start;gap:8px}.nana-brand .nana-icon-chip{display:none}.nana-brand strong{font-size:15px}.nana-brand small{font-size:10px;max-width:170px}.nana-top-actions{gap:4px}.nana-top-actions button{font-size:11px;padding:7px!important;min-height:38px}.nana-mobile-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:8px;background:#fff}.nana-mobile-tabs button{font-size:10px;padding:5px!important;min-height:42px;line-height:1.4}.nana-workspace{display:flex;flex-direction:column}.nana-left,.nana-right,.nana-center{display:none;flex:1;overflow:auto}.nana-workspace[data-panel=assets] .nana-left{display:block}.nana-workspace[data-panel=canvas] .nana-center{display:flex;overflow:hidden}.nana-workspace:is([data-panel=properties],[data-panel=pricing]) .nana-right{display:block}.nana-workspace[data-panel=pricing] .nana-properties{display:none}.nana-workspace[data-panel=properties] .nana-pricing{display:none}.nana-workspace[data-panel=pricing] .nana-pricing{margin:0;padding:8px 0;border:0}.nana-templates{grid-template-columns:repeat(2,minmax(0,1fr))}.nana-image-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.nana-tools{gap:4px;padding:8px}.nana-tools button{font-size:11px;padding:7px!important;min-height:38px}.nana-artboard-scroll{padding:24px 14px}.nana-guide-legend{font-size:9px;gap:8px;padding:7px}.nana-pages{padding:8px;gap:5px}.nana-pages button{font-size:10px;padding:6px!important;min-height:36px}.nana-confirm{width:100%;justify-content:space-between;gap:10px}.nana-confirm label{font-size:10px;max-width:200px;margin:0}.nana-confirm button{font-size:11px;padding:9px!important;flex:none}.nana-bottom{padding:10px}.nana-messages{font-size:10px;max-height:55px;overflow:auto;padding:6px 12px}}
.nana-customer-library{border:1px solid #d8c9f6;border-radius:14px;padding:12px;margin-bottom:22px;background:linear-gradient(145deg,#f2ebff,#f0fbf7);overflow-wrap:anywhere}.nana-private-title{display:flex;align-items:center;gap:8px}.nana-private-title>span{display:flex;padding:8px;border-radius:10px;background:#e4d8ff;color:#683ab7}.nana-private-title h2{margin:0!important}.nana-customer-library>button{width:100%;margin:7px 0;justify-content:flex-start}.nana-customer-library p{font-size:12px;margin:12px 0}.nana-customer-library small{font-size:10px}.nana-private-login{display:grid;gap:9px}.nana-private-login label{display:grid;gap:4px;font-size:12px}.nana-private-login input{min-width:0;width:100%;box-sizing:border-box;padding:9px;border:1px solid #d7d5e4;border-radius:8px;background:#fff}.nana-private-account{display:flex;gap:6px;align-items:center;font-size:10px;margin:12px 0;color:#23604f}.nana-private-account span{flex:1;min-width:0;overflow-wrap:anywhere}.nana-private-account button{flex:none}.nana-private-upload{display:grid;gap:8px;padding:14px;background:#fff;border:1px dashed #9571d0;border-radius:12px;color:#6140a7;font-size:12px;cursor:pointer}.nana-private-upload span{font-size:10px;color:#546775}.nana-private-upload input{display:block;max-width:100%;font-size:10px;min-width:0;color:#26364a}.nana-private-drive{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:12px 0;color:#287657;font-size:12px}.nana-private-drive small{width:100%;color:#4f695d}.nana-private-backup{display:flex;gap:6px;font-size:11px;line-height:1.5;align-items:flex-start;margin:6px 0}.nana-private-backup input{flex:none}.nana-private-actions{display:grid;gap:7px;margin:10px 0}.nana-private-actions button{font-size:11px;justify-content:flex-start}.nana-private-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:12px 0}.nana-private-grid button{display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:7px!important}.nana-private-grid img{width:100%;height:75px;object-fit:contain;border-radius:7px;background:#fff}.nana-private-grid span{display:flex;align-items:center;gap:4px;overflow:hidden;text-overflow:ellipsis;font-size:9px}.nana-private-grid small{color:#287657}
/* Private artwork actions must remain readable in the narrow asset panel. */
.nana-designer .nana-private-grid{grid-template-columns:minmax(0,1fr)}.nana-designer .nana-private-grid button{width:100%;gap:6px;height:auto!important}.nana-designer .nana-private-grid img{height:105px}.nana-designer .nana-private-grid span{font-size:11px;overflow-wrap:anywhere;text-align:left}.nana-designer .nana-upload-entry{background:#6845bd!important;color:#fff!important;border-color:#6845bd!important;gap:8px;min-height:48px}.nana-private-images-heading{font-size:12px;margin:14px 0 7px}.nana-designer .nana-private-upload input[type=file]{padding:7px;font-size:11px}.nana-designer .nana-private-upload input[type=file]::file-selector-button{border:0;border-radius:6px;background:#ede5ff;color:#5936a0;padding:8px;font-weight:600;cursor:pointer}.nana-designer .nana-customer-library>button{gap:7px}.nana-designer .nana-private-backup{flex-direction:row}.nana-designer .nana-private-grid small{font-size:11px}
.sites-private-media-modal{width:min(920px,calc(100vw - 24px));height:min(760px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);box-sizing:border-box;border:1px solid #d9d3eb;border-radius:18px;padding:20px;background:#fff;color:#243344;overflow:auto;font:14px/1.5 system-ui,sans-serif}.sites-private-media-modal::backdrop{background:#17213a88}.sites-private-media-modal>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.sites-private-media-modal h2{display:flex;align-items:center;gap:10px;font-size:20px;color:#6543b2}.sites-private-media-intro{color:#5b687b;font-size:13px}.sites-private-media-content .nana-customer-library{margin:0}.sites-private-media-content .sites-media-board-toolbar{display:flex;gap:10px;margin:16px 0}.sites-private-media-content .sites-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.sites-private-media-content .sites-media-card{min-width:0;border:1px solid #dedbea;border-radius:12px;padding:8px}.sites-private-media-content .sites-media-card-pick{width:100%;border:0;background:#f4f1fb;border-radius:8px;padding:5px;cursor:pointer}.sites-private-media-content .sites-media-thumb{display:block;width:100%;height:130px;object-fit:contain}.sites-private-media-content .sites-media-read{padding:8px;overflow-wrap:anywhere;font-size:12px}.sites-private-media-content .sites-media-kind{display:block;color:#277458;font-size:11px}.nana-library-launch>button{width:100%;gap:7px;min-height:48px}.nana-library-launch p{font-size:12px;color:#637082}.sites-private-media-content .nana-private-login{max-width:420px}.sites-private-media-content .nana-customer-library>button{max-width:420px}.sites-private-media-content .nana-private-actions{display:flex;flex-wrap:wrap}.sites-private-media-content .nana-private-actions button{min-height:44px}.sites-private-media-modal :is(button,input):focus-visible{outline:3px solid #8a6be0;outline-offset:2px}@media(max-width:600px){.sites-private-media-modal{padding:12px}.sites-private-media-content .sites-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sites-private-media-modal h2{font-size:17px}}
/* E-Commerce presentation only; native inputs, permissions and owner actions stay intact. */
.ec-label{min-width:0;font-size:13px;font-weight:500;line-height:1.5}.ec-label-copy{display:inline-flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}.ec-symbol{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0;width:28px;height:28px;border-radius:8px;margin-right:5px}.ec-symbol svg{flex-shrink:0}.ec-blue{background:#eff6ff;color:#2563eb}.ec-purple{background:#f5f3ff;color:#7c3aed}.ec-green{background:#ecfdf5;color:#059669}.ec-orange{background:#fff7ed;color:#ea580c}.ec-action-icon{flex-shrink:0;vertical-align:middle;margin-right:5px;color:currentColor}
.ec-label>input:not([type=checkbox]):not([type=radio]):not([type=file]),.ec-label>select,.ec-label>textarea{box-sizing:border-box;min-height:44px;max-width:100%;min-width:0;border:1px solid #cbd5e1;border-radius:9px;padding:10px 12px;background:var(--ui-surface,#fff);color:var(--ui-text,#183047);font:inherit}.ec-label>textarea{min-height:96px;resize:vertical}.ec-label input:focus-visible,.ec-label select:focus-visible,.ec-label textarea:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}
form[data-commerce-form]{min-width:0;gap:16px}form[data-commerce-form]>fieldset{min-width:0;border:1px solid #e2e8f0;border-radius:12px;padding:16px}form[data-commerce-form] button{min-height:44px}form[data-commerce-form] [role=alert]{border-radius:9px;padding:12px;background:#fef2f2;color:#991b1b}.ec-minimum-price{display:grid;gap:4px;margin:8px 0;line-height:1.5}.ec-minimum-price strong{font-size:19px;color:#0f766e}.ec-minimum-price small{color:#64748b;font-size:12px}.ec-minimum-note{padding:10px 12px;background:#fff7ed;color:#9a3412;border-radius:9px;font-size:12px;line-height:1.5}
@media(max-width:600px){.ec-label-copy{gap:6px}.ec-symbol{width:25px;height:25px}form[data-commerce-form]{width:100%}}
@media(prefers-color-scheme:dark){html[data-color-mode=dark] .ec-symbol{background:#20344a;color:#93c5fd}}
.ec-order-config{border:1px solid #e2e8f0;border-radius:14px;padding:18px;min-width:0}.ec-order-product{display:flex;align-items:center;gap:14px;margin-bottom:16px}.ec-order-thumbnail{width:72px;height:72px;object-fit:contain;border-radius:10px;background:#f8fafc}.ec-order-config .dp-field{display:grid;gap:8px;margin-bottom:14px}.ec-order-config input:not([type=checkbox]):not([type=radio]),.ec-order-config select,.ec-order-config textarea{box-sizing:border-box;min-height:44px;max-width:100%;width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:9px}.ec-order-config .dp-check{display:inline-flex;align-items:center;gap:8px;margin:4px 12px 4px 0}.ec-order-config button{min-height:44px;padding:10px 14px;border:1px solid #cbd5e1;border-radius:9px;background:var(--ui-surface,#fff);color:var(--ui-text,#183047)}
[data-screen="sites-store-catalog"] .sites-store-tabs button:nth-child(4n+1)>svg{color:#2563eb}[data-screen="sites-store-catalog"] .sites-store-tabs button:nth-child(4n+2)>svg{color:#7c3aed}[data-screen="sites-store-catalog"] .sites-store-tabs button:nth-child(4n+3)>svg{color:#059669}[data-screen="sites-store-catalog"] .sites-store-tabs button:nth-child(4n)>svg{color:#ea580c}
.ec-csv-import{display:inline-flex;flex-direction:column;align-items:flex-start;gap:7px;max-width:100%}.ec-csv-import small{color:#64748b;overflow-wrap:anywhere}.ec-csv-import [role=alert]{font-size:13px;background:#fef2f2;color:#991b1b;border-radius:8px;padding:10px}
/* DEC-108: pictorial E-Commerce surfaces, preserving native fields and owner actions. */
.ec-guide { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:12px; list-style:none; padding:0; margin:18px 0; min-width:0; }
.ec-guide > li { display:flex; align-items:flex-start; gap:12px; min-width:0; padding:16px; border:1px solid var(--ui-border,#e2e8f0); border-radius:14px; background:var(--ui-surface,#fff); }
.ec-guide strong { display:block; font-size:14px; line-height:1.4; color:var(--ui-text,#183047); }
.ec-guide p { margin:6px 0 0; font-size:13px; line-height:1.6; color:var(--ui-muted,#64748b); }
.ec-guide-mark { position:relative; flex-shrink:0; }.ec-guide-mark .ec-symbol { width:42px;height:42px;border-radius:13px;margin:0; }
.ec-guide-number { position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ui-surface,#fff);border:1px solid var(--ui-border,#ddd);font-size:10px;color:var(--ui-muted,#64748b); }
.ec-guide-compact { gap:9px; }.ec-guide-compact>li { padding:12px; }.ec-guide-compact .ec-guide-mark .ec-symbol { width:34px;height:34px; }
.ec-notice { display:flex; align-items:flex-start; gap:10px; padding:14px; border-radius:12px; border:1px solid var(--ui-border,#e2e8f0); background:var(--ui-subtle,#f8fafc); margin:12px 0; min-width:0; }
.ec-notice strong { display:block; line-height:1.5; }.ec-notice-copy { font-size:13px;line-height:1.65;color:var(--ui-muted,#64748b);margin-top:3px; }.ec-notice-copy p { margin:4px 0; }
.ec-visual-empty { display:grid;justify-items:center;text-align:center;gap:12px;padding:30px 16px;border:1px dashed var(--ui-border,#ddd6fe);border-radius:16px;background:var(--ui-subtle,#faf9ff); }.ec-visual-empty p { max-width:36em;margin:0;color:var(--ui-muted,#64748b);font-size:13px;line-height:1.6; }
.ec-empty-art { position:relative;display:grid;place-items:center;width:76px;height:76px;border-radius:24px;background:#f1eaff;color:#7c3aed; }.ec-empty-art>svg:last-child { position:absolute;right:4px;bottom:6px;background:#ecfdf5;color:#059669;border-radius:50%; }
.ec-product-binding,.ec-seller-segment { padding:16px;margin:12px 0;border:1px solid var(--ui-border,#e2e8f0);border-radius:14px;background:var(--ui-surface,#fff);min-width:0; }.ec-product-binding h3 { display:flex;align-items:center;gap:8px; }
.ec-owner-link { display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;line-height:1.5;margin:8px 8px 8px 0; }.ec-state-badge { display:inline-flex;padding:4px 9px;border-radius:99px;font-size:12px;background:var(--ui-subtle,#f1f5f9);color:var(--ui-text,#183047); }
.ec-file-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr));gap:14px;padding:0;list-style:none; }.ec-file-grid>li { display:grid;gap:12px;padding:18px;border:1px solid var(--ui-border,#ddd);border-radius:14px;background:var(--ui-surface,#fff);min-width:0;overflow-wrap:anywhere; }.ec-file-grid>li>.ec-symbol {width:48px;height:48px;}.ec-file-grid p{margin:0;font-size:13px;line-height:1.6;}
.ec-store-kind { display:flex;align-items:center;gap:5px; }.ec-order-heading { display:inline-flex;align-items:center;gap:7px; }.ec-order-list { display:grid;gap:14px; }.ec-order-list>li { border:1px solid var(--ui-border,#ddd);border-radius:16px;padding:18px;background:var(--ui-surface,#fff); }.ec-order-list>li>.ec-label {margin:12px 8px 12px 0;}.ec-order-list>li>button {margin:4px;}
.ec-cart-line { padding:16px!important;border:1px solid var(--ui-border,#ddd);border-radius:14px;margin:12px 0!important;background:var(--ui-surface,#fff); }.ec-cart-line>.ec-symbol {width:40px;height:40px;margin-bottom:10px;}.sites-store-cart .ec-guide { grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); }
.ec-category-icon { display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:#eff6ff;color:#2563eb; }.ec-category-icon[data-category=fashion],.ec-category-icon[data-category=beauty] {background:#fdf2f8;color:#db2777;}.ec-category-icon[data-category=grocery] {background:#ecfdf5;color:#059669;}.ec-category-icon[data-category=home] {background:#fff7ed;color:#ea580c;}
.ec-template-hero-photo { position:relative;min-height:260px;display:grid;place-items:center;padding:26px; }.ec-template-hero-photo img {width:100%;height:300px;object-fit:contain;border-radius:20px;filter:drop-shadow(0 20px 25px #18304720);}.ec-template-hero-photo>span {position:absolute;bottom:12px;right:12px;padding:8px 12px;border-radius:99px;background:var(--ui-surface,#fff);color:var(--ui-text,#183047);font-size:12px;}
.ec-setup-note { display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.6; }.ec-pricing-help {display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.6;}
@layer components {
.commerce-type-picker .commerce-type-grid>button.commerce-type-card { width:100%!important;max-width:none!important;justify-self:stretch!important; }
.commerce-type-grid .commerce-type-card>svg { width:30px;height:30px;padding:8px;box-sizing:content-box;border-radius:13px;background:color-mix(in srgb,currentColor 9%,transparent); }
.commerce-type-summary .ec-guide strong { display:block; }
.app-shell [data-screen="sites-store-catalog"] .sites-store-tabs { display:grid!important;grid-template-columns:repeat(auto-fit,minmax(106px,1fr));gap:9px;white-space:normal;overflow:visible; }
.app-shell [data-screen="sites-store-catalog"] .sites-store-tabs button { width:100%!important;max-width:none!important;min-width:0!important;justify-self:stretch!important;flex-direction:column;gap:8px;padding:13px 8px!important;border:1px solid var(--ui-border,#e2e8f0)!important;border-radius:13px!important;min-height:88px; }
.app-shell [data-screen="sites-store-catalog"] .sites-store-tabs button>svg { width:26px;height:26px; }
.app-shell [data-screen="sites-store-catalog"] .sites-store-tabs button.is-active { background:var(--ui-accent-soft,#eff6ff)!important;border-color:var(--ui-accent,#4264ff)!important; }
.app-shell [data-screen="sites-store-catalog"] .sites-list-actions { display:flex;flex-wrap:wrap;gap:9px; }
.app-shell [data-screen="sites-store-catalog"] .sites-list-actions>a { display:inline-flex;align-items:center;gap:5px; }
.app-shell [data-screen="sites-product"] .sites-product-stepper ol { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr));gap:9px;width:100%; }
.app-shell [data-screen="sites-product"] .sites-product-stepper li { min-width:0; }.app-shell [data-screen="sites-product"] .sites-product-stepper li::after {display:none;}
.app-shell [data-screen="sites-product"] .sites-product-stepper button { width:100%!important;min-width:0!important;max-width:none!important;justify-self:stretch!important;padding:12px!important;border-radius:12px!important; }
.app-shell [data-screen="sites-product"] .sites-product-stepper li:nth-child(3n+1) .sites-product-step-dot {color:#2563eb;background:#eff6ff;}.app-shell [data-screen="sites-product"] .sites-product-stepper li:nth-child(3n+2) .sites-product-step-dot {color:#7c3aed;background:#f5f3ff;}.app-shell [data-screen="sites-product"] .sites-product-stepper li:nth-child(3n) .sites-product-step-dot {color:#059669;background:#ecfdf5;}
.app-shell .dp-page .dp-set-name {width:100%!important;max-width:none!important;display:grid!important;justify-self:stretch!important;justify-content:start!important;text-align:left!important;}.app-shell .dp-page .dp-set-name strong {display:flex;align-items:center;gap:9px;}
.app-shell .dp-page .dp-swatches button {width:auto!important;max-width:100%!important;}.app-shell .dp-page .dp-check {padding:9px;border:1px solid var(--ui-border,#ddd);border-radius:10px;}
.app-shell [data-screen="sites-store"] .kind-row-name {width:auto!important;max-width:100%!important;text-align:left!important;justify-content:flex-start!important;}
.commerce-template-tabs button {display:inline-flex;align-items:center;gap:9px;}.commerce-type-summary h2 {display:flex;align-items:center;gap:8px;}
}
@media(max-width:600px) { .ec-guide {grid-template-columns:1fr;}.ec-guide>li {padding:13px;}.ec-template-hero-photo img {height:220px;}.ec-template-hero-photo {min-height:220px;padding:14px;}.ec-order-list>li {padding:13px;}.ec-cart-line {padding:12px!important;} }
html[data-color-mode=dark] :is(.ec-blue,.ec-category-icon){background:#152d4c;color:#93c5fd;}html[data-color-mode=dark] .ec-purple{background:#322349;color:#d8b4fe;}html[data-color-mode=dark] .ec-green{background:#133a31;color:#6ee7b7;}html[data-color-mode=dark] .ec-orange{background:#422c1b;color:#fdba74;}
@layer components {
.app-shell [data-screen="sites-store-catalog"] .sites-inv-pager button {width:44px!important;min-width:44px!important;max-width:44px!important;padding:8px!important;}.app-shell [data-screen="sites-product"] .sites-store-thumbs button {width:76px!important;min-width:0!important;max-width:76px!important;padding:4px!important;}.app-shell [data-screen="sites-product"] .sites-store-thumbs button img {width:64px;height:64px;object-fit:contain;}
.app-shell .dp-page button[aria-label^="Remove"],.app-shell .dp-page button[aria-label^="Move"],.app-shell .dp-page button[aria-label^="Duplicate"] {width:44px!important;min-width:44px!important;max-width:44px!important;padding:8px!important;}
}
.commerce-type-summary>form>fieldset.commerce-type-picker {display:grid;gap:16px;}.commerce-type-summary>form>fieldset>.ec-label,.ec-product-binding>.ec-label {display:grid;gap:8px;}.ec-product-binding .ec-label>select,.ec-product-binding .ec-label>input {width:100%;}.commerce-type-summary>form>fieldset>.ec-label:has(input[type=checkbox]) {display:flex;align-items:center;gap:8px;padding:12px;border:1px solid var(--ui-border,#ddd);border-radius:10px;}
/* Store desk heading keeps its own row ahead of icon-led actions. */
@layer components {
.app-shell [data-screen="sites-store-catalog"]>.sites-list-head {display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:start!important;gap:14px!important;}
.app-shell [data-screen="sites-store-catalog"]>.sites-list-head>.sites-store-brand {min-width:0!important;width:100%!important;}
.app-shell [data-screen="sites-store-catalog"]>.sites-list-head>.sites-list-actions {grid-column:1/-1!important;width:100%!important;justify-content:flex-start!important;margin:0!important;}
.app-shell [data-screen="sites-store-catalog"] .sites-store-brand h1 {display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;max-width:none!important;width:auto!important;}
.app-shell [data-screen="sites-store-catalog"] .sites-store-brand .sites-list-lede {max-width:none!important;width:auto!important;}
.app-shell [data-screen="sites-store-catalog"] .sites-store-title-icon {display:none!important;}
}
/* Product steps wrap into accessible tiles instead of a clipped horizontal rail. */
@layer components {
.app-shell [data-screen="sites-product"] .sites-product-stepper {display:block!important;overflow:visible!important;min-width:0!important;max-width:100%!important;}
.app-shell [data-screen="sites-product"] .sites-product-stepper ol {display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr))!important;grid-auto-flow:row!important;gap:9px!important;width:100%!important;min-width:0!important;max-width:100%!important;overflow:visible!important;}
.app-shell [data-screen="sites-product"] .sites-product-stepper ol>li {width:100%!important;min-width:0!important;max-width:100%!important;}
}
.dp-page{max-width:1280px;margin:auto;padding:24px;color:#183047}.dp-page *{box-sizing:border-box}.dp-header,.dp-toolbar,.dp-row,.dp-set{display:flex;align-items:center;gap:12px}.dp-header,.dp-toolbar,.dp-set{justify-content:space-between}.dp-header{margin-bottom:24px;flex-wrap:wrap}.dp-header a,.dp-header h1,.dp-back{display:flex;align-items:center;gap:10px}.dp-header h1{font-size:28px;margin:14px 0 6px}.dp-page p{color:#64748b;font-size:14px;line-height:1.6}.dp-page button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #d9e2ec;background:white;border-radius:9px;padding:10px 12px;color:#183047;cursor:pointer;min-height:42px}.dp-page button:disabled{opacity:.45;cursor:default}.dp-page .dp-primary{background:#0f766e;color:white;border-color:#0f766e}.dp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}.dp-stats>div,.dp-card{background:white;border:1px solid #e2e8f0;border-radius:16px;padding:22px}.dp-stats strong{display:block;font-size:28px;color:#0f766e;margin-bottom:4px}.dp-card{margin-bottom:18px;min-width:0}.dp-card h2{display:flex;gap:8px;align-items:center;margin:0 0 16px;font-size:19px}.dp-page label,.dp-field{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:500;margin-bottom:13px;min-width:0}.dp-page input:not([type=checkbox]):not([type=radio]),.dp-page select,.dp-page textarea{width:100%;min-width:0;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#183047;padding:10px;font:inherit;min-height:42px}.dp-page .dp-check{flex-direction:row;align-items:center;gap:8px;margin:8px 0}.dp-page input[type=checkbox],.dp-page input[type=radio]{width:18px;height:18px;flex-shrink:0}.dp-toolbar{margin-bottom:18px}.dp-toolbar>input{max-width:460px}.dp-set{padding:14px 0;border-top:1px solid #edf2f7;flex-wrap:wrap}.dp-set-name{flex:1;align-items:flex-start!important;flex-direction:column;border:0!important;text-align:left}.dp-set-name span{font-size:12px;color:#64748b}.dp-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;margin-top:18px}.dp-preview{align-self:start;position:sticky;top:20px}.dp-editor fieldset{border:0;margin:0;padding:0;min-width:0}.dp-item{border:1px solid #e2e8f0;background:#f8fafc;border-radius:12px;padding:16px;margin-bottom:16px}.dp-item h3{margin:0 auto 12px 0;font-size:15px}.dp-item>.dp-row{justify-content:space-between}.dp-two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.dp-conditions{margin-top:12px}.dp-conditions>.dp-row{margin-bottom:8px}.dp-conditions>.dp-row>*{flex:1}.dp-row>label{flex:1}.dp-wrap{flex-wrap:wrap}.dp-wrap>input{flex:1 1 90px;max-width:calc(50% - 12px)}.dp-note{background:#f1f5f9;padding:10px 12px;border-radius:8px}.dp-error{padding:14px;background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:10px;margin-bottom:16px}.dp-empty{text-align:center;padding:46px 16px}.dp-empty svg{color:#0f766e}.dp-products{max-height:280px;overflow:auto}.dp-page summary{cursor:pointer;padding:10px 0}.dp-back{margin-bottom:16px}.dp-inputs{margin-top:16px}@media(max-width:800px){.dp-page{padding:16px}.dp-layout{grid-template-columns:1fr}.dp-preview{position:static}.dp-stats{gap:8px}.dp-stats>div{padding:14px;font-size:12px}.dp-stats strong{font-size:23px}.dp-toolbar{flex-wrap:wrap}.dp-card{padding:16px}.dp-two{grid-template-columns:1fr}.dp-set>.dp-row{flex-wrap:wrap}.dp-header h1{font-size:24px}.dp-conditions>.dp-row{flex-wrap:wrap}.dp-conditions>.dp-row>*{flex:1 1 90px}}
.dp-visual{position:relative;width:100%;container-type:inline-size;overflow:hidden;border:1px solid #cbd5e1;border-radius:12px;margin:16px 0;isolation:isolate}.dp-visual-background{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.dp-visual-image{width:100%;height:100%;object-fit:contain;pointer-events:none}.dp-visual span{white-space:pre-wrap;overflow-wrap:anywhere;display:block;line-height:1.2}.dp-swatches{display:flex;gap:8px;flex-wrap:wrap}.dp-swatches button{display:flex;flex-direction:column;max-width:110px}.dp-swatches button[aria-pressed=true]{outline:2px solid #0f766e}.dp-swatch-image{width:60px;height:60px;object-fit:contain}
/* Keep pricing-library controls independent of global commerce button widths. */
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px;border:1px solid #e2e8f0;border-radius:12px;margin-top:12px;background:#fff;min-width:0}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set>button.dp-set-name{width:100%!important;max-width:none!important;min-width:0!important;flex:1 1 auto!important;white-space:normal;overflow-wrap:anywhere;padding:8px;text-align:left;align-items:flex-start!important}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set-name strong{display:flex;align-items:center;gap:10px;font-size:16px;line-height:1.4}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set-name strong svg{flex-shrink:0;color:#0f766e}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set-name span{font-size:13px;line-height:1.5}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set-name span:last-child{color:#0f766e;font-weight:600}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set>.dp-row{width:auto;min-width:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set>.dp-row>button{width:44px!important;min-width:44px!important;max-width:44px!important;min-height:44px;flex:0 0 44px!important;padding:10px}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set>.dp-row>.dp-check{flex:0 0 auto;margin:0;padding:10px 8px;min-height:44px;width:auto}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set button:focus-visible{outline:2px solid #0f766e;outline-offset:3px}
@media(max-width:800px){.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px}.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set>.dp-row{justify-content:flex-start;border-top:1px solid #edf2f7;padding-top:10px}.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set>.dp-row>.dp-check{margin-right:auto}.dp-page .dp-toolbar>button{width:auto!important;max-width:100%!important;white-space:normal}}
@layer components {
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set>button.dp-set-name{width:100%!important;max-width:none!important;min-width:0!important;flex:1 1 auto!important}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set>.dp-row>button[data-slot="button"]{width:44px!important;min-width:44px!important;max-width:44px!important;flex:0 0 44px!important}
}
/* Product identity uses the existing tenant-owned product media resolver. */
.app-shell .dp-page .dp-set>button.dp-set-name{flex-direction:row;align-items:center!important;justify-content:flex-start;gap:16px}
.app-shell .dp-page .dp-set-products{display:flex;flex-wrap:wrap;gap:8px;flex:0 0 auto;max-width:224px}
.app-shell .dp-page .dp-set-products:empty{display:none}
.app-shell .dp-page .dp-set-product{display:flex;flex-direction:column;gap:4px;width:96px;text-align:center}
.app-shell .dp-page .dp-set-product-image{display:block;width:96px;height:80px;object-fit:contain;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc}
.app-shell .dp-page .dp-set-product>span{font-size:11px;line-height:1.3;color:#475569;overflow-wrap:anywhere}
.app-shell .dp-page .dp-set-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:7px;text-align:left}
@media(max-width:600px){.app-shell .dp-page .dp-set>button.dp-set-name{flex-wrap:wrap}.app-shell .dp-page .dp-set-products{max-width:100%}.app-shell .dp-page .dp-set-product{width:72px}.app-shell .dp-page .dp-set-product-image{width:72px;height:64px}}
.ew-builder{--ew-accent:#176b58;--ew-border:#e1e4e1;--ui-text:#25312c;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#25312c;background:#f1f3f1;max-width:1800px;margin:auto;padding:20px;min-width:0}.ew-builder *{box-sizing:border-box}.ew-builder button,.ew-builder input,.ew-builder select,.ew-builder textarea{font:inherit}.ew-builder button,.ew-actions a{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 13px;border:1px solid #d7ddd8;border-radius:7px;background:#fff;color:#283a30;font-size:12px;font-weight:550;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}.ew-builder button:hover{background:#f0f4ef;border-color:#9daea1}.ew-builder button:disabled{opacity:.45;cursor:default}.ew-builder button:focus-visible,.ew-builder a:focus-visible,.ew-builder input:focus-visible,.ew-builder select:focus-visible,.ew-builder textarea:focus-visible{outline:2px solid #176b58;outline-offset:3px}.ew-builder a{color:#176b58}.ew-builder button[aria-pressed=true]{background:#e7f0e9;border-color:#7da58a;color:#16452c}.ew-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 0 16px;border-bottom:1px solid var(--ew-border)}.ew-header>div:first-child>a{font-size:11px;text-decoration:none;color:#68776d}.ew-header h1{font-size:21px!important;letter-spacing:-.5px;margin:6px 0!important;line-height:1.2}.ew-header p{font-size:12px;color:#727d74;margin:4px 0}.ew-eyebrow{font-size:9px!important;font-weight:650;letter-spacing:.16em;margin-top:10px!important}.ew-eyebrow span{display:inline-block;letter-spacing:0;background:#e5e8e4;border-radius:4px;padding:3px 6px;margin-left:8px;color:#59665b}.ew-actions,.ew-toolbar,.ew-view-tabs{display:flex;align-items:center;gap:8px}.ew-actions{flex-wrap:wrap}.ew-actions>button:not(.ew-focus-toggle){background:#176b58;color:#fff;border-color:#176b58}.ew-actions>span{font-size:11px;color:#79847b}.ew-safety{font-size:11px;color:#6e786f;margin:12px 0}.ew-toolbar{justify-content:space-between;gap:12px;padding:0 0 14px}.ew-view-tabs{background:#e6e9e5;border-radius:8px;padding:3px}.ew-view-tabs button{border:0;background:transparent;padding:7px 12px}.ew-view-tabs button[aria-pressed=true]{background:white;box-shadow:0 1px 3px #18271b15;color:#29392e}.ew-store-stats{font-size:11px;color:#728074}.ew-workspace{display:grid;grid-template-columns:210px minmax(0,1fr) 250px;gap:14px;align-items:start;min-height:0}.ew-palette,.ew-inspector{background:#fff;border:1px solid var(--ew-border);border-radius:10px;padding:16px;min-width:0}.ew-palette h2,.ew-inspector h2{font-size:11px!important;text-transform:uppercase;letter-spacing:.08em;color:#718075!important;margin:5px 0 12px}.ew-palette button{display:flex;justify-content:flex-start;text-align:left;width:100%;border-color:transparent;background:transparent;margin-bottom:5px;font-weight:450;line-height:1.5}.ew-palette button span{display:grid;place-items:center;background:#f0f3ee;border:1px solid #e5e9e2;border-radius:5px;width:26px;height:26px;flex:none;color:#4b6351;font-size:15px}.ew-palette button[aria-pressed=true]{border-color:#cee1d1;background:#edf4ed}.ew-palette h2:not(:first-child){border-top:1px solid #edf0eb;padding-top:20px;margin-top:17px}.ew-palette a{display:block;font-size:11px;margin-top:22px;line-height:1.5}.ew-canvas{min-width:0;background:#e4e8e4;padding:16px;border:1px solid #dce1db;border-radius:10px;overflow:auto}.ew-canvas-label{font-size:9px;font-weight:600;letter-spacing:.14em;color:#7a887d;margin:0 0 14px;display:flex;align-items:center;gap:7px}.ew-canvas-label:before{content:'';width:6px;height:6px;border-radius:50%;background:#729778}.ew-device{min-width:0;width:100%;margin:auto;container-type:inline-size;background:#fff;box-shadow:0 8px 40px #1b301318;overflow:hidden}.ew-phone{max-width:390px}.ew-inspector label{display:grid;gap:6px;font-size:11px;color:#586b5b;margin:12px 0}.ew-inspector input,.ew-inspector textarea,.ew-inspector select{width:100%;min-width:0;border:1px solid #dce2da;background:#fbfcfa;border-radius:6px;padding:9px 10px;color:#2f4033;font-size:12px}.ew-inspector textarea{min-height:90px;resize:vertical}.ew-inspector input[type=color]{height:38px;padding:4px;cursor:pointer}.ew-inspector fieldset{border:0;padding:18px 0 0;margin-top:18px;border-top:1px solid #e7ebe4}.ew-inspector legend{font-size:11px;font-weight:650;color:#445848}.ew-inspector h2:not(:first-child){margin-top:22px}.ew-section-row{display:flex;gap:3px;margin-bottom:5px}.ew-section-row>button:first-child{flex:1;min-width:0;text-align:left;justify-content:flex-start;overflow-wrap:anywhere;font-weight:450}.ew-section-row>button{font-size:11px;padding:7px;min-height:32px}.ew-error,.ew-form-error{border:1px solid #efcdc5;border-radius:8px;background:#fff3ef;padding:13px;color:#8d3b28}.ew-error button{margin-left:12px}.ew-builder>p[role=status]{font-size:12px;color:#365f41}.ew-focus{position:fixed;inset:0;z-index:200;max-width:none;padding:16px 22px;display:flex;flex-direction:column;overflow:auto}.ew-focus .ew-header{flex:none}.ew-focus .ew-header>div:first-child>p:last-child{display:none}.ew-focus .ew-header h1{font-size:18px!important}.ew-focus .ew-eyebrow{display:none}.ew-focus .ew-workspace{flex:1;overflow:hidden;align-items:stretch}.ew-focus .ew-canvas,.ew-focus .ew-palette,.ew-focus .ew-inspector{overflow:auto;scrollbar-width:thin}.ew-focus .ew-toolbar{flex:none}.ew-focus .ew-safety{margin:8px 0}.ew-preview-only{max-width:1440px;margin:auto}.ew-preview-mode .ew-store-stats{margin-left:auto}.ew-preview-mode .ew-canvas{padding:20px}.ew-empty{text-align:center;padding:65px 24px;color:#6d796e}.ew-empty>span{font-size:42px;color:#78977c}.ew-empty h2,.ew-empty h3{color:#354637}.ew-empty p{font-size:13px;line-height:1.7}
/* Storefront: self-contained typography, surfaces and controls. */
.ew-store{--sf-ink:#20382d;--ui-text:#20382d;--sf-muted:#718075;--sf-line:#e4e9e1;--sf-accent:#245c46;color:var(--sf-ink);background:#fff;font-size:14px;line-height:1.6;min-width:0}.ew-builder .ew-store :is(h1,h2,h3,h4){color:var(--sf-ink)!important;font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.035em;line-height:1.13;margin:0}.ew-builder .ew-store button{font-family:inherit;font-size:12px}.ew-store input,.ew-store select,.ew-store textarea{font:inherit;max-width:100%;min-width:0}.ew-announcement{background:#203f31;color:#f7faf5;text-align:center;padding:8px 16px;font-size:10px;letter-spacing:.08em}.ew-store-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 5%;border-bottom:1px solid var(--sf-line)}.ew-builder .ew-store .ew-wordmark{display:block;padding:0;border:0;background:none;text-align:left;font-family:Georgia,serif;font-size:22px;line-height:1.1;letter-spacing:-.6px;color:var(--sf-ink)}.ew-wordmark span{display:block;font:7px/1.5 ui-sans-serif,system-ui,sans-serif;letter-spacing:.18em;margin-top:6px;color:#7b897e}.ew-store-header nav{display:flex;gap:14px}.ew-store-header nav button{border:0;padding:4px;background:none;font-size:11px!important}.ew-store-mark{font-size:27px;color:#6a896e}.ew-kicker{display:block;font-size:9px;font-weight:600;letter-spacing:.16em;color:#76836b;line-height:1.6}.ew-hero{display:grid;grid-template-columns:1.1fr 1fr;background:#f2f1e9;min-height:380px;overflow:hidden}.ew-hero-copy{padding:58px 10% 45px;align-self:center}.ew-builder .ew-store .ew-hero h1{font-size:clamp(30px,5cqw,62px)!important;margin:17px 0;max-width:580px}.ew-hero p{font-size:13px;line-height:1.8;color:#66745e;max-width:360px;margin:0 0 24px;white-space:pre-wrap}.ew-builder .ew-store .ew-primary{background:var(--sf-accent);color:#fff;border:1px solid var(--sf-accent);border-radius:3px;padding:13px 19px;justify-content:space-between;font-weight:500;min-height:44px}.ew-builder .ew-store .ew-primary:hover{background:#163e2d;border-color:#163e2d}.ew-hero-note{display:flex;gap:9px;align-items:center;margin-top:32px;color:#7d876e;font-size:10px}.ew-hero-note>span{font-size:21px}.ew-hero-art{position:relative;display:flex;align-items:center;justify-content:center;padding:35px;background:#dce3d4;background-image:radial-gradient(ellipse at 70% 20%,#f2f0dc,transparent 70%);overflow:hidden}.ew-hero-photo{width:85%;max-height:350px;object-fit:contain;transform:rotate(-7deg);filter:drop-shadow(10px 20px 15px #24331c25);background:white;padding:9px}.ew-hero-stamp{position:absolute;bottom:24px;right:17px;display:grid;place-content:center;border:1px solid #637959;border-radius:50%;width:82px;height:82px;text-align:center;font:9px/1.5 ui-sans-serif,system-ui;letter-spacing:.14em;color:#506244;background:#e9ecdf;transform:rotate(10deg)}.ew-search-section{padding:32px 5% 0}.ew-search-section>label{display:flex;align-items:center;justify-content:space-between;gap:20px}.ew-search-section>label>span{font:20px/1.2 Georgia,serif;max-width:220px;color:var(--sf-ink)}.ew-search-section label>div{display:flex;align-items:center;gap:8px;flex:1;max-width:330px;border-bottom:1px solid #aebcad;padding:7px 0}.ew-search-section input{border:0;background:transparent;padding:5px;width:100%;font-size:11px;color:var(--sf-ink)}.ew-search-section label>div>span{font-size:22px}.ew-collection-chips{display:flex;flex-wrap:wrap;gap:7px;padding-top:20px}.ew-builder .ew-store .ew-collection-chips button{padding:6px 12px;border-radius:20px;font-size:10px;border-color:#e4e8de;background:#fff;font-weight:400}.ew-builder .ew-store .ew-collection-chips button[aria-pressed=true]{background:#eaf0e5;border-color:#acbea8;color:#355539}.ew-catalogue,.ew-configure-section,.ew-featured,.ew-collections{padding:38px 5%}.ew-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:22px}.ew-builder .ew-store .ew-section-heading h2{font-size:29px;margin-top:7px}.ew-section-heading>span{font-size:10px;color:#8a9587}.ew-product-grid{display:grid;grid-template-columns:repeat(var(--ew-columns,3),minmax(0,1fr));gap:24px 16px}.ew-builder .ew-store .ew-product-card{display:block;text-align:left;padding:0;background:none;border:0;border-radius:0;min-width:0;color:var(--sf-ink)}.ew-product-card:hover .ew-card-image{background:#e5eadf}.ew-card-image{position:relative;aspect-ratio:1/1.08;background:#f3f4ee;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden;transition:background .2s}.ew-photo{width:100%;height:100%;object-fit:contain;display:block}.ew-card-image img{transition:transform .25s}.ew-product-card:hover img{transform:scale(1.04)}.ew-card-arrow{position:absolute;right:10px;bottom:10px;width:26px;height:26px;border-radius:50%;background:white;display:grid;place-items:center;font-size:17px;color:#44563f}.ew-card-copy{padding:13px 0 3px}.ew-card-copy>span{text-transform:uppercase;letter-spacing:.1em;font-size:8px;color:#819079}.ew-builder .ew-store .ew-card-copy h3{font-family:inherit;font-size:12px;font-weight:500;line-height:1.5;letter-spacing:0;margin:5px 0}.ew-card-copy p{font-size:10px;color:#7c8a72;margin:0}.ew-breadcrumb{display:flex;gap:10px;align-items:center;padding:22px 5%;font-size:10px;color:#85927f}.ew-breadcrumb>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ew-builder .ew-store .ew-breadcrumb button{background:none;border:0;padding:0;color:#687d61;font-size:10px;white-space:nowrap}.ew-product-page{padding:10px 5% 40px}.ew-product-layout{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}.ew-gallery{position:sticky;top:0;min-width:0}.ew-gallery-main{aspect-ratio:1/1.12;display:flex;align-items:center;justify-content:center;background:#f2f4ee;padding:22px}.ew-thumbnails{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.ew-builder .ew-store .ew-thumbnails button{width:55px;height:62px;padding:5px;border-radius:0;background:#f5f6f0;border-color:transparent}.ew-builder .ew-store .ew-thumbnails button[aria-pressed=true]{border-color:#557452}.ew-thumb{width:100%;height:100%;object-fit:contain}.ew-builder .ew-store .ew-product-info>h2{font-size:32px;margin:10px 0 15px}.ew-product-intro{font-size:12px;color:#74816f;line-height:1.85;margin:0 0 14px}.ew-product-meta{display:flex;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--sf-line);padding-bottom:20px;font-size:9px;color:#84907b}.ew-product-meta span:first-child{color:#496b45}.ew-product-picker{display:flex;align-items:center;gap:15px;border-bottom:1px solid var(--sf-line);padding-bottom:19px;margin-bottom:26px;font-size:11px;color:#687c61}.ew-product-picker select{flex:1;max-width:400px;border:1px solid #dce3d5;padding:10px;border-radius:4px;background:#fff;color:var(--sf-ink);font-size:12px}.ew-configure-section{border-top:1px solid var(--sf-line);background:#fafbf7}.ew-calc-heading{margin:24px 0 22px}.ew-builder .ew-store .ew-calc-heading h3{font-size:24px;margin:6px 0}.ew-calc-heading p{font-size:11px;color:#88937f;margin:0}.ew-calculator{min-width:0}.ew-calculator .dp-inputs{display:grid;gap:19px}.ew-calculator .dp-field{min-width:0}.ew-calculator .dp-field>label{display:block;font-size:11px;font-weight:550;color:#3e5739;margin:0 0 8px;line-height:1.5}.ew-calculator [role=radiogroup]{display:flex;flex-wrap:wrap;gap:6px}.ew-calculator label.dp-check{display:flex;align-items:center;justify-content:flex-start;gap:7px;flex:0 1 auto;margin:0;padding:9px 10px;border:1px solid #dee5d8;border-radius:4px;background:#fff;font-size:10px;font-weight:400;color:#64765b;line-height:1.4;cursor:pointer;min-height:38px}.ew-calculator label.dp-check:has(input:checked){border-color:#64875b;background:#edf3e7;color:#345329}.ew-calculator label.dp-check:focus-within{outline:2px solid #64875b;outline-offset:2px}.ew-calculator .dp-check input[type=radio],.ew-calculator .dp-check input[type=checkbox]{display:inline-block;flex:0 0 13px;width:13px;height:13px;min-height:0;margin:0;padding:0;accent-color:#54764c}.ew-calculator .dp-field>input:not([type=checkbox]):not([type=radio]),.ew-calculator .dp-field>select,.ew-calculator .dp-field>textarea{display:block;width:100%;padding:10px 11px;margin:0;min-height:40px;border:1px solid #dce3d5;border-radius:4px;background:white;color:var(--sf-ink);font-size:12px}.ew-calculator .dp-field>textarea{min-height:72px}.ew-calculator .dp-field>input[type=checkbox]{width:17px;height:17px;margin:0;accent-color:#54764c}.ew-calculator .dp-swatches{display:flex;gap:6px;flex-wrap:wrap}.ew-calculator .dp-swatches img{width:42px;height:42px;object-fit:contain}.ew-quote-panel{display:grid;gap:14px;background:#edf1e7;border:1px solid #e1e7d7;padding:18px;margin-top:24px;border-radius:5px}.ew-quote-panel>div>span{display:block;font-size:10px;color:#7b876d}.ew-quote-panel strong{display:block;font-family:Georgia,serif;font-size:22px;font-weight:400;color:#25462c;margin-top:4px}.ew-quote-panel .ew-primary{width:100%;justify-content:center!important}.ew-quote-panel small{font-size:9px;text-align:center;color:#8a947e}.ew-quote-panel summary{font-size:10px;cursor:pointer}.ew-quote-panel details p{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#728064}.ew-description{border-top:1px solid var(--sf-line);margin-top:24px;padding-top:16px;font-size:11px;color:#7a8871}.ew-description summary{cursor:pointer;font-weight:500;color:#405a37}.ew-description p{white-space:pre-line;line-height:1.9}.ew-unavailable{padding:20px;background:#f2f4ed;margin-top:24px;color:#7b876f;font-size:11px}.ew-unavailable>span{font-family:Georgia,serif;font-size:23px;color:#425b39}.ew-copy{text-align:center;max-width:650px;padding:50px 5%;margin:auto}.ew-builder .ew-store .ew-copy h2{font-size:32px;margin:15px 0}.ew-copy p{font-size:13px;line-height:1.9;color:#7a876f;white-space:pre-wrap}.ew-values{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--sf-line);border-bottom:1px solid var(--sf-line);gap:20px;padding:26px 5%}.ew-values>div{display:flex;gap:10px;align-items:center}.ew-values b{font:italic 20px Georgia,serif;color:#9aa88b}.ew-values span{font-size:10px;font-weight:500}.ew-values small{display:block;font-size:9px;color:#91a084;margin-top:3px;font-weight:400}.ew-store-footer{background:#f2f3ed;padding:35px 5% 22px;display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}.ew-store-footer strong{font:23px Georgia,serif}.ew-store-footer p{font-size:10px;color:#8a987d}.ew-builder .ew-store .ew-store-footer button{border:0;border-bottom:1px solid #b3bfa7;padding:5px 0;background:transparent;border-radius:0;font-size:10px}.ew-store-footer>small{width:100%;border-top:1px solid #dce2d5;padding-top:17px;margin-top:12px;font-size:9px;color:#9aa68e}
@container(max-width:700px){.ew-store-header{padding:19px 5%}.ew-wordmark{font-size:19px!important}.ew-store-header nav{gap:8px}.ew-store-header nav button{font-size:10px!important}.ew-store-mark{display:none}.ew-hero{min-height:300px}.ew-hero-copy{padding:35px 10%}.ew-hero p{font-size:11px}.ew-hero-art{padding:20px}.ew-hero-photo{width:95%;padding:5px}.ew-hero-stamp{width:60px;height:60px;font-size:7px;bottom:15px;right:10px}.ew-product-layout{gap:22px}.ew-builder .ew-store .ew-product-info>h2{font-size:26px}.ew-product-intro{font-size:11px}.ew-product-meta{padding-bottom:15px}.ew-gallery-main{padding:12px}.ew-calculator label.dp-check{font-size:9px;padding:8px}.ew-catalogue,.ew-configure-section,.ew-featured{padding:28px 5%}.ew-product-grid{gap:20px 12px}.ew-card-image{padding:12px}.ew-builder .ew-store .ew-card-copy h3{font-size:11px}.ew-values{gap:12px}.ew-values small{font-size:8px}}
@container(max-width:500px){.ew-store-header nav button:last-child{display:none}.ew-hero{grid-template-columns:1fr}.ew-hero-copy{padding:34px 7%}.ew-builder .ew-store .ew-hero h1{font-size:39px!important;max-width:300px}.ew-hero p{font-size:12px}.ew-hero-art{min-height:220px;max-height:260px;padding:25px}.ew-hero-photo{max-height:220px;width:65%}.ew-hero-note{margin-top:20px}.ew-search-section>label{align-items:stretch;flex-direction:column;gap:12px}.ew-search-section label>div{max-width:none}.ew-search-section>label>span{font-size:23px;max-width:none}.ew-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ew-product-layout{grid-template-columns:1fr;gap:23px}.ew-gallery{position:static}.ew-gallery-main{aspect-ratio:1.1/1;max-height:350px;padding:23px}.ew-builder .ew-store .ew-product-info>h2{font-size:30px}.ew-product-intro{font-size:12px}.ew-calculator label.dp-check{font-size:11px;padding:10px;min-height:42px;flex:1 1 125px}.ew-section-heading>span{display:none}.ew-builder .ew-store .ew-section-heading h2{font-size:27px}.ew-values{grid-template-columns:1fr;gap:18px}.ew-values span{font-size:11px}.ew-values small{font-size:10px}.ew-product-picker{display:grid;gap:8px}.ew-product-picker select{width:100%;max-width:none}.ew-store-footer{align-items:start;flex-direction:column}.ew-collection-chips{gap:5px}.ew-store-footer>small{font-size:8px}}
@media(max-width:1200px){.ew-workspace{grid-template-columns:170px minmax(0,1fr) 220px;gap:10px}.ew-palette,.ew-inspector{padding:12px}.ew-canvas{padding:10px}.ew-focus{padding:12px}.ew-store-stats{display:none}}
@media(max-width:1100px){.ew-workspace{grid-template-columns:155px minmax(0,1fr)}.ew-inspector{grid-column:1/-1}.ew-focus .ew-workspace{overflow:auto;align-items:start}.ew-focus .ew-canvas{max-height:75vh}.ew-header{align-items:start}.ew-header h1{font-size:19px!important}.ew-actions{justify-content:flex-end}.ew-focus-toggle{font-size:10px!important}.ew-preview-mode .ew-canvas{padding:8px}}
@media(max-width:600px){.ew-builder,.ew-focus{padding:10px}.ew-header{flex-direction:column;gap:12px}.ew-header .ew-actions{width:100%;justify-content:flex-start}.ew-focus .ew-header>div:first-child>a{font-size:10px}.ew-toolbar{flex-wrap:wrap;margin:5px 0}.ew-workspace{display:flex;flex-direction:column}.ew-palette,.ew-canvas,.ew-inspector{width:100%}.ew-palette{display:flex;flex-wrap:wrap;gap:4px}.ew-palette h2,.ew-palette a{width:100%;margin:5px 0!important;padding-top:0!important;border:0!important}.ew-palette button{width:auto;flex:1 1 130px;margin:0;padding:5px;font-size:11px}.ew-palette button span{width:20px;height:20px}.ew-focus .ew-workspace{overflow:auto;flex:none}.ew-focus .ew-canvas{overflow:auto;max-height:none}.ew-canvas{padding:7px}.ew-safety{font-size:10px;line-height:1.5}.ew-header h1{font-size:20px!important}.ew-preview-only .ew-canvas{padding:0}.ew-device{box-shadow:none}.ew-actions a,.ew-actions button{font-size:11px}.ew-toolbar .ew-actions{margin-left:auto}.ew-view-tabs button{font-size:10px;padding:7px 8px}}
/* The focused studio is mounted outside the application shell. */
.ew-builder.ew-focus{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;background:#f1f3f1!important;z-index:2147483000!important;isolation:isolate}
.ew-builder .ew-store :is(h1,h2,h3,h4){font-family:Georgia,'Times New Roman',serif!important;font-weight:400!important}
.ew-builder .ew-store .ew-card-copy h3{font-family:inherit!important;font-weight:500!important}
.ew-builder .ew-store .ew-wordmark{font-family:Georgia,'Times New Roman',serif!important}
.ew-focus .ew-preview-only{width:100%;min-width:0;max-width:1440px;margin:0 auto;flex:none}
.ew-builder.ew-focus{box-sizing:border-box!important}
.ew-toolbar .ew-actions>button{background:#fff;color:#657267;border:1px solid #d7ddd8}
.ew-toolbar .ew-actions>button[aria-pressed=true]{background:#e1ece3;color:#245237;border-color:#8bae94}
.ew-public-store{padding:0!important;max-width:none!important;background:#fff!important;min-height:100vh;margin:0!important}
.ew-public-store .ew-store{max-width:1600px;margin:auto}
.ew-public-store .ew-product-card{text-decoration:none;cursor:pointer}
.ew-public-message{padding:80px 24px;text-align:center;color:#20382d;font-family:system-ui,sans-serif}
.ew-public-store .ew-checkout{max-width:1280px;margin:0 auto;padding:40px clamp(20px,5vw,64px);scroll-margin-top:20px}
.ew-public-store .sites-store-cart{position:static;background:#f3f5ef;color:#193e2e;border:1px solid #dce3d7;border-radius:12px;padding:clamp(20px,4vw,40px);box-shadow:none;max-width:none;width:auto}
.ew-public-store .sites-store-cart>p:first-child{font-size:24px;font-weight:600}
.ew-public-store .sites-store-cart ul{list-style:none;padding:0;display:grid;gap:16px}
.ew-public-store .sites-store-cart li{padding:20px 0;border-bottom:1px solid #dce3d7;overflow-wrap:anywhere}
.ew-public-store .sites-store-cart label{display:grid;gap:8px;margin-top:12px;font-size:14px}
.ew-public-store .sites-store-cart input,.ew-order-quantity input{box-sizing:border-box;width:100%;min-height:44px;background:white;border:1px solid #c9d3c6;border-radius:6px;padding:10px 12px;color:#173c2b}
.ew-public-store .sites-store-cart button{min-height:44px;padding:10px 20px;border-radius:6px;border:1px solid #c9d3c6;background:#fff;color:#173c2b;margin:8px 0}
.ew-public-store .sites-store-cart button[type=submit]{background:#173c2b;color:#fff;width:100%}
.ew-public-store .sites-store-cart button:disabled{opacity:.5;cursor:wait}
.ew-public-store .sites-store-cart form{max-width:640px}
.ew-order-quantity{display:grid;gap:8px;margin:16px 0}
.ew-quote-panel>button+button{margin-top:10px}
.ew-product-layout+.ew-description{min-width:0;width:100%;box-sizing:border-box}
/* Editorial storefront, scoped to the dedicated commerce renderer. */
.ew-store{--sf-muted:#53664b;--sf-line:#dfe5d9;background:#fffefa}.ew-announcement{font-size:12px;padding:10px 20px}.ew-store-header{padding:26px 6%;gap:20px}.ew-builder .ew-store .ew-wordmark{font-size:clamp(23px,2.6cqw,34px)}.ew-wordmark span{font-size:9px;color:#536551;letter-spacing:.2em;margin-top:9px}.ew-store-header nav button{font-size:13px!important;min-height:44px}
.ew-hero{grid-template-columns:1.05fr 1fr;min-height:550px;background:#f4f0e7}.ew-hero-copy{padding:64px 11%}.ew-builder .ew-store .ew-hero h1{font-size:clamp(40px,5.3cqw,76px)!important;line-height:1.04;letter-spacing:-.055em;margin:22px 0}.ew-hero p{font-size:16px;color:#52614c;line-height:1.8;max-width:430px}.ew-builder .ew-store .ew-primary{border-radius:7px;min-height:48px;font-size:14px;padding:14px 22px}.ew-hero-note{font-size:11px;color:#52634d;line-height:1.6}.ew-hero-art{background:#e2e8db;background-image:radial-gradient(ellipse at 80% 10%,#fcf4dc,transparent 65%);padding:65px 45px 100px}.ew-hero-photo{width:86%;max-height:380px;transform:rotate(-8deg);padding:12px;border-radius:5px;box-shadow:0 25px 60px #233b2420}.ew-hero-secondary{position:absolute;width:30%;height:35%;bottom:50px;right:7%;padding:12px;background:#fffaf0;box-shadow:0 18px 35px #233b2425;transform:rotate(10deg);border-radius:4px}.ew-hero-caption{position:absolute;left:7%;bottom:24px;font-size:12px;color:#344c32;max-width:55%}.ew-hero-caption span{display:block;font-size:10px;color:#586c50;margin-top:3px}.ew-hero-stamp{bottom:auto;top:24px;right:20px;background:#f4d5ac;border-color:#a97c4e;color:#62492e;width:85px;height:85px}
.ew-kicker{font-size:10px;color:#536a4d;letter-spacing:.17em}.ew-search-section{padding:48px 6% 0;scroll-margin-top:20px;display:flex;flex-wrap:wrap;gap:18px;align-items:end}.ew-search-section>label:first-child{flex:1 1 580px}.ew-search-section>label>span{font-size:26px;max-width:280px}.ew-search-section label>div{max-width:400px;padding:9px 0}.ew-search-section input{font-size:14px;min-height:44px}.ew-search-section .ew-sort{display:grid;gap:6px;font-size:12px;color:#40563c}.ew-sort select{padding:12px;border:1px solid #cbd7c3;border-radius:6px;background:#fffefa;color:#233f2c;min-height:44px}.ew-search-section .ew-collection-chips{width:100%;padding-top:0}.ew-builder .ew-store .ew-collection-chips button{font-size:12px;min-height:44px;padding:10px 16px}
.ew-catalogue,.ew-configure-section,.ew-featured{padding:46px 6%}.ew-builder .ew-store .ew-section-heading h2{font-size:clamp(30px,3.3cqw,44px)}.ew-section-heading>span{font-size:12px;color:#53684e}.ew-product-grid{gap:36px 24px}.ew-card-image{aspect-ratio:1.06;background:#f0f0e8;border-radius:12px;padding:25px}.ew-card-copy{padding:18px 2px 0}.ew-card-copy>span{font-size:10px;color:#5c7054}.ew-builder .ew-store .ew-card-copy h3{font-size:17px;line-height:1.4;margin:8px 0 10px}.ew-card-price{font-size:13px;color:#4e6445}.ew-card-price .ec-minimum-price{display:grid;gap:3px}.ew-card-price .ec-minimum-price strong{font-size:17px;color:#203e2a}.ew-card-price .ec-minimum-price small{font-size:11px;line-height:1.6;color:#52664a}.ew-card-arrow{width:36px;height:36px;right:14px;bottom:14px}.ew-breadcrumb{font-size:12px}.ew-builder .ew-store .ew-breadcrumb button{font-size:12px;min-height:44px}
.ew-product-layout{gap:clamp(24px,5cqw,70px)}.ew-gallery-main{border-radius:14px;background:#f2f2e9}.ew-builder .ew-store .ew-product-info>h2{font-size:clamp(32px,3.4cqw,48px)}.ew-product-intro{font-size:14px;color:#52674a}.ew-product-meta{font-size:11px;color:#53674c}.ew-product-info>.ec-minimum-price{display:grid;gap:4px;margin-top:20px}.ew-product-info>.ec-minimum-price strong{font-size:28px}.ew-product-info>.ec-minimum-price small,.ew-product-info>.ec-minimum-note{font-size:12px;color:#52674a}.ew-calculator .dp-field>label{font-size:13px}.ew-calculator label.dp-check{font-size:12px;min-height:44px}.ew-calculator .dp-field>input:not([type=checkbox]):not([type=radio]),.ew-calculator .dp-field>select{min-height:46px;font-size:14px}.ew-calc-heading p,.ew-product-picker{font-size:13px;color:#53664b}.ew-quote-panel{border-radius:10px;padding:22px}.ew-quote-panel>div>span,.ew-quote-panel summary,.ew-quote-panel details p{font-size:12px}.ew-quote-panel small{font-size:11px;color:#53664b}.ew-quote-panel strong{font-size:30px}.ew-description{font-size:14px;color:#53664b}
.ew-process,.ew-faq{padding:64px 6%;border-top:1px solid var(--sf-line)}.ew-builder .ew-store :is(.ew-process,.ew-faq) h2{font-size:clamp(30px,3.5cqw,44px);margin:14px 0 24px;max-width:450px}.ew-process ol{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.ew-process li{padding-top:22px;border-top:1px solid #ced9c7}.ew-process li>svg{display:block;margin-bottom:18px}.ew-process b{font-size:16px;font-weight:550}.ew-process p{font-size:14px;line-height:1.8;color:#53664b;margin-bottom:0;max-width:300px}.ew-faq{display:grid;grid-template-columns:1fr 1.15fr;gap:50px;background:#f5f3ec}.ew-faq details{padding:21px 0;border-bottom:1px solid #d5ddce}.ew-faq summary{cursor:pointer;font-size:15px;font-weight:550;min-height:24px}.ew-faq p{font-size:14px;line-height:1.85;color:#52674a}.ew-values{padding:30px 6%}.ew-values span{font-size:13px}.ew-values small{font-size:11px;color:#52674a}.ew-store-footer{padding:48px 6% 28px;background:#203f31;color:#faf7ed}.ew-store-footer strong{font-size:30px}.ew-store-footer p,.ew-store-footer>small{font-size:12px;color:#d9e4d2}.ew-builder .ew-store .ew-store-footer button{font-size:13px;color:#faf7ed;min-height:44px}.ew-store-footer>small{border-color:#5c735b}.ew-public-message button{min-height:44px;padding:12px 24px;background:#245c46;color:white;border:0;border-radius:6px;cursor:pointer}
@container(max-width:700px){.ew-store-header{flex-wrap:wrap;padding:22px 6%}.ew-hero-copy{padding:40px 9%}.ew-hero{min-height:380px}.ew-hero p{font-size:14px}.ew-hero-art{padding:45px 25px 90px}.ew-product-grid{gap:26px 14px}.ew-builder .ew-store .ew-card-copy h3{font-size:15px}.ew-process,.ew-faq{padding:42px 6%}.ew-faq{grid-template-columns:1fr;gap:12px}.ew-process ol{gap:20px}.ew-process p{font-size:13px}}
@container(max-width:500px){.ew-hero{grid-template-columns:1fr}.ew-hero-copy{padding:38px 7%}.ew-builder .ew-store .ew-hero h1{font-size:46px!important;max-width:none}.ew-hero-art{min-height:300px;max-height:340px;padding:35px 25px 75px}.ew-hero-photo{width:65%;max-height:230px}.ew-hero-secondary{width:25%;right:8%;bottom:35px}.ew-hero-stamp{width:68px;height:68px;top:18px;font-size:8px}.ew-search-section{padding-top:30px}.ew-search-section>label:first-child{flex-basis:100%}.ew-search-section .ew-sort{width:100%}.ew-search-section>label>span{max-width:none}.ew-product-grid{gap:26px 12px}.ew-card-image{padding:12px;border-radius:8px}.ew-builder .ew-store .ew-card-copy h3{font-size:14px}.ew-card-price .ec-minimum-price strong{font-size:15px}.ew-card-price .ec-minimum-price small{font-size:10px}.ew-process ol{grid-template-columns:1fr;gap:20px}.ew-process li{display:grid;grid-template-columns:32px 1fr;column-gap:10px}.ew-process li>svg{grid-row:1/3}.ew-process p{margin:6px 0;max-width:none}.ew-product-layout{grid-template-columns:1fr}.ew-values span{font-size:13px}.ew-store-header nav{order:3;width:100%;justify-content:space-between}.ew-store-header nav button:last-child{display:inline-flex}.ew-builder .ew-store .ew-wordmark{font-size:24px}.ew-card-arrow{width:28px;height:28px}.ew-store-footer strong{font-size:27px}}
@media(prefers-reduced-motion:reduce){.ew-store *{scroll-behavior:auto!important;transition:none!important;animation:none!important}.ew-product-card:hover img{transform:none}}
.ew-public-store{container-type:inline-size}
.ew-process li>.ec-symbol{display:flex;margin-bottom:18px}
@container(max-width:500px){.ew-process li>.ec-symbol{grid-row:1/3}}
/* Keep the search heading and sort caption aligned with their controls. */
.ew-search-section>label:first-child>.ec-symbol{display:none}
.ew-search-section>.ew-sort>.ec-label-copy{font:inherit;max-width:none}
/* Dedicated commerce templates: shared canonical products, calculators and cart. */
.ew-template-picker{border-bottom:1px solid var(--ew-border);padding-bottom:16px;margin-bottom:22px}.ew-template-picker>p{font-size:12px;line-height:1.6;color:#5d6d64}.ew-template-options{display:grid;gap:8px}.ew-builder .ew-template-option{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px;width:100%;padding:10px;text-align:left;justify-content:start;white-space:normal;min-height:86px}.ew-template-copy{min-width:0}.ew-template-copy strong{display:block;font-size:12px}.ew-template-copy small{display:block;font-size:11px;line-height:1.45;font-weight:400;color:#5e6f64;margin-top:4px}.ew-template-selected{position:absolute;right:5px;top:2px;color:#176b58}.ew-template-sample{display:block;width:62px;height:60px;padding:6px;background:#fff9ed;border:1px solid #d9d8d2;border-radius:5px}.ew-template-sample>i{display:block;height:22px;background:linear-gradient(110deg,#d4dcca 55%,#a0b4a2 55%);border-radius:2px}.ew-template-sample>span{display:flex;gap:3px;margin-top:5px}.ew-template-sample b{display:block;flex:1;height:17px;background:#dfdfce;border-radius:2px}.ew-template-sample[data-template=print-studio]>i{background:linear-gradient(110deg,#fdcd4b 55%,#5146bc 55%)}.ew-template-sample[data-template=print-studio] b{background:#d3cef1}.ew-template-sample[data-template=premium-boutique]{background:#f5eee9}.ew-template-sample[data-template=premium-boutique]>i{background:linear-gradient(70deg,#b59e92 48%,#e2d5cb 48%)}.ew-template-sample[data-template=premium-boutique] b{background:#cbb8a8}.ew-template-sample[data-template=wholesale-catalogue]>i{height:14px;background:#175477}.ew-template-sample[data-template=wholesale-catalogue]>span{display:grid;gap:3px}.ew-template-sample[data-template=wholesale-catalogue] b{height:6px;background:#b9cfdc}.ew-template-sample[data-template=product-configurator]>i{background:linear-gradient(90deg,#b7dcd4 48%,#17675e 48%)}.ew-template-sample[data-template=creative-marketplace]{background:#fce8f2}.ew-template-sample[data-template=creative-marketplace]>i{background:linear-gradient(30deg,#ea9c48 50%,#ab4083 50%);border-radius:8px}.ew-template-sample[data-template=creative-marketplace] b:nth-child(1){background:#edd077}.ew-template-sample[data-template=creative-marketplace] b:nth-child(2){background:#c1b6e3}.ew-template-sample[data-template=minimal-commerce]{background:#fff}.ew-template-sample[data-template=minimal-commerce]>i{background:#ededeb;height:17px}.ew-template-sample[data-template=minimal-commerce] b{background:#e3e5e3;height:22px}
.ew-store[data-template]:not([data-template=editorial]) .ew-primary{background:var(--sf-accent);border-color:var(--sf-accent);color:white}.ew-store[data-template]:not([data-template=editorial]) .ew-primary:hover{filter:brightness(.93)}.ew-store[data-template]:not([data-template=editorial]) .ew-announcement{background:var(--sf-accent);color:white}.ew-store[data-template]:not([data-template=editorial]) .ew-store-footer{background:var(--sf-accent)}
/* Print Studio: warm paper, bold violet and a graphic sunshine composition. */
.ew-store[data-template=print-studio]{--sf-ink:#28234d;--sf-muted:#666178;--sf-line:#e2ddec;background:#fffcf5}.ew-store[data-template=print-studio] .ew-hero{background:#fff4d9;grid-template-columns:1.1fr 1fr;border-bottom:2px solid #322957}.ew-builder .ew-store[data-template=print-studio] :is(h1,h2,h3,h4){font-family:ui-sans-serif,system-ui,sans-serif;font-weight:750;letter-spacing:-.045em}.ew-builder .ew-store[data-template=print-studio] .ew-wordmark{font-family:ui-sans-serif,system-ui,sans-serif;font-weight:800}.ew-store[data-template=print-studio] .ew-hero-art{background:#dcd6fb;border-radius:48% 48% 0 0;margin:28px 7% 0;isolation:isolate}.ew-store[data-template=print-studio] .ew-hero-art:before{content:'';position:absolute;width:210px;height:210px;border-radius:50%;background:#ffc844;right:-25px;top:28px;z-index:-1}.ew-store[data-template=print-studio] .ew-hero-stamp{background:#4134b8;border-color:#4134b8;color:#fff}.ew-store[data-template=print-studio] .ew-card-image{background:#eee9ff;border-radius:18px}.ew-store[data-template=print-studio] .ew-product-card:nth-child(3n+2) .ew-card-image{background:#fff0c5}.ew-store[data-template=print-studio] .ew-product-card:nth-child(3n) .ew-card-image{background:#dceee8}.ew-store[data-template=print-studio] .ew-process{background:#ece7fa}.ew-store[data-template=print-studio] .ew-quote-panel{background:#f0edff;border-color:#d8d0f1}
/* Premium Boutique: reversed composition, serif type and generous photography. */
.ew-store[data-template=premium-boutique]{--sf-ink:#4d382e;--sf-muted:#75665d;--sf-line:#e6dcd4;background:#faf7f3}.ew-store[data-template=premium-boutique] .ew-hero{background:#eee6df;grid-template-columns:1fr 1fr}.ew-store[data-template=premium-boutique] .ew-hero-art{order:-1;background:#ded0c5;min-height:500px}.ew-store[data-template=premium-boutique] .ew-hero-copy{padding:60px 12%}.ew-store[data-template=premium-boutique] :is(.ew-hero-stamp,.ew-hero-secondary){display:none}.ew-store[data-template=premium-boutique] .ew-hero-photo{transform:none;width:78%;max-height:380px;box-shadow:0 16px 40px #4d382e20}.ew-store[data-template=premium-boutique] .ew-product-grid{gap:44px}.ew-store[data-template=premium-boutique] .ew-card-image{background:#ebe1d7;border-radius:0;padding:28px}.ew-store[data-template=premium-boutique] .ew-process{background:#eee6df}.ew-store[data-template=premium-boutique] .ew-store-header{padding-top:30px;padding-bottom:30px}.ew-store[data-template=premium-boutique] .ew-card-copy{text-align:center}.ew-store[data-template=premium-boutique] .ew-card-price .ec-minimum-price{align-items:center}
/* Wholesale Catalogue: compact business banner and scannable product rows. */
.ew-store[data-template=wholesale-catalogue]{--sf-ink:#173e55;--sf-muted:#4e6877;--sf-line:#d9e4eb;background:#f6f9fb}.ew-builder .ew-store[data-template=wholesale-catalogue] :is(h1,h2,h3,h4){font-family:ui-sans-serif,system-ui,sans-serif;font-weight:700;letter-spacing:-.025em}.ew-store[data-template=wholesale-catalogue] .ew-hero{background:#e2edf4;min-height:260px;grid-template-columns:1.6fr 1fr}.ew-store[data-template=wholesale-catalogue] .ew-hero-copy{padding:36px 9%}.ew-builder .ew-store[data-template=wholesale-catalogue] .ew-hero h1{font-size:clamp(30px,4cqw,48px)!important}.ew-store[data-template=wholesale-catalogue] .ew-hero-art{min-height:260px;max-height:300px;background:#d5e4ed;padding:25px}.ew-store[data-template=wholesale-catalogue] .ew-hero-photo{transform:none;max-height:200px;width:65%}.ew-store[data-template=wholesale-catalogue] :is(.ew-hero-stamp,.ew-hero-secondary,.ew-hero-caption){display:none}.ew-store[data-template=wholesale-catalogue] .ew-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.ew-builder .ew-store[data-template=wholesale-catalogue] .ew-product-card{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;background:#fff;border:1px solid #d9e4eb;border-radius:8px;padding:12px;gap:18px}.ew-store[data-template=wholesale-catalogue] .ew-card-image{padding:10px;aspect-ratio:1;background:#edf2f5}.ew-store[data-template=wholesale-catalogue] .ew-card-copy{padding:0}.ew-builder .ew-store[data-template=wholesale-catalogue] .ew-card-copy h3{font-size:18px}.ew-store[data-template=wholesale-catalogue] .ew-card-arrow{display:none}.ew-store[data-template=wholesale-catalogue] .ew-process{background:#e3edf4}
/* Product Configurator: technical clarity and paired product tiles. */
.ew-store[data-template=product-configurator]{--sf-ink:#17453f;--sf-line:#d5e6e2;background:#f6fbf9}.ew-builder .ew-store[data-template=product-configurator] :is(h1,h2,h3,h4){font-family:ui-sans-serif,system-ui,sans-serif;font-weight:650;letter-spacing:-.035em}.ew-store[data-template=product-configurator] .ew-hero{background:#e0f1ec;min-height:340px}.ew-store[data-template=product-configurator] .ew-hero-art{background:linear-gradient(90deg,#acd3c42b 1px,transparent 1px),linear-gradient(#acd3c42b 1px,transparent 1px),#d2e9e2;background-size:24px 24px;min-height:340px}.ew-store[data-template=product-configurator] .ew-hero-photo{transform:none}.ew-store[data-template=product-configurator] .ew-hero-stamp{border-radius:10px;background:#17675e;color:#fff;border:0}.ew-store[data-template=product-configurator] .ew-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ew-store[data-template=product-configurator] .ew-card-image{aspect-ratio:1.5;background:#e4eeeb}.ew-store[data-template=product-configurator] .ew-process{background:#e0f1ec}
/* Creative Marketplace: rounded tiles with an expressive, colorful window. */
.ew-store[data-template=creative-marketplace]{--sf-ink:#562743;--sf-line:#eddae5;background:#fff9fc}.ew-builder .ew-store[data-template=creative-marketplace] :is(h1,h2,h3,h4){font-family:ui-sans-serif,system-ui,sans-serif;font-weight:800;letter-spacing:-.05em}.ew-store[data-template=creative-marketplace] .ew-hero{background:#f9deec;border-radius:0 0 60px 60px}.ew-store[data-template=creative-marketplace] .ew-hero-art{background:#e4d8f7;border-radius:50% 50% 0 0;margin:30px 5% 0;transform:rotate(-2deg)}.ew-store[data-template=creative-marketplace] .ew-hero-stamp{background:#fbc854;color:#562743;border:0;transform:rotate(12deg);border-radius:24px}.ew-store[data-template=creative-marketplace] .ew-card-image{border-radius:28px;background:#efe4f8;aspect-ratio:1}.ew-store[data-template=creative-marketplace] .ew-product-card:nth-child(3n+2) .ew-card-image{background:#fae3ad}.ew-store[data-template=creative-marketplace] .ew-product-card:nth-child(3n) .ew-card-image{background:#d8eee9}.ew-store[data-template=creative-marketplace] .ew-process{background:#fae9b9;border-radius:40px;margin:25px 4%}.ew-store[data-template=creative-marketplace] .ew-quote-panel{background:#f9eaf3}
/* Minimal Commerce: restrained type with no decorative image layers. */
.ew-store[data-template=minimal-commerce]{--sf-ink:#26312f;--sf-muted:#66716e;--sf-line:#e5e8e6;background:white}.ew-builder .ew-store[data-template=minimal-commerce] :is(h1,h2,h3,h4){font-family:ui-sans-serif,system-ui,sans-serif;font-weight:500;letter-spacing:-.04em}.ew-store[data-template=minimal-commerce] .ew-hero{background:#f5f6f4;min-height:320px;grid-template-columns:1.3fr 1fr}.ew-store[data-template=minimal-commerce] .ew-hero-art{background:#ecefeb;padding:30px;min-height:320px}.ew-store[data-template=minimal-commerce] .ew-hero-photo{transform:none;max-height:270px;width:65%;box-shadow:none}.ew-store[data-template=minimal-commerce] :is(.ew-hero-stamp,.ew-hero-secondary,.ew-hero-caption,.ew-hero-note,.ew-store-mark){display:none}.ew-store[data-template=minimal-commerce] .ew-card-image{border-radius:0;background:#f2f4f1;padding:30px}.ew-store[data-template=minimal-commerce] .ew-card-arrow{border-radius:0}.ew-store[data-template=minimal-commerce] .ew-process{background:#f3f5f2}.ew-store[data-template=minimal-commerce] .ew-quote-panel{background:#f5f6f4}
/* Product Configurator uses the same authoritative quote and cart transport. */
.ew-configurator-intro{display:flex;align-items:center;gap:12px;padding:20px;background:#f0eff9;border-radius:12px;font-size:15px;line-height:1.7}.ew-builder .ew-store .ew-configurator{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;margin:32px 0;padding:0;background:transparent;border:0}.ew-configurator-steps{grid-column:1/-1;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:18px 0;margin:0;border-bottom:1px solid var(--sf-line)}.ew-configurator-steps li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--sf-muted)}.ew-configurator-steps li[aria-current=step]{font-weight:700;color:var(--sf-ink)}.ew-configurator-steps li>span{display:grid;place-items:center;width:32px;height:32px;flex:none;background:#eeebf8;color:#4134b8;border-radius:50%;font-size:11px;font-weight:700}.ew-configurator-options{min-width:0}.ew-configurator .ew-configurator-options{padding:28px;border:1px solid var(--sf-line);border-radius:16px;background:#fff}.ew-configurator .ew-quote-panel{margin:0;align-self:start;position:sticky;top:20px;min-width:0;padding:28px;border:1px solid var(--sf-line);border-radius:16px}.ew-builder .ew-store .ew-configurator .ew-quote-panel h3{font-size:24px;margin:8px 0 18px}.ew-selection-summary{margin:0 0 18px}.ew-selection-summary>div{display:flex;justify-content:space-between;gap:15px;padding:10px 0;border-bottom:1px solid var(--sf-line);font-size:14px}.ew-selection-summary dt{color:var(--sf-muted)}.ew-selection-summary dd{margin:0;text-align:right;font-weight:600;overflow-wrap:anywhere;max-width:65%}.ew-review-hint{font-size:13px;line-height:1.6;color:var(--sf-muted);margin:12px 0 24px}.ew-store[data-product-layout=configurator] .ew-product-page>.ew-product-layout{align-items:center}.ew-configurator>.ew-form-error{grid-column:1/-1}
@container(max-width:760px){.ew-store[data-template=wholesale-catalogue] .ew-product-grid{grid-template-columns:1fr}.ew-store[data-template=premium-boutique] .ew-product-grid{gap:22px}.ew-builder .ew-store .ew-configurator{grid-template-columns:1fr;gap:18px}.ew-configurator .ew-quote-panel{position:static}.ew-configurator-steps li{font-size:11px;align-items:flex-start;flex-direction:column}.ew-configurator-steps{gap:8px}.ew-configurator .ew-configurator-options,.ew-configurator .ew-quote-panel{padding:22px}}
@container(max-width:500px){.ew-store[data-template]:not([data-template=editorial]) .ew-hero{grid-template-columns:1fr}.ew-store[data-template=premium-boutique] .ew-hero-art{order:0;min-height:300px;max-height:320px}.ew-store[data-template=premium-boutique] .ew-hero-photo{max-height:245px}.ew-store[data-template=wholesale-catalogue] .ew-hero-art{display:none}.ew-store[data-template=wholesale-catalogue] .ew-hero-copy{padding:32px 7%}.ew-builder .ew-store[data-template=wholesale-catalogue] .ew-product-card{grid-template-columns:85px minmax(0,1fr);gap:12px;padding:10px}.ew-builder .ew-store[data-template=wholesale-catalogue] .ew-card-copy h3{font-size:16px}.ew-store[data-template=creative-marketplace] .ew-hero{border-radius:0 0 28px 28px}.ew-store[data-template=creative-marketplace] .ew-card-image{border-radius:14px;padding:15px}.ew-store[data-template=print-studio] .ew-hero-art{min-height:300px}.ew-configurator-intro{font-size:14px}.ew-selection-summary>div{font-size:13px}.ew-store[data-template=minimal-commerce] .ew-hero-art{min-height:270px}.ew-store[data-template=product-configurator] .ew-card-image{aspect-ratio:1}}
/* Scoped branding overrides use the shared UI utility layer. */
@layer utilities {
/* Respect each template's type and primary actions alongside shared UI controls. */
.ew-store[data-template=print-studio]{--ew-heading-weight:750}
.ew-store[data-template=wholesale-catalogue]{--ew-heading-weight:700}
.ew-store[data-template=creative-marketplace]{--ew-heading-weight:800}
.ew-store[data-template=minimal-commerce]{--ew-heading-weight:500}
.ew-builder .ew-store:is([data-template=print-studio],[data-template=wholesale-catalogue],[data-template=product-configurator],[data-template=creative-marketplace],[data-template=minimal-commerce]) :is(h1,h2,h3,h4){font-family:ui-sans-serif,system-ui,sans-serif!important;font-weight:var(--ew-heading-weight,650)!important}
.ew-builder .ew-store .ew-wordmark{display:block!important;padding:0!important;border:0!important;background:transparent!important;font-size:clamp(22px,2cqw,30px)!important;line-height:1.1!important;text-align:left!important}
.ew-builder .ew-store .ew-wordmark>span{display:block!important}
.ew-builder .ew-store[data-template=print-studio] .ew-wordmark{font-family:ui-sans-serif,system-ui,sans-serif!important;font-weight:800!important}
.ew-builder .ew-store .ew-primary{background:var(--sf-accent)!important;color:#fff!important;border-color:var(--sf-accent)!important;border-radius:8px!important;padding:14px 22px!important;font-size:14px!important;margin-top:12px!important}
.ew-builder .ew-store .ew-primary:hover{background:var(--sf-accent)!important;filter:brightness(.94)}
.ew-builder .ew-store button.ew-product-card{display:block!important;background:transparent!important;border:0!important;padding:0!important;text-align:left!important}
.ew-builder .ew-store[data-template=wholesale-catalogue] button.ew-product-card{display:grid!important;background:#fff!important;border:1px solid #d9e4eb!important;padding:12px!important}
.ew-store:is([data-template=print-studio],[data-template=creative-marketplace]) .ew-hero-stamp{top:20px!important;right:calc(50% - 41px)!important;bottom:auto!important}
@container(max-width:500px){.ew-builder .ew-store[data-template=wholesale-catalogue] button.ew-product-card{padding:10px!important}}
}
/* Public store type guidance: shared templates, type-specific visual information. */
.ew-experience-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:18px 5%;border-bottom:1px solid var(--sf-line);background:#fff}
.ew-experience-facts>div{display:flex;align-items:center;gap:12px;min-width:0;font-size:13px;font-weight:600;line-height:1.5}
.ew-experience-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:16px;flex:none}
.ew-selling-guide{padding:60px 5%;background:linear-gradient(135deg,#faf8ff,#f3f9f7)}
.ew-selling-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:22px 0}
.ew-selling-cards article{padding:26px;border:1px solid var(--sf-line);border-radius:20px;background:white;min-width:0}
.ew-builder .ew-selling-cards h3{font-size:20px;margin:16px 0 10px}.ew-selling-cards p,.ew-type-faq p{font-size:14px;line-height:1.8;color:var(--sf-muted);overflow-wrap:anywhere}
.ew-file-formats{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.ew-file-formats>span{display:flex;align-items:center;gap:5px;background:#f3effa;color:#65449a;border-radius:8px;padding:7px;font-size:12px}
.ew-type-faq{display:grid;gap:10px}.ew-type-faq details{padding:18px 22px;border:1px solid var(--sf-line);border-radius:12px;background:#fff}.ew-type-faq summary{cursor:pointer;font-weight:600;line-height:1.5;min-height:24px}.ew-policy-text{white-space:pre-wrap}
.ew-price-unit{display:block;font-size:12px;line-height:1.6;color:var(--sf-muted);font-weight:400;margin-top:4px}
.ew-store[data-commerce-type=subscription] .ew-hero{background:#fff1d6}.ew-store[data-commerce-type=service] .ew-hero{background:#f9e7ee}.ew-store[data-commerce-type=booking] .ew-hero{background:#e4f5f4}.ew-store[data-commerce-type=food] .ew-hero{background:#fff0dd}
@container(max-width:760px){.ew-selling-cards{grid-template-columns:1fr}.ew-experience-facts{gap:8px;padding:14px 5%}.ew-experience-facts>div{flex-direction:column;align-items:flex-start;font-size:12px}.ew-experience-icon{width:42px;height:42px;border-radius:12px}.ew-selling-guide{padding:36px 5%}.ew-selling-cards article{padding:22px}}
.ew-store .ew-faq[hidden]{display:none!important}
/* Dedicated commerce section controls; public previews never receive this editor shell. */
.ew-edit-section{position:relative;isolation:isolate;outline:1px dashed #b9c5d0;outline-offset:-1px;scroll-margin:8px;margin:8px 0}.ew-edit-section[data-selected=true]{outline:3px solid #8662d5;outline-offset:-3px}.ew-edit-section-tools{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:5px;padding:7px;background:#f3effc;border-bottom:1px solid #d8ccee;flex-wrap:wrap}.ew-edit-section-tools>span{margin-left:auto;font:11px system-ui;color:#655478}.ew-builder .ew-edit-section-tools button{min-height:36px;padding:7px 9px;background:#fff;color:#6543a6;border:1px solid #d8cfee;font-size:12px}.ew-edit-section-hit{position:absolute;inset:45px 0 0;z-index:2;opacity:0;cursor:pointer!important;width:100%;border:0!important}.ew-edit-section-hit:focus-visible{opacity:.18;background:#a78bfa!important;outline:3px solid #7653bd!important}.ew-selected-name{display:block;color:#6945b1;font-size:14px;overflow-wrap:anywhere}.ew-selected-actions{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0}.ew-builder .ew-selected-actions button{min-height:40px;padding:7px 9px}.ew-selected-actions button:last-child{color:#b23857}.ew-editor-hint{font-size:12px;line-height:1.6;color:#667489}.ew-inspector-group{border-top:1px solid #e6e0ed;padding:16px 0 3px;margin-top:16px}.ew-inspector-group>summary{font-size:12px;font-weight:650;color:#66478f;cursor:pointer;min-height:32px}.ew-inspector fieldset{padding-top:8px;margin-top:6px}.ew-edit-section-tools [aria-pressed=true]{background:#e4d7fc!important}@media(max-width:600px){.ew-edit-section-tools{gap:3px;padding:5px}.ew-edit-section-tools>span{display:none}.ew-builder .ew-edit-section-tools button{font-size:11px;padding:6px}.ew-edit-section-hit{inset:42px 0 0}}
/* Intrinsic grid rows prevent the inspector from covering element controls in small windows. */
@media(min-width:601px) and (max-width:1100px){.ew-focus .ew-workspace{grid-template-rows:max-content max-content;grid-auto-rows:max-content;align-items:start}.ew-focus .ew-palette{max-height:75vh;overflow:auto}.ew-focus .ew-inspector{max-height:none}.ew-focus .ew-canvas{max-height:75vh}}
.avatar-monogram {
background: #5b6cff;
color: #fff;
font-weight: 700;
letter-spacing: 0.02em;
box-shadow: none;
}
.notify-dot {
background: #ef4444;
}
.user-menu-panel.switch-profile {
min-width: 18.5rem;
max-width: min(22rem, calc(100vw - 1.25rem));
padding: 0.85rem 0.8rem 0.55rem;
border-radius: 1.15rem;
border: 1px solid #e8eef6;
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
}
.switch-profile-head {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.7rem;
padding: 0.1rem 0.15rem 0.85rem;
}
.switch-profile-who {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.08rem;
}
.switch-profile-who strong {
font-size: 0.95rem;
font-weight: 750;
color: #0f172a;
line-height: 1.2;
}
.switch-profile-who span {
font-size: 0.78rem;
color: #64748b;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.switch-profile-pill {
display: inline-flex;
align-items: center;
padding: 0.22rem 0.55rem;
border-radius: 999px;
background: #e8f0ff;
color: #2563eb;
font-size: 0.68rem;
font-weight: 700;
white-space: nowrap;
}
.switch-profile-section {
margin: 0.15rem 0.2rem 0.45rem;
font-size: 0.78rem;
font-weight: 650;
color: #64748b;
}
.switch-profile-search {
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0 0.1rem 0.5rem;
padding: 0.45rem 0.65rem;
border: 1px solid #e5eaf1;
border-radius: 0.75rem;
background: #f8fafc;
color: #64748b;
}
.switch-profile-search input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
font: inherit;
font-size: 0.82rem;
color: #0f172a;
outline: none;
}
.switch-profile-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
max-height: 16.5rem;
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.switch-profile-list::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.switch-profile-row {
width: 100%;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.7rem;
padding: 0.55rem 0.55rem;
border: 0;
border-radius: 0.85rem;
background: transparent;
text-align: left;
font: inherit;
color: inherit;
cursor: pointer;
}
.switch-profile-row:hover,
.switch-profile-row:focus-visible {
background: #f4f7fb;
}
.switch-profile-row[data-active='true'] {
background: #eef4ff;
}
.switch-profile-kind {
width: 2.15rem;
height: 2.15rem;
border-radius: 0.7rem;
display: grid;
place-items: center;
background: #eef2f7;
color: #334155;
}
.switch-profile-kind[data-kind='partner'] {
background: #e8f7ef;
color: #0f766e;
}
.switch-profile-kind[data-kind='super_admin'] {
background: #efe9ff;
color: #6d28d9;
}
.switch-profile-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.08rem;
}
.switch-profile-copy strong {
font-size: 0.88rem;
font-weight: 700;
color: #0f172a;
}
.switch-profile-copy small {
font-size: 0.72rem;
color: #94a3b8;
}
.switch-profile-radio {
width: 1.15rem;
height: 1.15rem;
border-radius: 50%;
border: 1.6px solid #cbd5e1;
display: grid;
place-items: center;
background: #fff;
}
.switch-profile-radio.is-on {
border: 0;
background: #2563eb;
}
.switch-profile-status {
margin: 0.35rem 0.4rem 0;
font-size: 0.78rem;
color: #64748b;
}
.switch-profile-foot {
display: flex;
flex-direction: column;
margin-top: 0.35rem;
padding-top: 0.2rem;
border-top: 1px solid #eef2f6;
}
.switch-profile-all {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.7rem 0.55rem;
color: #2563eb;
font-size: 0.88rem;
font-weight: 650;
text-decoration: none;
border-radius: 0.7rem;
}
.switch-profile-all.is-static {
margin: 0;
}
.switch-profile-all:hover {
background: #f4f7fb;
}
.switch-profile-action {
display: flex;
align-items: center;
gap: 0.65rem;
width: 100%;
padding: 0.7rem 0.55rem;
border: 0;
background: transparent;
border-radius: 0.7rem;
font: inherit;
font-size: 0.9rem;
font-weight: 650;
color: #0f172a;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.switch-profile-action svg {
color: #2563eb;
}
.switch-profile-action:hover,
.switch-profile-action:focus-visible {
background: #f4f7fb;
}
.switch-profile-logout {
color: #dc2626;
}
.switch-profile-logout svg {
color: #dc2626;
}
.avatar-btn {
box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #c7d2fe;
}
.module-guide-entry{display:flex;justify-content:flex-end;padding:8px 0}.module-guide-entry svg{color:#5b21b6}.module-guide-workspace{width:100%;min-width:0;margin-block:16px}.module-guide-panel{border:1px solid var(--ui-border,#cbd5e1);border-radius:16px;background:var(--ui-surface,#fff);color:var(--ui-text,#172033);padding:clamp(12px,2vw,24px);width:100%;box-sizing:border-box;overflow-wrap:anywhere}.module-guide-header,.module-guide-header>div{display:flex;gap:12px;align-items:center}.module-guide-header{justify-content:space-between}.module-guide-header h2{font-size:1.15rem;margin:0}.module-guide-emblem{display:grid;place-items:center;background:#ede9fe;color:#5b21b6;border-radius:12px;padding:10px}.module-guide-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:10px;margin-block:16px}.module-guide-card{justify-content:flex-start!important;text-align:left;white-space:normal!important;min-width:0}.module-guide-card svg{flex-shrink:0}.module-guide-help svg{color:#5b21b6}.module-guide-work svg{color:#1d4ed8}.module-guide-create svg{color:#047857}.module-guide-people svg{color:#7e22ce}.module-guide-calendar svg{color:#b45309}.module-guide-progress svg{color:#047857}.module-guide-review svg{color:#be185d}.module-guide-card[aria-pressed=true]{outline:2px solid #5b21b6;outline-offset:2px}.module-guide-step{border-left:4px solid #5b21b6;padding:12px 16px;background:var(--ui-subtle,#f5f3ff);border-radius:8px}.module-guide-progress{font-weight:600}.module-guide-actions{display:flex;flex-wrap:wrap;gap:8px;margin-block:12px}.module-guide-panel button{max-width:100%;white-space:normal}.module-guide-panel button svg{width:18px;height:18px;flex-shrink:0}.module-guide-question{margin-block:20px}.module-guide-question form{display:grid;gap:8px}.module-guide-question textarea{box-sizing:border-box;width:100%;min-height:90px;resize:vertical;border:1px solid var(--ui-border,#94a3b8);border-radius:8px;background:var(--ui-surface,#fff);color:inherit;padding:10px}.module-guide-answer{white-space:pre-wrap;border-left:3px solid #047857;padding:12px}.module-guide-highlight{outline:3px solid #7c3aed!important;outline-offset:5px!important}.module-guide-notice{padding:8px 12px}.module-guide-panel :focus-visible{outline:3px solid #2563eb;outline-offset:3px}@media(max-width:480px){.module-guide-header{align-items:flex-start}.module-guide-header h2{font-size:1rem}.module-guide-cards{grid-template-columns:1fr}.module-guide-step{padding:10px}.module-guide-panel .copilot-voice-controls{flex-wrap:wrap}.module-guide-panel select{max-width:100%}}@media(prefers-reduced-motion:reduce){.module-guide-panel *{animation:none!important;transition:none!important}}
.module-guide-presenter{margin-block:20px;border:1px solid var(--ui-border,#cbd5e1);border-radius:12px;padding:clamp(12px,2vw,20px);min-width:0}.module-guide-presenter h3{display:flex;align-items:center;gap:8px}.module-guide-presenter h3 svg{color:#7c3aed}.module-guide-caption{white-space:pre-wrap;border-left:3px solid #2563eb;padding:10px;background:var(--ui-subtle,#eff6ff)}
.module-guide-human{margin:12px 0;width:min(100%,480px)}.module-guide-human svg{display:block;width:100%;height:auto;border-radius:12px}.module-guide-human figcaption{font-size:.85rem;margin-top:6px}.module-guide-human-eyes{transform-origin:240px 146px;animation:guide-human-blink 5s infinite}@keyframes guide-human-blink{0%,94%,98%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}@media(prefers-reduced-motion:reduce){.module-guide-human-eyes{animation:none}.module-guide-human-mouth{ry:3px}}
.gm-catalogue{max-width:1180px;margin:auto;color:#142b47;padding:12px 0 32px;font-size:14px}.gm-catalogue *{box-sizing:border-box;min-width:0}.gm-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.gm-heading h1{font-size:28px;margin:9px 0}.gm-heading p{color:#64748b;line-height:1.5}.gm-back{display:inline-flex;align-items:center;gap:7px;color:#1764c0;background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:none}.gm-eyebrow{display:flex;align-items:center;gap:7px;letter-spacing:1.2px;font-size:10px;font-weight:750;color:#587089;margin-top:16px}.gm-count{padding:9px 13px;border-radius:8px;background:#edf5ff;color:#2161a4;white-space:nowrap}.gm-notice{padding:13px 16px;background:#f0f6fc;border-left:3px solid #8ab5e5;border-radius:5px;color:#48657e;line-height:1.6;margin:16px 0}.gm-filters{display:grid;grid-template-columns:minmax(220px,2fr) 1fr 1fr;gap:10px;margin:18px 0}.gm-filters label{display:flex;align-items:center;gap:8px;border:1px solid #d7e1ec;padding-left:12px;border-radius:8px}.gm-catalogue input,.gm-catalogue select{font:inherit;color:inherit;background:white}.gm-filters input{width:100%;padding:12px;border:0;outline-offset:-3px}.gm-catalogue select{width:100%;padding:11px;border:1px solid #d7e1ec;border-radius:8px}.gm-selection{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px;background:#f7faff;border:1px solid #dce8f5;border-radius:9px}.gm-catalogue button:disabled{opacity:.55;cursor:not-allowed}.gm-selection>button:last-child,.gm-item-bottom>button,.gm-empty button{border:0;background:none;color:#1764c0;cursor:pointer;padding:8px}.gm-results{display:flex;justify-content:space-between;gap:12px;margin:20px 0 10px;color:#63768b}.gm-results small{font-size:11px}.gm-items{display:grid;gap:10px}.gm-item{padding:16px;border:1px solid #dce5ef;border-radius:10px;background:white}.gm-item-title{display:flex;align-items:center;gap:13px}.gm-item-title>div{flex:1}.gm-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;background:#eaf3ff;color:#3278c2;border-radius:8px}.gm-item h2{font-size:16px;line-height:1.4;margin:4px 0!important;overflow-wrap:anywhere}.gm-item small{font-size:11px;color:#6b7f94}.gm-item p{font-size:12px;color:#62758b;line-height:1.5;margin:5px 0}.gm-item input[type=checkbox],.gm-confirm input{width:20px;height:20px;accent-color:#2563eb;flex-shrink:0}.gm-item-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-top:1px solid #edf1f6;margin-top:12px;padding-top:10px;font-size:12px}.gm-item summary{color:#41698c;cursor:pointer;padding:5px 0}.gm-item dl>div{display:flex;gap:15px}.gm-item dt{text-transform:capitalize;color:#64748b}.gm-item dd{margin:0}.gm-enabled{color:#26774e;white-space:nowrap;padding-top:5px}.gm-muted{color:#64748b;line-height:1.6}.gm-success{display:flex;align-items:center;gap:8px;padding:13px;color:#236c48;background:#edf9f1;border-radius:8px}.gm-error{padding:12px;color:#a52727;background:#fff1f1;border-radius:8px}.gm-error button{padding:7px 12px;background:white;border:1px solid #e7b7b7;border-radius:6px;color:inherit}.gm-empty{text-align:center;padding:35px 12px;border:1px dashed #d3dfeb;border-radius:10px}.gm-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:20px 0}.gm-link-form{border:2px solid #9fc2ec;padding:20px;border-radius:12px;margin:20px 0;background:#f7faff}.gm-link-form label{display:grid;gap:8px;margin:15px 0}.gm-link-form .gm-confirm{display:flex;align-items:center;gap:10px}.gm-link-form>div{display:flex;gap:12px;flex-wrap:wrap}.gm-footer{margin-top:25px;padding-top:15px;border-top:1px solid #e1e8f0;color:#64748b;font-size:12px}.gm-footer a{color:#1764c0}.gm-catalogue :is(button,a,input,select,summary):focus-visible{outline:3px solid #8ab8ff;outline-offset:3px}@media(max-width:650px){.gm-heading{align-items:flex-start}.gm-heading h1{font-size:23px}.gm-count{font-size:11px;white-space:normal}.gm-filters{grid-template-columns:1fr 1fr}.gm-filters label{grid-column:1/-1}.gm-item{padding:12px}.gm-item-title{gap:9px}.gm-item h2{font-size:14px}.gm-icon{width:32px;height:32px;flex-basis:32px}.gm-item-bottom{flex-direction:column;gap:5px}.gm-selection{gap:8px}.gm-selection button{max-width:100%;white-space:normal}.gm-results{font-size:12px;flex-wrap:wrap}}
.builder-erp{max-width:1080px;margin:0 auto;padding:clamp(24px,5vw,64px) clamp(16px,4vw,40px);color:var(--text-primary,#172e39)}
.builder-erp__intro{max-width:620px;margin-bottom:36px}.builder-erp__eyebrow,.builder-erp__label{font-size:11px;letter-spacing:.12em;font-weight:700;color:#476d73}.builder-erp__intro h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.04em;margin:10px 0 12px;line-height:1.1}.builder-erp__intro>p{font-size:17px;color:var(--text-secondary,#586c77);line-height:1.6}
.builder-erp__areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.builder-erp__card{display:flex;flex-direction:column;align-items:flex-start;gap:26px;padding:32px;border:1px solid var(--border-color,#dce5e7);border-radius:20px;background:var(--surface,#fff);color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}.builder-erp__card:hover{border-color:#648e93;box-shadow:0 8px 28px #17333d0a}.builder-erp__card:focus-visible,.builder-erp-switcher a:focus-visible{outline:3px solid #397b88;outline-offset:4px}.builder-erp__icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;color:#23636b;background:#e8f3f1}.builder-erp__card--construction .builder-erp__icon{color:#8e611d;background:#faf0db}.builder-erp__card-copy{display:flex;flex-direction:column;flex:1}.builder-erp__card h2{font-size:24px;letter-spacing:-.025em;margin:10px 0}.builder-erp__card p{color:var(--text-secondary,#586c77);font-size:15px;line-height:1.7;margin:0 0 28px;max-width:370px}.builder-erp__open{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:650;margin-top:auto}.builder-erp__empty{padding:24px;background:var(--surface,#f4f7f8);border-radius:12px;line-height:1.6}
.builder-erp-switcher{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 20px;padding:12px 0;border-bottom:1px solid var(--border-color,#dce5e7);font-size:13px}.builder-erp-switcher a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--text-secondary,#586c77);padding:8px 10px;border-radius:8px}.builder-erp-switcher a.active{background:#e8f3f1;color:#23636b;font-weight:650}.builder-erp-switcher>div{display:flex;gap:4px}.builder-erp-switcher .builder-erp-switcher__home{font-weight:650;color:var(--text-primary,#172e39)}
@media(max-width:640px){.builder-erp__areas{grid-template-columns:1fr}.builder-erp__card{padding:24px;gap:20px}.builder-erp__intro{margin-bottom:24px}}
.builder-erp__guidance{display:block;font-size:14px;line-height:1.7;color:var(--text-secondary,#586c77);margin-top:12px}
.builder-erp__areas--single{grid-template-columns:minmax(0,1fr);max-width:720px}
.builder-erp__areas--single .builder-erp__card{flex-direction:row;gap:24px}
.builder-erp__card-copy{min-width:0;overflow-wrap:anywhere}.builder-erp__icon{flex-shrink:0}
@media(max-width:640px){.builder-erp{padding:24px 16px}.builder-erp__areas--single .builder-erp__card{flex-direction:column;gap:16px}.builder-erp-switcher{gap:6px;margin-bottom:0;padding:8px 0}.builder-erp-switcher a{min-height:44px;padding:8px}.builder-erp-switcher>div{flex-wrap:wrap}}
.builder-erp-delivery{display:flex;flex-direction:column;gap:12px;padding:24px;margin:20px 0;border:1px solid var(--border-color,#dce5e7);border-radius:16px;background:var(--surface,#fff);overflow-wrap:anywhere}.builder-erp-delivery h2,.builder-erp-delivery p{margin:0}.builder-erp-delivery ul{margin:0;padding-left:20px;line-height:1.8}.builder-erp-delivery a{padding:8px 0;min-height:44px}.builder-erp-delivery button{align-self:flex-start;min-height:44px;padding:10px 16px;border:1px solid var(--border-color,#dce5e7);border-radius:8px;background:var(--surface,#fff);color:inherit}.builder-erp-delivery a:focus-visible,.builder-erp-delivery button:focus-visible{outline:3px solid #397b88;outline-offset:3px}
@layer components {
.compact-screen-title { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important; }
html:has(.app-shell[data-navigation=compact]) { height:auto!important; max-height:none!important; overflow-y:auto!important; overflow-x:clip!important; scrollbar-width:auto!important; }
html:has(.app-shell[data-navigation=compact]) :is(body,#root) { height:auto!important; max-height:none!important; overflow:visible!important; }
.app-shell[data-navigation=compact] { height:auto!important; max-height:none!important; min-height:100dvh; overflow:visible!important; }
.app-shell[data-navigation=compact]>main { overflow:visible!important; padding-bottom:16px; }
html:has(.app-shell[data-navigation=compact]):has(.overlay) { overflow-y:hidden!important; }
html:has(.app-shell[data-navigation=compact])::-webkit-scrollbar,
html:has(.app-shell[data-navigation=compact])::-webkit-scrollbar-thumb,
html:has(.app-shell[data-navigation=compact])::-webkit-scrollbar-track { all:revert!important; }
.compact-navigation-host { box-sizing:border-box; width:100%; min-width:0; max-width:900px; margin-inline:auto; overflow-x:clip; flex:none; }
.compact-workspace-links>.compact-navigation { padding:0; background:transparent; }
.compact-navigation-host:has(>.compact-navigation)>.compact-navigation-fallback { display:none; }
.app-shell[data-navigation-area=marketing] :is(.mkt-chrome,.marketing-hub) { display:none; }
.app-shell[data-navigation-area=builder] .sa-form[data-screen=builder-home] .home-apps.launcher-grid { display:none; }
.app-shell[data-navigation-area=comms-reseller] .cr-menu[aria-label="Communications Reseller menu"],
.app-shell[data-navigation-area=comms-services] .cr-menu[aria-label="Communications menu"],
.app-shell[data-navigation-area=comms-platform] .cr-menu[aria-label="Platform menu"] { display:none; }
.app-shell[data-navigation-area=freelance] .sa-form[data-screen=freelance-home]>.sa-form-head>span.muted { display:none; }
.app-shell[data-navigation-area=appointments] .appt-top { display:none; }
.app-shell[data-navigation-area=planner] .press-setup-trail { display:none; }
.app-shell[data-navigation=compact] :is(.re-exact-top,.re-xmod-top,.re-ai-exact-top,.re-reanal-top,.re-featlist-top,.re-webhome-dock),
.app-shell[data-navigation-area=events] .sa-form[data-screen=events-home]>.sa-form-head .events-actions { display:none; }
.app-shell[data-navigation=compact] .sa-form:has(.re-exact-title-row)>.sa-form-head h1 { display:none; }
.app-shell[data-navigation-area=hostel] .hostel-chips,
.app-shell[data-navigation-area=workforce] .attendance-workspace .comm-chrome,
.app-shell .realestate-module-bar[hidden] { display:none; }
.app-shell .realestate-menu-cards[hidden] { display:none; }
.compact-realestate-search-results>div { display:flex; justify-content:space-between; align-items:center; padding:6px; }
.compact-realestate-search-results button { min-height:44px; min-width:44px; }
.app-shell[data-navigation-area=builderos] :is(.bos-chips,.bos-mobile-nav),
.app-shell[data-navigation-area=builder-erp] .builder-erp[aria-labelledby=builder-erp-title]>.builder-erp__areas,
.app-shell[data-navigation-area=construction] :is(.cw-operations,.cx-client-mobile-nav) { display:none; }
.app-shell[data-navigation-area=recruitment] .rec-tabs,
.app-shell[data-navigation-area=recruitment] .rec-workspace>p:has(a[href*="screen="]),
.app-shell[data-navigation-area=recruitment] .rec-workspace>.rec-legacy-navigation { display:none; }
.compact-navigation { box-sizing:border-box; width:100%; min-width:0; max-width:900px; margin:0 auto; padding:0 12px 8px; overflow-x:clip; color:var(--ui-text); background:var(--ui-surface); }
.compact-navigation-groups { display:flex; flex-wrap:wrap; gap:0 14px; border-bottom:1px solid var(--ui-border); }
.compact-navigation-groups button { box-sizing:border-box; display:block; width:auto; min-width:44px; min-height:44px; margin:0; padding:8px 4px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:inherit; font:inherit; font-size:13px; cursor:pointer; }
.compact-navigation-groups button[aria-selected=true] { color:var(--ui-accent,#0879ff); border-bottom-color:currentColor; }
/* 900px column, 12px inset, 6px gap: nine 92px chips fit one row; the tenth wraps. */
.compact-navigation-items { display:flex; flex-wrap:wrap; align-items:stretch; justify-content:flex-start; gap:6px; min-width:0; padding-top:8px; overflow-x:clip; }
.compact-navigation-item { box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:0 1 auto; width:calc((100% - 48px) / 9); max-width:calc((100% - 48px) / 9); min-width:min(80px, 100%); min-height:70px; gap:5px; padding:6px 4px; border:1px solid var(--ui-border); border-radius:6px; color:inherit; background:transparent; text-decoration:none; text-align:center; font-size:12px!important; line-height:16px!important; overflow-wrap:break-word; word-break:normal; hyphens:manual; }
.compact-navigation-item>span:last-child { max-width:100%; overflow-wrap:break-word; word-break:normal; hyphens:manual; }
.compact-navigation-icon { display:flex; align-items:center; justify-content:center; height:24px; }
.compact-navigation-icon svg { width:22px; height:22px; }
.compact-navigation-item[aria-current=page] { color:var(--ui-accent,#0879ff)!important; border-color:var(--ui-accent,#0879ff)!important; background:color-mix(in srgb,var(--ui-accent,#0879ff) 9%,var(--ui-surface,white))!important; }
.compact-navigation-item:hover { border-color:var(--ui-accent,#0879ff); }
.compact-navigation :is(a,button):focus-visible { outline:2px solid var(--ui-accent,#0879ff); outline-offset:2px; }
@media(max-width:480px) {
.compact-navigation { padding-inline:12px; }
.compact-navigation-groups { gap:0 10px; }
.compact-navigation-items { flex-wrap:wrap; }
.compact-navigation-item { flex:0 0 calc((100% - 12px)/3); max-width:calc((100% - 12px)/3); width:calc((100% - 12px)/3); font-size:11px!important; line-height:14px!important; }
}
}
/* The workspace owns branding/navigation. Keep these unlayered so legacy
unlayered module styles cannot restore a second toolbar. Editors and public
previews do not carry data-navigation=compact. */
.app-shell[data-navigation=compact] main :is(.re-exact-top,.re-xmod-top,.re-ai-exact-top,.re-reanal-top,.re-featlist-top,.re-portalset-top,.re-publist-top) { display:none!important; }
.app-shell[data-navigation=compact] main :is(.re-affprof-brand,.re-affprof-back,.re-affperf-brand,.re-affperf-back,.re-webhome-brand),
.app-shell[data-navigation=compact] main :is(.crm-ai-conversation-head,.crm-assistant-brand)>.logo { display:none!important; }
.app-shell[data-navigation=compact] main :is(.re-affprof-top,.re-affperf-top,.re-webhome-top) { background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; }
.app-shell[data-navigation=compact] main .sa-page-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.app-shell[data-navigation=compact] main .sa-page-title { margin:0 0 12px; font-size:1.4rem; }
/* Recruitment and Assessment have their own legacy brand rows. Keep module
notification actions, while the shared workspace header supplies identity. */
.app-shell[data-navigation=compact] main .jp-brand:not(.jp-native-header),
.app-shell[data-navigation=compact] main .crm-assistant-brand { display:none!important; }
.app-shell[data-navigation=compact] main .jp-native-header :is(.jp-native-logo,.jp-avatar) { display:none!important; }
.app-shell[data-navigation=compact] main .jp-native-header { justify-content:flex-end; min-height:0; padding:0; border:0; background:transparent; box-shadow:none; }
/* Same 900px column and 12px inset as the compact header so chips, greeting,
and cards cannot sit left of the back control / header inner edge. */
.app-shell[data-navigation=compact] > .compact-navigation-host,
.app-shell[data-navigation=compact] .compact-navigation {
box-sizing: border-box;
width: 100%;
max-width: 900px;
margin-inline: auto;
overflow-x: clip;
}
.app-shell[data-navigation=compact] .compact-navigation { padding-inline: 12px; }
.app-shell[data-navigation=compact] > main { overflow-x: clip !important; }
.app-shell.app-shell[data-navigation=compact] .page-container.page-container {
box-sizing: border-box;
max-width: 900px !important;
margin-inline: auto !important;
padding-left: 12px !important;
padding-right: 12px !important;
overflow-x: clip;
}
/* Shared module mobile menu; dashboard launchers can retain their visible links. */
.compact-mobile-bar { display: none; }
.compact-navigation[data-mobile-menu=true] .compact-navigation-groups button { display: flex; align-items: center; gap: 6px; }
.compact-group-icon { display: inline-flex; flex-shrink: 0; }
@media(max-width:800px) {
.compact-navigation[data-mobile-menu=true] { padding-top: 6px; padding-bottom: 8px; }
.compact-navigation[data-mobile-menu=true] .compact-mobile-bar { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 10px; }
.compact-mobile-current { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: .9rem; }
.compact-mobile-current > span { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ui-accent,#075bff); background: color-mix(in srgb,var(--ui-accent,#075bff) 9%,var(--ui-surface,#fff)); }
.compact-mobile-current strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-mobile-bar > button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 12px; flex-shrink: 0; border: 1px solid var(--ui-border,#dde5f1); border-radius: 10px; background: var(--ui-surface,#fff); color: var(--ui-text); font: inherit; font-size: .85rem; cursor: pointer; }
.compact-navigation[data-mobile-menu=true]:not([data-mobile-open=true]) .compact-mobile-content { display: none; }
.compact-navigation[data-mobile-menu=true][data-mobile-open=true] .compact-mobile-content { display: grid; gap: 14px; padding: 12px 0 4px; }
.compact-navigation[data-mobile-menu=true] .compact-navigation-groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; border: 0; }
.compact-navigation[data-mobile-menu=true] .compact-navigation-groups button { flex-direction: column; justify-content: center; gap: 8px; min-width: 0; min-height: 82px; padding: 10px 5px; border: 1px solid var(--ui-border,#dde5f1); border-radius: 12px; background: var(--ui-surface,#fff); font-size: 11px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.compact-navigation[data-mobile-menu=true] .compact-group-icon { width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 9px; color: var(--ui-accent,#075bff); background: color-mix(in srgb,var(--ui-accent,#075bff) 9%,var(--ui-surface,#fff)); }
.compact-navigation[data-mobile-menu=true] .compact-navigation-groups button[aria-selected=true] { border-color: var(--ui-accent,#075bff); color: var(--ui-accent,#075bff); background: color-mix(in srgb,var(--ui-accent,#075bff) 5%,var(--ui-surface,#fff)); }
.compact-navigation[data-mobile-menu=true] .compact-navigation-items { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; border-top: 1px solid var(--ui-border,#dde5f1); padding-top: 14px; }
.compact-navigation[data-mobile-menu=true] .compact-navigation-item { width: 100%; max-width: none; min-width: 0; min-height: 74px; font-size: 11px!important; }
}
.compact-disclosure, .compact-disclosure-content { display: contents; }
@media(max-width:800px) {
.compact-disclosure { display: block; padding: 6px 12px 8px; min-width: 0; }
.compact-disclosure > .compact-mobile-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
.compact-disclosure:not([data-mobile-open=true]) > .compact-disclosure-content { display: none; }
.compact-disclosure[data-mobile-open=true] > .compact-disclosure-content { display: grid; gap: 12px; padding-top: 12px; }
.compact-disclosure[data-mobile-open=true] .compact-disclosure-content > nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 0; overflow: visible; }
.compact-disclosure[data-mobile-open=true] .compact-disclosure-content > nav > button { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; min-height: 82px; gap: 8px; padding: 10px 5px; border: 1px solid var(--ui-border,#dde5f1); border-radius: 12px; font-size: 11px; line-height: 1.3; white-space: normal; }
}
@layer components {
.app-shell[data-navigation=compact] .compact-workspace-header {
position:relative!important; top:auto!important; box-sizing:border-box; display:flex!important;
align-items:center; flex-wrap:nowrap!important; width:100%; min-height:48px!important;
max-width:900px!important; margin:0 auto; padding:0 12px!important; gap:6px;
border:0; border-bottom:1px solid var(--ui-border); background:var(--ui-surface); color:var(--ui-text); z-index:40;
}
.compact-header-brand { display:flex; flex:1; align-items:center; gap:10px; min-width:0; }
.compact-header-back { display:flex; flex:none; }
.compact-header-logo { display:flex; flex:0 1 auto; align-items:center; min-width:0; }
.compact-header-logo .logo { display:flex; align-items:center; min-width:0; }
.compact-header-logo img { max-height:32px!important; max-width:110px!important; object-fit:contain; }
.compact-module-name { min-width:0; border-left:1px solid var(--ui-border); padding-left:10px; font-size:15px; line-height:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compact-header-actions { display:flex; align-items:center; flex-shrink:0; gap:4px; }
.compact-header-apps, .compact-header-utilities>summary { box-sizing:border-box; display:grid; place-items:center; width:44px; height:44px; min-width:44px; border:0; border-radius:50%; color:var(--ui-text); text-decoration:none; cursor:pointer; }
.compact-header-apps { background:var(--ui-subtle); }
.compact-header-home { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 10px; border:1px solid var(--ui-border); border-radius:8px; background:var(--ui-subtle); color:var(--ui-text); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; }
.compact-header-home:hover { background:var(--ui-surface); color:var(--ui-accent,#0879ff); }
.compact-header-utilities { position:relative; flex-shrink:0; }
.compact-header-utilities>summary { list-style:none; }
.compact-header-utilities>summary::-webkit-details-marker { display:none; }
.compact-header-utilities[open]>div { position:absolute; top:100%; right:0; display:flex; padding:8px; border:1px solid var(--ui-border); border-radius:8px; background:var(--ui-surface); box-shadow:0 8px 20px #0002; z-index:50; }
.compact-workspace-header :is(a,button,summary):focus-visible { outline:2px solid var(--ui-accent,#0879ff); outline-offset:2px; }
@media(max-width:480px) {
.compact-workspace-header:has(.compact-header-home) .compact-header-logo { display:none; }
}
@media(max-width:600px) {
.app-shell[data-navigation=compact] .compact-workspace-header { padding-inline:6px!important; gap:2px; }
.compact-header-brand { gap:5px; }
.compact-header-back { display:none!important; }
.compact-header-logo { flex:none; width:50px; }
.compact-header-logo img { max-width:50px!important; max-height:28px!important; }
.compact-module-name { font-size:11px; line-height:14px; padding-left:5px; }
.compact-header-actions { gap:0; }
}
}
/* Uniform platform chrome. Tokens own color/type/surface.
Mode A and Mode B inherit the Super Admin home pattern via platform-layout.css (loaded last). */
.app-shell {
background: var(--color-background);
color: var(--color-text);
font-family: var(--font-family-body);
}
.app-shell[data-workspace='platform'] {
background: var(--color-background);
}
.app-shell[data-workspace='platform']:has(.sa-console) {
background: var(--color-background);
}
.app-shell .sunrise-sun,
.app-shell .sunrise-bird,
.app-shell .sunrise-hills {
display: none;
}
.app-shell .sunrise-glow {
display: none;
background: none;
}
.app-shell:not(.mode-b-shell) > main {
background: transparent;
color: var(--color-text);
}
.page-container {
color: var(--color-text);
}
.workspace-page-head h1,
.home-greeting h1,
.sa-form-titles h1,
.login-card h1 {
font-family: var(--font-family-heading);
color: var(--color-text-heading);
}
.muted,
.kicker,
.home-context,
.home-role,
.sa-greeting-sub,
.field,
.field-meta {
color: var(--color-text-secondary);
}
a.sa-section-link,
.sa-section-link {
color: var(--color-link);
}
.icon-card,
.action-card,
.stat-card,
.login-card,
.hero-card,
.person-card,
.sa-form-body,
.sa-form-panel,
.modal,
.sheet {
background: var(--card);
color: var(--color-text);
border-color: var(--line);
box-shadow: var(--shadow);
}
.pict {
border-radius: var(--radius-full);
background: var(--color-pastel-blue);
color: var(--color-pastel-blue-ink);
}
.sa-form-pict {
border-radius: var(--radius-full);
background: var(--color-pastel-blue);
color: var(--color-pastel-blue-ink);
box-shadow: none;
}
.sa-form-titles h1 {
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -0.03em;
}
.sa-form-titles p,
.sa-form .plan-sub {
font-size: var(--font-size-body-md);
color: var(--color-text-secondary);
}
.sa-form-kicker,
.sa-form .plan-side h2,
.action-card h2,
.workspace-page-head h1 {
font-family: var(--font-family-heading);
color: var(--color-text-heading);
}
.sa-form .org-add-review strong,
.partner-tree-copy strong,
.partner-chart-card strong,
.sa-form-list .person-card strong,
.sa-form-list .icon-card strong {
font-family: var(--font-family-heading);
color: var(--color-text-heading);
}
.primary-btn {
background: var(--brand);
color: var(--color-on-primary);
font-family: var(--font-family-body);
font-weight: 650;
}
.field input,
.field select,
.field textarea {
color: var(--color-text);
background: var(--card);
border-color: var(--line);
font-family: var(--font-family-body);
font-size: var(--font-size-body-md);
}
.login-screen {
background: var(--color-background);
color: var(--color-text);
}
.empty-state p,
.loading-state p,
.error-state p {
color: var(--color-text-secondary);
font-size: var(--font-size-body-md);
}
/* Module canvases share the same page gray — not a second product theme */
.app-shell:has([data-screen^='marketing-']) main,
.app-shell:has([data-screen^='association-']) main,
.app-shell:has([data-screen='association-events']) main,
.app-shell:has([data-screen='crm-dashboard']) main,
.app-shell:has([data-screen='crm-leads-list']) main,
.app-shell:has([data-screen='crm-people-list']) main {
background: var(--color-background);
}
.sa-form[data-screen^='marketing-'] .sa-form-head h1,
.sa-form[data-screen^='association-'] .sa-form-head h1,
.sites-hub-head h1 {
color: var(--color-text-heading);
font-family: var(--font-family-heading);
}
.sa-form[data-screen^='marketing-'] .primary-btn,
.sa-form[data-screen^='association-'] .primary-btn {
background: var(--brand);
border-color: var(--brand);
color: var(--color-on-primary);
}
.sa-form[data-screen^='association-'] .muted,
.sites-hub-head p {
color: var(--color-text-secondary);
}
.sa-form[data-screen^='partner-'] {
max-width: 900px;
width: 100%;
margin-inline: auto;
}
.sa-form[data-screen='partner-add'] .primary-btn,
.sa-form[data-screen='partner-add'] .org-add-actions .primary-btn {
width: auto;
max-width: 100%;
flex: 0 0 auto;
align-self: flex-start;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.7rem 1.15rem;
background: var(--brand);
color: var(--color-on-primary);
box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 28%, transparent);
}
.sa-form[data-screen='partner-add'] .primary-btn:disabled,
.sa-form[data-screen='partner-add'] .org-add-actions .primary-btn:disabled {
background: var(--brand);
color: var(--color-on-primary);
opacity: 0.72;
}
/* Logged-in shell. Color, type, radius, and shadow stay in design-system-tokens.css. */
:root {
--layout-max: 100%;
--shell-content-max: min(var(--layout-desktop-width), 100%);
}
.primary-btn,
.sa-form .primary-btn {
min-height: var(--touch);
border-radius: var(--radius-md);
font-size: var(--font-size-label-md);
font-weight: var(--font-weight-semibold);
}
.field {
font-size: var(--font-size-label-md);
}
.field input,
.field select,
.field textarea,
.sa-form .field input,
.sa-form .field select,
.sa-form .field textarea {
min-height: var(--touch);
border-radius: var(--radius-md);
font-size: var(--font-size-body-md);
}
.field textarea,
.sa-form .field textarea {
min-height: 6rem;
}
.field-meta,
.workspace-page-head p,
.muted {
font-size: var(--font-size-body-sm);
}
.workspace-page-head h1,
.home-greeting h1 {
font-size: var(--font-size-headline-lg);
}
.section-title {
font-size: var(--font-size-headline-md);
}
.icon-card strong,
.app-card strong {
font-size: var(--font-size-headline-sm);
}
.icon-btn.header-round {
width: var(--touch);
height: var(--touch);
min-width: var(--touch);
min-height: var(--touch);
}
.app-card,
.icon-card,
.action-card,
.stat-card,
.metric-card {
border-radius: var(--radius-card);
box-shadow: var(--shadow-floating);
}
.card-grid,
.home-apps {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-3);
min-width: 0;
}
.home-apps {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.card-grid > *,
.home-apps > * {
min-width: 0;
}
@media (min-width: 768px) {
.card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 900px) {
.app-shell {
--layout-max: var(--layout-desktop-width);
--shell-content-max: var(--layout-desktop-width);
}
.workspace-header,
.page-container,
.app-shell > main {
width: min(var(--layout-desktop-width), 100%);
max-width: var(--layout-desktop-width);
margin-inline: auto;
}
.app-shell[data-page-builder='true'] > main,
.app-shell:has(.sites-canva) > main {
width: 100%;
max-width: none;
}
.card-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.form-grid,
.sa-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-4);
}
.form-grid .field[data-as='textarea'],
.sa-form-grid .field[data-as='textarea'] {
grid-column: 1 / -1;
}
}
.workspace-page,
.page-container,
.card-grid,
.record-row,
.list-row {
max-width: 100%;
}
.record-row,
.list-row {
min-width: 0;
overflow-wrap: anywhere;
}
.realestate-enqnew-stepper {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-2);
}
.step-progress {
margin: var(--spacing-2) 0 var(--spacing-3);
font-size: var(--font-size-body-sm);
color: var(--color-text-secondary);
}
@media (max-width: 767px) {
table.responsive-records,
table.responsive-records tbody,
table.responsive-records tr {
display: block;
width: 100%;
}
table.responsive-records thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
table.responsive-records tr {
margin: 0 0 var(--spacing-3);
padding: var(--spacing-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
background: var(--color-surface-light);
}
table.responsive-records td {
display: grid;
grid-template-columns: minmax(7rem, 40%) minmax(0, 1fr);
gap: var(--spacing-2);
border: 0;
padding: var(--spacing-1) 0;
min-width: 0;
overflow-wrap: anywhere;
}
table.responsive-records td::before {
content: attr(data-label);
font-size: var(--font-size-label-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
}
.assoc-pl-table-wrap,
.table-wrap {
overflow-x: visible;
}
}
.realestate-owner-new-stepper,
.realestate-reqnew-stepper,
.re-vendnew-stepper,
.re-addlist-stepper,
.realestate-proj-stepper,
.realestate-valnew-stepper,
.sites-product-stepper,
.cat-add-steps {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-2);
}
.realestate-owner-new-stepper button,
.realestate-reqnew-stepper button,
.re-vendnew-stepper button,
.re-addlist-stepper button,
.sites-product-stepper button {
min-height: var(--touch);
min-width: var(--touch);
}
table.responsive-records .rec-label {
display: none;
}
@media (max-width: 767px) {
table.responsive-records .rec-label {
display: block;
font-size: var(--font-size-label-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
}
table.responsive-records td::before {
content: none;
}
}
.sa-form-head {
flex-wrap: wrap;
}
.sa-form-titles h1,
.workspace-page-head h1 {
overflow-wrap: anywhere;
}
.sa-form-titles h1 {
font-size: var(--font-size-headline-lg);
}
.workspace-page-actions {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.workspace-page-actions a,
.workspace-page-actions button,
.sa-form-head > a,
.sa-form-head > button,
.sa-form .text-btn {
min-height: var(--touch);
display: inline-flex;
align-items: center;
}
.record-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: 0.75rem;
margin: 0;
}
.record-facts div {
min-width: 0;
}
.record-facts dt {
font-size: var(--font-size-label-sm);
color: var(--color-text-secondary);
}
.record-facts dd {
margin: 0.15rem 0 0;
font-size: var(--font-size-body-md);
overflow-wrap: anywhere;
}
.record-list {
min-width: 0;
overflow-wrap: anywhere;
}
.sa-form-steps {
flex-wrap: wrap;
}
.sa-form-steps li {
flex: 1 1 8rem;
min-width: 0;
min-height: var(--touch);
}
.sa-form-steps li em {
display: inline;
white-space: normal;
overflow: visible;
text-overflow: unset;
}
.org-add-actions {
flex-wrap: wrap;
}
.org-add-review strong,
.plan-side dd {
overflow-wrap: anywhere;
min-width: 0;
}
.org-sort button,
.partner-view-switch button {
min-height: var(--touch);
}
.partner-view-switch {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.record-status {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin: 0;
font-size: var(--font-size-label-sm);
color: var(--color-text-secondary);
}
.sa-form-head > button[aria-label="Back"],
.sa-form-head > a[aria-label="Back"] {
display: none;
}
/* CRM Mode B styles brought from py-crm master (2026-09-08). */
/* Scoped mostly to .mode-b-shell / crm-* ; appended so later rules win. */
.sa-form[data-screen="crm-leads-list"] {
background: transparent;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-head {
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-head .sa-form-pict {
display: none;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-head h1 {
margin: 0;
font-size: 1.7rem;
font-weight: 800;
letter-spacing: -0.02em;
color: #0f172a;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-body {
background: #eef5fb;
border: 1px solid #eef2f7;
box-shadow: 0 16px 40px rgba(18, 32, 43, 0.06);
border-radius: 1.5rem;
padding: 1rem 1rem 1.15rem;
}
.sa-form[data-screen="crm-lead-detail"] {
background: transparent;
}
.sa-form[data-screen="crm-lead-detail"] > .sa-form-head {
display: none;
}
.sa-form[data-screen="crm-lead-detail"] > .sa-form-body {
background: transparent;
border: 0;
box-shadow: none;
border-radius: 0;
padding: 0;
gap: 0;
}
.crm-leads-title-actions {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.crm-leads-v2 {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
}
.crm-leads-search {
display: flex;
align-items: center;
gap: 0.55rem;
width: 100%;
padding: 0.75rem 0.95rem;
border-radius: 1rem;
border: 1px solid #e5e7eb;
background: #ffffff;
color: #64748b;
}
.crm-leads-search input {
flex: 1 1 auto;
min-width: 0;
border: 0;
outline: none;
background: transparent;
font-size: 0.95rem;
color: #0f172a;
}
.crm-leads-search input::placeholder {
color: #94a3b8;
}
.crm-leads-icon-btn {
width: 2.35rem;
height: 2.35rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid #e5e7eb;
background: #ffffff;
color: #475569;
cursor: pointer;
}
.crm-leads-icon-btn.active,
.crm-leads-icon-btn:hover {
background: #eff6ff;
border-color: #bfdbfe;
color: #1d4ed8;
}
.crm-leads-actions {
display: flex;
flex-wrap: nowrap;
gap: 0.5rem;
width: 100%;
}
.crm-leads-btn {
flex: 1 1 0;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.7rem 0.65rem;
border-radius: 0.9rem;
font-size: 0.88rem;
font-weight: 700;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
}
.crm-leads-btn.primary {
background: #2563eb;
color: #fff;
border-color: #2563eb;
}
.crm-leads-btn.primary:hover {
background: #1d4ed8;
}
.crm-leads-btn.secondary {
background: #ffffff;
color: #1e40af;
border-color: #93c5fd;
}
.crm-leads-btn.secondary:hover {
background: #f8fafc;
}
.crm-leads-filters {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 0.85rem 0.9rem;
border-radius: 1rem;
border: 1px solid #e5e7eb;
background: #ffffff;
}
.crm-leads-filters select {
width: 100%;
padding: 0.55rem 0.7rem;
border-radius: 0.7rem;
border: 1px solid #e5e7eb;
background: #fff;
}
.crm-leads-filters-row {
display: flex;
align-items: center;
gap: 0.55rem;
}
.crm-leads-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.crm-leads-list > li {
margin: 0;
padding: 0;
}
.crm-leads-list .selectable-record-row {
padding: 0;
border: 0;
background: transparent;
}
.crm-lead-card {
display: flex;
align-items: center;
gap: 0.55rem;
width: 100%;
padding: 0.8rem 0.85rem;
border-radius: 1rem;
background: #ffffff;
border: 1px solid #eef2f7;
box-shadow: none;
box-sizing: border-box;
}
.crm-lead-card[data-tone="new"] {
background: #f8fafc;
border-color: #e2e8f0;
}
.crm-lead-card[data-tone="contacted"] {
background: #fffdf8;
border-color: #f3e8d4;
}
.crm-lead-card[data-tone="qualified"] {
background: #f7fdf9;
border-color: #d9eee2;
}
.crm-lead-card[data-tone="muted"] {
background: #fafafa;
border-color: #ececec;
}
.crm-lead-card-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 0.7rem;
text-decoration: none;
color: inherit;
}
.crm-lead-avatar {
flex: 0 0 auto;
width: 2.45rem;
height: 2.45rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #e8eef8;
color: #1d4ed8;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.02em;
}
.crm-lead-card-identity {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.crm-lead-card-name {
font-size: 0.98rem;
font-weight: 700;
color: #0f172a;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-lead-card-company {
display: inline-flex;
align-items: center;
gap: 0.28rem;
font-size: 0.78rem;
color: #64748b;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-lead-card-company.muted {
color: #94a3b8;
}
.crm-lead-status {
flex: 0 0 auto;
padding: 0.28rem 0.6rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 750;
line-height: 1;
}
.crm-lead-status[data-tone="new"] {
background: #eef2ff;
color: #4338ca;
}
.crm-lead-status[data-tone="contacted"] {
background: #fff7ed;
color: #c2410c;
}
.crm-lead-status[data-tone="qualified"] {
background: #ecfdf5;
color: #047857;
}
.crm-lead-status[data-tone="muted"] {
background: #f1f5f9;
color: #64748b;
}
.crm-lead-card-actions {
display: inline-flex;
gap: 0.15rem;
flex: 0 0 auto;
opacity: 0.7;
}
.crm-lead-action-btn {
width: 1.85rem;
height: 1.85rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 0.55rem;
background: transparent;
color: #94a3b8;
cursor: pointer;
}
.crm-lead-action-btn:hover {
background: #eff6ff;
color: #1d4ed8;
}
.crm-lead-action-btn[data-tone="convert"]:hover {
background: #ecfdf5;
color: #047857;
}
.crm-lead-action-btn[data-tone="danger"]:hover {
background: #fef2f2;
color: #b91c1c;
}
.crm-leads-load-more {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
align-self: center;
margin: 0.25rem auto 0.75rem;
padding: 0.55rem 0.85rem;
border: 0;
background: transparent;
color: #2563eb;
font-size: 0.92rem;
font-weight: 700;
cursor: pointer;
}
.crm-leads-load-more:disabled {
opacity: 0.65;
cursor: default;
}
/* Soft page wash behind leads list */
.mode-b-shell main:has([data-screen="crm-leads-list"]),
.mode-b-shell main:has([data-screen="crm-lead-detail"]),
.mode-b-shell main:has([data-screen="crm-contacts-list"]) {
background: #eef5fb;
}
.mode-b-shell main:has([data-screen="crm-leads-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-leads-list"]) .sa-form-list,
.mode-b-shell main:has([data-screen="crm-lead-detail"]) .page-container,
.mode-b-shell main:has([data-screen="crm-lead-detail"]) .sa-form-list,
.mode-b-shell main:has([data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-contacts-list"]) .sa-form-list {
background: #eef5fb;
}
/* Lead detail shared bits */
.crm-lead-detail-back {
font-weight: 700;
}
.crm-lead-profile-sub {
margin: 0.15rem 0 0;
color: #64748b;
font-size: 0.9rem;
}
.crm-lead-section-title {
margin: 0 0 0.55rem;
font-size: 0.95rem;
font-weight: 750;
color: #0f172a;
}
/* === Mode B core-width chrome + 5-item bottom dock (server patch) === */
.mode-b-shell {
--mode-b-chrome-z: 70;
--mode-b-core-width: 900px;
--mode-b-core-pad: 1rem;
--layout-max: var(--mode-b-core-width) !important;
--shell-content-max: var(--mode-b-core-width) !important;
--shell-content-pad: var(--mode-b-core-pad);
--nav-dash: #2563eb;
--nav-leads: #0d9488;
--nav-contacts: #7c3aed;
--nav-customers: #ea580c;
--nav-more: #4f46e5;
width: 100%;
max-width: var(--mode-b-core-width);
margin-inline: auto;
box-sizing: border-box;
padding-left: 0;
padding-right: 0;
}
.mode-b-shell > .workspace-header.mode-b-header,
.mode-b-shell > header.mode-b-header,
.mode-b-shell .workspace-header.mode-b-header {
position: sticky;
top: 0;
z-index: var(--mode-b-chrome-z);
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
padding: 0.55rem var(--mode-b-core-pad) 0.45rem !important;
background: color-mix(in srgb, #eef3f8 92%, #fff);
backdrop-filter: blur(10px);
border-bottom: 1px solid color-mix(in srgb, #0f172a 8%, transparent);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.mode-b-shell .workspace-header.mode-b-header .workspace-brand {
flex: 1 1 auto;
min-width: 0;
justify-content: center;
text-align: center;
}
.mode-b-shell .workspace-header.mode-b-header .mode-b-title {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.mode-b-shell .workspace-header.mode-b-header .mode-b-host { display: none; }
.mode-b-shell:not([data-mode-b="crm"]) > .mode-b-nav,
.mode-b-shell:not([data-mode-b="crm"]) .mode-b-nav {
position: fixed !important;
left: 50% !important;
right: auto !important;
top: auto !important;
bottom: max(0.35rem, env(safe-area-inset-bottom, 0px)) !important;
transform: translateX(-50%) !important;
z-index: var(--mode-b-chrome-z);
display: flex !important;
justify-content: space-around;
align-items: stretch;
gap: 0.1rem;
width: min(100vw, var(--mode-b-core-width)) !important;
max-width: var(--mode-b-core-width) !important;
margin: 0 !important;
padding: 0.3rem 0.35rem !important;
box-sizing: border-box !important;
background: #fff;
border: 1px solid #e8eef5;
border-radius: 1.25rem;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
overflow: visible;
}
.mode-b-shell .mode-b-nav .mode-b-nav-item {
flex: 1 1 0;
min-width: 0;
min-height: 3.35rem;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.15rem;
padding: 0.3rem 0.2rem 0.25rem;
border-radius: 0.95rem;
font-size: 0.62rem;
font-weight: 650;
line-height: 1.1;
text-decoration: none;
color: #64748b;
white-space: nowrap;
}
.mode-b-shell .mode-b-nav .mode-b-nav-item:before {
content: "";
width: 1.35rem;
height: 1.35rem;
display: block;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href="/app/crm"],
.mode-b-shell .mode-b-nav .mode-b-nav-item[href="/app/crm/"] { color: var(--nav-dash); }
.mode-b-shell .mode-b-nav .mode-b-nav-item[href="/app/crm"]:before,
.mode-b-shell .mode-b-nav .mode-b-nav-item[href="/app/crm/"]:before {
background-image: url("data:image/svg+xml;utf8,");
background-color: color-mix(in srgb, var(--nav-dash) 14%, #fff);
box-sizing: content-box;
padding: 0.35rem;
width: 1.15rem;
height: 1.15rem;
border-radius: 999px;
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/leads"] { color: var(--nav-leads); }
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/leads"]:before {
background-image: url("data:image/svg+xml;utf8,");
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/contacts"] { color: var(--nav-contacts); }
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/contacts"]:before {
background-image: url("data:image/svg+xml;utf8,");
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/customers"] { color: var(--nav-customers); }
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/customers"]:before {
background-image: url("data:image/svg+xml;utf8,");
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/book"] { color: var(--nav-more); }
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/book"]:before {
background-image: url("data:image/svg+xml;utf8,");
}
.mode-b-shell .mode-b-nav .mode-b-nav-item.active {
background: color-mix(in srgb, currentColor 12%, #fff);
font-weight: 750;
}
.mode-b-shell > main,
.mode-b-shell main,
.mode-b-shell #main {
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
padding-inline: var(--mode-b-core-pad) !important;
padding-bottom: calc(5.9rem + env(safe-area-inset-bottom, 0px)) !important;
box-sizing: border-box !important;
align-self: stretch;
overflow-x: hidden;
}
.mode-b-shell > .mode-b-footer,
.mode-b-shell .mode-b-footer {
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
padding-inline: var(--mode-b-core-pad) !important;
padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
box-sizing: border-box !important;
}
/* Stretch ONLY page shells — never every crm-dash-* child (that broke tasks/hero) */
.mode-b-shell .page-container,
.mode-b-shell #main > *,
.mode-b-shell main > *,
.mode-b-shell .crm-dashboard,
.mode-b-shell .crm-dashboard-v2 {
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
align-self: stretch !important;
box-sizing: border-box !important;
}
/* ===== Clearer dashboard hierarchy ===== */
.mode-b-shell .crm-dashboard,
.mode-b-shell .crm-dashboard-v2 {
display: flex;
flex-direction: column;
gap: 1.15rem;
padding-top: 0.35rem;
}
.mode-b-shell .crm-dash-hero {
gap: 0.55rem;
}
.mode-b-shell .crm-dash-greeting {
margin: 0;
font-size: 1.35rem;
line-height: 1.25;
font-weight: 750;
color: #0f172a;
}
.mode-b-shell .crm-dash-kicker {
margin: 0;
font-size: 0.78rem;
color: #64748b;
letter-spacing: 0.01em;
text-transform: none;
}
.mode-b-shell .crm-dash-hero-card {
display: flex !important;
align-items: center !important;
justify-content: space-between;
gap: 0.85rem;
width: 100%;
max-width: none;
min-height: 5.5rem;
padding: 1.05rem 1.1rem !important;
border-radius: 1.1rem;
background: #fff;
border: 1px solid #e8eef5;
border-top: 3px solid #2563eb;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
overflow: hidden;
box-sizing: border-box;
}
.mode-b-shell .crm-dash-hero-card-label {
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #64748b;
font-weight: 650;
}
.mode-b-shell .crm-dash-hero-card-value {
margin-top: 0.2rem;
font-size: 2rem;
line-height: 1;
font-weight: 800;
color: #0f172a;
}
.mode-b-shell .crm-dash-trend {
display: inline-flex;
margin-top: 0.45rem;
padding: 0.15rem 0.45rem;
border-radius: 999px;
background: color-mix(in srgb, #16a34a 12%, #fff);
color: #15803d;
font-size: 0.75rem;
font-weight: 700;
}
.mode-b-shell .crm-dash-hero-card-icon {
flex: 0 0 auto;
width: 2.75rem;
height: 2.75rem;
border-radius: 0.9rem;
}
.mode-b-shell .crm-dash-grid,
.mode-b-shell .crm-dash-grid-kpi {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0.75rem !important;
width: 100%;
}
.mode-b-shell .crm-dash-kpi {
display: flex;
flex-direction: column;
gap: 0.45rem;
width: auto;
max-width: none;
min-width: 0;
padding: 0.9rem 0.95rem;
border-radius: 1rem;
background: #fff;
border: 1px solid #e8eef5;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
overflow: hidden;
}
.mode-b-shell .crm-dash-kpi-icon {
width: 1.85rem;
height: 1.85rem;
border-radius: 0.55rem;
background: color-mix(in srgb, #2563eb 12%, #fff);
color: #2563eb;
}
.mode-b-shell .crm-dash-kpi-label {
font-size: 0.78rem;
color: #64748b;
font-weight: 600;
}
.mode-b-shell .crm-dash-kpi-value {
font-size: 1.55rem;
line-height: 1;
font-weight: 800;
color: #0f172a;
}
.mode-b-shell .crm-dash-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin: 0.15rem 0 0.7rem;
}
.mode-b-shell .crm-dash-section-head h3 {
margin: 0;
font-size: 1rem;
font-weight: 750;
color: #0f172a;
}
.mode-b-shell .crm-dash-view-all {
font-size: 0.82rem;
font-weight: 700;
color: #2563eb;
white-space: nowrap;
}
.mode-b-shell .crm-dash-task-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
width: 100%;
}
.mode-b-shell .crm-dash-task {
display: flex !important;
flex-direction: row !important;
align-items: flex-start;
gap: 0.8rem !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0.9rem 0.95rem !important;
border-radius: 1rem;
background: #fff;
border: 1px solid #e8eef5;
box-sizing: border-box !important;
overflow: hidden;
text-decoration: none;
color: inherit;
}
.mode-b-shell .crm-dash-task-icon {
flex: 0 0 auto !important;
width: 2.15rem !important;
height: 2.15rem !important;
min-width: 2.15rem;
border-radius: 999px;
}
.mode-b-shell .crm-dash-task-copy {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
display: flex;
flex-direction: column;
gap: 0.2rem;
overflow: hidden;
}
.mode-b-shell .crm-dash-task-copy strong {
font-size: 0.95rem;
font-weight: 700;
color: #0f172a;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mode-b-shell .crm-dash-task-meta {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 0.65rem;
align-items: center;
font-size: 0.75rem;
color: #64748b;
}
/* ==== CRM Dashboard redesign :: modeb-dash-redesign (2026-09-02) ==== */
/* Modern refresh: gradient hero, elevated KPI cards with per-metric accents,
softer task/activity cards with hover lift. Pure CSS, overrides earlier
.mode-b-shell .crm-dash-* rules by source order. Remove this block to revert. */
/* Hero "Total leads" card -> gradient banner */
.mode-b-shell .crm-dash-hero-card {
background: linear-gradient(135deg, #4f46e5 0%, #2563eb 55%, #3b82f6 100%) !important;
border: none !important;
border-radius: 1.25rem !important;
color: #fff !important;
box-shadow: 0 16px 34px rgba(37, 99, 235, 0.28) !important;
position: relative;
overflow: hidden;
transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.mode-b-shell a.crm-dash-hero-card:hover {
transform: translateY(-2px);
box-shadow: 0 20px 40px rgba(37, 99, 235, 0.34) !important;
}
.mode-b-shell .crm-dash-hero-card::after {
content: "";
position: absolute;
right: -32px;
top: -46px;
width: 158px;
height: 158px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
pointer-events: none;
}
.mode-b-shell .crm-dash-hero-card-copy {
position: relative;
z-index: 1;
}
.mode-b-shell .crm-dash-hero-card-label {
color: rgba(255, 255, 255, 0.85) !important;
}
.mode-b-shell .crm-dash-hero-card-value {
color: #fff !important;
font-size: 2.2rem !important;
}
.mode-b-shell .crm-dash-trend {
background: rgba(255, 255, 255, 0.22) !important;
color: #fff !important;
}
.mode-b-shell .crm-dash-hero-card-icon {
background: rgba(255, 255, 255, 0.18) !important;
color: #fff !important;
width: 3rem !important;
height: 3rem !important;
position: relative;
z-index: 1;
}
/* KPI cards -> elevated, interactive, per-metric accent colours */
.mode-b-shell .crm-dash-kpi {
border: 1px solid #eef2f8 !important;
border-radius: 1.15rem !important;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05) !important;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.mode-b-shell a.crm-dash-kpi:hover {
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1) !important;
border-color: #dbe3f0 !important;
}
.mode-b-shell .crm-dash-kpi-icon {
width: 2.1rem !important;
height: 2.1rem !important;
border-radius: 0.7rem !important;
}
.mode-b-shell .crm-dash-kpi-value {
font-size: 1.7rem !important;
}
.mode-b-shell .crm-dash-grid-kpi .crm-dash-kpi:nth-child(1) .crm-dash-kpi-icon {
background: color-mix(in srgb, #2563eb 14%, #fff) !important;
color: #2563eb !important;
}
.mode-b-shell .crm-dash-grid-kpi .crm-dash-kpi:nth-child(2) .crm-dash-kpi-icon {
background: color-mix(in srgb, #7c3aed 14%, #fff) !important;
color: #7c3aed !important;
}
.mode-b-shell .crm-dash-grid-kpi .crm-dash-kpi:nth-child(3) .crm-dash-kpi-icon {
background: color-mix(in srgb, #0d9488 14%, #fff) !important;
color: #0d9488 !important;
}
.mode-b-shell .crm-dash-grid-kpi .crm-dash-kpi:nth-child(4) .crm-dash-kpi-icon {
background: color-mix(in srgb, #f59e0b 16%, #fff) !important;
color: #d97706 !important;
}
/* Sections + task/activity cards */
.mode-b-shell .crm-dash-section-head h3 {
font-size: 1.05rem !important;
letter-spacing: -0.01em;
}
.mode-b-shell .crm-dash-task {
border: 1px solid #eef2f8 !important;
border-radius: 1.15rem !important;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mode-b-shell a.crm-dash-task:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
}
.mode-b-shell .crm-dash-priority {
background: color-mix(in srgb, #f97316 18%, #fff) !important;
color: #c2410c !important;
}
.mode-b-shell .crm-dash-activity {
border-left-color: #dbe6f5 !important;
}
.mode-b-shell .crm-dash-activity li.active:before {
background: #2563eb !important;
box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(37, 99, 235, 0.18) !important;
}
/* ==== end modeb-dash-redesign ==== */
/* ==== CRM Mode B header redesign :: modeb-header-redesign (2026-09-02) ==== */
/* Modern core header: clean white bar, soft shadow, blue gradient accent line,
emphasised brand, soft pill for the workspace context, ringed avatar.
Scoped to .mode-b-shell .mode-b-header; overrides earlier rules by order.
Remove this block to revert. */
.mode-b-shell .workspace-header.mode-b-header {
background: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%) !important;
border-bottom: none !important;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
padding-top: 0.7rem !important;
padding-bottom: 0.62rem !important;
position: sticky;
overflow: visible;
}
.mode-b-shell .workspace-header.mode-b-header::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: linear-gradient(90deg, #4f46e5, #2563eb 55%, #3b82f6);
pointer-events: none;
}
.mode-b-shell .workspace-header.mode-b-header .mode-b-title strong {
font-size: 1.02rem;
font-weight: 800;
letter-spacing: -0.01em;
color: #0f172a;
}
/* Workspace context ("Lab Co") -> soft accent pill */
.mode-b-shell .workspace-header.mode-b-header .context-slot .context-slot-label,
.mode-b-shell .workspace-header.mode-b-header .context-slot .context-slot-trigger {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.22rem 0.6rem;
border-radius: 999px;
background: color-mix(in srgb, #2563eb 8%, #fff);
border: 1px solid color-mix(in srgb, #2563eb 18%, transparent);
color: #1d4ed8;
font-size: 0.78rem;
font-weight: 650;
line-height: 1.2;
white-space: nowrap;
}
.mode-b-shell .workspace-header.mode-b-header .context-slot .context-slot-trigger:hover {
background: color-mix(in srgb, #2563eb 14%, #fff);
}
/* Avatar -> subtle brand ring */
.mode-b-shell .workspace-header.mode-b-header .user-menu .avatar-btn {
border-radius: 999px;
padding: 0;
background: transparent;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(37, 99, 235, 0.32);
transition: box-shadow 0.15s ease;
}
.mode-b-shell .workspace-header.mode-b-header .user-menu .avatar-btn:hover {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(37, 99, 235, 0.55);
}
/* ==== end modeb-header-redesign ==== */
/* ==== CRM Mode B header/body gap fix :: modeb-gap-fix (2026-09-02) ==== */
/* Pull the page body up directly beneath the sticky core header — removes the
large empty band between the header bottom edge and the CRM Dashboard title. */
.mode-b-shell > main,
.mode-b-shell main,
.mode-b-shell #main {
padding-top: 0 !important;
margin-top: 0 !important;
}
.mode-b-shell .page-container {
padding-top: 0.4rem !important;
margin-top: 0 !important;
}
.mode-b-shell main > .sa-form,
.mode-b-shell main .sa-form,
.mode-b-shell main .classic-form {
margin-top: 0 !important;
}
.mode-b-shell .sa-form-head {
margin-top: 0 !important;
padding-top: 0 !important;
}
.mode-b-shell .crm-dashboard,
.mode-b-shell .crm-dashboard-v2 {
padding-top: 0 !important;
margin-top: 0 !important;
}
.mode-b-shell .crm-dash-hero {
margin-top: 0 !important;
}
/* ==== end modeb-gap-fix ==== */
/* ==== CRM Mode B bottom gap fix :: modeb-bottom-gap-fix (2026-09-02) ==== */
/* The old layout stacked bottom padding on main (5.9rem) + footer (5rem) +
shell (4.5rem), far more than the fixed bottom nav needs. Collapse to a
single clearance provided by the footer (the last in-flow element). */
.mode-b-shell {
padding-bottom: 0 !important;
}
.mode-b-shell > main,
.mode-b-shell main,
.mode-b-shell #main {
padding-bottom: 0.5rem !important;
}
.mode-b-shell > .mode-b-footer,
.mode-b-shell .mode-b-footer {
padding-top: 0.4rem !important;
padding-bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px)) !important;
margin-top: 0.25rem !important;
}
/* ==== end modeb-bottom-gap-fix ==== */
/* ==== CRM Mode B body width + leads tweaks :: modeb-body-leads-fix (2026-09-02) ==== */
/* 1) Body width == header width — drop the page-container side padding so the
body content aligns to the same core inset as the header (1rem core-pad). */
.mode-b-shell .page-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 2) Leads list — remove the repeated status value (Contacted / Qualified …). */
.mode-b-shell .crm-leads-list .crm-lead-status {
display: none !important;
}
/* 3) Leads list — unique action icon colors (were uniform grey). */
.mode-b-shell .crm-leads-list .crm-lead-card-actions {
opacity: 1 !important;
}
.mode-b-shell .crm-leads-list .crm-lead-action-btn {
color: #2563eb !important;
}
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="convert"] {
color: #0d9488 !important;
}
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="danger"] {
color: #dc2626 !important;
}
/* ==== end modeb-body-leads-fix ==== */
/* ==== CRM Leads action buttons -> icon-only, unique icons/colors :: modeb-leads-actions-icons (2026-09-02) ==== */
.mode-b-shell .crm-leads-actions.crm-leads-actions-icons {
display: flex;
flex-wrap: nowrap;
gap: 0.55rem;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only {
flex: 0 0 auto;
width: 2.9rem;
height: 2.9rem;
padding: 0 !important;
gap: 0;
border-radius: 0.9rem;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only svg {
display: block;
}
/* Add -> blue (filled, primary) */
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="add"] {
background: #2563eb !important;
border-color: #2563eb !important;
color: #fff !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="add"]:hover {
background: #1d4ed8 !important;
}
/* Import -> teal outline */
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="import"] {
background: color-mix(in srgb, #0d9488 8%, #fff) !important;
border-color: color-mix(in srgb, #0d9488 45%, #fff) !important;
color: #0d9488 !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="import"]:hover {
background: color-mix(in srgb, #0d9488 16%, #fff) !important;
}
/* Export -> orange outline */
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="export"] {
background: color-mix(in srgb, #ea580c 8%, #fff) !important;
border-color: color-mix(in srgb, #ea580c 45%, #fff) !important;
color: #ea580c !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="export"]:hover {
background: color-mix(in srgb, #ea580c 16%, #fff) !important;
}
/* ==== end modeb-leads-actions-icons ==== */
/* ==== CRM Leads toolbar: collapsible search + right-aligned action icons :: modeb-leads-toolbar (2026-09-02) ==== */
.mode-b-shell .crm-leads-toolbar {
display: flex;
align-items: center;
gap: 0.55rem;
width: 100%;
}
.mode-b-shell .crm-leads-search-wrap {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 0 0 auto;
min-width: 0;
}
.mode-b-shell .crm-leads-search-wrap.open {
flex: 1 1 auto;
}
.mode-b-shell .crm-leads-search-toggle {
width: 2.9rem;
height: 2.9rem;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.9rem;
border: 1px solid #e5e7eb;
background: #fff;
color: #2563eb;
cursor: pointer;
}
.mode-b-shell .crm-leads-search-toggle.active,
.mode-b-shell .crm-leads-search-toggle:hover {
background: #eff6ff;
border-color: #bfdbfe;
color: #1d4ed8;
}
.mode-b-shell .crm-leads-search-wrap .crm-leads-search {
flex: 1 1 auto;
min-width: 0;
}
.mode-b-shell .crm-leads-actions.crm-leads-actions-icons {
margin-left: auto;
width: auto;
flex: 0 0 auto;
}
/* ==== end modeb-leads-toolbar ==== */
/* ==== CRM Leads page: core width + no gray background :: modeb-leads-corewidth (2026-09-02) ==== */
/* Keep the standard centered core width; only remove the gray list backdrop. */
.mode-b-shell main:has([data-screen="crm-leads-list"]) {
background: #eef5fb !important;
}
.mode-b-shell main:has([data-screen="crm-leads-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-leads-list"]) .sa-form-list {
background: #eef5fb !important;
}
/* ==== end modeb-leads-corewidth ==== */
/* ==== CRM Leads row: email + phone lines, clean & truncated :: modeb-leads-contact (2026-09-02) ==== */
.mode-b-shell .crm-lead-card-contact {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.76rem;
color: #64748b;
line-height: 1.3;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mode-b-shell .crm-lead-card-contact svg {
flex: 0 0 auto;
color: #94a3b8;
}
.mode-b-shell .crm-lead-card-company svg {
flex: 0 0 auto;
}
/* keep rows from overflowing horizontally */
.mode-b-shell .crm-leads-list,
.mode-b-shell .crm-lead-card,
.mode-b-shell .crm-lead-card-main {
max-width: 100%;
overflow-x: hidden;
}
.mode-b-shell .crm-lead-card-identity {
min-width: 0;
}
/* ==== end modeb-leads-contact ==== */
/* ==== CRM Leads rows: uniform clean white background :: modeb-leads-cardbg (2026-09-02) ==== */
.mode-b-shell .crm-leads-list .crm-lead-card,
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="new"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="contacted"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="qualified"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="muted"] {
background: #ffffff !important;
border: 1px solid #e8eef5 !important;
}
/* ==== end modeb-leads-cardbg ==== */
/* ==== CRM Leads pagination controls :: modeb-leads-pagination (2026-09-02) ==== */
.mode-b-shell .crm-leads-pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
margin-top: 0.35rem;
}
.mode-b-shell .crm-leads-page-btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.55rem 0.95rem;
border-radius: 0.8rem;
border: 1px solid #dbe3f0;
background: #fff;
color: #1d4ed8;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
}
.mode-b-shell .crm-leads-page-btn:hover:not(:disabled) {
background: #eff6ff;
border-color: #bfdbfe;
}
.mode-b-shell .crm-leads-page-btn:disabled {
opacity: 0.45;
cursor: default;
}
.mode-b-shell .crm-leads-page-info {
font-size: 0.82rem;
font-weight: 650;
color: #64748b;
}
/* ==== end modeb-leads-pagination ==== */
/* ==== CRM bottom nav: clear per-item colors + unique customer icon :: modeb-nav-colors (2026-09-02) ==== */
/* Give every nav item a colored circular icon chip so each color reads clearly. */
.mode-b-shell .mode-b-nav .mode-b-nav-item:before {
box-sizing: content-box;
padding: 0.35rem;
width: 1.15rem;
height: 1.15rem;
border-radius: 999px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href="/app/crm"]:before,
.mode-b-shell .mode-b-nav .mode-b-nav-item[href="/app/crm/"]:before {
background-color: color-mix(in srgb, var(--nav-dash) 15%, #fff);
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/leads"]:before {
background-color: color-mix(in srgb, var(--nav-leads) 15%, #fff);
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/contacts"]:before {
background-color: color-mix(in srgb, var(--nav-contacts) 15%, #fff);
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/book"]:before {
background-color: color-mix(in srgb, var(--nav-more) 15%, #fff);
}
/* Customers -> unique "customer" icon (person + check), orange chip. */
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/customers"]:before {
background-color: color-mix(in srgb, var(--nav-customers) 15%, #fff);
background-image: url("data:image/svg+xml;utf8,");
}
/* Make labels carry their item color at full strength. */
.mode-b-shell .mode-b-nav .mode-b-nav-item {
font-weight: 700;
}
/* ==== end modeb-nav-colors ==== */
/* ==== CRM Leads row: name left / email+phone right, stack on narrow :: modeb-leads-contactcol (2026-09-02) ==== */
.mode-b-shell .crm-lead-card-main {
flex-wrap: wrap;
}
.mode-b-shell .crm-lead-card-identity {
flex: 1 1 auto;
min-width: 8rem;
}
.mode-b-shell .crm-lead-card-contactcol {
margin-left: auto;
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
gap: 0.15rem;
min-width: 0;
max-width: 60%;
}
.mode-b-shell .crm-lead-card-contactcol .crm-lead-card-contact {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* When the row is narrow, drop the contact block below the name (full width, left-aligned). */
@media (max-width: 33rem) {
.mode-b-shell .crm-lead-card-contactcol {
margin-left: 3.15rem;
align-items: flex-start;
text-align: left;
max-width: calc(100% - 3.15rem);
flex-basis: 100%;
}
}
/* ==== end modeb-leads-contactcol ==== */
/* ==== CRM Leads normal filters grid :: modeb-leads-filters (2026-09-02) ==== */
.mode-b-shell .crm-leads-filters-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem;
padding: 0.9rem;
border: 1px solid #e8eef5;
border-radius: 1rem;
background: #fff;
}
.mode-b-shell .crm-leads-filters-grid select,
.mode-b-shell .crm-leads-filters-grid input[type="date"] {
width: 100%;
padding: 0.6rem 0.7rem;
border: 1px solid #dbe3f0;
border-radius: 0.7rem;
background: #fff;
color: #0f172a;
font-size: 0.85rem;
}
.mode-b-shell .crm-leads-filters-grid .crm-leads-filters-row {
grid-column: 1 / -1;
display: flex;
gap: 0.75rem;
align-items: center;
}
/* ==== end modeb-leads-filters ==== */
/* ==== CRM Leads table layout: Name | Phone | Email columns :: modeb-leads-table (2026-09-02) ==== */
.mode-b-shell .crm-leads-list-head {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr) minmax(0, 1.7fr) 6.5rem;
column-gap: 0.6rem;
align-items: center;
padding: 0.15rem 0.9rem 0.45rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #94a3b8;
}
.mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row {
display: grid !important;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr) minmax(0, 1.7fr) 6.5rem;
column-gap: 0.6rem;
align-items: center;
}
.mode-b-shell .crm-leads-list .crm-lead-row .crm-lead-card-main {
display: contents !important;
}
.mode-b-shell .crm-lead-namecell {
display: flex;
align-items: center;
gap: 0.6rem;
min-width: 0;
}
.mode-b-shell .crm-lead-row .crm-lead-card-identity {
display: flex;
flex-direction: column;
min-width: 0;
}
.mode-b-shell .crm-lead-col {
display: inline-flex;
align-items: center;
gap: 0.3rem;
min-width: 0;
font-size: 0.8rem;
color: #334155;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mode-b-shell .crm-lead-col svg {
flex: 0 0 auto;
color: #94a3b8;
}
.mode-b-shell .crm-lead-col-email {
color: #2563eb;
}
.mode-b-shell .crm-lead-col-empty {
color: #cbd5e1;
}
.mode-b-shell .crm-lead-row .crm-lead-card-actions {
opacity: 1;
justify-content: flex-end;
}
/* ==== end modeb-leads-table ==== */
/* ==== CRM Leads mobile stacked rows :: modeb-leads-mobile (2026-09-02) ==== */
@media (max-width: 34rem) {
.mode-b-shell .crm-leads-list-head {
display: none;
}
.mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row {
grid-template-columns: 1fr auto;
row-gap: 0.3rem;
align-items: start;
}
.mode-b-shell .crm-lead-namecell {
grid-column: 1;
grid-row: 1;
}
.mode-b-shell .crm-lead-row .crm-lead-card-actions {
grid-column: 2;
grid-row: 1;
align-self: center;
}
.mode-b-shell .crm-lead-col-phone {
grid-column: 1 / -1;
grid-row: 2;
}
.mode-b-shell .crm-lead-col-email {
grid-column: 1 / -1;
grid-row: 3;
}
/* indent the stacked contact lines to sit under the name (past the avatar) */
.mode-b-shell .crm-lead-row .crm-lead-col {
padding-left: 3.05rem;
font-size: 0.82rem;
}
}
/* ==== end modeb-leads-mobile ==== */
/* ==== CRM Leads pagination count :: modeb-leads-count (2026-09-02) ==== */
.mode-b-shell .crm-leads-page-info {
display: inline-flex;
flex-direction: column;
align-items: center;
line-height: 1.2;
}
.mode-b-shell .crm-leads-page-info .crm-leads-count {
font-size: 0.72rem;
font-weight: 600;
color: #94a3b8;
}
/* ==== end modeb-leads-count ==== */
/* ==== Add Lead form: per-field mic icon (global, portal-safe) :: modeb-lead-field-mic-v2 (2026-09-02) ==== */
.lead-form .field-with-mic {
position: relative;
display: block;
}
.lead-form .field-with-mic .field {
width: 100%;
}
.lead-form .field-with-mic .voice-session {
position: absolute;
top: 0;
right: 0;
z-index: 3;
flex-wrap: nowrap;
gap: 0.2rem;
margin: 0;
}
.lead-form .field-with-mic .voice-session .voice-btn {
min-height: 0;
width: 1.85rem;
height: 1.85rem;
padding: 0;
gap: 0;
font-size: 0;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, #2563eb 10%, #fff);
color: #2563eb;
border: 1px solid color-mix(in srgb, #2563eb 28%, #fff);
}
.lead-form .field-with-mic .voice-session .voice-btn:hover {
background: color-mix(in srgb, #2563eb 18%, #fff);
}
.lead-form .field-with-mic .voice-session .voice-btn svg {
font-size: initial;
}
.lead-form .field-with-mic .voice-session .voice-btn-stop {
color: #b91c1c;
border-color: color-mix(in srgb, #b91c1c 35%, #fff);
background: color-mix(in srgb, #b91c1c 8%, #fff);
}
.lead-form .field-with-mic .voice-session-status {
display: none;
}
/* No visible scrollbar in the Add Lead popup */
.sheet:has(.lead-form) .sheet-body {
scrollbar-width: none;
}
.sheet:has(.lead-form) .sheet-body::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
/* ==== end modeb-lead-field-mic-v2 ==== */
/* ==== CRM Leads phone call + WhatsApp icons :: modeb-leads-phone-acts (2026-09-02) ==== */
.mode-b-shell .crm-lead-col-phone {
overflow: visible;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-num {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.mode-b-shell .crm-lead-phone-acts {
display: inline-flex;
gap: 0.25rem;
flex: 0 0 auto;
margin-left: 0.35rem;
}
.mode-b-shell .crm-lead-phone-act {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.55rem;
height: 1.55rem;
border: 0;
border-radius: 999px;
background: transparent;
cursor: pointer;
flex: 0 0 auto;
}
.mode-b-shell .crm-lead-phone-act.call {
color: #2563eb;
background: color-mix(in srgb, #2563eb 10%, #fff);
}
.mode-b-shell .crm-lead-phone-act.wa {
color: #16a34a;
background: color-mix(in srgb, #16a34a 12%, #fff);
}
.mode-b-shell .crm-lead-phone-act:hover {
filter: brightness(0.96);
}
/* ==== end modeb-leads-phone-acts ==== */
/* ==== Add Lead form: unify Phone field + align mic to label :: modeb-lead-phone-style (2026-09-02) ==== */
/* Mic sits on the label line (top-right), slightly smaller. */
.lead-form .field-with-mic .voice-session {
top: 0;
right: 0;
}
.lead-form .field-with-mic .voice-session .voice-btn {
width: 1.55rem;
height: 1.55rem;
}
/* Phone field styled like the other inputs */
.lead-form .lead-phone-field .field-label-row {
margin-bottom: 0.3rem;
}
.lead-form .lead-phone-field .lead-phone-label {
font-size: 0.82rem;
color: #64748b;
font-weight: 600;
}
.lead-form .lead-phone-row {
display: flex;
gap: 0.5rem;
align-items: stretch;
}
.lead-form .lead-phone-row > select {
flex: 0 0 auto;
border: 1px solid #e5e7eb;
border-radius: 0.9rem;
padding: 0.75rem 0.55rem;
background: #fff;
color: #0f172a;
font: inherit;
}
.lead-form .lead-phone-input-wrap {
position: relative;
flex: 1 1 auto;
display: block;
min-width: 0;
}
.lead-form .lead-phone-input-wrap .field-icon {
position: absolute;
left: 0.85rem;
top: 50%;
transform: translateY(-50%);
color: #16a34a;
pointer-events: none;
display: inline-grid;
place-items: center;
}
.lead-form .lead-phone-input-wrap input {
width: 100%;
border: 1px solid #e5e7eb;
border-radius: 0.9rem;
padding: 0.75rem 0.85rem 0.75rem 2.55rem;
background: #fff;
color: #0f172a;
font: inherit;
}
/* ==== end modeb-lead-phone-style ==== */
/* ==== CRM Leads: wider phone col + plain call/WhatsApp icons :: modeb-leads-phone-v2 (2026-09-02) ==== */
.mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row,
.mode-b-shell .crm-leads-list-head {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.8fr) minmax(0, 1.4fr) 5.5rem !important;
}
/* show the full phone number */
.mode-b-shell .crm-lead-col-phone {
overflow: visible;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-num {
overflow: visible;
text-overflow: clip;
white-space: nowrap;
}
/* plain icons: no background chip, colour only */
.mode-b-shell .crm-lead-phone-act,
.mode-b-shell .crm-lead-phone-act.call,
.mode-b-shell .crm-lead-phone-act.wa {
background: transparent !important;
width: 1.4rem;
height: 1.4rem;
}
.mode-b-shell .crm-lead-phone-act.call {
color: #2563eb;
}
.mode-b-shell .crm-lead-phone-act.wa {
color: #25d366;
}
.mode-b-shell .crm-lead-phone-act:hover {
filter: none;
opacity: 0.75;
}
/* ==== end modeb-leads-phone-v2 ==== */
/* ==== Add Lead form: compact right-aligned action buttons :: modeb-lead-actions (2026-09-02) ==== */
.lead-form .lead-form-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
margin-top: 0.35rem;
}
.lead-form .lead-form-actions .primary-btn {
width: auto;
flex: 0 0 auto;
min-width: 6.5rem;
padding: 0.6rem 1.5rem;
}
/* ==== Add Lead form: compact gaps + mic beside label :: modeb-lead-form-compact (2026-09-03) ==== */
.lead-form.classic-form,
.lead-form.stack {
gap: 0.5rem;
}
.lead-form .lead-form-grid {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.lead-form .field {
gap: 0.18rem;
}
.lead-form .field-label-row {
display: inline-flex;
align-items: center;
gap: 0.4rem;
width: auto;
max-width: 100%;
}
.lead-form .field-with-mic .voice-session {
position: static;
top: auto;
right: auto;
margin: 0;
}
.lead-form .field-with-mic .voice-session .voice-btn {
width: 1.45rem;
height: 1.45rem;
}
.lead-form .lead-phone-field {
display: flex;
flex-direction: column;
gap: 0.18rem;
}
.lead-form .lead-phone-field .field-label-row {
margin-bottom: 0;
}
.lead-form .lead-form-steps {
margin-bottom: 0.1rem;
}
/* ==== end modeb-lead-form-compact ==== */
/* ==== CRM Leads rows: white + light-blue hover :: modeb-leads-hover (2026-09-02) ==== */
.mode-b-shell .crm-leads-list .crm-lead-card {
background: #ffffff !important;
transition: background 0.12s ease;
}
.mode-b-shell .crm-leads-list > li:hover .crm-lead-card,
.mode-b-shell .crm-leads-list .crm-lead-card:hover {
background: #eff6ff !important;
}
/* ==== end modeb-leads-hover ==== */
/* ==== CRM Leads phone icons unique colors (override grey col svg) :: modeb-leads-phone-color (2026-09-02) ==== */
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.call,
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.call svg {
color: #2563eb !important;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.wa,
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.wa svg {
color: #25d366 !important;
}
/* ==== end modeb-leads-phone-color ==== */
/* ==== CRM Leads mobile layout fix (override phone-v2 grid) :: modeb-leads-mobile-v2 (2026-09-02) ==== */
@media (max-width: 34rem) {
.mode-b-shell .crm-leads-list-head {
display: none !important;
}
.mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row {
grid-template-columns: 1fr auto !important;
row-gap: 0.3rem;
align-items: start;
}
.mode-b-shell .crm-lead-namecell {
grid-column: 1 !important;
grid-row: 1 !important;
min-width: 0;
}
.mode-b-shell .crm-lead-row .crm-lead-card-name {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
.mode-b-shell .crm-lead-row .crm-lead-card-actions {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: center;
}
.mode-b-shell .crm-lead-col-phone {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
padding-left: 3.15rem;
}
.mode-b-shell .crm-lead-col-email {
grid-column: 1 / -1 !important;
grid-row: 3 !important;
padding-left: 3.15rem;
}
}
/* ==== end modeb-leads-mobile-v2 ==== */
/* ==== CRM Leads desktop columns: full name + tighter phone :: modeb-leads-cols-v3 (2026-09-02) ==== */
@media (min-width: 34.01rem) {
.mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row,
.mode-b-shell .crm-leads-list-head {
grid-template-columns: minmax(0, 1.95fr) minmax(0, 1.2fr) minmax(0, 1.35fr) 5.5rem !important;
}
.mode-b-shell .crm-lead-row .crm-lead-card-name {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
}
/* ==== end modeb-leads-cols-v3 ==== */
/* ==== CRM Leads phone: no overlap between number and icons :: modeb-leads-phone-v3 (2026-09-02) ==== */
.mode-b-shell .crm-lead-col-phone {
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-width: 0;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-num {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-acts {
flex: 0 0 auto;
margin-left: 0.1rem;
}
@media (min-width: 34.01rem) {
.mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row,
.mode-b-shell .crm-leads-list-head {
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.6fr) minmax(0, 1.25fr) 5.5rem !important;
}
}
/* ==== end modeb-leads-phone-v3 ==== */
/* ==== Toast messages -> top-right :: modeb-toast-topright (2026-09-02) ==== */
.toast-stack {
left: auto !important;
right: 0.9rem !important;
bottom: auto !important;
top: calc(0.9rem + env(safe-area-inset-top, 0px)) !important;
transform: none !important;
align-items: flex-end !important;
z-index: 90 !important;
}
/* ==== end modeb-toast-topright ==== */
/* ==== CRM Lead detail: compact layout :: modeb-lead-detail (2026-09-03) ==== */
.mode-b-shell .crm-lead-detail {
display: flex;
flex-direction: column;
gap: 0.55rem;
font-family: inherit;
}
.mode-b-shell .crm-lead-detail-bar {
display: grid;
grid-template-columns: 2rem 1fr 2rem;
align-items: center;
min-height: 1.85rem;
gap: 0.35rem;
}
.mode-b-shell .crm-lead-detail-bar-title {
margin: 0;
text-align: center;
font-family: inherit;
font-size: 1.05rem;
font-weight: 750;
letter-spacing: -0.02em;
color: #0f172a;
}
.mode-b-shell .crm-lead-detail-back {
width: 1.85rem !important;
height: 1.85rem !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #2563eb;
}
.mode-b-shell .crm-lead-detail-menu-wrap {
position: relative;
justify-self: end;
}
.mode-b-shell .crm-lead-detail-icon-btn {
width: 1.85rem;
height: 1.85rem;
border-radius: 0.45rem;
border: 0;
background: transparent;
color: #475569;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.mode-b-shell .crm-lead-detail-menu {
position: absolute;
right: 0;
top: 2.1rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.6rem;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
display: flex;
flex-direction: column;
min-width: 11rem;
z-index: 5;
overflow: hidden;
}
.mode-b-shell .crm-lead-detail-menu button {
text-align: left;
padding: 0.5rem 0.75rem;
background: none;
border: 0;
cursor: pointer;
font-size: 0.86rem;
color: #0f172a;
}
.mode-b-shell .crm-lead-detail-menu button:hover {
background: #f8fafc;
}
.mode-b-shell .crm-lead-profile-card {
display: grid;
grid-template-columns: 2.35rem minmax(0, 1fr) auto;
align-items: center;
gap: 0.65rem;
padding: 0.35rem 0 0.45rem;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
text-align: left;
}
.mode-b-shell .crm-lead-profile-avatar {
width: 2.35rem;
height: 2.35rem;
border-radius: 999px;
background: #eff6ff;
color: #1d4ed8;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.78rem;
font-weight: 750;
}
.mode-b-shell .crm-lead-profile-meta {
min-width: 0;
}
.mode-b-shell .crm-lead-profile-name {
margin: 0;
font-family: inherit;
font-size: 1rem;
font-weight: 750;
letter-spacing: -0.02em;
color: #0f172a;
line-height: 1.2;
}
.mode-b-shell .crm-lead-profile-sub {
margin: 0.12rem 0 0;
color: #64748b;
font-size: 0.78rem;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem;
}
.mode-b-shell .crm-lead-profile-card .crm-lead-status {
display: inline-block !important;
margin: 0;
background: #ecfdf5 !important;
color: #0f766e !important;
padding: 0.08rem 0.42rem;
border-radius: 999px;
font-size: 0.66rem;
font-weight: 700;
}
.mode-b-shell .crm-lead-convert-btn {
margin: 0;
display: inline-flex;
align-items: center;
padding: 0.32rem 0.65rem;
border-radius: 0.45rem;
border: 0;
background: #2563eb;
color: #fff;
font-size: 0.75rem;
font-weight: 650;
cursor: pointer;
white-space: nowrap;
}
.mode-b-shell .crm-lead-convert-btn:disabled {
opacity: 0.55;
}
.mode-b-shell .crm-lead-quick-actions {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
border-top: 1px solid #e8eef4;
border-bottom: 1px solid #e8eef4;
padding: 0.15rem 0;
}
.mode-b-shell .crm-lead-action {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.12rem;
min-height: 2.55rem;
padding: 0.3rem 0.1rem;
border-radius: 0;
border: 0;
background: transparent;
color: #334155;
text-decoration: none;
font-size: 0.65rem;
font-weight: 600;
cursor: pointer;
}
.mode-b-shell .crm-lead-action svg {
color: #2563eb;
width: 0.95rem;
height: 0.95rem;
}
.mode-b-shell .crm-lead-action:hover:not(:disabled) {
background: #f8fafc;
color: #1e3a8a;
}
.mode-b-shell .crm-lead-action:disabled {
opacity: 0.4;
cursor: default;
}
.mode-b-shell .crm-lead-info-card,
.mode-b-shell .crm-lead-timeline-card {
padding: 0.35rem 0 0;
border-radius: 0;
background: transparent;
border: 0;
box-shadow: none;
}
.mode-b-shell .crm-lead-section-title {
margin: 0 0 0.25rem;
font-family: inherit;
font-size: 0.7rem;
font-weight: 750;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #94a3b8;
}
.mode-b-shell .crm-lead-info-list {
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin: 0;
}
.mode-b-shell .crm-lead-info-list > div {
display: grid;
grid-template-columns: 6.2rem minmax(0, 1fr);
align-items: baseline;
gap: 0.55rem;
min-width: 0;
padding: 0.32rem 0;
border-bottom: 1px solid #eef2f6;
}
.mode-b-shell .crm-lead-info-list dt {
font-size: 0.72rem;
text-transform: none;
letter-spacing: 0;
color: #64748b;
font-weight: 550;
}
.mode-b-shell .crm-lead-info-list dd {
margin: 0;
font-size: 0.82rem;
font-weight: 600;
color: #0f172a;
word-break: break-word;
}
.mode-b-shell .crm-lead-info-assignee {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.mode-b-shell .crm-lead-assignee-avatar {
width: 1.15rem;
height: 1.15rem;
border-radius: 999px;
background: #eff6ff;
color: #1d4ed8;
font-size: 0.5rem;
font-weight: 750;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mode-b-shell .crm-lead-tags {
display: flex;
flex-wrap: wrap;
gap: 0.28rem;
margin-top: 0.4rem;
}
.mode-b-shell .crm-lead-tag {
padding: 0.1rem 0.4rem;
border-radius: 999px;
background: #f1f5f9;
color: #334155;
font-size: 0.68rem;
font-weight: 650;
}
.mode-b-shell .crm-lead-notes {
margin: 0;
font-size: 0.82rem;
line-height: 1.4;
color: #334155;
white-space: pre-wrap;
}
.mode-b-shell .crm-lead-timeline {
list-style: none;
margin: 0;
padding: 0 0 0 0.7rem;
border-left: 1px solid #e8eef5;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.mode-b-shell .crm-lead-timeline li {
position: relative;
}
.mode-b-shell .crm-lead-timeline-dot {
position: absolute;
left: -0.95rem;
top: 0.28rem;
width: 0.38rem;
height: 0.38rem;
border-radius: 999px;
background: #cbd5e1;
box-shadow: 0 0 0 2px #fff;
}
.mode-b-shell .crm-lead-timeline li[data-first='true'] .crm-lead-timeline-dot {
background: #2563eb;
}
.mode-b-shell .crm-lead-timeline-body {
display: flex;
flex-direction: column;
gap: 0.05rem;
}
.mode-b-shell .crm-lead-timeline-body time {
font-size: 0.68rem;
color: #94a3b8;
}
.mode-b-shell .crm-lead-timeline-body strong {
font-size: 0.82rem;
font-weight: 650;
color: #0f172a;
}
.mode-b-shell .crm-lead-timeline-empty {
margin: 0;
font-size: 0.82rem;
}
/* ==== end modeb-lead-detail ==== */
/* ==== CRM Leads filter popup (bottom sheet) :: modeb-filter-sheet (2026-09-02) ==== */
.sheet .crm-leads-filters-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6rem;
padding: 0;
border: 0;
background: transparent;
}
.sheet .crm-leads-filters-grid select,
.sheet .crm-leads-filters-grid input[type="date"] {
width: 100%;
padding: 0.65rem 0.7rem;
border: 1px solid #dbe3f0;
border-radius: 0.7rem;
background: #fff;
color: #0f172a;
font-size: 0.9rem;
}
.sheet .crm-leads-filters-grid .crm-leads-filters-row {
grid-column: 1 / -1;
display: flex;
gap: 0.6rem;
align-items: center;
}
.crm-leads-filter-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: 1rem;
}
.crm-leads-filter-actions .primary-btn {
width: auto;
min-width: 8rem;
padding: 0.7rem 1.4rem;
}
/* ==== end modeb-filter-sheet ==== */
/* ==== CRM Leads filter modern card :: modeb-crm-filter-modern (2026-09-03) ==== */
.overlay.overlay-crm-filter {
align-items: center;
padding: 1.25rem 0.9rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
background: rgba(15, 23, 42, 0.42);
backdrop-filter: blur(8px);
}
.sheet.sheet-crm-filter {
width: min(22.5rem, 100%);
border-radius: 1.45rem;
padding: 0.7rem 1rem 1rem;
gap: 0.85rem;
box-shadow: 0 28px 64px rgba(15, 23, 42, 0.22);
}
.sheet.sheet-crm-filter .sheet-handle {
width: 2.1rem;
height: 0.22rem;
background: #e2e8f0;
margin-bottom: 0.45rem;
}
.sheet.sheet-crm-filter .sheet-head h2 {
font-size: 1.15rem;
font-weight: 750;
color: #0f172a;
}
.sheet.sheet-crm-filter .sheet-body {
overflow: visible;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.crm-filter-panel {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.crm-filter-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem 0.65rem;
}
.crm-filter-field {
display: flex;
flex-direction: column;
gap: 0.32rem;
min-width: 0;
color: #64748b;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.crm-filter-field-wide {
width: 100%;
}
.crm-filter-control {
position: relative;
display: block;
}
.crm-filter-control select,
.crm-filter-control input[type="search"],
.crm-filter-control input[type="date"] {
width: 100%;
appearance: none;
-webkit-appearance: none;
border: 1px solid #e8eef6;
background: #f8fafc;
color: #0f172a;
border-radius: 0.9rem;
padding: 0.72rem 2rem 0.72rem 0.85rem;
font: inherit;
font-size: 0.86rem;
font-weight: 650;
box-shadow: inset 0 1px 0 #fff;
}
.crm-filter-control select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.7rem center;
background-size: 0.95rem;
}
.crm-filter-control select:focus,
.crm-filter-control input[type="search"]:focus,
.crm-filter-control input[type="date"]:focus {
outline: none;
border-color: #93c5fd;
background-color: #fff;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.crm-filter-switch-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 0.85rem;
border-radius: 1rem;
background: #f8fafc;
border: 1px solid #eef2f7;
}
.crm-filter-switch-row strong {
display: block;
font-size: 0.9rem;
font-weight: 700;
color: #0f172a;
}
.crm-filter-switch-row em {
display: block;
font-style: normal;
font-size: 0.72rem;
color: #94a3b8;
}
.crm-filter-switch {
width: 2.6rem;
height: 1.5rem;
border: 0;
border-radius: 999px;
background: #cbd5e1;
position: relative;
cursor: pointer;
flex: 0 0 auto;
}
.crm-filter-switch::after {
content: "";
position: absolute;
top: 0.16rem;
left: 0.16rem;
width: 1.18rem;
height: 1.18rem;
border-radius: 999px;
background: #fff;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
transition: transform 0.16s ease;
}
.crm-filter-switch.on {
background: #2563eb;
}
.crm-filter-switch.on::after {
transform: translateX(1.1rem);
}
.crm-filter-footer {
display: flex;
align-items: center;
gap: 0.65rem;
}
.crm-filter-clear {
flex: 0 0 auto;
border: 0;
background: transparent;
color: #2563eb;
font: inherit;
font-weight: 700;
font-size: 0.88rem;
padding: 0.55rem 0.2rem;
cursor: pointer;
}
.crm-filter-apply {
flex: 1 1 auto;
border: 0;
border-radius: 999px;
background: #2563eb;
color: #fff;
font: inherit;
font-weight: 750;
font-size: 0.92rem;
padding: 0.78rem 1rem;
cursor: pointer;
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.22);
}
.crm-more-list {
padding: 0.15rem 0 0.4rem;
}
a.crm-more-link {
text-decoration: none;
color: inherit;
cursor: pointer;
}
a.crm-more-link:hover {
background: #f8fafc;
}
/* ==== end modeb-crm-filter-modern ==== */
/* ==== CRM Leads table card UI (screenshot) :: modeb-leads-table-card (2026-09-03) ==== */
.sa-form[data-screen="crm-leads-list"] > .sa-form-head {
margin-bottom: 0.75rem !important;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-head h1 {
font-family: var(--serif) !important;
font-size: 1.7rem !important;
font-weight: 650 !important;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.mode-b-shell .sa-form[data-screen="crm-leads-list"] > .sa-form-body {
background: #eef5fb !important;
border: 1px solid #e4eef7 !important;
box-shadow: 0 16px 40px rgba(18, 32, 43, 0.06) !important;
border-radius: 1.5rem !important;
padding: 1rem !important;
gap: 0.75rem !important;
}
.sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.mode-b-shell .crm-leads-list {
gap: 0.55rem !important;
}
.sa-form[data-screen="crm-leads-list"] .crm-lead-card,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card.crm-lead-row,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card[data-tone],
.mode-b-shell .crm-leads-list .crm-lead-card,
.mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row,
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="new"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="contacted"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="qualified"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="muted"] {
padding: 0.8rem 0.85rem !important;
border: 1px solid #eef2f7 !important;
border-radius: 1rem !important;
box-shadow: none !important;
background: #ffffff !important;
}
.sa-form[data-screen="crm-leads-list"] .crm-leads-list > li:hover .crm-lead-card,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card:hover,
.mode-b-shell .crm-leads-list > li:hover .crm-lead-card,
.mode-b-shell .crm-leads-list .crm-lead-card:hover {
background: #ffffff !important;
}
.sa-form[data-screen="crm-leads-list"] .crm-leads-list-head,
.mode-b-shell .crm-leads-list-head {
padding: 0.15rem 0.9rem 0.45rem !important;
}
.sa-form[data-screen="crm-leads-list"] .crm-lead-avatar,
.mode-b-shell .crm-leads-list .crm-lead-avatar {
width: 2.45rem;
height: 2.45rem;
font-size: 0.75rem;
background: #e8eef8;
color: #1d4ed8;
}
.mode-b-shell .crm-leads-toolbar {
gap: 0.55rem;
}
.mode-b-shell .crm-leads-actions-icons {
gap: 0.55rem !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only,
.mode-b-shell .crm-leads-search-toggle {
width: 2.65rem !important;
height: 2.65rem !important;
border-radius: 999px !important;
box-shadow: none !important;
}
.mode-b-shell .crm-leads-search-toggle {
border: 1px solid #e5e7eb !important;
background: #fff !important;
color: #2563eb !important;
}
.mode-b-shell .crm-leads-search-toggle.active,
.mode-b-shell .crm-leads-search-toggle:hover {
background: #eff6ff !important;
border-color: #bfdbfe !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="add"] {
background: #2563eb !important;
border: 1px solid #2563eb !important;
color: #fff !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="import"] {
background: color-mix(in srgb, #16a34a 12%, #fff) !important;
border: 1px solid color-mix(in srgb, #16a34a 35%, #fff) !important;
color: #15803d !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="export"] {
background: color-mix(in srgb, #ea580c 12%, #fff) !important;
border: 1px solid color-mix(in srgb, #ea580c 35%, #fff) !important;
color: #c2410c !important;
}
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-kind="edit"],
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-kind="edit"] svg {
color: #2563eb !important;
}
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="convert"],
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="convert"] svg {
color: #2563eb !important;
}
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="danger"],
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="danger"] svg {
color: #dc2626 !important;
}
.mode-b-shell .crm-lead-col-email,
.mode-b-shell .crm-lead-col-email svg {
color: #6b7db3 !important;
}
.mode-b-shell .crm-lead-card-company svg {
color: #8a90a0 !important;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.call,
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.call svg {
color: #3d7ea6 !important;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.wa,
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.wa svg {
color: #3d9a6e !important;
}
.mode-b-shell .crm-lead-quick-actions {
padding: 0.05rem 0;
}
.mode-b-shell .crm-lead-action {
min-height: 2.35rem;
gap: 0.08rem;
padding: 0.22rem 0.08rem;
color: #64748b;
}
.mode-b-shell .crm-lead-action[data-kind="edit"],
.mode-b-shell .crm-lead-action[data-kind="edit"] svg { color: #3d7ea6; }
.mode-b-shell .crm-lead-action[data-kind="assign"],
.mode-b-shell .crm-lead-action[data-kind="assign"] svg { color: #4f8f78; }
.mode-b-shell .crm-lead-action[data-kind="note"],
.mode-b-shell .crm-lead-action[data-kind="note"] svg { color: #b08948; }
.mode-b-shell .crm-lead-action[data-kind="task"],
.mode-b-shell .crm-lead-action[data-kind="task"] svg { color: #6d74a8; }
.mode-b-shell .crm-lead-action[data-kind="call"],
.mode-b-shell .crm-lead-action[data-kind="call"] svg { color: #3d9a8f; }
.mode-b-shell .crm-lead-action[data-kind="meeting"],
.mode-b-shell .crm-lead-action[data-kind="meeting"] svg { color: #c47a5a; }
.mode-b-shell .crm-lead-action[data-kind="file"],
.mode-b-shell .crm-lead-action[data-kind="file"] svg { color: #5f7e9b; }
.mode-b-shell .crm-lead-action[data-kind="email"],
.mode-b-shell .crm-lead-action[data-kind="email"] svg { color: #8a6aa8; }
.mode-b-shell .crm-lead-action svg { color: inherit; }
.mode-b-shell .crm-lead-info-list > div {
padding: 0.22rem 0;
}
.mode-b-shell .crm-lead-detail {
gap: 0.4rem;
}
/* ==== end modeb-leads-compact-v2 ==== */
/* ==== Leads list: new flat markup (does not fight old card CSS) :: modeb-leads-flat (2026-09-03) ==== */
.sa-form.crm-leads-flat {
gap: 0.35rem !important;
}
.sa-form.crm-leads-flat > .sa-form-head {
align-items: center;
margin-bottom: 0.15rem !important;
gap: 0.5rem;
}
.sa-form.crm-leads-flat > .sa-form-head .sa-form-pict {
display: none !important;
}
.sa-form.crm-leads-flat > .sa-form-head .sa-form-titles h1 {
font-family: inherit !important;
font-size: 1.12rem !important;
font-weight: 750 !important;
letter-spacing: -0.02em;
color: #0f172a;
}
.sa-form.crm-leads-flat > .sa-form-body {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
gap: 0.35rem !important;
}
.sa-form.crm-leads-flat .crm-leads-title-actions .crm-leads-icon-btn {
width: 1.85rem;
height: 1.85rem;
border: 0;
background: transparent;
border-radius: 0.4rem;
}
.sa-form.crm-leads-flat .crm-leads-toolbar {
display: flex;
align-items: center;
gap: 0.25rem;
}
.sa-form.crm-leads-flat .crm-leads-ghost {
width: 1.9rem;
height: 1.9rem;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
border-radius: 0.4rem;
color: #5b6b82;
cursor: pointer;
text-decoration: none;
flex: 0 0 auto;
}
.sa-form.crm-leads-flat .crm-leads-ghost[data-kind="add"] { color: #3d7ea6; }
.sa-form.crm-leads-flat .crm-leads-ghost[data-kind="import"] { color: #4f8f78; }
.sa-form.crm-leads-flat .crm-leads-ghost[data-kind="export"] { color: #c47a5a; }
.sa-form.crm-leads-flat .crm-leads-ghost.active,
.sa-form.crm-leads-flat .crm-leads-ghost:hover {
background: #f1f5f9;
}
.sa-form.crm-leads-flat .crm-leads-list {
gap: 0 !important;
}
.sa-form.crm-leads-flat .crm-lead-line,
.sa-form.crm-leads-flat .crm-lead-card.crm-lead-line {
padding: 0.3rem 0 !important;
margin: 0 !important;
border: 0 !important;
border-bottom: 1px solid #e8eef3 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.sa-form.crm-leads-flat .crm-lead-line:hover {
background: #f8fafc !important;
}
.sa-form.crm-leads-flat .crm-leads-list-head {
padding: 0 0 0.25rem !important;
}
.sa-form.crm-leads-flat .crm-lead-avatar {
width: 1.8rem !important;
height: 1.8rem !important;
font-size: 0.62rem !important;
}
.sa-form.crm-leads-flat .crm-lead-action-btn[data-kind="edit"] { color: #3d7ea6 !important; }
.sa-form.crm-leads-flat .crm-lead-action-btn[data-tone="convert"] { color: #4f8f78 !important; }
.sa-form.crm-leads-flat .crm-lead-action-btn[data-tone="danger"] { color: #c45c5c !important; }
/* ==== end modeb-leads-flat ==== */
/* ==== Contacts page stacked rows + unique action colors :: modeb-contacts-actions (2026-09-03) ==== */
.sa-form[data-screen="crm-contacts-list"] > .sa-form-head .sa-form-pict {
display: none;
}
.sa-form[data-screen="crm-contacts-list"] > .sa-form-head h1 {
font-family: inherit;
font-size: 1.15rem;
font-weight: 750;
}
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
background: #e8f1fa;
border: 0;
box-shadow: none;
border-radius: 0;
padding: 0.35rem 0 1rem;
}
.crm-contacts-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.crm-contact-row {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
padding: 0.55rem 0.45rem 0.5rem;
border-bottom: 1px solid #d5e4f2;
background: #e8f1fa;
border-radius: 0.7rem;
}
.crm-contact-row:nth-child(even),
.crm-contacts-list > li:nth-child(even) .crm-contact-row {
background: #e8f1fa;
}
.crm-contacts-list > li:nth-child(odd) .crm-contact-row {
background: #e8f1fa;
}
.crm-contacts-list > li {
list-style: none;
}
.crm-contact-row-main {
display: grid;
grid-template-columns: 2.2rem minmax(0, 1fr);
gap: 0.6rem;
text-decoration: none;
color: inherit;
min-width: 0;
flex: 1 1 12rem;
}
.crm-contact-row-avatar {
width: 2rem;
height: 2rem;
border-radius: 999px;
background: #eef4fb;
color: #3d7ea6;
font-size: 0.68rem;
font-weight: 750;
display: inline-flex;
align-items: center;
justify-content: center;
}
.crm-contact-row-copy {
display: flex;
flex-direction: column;
gap: 0.18rem;
min-width: 0;
}
.crm-contact-row-title {
display: flex;
align-items: center;
justify-content: flex-start;
min-width: 0;
width: 100%;
min-height: 1.25rem;
}
.crm-contact-row-name {
position: relative;
z-index: 1;
font-size: 0.95rem;
font-weight: 750;
color: #0f172a;
flex: 0 1 auto;
min-width: 0;
max-width: min(42%, 12rem);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
/* Center email in the full people row (not beside the name). */
.crm-contact-row-email {
position: absolute;
left: 50%;
top: 0.65rem;
transform: translateX(-50%);
z-index: 2;
width: auto;
max-width: min(18rem, 42%);
margin: 0;
justify-content: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
}
.crm-contact-row-copy .crm-contact-row-line {
width: 100%;
max-width: 100%;
margin-left: 0;
justify-content: flex-start;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crm-contact-row-meta {
display: inline-flex;
align-items: center;
gap: 0.28rem;
font-size: 0.75rem;
color: #64748b;
}
.crm-contact-row-line {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
color: #475569;
min-width: 0;
}
.crm-contact-row-line[data-kind="email"] { color: #6b7db3; }
.crm-contact-row-line[data-kind="phone"] { color: #3d7ea6; }
.crm-contact-row-line svg { flex: 0 0 auto; }
.crm-contact-row-phone-acts {
display: inline-flex;
align-items: center;
gap: 0.1rem;
margin-left: 0.15rem;
}
.crm-contact-row-actions {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 0.12rem;
flex: 0 0 auto;
margin-left: auto;
min-width: max-content;
overflow: visible;
}
@media (max-width: 36rem) {
.crm-contact-row-name {
max-width: 100%;
}
.crm-contact-row-email {
position: static;
left: auto;
top: auto;
transform: none;
max-width: 100%;
width: 100%;
order: 2;
justify-content: flex-start;
pointer-events: auto;
padding-left: 2.8rem;
margin-top: -0.1rem;
}
.crm-contact-row-main {
order: 1;
flex: 1 1 100%;
}
.crm-contact-row-actions {
order: 3;
}
}
@media (max-width: 30rem) {
.crm-contact-row-actions {
flex: 1 1 100%;
justify-content: flex-start;
margin-left: 0;
padding-left: 2.6rem;
}
}
.crm-contact-act {
width: 2.05rem;
height: 2.05rem;
padding: 0;
border: 0;
background: transparent;
border-radius: 0.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #475569;
flex: 0 0 auto;
}
.crm-contact-act svg {
width: 1.25rem;
height: 1.25rem;
}
.crm-contact-act:hover:not(:disabled) { background: #f1f5f9; }
.crm-contact-act:disabled { opacity: 0.35; cursor: default; }
.crm-contact-act[data-kind="call"] { color: #3d7ea6; }
.crm-contact-act[data-kind="whatsapp"] { color: #3d9a6e; }
.crm-contact-act[data-kind="appointment"] { color: #3d7ea6; }
.crm-contact-act[data-kind="reminder"] { color: #c49a3c; }
.crm-contact-act[data-kind="deal"] { color: #6d74a8; }
.crm-contact-act[data-kind="task"] { color: #4f8f78; }
.crm-contact-act[data-kind="customer"] { color: #8a6aa8; }
.crm-contact-act[data-kind="edit"] { color: #5f7e9b; }
.crm-contact-act[data-kind="delete"] { color: #c45c5c; }
/* ==== end modeb-contacts-actions ==== */
/* ==== Leads page stacked style (screenshot) :: modeb-leads-stack (2026-09-03) ==== */
.sa-form.crm-leads-stack > .sa-form-head .sa-form-titles h1 {
font-size: 1.35rem !important;
color: #0f2744 !important;
}
.sa-form.crm-leads-stack .crm-leads-search-wrap .crm-leads-ghost,
.sa-form.crm-leads-stack .crm-leads-ghost {
width: 2.15rem;
height: 2.15rem;
border-radius: 999px;
}
.sa-form.crm-leads-stack .crm-leads-ghost[data-kind="add"] {
background: #2563eb !important;
color: #fff !important;
}
.sa-form.crm-leads-stack .crm-leads-ghost[data-kind="import"] {
background: #ecfdf5 !important;
color: #0d9488 !important;
}
.sa-form.crm-leads-stack .crm-leads-ghost[data-kind="export"] {
background: #fff7ed !important;
color: #ea580c !important;
}
.sa-form.crm-leads-stack .crm-lead-stack-row {
padding: 0.7rem 0 0.55rem;
}
.sa-form.crm-leads-stack .crm-contact-row-name {
color: #0f2744;
font-size: 1rem;
}
.sa-form.crm-leads-stack .crm-contact-row-actions {
gap: 0.12rem;
padding-left: 0;
}
.sa-form.crm-leads-stack .crm-contact-act {
width: 2.05rem;
height: 2.05rem;
}
.sa-form.crm-leads-stack .crm-contact-act[data-kind="appointment"] { color: #3b82f6; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="reminder"] { color: #eab308; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="deal"] { color: #2563eb; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="task"] { color: #14b8a6; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="customer"] { color: #8b5cf6; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="edit"] { color: #64748b; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="delete"] { color: #ef4444; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="call"] { color: #3b82f6; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="whatsapp"] { color: #22c55e; }
/* ==== end modeb-leads-stack ==== */
/* ==== Lead details card layout + unique icon colors :: modeb-lead-detail-v2 (2026-09-03) ==== */
.mode-b-shell main:has([data-screen="crm-lead-detail"]) {
background: #f4f6f9 !important;
}
.sa-form[data-screen="crm-lead-detail"] > .sa-form-body,
.mode-b-shell .sa-form[data-screen="crm-lead-detail"] > .sa-form-body {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
.crm-lead-detail-v2 {
gap: 0.75rem !important;
}
.crm-lead-detail-v2 .crm-lead-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
align-items: start;
}
.crm-lead-detail-v2 .crm-lead-profile-card,
.crm-lead-detail-v2 .crm-lead-info-card,
.crm-lead-detail-v2 .crm-lead-timeline-card,
.crm-lead-detail-v2 .crm-lead-side-card {
background: #fff !important;
border: 1px solid #eef2f7 !important;
border-radius: 1rem !important;
box-shadow: 0 10px 28px rgba(18, 32, 43, 0.05) !important;
padding: 1rem 1.05rem !important;
}
.crm-lead-detail-v2 .crm-lead-profile-card {
display: grid;
grid-template-columns: 3.1rem minmax(0, 1fr);
gap: 0.75rem 0.85rem;
align-items: start;
}
.crm-lead-detail-v2 .crm-lead-profile-avatar {
width: 3.1rem !important;
height: 3.1rem !important;
font-size: 0.95rem !important;
background: #e8eef8 !important;
color: #2563eb !important;
}
.crm-lead-detail-v2 .crm-lead-profile-name {
font-size: 1.2rem !important;
font-weight: 750 !important;
margin: 0 0 0.4rem !important;
}
.crm-lead-detail-v2 .crm-lead-badges {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-bottom: 0.55rem;
}
.crm-lead-detail-v2 .crm-lead-chip {
display: inline-flex;
align-items: center;
padding: 0.16rem 0.5rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
line-height: 1.2;
}
.crm-lead-detail-v2 .crm-lead-chip[data-tone="new"] { background: #ede9fe; color: #6d28d9; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="contacted"] { background: #fef3c7; color: #b45309; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="qualified"] { background: #dcfce7; color: #15803d; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="muted"] { background: #f1f5f9; color: #475569; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="priority"] { background: #fef9c3; color: #a16207; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="converted"] { background: #dcfce7; color: #166534; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="job"] { background: #e0f2fe; color: #0369a1; }
.crm-lead-detail-v2 .crm-lead-contact-lines {
display: flex;
flex-direction: column;
gap: 0.28rem;
}
.crm-lead-detail-v2 .crm-lead-contact-line {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.82rem;
color: #475569;
text-decoration: none;
min-width: 0;
}
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="email"],
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="email"] svg { color: #2563eb; }
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="phone"],
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="phone"] svg { color: #0d9488; }
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="company"],
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="company"] svg { color: #7c3aed; }
.crm-lead-detail-v2 .crm-lead-quick-actions {
grid-column: 1 / -1;
display: flex !important;
flex-wrap: wrap;
gap: 0.4rem !important;
border: 0 !important;
padding: 0.15rem 0 0 !important;
}
.crm-lead-detail-v2 .crm-lead-action {
min-height: 0 !important;
flex-direction: column;
width: 3.2rem;
gap: 0.18rem !important;
padding: 0.35rem 0.1rem !important;
border-radius: 0.75rem !important;
font-size: 0.62rem !important;
}
.crm-lead-detail-v2 .crm-lead-action[data-kind="edit"] { color: #2563eb !important; background: color-mix(in srgb, #2563eb 10%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="assign"] { color: #7c3aed !important; background: color-mix(in srgb, #7c3aed 10%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="note"] { color: #ca8a04 !important; background: color-mix(in srgb, #ca8a04 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="task"] { color: #0891b2 !important; background: color-mix(in srgb, #0891b2 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="call"] { color: #0d9488 !important; background: color-mix(in srgb, #0d9488 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="meeting"] { color: #ea580c !important; background: color-mix(in srgb, #ea580c 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="file"] { color: #64748b !important; background: color-mix(in srgb, #64748b 10%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="email"] { color: #4f46e5 !important; background: color-mix(in srgb, #4f46e5 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action svg { color: inherit !important; }
.crm-lead-detail-v2 .crm-lead-section-title {
font-size: 0.95rem !important;
font-weight: 750 !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
color: #0f172a !important;
margin: 0 0 0.7rem !important;
}
.crm-lead-detail-v2 .crm-lead-facts {
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem 0.75rem;
}
.crm-lead-detail-v2 .crm-lead-facts > div {
display: flex;
align-items: flex-start;
gap: 0.6rem;
min-width: 0;
padding: 0.7rem 0.75rem;
border-radius: 0.85rem;
background: #f8fafc;
}
.crm-lead-detail-v2 .crm-lead-facts > div > div {
min-width: 0;
}
.crm-lead-detail-v2 .crm-lead-fact-icon {
flex: 0 0 auto;
width: 2rem;
height: 2rem;
border-radius: 0.65rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
}
.crm-lead-detail-v2 .crm-lead-facts dt {
margin: 0;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #94a3b8;
}
.crm-lead-detail-v2 .crm-lead-facts dd {
margin: 0.12rem 0 0;
font-size: 0.95rem;
font-weight: 700;
color: #0f172a;
line-height: 1.3;
word-break: break-word;
}
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="source"] .crm-lead-fact-icon { color: #2563eb; background: color-mix(in srgb, #2563eb 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="status"] .crm-lead-fact-icon { color: #7c3aed; background: color-mix(in srgb, #7c3aed 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="priority"] .crm-lead-fact-icon { color: #ca8a04; background: color-mix(in srgb, #ca8a04 14%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="assigned"] .crm-lead-fact-icon { color: #0d9488; background: color-mix(in srgb, #0d9488 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="created"] .crm-lead-fact-icon { color: #ea580c; background: color-mix(in srgb, #ea580c 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="converted"] .crm-lead-fact-icon { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="tags"] .crm-lead-fact-icon { color: #4f46e5; background: color-mix(in srgb, #4f46e5 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="tags"] {
grid-column: 1 / -1;
}
.crm-lead-detail-v2 .crm-lead-notes {
color: #64748b !important;
font-size: 0.88rem !important;
line-height: 1.45;
}
.crm-lead-detail-v2 .crm-lead-timeline {
border: 0 !important;
padding: 0 !important;
gap: 0.7rem !important;
}
.crm-lead-detail-v2 .crm-lead-timeline li {
padding: 0.15rem 0 0.15rem 0.75rem;
border-left: 3px solid #cbd5e1;
}
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="task"] { border-left-color: #38bdf8; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="email"] { border-left-color: #4ade80; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="note"] { border-left-color: #fbbf24; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="call"] { border-left-color: #2dd4bf; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="meeting"] { border-left-color: #fb923c; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="status"] { border-left-color: #a78bfa; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="default"] { border-left-color: #94a3b8; }
.crm-lead-detail-v2 .crm-lead-timeline-dot { display: none; }
.crm-lead-detail-v2 .crm-lead-timeline-body strong {
font-size: 0.9rem;
display: block;
}
.crm-lead-detail-v2 .crm-lead-timeline-body time {
display: block;
margin-top: 0.15rem;
}
/* ==== end modeb-lead-detail-v2 ==== */
/* ==== Header profile menu + profile page :: modeb-user-profile (2026-09-03) ==== */
.user-menu-panel.user-menu-card {
min-width: 16.5rem;
padding: 0.55rem;
gap: 0.4rem;
}
.user-menu-profile {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.28rem;
padding: 0.85rem 0.7rem 0.75rem;
text-decoration: none;
color: inherit;
border-radius: 0.85rem;
background: #f8fafc;
text-align: center;
}
.user-menu-profile:hover {
background: #eef4fb;
}
.user-menu-profile strong {
font-size: 0.95rem;
font-weight: 750;
color: #0f172a;
}
.user-menu-profile span {
font-size: 0.75rem;
color: #64748b;
word-break: break-all;
}
.user-menu-list {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding-top: 0.15rem;
}
.user-menu-card .user-menu-item {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.7rem 0.75rem;
font-weight: 650;
font-size: 0.9rem;
}
.user-menu-card .user-menu-item svg {
color: #2563eb;
flex: 0 0 auto;
}
.user-menu-card .user-menu-logout svg {
color: #dc2626;
}
.sa-form[data-screen="user-profile"] > .sa-form-head .sa-form-pict,
.sa-form[data-screen="user-profile"] > .sa-form-head h1 {
display: none;
}
.sa-form[data-screen="user-profile"] > .sa-form-body {
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
}
.user-profile-page {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.user-profile-bar {
display: grid;
grid-template-columns: 2.2rem 1fr 2.2rem;
align-items: center;
}
.user-profile-bar h2 {
margin: 0;
text-align: center;
font-size: 1.1rem;
font-weight: 750;
color: #0f172a;
}
.user-profile-hero {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
padding: 1.25rem 1rem;
background: #fff;
border: 1px solid #eef2f7;
border-radius: 1.1rem;
box-shadow: 0 10px 28px rgba(18, 32, 43, 0.05);
text-align: center;
}
.user-profile-hero strong {
font-size: 1.15rem;
font-weight: 750;
color: #0f172a;
}
.user-profile-hero span {
font-size: 0.85rem;
color: #64748b;
word-break: break-all;
}
.user-profile-hero em {
font-style: normal;
font-size: 0.75rem;
color: #94a3b8;
}
.user-profile-menu {
list-style: none;
margin: 0;
padding: 0.35rem;
background: #fff;
border: 1px solid #eef2f7;
border-radius: 1.1rem;
box-shadow: 0 10px 28px rgba(18, 32, 43, 0.05);
}
.user-profile-menu a,
.user-profile-menu button {
display: flex;
align-items: center;
gap: 0.65rem;
width: 100%;
padding: 0.85rem 0.8rem;
border: 0;
background: transparent;
border-radius: 0.8rem;
text-decoration: none;
color: #0f172a;
font: inherit;
font-weight: 650;
text-align: left;
cursor: pointer;
}
.user-profile-menu a:hover,
.user-profile-menu button:hover {
background: #f8fafc;
}
.user-profile-menu a svg { color: #2563eb; }
.user-profile-menu button svg { color: #dc2626; }
/* ==== end modeb-user-profile ==== */
/* ==== Settings More page toggles :: modeb-crm-page-settings (2026-09-03) ==== */
.sa-form[data-screen="crm-page-settings"] > .sa-form-head h1 {
font-family: var(--serif);
}
.crm-page-toggle-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.crm-page-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 0.9rem;
background: #fff;
border: 1px solid #eef2f7;
border-radius: 1.15rem;
box-shadow: 0 10px 24px rgba(18, 32, 43, 0.05);
}
.crm-page-toggle-main {
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
}
.crm-page-toggle-main .pict {
width: 2.4rem;
height: 2.4rem;
border-radius: 0.75rem;
display: grid;
place-items: center;
background: var(--purple-soft);
color: var(--purple);
flex: 0 0 auto;
}
.crm-page-toggle-main strong {
display: block;
font-family: var(--serif);
font-size: 1.02rem;
color: var(--brand-ink);
}
.crm-page-toggle-main em {
display: block;
font-style: normal;
font-size: 0.75rem;
color: #94a3b8;
}
.crm-page-toggle-actions {
display: flex;
gap: 0.35rem;
flex: 0 0 auto;
}
.crm-page-toggle-actions button {
border: 1px solid #e2e8f0;
background: #f8fafc;
color: #64748b;
border-radius: 999px;
padding: 0.38rem 0.7rem;
font: inherit;
font-size: 0.72rem;
font-weight: 700;
cursor: pointer;
}
.crm-page-toggle-actions button.is-active {
background: #dcfce7;
border-color: #86efac;
color: #166534;
}
.crm-page-toggle-actions button.is-inactive {
background: #fee2e2;
border-color: #fca5a5;
color: #991b1b;
}
/* ==== end modeb-crm-page-settings ==== */
/* ==== Leads import popup :: modeb-lead-import (2026-09-03) ==== */
.sheet.sheet-lead-import {
width: min(36rem, 100%);
}
.lead-import {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.lead-import-help {
margin: 0;
font-size: 0.82rem;
line-height: 1.45;
color: #475569;
}
.lead-import-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.lead-import-ghost {
border: 1px solid #93c5fd;
background: #fff;
color: #1d4ed8;
border-radius: 0.7rem;
padding: 0.5rem 0.8rem;
font: inherit;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
}
.lead-import-field select,
.lead-import-defaults select,
.lead-import-defaults input {
width: 100%;
border: 1px solid #dbe3f0;
border-radius: 0.7rem;
padding: 0.55rem 0.7rem;
background: #fff;
font: inherit;
font-size: 0.85rem;
color: #0f172a;
}
.lead-import-file {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.8rem;
color: #64748b;
}
.lead-import-file span {
border: 0;
border-radius: 0.7rem;
background: #e2e8f0;
color: #0f172a;
padding: 0.5rem 0.75rem;
font-weight: 700;
cursor: pointer;
}
.lead-import-file input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.lead-import-file em {
font-style: normal;
}
.lead-import-defaults {
margin: 0;
padding: 0.75rem 0.85rem 0.9rem;
border: 1px solid #e2e8f0;
border-radius: 0.9rem;
}
.lead-import-defaults legend {
padding: 0 0.25rem;
font-size: 0.85rem;
font-weight: 750;
color: #0f172a;
}
.lead-import-defaults p {
margin: 0 0 0.7rem;
font-size: 0.72rem;
color: #64748b;
line-height: 1.4;
}
.lead-import-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem 0.75rem;
}
.lead-import-grid label {
display: flex;
flex-direction: column;
gap: 0.28rem;
font-size: 0.75rem;
font-weight: 700;
color: #334155;
}
.lead-import-label {
display: inline-flex;
align-items: center;
gap: 0.2rem;
color: #334155;
}
.lead-import-req {
color: #dc2626;
font-weight: 750;
line-height: 1;
}
.lead-import-custom-source {
grid-column: 1 / -1;
}
.lead-import-actions {
display: flex;
justify-content: flex-end;
gap: 0.55rem;
}
.lead-import-submit {
border: 0;
border-radius: 0.7rem;
background: #2563eb;
color: #fff;
font: inherit;
font-weight: 750;
font-size: 0.88rem;
padding: 0.55rem 1.15rem;
cursor: pointer;
}
.lead-import-submit:disabled {
opacity: 0.55;
cursor: not-allowed;
}
@media (max-width: 32rem) {
.lead-import-grid {
grid-template-columns: 1fr;
}
}
/* ==== end modeb-lead-import ==== */
/* ==== People lists mild light-blue canvas :: modeb-contacts-list-blue (2026-09-08) ==== */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"],
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list {
background: #e8f1fa !important;
box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list > li .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] article.crm-contact-row {
background: #e8f1fa !important;
border: 1px solid #d5e4f2 !important;
border-bottom: 1px solid #d5e4f2 !important;
box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0.35rem 0 1rem !important;
}
/* ==== end modeb-contacts-list-blue ==== */
/* ==== Add Contacts form two-column like Add Lead fields :: modeb-contact-form-flat (2026-09-03) ==== */
.sheet.sheet-contact-form,
.sheet:has(.contact-form-flat) {
width: min(40rem, calc(100% - 1.25rem));
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
.sheet.sheet-contact-form .sheet-body,
.sheet:has(.contact-form-flat) .sheet-body {
overflow-x: hidden;
max-width: 100%;
}
.lead-form.contact-form-flat {
max-width: 100%;
min-width: 0;
overflow-x: hidden;
}
.lead-form.contact-form-flat .lead-form-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0.55rem 0.75rem;
width: 100%;
min-width: 0;
max-width: 100%;
}
.lead-form.contact-form-flat .field-with-mic,
.lead-form.contact-form-flat .field,
.lead-form.contact-form-flat .lead-phone-field {
min-width: 0;
max-width: 100%;
}
.lead-form.contact-form-flat .lead-phone-row {
min-width: 0;
width: 100%;
}
.lead-form.contact-form-flat .lead-phone-row > select {
flex: 0 1 6.75rem;
min-width: 0;
max-width: 7.25rem;
}
.lead-form.contact-form-flat .lead-form-actions {
justify-content: flex-end;
}
@media (max-width: 36rem) {
.lead-form.contact-form-flat .lead-form-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==== end modeb-contact-form-flat ==== */
/* ==== Add Deal form like Add Lead :: modeb-deal-form-flat (2026-09-03) ==== */
.lead-form.deal-form-flat .deal-form-span {
grid-column: 1 / -1;
}
.lead-form.deal-form-flat input[type='number'],
.lead-form.deal-form-flat input[type='date'],
.lead-form.deal-form-flat input[type='datetime-local'] {
min-width: 0;
}
/* ==== end modeb-deal-form-flat ==== */
/* ==== More page compact unique list :: modeb-more-nav (2026-09-03) ==== */
.sa-form[data-screen="crm-home"] > .sa-form-head h1 {
font-family: var(--serif);
font-size: 1.35rem;
}
.sa-form[data-screen="crm-home"] > .sa-form-body {
background: transparent;
border: 0;
box-shadow: none;
border-radius: 0;
padding: 0;
}
.mode-b-shell main:has([data-screen="crm-home"]) {
background: #ffffff;
}
.crm-more-page {
display: flex;
flex-direction: column;
gap: 1rem;
}
.crm-more-section-label {
margin: 0 0.15rem 0.5rem;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #64748b;
}
.crm-more-nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.crm-more-nav-row {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.72rem 0.8rem;
text-decoration: none;
color: inherit;
border-radius: 0.95rem;
min-height: 3.35rem;
background: #fff;
border: 1px solid #e8eef4;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}
.crm-more-nav-row:hover {
background: #f8fbff;
border-color: #d7e4f4;
}
.crm-more-nav-icon {
width: 2.45rem;
height: 2.45rem;
border-radius: 0.8rem;
display: grid;
place-items: center;
flex: 0 0 auto;
}
.crm-more-nav-copy {
min-width: 0;
flex: 1 1 auto;
}
.crm-more-nav-copy strong {
display: block;
font-size: 0.95rem;
font-weight: 780;
color: #0f172a;
line-height: 1.2;
}
.crm-more-nav-copy em {
display: inline-flex;
font-style: normal;
font-size: 0.68rem;
font-weight: 700;
color: #64748b;
margin-top: 0.22rem;
background: #f1f5f9;
border-radius: 999px;
padding: 0.1rem 0.48rem;
}
.crm-more-nav-go {
flex: 0 0 auto;
width: 1.7rem;
height: 1.7rem;
border-radius: 999px;
display: grid;
place-items: center;
background: #f8fafc;
color: #94a3b8;
border: 1px solid #e8eef4;
}
.crm-more-nav-row:hover .crm-more-nav-go {
background: #eff6ff;
border-color: #bfdbfe;
color: #2563eb;
}
.crm-more-nav-row[data-tone="blue"] .crm-more-nav-icon { color: #2563eb; background: color-mix(in srgb, #2563eb 12%, #fff); }
.crm-more-nav-row[data-tone="orange"] .crm-more-nav-icon { color: #ea580c; background: color-mix(in srgb, #ea580c 12%, #fff); }
.crm-more-nav-row[data-tone="teal"] .crm-more-nav-icon { color: #0d9488; background: color-mix(in srgb, #0d9488 12%, #fff); }
.crm-more-nav-row[data-tone="amber"] .crm-more-nav-icon { color: #d97706; background: color-mix(in srgb, #d97706 14%, #fff); }
.crm-more-nav-row[data-tone="indigo"] .crm-more-nav-icon { color: #4f46e5; background: color-mix(in srgb, #4f46e5 12%, #fff); }
.crm-more-nav-row[data-tone="violet"] .crm-more-nav-icon { color: #7c3aed; background: color-mix(in srgb, #7c3aed 12%, #fff); }
.crm-more-nav-row[data-tone="green"] .crm-more-nav-icon { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, #fff); }
.crm-more-nav-row[data-tone="slate"] .crm-more-nav-icon { color: #475569; background: color-mix(in srgb, #475569 12%, #fff); }
.crm-more-nav-row[data-tone="cyan"] .crm-more-nav-icon { color: #0891b2; background: color-mix(in srgb, #0891b2 12%, #fff); }
.crm-more-nav-row[data-tone="pink"] .crm-more-nav-icon { color: #db2777; background: color-mix(in srgb, #db2777 12%, #fff); }
.crm-more-nav-row[data-tone="yellow"] .crm-more-nav-icon { color: #ca8a04; background: color-mix(in srgb, #ca8a04 14%, #fff); }
.crm-more-nav-row[data-tone="sky"] .crm-more-nav-icon { color: #0284c7; background: color-mix(in srgb, #0284c7 12%, #fff); }
.crm-more-nav-row[data-tone="gray"] .crm-more-nav-icon { color: #64748b; background: color-mix(in srgb, #64748b 12%, #fff); }
.crm-more-nav-row[data-tone="purple"] .crm-more-nav-icon { color: #9333ea; background: color-mix(in srgb, #9333ea 12%, #fff); }
.crm-more-nav-row[data-tone="rose"] .crm-more-nav-icon { color: #e11d48; background: color-mix(in srgb, #e11d48 12%, #fff); }
.crm-more-nav-row[data-tone="red"] .crm-more-nav-icon { color: #dc2626; background: color-mix(in srgb, #dc2626 12%, #fff); }
.crm-more-nav-row[data-tone="blue"] { border-left: 3px solid #2563eb; }
.crm-more-nav-row[data-tone="orange"] { border-left: 3px solid #ea580c; }
.crm-more-nav-row[data-tone="teal"] { border-left: 3px solid #0d9488; }
.crm-more-nav-row[data-tone="amber"] { border-left: 3px solid #d97706; }
.crm-more-nav-row[data-tone="indigo"] { border-left: 3px solid #4f46e5; }
.crm-more-nav-row[data-tone="violet"] { border-left: 3px solid #7c3aed; }
.crm-more-nav-row[data-tone="green"] { border-left: 3px solid #16a34a; }
.crm-more-nav-row[data-tone="slate"] { border-left: 3px solid #475569; }
.crm-more-nav-row[data-tone="cyan"] { border-left: 3px solid #0891b2; }
.crm-more-nav-row[data-tone="pink"] { border-left: 3px solid #db2777; }
.crm-more-nav-row[data-tone="yellow"] { border-left: 3px solid #ca8a04; }
.crm-more-nav-row[data-tone="sky"] { border-left: 3px solid #0284c7; }
.crm-more-nav-row[data-tone="gray"] { border-left: 3px solid #64748b; }
.crm-more-nav-row[data-tone="purple"] { border-left: 3px solid #9333ea; }
.crm-more-nav-row[data-tone="rose"] { border-left: 3px solid #e11d48; }
.crm-more-nav-row[data-tone="red"] { border-left: 3px solid #dc2626; }
.crm-more-nav-row[data-tone="emerald"] { border-left: 3px solid #059669; }
/* ==== end modeb-more-nav ==== */
/* ==== Add Lead select chevron next to value :: modeb-lead-select-chevron (2026-09-03) ==== */
.lead-form .field[data-as='select'] .field-control {
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
}
.lead-form .field[data-as='select'] select {
width: max-content;
max-width: 100%;
field-sizing: content;
padding-right: 1.85rem;
}
.lead-form .field[data-as='select'] .field-chevron {
right: 0.5rem;
}
/* ==== end modeb-lead-select-chevron ==== */
/* ==== Deals kanban list :: modeb-deals-board (2026-09-03) ==== */
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-body {
background: #f4f7fb;
border: 0;
box-shadow: none;
padding: 0.2rem 0 0.6rem;
}
.crm-deals-board {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.crm-deals-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.55rem;
}
.crm-deals-stats article {
background: #fff;
border: 1px solid #eef2f7;
border-radius: 1rem;
padding: 0.7rem 0.75rem;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}
.crm-deals-stats em {
display: block;
font-style: normal;
font-size: 0.68rem;
font-weight: 700;
color: #94a3b8;
letter-spacing: 0.02em;
}
.crm-deals-stats strong {
display: block;
margin-top: 0.2rem;
font-size: 0.95rem;
color: #0f172a;
}
.crm-deals-kanban {
display: flex;
gap: 0.7rem;
overflow-x: auto;
padding-bottom: 0.4rem;
scroll-snap-type: x proximity;
}
.crm-deals-column {
flex: 0 0 min(15.5rem, 82vw);
scroll-snap-align: start;
background: #eef2f6;
border-radius: 1rem;
min-height: 12rem;
display: flex;
flex-direction: column;
overflow: hidden;
}
.crm-deals-column-head {
padding: 0.7rem 0.75rem 0.55rem;
border-top: 3px solid #94a3b8;
background: #fff;
}
.crm-deals-column[data-tone="blue"] .crm-deals-column-head { border-top-color: #2563eb; }
.crm-deals-column[data-tone="yellow"] .crm-deals-column-head { border-top-color: #eab308; }
.crm-deals-column[data-tone="orange"] .crm-deals-column-head { border-top-color: #ea580c; }
.crm-deals-column[data-tone="purple"] .crm-deals-column-head { border-top-color: #7c3aed; }
.crm-deals-column[data-tone="green"] .crm-deals-column-head { border-top-color: #16a34a; }
.crm-deals-column[data-tone="rose"] .crm-deals-column-head { border-top-color: #e11d48; }
.crm-deals-column-head h2 {
margin: 0;
font-size: 0.92rem;
font-weight: 750;
color: #0f172a;
}
.crm-deals-column-head span {
display: block;
margin-top: 0.12rem;
font-size: 0.72rem;
color: #64748b;
}
.crm-deals-column-body {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.55rem;
}
.crm-deal-card {
position: relative;
background: #fff;
border-radius: 0.85rem;
padding: 0.7rem 0.75rem 0.55rem;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}
.crm-deal-card-title {
display: block;
font-weight: 750;
font-size: 0.88rem;
color: #0f172a;
text-decoration: none;
line-height: 1.3;
}
.crm-deal-card-party {
margin: 0.2rem 0 0;
font-size: 0.75rem;
color: #94a3b8;
}
.crm-deal-card-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.4rem;
margin-top: 0.55rem;
}
.crm-deal-card-meta strong {
font-size: 0.86rem;
color: #0f172a;
}
.crm-deal-card-meta em {
font-style: normal;
font-size: 0.78rem;
color: #64748b;
}
.crm-deal-card-move {
display: flex;
justify-content: space-between;
margin-top: 0.4rem;
}
.crm-deal-move {
width: 1.7rem;
height: 1.7rem;
border: 1px solid #e2e8f0;
border-radius: 999px;
background: #fff;
color: #64748b;
display: inline-grid;
place-items: center;
cursor: pointer;
}
.crm-deal-card-select {
position: absolute;
top: 0.45rem;
right: 0.45rem;
}
/* ==== end modeb-deals-board ==== */
/* ==== Deals page: default pipeline only, no page scroll :: modeb-deals-no-page-scroll (2026-09-03) ==== */
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) {
overflow: hidden !important;
height: 100dvh;
max-height: 100dvh;
}
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) .sa-form-list {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.sa-form[data-screen="crm-opportunities-list"] {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-head {
flex: 0 0 auto;
}
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-body {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.crm-deals-board {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.crm-deals-stats {
flex: 0 0 auto;
}
.crm-deals-kanban {
flex: 1 1 auto;
min-height: 0;
overflow-x: auto;
overflow-y: hidden;
}
.crm-deals-column {
min-height: 0;
max-height: 100%;
}
.crm-deals-column-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
/* ==== end modeb-deals-no-page-scroll ==== */
/* ==== Profile menu theme + dark mode :: modeb-profile-theme (2026-09-03) ==== */
.user-menu-theme {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 0.55rem 0.75rem 0.65rem;
}
.user-menu-theme > span {
font-size: 0.72rem;
font-weight: 750;
color: #64748b;
letter-spacing: 0.02em;
}
.user-menu-theme-picks {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.4rem;
}
.user-menu-theme-picks button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
border: 1px solid #e2e8f0;
background: #f8fafc;
color: #0f172a;
border-radius: 999px;
padding: 0.45rem 0.4rem;
font: inherit;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
}
.user-menu-theme-picks button.on {
background: #2563eb;
border-color: #2563eb;
color: #fff;
}
html[data-theme="dark"] {
--ink: #e8eef6;
--brand-ink: #e2e8f0;
--muted: #94a3b8;
--surface: #0b1220;
--card: #152033;
--line: #2a3a52;
--purple-soft: #1e1b4b;
--shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
color: var(--ink);
background: var(--surface);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .mode-b-shell {
background: var(--surface);
color: var(--ink);
}
html[data-theme="dark"] .mode-b-shell .workspace-header.mode-b-header,
html[data-theme="dark"] .mode-b-nav,
html[data-theme="dark"] .sheet,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .user-menu-panel,
html[data-theme="dark"] .dropdown-portal {
background: #152033 !important;
color: #e8eef6 !important;
border-color: #2a3a52 !important;
}
html[data-theme="dark"] .sa-form-body,
html[data-theme="dark"] .sa-form-head h1,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .crm-lead-card,
html[data-theme="dark"] .crm-deal-card,
html[data-theme="dark"] .crm-deals-stats article,
html[data-theme="dark"] .crm-deals-column-head,
html[data-theme="dark"] .crm-more-nav-row,
html[data-theme="dark"] .user-menu-profile {
background: #1b2940 !important;
color: #e8eef6 !important;
border-color: #2a3a52 !important;
}
html[data-theme="dark"] .crm-deals-column,
html[data-theme="dark"] .mode-b-shell main:has([data-screen="crm-home"]),
html[data-theme="dark"] .mode-b-shell main:has([data-screen="crm-leads-list"]) {
background: #0b1220 !important;
}
html[data-theme="dark"] .user-menu-profile strong,
html[data-theme="dark"] .crm-deal-card-title,
html[data-theme="dark"] .crm-deals-column-head h2,
html[data-theme="dark"] .sa-form-head h1 {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .user-menu-profile span,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .crm-deal-card-party {
color: #94a3b8 !important;
}
html[data-theme="dark"] .user-menu-theme-picks button {
background: #1b2940;
border-color: #2a3a52;
color: #e8eef6;
}
html[data-theme="dark"] .user-menu-theme-picks button.on {
background: #3b82f6;
border-color: #3b82f6;
color: #fff;
}
html[data-theme="dark"] .user-menu-item {
color: #e8eef6;
}
html[data-theme="dark"] .user-menu-logout {
color: #fca5a5;
}
/* ==== end modeb-profile-theme ==== */
/* ==== Deals board: no horizontal scroll, compact cards :: modeb-deals-fit (2026-09-03) ==== */
.crm-deals-board {
gap: 0.55rem;
}
.crm-deals-stats {
gap: 0.4rem;
}
.crm-deals-stats article {
padding: 0.42rem 0.5rem;
border-radius: 0.75rem;
box-shadow: none;
}
.crm-deals-stats em {
font-size: 0.62rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.crm-deals-stats strong {
margin-top: 0.08rem;
font-size: 0.82rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crm-deals-kanban {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.4rem;
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
overflow-y: hidden;
padding-bottom: 0;
scroll-snap-type: none;
}
.crm-deals-column {
flex: none !important;
min-width: 0 !important;
width: auto;
border-radius: 0.8rem;
background: #e8eef5;
}
.crm-deals-column-head {
padding: 0.45rem 0.5rem 0.38rem;
}
.crm-deals-column-head h2 {
font-size: 0.8rem;
}
.crm-deals-column-head span {
font-size: 0.66rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crm-deals-column-body {
gap: 0.35rem;
padding: 0.38rem;
}
.crm-deal-card {
padding: 0.42rem 0.45rem 0.38rem;
border-radius: 0.65rem;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.crm-deal-card-top {
display: flex;
align-items: flex-start;
gap: 0.25rem;
min-width: 0;
}
.crm-deal-card-title {
flex: 1 1 auto;
min-width: 0;
font-size: 0.78rem;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crm-deal-card-move {
flex: 0 0 auto;
display: flex;
justify-content: flex-end;
gap: 0.12rem;
margin-top: 0;
}
.crm-deal-move {
width: 1.35rem;
height: 1.35rem;
flex-shrink: 0;
}
.crm-deal-move-spacer {
width: 1.35rem;
height: 1.35rem;
}
.crm-deal-card-bottom {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.35rem;
margin-top: 0.18rem;
min-width: 0;
}
.crm-deal-card-party {
margin: 0;
flex: 1 1 auto;
min-width: 0;
font-size: 0.68rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crm-deal-card-amount {
flex: 0 0 auto;
font-size: 0.72rem;
font-weight: 750;
font-variant-numeric: tabular-nums;
color: #0f172a;
white-space: nowrap;
}
.crm-deal-card-win {
display: block;
margin-top: 0.08rem;
font-style: normal;
font-size: 0.62rem;
color: #64748b;
}
.crm-deal-card-meta {
display: none;
}
@media (max-width: 360px) {
.crm-deals-kanban {
grid-template-columns: minmax(0, 1fr);
overflow-y: auto;
}
}
/* ==== end modeb-deals-fit ==== */
/* ==== Profile theme switch row :: modeb-theme-switch (2026-09-03) ==== */
.user-menu-theme {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.55rem 0.75rem;
}
.user-menu-theme > span {
font-size: 0.9rem;
font-weight: 650;
color: #0f172a;
letter-spacing: 0;
}
.user-menu-theme-picks {
display: none;
}
.user-menu-theme-switch {
display: inline-flex;
align-items: center;
gap: 0.4rem;
border: 0;
background: transparent;
padding: 0;
font: inherit;
cursor: pointer;
color: #64748b;
}
.user-menu-theme-state {
min-width: 1.6rem;
font-size: 0.72rem;
font-weight: 750;
text-align: left;
}
.user-menu-theme-track {
position: relative;
width: 2.55rem;
height: 1.45rem;
border-radius: 999px;
background: #cbd5e1;
display: block;
flex-shrink: 0;
transition: background 0.15s ease;
}
.user-menu-theme-knob {
position: absolute;
top: 0.14rem;
left: 0.14rem;
width: 1.17rem;
height: 1.17rem;
border-radius: 999px;
background: #fff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
transition: transform 0.15s ease;
}
.user-menu-theme-switch.on {
color: #2563eb;
}
.user-menu-theme-switch.on .user-menu-theme-track {
background: #2563eb;
}
.user-menu-theme-switch.on .user-menu-theme-knob {
transform: translateX(1.1rem);
}
html[data-theme="dark"] .user-menu-theme > span {
color: #e8eef6 !important;
}
html[data-theme="dark"] .user-menu-theme-switch {
color: #94a3b8;
}
html[data-theme="dark"] .user-menu-theme-switch.on {
color: #93c5fd;
}
html[data-theme="dark"] .user-menu-theme-track {
background: #334155;
}
html[data-theme="dark"] .user-menu-theme-switch.on .user-menu-theme-track {
background: #3b82f6;
}
html[data-theme="dark"] .user-menu-theme-picks button,
html[data-theme="dark"] .user-menu-theme-picks button.on {
display: none;
}
/* ==== end modeb-theme-switch ==== */
/* ==== Deals board fresh layout :: modeb-deals-fresh (2026-09-03) ==== */
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-body {
background: #f3f5f8;
padding: 0.15rem 0 0.35rem;
}
.crm-deals-board {
gap: 0.7rem;
}
.crm-deals-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
background: #fff;
border: 1px solid #e8edf3;
border-radius: 1.05rem;
overflow: hidden;
box-shadow: none;
}
.crm-deals-stats article {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
padding: 0.55rem 0.55rem;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.crm-deals-stats article + article {
border-left: 1px solid #eef2f6;
}
.crm-deals-stat-icon {
width: 1.85rem;
height: 1.85rem;
border-radius: 0.6rem;
display: grid;
place-items: center;
flex-shrink: 0;
color: #2563eb;
background: #eff6ff;
}
.crm-deals-stat-icon[data-tone="amber"] {
color: #b45309;
background: #fffbeb;
}
.crm-deals-stat-icon[data-tone="green"] {
color: #15803d;
background: #f0fdf4;
}
.crm-deals-stats em {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #94a3b8;
}
.crm-deals-stats strong {
margin-top: 0.02rem;
font-size: 0.86rem;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.crm-deals-kanban {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 0.55rem;
overflow-x: hidden !important;
}
.crm-deals-column {
background: transparent;
border-radius: 0;
min-width: 0;
}
.crm-deals-column-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.35rem;
padding: 0.15rem 0.15rem 0.45rem;
background: transparent;
border-top: 0;
}
.crm-deals-column-head h2 {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.crm-deals-column-head h2::before {
content: "";
width: 0.45rem;
height: 0.45rem;
border-radius: 999px;
background: #94a3b8;
}
.crm-deals-column[data-tone="blue"] .crm-deals-column-head h2::before { background: #2563eb; }
.crm-deals-column[data-tone="yellow"] .crm-deals-column-head h2::before { background: #ca8a04; }
.crm-deals-column[data-tone="orange"] .crm-deals-column-head h2::before { background: #ea580c; }
.crm-deals-column[data-tone="purple"] .crm-deals-column-head h2::before { background: #7c3aed; }
.crm-deals-column[data-tone="green"] .crm-deals-column-head h2::before { background: #16a34a; }
.crm-deals-column[data-tone="rose"] .crm-deals-column-head h2::before { background: #e11d48; }
.crm-deals-column-head span {
margin-top: 0.12rem;
font-size: 0.68rem;
color: #64748b;
font-variant-numeric: tabular-nums;
}
.crm-deals-column-head b {
flex: 0 0 auto;
min-width: 1.35rem;
height: 1.35rem;
padding: 0 0.35rem;
border-radius: 999px;
background: #e8eef5;
color: #334155;
font-size: 0.68rem;
font-weight: 750;
display: inline-grid;
place-items: center;
}
.crm-deals-column[data-tone="blue"] .crm-deals-column-head b { background: #dbeafe; color: #1d4ed8; }
.crm-deals-column[data-tone="green"] .crm-deals-column-head b { background: #dcfce7; color: #15803d; }
.crm-deals-column[data-tone="rose"] .crm-deals-column-head b { background: #ffe4e6; color: #be123c; }
.crm-deals-column-body {
gap: 0.45rem;
padding: 0;
background: transparent;
}
.crm-deal-card {
padding: 0.62rem 0.65rem 0.55rem 0.75rem;
border-radius: 0.9rem;
border: 1px solid #e8eef4;
border-left: 3px solid #cbd5e1;
box-shadow: none;
background: #fff;
}
.crm-deal-card[data-tone="blue"] { border-left-color: #3b82f6; }
.crm-deal-card[data-tone="yellow"] { border-left-color: #eab308; }
.crm-deal-card[data-tone="orange"] { border-left-color: #f97316; }
.crm-deal-card[data-tone="purple"] { border-left-color: #8b5cf6; }
.crm-deal-card[data-tone="green"] { border-left-color: #22c55e; }
.crm-deal-card[data-tone="rose"] { border-left-color: #fb7185; }
.crm-deal-card-title {
font-size: 0.8rem;
font-weight: 750;
letter-spacing: -0.02em;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}
.crm-deal-card-party {
display: flex;
align-items: center;
gap: 0.28rem;
margin: 0.28rem 0 0;
color: #64748b;
font-size: 0.68rem;
}
.crm-deal-card-party span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-deal-card-party svg {
flex-shrink: 0;
opacity: 0.7;
}
.crm-deal-card-bottom {
display: flex;
align-items: center;
gap: 0.3rem;
margin-top: 0.45rem;
}
.crm-deal-card-amount {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: -0.02em;
color: #0f172a;
background: #f1f5f9;
border-radius: 999px;
padding: 0.12rem 0.45rem;
}
.crm-deal-card-win {
display: inline;
margin: 0;
font-size: 0.62rem;
color: #64748b;
}
.crm-deal-card-move {
margin-left: auto;
display: flex;
gap: 0.1rem;
}
.crm-deal-move {
width: 1.4rem;
height: 1.4rem;
border: 0;
background: #f8fafc;
color: #64748b;
}
html[data-theme="dark"] .crm-deals-stats,
html[data-theme="dark"] .crm-deal-card {
background: #1b2940 !important;
border-color: #2a3a52 !important;
}
html[data-theme="dark"] .crm-deals-stats article + article {
border-left-color: #2a3a52;
}
html[data-theme="dark"] .crm-deals-stat-icon {
background: #152033;
}
html[data-theme="dark"] .crm-deal-card-amount {
background: #152033;
color: #e8eef6;
}
html[data-theme="dark"] .crm-deals-column-head b {
background: #152033;
color: #cbd5e1;
}
/* ==== end modeb-deals-fresh ==== */
/* ==== Add Deal form even grid :: modeb-deal-form-align (live-only) ==== */
.overlay.overlay-deal-form {
align-items: center;
padding: 1rem 1rem calc(4.6rem + env(safe-area-inset-bottom, 0px));
}
.sheet.sheet-deal-form {
width: min(var(--mode-b-core-width, 900px), calc(100% - 1.5rem));
max-width: var(--mode-b-core-width, 900px);
max-height: 100%;
overflow: hidden;
gap: 0.65rem;
padding: 1rem 1.35rem 1.2rem;
border-radius: 1.25rem;
box-sizing: border-box;
}
.sheet.sheet-deal-form .sheet-handle {
display: none;
}
.sheet.sheet-deal-form .sheet-head-row h2 {
font-size: 1.15rem;
}
.sheet.sheet-deal-form .sheet-body {
padding: 0.15rem 0 0;
overflow-x: hidden !important;
overflow-y: auto !important;
max-width: 100%;
}
.sheet.sheet-deal-form.sheet-activity-form {
max-height: min(92dvh, 46rem);
}
.sheet.sheet-deal-form.sheet-activity-form .sheet-body {
overflow-y: auto !important;
}
.lead-form.deal-form-flat {
gap: 0.95rem;
}
.lead-form.deal-form-flat .deal-form-grid {
display: flex;
flex-direction: column;
gap: 0.95rem;
width: 100%;
}
.lead-form.deal-form-flat .deal-form-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0.95rem 1.1rem;
width: 100%;
min-width: 0;
}
.lead-form.deal-form-flat .deal-form-span,
.lead-form.deal-form-flat .deal-form-row > .field-with-mic,
.lead-form.deal-form-flat .field,
.lead-form.deal-form-flat .field-control {
width: 100%;
min-width: 0;
max-width: 100%;
}
.lead-form.deal-form-flat .field {
gap: 0.4rem;
}
.lead-form.deal-form-flat .field-label-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
width: 100%;
min-height: 0;
}
.lead-form.deal-form-flat .field-label-row label {
flex: 1 1 auto;
min-width: 0;
font-size: 0.74rem;
font-weight: 650;
color: #475569;
}
.lead-form.deal-form-flat .field-with-mic .voice-session {
margin-left: 0;
flex: 0 0 auto;
}
.lead-form.deal-form-flat .field-icon {
color: #94a3b8 !important;
}
.lead-form.deal-form-flat .field[data-as='select'] .field-control {
display: flex !important;
width: 100% !important;
max-width: 100%;
}
.lead-form.deal-form-flat .field[data-as='select'] select {
width: 100% !important;
max-width: 100%;
field-sizing: fixed;
flex: 1 1 auto;
}
.lead-form.deal-form-flat .field input,
.lead-form.deal-form-flat .field select {
box-sizing: border-box;
width: 100%;
height: 2.6rem;
min-height: 2.6rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border-radius: 0.8rem;
}
.lead-form.deal-form-flat .field textarea {
box-sizing: border-box;
width: 100%;
min-height: 4.5rem;
height: 4.5rem;
max-height: 4.5rem;
resize: none;
border-radius: 0.8rem;
}
.lead-form.deal-form-flat .lead-form-actions {
margin-top: 0.35rem;
gap: 0.75rem;
}
.lead-form.deal-form-flat .lead-form-grid.deal-form-grid {
display: flex;
flex-direction: column;
gap: 0.95rem;
width: 100%;
}
.lead-form.deal-form-flat .deal-form-row > .lead-phone-field,
.lead-form.deal-form-flat .lead-phone-field,
.lead-form.deal-form-flat .lead-phone-row {
width: 100%;
min-width: 0;
max-width: 100%;
}
.lead-form.deal-form-flat .lead-phone-field .field-label-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.lead-form.deal-form-flat .lead-form-steps {
margin-bottom: 0.35rem;
}
@media (max-width: 36rem) {
.lead-form.deal-form-flat .deal-form-row {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==== end modeb-deal-form-align ==== */
/* ==== Deals compact list + stage filters :: modeb-deals-list (live-only) ==== */
.crm-deals-list-page {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1 1 auto;
gap: 0.55rem;
}
.crm-deals-list-page .crm-deals-kanban {
display: none !important;
}
.crm-deals-toolbar {
display: flex;
align-items: center;
gap: 0.4rem;
}
.crm-deals-stage-tabs {
display: flex;
gap: 0.35rem;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 0.1rem;
scrollbar-width: none;
}
.crm-deals-stage-tabs::-webkit-scrollbar {
display: none;
}
.crm-deals-stage-tabs button {
flex: 0 0 auto;
border: 1px solid #e2e8f0;
background: #fff;
color: #475569;
border-radius: 999px;
padding: 0.28rem 0.7rem;
font: inherit;
font-size: 0.72rem;
font-weight: 700;
cursor: pointer;
}
.crm-deals-stage-tabs button.on {
background: #2563eb;
border-color: #2563eb;
color: #fff;
}
.crm-deals-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 0.4rem;
padding-bottom: 0.4rem;
}
.crm-deals-empty {
margin: 1rem 0.2rem;
color: #64748b;
font-size: 0.85rem;
}
.crm-deals-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 0.45rem 0.55rem;
background: #fff;
border: 1px solid #e8eef4;
border-left: 3px solid #94a3b8;
border-radius: 0.8rem;
padding: 0.55rem 0.7rem;
}
.crm-deals-row[data-tone="blue"] { border-left-color: #3b82f6; }
.crm-deals-row[data-tone="green"] { border-left-color: #22c55e; }
.crm-deals-row[data-tone="rose"] { border-left-color: #fb7185; }
.crm-deals-row[data-tone="yellow"] { border-left-color: #eab308; }
.crm-deals-row[data-tone="orange"] { border-left-color: #f97316; }
.crm-deals-row[data-tone="purple"] { border-left-color: #8b5cf6; }
.crm-deals-row-main {
min-width: 0;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: 0.12rem;
}
.crm-deals-row-main strong {
font-size: 0.84rem;
font-weight: 750;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crm-deals-row-main span {
font-size: 0.7rem;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crm-deals-row-amount {
font-size: 0.78rem;
font-variant-numeric: tabular-nums;
color: #0f172a;
white-space: nowrap;
}
.crm-deals-row-stage {
font-style: normal;
font-size: 0.65rem;
font-weight: 750;
border-radius: 999px;
padding: 0.18rem 0.5rem;
background: #f1f5f9;
color: #334155;
white-space: nowrap;
}
.crm-deals-row-stage[data-tone="green"] { background: #dcfce7; color: #15803d; }
.crm-deals-row-stage[data-tone="rose"] { background: #ffe4e6; color: #be123c; }
.crm-deals-row-stage[data-tone="blue"] { background: #dbeafe; color: #1d4ed8; }
.crm-deals-row-stage[data-tone="yellow"] { background: #fefce8; color: #a16207; }
.crm-deals-row-stage[data-tone="orange"] { background: #fff7ed; color: #c2410c; }
.crm-deals-row-stage[data-tone="purple"] { background: #f5f3ff; color: #6d28d9; }
.crm-deals-row.selectable-record {
grid-template-columns: auto minmax(0, 1fr) auto auto;
}
.crm-deals-title-actions {
display: inline-flex;
align-items: center;
gap: 0.2rem;
}
html[data-theme="dark"] .crm-deals-row {
background: #1b2940 !important;
border-color: #2a3a52 !important;
}
html[data-theme="dark"] .crm-deals-row-main strong,
html[data-theme="dark"] .crm-deals-row-amount {
color: #e8eef6;
}
html[data-theme="dark"] .crm-deals-stage-tabs button {
background: #152033;
border-color: #2a3a52;
color: #cbd5e1;
}
.crm-deals-toolbar {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.crm-deals-search-bar {
display: flex;
align-items: center;
gap: 0.45rem;
width: 100%;
min-height: 2.45rem;
padding: 0 0.8rem;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
background: #fff;
color: #64748b;
}
.crm-deals-search-bar input {
flex: 1 1 auto;
min-width: 0;
border: 0;
background: transparent;
font: inherit;
font-size: 0.86rem;
color: #0f172a;
outline: none;
}
.crm-deals-stage-select {
position: relative;
display: flex;
align-items: center;
gap: 0.45rem;
min-height: 2.45rem;
padding: 0 2.1rem 0 0.75rem;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
background: #fff;
color: #0f172a;
}
.crm-deals-stage-select select {
flex: 1 1 auto;
min-width: 0;
appearance: none;
border: 0;
background: transparent;
font: inherit;
font-size: 0.9rem;
font-weight: 750;
color: #0f172a;
outline: none;
cursor: pointer;
}
.crm-deals-stage-select-chevron {
position: absolute;
right: 0.65rem;
top: 50%;
width: 1rem;
height: 1rem;
transform: translateY(-50%);
color: #64748b;
pointer-events: none;
}
.crm-deals-stage-select-chevron svg {
width: 100%;
height: 100%;
display: block;
}
.crm-deals-list-page .crm-deals-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
gap: 0.5rem;
}
.crm-deals-row {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"name amount"
"name stage";
padding: 0.7rem 0.8rem;
border-radius: 0.95rem;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.crm-deals-row-main { grid-area: name; }
.crm-deals-row-amount {
grid-area: amount;
justify-self: end;
font-weight: 750;
}
.crm-deals-row-stage {
grid-area: stage;
justify-self: end;
align-self: start;
}
.crm-deals-row.selectable-record {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"sel name amount"
"sel name stage";
}
.crm-deals-pagination {
flex: 0 0 auto;
margin-top: 0.15rem;
padding-bottom: 0.15rem;
}
html[data-theme="dark"] .crm-deals-search-bar,
html[data-theme="dark"] .crm-deals-stage-select {
background: #152033;
border-color: #2a3a52;
color: #cbd5e1;
}
html[data-theme="dark"] .crm-deals-search-bar input,
html[data-theme="dark"] .crm-deals-stage-select select {
color: #e8eef6;
}
/* ==== end modeb-deals-list ==== */
/* ==== CRM Tasks add form + list :: modeb-tasks-form (live-only) ==== */
.crm-tasks-page {
display: flex;
flex-direction: column;
min-height: 0;
gap: 0.55rem;
}
.crm-tasks-table {
display: flex;
flex-direction: column;
gap: 0.4rem;
min-width: 0;
overflow-x: hidden;
}
.crm-tasks-head,
.crm-tasks-row {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(4.8rem, 0.75fr) minmax(4.4rem, 0.55fr) 6.4rem;
align-items: center;
column-gap: 0.45rem;
}
.crm-tasks-head {
padding: 0.4rem 0.85rem;
border-radius: 0.95rem;
background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
border: 1px solid #e6edf5;
box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(15, 23, 42, 0.04);
color: #64748b;
font-size: 0.72rem;
font-weight: 720;
letter-spacing: 0.01em;
text-transform: none;
}
.crm-tasks-head span {
display: inline-flex;
align-items: center;
min-width: 0;
}
.crm-tasks-head[data-selecting="true"] {
padding-left: calc(0.85rem + 1.65rem);
}
.crm-tasks-head span[data-col="action"] {
justify-content: flex-end;
}
.crm-tasks-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.crm-tasks-row {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(4.8rem, 0.75fr) minmax(4.4rem, 0.55fr) 6.4rem;
align-items: center;
gap: 0.45rem;
background: #fff;
border: 1px solid #e8eef4;
border-left: 3px solid #f59e0b;
border-radius: 0.9rem;
padding: 0.62rem 0.8rem;
}
.crm-tasks-row[data-status="completed"] {
border-left-color: #22c55e;
}
.crm-tasks-row-main {
min-width: 0;
text-decoration: none;
color: inherit;
}
.crm-tasks-row-main strong {
font-size: 0.88rem;
font-weight: 750;
color: #0f172a;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-tasks-when {
min-width: 0;
font-size: 0.72rem;
font-weight: 650;
color: #64748b;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-tasks-status {
font-style: normal;
font-size: 0.68rem;
font-weight: 750;
border-radius: 999px;
padding: 0.18rem 0.55rem;
background: #ffedd5;
color: #c2410c;
}
.crm-tasks-status[data-status="completed"] {
background: #dcfce7;
color: #15803d;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row {
background: linear-gradient(180deg, #fbfaff 0%, #fff 72%);
border: 1px solid #ece7f8;
border-left: 0;
border-radius: 1rem;
padding: 0.62rem 0.8rem 0.62rem 0.95rem;
box-shadow: 0 8px 18px rgba(76, 29, 149, 0.05);
position: relative;
overflow: hidden;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-head {
padding-left: 0.95rem;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row::before {
content: "";
position: absolute;
left: 0;
top: 0.55rem;
bottom: 0.55rem;
width: 0.28rem;
border-radius: 999px;
background: #818cf8;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row[data-priority="low"]::before {
background: #2dd4bf;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row[data-priority="normal"]::before {
background: #818cf8;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row[data-priority="high"]::before {
background: #f43f5e;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row[data-status="completed"] {
background: linear-gradient(180deg, #f4fbf6 0%, #fff 78%);
border-color: #dbeee0;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row-main {
min-width: 0;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row-main strong {
font-size: 0.9rem;
font-weight: 780;
color: #1e1b4b;
}
.crm-tasks-nest {
display: flex;
align-items: center;
gap: 0.45rem;
padding-left: 0.15rem;
}
.crm-tasks-nest-rail {
width: 0.7rem;
height: 0.7rem;
border-left: 1.5px solid #c4b5fd;
border-bottom: 1.5px solid #c4b5fd;
border-bottom-left-radius: 0.28rem;
display: block;
flex: 0 0 auto;
margin-top: -0.15rem;
}
.crm-tasks-priority {
justify-self: start;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 0.4rem;
padding: 0.12rem 0.45rem 0.12rem 0.55rem;
}
.crm-tasks-priority::before {
content: "";
width: 0.38rem;
height: 0.38rem;
border-radius: 0.08rem;
transform: rotate(45deg);
display: inline-block;
margin-right: 0.32rem;
vertical-align: 0.05rem;
}
.crm-tasks-priority[data-priority="low"] {
background: #ccfbf1;
color: #0f766e;
}
.crm-tasks-priority[data-priority="low"]::before {
background: #14b8a6;
}
.crm-tasks-priority[data-priority="normal"] {
background: #e0e7ff;
color: #4338ca;
}
.crm-tasks-priority[data-priority="normal"]::before {
background: #6366f1;
}
.crm-tasks-priority[data-priority="high"] {
background: #ffe4e6;
color: #be123c;
}
.crm-tasks-priority[data-priority="high"]::before {
background: #f43f5e;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-status {
border-radius: 0.45rem;
background: #eef2ff;
color: #4338ca;
}
.crm-tasks-complete {
width: 2rem;
height: 2rem;
border: 0;
border-radius: 999px;
background: #eff6ff;
color: #2563eb;
display: grid;
place-items: center;
cursor: pointer;
}
.crm-tasks-edit {
width: 2rem;
height: 2rem;
border: 0;
border-radius: 999px;
background: #fff7ed;
color: #c2410c;
display: grid;
place-items: center;
cursor: pointer;
text-decoration: none;
}
.crm-tasks-row-acts {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 0.2rem;
}
.crm-tasks-delete {
width: 2rem;
height: 2rem;
border: 0;
border-radius: 999px;
background: #fff1f2;
color: #e11d48;
display: grid;
place-items: center;
cursor: pointer;
}
.crm-tasks-bulk {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.5rem 0.7rem;
border: 1px solid #bfe8e4;
border-radius: 0.8rem;
background: #ecfeff;
font-size: 0.78rem;
font-weight: 650;
color: #0f766e;
}
.crm-tasks-bulk-actions {
display: inline-flex;
align-items: center;
gap: 0.35rem;
border: 0;
border-radius: 0.55rem;
background: #0f766e;
color: #fff;
font: inherit;
font-weight: 750;
padding: 0.38rem 0.75rem;
cursor: pointer;
}
.crm-tasks-bulk-clear {
margin-left: auto;
border: 0;
background: transparent;
color: #0f766e;
font: inherit;
font-weight: 700;
cursor: pointer;
text-decoration: underline;
}
.sheet.sheet-deal-form.sheet-task-bulk {
width: min(28rem, calc(100% - 1.5rem));
}
.sheet.sheet-deal-form.sheet-task-bulk .sheet-body {
overflow: hidden auto !important;
max-height: min(72dvh, 40rem);
}
.lead-form.deal-form-flat .crm-task-bulk-lead {
margin: 0;
color: #94a3b8;
font-size: 0.88rem;
}
.lead-form.deal-form-flat .crm-task-bulk-lead strong {
color: #334155;
font-weight: 750;
}
.lead-form.deal-form-flat .crm-task-bulk-delete {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-size: 0.92rem;
font-weight: 750;
color: #0f172a;
padding-bottom: 0.75rem;
border-bottom: 1px solid #e8eef4;
}
.lead-form.deal-form-flat .crm-task-bulk-delete input {
width: 1rem;
height: 1rem;
accent-color: #2563eb;
}
.lead-form.deal-form-flat .crm-task-bulk-actions {
justify-content: stretch;
margin-top: 0.2rem;
}
.lead-form.deal-form-flat .crm-task-bulk-actions .primary-btn {
width: 100%;
flex: 1 1 auto;
min-width: 0;
border-radius: 0.9rem;
padding: 0.78rem 1.2rem;
background: #3b82f6;
border-color: #3b82f6;
color: #fff;
}
.sheet-reminder-form .reminder-form-actions {
justify-content: flex-start;
}
.sheet-reminder-form .reminder-form-actions .primary-btn {
background: #0f766e;
border-color: #0f766e;
color: #fff;
}
html[data-theme="dark"] .crm-tasks-head {
background: linear-gradient(180deg, #24344c 0%, #1b2940 100%);
border-color: #334155;
color: #94a3b8;
box-shadow: none;
}
html[data-theme="dark"] .crm-tasks-row {
background: #1b2940;
border-color: #2a3a52;
}
html[data-theme="dark"] .crm-tasks-row-main strong {
color: #e8eef6;
}
html[data-theme="dark"] .crm-tasks-when {
color: #94a3b8;
}
html[data-theme="dark"] .sa-form[data-screen="crm-tasks-list"] .crm-tasks-row {
background: #172033;
border-color: #2a3a52;
box-shadow: none;
}
.crm-task-assignee {
display: flex;
flex-direction: column;
gap: 0.28rem;
position: relative;
}
.crm-task-assignee > label {
font-size: 0.78rem;
font-weight: 700;
color: #334155;
}
.crm-task-assignee-control {
position: relative;
display: flex;
align-items: center;
min-height: 2.6rem;
padding: 0 2.5rem 0 2.35rem;
border: 1px solid #dbe4f0;
border-radius: 0.85rem;
background: #fff;
}
.crm-task-assignee-icon {
position: absolute;
left: 0.7rem;
color: #2563eb;
}
.crm-task-assignee-search-icon {
position: absolute;
right: 2.55rem;
color: #94a3b8;
pointer-events: none;
}
.crm-task-assignee-control input {
flex: 1 1 auto;
min-width: 0;
border: 0;
background: transparent;
font: inherit;
font-size: 0.9rem;
color: #0f172a;
outline: none;
}
.crm-task-assignee-control .mic-btn,
.crm-task-assignee-control .voice-btn {
position: absolute;
right: 0.35rem;
}
.crm-task-assignee-options {
position: absolute;
z-index: 8;
left: 0;
right: 0;
top: calc(100% + 0.25rem);
max-height: 14rem;
overflow: auto;
margin: 0;
padding: 0.3rem;
list-style: none;
background: #0f2744;
border-radius: 0.7rem;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}
.crm-task-assignee-options button {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.05rem;
border: 0;
background: transparent;
color: #fff;
text-align: left;
padding: 0.45rem 0.6rem;
border-radius: 0.45rem;
cursor: pointer;
font: inherit;
}
.crm-task-assignee-options button strong {
font-size: 0.86rem;
font-weight: 700;
}
.crm-task-assignee-options button span {
font-size: 0.72rem;
color: #cbd5e1;
}
.crm-task-assignee-options li[aria-selected="true"] button,
.crm-task-assignee-options button:hover {
background: #93c5fd;
color: #0f172a;
}
.crm-task-assignee-options li[aria-selected="true"] button span,
.crm-task-assignee-options button:hover span {
color: #1e293b;
}
.crm-task-assignee-empty {
padding: 0.55rem 0.65rem;
color: #94a3b8;
font-size: 0.8rem;
}
/* ==== end modeb-tasks-form ==== */
/* ==== Deals list modern cards :: modeb-deals-modern (live-only) ==== */
.crm-deals-list-page {
gap: 0.75rem;
}
.crm-deals-list-page .crm-deals-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.45rem;
background: transparent;
border: 0;
box-shadow: none;
overflow: visible;
}
.crm-deals-list-page .crm-deals-stats article {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
padding: 0.7rem 0.65rem 0.65rem;
background: #fff;
border: 1px solid #e8eef5;
border-radius: 1rem;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}
.crm-deals-list-page .crm-deals-stats article + article {
border-left: 1px solid #e8eef5;
}
.crm-deals-list-page .crm-deals-stat-icon {
width: 1.9rem;
height: 1.9rem;
border-radius: 0.7rem;
}
.crm-deals-list-page .crm-deals-stats em {
display: block;
font-style: normal;
font-size: 0.62rem;
font-weight: 750;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #64748b;
}
.crm-deals-list-page .crm-deals-stats strong {
display: block;
font-size: 0.92rem;
font-weight: 800;
letter-spacing: -0.02em;
color: #0f172a;
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crm-deals-list-page .crm-deals-list {
gap: 0.65rem;
padding: 0.1rem 0.05rem 0.6rem;
}
.crm-deals-list-page .crm-deals-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: none;
align-items: center;
gap: 0.7rem;
padding: 0.85rem 0.9rem;
border: 1px solid #e8eef5;
border-left: 0;
border-radius: 1.1rem;
background: #fff;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}
.crm-deals-list-page .crm-deals-row.selectable-record {
grid-template-columns: auto auto minmax(0, 1fr) auto;
grid-template-areas: none;
}
.crm-deals-mark {
width: 2.35rem;
height: 2.35rem;
border-radius: 0.8rem;
display: grid;
place-items: center;
font-size: 0.95rem;
font-weight: 800;
letter-spacing: -0.02em;
flex-shrink: 0;
background: #eff6ff;
color: #1d4ed8;
}
.crm-deals-mark[data-tone="green"] { background: #ecfdf3; color: #15803d; }
.crm-deals-mark[data-tone="rose"] { background: #fff1f2; color: #be123c; }
.crm-deals-mark[data-tone="yellow"] { background: #fefce8; color: #a16207; }
.crm-deals-mark[data-tone="orange"] { background: #fff7ed; color: #c2410c; }
.crm-deals-mark[data-tone="purple"] { background: #f5f3ff; color: #6d28d9; }
.crm-deals-list-page .crm-deals-row-main {
grid-area: auto;
min-width: 0;
gap: 0.22rem;
}
.crm-deals-list-page .crm-deals-row-main strong {
font-size: 0.95rem;
font-weight: 750;
letter-spacing: -0.015em;
line-height: 1.25;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.crm-deals-list-page .crm-deals-row-main span {
display: inline-flex;
align-items: center;
gap: 0.28rem;
font-size: 0.76rem;
font-weight: 550;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.crm-deals-list-page .crm-deals-row-main span svg {
flex-shrink: 0;
color: #94a3b8;
}
.crm-deals-row-side {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.32rem;
min-width: 5.4rem;
}
.crm-deals-list-page .crm-deals-row-amount {
grid-area: auto;
justify-self: end;
font-size: 0.95rem;
font-weight: 800;
letter-spacing: -0.02em;
color: #0f172a;
}
.crm-deals-list-page .crm-deals-row-stage {
grid-area: auto;
justify-self: end;
font-size: 0.68rem;
font-weight: 750;
letter-spacing: 0.02em;
padding: 0.28rem 1.35rem 0.28rem 0.58rem;
appearance: none;
-webkit-appearance: none;
border: 0;
cursor: pointer;
max-width: 8.8rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.35rem center;
background-size: 0.75rem;
}
.crm-deals-stage-pick {
display: inline-flex;
justify-content: flex-end;
}
.crm-deals-list-page .crm-deals-row-stage:disabled {
cursor: wait;
opacity: 0.7;
}
.crm-deals-list-page .crm-deals-pagination {
padding: 0.15rem 0 0.35rem;
}
html[data-theme="dark"] .crm-deals-list-page .crm-deals-stats article,
html[data-theme="dark"] .crm-deals-list-page .crm-deals-row {
background: #1b2940 !important;
border-color: #2a3a52 !important;
}
html[data-theme="dark"] .crm-deals-list-page .crm-deals-stats strong,
html[data-theme="dark"] .crm-deals-list-page .crm-deals-row-main strong,
html[data-theme="dark"] .crm-deals-list-page .crm-deals-row-amount {
color: #e8eef6;
}
html[data-theme="dark"] .crm-deals-mark {
background: #152033;
}
/* ==== end modeb-deals-modern ==== */
/* ==== Customer list profile marks :: modeb-customer-profiles (2026-09-04) ==== */
.crm-lead-avatar[data-profile],
.mode-b-shell .crm-leads-list .crm-lead-avatar[data-profile],
.sa-form[data-screen="crm-leads-list"] .crm-lead-avatar[data-profile],
.crm-contact-row-avatar[data-profile],
.crm-email-avatar[data-profile],
.crm-deals-mark[data-profile],
.crm-lead-profile-avatar[data-profile] {
position: relative;
overflow: hidden;
flex: 0 0 auto;
padding: 0;
border: 0;
border-radius: 999px !important;
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
font-size: 0;
display: inline-flex;
align-items: stretch;
justify-content: stretch;
background: transparent !important;
color: inherit;
}
.crm-lead-avatar[data-profile],
.mode-b-shell .crm-leads-list .crm-lead-avatar[data-profile],
.sa-form[data-screen="crm-leads-list"] .crm-lead-avatar[data-profile] {
width: 2.55rem !important;
height: 2.55rem !important;
}
.crm-contact-row-avatar[data-profile],
.crm-email-avatar[data-profile] {
width: 2.2rem !important;
height: 2.2rem !important;
}
.crm-deals-mark[data-profile] {
width: 2.55rem !important;
height: 2.55rem !important;
}
.crm-lead-profile-avatar[data-profile],
.crm-lead-detail-v2 .crm-lead-profile-avatar[data-profile] {
width: 3.1rem !important;
height: 3.1rem !important;
}
.crm-lead-avatar[data-profile] svg,
.crm-contact-row-avatar[data-profile] svg,
.crm-contact-row-avatar[data-profile] img,
.crm-email-avatar[data-profile] svg,
.crm-email-avatar[data-profile] img,
.crm-deals-mark[data-profile] svg,
.crm-lead-profile-avatar[data-profile] svg {
display: block;
width: 100% !important;
height: 100% !important;
flex: 1 1 auto;
}
.crm-contact-row-avatar[data-profile] img,
.crm-email-avatar[data-profile] img {
object-fit: cover;
}
/* ==== end modeb-customer-profiles ==== */
/* ==== Deals list: restore page scroll (kanban used a locked 100dvh shell) ==== */
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) {
overflow: visible !important;
overflow-x: hidden !important;
height: auto !important;
max-height: none !important;
}
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) .sa-form-list,
.sa-form[data-screen="crm-opportunities-list"],
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-body,
.crm-deals-board,
.crm-deals-list-page {
height: auto !important;
max-height: none !important;
min-height: 0;
overflow: visible !important;
flex: 0 1 auto;
}
.crm-deals-list,
.crm-deals-list-page .crm-deals-list {
flex: 0 1 auto;
min-height: 0;
overflow: visible !important;
padding-bottom: 1.25rem;
}
.crm-deals-list-page .crm-deals-pagination {
padding-bottom: 0.85rem;
}
/* ==== end modeb-deals-page-scroll ==== */
/* ==== Deals / Tasks / Reminders header + matches Leads add icon ==== */
.mode-b-shell .crm-deals-title-actions .crm-leads-btn.icon-only,
.mode-b-shell .crm-leads-title-actions .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-btn.icon-only {
flex: 0 0 auto;
width: 2.65rem !important;
height: 2.65rem !important;
padding: 0 !important;
gap: 0;
border-radius: 999px !important;
box-shadow: none !important;
}
.mode-b-shell .crm-deals-title-actions .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .crm-leads-title-actions .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"] {
background: #2563eb !important;
border: 1px solid #2563eb !important;
color: #fff !important;
}
.mode-b-shell .crm-deals-title-actions .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .crm-leads-title-actions .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover {
background: #1d4ed8 !important;
}
.mode-b-shell .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-btn.icon-only svg {
display: block;
}
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head {
align-items: center;
}
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-icon-btn,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-icon-btn,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-icon-btn,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-icon-btn,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-icon-btn {
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
border: 1px solid #e8eef4;
background: #fff;
color: #64748b;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-icon-btn:hover,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-icon-btn:hover,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-icon-btn:hover,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-icon-btn:hover,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-icon-btn:hover {
background: #eff6ff;
border-color: #bfdbfe;
color: #2563eb;
}
/* ==== end modeb-header-add-plus ==== */
/* ==== Activities list Mode B core :: live-only ==== */
.crm-act-page {
display: flex;
flex-direction: column;
gap: 0.7rem;
min-width: 0;
}
.crm-act-search,
.crm-act-status {
width: 100%;
box-sizing: border-box;
height: 2.55rem;
border-radius: 999px;
border: 1px solid #e6edf5;
background: #fff;
color: #0f172a;
padding: 0 0.95rem;
}
.crm-act-search::placeholder {
color: #94a3b8;
}
.crm-act-tools {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.crm-act-btns {
display: flex;
gap: 0.45rem;
}
.crm-act-btns button {
border: 1px solid #e6edf5;
background: #fff;
color: #334155;
border-radius: 999px;
padding: 0.4rem 0.85rem;
font-size: 0.78rem;
font-weight: 650;
cursor: pointer;
}
.crm-act-btns button:hover {
background: #f8fafc;
border-color: #dbe4f0;
}
.crm-act-btns button[data-kind="new"] {
border-color: #93c5fd;
box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.35);
}
.crm-act-table {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.crm-act-cols,
.crm-act-row {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(4.6rem, 0.6fr) minmax(4.4rem, 0.6fr) minmax(5rem, 0.7fr) 7.2rem;
gap: 0.45rem;
align-items: center;
}
.crm-act-cols {
padding: 0.4rem 0.85rem;
border-radius: 0.95rem;
background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
border: 1px solid #e6edf5;
box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(15, 23, 42, 0.04);
color: #64748b;
font-size: 0.72rem;
font-weight: 720;
}
.crm-act-cols span {
display: inline-flex;
align-items: center;
}
.crm-act-cols span[data-col="action"] {
justify-content: flex-end;
}
.crm-act-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.sa-form[data-screen="crm-emails-list"] .crm-act-cols,
.sa-form[data-screen="crm-emails-list"] .crm-act-row {
grid-template-columns: minmax(7.5rem, 1.15fr) minmax(4.4rem, 0.55fr) minmax(5.5rem, 0.9fr) minmax(5.5rem, 0.9fr) minmax(5rem, 0.85fr) 7.2rem;
}
.sa-form[data-screen="crm-emails-list"] .crm-act-row {
border-left-color: #0ea5e9;
}
.sa-form[data-screen="crm-emails-list"] .crm-email-title {
flex-direction: row;
align-items: center;
gap: 0.55rem;
}
.sa-form[data-screen="crm-emails-list"] .crm-email-subject {
font-size: 0.76rem;
color: #64748b;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mode-b-shell .sa-form[data-screen="crm-emails-list"] .crm-act-page {
min-width: 0;
}
@media (max-width: 860px) {
.sa-form[data-screen="crm-emails-list"] .crm-act-cols,
.sa-form[data-screen="crm-emails-list"] .crm-act-row {
grid-template-columns: minmax(0, 1fr) 7.2rem;
}
.sa-form[data-screen="crm-emails-list"] .crm-act-cols span:nth-child(2),
.sa-form[data-screen="crm-emails-list"] .crm-act-cols span:nth-child(3),
.sa-form[data-screen="crm-emails-list"] .crm-act-cols span:nth-child(4),
.sa-form[data-screen="crm-emails-list"] .crm-act-cols span:nth-child(5),
.sa-form[data-screen="crm-emails-list"] .crm-act-type,
.sa-form[data-screen="crm-emails-list"] .crm-act-channel,
.sa-form[data-screen="crm-emails-list"] .crm-act-due,
.sa-form[data-screen="crm-emails-list"] .crm-email-subject {
display: none;
}
}
.crm-act-row {
background: #fff;
border: 1px solid #e8eef4;
border-left: 3px solid #6366f1;
border-radius: 0.9rem;
padding: 0.62rem 0.8rem;
}
.crm-act-title {
min-width: 0;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: 0.28rem;
}
.crm-act-title strong {
font-size: 0.88rem;
font-weight: 750;
color: #0f172a;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-act-title em {
font-style: normal;
width: fit-content;
border-radius: 999px;
padding: 0.12rem 0.5rem;
font-size: 0.68rem;
font-weight: 750;
}
.crm-act-title em[data-status="completed"] {
background: #dcfce7;
color: #15803d;
}
.crm-act-title em[data-status="open"] {
background: #dbeafe;
color: #1d4ed8;
}
.crm-act-title em[data-status="lost"] {
background: #ffe4e6;
color: #e11d48;
}
.crm-act-type,
.crm-act-channel,
.crm-act-due {
font-size: 0.76rem;
color: #64748b;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-list-row-with-acts {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.45rem;
align-items: center;
}
.crm-act-row > .crm-act-acts,
.crm-list-row-with-acts > .crm-act-acts,
.crm-tasks-row > .crm-tasks-row-acts,
.crm-act-acts,
.crm-list-row-with-acts .crm-act-acts,
.crm-tasks-row-acts {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 0.28rem;
width: 100%;
min-width: 4.4rem;
}
.crm-act-edit,
.crm-act-del,
.crm-act-acts > .crm-act-edit,
.crm-act-acts > .crm-act-del,
.crm-tasks-row-acts > .crm-tasks-edit,
.crm-tasks-row-acts > .crm-tasks-delete {
flex: 0 0 2rem;
width: 2rem;
height: 2rem;
border: 0;
border-radius: 999px;
display: grid;
place-items: center;
text-decoration: none;
cursor: pointer;
}
.crm-act-edit {
background: #eff6ff;
color: #2563eb;
}
.crm-act-del {
background: #fff1f2;
color: #e11d48;
}
@media (max-width: 640px) {
.crm-act-cols,
.crm-act-row {
grid-template-columns: minmax(0, 1fr) 7.2rem;
}
.crm-act-cols span:nth-child(n + 2):not([data-col="action"]),
.crm-act-type,
.crm-act-channel,
.crm-act-due {
display: none;
}
.crm-act-cols span[data-col="action"],
.crm-act-acts,
.crm-act-row > .crm-act-acts {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
}
}
.crm-act-cols[data-selecting="true"] {
padding-left: calc(0.85rem + 1.65rem);
}
.sa-form[data-screen="crm-tasks-list"] .crm-act-row {
border-left-color: #f59e0b;
}
.sa-form[data-screen="crm-reminders-list"] .crm-act-row {
border-left-color: #06b6d4;
}
.sa-form[data-screen="crm-opportunities-list"] .crm-act-row {
border-left-color: #3b82f6;
}
.sa-form[data-screen="crm-reminders-list"] .crm-act-cols,
.sa-form[data-screen="crm-reminders-list"] .crm-act-row {
grid-template-columns: minmax(0, 1.4fr) minmax(5rem, 0.8fr) minmax(4.4rem, 0.55fr) 6.8rem;
}
.crm-act-stage {
display: block;
min-width: 0;
}
.crm-act-stage select {
width: 100%;
max-width: 9.5rem;
appearance: none;
border: 1px solid #e6edf5;
background: #f8fafc;
color: #0f172a;
border-radius: 999px;
padding: 0.28rem 1.6rem 0.28rem 0.7rem;
font: inherit;
font-size: 0.72rem;
font-weight: 700;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 0.85rem;
}
.sa-form[data-screen="crm-pipelines-list"] .crm-act-cols,
.sa-form[data-screen="crm-pipelines-list"] .crm-act-row {
grid-template-columns: minmax(0, 1.4fr) minmax(4.4rem, 0.55fr) minmax(4.8rem, 0.6fr) 7.2rem;
}
.sa-form[data-screen="crm-pipelines-list"] .crm-act-row {
border-left-color: #8b5cf6;
}
.mode-b-shell .sa-form[data-screen="crm-pipelines-list"] .crm-act-page {
min-width: 0;
}
.sa-form[data-screen="crm-stages-list"] .crm-act-cols,
.sa-form[data-screen="crm-stages-list"] .crm-act-row {
grid-template-columns: minmax(0, 1.4fr) minmax(5.2rem, 0.8fr) minmax(4.4rem, 0.55fr) 7.2rem;
}
.sa-form[data-screen="crm-stages-list"] .crm-act-row {
border-left-color: #8b5cf6;
}
@media (max-width: 640px) {
.crm-act-table,
.sa-form[data-screen="crm-notes-list"] .crm-tasks-table {
overflow-x: hidden;
}
.sa-form[data-screen="crm-reminders-list"] .crm-act-cols,
.sa-form[data-screen="crm-reminders-list"] .crm-act-row,
.sa-form[data-screen="crm-pipelines-list"] .crm-act-cols,
.sa-form[data-screen="crm-pipelines-list"] .crm-act-row,
.sa-form[data-screen="crm-emails-list"] .crm-act-cols,
.sa-form[data-screen="crm-emails-list"] .crm-act-row,
.sa-form[data-screen="crm-stages-list"] .crm-act-cols,
.sa-form[data-screen="crm-stages-list"] .crm-act-row,
.sa-form[data-screen="crm-tasks-list"] .crm-act-cols,
.sa-form[data-screen="crm-tasks-list"] .crm-act-row {
grid-template-columns: minmax(0, 1fr) 7.2rem;
}
.sa-form[data-screen="crm-reminders-list"] .crm-act-cols span:nth-child(n + 2):not([data-col="action"]),
.sa-form[data-screen="crm-pipelines-list"] .crm-act-cols span:nth-child(n + 2):not([data-col="action"]),
.sa-form[data-screen="crm-emails-list"] .crm-act-cols span:nth-child(n + 2):not([data-col="action"]),
.sa-form[data-screen="crm-stages-list"] .crm-act-cols span:nth-child(n + 2):not([data-col="action"]),
.sa-form[data-screen="crm-emails-list"] .crm-email-subject {
display: none;
}
.sa-form[data-screen="crm-notes-list"] .crm-tasks-head,
.sa-form[data-screen="crm-notes-list"] .crm-tasks-row {
grid-template-columns: minmax(0, 1fr) 5.6rem;
}
.sa-form[data-screen="crm-notes-list"] .crm-tasks-head span:nth-child(2),
.sa-form[data-screen="crm-notes-list"] .crm-tasks-head span:nth-child(3),
.sa-form[data-screen="crm-notes-list"] .crm-tasks-when,
.sa-form[data-screen="crm-notes-list"] .crm-tasks-status {
display: none;
}
}
/* ==== end activities Mode B core ==== */
/* ==== Meetings list modern :: live-only ==== */
.sa-form[data-screen="crm-meetings-list"] > .sa-form-head {
display: flex;
align-items: center;
}
.sa-form[data-screen="crm-meetings-list"] .crm-meet-modern .crm-tasks-head,
.sa-form[data-screen="crm-meetings-list"] .crm-meet-modern .crm-tasks-row {
grid-template-columns: minmax(0, 1.15fr) minmax(4.2rem, 0.85fr) minmax(5.2rem, 0.8fr) minmax(5.2rem, 0.8fr) 7.2rem;
}
.sa-form[data-screen="crm-meetings-list"] .crm-meet-modern .crm-tasks-row {
border-left-color: #3b82f6;
}
.sa-form[data-screen="crm-meetings-list"] .crm-leads-btn.icon-only {
width: 2.65rem;
height: 2.65rem;
padding: 0;
border-radius: 999px;
background: #2563eb;
border: 1px solid #2563eb;
color: #fff;
}
@media (max-width: 720px) {
.sa-form[data-screen="crm-meetings-list"] .crm-meet-modern .crm-tasks-head,
.sa-form[data-screen="crm-meetings-list"] .crm-meet-modern .crm-tasks-row {
grid-template-columns: minmax(0, 1fr) 7.2rem;
}
.sa-form[data-screen="crm-meetings-list"] .crm-meet-modern .crm-tasks-head span:nth-child(2),
.sa-form[data-screen="crm-meetings-list"] .crm-meet-modern .crm-tasks-head span:nth-child(3),
.sa-form[data-screen="crm-meetings-list"] .crm-meet-modern .crm-tasks-head span:nth-child(4),
.sa-form[data-screen="crm-meetings-list"] .crm-meet-modern .crm-tasks-when {
display: none;
}
}
/* ==== end meetings list modern ==== */
/* ==== Estimate/invoice add form: nested steps, no sheet scroll ==== */
.sheet.sheet-estimate-stepped {
overflow: hidden;
}
.sheet.sheet-estimate-stepped .sheet-body {
overflow: hidden !important;
display: flex;
flex-direction: column;
max-height: min(78dvh, 36rem);
}
.sheet.sheet-estimate-stepped .lead-form-stepped {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.lead-form .lead-form-steps {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 0.15rem;
}
.lead-form .lead-form-step {
display: inline-flex;
align-items: center;
gap: 0.28rem;
font-size: 0.72rem;
font-weight: 600;
color: #94a3b8;
}
.lead-form .lead-form-step em {
font-style: normal;
display: inline-grid;
place-items: center;
width: 1.2rem;
height: 1.2rem;
border-radius: 999px;
background: #e2e8f0;
color: #475569;
font-size: 0.68rem;
}
.lead-form .lead-form-step.active,
.lead-form .lead-form-step[data-on] {
color: #0f172a;
}
.lead-form .lead-form-step.active em,
.lead-form .lead-form-step[data-on] em {
background: #2563eb;
color: #fff;
}
.sheet.sheet-estimate-stepped .lead-form-panel {
flex: 1;
min-height: 0;
overflow: hidden;
}
.sheet.sheet-estimate-stepped .lead-form-panel[data-step="items"] {
overflow-y: auto;
scrollbar-width: none;
}
.sheet.sheet-estimate-stepped .lead-form-panel[data-step="items"]::-webkit-scrollbar {
display: none;
}
.sheet.sheet-estimate-stepped .lead-form-actions {
flex-shrink: 0;
margin-top: auto;
}
/* ==== Estimate/invoice print document (clean full-screen PY UI) ==== */
.overlay.overlay-commerce-print {
align-items: stretch;
justify-content: center;
padding: 0 !important;
background: #eef3f8;
z-index: 320;
overflow: hidden;
}
.commerce-print-screen {
width: min(100%, var(--mode-b-core-width, 900px));
max-width: var(--mode-b-core-width, 900px);
height: 100%;
min-height: 100dvh;
margin: 0 auto;
display: flex;
flex-direction: column;
background: #f4f7fb;
box-shadow: 0 0 0 1px #e8eef5;
}
.commerce-print-toolbar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.65rem 0.75rem 0.55rem;
background: #fff;
border: 0;
border-bottom: 1px solid #e8eef5;
border-radius: 0;
z-index: 2;
}
.commerce-print-toolbar-row {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
flex: 1 1 auto;
}
.commerce-print-titles {
min-width: 0;
}
.commerce-print-toolbar h2 {
margin: 0;
font-family: var(--serif);
font-size: 1.28rem;
font-weight: 750;
color: #12202b;
line-height: 1.1;
}
.commerce-print-titles p {
margin: 0.12rem 0 0;
font-size: 0.75rem;
font-weight: 650;
color: #64748b;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.commerce-print-actions {
display: flex;
flex-wrap: nowrap;
gap: 0.3rem;
align-items: center;
flex: 0 0 auto;
}
.commerce-print-wa {
border: 0;
border-radius: 999px;
min-width: 2.1rem;
height: 2.1rem;
padding: 0 0.55rem;
background: #16a34a;
color: #fff;
font-weight: 800;
font-size: 0.68rem;
letter-spacing: 0.04em;
cursor: pointer;
}
.commerce-print-body {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 0.75rem 0.75rem 1rem;
}
.commerce-print-paper {
background: #fff;
border: 1px solid #e8eef4;
border-radius: 1.05rem;
min-height: unset;
width: 100%;
max-width: none;
padding: 1.05rem 1rem 1.2rem;
color: #0f172a;
box-sizing: border-box;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.commerce-print-brand {
display: flex;
justify-content: space-between;
gap: 1rem;
padding-bottom: 0.9rem;
border-bottom: 1px solid #e2e8f0;
}
.commerce-print-company {
margin: 0;
font-size: 1.15rem;
font-weight: 800;
color: #2563eb;
}
.commerce-print-logo {
display: block;
max-height: 80px;
max-width: 260px;
width: auto;
height: auto;
object-fit: contain;
}
.commerce-print-kind {
text-align: right;
}
.commerce-print-kind > p:first-child {
margin: 0;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.06em;
color: #2563eb;
}
.commerce-print-meta {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 0.85rem;
margin: 1rem 0 1.05rem;
}
.commerce-print-label {
margin: 0 0 0.25rem;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #94a3b8;
}
.commerce-print-meta dl {
margin: 0;
display: grid;
gap: 0.45rem;
text-align: right;
}
.commerce-print-meta dt {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #94a3b8;
}
.commerce-print-meta dd {
margin: 0.05rem 0 0;
font-weight: 700;
}
.commerce-print-lines {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.commerce-print-lines > li {
border: 1px solid #e8eef4;
border-radius: 0.85rem;
padding: 0.7rem 0.75rem;
background: #f8fafc;
}
.commerce-print-line-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.commerce-print-line-top strong {
min-width: 0;
font-size: 0.9rem;
overflow-wrap: anywhere;
}
.commerce-print-line-top span {
flex: 0 0 auto;
font-weight: 800;
color: #0f172a;
}
.commerce-print-line-meta {
margin: 0.55rem 0 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.4rem;
}
.commerce-print-line-meta div {
min-width: 0;
background: #fff;
border: 1px solid #eef2f7;
border-radius: 0.65rem;
padding: 0.35rem 0.45rem;
}
.commerce-print-line-meta dt {
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #94a3b8;
}
.commerce-print-line-meta dd {
margin: 0.12rem 0 0;
font-size: 0.78rem;
font-weight: 750;
color: #0f172a;
overflow-wrap: anywhere;
}
.commerce-print-line-meta dd em {
display: block;
font-style: normal;
font-size: 0.68rem;
font-weight: 650;
color: #64748b;
margin-top: 0.08rem;
}
.commerce-print-line-note {
margin: 0.3rem 0 0;
color: #64748b;
font-size: 0.75rem;
line-height: 1.35;
}
.commerce-print-totals {
margin-left: auto;
margin-top: 0.85rem;
width: min(16rem, 100%);
display: grid;
gap: 0.35rem;
font-size: 0.85rem;
}
.commerce-print-totals p {
display: flex;
justify-content: space-between;
margin: 0;
color: #475569;
}
.commerce-print-total {
font-weight: 800;
color: #0f172a !important;
padding-top: 0.35rem;
border-top: 1px solid #e2e8f0;
}
.commerce-print-notes {
margin-top: 1.1rem;
font-size: 0.82rem;
}
.commerce-print-foot {
flex: 0 0 auto;
padding: 0.7rem 0.75rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
background: #fff;
border-top: 1px solid #e8eef5;
}
.commerce-print-foot .primary-btn {
width: 100%;
}
@media print {
body * {
visibility: hidden;
}
.commerce-print-paper,
.commerce-print-paper * {
visibility: visible;
}
.overlay.overlay-commerce-print,
.commerce-print-screen,
.commerce-print-body {
position: static !important;
background: #fff;
overflow: visible !important;
height: auto;
padding: 0;
}
.commerce-print-paper {
position: absolute;
inset: 0;
width: 100%;
min-height: auto;
border: 0;
box-shadow: none;
}
.no-print {
display: none !important;
}
}
/* ==== Estimate customer searchable select ==== */
.commerce-customer-picker {
position: relative;
}
.commerce-customer-menu {
position: fixed;
z-index: 260;
margin: 0;
padding: 0.35rem 0;
list-style: none;
max-height: min(18rem, calc(100dvh - 1.5rem));
overflow: auto;
background: #fff;
border: 1px solid #d7e2ee;
border-radius: 0.85rem;
box-shadow: 0 16px 40px color-mix(in srgb, #0f172a 18%, transparent);
}
.commerce-customer-menu li {
margin: 0;
}
.commerce-customer-menu button {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.1rem;
width: 100%;
border: 0;
background: transparent;
padding: 0.45rem 0.75rem;
text-align: left;
cursor: pointer;
color: #0f172a;
}
.commerce-customer-menu button:hover,
.commerce-customer-menu button[aria-selected="true"] {
background: #eff6ff;
}
.commerce-customer-menu .muted {
padding: 0.45rem 0.75rem;
}
.sa-form.crm-fb-shell > .sa-form-head {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.75rem;
padding: 0 0 0.7rem;
border-bottom: 1px solid #eef2f6;
}
.sa-form.crm-fb-shell > .sa-form-head .sa-form-pict {
display: none;
}
.sa-form.crm-fb-shell > .sa-form-head h1 {
margin: 0;
font-size: 1.08rem;
font-weight: 750;
text-align: left;
color: #163a5f;
}
.sa-form.crm-fb-shell > .sa-form-head .sa-form-titles {
flex: 1;
min-width: 0;
}
.crm-fb-head-actions {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 0.45rem;
margin-left: auto;
flex-shrink: 0;
}
.sa-form.crm-fb-shell .crm-fb-head-actions .primary-btn {
width: auto;
min-width: 4.75rem;
min-height: 2.3rem;
padding: 0.4rem 1.05rem;
}
.crm-fb-print-header {
display: grid;
gap: 0.75rem;
padding: 0.9rem;
border: 1px solid #e2e8f0;
border-radius: 1rem;
background: #fff;
}
.crm-fb-print-header h2 {
margin: 0;
font-size: 1rem;
color: #163a5f;
}
.crm-fb-form-tools {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.crm-fb-tool {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.35rem;
padding: 0.4rem 0.95rem;
border-radius: 0.8rem;
border: 1.5px solid #c4b5fd;
background: #f5f3ff;
color: #5b21b6;
font: inherit;
font-weight: 700;
cursor: pointer;
}
.crm-fb-print-save {
width: auto;
min-width: 7rem;
min-height: 2.3rem;
padding: 0.4rem 1rem;
justify-self: start;
}
.crm-print-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.65rem;
}
.crm-print-fields label,
.crm-print-fields-wide {
display: grid;
gap: 0.28rem;
font-size: 0.8rem;
font-weight: 650;
color: #334155;
}
.crm-print-fields-wide {
grid-column: 1 / -1;
}
.crm-print-fields input,
.crm-print-fields textarea {
min-height: 2.35rem;
border: 1px solid #e2e8f0;
border-radius: 0.7rem;
padding: 0.4rem 0.7rem;
font: inherit;
}
.crm-print-form-link {
margin: 0 0 0.5rem;
}
.crm-print-form-link a,
.crm-fb-print-header-row a {
font-weight: 700;
color: #2563eb;
}
.crm-print-editor {
display: grid;
gap: 1rem;
max-width: var(--mode-b-core-width, 900px);
margin-inline: auto;
width: 100%;
}
.crm-print-editor.is-edit .crm-fb-print-header {
width: 100%;
}
.crm-print-editor.is-preview {
max-width: 52rem;
}
.crm-print-live {
display: grid;
gap: 0.45rem;
min-width: 0;
}
.crm-print-live h2 {
margin: 0;
font-size: 1rem;
color: #163a5f;
}
.crm-print-live .commerce-print-paper {
margin: 0;
}
@media (max-width: 36rem) {
.crm-print-fields {
grid-template-columns: 1fr;
}
}
.crm-fb-top {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 0.45rem;
}
.crm-fb-preview {
display: inline-flex;
align-items: center;
min-height: 2.3rem;
padding: 0 0.9rem;
border-radius: 0.75rem;
border: 1.5px solid #3b82f6;
background: #eff6ff;
color: #1d4ed8;
font: inherit;
font-weight: 700;
}
.crm-fb-canvas {
background: #fff;
border-radius: 1.1rem;
padding: 1.05rem 0.95rem 1.2rem;
box-shadow: 0 10px 28px #12202b0f;
width: 100%;
max-width: var(--mode-b-core-width, 900px);
margin-inline: auto;
box-sizing: border-box;
}
.crm-fb-page {
width: 100%;
max-width: var(--mode-b-core-width, 900px);
margin-inline: auto;
}
.crm-fb-title {
margin: 0;
font-size: 1.35rem;
font-weight: 750;
color: #163a5f;
}
.crm-fb-lede {
margin: 0.2rem 0 0.85rem;
color: #8a97a8;
font-size: 0.9rem;
}
.crm-fb-steps {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0 0 0.9rem;
}
.crm-fb-step {
border: 1px solid #e2e8f0;
background: #fff;
color: #64748b;
border-radius: 999px;
padding: 0.35rem 0.85rem;
font: inherit;
font-size: 0.82rem;
font-weight: 650;
}
.crm-fb-step.is-on {
border-color: #3b82f6;
color: #1d4ed8;
background: #eff6ff;
}
.crm-fb-unused {
margin: 0 0 0.75rem;
font-size: 0.8rem;
color: #64748b;
}
.crm-fb-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-auto-flow: dense;
gap: 0.75rem;
}
.crm-fb-block {
position: relative;
grid-column: span 6;
background: #f4f7fb;
border: 1px solid transparent;
border-radius: 0.85rem;
padding: 0.85rem 0.9rem 0.95rem 1.7rem;
min-width: 0;
}
.crm-fb-block[data-span="full"] {
grid-column: 1 / -1;
}
.crm-fb-block.is-selected {
background: #fff;
border-color: #3b82f6;
box-shadow: 0 0 0 1px #3b82f6;
}
.crm-fb-block.is-dragging {
opacity: 0.7;
}
.crm-fb-handle {
position: absolute;
left: 0.3rem;
top: 50%;
transform: translateY(-50%);
border: 0;
background: transparent;
padding: 0.2rem;
cursor: grab;
}
.crm-fb-grip {
display: block;
width: 12px;
height: 16px;
background: radial-gradient(#94a3b8 1.35px, transparent 1.55px);
background-size: 6px 6px;
}
.crm-fb-knob {
position: absolute;
width: 12px;
height: 12px;
padding: 0;
border: 2px solid #fff;
border-radius: 999px;
background: #3b82f6;
box-shadow: 0 0 0 1px #3b82f6;
z-index: 3;
}
.crm-fb-knob-n { top: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.crm-fb-knob-s { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.crm-fb-knob-e { right: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.crm-fb-knob-w { left: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.crm-fb-knob-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.crm-fb-knob-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.crm-fb-knob-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.crm-fb-knob-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.crm-fb-field-label {
display: flex;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.35rem;
font-size: 0.78rem;
font-weight: 650;
color: #64748b;
}
.crm-fb-field-label strong {
color: #334155;
font-weight: 700;
}
.crm-fb-field-label em {
color: #dc2626;
font-style: normal;
}
.crm-fb-input {
width: 100%;
min-height: 2.45rem;
border: 1px solid #e2e8f0;
border-radius: 0.7rem;
background: #fff;
padding: 0.55rem 0.75rem;
font: inherit;
color: #94a3b8;
}
.crm-fb-size {
display: flex;
flex-wrap: wrap;
gap: 0.45rem 0.85rem;
margin-top: 0.55rem;
align-items: center;
justify-content: flex-end;
}
.crm-fb-remove {
border: 0;
background: transparent;
color: #be185d;
font: inherit;
cursor: pointer;
}
.crm-fb-add {
display: grid;
place-items: center;
gap: 0.35rem;
width: 100%;
min-height: 5.2rem;
margin-top: 0.85rem;
border: 1.5px dashed #d5dee8;
border-radius: 0.95rem;
background: #fff;
color: #94a3b8;
font: inherit;
cursor: pointer;
}
.crm-fb-add-plus {
width: 2rem;
height: 2rem;
border-radius: 999px;
border: 1.5px solid #cbd5e1;
display: grid;
place-items: center;
}
@media (max-width: 36rem) {
.crm-fb-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
.overlay.overlay-crm-fb-modal {
align-items: center;
justify-content: center;
padding: 1rem;
background: #0f172a66;
}
.crm-fb-modal {
width: min(34rem, 100%);
max-height: min(90dvh, 52rem);
overflow: auto;
background: #fff;
border-radius: 1.15rem;
padding: 1rem 1rem 1.1rem;
box-shadow: 0 18px 48px #12202b22;
}
.crm-fb-modal-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
}
.crm-fb-modal-head h2 {
margin: 0;
font-size: 1.15rem;
color: #163a5f;
}
.crm-fb-close {
border: 0;
background: transparent;
font-size: 1.45rem;
line-height: 1;
cursor: pointer;
color: #64748b;
}
.crm-fb-search {
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0.85rem 0;
background: #f1f5f9;
border-radius: 0.85rem;
padding: 0.45rem 0.7rem;
}
.crm-fb-search input {
border: 0;
background: transparent;
width: 100%;
font: inherit;
}
.crm-fb-catalog {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.65rem;
}
.crm-fb-catalog-card {
display: flex;
gap: 0.55rem;
align-items: flex-start;
text-align: left;
border: 1px solid #e2e8f0;
border-radius: 0.9rem;
background: #fff;
padding: 0.7rem;
font: inherit;
cursor: pointer;
}
.crm-fb-catalog-card:hover {
border-color: #c4b5fd;
background: #f8f5ff;
}
.crm-fb-catalog-card em {
display: block;
font-style: normal;
color: #94a3b8;
font-size: 0.78rem;
}
.crm-fb-catalog-icon {
width: 2.1rem;
height: 2.1rem;
border-radius: 999px;
background: #dbeafe;
color: #2563eb;
flex-shrink: 0;
display: grid;
place-items: center;
font-size: 0.78rem;
font-weight: 800;
}
.crm-fb-settings {
display: grid;
gap: 0.75rem;
margin-top: 0.85rem;
}
.crm-fb-settings-kind {
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0;
font-weight: 700;
color: #163a5f;
}
.crm-fb-settings label {
display: grid;
gap: 0.3rem;
font-size: 0.82rem;
font-weight: 650;
color: #334155;
}
.crm-fb-settings input,
.crm-fb-settings select {
min-height: 2.4rem;
border: 1px solid #e2e8f0;
border-radius: 0.7rem;
padding: 0.45rem 0.7rem;
font: inherit;
}
.crm-fb-check {
display: flex !important;
flex-direction: row;
align-items: center;
gap: 0.45rem;
}
.crm-fb-check input {
width: 1.05rem;
min-height: 1.05rem;
}
.crm-fb-options {
display: grid;
gap: 0.45rem;
}
.crm-fb-options p {
margin: 0;
font-size: 0.82rem;
font-weight: 650;
}
.crm-fb-option-row {
display: flex;
gap: 0.4rem;
align-items: center;
}
.crm-fb-option-row input {
flex: 1;
min-width: 0;
}
.crm-fb-modal-actions {
display: flex;
justify-content: flex-end;
gap: 0.45rem;
align-items: center;
}
.crm-fb-modal .crm-fb-save {
width: auto;
min-width: 6.5rem;
min-height: 2.4rem;
padding: 0.45rem 1.1rem;
}
.crm-fb-choice-preview,
.crm-fb-live-field {
display: grid;
gap: 0.35rem;
font-size: 0.85rem;
color: #334155;
}
.crm-fb-choice-preview label,
.crm-fb-live-field .crm-fb-check {
display: flex;
align-items: center;
gap: 0.4rem;
}
.crm-fb-live-field select[multiple] {
min-height: 5.5rem;
}
.crm-fb-rating {
display: flex;
gap: 0.45rem;
flex-wrap: wrap;
font-size: 1.1rem;
color: #7c3aed;
}
.crm-fb-rating label {
display: flex;
align-items: center;
gap: 0.2rem;
}
.commerce-builder-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin: 0.75rem 0 0;
}
.commerce-form-preview-kicker {
margin: 0 0 0.75rem;
font-size: 0.78rem;
font-weight: 700;
color: #2563eb;
}
.commerce-form-preview-body {
display: flex;
flex-direction: column;
gap: 0.75rem;
overflow: auto;
max-height: min(70dvh, 36rem);
}
.commerce-layout-cell[data-span="full"] {
grid-column: 1 / -1;
}
.commerce-layout-cell {
width: min(100%, var(--fb-w, 100%));
max-width: min(var(--fb-w, none), var(--mode-b-core-width, 900px));
}
.commerce-layout-cell .field-control,
.commerce-layout-cell .field-control input,
.commerce-layout-cell .field-control select,
.commerce-layout-cell .field > input {
min-height: var(--fb-h, 2.45rem);
height: var(--fb-h, auto);
}
.commerce-layout-cell textarea {
min-height: var(--fb-h, 4rem);
height: var(--fb-h, auto);
}
/* Estimate / invoice status chips (replaces "All 2 · Draft 2" text) */
.crm-commerce-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.45rem;
margin: 0 0 0.7rem;
}
.crm-commerce-metric {
display: flex;
flex-direction: column;
gap: 0.12rem;
min-width: 0;
padding: 0.5rem 0.65rem;
border-radius: 0.85rem;
border: 1px solid #e8eef5;
background: #f8fafc;
}
.crm-commerce-metric em {
font-style: normal;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #64748b;
}
.crm-commerce-metric strong {
font-size: 0.88rem;
font-weight: 800;
color: #0f172a;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-commerce-metric.is-paid {
background: #ecfdf5;
border-color: #bbf7d0;
}
.crm-commerce-metric.is-paid strong { color: #047857; }
.crm-commerce-metric.is-due {
background: #fef2f2;
border-color: #fecaca;
}
.crm-commerce-metric.is-due strong { color: #b91c1c; }
.crm-commerce-metric.is-open {
background: #eff6ff;
border-color: #bfdbfe;
}
.crm-commerce-metric.is-open strong { color: #1d4ed8; }
.crm-commerce-status-bar {
display: flex;
flex-wrap: nowrap;
gap: 0.4rem;
margin: 0 0 0.85rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 0.1rem 0 0.15rem;
}
.crm-commerce-status-bar::-webkit-scrollbar {
display: none;
}
.crm-commerce-status-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex: 0 0 auto;
border: 1px solid #e2e8f0;
background: #fff;
color: #475569;
border-radius: 999px;
padding: 0.38rem 0.7rem 0.38rem 0.8rem;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.crm-commerce-status-chip.is-active {
border-color: #93c5fd;
background: #eff6ff;
color: #1d4ed8;
box-shadow: 0 0 0 3px color-mix(in srgb, #2563eb 12%, transparent);
}
.crm-commerce-status-count {
min-width: 1.25rem;
height: 1.25rem;
padding: 0 0.35rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.68rem;
font-weight: 800;
background: #f1f5f9;
color: #334155;
}
.crm-commerce-status-chip.is-active .crm-commerce-status-count {
background: #2563eb;
color: #fff;
}
/* ==== CRM overlay drawer nav :: modeb-crm-drawer-nav (2026-09-08) ==== */
.mode-b-nav-list {
display: contents;
}
.mode-b-nav-toggle {
display: none;
}
/* Single-column shell: nav never reserves layout width; content stays full-bleed. */
.mode-b-shell[data-mode-b="crm"] {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto minmax(0, 1fr) auto;
grid-template-areas:
"header"
"main"
"footer";
column-gap: 0 !important;
row-gap: 0;
width: 100% !important;
max-width: var(--mode-b-core-width) !important;
margin-inline: auto !important;
box-sizing: border-box !important;
padding-left: var(--mode-b-core-pad) !important;
padding-right: var(--mode-b-core-pad) !important;
height: 100dvh !important;
max-height: 100dvh !important;
min-height: 0 !important;
overflow: hidden !important;
}
.mode-b-shell[data-mode-b="crm"] > .workspace-header.mode-b-header,
.mode-b-shell[data-mode-b="crm"] > header.mode-b-header,
.mode-b-shell[data-mode-b="crm"] .workspace-header.mode-b-header {
grid-area: header;
position: sticky;
top: 0;
z-index: calc(var(--mode-b-chrome-z) + 2);
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Dim page when drawer is open (simple content difference). */
.mode-b-shell[data-mode-b="crm"] > .mode-b-nav-backdrop {
display: none;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-backdrop {
position: absolute;
inset: 0;
z-index: calc(var(--mode-b-chrome-z) + 2);
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: rgba(15, 23, 42, 0.22);
opacity: 0;
pointer-events: none;
cursor: pointer;
transition: opacity 0.22s ease;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav-backdrop {
display: block;
opacity: 1;
pointer-events: auto;
}
/* Overlay rail: never takes layout space; sits over content on the left. */
.mode-b-shell[data-mode-b="crm"] > .mode-b-nav,
.mode-b-shell[data-mode-b="crm"] .mode-b-nav {
grid-area: unset !important;
position: absolute !important;
inset: auto !important;
left: 0.35rem !important;
right: auto !important;
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
z-index: calc(var(--mode-b-chrome-z) + 4);
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
width: auto !important;
max-width: none !important;
height: auto !important;
max-height: min(78dvh, 28rem) !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
background: transparent !important;
border: 0 !important;
border-radius: 1.35rem !important;
box-shadow: none !important;
overflow: visible !important;
pointer-events: none;
transition: background-color 0.22s ease, box-shadow 0.22s ease, padding 0.22s ease, gap 0.22s ease;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] > .mode-b-nav,
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav {
gap: 0.7rem !important;
padding: 0.45rem !important;
background: #fff !important;
border: 1px solid #e8eef5 !important;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14) !important;
pointer-events: auto;
animation: modeb-crm-drawer-slide-in 0.28s ease-out both;
}
@keyframes modeb-crm-drawer-slide-in {
from {
opacity: 0.55;
transform: translate(-0.85rem, -50%);
}
to {
opacity: 1;
transform: translate(0, -50%);
}
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
left: auto;
top: auto;
transform: none;
z-index: 2;
order: 0;
flex: 0 0 auto;
width: 2.15rem;
height: 2.15rem;
margin: 0;
padding: 0;
border: 1px solid #e8eef5;
border-radius: 999px;
background: #fff;
color: #475569;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
cursor: pointer;
pointer-events: auto;
transition: box-shadow 0.15s ease, background-color 0.15s ease, transform 0.18s ease;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-toggle:hover {
background: #fff;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-toggle:active {
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-toggle-icon {
width: 1.05rem;
height: 1.05rem;
display: block;
background: no-repeat center / contain;
transition: transform 0.2s ease;
/* Closed: right arrow — open menu */
background-image: url("data:image/svg+xml;utf8,");
}
/* Open: same-spot close arrow (flipped) + menu icons stacked below. */
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav-toggle {
width: 2.15rem;
height: 2.15rem;
background: #fff;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav-toggle-icon {
width: 1.05rem;
height: 1.05rem;
/* Left arrow — close menu (same place as open control) */
background-image: url("data:image/svg+xml;utf8,");
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.85rem;
position: relative;
left: auto;
top: auto;
transform: translateX(-0.65rem);
order: 1;
width: auto;
max-height: 0;
min-height: 0;
margin: 0;
padding: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
visibility: hidden;
transition:
opacity 0.2s ease,
transform 0.26s ease,
max-height 0.26s ease,
visibility 0.2s ease;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav-list {
max-height: 22rem;
opacity: 1;
transform: translateX(0);
visibility: visible;
pointer-events: auto;
overflow: visible;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="false"] .mode-b-nav-list {
display: none !important;
pointer-events: none !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item {
flex: 0 0 auto !important;
width: 2rem !important;
min-width: 0 !important;
min-height: 0 !important;
height: 2rem !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 0 !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 999px !important;
font-size: 0 !important;
line-height: 0 !important;
background: #f8fafc !important;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
border: 1px solid #e8eef5 !important;
color: #64748b !important;
pointer-events: auto;
opacity: 0;
transform: translateX(-0.55rem);
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item {
opacity: 1;
transform: translateX(0);
animation: modeb-crm-nav-item-in 0.28s ease-out both;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(1) { animation-delay: 0.03s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(2) { animation-delay: 0.06s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(3) { animation-delay: 0.09s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(4) { animation-delay: 0.12s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(5) { animation-delay: 0.15s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(6) { animation-delay: 0.18s; }
@keyframes modeb-crm-nav-item-in {
from {
opacity: 0;
transform: translateX(-0.7rem);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item.active {
background: #eff6ff !important;
color: #0f172a !important;
border-color: #bfdbfe !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item:before {
margin: 0 !important;
padding: 0 !important;
width: 1.15rem !important;
height: 1.15rem !important;
background-color: transparent !important;
border-radius: 0 !important;
box-sizing: border-box !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item[href="/app/crm"]:before,
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item[href="/app/crm/"]:before {
padding: 0 !important;
width: 1.15rem !important;
height: 1.15rem !important;
background-color: transparent !important;
border-radius: 0 !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-label {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.mode-b-shell[data-mode-b="crm"] > a.skip {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
background: transparent !important;
color: transparent !important;
}
.mode-b-shell[data-mode-b="crm"] > a.skip:focus,
.mode-b-shell[data-mode-b="crm"] > a.skip:focus-visible {
position: fixed !important;
left: 0.75rem !important;
top: 0.75rem !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
clip: auto !important;
overflow: visible !important;
padding: 0.4rem 0.7rem !important;
border-radius: 0.6rem !important;
background: #0f172a !important;
color: #fff !important;
z-index: 100 !important;
}
.mode-b-shell[data-mode-b="crm"] > main,
.mode-b-shell[data-mode-b="crm"] main,
.mode-b-shell[data-mode-b="crm"] #main {
grid-area: main;
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 0.75rem !important;
min-width: 0;
min-height: 0;
overflow-x: hidden !important;
overflow-y: auto !important;
}
.mode-b-shell[data-mode-b="crm"] > .mode-b-footer,
.mode-b-shell[data-mode-b="crm"] .mode-b-footer {
grid-area: footer;
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 0.75rem !important;
}
.mode-b-shell[data-mode-b="crm"] .page-container,
.mode-b-shell[data-mode-b="crm"] .crm-fb-page,
.mode-b-shell[data-mode-b="crm"] .crm-fb-canvas {
max-width: none !important;
width: 100% !important;
margin-inline: 0 !important;
box-sizing: border-box !important;
}
@media (max-width: 40rem) {
.mode-b-shell[data-mode-b="crm"] {
padding-left: 0.55rem !important;
padding-right: 0.55rem !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav {
left: 0.05rem !important;
gap: 0.7rem !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-list {
gap: 0.9rem;
}
}
/* ==== end modeb-crm-drawer-nav ==== */
/* ==== Leads / Contacts / Customers: white page backgrounds :: modeb-people-white-bg (2026-09-08) ==== */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"],
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"],
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list > li .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card.crm-lead-row {
background: #fff !important;
background-color: #fff !important;
background-image: none !important;
}
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.mode-b-shell .sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.crm-contacts-list,
.crm-contacts-list > li:nth-child(even) .crm-contact-row,
.crm-contacts-list > li:nth-child(odd) .crm-contact-row {
background: #fff !important;
background-color: #fff !important;
}
.mode-b-shell main:has([data-screen="crm-leads-list"]),
.mode-b-shell main:has([data-screen="crm-contacts-list"]),
.mode-b-shell main:has([data-screen="crm-leads-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-leads-list"]) .sa-form-list,
.mode-b-shell main:has([data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-contacts-list"]) .sa-form-list {
background: #fff !important;
}
/* ==== end modeb-people-white-bg ==== */
/* ==== Ported from Mode B py-crm CRM updates (Mode A only; Mode B hosts untouched) ==== */
/* ==== CRM Mode B header → Mode A core design :: modeb-header-redesign ==== */
/* Match Mode A surface: core #f6f8fc bar, brand-blue hairline, light chrome. */
.mode-b-shell .workspace-header.mode-b-header {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
background-image: none !important;
border-bottom: 1px solid #e2e8f0 !important;
box-shadow: none !important;
padding-top: 0.65rem !important;
padding-bottom: 0.55rem !important;
position: sticky;
overflow: visible;
}
.mode-b-shell .workspace-header.mode-b-header::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: linear-gradient(90deg, #0055ff 0%, #2563eb 55%, #60a5fa 100%);
pointer-events: none;
}
.mode-b-shell .workspace-header.mode-b-header .mode-b-title strong {
font-family: var(--serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif);
font-size: 1.05rem;
font-weight: 650;
letter-spacing: -0.02em;
color: #0a1a4a;
}
/* Workspace context pill  Mode A soft blue */
.mode-b-shell .workspace-header.mode-b-header .context-slot .context-slot-label,
.mode-b-shell .workspace-header.mode-b-header .context-slot .context-slot-trigger {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.22rem 0.6rem;
border-radius: 999px;
background: color-mix(in srgb, #0055ff 8%, #f6f8fc);
border: 1px solid color-mix(in srgb, #0055ff 16%, transparent);
color: #0022aa;
font-size: 0.78rem;
font-weight: 650;
line-height: 1.2;
white-space: nowrap;
}
.mode-b-shell .workspace-header.mode-b-header .context-slot .context-slot-trigger:hover {
background: color-mix(in srgb, #0055ff 14%, #f6f8fc);
}
/* Avatar ring  Mode A brand */
.mode-b-shell .workspace-header.mode-b-header .user-menu .avatar-btn {
border-radius: 999px;
padding: 0;
background: transparent;
box-shadow: 0 0 0 2px #f6f8fc, 0 0 0 4px rgba(0, 85, 255, 0.28);
transition: box-shadow 0.15s ease;
}
.mode-b-shell .workspace-header.mode-b-header .user-menu .avatar-btn:hover {
box-shadow: 0 0 0 2px #f6f8fc, 0 0 0 4px rgba(0, 85, 255, 0.5);
}
/* ==== Add Lead form: compact gaps + mic beside label :: modeb-lead-form-compact (2026-09-03) ==== */
.lead-form.classic-form,
.lead-form.stack {
gap: 0.5rem;
}
.lead-form .lead-form-grid {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.lead-form .field {
gap: 0.18rem;
}
.lead-form .field-label-row {
display: inline-flex;
align-items: center;
gap: 0.4rem;
width: auto;
max-width: 100%;
}
.lead-form .field-with-mic .voice-session {
position: static;
top: auto;
right: auto;
margin: 0;
}
.lead-form .field-with-mic .voice-session .voice-btn {
width: 1.45rem;
height: 1.45rem;
}
.lead-form .lead-phone-field {
display: flex;
flex-direction: column;
gap: 0.18rem;
}
.lead-form .lead-phone-field .field-label-row {
margin-bottom: 0;
}
.lead-form .lead-form-steps {
margin-bottom: 0.1rem;
}
/* ==== CRM Lead detail: compact layout :: modeb-lead-detail (2026-09-03) ==== */
.mode-b-shell .crm-lead-detail {
display: flex;
flex-direction: column;
gap: 0.55rem;
font-family: inherit;
}
.mode-b-shell .crm-lead-detail-bar {
display: grid;
grid-template-columns: 2rem 1fr 2rem;
align-items: center;
min-height: 1.85rem;
gap: 0.35rem;
}
.mode-b-shell .crm-lead-detail-bar-title {
margin: 0;
text-align: center;
font-family: inherit;
font-size: 1.05rem;
font-weight: 750;
letter-spacing: -0.02em;
color: #0f172a;
}
.mode-b-shell .crm-lead-detail-back {
width: 1.85rem !important;
height: 1.85rem !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #2563eb;
}
.mode-b-shell .crm-lead-detail-menu-wrap {
position: relative;
justify-self: end;
}
.mode-b-shell .crm-lead-detail-icon-btn {
width: 1.85rem;
height: 1.85rem;
border-radius: 0.45rem;
border: 0;
background: transparent;
color: #475569;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.mode-b-shell .crm-lead-detail-menu {
position: absolute;
right: 0;
top: 2.1rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.6rem;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
display: flex;
flex-direction: column;
min-width: 11rem;
z-index: 5;
overflow: hidden;
}
.mode-b-shell .crm-lead-detail-menu button {
text-align: left;
padding: 0.5rem 0.75rem;
background: none;
border: 0;
cursor: pointer;
font-size: 0.86rem;
color: #0f172a;
}
.mode-b-shell .crm-lead-detail-menu button:hover {
background: #f8fafc;
}
.mode-b-shell .crm-lead-profile-card {
display: grid;
grid-template-columns: 2.35rem minmax(0, 1fr) auto;
align-items: center;
gap: 0.65rem;
padding: 0.35rem 0 0.45rem;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
text-align: left;
}
.mode-b-shell .crm-lead-profile-avatar {
width: 2.35rem;
height: 2.35rem;
border-radius: 999px;
background: #eff6ff;
color: #1d4ed8;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.78rem;
font-weight: 750;
}
.mode-b-shell .crm-lead-profile-meta {
min-width: 0;
}
.mode-b-shell .crm-lead-profile-name {
margin: 0;
font-family: inherit;
font-size: 1rem;
font-weight: 750;
letter-spacing: -0.02em;
color: #0f172a;
line-height: 1.2;
}
.mode-b-shell .crm-lead-profile-sub {
margin: 0.12rem 0 0;
color: #64748b;
font-size: 0.78rem;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem;
}
.mode-b-shell .crm-lead-profile-card .crm-lead-status {
display: inline-block !important;
margin: 0;
background: #ecfdf5 !important;
color: #0f766e !important;
padding: 0.08rem 0.42rem;
border-radius: 999px;
font-size: 0.66rem;
font-weight: 700;
}
.mode-b-shell .crm-lead-convert-btn {
margin: 0;
display: inline-flex;
align-items: center;
padding: 0.32rem 0.65rem;
border-radius: 0.45rem;
border: 0;
background: #2563eb;
color: #fff;
font-size: 0.75rem;
font-weight: 650;
cursor: pointer;
white-space: nowrap;
}
.mode-b-shell .crm-lead-convert-btn:disabled {
opacity: 0.55;
}
.mode-b-shell .crm-lead-quick-actions {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
border-top: 1px solid #e8eef4;
border-bottom: 1px solid #e8eef4;
padding: 0.15rem 0;
}
.mode-b-shell .crm-lead-action {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.12rem;
min-height: 2.55rem;
padding: 0.3rem 0.1rem;
border-radius: 0;
border: 0;
background: transparent;
color: #334155;
text-decoration: none;
font-size: 0.65rem;
font-weight: 600;
cursor: pointer;
}
.mode-b-shell .crm-lead-action svg {
color: #2563eb;
width: 0.95rem;
height: 0.95rem;
}
.mode-b-shell .crm-lead-action:hover:not(:disabled) {
background: #f8fafc;
color: #1e3a8a;
}
.mode-b-shell .crm-lead-action:disabled {
opacity: 0.4;
cursor: default;
}
.mode-b-shell .crm-lead-info-card,
.mode-b-shell .crm-lead-timeline-card {
padding: 0.35rem 0 0;
border-radius: 0;
background: transparent;
border: 0;
box-shadow: none;
}
.mode-b-shell .crm-lead-section-title {
margin: 0 0 0.25rem;
font-family: inherit;
font-size: 0.7rem;
font-weight: 750;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #94a3b8;
}
.mode-b-shell .crm-lead-info-list {
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin: 0;
}
.mode-b-shell .crm-lead-info-list > div {
display: grid;
grid-template-columns: 6.2rem minmax(0, 1fr);
align-items: baseline;
gap: 0.55rem;
min-width: 0;
padding: 0.32rem 0;
border-bottom: 1px solid #eef2f6;
}
.mode-b-shell .crm-lead-info-list dt {
font-size: 0.72rem;
text-transform: none;
letter-spacing: 0;
color: #64748b;
font-weight: 550;
}
.mode-b-shell .crm-lead-info-list dd {
margin: 0;
font-size: 0.82rem;
font-weight: 600;
color: #0f172a;
word-break: break-word;
}
.mode-b-shell .crm-lead-info-assignee {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.mode-b-shell .crm-lead-assignee-avatar {
width: 1.15rem;
height: 1.15rem;
border-radius: 999px;
background: #eff6ff;
color: #1d4ed8;
font-size: 0.5rem;
font-weight: 750;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mode-b-shell .crm-lead-tags {
display: flex;
flex-wrap: wrap;
gap: 0.28rem;
margin-top: 0.4rem;
}
.mode-b-shell .crm-lead-tag {
padding: 0.1rem 0.4rem;
border-radius: 999px;
background: #f1f5f9;
color: #334155;
font-size: 0.68rem;
font-weight: 650;
}
.mode-b-shell .crm-lead-notes {
margin: 0;
font-size: 0.82rem;
line-height: 1.4;
color: #334155;
white-space: pre-wrap;
}
.mode-b-shell .crm-lead-timeline {
list-style: none;
margin: 0;
padding: 0 0 0 0.7rem;
border-left: 1px solid #e8eef5;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.mode-b-shell .crm-lead-timeline li {
position: relative;
}
.mode-b-shell .crm-lead-timeline-dot {
position: absolute;
left: -0.95rem;
top: 0.28rem;
width: 0.38rem;
height: 0.38rem;
border-radius: 999px;
background: #cbd5e1;
box-shadow: 0 0 0 2px #fff;
}
.mode-b-shell .crm-lead-timeline li[data-first='true'] .crm-lead-timeline-dot {
background: #2563eb;
}
.mode-b-shell .crm-lead-timeline-body {
display: flex;
flex-direction: column;
gap: 0.05rem;
}
.mode-b-shell .crm-lead-timeline-body time {
font-size: 0.68rem;
color: #94a3b8;
}
.mode-b-shell .crm-lead-timeline-body strong {
font-size: 0.82rem;
font-weight: 650;
color: #0f172a;
}
.mode-b-shell .crm-lead-timeline-empty {
margin: 0;
font-size: 0.82rem;
}
/* ==== CRM Leads filter modern card :: modeb-crm-filter-modern (2026-09-03) ==== */
.overlay.overlay-crm-filter {
align-items: center;
padding: 1.25rem 0.9rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
background: rgba(15, 23, 42, 0.42);
backdrop-filter: blur(8px);
}
.sheet.sheet-crm-filter {
width: min(22.5rem, 100%);
border-radius: 1.45rem;
padding: 0.7rem 1rem 1rem;
gap: 0.85rem;
box-shadow: 0 28px 64px rgba(15, 23, 42, 0.22);
}
.sheet.sheet-crm-filter .sheet-handle {
width: 2.1rem;
height: 0.22rem;
background: #e2e8f0;
margin-bottom: 0.45rem;
}
.sheet.sheet-crm-filter .sheet-head h2 {
font-size: 1.15rem;
font-weight: 750;
color: #0f172a;
}
.sheet.sheet-crm-filter .sheet-body {
overflow: visible;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.crm-filter-panel {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.crm-filter-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem 0.65rem;
}
.crm-filter-field {
display: flex;
flex-direction: column;
gap: 0.32rem;
min-width: 0;
color: #64748b;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.crm-filter-field-wide {
width: 100%;
}
.crm-filter-control {
position: relative;
display: block;
}
.crm-filter-control select,
.crm-filter-control input[type="search"],
.crm-filter-control input[type="date"] {
width: 100%;
appearance: none;
-webkit-appearance: none;
border: 1px solid #e8eef6;
background: #f8fafc;
color: #0f172a;
border-radius: 0.9rem;
padding: 0.72rem 2rem 0.72rem 0.85rem;
font: inherit;
font-size: 0.86rem;
font-weight: 650;
box-shadow: inset 0 1px 0 #fff;
}
.crm-filter-control select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.7rem center;
background-size: 0.95rem;
}
.crm-filter-control select:focus,
.crm-filter-control input[type="search"]:focus,
.crm-filter-control input[type="date"]:focus {
outline: none;
border-color: #93c5fd;
background-color: #fff;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.crm-filter-switch-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 0.85rem;
border-radius: 1rem;
background: #f8fafc;
border: 1px solid #eef2f7;
}
.crm-filter-switch-row strong {
display: block;
font-size: 0.9rem;
font-weight: 700;
color: #0f172a;
}
.crm-filter-switch-row em {
display: block;
font-style: normal;
font-size: 0.72rem;
color: #94a3b8;
}
.crm-filter-switch {
width: 2.6rem;
height: 1.5rem;
border: 0;
border-radius: 999px;
background: #cbd5e1;
position: relative;
cursor: pointer;
flex: 0 0 auto;
}
.crm-filter-switch::after {
content: "";
position: absolute;
top: 0.16rem;
left: 0.16rem;
width: 1.18rem;
height: 1.18rem;
border-radius: 999px;
background: #fff;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
transition: transform 0.16s ease;
}
.crm-filter-switch.on {
background: #2563eb;
}
.crm-filter-switch.on::after {
transform: translateX(1.1rem);
}
.crm-filter-footer {
display: flex;
align-items: center;
gap: 0.65rem;
}
.crm-filter-clear {
flex: 0 0 auto;
border: 0;
background: transparent;
color: #2563eb;
font: inherit;
font-weight: 700;
font-size: 0.88rem;
padding: 0.55rem 0.2rem;
cursor: pointer;
}
.crm-filter-apply {
flex: 1 1 auto;
border: 0;
border-radius: 999px;
background: #2563eb;
color: #fff;
font: inherit;
font-weight: 750;
font-size: 0.92rem;
padding: 0.78rem 1rem;
cursor: pointer;
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.22);
}
.crm-more-list {
padding: 0.15rem 0 0.4rem;
}
a.crm-more-link {
text-decoration: none;
color: inherit;
cursor: pointer;
}
a.crm-more-link:hover {
background: #f8fafc;
}
/* ==== CRM Leads table card UI (screenshot) :: modeb-leads-table-card (2026-09-03) ==== */
.sa-form[data-screen="crm-leads-list"] > .sa-form-head {
margin-bottom: 0.75rem !important;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-head h1 {
font-family: var(--serif) !important;
font-size: 1.7rem !important;
font-weight: 650 !important;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.mode-b-shell .sa-form[data-screen="crm-leads-list"] > .sa-form-body {
background: #fff !important;
border: 1px solid #e4eef7 !important;
box-shadow: 0 16px 40px rgba(18, 32, 43, 0.06) !important;
border-radius: 1.5rem !important;
padding: 1rem !important;
gap: 0.75rem !important;
}
.sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.mode-b-shell .crm-leads-list {
gap: 0.55rem !important;
}
.sa-form[data-screen="crm-leads-list"] .crm-lead-card,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card.crm-lead-row,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card[data-tone],
.mode-b-shell .crm-leads-list .crm-lead-card,
.mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row,
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="new"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="contacted"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="qualified"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="muted"] {
padding: 0.8rem 0.85rem !important;
border: 1px solid #eef2f7 !important;
border-radius: 1rem !important;
box-shadow: none !important;
background: #ffffff !important;
}
.sa-form[data-screen="crm-leads-list"] .crm-leads-list > li:hover .crm-lead-card,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card:hover,
.mode-b-shell .crm-leads-list > li:hover .crm-lead-card,
.mode-b-shell .crm-leads-list .crm-lead-card:hover {
background: #ffffff !important;
}
.sa-form[data-screen="crm-leads-list"] .crm-leads-list-head,
.mode-b-shell .crm-leads-list-head {
padding: 0.15rem 0.9rem 0.45rem !important;
}
.sa-form[data-screen="crm-leads-list"] .crm-lead-avatar,
.mode-b-shell .crm-leads-list .crm-lead-avatar {
width: 2.45rem;
height: 2.45rem;
font-size: 0.75rem;
background: #e8eef8;
color: #1d4ed8;
}
.mode-b-shell .crm-leads-toolbar {
gap: 0.55rem;
}
.mode-b-shell .crm-leads-actions-icons {
gap: 0.55rem !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only,
.mode-b-shell .crm-leads-search-toggle {
width: 2.65rem !important;
height: 2.65rem !important;
border-radius: 999px !important;
box-shadow: none !important;
}
.mode-b-shell .crm-leads-search-toggle {
border: 1px solid #e5e7eb !important;
background: #fff !important;
color: #2563eb !important;
}
.mode-b-shell .crm-leads-search-toggle.active,
.mode-b-shell .crm-leads-search-toggle:hover {
background: #eff6ff !important;
border-color: #bfdbfe !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="add"] {
background: #2563eb !important;
border: 1px solid #2563eb !important;
color: #fff !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="import"] {
background: color-mix(in srgb, #16a34a 12%, #fff) !important;
border: 1px solid color-mix(in srgb, #16a34a 35%, #fff) !important;
color: #15803d !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="export"] {
background: color-mix(in srgb, #ea580c 12%, #fff) !important;
border: 1px solid color-mix(in srgb, #ea580c 35%, #fff) !important;
color: #c2410c !important;
}
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-kind="edit"],
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-kind="edit"] svg {
color: #2563eb !important;
}
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="convert"],
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="convert"] svg {
color: #2563eb !important;
}
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="danger"],
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="danger"] svg {
color: #dc2626 !important;
}
.mode-b-shell .crm-lead-col-email,
.mode-b-shell .crm-lead-col-email svg {
color: #6b7db3 !important;
}
.mode-b-shell .crm-lead-card-company svg {
color: #8a90a0 !important;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.call,
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.call svg {
color: #3d7ea6 !important;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.wa,
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.wa svg {
color: #3d9a6e !important;
}
.mode-b-shell .crm-lead-quick-actions {
padding: 0.05rem 0;
}
.mode-b-shell .crm-lead-action {
min-height: 2.35rem;
gap: 0.08rem;
padding: 0.22rem 0.08rem;
color: #64748b;
}
.mode-b-shell .crm-lead-action[data-kind="edit"],
.mode-b-shell .crm-lead-action[data-kind="edit"] svg { color: #3d7ea6; }
.mode-b-shell .crm-lead-action[data-kind="assign"],
.mode-b-shell .crm-lead-action[data-kind="assign"] svg { color: #4f8f78; }
.mode-b-shell .crm-lead-action[data-kind="note"],
.mode-b-shell .crm-lead-action[data-kind="note"] svg { color: #b08948; }
.mode-b-shell .crm-lead-action[data-kind="task"],
.mode-b-shell .crm-lead-action[data-kind="task"] svg { color: #6d74a8; }
.mode-b-shell .crm-lead-action[data-kind="call"],
.mode-b-shell .crm-lead-action[data-kind="call"] svg { color: #3d9a8f; }
.mode-b-shell .crm-lead-action[data-kind="meeting"],
.mode-b-shell .crm-lead-action[data-kind="meeting"] svg { color: #c47a5a; }
.mode-b-shell .crm-lead-action[data-kind="file"],
.mode-b-shell .crm-lead-action[data-kind="file"] svg { color: #5f7e9b; }
.mode-b-shell .crm-lead-action[data-kind="email"],
.mode-b-shell .crm-lead-action[data-kind="email"] svg { color: #8a6aa8; }
.mode-b-shell .crm-lead-action svg { color: inherit; }
.mode-b-shell .crm-lead-info-list > div {
padding: 0.22rem 0;
}
.mode-b-shell .crm-lead-detail {
gap: 0.4rem;
}
/* ==== Leads list: new flat markup (does not fight old card CSS) :: modeb-leads-flat (2026-09-03) ==== */
.sa-form.crm-leads-flat {
gap: 0.35rem !important;
}
.sa-form.crm-leads-flat > .sa-form-head {
align-items: center;
margin-bottom: 0.15rem !important;
gap: 0.5rem;
}
.sa-form.crm-leads-flat > .sa-form-head .sa-form-pict {
display: none !important;
}
.sa-form.crm-leads-flat > .sa-form-head .sa-form-titles h1 {
font-family: inherit !important;
font-size: 1.12rem !important;
font-weight: 750 !important;
letter-spacing: -0.02em;
color: #0f172a;
}
.sa-form.crm-leads-flat > .sa-form-body {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
gap: 0.35rem !important;
}
.sa-form.crm-leads-flat .crm-leads-title-actions .crm-leads-icon-btn {
width: 1.85rem;
height: 1.85rem;
border: 0;
background: transparent;
border-radius: 0.4rem;
}
.sa-form.crm-leads-flat .crm-leads-toolbar {
display: flex;
align-items: center;
gap: 0.25rem;
}
.sa-form.crm-leads-flat .crm-leads-ghost {
width: 1.9rem;
height: 1.9rem;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
border-radius: 0.4rem;
color: #5b6b82;
cursor: pointer;
text-decoration: none;
flex: 0 0 auto;
}
.sa-form.crm-leads-flat .crm-leads-ghost[data-kind="add"] { color: #3d7ea6; }
.sa-form.crm-leads-flat .crm-leads-ghost[data-kind="import"] { color: #4f8f78; }
.sa-form.crm-leads-flat .crm-leads-ghost[data-kind="export"] { color: #c47a5a; }
.sa-form.crm-leads-flat .crm-leads-ghost.active,
.sa-form.crm-leads-flat .crm-leads-ghost:hover {
background: #f1f5f9;
}
.sa-form.crm-leads-flat .crm-leads-list {
gap: 0 !important;
}
.sa-form.crm-leads-flat .crm-lead-line,
.sa-form.crm-leads-flat .crm-lead-card.crm-lead-line {
padding: 0.3rem 0 !important;
margin: 0 !important;
border: 0 !important;
border-bottom: 1px solid #e8eef3 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.sa-form.crm-leads-flat .crm-lead-line:hover {
background: #f8fafc !important;
}
.sa-form.crm-leads-flat .crm-leads-list-head {
padding: 0 0 0.25rem !important;
}
.sa-form.crm-leads-flat .crm-lead-avatar {
width: 1.8rem !important;
height: 1.8rem !important;
font-size: 0.62rem !important;
}
.sa-form.crm-leads-flat .crm-lead-action-btn[data-kind="edit"] { color: #3d7ea6 !important; }
.sa-form.crm-leads-flat .crm-lead-action-btn[data-tone="convert"] { color: #4f8f78 !important; }
.sa-form.crm-leads-flat .crm-lead-action-btn[data-tone="danger"] { color: #c45c5c !important; }
/* ==== Contacts page stacked rows + unique action colors :: modeb-contacts-actions (2026-09-03) ==== */
.sa-form[data-screen="crm-contacts-list"] > .sa-form-head .sa-form-pict {
display: none;
}
.sa-form[data-screen="crm-contacts-list"] > .sa-form-head h1 {
font-family: inherit;
font-size: 1.15rem;
font-weight: 750;
}
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
background: #e8f1fa;
border: 0;
box-shadow: none;
border-radius: 0;
padding: 0.35rem 0 1rem;
}
.crm-contacts-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.crm-contact-row {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
padding: 0.55rem 0.45rem 0.5rem;
border-bottom: 1px solid #d5e4f2;
background: #e8f1fa;
border-radius: 0.7rem;
}
.crm-contact-row:nth-child(even),
.crm-contacts-list > li:nth-child(even) .crm-contact-row {
background: #e8f1fa;
}
.crm-contacts-list > li:nth-child(odd) .crm-contact-row {
background: #e8f1fa;
}
.crm-contacts-list > li {
list-style: none;
}
.crm-contact-row-main {
display: grid;
grid-template-columns: 2.2rem minmax(0, 1fr);
gap: 0.6rem;
text-decoration: none;
color: inherit;
min-width: 0;
flex: 1 1 12rem;
}
.crm-contact-row-avatar {
width: 2rem;
height: 2rem;
border-radius: 999px;
background: #eef4fb;
color: #3d7ea6;
font-size: 0.68rem;
font-weight: 750;
display: inline-flex;
align-items: center;
justify-content: center;
}
.crm-contact-row-copy {
display: flex;
flex-direction: column;
gap: 0.18rem;
min-width: 0;
}
.crm-contact-row-title {
display: flex;
align-items: center;
justify-content: flex-start;
min-width: 0;
width: 100%;
min-height: 1.25rem;
}
.crm-contact-row-name {
position: relative;
z-index: 1;
font-size: 0.95rem;
font-weight: 750;
color: #0f172a;
flex: 0 1 auto;
min-width: 0;
max-width: min(42%, 12rem);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
/* Center email in the full people row (not beside the name). */
.crm-contact-row-email {
position: absolute;
left: 50%;
top: 0.65rem;
transform: translateX(-50%);
z-index: 2;
width: auto;
max-width: min(18rem, 42%);
margin: 0;
justify-content: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
}
.crm-contact-row-copy .crm-contact-row-line {
width: 100%;
max-width: 100%;
margin-left: 0;
justify-content: flex-start;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crm-contact-row-meta {
display: inline-flex;
align-items: center;
gap: 0.28rem;
font-size: 0.75rem;
color: #64748b;
}
.crm-contact-row-line {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
color: #475569;
min-width: 0;
}
.crm-contact-row-line[data-kind="email"] { color: #6b7db3; }
.crm-contact-row-line[data-kind="phone"] { color: #3d7ea6; }
.crm-contact-row-line svg { flex: 0 0 auto; }
.crm-contact-row-phone-acts {
display: inline-flex;
align-items: center;
gap: 0.1rem;
margin-left: 0.15rem;
}
.crm-contact-row-actions {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 0.12rem;
flex: 0 0 auto;
margin-left: auto;
min-width: max-content;
overflow: visible;
}
@media (max-width: 36rem) {
.crm-contact-row-name {
max-width: 100%;
}
.crm-contact-row-email {
position: static;
left: auto;
top: auto;
transform: none;
max-width: 100%;
width: 100%;
order: 2;
justify-content: flex-start;
pointer-events: auto;
padding-left: 2.8rem;
margin-top: -0.1rem;
}
.crm-contact-row-main {
order: 1;
flex: 1 1 100%;
}
.crm-contact-row-actions {
order: 3;
}
}
@media (max-width: 30rem) {
.crm-contact-row-actions {
flex: 1 1 100%;
justify-content: flex-start;
margin-left: 0;
padding-left: 2.6rem;
}
}
.crm-contact-act {
width: 2.05rem;
height: 2.05rem;
padding: 0;
border: 0;
background: transparent;
border-radius: 0.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #475569;
flex: 0 0 auto;
}
.crm-contact-act svg {
width: 1.25rem;
height: 1.25rem;
}
.crm-contact-act:hover:not(:disabled) { background: #f1f5f9; }
.crm-contact-act:disabled { opacity: 0.35; cursor: default; }
.crm-contact-act[data-kind="call"] { color: #3d7ea6; }
.crm-contact-act[data-kind="whatsapp"] { color: #3d9a6e; }
.crm-contact-act[data-kind="appointment"] { color: #3d7ea6; }
.crm-contact-act[data-kind="reminder"] { color: #c49a3c; }
.crm-contact-act[data-kind="deal"] { color: #6d74a8; }
.crm-contact-act[data-kind="task"] { color: #4f8f78; }
.crm-contact-act[data-kind="customer"] { color: #8a6aa8; }
.crm-contact-act[data-kind="edit"] { color: #5f7e9b; }
.crm-contact-act[data-kind="delete"] { color: #c45c5c; }
/* ==== Leads page stacked style (screenshot) :: modeb-leads-stack (2026-09-03) ==== */
.sa-form.crm-leads-stack > .sa-form-head .sa-form-titles h1 {
font-size: 1.35rem !important;
color: #0f2744 !important;
}
.sa-form.crm-leads-stack .crm-leads-search-wrap .crm-leads-ghost,
.sa-form.crm-leads-stack .crm-leads-ghost {
width: 2.15rem;
height: 2.15rem;
border-radius: 999px;
}
.sa-form.crm-leads-stack .crm-leads-ghost[data-kind="add"] {
background: #2563eb !important;
color: #fff !important;
}
.sa-form.crm-leads-stack .crm-leads-ghost[data-kind="import"] {
background: #ecfdf5 !important;
color: #0d9488 !important;
}
.sa-form.crm-leads-stack .crm-leads-ghost[data-kind="export"] {
background: #fff7ed !important;
color: #ea580c !important;
}
.sa-form.crm-leads-stack .crm-lead-stack-row {
padding: 0.7rem 0 0.55rem;
}
.sa-form.crm-leads-stack .crm-contact-row-name {
color: #0f2744;
font-size: 1rem;
}
.sa-form.crm-leads-stack .crm-contact-row-actions {
gap: 0.12rem;
padding-left: 0;
}
.sa-form.crm-leads-stack .crm-contact-act {
width: 2.05rem;
height: 2.05rem;
}
.sa-form.crm-leads-stack .crm-contact-act[data-kind="appointment"] { color: #3b82f6; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="reminder"] { color: #eab308; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="deal"] { color: #2563eb; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="task"] { color: #14b8a6; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="customer"] { color: #8b5cf6; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="edit"] { color: #64748b; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="delete"] { color: #ef4444; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="call"] { color: #3b82f6; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="whatsapp"] { color: #22c55e; }
/* ==== Lead details card layout + unique icon colors :: modeb-lead-detail-v2 (2026-09-03) ==== */
.mode-b-shell main:has([data-screen="crm-lead-detail"]) {
background: #f4f6f9 !important;
}
.sa-form[data-screen="crm-lead-detail"] > .sa-form-body,
.mode-b-shell .sa-form[data-screen="crm-lead-detail"] > .sa-form-body {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
.crm-lead-detail-v2 {
gap: 0.75rem !important;
}
.crm-lead-detail-v2 .crm-lead-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
align-items: start;
}
.crm-lead-detail-v2 .crm-lead-profile-card,
.crm-lead-detail-v2 .crm-lead-info-card,
.crm-lead-detail-v2 .crm-lead-timeline-card,
.crm-lead-detail-v2 .crm-lead-side-card {
background: #fff !important;
border: 1px solid #eef2f7 !important;
border-radius: 1rem !important;
box-shadow: 0 10px 28px rgba(18, 32, 43, 0.05) !important;
padding: 1rem 1.05rem !important;
}
.crm-lead-detail-v2 .crm-lead-profile-card {
display: grid;
grid-template-columns: 3.1rem minmax(0, 1fr);
gap: 0.75rem 0.85rem;
align-items: start;
}
.crm-lead-detail-v2 .crm-lead-profile-avatar {
width: 3.1rem !important;
height: 3.1rem !important;
font-size: 0.95rem !important;
background: #e8eef8 !important;
color: #2563eb !important;
}
.crm-lead-detail-v2 .crm-lead-profile-name {
font-size: 1.2rem !important;
font-weight: 750 !important;
margin: 0 0 0.4rem !important;
}
.crm-lead-detail-v2 .crm-lead-badges {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-bottom: 0.55rem;
}
.crm-lead-detail-v2 .crm-lead-chip {
display: inline-flex;
align-items: center;
padding: 0.16rem 0.5rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
line-height: 1.2;
}
.crm-lead-detail-v2 .crm-lead-chip[data-tone="new"] { background: #ede9fe; color: #6d28d9; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="contacted"] { background: #fef3c7; color: #b45309; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="qualified"] { background: #dcfce7; color: #15803d; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="muted"] { background: #f1f5f9; color: #475569; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="priority"] { background: #fef9c3; color: #a16207; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="converted"] { background: #dcfce7; color: #166534; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="job"] { background: #e0f2fe; color: #0369a1; }
.crm-lead-detail-v2 .crm-lead-contact-lines {
display: flex;
flex-direction: column;
gap: 0.28rem;
}
.crm-lead-detail-v2 .crm-lead-contact-line {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.82rem;
color: #475569;
text-decoration: none;
min-width: 0;
}
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="email"],
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="email"] svg { color: #2563eb; }
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="phone"],
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="phone"] svg { color: #0d9488; }
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="company"],
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="company"] svg { color: #7c3aed; }
.crm-lead-detail-v2 .crm-lead-quick-actions {
grid-column: 1 / -1;
display: flex !important;
flex-wrap: wrap;
gap: 0.4rem !important;
border: 0 !important;
padding: 0.15rem 0 0 !important;
}
.crm-lead-detail-v2 .crm-lead-action {
min-height: 0 !important;
flex-direction: column;
width: 3.2rem;
gap: 0.18rem !important;
padding: 0.35rem 0.1rem !important;
border-radius: 0.75rem !important;
font-size: 0.62rem !important;
}
.crm-lead-detail-v2 .crm-lead-action[data-kind="edit"] { color: #2563eb !important; background: color-mix(in srgb, #2563eb 10%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="assign"] { color: #7c3aed !important; background: color-mix(in srgb, #7c3aed 10%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="note"] { color: #ca8a04 !important; background: color-mix(in srgb, #ca8a04 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="task"] { color: #0891b2 !important; background: color-mix(in srgb, #0891b2 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="call"] { color: #0d9488 !important; background: color-mix(in srgb, #0d9488 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="meeting"] { color: #ea580c !important; background: color-mix(in srgb, #ea580c 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="file"] { color: #64748b !important; background: color-mix(in srgb, #64748b 10%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="email"] { color: #4f46e5 !important; background: color-mix(in srgb, #4f46e5 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action svg { color: inherit !important; }
.crm-lead-detail-v2 .crm-lead-section-title {
font-size: 0.95rem !important;
font-weight: 750 !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
color: #0f172a !important;
margin: 0 0 0.7rem !important;
}
.crm-lead-detail-v2 .crm-lead-facts {
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem 0.75rem;
}
.crm-lead-detail-v2 .crm-lead-facts > div {
display: flex;
align-items: flex-start;
gap: 0.6rem;
min-width: 0;
padding: 0.7rem 0.75rem;
border-radius: 0.85rem;
background: #f8fafc;
}
.crm-lead-detail-v2 .crm-lead-facts > div > div {
min-width: 0;
}
.crm-lead-detail-v2 .crm-lead-fact-icon {
flex: 0 0 auto;
width: 2rem;
height: 2rem;
border-radius: 0.65rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
}
.crm-lead-detail-v2 .crm-lead-facts dt {
margin: 0;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #94a3b8;
}
.crm-lead-detail-v2 .crm-lead-facts dd {
margin: 0.12rem 0 0;
font-size: 0.95rem;
font-weight: 700;
color: #0f172a;
line-height: 1.3;
word-break: break-word;
}
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="source"] .crm-lead-fact-icon { color: #2563eb; background: color-mix(in srgb, #2563eb 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="status"] .crm-lead-fact-icon { color: #7c3aed; background: color-mix(in srgb, #7c3aed 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="priority"] .crm-lead-fact-icon { color: #ca8a04; background: color-mix(in srgb, #ca8a04 14%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="assigned"] .crm-lead-fact-icon { color: #0d9488; background: color-mix(in srgb, #0d9488 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="created"] .crm-lead-fact-icon { color: #ea580c; background: color-mix(in srgb, #ea580c 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="converted"] .crm-lead-fact-icon { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="tags"] .crm-lead-fact-icon { color: #4f46e5; background: color-mix(in srgb, #4f46e5 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="tags"] {
grid-column: 1 / -1;
}
.crm-lead-detail-v2 .crm-lead-notes {
color: #64748b !important;
font-size: 0.88rem !important;
line-height: 1.45;
}
.crm-lead-detail-v2 .crm-lead-timeline {
border: 0 !important;
padding: 0 !important;
gap: 0.7rem !important;
}
.crm-lead-detail-v2 .crm-lead-timeline li {
padding: 0.15rem 0 0.15rem 0.75rem;
border-left: 3px solid #cbd5e1;
}
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="task"] { border-left-color: #38bdf8; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="email"] { border-left-color: #4ade80; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="note"] { border-left-color: #fbbf24; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="call"] { border-left-color: #2dd4bf; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="meeting"] { border-left-color: #fb923c; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="status"] { border-left-color: #a78bfa; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="default"] { border-left-color: #94a3b8; }
.crm-lead-detail-v2 .crm-lead-timeline-dot { display: none; }
.crm-lead-detail-v2 .crm-lead-timeline-body strong {
font-size: 0.9rem;
display: block;
}
.crm-lead-detail-v2 .crm-lead-timeline-body time {
display: block;
margin-top: 0.15rem;
}
/* ==== Settings More page toggles :: modeb-crm-page-settings (2026-09-03) ==== */
.sa-form[data-screen="crm-page-settings"] > .sa-form-head h1 {
font-family: var(--serif);
}
.crm-page-toggle-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.crm-page-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 0.9rem;
background: #fff;
border: 1px solid #eef2f7;
border-radius: 1.15rem;
box-shadow: 0 10px 24px rgba(18, 32, 43, 0.05);
}
.crm-page-toggle-main {
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
}
.crm-page-toggle-main .pict {
width: 2.4rem;
height: 2.4rem;
border-radius: 0.75rem;
display: grid;
place-items: center;
background: var(--purple-soft);
color: var(--purple);
flex: 0 0 auto;
}
.crm-page-toggle-main strong {
display: block;
font-family: var(--serif);
font-size: 1.02rem;
color: var(--brand-ink);
}
.crm-page-toggle-main em {
display: block;
font-style: normal;
font-size: 0.75rem;
color: #94a3b8;
}
.crm-page-toggle-actions {
display: flex;
gap: 0.35rem;
flex: 0 0 auto;
}
.crm-page-toggle-actions button {
border: 1px solid #e2e8f0;
background: #f8fafc;
color: #64748b;
border-radius: 999px;
padding: 0.38rem 0.7rem;
font: inherit;
font-size: 0.72rem;
font-weight: 700;
cursor: pointer;
}
.crm-page-toggle-actions button.is-active {
background: #dcfce7;
border-color: #86efac;
color: #166534;
}
.crm-page-toggle-actions button.is-inactive {
background: #fee2e2;
border-color: #fca5a5;
color: #991b1b;
}
/* ==== Leads import popup :: modeb-lead-import (2026-09-03) ==== */
.sheet.sheet-lead-import {
width: min(36rem, 100%);
max-height: min(92dvh, calc(100% - 0.5rem));
min-height: 0;
}
.sheet.sheet-crm-filter.sheet-lead-import .sheet-body {
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
min-height: 0;
flex: 1 1 auto;
}
.overlay.overlay-crm-filter:has(.sheet-lead-import) {
align-items: center;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 40rem) {
.overlay.overlay-crm-filter:has(.sheet-lead-import) {
align-items: flex-end;
padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
}
.sheet.sheet-crm-filter.sheet-lead-import {
max-height: min(88dvh, calc(100% - 0.75rem));
border-radius: 1.45rem 1.45rem 0.9rem 0.9rem;
}
}
.lead-import {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.lead-import-help {
margin: 0;
font-size: 0.82rem;
line-height: 1.45;
color: #475569;
}
.lead-import-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.lead-import-ghost {
border: 1px solid #93c5fd;
background: #fff;
color: #1d4ed8;
border-radius: 0.7rem;
padding: 0.5rem 0.8rem;
font: inherit;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
}
.lead-import-field select,
.lead-import-defaults select,
.lead-import-defaults input {
width: 100%;
border: 1px solid #dbe3f0;
border-radius: 0.7rem;
padding: 0.55rem 0.7rem;
background: #fff;
font: inherit;
font-size: 0.85rem;
color: #0f172a;
}
.lead-import-file {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.8rem;
color: #64748b;
}
.lead-import-file span {
border: 0;
border-radius: 0.7rem;
background: #e2e8f0;
color: #0f172a;
padding: 0.5rem 0.75rem;
font-weight: 700;
cursor: pointer;
}
.lead-import-file input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.lead-import-file em {
font-style: normal;
}
.lead-import-defaults {
margin: 0;
padding: 0.75rem 0.85rem 0.9rem;
border: 1px solid #e2e8f0;
border-radius: 0.9rem;
}
.lead-import-defaults legend {
padding: 0 0.25rem;
font-size: 0.85rem;
font-weight: 750;
color: #0f172a;
}
.lead-import-defaults p {
margin: 0 0 0.7rem;
font-size: 0.72rem;
color: #64748b;
line-height: 1.4;
}
.lead-import-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem 0.75rem;
}
.lead-import-grid label {
display: flex;
flex-direction: column;
gap: 0.28rem;
font-size: 0.75rem;
font-weight: 700;
color: #334155;
}
.lead-import-label {
display: inline-flex;
align-items: center;
gap: 0.2rem;
color: #334155;
}
.lead-import-req {
color: #dc2626;
font-weight: 750;
line-height: 1;
}
.lead-import-custom-source {
grid-column: 1 / -1;
}
.lead-import-actions {
display: flex;
justify-content: flex-end;
gap: 0.55rem;
}
.lead-import-submit {
border: 0;
border-radius: 0.7rem;
background: #2563eb;
color: #fff;
font: inherit;
font-weight: 750;
font-size: 0.88rem;
padding: 0.55rem 1.15rem;
cursor: pointer;
}
.lead-import-submit:disabled {
opacity: 0.55;
cursor: not-allowed;
}
@media (max-width: 32rem) {
.lead-import-grid {
grid-template-columns: 1fr;
}
}
/* ==== People lists mild light-blue canvas :: modeb-contacts-list-blue (2026-09-08) ==== */
/* Core page uses Mode A #f6f8fc; header + list panel stay white (rows keep zebra). */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] {
background: #f6f8fc !important;
box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-head {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list {
background: transparent !important;
box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list > li .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] article.crm-contact-row {
background: #f6f8fc !important;
border: 1px solid #e8eef5 !important;
border-bottom: 1px solid #e8eef5 !important;
box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
background: #f6f8fc !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 1.5rem !important;
padding: 1rem !important;
}
/* ==== Add Contacts form two-column like Add Lead fields :: modeb-contact-form-flat (2026-09-03) ==== */
.sheet.sheet-contact-form,
.sheet:has(.contact-form-flat) {
width: min(40rem, calc(100% - 1.25rem));
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
.sheet.sheet-contact-form .sheet-body,
.sheet:has(.contact-form-flat) .sheet-body {
overflow-x: hidden;
max-width: 100%;
}
.lead-form.contact-form-flat {
max-width: 100%;
min-width: 0;
overflow-x: hidden;
}
.lead-form.contact-form-flat .lead-form-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0.55rem 0.75rem;
width: 100%;
min-width: 0;
max-width: 100%;
}
.lead-form.contact-form-flat .field-with-mic,
.lead-form.contact-form-flat .field,
.lead-form.contact-form-flat .lead-phone-field {
min-width: 0;
max-width: 100%;
}
.lead-form.contact-form-flat .lead-phone-row {
min-width: 0;
width: 100%;
}
.lead-form.contact-form-flat .lead-phone-row > select {
flex: 0 1 6.75rem;
min-width: 0;
max-width: 7.25rem;
}
.lead-form.contact-form-flat .lead-form-actions {
justify-content: flex-end;
}
@media (max-width: 36rem) {
.lead-form.contact-form-flat .lead-form-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==== Add Deal form like Add Lead :: modeb-deal-form-flat (2026-09-03) ==== */
.lead-form.deal-form-flat .deal-form-span {
grid-column: 1 / -1;
}
.lead-form.deal-form-flat input[type='number'],
.lead-form.deal-form-flat input[type='date'],
.lead-form.deal-form-flat input[type='datetime-local'] {
min-width: 0;
}
/* ==== More page compact unique list :: modeb-more-nav (2026-09-03) ==== */
.sa-form[data-screen="crm-home"] > .sa-form-head h1 {
font-family: var(--serif);
font-size: 1.35rem;
}
.sa-form[data-screen="crm-home"] > .sa-form-body {
background: transparent;
border: 0;
box-shadow: none;
border-radius: 0;
padding: 0;
}
.mode-b-shell main:has([data-screen="crm-home"]) {
background: #ffffff;
}
.crm-more-page {
display: flex;
flex-direction: column;
gap: 1rem;
}
.crm-more-section-label {
margin: 0 0.15rem 0.5rem;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #64748b;
}
.crm-more-nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.crm-more-nav-row {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.72rem 0.8rem;
text-decoration: none;
color: inherit;
border-radius: 0.95rem;
min-height: 3.35rem;
background: #fff;
border: 1px solid #e8eef4;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}
.crm-more-nav-row:hover {
background: #f8fbff;
border-color: #d7e4f4;
}
.crm-more-nav-icon {
width: 2.45rem;
height: 2.45rem;
border-radius: 0.8rem;
display: grid;
place-items: center;
flex: 0 0 auto;
}
.crm-more-nav-copy {
min-width: 0;
flex: 1 1 auto;
}
.crm-more-nav-copy strong {
display: block;
font-size: 0.95rem;
font-weight: 780;
color: #0f172a;
line-height: 1.2;
}
.crm-more-nav-copy em {
display: inline-flex;
font-style: normal;
font-size: 0.68rem;
font-weight: 700;
color: #64748b;
margin-top: 0.22rem;
background: #f1f5f9;
border-radius: 999px;
padding: 0.1rem 0.48rem;
}
.crm-more-nav-go {
flex: 0 0 auto;
width: 1.7rem;
height: 1.7rem;
border-radius: 999px;
display: grid;
place-items: center;
background: #f8fafc;
color: #94a3b8;
border: 1px solid #e8eef4;
}
.crm-more-nav-row:hover .crm-more-nav-go {
background: #eff6ff;
border-color: #bfdbfe;
color: #2563eb;
}
.crm-more-nav-row[data-tone="blue"] .crm-more-nav-icon { color: #2563eb; background: color-mix(in srgb, #2563eb 12%, #fff); }
.crm-more-nav-row[data-tone="orange"] .crm-more-nav-icon { color: #ea580c; background: color-mix(in srgb, #ea580c 12%, #fff); }
.crm-more-nav-row[data-tone="teal"] .crm-more-nav-icon { color: #0d9488; background: color-mix(in srgb, #0d9488 12%, #fff); }
.crm-more-nav-row[data-tone="amber"] .crm-more-nav-icon { color: #d97706; background: color-mix(in srgb, #d97706 14%, #fff); }
.crm-more-nav-row[data-tone="indigo"] .crm-more-nav-icon { color: #4f46e5; background: color-mix(in srgb, #4f46e5 12%, #fff); }
.crm-more-nav-row[data-tone="violet"] .crm-more-nav-icon { color: #7c3aed; background: color-mix(in srgb, #7c3aed 12%, #fff); }
.crm-more-nav-row[data-tone="green"] .crm-more-nav-icon { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, #fff); }
.crm-more-nav-row[data-tone="slate"] .crm-more-nav-icon { color: #475569; background: color-mix(in srgb, #475569 12%, #fff); }
.crm-more-nav-row[data-tone="cyan"] .crm-more-nav-icon { color: #0891b2; background: color-mix(in srgb, #0891b2 12%, #fff); }
.crm-more-nav-row[data-tone="pink"] .crm-more-nav-icon { color: #db2777; background: color-mix(in srgb, #db2777 12%, #fff); }
.crm-more-nav-row[data-tone="yellow"] .crm-more-nav-icon { color: #ca8a04; background: color-mix(in srgb, #ca8a04 14%, #fff); }
.crm-more-nav-row[data-tone="sky"] .crm-more-nav-icon { color: #0284c7; background: color-mix(in srgb, #0284c7 12%, #fff); }
.crm-more-nav-row[data-tone="gray"] .crm-more-nav-icon { color: #64748b; background: color-mix(in srgb, #64748b 12%, #fff); }
.crm-more-nav-row[data-tone="purple"] .crm-more-nav-icon { color: #9333ea; background: color-mix(in srgb, #9333ea 12%, #fff); }
.crm-more-nav-row[data-tone="rose"] .crm-more-nav-icon { color: #e11d48; background: color-mix(in srgb, #e11d48 12%, #fff); }
.crm-more-nav-row[data-tone="red"] .crm-more-nav-icon { color: #dc2626; background: color-mix(in srgb, #dc2626 12%, #fff); }
.crm-more-nav-row[data-tone="blue"] { border-left: 3px solid #2563eb; }
.crm-more-nav-row[data-tone="orange"] { border-left: 3px solid #ea580c; }
.crm-more-nav-row[data-tone="teal"] { border-left: 3px solid #0d9488; }
.crm-more-nav-row[data-tone="amber"] { border-left: 3px solid #d97706; }
.crm-more-nav-row[data-tone="indigo"] { border-left: 3px solid #4f46e5; }
.crm-more-nav-row[data-tone="violet"] { border-left: 3px solid #7c3aed; }
.crm-more-nav-row[data-tone="green"] { border-left: 3px solid #16a34a; }
.crm-more-nav-row[data-tone="slate"] { border-left: 3px solid #475569; }
.crm-more-nav-row[data-tone="cyan"] { border-left: 3px solid #0891b2; }
.crm-more-nav-row[data-tone="pink"] { border-left: 3px solid #db2777; }
.crm-more-nav-row[data-tone="yellow"] { border-left: 3px solid #ca8a04; }
.crm-more-nav-row[data-tone="sky"] { border-left: 3px solid #0284c7; }
.crm-more-nav-row[data-tone="gray"] { border-left: 3px solid #64748b; }
.crm-more-nav-row[data-tone="purple"] { border-left: 3px solid #9333ea; }
.crm-more-nav-row[data-tone="rose"] { border-left: 3px solid #e11d48; }
.crm-more-nav-row[data-tone="red"] { border-left: 3px solid #dc2626; }
.crm-more-nav-row[data-tone="emerald"] { border-left: 3px solid #059669; }
/* ==== Add Lead select chevron next to value :: modeb-lead-select-chevron (2026-09-03) ==== */
.lead-form .field[data-as='select'] .field-control {
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
}
.lead-form .field[data-as='select'] select {
width: max-content;
max-width: 100%;
field-sizing: content;
padding-right: 1.85rem;
}
.lead-form .field[data-as='select'] .field-chevron {
right: 0.5rem;
}
/* ==== Deals kanban list :: modeb-deals-board (2026-09-03) ==== */
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-body {
background: #f4f7fb;
border: 0;
box-shadow: none;
padding: 0.2rem 0 0.6rem;
}
.crm-deals-board {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.crm-deals-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.55rem;
}
.crm-deals-stats article {
background: #fff;
border: 1px solid #eef2f7;
border-radius: 1rem;
padding: 0.7rem 0.75rem;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}
.crm-deals-stats em {
display: block;
font-style: normal;
font-size: 0.68rem;
font-weight: 700;
color: #94a3b8;
letter-spacing: 0.02em;
}
.crm-deals-stats strong {
display: block;
margin-top: 0.2rem;
font-size: 0.95rem;
color: #0f172a;
}
.crm-deals-kanban {
display: flex;
gap: 0.7rem;
overflow-x: auto;
padding-bottom: 0.4rem;
scroll-snap-type: x proximity;
}
.crm-deals-column {
flex: 0 0 min(15.5rem, 82vw);
scroll-snap-align: start;
background: #eef2f6;
border-radius: 1rem;
min-height: 12rem;
display: flex;
flex-direction: column;
overflow: hidden;
}
.crm-deals-column-head {
padding: 0.7rem 0.75rem 0.55rem;
border-top: 3px solid #94a3b8;
background: #fff;
}
.crm-deals-column[data-tone="blue"] .crm-deals-column-head { border-top-color: #2563eb; }
.crm-deals-column[data-tone="yellow"] .crm-deals-column-head { border-top-color: #eab308; }
.crm-deals-column[data-tone="orange"] .crm-deals-column-head { border-top-color: #ea580c; }
.crm-deals-column[data-tone="purple"] .crm-deals-column-head { border-top-color: #7c3aed; }
.crm-deals-column[data-tone="green"] .crm-deals-column-head { border-top-color: #16a34a; }
.crm-deals-column[data-tone="rose"] .crm-deals-column-head { border-top-color: #e11d48; }
.crm-deals-column-head h2 {
margin: 0;
font-size: 0.92rem;
font-weight: 750;
color: #0f172a;
}
.crm-deals-column-head span {
display: block;
margin-top: 0.12rem;
font-size: 0.72rem;
color: #64748b;
}
.crm-deals-column-body {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.55rem;
}
.crm-deal-card {
position: relative;
background: #fff;
border-radius: 0.85rem;
padding: 0.7rem 0.75rem 0.55rem;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}
.crm-deal-card-title {
display: block;
font-weight: 750;
font-size: 0.88rem;
color: #0f172a;
text-decoration: none;
line-height: 1.3;
}
.crm-deal-card-party {
margin: 0.2rem 0 0;
font-size: 0.75rem;
color: #94a3b8;
}
.crm-deal-card-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.4rem;
margin-top: 0.55rem;
}
.crm-deal-card-meta strong {
font-size: 0.86rem;
color: #0f172a;
}
.crm-deal-card-meta em {
font-style: normal;
font-size: 0.78rem;
color: #64748b;
}
.crm-deal-card-move {
display: flex;
justify-content: space-between;
margin-top: 0.4rem;
}
.crm-deal-move {
width: 1.7rem;
height: 1.7rem;
border: 1px solid #e2e8f0;
border-radius: 999px;
background: #fff;
color: #64748b;
display: inline-grid;
place-items: center;
cursor: pointer;
}
.crm-deal-card-select {
position: absolute;
top: 0.45rem;
right: 0.45rem;
}
/* ==== Deals page: default pipeline only, no page scroll :: modeb-deals-no-page-scroll (2026-09-03) ==== */
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) {
overflow: hidden !important;
height: 100dvh;
max-height: 100dvh;
}
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) .sa-form-list {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.sa-form[data-screen="crm-opportunities-list"] {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-head {
flex: 0 0 auto;
}
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-body {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.crm-deals-board {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.crm-deals-stats {
flex: 0 0 auto;
}
.crm-deals-kanban {
flex: 1 1 auto;
min-height: 0;
overflow-x: auto;
overflow-y: hidden;
}
.crm-deals-column {
min-height: 0;
max-height: 100%;
}
.crm-deals-column-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
/* ==== Deals board: no horizontal scroll, compact cards :: modeb-deals-fit (2026-09-03) ==== */
.crm-deals-board {
gap: 0.55rem;
}
.crm-deals-stats {
gap: 0.4rem;
}
.crm-deals-stats article {
padding: 0.42rem 0.5rem;
border-radius: 0.75rem;
box-shadow: none;
}
.crm-deals-stats em {
font-size: 0.62rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.crm-deals-stats strong {
margin-top: 0.08rem;
font-size: 0.82rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crm-deals-kanban {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.4rem;
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
overflow-y: hidden;
padding-bottom: 0;
scroll-snap-type: none;
}
.crm-deals-column {
flex: none !important;
min-width: 0 !important;
width: auto;
border-radius: 0.8rem;
background: #e8eef5;
}
.crm-deals-column-head {
padding: 0.45rem 0.5rem 0.38rem;
}
.crm-deals-column-head h2 {
font-size: 0.8rem;
}
.crm-deals-column-head span {
font-size: 0.66rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crm-deals-column-body {
gap: 0.35rem;
padding: 0.38rem;
}
.crm-deal-card {
padding: 0.42rem 0.45rem 0.38rem;
border-radius: 0.65rem;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.crm-deal-card-top {
display: flex;
align-items: flex-start;
gap: 0.25rem;
min-width: 0;
}
.crm-deal-card-title {
flex: 1 1 auto;
min-width: 0;
font-size: 0.78rem;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crm-deal-card-move {
flex: 0 0 auto;
display: flex;
justify-content: flex-end;
gap: 0.12rem;
margin-top: 0;
}
.crm-deal-move {
width: 1.35rem;
height: 1.35rem;
flex-shrink: 0;
}
.crm-deal-move-spacer {
width: 1.35rem;
height: 1.35rem;
}
.crm-deal-card-bottom {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.35rem;
margin-top: 0.18rem;
min-width: 0;
}
.crm-deal-card-party {
margin: 0;
flex: 1 1 auto;
min-width: 0;
font-size: 0.68rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crm-deal-card-amount {
flex: 0 0 auto;
font-size: 0.72rem;
font-weight: 750;
font-variant-numeric: tabular-nums;
color: #0f172a;
white-space: nowrap;
}
.crm-deal-card-win {
display: block;
margin-top: 0.08rem;
font-style: normal;
font-size: 0.62rem;
color: #64748b;
}
.crm-deal-card-meta {
display: none;
}
@media (max-width: 360px) {
.crm-deals-kanban {
grid-template-columns: minmax(0, 1fr);
overflow-y: auto;
}
}
/* ==== Deals board fresh layout :: modeb-deals-fresh (2026-09-03) ==== */
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-body {
background: #f3f5f8;
padding: 0.15rem 0 0.35rem;
}
.crm-deals-board {
gap: 0.7rem;
}
.crm-deals-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
background: #fff;
border: 1px solid #e8edf3;
border-radius: 1.05rem;
overflow: hidden;
box-shadow: none;
}
.crm-deals-stats article {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
padding: 0.55rem 0.55rem;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.crm-deals-stats article + article {
border-left: 1px solid #eef2f6;
}
.crm-deals-stat-icon {
width: 1.85rem;
height: 1.85rem;
border-radius: 0.6rem;
display: grid;
place-items: center;
flex-shrink: 0;
color: #2563eb;
background: #eff6ff;
}
.crm-deals-stat-icon[data-tone="amber"] {
color: #b45309;
background: #fffbeb;
}
.crm-deals-stat-icon[data-tone="green"] {
color: #15803d;
background: #f0fdf4;
}
.crm-deals-stats em {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #94a3b8;
}
.crm-deals-stats strong {
margin-top: 0.02rem;
font-size: 0.86rem;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.crm-deals-kanban {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 0.55rem;
overflow-x: hidden !important;
}
.crm-deals-column {
background: transparent;
border-radius: 0;
min-width: 0;
}
.crm-deals-column-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.35rem;
padding: 0.15rem 0.15rem 0.45rem;
background: transparent;
border-top: 0;
}
.crm-deals-column-head h2 {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.crm-deals-column-head h2::before {
content: "";
width: 0.45rem;
height: 0.45rem;
border-radius: 999px;
background: #94a3b8;
}
.crm-deals-column[data-tone="blue"] .crm-deals-column-head h2::before { background: #2563eb; }
.crm-deals-column[data-tone="yellow"] .crm-deals-column-head h2::before { background: #ca8a04; }
.crm-deals-column[data-tone="orange"] .crm-deals-column-head h2::before { background: #ea580c; }
.crm-deals-column[data-tone="purple"] .crm-deals-column-head h2::before { background: #7c3aed; }
.crm-deals-column[data-tone="green"] .crm-deals-column-head h2::before { background: #16a34a; }
.crm-deals-column[data-tone="rose"] .crm-deals-column-head h2::before { background: #e11d48; }
.crm-deals-column-head span {
margin-top: 0.12rem;
font-size: 0.68rem;
color: #64748b;
font-variant-numeric: tabular-nums;
}
.crm-deals-column-head b {
flex: 0 0 auto;
min-width: 1.35rem;
height: 1.35rem;
padding: 0 0.35rem;
border-radius: 999px;
background: #e8eef5;
color: #334155;
font-size: 0.68rem;
font-weight: 750;
display: inline-grid;
place-items: center;
}
.crm-deals-column[data-tone="blue"] .crm-deals-column-head b { background: #dbeafe; color: #1d4ed8; }
.crm-deals-column[data-tone="green"] .crm-deals-column-head b { background: #dcfce7; color: #15803d; }
.crm-deals-column[data-tone="rose"] .crm-deals-column-head b { background: #ffe4e6; color: #be123c; }
.crm-deals-column-body {
gap: 0.45rem;
padding: 0;
background: transparent;
}
.crm-deal-card {
padding: 0.62rem 0.65rem 0.55rem 0.75rem;
border-radius: 0.9rem;
border: 1px solid #e8eef4;
border-left: 3px solid #cbd5e1;
box-shadow: none;
background: #fff;
}
.crm-deal-card[data-tone="blue"] { border-left-color: #3b82f6; }
.crm-deal-card[data-tone="yellow"] { border-left-color: #eab308; }
.crm-deal-card[data-tone="orange"] { border-left-color: #f97316; }
.crm-deal-card[data-tone="purple"] { border-left-color: #8b5cf6; }
.crm-deal-card[data-tone="green"] { border-left-color: #22c55e; }
.crm-deal-card[data-tone="rose"] { border-left-color: #fb7185; }
.crm-deal-card-title {
font-size: 0.8rem;
font-weight: 750;
letter-spacing: -0.02em;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}
.crm-deal-card-party {
display: flex;
align-items: center;
gap: 0.28rem;
margin: 0.28rem 0 0;
color: #64748b;
font-size: 0.68rem;
}
.crm-deal-card-party span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-deal-card-party svg {
flex-shrink: 0;
opacity: 0.7;
}
.crm-deal-card-bottom {
display: flex;
align-items: center;
gap: 0.3rem;
margin-top: 0.45rem;
}
.crm-deal-card-amount {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: -0.02em;
color: #0f172a;
background: #f1f5f9;
border-radius: 999px;
padding: 0.12rem 0.45rem;
}
.crm-deal-card-win {
display: inline;
margin: 0;
font-size: 0.62rem;
color: #64748b;
}
.crm-deal-card-move {
margin-left: auto;
display: flex;
gap: 0.1rem;
}
.crm-deal-move {
width: 1.4rem;
height: 1.4rem;
border: 0;
background: #f8fafc;
color: #64748b;
}
html[data-theme="dark"] .crm-deals-stats,
html[data-theme="dark"] .crm-deal-card {
background: #1b2940 !important;
border-color: #2a3a52 !important;
}
html[data-theme="dark"] .crm-deals-stats article + article {
border-left-color: #2a3a52;
}
html[data-theme="dark"] .crm-deals-stat-icon {
background: #152033;
}
html[data-theme="dark"] .crm-deal-card-amount {
background: #152033;
color: #e8eef6;
}
html[data-theme="dark"] .crm-deals-column-head b {
background: #152033;
color: #cbd5e1;
}
/* ==== Add Deal form even grid :: modeb-deal-form-align (live-only) ==== */
.overlay.overlay-deal-form {
align-items: center;
padding: 1rem 1rem calc(4.6rem + env(safe-area-inset-bottom, 0px));
}
.sheet.sheet-deal-form {
width: min(var(--mode-b-core-width, 900px), calc(100% - 1.5rem));
max-width: var(--mode-b-core-width, 900px);
max-height: 100%;
overflow: hidden;
gap: 0.65rem;
padding: 1rem 1.35rem 1.2rem;
border-radius: 1.25rem;
box-sizing: border-box;
}
.sheet.sheet-deal-form .sheet-handle {
display: none;
}
.sheet.sheet-deal-form .sheet-head-row h2 {
font-size: 1.15rem;
}
.sheet.sheet-deal-form .sheet-body {
padding: 0.15rem 0 0;
overflow-x: hidden !important;
overflow-y: auto !important;
max-width: 100%;
}
.sheet.sheet-deal-form.sheet-activity-form {
max-height: min(92dvh, 46rem);
}
.sheet.sheet-deal-form.sheet-activity-form .sheet-body {
overflow-y: auto !important;
}
.lead-form.deal-form-flat {
gap: 0.95rem;
}
.lead-form.deal-form-flat .deal-form-grid {
display: flex;
flex-direction: column;
gap: 0.95rem;
width: 100%;
}
.lead-form.deal-form-flat .deal-form-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0.95rem 1.1rem;
width: 100%;
min-width: 0;
}
.lead-form.deal-form-flat .deal-form-span,
.lead-form.deal-form-flat .deal-form-row > .field-with-mic,
.lead-form.deal-form-flat .field,
.lead-form.deal-form-flat .field-control {
width: 100%;
min-width: 0;
max-width: 100%;
}
.lead-form.deal-form-flat .field {
gap: 0.4rem;
}
.lead-form.deal-form-flat .field-label-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
width: 100%;
min-height: 0;
}
.lead-form.deal-form-flat .field-label-row label {
flex: 1 1 auto;
min-width: 0;
font-size: 0.74rem;
font-weight: 650;
color: #475569;
}
.lead-form.deal-form-flat .field-with-mic .voice-session {
margin-left: 0;
flex: 0 0 auto;
}
.lead-form.deal-form-flat .field-icon {
color: #94a3b8 !important;
}
.lead-form.deal-form-flat .field[data-as='select'] .field-control {
display: flex !important;
width: 100% !important;
max-width: 100%;
}
.lead-form.deal-form-flat .field[data-as='select'] select {
width: 100% !important;
max-width: 100%;
field-sizing: fixed;
flex: 1 1 auto;
}
.lead-form.deal-form-flat .field input,
.lead-form.deal-form-flat .field select {
box-sizing: border-box;
width: 100%;
height: 2.6rem;
min-height: 2.6rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border-radius: 0.8rem;
}
.lead-form.deal-form-flat .field textarea {
box-sizing: border-box;
width: 100%;
min-height: 4.5rem;
height: 4.5rem;
max-height: 4.5rem;
resize: none;
border-radius: 0.8rem;
}
.lead-form.deal-form-flat .lead-form-actions {
margin-top: 0.35rem;
gap: 0.75rem;
}
.lead-form.deal-form-flat .lead-form-grid.deal-form-grid {
display: flex;
flex-direction: column;
gap: 0.95rem;
width: 100%;
}
.lead-form.deal-form-flat .deal-form-row > .lead-phone-field,
.lead-form.deal-form-flat .lead-phone-field,
.lead-form.deal-form-flat .lead-phone-row {
width: 100%;
min-width: 0;
max-width: 100%;
}
.lead-form.deal-form-flat .lead-phone-field .field-label-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.lead-form.deal-form-flat .lead-form-steps {
margin-bottom: 0.35rem;
}
@media (max-width: 36rem) {
.lead-form.deal-form-flat .deal-form-row {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==== Deals compact list + stage filters :: modeb-deals-list (live-only) ==== */
.crm-deals-list-page {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1 1 auto;
gap: 0.55rem;
}
.crm-deals-list-page .crm-deals-kanban {
display: none !important;
}
.crm-deals-toolbar {
display: flex;
align-items: center;
gap: 0.4rem;
}
.crm-deals-stage-tabs {
display: flex;
gap: 0.35rem;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 0.1rem;
scrollbar-width: none;
}
.crm-deals-stage-tabs::-webkit-scrollbar {
display: none;
}
.crm-deals-stage-tabs button {
flex: 0 0 auto;
border: 1px solid #e2e8f0;
background: #fff;
color: #475569;
border-radius: 999px;
padding: 0.28rem 0.7rem;
font: inherit;
font-size: 0.72rem;
font-weight: 700;
cursor: pointer;
}
.crm-deals-stage-tabs button.on {
background: #2563eb;
border-color: #2563eb;
color: #fff;
}
.crm-deals-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 0.4rem;
padding-bottom: 0.4rem;
}
.crm-deals-empty {
margin: 1rem 0.2rem;
color: #64748b;
font-size: 0.85rem;
}
.crm-deals-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 0.45rem 0.55rem;
background: #fff;
border: 1px solid #e8eef4;
border-left: 3px solid #94a3b8;
border-radius: 0.8rem;
padding: 0.55rem 0.7rem;
}
.crm-deals-row[data-tone="blue"] { border-left-color: #3b82f6; }
.crm-deals-row[data-tone="green"] { border-left-color: #22c55e; }
.crm-deals-row[data-tone="rose"] { border-left-color: #fb7185; }
.crm-deals-row[data-tone="yellow"] { border-left-color: #eab308; }
.crm-deals-row[data-tone="orange"] { border-left-color: #f97316; }
.crm-deals-row[data-tone="purple"] { border-left-color: #8b5cf6; }
.crm-deals-row-main {
min-width: 0;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: 0.12rem;
}
.crm-deals-row-main strong {
font-size: 0.84rem;
font-weight: 750;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crm-deals-row-main span {
font-size: 0.7rem;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crm-deals-row-amount {
font-size: 0.78rem;
font-variant-numeric: tabular-nums;
color: #0f172a;
white-space: nowrap;
}
.crm-deals-row-stage {
font-style: normal;
font-size: 0.65rem;
font-weight: 750;
border-radius: 999px;
padding: 0.18rem 0.5rem;
background: #f1f5f9;
color: #334155;
white-space: nowrap;
}
.crm-deals-row-stage[data-tone="green"] { background: #dcfce7; color: #15803d; }
.crm-deals-row-stage[data-tone="rose"] { background: #ffe4e6; color: #be123c; }
.crm-deals-row-stage[data-tone="blue"] { background: #dbeafe; color: #1d4ed8; }
.crm-deals-row-stage[data-tone="yellow"] { background: #fefce8; color: #a16207; }
.crm-deals-row-stage[data-tone="orange"] { background: #fff7ed; color: #c2410c; }
.crm-deals-row-stage[data-tone="purple"] { background: #f5f3ff; color: #6d28d9; }
.crm-deals-row.selectable-record {
grid-template-columns: auto minmax(0, 1fr) auto auto;
}
.crm-deals-title-actions {
display: inline-flex;
align-items: center;
gap: 0.2rem;
}
html[data-theme="dark"] .crm-deals-row {
background: #1b2940 !important;
border-color: #2a3a52 !important;
}
html[data-theme="dark"] .crm-deals-row-main strong,
html[data-theme="dark"] .crm-deals-row-amount {
color: #e8eef6;
}
html[data-theme="dark"] .crm-deals-stage-tabs button {
background: #152033;
border-color: #2a3a52;
color: #cbd5e1;
}
.crm-deals-toolbar {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.crm-deals-search-bar {
display: flex;
align-items: center;
gap: 0.45rem;
width: 100%;
min-height: 2.45rem;
padding: 0 0.8rem;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
background: #fff;
color: #64748b;
}
.crm-deals-search-bar input {
flex: 1 1 auto;
min-width: 0;
border: 0;
background: transparent;
font: inherit;
font-size: 0.86rem;
color: #0f172a;
outline: none;
}
.crm-deals-stage-select {
position: relative;
display: flex;
align-items: center;
gap: 0.45rem;
min-height: 2.45rem;
padding: 0 2.1rem 0 0.75rem;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
background: #fff;
color: #0f172a;
}
.crm-deals-stage-select select {
flex: 1 1 auto;
min-width: 0;
appearance: none;
border: 0;
background: transparent;
font: inherit;
font-size: 0.9rem;
font-weight: 750;
color: #0f172a;
outline: none;
cursor: pointer;
}
.crm-deals-stage-select-chevron {
position: absolute;
right: 0.65rem;
top: 50%;
width: 1rem;
height: 1rem;
transform: translateY(-50%);
color: #64748b;
pointer-events: none;
}
.crm-deals-stage-select-chevron svg {
width: 100%;
height: 100%;
display: block;
}
.crm-deals-list-page .crm-deals-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
gap: 0.5rem;
}
.crm-deals-row {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"name amount"
"name stage";
padding: 0.7rem 0.8rem;
border-radius: 0.95rem;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.crm-deals-row-main { grid-area: name; }
.crm-deals-row-amount {
grid-area: amount;
justify-self: end;
font-weight: 750;
}
.crm-deals-row-stage {
grid-area: stage;
justify-self: end;
align-self: start;
}
.crm-deals-row.selectable-record {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"sel name amount"
"sel name stage";
}
.crm-deals-pagination {
flex: 0 0 auto;
margin-top: 0.15rem;
padding-bottom: 0.15rem;
}
html[data-theme="dark"] .crm-deals-search-bar,
html[data-theme="dark"] .crm-deals-stage-select {
background: #152033;
border-color: #2a3a52;
color: #cbd5e1;
}
html[data-theme="dark"] .crm-deals-search-bar input,
html[data-theme="dark"] .crm-deals-stage-select select {
color: #e8eef6;
}
/* ==== CRM Tasks add form + list :: modeb-tasks-form (live-only) ==== */
.crm-tasks-page {
display: flex;
flex-direction: column;
min-height: 0;
gap: 0.55rem;
}
.crm-tasks-table {
display: flex;
flex-direction: column;
gap: 0.4rem;
min-width: 0;
overflow-x: hidden;
}
.crm-tasks-head,
.crm-tasks-row {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(4.8rem, 0.75fr) minmax(4.4rem, 0.55fr) 6.4rem;
align-items: center;
column-gap: 0.45rem;
}
.crm-tasks-head {
padding: 0.4rem 0.85rem;
border-radius: 0.95rem;
background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
border: 1px solid #e6edf5;
box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(15, 23, 42, 0.04);
color: #64748b;
font-size: 0.72rem;
font-weight: 720;
letter-spacing: 0.01em;
text-transform: none;
}
.crm-tasks-head span {
display: inline-flex;
align-items: center;
min-width: 0;
}
.crm-tasks-head[data-selecting="true"] {
padding-left: calc(0.85rem + 1.65rem);
}
.crm-tasks-head span[data-col="action"] {
justify-content: flex-end;
}
.crm-tasks-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.crm-tasks-row {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(4.8rem, 0.75fr) minmax(4.4rem, 0.55fr) 6.4rem;
align-items: center;
gap: 0.45rem;
background: #fff;
border: 1px solid #e8eef4;
border-left: 3px solid #f59e0b;
border-radius: 0.9rem;
padding: 0.62rem 0.8rem;
}
.crm-tasks-row[data-status="completed"] {
border-left-color: #22c55e;
}
.crm-tasks-row-main {
min-width: 0;
text-decoration: none;
color: inherit;
}
.crm-tasks-row-main strong {
font-size: 0.88rem;
font-weight: 750;
color: #0f172a;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-tasks-when {
min-width: 0;
font-size: 0.72rem;
font-weight: 650;
color: #64748b;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-tasks-status {
font-style: normal;
font-size: 0.68rem;
font-weight: 750;
border-radius: 999px;
padding: 0.18rem 0.55rem;
background: #ffedd5;
color: #c2410c;
}
.crm-tasks-status[data-status="completed"] {
background: #dcfce7;
color: #15803d;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row {
background: linear-gradient(180deg, #fbfaff 0%, #fff 72%);
border: 1px solid #ece7f8;
border-left: 0;
border-radius: 1rem;
padding: 0.62rem 0.8rem 0.62rem 0.95rem;
box-shadow: 0 8px 18px rgba(76, 29, 149, 0.05);
position: relative;
overflow: hidden;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-head {
padding-left: 0.95rem;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row::before {
content: "";
position: absolute;
left: 0;
top: 0.55rem;
bottom: 0.55rem;
width: 0.28rem;
border-radius: 999px;
background: #818cf8;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row[data-priority="low"]::before {
background: #2dd4bf;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row[data-priority="normal"]::before {
background: #818cf8;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row[data-priority="high"]::before {
background: #f43f5e;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row[data-status="completed"] {
background: linear-gradient(180deg, #f4fbf6 0%, #fff 78%);
border-color: #dbeee0;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row-main {
min-width: 0;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row-main strong {
font-size: 0.9rem;
font-weight: 780;
color: #1e1b4b;
}
.crm-tasks-nest {
display: flex;
align-items: center;
gap: 0.45rem;
padding-left: 0.15rem;
}
.crm-tasks-nest-rail {
width: 0.7rem;
height: 0.7rem;
border-left: 1.5px solid #c4b5fd;
border-bottom: 1.5px solid #c4b5fd;
border-bottom-left-radius: 0.28rem;
display: block;
flex: 0 0 auto;
margin-top: -0.15rem;
}
.crm-tasks-priority {
justify-self: start;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 0.4rem;
padding: 0.12rem 0.45rem 0.12rem 0.55rem;
}
.crm-tasks-priority::before {
content: "";
width: 0.38rem;
height: 0.38rem;
border-radius: 0.08rem;
transform: rotate(45deg);
display: inline-block;
margin-right: 0.32rem;
vertical-align: 0.05rem;
}
.crm-tasks-priority[data-priority="low"] {
background: #ccfbf1;
color: #0f766e;
}
.crm-tasks-priority[data-priority="low"]::before {
background: #14b8a6;
}
.crm-tasks-priority[data-priority="normal"] {
background: #e0e7ff;
color: #4338ca;
}
.crm-tasks-priority[data-priority="normal"]::before {
background: #6366f1;
}
.crm-tasks-priority[data-priority="high"] {
background: #ffe4e6;
color: #be123c;
}
.crm-tasks-priority[data-priority="high"]::before {
background: #f43f5e;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-status {
border-radius: 0.45rem;
background: #eef2ff;
color: #4338ca;
}
.crm-tasks-complete {
width: 2rem;
height: 2rem;
border: 0;
border-radius: 999px;
background: #eff6ff;
color: #2563eb;
display: grid;
place-items: center;
cursor: pointer;
}
.crm-tasks-edit {
width: 2rem;
height: 2rem;
border: 0;
border-radius: 999px;
background: #fff7ed;
color: #c2410c;
display: grid;
place-items: center;
cursor: pointer;
text-decoration: none;
}
.crm-tasks-row-acts {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 0.2rem;
}
.crm-tasks-delete {
width: 2rem;
height: 2rem;
border: 0;
border-radius: 999px;
background: #fff1f2;
color: #e11d48;
display: grid;
place-items: center;
cursor: pointer;
}
.crm-tasks-bulk {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.5rem 0.7rem;
border: 1px solid #bfe8e4;
border-radius: 0.8rem;
background: #ecfeff;
font-size: 0.78rem;
font-weight: 650;
color: #0f766e;
}
.crm-tasks-bulk-actions {
display: inline-flex;
align-items: center;
gap: 0.35rem;
border: 0;
border-radius: 0.55rem;
background: #0f766e;
color: #fff;
font: inherit;
font-weight: 750;
padding: 0.38rem 0.75rem;
cursor: pointer;
}
.crm-tasks-bulk-clear {
margin-left: auto;
border: 0;
background: transparent;
color: #0f766e;
font: inherit;
font-weight: 700;
cursor: pointer;
text-decoration: underline;
}
.sheet.sheet-deal-form.sheet-task-bulk {
width: min(28rem, calc(100% - 1.5rem));
}
.sheet.sheet-deal-form.sheet-task-bulk .sheet-body {
overflow: hidden auto !important;
max-height: min(72dvh, 40rem);
}
.lead-form.deal-form-flat .crm-task-bulk-lead {
margin: 0;
color: #94a3b8;
font-size: 0.88rem;
}
.lead-form.deal-form-flat .crm-task-bulk-lead strong {
color: #334155;
font-weight: 750;
}
.lead-form.deal-form-flat .crm-task-bulk-delete {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-size: 0.92rem;
font-weight: 750;
color: #0f172a;
padding-bottom: 0.75rem;
border-bottom: 1px solid #e8eef4;
}
.lead-form.deal-form-flat .crm-task-bulk-delete input {
width: 1rem;
height: 1rem;
accent-color: #2563eb;
}
.lead-form.deal-form-flat .crm-task-bulk-actions {
justify-content: stretch;
margin-top: 0.2rem;
}
.lead-form.deal-form-flat .crm-task-bulk-actions .primary-btn {
width: 100%;
flex: 1 1 auto;
min-width: 0;
border-radius: 0.9rem;
padding: 0.78rem 1.2rem;
background: #3b82f6;
border-color: #3b82f6;
color: #fff;
}
.sheet-reminder-form .reminder-form-actions {
justify-content: flex-start;
}
.sheet-reminder-form .reminder-form-actions .primary-btn {
background: #0f766e;
border-color: #0f766e;
color: #fff;
}
html[data-theme="dark"] .crm-tasks-head {
background: linear-gradient(180deg, #24344c 0%, #1b2940 100%);
border-color: #334155;
color: #94a3b8;
box-shadow: none;
}
html[data-theme="dark"] .crm-tasks-row {
background: #1b2940;
border-color: #2a3a52;
}
html[data-theme="dark"] .crm-tasks-row-main strong {
color: #e8eef6;
}
html[data-theme="dark"] .crm-tasks-when {
color: #94a3b8;
}
html[data-theme="dark"] .sa-form[data-screen="crm-tasks-list"] .crm-tasks-row {
background: #172033;
border-color: #2a3a52;
box-shadow: none;
}
.crm-task-assignee {
display: flex;
flex-direction: column;
gap: 0.28rem;
position: relative;
}
.crm-task-assignee > label {
font-size: 0.78rem;
font-weight: 700;
color: #334155;
}
.crm-task-assignee-control {
position: relative;
display: flex;
align-items: center;
min-height: 2.6rem;
padding: 0 2.5rem 0 2.35rem;
border: 1px solid #dbe4f0;
border-radius: 0.85rem;
background: #fff;
}
.crm-task-assignee-icon {
position: absolute;
left: 0.7rem;
color: #2563eb;
}
.crm-task-assignee-search-icon {
position: absolute;
right: 2.55rem;
color: #94a3b8;
pointer-events: none;
}
.crm-task-assignee-control input {
flex: 1 1 auto;
min-width: 0;
border: 0;
background: transparent;
font: inherit;
font-size: 0.9rem;
color: #0f172a;
outline: none;
}
.crm-task-assignee-control .mic-btn,
.crm-task-assignee-control .voice-btn {
position: absolute;
right: 0.35rem;
}
.crm-task-assignee-options {
position: absolute;
z-index: 8;
left: 0;
right: 0;
top: calc(100% + 0.25rem);
max-height: 14rem;
overflow: auto;
margin: 0;
padding: 0.3rem;
list-style: none;
background: #0f2744;
border-radius: 0.7rem;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}
.crm-task-assignee-options button {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.05rem;
border: 0;
background: transparent;
color: #fff;
text-align: left;
padding: 0.45rem 0.6rem;
border-radius: 0.45rem;
cursor: pointer;
font: inherit;
}
.crm-task-assignee-options button strong {
font-size: 0.86rem;
font-weight: 700;
}
.crm-task-assignee-options button span {
font-size: 0.72rem;
color: #cbd5e1;
}
.crm-task-assignee-options li[aria-selected="true"] button,
.crm-task-assignee-options button:hover {
background: #93c5fd;
color: #0f172a;
}
.crm-task-assignee-options li[aria-selected="true"] button span,
.crm-task-assignee-options button:hover span {
color: #1e293b;
}
.crm-task-assignee-empty {
padding: 0.55rem 0.65rem;
color: #94a3b8;
font-size: 0.8rem;
}
/* ==== Deals list modern cards :: modeb-deals-modern (live-only) ==== */
.crm-deals-list-page {
gap: 0.75rem;
}
.crm-deals-list-page .crm-deals-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.45rem;
background: transparent;
border: 0;
box-shadow: none;
overflow: visible;
}
.crm-deals-list-page .crm-deals-stats article {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
padding: 0.7rem 0.65rem 0.65rem;
background: #fff;
border: 1px solid #e8eef5;
border-radius: 1rem;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}
.crm-deals-list-page .crm-deals-stats article + article {
border-left: 1px solid #e8eef5;
}
.crm-deals-list-page .crm-deals-stat-icon {
width: 1.9rem;
height: 1.9rem;
border-radius: 0.7rem;
}
.crm-deals-list-page .crm-deals-stats em {
display: block;
font-style: normal;
font-size: 0.62rem;
font-weight: 750;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #64748b;
}
.crm-deals-list-page .crm-deals-stats strong {
display: block;
font-size: 0.92rem;
font-weight: 800;
letter-spacing: -0.02em;
color: #0f172a;
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crm-deals-list-page .crm-deals-list {
gap: 0.65rem;
padding: 0.1rem 0.05rem 0.6rem;
}
.crm-deals-list-page .crm-deals-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: none;
align-items: center;
gap: 0.7rem;
padding: 0.85rem 0.9rem;
border: 1px solid #e8eef5;
border-left: 0;
border-radius: 1.1rem;
background: #fff;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}
.crm-deals-list-page .crm-deals-row.selectable-record {
grid-template-columns: auto auto minmax(0, 1fr) auto;
grid-template-areas: none;
}
.crm-deals-mark {
width: 2.35rem;
height: 2.35rem;
border-radius: 0.8rem;
display: grid;
place-items: center;
font-size: 0.95rem;
font-weight: 800;
letter-spacing: -0.02em;
flex-shrink: 0;
background: #eff6ff;
color: #1d4ed8;
}
.crm-deals-mark[data-tone="green"] { background: #ecfdf3; color: #15803d; }
.crm-deals-mark[data-tone="rose"] { background: #fff1f2; color: #be123c; }
.crm-deals-mark[data-tone="yellow"] { background: #fefce8; color: #a16207; }
.crm-deals-mark[data-tone="orange"] { background: #fff7ed; color: #c2410c; }
.crm-deals-mark[data-tone="purple"] { background: #f5f3ff; color: #6d28d9; }
.crm-deals-list-page .crm-deals-row-main {
grid-area: auto;
min-width: 0;
gap: 0.22rem;
}
.crm-deals-list-page .crm-deals-row-main strong {
font-size: 0.95rem;
font-weight: 750;
letter-spacing: -0.015em;
line-height: 1.25;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.crm-deals-list-page .crm-deals-row-main span {
display: inline-flex;
align-items: center;
gap: 0.28rem;
font-size: 0.76rem;
font-weight: 550;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.crm-deals-list-page .crm-deals-row-main span svg {
flex-shrink: 0;
color: #94a3b8;
}
.crm-deals-row-side {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.32rem;
min-width: 5.4rem;
}
.crm-deals-list-page .crm-deals-row-amount {
grid-area: auto;
justify-self: end;
font-size: 0.95rem;
font-weight: 800;
letter-spacing: -0.02em;
color: #0f172a;
}
.crm-deals-list-page .crm-deals-row-stage {
grid-area: auto;
justify-self: end;
font-size: 0.68rem;
font-weight: 750;
letter-spacing: 0.02em;
padding: 0.28rem 1.35rem 0.28rem 0.58rem;
appearance: none;
-webkit-appearance: none;
border: 0;
cursor: pointer;
max-width: 8.8rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.35rem center;
background-size: 0.75rem;
}
.crm-deals-stage-pick {
display: inline-flex;
justify-content: flex-end;
}
.crm-deals-list-page .crm-deals-row-stage:disabled {
cursor: wait;
opacity: 0.7;
}
.crm-deals-list-page .crm-deals-pagination {
padding: 0.15rem 0 0.35rem;
}
html[data-theme="dark"] .crm-deals-list-page .crm-deals-stats article,
html[data-theme="dark"] .crm-deals-list-page .crm-deals-row {
background: #1b2940 !important;
border-color: #2a3a52 !important;
}
html[data-theme="dark"] .crm-deals-list-page .crm-deals-stats strong,
html[data-theme="dark"] .crm-deals-list-page .crm-deals-row-main strong,
html[data-theme="dark"] .crm-deals-list-page .crm-deals-row-amount {
color: #e8eef6;
}
html[data-theme="dark"] .crm-deals-mark {
background: #152033;
}
/* ==== Deals list: restore page scroll (kanban used a locked 100dvh shell) ==== */
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) {
overflow: visible !important;
overflow-x: hidden !important;
height: auto !important;
max-height: none !important;
}
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) .sa-form-list,
.sa-form[data-screen="crm-opportunities-list"],
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-body,
.crm-deals-board,
.crm-deals-list-page {
height: auto !important;
max-height: none !important;
min-height: 0;
overflow: visible !important;
flex: 0 1 auto;
}
.crm-deals-list,
.crm-deals-list-page .crm-deals-list {
flex: 0 1 auto;
min-height: 0;
overflow: visible !important;
padding-bottom: 1.25rem;
}
.crm-deals-list-page .crm-deals-pagination {
padding-bottom: 0.85rem;
}
/* ==== Deals / Tasks / Reminders header + matches Leads add icon ==== */
.mode-b-shell .crm-deals-title-actions .crm-leads-btn.icon-only,
.mode-b-shell .crm-leads-title-actions .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-expenses-list"] > .sa-form-head .crm-leads-btn.icon-only {
flex: 0 0 auto;
width: 2.65rem !important;
height: 2.65rem !important;
padding: 0 !important;
gap: 0;
border-radius: 999px !important;
box-shadow: none !important;
}
.mode-b-shell .crm-deals-title-actions .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .crm-leads-title-actions .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-expenses-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"] {
background: #2563eb !important;
border: 1px solid #2563eb !important;
color: #fff !important;
}
.mode-b-shell .crm-deals-title-actions .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .crm-leads-title-actions .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-expenses-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover {
background: #1d4ed8 !important;
}
.mode-b-shell .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-expenses-list"] > .sa-form-head .crm-leads-btn.icon-only svg {
display: block;
}
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head {
align-items: center;
}
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-icon-btn,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-icon-btn,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-icon-btn,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-icon-btn,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-icon-btn {
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
border: 1px solid #e8eef4;
background: #fff;
color: #64748b;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-icon-btn:hover,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-icon-btn:hover,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-icon-btn:hover,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-icon-btn:hover,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-icon-btn:hover {
background: #eff6ff;
border-color: #bfdbfe;
color: #2563eb;
}
/* ==== Estimate/invoice add form: nested steps, no sheet scroll ==== */
.sheet.sheet-estimate-stepped {
overflow: hidden;
}
.sheet.sheet-estimate-stepped .sheet-body {
overflow: hidden !important;
display: flex;
flex-direction: column;
max-height: min(78dvh, 36rem);
}
.sheet.sheet-estimate-stepped .lead-form-stepped {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.lead-form .lead-form-steps {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 0.15rem;
}
.lead-form .lead-form-step {
display: inline-flex;
align-items: center;
gap: 0.28rem;
font-size: 0.72rem;
font-weight: 600;
color: #94a3b8;
}
.lead-form .lead-form-step em {
font-style: normal;
display: inline-grid;
place-items: center;
width: 1.2rem;
height: 1.2rem;
border-radius: 999px;
background: #e2e8f0;
color: #475569;
font-size: 0.68rem;
}
.lead-form .lead-form-step.active,
.lead-form .lead-form-step[data-on] {
color: #0f172a;
}
.lead-form .lead-form-step.active em,
.lead-form .lead-form-step[data-on] em {
background: #2563eb;
color: #fff;
}
.sheet.sheet-estimate-stepped .lead-form-panel {
flex: 1;
min-height: 0;
overflow: hidden;
}
.sheet.sheet-estimate-stepped .lead-form-panel[data-step="items"] {
overflow-y: auto;
scrollbar-width: none;
}
.sheet.sheet-estimate-stepped .lead-form-panel[data-step="items"]::-webkit-scrollbar {
display: none;
}
.sheet.sheet-estimate-stepped .lead-form-actions {
flex-shrink: 0;
margin-top: auto;
}
/* ==== Estimate/invoice print document (clean full-screen PY UI) ==== */
.overlay.overlay-commerce-print {
align-items: stretch;
justify-content: center;
padding: 0 !important;
background: #eef3f8;
z-index: 320;
overflow: hidden;
}
.commerce-print-screen {
width: min(100%, var(--mode-b-core-width, 900px));
max-width: var(--mode-b-core-width, 900px);
height: 100%;
min-height: 100dvh;
margin: 0 auto;
display: flex;
flex-direction: column;
background: #f4f7fb;
box-shadow: 0 0 0 1px #e8eef5;
}
.commerce-print-toolbar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.65rem 0.75rem 0.55rem;
background: #fff;
border: 0;
border-bottom: 1px solid #e8eef5;
border-radius: 0;
z-index: 2;
}
.commerce-print-toolbar-row {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
flex: 1 1 auto;
}
.commerce-print-titles {
min-width: 0;
}
.commerce-print-toolbar h2 {
margin: 0;
font-family: var(--serif);
font-size: 1.28rem;
font-weight: 750;
color: #12202b;
line-height: 1.1;
}
.commerce-print-titles p {
margin: 0.12rem 0 0;
font-size: 0.75rem;
font-weight: 650;
color: #64748b;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.commerce-print-actions {
display: flex;
flex-wrap: nowrap;
gap: 0.3rem;
align-items: center;
flex: 0 0 auto;
}
.commerce-print-wa {
border: 0;
border-radius: 999px;
min-width: 2.1rem;
height: 2.1rem;
padding: 0 0.55rem;
background: #16a34a;
color: #fff;
font-weight: 800;
font-size: 0.68rem;
letter-spacing: 0.04em;
cursor: pointer;
}
.commerce-print-body {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 0.75rem 0.75rem 1rem;
}
.commerce-print-paper {
background: #fff;
border: 1px solid #e8eef4;
border-radius: 1.05rem;
min-height: unset;
width: 100%;
max-width: none;
padding: 1.05rem 1rem 1.2rem;
color: #0f172a;
box-sizing: border-box;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.commerce-print-brand {
display: flex;
justify-content: space-between;
gap: 1rem;
padding-bottom: 0.9rem;
border-bottom: 1px solid #e2e8f0;
}
.commerce-print-company {
margin: 0;
font-size: 1.15rem;
font-weight: 800;
color: #2563eb;
}
.commerce-print-logo {
display: block;
max-height: 80px;
max-width: 260px;
width: auto;
height: auto;
object-fit: contain;
}
.commerce-print-kind {
text-align: right;
}
.commerce-print-kind > p:first-child {
margin: 0;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.06em;
color: #2563eb;
}
.commerce-print-meta {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 0.85rem;
margin: 1rem 0 1.05rem;
}
.commerce-print-label {
margin: 0 0 0.25rem;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #94a3b8;
}
.commerce-print-meta dl {
margin: 0;
display: grid;
gap: 0.45rem;
text-align: right;
}
.commerce-print-meta dt {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #94a3b8;
}
.commerce-print-meta dd {
margin: 0.05rem 0 0;
font-weight: 700;
}
.commerce-print-lines {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.commerce-print-lines > li {
border: 1px solid #e8eef4;
border-radius: 0.85rem;
padding: 0.7rem 0.75rem;
background: #f8fafc;
}
.commerce-print-line-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.commerce-print-line-top strong {
min-width: 0;
font-size: 0.9rem;
overflow-wrap: anywhere;
}
.commerce-print-line-top span {
flex: 0 0 auto;
font-weight: 800;
color: #0f172a;
}
.commerce-print-line-meta {
margin: 0.55rem 0 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.4rem;
}
.commerce-print-line-meta div {
min-width: 0;
background: #fff;
border: 1px solid #eef2f7;
border-radius: 0.65rem;
padding: 0.35rem 0.45rem;
}
.commerce-print-line-meta dt {
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #94a3b8;
}
.commerce-print-line-meta dd {
margin: 0.12rem 0 0;
font-size: 0.78rem;
font-weight: 750;
color: #0f172a;
overflow-wrap: anywhere;
}
.commerce-print-line-meta dd em {
display: block;
font-style: normal;
font-size: 0.68rem;
font-weight: 650;
color: #64748b;
margin-top: 0.08rem;
}
.commerce-print-line-note {
margin: 0.3rem 0 0;
color: #64748b;
font-size: 0.75rem;
line-height: 1.35;
}
.commerce-print-totals {
margin-left: auto;
margin-top: 0.85rem;
width: min(16rem, 100%);
display: grid;
gap: 0.35rem;
font-size: 0.85rem;
}
.commerce-print-totals p {
display: flex;
justify-content: space-between;
margin: 0;
color: #475569;
}
.commerce-print-total {
font-weight: 800;
color: #0f172a !important;
padding-top: 0.35rem;
border-top: 1px solid #e2e8f0;
}
.commerce-print-notes {
margin-top: 1.1rem;
font-size: 0.82rem;
}
.commerce-print-foot {
flex: 0 0 auto;
padding: 0.7rem 0.75rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
background: #fff;
border-top: 1px solid #e8eef5;
}
.commerce-print-foot .primary-btn {
width: 100%;
}
@media print {
body * {
visibility: hidden;
}
.commerce-print-paper,
.commerce-print-paper * {
visibility: visible;
}
.overlay.overlay-commerce-print,
.commerce-print-screen,
.commerce-print-body {
position: static !important;
background: #fff;
overflow: visible !important;
height: auto;
padding: 0;
}
.commerce-print-paper {
position: absolute;
inset: 0;
width: 100%;
min-height: auto;
border: 0;
box-shadow: none;
}
.no-print {
display: none !important;
}
}
/* ==== Estimate customer searchable select ==== */
.commerce-customer-picker {
position: relative;
}
.commerce-customer-menu {
position: fixed;
z-index: 260;
margin: 0;
padding: 0.35rem 0;
list-style: none;
max-height: min(18rem, calc(100dvh - 1.5rem));
overflow: auto;
background: #fff;
border: 1px solid #d7e2ee;
border-radius: 0.85rem;
box-shadow: 0 16px 40px color-mix(in srgb, #0f172a 18%, transparent);
}
.commerce-customer-menu li {
margin: 0;
}
.commerce-customer-menu button {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.1rem;
width: 100%;
border: 0;
background: transparent;
padding: 0.45rem 0.75rem;
text-align: left;
cursor: pointer;
color: #0f172a;
}
.commerce-customer-menu button:hover,
.commerce-customer-menu button[aria-selected="true"] {
background: #eff6ff;
}
.commerce-customer-menu .muted {
padding: 0.45rem 0.75rem;
}
.sa-form.crm-fb-shell > .sa-form-head {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.75rem;
padding: 0 0 0.7rem;
border-bottom: 1px solid #eef2f6;
}
.sa-form.crm-fb-shell > .sa-form-head .sa-form-pict {
display: none;
}
.sa-form.crm-fb-shell > .sa-form-head h1 {
margin: 0;
font-size: 1.08rem;
font-weight: 750;
text-align: left;
color: #163a5f;
}
.sa-form.crm-fb-shell > .sa-form-head .sa-form-titles {
flex: 1;
min-width: 0;
}
.crm-fb-head-actions {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 0.45rem;
margin-left: auto;
flex-shrink: 0;
}
.sa-form.crm-fb-shell .crm-fb-head-actions .primary-btn {
width: auto;
min-width: 4.75rem;
min-height: 2.3rem;
padding: 0.4rem 1.05rem;
}
.crm-fb-print-header {
display: grid;
gap: 0.75rem;
padding: 0.9rem;
border: 1px solid #e2e8f0;
border-radius: 1rem;
background: #fff;
}
.crm-fb-print-header h2 {
margin: 0;
font-size: 1rem;
color: #163a5f;
}
.crm-fb-form-tools {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.crm-fb-tool {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.35rem;
padding: 0.4rem 0.95rem;
border-radius: 0.8rem;
border: 1.5px solid #c4b5fd;
background: #f5f3ff;
color: #5b21b6;
font: inherit;
font-weight: 700;
cursor: pointer;
}
.crm-fb-print-save {
width: auto;
min-width: 7rem;
min-height: 2.3rem;
padding: 0.4rem 1rem;
justify-self: start;
}
.crm-print-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.65rem;
}
.crm-print-fields label,
.crm-print-fields-wide {
display: grid;
gap: 0.28rem;
font-size: 0.8rem;
font-weight: 650;
color: #334155;
}
.crm-print-fields-wide {
grid-column: 1 / -1;
}
.crm-print-fields input,
.crm-print-fields textarea {
min-height: 2.35rem;
border: 1px solid #e2e8f0;
border-radius: 0.7rem;
padding: 0.4rem 0.7rem;
font: inherit;
}
.crm-print-form-link {
margin: 0 0 0.5rem;
}
.crm-print-form-link a,
.crm-fb-print-header-row a {
font-weight: 700;
color: #2563eb;
}
.crm-print-editor {
display: grid;
gap: 1rem;
max-width: var(--mode-b-core-width, 900px);
margin-inline: auto;
width: 100%;
}
.crm-print-editor.is-edit .crm-fb-print-header {
width: 100%;
}
.crm-print-editor.is-preview {
max-width: 52rem;
}
.crm-print-live {
display: grid;
gap: 0.45rem;
min-width: 0;
}
.crm-print-live h2 {
margin: 0;
font-size: 1rem;
color: #163a5f;
}
.crm-print-live .commerce-print-paper {
margin: 0;
}
@media (max-width: 36rem) {
.crm-print-fields {
grid-template-columns: 1fr;
}
}
.crm-fb-top {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 0.45rem;
}
.crm-fb-preview {
display: inline-flex;
align-items: center;
min-height: 2.3rem;
padding: 0 0.9rem;
border-radius: 0.75rem;
border: 1.5px solid #3b82f6;
background: #eff6ff;
color: #1d4ed8;
font: inherit;
font-weight: 700;
}
.crm-fb-canvas {
background: #fff;
border-radius: 1.1rem;
padding: 1.05rem 0.95rem 1.2rem;
box-shadow: 0 10px 28px #12202b0f;
width: 100%;
max-width: var(--mode-b-core-width, 900px);
margin-inline: auto;
box-sizing: border-box;
}
.crm-fb-page {
width: 100%;
max-width: var(--mode-b-core-width, 900px);
margin-inline: auto;
}
.crm-fb-title {
margin: 0;
font-size: 1.35rem;
font-weight: 750;
color: #163a5f;
}
.crm-fb-lede {
margin: 0.2rem 0 0.85rem;
color: #8a97a8;
font-size: 0.9rem;
}
.crm-fb-steps {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0 0 0.9rem;
}
.crm-fb-step {
border: 1px solid #e2e8f0;
background: #fff;
color: #64748b;
border-radius: 999px;
padding: 0.35rem 0.85rem;
font: inherit;
font-size: 0.82rem;
font-weight: 650;
}
.crm-fb-step.is-on {
border-color: #3b82f6;
color: #1d4ed8;
background: #eff6ff;
}
.crm-fb-unused {
margin: 0 0 0.75rem;
font-size: 0.8rem;
color: #64748b;
}
.crm-fb-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-auto-flow: dense;
gap: 0.75rem;
}
.crm-fb-block {
position: relative;
grid-column: span 6;
background: #f4f7fb;
border: 1px solid transparent;
border-radius: 0.85rem;
padding: 0.85rem 0.9rem 0.95rem 1.7rem;
min-width: 0;
}
.crm-fb-block[data-span="full"] {
grid-column: 1 / -1;
}
.crm-fb-block.is-selected {
background: #fff;
border-color: #3b82f6;
box-shadow: 0 0 0 1px #3b82f6;
}
.crm-fb-block.is-dragging {
opacity: 0.7;
}
.crm-fb-handle {
position: absolute;
left: 0.3rem;
top: 50%;
transform: translateY(-50%);
border: 0;
background: transparent;
padding: 0.2rem;
cursor: grab;
}
.crm-fb-grip {
display: block;
width: 12px;
height: 16px;
background: radial-gradient(#94a3b8 1.35px, transparent 1.55px);
background-size: 6px 6px;
}
.crm-fb-knob {
position: absolute;
width: 12px;
height: 12px;
padding: 0;
border: 2px solid #fff;
border-radius: 999px;
background: #3b82f6;
box-shadow: 0 0 0 1px #3b82f6;
z-index: 3;
}
.crm-fb-knob-n { top: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.crm-fb-knob-s { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.crm-fb-knob-e { right: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.crm-fb-knob-w { left: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.crm-fb-knob-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.crm-fb-knob-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.crm-fb-knob-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.crm-fb-knob-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.crm-fb-field-label {
display: flex;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.35rem;
font-size: 0.78rem;
font-weight: 650;
color: #64748b;
}
.crm-fb-field-label strong {
color: #334155;
font-weight: 700;
}
.crm-fb-field-label em {
color: #dc2626;
font-style: normal;
}
.crm-fb-input {
width: 100%;
min-height: 2.45rem;
border: 1px solid #e2e8f0;
border-radius: 0.7rem;
background: #fff;
padding: 0.55rem 0.75rem;
font: inherit;
color: #94a3b8;
}
.crm-fb-size {
display: flex;
flex-wrap: wrap;
gap: 0.45rem 0.85rem;
margin-top: 0.55rem;
align-items: center;
justify-content: flex-end;
}
.crm-fb-remove {
border: 0;
background: transparent;
color: #be185d;
font: inherit;
cursor: pointer;
}
.crm-fb-add {
display: grid;
place-items: center;
gap: 0.35rem;
width: 100%;
min-height: 5.2rem;
margin-top: 0.85rem;
border: 1.5px dashed #d5dee8;
border-radius: 0.95rem;
background: #fff;
color: #94a3b8;
font: inherit;
cursor: pointer;
}
.crm-fb-add-plus {
width: 2rem;
height: 2rem;
border-radius: 999px;
border: 1.5px solid #cbd5e1;
display: grid;
place-items: center;
}
@media (max-width: 36rem) {
.crm-fb-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
.overlay.overlay-crm-fb-modal {
align-items: center;
justify-content: center;
padding: 1rem;
background: #0f172a66;
}
.crm-fb-modal {
width: min(34rem, 100%);
max-height: min(90dvh, 52rem);
overflow: auto;
background: #fff;
border-radius: 1.15rem;
padding: 1rem 1rem 1.1rem;
box-shadow: 0 18px 48px #12202b22;
}
.crm-fb-modal-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
}
.crm-fb-modal-head h2 {
margin: 0;
font-size: 1.15rem;
color: #163a5f;
}
.crm-fb-close {
border: 0;
background: transparent;
font-size: 1.45rem;
line-height: 1;
cursor: pointer;
color: #64748b;
}
.crm-fb-search {
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0.85rem 0;
background: #f1f5f9;
border-radius: 0.85rem;
padding: 0.45rem 0.7rem;
}
.crm-fb-search input {
border: 0;
background: transparent;
width: 100%;
font: inherit;
}
.crm-fb-catalog {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.65rem;
}
.crm-fb-catalog-card {
display: flex;
gap: 0.55rem;
align-items: flex-start;
text-align: left;
border: 1px solid #e2e8f0;
border-radius: 0.9rem;
background: #fff;
padding: 0.7rem;
font: inherit;
cursor: pointer;
}
.crm-fb-catalog-card:hover {
border-color: #c4b5fd;
background: #f8f5ff;
}
.crm-fb-catalog-card em {
display: block;
font-style: normal;
color: #94a3b8;
font-size: 0.78rem;
}
.crm-fb-catalog-icon {
width: 2.1rem;
height: 2.1rem;
border-radius: 999px;
background: #dbeafe;
color: #2563eb;
flex-shrink: 0;
display: grid;
place-items: center;
font-size: 0.78rem;
font-weight: 800;
}
.crm-fb-settings {
display: grid;
gap: 0.75rem;
margin-top: 0.85rem;
}
.crm-fb-settings-kind {
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0;
font-weight: 700;
color: #163a5f;
}
.crm-fb-settings label {
display: grid;
gap: 0.3rem;
font-size: 0.82rem;
font-weight: 650;
color: #334155;
}
.crm-fb-settings input,
.crm-fb-settings select {
min-height: 2.4rem;
border: 1px solid #e2e8f0;
border-radius: 0.7rem;
padding: 0.45rem 0.7rem;
font: inherit;
}
.crm-fb-check {
display: flex !important;
flex-direction: row;
align-items: center;
gap: 0.45rem;
}
.crm-fb-check input {
width: 1.05rem;
min-height: 1.05rem;
}
.crm-fb-options {
display: grid;
gap: 0.45rem;
}
.crm-fb-options p {
margin: 0;
font-size: 0.82rem;
font-weight: 650;
}
.crm-fb-option-row {
display: flex;
gap: 0.4rem;
align-items: center;
}
.crm-fb-option-row input {
flex: 1;
min-width: 0;
}
.crm-fb-modal-actions {
display: flex;
justify-content: flex-end;
gap: 0.45rem;
align-items: center;
}
.crm-fb-modal .crm-fb-save {
width: auto;
min-width: 6.5rem;
min-height: 2.4rem;
padding: 0.45rem 1.1rem;
}
.crm-fb-choice-preview,
.crm-fb-live-field {
display: grid;
gap: 0.35rem;
font-size: 0.85rem;
color: #334155;
}
.crm-fb-choice-preview label,
.crm-fb-live-field .crm-fb-check {
display: flex;
align-items: center;
gap: 0.4rem;
}
.crm-fb-live-field select[multiple] {
min-height: 5.5rem;
}
.crm-fb-rating {
display: flex;
gap: 0.45rem;
flex-wrap: wrap;
font-size: 1.1rem;
color: #7c3aed;
}
.crm-fb-rating label {
display: flex;
align-items: center;
gap: 0.2rem;
}
.commerce-builder-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin: 0.75rem 0 0;
}
.commerce-form-preview-kicker {
margin: 0 0 0.75rem;
font-size: 0.78rem;
font-weight: 700;
color: #2563eb;
}
.commerce-form-preview-body {
display: flex;
flex-direction: column;
gap: 0.75rem;
overflow: auto;
max-height: min(70dvh, 36rem);
}
.commerce-layout-cell[data-span="full"] {
grid-column: 1 / -1;
}
.commerce-layout-cell {
width: min(100%, var(--fb-w, 100%));
max-width: min(var(--fb-w, none), var(--mode-b-core-width, 900px));
}
.commerce-layout-cell .field-control,
.commerce-layout-cell .field-control input,
.commerce-layout-cell .field-control select,
.commerce-layout-cell .field > input {
min-height: var(--fb-h, 2.45rem);
height: var(--fb-h, auto);
}
.commerce-layout-cell textarea {
min-height: var(--fb-h, 4rem);
height: var(--fb-h, auto);
}
/* Estimate / invoice status chips (replaces "All 2 · Draft 2" text) */
.crm-commerce-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.45rem;
margin: 0 0 0.7rem;
}
.crm-commerce-metric {
display: flex;
flex-direction: column;
gap: 0.12rem;
min-width: 0;
padding: 0.5rem 0.65rem;
border-radius: 0.85rem;
border: 1px solid #e8eef5;
background: #f8fafc;
}
.crm-commerce-metric em {
font-style: normal;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #64748b;
}
.crm-commerce-metric strong {
font-size: 0.88rem;
font-weight: 800;
color: #0f172a;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-commerce-metric.is-paid {
background: #ecfdf5;
border-color: #bbf7d0;
}
.crm-commerce-metric.is-paid strong { color: #047857; }
.crm-commerce-metric.is-due {
background: #fef2f2;
border-color: #fecaca;
}
.crm-commerce-metric.is-due strong { color: #b91c1c; }
.crm-commerce-metric.is-open {
background: #eff6ff;
border-color: #bfdbfe;
}
.crm-commerce-metric.is-open strong { color: #1d4ed8; }
.crm-commerce-status-bar {
display: flex;
flex-wrap: nowrap;
gap: 0.4rem;
margin: 0 0 0.85rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 0.1rem 0 0.15rem;
}
.crm-commerce-status-bar::-webkit-scrollbar {
display: none;
}
.crm-commerce-status-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex: 0 0 auto;
border: 1px solid #e2e8f0;
background: #fff;
color: #475569;
border-radius: 999px;
padding: 0.38rem 0.7rem 0.38rem 0.8rem;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.crm-commerce-status-chip.is-active {
border-color: #93c5fd;
background: #eff6ff;
color: #1d4ed8;
box-shadow: 0 0 0 3px color-mix(in srgb, #2563eb 12%, transparent);
}
.crm-commerce-status-count {
min-width: 1.25rem;
height: 1.25rem;
padding: 0 0.35rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.68rem;
font-weight: 800;
background: #f1f5f9;
color: #334155;
}
.crm-commerce-status-chip.is-active .crm-commerce-status-count {
background: #2563eb;
color: #fff;
}
/* ==== CRM overlay drawer nav :: modeb-crm-drawer-nav (2026-09-08) ==== */
.mode-b-nav-list {
display: contents;
}
.mode-b-nav-toggle {
display: none;
}
/* Single-column shell: nav never reserves layout width; content stays full-bleed. */
.mode-b-shell[data-mode-b="crm"] {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto minmax(0, 1fr) auto;
grid-template-areas:
"header"
"main"
"footer";
column-gap: 0 !important;
row-gap: 0;
width: 100% !important;
max-width: var(--mode-b-core-width) !important;
margin-inline: auto !important;
box-sizing: border-box !important;
padding-left: var(--mode-b-core-pad) !important;
padding-right: var(--mode-b-core-pad) !important;
height: 100dvh !important;
max-height: 100dvh !important;
min-height: 0 !important;
overflow: hidden !important;
}
.mode-b-shell[data-mode-b="crm"] > .workspace-header.mode-b-header,
.mode-b-shell[data-mode-b="crm"] > header.mode-b-header,
.mode-b-shell[data-mode-b="crm"] .workspace-header.mode-b-header {
grid-area: header;
position: sticky;
top: 0;
z-index: calc(var(--mode-b-chrome-z) + 2);
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Dim page when drawer is open (simple content difference). */
.mode-b-shell[data-mode-b="crm"] > .mode-b-nav-backdrop {
display: none;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-backdrop {
position: absolute;
inset: 0;
z-index: calc(var(--mode-b-chrome-z) + 2);
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: rgba(15, 23, 42, 0.22);
opacity: 0;
pointer-events: none;
cursor: pointer;
transition: opacity 0.22s ease;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav-backdrop {
display: block;
opacity: 1;
pointer-events: auto;
}
/* Overlay rail: never takes layout space; sits over content on the left. */
.mode-b-shell[data-mode-b="crm"] > .mode-b-nav,
.mode-b-shell[data-mode-b="crm"] .mode-b-nav {
grid-area: unset !important;
position: absolute !important;
inset: auto !important;
left: 0.35rem !important;
right: auto !important;
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
z-index: calc(var(--mode-b-chrome-z) + 4);
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
width: auto !important;
max-width: none !important;
height: auto !important;
max-height: min(78dvh, 28rem) !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
background: transparent !important;
border: 0 !important;
border-radius: 1.35rem !important;
box-shadow: none !important;
overflow: visible !important;
pointer-events: none;
transition: background-color 0.22s ease, box-shadow 0.22s ease, padding 0.22s ease, gap 0.22s ease;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] > .mode-b-nav,
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav {
gap: 0.7rem !important;
padding: 0.45rem !important;
background: #fff !important;
border: 1px solid #e8eef5 !important;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14) !important;
pointer-events: auto;
animation: modeb-crm-drawer-slide-in 0.28s ease-out both;
}
@keyframes modeb-crm-drawer-slide-in {
from {
opacity: 0.55;
transform: translate(-0.85rem, -50%);
}
to {
opacity: 1;
transform: translate(0, -50%);
}
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
left: auto;
top: auto;
transform: none;
z-index: 2;
order: 0;
flex: 0 0 auto;
width: 2.15rem;
height: 2.15rem;
margin: 0;
padding: 0;
border: 1px solid #e8eef5;
border-radius: 999px;
background: #fff;
color: #475569;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
cursor: pointer;
pointer-events: auto;
transition: box-shadow 0.15s ease, background-color 0.15s ease, transform 0.18s ease;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-toggle:hover {
background: #fff;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-toggle:active {
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-toggle-icon {
width: 1.05rem;
height: 1.05rem;
display: block;
background: no-repeat center / contain;
transition: transform 0.2s ease;
/* Closed: right arrow  open menu */
background-image: url("data:image/svg+xml;utf8,");
}
/* Open: same-spot close arrow (flipped) + menu icons stacked below. */
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav-toggle {
width: 2.15rem;
height: 2.15rem;
background: #fff;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav-toggle-icon {
width: 1.05rem;
height: 1.05rem;
/* Left arrow  close menu (same place as open control) */
background-image: url("data:image/svg+xml;utf8,");
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.85rem;
position: relative;
left: auto;
top: auto;
transform: translateX(-0.65rem);
order: 1;
width: auto;
max-height: 0;
min-height: 0;
margin: 0;
padding: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
visibility: hidden;
transition:
opacity 0.2s ease,
transform 0.26s ease,
max-height 0.26s ease,
visibility 0.2s ease;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav-list {
max-height: 22rem;
opacity: 1;
transform: translateX(0);
visibility: visible;
pointer-events: auto;
overflow: visible;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="false"] .mode-b-nav-list {
display: none !important;
pointer-events: none !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item {
flex: 0 0 auto !important;
width: 2rem !important;
min-width: 0 !important;
min-height: 0 !important;
height: 2rem !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 0 !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 999px !important;
font-size: 0 !important;
line-height: 0 !important;
background: #f8fafc !important;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
border: 1px solid #e8eef5 !important;
color: #64748b !important;
pointer-events: auto;
opacity: 0;
transform: translateX(-0.55rem);
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item {
opacity: 1;
transform: translateX(0);
animation: modeb-crm-nav-item-in 0.28s ease-out both;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(1) { animation-delay: 0.03s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(2) { animation-delay: 0.06s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(3) { animation-delay: 0.09s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(4) { animation-delay: 0.12s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(5) { animation-delay: 0.15s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(6) { animation-delay: 0.18s; }
@keyframes modeb-crm-nav-item-in {
from {
opacity: 0;
transform: translateX(-0.7rem);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item.active {
background: #eff6ff !important;
color: #0f172a !important;
border-color: #bfdbfe !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item:before {
margin: 0 !important;
padding: 0 !important;
width: 1.15rem !important;
height: 1.15rem !important;
background-color: transparent !important;
border-radius: 0 !important;
box-sizing: border-box !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item[href="/app/crm"]:before,
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item[href="/app/crm/"]:before {
padding: 0 !important;
width: 1.15rem !important;
height: 1.15rem !important;
background-color: transparent !important;
border-radius: 0 !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-label {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.mode-b-shell[data-mode-b="crm"] > a.skip {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
background: transparent !important;
color: transparent !important;
}
.mode-b-shell[data-mode-b="crm"] > a.skip:focus,
.mode-b-shell[data-mode-b="crm"] > a.skip:focus-visible {
position: fixed !important;
left: 0.75rem !important;
top: 0.75rem !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
clip: auto !important;
overflow: visible !important;
padding: 0.4rem 0.7rem !important;
border-radius: 0.6rem !important;
background: #0f172a !important;
color: #fff !important;
z-index: 100 !important;
}
.mode-b-shell[data-mode-b="crm"] > main,
.mode-b-shell[data-mode-b="crm"] main,
.mode-b-shell[data-mode-b="crm"] #main {
grid-area: main;
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 0.75rem !important;
min-width: 0;
min-height: 0;
overflow-x: hidden !important;
overflow-y: auto !important;
}
.mode-b-shell[data-mode-b="crm"] > .mode-b-footer,
.mode-b-shell[data-mode-b="crm"] .mode-b-footer {
grid-area: footer;
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 0.75rem !important;
}
.mode-b-shell[data-mode-b="crm"] .page-container,
.mode-b-shell[data-mode-b="crm"] .crm-fb-page,
.mode-b-shell[data-mode-b="crm"] .crm-fb-canvas {
max-width: none !important;
width: 100% !important;
margin-inline: 0 !important;
box-sizing: border-box !important;
}
@media (max-width: 40rem) {
.mode-b-shell[data-mode-b="crm"] {
padding-left: 0.55rem !important;
padding-right: 0.55rem !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav {
left: 0.05rem !important;
gap: 0.7rem !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-list {
gap: 0.9rem;
}
}
/* ==== Leads page backgrounds :: modeb-people-white-bg (updated → Mode A core #f6f8fc)
Match Contacts core surface. Row zebra handled separately. ==== */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"],
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
background-image: none !important;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.mode-b-shell .sa-form[data-screen="crm-leads-list"] > .sa-form-body {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
}
.mode-b-shell main:has([data-screen="crm-leads-list"]),
.mode-b-shell main:has([data-screen="crm-leads-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-leads-list"]) .sa-form-list {
background: #f6f8fc !important;
}
/* ==== CRM Expense Management page :: modeb-crm-expenses (2026-09-09) ==== */
.mode-b-shell .sa-form[data-screen="crm-expenses-list"] > .sa-form-head,
.sa-form[data-screen="crm-expenses-list"] > .sa-form-head {
align-items: center;
padding-right: 0.85rem;
box-sizing: border-box;
}
.mode-b-shell .sa-form[data-screen="crm-expenses-list"] > .sa-form-head .crm-leads-title-actions,
.sa-form[data-screen="crm-expenses-list"] > .sa-form-head .crm-leads-title-actions {
margin-left: auto;
margin-right: 0.15rem;
padding-right: 0.25rem;
}
.crm-expense-page {
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.crm-expense-graph.crm-expense-month-card {
margin: 0;
padding: 1rem 1rem 0.9rem;
border: 1px solid #e5eaf1;
border-radius: 1rem;
background: #fff;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
position: relative;
overflow: hidden;
}
.crm-expense-graph.crm-expense-month-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0.22rem;
background: #2563eb;
}
.crm-expense-graph-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.85rem;
}
.crm-expense-graph-head strong {
display: block;
font-size: 0.96rem;
font-weight: 750;
color: #0f172a;
}
.crm-expense-month-name {
margin: 0.15rem 0 0;
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
}
.crm-expense-month-tools {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.4rem;
}
.crm-expense-month-select {
position: relative;
display: inline-flex;
min-width: 10rem;
}
.crm-expense-month-select select {
appearance: none;
-webkit-appearance: none;
width: 100%;
padding: 0.4rem 1.9rem 0.4rem 0.7rem;
border: 1px solid #e2e8f0;
border-radius: 0.7rem;
background: #fff;
color: #0f172a;
font: inherit;
font-size: 0.76rem;
font-weight: 650;
cursor: pointer;
}
.crm-expense-month-select::after {
content: "";
position: absolute;
top: 50%;
right: 0.7rem;
width: 0.4rem;
height: 0.4rem;
border-right: 2px solid #64748b;
border-bottom: 2px solid #64748b;
transform: translateY(-65%) rotate(45deg);
pointer-events: none;
}
.crm-expense-month-count {
flex: 0 0 auto;
padding: 0.28rem 0.6rem;
border-radius: 999px;
background: #f1f5f9;
color: #334155;
font-size: 0.7rem;
font-weight: 700;
border: 1px solid #e2e8f0;
}
.crm-expense-month-empty {
margin: 0;
padding: 0.85rem 0.9rem;
border-radius: 0.8rem;
background: #f8fafc;
border: 1px dashed #cbd5e1;
color: #64748b;
font-size: 0.84rem;
line-height: 1.4;
}
.crm-expense-chart {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.crm-expense-chart-legend {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
font-size: 0.74rem;
font-weight: 650;
color: #64748b;
}
.crm-expense-chart-legend span {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.crm-expense-month-dot {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 999px;
flex: 0 0 auto;
}
.crm-expense-month-dot.is-income {
background: #16a34a;
}
.crm-expense-month-dot.is-expense {
background: #e11d48;
}
.crm-expense-chart-plot {
position: relative;
min-height: 12.5rem;
padding: 0.75rem 0.55rem 0.4rem;
border-radius: 0.85rem;
background: #f8fafc;
border: 1px solid #eef2f7;
overflow: hidden;
}
.crm-expense-chart-grid {
position: absolute;
inset: 0.75rem 0.7rem 2.55rem;
display: flex;
flex-direction: column;
justify-content: space-between;
pointer-events: none;
}
.crm-expense-chart-grid span {
display: block;
height: 1px;
background: #e2e8f0;
opacity: 0.85;
}
.crm-expense-chart-months {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.55rem;
min-height: 10.8rem;
align-items: end;
}
.crm-expense-chart-month {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
min-width: 0;
}
.crm-expense-chart-pair {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 0.28rem;
width: 100%;
}
.crm-expense-chart-rail {
width: 1.15rem;
height: 8rem;
display: flex;
align-items: flex-end;
justify-content: center;
border-radius: 0.55rem 0.55rem 0.35rem 0.35rem;
background: rgba(226, 232, 240, 0.45);
overflow: hidden;
}
.crm-expense-chart-bar {
display: block;
width: 100%;
border-radius: 0.5rem 0.5rem 0.28rem 0.28rem;
min-height: 0;
transition: height 0.25s ease;
}
.crm-expense-chart-bar.is-income {
background: #22c55e;
}
.crm-expense-chart-bar.is-expense {
background: #f43f5e;
}
.crm-expense-chart-month em {
font-style: normal;
font-size: 0.74rem;
font-weight: 700;
color: #334155;
}
.crm-expense-chart-month-net {
font-size: 0.68rem;
font-weight: 650;
color: #64748b;
text-align: center;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-expense-month-net {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: 0.85rem;
padding: 0.65rem 0.75rem;
border-radius: 0.75rem;
background: #f8fafc;
border: 1px solid #eef2f7;
font-size: 0.8rem;
color: #64748b;
}
.crm-expense-month-net strong {
font-size: 1rem;
}
.crm-expense-month-net strong.is-positive {
color: #15803d;
}
.crm-expense-month-net strong.is-negative {
color: #be123c;
}
@media (max-width: 40rem) {
.crm-expense-graph-head {
flex-direction: column;
}
.crm-expense-month-tools {
width: 100%;
justify-content: space-between;
}
.crm-expense-month-select {
flex: 1 1 auto;
min-width: 0;
}
.crm-expense-chart-rail {
width: 0.95rem;
height: 7rem;
}
}
.crm-expense-type.is-income {
color: #15803d;
font-weight: 700;
}
.crm-expense-type.is-expense {
color: #be123c;
font-weight: 700;
}
.crm-expense-type-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.45rem;
margin: 0 0 0.35rem;
padding: 0.3rem;
border: 1px solid #e8eef5;
border-radius: 999px;
background: #f8fafc;
}
.crm-expense-type-chip {
appearance: none;
border: 0;
border-radius: 999px;
padding: 0.55rem 0.75rem;
font: inherit;
font-weight: 700;
color: #64748b;
background: transparent;
cursor: pointer;
}
.crm-expense-type-chip.is-active {
background: #e11d48;
color: #fff;
box-shadow: 0 4px 12px rgba(225, 29, 72, 0.22);
}
.crm-expense-type-chip.is-income.is-active {
background: #16a34a;
box-shadow: 0 4px 12px rgba(22, 163, 74, 0.22);
}
.crm-expense-bill-files {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.55rem;
}
.crm-expense-file-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0;
}
.crm-expense-file-label {
font-size: 0.82rem;
font-weight: 700;
color: #334155;
}
.crm-expense-file-control {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 3.1rem;
padding: 0.55rem 0.65rem;
border: 1px dashed #cbd5e1;
border-radius: 0.9rem;
background: #f8fafc;
color: #64748b;
text-align: center;
overflow: hidden;
}
.crm-expense-file-control em {
font-style: normal;
font-size: 0.78rem;
font-weight: 650;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-expense-file-control input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.crm-expense-form {
gap: 0.85rem;
}
.crm-expense-form .field[data-as='select'] .field-control {
display: block;
position: relative;
width: 100%;
}
.crm-expense-form .field[data-as='select'] select {
display: block;
width: 100%;
max-width: 100%;
appearance: none;
-webkit-appearance: none;
padding-right: 2.4rem;
box-sizing: border-box;
}
.crm-expense-form .field[data-as='select'] .field-chevron {
position: absolute;
top: 50%;
right: 0.85rem;
left: auto;
transform: translateY(-50%);
pointer-events: none;
color: #64748b;
}
.crm-expense-row {
cursor: pointer;
}
.crm-expense-row-meta {
display: block;
margin-top: 0.18rem;
color: #64748b;
font-size: 0.74rem;
font-weight: 600;
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-expense-detail {
display: flex;
flex-direction: column;
gap: 0.95rem;
}
.crm-expense-detail-hero {
display: grid;
gap: 0.28rem;
padding: 0.95rem 1rem;
border-radius: 1rem;
border: 1px solid #e6edf5;
background: linear-gradient(180deg, #ffffff, #f8fafc);
}
.crm-expense-detail-hero.is-income {
border-color: #bbf7d0;
background: linear-gradient(180deg, #f0fdf4, #ffffff);
}
.crm-expense-detail-hero.is-expense {
border-color: #fecdd3;
background: linear-gradient(180deg, #fff1f2, #ffffff);
}
.crm-expense-detail-hero strong {
font-size: 1.45rem;
letter-spacing: -0.02em;
color: #0f172a;
}
.crm-expense-detail-hero p {
margin: 0;
color: #64748b;
font-size: 0.84rem;
font-weight: 600;
}
.crm-expense-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.65rem;
margin: 0;
}
.crm-expense-detail-grid > div,
.crm-expense-detail-wide {
padding: 0.7rem 0.8rem;
border-radius: 0.9rem;
background: #f8fafc;
border: 1px solid #eef2f7;
}
.crm-expense-detail-wide {
grid-column: 1 / -1;
}
.crm-expense-detail-grid dt {
margin: 0 0 0.2rem;
color: #64748b;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.crm-expense-detail-grid dd {
margin: 0;
color: #0f172a;
font-size: 0.92rem;
font-weight: 650;
word-break: break-word;
}
.crm-expense-detail-bills h3 {
margin: 0 0 0.55rem;
font-size: 0.92rem;
color: #0f172a;
}
.crm-expense-detail-bill-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.65rem;
}
.crm-expense-bill-card {
display: flex;
flex-direction: column;
gap: 0.55rem;
min-width: 0;
padding: 0.75rem;
border-radius: 0.95rem;
border: 1px solid #e6edf5;
background: #fff;
}
.crm-expense-bill-card.is-openable {
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}
.crm-expense-bill-card.is-empty {
color: #94a3b8;
background: #f8fafc;
}
.crm-expense-bill-card.is-empty p {
margin: 0;
font-size: 0.82rem;
}
.crm-expense-bill-card-head {
display: grid;
gap: 0.2rem;
min-width: 0;
}
.crm-expense-bill-card-label {
color: #64748b;
font-size: 0.7rem;
font-weight: 720;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.crm-expense-bill-card-head strong {
overflow: hidden;
color: #0f172a;
font-size: 0.84rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-expense-bill-preview,
.crm-expense-bill-pdf-btn {
position: relative;
display: block;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 0.75rem;
border: 1px solid #eef2f7;
background: #f8fafc;
cursor: pointer;
text-align: left;
}
.crm-expense-bill-preview img {
display: block;
width: 100%;
max-height: 11rem;
object-fit: contain;
background: #fff;
}
.crm-expense-bill-pdf {
display: block;
width: 100%;
height: 12rem;
border: 0;
background: #f8fafc;
pointer-events: none;
}
.crm-expense-bill-preview-hint {
position: absolute;
left: 0.55rem;
right: 0.55rem;
bottom: 0.55rem;
padding: 0.35rem 0.55rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.72);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
text-align: center;
pointer-events: none;
}
.crm-expense-bill-open {
appearance: none;
border: 0;
background: transparent;
color: #2563eb;
font: inherit;
font-size: 0.8rem;
font-weight: 700;
text-align: left;
padding: 0;
cursor: pointer;
}
.crm-expense-bill-open:hover {
text-decoration: underline;
}
.crm-expense-bill-fullscreen {
position: fixed;
inset: 0;
z-index: 80;
display: flex;
flex-direction: column;
background: rgba(2, 6, 23, 0.92);
color: #fff;
}
.crm-expense-bill-fullscreen-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 1rem;
background: rgba(15, 23, 42, 0.92);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.crm-expense-bill-fullscreen-meta {
min-width: 0;
display: grid;
gap: 0.15rem;
}
.crm-expense-bill-fullscreen-meta span {
color: #94a3b8;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.crm-expense-bill-fullscreen-meta strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.92rem;
}
.crm-expense-bill-fullscreen-actions {
display: inline-flex;
align-items: center;
gap: 0.55rem;
flex-shrink: 0;
}
.crm-expense-bill-fullscreen-link,
.crm-expense-bill-fullscreen-close {
appearance: none;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.08);
color: #fff;
border-radius: 999px;
padding: 0.45rem 0.85rem;
font: inherit;
font-size: 0.8rem;
font-weight: 700;
text-decoration: none;
cursor: pointer;
}
.crm-expense-bill-fullscreen-close {
background: #2563eb;
border-color: #2563eb;
}
.crm-expense-bill-fullscreen-stage {
flex: 1 1 auto;
min-height: 0;
display: grid;
place-items: center;
padding: 0.75rem;
}
.crm-expense-bill-fullscreen-stage img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 0.5rem;
background: #0b1220;
}
.crm-expense-bill-fullscreen-stage iframe {
width: min(100%, 72rem);
height: 100%;
min-height: 70dvh;
border: 0;
border-radius: 0.5rem;
background: #fff;
}
.crm-expense-detail-actions {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
align-items: center;
}
@media (max-width: 640px) {
.sa-form[data-screen='crm-expenses-list'] .crm-act-cols,
.sa-form[data-screen='crm-expenses-list'] .crm-expense-row {
grid-template-columns: minmax(0, 1fr) minmax(5.2rem, auto) 7.6rem;
}
.sa-form[data-screen='crm-expenses-list'] .crm-act-cols span[data-col='to'],
.sa-form[data-screen='crm-expenses-list'] .crm-expense-row .crm-act-due {
display: block;
text-align: right;
font-weight: 750;
}
.sa-form[data-screen='crm-expenses-list'] .crm-act-cols span[data-col='type'],
.sa-form[data-screen='crm-expenses-list'] .crm-act-cols span[data-col='from'],
.sa-form[data-screen='crm-expenses-list'] .crm-expense-row .crm-act-type,
.sa-form[data-screen='crm-expenses-list'] .crm-expense-row .crm-act-channel {
display: none;
}
.crm-expense-detail-bill-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 40rem) {
.crm-expense-bill-files {
grid-template-columns: 1fr;
}
.crm-expense-detail-grid {
grid-template-columns: 1fr;
}
}
/* ==== People list headers + search left margin :: modeb-leads-header-white (updated → core #f6f8fc) ==== */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-head,
.sa-form[data-screen="crm-leads-list"] > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] .sa-form.crm-leads-flat > .sa-form-head,
.sa-form.crm-leads-flat[data-screen="crm-leads-list"] > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .sa-form > .sa-form-head {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
background-image: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-search-wrap,
.sa-form[data-screen="crm-leads-list"] .crm-leads-search-wrap,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-search-wrap,
.sa-form[data-screen="crm-contacts-list"] .crm-leads-search-wrap {
margin-left: 5px;
padding-left: 0;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-search-toggle,
.sa-form[data-screen="crm-leads-list"] .crm-leads-search-toggle,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-search-toggle,
.sa-form[data-screen="crm-contacts-list"] .crm-leads-search-toggle {
margin-left: 0;
}
/* ==== People list gap + zebra row colors :: modeb-leads-list-zebra (2026-09-09) ==== */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list {
display: flex;
flex-direction: column;
gap: 0.55rem;
background: transparent !important;
background-color: transparent !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li {
background: transparent !important;
background-color: transparent !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row {
background: #fff !important;
background-color: #fff !important;
background-image: none !important;
border: 0 !important;
border-bottom: 1px solid #e8eef5 !important;
border-radius: 0 !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row {
background: #e8f1fa !important;
background-color: #e8f1fa !important;
background-image: none !important;
border: 0 !important;
border-bottom: 1px solid #d5e4f2 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Override older contacts blue card outline so rows keep bottom-only lines */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list article.crm-contact-row {
box-shadow: none !important;
}
/* ==== CRM Mode A design system  unify every CRM page (2026-09-10, server-only) ====
Extends Leads/Contacts chrome (white head, #f6f8fc canvas, serif titles, blue accents)
to all sa-form[data-screen^="crm-"] screens. Functionality untouched. */
.mode-b-shell[data-mode-b="crm"] {
--crm-canvas: #f6f8fc;
--crm-row-odd: #ffffff;
--crm-row-even: #e8f1fa;
--crm-row-line: #e8eef5;
--crm-row-line-even: #d5e4f2;
--crm-ink: #0f172a;
--crm-muted: #64748b;
--crm-blue: #2563eb;
--crm-blue-soft: #eff6ff;
--crm-blue-border: #bfdbfe;
--crm-panel-border: #e4eef7;
--crm-surface: #ffffff;
}
/* --- Main canvas: light blue wash behind every CRM page --- */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen^="crm-"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen^="crm-"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen^="crm-"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] {
background: var(--crm-canvas, #f6f8fc) !important;
background-color: var(--crm-canvas, #f6f8fc) !important;
}
/* --- Page header: Mode A core (Contacts + Leads); other CRM screens keep white until migrated --- */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"]:not([data-screen="crm-contacts-list"]):not([data-screen="crm-leads-list"]) > .sa-form-head,
.sa-form[data-screen^="crm-"]:not([data-screen="crm-contacts-list"]):not([data-screen="crm-leads-list"]) > .sa-form-head {
background: #fff !important;
background-color: #fff !important;
background-image: none !important;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem !important;
padding-top: 0.15rem;
padding-bottom: 0.15rem;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-head,
.sa-form[data-screen="crm-leads-list"] > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .sa-form > .sa-form-head {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
background-image: none !important;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem !important;
padding-top: 0.15rem;
padding-bottom: 0.15rem;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] > .sa-form-head .sa-form-pict,
.sa-form[data-screen^="crm-"] > .sa-form-head .sa-form-pict {
display: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] > .sa-form-head h1,
.sa-form[data-screen^="crm-"] > .sa-form-head h1 {
margin: 0;
font-family: var(--serif) !important;
font-size: 1.7rem !important;
font-weight: 650 !important;
letter-spacing: -0.02em;
color: var(--crm-ink, #0f172a) !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] > .sa-form-head .sa-form-titles p,
.sa-form[data-screen^="crm-"] > .sa-form-head .sa-form-titles p {
color: var(--crm-muted, #64748b);
}
/* Lead detail keeps hidden head / transparent body */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-lead-detail"] > .sa-form-head,
.sa-form[data-screen="crm-lead-detail"] > .sa-form-head {
display: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-lead-detail"] > .sa-form-body,
.sa-form[data-screen="crm-lead-detail"] > .sa-form-body {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
}
/* --- Body / list panel: white card on Mode A core canvas --- */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"]:not([data-screen="crm-lead-detail"]) > .sa-form-body,
.sa-form[data-screen^="crm-"]:not([data-screen="crm-lead-detail"]) > .sa-form-body {
background: var(--crm-surface, #fff) !important;
border: 1px solid var(--crm-panel-border, #e4eef7) !important;
box-shadow: 0 16px 40px rgba(18, 32, 43, 0.06) !important;
border-radius: 1.5rem !important;
padding: 1rem !important;
gap: 0.75rem !important;
}
/* --- Shared header action icons (filter / add / import / export) --- */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-title-actions,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-deals-title-actions,
.sa-form[data-screen^="crm-"] .crm-leads-title-actions,
.sa-form[data-screen^="crm-"] .crm-deals-title-actions {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-icon-btn,
.sa-form[data-screen^="crm-"] .crm-leads-icon-btn {
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
border: 1px solid #e8eef4;
background: #fff;
color: #64748b;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
display: inline-grid;
place-items: center;
cursor: pointer;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-icon-btn.active,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-icon-btn:hover,
.sa-form[data-screen^="crm-"] .crm-leads-icon-btn.active,
.sa-form[data-screen^="crm-"] .crm-leads-icon-btn:hover {
background: var(--crm-blue-soft, #eff6ff);
border-color: var(--crm-blue-border, #bfdbfe);
color: var(--crm-blue, #2563eb);
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-btn.icon-only,
.sa-form[data-screen^="crm-"] .crm-leads-btn.icon-only {
flex: 0 0 auto;
width: 2.65rem !important;
height: 2.65rem !important;
padding: 0 !important;
border-radius: 999px !important;
box-shadow: none !important;
display: inline-grid;
place-items: center;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-btn.icon-only[data-kind="add"],
.sa-form[data-screen^="crm-"] .crm-leads-btn.icon-only[data-kind="add"] {
background: var(--crm-blue, #2563eb) !important;
border: 1px solid var(--crm-blue, #2563eb) !important;
color: #fff !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-btn.icon-only[data-kind="add"]:hover,
.sa-form[data-screen^="crm-"] .crm-leads-btn.icon-only[data-kind="add"]:hover {
background: #1d4ed8 !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-search-wrap,
.sa-form[data-screen^="crm-"] .crm-leads-search-wrap {
margin-left: 5px;
}
/* --- Toolbar / search shared --- */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-act-tools,
.sa-form[data-screen^="crm-"] .crm-leads-toolbar,
.sa-form[data-screen^="crm-"] .crm-act-tools {
gap: 0.55rem;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-act-search,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-search,
.sa-form[data-screen^="crm-"] .crm-act-search,
.sa-form[data-screen^="crm-"] .crm-leads-search {
border: 1px solid #e6edf5;
background: #fff;
color: var(--crm-ink, #0f172a);
border-radius: 999px;
}
/* --- Act-table family (tasks/deals/emails/expenses/pipelines/stages/…) --- */
.mode-b-shell[data-mode-b="crm"] .crm-act-page,
.mode-b-shell[data-mode-b="crm"] .crm-tasks-page,
.sa-form[data-screen^="crm-"] .crm-act-page,
.sa-form[data-screen^="crm-"] .crm-tasks-page {
gap: 0.7rem;
}
.mode-b-shell[data-mode-b="crm"] .crm-act-cols,
.mode-b-shell[data-mode-b="crm"] .crm-tasks-head,
.sa-form[data-screen^="crm-"] .crm-act-cols,
.sa-form[data-screen^="crm-"] .crm-tasks-head {
background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%) !important;
border: 1px solid #e6edf5 !important;
border-radius: 0.95rem !important;
color: var(--crm-muted, #64748b) !important;
box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(15, 23, 42, 0.04);
}
.mode-b-shell[data-mode-b="crm"] .crm-act-list,
.mode-b-shell[data-mode-b="crm"] .crm-tasks-list,
.sa-form[data-screen^="crm-"] .crm-act-list,
.sa-form[data-screen^="crm-"] .crm-tasks-list {
display: flex;
flex-direction: column;
gap: 0.55rem;
background: transparent !important;
}
.mode-b-shell[data-mode-b="crm"] .crm-act-list > li:nth-child(odd) .crm-act-row,
.mode-b-shell[data-mode-b="crm"] .crm-act-list > li:nth-child(odd) > .crm-act-row,
.sa-form[data-screen^="crm-"] .crm-act-list > li:nth-child(odd) .crm-act-row {
background: var(--crm-row-odd, #fff) !important;
border-color: var(--crm-row-line, #e8eef5) !important;
}
.mode-b-shell[data-mode-b="crm"] .crm-act-list > li:nth-child(even) .crm-act-row,
.mode-b-shell[data-mode-b="crm"] .crm-act-list > li:nth-child(even) > .crm-act-row,
.sa-form[data-screen^="crm-"] .crm-act-list > li:nth-child(even) .crm-act-row {
background: var(--crm-row-even, #e8f1fa) !important;
border-color: var(--crm-row-line-even, #d5e4f2) !important;
box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .crm-act-row,
.sa-form[data-screen^="crm-"] .crm-act-row {
border-radius: 0.9rem;
border: 1px solid var(--crm-row-line, #e8eef5);
}
.mode-b-shell[data-mode-b="crm"] .crm-tasks-list > li:nth-child(odd) .crm-tasks-row,
.sa-form[data-screen^="crm-"] .crm-tasks-list > li:nth-child(odd) .crm-tasks-row {
background: var(--crm-row-odd, #fff) !important;
}
.mode-b-shell[data-mode-b="crm"] .crm-tasks-list > li:nth-child(even) .crm-tasks-row,
.sa-form[data-screen^="crm-"] .crm-tasks-list > li:nth-child(even) .crm-tasks-row {
background: var(--crm-row-even, #e8f1fa) !important;
box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .crm-tasks-row,
.sa-form[data-screen^="crm-"] .crm-tasks-row {
border: 1px solid var(--crm-row-line, #e8eef5);
border-radius: 0.9rem;
}
/* Meetings modern rows follow same zebra */
.mode-b-shell[data-mode-b="crm"] .crm-meet-modern .crm-tasks-list > li:nth-child(odd) .crm-tasks-row,
.mode-b-shell[data-mode-b="crm"] .crm-meet-modern .crm-act-list > li:nth-child(odd) .crm-act-row {
background: var(--crm-row-odd, #fff) !important;
}
.mode-b-shell[data-mode-b="crm"] .crm-meet-modern .crm-tasks-list > li:nth-child(even) .crm-tasks-row,
.mode-b-shell[data-mode-b="crm"] .crm-meet-modern .crm-act-list > li:nth-child(even) .crm-act-row {
background: var(--crm-row-even, #e8f1fa) !important;
}
/* --- Dashboard / More / utility pages --- */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-dashboard"] .crm-dashboard,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-dashboard"] .crm-dashboard-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-home"] .crm-more-page {
background: transparent;
}
.mode-b-shell[data-mode-b="crm"] .crm-more-nav,
.mode-b-shell[data-mode-b="crm"] .crm-more-list {
background: transparent;
}
.mode-b-shell[data-mode-b="crm"] a.crm-more-link,
.mode-b-shell[data-mode-b="crm"] .crm-more-link {
background: var(--crm-row-odd, #fff);
border: 1px solid var(--crm-row-line, #e8eef5);
border-radius: 0.95rem;
}
.mode-b-shell[data-mode-b="crm"] a.crm-more-link:hover,
.mode-b-shell[data-mode-b="crm"] .crm-more-link:hover {
background: var(--crm-blue-soft, #eff6ff);
border-color: var(--crm-blue-border, #bfdbfe);
}
.mode-b-shell[data-mode-b="crm"] .crm-dash-hero,
.mode-b-shell[data-mode-b="crm"] .crm-dash-card,
.mode-b-shell[data-mode-b="crm"] .crm-dashboard article {
background: #fff;
border: 1px solid #eef2f7;
border-radius: 1rem;
}
/* --- Record / form utility pages --- */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-person"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-company"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-opportunity"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-activity"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-pipeline"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-import"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-export"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-merge"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-catalog"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-today"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-search"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-tags-list"] .action-card {
background: #fff;
border: 1px solid #eef2f7;
border-radius: 1rem;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}
/* --- Deals board: keep kanban readable on blue canvas --- */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-opportunities-list"] > .sa-form-body {
background: var(--crm-canvas, #f6f8fc) !important;
}
.mode-b-shell[data-mode-b="crm"] .crm-deals-column {
background: #e8f1fa;
}
.mode-b-shell[data-mode-b="crm"] .crm-deal-card,
.mode-b-shell[data-mode-b="crm"] .crm-deals-stats article {
background: #fff;
border: 1px solid #eef2f7;
}
/* --- Form builder / print: match panel chrome --- */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-estimate-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-invoice-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-payment-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-item-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-estimates-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-invoices-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-payments-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-items-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-estimate-print-form"] > .sa-form-body {
background: var(--crm-canvas, #f6f8fc) !important;
}
/* --- Primary buttons / links accent --- */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .primary-btn,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] button.primary,
.mode-b-shell[data-mode-b="crm"] .sheet-crm-filter .crm-filter-apply {
background: var(--crm-blue, #2563eb);
border-color: var(--crm-blue, #2563eb);
color: #fff;
}
/* --- Responsive --- */
@media (max-width: 640px) {
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] > .sa-form-head h1,
.sa-form[data-screen^="crm-"] > .sa-form-head h1 {
font-size: 1.35rem !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"]:not([data-screen="crm-lead-detail"]) > .sa-form-body,
.sa-form[data-screen^="crm-"]:not([data-screen="crm-lead-detail"]) > .sa-form-body {
border-radius: 1.1rem !important;
padding: 0.75rem !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-btn.icon-only,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-icon-btn,
.sa-form[data-screen^="crm-"] .crm-leads-btn.icon-only,
.sa-form[data-screen^="crm-"] .crm-leads-icon-btn {
width: 2.4rem !important;
height: 2.4rem !important;
}
}
@media (max-width: 40rem) {
.mode-b-shell[data-mode-b="crm"] main:has([data-screen^="crm-"]) .page-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* ==== end crm-mode-a-unify-all-pages ==== */
/* ==== Contacts list panel = Mode A core #f6f8fc (2026-09-11) ==== */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"],
.sa-form[data-screen="crm-contacts-list"] {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-head,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-head {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
background-image: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
background-image: none !important;
border-color: transparent !important;
box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
border: 0 !important;
box-shadow: none !important;
border-radius: 1.5rem !important;
}
/* Zebra on core canvas  no pure white rows */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row {
background: #e8f1fa !important;
background-color: #e8f1fa !important;
}
/* ==== Contacts: no white page chrome  Mode A core #f6f8fc only (2026-09-11) ==== */
.mode-b-shell[data-mode-b="crm"]:has([data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"]:has([data-screen="crm-contacts-list"]) > main,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"],
.sa-form[data-screen="crm-contacts-list"],
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-head,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
background-image: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
border: 0 !important;
box-shadow: none !important;
}
/* Rows: drop pure white; use core + soft zebra */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list > li .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] article.crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
background-image: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row {
background: #e8f1fa !important;
background-color: #e8f1fa !important;
background-image: none !important;
}
/* ==== Contacts title + outside-list canvas = #f6f8fc (final lock 2026-09-11) ==== */
html:has(.sa-form[data-screen="crm-contacts-list"]),
body:has(.sa-form[data-screen="crm-contacts-list"]),
#root:has(.sa-form[data-screen="crm-contacts-list"]),
.mode-b-shell:has(.sa-form[data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"]:has(.sa-form[data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"]:has(.sa-form[data-screen="crm-contacts-list"]) > main,
.mode-b-shell main:has(> .page-container .sa-form[data-screen="crm-contacts-list"]),
.mode-b-shell main:has(.sa-form[data-screen="crm-contacts-list"]),
.mode-b-shell main:has(.sa-form[data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell main:has(.sa-form[data-screen="crm-contacts-list"]) .sa-form-list,
.mode-b-shell .sa-form[data-screen="crm-contacts-list"],
.sa-form[data-screen="crm-contacts-list"] {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
background-image: none !important;
}
.mode-b-shell .sa-form[data-screen="crm-contacts-list"] > .sa-form-head,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-head,
.mode-b-shell main:has(.sa-form[data-screen="crm-contacts-list"]) .sa-form > .sa-form-head {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
background-image: none !important;
box-shadow: none !important;
}
/* Keep the list card itself white so “outside†contrast is visible */
.mode-b-shell .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
background: #ffffff !important;
background-color: #ffffff !important;
border: 1px solid #e4eef7 !important;
box-shadow: 0 16px 40px rgba(18, 32, 43, 0.06) !important;
border-radius: 1.5rem !important;
}
/* ==== CRM top + page headers = Mode A core design (2026-09-11) ==== */
.mode-b-shell[data-mode-b="crm"] > .workspace-header.mode-b-header,
.mode-b-shell[data-mode-b="crm"] > header.mode-b-header,
.mode-b-shell[data-mode-b="crm"] .workspace-header.mode-b-header {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
background-image: none !important;
border-bottom: 1px solid #e2e8f0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
.mode-b-shell[data-mode-b="crm"] .workspace-header.mode-b-header::after {
background: linear-gradient(90deg, #0055ff 0%, #2563eb 55%, #60a5fa 100%) !important;
}
.mode-b-shell[data-mode-b="crm"] .workspace-header.mode-b-header .mode-b-title strong {
font-family: var(--serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif) !important;
font-weight: 650 !important;
color: #0a1a4a !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] > .sa-form-head,
.sa-form[data-screen^="crm-"] > .sa-form-head {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
background-image: none !important;
box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] > .sa-form-head h1,
.sa-form[data-screen^="crm-"] > .sa-form-head h1 {
font-family: var(--serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif) !important;
color: #0a1a4a !important;
}
/* ==== People pages (Leads/Contacts/Customers): core #f6f8fc + outside list padding (2026-09-11) ==== */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"],
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"],
.sa-form[data-screen="crm-leads-list"],
.sa-form[data-screen="crm-contacts-list"],
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-head,
.sa-form[data-screen="crm-leads-list"] > .sa-form-head,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .crm-leads-list,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
background-image: none !important;
}
/* Outside padding around the list panel */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
padding: 0.85rem 1rem 1.15rem !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 1.25rem !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list {
padding-inline: 0.15rem !important;
gap: 0.55rem !important;
}
/* Row contrast on core canvas (no pure white page chrome) */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card.crm-lead-row {
background: #ffffff !important;
background-color: #ffffff !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row {
background: #e8f1fa !important;
background-color: #e8f1fa !important;
}
@media (max-width: 40rem) {
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
padding: 0.7rem 0.75rem 1rem !important;
}
}
/* ==== Deals page: title + list header = Mode A core (2026-09-11) ==== */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-opportunities-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-opportunities-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-opportunities-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-opportunities-list"],
.sa-form[data-screen="crm-opportunities-list"] {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head,
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-head {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
background-image: none !important;
box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head h1,
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-head h1 {
font-family: var(--serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif) !important;
color: #0a1a4a !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-opportunities-list"] > .sa-form-body,
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-body {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
border: 0 !important;
box-shadow: none !important;
}
/* Column header row: Title / Company / Amount / Stage / Action */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-opportunities-list"] .crm-act-cols,
.sa-form[data-screen="crm-opportunities-list"] .crm-act-cols {
background: #e8f1fa !important;
background-image: none !important;
border: 1px solid #d5e4f2 !important;
box-shadow: none !important;
color: #0a1a4a !important;
font-weight: 750 !important;
border-radius: 0.95rem !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-opportunities-list"] .crm-act-cols span,
.sa-form[data-screen="crm-opportunities-list"] .crm-act-cols span {
color: #334155 !important;
}
/* ==== Leads ONLY: title + list = Contacts core #f6f8fc (final lock 2026-09-11) ==== */
html:has(.sa-form[data-screen="crm-leads-list"]),
body:has(.sa-form[data-screen="crm-leads-list"]),
#root:has(.sa-form[data-screen="crm-leads-list"]),
.mode-b-shell:has(.sa-form[data-screen="crm-leads-list"]),
.mode-b-shell[data-mode-b="crm"]:has(.sa-form[data-screen="crm-leads-list"]),
.mode-b-shell[data-mode-b="crm"]:has(.sa-form[data-screen="crm-leads-list"]) > main,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]),
.mode-b-shell main:has([data-screen="crm-leads-list"]),
.mode-b-shell main:has(.sa-form[data-screen="crm-leads-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"],
.sa-form[data-screen="crm-leads-list"] {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
background-image: none !important;
}
/* Header title "Leads" background = Contacts core */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .sa-form > .sa-form-head,
.mode-b-shell main:has(.sa-form[data-screen="crm-leads-list"]) .sa-form > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-head,
.sa-form[data-screen="crm-leads-list"] > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] .sa-form.crm-leads-flat[data-screen="crm-leads-list"] > .sa-form-head {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
background-image: none !important;
box-shadow: none !important;
}
/* White nested list card (match Contacts)  core shows outside */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .sa-form > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.sa-form[data-screen="crm-leads-list"] > .sa-form-body {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
border: 1px solid #e4eef7 !important;
box-shadow: 0 16px 40px rgba(18, 32, 43, 0.06) !important;
border-radius: 1.5rem !important;
padding: 1rem 1.1rem 1.25rem !important;
margin: 0.35rem 0.65rem 1.1rem !important;
box-sizing: border-box !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list > li,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li {
background: transparent !important;
background-color: transparent !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list,
.sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list {
padding: 0.15rem 0.35rem 0.35rem !important;
gap: 0.45rem !important;
}
/* Lead row backgrounds = Mode A core #f6f8fc (same as Contacts rows) */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card.crm-lead-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card[data-tone],
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list > li .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list > li:nth-child(odd) .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list > li:nth-child(even) .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card.crm-lead-row {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
background-image: none !important;
border-radius: 0.85rem !important;
}
@media (max-width: 40rem) {
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.sa-form[data-screen="crm-leads-list"] > .sa-form-body {
padding: 0.75rem 0.7rem 1rem !important;
margin: 0.25rem 0.4rem 0.9rem !important;
}
}
/* ==== Contacts ONLY: white nested list + outside core padding (2026-09-11) ====
List chrome stays; nest rows inside a white card. Outside canvas/title = Mode A core. */
html:has(.sa-form[data-screen="crm-contacts-list"]),
body:has(.sa-form[data-screen="crm-contacts-list"]),
#root:has(.sa-form[data-screen="crm-contacts-list"]),
.mode-b-shell:has(.sa-form[data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"]:has(.sa-form[data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"]:has(.sa-form[data-screen="crm-contacts-list"]) > main,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]),
.mode-b-shell main:has([data-screen="crm-contacts-list"]),
.mode-b-shell main:has(.sa-form[data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"],
.sa-form[data-screen="crm-contacts-list"],
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .sa-form > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-head,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-head {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
background-image: none !important;
}
/* White nested list card  padding so core shows outside */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .sa-form > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
border: 1px solid #e4eef7 !important;
box-shadow: 0 16px 40px rgba(18, 32, 43, 0.06) !important;
border-radius: 1.5rem !important;
padding: 1rem 1.1rem 1.25rem !important;
margin: 0.35rem 0.65rem 1.1rem !important;
box-sizing: border-box !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li {
background: transparent !important;
background-color: transparent !important;
}
/* Inset list from white card edges */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list {
padding: 0.15rem 0.35rem 0.35rem !important;
gap: 0.45rem !important;
box-sizing: border-box !important;
}
/* List row backgrounds = Mode A core #f6f8fc (nested on white card) */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row {
background: #f6f8fc !important;
background-color: #f6f8fc !important;
background-image: none !important;
border-radius: 0.85rem !important;
}
@media (max-width: 40rem) {
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
padding: 0.75rem 0.7rem 1rem !important;
margin: 0.25rem 0.4rem 0.9rem !important;
}
}
/* ==== end contacts-white-nested-list-core ==== */
/* ==== Leads ONLY: clear list row card outlines (2026-09-15) ====
Beat zebra / contacts-list border rules (nth-child + !important) and
flatten gap + radius so rows are not separate outlined cards. */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list,
.sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list {
gap: 0 !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list > li,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li,
.sa-form[data-screen="crm-leads-list"] .crm-leads-list > li,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
margin: 0 !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card.crm-lead-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card[data-tone],
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list > li .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list > li:nth-child(odd) .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list > li:nth-child(even) .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card.crm-lead-row,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card[data-tone],
.sa-form[data-screen="crm-leads-list"] .crm-contact-row,
.sa-form[data-screen="crm-leads-list"] article.crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row {
border: 0 !important;
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* ==== end leads-list-no-outline ==== */
.duplicate-warn[data-tone='success'] {
background: color-mix(in srgb, #16a34a 10%, #fff);
border-color: color-mix(in srgb, #16a34a 28%, #e2e8f0);
}
.duplicate-warn[data-tone='success'] p {
color: #166534;
}
/* ==== Estimate print builder (header/footer canvas) ==== */
.crm-est-builder {
display: grid;
gap: 0.85rem;
}
.crm-est-builder > label {
display: grid;
gap: 0.28rem;
font-size: 0.82rem;
font-weight: 650;
color: #334155;
}
.crm-est-builder > label input,
.crm-print-editor.is-edit select {
min-height: 2.35rem;
border: 1px solid #d7e2ee;
border-radius: 0.7rem;
padding: 0.4rem 0.65rem;
}
.crm-est-locked {
display: grid;
gap: 0.25rem;
min-height: 7.5rem;
place-content: center;
text-align: center;
padding: 1.1rem;
border: 1.5px dashed #94a3b8;
border-radius: 1rem;
background: #f8fafc;
color: #163a5f;
font-weight: 750;
}
.crm-est-locked .muted {
font-weight: 500;
}
.crm-est-block {
display: grid;
gap: 0.45rem;
padding: 0.7rem;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
background: #fff;
}
.crm-est-block-head {
display: flex;
justify-content: space-between;
gap: 0.5rem;
align-items: center;
}
.crm-est-block-head button,
.crm-est-block-media button {
min-height: 2rem;
padding: 0.2rem 0.55rem;
border-radius: 0.55rem;
border: 1px solid #d7e2ee;
background: #fff;
}
.crm-est-block label {
display: grid;
gap: 0.25rem;
font-size: 0.8rem;
}
.crm-est-block-style {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.4rem;
}
.crm-est-block-bold {
display: flex !important;
flex-direction: row;
align-items: center;
gap: 0.35rem;
}
.crm-est-print-media,
.crm-est-print-media-wrap img {
max-height: 4.5rem;
max-width: 8rem;
object-fit: contain;
}
.crm-est-print-media-ph {
font-size: 0.78rem;
color: #64748b;
}
.crm-est-print-divider {
border: 0;
border-top: 1px solid #cbd5e1;
margin: 0.35rem 0;
}
.crm-est-print-blocks {
display: grid;
gap: 0.15rem;
}
.crm-est-print-blocks p {
margin: 0;
}
.crm-est-sample-banner {
margin: 0;
padding: 0.45rem 0.65rem;
border-radius: 0.65rem;
background: #fff7ed;
color: #9a3412;
font-weight: 650;
}
.sa-form.crm-fb-shell .crm-fb-head-actions .primary-btn.crm-fb-print-save {
min-width: 4.2rem;
min-height: 2.15rem;
padding: 0.32rem 0.85rem;
}
.commerce-print-paper.is-estimate {
padding: 0;
}
.commerce-print-sheet {
width: 100%;
border-collapse: collapse;
}
.commerce-print-sheet > thead > tr > th,
.commerce-print-sheet > tbody > tr > td,
.commerce-print-sheet > tfoot > tr > td {
text-align: left;
font-weight: inherit;
padding: 0.55rem 0.75rem;
vertical-align: top;
border: 0;
}
.commerce-print-items {
width: 100%;
border-collapse: collapse;
margin: 0.75rem 0;
}
.commerce-print-items th,
.commerce-print-items td {
border-bottom: 1px solid #e2e8f0;
padding: 0.4rem 0.3rem;
font-size: 0.85rem;
text-align: left;
}
.commerce-print-items th {
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #64748b;
}
@media print {
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
.commerce-print-paper.is-estimate {
position: static !important;
inset: auto;
break-inside: auto;
}
.commerce-print-sheet { page-break-inside: auto; }
.commerce-print-items thead { display: table-header-group; }
.commerce-print-items tr { break-inside: avoid; }
}
/* Platform layout — Super Admin home is the visual SoR.
Mode A and Mode B (.app-shell / .mode-b-shell) inherit canvas, type, cards, and chrome.
Loaded last so it wins over module CSS (including crmModeB.css). */
.app-shell {
background: var(--color-background);
color: var(--color-text);
font-family: var(--font-family-body);
}
.app-shell.mode-b-shell,
.mode-b-shell {
background: var(--color-background);
color: var(--color-text);
font-family: var(--font-family-body);
}
.platform-canvas,
.sunrise-wash {
pointer-events: none;
position: absolute;
inset: 0 0 auto 0;
left: 0;
right: 0;
width: auto;
max-width: none;
height: 18rem;
transform: none;
overflow: visible;
z-index: 0;
}
.app-shell .sunrise-sun,
.app-shell .sunrise-bird,
.app-shell .sunrise-hills,
.mode-b-shell .sunrise-sun,
.mode-b-shell .sunrise-bird,
.mode-b-shell .sunrise-hills {
display: none;
}
.app-shell .sunrise-glow,
.mode-b-shell .sunrise-glow {
background: var(--glow-platform);
}
.app-shell .sunrise-wash,
.app-shell .platform-canvas,
.mode-b-shell .sunrise-wash,
.mode-b-shell .platform-canvas,
.mode-b-shell[data-mode-b='crm'] > .platform-canvas,
.mode-b-shell[data-mode-b='crm'] > .sunrise-wash {
grid-column: auto;
grid-row: auto;
inset: 0 0 auto 0;
left: 0;
right: 0;
width: auto;
max-width: none;
height: 18rem;
transform: none;
overflow: visible;
z-index: 0;
pointer-events: none;
}
/* Header — transparent over the canvas, circular actions */
.app-shell > .workspace-header,
.app-shell.mode-b-shell > .workspace-header.mode-b-header,
.app-shell.mode-b-shell > header.mode-b-header,
.mode-b-shell > .workspace-header.mode-b-header,
.mode-b-shell > header.mode-b-header,
.mode-b-shell .workspace-header.mode-b-header {
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
.mode-b-shell .workspace-header.mode-b-header::after {
display: none !important;
}
.mode-b-shell .workspace-header.mode-b-header .workspace-brand {
justify-content: flex-start !important;
text-align: left !important;
}
.mode-b-shell .workspace-header.mode-b-header .mode-b-title {
align-items: flex-start !important;
}
.mode-b-shell .workspace-header.mode-b-header .mode-b-title strong {
font-family: var(--font-family-heading);
font-size: var(--font-size-headline-sm);
font-weight: var(--font-weight-bold);
color: var(--color-text-heading) !important;
letter-spacing: -0.02em;
}
.app-shell .header-round,
.mode-b-shell .header-round {
width: 2.45rem;
height: 2.45rem;
min-width: 2.45rem;
min-height: 2.45rem;
border-radius: var(--radius-full);
background: var(--card);
color: var(--color-text-heading);
box-shadow:
8px 6px 20px rgba(37, 99, 235, 0.16),
14px 10px 28px rgba(125, 211, 252, 0.22);
}
.app-shell .notify-slot .header-round,
.mode-b-shell .notify-slot .header-round {
position: relative;
}
.app-shell .notify-slot .header-round::after,
.mode-b-shell .notify-slot .header-round::after {
content: '';
position: absolute;
top: 0.12rem;
right: 0.12rem;
width: 0.46rem;
height: 0.46rem;
border-radius: 50%;
background: #fb7185;
box-shadow: 0 0 0 2px #fff;
pointer-events: none;
}
.app-shell .avatar-btn,
.mode-b-shell .avatar-btn,
.mode-b-shell .workspace-header.mode-b-header .user-menu .avatar-btn {
border-radius: var(--radius-full);
box-shadow:
0 0 0 2px #fff,
12px 10px 26px rgba(37, 99, 235, 0.28),
22px 14px 42px rgba(96, 165, 250, 0.38) !important;
}
.app-shell .avatar.avatar-monogram,
.app-shell .avatar-monogram,
.mode-b-shell .avatar.avatar-monogram,
.mode-b-shell .avatar-monogram {
background: var(--color-primary);
color: var(--color-on-primary);
}
.workspace-header .context-slot,
.sa-header-brand .context-slot,
.workspace-header-mode-a .context-slot,
.workspace-header-brand .context-slot {
flex: 1 1 auto;
min-width: 0;
max-width: none;
}
.workspace-header .context-slot-label,
.workspace-header .context-slot-trigger span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.mode-b-shell .workspace-header.mode-b-header .context-slot .context-slot-label,
.mode-b-shell .workspace-header.mode-b-header .context-slot .context-slot-trigger {
background: transparent !important;
border: 0 !important;
color: var(--color-text-heading) !important;
font-size: 0.98rem;
font-weight: 600;
padding: 0 !important;
}
/* Type — navy headings, muted body, Inter */
.app-shell h1,
.app-shell h2,
.app-shell h3,
.app-shell h4,
.mode-b-shell h1,
.mode-b-shell h2,
.mode-b-shell h3,
.mode-b-shell h4,
.home-greeting h1,
.sa-greeting h1,
.sa-form-titles h1,
.mode-b-shell .crm-dash-greeting,
.mode-b-shell .sa-form[data-screen='crm-leads-list'] > .sa-form-head h1 {
font-family: var(--font-family-heading);
color: var(--color-text-heading) !important;
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
}
.home-greeting h1,
.sa-console .home-greeting h1,
.sa-console .sa-greeting h1 {
font-size: var(--font-size-display);
letter-spacing: -0.04em;
color: var(--color-text-heading) !important;
}
.mode-b-shell .crm-dash-greeting {
font-size: var(--font-size-display-sm) !important;
letter-spacing: -0.03em;
}
.sa-greeting-sub,
.home-context,
.home-role,
.muted,
.kicker,
.mode-b-shell .crm-dash-kicker,
.mode-b-shell .crm-dash-sub,
.mode-b-shell .mode-b-footer {
color: var(--color-text-secondary) !important;
font-family: var(--font-family-body);
}
.insight-card-ask,
.insight-card-ask strong,
.insight-card-ask .muted,
.insight-card-ask .pict {
color: #fff !important;
}
.insight-card-ask .muted {
opacity: 1;
}
.app-shell main,
.mode-b-shell > main,
.mode-b-shell main,
.mode-b-shell #main {
background: transparent;
color: var(--color-text);
font-family: var(--font-family-body);
font-size: var(--font-size-body-md);
}
.mode-b-shell main:has([data-screen='crm-leads-list']) {
background: transparent !important;
}
/* Cards — 24px radius, pastel category fills, soft shadow */
.icon-card,
.action-card,
.stat-card,
.metric-card,
.login-card,
.hero-card,
.person-card,
.mode-b-shell .crm-dash-hero-card,
.mode-b-shell .crm-dash-kpi,
.mode-b-shell .crm-dash-task,
.mode-b-shell .crm-leads-search,
.mode-b-shell .crm-leads-filters {
color: var(--color-text);
border-color: var(--line);
border-radius: var(--radius-card);
box-shadow: var(--shadow);
}
.sa-console .sa-metric .metric-card,
.mode-b-shell .crm-dash-kpi {
border: 0 !important;
border-top: 0 !important;
border-radius: var(--radius-card) !important;
box-shadow: none;
min-height: 5.6rem;
}
.mode-b-shell .crm-dash-hero-card {
background: var(--color-pastel-blue) !important;
border: 0 !important;
border-top: 0 !important;
border-radius: var(--radius-card) !important;
box-shadow: none !important;
}
.mode-b-shell .crm-dash-hero-card-value,
.mode-b-shell .crm-dash-kpi-value,
.sa-console .sa-metric .metric-card strong {
font-family: var(--font-family-heading);
color: var(--color-text-heading) !important;
}
.mode-b-shell .crm-dash-kpi:nth-child(6n + 1) {
background: var(--color-pastel-blue) !important;
}
.mode-b-shell .crm-dash-kpi:nth-child(6n + 2) {
background: var(--color-pastel-purple) !important;
}
.mode-b-shell .crm-dash-kpi:nth-child(6n + 3) {
background: var(--color-pastel-green) !important;
}
.mode-b-shell .crm-dash-kpi:nth-child(6n + 4) {
background: var(--color-pastel-orange) !important;
}
.mode-b-shell .crm-dash-kpi:nth-child(6n + 5) {
background: var(--color-pastel-pink) !important;
}
.mode-b-shell .crm-dash-kpi:nth-child(6n) {
background: var(--color-pastel-sky) !important;
}
.mode-b-shell .crm-dash-kpi-icon,
.mode-b-shell .crm-dash-hero-card-icon {
border-radius: 0.9rem;
color: #fff;
}
.sa-console .sa-metric .metric-card .pict {
border-radius: 50%;
}
.mode-b-shell .crm-dash-kpi:nth-child(6n + 1) .crm-dash-kpi-icon,
.mode-b-shell .crm-dash-hero-card-icon {
background: var(--color-pastel-blue-ink);
}
.mode-b-shell .crm-dash-kpi:nth-child(6n + 2) .crm-dash-kpi-icon {
background: var(--color-pastel-purple-ink);
}
.mode-b-shell .crm-dash-kpi:nth-child(6n + 3) .crm-dash-kpi-icon {
background: var(--color-pastel-green-ink);
}
.mode-b-shell .crm-dash-kpi:nth-child(6n + 4) .crm-dash-kpi-icon {
background: var(--color-pastel-orange-ink);
}
.mode-b-shell .crm-dash-section-head h3,
.mode-b-shell .crm-dash-task-copy strong,
.mode-b-shell .crm-lead-section-title {
font-family: var(--font-family-heading);
color: var(--color-text-heading) !important;
}
.primary-btn,
.sa-form .primary-btn,
.mode-b-shell .crm-leads-btn.primary,
.sa-form[data-screen^='marketing-'] .primary-btn,
.sa-form[data-screen^='association-'] .primary-btn {
background: var(--brand);
border-color: var(--brand);
color: var(--color-on-primary);
font-family: var(--font-family-body);
border-radius: var(--radius-lg);
box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 28%, transparent);
}
.mode-b-shell .crm-leads-btn.secondary {
background: var(--card);
color: var(--color-pastel-blue-ink);
border-color: #93c5fd;
border-radius: var(--radius-lg);
}
.mode-b-shell .crm-leads-icon-btn {
border-radius: var(--radius-full);
background: var(--card);
color: var(--color-text-secondary);
border-color: var(--line);
}
/* Mode B dock — same white pill as Super Admin bottom nav */
.mode-b-shell > .mode-b-nav,
.mode-b-shell .mode-b-nav,
.mode-b-shell:not([data-mode-b='crm']) .mode-b-nav {
background: var(--card) !important;
border: 0 !important;
border-radius: var(--radius-xl) !important;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1) !important;
}
.mode-b-shell .mode-b-nav .mode-b-nav-item {
color: var(--color-text-secondary);
font-family: var(--font-family-body);
}
.mode-b-shell .mode-b-nav .mode-b-nav-item.active {
background: color-mix(in srgb, var(--color-primary) 12%, #fff);
color: var(--color-primary);
}
.mode-b-shell .mode-b-subnav {
background: transparent;
border-top-color: var(--line);
}
.mode-b-shell .mode-b-subnav-item {
color: var(--color-text-secondary);
}
.mode-b-shell .mode-b-subnav-item.is-on,
.mode-b-shell .mode-b-subnav-item:hover {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
.mode-b-shell .page-container {
color: var(--color-text);
}
.login-screen {
background: var(--color-background);
color: var(--color-text);
font-family: var(--font-family-body);
}
.bp-profile-card h3 svg {
color: #2563eb !important;
flex-shrink: 0;
}
.home-apps,
.home-metrics-grid,
.quick-grid,
.workspace-home {
width: 100%;
min-width: 0;
}
.home-apps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem;
}
.quick-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.workspace-home .app-card:not(.app-card-action) {
min-width: 0;
}
@media (min-width: 800px) {
.home-apps {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.quick-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* Home / shell: white page. Today cards keep pastel fills. */
html,
body,
.app-shell,
.app-shell[data-workspace='platform'],
.app-shell:has(.sa-console),
.sa-console {
background: #ffffff !important;
}
.platform-canvas,
.sunrise-wash,
.sunrise-glow {
display: none !important;
background: none !important;
}
/* Association: keep the header above the cards and the dock off the last row. */
.mode-b-shell[data-mode-b='association'] > .workspace-header {
position: relative !important;
background: #f7f8fb !important;
z-index: 5;
}
.mode-b-shell[data-mode-b='association'] > main {
padding-top: 0.5rem !important;
padding-bottom: calc(8.5rem + env(safe-area-inset-bottom, 0px)) !important;
}
/* Association uses the platform content width. */
/* Workspace icon wells: tinted discs on white cards. */
.workspace-home .app-card:not(.app-card-action) .pict {
background: linear-gradient(165deg, #f4f8ff 0%, #dbe7ff 100%);
color: #1d4ed8;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(37, 99, 235, 0.12), 0 8px 16px rgba(37, 99, 235, 0.12);
}
.workspace-home .app-card[data-app=crm]:not(.app-card-action) .pict,
.workspace-home .app-card[data-app=association]:not(.app-card-action) .pict {
background: linear-gradient(165deg, #eef4ff 0%, #c5d9ff 100%);
color: #1d4ed8;
box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(37, 99, 235, 0.16), 0 8px 16px rgba(37, 99, 235, 0.14);
}
.workspace-home .app-card[data-app=avatar]:not(.app-card-action) .pict,
.workspace-home .app-card[data-app=lms]:not(.app-card-action) .pict {
background: linear-gradient(165deg, #f5f3ff 0%, #ddd6fe 100%);
color: #6d28d9;
box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(109, 40, 217, 0.16), 0 8px 16px rgba(109, 40, 217, 0.14);
}
.workspace-home .app-card[data-app=sites]:not(.app-card-action) .pict,
.workspace-home .app-card[data-app=workforce]:not(.app-card-action) .pict {
background: linear-gradient(165deg, #ecfdf5 0%, #a7f3d0 100%);
color: #047857;
box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(5, 150, 105, 0.16), 0 8px 16px rgba(5, 150, 105, 0.14);
}
.workspace-home .app-card[data-app=marketing]:not(.app-card-action) .pict,
.workspace-home .app-card[data-app=realestate]:not(.app-card-action) .pict {
background: linear-gradient(165deg, #fff7ed 0%, #fdba74 100%);
color: #c2410c;
box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(234, 88, 12, 0.16), 0 8px 16px rgba(234, 88, 12, 0.14);
}
.workspace-home .app-card[data-app=builder]:not(.app-card-action) .pict {
background: linear-gradient(165deg, #eef2ff 0%, #c7d2fe 100%);
color: #4338ca;
box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(67, 56, 202, 0.16), 0 8px 16px rgba(67, 56, 202, 0.14);
}
.workspace-home .app-card[data-app=events]:not(.app-card-action) .pict,
.workspace-home .app-card[data-app=catering]:not(.app-card-action) .pict {
background: linear-gradient(165deg, #fdf2f8 0%, #f9a8d4 100%);
color: #be185d;
box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(219, 39, 119, 0.16), 0 8px 16px rgba(219, 39, 119, 0.14);
}
.workspace-home .app-card[data-app=planner]:not(.app-card-action) .pict,
.workspace-home .app-card[data-app=freelance]:not(.app-card-action) .pict {
background: linear-gradient(165deg, #f0fdfa 0%, #99f6e4 100%);
color: #0f766e;
box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(13, 148, 136, 0.16), 0 8px 16px rgba(13, 148, 136, 0.14);
}
.workspace-home .app-card[data-app=projects]:not(.app-card-action) .pict {
background: linear-gradient(165deg, #f0f9ff 0%, #bae6fd 100%);
color: #0369a1;
box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(2, 132, 199, 0.16), 0 8px 16px rgba(2, 132, 199, 0.14);
}
.workspace-home .app-card[data-app=workflow]:not(.app-card-action) .pict,
.workspace-home .app-card[data-app=hostel]:not(.app-card-action) .pict {
background: linear-gradient(165deg, #fffbeb 0%, #fcd34d 100%);
color: #b45309;
box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(217, 119, 6, 0.16), 0 8px 16px rgba(217, 119, 6, 0.14);
}
.workspace-home .app-card[data-app=communication]:not(.app-card-action) .pict,
.workspace-home .app-card[data-app=messages]:not(.app-card-action) .pict {
background: linear-gradient(165deg, #fdf4ff 0%, #f0abfc 100%);
color: #a21caf;
box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(192, 38, 211, 0.16), 0 8px 16px rgba(192, 38, 211, 0.14);
}
.workspace-home .app-card[data-app=tasks]:not(.app-card-action) .pict {
background: linear-gradient(165deg, #f0fdf4 0%, #86efac 100%);
color: #15803d;
box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(22, 163, 74, 0.16), 0 8px 16px rgba(22, 163, 74, 0.14);
}
.workspace-home .app-card[data-app=calendar]:not(.app-card-action) .pict {
background: linear-gradient(165deg, #fff1f2 0%, #fda4af 100%);
color: #e11d48;
box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(244, 63, 94, 0.16), 0 8px 16px rgba(244, 63, 94, 0.14);
}
.workspace-home .app-card[data-app=analytics]:not(.app-card-action) .pict {
background: linear-gradient(165deg, #ecfeff 0%, #a5f3fc 100%);
color: #0e7490;
box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(6, 182, 212, 0.16), 0 8px 16px rgba(6, 182, 212, 0.14);
}
.appearance-logo-row {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.appearance-logo-preview {
width: 3.25rem;
height: 3.25rem;
object-fit: contain;
border-radius: 0.85rem;
background: #f4f7fb;
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}
.appearance-logo-pick,
.appearance-logo-clear {
border: 0;
border-radius: 999px;
min-height: 2.5rem;
padding: 0 0.95rem;
font-weight: 650;
cursor: pointer;
}
.appearance-logo-pick {
background: #0055ff;
color: #fff;
}
.appearance-logo-clear {
background: #eef2f7;
color: #334155;
}
.crm-top-menu {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
max-width: 100%;
margin: 0 0 0.65rem;
}
.crm-top-menu a {
display: inline-flex;
align-items: center;
border: 1px solid #e2e8f0;
background: #fff;
color: #334155;
border-radius: 999px;
padding: 0.35rem 0.75rem;
font-size: 0.82rem;
font-weight: 700;
text-decoration: none;
}
.crm-top-menu a.is-active {
background: #eff6ff;
border-color: #bfdbfe;
color: #1d4ed8;
}
/* CRM: scroll still works; the bar stays hidden. */
html:has([data-screen^="crm-"]),
html:has([data-screen^="crm-"]) body,
.app-shell:has([data-screen^="crm-"]) {
overflow-x: hidden !important;
scrollbar-width: none !important;
}
.app-shell:has([data-screen^="crm-"])::-webkit-scrollbar,
.app-shell:has([data-screen^="crm-"]) *::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
.app-shell:has([data-screen^="crm-"]) .crm-item-groups,
.app-shell:has([data-screen^="crm-"]) .crm-item-group,
.app-shell:has([data-screen^="crm-"]) .crm-leads-list,
.app-shell:has([data-screen^="crm-"]) .crm-act-page {
max-width: 100%;
overflow-x: hidden;
}
.context-slot-trigger { min-height: 44px; min-width: 44px; }
.context-slot-label, .context-slot-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70vw; }
.choice { min-height: 44px; }
.context-slot-filter { width: 100%; min-height: 44px; margin-bottom: 8px; }
.context-slot-status { margin: 8px 0 0; }
button.app-card { min-height: 44px; min-width: 44px; }
/* Launcher grids match Your Workspace: compact centered tiles, 3 columns on a wide screen. */
.launcher-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem;
width: 100%;
min-width: 0;
}
@media (min-width: 800px) {
.launcher-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.launcher-grid > .app-card:not(.app-card-action),
.launcher-grid > .icon-card,
.launcher-grid > button.icon-card {
position: relative;
align-items: center;
justify-content: center;
text-align: center;
min-height: 7.1rem;
min-width: 0;
padding: 1rem 0.4rem 1.05rem;
border: 0;
border-radius: 1.5rem;
background: #fff;
box-shadow: 0 10px 22px rgba(16, 32, 48, 0.055);
}
.launcher-grid > .app-card:not(.app-card-action) .pict,
.launcher-grid > .icon-card .pict,
.launcher-grid > button.icon-card .pict {
width: 3.25rem;
height: 3.25rem;
border-radius: 50%;
}
.launcher-grid > .app-card strong,
.launcher-grid > .icon-card strong,
.launcher-grid > button.icon-card strong {
font-size: 0.88rem;
font-weight: 700;
}
/* The drawn circle stays 2.45rem; the hit area grows to at least 44px. */
.header-round[aria-label='Back'] {
position: relative;
z-index: 1;
}
.header-round[aria-label='Back']::before {
content: '';
position: absolute;
inset: min(0px, calc((100% - 44px) / 2));
}
:root { --ui-canvas: #f7f8ff; --ui-surface: #fff; --ui-subtle: #eef1fc; --ui-text: #14234b; --ui-muted: #596888; --ui-border: #e5e9f5; }
html:not([data-color-mode="dark"]):has(.app-shell[data-ui-framework="tailwind-shadcn"]) {
--ui-canvas: #fff !important;
}
/* Display mode controls contrast; saved business branding still controls accents. */
html[data-color-mode="dark"]:has(.app-shell[data-ui-framework="tailwind-shadcn"]) {
--ui-canvas:#080e1b !important;
--ui-surface:#10182a !important;
--ui-text:#f1f4ff !important;
--ui-heading:#f1f4ff !important;
--ui-muted:#a5b2d0 !important;
}
html[data-color-mode="dark"] body .app-shell[data-ui-framework="tailwind-shadcn"],
html[data-color-mode="dark"] body .app-shell[data-ui-framework="tailwind-shadcn"] > main,
html[data-color-mode="dark"] body .app-shell[data-ui-framework="tailwind-shadcn"] .page-container {
background:var(--ui-canvas) !important;
color:var(--ui-text) !important;
}
.app-shell[data-ui-framework="tailwind-shadcn"] > .association-sticky-chrome {
position:sticky; top:0; z-index:40; flex-shrink:0;
width:min(900px,100%); margin-inline:auto; background:var(--ui-surface);
}
.app-shell[data-ui-framework="tailwind-shadcn"] .association-sticky-chrome .workspace-header { margin-block:0; }
.app-shell[data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation {
gap:0; padding:0 !important; border:0; border-bottom:1px solid var(--ui-border);
border-radius:0; background:var(--ui-surface); flex-wrap:nowrap !important;
}
.app-shell[data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item {
min-height:40px; flex:1 1 0; padding:8px 10px; gap:6px; border-radius:0;
border-bottom:2px solid transparent; font-size:13px; font-weight:500; white-space:nowrap;
}
.app-shell[data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item.active {
color:#2563eb !important; background:transparent !important; border-bottom-color:#2563eb; font-weight:600;
}
.app-shell[data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .mode-b-nav-icon { display:inline-flex; color:inherit; }
@media(max-width:640px) {
.app-shell[data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item { min-height:44px; padding:7px 4px; font-size:11px; gap:4px; }
}
html[data-theme="ocean"]:has(.app-shell[data-ui-framework="tailwind-shadcn"]) { --appearance-primary:#0f766e; }
html[data-theme="forest"]:has(.app-shell[data-ui-framework="tailwind-shadcn"]) { --appearance-primary:#15803d; }
html[data-theme="dusk"]:has(.app-shell[data-ui-framework="tailwind-shadcn"]) { --appearance-primary:#6d28d9; }
html[data-theme="slate"]:has(.app-shell[data-ui-framework="tailwind-shadcn"]) { --appearance-primary:#334155; }
.app-shell[data-ui-framework="tailwind-shadcn"] { padding-top:0 !important; }
.app-shell[data-ui-framework="tailwind-shadcn"] > .skip {
position:absolute;
z-index:60;
}
.app-shell[data-ui-framework="tailwind-shadcn"] .workspace-header.enterprise-header.unified-header {
margin-top:0 !important;
}
.app-shell[data-ui-framework="tailwind-shadcn"] > .mode-b-chrome {
margin-top:0 !important;
padding-top:0 !important;
}
/* Keep shared navigation visible while the workspace scrolls. */
.app-shell[data-ui-framework="tailwind-shadcn"] > .workspace-header.enterprise-header.unified-header {
position: sticky !important;
top: 0;
z-index: 40;
background: var(--ui-surface) !important;
}
/* Brand theme and palette remain independent of the personal display mode. */
html[data-color-mode="dark"] { --ui-canvas: #080e1b; --ui-surface: #10182a; --ui-subtle: #19243c; --ui-text: #f1f4ff; --ui-muted: #a5b2d0; --ui-border: #222d47; }
/* Frozen PageBuilder canvas receives no overrides from this stylesheet. */
body:not(:has([data-page-builder="true"])) { background: var(--ui-canvas); color: var(--ui-text); color-scheme: light; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) {
color-scheme: dark;
--color-background: var(--ui-canvas); --color-bg-main: var(--ui-canvas); --bg: var(--ui-canvas);
--card: var(--ui-surface); --color-surface: var(--ui-surface); --color-surface-light: var(--ui-surface);
--color-surface-container: var(--ui-subtle); --color-surface-container-low: var(--ui-subtle); --color-surface-variant: var(--ui-subtle);
--ink: var(--ui-text); --color-text: var(--ui-text); --color-text-heading: var(--ui-text); --color-on-surface: var(--ui-text); --color-on-background: var(--ui-text);
--muted: var(--ui-muted); --color-text-secondary: var(--ui-muted); --color-on-surface-variant: var(--ui-muted);
--line: var(--ui-border); --color-border: var(--ui-border); --color-outline-variant: var(--ui-border);
}
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.app-shell,.page-container,.sa-form,.sa-form-body) { background: var(--ui-canvas) !important; color: var(--ui-text) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.card,.stat-card,.metric-card,.app-card,.action-card,.insight-card,.platform-health,.platform-activity,.home-workspace,.crm-dash-section,.crm-dash-kpi,.crm-dash-hero-card,.sheet,.modal,.dialog,.dropdown-portal,.user-menu-panel,.bottom-sheet,.table-wrap,.record-card,.sa-form-head,.health-services li) { background: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; box-shadow: none !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(h1,h2,h3,h4,.metric-card-copy strong,.app-card strong,.crm-dash-kpi-value,.crm-dash-hero-card-value) { color: var(--ui-text) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.muted,.metric-card-label,.metric-card-hint,.sa-greeting-sub,.sa-redesign-eyebrow,.enterprise-workspace-label,.crm-dash-sub,.crm-dash-hero-card-label,.crm-dash-trend,.crm-dash-kpi-label) { color: var(--ui-muted) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(input,select,textarea,th,td) { background-color: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) input::placeholder, html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) textarea::placeholder { color: var(--ui-muted); }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.bottom-nav,.mode-b-nav,.crm-section-menu,.health-row,.pict) { background: var(--ui-subtle) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) .platform-canvas { display: none; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.workspace-home,.sa-hero,.home-greeting,.sa-greeting,.sa-metrics,.home-metrics,.home-metrics-grid,.sa-greeting-copy) { background: transparent !important; color: var(--ui-text) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.panel,.list-card,.detail-card,.form-card,.toolbar,.search-box,.filter-bar,.empty-state,.loading-state,.notification-panel,.switch-profile,.switch-profile-head,.switch-profile-footer,.switch-profile-item) { background: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
.app-shell .enterprise-header.enterprise-header { background: var(--ui-surface) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.switch-profile-row,.switch-profile-search,.switch-profile-head,.switch-profile-foot,.sheet-head,.sheet-body) { background: var(--ui-surface) !important; border-color: var(--ui-border) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.switch-profile-who strong,.switch-profile-copy strong,.switch-profile-action,.switch-profile-section,.sheet-head h2,.dropdown-portal strong) { color: var(--ui-text) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.switch-profile-who span,.switch-profile-copy em,.switch-profile-copy span) { color: var(--ui-muted) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) .switch-profile-row[aria-current] { background: var(--ui-subtle) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) .switch-profile-logout { color: #ff9a9a !important; }
html[data-color-mode="dark"] .enterprise-header .workspace-brand img { background: #fff; padding: 4px; border-radius: 4px; }
/* Compatibility layer for existing module surfaces until their visual migration. */
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is([class$="-card"],[class$="-panel"],[class$="-toolbar"],[class$="-table"],[class$="-dialog"],[class$="-modal"],[class$="-filters"],[class$="-form"],[class$="-list"]):not(.overlay) { background-color: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(label,legend,caption,dt,dd,th,td,.field-label,.form-label,.record-title,.record-name,.section-title,.sheet-title,.dialog-title) { color: var(--ui-text) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.secondary-btn,.outline-btn,.icon-btn,.icon-ghost,.nav-item,.tab,.tabs button,.tabs a) { background-color: var(--ui-subtle); color: var(--ui-text); border-color: var(--ui-border); }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.error,.field-error,.validation-error) { color: #ffabab; }
html[data-color-mode="dark"] .enterprise-header .workspace-brand img { mix-blend-mode: normal !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) { --color-link: #91b9ff; --brand-ink: #91b9ff; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.sa-section-link,.crm-dash-view-all,.switch-profile-all,.text-link) { color: #91b9ff !important; }
/* Reference palette shared by the application shell, excluding frozen editors. */
body:has(.app-shell[data-ui-framework="tailwind-shadcn"]):not(:has([data-page-builder="true"])) {
--color-primary:var(--appearance-primary,#4264ff); --color-on-primary:var(--appearance-on-primary,#fff);
--color-background:var(--ui-canvas); --color-bg-main:var(--ui-canvas); --bg:var(--ui-canvas);
--card:var(--ui-surface); --color-surface:var(--ui-surface); --color-surface-light:var(--ui-surface);
--color-text:var(--ui-text); --color-text-heading:var(--ui-heading,var(--ui-text)); --ink:var(--ui-text);
--color-text-secondary:var(--ui-muted); --muted:var(--ui-muted);
--color-border:var(--ui-border); --line:var(--ui-border);
}
/* Reference list appearance, shared by workspace records; frozen editors excluded. */
.data-list-more { position:relative; }
.data-list-more summary { list-style:none; display:grid; place-items:center; cursor:pointer; }
.data-list-more summary::-webkit-details-marker { display:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .data-list-more[open] > button { position:absolute; right:0; top:34px; z-index:10; width:auto; height:auto; min-height:44px; padding:10px; border-radius:5px; display:flex; gap:8px; white-space:nowrap; background:var(--ui-surface); }
.assoc-md-heading-icon { color:#3487ff; display:inline-flex; }
.app-shell[data-ui-framework="tailwind-shadcn"] .sa-form:has(.assoc-md-shell) > .sa-form-head { display:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-top { display:flex; align-items:center; gap:10px; padding-bottom:12px; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-titles { flex:1; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-titles h2 { font-size:18px; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-titles p { display:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-chips button span { font-size:10px; padding:2px 5px; border-radius:10px; background:var(--ui-subtle); }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-acts { display:flex; gap:5px; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-act { width:28px; height:28px; border:1px solid var(--ui-border); border-radius:50%; background:var(--ui-surface); color:var(--ui-muted); }
.app-shell[data-ui-framework="tailwind-shadcn"] :is(.sa-form-list,.workspace-page):has(table.responsive-records) {
font-family: var(--font-family-body);
color: var(--ui-text);
}
.app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records {
width:100%; border-collapse:separate; border-spacing:0; background:var(--ui-surface);
border:1px solid var(--ui-border); border-radius:6px; font-size:13px; overflow:hidden;
}
.app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records th {
background:var(--ui-canvas); color:var(--ui-muted); font-size:10px;
font-weight:600; text-transform:uppercase; letter-spacing:.04em; text-align:left;
padding:10px 12px; border:0; border-bottom:1px solid var(--ui-border);
}
.app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records td {
padding:12px; border:0; border-bottom:1px solid var(--ui-border); vertical-align:middle;
background:transparent; color:var(--ui-text); overflow-wrap:anywhere;
}
.app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records tbody tr:last-child td { border-bottom:0; }
.app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records tbody tr:hover { background:var(--ui-subtle); }
.app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records tr:has(input[type="checkbox"]:checked) { background:var(--ui-subtle); }
.app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records a { color:var(--color-primary); text-decoration:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records input[type="checkbox"] { accent-color:var(--color-primary); width:16px; height:16px; }
@media(max-width:767px) {
.app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records { border:0; background:transparent; overflow:visible; }
.app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records tr { padding:12px; border:1px solid var(--ui-border); border-radius:6px; margin-bottom:10px; background:var(--ui-surface); }
.app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records td { padding:5px 0; border:0; }
}
/* Existing record cards retain their data and actions in the same quiet visual system. */
.app-shell[data-ui-framework="tailwind-shadcn"] .sa-form-list {
border:0; padding:16px 0; border-radius:0; background:var(--ui-surface); box-shadow:none;
}
.app-shell[data-ui-framework="tailwind-shadcn"] .sa-form-list .sa-form-head {
border:0; padding:0 0 16px; background:transparent; box-shadow:none;
}
.app-shell[data-ui-framework="tailwind-shadcn"] .sa-form-list :is([class$="-search"],[class$="-toolbar"],[class$="-filters"]) {
display:flex; align-items:center; flex-wrap:wrap; gap:8px; background:transparent; box-shadow:none;
}
.app-shell[data-ui-framework="tailwind-shadcn"] .sa-form-list :is([class$="-list"],[class$="-grid"]) {
list-style:none; padding:0; gap:10px;
}
.app-shell[data-ui-framework="tailwind-shadcn"] .sa-form-list :is([class$="-list"],[class$="-grid"]) > li {
min-width:0; background:var(--ui-surface); border-radius:6px; box-shadow:none;
}
.app-shell[data-ui-framework="tailwind-shadcn"] .sa-form-list :is([class$="-list"],[class$="-grid"]) > li > article {
border:1px solid var(--ui-border); border-radius:6px; background:var(--ui-surface); color:var(--ui-text); box-shadow:none; padding:14px;
}
.app-shell[data-ui-framework="tailwind-shadcn"] .sa-form-list :is([class$="-page"],[class$="-pagination"]) {
display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
border-top:1px solid var(--ui-border); color:var(--ui-muted); font-size:12px; padding-top:12px;
}
.app-shell[data-ui-framework="tailwind-shadcn"] :is(.record-row,.list-row,.assoc-im-card,.assoc-md-card) {
border:1px solid var(--ui-border); border-radius:6px; background:var(--ui-surface); box-shadow:none;
color:var(--ui-text); padding:14px; min-width:0;
}
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-shell { background:var(--ui-surface); padding:0; border:0; box-shadow:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-metrics { display:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-top { background:transparent; padding:0 0 16px; border:0; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-titles h2 { font-size:24px; font-weight:700; margin:0; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-titles p { font-size:13px; color:var(--ui-muted); margin:4px 0 0; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-add { display:inline-flex; align-items:center; gap:6px; width:auto; min-height:40px; padding:8px 12px; border-radius:5px; background:var(--color-primary); color:var(--color-on-primary); font-size:12px; text-decoration:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-tool { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; width:auto; }
.app-shell[data-ui-framework="tailwind-shadcn"] :is(.assoc-md-tool,.assoc-md-search) { min-height:40px; border:1px solid var(--ui-border); border-radius:5px; background:var(--ui-surface); color:var(--ui-muted); box-shadow:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-search { flex:1; min-width:180px; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-tool[data-on="yes"] { border-color:var(--color-primary); background:var(--ui-subtle); color:var(--color-primary); }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-chips { border-bottom:1px solid var(--ui-border); display:flex; gap:14px; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-chips button { border:0; border-radius:0; background:transparent; padding:12px 4px; font-size:12px; color:var(--ui-muted); }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-chips button[data-on="yes"] { color:var(--color-primary); border-bottom:2px solid var(--color-primary); }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0; list-style:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-card { display:flex; flex-wrap:wrap; align-items:center; gap:10px; height:100%; box-sizing:border-box; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-card-body { flex:1; min-width:0; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-card-body a { font-size:13px; font-weight:600; color:var(--ui-text); }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-avatar { width:36px; height:36px; font-size:12px; background:var(--ui-subtle); color:var(--color-primary); box-shadow:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-status { border-radius:999px; padding:3px 8px; font-size:10px; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-page { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; border-top:1px solid var(--ui-border); padding-top:12px; }
.record-selection { display:flex; align-items:center; gap:14px; padding:10px 12px; margin:10px 0; border:1px solid var(--ui-border); border-radius:5px; background:var(--ui-subtle); font-size:12px; }
.record-selection button { border:0; background:transparent; color:var(--color-primary); cursor:pointer; }
.record-select { accent-color:var(--color-primary); width:16px; height:16px; }
.assoc-md-card[data-selected="true"] { outline:1px solid var(--color-primary); }
.record-card-detail { flex-basis:100%; margin:0; padding-top:8px; border-top:1px solid var(--ui-border); font-size:11px; color:var(--ui-muted); }
@media(max-width:767px) {
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-table-wrap { display:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-shell[data-view] .assoc-md-cards { display:grid; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-top { gap:8px; flex-wrap:wrap; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-titles { flex:1; min-width:0; }
}
@media(min-width:768px) {
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-shell[data-view="table"] .assoc-md-cards { display:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-shell[data-view="cards"] .assoc-md-table-wrap { display:none; }
}
@media(min-width:520px) and (max-width:767px) { .app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:519px) { .app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-cards { grid-template-columns:minmax(0,1fr); } }
/* Common workspace presentation. Only the Mode A shell opts in; frozen editors,
public sites and standalone module shells receive none of these overrides.
Important component-layer declarations bridge inherited module/utility CSS. */
@layer components {
:where(.app-shell,.overlay)[data-design-system="common"] {
--ui-radius-card: 12px;
--ui-radius-control: 10px;
--ui-space-section: 20px;
--ui-accent: var(--color-primary, #4264ff);
--ui-accent-soft: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface));
color: var(--ui-text);
font-family: var(--font-family-body, ui-sans-serif, system-ui, sans-serif);
}
html[data-color-mode="dark"] :where(.app-shell,.overlay)[data-design-system="common"] {
--ui-accent: color-mix(in srgb, var(--color-primary, #4264ff) 65%, white);
}
html[data-color-mode="dark"] .app-shell[data-design-system="common"] .workspace-header .logo-img {
background: #fff !important; border-radius: 6px; padding: 4px; mix-blend-mode: normal !important;
}
.app-shell[data-design-system="common"] .page-container {
padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
min-width: 0;
}
.app-shell[data-design-system="common"] .sa-form {
box-sizing: border-box; width: 100%; min-width: 0;
padding: 12px 0 24px !important; gap: var(--ui-space-section) !important;
border: 0 !important; background: transparent !important; box-shadow: none !important;
}
.app-shell[data-design-system="common"] .sa-form > .sa-form-head {
display: flex; flex-wrap: wrap !important; align-items: center !important;
gap: 12px !important; min-height: 48px; padding: 0 !important; margin: 0 !important;
border: 0 !important; background: transparent !important;
}
.app-shell[data-design-system="common"] .sa-form-titles {
flex: 1 1 160px !important; min-width: min(160px,100%) !important;
}
.app-shell[data-design-system="common"] .sa-form-titles h1 {
margin: 0 !important; font-size: 26px !important; font-weight: 650 !important;
line-height: 1.25 !important; letter-spacing: -.6px; color: var(--ui-text) !important;
overflow-wrap: anywhere;
}
.app-shell[data-design-system="common"] .sa-form-titles p {
margin: 6px 0 0 !important; font-size: 14px !important; line-height: 1.5;
color: var(--ui-muted) !important;
}
.app-shell[data-design-system="common"] .sa-form-pict {
width: 40px !important; height: 40px !important; flex: 0 0 40px;
border-radius: 10px !important; box-shadow: none !important;
background: var(--ui-accent-soft) !important; color: var(--ui-accent) !important;
}
.app-shell[data-design-system="common"] .header-back-cluster {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0;
color: var(--ui-muted); font-size: 13px;
}
.app-shell[data-design-system="common"] .sa-form > .sa-form-body {
box-sizing: border-box; width: 100% !important; min-width: 0;
padding: 0 !important; margin: 0 !important; gap: var(--ui-space-section) !important;
border: 0 !important; background: transparent !important; box-shadow: none !important;
}
/* Shared components plus explicit adapters for established module surfaces.
Do not use suffix selectors: they would capture charts and editor widgets. */
.app-shell[data-design-system="common"] :is(
.ui-card,.card,.action-card,.stat-card,.metric-card,.insight-card,.record-card,.form-card,.panel,
.proj-dash-card,.proj-dash-board,.mkt-hero,.marketing-channel,.marketing-pack-drawer,
.hostel-kpi,.hostel-panel,.realestate-kpi,.realestate-dash-panel,
.cat-home-kpi,.cat-home-block,.assoc-md-card,.more-admin-card,
.cx-screen-card,.cx-home-card,.rec-panel,.rec-job-card
) {
border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-card) !important;
background: var(--ui-surface) !important; color: var(--ui-text) !important;
box-shadow: none !important; min-width: 0; box-sizing: border-box;
}
.app-shell[data-design-system="common"] :is(.metric-card,.stat-card,.proj-dash-card,.hostel-kpi,.realestate-kpi,.cat-home-kpi) {
padding: 20px !important;
}
.app-shell[data-design-system="common"] :is(.metric-card-copy strong,.proj-dash-card strong,.hostel-kpi strong,.realestate-kpi strong,.cat-home-kpi strong) {
color: var(--ui-text) !important; font-variant-numeric: tabular-nums;
}
.app-shell[data-design-system="common"] .mkt-steps > li {
border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-card) !important;
background: var(--ui-surface) !important; color: var(--ui-text) !important; box-shadow: none !important;
}
.app-shell[data-design-system="common"] .mkt-steps {
background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important;
}
.app-shell[data-design-system="common"] :is(.mkt-hero p,.proj-dash-head p,.proj-dash-card em) { color: var(--ui-muted) !important; }
.app-shell[data-design-system="common"] .mkt-hero-actions > a {
display: inline-flex; align-items: center; min-height: 44px !important; padding: 8px 12px !important;
border-radius: var(--ui-radius-control) !important; box-sizing: border-box;
background: var(--ui-accent-soft) !important; color: var(--ui-accent) !important; border: 1px solid var(--ui-border) !important;
}
.app-shell[data-design-system="common"] :is(.app-card,.icon-card) {
border-radius: var(--ui-radius-card) !important; padding: 20px 16px !important;
min-width: 0; height: auto !important; min-height: 112px;
text-decoration: none; transition: border-color 150ms ease, background-color 150ms ease;
}
.app-shell[data-design-system="common"] :is(.app-card,.icon-card):is(a,button):hover {
border-color: var(--ui-accent) !important; background: var(--ui-accent-soft) !important;
}
.app-shell[data-design-system="common"] :is(.app-card,.icon-card) strong { font-size: 14px !important; line-height: 1.4; color: var(--ui-text) !important; }
.app-shell[data-design-system="common"] :is(.app-card,.icon-card) em { color: var(--ui-muted) !important; font-size: 12px !important; }
.app-shell[data-design-system="common"] .launcher-grid {
display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important;
gap: 12px !important;
}
.app-shell[data-design-system="common"] .more-admin-copy strong { color: var(--ui-text) !important; }
.app-shell[data-design-system="common"] :is(.app-card,.icon-card,.metric-card) > .pict {
width: 40px !important; height: 40px !important; border-radius: 10px !important;
background: var(--ui-accent-soft) !important; color: var(--ui-accent) !important; box-shadow: none !important;
}
.app-shell[data-design-system="common"] :is([data-slot="button"],.primary-btn,.secondary-btn,.outline-btn,.text-btn) {
min-height: 44px !important; border-radius: var(--ui-radius-control) !important;
box-shadow: none !important; line-height: 1.4; white-space: normal;
}
.app-shell[data-design-system="common"] :is(.icon-btn,.icon-ghost,.assoc-md-act,.spc-picto) {
min-width: 44px !important; min-height: 44px !important; box-shadow: none !important;
}
/* Text actions keep one predictable width, including in flex/grid forms.
Icon controls and navigation retain their own sizing. */
:where(.app-shell,.overlay)[data-design-system="common"] :is(
[data-slot="button"]:not([data-size="icon"]),
.primary-btn,.secondary-btn,.outline-btn,.text-btn,.crm-leads-btn
):not(.icon-btn,.icon-ghost,.assoc-md-act,.spc-picto,[data-size="icon"]) {
box-sizing: border-box !important;
display: inline-flex !important;
width: 200px !important;
min-width: 0 !important;
max-width: 100% !important;
flex: 0 0 auto !important;
justify-self: start !important;
align-items: center;
justify-content: center;
white-space: normal !important;
overflow-wrap: anywhere;
}
.app-shell[data-design-system="common"] :is(.crm-leads-btn,.crm-leads-icon-btn,.crm-leads-search-toggle) {
min-width: 44px !important; min-height: 44px !important; border-radius: var(--ui-radius-control) !important;
box-shadow: none !important;
}
.app-shell[data-design-system="common"] .crm-leads-btn.primary { background: var(--color-primary) !important; color: var(--color-on-primary) !important; }
.app-shell[data-design-system="common"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),select,textarea) {
min-width: 0; max-width: 100%; border-radius: var(--ui-radius-control) !important;
min-height: 44px !important; font-size: 14px;
}
.app-shell[data-design-system="common"] :is(button,a,input,select,textarea,summary):focus-visible {
outline: 2px solid var(--ui-accent) !important; outline-offset: 3px;
}
.app-shell[data-design-system="common"] :is(.common-module-navigation,.module-navigation) {
display: flex !important; flex-wrap: nowrap !important; gap: 4px !important;
padding: 4px !important; border: 1px solid var(--ui-border) !important;
border-radius: var(--ui-radius-card) !important; background: var(--ui-surface) !important;
width: 100% !important; box-sizing: border-box;
}
.app-shell[data-design-system="common"] :is(.common-module-navigation,.module-navigation) > a {
flex: 1 1 0 !important; min-width: 0; min-height: 44px !important;
border: 0 !important; border-radius: 8px !important; font-weight: 500;
color: var(--ui-muted) !important; text-decoration: none;
}
.app-shell[data-design-system="common"] :is(.common-module-navigation,.module-navigation) > a:is([aria-current="page"],.active,.is-active) {
color: var(--ui-accent) !important; background: var(--ui-accent-soft) !important; font-weight: 650;
}
/* Existing contextual destinations are retained; specialist RE menu is untouched. */
.app-shell[data-design-system="common"] :is(.comm-chip,.rec-tabs > a) {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px !important; padding: 8px 12px !important; border-radius: 8px !important;
border: 0 !important; background: transparent !important; color: var(--ui-muted) !important;
box-shadow: none !important; font-size: 13px !important; text-decoration: none;
}
.app-shell[data-design-system="common"] :is(.comm-chip.is-on,.rec-tabs > a[aria-current="page"]) {
background: var(--ui-accent-soft) !important; color: var(--ui-accent) !important;
}
.app-shell[data-design-system="common"] :is(.comm-chrome,.hostel-chips,.rec-tabs) { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.app-shell[data-design-system="common"] .bottom-nav {
background: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important;
box-shadow: none !important;
}
.app-shell[data-design-system="common"] .bottom-nav .nav-item { min-height: 48px; border-radius: 10px !important; color: var(--ui-muted) !important; }
.app-shell[data-design-system="common"] .bottom-nav .nav-item.active { color: var(--ui-accent) !important; background: var(--ui-accent-soft) !important; }
.app-shell[data-design-system="common"] :is(.record-list,.data-list) { padding: 0 !important; list-style: none; gap: 10px !important; }
.app-shell[data-design-system="common"] :is(.record-list,.data-list) > li {
border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-card) !important;
background: var(--ui-surface) !important; color: var(--ui-text) !important; padding: 12px !important; min-width: 0;
}
.app-shell[data-design-system="common"] :is(.record-list,.data-list) > li > a { min-width: 0; overflow-wrap: anywhere; }
.app-shell[data-design-system="common"] table.responsive-records { border-radius: var(--ui-radius-card) !important; }
.app-shell[data-design-system="common"] :is(.empty-state,.error-state) {
border-radius: var(--ui-radius-card) !important; color: var(--ui-text) !important;
background: var(--ui-surface) !important; border: 1px solid var(--ui-border); padding: 24px;
}
.app-shell[data-design-system="common"] :is(.assoc-md-card,.assoc-md-toolbar) { gap: 12px; }
.app-shell[data-design-system="common"] :is(.proj-dash-head,.cat-list-head) { gap: 12px; flex-wrap: wrap; }
.app-shell[data-design-system="common"] :is(.proj-dash-head h1,.cat-list-head h1) { color: var(--ui-text); font-size: 26px; letter-spacing: -.6px; }
.app-shell[data-design-system="common"] :is(.proj-dash-row,.proj-draft-row,.cat-home-event-row) { border-color: var(--ui-border) !important; color: var(--ui-text) !important; }
.overlay[data-design-system="common"] > :is(.sheet,.modal) {
border: 1px solid var(--ui-border) !important; border-radius: 16px !important;
background: var(--ui-surface) !important; color: var(--ui-text) !important;
max-width: calc(100vw - 32px) !important; max-height: calc(100dvh - 32px) !important;
overflow-y: auto; box-sizing: border-box;
}
.overlay[data-design-system="common"] > .modal { max-width: min(512px,calc(100vw - 32px)) !important; }
.overlay[data-design-system="common"] :is(.sheet-head,.modal-head) {
display: flex !important; align-items: center; flex-wrap: wrap; gap: 12px;
}
.overlay[data-design-system="common"] .sheet-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; }
.overlay[data-design-system="common"] .sheet-head > button { min-width: 44px; min-height: 44px; }
@media (max-width: 767px) {
.app-shell[data-design-system="common"] .sa-form-titles h1 { font-size: 24px !important; }
.app-shell[data-design-system="common"] :is(.common-module-navigation,.module-navigation) > a {
flex-direction: column !important; gap: 4px !important; padding: 8px 2px !important;
font-size: 11px !important; line-height: 1.4; text-align: center; overflow-wrap: anywhere;
}
.app-shell[data-design-system="common"] :is(.stats-grid,.metrics-grid,.kpi-grid,.home-metrics-grid,.proj-dash-cards,.hostel-kpis,.realestate-kpis,.cat-home-kpis,.cx-demo-metrics,.cx-bill-metrics) {
display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important;
gap: 12px !important; min-width: 0;
}
.app-shell[data-design-system="common"] :is(.metric-card,.stat-card,.proj-dash-card,.hostel-kpi,.realestate-kpi,.cat-home-kpi) { padding: 16px !important; }
.app-shell[data-design-system="common"] :is(.proj-dash-board,.mkt-hero,.hostel-panel,.realestate-dash-panel,.cat-home-block) { padding: 16px !important; }
.app-shell[data-design-system="common"] .header-back-cluster { flex-basis: 100%; }
.app-shell[data-design-system="common"] :is(.proj-dash-row-main,.record-list strong,.data-list strong) { overflow-wrap: anywhere; min-width: 0; }
.app-shell[data-design-system="common"] :is([data-slot="input"]:not([type="checkbox"]):not([type="radio"]),[data-slot="textarea"],select),
.overlay[data-design-system="common"] :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { font-size: 16px !important; }
}
@media (max-width: 359px) {
.app-shell[data-design-system="common"] .realestate-kpis { grid-template-columns: minmax(0,1fr) !important; }
}
@media (min-width: 768px) {
.app-shell[data-design-system="common"] .launcher-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
}
@media (prefers-reduced-motion: reduce) {
.app-shell[data-design-system="common"] :is(.app-card,.icon-card) { transition: none; }
}
}