/* ================================================================
   portals-switcher.css — Comutator portaluri in headerul global
   Inlocuieste butonul "Customer Portal" cu un dropdown care arata
   cele 3 portaluri iDava (Customer Portal + CautDentistBun + PS).
   ================================================================ */

/* ── Wrapper ───────────────────────────────────────────────────── */
.portals-switcher {
    position: relative;
    display: inline-block;
}

/* ── Trigger ───────────────────────────────────────────────────── */
.portals-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border: none;
    outline: none;
}

.portals-trigger:focus,
.portals-trigger:focus-visible,
.portals-trigger:active {
    outline: none;
    border: none;
    box-shadow: none;
}

.portals-chevron {
    transition: transform 0.2s ease;
}

.portals-trigger[aria-expanded="true"] .portals-chevron {
    transform: rotate(180deg);
}

/* ── Dropdown ──────────────────────────────────────────────────── */
.portals-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
    padding: 0.5rem;
    z-index: 1000;
    min-width: 260px;
    animation: portals-dropdown-in 0.18s ease;
}

.portals-dropdown.open {
    display: block;
}

@keyframes portals-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Items ─────────────────────────────────────────────────────── */
.portals-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    text-decoration: none;
    color: #1f2937;
    transition: background 0.15s;
    position: relative;
}

.portals-item:hover {
    background: #f5f7ff;
}

.portals-item-active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.10) 0%, rgba(118, 75, 162, 0.10) 100%);
    cursor: default;
}

.portals-item-active:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.10) 0%, rgba(118, 75, 162, 0.10) 100%);
}

.portals-item-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Coloreaza logo-ul (PNG cu transparenta) in mov, sa fie consistent cu paleta iDava */
.portals-item-logo-tinted {
    filter: brightness(0) saturate(100%) invert(40%) sepia(65%) saturate(2200%) hue-rotate(230deg) brightness(94%) contrast(94%);
}

.portals-item-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    flex: 1;
}

.portals-item-active .portals-item-name {
    color: #667eea;
}

.portals-item-external {
    color: #9ca3af;
    flex-shrink: 0;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* Hamburger-ul apare la <= 1024px (vezi idava-home.css),
       asa ca regulile mobile aici trebuie sa porneasca de la acelasi prag. */
    /* Dropdown-ul de desktop ascuns pe mobile.
       Pe mobile cele 3 portaluri apar direct in meniul hamburger
       sub un buton "App portal" stilat ca pe desktop. */
    .portals-switcher {
        display: none;
    }

    /* "App portal" - titlu sectiune in meniul mobile, distinct dar nu buton */
    .portals-mobile-header {
        display: block;
        font-size: 1.05rem;
        font-weight: 700;
        color: #667eea;
        padding: 1.25rem 0.5rem 0.5rem;
        letter-spacing: 0;
    }

    /* Item-urile aplicatiilor (logo + nume) listate sub butonul "App portal" */
    .portals-mobile-item {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 0.55rem 0.75rem;
        text-decoration: none;
        border-radius: 10px;
        transition: background 0.15s;
        position: relative;
        width: 100%;
        box-sizing: border-box;
    }

    .portals-mobile-item:hover {
        background: rgba(102, 126, 234, 0.08);
    }

    .portals-mobile-item-active {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.10) 0%, rgba(118, 75, 162, 0.10) 100%);
    }

    .portals-mobile-item-active:hover {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.10) 0%, rgba(118, 75, 162, 0.10) 100%);
    }

    .portals-mobile-logo {
        width: 36px;
        height: 36px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .portals-mobile-logo-tinted {
        filter: brightness(0) saturate(100%) invert(40%) sepia(65%) saturate(2200%) hue-rotate(230deg) brightness(94%) contrast(94%);
    }

    .portals-mobile-name {
        font-size: 0.95rem;
        font-weight: 500;
        color: inherit;
        flex: 1;
        line-height: 1;
        position: relative;
        bottom: 12px;
    }

    .portals-mobile-item-active .portals-mobile-name {
        color: #667eea;
        font-weight: 600;
    }

    .portals-mobile-external {
        color: #9ca3af;
        flex-shrink: 0;
        position: relative;
        bottom: 12px;
    }
}