/* ============================================
   CUSTOMER DASHBOARD - Modern Dashboard Layout
   Bolivia Import Manager
   ============================================ */

/* ============================================
   MODERN CUSTOMER DASHBOARD
   ============================================ */
/* NOTE: Navigation tabs and breadcrumbs are defined in customer-layout.css */

/* Dashboard Header Modern */
.bim-dashboard-header-modern {
    background: var(--bim-gradient);
    padding: 28px 32px;
    border-radius: var(--bim-radius);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.bim-dashboard-header-modern::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    opacity: 0.5;
}

.bim-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.bim-dashboard-greeting {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--bim-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.bim-wave-emoji {
    display: inline-block;
    animation: bimWave 2s ease-in-out infinite;
    transform-origin: 70% 70%;
}

@keyframes bimWave {
    0%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    40% { transform: rotate(-4deg); }
    50%, 100% { transform: rotate(0deg); }
}

.bim-dashboard-tagline {
    margin: 8px 0 0 0;
    font-size: 15px;
    color: var(--bim-secondary);
}

.bim-dashboard-tagline .bim-highlight {
    font-weight: 700;
    color: var(--bim-primary);
}

/* Dashboard Grid Layout */
.bim-dashboard-grid-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
}

@media (max-width: 1100px) {
    .bim-dashboard-grid-layout {
        grid-template-columns: 1fr;
    }

    .bim-dashboard-sidebar {
        order: -1;
    }
}

/* Stats Row (Horizontal Pills) */
.bim-stats-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.bim-stat-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    padding: 10px 16px;
    border-radius: var(--bim-radius-sm);
    border: 1px solid var(--bim-border);
    box-shadow: var(--bim-shadow);
    flex: 1;
    min-width: 120px;
    transition: all 0.2s ease;
}

.bim-stat-pill:hover {
    transform: translateY(-1px);
    box-shadow: var(--bim-shadow-md);
}

.bim-stat-pill-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bim-stat-pill-icon .material-symbols-outlined {
    font-size: 18px;
}

.bim-stat-pill.orange .bim-stat-pill-icon {
    background: var(--bim-warning-light);
    color: var(--bim-warning);
}

.bim-stat-pill.blue .bim-stat-pill-icon {
    background: var(--bim-primary-light);
    color: var(--bim-primary);
}

.bim-stat-pill.green .bim-stat-pill-icon {
    background: var(--bim-success-light);
    color: var(--bim-success);
}

.bim-stat-pill.purple .bim-stat-pill-icon {
    background: var(--bim-info-light);
    color: var(--bim-info);
}

.bim-stat-pill-content {
    display: flex;
    flex-direction: column;
}

.bim-stat-pill-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--bim-dark);
    line-height: 1.2;
}

.bim-stat-pill-label {
    font-size: 11px;
    color: var(--bim-secondary);
    font-weight: 500;
}

/* Section Header Modern */
.bim-section-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.bim-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bim-section-title .material-symbols-outlined {
    font-size: 24px;
    color: var(--bim-primary);
}

.bim-section-title h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--bim-dark);
}

.bim-btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

.bim-btn-sm .material-symbols-outlined {
    font-size: 16px;
}

.bim-btn-ghost {
    background: transparent;
    color: var(--bim-secondary);
    border: none;
    padding: 8px 12px;
}

.bim-btn-ghost:hover {
    background: var(--bim-light);
    color: var(--bim-dark);
}

/* Dashboard Sidebar */
.bim-dashboard-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Sidebar Quote Card */
.bim-sidebar-quote-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #fdf2f8 100%);
    padding: 20px;
    border-radius: var(--bim-radius);
    border: 1px solid var(--bim-border);
    box-shadow: var(--bim-shadow);
}

.bim-sidebar-quote-title {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--bim-dark);
}

.bim-sidebar-quote-desc {
    margin: 0 0 16px 0;
    font-size: 13px;
    color: var(--bim-secondary);
    line-height: 1.5;
}

.bim-sidebar-quote-card .bim-btn {
    margin-bottom: 16px;
    padding: 12px 0;
    font-size: 14px;
}

.bim-sidebar-quote-card .bim-btn .bim-btn-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bim-sidebar-quote-card .bim-btn .material-symbols-outlined {
    font-size: 18px;
}

.bim-sidebar-quote-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.bim-quote-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--bim-secondary);
}

.bim-quote-badge .material-symbols-outlined {
    font-size: 14px;
    color: var(--bim-primary);
}

.bim-quote-badge-divider {
    width: 3px;
    height: 3px;
    background: var(--bim-border);
    border-radius: 50%;
}

/* Sidebar Support Card */
.bim-sidebar-support-card {
    background: #fff;
    padding: 18px 20px;
    border-radius: var(--bim-radius);
    border: 1px solid var(--bim-border);
    box-shadow: var(--bim-shadow);
}

.bim-support-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.bim-support-icon {
    font-size: 22px;
    color: var(--bim-primary);
}

.bim-support-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--bim-dark);
}

.bim-support-desc {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: var(--bim-secondary);
    line-height: 1.5;
}

.bim-sidebar-support-card .bim-btn {
    padding: 10px 0;
    font-size: 13px;
}

/* Sidebar Rate Card */
.bim-sidebar-rate-card {
    background: #fff;
    padding: 16px 20px;
    border-radius: var(--bim-radius);
    border: 1px solid var(--bim-border);
    box-shadow: var(--bim-shadow);
}

.bim-rate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.bim-rate-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bim-secondary);
}

.bim-rate-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--bim-success);
    font-weight: 500;
}

.bim-rate-status .material-symbols-outlined {
    font-size: 14px;
}

.bim-rate-value-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.bim-rate-number {
    font-size: 28px;
    font-weight: 700;
    color: var(--bim-dark);
}

.bim-rate-unit {
    font-size: 14px;
    color: var(--bim-secondary);
    font-weight: 500;
}

/* Empty State Modern */
.bim-empty-state-modern {
    text-align: center;
    padding: 80px 24px;
    background: #fff;
    border-radius: var(--bim-radius);
    box-shadow: var(--bim-shadow);
    border: 2px dashed var(--bim-border);
}

.bim-empty-state-modern .bim-empty-icon {
    margin-bottom: 20px;
}

.bim-empty-state-modern .bim-empty-icon .material-symbols-outlined {
    font-size: 64px;
    color: var(--bim-secondary);
    opacity: 0.5;
}

.bim-empty-state-modern h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--bim-dark);
}

.bim-empty-state-modern p {
    margin: 0 0 24px 0;
    font-size: 15px;
    color: var(--bim-secondary);
}

.bim-empty-state-modern .bim-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ============================================
   ORDERS TABLE - Row-Based Design
   ============================================ */

.bim-orders-table-card {
    background: #fff;
    border-radius: var(--bim-radius);
    box-shadow: var(--bim-shadow);
    border: 1px solid var(--bim-border);
    overflow: hidden;
}

/* Table Header */
.bim-orders-table-header {
    display: grid;
    grid-template-columns: minmax(200px, 1.5fr) 100px 160px 100px 80px;
    gap: 12px;
    padding: 12px 20px;
    background: #f8fafc;
    border-bottom: 1px solid var(--bim-border);
}

.bim-table-col {
    display: flex;
    align-items: center;
}

.bim-orders-table-header .bim-table-col {
    font-size: 11px;
    font-weight: 700;
    color: var(--bim-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Table Body */
.bim-orders-table-body {
    /* Container for all order rows */
}

/* Individual Order Row Container */
.bim-order-row {
    border-bottom: 1px solid var(--bim-border);
}

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

/* Main Row (First Item / Summary) */
.bim-order-row-main {
    display: grid;
    grid-template-columns: minmax(200px, 1.5fr) 100px 160px 100px 80px;
    gap: 12px;
    padding: 14px 20px;
    align-items: center;
    background: #fff;
    transition: background-color 0.2s ease;
}

.bim-order-row-main:hover {
    background: #fafbfc;
}

/* Product Info in Row */
.bim-product-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
}

.bim-product-thumb-mini {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--bim-border);
}

.bim-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bim-light);
    color: var(--bim-secondary);
}

.bim-thumb-placeholder .material-symbols-outlined {
    font-size: 18px;
}

.bim-product-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.bim-product-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--bim-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.bim-order-number {
    font-size: 11px;
    color: var(--bim-secondary);
}

/* Date Column */
.bim-date-text {
    font-size: 14px;
    color: var(--bim-dark);
}

/* Amount Column */
.bim-amount-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--bim-dark);
}

.bim-amount-sub {
    font-size: 14px;
    font-weight: 500;
    color: var(--bim-secondary);
}

/* Actions Column */
.bim-col-actions {
    justify-content: flex-end;
}

/* Ghost Button Style */
.bim-btn-ghost {
    background: transparent;
    border: none;
    color: var(--bim-primary);
    padding: 8px 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bim-btn-ghost:hover {
    background: var(--bim-primary-light);
    color: var(--bim-primary);
}

.bim-btn-ghost .material-symbols-outlined {
    font-size: 18px;
}

/* Expandable Items Section */
.bim-order-items-expandable {
    display: none;
    background: #fafbfc;
    border-top: 1px dashed var(--bim-border);
}

.bim-order-items-expandable.expanded {
    display: block;
    animation: bimSlideDown 0.3s ease;
}

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

/* Sub-item Row */
.bim-order-row-item {
    display: grid;
    grid-template-columns: minmax(200px, 1.5fr) 100px 160px 100px 80px;
    gap: 12px;
    padding: 10px 20px;
    align-items: center;
    border-bottom: 1px dashed var(--bim-border);
}

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

.bim-product-sub-item {
    padding-left: 16px;
}

.bim-product-sub-item .bim-product-thumb-mini {
    width: 32px;
    height: 32px;
}

.bim-product-sub-item .bim-product-name {
    font-size: 12px;
    font-weight: 500;
}

/* Toggle Button Row */
.bim-order-toggle-row {
    padding: 0;
    text-align: center;
    background: #fff;
    border-top: 1px solid var(--bim-border);
}

.bim-toggle-items-btn {
    width: 100%;
    padding: 12px 24px;
    background: transparent;
    border: none;
    color: var(--bim-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.bim-toggle-items-btn:hover {
    background: var(--bim-primary-light);
}

.bim-toggle-text-show,
.bim-toggle-text-hide {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bim-toggle-items-btn .material-symbols-outlined {
    font-size: 20px;
}

/* Responsive Adjustments */
@media (max-width: 782px) {
    .bim-dashboard-header-modern {
        padding: 24px 20px;
    }

    .bim-header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .bim-dashboard-greeting {
        font-size: 24px;
    }

    .bim-stats-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .bim-stat-pill {
        padding: 10px 14px;
    }
}

@media (max-width: 900px) {
    /* Navigation Tabs - Tablet */
    .bim-customer-nav-tabs {
        gap: 8px;
        padding: 6px;
    }

    button.bim-nav-tab,
    a.bim-nav-tab {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    button.bim-nav-tab .material-symbols-outlined,
    a.bim-nav-tab .material-symbols-outlined {
        font-size: 18px;
    }

    .bim-orders-table-header {
        display: none;
    }

    .bim-order-row-main,
    .bim-order-row-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px 20px;
    }

    .bim-order-row-main {
        position: relative;
    }

    .bim-col-product {
        order: 1;
    }

    .bim-col-status {
        order: 2;
        position: absolute;
        top: 16px;
        right: 20px;
    }

    .bim-col-date {
        order: 3;
    }

    .bim-col-date::before {
        content: 'Fecha: ';
        font-weight: 600;
        color: var(--bim-secondary);
        font-size: 12px;
    }

    .bim-col-amount {
        order: 4;
    }

    .bim-col-amount::before {
        content: 'Precio Ref.: ';
        font-weight: 600;
        color: var(--bim-secondary);
        font-size: 12px;
    }

    .bim-col-actions {
        order: 5;
        justify-content: flex-start;
        padding-top: 8px;
        border-top: 1px dashed var(--bim-border);
    }

    .bim-col-actions .bim-btn {
        width: 100%;
        justify-content: center;
    }

    .bim-product-sub-item {
        padding-left: 0;
    }

    .bim-order-row-item .bim-col-date,
    .bim-order-row-item .bim-col-status,
    .bim-order-row-item .bim-col-actions {
        display: none;
    }

    .bim-order-row-item {
        padding: 12px 20px;
    }

    .bim-order-row-item .bim-col-amount::before {
        content: 'Precio: ';
    }
}

@media (max-width: 480px) {
    .bim-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .bim-stat-pill-value {
        font-size: 16px;
    }

    .bim-stat-pill-icon {
        width: 32px;
        height: 32px;
    }

    .bim-stat-pill-icon .material-symbols-outlined {
        font-size: 16px;
    }

    .bim-product-info-row {
        gap: 12px;
    }

    .bim-product-thumb-mini {
        width: 40px;
        height: 40px;
    }

    .bim-product-name {
        font-size: 13px;
    }

    .bim-empty-state-modern {
        padding: 50px 20px;
    }

    .bim-empty-state-modern .bim-empty-icon .material-symbols-outlined {
        font-size: 48px;
    }

    /* Navigation Tabs - Mobile */
    .bim-nav-tab-text {
        display: none;
    }

    button.bim-nav-tab,
    a.bim-nav-tab {
        padding: 12px !important;
        justify-content: center;
    }

    button.bim-nav-tab .material-symbols-outlined,
    a.bim-nav-tab .material-symbols-outlined {
        font-size: 22px;
    }

    /* Breadcrumbs - Mobile */
    .bim-breadcrumbs {
        font-size: 12px;
        padding: 8px 0;
        gap: 6px;
    }

    .bim-breadcrumb-link {
        padding: 5px 10px;
        font-size: 12px;
    }

    .bim-breadcrumb-link .material-symbols-outlined {
        font-size: 16px;
    }

    .bim-breadcrumb-current {
        padding: 5px 10px;
        font-size: 12px;
    }

    .bim-breadcrumb-separator {
        font-size: 14px;
    }
}