/* Lugoda Sentinel — CRM view: account table, tier badges, pipeline stepper, detail panel.
   Also hosts a few small helpers shared by the portfolio (service-line) workspaces. */

/* account table */
.crm-table td{vertical-align:middle}
.crm-table .crm-lines{max-width:300px}
.crm-table .crm-lines .chip{margin:1px 3px 1px 0}

/* sortable column headers */
.crm-table th.sortable{cursor:pointer;user-select:none;white-space:nowrap;transition:color .15s}
.crm-table th.sortable:hover{color:var(--txt)}
.crm-table th.sortable.active{color:#ffd9da}
.crm-table th.sortable .sort-ind{font-size:9px;color:var(--red);margin-left:1px}
.crm-table th.sortable:not(.active):hover .sort-ind::after{content:'↕';color:var(--muted);font-size:9px}

/* tier badge */
.crm-tier{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;display:inline-block;
  background:#2c2c34;color:#cfcfd6;border:1px solid var(--line)}
.crm-tier.t3{background:#241416;color:#ff9b9b;border-color:var(--red-dark)}
.crm-tier.t2{background:#3a2c11;color:var(--amber);border-color:#574013}
.crm-tier.t1{background:#102536;color:var(--blue);border-color:#15405e}

/* renewal emphasis */
.crm-renew-soon{color:var(--amber);font-weight:600}
.crm-renew-past{color:#ff8b8b;font-weight:600}

/* detail: contact block + scope */
.crm-contact{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-top:14px}
.crm-k{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}
.crm-v{font-size:15px;font-weight:600;margin-top:2px}
.crm-scope{font-size:12px;margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.crm-detail-grid{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px 16px}

/* pipeline stepper — horizontal connected nodes */
.pipeline{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.pl-node{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:90px;text-align:center}
.pl-dot{width:18px;height:18px;border-radius:50%;background:#33333c;border:2px solid var(--line);
  transition:.2s;position:relative}
.pl-label{font-size:11px;color:var(--muted)}
.pl-line{flex:1;height:2px;background:var(--line);min-width:14px;margin-top:-18px}
.pl-node.done .pl-dot{background:var(--green);border-color:var(--green)}
.pl-node.done .pl-label{color:#bfe6d6}
.pl-node.active .pl-dot{background:var(--red);border-color:var(--red);box-shadow:0 0 0 4px rgba(225,27,34,.22)}
.pl-node.active .pl-label{color:#fff;font-weight:700}

@media(max-width:640px){
  .pl-node{min-width:64px}
  .pl-label{font-size:10px}
}

/* ===== shared helpers for portfolio (service-line) workspaces ===== */
.pf-startcard .cbody{display:flex;gap:10px;flex-wrap:wrap}
.pf-catgroup{margin-bottom:8px}
.pf-mfr-head{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);
  padding:10px 16px 4px;font-weight:700}
.pf-lead{font-variant-numeric:tabular-nums;color:var(--amber);font-weight:600;font-size:12px}
.pf-cat-sub{font-size:11px;color:var(--muted)}
.pf-cat-spec{font-size:11px;color:#cfcfd6}
.pf-mfr-head .count{margin-left:6px}
th.num,td.num{text-align:right}
.pf-price{font-variant-numeric:tabular-nums;white-space:nowrap}
.pf-cat-note{font-size:11px;border-bottom:1px solid var(--ink2)}
.pf-quote-act{margin-left:auto;padding-left:10px}

/* ===== multi-branch (client → branches → equipment + access windows) ===== */
.crm-branchbadge{display:inline-block;font-size:10px;font-weight:700;color:#cfd8ff;
  background:#16213a;border:1px solid #2c3e63;border-radius:999px;padding:1px 8px;margin-left:6px;letter-spacing:.3px}
.crm-branch{border:1px solid var(--ink2);border-radius:10px;margin:8px 0;overflow:hidden;background:var(--panel2)}
.crm-branch .lrow{border-bottom:none}
.crm-access{padding:2px 16px 12px 70px}
.crm-access-hd{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin:2px 0 6px}
.crm-access-row{display:flex;flex-direction:column;gap:1px;padding:5px 10px;border-left:2px solid #2c3e63;
  margin:4px 0;background:#15161c;border-radius:0 8px 8px 0}
.crm-access-row b{font-size:12px;color:#dfe4ff}
.crm-access-row span{font-size:11px;color:var(--muted)}
@media(max-width:640px){.crm-access{padding-left:16px}}