/*
  Keep widget views free of inline <style> blocks and reuse common UI building blocks.
*/

.diagrun{
  --wg-border:      var(--primary-color);
  --wg-head-bg:     var(--primary-color);
  --wg-divider:     #eee;
  --wg-accent:      var(--primary-color);
 
  --wg-error-color: #a51919;


  --wg-font-size:     12px;
  --wg-font-weight:   400;
  --wg-text:       #333;
  --wg-text-muted:  #616D8A;

  --wg-head-px:            12px;
  --wg-head-h:             64px;
  --wg-card-min-height:    464px;
  --wg-card-max-height:    none;
  --wg-card-height:        auto;

  --diagrun-tab-icon-size:      18px;
  --diagrun-tab-circle-size:    36px;
  --diagrun-tab-center-top:     24px;
  --diagrun-tab-active-drop:    24px;
  --diagrun-tab-step:           50px;
  --diagrun-tab-left:           12px;
  --diagrun-tab-color:          var(--primary-color);
  --diagrun-tab-color-active:   var(--primary-color);
  --diagrun-tab-circle-bg:   #fff;
  --diagrun-bubble-bg:        var(--primary-color);
  --diagrun-bubble-height:      48px;
  --diagrun-bubble-width:       calc(var(--diagrun-bubble-height) * 1.6220930233);
  --diagrun-tab-hit-size:       44px;
  --diagrun-tab-strip-height:   calc(var(--diagrun-tab-center-top) + var(--diagrun-tab-active-drop));
  
  --diagrun-tab-title-gap:        10px;
  --diagrun-tab-title-offset-y:   12px;
  --diagrun-tab-title-font-size:   9px;
  --diagrun-tab-title-font-weight: 500;
  --diagrun-tab-title-font-family: var(--main-font-family);
  --wg-head-title-offset-bottom:   4px;
  --wg-head-actions-offset-top:    6px;
}
/**********************************************************************
Widget Card
***********************************************************************/
.wg-card {
  border:         1px solid var(--wg-border);
  border-radius:  0px;
  overflow:       hidden;
  background:     #fff;
  margin-top:     0px;
  box-sizing:     border-box;
  font-family:    inherit;
  font-size:      var(--wg-font-size);
  font-weight:    var(--wg-font-weight);
  color:          var(--wg-text);

  min-height:     var(--wg-card-min-height);
  max-height:     var(--wg-card-max-height);
  height:         var(--wg-card-height);

  display:        flex;
  flex-direction: column;
  flex:           1 1 auto;
  min-width:      0;

}
/**********************************************************************
diagrun-tabsbar-page
***********************************************************************/
.diagrun{
  height: 100%;
  overflow: hidden;
}

.diagrun-page.is-active{
  overflow: hidden;
}

.diagrun-page.is-active > *{
  min-height: 0;
}

.diagrun-page.is-active > .wg-card,
.diagrun-page.is-active > .diagrun-root{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/**********************************************************************
diagrun-tabsbar
***********************************************************************/
.diagrun--bubble-tabs .diagrun-tabsbar{
  position: relative;
  z-index: 20;
  margin-bottom: 0;
  pointer-events: none;
  min-height: var(--diagrun-tab-strip-height);
  height: var(--diagrun-tab-strip-height);
  overflow: visible;
}

.diagrun--bubble-tabs .diagrun-tabs{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding-left: var(--diagrun-tab-left);
  pointer-events: auto;
  min-height: var(--diagrun-tab-strip-height);
  height: var(--diagrun-tab-strip-height);
  overflow: visible;
}

.diagrun--bubble-tabs .diagrun-tab{
  position: relative;
  width: var(--diagrun-tab-step);
  height: var(--diagrun-tab-strip-height);
  flex: 0 0 var(--diagrun-tab-step);
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--diagrun-tab-color);
  cursor: pointer;
  line-height: 1;
  pointer-events: auto;
  z-index: 5;
}

.diagrun--bubble-tabs .diagrun-tab::before{
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--diagrun-tab-center-top) - (var(--diagrun-tab-circle-size) * 0.5));
  width: var(--diagrun-tab-circle-size);
  height: var(--diagrun-tab-circle-size);
  transform: translate(-50%, 0);
  border-radius: 50%;
  background: var(--diagrun-tab-circle-bg);
  box-shadow: none;
  opacity: 0;
  transition: transform .3s ease;
  z-index: 1;
}

.diagrun--bubble-tabs .diagrun-tab i{
  position: absolute;
  left: 50%;
  top: var(--diagrun-tab-center-top);
  transform: translate(-50%, -50%);
  font-size: var(--diagrun-tab-icon-size);
  line-height: 1;
  transition: transform .22s ease, opacity .18s ease, color .18s ease;
  z-index: 2;
}

.diagrun--bubble-tabs .diagrun-tab .diagrun-tab-title{
  position: absolute;
  left: calc(50% + (var(--diagrun-tab-circle-size) * 0.5) + var(--diagrun-tab-title-gap));
  top: calc(var(--diagrun-tab-center-top) + var(--diagrun-tab-active-drop) + var(--diagrun-tab-title-offset-y));
  transform: translateY(-50%);
  display: none;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;

  font-family: var(--diagrun-tab-title-font-family);
  font-size: var(--diagrun-tab-title-font-size);
  font-weight: var(--diagrun-tab-title-font-weight);
  letter-spacing: 0.2em;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.diagrun--bubble-tabs .diagrun-tab[aria-selected="true"][data-widget-title] .diagrun-tab-title{
  display: block;
}

.diagrun--bubble-tabs .diagrun-tab[aria-selected="true"]{
  color: var(--diagrun-tab-color-active);
}

.diagrun--bubble-tabs .diagrun-tab[aria-selected="true"]::before{
  opacity: 1;
  transform: translate(-50%, var(--diagrun-tab-active-drop));
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.diagrun--bubble-tabs .diagrun-tab[aria-selected="true"] i{
  transform: translate(-50%, calc(-50% + var(--diagrun-tab-active-drop)));
}

.diagrun--bubble-tabs .diagrun-tab:disabled,
.diagrun--bubble-tabs .diagrun-tab.is-disabled{
  opacity: .45;
  cursor: default;
}

.diagrun--bubble-tabs .diagrun-tabFollower{
  position: absolute;
  left: 0;
  top: var(--diagrun-tab-strip-height);
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: left .4s ease, opacity .18s ease;
}

.diagrun--bubble-tabs .diagrun-tabFollower.is-visible{
  opacity: 1;
}

.diagrun--bubble-tabs .diagrun-tabFollower-svg{
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--diagrun-bubble-width);
  height: var(--diagrun-bubble-height);
  display: block;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.diagrun--bubble-tabs .diagrun-tabFollower-svg path{
   fill: var(--diagrun-bubble-bg);
}
/**********************************************************************
Widget Header
***********************************************************************/
.wg-head {
  padding:        0 6px 0 var(--wg-head-px);
  background:     var(--wg-head-bg);
  border-bottom:  1px solid rgba(255,255,255,0.18);
  font-size:      14px;
  font-weight:    400;
  box-sizing:     border-box;

  height:         var(--wg-head-h);
  min-height:     var(--wg-head-h);
  flex:           0 0 var(--wg-head-h);
  flex-shrink:    0;
  display:        flex;
  align-items:      stretch; /* важливо */
  justify-content:  space-between;
  position:       relative;
  color:        #eee;
}

.wg-head-title{
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--wg-head-title-offset-bottom);
}
.wg-head-actions{
  display: flex;
  align-items: flex-start;
  padding-top: var(--wg-head-actions-offset-top);
}

.wg-head-btn{
  border: none;
  background: transparent;
  height: 28px;
  width:  28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
  border-radius: 14px;
  color: inherit;
  line-height: 1;
}

.wg-head-btn:hover{
  background: rgba(255,255,255,0.12);
  opacity: 1;
}
.wg-head-btn:disabled{ cursor: default; opacity: 0.35; background: transparent; }
.wg-head-btn i{ font-size: 13px; }

/* Body (one common container for widget content) */
.wg-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Shared tabs */
.wg-tabs-wrap {
  box-sizing: border-box;
  height: var(--wg-head-h);
  padding: 8px 8px 0 8px;
  position: relative;
  flex: 0 0 auto;
}

.wg-tabs {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  height: 28px;
  padding-bottom: 6px;
  box-sizing: border-box;
}

.wg-tab {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  font-weight: 400;
  font-family: inherit;
  height: auto;
  color: var(--primary-color);
}

.wg-tab.active {
  opacity: 1;
  color: var(--wg-accent);
  font-weight: 500;
}

.wg-tabs-divider {
  height: 3px;
  background: var(--wg-divider);
  margin: 0;
  position: relative;
}
.wg-tabs-marker {
  position: absolute;
  height: 3px;
  background: var(--wg-accent);
  left: 0;
  width: 40px;
  top: 0;
  transform: translateX(0);
  transition: transform 120ms linear, width 120ms linear;
}

/* Shared page */
.wg-page {
  flex: 1 1 auto;
  min-height: 0;
  display: none;
  /*padding: 10px 12px;*/
  overflow: auto;
  position: relative;
}
.wg-page.active { display: block; }

/* Optional: column page layout (for "stick to bottom" layouts) */
.wg-page.wg-col.active {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* NO DATA overlay */
.wg-nodata {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  opacity: 0.55;
  text-transform: uppercase;
  pointer-events: none;
}
/**********************************************************************
ECU widget (ecu.ejs)
***********************************************************************/
.ecu-root {
  display:         flex;
  gap:             12px;
  box-sizing:      border-box;
  width:           100%;
  min-width:       0;
  min-height:      0;
  flex:            1 1 auto;
  align-items:     stretch;
}

.ecu-left  {
  width:        540px;
  min-width:    0;
  min-height:   0;
  flex:         0 1 540px;
}

.ecu-right {
  flex:         1 1 auto;
  min-width:    0;
  min-height:   0;
  width:        0;
  display:      flex;
  flex-direction: column;
}

.ecu-left-cols {
  display: grid;
  grid-template-columns: 24px 90px 66px 1fr;
  gap: 8px;
}

.ecu-left-cols.wg-head > div{
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--wg-head-title-offset-bottom);
}

.ecu-mod-list {
  flex:         1 1 auto;
  min-height:   0;
  max-height:   none;
  overflow-y:   auto;
  overflow-x:   hidden;
}

.ecu-mod {
  display: grid;
  grid-template-columns: 24px 90px 66px 1fr;
  gap: 8px;
  align-items: center;
  padding: 4px 12px;
  cursor: pointer;
  box-sizing: border-box;
}

.ecu-mod:nth-child(odd)  { background: #fafafa; }
.ecu-mod:nth-child(even) { background: #ffffff; }

.ecu-mod:hover { background: #f6f6f6; }
.ecu-mod.active { background: #e9eefc; }

.ecu-ico { width: 24px; text-align: center; font-size: 15px; }
.ecu-addr { width: 90px; font-family: Consolas, monospace; font-size: 12px; }
.ecu-abbr { width: 66px; font-weight: 700; font-size: 12px; }
.ecu-name {
  font-size: 12px;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ecu-ico-red  { color: #d33; }
.ecu-ico-warn { color: #f2c200; }
.ecu-ico-ok   { color: #25a45a; }

.ecu-empty { padding: 0; font-size: 12px; opacity: 0.75; }

.ecu-modpanel {
  display: none;
  min-width: 0;
  width: 100%;
}

.ecu-modpanel.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.ecu-pages{
  box-sizing:      border-box;
  flex:            1 1 auto;
  min-height:      0;
  display:         flex;
  flex-direction:  column;
}

.ecu-page {
  display:        none;
  flex:           1 1 auto;
  min-height:     0;
  min-width:      0;
  width:          100%;
  position:       relative;
  overflow-y:     auto;
  overflow-x:     hidden;
  box-sizing:     border-box;
}

.ecu-page.active {
  display:        block;
}

.ecu-left .wg-body,
.ecu-right .wg-body{
  flex:            1 1 auto;
  min-height:      0;
}

.ecu-left .wg-page.active,
.ecu-right .wg-page.active{
  display:         flex;
  flex-direction:  column;
  flex:            1 1 auto;
  min-height:      0;
}
/**********************************************************************
ECU widget shared records layout (ids / dtc / app)
***********************************************************************/

.ecu-records{
  --ecu-cols: 1fr;
  --ecu-gap: 32px;
  --ecu-font-size: 13px;
  --ecu-row-padding-y: 8px;
  --ecu-detail-padding-bottom: 8px;

  min-width: 0;
  width: 100%;  
}
.ecu-records-head{
  position: sticky;
  top: 0;
  z-index: 2;
  font-weight: 600;
  background: #ffffff;
}
.ecu-records-head,
.ecu-records-row{
  display:grid;
  grid-template-columns: var(--ecu-cols);
  gap: var(--ecu-gap);
  font-size: var(--ecu-font-size);
  box-sizing:border-box;
  min-width: 0;
  width: 100%;
  border-bottom: 1px solid #f5f5f5;
}

.ecu-records-head,
.ecu-records-row{
  align-items:center;
  padding: var(--ecu-row-padding-y) 12px;
}

.ecu-records-item.is-expanded .ecu-records-row{
  align-items:start;
}

.ecu-records-item.is-expanded .ecu-records-cell--action{
  align-items:flex-start;
}

.ecu-records-head > div{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ecu-records-row{
  min-width:0;
}

.ecu-records-item{
  min-width:0;
}

.ecu-records > *:not(.ecu-records-head):nth-child(even) {
  background: #f5f5f5;
}

.ecu-records-item.is-expandable .ecu-records-cell.is-expandable-cell{
  cursor:pointer;
}

.ecu-records-cell{
  min-width:0;
}

.ecu-cell-text{
  display:block;
  min-width:0;
}


.ecu-records-cell--mono{
  font-family: Consolas, monospace;
}

.ecu-records-cell--strong{
  font-weight:600;
}

.ecu-records-cell--ellipsis{
  min-width:0;
}

.ecu-records-cell--ellipsis .ecu-cell-text{
  display:block;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ecu-records-item.is-expanded .ecu-records-cell.is-expandable-cell .ecu-cell-text{
  white-space:pre-wrap;
  overflow:visible;
  text-overflow:clip;
  line-height:1.45;
}

.ecu-records-cell--action{
  display:flex;
  justify-content:flex-start;
  align-items:center;
}

.ecu-records--app{
  --ecu-cols: minmax(60px, 100px) minmax(100px, 160px) minmax(100px, 1fr) minmax(100px, 180px);
}
.ecu-records--ids{
  --ecu-cols: minmax(100px, 220px) minmax(100px, 1fr) minmax(100px, 180px);
}

.ecu-records--dtc{
  --ecu-cols: minmax(100px, 220px) minmax(100px, 1fr) minmax(100px, 180px);
}

.ecu-app-run{
  height: 22px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 999px;
  color: #27498A;
  border:1px solid #27498A;
  background:transparent;
  padding:0 16px;
  font:inherit;
  font-size: 12px;
  cursor:pointer;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ecu-app-run:hover{
    background: #D1E4FF;
}
/**********************************************************************
Diagnostics Run: Activity widget (diagrun_activity.ejs)
***********************************************************************/

.diagrun-root{
  display: flex;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  align-items: stretch;
}

.diagrun-activityMain{
  flex: 1 1 0;
  min-width: 0;
}

.diagrun-logCard{
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.diagrun-logCard.diagrun-logCard--hidden{ display:none; }

.diagrun-view{
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  container-type: size;
}

.diagrun-content{
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  padding: 10px 12px 0 12px;
}

/**********************************************************************
Diagnostics Run: Activity widget:  STATUS
***********************************************************************/
.diagrun-status{
  width: 100%;
  flex: 0 0 auto;
  display: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.diagrun-status.is-visible{
  display: flex;
  min-height: 60px;
  align-items: flex-end;
}

.diagrun-status-message{
  width: 100%;
  min-height: 40px;

  box-sizing: border-box;
  padding: 10px 12px;

  display: flex;
  align-items: center;

  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  white-space: pre-line;
}




.diagrun-status-icon{
  flex: 0 0 128px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diagrun-status-icon i{
  font-size: 20px;
  line-height: 1;
  color: currentColor;
}

.diagrun-status-message-text{
  flex: 1 1 auto;
  min-width: 0;
}

.diagrun-status--wait{
  color: var(--wg-text-muted);
}

.diagrun-status--wait .diagrun-status-message{
  text-align: left;
  background: #F2F4F7;
}

.diagrun-status--ok{
  color: #001E42;
}

.diagrun-status--ok .diagrun-status-message{
  text-align: left;
  background: #C4E9FB;
  border-radius: 0;
}

.diagrun-status--error{
  color: var(--wg-error-color);
}

.diagrun-status--error .diagrun-status-message{
  text-align: left;
  background: #FDEDEC;
  border-radius: 0;
}


/**********************************************************************
Diagnostics Run: Activity widget: ACTIONS
***********************************************************************/

.diagrun-actions{
  --diagrun-actions-height: clamp(40px, 20cqh, 200px);
  width: 100%;
  height: var(--diagrun-actions-height);
  flex: 0 0 var(--diagrun-actions-height);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  box-sizing: border-box;
}


.diagrun-action-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 8px 14px;
  min-width: 140px;
  height: 40px;
  color: #27498A;
  border: 1px solid #27498A;
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  gap: 8px;
  transition: background-color .15s ease, opacity .15s ease, transform .05s ease;
}

.diagrun-action-button.is-pending:hover{
  background: transparent;
}

.diagrun-action-button:not(.is-pending):not(:disabled):hover{
  background: #D1E4FF;
}

.diagrun-action-button:not(.is-pending):not(:disabled):active{
  transform: translateY(1px);
}

.diagrun-action-button.is-pending{
  cursor: default;
  opacity: .85;
}

.diagrun-action-button.is-pending::after{
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
  animation: diagrun-action-button-spin .65s linear infinite;
}

.diagrun-action-button:disabled:not(.is-pending){
  cursor: default;
  opacity: .55;
}

@keyframes diagrun-action-button-spin{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/**********************************************************************
Diagnostics Run: Activity widget : SHOW MESSAGE
***********************************************************************/

.diagrun-messageView{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: center;
}

.diagrun-progressBody{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 38px;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: 0;
}

.diagrun-progressMsg{
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: var(--wg-text);
  padding: 10px 0 0 0;
}

.diagrun-progressIcon{
  width: 100%;
  text-align: center;
  font-size: 48px;
  line-height: 1;
  color: var(--wg-text);
}

.diagrun-taskName{ font-size: 22px; font-weight: 400; color: var(--wg-text); letter-spacing: 0.06em;}
.diagrun-taskSub{ font-size: 14px; font-weight: 500; color: #001E42; padding-top: 0; letter-spacing: 0.06em;}

/**********************************************************************
STEP PROGRESS
***********************************************************************/
.diagrun-messageSteps{
  --step-blue: var(--primary-color);
  --step-gray: #aaa;
  --step-red: var(--wg-error-color);

  --step-circle-size: 10px;
  --step-current-size: 14px;
  --step-icon-box: 22px;
  --step-icon-size: 16px;
  --step-current-icon-size: 16px;
  --step-line-width: 2px;

  --step-text-size: 10px;
  --step-current-text-size: 11px;
  --step-text-line-height: 16px;
  --step-current-text-line-height: 20px;
  --step-text-gap: 6px;

  --step-left: 28px;
  --step-top: 24px;
  --step-bottom: 24px;

  position: absolute;
  left: var(--step-left);
  top: var(--step-top);
  bottom: var(--step-bottom);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;

  box-sizing: border-box;
}

.diagrun-messageStep{
  --step-control-color: var(--step-blue);
  --step-text-color: var(--wg-text);
  --step-icon-color: var(--step-blue);
  --step-mark-size: var(--step-circle-size);
  --step-label-size: var(--step-text-size);
  --step-label-line-height: var(--step-text-line-height);
  --step-label-weight: 500;
  --step-link-background: var(--step-blue);

  position: relative;

  display: grid;
  grid-template-columns: var(--step-icon-box) var(--step-current-size) auto;
  align-items: center;

  flex: 1 1 0;

  column-gap: var(--step-text-gap);
}

.diagrun-messageStep::after{
  content: "";

  position: absolute;
  z-index: 1;

  left: calc(
    var(--step-icon-box) +
    var(--step-text-gap) +
    ((var(--step-current-size) - var(--step-line-width)) / 2)
  );

  top: 50%;
  bottom: -50%;

  width: var(--step-line-width);
  background: var(--step-link-background);
}

.diagrun-messageStep:last-child::after{
  display: none;
}

.diagrun-messageStepIcon{
  position: relative;
  z-index: 3;

  width: var(--step-icon-box);

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--step-icon-color);
  font-size: var(--step-icon-size);
  line-height: 1;
}

.diagrun-messageStepMark{
  position: relative;
  z-index: 2;

  justify-self: center;

  width: var(--step-mark-size);
  height: var(--step-mark-size);

  border-radius: 999px;
  background: var(--step-control-color);
}

.diagrun-messageStepText{
  font-size: var(--step-label-size);
  line-height: var(--step-label-line-height);
  font-weight: var(--step-label-weight);
  color: var(--step-text-color);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.diagrun-messageStep--pending,
.diagrun-messageStep--exclamation{
  --step-mark-size: var(--step-current-size);
  --step-label-size: var(--step-current-text-size);
  --step-label-line-height: var(--step-current-text-line-height);
  --step-label-weight: 600;
  --step-icon-size: var(--step-current-icon-size);
}

.diagrun-messageStep--fail,
.diagrun-messageStep--exclamation{
  --step-icon-color: var(--step-red);
}

.diagrun-messageStep--muted{
  --step-control-color: var(--step-gray);
  --step-text-color: var(--step-gray);
  --step-icon-color: var(--step-gray);
  --step-link-background: var(--step-gray);
}

.diagrun-messageStep--toMuted{
  --step-link-background: linear-gradient(
    180deg,
    var(--step-blue) 0%,
    var(--step-blue) 20%,
    var(--step-gray) 100%
  );
}
/**********************************************************************
!!!!!!!!!!!!!!!!!!!!
***********************************************************************/
.diagrun-taskMsg{
  font-size: 13px;
  font-weight: 400;
  white-space: pre-line;
  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.diagrun-taskMsg--wait{
  padding: 0;
  text-align: center;
  background: transparent;
  border: none;
  color: var(--wg-text-muted);
}

.diagrun-taskMsg--ok{
  padding: 10px 12px;
  text-align: left;
  background: #C4E9FB;
  color: #001E42;
  border-left: 4px solid #416EB6;
  border-radius: 0;
}

.diagrun-taskMsg--error{
  padding: 10px 12px;
  text-align: left;
  background: #FDEDEC;
  color: #330907;
  border-left: 4px solid var(--wg-error-color);
  border-radius: 0;
}

/**********************************************************************
Diagnostics Run: Activity widget : LOG
***********************************************************************/

.diagrun-logBox{
  margin: 0;
  background: #fff;
  font-size: 13px;
  line-height: 1.35;
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--wg-text);
  font-family: Consolas, monospace;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
}

.diagrun-logLine{
  display: grid;
  grid-template-columns: 23ch 1fr;
  column-gap: 2ch;
  align-items: start;
}

.diagrun-logCtx{ font-weight: 600; color: var(--wg-text); }
.diagrun-logText{ font-weight: 400; }

.diagrun-logBlockTitle{
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 4px;
  color: var(--wg-text);
}

.diagrun-logTs{ white-space: nowrap; }

.diagrun-logMsg{
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.diagrun-logMsg--title{ font-weight: 700; }
.diagrun-logMsg--ok{ color: #1b7f3a; }
.diagrun-logMsg--error{ color: #c62828; }
.diagrun-logMsg--warn{ color: #b26a00; }
.diagrun-logMsg--wait{ color: var(--wg-text-muted); }
.diagrun-logMsg--dim{ color: var(--wg-text-muted); }

/**********************************************************************
Diagnostics Run Summary
***********************************************************************/

.diagrun-summaryView{
  --sum-text-color: #111;
  --sum-side-width: 120px;
  --sum-divider-gap: 12px;
  --sum-section-gap: 6px;
  --sum-icon-col: 24px;
  --sum-icon-gap: 0px;
  --sum-table-label-col: 200px;
  --sum-title-size: 16px;
  --sum-side-size: 16px;
  --sum-body-size: 13px;
  --sum-body-line: 20px;
  --sum-table-label-weight: 500;

  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  color: var(--sum-text-color);
}

.diagrun-summaryBody{
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: var(--sum-divider-gap);
  padding: 18px 24px 0 24px;
  box-sizing: border-box;
  min-height: 0;
  overflow: auto;
}

.diagrun-summarySide{
  width: var(--sum-side-width);
  flex: 0 0 var(--sum-side-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  min-height: 0;
}

.diagrun-summarySideText{
  width: 100%;
  flex: 0 0 auto;
  text-align: center;
  font-size: var(--sum-side-size);
  font-weight: 500;
  color: inherit;
  white-space: pre-line;
  padding-bottom: 12px;
}

.diagrun-summarySideIcon{
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  line-height: 1;
  color: var(--primary-color);
  pointer-events: none;
  min-height: 0;
}

.diagrun-summaryDivider{
  width: 4px;
  flex: 0 0 4px;
  align-self: stretch;
  background: var(--primary-color);
}

.diagrun-summaryMain{
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sum-section-gap);
  text-align: left;
  box-sizing: border-box;
}

.diagrun-summaryItem{ width: 100%; box-sizing: border-box; }

.diagrun-summaryLead{
  width: 100%;
  display: grid;
  grid-template-columns: var(--sum-icon-col) minmax(0,1fr);
  column-gap: var(--sum-icon-gap);
  align-items: center;
  box-sizing: border-box;
}

.diagrun-summaryIcon{
  width: var(--sum-icon-col);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sum-body-size);
  color: var(--primary-color);
  align-self: flex-start;
  height: var(--sum-body-line);
}

.diagrun-summaryTitle{
  min-width: 0;
  font-size: var(--sum-title-size);
  font-weight: 500;
  color: inherit;
  padding-bottom: 12px;
}

.diagrun-summaryText{
  min-width: 0;
  font-size: var(--sum-body-size);
  font-weight: 400;
  color: inherit;
  white-space: pre-line;
  line-height: var(--sum-body-line);
}

.diagrun-summaryFrame{
  display: inline-block;
  max-width: 520px;
  min-width: 0;
  width: fit-content;
  justify-self: start;
  box-sizing: border-box;
  border: 1px solid var(--primary-color);
  border-radius: 6px;
  margin-top: 6px;
  padding: 6px 32px 6px 12px;
  vertical-align: top;
  margin-bottom: 12px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: justify;
}

.diagrun-summaryFrameText{
  min-width: 0;
  font-size: var(--sum-body-size);
  font-weight: 400;
  color: inherit;
  white-space: pre-line;
  line-height: var(--sum-body-line);
}

.diagrun-summaryLead--text{ align-items: start; }

.diagrun-summaryLead--text > .diagrun-summaryIcon{
  align-self: flex-start;
  margin-top: 12px;
}

.diagrun-summaryTable{
  width: 100%;
  max-width: 760px;
  color: inherit;
  box-sizing: border-box;
}

.diagrun-summaryTableRow{
  width: 100%;
  display: grid;
  grid-template-columns: var(--sum-table-label-col) minmax(0,1fr);
  gap: 18px;
  align-items: start;
  box-sizing: border-box;
}

.diagrun-summaryTableLabel{
  font-size: var(--sum-body-size);
  line-height: 2;
  font-weight: var(--sum-table-label-weight);
  color: inherit;
}

.diagrun-summaryTableValue{
  font-size: var(--sum-body-size);
  line-height: 2;
  font-weight: 400;
  color: inherit;
  overflow-wrap: anywhere;
}

@media (max-width: 900px){
  .diagrun-summaryView{
    --sum-side-width: 92px;
    --sum-table-label-col: 180px;
    --sum-title-size: 14px;
  }

  .diagrun-summaryBody{
    padding: 16px 16px 0 16px;
  }
}

@media (max-width: 640px){
  .diagrun-summaryBody{
    flex-direction: column;
    gap: 14px;
  }

  .diagrun-summarySide{
    width: auto;
    flex: 0 0 auto;
    min-height: 24px;
  }

  .diagrun-summarySideText{
    width: auto;
    text-align: left;
  }

  .diagrun-summarySideIcon{
    left: auto;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .diagrun-summaryDivider{
    width: 100%;
    height: 1px;
    min-height: 1px;
  }

  .diagrun-summaryTableRow{
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
/**********************************************************************
Diagnostics Run Activity State
***********************************************************************/

.diagrun-state{
  --state-line-gap:  4px;
  --state-entry-gap: 16px;
  --state-icon-size: 16px;
  --state-text-size: 11px;
  --state-font-family: Consolas, monospace;

  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1 1 0;
  position: relative;
  box-sizing: border-box;
  padding: 22px 28px 0 28px;
  color: #111;
  overflow: hidden;
}

.diagrun-state-left{
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

.diagrun-state-center{
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.diagrun-state-list{
  display: flex;
  flex-direction: column;
  gap: var(--state-entry-gap);
  min-width: 0;
}

.diagrun-state-entry{
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 20px;
  align-items: center;
  min-width: 0;
  min-height: 28px;
}

.diagrun-ti{
  width: 28px;
  height: 28px;
  position: relative;
  box-sizing: border-box;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid #27498A;
  color: #27498A;
}


.diagrun-ti > i{
  position: static;
  width: var(--state-icon-size);
  height: var(--state-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--state-icon-size);
  line-height: 1;
  color: inherit;
}

.diagrun-ti > i::before{
  display: block;
  line-height: 1;
}

.diagrun-state-text{
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--state-line-gap);
}

.diagrun-state-line{
  min-width: 0;
  font-size: var(--state-text-size);
  line-height: 1;
  font-weight: 500;
  font-family: var(--state-font-family);
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.06em;
}

.status--ok{ color: #007234; border-color: #007234; font-weight: 600; letter-spacing: 0.1em;}
.status--err{color: #B9332E; border-color: #B9332E; font-weight: 600; letter-spacing: 0.1em;}
.status--warn{color: #b57900; border-color: #b57900;}
.status--muted{color: #8a8a8a;  border: none;}
.status--pending{ position: relative; border-color: transparent;}


.status--pending::after{
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: currentColor;
  border-right-color: currentColor;
  border-bottom-color: currentColor;
  border-left-color: currentColor;
  border-left-color: transparent;
  opacity: 0.7;
  animation: diagrunSpin 0.9s linear infinite;
  pointer-events: none;
}
.diagrun-state-line.status--pending::after{  content: none; }

/**********************************************************************
diagrun-conn
***********************************************************************/

.diagrun-conn{
  --conn-color: rgba(27, 127, 58, 0.58);
  --conn-soft: rgba(27, 127, 58, 0.14);
  --conn-strong: rgba(27, 127, 58, 0.58);
  --conn-fill-a: rgba(255,255,255,0.40);
  --conn-fill-b: rgba(255,255,255,0.10);
  --conn-fill-c: rgba(27,127,58,0.06);
  --conn-fill-d: rgba(27,127,58,0.30);

  width: 240px;
  height: 240px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--main-font-family);
  font-weight: 600;
}

.diagrun-conn.status--ok{
  --conn-color: rgba(27, 127, 58, 0.58);
  --conn-soft: rgba(27, 127, 58, 0.14);
  --conn-strong: rgba(27, 127, 58, 0.58);
  --conn-fill-c: rgba(27,127,58,0.06);
  --conn-fill-d: rgba(27,127,58,0.30);
}

.diagrun-conn.status--err{
  --conn-color: rgba(198, 40, 40, 0.5);
  --conn-soft: rgba(198, 40, 40, 0.14);
  --conn-strong: rgba(198, 40, 40, 0.58);
  --conn-fill-c: rgba(198,40,40,0.06);
  --conn-fill-d: rgba(198,40,40,0.30);
}

.diagrun-conn.status--warn{
  --conn-color: rgba(181, 121, 0, 0.64);
  --conn-soft: rgba(181, 121, 0, 0.14);
  --conn-strong: rgba(181, 121, 0, 0.58);
  --conn-fill-c: rgba(181,121,0,0.06);
  --conn-fill-d: rgba(181,121,0,0.30);
}

.diagrun-conn.status--muted,
.diagrun-conn.status--gray{
  --conn-color: rgba(120, 120, 120, 0.62);
  --conn-soft: rgba(120, 120, 120, 0.12);
  --conn-strong: rgba(120, 120, 120, 0.40);
  --conn-fill-c: rgba(120,120,120,0.05);
  --conn-fill-d: rgba(120,120,120,0.22);
}

.diagrun-conn-ring{
  width: 190px;
  height: 190px;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  border: 0;
  overflow: hidden;

  background:
    radial-gradient(circle at center,
      var(--conn-fill-a) 0%,
      var(--conn-fill-b) 28%,
      var(--conn-fill-c) 62%,
      var(--conn-fill-d) 100%
    );

  box-shadow:
    0 0 0 1px rgba(0,0,0,0.03) inset,
    0 0 18px var(--conn-soft);
}

.diagrun-conn-ring::before{
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  pointer-events: none;
  box-sizing: border-box;
}

.diagrun-conn-ring::after{
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  pointer-events: none;
  box-sizing: border-box;
  border: 1px solid var(--conn-soft);
}

.diagrun-conn-body{
  position: absolute;
  inset: 0;
  z-index: 2;
  text-align: center;
}

.diagrun-conn-title{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  transform: translate(-50%, -50%);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 1.4px;
  color: var(--conn-color);
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}

.diagrun-conn-title > span{
  display: inline-block;
}

.diagrun-conn.anim--rotate .diagrun-conn-title > span{
  padding-left: 100%;
  animation: diagrunReconnectText 3.2s linear infinite;
}

.diagrun-conn-time{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 24px);
  font-size: 14px;
  line-height: 1;
  color: var(--conn-color);
  font-weight: 500;
}

.diagrun-conn.anim--heartbeat .diagrun-conn-ring{
  animation: diagrunConnPulse 2.4s ease-in-out infinite;
}

.diagrun-conn.anim--rotate .diagrun-conn-ring::before{
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 150deg,
      var(--conn-soft) 225deg,
      var(--conn-strong) 305deg,
      var(--conn-soft) 348deg,
      transparent 360deg
    );

  -webkit-mask:
    radial-gradient(circle at center,
      transparent 0 84px,
      #000 87px 98px,
      transparent 101px 100%
    );

  mask:
    radial-gradient(circle at center,
      transparent 0 84px,
      #000 87px 98px,
      transparent 101px 100%
    );

  filter: blur(2.8px);
  opacity: 0.96;

  animation: diagrunConnSpin 1.35s linear infinite;
}

.diagrun-conn.anim--static .diagrun-conn-ring{
  animation: none;
}

@keyframes diagrunConnPulse{
  0%{
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.03) inset,
      0 0 12px var(--conn-soft);
  }

  50%{
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.03) inset,
      0 0 28px var(--conn-strong);
  }

  100%{
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.03) inset,
      0 0 12px var(--conn-soft);
  }
}

@keyframes diagrunConnSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

@keyframes diagrunReconnectText{
  0%{
    transform: translateX(0);
  }

  100%{
    transform: translateX(-100%);
  }
}
/**********************************************************************
@media
***********************************************************************/
@media (max-width: 720px){
  .diagrun-state-left{
    padding-right: 0;
  }

  .diagrun-state-center{
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
    box-sizing: border-box;
  }

  .diagrun-conn{
    width: 220px;
    height: 220px;
  }

  .diagrun-conn-ring{
    width: 190px;
    height: 190px;
  }
}
/**********************************************************************
 VEHICLE
***********************************************************************/

.veh-kv-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  padding: 4px 12px;
}

.veh-k {
  font-weight: 600;
  color: #222;
  display: flex;
  align-items: center;
  gap: 8px;
}
.veh-ico { opacity: 0.75; width: 14px; text-align: center; }
.veh-v { color: #222; opacity: 0.92; }
.veh-mono { font-family: Consolas, monospace; }



/**********************************************************************
diagrun-btn
***********************************************************************/
.diagrun-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 6px;

    border: 1px solid rgba(120,120,120,0.18);
    background: #fff;
    cursor: pointer;
    user-select: none;

    font-family: var(--main-font-family);
    font-weight: var(--main-font-weight);
    font-size: var(--controls-font-size);
    color: #183153;

    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease,
        transform 60ms ease;
}

.diagrun-btn:disabled{
    opacity: 0.45;
    cursor: default;
}

/* hover / active (base) */
.diagrun-btn:hover:not(:disabled){
    border-color: rgba(120,120,120,0.28);
    background: rgba(24,49,83,0.03);
}

.diagrun-btn:active:not(:disabled){
    transform: translateY(1px);
    background: rgba(24,49,83,0.06);
}

/* focus (keyboard) */
.diagrun-btn:focus{
    outline: none;
}

.diagrun-btn:focus-visible{
    border-color: rgba(47,128,237,0.55);
    box-shadow: 0 0 0 3px rgba(47,128,237,0.22);
}

/* primary */
.diagrun-btn--primary{
    background: rgba(47,128,237,0.12);
    border-color: rgba(47,128,237,0.35);
}

.diagrun-btn--primary:hover:not(:disabled){
    background: rgba(47,128,237,0.16);
    border-color: rgba(47,128,237,0.48);
}

.diagrun-btn--primary:active:not(:disabled){
    background: rgba(47,128,237,0.22);
    border-color: rgba(47,128,237,0.58);
}

/* ghost */
.diagrun-btn--ghost{
    background: transparent;
}

.diagrun-btn--ghost:hover:not(:disabled){
    background: rgba(24,49,83,0.06);
}

.diagrun-btn--ghost:active:not(:disabled){
    background: rgba(24,49,83,0.10);
}



@keyframes diagrunSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

@keyframes diagrunReconnectText{
  0%{
    transform: translateX(0%);
  }

  100%{
    transform: translateX(-100%);
  }
}

@keyframes ag-loader-steps {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.fa-loader.ag-spin,
.fa-solid.fa-loader.ag-spin,
.fa-duotone.fa-loader.ag-spin{
    animation: ag-loader-steps 1s steps(8) infinite;
    transform-origin: center center;
}


/**********************************************************************
DEBUG

.diagrun-content{
  background: rgba(0, 120, 255, .12);
}

.diagrun-status{
  background: rgba(255, 180, 0, .25);
}

.diagrun-status-message{
  background-color: rgba(255, 0, 0, .18) !important;
}

.diagrun-actions{
  background: rgba(0, 180, 80, .22);
}

.diagrun-action-button{
  background: rgba(255, 255, 255, .65);
}

***********************************************************************/