/*
 Theme Name: VIVAIA Child
 Template: astra
 Version: 1.0
 Description: Child theme for VIVAIA POS system
 Text Domain: vivaia-child
*/
.container {
    max-width: 100% !important;
}
table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid #e5e7eb !important;
}
/* Table header with VIVAIA brown */
table thead tr.bg-teal-600 {
    background-color: #804c1a !important;
}
table thead tr th.text-white {
    color: #ffffff !important;
}
/* Buttons with VIVAIA charcoal gray */
button.bg-teal-500,
button#checkout.bg-teal-500 {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
}
button.bg-teal-500:hover,
button#checkout.bg-teal-500:hover {
    background-color: #262626 !important;
}
button.bg-red-500 {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}
button.bg-red-500:hover {
    background-color: #dc2626 !important;
}
/* Clear search button hover */
button#clear-search:hover {
    color: #804c1a !important;
}
/* Fix logo size */
header img.h-6 {
    height: 24px !important;
    max-width: 120px !important;
}
header h1.text-lg {
    font-size: 1.125rem !important;
    margin-left: 0.5rem !important;
}
/* Table layout adjustments */
table td .text-sm.text-gray-500 {
    line-height: 1.2;
    margin-top: 0.25rem;
}
table td {
    vertical-align: top;
}
/* Sidebar layout */
.lg\:w-1\/4 {
    min-width: 250px;
}
.bg-gray-50.p-4.rounded-lg.shadow-sm.sticky.top-4 {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
}
/* Dropdown styling */
#search-dropdown {
    max-height: 300px;
    overflow-y: auto;
}
.dropdown-item {
    transition: background-color 0.2s;
}
.dropdown-item:hover {
    background-color: #f3f4f6 !important;
}
.dropdown-item.bg-gray-200 {
    background-color: #e5e7eb !important;
}
@media (max-width: 1024px) {
    .lg\:w-1\/4 {
        width: 100% !important;
    }
}
@media (max-width: 640px) {
    table {
        min-width: 600px;
    }
    .overflow-x-auto {
        overflow-x: auto;
    }
    .flex-col.sm\:flex-row {
        flex-direction: column !important;
    }
    .w-full.sm\:w-3\/4, .w-full.sm\:w-1\/4 {
        width: 100% !important;
    }
}

@media (min-width: 769px) {
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background-color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    #main-content {
        margin-top: 64px;
    }
}