.wci-container { margin-top: 20px; font-family: sans-serif; }
.wci-controls { display: flex; align-items: center; gap: 15px; background: #fff; padding: 15px 20px; border-radius: 8px; border: 1px solid #e5e5e5; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }

/* Popup Export */
.wci-export-container { position: relative; }
.wci-export-popup {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 100;
    width: 200px;
}
.wci-export-popup label { display: block; margin-bottom: 8px; font-size: 13px; }

/* Inputs */
.wci-table .wci-input {
    height: 35px !important; border: 1px solid #cbd5e1 !important; border-radius: 5px !important; 
    font-weight: 600 !important; background: #fff !important; color: #333 !important; text-align: center !important;
}
.wci-sku { width: 110px !important; text-align: left !important; padding: 0 8px !important; }
.wci-price, .wci-stock { width: 85px !important; }

/* Modal Photo CENTRÉE et TAILLE 70 */
.wci-modal { 
    display: none; position: fixed; z-index: 99999; 
    left: 0; top: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.85); 
    align-items: center; justify-content: center; 
}
#wci-img-target { 
    max-width: 70vw !important; max-height: 70vh !important; 
    object-fit: contain; border: 4px solid #fff; border-radius: 4px; 
}
.wci-close { position: absolute; top: 20px; right: 40px; color: #fff; font-size: 40px; cursor: pointer; }

/* Dashboard */
.wci-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 25px; }
.wci-stat-card { padding: 20px; border-radius: 12px; text-align: center; cursor: pointer; transition: 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.wci-stat-number { font-size: 32px; font-weight: 800; }

/* Table */
.wci-table { width: 100%; border-collapse: collapse; background: #fff; }
.wci-table th { text-align: left; padding: 15px; background: #f8f9fa; border-bottom: 2px solid #e5e5e5; }
.wci-table td { padding: 10px 15px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.wci-col-img img { width: 45px; height: 45px; border-radius: 4px; object-fit: cover; cursor: zoom-in; }

/* Status Dot */
.wci-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #ccc; }
.wci-dot.saving { background: #ffc107; animation: wci-blink 1s infinite; }
.wci-dot.success { background: #28a745; }
@keyframes wci-blink { 50% { opacity: 0.3; } }

.wci-row-hidden { display: none; }
#wci-search { width: 200px; height: 38px; border-radius: 6px; border: 1px solid #ccc; padding: 0 10px; }
.wci-purchase-price input{font-style:italic;}

/* Marge */
.wci-margin-positive{color:#2e7d32;font-weight:600;}
.wci-margin-negative{color:#c62828;font-weight:600;}


/* Currency inside inputs */
.wci-input-wrapper {
    position: relative;
}
.wci-input-wrapper .wci-currency-inside {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #666;
    pointer-events: none;
}
.wci-input-wrapper input {
    padding-right: 20px;
}


/* Sort indicators */
th.wci-sortable {
  cursor: pointer;
  user-select: none;
}
.wci-sort-indicator {
  font-size: 12px;
  margin-left: 4px;
  color: #555;
}
th.wci-sort-asc,
th.wci-sort-desc {
  background: #f3f4f6;
}


/* Fix reset button vertical centering */
#wci-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* Light table optimization */
.wci-table td,
.wci-table th {
    vertical-align: middle;
}

.wci-table td.col-name {
    max-width: 260px;
}
.wci-table td.col-name span,
.wci-table td.col-name strong {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Filters layout */
.wci-filters label {
  font-size: 12px;
  color: #555;
}
.wci-filters .wci-input {
  height: 32px;
}


/* Filters UX */
.wci-filters-toggle {
  margin: 8px 0;
}
.wci-filters-toggle .button {
  display: inline-flex;
  align-items: center;
}


/* Value colors */
.wci-positive {
    color: #2e7d32;
    font-weight: 600;
}
.wci-negative {
    color: #c62828;
    font-weight: 600;
}


/* Alert: Valeur Vente < Valeur Achat */
.wci-alert {
    background: #fdecea;
    color: #c62828 !important;
    padding: 2px 4px;
    border-radius: 4px;
}

.wci-export-container { position: relative; overflow: visible; }

.wci-totals-row{
  background:#f6f7f7;
  border-top:2px solid #2271b1;
}