html {
    height: 100%;
}

body.bg-image {
    background-image: url('Drone Agri 2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Fix for iOS */
    min-height: 100%;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

body.hub-bg {
    background-color: #111827; /* Fallback color */
    background-image: url('wheat.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100%;
}

/* Mobile optimizations for iPhone and small screens */
@media screen and (max-width: 768px) {
    /* Fix background attachment for mobile */
    body.bg-image, body.hub-bg {
        background-attachment: scroll;
    }
    
    /* Login page mobile optimizations */
    body.bg-image h1 {
        font-size: 3rem !important; /* Smaller title on mobile */
        margin-bottom: 2rem !important;
    }
    
    body.bg-image input {
        width: 280px !important; /* Wider input on mobile */
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    body.bg-image button {
        padding: 12px 32px !important;
        font-size: 18px !important;
    }
    
    /* Hub page mobile optimizations */
    .hub-mobile-stack {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1.5rem !important;
        margin: 0 !important;
    }
    
    .hub-mobile-stack a {
        width: 280px !important;
        padding: 16px 24px !important;
        font-size: 20px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Portfolio page mobile optimizations */
    .portfolio-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .portfolio-card {
        padding: 1rem !important;
    }
    
    .portfolio-title {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Chart containers mobile optimization */
    .chart-container {
        height: 300px !important;
        margin-bottom: 1rem !important;
    }
    
    /* Table responsive */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 300px;
        font-size: 14px !important;
    }
    
    th, td {
        padding: 8px 4px !important;
    }
}