/**
 * =========================================================================================
 * info-panel.css
 *
 * Shared styles for the supplier information panel component.
 * This includes the main container, the tariff data tables, and the history chart.
 * =========================================================================================
 */

/* Main info panel container */
.pv-tarif-component #mapSimplesuppliersInfos,
.pv-tarif-component #BarChartTop30suppliersInfos,
.pv-tarif-component #textSearchsuppliersInfos {
  box-sizing: border-box;
  padding: 10px;
  width: 95%; /* Default width for larger screens */
  display: flex;
  flex-wrap: wrap;
  font-family: helvetica, sans-serif !important; /* Use !important as a last resort to fight theme overrides */
  font-size: 15px;
  line-height: 1.4;
  position: absolute;
  background-color: ghostwhite;
  border: solid 1px #e4e4e4;
  box-shadow: 0px 0px 10px 5px rgba(119, 119, 119, 0.75);
  -moz-box-shadow: 0px 0px 10px 5px rgba(119, 119, 119, 0.75);
  -webkit-box-shadow: 0px 0px 10px 5px rgba(119, 119, 119, 0.75);
}

/* Content sections within the panel (info and history chart) */
.pv-tarif-component .aSupplierInfos,
.pv-tarif-component .supplierHistoryChart {
  /* Default layout for larger screens */
  box-sizing: border-box;
  width: 50%;
  min-width: 360px;
}

/* Close button */
.pv-tarif-component .closeSuppliersInfos {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 0;
    right: 0;
    background: #cfcfcf url("../img/icon-close.png") 50% 50% no-repeat;
    cursor: pointer;
}

/* Tariff data table styling */
.pv-tarif-component .supplierTarifData {
   border-collapse: collapse;
   border: solid 1px black;
   text-align: right;
   width: 100%;
}

.pv-tarif-component .supplierTarifData th,
.pv-tarif-component .supplierTarifData td {
   padding: 5px !important; /* Use !important as a last resort if WP styles are too aggressive */
   border: none !important;
   background: transparent !important;
}

.pv-tarif-component .total {
   border-top: solid 1px black;
}

.pv-tarif-component .tabLabel {
   text-align: left;
}

/* Table header style */
.pv-tarif-component .entete {
   background-color: #5082b8;
   color: white;
   border: none;
}

/* Reset borders inside the info panel tables */
.pv-tarif-component #mapSimplesuppliersInfos table th, .pv-tarif-component #mapSimplesuppliersInfos table td,
.pv-tarif-component #BarChartTop30suppliersInfos table th, .pv-tarif-component #BarChartTop30suppliersInfos table td,
.pv-tarif-component #textSearchsuppliersInfos table th, .pv-tarif-component #textSearchsuppliersInfos table td {
   border: none;
}

/* History chart axis styling */
.pv-tarif-component .supplierHistoryChart .axis path,
.pv-tarif-component .supplierHistoryChart .axis line,
.pv-tarif-component .supplierHistoryChart .xH.axis path,
.pv-tarif-component .supplierHistoryChart .xH.axis line,
.pv-tarif-component .supplierHistoryChart .yH.axis path,
.pv-tarif-component .supplierHistoryChart .yH.axis line {
    fill: none;
    stroke: #000;
    stroke-width: 1px;
    shape-rendering: crispEdges;
}

.pv-tarif-component .supplierHistoryChart .bar {
    fill: steelblue;
}

.pv-tarif-component .supplierHistoryChart .y.axis path {
    display: none;
}

/* Responsive stacking for the info panel on smaller screens */
@media only screen and (max-width: 768px) {
  /* Make the content sections stack vertically on mobile */
  .pv-tarif-component .aSupplierInfos,
  .pv-tarif-component .supplierHistoryChart {
    width: 100%;
    min-width: 0; /* Reset min-width to allow full flexibility */
    box-sizing: border-box; /* Ensure padding is included in the width */
  }

  /* Adjust the main panel container width for mobile */
  #mapSimplesuppliersInfos,
  #BarChartTop30suppliersInfos,
  #textSearchsuppliersInfos {
    width: 90%; /* Use a slightly smaller width on mobile to not touch the edges */
    left: 5%;   /* Center the panel */
  }
}

/* Further adjustments for very small screens */
@media only screen and (max-width: 480px) {
  .pv-tarif-component .aSupplierInfos,
  .pv-tarif-component .supplierHistoryChart {
    width: inherit;
    min-width: 60px;
  }

  .pv-tarif-component .closeSuppliersInfos {
      width: 22px;
      height: 19px;
      position: absolute;
      top: 0;
      left: 0;
  }
}
 
/* Tooltip styling for all components */
.pv-tarif-component .tooltip {
  line-height: 1.2;
}