/* assets/style.css */
/* Tailwind handles most styling, adding few custom tweaks */

/* Hide number input spinners for cleaner look */
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;
}

/* Ensure focus highlights are prominent for keyboard navigation */
input.current-reading-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
    border-color: #3b82f6;
}

/* Responsive Table classes */
.table-wrapper {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 1rem;
}

.desktop-table-header {
    display: grid;
    grid-template-columns: 80px 90px 80px 100px 60px 80px 80px 90px;
    gap: 0.5rem;
    min-width: 720px;
    padding: 0.75rem 1rem;
    font-weight: bold;
    background-color: #f3f4f6;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}

.flat-card {
    display: grid;
    grid-template-columns: 80px 90px 80px 100px 60px 80px 80px 90px;
    gap: 0.5rem;
    align-items: center;
    min-width: 720px;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-bottom: 0.25rem;
}

/* Sticky Flat Column for horizontal scrolling */
.desktop-table-header > div:first-child,
.flat-card .col-flat {
    position: sticky;
    left: 0;
    background: inherit;
    z-index: 10;
    box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);
    padding-left: 0.5rem;
}
.desktop-table-header > div:first-child {
    background-color: #f3f4f6;
}
.flat-card .col-flat {
    background-color: white;
}

.mobile-label {
    display: none !important;
}

/* Ensure inputs fit perfectly */
.flat-card input.current-reading-input {
    width: 100%;
    font-size: 1rem;
    padding: 0.25rem 0.5rem;
}

/* Print Styles for PDF Export */
@media print {
    @page { margin: 1cm; size: portrait; }
    body { background: white; margin: 0; padding: 0; font-size: 10pt; color: #000; }
    .no-print, .fixed, .bottom-0, button, #saveAllBtn, select, #searchInput, .filters-container { display: none !important; }
    
    #printHeader { display: block !important; margin-bottom: 20px; font-size: 14pt; font-weight: bold; text-align: center; border-bottom: 1px solid #ccc; padding-bottom: 10px; }
    
    .max-w-5xl { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
    .bg-white { box-shadow: none !important; border: none !important; padding: 0 !important; }
    
    h1 { font-size: 16pt; margin-bottom: 10px; text-align: center; }

    /* Force Table Layout for Print */
    .desktop-table-header {
        display: grid !important;
        grid-template-columns: 1fr 1fr 0.8fr 0.8fr 0.6fr 0.9fr 0.9fr 0.8fr !important;
        gap: 5px !important;
        padding: 5px 0 !important;
        font-weight: bold;
        border-bottom: 2px solid #000 !important;
        background: transparent !important;
        font-size: 10pt;
    }
    
    .flat-card {
        display: grid !important;
        grid-template-columns: 1fr 1fr 0.8fr 0.8fr 0.6fr 0.9fr 0.9fr 0.8fr !important;
        grid-template-areas: none !important; /* disable mobile grid areas */
        gap: 5px !important;
        padding: 4px 0 !important;
        align-items: center;
        border: none !important;
        border-bottom: 1px solid #ddd !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
        font-size: 10pt;
        page-break-inside: avoid;
    }
    
    /* Reset mobile styles */
    .flat-card > div {
        grid-area: auto !important;
        display: block !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        text-align: left !important;
        justify-content: flex-start !important;
        font-size: 10pt !important;
    }
    
    .flat-card .col-flat {
        font-size: 10pt !important;
        font-weight: bold !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        white-space: nowrap !important;
    }
    
    .flat-card .col-flat span, .flat-card .col-flat div {
        font-size: 9pt !important;
        margin: 0 !important;
        margin-right: 4px !important;
    }
    
    .mobile-label { display: none !important; }
    
    .col-status span {
        background: transparent !important;
        padding: 0 !important;
        font-size: 9pt !important;
    }
    
    input.current-reading-input { 
        border: none !important; 
        background: transparent !important; 
        padding: 0 !important;
        width: 100% !important;
        text-align: left !important;
        font-size: 10pt !important;
    }
    
    .col-total { font-weight: bold !important; font-size: 10pt !important; background: transparent !important; }
}