/* Override Bootstrap's default primary button color */
.btn-primary {
  background-color: #007bff !important;
  border-color: #007bff !important;
}

.btn-primary:hover {
  background-color: #0056b3 !important;
  border-color: #004085 !important;
}

/* Change the color of active navigation items */
.nav-link.active {
  color: #007bff !important;
  background-color: rgba(0, 123, 255, 0.1) !important;
}

.nav-link.active:hover {
  color: #0056b3 !important;
  background-color: rgba(0, 123, 255, 0.2) !important;
}

/* Enforce a flexible table layout */
#InvoiceTable,
#companyTable {
  table-layout: auto; /* Change from fixed to auto for flexible columns */
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

/* Make columns take up remaining space dynamically */
#InvoiceTable colgroup col,
#companyTable colgroup col {
  width: auto; /* Allow columns to expand to fill available space */
}

/* Ensure header and data cells wrap text properly */
#InvoiceTable th,
#InvoiceTable td,
#companyTable th,
#companyTable td {
  white-space: normal !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: none;
  border-right: none;
  padding: 8px;
}

/* Responsive adjustment: Make last column flexible */
#InvoiceTable th:last-child,
#InvoiceTable td:last-child {
  width: auto; /* Allows action column to shrink if needed */
}

/* beginning of logo drop zone */
#logoDropZone {
    border: 3px dotted #007bff; /* Dotted border for drag-and-drop area */
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

#logoDropZone img {
    display: block;
    margin: auto;
    max-width: 100px; /* Limit image size */
    max-height: 100px;
}

#logoDropZone.dragging {
    background-color: #f0f8ff;
    border-color: #0056b3;
}
/* end of logo drop zone */