/**
 * Coral Elation - Main CSS file
 */

/* Custom color variables */
:root {
    --coral-primary: #3273dc;
    --coral-secondary: #23d160;
    --coral-accent: #ff3860;
    --coral-dark: #363636;
    --coral-light: #f5f5f5;
}

/* General styles */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.section {
    flex: 1;
}

footer {
    margin-top: auto;
}

/* Parameter history styling */
.parameter-card {
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.parameter-card:hover {
    box-shadow: 0 2px 15px rgba(10, 10, 10, 0.1);
    transform: translateY(-2px);
}

.parameter-image {
    max-height: 200px;
    object-fit: contain;
}

/* Parameter value indicators */
.parameter-normal {
    background-color: #ebffeb;
    border-left: 4px solid var(--coral-secondary);
}

.parameter-warning {
    background-color: #fff8e6;
    border-left: 4px solid #ffdd57;
}

.parameter-danger {
    background-color: #feecf0;
    border-left: 4px solid var(--coral-accent);
}

/* Tank cards */
.tank-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tank-card .card-content {
    flex-grow: 1;
}

/* Chart containers */
.chart-container {
    position: relative;
    width: 100%;
    min-height: 300px;
    margin-bottom: 2rem;
}

/* Image gallery */
.gallery-item {
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gallery-item:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

/* Loading indicators */
.is-loading {
    position: relative;
    pointer-events: none;
}

.is-loading::after {
    content: "";
    position: absolute;
    top: calc(50% - 1.5rem);
    left: calc(50% - 1.5rem);
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid var(--coral-light);
    border-top-color: var(--coral-primary);
    border-radius: 50%;
    animation: spin 1s infinite linear;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Mobile responsiveness tweaks */
@media screen and (max-width: 768px) {
    .column.is-narrow-mobile {
        width: 100% !important;
    }
    
    .buttons.is-right-desktop {
        justify-content: flex-start;
    }
}