/* Mobile Dashboard Fixes */
@media (max-width: 768px) {

    /* Fix Products Tab Header on Mobile */
    #tab-content-products .flex.justify-between.items-center {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem;
    }

    #tab-content-products .flex.justify-between.items-center h2 {
        font-size: 1.25rem !important;
        line-height: 1.3;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    #tab-content-products .flex.justify-between.items-center .flex.gap-2 {
        width: 100%;
        flex-direction: column !important;
        gap: 0.5rem;
    }

    #tab-content-products .flex.justify-between.items-center button {
        width: 100% !important;
        justify-content: center;
        white-space: nowrap;
    }

    /* Also fix other similar tab headers */
    .tab-content .flex.justify-between.items-center {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem;
    }

    .tab-content .flex.justify-between.items-center h2 {
        font-size: 1.25rem !important;
        line-height: 1.3;
    }

    .tab-content .flex.justify-between.items-center .flex.gap-2,
    .tab-content .flex.justify-between.items-center>div {
        width: 100%;
    }

    .tab-content .flex.justify-between.items-center button {
        width: 100% !important;
    }

    /* Fix button groups to stack vertically */
    .tab-content .flex.gap-2 {
        flex-direction: column !important;
        width: 100%;
    }

    .tab-content .flex.gap-2 button {
        width: 100% !important;
    }

    /* Hide Main Header on Mobile */
    .main-header {
        display: none !important;
    }
}

/* Product Action Buttons - Make them smaller (global, applies to all screen sizes) */
#products-list button {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    line-height: 1.2;
}

#products-list button i {
    font-size: 0.75rem !important;
}

/* Target action buttons specifically (copy, edit, delete, etc.) */
#products-list .flex.gap-2 button,
#products-list [class*="gap-"] button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
}

/* Icon-only buttons (like delete, duplicate) */
#products-list button:not(:has(span)):not(:has(div)) {
    padding: 0.5rem !important;
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}