/* ─── TEMA ──────────────────────────────────────────────────────────────────── */
:root {
    --bg: #0f172a;
    --card: #1e293b;
    --border: #334155;
    --text: #f1f5f9;
    --hint: #94a3b8;
    --hover: #243149;
    --primary: #FFE600;
    --btn-text: #0f172a;
}

/* ─── BASE ─────────────────────────────────────────────────────────────────── */
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* ─── LOGIN ────────────────────────────────────────────────────────────────── */
#login-form.container {
    max-width: 380px;
    margin: 120px auto;
    background: var(--card);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
#login-form label { color: var(--hint); }

/* ─── SYNOPTIC HEADER ──────────────────────────────────────────────────────── */
.synoptic-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.synoptic-logo {
    height: 36px;
}
.header-actions {
    display: flex;
    gap: 8px;
}

/* ─── TOPBAR ───────────────────────────────────────────────────────────────── */
.topbar {
    display: flex;
    gap: 14px;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.stats { display: flex; gap: 10px; flex-wrap: wrap; }

.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 16px;
    min-width: 90px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.stat-card .n { font-size: 22px; font-weight: 700; line-height: 1; color: var(--text); }
.stat-card .l { font-size: 11px; opacity: .75; margin-top: 3px; text-transform: uppercase; letter-spacing: .5px; color: var(--hint); }
.stat-card.ok    { border-left: 5px solid #2ecc71; }
.stat-card.alarm { border-left: 5px solid #e67e22; }
.stat-card.warn  { border-left: 5px solid #f1c40f; }
.stat-card.err   { border-left: 5px solid #e74c3c; }
.stat-card.off   { border-left: 5px solid #95a5a6; }

.controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.controls #search { width: 220px; }
.controls #filter { width: 160px; }

.refresh-countdown {
    font-size: 12px;
    color: var(--hint);
    white-space: nowrap;
}

/* ─── CARD GRID ────────────────────────────────────────────────────────────── */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    padding: 20px;
}

/* ─── SITE CARD ────────────────────────────────────────────────────────────── */
.site-card {
    background: var(--card);
    border-radius: 14px;
    border: 1px solid var(--border);
    border-left: 5px solid #2ecc71;
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
    overflow: hidden;
    transition: transform .18s, box-shadow .18s, opacity .3s;
    display: flex;
    flex-direction: column;
}
.site-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.site-card.status-alarm { border-left-color: #e67e22; }
.site-card.status-warn  { border-left-color: #f1c40f; }
.site-card.status-err   { border-left-color: #e74c3c; }
.site-card.status-off   { border-left-color: #95a5a6; opacity: .85; }

.site-card.card-removing {
    transform: scale(.95);
    opacity: 0;
}

/* Inattivi: grigi, dimmed */
.site-card.card-inactive {
    border-left-color: #64748b !important;
    opacity: .55;
    filter: grayscale(.6);
}
.site-card.card-inactive:hover {
    opacity: .8;
    filter: grayscale(.3);
}

/* Badge RX online / offline */
.rx-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.rx-online {
    background: rgba(46,204,113,.18);
    color: #4ade80;
}
.rx-offline {
    background: rgba(231,76,60,.2);
    color: #f87171;
    animation: pulse-rx 1.6s ease-in-out infinite;
}
.rx-unknown {
    background: rgba(148,163,184,.18);
    color: var(--hint);
}
@keyframes pulse-rx {
    0%, 100% { background: rgba(231,76,60,.2); }
    50%       { background: rgba(231,76,60,.4); }
}

/* clickable area */
.card-main {
    padding: 16px 16px 10px;
    cursor: pointer;
    flex: 1;
}
.card-main:hover .card-name { color: var(--primary); }

/* head */
.card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.card-name {
    font-weight: 700;
    font-size: 15px;
    flex: 1;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .15s;
}
.badge-inactive {
    font-size: 10px;
    background: var(--bg);
    color: var(--hint);
    border-radius: 20px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* stato pills */
.card-stato { margin-bottom: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.stato-pill {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}
.stato-pill.ok    { background: rgba(46,204,113,.16);  color: #4ade80; }
.stato-pill.alarm { background: rgba(230,126,34,.2);   color: #fb923c; }
.stato-pill.warn  { background: rgba(241,196,15,.22);  color: #fbbf24; }
.stato-pill.err   { background: rgba(231,76,60,.18);   color: #f87171; }
.stato-pill.check { background: rgba(52,152,219,.18);  color: #60a5fa; }
.stato-pill.time  { background: rgba(255,255,255,.06); color: var(--hint); font-weight:400; }
.stato-pill.off   { background: rgba(255,255,255,.06); color: var(--hint); font-weight:400; }

/* meta */
.card-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: var(--hint);
}
.card-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-time { font-style: italic; }

/* action buttons (top-right icons) */
.card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 6px 10px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}
.btn-icon {
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    font-size: 14px;
    cursor: pointer;
    color: var(--text);
    transition: background .15s, border-color .15s;
    display: flex; align-items: center; justify-content: center;
}
.btn-icon:hover   { background: rgba(66,133,244,.15); border-color: #4285f4; }
.btn-icon.active  { background: rgba(243,156,18,.18); border-color: #f39c12; }
.btn-icon:disabled { opacity: .5; cursor: not-allowed; }

/* ─── EDIT PANEL ───────────────────────────────────────────────────────────── */
.card-edit {
    display: none;
    padding: 14px 16px;
    background: var(--bg);
    border-top: 2px dashed var(--border);
}
.edit-row {
    margin-bottom: 8px;
}
.edit-row label {
    font-size: 11px;
    font-weight: 600;
    color: var(--hint);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 2px;
    display: block;
}
.edit-buttons {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* ─── LED INDICATOR ────────────────────────────────────────────────────────── */
.led {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}
.led-ok    { background: #2ecc71; box-shadow: 0 0 0 2px rgba(46,204,113,.3); }
.led-alarm {
    background: #e67e22;
    box-shadow: 0 0 0 2px rgba(230,126,34,.3);
    animation: pulse-alarm 1.5s ease-in-out infinite;
}
.led-warn {
    background: #f1c40f;
    box-shadow: 0 0 0 2px rgba(241,196,15,.3);
    animation: pulse-warn 1.8s ease-in-out infinite;
}
.led-err  {
    background: #e74c3c;
    box-shadow: 0 0 0 2px rgba(231,76,60,.3);
    animation: pulse-err 1.2s ease-in-out infinite;
}
.led-off  { background: #64748b; }

@keyframes pulse-alarm {
    0%, 100% { box-shadow: 0 0 0 2px rgba(230,126,34,.3); }
    50%       { box-shadow: 0 0 0 6px rgba(230,126,34,.5); }
}
@keyframes pulse-warn {
    0%, 100% { box-shadow: 0 0 0 2px rgba(241,196,15,.3); }
    50%       { box-shadow: 0 0 0 6px rgba(241,196,15,.48); }
}
@keyframes pulse-err {
    0%, 100% { box-shadow: 0 0 0 2px rgba(231,76,60,.3); }
    50%       { box-shadow: 0 0 0 7px rgba(231,76,60,.5); }
}

/* ─── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .card-grid { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
    .topbar { flex-direction: column; align-items: flex-start; }
    .controls #search { width: 100%; }
    .controls #filter { width: 100%; }
}

/* ─── CANTIERE PAGE (styles usati da cantiere.html) ────────────────────────── */
.header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.header-titles h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}
.header-sub {
    font-size: 12px;
    color: var(--hint);
}

.toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 20px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}

.custom-control { pointer-events: none; }
.custom-control-input { pointer-events: auto; }
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #2ecc71;
    border-color: #2ecc71;
}

.table-container  { padding: 20px; }
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--card);
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.table { width: 100%; margin-bottom: 0; font-size: 13px; color: var(--text); }
#jsonTable thead th {
    position: sticky;
    top: 0;
    background: var(--bg);
    color: var(--hint);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
    z-index: 1;
}
.table th, .table td {
    text-align: center;
    vertical-align: middle;
    padding: 9px 10px;
    border-color: var(--border);
}
#jsonTable tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
#jsonTable tbody tr:hover { background: var(--hover); }

/* Righe con stato — accento a sinistra invece di sfondo pieno, coerente con le site-card */
#jsonTable tbody tr.offline,
#jsonTable tbody tr.sick { box-shadow: inset 4px 0 0 0 var(--row-accent); }
#jsonTable tbody tr.offline { --row-accent: #e74c3c; background: rgba(231,76,60,.08); }
#jsonTable tbody tr.sick    { --row-accent: #f1c40f; background: rgba(241,196,15,.1); }
#jsonTable tbody tr.offline:hover { background: rgba(231,76,60,.14); }
#jsonTable tbody tr.sick:hover    { background: rgba(241,196,15,.16); }

/* Segnala visivamente quali celle sono modificabili inline */
#jsonTable td[contenteditable="true"] {
    cursor: text;
    border-bottom: 1px dashed var(--border);
    transition: background .15s, box-shadow .15s;
}
#jsonTable td[contenteditable="true"]:hover  { background: rgba(255,230,0,.08); }
#jsonTable td[contenteditable="true"]:focus  {
    outline: none;
    background: var(--card);
    box-shadow: inset 0 0 0 2px #4285f4;
}
#jsonTable td:first-child { font-weight: 700; color: var(--text); }

.actions-cell { display: flex; gap: 4px; justify-content: center; white-space: nowrap; }
.actions-cell .btn { padding: 3px 8px; }

/* ─── RESPONSIVE: tabella → schede impilate sotto i 760px ──────────────────── */
@media (max-width: 760px) {
    .synoptic-header { flex-wrap: wrap; gap: 8px; }
    .toolbar { padding: 10px 14px; }
    .toolbar .ml-auto { margin-left: 0; width: 100%; }

    .table-responsive { border-radius: 10px; overflow: visible; }
    #jsonTable thead { display: none; }
    #jsonTable, #jsonTable tbody, #jsonTable tr, #jsonTable td { display: block; width: 100%; }
    #jsonTable tbody tr {
        border: 1px solid var(--border);
        border-radius: 10px;
        margin: 10px;
        padding: 6px 0;
        box-shadow: 0 2px 8px rgba(0,0,0,.25);
    }
    #jsonTable tbody tr.offline,
    #jsonTable tbody tr.sick { box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 4px 0 0 0 var(--row-accent); }
    #jsonTable td {
        text-align: right;
        padding: 7px 12px;
        border: none;
        border-bottom: 1px solid var(--border);
    }
    #jsonTable td:last-child { border-bottom: none; }
    #jsonTable td::before {
        content: attr(data-label);
        float: left;
        font-size: 11px;
        font-weight: 600;
        color: var(--hint);
        text-transform: uppercase;
        letter-spacing: .3px;
    }
    #jsonTable td:first-child {
        text-align: left;
        font-size: 15px;
        background: var(--bg);
        border-radius: 10px 10px 0 0;
    }
    #jsonTable td:first-child::before { display: none; }
    .actions-cell { justify-content: flex-end; }
}

/* ─── BOOTSTRAP — override mirati (solo le classi usate da index/cantiere/admin) ─── */
.btn-primary { background-color: var(--primary); border-color: var(--primary); color: var(--btn-text); }
.btn-primary:hover, .btn-primary:focus { background-color: #e6ce00; border-color: #e6ce00; color: var(--btn-text); }
.btn-secondary { background-color: var(--card); border-color: var(--border); color: var(--text); }
.btn-success { background-color: #2ecc71; border-color: #2ecc71; }
.btn-outline-secondary { color: var(--text); border-color: var(--border); }
.btn-outline-secondary:hover { background-color: var(--hover); color: var(--text); }
.btn-outline-danger { color: #f87171; border-color: #f87171; }
.btn-outline-danger:hover { background-color: #f87171; color: #1a1a1a; }
.btn-outline-info { color: #60a5fa; border-color: #60a5fa; }
.btn-outline-info:hover { background-color: #60a5fa; color: #0f172a; }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background-color: var(--primary); color: var(--btn-text); }

.card { background-color: var(--card); border: 1px solid var(--border); color: var(--text); }
.card-title, .card-value { color: var(--text); }

.form-control {
    background-color: var(--bg); border: 1px solid var(--border); color: var(--text);
}
.form-control:focus { background-color: var(--bg); border-color: var(--primary); color: var(--text); box-shadow: none; }
.form-control::placeholder { color: var(--hint); }

.alert-info { background-color: rgba(96,165,250,.14); border-color: rgba(96,165,250,.35); color: #93c5fd; }

.badge-secondary { background-color: var(--border); color: var(--text); }
.badge-success   { background-color: rgba(46,204,113,.2); color: #4ade80; }
.badge-info      { background-color: rgba(96,165,250,.2); color: #60a5fa; }

.modal-content { background-color: var(--card); color: var(--text); border: 1px solid var(--border); }
.modal-header, .modal-footer { border-color: var(--border); }
.close { color: var(--text); text-shadow: none; opacity: .7; }
.close:hover { color: var(--text); opacity: 1; }

.container { color: var(--text); }