/* ==========================================================
   Pinch Reservoir
   Components
   Version: v4.1
   ========================================================== */


/* ==========================================================
   Tank Card
   ========================================================== */

.tank-card {

    background: var(--color-surface);

    border-radius: var(--radius-large);

    padding: 2rem;

    box-shadow: var(--shadow-card);

    text-align: center;

}


/* ==========================================================
   Tank
   ========================================================== */

.tanks-wrapper {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 24px;

    margin-bottom: 2rem;

}

.tank {

    position: relative;

    width: 180px;

    height: 260px;

    overflow: hidden;

    border-radius: 90px;

    border: 8px solid #D8DDE5;

    background: rgba(255,255,255,.5);

    box-shadow:
        inset 0 2px 12px rgba(255,255,255,.8),
        0 18px 40px rgba(0,0,0,.08);

}

.balance-pipe {

    width: 60px;

    height: 20px;

    border-radius: 12px;

    background: #C9CED6;

}


/* ==========================================================
   Water
   ========================================================== */

.water {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    background:
        linear-gradient(
            to top,
            var(--water-bottom),
            var(--water-middle),
            var(--water-top)
        );

    transition: height .8s ease;

}


/* ==========================================================
   Tank Labels
   ========================================================== */

#litres {

    margin: 0;

    font-size: 2.6rem;

    font-weight: 700;

}

#percent {

    margin-top: .5rem;

    color: var(--color-text-secondary);

    font-size: 1.1rem;

}


/* ==========================================================
   Statistic Cards
   ========================================================== */

.stat-card {

    background: var(--color-surface);

    border-radius: var(--radius-medium);

    padding: 1.4rem;

    box-shadow: var(--shadow-card);

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}

.stat-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-hover);

}

.stat-card h3 {

    margin: 0;

    color: var(--color-text-secondary);

    font-size: .95rem;

    font-weight: 600;

}

.stat-value {

    margin-top: .75rem;

    font-size: 2rem;

    font-weight: 700;

}


/* ==========================================================
   Settings Button
   ========================================================== */

.settings-button {

    width: 50px;

    height: 50px;

    border: none;

    border-radius: 50%;

    background: var(--color-surface);

    box-shadow: var(--shadow-card);

    cursor: pointer;

    font-size: 1.3rem;

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}

.settings-button:hover {

    transform: rotate(15deg) scale(1.05);

    box-shadow: var(--shadow-hover);

}


/* ==========================================================
   Settings Panel
   ========================================================== */

.settings-panel {

    position: fixed;

    top: 20px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 1000;

    width: calc(100% - 32px);

    max-width: 560px;

    max-height: calc(100vh - 40px);

    overflow-y: auto;

    box-sizing: border-box;

    padding: 22px;

    border-radius: 28px;

    background:
        rgba(255,255,255,.96);

    box-shadow:
        0 30px 80px rgba(0,0,0,.18),
        0 4px 18px rgba(0,0,0,.08);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);

    animation:
        settingsAppear .25s ease;

}

.settings-panel[hidden] {

    display: none;

}

@keyframes settingsAppear {

    from {

        opacity: 0;

        transform:
            translateX(-50%)
            translateY(-18px)
            scale(.98);

    }

    to {

        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0)
            scale(1);

    }

}


/* ==========================================================
   Settings Header
   ========================================================== */

.settings-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 20px;

}

.settings-header h2 {

    margin: 0;

    font-size: 1.6rem;

    font-weight: 700;

}

.settings-header p {

    margin:
        4px 0 0;

    color:
        var(--color-text-secondary);

    font-size: .95rem;

}

.settings-close {

    width: 36px;

    height: 36px;

    flex-shrink: 0;

    border: none;

    border-radius: 50%;

    background:
        #EEF0F4;

    color:
        #555;

    cursor: pointer;

    font-size: 1.5rem;

    line-height: 1;

}


/* ==========================================================
   Settings Fields
   ========================================================== */

.settings-group {

    overflow: hidden;

    border-radius: 20px;

    background:
        #F4F5F7;

}

.settings-group label {

    display: block;

    padding:
        14px 16px;

    border-bottom:
        1px solid rgba(60,60,67,.12);

    color:
        #3A3A3C;

    font-size: .92rem;

    font-weight: 600;

}

.settings-group label:last-child {

    border-bottom: none;

}

.settings-group input {

    width: 100%;

    box-sizing: border-box;

    margin-top: 8px;

    padding:
        12px 14px;

    border:
        1px solid rgba(60,60,67,.15);

    border-radius: 13px;

    outline: none;

    background:
        white;

    color:
        #111;

    font: inherit;

    font-size: 1rem;

    font-weight: 500;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;

}

.settings-group input:focus {

    border-color:
        #007AFF;

    box-shadow:
        0 0 0 3px rgba(0,122,255,.12);

}

.settings-input-row {

    display: flex;

    align-items: center;

    gap: 10px;

}

.settings-input-row input {

    flex: 1;

}

.input-unit {

    min-width: 52px;

    margin-top: 8px;

    color:
        #6E6E73;

    font-size: .9rem;

    font-weight: 500;

    text-align: right;

}


/* ==========================================================
   Settings Save
   ========================================================== */

.settings-save {

    width: 100%;

    margin-top: 18px;

    padding:
        14px 18px;

    border: none;

    border-radius: 15px;

    background:
        #007AFF;

    color:
        white;

    cursor: pointer;

    font-size: 1rem;

    font-weight: 700;

}

.settings-save:active {

    transform: scale(.99);

}


/* ==========================================================
   Measurement Card
   ========================================================== */

.measurement-card {

    text-align: left;

}

.measurement-card h2 {

    text-align: center;

}

.measurement-fields {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 16px;

}

.measurement-fields label {

    display: flex;

    flex-direction: column;

    gap: 8px;

    color:
        var(--color-text-secondary);

    font-size: .9rem;

    font-weight: 600;

}

.measurement-fields input {

    width: 100%;

    box-sizing: border-box;

    padding:
        12px 14px;

    border:
        1px solid rgba(60,60,67,.15);

    border-radius: 13px;

    outline: none;

    background:
        #F6F7F9;

    font: inherit;

}

.measurement-save {

    width: 100%;

    margin-top: 18px;

    padding:
        14px 18px;

    border: none;

    border-radius: 15px;

    background:
        #007AFF;

    color:
        white;

    cursor: pointer;

    font-size: 1rem;

    font-weight: 700;

}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width:700px) {

    .settings-panel {

        top: 10px;

        width:
            calc(100% - 20px);

        max-height:
            calc(100vh - 20px);

        padding:
            18px;

        border-radius:
            24px;

    }

    .measurement-fields {

        grid-template-columns:
            1fr;

    }

}