/* MAT-SA Evidence-Based Assessment — theme v3
   Matches OneSEFA's actual layout/palette per Sibusiso's explicit request,
   with MAT-SA's own logo/name instead of SEFA's, no avatar mascot. */
:root{
  --ink:#1F2937;
  --paper:#F5F7F8;
  --card-bg:#FFFFFF;
  --rule:#E3E7E5;
  --hover:#EEF3F0;

  --brand-green-dark:#0E3B24;   /* sidebar background */
  --brand-green:#146C43;        /* buttons, checkmarks, current-step accents */
  --brand-green-light:#E8F5EC;

  --orange:#E8823D;             /* selected pill/tag accent */
  --orange-light:#FDEEE0;

  --high-red:#DC2626;
  --high-bg:#FEECEC;
  --medium-amber:#B7791F;
  --medium-bg:var(--orange-light);
  --low-green:#16A34A;
  --low-bg:#E8F8ED;

  --teal:var(--brand-green);
  --teal-dim:#0B2E1B;
  --amber:var(--high-red);
  --gold:var(--medium-amber);
  --sage:var(--low-green);
  --danger-bg:var(--high-bg);
  --gold-bg:var(--medium-bg);
  --sage-bg:var(--low-bg);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  line-height:1.5;
}
h1,h2,h3{font-family:'Newsreader', serif; font-weight:600; margin:0 0 6px 0;}
.mono{font-family:'IBM Plex Mono', monospace;}
.wrap{max-width:900px;margin:0 auto;padding:24px 24px 60px;}

.banner{
  background:var(--brand-green-dark);
  color:#DCEBDF;
  font-size:12.5px;
  letter-spacing:.02em;
  padding:10px 20px;
  text-align:center;
}
.banner strong{color:#fff;}

/* --- App shell --- */
.app-shell{display:flex; align-items:flex-start; min-height:100vh;}
.sidebar{
  width:220px; flex-shrink:0; min-height:100vh;
  background:var(--brand-green-dark); color:#EDF3ED;
  padding:20px 16px; position:sticky; top:0;
  display:flex; flex-direction:column;
}
.sidebar-brand{font-family:'Newsreader', serif; font-weight:600; font-size:18px; color:#fff; margin-bottom:2px;}
.sidebar-eyebrow{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.08em; color:#8FAE9A; margin-bottom:16px;}
.sidebar-step{
  display:flex; align-items:center; gap:10px;
  padding:8px 8px; border-radius:6px; margin-bottom:2px;
  color:#C7DACC; text-decoration:none; font-size:12.5px;
}
.sidebar-step .dot{
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.12); color:#DCEBDF;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-family:'IBM Plex Mono', monospace;
}
.sidebar-step.done .dot{background:#3FA968; color:#0E2617;}
.sidebar-step.current{background:rgba(255,255,255,.10); color:#fff; font-weight:500;}
.sidebar-step:hover{background:rgba(255,255,255,.08);}
.sidebar-spacer{flex:1;}
.sidebar-reset{color:#8FAE9A; font-size:11.5px; text-decoration:underline; padding:8px;}

.main-col{flex:1; min-width:0;}
.topbar{
  border-bottom:1px solid var(--rule); background:#fff;
  padding:12px 24px; position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.search-wrap{position:relative; max-width:380px; flex:1;}
.search-wrap input{
  width:100%; padding:9px 12px 9px 32px; border:1px solid var(--rule); border-radius:8px;
  font-family:'IBM Plex Sans', sans-serif; font-size:13px; color:var(--ink);
  background:#F8FAF9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center;
}
.search-wrap input:focus{outline:none; border-color:var(--brand-green);}
.search-results{
  display:none; position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:#fff; border:1px solid var(--rule); border-radius:8px;
  max-height:280px; overflow-y:auto; z-index:10;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
}
.search-results.open{display:block;}
.search-item{
  display:block; padding:9px 12px; font-size:13px; border-bottom:1px solid var(--rule);
  color:var(--ink); text-decoration:none;
}
.search-item:hover{background:var(--hover);}
.search-item:last-child{border-bottom:none;}
.search-type{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:9.5px;
  color:var(--brand-green); margin-right:8px; letter-spacing:.03em;
}
.search-empty, .search-method{padding:9px 12px; font-size:12px; color:#6B7568;}

.topbar-right{display:flex; align-items:center; gap:16px; flex-shrink:0;}
.notif-bell{position:relative; cursor:pointer; background:none; border:none; padding:6px;}
.notif-bell svg{display:block;}
.notif-dot{position:absolute; top:4px; right:4px; width:7px; height:7px; border-radius:50%; background:var(--high-red);}
.notif-dropdown{
  display:none; position:absolute; top:calc(100% + 8px); right:0; width:260px;
  background:#fff; border:1px solid var(--rule); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.12); padding:14px; font-size:12.5px; z-index:20;
}
.notif-dropdown.open{display:block;}
.notif-wrap{position:relative;}
.user-chip{display:flex; align-items:center; gap:8px;}
.user-avatar{
  width:32px; height:32px; border-radius:50%; background:var(--brand-green);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; font-family:'IBM Plex Mono', monospace;
}
.user-meta{line-height:1.25;}
.user-name{font-size:12.5px; font-weight:600;}
.user-role{font-size:10.5px; color:#6B7568;}

/* --- Save toast --- */
#saveToast{
  position:fixed; top:18px; left:50%; transform:translateX(-50%) translateY(-140%);
  background:var(--brand-green-dark); color:#fff; padding:10px 20px; border-radius:24px;
  font-size:13px; z-index:100; box-shadow:0 6px 20px rgba(0,0,0,.2);
  transition:transform .35s ease;
}
#saveToast.show{transform:translateX(-50%) translateY(0);}

.content-row{display:flex; align-items:flex-start; gap:0;}
.content-row > .wrap{flex:1; min-width:0;}

/* --- Right-hand live panel --- */
.right-panel{width:270px; flex-shrink:0; padding:24px 20px 60px 0; display:flex; flex-direction:column; gap:14px;}
.rp-card{background:var(--card-bg); border:1px solid var(--rule); border-radius:10px; padding:16px;}
.rp-score{text-align:center;}
.rp-label{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.05em; color:#6B7568; text-transform:uppercase;}
.rp-percent{font-family:'Newsreader', serif; font-size:30px; font-weight:600; color:var(--brand-green); margin:4px 0;}
.rp-score.readiness .rp-percent{color:var(--orange);}
.rp-sub{font-size:11px; color:#6B7568;}
.rp-title{font-size:13px; font-weight:600; margin-bottom:8px;}
.rp-list, .rp-steps{margin:0; padding-left:18px; font-size:12.5px; color:#333; line-height:1.7;}
.rp-empty{color:#8A9088; font-style:italic; list-style:none; margin-left:-18px;}
.rp-tip{background:var(--brand-green-light); border-color:#CFE4D5;}
.rp-tip-text{font-size:12px; color:#2E4A37; line-height:1.6;}

@media (max-width:1150px){ .right-panel{display:none;} }
@media (max-width:820px){ .sidebar{display:none;} }

.hash-highlight{animation: hashglow 2.4s ease-out;}
@keyframes hashglow{
  0%{box-shadow:0 0 0 3px var(--brand-green);}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0);}
}

.step-label{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.06em;
  color:var(--teal-dim); text-transform:uppercase; margin-bottom:14px;
}

/* --- Wizard progress stepper (top, matching OneSEFA) --- */
.wizard-stepper{
  display:flex; align-items:center; background:#fff; border:1px solid var(--rule);
  border-radius:10px; padding:16px 20px; margin-bottom:20px; overflow-x:auto;
}
.wizard-stepper .ws-step{display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; min-width:74px;}
.wizard-stepper .ws-dot{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#fff; border:2px solid var(--rule); color:#9A9F95; font-size:11px; font-family:'IBM Plex Mono', monospace;
}
.wizard-stepper .ws-step.done .ws-dot{background:var(--brand-green); border-color:var(--brand-green); color:#fff;}
.wizard-stepper .ws-step.current .ws-dot{border-color:var(--brand-green); color:var(--brand-green); font-weight:700;}
.wizard-stepper .ws-label{font-size:10.5px; color:#6B7568;}
.wizard-stepper .ws-step.current .ws-label{color:var(--brand-green); font-weight:600;}
.wizard-stepper .ws-line{flex:1; height:2px; background:var(--rule); min-width:16px;}
.wizard-stepper .ws-line.done{background:var(--brand-green);}

.panel{background:var(--card-bg); border:1px solid var(--rule); border-radius:10px; padding:24px; margin-bottom:20px;}

/* --- Form building blocks --- */
.field{margin-bottom:16px;}
.field label{display:block; font-size:12px; font-weight:600; margin-bottom:5px; color:#3A4038;}
.field input[type="text"], .field input[type="number"], .field textarea, .field select{
  width:100%; padding:9px 11px; border:1px solid var(--rule); border-radius:6px;
  font-family:inherit; font-size:13px; color:var(--ink); background:#fff;
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--brand-green);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}

.pill-group{display:flex; flex-wrap:wrap; gap:8px;}
.pill{
  padding:8px 14px; border:1px solid var(--rule); border-radius:20px; background:#fff;
  font-size:12.5px; cursor:pointer; color:var(--ink); user-select:none;
}
.pill:hover{background:var(--hover);}
.pill.selected{background:var(--orange); border-color:var(--orange); color:#fff; font-weight:600;}

.toggle-group{display:flex; gap:8px;}
.toggle-btn{
  padding:8px 20px; border:1px solid var(--rule); border-radius:8px; background:#fff;
  font-size:12.5px; cursor:pointer; color:var(--ink);
}
.toggle-btn.selected{background:var(--brand-green); border-color:var(--brand-green); color:#fff; font-weight:600;}

.stepper-input{display:flex; align-items:center; gap:12px;}
.stepper-btn{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--rule); background:#fff;
  font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--brand-green);
}
.stepper-btn:hover{background:var(--hover);}
.stepper-value{font-size:16px; font-weight:600; min-width:30px; text-align:center;}

.tier-list{display:flex; flex-direction:column; gap:6px;}
.tier-option{
  position:relative; padding:9px 14px 9px 30px; border:1.5px solid var(--brand-green-light);
  border-radius:20px; background:var(--brand-green-light);
  font-size:12.5px; cursor:pointer; color:var(--teal-dim);
}
.tier-option:hover{border-color:var(--brand-green);}
.tier-option .tier-check{position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:0; font-size:11px; color:var(--brand-green);}
.tier-option.selected{background:#fff; border-color:var(--brand-green); font-weight:600;}
.tier-option.selected .tier-check{opacity:1;}
.dmb-fill.unanswered{background:#D8DDD9 !important;}
.dm-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.dm-category{border:1px solid var(--rule); border-radius:8px; padding:14px;}
.dm-category .dm-title{font-size:13px; font-weight:600; margin-bottom:8px;}

.upload-zone{
  border:1.5px dashed var(--rule); border-radius:8px; padding:20px; text-align:center;
  font-size:12px; color:#6B7568; cursor:pointer; background:#FAFBFA;
}
.upload-zone:hover{border-color:var(--brand-green); background:var(--brand-green-light);}
.upload-zone input{display:none;}
.upload-file-badge{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; border:1px solid var(--rule); border-radius:6px; margin-top:8px; font-size:12px;
}
.upload-file-badge .remove-file{color:var(--high-red); cursor:pointer; background:none; border:none; font-size:14px;}

/* --- Donut chart (Ownership Summary) --- */
.donut-wrap{display:flex; align-items:center; gap:16px; margin-bottom:10px;}
.donut{width:90px; height:90px; border-radius:50%; flex-shrink:0;}
.donut-legend{font-size:11.5px; line-height:1.9;}
.donut-legend .swatch{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px;}

.need-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px;}
.need-chip{border:1px solid var(--rule); border-radius:6px; padding:10px 12px; font-size:13.5px; display:block; cursor:pointer;}
.need-chip input{margin-right:8px;}
.need-chip:hover{background:var(--hover);}

/* --- Business Development: need-area cards (step 1) --- */
.needs-card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:4px;}
.needs-card{
  position:relative; display:flex; flex-direction:column; gap:10px;
  border:2px solid transparent; border-radius:10px; padding:16px 14px 14px;
  cursor:pointer; background:#F7F8F7; transition:border-color .15s ease;
}
.needs-card input{position:absolute; opacity:0; pointer-events:none;}
.needs-card-icon{
  width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center;
}
.needs-card-icon svg{width:18px; height:18px;}
.needs-card-label{font-size:13.5px; font-weight:600; color:var(--ink);}
.needs-card-check{
  position:absolute; top:10px; right:10px; width:18px; height:18px; border-radius:50%;
  background:var(--brand-green); color:#fff; font-size:11px; line-height:18px; text-align:center;
  opacity:0; transform:scale(.6); transition:all .15s ease;
}
.needs-card.selected .needs-card-check{opacity:1; transform:scale(1);}
.needs-card.selected{border-color:currentColor;}
.needs-card.color-blue{background:#DBEAFE; color:#2563EB;}
.needs-card.color-green{background:#DCFCE7; color:#16A34A;}
.needs-card.color-yellow{background:#FEF3C7; color:#B45309;}
.needs-card.color-pink{background:#FCE7F3; color:#DB2777;}
.needs-card.color-purple{background:#EDE9FE; color:#7C3AED;}
.needs-card.color-teal{background:#CCFBF1; color:#0D9488;}
.needs-card.color-gray{background:#F3F4F6; color:#4B5563;}
.needs-card.color-indigo{background:#E0E7FF; color:#4338CA;}
.needs-card.color-orange{background:#FFEDD5; color:#EA580C;}
.needs-card .needs-card-icon{background:rgba(255,255,255,.6); color:inherit;}
.needs-card .needs-card-label{color:#1F2937;}

/* --- Business Development: urgency rows (step 2), populated only from step 1 --- */
.urgency-list{display:flex; flex-direction:column; gap:4px; margin-top:10px;}
.urgency-row{align-items:center; justify-content:space-between; gap:16px; padding:10px 4px; border-bottom:1px solid var(--rule);}
.urgency-row:last-child{border-bottom:none;}
.urgency-row-label{font-size:13.5px; font-weight:500; flex:1;}
.urgency-scale{display:flex; gap:6px;}
.urgency-scale label{width:34px; text-align:center; padding:6px 0; border:1px solid var(--rule); border-radius:6px; font-family:'IBM Plex Mono', monospace; font-size:12px; cursor:pointer; background:#fff;}
.urgency-scale label:hover{background:var(--hover);}
.urgency-scale label.active{background:var(--brand-green); border-color:var(--brand-green); color:#fff; font-weight:600;}
.urgency-scale input{display:none;}

@media (max-width: 860px){ .needs-card-grid{grid-template-columns:repeat(2,1fr);} }

.dim-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.dim{border:1px solid var(--rule); border-radius:8px; padding:12px;}
.dim .name{font-size:13.5px; font-weight:500;}
.dim .sub{font-size:11px; color:#6B7568; margin-bottom:8px;}
.dim .scale{display:flex; gap:4px;}
.dim .scale label{flex:1; text-align:center; padding:6px 0; border:1px solid var(--rule); border-radius:4px; font-family:'IBM Plex Mono', monospace; font-size:11.5px; cursor:pointer; background:#fff;}
.dim .scale label:hover{background:var(--hover);}
.dim .scale input{display:none;}

.btn{
  display:inline-block; background:var(--brand-green); color:#fff; border:none;
  padding:12px 22px; border-radius:8px; font-family:'IBM Plex Mono', monospace;
  font-size:13px; cursor:pointer; text-decoration:none;
}
.btn:hover{background:var(--teal-dim);}
.btn.secondary{background:#fff; color:var(--ink); border:1px solid var(--rule);}
.btn.secondary:hover{background:var(--hover);}
.btn.outline{background:transparent; color:var(--brand-green); border:1px solid var(--brand-green);}
.btn.outline:hover{background:var(--brand-green-light);}
.btn[disabled]{background:#EDEFEC; color:#9A9F95; cursor:not-allowed; border:1px solid var(--rule);}
.actions{display:flex; justify-content:space-between; margin-top:20px;}

.mode-toggle{display:inline-flex; border:1px solid var(--ink); border-radius:8px; overflow:hidden; font-family:'IBM Plex Mono', monospace; font-size:12px;}
.mode-toggle a{padding:8px 14px; color:var(--ink); text-decoration:none; display:flex; flex-direction:column; align-items:flex-start; gap:2px;}
.mode-toggle a .label{font-size:12px; font-weight:600;}
.mode-toggle a .sub{font-size:9.5px; font-weight:400; opacity:.65;}
.mode-toggle a:hover:not(.active){background:var(--hover);}
.mode-toggle a.active{background:var(--ink); color:var(--paper);}

.priority-tag{display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.05em; padding:4px 10px; border-radius:6px; margin-bottom:12px;}
.priority-tag.high{background:var(--high-bg); color:var(--high-red); border:1px solid var(--high-red);}
.priority-tag.medium{background:var(--medium-bg); color:var(--medium-amber); border:1px solid var(--orange);}
.priority-tag.low{background:var(--low-bg); color:var(--low-green); border:1px solid var(--low-green);}

.rec-card{border:1px solid var(--rule); border-radius:10px; padding:18px; margin-bottom:12px; background:#fff; scroll-margin-top:80px;}
.rec-card.high{border-left:4px solid var(--high-red);}
.rec-card.medium{border-left:4px solid var(--orange);}
.rec-card.low{border-left:4px solid var(--low-green);}
.rec-meta{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; font-size:12.5px; margin:10px 0;}
.rec-meta .k{color:#6B7568; font-size:11px; text-transform:uppercase; letter-spacing:.04em;}
.rec-meta .v{font-weight:500;}
.trail{background:#F7F9F6; border:1px dashed var(--rule); border-radius:8px; padding:10px 12px; font-family:'IBM Plex Mono', monospace; font-size:11.5px; line-height:1.7;}
.trail div::before{content:"\203A ";color:var(--brand-green);}

.legacy-note{background:var(--high-bg); border:1px solid var(--high-red); border-radius:8px; padding:14px 16px; font-size:13px; margin-bottom:18px; color:#7A2E22;}

.whats-next{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0;}
.whats-next-note{font-size:11.5px; color:#6B7568;}

footer{margin-top:32px; border-top:1px solid var(--rule); padding-top:16px; font-size:11.5px; color:#6B7568;}
footer a{color:var(--brand-green);}

/* --- Assistant chat widget --- */
#assistantWidget{position:fixed; bottom:20px; right:20px; z-index:50; font-family:'IBM Plex Sans', sans-serif;}
#assistantToggle{
  display:flex; align-items:center; gap:8px; background:var(--brand-green-dark); color:#fff; border:none;
  border-radius:24px; padding:12px 18px; cursor:pointer; font-size:13px; box-shadow:0 4px 14px rgba(0,0,0,.20);
}
#assistantToggle:hover{background:var(--teal-dim);}
.pulse-dot{width:8px; height:8px; border-radius:50%; background:#3FA968; animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(1.4);}}
#assistantPanel{position:absolute; bottom:60px; right:0; width:320px; background:#fff; border:1px solid var(--rule); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.18); overflow:hidden;}
#assistantPanel.hidden{display:none;}
.assistant-header{background:var(--brand-green-dark); color:#fff; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; font-size:13.5px;}
.beta-tag{font-family:'IBM Plex Mono', monospace; font-size:9px; background:rgba(255,255,255,.18); padding:2px 6px; border-radius:2px; margin-left:6px;}
.assistant-header button{background:none; border:none; color:#fff; font-size:18px; cursor:pointer; line-height:1;}
.assistant-note{font-size:11px; color:#6B7568; padding:8px 14px; border-bottom:1px solid var(--rule);}
#assistantMessages{max-height:240px; overflow-y:auto; padding:10px 14px; display:flex; flex-direction:column; gap:8px;}
.msg{font-size:12.5px; padding:8px 10px; border-radius:8px; max-width:85%; line-height:1.5;}
.msg.user{background:var(--brand-green); color:#fff; align-self:flex-end;}
.msg.assistant{background:var(--hover); color:#222222; align-self:flex-start;}
#assistantForm{display:flex; border-top:1px solid var(--rule);}
#assistantForm input{flex:1; border:none; padding:10px 12px; font-size:12.5px; font-family:inherit;}
#assistantForm input:focus{outline:none;}
#assistantForm button{border:none; background:var(--brand-green); color:#fff; padding:0 16px; font-size:12.5px; cursor:pointer;}
#assistantForm button:hover{background:var(--teal-dim);}