/* Custom styles for ISBN Lot Optimizer */

/* Compact layout - reduce overall spacing */
body {
    font-size: 13px;
    padding-bottom: 36px; /* Space for fixed footer */
}

/* Ensure main content uses full viewport height */
main {
    min-height: calc(100vh - 36px - 48px); /* viewport - footer - header */
}

/* Make selected table rows stand out */
.table-row-selected {
    @apply bg-blue-50 border-l-2 border-blue-500;
}

/* Hover effects for table rows */
.table-row:hover {
    @apply bg-gray-50 cursor-pointer;
}

/* Badge styles - more compact */
.badge {
    @apply inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-info {
    @apply bg-blue-100 text-blue-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

/* Smooth transitions */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Focus styles */
input:focus, select:focus, button:focus {
    outline: none;
}

/* Book table scrolling container */
#book-table-container {
    /* Ensure the container can scroll */
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent content from breaking out */
    contain: strict;
    /* Critical: use flex-1 to fill available space */
    flex: 1 1 0;
    min-height: 0; /* Required for flex children to respect scrolling */
}

/* Book table wrapper - ensure it doesn't expand parent */
#book-table {
    /* Allow table to size naturally within scrollable container */
    display: block;
    width: 100%;
    height: auto;
}

/* Book table styling */
#book-table table {
    /* Full width within container */
    width: 100%;
    table-layout: auto;
}

/* Book detail panel - ensure proper scrolling */
#book-detail {
    /* Make sure content scrolls properly */
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent layout shifts */
    contain: strict;
    /* Use flex-1 to fill available space */
    flex: 1 1 0;
    min-height: 0; /* Required for flex children to respect scrolling */
}

/* Lots table scrolling container */
#lots-table-container {
    /* Ensure the container can scroll */
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent content from breaking out */
    contain: strict;
    /* Critical: use flex-1 to fill available space */
    flex: 1 1 0;
    min-height: 0; /* Required for flex children to respect scrolling */
}

/* Lots table wrapper - ensure it doesn't expand parent */
#lots-table {
    /* Allow table to size naturally within scrollable container */
    display: block;
    width: 100%;
    height: auto;
}

/* Lots table styling */
#lots-table table {
    /* Full width within container */
    width: 100%;
    table-layout: auto;
}

/* Lot detail panel - ensure proper scrolling */
#lot-detail {
    /* Make sure content scrolls properly */
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent layout shifts */
    contain: strict;
    /* Use flex-1 to fill available space */
    flex: 1 1 0;
    min-height: 0; /* Required for flex children to respect scrolling */
}

/* Alpine.js cloak - hide elements until Alpine is ready */
[x-cloak] {
    display: none !important;
}