/* Admin /admin/putzkraft: Abschnitt "Putzkraefte" (staff.blade.php) und Teilen-Dialog (share.blade.php).
   Grundbausteine fw-staff-* stehen in admin2-aufgaben.css. */

#fw-staff-members { margin-bottom: 1rem; }

.fw-sm-empty {
    display: grid;
    justify-items: start;
    gap: .5rem;
}
.fw-sm-empty p { margin: 0; }

.fw-sm-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fw-sm-row {
    display: grid;
    grid-template-columns: minmax(12rem, 1.2fr) minmax(10rem, 1fr) minmax(13rem, 1.3fr) auto;
    align-items: center;
    gap: .5rem 1rem;
    padding: .75rem 0;
    border-top: 1px solid var(--gray-200, #e5e7eb);
}
.fw-sm-row:first-child { border-top: 0; padding-top: 0; }
.dark .fw-sm-row { border-color: rgb(255 255 255 / .1); }
.fw-sm-row.is-inactive .fw-sm-main,
.fw-sm-row.is-inactive .fw-sm-apts,
.fw-sm-row.is-inactive .fw-sm-meta { opacity: .6; }

.fw-sm-main { min-width: 0; }
.fw-sm-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    font-weight: 600;
    font-size: .95rem;
}
.fw-sm-contact {
    display: flex;
    flex-wrap: wrap;
    gap: .125rem .75rem;
    font-size: .8125rem;
    overflow-wrap: anywhere;
}
.fw-sm-note {
    font-size: .75rem;
    color: var(--gray-500, #6b7280);
    margin-top: .125rem;
    overflow-wrap: anywhere;
}

.fw-sm-apts {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    min-width: 0;
}

.fw-sm-meta {
    display: grid;
    gap: .125rem;
    font-size: .75rem;
    color: var(--gray-500, #6b7280);
}
.fw-sm-warn { color: var(--warning-600, #d97706); font-weight: 600; }

.fw-sm-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
}

.fw-sm-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--gray-200, #e5e7eb);
}
.fw-sm-footer .fw-staff-muted { margin: 0; }
.dark .fw-sm-footer { border-color: rgb(255 255 255 / .1); }

/* Mittlere Breiten: Wohnungen und Status unter den Namen */
@media (max-width: 1100px) {
    .fw-sm-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }
    .fw-sm-main { grid-column: 1; grid-row: 1; }
    .fw-sm-actions { grid-column: 2; grid-row: 1; }
    .fw-sm-apts,
    .fw-sm-meta { grid-column: 1 / -1; }
    .fw-sm-meta { display: flex; flex-wrap: wrap; gap: .125rem .75rem; }
}

/* Teilen-Dialog */
.fw-sm-share { display: grid; gap: .75rem; }
.fw-sm-share-top {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
}
.fw-sm-share-facts {
    flex: 1 1 12rem;
    min-width: 0;
    display: grid;
    gap: .25rem;
    font-size: .875rem;
}
.fw-sm-share-facts .fw-staff-muted { margin: 0; }
.fw-sm-share .fw-staff-qr { width: 132px; height: 132px; }
.fw-sm-share-message { display: grid; gap: .25rem; }
.fw-sm-share-message-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem .75rem;
    font-size: .8125rem;
    font-weight: 600;
}
.fw-sm-share-text {
    width: 100%;
    resize: vertical;
    font: inherit;
    font-size: .8125rem;
    line-height: 1.45;
    padding: .5rem .625rem;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: .5rem;
    background: var(--gray-50, #f9fafb);
    color: inherit;
}
.dark .fw-sm-share-text { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .1); }

/* Schmale Breiten: Knopf "Putzkraft hinzufuegen" unter die Beschreibung statt daneben */
@media (max-width: 640px) {
    #fw-staff-members > .fi-section-header { flex-wrap: wrap; }
    #fw-staff-members > .fi-section-header > .fi-section-header-text-ctn { flex: 1 1 calc(100% - 3rem); }
    #fw-staff-members > .fi-section-header > .fi-section-header-after-ctn { flex: 1 1 100%; }
    #fw-staff-members > .fi-section-header > .fi-section-header-after-ctn .fi-btn { width: 100%; }
    .fw-sm-actions { flex-wrap: wrap; justify-content: flex-start; }
}

/* Fenster "Nachrichten" (Reinigung, Kalender): Verlauf mit der Putzkraft - eigene rechts, ihre links, neue mit Rand */
.fw-cmsg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; max-height: 22rem; overflow-y: auto; }
.fw-cmsg-item { justify-self: start; max-width: 85%; padding: .5rem .75rem; border-radius: .5rem; background: var(--gray-100); }
.fw-cmsg-item.is-own { justify-self: end; background: color-mix(in oklab, var(--primary-500) 12%, transparent); }
.fw-cmsg-item.is-new { box-shadow: inset 0 0 0 2px var(--primary-500); }
.fw-cmsg-item p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: .875rem; line-height: 1.25rem; }
.fw-cmsg-item small { display: block; margin-top: .2rem; font-size: .75rem; color: var(--gray-500); }
.fw-cmsg-note { margin: 0; font-size: .875rem; color: var(--gray-500); }
.fw-cmsg-note.is-error { color: var(--danger-600); }
.dark .fw-cmsg-item { background: rgb(255 255 255 / .06); }