/* Custom styles */
body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #FFF1F2 20%, #FEF3C7 40%, #DBEAFE 60%, #FEE2E2 80%);
}

#app-container {
    max-width: 480px; /* Mobile-first default */
    margin: 0 auto;
    min-height: 100vh;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1), 0 4px 15px rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) { /* md breakpoint */
    #app-container {
        max-width: 100%;
        box-shadow: none;
    }
}

.theme-gradient-header {
    /* Hardcoded hex values for gradient */
    background: linear-gradient(90deg, 
        #EC4899, /* pink-500 */
        #EF4444, /* red-500 */
        #3B82F6, /* blue-500 */
        #FACC15  /* yellow-400 */
    );
    background-size: 200% 200%;
    animation: gradient-flow 8s ease infinite;
}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* UPDATED: To match inline styles */
[contenteditable="true"] {
    padding: 10px 8px; /* Taller */
    border: 1px solid #9CA3AF; /* gray-400 (Darker for visibility) */
    border-radius: 6px;
    background-color: white;
    min-width: 60px;
    height: 42px; /* Fixed height */
}

[contenteditable="true"]:focus {
    outline: 2px solid #3B82F6; /* blue-500 */
    border-color: transparent;
    box-shadow: 0 0 0 2px #BFDBFE; /* blue-200 */
}

@media print {
    /* Print styles are now primarily managed in index.html's <style> block for better print.js compatibility */
    body { background: none; }
    #app-container, #main-content, #invoice-view { padding: 0; margin: 0; box-shadow: none; }
    #invoice-to-print { box-shadow: none; border: none; }
    .no-print { display: none; }
}