/* =========================
   WRAPPER
========================= */
.evp-wrapper {
  border: 1px solid #ddd;
  padding: 12px;
  background: #fff;
  border-radius: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

/* =========================
   TOOLBAR
========================= */
.evp-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}

.evp-open-fullscreen {
  border: 1px solid #222;
  background: #222;
  color: #fff;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 12px;
}

/* =========================
   SHEET TABS
========================= */
.evp-sheet-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.evp-tab-button {
  border: 1px solid #ccc;
  background: #f3f3f3;
  padding: 2px 8px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.1;
  min-height: 22px;
}

.evp-tab-button:hover {
  background: #e9e9e9;
}

.evp-tab-button.active {
  background: #fff;
  border-bottom: 2px solid #2563eb;
  color: #000;
  font-weight: 600;
}

/* =========================
   FORMULA BAR
========================= */
.evp-top-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 4px 8px;
  background: #fafafa;
  margin-bottom: 8px;
  font-size: 12px;
}

.evp-top-panel h3 {
  font-size: 12px;
  margin: 0;
  font-weight: 600;
  color: #666;
  white-space: nowrap;
}

.evp-top-panel span {
  font-weight: 600;
  min-width: 45px;
}

.evp-top-panel pre {
  flex: 1;
  margin: 0;
  padding: 3px 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  max-height: 24px;
  min-height: 24px;
  font-size: 11px;
  line-height: 16px;
}

/* =========================
   GRID
========================= */
.evp-content {
  display: block;
}

.evp-grid-container {
  overflow: auto;
  max-height: 600px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  /* Containment: tells the browser that layout, style, and paint
     inside this element are independent of the rest of the page.
     This means PDF embed reflows (iframe resize, pdf.js canvas
     repaints) cannot cascade into the Excel grid, and vice versa.
     'content' = layout + style + paint containment combined.
     'size' is intentionally omitted so the container can still
     grow to fit the table. */
  contain: content;
}

/* =========================
   TABLE / CELLS
========================= */
.evp-table {
  border-collapse: collapse;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  background: #fff;
}

.evp-table td:hover {
  background: #f5f9ff;
}

.evp-table td.active {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
  background: #eef5ff;
}

/* =========================
   FULLSCREEN
========================= */
.evp-is-fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
}

.evp-is-fullscreen .evp-content {
  height: calc(100vh - 110px);
}

.evp-is-fullscreen .evp-grid-container {
  height: 100%;
  max-height: 100%;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 900px) {
  .evp-top-panel {
    flex-wrap: wrap;
  }

  .evp-top-panel pre {
    width: 100%;
  }

  .evp-is-fullscreen {
    padding: 8px;
  }

  .evp-is-fullscreen .evp-content {
    height: calc(100vh - 130px);
  }
}

/* =========================
   DRAWING OVERLAY (added)
========================= */
.evp-table-wrap {
  position: relative;
  width: max-content;
  min-width: 100%;
}

.evp-drawing-overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10;
}

/* Fix cell sizing - use exact widths from data */
.evp-table td {
  border: 1px solid #e1e1e1;
  padding: 2px 3px;
  margin: 0;
  cursor: pointer;
  box-sizing: border-box;
  font-size: 11px;
  font-family: Calibri, Arial, Helvetica, sans-serif;
  overflow: visible;     /* allow text to spill into adjacent empty cells, like Excel */
  white-space: nowrap;   /* keep text on one line, no wrapping */
  word-break: normal;    /* no forced mid-word breaks */
  vertical-align: middle;
}

/* =========================
   COLUMN / ROW HEADERS
========================= */
.evp-header {
  background: #f0f0f0;
  border: 1px solid #ccc;
  font-size: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  color: #555;
  text-align: center;
  vertical-align: middle;
  padding: 2px 3px;
  box-sizing: border-box;
  cursor: default;
  user-select: none;
  white-space: nowrap;
  position: sticky;
}

.evp-col-header {
  top: 0;
  z-index: 3;
}

.evp-row-num {
  left: 0;
  z-index: 2;
  min-width: 32px;
  width: 32px;
  max-width: 32px;
  font-weight: 400;
  color: #666;
}

.evp-row-num-header {
  top: 0;
  left: 0;
  z-index: 4;
  min-width: 32px;
  width: 32px;
  max-width: 32px;
}

/* =========================
   FORMULA DEPENDENCY HIGHLIGHT
========================= */
.evp-table td.evp-dep {
  background: #fffde7 !important;
  outline: 1px dashed #f9a825;
  outline-offset: -1px;
}