/* ==========================================================================
   Custom WooCommerce Dashboard UI (Fully Responsive)
   ========================================================================== */

/* 1. Main Layout & Flexbox Setup */
.woocommerce-account .woocommerce {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}

/* 2. Navigation Menu & Sidebar */
.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 28%;
    max-width: 320px;
    float: none;
    width: 100%;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 16px 0 !important; /* Force vertical padding on the container */
    margin: 0;
    background: var(--color-white, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 8px);
    overflow: hidden;
}

.woocommerce-MyAccount-navigation ul li {
    margin: 0 16px 4px 16px !important; /* Left/Right margin pushes the highlight off the edge */
    border: none;
}

.woocommerce-MyAccount-navigation ul li:last-child {
    margin-bottom: 0 !important;
}

/* FIX: Icons on right, text on left */
.woocommerce-MyAccount-navigation ul li a {
    display: flex !important;
    align-items: center;
    flex-direction: row-reverse; /* Flips the order of elements */
    justify-content: flex-end;   /* Keeps them tight together */
    gap: 15px;                   /* Adds space between icon and text */
    padding: 14px 20px !important;
    color: var(--color-text-muted, #64748b);
    text-decoration: none;
    border-radius: var(--radius, 8px);
    font-weight: 600;
    transition: all 0.3s ease;
    box-sizing: border-box;
    width: 100%;
}

/* Ensure the icon is always on the far right of the block */
.woocommerce-MyAccount-navigation ul li a::before {
    margin-left: auto; /* Pushes the icon to the right */
}

/* 3. Main Content Area & Padding Fix */
.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1;
    min-width: 0; 
    float: none; 
    background: var(--color-white, #ffffff);
    padding: 32px !important; /* Forced padding around the entire content area */
    border-radius: var(--radius, 8px);
    border: 1px solid var(--color-border, #e2e8f0);
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    box-sizing: border-box;
}

/* Backup padding specifically for your custom section */
.custom-orders-section {
    padding: 0; 
    width: 100%;
    box-sizing: border-box;
}

.custom-orders-section h2.dashboard-title {
    margin-top: 0;
    margin-bottom: 24px;
}

/* 4. Dashboard Stat Cards */
.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.stat-card {
    background: var(--color-bg, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 8px);
    padding: 16px;
    text-align: center;
}

.stat-card h3 {
    margin: 0 0 8px 0;
    font-size: 0.85rem;
    color: var(--color-text-muted, #64748b);
}

.stat-card .stat-number {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-text, #0f172a);
}

/* 5. Status Badges */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Badge Colors */
.badge-new { background: #E8F4FD; color: #0073E6; }
.stat-card.status-new { border-bottom: 3px solid #0073E6; }
.badge-contacted { background: #FFF3E0; color: #E65100; }
.stat-card.status-contacted { border-bottom: 3px solid #E65100; }
.badge-confirmed { background: #E8F5E9; color: var(--color-success, #22c55e); }
.stat-card.status-confirmed { border-bottom: 3px solid var(--color-success, #22c55e); }
.badge-ignored { background: #FFEBEE; color: #C62828; }
.stat-card.status-ignored { border-bottom: 3px solid #C62828; }
.badge-paid { background: #E0F7FA; color: #00838F; }
.stat-card.status-paid { border-bottom: 3px solid #00838F; }
.badge-in-transit, .badge-in_transit { background: #EDE7F6; color: #512DA8; }
.stat-card.status-in-transit { border-bottom: 3px solid #512DA8; }
.badge-delivered { background: #E8F5E9; color: #2E7D32; }
.stat-card.status-delivered { border-bottom: 3px solid #2E7D32; }
.badge-success { background: #F9FBE7; color: #827717; }
.stat-card.status-success { border-bottom: 3px solid #827717; }


/* 6. My Orders List View */
.orders-list-container {
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 8px);
    overflow: hidden;
    background: var(--color-white, #ffffff);
}

.orders-list-header {
    display: flex;
    background: var(--color-bg, #f8fafc);
    padding: 12px 16px;
    font-weight: 700;
    color: var(--color-text, #0f172a);
    border-bottom: 1px solid var(--color-border-strong, #cbd5e1);
}

.order-list-row {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    transition: background 0.2s ease;
}

.order-list-row:last-child {
    border-bottom: none;
}

.order-list-row:hover {
    background: var(--color-bg, #f8fafc);
}

/* Columns */
.col-product { flex: 2; display: flex; flex-direction: column; gap: 4px; }
.col-date { flex: 1; color: var(--color-text-muted, #64748b); font-size: 0.9rem; }
.col-status { flex: 1; }
.col-action { flex: 1; text-align: right; }

.order-id-sub {
    font-size: 0.8rem;
    color: var(--color-text-muted, #64748b);
}

/* View Product Button */
.btn-view-product {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--color-primary, #a855f7);
    color: var(--color-primary, #a855f7);
    border-radius: var(--radius, 8px);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-view-product:hover {
    background: var(--color-primary, #a855f7);
    color: var(--color-white, #ffffff);
}

/* 7. Fully Responsive Mobile Adjustments */
@media (max-width: 768px) {
    /* Stack Navigation & Content Container */
    .woocommerce-account .woocommerce {
        flex-direction: column;
        gap: 1rem; 
    }
    
    .woocommerce-account .woocommerce-MyAccount-navigation {
        flex: 100%;
        width: 100% !important;
        max-width: 100%; /* Force full width on mobile */
    }
    
    .woocommerce-account .woocommerce-MyAccount-content {
        flex: 100%;
        width: 100% !important;
        padding: 20px !important; /* Slightly smaller padding for mobile screens */
    }
    
    /* Stack Order List Rows */
    .orders-list-header { 
        display: none; /* Hide header row on mobile for cleanliness */
    }
    
    .order-list-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        position: relative;
    }
    
    /* Reformat columns for mobile stack */
    .col-product, .col-date, .col-status, .col-action { 
        width: 100%; 
        text-align: left; 
    }
    
    .col-action {
        margin-top: 8px;
    }
    
    .btn-view-product {
        display: block; /* Make button full width on mobile for easy tapping */
        width: 100%;
        box-sizing: border-box;
    }

    
}

.dashboard-stats-grid {
    display: grid;
    /* Adjusts grid to fit more cards per row automatically */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

/* Ensure cards maintain a consistent look */
.stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}