/* =====================================================
   BikeID
   File: update.css
   Stili specifici della sezione Update
   ===================================================== */


/* =====================================================
   ASPETTO GENERALE DELLA SEZIONE UPDATE
   ===================================================== */

#update-token{
  --accent:#fbbf24;
}

.update-card-title{
  color:#fbbf24;
  font-size:22px;
  letter-spacing:.4px;
}


/* =====================================================
   PULSANTI UPDATE
   ===================================================== */

.btn-upd-yellow{
  color:#fbbf24 !important;
  border-color:rgba(251,191,36,.55) !important;
}

.btn-upd-yellow:hover{
  box-shadow:0 0 0 3px rgba(251,191,36,.10);
}


/* Hover, focus e active dei pulsanti principali */

#btn-upd-generate-json:hover,
#btn-upd-generate-json:focus,
#btn-upd-generate-json:active,
#btn-upd-upload:hover,
#btn-upd-upload:focus,
#btn-upd-upload:active,
#btn-upd-onchain:hover,
#btn-upd-onchain:focus,
#btn-upd-onchain:active,
#btn-upd-open-token:hover,
#btn-upd-open-token:focus,
#btn-upd-open-token:active,
#btn-upd-verifica:hover,
#btn-upd-verifica:focus,
#btn-upd-verifica:active,
.btn-upd-yellow:hover,
.btn-upd-yellow:focus,
.btn-upd-yellow:active{
  color:#fbbf24 !important;
  border-color:rgba(251,191,36,.55) !important;
  box-shadow:0 0 0 3px rgba(251,191,36,.10) !important;
}


/* Hover, focus e active dei pulsanti secondari */

#btn-upd-download-json:hover,
#btn-upd-download-json:focus,
#btn-upd-download-json:active,
#btn-upd-download-cidgate:hover,
#btn-upd-download-cidgate:focus,
#btn-upd-download-cidgate:active,
.upd-hover-yellow:hover,
.upd-hover-yellow:focus,
.upd-hover-yellow:active{
  color:#fbbf24 !important;
  border-color:rgba(251,191,36,.55) !important;
  box-shadow:0 0 0 3px rgba(251,191,36,.10) !important;
}


/* =====================================================
   REPORT SOTTO I PULSANTI
   ===================================================== */

.upd-btn-report{
  display:block;
  width:100%;
  min-height:16px;
  margin-top:6px;
  font-size:12px;
  line-height:1.25;
  opacity:.95;
}

.upd-btn-report.ok{
  color:#2ee58f;
}

.upd-btn-report.warn{
  color:#fbbf24;
}

.upd-btn-report.err{
  color:#ef4444;
}


/* =====================================================
   WORKFLOW UPDATE — DESKTOP
   ===================================================== */

.upd-actions-row{
  align-items:flex-start;
}

.upd-btn-wrap{
  display:flex;
  flex-direction:column;
  gap:6px;
}


/* =====================================================
   WORKFLOW UPDATE — MOBILE
   ===================================================== */

@media (max-width:900px){

  /* Contenitore generale */

  .button-row.upd-actions-row{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    margin-top:10px;
    gap:22px;
  }


  /* Gruppi del workflow */

  .button-row.upd-actions-row > .upd-btn-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    gap:0;
  }


  /* Pulsanti con larghezza uniforme */

  .button-row.upd-actions-row .btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:min(100%,320px);
    min-height:42px;
    margin:0 auto;
    padding:9px 16px;
    font-size:12px;
    text-align:center;
    white-space:normal;
  }


  /* Reset form */

  #upd-reset{
    background:rgba(9,9,11,.96);
    color:var(--muted);
    border-color:rgba(148,163,253,.22);
  }


  /* Separatore tra Reset e Genera JSON */

  .button-row.upd-actions-row > .upd-btn-wrap:nth-child(2){
    position:relative;
  }

  .button-row.upd-actions-row > .upd-btn-wrap:nth-child(2)::before{
    content:"";
    position:absolute;
    top:-11px;
    left:10%;
    right:10%;
    height:1px;
    background:rgba(148,163,184,.28);
  }


  /* Pulsanti operativi */

  #btn-upd-generate-json,
  #btn-upd-upload,
  #btn-upd-onchain,
  #btn-upd-verifica{
    width:min(100%,320px);
    background:rgba(9,9,11,.96);
    color:#fbbf24 !important;
    border-color:rgba(251,191,36,.65) !important;
  }


  /* Ultimo gruppo: Aggiorna on chain e Verifica */

  .button-row.upd-actions-row > .upd-btn-wrap:last-child{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
  }


  /* Separatore sopra Verifica */

  #btn-upd-verifica{
    position:relative;
    margin-top:22px;
  }

  #btn-upd-verifica::before{
    content:"";
    position:absolute;
    top:-12px;
    left:8%;
    right:8%;
    height:1px;
    background:rgba(148,163,184,.28);
  }


  /* Report */

  .button-row.upd-actions-row .upd-btn-report{
    width:100%;
    min-height:0;
    margin:0;
    padding:0 8px;
    font-size:13px;
    line-height:1.4;
    text-align:center;
    overflow-wrap:anywhere;
  }

  .button-row.upd-actions-row .upd-btn-report:empty{
    display:none;
  }

  .button-row.upd-actions-row .upd-btn-report:not(:empty){
    display:block;
    margin-top:8px;
  }


  /* Badge numerati */

  .button-row.upd-actions-row .btn-step-badge{
    width:17px;
    height:17px;
    flex:0 0 17px;
    margin-right:3px;
    font-size:10px;
  }
}