html {
    height: 100%;
    height: 100dvh;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6; /* gray-100 */
    -webkit-tap-highlight-color: transparent;
    margin: 0;
    padding: 0;
    min-height: 100%;
    min-height: 100dvh;
    /* Allow natural document flow - no position fixed or overflow hidden */
}

/* Main scrollable content area */
#app-content {
    min-height: calc(100vh - 140px); /* Account for header (~60px) and footer (~80px) */
    min-height: calc(100dvh - 140px);
    padding-bottom: 100px; /* Extra padding for fixed footer */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

/* Theme variables for brand colors */
:root {
    --primary: #14b8a6; /* teal-500 - matches logo */
    --primary-dark: #0d9488; /* teal-600 */
    --primary-light: #5eead4; /* teal-300 */
    --brand-text: #0f172a; /* dark slate for headings if needed */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Glassmorphism Effect for Bottom Nav */
.glass-nav {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* Page Transition Animation */
.fade-in-up {
    animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Liquid Animation for Tanks */
.liquid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary-dark) 100%);
    transform-origin: bottom center;
    animation: wave 8s linear infinite;
    border-radius: 0 0 1rem 1rem;
    transition: height 0.6s ease, top 0.6s ease, background-color 0.6s ease, opacity 0.4s ease;
}

.liquid::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0.5;
}

@keyframes wave {
    0% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-2px) rotate(1deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(2px) rotate(-1deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* Liquid color variants */
.liquid.dipping-regular { background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary-dark) 100%); }
.liquid.dipping-low { background: linear-gradient(180deg, #dff6f1 0%, #fbc9c7 100%); }
.liquid.dipping-critical { background: linear-gradient(180deg, #fef2f2 0%, #f87171 100%); }

/* Progress bar variants */
.progress .progress-bar.dipping-regular { background: var(--primary); }
.progress .progress-bar.dipping-low { background: linear-gradient(90deg, #fca5a5, #fbc9c7); }
.progress .progress-bar.dipping-critical { background: linear-gradient(90deg, #ff7a7a, #ef4444); }
/* Custom Active Tab Indicator */
.nav-item { position: relative; }
.nav-item.active i {
    color: #ffffff; /* icon becomes white on colored circle */
    z-index: 10;
    transition: color 0.18s ease, transform 0.2s ease;
    transform: translateY(0);
}
.nav-item.active span {
    color: var(--primary-dark);
    font-weight: 600;
    font-size: 11px;
}
.nav-item span { font-size: 11px; }

/* Rounded moving background for active nav item */
nav > .flex { position: relative; }
.nav-item::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%) scale(0.85);
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background: transparent;
    transition: transform 240ms cubic-bezier(0.22,1,0.36,1), background 240ms ease, opacity 200ms ease;
    opacity: 0;
    z-index: 0;
}

.nav-item.active::before {
    transform: translateX(-50%) scale(1);
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    opacity: 1;
}

/* Ensure text and icon sit above the circle and stay visible */
.nav-item i, .nav-item span { position: relative; z-index: 10; color: #94a3b8; transition: color 160ms ease; }

/* Slight lift on active and keep the icon white */
.nav-item.active i { color: #ffffff; transform: translateY(-2px); }
.nav-item.active:hover i { color: #ffffff; }

/* Hover: subtly tint icon/label for better contrast (non-active items) */
.nav-item:not(.active):hover i, .nav-item:not(.active):hover span { color: var(--primary-dark) !important; }

/* Smooth hover hint - increase visibility slightly so contrast is clearer */
.nav-item:not(.active):hover::before { transform: translateX(-50%) scale(0.92); opacity: 0.12; background: linear-gradient(90deg, rgba(20,184,166,0.12), rgba(13,148,136,0.12)); }


/* Status Indicators */
.status-dot {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Brand Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    background: #fff;
    color: var(--brand-text);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-outline-primary {
    background: transparent;
    border-color: var(--primary);
    color: var(--primary);
}
.btn-outline-primary:hover {
    background: rgba(20,184,166,0.08);
}

.btn-danger {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}
.btn-danger:hover,
.btn-danger:focus {
    background: #dc2626;
    border-color: #dc2626;
}

/* Badges */
.badge-primary {
    background: var(--primary);
    color: #ffffff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
}

/* Brand links */
a.brand-link {
    color: var(--primary);
}
a.brand-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Compact price chips used in header */
.price-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 9999px;
    font-size: 12px;
    color: #0f172a;
    box-shadow: 0 6px 18px rgba(15,23,42,0.03);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.price-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15,23,42,0.06);
}
.price-chip .label {
    font-weight: 600;
    color: rgba(15,23,42,0.65);
    letter-spacing: 0.2px;
}
.price-chip .amount {
    font-weight: 700;
    color: var(--primary-dark);
}
.price-chip .unit {
    font-size: 11px;
    color: rgba(15,23,42,0.5);
}

/* Reduce visual clutter on smaller screens; chips hidden already with md breakpoint */
@media (max-width: 768px) {
    .price-chip { display: none; }
}

/* Mobile prices dropdown (visible on small screens when toggled) */
.price-mobile-menu {
    position: absolute;
    right: 0.5rem;
    top: calc(100% + 8px);
    width: 14rem;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(15,23,42,0.08);
    padding: 0.75rem;
    z-index: 60;
}
.price-mobile-menu .text-primary { color: var(--primary-dark); }
.price-mobile-menu a { display: inline-block; }


/* Progress */
.progress {
    background: #e6f7f5;
    border-radius: 0.5rem;
    overflow: hidden;
}
.progress .progress-bar {
    background-color: var(--primary);
    height: 8px;
    transition: width 0.6s ease, background-color 0.6s ease, opacity 0.3s ease;
}

/* Progress bar color variants (solid colors for smooth transitions) */
.progress .progress-bar.dipping-regular { background-color: var(--primary); }
.progress .progress-bar.dipping-low { background-color: #fb7185; }
.progress .progress-bar.dipping-critical { background-color: #ef4444; }
/* Status dot variants */
.status-dot.brand { background: var(--primary); }
.status-dot.success { background: #10b981; }
.status-dot.warning { background: #f59e0b; }
.status-dot.danger { background: #ef4444; }
.status-dot.neutral { background: #9ca3af; }

/* Utilities */
.text-primary { color: var(--primary); }
.text-primary-dark { color: var(--primary-dark); }

.btn-icon {
    background: transparent;
    border: none;
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition: background 0.15s ease;
}
.btn-icon:hover { background: rgba(20,184,166,0.08); }

/* Dipping Button (visible rounded tile) */
.open-dipping-btn {
    position: relative;
    overflow: visible;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,0.06);
    background: #ffffff; /* fallback */
    box-shadow: 0 6px 18px rgba(15,23,42,0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
    will-change: transform;
}
.open-dipping-btn i { font-size: 18px; color: var(--primary-dark); transition: color 140ms ease, fill 140ms ease; }
.open-dipping-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(15,23,42,0.08); }
.open-dipping-btn:active { transform: translateY(-1px); }
.open-dipping-btn:focus-visible { outline: 3px solid rgba(20,184,166,0.18); outline-offset: 2px; border-color: rgba(13,148,136,0.9); }

/* Regular (healthy) variant */
.open-dipping-btn.dipping-regular {
    background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%);
    border-color: transparent;
}
.open-dipping-btn.dipping-regular i { color: #ffffff; }

/* Low (warning) variant */
.open-dipping-btn.dipping-low {
    background: linear-gradient(180deg, #fff1f2 0%, #fecaca 100%);
    border-color: transparent;
}
.open-dipping-btn.dipping-low i { color: #b91c1c; }

/* Critical (very low) variant */
.open-dipping-btn.dipping-critical {
    background: linear-gradient(180deg, #fee2e2 0%, #ef4444 100%);
    border-color: transparent;
}
.open-dipping-btn.dipping-critical i { color: #ffffff; }
.open-dipping-btn.dipping-critical::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 12px;
    box-shadow: 0 0 0 0 rgba(239,68,68,0.65);
    animation: pulse-ring 1.6s infinite;
    pointer-events: none;
}

/* Neutral / Idle variant (stronger & higher-specificity) */
#pump-list .open-dipping-btn.dipping-neutral,
#pump-list .open-pump-reading-btn.dipping-neutral,
.open-dipping-btn.dipping-neutral,
.open-pump-reading-btn.dipping-neutral {
    background: linear-gradient(180deg, #f1f5f9 0%, #eef2f6 100%) !important; /* visible light gray */
    border-color: #e2e8f0 !important;
    box-shadow: 0 6px 18px rgba(15,23,42,0.03) !important;
}

/* Force icon color and svg fill/stroke for idle buttons (more contrast) */
#pump-list .open-dipping-btn.dipping-neutral i,
#pump-list .open-pump-reading-btn.dipping-neutral i,
#pump-list .open-pump-reading-btn.dipping-neutral .ph,
#pump-list .open-pump-reading-btn.dipping-neutral svg,
#pump-list .open-pump-reading-btn.dipping-neutral svg path,
.open-dipping-btn.dipping-neutral i,
.open-pump-reading-btn.dipping-neutral i,
.open-pump-reading-btn.dipping-neutral .ph,
.open-pump-reading-btn.dipping-neutral svg,
.open-pump-reading-btn.dipping-neutral svg path {
    color: #475569 !important; /* stronger gray */
    fill: #475569 !important;
    stroke: #475569 !important;
}

/* Slightly stronger border to make neutral button legible */
#pump-list .open-pump-reading-btn.dipping-neutral { border-width: 1px !important; border-style: solid !important; border-color: #e2e8f0 !important; }

/* Caption for pump reading button */
.pump-btn-caption { font-size: 12px; line-height: 1; transform: translateY(0); display: block; color: #475569; margin-top: 6px; }
@media (max-width: 480px) { .pump-btn-caption { font-size: 11px; } .add-btn-caption { font-size: 11px; } }

/* Add button caption */
.add-btn-caption { font-size: 12px; line-height: 1; transform: translateY(0); margin-top: 6px; color: var(--primary-dark); display: block; }
.pump-btn-caption.inline { display: block; margin-top: 6px; }

/* Centered captions under buttons */
.pump-btn-caption.centered,
.add-btn-caption.centered {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 6px);
    white-space: normal;
    width: max-content;
    text-align: center;
}

/* Start Shift round CTA */
.start-shift-btn {
    width: 88px;
    height: 88px;
    border-radius: 9999px;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 12px 30px rgba(20,184,166,0.12);
    transition: transform 160ms cubic-bezier(.2,.9,.3,1), box-shadow 160ms ease;
    position: relative;
    cursor: pointer;
}
.start-shift-btn:focus { outline: 3px solid rgba(20,184,166,0.18); outline-offset: 3px; }
.start-shift-btn:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 18px 40px rgba(20,184,166,0.16); }
.start-shift-btn:active { transform: translateY(-1px) scale(0.98); }

.start-shift-btn .ph {
    font-size: 28px;
    line-height: 1;
}

.start-shift-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 88px;
    border-radius: 9999px;
    box-shadow: 0 0 0 0 rgba(20,184,166,0.28);
    pointer-events: none;
    animation: start-pulse 1.9s infinite;
}

@keyframes start-pulse {
    0% { box-shadow: 0 0 0 0 rgba(20,184,166,0.28); transform: translate(-50%, -50%) scale(1); }
    50% { box-shadow: 0 0 0 18px rgba(20,184,166,0.06); transform: translate(-50%, -50%) scale(1.03); }
    100% { box-shadow: 0 0 0 34px rgba(20,184,166,0.00); transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 640px) {
    .start-shift-btn { width: 72px; height: 72px; padding-top: 2px; }
    .start-shift-btn::after { width: 72px; height: 72px; }
}

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.65); }
    70% { box-shadow: 0 0 0 14px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

.bg-brand-gradient {
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    color: #fff;
}