/* /Components/GlobalBottomSheet.razor.rz.scp.css */
/* --- Overlay (Tło) --- */
.sheet-overlay[b-ls418zwtpt] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Ciemniejsze, bardziej eleganckie przyciemnienie */
    background-color: rgba(25, 28, 31, 0.4);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Mocniejszy efekt szkła (Frosty look) */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.sheet-overlay.visible[b-ls418zwtpt] {
    opacity: 1;
    pointer-events: auto;
}

/* --- Panel (Drawer) --- */
.bottom-sheet[b-ls418zwtpt] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    z-index: 2001;
    /* Bardziej agresywne zaokrąglenie (Styl iOS/Revolut) */
    border-radius: 32px 32px 0 0;
    /* Miękki, głęboki cień zamiast ostrego */
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.08);

    transform: translateY(110%); /* Ukrywamy całkowicie */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Bardzo płynna sprężystość */

    display: flex;
    flex-direction: column;
    /* Maksymalna wysokość nieco mniejsza, żeby widać było tło */
    max-height: 90vh;
}

.bottom-sheet.open[b-ls418zwtpt] {
    transform: translateY(0);
}

/* --- Desktop & Tablet Tweaks (Floating Card) --- */
/* Na większych ekranach panel zamienia się w "lewitującą wyspę" */
@media (min-width: 768px) {
    .bottom-sheet[b-ls418zwtpt] {
        max-width: 540px; /* Węższy, bardziej kompaktowy */
        left: 50%;
        bottom: 24px; /* Odrywamy go od dołu ekranu! */
        border-radius: 32px; /* Zaokrąglamy też dół */

        /* Centrowanie przy wysuwaniu */
        transform: translate(-50%, 110%);
    }
    .bottom-sheet.open[b-ls418zwtpt] {
        transform: translate(-50%, 0);
    }
}

/* --- Uchwyt (Handle) --- */
.sheet-handle-area[b-ls418zwtpt] {
    padding: 16px 0 8px 0; /* Więcej miejsca na palec */
    display: flex;
    justify-content: center;
    cursor: grab;
    flex-shrink: 0; /* Nie zgniataj tego obszaru */
}

.sheet-handle[b-ls418zwtpt] {
    width: 48px; /* Szerszy */
    height: 5px; /* Nieco grubszy */
    background-color: #E3E5E8; /* Bardzo jasny szary, subtelny */
    border-radius: 10px;
}

/* --- Header --- */
.sheet-header[b-ls418zwtpt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 32px 24px 32px; /* Duże marginesy boczne */

    /* USUWAMY border-bottom - to klucz do stylu Revolut. 
       Oddzielenie następuje przez whitespace */
    border-bottom: none;
    flex-shrink: 0;
}

.sheet-title[b-ls418zwtpt] {
    font-size: 1.5rem; /* Większy tytuł */
    font-weight: 800;  /* Extra Bold */
    color: #191C1F;
    letter-spacing: -0.02em; /* Ciaśniejsze litery (modern look) */
}

/* --- Close Button (Ghost Style) --- */
.close-btn[b-ls418zwtpt] {
    background: transparent; /* Przezroczyste tło domyślnie */
    border: none;
    border-radius: 50%;
    width: 40px; /* Duża strefa kliknięcia */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #8B959E; /* Szary kolor ikony */
    transition: all 0.2s;
    margin-right: -8px; /* Optyczne wyrównanie do prawej */
}

.close-btn .material-symbols-rounded[b-ls418zwtpt] {
    font-size: 28px; /* Większa ikona */
}

.close-btn:hover[b-ls418zwtpt] {
    background: #F2F3F5; /* Tło pojawia się dopiero po najechaniu */
    color: #191C1F;
}

/* --- Content --- */
.sheet-content[b-ls418zwtpt] {
    padding: 0 32px 40px 32px; /* Content wyrównany z nagłówkiem */
    overflow-y: auto;

    /* Ukrywanie scrollbara dla estetyki (działa na Webkit) */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sheet-content[b-ls418zwtpt]::-webkit-scrollbar {
    display: none;
}
/* /Components/NavMenu.razor.rz.scp.css */
/* --- Nagłówek (Brand) --- */
.brand[b-3fefzfu3of] {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    font-weight: 800;
    font-size: 1.5rem;
    color: #191C1F;
    letter-spacing: -0.5px;
    /* Linia oddzielająca (opcjonalna, jeśli wolisz czystszy look to usuń) */
    /* border-bottom: 1px solid #F2F3F5; */
}

/* --- Kontener Linków --- */
.nav-scrollable[b-3fefzfu3of] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px; /* Odstęp między kafelkami menu */
}

.nav-item[b-3fefzfu3of] {
    /* Kontener pojedynczego elementu */
    width: 100%;
}

/* --- Stylizacja Linków (NavLink) --- */
/* Używamy ::deep, aby dostać się do środka komponentu NavLink */
[b-3fefzfu3of] .nav-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-radius: 16px;       /* Zaokrąglenie (Styl Revolut) */
    color: #8B959E;            /* Szary (nieaktywny) */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* --- Hover --- */
[b-3fefzfu3of] .nav-link:hover {
    background-color: #F2F3F5; /* Bardzo jasny szary */
    color: #191C1F;            /* Ciemny tekst */
}

/* --- Stan Aktywny (Active) --- */
/* Blazor automatycznie dodaje klasę .active do pasującego linku */
[b-3fefzfu3of] .nav-link.active {
    background-color: rgba(0, 117, 235, 0.08); /* Niebieska poświata */
    color: #0075EB;                            /* Niebieski Revolut */
}

/* --- Ikony --- */
[b-3fefzfu3of] .nav-link .material-symbols-rounded {
    font-size: 24px;
    /* Domyślna ikona (pusta w środku) */
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    transition: font-variation-settings 0.2s ease;
}

/* --- Ikona w stanie Aktywnym --- */
/* Wypełniamy ikonę kolorem (FILL 1), gdy link jest aktywny */
[b-3fefzfu3of] .nav-link.active .material-symbols-rounded {
    font-variation-settings: 'FILL' 1;
}
/* /Forms/AddUserForm.razor.rz.scp.css */

form[b-a1m8euvb22] {
    padding-top: 8px;
}

.form-group[b-a1m8euvb22] {
    margin-bottom: 24px; 
    display: flex;
    flex-direction: column;
    gap: 10px; 
}

label[b-a1m8euvb22] {
    font-size: 0.75rem;     
    font-weight: 800;       
    color: #8B959E;         
    text-transform: uppercase;
    letter-spacing: 0.8px;  
    margin-left: 8px;   
}



.actions[b-a1m8euvb22] {
    margin-top: 40px; 
    display: flex;
    gap: 16px;
    padding-bottom: 16px; 
}




.validation-message[b-a1m8euvb22] {
    color: #FF3B30;
    font-weight: 600;
    font-size: 0.8rem;
    margin-top: 6px;
    margin-left: 8px;
    display: flex;
    align-items: center;
}

.validation-message[b-a1m8euvb22]::before {
    content: '!';
    display: inline-block;
    margin-right: 6px;
    background: #FF3B30;
    color: white;
    width: 16px; height: 16px;
    border-radius: 50%;
    text-align: center;
    line-height: 16px;
    font-size: 10px;
}
/* /Layout/LoginLayout.razor.rz.scp.css */
/* Kontener na cały ekran */
.login-layout[b-fwikk8uzwe] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}



/* Responsywność na małych telefonach */
@media (max-width: 480px) {
    .login-layout[b-fwikk8uzwe] {
        padding: 0px;
        /* Na bardzo małych ekranach centrujemy, ale bez marginesów bocznych */
    }

    
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Import fontów */

/* Reset i Baza */
body[b-28t2yoij98] {
    background-color: #F2F3F5; /* Jasne szare tło Revolut */
    color: #191C1F;            /* Główny kolor tekstu */
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* --- Layout Główny --- */
.layout-container[b-28t2yoij98] {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* --- Sidebar (Menu) --- */
.sidebar[b-28t2yoij98] {
    background-color: #FFFFFF;
    width: 280px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #E8EAEF;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* --- POPRAWKI DLA IPHONE (Notch & Home Bar) --- */
    /* Dodajemy padding systemowy do naszego paddingu */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    /* Ważne: żeby padding nie powiększył height powyżej 100vh */
    box-sizing: border-box;
}

.brand[b-28t2yoij98] {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    font-weight: 800;
    font-size: 1.5rem;
    color: #191C1F;
    letter-spacing: -0.5px;
}

/* Linki w menu */
.nav-scrollable[b-28t2yoij98] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 16px;
}

.nav-item[b-28t2yoij98] {
    margin-bottom: 4px;
}

/* Wygląd linku */
.nav-item a[b-28t2yoij98] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-radius: 16px;       /* Zaokrąglenie przycisków */
    color: #8B959E;            /* Szary kolor nieaktywny */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

/* Hover */
.nav-item a:hover[b-28t2yoij98] {
    background-color: #F2F3F5;
    color: #191C1F;
}

/* Stan Aktywny - Styl Revolut */
.nav-item a.active[b-28t2yoij98] {
    background-color: rgba(0, 117, 235, 0.08); /* Jasny niebieski podkład */
    color: #0075EB;                            /* Revolut Blue */
}

/* Ikony */
.nav-item a .material-symbols-rounded[b-28t2yoij98] {
    font-size: 24px;
    /* Domyślne ustawienia ikony Google */
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Wypełnienie ikony gdy aktywna */
.nav-item a.active .material-symbols-rounded[b-28t2yoij98] {
    font-variation-settings: 'FILL' 1;
}

/* --- Main Content --- */
.main-content[b-28t2yoij98] {
    flex: 1;
    margin-left: 280px; /* Musi być taka sama jak width sidebara */
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* --- Header (Top Bar) --- */
/* --- Header (Top Bar) --- */
.top-bar[b-28t2yoij98] {
    /* Zmieniamy sztywną wysokość na minimalną */
    min-height: 64px;
    height: auto; /* Pozwalamy mu urosnąć o wysokość notcha */

    background: transparent;
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 900;

    /* --- POPRAWKA DLA IPHONE --- */
    /* Przesuwamy zawartość w dół o wysokość wyspy/notcha */
    padding-top: env(safe-area-inset-top);
}

.menu-toggle[b-28t2yoij98] {
    display: none; /* Ukryty na desktopie */
    background: none;
    border: none;
    cursor: pointer;
    color: #191C1F;
    padding: 8px;
    margin-right: 16px;
    border-radius: 50%;
}
.menu-toggle:active[b-28t2yoij98] { background-color: rgba(0,0,0,0.05); }

/* --- Overlay (Mobile) --- */
.overlay[b-28t2yoij98] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4); /* Przyciemnienie */
    z-index: 990;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    backdrop-filter: blur(2px);
}
.overlay.visible[b-28t2yoij98] {
    opacity: 1;
    pointer-events: auto;
}

.page-content[b-28t2yoij98]
{
    padding: 20px;
}

/* --- Responsywność (Mobile) --- */
@media (max-width: 992px) {
    .sidebar[b-28t2yoij98] {
        transform: translateX(-100%); /* Schowany */
        border-right: none;
        box-shadow: 0 4px 24px rgba(0,0,0,0.08); /* Cień zamiast ramki */
    }

    .sidebar.open[b-28t2yoij98] {
        transform: translateX(0); /* Wysunięty */
    }

    .top-bar[b-28t2yoij98] {
        background: #FFFFFF; /* Białe tło */
        box-shadow: 0 1px 0 #E8EAEF;

        /* Na mobile header musi mieć padding góry, żeby ominąć Dynamic Island */
        padding-top: env(safe-area-inset-top);
        /* Opcjonalnie: lekki padding dołu dla estetyki */
        padding-bottom: 8px;
    }

    /* Dodatkowa poprawka: Content nie może być schowany pod powiększonym headerem */
    /* Ponieważ Top-Bar jest sticky, content sam się ułoży, 
       ale warto dodać padding-bottom dla całej strony */
    .main-content[b-28t2yoij98] {
        margin-left: 0;
        padding-bottom: env(safe-area-inset-bottom); /* Żeby treść nie weszła pod pasek na dole */
    }

    .menu-toggle[b-28t2yoij98] {
        display: block;
    }
}
/* /Pages/LoginPage.razor.rz.scp.css */
/* Kontener główny - tło jasnoszare */
.login-container[b-pg8s7us4e5] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    padding: 20px;
}

/* Karta logowania - biała z cieniem */
.login-card[b-pg8s7us4e5] {
    background: #ffffff;
    width: 100%;
    max-width: 420px;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.20);
    text-align: center;
    transition: height 0.3s ease;
}

/* Logo placeholder */
.logo-placeholder[b-pg8s7us4e5] {
    width: 48px;
    height: 48px;
    background: #0075EB; /* Revolut Blue */
    color: white;
    font-size: 24px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px auto;
}

h3[b-pg8s7us4e5] {
    margin: 0 0 8px 0;
    font-size: 28px;
    font-weight: 700;
    color: #191C1F;
}

.subtitle[b-pg8s7us4e5] {
    color: #8B959E;
    margin-bottom: 32px;
    font-size: 15px;
    line-height: 1.5;
}

.form-content[b-pg8s7us4e5] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

.input-group label[b-pg8s7us4e5] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #8B959E;
    margin-bottom: 8px;
    margin-left: 4px;
}

/* Inputy w stylu fintech */
.fintech-input[b-pg8s7us4e5] {
    width: 100%;
    padding: 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    background-color: #F3F4F6;
    font-size: 16px;
    color: #191C1F;
    transition: all 0.2s;
    box-sizing: border-box;
}

.fintech-input:focus[b-pg8s7us4e5] {
    outline: none;
    background-color: #ffffff;
    border-color: #0075EB;
    box-shadow: 0 0 0 4px rgba(0, 117, 235, 0.1);
}

[b-pg8s7us4e5] .fintech-input.valid {
    /* Opcjonalnie: styl dla poprawnego pola */
    border-color: transparent;
}
[b-pg8s7us4e5] .fintech-input.invalid {
    border-color: #E11900;
    background-color: rgba(225, 25, 0, 0.03);
}

/* Przycisk akcji */
.action-btn[b-pg8s7us4e5] {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 12px;
    background-color: #0075EB;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 10px;
}

.action-btn:hover[b-pg8s7us4e5] {
    background-color: #005BB5;
}

.action-btn:disabled[b-pg8s7us4e5] {
    background-color: #B0D5FF;
    cursor: not-allowed;
}

/* "Pastylka" z emailem */
.user-pill[b-pg8s7us4e5] {
    background: #E8F2FF;
    color: #0075EB;
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border: 1px solid transparent;
    transition: 0.2s;
}

.user-pill:hover[b-pg8s7us4e5] {
    background: #D6E8FF;
    border-color: #B0D5FF;
}

.change-link[b-pg8s7us4e5] {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.8;
}

/* Linki w stopce */
.footer-link[b-pg8s7us4e5] {
    margin-top: 24px;
}

.footer-link a[b-pg8s7us4e5] {
    color: #0075EB;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

/* Błędy */
.error-message[b-pg8s7us4e5] {
    color: #E11900;
    font-size: 13px;
    background: rgba(225, 25, 0, 0.05);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

[b-pg8s7us4e5] .validation-message {
    color: #E11900;
    font-size: 12px;
    margin-top: 5px;
    margin-left: 4px;
}

/* Spinner ładowania */
.spinner[b-pg8s7us4e5] {
    display: inline-block;
    width: 20px;
    height: 20px;
}
/* /Pages/Users.razor.rz.scp.css */
/* --- Główny kontener --- */
.page-container[b-2pdetko3ni] {
    padding-bottom: 80px; /* Miejsce na dole, żeby content nie był ucięty */
    max-width: 800px;     /* Na desktopie nie rozciągamy na cały ekran */
    margin: 0 auto;       /* Centrowanie na desktopie */
}

/* --- Nagłówek --- */
.page-header[b-2pdetko3ni] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

h1[b-2pdetko3ni] {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.5px;
}

/* Przycisk Dodaj - Styl "Gradient Pill" */
.add-btn[b-2pdetko3ni] {
    background: #191C1F; /* Czarny/Grafitowy - bardzo elegancki na jasnym tle */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.add-btn:hover[b-2pdetko3ni] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.add-btn .material-symbols-rounded[b-2pdetko3ni] { font-size: 20px; }

/* --- Wyszukiwarka --- */
.search-section[b-2pdetko3ni] {
    margin-bottom: 24px;
}

.search-bar[b-2pdetko3ni] {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04); /* Subtelny cień */
    border: 1px solid transparent;
    transition: all 0.2s;
}

.search-bar:focus-within[b-2pdetko3ni] {
    border-color: #0075EB;
    box-shadow: 0 4px 12px rgba(0, 117, 235, 0.1);
}

.search-icon[b-2pdetko3ni] { color: #8B959E; }

.search-bar input[b-2pdetko3ni] {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 1rem;
    font-weight: 600;
    color: #191C1F;
    font-family: inherit;
}
.search-bar input[b-2pdetko3ni]::placeholder { color: #B0B8C1; font-weight: 500; }

/* --- Lista Użytkowników (Karty) --- */
.users-list[b-2pdetko3ni] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.user-card[b-2pdetko3ni] {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.2s;
    /* Efekt klikalności */
    cursor: default;
}

/* --- Awatar --- */
.user-avatar[b-2pdetko3ni] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Kolory awatarów w zależności od roli */
.role-admin[b-2pdetko3ni] { background: #E3F2FD; color: #0075EB; }   /* Niebieski */
.role-worker[b-2pdetko3ni] { background: #F3E5F5; color: #9C27B0; }  /* Fiolet */
.role-viewer[b-2pdetko3ni] { background: #F5F5F5; color: #616161; }  /* Szary */

/* --- Info --- */
.user-info[b-2pdetko3ni] {
    flex: 1;
    min-width: 0; /* Ważne dla ucinania tekstu (ellipsis) */
}

.user-name[b-2pdetko3ni] {
    font-weight: 700;
    font-size: 1rem;
    color: #191C1F;
    margin-bottom: 2px;
}

.user-email[b-2pdetko3ni] {
    font-size: 0.85rem;
    color: #8B959E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Meta (Prawa strona) --- */
.user-meta[b-2pdetko3ni] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

/* Badge Statusu */
.status-badge[b-2pdetko3ni] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-badge.active[b-2pdetko3ni] {
    background: #E6F6EC; /* Jasny zielony */
    color: #038039;      /* Ciemny zielony */
}

.status-badge.pending[b-2pdetko3ni] {
    background: #FFF4E5; /* Jasny pomarańcz */
    color: #B95000;      /* Ciemny pomarańcz */
}

.status-badge .dot[b-2pdetko3ni] {
    width: 6px; height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

/* Badge Rol (tylko desktop) */
.role-badge[b-2pdetko3ni] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #8B959E;
    background: #F2F3F5;
    padding: 2px 8px;
    border-radius: 6px;
}

/* --- Loading / Empty --- */
.loading-state[b-2pdetko3ni], .empty-state[b-2pdetko3ni] {
    text-align: center;
    padding: 40px 0;
    color: #8B959E;
}
.spinner[b-2pdetko3ni] {
    border: 3px solid #F2F3F5;
    border-top: 3px solid #0075EB;
    border-radius: 50%;
    width: 24px; height: 24px;
    animation: spin-b-2pdetko3ni 1s linear infinite;
    margin: 0 auto 16px auto;
}
.empty-icon[b-2pdetko3ni] { font-size: 48px; margin-bottom: 8px; opacity: 0.5; }

@keyframes spin-b-2pdetko3ni { 100% { transform: rotate(360deg); } }

/* --- Responsywność --- */
.mobile-only[b-2pdetko3ni] { display: none; }

@media (max-width: 600px) {
    .desktop-only[b-2pdetko3ni] { display: none; }
    .mobile-only[b-2pdetko3ni] { display: block; }

    .user-role[b-2pdetko3ni] {
        font-size: 0.75rem;
        color: #191C1F;
        background: #F2F3F5;
        display: inline-block;
        padding: 2px 8px;
        border-radius: 6px;
        margin-top: 4px;
        font-weight: 600;
    }

    .add-btn .btn-text[b-2pdetko3ni] { display: none; } /* Na mobile tylko plusik */
    .add-btn[b-2pdetko3ni] { padding: 10px; border-radius: 50%; } /* Okrągły przycisk */
}