/* Agent desk — Pipeline › Opportunities (ADR 0025). Storefront tokens only.
   Five stage columns that scroll sideways on a phone; every card has a Move
   select so touch screens never depend on drag and drop. */

.opp-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 12px}
.opp-kpi{display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.opp-kpi span{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.opp-kpi b{font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opp-kpi small{font-size:12px;color:var(--muted)}
.opp-kpi.is-accent{border-color:#c7d2e6;background:linear-gradient(180deg,var(--soft-blue),var(--card) 75%)}
.opp-kpi.is-accent b{color:var(--accent)}

.opp-proj{margin:0 0 12px;padding:12px 14px}
.opp-proj summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;cursor:pointer;list-style:none}
.opp-proj summary::-webkit-details-marker{display:none}
.opp-proj summary b{font-size:14px}
.opp-proj ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px}
.opp-proj li{display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:13px}
.opp-proj-name{font-weight:600;white-space:nowrap}
.opp-proj-track{height:8px;border-radius:999px;background:#eef2f7;overflow:hidden}
.opp-proj-track span{display:block;height:100%;border-radius:999px;background:var(--accent)}
.opp-proj li.is-overdue .opp-proj-name{color:var(--bad)}
.opp-proj li.is-overdue .opp-proj-track span{background:var(--bad)}
.opp-proj li.is-nodate .opp-proj-track span{background:#cbd5e1}
.opp-proj li b{font-variant-numeric:tabular-nums}

.opp-board{display:grid;grid-template-columns:repeat(5,minmax(200px,1fr));gap:10px;align-items:start;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
/* position: the cards' visually-hidden labels are absolutely positioned; a
   positioned column keeps them inside the board's scroller, or they stretch
   the page to the width of the off-screen columns. */
.opp-col{position:relative;display:flex;flex-direction:column;min-width:0;min-height:220px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--opp-stage,#cbd5e1);border-radius:var(--radius);scroll-snap-align:start}
.opp-col.is-qualified{--opp-stage:#93a8c9}
.opp-col.is-proposal{--opp-stage:#d9a441}
.opp-col.is-negotiation{--opp-stage:var(--accent)}
.opp-col.is-won{--opp-stage:var(--ok)}
.opp-col.is-lost{--opp-stage:#94a3b8}
.opp-col.is-over{border-color:var(--accent);box-shadow:0 6px 18px rgba(19,30,66,.12)}
.opp-col header{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-bottom:1px solid var(--line)}
.opp-col header > div:first-child{display:flex;align-items:center;gap:6px;font-size:13px}
.opp-col header > div:first-child b{flex:1 1 auto}
.opp-pct{font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:var(--radius-chip);padding:0 6px}
.opp-count{font-size:12px;font-weight:600;color:var(--muted)}
.opp-col-sum{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.opp-col-sum span{font-size:11.5px;color:var(--muted);white-space:nowrap}
.opp-col-body{display:flex;flex-direction:column;gap:8px;padding:8px}

.opp-card{display:flex;flex-direction:column;gap:5px;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);cursor:grab;min-width:0}
.opp-card.is-dragging{opacity:.5}
.opp-card.is-pending{opacity:.6;cursor:progress}
.opp-card-name{padding:0;border:0;background:none;font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);text-align:left;cursor:pointer;overflow-wrap:anywhere}
.opp-card-name:hover{color:var(--accent);text-decoration:underline}
.opp-card-acct{font-size:12.5px;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opp-card-money{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 8px;font-variant-numeric:tabular-nums}
.opp-card-money span{font-size:12px;color:var(--muted)}
.opp-card-money em{font-style:normal;font-weight:700;color:var(--accent)}
.opp-card-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;font-size:12px;color:var(--muted)}
.opp-card-meta .is-overdue{color:var(--bad);font-weight:700}
.opp-move{width:100%;height:30px;border:1px solid var(--line);border-radius:var(--radius-chip);background:#fff;font-size:12.5px;padding:0 6px}

.opp-form{margin:0 0 14px;padding:16px}
.opp-form h2{margin:0 0 12px;font-size:17px}
.opp-form .field{margin:0 0 12px}
.opp-form .field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:5px}
.opp-form input,.opp-form select,.opp-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--radius-chip);padding:8px 10px;font:inherit;font-size:14px;background:#fff}
.opp-form select[size]{height:auto;padding:4px}
.opp-form [aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
.opp-form .sub{margin:5px 0 0;font-size:12px}
.opp-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opp-form-error{margin:0 0 12px;padding:10px 12px;border-radius:var(--radius);background:#fef2f2;color:var(--bad);font-size:13px}
.opp-form-error[hidden]{display:none}
.opp-form-actions{display:flex;justify-content:flex-end;gap:8px}

/* Filters beside the search: close period and Needs attention. */
.opp-filter{height:34px;border:1px solid var(--line);border-radius:var(--radius-chip);background:#fff;font:inherit;font-size:13px;padding:0 8px;max-width:190px}
.opp-attn{display:inline-flex;align-items:center;gap:6px}
.opp-attn-n{min-width:20px;height:18px;padding:0 6px;border-radius:999px;background:#fdecea;color:var(--bad);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.opp-attn-n:empty{display:none}
.opp-attn.is-on{background:var(--bad);border-color:var(--bad);color:#fff}
.opp-attn.is-on .opp-attn-n{background:#fff;color:var(--bad)}

/* Card chips: days in stage (red when stale), the next step, a lost reason. */
.opp-card.is-stale{border-color:#f3c4bf;box-shadow:inset 3px 0 0 var(--bad),var(--shadow)}
.opp-card-chips{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.opp-chip{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:600;color:var(--muted);background:#f1f5f9;border:1px solid var(--line);white-space:nowrap}
.opp-chip.is-stale{color:var(--bad);background:#fdecea;border-color:#f5c2bd}
.opp-chip.is-lost{color:#475569;background:#f1f5f9}
.opp-next{display:inline-flex;align-items:center;gap:5px;flex:1 1 100%;min-width:0;height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;color:var(--ink);background:#fff;border:1px solid var(--line)}
.opp-next svg{flex:none;color:var(--accent)}
.opp-next-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.opp-next b{margin-left:auto;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.opp-next.is-none{color:var(--warn);background:#fff7e6;border-color:#f6d9a8;font-weight:600}
.opp-next.is-late{border-color:#f5c2bd}
.opp-next.is-late b{color:var(--bad)}

/* Why a deal was lost. */
.opp-lost-back .modal{max-width:520px}
.opp-lost h2{margin:0 24px 6px 0;font-size:18px}
.opp-lost > .sub{margin:0 0 12px;font-size:13px}
.opp-lost-reasons{border:0;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.opp-lost-reason{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--radius);font-size:13.5px;cursor:pointer;background:#fff}
.opp-lost-reason:hover{border-color:#b8c3d6}
.opp-lost-reason:has(input:checked){border-color:var(--accent);background:var(--soft-blue);font-weight:600}
.opp-lost-reason input{accent-color:var(--accent);margin:0}
.opp-lost .field{margin:0 0 12px}
.opp-lost .field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:5px}
.opp-lost textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--radius-chip);padding:8px 10px;font:inherit;font-size:14px;resize:vertical}
.opp-lost .sub{font-size:12px}

/* The deal panel: a sheet on the right on a desktop, full screen on a phone. */
.opp-sheet-back{justify-content:flex-end;align-items:stretch;padding:0}
.opp-sheet-back .modal{max-width:560px;width:100%;max-height:none;height:100%;border-radius:14px 0 0 14px;padding:22px 22px 16px;display:flex;flex-direction:column;animation:opp-slide .18s ease}
@keyframes opp-slide{from{transform:translateX(28px);opacity:.6}to{transform:none;opacity:1}}
.opp-sheet{display:flex;flex-direction:column;gap:14px;min-height:0}
.opp-sheet-head h2{margin:0 28px 2px 0;font-size:19px;letter-spacing:-.01em}
.opp-sheet-head .sub{margin:0;font-size:13px}
.opp-sheet-head a{color:var(--accent)}
.opp-path{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.opp-step{flex:1 1 0;min-width:0}
.opp-step button{width:100%;height:32px;padding:0 4px;border:1px solid var(--line);border-radius:999px;background:#f8fafc;color:var(--muted);font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opp-step button:hover:not(:disabled){border-color:#b8c3d6;color:var(--ink)}
.opp-step.is-done button{background:var(--soft-blue);color:var(--accent);border-color:#c7d2e6}
.opp-step.is-current button{background:var(--accent);color:#fff;border-color:var(--accent);cursor:default}
.opp-step.is-current.is-won button{background:var(--ok);border-color:var(--ok)}
.opp-step.is-current.is-lost button{background:#64748b;border-color:#64748b}
.opp-step button:disabled:not([aria-current]){opacity:.6;cursor:progress}
.opp-sheet-lost,.opp-sheet-won{padding:10px 12px;border-radius:var(--radius);font-size:13px}
.opp-sheet-lost{background:#f1f5f9;border:1px solid var(--line)}
.opp-sheet-lost p{margin:4px 0 0;color:#475569}
.opp-sheet-won{background:#ecfdf3;border:1px solid #bbf7d0;color:#166534;font-weight:600}
.opp-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.opp-facts > div{min-width:0}
.opp-facts dt{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.opp-facts dd{margin:0;font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.opp-facts dd.is-overdue{color:var(--bad);font-weight:700}
.opp-facts dd a{color:var(--accent)}
.opp-facts select{height:32px;max-width:100%;border:1px solid var(--line);border-radius:var(--radius-chip);background:#fff;font:inherit;font-size:13px;padding:0 6px}
.opp-money{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.opp-sheet-sec h3{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.opp-sheet-sec-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.opp-sheet-sec-head h3{margin:0}
.opp-notes{margin:0;font-size:13.5px;line-height:1.5;white-space:pre-wrap}
.opp-tasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.opp-task{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.opp-task-ico{width:26px;height:26px;border-radius:7px;background:var(--soft-blue);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;flex:none}
.opp-task-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.opp-task-body a{font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.opp-task-body a:hover{text-decoration:underline}
.opp-task-body .sub{font-size:12px}
.opp-task.is-late .opp-task-body .sub{color:var(--bad);font-weight:600}
.opp-task.is-done{opacity:.65}
.opp-task.is-done .opp-task-body a{text-decoration:line-through}
.opp-empty{margin:0;font-size:13px}
.opp-timeline{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:10px}
.opp-event{position:relative}
.opp-event::before{content:"";position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid #cbd5e1}
.opp-event.is-stage::before{border-color:var(--accent)}
.opp-event.is-created::before{border-color:var(--ok)}
.opp-event p{margin:0;font-size:13px;line-height:1.45}
.opp-event time{font-size:11.5px;color:var(--muted)}
.opp-sheet-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.opp-sheet .linklike,.desk-detail-props .linklike{padding:0;border:0;background:none;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer;text-align:left}

@media (max-width:900px){
  .opp-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opp-board{grid-template-columns:repeat(5,minmax(260px,1fr));scroll-snap-type:x mandatory}
}
@media (max-width:560px){
  .opp-kpi b{font-size:19px}
  .opp-board{grid-template-columns:repeat(5,minmax(80vw,1fr))}
  .opp-form-row{grid-template-columns:minmax(0,1fr)}
  .opp-proj li{grid-template-columns:78px minmax(0,1fr) auto}
  .opp-sheet-back .modal{border-radius:0;max-width:none}
  .opp-path{flex-wrap:wrap}
  .opp-step{flex:1 1 30%}
  .opp-lost-reasons{grid-template-columns:minmax(0,1fr)}
  .opp-filter{max-width:none;flex:1 1 40%}
}