[data-dragster-container] {
    min-height: 100%;
}

/* --- Items --- */

.dragster-item {
    position: absolute;
    z-index: 10;
    touch-action: none;
    user-select: none;
    box-sizing: border-box;
    outline: 4px solid transparent;
    outline-offset: 3px;
    transition: outline-color 150ms ease, outline-width 150ms ease;
}

.dragster-item img,
.dragster-item svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.dragster-item [contenteditable='true'] {
    cursor: text;
    min-height: 1em;
    outline: none;
    user-select: text;
}

/* Text sizing + spacing must stay in sync with .calendar__page-element-text in print-calendar.css (the PDF path). */
.dragster-text,
.dragster-text * {
    font-family: var(--calendar-font-family, 'Inter', sans-serif) !important;
    letter-spacing: normal !important;
}

.dragster-text {
    min-height: auto;
    height: auto !important; /* text boxes grow with their content; width is the only manual dimension */
    font-size: calc(14px * var(--calendar-page-scale, 1));
    line-height: 1.4;
    padding: 4px 6px;
    text-align: center;
}

.dragster-text font[size='1'] { font-size: calc(10px * var(--calendar-page-scale, 1)); }
.dragster-text font[size='2'] { font-size: calc(13px * var(--calendar-page-scale, 1)); }
.dragster-text font[size='3'] { font-size: calc(16px * var(--calendar-page-scale, 1)); }
.dragster-text font[size='4'] { font-size: calc(18px * var(--calendar-page-scale, 1)); }
.dragster-text font[size='5'] { font-size: calc(24px * var(--calendar-page-scale, 1)); }
.dragster-text font[size='6'] { font-size: calc(32px * var(--calendar-page-scale, 1)); }
.dragster-text font[size='7'] { font-size: calc(48px * var(--calendar-page-scale, 1)); }

[data-dragster-container][data-edit] .dragster-item {
    cursor: move;
}

[data-dragster-container][data-edit] .dragster-item:not(.dragster-selected) {
    outline-color: rgba(59, 130, 246, 0.3);
}

[data-dragster-container][data-edit] .dragster-item:hover:not(.dragster-selected) {
    outline-color: rgba(59, 130, 246, 0.75);
}

.dragster-selected {
    outline: 1px solid #3b82f6;
    outline-offset: 3px;
    z-index: 20;
}

.dragster-dragging {
    opacity: 0.85;
    cursor: grabbing;
}

/* --- Handles overlay --- */

.dragster-handles {
    position: absolute;
    z-index: 30;
    pointer-events: none;
}

.dragster-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border: 2px solid #3b82f6;
    border-radius: 2px;
    pointer-events: auto;
    box-sizing: border-box;
}

.dragster-handle-nw { top: 0; left: 0; cursor: nwse-resize; }
.dragster-handle-n  { top: 0; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.dragster-handle-ne { top: 0; right: 0; cursor: nesw-resize; }
.dragster-handle-e  { top: 50%; right: 0; transform: translateY(-50%); cursor: ew-resize; }
.dragster-handle-se { bottom: 0; right: 0; cursor: nwse-resize; }
.dragster-handle-s  { bottom: 0; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.dragster-handle-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.dragster-handle-w  { top: 50%; left: 0; transform: translateY(-50%); cursor: ew-resize; }

.dragster-handle-rotate {
    top: calc(100% + 14px);
    left: calc(50% + 13px);
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: crosshair;
    border-color: #3b82f6;
}

.dragster-handle-move {
    display: flex;
    top: calc(100% + 14px);
    left: calc(50% - 13px);
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: move;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
}

.dragster-handle-move svg {
    width: 10px;
    height: 10px;
    pointer-events: none;
}

.dragster-handles-text .dragster-handle-nw,
.dragster-handles-text .dragster-handle-n,
.dragster-handles-text .dragster-handle-ne,
.dragster-handles-text .dragster-handle-se,
.dragster-handles-text .dragster-handle-s,
.dragster-handles-text .dragster-handle-sw,
.dragster-handles-image .dragster-handle-n,
.dragster-handles-image .dragster-handle-e,
.dragster-handles-image .dragster-handle-s,
.dragster-handles-image .dragster-handle-w {
    display: none;
}

.dragster-rotation-stem {
    position: absolute;
    top: calc(100% - 6px);
    left: calc(50% + 13px);
    width: 2px;
    height: 29px;
    background: #3b82f6;
    transform: translateX(-50%);
    pointer-events: none;
}