[x-cloak] { display: none !important; }

.ssb-bar {
    position: fixed;
    left: var(--ssb-left, 0px);
    right: var(--ssb-right, 0px);
    z-index: 60;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    opacity: 0;
}
.ssb-bar--bottom {
    bottom: 0;
    transform: translateY(0.5rem);
}
.ssb-bar--top {
    top: var(--ssb-top, 0px);
    transform: translateY(-0.5rem);
}
.ssb-bar--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.ssb-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 1.5rem;
    background: white;
    box-shadow: 0 -2px 8px 0 rgb(0 0 0 / 0.07), 0 -1px 0 0 rgb(0 0 0 / 0.04);
}
.ssb-bar--top .ssb-bar__inner {
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 0.07), 0 1px 0 0 rgb(0 0 0 / 0.04);
}
.dark .ssb-bar__inner {
    background: rgb(17 24 39);
    box-shadow: 0 -2px 8px 0 rgb(0 0 0 / 0.35), 0 -1px 0 0 rgb(255 255 255 / 0.04);
}
.ssb-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(107 114 128);
    white-space: nowrap;
}
.dark .ssb-label {
    color: rgb(156 163 175);
}
.ssb-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
/* Werte 1:1 vom Filament-Standard-Button (.fi-btn, Size md): rounded-lg, px-3 py-2,
   text-sm, font-medium, gap-1.5, transition duration-75 — damit der Bar-Button optisch
   exakt dem Formular-Speichern-Button entspricht. */
.ssb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    transition: background-color 75ms, color 75ms;
    cursor: pointer;
    border: none;
    outline: none;
    white-space: nowrap;
    font-family: inherit;
}
.ssb-btn:focus-visible {
    outline: 2px solid;
    outline-offset: 2px;
}
.ssb-btn--primary {
    /* Filaments Solid-Color-Button: Hintergrund = Shade 500 (--bg), Hover = 600
       (--hover-bg), Text weiß, kein Schatten. Exakt der Formular-Speichern-Button. */
    background-color: var(--primary-500);
    color: white;
}
.ssb-btn--primary:hover:not(:disabled) {
    background-color: var(--primary-600);
}
.ssb-btn--primary:focus-visible {
    outline-color: var(--primary-500);
}
.ssb-btn--gray {
    background-color: transparent;
    color: rgb(55 65 81);
    box-shadow: inset 0 0 0 1px rgb(209 213 219);
}
.ssb-btn--gray:hover:not(:disabled) {
    background-color: rgb(249 250 251);
}
.ssb-btn--gray:focus-visible {
    outline-color: rgb(107 114 128);
}
.dark .ssb-btn--gray {
    color: rgb(209 213 219);
    box-shadow: inset 0 0 0 1px rgb(75 85 99);
}
.dark .ssb-btn--gray:hover:not(:disabled) {
    background-color: rgb(31 41 55);
}

/* Lade-/Disabled-Status wie Filament (.fi-btn[disabled]): leicht abgedunkelt + kein
   Pointer; der Spinner signalisiert „läuft". Doppel-Submit ist über :disabled blockiert. */
.ssb-btn:disabled {
    cursor: default;
    opacity: 0.7;
}
.ssb-spinner {
    /* size-5 wie Filaments Button-Loading-Indicator (fi-size-md); Abstand zum Label
       über den Button-gap (0.375rem), nicht über Margins. */
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    /* identisch zu Filaments .fi-loading-indicator (Tailwind animate-spin) */
    animation: ssb-spin 1s linear infinite;
}
@keyframes ssb-spin {
    to {
        transform: rotate(360deg);
    }
}