/* Styles für den Rechnungsgenerator (Canvas-Template-Editor).
   Angelehnt an das votianlt-Theme, reduziert auf Lumo-Variablen. */

.invoice-generator-view {
  gap: var(--lumo-space-m);
}

.invoice-generator-main {
  gap: var(--lumo-space-m);
}

.invoice-generator-panel {
  border: 1px solid var(--lumo-contrast-20pct);
  border-radius: var(--lumo-border-radius-l);
  background: var(--lumo-base-color);
  box-shadow: var(--lumo-box-shadow-xs);
  box-sizing: border-box;
}

.invoice-generator-panel-title {
  color: var(--lumo-header-text-color);
  font-size: var(--lumo-font-size-m);
  font-weight: 700;
}

.invoice-generator-info {
  color: var(--lumo-secondary-text-color);
  font-size: var(--lumo-font-size-s);
}

.invoice-generator-template {
  display: flex;
  align-items: center;
  gap: var(--lumo-space-s);
  margin: var(--lumo-space-xs) 0;
  padding: var(--lumo-space-s) var(--lumo-space-m);
  border: 1px solid var(--lumo-contrast-20pct);
  border-radius: var(--lumo-border-radius-m);
  background: var(--lumo-contrast-5pct);
  cursor: grab;
  user-select: none;
  font-size: var(--lumo-font-size-s);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.invoice-generator-template:hover {
  box-shadow: var(--lumo-box-shadow-xs);
  border-color: var(--lumo-primary-color-50pct);
}

.invoice-generator-canvas {
  position: relative;
  overflow: hidden;
  cursor: default;
  border: 2px dashed var(--lumo-contrast-30pct);
  border-radius: var(--lumo-border-radius-l);
  background: var(--lumo-base-color);
}

.invoice-generator-actionbar {
  width: 100%;
  padding: var(--lumo-space-s) var(--lumo-space-m);
  border: 1px solid var(--lumo-contrast-20pct);
  border-radius: var(--lumo-border-radius-l);
  background: var(--lumo-base-color);
  box-sizing: border-box;
}

.invoice-generator-pdf {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.invoice-generator-frame {
  border: none;
}
