/* Tanks page: header, summary cards and filter bar (animations and responsive layout) */

/* ---------- header ---------- */
#view-tanks .tanks-heading-icon {
    position: relative;
}

#view-tanks .tanks-heading-icon::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid #5b72e8;
    animation: tmRing 2.8s ease-out infinite;
    pointer-events: none;
}

#view-tanks .tanks-heading-icon i {
    animation: tmFloat 3.2s ease-in-out infinite;
}

#view-tanks .tanks-topbar-btns .btn-primary {
    position: relative;
    overflow: hidden;
}

#view-tanks .tanks-topbar-btns .btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
    transform: translateX(120%);
    animation: tmShine 4.5s ease-in-out 1.6s infinite;
    pointer-events: none;
}

#view-tanks .tanks-topbar-btns .btn:nth-child(1):hover i { animation: tmWiggle .5s; }
#view-tanks .tanks-topbar-btns .btn:nth-child(2):hover i { animation: tmBounce .5s; }
#view-tanks .tanks-topbar-btns .btn:nth-child(3) i { transition: transform .3s; }
#view-tanks .tanks-topbar-btns .btn:nth-child(3):hover i { transform: rotate(90deg); }

/* ---------- summary cards ---------- */
#view-tanks #tankSummaryRow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

#view-tanks .tm-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
    min-height: 102px;
    text-align: start;
}

#view-tanks .tm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#view-tanks .tm-row .metric-label {
    min-width: 0;
}

#view-tanks .tm-card .metric-value {
    margin-top: 0;
    white-space: nowrap;
}

#view-tanks .tm-dec {
    margin-inline-start: 1px;
    font-size: .62em;
    font-weight: 700;
    color: var(--text2);
}

#view-tanks .tm-unit {
    margin-inline-start: 4px;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text2);
}

#view-tanks .tm-bar {
    position: relative;
    height: 5px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--text2) 18%, transparent);
    overflow: hidden;
}

#view-tanks .tm-bar i {
    display: block;
    height: 100%;
    width: var(--w);
    border-radius: 4px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--metric-tone) 55%, #fff), var(--metric-tone));
}

#view-tanks .tm-bar.is-flow i {
    background: repeating-linear-gradient(115deg, var(--metric-tone) 0 7px, color-mix(in srgb, var(--metric-tone) 55%, #fff) 7px 14px);
    background-size: 28px 100%;
    animation: tmSlide 1.6s linear infinite;
}

#view-tanks .tm-bar.is-split {
    display: flex;
}

#view-tanks .tm-bar.is-split i {
    flex: 0 0 var(--w);
    width: auto;
    border-radius: 0;
    background: var(--petrol);
}

#view-tanks .tm-bar.is-split i[data-fuel="diesel"] { background: var(--diesel); }
#view-tanks .tm-bar.is-split i[data-fuel="cng"] { background: var(--cng); }

#view-tanks #tankSummaryRow.tm-fresh .tm-bar:not(.is-split) i {
    width: 0;
    animation: tmGrow 1.2s .5s cubic-bezier(.2,.8,.2,1) forwards;
}

#view-tanks #tankSummaryRow.tm-fresh .tm-bar.is-flow i {
    animation: tmGrow 1.2s .5s cubic-bezier(.2,.8,.2,1) forwards, tmSlide 1.6s linear infinite;
}

#view-tanks #tankSummaryRow.tm-fresh .tm-bar.is-split i {
    flex-basis: 0;
    animation: tmSplit 1.2s .5s cubic-bezier(.2,.8,.2,1) forwards;
}

#view-tanks .tm-note {
    font-size: 11px;
    color: var(--text2);
}

#view-tanks .tm-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

#view-tanks .tm-dots i {
    width: 14px;
    height: 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--text2) 22%, transparent);
}

#view-tanks .tm-count .tm-dots i.on,
#view-tanks .tm-low .tm-dots i.on {
    background: color-mix(in srgb, var(--text2) 22%, transparent);
}

#view-tanks .tm-count .tm-dots i[data-fuel="petrol"].on { background: var(--petrol); }
#view-tanks .tm-count .tm-dots i[data-fuel="diesel"].on { background: var(--diesel); }
#view-tanks .tm-count .tm-dots i[data-fuel="cng"].on { background: var(--cng); }
#view-tanks .tm-dots i.is-low {
    background: var(--danger);
    animation: tmBlink 1.6s ease-in-out infinite;
}

#view-tanks .tm-low.is-danger {
    border-color: color-mix(in srgb, var(--danger) 38%, transparent);
}

#view-tanks .tm-low.is-danger::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 55%, transparent);
    animation: tmLowPulse 2s ease-in-out infinite;
    pointer-events: none;
}

#view-tanks .tm-card .metric-icon { overflow: hidden; }
#view-tanks .tm-a-stack { animation: tmStack 3.4s ease-in-out infinite; }
#view-tanks .tm-a-drop { animation: tmDrop 2.4s ease-in-out infinite; }
#view-tanks .tm-a-wind { animation: tmWind 2.6s ease-in-out infinite; }
#view-tanks .tm-a-warn { animation: tmWarn 2.4s ease-in-out infinite; }
#view-tanks .tm-a-coin { animation: tmCoin 4.5s ease-in-out infinite; }

/* ---------- filter bar ---------- */
#view-tanks .tank-filter-group .filter-tabs {
    position: relative;
}

#view-tanks .tm-thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #5B78E7, #5366D9);
    box-shadow: 0 6px 14px rgba(62,84,184,.2), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.28));
    pointer-events: none;
}

#view-tanks .tm-thumb.is-moving {
    transition: transform .35s cubic-bezier(.3,.8,.3,1), width .35s cubic-bezier(.3,.8,.3,1);
}

#view-tanks .tank-filter-group .filter-tab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#view-tanks .tank-filter-group .filter-tab.active {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #fff;
}

#view-tanks .filter-tab.is-low-tab i {
    font-size: 14px;
    color: var(--danger);
    animation: tmWarn 2.4s ease-in-out infinite;
}

#view-tanks .filter-tab.is-low-tab.active i {
    color: #fff;
}

/* ---------- responsive ---------- */
@media (max-width: 1279px) {
    #view-tanks #tankSummaryRow {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    #view-tanks .tm-count,
    #view-tanks .tm-liquid,
    #view-tanks .tm-gas {
        grid-column: span 2;
    }
    #view-tanks .tm-low,
    #view-tanks .tm-value {
        grid-column: span 3;
    }
}

@media (min-width: 760px) and (max-width: 1099px) {
    #view-tanks .tanks-topbar {
        flex-direction: column;
        align-items: stretch;
    }
    #view-tanks .tanks-topbar-btns {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }
    #view-tanks .tanks-topbar-btns .btn {
        justify-content: center;
    }
}

@media (max-width: 759px) {
    #view-tanks #tankSummaryRow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #view-tanks .tm-count { order: 1; grid-column: span 1; }
    #view-tanks .tm-low { order: 2; grid-column: span 1; }
    #view-tanks .tm-liquid { order: 3; grid-column: 1 / -1; }
    #view-tanks .tm-gas { order: 4; grid-column: 1 / -1; }
    #view-tanks .tm-value { order: 5; grid-column: 1 / -1; }
    #view-tanks .tank-controls-row {
        flex-direction: column;
        align-items: stretch;
    }
    #view-tanks .tank-filter-group .filter-tabs {
        width: 100%;
    }
    #view-tanks .tank-filter-group .filter-tab {
        flex: 1;
    }
    #view-tanks .tank-sort-select {
        width: 100%;
    }
}

@media (max-width: 430px) {
    #view-tanks #tankSummaryRow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 360px) {
    #view-tanks .tanks-topbar-btns {
        grid-template-columns: 1fr;
    }
}

@keyframes tmRing { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes tmFloat { 50% { transform: translateY(-2px); } }
@keyframes tmShine { 0%, 55% { transform: translateX(120%); } 80%, 100% { transform: translateX(-120%); } }
@keyframes tmWiggle { 25% { transform: rotate(-18deg); } 60% { transform: rotate(14deg); } }
@keyframes tmBounce { 40% { transform: translateY(-4px); } }
@keyframes tmGrow { to { width: var(--w); } }
@keyframes tmSplit { to { flex-basis: var(--w); } }
@keyframes tmSlide { to { background-position: 28px 0; } }
@keyframes tmBlink { 50% { opacity: .35; } }
@keyframes tmLowPulse { 50% { opacity: .25; } }
@keyframes tmStack { 50% { transform: scale(1.14); } }
@keyframes tmDrop { 0%, 100% { transform: translateY(-2px); } 45% { transform: translateY(3px) scaleY(.9); } 60% { transform: translateY(-1px); } }
@keyframes tmWind { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@keyframes tmWarn { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-12deg); } 82% { transform: rotate(10deg); } 88% { transform: rotate(-6deg); } }
@keyframes tmCoin { 0%, 70%, 100% { transform: rotateY(0); } 85% { transform: rotateY(180deg); } }

@media (prefers-reduced-motion: reduce) {
    #view-tanks .tanks-heading-icon::after,
    #view-tanks .tanks-heading-icon i,
    #view-tanks .tanks-topbar-btns .btn-primary::after,
    #view-tanks .tm-card i,
    #view-tanks .tm-bar i,
    #view-tanks .tm-dots i,
    #view-tanks .tm-low.is-danger::after,
    #view-tanks .filter-tab.is-low-tab i {
        animation: none !important;
    }
    #view-tanks #tankSummaryRow.tm-fresh .tm-bar:not(.is-split) i { width: var(--w); }
    #view-tanks #tankSummaryRow.tm-fresh .tm-bar.is-split i { flex-basis: var(--w); }
    #view-tanks .tm-thumb.is-moving { transition: none; }
}