/* Custom styles for the PDF header footer generator */

/* Container styling */
.generator-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Button styling */
.generator-container .btn {
  padding: 0.25rem 0.5rem;
  margin-right: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  height: auto;
}

.generator-container .btn-group {
  margin-bottom: 0;
  margin-left: 10px;
}

body .editor-toolbar select.form-select {
  margin: 0;
}

body .editor-toolbar > * {
  margin-bottom: 0;
}

body .editor-toolbar button > *{
  margin-bottom: 0;
}

/* Specific styling for toggle buttons */
.generator-container .btn-group .btn {
  padding: 0.2rem 0.4rem;
  font-size: 0.8rem;
  align-items: center;
  height: calc(1.5em + 0.5rem + 2px); /* Match input height */
}

/* Style for active toggle button */
.generator-container .btn-check:checked + .btn-outline-primary {
  background-color: #0d6efd;
  color: white;
  border-color: #0d6efd;
}

/* Fix border radius for toggle buttons */
.generator-container .btn-group .btn:last-child {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

/* Ensure radio buttons are completely hidden */
.generator-container .btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

/* Preview container styling */
.preview-container {
  min-height: 100px;
  background-color: #fff;
  border-radius: 0.25rem;
}

/* Column container styling */
.columns-container {
  margin-top: 1rem;
}

/* Column styling */
.column-content {
  margin-bottom: 1rem;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 1rem;
}

/* Column header styling */
.column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

/* Text editor styling */
.text-editor {
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-bottom: 1rem;
}

/* Toolbar styling */
.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  padding: 0.25rem;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  align-items: center;
}

.editor-toolbar button {
  padding: 0.125rem 0.25rem;
  font-size: 0.75rem;
  height: auto;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Content area styling */
.editor-content {
  min-height: 100px;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 0.5rem;
  overflow-y: auto;
  background-color: #fff;
}

/* Image upload styling */
.image-upload {
  margin-top: 1rem;
}

.image-preview {
  max-width: 100%;
  max-height: 200px;
  margin-top: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 0.25rem;
}

/* Code area styling */
.code-area {
  font-family: monospace;
  font-size: 0.875rem;
  white-space: pre-wrap;
  resize: vertical;
}

/* Fix copy buttons positioning */
.position-relative {
  margin-bottom: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .generator-container .row > div {
    margin-bottom: 1.5rem;
  }
}

/* Table styling for columns */
.column-table {
  width: 100%;
  border-collapse: collapse;
  display: flex;
  flex-wrap: wrap;
}

.column-table tr {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.column-table td {
  padding: 0;
  vertical-align: top;
  min-width: 300px;
  flex: 1 1 300px;
  margin-bottom: 15px;
}

/* Ensure proper spacing between elements */
.generator-container .mb-3 {
  margin-bottom: 1rem !important;
}

.generator-container .mt-3 {
  margin-top: 1rem !important;
}

/* Remove dropdown arrow from font-size select */
.editor-toolbar select.form-select {
  background-image: none;
  padding-right: 0.5rem;
  height: auto;
  line-height: 1.2;
  display: flex;
  align-items: center;
}

/* Ensure column buttons are in a single line */
.generator-container .form-group {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}