/* SaKaLaNs Agent Center v1.2 */

.agent-routing-v12,
.sales-workflow-v12{
  margin:14px 0 24px;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(121,144,225,.16);
  background:
    radial-gradient(circle at 90% 0,rgba(94,78,255,.09),transparent 30%),
    linear-gradient(145deg,#111a2e,#0c1425);
}

.agent-routing-head,
.sales-v12-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.agent-routing-head h3,
.sales-v12-head h3{
  color:#fff!important;
  margin:4px 0;
}

.agent-routing-head p,
.sales-v12-head p{
  color:#8999b6!important;
}

.routing-green{
  display:inline-flex;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(52,218,158,.12);
  color:#5cebb9!important;
  font-size:9px;
  font-weight:900;
}

.routing-form-v12{
  display:grid;
  grid-template-columns:
    minmax(150px,.7fr)
    auto
    minmax(150px,.7fr)
    minmax(220px,1fr);
  gap:8px;
  align-items:center;
  margin-top:14px;
}

.routing-form-v12 textarea{
  grid-column:1/-2;
}

.routing-form-v12 input,
.routing-form-v12 textarea,
.routing-form-v12 select{
  background:#09111f!important;
  color:#edf4ff!important;
  border:1px solid rgba(142,162,222,.16)!important;
  border-radius:10px!important;
  padding:10px!important;
}

.route-arrow{
  color:#56baff!important;
  font-weight:900;
}

.routing-log-v12{
  margin-top:17px;
}

.routing-log-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:7px;
}

.routing-log-title b{
  color:#fff!important;
}

.routing-log-title button{
  background:transparent!important;
  color:#75c8ff!important;
  border:0!important;
  cursor:pointer;
}

.route-row-v12{
  display:grid;
  grid-template-columns:
    minmax(220px,.8fr)
    1fr
    auto;
  gap:12px;
  align-items:center;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.055);
}

.route-agent-path{
  display:flex;
  gap:7px;
  align-items:center;
}

.route-agent-path b{
  color:#dfe7f8!important;
}

.route-agent-path span{
  color:#5faeff!important;
}

.route-row-v12 strong{
  display:block;
  color:#eef3ff!important;
}

.route-row-v12 small{
  color:#71829d!important;
}

.sales-workflow-v12{
  margin-top:14px;
}

.agent-route-secondary{
  margin-left:7px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(123,153,239,.16)!important;
  background:#111a2e!important;
  color:#b8caff!important;
  cursor:pointer;
}

.agent-route-secondary:disabled{
  opacity:.38;
  cursor:not-allowed;
}

.sales-pipeline-result-v12{
  margin-top:14px;
  display:grid;
  grid-template-columns:
    120px
    repeat(5,minmax(100px,1fr));
  gap:8px;
}

.sales-score-v12,
.sales-stage-v12{
  min-height:95px;
  padding:12px;
  border-radius:13px;
  background:rgba(255,255,255,.035)!important;
}

.sales-score-v12{
  display:grid;
  place-content:center;
  text-align:center;
}

.sales-score-v12 small,
.sales-score-v12 span{
  color:#8999b5!important;
}

.sales-score-v12 strong{
  color:#fff!important;
  font-size:32px;
}

.sales-stage-v12{
  display:grid;
  align-content:center;
  gap:7px;
}

.sales-stage-v12 span{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(74,127,255,.14)!important;
  color:#70b8ff!important;
  font-size:10px;
  font-weight:900;
}

.sales-stage-v12 b{
  color:#dce6fa!important;
  font-size:11px;
}

.sales-offer-v12{
  grid-column:1/-1;
  padding:15px;
  border-radius:14px;
  border:1px solid rgba(112,139,228,.13);
  background:#0a1323!important;
}

.sales-offer-v12 h4{
  color:#fff!important;
}

.sales-offer-v12 p{
  color:#9aa9c2!important;
}

.sales-offer-v12 b{
  color:#dce6f7!important;
}

.sales-pipeline-result-v12 .guardian-result{
  grid-column:1/-1;
}

@media(max-width:1100px){

  .routing-form-v12{
    grid-template-columns:1fr 1fr;
  }

  .route-arrow{
    display:none;
  }

  .routing-form-v12 textarea{
    grid-column:1/-1;
  }

  .sales-pipeline-result-v12{
    grid-template-columns:1fr 1fr 1fr;
  }

}

@media(max-width:700px){

  .agent-routing-head,
  .sales-v12-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .routing-form-v12,
  .sales-pipeline-result-v12{
    grid-template-columns:1fr;
  }

  .routing-form-v12 textarea{
    grid-column:auto;
  }

  .route-row-v12{
    grid-template-columns:1fr;
  }

  .sales-offer-v12,
  .sales-pipeline-result-v12 .guardian-result{
    grid-column:auto;
  }

  .agent-route-secondary{
    display:block;
    margin:7px 0 0;
    width:100%;
  }

  #runSalesWorkflowV12{
    width:100%;
  }

}

/* =========================================================
   SaKaLaNs Guardian Status Lights v1.2.1
   ========================================================= */

.guardian-levels span,
.routing-green{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
}

.guardian-levels span::before,
.routing-green::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
  flex:0 0 8px;
}

.g-green::before,
.routing-green::before{
  background:#35dda2;
  box-shadow:
    0 0 5px rgba(53,221,162,.95),
    0 0 12px rgba(53,221,162,.55);
}

.g-yellow::before{
  background:#ffc857;
  box-shadow:
    0 0 5px rgba(255,200,87,.95),
    0 0 12px rgba(255,200,87,.55);
}

.g-red::before{
  background:#ff667d;
  box-shadow:
    0 0 5px rgba(255,102,125,.95),
    0 0 12px rgba(255,102,125,.55);
}

/* Guardian ska kännas som aktiv systemstatus */
.g-green,
.g-yellow,
.g-red{
  border:1px solid rgba(255,255,255,.07);
}

/* Routing layout */
.routing-form-v12 select{
  min-height:42px;
}

.routing-form-v12 input,
.routing-form-v12 textarea{
  min-height:42px;
}

.routing-form-v12 select option{
  background:#0b1424;
  color:#edf4ff;
}

.route-arrow{
  display:grid;
  place-items:center;
  min-width:28px;
  font-size:18px;
}

.agent-routing-head .routing-green{
  min-width:72px;
  justify-content:center;
}

/* senaste överlämningar */
.routing-log-title{
  padding-top:4px;
}

.route-row-v12{
  min-height:54px;
}