/* ==========================================================================
   Mindserv CRM  —  style.css   (Helix-inspired design system)
   Navy / teal / indigo palette, CSS Grid + Flexbox, responsive.
   ========================================================================== */

:root{
  --navy-950:#0A0F1E;
  --navy-900:#0F1729;
  --navy-800:#182238;
  --navy-700:#232F49;
  --line:#E4E8F0;
  --bg:#F4F6FA;
  --surface:#FFFFFF;
  --text:#101528;
  --text-muted:#6B7690;
  --text-faint:#98A2B8;
  --teal:#0FB8A3;
  --teal-dark:#0A8F7F;
  --indigo:#5B5FEF;
  --amber:#F5A524;
  --rose:#EF4B6B;
  --green:#22B27D;
  --radius:12px;
  --shadow-sm:0 1px 2px rgba(16,21,40,.06);
  --shadow-md:0 8px 24px rgba(16,21,40,.08);
  --shadow-lg:0 20px 48px rgba(16,21,40,.16);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-head:'Space Grotesk',var(--font);
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--font-head);}
.mono{font-family:var(--font-mono);}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select,textarea{font-family:inherit;font-size:13px;}
a{color:inherit;text-decoration:none;}
/* Any author `display` beats the browser's own [hidden] rule, so a component
   styled `display:flex` or `display:inline-flex` ignores the attribute and
   stays on screen. Restoring it once here is safer than remembering to add a
   [hidden] override to every such component. */
[hidden]{display:none !important;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#D4DAE5;border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* ===== LAYOUT ===== */
#app{display:flex;height:100vh;overflow:hidden;}

.sidebar{width:224px;background:var(--navy-950);color:#fff;display:flex;flex-direction:column;flex-shrink:0;}
.sb-logo{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;}
.sb-logo img{height:30px;width:auto;max-width:100%;background:#fff;padding:6px 10px;border-radius:8px;box-sizing:content-box;}
.sb-nav{flex:1;overflow-y:auto;padding:8px 12px;}
.sb-section-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#5A6685;padding:14px 10px 6px;font-weight:600;}
.sb-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:#AEB6CC;font-size:13.5px;font-weight:500;cursor:pointer;transition:.15s;margin-bottom:2px;position:relative;}
.sb-item svg{width:17px;height:17px;flex-shrink:0;opacity:.85;}
.sb-item:hover{background:var(--navy-800);color:#fff;}
.sb-item.active{background:var(--navy-800);color:#fff;}
.sb-item.active::before{content:'';position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--teal);}
.sb-badge{margin-left:auto;background:var(--rose);color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 6px;}
.sb-footer{padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;}
.sb-profile{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer;border-radius:8px;padding:4px;margin:-4px;transition:background .15s;}
.sb-profile:hover{background:var(--navy-800);}
.sb-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--indigo),#8B5FEF);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;color:#fff;}
.sb-user-name{font-size:12.5px;font-weight:600;color:#fff;}
.sb-user-role{font-size:10.5px;color:var(--text-faint);text-transform:capitalize;}
.sb-logout{margin-left:auto;color:#8590AD;display:flex;width:30px;height:30px;border-radius:8px;align-items:center;justify-content:center;}
.sb-logout:hover{background:rgba(239,75,107,.16);color:#fca5a5;}
.sb-logout svg{width:16px;height:16px;}

.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{height:60px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 22px;gap:16px;flex-shrink:0;}
.topbar__burger{display:none;font-size:20px;color:var(--text);}
.search-box{flex:1;max-width:420px;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:7px 12px;color:var(--text-faint);}
.search-box input{background:none;border:none;outline:none;flex:1;font-size:13px;color:var(--text);}
.search-box svg{width:15px;height:15px;flex-shrink:0;}
.top-actions{display:flex;align-items:center;gap:10px;margin-left:auto;}
.icon-btn{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);position:relative;transition:.15s;}
.icon-btn:hover{background:var(--bg);color:var(--text);}
.icon-btn svg{width:18px;height:18px;}

.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;transition:.15s;white-space:nowrap;}
.btn-primary{background:var(--navy-950);color:#fff;}
.btn-primary:hover{background:var(--navy-800);}
.btn-teal{background:var(--teal);color:#fff;}
.btn-teal:hover{background:var(--teal-dark);}
.btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--text);}
.btn-ghost:hover{background:var(--bg);}
.btn-danger{background:var(--rose);color:#fff;}
.btn svg{width:14px;height:14px;}
.btn:disabled{opacity:.55;cursor:not-allowed;}

.content{flex:1;overflow-y:auto;padding:24px 28px 60px;}
.page{display:none;animation:fadeIn .25s ease;}
.page.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px;}
.page-title{font-size:22px;font-weight:700;letter-spacing:-.3px;}
.page-sub{color:var(--text-muted);font-size:13px;margin-top:2px;}
.muted{color:var(--text-muted);}

/* ===== CARDS / GRID ===== */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:20px;}
.kpi-card{padding:16px;position:relative;overflow:hidden;}
.kpi-label{font-size:11.5px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;}
.kpi-value{font-family:var(--font-head);font-size:26px;font-weight:700;margin-top:6px;}
.kpi-sub{font-size:11.5px;font-weight:600;margin-top:5px;color:var(--text-faint);}
.kpi-icon{position:absolute;right:14px;top:14px;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
.kpi-icon svg{width:15px;height:15px;color:#fff;}

.grid-2{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.panel{padding:18px 20px;}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.panel-title{font-size:14.5px;font-weight:700;}
.panel-title-sub{font-size:11.5px;color:var(--text-muted);font-weight:500;margin-top:1px;}
.link-btn{font-size:12px;font-weight:600;color:var(--indigo);cursor:pointer;}

/* ===== TABLES ===== */
table{width:100%;border-collapse:collapse;}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);font-weight:700;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;}
td{padding:11px 12px;border-bottom:1px solid #EEF1F6;font-size:13px;vertical-align:middle;}
tr.row-hover:hover{background:#FAFBFD;cursor:pointer;}
.ta-right{text-align:right;}
.table-scroll{overflow-x:auto;}

.avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;}
.name-cell{display:flex;align-items:center;gap:10px;}
.name-cell .n{font-weight:600;font-size:13px;}
.name-cell .c{font-size:11.5px;color:var(--text-muted);}

.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;}
.badge svg{width:11px;height:11px;}
/* pipeline stage badges */
.b-new{background:#E8ECFB;color:var(--indigo);}
.b-contacted{background:#E7EEFB;color:#3B6FD9;}
.b-qualified{background:#FFF3DE;color:#B87400;}
.b-proposal{background:#DFF3EF;color:var(--teal-dark);}
.b-negotiation{background:#FCE8EE;color:#C13567;}
.b-won{background:#E1F7EC;color:var(--green);}
.b-lost{background:#F1F2F5;color:var(--text-muted);}
.b-discard{background:#EEF0F4;color:#5A6472;border:1px solid #E0E4EA;}
/* status dot */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;}
.dot--fresh{background:#9ca3af;}
.dot--connected{background:var(--green);}
.dot--busy{background:var(--amber);}
.dot--not_connected{background:var(--rose);}
.dot--follow_up{background:var(--indigo);}
.dot--dnd{background:#6b7280;}
.dot--junk{background:#111827;}
.dot--converted{background:var(--teal-dark);}
.status-text{text-transform:capitalize;font-size:12.5px;}

/* product icon chip */
.prod-icon{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px;font-weight:800;color:#fff;}
.prod-cell{display:flex;align-items:center;gap:8px;}

.chip-row{display:flex;flex-wrap:wrap;gap:6px;}
.chip{padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--text-muted);cursor:pointer;}
.chip.active{background:var(--navy-950);color:#fff;border-color:var(--navy-950);}

/* dial button in tables */
.dial-btn{width:30px;height:30px;border-radius:50%;background:rgba(15,184,163,.12);color:var(--teal);display:inline-flex;align-items:center;justify-content:center;transition:.15s;}
.dial-btn:hover{background:var(--teal);color:#fff;transform:scale(1.08);}
.dial-btn svg{width:15px;height:15px;}
.phone-cell{display:inline-flex;align-items:center;gap:8px;}
.row-actions{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end;}
.mail-btn{width:30px;height:30px;border-radius:50%;background:rgba(91,95,239,.12);color:var(--indigo);display:inline-flex;align-items:center;justify-content:center;transition:.15s;}
.mail-btn:hover{background:var(--indigo);color:#fff;transform:scale(1.08);}
.mail-btn svg{width:15px;height:15px;}

/* Lead-email modal: history + compose */
.lm-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin:4px 0 10px;}
.lm-history{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:18px;
  border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--bg);}
.lm-msg{background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px 12px;cursor:pointer;transition:.12s;}
.lm-msg:hover{border-color:var(--indigo);box-shadow:var(--shadow-sm);}
.lm-msg.out{border-left:3px solid var(--teal);}
.lm-msg.in{border-left:3px solid var(--indigo);}
.lm-msg-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:3px;}
.lm-dir{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:1px 7px;border-radius:20px;}
.lm-dir.sent{background:#DFF3EF;color:var(--teal-dark);}
.lm-dir.recv{background:#E8ECFB;color:var(--indigo);}
.lm-date{font-size:10.5px;color:var(--text-faint);}
.lm-subj{font-size:13px;font-weight:600;}
.lm-snip{font-size:12px;color:var(--text-muted);margin-top:2px;max-height:44px;overflow:hidden;line-height:1.5;}

/* pager */
.pager{display:flex;align-items:center;justify-content:space-between;padding:14px 2px 0;}
.pager__info{color:var(--text-muted);font-size:13px;}
.pager__controls{display:flex;gap:8px;}

/* ===== PIPELINE ===== */
.pipeline-wrap{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px;}
.stage-col{min-width:260px;flex-shrink:0;background:#EEF1F7;border-radius:var(--radius);display:flex;flex-direction:column;max-height:calc(100vh - 210px);}
.stage-head{padding:12px 14px 10px;display:flex;align-items:center;justify-content:space-between;}
.stage-title{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;display:flex;align-items:center;gap:7px;}
.stage-dot{width:8px;height:8px;border-radius:50%;}
.stage-count{background:#fff;border-radius:20px;padding:1px 8px;font-size:11px;font-weight:700;color:var(--text-muted);}
.stage-body{flex:1;overflow-y:auto;padding:0 10px 10px;display:flex;flex-direction:column;gap:8px;min-height:40px;}
.stage-body.dragover{background:#E1E6F0;border-radius:8px;}
.deal-card{background:#fff;border-radius:10px;padding:12px 13px;box-shadow:var(--shadow-sm);cursor:grab;border:1px solid transparent;transition:.15s;}
.deal-card:hover{border-color:var(--line);box-shadow:var(--shadow-md);}
.deal-card.dragging{opacity:.4;}
.deal-title{font-weight:700;font-size:13px;margin-bottom:2px;}
.deal-company{font-size:11.5px;color:var(--text-muted);margin-bottom:8px;}
.deal-meta{display:flex;align-items:center;justify-content:space-between;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);}

/* ===== DRAWER (360) ===== */
.overlay{position:fixed;inset:0;background:rgba(10,15,30,.5);z-index:60;display:none;}
.overlay.open{display:block;}
.drawer{position:fixed;top:0;right:0;bottom:0;width:560px;max-width:94vw;background:var(--surface);z-index:61;transform:translateX(100%);transition:transform .28s ease;overflow-y:auto;box-shadow:var(--shadow-lg);}
.drawer.open{transform:translateX(0);}
.drawer-head{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:flex-start;position:sticky;top:0;background:#fff;z-index:2;}
.drawer-close{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:15px;}
.drawer-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--indigo),#8B5FEF);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;color:#fff;flex-shrink:0;}
.drawer-name{font-size:18px;font-weight:700;}
.drawer-meta{font-size:12.5px;color:var(--text-muted);margin-top:2px;}
.drawer-actions{display:flex;gap:8px;margin-top:10px;}
.drawer-actions .icon-btn{background:var(--bg);width:32px;height:32px;}
.drawer-actions .da-call{color:var(--teal);}
.drawer-actions .da-call:hover{background:var(--teal);color:#fff;}
.drawer-actions .da-wa{color:#1FA855;}
.drawer-actions .da-wa:hover{background:#25D366;color:#fff;}
.drawer-actions .da-mail{color:var(--indigo);}
.drawer-actions .da-mail:hover{background:var(--indigo);color:#fff;}
.drawer-actions .da-wa svg,.drawer-actions .da-call svg{width:16px;height:16px;}
.drawer-content{padding:20px 22px;}
.stat-row{display:flex;gap:10px;margin-bottom:18px;}
.stat-box{flex:1;background:var(--bg);border-radius:10px;padding:10px 12px;text-align:center;}
.stat-box .v{font-family:var(--font-head);font-weight:700;font-size:16px;}
.stat-box .l{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-top:2px;}

.section-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin:18px 0 12px;}

/* timeline */
.tl-item{display:flex;gap:12px;position:relative;padding-bottom:18px;}
.tl-item::before{content:'';position:absolute;left:15px;top:32px;bottom:0;width:1.5px;background:var(--line);}
.tl-item:last-child::before{display:none;}
.tl-icon{width:31px;height:31px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1;color:#fff;}
.tl-icon svg{width:14px;height:14px;color:#fff;}
.tl-body{flex:1;background:var(--bg);border-radius:10px;padding:11px 13px;}
.tl-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px;gap:8px;}
.tl-title{font-weight:700;font-size:12.5px;}
.tl-time{font-size:10.5px;color:var(--text-faint);white-space:nowrap;}
.tl-text{font-size:12px;color:var(--text-muted);line-height:1.55;}
.tl-tags{margin-top:7px;display:flex;gap:5px;flex-wrap:wrap;}
.ch-tag{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-faint);background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:1px 5px;margin-left:4px;}
.tag-mini{display:inline-block;padding:3px 8px;border-radius:6px;font-size:10.5px;font-weight:600;background:rgba(15,184,163,.12);color:var(--teal-dark);}

/* ===== FORMS / FIELDS ===== */
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;font-weight:600;margin-bottom:5px;color:var(--text-muted);}
.field input,.field select,.field textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;outline:none;background:#fff;font-size:13px;font-family:var(--font);}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,184,163,.13);}
.field textarea{resize:vertical;}
.field .hint{font-size:11px;color:var(--text-faint);margin-top:4px;}
.req{color:var(--rose);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
.field--full{grid-column:1/-1;}

/* disposition chips */
.disp-chips{display:flex;flex-wrap:wrap;gap:8px;}
.disp-chip{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:.15s;}
.disp-chip:hover{border-color:var(--dc,#0FB8A3);color:var(--dc,#0FB8A3);}
.disp-chip.active{background:var(--dc,#0FB8A3);border-color:var(--dc,#0FB8A3);color:#fff;}

/* source/product visual picker (modal) */
.source-pick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.source-pick .sp{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border-radius:9px;border:1.5px solid var(--line);font-size:9.5px;font-weight:600;text-align:center;color:var(--text-muted);cursor:pointer;}
.source-pick .sp.sel{border-color:var(--teal);background:#F0FBF9;color:var(--teal-dark);}
.source-pick .sp .prod-icon{width:26px;height:26px;}

/* ===== MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(10,15,30,.5);z-index:70;display:none;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:#fff;border-radius:14px;width:520px;max-width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);}
.modal--sm{width:400px;}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex:0 0 auto;}
.modal-head h3{font-size:15px;font-weight:700;}
.modal-body{padding:18px 20px;overflow-y:auto;flex:1 1 auto;min-height:0;}
.modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;flex:0 0 auto;}
.confirm-explain{background:#F0FBF9;border:1px solid #CFEEE9;color:var(--teal-dark);border-radius:8px;padding:11px 13px;font-size:12.5px;margin-bottom:16px;line-height:1.5;}

/* ===== IMPORT WIZARD ===== */
.modal--wide{width:860px;}
/* A confirmation asks one question, so it should not open at form width. */
.modal--narrow{width:420px;max-width:100%;}
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border:2px dashed var(--line);border-radius:12px;padding:36px 20px;cursor:pointer;text-align:center;transition:.15s;}
.dropzone:hover{border-color:var(--teal);background:#F7FAFF;}
.dz-title{font-weight:700;font-size:14px;}
.dz-sub{font-size:12px;color:var(--text-muted);}
.map-grid{display:grid;grid-template-columns:340px 1fr;gap:20px;}
.map-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.map-label{width:150px;flex-shrink:0;font-size:12.5px;font-weight:600;color:var(--text);}
.map-sel{flex:1;}
.preview-wrap{border:1px solid var(--line);border-radius:8px;overflow:auto;max-height:340px;}
.preview-table{font-size:11.5px;white-space:nowrap;}
.preview-table th{position:sticky;top:0;background:var(--bg);padding:7px 9px;}
.preview-table td{padding:6px 9px;max-width:160px;overflow:hidden;text-overflow:ellipsis;}
.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:10px 0;}
.result-stat{background:var(--bg);border-radius:10px;padding:16px;text-align:center;}
.result-stat .rv{font-family:var(--font-head);font-size:26px;font-weight:700;}
.result-stat .rl{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-top:3px;}
@media(max-width:820px){ .modal--wide{width:100%;} .map-grid{grid-template-columns:1fr;} }

/* ===== SOFTPHONE ===== */
.phone-fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:var(--teal);box-shadow:0 10px 30px rgba(15,184,163,.45);display:flex;align-items:center;justify-content:center;z-index:89;transition:.2s;}
.phone-fab:hover{transform:scale(1.06);}
.phone-fab svg{width:23px;height:23px;color:#fff;}
.phone-fab .pulse{position:absolute;inset:0;border-radius:50%;border:2px solid var(--teal);animation:pulseRing 1.8s infinite;}
@keyframes pulseRing{0%{transform:scale(1);opacity:.7;}100%{transform:scale(1.5);opacity:0;}}

.phone-panel{position:fixed;bottom:92px;right:24px;width:340px;background:var(--navy-950);border-radius:16px;box-shadow:var(--shadow-lg);z-index:90;color:#fff;overflow:hidden;display:none;flex-direction:column;}
.phone-panel.open{display:flex;}
.phone-head{padding:13px 16px;display:flex;align-items:center;justify-content:space-between;background:var(--navy-900);}
.phone-head-title{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:7px;}
.phone-head-title svg{width:15px;height:15px;color:var(--teal);}
.phone-head .icon-btn{color:#8590AD;}
.phone-head .icon-btn:hover{background:var(--navy-800);color:#fff;}
.phone-tabs{display:flex;gap:2px;padding:8px;background:var(--navy-900);}
.phone-tab{flex:1;text-align:center;padding:7px;border-radius:7px;font-size:11.5px;font-weight:600;color:#8590AD;cursor:pointer;}
.phone-tab.active{background:var(--navy-800);color:#fff;}
.phone-body{padding:16px;min-height:300px;}
.phone-field{margin-bottom:12px;}
.phone-field label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:#8590AD;font-weight:700;margin-bottom:5px;}
.phone-field input{width:100%;background:var(--navy-800);border:1px solid var(--navy-700);border-radius:9px;padding:11px 12px;color:#fff;font-family:var(--font-mono);font-size:15px;outline:none;}
.phone-field input:focus{border-color:var(--teal);}
.phone-field .fh{font-size:10px;color:#6D779A;margin-top:4px;}
.call-btn-big{width:100%;padding:12px;border-radius:10px;background:var(--green);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;margin-top:6px;}
.call-btn-big:hover{filter:brightness(1.08);}
.call-btn-big svg{width:16px;height:16px;}

.active-call{text-align:center;}
.call-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--indigo),#8B5FEF);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;margin:6px auto 10px;}
.call-status-text{font-size:12px;color:var(--teal);font-weight:600;margin-bottom:2px;}
.call-name{font-size:16px;font-weight:700;}
.call-sub{font-size:11px;color:#8590AD;}
.call-timer{font-family:var(--font-mono);color:#8590AD;font-size:14px;margin-top:6px;}
.call-controls{display:flex;gap:8px;justify-content:center;margin-top:16px;}
.ctrl-btn{width:44px;height:44px;border-radius:50%;background:var(--navy-800);display:flex;align-items:center;justify-content:center;}
.ctrl-btn svg{width:18px;height:18px;}
.ctrl-btn.end{background:var(--rose);}
.ctrl-btn.mute.active{background:var(--amber);color:var(--navy-950);}

/* wrap / disposition inside phone */
.wrap-box{text-align:left;}
.wrap-box .disp-chip{background:var(--navy-800);border-color:var(--navy-700);color:#cfd6ea;}
.wrap-box .disp-chip.active{background:var(--dc,#0FB8A3);border-color:var(--dc,#0FB8A3);color:#fff;}
.wrap-box textarea{width:100%;background:var(--navy-800);border:1px solid var(--navy-700);border-radius:9px;color:#fff;padding:9px 11px;font-family:var(--font);font-size:12.5px;outline:none;resize:vertical;margin-top:10px;}
.wrap-box input[type=datetime-local]{width:100%;background:var(--navy-800);border:1px solid var(--navy-700);border-radius:9px;color:#fff;padding:9px 11px;margin-top:10px;outline:none;}

.recent-call-item{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--navy-800);}
.recent-call-item .dir-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;}
.recent-call-item .dir-icon svg{width:12px;height:12px;}

/* ===== ANALYTICS ===== */
.chart-box{position:relative;height:230px;}
.bar-row{margin-bottom:11px;}
.bar-top{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;}
.bar-track{height:18px;border-radius:6px;background:var(--bg);overflow:hidden;}
.bar-fill{height:100%;border-radius:6px;}
.leaderboard-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #F1F3F8;}
.lb-rank{width:20px;font-family:var(--font-mono);font-weight:700;color:var(--text-faint);font-size:12px;}

/* ===== MAIL ===== */
.mail-shell{display:grid;grid-template-columns:320px 1fr;height:calc(100vh - 172px);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;transition:grid-template-columns .2s ease;}
.mail-shell.list-collapsed{grid-template-columns:0 1fr;}
.mail-shell.list-collapsed .mail-list-wrap{display:none;}
.mail-list-wrap{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;}
.mail-search{padding:10px;border-bottom:1px solid var(--line);flex:0 0 auto;}
.mail-search input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;outline:none;font-size:13px;}
.mail-search input:focus{border-color:var(--teal);}
.mail-list{overflow-y:auto;flex:1;}
.mail-item{padding:11px 14px;border-bottom:1px solid #F1F3F8;cursor:pointer;}
.mail-item:hover{background:#F7F9FC;}
.mail-item.active{background:#EFF3FF;}
.mail-item.unread{background:#FBFCFF;}
.mail-item.unread .mi-from,.mail-item.unread .mi-subj{font-weight:700;}
.mail-item-top{display:flex;justify-content:space-between;gap:8px;}
.mi-from{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mi-time{font-size:10.5px;color:var(--text-faint);flex-shrink:0;}
.mi-subj{font-size:12.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mi-snip{font-size:11.5px;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mi-right{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.mi-clip{display:inline-flex;color:var(--text-faint);}
.mi-clip svg{width:13px;height:13px;}
.mi-attach{display:inline-flex;align-items:center;gap:5px;margin-top:6px;max-width:100%;
  font-size:11px;font-weight:600;color:var(--indigo);background:var(--bg);border:1px solid var(--line);
  border-radius:7px;padding:3px 8px;text-decoration:none;}
.mi-attach:hover{background:#EFF3FF;border-color:#DCE7FF;}
.mi-attach svg{width:12px;height:12px;flex-shrink:0;}
.mi-attach-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mi-lead{display:inline-block;margin-top:6px;margin-left:6px;font-size:10.5px;font-weight:600;color:var(--teal-dark);background:#F0FBF9;border-radius:6px;padding:2px 7px;}
.mail-view{display:flex;flex-direction:column;min-width:0;min-height:0;}
.mail-view-head{padding:14px 18px;border-bottom:1px solid var(--line);flex:0 0 auto;}
.mv-subject{font-size:15px;font-weight:700;}
.mv-meta{font-size:12px;color:var(--text-muted);margin-top:2px;}
.mail-thread{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px;background:#FAFBFD;}
.msg-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;}
.msg-card.out{border-color:#DCE7FF;background:#F7FAFF;}
.msg-head{display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
.msg-from{font-weight:700;font-size:13px;}
.msg-time{font-size:11px;color:var(--text-faint);flex-shrink:0;}
.msg-to{font-size:11px;margin:2px 0 8px;word-break:break-word;}
.mail-frame{width:100%;min-height:200px;border:0;background:#fff;border-radius:6px;}
.mail-text{font-size:13px;line-height:1.6;}
.msg-atts{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;}
.mail-att{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--indigo);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:5px 9px;}
.mail-att svg{width:13px;height:13px;}
.mail-reply{border-top:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:8px;flex:0 0 auto;}
.mail-reply .reply-row{display:flex;gap:8px;align-items:flex-end;}
.reply-to{border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:12.5px;outline:none;}
.reply-to:focus{border-color:var(--teal);}
.mail-reply textarea{flex:1;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-family:var(--font);font-size:13px;outline:none;resize:vertical;min-height:44px;}
.mail-reply textarea:focus{border-color:var(--teal);}
.reply-attach-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.btn-sm{padding:6px 10px;font-size:12px;}
.btn-attach svg{width:15px;height:15px;}

.attach-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* attachment chips (compose + reply) */
.attach-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.attach-chip--fixed{background:#F0FBF9;border-color:#CFEEE9;color:var(--teal-dark);}
.attach-chip--fixed svg{color:var(--teal-dark);}
.attach-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:5px 8px;font-size:11.5px;max-width:220px;}
.attach-chip svg{width:13px;height:13px;color:var(--text-muted);flex-shrink:0;}
.attach-chip .ac-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.attach-chip .ac-size{color:var(--text-faint);flex-shrink:0;}
.attach-chip .ac-x{border:0;background:transparent;color:var(--text-faint);font-size:15px;line-height:1;cursor:pointer;flex-shrink:0;}
.attach-chip .ac-x:hover{color:var(--rose);}
@media(max-width:820px){
  .mail-shell{grid-template-columns:1fr;height:auto;}
  .mail-list-wrap{max-height:40vh;}
  .mail-frame{min-height:260px;}
}

/* ===== PROFILE ===== */
.prof-head{display:flex;align-items:center;gap:14px;}
.prof-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--indigo),#8B5FEF);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;flex-shrink:0;}
.prof-name{font-size:18px;font-weight:700;}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;}
.kv-list{display:flex;flex-direction:column;gap:2px;}
.kv-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13px;}
.kv-row:last-child{border-bottom:0;}
.kv-row span{color:var(--text-muted);}
/* toggle switch */
.switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.switch-sl{position:absolute;inset:0;background:var(--line);border-radius:24px;transition:.2s;cursor:pointer;}
.switch-sl::before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:var(--shadow-sm);}
.switch input:checked + .switch-sl{background:var(--teal);}
.switch input:checked + .switch-sl::before{transform:translateX(18px);}

/* ===== WHATSAPP ===== */
.wa-btn{width:30px;height:30px;border-radius:50%;background:rgba(37,211,102,.14);color:#1FA855;display:inline-flex;align-items:center;justify-content:center;transition:.15s;}
.wa-btn:hover{background:#25D366;color:#fff;transform:scale(1.08);}
.wa-btn svg{width:16px;height:16px;}
.wa-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.wa-dot.on{background:#22B27D;}
.wa-dot.off{background:#C7CDD8;}
.mi-unlinked{background:#F1F2F5;color:var(--text-muted);}
.wa-head{display:flex;align-items:center;justify-content:space-between;}
.wa-head-actions{display:flex;align-items:center;gap:8px;}
.wa-badge{font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:20px;}
.wa-badge.open{background:#E1F7EC;color:var(--green);}
.wa-badge.closed{background:#F1F2F5;color:var(--text-muted);}
.wa-thread{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:6px;background:#ECE5DD;}
.wa-bubble{max-width:72%;padding:7px 10px;border-radius:10px;font-size:13px;box-shadow:0 1px 1px rgba(0,0,0,.06);position:relative;}
.wa-bubble.in{align-self:flex-start;background:#fff;border-top-left-radius:2px;}
.wa-bubble.out{align-self:flex-end;background:#D9FDD3;border-top-right-radius:2px;}
.wa-text{white-space:normal;line-height:1.45;word-break:break-word;}
.wa-cap{margin-top:4px;font-size:12.5px;}
.wa-img{max-width:220px;border-radius:8px;display:block;}
.wa-file{display:inline-flex;align-items:center;gap:6px;color:var(--indigo);font-weight:600;font-size:12.5px;text-decoration:none;}
.wa-file svg{width:14px;height:14px;}
.wa-meta{font-size:9.5px;color:var(--text-faint);text-align:right;margin-top:3px;display:flex;gap:4px;justify-content:flex-end;align-items:center;}
.wa-ticks{display:inline-flex;color:#8696a0;}
.wa-ticks.read{color:#53BDEB;}
.wa-ticks svg{width:13px;height:13px;margin-left:-8px;}
.wa-ticks svg:first-child{margin-left:0;}
.wa-fail{color:var(--rose);font-weight:700;}
.wa-compose{border-top:1px solid var(--line);padding:10px 12px;display:flex;gap:8px;align-items:flex-end;flex:0 0 auto;background:#F0F2F5;}
.wa-compose textarea{flex:1;border:1px solid var(--line);border-radius:20px;padding:9px 14px;font-family:var(--font);font-size:13px;outline:none;resize:none;max-height:120px;}
.wa-compose textarea:focus{border-color:var(--teal);}
.wa-send{width:42px;height:42px;border-radius:50%;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.wa-send svg{width:16px;height:16px;}
.wa-tpl-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;width:100%;}
.wa-closed-note{font-size:11.5px;color:var(--text-muted);flex-basis:100%;}
.wr-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #F1F3F8;}
.wr-btn-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.wr-btn-n{width:16px;color:var(--text-muted);font-weight:700;flex-shrink:0;}
.wr-btn-row .input{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:8px;outline:none;font-size:13px;}
.wr-btn-row .input:focus{border-color:var(--teal);}
.wr-btn-id{max-width:120px;}
.mn-icon.wa{background:#25D366;}
.wa-notif{border-left-color:#25D366;}

/* ===== NEW-MAIL NOTIFICATION (Gmail-style) ===== */
.mail-notif-wrap{position:fixed;left:20px;bottom:20px;z-index:95;display:flex;flex-direction:column;gap:10px;max-width:340px;}
.mail-notif{display:flex;gap:11px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--teal);border-radius:12px;box-shadow:var(--shadow-lg);padding:13px 14px;cursor:pointer;
  animation:mnIn .25s ease;}
.mail-notif:hover{background:#FAFBFD;}
.mn-icon{width:34px;height:34px;border-radius:9px;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mn-icon svg{width:17px;height:17px;}
.mn-body{flex:1;min-width:0;}
.mn-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--teal-dark);}
.mn-from{font-size:13px;font-weight:600;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mn-subj{font-size:12px;color:var(--text-muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mn-close{border:0;background:transparent;color:var(--text-faint);font-size:18px;line-height:1;cursor:pointer;flex-shrink:0;}
.mn-close:hover{color:var(--text);}
@keyframes mnIn{from{opacity:0;transform:translateX(-12px);}to{opacity:1;transform:none;}}

/* ===== TOAST ===== */
.toast-wrap{position:fixed;top:18px;right:18px;z-index:90;display:flex;flex-direction:column;gap:8px;}
.toast{background:var(--navy-950);color:#fff;padding:11px 16px;border-radius:10px;font-size:12.5px;font-weight:600;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:8px;animation:toastIn .2s ease;}
.toast.err{background:var(--rose);}
.toast.ok{background:var(--green);}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

.rec-play{width:30px;height:30px;border-radius:50%;background:rgba(15,184,163,.12);color:var(--teal);
  display:inline-flex;align-items:center;justify-content:center;transition:.15s;}
.rec-play:hover{background:var(--teal);color:#fff;transform:scale(1.06);}
.rec-play.playing{background:var(--teal);color:#fff;}
.rec-play svg{width:14px;height:14px;}

.loading{padding:40px;text-align:center;color:var(--text-muted);}
.spinner{display:inline-block;width:16px;height:16px;vertical-align:middle;border:2px solid var(--line);border-top-color:var(--teal);border-radius:50%;animation:spin .7s linear infinite;margin-right:6px;}
@keyframes spin{to{transform:rotate(360deg);}}
.empty{padding:40px;text-align:center;color:var(--text-faint);}

/* ===== AUTH / LOGIN ===== */
.auth-body{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy-950),var(--navy-800));padding:24px;}
.auth-card{width:min(400px,100%);background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);padding:34px 30px;}
.auth-brand{display:flex;justify-content:center;margin-bottom:22px;}
.auth-brand img{height:44px;}
.auth-title{font-size:22px;font-weight:700;text-align:center;}
.auth-sub{color:var(--text-muted);font-size:13.5px;text-align:center;margin:4px 0 22px;}
.auth-form{display:flex;flex-direction:column;gap:4px;}
.auth-submit{width:100%;justify-content:center;padding:12px;font-size:14px;margin-top:8px;}
.auth-error{background:#FDEAEE;color:#C13567;border:1px solid #F8CBD6;padding:11px 14px;border-radius:9px;font-size:13px;margin-bottom:16px;}

/* ===== RESPONSIVE ===== */
@media(max-width:1100px){
  .kpi-grid{grid-template-columns:repeat(3,1fr);}
  .grid-2,.grid-3{grid-template-columns:1fr;}
}
@media(max-width:860px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:80;transform:translateX(-100%);transition:transform .25s;}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg);}
  .topbar__burger{display:flex;}
  .content{padding:18px;}
}
@media(max-width:560px){
  .form-grid{grid-template-columns:1fr;}
  .search-box{max-width:none;}
  .drawer{width:100%;}
  .phone-panel{width:calc(100vw - 32px);right:16px;}
}

/* ============================= ACCOUNTS (Zoho) ============================ */
/* Connection strip shown at the top of every Accounts page. */
.acct-conn{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 16px;margin-bottom:14px;font-size:13px;flex-wrap:wrap;}
.acct-conn .muted{font-size:12px;margin-top:3px;}
.acct-conn code{background:var(--bg);border:1px solid var(--line);border-radius:5px;
  padding:1px 5px;font-family:'JetBrains Mono',monospace;font-size:11.5px;}
.acct-conn--warn{border-color:#F3D69B;background:#FFFBF2;}

/* Per-page search field. */
.acct-search{margin-bottom:12px;}
.acct-search input{width:100%;max-width:460px;padding:9px 12px;border:1px solid var(--line);
  border-radius:9px;outline:none;font-size:13px;background:var(--surface);color:var(--text);}
.acct-search input:focus{border-color:var(--teal);}

/* Keep a row's action buttons on one line. */
.nowrap{white-space:nowrap;}

/* Line-item repeater inside the create-document modal. */
.acct-lines{width:100%;border-collapse:collapse;font-size:13px;}
.acct-lines th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--text-faint);padding:0 6px 6px;}
.acct-lines td{padding:4px 6px;vertical-align:middle;border-top:1px solid var(--line);}
.acct-lines input{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:7px;
  outline:none;font-size:13px;color:var(--text);}
.acct-lines input:focus{border-color:var(--teal);}
.acct-li-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;}
.acct-total{font-size:15px;font-weight:700;font-family:'JetBrains Mono',monospace;}

/* Attachment chip in the email modal. */
.acct-att{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px;
  background:var(--bg);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--text-muted);}
.acct-warn{font-size:12px;color:#B4690E;background:#FFFBF2;border:1px solid #F3D69B;
  border-radius:8px;padding:8px 10px;margin-bottom:12px;}

/* ---------------------- Workspace tabs (Sales / Accounts) ----------------- */
.ws-tabs{display:flex;align-items:center;gap:4px;padding:3px;border-radius:10px;
  background:var(--bg);border:1px solid var(--line);flex:0 0 auto;}
.ws-tab{display:flex;align-items:center;gap:7px;padding:6px 14px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--text-muted);background:none;border:none;
  cursor:pointer;white-space:nowrap;transition:.15s;position:relative;}
.ws-tab svg{width:15px;height:15px;flex-shrink:0;}
.ws-tab:hover{color:var(--text);}
.ws-tab.active{background:var(--surface);color:var(--text);
  box-shadow:0 1px 3px rgba(19,26,45,.10);}
/* Unread count for the workspace you are NOT looking at. */
.ws-tab-badge{background:var(--rose);color:#fff;font-size:10px;font-weight:700;
  border-radius:10px;padding:1px 6px;line-height:1.5;}

@media (max-width:860px){
  /* Keep the switcher, drop the labels — the icons still read clearly. */
  .ws-tab span:not(.ws-tab-badge){display:none;}
  .ws-tab{padding:6px 10px;}
}

/* The tabs add a fixed-width block to the top bar, so the search field must be
   allowed to shrink below its content width (flex items default to min-width:auto). */
.topbar .search-box{min-width:0;}
@media (max-width:560px){
  .topbar{padding:0 12px;gap:10px;}
  .ws-tabs{padding:2px;}
}

/* Row actions in the Accounts grids: icon buttons, labelled by title/aria. */
.acct-acts{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end;}
.acct-act{width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--line);background:var(--surface);
  color:var(--text-muted);cursor:pointer;transition:.15s;padding:0;}
.acct-act svg{width:15px;height:15px;}
.acct-act:hover{background:var(--bg);color:var(--text);border-color:var(--text-faint);}
.acct-act--send{background:var(--teal);border-color:var(--teal);color:#fff;}
.acct-act--send:hover{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff;}
.acct-sent{font-size:11px;margin-top:3px;white-space:nowrap;}

/* Ten stacked horizontal bars (billing by customer) need more room than the
   default chart height, and its neighbour matches so the row stays even. */
.chart-box--tall{height:330px;}

/* --------------------------- Payments grid ------------------------------- */
.acct-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.acct-filter{padding:9px 12px;border:1px solid var(--line);border-radius:9px;outline:none;
  font-size:13px;background:var(--surface);color:var(--text);cursor:pointer;min-width:150px;}
.acct-filter:focus{border-color:var(--teal);}

.pay-num{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600;color:var(--text);}
.pay-amt{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--green);white-space:nowrap;}

/* Mode chips — a colour cue so the column scans without being read. */
.pay-mode{display:inline-block;padding:3px 9px;border-radius:7px;font-size:11.5px;
  font-weight:600;white-space:nowrap;border:1px solid transparent;}
.pm--cash{background:#E9F7F0;color:#12805F;border-color:#BFE6D6;}
.pm--upi{background:#EDEEFE;color:#3F44C4;border-color:#CFD1FA;}
.pm--bank{background:#E8F0FD;color:#2C5BB8;border-color:#C7DAF7;}
.pm--cheque{background:#FFF6E6;color:#9A6508;border-color:#F6DFAE;}
.pm--card{background:#FDECEF;color:#B8304A;border-color:#F7CBD4;}
.pm--other{background:var(--bg);color:var(--text-muted);border-color:var(--line);}

.pill{display:inline-block;padding:3px 9px;border-radius:7px;font-size:11.5px;font-weight:600;}
.pill--muted{background:var(--bg);color:var(--text-faint);border:1px dashed var(--line);}

/* Summary strip under a grid. */
.acct-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-muted);}

@media (max-width:560px){
  .acct-toolbar{flex-direction:column;align-items:stretch;}
  .acct-filter{width:100%;}
}

/* ----------------------- Zoho status chip + modal ------------------------ */
.zoho-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--text-muted);
  font-size:11.5px;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:.15s;}
.zoho-chip:hover{background:var(--bg);color:var(--text);}
.zoho-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--text-faint);}
.zoho-chip.is-on  .zoho-dot{background:var(--green);box-shadow:0 0 0 3px rgba(34,178,125,.18);}
.zoho-chip.is-off .zoho-dot{background:var(--rose);box-shadow:0 0 0 3px rgba(239,75,107,.18);}

.zoho-state{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:10px;
  margin-bottom:16px;border:1px solid var(--line);background:var(--bg);}
.zoho-state .zoho-dot{width:10px;height:10px;}
.zoho-state.is-on{background:#E9F7F0;border-color:#BFE6D6;}
.zoho-state.is-on .zoho-dot{background:var(--green);box-shadow:0 0 0 3px rgba(34,178,125,.2);}
.zoho-state.is-off{background:#FDECEF;border-color:#F7CBD4;}
.zoho-state.is-off .zoho-dot{background:var(--rose);box-shadow:0 0 0 3px rgba(239,75,107,.2);}

.zoho-rows>div{display:flex;justify-content:space-between;gap:14px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:13px;}
.zoho-rows>div:last-child{border-bottom:none;}
.zoho-rows span{color:var(--text-muted);flex-shrink:0;}
.zoho-rows b{text-align:right;word-break:break-all;}
.zoho-rows code{background:var(--bg);border:1px solid var(--line);border-radius:5px;
  padding:1px 5px;font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:500;}

.zoho-counts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.zoho-counts>div{text-align:center;padding:12px 6px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface);}
.zoho-counts b{display:block;font-size:19px;font-weight:700;color:var(--text);}
.zoho-counts span{font-size:11px;color:var(--text-muted);}

/* Filter chips and the search field on one row: chips left, search right. */
.acct-toolbar>.chip-row{margin:0;flex:0 1 auto;}
.acct-search--inline{margin:0;margin-left:auto;flex:0 1 320px;min-width:200px;}
.acct-search--inline input{max-width:none;}
@media (max-width:760px){
  .acct-search--inline{flex:1 1 100%;margin-left:0;}
}

/* ======================= MINDSERV BILLING ================================ */

/* --- Status pills. Deliberately quieter than the generic badges: a billing
       grid is read in bulk, so state should register without shouting. ---- */
.bstat{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;
  font-size:11.5px;font-weight:650;white-space:nowrap;border:1px solid transparent;}
.bstat::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto;}
.bs--draft{background:#F1F3F7;color:#6B7690;border-color:#E2E6EE;}
.bs--sent{background:#EDEEFE;color:#4348C9;border-color:#D5D7FA;}
.bs--part{background:#FFF6E6;color:#9A6508;border-color:#F6DFAE;}
.bs--paid{background:#E9F7F0;color:#12805F;border-color:#BFE6D6;}
.bs--overdue{background:#FDECEF;color:#B8304A;border-color:#F7CBD4;}
.bs--void{background:#F4F4F6;color:#9AA0AE;border-color:#E6E8EE;text-decoration:line-through;}

/* Document numbers read as identifiers, so give them the mono treatment. */
.bnum{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600;color:var(--text);}
.bnext{font-size:12px;color:var(--text-muted);background:var(--bg);border:1px solid var(--line);
  padding:5px 10px;border-radius:8px;}
.bnext b{font-family:'JetBrains Mono',monospace;color:var(--text);}
.brow{cursor:pointer;}
.brow:hover{background:var(--bg);}

/* --- Document detail drawer -------------------------------------------- */
.bdrawer{display:flex;flex-direction:column;width:640px;max-width:100%;}
.bdoc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:20px 22px 16px;border-bottom:1px solid var(--line);flex:0 0 auto;}
.bdoc-title{font-size:18px;font-weight:700;color:var(--text);}
.bdoc-title .mono{font-family:'JetBrains Mono',monospace;}
.bdoc-sub{font-size:12.5px;color:var(--text-muted);margin-top:3px;}

/* Lifecycle stepper: where the document is, at a glance. */
.bstep{display:flex;gap:0;padding:12px 22px;border-bottom:1px solid var(--line);flex:0 0 auto;}
.bstep-i{flex:1;text-align:center;font-size:11px;font-weight:600;color:var(--text-faint);
  padding:6px 4px 0;border-top:3px solid var(--line);transition:.2s;}
.bstep-i.on{color:var(--teal-dark);border-top-color:var(--teal);}

.bdoc-body{flex:1 1 auto;overflow-y:auto;padding:18px 22px;}
.bdoc-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px;margin-bottom:18px;}
.bdoc-meta>div{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;
  padding-bottom:7px;border-bottom:1px solid var(--line);}
.bdoc-meta span{color:var(--text-muted);}

.bdoc-lines{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px;}
.bdoc-lines table{width:100%;border-collapse:collapse;font-size:12.5px;}
.bdoc-lines th{background:var(--bg);text-align:left;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:8px 10px;}
.bdoc-lines td{padding:9px 10px;border-top:1px solid var(--line);vertical-align:top;}
.bdoc-lines .muted{font-size:11px;}

/* Totals ladder — tabular figures so the column lines up like the PDF. */
.bdoc-totals,.btotals{margin-left:auto;max-width:300px;font-size:13px;}
.bdoc-totals>div,.btotals>div{display:flex;justify-content:space-between;gap:16px;padding:6px 0;}
.bdoc-totals span,.btotals span{color:var(--text-muted);}
.bdoc-totals b,.btotals b{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;}
.bdoc-totals .is-total,.btotals .is-total{border-top:1px solid var(--line);margin-top:4px;
  padding-top:9px;font-weight:700;font-size:14px;}
.bdoc-totals .is-total span,.btotals .is-total span{color:var(--text);font-weight:700;}
.bdoc-totals .is-paid b{color:var(--rose);}
.bdoc-totals .is-balance{background:var(--bg);border-radius:8px;padding:9px 12px;margin-top:8px;
  font-weight:700;font-size:14.5px;}
.bdoc-totals .is-balance span{color:var(--text);font-weight:700;}
.bdoc-words{margin-top:12px;text-align:right;font-size:12px;font-style:italic;font-weight:600;
  color:var(--text-muted);}

.bdoc-pays>div{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border:1px solid var(--line);border-radius:9px;margin-bottom:7px;font-size:12.5px;}
.bdoc-foot{display:flex;align-items:center;gap:8px;padding:14px 22px;
  border-top:1px solid var(--line);background:var(--surface);flex:0 0 auto;flex-wrap:wrap;}
.bdoc-foot svg{width:14px;height:14px;}
/* Delete stays a ghost button so it does not compete with the primary action,
   but reads as destructive on hover rather than looking like Cancel or Edit. */
.bdoc-foot .bdoc-del{color:var(--rose);}
.bdoc-foot .bdoc-del:hover{background:var(--rose);color:#fff;border-color:var(--rose);}

/* --- Builder ------------------------------------------------------------ */
.bline-wrap{border:1px solid var(--line);border-radius:10px;overflow-x:auto;}
.bline-table{min-width:760px;margin:0;}
.bline-table thead th{background:var(--bg);padding:8px 6px;}
.bline-table td{padding:5px 6px;}
.bbuild-foot{display:flex;gap:22px;align-items:flex-start;margin-top:14px;flex-wrap:wrap;}
.btotals{flex:0 0 280px;background:var(--bg);border:1px solid var(--line);
  border-radius:11px;padding:14px 16px;}
.bt-note{margin-top:10px;font-size:11px;color:var(--text-muted);line-height:1.5;
  border-top:1px dashed var(--line);padding-top:9px;}

/* --- Settings ----------------------------------------------------------- */
.bseq{border:1px solid var(--line);border-radius:11px;padding:13px 14px;margin-bottom:11px;}
.bseq-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;font-size:13px;}
.bseq-state{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;}
.bseq-state.is-on{background:#E9F7F0;color:#12805F;}
.bseq-state.is-off{background:#FDECEF;color:#B8304A;}
.bseq-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.bseq-row .field{margin:0;flex:1;min-width:88px;}
.bimp-log{background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;font-size:12.5px;line-height:1.5;}

@media (max-width:760px){
  .bdrawer{width:100%;}
  .bdoc-meta{grid-template-columns:1fr;}
  .bbuild-foot{flex-direction:column;}
  .btotals{flex:1 1 auto;width:100%;}
}

/* PDF renderer health check on the Billing settings screen. */
.bpdf-state{border:1px solid var(--line);background:var(--bg);border-radius:10px;
  padding:12px 14px;font-size:12.5px;line-height:1.55;}
.bpdf-state.is-on{background:#E9F7F0;border-color:#BFE6D6;color:#12805F;}
.bpdf-state.is-off{background:#FDECEF;border-color:#F7CBD4;color:#B8304A;}
.bpdf-state pre{margin:6px 0 0;white-space:pre-wrap;word-break:break-word;
  font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.5;}
.bpdf-state code{background:rgba(0,0,0,.05);border-radius:4px;padding:1px 5px;
  font-family:'JetBrains Mono',monospace;font-size:11px;}
.bpdf-state .muted{margin-top:5px;}

/* ============================ BILLING REPORTS ============================ */
.rep-wrap{display:grid;grid-template-columns:272px 1fr;gap:16px;align-items:start;}
.rep-side{padding:10px;max-height:calc(100vh - 160px);overflow-y:auto;position:sticky;top:16px;}
.rep-group+.rep-group{margin-top:12px;}
.rep-group-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-faint);padding:6px 8px 5px;}
.rep-item{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:9px;border:none;
  background:none;cursor:pointer;transition:.13s;margin-bottom:1px;}
.rep-item:hover{background:var(--bg);}
.rep-item.active{background:var(--navy-900);}
.rep-item-t{display:block;font-size:13px;font-weight:600;color:var(--text);}
.rep-item-b{display:block;font-size:11px;color:var(--text-muted);line-height:1.4;margin-top:2px;}
.rep-item.active .rep-item-t,.rep-item.active .rep-item-b{color:#fff;}
.rep-item.active .rep-item-b{opacity:.72;}

.rep-main{min-width:0;}
.rep-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:16px 18px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.rep-title{font-size:16.5px;font-weight:700;color:var(--text);}
.rep-sub{font-size:12.5px;color:var(--text-muted);margin-top:3px;}
.rep-actions{display:flex;gap:7px;flex-shrink:0;}
.rep-ctl{display:flex;gap:10px;align-items:center;padding:12px 18px;
  border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--bg);}

/* Report tables carry a lot of numbers, so tighten them and lock the header. */
.rep-table{max-height:calc(100vh - 340px);overflow:auto;}
.rep-table table{font-size:12.5px;}
.rep-table thead th{position:sticky;top:0;z-index:2;background:var(--surface);
  box-shadow:inset 0 -1px 0 var(--line);white-space:nowrap;}
.rep-table td,.rep-table th{padding:8px 12px;}
.rep-table td.mono{font-variant-numeric:tabular-nums;}
.rep-table tfoot td{position:sticky;bottom:0;background:var(--bg);font-weight:700;
  box-shadow:inset 0 1px 0 var(--line);white-space:nowrap;}
.rep-note{margin:12px 18px 0;padding:10px 12px;border-left:3px solid var(--amber);
  background:#FFFBF2;border-radius:0 8px 8px 0;font-size:12px;color:#7A5405;line-height:1.55;}
.rep-count{padding:10px 18px 14px;font-size:11.5px;color:var(--text-faint);}
.rep-fmt{display:flex;flex-direction:column;gap:8px;}
.rep-fmt label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;}
.rep-fmt .muted{font-size:11.5px;}

@media (max-width:980px){
  .rep-wrap{grid-template-columns:1fr;}
  .rep-side{position:static;max-height:none;}
}

/* --------------------- Billing branding uploads -------------------------- */
.basset-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:12px;}
.basset{display:flex;gap:12px;align-items:center;border:1px solid var(--line);
  border-radius:11px;padding:11px 12px;background:var(--surface);}
.basset-prev{width:66px;height:66px;flex:0 0 auto;border:1px dashed var(--line);
  border-radius:9px;background:var(--bg);display:flex;align-items:center;
  justify-content:center;overflow:hidden;}
.basset-prev img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.basset-empty{font-size:10.5px;color:var(--text-faint);text-align:center;padding:4px;}
.basset-meta{min-width:0;flex:1;}
.basset-label{font-size:13px;font-weight:600;color:var(--text);}
.basset-hint{font-size:11px;color:var(--text-muted);line-height:1.45;margin-top:2px;}
.basset-acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.basset-acts label{cursor:pointer;margin:0;}

/* ==========================================================================
   MINDSERV BILLING — design system
   --------------------------------------------------------------------------
   Everything here is scoped to `.bx`, which sits on the Billing pages, modals
   and drawer only. Sales and Accounts keep the original CRM styling, so the
   two can look different without either fighting the other.

   Type: DM Sans for UI, DM Mono for anything numeric or identifier-like.
   ========================================================================== */

.bx{
  --pr:#2563eb;  --prd:#1d4ed8; --prl:#dbeafe; --prl2:#eff6ff;
  --em:#059669;  --eml:#d1fae5;
  --am:#d97706;  --aml:#fef3c7;
  --ro:#dc2626;  --rol:#fee2e2;
  --vi:#7c3aed;  --vil:#ede9fe;
  --sl:#0891b2;  --sll:#cffafe;
  --bxbg:#f0f4f8; --bxcard:#fff; --bxbdr:#e2e8f0; --bxbdr2:#cbd5e1;
  --t1:#0f172a; --t2:#1e293b; --t3:#475569; --t4:#94a3b8; --t5:#cbd5e1;
  --sh1:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh2:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -1px rgba(0,0,0,.04);
  --rr:10px; --rs:6px; --rl:16px;
  font-family:'DM Sans',system-ui,sans-serif;
  color:var(--t1);
  -webkit-font-smoothing:antialiased;
}
/* DM Mono ships 300/400/500 only. The shared .bnum rule asks for 600 and the
   money cells wrap values in <b> (700), so the browser was synthesising both —
   the smeared faux-bold that made numbers look unlike the rest of the UI.
   Clamp every mono run to the heaviest weight the font actually has. */
.bx .mono,.bx .bnum,.bx .pay-amt,.bx .pay-num{font-family:'DM Mono',ui-monospace,monospace;
  font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.1px;}
.bx .mono b,.bx .mono strong,.bx b.bnum,.bx .bnum b,
.bx .pay-amt b,.bx .pay-num b{font-weight:500;}

/* ---- Page header ------------------------------------------------------- */
.bx .page-title{font-family:'DM Sans',sans-serif;font-size:21px;font-weight:800;
  color:var(--t1);letter-spacing:-.2px;}
.bx .page-sub{font-size:12px;color:var(--t4);margin-top:3px;}

/* ---- Cards ------------------------------------------------------------- */
.bx .card{background:var(--bxcard);border:1px solid var(--bxbdr);border-radius:var(--rr);
  box-shadow:var(--sh1);}
.bx .panel-head{padding:14px 18px;border-bottom:1px solid var(--bxbdr);}
.bx .panel-title{font-size:14px;font-weight:700;color:var(--t1);}
.bx .panel-title-sub{font-size:11px;color:var(--t4);margin-top:2px;}
.bx .section-label{font-size:12px;font-weight:700;color:var(--t3);text-transform:uppercase;
  letter-spacing:.5px;display:flex;align-items:center;gap:8px;margin:18px 0 13px;}
.bx .section-label::after{content:'';flex:1;height:1px;background:var(--bxbdr);}

/* ---- Stat / KPI cards -------------------------------------------------- */
.bx .kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;
  margin-bottom:22px;}
@media (max-width:1180px){ .bx .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:860px){  .bx .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:520px){  .bx .kpi-grid{grid-template-columns:minmax(0,1fr);} }
.bx .kpi-card{display:flex;align-items:flex-start;gap:13px;padding:18px;
  border-radius:var(--rr);border:1px solid var(--bxbdr);box-shadow:var(--sh1);
  transition:box-shadow .15s,transform .15s;}
.bx .kpi-card:hover{box-shadow:var(--sh2);transform:translateY(-1px);}
.bx .kpi-icon{width:44px;height:44px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;}
.bx .kpi-icon svg{width:21px;height:21px;}
.bx .kpi-text{min-width:0;}
.bx .kpi-label{font-size:11px;color:var(--t4);font-weight:600;margin-bottom:3px;}
.bx .kpi-value{font-size:21px!important;font-weight:800;color:var(--t1);line-height:1.2;
  font-family:'DM Sans',sans-serif;}
.bx .kpi-card .muted{font-size:11px!important;color:var(--t4);font-weight:600;}

/* ---- Stat row (payments page) ------------------------------------------ */
.bx .stat-box{background:var(--bxcard);border:1px solid var(--bxbdr);border-radius:var(--rr);
  box-shadow:var(--sh1);padding:16px 18px;}
.bx .stat-box .v{font-size:20px;font-weight:800;color:var(--t1);font-family:'DM Sans',sans-serif;}
.bx .stat-box .l{font-size:11px;color:var(--t4);font-weight:600;margin-top:3px;}
.bx .stat-sub{font-size:10.5px;color:var(--t4);margin-top:3px;font-weight:500;}

/* Six tiles will not fit on one flex line at laptop width, so the summary row
   wraps into a grid instead of squeezing — the page must never scroll sideways. */
.bx .stat-row--wrap{display:grid;gap:12px;margin-bottom:16px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.bx .stat-row--wrap>.stat-box{min-width:0;text-align:left;padding:13px 15px;}
/* Colour the figure, not the whole tile: an amber or red block reads as an
   alert, when these are only two of six ordinary numbers. */
.bx .stat-box--amber .v{color:var(--am);}
.bx .stat-box--rose .v{color:var(--ro);}

/* A field hint that is reporting a problem rather than explaining a field. */
.bx .hint--bad{color:var(--ro);font-weight:600;}

/* A quiet explanatory line under a page head, for a page whose purpose is not
   obvious from its title alone. Informational, so not styled as a warning. */
.bx .acct-note{font-size:12px;color:var(--t3);background:var(--prl2);
  border:1px solid var(--bxbdr);border-left:3px solid var(--pr);
  border-radius:var(--rs);padding:9px 13px;margin-bottom:14px;line-height:1.55;}

/* ---- Toolbar: search, then filters, then Clear, all on one line --------- */
/* Search leads the row and takes the slack, but it is capped: with grow and no
   max-width it stretched the full width and shouldered everything after it off
   the screen. Everything else keeps its content width and shrinks rather than
   wrapping, so the whole row stays visible. */
.bx .acct-toolbar{gap:8px;}
.bx .acct-toolbar>.acct-search--inline{flex:1 1 180px;min-width:140px;max-width:300px;margin:0;}
.bx .acct-search--inline input{width:100%;max-width:none;}
.bx .acct-toolbar>.acct-filter{flex:0 1 auto;min-width:0;}
.bx .acct-toolbar>.btn{flex:0 0 auto;}
.bx .acct-toolbar>.date-range{flex:0 1 auto;min-width:0;}
/* Disabled Clear keeps its place in the row instead of vanishing and resizing
   everything, so the controls never move under the cursor. */
.bx .acct-toolbar>.btn:disabled{opacity:.45;cursor:default;}
.bx .acct-toolbar>.btn:disabled:hover{border-color:var(--bxbdr2);color:var(--t2);
  background:#fff;transform:none;box-shadow:none;}

/* ---- Date range -------------------------------------------------------- */
/* Native date inputs carry a picker icon and reserve room for dd-mm-yyyy, so
   they need a real floor; below it the text clips. */
.bx .date-range{display:flex;align-items:center;gap:6px;min-width:0;}
.bx .date-range input{flex:0 1 128px;min-width:112px;padding-left:9px;padding-right:7px;}
.bx .date-range-sep{font-size:12px;color:var(--t4);font-weight:600;flex:0 0 auto;}
/* Below this the row genuinely cannot hold everything, so it wraps on purpose
   rather than overflowing — the page must never scroll sideways. Search keeps
   its place first, now on a line of its own with the filters beneath. */
@media(max-width:1100px){
  .bx .acct-toolbar>.acct-search--inline{flex:1 1 100%;max-width:none;}
}
@media(max-width:600px){
  .bx .acct-toolbar>.date-range{flex:1 1 100%;}
  .bx .date-range input{flex:1 1 0;}
}

/* ---- Buttons ----------------------------------------------------------- */
.bx .btn{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;border-radius:var(--rs);
  padding:8px 15px;transition:all .15s;}
.bx .btn-primary,.bx .btn-teal{background:var(--pr);color:#fff;border:none;}
.bx .btn-primary:hover,.bx .btn-teal:hover{background:var(--prd);
  box-shadow:0 4px 12px rgba(37,99,235,.3);transform:translateY(-1px);}
.bx .btn-ghost{background:#fff;color:var(--t2);border:1.5px solid var(--bxbdr2);}
.bx .btn-ghost:hover{border-color:var(--pr);color:var(--pr);background:var(--prl2);}
.bx .btn-sm{padding:5px 10px;font-size:12px;}

/* ---- Forms ------------------------------------------------------------- */
.bx .field label{font-size:12px;font-weight:600;color:var(--t2);}
.bx .field .req{color:var(--ro);}
.bx .field input,.bx .field select,.bx .field textarea,
.bx .acct-filter,.bx .acct-search input{
  font-family:'DM Sans',sans-serif;font-size:13px;padding:8px 11px;
  border:1.5px solid var(--bxbdr);border-radius:var(--rs);background:#fff;color:var(--t1);
  transition:border-color .15s,box-shadow .15s;}
.bx .field input:focus,.bx .field select:focus,.bx .field textarea:focus,
.bx .acct-filter:focus,.bx .acct-search input:focus{
  border-color:var(--pr);box-shadow:0 0 0 3px rgba(37,99,235,.1);outline:none;}
.bx .field input::placeholder,.bx .field textarea::placeholder{color:var(--t5);}
.bx .muted{color:var(--t4);}

/* ---- Tables ------------------------------------------------------------ */
.bx table{font-family:'DM Sans',sans-serif;font-size:13px;}
.bx thead th{padding:9px 13px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--t4);background:#f8fafc;border-bottom:1px solid var(--bxbdr);}
.bx tbody td{padding:11px 13px;border-bottom:1px solid var(--bxbdr);color:var(--t2);}
.bx tbody tr:last-child td{border-bottom:none;}
.bx tbody tr:hover td{background:#fafbfc;}
.bx .brow:hover td{background:var(--prl2);}
.bx .name-cell .n{font-weight:600;color:var(--t1);}
.bx .name-cell .c{font-size:11px;color:var(--t4);}
.bx .link-btn{color:var(--pr);font-weight:600;}

/* ---- Status pills ------------------------------------------------------ */
.bx .bstat{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;border:none;}
.bx .bstat::before{width:5px;height:5px;}
.bx .bs--draft{background:#f1f5f9;color:var(--t4);}
.bx .bs--sent{background:var(--prl);color:#1e40af;}
.bx .bs--part{background:var(--aml);color:#92400e;}
.bx .bs--paid{background:var(--eml);color:#065f46;}
.bx .bs--overdue{background:var(--rol);color:#991b1b;}
.bx .bs--void{background:#f1f5f9;color:var(--t4);}

/* ---- Row action buttons ------------------------------------------------ */
.bx .acct-act{border-radius:var(--rs);border:1.5px solid var(--bxbdr2);color:var(--t3);}
.bx .acct-act:hover{border-color:var(--pr);color:var(--pr);background:var(--prl2);}
.bx .acct-act--send{background:var(--pr);border-color:var(--pr);color:#fff;}
.bx .acct-act--send:hover{background:var(--prd);border-color:var(--prd);color:#fff;}
.bx .acct-sent{font-size:10.5px;color:var(--t4);}

/* ---- Line-item editor: borderless until you touch it ------------------- */
.bx .bline-wrap{border:1px solid var(--bxbdr);border-radius:var(--rr);}
.bx .acct-lines th{background:#f1f5f9;padding:9px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;color:var(--t4);}
.bx .acct-lines td{padding:5px;border-top:1px solid var(--bxbdr);}
.bx .acct-lines input{border:1.5px solid transparent;background:transparent;padding:6px 8px;
  font-size:12px;border-radius:5px;}
.bx .acct-lines input:hover{border-color:var(--bxbdr);}
.bx .acct-lines input:focus{border-color:var(--pr);background:#fff;
  box-shadow:0 0 0 2px rgba(37,99,235,.1);}
.bx .li-amt{font-family:'DM Mono',monospace;font-weight:700;color:var(--t1);font-size:13px;}

/* ---- Totals ------------------------------------------------------------ */
.bx .btotals,.bx .bdoc-totals{border:1px solid var(--bxbdr);border-radius:var(--rr);
  overflow:hidden;background:#fff;padding:0;}
.bx .btotals>div,.bx .bdoc-totals>div{padding:8px 14px;border-bottom:1px solid var(--bxbdr);
  font-size:13px;margin:0;}
.bx .btotals>div:last-child,.bx .bdoc-totals>div:last-child{border-bottom:none;}
.bx .btotals span,.bx .bdoc-totals span{color:var(--t3);font-size:12px;}
.bx .btotals b,.bx .bdoc-totals b{font-family:'DM Mono',monospace;font-weight:600;font-size:13px;}
.bx .btotals .is-total,.bx .bdoc-totals .is-total{background:#f8fafc;font-weight:800;
  font-size:15px;padding:10px 14px;border-top:none;margin-top:0;}
.bx .btotals .is-total span,.bx .bdoc-totals .is-total span{color:var(--t1);font-size:13px;}
.bx .bdoc-totals .is-balance{background:var(--prl2);border-radius:0;margin:0;padding:11px 14px;}
.bx .bdoc-totals .is-balance b{color:var(--prd);font-size:15px;}
.bx .bdoc-totals .is-paid b{color:var(--ro);}
.bx .bt-note{padding:9px 14px;background:#f8fafc;border-top:1px dashed var(--bxbdr);
  font-size:11px;color:var(--t4);margin:0;}
.bx .bdoc-words{background:#fffbeb;border:1px solid #fde68a;border-radius:var(--rs);
  padding:9px 13px;font-size:11.5px;color:#92400e;font-style:italic;font-weight:500;
  text-align:left;margin-top:13px;}

/* ---- Document drawer --------------------------------------------------- */
.bx.bdrawer{font-family:'DM Sans',sans-serif;}
.bx .bdoc-title{font-size:18px;font-weight:800;letter-spacing:-.2px;}
.bx .bdoc-sub{font-size:12px;color:var(--t4);}
.bx .bstep-i{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  border-top-width:3px;}
.bx .bstep-i.on{color:var(--pr);border-top-color:var(--pr);}
.bx .bdoc-meta>div{font-size:12.5px;border-bottom:1px solid var(--bxbdr);}
.bx .bdoc-meta span{color:var(--t4);}
.bx .bdoc-lines{border-radius:var(--rr);border-color:var(--bxbdr);}
.bx .bdoc-lines th{background:#f8fafc;}

/* ---- Alerts / empty states --------------------------------------------- */
.bx .acct-warn{background:var(--prl2);color:#1e40af;border:1px solid #bfdbfe;
  border-radius:var(--rs);padding:11px 14px;font-size:12px;font-weight:500;}
.bx .empty{padding:48px 20px;text-align:center;color:var(--t4);font-size:12.5px;}
.bx .rep-note{border-left:3px solid var(--am);background:#fffbeb;color:#92400e;}

/* ---- Reports ----------------------------------------------------------- */
.bx .rep-item.active{background:#0d1520;}
.bx .rep-item-t{font-size:12.5px;font-weight:600;}
.bx .rep-group-label{color:var(--t4);letter-spacing:.8px;}
.bx .rep-title{font-size:16px;font-weight:800;}
.bx .rep-ctl{background:#f8fafc;border-bottom-color:var(--bxbdr);}
.bx .rep-table thead th{background:#f8fafc;}

/* ---- Settings ---------------------------------------------------------- */
.bx .bseq{border-radius:var(--rr);border-color:var(--bxbdr);}
.bx .bseq-state.is-on{background:var(--eml);color:#065f46;}
.bx .bseq-state.is-off{background:var(--rol);color:#991b1b;}
.bx .basset{border-radius:var(--rr);border-color:var(--bxbdr);}
.bx .basset-prev{border-radius:var(--rs);border-color:var(--bxbdr2);}
.bx .bimp-log,.bx .bpdf-state{border-radius:var(--rs);border-color:var(--bxbdr);
  background:#f8fafc;font-size:12.5px;}

/* ---- Payment mode chips ------------------------------------------------ */
.bx .pay-mode{border-radius:20px;font-weight:600;border:none;}
.bx .pm--cash{background:var(--eml);color:#065f46;}
.bx .pm--upi{background:var(--vil);color:#5b21b6;}
.bx .pm--bank{background:var(--prl);color:#1e40af;}
.bx .pm--cheque{background:var(--aml);color:#92400e;}
.bx .pm--card{background:var(--rol);color:#991b1b;}
.bx .pm--other{background:#f1f5f9;color:var(--t4);}
.bx .pay-amt{color:var(--em);}

/* ---- Modals ------------------------------------------------------------ */
.bx .modal{border-radius:var(--rl);}
.bx .modal-head h3{font-size:16px;font-weight:800;font-family:'DM Sans',sans-serif;}
.bx .modal-head,.bx .modal-foot{border-color:var(--bxbdr);}
.bx .acct-att{border-radius:var(--rs);background:var(--prl2);border-color:#bfdbfe;color:#1e40af;}

/* ------------------- Billing dashboard (reference layout) ---------------- */
.bx .bx-split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start;}
.bx .bx-main{display:flex;flex-direction:column;gap:18px;min-width:0;}
.bx .bx-side{display:flex;flex-direction:column;gap:14px;}
.bx .bx-side .panel-head{padding:12px 16px;}

/* Quick-action tiles: dashed until hovered, then they fill with the accent. */
.bx .qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px;}
.bx .qa{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:18px 10px;border:1.5px dashed var(--bxbdr);border-radius:var(--rr);cursor:pointer;
  transition:all .15s;text-align:center;background:#fff;}
.bx .qa:hover{border-color:var(--pr);background:var(--prl2);}
.bx .qa:hover .qa-ic{background:var(--pr);color:#fff!important;}
.bx .qa:hover .qa-lb{color:var(--pr);}
.bx .qa-ic{width:40px;height:40px;border-radius:11px;background:var(--bxbg);display:flex;
  align-items:center;justify-content:center;transition:all .15s;}
.bx .qa-ic svg{width:19px;height:19px;}
.bx .qa-lb{font-size:12.5px;font-weight:700;color:var(--t2);transition:color .15s;}
.bx .qa-sb{font-size:10.5px;color:var(--t4);}

/* GST summary rows */
.bx .gst-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;
  border-bottom:1px solid var(--bxbdr);font-size:12.5px;color:var(--t3);}
.bx .gst-row b{font-family:'DM Mono',monospace;font-weight:600;color:var(--t1);}
.bx .gst-row.is-total{border-bottom:none;background:var(--prl2);border-radius:var(--rs);
  padding:10px 12px;margin-top:8px;font-weight:700;color:var(--t1);}
.bx .gst-row.is-total b{color:var(--prd);font-weight:800;}

/* Compact overdue rows in the sidebar column */
.bx .od-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--bxbdr);font-size:12.5px;}
.bx .od-row:last-child{border-bottom:none;}
.bx .od-row .muted{font-size:11px;}

@media (max-width:1080px){
  .bx .bx-split{grid-template-columns:1fr;}
  .bx .bx-side{flex-direction:row;flex-wrap:wrap;}
  .bx .bx-side>.card{flex:1 1 300px;}
}

/* ------------- Sidebar, while the Billing workspace is open -------------- */
/* Scoped to .bx-sb, which crm.js puts on #sidebar only in Billing, so Sales
   and Accounts keep the CRM's own teal-accented sidebar. */
.sidebar.bx-sb{background:#0d1520;}
.sidebar.bx-sb .sb-nav{font-family:'DM Sans',system-ui,sans-serif;}
.sidebar.bx-sb .sb-section-label{color:#3a546e;font-size:10px;letter-spacing:1px;}
.sidebar.bx-sb .sb-item{color:#7a9bbf;font-size:13px;font-weight:500;border-radius:8px;}
.sidebar.bx-sb .sb-item:hover{background:#1a2d42;color:#c8daf0;}
.sidebar.bx-sb .sb-item.active{background:#2563eb;color:#fff;
  box-shadow:0 4px 12px rgba(37,99,235,.35);}
/* The reference marks the active item with a filled pill, not an edge bar. */
.sidebar.bx-sb .sb-item.active::before{display:none;}
.sidebar.bx-sb .sb-badge{background:rgba(255,255,255,.15);}
.sidebar.bx-sb .sb-item.active .sb-badge{background:rgba(255,255,255,.25);}
.sidebar.bx-sb .sb-profile:hover{background:#1a2d42;}
.sidebar.bx-sb .sb-avatar{background:linear-gradient(135deg,#2563eb,#7c3aed);border-radius:8px;}
.sidebar.bx-sb .sb-user-role{color:#4a6080;}

/* ------------ Billing dashboard: never scroll sideways ------------------- */
/* A summary you have to scroll horizontally is not a summary. Grid tracks get
   an explicit 0 minimum (the default `auto` lets content force them wider than
   their share), every card is allowed to shrink, and the recent-invoice table
   is laid out to fit with the customer name truncating instead of pushing. */
.bx .bx-split{grid-template-columns:minmax(0,1fr) minmax(0,320px);}
.bx .bx-main>.card,.bx .bx-side>.card{min-width:0;}
.bx .kpi-card{min-width:0;}
.bx .kpi-text{min-width:0;overflow:hidden;}
.bx .kpi-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bx .chart-box canvas{max-width:100%!important;}

.bx .bx-fit{width:100%;}
.bx .bx-fit table{width:100%;table-layout:fixed;}
.bx .bx-fit th,.bx .bx-fit td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Invoice · Customer · Date · Amount · Status */
.bx .bx-fit th:nth-child(1){width:22%;}
.bx .bx-fit th:nth-child(2){width:32%;}
.bx .bx-fit th:nth-child(3){width:16%;}
.bx .bx-fit th:nth-child(4){width:16%;}
.bx .bx-fit th:nth-child(5){width:14%;}

@media (max-width:1240px){
  /* Below this the fixed side column starts squeezing the charts, so stack. */
  .bx .bx-split{grid-template-columns:minmax(0,1fr);}
  .bx .bx-side{flex-direction:row;flex-wrap:wrap;}
  .bx .bx-side>.card{flex:1 1 280px;min-width:0;}
}
@media (max-width:620px){
  .bx .qa-grid{grid-template-columns:1fr;}
  .bx .bx-fit th:nth-child(3),.bx .bx-fit td:nth-child(3){display:none;}
  .bx .bx-fit th:nth-child(1){width:30%;}
  .bx .bx-fit th:nth-child(2){width:36%;}
  .bx .bx-fit th:nth-child(4){width:20%;}
  .bx .bx-fit th:nth-child(5){width:14%;}
}

/* --------- Billing stat tiles: correct the base CRM's KPI rules ----------
   Two base rules fight the reference design and must be undone explicitly:

   1. `.kpi-icon` is `position:absolute` — a small 30px badge floating in the
      card's top-right corner. That is why the icon sat apart from the text
      instead of beside it. It has to rejoin the flex flow.

   2. `.kpi-icon svg{color:#fff}` forces the glyph white. The reference puts a
      SOLID coloured icon on a PALE tinted tile, so a white glyph on #dbeafe is
      almost invisible — the "dull" look. The svg must inherit the tile's
      colour, which the inline style sets per card.
   ---------------------------------------------------------------------- */
.bx .kpi-card{padding:18px;overflow:visible;align-items:flex-start;}
.bx .kpi-icon{position:static;right:auto;top:auto;width:44px;height:44px;
  border-radius:12px;flex-shrink:0;}
.bx .kpi-icon svg{width:21px;height:21px;color:inherit;opacity:1;stroke-width:2;}
.bx .kpi-label{text-transform:none;letter-spacing:0;font-size:11px;font-weight:600;
  color:var(--t4);margin-bottom:3px;}
.bx .kpi-value{font-family:'DM Sans',system-ui,sans-serif;font-size:21px;font-weight:800;
  color:var(--t1);line-height:1.2;margin-top:0;}
.bx .kpi-card .muted{font-size:11px;font-weight:600;color:var(--t4);margin-top:3px;}

/* Two charts sharing a row inside the Billing dashboard's main column.
   minmax(0,…) on both tracks so a wide chart cannot push the row out. */
.bx .bx-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;
  align-items:start;}
.bx .bx-pair>.card{min-width:0;}
@media (max-width:1400px){
  /* With the 320px side column taking space, two charts side by side get
     cramped before the page itself does — stack them earlier. */
  .bx .bx-pair{grid-template-columns:minmax(0,1fr);}
}

/* Right-hand column of the paired row: Billing by customer with Recent
   Invoices stacked beneath it, sharing that column's left edge. */
/* The ageing chart is alone on the left, so let it sit at its natural height
   rather than stretching to match the taller stack opposite. */
.bx .bx-pair{align-items:start;}