:root{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#1f2937;
  background:#f4f7fa;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%}
body{background:#f4f7fa}
a{color:#164e8a;text-decoration:none}

header{
  display:flex;
  gap:2rem;
  align-items:center;
  padding:14px 22px;
  background:#fff;
  border-bottom:1px solid #ddd;
  position:sticky;
  top:0;
  z-index:20;
}
header strong{white-space:nowrap}
nav,header nav{display:flex;gap:14px;flex-wrap:wrap}

main{
  width:100%;
  max-width:1100px;
  margin:24px auto;
  padding:0 18px;
}

.card{
  width:100%;
  min-width:0;
  background:#fff;
  border:1px solid #dbe4ec;
  border-radius:14px;
  padding:18px;
  margin:14px 0;
  box-shadow:0 2px 8px rgba(20,55,85,.06);
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
  min-width:0;
}

form,label{min-width:0}

input,select,textarea,button{
  font:inherit;
  padding:8px 10px;
  border:1px solid #bbb;
  border-radius:6px;
}
input,select,textarea{max-width:100%}

button,.btn{
  background:#164e8a;
  color:#fff;
  border:0;
  padding:9px 14px;
  border-radius:6px;
  cursor:pointer;
}
.danger{background:#9b1c1c}
.muted{color:#6b7280}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.flash{padding:10px;border-radius:6px;background:#e8f3ff;margin-bottom:12px}

table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}
th,td{
  padding:10px;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
  vertical-align:middle;
}

/* Stato / relè */
.status{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#9ca3af;
  margin-right:6px;
}
.status.online,.online{background:#2e8b57}
.status.offline,.offline{background:#c94a4a}
.relay{
  width:100%;
  min-height:72px;
  font-size:1.05rem;
  border-radius:12px;
  transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.relay.off{background:#f1f4f7;color:#344454;border:1px solid #d5dee6}
.relay.on{background:#2e8b57;color:#fff;border:1px solid #26784c;box-shadow:0 3px 8px rgba(46,139,87,.22)}
.relay:disabled{opacity:.55;cursor:not-allowed}

/* Login */
.login{max-width:420px;margin:10vh auto}
.login-brand{width:100%;text-align:center;margin:0 0 25px}
.login-brand h1{text-align:center;margin:0 0 12px;color:#173f63;font-size:32px}
.login-logo{display:block;width:130px;height:130px;object-fit:contain;margin:0 auto}

/* Dashboard */
.dash-hero{
  display:flex;
  justify-content:space-between;
  gap:28px;
  align-items:center;
  padding:28px 30px;
  margin-bottom:18px;
  background:linear-gradient(135deg,#173f6b,#246aa8);
  color:#fff;
  border-radius:18px;
  box-shadow:0 12px 34px rgba(24,62,105,.18);
}
.dash-hero h2{font-size:1.75rem;margin:3px 0 6px}
.dash-hero p{margin:0;color:rgba(255,255,255,.82)}
.dash-eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:700;color:#cfe7ff}
.dash-hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.dash-hero .btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.dash-primary{background:#fff;color:#164e8a}
.dash-secondary{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.32)}

.dash-kpis{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
  margin:18px 0;
}
.dash-kpi{
  display:flex;
  gap:12px;
  align-items:center;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:16px;
  min-width:0;
  box-shadow:0 4px 14px rgba(15,23,42,.035);
  transition:transform .15s ease,box-shadow .15s ease;
}
.dash-kpi:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(15,23,42,.08)}
.dash-kpi-icon{
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  border-radius:11px;
  background:#edf5fc;
  color:#164e8a;
  font-weight:800;
}
.dash-kpi-copy{display:flex;flex-direction:column;min-width:0}
.dash-kpi-copy strong{font-size:1.5rem;line-height:1;color:#16283b}
.dash-kpi-copy span{font-size:.86rem;color:#374151;margin-top:4px}
.dash-kpi-copy small{color:#8a94a3;margin-top:2px}

.dash-columns{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);
  gap:16px;
  margin-top:16px;
}
.dash-panel{
  min-width:0;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:20px;
  box-shadow:0 4px 18px rgba(15,23,42,.035);
}
.dash-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:16px}
.dash-panel-head h3{font-size:1.1rem;margin:0 0 4px}
.dash-panel-head p{margin:0;color:#7a8493;font-size:.88rem}
.dash-panel-head>a{white-space:nowrap;font-weight:600}

.dash-device-list{display:flex;flex-direction:column}
.dash-device-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 2px;border-top:1px solid #eef1f5}
.dash-device-row:first-child{border-top:0}
.dash-device-main{display:flex;align-items:center;gap:10px;min-width:0}
.dash-device-main>div{display:flex;flex-direction:column;min-width:0}
.dash-device-main small{color:#7a8493;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-device-meta{display:flex;flex-direction:column;text-align:right}
.dash-device-meta strong{font-size:1.1rem}
.dash-device-meta small{color:#8a94a3}

.dash-shortcuts{display:grid;gap:9px}
.dash-shortcuts a{display:flex;flex-direction:column;padding:12px 14px;border-radius:11px;background:#f7f9fc;border:1px solid #e6ebf1}
.dash-shortcuts a:hover{background:#eef6fd;border-color:#c9deef}
.dash-shortcuts strong{color:#183b5c}
.dash-shortcuts span{font-size:.82rem;color:#7a8493;margin-top:2px}

.dash-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid #eef1f5}
.dash-summary div{display:flex;flex-direction:column}
.dash-summary span{font-size:.78rem;color:#8a94a3}
.dash-summary strong{margin-top:3px;color:#25364a}
.dash-alert{color:#b42318!important}
.dash-recent{margin-top:16px}

.table-wrap,.schedule-table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.dash-table{border:0}
.dash-table thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#697386;background:#f8fafc}
.dash-command,.dash-result{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:999px;font-size:.78rem;font-weight:700}
.dash-command.is-on{background:#e7f6ec;color:#116b31}
.dash-command.is-off{background:#eef1f5;color:#475569}
.dash-result.ok{background:#e8f7ee;color:#137333}
.dash-result.ko{background:#fdecec;color:#b42318}

/* Mobile utenti */
.mobile-device-state{margin:-8px 0 16px}
.mobile-device-card{border-top:4px solid #245b8a}
.mobile-device-card h2{color:#173f63}
.mobile-device-list,#device-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  width:100%;
}
.device-choice,#device-list .device-choice{
  width:100%;
  min-width:0;
  margin:0;
  text-align:center;
  background:#f7f9fc;
  color:#245b8a;
  border:1px solid #cbd9e5;
  border-radius:10px;
}
.device-choice:hover{background:#edf4fa}
.device-choice.selected{background:#dcecf8;color:#173f63;border-color:#8eb6d5;font-weight:700}
.device-choice:disabled{opacity:1;cursor:default;font-weight:700}
.mobile-brand{text-align:center;margin:5px 0 20px}
.mobile-brand-title{font-size:2rem;font-weight:700;margin-bottom:8px;color:#173f63}
.mobile-brand img{display:block;max-width:120px;height:auto;margin:4px auto 0}

/* Devices admin */
.relay-settings{margin-top:18px;padding-top:15px;border-top:1px solid #dbe4ec}
.relay-settings h4{margin:0 0 12px;color:#173f63}
.relay-time-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:9px 0;
  border-bottom:1px solid #edf1f5;
}
.relay-time-name{display:flex;flex-direction:column;font-weight:600}
.relay-time-name small{color:#7a8493;font-weight:normal}
.relay-time-control{display:flex;align-items:center;gap:8px}
.relay-time-control input{width:100px}
.relay-admin-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  border-bottom:1px solid #edf1f5;
}
.relay-name-form,.relay-time-control{display:flex;align-items:center;gap:8px}
.relay-name-form{flex:1;min-width:0}
.relay-name-form input{max-width:260px}
.relay-channel{min-width:55px;font-weight:600;color:#173f63}
.relay-time-control input[type="number"]{width:100px}

/* Programmazioni */
.schedule-editor,.schedule-list-card{width:100%;max-width:100%;min-width:0}
.schedule-form{
  display:grid;
  grid-template-columns:minmax(300px,2fr) minmax(220px,1fr);
  gap:18px 28px;
  align-items:end;
  min-width:0;
}
.schedule-form label{display:flex;flex-direction:column;gap:6px;min-width:0}
.schedule-form label>span,.schedule-label{font-weight:600;color:#344454}
.schedule-form select,.schedule-form input{width:100%;min-width:0}
.schedule-notes{grid-column:1/-1;width:100%}
.schedule-notes input{width:100%}
.schedule-active{
  grid-column:1/-1;
  display:flex!important;
  flex-direction:row!important;
  align-items:center;
  gap:8px!important;
}
.schedule-active input{width:auto}
.schedule-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}

.schedule-onoff{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  grid-column:1/-1;
  min-width:0;
}
.schedule-time-block{
  min-width:0;
  margin:0;
  padding:15px;
  border:1px solid #dbe4ec;
  border-radius:10px;
  background:#f8fafc;
}
.schedule-time-block legend{padding:0 7px;font-weight:700;color:#173f63}
.schedule-clock{
  display:grid;
  grid-template-columns:110px 110px;
  gap:15px;
  min-width:0;
}
.schedule-on-time{color:#2e8b57}
.schedule-off-time{color:#9a5960}

.schedule-days-field{
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.schedule-days{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:10px;
  align-items:center;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:3px;
}
.schedule-days label{
  display:inline-flex!important;
  flex:0 0 auto;
  flex-direction:row!important;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:8px 12px;
  border:1px solid #d5dee6;
  border-radius:8px;
  background:#f8fafc;
  cursor:pointer;
  white-space:nowrap;
}
.schedule-days input{width:auto!important;margin:0}
.schedule-days label:has(input:checked){
  background:#dcecf8;
  border-color:#8eb6d5;
  color:#173f63;
  font-weight:700;
}

.schedule-table{width:100%;border-collapse:collapse}
.schedule-table th,.schedule-table td{padding:12px 10px;vertical-align:middle;border-bottom:1px solid #e4e9ee}
.schedule-table th{text-align:left;color:#173f63}
.schedule-table td small{display:block;margin-top:3px;color:#7a8493}
.schedule-command{display:inline-block;min-width:42px;padding:4px 8px;border-radius:7px;text-align:center;font-weight:700}
.schedule-command.on{background:#dff3e8;color:#26784c}
.schedule-command.off{background:#edf1f5;color:#53606d}
.schedule-state{font-weight:600}
.schedule-state.active{color:#2e8b57}
.schedule-state.inactive{color:#9a5960}
.schedule-row-actions{white-space:nowrap}
.schedule-row-actions form{display:inline;margin-left:6px}

.button.secondary{
  display:inline-block;
  padding:8px 12px;
  border:1px solid #cbd9e5;
  border-radius:7px;
  background:#f7f9fc;
  color:#245b8a;
  text-decoration:none;
}

/* =========================================================
   Header amministrazione
   ========================================================= */

.admin-header {
    display: flex;
    align-items: center;
    gap: 28px;
    width: 100%;
}

.admin-header-top {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
}

.admin-header-top strong {
    white-space: nowrap;
}

.admin-menu-toggle {
    display: none;
}

.admin-nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: auto;
    margin: 0;
}

.admin-nav a {
    display: inline-block;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* =========================================================
   Responsive tablet
   ========================================================= */

@media (max-width: 1050px) {
    .dash-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dash-columns {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Responsive telefono
   ========================================================= */

@media (max-width: 800px) {

    body {
        font-size: 16px;
    }

    main {
        width: 100%;
        max-width: 100%;
        margin: 14px auto;
        padding: 0 12px;
    }

    .admin-header {
        position: static;
        display: block;
        width: 100%;
        padding: 12px;
    }

    .admin-header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
    }

    .admin-header-top strong {
        text-align: left;
        font-size: 20px;
    }

    .admin-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-height: 40px;
        padding: 8px 13px;
        background: #164e8a;
        color: #fff;
        border: 0;
        border-radius: 8px;
        font-weight: 600;
    }

    .admin-nav {
        display: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        width: 100%;
        margin-top: 10px;
    }

    .admin-nav.open {
        display: grid;
    }

    .admin-nav a {
        display: block;
        min-width: 0;
        text-align: center;
        padding: 10px 6px;
        background: #f3f6f9;
        border: 1px solid #d8e0e8;
        border-radius: 8px;
        white-space: normal;
    }

    .card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 14px;
        margin: 12px 0;
    }

    .grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px;
    }

    input,
    select,
    textarea,
    button {
        font-size: 16px;
    }

    input,
    select,
    textarea {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    button,
    .button {
        min-height: 42px;
        padding: 9px 12px;
    }

    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    th,
    td {
        white-space: nowrap;
    }

    .table-wrap,
    .schedule-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-wrap table,
    .schedule-table-wrap table {
        display: table;
        width: max-content;
        min-width: 100%;
        max-width: none;
        overflow: visible;
    }

    .dash-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
    }

    .dash-hero-actions {
        width: 100%;
    }

    .dash-hero-actions .btn {
        flex: 1;
    }

    .dash-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-kpi {
        padding: 13px;
    }

    .dash-panel {
        width: 100%;
        min-width: 0;
        padding: 16px;
    }

    .dash-summary {
        grid-template-columns: 1fr;
    }

    .dash-table {
        min-width: 720px;
    }

    .relay-admin-row,
    .relay-time-row {
        flex-direction: column;
        align-items: stretch;
    }

    .relay-name-form,
    .relay-time-control {
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
    }

    .relay-name-form input {
        width: 100%;
        max-width: 100%;
    }

    .schedule-form {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 15px;
    }

    .schedule-onoff {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px;
    }

    .schedule-clock {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .schedule-days {
        flex-wrap: nowrap !important;
        overflow-x: auto;
    }

    .schedule-row-actions {
        white-space: normal;
    }

    .schedule-row-actions form {
        display: inline-block;
        margin: 4px 0 4px 6px;
    }

    .desktop-only {
        display: none;
    }
}

/* =========================================================
   Telefoni molto stretti
   ========================================================= */

@media (max-width: 480px) {

    main {
        padding: 0 9px;
    }

    .card {
        padding: 12px;
    }

    .dash-kpis {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .dash-kpi {
        gap: 8px;
        padding: 11px;
    }

    .dash-kpi-copy strong {
        font-size: 1.25rem;
    }

    .schedule-clock {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}