/* MqttWebService.V2 - site styles */
body {
    background-color: var(--bg-body, #f8f9fa);
    color: var(--text-primary, #212529);
}

.navbar-brand {
    letter-spacing: 0.03em;
}

/* Summary cards: testo sempre bianco in entrambi i temi */
.summary-cards .card,
.summary-cards .card *,
.summary-cards .small,
.summary-cards .fs-2,
.summary-cards .fw-bold {
    color: #fff !important;
}

/* Warning card: giallo più scuro del default Bootstrap */
.summary-cards .text-bg-warning {
    background-color: #d97706 !important;
}

/* Card Styles for Theme Support */
.card {
    background-color: var(--bg-card, #ffffff);
    border-color: var(--border-color, #dee2e6);
    color: var(--text-primary, #212529);
}

.card-header {
    background-color: var(--bg-card, #ffffff);
    border-bottom-color: var(--border-color, #dee2e6);
    color: var(--text-primary, #212529);
}

.card-body {
    color: var(--text-primary, #212529);
}

/* Login/Auth Pages */
.auth-card {
    max-width: 450px;
    margin: 3rem auto;
}

.auth-card-header {
    text-align: center;
    padding: 1.5rem;
}

.auth-card-icon {
    font-size: 3rem;
    color: var(--accent-primary);
    margin-bottom: 1rem;
}

/* Form Styles */
.form-label {
    color: var(--text-primary);
    font-weight: 500;
}

.form-control {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.form-control:focus {
    background-color: var(--bg-card);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.form-check-label {
    color: var(--text-primary);
}

/* Button Styles */
.btn-primary {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* Table Styles */
.table {
    color: var(--text-primary, #212529);
}

.table thead {
    border-bottom-color: var(--border-color, #dee2e6);
}

.table thead:not(.table-dark) th {
    color: var(--text-primary, #212529);
}

thead.table-dark th {
    color: #fff !important;
}

.table tbody tr {
    border-color: var(--border-color, #dee2e6);
}

.table tbody td {
    color: var(--text-primary, #212529);
}

[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
}

[data-theme="dark"] .table thead:not(.table-dark) th {
    color: #e8e8e8;
}

[data-theme="dark"] .table tbody td {
    color: #e2e8f0;
}

/* Definition Lists */
dt {
    color: var(--text-primary, #212529);
}

dd {
    color: var(--text-primary, #212529);
}

[data-theme="dark"] dt {
    color: #e8e8e8;
}

[data-theme="dark"] dd {
    color: #e2e8f0;
}

/* Headings */
h5, h6 {
    color: var(--text-primary, #212529);
}

[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #e8e8e8;
}

/* Ordered and Unordered Lists */
ol, ul {
    color: var(--text-primary, #212529);
}

[data-theme="dark"] ol,
[data-theme="dark"] ul {
    color: #e2e8f0;
}

[data-theme="dark"] ol li,
[data-theme="dark"] ul li {
    color: #e2e8f0;
}

/* Paragraph text */
p {
    color: var(--text-primary, #212529);
}

[data-theme="dark"] p {
    color: #e2e8f0;
}

/* Strong/Bold text */
strong {
    color: var(--text-primary, #212529);
}

[data-theme="dark"] strong {
    color: #e8e8e8;
}

/* Bootstrap text utilities override for dark mode */
[data-theme="dark"] .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .text-primary {
    color: #60a5fa !important;
}

[data-theme="dark"] .text-secondary {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Alert text in dark mode */
[data-theme="dark"] .alert {
    color: #e2e8f0;
}

[data-theme="dark"] .alert strong {
    color: #ffffff;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #e2e8f0 !important;
}

[data-theme="dark"] .alert-info strong {
    color: #ffffff !important;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    color: #e2e8f0 !important;
}

[data-theme="dark"] .alert-warning strong {
    color: #ffffff !important;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #e2e8f0 !important;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #e2e8f0 !important;
}

[data-theme="dark"] .alert-secondary {
    background-color: rgba(148, 163, 184, 0.15);
    border-color: rgba(148, 163, 184, 0.3);
    color: #e2e8f0 !important;
}

/* Small text */
.small {
    color: var(--text-primary, #212529);
}

[data-theme="dark"] .small {
    color: #e2e8f0;
}

/* Buttons in dark mode */
[data-theme="dark"] .btn-outline-primary {
    color: #60a5fa;
    border-color: #60a5fa;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: #60a5fa;
    border-color: #60a5fa;
    color: #ffffff;
}

[data-theme="dark"] .btn-outline-danger {
    color: #f87171;
    border-color: #f87171;
}

[data-theme="dark"] .btn-outline-danger:hover {
    background-color: #f87171;
    border-color: #f87171;
    color: #ffffff;
}

[data-theme="dark"] .btn-outline-secondary {
    color: #94a3b8;
    border-color: #94a3b8;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #94a3b8;
    border-color: #94a3b8;
    color: #ffffff;
}

/* Icon colors in dark mode */
[data-theme="dark"] .fas,
[data-theme="dark"] .fa {
    color: inherit;
}

/* Code elements within tables */
.table-code {
    background-color: var(--bg-body);
    color: var(--text-primary);
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
}

[data-theme="dark"] .table-code {
    background-color: rgba(0, 0, 0, 0.3);
    color: #e8e8e8;
}

/* ========================================
   ANIMAZIONE FLASH PER RIGHE AGGIORNATE
   ======================================== */

/* Keyframe per effetto lampeggiante (pulse) */
@keyframes row-flash {
    0%, 100% {
        background-color: transparent;
        border-left: 3px solid transparent;
    }
    50% {
        background-color: rgba(25, 135, 84, 0.12);
        border-left: 3px solid #198754;
    }
}

[data-theme="dark"] @keyframes row-flash {
    0%, 100% {
        background-color: transparent;
        border-left: 3px solid transparent;
    }
    50% {
        background-color: rgba(34, 197, 94, 0.15);
        border-left: 3px solid #22c55e;
    }
}

/* Classe per attivare l'animazione - 5 lampeggi */
.row-flash {
    animation: row-flash 0.5s ease-in-out 5;
    /* Nessun position: relative per evitare disallineamento */
}

/* Frecce direzione dispositivi: gialla ↓ e verde ↑ lampeggiano in fase opposta, max 5 volte */
@keyframes dev-arrow-blink-on {
    /* gialla ↓ — parte ACCESA, si spegne a metà ciclo */
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}
@keyframes dev-arrow-blink-off {
    /* verde ↑ — parte SPENTA, si accende a metà ciclo */
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
}

.dev-arrow {
    display: inline-block;
    font-size: 0.85rem;
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-iteration-count: 10;     /* max 10 lampeggi poi si ferma */
    animation-fill-mode: both;         /* applica 0% subito, mantiene 100% alla fine */
}

.dev-arrow-up {
    color: #198754;                    /* verde — fase inversa rispetto alla gialla */
    animation-name: dev-arrow-blink-off;
}
.dev-arrow-down {
    color: #d97706;                    /* gialla — parte accesa */
    animation-name: dev-arrow-blink-on;
}

/* 📱 Mobile-card layout for the device table 📱 */
@media (max-width: 767.98px) {

    /* Health-ping card: stack vertically */
    .health-ping-row {
        flex-direction: column !important;
        gap: .5rem !important;
    }
    .health-ping-row .ms-auto {
        margin-left: 0 !important;
        text-align: left !important;
    }

    /* Summary cards: tighter padding */
    .summary-cards .card-body {
        padding: .6rem .5rem;
    }
    .summary-cards .fs-2 {
        font-size: 1.4rem !important;
    }

    /* Device table → stacked card list */
    .device-table thead {
        display: none;
    }
    .device-table tbody tr {
        display: block;
        border: 1px solid #dee2e6;
        border-radius: .5rem;
        margin-bottom: .75rem;
        padding: .65rem .75rem;
        background: #fff;
    }
    .device-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .25rem 0;
        border: none;
        font-size: .875rem;
    }
    .device-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: .75rem;
        flex-shrink: 0;
        color: #495057;
    }
    .device-table tbody td:first-child {
        padding-top: .15rem;
    }
    .device-table tbody td:last-child {
        padding-bottom: .15rem;
    }

    /* Pagination: stack on small screens */
    .pagination-footer {
        flex-direction: column !important;
        gap: .5rem;
        text-align: center;
    }

    /* Header row: stack title + timestamp */
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: .25rem;
    }
}