.rete-shell {
    width: 100%;
    display: grid;
    gap: 14px
}

.rete-card {
    border-radius: var(--ui-radius-sm);
    background: color-mix(in srgb, var(--mc-panel) 94%, transparent);
    box-shadow: var(--ui-shadow-strong);
    padding: 16px
}

.rete-card h2 {
    margin: 0;
    font-size: 24px
}

.rete-card h3 {
    margin: 0 0 8px;
    font-size: 16px
}

/* Fase 4 punto 4: card "vendite locali da sincronizzare" - bordo di richiamo. */
.rete-card--warn {
    border: 1px solid color-mix(in srgb, var(--mc-danger) 55%, transparent);
    background: color-mix(in srgb, var(--mc-danger) 10%, var(--mc-panel));
}

.rete-card--warn .panel-title-icon {
    color: var(--mc-danger)
}

.panel-title-row {
    display: flex;
    align-items: center;
    gap: 10px
}

.panel-title-bordered {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--mc-primary)
}

.panel-title-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--mc-primary)
}

.rete-status-row {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px
}

.rete-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mc-text-soft);
    flex-shrink: 0
}

.rete-status-dot.is-online {
    background: var(--mc-success)
}

.rete-status-dot.is-offline {
    background: var(--mc-danger)
}

.rete-mode-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

label.rete-mode-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--mc-border);
    border-radius: 12px;
    cursor: pointer
}

.rete-mode-option__text {
    display: grid;
    gap: 4px
}

.rete-mode-option__text strong {
    font-size: 15px
}

/* Porting 1:1 di switch-master (https://github.com/JohnDatserakis/switch,
   mostrato dall'utente) - stessa struttura (un solo <span>, ::before/::after),
   stesse dimensioni, stessa easing, stesse ombre. Unica modifica: il verde
   principale #4ed164 diventa var(--mc-primary). Tutto il resto (incluso il
   verde del focus-ring #43b556, dettaglio separato nel riferimento originale)
   e' lasciato invariato di proposito, su richiesta esplicita. */
.rete-switch {
    text-align: left;
    width: 46px;
    height: calc(46px / 2);
    border-radius: 60px;
    background-color: var(--mc-primary);
    display: inline-block;
    position: relative;
    cursor: pointer;
    /* Non nel riferimento originale (li' non era dentro un flex): senza
       questo, il flex di .rete-mode-option lo restringe sotto i 46px
       dichiarati mentre la manopola (calc(46px/2) fisso) resta invariata,
       causando sovrapposizioni. Nessuna modifica alle dimensioni dello
       switch stesso, solo la garanzia che vengano rispettate. */
    flex-shrink: 0
}

.rete-switch>span {
    display: block;
    width: 100%;
    height: 100%
}

.rete-switch>input[type="radio"] {
    opacity: 0;
    position: absolute
}

.rete-switch>span:before,
.rete-switch>span:after {
    content: "";
    cursor: pointer;
    position: absolute
}

.rete-switch>input[type="radio"]:focus~span {
    box-shadow: 0 0 0 4px #43b556
}

.rete-switch>input[type="radio"]:checked:focus~span {
    box-shadow: 0 0 0 4px #fff
}

.rete-switch>span {
    border-radius: 60px
}

.rete-switch>span:before {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #f1f1f1;
    border-radius: 60px;
    transition: opacity .2s ease-out .1s, transform .2s ease-out .1s;
    transform: scale(1);
    opacity: 1
}

.rete-switch>span:after {
    top: 50%;
    z-index: 3;
    transition: transform .4s cubic-bezier(0.44, -0.12, 0.07, 1.15);
    width: calc(46px / 2);
    height: calc(46px / 2);
    transform: translate3d(0, -50%, 0);
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3)
}

.rete-switch>input[type="radio"]:checked~span:before {
    transform: scale(0);
    opacity: .7
}

.rete-switch>input[type="radio"]:checked~span:after {
    transform: translate3d(100%, -50%, 0)
}

.field-wrap {
    display: grid;
    gap: 6px;
    margin-top: 14px
}

.field-wrap input[type="text"] {
    width: 100%;
    box-sizing: border-box
}

.inline-muted {
    margin: 0;
    color: var(--mc-text-soft);
    font-size: 13px;
    line-height: 1.4
}

.actions-row {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    justify-content: flex-end
}

.cert-qr-row {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap
}

.cert-qr-box {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
    padding: 8px;
    background: #fff;
    border-radius: 8px;
    /* Il QR resta leggibile anche in dark mode: sfondo bianco fisso, non var(--mc-panel). */
    box-shadow: var(--ui-shadow-soft)
}

.cert-qr-url {
    margin: 0;
    word-break: break-all
}

@media (max-width: 700px) {
    .rete-mode-row {
        grid-template-columns: 1fr
    }
}