/**
 * Floodtavo Grid Cart Styles
 * 
 * Supplier rows use the same .floodtavo-color-row structure for perfect alignment.
 */

/* =====================================================
   Clickable Row Indicators
   ===================================================== */

/* Indicating Clickability - Rows with admin panels are clickable */
.floodtavo-grid-row .col-color,
.floodtavo-color-row:not(.floodtavo-supplier-row) .color-info {
    position: relative;
    transition: background-color 0.2s;
}

.floodtavo-grid-row.has-admin-panel .col-color,
.floodtavo-color-row.has-admin-panel:not(.floodtavo-supplier-row) .color-info {
    cursor: pointer;
    padding-right: 20px; /* Space for arrow indicator */
}

.floodtavo-grid-row.has-admin-panel .col-color:hover,
.floodtavo-color-row.has-admin-panel:not(.floodtavo-supplier-row) .color-info:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.floodtavo-grid-row.has-admin-panel .col-color:hover .color-name,
.floodtavo-color-row.has-admin-panel:not(.floodtavo-supplier-row) .color-info:hover .color-name {
    text-decoration: underline;
    text-decoration-style: dotted;
}

/* Arrow indicator for expandable rows */
.floodtavo-grid-row.has-admin-panel .col-color::after,
.floodtavo-color-row.has-admin-panel:not(.floodtavo-supplier-row) .color-info::after {
    content: '▼';
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    opacity: 0.5;
    transition: all 0.2s;
}

.floodtavo-grid-row.panel-open.has-admin-panel .col-color::after,
.floodtavo-color-row.panel-open.has-admin-panel:not(.floodtavo-supplier-row) .color-info::after {
    opacity: 1;
    transform: translateY(-50%) rotate(180deg);
}

/* Row state when panel is open */
.floodtavo-grid-row.panel-open,
.floodtavo-color-row.panel-open:not(.floodtavo-supplier-row) {
    background-color: #e8f4fc;
    border-bottom-color: #2271b1;
}

/* Loading state */
.floodtavo-color-row.loading-supplier-data .color-info::after {
    content: '⟳';
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(360deg); }
}

/* =====================================================
   Bricks Price Reveal Mode
   ===================================================== */

.floodtavo-grid-cart .price-label.price-label--placeholder {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    color: #64748b;
    white-space: normal;
    text-align: center;
}

/* =====================================================
   Supplier Rows - Admin-only data display
   Uses same structure as color rows for alignment
   ===================================================== */

/* Supplier row styling - subtle distinction from product rows */
.floodtavo-color-row.floodtavo-supplier-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    background: #f8fafc;
    border-bottom: 1px solid #e5e5e5;
    padding: 10px 16px;
}

/* Supplier row color-sizes container - must fill available space */
.floodtavo-supplier-row .color-sizes {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    gap: 12px;
    width: auto;
}

.floodtavo-color-row.floodtavo-supplier-row:hover {
    background: #f1f5f9;
}

/* Supplier name in the color-info area */
.floodtavo-supplier-row .color-info {
    background: transparent;
    justify-content: center;
    align-items: center;
    padding: 8px 16px 8px 0;
}

/* Non-clickable supplier name */
.floodtavo-supplier-row .color-info .supplier-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    color: #64748b;
    font-style: normal;
    padding: 8px 14px;
    background: #e2e8f0;
    border-radius: 4px;
    min-width: 100px;
    text-align: center;
}

/* Supplier name as clickable link button */
.floodtavo-supplier-row .color-info .supplier-name-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13px;
    color: #fff;
    background: #0073aa;
    padding: 8px 14px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.15s ease;
    min-width: 100px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.floodtavo-supplier-row .color-info .supplier-name-link:hover {
    background: #005a87;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* External link icon */
.floodtavo-supplier-row .color-info .supplier-name-link::after {
    content: '↗';
    font-size: 12px;
    opacity: 0.85;
}

/* Supplier row hover - subtle highlight */
.floodtavo-supplier-row:hover .color-info {
    background: transparent;
}

/* =====================================================
   Supplier Data Cells in Size Columns
   ===================================================== */

/* Size column in supplier rows - matches main grid */
.floodtavo-supplier-row .size-column {
    flex: 1 1 0;
    min-width: 75px;
    max-width: none;
    width: auto;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

/* Price container - PRIMARY (most important) */
.floodtavo-supplier-row .size-column .supplier-price-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.2;
}

/* Single price display - prominent */
.floodtavo-supplier-row .size-column .price-single {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}

/* Our price (highlighted, the one we actually pay) - most prominent */
.floodtavo-supplier-row .size-column .price-ours {
    font-size: 15px;
    font-weight: 700;
    color: #16a34a;
    background: #dcfce7;
    padding: 3px 8px;
    border-radius: 4px;
}

/* Wholesale price (strikethrough when our price exists) */
.floodtavo-supplier-row .size-column .price-wholesale {
    font-size: 11px;
    color: #94a3b8;
    text-decoration: line-through;
}

/* Stock numbers - SECONDARY (less important) */
.floodtavo-supplier-row .size-column .supplier-stock {
    font-weight: 500;
    font-size: 11px;
    color: #64748b;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 3px;
}

.floodtavo-supplier-row .size-column .supplier-stock.zero {
    color: #dc2626;
}

/* Discontinued badge */
.floodtavo-supplier-row .size-column .disc-badge {
    font-size: 8px;
    font-weight: 700;
    color: #92400e;
    background: #fcd34d;
    padding: 1px 4px;
    border-radius: 2px;
    letter-spacing: 0.5px;
    vertical-align: middle;
    text-transform: uppercase;
}

/* Legacy classes for backwards compatibility */
.floodtavo-supplier-row .size-column .supplier-prices {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.2;
}

.floodtavo-supplier-row .size-column .supplier-price {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

/* No data indicator */
.floodtavo-supplier-row .size-column .supplier-no-data-indicator {
    color: #cbd5e1;
    font-size: 18px;
}

/* Zero stock cell styling */
.floodtavo-supplier-row .size-column.supplier-zero-stock {
    background: #fef2f2;
    border-radius: 4px;
}

.floodtavo-supplier-row .size-column.supplier-zero-stock .supplier-stock {
    color: #dc2626;
}

/* Discontinued cell styling */
.floodtavo-supplier-row .size-column.supplier-discontinued {
    background: #fffbeb;
    border-radius: 4px;
    position: relative;
}

.floodtavo-supplier-row .size-column.supplier-discontinued .supplier-stock {
    color: #b45309;
}

/* No data cell styling */
.floodtavo-supplier-row .size-column.supplier-no-data {
    opacity: 0.4;
}

/* Last supplier row gets a bottom border accent */
.floodtavo-supplier-row:last-of-type:not(.floodtavo-backorder-summary-row) {
    border-bottom: 1px solid #e5e5e5;
}

/* =====================================================
   Backorder Summary Row
   Shows availability status when all suppliers have 0 stock
   ===================================================== */

.floodtavo-backorder-summary-row {
    background: #fffbeb;
    border-bottom: 2px solid #f59e0b !important;
    margin-bottom: 6px;
}

.floodtavo-backorder-summary-row .color-info {
    background: transparent;
}

.floodtavo-backorder-summary-row .color-info .summary-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    background: #fef3c7;
    border-radius: 4px;
    min-width: 100px;
    text-align: center;
}

.floodtavo-backorder-summary-row .size-column {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
}

/* Backorder badge - amber/orange styling */
.floodtavo-backorder-summary-row .backorder-badge {
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    padding: 4px 8px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(217, 119, 6, 0.3);
    white-space: nowrap;
}

/* In-stock indicator - green check */
.floodtavo-backorder-summary-row .availability-indicator.in-stock {
    color: #16a34a;
    font-size: 16px;
    font-weight: bold;
}

/* Discontinued/no-data indicator - muted dash */
.floodtavo-backorder-summary-row .availability-indicator.discontinued,
.floodtavo-backorder-summary-row .availability-indicator.no-data {
    color: #cbd5e1;
    font-size: 16px;
}

/* Size column with backorder gets subtle highlight */
.floodtavo-backorder-summary-row .size-column.backorder-size {
    background: rgba(245, 158, 11, 0.1);
    border-radius: 4px;
}

/* =====================================================
   Legacy Panel Support (can be removed later)
   ===================================================== */

.floodtavo-admin-detail-panel {
    display: none; /* Hide old panel structure */
}

/* =====================================================
   Responsive Adjustments
   ===================================================== */

/* Tablet breakpoint - slightly smaller fonts */
@media (max-width: 1024px) {
    .floodtavo-supplier-row .size-column .price-single,
    .floodtavo-supplier-row .size-column .price-ours,
    .floodtavo-supplier-row .size-column .supplier-price {
        font-size: 14px;
    }
    
    .floodtavo-supplier-row .size-column .price-wholesale {
        font-size: 10px;
    }
    
    .floodtavo-supplier-row .size-column .supplier-stock {
        font-size: 10px;
    }
}

/* Mobile breakpoint - match the cart grid approach with auto-wrap */
@media (max-width: 768px) {
    /* Stack supplier row vertically */
    .floodtavo-supplier-row {
        flex-direction: column !important;
        padding: 10px !important;
    }
    
    /* Supplier name takes full width */
    .floodtavo-supplier-row .color-info {
        width: 100% !important;
        max-width: none !important;
        min-width: auto !important;
        margin-bottom: 8px;
        padding: 8px !important;
        border-right: none !important;
        border-bottom: 1px solid #d4e5f7;
    }
    
    .floodtavo-supplier-row .color-info .supplier-name,
    .floodtavo-supplier-row .color-info .supplier-name-link {
        font-size: 13px;
        padding: 8px 14px;
    }
    
    /* Sizes use CSS grid that auto-wraps (matches cart page) */
    .floodtavo-supplier-row .color-sizes {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        gap: 1px !important;
        background: #ddd;
        padding: 1px !important;
        border-radius: 4px;
    }
    
    /* Each size cell */
    .floodtavo-supplier-row .size-column {
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        padding: 12px 8px 14px !important;
        background: #fff;
        min-height: auto;
        border-radius: 0;
    }
    
    /* Show size label in cell - use name not slug */
    .floodtavo-supplier-row .size-column::before {
        content: attr(data-size-name);
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: #333;
        margin-bottom: 4px;
        text-align: center;
    }
    
    .floodtavo-supplier-row .size-column .price-single,
    .floodtavo-supplier-row .size-column .price-ours,
    .floodtavo-supplier-row .size-column .supplier-price {
        font-size: 13px;
    }
    
    .floodtavo-supplier-row .size-column .supplier-stock {
        font-size: 10px;
    }
    
    .floodtavo-supplier-row .size-column .disc-badge {
        font-size: 7px;
        padding: 1px 3px;
    }
    
    /* Cell state backgrounds */
    .floodtavo-supplier-row .size-column.supplier-zero-stock {
        background: #fcf0f1;
    }
    
    .floodtavo-supplier-row .size-column.supplier-discontinued {
        background: #fff9e6;
    }
    
    .floodtavo-supplier-row .size-column.supplier-no-data {
        background: #f5f5f5;
    }
    
    /* Backorder summary row mobile */
    .floodtavo-backorder-summary-row .color-info {
        width: 100% !important;
        max-width: none !important;
        min-width: auto !important;
        margin-bottom: 8px;
        padding: 8px !important;
        border-bottom: 1px solid #fcd34d;
    }
    
    .floodtavo-backorder-summary-row .color-info .summary-label {
        font-size: 11px;
        padding: 6px 12px;
    }
    
    .floodtavo-backorder-summary-row .backorder-badge {
        font-size: 8px;
        padding: 3px 6px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .floodtavo-supplier-row .color-sizes {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
    }
    
    .floodtavo-supplier-row .size-column {
        padding: 10px 6px 12px !important;
    }
    
    .floodtavo-supplier-row .size-column::before {
        font-size: 10px;
    }
    
    .floodtavo-supplier-row .size-column .price-single,
    .floodtavo-supplier-row .size-column .price-ours {
        font-size: 12px;
    }
    
    .floodtavo-supplier-row .size-column .supplier-stock {
        font-size: 9px;
    }
    
    /* Backorder summary small mobile */
    .floodtavo-backorder-summary-row .backorder-badge {
        font-size: 7px;
        padding: 2px 5px;
    }
}

/* =====================================================
   Compact Mode Overrides
   ===================================================== */

.floodtavo-grid-cart.compact-mode .floodtavo-grid-row,
.floodtavo-grid-cart.compact-mode .floodtavo-grid-header {
    padding: 6px 10px;
}

.floodtavo-grid-cart.compact-mode .col-size .qty {
    height: 32px;
    font-size: 14px;
}