/* ===== Renomate CRM — 365CRM-faithful UI ===== */
:root{
  --indigo:#4f46e5; --indigo-d:#4338ca; --header:#443ea8; --navy:#2c2a63;
  --pink:#ec4899; --purple:#7c3aed;
  --txt:#1f2433; --muted:#6b7280; --line:#e6e8f0; --bg:#f4f5fb; --surface:#fff;
  --red:#e02424; --red-bg:#fde8e8; --green:#0e9f6e; --green-bg:#def7ec;
  --chip:#fdecef; --chip-tx:#b4356a;
  --radius:12px; --shadow:0 10px 30px rgba(27,24,80,.10);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--txt);background:var(--bg);font-size:14px}
a{color:var(--indigo);text-decoration:none}
button{font-family:inherit;cursor:pointer}
.hide{display:none!important}

/* ================= LOGIN ================= */
#login{position:fixed;inset:0;display:grid;grid-template-columns:1fr 1fr;z-index:200;background:#fff}
@media(max-width:860px){#login{grid-template-columns:1fr}.login-art{display:none}}
.login-art{position:relative;background:radial-gradient(1200px 600px at 30% 40%,#efeafe,#e7e3fb 40%,#efecfd);overflow:hidden}
.orbit-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 18px 50px rgba(90,70,200,.25)}
.orbit-center .mk{width:70px;height:70px;border-radius:18px;background:linear-gradient(135deg,#3b82f6,#7c3aed 55%,#ec4899);display:grid;place-items:center;color:#fff;font-weight:800;font-size:26px}
.orbit-ic{position:absolute;transform:translate(-50%,-50%);width:120px;text-align:center}
.orbit-ic .b{width:54px;height:54px;border-radius:50%;background:#fff;display:grid;place-items:center;margin:0 auto 6px;box-shadow:0 8px 20px rgba(80,60,170,.14);font-size:22px}
.orbit-ic .l{font-size:12px;color:#4b4668;font-weight:600}
.login-form{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:30px}
.login-box{width:min(380px,90%)}
.login-box .brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:12px}
.login-box .brand .mk{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#3b82f6,#7c3aed 55%,#ec4899);display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px}
.login-box .brand .w{font-weight:800;font-size:22px}
.login-box .brand .w .g{background:linear-gradient(90deg,#3b82f6,#7c3aed,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-box h2{text-align:center;margin:4px 0 22px;font-size:20px}
.login-box label{display:block;font-weight:600;margin:14px 0 6px;font-size:13px}
.login-box label .req{color:#e02424}
.login-box .ipt{position:relative}
.login-box input{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 40px 12px 13px;font:inherit}
.login-box .eye{position:absolute;right:12px;top:12px;color:#8b90a6;cursor:pointer}
.login-box .li-err{display:none;margin-top:10px;background:#fdecef;color:#c81e3a;border:1px solid #f5c2cc;border-radius:8px;padding:9px 12px;font-size:13px;font-weight:600}
.login-box .li-err.show{display:block}
.login-box .signin.busy{opacity:.75;pointer-events:none}
.login-box .forgot{text-align:right;margin-top:8px}
.login-box .signin{width:100%;margin-top:18px;background:var(--indigo);color:#fff;border:0;border-radius:10px;padding:13px;font-weight:700;font-size:15px}
.login-box .signin:hover{background:var(--indigo-d)}
.login-box .alt{text-align:center;color:var(--muted);margin-top:16px}
.login-box .join{width:100%;margin-top:14px;background:var(--indigo);color:#fff;border:0;border-radius:10px;padding:12px;font-weight:700;opacity:.92}
.login-box .li-hint{text-align:center;color:#8b90a6;font-size:12.5px;margin-top:12px}
.sa-brandbox{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);text-align:center}
.sa-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.sa-brand .sa-logo{width:24px;height:24px;border-radius:7px;flex:0 0 auto}
.sa-brand .sa-name{font-weight:800;font-size:16px;color:#1a1f36;letter-spacing:-.2px}
.sa-brand .sa-name b{color:#ff5b2e;font-weight:800}
.sa-tag{margin-top:4px;color:#8b90a6;font-size:11.5px;font-weight:500}

/* ================= APP SHELL ================= */
#app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;padding:18px 20px 10px}
.brand .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#3b82f6,#7c3aed 55%,#ec4899);display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px;box-shadow:0 4px 10px rgba(124,58,237,.35)}
.brand .word{font-weight:800;font-size:19px}
.brand .word .g{background:linear-gradient(90deg,#3b82f6,#7c3aed,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .word .n{color:#2b2f45}
.nav-sec{padding:8px 12px 2px;color:#9aa0b4;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.nav{padding:4px 12px 10px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:#4b5168;font-weight:600;margin:2px 0}
.nav a .ic{width:20px;text-align:center;opacity:.9}
.nav a:hover{background:#f3f2fb}
.nav a.active{background:linear-gradient(90deg,var(--pink),var(--purple));color:#fff;box-shadow:0 6px 16px rgba(124,58,237,.3)}
.side-foot{margin-top:auto;padding:16px 20px;font-size:12px;color:#e05a00;font-weight:700}
.side-foot small{display:block;color:#9aa0b4;font-weight:500}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:6px;background:#fff;border-bottom:1px solid var(--line);padding:8px 18px;position:sticky;top:0;z-index:20}
.qa{display:flex;align-items:center;gap:4px}
.qchip{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:9px;color:#4b5168;font-weight:600;font-size:13px}
.qchip .qi{font-size:14px}
.qchip:hover{background:#f3f2fb}
.topbar .spacer{flex:1}
.topbar .tool{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#5b6176}
.topbar .tool:hover{background:#f3f2fb}
.bell{position:relative}
.bell .cnt{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;border-radius:999px;font-size:10px;font-weight:700;padding:1px 5px}
.who{display:flex;align-items:center;gap:10px;padding-left:8px}
.side-acct{display:none;align-items:center;gap:10px;margin:6px 14px 2px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.side-acct .sa-av{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;display:grid;place-items:center;font-weight:700;flex:0 0 auto}
.side-acct .sa-nm{font-weight:700;line-height:1.15;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-acct .sa-nm small{display:block;color:var(--muted);font-weight:600;font-size:11px}
.side-acct .sa-btn{border:1px solid var(--line);background:#fff;border-radius:9px;width:38px;height:38px;cursor:pointer;color:#6b7280;font-size:16px;flex:0 0 auto}
.side-acct .sa-btn:active{background:#f3f4f6}
.who .nm{font-weight:700;line-height:1.1;text-align:right}
.who .nm small{display:block;color:var(--muted);font-weight:500}
.who .av{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;display:grid;place-items:center;font-weight:700}

.view{padding:18px}
.page-head{display:flex;align-items:center;gap:10px;margin:2px 4px 14px}
.page-head h1{font-size:22px;margin:0;font-weight:800}
.page-head .spacer{flex:1}
/* On desktop the action group is transparent to layout (buttons flow in the page-head row);
   on phones it becomes one compact horizontally-scrolling toolbar row (see media query). */
.page-head .ph-actions{display:contents}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;color:#374151;border-radius:10px;padding:9px 13px;font-weight:600;font-size:13px}
.btn:hover{background:#f6f7fb}
.btn.primary{background:var(--indigo);border-color:var(--indigo);color:#fff}
.btn.primary:hover{background:var(--indigo-d)}
.btn.ghost{color:#4b5168}
.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:#5b6176}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:0;background:#fff;color:#5b6176;padding:8px 11px;font-size:15px}
.seg button.on{background:var(--indigo);color:#fff}

/* ================= BOARD (funnel) ================= */
.board{display:flex;gap:16px;overflow-x:auto;padding:4px 4px 16px;align-items:flex-start}
.col{flex:0 0 330px;max-width:330px}
.col-head{display:flex;align-items:center;gap:10px;color:#fff;border-radius:10px 10px 0 0;padding:12px 14px;font-weight:700}
.col-head .nm{font-size:16px}
.col-head .sep{opacity:.5}
.col-head .amt{font-weight:600;opacity:.95;font-size:13px}
.col-head .cnt{margin-left:auto;background:#fff;border-radius:8px;padding:2px 10px;font-weight:800;font-size:13px}
.col-body{background:#eef0f7;border-radius:0 0 10px 10px;padding:12px;max-height:72vh;overflow:auto;display:flex;flex-direction:column;gap:12px}
.lead-card{background:#fff;border-radius:12px;box-shadow:0 4px 14px rgba(30,25,90,.07);padding:14px;cursor:pointer;border:1px solid #eef0f6}
.lead-card:hover{box-shadow:0 8px 22px rgba(30,25,90,.13)}
/* Projects board cards */
.proj-card .pc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px}
.proj-card .pc-bal{font-size:11px;font-weight:700;color:#b91c1c;background:#fee2e2;border-radius:999px;padding:2px 8px}
.proj-card .pc-paid{font-size:11px;font-weight:700;color:#166534;background:#dcfce7;border-radius:999px;padding:2px 8px}
.proj-card .pc-cust{margin-top:6px;font-weight:600;color:#374151;font-size:13.5px}
.proj-card .pc-title{margin-top:3px;color:#6b7280;font-size:12.5px}
.proj-card .pc-meta{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:#6b7280}
.proj-card .pc-meta .ac-over{color:#dc2626;font-weight:700}
/* Project detail modal */
.pd-bal{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:13.5px;color:#374151}
.pd-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.pd-update{display:flex;gap:8px;align-items:flex-start;margin:6px 0 14px}
.pd-update textarea{flex:1;min-height:44px;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit;resize:vertical}
.pd-update textarea:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(79,70,229,.08)}
.pd-timeline{border-top:1px solid var(--line);padding-top:10px}
.pd-th{font-weight:700;color:#6b7280;font-size:12.5px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.3px}
.board-card{padding:0;background:transparent;box-shadow:none;border:none}
.page-head .searchbox{flex:0 1 260px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit}
.lc-name{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.lc-name .pi{color:#16a34a}
.lc-phone{display:flex;align-items:center;gap:8px;color:#374151;margin-top:7px}
.lc-phone .pi{color:#16a34a}
/* tap-to-call links (card / list / detail) */
a.call{color:#0a7d33;text-decoration:none;font-weight:700;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
a.call:hover{text-decoration:underline}
a.call .call-go{display:none}
.lc-phone a.call{color:#0a7d33}
.lc-chip{display:inline-block;background:var(--chip);color:var(--chip-tx);border-radius:7px;padding:4px 11px;font-size:12px;font-weight:600;margin-top:10px}
.lc-meta{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.lc-row{display:grid;grid-template-columns:20px 42px 1fr;align-items:center;gap:8px;font-size:13px}
.lc-row .ic{color:#8b90a6}
.lc-row .k{color:#6b7280;font-weight:700}
.lc-row .v{color:#374151}
.lc-row.overdue .v{color:var(--red);font-weight:700}
.lc-bottom{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:10px;margin-top:12px;overflow:hidden}
.lc-bottom .cell{padding:8px 12px}
.lc-bottom .cell+.cell{border-left:1px solid var(--line)}
.lc-bottom .k{color:#6b7280;font-size:12px;font-weight:700}
.lc-stars{color:#f59e0b;letter-spacing:1px;margin-top:3px}
.lc-amt{color:#374151;font-weight:600;margin-top:3px}
.lc-acts{display:flex;align-items:center;gap:9px;color:#9aa0b4;margin-top:12px;font-size:14px;position:relative}
.lc-acts .fub{margin-left:auto;background:var(--red);color:#fff;border-radius:999px;min-width:18px;height:18px;display:grid;place-items:center;font-size:11px;font-weight:700;padding:0 4px}
.lc-acts .kebab{color:#9aa0b4}
.badge-overdue{background:#fde8e8;color:var(--red);font-size:11px;font-weight:700;border-radius:6px;padding:2px 7px;margin-left:6px}
.col-more{text-align:center;color:var(--indigo);font-weight:600;padding:6px;cursor:pointer}

/* ================= LIST ================= */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.tbl-wrap{overflow:auto}
table.leads{width:100%;border-collapse:collapse;min-width:1050px}
table.leads thead th{background:var(--navy);color:#fff;font-weight:600;font-size:13px;text-align:left;padding:13px 14px;white-space:nowrap;position:sticky;top:0}
table.leads thead th:first-child{width:38px}
table.leads tbody td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
table.leads tbody tr:nth-child(even){background:#faf9ff}
table.leads tbody tr:hover{background:#f1efff}
.no-cell{display:flex;align-items:center;gap:8px;font-weight:600}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.actions-cell{position:relative;min-width:230px}
.act-row{display:flex;align-items:center;gap:7px;color:#8b90a6;font-size:14px}
.fu-badge{position:absolute;top:2px;right:8px;background:var(--red);color:#fff;border-radius:999px;min-width:18px;height:18px;display:grid;place-items:center;font-size:11px;font-weight:700;padding:0 4px}
.cust{color:var(--indigo);font-weight:600;cursor:pointer}
.cust:hover{text-decoration:underline}
.chip-sm{display:inline-block;background:var(--chip);color:var(--chip-tx);border-radius:7px;padding:2px 9px;font-size:12px;font-weight:600}
.muted{color:var(--muted)}
.pager{display:flex;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.pager .rpp{display:flex;align-items:center;gap:8px;color:var(--muted)}
.pager .spacer{flex:1}
.pager select,.pager input{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit}
.pager input.pg{width:56px;text-align:center}
.pg-btn{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#5b6176;display:grid;place-items:center}
.pg-btn:disabled{opacity:.4}

/* ================= FILTER DRAWER ================= */
.drawer-bg{position:fixed;inset:0;background:rgba(17,16,53,.25);z-index:1250;display:none}
.drawer-bg.show{display:block}
.drawer{position:fixed;top:0;right:0;height:100vh;width:360px;background:#fff;z-index:51;transform:translateX(100%);transition:.22s;box-shadow:-10px 0 40px rgba(20,18,60,.18);display:flex;flex-direction:column;z-index:1260}
.drawer.show{transform:translateX(0)}
.drawer .d-head{display:flex;gap:18px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.drawer .d-head b{font-size:13px;letter-spacing:.3px}
.drawer .d-head .x{margin-left:auto;cursor:pointer;color:#8b90a6}
.drawer .d-body{padding:18px;overflow:auto;flex:1}
.fld{margin-bottom:16px}
.fld label{display:block;font-weight:700;font-size:13px;margin-bottom:6px}
.fld select,.fld input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit}
.fld-row{display:flex;align-items:center;gap:8px}
.fld-row input{flex:1;min-width:0}
.fld-sep{color:#8b90a6;font-size:12px;font-weight:600}
.dup-ov{position:fixed;inset:0;background:rgba(17,16,53,.45);z-index:1400;display:flex;align-items:center;justify-content:center;padding:20px}
.dup-card{background:#fff;border-radius:16px;box-shadow:0 30px 80px rgba(10,8,40,.5);width:min(420px,94vw);padding:28px 26px;text-align:center}
.dup-ic{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:#eef1ff;display:flex;align-items:center;justify-content:center;font-size:30px;border:4px solid #e0e4ff}
.dup-msg{font-weight:700;font-size:18px;color:#1f2430;line-height:1.35;margin-bottom:6px}
.dup-sub{font-size:13px;color:#6b7280;margin-bottom:20px}
.dup-btns{display:flex;gap:12px;justify-content:center}
.dup-btns .btn{min-width:130px;justify-content:center}
.drawer .d-foot{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:10px}

/* ================= LEAD MODAL ================= */
.modal-bg{position:fixed;inset:0;background:rgba(17,16,53,.45);z-index:1300;display:none;align-items:flex-start;justify-content:center;padding:28px 16px;overflow:auto}
.modal-bg.show{display:flex}
.modal{width:min(1320px,96vw);background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(10,8,40,.5)}
.m-head{background:var(--header);color:#fff;display:flex;align-items:center;padding:14px 20px}
.m-head h3{margin:0;font-size:17px;font-weight:600}
.m-head .x{margin-left:auto;width:30px;height:30px;border-radius:7px;display:grid;place-items:center;cursor:pointer}
.m-head .x:hover{background:rgba(255,255,255,.15)}
.m-tools{display:flex;align-items:center;gap:14px;padding:14px 20px;color:#8b90a6;border-bottom:1px solid var(--line);font-size:17px}
.m-tabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--line);overflow:auto}
.m-tab{padding:14px 16px;font-weight:600;color:#6b7280;border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer;display:flex;gap:7px;align-items:center}
.m-tab .cbadge{background:#eef0f6;color:#4b5168;border-radius:999px;font-size:12px;padding:1px 8px;font-weight:700}
.m-tab.active{color:var(--indigo);border-bottom-color:var(--indigo)}
.m-tab.active .cbadge{background:var(--indigo);color:#fff}
.m-body{padding:22px;min-height:260px;background:#fff}
.det-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.det-grid{grid-template-columns:1fr}}
.det-card{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.det-card .h{background:var(--header);color:#fff;text-align:center;font-weight:700;padding:12px}
.det-card .rows{padding:6px 18px 14px}
.det-row{padding:12px 0;border-bottom:1px solid #f0f1f6}
.det-row:last-child{border-bottom:0}
.det-row .k{color:#374151;font-weight:600;margin-bottom:3px}
.det-row .v{color:#4b5168}
.chip{display:inline-block;background:var(--chip);color:var(--chip-tx);border-radius:8px;padding:3px 10px;font-size:12px;font-weight:600}
.fu-list{display:flex;flex-direction:column;gap:14px}
.fu-card{border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start}
.fu-av{width:40px;height:40px;border-radius:50%;background:#4b3fb0;color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.fu-main{flex:1;min-width:0}
.fu-top .nm{font-weight:700}
.fu-time{color:#8b90a6;font-size:13px;display:flex;align-items:center;gap:5px;margin-top:2px}
.fu-right{display:flex;align-items:center;gap:12px;flex:none}
.fu-pencil{color:#6b63d6}
.fu-cmt{margin-top:10px;color:#374151;white-space:pre-wrap;line-height:1.5}
.fu-next{margin-top:6px;color:#6b7280;font-size:13px}
.fu-tags{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.fu-tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;letter-spacing:.2px}
.fu-tag.ft-type{background:#eef2ff;color:#4338ca}
.fu-tag.ft-out{background:#f3f4f6;color:#374151}
.fu-tag.out-Connected{background:#dcfce7;color:#166534}
.fu-tag.out-RNR,.fu-tag.out-Busy,.fu-tag.out-SwitchedOff,.fu-tag.out-WrongNumber{background:#fee2e2;color:#991b1b}
.fu-tag.out-CallBackLater{background:#fef3c7;color:#92400e}
.status-pill{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;display:inline-block}
.badge-breach{background:var(--red-bg);color:var(--red)}
.badge-inpolicy{background:var(--green-bg);color:var(--green)}
.fu-empty{text-align:center;color:#9aa0b4;padding:40px}
.fu-empty .ic{font-size:30px;opacity:.5}

/* ================= DASHBOARD ================= */
.annc{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-left:4px solid #f59e0b;border-radius:12px;padding:14px 18px;margin-bottom:16px;box-shadow:var(--shadow)}
.annc .ai{color:#f59e0b;font-size:22px}
.annc b{display:block}
.annc .x{margin-left:auto;color:#e02424;cursor:pointer}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.kpi .top{display:flex;align-items:flex-start;justify-content:space-between}
.kpi .t{color:#8b90a6;font-weight:600}
.kpi .v{font-size:30px;font-weight:800;margin-top:2px}
.kpi .ik{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:22px}
.kpi .sub{margin-top:8px;font-size:13px}
.kpi .sub .up{color:#0e9f6e;font-weight:700}
.kpi .bar{height:6px;border-radius:999px;background:#eceef6;margin-top:10px;overflow:hidden}
.kpi .bar>span{display:block;height:100%;border-radius:999px}
.kpi .cap{display:flex;justify-content:space-between;margin-top:8px;font-size:13px}
.dash2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
@media(max-width:1100px){.dash2{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.panel .ph{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.panel .ph .ti{font-weight:800;font-size:18px}
.tabpills{display:flex;gap:8px;margin-left:8px}
.tabpill{border:0;background:#f3f2fb;border-radius:8px;padding:6px 12px;font-weight:700;color:#5b6176;font-size:13px}
.tabpill.on{background:#fff;color:var(--pink);box-shadow:inset 0 0 0 1px var(--line)}
.tabpill .c{color:var(--pink)}
.panel .pb{padding:16px 18px;max-height:62vh;overflow:auto;display:flex;flex-direction:column;gap:12px}
.dash-empty{text-align:center;color:#9aa0b4;padding:50px}
.dash-empty .ic{font-size:40px;opacity:.5}
.empty-view{padding:60px;text-align:center;color:#9aa0b4}
.empty-view .ic{font-size:40px}
.loading{padding:60px;text-align:center;color:#8b90a6}

/* ---- topbar logout ---- */
.who{display:flex;align-items:center;gap:8px}
.who .logout{border:1px solid var(--line);background:#fff;border-radius:8px;width:30px;height:30px;cursor:pointer;color:#6b7280;font-size:14px}
.who .logout:hover{background:#f3f4f6;color:#e02424}

/* ---- add/edit lead form ---- */
.form-modal{width:min(760px,96vw);max-height:92vh;display:flex;flex-direction:column}
.form-body{padding:16px 18px 18px;overflow:auto}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.ff{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:#56607a}
.ff.ff-wide{grid-column:1 / -1}
.ff input,.ff select,.ff textarea{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit;font-weight:500;color:var(--text,#1f2430);background:#fff}
.ff textarea{min-height:64px;resize:vertical}
.ff input:focus,.ff select:focus,.ff textarea:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(79,70,229,.08)}
.form-foot{display:flex;align-items:center;gap:10px;margin-top:18px}
.form-err{color:#c81e3a;font-weight:600;font-size:13px;margin-top:10px;display:none}
.form-err.show{display:block}
.btn.danger{background:#fff;border:1px solid #f3b1bd;color:#c81e3a}
.btn.danger:hover{background:#fdecef}
#btnOverdue.on{background:#dc2626;border-color:#dc2626;color:#fff}
#btnOverdue.on:hover{background:#b91c1c}

/* ---- follow-up add form ---- */
.fu-form{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:14px;background:#fafbff}
.fu-form textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit;min-height:52px;resize:vertical}
.fu-form textarea:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(79,70,229,.08)}
.fu-form .ff-row2{display:flex;align-items:flex-end;gap:12px;margin-top:10px;flex-wrap:wrap}
.fu-form .ff-row2 label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:#56607a}
.fu-form .ff-row2 input,.fu-form .ff-row2 select{border:1px solid var(--line);border-radius:9px;padding:8px 10px;font:inherit}
.fu-form .ff-row2 .btn{margin-left:auto}
.fu-del{cursor:pointer;color:#b8bdca;margin-left:8px}
.fu-del:hover{color:#e02424}

/* ---- toast ---- */
#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:#1f2430;color:#fff;padding:11px 18px;border-radius:10px;font-size:13.5px;font-weight:600;max-width:min(92vw,440px);text-align:center;box-sizing:border-box;opacity:0;pointer-events:none;transition:.25s;z-index:9999;box-shadow:0 8px 28px rgba(0,0,0,.25)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- coming-soon nav markers ---- */
.nav a.soon{opacity:.6}
.nav a .soon-dot{color:#f59e0b;margin-left:4px;font-size:16px;line-height:0}

/* ---- lead card action icons ---- */
.lc-acts .la{cursor:pointer;padding:2px;border-radius:5px}
.lc-acts .la:hover{background:#eef0f7}
.lc-acts .la[data-act="delete"]:hover{color:#e02424}
.lc-acts .fub{cursor:pointer}
.actions-cell .act-row span{cursor:pointer;padding:0 2px}
.actions-cell .li-del:hover{color:#e02424}

/* ---- history timeline ---- */
.hist-list{padding:4px 2px}
.hist-row{display:flex;gap:12px;padding:7px 0}
.hist-row .hd{width:10px;height:10px;border-radius:50%;background:var(--indigo);margin-top:5px;flex:0 0 auto;box-shadow:0 0 0 3px #e9ebfb}
.hist-row .he{font-size:13.5px;font-weight:600;color:#2a2f3c}
.hist-row .hm{font-size:12px;color:#8b90a6;margin-top:2px}

/* ---- activity (task/reminder/meeting) cards ---- */
.act-add{margin-bottom:12px}
.act-list{display:flex;flex-direction:column;gap:10px}
.act-card{display:flex;gap:10px;border:1px solid var(--line);border-radius:11px;padding:12px 13px;background:#fff}
.act-card.done{opacity:.6}
.act-card.done .ac-title{text-decoration:line-through}
.ac-main{flex:1;min-width:0}
.ac-title{font-weight:700;font-size:14px;color:#20242e}
.ac-lead{font-weight:600;font-size:12px;color:var(--indigo);cursor:pointer;margin-left:6px}
.ac-meta{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:6px;font-size:12px;color:#6b7280;align-items:center}
.ac-note{margin-top:7px;font-size:13px;color:#434a59;background:#f7f8fb;border-radius:7px;padding:7px 9px}
.ac-over{color:#e02424;font-weight:700}
.ac-pri{padding:1px 8px;border-radius:20px;font-weight:700;font-size:11px}
.pri-High{background:#fdecef;color:#e02424}.pri-Medium{background:#fff6e9;color:#d97706}.pri-Low{background:#eef2ff;color:#4f46e5}
.ac-status{padding:1px 8px;border-radius:20px;font-weight:700;font-size:11px;background:#eef0f7;color:#555}
.st-Done,.st-Completed{background:#e9fbef;color:#16a34a}.st-Open,.st-Pending,.st-Scheduled{background:#eef2ff;color:#4f46e5}.st-Cancelled{background:#f3f4f6;color:#9ca3af}
.st-Blocked,.st-Hold{background:#fef3c7;color:#92400e}.st-Resolved{background:#e9fbef;color:#16a34a}.st-Closed{background:#f3f4f6;color:#6b7280}.st-In{background:#e0f2fe;color:#0369a1}
.ac-ackbadge{font-size:10.5px;font-weight:700;color:#166534;background:#dcfce7;border-radius:999px;padding:1px 7px;vertical-align:middle}
.ac-note.ac-blocked{background:#fef3c7;color:#92400e}
.ac-acts{display:flex;flex-direction:column;gap:6px}
.ac-done,.ac-del{width:30px;height:30px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-size:14px}
.ac-done:hover{background:#e9fbef;color:#16a34a;border-color:#b7ebc6}.ac-del:hover{background:#fdecef;color:#e02424;border-color:#f5c2cc}

/* ---- dashboard work queue ---- */
.work-list{display:flex;flex-direction:column;gap:8px;max-height:460px;overflow:auto}
.work-item{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer;background:#fff}
.work-item:hover{background:#fafbff}
.work-item.over{border-color:#f5c2cc;background:#fff7f8}
.wi-ic{font-size:16px}.wi-main{flex:1;min-width:0}
.wi-t{font-weight:600;font-size:13.5px;color:#262b36;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wi-s{font-size:12px;color:#8b90a6;margin-top:1px}
.wi-badge{background:#e02424;color:#fff;font-size:10px;font-weight:800;padding:2px 7px;border-radius:20px}

/* ---- activity add form: lead picker ---- */
.af-lead{grid-column:1/-1;font-size:13px;color:#434a59;background:#f7f8fb;border-radius:8px;padding:8px 10px}
.af-results{position:relative}
.af-hit{padding:8px 10px;border:1px solid var(--line);border-top:0;font-size:13px;cursor:pointer;background:#fff}
.af-hit:first-child{border-top:1px solid var(--line);border-radius:8px 8px 0 0}
.af-hit:last-child{border-radius:0 0 8px 8px}
.af-hit:hover{background:#eef2ff}
.btn.sm{padding:5px 12px;font-size:12px}
.seg button.on{background:var(--indigo);color:#fff}

/* ---- gear / settings ---- */
.who .gear{border:1px solid var(--line);background:#fff;border-radius:8px;width:30px;height:30px;cursor:pointer;color:#6b7280;font-size:15px}
.who .gear:hover{background:#f3f4f6;color:var(--indigo)}
.set-row{display:flex;gap:12px;align-items:flex-start;padding:6px 2px 14px;font-size:14px}
.set-row input[type="checkbox"]{margin-top:3px;width:18px;height:18px;flex:0 0 auto}
.set-row input[type="text"],.set-row input:not([type]){width:100%;max-width:340px;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit}
.set-row .muted{font-weight:400;font-size:12.5px;margin-top:4px}

/* ---- documents (quote/invoice) ---- */
.doc-list{display:flex;flex-direction:column;gap:12px}
.doc-card{border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:#fff}
.doc-head{display:flex;justify-content:space-between;align-items:center}
.doc-head b{font-size:15px}
.doc-tot{font-weight:800;font-size:15px}
.doc-sub{font-size:12px;color:#8b90a6;margin:4px 0 8px}
.doc-lines{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:8px}
.doc-lines td{padding:4px 6px;border-bottom:1px solid #f0f1f6}
.doc-lines .num,.doc-edit .num{text-align:right}
.doc-foot{display:flex;align-items:center;gap:10px;font-size:13px;flex-wrap:wrap}
.bal-due{color:#e02424;font-weight:700}.bal-ok{color:#16a34a;font-weight:700}
.doc-editor{margin:6px 0 10px;border:1px solid var(--line);border-radius:10px;padding:10px}
.doc-edit{width:100%;border-collapse:collapse;font-size:13px}
.doc-edit th{text-align:left;font-size:11px;color:#8b90a6;padding:2px 6px}
.doc-edit td{padding:3px 4px}
.doc-edit input{width:100%;border:1px solid var(--line);border-radius:7px;padding:6px 8px;font:inherit}
.doc-edit input.num{text-align:right}
.doc-edit .d-rm{cursor:pointer;color:#c0c4d0;padding:0 4px}.doc-edit .d-rm:hover{color:#e02424}
.doc-edit .disc-cell{display:flex;gap:4px;align-items:center}
.doc-edit .disc-cell input{min-width:0}
.doc-edit .qty-cell{display:flex;gap:4px;align-items:center}
.doc-edit .qty-cell input{min-width:0}
.doc-edit .dim-btn{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:7px;width:30px;height:30px;cursor:pointer;font-size:14px;line-height:1}
.doc-edit .dim-btn:active{background:#f3f4f6}
.doc-edit .disc-cell select{border:1px solid var(--line);border-radius:7px;padding:6px 4px;font:inherit;background:#fff;flex:0 0 auto}
.doc-total .tr{display:flex;justify-content:space-between;padding:3px 0;font-size:13px}.doc-total .tr.tt{font-weight:700;border-top:1px solid var(--line);margin-top:4px;padding-top:6px}
.kpi.clickable{cursor:pointer;transition:box-shadow .12s,transform .12s}
.kpi.clickable:hover{box-shadow:0 8px 24px rgba(20,24,40,.12);transform:translateY(-1px)}
#topSearch{cursor:pointer}
.mf-tools{margin:0 0 12px}
.mf-tbl{width:100%;border-collapse:collapse;font-size:13px}
.mf-tbl th{text-align:left;background:#f4f6fb;color:#434a59;font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line);position:sticky;top:0}
.mf-tbl td{padding:8px 10px;border-bottom:1px solid #eef0f6;white-space:nowrap}
.mf-tbl tr[data-lead]{cursor:pointer}.mf-tbl tr[data-lead]:hover{background:#f6f8ff}
.mf-tbl .mf-name{font-weight:600}.mf-tbl .mf-due{color:#dc2626;font-weight:600}
.gs-res{margin-top:6px;max-height:52vh;overflow:auto}
.gs-list{display:flex;flex-direction:column;gap:6px}
.gs-hit{border:1px solid var(--line);border-radius:10px;padding:9px 12px;cursor:pointer}
.gs-hit:hover{background:#f6f8ff;border-color:#c7cef0}
.gs-hit .gs-n{font-weight:600;font-size:14px}.gs-hit .gs-m{font-size:12.5px;color:#6b7280;margin-top:2px}
.doc-total{text-align:right;margin-top:8px;font-size:14px}
.st-Sent,.st-Issued{background:#eef2ff;color:#4f46e5}.st-Accepted,.st-Paid{background:#e9fbef;color:#16a34a}
.st-Rejected,.st-Void{background:#f3f4f6;color:#9ca3af}.st-Partial{background:#fff6e9;color:#d97706}.st-Draft{background:#eef0f7;color:#555}

/* ---- to-do ---- */
.todo-add{display:flex;gap:8px;margin-bottom:12px}
.todo-add input{flex:1;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font:inherit}
.todo-list{display:flex;flex-direction:column;gap:2px}
.todo-item{display:flex;align-items:center;justify-content:space-between;padding:9px 6px;border-bottom:1px solid #f2f3f7}
.todo-item label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.todo-item input{width:17px;height:17px}
.todo-item.done span{text-decoration:line-through;color:#9aa0b4}
.td-del{cursor:pointer;color:#c7ccd8}.td-del:hover{color:#e02424}

/* ---- notes ---- */
.note-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.note-card{border:1px solid var(--line);border-radius:11px;padding:12px 13px;background:#fffdf6}
.nc-top{display:flex;justify-content:space-between;gap:8px}.nc-top b{font-size:14px}
.nc-body{font-size:13px;color:#434a59;margin:6px 0;white-space:pre-wrap}
.nc-meta{font-size:11.5px;color:#9aa0b4}.nc-del{cursor:pointer;color:#c7ccd8}.nc-del:hover{color:#e02424}

/* ---- calendar agenda ---- */
.cal-agenda{display:flex;flex-direction:column;gap:14px}
.cal-day .cal-date{font-weight:700;font-size:13px;color:#2a2f3c;margin-bottom:6px;border-bottom:1px solid var(--line);padding-bottom:4px}
.cal-today{background:var(--indigo);color:#fff;font-size:10px;padding:1px 7px;border-radius:20px;margin-left:6px}
.cal-item{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;cursor:pointer}
.cal-item:hover{background:#f6f7fb}.cal-item .ci-t{flex:1;font-size:13.5px}.cal-item .ci-w{font-size:12px;color:#8b90a6}

/* ---- bell dropdown ---- */
.tool.bell{position:relative}
.bell-drop{position:fixed;width:330px;max-height:440px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(20,24,40,.18);z-index:9000;padding:6px}
/* On narrow/tablet widths the fixed 330px panel anchored to the right ran off the left edge and
   cut the lead names; span the viewport with small side margins instead. */
@media (max-width: 820px){
  .bell-drop{left:10px !important;right:10px !important;width:auto !important;max-width:none}
}
.bd-head{font-weight:700;font-size:12px;color:#8b90a6;padding:8px 10px 6px;text-transform:uppercase;letter-spacing:.03em}
.bd-item{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:9px;cursor:pointer}
.bd-item:hover{background:#f6f7fb}.bd-item.over{background:#fff7f8}
.bd-t{font-size:13.5px;font-weight:600;color:#262b36}.bd-s{font-size:12px;color:#8b90a6}
.bd-empty{padding:22px;text-align:center;color:#9aa0b4;font-size:13px}
.cust-leads{display:flex;flex-direction:column;gap:8px}

/* ---- modal header status dropdown ---- */
.m-head{display:flex;align-items:center;gap:12px}
.m-head h3{flex:0 1 auto}
.m-status{margin-left:auto;border:0;border-radius:8px;padding:6px 10px;font:inherit;font-weight:700;font-size:13px;background:#fff;color:#2a2f3c;cursor:pointer}
.m-head .x{margin-left:4px}
.ff input[type="datetime-local"]{font:inherit}

/* ---- dashboard analytics ---- */
.analytics{margin-bottom:16px}
.fin-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px;max-width:100%}
.main{overflow-x:hidden}
.inv-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.inv-tbl{min-width:520px}
.fin-tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.ft-t{font-size:12px;color:#8b90a6;font-weight:600}
.ft-v{font-size:19px;font-weight:800;margin-top:4px}
.ceo-sub{font-size:11.5px;color:#9ca3af;margin-top:3px;font-weight:600}
.ceo-tile.clickable{cursor:pointer;transition:box-shadow .12s,transform .12s}
.ceo-tile.clickable:hover{box-shadow:0 6px 18px rgba(30,25,90,.12);transform:translateY(-1px)}
.cc-sec{font-weight:800;font-size:13px;color:#6b7280;text-transform:uppercase;letter-spacing:.4px;margin:18px 2px 10px}
.cc-sec:first-child{margin-top:4px}
.ins-good{color:#15803d;font-weight:700}.ins-ok{color:#4f46e5;font-weight:600}.ins-warn{color:#b45309;font-weight:600}.ins-bad{color:#dc2626;font-weight:700}
/* ---- Team Activity ---- */
.ta-av{width:40px;height:40px;border-radius:12px;color:#fff;font-weight:800;font-size:15px;display:grid;place-items:center;flex:0 0 auto;position:relative}
.ta-av.sm{width:32px;height:32px;border-radius:9px;font-size:12px}
.emp-av{width:46px;height:46px;border-radius:13px;color:#fff;font-weight:800;font-size:16px;display:grid;place-items:center;flex:0 0 auto;position:relative}
.emp-av.lg{width:58px;height:58px;border-radius:16px;font-size:20px}
.emp-on{position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;background:#16a34a;border:2.5px solid #fff;box-shadow:0 0 0 2px #16a34a33}
/* live strip */
.ta-live{background:linear-gradient(120deg,#f5f3ff,#eef2ff);border:1px solid #e3e0f6;border-radius:14px;padding:14px 16px;margin-bottom:16px}
.ta-live-h{font-weight:800;font-size:13px;color:#4338ca;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.4px}
.ta-pulse{width:9px;height:9px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 0 #16a34a66;animation:tapulse 1.8s infinite}
@keyframes tapulse{0%{box-shadow:0 0 0 0 #16a34a66}70%{box-shadow:0 0 0 7px #16a34a00}100%{box-shadow:0 0 0 0 #16a34a00}}
.ta-live-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.ta-live-chip{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #e3e0f6;border-radius:12px;padding:7px 12px 7px 8px;cursor:pointer;transition:box-shadow .12s}
.ta-live-chip:hover{box-shadow:0 5px 16px rgba(80,70,220,.14)}
.ta-live-nm{font-weight:700;font-size:13px}.ta-live-sub{font-size:11px;color:#8b90a6}
.ta-live-empty{color:#8b90a6;font-size:13px;padding:4px 2px}
/* KPI tiles */
.ta-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:6px}
.ta-tile{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--ac);border-radius:13px;padding:14px 16px}
.ta-tile-ic{font-size:22px;line-height:1;opacity:.9}
.ta-tile-v{font-size:21px;font-weight:800;color:var(--ac);line-height:1.1}
.ta-tile-t{font-size:12px;color:#6b7280;font-weight:600;margin-top:2px}
.ta-tile-s{font-size:11px;color:#9ca3af;margin-top:1px}
/* employee cards */
.emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.emp-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;cursor:pointer;transition:box-shadow .14s,transform .14s}
.emp-card:hover{box-shadow:0 10px 26px rgba(30,25,90,.12);transform:translateY(-2px)}
.emp-top{display:flex;align-items:center;gap:12px}
.emp-id{flex:1;min-width:0}
.emp-nm{font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emp-sub{font-size:11.5px;color:#9ca3af;margin-top:1px}
.emp-verdict{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.emp-verdict.ins-good{background:#dcfce7;color:#166534}.emp-verdict.ins-ok{background:#eef2ff;color:#4338ca}.emp-verdict.ins-warn{background:#fef3c7;color:#92400e}.emp-verdict.ins-bad{background:#fee2e2;color:#991b1b}
.emp-stats{display:flex;gap:8px;margin:14px 0 10px}
.emp-stat{flex:1;background:#f8fafc;border-radius:10px;padding:9px 6px;text-align:center}
.es-v{font-weight:800;font-size:15px;color:#1e193a}.es-l{font-size:10.5px;color:#9ca3af;font-weight:600;margin-top:1px;text-transform:uppercase;letter-spacing:.3px}
.emp-barwrap{height:7px;background:#eef0f7;border-radius:999px;overflow:hidden;margin-bottom:10px}
.emp-bar{height:100%;background:linear-gradient(90deg,#6366f1,#a855f7);border-radius:999px;min-width:2px}
.tt-pgbar{display:flex;height:9px;border-radius:999px;overflow:hidden;background:#eef0f7}
.tt-pgbar span{display:block;height:100%}
.tt-pgleg{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:7px;font-size:11px;color:#6b7280}
.tt-pgleg span{display:inline-flex;align-items:center;gap:4px}.tt-pgleg i{width:9px;height:9px;border-radius:3px;display:inline-block}
.tt-noscreen{font-size:11.5px;color:#b6bac6;padding:4px 0}
.tt-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}
.tt-chip{font-size:11px;background:#f1f3f9;color:#475569;border-radius:7px;padding:3px 8px;font-weight:600}.tt-chip b{color:#1e193a}
.ta-foot{margin-top:14px;font-size:11.5px;color:#9ca3af}
/* employee detail modal */
.ed-hero{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.ed-nm{font-weight:800;font-size:19px}.ed-sub{font-size:12.5px;color:#6b7280;margin-top:2px}
.ed-tiles{grid-template-columns:repeat(4,1fr)}
.ed-chart{margin:16px 0 6px}
.chart-bars{display:flex;align-items:flex-end;gap:5px;height:150px;padding:8px 2px 0;border-bottom:1px solid var(--line)}
.cb-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:5px}
.cb-bar{width:72%;max-width:26px;background:linear-gradient(180deg,#6366f1,#8b5cf6);border-radius:5px 5px 0 0;min-height:3px;transition:height .3s}
.cb-bar.we{background:linear-gradient(180deg,#a5b4fc,#c4b5fd)}
.cb-x{font-size:9.5px;color:#9ca3af}
@media(max-width:820px){.ta-tiles,.ed-tiles{grid-template-columns:repeat(2,1fr)}.emp-grid{grid-template-columns:1fr}}
.chart-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){.chart-row{grid-template-columns:1fr}}
.chart-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.cc-h{font-weight:700;font-size:13px;margin-bottom:10px;color:#2a2f3c}
.barrow{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:12.5px}
.barrow .bl{width:120px;flex:0 0 auto;color:#434a59;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barrow .bt{flex:1;height:14px;background:#f0f1f6;border-radius:7px;overflow:hidden}
.barrow .bf{display:block;height:100%;border-radius:7px}
.barrow .bn{width:56px;text-align:right;font-weight:700;color:#5a6072}

/* ---- inventory + item autocomplete ---- */
.inv-add{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;margin-bottom:12px}
.inv-add input{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit}
.doc-edit input{width:100%}
.pay-bal{font-size:14px;margin-bottom:8px}
.pay-quick{display:flex;gap:8px;margin-bottom:10px}

/* ---- follow-up media attachments ---- */
.fu-attach{display:block;margin-top:10px;font-size:12.5px;font-weight:600;color:#56607a}
.fu-attach input[type="file"]{display:block;margin-top:6px;font-weight:400;font-size:12px}
.fu-media{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.fu-mimg img{width:76px;height:76px;object-fit:cover;border-radius:9px;border:1px solid var(--line);display:block}
.fu-mimg:hover img{border-color:var(--indigo)}
.fu-mfile{display:inline-flex;align-items:center;gap:5px;background:#eef2ff;color:#4f46e5;border:1px solid #dfe4fb;border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:600;text-decoration:none;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fu-mfile:hover{background:#e3e9ff}

/* ---- branding: Renomate logo + powered by StaffAble AI ---- */
.sidebar .brand{flex-direction:column;align-items:flex-start;gap:9px;padding:16px 18px 10px}
.brand-logo{width:100%;max-width:180px;height:auto;display:block}
.powered{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#8b90a6;text-decoration:none;font-weight:500}
.powered .pw{width:17px;height:17px;border-radius:5px;flex:0 0 auto}
.powered b{color:#334155;font-weight:800}
.powered:hover b{color:var(--indigo)}
.powered.center{justify-content:center;margin-top:16px;width:100%}
.login-box .brand{margin-bottom:6px}
.login-box .brand-logo{max-width:240px;margin:0 auto}

/* ---- settings page ---- */
.team-add{display:grid;grid-template-columns:1.4fr 1.7fr 1fr .9fr auto;gap:8px;margin-bottom:12px}
.team-add input,.team-add select{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit}
.iv-f{border:1px solid var(--line);border-radius:7px;padding:6px 8px;font:inherit}
.iv-f.num{text-align:right}
#setBody .set-row{padding:10px 2px 16px;border-bottom:1px solid #f2f3f7}

/* ---- import leads ---- */
#burger{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;font-size:18px;color:#475569}
#sideBg{display:none}
.imp-ok{background:#e9fbef;border:1px solid #b7ebc6;color:#15803d;border-radius:9px;padding:9px 12px;font-size:13.5px;font-weight:600}
.imp-err{background:#fdecef;border:1px solid #f5c2cc;color:#c81e3a;border-radius:9px;padding:9px 12px;font-size:13.5px;font-weight:600}
.imp-errs{margin:8px 0 0;padding-left:20px;font-size:12.5px;color:#8b6b2a;max-height:160px;overflow:auto}

/* ================= MOBILE-FIRST (app-like on phones) ================= */
@media (max-width: 820px) {
  body {
    overflow-x: hidden;
  }

  /* collapse the 248px+1fr app grid so .main spans the full phone width
     (sidebar becomes an off-canvas drawer below) */
  #app {
    display: block;
  }

  /* search takes its own full-width row; drop the leftover flex spacer
     that otherwise steals a whole row on phones */
  .page-head > .spacer {
    display: none;
  }

  .page-head #searchBox {
    flex: 1 1 100%;
    width: 100% !important;
    order: -1;
  }

  /* tap-to-call: big green call button on each lead card for one-tap dialling */
  .lc-phone a.call {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    margin-top: 2px;
    padding: 10px 14px;
    background: #e8f8ee;
    border: 1px solid #bfe8cd;
    border-radius: 11px;
    color: #0a7d33;
    font-size: 16px;
  }
  .lc-phone a.call .call-go {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 4px 12px;
    background: #16a34a;
    border-radius: 999px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
  }
  td a.call {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    font-size: 16px;
  }
  .det-row a.call {
    min-height: 44px;
    font-size: 16px;
  }

  #sideBg {
    position: fixed;
    inset: 0;
    display: none;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1199;
  }

  #sideBg.show {
    display: block;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 82vw;
    max-width: 300px;
    height: 100vh;
    z-index: 1200;
    overflow: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 12px 0 32px rgba(15, 23, 42, 0.22);
  }

  .sidebar.open {
    transform: none;
  }

  .main {
    width: 100%;
    margin-left: 0;
    min-width: 0;
  }

  #burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 10px;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    min-height: 52px;
    height: 52px;
    padding: 5px 12px;
    gap: 8px;
    box-shadow: 0 1px 0 var(--line), 0 3px 12px rgba(15, 23, 42, 0.05);
  }

  .topbar .brand,
  .topbar .logo,
  .topbar .app-title {
    max-width: 110px;
    overflow: hidden;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .topbar .qa {
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .topbar .qa::-webkit-scrollbar {
    display: none;
  }

  .topbar .qa > * {
    flex: 0 0 auto;
  }

  .topbar .spacer {
    display: none;
  }

  .topbar .tool:not(.bell):not(.gear) {
    display: none;
  }

  .topbar .tool,
  .topbar .who {
    flex: 0 0 auto;
  }

  .topbar .tool,
  .topbar .tool.bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
  }

  .who {
    min-height: 40px;
    padding: 3px 6px;
  }

  .who .nm small,
  .who .nm .role {
    display: none;
  }

  .who .nm {
    max-width: 76px;
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #view {
    min-width: 0;
    padding: 12px 16px;
  }

  .page-head {
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
  }

  /* The page title already shows in the top bar on phones, so hide the big in-page heading
     and give the toolbar back that vertical space. */
  .page-head h1 {
    display: none;
  }

  .page-head > .btn,
  .page-head > button,
  .page-head .actions,
  .page-head .page-actions {
    min-height: 40px;
  }

  .page-head .actions,
  .page-head .page-actions {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .page-head .actions .btn,
  .page-head .page-actions .btn {
    flex: 1 1 140px;
  }

  /* Leads toolbar: one compact row that scrolls sideways instead of stacking into 5 rows. */
  .page-head .ph-actions {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
  .page-head .ph-actions::-webkit-scrollbar { display: none; }
  .page-head .ph-actions > .btn,
  .page-head .ph-actions > button {
    flex: 0 0 auto;
    min-height: 38px;
    white-space: nowrap;
  }
  .page-head .ph-actions .seg { width: auto; flex: 0 0 auto; }

  /* Lead popup: wrap all tabs so none are hidden off-screen (was showing 3 of 8). */
  .m-tabs { flex-wrap: wrap; padding: 0 10px; gap: 2px 4px; }
  .m-tab { padding: 11px 12px; }

  .seg {
    display: flex;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .seg button,
  .seg .btn,
  .seg > * {
    flex: 1 0 auto;
    min-height: 42px;
    padding: 9px 14px;
  }

  .board {
    width: calc(100% + 32px);
    margin-right: -16px;
    margin-left: -16px;
    padding: 0 16px 12px;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .board .col {
    min-width: 84vw;
    max-width: 88vw;
    scroll-snap-align: start;
  }

  /* Header scrolls with its column so it never overlaps the first card's name. */
  .col-head {
    position: static;
  }

  .lead-card {
    padding: 14px;
  }

  .lead-card .lc-acts {
    gap: 6px;
  }

  .lead-card .lc-acts button,
  .lead-card .lc-acts a,
  .lead-card .lc-acts .tool,
  .lead-card .lc-acts i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
  }

  .tbl-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table.leads {
    min-width: 640px;
  }

  .modal-bg {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }

  .modal,
  .modal.form-modal {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .m-head {
    flex: 0 0 auto;
    min-height: 56px;
    padding: 12px 16px;
  }

  /* Wrap all tabs onto as many rows as needed so none are hidden off-screen. */
  .m-tabs {
    flex: 0 0 auto;
    flex-wrap: wrap;
    overflow-x: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }

  .m-tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 14px;
  }

  .m-body,
  .form-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .doc-editor {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .doc-edit {
    min-width: 540px;
  }

  .form-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex: 0 0 auto;
    padding-top: 10px;
    background: #fff;
    box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.06);
  }

  .form-foot .btn,
  .form-foot button {
    min-height: 44px;
  }

  .drawer {
    width: min(92vw, 380px);
  }

  .kpis,
  .fin-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .chart-row,
  .dash2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .card {
    padding: 14px;
  }

  input,
  select,
  textarea,
  button,
  .btn {
    min-height: 42px;
    font-size: 16px;
  }

  textarea {
    min-height: 96px;
  }

  input,
  select,
  textarea {
    padding: 9px 11px;
  }

  button,
  .btn {
    padding: 9px 14px;
  }

  #toast {
    right: 16px;
    left: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)); /* clear the bottom nav */
    width: auto;
    max-width: none;
    transform: translateY(20px); /* positioned by left+right, so no horizontal shift */
  }
  #toast.show { transform: translateY(0); }
}

@media (max-width: 480px) {
  #view {
    padding: 10px 16px;
  }

  .topbar {
    gap: 5px;
    padding-right: 8px;
    padding-left: 8px;
  }

  #burger {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .topbar .brand,
  .topbar .logo,
  .topbar .app-title {
    display: none;
  }

  .topbar .qa {
    gap: 5px;
  }

  .topbar .qa .btn,
  .topbar .qa button {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 14px;
  }

  .who {
    display: none;
  }

  /* topbar .who (gear + logout) is hidden ≤480px — expose account actions in the sidebar instead */
  .side-acct { display: flex; }

  .topbar .tool,
  .topbar .tool.bell {
    min-width: 44px;
    min-height: 44px;
  }

  .page-head {
    gap: 8px;
  }

  .page-head h1 {
    font-size: 18px;
  }

  .page-head .actions .btn,
  .page-head .page-actions .btn,
  .page-head > .btn {
    flex: 1 1 calc(50% - 4px);
    min-height: 44px;
    padding: 9px 10px;
  }

  .seg button,
  .seg .btn,
  .seg > * {
    min-height: 44px;
    padding: 10px 12px;
  }

  .board .col {
    min-width: 86vw;
    max-width: 90vw;
  }

  .lead-card {
    padding: 16px;
  }

  .lead-card .lc-acts button,
  .lead-card .lc-acts a,
  .lead-card .lc-acts .tool,
  .lead-card .lc-acts i {
    min-width: 38px;
    min-height: 38px;
  }

  .kpis,
  .fin-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .chart-row,
  .dash2 {
    gap: 10px;
  }

  .card {
    padding: 14px;
  }

  .m-head {
    min-height: 60px;
  }

  .m-tab {
    min-height: 46px;
  }

  .m-body,
  .form-body {
    padding: 14px 16px;
  }

  .form-foot {
    padding: 12px 16px 16px;
  }

  .form-foot .btn,
  .form-foot button {
    width: 100%;
    min-height: 46px;
  }

  input,
  select,
  textarea,
  button,
  .btn {
    min-height: 44px;
  }

  .drawer {
    width: 100vw;
  }
}

/* invoice/quotation list: search toolbar + pagination */
.doc-tools{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.doc-tools #docSearch{flex:1;min-width:200px;padding:9px 12px;border:1px solid var(--line,#e5e7eb);border-radius:10px;font-size:14px}
.doc-tools #docPer{padding:9px 10px;border:1px solid var(--line,#e5e7eb);border-radius:10px;font-size:14px;background:#fff}
.doc-count{font-size:13px;white-space:nowrap}
.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.pager .pg{padding:7px 12px;border:1px solid var(--line,#e5e7eb);border-radius:9px;background:#fff;font-size:13px;cursor:pointer}
.pager .pg:hover:not(:disabled){background:#f3f4f6}
.pager .pg:disabled{opacity:.45;cursor:default}
.pager .pg-mid{font-size:13px;font-weight:600;padding:0 6px}

/* document view + row action buttons */
.doc-acts{white-space:nowrap}
.mini{border:1px solid var(--line,#e5e7eb);background:#fff;border-radius:7px;padding:4px 8px;margin-right:4px;cursor:pointer;font-size:14px;line-height:1}
.mini:hover{background:#f3f4f6}
.dv-wrap{overflow:auto;max-height:68vh;background:#f1f5f9;padding:12px;border-radius:10px}
.modal.form-modal:has(.dv-wrap){max-width:880px;width:96vw}

/* ===================================================================
   MOBILE APP SHELL v2 — authoritative, app-like (overrides earlier)
   =================================================================== */
@media (max-width: 820px) {
  #app { display: block; }
  .main { width: 100%; margin: 0; }

  /* --- top bar: compact, essentials only --- */
  .topbar { height: 54px; min-height: 54px; padding: 6px 10px; gap: 8px; }
  .topbar .qa { display: none; }                 /* main nav lives in bottom bar */
  .topbar .spacer { display: block; flex: 1; }
  .topbar .tool:not(.bell) { display: none; }    /* hide ⚹ ☑ ⧉ 🔍 clutter */
  .topbar .tool.bell { display: inline-flex; min-width: 42px; min-height: 42px; }
  .topbar .who { padding: 2px 4px; }
  .topbar .who .nm small { display: none; }
  .topbar .who .nm { max-width: 92px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
  #burger { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; min-height: 42px; padding: 0; border-radius: 10px; }
  #mobTitle { display: inline-block; font-weight: 800; font-size: 16px; color: var(--ink, #15213b); margin-left: 2px; }

  /* --- content gets room for the bottom bar --- */
  #view { padding: 12px 14px 92px; }

  /* --- page-head toolbar: title row, full-width search, 2-up buttons --- */
  .page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
  .page-head h1 { flex: 1 1 auto; margin: 0; font-size: 19px; line-height: 1.2; }
  .page-head > .spacer { display: none; }
  .page-head #searchBox { order: 1; flex: 1 1 100%; width: 100% !important; }
  .page-head #btnReports { display: none; } /* placeholder module — hide on phone to save a row */
  .page-head #btnAddLead { order: 2; flex: 1 1 100%; }      /* primary action, prominent */
  .page-head > .btn { order: 3; flex: 1 1 calc(33.333% - 6px); min-height: 44px; padding: 10px 6px; font-size: 13px; justify-content: center; }
  .page-head .seg { order: 4; flex: 1 1 100%; }
  .page-head .seg button { flex: 1; min-height: 44px; }

  /* --- dashboard tiles: 2 across --- */
  .kpis { grid-template-columns: 1fr 1fr !important; gap: 10px; margin-bottom: 14px; }
  .kpi { padding: 13px 14px; }
  .kpi .v { font-size: 25px; }
  .fin-row { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .chart-row, .dash2 { grid-template-columns: 1fr !important; gap: 12px; }

  /* --- kanban board: snap columns --- */
  .board { gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .board .col { min-width: 86vw; max-width: 88vw; scroll-snap-align: start; }
  .col-head { position: static; }
  .col-body { max-height: none; }

  /* --- modals: true fullscreen sheets --- */
  .modal-bg { padding: 0; align-items: stretch; justify-content: stretch; }
  .modal, .modal.form-modal { position: fixed; inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; display: flex; flex-direction: column; }
  .m-head { position: sticky; top: 0; z-index: 4; flex: 0 0 auto; min-height: 52px; padding: 12px 16px; }
  .m-tools { flex: 0 0 auto; gap: 20px; padding: 10px 16px; font-size: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .m-tabs { position: sticky; top: 0; z-index: 2; flex: 0 0 auto; background: #fff; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .m-tab { flex: 0 0 auto; min-height: 46px; }
  .m-body, .form-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px; -webkit-overflow-scrolling: touch; }

  /* --- lead detail: compact label/value rows --- */
  .det-grid { grid-template-columns: 1fr; gap: 14px; }
  .det-card .h { padding: 10px; }
  .det-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 14px; }
  .det-row .k { flex: 0 0 auto; font-size: 13px; color: #6b7280; }
  .det-row .v { flex: 1 1 auto; text-align: right; font-weight: 600; word-break: break-word; }
  .det-row .v a.call { justify-content: flex-end; }

  /* --- sticky footers for forms/filters --- */
  .form-foot, .d-foot { position: sticky; bottom: 0; z-index: 2; background: #fff; padding: 12px 14px; box-shadow: 0 -6px 16px rgba(15,23,42,.06); }
  .form-foot .btn, .d-foot .btn { min-height: 46px; }

  /* --- tables scroll instead of squashing --- */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.leads { min-width: 620px; }

  /* comfortable inputs */
  input, select, textarea, button, .btn { font-size: 16px; }
}

/* ===================== BOTTOM TAB BAR (mobile) ===================== */
.botnav { display: none; }
@media (max-width: 820px) {
  .botnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1150;
    background: #fff; border-top: 1px solid var(--line);
    padding: 6px 2px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.08);
  }
  .botnav a {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 50px; padding: 4px 0; text-decoration: none; color: #717892; font-size: 11px; font-weight: 600;
  }
  .botnav a .bic { font-size: 21px; line-height: 1; }
  .botnav a.active { color: var(--indigo); }
  .botnav a.bn-add { position: relative; }
  .botnav a.bn-add .bic {
    width: 46px; height: 46px; margin-top: -20px; border-radius: 50%;
    background: var(--indigo); color: #fff; display: grid; place-items: center; font-size: 26px;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.45);
  }
  .botnav a.bn-add { color: var(--indigo); }
}

/* GST controls + live totals in the quotation/invoice form */
.gst-box{margin:8px 0 2px}
#d_totbox{margin:8px 0 4px auto;max-width:360px;border:1px solid var(--line);border-radius:10px;padding:10px 14px}
#d_totbox .tr{display:flex;justify-content:space-between;padding:3px 0;font-size:14px;color:#374151}
#d_totbox .tr.tt{border-top:1px solid var(--line);margin-top:5px;padding-top:8px;font-weight:800;font-size:16px;color:#15213b}

/* ===== Attendance chip (topbar) ===== */
.att-chip{display:flex;align-items:center;gap:6px;margin-right:4px}
.ac-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap}
.ac-pill.in{background:var(--green-bg);color:#067a53}
.ac-pill.done{background:#eef0f6;color:#5b6472}
.ac-late{background:#fde8e8;color:#c81e3a;font-size:10px;padding:1px 5px;border-radius:6px;font-weight:800}
.ac-btn{border:0;border-radius:999px;padding:6px 13px;font-weight:700;font-size:12px;cursor:pointer}
.ac-btn.in{background:var(--green);color:#fff}
.ac-btn.in:hover{background:#0b8a5f}
.ac-btn.out{background:#fff;border:1px solid var(--line);color:#4b5168}
.ac-btn.out:hover{background:#f6f7fb}

/* ===== Team Activity: date range picker ===== */
.ta-range{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 2px 14px}
.ta-range label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#6b7280}
.ta-range input[type=date]{border:1px solid var(--line);border-radius:9px;padding:6px 9px;font-size:13px;color:var(--txt)}

/* ===== Attendance tag on employee cards ===== */
.att-tag{display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:6px;margin-right:4px;letter-spacing:.2px}
.att-tag.ok{background:var(--green-bg);color:#067a53}
.att-tag.late{background:#fef3c7;color:#92600a}
.att-tag.half{background:#fff1e0;color:#b45309}
.att-tag.absent{background:#fde8e8;color:#c81e3a}

/* ===== Attendance + shift tables ===== */
.att-note{font-size:12.5px;color:#5b6472;background:#f4f5fb;border:1px solid var(--line);border-radius:11px;padding:10px 13px;margin:2px 2px 14px;line-height:1.5}
.att-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
.att-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
.att-tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:#9299a6;font-weight:700;padding:11px 13px;border-bottom:1px solid var(--line);background:#fafbff}
.att-tbl td{padding:11px 13px;border-bottom:1px solid #f0f1f7;color:#374151;vertical-align:middle}
.att-tbl tr:last-child td{border-bottom:0}
.att-u{font-weight:700;color:#1f2433}
.att-shift{font-size:11px;font-weight:500;color:#9299a6;margin-top:2px}
.att-pill{display:inline-flex;align-items:center;font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 13%,#fff)}
.att-flag{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:6px;margin-right:4px}
.att-flag.late{background:#fef3c7;color:#92600a}
.att-flag.early{background:#e0e7ff;color:#3730a3}
.att-flag.low{background:#fde8e8;color:#c81e3a}
.att-src{font-size:10px;font-weight:700;color:#9299a6;background:#eef0f6;padding:1px 6px;border-radius:5px;margin-left:4px}
.att-src.manual{background:#e0e7ff;color:#3730a3}

/* ===== Shift templates ===== */
.shift-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.shift-card{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--indigo);border-radius:13px;padding:13px 15px}
.sc-nm{font-weight:800;color:#1f2433;font-size:14px}
.sc-hrs{font-size:12px;color:#6b7280;margin-top:2px}
.sc-act{display:flex;gap:6px;flex-shrink:0}
.us-tbl .us-shift{border:1px solid var(--line);border-radius:9px;padding:6px 8px;font-size:12.5px;max-width:230px}
.us-cust{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#6b7280;font-weight:600;white-space:nowrap}
.us-ct input{width:62px;border:1px solid var(--line);border-radius:8px;padding:5px 7px;font-size:12.5px}
.us-ct input:disabled{background:#f4f5fb;color:#b7bcc8}

/* ---- service ticket: find-customer suggestions ---- */
.tk-sugg{grid-column:1/-1;display:flex;flex-direction:column;gap:2px;max-height:180px;overflow:auto}
.tk-sg{padding:8px 10px;border:1px solid var(--line);border-radius:9px;cursor:pointer;font-size:13.5px;background:#fff}
.tk-sg:hover{background:#f6f7fb;border-color:var(--indigo)}

/* ---- Reports module ---- */
.rep-filters{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:14px 16px;margin-bottom:14px}
.rep-filters .rf{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.rep-filters .rf input,.rep-filters .rf select{border:1px solid var(--line);border-radius:9px;padding:8px 10px;font:inherit;color:var(--txt);min-width:140px}
.rep-quick{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.rep-quick .chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--txt);cursor:pointer}
.rep-quick .chip:hover{border-color:var(--indigo);color:var(--indigo)}
.rep-range-note{color:var(--muted);font-size:13px;margin:0 2px 12px}
.rep-trend{display:flex;align-items:flex-end;gap:3px;height:140px;padding:6px 2px 0;overflow-x:auto}
.rep-trend .tr-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:16px;flex:1 0 16px;height:100%}
.rep-trend .tr-bar{width:70%;min-height:2px;background:linear-gradient(180deg,#6366f1,#4f46e5);border-radius:3px 3px 0 0}
.rep-trend .tr-lbl{font-size:9px;color:var(--muted);transform:rotate(-55deg);transform-origin:center;white-space:nowrap;height:26px}
.rep-tblwrap{padding:14px 16px;margin-top:14px}
.rep-th{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.rep-th h3{margin:0;font-size:15px;font-weight:700}
.rep-tbl th,.rep-tbl td{white-space:nowrap}
.rep-tbl td.num,.rep-tbl th.num{text-align:right}
@media (max-width:820px){ .rep-filters .rf input,.rep-filters .rf select{min-width:120px} .rep-quick{margin-left:0} }

/* ---- Assign Task ---- */
.m-assign{border:1px solid var(--indigo);background:color-mix(in srgb,var(--indigo) 9%,#fff);color:var(--indigo);border-radius:8px;padding:5px 11px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.m-assign:hover{background:var(--indigo);color:#fff}
.at-ctx{background:#f6f7fb;border:1px solid var(--line);border-radius:9px;padding:9px 12px;margin-bottom:12px;font-size:13px}
.at-ctx .status-pill{margin-left:2px}

/* ---- Settings: Targets & Rules config editor ---- */
.cfg-sec{font-weight:800;font-size:14px;color:var(--txt);margin:18px 0 8px;padding-top:12px;border-top:1px solid var(--line)}
.cfg-sec:first-of-type{border-top:none;padding-top:0}
.cfg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px 14px}
.cfg-f{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--muted)}
.cfg-f.ff-wide{grid-column:1/-1}
.cfg-f input,.cfg-f select{border:1px solid var(--line);border-radius:9px;padding:8px 10px;font:inherit;color:var(--txt)}
.cfg-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap}
.cfg-row input,.cfg-row select{border:1px solid var(--line);border-radius:9px;padding:7px 9px;font:inherit}
.cfg-rm{color:var(--red);cursor:pointer;font-weight:700;padding:0 6px;flex:0 0 auto}
.cfg-rm:hover{color:#b91c1c}

/* ---- KRA/KPI Scorecard ---- */
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.sc-card{background:#fff;border:1px solid var(--line);border-left:5px solid #cbd5e1;border-radius:12px;padding:14px 16px}
.sc-card.sc-b-green{border-left-color:var(--green)}.sc-card.sc-b-amber{border-left-color:#d97706}.sc-card.sc-b-red{border-left-color:var(--red)}
.sc-head{display:flex;align-items:center;justify-content:space-between}
.sc-nm{font-weight:800;font-size:15px}
.sc-score{font-weight:800;font-size:14px;border-radius:999px;padding:3px 12px;color:#fff}
.sc-pill-green{background:var(--green)}.sc-pill-amber{background:#d97706}.sc-pill-red{background:var(--red)}
.sc-sub{color:var(--muted);font-size:12.5px;margin:3px 0 10px}
.sc-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px}
.sc-chip{border:1px solid var(--line);border-radius:9px;padding:6px 8px;background:#fafbff}
.sc-chip.sc-green{background:var(--green-bg)}.sc-chip.sc-amber{background:#fef3c7}.sc-chip.sc-red{background:#fde8e8}
.sc-cl{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.sc-cv{font-size:13px;font-weight:800;color:var(--txt);margin-top:1px}
.sc-ct{font-weight:600;color:var(--muted);font-size:11px}
.sc-cp{font-size:11px;font-weight:700;color:var(--muted)}

.md-carry{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;max-width:760px}

.lv-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;align-items:end;margin-bottom:12px;max-width:820px}

/* ---- discount approval badge + CEO daily summary ---- */
.appr-badge{font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;margin-left:6px}
.appr-pend{background:#fef3c7;color:#92400e}
.appr-ok{background:var(--green-bg);color:#046c4e}
.ceo-daily{background:linear-gradient(90deg,#eef2ff,#f8fafc);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:14px}
.cd-h{font-weight:800;font-size:13px;margin-bottom:8px;color:var(--txt)}
.cd-row{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--muted)}
.cd-row b{color:var(--txt);font-size:15px}
.cd-row .cd-warn b{color:var(--red)}

/* ---- rich-text / resizable line-description boxes (quotation & invoice) ---- */
.detail-cell{ min-width:240px; }
.rt-tb{ display:flex; gap:4px; margin-bottom:3px; }
.rt-b{ width:22px; height:22px; padding:0; border:1px solid #cbd5e1; border-radius:4px; background:#fff; cursor:pointer; line-height:1; }
.rt-b:hover{ background:#eef2ff; border-color:#6366f1; }
.rt-fs{ height:22px; font-size:12px; border:1px solid #cbd5e1; border-radius:4px; background:#fff; }
.rich-detail{ display:block; min-width:220px; min-height:46px; max-height:320px; border:1px solid #cbd5e1; border-radius:6px; padding:6px 8px; overflow:auto; resize:both; font-size:13px; line-height:1.4; background:#fff; white-space:pre-wrap; word-break:break-word; }
.rich-detail:empty:before{ content:attr(data-ph); color:#9ca3af; }
.rich-detail:focus{ outline:2px solid #6366f1; border-color:#6366f1; }
.qd-detail{ margin-top:3px; font-size:12px; color:#4b5563; }
.qd-detail b, .qd-detail strong{ font-weight:700; }
.qd-detail i, .qd-detail em{ font-style:italic; }
.qd-detail u{ text-decoration:underline; }
.qd-detail span{ line-height:1.3; }
#d_terms, #d_note{ resize:vertical; min-height:64px; }
#d_terms{ min-height:150px; }

/* ---- WhatsApp console ---- */
.wa-banner{background:#fffbeb;border:1px solid #fcd34d;border-left:4px solid #f59e0b;border-radius:8px;padding:12px 14px;margin-bottom:14px;color:#92400e}
.wa-pill{display:inline-block;background:#eef2ff;color:#3730a3;border-radius:999px;padding:2px 10px;font-size:12px;margin-right:6px}
.wa-mono{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#475569;white-space:pre-wrap}

/* ========================================================================
   Premium UI polish — appended last so it refines the base without
   restructuring. Focus: button breathing room, consistent spacing, depth.
   ======================================================================== */
:root{ --shadow:0 1px 2px rgba(27,24,80,.05), 0 12px 30px rgba(27,24,80,.07); }

/* Buttons: more room + smooth, premium interaction */
.btn{ padding:10px 16px; gap:8px; border-radius:11px;
  transition:background .15s ease, box-shadow .15s ease, transform .1s ease, border-color .15s ease; }
.btn:hover{ box-shadow:0 2px 10px rgba(27,24,80,.08); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); box-shadow:none; }
.btn.primary:hover{ box-shadow:0 6px 18px rgba(79,70,229,.28); }
.btn.sm{ padding:7px 13px; border-radius:9px; }
.iconbtn{ transition:background .15s ease, box-shadow .15s ease; }
.iconbtn:hover{ box-shadow:0 2px 8px rgba(27,24,80,.08); }

/* Toolbar row (was undefined) — used on WhatsApp + future pages */
.toolbar{ display:flex; align-items:center; gap:12px; margin:0 0 16px; flex-wrap:wrap; }
.toolbar .spacer{ flex:1; }

/* Page header: clearer separation */
.page-head{ gap:12px; margin:2px 2px 20px; }

/* Segmented tabs: roomier, premium */
.seg{ border-radius:11px; }
.seg button{ padding:9px 18px; font-size:14px; transition:background .15s ease, color .15s ease; }

/* Top bar: quick actions no longer cramped */
.topbar{ gap:10px; padding:11px 22px; }
.qa{ gap:8px; }

/* Tables: a touch more height for a legible, premium feel */
table.leads thead th{ padding:14px 16px; }
table.leads tbody td{ padding:13px 16px; }

/* Forms: roomier grid + a clean footer divider */
.form-body{ padding:20px 22px 22px; }
.form-grid{ gap:16px 20px; }
.form-foot{ gap:12px; margin-top:22px; padding-top:16px; border-top:1px solid var(--line); }
.m-head{ padding:15px 20px; }

/* Left nav: a little more vertical rhythm */
.nav a{ padding:11px 13px; margin:3px 0; }

/* WhatsApp console card: inset content so it isn't edge-to-edge */
#waBody{ padding:16px 18px; }
.doc-tools{ gap:12px; margin-bottom:16px; }

/* ---- invoice payment-milestone panel ---- */
.ms-card{margin-top:16px;border:1px solid var(--line,#e6e8f0);border-radius:12px;padding:14px 16px;background:#fff}
.ms-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ms-title{font-weight:800;font-size:15px;color:#2c2a63}
.ms-table{width:100%;border-collapse:collapse;font-size:13px}
.ms-table th{text-align:left;color:#6b7280;font-weight:600;padding:7px 10px;border-bottom:1px solid var(--line,#e6e8f0)}
.ms-table td{padding:8px 10px;border-bottom:1px solid #f1f2f7}
.ms-table tfoot td{font-weight:700;border-top:2px solid var(--line,#e6e8f0)}
.ms-pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600}
.ms-paid{background:#dcfce7;color:#166534}
.ms-partial{background:#fef3c7;color:#92400e}
.ms-pending{background:#eef2ff;color:#3730a3}
.ms-due{cursor:pointer;border-bottom:1px dashed #9aa1b4}
.ms-due:hover{color:var(--indigo,#4f46e5)}

/* ---- service-ticket SLA pills ---- */
.sla-pill{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600}
.sla-breach{background:#fee2e2;color:#b91c1c}
.sla-warn{background:#fef3c7;color:#92400e}
.sla-ok{background:#dcfce7;color:#166534}

/* ---- reusable premium rich-text editor (Terms, Notes, etc.) ---- */
.rbox{border:1px solid var(--line,#e6e8f0);border-radius:12px;overflow:hidden;background:#fff}
.rbox-tb{display:flex;align-items:center;gap:3px;padding:6px 8px;background:#f8f9fe;border-bottom:1px solid var(--line,#e6e8f0);flex-wrap:wrap}
.rbox-b{min-width:28px;height:28px;padding:0 7px;border:1px solid transparent;border-radius:7px;background:transparent;color:#475067;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
.rbox-b:hover{background:#fff;border-color:var(--line,#e6e8f0);color:var(--indigo,#4f46e5)}
.rbox-b:active{background:#eef2ff}
.rbox-sep{width:1px;height:18px;background:var(--line,#e6e8f0);margin:0 4px}
.rbox-fs{height:28px;border:1px solid var(--line,#e6e8f0);border-radius:7px;background:#fff;font-size:12px;color:#475067;padding:0 6px;cursor:pointer}
.rbox-area{padding:11px 13px;font-size:13px;line-height:1.55;color:var(--text,#1f2430);outline:none;overflow:auto;max-height:320px;resize:vertical;white-space:pre-wrap;word-break:break-word}
.rbox-area:empty:before{content:attr(data-ph);color:#9aa1b4}
.rbox:focus-within{border-color:var(--indigo,#4f46e5);box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.rbox-area ul,.rbox-area ol{margin:4px 0 4px 22px}
.qd-terms .t b,.qd-terms .t strong{font-weight:700}.qd-terms .t u{text-decoration:underline}.qd-terms .t i,.qd-terms .t em{font-style:italic}

/* ---- Multi-agent WhatsApp Inbox ---- */
.wi-wrap{display:flex;height:70vh;min-height:440px;border:1px solid var(--line,#e6e8f0);border-radius:12px;overflow:hidden;background:#fff}
.wi-list{width:340px;max-width:42%;border-right:1px solid var(--line,#e6e8f0);display:flex;flex-direction:column;min-width:0}
.wi-lhead{padding:10px;border-bottom:1px solid var(--line,#e6e8f0)}
.wi-search{width:100%;border:1px solid var(--line,#e6e8f0);border-radius:9px;padding:8px 11px;font:inherit;outline:none}
.wi-search:focus{border-color:var(--indigo,#4f46e5);box-shadow:0 0 0 3px rgba(79,70,229,.1)}
.wi-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.wi-chip{border:1px solid var(--line,#e6e8f0);background:#fff;border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer;color:#475067}
.wi-chip.on{background:var(--indigo,#4f46e5);border-color:var(--indigo,#4f46e5);color:#fff}
.wi-chip b{margin-left:4px;opacity:.8}
.wi-convs{flex:1;overflow:auto}
.wi-conv{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid #f1f2f7;cursor:pointer;align-items:center}
.wi-conv:hover{background:#f7f8fe}
.wi-conv.on{background:#eef2ff}
.wi-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;display:grid;place-items:center;font-weight:700;flex:0 0 auto;font-size:14px}
.wi-cmid{flex:1;min-width:0}
.wi-cname{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wi-cprev{color:#6b7280;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.wi-cmeta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.wi-ctime{font-size:11px;color:#9aa1b4}
.wi-badge{background:#25D366;color:#fff;border-radius:999px;min-width:18px;height:18px;padding:0 5px;font-size:11px;display:grid;place-items:center}
.wi-tag{font-size:10px;border-radius:5px;padding:1px 6px;background:#eef2ff;color:#3730a3}
.wi-chat{flex:1;display:flex;flex-direction:column;min-width:0;background:#f5f6fb}
.wi-chhead{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line,#e6e8f0);flex-wrap:wrap}
.wi-contact{display:flex;flex-direction:column;min-width:110px;flex:1}
.wi-contact strong{font-size:14px}
.wi-contact small{font-size:11px;color:#7b8498;margin-top:2px}
.wi-select{border:1px solid var(--line,#e6e8f0);border-radius:8px;background:#fff;padding:7px 8px;font:inherit;font-size:12px;color:#384152;outline:none}
.wi-select:focus{border-color:var(--indigo,#4f46e5)}
.wi-no-lead{font-size:12px;color:#9aa1b4}
.wi-back{display:none}
.wi-thread{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background-image:radial-gradient(rgba(79,70,229,.045) 1px,transparent 1px);background-size:16px 16px}
.wi-msg{max-width:72%;padding:8px 11px;border-radius:12px;font-size:13px;line-height:1.4;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 1px rgba(15,23,42,.04)}
.wi-in{align-self:flex-start;background:#fff;border:1px solid var(--line,#e6e8f0)}
.wi-out{align-self:flex-end;background:#dcf8c6}
.wi-mt{font-size:10px;color:#8a93a6;margin-top:3px;text-align:right}
.wi-comp{padding:10px;background:#fff;border-top:1px solid var(--line,#e6e8f0)}
.wi-comp textarea{width:100%;border:1px solid var(--line,#e6e8f0);border-radius:10px;padding:9px 11px;font:inherit;resize:vertical;min-height:46px;outline:none}
.wi-comp textarea:focus{border-color:var(--indigo,#4f46e5);box-shadow:0 0 0 3px rgba(79,70,229,.08)}
.wi-comp-actions{display:flex;justify-content:flex-end;margin-top:7px}
.wi-note{font-size:11px;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:7px;padding:5px 9px;margin-bottom:7px}
.wi-empty{flex:1;display:grid;place-items:center;color:#9aa1b4;text-align:center;padding:24px}
.wi-empty .btn{margin-top:10px}
@media(max-width:820px){.wi-wrap{height:78vh}.wi-list{width:100%;max-width:100%}.wi-wrap.wi-show-chat .wi-list{display:none}.wi-wrap:not(.wi-show-chat) .wi-chat{display:none}.wi-wrap.wi-show-chat .wi-chat{display:flex}.wi-back{display:inline-flex}.wi-chhead{padding:9px 10px}.wi-contact{min-width:90px}.wi-select{max-width:120px}.wi-msg{max-width:86%}}

/* ---- Staff form: avatar, flags, per-module permission toggles (365CRM-style) ---- */
.st-avatar{display:flex;align-items:center;justify-content:center;margin:2px auto 10px;position:relative;width:88px;height:88px}
.st-ava-img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid #e5e7eb}
.st-ava-ph{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#eef2ff;color:#4f46e5;font-size:32px;font-weight:700;border:2px solid #e5e7eb}
.st-ava-btn{position:absolute;bottom:0;right:0;width:28px;height:28px;border-radius:50%;background:#4f46e5;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;border:2px solid #fff}
.st-flags{display:flex;flex-wrap:wrap;gap:18px;margin:12px 2px 2px}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px 14px;margin:8px 2px 2px}
.perm-tog{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;user-select:none}
.perm-tog input{position:absolute;opacity:0;width:0;height:0}
.perm-sw{flex:0 0 auto;width:34px;height:20px;border-radius:20px;background:#cbd5e1;position:relative;transition:background .15s}
.perm-sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.perm-tog input:checked + .perm-sw{background:#4f46e5}
.perm-tog input:checked + .perm-sw::after{transform:translateX(14px)}
.perm-tog input:focus-visible + .perm-sw{box-shadow:0 0 0 3px rgba(79,70,229,.25)}
.perm-lbl{color:#111827}