@tailwind base;
@tailwind components;
@tailwind utilities;

*, *::before, *::after {
    box-sizing: border-box;
}

@layer utilities {
    .view-pane {
        animation: fadeIn 0.3s ease-in-out;
    }
}

.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 640px) {
    input[type="number"],
    input[type="text"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

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

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Print optimizations */
@media print {
    @page {
        margin: 0.5cm;
        size: A4;
    }
    
    body {
        background-color: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* Hide non-essential sections for print */
    aside, header, footer, article, .ad-slot, #compare, #custom-compare, #table-controls, .print\:hidden {
        display: none !important;
    }
    
    /* Reformat layout */
    main {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    /* Show chart and summary statically */
    #chart-view {
        position: static !important;
        height: 350px !important;
        display: block !important;
        page-break-inside: avoid;
    }
    
    #summary-view {
        position: static !important;
        display: block !important;
        page-break-inside: avoid;
    }
    
    /* Truncate table to prevent 100-page prints */
    #table-view {
        display: block !important;
        position: relative !important;
        page-break-inside: avoid;
    }
    #breakdown-body tr:nth-child(n+15) {
        display: none !important; /* Only print first 15 rows */
    }
    
    .view-pane {
        animation: none !important;
    }
}