:root {
    --label-width: 170mm;
    --label-height: 60mm;
    --label-padding: 5mm;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    background: #e2e8f0;
    margin: 0;
    padding: 20px;
}

/* Toolbar Styling */
.toolbar {
    background: #1e293b;
    color: white;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.tool-group { display: flex; gap: 8px; align-items: center; }
.divider { color: #475569; margin: 0 10px; }
button { cursor: pointer; padding: 6px 12px; border-radius: 4px; border: none; background: #cbd5e1; font-weight: bold; }
button:hover { background: #f8fafc; }
.print-btn { background: #10b981; color: white; }
.print-btn:hover { background: #059669; }
input[type="number"] { width: 60px; padding: 5px; border-radius: 4px; border: 1px solid #ccc; }
input[type="file"] { display: none; }

/* Workspace & Canvas */
.workspace {
    display: flex;
    justify-content: center;
}

#label-canvas {
    width: var(--label-width);
    height: var(--label-height);
    padding: var(--label-padding);
    background: white;
    position: relative;
    box-sizing: border-box;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Prevents text bleeding off the label */
}

/* Draggable Text Elements */
.text-element {
    position: absolute;
    min-width: 50px;
    min-height: 24px;
    border: 2px dashed transparent;
    cursor: grab;
    padding: 2px;
    resize: both; /* Native resizing */
    overflow: hidden;
    white-space: pre-wrap;
    box-sizing: border-box;
    outline: none;
}

.text-element:active { cursor: grabbing; }
.text-element.selected { border-color: #3b82f6; background: rgba(59, 130, 246, 0.05); }

/* --- PRINT RULES FOR CUPS & CITIZEN S-261 --- */
@media print {
    body { background: white; padding: 0; margin: 0; }
    .toolbar { display: none !important; }
    .workspace { justify-content: flex-start; }

    #label-canvas {
        box-shadow: none;
        margin: 0;
        border: none;
    }

    .text-element { border: none !important; background: transparent !important; resize: none !important; }

    /* Forces the browser print dialogue to standardise to the exact label dimensions */
    @page {
        size: 170mm 60mm;
        margin: 0;
    }
}