:root {
    --ink: #071f2b;
    --ink-soft: #0a3444;
    --aqua: #63e6d1;
    --aqua-deep: #20bca5;
    --sky: #43a9e6;
    --mist: #f3f7f8;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-700: #334155;
    --slate-900: #0f172a;
    --danger: #e11d48;
    --border: #e2e8f0;
    --shadow: 0 18px 50px rgba(7, 31, 43, 0.12);
}

* {
    box-sizing: border-box;
}
.wateret-visually-hidden { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; }

html {
    min-height: 100%;
    background: #edf6f7;
}

body.wateret-page,
body.wateret-content {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    color: var(--slate-900);
    font-family: "Instrument Sans", "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 8% 8%, rgba(99, 230, 209, 0.18), transparent 27rem),
        radial-gradient(circle at 93% 16%, rgba(67, 169, 230, 0.13), transparent 25rem),
        linear-gradient(135deg, #f6fbfb 0%, #edf6f7 48%, #f8fbfc 100%);
}

a {
    color: var(--aqua-deep);
}

button,
input,
select,
textarea {
    font: inherit;
}

.wateret-shell {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-columns: 17rem minmax(0, 1fr);
}

.wateret-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    padding: 1rem 0.65rem;
    color: #e2e8f0;
    background:
        radial-gradient(circle at 15% 10%, rgba(99, 230, 209, 0.16), transparent 14rem),
        linear-gradient(160deg, var(--ink), #082c38);
    box-shadow: 1rem 0 3rem rgba(7, 31, 43, 0.12);
}
.wateret-sidebar-account { position:absolute; right:.75rem; bottom:1rem; left:.75rem; display:flex; align-items:center; gap:.75rem; border-top:1px solid rgba(255,255,255,.08); padding:1rem .5rem 0; }
.wateret-sidebar-account>span { display:grid; width:2.25rem; height:2.25rem; place-items:center; border-radius:50%; color:var(--aqua); background:linear-gradient(135deg,rgba(99,230,209,.25),rgba(67,169,230,.15)); }
.wateret-sidebar-account small,.wateret-sidebar-account strong { display:block; max-width:11rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wateret-sidebar-account small { color:#94a3b8; font-size:.7rem; }.wateret-sidebar-account strong { color:#fff; font-size:.82rem; }

.wateret-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.2rem 0.65rem 1.15rem;
    color: white;
    text-decoration: none;
}

.wateret-brand-mark {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 2.4rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.07);
    color: var(--aqua);
    font-size: 1.35rem;
}

.wateret-brand strong,
.wateret-brand small {
    display: block;
}

.wateret-brand small {
    margin-top: 0.1rem;
    color: var(--aqua);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.wateret-nav-label {
    margin: 0.75rem 0.75rem 0.5rem;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.wateret-nav {
    display: grid;
    gap: 0.3rem;
}

.wateret-nav button,
.wateret-nav a {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.7rem;
    border: 0;
    border-radius: 0.8rem;
    padding: 0.58rem 0.7rem;
    font-size: .85rem;
    color: #cbd5e1;
    background: transparent;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.wateret-nav button:hover,
.wateret-nav a:hover,
.wateret-nav .is-active {
    color: white;
    background: rgba(255, 255, 255, 0.08);
}

.wateret-main {
    min-width: 0;
}

/* Fascia sottile e trasparente: ospita il commutatore di tema a destra e, sotto
   i 900px, il pulsante del menu a sinistra. Senza fondo ne' bordo non legge
   come una barra e costa al contenuto solo la propria altezza. */
.wateret-topbar {
    display: flex;
    min-height: 2.75rem;
    height: 2.75rem;
    align-items: center;
    gap: .75rem;
    padding: 0 1.25rem;
    background: transparent;
}
.wateret-theme-button {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: 1px solid #dbe6ea;
    border-radius: .7rem;
    color: #334155;
    background: rgba(255, 255, 255, .75);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.wateret-theme-button:hover { border-color: #62d8c7; background: #fff; }
.wateret-overview { max-width:78rem; margin:auto; }.wateret-hero { position:relative; overflow:hidden; border-radius:1.35rem; padding:1.45rem 1.7rem; color:#fff; background:radial-gradient(circle at 82% 5%,rgba(99,230,209,.28),transparent 17rem),linear-gradient(125deg,#071f2b,#0a3444 58%,#0c4855); box-shadow:0 1rem 2.8rem rgba(7,31,43,.15); }.wateret-hero h1 { margin:.55rem 0 .4rem; font-size:clamp(1.65rem,3vw,2rem); }.wateret-hero>p:last-of-type { max-width:40rem; margin:.35rem 0; color:#cbd5e1; font-size:.84rem; line-height:1.55; }.wateret-hero-actions { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1rem; }.wateret-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-top:.85rem; }.wateret-metric { border:1px solid rgba(255,255,255,.85); border-radius:.9rem; padding:.9rem 1rem; background:rgba(255,255,255,.9); box-shadow:0 .5rem 1.5rem rgba(7,31,43,.045); }.wateret-metric p { margin:0; color:#64748b; font-size:.76rem; }.wateret-metric strong { display:block; margin-top:.4rem; color:#0f172a; font-size:1.5rem; }.wateret-metric small { color:#94a3b8; font-size:.68rem; }.wateret-overview-panel { margin-top:.9rem; border:1px solid rgba(255,255,255,.85); border-radius:.9rem; padding:1rem 1.15rem; background:rgba(255,255,255,.9); box-shadow:0 .5rem 1.5rem rgba(7,31,43,.045); }.wateret-overview-panel h2 { margin:0; color:#0f172a; font-size:1rem; }.wateret-overview-panel p { margin:.4rem 0 .75rem; color:#64748b; font-size:.8rem; }

.wateret-menu-button {
    display: none;
    border: 0;
    border-radius: 0.7rem;
    padding: 0.55rem 0.7rem;
    color: var(--slate-700);
    background: #f1f5f9;
    cursor: pointer;
}

.wateret-frame {
    display: block;
    width: 100%;
    height: calc(100vh - 2.75rem);
    height: calc(100dvh - 2.75rem);
    border: 0;
}

.wateret-login-page {
    position: relative;
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    place-items: center;
    overflow: hidden;
    padding: 1.5rem;
    color: white;
    background:
        radial-gradient(circle at 16% 18%, rgba(99, 230, 209, 0.2), transparent 25rem),
        radial-gradient(circle at 82% 20%, rgba(67, 169, 230, 0.16), transparent 24rem),
        linear-gradient(135deg, #03151e 0%, #06313e 48%, #075363 100%);
}

.wateret-login-card {
    position: relative;
    width: min(100%, 27rem);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.5rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(22px);
}

.wateret-login-card h1 {
    margin: 1.5rem 0 0.35rem;
    font-size: 1.9rem;
}

.wateret-login-card .intro {
    margin: 0 0 1.5rem;
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.55;
}

.wateret-field-group {
    display: grid;
    gap: 0.45rem;
    margin-top: 1rem;
}

.wateret-field-group label {
    color: #cbd5e1;
    font-size: 0.82rem;
    font-weight: 600;
}

.wateret-field {
    display: block;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.8rem;
    padding: 0.78rem 0.9rem;
    color: white;
    background: rgba(255, 255, 255, 0.07);
    outline: none;
}

.wateret-field:focus {
    border-color: rgba(99, 230, 209, 0.7);
    box-shadow: 0 0 0 3px rgba(99, 230, 209, 0.12);
}

.wateret-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 1rem 0;
    color: #cbd5e1;
    font-size: 0.85rem;
}

.wateret-primary,
.wateret-secondary,
.wateret-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 0.8rem;
    padding: 0.72rem 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.wateret-primary {
    color: var(--ink);
    background: var(--aqua);
}

.wateret-secondary {
    border-color: var(--border);
    color: var(--slate-700);
    background: white;
}

.wateret-danger {
    border-color: #fecdd3;
    color: #be123c;
    background: #fff1f2;
}

.wateret-login-submit {
    width: 100%;
}

.wateret-login-links {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    font-size: 0.82rem;
}

.wateret-login-links a {
    color: var(--aqua);
    text-decoration: none;
}

body.wateret-guest-page { position:relative; isolation:isolate; min-height:100vh; min-height:100dvh; margin:0; overflow-x:hidden; color:#f1f5f9; font-family:"Instrument Sans","Segoe UI",sans-serif; background:radial-gradient(circle at 16% 18%,rgba(99,230,209,.2),transparent 25rem),radial-gradient(circle at 82% 20%,rgba(67,169,230,.16),transparent 24rem),linear-gradient(135deg,#03151e 0%,#06313e 48%,#075363 100%); }
body.wateret-guest-page::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.35; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,#000,transparent 85%); }
body.wateret-guest-page--registration { background:radial-gradient(circle at 14% 16%,rgba(99,230,209,.24),transparent 26rem),radial-gradient(circle at 86% 28%,rgba(112,93,224,.17),transparent 25rem),linear-gradient(135deg,#03151e 0%,#073541 48%,#154b59 100%); }
body.wateret-guest-page--registration .wateret-waves { color:#24a7a4; }
body.wateret-guest-page--recovery { background:radial-gradient(circle at 18% 20%,rgba(67,169,230,.23),transparent 25rem),radial-gradient(circle at 82% 18%,rgba(99,230,209,.13),transparent 24rem),linear-gradient(135deg,#041823 0%,#0a3045 50%,#124d61 100%); }
body.wateret-guest-page--recovery .wateret-waves { color:#397fa4; }
body.wateret-guest-page--registration .wateret-drop,body.wateret-guest-page--recovery .wateret-drop { display:none; }
body.wateret-guest-page--registration .wateret-guest-decor::after,body.wateret-guest-page--recovery .wateret-guest-decor::after { position:absolute; top:4.5rem; left:calc(50% - 14rem); width:16rem; height:16rem; content:""; opacity:.11; background-position:center; background-repeat:no-repeat; background-size:contain; }
body.wateret-guest-page--registration .wateret-guest-decor::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none' stroke='%2363e6d1' stroke-width='2'%3E%3Ccircle cx='96' cy='78' r='35'/%3E%3Cpath d='M35 190c4-48 27-72 61-72 27 0 47 15 56 44' stroke-linecap='round'/%3E%3Ccircle cx='174' cy='151' r='38'/%3E%3Cpath d='M174 132v38m-19-19h38' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.wateret-guest-page--recovery .wateret-guest-decor::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none' stroke='%2363e6d1' stroke-width='2'%3E%3Cpath d='M120 22 48 50v56c0 52 28 91 72 112 44-21 72-60 72-112V50l-72-28Z'/%3E%3Crect x='82' y='105' width='76' height='58' rx='12'/%3E%3Cpath d='M98 105V88a22 22 0 0 1 44 0v17M120 128v14' stroke-linecap='round'/%3E%3C/svg%3E"); }
.wateret-guest-shell { position:relative; display:grid; width:min(calc(100% - 3rem),72rem); min-height:100vh; min-height:100dvh; margin:auto; grid-template-columns:minmax(0,1fr) 27rem; align-items:center; gap:4rem; }
.wateret-guest-decor { position:fixed; z-index:-1; inset:0; overflow:hidden; pointer-events:none; }.wateret-waves { position:absolute; bottom:-2.5rem; left:0; width:100%; height:58%; min-height:24rem; }.wateret-drop { position:absolute; top:3.5rem; left:calc(50% - 15rem); width:18rem; height:18rem; color:rgba(99,230,209,.08); }.decor-line { position:absolute; top:18%; width:8rem; height:1px; background:linear-gradient(90deg,transparent,rgba(99,230,209,.35),transparent); }.decor-line-left{left:8%}.decor-line-right{right:6%;width:11rem}
.wateret-guest-intro { position:relative; display:flex; min-height:min(40rem,calc(100vh - 5rem)); min-height:min(40rem,calc(100dvh - 5rem)); flex-direction:column; justify-content:space-between; padding:1.25rem 0; }
.wateret-guest-brand { display:flex; align-items:center; gap:.875rem; color:#fff; text-decoration:none; }
.wateret-guest-brand strong,.wateret-guest-brand small { display:block; }
.wateret-guest-brand strong { font-size:1.125rem; }
.wateret-guest-brand small { margin-top:.15rem; color:var(--aqua); font-size:.625rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.wateret-brand-mark img { width:1.75rem; height:1.95rem; object-fit:contain; }
.wateret-guest-copy { max-width:36rem; transform:translateY(.875rem); }
.wateret-eyebrow { margin:0; color:var(--aqua); font-size:.75rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.wateret-guest-copy h1 { margin:1.25rem 0 0; color:#fff; font-size:clamp(3rem,5vw,3.75rem); line-height:1.07; letter-spacing:-.035em; }
.wateret-guest-copy h1 span { color:var(--aqua); }
.wateret-guest-copy>p:not(.wateret-eyebrow) { max-width:32rem; margin:1.5rem 0 0; color:#cbd5e1; line-height:1.75; }
.wateret-live-note { display:flex; align-items:center; gap:1.25rem; margin-top:2.25rem; border-left:1px solid rgba(99,230,209,.4); padding-left:1.25rem; }
.wateret-live-note>b { display:grid; width:2.75rem; height:2.75rem; place-items:center; border:1px solid rgba(99,230,209,.2); border-radius:50%; color:var(--aqua); background:rgba(99,230,209,.12); font-size:1.4rem; }
.wateret-live-note strong,.wateret-live-note small { display:block; }
.wateret-live-note small { margin-top:.25rem; color:#94a3b8; }
.wateret-signature,.wateret-guest-footer { color:#94a3b8; font-size:.75rem; }.wateret-signature { display:flex; align-items:center; gap:.5rem; transform:translateY(.8125rem); }.wateret-signature::before { width:2rem; height:1px; background:rgba(99,230,209,.45); content:""; }
.wateret-guest-form-column { display:flex; width:100%; max-width:27rem; flex-direction:column; justify-content:center; justify-self:center; }
.wateret-mobile-brand { display:none; margin-bottom:2rem; justify-content:center; }
body.wateret-guest-page .wateret-login-card { width:100%; }
body.wateret-guest-page .wateret-login-card h2 { margin:.5rem 0; color:#fff; font-size:1.5rem; letter-spacing:-.02em; }
.wateret-label-row { display:flex; align-items:center; justify-content:space-between; }
.wateret-label-row a { color:var(--aqua); font-size:.75rem; font-weight:600; text-decoration:none; }
.wateret-register-note { margin:1.5rem 0 0; color:#94a3b8; text-align:center; font-size:.875rem; }
.wateret-register-note a { color:var(--aqua); font-weight:700; text-decoration:none; }
.wateret-guest-footer { margin:1.5rem 0 0; text-align:center; }
.wateret-auth-submit { margin-top:1.25rem; }
body.wateret-guest-page--registration .wateret-guest-shell { grid-template-columns:minmax(0,1fr) 34rem; gap:3rem; }
body.wateret-guest-page--registration .wateret-guest-form-column { max-width:34rem; padding:1rem 0; }
body.wateret-guest-page--registration .wateret-login-card { padding:1.35rem 1.5rem; }
body.wateret-guest-page--registration .wateret-login-card h2 { margin:.35rem 0; }
body.wateret-guest-page--registration .wateret-login-card .intro { margin-bottom:.75rem; }
body.wateret-guest-page--registration form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1rem; }
body.wateret-guest-page--registration form>.wateret-field-group { margin:0; }
body.wateret-guest-page--registration form>.wateret-field-group:nth-of-type(3) { grid-column:1/-1; }
body.wateret-guest-page--registration form>.wateret-check { grid-column:1/-1; margin:.25rem 0 0; }
body.wateret-guest-page--registration form>.wateret-auth-submit { grid-column:1/-1; margin-top:.25rem; }
body.wateret-guest-page--registration .wateret-register-note { margin-top:1rem; }
body.wateret-guest-page .form-message { display:block; width:100%; height:auto; min-height:0; margin:1rem 0; border:1px solid rgba(251,113,133,.28); border-radius:.75rem; padding:.75rem .875rem; color:#fecdd3; background:rgba(159,18,57,.2); }
body.wateret-guest-page .form-message p { margin:0; font-size:.8rem; line-height:1.4; text-align:left; }
body.wateret-guest-page .form-message-green { border-color:rgba(52,211,153,.28); color:#a7f3d0; background:rgba(6,95,70,.22); }

@media (max-width:960px) { .wateret-guest-shell { width:min(100% - 2rem,28rem); grid-template-columns:1fr; } .wateret-guest-intro { display:none; } .wateret-guest-form-column { min-height:100vh; min-height:100dvh; padding:1.75rem 0; } .wateret-mobile-brand { display:flex; } }
@media (max-width:960px) { body.wateret-guest-page--registration .wateret-guest-shell { width:min(100% - 2rem,34rem); grid-template-columns:1fr; } body.wateret-guest-page--registration .wateret-guest-form-column { min-height:100vh; min-height:100dvh; } }
@media (max-width:560px) { body.wateret-guest-page--registration .wateret-guest-shell { width:min(100% - 2rem,28rem); } body.wateret-guest-page--registration form { grid-template-columns:1fr; } body.wateret-guest-page--registration form>.wateret-field-group:nth-of-type(3),body.wateret-guest-page--registration form>.wateret-auth-submit { grid-column:auto; } }

.wateret-alert {
    position: fixed;
    z-index: 20;
    top: 1rem;
    left: 50%;
    display: none;
    width: min(calc(100% - 2rem), 30rem);
    transform: translateX(-50%);
    border: 1px solid #fecdd3;
    border-radius: 0.85rem;
    padding: 0.8rem 1rem;
    color: #9f1239;
    background: #fff1f2;
    box-shadow: var(--shadow);
}

body.wateret-content { padding: 0; }
body.wateret-content,
body.wateret-content :where(h1,h2,h3,h4,h5,h6,p,a,div,span,table,thead,tbody,tr,th,td,label,button,input,select,textarea) {
    font-family: "Instrument Sans", "Segoe UI", sans-serif;
}
.wateret-section-header { display:flex; width:100%; max-width:78rem; margin:0 auto .9rem; align-items:flex-end; justify-content:space-between; gap:.8rem; }.wateret-section-header h1 { margin:.18rem 0 0; color:#0f172a; font-size:1.65rem; letter-spacing:-.03em; }.wateret-section-header>div>p:last-child { margin:.35rem 0 0; color:#64748b; font-size:.85rem; }.wateret-section-eyebrow { margin:0!important; color:var(--aqua-deep)!important; font-size:.64rem!important; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }.wateret-list-shell,.wateret-account-shell { max-width:78rem!important; min-height:0!important; padding:0!important; overflow:hidden; }.wateret-list-shell .innerBig,.wateret-list-shell .contenitore { display:block!important; width:100%!important; min-height:0!important; margin:0!important; border:0!important; border-radius:0!important; padding:0!important; background:transparent!important; box-shadow:none!important; }.wateret-table-heading { padding:.9rem 1.15rem; border-bottom:1px solid #f1f5f9; }.wateret-table-heading h2 { margin:0; color:#0f172a; font-size:.92rem; }.wateret-table-heading p { margin:.18rem 0 0; color:#64748b; font-size:.7rem; }.wateret-status-dot { display:inline-block; width:.5rem; height:.5rem; margin-right:.4rem; border-radius:50%; vertical-align:middle; }.wateret-status-dot.is-online{background:#10b981}.wateret-status-dot.is-offline{background:#f43f5e}.wateret-status-dot.is-warning{background:#f59e0b}.wateret-status-label{color:#475569;font-size:.75rem}.wateret-action{padding:.36rem .58rem;font-size:.7rem}.wateret-data-panel { overflow:hidden; border:1px solid #f1f5f9; border-radius:.9rem; }.wateret-account-shell>div:first-child { padding:0 0 .55rem; color:#64748b; font-size:.82rem; }
body.wateret-content table.dataTable thead th { border-bottom:1px solid #e2e8f0!important; padding:.72rem .85rem!important; color:#64748b!important; background:#f8fafc!important; font-size:.64rem!important; letter-spacing:.08em; text-transform:uppercase; }body.wateret-content table.dataTable tbody td { border-bottom:1px solid #f1f5f9!important; padding:.72rem .85rem!important; color:#334155; font-size:.82rem; vertical-align:middle; }body.wateret-content table.dataTable tbody tr:hover { background:#f0fdfa!important; }body.wateret-content .dataTables_filter { padding:.72rem 1rem!important; font-size:.78rem; }body.wateret-content .dataTables_filter input { min-width:13rem; padding:.5rem .65rem!important; border:1px solid #e2e8f0!important; background:#fff!important; color:#334155!important; }

body.wateret-content .big,
body.wateret-content .contenitore,
body.wateret-content main.container {
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow);
}

/* Le misure restano quelle del progetto Livello originale; cambia solo la pelle. */
body.wateret-content .superBig {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

body.wateret-content .innerBig { width: 100%; }

body.wateret-content .big,
body.wateret-content .contenitore {
    width: 95% !important;
    max-width: none !important;
    height: 75vh;
    min-height: 0 !important;
    margin: 20px auto 0 !important;
    padding: 10px !important;
}

body.wateret-content table {
    border-collapse: separate;
    border-spacing: 0;
}

body.wateret-content input,
body.wateret-content select,
body.wateret-content textarea {
    border-radius: 0.7rem !important;
}

body.wateret-content button,
body.wateret-content input[type="button"],
body.wateret-content input[type="submit"] {
    border-radius: 0.7rem !important;
}
body.wateret-content>.header { width:95%; max-width:none; margin:20px auto 0!important; padding:0!important; color:#0f172a!important; background:transparent!important; font-size:2rem!important; font-weight:650!important; letter-spacing:-.035em; text-align:left!important; text-transform:none!important; text-shadow:none!important; animation:none!important; }.header::before { display:block; margin-bottom:.25rem; color:var(--aqua-deep); font-size:.72rem; font-weight:700; letter-spacing:.2em; content:"MONITORAGGIO"; text-transform:uppercase; }.wateret-content .modal-content { overflow:hidden; border:1px solid rgba(255,255,255,.85)!important; border-radius:1.25rem!important; background:#fff!important; box-shadow:0 2rem 5rem rgba(7,31,43,.2)!important; }.wateret-content .modal-header { border-bottom:1px solid #f1f5f9!important; padding:1.25rem!important; }.wateret-content .modal-body { padding:1.25rem!important; }.wateret-content .modal-footer { border-top:1px solid #f1f5f9!important; padding:1rem 1.25rem!important; }.wateret-content .form-control,.wateret-content .form-select { min-height:2.75rem; border:1px solid #e2e8f0!important; border-radius:.75rem!important; color:#334155!important; background:#fff!important; box-shadow:none!important; }.wateret-content .form-control:focus,.wateret-content .form-select:focus { border-color:var(--aqua-deep)!important; box-shadow:0 0 0 3px rgba(32,188,165,.12)!important; }.wateret-content .btn-primary,.wateret-content .btn-success { border-color:var(--aqua)!important; color:var(--ink)!important; background:var(--aqua)!important; }.wateret-content .btn-danger { border-color:#fecdd3!important; color:#be123c!important; background:#fff1f2!important; }.wateret-content .badge.bg-success { color:#047857!important; background:#d1fae5!important; }.wateret-content .badge.bg-secondary { color:#64748b!important; background:#f1f5f9!important; }.wateret-content .badge.bg-info { color:#0f766e!important; background:#ccfbf1!important; }

/* Skin Laravel per le tabelle legacy: nessuna modifica alle loro misure. */
body.wateret-content .contenitore { overflow-y:auto; }
body.wateret-content .contenitore table,
body.wateret-content .contenitore table.dataTable {
    width:100%!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
}
body.wateret-content .contenitore table thead th {
    border:0!important;
    border-bottom:1px solid #e2e8f0!important;
    padding:.8rem .9rem!important;
    color:#64748b!important;
    background:#f8fafc!important;
    font-size:.68rem!important;
    font-weight:700!important;
    letter-spacing:.08em;
    text-transform:uppercase;
}
body.wateret-content .contenitore table tbody tr,
body.wateret-content .contenitore table.table-striped tbody tr:nth-of-type(odd) {
    background:transparent!important;
}
body.wateret-content .contenitore table tbody tr:hover { background:#f0fdfa!important; }
body.wateret-content .contenitore table tbody td {
    border:0!important;
    border-bottom:1px solid #f1f5f9!important;
    padding:.78rem .9rem!important;
    color:#334155!important;
    font-size:.82rem!important;
    vertical-align:middle!important;
}
body.wateret-content .contenitore table tbody td.myTD {
    color:#0f766e!important;
    font-weight:600;
}
body.wateret-content .contenitore table tbody td:first-child img { width:10px!important; height:10px; }
body.wateret-content .contenitore table tbody td.rimuovi img { width:20px!important; opacity:.72; }
body.wateret-content .contenitore table tbody td.rimuovi img:hover { opacity:1; }
body.wateret-content .dataTables_wrapper .dataTables_filter {
    margin:0!important;
    padding:.65rem 0!important;
    color:#64748b;
    font-size:.78rem;
}
body.wateret-content .dataTables_wrapper .dataTables_filter input {
    height:2.25rem;
    margin-left:.45rem!important;
    border:1px solid #e2e8f0!important;
    border-radius:.65rem!important;
    background:#fff!important;
}

@media (max-width: 720px) {
    /* La shell off-canvas e il pulsante menu sono gestiti al breakpoint 900px
       (sezione 4 del layer responsive in fondo al file). */
    body.wateret-content {
        padding: 0.75rem;
    }

    .wateret-login-card {
        padding: 1.4rem;
    }
    .wateret-metrics { grid-template-columns:repeat(2,1fr); }.wateret-hero { padding:1.5rem; }
    .wateret-section-header { align-items:flex-start; flex-direction:column; }.wateret-section-header .wateret-primary { width:100%; }.wateret-metrics { grid-template-columns:1fr; }body.wateret-content .dataTables_filter input { min-width:0; width:100%; margin:.5rem 0 0!important; }
}

/* Neutralize legacy positioning inside the rebuilt board list. */
.wateret-section-header #aggiungiBTN {
    position: static !important;
    inset: auto !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: .55rem .8rem !important;
    align-self: flex-end;
    white-space: nowrap;
}
.wateret-list-shell {
    border: 1px solid rgba(255, 255, 255, .9) !important;
    border-radius: .9rem !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 .45rem 1.4rem rgba(7, 31, 43, .05) !important;
}
.wateret-list-shell .wateret-table-heading {
    border-bottom: 1px solid #f1f5f9;
}
.wateret-list-shell .dataTables_wrapper .dataTables_filter {
    display: flex;
    float: none !important;
    min-height: 3rem;
    margin: 0 !important;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    border-bottom: 1px solid #f1f5f9;
    padding: .55rem .85rem !important;
}
.wateret-list-shell .dataTables_wrapper .dataTables_filter input {
    height: 2rem;
    margin: 0 !important;
}
.wateret-list-shell table.dataTable {
    margin: 0 !important;
    border: 0 !important;
}
.wateret-list-shell table.dataTable.no-footer {
    border-bottom: 0 !important;
}
.wateret-account-shell {
    border-radius: .9rem !important;
}

/* Original Livello board structure, restyled without changing its flow. */
body.wateret-content .contenitore > #aggiungiBTN {
    position: static !important;
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 .8rem !important;
    align-items: center;
    gap: .45rem;
    border: 0;
    border-radius: .7rem;
    padding: .55rem .75rem !important;
    color: var(--ink) !important;
    background: var(--aqua) !important;
    font-size: .75rem;
    font-weight: 700;
    box-shadow: 0 .45rem 1rem rgba(32, 188, 165, .14);
}
body.wateret-content .contenitore > #aggiungiBTN .icon {
    display:none;
}
body.wateret-content .contenitore {
    position: relative;
}

@media (max-width: 720px) {
    .wateret-section-header #aggiungiBTN { width: 100% !important; align-self: stretch; }
}

/* Replica della shell e della pagina board di NewWaterMeter. */
.wateret-sidebar { padding:0; background:#071f2b; }
.wateret-sidebar-grid { position:absolute; inset:0; pointer-events:none; opacity:.55; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,#000,transparent 85%); }
.wateret-sidebar-watermark { position:absolute; right:-4.5rem; bottom:7rem; width:15rem; height:15rem; border:1px solid rgba(99,230,209,.09); border-radius:50%; box-shadow:0 0 0 2.5rem rgba(99,230,209,.025),0 0 0 5rem rgba(67,169,230,.018); }
.wateret-brand { position:relative; z-index:1; height:5rem; gap:.75rem; border-bottom:1px solid rgba(255,255,255,.08); padding:0 1.25rem; }
.wateret-brand-mark { width:2.5rem; height:2.5rem; flex-basis:2.5rem; border-radius:.875rem; }
.wateret-brand-mark img { width:1.45rem; height:1.65rem; object-fit:contain; }
.wateret-nav-label { position:relative; z-index:1; margin:1.5rem 1.5rem .75rem; color:#475569; font-size:.625rem; letter-spacing:.22em; }
.wateret-nav { position:relative; z-index:1; gap:.25rem; padding:0 .75rem; }
.wateret-nav button,.wateret-nav a { gap:.75rem; border-radius:.75rem; padding:.7rem .75rem; color:#94a3b8; font-size:.875rem; font-weight:500; }
.wateret-nav svg { width:1.25rem; height:1.25rem; flex:0 0 1.25rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wateret-nav button:hover,.wateret-nav a:hover,.wateret-nav .is-active { color:#fff; background:rgba(255,255,255,.08); }
.wateret-sidebar-account { right:0; bottom:0; left:0; z-index:2; display:grid; grid-template-columns:2.25rem minmax(0,1fr); border-top:1px solid rgba(255,255,255,.08); padding:1rem; background:rgba(7,31,43,.35); }
.wateret-sidebar-account>button { grid-column:1/-1; border:1px solid rgba(255,255,255,.1); border-radius:.75rem; padding:.5rem; color:#cbd5e1; background:transparent; font-size:.875rem; font-weight:500; }
.wateret-sidebar-account>button:hover { border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; }
.wateret-topbar { position:sticky; top:0; z-index:3; padding:0 2rem; background:rgba(255,255,255,.72); backdrop-filter:blur(20px); }

/* La pagina delle board scorre da se'. La barra di scorrimento pero' si
   prende quindici pixel del solo lato destro, e il pannello dei filtri
   finiva con un margine largo a destra e stretto a sinistra: sembrava
   messo storto. Con la corsia riservata da tutte e due le parti i due
   lati tornano uguali. Dove la barra galleggia sopra il contenuto - i
   telefoni, e i portatili Apple - non riserva niente e non cambia nulla. */
body.wateret-boards-page { overflow:auto; scrollbar-gutter: stable both-edges; }
.wateret-page-container { position:relative; z-index:1; padding:2rem; }
.wateret-reference-header { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.75rem; }
.wateret-reference-eyebrow { margin:0; color:#20bca5; font-size:.75rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.wateret-reference-header h1 { margin:.25rem 0 0; color:#0f172a; font-size:1.875rem; font-weight:600; letter-spacing:-.025em; }
.wateret-reference-header div>p:last-child { margin:.5rem 0 0; color:#64748b; font-size:.875rem; }
.wateret-filter-panel,.wateret-empty-panel,.wateret-board-card { border:1px solid rgba(255,255,255,.8); border-radius:1rem; background:rgba(255,255,255,.88); box-shadow:0 1px 2px rgba(7,31,43,.04),0 .75rem 2rem rgba(7,31,43,.055); backdrop-filter:blur(4px); }
.wateret-filter-panel { display:flex; gap:.75rem; margin-bottom:1.25rem; padding:1rem; }
.wateret-search { position:relative; flex:1; }
.wateret-search span { position:absolute; left:.75rem; top:.62rem; color:#94a3b8; }
.wateret-search input,.wateret-filter-panel select { display:block; width:100%; height:2.625rem; border:1px solid #e2e8f0; border-radius:.75rem; padding:.625rem .875rem; color:#334155; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04); font-size:.875rem; }
.wateret-search input { padding-left:2.25rem; }.wateret-filter-panel select { width:12rem; }
.wateret-search input:focus,.wateret-filter-panel select:focus { border-color:#20bca5; outline:0; box-shadow:0 0 0 3px rgba(99,230,209,.2); }
.wateret-board-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.wateret-board-card { position:relative; overflow:hidden; transition:transform .3s,border-color .3s,box-shadow .3s; }
.wateret-board-card::before { position:absolute; inset:0 0 auto; height:2px; content:""; background:linear-gradient(90deg,#63e6d1,#43a9e6,transparent); opacity:.7; }
.wateret-board-card::after { position:absolute; top:-3rem; right:-3rem; width:8rem; height:8rem; border-radius:50%; content:""; background:linear-gradient(135deg,rgba(99,230,209,.14),rgba(67,169,230,.08)); pointer-events:none; }
/* Lo stesso velo che sul fondo scuro si legge bene, sulla scheda quasi bianca
   spariva: sul chiaro serve piu' colore per ottenere lo stesso stacco. */
.wateret-board-card::after { background: linear-gradient(135deg, rgba(32, 188, 165, .2), rgba(67, 169, 230, .11)); }
:root[data-theme="dark"] .wateret-board-card::after { background: linear-gradient(135deg, rgba(99, 230, 209, .14), rgba(67, 169, 230, .08)); }
.wateret-board-card:hover { transform:translateY(-.25rem); border-color:rgba(99,230,209,.4); box-shadow:0 1.5rem 3.5rem rgba(7,31,43,.11); }
.wateret-board-card-main { position:relative; z-index:1; display:block; padding:1.25rem; color:inherit; text-decoration:none; }
.wateret-board-card-top,.wateret-board-identity { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }.wateret-board-identity { min-width:0; align-items:center; justify-content:flex-start; gap:.75rem; }
.wateret-board-icon { display:grid; width:2.75rem; height:2.75rem; flex:0 0 2.75rem; place-items:center; border-radius:1rem; color:#20bca5; background:linear-gradient(135deg,#f0fdfa,#f0f9ff); box-shadow:inset 0 0 0 1px rgba(99,230,209,.1); }
.wateret-board-icon svg { width:1.25rem; height:1.25rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.wateret-board-identity h2 { overflow:hidden; margin:0; color:#0f172a; font-size:1.125rem; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }.wateret-board-identity p { overflow:hidden; margin:.25rem 0 0; color:#64748b; font-family:ui-monospace,monospace; font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; }
.wateret-board-badge { border:1px solid #fecdd3; border-radius:999px; padding:.25rem .625rem; color:#be123c; background:#ffe4e6; font-size:.75rem; font-weight:600; }.wateret-board-badge.is-online { border-color:#a7f3d0; color:#047857; background:#d1fae5; }.wateret-board-badge.is-sensor { border-color:#fde68a; color:#b45309; background:#fef3c7; }.wateret-board-badge.is-never { border-color:#cbd5e1; color:#475569; background:#f1f5f9; }
.wateret-board-card-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}.wateret-board-identity{width:100%;min-width:0}.wateret-board-identity>div{min-width:0}.wateret-board-badge{position:relative;z-index:1;flex:none;white-space:nowrap}

.wateret-pagination { display:flex; align-items:center; justify-content:center; gap:1rem; margin:1.25rem auto 0; color:#64748b; font-size:.875rem; }
.wateret-pagination a { display:inline-flex; align-items:center; min-height:2.5rem; padding:.55rem .9rem; border:1px solid #dbe5e9; border-radius:.7rem; color:#0f766e; background:#fff; text-decoration:none; font-weight:600; }
.wateret-pagination a:hover { border-color:#5eead4; background:#f0fdfa; }
.wateret-search,.wateret-account-search { display:flex; align-items:center; gap:.65rem; }
.wateret-search input,.wateret-account-search input { flex:1; }
.wateret-board-card dl { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin:1.25rem 0 0; font-size:.875rem; }.wateret-board-card dt { color:#94a3b8; font-size:.75rem; }.wateret-board-card dd { margin:.25rem 0 0; color:#334155; font-weight:500; }
.wateret-board-card footer { position:relative; z-index:1; display:flex; justify-content:flex-end; gap:.5rem; border-top:1px solid #f1f5f9; padding:.75rem 1rem; }
.wateret-board-card footer a,.wateret-board-card footer button { padding:.5rem .75rem; }
/* Riempimento nello spazio libero accanto ai pulsanti: etichetta, valore in
   evidenza e barra, perche' la sola percentuale non diceva di cosa parlasse. */
.wateret-board-card footer { justify-content:space-between; align-items:center; gap:.75rem; }
.wateret-board-card footer .wateret-board-fill { flex:0 0 auto; display:flex; flex-direction:column; gap:.2rem; min-width:5.25rem; text-align:left; }
.wateret-board-fill-label { color:#94a3b8; font-size:.6rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
.wateret-board-fill-value { font-size:1.35rem; font-weight:700; line-height:1.05; font-variant-numeric:tabular-nums; }
.wateret-board-fill-track { display:block; overflow:hidden; height:4px; border-radius:999px; background:#eef2f6; }
.wateret-board-fill-track i { display:block; height:100%; border-radius:999px; transition:width .4s ease; }
.wateret-board-fill.is-alto .wateret-board-fill-value { color:#047857; } .wateret-board-fill.is-alto .wateret-board-fill-track i { background:#10b981; }
.wateret-board-fill.is-medio .wateret-board-fill-value { color:#a16207; } .wateret-board-fill.is-medio .wateret-board-fill-track i { background:#f59e0b; }
.wateret-board-fill.is-basso .wateret-board-fill-value { color:#b91c1c; } .wateret-board-fill.is-basso .wateret-board-fill-track i { background:#ef4444; }
.wateret-empty-panel { padding:4rem 1.5rem; text-align:center; }.wateret-empty-panel>span { display:grid; width:3.5rem; height:3.5rem; margin:auto; place-items:center; border-radius:1rem; color:#20bca5; background:#f0f9ff; font-size:1.5rem; }.wateret-empty-panel h2 { margin:1rem 0 .25rem; color:#0f172a; font-size:1rem; }.wateret-empty-panel p { margin:0; color:#64748b; font-size:.875rem; }
@media(max-width:1100px){.wateret-board-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.wateret-page-container{padding:1.5rem 1rem}.wateret-reference-header,.wateret-filter-panel{align-items:stretch;flex-direction:column}.wateret-filter-panel select{width:100%}.wateret-board-grid{grid-template-columns:1fr}.wateret-topbar{padding:0 1rem}}

.wateret-overview-page .wateret-overview { max-width:none; padding:2rem; }
.wateret-overview-page .wateret-hero { position:relative; border-radius:2rem; padding:2.25rem 2.5rem; }
.wateret-hero-grid { position:absolute; inset:0; opacity:.45; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,#000,transparent 85%); }
.wateret-hero-copy { position:relative; z-index:1; max-width:42rem; }
.wateret-overview-page .wateret-eyebrow { display:flex; align-items:center; gap:.625rem; }.wateret-overview-page .wateret-eyebrow span { width:.625rem; height:.625rem; border-radius:50%; background:#63e6d1; box-shadow:0 0 0 .3rem rgba(99,230,209,.12); }
.wateret-overview-page .wateret-hero h1 { margin:1rem 0 .75rem; font-size:2.25rem; }
.wateret-overview-page .wateret-hero>div>p:last-of-type { max-width:36rem; color:#cbd5e1; font-size:.875rem; line-height:1.5rem; }
.wateret-hero-secondary { display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.15); border-radius:.75rem; padding:.625rem 1rem; color:#fff; background:rgba(255,255,255,.08); font-size:.875rem; font-weight:600; }
.wateret-overview-page .wateret-metrics { gap:1rem; margin-top:1.25rem; }.wateret-overview-page .wateret-metric { border-radius:1rem; padding:1.25rem; }.wateret-overview-page .wateret-metric strong { margin-top:.75rem; font-size:1.875rem; }
.wateret-overview-page .wateret-overview-panel { display:flex; align-items:center; justify-content:space-between; margin-top:1.5rem; border-radius:1rem; padding:1rem 1.5rem; }.wateret-reference-link { border:0; color:#20bca5; background:transparent; font-size:.875rem; font-weight:600; }
@media(max-width:720px){.wateret-overview-page .wateret-overview{padding:1.5rem 1rem}.wateret-overview-page .wateret-hero{padding:1.75rem 1.5rem}.wateret-overview-page .wateret-hero h1{font-size:1.875rem}}

/* Pagina account allineata a NewWaterMeter. */
body.wateret-account-page { padding:0!important; overflow:auto; }
.wateret-account-container { position:relative; z-index:1; width:100%; padding:2rem; }
.wateret-account-page .wateret-section-header { max-width:none; margin:0 0 1.75rem; align-items:flex-end; }
.wateret-account-page .wateret-section-header h1 { margin:.25rem 0 0; font-size:1.875rem; font-weight:600; }
.wateret-account-page .wateret-section-header>div>p:last-child { margin:.5rem 0 0; font-size:.875rem; }
.wateret-account-note { margin-bottom:1rem; color:#64748b; font-size:.875rem; line-height:1.5; }
.wateret-account-note:empty { display:none; }
.wateret-account-note p { margin:0; }
.wateret-account-search { position:relative; margin-bottom:1.25rem; border:1px solid rgba(255,255,255,.8); border-radius:1rem; padding:1rem; background:rgba(255,255,255,.88); box-shadow:0 1px 2px rgba(7,31,43,.04),0 .75rem 2rem rgba(7,31,43,.055); }
.wateret-account-search span { position:absolute; top:1.65rem; left:1.8rem; color:#94a3b8; }
.wateret-account-search input { display:block; width:100%; height:2.625rem; border:1px solid #e2e8f0; border-radius:.75rem!important; padding:.625rem .875rem .625rem 2.25rem; color:#334155; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04); font-size:.875rem; }
.wateret-account-search input:focus { border-color:#20bca5; outline:0; box-shadow:0 0 0 3px rgba(99,230,209,.2); }
.wateret-account-panel { overflow:hidden; border:1px solid rgba(255,255,255,.8); border-radius:1rem; background:rgba(255,255,255,.88); box-shadow:0 1px 2px rgba(7,31,43,.04),0 .75rem 2rem rgba(7,31,43,.055); backdrop-filter:blur(4px); }
.wateret-account-panel .table-responsive { margin:0; }
.wateret-account-table { width:100%!important; margin:0!important; border:0!important; color:#334155!important; background:transparent!important; font-size:.875rem; }
.wateret-account-table thead th { border:0!important; border-bottom:1px solid #e2e8f0!important; padding:.75rem 1.25rem!important; color:#64748b!important; background:rgba(248,250,252,.8)!important; font-size:.75rem!important; font-weight:600!important; letter-spacing:.05em; text-transform:uppercase; }
.wateret-account-table tbody tr { background:transparent!important; }.wateret-account-table tbody tr:hover { background:#f8fafc!important; }
.wateret-account-table tbody td { border:0!important; border-bottom:1px solid #f1f5f9!important; padding:1rem 1.25rem!important; vertical-align:middle!important; }
.wateret-account-table tbody tr:last-child td { border-bottom:0!important; }
.wateret-account-table td:first-child { color:#0f172a; font-weight:500; }
.wateret-account-table td:last-child>button { margin-left:.35rem; padding:.5rem .75rem; font-size:.75rem; }
.wateret-account-table .badge { border-radius:999px!important; padding:.3rem .625rem!important; font-size:.7rem!important; font-weight:600!important; }
.wateret-account-panel .dataTables_filter { display:none!important; }
.wateret-account-panel .dataTables_length { padding:1rem 1.25rem 0; color:#64748b; font-size:.75rem; }
.wateret-account-panel .dataTables_length select { border:1px solid #e2e8f0; border-radius:.5rem; padding:.3rem 1.8rem .3rem .5rem; background-color:#fff; }
.wateret-account-panel .dataTables_paginate { display:flex; justify-content:flex-end; padding:1rem 1.25rem!important; border-top:1px solid #f1f5f9; }
.wateret-account-panel .dataTables_paginate .pagination { display:inline-flex; align-items:center; gap:.3rem; margin:0!important; border:1px solid #e2e8f0; border-radius:.8rem; padding:.25rem; background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.05); }
.wateret-account-panel .dataTables_paginate .paginate_button { min-width:2rem!important; margin:0!important; border:0!important; padding:0!important; background:transparent!important; box-shadow:none!important; }
.wateret-account-panel .dataTables_paginate .page-link { display:grid; min-width:2rem; height:2rem; place-items:center; border:0!important; border-radius:.55rem!important; padding:0 .55rem; color:#64748b!important; background:transparent!important; box-shadow:none!important; font-size:.76rem; font-weight:600; line-height:1; transition:background .16s ease,color .16s ease,transform .16s ease; }
.wateret-account-panel .dataTables_paginate .paginate_button:not(.disabled) .page-link:hover { color:#0f766e!important; background:#ecfdf8!important; transform:translateY(-1px); }
.wateret-account-panel .dataTables_paginate .paginate_button.active .page-link,.wateret-account-panel .dataTables_paginate .paginate_button.current .page-link { color:#073b3a!important; background:linear-gradient(135deg,#63e6d1,#8aeadb)!important; box-shadow:0 .25rem .7rem rgba(32,188,165,.22)!important; }
.wateret-account-panel .dataTables_paginate .paginate_button.disabled .page-link { color:#cbd5e1!important; opacity:.7; }
.wateret-account-page .modal { background:rgba(7,31,43,.45); backdrop-filter:blur(5px); }

.wateret-account-page .modal-content { border-radius:1.5rem!important; }
.wateret-account-page .modal-title { color:#0f172a; font-size:1.25rem; font-weight:600; }
.wateret-account-page .form-label { margin-bottom:.5rem; color:#334155; font-size:.875rem; font-weight:500; }
.wateret-account-page .form-check { border:1px solid #e2e8f0; border-radius:.75rem; padding:.8rem 1rem .8rem 2.25rem; }
.wateret-account-page .modal-footer .btn { border-radius:.75rem!important; padding:.625rem 1rem; font-size:.875rem; font-weight:600; }
.wateret-account-page .wateret-account-modal-header { align-items:flex-start; padding:1.35rem 1.5rem!important; background:linear-gradient(135deg,#f8fffe,#f4f9fb); }
.wateret-account-modal-heading { display:flex; min-width:0; align-items:center; gap:1rem; }
.wateret-account-modal-icon { display:grid; flex:0 0 3rem; width:3rem; height:3rem; place-items:center; border:1px solid rgba(32,188,165,.2); border-radius:1rem; color:#0f766e; background:rgba(99,230,209,.2); }
.wateret-account-modal-heading small { display:block; margin-bottom:.15rem; color:#0f766e; font-size:.65rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.wateret-account-modal-heading p { margin:.25rem 0 0; color:#64748b; font-size:.78rem; line-height:1.4; }
.wateret-account-page .modal-body { padding:1.5rem!important; }
.wateret-account-page .modal-body>.mb-3 { margin-bottom:1.1rem!important; }
.wateret-account-page .form-text { margin:.4rem .1rem 0; color:#94a3b8; font-size:.7rem; }
.wateret-account-page .form-check { display:flex; align-items:flex-start; gap:.75rem; margin-bottom:1.1rem!important; padding:1rem!important; background:#f8fafc; }
.wateret-account-page .form-check-input { flex:0 0 auto; margin:.15rem 0 0; }
.wateret-account-page .form-check-label strong,.wateret-account-page .form-check-label small { display:block; }
.wateret-account-page .form-check-label strong { color:#334155; font-size:.82rem; }
.wateret-account-page .form-check-label small { margin-top:.2rem; color:#64748b; font-size:.72rem; }
.wateret-account-page .modal-footer { background:#fafcfd; }
.wateret-account-page .modal-footer .btn-primary { min-width:9.5rem; }
@media(max-width:575px){.wateret-account-page .wateret-account-modal-header{padding:1.15rem!important}.wateret-account-modal-icon{display:none}.wateret-account-page .modal-body{padding:1.15rem!important}.wateret-account-page .modal-footer .btn{flex:1}}
.wateret-account-page .wateret-delete-modal .modal-dialog { max-width:26rem; }
.wateret-delete-modal .modal-content { text-align:center; }
.wateret-delete-modal .modal-body { position:relative; padding:2rem!important; }
.wateret-delete-icon { display:grid; width:3.5rem; height:3.5rem; margin:0 auto 1rem; place-items:center; border:1px solid #fecdd3; border-radius:1.1rem; color:#e11d48; background:#fff1f2; font-size:1.15rem; }
.wateret-delete-eyebrow { margin:0 0 .35rem!important; color:#be123c!important; font-size:.65rem!important; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.wateret-delete-modal h5 { margin:0; color:#0f172a; font-size:1.25rem; font-weight:650; }
.wateret-delete-modal h5+p { margin:.65rem auto 0; color:#64748b; font-size:.8rem; line-height:1.55; }
.wateret-delete-modal h5+p strong { color:#334155; overflow-wrap:anywhere; }
.wateret-delete-error { margin-top:1rem; border:1px solid #fecdd3; border-radius:.7rem; padding:.65rem .8rem; color:#be123c; background:#fff1f2; font-size:.75rem; }
.wateret-delete-actions { display:grid; grid-template-columns:1fr 1.25fr; gap:.65rem; margin-top:1.35rem; }
.wateret-delete-actions .btn { border-radius:.75rem!important; padding:.7rem .8rem; font-size:.8rem; font-weight:600; }
.wateret-delete-actions .btn-light { border:1px solid #e2e8f0; color:#475569; background:#fff; }
.wateret-delete-confirm { border:1px solid #e11d48!important; color:#fff!important; background:#e11d48!important; }
.wateret-delete-confirm:hover { border-color:#be123c!important; background:#be123c!important; }
.wateret-delete-confirm:disabled { opacity:.65; }
@media(max-width:720px){.wateret-account-container{padding:1.5rem 1rem}.wateret-account-page .wateret-section-header{align-items:stretch;flex-direction:column}.wateret-account-page .wateret-section-header .wateret-primary{width:100%}.wateret-account-table tbody td{padding:.8rem!important}.wateret-account-table td:last-child>button{margin:.2rem}.wateret-account-panel .dataTables_length{display:none}}

/* Dettaglio letture allineato alla pagina board di NewWaterMeter. */
body.wateret-reading-page { padding:2rem!important; overflow:auto; }
.wateret-reading-header { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.75rem; }
.wateret-reading-header a:first-child { color:#20bca5; font-size:.875rem; font-weight:600; text-decoration:none; }
.wateret-reading-title { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-top:.75rem; }
.wateret-reading-title h1 { margin:0; color:#0f172a; font-size:1.875rem; font-weight:600; letter-spacing:-.025em; }
.wateret-reading-title span { border:1px solid #e2e8f0; border-radius:999px; padding:.25rem .625rem; color:#64748b; background:#f1f5f9; font-size:.75rem; font-weight:600; }
.wateret-reading-title span.is-online { border-color:#a7f3d0; color:#047857; background:#d1fae5; }
.wateret-reading-title span.is-waiting { border-color:#fde68a; color:#b45309; background:#fef3c7; }
.wateret-reading-title span.is-offline { border-color:#fecdd3; color:#be123c; background:#ffe4e6; }
.wateret-reading-header>div:first-child>p { margin:.5rem 0 0; color:#64748b; font-family:ui-monospace,monospace; font-size:.75rem; }
.wateret-reading-header-actions { display:flex; gap:.5rem; }
body.wateret-reading-page .superBig { display:block; width:100%; height:auto; }
body.wateret-reading-page .big { width:100%!important; height:auto; min-height:0!important; margin:0!important; border:0; padding:0!important; overflow:visible; background:transparent; box-shadow:none; }
body.wateret-reading-page .big>h4 { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 1.25rem; border:1px solid #e2e8f0; border-radius:1rem; padding:.75rem 1rem; color:#64748b; background:#fff; font-size:.875rem; font-weight:400; text-align:left!important; }
body.wateret-reading-page .big>h4 span { color:#334155; font-weight:600; }
/* Le due voci della barra - ultima lettura e indirizzo locale - sono
   etichette, non valori: riprendono il colore e il peso normali, mentre il
   grassetto resta a cio' che dicono. */
body.wateret-reading-page .big>h4 .wateret-reading-meta { display:inline-flex; align-items:center; gap:.5rem; color:#64748b; font-weight:400; }
/* L'indirizzo non e' un dato da leggere, e' un posto dove andare: la
   pastiglia lo dice prima del testo. L'icona - un apparato con l'onda sopra -
   distingue le due condizioni senza doverle leggere: con l'onda c'e' un
   indirizzo, sbarrata non c'e'. */
body.wateret-reading-page .big>h4 .wateret-reading-ip {
    display:inline-flex; align-items:center; gap:.4rem;
    border:1px solid #cbeee7; border-radius:999px; padding:.26rem .68rem;
    color:#0f766e; background:#f0fdfa;
    font-size:.8rem; font-weight:600; font-variant-numeric:tabular-nums;
    text-decoration:none; white-space:nowrap;
    transition:border-color .2s, background .2s;
}
body.wateret-reading-page .big>h4 .wateret-reading-ip svg { width:.95rem; height:.95rem; flex:0 0 .95rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
body.wateret-reading-page .big>h4 a.wateret-reading-ip:hover { border-color:#5eead4; background:#ccfbf1; }
body.wateret-reading-page .big>h4 a.wateret-reading-ip:focus-visible { outline:0; box-shadow:0 0 0 3px rgba(99,230,209,.35); }
/* Meta' delle board registrate non hanno comunicato un indirizzo: la
   pastiglia resta, spenta, perche' l'assenza si legge meglio del silenzio. */
body.wateret-reading-page .big>h4 .wateret-reading-ip.is-assente { border-color:#e2e8f0; color:#94a3b8; background:#f8fafc; font-weight:500; }
:root[data-theme="dark"] body.wateret-reading-page .big>h4 .wateret-reading-meta { color:#9fb3bd !important; }
:root[data-theme="dark"] body.wateret-reading-page .big>h4 .wateret-reading-ip { border-color:rgba(99,230,209,.28) !important; color:#7fe3d2 !important; background:rgba(99,230,209,.12) !important; }
:root[data-theme="dark"] body.wateret-reading-page .big>h4 a.wateret-reading-ip:hover { border-color:rgba(99,230,209,.5) !important; background:rgba(99,230,209,.2) !important; }
:root[data-theme="dark"] body.wateret-reading-page .big>h4 .wateret-reading-ip.is-assente { border-color:rgba(255,255,255,.1) !important; color:#7f96a3 !important; background:rgba(255,255,255,.04) !important; }
body.wateret-reading-page .wrapper { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin:0; padding:0; }
body.wateret-reading-page .wrapper>.container { position:relative; float:none; width:auto; min-height:15rem; overflow:hidden; border:1px solid rgba(255,255,255,.85); border-radius:1rem; padding:1.25rem; background:rgba(255,255,255,.9); box-shadow:0 1px 2px rgba(7,31,43,.035),0 .75rem 2rem rgba(7,31,43,.05); }
body.wateret-reading-page .wrapper>.container:first-child { display:grid; grid-template-columns:1fr; place-items:center; }
body.wateret-reading-page .container .colonna,body.wateret-reading-page .container .colonnaRight { float:none; width:100%; }
body.wateret-reading-page .container .colonna:empty,body.wateret-reading-page .container .colonna br { display:none; }
body.wateret-reading-page .container .desc { margin:0; padding:0!important; color:#64748b; font-size:.875rem; font-weight:500; }
body.wateret-reading-page .container .valore { margin:2rem 0 .75rem; padding:0!important; color:#0f172a; font-size:1.875rem; font-weight:600; letter-spacing:-.025em; }
body.wateret-reading-page .container img { display:block; width:3.25rem!important; height:3.25rem; margin:1.25rem 0 0; padding:0!important; object-fit:contain; opacity:.82; }
body.wateret-reading-page .container canvas { display:block; width:9rem!important; height:5.5rem!important; margin:1rem auto 0; }
body.wateret-reading-page .wrapper>.container:first-child .valore { margin:.5rem 0 0; text-align:center; }
body.wateret-reading-page .wrapper>.wateret-tank-card:first-child{display:grid;grid-template-columns:minmax(0,1fr) 6.5rem;align-items:center;gap:1rem;place-items:initial}.wateret-tank-copy{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start}.wateret-tank-copy .valore{margin-top:1rem!important;font-size:2rem!important}.wateret-tank{--tank-level:0%;position:relative;width:6.25rem;height:10.5rem;overflow:hidden;border:3px solid #b9d6da;border-top-width:5px;border-radius:1.1rem 1.1rem 1.5rem 1.5rem;background:linear-gradient(90deg,#f7fcfd,#eaf5f7 55%,#faffff);box-shadow:inset 0 0 0 3px rgba(255,255,255,.75),0 .75rem 1.75rem rgba(8,72,84,.12)}.wateret-tank:before{content:"";position:absolute;z-index:4;top:-.45rem;left:50%;width:3.6rem;height:.7rem;border:3px solid #9fc7cc;border-radius:999px;background:#eff8f9;transform:translateX(-50%)}.wateret-tank-liquid{position:absolute;z-index:1;right:0;bottom:0;left:0;height:var(--tank-level);min-height:0;background:linear-gradient(180deg,#5de6d1,#25bfae 70%,#13998f);transition:height 1s cubic-bezier(.22,.8,.25,1)}.wateret-tank-wave{position:absolute;top:-.42rem;left:-25%;width:150%;height:.9rem;border-radius:45%;background:rgba(192,255,246,.72);animation:wateretTankWave 3.4s linear infinite}.wateret-tank-wave-two{top:-.2rem;left:-35%;background:rgba(255,255,255,.28);animation-duration:4.6s;animation-direction:reverse}.wateret-tank-shine{position:absolute;z-index:3;top:1rem;bottom:1rem;left:.8rem;width:.48rem;border-radius:999px;background:rgba(255,255,255,.52)}.wateret-tank-marks{position:absolute;z-index:4;top:25%;right:.55rem;bottom:15%;display:flex;flex-direction:column;justify-content:space-between}.wateret-tank-marks i{display:block;width:.65rem;height:1px;background:rgba(21,91,101,.3)}@keyframes wateretTankWave{to{transform:translateX(20%)}}@media(prefers-reduced-motion:reduce){.wateret-tank-wave{animation:none}.wateret-tank-liquid{transition:none}}@media(max-width:480px){body.wateret-reading-page .wrapper>.wateret-tank-card:first-child{grid-template-columns:minmax(0,1fr) 5.5rem}.wateret-tank{width:5.25rem;height:9rem}}
body.wateret-reading-page .testbutton,body.wateret-reading-page .testbutton2,body.wateret-reading-page .commutabutton { position:absolute; right:1rem; bottom:1rem; border:0; border-radius:.65rem; padding:.5rem .7rem; color:#0f766e!important; background:#f0fdfa; box-shadow:none; font-family:inherit; font-size:.75rem; font-weight:600; text-shadow:none; }
body.wateret-reading-page .testbutton:hover,body.wateret-reading-page .testbutton2:hover,body.wateret-reading-page .commutabutton:hover { color:#071f2b!important; background:#ccfbf1; text-shadow:none; }
body.wateret-reading-page #bottone_rele { right:auto; left:1rem; }
@media(max-width:1100px){body.wateret-reading-page .wrapper{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){body.wateret-reading-page{padding:1.5rem 1rem!important}.wateret-reading-header{align-items:stretch;flex-direction:column}.wateret-reading-header-actions>*{flex:1}body.wateret-reading-page .wrapper{grid-template-columns:1fr}body.wateret-reading-page .big>h4{align-items:flex-start;flex-direction:column}}

/* Configurazione board. */
body.wateret-config-page { padding:2rem!important; overflow:auto; }
.wateret-config-header { margin-bottom:1.75rem; }.wateret-config-header a { color:#20bca5; font-size:.875rem; font-weight:600; text-decoration:none; }.wateret-config-header h1 { margin:.75rem 0 0; color:#0f172a; font-size:1.875rem; font-weight:600; letter-spacing:-.025em; }.wateret-config-header p { margin:.5rem 0 0; color:#64748b; font-size:.875rem; }
body.wateret-config-page>.big { display:grid; width:100%!important; max-width:none!important; height:auto; min-height:0!important; margin:0!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; border:0; border-radius:0; padding:0!important; background:transparent; box-shadow:none; }
body.wateret-config-page>.big>.colonna { float:none; width:auto; border:1px solid rgba(255,255,255,.85); border-radius:1rem; padding:1.25rem; background:rgba(255,255,255,.9); box-shadow:0 1px 2px rgba(7,31,43,.035),0 .75rem 2rem rgba(7,31,43,.05); }
body.wateret-config-page>.big>.colonna:nth-of-type(2) { grid-column:span 1; }
body.wateret-config-page label { display:block; margin-bottom:.5rem; color:#334155; font-size:.875rem; font-weight:500; }
body.wateret-config-page input[type=text],body.wateret-config-page input[type=number] { display:block; width:100%; height:2.625rem; border:1px solid #e2e8f0; border-radius:.75rem!important; padding:.625rem .875rem; color:#334155; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04); font-size:.875rem; }
body.wateret-config-page input:focus { border-color:#20bca5; outline:0; box-shadow:0 0 0 3px rgba(99,230,209,.2); }
body.wateret-config-page input[readonly] { color:#64748b; background:#f8fafc; }
body.wateret-config-page #tbproprietari { border:0; background:transparent; }.wateret-config-page #tbproprietari td { border-bottom:1px solid #f1f5f9; padding:.55rem; color:#334155; font-size:.8rem; }
body.wateret-config-page>.big>.aggiungi { grid-column:1/-1; height:auto; margin:0; border:0; border-radius:.75rem; padding:.75rem 1rem; color:#071f2b; background:#63e6d1; box-shadow:0 10px 35px rgba(99,230,209,.2); font-size:.875rem; font-weight:600; }
body.wateret-config-page>.big>.aggiungi:hover { background:#fff; transform:translateY(-1px); }

/* Storico letture e filtro date. */
body.wateret-history-page { padding:2rem!important; overflow:auto; }
.wateret-history-header { margin-bottom:1.25rem; }.wateret-history-header button { border:0; padding:0; color:#20bca5; background:transparent; font-size:.875rem; font-weight:600; cursor:pointer; }.wateret-history-header h1 { margin:.75rem 0 0; color:#0f172a; font-size:1.875rem; font-weight:600; letter-spacing:-.025em; }.wateret-history-header p { margin:.5rem 0 0; color:#64748b; font-family:ui-monospace,monospace; font-size:.75rem; }
.wateret-history-header{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}body.wateret-history-page .wateret-export-button{border:1px solid #cde8e4;padding:.6rem .85rem;color:#0f766e;background:#f0fdfa;white-space:nowrap}body.wateret-history-page .wateret-export-button:hover{border-color:#62d8c7;background:#dcfaf5}body.wateret-history-page .wateret-export-button[disabled]{opacity:.55;cursor:progress}@media(max-width:600px){.wateret-history-header{align-items:stretch;flex-direction:column}body.wateret-history-page .wateret-export-button{align-self:flex-start}}
body.wateret-history-page .superBig,body.wateret-history-page .innerBig { display:block; width:100%; height:auto; }
body.wateret-history-page .grid { display:block; width:100%; height:calc(100vh - 10rem); height:calc(100dvh - 10rem); min-height:28rem; margin:0; border:1px solid rgba(255,255,255,.85); border-radius:1rem; padding:4rem 1.25rem 1.25rem; background:rgba(255,255,255,.9); box-shadow:0 1px 2px rgba(7,31,43,.035),0 .75rem 2rem rgba(7,31,43,.05); }
body.wateret-history-page .grid>div { height:100%!important; }
body.wateret-history-page .ricerca_btn,body.wateret-history-page .mostra_btn { top:1rem; width:auto; height:auto; margin:0; border:1px solid #e2e8f0; border-radius:.65rem; padding:.5rem .75rem; color:#334155; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04); font-size:.75rem; font-weight:600; }
body.wateret-history-page .ricerca_btn { right:1rem; }body.wateret-history-page .mostra_btn { left:1rem; }
body.wateret-history-page .ricerca_btn img { display:none; }
body.wateret-history-page .ricerca { position:fixed; z-index:50; inset:0; width:auto; height:auto; padding:1rem; background:rgba(7,31,43,.65); backdrop-filter:blur(8px); }
body.wateret-history-page .ricerca>.superBig { display:flex; min-height:100%; align-items:center; justify-content:center; }
body.wateret-history-page .ricerca .innerBig { display:block; width:min(100%,32rem); height:auto; border-radius:1.5rem; padding:1.5rem; background:#fff; box-shadow:0 2rem 5rem rgba(7,31,43,.28); }
body.wateret-history-page .ricerca h2 { margin:0 0 1.25rem; color:#0f172a!important; font-size:1.25rem; }.wateret-history-page .ricerca .vedi { width:100%; margin:.75rem 0; border:1px solid #e2e8f0; border-radius:.75rem; color:#334155; background:#f8fafc; font-size:.875rem; font-weight:500; }
body.wateret-history-page .ricerca2_btn { width:auto; height:auto; margin:.5rem .2rem 0; border-radius:.65rem; padding:.6rem .8rem; color:#071f2b; background:#63e6d1; font-size:.75rem; font-weight:600; }.wateret-history-page .ricerca2_btn img { display:none; }

/* I comandi del periodo stanno sopra tutto cio' che filtrano, non dentro la
   card del grafico: li' sembravano controlli del disegno. */
body.wateret-history-page .wateret-history-toolbar { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1rem; }
body.wateret-history-page .wateret-history-toolbar .ricerca_btn,
body.wateret-history-page .wateret-history-toolbar .mostra_btn { position:static; cursor:pointer; }
body.wateret-history-page .wateret-history-toolbar .ricerca_btn:hover,
body.wateret-history-page .wateret-history-toolbar .mostra_btn:hover { border-color:#cbd5e1; background:#f8fafc; }
/* Senza i due pulsanti flottanti la card non deve piu' tenere lo spazio in alto. */
body.wateret-history-page .grid { padding:1.25rem; }

body.wateret-history-page .wateret-chart-note { margin:0 0 .85rem; color:#64748b; font-size:.78rem; }
/* Modello board sconosciuto: la formula applicata potrebbe essere quella
   sbagliata, e su una sonda si leggerebbe il livello al contrario. */
.wateret-chart-warning { max-width:84rem; margin:0 auto .85rem; border:1px solid #fde68a; border-left-width:3px; border-radius:.6rem; padding:.6rem .85rem; color:#854d0e; background:#fffbeb; font-size:.78rem; line-height:1.45; }

/* Sintesi del periodo sopra il grafico: stessi riquadri della panoramica. */
body.wateret-history-page .wateret-history-metrics { margin:0 0 1rem; }
body.wateret-history-page .wateret-history-metrics .wateret-metric strong { font-size:1.25rem; }
body.wateret-history-page .wateret-history-metrics .wateret-metric small { display:block; margin-top:.15rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.wateret-history-page .wateret-chart-empty { position:absolute; z-index:1; top:50%; right:1.25rem; left:1.25rem; margin:0; color:#64748b; text-align:center; font-size:.85rem; transform:translateY(-50%); }
/* La card perde in altezza quello che guadagna la striscia di sintesi. */
body.wateret-history-page .grid { height:calc(100vh - 21rem); height:calc(100dvh - 21rem); min-height:20rem; }
@media(max-width:640px){body.wateret-history-page .wateret-history-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Modali legacy condivisi. */
body.wateret-content .modal:not(.fade) { z-index:60; padding:1rem; background:rgba(7,31,43,.65); backdrop-filter:blur(8px); }
body.wateret-content .modal:not(.fade)>.modal-content { position:relative; width:min(100%,48rem); max-height:calc(100vh - 2rem); max-height:calc(100dvh - 2rem); overflow:auto; margin:0 auto; border:1px solid rgba(255,255,255,.85); border-radius:1.5rem; padding:1.5rem; background:#fff; box-shadow:0 2rem 5rem rgba(7,31,43,.28); }
body.wateret-content .modal:not(.fade) .close { position:static; float:right; color:#94a3b8; font-size:1.75rem; line-height:1; }.wateret-content .modal:not(.fade) .close:hover { color:#0f172a; }
body.wateret-content .modal:not(.fade) table { width:100%; border:0; }.wateret-content .modal:not(.fade) th { border-bottom:1px solid #e2e8f0; padding:.7rem; color:#64748b; background:#f8fafc; font-size:.7rem; text-transform:uppercase; }.wateret-content .modal:not(.fade) td { border-bottom:1px solid #f1f5f9; padding:.7rem; color:#334155; font-size:.8rem; }
@media(max-width:720px){body.wateret-config-page,body.wateret-history-page{padding:1.5rem 1rem!important}body.wateret-config-page>.big{grid-template-columns:1fr}body.wateret-config-page>.big>.aggiungi{grid-column:auto}body.wateret-history-page .grid{height:60vh;height:60dvh;min-height:20rem}}

/* ==========================================================================
   LAYER RESPONSIVE — revisione completa
   --------------------------------------------------------------------------
   Scala di breakpoint usata da qui in avanti:
     <= 480px   telefono stretto
     <= 640px   telefono
     <= 900px   tablet in verticale  -> la shell passa a sidebar off-canvas
     <= 1200px  desktop stretto      -> sidebar compatta
   Le pagine di contenuto vivono dentro un iframe: le loro media query si
   misurano sulla larghezza dell iframe, non su quella del dispositivo.
   ========================================================================== */

/* --- 1. Guardie globali contro l overflow orizzontale --------------------- */
img, svg, video, canvas, table { max-width: 100%; }
body.wateret-page, body.wateret-content { overflow-wrap: break-word; }
.wateret-board-identity p,
.wateret-reading-header > div:first-child > p,
.wateret-history-header p,
.wateret-delete-modal h5 + p strong,
.wateret-account-table td:first-child { overflow-wrap: break-word; }

/* --- 2. Shell: sidebar scorrevole e ancorata in basso senza position:absolute */
.wateret-sidebar {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
}
.wateret-sidebar > .wateret-brand,
.wateret-sidebar > .wateret-nav-label,
.wateret-sidebar > .wateret-nav { flex: 0 0 auto; }
.wateret-sidebar-account {
    position: static;
    margin-top: auto;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
.wateret-topbar { padding-right: max(2rem, env(safe-area-inset-right)); }
.wateret-menu-button { min-width: 2.75rem; min-height: 2.75rem; align-items: center; justify-content: center; font-size: 1.1rem; }

/* Velo che chiude il menu toccando fuori dalla sidebar (solo in off-canvas). */
.wateret-scrim {
    position: fixed;
    z-index: 39;
    inset: 0;
    display: none;
    border: 0;
    padding: 0;
    background: rgba(7, 31, 43, .45);
    backdrop-filter: blur(2px);
    cursor: pointer;
}

/* --- 3. Desktop stretto: sidebar compatta invece che 17rem --------------- */
@media (max-width: 1200px) and (min-width: 901px) {
    .wateret-shell { grid-template-columns: 14rem minmax(0, 1fr); }
    .wateret-brand { padding: 0 1rem; }
    .wateret-brand strong { font-size: .95rem; }
    .wateret-nav-label { margin: 1.25rem 1rem .6rem; }
    .wateret-nav { padding: 0 .55rem; }
    .wateret-topbar { padding: 0 1.25rem; }
}

/* --- 4. Tablet in verticale e sotto: shell off-canvas -------------------- */
@media (max-width: 900px) {
    .wateret-shell { display: block; }
    .wateret-sidebar {
        position: fixed;
        z-index: 40;
        top: 0;
        left: 0;
        width: min(17rem, 82vw);
        transform: translateX(-100%);
        transition: transform .25s ease;
    }
    /* Traslata di -100% il bordo destro finisce a x=0: senza questo la sua
       ombra da 3rem resta visibile come alone sul bordo sinistro. */
    .wateret-sidebar { box-shadow: none; }
    .wateret-sidebar.is-open {
        transform: translateX(0);
        box-shadow: 1rem 0 3rem rgba(7, 31, 43, .35);
    }
    .wateret-menu-button { display: inline-flex; }
    .wateret-shell.is-menu-open .wateret-scrim { display: block; }
    /* Con il pulsante del menu dentro, la fascia torna opaca e un po' piu' alta. */
    .wateret-topbar { min-height:3.25rem; height:3.25rem; border-bottom:1px solid rgba(226,232,240,.8); background:rgba(255,255,255,.82); backdrop-filter:blur(14px); padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
    .wateret-frame { height: calc(100vh - 3.25rem); height: calc(100dvh - 3.25rem); }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
    .wateret-sidebar { transition: none; }
}
body.wateret-page.is-menu-locked { overflow: hidden; }


/* --- 5. Target tattili: nessun comando sotto i 44px su touch ------------- */
@media (pointer: coarse) {
    .wateret-primary, .wateret-secondary, .wateret-danger,
    .wateret-nav button, .wateret-nav a,
    .wateret-pagination a,
    .wateret-board-card footer a, .wateret-board-card footer button,
    .wateret-account-table td:last-child > button,
    body.wateret-content .testbutton,
    body.wateret-content .testbutton2,
    body.wateret-content .commutabutton,
    body.wateret-history-page .ricerca_btn,
    body.wateret-history-page .mostra_btn,
    body.wateret-history-page .ricerca2_btn { min-height: 2.75rem; }
    .wateret-search input, .wateret-account-search input,
    .wateret-filter-panel select,
    body.wateret-config-page input[type=text],
    body.wateret-config-page input[type=number] { min-height: 2.75rem; }
    .wateret-account-table td:last-child > button { margin-bottom: .25rem; }
}

/* --- 6. Pagina board ----------------------------------------------------- */
.wateret-reference-header h1 { font-size: clamp(1.5rem, 4.5vw, 1.875rem); }
.wateret-page-container { padding-left: max(2rem, env(safe-area-inset-left)); padding-right: max(2rem, env(safe-area-inset-right)); }
.wateret-filter-panel .wateret-search { min-width: 0; }
/* I due filtri stanno insieme perche' fanno la stessa cosa - restringere
   l'elenco - mentre la ricerca e' un'altra faccenda. Insieme sono anche un
   blocco solo da mandare a capo quando la riga non li tiene piu', invece di
   due pezzi che si spargono ognuno per conto suo. */
.wateret-filtri { display: flex; flex-wrap: wrap; gap: .65rem; }
@media (max-width: 720px) {
    /* Il campo di ricerca si prende la riga, e i due filtri vanno sotto.

       Prima la tendina dei modelli era larga il cento per cento dentro la
       barra: si mangiava la riga e alla ricerca restava il quadratino con
       dentro la lente, che non si capiva piu' che cosa fosse. La ricerca e' il
       comando principale del pannello, non un accessorio dei filtri.

       Sotto, i due filtri dividono la riga a meta' e ci restano finche' dieci
       rem per uno ci stanno; quando non ci stanno piu' vanno a capo da soli e
       si prendono una riga a testa. Non serve una soglia scritta: la sa la
       riga stessa quando e' piena.

       Il min-width a zero serve proprio a questo. Senza, una tendina non
       scende sotto la sua voce piu' lunga - "Modello non registrato" - e a
       decidere quando le due si separano finirebbe per essere la lunghezza di
       quella scritta: bastava aggiungere un modello dal nome lungo per veder
       cambiare il punto in cui il pannello si impila. */
    .wateret-search { flex-wrap: wrap; }
    .wateret-search input { flex: 1 1 12rem; }
    .wateret-filtri { flex: 1 1 100%; }
    .wateret-filter-panel .wateret-filtri select { width: auto; min-width: 0; flex: 1 1 10rem; }
    .wateret-page-container { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
    .wateret-reference-header .wateret-primary { align-self: stretch; text-align: center; }
    .wateret-pagination { flex-wrap: wrap; gap: .5rem .75rem; }
    .wateret-pagination span { order: -1; width: 100%; text-align: center; }
}
@media (max-width: 480px) {
    .wateret-search { flex-wrap: wrap; }
    .wateret-search input { flex: 1 1 100%; }
    .wateret-search .wateret-secondary { flex: 1 1 auto; }
    .wateret-board-card-main { padding: 1rem; }
    .wateret-board-card dl { grid-template-columns: 1fr; gap: .6rem; margin-top: 1rem; }
    .wateret-board-identity h2 { font-size: 1rem; }
    .wateret-board-card footer { flex-wrap: wrap; }
    .wateret-board-card footer > * { flex: 1 1 8rem; text-align: center; }
    .wateret-empty-panel { padding: 2.5rem 1rem; }
}

/* --- 7. Panoramica ------------------------------------------------------- */
@media (max-width: 900px) {
    .wateret-overview-page .wateret-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .wateret-overview-page .wateret-overview { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
    .wateret-overview-page .wateret-hero h1 { font-size: clamp(1.5rem, 6vw, 1.875rem); }
    .wateret-overview-page .wateret-overview-panel { align-items: flex-start; flex-direction: column; gap: .75rem; }
    .wateret-hero-actions > * { flex: 1 1 12rem; }
}
@media (max-width: 480px) {
    .wateret-overview-page .wateret-metrics { grid-template-columns: 1fr; }
    .wateret-overview-page .wateret-hero { padding: 1.5rem 1.25rem; }
    .wateret-overview-page .wateret-metric strong { font-size: 1.5rem; }
}

/* --- 8. Dettaglio letture (Fast.php) ------------------------------------- */
/* Il gauge disegna su un canvas 300x150: forzando un rapporto diverso via CSS
   veniva schiacciato. Larghezza fluida e altezza derivata dal rapporto reale. */
body.wateret-reading-page .container canvas {
    width: min(100%, 11rem) !important;
    height: auto !important;
    max-height: none;
}
.wateret-reading-title h1 { font-size: clamp(1.4rem, 5vw, 1.875rem); }
body.wateret-reading-page { padding-left: max(2rem, env(safe-area-inset-left)) !important; padding-right: max(2rem, env(safe-area-inset-right)) !important; }
@media (max-width: 1100px) and (min-width: 721px) {
    body.wateret-reading-page .wrapper > .container { min-height: 13rem; }
}
@media (max-width: 720px) {
    body.wateret-reading-page { padding-left: max(1rem, env(safe-area-inset-left)) !important; padding-right: max(1rem, env(safe-area-inset-right)) !important; }
    body.wateret-reading-page .wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    body.wateret-reading-page .wrapper { grid-template-columns: 1fr; }
    /* In colonna singola i pulsanti tornano nel flusso: niente sovrapposizioni
       con i valori lunghi, e area di tocco a piena larghezza. */
    body.wateret-reading-page .wrapper > .container { min-height: 0; padding: 1rem; }
    body.wateret-reading-page .testbutton,
    body.wateret-reading-page .testbutton2,
    body.wateret-reading-page .commutabutton,
    body.wateret-reading-page #bottone_rele {
        position: static;
        display: block;
        width: 100%;
        margin-top: 1rem;
        text-align: center;
    }
    body.wateret-reading-page .container .valore { margin: .75rem 0 0; font-size: 1.5rem; }
    body.wateret-reading-page .container img { margin-top: .75rem; }
    body.wateret-reading-page .container canvas { margin-top: .5rem; }
}

/* --- 9. Storico e grafico (Grafico.php) ---------------------------------- */
body.wateret-history-page { padding-left: max(2rem, env(safe-area-inset-left)) !important; padding-right: max(2rem, env(safe-area-inset-right)) !important; }
.wateret-history-header h1 { font-size: clamp(1.4rem, 5vw, 1.875rem); }
body.wateret-history-page .grid > div { min-height: 0; }
@media (max-width: 720px) {
    body.wateret-history-page { padding-left: max(1rem, env(safe-area-inset-left)) !important; padding-right: max(1rem, env(safe-area-inset-right)) !important; }
    body.wateret-history-page .grid { padding: 3.5rem .75rem .75rem; }
}
@media (max-width: 480px) {
    body.wateret-history-page .ricerca_btn,
    body.wateret-history-page .mostra_btn { padding: .45rem .6rem; font-size: .7rem; }
    body.wateret-history-page .ricerca .innerBig { padding: 1.15rem; }
    body.wateret-history-page .ricerca2_btn { display: block; width: 100%; margin: .5rem 0 0; }
    body.wateret-history-page .ricerca h2 { font-size: 1.1rem; }
}
/* Righe data della ricerca: l icona calendario e in position:absolute a
   destra, quindi il testo va tenuto fuori dalla sua fascia. Etichetta e
   valore sono due flex item e vanno a capo invece di finirci sotto. */
.wateret-history-page .ricerca .vedi {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .15rem .75rem;
    padding: .7rem 3.25rem .7rem .9rem;
    text-align: left;
}
.wateret-history-page .ricerca .vedi-label {
    color: #64748b;
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
}
.wateret-history-page .ricerca .vedi-value {
    color: #0f172a;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    overflow-wrap: break-word;
}
.wateret-history-page .ricerca .vedi .icon_btn {
    top: 50%;
    right: .9rem;
    width: 1.4rem;
    height: 1.4rem;
    transform: translateY(-50%);
    object-fit: contain;
}
@media (max-width: 380px) {
    .wateret-history-page .ricerca .vedi {
        padding-right: 2.9rem;
        padding-left: .75rem;
    }
    .wateret-history-page .ricerca .vedi-value { font-size: .82rem; }
}

/* Telefono in orizzontale: il grafico non deve schiacciarsi a nulla. */
@media (max-height: 520px) and (orientation: landscape) {
    body.wateret-history-page { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .wateret-history-header { margin-bottom: .75rem; }
    body.wateret-history-page .grid { height: auto; min-height: 18rem; }
}

/* --- 10. Pagine di configurazione board ---------------------------------- */
body.wateret-config-page { padding-left: max(2rem, env(safe-area-inset-left)) !important; padding-right: max(2rem, env(safe-area-inset-right)) !important; }
.wateret-config-header h1 { font-size: clamp(1.4rem, 5vw, 1.875rem); }
body.wateret-config-page > .big > .colonna { min-width: 0; }
body.wateret-config-page > .big > .aggiungi { min-height: 2.75rem; }
@media (max-width: 720px) {
    body.wateret-config-page { padding-left: max(1rem, env(safe-area-inset-left)) !important; padding-right: max(1rem, env(safe-area-inset-right)) !important; }
}
/* Modale proprietari: a schermo pieno sul telefono, con lista scorrevole. */
@media (max-width: 560px) {
    #myModal.modal { padding: 0 !important; }
    #myModal .modal-content {
        display: flex;
        width: 100% !important;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh !important;
        flex-direction: column;
        border: 0;
        border-radius: 0 !important;
        padding-top: env(safe-area-inset-top);
    }
    .owner-modal-header { padding: 1rem 1rem .85rem; }
    .owner-modal-header h2 { font-size: 1.15rem; }
    .owner-modal-header .intro { display: none; }
    .owner-modal-body { display: flex; min-height: 0; flex: 1; flex-direction: column; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
    #myModal .scroll { min-height: 0; flex: 1; max-height: none !important; }
}

/* --- 11. Gestione account ------------------------------------------------ */
.wateret-account-container { padding-left: max(2rem, env(safe-area-inset-left)); padding-right: max(2rem, env(safe-area-inset-right)); }
.wateret-account-page .wateret-section-header h1 { font-size: clamp(1.4rem, 5vw, 1.875rem); }
/* DataTables Responsive collassa le colonne, ma se il calcolo non basta il
   wrapper deve poter scorrere: senza, a sfondare in larghezza e la pagina, e
   i modali (position:fixed, larghi quanto il viewport) risultano tagliati. */
.wateret-account-panel { max-width: 100%; }
.wateret-account-panel .table-responsive { overflow-x: auto; overflow-y: visible; }
.wateret-account-table { max-width: 100%; }
/* Guardia dura: nessuna pagina di contenuto deve poter scorrere in orizzontale. */
body.wateret-account-page { overflow-x: hidden; }
.wateret-account-table.dtr-inline.collapsed > tbody > tr > td.dtr-control { position: relative; padding-left: 2.1rem !important; cursor: pointer; }
.wateret-account-table.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
    top: 50%;
    left: 1.25rem;
    box-sizing: content-box;
    width: 1rem;
    height: 1rem;
    margin-top: -.5rem;
    border: 0 !important;
    border-radius: 50%;
    color: #073b3a !important;
    background: #63e6d1 !important;
    box-shadow: none !important;
    font-size: .8rem;
    line-height: 1rem;
    text-align: center;
    text-indent: 0 !important;
}
/* La classe "nowrap" di DataTables colpisce anche il td della riga di
   dettaglio: etichetta e valore non potevano andare a capo e finivano spinti
   oltre il bordo destro. Qui il testo torna a fluire. */
.wateret-account-table > tbody > tr.child > td,
.wateret-account-table > tbody > tr.child ul.dtr-details,
.wateret-account-table > tbody > tr.child ul.dtr-details > li,
.wateret-account-table > tbody > tr.child span.dtr-title,
.wateret-account-table > tbody > tr.child span.dtr-data {
    white-space: normal !important;
}
.wateret-account-table > tbody > tr.child > td { padding: .35rem 1.25rem !important; }
.wateret-account-table > tbody > tr.child ul.dtr-details { display: block; width: 100%; margin: 0; padding: 0; list-style: none; }
.wateret-account-table > tbody > tr.child ul.dtr-details > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .35rem .75rem;
    border-bottom: 1px solid #f1f5f9;
    padding: .55rem 0;
    font-size: .8rem;
}
.wateret-account-table > tbody > tr.child ul.dtr-details > li:last-child { border-bottom: 0; }
/* min-width:auto (il default dei flex item) e voluto: impedisce a etichetta e
   valore di comprimersi sotto la propria larghezza minima. Se non ci stanno
   sulla stessa riga, il flex-wrap manda il valore a capo su una riga intera. */
.wateret-account-table > tbody > tr.child span.dtr-title {
    flex: 0 0 auto;
    color: #64748b;
    font-weight: 600;
}
.wateret-account-table > tbody > tr.child span.dtr-data {
    flex: 1 1 auto;
    color: #334155;
    overflow-wrap: break-word;
    text-align: right;
}
.wateret-account-table > tbody > tr.child span.dtr-data > button {
    margin: .15rem 0 .15rem .35rem;
    white-space: nowrap;
}
/* Nel dettaglio l'etichetta e il valore restano affiancati anche sui telefoni:
   le righe sono corte e si legge piu' compatto. Il valore si restringe e va a
   capo invece di sbordare, perche' il pannello ha overflow nascosto. */
.wateret-account-table > tbody > tr.child ul.dtr-details > li { gap: .75rem; }
.wateret-account-table > tbody > tr.child span.dtr-title { flex: 0 1 auto; min-width: 0; }
.wateret-account-table > tbody > tr.child span.dtr-data { flex: 1 1 auto; min-width: 0; text-align: right; overflow-wrap: anywhere; }
@media (max-width: 420px) {
    .wateret-account-table > tbody > tr.child span.dtr-data > button { margin: .15rem .35rem .15rem 0; }
}
/* Sotto i 360px pero' la tabella non ci sta nel pannello: DataTables tiene le
   email su una riga sola, ed e' da quella misura che decide quante colonne
   mostrare, quindi non si puo' mandarle a capo. Il bordo destro finisce
   tagliato, e solo qui etichetta e valore tornano incolonnati: partono
   entrambi da sinistra e restano leggibili. */
@media (max-width: 359.98px) {
    .wateret-account-table > tbody > tr.child ul.dtr-details > li { align-items: flex-start; flex-direction: column; gap: .2rem; }
    .wateret-account-table > tbody > tr.child span.dtr-data { width: 100%; text-align: left; }
}
/* Ruolo "user": il proprio account e una scheda, non una tabella di una riga
   sola da espandere con la freccetta di collasso. */
.wateret-profile-card {
    max-width: 34rem;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 1px 2px rgba(7, 31, 43, .04), 0 .75rem 2rem rgba(7, 31, 43, .055);
    backdrop-filter: blur(4px);
}
.wateret-profile-head {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 1.25rem;
}
.wateret-profile-avatar {
    display: grid;
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    place-items: center;
    border-radius: 1rem;
    color: #0f766e;
    background: linear-gradient(135deg, #f0fdfa, #f0f9ff);
    box-shadow: inset 0 0 0 1px rgba(99, 230, 209, .18);
    font-size: 1.2rem;
    font-weight: 700;
}
.wateret-profile-head > div { min-width: 0; }
.wateret-profile-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 600;
    overflow-wrap: break-word;
}
.wateret-profile-head p { margin: .2rem 0 0; color: #64748b; font-size: .8rem; }
.wateret-profile-fields { margin: 0; }
.wateret-profile-fields > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .35rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    padding: .85rem 0;
}
.wateret-profile-fields > div:last-child { border-bottom: 0; }
.wateret-profile-fields dt { color: #64748b; font-size: .82rem; }
.wateret-profile-fields dd {
    margin: 0;
    color: #0f172a;
    font-size: .85rem;
    font-weight: 600;
    overflow-wrap: break-word;
    text-align: right;
}
.wateret-profile-card > .wateret-primary { width: 100%; margin-top: 1.25rem; }
@media (max-width: 420px) {
    .wateret-profile-card { padding: 1.15rem; }
    .wateret-profile-fields > div { align-items: flex-start; flex-direction: column; gap: .25rem; }
    .wateret-profile-fields dd { text-align: left; }
}

@media (max-width: 720px) {
    .wateret-account-container { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
    .wateret-account-search { padding: .75rem; }
    .wateret-account-search span { top: 1.4rem; left: 1.55rem; }
    .wateret-account-table td:last-child { display: flex; flex-wrap: wrap; gap: .35rem; }
    .wateret-account-table td:last-child > button { flex: 1 1 6rem; margin: 0; }
}
/* Da 576px in su Bootstrap toglie i margini laterali al dialogo, e il tema lo
   portava a max-width:36rem = esattamente 576px: nella fascia 576-620px il
   modale finiva a filo dei due bordi. Il calc() garantisce sempre un margine.
   Sotto i 576px il modale account e in "modal-fullscreen-sm-down": va lasciato
   a tutto schermo, quindi la regola qui esclude i dialoghi fullscreen. */
@media (min-width: 576px) {
    .wateret-account-page .modal-dialog { max-width: min(36rem, calc(100% - 3rem)); }
    .wateret-account-page .wateret-delete-modal .modal-dialog,
    .wateret-delete-modal .modal-dialog { max-width: min(26rem, calc(100% - 3rem)); }
}
@media (max-width: 575.98px) {
    .wateret-account-page .modal-dialog:not(.modal-fullscreen-sm-down),
    .wateret-delete-modal .modal-dialog:not(.modal-fullscreen-sm-down) {
        max-width: calc(100% - 1.5rem);
        margin: .75rem auto;
    }
    .wateret-delete-actions { grid-template-columns: 1fr; }
}

/* --- 12. Pagine legacy senza classe di pagina ---------------------------- */
/* Senza una classe dedicata, .big ereditava un box alto 75vh mezzo vuoto. */
body.wateret-content > .big,
body.wateret-content > .superBig > .big { height: auto; min-height: 0; }

/* --- 13. Pagine ospite (login, registrazione, recupero) ------------------ */
body.wateret-guest-page { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
@media (max-width: 480px) {
    .wateret-guest-shell { width: min(100% - 1.5rem, 28rem); }
    .wateret-login-card { border-radius: 1.15rem; padding: 1.35rem; }
    .wateret-mobile-brand { margin-bottom: 1.25rem; }
    .wateret-guest-form-column { padding: 1.25rem 0 calc(1.25rem + env(safe-area-inset-bottom)) !important; }
    .wateret-label-row { flex-wrap: wrap; gap: .25rem; }
}
/* Telefono in orizzontale: la card non va centrata dentro un 100dvh che la
   taglia; si scorre normalmente. */
@media (max-height: 560px) and (orientation: landscape) {
    .wateret-guest-shell { min-height: 0; margin: 1.5rem auto; }
    .wateret-guest-form-column { min-height: 0 !important; padding: 0 !important; }
    .wateret-guest-intro { min-height: 0; }
}

/* --- 14. Meno movimento se l utente lo chiede --------------------------- */
@media (prefers-reduced-motion: reduce) {
    .wateret-board-card,
    .wateret-board-card:hover,
    .wateret-account-panel .dataTables_paginate .page-link { transform: none; transition: none; }
    .animated { animation: none !important; }
}

/* --- 15. Pagina di dettaglio a sola lettura (info-rele.php) -------------- */
body.wateret-detail-page {
    padding: 2rem max(2rem, env(safe-area-inset-right)) 2rem max(2rem, env(safe-area-inset-left)) !important;
    overflow: auto;
}
.wateret-detail-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.wateret-detail-card {
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 1rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 1px 2px rgba(7, 31, 43, .035), 0 .75rem 2rem rgba(7, 31, 43, .05);
}
.wateret-detail-card h2 {
    margin: 0 0 .9rem;
    color: #0f172a;
    font-size: .95rem;
    font-weight: 600;
}
.wateret-detail-card dl { margin: 0; }
.wateret-detail-card dl > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem 1rem;
    border-top: 1px solid #f1f5f9;
    padding: .6rem 0;
}
.wateret-detail-card dl > div:first-child { border-top: 0; padding-top: 0; }
.wateret-detail-card dt { color: #64748b; font-size: .8rem; }
.wateret-detail-card dd {
    margin: 0;
    color: #0f172a;
    font-size: .9rem;
    font-weight: 600;
    overflow-wrap: break-word;
    text-align: right;
}
.wateret-detail-badge {
    display: inline-block;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: .2rem .6rem;
    color: #475569;
    background: #f1f5f9;
    font-size: .72rem;
    font-weight: 600;
}
.wateret-detail-badge.is-on { border-color: #a7f3d0; color: #047857; background: #d1fae5; }
@media (max-width: 720px) {
    body.wateret-detail-page {
        padding: 1.5rem max(1rem, env(safe-area-inset-right)) 1.5rem max(1rem, env(safe-area-inset-left)) !important;
    }
}

/* --- 16. Schermi larghi: il contenuto non si stira all infinito ---------- */
/* Senza un tetto, su un monitor 2560px la griglia board diventa tre colonne
   da 800px e i form di configurazione due campi larghi mezzo schermo.
   Nota: i modali sono position:fixed e restano fuori da questo cap. */
.wateret-page-container > *,
.wateret-account-container > *,
.wateret-overview-page .wateret-overview > *,
.wateret-detail-grid,
body.wateret-detail-page > .wateret-config-header,
body.wateret-config-page > .wateret-config-header,
body.wateret-reading-page > .wateret-reading-header,
body.wateret-reading-page > .superBig,
body.wateret-history-page > .wateret-history-header,
body.wateret-history-page > .wateret-history-toolbar,
body.wateret-history-page > .wateret-chart-note,
body.wateret-history-page > .wateret-chart-warning,
body.wateret-history-page > .wateret-history-metrics,
body.wateret-history-page > .superBig {
    max-width: 84rem;
    margin-left: auto;
    margin-right: auto;
}
/* Per chi ha solo la scheda profilo la pagina e' quella e basta: senza un
   tetto piu' stretto tre righe si stirano per tutto un monitor, ma stringere
   la sola scheda la lascerebbe in un angolo con mezza pagina vuota accanto.
   Si stringe e si centra tutta la colonna, titolo compreso. */
.wateret-account-container.is-solo-profilo { display: flex; min-height: 100vh; flex-direction: column; }
.wateret-account-container.is-solo-profilo > * { width: 100%; max-width: 34rem; margin-left: auto; margin-right: auto; }
/* I margini automatici in cima e in fondo centrano il gruppo in verticale
   senza tagliarlo quando lo schermo e' basso, cosa che justify-content fa. */
.wateret-account-container.is-solo-profilo > :first-child { margin-top: auto; }
.wateret-account-container.is-solo-profilo > :last-child { margin-bottom: auto; }
body.wateret-config-page > .big {
    max-width: 64rem !important;
    margin: 0 auto !important;
}

@media (min-width: 1600px) {
    .wateret-board-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- 17. Date picker dello storico (dist/simplepicker.css) --------------- */
/* Il file di dist non ha media query e fissa il calendario a 326px: su un
   telefono da 320px sfora, e l overlay usa 100vw/100vh. Qui non si tocca il
   dist, si adatta soltanto. */
.simplepicker-wrapper {
    width: 100%;
    height: 100%;
    height: 100dvh;
    padding: 1rem;
}
.simpilepicker-date-picker {
    width: min(326px, 100%);
    margin: 2% auto;
    border-radius: .9rem;
    overflow: hidden;
    font-family: "Instrument Sans", "Segoe UI", sans-serif;
}
.simplepicker-calender tbody td { padding: 10px 2px; }
.simplepicker-btn {
    min-height: 2.75rem;
    border-radius: .6rem;
    font-family: inherit;
    font-size: .85rem;
}
/* padding-left:48% spingeva i due pulsanti fuori asse sugli schermi stretti. */
.simplepicker-bottom-part {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .5rem .75rem .75rem;
}
.simplepicker-btn { margin: 0; }
@media (max-width: 380px) {
    .simplepicker-date-section .simplepicker-date { font-size: 28px; }
    .simplepicker-date-section .simplepicker-month-and-year { font-size: 18px; }
    .simplepicker-calender table { font-size: 12px; }
    .simplepicker-bottom-part { justify-content: stretch; }
    .simplepicker-btn { flex: 1; }
}

/* ==========================================================================
   21. Tema scuro
   La scelta vive in localStorage (JS/theme.js) e marca <html data-theme>.
   Il tema base usa colori letterali, non variabili, quindi qui si ridefiniscono
   le superfici che pesano visivamente invece di tentare una traduzione uno a uno.
   ========================================================================== */
:root[data-theme="dark"] {
    --mist: #0a222c;
    --border: rgba(255, 255, 255, .10);
    --slate-400: #7f96a3;
    --slate-500: #9fb3bd;
    --slate-700: #cbd8de;
    --slate-900: #e6eef1;
    --shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
:root[data-theme="dark"] body.wateret-page,
:root[data-theme="dark"] body.wateret-content {
    color: #e6eef1;
    background:
        radial-gradient(circle at 8% 8%, rgba(99, 230, 209, .10), transparent 27rem),
        radial-gradient(circle at 93% 16%, rgba(67, 169, 230, .09), transparent 25rem),
        linear-gradient(135deg, #061b24 0%, #08252f 48%, #061c25 100%);
}

/* Superfici: tutto cio' che nel chiaro e' una card bianca. */
:root[data-theme="dark"] .wateret-metric,
:root[data-theme="dark"] .wateret-board-card,
:root[data-theme="dark"] .wateret-overview-panel,
:root[data-theme="dark"] .wateret-filter-panel,
:root[data-theme="dark"] .wateret-empty-panel,
:root[data-theme="dark"] .wateret-account-panel,
:root[data-theme="dark"] body.wateret-history-page .grid,
:root[data-theme="dark"] body.wateret-reading-page .container,
:root[data-theme="dark"] body.wateret-reading-page .big > h4,
:root[data-theme="dark"] body.wateret-config-page > .big > .colonna,
:root[data-theme="dark"] body.wateret-history-page .ricerca .innerBig {
    border-color: rgba(255, 255, 255, .09) !important;
    background: #0e2a35 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 .75rem 2rem rgba(0, 0, 0, .3) !important;
}

/* Testi: titoli e valori chiari, etichette e didascalie smorzate. */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] .wateret-metric strong,
:root[data-theme="dark"] .wateret-board-card h2,
:root[data-theme="dark"] .wateret-board-card dd,
:root[data-theme="dark"] body.wateret-reading-page .valore,
:root[data-theme="dark"] body.wateret-history-page .ricerca h2 {
    color: #f1f5f9 !important;
}
:root[data-theme="dark"] p,
:root[data-theme="dark"] small,
:root[data-theme="dark"] label,
:root[data-theme="dark"] dt,
:root[data-theme="dark"] .wateret-metric p,
:root[data-theme="dark"] .wateret-board-card p,
:root[data-theme="dark"] .wateret-history-header p,
:root[data-theme="dark"] body.wateret-reading-page .desc,
:root[data-theme="dark"] .wateret-chart-note {
    color: #9fb3bd !important;
}
:root[data-theme="dark"] .wateret-metric small,
:root[data-theme="dark"] .wateret-board-card dt {
    color: #7f96a3 !important;
}

/* Campi di inserimento. */
:root[data-theme="dark"] input[type=text],
:root[data-theme="dark"] input[type=number],
:root[data-theme="dark"] input[type=search],
:root[data-theme="dark"] input[type=email],
:root[data-theme="dark"] input[type=password],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] body.wateret-history-page .ricerca .vedi {
    border-color: rgba(255, 255, 255, .14) !important;
    color: #e6eef1 !important;
    background: #071e27 !important;
}
:root[data-theme="dark"] ::placeholder { color: #6b8290; }

/* Comandi secondari e separatori. */
:root[data-theme="dark"] .wateret-secondary,
:root[data-theme="dark"] .wateret-theme-button,
:root[data-theme="dark"] body.wateret-history-page .ricerca_btn,
:root[data-theme="dark"] body.wateret-history-page .mostra_btn {
    border-color: rgba(255, 255, 255, .14) !important;
    color: #cbd8de !important;
    background: rgba(255, 255, 255, .05) !important;
}
:root[data-theme="dark"] .wateret-secondary:hover,
:root[data-theme="dark"] .wateret-theme-button:hover { border-color: #2f7f74 !important; background: rgba(99, 230, 209, .12) !important; }
:root[data-theme="dark"] .wateret-board-card footer,
:root[data-theme="dark"] .wateret-board-card dl { border-color: rgba(255, 255, 255, .07) !important; }
:root[data-theme="dark"] body.wateret-history-page .wateret-export-button { border-color: rgba(99, 230, 209, .25) !important; color: #7fe3d2 !important; background: rgba(99, 230, 209, .10) !important; }

/* Serbatoio animato e riquadri di stato. */
:root[data-theme="dark"] .wateret-tank { border-color: #2c5560; background: linear-gradient(90deg, #0a2430, #0d2c38 55%, #0a2430); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .04), 0 .75rem 1.75rem rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .wateret-tank:before { border-color: #2c5560; background: #10333f; }
:root[data-theme="dark"] .wateret-tank-shine { background: rgba(255, 255, 255, .16); }
:root[data-theme="dark"] .wateret-chart-warning { border-color: rgba(253, 230, 138, .28); color: #fcd34d; background: rgba(120, 83, 10, .22); }

/* Modale della ricerca e finestre di dialogo. */
:root[data-theme="dark"] body.wateret-history-page .ricerca { background: rgba(2, 12, 17, .74); }
:root[data-theme="dark"] .simpilepicker-date-picker { box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .55); }

/* Tabelle delle pagine account. */
:root[data-theme="dark"] body.wateret-content table.dataTable thead th { border-color: rgba(255, 255, 255, .10) !important; color: #9fb3bd !important; background: #0a222c !important; }
:root[data-theme="dark"] body.wateret-content table.dataTable tbody td { border-color: rgba(255, 255, 255, .07) !important; color: #cbd8de !important; }
:root[data-theme="dark"] body.wateret-content table.dataTable tbody tr:hover { background: rgba(99, 230, 209, .07) !important; }
:root[data-theme="dark"] body.wateret-reading-page .big > h4 { color: #9fb3bd !important; }
:root[data-theme="dark"] body.wateret-reading-page .big > h4 span { color: #f1f5f9 !important; }
:root[data-theme="dark"] .testbutton { border-color: rgba(99, 230, 209, .22) !important; color: #7fe3d2 !important; background: rgba(99, 230, 209, .10) !important; }
:root[data-theme="dark"] .wateret-board-icon { color: #7fe3d2 !important; background: rgba(99, 230, 209, .12) !important; }

/* La regola di impaginazione piu' avanti rimetteva un fondo bianco traslucido
   alla fascia: qui torna trasparente, e opaca solo dove ospita il menu. */
.wateret-topbar { background: transparent; backdrop-filter: none; }
:root[data-theme="dark"] .wateret-theme-button { border-color: rgba(255, 255, 255, .14); color: #cbd8de; background: rgba(255, 255, 255, .06); }
@media (max-width: 900px) {
    .wateret-topbar { background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px); }
    :root[data-theme="dark"] .wateret-topbar { border-color: rgba(255, 255, 255, .08); background: rgba(6, 27, 36, .88); }
}
:root[data-theme="dark"] .wateret-board-fill-label { color: #7f96a3; }
:root[data-theme="dark"] .wateret-board-fill-track { background: rgba(255, 255, 255, .09); }
:root[data-theme="dark"] .wateret-board-fill.is-alto .wateret-board-fill-value { color: #34d399; }
:root[data-theme="dark"] .wateret-board-fill.is-medio .wateret-board-fill-value { color: #fbbf24; }
:root[data-theme="dark"] .wateret-board-fill.is-basso .wateret-board-fill-value { color: #f87171; }

/* --- Gestione account in tema scuro ------------------------------------- */
:root[data-theme="dark"] .wateret-account-search,
:root[data-theme="dark"] .wateret-account-panel {
    border-color: rgba(255, 255, 255, .09) !important;
    background: #0e2a35 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 .75rem 2rem rgba(0, 0, 0, .3) !important;
}
:root[data-theme="dark"] .wateret-account-search input { border-color: rgba(255, 255, 255, .14) !important; color: #e6eef1 !important; background: #071e27 !important; }
:root[data-theme="dark"] .wateret-account-search span { color: #7f96a3; }

/* Bootstrap non colora le celle con background ma con un box-shadow interno
   preso da --bs-table-bg: senza azzerarlo il corpo tabella resta bianco. */
:root[data-theme="dark"] .wateret-account-table,
:root[data-theme="dark"] .wateret-account-table > :not(caption) > * > * {
    --bs-table-bg: transparent;
    --bs-table-color: #cbd8de;
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: #cbd8de;
    --bs-table-hover-bg: rgba(99, 230, 209, .07);
    --bs-table-hover-color: #e6eef1;
    box-shadow: none !important;
    color: #cbd8de !important;
    border-color: rgba(255, 255, 255, .07) !important;
}
:root[data-theme="dark"] .wateret-account-table thead th { color: #9fb3bd !important; border-bottom-color: rgba(255, 255, 255, .09) !important; background: rgba(255, 255, 255, .03) !important; }
:root[data-theme="dark"] .wateret-account-table tbody tr:hover { background: rgba(99, 230, 209, .06) !important; }
:root[data-theme="dark"] .wateret-account-table a { color: #7fe3d2 !important; }

/* Comandi di DataTables. */
:root[data-theme="dark"] .wateret-account-panel .dataTables_length select,
:root[data-theme="dark"] .wateret-account-panel .dataTables_paginate .pagination {
    border-color: rgba(255, 255, 255, .12) !important;
    color: #cbd8de !important;
    background: #071e27 !important;
    background-color: #071e27 !important;
}
:root[data-theme="dark"] .wateret-account-panel .dataTables_info,
:root[data-theme="dark"] .wateret-account-panel .dataTables_length,
:root[data-theme="dark"] .wateret-account-panel .paginate_button { color: #9fb3bd !important; }
:root[data-theme="dark"] .wateret-account-panel .paginate_button.current { color: #071f2b !important; }

/* Finestre modali di Bootstrap. */
:root[data-theme="dark"] .wateret-account-page .modal-content { border: 1px solid rgba(255, 255, 255, .09) !important; color: #e6eef1 !important; background: #0e2a35 !important; }
:root[data-theme="dark"] .wateret-account-page .modal-title { color: #f1f5f9; }
:root[data-theme="dark"] .wateret-account-page .modal-header,
:root[data-theme="dark"] .wateret-account-page .modal-footer { border-color: rgba(255, 255, 255, .09) !important; }
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.7); }
:root[data-theme="dark"] .btn-light { border-color: rgba(255, 255, 255, .14) !important; color: #cbd8de !important; background: rgba(255, 255, 255, .06) !important; }
:root[data-theme="dark"] .form-label,
:root[data-theme="dark"] .form-text,
:root[data-theme="dark"] .form-check-label { color: #9fb3bd !important; }
:root[data-theme="dark"] .wateret-account-page .wateret-account-modal-header { background: linear-gradient(135deg, #10333f, #0c2833) !important; }
:root[data-theme="dark"] .wateret-account-page .form-check { border-color: rgba(255, 255, 255, .10) !important; background: rgba(255, 255, 255, .04) !important; }
:root[data-theme="dark"] .wateret-account-page .form-check-label strong { color: #e6eef1 !important; }
:root[data-theme="dark"] .wateret-account-page .modal-footer,
:root[data-theme="dark"] .wateret-account-page .modal-header { background: transparent !important; }
:root[data-theme="dark"] .wateret-account-page .modal-body { background: transparent !important; }
:root[data-theme="dark"] .wateret-account-page .wateret-account-modal-icon { color: #7fe3d2 !important; background: rgba(99, 230, 209, .14) !important; }
:root[data-theme="dark"] .btn-secondary { border-color: rgba(255, 255, 255, .14) !important; color: #cbd8de !important; background: rgba(255, 255, 255, .08) !important; }

/* Riquadro dei proprietari nei form board (CSS/owner-modal.css). */
:root[data-theme="dark"] .owner-selected-list { border-color: rgba(255, 255, 255, .10) !important; background: rgba(255, 255, 255, .04) !important; }
:root[data-theme="dark"] .owner-selected-list td { color: #cbd8de !important; border-color: rgba(255, 255, 255, .07) !important; }
:root[data-theme="dark"] .owner-field-heading small { color: #7f96a3 !important; }
:root[data-theme="dark"] .owner-add-button { border-color: rgba(99, 230, 209, .22) !important; color: #7fe3d2 !important; background: rgba(99, 230, 209, .10) !important; }
:root[data-theme="dark"] .owner-add-button:hover { border-color: #2f7f74 !important; background: rgba(99, 230, 209, .16) !important; }

/* Salva ed elimina affiancati in fondo al form della board. */
body.wateret-config-page > .big > .aggiungi.elimina { border: 1px solid #fecaca; color: #b91c1c; background: #fef2f2; box-shadow: none; }
/* I due pulsanti stanno accanto solo dove il modulo ha davvero due colonne.
   Sotto i 720px la griglia ne ha una sola: chiedere la seconda ne creava una
   implicita, e tutti i campi ci finivano dentro a meta' larghezza. */
@media (min-width: 721px) {
    body.wateret-config-page > .big > .aggiungi.salva { grid-column: 1; }
    body.wateret-config-page > .big > .aggiungi.elimina { grid-column: 2; }
}
body.wateret-config-page > .big > .aggiungi.elimina:hover { border-color: #fca5a5; background: #fee2e2; }
:root[data-theme="dark"] body.wateret-config-page > .big > .aggiungi.elimina { border-color: rgba(248, 113, 113, .3); color: #fca5a5; background: rgba(248, 113, 113, .12); }
:root[data-theme="dark"] body.wateret-config-page > .big > .aggiungi.elimina:hover { border-color: rgba(248, 113, 113, .5); background: rgba(248, 113, 113, .18); }

/* Modale di conferma eliminazione anche fuori da Bootstrap (form board). */
body.wateret-content .modal:not(.fade).wateret-delete-modal { align-items: center; justify-content: center; }
body.wateret-content .modal:not(.fade).wateret-delete-modal > .modal-content { width: min(100%, 26rem); max-height: none; padding: 0; }
.wateret-delete-actions .btn { cursor: pointer; }
.wateret-delete-icon svg { display: block; }

/* Tema scuro: nel chiaro il titolo e' inchiostro scuro e l'email grigio ferro,
   che su fondo scuro sparivano quasi del tutto. */
:root[data-theme="dark"] .wateret-delete-modal h5 { color: #f1f5f9 !important; }
:root[data-theme="dark"] .wateret-delete-modal h5 + p { color: #9fb3bd !important; }
:root[data-theme="dark"] .wateret-delete-modal h5 + p strong { color: #e6eef1 !important; }
:root[data-theme="dark"] .wateret-delete-eyebrow { color: #fb7185 !important; }
:root[data-theme="dark"] .wateret-delete-icon { border-color: rgba(251, 113, 133, .28) !important; color: #fb7185 !important; background: rgba(225, 29, 72, .16) !important; }
:root[data-theme="dark"] .wateret-delete-error { border-color: rgba(251, 113, 133, .3) !important; color: #fda4af !important; background: rgba(225, 29, 72, .14) !important; }
:root[data-theme="dark"] .wateret-delete-actions .btn-light { border-color: rgba(255, 255, 255, .14) !important; color: #cbd8de !important; background: rgba(255, 255, 255, .06) !important; }
/* I modali fuori dalla pagina account (form board, proprietari) usavano ancora
   la superficie chiara: la regola scura vale per tutti. */
:root[data-theme="dark"] body.wateret-content .modal:not(.fade) > .modal-content {
    border-color: rgba(255, 255, 255, .09) !important;
    color: #e6eef1 !important;
    background: #0e2a35 !important;
}

/* --- Sfondo continuo fra la fascia del tema e il contenuto --------------- */
/* Il gradiente lo stende la colonna principale una volta sola; il documento
   dentro l'iframe resta trasparente e ci si appoggia sopra. */
.wateret-main {
    background:
        radial-gradient(circle at 8% 8%, rgba(99, 230, 209, 0.18), transparent 27rem),
        radial-gradient(circle at 93% 16%, rgba(67, 169, 230, 0.13), transparent 25rem),
        linear-gradient(135deg, #f6fbfb 0%, #edf6f7 48%, #f8fbfc 100%);
}
:root[data-theme="dark"] .wateret-main {
    background:
        radial-gradient(circle at 8% 8%, rgba(99, 230, 209, .10), transparent 27rem),
        radial-gradient(circle at 93% 16%, rgba(67, 169, 230, .09), transparent 25rem),
        linear-gradient(135deg, #061b24 0%, #08252f 48%, #061c25 100%);
}
:root.wateret-incorniciato body.wateret-content,
:root[data-theme="dark"].wateret-incorniciato body.wateret-content { background: transparent; }
/* Il colore di base sta sulla radice (html { background:#edf6f7 }), non sul
   body: e' quello che l'iframe dipingeva, coprendo la colonna sottostante. */
:root[data-theme="dark"] { background: #061b24; }
:root.wateret-incorniciato { background: transparent; }

/* Dettaglio account a schermo ridotto: DataTables impila le colonne nascoste
   in una riga figlia con separatori chiari, che su fondo scuro urlano. */
/* Niente velo di fondo sulla riga figlia: DataTables le da' un colspan che il
   browser impagina a meta' larghezza, e una fascia tronca a meta' riga si
   nota piu' di quanto aiuti. Bastano separatori discreti. */
:root[data-theme="dark"] .wateret-account-table > tbody > tr.child ul.dtr-details > li { border-bottom-color: rgba(255, 255, 255, .07) !important; }
:root[data-theme="dark"] .wateret-account-table span.dtr-title { color: #9fb3bd !important; }
:root[data-theme="dark"] .wateret-account-table span.dtr-data { color: #cbd8de !important; }
/* Il pulsante del menu compare solo in off-canvas e non aveva variante scura:
   restava un riquadro bianco sulla fascia. */
:root[data-theme="dark"] .wateret-menu-button { border: 1px solid rgba(255, 255, 255, .14); color: #cbd8de; background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .wateret-menu-button:hover { border-color: #2f7f74; background: rgba(99, 230, 209, .12); }

/* In chiaro la barra scura stacca da sola. In scuro finiva sullo stesso valore
   del contenuto: va portata piu' in basso, cosi' resta la gerarchia
   barra (piu' scura) -> pagina -> card (piu' chiare). */
:root[data-theme="dark"] .wateret-sidebar {
    border-right: 1px solid rgba(99, 230, 209, .10);
    background: #03121a;
}
:root[data-theme="dark"] .wateret-brand { border-bottom-color: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .wateret-sidebar-account { border-top-color: rgba(255, 255, 255, .06); }

/* Ricerca dal vivo.
   Con i risultati che si aggiornano da soli il pulsante "Cerca" non ha piu' un
   compito: sparisce solo quando il JavaScript e' partito davvero, cosi' senza
   di lui resta il form di prima. Durante l'attesa i risultati sbiadiscono
   appena: si vede che stanno cambiando senza farli saltare. */
.wateret-search.is-live > button,
.wateret-account-search.is-live > button { display: none; }
#risultatiBoard, #risultatiAccount { transition: opacity .18s ease; }
#risultatiBoard.is-in-ricerca, #risultatiAccount.is-in-ricerca { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
    #risultatiBoard, #risultatiAccount { transition: none; }
}
.wateret-account-vuoto { margin: 0; border-top: 1px solid #e2e8f0; padding: 1.25rem 1rem; color: #64748b; text-align: center; font-size: .9rem; }
:root[data-theme="dark"] .wateret-account-vuoto { border-top-color: rgba(255, 255, 255, .07); color: #94a3b8; }

/* --- Scheda profilo (ruolo "user") in tema scuro ------------------------- */
/* Chi non e' admin ne' installatore vede questa scheda al posto della tabella:
   era rimasta chiara, e i testi gia' schiariti dal tema finivano bianchi su
   bianco. Stessa superficie degli altri pannelli. */
:root[data-theme="dark"] .wateret-profile-card {
    border-color: rgba(255, 255, 255, .09);
    background: #0e2a35;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 .75rem 2rem rgba(0, 0, 0, .3);
}
:root[data-theme="dark"] .wateret-profile-head,
:root[data-theme="dark"] .wateret-profile-fields > div { border-bottom-color: rgba(255, 255, 255, .07); }
:root[data-theme="dark"] .wateret-profile-fields dd { color: #e6eef1; }
:root[data-theme="dark"] .wateret-profile-avatar {
    color: #7fe3d2;
    background: linear-gradient(135deg, rgba(99, 230, 209, .16), rgba(56, 189, 248, .1));
    box-shadow: inset 0 0 0 1px rgba(99, 230, 209, .22);
}
/* Le pastiglie valgono anche per il dettaglio del rele', che le usa uguali. */
:root[data-theme="dark"] .wateret-detail-badge { border-color: rgba(255, 255, 255, .14); color: #cbd8de; background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .wateret-detail-badge.is-on { border-color: rgba(52, 211, 153, .35); color: #6ee7b7; background: rgba(16, 185, 129, .16); }

/* --- Impostazioni rele' in tema scuro ------------------------------------ */
/* Anche questa pagina era rimasta chiara: titoli ed etichette, gia' schiariti
   dalle regole generali, finivano bianchi su bianco. */
:root[data-theme="dark"] .wateret-detail-card {
    border-color: rgba(255, 255, 255, .09);
    background: #0e2a35;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 .75rem 2rem rgba(0, 0, 0, .3);
}
:root[data-theme="dark"] .wateret-detail-card dl > div { border-top-color: rgba(255, 255, 255, .07); }
:root[data-theme="dark"] .wateret-detail-card dd { color: #e6eef1; }
:root[data-theme="dark"] .wateret-detail-card a { color: #7fe3d2; }

/* Icone delle schede di lettura.
   Erano tre PNG colorati, rimasti dal sito vecchio e fuori tono con il resto:
   ora sono disegni di linea che prendono il colore dal tema, come l'icona
   delle board. */
.wateret-reading-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin: 1.25rem 0 0;
    place-items: center;
    border-radius: 1rem;
    color: #20bca5;
    background: linear-gradient(135deg, #f0fdfa, #f0f9ff);
    box-shadow: inset 0 0 0 1px rgba(99, 230, 209, .1);
}
.wateret-reading-icon svg {
    width: 1.6rem;
    height: 1.6rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
:root[data-theme="dark"] .wateret-reading-icon { color: #7fe3d2; background: rgba(99, 230, 209, .12); box-shadow: inset 0 0 0 1px rgba(99, 230, 209, .16); }

/* --- Storico: barra dei comandi e ricerca per data ----------------------- */
/* Il pulsante dell'export stava nell'intestazione: su un telefono finiva su
   una riga tutta sua, sopra altre due righe di pulsanti. Ora sta nella stessa
   barra e sui monitor larghi si stacca a destra. */
body.wateret-history-page .wateret-history-toolbar .wateret-export-button { margin-left: auto; }
@media (max-width: 600px) {
    body.wateret-history-page .wateret-history-toolbar .wateret-export-button { margin-left: 0; }
}
/* Icona del calendario: disegno di linea come il resto, al posto del PNG. */
.wateret-history-page .ricerca .vedi .icon_btn {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    color: #94a3b8;
}
.wateret-history-page .ricerca .vedi .icon_btn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Il valore e l'etichetta hanno un colore proprio: senza queste due righe
   restavano scuri sul campo scuro. */
:root[data-theme="dark"] .wateret-history-page .ricerca .vedi-value { color: #e6eef1; }
:root[data-theme="dark"] .wateret-history-page .ricerca .vedi-label { color: #9fb3bd; }
:root[data-theme="dark"] .wateret-history-page .ricerca .vedi .icon_btn { color: #7f96a3; }

/* Il calendario di dist/simplepicker.css e' tutto chiaro: in tema scuro era
   una lastra bianca in mezzo alla pagina. Il file di dist non si tocca. */
:root[data-theme="dark"] .simplepicker-wrapper { background-color: rgba(2, 12, 18, .68); }
:root[data-theme="dark"] .simpilepicker-date-picker {
    color: #cbd8de;
    background-color: #0e2a35;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 1rem 2.5rem rgba(0, 0, 0, .45);
}
:root[data-theme="dark"] .simplepicker-day-header { background-color: #0a3138; }
:root[data-theme="dark"] .simplepicker-date-section { background-color: #0f4a4f; }
:root[data-theme="dark"] .simplepicker-month-switcher .simplepicker-month-and-year { color: #9fb3bd; }
:root[data-theme="dark"] .simplepicker-calender thead th { color: #7f96a3; }
:root[data-theme="dark"] .simplepicker-calender tbody td { color: #cbd8de; }
:root[data-theme="dark"] .simplepicker-calender tbody td:after { background-color: rgba(255, 255, 255, .09); }
:root[data-theme="dark"] .simplepicker-calender tbody td.active,
:root[data-theme="dark"] .simplepicker-calender tbody td:active { color: #071f2b; }
:root[data-theme="dark"] .simplepicker-calender tbody .active:after,
:root[data-theme="dark"] .simplepicker-calender tbody td:active:after { background-color: #20bca5; }
/* Le frecce del mese sono SVG neri incorporati nel dist: si ribaltano. */
:root[data-theme="dark"] .simplepicker-icon-next,
:root[data-theme="dark"] .simplepicker-icon-previous { filter: invert(1); }
:root[data-theme="dark"] .simplepicker-btn { border-color: rgba(99, 230, 209, .35); color: #7fe3d2; }
:root[data-theme="dark"] .simplepicker-btn:hover,
:root[data-theme="dark"] .simplepicker-btn:active { color: #071f2b; background-color: #63e6d1; }

/* La nota che compare dopo una ricerca dice cose che cambiano la lettura del
   grafico (periodo davvero coperto, raggruppamento dei punti): in grigetto
   sottile passava inosservata. */
.wateret-chart-note { color: #475569; font-weight: 600; }
:root[data-theme="dark"] .wateret-chart-note { color: #cbd8de !important; }

/* Il file Excel puo' metterci una quindicina di secondi a formarsi. Senza un
   segno il pulsante sembra rotto: qui gira, si spegne e lo dice. */
body.wateret-history-page .wateret-export-button.is-in-corso {
    position: relative;
    padding-left: 2.1rem;
    opacity: 1;
    cursor: progress;
}
body.wateret-history-page .wateret-export-button.is-in-corso::before {
    position: absolute;
    top: 50%;
    left: .85rem;
    width: .85rem;
    height: .85rem;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    margin-top: -.425rem;
    content: "";
    animation: wateretGiro .7s linear infinite;
}
@keyframes wateretGiro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    body.wateret-history-page .wateret-export-button.is-in-corso::before { animation: none; }
}

/* display:flex batte il display:none che il browser da' a [hidden]: senza
   questa riga le board senza una percentuale valida mostravano comunque
   l'etichetta "Riempimento" con la barra vuota. */
.wateret-board-card footer .wateret-board-fill[hidden] { display: none; }

/* Elenco board dell'amministratore: una tabella sola, larga quanto la pagina.
   Il contenitore riprende la superficie delle schede, cosi' la pagina resta la
   stessa: cornice morbida, ombra bassa, e in scuro lo stesso fondo. */
.wateret-board-tabella {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 1px 2px rgba(7, 31, 43, .04), 0 .75rem 2rem rgba(7, 31, 43, .055);
    backdrop-filter: blur(4px);
}
/* Larghezze fisse in percentuale: la tabella sta dentro il pannello a
   qualunque dimensione, invece di allargarsi quanto le serve e farsi
   tagliare dal bordo arrotondato. Quello che non ci sta va in ellissi.
   Sotto i 760px le colonne spariscono e queste larghezze con loro: la riga
   si piega su due, vedi in fondo alla sezione. */
.wateret-board-tabella table { table-layout: fixed; width: 100%; border-collapse: collapse; font-size: .78rem; }
.wateret-board-tabella th:nth-child(1), .wateret-board-tabella td:nth-child(1) { width: 9%; }
.wateret-board-tabella th:nth-child(2), .wateret-board-tabella td:nth-child(2) { width: 21%; }
.wateret-board-tabella th:nth-child(3), .wateret-board-tabella td:nth-child(3) { width: 15%; }
.wateret-board-tabella th:nth-child(4), .wateret-board-tabella td:nth-child(4) { width: 19%; }
.wateret-board-tabella th:nth-child(5), .wateret-board-tabella td:nth-child(5) { width: 15%; }
.wateret-board-tabella th:nth-child(6), .wateret-board-tabella td:nth-child(6) { width: 8%; }
.wateret-board-tabella th:nth-child(7), .wateret-board-tabella td:nth-child(7) { width: 13%; }
.wateret-board-tabella td { overflow: hidden; text-overflow: ellipsis; }
/* Niente intestazione appiccicata, e non e' una dimenticanza: qui sopra il
   riquadro ha overflow:hidden per ritagliare la tabella sull'angolo
   arrotondato, e questo ne fa un contenitore di scorrimento. Un position:
   sticky si aggrapperebbe a lui invece che alla finestra, e siccome lui e'
   alto quanto il suo contenuto e non scorre mai, resterebbe fermo: c'era, e
   per tutto il tempo non ha fatto niente. Per averla davvero andrebbe
   spostato il ritaglio su un contenitore esterno. */
.wateret-board-tabella thead th {
    border-bottom: 1px solid #e2e8f0;
    padding: .55rem .4rem;
    color: #64748b;
    background: #f8fafc;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.wateret-board-tabella tbody td { border-top: 1px solid #f1f5f9; padding: .45rem .4rem; color: #334155; vertical-align: middle; }
.wateret-board-tabella tbody tr:first-child td { border-top: 0; }
.wateret-board-tabella tbody tr:hover td { background: rgba(99, 230, 209, .07); }
.wateret-board-riga-id { color: #64748b; font-family: ui-monospace, monospace; font-size: .74rem; white-space: nowrap; }
.wateret-board-riga-nome { font-weight: 600; white-space: nowrap; }
.wateret-board-riga-nome a { color: #0f172a; text-decoration: none; }
.wateret-board-riga-nome a:hover { color: #0f766e; text-decoration: underline; }
.wateret-board-riga-modello { color: #64748b; font-size: .72rem; white-space: nowrap; }
.wateret-board-tabella .wateret-last-reading { color: #475569; font-size: .68rem; white-space: nowrap; }
.wateret-board-tabella td:nth-child(5) { overflow: visible; }
.wateret-board-tabella .wateret-board-badge { padding: .12rem .45rem; font-size: .66rem; white-space: nowrap; }
/* Nella tabella l'etichetta la da' l'intestazione della colonna: resta il
   numero, con sotto la barra sottile che si legge a colpo d'occhio. */
.wateret-board-tabella .wateret-board-fill { display: block; min-width: 2.75rem; }
/* Come sulle schede: display batte il display:none di [hidden], quindi le
   board senza una percentuale valida mostravano una barra vuota. */
.wateret-board-tabella .wateret-board-fill[hidden] { display: none; }
.wateret-board-tabella .wateret-board-fill-label { display: none; }
.wateret-board-tabella .wateret-board-fill-value { font-size: .82rem; }
.wateret-board-tabella .wateret-board-fill-track { display: block; width: 2.75rem; margin-top: .15rem; }
.wateret-board-riga-azioni { text-align: right; white-space: nowrap; }
/* Senza la colonna delle azioni le sei rimaste sommerebbero 87%: il 13% che
   avanza va dove serve, cioe' al nome e all'ora dell'ultima lettura. */
.wateret-board-tabella.is-sola-lettura th:nth-child(1), .wateret-board-tabella.is-sola-lettura td:nth-child(1) { width: 10%; }
.wateret-board-tabella.is-sola-lettura th:nth-child(2), .wateret-board-tabella.is-sola-lettura td:nth-child(2) { width: 30%; }
.wateret-board-tabella.is-sola-lettura th:nth-child(3), .wateret-board-tabella.is-sola-lettura td:nth-child(3) { width: 18%; }
.wateret-board-tabella.is-sola-lettura th:nth-child(4), .wateret-board-tabella.is-sola-lettura td:nth-child(4) { width: 22%; }
.wateret-board-tabella.is-sola-lettura th:nth-child(5), .wateret-board-tabella.is-sola-lettura td:nth-child(5) { width: 12%; }
.wateret-board-tabella.is-sola-lettura th:nth-child(6), .wateret-board-tabella.is-sola-lettura td:nth-child(6) { width: 8%; }
.wateret-board-riga-azioni .wateret-secondary { display: inline-block; padding: .28rem .45rem; font-size: .7rem; }
.wateret-solo-lettori { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); white-space: nowrap; }
/* Tema scuro: stessa superficie dei pannelli, filetti appena accennati. */
:root[data-theme="dark"] .wateret-board-tabella {
    border-color: rgba(255, 255, 255, .09);
    background: #0e2a35;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 .75rem 2rem rgba(0, 0, 0, .3);
}
:root[data-theme="dark"] .wateret-board-tabella thead th { border-bottom-color: rgba(255, 255, 255, .09); color: #9fb3bd; background: rgba(255, 255, 255, .03); }
:root[data-theme="dark"] .wateret-board-tabella tbody td { border-top-color: rgba(255, 255, 255, .07); color: #cbd8de; }
:root[data-theme="dark"] .wateret-board-tabella tbody tr:hover td { background: rgba(99, 230, 209, .06); }
:root[data-theme="dark"] .wateret-board-riga-nome a { color: #f1f5f9; }
:root[data-theme="dark"] .wateret-board-riga-nome a:hover { color: #7fe3d2; }
:root[data-theme="dark"] .wateret-board-riga-id,
:root[data-theme="dark"] .wateret-board-riga-modello { color: #7f96a3; }
:root[data-theme="dark"] .wateret-board-tabella .wateret-last-reading { color: #9fb3bd; }

/* Sotto i 760px la tabella non ci sta piu' per intero. Non sparisce tutta in
   una volta pero': perde una colonna alla volta, e quello che perde va dietro
   la freccetta. Se ne vanno in ordine di quanto servono a colpo d'occhio, la
   meno utile per prima:

      oltre 760    ID  NOME  MODELLO  ULTIMA LETTURA  STATO  RIEMP.  Config.
      760 - 641    ID  NOME           ULTIMA LETTURA  STATO  RIEMP.
      640 - 541    ID  NOME                           STATO  RIEMP.
      540 - 441    ID  NOME                                  RIEMP.
      440 in giu'  ID                                        RIEMP.

   L'ultima tappa e' il telefono, dove resta il minimo per riconoscere una
   board e decidere se guardarla, e la freccetta apre tutto il resto:

      >  0123456                                     89 %

      v  0123456                                     89 %
         Serbatoio principale
         SC-SND-10M                            [Offline]
         Ultima lettura: 2024-11-02 09:14
         [            Configura             ]

   Le tappe sono quattro max-width in ordine di larghezza calante: ognuna
   riprende quella prima e sposta un altro pezzo sotto la freccetta. Cosi' fra
   una e l'altra non restano fessure, come succederebbe accoppiando min-width
   e max-width su una larghezza frazionaria.

   Le celle sono sempre quelle, solo spostate nella griglia della riga: niente
   copia da tenere d'accordo con l'originale, e il giro di aggiornamento ogni
   minuto continua a trovare una pastiglia e una percentuale per board. */
@media (max-width: 760px) {
    .wateret-board-tabella table,
    .wateret-board-tabella thead,
    .wateret-board-tabella tbody { display: block; }
    /* L'intestazione resta: finche' le colonne sono piu' di due e' lei a dire
       che cosa sono, ed e' lei a far leggere l'elenco ancora come una tabella.
       Diventa una fascia sopra la griglia, con il fondo sulla riga invece che
       su ogni casella, che fra le caselle ora ci sono i vuoti della griglia. */
    .wateret-board-tabella thead { border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
    .wateret-board-tabella thead th { display: block; border: 0; padding: 0; background: none; }
    :root[data-theme="dark"] .wateret-board-tabella thead { border-bottom-color: rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .03); }
    :root[data-theme="dark"] .wateret-board-tabella thead th { background: none; }
    /* Le colonne sono in misure fisse e non a contenuto perche' intestazione e
       corpo sono due griglie separate: con le tracce "auto" ognuna si
       misurerebbe sul proprio, e le due smetterebbero di incolonnarsi. */
    .wateret-board-tabella thead tr,
    .wateret-board-tabella tbody tr {
        display: grid;
        grid-template-columns: 6.5rem minmax(0, 1fr) 7.2rem 6.5rem 3.6rem;
        align-items: center;
        gap: .25rem .6rem;
        padding: .35rem .7rem;
    }
    .wateret-board-tabella thead tr { padding-top: .5rem; padding-bottom: .5rem; }
    .wateret-board-tabella tbody tr { border-top: 1px solid #f1f5f9; }
    /* display:grid batte il display:none che il browser da' a [hidden]: senza
       questa riga il filtro degli stati nasconderebbe le righe senza
       nasconderle. */
    .wateret-board-tabella tbody tr[hidden] { display: none; }
    .wateret-board-tabella tbody tr:first-child { border-top: 0; }
    .wateret-board-tabella tbody tr.is-aperta { background: rgba(99, 230, 209, .05); }
    .wateret-board-tabella tbody td { display: block; min-width: 0; border: 0; padding: 0; }
    /* Le percentuali erano larghezze di colonna, e le colonne le fa la griglia.
       Il selettore e' lungo quanto serve a pesare piu' di quelle della variante
       in sola lettura, che altrimenti resterebbero attaccate alle celle e le
       stringerebbero dentro la loro casella. */
    .wateret-board-tabelle .wateret-board-tabella tbody td:nth-child(n),
    .wateret-board-tabelle .wateret-board-tabella thead th:nth-child(n) { width: auto; }
    /* La cella dell'identificativo tiene anche la freccetta ed e' tutta zona da
       toccare: il bersaglio non e' il triangolino di venti pixel. */
    .wateret-board-tabella tbody td.wateret-board-riga-id { display: flex; align-items: center; gap: .45rem; color: #334155; font-size: .8rem; cursor: pointer; }
    :root[data-theme="dark"] .wateret-board-tabella tbody td.wateret-board-riga-id { color: #cbd8de; }
    /* Prima tappa: fuori il modello, che si sceglie anche dal filtro, e il
       comando, che e' anche nella pagina della board. */
    .wateret-board-tabella thead th:nth-child(1),
    .wateret-board-tabella tbody td:nth-child(1) { grid-area: 1 / 1; }
    .wateret-board-tabella thead th:nth-child(2),
    .wateret-board-tabella tbody td:nth-child(2) { grid-area: 1 / 2; }
    .wateret-board-tabella thead th:nth-child(4),
    .wateret-board-tabella tbody td:nth-child(4) { grid-area: 1 / 3; }
    .wateret-board-tabella thead th:nth-child(5),
    .wateret-board-tabella tbody td:nth-child(5) { grid-area: 1 / 4; }
    .wateret-board-tabella thead th:nth-child(6),
    .wateret-board-tabella tbody td:nth-child(6) { grid-area: 1 / 5; justify-self: end; text-align: right; }
    .wateret-board-tabella thead th:nth-child(3),
    .wateret-board-tabella thead th:nth-child(7),
    .wateret-board-tabella tbody td:nth-child(3),
    .wateret-board-tabella tbody td:nth-child(7) { display: none; }
    .wateret-board-tabella tbody tr.is-aperta td:nth-child(3) { display: block; grid-area: 2 / 1 / auto / 4; padding-left: 1.8rem; }
    /* Senza la sua colonna una sigla o una data da sole non dicono di che cosa
       siano: la dicitura torna davanti. Sta nel foglio di stile e non nel testo
       della cella perche' quel testo lo riscrive l'aggiornamento ogni minuto,
       e dentro la cella sparirebbe al primo giro. */
    .wateret-board-tabella tbody tr.is-aperta td:nth-child(3)::before { color: #94a3b8; content: "Modello: "; }
    :root[data-theme="dark"] .wateret-board-tabella tbody tr.is-aperta td:nth-child(3)::before { color: #7f96a3; }
    /* Il comando su una riga sua. Qui sta a destra e largo quanto la sua
       scritta: la riga sopra e' ancora una riga di tabella, e un pulsante
       lungo mezzo schermo la sovrasterebbe. Sul telefono, dove il pannello
       e' tutto quello che c'e', si allarga (vedi la terza tappa).
       E torna in flex, che la regola della tabella gli aveva tolto: da blocco
       in linea i 44px del dito cadevano tutti sotto il testo invece che
       meta' e meta'. */
    .wateret-board-tabella tbody tr.is-aperta td:nth-child(7) { display: block; grid-area: 2 / 4 / auto / -1; justify-self: end; padding: 0; }
    .wateret-board-tabella tbody tr.is-aperta .wateret-board-riga-azioni .wateret-secondary {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: .45rem .9rem;
        font-size: .78rem;
    }
    /* Il fondo del passaggio del mouse sta sulla riga: sulle celle lascerebbe
       scoperti i vuoti fra una casella e l'altra. */
    .wateret-board-tabella tbody tr:hover { background: rgba(99, 230, 209, .07); }
    .wateret-board-tabella tbody tr:hover td { background: none; }
    :root[data-theme="dark"] .wateret-board-tabella tbody tr { border-top-color: rgba(255, 255, 255, .07); }
    :root[data-theme="dark"] .wateret-board-tabella tbody tr.is-aperta { background: rgba(99, 230, 209, .05); }
    :root[data-theme="dark"] .wateret-board-tabella tbody tr:hover { background: rgba(99, 230, 209, .06); }
}
/* Seconda tappa: scende anche l'ora dell'ultima lettura. Restano le quattro
   che rispondono alle due domande di sempre - quale board, e come sta. */
@media (max-width: 640px) {
    .wateret-board-tabella thead tr,
    .wateret-board-tabella tbody tr { grid-template-columns: 6.5rem minmax(0, 1fr) 6.5rem 3.6rem; }
    .wateret-board-tabella thead th:nth-child(4),
    .wateret-board-tabella tbody td:nth-child(4) { display: none; }
    .wateret-board-tabella thead th:nth-child(5),
    .wateret-board-tabella tbody td:nth-child(5) { grid-area: 1 / 3; }
    .wateret-board-tabella thead th:nth-child(6),
    .wateret-board-tabella tbody td:nth-child(6) { grid-area: 1 / 4; }
    .wateret-board-tabella tbody tr.is-aperta td:nth-child(3) { grid-area: 2 / 1 / auto / 3; }
    .wateret-board-tabella tbody tr.is-aperta td:nth-child(4) { display: block; grid-area: 3 / 1 / auto / -1; padding-left: 1.8rem; }
    .wateret-board-tabella tbody tr.is-aperta td:nth-child(4)::before { color: #94a3b8; content: "Ultima lettura: "; }
    :root[data-theme="dark"] .wateret-board-tabella tbody tr.is-aperta td:nth-child(4)::before { color: #7f96a3; }
    .wateret-board-tabella tbody tr.is-aperta td:nth-child(7) { grid-area: 2 / 3 / auto / -1; }
}
/* Terza tappa: scende la pastiglia, il nome no. Vanno in quest'ordine perche
   rispondono a due domande diverse: la pastiglia dice come sta una board che
   hai gia' riconosciuto, il nome dice quale board e'. Senza nome un elenco di
   soli stati non si sa di chi parli, mentre un nome senza pastiglia resta un
   elenco che si legge - e lo stato e' a un tocco di freccetta.

   La colonna del riempimento si allarga a 6.5rem: nel pannello ci finiscono
   sotto la pastiglia e il comando, e sono piu' larghi di una percentuale. */
@media (max-width: 540px) {
    .wateret-board-tabella thead tr,
    .wateret-board-tabella tbody tr { grid-template-columns: 6.5rem minmax(0, 1fr) 6.5rem; }
    .wateret-board-tabella thead th:nth-child(5),
    .wateret-board-tabella tbody td:nth-child(5) { display: none; }
    .wateret-board-tabella thead th:nth-child(6),
    .wateret-board-tabella tbody td:nth-child(6) { grid-area: 1 / 3; }
    .wateret-board-tabella tbody tr.is-aperta td:nth-child(3) { grid-area: 2 / 1 / auto / 3; }
    .wateret-board-tabella tbody tr.is-aperta td:nth-child(5) { display: block; grid-area: 2 / 3; justify-self: end; }
    .wateret-board-tabella tbody tr.is-aperta td:nth-child(4) { grid-area: 3 / 1 / auto / 3; }
    .wateret-board-tabella tbody tr.is-aperta td:nth-child(7) { grid-area: 3 / 3; }
}
/* Quarta tappa, il telefono: scende anche il nome e restano identificativo e
   riempimento. Due colonne non sono piu' una tabella, e l'intestazione non ha
   piu' niente da intestare. */
@media (max-width: 440px) {
    .wateret-board-tabella thead { display: none; }
    .wateret-board-tabella tbody tr { grid-template-columns: minmax(0, 1fr) auto; }
    .wateret-board-tabella tbody td:nth-child(2),
    .wateret-board-tabella tbody td:nth-child(5) { display: none; }
    .wateret-board-tabella tbody td:nth-child(6) { grid-area: 1 / 2; }
    /* Il nome da solo, che e' il titolo e si prende tutta la riga invece di
       farsi tagliare dalla pastiglia; sotto modello e pastiglia, e li' la sigla
       ha la pastiglia accanto a dire di che si parla: la dicitura davanti non
       serve piu'. */
    .wateret-board-tabella tbody tr.is-aperta td:nth-child(2) { display: block; grid-area: 2 / 1 / auto / -1; padding-left: 1.8rem; }
    .wateret-board-tabella tbody tr.is-aperta td:nth-child(3) { grid-area: 3 / 1; }
    .wateret-board-tabella tbody tr.is-aperta td:nth-child(3)::before { content: none; }
    .wateret-board-tabella tbody tr.is-aperta td:nth-child(5) { display: block; grid-area: 3 / 2; justify-self: end; }
    .wateret-board-tabella tbody tr.is-aperta td:nth-child(4) { grid-area: 4 / 1 / auto / -1; }
    /* Qui il pannello e' tutto quello che c'e' e il comando si prende la
       riga intera, allineato al rientro delle altre. */
    .wateret-board-tabella tbody tr.is-aperta td:nth-child(7) { grid-area: 5 / 1 / auto / -1; justify-self: stretch; padding-left: 1.8rem; }
}
/* Con il dito la riga chiusa e' il bersaglio, e trentaquattro pixel sono
   pochi: si apre la board sbagliata. Cresce solo su touch, cosi' col mouse
   l'elenco resta fitto. */
@media (max-width: 760px) and (pointer: coarse) {
    .wateret-board-tabella tbody td.wateret-board-riga-id { min-height: 2.1rem; }
}
/* La freccetta non esiste dove la tabella e' tutta li': non c'e' niente da
   aprire, e cosi' non finisce nemmeno fra le fermate del tabulatore. */
.wateret-board-apri { display: none; }
@media (max-width: 760px) {
    .wateret-board-apri {
        display: grid;
        width: 1.35rem;
        height: 1.35rem;
        flex: 0 0 1.35rem;
        place-items: center;
        border: 0;
        border-radius: .35rem;
        padding: 0;
        color: #94a3b8;
        background: none;
        cursor: pointer;
    }
    .wateret-board-apri svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
    .wateret-board-apri[aria-expanded="true"] svg { transform: rotate(90deg); }
    .wateret-board-apri:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99, 230, 209, .35); }
    :root[data-theme="dark"] .wateret-board-apri { color: #7f96a3; }
}

/* Tabella o schede: due comandi accanto alla ricerca.
   Hanno una cornice loro, staccata da quella del campo di ricerca, perche' non
   filtrano niente: la ricerca dice quali board si vedono, questi due soltanto
   in che forma. Metterli dentro la stessa barra li avrebbe fatti leggere come
   un terzo filtro.

   Sugli schermi stretti la barra dei filtri si impila e il gruppo si allarga
   per tutta la riga: li' i due comandi stanno al centro, perche' appesi a
   sinistra con mezza riga vuota accanto sembravano dimenticati. Dove la barra
   e' una riga sola la cornice veste i due comandi e centrare non sposta
   niente. */
.wateret-vista {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    padding: .2rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.wateret-vista-scelta {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    border-radius: .55rem;
    color: #64748b;
    text-decoration: none;
    transition: color .2s, background .2s;
}
.wateret-vista-scelta svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wateret-vista-scelta:hover { color: #0f766e; background: #f0fdfa; }
.wateret-vista-scelta.is-attiva { color: #0f766e; background: #e6fbf6; box-shadow: inset 0 0 0 1px rgba(32, 188, 165, .35); }
.wateret-vista-scelta:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99, 230, 209, .35); }
:root[data-theme="dark"] .wateret-vista { border-color: rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .04); box-shadow: none; }
:root[data-theme="dark"] .wateret-vista-scelta { color: #9fb3bd; }
:root[data-theme="dark"] .wateret-vista-scelta:hover { color: #7fe3d2; background: rgba(99, 230, 209, .1); }
:root[data-theme="dark"] .wateret-vista-scelta.is-attiva { color: #7fe3d2; background: rgba(99, 230, 209, .14); box-shadow: inset 0 0 0 1px rgba(99, 230, 209, .3); }
/* Su touch valgono i 44px come per ogni altro comando. */
@media (pointer: coarse) {
    .wateret-vista-scelta { width: 2.75rem; height: 2.75rem; }
}

/* Aiuto, guide di installazione e FAQ. */
.wateret-help-page { overflow: auto; }
.wateret-help { width: min(1080px, calc(100% - 2rem)); margin: 0 auto; padding: 1.75rem 0 3rem; }
.wateret-help-section { margin-top: 1.25rem; border: 1px solid rgba(255,255,255,.8); border-radius: 1rem; padding: 1.35rem; background: rgba(255,255,255,.9); box-shadow: 0 1px 2px rgba(7,31,43,.04), 0 .75rem 2rem rgba(7,31,43,.055); }
.wateret-help-intro { margin-top: 1rem; border-left: 3px solid #20ad9e; border-radius: 0 .8rem .8rem 0; padding: 1rem 1.1rem; color: #4f6b74; background: rgba(236,253,250,.82); }
.wateret-help-intro strong { color: #087f73; font-size: .72rem; letter-spacing: .12em; }
.wateret-help-intro p { margin: .35rem 0 0; font-size: .84rem; line-height: 1.55; }
.wateret-help-index { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 1rem; }
.wateret-help-index strong { margin-right: .2rem; color: #46636c; font-size: .76rem; }
.wateret-help-index a { border: 1px solid #d8e7e8; border-radius: 999px; padding: .42rem .7rem; color: #167f75; background: rgba(255,255,255,.8); font-size: .7rem; font-weight: 650; text-decoration: none; }
.wateret-help-index a:hover { border-color: #63d8c9; background: #effcf9; }
.wateret-help-heading { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.wateret-help-heading h2 { margin: 0; color: #102f3a; font-size: 1.1rem; }
.wateret-help-heading h2 span { color: #66808a; font-size: .85rem; font-weight: 500; }
.wateret-help-heading p { margin: .25rem 0 0; color: #6a818a; font-size: .82rem; }
.wateret-help-heading-icon { display: grid; width: 2.4rem; height: 2.4rem; flex: 0 0 2.4rem; place-items: center; border-radius: 50%; color: #087f73; background: #dcf7f2; font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700; }
.wateret-install-guides { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.wateret-install-card { border: 1px solid #dce8eb; border-radius: .9rem; padding: 1.1rem; background: #f8fbfc; }
.wateret-install-card h3 { margin: .45rem 0 .8rem; color: #173d48; font-size: 1rem; }
.wateret-install-card ol { margin: 0; padding-left: 1.25rem; color: #526d76; font-size: .85rem; line-height: 1.65; }
.wateret-platform { color: #0b8e80; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wateret-faq-list { display: grid; gap: .6rem; }
.wateret-faq-search { position: relative; display: flex; align-items: center; margin-bottom: .35rem; }
.wateret-faq-search svg { position: absolute; left: .9rem; width: 1.05rem; height: 1.05rem; fill: none; stroke: #668089; stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.wateret-faq-search input { width: 100%; border: 1px solid #cfdee1; border-radius: .75rem; padding: .78rem 2.7rem .78rem 2.65rem; color: #173d48; background: #fff; font: inherit; font-size: .86rem; box-sizing: border-box; }
.wateret-faq-search input:focus { border-color: #20ad9e; outline: 3px solid rgba(32,173,158,.12); }
.wateret-faq-search button { position: absolute; right: .55rem; display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 0; border-radius: 50%; color: #617b83; background: #eef4f5; font-size: 1.05rem; cursor: pointer; }
.wateret-faq-search button[hidden] { display: none; }
.wateret-faq-search-status { min-height: 1.15rem; margin: 0 0 .55rem; color: #5e7880; font-size: .72rem; }
.wateret-faq-search-status.is-empty { color: #a34751; }
.wateret-faq-group { scroll-margin-top: 1rem; }
.wateret-faq-group[hidden],.wateret-faq-item[hidden] { display: none; }
.wateret-faq-group + .wateret-faq-group { margin-top: 1.35rem; }
.wateret-faq-group > h3 { margin: 0 0 .7rem; color: #31535d; font-size: .82rem; font-weight: 700; letter-spacing: .015em; }
.wateret-faq-item { overflow: hidden; border: 1px solid #dbe7e9; border-radius: .8rem; background: #fbfdfd; }
.wateret-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; color: #173d48; font-size: .9rem; font-weight: 650; cursor: pointer; list-style: none; }
.wateret-faq-item summary::-webkit-details-marker { display: none; }
.wateret-faq-item summary span { color: #168f82; font-size: 1.15rem; transition: transform .18s ease; }
.wateret-faq-item[open] summary span { transform: rotate(180deg); }
.wateret-faq-item > .wateret-faq-answer { border-top: 1px solid #e5edef; padding: 1rem; color: #58717a; font-size: .86rem; line-height: 1.65; }
.wateret-faq-answer p { margin: 0; }
.wateret-faq-answer p + p,.wateret-faq-answer ul + p,.wateret-faq-answer p + ul { margin-top: .75rem; }
.wateret-faq-answer ul { margin: .7rem 0 0; padding-left: 1.25rem; }
.wateret-faq-answer li + li { margin-top: .28rem; }
.wateret-faq-answer .wateret-faq-note { border-left: 3px solid #55b9ad; border-radius: 0 .55rem .55rem 0; padding: .65rem .75rem; color: #41636c; background: #edf9f7; }
.wateret-faq-item footer { display: flex; justify-content: flex-end; gap: .5rem; border-top: 1px solid #e5edef; padding: .65rem 1rem; }
.wateret-faq-item footer button { border: 0; border-radius: .55rem; padding: .45rem .7rem; font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; }
.wateret-faq-edit { color: #087f73; background: #e4f7f4; }
.wateret-faq-delete { color: #b33d49; background: #fff0f1; }
.wateret-help-empty,.wateret-help-error { margin: 0; border-radius: .75rem; padding: 1rem; color: #657d85; background: #f4f8f9; font-size: .85rem; }
.wateret-help-error { color: #a43d49; background: #fff1f2; }
.wateret-faq-admin form { display: grid; gap: .55rem; }
.wateret-faq-admin label { color: #284b55; font-size: .78rem; font-weight: 650; }
.wateret-faq-admin input,.wateret-faq-admin textarea,.wateret-faq-admin select { width: 100%; border: 1px solid #cfdee1; border-radius: .7rem; padding: .75rem .85rem; color: #173d48; background: #fff; font: inherit; font-size: .88rem; box-sizing: border-box; }
.wateret-faq-admin textarea { resize: vertical; }
.wateret-faq-admin input:focus,.wateret-faq-admin textarea:focus,.wateret-faq-admin select:focus { border-color: #20ad9e; outline: 3px solid rgba(32,173,158,.12); }
.wateret-faq-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .45rem; }
.wateret-faq-form-footer > div { display: flex; gap: .55rem; }
.wateret-faq-form-footer p { margin: 0; color: #168f82; font-size: .8rem; }
.wateret-faq-form-footer p.is-error { color: #bd3f4c; }
.wateret-reference-table { overflow: hidden; border: 1px solid #dce7e9; border-radius: .8rem; }
.wateret-reference-table > div { display: grid; grid-template-columns: minmax(150px,.8fr) minmax(0,1.2fr); }
.wateret-reference-table > div + div { border-top: 1px solid #e3ecee; }
.wateret-reference-table span,.wateret-reference-table strong { padding: .72rem .85rem; font-size: .78rem; }
.wateret-reference-table span { color: #637c84; background: #f4f8f9; }
.wateret-reference-table strong { overflow-wrap: anywhere; color: #284b55; background: #fff; font-weight: 650; }
.wateret-safety-note { margin: .85rem 0 0; border-radius: .65rem; padding: .75rem .85rem; color: #865a1b; background: #fff8e8; font-size: .76rem; line-height: 1.5; }
:root[data-theme="dark"] .wateret-help-section { border-color: rgba(255,255,255,.09); background: #0e2a35; box-shadow: 0 .75rem 2rem rgba(0,0,0,.25); }
:root[data-theme="dark"] .wateret-help-intro { color: #abc0c6; background: rgba(30,105,98,.16); }
:root[data-theme="dark"] .wateret-help-index strong,:root[data-theme="dark"] .wateret-faq-group > h3 { color: #adc2c8; }
:root[data-theme="dark"] .wateret-help-index a { border-color: rgba(255,255,255,.1); color: #79dacc; background: rgba(255,255,255,.035); }
:root[data-theme="dark"] .wateret-faq-search input { border-color: rgba(255,255,255,.13); color: #edf7f8; background: #09212b; }
:root[data-theme="dark"] .wateret-faq-search svg { stroke: #9cb3ba; }
:root[data-theme="dark"] .wateret-faq-search button { color: #bed0d5; background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .wateret-help-heading h2,:root[data-theme="dark"] .wateret-install-card h3,:root[data-theme="dark"] .wateret-faq-item summary { color: #edf7f8; }
:root[data-theme="dark"] .wateret-help-heading h2 span,:root[data-theme="dark"] .wateret-help-heading p,:root[data-theme="dark"] .wateret-install-card ol,:root[data-theme="dark"] .wateret-faq-item > .wateret-faq-answer { color: #a7bcc3; }
:root[data-theme="dark"] .wateret-install-card,:root[data-theme="dark"] .wateret-faq-item { border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.035); }
:root[data-theme="dark"] .wateret-faq-item > .wateret-faq-answer,:root[data-theme="dark"] .wateret-faq-item footer { border-top-color: rgba(255,255,255,.08); }
:root[data-theme="dark"] .wateret-faq-answer .wateret-faq-note { color: #b8ced3; background: rgba(46,151,139,.13); }
:root[data-theme="dark"] .wateret-faq-admin label { color: #c6d7dc; }
:root[data-theme="dark"] .wateret-faq-admin input,:root[data-theme="dark"] .wateret-faq-admin textarea,:root[data-theme="dark"] .wateret-faq-admin select { border-color: rgba(255,255,255,.13); color: #edf7f8; background: #09212b; }
:root[data-theme="dark"] .wateret-reference-table,:root[data-theme="dark"] .wateret-reference-table > div + div { border-color: rgba(255,255,255,.08); }
:root[data-theme="dark"] .wateret-reference-table span { color: #a8bdc3; background: rgba(255,255,255,.035); }
:root[data-theme="dark"] .wateret-reference-table strong { color: #e8f3f5; background: rgba(0,0,0,.08); }
:root[data-theme="dark"] .wateret-safety-note { color: #e5c98f; background: rgba(156,105,27,.16); }
@media (max-width: 700px) { .wateret-help { width: min(100% - 1rem,1080px); padding-top: 1rem; } .wateret-help-section { padding: 1rem; } .wateret-install-guides { grid-template-columns: 1fr; } .wateret-faq-form-footer { align-items: stretch; flex-direction: column; } .wateret-faq-form-footer > div { flex-direction: column-reverse; } .wateret-faq-form-footer button { width: 100%; } .wateret-reference-table > div { grid-template-columns: 1fr; } .wateret-reference-table strong { padding-top: .15rem; } }