/* CSS variables are inherited from global app.css - do not redefine */
/* Scope all Products page styles to .products-management to avoid affecting sidebar */
/* This ensures sidebar uses only global app.css styles */

/* ============================= */
/* Navigation Loader Overlay */
/* ============================= */
.navigation-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.navigation-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid hsl(var(--border));
    border-top-color: hsl(var(--primary));
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loader-text {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin: 0;
    font-weight: 500;
}

/* ============================= */
/* Category Management - Table */
/* ============================= */
.categories-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    /* row gap */
}

.categories-table thead th {
    font-size: 0.8rem;
    font-weight: 700;
    color: hsl(var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid hsl(var(--border));
    padding: 0.5rem 0.75rem;
}

.categories-table tbody tr {
    background: hsl(var(--card));
    box-shadow: var(--shadow-card);
}

.categories-table tbody td {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
    border-top: 1px solid hsl(var(--border));
}

.categories-table tbody tr:hover {
    background: hsl(var(--muted));
}

.categories-table .col-name {
    width: 40%;
}

.categories-table .col-added {
    width: 22%;
}

.categories-table .col-updated {
    width: 22%;
}

.categories-table .col-actions {
    width: 16%;
}

.badge-date {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 999px;
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    border: 1px solid hsl(var(--border));
}

.badge-muted {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 999px;
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    border: 1px dashed hsl(var(--border));
}

.badge-secondary {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 999px;
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    border: 1px solid hsl(var(--border));
}

.badge-default {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 999px;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: 1px solid hsl(var(--primary));
}

.badge-destructive {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 999px;
    background: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    border: 1px solid hsl(var(--destructive));
}

/* Icon-only action buttons */
.btn.btn-sm {
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
}

.btn-outline-primary {
    border: 1px solid hsl(var(--ring));
    color: hsl(var(--foreground));
}

.btn-outline-primary:hover {
    background: hsl(var(--primary) / 0.08);
}

.btn-outline-danger {
    border: 1px solid hsl(var(--destructive));
    color: hsl(var(--destructive));
}

.btn-outline-danger:hover {
    background: hsl(var(--destructive) / 0.08);
}

/* Mobile tweaks */
@media (max-width: 768px) {
    .categories-table thead th {
        font-size: 0.72rem;
    }

    .categories-table tbody td {
        padding: 0.5rem 0.6rem;
    }

    .categories-table .col-actions {
        width: 22%;
    }

    .btn.btn-sm {
        padding: 0.3rem 0.45rem;
        font-size: 0.78rem;
    }
}

/* Modern Toast Cards (inspired by Uiverse snippet) */
.toast-card {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: min(90vw, 22rem);
    min-height: 3.75rem;
    background: #ffffff;
    color: #111827;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    opacity: 0;
    animation: slideIn 0.25s ease-out forwards;
}

.toast-card .toast-accent {
    width: 8px;
    height: 100%;
}

.toast-card.success .toast-accent {
    background: #66cdaa;
}

.toast-card.warning .toast-accent {
    background: #ef4444;
}

.toast-card .toast-body {
    flex: 1;
    padding: 0.5rem 0.25rem 0.5rem 0.25rem;
    overflow: hidden;
}

.toast-card .toast-title {
    margin: 0.2rem 0 0.15rem;
    font-weight: 700;
    line-height: 1.1;
    font-size: 1rem;
}

.toast-card.success .toast-title {
    color: #66cdaa;
}

.toast-card.warning .toast-title {
    color: #ef4444;
}

.toast-card .toast-text {
    margin: 0;
    color: #6b7280;
    line-height: 1.2;
    font-size: 0.85rem;
    max-height: 2.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toast-card .toast-close {
    width: 2rem;
    height: 100%;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
}

.toast-card.fade-out {
    animation: fadeOut 0.2s ease-out forwards;
}

/* Dark mode handled by global app.css */
/* Base styles inherited from global app.css */
/* Body styles inherited from global app.css */
.products-management {
    position: relative;
    min-height: 100vh;
    padding: 1.5rem;
}

/* Utility Classes */
.icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.gradient-text {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    /* Standard property for future compatibility */
    color: hsl(var(--foreground));
    /* Fallback for unsupported browsers */
}

.gradient-text-animated {
    background: linear-gradient(135deg, hsl(180 100% 50%), hsl(280 100% 60%), hsl(330 100% 60%), hsl(180 100% 50%));
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    /* Standard property for future compatibility */
    color: hsl(var(--foreground));
    /* Fallback for unsupported browsers */
    animation: gradient 4s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes shine {
    0% {
        transform: translateX(-200%) skewX(12deg);
    }

    100% {
        transform: translateX(200%) skewX(12deg);
    }
}

/* Cards */
.card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.card-header {
    padding: 1.5rem;
    border-bottom: 1px solid hsl(var(--border));
    background: linear-gradient(to right, hsl(var(--primary) / 0.05), hsl(var(--primary) / 0.1));
}

.card-content {
    padding: 1.5rem;
    padding-top: 0.5rem;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-decoration: none;
    background: none;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-color: hsl(var(--primary));
}

.btn-primary:hover {
    background-color: hsl(var(--primary) / 0.9);
}

.btn-outline {
    border-color: hsl(var(--border));
    background-color: transparent;
    color: hsl(var(--foreground));
}

.btn-outline:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.btn-destructive {
    background: linear-gradient(135deg, hsl(var(--destructive)), hsl(var(--destructive) / 0.9));
    color: hsl(var(--destructive-foreground));
}

.btn-destructive:hover {
    background: linear-gradient(135deg, hsl(var(--destructive) / 0.9), hsl(var(--destructive) / 0.8));
}

.btn-ghost {
    background: transparent;
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
}

.btn-ghost:hover {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
}

.simple-gradient-btn {
    --btn-curve-size: 0.5em;
    color: white;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5em 1.5em;
    font-size: 17px;
    font-weight: 600;
    border: 0;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    clip-path: polygon(0% var(--btn-curve-size),
            var(--btn-curve-size) 0,
            100% 0,
            100% calc(100% - var(--btn-curve-size)),
            calc(100% - var(--btn-curve-size)) 100%,
            0 100%);
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
    transition: all 0.2s ease;
}

.simple-gradient-btn:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

/* Top Actions */
.top-actions {
    position: sticky;
    top: 1.25rem;
    z-index: 40;
    background: hsl(var(--background) / 0.95);
    backdrop-filter: blur(8px);
    padding: 0.5rem 0 0.75rem;
    margin: -3.0rem -1.5rem 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.actions-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    justify-content: flex-start;
    align-items: center;
}

/* Make buttons responsive - they will shrink to fit */
.actions-container .simple-gradient-btn,
.actions-container .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Adjust button size for smaller screens */
@media (max-width: 1400px) {
    .actions-container {
        gap: 0.4rem;
    }

    .actions-container .simple-gradient-btn,
    .actions-container .btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }

    .actions-container .icon {
        width: 0.875rem;
        height: 0.875rem;
    }
}

@media (max-width: 1200px) {
    .actions-container {
        gap: 0.35rem;
    }

    .actions-container .simple-gradient-btn,
    .actions-container .btn {
        padding: 0.35rem 0.5rem;
        font-size: 0.75rem;
    }
}

@media (min-width: 640px) {
    .actions-container {
        justify-content: flex-start;
    }
}

/* Search and Filter */
.search-filter-section {
    position: sticky;
    top: 8rem;
    z-index: 30;
    background: hsl(var(--card) / 0.95);
    backdrop-filter: blur(8px);
    margin-bottom: 1rem;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
    will-change: transform, opacity;
}

/* Hide search filter section on mobile */
@media (max-width: 768px) {
    .search-filter-section {
        display: none !important;
    }

    .products-card {
        margin-bottom: 40px;
    }
}

.search-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .search-filter-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.search-container {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(var(--muted-foreground));
    width: 1rem;
    height: 1rem;
    z-index: 10;
}

.search-input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.5rem;
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 2px);
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    transition: var(--transition-smooth);
}

.search-input:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.form-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 2px);
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    transition: var(--transition-smooth);
}

/* Products Section */
.products-section {
    margin-top: 1.5rem;
}

.mobile-products-header {
    background: hsl(var(--card));
    border-bottom: 1px solid hsl(var(--border));
    padding: 1rem;
}

.products-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.products-title {
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.column-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 4px);
    background: hsl(var(--background));
}

.column-toggle:hover {
    background: hsl(var(--muted));
}

.products-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.products-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Desktop: Make only card-content scrollable with fixed height */
@media (min-width: 769px) {
    .products-content {
        max-height: calc(100vh - 20rem);
        overflow: hidden;
    }

    .products-content .card-content {
        overflow-y: auto;
        height: 100%;
    }
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .products-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* ============================= */
/* Product Details Modal Styles */
/* ============================= */
/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.product-details-modal {
    max-width: 45rem;
    /* Reduced from 50rem */
    max-height: 85vh;
    /* Reduced from 90vh */
    overflow-y: auto;
}

.product-details-image-section {
    margin-bottom: 1.5rem;
}

.product-image-container {
    width: 100%;
    max-width: 20rem;
    /* Reasonable size for modal */
    margin: 0 auto;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid hsl(var(--border));
}

.product-details-image {
    width: 100%;
    height: 10rem;
    /* Back to original size */
    object-fit: contain;
    /* Keep contain to show full image */
    object-position: center;
    background-color: white;
    display: block;
}

.product-details-info-section {
    margin-bottom: 1.5rem;
}

.product-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.product-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.product-info-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    /* Reduced from 0.875rem */
    font-weight: 600;
    color: hsl(var(--muted-foreground));
}

.product-info-value {
    font-size: 0.8rem;
    /* Reduced from 0.875rem */
    color: hsl(var(--foreground));
    font-weight: 500;
}

.product-description-section {
    margin-top: 0.75rem;
    /* Reduced from 1rem */
}

.product-description-text {
    font-size: 0.8rem;
    /* Reduced from 0.875rem */
    color: hsl(var(--muted-foreground));
    line-height: 1.4;
    /* Reduced from 1.5 */
    margin: 0.375rem 0 0 0;
    /* Reduced from 0.5rem */
    padding: 0.5rem;
    /* Reduced from 0.75rem */
    background: hsl(var(--muted) / 0.3);
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid hsl(var(--border));
}

.product-variants-section {
    margin-bottom: 0.75rem;
    /* Reduced from 1rem */
}

.variants-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    /* Reduced from 1rem */
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 0.75rem;
    /* Reduced from 1rem */
}

.variants-table-container {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
}

.variants-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.variants-table thead {
    background: hsl(var(--muted));
}

.variants-table th {
    padding: 0.5rem 0.375rem;
    /* Reduced from 0.75rem 0.5rem */
    text-align: left;
    font-weight: 600;
    color: hsl(var(--foreground));
    border-bottom: 1px solid hsl(var(--border));
    font-size: 0.75rem;
    /* Added smaller font size */
}

.variants-table td {
    padding: 0.5rem 0.375rem;
    /* Reduced from 0.75rem 0.5rem */
    border-bottom: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
    font-size: 0.75rem;
    /* Added smaller font size */
}

.variants-table tbody tr:last-child td {
    border-bottom: none;
}

.variants-table tbody tr:hover {
    background: hsl(var(--muted) / 0.3);
}

.variant-size {
    font-weight: 500;
}

.variant-mrp,
.variant-customer-price,
.variant-fitter-price {
    font-weight: 500;
    color: hsl(var(--primary));
}

.variant-discount {
    color: hsl(var(--accent));
    font-weight: 500;
}

.stock-indicator {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: calc(var(--radius) - 2px);
    font-size: 0.75rem;
    font-weight: 500;
}

.stock-indicator.stock-in {
    background: hsl(var(--success) / 0.1);
    color: hsl(var(--success));
    border: 1px solid hsl(var(--success) / 0.3);
}

.stock-indicator.stock-low {
    background: hsl(var(--warning) / 0.1);
    color: hsl(var(--warning));
    border: 1px solid hsl(var(--warning) / 0.3);
}

.stock-indicator.stock-out {
    background: hsl(var(--destructive) / 0.1);
    color: hsl(var(--destructive));
    border: 1px solid hsl(var(--destructive) / 0.3);
}

.no-variants-message {
    padding: 2rem;
    text-align: center;
    color: hsl(var(--muted-foreground));
    background: hsl(var(--muted) / 0.3);
}

.no-variants-message .icon {
    width: 2rem;
    height: 2rem;
    margin: 0 auto 1rem;
}

.no-variants-message p {
    margin: 0;
    font-size: 0.875rem;
}

.product-details-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* Accessibility and Focus Styles */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Focus indicators for keyboard navigation */
*:focus {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
    border-radius: calc(var(--radius) - 2px);
}

/* Enhanced focus for interactive elements */
button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus,
[tabindex]:focus {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
    box-shadow: 0 0 0 4px hsl(var(--ring) / 0.2);
    transition: box-shadow 0.2s ease;
}

/* Focus styles for table elements */
.variants-table th:focus,
.variants-table td:focus {
    background: hsl(var(--primary) / 0.1);
    outline: 2px solid hsl(var(--ring));
    outline-offset: -2px;
    position: relative;
    z-index: 1;
}

/* Focus styles for modal elements */
.modal-content:focus-within {
    box-shadow: var(--shadow-elevated), 0 0 0 4px hsl(var(--ring) / 0.2);
}

.btn-close:focus {
    background: hsl(var(--destructive) / 0.1);
    color: hsl(var(--destructive));
    outline: 2px solid hsl(var(--destructive));
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    *:focus {
        outline: 3px solid;
        outline-offset: 2px;
    }

    .variants-table th:focus,
    .variants-table td:focus {
        outline: 3px solid;
        outline-offset: -3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Skip link for keyboard navigation */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 6px;
}

/* Live region for screen reader announcements */
#screenReaderAnnouncements {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Table navigation instructions */
#tableNavigationInstructions {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Enhanced button focus states */
.btn:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
    box-shadow: 0 0 0 4px hsl(var(--ring) / 0.2);
}

.btn-primary:focus-visible {
    outline-color: hsl(var(--primary-foreground));
    box-shadow: 0 0 0 4px hsl(var(--primary) / 0.3);
}

.btn-destructive:focus-visible {
    outline-color: hsl(var(--destructive-foreground));
    box-shadow: 0 0 0 4px hsl(var(--destructive) / 0.3);
}

/* Modal focus trap indicator */
.modal-overlay[aria-modal="true"] {
    isolation: isolate;
}

/* Keyboard navigation hints */
.keyboard-hint {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    font-style: italic;
    margin-top: 0.25rem;
}

/* Responsive adjustments for product details modal */
@media (max-width: 768px) {
    .product-details-modal {
        max-width: 95vw;
        margin: 1rem;
    }

    .product-info-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .variants-table {
        font-size: 0.75rem;
    }

    .variants-table th,
    .variants-table td {
        padding: 0.5rem 0.375rem;
    }

    .product-details-actions {
        flex-direction: column;
    }

    /* Adjust focus indicators for mobile */
    *:focus {
        outline-width: 3px;
    }

    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    a:focus,
    [tabindex]:focus {
        outline-width: 3px;
        box-shadow: 0 0 0 6px hsl(var(--ring) / 0.2);
    }
}

/* ============================= */
/* Product Card Styles */
/* ============================= */
/* Product Card Base Styles */
.product-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: var(--transition-smooth);
    position: relative;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
}

.product-card:active {
    transform: translateY(0);
}

/* Product Image */
.product-image {
    position: relative;
    width: 100%;
    height: 9.6rem;
    /* 153.6px - 20% reduction from 192px */
    overflow: hidden;
    background: hsl(var(--muted));
    border-bottom: 1px solid hsl(var(--border));
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: white;
    transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
    transform: none;
}

/* Product Content - Compact Desktop Layout */
.product-content {
    padding: 0.75rem;
}

.product-name {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

.product-card:hover .product-name {
    color: hsl(var(--primary));
}

/* Product Rating */
.product-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.rating-stars {
    display: flex;
    gap: 0.125rem;
}

.star {
    width: 0.75rem;
    height: 0.75rem;
}

.star-filled {
    color: #fbbf24;
    fill: currentColor;
}

.star-empty {
    color: hsl(var(--muted-foreground));
}

.rating-value {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    margin-left: 0.25rem;
}

/* Product Description */
.product-description {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Product Details */
.product-details {
    margin-bottom: 0.75rem;
}

.product-detail-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.product-detail-row:last-child {
    margin-bottom: 0;
}

.product-detail-label {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    min-width: 2.5rem;
}

.product-sizes {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    overflow: hidden;
}

.size-badge,
.badge-secondary {
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    padding: 0.125rem 0.25rem;
    border-radius: calc(var(--radius) - 4px);
    font-size: 0.75rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    border: none;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.size-badge:hover {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.size-badge.selected {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.badge-outline {
    border: 1px solid hsl(var(--border));
    background: transparent;
    padding: 0.125rem 0.25rem;
    border-radius: calc(var(--radius) - 4px);
    font-size: 0.75rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

/* Product Pricing */
.product-pricing {
    margin-bottom: 0.75rem;
}

.pricing-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
}

.price-mrp {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    text-decoration: line-through;
    flex-shrink: 0;
}

.price-selling {
    font-size: 0.75rem;
    font-weight: 700;
    color: hsl(var(--primary));
    flex-shrink: 0;
}

.price-filter {
    font-size: 0.625rem;
    font-weight: 700;
    color: hsl(var(--accent));
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .price-filter {
        font-size: 0.75rem;
    }
}

.stock-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.status-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: calc(var(--radius) - 4px);
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.in-stock {
    background: hsl(var(--success) / 0.1);
    color: hsl(var(--success));
}

.status-badge.low-stock {
    background: hsl(var(--warning) / 0.1);
    color: hsl(var(--warning));
}

.status-badge.out-of-stock {
    background: hsl(var(--destructive) / 0.1);
    color: hsl(var(--destructive));
}

.stock-info {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

/* Product Actions */
.product-actions {
    display: flex;
    gap: 0.5rem;
}

.product-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem;
    font-size: 0.75rem;
    border: none;
    border-radius: calc(var(--radius) - 2px);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.product-btn-edit {
    background: var(--gradient-primary);
    color: white;
}

.product-btn-edit:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}

.product-btn-delete {
    background: linear-gradient(135deg, hsl(var(--destructive)), hsl(var(--destructive) / 0.9));
    color: white;
}

.product-btn-delete:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}

/* Image indicator badge for multiple images */
.image-indicator {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: hsl(var(--primary));
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 10;
}

/* Mobile: Restore original spacing for better readability */
@media (max-width: 768px) {

    /* Image indicator positioned higher on mobile */
    .image-indicator {
        bottom: 80px !important;
    }

    .product-content {
        padding: 1rem;
        gap: 0.75rem;
    }

    .product-name {
        font-size: 1rem;
        line-height: 1.4;
    }

    .product-rating {
        gap: 0.5rem;
    }

    .rating-stars {
        gap: 0.125rem;
    }

    .star {
        width: 0.875rem;
        height: 0.875rem;
    }

    .rating-value {
        font-size: 0.75rem;
    }

    .product-description {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .product-details {
        gap: 0.5rem;
        margin-bottom: 0;
    }

    .product-detail-row {
        gap: 0.5rem;
    }

    .product-detail-row:last-child {
        margin-bottom: 8px;
    }

    .product-detail-label {
        font-size: 0.75rem;
    }

    .badge-outline {
        padding: 0.125rem 0.5rem;
        font-size: 0.75rem;
    }

    .product-sizes {
        gap: 0.25rem;
    }

    .size-badge {
        padding: 0.125rem 0.375rem;
        font-size: 0.75rem;
    }

    .product-pricing {
        gap: 0.5rem;
    }

    .pricing-row {
        gap: 0.5rem;
    }

    .price-mrp {
        font-size: 0.75rem;
    }

    .price-selling {
        font-size: 0.875rem;
    }

    .price-filter {
        font-size: 0.875rem;
    }

    .stock-status-row {
        gap: 0.5rem;
    }

    .status-badge {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    .stock-info {
        font-size: 0.75rem;
    }

    .product-actions {
        gap: 0.5rem;
        margin-top: 0.5rem;
        flex-direction: row;
    }

    .product-btn {
        gap: 0.25rem;
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* Click indicator */
.product-card::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    background: hsl(var(--primary) / 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-smooth);
    z-index: 10;
    backdrop-filter: blur(4px);
}

.product-card:hover::before {
    opacity: 1;
}

.product-card::after {
    content: '👁️';
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    font-size: 0.875rem;
    opacity: 0;
    transition: var(--transition-smooth);
    z-index: 11;
}

.product-card:hover::after {
    opacity: 1;
}

/* Responsive Product Card Styles */
@media (max-width: 768px) {
    .product-image {
        height: 10rem;
        /* 160px */
    }

    .product-content {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .product-name {
        font-size: 0.875rem;
    }

    .product-btn {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .product-image {
        height: 8rem;
        /* 128px */
    }

    .product-content {
        padding: 0.5rem;
    }

    .product-name {
        font-size: 0.8rem;
        -webkit-line-clamp: 1;
    }

    .product-description {
        font-size: 0.75rem;
        -webkit-line-clamp: 1;
    }
}

.products-card {
    width: 100%;
}

/* Hide mobile products on desktop and vice versa */
@media (min-width: 769px) {
    .products-card.mobile-only {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .products-card.desktop-only {
        display: none !important;
    }
}

/* No Products Message */
.no-products {
    text-align: center;
    padding: 3rem 0;
}

.no-products-icon {
    width: 3rem;
    height: 3rem;
    color: hsl(var(--muted-foreground));
    margin: 0 auto 1rem;
}

.no-products-title {
    font-size: 1.125rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    margin-bottom: 0.5rem;
}

.no-products-text {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

/* FAB System - Mobile Only */
.fab-system {
    position: fixed;
    bottom: 5rem;
    right: 1rem;
    z-index: 60;
    pointer-events: none;
    display: none;
    /* Hidden on desktop */
}

/* Show FAB only on mobile */
@media (max-width: 768px) {
    .fab-system {
        display: block;
    }
}

.fab-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    transition: var(--transition-smooth);
    opacity: 0;
    visibility: hidden;
    z-index: 40;
    pointer-events: none;
}

.fab-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.fab-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    position: relative;
    z-index: 60;
    pointer-events: none;
    /* Allow clicks to pass through when closed */
}

.fab-options {
    display: none;
    /* Completely hidden when closed */
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    transition: var(--transition-smooth);
    opacity: 0;
    transform: translateY(-1rem);
    pointer-events: none;
}

.fab-options.active {
    display: flex;
    /* Show when active */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    /* Enable clicks when active */
}

.fab-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: var(--transition-smooth);
    opacity: 0;
    transform: translateX(1.25rem);
}

.fab-options.active .fab-option {
    opacity: 1;
    transform: translateX(0);
}

.fab-label {
    background: hsl(var(--card) / 0.95);
    backdrop-filter: blur(8px);
    padding: 0.5rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    box-shadow: var(--shadow-card);
    border: 1px solid hsl(var(--border) / 0.5);
    cursor: pointer;
    transition: var(--transition-smooth);
    pointer-events: auto;
}

.fab-label:hover {
    background: hsl(var(--primary) / 0.1);
}

.fab-btn {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-elevated);
    transition: var(--transition-smooth);
    color: white;
    pointer-events: auto;
}

.fab-btn:hover {
    transform: scale(1.05);
}

.fab-advertisement {
    background: linear-gradient(135deg, hsl(340 82% 52%), hsl(340 82% 62%));
}

.fab-size {
    background: linear-gradient(135deg, hsl(30 100% 50%), hsl(30 100% 60%));
}

.fab-product {
    background: linear-gradient(135deg, hsl(38 92% 50%), hsl(38 92% 60%));
}

.fab-subcategory {
    background: linear-gradient(135deg, hsl(142 76% 36%), hsl(142 76% 46%));
}

.fab-category {
    background: linear-gradient(135deg, hsl(217 91% 60%), hsl(217 91% 70%));
}

.fab-brand {
    background: linear-gradient(135deg, hsl(280 100% 70%), hsl(300 100% 80%));
}

.fab-main {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.8));
    color: hsl(var(--primary-foreground));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-elevated);
    transition: var(--transition-smooth);
    pointer-events: auto;
    /* Ensure FAB main button is clickable */
}

.fab-main:hover {
    transform: scale(1.05);
}

.fab-main.rotate {
    transform: rotate(45deg);
}

/* Mobile Search Bar */
/* Brand Management Styles */
.management-item {
    background: hsl(var(--card));
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
    overflow: hidden;
}

.management-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
}

.management-item-content {
    padding: 1.25rem;
}

.management-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.management-item-info {
    flex: 1;
}

.management-item-title {
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin: 0 0 0.25rem 0;
}

.management-item-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    margin: 0;
}

.management-item-actions {
    display: flex;
    gap: 0.5rem;
}

.management-item-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: 1px solid hsl(var(--border));
    background: transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: var(--transition-smooth);
}

.management-item-btn:hover {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
}

.management-item-btn.destructive {
    color: hsl(var(--destructive));
    border-color: hsl(var(--destructive) / 0.2);
}

.management-item-btn.destructive:hover {
    background: hsl(var(--destructive) / 0.1);
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: hsl(0 0% 0% / 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
}

.modal-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: hsl(var(--card));
    border-radius: var(--radius);
    width: 100%;
    max-width: 28rem;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-elevated);
    transform: translateY(1rem);
    transition: transform 0.2s ease-in-out;
    border: 1px solid hsl(var(--border));
    backdrop-filter: saturate(140%) blur(6px);
}

.modal-overlay:not(.hidden) .modal-content {
    transform: translateY(0);
}

.modal-header {
    padding: 1rem 1.25rem;
    /* Reduced from 1.25rem 1.5rem */
    border-bottom: 1px solid hsl(var(--border));
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, hsl(var(--primary) / 0.08), hsl(var(--accent) / 0.08));
}

.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.modal-title {
    font-size: 1rem;
    /* Reduced from 1.125rem */
    font-weight: 700;
    letter-spacing: 0.2px;
}

.close-button {
    background: none;
    border: none;
    color: hsl(var(--muted-foreground));
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s ease-in-out;
}

.close-button:hover {
    color: hsl(var(--foreground));
}

.modal-body {
    padding: 1rem;
    /* Reduced from 1.5rem */
}

.modal-footer,
.form-actions {
    padding: 0.75rem 1rem;
    /* Reduced from 1rem 1.5rem */
    border-top: 1px solid hsl(var(--border));
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    /* Reduced from 0.75rem */
    background: linear-gradient(180deg, hsl(var(--card)), hsl(var(--card) / 0.9));
}

/* Enhanced primary button */
.btn-primary {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.85));
    border: 1px solid hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.btn-primary:hover {
    filter: brightness(1.05);
}

/* Success Message */
.success-message {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, hsl(var(--success)), hsl(var(--accent)));
    color: white;
    padding: 0.5rem 0.8rem;
    border-radius: 0.45rem;
    box-shadow: 0 10px 25px hsl(142 76% 26% / 0.35);
    z-index: 1000;
    opacity: 0;
    animation: slideIn 0.3s ease-out forwards;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 180px;
    font-size: 0.8rem;
}

/* Optional progress bar */
.success-message::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    height: 3px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    width: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), transparent);
    animation: toastProgress 5s linear forwards;
}

.success-message.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translate(-50%, 1rem);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -1rem);
    }
}

@keyframes toastProgress {
    from {
        width: 100%;
        opacity: 1;
    }

    to {
        width: 0%;
        opacity: 0.4;
    }
}

/* Error toast to match style */
.error-message {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, hsl(var(--destructive)), #ff6b6b);
    color: white;
    padding: 0.9rem 1.25rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px hsl(0 84% 40% / 0.35);
    z-index: 1000;
    opacity: 0;
    animation: slideIn 0.3s ease-out forwards;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 280px;
}

/* Loading and Error States */
.loading,
.no-items,
.error {
    padding: 2rem;
    text-align: center;
    color: hsl(var(--muted-foreground));
    grid-column: 1 / -1;
}

.error {
    color: hsl(var(--destructive));
}

/* Form Styles */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: hsl(var(--foreground));
}

.form-control {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    background: hsl(var(--input));
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-control:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

/* Invalid input feedback */
.form-control.is-invalid {
    border-color: hsl(var(--destructive));
    box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.15);
}

.invalid-feedback {
    display: none;
    margin-top: 0.375rem;
    font-size: 0.85rem;
    color: hsl(var(--destructive));
    font-weight: 600;
}

.form-control.is-invalid+.invalid-feedback {
    display: block;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
}

.btn-primary {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.btn-primary:hover {
    background: hsl(var(--primary) / 0.9);
}

.btn-secondary {
    background: transparent;
    color: hsl(var(--foreground));
    border-color: hsl(var(--border));
}

.btn-secondary:hover {
    background: hsl(var(--muted));
}

.search-card {
    border: 1px solid hsl(var(--primary) / 0.2);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.search-input-container {
    position: relative;
}

.close-search-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-search-btn:hover {
    background: hsl(var(--primary) / 0.1);
}

/* Management sections */
.management-sections {
    margin-bottom: 1.5rem;
}

.management-section {
    margin-bottom: 1.5rem;
}

/* Show/hide utility */
.hidden {
    display: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .products-management {
        padding: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Header content spacing */
    .header-content {
        margin-top: 10px;
    }

    /* ===== MANAGEMENT SECTIONS (Category, Size, Subcategory, Brand) ===== */
    .management-sections {
        margin-top: 20px;
        margin-bottom: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .management-section {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    .management-section .card {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    /* 1. Card Header - Fixed */
    .management-section .card-header {
        position: fixed;
        top: 4rem;
        left: 0;
        right: 0;
        z-index: 45;
        background: hsl(var(--card));
        border-bottom: 1px solid hsl(var(--border));
        padding: 1rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Card Title - Responsive for mobile */
    .management-section .card-title {
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 1;
        min-width: 0;
    }

    .management-section .card-title .icon {
        flex-shrink: 0;
        width: 1rem;
        height: 1rem;
    }

    /* Header Content - Ensure single row */
    .management-section .header-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        flex-wrap: nowrap;
    }

    .management-section .header-content .btn {
        flex-shrink: 0;
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
        white-space: nowrap;
    }

    .management-section .header-content .btn .icon {
        width: 0.875rem;
        height: 0.875rem;
    }

    /* 2. Search Container - Fixed below card header */
    .management-section .card-content>div:first-child {
        position: fixed;
        top: 8.5rem;
        left: 0;
        right: 0;
        z-index: 40;
        background: hsl(var(--card));
        padding: 1rem;
        border-bottom: 1px solid hsl(var(--border));
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        margin-bottom: 0 !important;
    }

    /* Card Content Container */
    .management-section .card-content {
        padding-top: 11rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }

    /* Product Form - No search container, so less padding */
    #productForm .card-content {
        padding-top: 5rem;
        overflow-y: auto;
    }

    /* Table Container */
    .management-section .table-responsive {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        border: 1px solid hsl(var(--border));
        border-radius: var(--radius);
        background: hsl(var(--card));
    }

    /* Table Structure */
    .management-section .categories-table {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    /* 3. Table Header - Fixed (not sticky) */
    .management-section .categories-table thead {
        position: fixed;
        top: 13rem;
        left: 1rem;
        right: 1rem;
        z-index: 35;
        flex-shrink: 0;
        display: block;
        background: hsl(var(--muted));
        border: 1px solid hsl(var(--border));
        border-bottom: 2px solid hsl(var(--border));
        border-radius: var(--radius) var(--radius) 0 0;
    }

    .management-section .categories-table thead tr {
        display: flex;
        width: 100%;
    }

    .management-section .categories-table thead th {
        flex: 1;
        min-width: 0;
        padding: 0.5rem 0.6rem;
        font-size: 0.72rem;
        text-align: left;
    }

    /* 4. Table Body Wrapper - SCROLLABLE CONTAINER */
    .management-section .categories-table .tbody-wrapper {
        padding-top: 2.5rem;
        flex: 1;
        display: block;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }

    /* 5. Table Body - Content */
    .management-section .categories-table tbody {
        display: block;
    }

    .management-section .categories-table tbody tr {
        display: flex;
        width: 100%;
        background: hsl(var(--card));
        border-bottom: 1px solid hsl(var(--border));
    }

    .management-section .categories-table tbody tr:first-child {
        border-top: none;
    }

    .management-section .categories-table tbody tr:hover {
        background: hsl(var(--muted) / 0.5);
    }

    .management-section .categories-table tbody td {
        flex: 1;
        min-width: 0;
        padding: 0.5rem 0.6rem;
        vertical-align: middle;
    }

    /* ===== PRODUCTS SECTION ===== */
    .products-section {
        margin-top: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
    }

    .products-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    .products-card .card-header {
        position: fixed;
        top: 3rem;
        left: 0;
        right: 0;
        z-index: 45;
        background: hsl(var(--card));
        border-bottom: 1px solid hsl(var(--border));
        padding: 1rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .products-card .products-content {
        margin-top: 4.5rem;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .products-card .card-content {
        padding: 1rem;
        padding-top: 0;
    }

    .top-actions {
        display: none;
    }

    .search-filter-section {
        display: none;
    }
}

/* Spinner animation for loading states */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Hidden utility class */
.hidden {
    display: none !important;
}

/* ============================= */
/* Product Details Modal Styles */
/* ============================= */
/* Product Details Modal Container */
.product-details-modal {
    max-width: 45rem;
    /* Reduced from 56rem (896px) */
    width: 90vw;
    /* Reduced from 95vw */
    max-height: 85vh;
    /* Reduced from 90vh */
    overflow-y: auto;
    animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modal animations */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-2rem) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-overlay.hidden .product-details-modal {
    animation: modalSlideOut 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes modalSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-2rem) scale(0.95);
    }
}

/* Product Image Section */
.product-details-image-section {
    margin-bottom: 1rem;
    /* Reduced from 1.5rem */
}

.product-image-container {
    position: relative;
    width: 100%;
    max-width: 24rem;
    /* 384px */
    margin: 0 auto;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid hsl(var(--border));
}

.product-details-image {
    width: 100%;
    height: 12rem;
    /* 192px - Back to reasonable size */
    object-fit: contain;
    /* Keep contain to show full image */
    object-position: center;
    background-color: white;
    display: block;
    transition: transform 0.3s ease;
}

.product-details-image:hover {
    transform: scale(1.02);
}

/* Basic Product Info Section */
.product-details-info-section {
    margin-bottom: 1.25rem;
    /* Reduced from 2rem */
}

.product-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    /* Reduced from 1rem */
    margin-bottom: 1rem;
    /* Reduced from 1.5rem */
}

.product-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.product-info-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    /* Reduced from 0.875rem */
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.product-info-label .icon {
    width: 1rem;
    height: 1rem;
    color: hsl(var(--primary));
}

.product-info-value {
    font-size: 0.85rem;
    /* Reduced from 1rem */
    font-weight: 500;
    color: hsl(var(--foreground));
    padding: 0.375rem 0.5rem;
    /* Reduced from 0.5rem 0.75rem */
    background: hsl(var(--muted) / 0.5);
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid hsl(var(--border));
}

.product-info-value.badge-outline {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--primary) / 0.3);
    color: hsl(var(--primary));
    font-weight: 600;
}

/* Product Description Section */
.product-description-section {
    margin-top: 1.5rem;
}

.product-description-text {
    font-size: 0.8rem;
    /* Reduced from 0.875rem */
    line-height: 1.4;
    /* Reduced from 1.6 */
    color: hsl(var(--foreground));
    padding: 0.75rem;
    /* Reduced from 1rem */
    background: hsl(var(--muted) / 0.3);
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border));
    margin: 0;
    min-height: 2.5rem;
    /* Reduced from 3rem */
}

/* Size Variants Section */
.product-variants-section {
    margin-bottom: 1.5rem;
}

.variants-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    /* Reduced from 1.125rem */
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 0.75rem;
    /* Reduced from 1rem */
    padding-bottom: 0.375rem;
    /* Reduced from 0.5rem */
    border-bottom: 2px solid hsl(var(--primary) / 0.2);
}

.variants-section-title .icon {
    width: 1.25rem;
    height: 1.25rem;
    color: hsl(var(--primary));
}

.variants-table-container {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
}

.variants-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.variants-table thead {
    background: linear-gradient(135deg, hsl(var(--primary) / 0.1), hsl(var(--accent) / 0.1));
}

.variants-table th {
    padding: 0.5rem 0.75rem;
    /* Reduced from 0.75rem 1rem */
    text-align: left;
    font-weight: 600;
    color: hsl(var(--foreground));
    border-bottom: 1px solid hsl(var(--border));
    font-size: 0.7rem;
    /* Reduced from 0.8rem */
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.variants-table td {
    padding: 0.5rem 0.75rem;
    /* Reduced from 0.75rem 1rem */
    border-bottom: 1px solid hsl(var(--border) / 0.5);
    vertical-align: middle;
    font-size: 0.75rem;
    /* Added smaller font size */
}

.variants-table tbody tr:hover {
    background: hsl(var(--muted) / 0.5);
}

.variants-table tbody tr:last-child td {
    border-bottom: none;
}

/* Variant table cell styling */
.variant-size {
    font-weight: 600;
    color: hsl(var(--primary));
}

.variant-price {
    font-weight: 500;
    color: hsl(var(--foreground));
}

.variant-discount {
    font-weight: 500;
    color: hsl(var(--accent));
}

.variant-stock {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stock-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.stock-indicator.in-stock {
    background: hsl(var(--success) / 0.1);
    color: hsl(var(--success));
    border: 1px solid hsl(var(--success) / 0.3);
}

.stock-indicator.low-stock {
    background: hsl(var(--warning) / 0.1);
    color: hsl(var(--warning));
    border: 1px solid hsl(var(--warning) / 0.3);
}

.stock-indicator.out-of-stock {
    background: hsl(var(--destructive) / 0.1);
    color: hsl(var(--destructive));
    border: 1px solid hsl(var(--destructive) / 0.3);
}

.stock-indicator .icon {
    width: 0.75rem;
    height: 0.75rem;
}

/* No variants message */
.no-variants-message {
    padding: 2rem;
    text-align: center;
    color: hsl(var(--muted-foreground));
    background: hsl(var(--muted) / 0.3);
}

.no-variants-message .icon {
    width: 2rem;
    height: 2rem;
    margin: 0 auto 0.5rem;
    color: hsl(var(--muted-foreground));
}

.no-variants-message p {
    margin: 0;
    font-size: 0.875rem;
}

/* Product Details Actions */
.product-details-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    align-items: center;
}

.product-details-actions .btn {
    min-width: 8rem;
    font-weight: 500;
}

/* Responsive Design for Product Details Modal */
@media (max-width: 1024px) {
    .product-details-modal {
        max-width: 48rem;
        /* 768px */
    }

    .variants-table {
        font-size: 0.8rem;
    }

    .variants-table th,
    .variants-table td {
        padding: 0.625rem 0.75rem;
    }
}

@media (max-width: 768px) {
    .product-details-modal {
        width: 98vw;
        max-width: none;
        max-height: 95vh;
        margin: 0.5rem;
    }

    .product-info-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .product-details-image {
        height: 10rem;
        /* 160px - Back to original responsive size */
    }

    .variants-table-container {
        overflow-x: auto;
    }

    .variants-table {
        min-width: 32rem;
        /* 512px */
        font-size: 0.75rem;
    }

    .variants-table th,
    .variants-table td {
        padding: 0.5rem 0.625rem;
        white-space: nowrap;
    }

    .product-details-actions {
        flex-direction: row;
        /* Keep buttons in same row on mobile */
        gap: 0.75rem;
        justify-content: center;
        /* Center the buttons */
        align-items: center;
        padding: 0 1rem;
        /* Add some padding from edges */
    }

    .product-details-actions .btn {
        flex: 1;
        /* Make buttons equal width (half-half) */
        max-width: 45%;
        /* Limit width to ensure proper half-half split */
        min-width: auto;
        height: 36px;
        /* Reduced height from 44px */
        min-height: 36px;
        /* Override the 44px min-height */
        padding: 0.5rem 0.75rem;
        /* Reduced padding for smaller height */
        font-size: 0.875rem;
        /* Slightly smaller font */
    }
}

@media (max-width: 480px) {
    .product-details-modal {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }

    .product-details-image {
        height: 8rem;
        /* 128px - Back to original mobile size */
    }

    .variants-table {
        font-size: 0.7rem;
    }

    .variants-table th,
    .variants-table td {
        padding: 0.375rem 0.5rem;
    }
}

/* Enhanced modal overlay for product details */
.modal-overlay:not(.hidden) {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    /* Safari support */
    background: hsl(0 0% 0% / 0.6);
}

/* Smooth transitions for modal content */
.product-details-modal * {
    transition: var(--transition-smooth);
}

/* Focus styles for accessibility */
.product-details-modal .btn:focus,
.product-details-modal .btn-close:focus {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Loading state for modal content */
.product-details-modal .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: hsl(var(--muted-foreground));
}

.product-details-modal .loading .icon {
    width: 1.5rem;
    height: 1.5rem;
    animation: spin 1s linear infinite;
}

/* Error state for modal content */
.product-details-modal .error {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    padding: 2rem;
    color: hsl(var(--destructive));
}

/* ============================= */
/* Cross-Browser Optimizations */
/* ============================= */
/* Safari-specific optimizations */
@supports (-webkit-backdrop-filter: blur(1px)) {
    .modal-overlay:not(.hidden) {
        -webkit-backdrop-filter: blur(4px);
    }
}

/* Firefox-specific optimizations */
@-moz-document url-prefix() {
    .modal-content {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
    }

    .variants-table-container {
        scrollbar-width: thin;
    }
}

/* Edge-specific optimizations */
@supports (-ms-ime-align: auto) {
    .modal-overlay {
        background: rgba(0, 0, 0, 0.6) !important;
    }
}

/* Performance optimizations for low-end devices */
@media (max-resolution: 1dppx) {

    .product-details-modal,
    .modal-overlay,
    .modal-content {
        animation-duration: 0.15s !important;
        transition-duration: 0.15s !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .modal-overlay {
        background: rgba(0, 0, 0, 0.8) !important;
    }

    .modal-content {
        border: 2px solid !important;
    }

    .variants-table th,
    .variants-table td {
        border: 1px solid !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .product-details-modal,
    .modal-overlay,
    .modal-content,
    .product-details-modal *,
    .variants-table *,
    .product-info-grid * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .modal-content {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }

    .variants-table-container {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }

    /* Larger touch targets */
    .btn-close {
        min-width: 44px;
        min-height: 44px;
    }

    .product-details-actions .btn {
        min-height: 36px;
        /* Reduced from 44px */
        height: 36px;
        padding: 0.5rem 0.75rem;
        /* Reduced padding */
        font-size: 0.875rem;
        /* Smaller font for compact design */
    }
}

/* Print styles */
@media print {
    .modal-overlay {
        position: static !important;
        background: transparent !important;
        backdrop-filter: none !important;
    }

    .modal-content {
        box-shadow: none !important;
        border: 1px solid #000 !important;
        page-break-inside: avoid;
    }

    .btn-close,
    .product-details-actions {
        display: none !important;
    }
}

/* Dark mode optimizations */
@media (prefers-color-scheme: dark) {
    .modal-overlay:not(.hidden) {
        background: hsl(0 0% 0% / 0.8);
    }

    .product-details-image {
        border: 1px solid hsl(var(--border));
    }
}

/* Performance optimization classes */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform, opacity;
}

.optimize-rendering {
    contain: layout style paint;
}

/* Browser-specific scrollbar styling */
.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: hsl(var(--muted) / 0.3);
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground) / 0.3);
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.5);
}

.variants-table-container::-webkit-scrollbar {
    height: 8px;
}

.variants-table-container::-webkit-scrollbar-track {
    background: hsl(var(--muted) / 0.3);
    border-radius: 4px;
}

.variants-table-container::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground) / 0.3);
    border-radius: 4px;
}

/* Internet Explorer fallbacks */
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    .modal-overlay {
        background: rgba(0, 0, 0, 0.6) !important;
    }

    .product-info-grid {
        display: block !important;
    }

    .product-info-item {
        display: block !important;
        margin-bottom: 1rem !important;
    }

    .variants-table-container {
        overflow-x: auto !important;
    }
}

/* ============================= */
/* Compact Modal Overrides */
/* ============================= */
/* Make the modal more compact to avoid scrolling */
.product-details-modal {
    max-height: 80vh !important;
    /* Further reduced height */
}

.product-details-modal .modal-body {
    padding: 0.75rem !important;
    /* More compact padding */
}

.product-details-modal .modal-header {
    padding: 0.75rem 1rem !important;
    /* More compact header */
}

.product-details-modal .modal-footer {
    padding: 0.5rem 1rem !important;
    /* More compact footer */
}

/* Reduce spacing between sections */
.product-details-modal .product-details-image-section {
    margin-bottom: 0.75rem !important;
}

.product-details-modal .product-details-info-section {
    margin-bottom: 1rem !important;
}

.product-details-modal .product-variants-section {
    margin-bottom: 0.5rem !important;
}

/* Ensure proper image sizing in modal */
.product-details-modal .product-details-image {
    height: 12rem !important;
    /* Back to reasonable size */
    object-fit: contain !important;
    /* Ensure full image is visible */
    object-position: center !important;
    background-color: white !important;
}

.product-details-modal .product-image-container {
    max-width: 14rem !important;
    /* Further reduced from 16rem */
}

/* Compact table styling */
.product-details-modal .variants-table th,
.product-details-modal .variants-table td {
    padding: 0.375rem 0.5rem !important;
    /* More compact table cells */
    font-size: 0.7rem !important;
    /* Smaller font in modal */
}

/* Compact info grid */
.product-details-modal .product-info-grid {
    gap: 0.5rem !important;
    margin-bottom: 0.75rem !important;
}

.product-details-modal .product-info-item {
    gap: 0.25rem !important;
}

.product-details-modal .product-info-value {
    padding: 0.25rem 0.375rem !important;
    /* More compact info values */
    font-size: 0.75rem !important;
}

.product-details-modal .product-info-label {
    font-size: 0.7rem !important;
    /* Smaller labels */
}

/* Compact description */
.product-details-modal .product-description-text {
    padding: 0.5rem !important;
    font-size: 0.75rem !important;
    min-height: 2rem !important;
    line-height: 1.3 !important;
}

/* Compact section titles */
.product-details-modal .variants-section-title {
    font-size: 0.85rem !important;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.25rem !important;
}

/*
 ============================= */
/* Variant Fields - Edit Mode */
/* ============================= */
.variant-field-disabled {
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--muted-foreground)) !important;
    cursor: not-allowed !important;
    opacity: 0.7;
    border-color: hsl(var(--border)) !important;
}

.variant-field-disabled:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Variant Delete Button Styling */
.variant-delete-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.35rem 0.5rem !important;
    font-size: 0.8rem !important;
    border: 1px solid hsl(var(--destructive)) !important;
    color: hsl(var(--destructive)) !important;
    background: transparent !important;
    border-radius: calc(var(--radius) - 2px) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.variant-delete-btn .icon {
    width: 1rem !important;
    height: 1rem !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2 !important;
}

.variant-delete-btn:hover {
    background-color: hsl(var(--destructive) / 0.1) !important;
    border-color: hsl(var(--destructive)) !important;
    color: hsl(var(--destructive)) !important;
    transform: scale(1.05) !important;
}

.variant-delete-btn:active {
    transform: scale(0.95) !important;
    background-color: hsl(var(--destructive) / 0.2) !important;
}

.variant-delete-btn:focus {
    outline: 2px solid hsl(var(--destructive)) !important;
    outline-offset: 2px !important;
}

/* Ensure btn-ghost styling doesn't interfere */
.btn-ghost.variant-delete-btn {
    background: transparent !important;
    border: 1px solid hsl(var(--destructive)) !important;
}

.btn-ghost.variant-delete-btn:hover {
    background-color: hsl(var(--destructive) / 0.1) !important;
}

/* Specific styling for dustbin/trash icon */
.variant-delete-btn [data-lucide="trash-2"],
.variant-delete-btn [data-lucide="trash"] {
    width: 1rem !important;
    height: 1rem !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force visibility for all icons in delete buttons */
.variant-delete-btn svg {
    width: 1rem !important;
    height: 1rem !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    stroke: currentColor !important;
    fill: none !important;
}

/* Alternative approach - if Lucide icons fail, show text */
.variant-delete-btn:empty::after {
    content: "🗑️";
    font-size: 1rem;
    display: inline-block;
}

/* Ensure the button itself is always visible */
.variant-delete-btn {
    position: relative !important;
    z-index: 10 !important;
}

/* Force the icon to be visible even if Lucide fails */
.variant-delete-btn i[data-lucide="trash-2"]::before {
    content: "🗑️" !important;
    font-style: normal !important;
    display: inline-block !important;
}

/* Variant row styling for edit mode */
.variant-row {
    position: relative;
    background-color: hsl(var(--card));
    border-radius: 8px;
    margin-bottom: 4px;
}

.variant-row:hover {
    background-color: hsl(var(--muted) / 0.3);
}

/* Add a subtle indicator that fields are read-only */
.variant-row::before {
    content: "Read-only";
    position: absolute;
    top: 4px;
    right: 60px;
    font-size: 0.6rem;
    color: hsl(var(--muted-foreground));
    background-color: hsl(var(--muted));
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0.8;
    pointer-events: none;
}

/* =====
======================== */
/* Product Name Validation */
/* ============================= */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.alert-warning {
    background-color: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
    background: linear-gradient(135deg, #fff3cd, #fffbf0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.alert-warning::before {
    content: "⚠️ ";
    margin-right: 0.5rem;
    font-size: 1rem;
}

/* Enhanced warning message styling */
#nameDuplicateWarning {
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    border-left: 4px solid #f39c12;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Product name input validation states */
#productName {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#productName.invalid {
    border-color: hsl(var(--destructive)) !important;
    box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.2) !important;
    animation: shake 0.3s ease-in-out;
}

#productName.valid {
    border-color: hsl(var(--success)) !important;
    box-shadow: 0 0 0 2px hsl(var(--success) / 0.2) !important;
}

/* Shake animation for invalid input */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-2px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(2px);
    }
}

/* Real-time validation indicator */
.validation-indicator {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.validation-indicator.valid {
    background-color: hsl(var(--success));
    opacity: 1;
}

.validation-indicator.invalid {
    background-color: hsl(var(--destructive));
    opacity: 1;
}

.validation-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.5rem;
    height: 0.5rem;
    background-color: white;
    border-radius: 50%;
}

/* Save button disabled state */
#saveProductBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

#saveProductBtn:disabled:hover {
    background: hsl(var(--muted));
    transform: none;
}

/* =
============================ */
/* Size Dropdown Availability */
/* ============================= */
#size_id option:disabled {
    color: #999 !important;
    background-color: #f5f5f5 !important;
    font-style: italic;
    text-decoration: line-through;
}

#size_id option:disabled:hover {
    background-color: #f5f5f5 !important;
    cursor: not-allowed;
}

/* Visual feedback for size selection */
#size_id {
    transition: border-color 0.2s ease;
}

#size_id:focus {
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
}

/* Variant row highlighting */
.variant-row {
    transition: background-color 0.2s ease;
}

.variant-row:hover {
    background-color: hsl(var(--muted) / 0.3);
}

/* ===
========================== */
/* Enhanced modal styles removed - modal restored to original appearance */
/*
Ensure product images have proper styling from the start */
.product-image {
    background-color: white;
}

.product-image img {
    object-fit: contain !important;
    background-color: white;
    max-height: 9.6rem !important;
}

/* Override inline styles for single images */
.product-image>img[style] {
    object-fit: contain !important;
    height: 9.6rem !important;
}

@media (max-width: 768px) {
    .product-image img {
        max-height: 10rem !important;
    }

    .product-image>img[style] {
        height: 10rem !important;
    }
}

.slide-image {
    object-fit: contain !important;
    background-color: white;
    height: 9.6rem !important;
    max-height: 9.6rem !important;
    border-radius: 0 !important;
}

.product-slider {
    background-color: white;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image indicator badge - positioned at bottom right */
.product-slider::after {
    content: attr(data-image-count);
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 10;
    pointer-events: none;
}

/* Product slider indicators/controls positioning */
.product-slider .slider-indicators,
.product-slider .slider-controls {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    z-index: 10;
}

.product-slider .slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.product-slider .slider-prev {
    left: 0.5rem;
}

.product-slider .slider-next {
    right: 0.5rem;
}

/* Mobile: adjust image height */
@media (max-width: 768px) {
    .slide-image {
        height: 10rem !important;
        max-height: 10rem !important;
    }
}

/* Prevent any flash of incorrectly styled images */
.product-card img[style*="object-fit: cover"] {
    object-fit: contain !important;
    background-color: white !important;
}

/* ===
========================== */
/* FAB System Pointer Events Fix */
/* ============================= */
/* When FAB is active, enable pointer events for the entire system */
.fab-system.active {
    pointer-events: auto;
}

/* Ensure FAB main button is always clickable */
.fab-system .fab-main {
    pointer-events: auto;
}

/* Ensure FAB overlay is clickable when active */
.fab-overlay.active {
    pointer-events: auto;
}

/* When FAB is closed, ensure overlay doesn't block clicks */
.fab-overlay:not(.active) {
    pointer-events: none;
}

/* Additional mobile-specific FAB fixes */
@media (max-width: 768px) {

    /* Ensure FAB doesn't interfere with product cards when closed */
    .fab-system:not(.active) {
        pointer-events: none;
    }

    .fab-system:not(.active) .fab-main {
        pointer-events: auto;
        /* Main button should always be clickable */
    }

    /* Ensure proper z-index layering */
    .fab-system {
        z-index: 50;
        /* Lower than modals but higher than content */
    }

    .fab-overlay.active {
        z-index: 45;
        /* Below FAB container but above content */
    }

    .fab-container {
        z-index: 55;
        /* Above overlay when active */
    }
}

/* =========
==================== */
/* Additional FAB System Fixes */
/* ============================= */
/* Ensure FAB doesn't interfere with touch events on mobile */
@media (max-width: 768px) {

    /* When FAB is closed, make sure it doesn't block any interactions */
    .fab-system:not(.active) {
        pointer-events: none !important;
    }

    /* Only the main FAB button should be interactive when closed */
    .fab-system:not(.active) .fab-main {
        pointer-events: auto !important;
        position: relative;
        z-index: 60;
    }

    /* When FAB is active, enable all interactions */
    .fab-system.active {
        pointer-events: auto !important;
    }

    .fab-system.active .fab-container {
        pointer-events: auto !important;
    }

    .fab-system.active .fab-options {
        pointer-events: auto !important;
    }

    /* Ensure overlay behavior is correct */
    .fab-overlay:not(.active) {
        pointer-events: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    .fab-overlay.active {
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Fix z-index stacking for better interaction */
    .fab-system {
        z-index: 50;
    }

    .fab-overlay {
        z-index: 45;
    }

    .fab-container {
        z-index: 55;
        position: relative;
        pointer-events: none !important;
        /* Prevent clicks when closed */
    }

    /* Only enable pointer events when FAB is active */
    .fab-system.active .fab-container {
        pointer-events: auto !important;
    }

    .fab-main {
        z-index: 60;
        position: relative;
        pointer-events: auto !important;
        /* Main button always clickable */
    }

    /* Ensure product cards and other UI elements are not blocked */
    .product-card {
        position: relative;
        z-index: 10;
    }

    .mobile-products-header {
        position: sticky;
        z-index: 30;
    }

    .mobile-search-bar {
        position: sticky;
        z-index: 35;
    }
}

/* Ensure FAB works properly on very small screens */
@media (max-width: 375px) {
    .fab-system {
        bottom: 4.5rem;
        /* Adjust for smaller screens */
        right: 0.75rem;
    }

    .fab-main {
        width: 3rem;
        height: 3rem;
    }

    .fab-btn {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* ============================= */
/* PRODUCT MODAL IMAGE SLIDER */
/* ============================= */
.product-modal-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--radius);
}

.product-modal-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
}

.product-modal-slider img:not(.active) {
    opacity: 0;
}

.product-modal-slider img.active {
    opacity: 1;
}

.modal-image-controls {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2rem;
    padding: 0.5rem 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    min-width: 200px;
    z-index: 15;
}

.modal-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.modal-nav-btn:hover {
    background: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.modal-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.modal-nav-btn .icon {
    width: 1rem;
    height: 1rem;
}

.modal-image-indicators {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-indicator {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-indicator.active {
    background: white;
    transform: scale(1.2);
}

.modal-indicator:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
}

/* Responsive modal image controls */
@media (max-width: 768px) {
    .modal-image-controls {
        bottom: 0.5rem;
        padding: 0.375rem 0.75rem;
        gap: 0.75rem;
    }

    .modal-nav-btn {
        width: 1.75rem;
        height: 1.75rem;
    }

    .modal-nav-btn .icon {
        width: 0.875rem;
        height: 0.875rem;
    }

    .modal-indicator {
        width: 0.375rem;
        height: 0.375rem;
    }
}

/* E
nsure the main product details image is always visible */
#productDetailsImage {
    opacity: 1 !important;
    position: relative !important;
    display: block !important;
}

/* Override the slider opacity rules for the main image element */
.product-modal-slider #productDetailsImage {
    opacity: 1 !important;
    position: relative !important;
}

/* Ensure proper stacking when both slider and main image are present */
.product-modal-slider #productDetailsImage:not(.slider-hidden) {
    z-index: 10;
}

.product-modal-slider #productDetailsImage.slider-hidden {
    display: none !important;
}

/* Ens
ure modal slider images are properly visible when active */
.product-modal-slider img.product-details-image.active {
    opacity: 1 !important;
    display: block !important;
    z-index: 5;
}

.product-modal-slider img.product-details-image:not(.active) {
    opacity: 0 !important;
    display: block !important;
    z-index: 1;
}

/* Ensure the main product details image is hidden when slider is active */
.product-modal-slider #productDetailsImage.slider-hidden {
    display: none !important;
    opacity: 0 !important;
}

/* Debug styles to help identify issues */
.product-modal-slider {
    background-color: #f0f0f0;
    min-height: 200px;
}

.product-modal-slider img {
    border: 2px solid transparent;
}

.product-modal-slider img.active {
    border-color: #007bff;
}

/* Ensur
e proper modal slider container sizing */
.product-modal-slider {
    min-height: 12rem;
    max-height: 15rem;
    background-color: white;
}

/* Ensure all modal images fit properly */
.product-modal-slider img,
.product-modal-slider .slide-image,
.product-modal-slider .product-details-image {
    object-fit: contain !important;
    object-position: center !important;
    background-color: white !important;
    width: 100% !important;
    height: 100% !important;
}

/* Responsive modal image sizing */
@media (max-width: 768px) {
    .product-modal-slider {
        min-height: 10rem;
        max-height: 12rem;
    }

    .product-image-container {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .product-modal-slider {
        min-height: 8rem;
        max-height: 10rem;
    }
}

/* Mob
ile padding override */
@media (max-width: 768px) {
    .p-4 {
        padding: 0 !important;
    }
}

/* Mobile Header Search Animation */
@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mobile Header Styling */
@media (max-width: 768px) {
    .mobile-products-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
        background: hsl(var(--card) / 0.95) !important;
        backdrop-filter: blur(8px) !important;
        border-bottom: 1px solid hsl(var(--border)) !important;
        padding: 0.75rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .header-search-content {
        animation: slideInFromRight 0.3s ease-out;
    }

    .mobile-search-toggle:hover {
        background: hsl(var(--muted)) !important;
    }

    .column-toggle:hover {
        background: hsl(var(--muted)) !important;
    }

    /* Search input focus styling */
    #mobileHeaderSearchInput:focus {
        outline: none;
        border-color: hsl(var(--ring));
        box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
    }
}

/* Tailw
ind-like utility classes for icons */
.h-4 {
    height: 1rem !important;
}

.w-4 {
    width: 1rem !important;
}

/* Form Validation Styles */
.form-field-error {
    border-color: #dc3545 !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    animation: shake 0.3s ease-in-out;
}

.form-error-message {
    display: block;
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* Glow effect for error fields */
.form-field-error:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.3rem rgba(220, 53, 69, 0.35) !important;
}

/* Success state */
.form-field-success {
    border-color: #28a745 !important;
    border-width: 2px !important;
}

.form-field-success:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

/* ==
=====================================================
   FLOATING SEARCH BUTTON & PANEL
   - Appears when search filter section is hidden on scroll
   ======================================================= */
.floating-search-btn {
    position: fixed;
    top: 9rem;
    right: 2rem;
    z-index: 50;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    visibility: hidden;
}

.floating-search-btn.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    visibility: visible;
}

.floating-search-btn.hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    visibility: hidden;
}

.floating-search-btn:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    transform: scale(1.05);
}

.floating-search-btn:active {
    transform: scale(0.95);
}

.floating-search-btn .h-4 {
    width: 1.25rem;
    height: 1.25rem;
}

.floating-search-btn .w-4 {
    width: 1.25rem;
    height: 1.25rem;
}

/* Floating Search Panel */
.floating-search-panel {
    position: fixed;
    top: 9rem;
    right: 2rem;
    z-index: 51;
    width: 20rem;
    max-width: calc(100vw - 4rem);
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(-1rem) scale(0.95);
    pointer-events: none;
    transition: all 0.3s ease;
}

.floating-search-panel.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.floating-search-panel.hidden {
    opacity: 0;
    transform: translateY(-1rem) scale(0.95);
    pointer-events: none;
}

.floating-search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid hsl(var(--border));
    background: linear-gradient(to right, hsl(var(--primary) / 0.05), hsl(var(--primary) / 0.1));
}

.floating-search-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.close-floating-search {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--radius) - 2px);
    transition: background 0.2s ease;
}

.close-floating-search:hover {
    background: hsl(var(--muted));
}

.close-floating-search .h-4,
.close-floating-search .w-4 {
    width: 1rem;
    height: 1rem;
}

.floating-search-content {
    padding: 1rem;
}

/* Hide floating search on mobile */
@media (max-width: 768px) {

    .floating-search-btn,
    .floating-search-panel {
        display: none !important;
    }
}

/* Adjust position on smaller desktops */
@media (max-width: 1024px) {
    .floating-search-btn {
        right: 1rem;
    }

    .floating-search-panel {
        right: 1rem;
        width: 18rem;
    }
}

/* Ensure sidebar is visible on desktop - override any hidden classes */
@media (min-width: 1024px) {
    aside#sidebar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
    }

    /* Ensure main content has proper margin for sidebar */
    .lg\:ml-64 {
        margin-left: 16rem !important;
    }
}

/* ========================================= */
/* CRITICAL: Sidebar must NOT be affected by products.css */
/* ========================================= */
/* The sidebar should look identical on all pages */
/* It uses ONLY the global app.css styles */
/* Ensure sidebar is visible on desktop */
@media (min-width: 1024px) {
    aside#sidebar {
        display: block !important;
        visibility: visible !important;
    }
}

/* Prevent products.css from affecting sidebar colors/styles */
/* Sidebar uses app.css variables only */
aside#sidebar {
    /* Do not override any colors, backgrounds, or fonts */
    /* Let app.css handle all sidebar styling */
}

/* ============================= */
/* ============================= */
/* Performance Optimizations */
/* ============================= */
/* Performance optimizations */
.products-grid {
    contain: layout style paint;
}

.product-card {
    will-change: auto;
    contain: layout style paint;
}

/* Reduce repaints on hover */
.product-card:hover {
    will-change: transform;
}

/* Optimize image rendering */
.product-image img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Reduce animation complexity */
@media (prefers-reduced-motion: no-preference) {
    .gradient-text-animated {
        animation: gradient 8s ease infinite;
    }
}

/* Loading progress bar */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: hsl(var(--primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: 9999;
}

.page-loader.loading {
    animation: loadProgress 2s ease-in-out;
}

@keyframes loadProgress {
    0% {
        transform: scaleX(0);
    }

    50% {
        transform: scaleX(0.7);
    }

    100% {
        transform: scaleX(1);
        opacity: 0;
    }
}

/* Product card visibility animation */
.product-card.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* --- Scoped scroll behavior for Products page --- */
/* Make products page layout a vertical flex chain, so only grid scrolls */
.products-management {
    /* Override app.css which sets min-height: 100vh */
    min-height: 0 !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
}

/* Ensure the card occupies available height and forms a flex column */
.products-management .card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* critical to allow inner overflow */
}

/* Card content should not scroll itself; it just hosts the grid */
.products-management .card-content {
    flex: 1 1 auto;
    min-height: 0;
    /* allow children to manage scroll */
    overflow-y: auto;
    /* allow scrolling to see all product cards */
}

/* Only the products grid is scrollable */
.products-management .card-content .products-grid {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- End scoped scroll behavior --- */
/* Force Fixed Header for Products Page */
/* Targets the header partial; accounts for sidebar on desktop */
header.sticky.top-0 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    width: 100% !important;
    background: hsl(var(--card) / 0.95) !important;
    backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
}

/* Desktop: Offset header for sidebar (lg:ml-64 = 16rem) */
@media (min-width: 1024px) {
    header.sticky.top-0 {
        left: 16rem !important;
        right: 0 !important;
        width: calc(100% - 16rem) !important;
    }
}

/* Offset main content below fixed header */
main {
    padding-top: 3.5rem !important;
    /* Header height (py-3 + borders) */
    margin-top: 0 !important;
}

/* Ensure outer container doesn't add extra space */
div[class*="lg:ml-64"] {
    padding-top: 3.5rem !important;
    margin-top: 0 !important;
}

/* Mobile: No sidebar offset, reduced padding */
@media (max-width: 1023px) {
    main {
        padding-top: 3rem !important;
        /* Slightly less for mobile */
    }

    div[class*="lg:ml-64"] {
        padding-top: 3rem !important;
    }

    /* Hide any conflicting top elements if present */
    .top-actions,
    .search-filter-section {
        display: none !important;
    }
}

/* Preserve scroll on content only */
main {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Sidebar z-index below header */
@media (min-width: 1024px) {
    aside#sidebar {
        z-index: 40 !important;
        /* Below header z-50 */
    }
}

/* Desktop: Fixed layout for top-actions & search-filter below header */
@media (min-width: 1024px) {

    /* Top-Actions: Fixed below header */
    .top-actions {
        position: fixed !important;
        top: 3.5rem !important;
        /* Below header height (py-3 ~3rem + borders) */
        left: 16rem !important;
        /* After sidebar */
        right: 0 !important;
        z-index: 40 !important;
        /* Below header, above search-filter */
        width: calc(100% - 16rem) !important;
        background: hsl(var(--background) / 0.95) !important;
        backdrop-filter: blur(8px) !important;
        padding: 0.5rem 1.5rem 0.75rem !important;
        /* Original padding */
        margin: 0 !important;
        /* Reset to prevent shifts */
        border-bottom: 1px solid hsl(var(--border)) !important;
        /* Optional separator */
        box-shadow: 0 1px 3px hsl(var(--border) / 0.5) !important;
        /* Subtle shadow */
    }

    /* Search-Filter-Section: Fixed below top-actions */
    .search-filter-section {
        position: fixed !important;
        top: 7rem !important;
        /* Below header (3.5rem) + top-actions (~3.5rem) */
        left: 16rem !important;
        /* After sidebar */
        right: 0 !important;
        z-index: 30 !important;
        /* Lowest in stack */
        width: calc(100% - 16rem) !important;
        background: hsl(var(--card) / 0.95) !important;
        backdrop-filter: blur(8px) !important;
        margin: 0 !important;
        /* Reset */
        padding: 1rem 1.5rem !important;
        /* Original padding */
        border-bottom: 1px solid hsl(var(--border)) !important;
        /* Optional separator */
        box-shadow: 0 1px 3px hsl(var(--border) / 0.5) !important;
        /* Subtle shadow */
    }

    /* Offset main content below all three fixed elements */
    main,
    div[class*="lg:ml-64"] {
        padding-top: 11.5rem !important;
        /* Header (3.5rem) + top-actions (3.5rem) + search-filter (4.5rem) */
        margin-top: 0 !important;
    }

    /* Products Card: Fixed below search-filter-section */
    .products-card {
        position: fixed !important;
        top: 11.5rem !important;
        /* Below header + top-actions + search-filter */
        left: 16rem !important;
        /* After sidebar */
        right: 0 !important;
        bottom: 0 !important;
        /* Stretch to bottom */
        z-index: 10 !important;
        /* Below all fixed elements */
        width: calc(100% - 16rem) !important;
        margin: 0 !important;
        padding: 1rem 1.5rem !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        /* Prevent card itself from scrolling */
    }

    /* Make card-content scrollable */
    .products-card .card-content {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
        /* Critical for flex scrolling */
    }

    /* Products grid inside card-content */
    .products-card .card-content .products-grid {
        height: auto !important;
        /* Let it grow naturally */
        overflow: visible !important;
        /* No nested scroll */
    }

    /* Management Sections: Fixed below top-actions (only when visible) */
    .management-sections:not(:empty) {
        position: fixed !important;
        top: 7rem !important;
        /* Below header (3.5rem) + top-actions (3.5rem) */
        left: 16rem !important;
        /* After sidebar */
        right: 0 !important;
        bottom: 0 !important;
        /* Stretch to bottom */
        z-index: 25 !important;
        /* Above products-card, below search-filter */
        width: calc(100% - 16rem) !important;
        margin: 0 !important;
        padding: 1rem 1.5rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: hsl(var(--background)) !important;
    }

    /* Hide management-sections when all children are hidden */
    .management-sections:has(.management-section:not(.hidden)) {
        display: block !important;
    }

    /* When management section is visible, hide products-section */
    .management-sections:has(.management-section:not(.hidden))~.search-filter-section,
    .management-sections:has(.management-section:not(.hidden))~.products-section {
        display: none !important;
    }

    /* Individual management section cards */
    .management-section {
        margin-bottom: 1.5rem !important;
    }

    /* When all management sections are hidden, don't take up space */
    .management-sections:not(:has(.management-section:not(.hidden))) {
        display: none !important;
    }

    /* Ensure products-section aligns properly */
    .products-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Remove padding from main since products-card handles it */
    main:has(.products-section) {
        padding-top: 0 !important;
    }
}

/* Mobile: Hide top-actions & search-filter; offset only for header */
@media (max-width: 1023px) {

    .top-actions,
    .search-filter-section {
        display: none !important;
    }

    header.sticky.top-0 {
        left: 0 !important;
        width: 100% !important;
        height: 60px !important;
    }

    main,
    div[class*="lg:ml-64"] {
        padding-top: 3rem !important;
        /* Mobile header only */
        margin-top: 0 !important;
    }

    .products-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Preserve content scrolling below fixed elements */
main,
div[class*="lg:ml-64"] {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Sidebar z-index below all fixed elements */
@media (min-width: 1024px) {
    aside#sidebar {
        z-index: 20 !important;
        /* Lowest */
    }
}

/* Ensure no interference with modals/FAB */
.modal-overlay,
.fab-system {
    z-index: 1000 !important;
    /* Above everything */
}

/* Hide FAB
 when product form is visible */
#productForm:not(.hidden)~.fab-system,
.management-section:not(.hidden)~.fab-system {
    display: none !important;
}

/* Alternative: Hide FAB when in edit/add product view */
@media (max-width: 768px) {
    body:has(#productForm:not(.hidden)) .fab-system {
        display: none !important;
    }
}

/* Hide F
AB completely when product form is visible (not management sections) */
@media (max-width: 768px) {

    /* Only hide FAB when product form is visible */
    body:has(#productForm:not(.hidden)) .fab-system {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}


/* ==========================================
   GRID LAYOUT CONTROLS
   ========================================== */

/* Desktop controls (2-5 columns) - shown on desktop only */
.desktop-grid-controls {
    display: none !important;
}

@media (min-width: 1024px) {
    .desktop-grid-controls {
        display: flex !important;
    }
}

/* Mobile controls (1-2 columns) - shown on mobile only */
.mobile-grid-controls {
    display: flex !important;
}

@media (min-width: 1024px) {
    .mobile-grid-controls {
        display: none !important;
    }
}

.grid-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid hsl(var(--border));
    background: hsl(var(--background));
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: hsl(var(--muted-foreground));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.grid-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, hsl(var(--primary) / 0.1), hsl(var(--primary) / 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.grid-btn:hover {
    background: hsl(var(--accent));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.grid-btn:hover::before {
    opacity: 1;
}

.grid-btn.active {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.9));
    border-color: hsl(var(--primary));
    color: white;
    box-shadow: 0 4px 12px hsl(var(--primary) / 0.3);
    transform: scale(1.05);
}

.grid-btn.active::before {
    opacity: 0;
}

.grid-btn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Mobile: Larger, more touch-friendly buttons */
@media (max-width: 1023px) {
    .grid-btn {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }
    
    .mobile-grid-controls {
        gap: 0.75rem !important;
    }
}

/* Grid column variations */
.products-grid.grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.products-grid.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.products-grid.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.products-grid.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.products-grid.grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
}


/* Mobile: Keep header content in one row */
@media (max-width: 1023px) {
    .products-card .header-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        flex-wrap: nowrap;
    }
    
    .products-card .card-title {
        font-size: 1rem;
        flex-shrink: 1;
        min-width: 0;
    }
    
    .products-card .card-title .icon {
        width: 1rem;
        height: 1rem;
    }
    
    .products-card #productCountDesktop {
        display: inline !important; /* Show count on mobile */
        font-size: 0.75rem !important;
    }
    
    .mobile-grid-controls {
        flex-shrink: 0;
    }
}