:root{--green:#60a83a;--white:#fff;--card:#ffffff;--text:#1b1b1b;--muted:#6b7280;--bg:#f6f7fb;}
*{box-sizing:border-box}
html,body{width:100%;min-width:100%;min-height:100vh;height:auto;margin:0;padding:0;overflow-x:hidden}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column;min-height:100vh;height:auto}

/* Reset browser defaults for header and section */
header, section, footer {
  margin: 0;
}

/* Base row padding (reduced for better control) */
.row{padding:4px 20px;}
/* Remove padding for row4 to eliminate white lines */
.row4{padding:0!important}

/* Individual row margins for fine-tuning - no gaps to avoid white lines */
.row1{margin-top:0;margin-bottom:0;}
.row2{margin-top:0;margin-bottom:0;}
.row2-5{margin-top:20;margin-bottom:0;}
.row3{margin-top:0;margin-bottom:0;justify-content:center}
.row3{padding:0px 0px;}
.row4{margin-top:0;margin-bottom:0}
.row1{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:white;
  color:var(--text);
  height:80px;
  /* Move header content a bit closer to the edges (left more than right) */
  padding: 72px 54px 72px 28px;
}
.row1 .left{
  /* Reserve a fixed slot between page edge and logo for the nav icon */
  --nav-slot: 46px;
  --nav-size: 30px;
  position:relative;
  display:flex;
  align-items:center;
  padding-left: var(--nav-slot);
}
.row1 .left .header-nav-icon{
  position:absolute;
  left: calc((var(--nav-slot) - var(--nav-size)) / 2);
  top: 50%;
  transform: translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--nav-size);
  height:var(--nav-size);
  border-radius:9px;
  background:#111;
  color:#fff;
  text-decoration:none;
  user-select:none;
  z-index: 5;
}
.row1 .left .header-nav-icon:hover{background:#222}
.row1 .left .header-nav-icon .nav-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.row1 .left .header-nav-icon .nav-icon svg{width:16px;height:16px;display:block}
.row1 #page-logo-link{display:inline-block;text-decoration:none}
.row1 #page-logo-link:hover{opacity:0.9}
.row1 #page-logo{height:100px;object-fit:contain;display:block}
.row1 .right{display:flex;align-items:center}
.row1 #logo{height:80px;object-fit:contain}
.analytics-link{
  margin-left:16px;
  padding:10px 14px;
  background:#4CAF50;
  color:white;
  text-decoration:none;
  font-weight:700;
  border-radius:8px;
  font-family:'Montserrat',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.analytics-link:hover{
  background:#3d8b3f;
}
.row1 .center{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.row1 .center-top-row{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.row1 .center-bottom-row{display:flex;align-items:center;gap:8px}
.row1 .client-row{display:flex;align-items:center;gap:8px}
.row1 .client-label{color:white;background:#000;padding:4px 8px;display:inline-block;font-weight:600;font-size:1.2rem;font-family:'Montserrat',sans-serif;text-transform:uppercase;text-align:left}
.row1 .client-info{display:inline-block;font-weight:600;font-size:1.2rem;color:var(--text);font-family:'Montserrat',sans-serif;text-transform:uppercase;text-align:left;line-height:1.5}
.row1 .date-input-group-inline{display:flex;align-items:center;gap:8px}
.row1 .date-label-inline{font-weight:600;font-size:1.2rem;color:white;background:#000;padding:4px 8px;display:inline-block;font-family:'Montserrat',sans-serif;text-transform:uppercase;text-align:left}
.row1 .date-range-button{border:none;border-radius:6px;padding:6px 12px;font-size:1rem;background:white;color:var(--text);text-align:left;min-width:200px;cursor:pointer;font-family:inherit;display:flex;align-items:center}
.row1 .date-range-button:hover{background:#f0f0f0}
.row1 .date-range-container{display:flex;gap:16px;align-items:center;grid-column:1/-1;grid-row:2}
.row1 .date-input-group{display:flex;flex-direction:column;gap:4px}
.row1 .date-label{font-weight:600;font-size:1rem;color:white;background:#000;padding:4px 8px;display:inline-block;font-family:'Montserrat',sans-serif;text-transform:uppercase;text-align:left}
.row1 #analyticsDate,.row1 #analyticsStartDate,.row1 #analyticsEndDate{border:none;border-radius:6px;padding:4px 8px;font-size:1rem;background:white;color:var(--text);text-align:left;min-width:140px}
.row1 #datePicker{border:none;border-radius:6px;padding:4px 8px;font-size:1.2rem;background:white;color:var(--text);grid-column:2;grid-row:2;text-align:left;justify-self:start}
.date-range-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:10000}
.date-range-modal-content{background:white;border-radius:8px;width:90%;max-width:500px;box-shadow:0 4px 20px rgba(0,0,0,0.3)}
.date-range-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e0e0e0}
.date-range-modal-header h3{margin:0;font-size:1.2rem;font-weight:600}
.date-range-modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:#666;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}
.date-range-modal-close:hover{color:#000}
.date-range-modal-body{padding:20px}
.date-range-options{display:flex;flex-direction:column;gap:20px}
.date-range-option{display:flex;flex-direction:column;gap:10px}
.date-range-option label{display:flex;align-items:center;gap:8px;font-weight:600;cursor:pointer}
.date-range-option input[type="radio"]{cursor:pointer}
.date-range-option input[type="date"]{border:1px solid #ccc;border-radius:4px;padding:6px 8px;font-size:1rem;width:100%}
.date-range-inputs{display:flex;flex-direction:column;gap:10px;margin-left:28px}
.date-range-inputs label{font-weight:normal;font-size:0.9rem;color:#666}
.date-range-option[style*="opacity: 0.5"] input[type="date"]{pointer-events:none;opacity:0.5}
.date-range-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:20px;border-top:1px solid #e0e0e0}
.date-range-btn-cancel,.date-range-btn-accept{border:none;border-radius:6px;padding:8px 16px;font-size:1rem;cursor:pointer;font-weight:600}
.date-range-btn-cancel{background:#e0e0e0;color:#333}
.date-range-btn-cancel:hover{background:#d0d0d0}
.date-range-btn-accept{background:#4caf50;color:white}
.date-range-btn-accept:hover{background:#45a049}
.pdf-export-options{display:flex;flex-direction:column;gap:24px}
.pdf-export-option{display:flex;flex-direction:column;gap:10px}
.pdf-export-label{font-weight:600;font-size:1rem;color:#333}
.pdf-export-radio-group{display:flex;flex-direction:column;gap:10px;margin-left:0}
.pdf-export-radio-label{display:flex;align-items:center;gap:8px;font-weight:normal;cursor:pointer}
.pdf-export-radio-label input[type="radio"]{cursor:pointer;width:18px;height:18px}
.pdf-export-input{border:1px solid #ccc;border-radius:4px;padding:8px 12px;font-size:1rem;width:100%;max-width:200px}
.pdf-export-input:focus{outline:none;border-color:#4caf50;box-shadow:0 0 0 2px rgba(76,175,80,0.2)}

/* Floating compact summary bar (display-only) */
.floating-summary{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:2000;
  background:#000;
  color:#fff;
  /* Match Row1 edge padding so the minibar icon aligns with the header icon */
  padding:6px 28px 8px;
  box-shadow:0 2px 10px rgba(0,0,0,0.35);
  position: fixed;
}
.floating-summary{
  /* Reserve a slot like Row1 so the icon can span both rows without shifting text */
  --nav-slot: 46px;
  --nav-size: 30px;
  position: fixed;
}
.floating-summary-top,
.floating-summary-bottom{
  max-width:1400px;
  margin:0 auto;
  width:100%;
}
.floating-summary-top{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  font-size:0.9rem;
  font-weight:800;
  flex-wrap:wrap;
  /* Reserve symmetric space so content stays centered while icon is pinned left */
  padding-left:var(--nav-slot);
  padding-right:var(--nav-slot);
}
.floating-summary-bottom{
  padding-left:var(--nav-slot);
  padding-right:var(--nav-slot);
}
.floating-nav-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:9px;
  background:#111;
  border:1px solid #fff;
  text-decoration:none;
  user-select:none;
  /* Span both rows: position relative to the whole minibar container */
  position:absolute;
  left: calc(28px + (var(--nav-slot) - var(--nav-size)) / 2); /* Row1: padding-left 28 + slot center */
  top: 50%;
  transform: translateY(-50%);
}
.floating-nav-icon:hover{background:#222}
.floating-nav-icon .nav-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.floating-nav-icon .nav-icon svg{width:16px;height:16px;display:block}
.floating-period-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:none;
  background:transparent;
  color:inherit;
  padding:0;
  cursor:pointer;
  font:inherit;
}
.floating-period-btn *{font:inherit;}
.floating-period-btn:hover{
  text-decoration:underline;
}
.floating-period-btn:disabled{
  cursor:default;
  text-decoration:none;
  opacity:0.9;
}
.floating-summary-top .pill{
  background:#000;
  color:#fff;
  padding:2px 8px;
  border:1px solid rgba(255,255,255,0.25);
  border-radius:6px;
  letter-spacing:0.5px;
  text-transform:uppercase;
}
.floating-summary-top .sep{opacity:0.55}
.floating-summary-bottom{
  margin-top:6px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px 16px;
  font-size:0.82rem;
  font-weight:800;
  text-transform:uppercase;
}
.floating-summary-bottom .k{opacity:0.85;margin-right:6px}
@media (max-width: 900px){
  .floating-summary-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.row2{display:flex;flex-direction:column;gap:10px;background:#000;color:var(--white);padding:12px 20px;font-size:0.81rem;justify-content:center}
.row2-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:start;justify-items:center;max-width:100%}
.row2-field{display:flex;flex-direction:row;align-items:center;gap:4px;justify-content:center}
.row2-label{font-weight:700;color:var(--white);text-align:left;font-family:'Montserrat',sans-serif;text-transform:uppercase;font-size:0.9rem;min-width:auto;flex-shrink:0;white-space:nowrap}
.row2-value-field{display:flex;align-items:center;justify-content:flex-start;background:#000;border:none;padding:6px 10px;position:relative;min-height:32px;flex:0 0 auto;border-radius:0}
.row2-value-field span:first-child{flex:1;text-align:left;color:var(--white);font-size:0.9rem;font-weight:700;text-transform:uppercase;font-family:'Montserrat',sans-serif}
.row2-value-field .row2-select,.row2-value-field select.row2-select{background:#000;color:var(--white);border:1px solid #555;font-size:0.9rem;font-weight:700;font-family:'Montserrat',sans-serif;padding:4px 8px;min-width:120px;cursor:pointer}
.client-row .client-select{background:#fff;color:#000;border:1px solid #000;font-size:0.9rem;font-family:'Montserrat',sans-serif;font-weight:600;text-transform:uppercase;padding:4px 8px;min-width:140px;cursor:pointer}
.client-row .client-select option{background:#fff;color:#000;text-transform:uppercase}
.client-row .client-select option:disabled{color:#888;background:#eee}
.dropdown-arrow{color:#b0b0b0;font-size:0.75rem;margin-left:auto;pointer-events:none;flex-shrink:0}
.row2-5{background:#404041;color:var(--white);padding:15px 20px 0px 100px;text-align:left;font-size:.9rem}
.row2-5 .timestamp-display{color:var(--white)}
.row2-5 .timestamp-label{background:var(--green);padding:4px 8px;display:inline-block;font-family:'Montserrat',sans-serif;text-transform:uppercase;font-weight:600}
/* Container for rows 3 and 4 - default vertical stacking */
.rows-3-4-container{display:flex;flex-direction:column;width:100%;min-width:100%;margin:0;margin-bottom:0;padding:0;flex:1 1 auto;min-height:0}
.left-column{display:flex;flex-direction:column;width:100%}
.row3{display:flex;justify-content:center;align-items:center;gap:40px;min-height:200px;background:#404041;padding:0px 0px;position:relative}
.silo-container{background:transparent;padding:12px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative}
.silo-svg-wrapper{width:100%;max-width:400px;height:520px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.silo-svg-wrapper svg{width:100%;height:100%;max-width:400px;max-height:520px;object-fit:contain}
.silo-label{margin-top:8px;color:var(--muted);font-size:.85rem;font-weight:600}
.silo-weight{font-size:1.2rem;font-weight:700;margin-top:4px;color:var(--text)}
.silo-percentage{font-size:1rem;font-weight:600;margin-top:2px;color:var(--muted)}
.central-loading{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.9);display:flex;align-items:center;justify-content:center;z-index:1000}
.loading-progress{text-align:center;width:300px;display:flex;flex-direction:column;align-items:center;gap:20px}
.spinner{width:50px;height:50px;border:5px solid #e5e7eb;border-top:5px solid #4CAF50;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.loading-text{color:var(--muted);font-size:1rem;font-weight:500}
.row4{min-height:600px;flex:1 1 auto;position:relative;width:100%;padding:0;background:#404041;margin:0;overflow:visible}
.row4 #chart{width:100%!important;height:100%!important;min-height:550px;display:block;overflow:visible}
.row4 #chart .plotly{width:100%!important;height:100%!important;min-height:550px;overflow:visible}
.row4 #chart .plot-container{width:100%!important;height:100%!important;overflow:visible}
.row4 #chart .svg-container{width:100%!important;height:100%!important}
.row4 #chart .legend{position:relative!important;visibility:visible!important;opacity:1!important;display:block!important}
/* Live update indicator */
.indicador-actualizacion {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #4CAF50;
  color: white;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  z-index: 1000;
  animation: deslizarEntrada 0.3s ease-out;
}

.punto-pulso {
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  animation: pulsar 2s infinite;
}

@keyframes pulsar {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

@keyframes deslizarEntrada {
  from { transform: translateX(150%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}


/* Data point modal */
.modal-punto {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-contenido {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
  min-width: 300px;
}

.modal-contenido h3 {
  margin-top: 0;
  color: #333;
}

.modal-contenido button {
  margin-top: 20px;
  padding: 10px 20px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.modal-contenido button:hover {
  background: #1976D2;
}

/* Analytics page */
.analytics-body{background:var(--bg);color:var(--text);font-family:'Montserrat',sans-serif;min-height:100vh;}
.analytics-unit{padding:6px 10px;border:1px solid #d1d5db;border-radius:8px;font-size:0.95rem;margin-left:12px;}
.analytics-btn{padding:10px 14px;border:none;border-radius:8px;background:#4CAF50;color:white;font-weight:700;cursor:pointer;margin-left:8px;}
.analytics-btn.secondary{background:#111;color:#fff;}
.analytics-btn:hover{background:#3d8b3f;}
.analytics-user-email{margin-left:12px;font-weight:700;}
.analytics-row{padding:0;}
.analytics-row .analytics-cell{background:#fff;border-radius:0;padding:12px 12px;border-bottom:none;}
.analytics-row.analytics-stocks,.analytics-row.analytics-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;padding:0;margin:0;}
.analytics-row.analytics-stocks .analytics-cell,.analytics-row.analytics-summary .analytics-cell{border-right:1px solid #e5e7eb;}
.analytics-row.analytics-stocks .analytics-cell:last-child,.analytics-row.analytics-summary .analytics-cell:last-child{border-right:none;}
.analytics-row.analytics-gauges{display:grid;grid-template-columns:1fr 2fr;gap:0;padding:0;margin:0;}
.analytics-row.analytics-gauges .gauge-col-text{background:#fff;color:#000;padding:8px 12px;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;gap:10px;justify-content:space-between;}
.analytics-row.analytics-gauges .gauge-col-total{background:#404041;color:#fff;padding:8px 12px;display:flex;flex-direction:column;gap:8px;}
.analytics-row.analytics-gauges .gauge-col-total .cell-title{color:#fff;}
.gauge-col-text .cell-title{margin-bottom:4px;}
.silo-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:6px;border:1px solid #e5e7eb;border-radius:6px;padding:8px;}
.silo-cell{display:flex;flex-direction:column;justify-content:center;gap:4px;}
.silo-cell.silo-title{
  font-weight:900;
  font-size:2rem;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  padding:6px 12px;
  border-radius:0;
  color:#fff;
  width:100%;
  text-align:left;
  text-transform:uppercase;
}
/* Silo title cell: invert to white text on silo color background */
.silo-grid.silo1 .silo-cell.silo-title{background:#946038;}
.silo-grid.silo2 .silo-cell.silo-title{background:#2196f2;}
.silo-grid.silo1 .silo-cell.silo-title span,
.silo-grid.silo2 .silo-cell.silo-title span{color:#fff!important;}
.metric-label{font-size:0.85rem;color:#555;font-weight:600;}
.silo-grid .metric-label{
  display:inline-block;
  padding:2px 8px;
  border-radius:0;
  letter-spacing:0.3px;
  text-transform:uppercase;
}
/* Labels (Disponible/Stock...): keep pill style but use the dark gray used in backgrounds */
.silo-grid .metric-label{background:#404041;color:#fff;}
.metric-value{font-size:1.2rem;font-weight:800;}
.gauge-container{width:100%;height:190px;margin-top:8px;}
.gauge-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;justify-items:stretch;}
.gauge-title-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;}
.gauge-label{font-weight:700;color:#fff;text-align:center;}
.cell-title{font-weight:800;font-size:1rem;margin-bottom:6px;}
.cell-line{display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:0.95rem;padding:4px 0;}
.cell-value{font-size:1.5rem;font-weight:800;margin:4px 0 6px;}

/* Row 3 (Analytics summary): title bar in gauge green + gray background rows, all caps */
.analytics-row.analytics-summary{
  text-transform:uppercase;
  gap:0;
  padding:0;
}
.analytics-row.analytics-summary .analytics-cell{
  /* Revert to full-width row layout (no extra box padding/gutters) */
  padding:12px 12px;
  background:#fff;
  border-right:1px solid #e5e7eb;
}
.analytics-row.analytics-summary .analytics-cell:last-child{border-right:none;}
.analytics-row.analytics-summary .cell-title{
  margin:0 0 10px;
  padding:10px 12px;
  background:#679903;
  color:#000;
  border-radius:0;
}
.analytics-row.analytics-summary .cell-value{
  padding:0 0 8px;
}
.analytics-row.analytics-summary .cell-line{
  padding:6px 12px;
  margin-top:6px;
  background:#404041;
  color:#fff;
  border-radius:0;
  font-size:0.85rem;
}
.analytics-row.analytics-summary .cell-line:first-of-type{margin-top:0;}
.analytics-row .full{width:100%;background:#404041;color:#fff;border-radius:0;padding:24px 0;}
.analytics-row .full .table-wrapper{background:#404041;}
.events-toolbar{
  width:100%;
  max-width:1400px;
  margin:6px auto 10px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.events-toolbar-left,
.events-toolbar-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.events-toolbar-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.08);
  color:#fff;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
  font-size:0.88rem;
  line-height:1;
  user-select:none;
}
.events-toolbar-btn:hover{background:rgba(255,255,255,0.14);}
.events-toolbar-btn:disabled{opacity:0.45;cursor:not-allowed;}
.events-toolbar-btn.icon-only{padding:8px 10px;min-width:40px;justify-content:center;}
.events-toolbar-icon{font-size:1rem;line-height:1;}
.table-wrapper{overflow:auto;background:#404041;display:flex;justify-content:center;}
.events-table{width:100%;max-width:1400px;border-collapse:collapse;font-size:0.95rem;margin:0 auto;background:#fff;table-layout:fixed;}
.events-table th,.events-table td{padding:10px 12px;border-bottom:1px solid #e5e7eb;text-align:left;font-variant-numeric:tabular-nums;vertical-align:middle;}
.events-table th{background:#679903;color:#000;font-weight:800;text-transform:uppercase;font-size:0.78rem;letter-spacing:0.5px;}
.events-table th:nth-child(2),.events-table td:nth-child(2){text-align:right;}
.events-table th:nth-child(1),.events-table td:nth-child(1){text-align:center;}
.events-table th:nth-child(3),.events-table th:nth-child(4){text-align:center;}
.events-table td:nth-child(3),.events-table td:nth-child(4){text-align:center;}
.events-table th:nth-child(5),.events-table th:nth-child(6),.events-table th:nth-child(7){text-align:center;}
.events-table td:nth-child(5),.events-table td:nth-child(6),.events-table td:nth-child(7){text-align:center;}
.events-table tr:hover{background:#f1f5f9;}
.events-table tr.silo1-row{background:rgba(148,96,56,0.12);color:#000;}
.events-table tr.silo2-row{background:rgba(33,150,242,0.12);color:#000;}
.events-table tr.event-row.silo1-row:hover{background:rgba(148,96,56,0.32);color:#000;}
.events-table tr.event-row.silo2-row:hover{background:rgba(33,150,242,0.32);color:#000;}
.events-table tr.event-type-header{background:var(--event-type-bg,#707070);font-weight:bold;cursor:pointer;color:#000;}
.events-table tr.event-type-header:hover{background:var(--event-type-hover-bg,#606060);color:#fff;}
.events-table tr.event-type-header .collapse-icon{user-select:none;font-size:0.8em;}
.events-table tr.event-type-header td{background:var(--event-type-bg,#707070);color:inherit;}
.events-table tr.event-type-header:hover td{background:var(--event-type-hover-bg,#606060);}
.events-table tr.event-type-header td:nth-child(2){text-align:right;}
.events-table tr.event-type-header td:first-child{box-sizing:border-box;}
.events-table tr.event-type-header td:first-child>div{display:flex;align-items:center;width:100%;gap:8px;}
.events-table tr.event-date-header{background:#707070;font-weight:600;cursor:pointer;}
.events-table tr.event-date-header:hover{background:#606060;}
.events-table tr.event-date-header .collapse-icon{user-select:none;font-size:0.8em;}
.events-table tr.event-date-header td{background:#707070;}
.events-table tr.event-date-header td:nth-child(2){text-align:right;}
.events-table tr.event-date-header td:first-child{box-sizing:border-box;}
.events-table tr.event-date-header td:first-child>div{display:flex;align-items:center;width:100%;gap:8px;}
.events-table tr.event-row{cursor:pointer;}
.events-table tr.event-row:not(.silo1-row):not(.silo2-row):hover{background:rgba(0,0,0,0.05);}
.events-table tr.event-row.selected-event{background:rgba(255,193,7,0.3);border-left:4px solid #ffc107;}
.events-table tr.event-row.selected-event.silo1-row{background:rgba(148,96,56,0.25);border-left-color:#946038;}
.events-table tr.event-row.selected-event.silo2-row{background:rgba(33,150,242,0.25);border-left-color:#2196f2;}
.chart-container{width:100%;height:420px;background:#404041;}

/* Auto-scroll button styles */
.btn-auto-scroll {
  padding: 6px 12px;
  border: 1px solid var(--green);
  background: white;
  color: var(--green);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-auto-scroll:hover {
  background: var(--green);
  color: white;
}

.btn-auto-scroll.active {
  background: var(--green);
  color: white;
}


/* Popup authorization reminder */
.popup-reminder {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.popup-reminder-content {
  background: var(--white);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  margin: 20px;
}

.popup-reminder-text {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 20px;
}

.popup-reminder-arrow {
  font-size: 2rem;
  color: var(--green);
  margin-bottom: 15px;
  animation: bounce 1s infinite;
}

.popup-reminder-hint {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.4;
}

.popup-reminder-close {
  font-size: 0.8rem;
  color: var(--green);
  margin-top: 15px;
  cursor: pointer;
  text-decoration: underline;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Side-by-side layout for rows 3 and 4 on wide monitors */
@media (min-width:1400px){
  .rows-3-4-container{display:grid;grid-template-columns:30% 70%;gap:0;width:100%;align-items:stretch}
  .left-column{display:flex;flex-direction:column;width:100%;margin:0;padding:0;min-height:600px;flex:1 1 auto}
  .left-column .row2-5{margin:0;padding:15px 20px 0px 100px;flex-shrink:0}
  .row3{width:100%;flex:1;min-height:0;align-items:center;margin:0;padding:0;display:flex;gap:15px;justify-content:center}
  .row3 .silo-container{padding:0;margin:0;display:flex;flex:1;max-width:50%;min-width:0}
  .row3 .silo-svg-wrapper{max-width:100%;height:100%;max-height:100%;margin:0;padding:0;display:flex;align-items:center;justify-content:center;width:100%}
  .row3 .silo-svg-wrapper svg{width:80%;height:80%;max-width:100%;max-height:100%;margin:0;padding-bottom:80px;padding-top:40px;object-fit:contain}
  .row4{width:100%;min-height:600px;flex:1 1 auto;margin:0;padding:0}
}

@media (max-width:900px){
  .row1{flex-direction:column;gap:16px;height:auto;padding:20px}
  .row1 .left{width:100%;justify-content:flex-start}
  .row1 .center{width:100%;margin:0 auto;grid-template-columns:auto 1fr;gap:8px 12px;max-width:fit-content}
  .row1 .right{width:100%;justify-content:flex-end}
  .row2-row{grid-template-columns:repeat(2,1fr);gap:16px}
  .row2-label{min-width:110px;font-size:0.9rem}
  .row2-value-field{min-height:32px;padding:6px 10px}
  .row2-value-field span:first-child{font-size:0.9rem}
  .row3{grid-template-columns:1fr;min-height:auto;gap:20px}
  .silo-svg-wrapper{height:auto;max-height:400px;aspect-ratio:0.77}
  .silo-svg-wrapper svg{max-height:400px}
  
}
@media (max-width:600px){
  .row1{padding:16px;gap:12px}
  .row1 #page-logo{height:80px}
  .row1 #logo{height:60px}
  .row1 .client-info{font-size:1rem}
  .row1 .date-label{font-size:1rem}
  .row1 #datePicker{font-size:1rem}
  .row2{padding:16px}
  .row2-row{grid-template-columns:1fr;gap:14px}
  .row2-field{flex-direction:row;align-items:center;gap:4px;justify-content:center}
  .row2-label{min-width:auto;width:auto;font-size:0.855rem}
  .row2-value-field{width:auto;min-height:32px;padding:6px 10px;flex:0 0 auto}
  .row2-value-field span:first-child{font-size:0.855rem}
  .row3{gap:16px}
  .silo-svg-wrapper{max-height:300px;aspect-ratio:0.77}
  .silo-svg-wrapper svg{max-height:300px}
}

/* Footer styles */
.footer-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: center;
  background: white;
  margin-top: 0;
  margin-bottom: 0;
  flex-shrink: 0;
  padding: 10px 16px;
}

.footer-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 160px;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  text-align: right;
}

.footer-nav-button{
  display:inline-block;
  padding:10px 14px;
  background:#4CAF50;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  border-radius:8px;
  font-family:'Montserrat',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.footer-nav-button:hover{background:#3d8b3f;}

.footer-row a {
  display: inline-block;
  text-decoration: none;
}

.footer-logo {
  height: 40px;
  object-fit: contain;
}

.footer-text {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.footer-version {
  margin: 0;
  font-size: 0.7rem;
  color: var(--muted);
  opacity: 0.7;
}

@media (max-width: 900px) {
  .footer-row{
    flex-direction:column;
    justify-content:center;
    padding:10px 12px;
  }
  .footer-left{min-width:auto;}
  .footer-logo {
    height: 20px;
  }
  .footer-text {
    font-size: 0.7rem;
  }
}

/* Authentication Modal Styles */
.auth-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.auth-modal-content {
  background: var(--card);
  border-radius: 12px;
  padding: 32px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.auth-header h2 {
  margin: 0 0 8px 0;
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 600;
}

.auth-header p {
  margin: 0 0 24px 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.auth-providers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}


.auth-provider-btn:hover {
  border-color: var(--green);
  background: #f0f9ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(96, 168, 58, 0.15);
}

.auth-provider-btn:active {
  transform: translateY(0);
}

.auth-icon {
  font-size: 1.2rem;
}

.auth-text {
  font-weight: 500;
  flex: 1;
  text-align: left;
  margin-left: 8px;
}

/* Auth logo styling */
.auth-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Update button layout for logos */
.auth-provider-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 20px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

/* Provider-specific hover colors */
.auth-provider-btn.google:hover {
  border-color: #4285f4;
  box-shadow: 0 2px 8px rgba(66, 133, 244, 0.15);
}

.auth-provider-btn.microsoft:hover {
  border-color: #00a4ef;
  box-shadow: 0 2px 8px rgba(0, 164, 239, 0.15);
}

/* Remove old emoji icon styles when using logos */
.auth-icon {
  display: none;
}

.auth-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

/* Email/Password Form Styles */
.auth-email-form {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.auth-form-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
  text-align: center;
}

.auth-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 12px;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.auth-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(96, 168, 58, 0.1);
}

.auth-input::placeholder {
  color: var(--muted);
}

.auth-submit-btn {
  width: 100%;
  padding: 12px 20px;
  background: var(--green);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.auth-submit-btn:hover {
  background: #4d8a2e;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(96, 168, 58, 0.3);
}

.auth-submit-btn:active {
  transform: translateY(0);
}

.auth-submit-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
}

.auth-error {
  background: #fee2e2;
  color: #dc2626;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 12px;
  text-align: left;
  border: 1px solid #fecaca;
}

@media (max-width: 480px) {
  .auth-modal-content {
    padding: 24px;
    margin: 20px;
  }
  
  .auth-provider-btn {
    padding: 10px 14px;
    font-size: 0.85rem;
  }
  
  .auth-input {
    padding: 10px 14px;
    font-size: 0.85rem;
  }
  
  .auth-submit-btn {
    padding: 10px 14px;
    font-size: 0.85rem;
  }
}

/* PDF Export Styles */
body.pdf-export-mode {
  background: white !important;
}

body.pdf-export-mode .analytics-body {
  background: white !important;
}

body.pdf-export-mode .events-table {
  background: white !important;
  color: black !important;
}

body.pdf-export-mode .chart-image-pdf {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Page break control for events table and sections */
.events-table tr.pdf-page-break {
  page-break-after: always !important;
  break-after: page !important;
}

.events-table tr.pdf-page-break-before {
  page-break-before: always !important;
  break-before: page !important;
}

.analytics-row.pdf-page-break-before {
  page-break-before: always !important;
  break-before: page !important;
}

/* Ensure headers don't break from their content */
.events-table tr.event-type-header {
  page-break-after: avoid !important;
  break-after: avoid !important;
}

.events-table tr.event-date-header {
  page-break-after: avoid !important;
  break-after: avoid !important;
}

/* Keep event rows together when possible */
.events-table tr.event-row {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

/* Keep header sections together on first page */
body.pdf-export-mode .row1,
body.pdf-export-mode .row2,
body.pdf-export-mode .analytics-gauges,
body.pdf-export-mode .analytics-summary {
  page-break-after: avoid !important;
  break-after: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

/* PDF First Page Container - A4 Landscape Aspect Ratio */
.pdf-first-page-container {
  /* A4 Landscape aspect ratio: 297mm / 210mm = 1.414 */
  aspect-ratio: 297 / 210;
  width: 1200px;
  max-width: 1200px;
  background: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.pdf-first-page-container .row1,
.pdf-first-page-container .row2,
.pdf-first-page-container .analytics-gauges,
.pdf-first-page-container .analytics-summary {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Scale content to fit A4 container */
.pdf-first-page-container .row1 {
  padding: 20px 28px;
  height: auto;
  min-height: auto;
}

/* Asegurar que el período sea visible en el PDF */
.pdf-first-page-container .row1 .date-range-button {
  background: white !important;
  color: #000 !important;
  border: 1px solid #ccc !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.pdf-first-page-container .row1 #dateRangeDisplay {
  visibility: visible !important;
  opacity: 1 !important;
  color: #000 !important;
  display: inline-block !important;
}

.pdf-first-page-container .row2 {
  padding: 8px 20px;
}

.pdf-first-page-container .analytics-gauges,
.pdf-first-page-container .analytics-summary {
  padding: 12px 20px;
}

/* Ocultar completamente los gauges en el PDF */
.pdf-first-page-container .gauge-col-total {
  display: none !important;
}

/* Cambiar el layout de analytics-gauges para que solo tenga una columna (sin los gauges) */
.pdf-first-page-container .analytics-gauges {
  display: grid !important;
  grid-template-columns: 1fr !important; /* Solo una columna ya que ocultamos la segunda */
  gap: 0 !important;
  padding: 10px 20px !important;
  align-items: stretch !important;
}

/* Remove most overrides - let normal CSS handle it */
.pdf-first-page-container .analytics-gauges .analytics-cell {
  padding: 0 !important;
  width: 100% !important;
}

/* Cambiar gauge-col-text para que los silos estén lado a lado y las barras debajo */
.pdf-first-page-container .gauge-col-text {
  display: flex !important;
  flex-direction: row !important; /* Fila para silos lado a lado */
  flex-wrap: wrap !important; /* Permitir que las barras vayan a la siguiente línea */
  gap: 12px !important; /* Espacio entre elementos */
  padding: 8px 12px !important;
  width: 100% !important;
}

/* Asegurar que cada silo-grid ocupe ~50% del ancho (menos el gap) */
.pdf-first-page-container .gauge-col-text .silo-grid {
  flex: 1 1 calc(50% - 6px) !important; /* Cada silo ocupa ~50% del ancho */
  min-width: 0 !important; /* Permitir que se reduzcan si es necesario */
}

/* Las barras deben ocupar el 100% del ancho para ir a la siguiente línea */
.pdf-first-page-container .gauge-col-text .total-bars-container {
  flex: 1 1 100% !important; /* Ocupa toda la línea, fuerza nueva línea */
  width: 100% !important;
  margin-top: 0 !important; /* El gap ya maneja el espaciado */
}

/* Barras tipo batería - ocultas por defecto, solo visibles en PDF */
.total-bars-container {
  display: none !important; /* Oculto en la página normal */
}

/* Mostrar las barras solo cuando están dentro del contenedor PDF */
.pdf-first-page-container .total-bars-container {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 12px !important;
}

.pdf-first-page-container .total-bar-wrapper {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pdf-first-page-container .total-bar-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #000;
  text-align: center;
  text-transform: uppercase;
}

.pdf-first-page-container .total-bar {
  position: relative;
  width: 100%;
  height: 24px;
  background-color: #e5e7eb;
  border: 2px solid #404041;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdf-first-page-container .total-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #679903;
  transition: width 0.3s ease;
  z-index: 1;
}

.pdf-first-page-container .total-bar-value {
  position: relative;
  z-index: 2;
  font-size: 0.75rem;
  font-weight: 700;
  color: #000;
  text-align: center;
}

/* Change chart row background and text to white/black for PDF (outside @media print for jsPDF) */
.pdf-first-page-container .analytics-row:has(#weightChart) {
  background: #ffffff !important;
}

.pdf-first-page-container .analytics-row:has(#weightChart) .analytics-cell.full {
  background: #ffffff !important;
  color: #000000 !important;
}

.pdf-first-page-container .analytics-row:has(#weightChart) .cell-title {
  color: #000000 !important;
}

/* Print Styles - Browser Print to PDF */
@media print {
  /* Page setup with margins for headers/footers */
  @page {
    size: A4 landscape;
    margin: 2cm 1cm 2cm 1cm; /* top right bottom left - extra space for header/footer */
  }
  
  /* CRITICAL: Preserve colors in print */
  * {
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  
  /* Print header styling */
  .print-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 1.5cm;
    background: white;
    z-index: 10000;
    border-bottom: 1px solid #c8c8c8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1cm;
    font-size: 9pt;
  }
  
  .print-header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .print-header-title {
    font-weight: bold;
    font-size: 10pt;
  }
  
  .print-header-subtitle {
    font-size: 8pt;
  }
  
  .print-header-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .print-header-client {
    font-weight: bold;
    font-size: 9pt;
  }
  
  .print-header-period {
    font-size: 8pt;
  }
  
  .print-header-right {
    font-size: 8pt;
    text-align: right;
  }
  
  /* Print footer styling */
  .print-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.5cm;
    background: white;
    z-index: 10000;
    border-top: 1px solid #c8c8c8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1cm;
    font-size: 7pt;
    color: #646464;
  }
  
  .print-footer-left,
  .print-footer-right {
    flex: 1;
  }
  
  .print-footer-right {
    text-align: right;
  }
  
  /* Show total bars in print mode */
  .total-bars-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 12px !important;
  }
  
  .total-bar-wrapper {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .total-bar-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #000;
    text-align: center;
    text-transform: uppercase;
  }
  
  .total-bar {
    position: relative;
    width: 100%;
    height: 24px;
    background-color: #e5e7eb;
    border: 2px solid #404041;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .total-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #679903;
    z-index: 1;
  }
  
  .total-bar-value {
    position: relative;
    z-index: 2;
    font-size: 0.75rem;
    font-weight: 700;
    color: #000;
    text-align: center;
  }
  
  /* Hide interactive elements */
  .footer-nav-button,
  .date-range-modal,
  .events-toolbar,
  .floating-summary,
  .header-nav-icon,
  button:not(.date-range-button),
  #analyticsLoading,
  .footer-row {
    display: none !important;
  }
  
  /* Specifically hide PDF export button in PDF */
  .pdf-first-page-container .row1 .date-input-group-inline:has(#headerPdfButton) {
    display: none !important;
  }
  
  /* Make date range button look like static text */
  .date-range-button {
    pointer-events: none !important;
    cursor: default !important;
    background: transparent !important;
    border: none !important;
  }
  
  /* White background for print */
  body,
  body.print-mode {
    background: white !important;
    padding-top: 1.5cm; /* Space for header */
    padding-bottom: 1.5cm; /* Space for footer */
  }
  
  .analytics-body {
    background: white !important;
  }
  
  /* Preserve table colors */
  .events-table {
    background: white !important;
  }
  
  /* Preserve silo row colors */
  .events-table tr.silo1-row {
    background: rgba(148,96,56,0.12) !important;
  }
  
  .events-table tr.silo2-row {
    background: rgba(33,150,242,0.12) !important;
  }
  
  /* Preserve table header green color */
  .events-table th {
    background: #679903 !important;
    color: #000 !important;
  }
  
  /* Preserve silo title colors */
  .silo-grid.silo1 .silo-cell.silo-title {
    background: #946038 !important;
    color: #fff !important;
  }
  
  .silo-grid.silo2 .silo-cell.silo-title {
    background: #2196f2 !important;
    color: #fff !important;
  }
  
  /* Preserve metric label colors */
  .silo-grid .metric-label {
    background: #404041 !important;
    color: #fff !important;
  }
  
  /* Preserve summary section colors */
  .analytics-row.analytics-summary .cell-title {
    background: #679903 !important;
    color: #000 !important;
  }
  
  .analytics-row.analytics-summary .cell-line {
    background: #404041 !important;
    color: #fff !important;
  }
  
  /* Preserve dark backgrounds */
  .row2,
  .row3,
  .row4,
  .analytics-row .full,
  .analytics-row.analytics-gauges .gauge-col-total {
    background: #404041 !important;
    color: #fff !important;
  }
  
  /* Chart image styling */
  .chart-image-pdf {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    page-break-inside: avoid;
  }
  
  /* Page break control */
  .events-table tr.event-row {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  .events-table tr.event-type-header,
  .events-table tr.event-date-header {
    page-break-after: avoid;
    break-after: avoid;
  }
  
  /* Keep sections together */
  .row1,
  .row2,
  .analytics-gauges,
  .analytics-summary {
    page-break-after: avoid;
    break-after: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Chart section */
  .analytics-row:has(#weightChart) {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Ensure proper spacing */
  .analytics-row {
    page-break-inside: avoid;
  }
  
  /* Hide gauge column total in print (if you want to hide it) */
  .gauge-col-total {
    display: none !important;
  }
  
  /* Adjust gauge layout for print */
  .analytics-gauges {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* Change chart row background and text to white/black for PDF (outside @media print for jsPDF) */
.pdf-first-page-container .analytics-row:has(#weightChart) {
  background: #ffffff !important;
}

.pdf-first-page-container .analytics-row:has(#weightChart) .analytics-cell.full {
  background: #ffffff !important;
  color: #000000 !important;
}

.pdf-first-page-container .analytics-row:has(#weightChart) .cell-title {
  color: #000000 !important;
}