/* crm.css — Customers (CRM) and Smart Lists. Served as a real file, not embedded in a Python string. */ .crm-bar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap} .crm-bar input[type=text],.crm-bar input:not([type]){flex:1;min-width:220px; padding:9px 12px;border:1px solid var(--nt-line);border-radius:9px;font-size:14px} .crm-count{color:var(--nt-ink-2);font-size:13px;white-space:nowrap} .crm-tbl{width:100%;border-collapse:collapse;font-size:13.5px} .crm-tbl th{text-align:left;color:var(--nt-ink-2);font-weight:600;font-size:12px; padding:8px 10px;border-bottom:1px solid var(--nt-line);white-space:nowrap} .crm-tbl td{border-bottom:1px solid var(--nt-line);vertical-align:top} .crm-tbl tbody tr:last-child td{border-bottom:none} .crm-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .crm-name{font-weight:600;color:var(--nt-ink)} .crm-row{cursor:pointer} .crm-row:hover{background:var(--nt-raised)} .crm-pill{display:inline-block;padding:2px 9px;border-radius:999px; background:var(--nt-bg);color:var(--nt-ink);font-size:11.5px;font-weight:600} .crm-pill.good{background:color-mix(in oklab, var(--nt-paid) 12%, var(--nt-surface));color:var(--nt-paid-text)} .crm-note{padding:14px;color:var(--nt-ink-2);font-size:13.5px;background:var(--nt-surface); border-radius:9px} .crm-note.bad{background:color-mix(in oklab, var(--nt-failed) 12%, var(--nt-surface));color:var(--nt-failed-text)} .crm-note.good{background:color-mix(in oklab, var(--nt-paid) 12%, var(--nt-surface));color:var(--nt-paid-text)} /* SIDE PANELS — never a centred pop-up. Every create/edit/detail surface in the owner dashboard slides in from the RIGHT (Nihat, 2026-07-30). A centred dialog hides the list you were reading; a side panel keeps it in view, which is what makes "edit one, glance at the others" work. Both the customer detail and the generic CRUD drawer share these rules so they cannot drift apart. */ .crm-modal,.crm-drawer-wrap{position:fixed;inset:0;z-index:60;display:none} .crm-modal{display:none} .crm-modal.on,.crm-drawer-wrap.on{display:block} .crm-modal::before,.crm-drawer-scrim{content:'';position:absolute;inset:0; background:rgba(17,24,39,.35)} .crm-drawer-scrim{cursor:pointer} .crm-sheet,.crm-drawer{position:absolute;top:0;right:0;bottom:0; width:min(720px,94vw);background:var(--nt-surface);display:flex;flex-direction:column; box-shadow:var(--nt-sh-3); animation:crmSlide .18s ease-out} @keyframes crmSlide{from{transform:translateX(24px);opacity:.4} to{transform:translateX(0);opacity:1}} .crm-drawer{width:min(560px,94vw)} .crm-sheet-top,.crm-drawer-top{display:flex;align-items:center; justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--nt-line); flex:0 0 auto} .crm-sheet-top b,.crm-drawer-top b{font-size:18px;font-weight:700} .crm-drawer-top{justify-content:flex-start;gap:8px} .crm-drawer-top b{flex:1 1 auto} .crm-back{border:none;background:transparent;border-radius:8px;font-size:24px;line-height:1; color:var(--nt-ink-2);cursor:pointer;min-width:44px;min-height:44px;padding:0} .crm-back:hover,.crm-back:focus{background:var(--nt-surface-2);color:var(--nt-ink)} .crm-x{border:none;background:transparent;font-size:22px;line-height:1; color:var(--nt-ink-2);cursor:pointer;padding:0 4px} .crm-x:hover{color:var(--nt-ink)} .crm-tabs{display:flex;gap:2px;padding:0 20px;border-bottom:1px solid var(--nt-line); overflow-x:auto;flex:0 0 auto} .crm-tab{padding:11px 14px;font-size:13.5px;color:var(--nt-ink-2);cursor:pointer; border-bottom:2px solid transparent;white-space:nowrap} .crm-tab.on{color:var(--nt-action-text);border-bottom-color:color-mix(in oklab, var(--nt-action) 45%, var(--nt-surface));font-weight:600} .crm-sheet-body,.crm-drawer-body{padding:18px 20px;overflow-y:auto;flex:1 1 auto} .crm-pane-head{display:flex;align-items:center;justify-content:space-between; gap:12px;margin-bottom:14px} .crm-pane-title{font-size:15px;font-weight:700;color:var(--nt-ink)} .crm-address-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;margin-top:14px} .crm-address-field{display:flex;flex-direction:column;gap:5px;min-width:0; color:var(--nt-ink-2);font-size:12.5px} .crm-address-input{width:100%;min-width:0;padding:10px 11px;border:1px solid var(--nt-line); border-radius:9px;background:var(--nt-surface);color:var(--nt-ink);font:inherit;font-size:16px} .crm-address-input:focus{outline:2px solid color-mix(in oklab,var(--nt-action) 24%,transparent); border-color:var(--nt-action)} .crm-address-input.bad{border-color:var(--nt-failed);outline-color:var(--nt-failed)} .crm-address-phone{grid-column:1/-1;display:grid; grid-template-columns:minmax(150px,.8fr) minmax(0,1.2fr);gap:10px} .crm-drawer-foot{display:flex;align-items:center;gap:12px;padding:14px 20px; border-top:1px solid var(--nt-line);flex:0 0 auto;background:var(--nt-surface)} .crm-drawer-msg{flex:1;font-size:12.5px;color:var(--nt-paid-text)} .crm-drawer-msg.bad{color:var(--nt-failed-text)} .crm-primary{min-height:44px;padding:10px 20px;border:none;border-radius:8px; background:var(--nt-action);color:#fff;font-size:13.5px;font-weight:600; cursor:pointer;box-shadow:var(--nt-sh-1)} .crm-primary:disabled{opacity:.55;cursor:wait} .crm-ghost{min-height:44px;padding:10px 18px;border:1px solid var(--nt-line);border-radius:8px; background:var(--nt-surface);font-size:13.5px;cursor:pointer;color:var(--nt-ink)} .crm-ghost:hover{background:var(--nt-raised)} .crm-danger{min-height:44px;padding:9px 16px;border:1px solid var(--nt-line);border-radius:8px; background:var(--nt-surface);color:var(--nt-failed-text);font-size:13px;cursor:pointer} .crm-danger:hover{background:color-mix(in oklab, var(--nt-failed) 12%, var(--nt-surface))} @media(max-width:560px){ .crm-pane-head{align-items:stretch} .crm-pane-head .n-btn{flex:0 0 auto} .crm-address-form{grid-template-columns:minmax(0,1fr)} .crm-address-phone{grid-column:auto;grid-template-columns:minmax(112px,.75fr) minmax(0,1.25fr)} } .crm-d-name{width:100%;border:1px solid var(--nt-line);border-radius:9px; padding:11px 13px;font-size:14px;margin-bottom:14px} .crm-d-live{border:1px solid var(--nt-line);border-radius:10px;padding:14px; text-align:center;background:var(--nt-surface);margin-bottom:14px} .crm-d-live-n{font-size:30px;font-weight:700;color:var(--nt-ink);line-height:1} .crm-d-live-l{font-size:12.5px;color:var(--nt-ink-2);margin-top:4px} .crm-points{border:1px solid var(--nt-line);border-radius:12px;padding:16px; margin-bottom:16px;text-align:center;background:var(--nt-surface)} .crm-points-h{font-weight:700;margin-bottom:10px} .crm-points-row{display:flex;justify-content:center;gap:48px} .crm-points-v{font-size:26px;font-weight:700;color:var(--nt-ink)} .crm-points-l{font-size:12px;color:var(--nt-ink-2)} .crm-box{border:1px solid var(--nt-line);border-radius:12px;padding:6px 16px} .crm-kv{display:flex;padding:9px 0;border-bottom:1px solid var(--nt-line);font-size:13.5px} .crm-kv:last-child{border-bottom:none} .crm-k{width:150px;color:var(--nt-ink-2);flex:none} .crm-v{color:var(--nt-ink);word-break:break-word} /* page header, tabs across the top of a list page, pagination, sorting */ .crm-head{display:flex;align-items:flex-start;justify-content:space-between; gap:16px;margin-bottom:14px} .crm-head-actions{display:flex;align-items:center;justify-content:flex-end; gap:8px;flex-wrap:wrap} .crm-import-help{margin:0 0 9px;color:var(--nt-ink-2);font-size:13.5px; line-height:1.45} .crm-import-sample{padding:10px 12px;margin-bottom:8px;border:1px solid var(--nt-line); border-radius:9px;background:var(--nt-raised);color:var(--nt-ink);font:600 13px monospace; user-select:all} .crm-import-paste{display:block;width:100%;min-height:260px;resize:vertical; padding:12px;border:1px solid var(--nt-line);border-radius:9px;background:var(--nt-surface); color:var(--nt-ink);font:14px/1.45 monospace} .crm-import-paste:focus{outline:2px solid color-mix(in oklab,var(--nt-action) 24%,transparent); border-color:var(--nt-action)} .crm-import-counts{padding:11px 12px;margin-bottom:12px;border-radius:9px; background:var(--nt-raised);color:var(--nt-ink);font-size:13px;font-weight:600} .crm-import-recheck{margin-bottom:12px} .crm-import-list{display:flex;flex-direction:column;gap:9px} .crm-import-row{padding:11px 12px;border:1px solid var(--nt-line);border-radius:10px; background:var(--nt-surface)} .crm-import-row.bad{border-color:color-mix(in oklab,var(--nt-failed) 35%,var(--nt-line))} .crm-import-row-top{display:flex;align-items:center;justify-content:space-between; gap:10px;margin-bottom:6px} .crm-import-line{color:var(--nt-ink-2);font-size:11.5px} .crm-import-mobile{color:var(--nt-ink);font-size:14px;font-weight:700; font-variant-numeric:tabular-nums} .crm-import-person{margin-top:2px;color:var(--nt-ink);font-size:13.5px} .crm-import-email{margin-top:2px;color:var(--nt-ink-2);font-size:12.5px; overflow-wrap:anywhere} .crm-import-reason{margin-bottom:9px;color:var(--nt-failed-text);font-size:12.5px; font-weight:600} .crm-import-edit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} .crm-import-progress-title{margin:8px 0 14px;text-align:center;color:var(--nt-ink); font-size:18px;font-weight:700} .crm-import-progress{display:block;width:100%;height:16px;accent-color:var(--nt-action)} .crm-import-progress-copy{margin:8px 0 16px;text-align:center;color:var(--nt-ink-2); font-size:13px} .crm-import-errors{display:flex;flex-direction:column;gap:5px;margin-top:12px} .crm-import-error{padding:8px 10px;border-radius:8px; background:color-mix(in oklab,var(--nt-failed) 12%,var(--nt-surface)); color:var(--nt-failed-text);font-size:12.5px;overflow-wrap:anywhere} .crm-import-again{margin-top:14px} .crm-new-customer-form{display:grid;gap:14px} .customer-mobile-rule{margin-top:4px;color:var(--nt-ink-2);font-size:12px; line-height:1.35} .customer-mobile-status{min-height:18px;margin-top:3px;font-size:12.5px; line-height:1.35} .customer-mobile-status.is-good{color:var(--nt-paid-text);font-weight:600} .customer-mobile-status.is-bad{color:var(--nt-failed-text);font-weight:600} .customer-mobile-status.is-info{color:var(--nt-ink-2)} .crm-phone-field{display:flex;align-items:stretch;min-width:0} .crm-phone-field .crm-phone-code{flex:0 0 190px;width:190px; border-radius:9px 0 0 9px;border-right:0} .crm-phone-field .crm-phone-number{flex:1 1 auto;min-width:0; border-radius:0 9px 9px 0} @media(max-width:560px){ .crm-head{align-items:stretch;flex-direction:column} .crm-head-actions{justify-content:stretch} .crm-head-actions button{flex:1 1 auto} .crm-import-edit{grid-template-columns:minmax(0,1fr)} .crm-phone-field .crm-phone-code{flex-basis:132px;width:132px} } .crm-tabbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px} .crm-tabchip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px; border:1px solid var(--nt-line);border-radius:999px;background:var(--nt-surface);font-size:13px; cursor:pointer;color:var(--nt-ink)} .crm-tabchip:hover{background:var(--nt-raised)} .crm-tabchip.on{background:color-mix(in oklab, var(--nt-action) 12%, var(--nt-surface)); border-color:color-mix(in oklab, var(--nt-action) 34%, var(--nt-surface)); color:var(--nt-action-text);font-weight:700} .crm-tabchip-edit{opacity:.55;font-size:11.5px} .crm-tabchip-edit:hover{opacity:1} .crm-pager{display:flex;align-items:center;justify-content:center;gap:14px; padding:14px 0 4px} .crm-page-btn{padding:7px 14px;border:1px solid var(--nt-line);border-radius:8px; background:var(--nt-surface);font-size:13px;cursor:pointer;color:var(--nt-ink)} .crm-page-btn:disabled{opacity:.4;cursor:default} .crm-page-btn:not(:disabled):hover{background:var(--nt-surface)} .crm-page-n{font-size:12.5px;color:var(--nt-ink-2)} .crm-sortable{cursor:pointer;user-select:none;white-space:nowrap} .crm-sortable:hover{color:var(--nt-ink)} .crm-sortable.on{color:var(--nt-action-text)} .crm-sort-arrow{font-size:9px} /* smart lists ----------------------------------------------------------- */ .crm-two{display:grid;grid-template-columns:minmax(280px,340px) 1fr;gap:18px; align-items:start} @media(max-width:860px){.crm-two{grid-template-columns:1fr}} .crm-panel{border:1px solid var(--nt-line);border-radius:16px;padding:16px 18px; background:var(--nt-surface);box-shadow:var(--nt-sh-1)} .crm-panel h3{margin:0 0 4px;font-size:14px} .crm-panel p.sub{margin:0 0 12px;color:var(--nt-ink-2);font-size:12.5px} .crm-f{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13.5px} .crm-f-l{flex:1;color:var(--nt-ink)} .crm-f-i{width:88px;padding:6px 8px;border:1px solid var(--nt-line);border-radius:7px; font-size:13px} .crm-f-u{color:var(--nt-ink-2);font-size:12px;width:38px} .crm-seg-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px} .crm-seg-n{font-size:34px;font-weight:700;color:var(--nt-ink);line-height:1} .crm-seg-l{color:var(--nt-ink-2);font-size:13.5px} .crm-seg-reach{display:flex;gap:16px;color:var(--nt-ink-2);font-size:12.5px; margin-bottom:14px} .crm-seg-t{font-weight:600;font-size:12.5px;color:var(--nt-ink);margin:14px 0 6px} .crm-seg-desc{margin:0;padding-left:18px;color:var(--nt-ink);font-size:13px} .crm-seg-desc li{margin:2px 0} .crm-list{border:1px solid var(--nt-line);border-radius:10px;padding:10px 12px; margin-bottom:8px;cursor:pointer} .crm-list:hover{background:var(--nt-surface)} .crm-list-top{display:flex;align-items:center;justify-content:space-between} .crm-list-sub{color:var(--nt-ink-2);font-size:12px;margin-top:2px} .crm-pick{display:flex;align-items:center;gap:10px;margin:10px 0 4px; font-size:13.5px} .crm-pick select{flex:1;padding:8px 10px;border:1px solid var(--nt-line); border-radius:8px;font-size:13.5px;background:var(--nt-surface)} .crm-pick label{color:var(--nt-ink-2);white-space:nowrap} /* Do Not Disturb ---------------------------------------------------------- */ .crm-gap{height:16px} .crm-dnd{background:var(--nt-surface)} .crm-dnd-row{display:flex;align-items:center;justify-content:space-between; padding:10px 2px;font-size:13.5px;cursor:pointer} .crm-dnd-row.master{font-weight:700} .crm-dnd-l{display:flex;align-items:center;gap:9px} .crm-dnd-i{width:18px;text-align:center} .crm-dnd-row input[type=checkbox]{width:17px;height:17px;cursor:pointer; accent-color:var(--nt-action-text)} .crm-dnd-row input:disabled{opacity:.4;cursor:wait} .crm-dnd-or{display:flex;align-items:center;gap:10px;color:var(--nt-ink-2); font-size:11.5px;font-weight:600;margin:2px 0} .crm-dnd-or::before,.crm-dnd-or::after{content:'';flex:1;height:1px; background:var(--nt-bg)} .crm-dnd-sep{height:1px;background:var(--nt-bg);margin:8px 0} /* Chatter — the record feed ------------------------------------------------ */ .crm-chat-bar{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap} .crm-chat-btn{padding:7px 14px;border:1px solid var(--nt-line);background:var(--nt-surface); border-radius:7px;font-size:13px;cursor:pointer;color:var(--nt-ink)} .crm-chat-btn:hover{background:var(--nt-surface)} .crm-chat-btn.on{background:var(--nt-ground);border-color:var(--nt-line);color:#fff} .crm-compose{border:1px solid var(--nt-line);border-radius:10px;padding:12px; margin-bottom:18px;background:var(--nt-surface)} .crm-mtype{display:flex;align-items:center;gap:14px;margin-bottom:10px; flex-wrap:wrap;font-size:13px} .crm-mtype-l{color:var(--nt-ink-2)} .crm-mtype-o{display:flex;align-items:center;gap:6px;cursor:pointer; padding:5px 10px;border:1px solid var(--nt-line);border-radius:7px} .crm-mtype-o.on{border-color:color-mix(in oklab, var(--nt-action) 45%, var(--nt-surface));background:var(--nt-surface)} .crm-mtype-o.off{opacity:.5;cursor:not-allowed} .crm-mtype-to{color:var(--nt-ink-2);font-size:11.5px} .crm-c-subj,.crm-c-body{width:100%;border:1px solid var(--nt-line);border-radius:8px; padding:9px 11px;font-size:13.5px;font-family:inherit;margin-bottom:8px} .crm-c-body{min-height:84px;resize:vertical} .crm-c-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px} .crm-c-l{color:var(--nt-ink-2)} .crm-c-due{padding:7px 9px;border:1px solid var(--nt-line);border-radius:7px;font-size:13px} .crm-c-actions{display:flex;align-items:center;gap:12px} .crm-c-send{padding:8px 20px;border:none;border-radius:7px;background:var(--nt-action); color:#fff;font-size:13px;font-weight:600;cursor:pointer} .crm-c-send:disabled{opacity:.5;cursor:wait} .crm-c-out{font-size:12.5px;color:var(--nt-paid-text)} .crm-c-out.bad{color:var(--nt-failed-text)} .crm-feed-day{text-align:center;color:var(--nt-ink-2);font-size:11.5px;font-weight:600; margin:18px 0 10px;position:relative} .crm-feed-day::before{content:'';position:absolute;left:0;right:0;top:50%; height:1px;background:var(--nt-bg);z-index:0} .crm-feed-day{z-index:1} .crm-feed-day::after{content:'';display:none} .crm-e{display:flex;gap:11px;padding:9px 0;position:relative;background:var(--nt-surface)} .crm-e-ico{width:26px;height:26px;flex:none;border-radius:50%;background:var(--nt-bg); display:flex;align-items:center;justify-content:center;font-size:12.5px} .crm-e-main{flex:1;min-width:0} .crm-e-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .crm-e-head b{font-size:13px;color:var(--nt-ink)} .crm-e-time{color:var(--nt-ink-2);font-size:11.5px} .crm-e-body{font-size:13.5px;color:var(--nt-ink);margin-top:3px;white-space:pre-wrap; word-break:break-word} .crm-e-track{font-size:13px;margin-top:3px;display:flex;gap:7px;flex-wrap:wrap; align-items:baseline} .crm-e-old{color:var(--nt-ink-2);text-decoration:line-through} .crm-e-arr{color:var(--nt-ink-2)} .crm-e-new{color:var(--nt-action-text);font-weight:600} .crm-e-field{color:var(--nt-ink-2);font-style:italic;font-size:12px} .crm-e-hint{color:var(--nt-ink-2);font-size:11.5px;margin-top:2px;font-style:italic} .crm-e-msg,.crm-e-act{display:flex;align-items:center;gap:9px;margin-top:4px; flex-wrap:wrap} .crm-e-to{color:var(--nt-ink-2);font-size:12px} .crm-pill.bad{background:color-mix(in oklab, var(--nt-failed) 12%, var(--nt-surface));color:var(--nt-failed-text)} .crm-e-done{border:1px solid var(--nt-line);background:var(--nt-surface);border-radius:6px; padding:3px 10px;font-size:11.5px;cursor:pointer;color:var(--nt-ink)} .crm-e-done:hover{background:var(--nt-surface)} .crm-e-note .crm-e-ico{background:var(--nt-surface)} .crm-e-message .crm-e-ico{background:var(--nt-surface)} .crm-e-activity .crm-e-ico{background:color-mix(in oklab, var(--nt-failed) 12%, var(--nt-surface))} /* reach-the-customer buttons in the list */ .crm-act{white-space:nowrap;text-align:right} .crm-reach{border:1px solid var(--nt-line);background:var(--nt-surface);border-radius:7px; padding:4px 8px;font-size:13px;cursor:pointer;margin-left:4px;line-height:1} .crm-reach:hover{background:var(--nt-surface);border-color:color-mix(in oklab, var(--nt-action) 45%, var(--nt-surface))} /* ── the rule builder's conditions ────────────────────────────────────────── These four classes had NO stylesheet entry at all. A