/* PortaComune - temi mobile */

.mobile-shell{
  width:100%;
  max-width:720px;
  margin:0 auto;
}
.mobile-theme-settings{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:18px auto 30px;
  padding:8px 12px;
  font-size:.9rem;
}
.mobile-theme-settings label{font-weight:600}
.mobile-theme-settings select{
  width:auto;
  min-width:135px;
  padding:6px 9px;
}
.mobile-relay-grid .relay{position:relative}
.relay-indicator{display:none}
.relay-name{display:block}

/* ATTUALE */
body.theme-clean{background:#f4f7fa}
body.theme-clean .mobile-theme-settings{color:#6b7280}

/* CLASSICO */
body.theme-classic{
  background:#092756;
  color:#fff;
}
body.theme-classic main{max-width:100%}
body.theme-classic .mobile-shell{max-width:900px}
body.theme-classic .mobile-brand-title{
  color:#fff;
  font-size:2.4rem;
  text-shadow:0 0 16px rgba(0,0,0,.35);
}
body.theme-classic .mobile-brand img{max-width:150px}
body.theme-classic .card{
  background:transparent;
  border:0;
  box-shadow:none;
  color:#fff;
}
body.theme-classic .mobile-device-card{
  border-top:0;
  text-align:center;
}
body.theme-classic .mobile-device-card h2{
  color:#fff;
  font-size:2rem;
  margin-bottom:5px;
  text-shadow:0 0 15px rgba(0,0,0,.35);
}
body.theme-classic .mobile-device-state{
  color:rgba(255,255,255,.82);
  font-size:1.05rem;
}
body.theme-classic .status{
  width:14px;
  height:14px;
}
body.theme-classic .mobile-relay-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px 18px;
  margin-top:28px;
}
body.theme-classic .relay{
  min-height:250px;
  padding:12px;
  background:transparent;
  border:0;
  box-shadow:none;
  color:#fff;
  font-size:1.35rem;
}
body.theme-classic .relay-indicator{
  display:block;
  width:160px;
  height:160px;
  margin:0 auto 12px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f9fbfd 0,#d8e0e8 14%,#8493a3 42%,#465363 69%,#202936 100%);
  border:8px solid #c3ccd5;
  box-shadow:inset 0 0 0 7px #546271,0 8px 20px rgba(0,0,0,.35);
}
body.theme-classic .relay.on .relay-indicator{
  background:radial-gradient(circle at 35% 30%,#fff9ee 0,#ffd277 14%,#ff9e2f 40%,#e55d18 67%,#8a2408 100%);
  border-color:#ffbd56;
  box-shadow:inset 0 0 0 7px #b84010,0 0 28px rgba(255,133,37,.68);
}
body.theme-classic .relay.off,
body.theme-classic .relay.on{
  background:transparent;
  border:0;
}
body.theme-classic .relay-name{
  font-size:1.25rem;
  font-weight:600;
}
body.theme-classic .relay small{
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,.72);
  font-size:.8rem;
}
body.theme-classic .mobile-devices-card h3{
  color:#fff;
  text-align:center;
}
body.theme-classic .device-choice{
  color:#fff;
  background:linear-gradient(#6eb6de,#4a77d4);
  border:1px solid #3762bc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 5px rgba(0,0,0,.28);
}
body.theme-classic .device-choice.selected{
  background:#284a86;
  color:#fff;
  border-color:#9fc9ef;
}
body.theme-classic .mobile-theme-settings{color:rgba(255,255,255,.8)}
body.theme-classic .mobile-theme-settings select{
  color:#092756;
  background:#fff;
}

/* COLORATO */
body.theme-color{
  background:linear-gradient(150deg,#eef7ff 0%,#f6f1ff 48%,#fff7e9 100%);
}
body.theme-color .mobile-brand-title{color:#393064}
body.theme-color .card{
  border:0;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 30px rgba(64,54,111,.10);
}
body.theme-color .mobile-device-card{border-top:5px solid #7756c8}
body.theme-color .mobile-device-card h2{color:#493d82}
body.theme-color .mobile-relay-grid{gap:12px}
body.theme-color .relay{
  min-height:105px;
  border:0;
  box-shadow:0 5px 16px rgba(36,47,72,.10);
}
body.theme-color .relay.off{
  background:linear-gradient(145deg,#edf1f6,#dfe6ee);
  color:#48576a;
}
body.theme-color .relay.on{
  background:linear-gradient(145deg,#28b96b,#168b4a);
  color:#fff;
  box-shadow:0 7px 20px rgba(26,150,82,.28);
}
body.theme-color .device-choice{
  background:linear-gradient(145deg,#efeaff,#e1d7ff);
  color:#56408b;
  border:1px solid #cbbcf3;
}
body.theme-color .device-choice.selected{
  background:linear-gradient(145deg,#7958ca,#6141b0);
  color:#fff;
  border-color:#6141b0;
}
body.theme-color .mobile-theme-settings{color:#675985}

/* SCURO */
body.theme-dark{
  background:#111820;
  color:#e8edf2;
}
body.theme-dark .mobile-brand-title{color:#f2f6fa}
body.theme-dark .card{
  background:#1a2430;
  border:1px solid #2a3948;
  color:#e8edf2;
  box-shadow:0 4px 18px rgba(0,0,0,.20);
}
body.theme-dark .mobile-device-card{border-top:4px solid #4e91c7}
body.theme-dark .mobile-device-card h2,
body.theme-dark .card h3{color:#f0f5f9}
body.theme-dark .muted,
body.theme-dark .mobile-device-state{color:#9eafbe}
body.theme-dark .relay.off{
  background:#263442;
  color:#d7e0e7;
  border:1px solid #34495c;
}
body.theme-dark .relay.on{
  background:#22774a;
  color:#fff;
  border:1px solid #2f9a63;
  box-shadow:0 4px 15px rgba(39,148,91,.25);
}
body.theme-dark .device-choice{
  background:#243341;
  color:#a9cdec;
  border:1px solid #385069;
}
body.theme-dark .device-choice.selected{
  background:#345e7f;
  color:#fff;
  border-color:#4e91c7;
}
body.theme-dark .mobile-theme-settings{color:#9eafbe}
body.theme-dark .mobile-theme-settings select{
  background:#1a2430;
  color:#e8edf2;
  border-color:#415365;
}

@media(max-width:600px){
  .mobile-theme-settings{
    margin-top:14px;
    margin-bottom:22px;
  }
  body.theme-classic .mobile-relay-grid{gap:22px 8px}
  body.theme-classic .relay{
    min-height:210px;
    padding:8px 3px;
  }
  body.theme-classic .relay-indicator{
    width:135px;
    height:135px;
    border-width:7px;
  }
  body.theme-classic .relay-name{font-size:1.1rem}
}

@media(max-width:380px){
  body.theme-classic .relay-indicator{
    width:112px;
    height:112px;
  }
  body.theme-classic .relay{min-height:185px}
  body.theme-classic .relay-name{font-size:1rem}
}
/* =========================================================
   CORREZIONI TEMI MOBILE
   ========================================================= */


/* ---------------------------------------------------------
   CLASSICO
   Sempre 2 relè per riga, come PortaComune originale
   --------------------------------------------------------- */

body.theme-classic .mobile-relay-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 14px !important;
}

body.theme-classic .relay {
    width: 100%;
    min-width: 0;
}


/* ---------------------------------------------------------
   COLORATO
   Versione decisamente più vivace
   --------------------------------------------------------- */

body.theme-color {
    background:
        linear-gradient(
            145deg,
            #dff4ff 0%,
            #f0e2ff 45%,
            #fff0c9 100%
        );
}

body.theme-color .mobile-brand-title {
    color: #54278f;
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(84, 39, 143, .15);
}

body.theme-color .mobile-device-card {
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8edff 100%
        );
    border: 3px solid #a46ee5;
    border-top: 8px solid #7d3ac1;
    box-shadow:
        0 10px 28px rgba(104, 55, 170, .18);
}

body.theme-color .mobile-device-card h2 {
    color: #6328a5;
}


/* Relè spenti: blu acceso */
body.theme-color .relay.off {
    background:
        linear-gradient(
            145deg,
            #49a9ef,
            #2876cf
        );
    color: #ffffff;
    border: 2px solid #2468b5;
    box-shadow:
        0 7px 18px rgba(37, 112, 194, .30);
}


/* Relè accesi: arancio/giallo molto evidente */
body.theme-color .relay.on {
    background:
        linear-gradient(
            145deg,
            #ffca3a,
            #ff7b22
        );
    color: #542500;
    border: 2px solid #ef711a;
    box-shadow:
        0 8px 22px rgba(255, 126, 32, .42);
}

body.theme-color .relay-name {
    font-weight: 800;
    font-size: 1.12rem;
}

body.theme-color .relay small {
    display: block;
    margin-top: 5px;
    font-weight: 700;
}


/* Scelta dispositivi */
body.theme-color .device-choice {
    background:
        linear-gradient(
            145deg,
            #e9d5ff,
            #c9a8ff
        );
    color: #54258d;
    border: 2px solid #a877e0;
    font-weight: 700;
}

body.theme-color .device-choice.selected {
    background:
        linear-gradient(
            145deg,
            #8b44d4,
            #5c25a4
        );
    color: #ffffff;
    border-color: #542198;
}


/* Box scelta tema */
body.theme-color .mobile-theme-settings {
    color: #572b85;
    font-weight: 700;
}

body.theme-color .mobile-theme-settings select {
    background: #fff7cf;
    color: #5b2d86;
    border: 2px solid #ce9be8;
}
/* CLASSICO: ultimo relè centrato quando il numero è dispari */
body.theme-classic .mobile-relay-grid .relay:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: 50%;
    justify-self: center;
}
/* CLASSICO: nasconde la scritta ON/OFF sotto al pulsante */
body.theme-classic .relay small {
    display: none !important;
}