.customer-home-viewbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.customer-home-viewtabs{display:inline-flex;align-items:center;padding:3px;border:1px solid var(--line-2);border-radius:8px;background:#fff;box-shadow:0 4px 16px rgba(33,43,54,.05)}
.customer-home-viewtab{height:32px;padding:0 13px;border-radius:6px;color:var(--t2);font-size:12px;font-weight:800}
.customer-home-viewtab:hover{color:var(--terminal-accent)}
.customer-home-viewtab.active{background:#e8f3ee;color:#0f6154}
.customer-home-viewtab[hidden]{display:none}
.customer-home-viewhint{font-size:11px;color:var(--t3)}
.customer-home-grid[hidden],#customerHomeTeamFollowup[hidden]{display:none}

.tf-shell{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.tf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:15px 16px;border-bottom:1px solid var(--line)}
.tf-head h2{font-size:16px;line-height:1.3;color:var(--t1);margin:0}
.tf-head p{font-size:11px;color:var(--t3);margin:3px 0 0}
.tf-refresh{height:30px;padding:0 10px;border:1px solid var(--line-2);border-radius:6px;background:#fff;color:var(--t2);font-size:11px;font-weight:800}
.tf-refresh:hover{border-color:var(--terminal-accent);color:var(--terminal-accent)}
.tf-refresh:disabled{cursor:wait;opacity:.55}

.tf-segments{display:flex;align-items:center;gap:4px;padding:10px 16px 0}
.tf-segment{height:30px;padding:0 12px;border-radius:6px;color:var(--t2);font-size:11.5px;font-weight:800;background:#f3f5f4}
.tf-segment.active{background:var(--terminal-accent);color:#fff}
.tf-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) minmax(150px,.38fr) minmax(150px,.38fr);gap:8px;padding:10px 16px 13px;border-bottom:1px solid var(--line)}
.tf-field{height:34px;width:100%;border:1px solid var(--line-2);border-radius:6px;background:#fff;padding:0 10px;font-size:11.5px;color:var(--t2);outline:0}
.tf-field:focus{border-color:var(--terminal-accent);box-shadow:0 0 0 2px rgba(15,122,104,.09)}
.tf-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line);background:#fbfcfb}
.tf-metric{padding:12px 16px;border-right:1px solid var(--line)}
.tf-metric:last-child{border-right:0}
.tf-metric .k{font-size:10.5px;color:var(--t3);font-weight:800}
.tf-metric .v{font-size:21px;line-height:1.15;color:var(--t1);font-weight:900;margin-top:3px}
.tf-metric.alert .v{color:#ad4337}
.tf-metric.warn .v{color:#a76b26}

.tf-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;min-height:310px}
.tf-main{min-width:0}
.tf-list{display:flex;flex-direction:column}
.tf-row{display:grid;grid-template-columns:minmax(190px,1.1fr) minmax(135px,.65fr) minmax(240px,1.35fr) auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(17,17,17,.055)}
.tf-row:last-child{border-bottom:0}
.tf-row:hover{background:#fbfdfc}
.tf-company{font-size:12.5px;font-weight:850;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-contact,.tf-meta,.tf-time{font-size:10.5px;color:var(--t3);margin-top:2px;line-height:1.45}
.tf-owner{font-size:11.5px;font-weight:800;color:var(--t2)}
.tf-state{display:inline-flex;align-items:center;min-height:21px;padding:2px 7px;border-radius:999px;background:#eef3f1;color:#486156;font-size:10px;font-weight:850;margin-top:4px}
.tf-state.overdue{background:#fff0ee;color:#a83e32}
.tf-state.needs_help{background:#fff5df;color:#94621e}
.tf-state.closed{background:#eff1f2;color:#6b737c}
.tf-outcome{font-size:11.5px;color:var(--t2);line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:break-word}
.tf-next{font-size:10.5px;color:#476c5c;margin-top:4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;overflow-wrap:anywhere;word-break:break-word}
.tf-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.tf-btn{height:28px;padding:0 9px;border:1px solid var(--line-2);border-radius:6px;background:#fff;color:var(--t2);font-size:10.5px;font-weight:800;white-space:nowrap}
.tf-btn:hover{border-color:var(--terminal-accent);color:var(--terminal-accent)}
.tf-btn.primary{background:var(--terminal-accent);border-color:var(--terminal-accent);color:#fff}
.tf-btn:disabled{cursor:not-allowed;opacity:.45}
.tf-empty,.tf-error,.tf-loading{padding:30px 18px;text-align:center;color:var(--t3);font-size:12px}
.tf-error{color:#9b4a40;background:#fff9f8}
.tf-pagination{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:10px 16px;border-top:1px solid var(--line);font-size:11px;color:var(--t3)}

.tf-activity{border-left:1px solid var(--line);background:#fbfcfb;min-width:0}
.tf-activity-head{padding:13px 14px;border-bottom:1px solid var(--line)}
.tf-activity-head strong{display:block;font-size:12.5px;color:var(--t1)}
.tf-activity-head span{font-size:10.5px;color:var(--t3)}
.tf-activity-list{max-height:430px;overflow:auto}
.tf-activity-item{padding:10px 14px;border-bottom:1px solid rgba(17,17,17,.055)}
.tf-activity-item .title{font-size:11.5px;font-weight:800;color:var(--t2);line-height:1.45;overflow-wrap:anywhere;word-break:break-word}
.tf-activity-item .detail{font-size:10.5px;color:var(--t3);line-height:1.45;margin-top:2px;overflow-wrap:anywhere;word-break:break-word}

.tf-dialog{width:min(720px,calc(100vw - 28px));max-height:calc(100vh - 36px);padding:0;border:1px solid var(--line-2);border-radius:8px;background:#fff;color:var(--t1);box-shadow:0 24px 70px rgba(24,34,30,.22);overflow:auto}
.tf-dialog::backdrop{background:rgba(17,25,22,.36)}
.tf-dialog-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);background:#fff}
.tf-dialog-head h3{font-size:16px;margin:0}
.tf-dialog-head p{font-size:11px;color:var(--t3);margin:3px 0 0}
.tf-dialog-close{width:30px;height:30px;border:1px solid var(--line-2);border-radius:6px;background:#fff;color:var(--t2);font-size:18px;line-height:1}
.tf-dialog-body{padding:16px 18px}
.tf-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.tf-detail-cell{border-bottom:1px solid var(--line);padding:6px 0 9px}
.tf-detail-cell .k{font-size:10px;color:var(--t3);font-weight:800}
.tf-detail-cell .v{font-size:12px;color:var(--t1);margin-top:2px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.tf-history-title{font-size:12px;font-weight:850;margin:15px 0 7px}
.tf-history{border:1px solid var(--line);border-radius:7px;overflow:hidden}
.tf-history-item{padding:10px 12px;border-bottom:1px solid var(--line)}
.tf-history-item:last-child{border-bottom:0}
.tf-history-item .meta{font-size:10px;color:var(--t3)}
.tf-history-item .summary{font-size:11.5px;color:var(--t2);line-height:1.55;margin-top:3px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.tf-history-item .next{font-size:10.5px;color:#476c5c;margin-top:3px;overflow-wrap:anywhere;word-break:break-word}
.tf-dialog-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:15px}
.tf-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tf-form label{display:grid;gap:4px;font-size:10.5px;color:var(--t3);font-weight:800}
.tf-form label.full{grid-column:1/-1}
.tf-form input,.tf-form select,.tf-form textarea{width:100%;border:1px solid var(--line-2);border-radius:6px;background:#fff;padding:8px 9px;color:var(--t1);font:inherit;outline:0}
.tf-form textarea{min-height:104px;resize:vertical;line-height:1.5}
.tf-form input:focus,.tf-form select:focus,.tf-form textarea:focus{border-color:var(--terminal-accent);box-shadow:0 0 0 2px rgba(15,122,104,.09)}
.tf-form-note{grid-column:1/-1;padding:9px 10px;border-radius:6px;background:#f2f7f4;color:#466153;font-size:11px;overflow-wrap:anywhere;word-break:break-word}
.tf-form-error{grid-column:1/-1;color:#a83e32;font-size:11px;min-height:17px;overflow-wrap:anywhere;word-break:break-word}
.tf-form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
.tf-confirm{grid-column:1/-1;padding:10px;border:1px solid #ead5ad;border-radius:6px;background:#fff9ec;color:#79551e;font-size:11px;line-height:1.5}

.customer-followup-strip{margin:12px 0 0;border:1px solid var(--line-2);border-radius:8px;background:#fff;overflow:hidden}
.customer-followup-strip[hidden]{display:none}
.tf-strip-row{display:grid;grid-template-columns:minmax(160px,.8fr) minmax(220px,1.25fr) minmax(220px,1.25fr) auto;gap:12px;align-items:center;padding:10px 13px}
.tf-strip-label{font-size:10px;color:var(--t3);font-weight:850;text-transform:uppercase}
.tf-strip-value{font-size:11.5px;color:var(--t2);margin-top:2px;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.tf-strip-empty{padding:10px 13px;color:var(--t3);font-size:11.5px}
.tf-strip-error{padding:9px 13px;color:#8b5a50;font-size:11px;background:#fff9f8}

@media(max-width:900px){
  .customer-home-viewbar{align-items:flex-start;flex-direction:column}
  .customer-home-viewtabs{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .customer-home-viewtab{padding:0 6px}
  .tf-toolbar{grid-template-columns:1fr 1fr}
  .tf-toolbar .tf-search{grid-column:1/-1}
  .tf-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tf-metric:nth-child(2){border-right:0}
  .tf-metric:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .tf-layout{grid-template-columns:1fr}
  .tf-activity{border-left:0;border-top:1px solid var(--line)}
  .tf-row{grid-template-columns:minmax(0,1fr) auto}
  .tf-row-owner,.tf-row-progress{grid-column:1/-1}
  .tf-actions{grid-column:2;grid-row:1;align-self:start}
  .tf-strip-row{grid-template-columns:1fr auto}
  .tf-strip-progress,.tf-strip-next{grid-column:1/-1}
}

@media(max-width:520px){
  .tf-head{padding:13px 12px}
  .tf-toolbar{grid-template-columns:1fr;padding:9px 12px 12px}
  .tf-toolbar .tf-search{grid-column:auto}
  .tf-segments{padding:9px 12px 0}
  .tf-summary{grid-template-columns:1fr 1fr}
  .tf-metric{padding:10px 12px}
  .tf-row{padding:12px;gap:8px}
  .tf-actions{flex-direction:column;align-items:stretch}
  .tf-btn{min-height:42px;height:42px;padding:0 10px}
  .tf-dialog{width:100%;max-height:92vh;border-radius:8px 8px 0 0;margin:auto 0 0}
  .tf-dialog-body,.tf-dialog-head{padding-left:14px;padding-right:14px}
  .tf-detail-grid,.tf-form{grid-template-columns:1fr}
  .tf-form label.full,.tf-form-note,.tf-form-error,.tf-form-actions,.tf-confirm{grid-column:1}
  .tf-form-actions{display:grid;grid-template-columns:1fr 1fr}
}
