/* Base components */
.tab-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .85rem; border-radius:1rem;
  border:1px solid rgb(226 232 240);
  background:white; color:rgb(15 23 42);
  font-weight:900; font-size:.9rem;
}
.tab-btn:hover{ background:rgb(248 250 252); }
.tab-active{
  border-color: rgb(56 189 248);
  background: rgb(224 242 254);
  color: rgb(3 105 161);
}

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .85rem; border-radius:1rem;
  border:1px solid rgb(226 232 240);
  background:white; color:rgb(15 23 42);
  font-weight:900; font-size:.9rem;
}
.btn:hover{ background:rgb(248 250 252); }

.btn-primary{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .85rem; border-radius:1rem;
  border:1px solid rgb(14 165 233);
  background: rgb(14 165 233);
  color:white; font-weight:900; font-size:.9rem;
}
.btn-primary:hover{ filter:brightness(.96); }

.mini-btn{
  height:34px; width:36px; border-radius:14px;
  border:1px solid rgb(226 232 240);
  background:white; color:rgb(15 23 42);
}
.mini-btn:hover{ background:rgb(248 250 252); }

.kpi-card{
  border:1px solid rgb(226 232 240);
  background:white; border-radius:1.25rem; padding:1rem;
  display:flex; align-items:center; gap:.9rem;
}
.kpi-icon{
  height:44px;width:44px; border-radius:1.1rem;
  display:grid; place-items:center;
  border:1px solid rgb(226 232 240); font-size:1.05rem;
}
.kpi-label{ font-size:.78rem; color:rgb(100 116 139); font-weight:900; letter-spacing:.02em; }
.kpi-value{ font-size:1.7rem; font-weight:950; line-height:1.1; margin-top:.1rem; }
.kpi-sub{ font-size:.75rem; color:rgb(100 116 139); margin-top:.1rem; }

.card-shell{
  border:1px solid rgb(226 232 240);
  background:white; border-radius:1.5rem; overflow:hidden;
}
.card-head{
  padding:1rem 1rem; display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; border-bottom:1px solid rgb(226 232 240);
  flex-wrap:wrap;
}
.card-title{ font-weight:950; font-size:1rem; }
.card-sub{ color:rgb(100 116 139); font-size:.8rem; margin-top:.15rem; }

.th{
  text-align:left; font-weight:950; font-size:.75rem;
  padding:.7rem 1rem; letter-spacing:.02em;
  white-space:nowrap;
}
.td{
  padding:.75rem 1rem; vertical-align:middle;
  color:rgb(15 23 42); white-space:nowrap;
}

.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .55rem; border-radius:999px;
  border:1px solid rgb(226 232 240);
  font-size:.75rem; font-weight:950; white-space:nowrap;
}
.badge-ok{ background:rgb(236 253 245); border-color:rgb(167 243 208); color:rgb(6 95 70); }
.badge-bad{ background:rgb(255 241 242); border-color:rgb(254 205 211); color:rgb(159 18 57); }
.badge-warn{ background:rgb(255 251 235); border-color:rgb(253 230 138); color:rgb(146 64 14); }

.pill-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .75rem; border-radius:999px;
  border:1px solid rgb(226 232 240);
  background:white; font-weight:950;
  font-size:.8rem; color:rgb(15 23 42);
}
.pill-btn:hover{ background:rgb(248 250 252); }

.field label{
  display:block; font-size:.78rem; font-weight:950;
  color:rgb(51 65 85); margin-bottom:.35rem;
}
.input{
  width:100%; border-radius:1rem;
  border:1px solid rgb(226 232 240);
  background:white; padding:.6rem .8rem;
  outline:none; font-size:.95rem;
}
.input:focus{
  box-shadow:0 0 0 4px rgb(224 242 254);
  border-color: rgb(56 189 248);
}
.help{ font-size:.72rem; color:rgb(100 116 139); margin-top:.35rem; }
.req{ color:rgb(225 29 72); font-weight:950; }

.row-selected{
  outline:2px solid rgb(56 189 248);
  outline-offset:-2px;
  background: rgb(240 249 255) !important;
}

/* Stepper like your old bootstrap wizard */
.stepper{
  display:flex; flex-wrap:wrap; gap:10px;
  padding:10px; border:1px solid rgb(226 232 240);
  border-radius:14px; background: rgb(248 250 252);
}
.step{
  flex:1 1 auto; min-width:150px;
  padding:10px 12px; border-radius:12px;
  border:1px solid rgb(226 232 240);
  background:white; color:rgb(100 116 139);
  font-weight:950; text-align:center; user-select:none;
}
.step.active{
  background: rgb(14 165 233);
  color:white; border-color: rgb(14 165 233);
}
.step.done{
  background: rgb(236 253 245);
  color: rgb(6 95 70);
  border-color: rgb(167 243 208);
}

/* Review + Debug boxes */
.reviewBox, .debugBox{
  white-space: pre-wrap;
  word-break: break-word;
  background: rgb(248 250 252);
  border:1px solid rgb(226 232 240);
  border-radius:14px;
  padding:12px;
  font-size:12px;
  color:rgb(15 23 42);
}

/* Small animation */
.wizard-animate{ animation: stepIn .18s ease both; }
@keyframes stepIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }