/* Bywalio Design System — biblioteka komponentów `staff/*` (Faza 1, docs/active/design-system-wdrozenie).
   Zamiennik dla gołego Bootstrapa na ekranach pracownika/właściciela. Wyłącznie tokeny z app.css,
   zero nowych hardkodowanych kolorów. Specyfikacja: docs/Bywalio Design System/design_handoff_bywalio_blazor/components/staff/*.prompt.md */

/* ---------- StaffButton ---------- */
.staff-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: var(--font-ui);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

.staff-button:disabled, .staff-button[aria-disabled="true"] {
    cursor: default;
    opacity: 0.5;
    pointer-events: none;
}

.staff-button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

.staff-button-sm { height: 32px; padding: 0 0.75rem; font-size: 0.85rem; border-radius: 8px; }
.staff-button-md { height: 40px; padding: 0 1.1rem; font-size: 0.95rem; border-radius: 10px; }
.staff-button-lg { height: 48px; padding: 0 1.5rem; font-size: 1rem; border-radius: 12px; }

.staff-button-primary {
    border: 1px solid transparent;
    background-color: var(--action-primary-bg);
    color: var(--action-primary-fg);
}
.staff-button-primary:hover:not(:disabled) { background-color: var(--action-primary-bg-hover); }

.staff-button-secondary {
    border: 1px solid var(--color-burgundy);
    background-color: var(--action-secondary-bg);
    color: var(--action-secondary-fg);
}
.staff-button-secondary:hover:not(:disabled) { background-color: var(--action-secondary-bg-hover); }

.staff-button-success {
    border: 1px solid transparent;
    background-color: var(--color-sage);
    color: var(--color-sage-fg);
}

.staff-button-danger {
    border: 1px solid var(--color-coral-text-safe);
    background-color: transparent;
    color: var(--color-coral-text-safe);
}
.staff-button-danger:hover:not(:disabled) { background-color: var(--color-coral-text-safe); color: var(--color-coral-fg); }

.staff-button-warning {
    border: 1px solid var(--color-amber);
    background-color: transparent;
    color: var(--color-amber-text-safe);
}
.staff-button-warning:hover:not(:disabled) { background-color: var(--color-amber); color: var(--color-amber-fg); }

.staff-button-ghost {
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--text-body);
}
.staff-button-ghost:hover:not(:disabled) { background-color: var(--surface-raised); }

/* ---------- StaffField / StaffInput / StaffSelect / StaffCheck ---------- */
.staff-field {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-family: var(--font-ui);
}

.staff-field-label { font-weight: 600; color: var(--text-body); }
.staff-field-hint { font-size: var(--font-size-small); color: var(--text-muted); }
.staff-field-error { font-size: var(--font-size-small); color: var(--text-danger); }

.staff-input, .staff-select {
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border-control);
    padding: 0 0.75rem;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    color: var(--text-body);
    background-color: var(--surface-card);
    box-sizing: border-box;
    width: 100%;
}

.staff-input:focus-visible, .staff-select:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

.staff-input-wrapper { position: relative; }
.staff-input-icon { position: absolute; left: 12px; top: 12px; color: var(--text-muted); pointer-events: none; }
.staff-input-with-icon { padding-left: 2.1rem; }
.staff-input-with-toggle { padding-right: 2.5rem; }

.staff-input-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.staff-input-toggle:hover { color: var(--text-body); }

.staff-input-toggle-icon-hide { display: none; }
.staff-input-toggle[aria-pressed="true"] .staff-input-toggle-icon-show { display: none; }
.staff-input-toggle[aria-pressed="true"] .staff-input-toggle-icon-hide { display: block; }

.staff-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2rem;
    font-family: var(--font-ui);
}

.staff-check-input {
    width: 20px;
    height: 20px;
    accent-color: var(--color-burgundy);
}

.staff-check-label { color: var(--text-body); }

/* ---------- StaffAlert ---------- */
.staff-alert {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    border-radius: var(--radius-button);
    padding: 0.85rem 1rem;
    font-family: var(--font-ui);
    background-color: var(--surface-card);
    border: 1px solid;
}

.staff-alert-icon { margin-top: 2px; flex-shrink: 0; }
.staff-alert-content { color: var(--text-body); }

.staff-alert-success { border-color: var(--text-success); color: var(--text-success); }
.staff-alert-danger { border-color: var(--text-danger); color: var(--text-danger); }
.staff-alert-warning { border-color: var(--text-warning); color: var(--text-warning); }
.staff-alert-info { border-color: var(--text-info); color: var(--text-info); }

.staff-alert-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    display: flex;
    flex-shrink: 0;
    padding: 0;
    margin-top: 2px;
}

.staff-alert-dismiss-labeled {
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    margin-top: 0;
    padding: 0.25rem 0.5rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-button);
    font: inherit;
    font-size: 0.85rem;
    line-height: 1.2;
    white-space: nowrap;
}
.staff-alert-dismiss:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* ---------- StaffBadge ---------- */
.staff-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-ui);
}

/* Tło odznaki neutralnej to --surface-raised, czyli ten sam odcień co tło strony i nieparzystych
   (przezroczystych) wierszy tabeli — pigułka zlewała się z podłożem i zostawało samo słowo, podczas
   gdy jej odpowiednik "aktywny" jest wyraźną zieloną odznaką. Hairline daje krawędź niezależną od
   tego, na czym odznaka stoi, w obu motywach. inset box-shadow zamiast border, żeby nie zmieniać
   wysokości ani paddingu wspólnych dla wszystkich wariantów .staff-badge. */
.staff-badge-neutral {
    background-color: var(--surface-raised);
    color: var(--text-body);
    box-shadow: inset 0 0 0 1px var(--border-hairline);
}
.staff-badge-success { background-color: var(--color-sage); color: var(--color-sage-fg); }
.staff-badge-danger { background-color: var(--color-coral-text-safe); color: var(--color-coral-fg); }

/* ---------- StaffTable — gęstość "komfortowa", nie zagęszczać poniżej tego paddingu ---------- */

/* Szeroka tabela przewija się we własnym kontenerze. Bez tego rozpycha <main> i przewija cały
   dokument — na wąskim ekranie nagłówek i tło strony jadą w bok razem z treścią. */
.staff-table-scroll {
    overflow-x: auto;
}

.staff-table-scroll:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

.staff-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    color: var(--text-body);
}

.staff-table th {
    padding: 0.65rem 0.85rem;
    text-align: left;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 2px solid var(--border-hairline);
}

.staff-table td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border-hairline);
    vertical-align: middle;
}

.staff-table tbody tr:nth-child(even) { background-color: var(--neutral-50); }

.staff-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.staff-page-header h1 { margin: 0; }

.staff-table-actions, .staff-dialog-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.staff-dialog {
    width: min(100% - 2rem, 560px);
    margin: 2rem auto auto;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-modal);
    background-color: var(--surface-card);
    color: var(--text-body);
    box-shadow: var(--shadow-modal);
}

.staff-dialog::backdrop { background-color: var(--scrim-modal); }

.staff-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.staff-dialog-header h2 { margin: 0; font-size: 1.25rem; }

.staff-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-button);
    background: transparent;
    color: var(--text-body);
    font-size: 1.5rem;
    cursor: pointer;
}

.staff-dialog-close:hover { background-color: var(--surface-raised); }
.staff-dialog-close:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }

.staff-dialog-actions { margin-top: 1.25rem; }
/* Tekst wprowadzający/wyjaśniający wewnątrz dialogu (np. krok potwierdzenia zmiany lokalizacji
   pracownika, Owner/Employees.razor) — współdzielony, żeby nie duplikować w każdym .razor.css. */
.staff-dialog-copy { margin: 0 0 1rem; color: var(--text-body); }

/* Link powrotu na stronach szczegółów Operatora (TenantDetails.razor, ProgramDetails.razor) —
   review 27.08.2026 (pilotaż MT-01, testy na żywo): był to goły <a> bez klasy, więc renderował
   się z domyślnym stylem przeglądarki (niebieski, podkreślony), niespójnym z resztą designu.
   Współdzielony tu (nie osobny .razor.css per strona), bo dwie strony Operatora używają
   identycznego wzorca "← wróć". */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1rem;
    color: var(--color-muted);
    text-decoration: none;
    font-family: var(--font-ui);
    font-weight: 600;
}
.back-link:hover { color: var(--color-burgundy); }
.back-link:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}
.staff-qr-dialog-image { display: block; width: min(100%, 320px); margin: 1.25rem auto; border-radius: var(--radius-button); }

@media (max-width: 640px) {
    .staff-page-header { align-items: flex-start; flex-direction: column; }
    .staff-dialog { margin-top: 1rem; }
}

/* ---------- StaffListGroup ---------- */
.staff-list-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.staff-list-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: var(--surface-card);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-button);
    font-family: var(--font-ui);
    color: var(--text-body);
    /* Bez zawijania wiersz akcji (na /owner/programs trzy przyciski, 349 px) nie mieścił się obok
       treści i rozpychał stronę: 27 px poza ekran przy 375 i 82 px przy 320. Zawinięcie przenosi
       akcje pod treść, zamiast wypychać je poza widok. */
    flex-wrap: wrap;
}

.staff-list-group-item-content { flex: 1; min-width: 0; }

/* flex-shrink: 0 zostaje — akcje nie mają być ściskane przez długą nazwę na szerokim ekranie.
   max-width ogranicza je do szerokości wiersza, a własne zawijanie łamie przyciski na kolejne
   linie, zamiast pozwolić im wyjechać poza kartę. */
.staff-list-group-item-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    max-width: 100%;
}

/* ---------- StaffPagination — dodatek DS-a; poprzednia/następna, bez numerowanych stron ---------- */
.staff-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.staff-pagination-controls { display: flex; gap: 0.35rem; }

.staff-pagination-button {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-hairline);
    background: var(--surface-card);
    color: var(--text-body);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.staff-pagination-button:disabled { cursor: default; opacity: 0.4; }
.staff-pagination-button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* ---------- Skeleton — dodatek DS-a. Puls zdefiniowany w app.css (@keyframes bw-skeleton-pulse) ---------- */
.staff-skeleton {
    display: block;
    background-color: var(--border-hairline);
    animation: bw-skeleton-pulse 1.4s ease-in-out infinite;
}

.staff-skeleton-row { display: flex; gap: 1rem; padding: 0.65rem 0.85rem; }
.staff-skeleton-table > .staff-skeleton-row + .staff-skeleton-row { border-top: 1px solid var(--border-hairline); }

/* ---------- ToastStack — dodatek DS-a. TYLKO krótkie potwierdzenia akcji, nie błędy formularza ---------- */
.staff-toast-stack {
    position: fixed;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1000;
}

.staff-toast {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-button);
    background-color: var(--surface-card);
    border: 1px solid;
    color: var(--text-body);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 240px;
}

.staff-toast-success { border-color: var(--text-success); }
.staff-toast-danger { border-color: var(--text-danger); }
.staff-toast-info { border-color: var(--text-info); }
.staff-toast-icon { flex-shrink: 0; }
.staff-toast-message { flex: 1; }

.staff-toast-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    padding: 0;
}
.staff-toast-dismiss:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* ---------- ThemeToggle — dodatek DS-a, net-new (produkt dziś nie ma dark mode) ---------- */
.staff-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border-hairline);
    background-color: var(--surface-card);
    color: var(--text-body);
    cursor: pointer;
}
.staff-theme-toggle:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* ---------- NoAccessScreen — dodatek DS-a, zastępuje ciche przekierowanie na /login ---------- */
.staff-no-access {
    max-width: 420px;
    margin: 15vh auto 0;
    text-align: center;
    font-family: var(--font-ui);
    padding: 0 1rem;
}

.staff-no-access-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--surface-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: var(--text-danger);
}

.staff-no-access-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--text-body);
}

.staff-no-access-text {
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}