body { margin: 0; font-family: Arial, sans-serif; background: #f5f6f8; color: #17202a; }
a { color: #1456cc; text-decoration: none; }
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 230px; background: #17202a; color: white; padding: 24px; box-sizing: border-box; }
.sidebar h2 { margin-top: 0; }
.sidebar a { display: block; color: white; padding: 10px 0; }
.sidebar-project { margin-bottom: 14px; }
.sidebar-project label { display: block; font-size: 12px; margin-bottom: 6px; color: #d0d5dd; }
.sidebar-project select { width: 100%; min-width: 0; background: #0f1720; color: white; border-color: #475467; }
.sidebar-message { font-size: 12px; color: #d0d5dd; margin: 8px 0 12px; }
.content { flex: 1; padding: 32px; overflow-x: auto; }
.muted { color: #667085; }
.actions { display: flex; gap: 12px; margin: 20px 0; align-items: center; }
button, .button { background: #17202a; color: white; border: 0; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-size: 14px; }
button:disabled { opacity: 0.6; cursor: wait; }
.secondary { background: #e5e7eb; color: #17202a; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 24px 0; }
.card { background: white; border-radius: 14px; padding: 18px; box-shadow: 0 1px 5px rgba(0,0,0,.08); }
.card strong { display: block; font-size: 32px; }
.card span { color: #667085; }
.card.danger strong { color: #b42318; }
.card.warning strong { color: #b54708; }
.alert { padding: 12px 16px; border-radius: 8px; margin: 16px 0; }
.error { background: #fee4e2; color: #b42318; }
.ok { background: #dcfae6; color: #067647; }
table { width: 100%; border-collapse: collapse; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 5px rgba(0,0,0,.08); }
th, td { padding: 10px 12px; border-bottom: 1px solid #eaecf0; text-align: left; vertical-align: top; }
th { background: #f9fafb; font-size: 13px; color: #475467; }
.filters { display: flex; gap: 12px; margin: 20px 0; flex-wrap: wrap; }
input, select { padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 8px; min-width: 240px; }
input[type="checkbox"], input[type="radio"] { min-width: 0; width: auto; padding: 0; border: 0; }

.pipeline-kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 14px 0 24px; }
.pipeline-column { background: #fff; border: 1px solid #e4e7ec; border-radius: 12px; padding: 12px; min-height: 120px; }
.pipeline-column h3 { margin: 0 0 8px; font-size: 15px; }
.pipeline-column.clickable { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.pipeline-column.clickable:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.card.clickable { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.card.clickable:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }

.funnel-wrap { background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 1px 5px rgba(0,0,0,.08); margin-bottom: 22px; }
.funnel-row { display: grid; grid-template-columns: minmax(130px, 180px) 1fr 110px; gap: 10px; align-items: center; margin: 8px 0; }
.funnel-label { font-size: 13px; color: #475467; }
.funnel-bar { height: 26px; background: linear-gradient(90deg,#1456cc,#1f7aff); border-radius: 6px; }
.funnel-conv { font-size: 12px; color: #667085; text-align: right; }

.pipeline-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.metric-row { display: grid; grid-template-columns: 140px 1fr 140px; gap: 10px; align-items: center; margin: 10px 0; font-size: 13px; }
.metric-bar-container { background: #eef2f7; border-radius: 8px; height: 18px; overflow: hidden; }
.metric-bar { background: #1456cc; height: 100%; }
.metric-bar.danger { background: #b42318; }

.critical-panel { display: grid; gap: 10px; margin: 12px 0 24px; }
.critical-item { background: #fff; border: 1px solid #fecdca; border-left: 4px solid #f04438; border-radius: 10px; padding: 10px 12px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }

.pipeline-master-detail { display: flex; flex-direction: column; gap: 12px; height: calc(100vh - 230px); min-height: 560px; }
.pipeline-master-pane { flex: 0 0 60%; min-height: 0; overflow: auto; padding-right: 4px; }
.pipeline-layout-divider { height: 2px; background: linear-gradient(90deg, #d0d5dd, #98a2b3, #d0d5dd); border-radius: 999px; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.pipeline-detail-pane { flex: 0 0 40%; min-height: 0; background: #fff; border: 1px solid #e4e7ec; border-radius: 12px; padding: 8px 10px; box-shadow: 0 1px 5px rgba(0,0,0,.08); display: flex; flex-direction: column; }
.pipeline-detail-pane-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pipeline-detail-pane-header h2 { margin: 0; font-size: 16px; line-height: 1.1; }
.pipeline-detail-pane-header button { padding: 6px 10px; font-size: 13px; border-radius: 6px; }
.pipeline-detail-pane p { margin: 4px 0; font-size: 12px; line-height: 1.25; }
.pipeline-detail-pane h3,
.pipeline-detail-pane h4 { margin: 4px 0; line-height: 1.15; }
.pipeline-detail-scroll { margin-top: 4px; overflow: auto; border: 1px solid #eaecf0; border-radius: 10px; min-height: 0; flex: 1; }
.pipeline-detail-scroll table { margin: 0; box-shadow: none; border-radius: 0; min-width: 720px; }
.pipeline-detail-scroll th { position: sticky; top: 0; z-index: 1; }
.pipeline-detail-scroll th,
.pipeline-detail-scroll td { padding: 6px 8px; font-size: 12px; line-height: 1.2; }

@media (max-width: 1100px) {
    .pipeline-master-detail { height: auto; min-height: 0; }
    .pipeline-master-pane { flex: initial; overflow: visible; }
    .pipeline-layout-divider { margin: 4px 0; }
    .pipeline-detail-pane { flex: initial; min-height: 280px; }
    .pipeline-detail-scroll { max-height: 360px; }
}

.task-page { display: grid; gap: 16px; }
.task-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.task-head h1 { margin: 0 0 4px; font-size: 28px; }
.task-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.task-section { padding: 20px; }
.task-section h3 { margin-top: 0; margin-bottom: 14px; font-size: 18px; }

.task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.task-item { background: #f9fafb; border: 1px solid #eaecf0; border-radius: 10px; padding: 10px 12px; }
.task-label { display: block; font-size: 12px; color: #667085; margin-bottom: 4px; }
.task-value { font-size: 14px; color: #101828; word-break: break-word; }

.task-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.field-group { display: grid; gap: 6px; }
.field-group label { font-size: 12px; color: #475467; font-weight: 600; }
.field-group input, .field-group select, .field-group textarea { min-width: 0; width: 100%; box-sizing: border-box; }
.field-group-wide { grid-column: 1 / -1; }

.mode-badge { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; width: fit-content; }
.mode-badge.auto { background: #ecfdf3; color: #067647; }
.mode-badge.manual { background: #eef4ff; color: #175cd3; }

.task-json-block { display: grid; gap: 10px; margin-top: 12px; }
.task-json-block pre { margin: 6px 0 0; background: #101828; color: #f2f4f7; border-radius: 8px; padding: 10px; font-size: 12px; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; }

.task-kv-list { margin-top: 8px; border: 1px solid #eaecf0; border-radius: 8px; overflow: hidden; }
.task-kv-row { display: grid; grid-template-columns: 240px 1fr; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #eaecf0; background: #fff; font-size: 13px; }
.task-kv-row:last-child { border-bottom: 0; }
.task-kv-key { color: #475467; font-weight: 600; }
.task-kv-value { color: #101828; word-break: break-word; }

.task-contact-row { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr 1fr 1fr auto; gap: 8px; padding: 8px; border-bottom: 1px solid #eaecf0; background: #fff; }
.task-contact-row:last-child { border-bottom: 0; }
.task-contact-row input { min-width: 0; }

.task-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 16px; }
.task-check-item { display: flex; align-items: center; gap: 8px; }
.field-group .task-check-item input[type="checkbox"] { margin: 0; width: 16px !important; height: 16px; min-width: 16px !important; padding: 0 !important; border: 0 !important; flex: 0 0 auto; }
.field-group .task-check-item label { margin: 0; font-size: 14px; color: #344054; font-weight: 500; line-height: 1.2; }

.task-tag-list { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.task-tag { display: inline-block; background: #eef4ff; color: #175cd3; border: 1px solid #c7d7fe; border-radius: 999px; font-size: 12px; font-weight: 600; padding: 2px 10px; }

.analysis-download { display: grid; gap: 20px; }
.analysis-download h1 { margin-top: 0; margin-bottom: 8px; }
.analysis-download .card h3 { margin-top: 0; }
.analysis-download .card h4 { margin-top: 24px; margin-bottom: 12px; font-size: 15px; }
.analysis-download ul { padding-left: 20px; }
.analysis-download ul li { margin-bottom: 8px; }
.preview-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
.preview-stat { background: #f9fafb; border: 1px solid #eaecf0; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.preview-label { font-size: 12px; color: #667085; font-weight: 600; }
.preview-value { font-size: 18px; font-weight: 700; color: #101828; }
.preview-value.danger { color: #b42318; }

/* Compact opportunity grid: scoped so the rest of the application is unaffected. */
.opportunities-table-wrap { width:100%; max-width:100%; overflow:auto; border:1px solid #e4e7ec; border-radius:8px; background:#fff; }
.opportunities-dense { width:max-content; min-width:100%; border-radius:0; box-shadow:none; table-layout:auto; }
.opportunities-dense th, .opportunities-dense td { padding:4px 7px; font-size:11px; line-height:1.25; vertical-align:middle; border-bottom:1px solid #edf0f3; white-space:nowrap; }
.opportunities-dense th { position:sticky; top:0; z-index:1; background:#edf2f7; font-size:11px; font-weight:700; }
.opportunities-dense tbody tr:hover { background:#f1f6ff; }
.opportunities-dense .num { text-align:right; font-variant-numeric:tabular-nums; }
.opportunities-dense .opportunities-name { max-width:280px; font-weight:600; white-space:normal; min-width:160px; }
.opportunities-dense td small { display:block; font-size:10px; font-weight:400; color:#667085; line-height:1.3; }
.opportunities-dense td:nth-child(3), .opportunities-dense td:nth-child(11) { max-width:210px; overflow:hidden; text-overflow:ellipsis; }

/* Fit the opportunity overview to the available viewport width, without horizontal scroll. */
.opportunities-table-wrap { overflow-x:hidden; width:100%; }
.opportunities-dense { width:100%; min-width:0; max-width:100%; table-layout:fixed; }
.opportunities-dense th, .opportunities-dense td {
  padding:3px 3px; font-size:9px; line-height:1.12;
  white-space:normal; overflow-wrap:anywhere; word-break:normal;
}
.opportunities-dense th { font-size:9px; }
.opportunities-dense td small { font-size:8px; }
.opportunities-dense .opportunities-name { min-width:0; max-width:none; }
.opportunities-dense td:nth-child(3), .opportunities-dense td:nth-child(11) {
  max-width:none; overflow:visible; text-overflow:clip;
}
.opportunities-dense th:nth-child(1) { width:15%; }
.opportunities-dense th:nth-child(2) { width:8%; }
.opportunities-dense th:nth-child(3) { width:12%; }
.opportunities-dense th:nth-child(4) { width:5%; }
.opportunities-dense th:nth-child(5) { width:10%; }
.opportunities-dense th:nth-child(6) { width:6%; }
.opportunities-dense th:nth-child(7) { width:7%; }
.opportunities-dense th:nth-child(8) { width:5%; }
.opportunities-dense th:nth-child(9) { width:7%; }
.opportunities-dense th:nth-child(10) { width:4%; }
.opportunities-dense th:nth-child(11) { width:8%; }
.opportunities-dense th:nth-child(12) { width:5%; }
.opportunities-dense th:nth-child(13) { width:4%; }
.opportunities-dense th:nth-child(14) { width:2%; }
.opportunities-dense th:nth-child(15) { width:3%; }
.opportunities-dense th:nth-child(16) { width:4%; }

/* Per-column controls: compact enough for the 15-field overview. */
.opportunities-column-head { display:flex; align-items:center; justify-content:space-between; gap:2px; min-height:18px; }
.opportunities-column-head span { min-width:0; overflow-wrap:anywhere; }
.opportunities-dense .opportunities-sort { flex:0 0 auto; min-width:16px; padding:1px 2px; font-size:10px; line-height:1.2; border-radius:3px; }
.opportunities-dense .opportunities-column-filter { display:block; box-sizing:border-box; width:100%; min-width:0; max-width:100%; margin-top:3px; padding:2px 1px; border-radius:3px; font-size:9px; line-height:1.15; height:21px; background:#fff; color:#17202a; }
.opportunities-dense select.opportunities-column-filter { padding-right:0; }

/* Navigation hierarchy and page-specific creation controls. */
.sidebar .sidebar-section-label { margin:18px 0 7px; padding:0 10px; font-size:10px; font-weight:700; letter-spacing:.08em; opacity:.68; }
.opportunities-title-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.opportunities-title-row h1 { margin:0; }

/* Executive dashboard 2 */
.d2-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.d2-heading h1{margin:0 0 4px}
.d2-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin:14px 0 20px}
.d2-toolbar label{display:flex;flex-direction:column;gap:4px;font-size:12px}
.d2-toolbar select{min-width:145px;max-width:220px}
.d2-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}
.d2-kpi,.d2-panel{border:1px solid #dfe4ec;border-radius:10px;padding:16px;background:#fff;color:#172335}
.d2-kpi{display:flex;flex-direction:column;gap:9px}
.d2-kpi span{font-size:12px;color:#526176}
.d2-kpi strong{font-size:clamp(19px,2vw,29px);line-height:1.1;overflow-wrap:anywhere}
.d2-kpi small{font-size:11px;color:#68778a}
.d2-kpi-alert{border-left:4px solid #c47a25}
.d2-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.d2-panel{margin-bottom:14px;min-width:0}
.d2-panel h2{font-size:17px;margin:0 0 14px}
.d2-metric,.d2-stage{margin-bottom:13px}
.d2-metric>div:first-child,.d2-stage>div:first-child{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:5px}
.d2-metric small{font-weight:400;color:#728094}
.d2-track{height:7px;border-radius:8px;background:#edf1f6;overflow:hidden}
.d2-fill{height:100%;background:#4178a9;border-radius:8px}
.d2-scroll{overflow-x:auto}
.d2-panel table{width:100%;font-size:12px}
.d2-panel th,.d2-panel td{padding:7px 8px;vertical-align:top}
@media(max-width:1000px){.d2-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.d2-columns{grid-template-columns:1fr}}
@media(max-width:600px){.d2-kpis{grid-template-columns:1fr}}