/* ============================================================
   aquaponie.css — Styles spécifiques page aquaponie (vue paysage)
   Complète common-data.css et realtime-styles.css
   ============================================================ */

/* ----- STAT-CARD DÉTAILS (équivalent stat-card-secondary vue principale) ----- */
.stat-card-details {
    font-size: 0.78em;
    color: var(--text-muted, #6b7280);
    margin-top: 6px;
    line-height: 1.4;
}
.stat-card-details div + div { margin-top: 2px; }

/* ----- VARIANTES STAT-CARD AQUAPONIE (niveaux + paramètres physiques) ----- */
.stat-card.aquarium { border-left-color: #FF6300; }
.stat-card.aquarium .stat-card-icon { color: #FF6300; }

.stat-card.reserve { border-left-color: #007E61; }
.stat-card.reserve .stat-card-icon { color: #007E61; }

.stat-card.potager { border-left-color: #27BDA0; }
.stat-card.potager .stat-card-icon { color: #27BDA0; }

.stat-card.tempeau { border-left-color: #00B794; }
.stat-card.tempeau .stat-card-icon { color: #00B794; }

/* ----- BILAN HYDRIQUE (section révélable) ----- */
.balance-reveal-wrapper {
    margin: 1.5rem 0;
}
.balance-reveal-header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.balance-reveal-header.section-header { margin-bottom: 12px; }
.balance-reveal-header.section-header > i:first-child { grid-column: 1; grid-row: 1; }
.balance-reveal-header.section-header > h3 { grid-column: 2; grid-row: 1; }
.balance-reveal-header.section-header > .balance-reveal-btn {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
}
/* Vue alt : header avec uniquement le bouton → centrer */
.balance-reveal-header.alt-balance-header {
    display: flex;
    justify-content: center;
    grid-template-columns: unset;
    grid-template-rows: unset;
}
.balance-reveal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.9em;
    font-weight: 600;
    color: #008B74;
    background: rgba(0, 139, 116, 0.08);
    border: 1px solid rgba(0, 139, 116, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.balance-reveal-btn:hover {
    background: rgba(0, 139, 116, 0.15);
    border-color: #008B74;
}
.balance-reveal-btn-icon {
    transition: transform 0.3s ease;
}
.balance-reveal-btn[aria-expanded="true"] .balance-reveal-btn-icon {
    transform: rotate(180deg);
}
.balance-reveal-content {
    margin-top: 12px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s ease-out, opacity 0.35s ease-out;
}
.balance-reveal-content.is-visible {
    max-height: 1600px;
    opacity: 1;
}

.water-balance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}
.balance-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border-left: 4px solid #008B74;
}
.balance-card.reserve { border-left-color: #007E61; }
.balance-card.aquarium { border-left-color: #FF6300; }
.balance-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(0, 139, 116, 0.12);
}
.balance-card-icon { color: #008B74; font-size: 1.2em; }
.balance-card.aquarium .balance-card-icon { color: #FF6300; }
.balance-card-title { margin: 0; font-size: 1.05em; font-weight: 600; color: #2c3e50; }
.balance-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 0.9em;
}
.balance-stat-label { color: var(--text-secondary, #6b7280); display: flex; align-items: center; gap: 6px; }
.balance-stat-value { font-weight: 600; }
.balance-stat-value.positive { color: #007E61; }
.balance-stat-value.negative { color: #c0392b; }
.balance-stat-value.neutral { color: #2c3e50; }
.balance-stat-unit { font-size: 0.9em; font-weight: 500; color: var(--text-secondary, #6b7280); margin-left: 2px; }
.balance-stat-stddev { font-size: 0.85em; font-weight: 400; color: var(--text-muted, #6b7280); margin-left: 4px; }
.balance-note {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.82em;
    color: var(--text-secondary, #6b7280);
    line-height: 1.4;
}
.balance-note i { color: #008B74; margin-right: 4px; }

/* ----- FILTRAGE + ÉTAT DU SYSTÈME (grille 2 colonnes sur écrans larges) ----- */
.filter-system-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
    align-items: start;
}
@media (max-width: 768px) {
    .filter-system-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Période analysée (bloc dans filter-section) */
.period-info { flex-direction: column; gap: 8px; }
.period-info-title { font-weight: 600; color: #2c3e50; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.period-info-dates { font-size: 0.9em; color: var(--text-secondary, #6b7280); }
.period-tz-hint { font-size: 0.85em; color: var(--text-muted, #6b7280); }
.period-info-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 8px;
}
.period-stat-item { display: flex; flex-direction: column; gap: 2px; }
.period-stat-value { font-weight: 700; font-size: 1.1em; color: #2c3e50; }
.period-stat-label { font-size: 0.8em; color: var(--text-secondary, #6b7280); }
.mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mode-badge-historical { background: rgba(0, 139, 116, 0.12); color: #008B74; }
.mode-badge-live { background: rgba(39, 189, 160, 0.2); color: #007E61; }

/* Filtre personnalisé (formulaire) */
.custom-filter { margin-top: 1rem; }
.custom-filter-title {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.datetime-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .datetime-grid { grid-template-columns: 1fr; } }
.datetime-field label { display: block; margin-bottom: 4px; }
.action-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* ----- CHART STOCK WRAPPER ----- */
.chart-stock-wrapper {
    min-height: 350px;
    margin-bottom: 1.5rem;
}

/* ----- DARK MODE ----- */
[data-theme="dark"] .balance-card {
    background: var(--bg-card, rgba(30, 40, 50, 0.95));
    border-left-color: var(--accent-primary);
}
[data-theme="dark"] .balance-card-title { color: var(--text-primary); }
[data-theme="dark"] .balance-stat-value.neutral { color: var(--text-primary); }
[data-theme="dark"] .balance-reveal-btn {
    color: var(--accent-primary);
    background: var(--accent-muted);
    border-color: var(--accent-border);
}
[data-theme="dark"] .balance-reveal-btn:hover {
    background: var(--accent-muted);
    border-color: var(--accent-primary);
}