/* storemap-mobile.css
   Optimiert die StoreMap-Komponente für Touch und kleine Bildschirme */

/* ── SVG Store Map ──────────────────────────────────────────────────── */
.storemap-svg {
    border: 1px solid #ccc;
}

.storemap-svg rect[data-type="shelf"],
.storemap-svg--editable rect {
    cursor: pointer;
}

/* Produkt-Namensschild: weißer Umriss für Lesbarkeit über farbigen Flächen.
   pointer-events:none, damit die Beschriftung das Ziehen des Punkts nicht blockt. */
.storemap-product-label {
    fill: #0f172a;
    font-weight: 600;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 3px;
    stroke-linejoin: round;
    pointer-events: none;
}
@media (prefers-color-scheme: dark) {
    .storemap-product-label {
        fill: #e5e7eb;
        stroke: #0f172a;
    }
}

/* Fokus-Sichtbarkeit für per Tastatur erreichbare Karten-Elemente (Pflicht: a11y). */
.storemap-svg [tabindex]:focus-visible {
    outline: 3px solid var(--accent, #0ea5e9);
    outline-offset: 2px;
}

/* Zoom-Leiste über der Karte */
.storemap-zoom {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin: 0 0 8px;
}
.storemap-zoom-btn {
    min-width: 44px;
    padding: 5px 10px;
    border: 1px solid var(--border, #2a3139);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text, #e0e6ed);
    font-size: 0.85rem;
    cursor: pointer;
}

#storemap-container {
    margin: 32px 0;
    min-height: 400px;
    max-width: 100%;
    overflow-x: auto;
    touch-action: pan-x pan-y;
}
#storemap-container svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    min-height: 320px;
    touch-action: none;
    background: var(--bg);
    border-radius: 12px;
}
@media (max-width: 640px) {
    #storemap-container {
        min-height: 220px;
        padding: 0;
    }
    #storemap-container svg {
        min-height: 220px;
        border-radius: 8px;
    }
}

/* === Karte anlegen / No-Map UI === */
.storemap-no-map {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.storemap-no-map-info {
    color: var(--muted, #94a3b8);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}
.storemap-no-map-help {
    color: var(--muted, #94a3b8);
    font-size: 0.86rem;
    margin: 2px 0 0 0;
}
.storemap-error .storemap-no-map-info {
    color: var(--danger, #dc2626);
}
.storemap-create-btn {
    align-self: flex-start;
    padding: 8px 18px;
    background: var(--accent, #0ea5e9);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
}
.storemap-create-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 420px;
}
.storemap-create-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.9rem;
    color: var(--text, #e0e6ed);
}
.storemap-create-form input {
    padding: 7px 10px;
    border: 1px solid var(--border, #2a3139);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text, #e0e6ed);
    font-size: 0.95rem;
}
.storemap-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.storemap-form-actions {
    display: flex;
    gap: 8px;
}
.storemap-save-btn {
    padding: 8px 18px;
    background: var(--accent, #0ea5e9);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
}
.storemap-save-btn:disabled {
    opacity: 0.6;
    cursor: default;
}
.storemap-cancel-btn {
    padding: 8px 14px;
    background: transparent;
    color: var(--muted, #94a3b8);
    border: 1px solid var(--border, #2a3139);
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
}
.storemap-form-error {
    color: var(--danger);
    font-size: 0.875rem;
    margin: 0;
}

/* === Edit-Toolbar === */
.storemap-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 14px 0;
    flex-wrap: wrap;
}
.storemap-type-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.storemap-type-btn {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border, #2a3139);
    background: var(--input-bg);
    color: var(--text, #e0e6ed);
    font-size: 0.84rem;
    cursor: pointer;
}
.storemap-type-btn.is-selected {
    border-color: var(--accent, #0ea5e9);
    background: color-mix(in srgb, var(--accent, #0ea5e9) 18%, transparent);
    color: #fff;
}
.storemap-toolbar-btn {
    padding: 6px 14px;
    background: var(--accent, #0ea5e9);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
}
.storemap-assignment-btn {
    background: transparent;
    color: var(--text, #e0e6ed);
    border: 1px solid var(--border, #2a3139);
}
.storemap-assignment-btn.is-selected {
    border-color: #22c55e;
    color: #22c55e;
}
.storemap-toolbar-hint {
    font-size: 0.82rem;
    color: var(--muted, #94a3b8);
}

/* === Bearbeitungs-Dialog === */
.storemap-dialog {
    background: var(--input-bg);
    border: 1px solid var(--border, #2a3139);
    border-radius: 10px;
    padding: 24px;
    min-width: 320px;
    max-width: 460px;
    width: 90vw;
    color: var(--text, #e0e6ed);
}
.storemap-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
}
.storemap-dialog-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 16px 0;
}
.storemap-dialog-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.storemap-dialog-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.88rem;
    color: var(--text, #e0e6ed);
}
.storemap-dialog-input {
    padding: 7px 10px;
    border: 1px solid var(--border, #2a3139);
    border-radius: 6px;
    background: var(--bg, #0f1419);
    color: var(--text, #e0e6ed);
    font-size: 0.95rem;
}
.storemap-dialog-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.storemap-delete-btn {
    padding: 8px 14px;
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    margin-left: auto;
}
.storemap-dialog-error {
    color: var(--danger);
    font-size: 0.875rem;
    margin: 0;
}
.storemap-shelf-preview {
    position: relative;
    width: 100%;
    height: 44px;
    border: 1px solid var(--border, #2a3139);
    border-radius: 8px;
    background: color-mix(in srgb, #f59e0b 18%, var(--input-bg));
    cursor: pointer;
}
.storemap-shelf-preview-marker {
    position: absolute;
    top: -3px;
    width: 12px;
    height: 50px;
    margin-left: -6px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.7);
}
.storemap-shelf-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.storemap-shelf-grid-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.storemap-shelf-cell {
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--border, #2a3139);
    background: color-mix(in srgb, #f59e0b 22%, var(--input-bg));
    color: var(--text, #e0e6ed);
    font-size: 0.73rem;
    font-weight: 600;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
}
.storemap-shelf-cell.is-selected {
    border-color: #22c55e;
    color: #22c55e;
    box-shadow: inset 0 0 0 1px #22c55e;
}

/* Hover-Effekte nur für echte Zeigegeräte: auf Touch bleibt der
   Hover-Zustand nach dem Tap kleben, bis woanders hingetippt wird. */
@media (hover: hover) and (pointer: fine) {
    .storemap-zoom-btn:hover {
        border-color: var(--accent, #0ea5e9);
    }

    .storemap-create-btn:hover {
        background: var(--accent-hover, #0284c7);
    }
}