/* Trip Sheet Container */
.trip-sheet-container {
    max-width: 100%;
    overflow-x: auto;
}

/* Filter Container */
.filter-container {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-container input[type="text"] {
    flex: 1;
    min-width: 250px;
    padding: 8px;
}

.filter-container input[type="datetime-local"] {
    padding: 7px;
}

/* Table Styles */
#trip-sheet-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

#trip-sheet-table th, 
#trip-sheet-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

#trip-sheet-table th {
    background-color: #f2f2f2;
    cursor: pointer;
}

#trip-sheet-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

#trip-sheet-table tr:hover {
    background-color: #f1f1f1;
}

/* Hidden Elements */
.hidden-on-print, 
.hidden-column, 
.hide-on-screen {
    display: none;
}

/* Print Header */
.show-on-print-header {
    display: none;
}

/* Dragging Styles */
.is-dragging {
    opacity: 0.5;
}

.draggable-table__drag {
    z-index: 9999;
    pointer-events: none;
}

/* Responsive Table Container */
.table-container {
    overflow-x: auto;
}

/* Result Count */
#result-count-row {
    font-weight: bold;
    text-align: center;
}

.filter-container select {
    max-width: 160px !important;
}

#tripsheet-print-button {
    border-radius: 4px;
    line-height: unset !important;
}

#from-date, #to-date {
    box-sizing: border-box;
    padding: 5px;
}

.ts-from-date, .ts-to-date {
    width: 16% !important;
}

@media print {
    .hidden-on-print, 
    .filter-container {
        display: none !important;
    }
    
    .show-on-print, 
    .show-on-print-header {
        display: block !important;
    }
    
    .trip-sheet-title {
        text-align: center;
        font-size: 24px;
        margin-bottom: 20px;
    }
}



@media print {
    .show-on-print {
        width: 100% !important;
        border-collapse: collapse;
        table-layout: fixed; /* makes columns distribute evenly */
    }
    .show-on-print td {
        width: 8.33%; /* 100 / 12 columns = 8.33% */
        padding: 4px;
    }
}