body { font-family: Arial, sans-serif; margin: 20px; background-color: rgb(67, 149, 221); }
.container { display: flex; }
.panel { width: 50%; padding: 10px; }
iframe { width: 100%; height: 600px; border: 1px solid #ccc; background: #fff; overflow-y: auto; }
#editor { width: 100%; height: 600px; border: 1px solid #ccc; }
.CodeMirror { height: 600px; }

/* Company Picker */
#companyPicker { margin-bottom: 20px; }
#companyPicker input { padding: 8px; width: 300px; font-size: 1em; }

/* Simple Menu */
nav { margin-bottom: 20px; background: #78acd9; padding: 10px; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
nav ul li a { text-decoration: none; color: #000; }
nav ul li a:hover { text-decoration: underline; }

/* Button Group */
.button-group {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 40px;
  gap: 5px;
  margin-top: 10px;
}
.button-group > * {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  padding: 5px;
}

/* File Input */
.file-input-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
  flex: 1 1 calc(50% - 10px);
}
.file-input-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
.file-input-wrapper button {
  width: 100%;
  background: #007bff;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
}

/* Modal common styling */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 80%;
  background: white;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.3);
  border-radius: 8px;
  overflow: hidden;
}
.modal-header {
  position: sticky;
  top: 0;
  background: #969a96;
  padding: 10px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}
.modal-header button {
  background: red;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 4px;
}
.modal-content {
  padding: 15px;
  overflow-y: auto;
  height: calc(100% - 50px);
}

#pdfModal {
  overflow: auto;
}


/* Placeholder menu item hover */
.placeholder-item:hover { background-color: #e0e0e0; }

#previewFrame {
  display: block;
  width: 100%;
  height: 600px;
  border: 1px solid #ccc;
  background: #fff;
  overflow: auto;
}

/* Help table styling */
.help-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.help-table th,
.help-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
  width: 50%;
}
.help-table tbody tr:hover {
  background-color: #f0f0f0;
}

    /* Invoice selection modal */
    /* invoice‐modal tweaks */
    #invoiceSelectionModal { display:none; /* etc */ }
    .invoice-item { position: relative; width:150px; text-align:center; }
    .invoice-item iframe { pointer-events:none; width:150px; height:100px; border:1px solid #ccc; border-radius:4px; }
    .invoice-item div.label { margin-top:4px; font-size:12px; word-break:break-all; }

    #invoiceSelectionContent {
      background: #fff;
      margin: 5% auto;
      padding: 20px;
      border-radius: 8px;
      width: 80%;
      max-width: 1000px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
    .invoice-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: flex-start;
    }
    .invoice-item {
      cursor: pointer;
      text-align: center;
      width: 150px;
    }
    .invoice-item iframe {
      width: 150px;
      height: 100px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .invoice-item div {
      margin-top: 4px;
      font-size: 12px;
      word-break: break-all;
    }
    .modal-close-btn {
      float: right;
      font-size: 16px;
      background: none;
      border: none;
      cursor: pointer;
    }

    .invoice-item {
  position: relative;   /* so that clicks on the item bubble correctly */
}
.invoice-item iframe {
  pointer-events: none; /* iframe becomes “invisible” to the pointer */
}