/* JoomION Badge – Frontend- und Vorschau-Styles.
   Farben/Größen/Positionen werden je Badge per Inline-Style gesetzt;
   diese Datei liefert nur die Geometrie (Formen, Layout, Textanordnung).

   Zwei Render-Wege je nach Form:
   - "CSS-Formen" (Kreis, Quadrat, Sprechblase ...): ein einzelnes Element
     mit border-radius + nativer CSS-border-Eigenschaft. border-style
     (durchgehend/gepunktet/gestrichelt) funktioniert hier einwandfrei, da
     border-radius den Rahmen nicht abschneidet.
   - "SVG-Formen" (Hexagon, Stern, Dreieck, Pfeil ...): ein <svg><polygon>
     mit echtem stroke + stroke-dasharray. Ein normaler CSS-"border" auf
     einer clip-path-Form würde nur entlang der ursprünglichen rechteckigen
     Kanten sichtbar sein und an schrägen Linien verschwinden – ein echter
     SVG-Strich folgt dagegen exakt jeder Kante, inklusive gepunktet/
     gestrichelt. vector-effect="non-scaling-stroke" verhindert, dass die
     Linie bei unterschiedlicher Breite/Höhe des Badges verzerrt (elliptisch
     statt gleichmäßig) gezeichnet wird. */

/* Position und --jib-scale (Größe in %) kommen je Badge aus einem
   eigenen <style>-Block mit vier Regeln (PC/Notebook/Tablet/Smartphone,
   siehe Joomionbadge::deviceLevelRule()) – dieser Grundstil hier liefert
   nur einen sicheren Fallback, falls dieser Block aus irgendeinem Grund
   fehlt (z. B. veraltetes gecachtes Markup). */
.jib-badge {
    position: fixed;
    z-index: 2147483000;
    display: inline-flex;
    text-decoration: none !important;
    line-height: 1;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    --jib-scale: 1;
    bottom: 20px;
    right: 20px;
}

.jib-badge:hover {
    filter: brightness(1.07);
}

/* Verschiebbare Badges (siehe media/js/badge-drag.js): touch-action:none
   verhindert, dass ein Ziehversuch auf dem Touchscreen stattdessen die
   Seite scrollt; user-select:none verhindert versehentliches Markieren
   von Text/Icon während des Ziehens; -webkit-user-drag:none verhindert
   (zusätzlich zum draggable="false"-Attribut in der PHP-Ausgabe), dass
   Chrome/Safari bei gedrückter Maustaste auf einem <a>-Badge das eigene
   native "Link ziehen" startet, statt unser pointermove greifen zu lassen. */
.jib-draggable {
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.jib-draggable.jib-dragging {
    cursor: grabbing;
    filter: brightness(1.07);
}

/* Kein Hintergrund gewählt: schlichter Flex-Container ohne Form/Rahmen. */
.jib-badge-plain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(8px * var(--jib-scale, 1));
}

/* --- CSS-Formen: ein einzelnes Element ----------------------------- */
.jib-badge-bg {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(8px * var(--jib-scale, 1));
    box-sizing: border-box;
    padding: calc(10px * var(--jib-scale, 1)) calc(16px * var(--jib-scale, 1));
}

.jib-shape-circle { border-radius: 50%; }
.jib-shape-square { border-radius: 0; }
.jib-shape-rounded-square { border-radius: 20%; }
.jib-shape-rectangle { border-radius: 10%; }
.jib-shape-oval { border-radius: 50%; }
.jib-shape-speech-bubble { border-radius: 16%; }
.jib-shape-speech-bubble-round { border-radius: 50%; }
.jib-shape-leaf { border-radius: 0% 60% 0% 60%; }
.jib-shape-drop { border-radius: 50% 50% 50% 0%; }

/* Sprechblasen-Schwänzchen (nur bei den beiden Sprechblasen-Formen). */
.jib-shape-speech-bubble::after,
.jib-shape-speech-bubble-round::after {
    content: "";
    position: absolute;
    left: calc(22px * var(--jib-scale, 1));
    bottom: calc(-9px * var(--jib-scale, 1));
    width: 0;
    height: 0;
    border: calc(9px * var(--jib-scale, 1)) solid transparent;
    border-top-color: var(--jib-tail, transparent);
    border-bottom: 0;
}
.jib-shape-speech-bubble-round::after {
    left: 50%;
    transform: translateX(-50%);
}

.jib-badge-shadow {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
}

/* --- SVG-Formen: schwebende Hülle + absolut positioniertes SVG ----- */
.jib-badge-shapewrap {
    position: relative;
    display: inline-block;
}

.jib-badge-shape-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.jib-badge-shape-svg.jib-badge-shadow-svg {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}

/* .jib-badge-fill is ALWAYS sized to exactly fill its wrapper (inset:0,
   matching the SVG's own sizing) rather than relying on flex shrink-to-fit/
   stretch – that used to make its actual size depend on the flex alignment
   of its own PARENT, which silently changed how big an "icon as background"
   (itself width/height:100% of .jib-badge-fill) ended up: with the parent's
   align-items:stretch it happened to fill the whole wrapper; centering the
   parent instead (fixing off-centre icons/text) shrank the fill box down to
   its own content size instead, breaking "icon as background" content that
   has little content beside the icon. Explicit inset:0 sidesteps the issue
   entirely – .jib-badge-fill's box is always the full badge, in both modes. */
.jib-badge-shapewrap > .jib-badge-fill {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(8px * var(--jib-scale, 1));
    box-sizing: border-box;
    padding: calc(10px * var(--jib-scale, 1)) calc(16px * var(--jib-scale, 1));
}

/* Icon/Text (gemeinsam für alle Varianten) */
.jib-badge-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.jib-badge-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.jib-badge-text {
    white-space: nowrap;
    font-family: inherit;
    text-align: center;
}

/* Icon+Text Anordnung */
.jib-textpos-right   { flex-direction: row; }
.jib-textpos-left    { flex-direction: row-reverse; }
.jib-textpos-bottom  { flex-direction: column; }
.jib-textpos-top      { flex-direction: column-reverse; }

/* Icon as background, text centred on top of it. Works on any container
   (.jib-badge-bg is already position:relative and .jib-badge-fill is
   already position:absolute; only .jib-badge-plain needs a positioning
   context added explicitly here). The icon itself is position:absolute
   (see inline style), so it is removed from the flex flow and does not
   affect how the text is centred. */
.jib-textpos-overlay {
    position: relative;
}

/* ---------------------------------------------------------------- *
 * Admin-Vorschau (Form-Auswahlraster) – CSS-Formen ohne Inhalt.
 * Die 16 SVG-Formen werden im Auswahlraster direkt als <svg> gerendert
 * (siehe ShapeField), brauchen also keine eigene CSS-Klasse hier.
 * ---------------------------------------------------------------- */
.jib-shape-preview {
    background: #5b7ea3;
    --jib-tail: #5b7ea3;
}