/* Stiluri proprii pentru panoul Poleo.
 *
 * DE CE EXISTA FISIERUL ASTA (nu-l sterge crezand ca e redundant):
 * CSS-ul Filament e PRECOMPILAT si contine doar utilitarele pe care le foloseste
 * Filament insusi - NU scaneaza blade-urile noastre. Deci clasele Tailwind scrise
 * de noi (h-4 w-4, flex, gap-*) NU se aplica deloc. Concret: iconita comutatorului
 * de firma iesea 125.7px in loc de 16px si dadea peste cap toata bara de sus.
 * Solutia fara build step (fara npm/vite pe server) = CSS explicit, scris de mana.
 */

.poleo-switcher {
    display: inline-flex;
    align-items: center;
}

.poleo-switcher svg {
    width: 1rem;
    height: 1rem;
    flex: none;          /* altfel se intinde cat tine containerul */
}

.poleo-switcher__label,
.poleo-switcher__button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    border-radius: 0.5rem;
    padding: 0.3rem 0.625rem;
    white-space: nowrap;
}

.poleo-switcher__name {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.poleo-switcher__label {
    color: rgb(82 82 91);
}

.poleo-switcher__button {
    border: 1px solid rgb(228 228 231);
    background: #fff;
    color: rgb(63 63 70);
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.poleo-switcher__button:hover {
    background: rgb(250 250 250);
}

.poleo-switcher__icon {
    color: #008be5;      /* albastrul din logo */
}

.poleo-switcher__chevron {
    color: rgb(161 161 170);
}

/* varianta intunecata */
.dark .poleo-switcher__label {
    color: rgb(212 212 216);
}

.dark .poleo-switcher__button {
    border-color: rgb(255 255 255 / 0.1);
    background: rgb(255 255 255 / 0.05);
    color: rgb(228 228 231);
}

.dark .poleo-switcher__button:hover {
    background: rgb(255 255 255 / 0.1);
}