:root{
  --ob-navy:#0b2948;
  --ob-navy-2:#123d67;
  --ob-navy-3:#1a4f82;
  --ob-blue:#2563a6;
  --ob-soft:#eef4fa;
  --ob-bg:#f5f7fa;
  --ob-card:#ffffff;
  --ob-line:#dce4ec;
  --ob-text:#172433;
  --ob-muted:#6b7c8d;
  --ob-success:#14805e;
  --ob-danger:#bd3434;
  --ob-warning:#a66b00;
  --ob-shadow:0 10px 30px rgba(11,41,72,.08);
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0!important;
  background:var(--ob-bg)!important;
  color:var(--ob-text)!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
  font-size:14px;
}

/* ===== Top navigation ===== */
.app-header{
  min-height:72px!important;
  background:var(--ob-navy)!important;
  border:0!important;
  box-shadow:0 3px 16px rgba(4,25,45,.18)!important;
  display:grid!important;
  grid-template-columns:minmax(280px,1fr) auto minmax(280px,1fr)!important;
  align-items:center!important;
  padding:0 30px!important;
  position:sticky!important;
  top:0!important;
  z-index:1050!important;
}
.brand-wrap{min-width:0}
.brand{
  display:inline-flex!important;
  align-items:center!important;
  gap:12px!important;
  color:#fff!important;
  text-decoration:none!important;
}
.brand:hover{color:#fff!important}
.brand-mark{
  width:42px!important;height:42px!important;
  border-radius:12px!important;
  display:grid!important;place-items:center!important;
  background:#fff!important;
  color:var(--ob-navy)!important;
  font-weight:800!important;
  letter-spacing:.4px!important;
  box-shadow:none!important;
}
.brand strong{
  display:block!important;
  color:#fff!important;
  font-size:16px!important;
  line-height:1.1!important;
}
.brand small{
  color:#c9d8e7!important;
  font-size:11px!important;
  margin-top:4px!important;
}
.main-nav{
  display:flex!important;
  gap:4px!important;
  padding:4px!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.08)!important;
}
.main-nav a{
  color:#d8e5f1!important;
  text-decoration:none!important;
  padding:10px 16px!important;
  border-radius:8px!important;
  font-weight:600!important;
  transition:.16s ease!important;
}
.main-nav a:hover{
  color:#fff!important;
  background:rgba(255,255,255,.08)!important;
}
.main-nav a.active{
  color:var(--ob-navy)!important;
  background:#fff!important;
  box-shadow:0 2px 6px rgba(0,0,0,.08)!important;
}
.user-menu{
  justify-self:end!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:#fff!important;
}
.user-avatar{
  width:38px!important;height:38px!important;border-radius:50%!important;
  display:grid!important;place-items:center!important;
  background:#fff!important;color:var(--ob-navy)!important;
  font-weight:800!important;
}
.user-copy strong{display:block!important;color:#fff!important;font-size:13px!important}
.user-copy small{display:block!important;color:#c9d8e7!important;font-size:10px!important;margin-top:2px!important}
.logout-link{
  width:34px!important;height:34px!important;border-radius:8px!important;
  display:grid!important;place-items:center!important;
  color:#dbe7f2!important;text-decoration:none!important;font-size:18px!important;
}
.logout-link:hover{background:rgba(255,255,255,.10)!important;color:#fff!important}

/* ===== Page ===== */
main.container{
  max-width:1320px!important;
  margin:0 auto!important;
  padding:28px 24px 60px!important;
}
.page-heading{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:20px!important;margin-bottom:18px!important;
}
.page-heading h1{
  margin:2px 0 0!important;
  color:var(--ob-navy)!important;
  font-size:28px!important;
  font-weight:750!important;
  letter-spacing:-.5px!important;
}
.eyebrow{
  margin:0!important;color:var(--ob-blue)!important;
  font-size:10px!important;font-weight:800!important;letter-spacing:1.5px!important;
}
.tenant-pill{
  display:inline-flex!important;align-items:center!important;gap:6px!important;
  padding:8px 12px!important;border:1px solid var(--ob-line)!important;
  border-radius:999px!important;background:#fff!important;color:#52677a!important;
  font-size:11px!important;font-weight:600!important;
}

/* ===== Wizard shell ===== */
.wizard-shell{
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid var(--ob-line)!important;
  border-radius:16px!important;
  box-shadow:var(--ob-shadow)!important;
}
.wizard-intro{
  padding:22px 26px!important;
  border-bottom:1px solid var(--ob-line)!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;
  background:#fff!important;
}
.wizard-intro h2{
  margin:0 0 4px!important;
  color:var(--ob-navy)!important;
  font-size:20px!important;font-weight:750!important;
}
.wizard-intro p{margin:0!important;color:var(--ob-muted)!important;font-size:13px!important}
.autosave-badge{
  white-space:nowrap!important;
  background:#e9f7f2!important;color:var(--ob-success)!important;
  padding:8px 12px!important;border-radius:999px!important;
  font-weight:700!important;font-size:11px!important;
}

/* Stepper */
.stepper{
  display:grid!important;
  grid-template-columns:auto 1fr auto 1fr auto 1fr auto!important;
  align-items:center!important;
  padding:18px 26px!important;
  background:#f8fafc!important;
  border-bottom:1px solid var(--ob-line)!important;
}
.step{
  appearance:none!important;
  border:0!important;background:transparent!important;
  display:flex!important;align-items:center!important;gap:10px!important;
  padding:0!important;color:#8493a1!important;text-align:left!important;
}
.step>span{
  width:34px!important;height:34px!important;border-radius:50%!important;
  display:grid!important;place-items:center!important;
  background:#e5ebf1!important;color:#657787!important;font-weight:800!important;
  flex:0 0 34px!important;
}
.step strong{display:block!important;font-size:12px!important;color:inherit!important}
.step small{display:block!important;font-size:10px!important;color:inherit!important;margin-top:1px!important}
.step.active{color:var(--ob-navy)!important}
.step.active>span{
  background:var(--ob-navy)!important;color:#fff!important;
  box-shadow:0 0 0 4px #e3edf6!important;
}
.step.done{color:var(--ob-success)!important}
.step.done>span{background:var(--ob-success)!important;color:#fff!important;box-shadow:none!important}
.step-line{height:2px!important;background:#dde5ec!important;margin:0 18px!important}

/* Panels */
.wizard-panel{
  display:none!important;
  min-height:390px!important;
  padding:28px!important;
}
.wizard-panel.active{display:block!important}
.panel-title{
  display:flex!important;align-items:center!important;gap:14px!important;
  margin-bottom:24px!important;
}
.panel-icon{
  width:42px!important;height:42px!important;border-radius:11px!important;
  display:grid!important;place-items:center!important;
  background:var(--ob-soft)!important;color:var(--ob-navy)!important;
  font-weight:800!important;
}
.panel-title h2{
  margin:0 0 3px!important;font-size:19px!important;
  color:var(--ob-navy)!important;font-weight:750!important;
}
.panel-title p{margin:0!important;color:var(--ob-muted)!important;font-size:12px!important}
.push-right{margin-left:auto!important}

/* Forms */
.form-grid{display:grid!important;gap:18px!important}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.field{
  display:flex!important;flex-direction:column!important;gap:7px!important;
  color:#31485e!important;font-size:12px!important;font-weight:650!important;
}
.field small{font-weight:400!important;color:var(--ob-muted)!important}
.required{color:var(--ob-danger)!important}

input:not([type="checkbox"]):not([type="radio"]),
select, textarea,
.form-control,.form-select{
  width:100%!important;
  min-height:44px!important;
  border:1px solid #cdd8e2!important;
  border-radius:9px!important;
  background:#fff!important;
  color:var(--ob-text)!important;
  padding:10px 12px!important;
  outline:none!important;
  transition:border-color .15s ease,box-shadow .15s ease!important;
}
input:focus,select:focus,textarea:focus,.form-control:focus,.form-select:focus{
  border-color:#7da4ca!important;
  box-shadow:0 0 0 .2rem rgba(11,41,72,.09)!important;
}
input[readonly]{background:#f4f6f8!important;color:#56697a!important}
.field-emphasis select{border-color:#8fb3d6!important;background:#fbfdff!important}

/* Auto calculated strip */
.auto-strip{
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;
  gap:1px!important;margin-top:20px!important;
  background:var(--ob-line)!important;border:1px solid var(--ob-line)!important;
  border-radius:12px!important;overflow:hidden!important;
}
.auto-strip>div{background:#f8fafc!important;padding:14px 16px!important}
.auto-strip small{
  display:block!important;color:var(--ob-muted)!important;
  font-size:10px!important;text-transform:uppercase!important;letter-spacing:.65px!important;
}
.auto-strip strong{
  display:block!important;margin-top:4px!important;
  color:var(--ob-navy)!important;font-size:14px!important;
}
.compact-top{margin-top:18px!important}

/* Tables */
.table-card{
  background:#fff!important;border:1px solid var(--ob-line)!important;
  border-radius:12px!important;overflow:hidden!important;
}
.table-wrap{overflow-x:auto!important}
table{width:100%!important;border-collapse:collapse!important;margin:0!important}
th,td{
  padding:10px 10px!important;border-bottom:1px solid #e5ebf0!important;
  vertical-align:middle!important;
}
th{
  background:#eef3f7!important;color:var(--ob-navy)!important;
  font-size:10px!important;font-weight:800!important;
  text-transform:uppercase!important;letter-spacing:.45px!important;white-space:nowrap!important;
}
tbody tr:hover td{background:#fbfcfd!important}
tbody tr:last-child td{border-bottom:0!important}
td input,td select{min-width:90px!important;min-height:38px!important;padding:7px 9px!important}
.row-num{
  width:25px!important;height:25px!important;border-radius:7px!important;
  display:grid!important;place-items:center!important;background:#edf2f6!important;
  color:#496176!important;font-size:11px!important;font-weight:800!important;
}
.calc-cell{font-weight:700!important;color:#31485e!important;white-space:nowrap!important}

/* Buttons */
.btn,button{
  border-radius:9px!important;
  font-weight:650!important;
}
.btn.primary,.primary,
.btn-primary{
  background:var(--ob-navy)!important;
  border-color:var(--ob-navy)!important;
  color:#fff!important;
  box-shadow:none!important;
}
.btn.primary:hover,.primary:hover,.btn-primary:hover{
  background:var(--ob-navy-2)!important;border-color:var(--ob-navy-2)!important;
}
.secondary,.btn-secondary{
  background:#eef2f5!important;border-color:#e0e7ed!important;color:#31485e!important;
}
.ghost,.btn-outline-secondary{
  background:#fff!important;border:1px solid var(--ob-line)!important;color:#516678!important;
}
.icon-btn{
  width:32px!important;height:32px!important;padding:0!important;
  display:grid!important;place-items:center!important;background:#f4f6f8!important;
}
.icon-btn.danger{color:var(--ob-danger)!important}

/* Informational cards */
.info-banner{
  padding:11px 13px!important;border-radius:9px!important;
  background:#eef5fb!important;color:#31597c!important;margin-bottom:13px!important;font-size:12px!important;
}
.helper-text{color:var(--ob-muted)!important;font-size:11px!important;margin:10px 2px 0!important}
.metric-row{
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:12px!important;margin-top:16px!important;
}
.metric{
  border:1px solid var(--ob-line)!important;border-radius:11px!important;
  padding:14px 15px!important;background:#fbfcfd!important;
}
.metric small{display:block!important;color:var(--ob-muted)!important;font-size:10px!important;text-transform:uppercase!important;letter-spacing:.4px!important}
.metric strong{display:block!important;margin-top:4px!important;color:var(--ob-navy)!important;font-size:18px!important}
.metric.accent{background:#eef5fb!important;border-color:#cddfed!important}
.confirm-card{
  display:flex!important;flex-direction:row!important;align-items:center!important;gap:12px!important;
  border:1px solid #b9ddcf!important;background:#f4fbf8!important;
  border-radius:11px!important;padding:14px!important;margin-top:16px!important;
}
.confirm-card input{width:18px!important;height:18px!important;flex:0 0 auto!important}
.confirm-card strong,.confirm-card small{display:block!important}
.confirm-card small{font-weight:400!important;color:var(--ob-muted)!important;margin-top:2px!important}
.review-box{
  margin-top:16px!important;border:1px solid var(--ob-line)!important;
  background:#f8fafc!important;border-radius:11px!important;padding:16px!important;
}
.review-box h3{margin:0 0 3px!important;color:var(--ob-navy)!important;font-size:14px!important}
.review-box p{margin:0!important;color:var(--ob-muted)!important}
.review-chips{display:flex!important;gap:7px!important;flex-wrap:wrap!important;margin-top:11px!important}
.review-chips span{
  background:#fff!important;border:1px solid var(--ob-line)!important;color:#526779!important;
  border-radius:999px!important;padding:6px 9px!important;font-size:10px!important;
}
.status{display:inline-flex!important;padding:5px 9px!important;border-radius:999px!important;font-size:10px!important;font-weight:800!important}
.status.pass{background:#e6f7f1!important;color:#0a7150!important}
.status.fail{background:#fff0ef!important;color:#a72d2d!important}
.status.neutral{background:#eef2f5!important;color:#657787!important}

/* Bottom wizard controls */
.wizard-actions{
  position:sticky!important;bottom:0!important;z-index:40!important;
  display:flex!important;align-items:center!important;gap:12px!important;
  padding:14px 22px!important;border-top:1px solid var(--ob-line)!important;
  background:rgba(255,255,255,.97)!important;
  backdrop-filter:blur(8px)!important;
}
.wizard-progress-copy{margin-left:auto!important;text-align:right!important}
.wizard-progress-copy strong,.wizard-progress-copy small{display:block!important}
.wizard-progress-copy strong{color:var(--ob-navy)!important}
.wizard-progress-copy small{color:var(--ob-muted)!important;font-size:10px!important}
.success-btn{background:var(--ob-success)!important;border-color:var(--ob-success)!important}
.success-btn:hover{background:#0e6b4e!important;border-color:#0e6b4e!important}
.hidden{display:none!important}

/* Generic cards/settings/list pages */
.card{
  background:#fff!important;border:1px solid var(--ob-line)!important;
  border-radius:13px!important;box-shadow:0 3px 12px rgba(11,41,72,.04)!important;
}
.card h2{color:var(--ob-navy)!important}
.tabs{
  display:flex!important;gap:5px!important;
  background:#e9eff4!important;border-radius:10px!important;padding:4px!important;
}
.tab{background:transparent!important;color:#617487!important;border:0!important}
.tab.active{background:#fff!important;color:var(--ob-navy)!important;box-shadow:0 1px 4px rgba(11,41,72,.08)!important}
.alert.success{background:#e8f7f1!important;color:#116b4e!important}
.tenant-badge{background:#eaf1f8!important;color:var(--ob-navy)!important}

/* Login */
.auth-body{
  min-height:100vh!important;
  display:grid!important;grid-template-columns:1.05fr .95fr!important;
  background:#eef3f7!important;
}
.auth-body:before{
  content:"Batch. Quality. Traceability."!important;
  display:flex!important;align-items:flex-end!important;
  padding:56px!important;color:#fff!important;
  font-size:42px!important;font-weight:800!important;letter-spacing:-1px!important;
  background:linear-gradient(145deg,#081f37,#174f7e)!important;
}
.auth-card{
  align-self:center!important;justify-self:center!important;
  width:min(430px,88%)!important;
  background:#fff!important;border:1px solid var(--ob-line)!important;
  border-radius:16px!important;padding:32px!important;
  box-shadow:var(--ob-shadow)!important;
}
.auth-card h1{color:var(--ob-navy)!important;font-weight:750!important}
.auth-card p{color:var(--ob-muted)!important}

/* Responsive */
@media(max-width:1000px){
  .app-header{
    grid-template-columns:1fr auto!important;
    padding:10px 16px!important;
  }
  .main-nav{
    grid-column:1/-1!important;order:3!important;
    justify-self:center!important;margin-top:8px!important;
  }
  .cols-3{grid-template-columns:1fr 1fr!important}
  .step small{display:none!important}
  main.container{padding:20px 14px 50px!important}
  .auth-body{grid-template-columns:1fr!important}
  .auth-body:before{display:none!important}
}
@media(max-width:680px){
  .user-copy{display:none!important}
  .page-heading{align-items:center!important}
  .cols-3,.cols-2{grid-template-columns:1fr!important}
  .wizard-intro{padding:16px!important}
  .wizard-panel{padding:20px 14px!important}
  .stepper{padding:14px 12px!important}
  .step div{display:none!important}
  .step-line{margin:0 7px!important}
  .auto-strip{grid-template-columns:1fr!important}
  .metric-row{grid-template-columns:1fr!important}
  .wizard-progress-copy{display:none!important}
  .panel-title{align-items:flex-start!important;flex-wrap:wrap!important}
  .push-right{margin-left:55px!important}
}
@media print{
  .app-header,.wizard-actions,.no-print{display:none!important}
  body{background:#fff!important}
}