/* receipt-designer.css - Styles for the receipt WYSIWYG designer */
.rd-wrapper { display: flex; flex-direction: column; height: 100%; font-family: system-ui, sans-serif; }

/* Toolbar */
.rd-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px 4px 0 0; align-items: center; }
.rd-toolbar button { padding: 4px 8px; border: 1px solid #ced4da; border-radius: 3px; background: #fff; cursor: pointer; font-size: 13px; }
.rd-toolbar button:hover { background: #e9ecef; }
.rd-toolbar button.active { background: #0d6efd; color: #fff; border-color: #0d6efd; }
.rd-toolbar select, .rd-toolbar input[type="color"] { padding: 2px 4px; border: 1px solid #ced4da; border-radius: 3px; font-size: 13px; }
.rd-toolbar .rd-sep { width: 1px; height: 24px; background: #ced4da; margin: 0 4px; }
.rd-toolbar-field { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #495057; }
.rd-toolbar-number { width: 64px; padding: 2px 4px; border: 1px solid #ced4da; border-radius: 3px; font-size: 13px; }
.rd-toolbar-check { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #495057; margin-left: 2px; }
.rd-toolbar-check input[type="checkbox"] { margin: 0; }

/* Main layout */
.rd-body { display: flex; flex: 1; min-height: 0; border: 1px solid #dee2e6; border-top: none; }
.rd-canvas-wrap { flex: 1; overflow: auto; background: #e9ecef; padding: 16px; display: flex; justify-content: flex-start; align-items: flex-start; }
/* Canvas is laid out at the printer's native pixel grid (e.g. 640px for 80mm @ 203dpi)
   and visually shrunk via CSS `zoom` set in receipt-designer.js (setCanvasWidth).
   Keep `overflow: visible` so caret movement / over-wide content shows in the wrap's
   scrollbars instead of being silently clipped at the edge. */
.rd-canvas { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); min-height: 400px; outline: none; padding: 8px; font-family: 'Courier New', monospace; font-size: 12px; line-height: 1.4; overflow: visible; margin: 0 auto; }
.rd-sidebar { width: 280px; border-left: 1px solid #dee2e6; display: flex; flex-direction: column; }
.rd-sidebar-tabs { display: flex; border-bottom: 1px solid #dee2e6; }
.rd-sidebar-tabs button { flex: 1; padding: 6px; border: none; background: #f8f9fa; cursor: pointer; font-size: 12px; }
.rd-sidebar-tabs button.active { background: #fff; border-bottom: 2px solid #0d6efd; font-weight: 600; }
.rd-sidebar-panel { flex: 1; overflow: auto; padding: 8px; display: none; }
.rd-sidebar-panel.active { display: block; }

/* Placeholder list */
.rd-ph-list { list-style: none; padding: 0; margin: 0; }
.rd-ph-list li { padding: 4px 8px; cursor: pointer; border-radius: 3px; font-size: 12px; margin-bottom: 2px; }
.rd-ph-list li:hover { background: #e9ecef; }
.rd-ph-list li code { font-weight: 600; color: #0d6efd; }

/* Code editor */
.rd-code-area { width: 100%; min-height: 120px; font-family: 'Courier New', monospace; font-size: 11px; border: 1px solid #ced4da; border-radius: 3px; padding: 4px; resize: vertical; }
.rd-code-label { font-size: 11px; font-weight: 600; margin: 8px 0 2px; }

/* Preview panel */
.rd-preview-wrap { text-align: center; }
.rd-preview-wrap img { max-width: 100%; border: 1px solid #dee2e6; }

/* Receipt line styles (used inside the canvas) */
hr.rd-line { border: none; margin: 8px 0; }
hr.rd-solid { border-top: 1px solid #000; }
hr.rd-dashed { border-top: 1px dashed #000; }
hr.rd-dotted { border-top: 1px dotted #000; }
hr.rd-double { border-top: 3px double #000; }
hr.rd-thick { border-top: 2px solid #000; }

/* Resize handle for images */
.rd-resizable { display: inline-block; position: relative; cursor: default; }
.rd-resizable img, .rd-resizable .rd-barcode-img { display: block; }
.rd-resize-handle { position: absolute; right: -4px; bottom: -4px; width: 10px; height: 10px; background: #0d6efd; border: 1px solid #fff; cursor: nwse-resize; border-radius: 2px; }