/**
 * Invoice Loading Skeleton
 * 
 * Specialized skeleton matching the actual invoice layout for better
 * perceived performance and user experience during loading.
 * 
 * @package Silva_Customer_Portal
 * @version 2.6.0
 */

/* ========================================
   INVOICE SKELETON CONTAINER
   ======================================== */

.invoice-skeleton {
    padding: 24px;
    animation: none;
}

/* Base skeleton element */
.skeleton-element {
    background: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #e0e0e0 20%,
        #f0f0f0 40%,
        #f0f0f0 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ========================================
   INVOICE METADATA SKELETON
   ======================================== */

.invoice-skeleton-header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.invoice-skeleton-meta-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.invoice-skeleton-label {
    width: 80px;
    height: 14px;
}

.invoice-skeleton-value {
    width: 120px;
    height: 20px;
}

/* ========================================
   INVOICE AMOUNT CARD SKELETON
   ======================================== */

.invoice-skeleton-amount-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.invoice-skeleton-amount-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.invoice-skeleton-amount-label {
    width: 100px;
    height: 18px;
}

.invoice-skeleton-amount-value {
    width: 140px;
    height: 32px;
}

.invoice-skeleton-balance-divider {
    height: 2px;
    background: #e5e7eb;
    margin: 16px 0;
    border-radius: 2px;
}

.invoice-skeleton-balance-label {
    width: 120px;
    height: 20px;
}

.invoice-skeleton-balance-value {
    width: 160px;
    height: 36px;
}

/* ========================================
   LINE ITEMS TABLE SKELETON
   ======================================== */

.invoice-skeleton-section-title {
    width: 160px;
    height: 24px;
    margin-bottom: 20px;
}

.invoice-skeleton-table {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
}

.invoice-skeleton-table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 16px;
    padding: 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.invoice-skeleton-table-header-cell {
    width: 80%;
    height: 14px;
}

.invoice-skeleton-table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.invoice-skeleton-table-row:last-child {
    border-bottom: none;
}

.invoice-skeleton-table-cell {
    height: 16px;
}

.invoice-skeleton-table-cell.description {
    width: 90%;
}

.invoice-skeleton-table-cell.quantity {
    width: 40px;
}

.invoice-skeleton-table-cell.price {
    width: 80px;
}

.invoice-skeleton-table-cell.total {
    width: 100px;
}

/* ========================================
   PAYMENT HISTORY SKELETON
   ======================================== */

.invoice-skeleton-payments {
    margin-top: 24px;
}

.invoice-skeleton-payment-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 12px;
}

.invoice-skeleton-payment-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    flex-shrink: 0;
}

.invoice-skeleton-payment-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.invoice-skeleton-payment-method {
    width: 120px;
    height: 16px;
}

.invoice-skeleton-payment-date {
    width: 100px;
    height: 14px;
}

.invoice-skeleton-payment-amount {
    width: 80px;
    height: 20px;
}

/* ========================================
   ACTION BUTTONS SKELETON
   ======================================== */

.invoice-skeleton-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: flex-end;
}

.invoice-skeleton-button {
    width: 140px;
    height: 48px;
    border-radius: 8px;
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .invoice-skeleton {
        padding: 16px;
    }
    
    .invoice-skeleton-header {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .invoice-skeleton-amount-card {
        padding: 20px;
    }
    
    /* Mobile: Hide table, show card layout */
    .invoice-skeleton-table-header {
        display: none;
    }
    
    .invoice-skeleton-table-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 16px;
        background: #f9fafb;
        border-radius: 8px;
        margin-bottom: 12px;
        border: 1px solid #e5e7eb;
    }
    
    .invoice-skeleton-table-cell {
        width: 100% !important;
    }
    
    .invoice-skeleton-actions {
        flex-direction: column;
    }
    
    .invoice-skeleton-button {
        width: 100%;
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .skeleton-element,
    .invoice-skeleton-label,
    .invoice-skeleton-value,
    .invoice-skeleton-amount-label,
    .invoice-skeleton-amount-value,
    .invoice-skeleton-balance-label,
    .invoice-skeleton-balance-value,
    .invoice-skeleton-section-title,
    .invoice-skeleton-table-header-cell,
    .invoice-skeleton-table-cell,
    .invoice-skeleton-payment-icon,
    .invoice-skeleton-payment-method,
    .invoice-skeleton-payment-date,
    .invoice-skeleton-payment-amount,
    .invoice-skeleton-button {
        animation: none !important;
        background: #f0f0f0 !important;
    }
}

/* ========================================
   USAGE EXAMPLE (HTML Structure)
   ======================================== */

/*
<div class="invoice-skeleton">
    <!-- Metadata Header -->
    <div class="invoice-skeleton-header">
        <div class="invoice-skeleton-meta-item">
            <div class="skeleton-element invoice-skeleton-label"></div>
            <div class="skeleton-element invoice-skeleton-value"></div>
        </div>
        <div class="invoice-skeleton-meta-item">
            <div class="skeleton-element invoice-skeleton-label"></div>
            <div class="skeleton-element invoice-skeleton-value"></div>
        </div>
        <div class="invoice-skeleton-meta-item">
            <div class="skeleton-element invoice-skeleton-label"></div>
            <div class="skeleton-element invoice-skeleton-value"></div>
        </div>
    </div>

    <!-- Amount Card -->
    <div class="invoice-skeleton-amount-card">
        <div class="invoice-skeleton-amount-row">
            <div class="skeleton-element invoice-skeleton-amount-label"></div>
            <div class="skeleton-element invoice-skeleton-amount-value"></div>
        </div>
        <div class="skeleton-element invoice-skeleton-balance-divider"></div>
        <div class="invoice-skeleton-amount-row">
            <div class="skeleton-element invoice-skeleton-balance-label"></div>
            <div class="skeleton-element invoice-skeleton-balance-value"></div>
        </div>
    </div>

    <!-- Section Title -->
    <div class="skeleton-element invoice-skeleton-section-title"></div>

    <!-- Line Items Table -->
    <div class="invoice-skeleton-table">
        <div class="invoice-skeleton-table-header">
            <div class="skeleton-element invoice-skeleton-table-header-cell"></div>
            <div class="skeleton-element invoice-skeleton-table-header-cell"></div>
            <div class="skeleton-element invoice-skeleton-table-header-cell"></div>
            <div class="skeleton-element invoice-skeleton-table-header-cell"></div>
        </div>
        <div class="invoice-skeleton-table-row">
            <div class="skeleton-element invoice-skeleton-table-cell description"></div>
            <div class="skeleton-element invoice-skeleton-table-cell quantity"></div>
            <div class="skeleton-element invoice-skeleton-table-cell price"></div>
            <div class="skeleton-element invoice-skeleton-table-cell total"></div>
        </div>
        <div class="invoice-skeleton-table-row">
            <div class="skeleton-element invoice-skeleton-table-cell description"></div>
            <div class="skeleton-element invoice-skeleton-table-cell quantity"></div>
            <div class="skeleton-element invoice-skeleton-table-cell price"></div>
            <div class="skeleton-element invoice-skeleton-table-cell total"></div>
        </div>
    </div>

    <!-- Payment History -->
    <div class="skeleton-element invoice-skeleton-section-title"></div>
    <div class="invoice-skeleton-payments">
        <div class="invoice-skeleton-payment-item">
            <div class="skeleton-element invoice-skeleton-payment-icon"></div>
            <div class="invoice-skeleton-payment-details">
                <div class="skeleton-element invoice-skeleton-payment-method"></div>
                <div class="skeleton-element invoice-skeleton-payment-date"></div>
            </div>
            <div class="skeleton-element invoice-skeleton-payment-amount"></div>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="invoice-skeleton-actions">
        <div class="skeleton-element invoice-skeleton-button"></div>
        <div class="skeleton-element invoice-skeleton-button"></div>
    </div>
</div>
*/